/* Marcel — palette. Valeurs identiques à app/frontend/src/styles/global.css (source de vérité). */
:root{
  --bg:#F3F5F8;--s:#FFFFFF;--sa:#FAFBFC;--sh:#EEF1F5;--ib:#F8FAFC;--b:#E5E7EB;
  --t:#0B1F3B;--ts:#1F2A44;--tm:#6B7280;--tf:#9CA3AF;
  --ab:#0B1F3B;--at:#FFFFFF;
  --ok:#22C55E;--okb:#ECFDF5;--okr:#BBF7D0;
  --er:#EF4444;--erb:#FEF2F2;--err:#FECACA;
  --wa:#F59E0B;--wab:#FFFBEB;--war:#FDE68A;
  --in:#2563EB;--inb:#E8F0FF;--inr:#BFDBFE;
  --pu:#C7B8FF;--pub:#F5F3FF;
  --co:#FF6B6B;--cob:#FFF1F1;
  --ye:#FCD34D;--yeb:#FFFBEB;
  --sand:#F7F2EA;
  --scrim:rgba(11,31,59,.45);
  --brand-login:#0057E9;
}
/* Rayons : un par rôle, jamais un nombre nu. Ombres : trois niveaux, rien d'autre. */
:root{
  --r-card:14px;--r-field:8px;--r-pill:999px;--r-avatar:50%;
  --sh-1:0 1px 2px rgba(11,31,59,.06);
  --sh-2:0 8px 24px rgba(11,31,59,.10);
  --sh-3:0 24px 64px rgba(11,31,59,.18);
}
/* Grille de 4px. */
:root{--sp-xs:4px;--sp-sm:8px;--sp-md:12px;--sp-lg:16px;--sp-xl:20px;--sp-xxl:24px;}
/* Échelle typographique — sept paliers. `display` réservé aux chiffres lus de loin. */
:root{
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-hand:'Caveat','Segoe Script',cursive;
  --fs-display:28px;--fs-title:20px;--fs-section:16px;--fs-subtitle:15px;
  --fs-body:13px;--fs-meta:12px;--fs-label:11px;
  --fw-regular:400 /* @kind other */;--fw-medium:500 /* @kind other */;--fw-semibold:600 /* @kind other */;--fw-bold:700 /* @kind other */;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-ui);background:var(--bg);color:var(--t);-webkit-font-smoothing:antialiased}
::placeholder{color:var(--tf);opacity:1}
:focus-visible{outline:2px solid var(--in);outline-offset:2px;border-radius:3px}
a{color:var(--in)}
a:hover{color:var(--t)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.ds-icon{display:inline-flex}
.ds-icon svg{width:100%;height:100%;display:block}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{overflow-x:hidden;font-family:var(--font-ui);color:var(--ts);background:#fff;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--t);text-decoration:none}
a:hover{color:var(--in)}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.hand{font-family:var(--font-hand);font-weight:600;line-height:1.35}

/* ---- chrome ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--b)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--t);letter-spacing:-.01em}
.brand img{height:30px;width:30px;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:22px;white-space:nowrap;min-width:0;font-size:14.5px;font-weight:500;color:var(--ts)}
.nav-links a{color:var(--ts)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--t);font-weight:600}
.nav-cta{display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:9px;font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:.15s}
.btn-sm{height:42px;padding:0 18px;font-size:14px}
.btn-primary{background:var(--t);color:#fff}
.btn-primary:hover{background:#15305a;color:#fff}
.btn-ghost{background:#fff;color:var(--t);border-color:var(--b)}
.btn-ghost:hover{border-color:var(--t);color:var(--t)}
.btn-light{background:#fff;color:var(--t)}
.btn-light:hover{background:var(--sand);color:var(--t)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-outline-light:hover{border-color:#fff;color:#fff}

/* ---- type ---- */
h1{font-size:clamp(38px,4.4vw,58px);line-height:1.06;letter-spacing:-.025em;font-weight:800;color:var(--t)}
h2{font-size:clamp(28px,3vw,40px);line-height:1.14;letter-spacing:-.02em;font-weight:800;color:var(--t)}
h3{font-size:20px;line-height:1.3;letter-spacing:-.01em;font-weight:700;color:var(--t)}
h4{font-size:16px;font-weight:700;color:var(--t)}
p{text-wrap:pretty}
.lead{font-size:19px;line-height:1.65;color:var(--tm)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tf)}
.muted{color:var(--tm)}
.small{font-size:14px}
.tiny{font-size:12.5px;color:var(--tf)}

/* ---- sections ---- */
section{padding:96px 0}
.tight{padding:64px 0}
.sand{background:var(--sand)}
.grey{background:var(--bg)}
.navy{background:var(--t);color:#fff}
.navy h1,.navy h2,.navy h3{color:#fff}
.navy .lead,.navy .muted{color:rgba(255,255,255,.72)}
.navy .eyebrow{color:rgba(255,255,255,.5)}
.center{text-align:center}
.narrow{max-width:720px;margin:0 auto}
.head{max-width:760px;margin-bottom:52px}
.head.center{margin-left:auto;margin-right:auto}
.head h2+p{margin-top:16px}

/* ---- layout helpers ---- */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.card{background:#fff;border:1px solid var(--b);border-radius:14px;padding:28px}
.card.flat{border-radius:12px;box-shadow:var(--sh-1);border-color:transparent}
.card h3{margin-bottom:10px}
.card p{font-size:15px;color:var(--tm);line-height:1.6}
.num{font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--in);letter-spacing:.06em;margin-bottom:12px}

/* ---- specifics ---- */
.quote{background:#fff;border-radius:14px;padding:26px;box-shadow:var(--sh-1)}
.quote .hand{font-size:21px;color:var(--t);margin-bottom:14px}
.quote cite{font-size:12.5px;color:var(--tf);font-weight:700;font-style:normal}
.bubble{background:#fff;border:1px solid var(--b);border-radius:16px 16px 16px 4px;padding:18px 22px;box-shadow:var(--sh-1);font-size:15.5px;color:var(--ts);line-height:1.6;max-width:420px}
.avatar{border-radius:50%;box-shadow:var(--sh-2);flex:none}
/* flex:none et nowrap sont indispensables : en élément flex d'un conteneur en
   space-between, .pill rétrécissait, son texte passait sur deux lignes, et la
   hauteur fixe de 30px le faisait déborder hors de la carte. */
.pill{display:inline-flex;flex:none;white-space:nowrap;align-items:center;gap:7px;height:30px;padding:0 14px;border-radius:999px;background:var(--sand);color:var(--ts);font-size:12.5px;font-weight:600}
.navy .pill{background:rgba(255,255,255,.1);color:#fff}
.shot{border-radius:14px;border:1px solid var(--b);background:var(--bg);box-shadow:var(--sh-2);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--tf);font-size:13px;font-weight:600;text-align:center;padding:20px}
.rule{height:1px;background:var(--b);border:0;margin:0}
.list{list-style:none;display:flex;flex-direction:column;gap:12px}
.list li{position:relative;padding-left:26px;font-size:15.5px;color:var(--ts);line-height:1.55}
.list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--in)}
.navy .list li{color:rgba(255,255,255,.82)}
.navy .list li::before{background:var(--ye)}

/* ---- pricing ---- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.plan{background:#fff;border:1px solid var(--b);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:20px}
.plan.hi{border:2px solid var(--t);box-shadow:var(--sh-3);position:relative}
.plan .price{font-size:44px;font-weight:800;color:var(--t);letter-spacing:-.03em;line-height:1}
.plan .price span{font-size:15px;font-weight:600;color:var(--tm);letter-spacing:0}
.tag{position:absolute;top:-13px;left:32px;height:26px;padding:0 14px;border-radius:999px;background:var(--t);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center}
.todo{background:var(--wab);border:1px dashed var(--war);border-radius:12px;padding:18px 22px;font-size:14.5px;color:#7c4a03;line-height:1.6}

/* ---- faq ---- */
details{border-bottom:1px solid var(--b);padding:20px 0}
summary{cursor:pointer;font-weight:600;font-size:17px;color:var(--t);list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:22px;font-weight:400;color:var(--tf)}
details[open] summary::after{content:"–"}
details p{margin-top:12px;font-size:15.5px;color:var(--tm);max-width:760px}

/* ---- footer ---- */
footer{background:var(--t);color:rgba(255,255,255,.62);padding:72px 0 36px;font-size:14px}
footer h4{color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;opacity:.55}
footer a{color:rgba(255,255,255,.72);display:block;padding:5px 0}
footer a:hover{color:#fff}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.45)}

@media(max-width:1100px){.nav-links{display:none}}
@media(max-width:1100px){
  .split,.g2,.g3,.g4,.plans{grid-template-columns:minmax(0,1fr);gap:32px}
  section{padding:64px 0}
  .wrap{padding:0 22px}
}

@media(max-width:1100px){
.hero-portrait{min-height:0!important;height:300px}
.hero-portrait img{max-height:300px!important;object-fit:cover!important;object-position:center 18%!important}
.hero-copy{padding:48px 22px!important}
}

/* ---- product shots ---- */
.frame{border-radius:14px;border:1px solid var(--b);box-shadow:0 30px 70px -28px rgba(11,31,59,.45),0 2px 6px rgba(11,31,59,.06);overflow:hidden;background:#fff}
.frame img{width:100%;display:block}
.frame-bar{height:34px;background:var(--ib);border-bottom:1px solid var(--b);display:flex;align-items:center;gap:7px;padding:0 14px}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:#dfe3ea;display:block}
.frame-bar span{margin-left:10px;font-size:11.5px;color:var(--tf);font-style:normal}
.hero-saas{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);padding:76px 0 0;text-align:center;overflow:hidden}
.hero-saas .frame{margin-top:56px;max-height:560px}
.hero-saas .frame img{object-fit:cover;object-position:top center}
.feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.feat.rev>div:first-child{order:2}
@media(max-width:1100px){.feat{grid-template-columns:minmax(0,1fr);gap:32px}.feat.rev>div:first-child{order:0}}

.brand img.wordmark{height:30px;width:auto;border-radius:0}
.brand img.wordmark.inv{filter:brightness(0) invert(1);height:28px}
/* ---- pricing v2 ---- */
.pricing-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.78fr);gap:22px;align-items:start}
@media(max-width:1100px){.pricing-grid{grid-template-columns:minmax(0,1fr)}}
.plan2{background:#fff;border:1px solid var(--b);border-radius:16px;padding:30px;display:flex;flex-direction:column;gap:18px}
.plan2.hi{border:2px solid var(--in);box-shadow:0 24px 60px -32px rgba(37,99,235,.4)}
.plan2 .ico{width:46px;height:46px;border-radius:12px;background:var(--inb);display:flex;align-items:center;justify-content:center}
.plan2 .ico svg{width:22px;height:22px;stroke:var(--in);fill:none;stroke-width:1.8}
/* position:relative est indispensable : .seg-thumb est en absolute et, sans repère
   ici, se calait sur un autre ancêtre — le curseur partait hors du sélecteur. */
/* Le contraste vient du remplissage, pas des bordures : une piste bordée plus un
   curseur bordé donnaient un effet de boîte dans une boîte. La piste est un creux
   nettement plus sombre que le blanc du curseur, sans aucun trait. */
.seg{position:relative;display:inline-flex;background:var(--sh);border-radius:999px;padding:5px;gap:4px}
.seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 22px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:14.5px;font-weight:500;color:var(--tm);cursor:pointer;white-space:nowrap;transition:color .2s}
.seg button[aria-pressed="true"]{color:var(--t);font-weight:600}
.seg button:focus-visible{outline:2px solid var(--in);outline-offset:2px}
.save{font-size:12.5px;font-weight:700;color:#15803d}
.feats{list-style:none;display:flex;flex-direction:column;gap:9px}
.feats li{display:flex;gap:10px;font-size:14.5px;color:var(--ts);line-height:1.5}
.feats li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;background:var(--in);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.feat-head{font-size:13px;font-weight:700;color:var(--in);margin:6px 0 2px}
.aside-card{background:#fff;border:1px solid var(--b);border-radius:14px;padding:24px}
.aside-card.tinted{background:var(--inb);border-color:var(--inr)}

.brand img.mark{height:38px;width:38px;border-radius:9px}
.brand img.wordmark{height:40px}
@media(max-width:560px){.brand img.wordmark{height:32px}.brand img.mark{height:32px;width:32px}}

.photo-band img{width:100%;height:100%;object-fit:cover}
@media(max-width:1100px){.photo-band{min-height:0!important;height:420px}.photo-band img{object-position:center 24%!important}}

.ced-sheet{background:var(--bg);border:1px solid var(--b);border-radius:16px;padding:22px;max-width:1080px;margin:0 auto}
.ced-real{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;text-align:left}
.ced-card{background:#fff;border:1px solid var(--ok);border-radius:11px;padding:13px 14px;display:flex;flex-direction:column;gap:9px;min-height:78px}
.ced-col{display:flex;flex-direction:column;gap:12px}
.ced-col>.ced-card{flex:1}
.ced-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ced-name{font-size:13px;font-weight:700;color:var(--t);line-height:1.3}
.ced-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;margin-top:4px}
.ced-badge{align-self:flex-start;background:var(--okb);color:#15803d;font-size:11px;font-weight:700;padding:2px 9px;border-radius:6px}
@media(max-width:1100px){.ced-real{grid-template-columns:repeat(3,minmax(0,1fr))}.ced-real>*{grid-column:auto!important;grid-row:auto!important}.ced-col{display:contents}.ced-real>*:first-child{grid-column:1/-1!important}}
@media(max-width:620px){.ced-real{grid-template-columns:repeat(2,minmax(0,1fr))}}

.flow{max-width:1000px;margin:0 auto}
.flow .card.flat{padding:20px 16px}
.flow .card.flat h4{font-size:15px}
.flow .card.flat p{font-size:13px}
.flow-note{text-align:center;font-size:13.5px;color:var(--tm);max-width:620px;margin:18px auto}
.flow-arrow{text-align:center;font-size:24px;color:var(--tf);line-height:1;margin:6px 0}
.flow-hub{background:var(--inb);border:2px solid var(--in);border-radius:14px;padding:28px;text-align:center}
.flow-out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1100px){.flow-out{grid-template-columns:repeat(2,minmax(0,1fr))}}

.flow-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--inb);margin:0 auto 12px}
.flow-ico svg{width:20px;height:20px}
.flow-hub .flow-ico{width:48px;height:48px;background:#fff}
.flow-hub .flow-ico svg{width:24px;height:24px}

.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;font-size:14.5px;font-weight:500;color:var(--ts);cursor:pointer}
.dd-btn[aria-current],.dd:hover .dd-btn,.dd:focus-within .dd-btn{color:var(--t);font-weight:600}
.dd-menu{position:absolute;top:calc(100% + 14px);left:-16px;min-width:290px;background:#fff;border:1px solid var(--b);border-radius:12px;box-shadow:0 24px 50px -20px rgba(11,31,59,.3);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;display:flex;flex-direction:column;gap:2px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dd-menu a{display:block;padding:10px 12px;border-radius:9px;white-space:normal}
.dd-menu a:hover{background:var(--ib)}
.dd-menu strong{display:block;font-size:14.5px;font-weight:600;color:var(--t)}
.dd-menu span{display:block;font-size:12.5px;color:var(--tm);margin-top:2px}

.pricing-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin:0 auto}
/* Les deux cartes font la même hauteur, pour que leurs boutons s'alignent. Le badge
   est posé à cheval sur le bord haut de la carte : dans le flux, ou dans un coin, il
   heurterait le titre « Stratégie + Exécution ». */
.pricing-grid.two{align-items:stretch}
.plan2{position:relative}
.plan2-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);border:1px solid var(--inr)}
/* Deux façons de démarrer : seul, par le paiement Stripe (le lien suit la période
   choisie), ou avec un humain, par un rendez-vous. Poussées en bas de carte. */
.plan2-cta{margin-top:auto;display:flex;flex-direction:column;gap:10px}
@media(max-width:1100px){.pricing-grid.two{grid-template-columns:minmax(0,1fr)}}
.seg{position:relative}
/* Le curseur était figé à 50 % de la piste, alors que « Annuel −17 % » est plus
   large que « Mensuel » : il ne coïncidait jamais avec le bouton actif. Sa position
   et sa largeur sont désormais posées en JavaScript d'après la géométrie réelle du
   bouton pressé, ce qui vaut pour n'importe quels libellés. */
.seg-thumb{position:absolute;top:5px;left:0;width:0;height:calc(100% - 10px);background:#fff;border-radius:999px;box-shadow:0 1px 3px rgba(11,31,59,.12),0 1px 2px rgba(11,31,59,.06);transition:transform .3s cubic-bezier(.32,.72,0,1),width .3s cubic-bezier(.32,.72,0,1)}
.seg button{position:relative;z-index:1;transition:color .2s}
.seg button[aria-pressed="true"]{background:transparent;box-shadow:none}
@keyframes priceSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.swap{animation:priceSwap .28s cubic-bezier(.2,.8,.3,1)}
.price{display:inline-block}

.legal-rows{display:grid;gap:0;margin-top:14px;border-top:1px solid var(--b)}
.legal-rows>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:13px 0;border-bottom:1px solid var(--b)}
.legal-rows span{font-size:13.5px;font-weight:600;color:var(--tm)}
.legal-rows p{font-size:15px;color:var(--ts)}
.legal-rows a{color:var(--in)}
@media(max-width:620px){.legal-rows>div{grid-template-columns:minmax(0,1fr);gap:4px}}

@media(max-width:1100px){.g3>.card[style*="grid-column:1/-1"]{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}}

/* ---- nav : tenue en dessous de 720px ----
   .brand et .nav-cta sont deux éléments flex de .nav .wrap. Sans flex:none, c'est la
   marque qui absorbe tout le rétrécissement (les images ont max-width:100%) : à 390px
   le logo tombait à 10px de large pendant que le bouton principal débordait de 26px.
   On fige la marque et on ne garde que le CTA principal sur petit écran. */
.brand{flex:none}
.nav-cta{flex:none}
@media(max-width:720px){.nav-cta .btn-ghost{display:none}}

/* ---- champs de formulaire ----
   Les maquettes figuraient les champs par des div vides : mêmes valeurs reprises ici
   (hauteur 46, --ib, --b, rayon 9) pour que de vrais champs rendent à l'identique. */
.field{display:block}
.field>span{display:block;font-size:14px;font-weight:600;color:var(--ts);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;height:46px;padding:0 14px;background:var(--ib);border:1px solid var(--b);
  border-radius:9px;font:inherit;font-size:15px;color:var(--t);
  -webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.field textarea{height:110px;padding:12px 14px;line-height:1.55;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--tf)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--in);box-shadow:0 0 0 3px var(--inb)}
/* La flèche native disparaît avec appearance:none — on la redessine. */
.field select{padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239CA3AF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.field select:invalid{color:var(--tf)}
.field[data-erreur] input,.field[data-erreur] select,.field[data-erreur] textarea{
  border-color:var(--er);background:var(--erb)}
.field em{display:none;font-style:normal;font-size:13px;color:var(--er);margin-top:6px}
.field[data-erreur] em{display:block}
/* Le piège à robots doit rester invisible sans être ignoré des navigateurs. */
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.form-etat{display:none;border-radius:9px;padding:14px 16px;font-size:14.5px;line-height:1.5}
.form-etat[data-ton="ok"]{display:block;background:var(--okb);border:1px solid var(--okr);color:#14532D}
.form-etat[data-ton="er"]{display:block;background:var(--erb);border:1px solid var(--err);color:#991B1B}

/* ---- les 14 dimensions, empilées ----
   En trois colonnes, les descriptions se hachaient sur cinq ou six lignes étroites et
   les cartes n'avaient pas la même hauteur. Empilée, chaque dimension tient une ligne :
   numéro et nom à gauche, ce qu'elle couvre à droite, longueur de ligne lisible.
   Même idiome que .legal-rows. */
.dims{display:grid;gap:0;margin-top:8px;border-top:1px solid var(--b)}
.dims>div{display:grid;grid-template-columns:280px minmax(0,1fr);gap:36px;align-items:start;padding:26px 0;border-bottom:1px solid var(--b)}
.dims h4{font-size:19px;color:var(--t)}
.dims .num{margin-bottom:6px}
.dims p{font-size:15.5px;color:var(--ts);line-height:1.65}
@media(max-width:820px){.dims>div{grid-template-columns:minmax(0,1fr);gap:10px;padding:22px 0}}

/* ---- simulateur de commission (affiliation) ----
   Le chiffre est l'argument de la page : il doit être gros, et bouger sous la main
   du visiteur. Le curseur natif est stylé plutôt que remplacé — un input[type=range]
   reste accessible au clavier et sur mobile, ce qu'un faux curseur en div perdrait. */
.simul{background:#fff;border:1px solid var(--b);border-radius:16px;padding:30px;box-shadow:var(--sh-2);max-width:620px;margin:34px auto 0;text-align:left}
.simul-lig{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.simul-lig span:first-child{font-size:14px;font-weight:600;color:var(--ts)}
.simul-nb{font-size:15px;font-weight:700;color:var(--t)}
.simul input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--ib);border:1px solid var(--b);outline:none}
.simul input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--t);border:3px solid #fff;box-shadow:0 2px 6px rgba(11,31,59,.3);cursor:grab}
.simul input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--t);border:3px solid #fff;box-shadow:0 2px 6px rgba(11,31,59,.3);cursor:grab}
.simul input[type=range]:focus-visible{box-shadow:0 0 0 3px var(--inb)}
.simul-res{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--b)}
.simul-gros{font-size:44px;font-weight:800;color:var(--t);letter-spacing:-.03em;line-height:1}
.simul-an{font-size:14px;color:var(--tm);text-align:right}
.simul-an strong{display:block;font-size:19px;color:var(--ts)}
@media(max-width:560px){.simul{padding:22px}.simul-gros{font-size:34px}.simul-res{flex-direction:column;align-items:flex-start}.simul-an{text-align:left}}

/* ---- profils visés ---- */
.profils{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px}
.profils h4{font-size:16.5px;color:var(--t)}
.profils p{font-size:14.5px;color:var(--ts);margin-top:6px;line-height:1.6}
@media(max-width:900px){.profils{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.profils{grid-template-columns:minmax(0,1fr);gap:24px}}

/* ---- parcours : les étapes de travail, les unes sous les autres ----
   Le trait continu n'est pas décoratif : il dit ce que le produit revendique — chaque
   niveau naît du précédent. Il court derrière les pastilles, d'où le z-index. */
.parcours{position:relative;max-width:840px;margin:0 auto}
.parcours::before{content:"";position:absolute;left:23px;top:16px;bottom:16px;width:2px;background:var(--b)}
.etape{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:26px;align-items:start;padding-bottom:26px}
.etape-num{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--b);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--t)}
.etape.cle .etape-num{background:var(--t);border-color:var(--t);color:#fff}
.etape-corps{background:#fff;border:1px solid var(--b);border-radius:14px;padding:22px 24px;box-shadow:var(--sh-1)}
.etape-corps h3{font-size:19px;color:var(--t)}
.etape-espace{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--inb);color:var(--in);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
.etape-corps p{font-size:15px;color:var(--ts);margin-top:8px;line-height:1.6}
/* L'intitulé de phase coupe le fil : son fond masque le trait derrière lui, il doit
   donc valoir celui de la section qui l'accueille — ici blanche. */
.parcours-phase{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin:6px 0 24px;padding:10px 0;background:#fff}
.parcours-phase span{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tm)}
.parcours-phase i{flex:1;height:1px;background:var(--b);font-style:normal}
@media(max-width:620px){
  .parcours::before{left:17px}
  .etape{grid-template-columns:36px minmax(0,1fr);gap:16px;padding-bottom:20px}
  .etape-num{width:36px;height:36px;font-size:13px;border-width:2px}
  .etape-corps{padding:18px}
  .etape-corps h3{font-size:17px}
}

/* ---- hero vivant (accueil) ----
   Des halos de couleur qui dérivent lentement, Marcel qui dit bonjour, « grossir »
   en dégradé souligné à la main, et les problèmes qui passent au vert un par un :
   la promesse se voit avant de se lire. Tout s'arrête si l'on a demandé moins
   d'animations. */
.hero-vif{position:relative}
.hero-vif>.wrap{position:relative;z-index:1}
.aurore{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.aurore i{position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(80px);opacity:.5;animation:derive 22s ease-in-out infinite alternate}
.aurore i:nth-child(1){background:#93C5FD;top:-220px;left:-140px}
.aurore i:nth-child(2){background:#F9A8D4;top:-160px;right:-160px;animation-delay:-6s;opacity:.42}
.aurore i:nth-child(3){background:#FDE68A;top:300px;left:8%;animation-delay:-12s;opacity:.45}
.aurore i:nth-child(4){background:#C4B5FD;top:260px;right:6%;animation-delay:-17s}
@keyframes derive{0%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,40px) scale(1.12)}100%{transform:translate(-40px,80px) scale(.94)}}

.salut{display:inline-flex;align-items:center;gap:12px;animation:monte .7s ease both}
.salut .avatar{border:3px solid #fff;animation:coucou 3.2s ease-in-out 1s infinite;transform-origin:50% 90%}
.salut .hand{font-size:27px;color:var(--t)}
@keyframes coucou{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(-9deg)}20%{transform:rotate(7deg)}30%{transform:rotate(-5deg)}40%{transform:rotate(3deg)}}

.hero-vif h1{animation:monte .7s ease .1s both}
.hero-vif .lead{animation:monte .7s ease .2s both}
.cta-hero{animation:monte .7s ease .35s both}
@keyframes monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.vif{position:relative;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(90deg,#2563EB,#7C3AED,#DB2777,#7C3AED,#2563EB);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:chatoie 7s linear infinite}
.hero-vif .vif{display:inline-block}
.vif svg{position:absolute;left:0;right:0;bottom:-.14em;width:100%;height:.3em;overflow:visible}
.vif path{fill:none;stroke:url(#trait);stroke-width:6;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;animation:trace 1s ease .9s forwards}
@keyframes chatoie{to{background-position:300% 0}}
@keyframes trace{to{stroke-dashoffset:0}}

.maux{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.maux span{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:700;border:1px solid transparent;transition:background .35s,color .35s,border-color .35s,transform .35s;animation:monte .5s ease both}
.maux span::before{content:"";width:0;height:16px;margin-right:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2322C55E'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:width .3s,margin .3s}
.maux span:nth-child(1){background:#E8F0FF;color:#1D4ED8;animation-delay:.45s}
.maux span:nth-child(2){background:#FDF2F8;color:#BE185D;animation-delay:.52s}
.maux span:nth-child(3){background:#FFF7E6;color:#B45309;animation-delay:.59s}
.maux span:nth-child(4){background:#F5F3FF;color:#6D28D9;animation-delay:.66s}
.maux span:nth-child(5){background:#ECFEFF;color:#0E7490;animation-delay:.73s}
.maux span:nth-child(6){background:#FFF1F1;color:#DC2626;animation-delay:.8s}
.maux span.regle{background:#DCFCE7;color:#15803D;border-color:#BBF7D0;transform:scale(1.06)}
.maux span.regle::before{width:16px;margin-right:7px}

.btn-eclat{position:relative;overflow:hidden}
.btn-eclat::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:eclat 4.5s ease-in-out 2s infinite}
@keyframes eclat{0%{left:-60%}30%,100%{left:130%}}

.scene{position:relative;animation:leve 1s cubic-bezier(.2,.8,.2,1) .45s both}
@keyframes leve{from{opacity:0;transform:translateY(50px) scale(.98)}to{opacity:1;transform:none}}
.bulle{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;background:#fff;border-radius:14px;box-shadow:0 18px 40px -16px rgba(11,31,59,.35),0 0 0 1px rgba(11,31,59,.05);text-align:left;opacity:0;animation:apparait .6s ease forwards,flotte 5s ease-in-out infinite}
.bulle b{display:block;font-size:14px;color:var(--t)}
.bulle small{display:block;font-size:12.5px;color:var(--tm);margin-top:1px}
.bulle .coche{flex:none;width:30px;height:30px;border-radius:50%;background:#DCFCE7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%2316A34A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.bulle.b1{left:-34px;top:120px;animation-delay:1.3s,1.9s}
.bulle.b2{right:-34px;top:230px;animation-delay:1.7s,2.3s}
.bulle.b3{left:60px;top:420px;animation-delay:2.1s,2.7s}
@keyframes apparait{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(max-width:900px){.bulle{display:none}.aurore i{width:340px;height:340px;filter:blur(60px)}.salut .hand{font-size:23px}}
@media(prefers-reduced-motion:reduce){
  .hero-vif *,.hero-vif *::before,.hero-vif *::after{animation:none!important;transition:none!important}
  .bulle{opacity:1}
  .vif path{stroke-dashoffset:0}
}

/* ---- le site vivant ----
   La dynamique du hero de l'accueil, étendue à toutes les pages : halos de couleur
   dans chaque en-tête et chaque bandeau sombre, surtitres et chiffres en dégradé,
   cartes qui se colorent et se soulèvent, blocs qui apparaissent au défilement
   (script commun, src/vivant.js). La palette est celle des six problèmes du hero. */

/* En-tête de chaque page (le premier bloc), sauf l'accueil qui a le sien. */
main>section:first-child:not(.hero-vif){position:relative;overflow:hidden}
main>section:first-child:not(.hero-vif)>*{position:relative;z-index:1}
main>section:first-child:not(.hero-vif)::before{content:"";position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(34% 42% at 12% 22%,rgba(147,197,253,.55),transparent 70%),radial-gradient(30% 38% at 88% 18%,rgba(249,168,212,.45),transparent 70%),radial-gradient(32% 40% at 72% 88%,rgba(196,181,253,.45),transparent 70%),radial-gradient(28% 36% at 25% 92%,rgba(253,230,138,.5),transparent 70%);
  filter:blur(20px);animation:derive 26s ease-in-out infinite alternate}

/* Bandeaux sombres : les mêmes halos, en plus discret. */
.navy{position:relative;overflow:hidden}
.navy>*{position:relative;z-index:1}
.navy::before{content:"";position:absolute;inset:-40% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(30% 45% at 15% 30%,rgba(37,99,235,.45),transparent 70%),radial-gradient(28% 42% at 85% 70%,rgba(168,85,247,.38),transparent 70%),radial-gradient(22% 35% at 60% 10%,rgba(236,72,153,.25),transparent 70%);
  animation:derive 24s ease-in-out infinite alternate}

/* Surtitres et numéros : un dégradé plutôt qu'un gris. */
.eyebrow,.num{display:inline-block;background:linear-gradient(90deg,#2563EB,#A855F7 55%,#EC4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.navy .eyebrow{background-image:linear-gradient(90deg,#93C5FD,#C4B5FD 55%,#F9A8D4)}

/* Chiffres clés de l'accueil. */
.chiffre{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1.1;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-image:linear-gradient(120deg,#2563EB,#A855F7)}
.g4>div:nth-child(2) .chiffre{background-image:linear-gradient(120deg,#DB2777,#F97316)}
.g4>div:nth-child(3) .chiffre{background-image:linear-gradient(120deg,#0E7490,#22C55E)}
.g4>div:nth-child(4) .chiffre{background-image:linear-gradient(120deg,#7C3AED,#EC4899)}

/* Cartes : un liseré de couleur, et elles se soulèvent au survol. */
.card,.quote,.plan2{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.card:hover,.quote:hover,.plan2:hover{transform:translateY(-5px);box-shadow:0 22px 44px -22px rgba(11,31,59,.28)}
:is(.g2,.g3,.g4)>.card:not(.flat):not(.sand){position:relative;overflow:hidden}
:is(.g2,.g3,.g4)>.card:not(.flat):not(.sand)::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--lisere,linear-gradient(90deg,#2563EB,#60A5FA))}
:is(.g2,.g3,.g4)>.card:nth-child(6n+2){--lisere:linear-gradient(90deg,#DB2777,#F9A8D4)}
:is(.g2,.g3,.g4)>.card:nth-child(6n+3){--lisere:linear-gradient(90deg,#F59E0B,#FDE68A)}
:is(.g2,.g3,.g4)>.card:nth-child(6n+4){--lisere:linear-gradient(90deg,#7C3AED,#C4B5FD)}
:is(.g2,.g3,.g4)>.card:nth-child(6n+5){--lisere:linear-gradient(90deg,#0E7490,#67E8F9)}
:is(.g2,.g3,.g4)>.card:nth-child(6n+6){--lisere:linear-gradient(90deg,#DC2626,#FCA5A5)}

/* Puces des listes : les six couleurs, à tour de rôle. */
.list li:nth-child(6n+2)::before{background:#EC4899}
.list li:nth-child(6n+3)::before{background:#F59E0B}
.list li:nth-child(6n+4)::before{background:#A855F7}
.list li:nth-child(6n+5)::before{background:#06B6D4}
.list li:nth-child(6n+6)::before{background:#EF4444}

/* Témoignages : un grand guillemet en dégradé. */
.quote{position:relative;overflow:hidden}
.quote::before{content:"\201C";position:absolute;right:16px;top:-26px;font:800 110px/1 Georgia,serif;background:linear-gradient(135deg,#A855F7,#EC4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.18;pointer-events:none}

/* Carte Exécution des tarifs : bordure en dégradé. */
.plan2.hi{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#2563EB,#A855F7,#EC4899) border-box}

/* Boutons et captures : un peu de relief au survol. */
.btn{transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(37,99,235,.65)}
.frame{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.frame:hover{transform:translateY(-6px)}

/* Pied de page : un filet aux couleurs du site. */
footer{position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#2563EB,#A855F7,#EC4899,#F59E0B)}

/* Apparition au défilement (classes posées par src/vivant.js). */
.revele{opacity:0;transform:translateY(28px);transition:opacity .7s ease var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s)!important}
.revele.vu{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  main>section:first-child::before,.navy::before{animation:none}
  .card:hover,.quote:hover,.plan2:hover,.frame:hover,.btn-primary:hover{transform:none}
}

/* ---- page vidéo (/decouvrir), partagée en prospection sur LinkedIn ----
   La vidéo est la page : elle arrive tout de suite sous le titre, en grand. Screen
   Studio interdit d'intégrer ses vidéos dans un autre site ; l'affiche aux couleurs
   du site ouvre donc la vidéo chez eux, dans un nouvel onglet. */
.decouvrir-hero h1{animation:monte .7s ease .1s both}
.video{position:relative;aspect-ratio:16/9;max-width:960px;margin:40px auto 0;border-radius:18px;overflow:hidden;background:var(--t);box-shadow:0 40px 90px -40px rgba(11,31,59,.6),0 0 0 1px rgba(11,31,59,.06);animation:leve 1s cubic-bezier(.2,.8,.2,1) .3s both}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-affiche{position:absolute;inset:0;width:100%;border:0;cursor:pointer;color:#fff;text-decoration:none;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;overflow:hidden;
  background:radial-gradient(40% 60% at 18% 20%,rgba(37,99,235,.7),transparent 70%),radial-gradient(38% 55% at 85% 80%,rgba(168,85,247,.6),transparent 70%),radial-gradient(30% 40% at 70% 12%,rgba(236,72,153,.4),transparent 70%),var(--t)}
.video-halo{position:absolute;inset:-20%;background:radial-gradient(30% 40% at 30% 70%,rgba(253,230,138,.25),transparent 70%);animation:derive 16s ease-in-out infinite alternate}
.video-lecture{position:relative;width:92px;height:92px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:pulse 2.2s ease-out infinite;transition:transform .25s}
.video-lecture svg{width:38px;height:38px;fill:var(--t);margin-left:5px}
.video-affiche:hover .video-lecture{transform:scale(1.08)}
.video-titre{position:relative;font-size:clamp(22px,3vw,34px);font-weight:800;letter-spacing:-.02em}
.video-auteur{position:relative;display:flex;align-items:center;gap:10px;font-size:14.5px;color:rgba(255,255,255,.8)}
.video-auteur img{border-radius:50%;border:2px solid rgba(255,255,255,.7)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}100%{box-shadow:0 0 0 28px rgba(255,255,255,0)}}
.maux.fixe{margin-top:12px}
@media(max-width:620px){.video{border-radius:12px;margin-top:28px}.video-lecture{width:64px;height:64px}.video-lecture svg{width:28px;height:28px}.video-titre{font-size:20px}.video-auteur{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.video,.video-halo,.video-lecture,.decouvrir-hero h1{animation:none!important}}