/* SIOBuilder · landing v2 (26/09/2026). Styles ajoutés par la v2 du copy, chargés APRÈS style.css, landing.css,
   pages.css et sections-module.css. Mêmes tokens (crème, forêt, vert, sauge), mêmes polices, aucune dépendance.
   Chaque bloc correspond à un élément nouveau ou modifié de index.html / en.html (voir CHANGELOG-landing-v2.md). */

/* Utilitaires */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
main:focus{outline:none}

/* Hero : le sous-titre passe sur deux lignes (il était en nowrap) ; réassurance sous le CTA */
.intro-bottom p{white-space:normal;max-width:780px;text-wrap:balance}
.intro-bottom .intro-note{font-size:12px;line-height:1.5;letter-spacing:0;font-weight:500;color:#2f4b3b;margin:0}

/* Démo animée : pastille « 2 sections = 2 crédits », visible pendant l'étape 03 (mêmes variables que les étiquettes) */
.demo-count{position:absolute;top:-13px;right:18px;z-index:6;background:var(--forest);color:#fff;font:600 12px/1 var(--sans);padding:7px 11px;border-radius:20px;white-space:nowrap;pointer-events:none;opacity:calc(var(--structure)*(1 - var(--editor)))}
@media(max-width:760px){.demo-count{top:-11px;right:10px;font-size:10px;padding:5px 8px}}

/* Bandeau outils : mention lisible (12 px, 5,2:1) */
.landing-body .fine-print{font-size:12px}

/* Comment ça marche : 4 étapes avec étiquette, prérequis, CTA et emplacement de la vidéo réelle */
.problem + .how{border-top:1px solid var(--line)}
.how .section-intro{margin-bottom:52px}
.how-lead{font-size:18px;line-height:1.6;color:var(--body-muted);margin:22px auto 0;max-width:620px}
.how-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin:0}
.how-steps li>span{color:#7a8f6a}
.how-steps p{max-width:none;margin:0 0 18px}
.how-tag{display:inline-block;justify-self:start;align-self:flex-start;font:500 12px/1.2 var(--sans);letter-spacing:.2px;color:var(--forest);border:1px solid #aebba2;border-radius:20px;padding:6px 11px}
.how-tag.is-paid{background:var(--forest);border-color:var(--forest);color:#fff}
@media(min-width:481px){.how-steps li{display:flex;flex-direction:column}.how-tag{margin-top:auto}}
.how-requirements{font-size:13px;line-height:1.6;color:#596357;margin:40px auto 0;max-width:640px}
.how-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px}
.cta-note{font-size:12px;line-height:1.5;color:#596357;margin:0}
.how-layout{display:block}
.real-demo{margin:0;min-width:0}
.real-demo[hidden]{display:none}
.real-demo-frame{position:relative;overflow:hidden;border:1px solid #cbd2c1;border-radius:6px;background:#eceee4;box-shadow:0 15px 40px rgba(36,49,43,.09)}
.real-demo-media{display:block;width:100%;height:auto}
.real-demo-badge{display:inline-block;margin:0 0 10px;background:var(--forest);color:#fff;font:600 12px/1 var(--sans);letter-spacing:.6px;padding:7px 10px;border-radius:20px}
.real-demo-toggle{position:absolute;right:12px;bottom:12px;font-size:12px;line-height:1;padding:10px 14px;border-radius:30px;background:#f7f4eeeb;border:1px solid #7885754d;color:var(--forest)}
.real-demo-toggle:hover{background:#fff}
.real-demo-toggle[hidden]{display:none}
.real-demo figcaption{font-size:12px;line-height:1.5;color:#596357;margin-top:12px;text-align:left}
/* Quand la vidéo est livrée (classe posée par landing-v2.mjs) : étapes à gauche, vidéo à droite */
.how.has-demo .how-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,4.5vw,72px);align-items:center;text-align:left}
.how.has-demo .how-steps{grid-template-columns:1fr;gap:0}
.how.has-demo .how-steps li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;padding:18px 0 20px}
.how.has-demo .how-steps li>span{grid-row:1/4;font-size:36px;margin:0}
.how.has-demo .how-steps h3{font-size:22px;margin:0 0 6px}
.how.has-demo .how-steps p{font-size:14px;margin:0 0 10px}
.how.has-demo .how-tag{grid-column:2;margin-top:0}
@media(max-width:1100px){.how-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 30px}}
@media(max-width:1000px){.how.has-demo .how-layout{grid-template-columns:1fr;gap:36px}}
@media(max-width:1000px) and (min-width:481px){.how.has-demo .how-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}}
@media(max-width:480px){
 .how-steps{grid-template-columns:1fr}
 .how-steps p{margin-bottom:12px}
 .how-tag{grid-column:2}
 .how.has-demo .how-steps li{grid-template-columns:45px 1fr;column-gap:16px}
 .how-lead{font-size:16px}
 .real-demo-toggle{right:8px;bottom:8px;padding:8px 11px;font-size:11px}
}

/* Agences : lien vers l'offre Studio */
.agency-link{display:inline-block;margin-top:30px;font-size:14px;color:var(--forest);text-decoration:underline;text-underline-offset:5px}

/* Tarifs */
.pricing-intro>p{max-width:430px}
.credit-definition{font-size:15px}
.pricing-status{max-width:760px;margin:0 auto 26px;padding:12px 18px;border:1px solid #b9c5ad;border-radius:4px;background:var(--cream);color:var(--forest);font-size:13px;line-height:1.55;text-align:center}
.pricing-monthly{list-style:none;margin:26px 0 0;padding:24px 0 0;border-top:1px solid #c9d1be;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 44px;font-size:14px;line-height:1.6;color:var(--body-muted)}
.pricing-monthly li{position:relative;padding-left:20px}
.pricing-monthly li:before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border:1px solid var(--forest);background:var(--cream)}
.pricing-footnote{font-size:12px;color:#596357;margin:16px 0 0}
.plan-guide{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:30px;margin-top:50px;padding-top:30px;border-top:1px solid #bcc8b0}
.plan-guide h3{font-size:31px;margin:0}
.plan-guide ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px;line-height:1.55;color:var(--ink)}
.plan-guide li strong{font-weight:600;color:var(--forest)}
.plan-guide p{margin:16px 0 0;font-size:14px}
.plan-guide a{color:var(--forest);text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){.pricing-monthly{grid-template-columns:1fr}.plan-guide{grid-template-columns:1fr;gap:18px}}

/* FAQ : intertitres de groupe */
.faq-list .faq-group{font:600 12px/1.4 var(--sans);letter-spacing:1.2px;color:#596357;margin:44px 0 8px}
.faq-list .faq-group:first-child{margin-top:0}
.faq-list .faq-group+details{border-top:1px solid #d8ddcf}

/* CTA final : réassurance sous le bouton */
.final-cta p.cta-note{font-size:13px;line-height:1.6;color:#2f4b3b;margin:18px auto 0;max-width:620px}

/* Pied de page : mentions à 12 px, contraste 5,7:1 (au lieu de 10 px à 3,8:1) */
.site-footer>div>p,.footer-bottom{color:#596357}
.footer-bottom p{font-size:12px!important;line-height:1.6}

/* Barre d'inscription collante en mobile (moins de 480 px, là où le bouton du header est masqué par pages.css) */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 5% calc(10px + env(safe-area-inset-bottom));background:#f7f4eef5;border-top:1px solid #c9cebf;backdrop-filter:blur(12px);transform:translateY(110%);visibility:hidden;transition:transform 200ms ease-out,visibility 0s linear 200ms}
.mobile-cta[hidden]{display:none}
.mobile-cta.is-visible{transform:none;visibility:visible;transition:transform 200ms ease-out,visibility 0s}
.mobile-cta p{margin:0;font-size:13px;line-height:1.3;font-weight:500;color:var(--forest)}
.mobile-cta .primary{padding:12px 16px;font-size:14px;white-space:nowrap}
@media(min-width:481px){.mobile-cta{display:none}}
.reduced .mobile-cta{transition:none}
@media(prefers-reduced-motion:reduce){.mobile-cta{transition:none}}
/* Le bouton « Gestion des cookies » (analytics.mjs, fixé en bas à gauche) remonte au-dessus de la barre quand elle est visible. */
body.has-mobile-cta #analytics-consent{bottom:calc(78px + env(safe-area-inset-bottom))}

.plan-reference { text-decoration: none; }

/* Launch pricing: direct plan anchor, clear reference price and spaced tax note. */
#tarifs{scroll-margin-top:10px}
.landing-body .pricing-tax-note{margin:48px auto 0;max-width:850px;padding-top:24px;border-top:1px solid #c9d1be}
/* Shared content rows keep the three plans aligned even when copy wraps. */
.pricing-grid{column-gap:22px;row-gap:0}
.pricing-grid .price-card{display:grid;grid-row:span 10;grid-template-rows:subgrid;row-gap:0;min-width:0}
.plan-heading{padding-bottom:12px}
.price-card .plan-audience{min-height:0;margin-bottom:12px}
.plan-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.price-card .plan-title-row h3{margin:0}
.price-studio .founder-badge{position:static;background:var(--forest);color:var(--cream);padding:7px 9px;border-radius:3px;font-size:11px;font-weight:600;margin:0;line-height:1.4}
.price-studio .founder-offer-note{font-size:12px;font-weight:600;color:var(--forest);margin:10px 0 0;line-height:1.5}
.pricing-grid .plan-reference{align-self:end;font-size:13px;color:#536348;margin:0 0 12px;line-height:1.4!important}
.price-studio .plan-reference s{font-size:20px;text-decoration-thickness:2px}
.pricing-grid .plan-price strong>.price-value{font-size:1em}
.pricing-grid .plan-price{align-self:start;flex-wrap:wrap;white-space:normal;gap:8px;margin:0 0 18px;line-height:1}
.pricing-grid .plan-billing{font-size:12px;min-height:0;margin:0 0 24px;line-height:1.6}
.pricing-grid .plan-quota{align-self:start;line-height:1.6}
.pricing-grid .plan-description{min-height:0;margin:10px 0 24px}
.pricing-grid .price-card>.primary{align-self:start}
.pricing-grid .price-card>ul{grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:1fr;row-gap:13px;margin:24px 0 0;padding:24px 0 0}
.pricing-grid .price-card>ul>li{align-self:start}
.price-card>.plan-handles{position:absolute;inset:0;pointer-events:none}
@media(max-width:1100px){.pricing-grid{column-gap:16px}}
@media(max-width:800px){
  .pricing-grid{row-gap:25px}
  .pricing-grid .price-card{display:flex;grid-row:auto}
  .pricing-grid .price-card>ul{display:grid;grid-template-rows:none;grid-row:auto}
  .pricing-grid .plan-reference{align-self:flex-start}
  .pricing-grid .plan-reference[aria-hidden="true"]{display:none}
}
@media(max-width:540px){#tarifs{scroll-margin-top:0}.landing-body .pricing-tax-note{margin-top:36px}}