/* =====================================================================
   L'Atelier des Graines — Vilmorin
   Maquette statique (reprise du prototype Adobe XD)
   ===================================================================== */

/* ---------- 1. Design tokens ---------- */
/* Valeurs relevées dans le fichier XD source (SITE/design/inventaire.json),
   et non approximées d'après des captures d'écran. */
:root{
  /* Verts */
  --vert:           #8ebf21;   /* vert signature, teinte la plus employée */
  --vert-olive:     #98bb43;   /* « Mon compte », accents secondaires */
  --vert-pomme:     #64a70b;
  --vert-foret:     #2f663f;   /* titres display */
  --vert-fonce:     #204629;   /* navigation, pied de page, aplats sombres */
  --vert-emeraude:  #1b8551;   /* niveau « Je progresse » */
  --vert-pastel:    #e4efd0;   /* fond des cercles éditoriaux */

  /* Accents */
  --orange:         #e35205;   /* niveau « Je découvre », appels à l'action */
  --prune:          #80276c;   /* niveau « Je maîtrise » */
  --rose:           #e95280;
  --rose-poudre:    #bc7076;   /* illustrations, titres éditoriaux */
  --jaune:          #f3bf41;
  --brun:           #513b2f;

  /* Fonds */
  --papier:         #ece7d9;   /* kraft, texture de fond */
  --creme:          #f4f8f6;   /* fond de section clair */
  --creme-clair:    #f9fbfa;
  --blanc:          #ffffff;

  /* Texte */
  --encre:          #204629;
  --encre-doux:     #707070;   /* durées, légendes */

  /* Rythme */
  --max:            1360px;
  --gouttiere:      32px;
  --radius:         14px;
  --ombre:          0 10px 30px rgba(32,70,41,.10);
  --ombre-forte:    0 18px 44px rgba(32,70,41,.16);

  /* Typographie de la charte.
     HighVoltage Rough est une police sous licence : déposer les fichiers
     woff2 dans assets/fonts/ (voir @font-face plus bas). Tant qu'ils sont
     absents, la pile de secours prend le relais sans casser la mise en page. */
  --display: 'HighVoltage Rough', 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --script:  'Lumberjack', 'Kaushan Script', cursive;
  --texte:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* HighVoltage Rough — police de la charte, fournie par le client.
   Le woff2 pèse 187 Ko contre 626 Ko pour le ttf d'origine. */
@font-face{
  font-family:'HighVoltage Rough';
  src:url('../fonts/highvoltage-rough.woff2') format('woff2'),
      url('../fonts/highvoltage-rough.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--texte);
  font-size:17px;
  line-height:1.65;
  color:var(--encre);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
ul{margin:0;padding:0;list-style:none}

/* ---------- 3. Utilitaires ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere)}
.section{position:relative;padding:96px 0}
.center{text-align:center}

/* Titres display bicolores : <h2 class="titre">Nos programmes <em>pour jardiner</em></h2> */
.titre{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(34px,4.2vw,58px);
  line-height:1.05;
  letter-spacing:.01em;
  color:var(--vert-fonce);
  margin:0 0 18px;
}
.titre em{font-style:normal;color:var(--vert)}
.titre .orange{color:var(--orange)}
.titre .prune{color:var(--prune)}
.sous-titre{
  max-width:640px;margin:0 auto 48px;
  color:var(--encre-doux);font-size:16px;text-align:center;
}

/* Courbes organiques entre sections.
   .courbe-haut : la section « déborde » vers le haut en arc de cercle. */
.courbe-haut::before,
.courbe-bas::after{
  content:"";position:absolute;left:-6%;right:-6%;height:90px;
  background:inherit;z-index:1;pointer-events:none;
}
.courbe-haut::before{top:-72px;border-radius:50% 50% 0 0 / 100% 100% 0 0}
.courbe-bas::after{bottom:-72px;border-radius:0 0 50% 50% / 0 0 100% 100%}

/* Placeholders visuels (à remplacer par les vrais visuels de la charte) */
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,#6d8a4a,#3f5c2c)}
.ph::after{
  content:attr(data-label);position:absolute;inset:0;
  display:grid;place-items:center;text-align:center;padding:12px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-family:var(--texte);
}
.ph--terre{background:linear-gradient(140deg,#6b4a30,#3a2718)}
.ph--feuille{background:linear-gradient(140deg,#7fa451,#40632c)}
.ph--recolte{background:linear-gradient(140deg,#a8552f,#5d3018)}
.ph--outils{background:linear-gradient(140deg,#8c9a6a,#4f5c38)}

/* Bouton lecture vidéo */
.play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;
  background:rgba(255,255,255,.85);display:grid;place-items:center;
  transition:transform .2s ease,background .2s ease;
}
.play::before{content:"";border-left:18px solid var(--encre);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.play:hover{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.play--rose{background:rgba(196,64,122,.9)}
.play--rose::before{border-left-color:#fff}

/* ---------- 4. En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:60;
  background:var(--blanc);
  display:flex;align-items:stretch;justify-content:space-between;
  box-shadow:0 2px 14px rgba(0,0,0,.07);
}
.logo{
  display:flex;align-items:center;gap:18px;padding:0 26px 0 0;
}
.logo__marque{
  background:var(--vert-fonce);color:#fff;
  padding:14px 26px;border-radius:0 0 10px 10px;
  font-family:'Times New Roman',serif;font-size:26px;font-style:italic;
  letter-spacing:.02em;line-height:1;text-align:center;
}
.logo__marque small{display:block;font-size:8px;font-style:normal;letter-spacing:.3em;opacity:.75;margin-top:4px}
.logo__nom{font-family:var(--display);font-size:26px;line-height:1;color:var(--vert-fonce)}
.logo__nom .script{font-family:var(--script);color:var(--vert);font-size:30px;margin-left:6px}
.logo__nom span{display:block;font-family:var(--texte);font-weight:500;font-size:12.5px;letter-spacing:.02em;color:var(--encre);margin-top:6px}

.nav{display:flex;align-items:stretch}
.nav a{
  display:flex;align-items:center;gap:7px;padding:0 26px;
  font-size:14.5px;font-weight:500;
  border-left:1px solid #e6e2d6;
  transition:color .18s ease;
}
.nav a:hover{color:var(--vert)}
.nav a.compte{color:var(--vert);font-weight:700}
.nav .chevron{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.panier{
  display:flex;align-items:center;padding:0 34px;
  background:var(--vert-fonce);color:#fff;position:relative;
}
.panier .badge{
  position:absolute;top:14px;right:22px;
  background:var(--orange);color:#fff;font-size:11px;font-weight:700;
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
}

/* Sous-menu formations */
.nav .a-menu{position:relative}
.sous-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid #e6e2d6;border-top:0;
  min-width:230px;padding:10px 0;box-shadow:var(--ombre);
  display:none;
}
.nav .a-menu:hover .sous-menu{display:block}
.sous-menu a{
  display:block;border:0;padding:9px 20px;text-align:center;
  font-size:12.5px;font-weight:700;line-height:1.35;
}

/* ---------- 5. Hero ---------- */
.hero{
  position:relative;min-height:640px;display:flex;align-items:center;
  background:linear-gradient(105deg,#3a2a1c 0%,#5a4227 45%,#7d6a3d 100%);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 40%,rgba(120,150,70,.35),transparent 60%),
             linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.15) 40%,rgba(0,0,0,.25));
}
.hero::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:-70px;height:150px;
  background:var(--creme);border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.hero__contenu{position:relative;z-index:2;width:100%}
.hero__titre{
  font-family:var(--display);font-weight:400;
  font-size:clamp(44px,6.4vw,92px);line-height:1.02;
  color:#fff;margin:0;text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.hero__titre em{font-style:normal;color:var(--vert-olive)}
.hero__filet{width:150px;height:3px;background:#fff;margin:34px 0 22px}
.hero__accroche{color:#fff;font-size:20px;max-width:600px;margin:0}
.hero__accroche b{font-weight:500}
.hero .play{top:auto;left:auto;position:absolute;right:22%;top:44%}

/* Mots surlignés dans l'accroche */
.marqueur{
  display:inline-block;padding:2px 10px;border-radius:4px;
  font-family:var(--display);font-size:.9em;color:#fff;
  transform:rotate(-2deg);
}
.marqueur--vert{background:var(--vert)}
.marqueur--orange{background:var(--orange);transform:rotate(1.5deg)}
.marqueur--prune{background:var(--prune);transform:rotate(-1deg)}

/* Hero secondaire (pages formation) */
.hero-formation{
  position:relative;background:var(--papier);padding:64px 0 96px;overflow:hidden;
}
.hero-formation::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:-60px;height:120px;
  background:var(--papier);border-radius:0 0 50% 50% / 0 0 100% 100%;
}
.hero-formation .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;z-index:2}
.hero-formation h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(36px,4.6vw,62px);line-height:1.06;
  color:var(--orange);margin:16px 0 0;
}
.hero-formation .baseline{
  font-family:var(--display);font-size:clamp(20px,2.2vw,30px);
  color:var(--vert-fonce);margin-top:14px;
}
.illu{aspect-ratio:16/10;border:2px dashed rgba(46,74,43,.3);border-radius:var(--radius);
  display:grid;place-items:center;color:rgba(46,74,43,.5);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- 6. Badges niveau / durée ---------- */
.badges{display:flex;gap:10px;align-items:center;justify-content:center;margin:14px 0}
.badge-niveau,.badge-duree{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:500;padding:4px 11px;border-radius:999px;
  white-space:nowrap;
}
.badge-duree{border:1px solid #cfcabb;color:var(--encre-doux)}
.badge-niveau{color:#fff}
.badge-niveau--decouvre{background:var(--orange)}
.badge-niveau--progresse{background:var(--vert)}
.badge-niveau--maitrise{background:var(--prune)}

/* ---------- 7. Cartes formation ---------- */
.grille-formations{
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:start;
}
.carte{
  background:var(--blanc);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--ombre);display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease;
}
.carte:hover{transform:translateY(-6px);box-shadow:var(--ombre-forte)}
.carte__visuel{position:relative;aspect-ratio:4/3}
.carte__visuel.illu-trait{background:var(--creme);border-bottom:1px solid #ece7d9}
.carte__corps{padding:14px 16px 20px;text-align:center;display:flex;flex-direction:column;gap:10px;flex:1}
.carte__titre{
  font-family:var(--display);font-weight:400;font-size:19px;line-height:1.18;
  color:var(--vert-fonce);margin:0;
}
.carte__titre span{display:block}
.carte__titre .accent-decouvre{color:var(--orange)}
.carte__titre .accent-progresse{color:var(--vert)}
.carte__titre .accent-maitrise{color:var(--prune)}
.carte__cta{margin-top:auto}

.btn{
  display:inline-block;padding:8px 18px;border-radius:999px;
  font-family:var(--display);font-size:13px;font-weight:400;letter-spacing:.02em;
  border:1.5px solid currentColor;transition:all .18s ease;
}
.btn--plein{background:var(--orange);border-color:var(--orange);color:#fff}
.btn--plein:hover{background:#b8501f;border-color:#b8501f}
.btn--decouvre{color:var(--orange)}
.btn--progresse{color:var(--vert)}
.btn--maitrise{color:var(--prune)}
.btn--decouvre:hover{background:var(--orange);color:#fff}
.btn--progresse:hover{background:var(--vert);color:#fff}
.btn--maitrise:hover{background:var(--prune);color:#fff}
.btn--vert{background:var(--vert-olive);border-color:var(--vert-olive);color:#fff;padding:9px 22px}
.btn--vert:hover{background:var(--vert);border-color:var(--vert)}
.btn--grand{font-size:16px;padding:14px 30px}

/* ---------- 8. Cercles éditoriaux ---------- */
.cercles{
  display:flex;justify-content:center;align-items:flex-start;
  gap:0;position:relative;flex-wrap:wrap;
}
.cercle{
  width:330px;aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:52px 44px;margin:0 -14px;position:relative;z-index:2;
}
.cercle--blanc{background:var(--blanc)}
.cercle--vert{background:var(--vert-pastel)}
.cercle h3{font-family:var(--display);font-weight:400;font-size:20px;color:var(--vert-fonce);margin:0 0 10px}
.cercle p{font-size:14.5px;line-height:1.55;margin:0;color:var(--encre)}
.cercle--decale{margin-top:60px}
.cercles--liaison::before{
  content:"";position:absolute;top:50%;left:12%;right:12%;height:1px;
  border-top:2px dotted #cdc7b6;z-index:1;
}

/* ---------- 9. Niveaux d'apprentissage ---------- */
.niveaux{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:900px;margin:0 auto}
.niveau{text-align:center}
.niveau__pastille{
  width:88px;height:88px;border-radius:50%;margin:0 auto 18px;
  display:grid;place-items:center;color:#fff;
}
.niveau__pastille svg{width:44px;height:44px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.niveau--decouvre .niveau__pastille{background:var(--orange)}
.niveau--progresse .niveau__pastille{background:var(--vert)}
.niveau--maitrise  .niveau__pastille{background:var(--prune)}
.niveau h3{
  font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;
  color:#8b8b83;margin:0;
}
.niveau h3 span{display:block;font-family:var(--texte);font-weight:500;font-size:21px;color:var(--encre);margin-top:2px}
.niveau blockquote{
  margin:22px 0 0;padding:0 0 18px;font-size:14.5px;color:var(--encre-doux);
  text-align:left;border-bottom:1px solid #ddd8c9;
}
.fleche-parcours{font-family:var(--display);font-size:17px;margin-bottom:44px;text-align:center}
.fleche-parcours .d{color:var(--orange)}
.fleche-parcours .p{color:var(--vert)}
.fleche-parcours .m{color:var(--prune)}

/* ---------- 10. Bénéfices (visuels inclinés) ---------- */
.benefices{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;max-width:1100px;margin:0 auto}
.benefice__visuel{
  aspect-ratio:4/3;border-radius:4px;box-shadow:var(--ombre-forte);
  transform:rotate(-3deg);margin-bottom:34px;
}
.benefice:nth-child(2) .benefice__visuel{transform:rotate(2.5deg)}
.benefice:nth-child(3) .benefice__visuel{transform:rotate(-1.5deg)}
.benefice h3{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.2;margin:0 0 12px}
.benefice:nth-child(1) h3{color:var(--vert)}
.benefice:nth-child(2) h3{color:var(--rose)}
.benefice:nth-child(3) h3{color:var(--vert-fonce)}
.benefice p{font-size:15px;color:var(--encre);margin:0}

/* ---------- 11. Bandeau de vente ---------- */
.bandeau-vente{background:var(--orange);color:#fff;padding:80px 0}
.bandeau-vente .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.bandeau-vente h2{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.15;margin:0 0 16px}
.bandeau-vente p{font-size:15px;opacity:.95;margin:0 0 24px}
.bandeau-vente .inclus{display:grid;grid-template-columns:auto auto;gap:12px 28px;margin-bottom:28px;font-size:14.5px}
.bandeau-vente .inclus li{display:flex;align-items:center;gap:9px}
.bandeau-vente .inclus svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;flex:none}
.prix{font-family:var(--display);font-size:42px;line-height:1;margin:0 0 22px}
.btn-panier{
  display:inline-flex;align-items:center;gap:14px;
  background:#fff;color:var(--orange);border-radius:999px;
  padding:14px 26px;font-family:var(--display);font-size:17px;
  box-shadow:var(--ombre);transition:transform .18s ease;
}
.btn-panier:hover{transform:translateY(-2px)}
.lecteur{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;box-shadow:var(--ombre-forte)}
.lecteur__barre{
  position:absolute;left:0;right:0;bottom:0;height:40px;background:rgba(0,0,0,.6);
  display:flex;align-items:center;gap:12px;padding:0 14px;color:#fff;font-size:12px;
}
.lecteur__barre .piste{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;position:relative}
.lecteur__barre .piste::before{content:"";position:absolute;left:0;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--orange)}

/* ---------- 12. Modules vidéo ---------- */
.grille-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.module{background:var(--blanc);border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre);position:relative}
.module__visuel{position:relative;aspect-ratio:16/9}
.module__corps{padding:18px 20px 12px}
.module__corps h3{font-family:var(--display);font-weight:400;font-size:19px;color:var(--orange);margin:0 0 6px;letter-spacing:.02em}
.module__corps p{font-size:15px;margin:0}
.module__fiches{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #eee9dc;margin-top:16px}
.module__fiches a{display:flex;align-items:center;gap:9px;padding:14px 16px;font-size:12px;color:var(--encre)}
.module__fiches a+a{border-left:1px solid #eee9dc}
.module__fiches svg{width:20px;height:20px;stroke:var(--encre);fill:none;stroke-width:1.8;flex:none}
.module .vu{
  position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;
  background:var(--vert);display:grid;place-items:center;z-index:2;
}
.module .vu svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:3}
.module--vu .module__visuel::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.25)}

/* Progression */
.progression{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.progression__pastille{width:34px;height:34px;border-radius:50%;background:var(--vert);display:grid;place-items:center;flex:none}
.progression__pastille svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:3}
.progression__texte{font-weight:500;font-size:17px}
.progression__barre{width:210px;height:5px;border-radius:3px;background:#ddd8c9;overflow:hidden}
.progression__barre i{display:block;height:100%;background:var(--vert);width:22%}

/* ---------- 13. Pied de page ---------- */
.pied{background:var(--vert-fonce);color:#fff;padding:78px 0 56px;position:relative}
.pied::before{
  content:"";position:absolute;left:-6%;right:-6%;top:-70px;height:140px;
  background:var(--vert-fonce);border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.pied .wrap{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr) 1.2fr;gap:34px}
.pied h4{font-size:20px;font-weight:500;margin:0 0 22px}
.pied h4+h4{margin-top:26px}
.pied__formations li{border-bottom:1px solid rgba(255,255,255,.3);padding:9px 0}
.pied__formations a{font-size:12.5px;font-weight:700;line-height:1.35;display:block}
.pied__formations a:hover{color:var(--vert-olive)}
.pied__social{align-self:end;text-align:right}
.pied__social p{font-family:var(--display);font-size:20px;margin:0 0 18px}
.pied__social p em{font-style:normal;color:var(--vert-olive)}
.pied__social ul{display:flex;gap:20px;justify-content:flex-end}
.pied__social svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.7}
.pied__social a:hover svg{stroke:var(--vert-olive)}

/* ---------- 14. Décor ---------- */
.fond-papier{background:var(--papier)}
.fond-creme{background:var(--creme)}
.fond-blanc{background:var(--blanc)}

/* ---------- 16. Ajustements post-intégration ---------- */
.nav .a-menu{display:flex;align-items:stretch}
.grille-formations{align-items:stretch}
.carte{height:100%}

/* Logo un peu plus généreux, aligné sur la maquette XD */
.logo__marque{padding:16px 22px;font-size:24px}
.logo__nom{font-size:24px}
.logo__nom .script{font-size:28px}

/* Colonne réseaux sociaux : éviter le retour à la ligne */
.pied .wrap{grid-template-columns:.8fr 1.2fr .9fr .9fr 1.6fr}
.pied__social p{font-size:21px;white-space:nowrap}
.pied__social svg{width:32px;height:32px}

/* Bénéfices : titres sur 2 lignes sans casser l'alignement */
.benefice h3{min-height:2.4em}
.bandeau-vente .prix{font-size:42px;line-height:1;margin:0 0 22px}
.bandeau-vente .inclus li{font-size:14.5px}

/* ---------- 18. Logos officiels (extraits du fichier XD) ----------
   Les sélecteurs sont préfixés par .entete : WooCommerce impose
   « .woocommerce img { height:auto } » sur toutes ses pages, ce qui
   l'emporterait sur une simple classe et rendrait les logos à leur
   taille native (388 × 234 et 3580 × 780). */
.entete .logo{display:flex;align-items:center;gap:20px;padding:0 26px 0 0}
.entete .logo__vilmorin{
  width:auto;height:88px;display:block;
  border-radius:0 0 8px 8px;margin-top:-6px;
}
.entete .logo__atelier{width:auto;height:56px;display:block}

@media (max-width:900px){
  .entete .logo__vilmorin{height:62px}
  .entete .logo__atelier{height:38px}
}


/* ====================================================================
   19. Responsive
   Le site est conçu sur une maquette 1920 px. Trois paliers :
   au-delà de 1100 px la mise en page de la maquette ; entre 700 et
   1100 px une réduction à deux ou trois colonnes ; en dessous, une
   colonne unique et une navigation repliée.
   ==================================================================== */

/* Les séparateurs incurvés sont des pseudo-éléments qui débordent
   volontairement de 6 % de chaque côté. « clip » coupe ce débordement
   horizontal sans créer de conteneur de défilement, donc sans empêcher
   les courbes de dépasser verticalement — ce que « hidden » ferait. */
html,body{overflow-x:clip}
@supports not (overflow-x:clip){
  html,body{overflow-x:hidden}
}

/* ---- Navigation repliable ---- */
.bascule-menu{
  display:none;align-items:center;gap:10px;
  padding:0 20px;margin-left:auto;
  font-family:var(--display);font-size:15px;color:var(--vert-fonce);
  background:none;border:0;
}
.bascule-menu__barres{position:relative;width:22px;height:2px;background:currentColor}
.bascule-menu__barres::before,
.bascule-menu__barres::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;
  transition:transform .2s ease,top .2s ease;
}
.bascule-menu__barres::before{top:-7px}
.bascule-menu__barres::after{top:7px}
.entete[data-ouvert="true"] .bascule-menu__barres{background:transparent}
.entete[data-ouvert="true"] .bascule-menu__barres::before{top:0;transform:rotate(45deg)}
.entete[data-ouvert="true"] .bascule-menu__barres::after{top:0;transform:rotate(-45deg)}

@media (max-width:1100px){
  /* Une seule rangée : logo — bouton Menu — panier. La navigation dépliée
     occupe la rangée suivante en pleine largeur. Sans « min-width:0 » sur
     le logo, celui-ci refuse de se comprimer et pousse le panier à la
     ligne, où son aplat vert ne fait plus toute la hauteur. */
  .entete{flex-wrap:wrap;align-items:stretch}
  .entete .logo{
    flex:1 1 auto;min-width:0;
    padding:10px 0 10px 16px;overflow:hidden;
  }
  .entete .logo__vilmorin{height:56px;flex:0 0 auto}
  .entete .logo__atelier{height:34px;min-width:0;object-fit:contain;object-position:left}

  .bascule-menu{display:flex;flex:0 0 auto}

  .nav{
    display:none;width:100%;flex-direction:column;align-items:stretch;
    border-top:1px solid #e6e2d6;order:4;
  }
  .entete[data-ouvert="true"] .nav{display:flex}
  .nav a{
    border-left:0;border-bottom:1px solid #f0ece0;
    padding:15px 22px;font-size:16px;
  }
  .nav .a-menu{flex-direction:column}
  /* Sur petit écran le survol n'existe pas : le sous-menu est déplié. */
  .sous-menu{
    position:static;transform:none;display:block;
    border:0;box-shadow:none;padding:0 0 10px;
    background:var(--creme);min-width:0;
  }
  .sous-menu a{text-align:left;padding:11px 34px;font-size:13.5px}
  .panier{
    justify-content:center;padding:16px;
    border-bottom:0;
  }
  .panier .badge{position:static;margin-left:12px}
}

/* ---- Grilles ---- */
@media (max-width:1300px){
  .grille-formations{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1100px){
  .niveaux{gap:28px}
  .benefices{gap:36px}
  .pied .wrap{grid-template-columns:repeat(3,1fr)}
  .pied__social{grid-column:1/-1;text-align:left;margin-top:12px}
  .pied__social ul{justify-content:flex-start}
  .pied__social p{white-space:normal}
}
@media (max-width:860px){
  .section{padding:72px 0}
  .grille-formations,
  .grille-modules,
  .benefices{grid-template-columns:repeat(2,1fr)}
  .niveaux{grid-template-columns:repeat(3,1fr);gap:18px}
  .niveau blockquote{font-size:13.5px}

  /* Le bandeau de vente et l'en-tête de formation passent en pile :
     la vidéo d'abord, l'argumentaire et le prix ensuite. */
  .bandeau-vente .wrap,
  .hero-formation .wrap{grid-template-columns:1fr;gap:32px}
  .bandeau-vente{padding:56px 0}

  /* Les cercles éditoriaux ne peuvent pas se chevaucher sur un écran
     étroit : ils deviennent des blocs arrondis, empilés. */
  .cercles{flex-direction:column;align-items:center;gap:22px}
  .cercle{
    width:100%;max-width:460px;aspect-ratio:auto;border-radius:24px;
    margin:0;padding:34px 30px;
  }
  .cercle--decale{margin-top:0}
  .cercles--liaison::before{display:none}
}
@media (max-width:640px){
  :root{--gouttiere:20px}
  .section{padding:56px 0}
  .titre{font-size:clamp(28px,7.5vw,40px)}

  .hero{min-height:480px}
  .hero__titre{font-size:clamp(38px,11vw,60px)}
  .hero__accroche{font-size:17px}
  .hero__filet{margin:24px 0 18px}
  /* Le bouton de lecture recouvrirait le titre : on le descend. */
  .hero .play{top:auto;bottom:120px;right:50%;transform:translateX(50%)}

  .grille-formations,
  .grille-modules,
  .benefices{grid-template-columns:1fr;gap:22px}
  .niveaux{grid-template-columns:1fr;gap:34px}
  .niveau blockquote{font-size:15px}

  /* En pleine largeur, un visuel en 4/3 occupe tout l'écran :
     on l'aplatit pour garder le titre et le bouton visibles. */
  .carte__visuel{aspect-ratio:16/9}
  .benefice__visuel{transform:none;margin-bottom:22px}
  .benefice h3{min-height:0}

  .progression{flex-wrap:wrap;gap:10px}
  .progression__barre{width:100%}

  .module__fiches{grid-template-columns:1fr}
  .module__fiches a+a{border-left:0;border-top:1px solid #eee9dc}

  .pied{padding:56px 0 40px}
  .pied .wrap{grid-template-columns:1fr 1fr;gap:24px}
  .pied h4{font-size:18px}

  .prix,.bandeau-vente .prix{font-size:34px}
  .bandeau-vente .inclus{grid-template-columns:1fr}
  .btn-panier{width:100%;justify-content:center}
}

/* Écrans très étroits : on évite les débordements de mots longs. */
@media (max-width:380px){
  .pied .wrap{grid-template-columns:1fr}
  .titre,.hero__titre,.carte__titre{overflow-wrap:break-word;hyphens:auto}
}

/* Confort de lecture et accessibilité */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  position:static;width:auto;height:auto;margin:0;clip:auto;
  padding:12px 20px;background:var(--vert-fonce);color:#fff;
}

/* ---- Panier hors navigation ----
   Le panier est une action, pas un lien de navigation : il reste accessible
   quand le menu est replié, ce qui est indispensable sur un site marchand. */
@media (max-width:1100px){
  .entete{position:relative}
  .entete .logo{order:1}
  .bascule-menu{order:2;margin-left:auto;padding:0 14px}
  .panier{order:3;padding:0 18px;flex:0 0 auto;position:relative}
  .panier svg{width:26px;height:26px}
  .panier .badge{position:absolute;top:10px;right:8px;margin:0}
}

@media (max-width:520px){
  /* Sur les écrans les plus étroits, le mot « Menu » cède la place :
     les trois barres suffisent à en désigner l'usage. */
  .entete .logo{padding-left:12px;gap:10px}
  .entete .logo__vilmorin{height:46px}
  .entete .logo__atelier{height:28px}
  .bascule-menu{padding:0 12px}
  .bascule-menu span:first-child{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .panier{padding:0 14px}
}
@media (max-width:640px){
  /* Le bouton de lecture recouvrait l'accroche. Le hero passe en colonne :
     le bouton se range sous le texte, aligné sur lui, où il ne gêne plus. */
  .hero{
    flex-direction:column;justify-content:center;align-items:flex-start;
    padding:90px 0;
  }
  .hero__contenu{flex:0 0 auto}
  .hero .play{
    position:static;transform:none;
    margin:28px var(--gouttiere) 0;
    width:58px;height:58px;
  }
  .hero .play:hover{transform:scale(1.06)}
}

/* ---- Entrées de menu WordPress ----
   wp_nav_menu enveloppe chaque entrée dans un <li> : on l'aligne sur les
   liens écrits directement dans le gabarit, sans puce ni décalage. */
.nav li{display:flex;list-style:none;margin:0;padding:0}
.nav ul{display:contents}
@media (max-width:1100px){
  .nav li{display:block}
  .nav ul{display:block}
}

/* ---- Pastille de lecture décorative sur les cartes ----
   La maquette pose un bouton de lecture sur chaque visuel de programme.
   Il annonce que la formation contient de la vidéo ; le clic mène à la
   fiche, pas à une lecture immédiate — d'où aria-hidden et pointer-events. */
.play--statique{pointer-events:none}
.carte__visuel{display:block;position:relative}
.carte:hover .play--statique{transform:translate(-50%,-50%) scale(1.06)}

/* Le hero porte son propre lecteur : la pastille doit rester cliquable.
   Le z-index la place au-dessus du bloc de texte (z-index:2), sinon celui-ci
   intercepte le clic ; pointer-events:none sur le conteneur laisse le texte
   sélectionnable partout ailleurs. */
.lecteur--hero{position:absolute;inset:0;z-index:3;pointer-events:none}
.lecteur--hero .play{pointer-events:auto}
@media (max-width:640px){
  .lecteur--hero{position:static;display:flex}
}

/* ---- Illustration d'en-tête de formation ----
   Dessin au trait sur fond transparent : il se montre entier, jamais rogné. */
.hero-formation__illu{display:flex;align-items:center;justify-content:center}
.hero-formation__illu .illustration{
  width:100%;height:auto;max-height:420px;object-fit:contain;
}

/* ---- Vignette de carte formation ----
   Les visuels sont des illustrations au trait sur fond transparent : elles
   se montrent entières sur un fond clair, jamais rognées. Le cadre garde un
   rapport fixe malgré des sources aux proportions différentes, sans quoi
   les badges et les titres des cartes voisines ne s'alignent plus. */
.carte__visuel{
  position:relative;aspect-ratio:4/3;
  background:var(--creme-clair);overflow:hidden;
}
/* L'image est sortie du flux : dans le flux, sa hauteur intrinsèque
   l'emporte sur le rapport du cadre et les cartes voisines se désalignent. */
.carte__visuel img{
  position:absolute;inset:14px;
  width:calc(100% - 28px);height:calc(100% - 28px);
  object-fit:contain;padding:0;
}

/* ---- Menu de pied de page ----
   wp_nav_menu enveloppe chaque entrée dans un <li> : sans puce ici. */
.pied li{list-style:none;margin:0;padding:0}
.pied ul{margin:0;padding:0}

/* ---- Cachet « Vidéo lue » ----
   Un tampon incliné dans le coin de la vignette, aux couleurs de la charte :
   lisible d'un coup d'œil dans la grille, sans concurrencer le bouton de
   lecture. Il apparaît en direct dès que le seuil de lecture est franchi. */
.module__cachet{
  position:absolute;top:14px;right:-6px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px 6px 10px;
  background:var(--vert);color:#fff;
  font-family:var(--display);font-size:14px;letter-spacing:.04em;
  border-radius:4px 0 0 4px;
  box-shadow:0 4px 12px rgba(32,70,41,.28);
  transform:rotate(-4deg);transform-origin:right center;
  pointer-events:none;
}
.module__cachet::after{
  /* petit retour replié, pour l'effet étiquette */
  content:"";position:absolute;right:0;bottom:-6px;
  border-left:6px solid #5a8a12;border-bottom:6px solid transparent;
}
.module__cachet svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:3}
.module__cachet--apparition{animation:cachet-tampon .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes cachet-tampon{
  0%{transform:rotate(-14deg) scale(1.8);opacity:0}
  60%{transform:rotate(-2deg) scale(.96);opacity:1}
  100%{transform:rotate(-4deg) scale(1)}
}
/* La vignette d'un module vu se voile légèrement : le cachet ressort. */
.module--vu .module__visuel img{filter:saturate(.6) brightness(.92)}

/* ====================================================================
   20. Fenêtre de lecture
   La vidéo en grand, le titre du module, une barre d'avancement avec le
   repère « module lu », et le passage au module suivant.
   ==================================================================== */
.fenetre-lecture{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.fenetre-lecture[hidden]{display:none}
.fenetre-lecture__fond{position:absolute;inset:0;background:rgba(15,30,18,.86);backdrop-filter:blur(4px)}
.fenetre-lecture__cadre{
  position:relative;width:min(1100px,100%);max-height:100%;
  background:#0f1e12;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);display:flex;flex-direction:column;
  animation:fenetre-ouverture .28s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes fenetre-ouverture{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
body.fenetre-lecture-ouverte{overflow:hidden}

.fenetre-lecture__entete{display:flex;align-items:center;gap:16px;padding:16px 20px;color:#fff}
.fenetre-lecture__numero{
  font-family:var(--display);font-size:13px;letter-spacing:.06em;
  color:var(--vert);white-space:nowrap;
}
.fenetre-lecture__titre{
  flex:1;margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(16px,2vw,22px);line-height:1.2;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fenetre-lecture__fermer{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;font-size:26px;line-height:1;display:grid;place-items:center;
  transition:background .15s;
}
.fenetre-lecture__fermer:hover{background:var(--orange)}

.fenetre-lecture__ecran{position:relative;background:#000;aspect-ratio:16/9;max-height:70vh}
.fenetre-lecture__video{width:100%;height:100%;display:block;object-fit:contain}
.fenetre-lecture__filigrane{
  position:absolute;left:6%;top:6%;pointer-events:none;
  font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.3);
  text-shadow:0 1px 2px rgba(0,0,0,.5);animation:filigrane-derive 60s linear infinite alternate;
}
@keyframes filigrane-derive{0%{left:6%;top:6%}33%{left:70%;top:12%}66%{left:64%;top:78%}100%{left:10%;top:72%}}
.fenetre-lecture__message{
  position:absolute;inset:0;margin:0;display:grid;place-items:center;
  padding:32px;text-align:center;color:#fff;background:rgba(0,0,0,.7);
}

/* Avancement : la piste et la part lue (le seuil « lu » reste invisible) */
.fenetre-lecture__avancement{padding:14px 20px 6px}
.fenetre-lecture__piste{position:relative;height:8px;border-radius:4px;background:rgba(255,255,255,.14)}
.fenetre-lecture__lu{height:100%;width:0;border-radius:4px;background:var(--vert);transition:width .25s linear}
.fenetre-lecture__legende{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;color:rgba(255,255,255,.7)}
.fenetre-lecture__temps{font-variant-numeric:tabular-nums}
.fenetre-lecture__etat{font-family:var(--display);font-size:14px;letter-spacing:.04em}
.fenetre-lecture__etat--vu{color:var(--vert)}
.fenetre-lecture__etat--apparition{animation:cachet-tampon .45s cubic-bezier(.2,1.4,.4,1) both}

.fenetre-lecture__pied{display:flex;justify-content:space-between;gap:12px;padding:10px 20px 18px}
.fenetre-lecture__pied .btn{font-size:14px;padding:10px 20px}
.fenetre-lecture__pied .btn--decouvre{color:#fff;border-color:rgba(255,255,255,.35)}
.fenetre-lecture__pied .btn--decouvre:hover{background:rgba(255,255,255,.12);border-color:#fff}
.fenetre-lecture__pied .btn:disabled{opacity:.3;pointer-events:none}

@media (max-width:640px){
  .fenetre-lecture{padding:0}
  .fenetre-lecture__cadre{border-radius:0;height:100%;max-height:none;justify-content:center}
  .fenetre-lecture__ecran{max-height:none}
  .fenetre-lecture__pied{flex-direction:column}
  .fenetre-lecture__pied .btn{width:100%;text-align:center}
}
/* L'attribut hidden doit primer sur les display:flex des blocs de la fenêtre. */
.fenetre-lecture [hidden]{display:none!important}

/* ---------- 21. Formulaire de contact (WPForms) ---------- */
.page-id-contact .wrap article,
.wpforms-container{max-width:720px}
.wpforms-container .wpforms-field-label{font-weight:600;color:var(--vert-fonce)}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container select,
.wpforms-container textarea{
  border:1.5px solid #d6dccf!important;border-radius:8px!important;
  padding:12px 14px!important;font-family:var(--texte)!important;font-size:16px!important;
  background:#fff!important;transition:border-color .15s;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus{border-color:var(--vert)!important;box-shadow:0 0 0 3px rgba(142,191,33,.18)!important;outline:none}
.wpforms-container .wpforms-submit{
  background:var(--orange)!important;color:#fff!important;border:0!important;
  font-family:var(--display)!important;font-size:17px!important;letter-spacing:.03em;
  padding:14px 30px!important;border-radius:999px!important;cursor:pointer;
  transition:background .15s,transform .15s;
}
.wpforms-container .wpforms-submit:hover{background:#b8420a!important;transform:translateY(-1px)}
.wpforms-confirmation-container-full{
  background:var(--vert-pastel)!important;border:0!important;border-radius:12px!important;
  color:var(--vert-fonce)!important;padding:24px!important;font-size:17px;
}
.wpforms-container .wpforms-required-label{color:var(--orange)}

/* ====================================================================
   22. Page « Le Projet » — cotes relevées sur l'écran Web 1920 – 4
   ==================================================================== */

/* Bandeau photo, titre centré, arête basse droite. */
.projet-bandeau{
  position:relative;min-height:380px;display:flex;align-items:center;
  background-size:cover;background-position:center;
}
.projet-bandeau::before{content:"";position:absolute;inset:0;background:rgba(20,30,15,.42)}
.projet-bandeau .wrap{position:relative;width:100%;text-align:center}
.projet-bandeau__titre{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px,4.1vw,79px);line-height:1.05;color:#fff;margin:0;
  text-shadow:0 4px 24px rgba(0,0,0,.35);
}

/* Texture papier : chapô et médaillons partagent le même fond. */
.projet-papier{
  position:relative;padding:96px 0 120px;overflow:hidden;
  background:var(--papier) url('../img/fond-papier.jpg') center top / cover;
}
.projet-chapo{
  max-width:892px;margin:0 auto 80px;text-align:center;
  font-size:20px;line-height:1.5;color:var(--brun);
}
.projet-chapo p{margin:0 0 1em}
.projet-chapo p:last-child{margin-bottom:0}

/* Trois médaillons de 370 px, le central en vert pâle, le troisième
   remonté de 13 px — irrégularités voulues par la maquette. */
.medaillons{
  position:relative;display:flex;justify-content:center;align-items:flex-start;
  gap:100px;padding:100px 0 0;
}
.medaillon{
  position:relative;z-index:2;width:370px;height:370px;border-radius:50%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:60px 46px;
}
.medaillon--blanc{background:#fff}
.medaillon--vert{background:#eaf4d4}
.medaillon--trois{margin-top:-14px}
.medaillon h3{
  font-family:var(--display);font-weight:400;font-size:20px;line-height:1.2;
  color:var(--vert-fonce);margin:0 0 12px;
}
.medaillon p{font-size:14.5px;line-height:1.55;margin:0;color:var(--encre)}

/* Catalogues Vilmorin-Andrieux anciens, posés en haut de deux médaillons,
   légèrement pivotés — comme une photo glissée sous le verre. */
.medaillon__vignette{
  position:absolute;top:-110px;left:50%;width:160px;height:auto;
  transform:translateX(-50%) rotate(-8deg);
  box-shadow:0 12px 30px rgba(60,40,20,.28);z-index:3;
}
.medaillon--deux .medaillon__vignette{transform:translateX(-40%) rotate(6deg);top:-96px}

/* Dahlia détouré, glissé derrière les deux premiers médaillons. */
.medaillons__dahlia{
  position:absolute;z-index:1;width:333px;height:auto;
  left:calc(50% - 470px);top:190px;pointer-events:none;
}

/* Niveaux : sur-titre en display vert clair, chapô brun, pastilles PNG. */
.projet-niveaux{padding-top:110px}
.projet-niveaux__surtitre{
  font-family:var(--display);font-size:30px;color:var(--vert-olive);
  text-align:center;margin:-6px 0 12px;
}
.projet-niveaux__chapo{
  max-width:668px;margin:0 auto 18px;text-align:center;
  font-size:16px;line-height:1.55;color:var(--brun);
}
.pastilles{
  display:grid;grid-template-columns:repeat(3,304px);justify-content:center;
  gap:40px 60px;margin-top:20px;
}
.pastille{text-align:center}
.pastille img{width:304px;height:304px;margin:0 auto}
.pastille blockquote{
  margin:18px 0 0;padding:0 8px 18px;text-align:left;
  font-size:14.5px;line-height:1.55;color:var(--encre-doux);
  border-bottom:1px solid #ddd8c9;
}

@media (max-width:1200px){
  .medaillons{gap:40px}
  .medaillon{width:320px;height:320px;padding:48px 36px}
  .medaillons__dahlia{left:calc(50% - 420px)}
  .pastilles{grid-template-columns:repeat(3,1fr);gap:24px}
  .pastille img{width:100%;max-width:304px;height:auto}
}
@media (max-width:900px){
  .projet-papier{padding:64px 0 80px}
  .projet-chapo{font-size:18px;margin-bottom:40px}
  .medaillons{flex-direction:column;align-items:center;gap:90px;padding-top:110px}
  .medaillon{width:min(370px,90vw);height:auto;aspect-ratio:1}
  .medaillon--trois{margin-top:0}
  .medaillons__dahlia{display:none}
  .pastilles{grid-template-columns:1fr;max-width:360px;margin-inline:auto}
}
@media (max-width:640px){
  .projet-bandeau{min-height:280px}
  .medaillon{border-radius:32px;aspect-ratio:auto;padding:36px 28px}
  .medaillon__vignette{width:120px;top:-70px}
}

/* ---- Revoir une vidéo ----
   Un module lu reste pleinement jouable : la vignette n'est plus assombrie
   (elle semblait désactivée), le cachet suffit à dire qu'il est lu, et le
   bouton de lecture affiche « Revoir » au survol. */
.module--vu .module__visuel img{filter:none}
.module--vu .lecteur .play::after{
  content:"Revoir";position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  font-family:var(--display);font-size:12px;letter-spacing:.06em;color:#fff;
  background:rgba(32,70,41,.85);padding:3px 10px;border-radius:999px;white-space:nowrap;
  opacity:0;transition:opacity .15s;
}
.module--vu .lecteur:hover .play::after{opacity:1}

/* Écran de fin dans la fenêtre de lecture. */
.fenetre-lecture__fin{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;
  background:rgba(15,30,18,.82);backdrop-filter:blur(3px);
  animation:fenetre-ouverture .25s ease both;
}
.fenetre-lecture__fin-titre{
  margin:0;font-family:var(--display);font-size:clamp(22px,3vw,34px);
  color:#fff;letter-spacing:.03em;
}
.fenetre-lecture__fin-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.fenetre-lecture__fin-actions .btn{font-size:15px;padding:12px 26px}
.fenetre-lecture__revoir{color:#fff;border-color:var(--vert);background:var(--vert)}
.fenetre-lecture__revoir:hover{background:var(--vert-olive);border-color:var(--vert-olive)}

/* ---- Écran « Vidéo terminée » ----
   Le badge surgit avec un coup de tampon, puis les actions apparaissent. */
.fenetre-lecture__badge-rond{
  width:84px;height:84px;border-radius:50%;background:var(--vert);
  display:grid;place-items:center;box-shadow:0 10px 36px rgba(142,191,33,.5);
}
.fenetre-lecture__badge-rond svg{width:46px;height:46px;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.fenetre-lecture__fin--apparition .fenetre-lecture__badge-rond{
  animation:badge-tampon .55s cubic-bezier(.2,1.5,.4,1) both, badge-onde 1.1s ease-out .35s both;
}
.fenetre-lecture__fin--apparition .fenetre-lecture__fin-titre{animation:fin-monte .5s ease .25s both}
.fenetre-lecture__fin--apparition .fenetre-lecture__fin-actions{animation:fin-monte .5s ease .45s both}
@keyframes badge-tampon{
  0%{transform:rotate(-18deg) scale(2.4);opacity:0;filter:blur(6px)}
  60%{transform:rotate(3deg) scale(.94);opacity:1;filter:blur(0)}
  100%{transform:none}
}
@keyframes badge-onde{
  0%{box-shadow:0 0 0 0 rgba(142,191,33,.65)}
  100%{box-shadow:0 0 0 70px rgba(142,191,33,0)}
}
@keyframes fin-monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fenetre-lecture__fin--apparition *{animation:none!important}
}
}

/* ====================================================================
   23. Accueil — conformité au XD (Web 1920 – 9)
   ==================================================================== */

/* Bandeau : photo plein cadre, léger voile pour la lisibilité du titre. */
.hero--photo{background-size:cover;background-position:center 40%}
.hero--photo::before{
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.08) 45%,rgba(0,0,0,.32));
}

/* Pastilles compactes sous les cercles : rond + légende dans le PNG,
   245 px de large dans la maquette, centrées, écartées de 0. */
.pastilles--accueil{
  display:flex;justify-content:center;gap:0;margin-top:56px;
}
.pastilles--accueil img{width:245px;height:auto;display:block}

/* Avantages : lentille blanche au bord haut bombé, débordant des deux
   côtés ; trois photos pivotées autour de leur coin haut-gauche. */
.avantages{
  position:relative;background:var(--creme);padding:0 0 96px;margin-top:-20px;
}
.avantages::before{
  content:"";position:absolute;left:-30%;right:-30%;top:0;bottom:-120px;
  background:#fff;border-radius:50% 50% 0 0/120px 120px 0 0;z-index:0;
}
.avantages .wrap{position:relative;z-index:1;padding-top:96px}
.avantages__grille{
  display:grid;grid-template-columns:repeat(3,1fr);gap:64px;
  max-width:1160px;margin:0 auto;
}
.avantage{position:relative}
.avantage__photo{
  width:100%;max-width:304px;aspect-ratio:303/350;object-fit:cover;
  border-radius:3px;box-shadow:0 18px 44px rgba(32,70,41,.22);
  margin:0 auto 42px;transform-origin:top left;display:block;
}
.avantage:nth-child(1) .avantage__photo{transform:rotate(-12deg)}
.avantage:nth-child(2) .avantage__photo{transform:rotate(7deg)}
.avantage:nth-child(3) .avantage__photo{transform:rotate(-10deg)}
.avantage h3{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.2;margin:0 0 12px}
.avantage--vert h3{color:var(--vert)}
.avantage--rose h3{color:var(--rose-poudre)}
.avantage--fonce h3{color:var(--vert-fonce)}
.avantage p{font-size:15px;line-height:1.6;color:var(--encre);margin:0}

@media (max-width:1100px){
  .avantages__grille{gap:36px}
  .pastilles--accueil img{width:200px}
}
@media (max-width:860px){
  .avantages__grille{grid-template-columns:1fr;gap:48px;max-width:420px}
  .avantage__photo{transform:none!important;margin-bottom:22px}
  .pastilles--accueil{flex-wrap:wrap;gap:8px}
}
/* Une vignette de module accessible est cliquable sur toute sa surface. */
.module .lecteur[data-playlist]{cursor:pointer}
.module .lecteur[data-playlist]:hover .play{transform:translate(-50%,-50%) scale(1.08);background:#fff}

/* ---- Parcours ordonné ----
   Un module verrouillé par la séquence dit quel module terminer d'abord. */
/* Cadenas commun : achat manquant (blanc, discret) ou séquence (vert foncé). */
.module__cadenas{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;z-index:2;
  display:grid;place-items:center;
  background:rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(32,70,41,.25);
}
.module__cadenas svg{width:24px;height:24px;stroke:var(--encre);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.module--sequence .module__visuel{cursor:not-allowed}
.module--sequence .module__visuel img{filter:grayscale(.7) brightness(.8)}
.module__cadenas--sequence{background:rgba(32,70,41,.82)}
.module__cadenas--sequence svg{stroke:#fff}
.module__attente{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  padding:7px 12px;border-radius:8px;
  background:rgba(32,70,41,.88);color:#fff;
  font-size:12.5px;line-height:1.35;text-align:center;
}
/* Déverrouillé à l'instant : un léger éclat vert pour attirer l'œil. */
.module--deverrouille .module__visuel{animation:deverrouille 1.2s ease both}
.module--deverrouille .module__visuel img{filter:none;transition:filter .6s}
@keyframes deverrouille{
  0%{box-shadow:0 0 0 0 rgba(142,191,33,.7)}
  100%{box-shadow:0 0 0 24px rgba(142,191,33,0)}
}