/* =========================================================
   NUTRY — couche d'amélioration visuelle (v3)
   Animations subtiles, micro-interactions, mobile CTA.
   Tout est désactivé si prefers-reduced-motion.
   ========================================================= */

/* ---- barre de progression de lecture ---- */
.progress-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--green),var(--green-700));transition:width .1s linear}

/* ---- apparition au scroll (uniquement si JS actif) ---- */
html.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js [data-reveal][data-reveal="2"]{transition-delay:.08s}
html.js [data-reveal][data-reveal="3"]{transition-delay:.16s}

/* ---- vignettes & cartes : survol plus vivant ---- */
.card{overflow:hidden}
.card .thumb{transition:transform .5s var(--ease)}
.card:hover .thumb{transform:scale(1.06)}
.res:hover,.value:hover{box-shadow:var(--shadow-lg)}

/* ---- boutons : reflet animé ---- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn-primary:hover::after{left:140%}

/* ---- hero : halos flottants ---- */
.hero{position:relative}
.hero::before,.hero::after{display:none}
.hero::before{width:340px;height:340px;background:rgba(164,201,90,.30);top:-80px;right:-60px;animation:float1 11s ease-in-out infinite}
.hero::after{width:240px;height:240px;background:rgba(243,237,205,.7);bottom:-60px;left:-40px;animation:float2 13s ease-in-out infinite}
.hero .container{position:relative;z-index:1}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,24px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-18px)}}

/* ---- compteur ---- */
.stat .num{font-variant-numeric:tabular-nums}

/* ---- bouton retour en haut ---- */
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--green-cta);color:var(--ink);border:0;cursor:pointer;font-size:1.2rem;line-height:1;
  display:grid;place-items:center;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;
  transform:translateY(10px);transition:.3s var(--ease);z-index:90}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--green-500)}

/* ---- barre d'achat collante (mobile, pages formation) ---- */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  align-items:center;justify-content:space-between;gap:1rem;
  background:#fff;border-top:1px solid var(--line);padding:.7rem 1rem;
  box-shadow:0 -8px 24px rgba(60,80,30,.12)}
.mobile-cta .mc-price{font-family:"Poppins";font-weight:700;color:var(--ink);line-height:1.1}
.mobile-cta .mc-price small{display:block;font-size:.7rem;color:var(--muted);font-weight:500}
.mobile-cta .btn{padding:.7rem 1.2rem}
@media (max-width:680px){
  .mobile-cta.ready{display:flex}
  body.has-mobile-cta{padding-bottom:74px}
  .to-top{bottom:84px}
}

/* ---- scrollspy : onglet actif du sommaire ---- */
.toc a.active{color:var(--green-700);border-color:var(--green)}

/* =========================================================
   DESIGN v4 — images unifiées, accent brun, hero, courbes,
   catalogue filtrable, typo, détails
   ========================================================= */

/* ---- sélection de texte ---- */
::selection{background:var(--green);color:#1f330f}

/* ---- images : voile duotone + ratio cohérent ---- */
.img-duo{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--cream-200)}
.img-duo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,rgba(85,122,34,.20),rgba(122,82,48,.12) 70%);
  mix-blend-mode:multiply;opacity:.55}
.img-duo img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.03)}
.card .img-duo{height:160px;margin-bottom:.2rem}
/* la photo occupe toute la colonne : object-fit:cover + aspect-ratio 3/2 sur
   .fcover garantissent un recadrage, jamais un étirement */
.fcover-wrap{max-width:100%;margin-top:1.5rem}
.fcover-wrap.img-duo{aspect-ratio:3/2;border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---- images : fondu au chargement ---- */
html.js img[data-fade]{opacity:0;transition:opacity .6s var(--ease)}
html.js img[data-fade].loaded{opacity:1}

/* ---- accent brun (touches chaudes) ---- */
.cat-title:nth-of-type(even)::before{background:var(--brown)}
.card:hover .more{color:var(--brown)}
.eyebrow{box-shadow:inset 0 0 0 1px rgba(122,82,48,.08)}

/* ---- hero : entrée animée au chargement ---- */
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
html.js .hero .eyebrow,html.js .hero h1,html.js .hero .lead,
html.js .hero-actions,html.js .hero-trust,html.js .hero-visual{
  animation:heroIn .8s var(--ease) both}
html.js .hero h1{animation-delay:.06s}
html.js .hero .lead{animation-delay:.14s}
html.js .hero-actions{animation-delay:.22s}
html.js .hero-trust{animation-delay:.30s}
html.js .hero-visual{animation-delay:.18s}

/* ---- hero card : note ---- */
.hero-card .rating{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.hero-card .rating .stars{color:#f1b53d;letter-spacing:1px}
.hero-card .rating b{font-family:"Poppins";color:var(--ink)}
.hero-card .rating small{color:var(--muted)}

/* ---- courbe douce vers le footer ---- */
.footer{position:relative}
.footer::before{display:none}

/* ---- catalogue filtrable ---- */
.catalog-filter{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:center;
  margin:0 auto 2.4rem;max-width:900px}
.catalog-filter .chip{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:.5rem 1.05rem;font-weight:600;font-size:.88rem;color:var(--ink);transition:all .2s;font-family:"Inter"}
.catalog-filter .chip:hover{border-color:var(--green)}
.catalog-filter .chip.active{background:var(--green-cta);color:var(--ink);border-color:var(--green-500)}
.catalog-search{flex:1;min-width:200px;max-width:260px;position:relative}
.catalog-search input{width:100%;padding:.55rem 1rem .55rem 2.2rem;border:1px solid var(--line);
  border-radius:999px;font-size:.9rem;font-family:"Inter"}
.catalog-search::before{content:"🔍";position:absolute;left:.8rem;top:50%;transform:translateY(-50%);font-size:.85rem;opacity:.6}
.card.hide{display:none}
.cat-empty{text-align:center;color:var(--muted);padding:2rem;display:none}

/* ---- témoignages : carrousel à accroche sur mobile ---- */
@media (max-width:880px){
  .quotes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;
    padding-bottom:.6rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .quotes .quote{flex:0 0 86%;scroll-snap-align:center}
}

/* =========================================================
   v4.1 — hero photo, portraits réels, bandeau logos
   ========================================================= */

/* hero avec photo + carte flottante */
.hero-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;position:relative}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 50%,rgba(85,122,34,.12));pointer-events:none}
.hero-card.float{position:absolute;left:-20px;bottom:-22px;max-width:290px;margin:0}
@media (max-width:980px){
  .hero-card.float{position:static;max-width:none;margin-top:1.2rem}
}

/* bandeau logos / certifications */
.logos-section{padding:2.2rem 0;background:#fff;border-bottom:1px solid var(--line)}
.logos-title{text-align:center;color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 1.4rem}
.logos-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2.2rem}
.logo-chip{font-family:"Poppins",sans-serif;font-weight:700;letter-spacing:.04em;color:#7c8a6b;
  font-size:1.05rem;padding:.5rem 1.1rem;border:1.5px solid var(--line);border-radius:10px;
  filter:grayscale(1);transition:.25s var(--ease)}
.logo-chip:hover{color:var(--green-700);border-color:var(--green);filter:none}
.logo-chip small{display:block;font-family:"Inter";font-weight:500;font-size:.6rem;letter-spacing:.02em;color:#aab39a;text-transform:none}
.logos-strip .logo-img{height:54px;width:auto;filter:grayscale(1) opacity(.85);transition:.25s var(--ease)}
.logos-strip .logo-img:hover{filter:none}

/* portraits réels de l'équipe */
.member img.avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;border:3px solid #fff;
  box-shadow:var(--shadow);background:var(--cream-200)}
.team .member:hover img.avatar{box-shadow:var(--shadow-lg)}

/* ---- calendrier : date pleine hauteur + bandeau titre pleine largeur ---- */
.cal-row{display:flex;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:.9rem;box-shadow:var(--shadow);transition:box-shadow .25s var(--ease)}
.cal-row:hover{box-shadow:var(--shadow-lg)}
.cal-row .cal-date{flex:0 0 auto;width:74px;border-radius:0;background:#fff;border-right:2px solid var(--green);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.6rem .4rem;text-align:center}
.cal-row .cal-date .d{font-size:1.55rem;line-height:1;color:var(--green-700)}
.cal-row .cal-date .m{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cal-thumb{flex:0 0 auto;width:130px;align-self:stretch;overflow:hidden;border-right:1px solid var(--line);background:var(--cream-200);display:block}
.cal-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.cal-thumb:hover img{transform:scale(1.06)}
.cal-body{flex:1;display:flex;flex-direction:column;min-width:0}
.cal-foot .btn{flex:0 0 auto;white-space:nowrap}
.cal-who small{display:inline-block;max-width:42ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.cal-banner{background:linear-gradient(95deg,rgba(164,201,90,.26),rgba(250,247,230,.35));
  border-bottom:1px solid var(--line);padding:.8rem 1.35rem}
.cal-banner .session-title{font-family:"Fraunces",serif;font-weight:600;font-size:1.3rem;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;line-height:1.12}
.cal-banner .session-title:hover{color:var(--green-700)}
.cal-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.35rem;flex-wrap:wrap}
.cal-info{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.session-meta{color:var(--muted);font-size:.9rem}
.cal-formatrice{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;width:fit-content;padding:.1rem 0}
.cal-by{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.cal-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid #fff;box-shadow:var(--shadow)}
.cal-who b{color:var(--ink);font-size:.82rem;font-weight:600}
.cal-who small{color:var(--muted);font-size:.8rem;margin-left:.35rem}
.cal-formatrice:hover .cal-who b{color:var(--green-700)}
@media (max-width:640px){
  .cal-foot{flex-direction:column;align-items:stretch}
  .cal-foot .btn{width:100%;justify-content:center}
  .cal-who small{display:none}
  .cal-thumb{display:none}
}

/* ---- fiche formatrice (hero) ---- */
.fiche-hero{display:flex;gap:2.2rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.fiche-photo{width:170px;height:170px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:4px solid #fff;box-shadow:var(--shadow-lg);background:var(--cream-200)}
.fiche-hero > div{flex:1;min-width:280px}
.member{cursor:pointer;text-decoration:none;display:block;transition:transform .2s var(--ease)}
.member:hover{transform:translateY(-3px)}
.member .name{color:var(--ink)}

/* ---- bloc formatrice (page formation) ---- */
.formatrice{display:flex;gap:1.8rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.8rem 2rem;box-shadow:var(--shadow)}
.formatrice-photo{width:128px;height:128px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:3px solid #fff;box-shadow:var(--shadow);background:var(--cream-200)}
.formatrice h3{margin:.3rem 0 0}
.formatrice-role{color:var(--green-700);font-weight:600;margin:.15rem 0 .8rem;font-size:.95rem}
.formatrice p:last-child{margin:0;color:var(--muted)}
@media (max-width:640px){.formatrice{flex-direction:column;align-items:center;text-align:center;padding:1.6rem}}

/* ---- parcours / packs ---- */
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.pack{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;
  display:flex;flex-direction:column;gap:1rem;transition:transform .25s var(--ease),box-shadow .25s}
.pack:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(164,201,90,.6)}
.pack-head{display:flex;gap:.8rem;align-items:flex-start}
.pack-ico{font-size:1.9rem;line-height:1}
.pack-head h3{font-size:1.12rem}
.pack-list{list-style:none;padding:.9rem 0 0;margin:0;display:flex;flex-direction:column;gap:.45rem;border-top:1px solid var(--line)}
.pack-list li{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem}
.pack-list a{color:var(--ink);font-weight:500}
.pack-list a:hover{color:var(--green-700)}
.pack-list li span{color:var(--muted);flex:0 0 auto}
.pack-price{display:flex;align-items:baseline;gap:.6rem;margin-top:auto}
.pack-old{color:var(--muted);text-decoration:line-through;font-size:1rem}
.pack-new{font-family:"Poppins";font-weight:700;font-size:1.7rem;color:var(--ink)}
.pack-save{background:var(--green);color:#1f330f;font-family:"Poppins";font-weight:700;font-size:.72rem;padding:.2rem .55rem;border-radius:999px}
@media (max-width:980px){.packs-grid{grid-template-columns:1fr}}

/* ---- bandeau cookies (RGPD) ---- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:580px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:1rem 1.2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:space-between;
  opacity:0;transform:translateY(14px);transition:.3s var(--ease)}
.cookie-banner.show{opacity:1;transform:none}
.cookie-banner p{margin:0;font-size:.86rem;color:var(--ink);flex:1;min-width:210px}
.cookie-actions{display:flex;gap:.5rem}
.cookie-actions .btn{padding:.5rem 1rem;font-size:.85rem}
@media (max-width:560px){.to-top{bottom:150px}}

/* ---- quiz d'orientation ---- */
.quiz{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow)}
.quiz-progress{height:6px;background:var(--cream-200);border-radius:999px;overflow:hidden;margin-bottom:1.8rem}
.quiz-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green-700));width:0;transition:width .35s var(--ease)}
.quiz-step h2,.quiz-result h2{font-size:1.4rem;margin-bottom:1.2rem}
.quiz-opts{display:flex;flex-direction:column;gap:.7rem}
.quiz-opt{text-align:left;font-family:"Inter";font-size:1rem;font-weight:500;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.2rem;cursor:pointer;transition:.2s var(--ease)}
.quiz-opt:hover{border-color:var(--green);background:var(--cream);transform:translateX(4px)}
.quiz-result{text-align:center}

/* ---- simulateur de financement ---- */
.simulator{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 2rem;box-shadow:var(--shadow)}
.sim-field{margin-bottom:1.2rem}
.sim-field label{display:block;font-weight:600;font-family:"Poppins";font-size:.92rem;margin-bottom:.5rem}
.sim-field select{width:100%;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-size:.95rem;font-family:"Inter";background:#fff}
.sim-result{margin-top:1.4rem;padding:1.4rem;border-radius:var(--radius-sm);background:var(--cream);border:1px solid var(--cream-200)}
.sim-result .disp{font-family:"Poppins";font-weight:700;color:var(--green-700);font-size:1.1rem}
.sim-result .rac{font-family:"Poppins";font-weight:700;font-size:1.8rem;color:var(--ink);margin-top:.3rem}
.sim-note{color:var(--muted);font-size:.82rem;margin-top:.6rem}

/* ---- avis Google (badge) ---- */
.gbadge{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.4rem .9rem;text-decoration:none;box-shadow:var(--shadow);font-size:.86rem}
.gbadge .g{font-family:"Poppins";font-weight:700}
.gbadge .gstars{color:#f1b53d;letter-spacing:1px}
.gbadge b{font-family:"Poppins";color:var(--ink)}
.gbadge small{color:var(--muted)}

/* ---- blog / ressources ---- */
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.post .post-img{height:160px;background:linear-gradient(135deg,var(--green),var(--cream-200));display:grid;place-items:center;font-size:2.4rem}
.post .post-body{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post .post-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--green-700)}
.post h3{font-size:1.05rem}
.post .more{margin-top:auto;color:var(--green-700);font-weight:600;font-size:.9rem}

/* ---- impression du programme (PDF via navigateur) ---- */
@media print{
  .site-header,.footer,.to-top,.mobile-cta,.cookie-banner,.progress-bar,.toc,.som-avis,.buybox .btn,
  .cta-band,.section .quotes,.faq summary::after,.burger,.hero-actions{display:none!important}
  body{background:#fff}
  .section{padding:1rem 0!important}
  a{color:#000;text-decoration:none}
  .form-hero{background:#fff!important}
}

/* ---- carte ressource cliquable + mise en avant ---- */
.res{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.res.featured{border-color:var(--green);box-shadow:var(--shadow)}
.res.featured:hover{box-shadow:var(--shadow-lg)}

/* ---- bandeau promo + compte à rebours ---- */

/* ---- badges commerciaux sur les cartes ---- */
.card .img-duo{position:relative}
.card-badge{position:absolute;top:.6rem;left:.6rem;z-index:2;font-family:"Poppins";font-weight:700;font-size:.7rem;
  padding:.25rem .6rem;border-radius:999px;color:#fff;box-shadow:var(--shadow);letter-spacing:.02em}
.card-badge--star{background:var(--green-cta)}
.card-badge--new{background:#3b7dd8}
.card-badge--hot{background:#d8542a}

/* ---- preuve sociale (toast) ---- */
.fomo-toast{position:fixed;left:18px;bottom:18px;z-index:85;max-width:300px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.8rem 1rem;display:flex;gap:.7rem;align-items:center;
  opacity:0;transform:translateY(12px);transition:.35s var(--ease);pointer-events:none}
.fomo-toast.show{opacity:1;transform:none}
.fomo-toast b{font-size:.9rem}.fomo-toast small{color:var(--muted);font-size:.78rem}
.fomo-dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:0 0 auto;box-shadow:0 0 0 4px rgba(164,201,90,.25)}
@media (max-width:680px){.fomo-toast{display:none}}

/* ---- pop-up d'intention de sortie ---- */

/* ---- lead magnet (guide offert) ---- */
.lead-magnet{background:linear-gradient(120deg,var(--green-700),var(--green-500));color:#fff;border-radius:calc(var(--radius)*1.4);
  padding:clamp(2rem,5vw,3rem);display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center;box-shadow:var(--shadow-lg)}
.lead-magnet h2{color:#fff}
.lead-magnet p{color:#eaf3d9;margin:.4rem 0 0}
.lead-magnet form{display:flex;gap:.5rem;flex-wrap:wrap}
.lead-magnet input{flex:1;min-width:200px;padding:.85rem 1.1rem;border-radius:999px;border:0;font-size:.95rem}
@media (max-width:768px){.lead-magnet{grid-template-columns:1fr}}

/* ---- paiement 3×, badges paiement, garantie ---- */
.pay3x{font-size:.82rem;color:var(--green-700);font-weight:600;margin:.35rem 0 .1rem}
.pay-trust{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line)}
.pay-badge{font-family:"Poppins";font-weight:700;font-size:.62rem;color:#5b6552;background:var(--cream);border:1px solid var(--line);padding:.18rem .45rem;border-radius:5px;letter-spacing:.03em}
.pay-secure{font-size:.72rem;color:var(--muted);margin-left:auto}
.guarantee{display:flex;gap:.5rem;align-items:flex-start;background:var(--cream);border:1px solid var(--cream-200);border-radius:var(--radius-sm);padding:.7rem .9rem;font-size:.82rem;color:var(--ink);margin-top:.8rem}

/* ---- upsell parcours (ajoutez & économisez) ---- */
.upsell{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;background:#fff;
  border:1.5px solid var(--green);border-radius:var(--radius);padding:1.6rem 1.8rem;box-shadow:var(--shadow)}
.upsell h3{font-size:1.15rem}
.upsell-cta{display:flex;flex-direction:column;gap:.6rem;align-items:flex-end}
.upsell-cta .pack-old{color:var(--muted);text-decoration:line-through;font-size:1rem}
.upsell-cta .pack-new{font-family:"Poppins";font-weight:700;font-size:1.5rem;color:var(--ink)}
@media (max-width:640px){.upsell{flex-direction:column;align-items:stretch}.upsell-cta{align-items:stretch}.upsell-cta .btn{width:100%;justify-content:center}}

/* ---- transitions de page (View Transitions) ---- */
@view-transition{navigation:auto}

/* ---- confettis ---- */
.confetti-canvas{position:fixed;inset:0;z-index:200;pointer-events:none}

/* ---- skip-link accessibilité ---- */
.skip-link{position:absolute;left:-999px;top:0;z-index:300;background:var(--green-cta);color:var(--ink);padding:.6rem 1rem;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---- barre d'achat collante (desktop) ---- */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:95;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(60,80,30,.12);display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 24px;transform:translateY(110%);transition:transform .3s var(--ease)}
.sticky-buy.show{transform:none}
.sticky-buy .sb-info b{font-family:"Poppins";display:block;font-size:.95rem;line-height:1.15}
.sticky-buy .sb-info span{color:var(--green-700);font-family:"Poppins";font-weight:700}
@media (max-width:680px){.sticky-buy{display:none}}

/* ---- compte à rebours session ---- */
.next-session{background:var(--cream);border:1px solid var(--cream-200);border-radius:999px;padding:.4rem .85rem;font-size:.82rem;color:var(--ink);margin:.45rem 0;display:inline-block}

/* ---- wishlist ---- */
.wish-btn{cursor:pointer;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.3rem .85rem;font-size:.8rem;font-weight:600;font-family:"Inter";color:var(--ink);transition:.2s}
.wish-btn:hover{border-color:var(--green)}
.wish-btn.on{border-color:var(--green);background:var(--cream)}

/* ---- WhatsApp flottant ---- */
.wa-float{position:fixed;right:22px;bottom:84px;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;font-size:1.5rem;text-decoration:none;box-shadow:var(--shadow-lg);z-index:90;transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}

/* ================= v6 : avis, stats, favoris, parcours, certifs, a11y ================= */

/* note honnête (hero formation) */
.hero-rating{display:flex;align-items:center;gap:.6rem;margin:1rem 0;font-size:.92rem;color:var(--muted);flex-wrap:wrap}
.hero-rating .stars-y{color:#f1b53d;letter-spacing:2px;font-size:1.05rem}
.hero-rating b{color:var(--ink)}
.hero-rating a{color:var(--green-700);font-weight:600}
.hero-rating.trust{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:.55rem .9rem}

/* preuve sociale "inscrits ce mois" */
.social-live{display:inline-flex;align-items:center;gap:.5rem;background:rgba(85,122,34,.10);color:var(--green-700);border-radius:999px;padding:.4rem .85rem;font-size:.85rem;margin-bottom:1rem}
.social-live b{color:var(--green-700)}
.live-dot{width:9px;height:9px;border-radius:50%;background:#3fb950;box-shadow:0 0 0 0 rgba(63,185,80,.6);animation:pulseDot 1.8s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(63,185,80,.55)}70%{box-shadow:0 0 0 8px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}

/* indicateurs de résultats */
.stats-sec{background:var(--green);color:#1f330f}
.stats-sec .eyebrow{background:rgba(255,255,255,.25);color:#1f330f}
.stats-sec h2{color:#1f330f}
.stats-sec .lead{color:#33471a}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:900px;margin:0 auto}
.stat-box{background:rgba(255,255,255,.72);border-radius:var(--radius);padding:1.4rem 1rem;text-align:center}
.stat-n{font-family:"Fraunces",serif;font-weight:700;font-size:2rem;color:var(--green-700);line-height:1}
.stat-l{color:#33471a;font-size:.86rem;margin-top:.4rem}
.stats-note{text-align:center;color:#33471a;opacity:.7;font-size:.76rem;margin:1.2rem 0 0}
@media(max-width:680px){.stats-grid{grid-template-columns:repeat(2,1fr)}}

/* note vérifiée (sous-titre section avis) */
.avis-rating{margin-top:.8rem;color:var(--muted);font-size:.95rem}
.avis-rating .stars-y{color:#f1b53d;letter-spacing:2px}
.avis-rating b{color:var(--ink)}

/* page témoignages */
/* Sommaire des avis : le composant .toc du site, aligné à gauche et rangé par rubrique.
   .temoin-block est un <div> : la règle section[id] de styles.css ne s'y applique PAS,
   il lui faut son propre décalage sinon l'en-tête collant masque le titre visé. */
.temoin-block[id]{scroll-margin-top:100px}
.som-avis{margin:0 0 2.4rem}
.som-avis>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:.85rem 1.1rem;border:1px solid var(--line,#e4e7dd);border-radius:16px;background:#fff;
  box-shadow:0 6px 20px rgba(31,42,23,.05)}
.som-avis>summary::-webkit-details-marker{display:none}
.som-avis>summary::after{content:"▾";margin-left:auto;color:var(--green-700,#3d6218);font-size:.9rem;transition:transform .18s}
.som-avis[open]>summary::after{transform:rotate(180deg)}
.som-avis>summary:hover{border-color:var(--green,#b1d353)}
.som-avis>summary:focus-visible{outline:3px solid var(--green-700,#3f6a17);outline-offset:2px}
.som-titre{font-family:"Poppins",sans-serif;font-weight:600;font-size:.95rem;color:var(--ink,#26301c)}
.som-compte{font-size:.82rem;color:var(--muted,#5c6653)}
.som-avis[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;box-shadow:none}
.som-avis[open] .toc-avis{border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}
/* ATTENTION : .toc est déclaré quatre fois dans le projet (styles.css:236, enhance.css:66,
   ~495 et ~1557) et la dernière gagne. Un sélecteur .toc-avis seul (spécificité 0,1,0) serait
   donc écrasé par le .toc de la fin du fichier. On préfixe par .som-avis (0,2,0) pour passer
   devant, quel que soit l'ordre des déclarations. */
.som-avis .toc-avis{justify-content:flex-start;padding:.4rem 1.1rem 1rem;margin:0}
.som-avis .toc-avis .toc-rub{flex:0 0 100%;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--green-700,#3d6218);margin:.9rem .45rem .25rem}
.som-avis .toc-avis .toc-rub:first-child{margin-top:0}
/* inline-flex partout : la zone tactile se règle par min-height, et gap remplace l'espace
   typographique que le contexte flex supprimerait entre le libellé et la note. */
.som-avis .toc-avis a{display:inline-flex;align-items:center;gap:.32rem}
.som-avis .toc-avis a b{font-weight:700;color:var(--green-700,#3d6218)}
.som-avis .toc-avis a.active b{color:inherit}
.som-avis .toc-avis a.toc-avenir{color:var(--muted,#5c6653);font-weight:500}
.som-avis .toc-avis a.toc-avenir em{font-style:normal;font-size:.8em}
/* au doigt : zone tactile d'au moins 44 px, quelle que soit la taille de police */
@media (pointer:coarse){.som-avis .toc-avis a{min-height:44px}}
@media (max-width:900px){.som-avis .toc-avis a{min-height:44px}}
@media (max-width:560px){.som-avis .toc-avis{padding:.8rem}.som-avis .toc-avis .toc-rub{margin:.7rem .3rem .2rem}}
.temoin-block{margin-bottom:2.5rem}
.temoin-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.temoin-head img{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:0 0 auto}
.temoin-head h3{margin:0}

/* articles de blog */
article h2{margin:2rem 0 .8rem}
article p{line-height:1.7}
.post-list{margin:1.2rem 0;padding-left:1.2rem}
.post-list li{margin:.5rem 0;line-height:1.6}
.post-cta{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.6rem;margin:2.5rem 0 1rem}
.post-cta .btn{flex:0 0 auto}
.post-soon{opacity:.6;cursor:default}
.post-soon .more{color:var(--muted)}

/* ================= v7 : 60s, places, glossaire, ressources, piliers, evergreen ================= */

/* #7 « La formation en 60 secondes » */
.quick60{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.6rem;margin:1.5rem 0}
.q60-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;flex-wrap:wrap}
.q60-badge{background:var(--green-cta);color:var(--ink);border-radius:999px;padding:.3rem .85rem;font-family:"Poppins";font-weight:600;font-size:.8rem}
.q60-head h2{margin:0;font-size:1.2rem}
.q60-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.4rem}
.q60-item{display:flex;gap:.7rem;align-items:flex-start}
.q60-item>span{font-size:1.3rem;flex:0 0 auto;line-height:1.3}
.q60-item b{display:block;font-size:.9rem;color:var(--ink)}
.q60-item p{margin:.2rem 0 0;font-size:.86rem;color:var(--muted);line-height:1.5}
@media(max-width:680px){.q60-grid{grid-template-columns:1fr}}

/* #8 sommaire collant */
.toc{position:sticky;top:60px;z-index:30;background:var(--cream);border-radius:999px;box-shadow:0 4px 14px rgba(60,80,30,.06)}

/* #12 places restantes (barre) */
.seatbar{display:inline-block;width:64px;height:6px;border-radius:99px;background:var(--cream-200);overflow:hidden;vertical-align:middle;margin-left:.5rem}
.seatbar i{display:block;height:100%;background:var(--green-500);border-radius:99px}
.spots.low{color:var(--brown);font-weight:600}

/* #22 glossaire */
.glo-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem;position:sticky;top:60px;background:var(--cream);padding:.6rem;border-radius:14px;z-index:20}
.glo-nav a{width:32px;height:32px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--green-700);font-weight:600;text-decoration:none;font-size:.85rem;background:#fff}
.glo-nav a:hover{background:var(--green);color:#fff;border-color:var(--green)}
.glo-letter{font-family:"Fraunces",serif;color:var(--green-700);border-bottom:2px solid var(--line);padding-bottom:.3rem;margin:2.2rem 0 1rem;scroll-margin-top:120px;font-size:1.5rem}
.glo-item{margin-bottom:1.3rem}
.glo-item h3{margin:0 0 .2rem;font-size:1.05rem}
.glo-item p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}

/* #21 ressources gratuites (lead magnets) */
.freebies{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.freebie{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow);display:flex;flex-direction:column}
.fb-ico{font-size:2rem}
.freebie h3{margin:.5rem 0 .3rem;font-size:1.08rem}
.freebie .meta{color:var(--muted);font-size:.9rem}
.freebie ul{margin:.7rem 0 1rem;padding-left:1.1rem;color:var(--muted);font-size:.86rem}
.freebie li{margin:.3rem 0}
.fb-form{display:flex;flex-direction:column;gap:.5rem;margin-top:auto}
.fb-form input{padding:.6rem .9rem;border:1.5px solid var(--line);border-radius:999px;font-size:.9rem}

/* #18 pages piliers */
.pilier-body h2{margin:2rem 0 .6rem}
.pilier-body p{line-height:1.7}
.pilier-body p:first-child{margin-top:0}

/* messages des formulaires Brevo */
.form-msg{margin:.7rem 0 0;font-size:.88rem;font-weight:600}
.form-msg.ok{color:var(--green-700)}
.form-msg.err{color:var(--brown)}
.evergreen .form-msg,.evergreen-form ~ .form-msg{flex-basis:100%;color:#1f330f}
button[aria-busy="true"],button:disabled{opacity:.65;cursor:progress}

/* prochaine session (page de vente) */
.next-cta{background:var(--cream);border:1px solid var(--green);border-radius:14px;padding:.9rem 1rem;margin-bottom:1.1rem}
.next-cta.full{border-color:var(--line);background:var(--cream-200)}
.nc-head{font-size:.95rem;color:var(--ink)}
.nc-sub{font-size:.85rem;color:var(--muted);margin-top:.2rem}
.nc-sub.low{color:var(--brown);font-weight:600}
.nc-form{display:flex;gap:.4rem;margin-top:.6rem}
.nc-form input{flex:1;min-width:0;padding:.55rem .8rem;border:1.5px solid var(--line);border-radius:999px;font-size:.88rem}
.nc-form .btn{flex:0 0 auto;padding:.55rem .9rem}

/* #15 webinaire evergreen */
.evergreen{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;background:var(--green);color:#1f330f;border-radius:var(--radius);padding:1.6rem 1.8rem}
.evergreen .eyebrow{background:rgba(255,255,255,.28);color:#1f330f}
.evergreen h2{color:#1f330f}
.evergreen p{color:#33471a}
.evergreen-form{display:flex;gap:.5rem;flex-wrap:wrap}
.evergreen-form input{padding:.7rem 1rem;border:0;border-radius:999px;font-size:.9rem;min-width:210px}

/* diplômes / trombinoscope enrichi */
.dip-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}
.dip{background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:.32rem .75rem;font-size:.8rem;color:var(--ink)}
.soc-links{display:flex;gap:.5rem;margin:.6rem 0}
.soc-link{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#0a66c2;color:#fff;font-weight:700;font-size:.85rem;text-transform:lowercase}

/* logos réels dans la bande d'accueil */
.logo-cert{height:60px;width:auto}
@media(max-width:680px){.logo-cert{height:48px}}

/* bandeau certifications */
.certif-sec{text-align:center}
.certif-title{font-family:"Poppins";font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:.8rem;margin:0 0 1.4rem}
.certif-logos{display:flex;justify-content:center;align-items:center;gap:1.4rem;flex-wrap:wrap}
.certif-logos img{height:80px;width:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.05))}
.certif-note{max-width:620px;margin:1.2rem auto 0;color:var(--muted);font-size:.82rem}

/* barre favoris flottante + tiroir */
.fav-bar{position:fixed;left:22px;bottom:22px;z-index:96}
.fav-toggle{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;cursor:pointer;box-shadow:var(--shadow-lg);font-family:"Poppins";font-weight:600;font-size:.86rem;color:var(--ink)}
.fav-toggle:hover{border-color:var(--green)}
.fav-count{background:var(--green-cta);color:var(--ink);border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;font-size:.72rem;padding:0 4px}
.fav-drawer{position:fixed;left:22px;bottom:74px;z-index:97;width:330px;max-width:calc(100vw - 32px);max-height:70vh;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:1rem;display:none}
.fav-drawer.show{display:block;animation:botIn .22s var(--ease)}
.fav-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.fav-drawer-head b{font-family:"Poppins"}
.fav-x{background:none;border:0;font-size:1.4rem;cursor:pointer;color:var(--muted);line-height:1}
.fav-sec{margin-bottom:.8rem}
.fav-sec .eyebrow{display:block;margin-bottom:.5rem}
.fav-item{display:flex;align-items:center;gap:.6rem;padding:.4rem;border-radius:10px}
.fav-item:hover{background:var(--cream)}
.fav-item img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.fav-item b{display:block;font-size:.85rem;color:var(--ink)}
.fav-item small{color:var(--muted);font-size:.76rem}
.fav-hint{color:var(--muted);font-size:.82rem;margin:.3rem 0}
@media(max-width:680px){.fav-bar{left:8px;bottom:70px}.fav-drawer{left:8px;bottom:118px}}

/* connexion espace réel (lien magique) */
.espace-connect{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--cream);border:1.5px dashed var(--green);border-radius:var(--radius);padding:1rem 1.3rem;margin-bottom:1.6rem}
.espace-connect small{color:var(--muted)}
.espace-connect form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.espace-connect input{padding:.6rem .9rem;border:1.5px solid var(--line);border-radius:999px;font-size:.9rem;min-width:230px}
.espace-connect .btn{padding:.6rem 1.1rem;font-size:.88rem}
.espace-connect .ec-msg{flex-basis:100%;color:var(--green-700);font-weight:600}

/* espace "Mon espace" (tableau de bord) */
.parcours-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem}
.parcours-grid .phead{grid-column:1/-1;margin:.5rem 0 .3rem}
#parcoursRecent{margin-top:1.5rem}
.phead{margin-bottom:1.4rem}
.phead h2{margin:.4rem 0 0}
.hello-edit{background:none;border:0;cursor:pointer;font-size:1.05rem;vertical-align:middle;opacity:.45;margin-left:.2rem}
.hello-edit:hover{opacity:1}
.espace-stats{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.stat-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-size:.9rem;color:var(--muted)}
.stat-chip b{color:var(--ink)}
.owned-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.2rem}
.owned{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.owned>img{width:72px;height:72px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.ow-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.ow-body b{font-family:"Poppins";font-size:.95rem;color:var(--ink)}
.ow-status{font-size:.78rem;color:var(--muted)}
.ow-status.done{color:var(--green-700);font-weight:600}
.pbar{display:block;height:8px;background:var(--cream-200);border-radius:99px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--green-500);border-radius:99px;transition:width .6s var(--ease)}
.owned .btn{flex:0 0 auto;padding:.55rem 1rem;font-size:.86rem}
.owned-add{border-style:dashed;box-shadow:none;text-decoration:none;color:inherit}
.owned-add:hover{border-color:var(--green)}
.ow-plus{width:72px;height:72px;border-radius:12px;background:var(--cream);display:grid;place-items:center;font-size:2rem;color:var(--green-700);flex:0 0 auto}
.attest-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.9rem 1.2rem;margin-bottom:.7rem}
.attest-row small{color:var(--muted)}
.attest-row .btn{padding:.5rem .95rem;font-size:.85rem}
@media(max-width:680px){.owned-grid{grid-template-columns:1fr}.owned{flex-wrap:wrap}.owned .btn{width:100%;justify-content:center}}

/* icône compte dans la nav */
.nav-account{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;background:var(--cream);border:1px solid var(--line);font-size:1.1rem;text-decoration:none;flex:0 0 auto}
.nav-account:hover{border-color:var(--green)}
@media(max-width:900px){.nav-account{display:none}}

/* bouton CTA d'en-tête plus compact (évite le débordement / effet « trop gros ») */
.site-header .nav-cta .btn-primary{white-space:nowrap;padding:.62rem 1.15rem;font-size:.92rem;box-shadow:0 6px 16px rgba(77,122,31,.24)}

/* retrait de la pastille flottante « Mon parcours » (accès via 👤 nav + pied de page) */
.fav-bar,.fav-drawer{display:none!important}

/* retrait du bouton retour-haut (doublon d'avocat au-dessus du chat) */
.to-top{display:none!important}

/* indicateur de saisie chatbot */
.bot-typing{display:flex;gap:4px;align-items:center}
.bot-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:botDot 1s infinite}
.bot-typing span:nth-child(2){animation-delay:.15s}
.bot-typing span:nth-child(3){animation-delay:.3s}
@keyframes botDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* ---- accessibilité : focus visible clavier ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--green-700);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---- impression : fiche formation PDF propre ---- */
@media print{
  .site-header,.footer,.bot-launch,.bot-panel,.fav-bar,.fav-drawer,.to-top,.mobile-cta,.bottom-nav,.toc,.som-avis,.cookie,.fomo-toast,.sticky-buy,.cta-band,.social-live,.nav-account,.marquee,.upsell,.certif-logos{display:none!important}
  body{background:#fff;color:#000;font-size:12px}
  .form-hero{padding:0 0 1rem}
  .buybox{border:1px solid #ccc!important;box-shadow:none!important;page-break-inside:avoid}
  .section{padding:.6rem 0!important}
  .fcover-wrap,.hero-rating.trust{display:none!important}
  a[href]:after{content:""}
  .deliverables,.quotes,.stats-grid{page-break-inside:avoid}
  h1{font-size:20px}h2{font-size:16px}
  .form-hero-grid{display:block}
}

/* ---- chatbot Assistant Nutry ---- */
.bot-launch{position:fixed;right:22px;bottom:22px;z-index:97;display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(180deg,#bcda66,#b1d353);color:#22300f;border:0;border-radius:999px;padding:.5rem 1.1rem .5rem .5rem;cursor:pointer;
  box-shadow:var(--shadow-lg);font-family:"Poppins";font-weight:600;font-size:.9rem;transition:transform .2s}
.bot-launch:hover{transform:translateY(-2px)}
.bot-launch.hide{display:none}
.bot-launch .bot-ava{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.15rem}
.sticky-buy{display:none!important}
.search-trigger{display:none!important}
.bot-panel{position:fixed;right:22px;bottom:22px;z-index:98;width:346px;max-width:calc(100vw - 32px);height:490px;max-height:calc(100vh - 90px);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);display:none;flex-direction:column;overflow:hidden}
.bot-panel.show{display:flex;animation:botIn .25s var(--ease)}
@keyframes botIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.bot-head{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;background:var(--green-700);color:#fff}
.bot-head .bot-ava{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.3rem;flex:0 0 auto}
.bot-head b{display:block;font-family:"Poppins";font-size:.95rem}
.bot-head small{opacity:.85;font-size:.72rem}
.bot-close{margin-left:auto;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1}
.bot-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--cream)}
.bot-msg{max-width:86%;padding:.6rem .85rem;border-radius:14px;font-size:.88rem;line-height:1.45}
.bot-msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.bot-msg.user{background:var(--green-cta);color:var(--ink);align-self:flex-end;border-bottom-right-radius:4px}
.bot-msg.bot a{color:var(--green-700);font-weight:600}
.bot-msg.user a{color:#fff;text-decoration:underline}
.bot-quick{display:flex;gap:.4rem;flex-wrap:wrap;padding:.5rem .8rem;background:var(--cream);border-top:1px solid var(--line)}
.bot-quick button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem;font-size:.77rem;cursor:pointer;font-family:"Inter";color:var(--ink)}
.bot-quick button:hover{border-color:var(--green);color:var(--green-700)}
.bot-input{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--line);background:#fff}
.bot-input input{flex:1;padding:.6rem .85rem;border:1.5px solid var(--line);border-radius:999px;font-size:.9rem}
.bot-input button{background:var(--green-cta);color:var(--ink);border:0;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:1rem;flex:0 0 auto}
@media (max-width:680px){
  .bot-launch{bottom:74px}
  .bot-panel{bottom:70px;right:8px;left:8px;width:auto;height:72vh}
}

/* ---- bottom-nav mobile ---- */
.bottom-nav{display:none}
@media (max-width:680px){
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:96;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(60,80,30,.1)}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.5rem 0;text-decoration:none;color:var(--ink);font-size:1.15rem}
  .bottom-nav a span{font-size:.64rem;color:var(--muted)}
  body.has-bottom-nav{padding-bottom:62px}
  body.has-bottom-nav .to-top{bottom:150px}
  .wa-float{bottom:210px}
  body.has-mobile-cta.has-bottom-nav{padding-bottom:132px}
  body.has-mobile-cta .wa-float{bottom:210px}
}

/* ---- recherche instantanée ---- */
.search-ov{position:fixed;inset:0;z-index:140;background:rgba(30,40,20,.5);display:none;justify-content:center;align-items:flex-start;padding:12vh 1rem 1rem}
.search-ov.show{display:flex}
.search-box{background:#fff;border-radius:var(--radius);max-width:560px;width:100%;padding:1rem;box-shadow:var(--shadow-lg)}
.search-box input{width:100%;padding:.9rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-size:1.05rem}
.search-res{margin-top:.6rem;display:flex;flex-direction:column}
.search-res a{display:flex;align-items:center;gap:.7rem;padding:.7rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--ink)}
.search-res a:hover{background:var(--cream)}
.search-res a span{font-size:1.3rem}.search-res a b{flex:1}.search-res a small{color:var(--muted)}
.search-none{color:var(--muted);padding:.7rem}
.search-hint{color:var(--muted);font-size:.75rem;text-align:center;margin-top:.5rem}
.search-trigger{background:none;border:0;cursor:pointer;font-size:1.1rem;padding:.3rem;line-height:1}

/* ---- méga-menu Formations ---- */
.nav-links li.has-mega{position:static}
.mega{position:absolute;left:0;right:0;top:78px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s var(--ease);z-index:60}
.nav-links li.has-mega:hover .mega{opacity:1;visibility:visible;transform:none}
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:1.6rem 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.mega-col h4{font-family:"Poppins";font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--green-700);margin:0 0 .7rem}
.mega-col a{display:block;padding:.28rem 0;color:var(--ink);text-decoration:none;font-size:.9rem}
.mega-col a:hover{color:var(--green-700)}
.mega-cta{background:var(--cream);border-radius:var(--radius);padding:1.1rem}

/* ---- onglet Ressources (dropdown) ---- */
.nav-links .res-tab{position:relative}
.nav-links .res-tab>.dropdown{position:absolute;top:100%;left:0;margin-top:.4rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);min-width:210px;padding:.4rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s var(--ease);z-index:61}
.nav-links .res-tab:hover>.dropdown{opacity:1;visibility:visible;transform:none}
.nav-links .res-tab .dropdown a{display:block;padding:.55rem .7rem;border-radius:8px;color:var(--ink);font-size:.9rem}
.nav-links .res-tab .dropdown a:hover{background:var(--cream);color:var(--green-700)}
@media (max-width:980px){
  .nav-links.open .res-tab>.dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 1rem;margin:.2rem 0}
  .nav-links.open .res-tab .dropdown a{border-bottom:1px solid var(--line);font-size:1rem}
}

/* ---- marquee avis ---- */
.marquee{overflow:hidden;background:var(--cream);border-top:1px solid var(--cream-200);border-bottom:1px solid var(--cream-200);padding:.85rem 0}
.marquee-track{display:flex;gap:2.5rem;white-space:nowrap;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{color:var(--ink);font-size:.92rem}.marquee b{color:var(--green-700)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- burger plein écran (mobile) ---- */
@media (max-width:980px){
  .nav-links.open{position:fixed;left:0;right:0;top:78px;bottom:0;height:auto;background:#fff;flex-direction:column;
    justify-content:flex-start;padding:1.6rem 24px;gap:.2rem;box-shadow:none;border-bottom:0;font-size:1.15rem;overflow-y:auto}
  .nav-links.open li{width:100%}
  .nav-links.open a{padding:.9rem 0;border-bottom:1px solid var(--line);display:block}
}

/* ---- chips catalogue défilantes (mobile) ---- */
@media (max-width:640px){
  .catalog-filter{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;padding-bottom:.4rem}
  .catalog-filter .chip{flex:0 0 auto}
  .catalog-search{min-width:160px}
}

/* ---- accessibilité mouvement ---- */
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---- comparateur de formations ---- */
.cmp-picker{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem}
.cmp-chip{cursor:pointer;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.5rem 1rem;font-size:.86rem;font-weight:600;font-family:"Inter";color:var(--ink);transition:.2s}
.cmp-chip:hover{border-color:var(--green)}
.cmp-chip.on{background:var(--green-cta);color:var(--ink);border-color:var(--green-500)}
.cmp-wrap{overflow-x:auto}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;min-width:520px}
.cmp-table th{text-align:left;font-family:"Poppins";font-weight:600;font-size:.85rem;color:var(--muted);padding:1rem;width:180px;vertical-align:middle;border-bottom:1px solid var(--line)}
.cmp-table td{padding:1rem;text-align:center;border-bottom:1px solid var(--line);border-left:1px solid var(--line);vertical-align:middle;font-size:.92rem}
.cmp-img{width:100%;max-width:150px;height:90px;object-fit:cover;border-radius:10px;display:block;margin:0 auto .5rem}
.cmp-table a{text-decoration:none;color:var(--ink)}
.cmp-yes{color:var(--green-700);font-weight:600}
/* dispositif partiel : ni validation verte, ni refus — simple neutre */
.cmp-part{color:var(--muted,#5c6653);font-weight:500}
.cmp-empty{text-align:center;color:var(--muted);padding:2rem}

/* ---- page contact : encart Claire ---- */
.contact-claire{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.contact-claire img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:5px solid var(--green);box-shadow:var(--shadow);flex:0 0 auto;background:var(--cream-200)}
.contact-claire b{font-family:"Poppins";display:block;font-size:1.08rem;color:var(--ink)}
.contact-claire small{color:var(--muted);font-size:.86rem;line-height:1.45;display:block;margin-top:.25rem}

/* ---- page contact ---- */
.contact-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.1rem}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start}
.contact-list .ci{font-size:1.4rem;flex:0 0 auto;line-height:1}
.contact-list a{color:var(--green-700);font-weight:600}
.contact-social{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0}
.contact-social a{background:var(--cream);border:1px solid var(--cream-200);border-radius:999px;padding:.4rem .9rem;font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none}
.contact-social a:hover{border-color:var(--green);color:var(--green-700)}
.contact-map{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);margin-top:.4rem}
.contact-form{display:flex;flex-direction:column;gap:.7rem}
.contact-form input,.contact-form textarea{width:100%;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-size:.95rem;font-family:"Inter";background:#fff}
.contact-form textarea{resize:vertical}
.cf-row{display:flex;gap:.7rem}
.cf-row input{flex:1}
@media (max-width:520px){.cf-row{flex-direction:column}}

/* ---- respect de l'accessibilité ---- */
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .hero::before,.hero::after{animation:none}
  .btn-primary::after{display:none}
  .card:hover .thumb{transform:none}
  html.js .hero .eyebrow,html.js .hero h1,html.js .hero .lead,
  html.js .hero-actions,html.js .hero-trust,html.js .hero-visual{animation:none}
  html.js img[data-fade]{opacity:1}
  *{scroll-behavior:auto!important}
}

/* ===== v6 — 10 fonctionnalités conversion ===== */
/* extrait gratuit */
.extrait-box{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;background:linear-gradient(120deg,#f4f8ec,#fdfbf4);border:1px solid var(--line,#e4e7dd);border-radius:16px;padding:1.3rem 1.5rem;margin:2rem 0 .5rem}
.extrait-box .ex-txt{display:flex;gap:.9rem;align-items:flex-start;flex:1 1 320px}
.extrait-box .ex-emoji{font-size:1.7rem;line-height:1}
.extrait-box p{margin:.25rem 0 0;color:var(--muted,#6b7563);font-size:.92rem}
.extrait-box .ex-form{display:flex;gap:.5rem;flex:1 1 300px;min-width:260px}
.extrait-box .ex-form input{flex:1;min-width:0;padding:.7rem .9rem;border:1px solid var(--line,#d3d8c8);border-radius:10px;font:inherit}
/* simulateur financement */
/* Formation sans e-learning (ETP) : une seule carte tarif — on la centre
   au lieu de la laisser collée à gauche avec une colonne vide à droite. */
.split:has(> .tariff-card:only-child){grid-template-columns:minmax(0,520px);justify-content:center}

/* Session sur plusieurs jours : on liste chaque journée sous la date d'ouverture. */
/* Chaque date : l'info sur une ligne, puis le bouton pleine largeur dessous —
   même gabarit que le bouton « Choisir l'e-learning » de la carte voisine. */
.cvd-row{flex-direction:column;align-items:stretch}
.cvd-when{justify-content:center;text-align:center}
.cvd-buy{width:100%;margin-top:.6rem}
.cvd-row.multi{align-items:stretch}
/* la coche vient de .tariff-card li::before, prévue pour les listes d'avantages :
   en colonne elle occupait une ligne à elle seule. On la replace devant la date. */
.tariff-card .cvd-row::before{content:none}
.cvd-when::before{content:"✓";color:var(--green-700,#557a22);font-weight:700;margin-right:.15rem}
/* les journées et l'horaire dans un encadré : on voit d'un coup d'œil
   que ces lignes forment UNE session et pas plusieurs dates séparées */
.cvd-jours{display:flex;flex-direction:column;gap:.2rem;margin-top:.5rem;
  background:#f6faf0;border:1px solid #dbe8c8;border-radius:10px;padding:.6rem .75rem}
.cvd-jour{font-size:.86rem;color:var(--muted,#5c6653);line-height:1.45}
.cvd-jour b{display:inline-block;min-width:1.9rem;color:var(--green-700,#3d6218);font-weight:700}
.cvd-horaires{font-size:.84rem;color:var(--muted,#5c6653)}
/* le filet ne sépare que s'il y a des journées au-dessus : sur une formation
   d'un jour, l'horaire est seul et la ligne pointillée n'aurait rien à séparer */
.cvd-jour + .cvd-horaires{margin-top:.35rem;padding-top:.35rem;border-top:1px dashed #cfe0b8}
/* carte classe virtuelle : fond blanc, volontairement sobre face à l'e-learning */
.tariff-card.tariff-cv{background:#fff;border-color:var(--line,#e7e3cf)}

/* ---- visionneuse PDF superposée : le visiteur ne quitte pas la fiche formation ---- */
.pdfv{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:2vh 2vw;
  background:rgba(24,32,18,.72);opacity:0;transition:opacity .2s}
.pdfv.show{opacity:1}
.pdfv-box{width:min(1100px,96vw);height:min(92vh,1000px);display:flex;flex-direction:column;
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.4);
  transform:translateY(10px);transition:transform .2s}
.pdfv.show .pdfv-box{transform:none}
.pdfv-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.8rem 1rem;
  border-bottom:1px solid var(--line,#e4e7dd);background:var(--cream,#f7f6ef)}
.pdfv-titre{flex:1 1 260px;min-width:0;font-family:"Poppins","Inter",sans-serif;font-size:.98rem;
  color:var(--ink,#26301c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdfv-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pdfv-actions .btn{padding:.45rem .9rem;font-size:.88rem}
.pdfv-close{appearance:none;border:0;background:none;cursor:pointer;font-size:1.3rem;line-height:1;
  padding:.3rem .5rem;border-radius:8px;color:var(--muted,#5c6653)}
.pdfv-close:hover{background:#e8e6dc;color:var(--ink,#26301c)}
.pdfv-close:focus-visible,.pdfv-print:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:2px}
.pdfv-frame{flex:1;width:100%;border:0;background:#525659}
@media (max-width:780px){.pdfv-box{width:100vw;height:100vh;border-radius:0}}

/* ============================================================
   Carte e-learning mise en avant — « en-tête vitrine »
   L'idée retenue par le jury : ne pas décorer la carte mais changer sa
   SILHOUETTE. Le tiers haut devient un bloc vert plein bord terminé par un
   arc plongeant, le prix passe en blanc. À côté, la carte classe virtuelle
   blanche se lit immédiatement comme l'option secondaire.
   Le contenu du haut est regroupé dans .tcard-top : c'est lui qui porte le
   vert, donc aucune hauteur à synchroniser à la main.
   Pas d'overflow:hidden sur la carte — le badge FIFPL doit pouvoir déborder.
   ============================================================ */
.tariff-card.tariff-e{padding:0;gap:0;overflow:visible;
  border:2px solid var(--green-500,#9dc23f);border-radius:calc(var(--radius,18px) + .4rem);
  background:#fffdf4;
  box-shadow:0 1px 2px rgba(39,48,32,.06),0 18px 38px -18px rgba(77,122,31,.45),
             0 34px 60px -34px rgba(39,48,32,.28)}

/* overflow:hidden ICI et pas sur la carte : l'arc reste enfermé dans le bandeau
   (sinon il dépassait à gauche et à droite), et le badge FIFPL peut toujours
   déborder de la carte elle-même. */
/* Vert du logo (#b1d353), demandé par la cliente le 31/07. Trop clair pour du
   texte blanc (1,7:1) : le prix et les libellés sont en encre foncée, qui y
   tient à 8,1:1. C'est ce qui garde la carte lisible avec ce vert. */
.tariff-e .tcard-top{position:relative;overflow:hidden;padding:1.7rem 1.6rem 2.9rem;text-align:center;
  background:linear-gradient(160deg,#bcda66 0%,#b1d353 55%,#a0c63f 100%);
  border-radius:calc(var(--radius,18px) + .2rem) calc(var(--radius,18px) + .2rem) 0 0}
/* l'arc plongeant : un ovale de la couleur du corps qui mord dans le vert */
.tariff-e .tcard-top::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-1px;
  height:2.4rem;background:#fffdf4;border-radius:50% 50% 0 0}

/* Sorti du flux et posé à cheval sur le bord haut : sans lui dans le flux,
   les deux ordinateurs (e-learning et classe virtuelle) démarrent à la même hauteur. */
.tariff-e .tcard-reco{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:4;
  white-space:nowrap;background:linear-gradient(135deg,#4d7a1f,#3f6a17);color:#fff;
  border:2px solid #fff;box-shadow:0 6px 18px rgba(63,106,23,.4);
  font-family:"Poppins","Inter",sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase;padding:.45rem .95rem;border-radius:999px}

.tariff-e .tcard-visuel{position:relative;z-index:1;margin-bottom:.9rem;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.22))}
/* Le libellé du format reste DANS le vert, le prix en sort : la limite du vert
   passe donc juste au-dessus du tarif. Même pastille blanche dans les deux
   cartes, pour que les deux formats se lisent à égalité. */
.tcard-top .eyebrow{position:relative;z-index:1;margin:0;
  background:#fff;color:#3f6a17;font-weight:800;
  font-size:.84rem;letter-spacing:.14em;padding:.5rem 1.1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.10)}
.tariff-e .tcard-top .eyebrow{box-shadow:0 4px 12px rgba(0,0,0,.18)}
.tariff-cv .tcard-top .eyebrow{border:1px solid var(--line,#e7e3cf)}
/* Les deux cartes doivent poser leur prix à la même hauteur. Le bandeau vert
   réserve la place de l'arc en bas ; la carte blanche compense par un padding
   équivalent, sinon son tarif remonte de ~40 px. */
.tariff-card .tcard-head{margin:0;padding-top:1rem}
/* -.375rem (et le .575rem du ul plus bas) : valeurs mesurées pour que le prix
   et le premier point de liste tombent aux MÊMES hauteurs que dans la carte
   classe virtuelle d'à côté — les deux cartes doivent se lire ligne à ligne.
   z-index:2 obligatoire : en remontant, le prix passe sous l'arc du bandeau
   (un ovale opaque couleur du corps) qui le tronquait par le haut. */
.tariff-e .tcard-head{padding:0 1.6rem 1.3rem;margin-top:-.375rem;position:relative;z-index:2}
.tariff-cv .tcard-head{padding-bottom:1rem;margin-top:-.8rem}
.tariff-cv .tcard-top{padding-bottom:1.33rem}
.tariff-e .tprice{color:var(--ink,#273020);font-size:clamp(2.1rem,1.5rem + 2.2vw,2.6rem)}

/* Tous les boutons de l'encadré Tarifs à la même taille */
.tariff-card .btn,.cvd-buy,.cvd-form .btn{min-height:52px;font-size:.95rem;
  padding:.8rem 1.4rem;justify-content:center}
.tariff-card > .btn{width:auto}

/* le corps reprend le padding que la carte a perdu */
.tariff-e > ul{position:relative;z-index:1;padding:0 1.6rem;margin:.575rem 0 1rem}
.tariff-e > .btn{margin:0 1.6rem 1.6rem}

@media (prefers-reduced-motion:no-preference){
  .tariff-card.tariff-e{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease}
  .tariff-card.tariff-e:hover{transform:translateY(-4px);
    box-shadow:0 1px 2px rgba(39,48,32,.06),0 24px 46px -18px rgba(77,122,31,.52),
               0 44px 70px -34px rgba(39,48,32,.32)}
}
@media (max-width:520px){.tariff-e .tcard-top{padding:1.2rem 1.1rem 2.3rem}
  .tariff-e > ul{padding:0 1.1rem}.tariff-e > .btn{margin:0 1.1rem 1.2rem}}

/* ---- accueil : bloc « Financement », une carte par statut ---- */
.fin-cards{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-direction:column;gap:.7rem}
.fin-cards li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;
  column-gap:.9rem;align-items:center;background:#fff;border:1px solid var(--line,#e7e3cf);
  border-radius:14px;padding:.9rem 1.1rem}
.fin-cards .fc-ico{grid-row:1 / 4;font-size:1.7rem;line-height:1}
.fin-cards b{font-family:"Poppins","Inter",sans-serif;font-size:1rem;color:var(--green-700,#557a22)}
.fin-cards small{color:var(--ink,#273020);font-size:.9rem}
.fin-cards em{font-style:normal;color:var(--muted,#5d6753);font-size:.84rem;line-height:1.45}
.fin-cta{margin-top:1.2rem;width:100%;justify-content:center}

/* ---- accueil : bloc « Deux formats », un visuel par format ---- */
.fmt-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.3rem}
.fmt-item{display:flex;flex-direction:column;gap:.45rem;background:var(--cream,#faf7e6);
  border:1px solid var(--cream-200,#f3edcd);border-radius:14px;padding:.9rem}
.fmt-item img{width:100%;height:auto;display:block;border-radius:8px}
.fmt-item b{font-family:"Poppins","Inter",sans-serif;font-size:.98rem;color:var(--ink,#273020)}
.fmt-item small{color:var(--muted,#5d6753);font-size:.86rem;line-height:1.5}
.fmt-cta{margin-top:1.3rem;width:100%;justify-content:center}
@media (max-width:640px){.fmt-duo{grid-template-columns:1fr}}

/* Respiration générale : .section imposait 5,6 rem (90 px) en haut ET en bas,
   soit 180 px entre deux blocs. On descend à 3 rem, ce qui resserre toutes les
   pages d'un coup — accueil comprise — sans toucher aux sections qui ont déjà
   un padding en style inline (celles-ci restent prioritaires). */
.section{padding-top:2.5rem;padding-bottom:2.5rem}
.section .section-head{margin-bottom:2rem}

/* Boutons principaux dans le vert du logo (#b1d353), demandé par la cliente.
   Le texte passe en encre foncée : sur ce vert, du blanc tomberait à 2,4:1
   alors qu'un bouton d'action doit rester lisible. En foncé on est à 5,9:1. */
.btn-primary{background:linear-gradient(180deg,#bcda66,#b1d353);color:#22300f;border-color:#a0c63f}
.btn-primary:hover{background:linear-gradient(180deg,#b1d353,#a0c63f);color:#1b2709}
.btn-primary:focus-visible{outline:2px solid #3f6a17;outline-offset:2px}

/* Badge FIFPL : posé à cheval sur le coin haut-droit de l'encadré, comme un macaron
   collé dessus. Orange soutenu (#b45309) — le texte blanc y garde 6,3:1 de contraste. */
/* .buybox est déjà position:sticky (styles.css) — ne PAS la repasser en relative :
   son top:100px deviendrait un décalage vers le bas et elle perdrait son suivi
   au défilement. sticky suffit d'ailleurs à ancrer le ruban FIFPL. */
.tariff-card{position:relative}
/* Ruban FIFPL — forme et couleur validées par le client : bannière orange clair
   avec une encoche en chevron à gauche. clip-path découpe l'encoche ; l'ombre
   passe donc par filter:drop-shadow, qui suit la découpe (box-shadow serait rognée). */
.fifpl-badge{position:absolute;top:-12px;right:-10px;z-index:3;
  display:inline-flex;align-items:center;
  background:linear-gradient(180deg,#f7b569,#efa044);color:#fff;
  font-family:"Poppins","Inter",sans-serif;font-weight:700;font-size:.92rem;
  line-height:1.2;letter-spacing:.005em;white-space:nowrap;
  padding:.5rem 1rem .5rem 1.75rem;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, .85rem 50%);
  filter:drop-shadow(0 4px 10px rgba(180,110,20,.35))}
@media (max-width:520px){
  .fifpl-badge{top:-10px;right:-4px;font-size:.82rem;padding:.42rem .8rem .42rem 1.5rem}
}
/* Dans l'encadré Tarifs & formats, le badge se met SUR LA MÊME LIGNE que le prix.
   Le libellé du format garde sa ligne à lui (flex-basis 100 %), prix et badge
   se partagent la suivante — et repassent l'un sous l'autre si la carte est étroite. */
/* le prix se cale à mi-distance entre la pastille du format et la liste */
.tcard-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .8rem;
  padding:.55rem 0 .35rem}
/* les deux pastilles de format sont centrées : la carte classe virtuelle
   n'héritait pas du text-align appliqué au bandeau vert de l'e-learning */
.tcard-top{text-align:center}
.tcard-head .eyebrow{flex:1 1 100%;margin-bottom:.2rem}
/* prix et ruban centrés sur une seule ligne, même taille dans les deux cartes */
.tcard-head .tprice{flex:0 1 auto;line-height:1.05;
  font-size:clamp(2.1rem,1.5rem + 2.2vw,2.6rem);color:var(--ink,#273020)}
.tcard-head .fifpl-badge{position:static;flex:0 1 auto;margin:0;
  font-size:.86rem;padding:.45rem .85rem .45rem 1.6rem}

/* ---- visuel « ordinateur » en tête de carte tarif, titre et prix centrés ---- */
/* image détourée (plus de blanc autour) : l'espacement vient d'ici et s'aligne
   sur le padding latéral de la carte, pour un cadrage régulier des 4 côtés */
.tcard-visuel{display:block;width:100%;height:auto;margin:0 auto 1.35rem}
.tcard-head{text-align:center;margin-bottom:.2rem}
.tcard-head .eyebrow{display:block;margin-bottom:.35rem}
.tcard-head .tprice{justify-content:center}
@media (max-width:640px){.tcard-visuel{max-width:320px}}

/* ---- éligibilité FIFPL : bandeau d'état, affiché sur chaque page formation ---- */
.elig{display:flex;gap:1rem;align-items:flex-start;margin:2.2rem auto 0;max-width:860px;
  border-radius:16px;padding:1.15rem 1.3rem;border:1px solid;line-height:1.6}
.elig--ok{background:#eef6e6;border-color:#cfe3b8}
.elig--no{background:#fff8ec;border-color:#e8d5a8}
.elig .el-ico{font-size:1.5rem;line-height:1.2;flex:0 0 auto}
/* le titre seul est en bloc — sinon chaque <b> du texte casserait la phrase en morceaux */
.elig .el-body .el-titre{display:block;font-family:"Poppins","Inter",sans-serif;font-size:1.02rem;font-weight:700;
  color:var(--ink,#26301c);margin:0 0 .3rem}
.elig .el-body b{display:inline;color:var(--ink,#26301c)}
.elig .el-body p{margin:0;color:var(--muted,#5c6653);font-size:.94rem}
.elig .el-chiffres{list-style:none;padding:0;margin:.7rem 0 .6rem;display:flex;flex-direction:column;gap:.35rem;
  color:var(--muted,#5c6653);font-size:.93rem}
.elig .el-chiffres li{padding-left:1.1rem;text-indent:-1.1rem}
.elig .el-chiffres li::before{content:"— "}
.elig .el-chiffres b{display:inline;font-size:inherit;margin:0;color:var(--ink,#26301c)}
.elig .el-fine{font-size:.86rem!important;color:var(--muted,#6b7563);line-height:1.55}
.elig .el-more{margin-top:.7rem}
.elig .el-more summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--green-700,#3d6218)}
.elig .el-more summary:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:2px}
.elig .fp-elig{margin-top:.5rem}

/* ---- test d'éligibilité ---- */
.eligtest{margin:1.4rem auto 0;max-width:860px;background:#fff;border:1px solid var(--line,#e4e7dd);
  border-radius:18px;padding:1.5rem 1.6rem;box-shadow:0 6px 20px rgba(31,42,23,.05)}
.et-head{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.2rem}
.et-head .et-ico{font-size:1.5rem;line-height:1.2}
.et-head b{display:block;font-family:"Poppins","Inter",sans-serif;font-size:1.08rem;color:var(--ink,#26301c)}
.et-head p{margin:.15rem 0 0;color:var(--muted,#5c6653);font-size:.92rem}
.et-q{margin-bottom:.9rem}
.et-q[hidden]{display:none}
.et-q label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem;color:var(--ink,#26301c)}
.et-q select{width:100%;max-width:420px;padding:.65rem .85rem;border:1px solid var(--line,#d3d8c8);
  border-radius:10px;font:inherit;background:#fff}
.et-q select:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:1px}
.et-card{margin-top:1.2rem;border:1px solid;border-radius:14px;padding:1.15rem 1.3rem}
.et-card.et-ok{background:#eef6e6;border-color:#cfe3b8}
.et-card.et-no{background:#fff8ec;border-color:#e8d5a8}
.et-card.et-check{background:#f4f7fb;border-color:#cfdcea}
.et-verdict{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:.6rem}
.et-verdict > span{font-size:1.4rem;line-height:1.1}
.et-disp{display:inline-block;font-family:"Poppins","Inter",sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--green-700,#3d6218);margin-bottom:.15rem}
.et-verdict b{display:block;font-family:"Poppins","Inter",sans-serif;font-size:1.05rem;color:var(--ink,#26301c)}
.et-card > p{margin:0 0 1rem;color:var(--muted,#5c6653);font-size:.94rem;line-height:1.65}
.et-steps{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.7rem}
.et-steps > li{position:relative;padding-left:1.3rem}
.et-steps > li::before{content:"—";position:absolute;left:0;top:0;color:var(--green-700,#3d6218);font-weight:700}
.et-steps > li > b{display:block;font-family:"Poppins","Inter",sans-serif;font-size:.95rem;color:var(--ink,#26301c)}

/* encadré « formations éligibles » affiché dans un verdict négatif */
.et-liste{background:#fff8ec;border:1px solid #e8d5a8;border-radius:12px;padding:.9rem 1.1rem;margin:0 0 1.1rem}
.et-liste > b{display:block;font-family:"Poppins","Inter",sans-serif;font-size:.97rem;color:var(--ink,#26301c);margin-bottom:.25rem}
.et-liste > p{margin:0 0 .5rem;font-size:.9rem;color:var(--muted,#5c6653)}
.et-liste ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.28rem}
.et-liste li{padding-left:1.1rem;text-indent:-1.1rem;font-size:.92rem;line-height:1.5}
.et-liste li::before{content:"— ";color:var(--green-700,#3d6218)}
.et-liste a{color:var(--green-700,#3d6218);text-decoration:underline;text-underline-offset:2px}
.et-liste a:hover{text-decoration-thickness:2px}
.et-steps > li > span{display:block;margin-top:.15rem;color:var(--muted,#5c6653);font-size:.9rem;line-height:1.55}
.et-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.et-legal{margin:1rem 0 0;font-size:.82rem;color:var(--muted,#6b7563);line-height:1.55}
@media (max-width:640px){.eligtest{padding:1.2rem}.elig{flex-direction:column;gap:.6rem}
  .et-q select{max-width:100%}.et-actions .btn{width:100%;text-align:center}}
/* offre duo */
.duo-offer{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:#fff8ec;border:1px dashed #e4c98a;border-radius:14px;padding:1rem 1.3rem;margin:1.2rem 0}
.duo-offer .duo-emoji{font-size:1.6rem}
.duo-offer div{flex:1 1 320px}
.duo-offer code{background:var(--green-cta,#b1d353);color:var(--ink,#26301c);padding:.15rem .55rem;border-radius:8px;font-weight:700;letter-spacing:.03em}
/* remise fidélité : vérification par e-mail, sans code à saisir */
.duo-offer[data-fid]{align-items:flex-start}
.fid-body{flex:1 1 100%}
.fid-body > b{display:block;font-family:"Poppins","Inter",sans-serif;font-size:1.02rem;color:var(--ink,#26301c)}
.fid-intro{margin:.3rem 0 .8rem;color:var(--muted,#5c6653);font-size:.92rem;line-height:1.6;max-width:70ch}
.fid-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.fid-form input{flex:1 1 240px;min-width:0;padding:.6rem .85rem;border:1px solid var(--line,#d3d8c8);
  border-radius:10px;font:inherit;background:#fff}
.fid-form input:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:1px}
.fid-form .btn{flex:0 0 auto;background:#fff}
.fid-msg{margin:.6rem 0 0;font-size:.91rem;line-height:1.55;color:var(--muted,#5c6653)}
.fid-msg.ok{color:var(--green-700,#3d6218)}
.fid-msg.ko{color:#8c3a32}
@media (max-width:560px){.fid-form input,.fid-form .btn{flex:1 1 100%;width:100%;justify-content:center}}
/* early-bird */
/* bannière reprise */
.resume-banner{position:fixed;left:50%;bottom:-90px;transform:translateX(-50%);z-index:960;display:flex;align-items:center;gap:.9rem;background:#26301c;color:#fff;border-radius:999px;padding:.55rem .6rem .55rem 1.2rem;box-shadow:0 12px 34px rgba(0,0,0,.28);transition:bottom .4s ease;max-width:min(92vw,640px)}
.resume-banner.show{bottom:18px}
.resume-banner span{font-size:.9rem}
.resume-banner .btn{padding:.5rem .9rem;font-size:.85rem}
.resume-banner .rb-x{background:none;border:none;color:#ffffffb0;font-size:1.2rem;cursor:pointer;padding:.2rem .5rem}
@media (max-width:640px){
  .extrait-box .ex-form{flex-direction:column}
  .resume-banner{border-radius:16px;flex-wrap:wrap;justify-content:center;padding:.8rem 1rem}
}

/* bouton webinaire encadré (hero accueil, comme nutry.online) */
.hero-actions .btn-ghost{border:2px solid var(--green,#4d7a1f);color:var(--green-700,#3d6218);font-weight:600;background:#fff}
.hero-actions .btn-ghost:hover{background:var(--green-soft,#eef3e3);border-color:var(--green-700,#3d6218)}

/* ============================================================
   HERO v2 — mise en page nutry.online, reconstruite en vrai texte
   (net à toute résolution, lisible par Google et les lecteurs d'écran)
   ============================================================ */
.hero-v2{
  background:linear-gradient(180deg,#fbfcf6 0%,#fff 62%);
  padding:clamp(2.4rem,5vw,4.4rem) 0 clamp(2.6rem,5vw,4.6rem);
  overflow:visible;
}
.hero-v2 .hero-grid{grid-template-columns:1fr 1.12fr;gap:clamp(1.8rem,4vw,3.6rem);align-items:center}

/* titre : « transformez vos pratiques » en vert sur sa propre ligne */
.hero-v2 h1{
  font-family:"Poppins","Inter",sans-serif;font-weight:600;
  font-size:clamp(2rem,4.3vw,3.35rem);line-height:1.14;letter-spacing:-.022em;
  color:#39403a;margin-bottom:1.35rem;text-wrap:balance;
}
.hero-v2 h1 .hl{display:block;color:#7fb241;white-space:normal}
.hero-v2 .lead{font-size:clamp(1rem,1.25vw,1.12rem);color:#5f6a58;max-width:34ch;margin-bottom:2rem}
.hero-v2 .hero-actions{margin-bottom:0}

/* bandeau de preuve : note réelle + Qualiopi */
.hero-proof{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.2rem);flex-wrap:wrap;margin-top:clamp(2.2rem,5vw,3.4rem)}
.hp-item{display:flex;align-items:center;gap:.75rem}
.hp-item.hp-col{flex-direction:column;align-items:flex-start;gap:.35rem}
.hp-ico{width:40px;height:40px;flex:0 0 auto;color:#7fb241}
.hp-txt b{display:block;font-family:"Poppins",sans-serif;font-size:1.5rem;font-weight:600;color:#39403a;line-height:1}
.hp-txt small{display:block;color:#6b7563;font-size:.8rem;line-height:1.4;margin-top:.3rem}
.hp-sep{width:1px;align-self:stretch;min-height:52px;background:#dfe4d5}
.hp-qualiopi{height:46px;width:auto;display:block}
.hp-cert{color:#6b7563;font-size:.74rem;letter-spacing:.06em;font-weight:600}

/* visuel : photo + encart de bénéfices posé par-dessus l'ancien encart incrusté */
.hero-v2 .hero-visual{position:relative;line-height:0}
.hero-v2 .hero-shot img{
  width:100%;height:auto;display:block;border-radius:18px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 13%);
          mask-image:linear-gradient(to right,transparent 0,#000 13%);
}
.hero-feats{
  position:absolute;right:6.5%;top:38%;bottom:15.5%;width:32%;
  margin:0;padding:clamp(.7rem,1.25vw,1.15rem) clamp(.7rem,1.2vw,1.1rem);
  list-style:none;background:#99ac4b;border-radius:16px;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(.6rem,1.15vw,1.05rem);
  box-shadow:0 14px 34px rgba(52,70,22,.22);line-height:1.32;
}
.hero-feats li{display:flex;align-items:flex-start;gap:.6rem;color:#fff;font-size:clamp(.6rem,.92vw,.87rem);font-weight:500}
.hero-feats svg{width:clamp(15px,1.55vw,21px);height:clamp(15px,1.55vw,21px);flex:0 0 auto;margin-top:.05em;opacity:.95}
.hero-feats em{font-style:normal;opacity:.92}

@media (max-width:900px){
  .hero-v2 .hero-grid{grid-template-columns:1fr}
  .hero-v2 h1 .hl{display:inline}
  .hero-v2 .hero-shot img{-webkit-mask-image:none;mask-image:none}
  .hero-feats{
    position:static;width:auto;inset:auto;margin-top:1rem;
    padding:1.1rem 1.2rem;gap:.9rem;box-shadow:0 8px 22px rgba(52,70,22,.16);
  }
  .hero-feats li{font-size:.95rem}
  .hero-feats svg{width:22px;height:22px}
}
@media (max-width:520px){
  .hero-proof{gap:1rem}
  .hp-sep{display:none}
}

/* photo qui file jusqu'au bord droit de l'écran (comme nutry.online) */
@media (min-width:901px){
  .hero-v2 .hero-grid{grid-template-columns:1fr 1.25fr}
  .hero-v2 .hero-visual{
    --bleed:max(0px,(100vw - 1133px)/2);
    width:calc(100% + var(--bleed));
    margin-right:calc(-1 * var(--bleed));
  }
  .hero-v2 .hero-shot img{border-radius:0}
}

/* encart de bénéfices : typo indexée sur la largeur de la PHOTO (et non de l'écran),
   pour rester lisible quelle que soit la taille du visuel */
@media (min-width:901px){
  .hero-v2 .hero-visual{container-type:inline-size}
  .hero-feats{padding:clamp(.6rem,2.6cqw,1.15rem) clamp(.6rem,2.4cqw,1.1rem);gap:clamp(.5rem,2.1cqw,1.05rem)}
  .hero-feats li{font-size:clamp(11.5px,2.45cqw,15px)}
  .hero-feats svg{width:clamp(15px,3.1cqw,21px);height:clamp(15px,3.1cqw,21px)}
}

/* Titres & sous-titres de section : une seule ligne quand le texte y tient.
   (les limites 62ch/60ch coupaient des titres qui rentraient largement) */
.section-head{max-width:min(100%,1100px)}
.section-head h2{text-wrap:balance}
.section-head .lead{max-width:min(100%,880px)}
.section-head .lead{text-wrap:pretty}

/* débordement de la photo : marge de sécurité + découpe, pour atteindre le bord
   visible quelle que soit la largeur de la barre de défilement (100vw l'inclut) */
.hero-v2{overflow:clip}
@media (min-width:901px){
  .hero-v2 .hero-visual{--bleed:max(0px,(100vw - 1133px)/2 + 22px)}
}

/* ============================================================
   PAGE WEBINAIRE — replay débloqué par inscription
   ============================================================ */
.replay-top{background:linear-gradient(180deg,#f7faf0 0%,#fff 100%);padding:clamp(2.2rem,5vw,3.8rem) 0 clamp(2rem,4vw,3rem)}
.replay-intro{max-width:820px;margin:0 auto 2.2rem;text-align:center}
.replay-intro h1{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:700;letter-spacing:-.02em;margin:.5rem 0 0;text-wrap:balance}
.replay-intro .lead{margin:1rem auto 0;max-width:70ch}
.replay-note{margin:1.1rem auto 0;display:inline-block;background:var(--green-soft,#eef3e3);color:var(--green-700,#3d6218);
  border-radius:999px;padding:.5rem 1.1rem;font-size:.92rem}

.replay-stage{max-width:940px;margin:0 auto}
.replay-frame{position:relative;aspect-ratio:16/9;background:#20260f;border-radius:18px;overflow:hidden;
  box-shadow:0 22px 60px rgba(31,42,23,.22)}
.replay-frame video{width:100%;height:100%;display:block;object-fit:cover;background:#20260f}

/* voile de verrouillage */
.replay-gate{position:absolute;inset:0;display:grid;place-items:center;padding:1.2rem;
  background:linear-gradient(160deg,rgba(38,48,22,.93),rgba(59,82,26,.95));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);text-align:center;color:#fff}
.rg-inner{width:min(100%,430px)}
.rg-play{display:grid;place-items:center;width:60px;height:60px;margin:0 auto .8rem;border-radius:50%;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.55);font-size:1.3rem;padding-left:4px}
.replay-gate h2{color:#fff;font-size:clamp(1.15rem,2.2vw,1.5rem);margin:0 0 .4rem}
.replay-gate p{color:#e6efd6;font-size:.94rem;margin:0 0 1.1rem}
.rg-form{display:flex;flex-direction:column;gap:.55rem}
.rg-form input{padding:.8rem 1rem;border:0;border-radius:10px;font:inherit;font-size:.95rem;width:100%}
.rg-form input:focus-visible{outline:3px solid var(--green,#a4c95a);outline-offset:2px}
.rg-form .btn{width:100%;justify-content:center}
.rg-legal{display:block;margin-top:.9rem;color:#cfdcbb;font-size:.76rem;line-height:1.45}
.replay-gate .form-msg{margin:.3rem 0 0;font-size:.88rem}
.replay-gate .form-msg.err{color:#ffd9d3}
.replay-gate .form-msg.ok{color:#dff3c4}

/* état débloqué : le voile disparaît */
.replay-stage.unlocked .replay-gate{display:none}

/* vidéo absente (fichier pas encore déposé) */
.replay-missing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;padding:1.5rem;text-align:center;color:#fff;background:linear-gradient(160deg,#2b3618,#445c1e)}
.replay-missing .rm-ico{font-size:2.2rem}
.replay-missing p{color:#dbe7c6;font-size:.9rem;margin:.2rem 0 0;max-width:36ch}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:600px){
  .replay-frame{aspect-ratio:4/3}
  .rg-play{width:48px;height:48px;font-size:1.05rem;margin-bottom:.55rem}
  .replay-gate p{font-size:.88rem;margin-bottom:.85rem}
  .rg-legal{font-size:.72rem}
}

/* mobile : tant que c'est verrouillé, le cadre s'adapte à la hauteur du formulaire
   (sinon le contenu débordait du ratio 4/3) */
@media (max-width:600px){
  .replay-stage:not(.unlocked) .replay-frame{aspect-ratio:auto}
  .replay-stage:not(.unlocked) .replay-frame video{position:absolute;inset:0;height:100%}
  .replay-stage:not(.unlocked) .replay-gate{position:relative;inset:auto;padding:1.6rem 1.1rem}
}

/* ---- dates de classe virtuelle achetables (page de vente, panneau Tarifs) ---- */
.cv-dates{margin-top:.4rem}
.cvd-title{font-weight:600;margin:0 0 .6rem;font-size:.95rem}
.cvd-list{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.5rem}
.cvd-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line,#e4e7dd);border-radius:12px;padding:.6rem .8rem}
.cvd-row.full{opacity:.62}
.cvd-when{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.94rem}
.cvd-left{background:#fff3e0;color:#8a5a00;border-radius:999px;padding:.1rem .5rem;font-size:.75rem;font-weight:700;white-space:nowrap}
.cvd-full{font-size:.85rem;color:var(--muted,#6b7563);font-weight:600;white-space:nowrap}
.cvd-buy{padding:.5rem .9rem;font-size:.86rem;white-space:nowrap}
.cvd-wait{border-top:1px dashed var(--line,#d3d8c8);padding-top:.9rem}
.cvd-wait p{margin:0 0 .5rem;font-size:.88rem;color:var(--muted,#5c6653)}
.cvd-form{display:flex;gap:.45rem;flex-wrap:wrap}
.cvd-form input{flex:1;min-width:150px;padding:.6rem .8rem;border:1px solid var(--line,#d3d8c8);border-radius:10px;font:inherit;font-size:.9rem}
.cvd-form .btn{padding:.6rem 1rem;font-size:.88rem;background:#fff}
.cvd-form .form-msg{flex-basis:100%;margin:.3rem 0 0;font-size:.85rem}
@media (max-width:520px){
  .cvd-row{flex-direction:column;align-items:stretch}
  .cvd-buy{width:100%;justify-content:center}
}

/* ---- « Détails de la formation » : accordéon des informations réglementaires ---- */
.det-title{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 1.4rem}
.det-acc{border-top:1px solid var(--line,#e4e7dd)}
.det-row{border-bottom:1px solid var(--line,#e4e7dd)}
.det-row summary{display:flex;align-items:center;gap:1rem;padding:1.15rem .25rem;cursor:pointer;list-style:none;
  font-family:"Poppins","Inter",sans-serif;font-weight:600;font-size:clamp(.98rem,1.5vw,1.08rem);color:var(--ink,#26301c)}
.det-row summary::-webkit-details-marker{display:none}
.det-row summary:hover{color:var(--green-700,#3d6218)}
.det-row summary:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:3px;border-radius:8px}
.det-ico{flex:0 0 auto;width:26px;height:26px;color:var(--green-700,#3d6218)}
.det-ico svg{width:100%;height:100%;display:block}
.det-lab{flex:1}
.det-sign{flex:0 0 auto;position:relative;width:34px;height:34px;border-radius:50%;background:var(--cream,#f6f3e8);transition:background .2s,transform .2s}
.det-sign::before,.det-sign::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink,#26301c);border-radius:2px;transform:translate(-50%,-50%)}
.det-sign::before{width:13px;height:1.8px}
.det-sign::after{width:1.8px;height:13px;transition:opacity .2s,transform .2s}
.det-row[open] .det-sign{background:var(--green-soft,#eef3e3)}
.det-row[open] .det-sign::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.det-body{padding:0 .25rem 1.35rem;max-width:72ch;color:var(--muted,#5c6653);font-size:.96rem;line-height:1.65}
.det-body p{margin:0 0 .7rem}
.det-body p:last-child{margin-bottom:0}
.det-body .deliverables{margin:0}
.det-body a{color:var(--green-700,#3d6218)}
@media (prefers-reduced-motion:reduce){.det-sign,.det-sign::after{transition:none}}
@media (max-width:560px){
  .det-row summary{gap:.7rem;padding:1rem .1rem}
  .det-sign{width:30px;height:30px}
}

/* ---- objectif / durée / formats, sous l'image de la page formation ---- */
.fh-brief{margin-top:1.4rem}
.fhb-lab{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-700,#3d6218);margin-bottom:.35rem}
.fhb-obj p{margin:0;color:var(--ink,#26301c);font-size:1.02rem;line-height:1.6;max-width:62ch}
.fhb-meta{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line,#e4e7dd)}
.fhb-item{display:flex;align-items:flex-start;gap:.65rem}
.fhb-ico{font-size:1.25rem;line-height:1.2;flex:0 0 auto}
.fhb-item b{display:block;font-family:"Poppins","Inter",sans-serif;font-size:.9rem;color:var(--ink,#26301c)}
.fhb-item p{margin:.15rem 0 0;color:var(--muted,#5c6653);font-size:.92rem}
.fhb-item small{color:var(--faint,#98a08c)}
@media (max-width:560px){.fhb-meta{gap:1rem;flex-direction:column}}

/* réagencement : durée/formats d'abord, puis la liste détaillée des objectifs */
.fh-brief .fhb-meta{margin-top:1.3rem;padding-top:0;border-top:0;padding-bottom:1.2rem;border-bottom:1px solid var(--line,#e4e7dd)}
.fh-brief .fhb-obj{margin-top:1.3rem}
.fhb-list{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.55rem;max-width:64ch}
.fhb-list li{position:relative;padding-left:1.6rem;color:var(--ink,#26301c);font-size:.96rem;line-height:1.55}
.fhb-list li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;border-radius:50%;
  background:var(--green,#a4c95a);box-shadow:0 0 0 3px var(--green-soft,#eef3e3)}

/* ---- options papier (support + attestation) ---- */
.opt-block{margin-top:2rem}
.opt-h{font-size:1.1rem;margin:0 0 1rem}
.opt-h small{font-weight:400;color:var(--muted,#6b7563);font-size:.85rem}
.opt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.opt-card{display:flex;flex-direction:column;background:#fff;border:2px solid var(--line,#e4e7dd);border-radius:16px;
  overflow:hidden;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.opt-card:hover{border-color:var(--green,#a4c95a)}
.opt-card.on{border-color:var(--green-700,#3d6218);box-shadow:0 8px 24px rgba(61,98,24,.14)}
.opt-card img{width:100%;height:auto;display:block;background:linear-gradient(160deg,#f7faf0,#eef3e3)}
.opt-txt{display:block;padding:.9rem 1rem .2rem}
.opt-txt b{display:block;font-family:"Poppins","Inter",sans-serif;font-size:.98rem;color:var(--ink,#26301c)}
.opt-txt small{display:block;margin-top:.3rem;color:var(--muted,#5c6653);font-size:.86rem;line-height:1.5}
.opt-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding:.9rem 1rem 1rem}
.opt-price{font-family:"Poppins","Inter",sans-serif;font-weight:700;color:var(--green-700,#3d6218)}
.opt-check{position:absolute;opacity:0;width:0;height:0}
.opt-box{position:relative;width:26px;height:26px;border:2px solid var(--line-strong,#d3d8c8);border-radius:8px;background:#fff;flex:0 0 auto;transition:background .18s,border-color .18s}
.opt-box::after{content:"";position:absolute;left:8px;top:3.5px;width:6px;height:12px;border:solid #fff;border-width:0 2.6px 2.6px 0;transform:rotate(42deg) scale(.5);opacity:0;transition:opacity .18s,transform .18s}
.opt-card.on .opt-box{background:var(--green-cta,#b1d353);border-color:var(--green-500,#9dc23f)}
.opt-card.on .opt-box::after{opacity:1;transform:rotate(42deg) scale(1)}
.opt-check:focus-visible ~ .opt-box{outline:3px solid var(--green-soft,#eef3e3);outline-offset:2px;border-color:var(--green,#a4c95a)}
.opt-sum{margin:1rem 0 0;color:var(--muted,#5c6653);font-size:.92rem}
.opt-sum b{color:var(--green-700,#3d6218);font-family:"Poppins","Inter",sans-serif}
@media (max-width:640px){.opt-grid{grid-template-columns:1fr}}

/* ---- options papier dans la colonne d'achat (miniatures + prix en gras) ---- */
.buy-opts{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line,#e4e7dd)}
.bo-lab{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-700,#3d6218);margin-bottom:.6rem}
.bo-lab small{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted,#6b7563)}
.bo-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.bo-item{display:flex;flex-direction:column;gap:.45rem;text-decoration:none;border:1px solid var(--line,#e4e7dd);
  border-radius:12px;padding:.45rem;background:#fff;transition:border-color .18s,transform .18s,box-shadow .18s}
.bo-item:hover{border-color:var(--green,#a4c95a);transform:translateY(-2px);box-shadow:0 6px 16px rgba(61,98,24,.12)}
.bo-item img{width:100%;height:auto;display:block;border-radius:8px;
  background:linear-gradient(160deg,#f7faf0,#eef3e3)}
.bo-txt{display:block;font-size:.76rem;line-height:1.3;color:var(--muted,#5c6653);text-align:center}
.bo-txt b{display:block;margin-top:.15rem;font-family:"Poppins","Inter",sans-serif;font-size:.95rem;
  font-weight:700;color:var(--ink,#26301c)}

/* formats mis en avant (sans prix) sous l'image */
.fhb-fmt{font-weight:600;color:var(--ink,#26301c)}

/* correctif mobile : le bloc « prochaine session / me prévenir » refusait de rétrécir
   et élargissait toute la colonne d'achat (débordement horizontal sous 400px) */
.next-cta,.next-cta *{min-width:0}
@media (max-width:600px){
  .next-cta .nc-form{flex-wrap:wrap}
  .next-cta .nc-form input,.next-cta .nc-form .btn{flex:1 1 100%;width:100%;justify-content:center}
}

/* formats en encadrés, tout sur une seule ligne */
.fh-brief .fhb-meta{align-items:flex-start;gap:2rem;flex-wrap:nowrap}
.fhb-item{min-width:0}
.fhb-fmts{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.35rem}
.fmt-chip{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
  background:var(--green-soft,#eef3e3);color:var(--green-700,#3d6218);
  border:1px solid #d8e5c2;border-radius:999px;padding:.28rem .7rem;
  font-family:"Poppins","Inter",sans-serif;font-size:.82rem;font-weight:600}
@media (max-width:560px){
  .fh-brief .fhb-meta{flex-wrap:wrap;gap:1.1rem}
}

/* mention financement en bas de la colonne d'achat */
.buy-fin{text-align:center;margin:1rem 0 0;padding-top:1rem;border-top:1px solid var(--line,#e4e7dd);
  font-size:.84rem;color:var(--muted,#5c6653);line-height:1.6}
.buy-fin a{color:var(--green-700,#3d6218);text-decoration:none}
.buy-fin a:hover{text-decoration:underline}

/* attestation réelle de la formation (image extraite du PDF Nutry) */
.bo-item picture,.opt-card picture{display:block}
.bo-att,.opt-att{width:100%;height:auto;display:block;border-radius:8px;background:#fff}
.opt-att{border-radius:0;border-bottom:1px solid var(--line,#e4e7dd)}

/* ---- onglets « Objectifs / Contenu de la formation » ---- */
/* Objectifs et contenu ne sont plus des onglets : deux titres, l'un sous l'autre.
   Le style reprend celui des onglets — même graisse, mêmes majuscules — pour ne pas
   dépayser, mais sans le trait de séparation qui appelait un clic. */
.fhb-titre{font-family:"Poppins",sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-700,#557a22);margin:2rem 0 .2rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--line,#e4e7dd)}
.fhb-obj>.fhb-titre:first-child{margin-top:0}
.fhb-tabs{display:flex;gap:.3rem;flex-wrap:wrap;border-bottom:1px solid var(--line,#e4e7dd);margin-bottom:1rem}
.fhb-tab{appearance:none;background:none;border:0;border-bottom:2.5px solid transparent;margin-bottom:-1px;
  padding:.55rem .2rem;margin-right:1.4rem;cursor:pointer;font:inherit;
  font-family:"Poppins","Inter",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint,#9aa28c);transition:color .18s,border-color .18s}
.fhb-tab:last-child{margin-right:0}
.fhb-tab:hover{color:var(--green-700,#3d6218)}
.fhb-tab.is-on{color:var(--green-700,#3d6218);border-bottom-color:var(--green,#a4c95a)}
.fhb-tab:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:3px;border-radius:6px}
.fhb-detail{list-style:none;padding:0;margin:0;counter-reset:mod;display:flex;flex-direction:column;gap:.9rem;max-width:64ch}
.fhb-detail li{counter-increment:mod;position:relative;padding-left:2.4rem}
.fhb-detail li::before{content:counter(mod);position:absolute;left:0;top:0;width:1.7rem;height:1.7rem;
  display:grid;place-items:center;border-radius:50%;background:var(--green-soft,#eef3e3);
  color:var(--green-700,#3d6218);font-family:"Poppins","Inter",sans-serif;font-size:.78rem;font-weight:700}
.fhb-detail b{display:block;font-family:"Poppins","Inter",sans-serif;font-size:.96rem;color:var(--ink,#26301c);line-height:1.4}
.fhb-detail span{display:block;margin-top:.15rem;color:var(--muted,#5c6653);font-size:.92rem;line-height:1.55}
@media (max-width:520px){.fhb-tab{margin-right:.85rem;font-size:.67rem;letter-spacing:.05em;padding:.5rem .1rem}}

/* en-tête de la colonne d'achat : réassurance avant le prix */
.buy-head{margin-bottom:1rem;padding-bottom:.95rem;border-bottom:1px solid var(--line,#e4e7dd)}
.bh-badge{display:inline-block;background:var(--green-soft,#eef3e3);color:var(--green-700,#3d6218);
  border-radius:999px;padding:.32rem .8rem;font-family:"Poppins","Inter",sans-serif;
  font-size:.82rem;font-weight:700}
.bh-sub{margin:.7rem 0 0;color:var(--muted,#5c6653);font-size:.88rem;line-height:1.5}
.bh-sub b{color:var(--ink,#26301c)}
.bh-fin{margin:.45rem 0 0;color:var(--muted,#5c6653);font-size:.88rem;line-height:1.5}
.bh-fin b{color:var(--green-700,#3d6218)}
/* libellés d'onglets raccourcis sur petit écran (sinon ils passent sur 2 lignes) */
@media (max-width:560px){.tab-long{display:none}}

/* titre encadré « Tarifs » en tête de la colonne d'achat */
.buy-title{display:inline-block;background:var(--green-soft,#eef3e3);color:var(--green-700,#3d6218);
  border:1.5px solid #d8e5c2;border-radius:10px;padding:.4rem 1.1rem;margin-bottom:1rem;
  font-family:"Poppins","Inter",sans-serif;font-size:1rem;font-weight:700;letter-spacing:.01em}

/* mock-ups reliés : support de formation (couverture réelle) */
.bo-sup,.opt-sup{width:100%;height:auto;display:block;background:#fff}
.bo-sup{border-radius:8px}
.opt-sup{border-bottom:1px solid var(--line,#e4e7dd)}
/* les 2 vignettes de la colonne d'achat gardent la même hauteur malgré des formats différents */
.bo-grid{align-items:stretch}
.bo-item img{aspect-ratio:3/4;object-fit:contain;object-position:center}
.opt-card img{aspect-ratio:4/3;object-fit:contain;object-position:center;background:linear-gradient(160deg,#f7faf0,#eef3e3)}

/* correctif : `display:flex` sur les panneaux annulait l'attribut [hidden]
   (la règle navigateur [hidden]{display:none} a une spécificité plus faible qu'une classe)
   → les deux onglets restaient affichés l'un sous l'autre. */
.fhb-list[hidden],.fhb-detail[hidden],[data-tabpanel][hidden]{display:none}

/* titre de formation sur toute la largeur, au-dessus du bloc tarifs
   (taille fluide pour tenir sur une ligne ; se replie proprement si le titre est très long) */
.form-title{font-size:clamp(1.55rem,3.05vw,2.5rem);font-weight:700;letter-spacing:-.022em;
  line-height:1.14;margin:.5rem 0 1.6rem;text-wrap:balance}
@media (max-width:900px){.form-title{margin-bottom:1.2rem}}
/* titres longs : taille réduite pour rester sur une seule ligne */
.form-title.t-long{font-size:clamp(1.4rem,2.62vw,2.15rem)}
.form-title.t-xlong{font-size:clamp(1.22rem,2.2vw,1.82rem)}

/* ============================================================
   « Détails de la formation » — grand encadré
   ordinateur : onglets horizontaux · mobile : accordéon vertical
   ============================================================ */
.det-box{background:#fff;border:1px solid var(--line,#e4e7dd);border-radius:20px;
  box-shadow:0 10px 34px rgba(31,42,23,.07);padding:clamp(1.2rem,2.4vw,2rem)}
.det-box .det-title{margin:0 0 1.2rem}

/* barre d'onglets (ordinateur) */
.det-tabs{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--line,#e4e7dd);
  margin-bottom:1.4rem;padding-bottom:.7rem}
.det-tab{display:inline-flex;align-items:center;gap:.45rem;appearance:none;cursor:pointer;
  background:var(--cream,#f7f6ef);border:1px solid transparent;border-radius:999px;
  padding:.48rem .85rem;font:inherit;font-family:"Poppins","Inter",sans-serif;
  font-size:.84rem;font-weight:600;color:var(--muted,#5c6653);transition:background .16s,color .16s,border-color .16s}
.det-tab .det-ico{width:17px;height:17px;flex:0 0 auto}
.det-tab:hover{background:var(--green-soft,#eef3e3);color:var(--green-700,#3d6218)}
.det-tab.is-on{background:var(--green-cta,#b1d353);border-color:var(--green-500,#9dc23f);color:var(--ink,#26301c)}
.det-tab.is-on .det-ico{color:#fff}
.det-tab:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:2px}

.det-h3{font-size:1.12rem;margin:0 0 .7rem;color:var(--ink,#26301c)}

@media (min-width:901px){
  /* seul le panneau actif est monté ; les résumés servent uniquement au mobile */
  .det-row{border:0}
  .det-row > summary{display:none}
  .det-row:not([open]){display:none}
  .det-acc{border-top:0}
  .det-body{padding:0;max-width:70ch;animation:detIn .22s ease}
}
@keyframes detIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .det-tabs{display:none}                 /* mobile : retour à l'accordéon */
  .det-h3{display:none}                   /* le titre est déjà dans le <summary> */
  .det-box{padding:1rem 1.1rem;border-radius:16px}
  .det-acc{border-top:1px solid var(--line,#e4e7dd)}
}
@media (prefers-reduced-motion:reduce){.det-body{animation:none}}
/* Garantie d'affichage : si plusieurs rubriques restent ouvertes (retour depuis le mobile,
   ou JavaScript indisponible), une seule s'affiche sur ordinateur. */
@media (min-width:901px){
  .det-row[open] ~ .det-row[open]{display:none}
}

/* sommaire de la page formation : un seul encadré, ancres cliquables */
.toc{background:#fff;border:1px solid var(--line,#e4e7dd);border-radius:16px;
  box-shadow:0 6px 20px rgba(31,42,23,.05);padding:.7rem .9rem;margin:0 0 1.8rem;
  display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center;position:static}
.toc a{border-radius:999px;padding:.45rem .9rem;font-size:.86rem;font-weight:600;
  color:var(--muted,#5c6653);text-decoration:none;transition:background .16s,color .16s;border:0}
.toc a:hover{background:var(--green-soft,#eef3e3);color:var(--green-700,#3d6218)}
.toc a.active{background:var(--green-cta,#b1d353);color:var(--ink,#26301c)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* décalage d'ancre pour ne pas passer sous l'en-tête fixe */
#details,#formatrice,#tarifs,#financement-steps,#faq,#apercu{scroll-margin-top:90px}
@media (max-width:560px){.toc{gap:.2rem;padding:.55rem}.toc a{padding:.4rem .65rem;font-size:.78rem}}

/* ============================================================
   GRAND ENCADRÉ à onglets de la page formation
   (Aperçu · Détails · Formatrice · Tarifs · Financement · FAQ)
   ============================================================ */
.pagebox{background:#fff;border:1px solid var(--line,#e4e7dd);border-radius:22px;
  box-shadow:0 14px 40px rgba(31,42,23,.08);overflow:hidden}
.pbx-tabs{display:flex;gap:.2rem;flex-wrap:wrap;padding:.7rem .9rem 0;
  background:linear-gradient(180deg,#fbfcf7,#fff);border-bottom:1px solid var(--line,#e4e7dd)}
.pbx-tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;
  padding:.75rem 1rem;cursor:pointer;font:inherit;font-family:"Poppins","Inter",sans-serif;
  font-size:.92rem;font-weight:600;color:var(--muted,#6b7563);white-space:nowrap;
  transition:color .16s,border-color .16s}
.pbx-tab:hover{color:var(--green-700,#3d6218)}
.pbx-tab.is-on{color:var(--green-700,#3d6218);border-bottom-color:var(--green,#a4c95a)}
.pbx-tab:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:-2px;border-radius:8px}
.pbx-pane{padding:clamp(1.2rem,2.6vw,2.2rem)}
.pbx-pane[hidden]{display:none}

/* neutralise les marges/fonds des sections déplacées dans l'encadré */
.pbx-pane > .section,.pbx-pane .section{padding:0;background:none}
.pbx-pane .section + .section{margin-top:2rem}
.pbx-pane .container{max-width:100%!important;padding:0}
.pbx-pane .det-box{border:0;box-shadow:none;padding:0;border-radius:0}
.pbx-pane .det-box .det-title{display:none}      /* le nom de l'onglet suffit */
.pbx-pane .section-head{margin-left:0;margin-right:0}
.pbx-pane .fh-brief .fhb-meta{display:none}      /* durée/formats restent sous l'image */
.pbx-pane .fh-brief{margin-top:0}
.pbx-pane .fhb-obj{margin-top:0}

@media (max-width:760px){
  .pbx-tabs{gap:0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:.5rem .6rem 0}
  .pbx-tabs::-webkit-scrollbar{display:none}
  .pbx-tab{padding:.65rem .75rem;font-size:.84rem}
  .pagebox{border-radius:16px}
}

/* accueil — fondu sur les 4 côtés de la photo (et plus seulement à gauche) */
@media (min-width:901px){
  .hero-v2 .hero-shot img{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%),
                       linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right,transparent 0,#000 12%),
                       linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
            mask-composite:intersect;
  }
  /* encadré vert resserré au plus près du texte */
  .hero-feats{right:5%;top:auto;bottom:8%;width:auto;max-width:27.5%;
    padding:clamp(.55rem,1.9cqw,.95rem) clamp(.5rem,1.7cqw,.85rem);
    gap:clamp(.45rem,1.7cqw,.85rem);border-radius:14px}
}
/* logo Qualiopi officiel (fourni par le client) */
.hp-item picture{display:block}
.hp-qualiopi{height:44px;width:auto;display:block}
/* sécurité d'affichage : dès qu'une source vidéo est chargée, le bandeau
   « en préparation » ne doit plus recouvrir le lecteur */
.replay-stage.unlocked .replay-frame video{position:relative;z-index:2}
.replay-missing{z-index:1}
.replay-missing[hidden]{display:none}

/* photo d'origine sans encart incrusté : l'encadré vert épouse son texte */
@media (min-width:901px){
  .hero-feats{height:auto}
  .hero-feats li{font-size:clamp(11.5px,2.3cqw,14.5px)}
}

/* encadré Tarifs & formats autonome, sous le grand encadré.
   .tarif-inner annule sa propre marge : la respiration vient donc d'ici,
   sinon les cartes internes se collent au bord de l'encadré. */
.tarifbox{margin-top:0;padding:clamp(1.2rem,2.6vw,2.2rem)}
.pbx-solo-title{font-size:clamp(1.3rem,2.4vw,1.75rem);margin:0 0 1.4rem}
.tarif-inner{padding:0!important}
.tarif-inner .section-head{margin-bottom:1.6rem!important}

/* ---- encadré « Financer sa formation en tant que… » ---- */
.finbox{background:#fff;border:1px solid var(--line,#e4e7dd);border-radius:20px;
  box-shadow:0 10px 34px rgba(31,42,23,.07);padding:clamp(1.1rem,2.2vw,1.9rem)}
.fin-tabs{display:flex;gap:.5rem;flex-wrap:wrap;border-bottom:1px solid var(--line,#e4e7dd);
  padding-bottom:.9rem;margin-bottom:1.5rem}
.fin-tab{display:flex;align-items:center;gap:.6rem;flex:1 1 200px;cursor:pointer;appearance:none;
  background:var(--cream,#f7f6ef);border:1.5px solid transparent;border-radius:14px;padding:.75rem .9rem;
  font:inherit;text-align:left;transition:background .16s,border-color .16s,color .16s}
.fin-tab .ft-ico{font-size:1.35rem;line-height:1}
.fin-tab .ft-lab{display:flex;flex-direction:column;font-family:"Poppins","Inter",sans-serif;
  font-size:.92rem;font-weight:600;color:var(--ink,#26301c);line-height:1.25}
.fin-tab .ft-lab small{font-weight:500;font-size:.78rem;color:var(--muted,#6b7563)}
.fin-tab:hover{background:var(--green-soft,#eef3e3)}
.fin-tab.is-on{background:var(--green-soft,#eef3e3);border-color:var(--green,#a4c95a)}
.fin-tab.is-on .ft-lab{color:var(--green-700,#3d6218)}
.fin-tab:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:2px}
.fin-pane[hidden]{display:none}
.fp-title{font-size:1.3rem;margin:0 0 .8rem}
/* « Pour qui ? » + points clés, en tête de chaque onglet */
.fp-pourqui{background:var(--green-soft,#eef3e3);border-left:3px solid var(--green,#a4c95a);
  border-radius:0 10px 10px 0;padding:.75rem 1rem;margin:1.1rem 0 .9rem!important;
  color:var(--ink,#26301c)!important;font-size:.94rem;max-width:72ch}
.fp-points{list-style:none;padding:0;margin:0 0 .4rem;display:flex;flex-direction:column;gap:.5rem;max-width:72ch}
.fp-points li{position:relative;padding-left:1.6rem;color:var(--muted,#5c6653);font-size:.94rem;line-height:1.6}
.fp-points li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green-700,#3d6218);font-weight:700}
.fp-points b{color:var(--ink,#26301c)}
/* avertissement CPF : commun aux trois statuts, donc sorti des onglets */
.cpf-note{display:flex;gap:1rem;align-items:flex-start;margin:1.6rem auto 0;max-width:960px;
  background:#fdf1f0;border:1px solid #f0cfcb;border-radius:16px;padding:1.15rem 1.3rem}
.cpf-note .cpf-ico{font-size:1.4rem;line-height:1.2;flex:0 0 auto}
.cpf-note b{display:block;font-family:"Poppins","Inter",sans-serif;font-size:1.02rem;color:#8c3a32;margin-bottom:.3rem}
.cpf-note p{margin:0;color:var(--muted,#5c6653);font-size:.93rem;line-height:1.6}
.cpf-note p b{display:inline;font-size:inherit;color:var(--ink,#26301c);margin:0}
.fin-pane p{color:var(--muted,#5c6653);line-height:1.65;margin:0 0 .8rem;max-width:72ch}
.fp-note{background:#fff8ec;border:1px solid #e8d5a8;border-radius:14px;padding:1rem 1.2rem;margin:1.1rem 0}
.fp-note.fp-warn{background:#f7f3fb;border-color:#ddd0e8}
.fp-note b{display:block;margin-bottom:.4rem;color:var(--ink,#26301c)}
.fp-note p{margin:0 0 .5rem}
.fp-elig{margin:.5rem 0 0;padding-left:1.1rem;color:var(--muted,#5c6653);font-size:.93rem;line-height:1.8}
.fp-elig a{color:var(--green-700,#3d6218)}
.fp-step-head{font-family:"Poppins","Inter",sans-serif;font-weight:700;color:var(--ink,#26301c)!important;
  margin:1.6rem 0 .8rem!important;font-size:1rem}
/* chaque phase du parcours dans son propre encadré : avant / après se distinguent d'un coup d'œil */
.fp-phase{border:1px solid;border-radius:14px;padding:.4rem 1.2rem 1.2rem;margin:1.4rem 0}
.fp-phase--avant{background:var(--cream,#f7f6ef);border-color:#e4e0cf}
.fp-phase--apres{background:#eef6e6;border-color:#cfe3b8}
.fp-phase .fp-step-head{margin-top:1.1rem!important}
@media (max-width:640px){.fp-phase{padding:.3rem .9rem 1rem}}
.fp-steps{list-style:none;counter-reset:fp;padding:0;margin:0;display:flex;flex-direction:column;gap:.9rem}
/* > li : la pastille numérotée ne doit toucher QUE les étapes de 1er niveau,
   jamais les sous-listes .fp-docs (sinon la numérotation continue dedans) */
.fp-steps > li{counter-increment:fp;position:relative;padding-left:2.6rem}
.fp-steps > li::before{content:counter(fp);position:absolute;left:0;top:-.1rem;width:1.9rem;height:1.9rem;
  display:grid;place-items:center;border-radius:50%;background:var(--green-700,#3d6218);color:#fff;
  font-family:"Poppins","Inter",sans-serif;font-size:.85rem;font-weight:700}
.fp-steps > li > b{display:block;font-family:"Poppins","Inter",sans-serif;font-size:.98rem;color:var(--ink,#26301c)}
.fp-steps > li > span{display:block;margin-top:.2rem;color:var(--muted,#5c6653);font-size:.93rem;line-height:1.6}
/* sous-liste de pièces : simples tirets, un item = une seule ligne */
.fp-docs{margin:.45rem 0 0;padding:0;list-style:none;color:var(--muted,#5c6653);font-size:.9rem;line-height:1.7}
.fp-docs li{position:static;counter-increment:none;padding-left:1.1rem;text-indent:-1.1rem}
.fp-docs li::before{content:"— ";position:static;width:auto;height:auto;display:inline;background:none;
  color:inherit;font:inherit;border-radius:0}
.fp-docs b{display:inline;font-weight:700;color:var(--ink,#26301c)}
.fp-cta{margin-top:1.6rem}
@media (max-width:640px){.fin-tab{flex:1 1 100%}.fp-steps > li{padding-left:2.2rem}}

/* ---- onglet Formatrice : contenu direct, sans encadré imbriqué ---- */
.fmt-wrap{display:flex;gap:1.6rem;align-items:flex-start;flex-wrap:wrap}
.fmt-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:4px solid var(--green-soft,#eef3e3)}
.fmt-body{flex:1 1 320px;min-width:0}
.fmt-name{font-size:1.4rem;margin:0}
.fmt-role{color:var(--green-700,#3d6218);font-weight:600;margin:.2rem 0 .9rem}
.fmt-bio{white-space:pre-line;color:var(--muted,#5c6653);line-height:1.7;margin:0;max-width:70ch}
.fmt-sub{font-family:"Poppins","Inter",sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green-700,#3d6218);margin:1.5rem 0 .5rem}
.fmt-dip{list-style:none;padding:0;margin:0;color:var(--muted,#5c6653);line-height:1.75}
.fmt-dip li{position:relative;padding-left:1.1rem}
.fmt-dip li::before{content:"—";position:absolute;left:0;color:var(--green,#a4c95a)}
.fmt-links{display:flex;gap:.5rem;flex-wrap:wrap}
.fmt-btn{display:inline-flex;align-items:center;gap:.45rem;background:#fff;
  border:1px solid var(--line,#e4e7dd);border-radius:999px;padding:.45rem .9rem;
  font-size:.86rem;font-weight:600;color:var(--ink,#26301c);text-decoration:none;transition:background .16s,border-color .16s}
.fmt-btn:hover{background:var(--green-soft,#eef3e3);border-color:var(--green,#a4c95a);color:var(--green-700,#3d6218)}
.fmt-btn svg{width:1rem;height:1rem;flex:0 0 auto;display:block}
.fmt-btn--linkedin svg{fill:#0a66c2}
.fmt-btn--instagram svg{fill:#d62976}
.fmt-btn--facebook svg{fill:#1877f2}
.fmt-btn--site svg{fill:var(--green-700,#3d6218)}
/* 2 formations par ligne : les titres longs tiennent sans passer à la ligne,
   les encadrés gardent donc tous la même hauteur. 1 seule colonne sur mobile. */
.fmt-forms{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.fmt-forms li{min-width:0}
@media (max-width:520px){.fmt-forms{grid-template-columns:1fr}}
.fmt-forms a{display:flex;flex-direction:column;background:var(--green-soft,#eef3e3);
  border:1px solid #cfe3b8;border-radius:12px;padding:.6rem .85rem;text-decoration:none;color:var(--ink,#26301c);
  font-size:.92rem;font-weight:600;transition:border-color .16s,transform .16s,background .16s}
.fmt-forms a:hover{background:#e4efd3;border-color:var(--green,#a4c95a);transform:translateY(-2px)}
.fmt-forms small{font-weight:500;color:var(--muted,#6b7563);font-size:.8rem;margin-top:.15rem}
@media (max-width:560px){.fmt-photo{width:88px;height:88px}.fmt-wrap{gap:1rem}}

/* ==========================================================================
   RESSOURCES PAYANTES — page de commande, confirmation, espace client
   ========================================================================== */

/* --- page de commande : deux colonnes, récapitulatif collant --- */
.achat-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2.2rem;align-items:start}
@media (max-width:900px){.achat-grid{grid-template-columns:1fr}}

.rc-famille{font-size:1.05rem;margin:2rem 0 .9rem;color:var(--brown,#5b4a36)}
.rc-famille:first-child{margin-top:0}

/* La carte EST le label : toute sa surface coche la case, y compris au clavier. */
.rc-carte{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start;
  background:#fff;border:2px solid var(--line,#e4e7dd);border-radius:16px;padding:1.1rem 1.2rem;margin-bottom:.9rem;
  cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s}
.rc-carte:hover{border-color:#bcd48c}
/* État coché : piloté par une classe .rc-on posée en JS, et non par
   :has(input:checked). Raison : :has() n'existe pas avant Safari 15.4 (mars 2022),
   et une page de paiement ne peut pas se permettre de perdre le retour visuel de la
   sélection sur un iPhone un peu ancien. La classe est aussi la même source de
   vérité que le récapitulatif et le total, calculés dans rendre(). */
.rc-carte.rc-on{border-color:#b1d353;background:#fbfdf6;box-shadow:0 6px 18px rgba(177,211,83,.22)}
/* le focus clavier se voit sur la case : seule cible stylable sans :has() */
.rc-carte input:focus-visible + .rc-check{outline:3px solid #3f6a17;outline-offset:3px}
.rc-carte input{position:absolute;opacity:0;width:1px;height:1px}

.rc-check{width:24px;height:24px;border:2px solid #c3cbb6;border-radius:7px;display:grid;place-items:center;
  margin-top:.15rem;transition:background .18s,border-color .18s}
.rc-check::after{content:"✓";color:#fff;font-size:.86rem;font-weight:700;opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.rc-carte.rc-on .rc-check{background:#b1d353;border-color:#a0c63f}
.rc-carte.rc-on .rc-check::after{opacity:1;transform:scale(1)}

.rc-corps{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.rc-titre{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.02rem}
.rc-resume{color:var(--muted,#6b7563);font-size:.92rem}
.rc-plus{display:flex;flex-direction:column;gap:.18rem;margin-top:.25rem;font-size:.85rem;color:var(--muted,#6b7563)}
.rc-tag{margin-top:.45rem;align-self:flex-start;background:#f4f8ec;border:1px solid #dbe8c8;border-radius:999px;
  padding:.22rem .7rem;font-size:.78rem;color:#3f6a17}
.rc-prix{font-family:"Poppins",sans-serif;font-weight:700;font-size:1.15rem;white-space:nowrap;text-align:right}
.rc-prix small{display:block;font-weight:600;font-size:.76rem;color:#3f6a17}

.rc-reco{border-color:#b1d353}
.rc-ruban{position:absolute;top:-11px;left:1.1rem;background:linear-gradient(180deg,#bcda66,#b1d353);color:#22300f;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;padding:.24rem .8rem;border-radius:999px;
  box-shadow:0 3px 8px rgba(120,160,50,.32)}

/* --- récapitulatif --- */
.achat-recap{position:sticky;top:100px}
.recap-lignes{margin:.6rem 0 0;min-height:2.6rem}
.recap-ligne{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--line,#e4e7dd);font-size:.92rem}
.recap-vide{color:var(--muted,#6b7563);font-size:.9rem;margin:.4rem 0}
.recap-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:.9rem;padding-top:.7rem;
  border-top:2px solid var(--line,#e4e7dd);font-family:"Poppins",sans-serif}
.recap-total b{font-size:1.45rem}
.recap-mail{display:block;margin:1.2rem 0 .9rem;font-size:.88rem;font-weight:600}
.recap-mail input{width:100%;margin-top:.35rem;padding:.7rem .85rem;border:1px solid var(--line,#d3d8c8);border-radius:10px;font:inherit}
.recap-mail small{display:block;margin-top:.3rem;font-weight:400;color:var(--muted,#6b7563);font-size:.8rem}
.recap-plus{list-style:none;padding:0;margin:1.1rem 0 0;display:flex;flex-direction:column;gap:.4rem;
  font-size:.84rem;color:var(--muted,#6b7563)}

/* --- page de confirmation --- */
.merci-head{text-align:center}
.merci-ico{font-size:3rem;display:block;line-height:1}
.mr-liste{list-style:none;padding:0;margin:.7rem 0 0}
.mr-liste li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed var(--line,#e4e7dd)}
.mr-champs{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:560px){.mr-champs{grid-template-columns:1fr}}
.mr-champs label{display:block;font-size:.88rem;font-weight:600}
.mr-champs input{width:100%;margin-top:.3rem;padding:.7rem .85rem;border:1px solid var(--line,#d3d8c8);border-radius:10px;font:inherit}

/* --- espace client : documents --- */
.res-docs{display:flex;flex-direction:column;gap:.8rem}
.res-doc{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  background:#fff;border:1px solid var(--line,#e4e7dd);border-radius:14px;padding:1rem 1.2rem}
.res-doc-attente{background:#fbfaf4;border-style:dashed}
.rd-ico{font-size:1.6rem;line-height:1}
.rd-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.rd-txt small{color:var(--muted,#6b7563);font-size:.84rem}
.rd-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.rd-actions .btn{padding:.5rem .9rem;font-size:.86rem}
@media (max-width:640px){
  .res-doc{grid-template-columns:auto 1fr}
  .rd-actions{grid-column:1/-1;margin-top:.3rem}
}

/* ---- calendrier : journées d'une formation sur plusieurs jours ---- */
/* Même retrait horizontal que .cal-banner et .cal-foot (1,35 rem) : sans lui,
   la ligne des journées s'aligne sur le bord de la carte et non sur le texte. */
.cal-jours{margin:0;padding:.6rem 1.35rem .1rem;font-size:.88rem;color:var(--ink,#26301c);line-height:1.45}
.cal-jours b{color:var(--green-700,#557a22)}
.cal-hor{color:var(--muted,#5d6753)}

/* ---- bandeau d'avis défilant (accueil) ---- */
.marquee-avis{margin-top:2.4rem;background:var(--green-soft,#eef7db);border-color:var(--green,#b1d353)}
.marquee-avis .marquee-track{gap:0}
/* Sélecteurs préfixés par .marquee-avis : la règle existante « .marquee span »
   a une spécificité supérieure à une simple classe et écraserait couleur et taille. */
.marquee-avis .mq-item{display:inline-flex;align-items:baseline;gap:.5rem;padding:0 1.6rem;
  border-right:1px solid #c9dca0;font-size:.93rem;color:var(--ink,#26301c)}
.marquee-avis .mq-stars{color:#e0a800;letter-spacing:.05em}
.marquee-avis .mq-item b{color:var(--green-700,#557a22)}
.marquee-avis .mq-form{color:var(--muted,#5d6753);font-size:.85rem}
@media (max-width:640px){ .marquee-avis .mq-item{font-size:.86rem;padding:0 1.1rem} }

/* ==========================================================================
   ESPACE CLIENT — écran d'accueil, sessions, achats, communauté
   ========================================================================== */

/* --- première visite : on explique, on n'invente pas de contenu --- */
.espace-vide{background:#fff;border:1px solid var(--line,#e7e3cf);border-radius:16px;padding:1.6rem 1.8rem;max-width:640px}
.ev-intro{margin:0 0 .6rem;font-weight:600}
.ev-liste{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.45rem;color:var(--muted,#6b7563)}
.ev-aide{margin:0 0 .9rem;font-size:.93rem}
.ev-form{display:flex;gap:.5rem;flex-wrap:wrap}
.ev-form input{flex:1 1 240px;min-width:0;padding:.7rem .9rem;border:1px solid var(--line,#d3d8c8);border-radius:10px;font:inherit}
.ev-pied{margin:1.2rem 0 0;font-size:.86rem;color:var(--muted,#6b7563)}
/* .warnbox était employée sept fois dans app.js sans aucune règle : tous les messages
   d'erreur de l'espace s'affichaient en texte nu, indistinguables du contenu normal. */
.warnbox{background:#fdf3e3;border:1px solid #f0d4a4;border-left:4px solid #d99a2b;
  border-radius:10px;padding:.85rem 1rem;font-size:.92rem;color:#5a4212}
.warnbox a{color:#8a5f10;text-decoration:underline}
/* connexion : deux chemins, « Déjà cliente » et « Première connexion » */
.ev-onglets{display:flex;gap:.4rem;margin:0 0 1.1rem;border-bottom:1px solid var(--line,#e7e3cf)}
.ev-onglet{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;
  padding:.55rem .9rem;font:inherit;font-weight:600;font-size:.93rem;color:var(--muted,#6b7563);
  cursor:pointer;border-radius:8px 8px 0 0}
.ev-onglet:hover{color:var(--green-700,#557a22);background:var(--green-soft,#eef7db)}
.ev-onglet.active{color:var(--ink,#273020);border-bottom-color:var(--green,#b1d353)}
.ev-onglet:focus-visible{outline:3px solid var(--green-700,#557a22);outline-offset:2px}
/* `display:flex` bat l'attribut hidden de la feuille du navigateur : sans cette règle,
   les deux formulaires de connexion s'affichaient l'un sous l'autre. */
.ev-form[hidden]{display:none}

/* ---- module d'achat de la fiche formation ----
   L'encadré latéral porte désormais toute la commande : format, date, options,
   total, paiement. La grande section « Choisissez votre format » a disparu, elle
   répétait les mêmes prix et les mêmes options quelques centaines de pixels plus bas. */
/* Formats et packs partagent volontairement le même gabarit de ligne : le visiteur
   coche de la même façon un format, une option papier ou une formation de pack. */
/* Les deux formats côte à côte : la comparaison se fait d'un coup d'œil plutôt qu'en
   faisant défiler. Sous 420 px de colonne, ils repassent l'un sous l'autre. */
.buy-cmd .fmt-cartes{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:.4rem 0 1rem;align-items:start}
.buy-cmd .fmt-cartes:has(.fmt-bloc:only-child){grid-template-columns:1fr}
@media (max-width:1100px){.buy-cmd .fmt-cartes{grid-template-columns:1fr}}
/* en colonne, la vignette passe au-dessus du texte : 190 px ne suffisent pas de front */
.buy-cmd .fmt-ligne{flex-wrap:wrap}
.buy-cmd .fmt-cartes .fmt-ligne{flex-direction:column;align-items:flex-start;gap:.4rem;position:relative}
.buy-cmd .fmt-cartes .fmt-ligne input{position:absolute;top:.6rem;right:.6rem;margin:0}
.buy-cmd .fmt-cartes .fmt-vignette{width:100%}
.buy-cmd .fmt-cartes .fmt-txt{width:100%;padding-right:1.4rem}
/* le bloc « options + pack » occupe toute la largeur, sous les deux colonnes */
.buy-cmd .buy-plus{margin-top:.4rem}
/* Le pack est replié derrière une case : il n'intéresse qu'une minorité de visiteurs
   et occupait à lui seul la moitié du module. */
/* Encadré vert : la remise pack est l'argument commercial le plus fort de la page,
   il ne doit pas se lire comme une simple ligne d'option. */
.buy-cmd .buy-pack{margin-top:.9rem;border:2px solid var(--green,#b1d353);border-radius:12px;
  background:var(--green-soft,#eef7db);padding:.75rem .85rem}
.buy-cmd .buy-pack>summary{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
  font-size:.9rem;font-weight:600;list-style:none;color:var(--ink,#273020)}
.buy-cmd .buy-pack .bp-txt{flex:1 1 auto;min-width:0;line-height:1.35}
/* barème visible même replié : c'est l'argument, pas un détail du contenu */
.buy-cmd .buy-pack .bp-bareme{display:block;margin-top:.3rem;font-weight:500;font-size:.78rem;
  color:var(--muted,#5d6753);line-height:1.5}
.buy-cmd .buy-pack .bp-bareme b{color:var(--green-700,#557a22);font-weight:700}
/* l'exemplaire d'origine, à l'intérieur du composeur, ferait doublon une fois déplié */
.buy-cmd .buy-pack .pb-bareme{display:none}
.buy-cmd .buy-pack>summary::-webkit-details-marker{display:none}
.buy-cmd .buy-pack[open]>summary{margin-bottom:.2rem;padding-bottom:.55rem;
  border-bottom:1px solid rgba(85,122,34,.18)}
.buy-cmd .buy-pack .bp-case{width:18px;height:18px;flex:0 0 auto;border:2px solid var(--green-600,#6f9a30);
  border-radius:4px;background:#fff;position:relative;margin-top:.15rem}
.buy-cmd .buy-pack[open] .bp-case{background:var(--green-500,#9dc23f);border-color:var(--green-500,#9dc23f)}
.buy-cmd .buy-pack[open] .bp-case::after{content:"✓";position:absolute;inset:0;color:#fff;
  font-size:.72rem;line-height:14px;text-align:center;font-weight:700}
.buy-cmd .buy-pack>summary:focus-visible{outline:3px solid var(--green-700,#557a22);outline-offset:2px;border-radius:6px}
/* dans le module, le pack n'a plus ni titre ni bouton propres : le total et le
   bouton « Payer » du bas font foi, un second bouton ouvrait un paiement parallèle. */
.buy-cmd .buy-pack .packbuilder{margin:.7rem 0 0;padding:0;border:0;background:none;box-shadow:none}
.buy-cmd .buy-pack .pb-head h3,.buy-cmd .buy-pack .pb-acheter,.buy-cmd .buy-pack .pb-note{display:none}
.buy-cmd .buy-pack .pb-bareme{margin:0 0 .5rem;font-size:.78rem}
.buy-cmd .buy-pack .pb-liste{max-height:190px}
.buy-cmd .buy-pack .pb-calc{font-size:.82rem}
/* options papier propres à chaque formation du pack : décalées sous son intitulé,
   elles n'apparaissent qu'une fois la formation retenue. */
/* Le module de commande vaut une fois et demie sa largeur d'origine : les deux formats
   tiennent alors côte à côte sans écraser leur libellé, et les lignes de pack respirent. */
/* ⚠️ à borner au bureau : le sélecteur :has() est plus spécifique que la règle
   mobile de styles.css qui repasse la grille sur une colonne, il l'écrasait et la
   page débordait de 159 px sur téléphone. */
/* Module d'achat : trois quarts de la largeur du contenu. Il est passé de 1,29×
   à 1× puis à 0,75× — les deux cartes de format y tiennent toujours, et la place
   rendue profite à la présentation de la formation et à sa photo. */
@media (min-width:981px){.form-hero-grid:has(.buy-cmd){grid-template-columns:1fr .75fr}}
.buy-cmd .pb-opts{display:flex;flex-direction:column;gap:.15rem;padding:.15rem 0 .45rem 2.1rem}
/* La formation de la page n'a pas de cases ici : ses options papier se règlent au-dessus. */
.buy-cmd .pb-opts-note{margin:0;padding:.05rem 0 .45rem 2.1rem;font-size:.78rem;color:var(--muted,#5d6753);font-style:italic}
.buy-cmd .pb-opts[hidden]{display:none}
.buy-cmd .pb-opts label{display:flex;align-items:center;gap:.45rem;font-size:.78rem;
  color:var(--muted,#5d6753);cursor:pointer}
.buy-cmd .pb-opts input{width:15px;height:15px;flex:0 0 auto;margin:0;accent-color:var(--green-500,#9dc23f)}
.buy-cmd .pb-opts b{color:var(--ink,#273020);font-family:"Poppins",sans-serif;font-size:.76rem}
/* .pb-opt est en display:flex depuis l'ancien gabarit (enhance.css:2274) : le nom de la
   formation et ses options papier se retrouvaient côte à côte, chacun écrasé sur trois
   lignes. Ici on empile — nom + prix, puis une option par ligne. */
/* Le bouton « Voir le programme » vit désormais sous la ligne Durée / Formats :
   il se consulte avant de choisir. Sa largeur est celle de son texte, pas 100 %
   comme dans l'ancien encadré de commande. */
/* display:block indispensable : les <p> de .fh-brief sont en flex, et un bouton
   posé dedans se faisait étirer sur toute la largeur de la colonne. */
/* Le parcours et la remise fidélité sont deux offres de même nature : elles se
   lisent côte à côte, alignées en haut, plutôt qu'empilées sur deux écrans. */
.offres-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
/* Toutes les formations n'appartiennent pas à un parcours : quand l'encart parcours
   n'existe pas, la remise fidélité prend toute la largeur au lieu de laisser
   la moitié droite vide. */
.offres-duo:has(>*:only-child){grid-template-columns:1fr}
.offres-duo>*{margin:0!important;height:100%}
.offres-duo .pack-solo,.offres-duo .upsell,.offres-duo .duo-offer{max-width:none;width:100%}
/* Dans la grille, le bandeau webinaire s'empile verticalement pour occuper la même
   hauteur que la carte parcours ; seul, il retrouve sa disposition en bandeau. */
.offres-duo .cta-webi{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:1.2rem;margin:0;height:100%}
.offres-duo:has(>*:only-child) .cta-webi{flex-direction:row;align-items:center;justify-content:space-between}
/* La flèche du bouton passait à la ligne toute seule. */
.cta-webi .btn{white-space:nowrap}
/* En bandeau pleine largeur, l'accroche tient sur une seule ligne : elle réclame 811 px
   pour 768 disponibles à 1 rem, d'où .9 rem qui la ramène à 730. En deux colonnes elle
   se replie normalement — 420 px ne suffiraient de toute façon pas. */
.offres-duo:has(>*:only-child) .cta-webi p{font-size:.9rem;margin-bottom:0}
@media (max-width:900px){.offres-duo{grid-template-columns:1fr}}
/* Indicateurs de résultats Qualiopi : présentation factuelle, pas publicitaire.
   Un auditeur doit les trouver en bas de fiche ; une visiteuse ne doit pas les
   confondre avec un argument de vente. */
.indic-box{border:1px solid var(--line,#e7e3cf);border-radius:14px;padding:1.35rem 1.6rem 1.5rem;background:#fff}
/* Le filet sous le titre traverse tout l'encadré : c'est lui qui donne au bloc sa
   largeur, avant même qu'on lise le chiffre. */
.indic-titre{font-family:"Poppins",sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted,#5d6753);margin:0 0 1.1rem;padding-bottom:.75rem;
  border-bottom:1px solid var(--line,#e7e3cf)}
/* Deux colonnes qui se partagent la largeur : le relevé à gauche, son explication à
   droite. Aucune des deux ne s'étire au-delà du lisible, et il ne reste plus de vide. */
.indic-corps{display:grid;grid-template-columns:minmax(15rem,19rem) minmax(0,1fr);
  gap:1.4rem 2.2rem;align-items:center}
.indic-grid{display:grid;gap:.85rem}
.indic-item{padding:.9rem 1.1rem;border-radius:12px;background:var(--cream,#faf7e6);
  border-left:3px solid var(--green-500,#9dc23f)}
.indic-item b{display:block;font-family:"Poppins",sans-serif;font-size:2.1rem;line-height:1;
  color:var(--green-700,#557a22);font-variant-numeric:tabular-nums}
.indic-lib{display:block;margin-top:.4rem;font-size:.95rem;font-weight:600;color:var(--ink,#273020);line-height:1.35}
.indic-item small{display:block;margin-top:.2rem;color:var(--muted,#5d6753);font-size:.8rem;line-height:1.45}
.indic-note{margin:0;font-size:.86rem;color:var(--muted,#5d6753);line-height:1.6}
/* Au-delà de deux indicateurs, la colonne de gauche s'allonge : l'alignement centré
   décrocherait la note. On la cale en haut. */
.indic-corps:has(.indic-grid > :nth-child(3)){align-items:start}
@media (max-width:820px){.indic-corps{grid-template-columns:1fr;align-items:start;gap:1.1rem}}
.fhb-pdf{margin:1.1rem 0 0;display:block}
.fhb-pdf .btn{width:auto!important;margin-top:0!important;display:inline-flex}
.buy-cmd .pb-opt{display:block}
.buy-cmd .pb-tete{display:flex;align-items:center;gap:.6rem;cursor:pointer;min-width:0}
/* la liste défile verticalement : sans min-width:0 les lignes s'élargissent au-delà
   de leur piste et il faut défiler latéralement pour lire les prix. */
.buy-cmd .buy-pack .pb-liste{overflow-x:hidden}
.buy-cmd .pb-opt,.buy-cmd .pb-opt .pb-nom{min-width:0}
.buy-cmd .pb-opt .pb-nom{overflow-wrap:anywhere}
.buy-cmd .fmt-bloc{border:2px solid var(--line,#e7e3cf);border-radius:12px;transition:border-color .18s,background .18s}
.buy-cmd .fmt-bloc:hover{border-color:var(--green,#b1d353)}
.buy-cmd .fmt-bloc.is-choisi{border-color:var(--green-500,#9dc23f);background:var(--green-soft,#eef7db)}
.buy-cmd .fmt-bloc:focus-within{outline:3px solid var(--green-700,#557a22);outline-offset:2px}
.buy-cmd .fmt-ligne{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;cursor:pointer}
.buy-cmd .fmt-ligne input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--green-500,#9dc23f)}
/* vignette conservée — elle distingue les deux formats d'un coup d'œil — mais réduite */
.buy-cmd .fmt-vignette{width:64px;height:auto;flex:0 0 auto;border-radius:6px}
.buy-cmd .fmt-txt{flex:1 1 auto;min-width:0;line-height:1.3}
.buy-cmd .fmt-nom{display:block;font-family:"Poppins",sans-serif;font-weight:600;font-size:.95rem}
.buy-cmd .fmt-txt small{color:var(--muted,#5d6753);font-size:.78rem}
.buy-cmd .fmt-prix{font-family:"Poppins",sans-serif;font-weight:700;font-size:1.05rem;white-space:nowrap}
.buy-cmd .fmt-detail{border-top:1px dashed var(--line,#e7e3cf);margin:0 .75rem}
.buy-cmd .fmt-detail summary{padding:.45rem 0;font-size:.8rem;color:var(--green-700,#557a22);cursor:pointer}
.buy-cmd .fmt-liste{list-style:none;margin:0 0 .6rem;padding:0;font-size:.82rem;color:var(--muted,#5d6753)}
/* styles.css:388 met .tariff-card li en display:flex : le <b> de « Accès illimité »
   devenait une colonne à part et le reste de la phrase se pliait à côté. Ces puces
   sont du texte courant, la coche est posée en ::before absolu. */
.buy-cmd .fmt-liste li{display:block;padding-left:1.1rem;position:relative;margin-bottom:.2rem;line-height:1.45}
.buy-cmd .fmt-liste li::before{content:"✓";position:absolute;left:0;color:var(--green-700,#557a22);font-weight:700}
/* pack intégré au module : une seule colonne, hauteur bornée, le reste défile */
.buy-cmd .packbuilder{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line,#e7e3cf)}
.buy-cmd .packbuilder .pb-head h3{font-size:.98rem}
.buy-cmd .packbuilder .pb-bareme{font-size:.78rem}
.buy-cmd .packbuilder .pb-liste{grid-template-columns:1fr;display:grid;max-height:230px;overflow-y:auto}
.buy-cmd .packbuilder .pb-pied{flex-direction:column;align-items:stretch;gap:.6rem}
.buy-cmd .packbuilder .pb-acheter{width:100%;justify-content:center}
.buy-cmd .fmt-dates[hidden]{display:none}
.buy-cmd .fmt-datelab{display:block;font-size:.85rem;font-weight:600;margin-bottom:.9rem}
.buy-cmd .cvd-select{display:block;width:100%;margin-top:.35rem;padding:.6rem .7rem;font:inherit;font-size:.9rem;
  border:1px solid var(--line,#d3d8c8);border-radius:10px;background:#fff}
.buy-cmd .fmt-horaires{margin:-.55rem 0 .9rem;font-size:.82rem;color:var(--muted,#5d6753)}
.buy-cmd .fmt-nodate{font-size:.86rem;color:var(--muted,#5d6753);margin:0 0 .9rem}
.buy-cmd .opt-ligne{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;font-size:.88rem;cursor:pointer}
.buy-cmd .opt-ligne .ol-txt{flex:1 1 auto}
.buy-cmd .opt-ligne .ol-prix{white-space:nowrap;font-family:"Poppins",sans-serif}
/* .opt-check est masqué en absolute/opacity:0 par l'ancien gabarit (enhance.css:1400),
   qui dessinait sa propre puce .opt-box. Le nouveau balisage n'a pas cette puce : sans
   cette remise à zéro, les deux cases étaient purement invisibles. */
.buy-cmd .opt-ligne .opt-check{position:static;opacity:1;width:18px;height:18px;
  flex:0 0 auto;margin:0;accent-color:var(--green-500,#9dc23f);cursor:pointer}
.buy-cmd .opt-ligne .opt-check:focus-visible{outline:3px solid var(--green-700,#557a22);outline-offset:2px}
.buy-cmd .achat-recap{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line,#e7e3cf);
  background:none;border-radius:0;box-shadow:none;position:static}
.buy-cmd .recap-mail{display:block;font-size:.85rem;font-weight:600;margin:.8rem 0}
.buy-cmd .recap-mail input{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;font:inherit;font-size:.9rem;
  border:1px solid var(--line,#d3d8c8);border-radius:10px}
/* Sous 980 px .buybox repasse en position:static : le badge FIFPL, en absolute avec
   right:-4px, s'ancrait alors au viewport et débordait la page de 4 px. On ne peut pas
   poser position:relative sans condition — cela casserait le collant du bureau. */
@media (max-width:980px){.buy-cmd{position:relative}}
.ev-form-col{flex-direction:column;align-items:stretch;gap:.6rem}
.ev-form-col input{flex:0 0 auto}
.ev-form-col .btn{justify-content:center}
.ev-oubli{margin:.2rem 0 0;font-size:.86rem}
/* bouton présenté comme un lien : même apparence, mais reste un vrai <button> au clavier */
.lien-nu{background:none;border:0;padding:0;font:inherit;font-size:inherit;color:var(--green-700,#557a22);
  text-decoration:underline;cursor:pointer}
.lien-nu:hover{color:var(--green-600,#6f9a30)}
.lien-nu:focus-visible{outline:3px solid var(--green-700,#557a22);outline-offset:2px;border-radius:4px}
/* Écran de connexion : titre et encadré centrés dans la page. La classe n'est posée que
   sur l'état déconnecté — une fois le dossier chargé, les blocs « Mes achats » et
   « Mes ressources » gardent leur alignement à gauche, qui se lit mieux en liste. */
.espace-deconnecte .phead{text-align:center}
/* #ownedMount est une grille à deux colonnes : sans grid-column, l'encadré occupait la
   première et laissait la seconde vide — d'où l'impression de bloc collé à gauche, et
   des marges automatiques sans effet puisqu'il remplissait déjà sa piste. */
.espace-deconnecte .espace-vide{grid-column:1/-1;justify-self:center;text-align:center}
.espace-deconnecte .ev-liste{align-items:center}
.espace-deconnecte .ev-onglets{justify-content:center}
.espace-deconnecte .ev-form-col{max-width:340px;margin-left:auto;margin-right:auto}

/* --- prochaine session --- */
.ps-panel{background:linear-gradient(160deg,#f6faf0,#fffdf4);border:1px solid #dbe8c8}
.ps-titre{margin:.4rem 0 .5rem;font-size:1.25rem}
.ps-quand{font-size:1.02rem}
.ps-jours{display:flex;flex-direction:column;gap:.2rem;margin-top:.6rem;background:#fff;border:1px solid #dbe8c8;
  border-radius:10px;padding:.6rem .8rem;font-size:.88rem;color:var(--muted,#5c6653);max-width:22rem}
.ps-compte{margin-top:.7rem;font-weight:700;color:#3f6a17}
.ps-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem}
.ps-note{font-size:.88rem;color:var(--muted,#6b7563)}

/* --- carte formation possédée --- */
.ow-session{margin-top:.5rem;font-size:.9rem;color:#3f6a17;font-weight:600}
.ow-attente{margin-top:.55rem;background:#fdf7ec;border:1px solid #f0ddb8;border-radius:9px;
  padding:.5rem .7rem;font-size:.86rem;line-height:1.5;color:#6b5628}
.ow-attente.ow-colis{background:#f2f6fb;border-color:#cddbeb;color:#33506e}
.ow-formatrice{display:flex;align-items:center;gap:.6rem;margin-top:.7rem;padding-top:.7rem;
  border-top:1px dashed var(--line,#e7e3cf)}
.ow-formatrice img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}
/* > span : le sélecteur large visait aussi le span des liens imbriqué, qui
   devenait une colonne flex — chaque lien se retrouvait sur sa propre ligne. */
.ow-formatrice > span{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.ow-formatrice b{font-size:.9rem}
.ow-formatrice small{font-size:.78rem;color:var(--muted,#6b7563)}
.ow-liens{font-size:.78rem;margin-top:.15rem}
.ow-liens a{color:#3f6a17}

/* --- achats et justificatifs --- */
.achats-liste{display:flex;flex-direction:column;gap:.7rem}
.achat{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line,#e7e3cf);border-radius:12px;padding:.9rem 1.1rem}
.ac-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 260px}
.ac-txt small{color:var(--muted,#6b7563);font-size:.84rem;margin-top:.1rem}
.ac-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.ac-actions .btn{padding:.45rem .85rem;font-size:.85rem}

/* --- deux panneaux côte à côte : fidélité et communauté --- */
.espace-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem}
.espace-duo:empty{display:none}
.fid-exp{font-size:.88rem;color:var(--muted,#5c6653);margin:0 0 1rem}
.bilan-panel{background:linear-gradient(160deg,#fdf7ec,#fffdf4);border:1px solid #f0ddb8}

/* --- bilan de formation --- */
.bl-notes{margin:1.6rem 0}
.bl-note-ligne{border:0;padding:0;margin:0 0 1.1rem}
.bl-note-ligne legend{font-weight:600;font-size:.94rem;padding:0;margin-bottom:.4rem}
.bl-echelle{display:flex;gap:.3rem;flex-wrap:wrap}
.bl-echelle label{position:relative;cursor:pointer}
.bl-echelle input{position:absolute;opacity:0;width:1px;height:1px}
.bl-echelle span{display:grid;place-items:center;width:2.1rem;height:2.1rem;border:1.5px solid var(--line,#d3d8c8);
  border-radius:8px;font-size:.86rem;font-weight:600;transition:background .15s,border-color .15s,color .15s}
.bl-echelle label:hover span{border-color:#bcd48c}
.bl-echelle input:checked + span{background:#b1d353;border-color:#a0c63f;color:#22300f}
.bl-echelle input:focus-visible + span{outline:3px solid #3f6a17;outline-offset:2px}
.bl-champ{display:block;margin:1.2rem 0;font-weight:600;font-size:.94rem}
.bl-champ textarea{width:100%;margin-top:.35rem;padding:.7rem .85rem;border:1px solid var(--line,#d3d8c8);
  border-radius:10px;font:inherit;font-weight:400;resize:vertical}
fieldset.bl-champ{border:0;padding:0}
fieldset.bl-champ legend{padding:0;font-weight:600}
.bl-oui-non{display:flex;gap:.6rem;margin-top:.4rem}
.bl-oui-non label{cursor:pointer}
.bl-oui-non input{position:absolute;opacity:0;width:1px;height:1px}
.bl-oui-non span{display:inline-block;padding:.45rem 1.3rem;border:1.5px solid var(--line,#d3d8c8);
  border-radius:999px;font-weight:600;font-size:.9rem}
.bl-oui-non input:checked + span{background:#b1d353;border-color:#a0c63f;color:#22300f}
.bl-oui-non input:focus-visible + span{outline:3px solid #3f6a17;outline-offset:2px}
.bl-publication{background:#f4f8ec;border:1px solid #dbe8c8;border-radius:12px;padding:1rem 1.2rem;margin-top:1.4rem}
.bl-case{display:flex;gap:.6rem;align-items:flex-start;font-size:.93rem;cursor:pointer}
.bl-prenom{display:block;margin-top:.8rem;font-size:.88rem;font-weight:600}
.bl-prenom input{width:100%;max-width:16rem;margin-top:.3rem;padding:.6rem .8rem;
  border:1px solid var(--line,#d3d8c8);border-radius:9px;font:inherit;font-weight:400}
.bl-note{margin:.7rem 0 0;font-size:.83rem;color:var(--muted,#6b7563)}

/* --- carte formation possédée : disposition revue ---
   La carte d'origine était une simple ligne « image · titre · bouton », pensée
   pour deux lignes de texte. Elle accueille désormais l'état, la session, les
   messages d'attente et la formatrice : en colonne étroite, le texte se
   retrouvait haché mot par mot. On passe donc en grille — image et texte sur
   la première rangée, bouton pleine largeur dessous — et on élargit les
   colonnes pour qu'une carte ait de quoi respirer. */
.owned-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.owned{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.85rem 1rem}
.owned>img,.owned>.ow-plus{grid-row:1;grid-column:1}
.ow-body{grid-row:1;grid-column:2}
.owned>.btn{grid-column:1/-1;width:100%;justify-content:center}
.owned-add{align-items:center}
.owned-add .ow-body{align-self:center}
.ow-session,.ow-attente{overflow-wrap:anywhere}
@media(max-width:680px){
  .owned{grid-template-columns:auto minmax(0,1fr)}
  .owned>.btn{width:100%}
}

/* Sur mobile, la vignette mangeait un quart de la largeur utile : on la réduit
   pour rendre la place au texte, qui porte l'information. */
@media(max-width:680px){
  .owned>img,.owned>.ow-plus{width:56px;height:56px}
  .ow-liens{flex-wrap:wrap;gap:.15rem}
}

/* ==========================================================================
   AVIS PAR FORMATION — carrousel à défilement manuel
   Reprend le principe du widget de nutry.online : tous les avis de la formation,
   parcourus à la main. Le défilement est natif (scroll-snap) : il marche au doigt,
   à la molette et au clavier même si le JavaScript ne se charge pas. Les flèches
   sont ajoutées par app.js et ne s'affichent que si la piste déborde vraiment.
   ========================================================================== */
.avis-carrousel{position:relative}
.avis-piste{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.4rem .2rem 1.4rem;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:#c8d4b4 transparent}
.avis-piste::-webkit-scrollbar{height:8px}
.avis-piste::-webkit-scrollbar-thumb{background:#c8d4b4;border-radius:99px}
.avis-piste::-webkit-scrollbar-track{background:transparent}
.avis-piste:focus-visible{outline:3px solid var(--green-700,#3f6a17);outline-offset:4px;border-radius:14px}

.avis-carte{flex:0 0 min(85vw,340px);scroll-snap-align:start;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line,#e7e3cf);border-radius:16px;padding:1.3rem 1.4rem;
  box-shadow:0 2px 10px rgba(38,48,28,.05)}
.avis-carte .stars{color:#e8a33d;letter-spacing:.08em;font-size:1rem;margin-bottom:.6rem}
.avis-carte .stars span{opacity:.32}
.avis-carte p{margin:0 0 1.1rem;font-size:.94rem;line-height:1.6;flex:1}
.avis-carte .who{display:flex;align-items:center;gap:.65rem;padding-top:.9rem;
  border-top:1px dashed var(--line,#e7e3cf)}
.avis-carte .av{width:38px;height:38px;border-radius:50%;background:var(--cream,#f4f8ec);
  color:var(--green-700,#3f6a17);display:grid;place-items:center;font-weight:700;font-size:.82rem;flex:0 0 auto}
.avis-carte .who b{display:block;font-size:.9rem}
.avis-carte .who small{color:var(--muted,#6b7563);font-size:.79rem}

.av-fleche{position:absolute;top:calc(50% - 1.4rem);transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line,#e7e3cf);background:#fff;
  color:var(--ink,#26301c);font-size:1.6rem;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(38,48,28,.14);display:grid;place-items:center;padding:0 0 .2rem}
.av-fleche:hover{background:var(--cream,#f4f8ec);border-color:#bcd48c}
.av-fleche:focus-visible{outline:3px solid var(--green-700,#3f6a17);outline-offset:2px}
.av-fleche[disabled]{opacity:.3;cursor:default;box-shadow:none}
.av-prec{left:-14px}
.av-suiv{right:-14px}
@media(max-width:900px){
  .av-fleche{display:none}          /* au doigt, les flèches n'apportent rien */
  .avis-piste{scroll-padding-left:.2rem}
}

/* --- bandeau webinaire : le sujet sur sa propre ligne, sans césure du mot --- */
.wb-sujet{display:inline-block;font-size:.92em;font-weight:600}


/* ================= Aperçu du livret =================
   Le mockup relié est une image (assets/livret/livret-mockup.jpg), composée
   depuis la vraie couverture du PDF, dans le même style que les supports de
   formation. Les pages intérieures sont les vraies pages du PDF. */
.lv-mockup{width:100%;height:auto;border-radius:10px;margin:-.4rem 0 1.1rem;
  background:#fff;cursor:zoom-in;transition:transform .3s ease}
.lv-mockup:hover{transform:translateY(-3px)}

.lv-wrap{display:block}
.lv-pages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.lv-pages figure{margin:0}
.lv-pages img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line,#e7e3cf);background:#fff;
  box-shadow:0 8px 22px -12px rgba(39,48,32,.35);transition:transform .3s ease,box-shadow .3s ease}
.lv-pages img:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(39,48,32,.45)}
.lv-pages figcaption{margin-top:.8rem;font-size:.85rem;color:var(--muted,#5d6753);line-height:1.45}
.lv-zoom{cursor:zoom-in}
.lv-note{max-width:70ch;margin:2.4rem auto 0;text-align:center;color:var(--muted,#5d6753);font-size:.94rem}

@media (max-width:1000px){ .lv-pages{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .lv-pages{grid-template-columns:1fr} }

/* visionneuse plein écran */
.lv-lightbox{position:fixed;inset:0;z-index:400;background:rgba(24,30,18,.86);display:flex;
  align-items:center;justify-content:center;padding:3vmin;opacity:0;transition:opacity .22s ease}
.lv-lightbox.on{opacity:1}
.lv-lightbox img{max-width:min(1200px,96vw);max-height:92vh;width:auto;height:auto;border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff}
.lv-close{position:absolute;top:max(1rem,3vmin);right:max(1rem,3vmin);width:44px;height:44px;border-radius:50%;
  border:0;cursor:pointer;background:#fff;color:var(--ink,#26301c);font-size:1.4rem;line-height:1;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.lv-close:focus-visible{outline:3px solid var(--green,#b1d353);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .lv-mockup,.lv-pages img,.lv-lightbox{transition:none}
}

/* Barre d'onglets de la fiche formation : 6 entrées, UNE SEULE LIGNE,
   et JAMAIS de défilement horizontal. Trois leviers, dans cet ordre :
   1. la police et l'espacement se resserrent avec la largeur (clamp + vw) ;
   2. sous 900 px, chaque onglet bascule sur son libellé court (deux libellés sont
      écrits dans le HTML, on masque celui qui ne sert pas) ;
   3. sous 560 px, les pictogrammes disparaissent, les libellés courts suffisent.
   overflow:hidden garantit qu'aucune barre de défilement n'apparaît si un écran
   très étroit forçait malgré tout le trait. */
.pbx-tabs{flex-wrap:nowrap;overflow:hidden;gap:.1rem;padding:.7rem .3rem 0}
.pbx-tab{flex:0 1 auto;min-width:0;
  padding:.7rem clamp(.42rem,.85vw,.9rem);font-size:clamp(.7rem,.86vw,.9rem)}
.pbx-ico{margin-right:.32rem;font-size:1.02em;line-height:1;vertical-align:-.12em}
.pbx-ico svg{width:1.05em;height:1.05em}
.pbx-c{display:none}
@media(max-width:1400px){.pbx-l{display:none}.pbx-c{display:inline}}
@media(max-width:560px){.pbx-ico{display:none}.pbx-tab{padding:.7rem .34rem;font-size:.78rem}}
@media(max-width:345px){.pbx-tab{font-size:.63rem;letter-spacing:-.025em;padding:.68rem .2rem}}
@media(max-width:400px){.pbx-tabs{padding-left:0;padding-right:0}
  .pbx-tab{padding:.68rem .17rem;font-size:.71rem;letter-spacing:-.01em}}
.pbx-h2{display:flex;align-items:center;gap:.55rem;margin:0 0 1.1rem;
  font-family:"Poppins","Inter",sans-serif;font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.12rem,2vw,1.35rem);color:var(--ink,#211f1c)}
.pbx-h2 .pbx-ico{display:inline;margin:0}
.pbx-h3{margin:1.8rem 0 .7rem;font-size:1.05rem;font-family:"Poppins","Inter",sans-serif}
.pbx-corps > :first-child{margin-top:0}
.pbx-corps .det-liste{margin:0 0 1rem;padding-left:1.1rem}
.pbx-corps .det-liste li{margin-bottom:.45rem}

/* Bloc « Des outils pour aller plus loin ».
   Deux défauts d'origine : la grille était calée sur trois colonnes pour deux
   cartes (elles occupaient les deux tiers de la largeur), et le pied de carte
   n'avait aucune règle de disposition — « dès 10 € » et « Découvrir → » se
   touchaient. La grille s'adapte maintenant au nombre de cartes, et le pied est
   une ligne à part entière, collée au bas de la carte quelle que soit sa hauteur. */
.res-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch}
.res{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:1.75rem;overflow:hidden}
.res-ico{font-size:1.75rem;line-height:1;width:3rem;height:3rem;display:grid;place-items:center;
  border-radius:14px;background:var(--green-soft,#eef3e3)}
.res h3{margin:.4rem 0 0;font-size:1.16rem;line-height:1.3}
.res-txt{margin:0;color:var(--muted,#6b7563);font-size:.95rem;line-height:1.6}
.res-foot{margin-top:auto;padding-top:1.05rem;display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;border-top:1px solid var(--line,#e4e7dd)}
.res-prix{font-family:"Poppins","Inter",sans-serif;font-weight:700;font-size:1.2rem;color:var(--ink,#211f1c)}
.res-prix--soon{font-size:.95rem;font-weight:600;color:var(--muted,#6b7563)}
.res-cta{font-weight:600;color:var(--green-700,#3d6218);white-space:nowrap}
.res:hover .res-cta{text-decoration:underline}
.res-badge{position:absolute;top:1rem;right:1rem;font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.32rem .62rem;border-radius:999px}
.res-badge--phare{background:var(--green,#a4c95a);color:#1f330f}
.res-badge--bientot{background:#efeae0;color:#6b6355}
.res--phare{border-color:var(--green,#a4c95a)}
@media(max-width:560px){
  .res{padding:1.35rem}
  .res-badge{position:static;align-self:flex-start;margin-bottom:.2rem}
  .res-foot{flex-direction:column;align-items:flex-start;gap:.35rem}
}

/* Bandeau webinaire des fiches formation. Le titre et son sujet formaient deux
   blocs séparés par un <br>, ce qui donnait trois lignes ; le bouton, centré
   verticalement, flottait entre les deux. Ils ne font plus qu'une phrase, coupée
   à un endroit choisi (et seulement quand la largeur le permet), et le bouton
   s'aligne sur la dernière ligne. */
.wb-titre{display:inline;line-height:1.28}
.wb-br{display:none}
@media(min-width:900px){.wb-br{display:inline}}
.cta-band{align-items:end}
@media(max-width:820px){.cta-band{align-items:start}}

/* Composeur de pack : le visiteur coche ses formations, le prix se recalcule.
   La liste est scrollable au-delà de ~7 lignes pour ne pas repousser le bouton
   d'achat hors de l'écran sur les petites hauteurs. */
.packbuilder{margin-top:2rem;border:1px solid var(--line,#e4e7dd);border-radius:var(--radius,18px);
  background:#fff;padding:clamp(1.3rem,3vw,2rem);box-shadow:var(--shadow,0 6px 24px rgba(30,40,20,.06))}
.pb-head h3{margin:0 0 .35rem;font-size:1.25rem}
.pb-bareme{margin:0 0 1.1rem;color:var(--muted,#6b7563);font-size:.92rem}
.pb-bareme b{color:var(--green-700,#3d6218)}
.pb-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.35rem;
  max-height:19rem;overflow-y:auto;padding:.15rem;margin-bottom:1.2rem}
.pb-opt{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:10px;
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.pb-opt:hover{background:var(--green-soft,#eef3e3)}
.pb-opt.is-on{background:var(--green-soft,#eef3e3);border-color:var(--green,#a4c95a)}
.pb-opt input{accent-color:var(--green-700,#3d6218);width:1.05rem;height:1.05rem;flex:0 0 auto}
.pb-nom{flex:1;font-size:.93rem;line-height:1.3}
.pb-prix{font-weight:600;font-size:.88rem;color:var(--muted,#6b7563);white-space:nowrap}
.pb-opt.is-on .pb-prix{color:var(--ink,#211f1c)}
.pb-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.1rem;border-top:1px solid var(--line,#e4e7dd)}
.pb-calc{display:flex;align-items:baseline;flex-wrap:wrap;gap:.55rem}
.pb-vide{color:var(--muted,#6b7563);font-size:.93rem}
.pb-n{font-weight:600;font-size:.9rem;color:var(--muted,#6b7563)}
.pb-eco{font-size:.88rem;color:var(--green-700,#3d6218);font-weight:600}
.pb-acheter:disabled{opacity:.45;cursor:not-allowed}
.pb-note{margin:1rem 0 0;font-size:.83rem;color:var(--muted,#6b7563);line-height:1.55}
@media(max-width:600px){.pb-pied{flex-direction:column;align-items:stretch}.pb-acheter{width:100%;justify-content:center}}

/* Champ d'inscription à l'avant-première, dans la carte du logiciel. */
.res-form{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:1.05rem;
  border-top:1px solid var(--line,#e4e7dd)}
.res-form input[type=email]{flex:1 1 11rem;min-width:0;padding:.62rem .8rem;font:inherit;font-size:.93rem;
  border:1px solid var(--line,#e4e7dd);border-radius:10px;background:#fff;color:var(--ink,#211f1c)}
.res-form input[type=email]:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:1px;border-color:var(--green,#a4c95a)}
.res-form .btn{flex:0 0 auto;padding:.62rem 1.05rem;font-size:.93rem}
.res-form .btn:disabled{opacity:.55;cursor:progress}
.res-form-msg{flex:1 0 100%;margin:.1rem 0 0;font-size:.86rem;line-height:1.45}
.res-form-msg.is-ko{color:#a2402f}
.res-form-msg.is-ok{color:var(--green-700,#3d6218);font-weight:600;margin:0}
.res-legal{margin:.6rem 0 0;font-size:.79rem;color:var(--muted,#6b7563);line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Fiche formation en page de vente : sélection à gauche, commande à droite.
   Les classes .achat-grid / .achat-recap / .recap-* sont celles du livret —
   même module, même repères visuels d'une page à l'autre. */
.tsel{display:flex;align-items:center;justify-content:center;gap:.55rem;margin-top:auto;
  padding:.72rem 1rem;border:2px solid var(--green,#a4c95a);border-radius:999px;
  font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:.95rem;
  color:var(--green-700,#3d6218);cursor:pointer;transition:background .15s,color .15s}
.tsel:hover{background:var(--green-soft,#eef3e3)}
.tsel input{accent-color:var(--green-700,#3d6218);width:1.05rem;height:1.05rem}
.tariff-card.is-choisi{border-color:var(--green,#a4c95a);box-shadow:0 0 0 3px rgba(164,201,90,.22)}
.tariff-card.is-choisi .tsel{background:var(--green,#a4c95a);color:#1f330f}
.cvd-row.is-choisi{background:var(--green-soft,#eef3e3);border-radius:10px}
.cvd-row.is-choisi .cvd-buy{background:var(--green,#a4c95a);color:#1f330f;border-color:var(--green,#a4c95a)}
.recap-titre{margin:0 0 .3rem;font-family:Poppins,Inter,sans-serif;font-size:1.15rem}
.recap-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  padding:.42rem 0;border-bottom:1px dashed var(--line,#e4e7dd);font-size:.92rem;line-height:1.35}
.recap-ligne:last-child{border-bottom:0}
.recap-ligne.is-manque{color:#a2402f}
.recap-todo{font-size:.84rem;font-weight:600;color:#a2402f;white-space:nowrap}
.form-msg.is-ko{color:#a2402f;font-size:.86rem;margin:.5rem 0 0}
@media(max-width:900px){.achat-recap{position:static}}
.recap-ok{color:var(--green-700,#3d6218);font-weight:700}

.recap-remise b{color:var(--green-700,#3d6218)}
/* Le prix se lit en trois temps : total plein barré, remise en vert, total payé.
   `line-through` seul serait invisible pour un lecteur d'écran : d'où le libellé
   « Total sans remise », qui porte l'information sans dépendre du style. */
.recap-plein b{text-decoration:line-through;color:var(--muted,#5d6753);font-weight:600}
.recap-plein span{color:var(--muted,#5d6753)}
.recap-remise b{white-space:nowrap}
.recap-annule{background:none;border:0;padding:0;font:inherit;font-size:.84rem;color:var(--muted,#6b7563);
  text-decoration:underline;cursor:pointer}
.recap-annule:hover{color:var(--green-700,#3d6218)}

/* Fiche formation : contenu à gauche, panneau de commande collé à droite pendant
   tout le défilement. Au-dessous de 1100 px la colonne n'a plus la place : le
   panneau reprend sa place dans le flux, juste après le héros, pour rester la
   première chose que voit un acheteur sur téléphone. */
.achat-solo{display:block}
/* .fiche-wrap réservait une colonne de 312 px au récapitulatif de commande, qui vit
   désormais dans le module en haut de page. La colonne restait vide et décalait
   tout le contenu de 60 px vers la gauche par rapport au hero : d'où le désalignement
   entre les onglets « Formatrice / Public » et les blocs du dessus. */
.fiche-wrap{display:block}
.fiche-main{min-width:0}

/* Depuis que la fiche a une colonne latérale, le bandeau webinaire dispose de
   moins de largeur : sa première ligne se coupait avant « consultations ».
   On resserre le titre dans cette colonne pour retrouver les deux lignes voulues. */
.fiche-main .wb-titre{font-size:clamp(1.05rem,1.55vw,1.42rem);line-height:1.32}
.fiche-main .cta-band{padding:clamp(1.6rem,3vw,2.4rem)}
@media(min-width:1100px){.fiche-main .wb-br{display:inline}}

/* Page de parcours : une ligne de réglages par formation. */
.pkl{border:1px solid var(--line,#e4e7dd);border-radius:14px;background:#fff;padding:1.15rem 1.25rem;margin-bottom:.9rem}
.pkl-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.85rem}
.pkl-img{width:58px;height:58px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.pkl-head h3{margin:0;font-size:1.05rem}
.pkl-head h3 a{color:inherit;text-decoration:none}
.pkl-head h3 a:hover{text-decoration:underline}
.pkl-meta{margin:.15rem 0 0;font-size:.86rem;color:var(--muted,#6b7563)}
.pkl-choix{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;padding-top:.6rem;
  border-top:1px dashed var(--line,#e4e7dd);margin-top:.6rem}
.pkl-lab{flex:0 0 8.5rem;font-size:.84rem;font-weight:600;color:var(--muted,#6b7563)}
.pkl-lab small{display:block;font-weight:500;margin-top:.1rem}
.pkl-fmt,.pkl-opts{display:flex;flex-wrap:wrap;gap:.45rem}
.pkl-fmt label,.pkl-opts label{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;
  border:1px solid var(--line,#e4e7dd);border-radius:999px;font-size:.86rem;cursor:pointer;transition:background .15s,border-color .15s}
.pkl-fmt label:hover,.pkl-opts label:hover{background:var(--green-soft,#eef3e3)}
.pkl-fmt label.is-on,.pkl-opts label.is-on{background:var(--green-soft,#eef3e3);border-color:var(--green,#a4c95a)}
.pkl-fmt input,.pkl-opts input{accent-color:var(--green-700,#3d6218)}
.pkl-fmt b,.pkl-opts b{font-weight:700}
@media(max-width:560px){.pkl-lab{flex:1 0 100%}}

/* Barème de remise des parcours, sous le chapô de la section. */
.bareme{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1rem 0 0;padding:0}
.bareme span{display:inline-flex;align-items:baseline;gap:.34rem;padding:.42rem .85rem;
  border:1px solid var(--line,#e4e7dd);border-radius:999px;background:#fff;
  font-size:.88rem;color:var(--muted,#6b7563)}
.bareme b{color:var(--ink,#211f1c);font-family:Poppins,Inter,sans-serif}
.bareme em{font-style:normal;font-weight:700;color:var(--green-700,#3d6218)}
@media(max-width:520px){.bareme span{font-size:.82rem;padding:.36rem .7rem}}

/* Carte de parcours isolée sur une fiche formation : même carte que l'accueil,
   simplement bornée en largeur pour ne pas s'étirer sur toute la colonne. */
.pack-solo{max-width:430px;margin:1.6rem auto 0}
.pack-solo .pack{height:100%}

/* Lignes du récapitulatif : le format (e-learning / classe virtuelle) se lit sous
   le nom de la formation, et le prix ne se coupe jamais entre le nombre et le
   symbole — « 180 » d'un côté, « € » de l'autre, c'était illisible. */
.recap-ligne{align-items:start}
.recap-ligne > span:first-child{flex:1;min-width:0}
.recap-ligne small{display:block;margin-top:.1rem;font-size:.82em;color:var(--muted,#6b7563);font-weight:500}
.recap-ligne b,.recap-ligne .recap-todo,.recap-ligne .recap-ok{white-space:nowrap;flex:0 0 auto}

/* Vignettes des options papier sur les pages de parcours : le même visuel que
   sur la fiche formation, en petit — l'acheteur voit ce qu'il coche. */
.pkl-opts label{padding:.34rem .7rem .34rem .45rem}
/* Le cadre garde sa place ; l'image est posée dessus en absolu, donc elle peut
   grandir au survol sans décaler la ligne. Au clavier, le focus déclenche le même
   agrandissement. Sur écran tactile, où « survoler » n'existe pas, rien ne bouge. */
.pkl-vw{position:relative;display:inline-block;width:26px;height:34px;flex:0 0 auto;vertical-align:middle}
.pkl-vig{position:absolute;left:0;bottom:0;width:26px;height:34px;object-fit:cover;object-position:top center;
  border-radius:4px;border:1px solid var(--line,#e4e7dd);background:#fff;
  transition:width .18s ease,height .18s ease,box-shadow .18s ease;will-change:width}
.pkl-vig--att{object-position:center}
@media (hover:hover){
  .pkl-opts label:hover .pkl-vig,
  .pkl-opts label:focus-within .pkl-vig{
    width:230px;height:auto;max-width:none;max-height:none;z-index:80;border-radius:8px;
    box-shadow:0 20px 48px rgba(30,40,20,.3)}
  .pkl-opts label{overflow:visible}
}

/* Classe virtuelle sans date programmée : l'option reste lisible mais annoncée
   comme indisponible, et le paiement est bloqué tant qu'elle est retenue. */
.pkl-fmt label.is-sansdate{border-style:dashed;color:var(--muted,#6b7563)}
.pkl-fmt label.is-sansdate.is-on{background:#fdf2ef;border-color:#e3b3a6}
.pkl-nodate{margin-left:.35rem;font-size:.76rem;font-weight:700;color:#a2402f;text-transform:uppercase;letter-spacing:.02em}

/* pastilles d'option : jamais de retour à la ligne à l'intérieur, jamais de
   compression. Depuis l'ajout des vignettes, les libellés se faisaient écraser
   et le texte débordait sous la pastille. */
.pkl-fmt label,.pkl-opts label{flex:0 0 auto;white-space:nowrap;max-width:100%}
.pkl-opts label picture{display:block;line-height:0}
.pkl-vw{margin-right:.1rem}
@media(max-width:620px){
  .pkl-fmt,.pkl-opts{width:100%}
  .pkl-fmt label,.pkl-opts label{flex:1 1 auto;justify-content:flex-start}
}

/* Portrait de formatrice : le rond est le <span>, l'image vit dedans. Elle peut
   donc être agrandie autour du visage sans agrandir le rond ni le déborder.
   Les trois valeurs (--ap cadrage, --ao point de zoom, --az facteur) sont posées
   photo par photo par le générateur. */
.ava{display:block;overflow:hidden;position:relative;box-sizing:border-box;background:var(--green-soft,#eef3e3)}
/* ⚠️ L'optimisation d'images enveloppe chaque <img> dans un <picture> pour servir du
   WebP. Un <picture> est en display:inline et n'a pas de hauteur propre : le
   `height:100%` de l'image ci-dessous ne se résolvait donc pas, et le portrait
   gardait ses proportions d'origine (98 × 218 px dans un rond de 104). L'object-fit
   et le cadrage réglé photo par photo étaient purement et simplement ignorés. */
/* `height:100%` sur le <picture> ne se résolvait pas et l'image gardait sa hauteur
   naturelle. `.ava` étant déjà en position:relative, on cale le <picture> sur ses
   quatre bords : plus aucun pourcentage à résoudre. */
.ava > picture{position:absolute;inset:0;display:block}
.ava img{width:100%;height:100%;display:block;object-fit:cover;
  object-position:var(--ap,50% 25%);transform:scale(var(--az,1.25));
  transform-origin:var(--ao,50% 35%);max-width:none}
/* les règles d'origine visaient img.avatar : elles s'appliquent maintenant au rond */
.member .avatar.ava{width:104px;height:104px;border-radius:50%;border:3px solid #fff;
  margin:0 auto .8rem;box-shadow:var(--shadow)}
.team .member:hover .avatar.ava{box-shadow:var(--shadow-lg)}

/* le titre du bandeau webinaire redevient un bloc simple */
.wb-titre{display:block}


/* ---- Pied de page : bande newsletter ----
   Pleine largeur au-dessus des colonnes, dans le vert doux de la charte :
   promesse à gauche, champ + bouton à droite, empilés sur mobile. */
/* Bande newsletter autonome, juste au-dessus du pied de page. Un seul intitulé,
   pas d'argumentaire : la phrase dit ce que fait le champ, rien de plus. */
.news-bande{background:var(--green-soft,#eef3e3);border-top:1px solid #dcebc0;padding:2.2rem 0}
.nb-form{display:flex;align-items:center;justify-content:center;gap:1rem 1.6rem;flex-wrap:wrap}
.nb-titre{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink,#211f1c)}
.nb-ligne{display:flex;gap:.5rem;flex:0 1 26rem;min-width:min(100%,17rem)}
.nb-ligne input{flex:1;min-width:0;padding:.68rem .9rem;font:inherit;font-size:.92rem;
  border:1px solid #cfdcb4;border-radius:999px;background:#fff;color:var(--ink,#211f1c)}
.nb-ligne input::placeholder{color:#9aa38e}
.nb-ligne input:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:1px;border-color:var(--green,#a4c95a)}
.nb-ligne .btn{flex:0 0 auto;padding:.68rem 1.3rem;font-size:.92rem}
.nb-form .form-msg{flex:1 0 100%;margin:.2rem 0 0;text-align:center;font-size:.86rem}
/* flex-wrap:wrap conservé en colonne, le conteneur se découpe en colonnes larges comme
   leur contenu et non comme la page : les enfants sortaient de 28 px. En pile, on ne
   veut pas de retour à la ligne. */
@media(max-width:700px){.nb-form{flex-direction:column;flex-wrap:nowrap;align-items:stretch;text-align:center}
  .nb-form>*{min-width:0;max-width:100%}}
.fg-news{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;flex-wrap:wrap;
  background:var(--green-soft,#eef3e3);border:1px solid #dcebc0;border-radius:16px;
  padding:1.4rem 1.75rem;margin-bottom:2.6rem}
.fgn-txt h4{margin:0 0 .25rem;font-size:1.02rem;text-transform:none;letter-spacing:0;color:var(--ink,#211f1c)}
.fgn-txt p{margin:0;font-size:.88rem;color:var(--muted,#6b7563)}
.fgn-form{display:flex;flex-wrap:wrap;gap:.5rem;flex:1 1 22rem;max-width:30rem;min-width:min(100%,17rem)}
.fgn-form input{flex-basis:12rem}
.fgn-form input{flex:1;min-width:0;padding:.68rem .9rem;font:inherit;font-size:.92rem;
  border:1px solid #cfdcb4;border-radius:999px;background:#fff;color:var(--ink,#211f1c)}
.fgn-form input::placeholder{color:#9aa38e}
.fgn-form input:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:1px;border-color:var(--green,#a4c95a)}
.fgn-form .btn{flex:0 0 auto;padding:.68rem 1.3rem;font-size:.92rem}
.fgn-form .form-msg{flex:1 0 100%;margin:.3rem 0 0;font-size:.84rem}
@media(max-width:700px){
  .fg-news{padding:1.2rem 1.1rem}
  .fgn-form input{flex:1 1 100%}
  .fgn-form .btn{flex:1 1 100%;justify-content:center}
}

/* Attestation papier : commandable seulement avec le support, puisqu'elle part
   dans le même colis. Tant que le support n'est pas coché, la ligne est grisée
   et dit pourquoi — plutôt que de rester cliquable et d'échouer au paiement. */
.opt-ligne.est-liee{opacity:.55}
.opt-ligne.est-liee .ol-txt::after{content:" — à ajouter avec le support";font-size:.82em;color:var(--muted,#6b7563)}
.pkl-opts label:has(input:disabled){opacity:.55;cursor:not-allowed}
.pkl-opts label:has(input:disabled) b::after{content:" · avec le support";font-weight:500;font-size:.85em;color:var(--muted,#6b7563)}


/* ---------- Page de commande ----------
   Un seul écran entre la page de vente et Stripe : ce qu'on achète reste
   visible à droite (au-dessus sur mobile, là où on le lit en premier), les
   coordonnées se remplissent à gauche, le paiement s'ouvre en dessous. */
.cmd-wrap{display:flex;flex-direction:column;gap:1.6rem}
.cmd-side{order:-1}
.cmd-h2{font-family:"Fraunces",serif;font-size:1.24rem;margin:2rem 0 .3rem;display:flex;align-items:center;gap:.6rem}
.cmd-form > .cmd-h2:first-child{margin-top:0}
.cmd-num{flex:0 0 auto;width:1.65rem;height:1.65rem;border-radius:50%;background:var(--green,#a4c95a);color:#1e2a10;
  font-family:"Poppins";font-size:.85rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.cmd-aide{margin:.1rem 0 1rem;color:var(--muted,#6b7563);font-size:.92rem;line-height:1.5}
.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem}
.cmd-ch{display:flex;flex-direction:column;gap:.3rem;font-size:.87rem;font-weight:600;color:var(--ink,#211f1c)}
.cmd-ch-2{grid-column:1/-1}
/* Libellé et astérisque dans un seul enfant du label : sans cette enveloppe, la
   colonne flex en ferait deux éléments et l'étoile tomberait sous le mot. */
.cmd-lab{display:block}
.cmd-handi{gap:.45rem}
.cmd-case{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  padding:.4rem .75rem .4rem .6rem;border:1px solid var(--line,#e4e7dd);border-radius:999px;
  font-weight:400;font-size:.92rem;cursor:pointer;background:#fff}
.cmd-case input{width:1.05rem;height:1.05rem;accent-color:var(--green,#a4c95a);cursor:pointer}
.cmd-case:has(input:checked){border-color:var(--green,#a4c95a);background:var(--green-soft,#eef3e3);font-weight:600}
.cmd-note{margin:.15rem 0 0;padding:.6rem .8rem;border-radius:10px;background:var(--green-soft,#eef3e3);
  font-size:.85rem;font-weight:400;line-height:1.5;color:var(--ink,#211f1c)}
.cmd-note[hidden]{display:none}
.cmd-ch input,.cmd-ch select{padding:.62rem .8rem;font:inherit;font-size:.95rem;font-weight:400;
  border:1px solid var(--line,#e4e7dd);border-radius:10px;background:#fff;color:var(--ink,#211f1c)}
.cmd-ch input:focus-visible,.cmd-ch select:focus-visible{outline:2px solid var(--green,#a4c95a);outline-offset:1px;border-color:var(--green,#a4c95a)}
.cmd-ch small{font-weight:400;font-size:.8rem;color:var(--muted,#6b7563);line-height:1.4}
.cmd-req{color:#a2402f}
.cmd-cgv{display:flex;align-items:flex-start;gap:.55rem;margin:.3rem 0 1.1rem;font-size:.9rem;line-height:1.5}
.cmd-cgv input{margin-top:.18rem;flex:0 0 auto;width:1.05rem;height:1.05rem;accent-color:var(--green,#a4c95a)}
.cmd-payer{width:100%;justify-content:center;font-size:1.02rem;padding:.8rem 1rem}
.cmd-payer[hidden]{display:none}
.cmd-embed{margin-top:1.2rem}
.cmd-embed[hidden]{display:none}
/* Emplacement réservé au paiement, montré dès l'arrivée. Volontairement sobre :
   il informe, il ne réclame pas l'attention que mérite le formulaire du dessus. */
.cmd-attente{margin-top:1.2rem;display:flex;gap:.7rem;align-items:center;
  padding:1.1rem 1.2rem;border:1.5px dashed var(--line,#e4e7dd);border-radius:14px;
  background:var(--cream,#faf9f5)}
.cmd-attente[hidden]{display:none}
.cmd-attente .cma-ico{font-size:1.3rem;line-height:1;flex:0 0 auto}
.cmd-attente p{margin:0;color:var(--muted,#6b7563);font-size:.9rem;line-height:1.45}
.cmd-modif{width:100%;justify-content:center;margin-top:.9rem}
.cmd-verrouille .cmd-grid,.cmd-verrouille .cmd-cgv{opacity:.55}
.cmd-rassure{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;font-size:.86rem;color:var(--muted,#6b7563)}
.cmd-vide{text-align:center;padding:1.5rem 0 2.5rem}
.cmd-vide h2{font-family:"Fraunces",serif;margin:0 0 .5rem}
.cmd-changer{width:100%;justify-content:center;margin-top:.9rem}
.cmd-side .recap-plus{margin-top:1rem}
@media (max-width:640px){.cmd-grid{grid-template-columns:1fr}}
@media (min-width:1000px){
  .cmd-wrap{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:2.4rem;align-items:start}
  .cmd-side{order:0;position:sticky;top:96px}
}