/* ════════════════════════════════════════════════════════
   woo_pdv_wap.css
   Page de vente WooCommerce — Apprendre la Peinture
   Version 1.0
════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────
   VARIABLES
──────────────────────────────────────── */
:root {
  /* Couleurs principales */
  --wap-principal:       #545959;
  --wap-secondaire:      #7A7A7A;
  --wap-texte:           #7A7A7A;
  --wap-accent:          #65CCCC;
  --wap-h1:              #317970;
  --wap-orange:          #FD6601;
  --wap-noir:            #000000;

  /* Fonds de blocs */
  --wap-clair:           #FFFFFF;
  --wap-mi-clair:        #DAF3F3;
  --wap-mi-sombre:       #B3E5E6;   /* réservé */ 
  --wap-moyen:			 #4dafaf;
  --wap-sombre:          #317970;
  --wap-exergue:         #F2E6E6;
  --wap-rose-terre:      #E5CBCA;

  /* Textes sur fonds colorés */
  --wap-texte-sombre:    #FFFFFF;
  --wap-accent-sombre:   #66DAD9;

  /* Typo */
  --wap-font-titre:      'Acme', serif;
  --wap-font-corps:      'Open Sans', sans-serif;
  --wap-font-ui:         'Montserrat', sans-serif;

  /* Layout */
  --wap-max:             1200px;
  --wap-pad:             40px;
  --wap-pad-mobile:      20px;
  --wap-gap:             3rem;
  --wap-radius:          6px;
  --wap-shadow:          0 2px 15px rgba(0,0,0,0.1);
  --wap-border:          1px solid #e0e0e0;
}

/* ────────────────────────────────────────
   RESET SCOPED
──────────────────────────────────────── */
.wap-pdv *,
.wap-pdv *::before,
.wap-pdv *::after {
  box-sizing: border-box;
}

.wap-pdv {
  font-family: var(--wap-font-corps);
  font-size: 16px;
  line-height: 1.7;
  color: var(--wap-texte);
}

/* ────────────────────────────────────────
   TYPOGRAPHIE
──────────────────────────────────────── */
.wap-pdv h1 {
  font-family: var(--wap-font-titre);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--wap-h1);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

.wap-pdv h2 {
  font-family: var(--wap-font-titre);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--wap-h1);
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.wap-pdv h2.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wap-pdv h2.left {
  text-align: left;
}

.wap-pdv h3 {
  font-family: var(--wap-font-corps);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--wap-principal);
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.wap-pdv h4 {
  font-family: var(--wap-font-corps);
  font-size: 1rem;
  font-weight: 600;
  color: var(--wap-principal);
  margin-bottom: 0.6rem;
}

.wap-pdv h5 {
  font-family: var(--wap-font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--wap-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.wap-pdv p {
  margin-bottom: 1rem;
  color: var(--wap-texte);
}

.wap-pdv p:last-child { margin-bottom: 0; }

.wap-pdv strong,
.wap-pdv b {
  font-weight: 600;
  color: var(--wap-principal);
}

.wap-pdv em,
.wap-pdv i {
  font-style: italic;
}

.wap-pdv ul,
.wap-pdv ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.wap-pdv li {
  margin-bottom: 0.4rem;
}

.wap-pdv ul ul,
.wap-pdv ol ol {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

/* Titres sur fonds sombres */
.wap-bloc-sombre h2,
.wap-bloc-sombre h3,
.wap-bloc-sombre h4,
.wap-bloc-sombre h5,
.wap-bloc-sombre p,
.wap-bloc-sombre strong,
.wap-bloc-sombre li {
  color: var(--wap-texte-sombre);
}

.wap-bloc-sombre h2 {
  color: var(--wap-accent-sombre);
}

/* ────────────────────────────────────────
   CONTENEUR INTERNE
──────────────────────────────────────── */
.wap-inner {
  max-width: var(--wap-max);
  margin: 0 auto;
  padding: 0 var(--wap-pad);
}

/* ────────────────────────────────────────
   BLOCS DE FOND
──────────────────────────────────────── */

/* Blanc */
.wap-bloc-clair {
  background: var(--wap-clair);
  padding: var(--wap-gap) 0;
  border-bottom: var(--wap-border);
}
.wap-bloc-clair:last-of-type {
  border-bottom: none;
}

/* Teal clair */
.wap-bloc-mi-clair {
  background: var(--wap-mi-clair);
  padding: var(--wap-gap) 0;
}

/* Réservé */
.wap-bloc-mi-sombre {
  background: var(--wap-mi-sombre);
  padding: var(--wap-gap) 0;
}

/* Fond sombre (bloc achat, newsletter) */
.wap-bloc-sombre {
  background: var(--wap-sombre);
  padding: var(--wap-gap) 0;
}

/* Exergue — Attention */
.wap-bloc-exergue {
  background: var(--wap-exergue);
  padding: var(--wap-gap) 0;
  border-left: 4px solid var(--wap-rose-terre);
}

/* ────────────────────────────────────────
   BARRE STATS — EN BREF
──────────────────────────────────────── */
.wap-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.wap-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.wap-stat-icon {
  width: 48px;
  height: 48px;
  color: var(--wap-accent);
}

.wap-stat-value {
  font-family: var(--wap-font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--wap-h1);
}

/* ────────────────────────────────────────
   BOUTONS
──────────────────────────────────────── */
.wap-bouton,
.wap-bouton-achat {
  display: inline-block;
  font-family: var(--wap-font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: filter 0.3s ease, transform 0.15s ease;
  min-height: 44px;
  line-height: 1.4;
}

.wap-bouton {
  background: var(--wap-accent);
  color: #fff;
}

.wap-bouton-achat {
  background: var(--wap-moyen);
  color: #fff;
  font-size: 1.05rem;
  padding: 14px 36px;
  width: 100%;
}

.wap-bouton:hover,
.wap-bouton-achat:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.wap-bouton:active,
.wap-bouton-achat:active {
  transform: translateY(0);
}

/* ────────────────────────────────────────
   BLOC ACHAT
──────────────────────────────────────── */
/* ────────────────────────────────────────
   CORRECTION BLOC ACHAT
──────────────────────────────────────── */
body .wap-achat-titre {
    color: var(--wap-accent-sombre) !important; /* Force le passage au Teal */
    font-size: 1.5rem !important;               /* Augmente la taille */
    text-align: center !important;              /* Centre le texte */
    margin: 0 0 15px 0 !important;              /* Espace avec le bouton */
    display: block !important;
}
body .wap-achat-col-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;    /* Centre horizontalement le titre et le bouton */
    justify-content: center !important;
}

body .wap-bouton-achat {
    width: auto !important;           /* Le bouton reprend la taille de son texte */
    padding: 12px 35px !important;    /* Lui donne une belle forme */
}

/* Fond du bloc */
.wap-bloc-sombre {
    background-color: var(--wap-sombre) !important;
    padding: 30px 0 !important;
}

/* La Grille 3 colonnes */
.wap-achat-grid {
    display: grid !important;
    grid-template-columns: 140px 1fr 180px !important;
    gap: 30px !important;
    align-items: center !important;
}

/* LE TITRE (Cible prioritaire) */
body .wap-achat-titre {
    color: var(--wap-accent-sombre) !important; /* Ton Teal #66DAD9 */
    font-size: 1.5rem !important;
    text-align: center !important;
    margin: 0 0 15px 0 !important;
    display: block !important;
    font-family: var(--wap-font-titre) !important;
}

/* LA COLONNE CENTRALE */
body .wap-achat-col-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* LE BOUTON */
body .wap-bouton-achat {
    width: auto !important;
    background-color: var(--wap-accent-sombre) !important;
    color: var(--wap-noir) !important;
    padding: 12px 30px !important;
    border-radius: 4px !important;
}

/* LA COLONNE DROITE (Prix + Logos) */
body .wap-achat-col-side {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
}

body .prix-actuel {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}
/*__________________________________________________
.wap-bloc-achat-container {
    /* Utilise la variable du thème ou fallback sur une couleur sombre si non définie */
    background-color: var(--wap-sombre, #1a1a1a); 
    padding: 25px;
    border-radius: 10px;
    margin: 30px 0;
}

.wap-achat-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
}

.wap-achat-image {
  width: 580px;
  height: 360px;
  object-fit: cover;
  border-radius: var(--wap-radius);
  box-shadow: var(--wap-shadow);
}

/* 1. On augmente la largeur de la colonne pour accueillir une image plus grande */
body .wap-achat-grid {
    grid-template-columns: 200px 1fr 180px !important; /* On passe de 140px à 200px */
}

/* 2. On force l'image à prendre toute la largeur disponible de sa colonne */
body .wap-achat-image {
    width: 100% !important;   /* L'image prend toute la largeur des 200px */
    height: auto !important;  /* Garde les proportions */
    max-width: none !important; 
    border-radius: 8px !important; /* Optionnel : pour arrondir les coins */
    display: block !important;
}

/* 3. On s'assure que le conteneur ne restreint pas l'image */
body .wap-achat-col-image {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.wap-achat-titre{
    margin: 0 !important;
    font-size: 1.5rem;    /* Plus gros comme demandé */
    font-weight: 700;
    line-height: 1.2;
    color: teal;         /* Couleur Teal */
}

.wap-achat-prix {
  margin-bottom: 0.8rem;
}

.wap-achat-prix .prix-barre {
  font-size: 1rem;
  color: var(--wap-accent-sombre);
  text-decoration: line-through;
  opacity: 0.7;
  margin-right: 0.5rem;
}

.wap-achat-prix .prix-actuel {
  font-family: var(--wap-font-ui);
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}

.wap-achat-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.wap-achat-logos img {
  height: 28px;
  width: auto;
  opacity: 0.9;
}

.wap-securise {
  font-family: var(--wap-font-ui);
  font-size: 0.75rem;
  color: var(--wap-accent-sombre);
  text-align: center;
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}



/* ────────────────────────────────────────
   GRILLE PRODUITS
──────────────────────────────────────── */
.wap-grille {
  display: grid;
  grid-template-columns: repeat(var(--wap-cols, 4), 1fr);
  gap: var(--wap-grille-gap, 1rem);
}

.wap-carte-produit {
  background: #fff;
  border: var(--wap-border);
  border-radius: var(--wap-radius);
  overflow: hidden;
  box-shadow: var(--wap-shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wap-carte-produit:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
}

.wap-carte-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.wap-carte-image-lien {
  display: block;
  overflow: hidden;
}

.wap-carte-body {
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.wap-carte-titre {
  font-family: var(--wap-font-corps);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wap-h1);
  text-decoration: none;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--wap-mi-clair);
  padding-bottom: 0.4rem;
  display: block;
}

.wap-carte-titre:hover {
  color: var(--wap-accent);
}

.wap-carte-prix-wrap {
  margin-bottom: 0.6rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.wap-carte-prix {
  font-family: var(--wap-font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--wap-h1);
}

.wap-carte-prix-barre {
  font-size: 0.85rem;
  color: var(--wap-secondaire);
  text-decoration: line-through;
}

.wap-carte-bouton {
  display: block;
  width: 100%;
  background: var(--wap-accent);
  color: #fff;
  text-align: center;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: var(--wap-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: filter 0.2s ease;
  margin-top: auto;
  min-height: 44px;
  line-height: 28px;
}

.wap-carte-bouton:hover {
  filter: brightness(1.1);
}

.wap-carte-bouton::before {
  content: '🛒 ';
  font-size: 0.85rem;
}

/* ────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --wap-pad: 30px; }
  .wap-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .wap-grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --wap-pad: var(--wap-pad-mobile); }

  .wap-pdv h1 { font-size: 1.8rem; }
  .wap-pdv h2 { font-size: 1.4rem; }

  .wap-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  .wap-achat-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .wap-achat-image { width: 80px; height: 60px; margin: 0 auto; }
  .wap-achat-logos { flex-direction: row; justify-content: center; }

  .wap-bouton,
  .wap-bouton-achat { display: block; width: 100%; }

  .wap-grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .wap-grille { grid-template-columns: repeat(2, 1fr); }
}
/* Les icones de la barre stats 
/* Conteneur des icônes (Bleu très clair) */
.wap-bloc-mi-clair {
    background-color: #E0F7F7 !important; /* Le bleu clair de ton modèle */
    padding: 40px 0 !important;
}

/* Grille des stats */
.wap-stats-grid {
    display: flex !important;
    justify-content: space-around !important;
    flex-wrap: wrap;
    gap: 20px;
}

/* Item individuel (Icône + Texte) */
.wap-stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    min-width: 120px;
}

/* L'icône SVG (Teal et agrandie) */
.wap-stat-icon {
    width: 45px !important;
    height: 45px !important;
    display: block !important;
    margin: 0 auto 12px auto !important;
    /* CRITIQUE : Tes SVG utilisent stroke, pas fill */
    stroke: #66DAD9 !important; 
    /* Sécurité pour le tracé */
    stroke-width: 1.5 !important;
    /* On s'assure qu'il n'y a pas de masquage */
    overflow: visible !important;
}

/* Le texte sous l'icône */
.wap-stat-value {
    color: #0E5E5D !important; /* Texte sombre pour la lisibilité */
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}
/* ────────────────────────────────────────
   SOMMAIRE & LISTES AMÉLIORÉES
──────────────────────────────────────── */

/* Sommaire avec points de suite */
.wap-sommaire-list {
    list-style: none;
    padding: 0;
}

.wap-sommaire-item {
    display: flex;
    align-items: baseline; /* Aligne le texte sur la ligne de base */
    margin-bottom: 8px;
}

.wap-sommaire-name {
    flex-shrink: 0;
    padding-right: 5px;
}

.wap-sommaire-dots {
    flex-grow: 1; /* Prend tout l'espace entre le nom et la durée */
    border-bottom: 2px dotted #7A7A7A; /* Crée les pointillés */
    margin: 0 10px;
    position: relative;
    top: -5px; /* Ajuste la hauteur des points pour qu'ils soient centrés */
}

.wap-sommaire-duration {
    flex-shrink: 0;
    font-family: var(--wap-font-ui);
    font-weight: 600;
    color: var(--wap-h1);
}

/* Listes à puces (Bénéfices) plus élégantes */
.wap-benefices-list {
    list-style: none;
    padding-left: 0.5rem;
}

.wap-benefices-list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 12px;
}

.wap-benefices-list li::before {
    content: '✓'; /* Une coche propre */
    position: absolute;
    left: 0;
    color: var(--wap-accent);
    font-weight: bold;
    font-size: 1.1rem;