/*
 * LA FEUILLE DE STYLE DU SITE PUBLIC — partagee par toutes les pages.
 *
 * Elle est sortie de la page d'accueil quand le site en a eu six : recopier
 * quatre cents lignes de CSS dans chaque fichier, c'est garantir qu'elles
 * divergeront des la premiere retouche, et qu'une page aura un bouton d'une
 * autre couleur sans que personne ne sache pourquoi.
 *
 * Les valeurs viennent de globals.css : le site et l'application doivent se
 * ressembler, sinon le premier clic donne l'impression d'avoir change d'outil.
 *
 * ── SUR L'ALIGNEMENT A GAUCHE ────────────────────────────────────────────
 * Il est DELIBERE, et c'est la question qu'on pose en premier en decouvrant
 * ces pages. Trois raisons :
 *   1. un texte centre se relit mal des la troisieme ligne — le bord gauche
 *      bouge, l'oeil doit rechercher ou recommencer ;
 *   2. le centrage est la signature de la page marketing, et ce produit se
 *      vend sur la rigueur, pas sur la promesse ;
 *   3. l'application est alignee a gauche.
 * Une seule exception, et elle est voulue : l'appel final, qui n'est pas fait
 * pour etre lu mais pour etre vu.
 */
:root{
    --canvas:#f6f6f4; --surface:#ffffff; --ink:#16161a; --muted:#62626b;
    --faint:#8b8b94; --line:#e7e6e2; --line-soft:#efeeeb; --line-strong:#d6d5d0;
    --field:#f4f4f1;
    --brand:#5058c8; --brand-ink:#454cbc; --brand-soft:#ebecf9; --brand-line:#c9ccf0;
    --good:#0e8a60; --good-ink:#0a6b4b; --good-soft:#e4f1ec;
    --amber-ink:#86590a; --amber-soft:#f9f1de; --amber-line:#e6d3a8;
    --danger-ink:#a32f2f; --danger-soft:#fbeaea;
    --r:10px; --r-lg:16px; --max:1080px;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --canvas:#111113; --surface:#18181b; --ink:#f2f2f4; --muted:#acacb4;
      --faint:#77777f; --line:#27272c; --line-soft:#202024; --line-strong:#35353c;
      --field:#1e1e22;
      --brand:#7b85e8; --brand-ink:#a3a9f2; --brand-soft:#212440; --brand-line:#343a66;
      --good:#3bbf8d; --good-ink:#5fd3a6; --good-soft:#12271f;
      --amber-ink:#e0b25f; --amber-soft:#2a2213; --amber-line:#4a3c1c;
      --danger-ink:#e88a8a; --danger-soft:#2c1818;
    }
  }
  *{box-sizing:border-box}
  html{overflow-x:hidden}
  body{
    margin:0; background:var(--canvas); color:var(--ink);
    /* LE REPLI EST DANS LE var(), ET C'EST OBLIGATOIRE.
       `var(--font-sans)` sans second argument rend la declaration INVALIDE
       quand la variable n'existe pas -- ce n'est pas « on passe a la suite de
       la liste », c'est toute la regle qui tombe, et le navigateur revient a
       sa police par defaut, une serif. C'est ce qui est arrive aux maquettes
       ouvertes depuis le disque : elles n'ont pas les variables de next/font,
       elles chargent Geist par un <link>.
       Avec le repli : l'application prend sa police compilee, les maquettes
       prennent Geist, et personne ne tombe en Times. */
    font-family:var(--font-sans,Geist),-apple-system,"Segoe UI",Roboto,sans-serif;
    font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  img{max-width:100%}
  .wrap{max-width:var(--max); margin:0 auto; padding-inline:20px}
  section{padding-block:clamp(44px,6vw,80px)}
  h1,h2,h3{line-height:1.18; letter-spacing:-.02em; margin:0}
  h1{font-size:clamp(28px,4.8vw,48px); font-weight:700}
  h2{font-size:clamp(22px,3.3vw,32px); font-weight:650}
  h3{font-size:16.5px; font-weight:600; letter-spacing:-.01em}
  p{margin:0}
  a{color:inherit}
  .lede{color:var(--muted); font-size:clamp(15.5px,1.9vw,18px); line-height:1.6}
  .eyebrow{font-size:11.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-ink)}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:var(--r); padding:11px 19px; font-size:14.5px; font-weight:600;
    text-decoration:none; border:1px solid transparent;
  }
  .btn-primary{background:var(--brand); color:#fff}
  .btn-ghost{border-color:var(--line-strong); color:var(--ink); background:var(--surface)}
  .btn-link{display:inline-flex; align-items:center; gap:6px; color:var(--brand-ink); font-size:14.5px; font-weight:600; text-decoration:none}
  .btn-link::after{content:"→"}

  /* ══ Barre ══ */
  header.bar{
    position:sticky; top:0; z-index:20;
    background:color-mix(in srgb,var(--canvas) 88%,transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  }
  .bar-in{display:flex; align-items:center; gap:12px; height:60px}
  .logo{display:flex; align-items:center; gap:9px; font-weight:650; letter-spacing:-.02em; text-decoration:none; flex:none}
  .logo-mark{width:27px; height:27px; border-radius:8px; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700}
  /* La navigation DÉFILE au lieu de disparaître sur petit écran : la masquer
     privait les téléphones de toute navigation. */
  nav.links{
    display:flex; gap:18px; margin-left:auto; font-size:14px; color:var(--muted);
    min-width:0; overflow-x:auto; white-space:nowrap; scrollbar-width:none;
  }
  nav.links::-webkit-scrollbar{display:none}
  nav.links a{text-decoration:none}
  .bar .btn{margin-left:16px; flex:none}
  @media(max-width:900px){ .bar .btn{display:none} nav.links{margin-left:16px} }

  /* ══ Héros ══ */
  .hero{padding-block:clamp(44px,6.5vw,84px) clamp(26px,3.5vw,40px)}
  .hero h1{max-width:17ch}
  .hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
  .hero-cta .btn{flex:1 1 auto; min-width:190px}
  @media(min-width:560px){ .hero-cta .btn{flex:0 0 auto} }
  /* La ligne de capacités : elle dit « plateforme » en une seconde, avant
     qu'on ait lu une phrase. */
  .chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:24px}
  .chip{
    border:1px solid var(--line-strong); border-radius:999px; padding:5px 13px;
    font-size:12.5px; font-weight:560; color:var(--muted); background:var(--surface);
  }
  .hero-note{margin-top:16px; font-size:12.5px; color:var(--faint)}

  /* ══ Onglets produit — CSS pur ══ */
  .tabs{margin-top:clamp(24px,3vw,34px)}
  .tabs > input{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
  .tabnav{display:flex; gap:7px; overflow-x:auto; padding-bottom:3px; scrollbar-width:none}
  .tabnav::-webkit-scrollbar{display:none}
  .tabnav label{
    cursor:pointer; border:1px solid var(--line-strong); border-radius:999px;
    padding:8px 15px; font-size:13.5px; font-weight:560; white-space:nowrap;
    background:var(--surface); color:var(--muted); flex:none;
  }
  .tabnav label b{font-weight:700; color:var(--faint); margin-right:5px}
  .panel{display:none}
  .panels{margin-top:16px}
  #t1:checked ~ .tabnav label[for=t1],#t2:checked ~ .tabnav label[for=t2],
  #t3:checked ~ .tabnav label[for=t3],#t4:checked ~ .tabnav label[for=t4],
  #t5:checked ~ .tabnav label[for=t5]{background:var(--brand); border-color:var(--brand); color:#fff}
  #t1:checked ~ .tabnav label[for=t1] b,#t2:checked ~ .tabnav label[for=t2] b,
  #t3:checked ~ .tabnav label[for=t3] b,#t4:checked ~ .tabnav label[for=t4] b,
  #t5:checked ~ .tabnav label[for=t5] b{color:rgba(255,255,255,.7)}
  #t1:checked ~ .panels .p1,#t2:checked ~ .panels .p2,#t3:checked ~ .panels .p3,
  #t4:checked ~ .panels .p4,#t5:checked ~ .panels .p5{display:block}
  .panel-in{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:28px; align-items:start}
  @media(max-width:880px){ .panel-in{grid-template-columns:1fr; gap:20px} }
  .panel-in h3{font-size:19px; letter-spacing:-.02em}
  .panel-in p{margin-top:9px; color:var(--muted); font-size:14.5px; line-height:1.55}
  .panel-in ul{margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:14px}
  .panel-in li{margin-bottom:5px}

  /* ══ Chrome d'écran ══ */
  .shot{
    border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
    overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 18px 44px -24px rgba(0,0,0,.26);
  }
  .shot-bar{display:flex; align-items:center; gap:7px; padding:10px 14px; border-bottom:1px solid var(--line-soft); background:var(--canvas)}
  .dot{width:8px; height:8px; border-radius:50%; background:var(--line-strong); flex:none}
  .shot-title{margin-left:7px; font-size:11.5px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .shot-foot{padding:8px 14px; font-size:11px; color:var(--faint); border-top:1px solid var(--line-soft); background:var(--canvas)}
  .shot-scroll{overflow-x:auto}
  table.rows{width:100%; border-collapse:collapse; min-width:520px}
  table.rows th{
    text-align:left; font-size:10px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
    color:var(--faint); padding:10px 13px; border-bottom:1px solid var(--line-soft); white-space:nowrap;
  }
  table.rows td{padding:11px 13px; border-bottom:1px solid var(--line-soft); font-size:13px; vertical-align:middle}
  table.rows tr:last-child td{border-bottom:0}
  .who{display:flex; align-items:center; gap:9px; white-space:nowrap}
  .av{width:28px; height:28px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; font-size:11px; font-weight:650; flex:none}
  .who b{font-weight:560}
  .pill{display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:560; background:var(--field); color:var(--muted); white-space:nowrap}
  .pill-ok{background:var(--good-soft); color:var(--good-ink)}
  .pill-wait{background:var(--amber-soft); color:var(--amber-ink)}
  .score{display:inline-block; font-variant-numeric:tabular-nums; font-size:14px; font-weight:680; padding:2px 9px; border-radius:7px; white-space:nowrap}
  .s-hi{background:var(--good-soft); color:var(--good-ink)}
  .s-mid{background:var(--amber-soft); color:var(--amber-ink)}

  /* ══ Fiche d'évaluation ══ */
  .eval-h{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line-soft)}
  .eval-h .who{flex:1 1 auto; min-width:0}
  .eval-h .who span{display:block; font-size:12px; color:var(--faint); overflow:hidden; text-overflow:ellipsis}
  .marks{display:flex; gap:18px; flex:none}
  .mark{text-align:right}
  .mark u{display:block; text-decoration:none; font-size:9.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
  .mark b{font-variant-numeric:tabular-nums; font-size:18px; font-weight:700; letter-spacing:-.02em}
  .eval-b{padding:4px 16px 16px}
  .band{padding-top:13px}
  .band-t{display:flex; align-items:center; gap:6px; font-size:10px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px}
  .b-proof .band-t{color:var(--good-ink)}
  .b-said .band-t{color:var(--muted)}
  .b-check .band-t{color:var(--amber-ink)}
  .band ul{margin:0; padding-left:17px; color:var(--muted); font-size:13.5px}
  .band li{margin-bottom:4px}
  .band li b{color:var(--ink); font-weight:560}

  /* ══ Entretien ══ */
  .qa{padding:14px 16px; border-bottom:1px solid var(--line-soft)}
  .qa:last-child{border-bottom:0}
  .qa-q{display:flex; gap:10px; align-items:baseline}
  .qa-q p{flex:1; font-size:13.5px; font-weight:560; margin:0}
  .qa-a{margin-top:7px; color:var(--muted); font-size:13px; line-height:1.5; border-left:2px solid var(--line-strong); padding-left:11px}
  .kw{margin-top:7px; font-size:11.5px; color:var(--faint)}
  .kw b{color:var(--good-ink); font-weight:560}

  /* ══ Journal des envois ══ */
  .queue{padding:6px 0}
  .qrow{display:flex; align-items:center; gap:11px; padding:10px 16px; border-bottom:1px solid var(--line-soft)}
  .qrow:last-child{border-bottom:0}
  .qtime{font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; color:var(--brand-ink); flex:none; width:46px}
  .qbody{flex:1; min-width:0}
  .qbody b{display:block; font-size:13px; font-weight:560}
  .qbody span{display:block; font-size:11.5px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  /* ══ Dossier ══ */
  .dossier{padding:16px}
  .dos-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--line-soft); padding-bottom:12px}
  .dos-h b{font-size:16px; letter-spacing:-.01em}
  .dos-h span{font-size:12.5px; color:var(--faint)}
  .dos-l{display:flex; gap:9px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13px}
  .dos-l u{text-decoration:none; color:var(--faint); flex:none; width:104px; font-size:12px}
  .interne{margin-top:13px; border-left:2px solid var(--amber-line); padding-left:11px}
  .interne u{display:block; text-decoration:none; font-size:9.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--amber-ink); margin-bottom:5px}
  .interne div{display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--muted); padding:2px 0}
  .interne div b{color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}

  /* ══ Grilles & cartes ══ */
  .grid{display:grid; gap:18px}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g2{grid-template-columns:repeat(2,1fr)}
  @media(max-width:880px){ .g3,.g2{grid-template-columns:1fr} }
  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:21px}
  .card h3{margin-bottom:6px}
  .card p{color:var(--muted); font-size:14.5px}

  /* ══ Bénéfices ══ */
  /* DEUX colonnes, et non quatre.
     A quatre, chaque colonne faisait 246 px : une ligne y tenait trente
     caracteres, loin des quarante-cinq a soixante-quinze qui se lisent sans
     effort. Le texte cassait tous les quatre mots et la frise s'effilochait.
     A deux, la ligne fait une longueur normale — et le bandeau se lit comme
     deux rangees de deux au lieu d'une suite qui se defait. */
  .gains{display:grid; grid-template-columns:repeat(2,1fr); gap:20px 34px; margin-top:28px}
  @media(max-width:700px){ .gains{grid-template-columns:1fr} }
  .gain{border-top:2px solid var(--brand); padding-top:14px}
  .gain b{display:block; font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.28}
  .gain span{display:block; margin-top:7px; color:var(--muted); font-size:13.5px; line-height:1.55}

  /* ══ Comparaison & duo ══ */
  .compare{display:grid; gap:16px; grid-template-columns:1fr 1fr; margin-top:26px}
  @media(max-width:880px){ .compare{grid-template-columns:1fr} }
  /* Les deux colonnes ont des hauteurs differentes -- trois puces a gauche,
     quatre a droite. La verdict etait pousse en haut et laissait un bloc BLANC
     sous lui, qu'on lisait comme un element manquant. Il descend au bas de la
     carte. */
  .col{
    border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
    background:var(--surface); display:flex; flex-direction:column;
  }
  .col ul{flex:1}
  .col-h{padding:12px 17px; font-size:12.5px; font-weight:650; border-bottom:1px solid var(--line-soft)}
  .col-a .col-h{background:var(--amber-soft); color:var(--amber-ink)}
  .col-b .col-h{background:var(--good-soft); color:var(--good-ink)}
  .col ul{margin:0; padding:13px 17px 15px 30px; color:var(--muted); font-size:13.5px}
  .col li{margin-bottom:5px}
  .col .verdict{margin:0; padding:11px 17px; border-top:1px solid var(--line-soft); font-size:13px; background:var(--canvas)}
  .duo{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px}
  @media(max-width:620px){ .duo{grid-template-columns:1fr} }
  .duo .card h3{display:flex; align-items:baseline; gap:8px}
  .duo .card h3 em{font-style:normal; font-size:11.5px; font-weight:650; color:var(--faint); letter-spacing:.05em; text-transform:uppercase}

  /* ══ Fil rouge ══ */
  .thread{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:30px}
  @media(max-width:760px){ .thread{grid-template-columns:1fr; gap:16px} }
  .beat b{display:block; font-size:15px; font-weight:600; letter-spacing:-.01em}
  .beat span{display:block; margin-top:4px; color:var(--muted); font-size:13.5px; line-height:1.5}

  /* ══ Frise d'autonomie ══ */
  .frise{margin-top:8px; border-left:2px solid var(--brand-line); padding-left:22px; display:grid; gap:15px}
  .fr{display:grid; grid-template-columns:52px 1fr; gap:13px; align-items:baseline; position:relative}
  .fr::before{
    content:""; position:absolute; left:-27px; top:7px; width:9px; height:9px;
    border-radius:50%; background:var(--brand); border:2px solid var(--surface);
  }
  .fr time{font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:650; color:var(--brand-ink)}
  .fr p{font-size:14px; font-weight:560}
  .fr p span{display:block; color:var(--muted); font-size:13px; margin-top:2px; font-weight:400}
  .fr.humain::before{background:var(--ink)}
  .fr.humain time{color:var(--ink)}

  /* ══ Flux de sourcing ══ */
  .flux{display:flex; gap:8px; margin-top:24px; overflow-x:auto; padding-bottom:4px}
  .flux-step{flex:1 1 0; min-width:128px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 13px}
  .flux-step b{display:block; font-variant-numeric:tabular-nums; font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--brand-ink)}
  .flux-step span{display:block; margin-top:3px; font-size:12px; color:var(--muted); line-height:1.4}
  .flux-step.last b{color:var(--good-ink)}
  .ex{display:inline-block; background:var(--field); color:var(--faint); border-radius:5px; padding:1px 6px; font-size:10.5px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle}

  /* ══ Sélecteur cabinet / ESN ══ */
  .switcher > input{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
  .swnav{display:inline-flex; gap:4px; background:var(--field); border-radius:999px; padding:4px; margin-top:22px}
  .swnav label{cursor:pointer; border-radius:999px; padding:7px 17px; font-size:13.5px; font-weight:560; color:var(--muted); white-space:nowrap}
  #w1:checked ~ .swnav label[for=w1],#w2:checked ~ .swnav label[for=w2]{background:var(--surface); color:var(--ink); font-weight:650; box-shadow:0 1px 2px rgba(0,0,0,.07)}
  .wpanel{display:none; margin-top:22px}
  #w1:checked ~ .wpanels .w1,#w2:checked ~ .wpanels .w2{display:block}
  .wpanel h3{font-size:clamp(19px,2.6vw,25px); letter-spacing:-.02em; max-width:26ch}
  .wlist{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px}
  @media(max-width:860px){ .wlist{grid-template-columns:1fr 1fr} }
  @media(max-width:560px){ .wlist{grid-template-columns:1fr} }
  .wlist div{border-top:1px solid var(--line); padding-top:11px; font-size:13.5px; color:var(--muted); line-height:1.5}
  .wlist div b{display:block; color:var(--ink); font-weight:560; font-size:14.5px; margin-bottom:3px}

  /* ══ Sécurité ══ */
  .facts{margin:20px 0 0; padding:0; list-style:none; display:grid; gap:9px}
  .facts li{display:flex; gap:10px; align-items:baseline; font-size:14.5px; color:var(--muted)}
  .facts li::before{content:"✓"; color:var(--good-ink); font-weight:700; flex:none}
  .facts li b{color:var(--ink); font-weight:560}

  /* ══ Formules ══ */
  .plans{display:grid; gap:16px; grid-template-columns:repeat(3,1fr); margin-top:28px}
  @media(max-width:900px){ .plans{grid-template-columns:1fr} }
  .plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; display:flex; flex-direction:column}
  .plan.mid{border-color:var(--brand-line); box-shadow:0 0 0 3px var(--brand-soft)}
  .plan h3{font-size:15px}
  .plan .prix{margin-top:9px; letter-spacing:-.03em}
  .plan .prix b{font-size:31px; font-weight:700; font-variant-numeric:tabular-nums}
  .plan .prix span{font-size:14px; font-weight:500; color:var(--faint); letter-spacing:0}
  .plan li b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
  .plan > p{margin-top:7px; color:var(--muted); font-size:14px}
  .plan ul{margin:15px 0 0; padding-left:18px; color:var(--muted); font-size:14px}
  .plan li{margin-bottom:5px}
  .plan .btn{margin-top:auto; width:100%}
  .plan ul + .btn{margin-top:19px}

  /* ══ Appel final ══ */
  .final{background:var(--brand); color:#fff; border-radius:var(--r-lg); padding:clamp(30px,5vw,52px); text-align:center}
  .final h2{color:#fff}
  .final p{color:rgba(255,255,255,.84); margin:13px auto 0; max-width:48ch; font-size:16px}
  .final .btn{margin-top:24px; background:#fff; color:var(--brand-ink)}

  footer{border-top:1px solid var(--line); padding-block:30px; color:var(--faint); font-size:13.5px}
  .foot{display:flex; flex-wrap:wrap; gap:16px; align-items:center}
  .foot nav{display:flex; flex-wrap:wrap; gap:16px; margin-left:auto}
  .foot a{text-decoration:none}

/* ══ Les pages internes ══════════════════════════════════════════════
   L'accueil resume, ces pages developpent. Elles partagent la barre, le
   pied et toute la grammaire ci-dessus ; elles ajoutent seulement ce que
   l'accueil n'avait pas a porter. */

/** La page courante, dans la barre : on doit savoir ou l'on est. */
nav.links a.ici{color:var(--brand-ink); font-weight:650}

/** L'en-tete d'une page interne : plus sobre que le heros d'accueil. */
.phero{padding-block:clamp(38px,5vw,64px) clamp(24px,3vw,36px)}
.phero h1{font-size:clamp(26px,4.2vw,42px); max-width:20ch}

/** Un tableau comparatif : il DEFILE au lieu de se tasser sur telephone. */
.tableau{margin-top:26px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface)}
.tableau table{width:100%; border-collapse:collapse; min-width:620px}
.tableau th{
  text-align:left; font-size:11px; font-weight:650; letter-spacing:.05em;
  text-transform:uppercase; color:var(--faint); padding:12px 16px;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.tableau td{padding:11px 16px; border-bottom:1px solid var(--line-soft); font-size:13.5px; vertical-align:baseline}
.tableau tr:last-child td{border-bottom:0}
.tableau td:first-child,.tableau th:first-child{color:var(--muted); min-width:210px}
.tableau td:not(:first-child),.tableau th:not(:first-child){font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
/* La colonne mise en avant est TEINTEE sur toute sa hauteur : un simple gras
   sur l'en-tete se perd des la quatrieme ligne. */
.tableau .mid{background:var(--brand-soft)}
.tableau td.plein{text-align:left; color:var(--muted); font-style:italic}
.tableau .note{color:var(--faint); font-weight:400; font-size:12px}

/** Questions-reponses : deux colonnes, jamais un accordeon. Un accordeon
    cache les reponses, et ce sont elles qu'on vient lire. */
.qr{display:grid; grid-template-columns:1fr 1fr; gap:22px 34px; margin-top:28px}
@media(max-width:780px){ .qr{grid-template-columns:1fr; gap:18px} }
.qr b{display:block; font-size:14.5px; font-weight:600; letter-spacing:-.01em}
.qr span{display:block; margin-top:5px; color:var(--muted); font-size:14px; line-height:1.55}

/** Un bloc « texte a gauche, ecran a droite », qui s'empile sur telephone. */
.duel{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:34px; align-items:start; margin-top:28px}
@media(max-width:880px){ .duel{grid-template-columns:1fr; gap:20px} }
.duel.inverse{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
@media(max-width:880px){ .duel.inverse{grid-template-columns:1fr} }
.duel h3{font-size:19px; letter-spacing:-.02em}
.duel p{margin-top:9px; color:var(--muted); font-size:14.5px; line-height:1.55}
.duel ul{margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:14px}
.duel li{margin-bottom:5px}

/** Une liste numerotee de reglages ou d'etapes, sans cartes. */
.rangs{margin-top:26px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.rangs > div{background:var(--surface); padding:16px 18px}
.rangs b{display:block; font-size:14.5px; font-weight:600; letter-spacing:-.01em}
.rangs span{display:block; margin-top:4px; color:var(--muted); font-size:13.5px; line-height:1.5}
.rangs code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  background:var(--field); border-radius:5px; padding:1px 6px; color:var(--brand-ink);
}

/** La phrase qui dit A QUI s'adresse une formule, sous son nom. Sans elle,
    trois colonnes de chiffres obligent a deduire soi-meme laquelle est la
    sienne. */
.plan .sous{margin-top:6px; color:var(--muted); font-size:13px; line-height:1.45; min-height:38px}

/** Un temoignage : la phrase d'abord, la signature ensuite et en retrait.
    Le style existe AVANT les temoignages, pour qu'activer la section le jour
    ou l'un d'eux arrive ne demande que de retirer deux lignes de commentaire.
    Pas de guillemets decoratifs geants ni de photo ronde : ce qu'on lit, c'est
    la phrase, et qui l'a dite. */
.temoin{margin:0; border-top:2px solid var(--brand); padding-top:15px}
.temoin blockquote{margin:0; font-size:15.5px; line-height:1.55; letter-spacing:-.01em}
.temoin blockquote::before{content:"« "}
.temoin blockquote::after{content:" »"}
.temoin figcaption{margin-top:12px; font-size:13px}
.temoin figcaption b{display:block; font-weight:600}
.temoin figcaption span{display:block; color:var(--faint); margin-top:1px}

/* ══ Le formulaire de contact ════════════════════════════════════════
   Quatre champs, alignes a gauche comme le reste. Les libelles sont AU-DESSUS
   des champs et non a cote : sur telephone, un libelle a gauche vole la moitie
   de la largeur, et on tape dans un champ de six caracteres. */
.form{max-width:520px; margin-top:28px; display:grid; gap:16px}
.form label{display:block}
.form label > span{display:block; font-size:13px; font-weight:560; margin-bottom:5px}
.form label > em{display:block; font-style:normal; font-size:12.5px; color:var(--faint); margin-bottom:6px}
.form input[type=text],
.form input[type=email],
.form textarea{
  width:100%; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r); padding:10px 12px; font:inherit; font-size:14.5px;
  color:var(--ink); outline:none;
}
.form input:focus,.form textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.form textarea{min-height:120px; resize:vertical; line-height:1.55}
.form .btn{justify-self:start}

/* LE CHAMP PIÈGE.
   Il est vide pour un humain — personne ne le voit — et rempli par la plupart
   des automates, qui lisent le HTML sans afficher la page. Une soumission qui
   le porte est ignoree SANS message d'erreur : prevenir un robot qu'il a ete
   repere lui apprend a contourner le piege au passage suivant.
   `display:none` et non un deport hors ecran : un champ deporte en position
   absolue remonterait au premier ancetre positionne, et le navigateur ferait
   defiler la page pour l'amener a l'ecran s'il recevait le focus. */
.leurre{display:none}

/* ══ L'enveloppe du site intégré ═════════════════════════════════════
   Cette feuille est chargée par un <link> depuis la mise en page du site, et
   NON importée dans le bundle. Ce n'est pas un détail : importée, elle
   deviendrait une feuille globale et ses règles sur `body`, `h1` ou `section`
   s'appliqueraient aussi à l'application, qui est en Tailwind. Le <link>
   n'existe que dans le HTML des pages du site.

   L'application pose `flex min-h-full flex-col` sur le <body> — c'est la mise
   en page racine, commune aux deux. L'enveloppe prend donc la hauteur
   restante, sinon le pied de page remonte sur les pages courtes. */
.site{flex:1; display:flex; flex-direction:column}
.site > footer{margin-top:auto}

/* ══ Le bandeau de consentement ══════════════════════════════════════
   IL N'EXISTE QUE S'IL Y A QUELQUE CHOSE À CONSENTIR. Aujourd'hui le site ne
   dépose qu'un cookie de session, exempté de consentement (article 82 de la
   loi Informatique et Libertés) ; le bandeau reste donc éteint, piloté par
   `TRACEURS_ACTIFS`. Le jour où un pixel publicitaire est installé, on bascule
   ce drapeau et le bandeau apparaît AVANT que le pixel ne se charge.

   « Tout refuser » est un bouton, de même taille et de même rang que
   « Tout accepter ». La CNIL n'admet pas qu'il soit un lien discret sous le
   pavé : refuser doit coûter le même clic qu'accepter. */
.bandeau{
  position:fixed; inset:auto 0 0 0; z-index:60;
  background:var(--surface); border-top:1px solid var(--line-strong);
  box-shadow:0 -12px 34px -22px rgba(0,0,0,.34);
  padding:16px 0 calc(16px + env(safe-area-inset-bottom));
}
.bandeau-in{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center}
.bandeau p{flex:1 1 300px; min-width:0; font-size:13.5px; color:var(--muted); line-height:1.55}
.bandeau p a{color:var(--brand-ink); font-weight:560}
.bandeau .choix{display:flex; flex-wrap:wrap; gap:9px; flex:none}
.bandeau .btn{padding:9px 16px; font-size:13.5px}
@media(max-width:560px){ .bandeau .choix{width:100%} .bandeau .choix .btn{flex:1 1 0} }

/* ══ Le retour du formulaire de contact ══════════════════════════════ */
.envoye{
  border:1px solid var(--good-soft); background:var(--good-soft);
  border-radius:var(--r-lg); padding:20px 22px; max-width:520px; margin-top:28px;
}
.envoye b{display:block; font-size:15.5px; letter-spacing:-.01em; color:var(--good-ink)}
.envoye span{display:block; margin-top:7px; font-size:14px; color:var(--muted); line-height:1.55}
.refus{
  border-left:2px solid var(--danger-soft); background:var(--danger-soft);
  border-radius:var(--r); padding:11px 14px; font-size:13.5px; color:var(--danger-ink);
}
.form .btn[disabled]{opacity:.55; cursor:progress}

/* « Se connecter » : un lien, pas un bouton. Deux boutons côte à côte dans une
   barre font hésiter — on ne sait plus lequel est l'action principale.

   ⚠ IL NE DISPARAÎT JAMAIS, À AUCUNE LARGEUR. Il était masqué sous 900 px,
   comme l'appel à l'action — et sur téléphone la barre n'offrait alors AUCUN
   moyen d'entrer dans l'application. Un client qui tape le domaine depuis son
   mobile se retrouvait devant une brochure, sans porte.

   C'est le bouton qui cède la place sur petit écran, jamais l'entrée : le
   visiteur qui découvre peut faire défiler jusqu'à l'appel à l'action en bas
   de page, le client qui vient travailler n'a pas à chercher. */
.entrer{
  margin-left:16px; flex:none; font-size:14px; font-weight:600;
  color:var(--brand-ink); text-decoration:none; white-space:nowrap;
}
.bar .entrer + .btn{margin-left:12px}
@media(max-width:900px){
  .entrer{margin-left:auto}
  /* La navigation défile sous le lien et venait s'y couper net : « Sourc| ».
     Un peu d'air à droite, et la coupure tombe dans le vide plutôt que contre
     un mot. */
  nav.links{padding-right:10px}
}

/* QUATRE FORMULES au lieu de trois. À 1080 px de large, quatre colonnes font
   250 px : c'est étroit mais lisible, et c'est le prix à payer pour que
   l'offre gratuite soit VUE à côté des payantes plutôt que reléguée dans un
   encadré sous la grille. Elle passe à deux colonnes avant de se tasser. */
.plans.quatre{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){ .plans.quatre{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .plans.quatre{grid-template-columns:1fr} }

/* LES BOUTONS DES FORMULES S'ALIGNENT EN BAS.
   `.plan .btn{margin-top:auto}` était censé les y pousser, mais
   `.plan ul + .btn{margin-top:19px}`, plus spécifique, l'annulait. Tant que
   les quatre listes avaient le même nombre de lignes, ça ne se voyait pas ;
   la Découverte en a une de moins, et son bouton remontait de vingt pixels.
   C'est la LISTE qui prend la place restante — le bouton garde son écart.

   ⚠ PORTÉE `.site` — ET C'EST LA RÈGLE POUR TOUT CE QU'ON AJOUTE ICI.
   Cette feuille sert DEUX consommateurs : le site réel, dont la mise en page
   pose un conteneur `.site`, et les neuf maquettes validées, qui ne l'ont
   pas. Une règle ajoutée sans portée modifie une maquette figée — et c'est
   déjà arrivé deux fois. Les autres ajouts (bandeau, formulaire, lien de
   connexion, quatrième colonne) ne portent que sur des classes absentes des
   maquettes : ils sont inertes de fait. Celle-ci ne l'était pas. */
.site .plan ul{flex:1}

/* ══ Les textes contractuels ════════════════════════════════════════════
   Conditions générales, contrat de sous-traitance. Ce ne sont pas des pages
   de site : ce sont des documents qu'on lit en entier, parfois en diagonale,
   souvent pour y chercher un article précis.

   D'où trois écarts avec le reste du site :
     · la ligne est PLUS COURTE (68ch) — on relit ces textes ligne à ligne ;
     · les titres portent un filet, pour se repérer en faisant défiler ;
     · les listes respirent, parce qu'un alinéa est une obligation distincte
       et qu'un pavé de trois obligations collées se lit comme une seule. */
.legal{max-width:68ch}
.legal h2{
  font-size:17px; font-weight:650; letter-spacing:-.015em;
  margin-top:34px; padding-top:16px; border-top:1px solid var(--line);
}
.legal h2:first-child{margin-top:0; padding-top:0; border-top:0}
.legal p{margin-top:12px; color:var(--muted); font-size:14.5px; line-height:1.65}
.legal p b{color:var(--ink); font-weight:600}
.legal a{color:var(--brand-ink); font-weight:560}
.legal ul{margin:12px 0 0; padding-left:20px; color:var(--muted); font-size:14.5px; line-height:1.65}
.legal li{margin-bottom:9px}
.legal li b{color:var(--ink); font-weight:600}
.legal .tableau{max-width:none}
.legal .maj{
  margin-top:34px; padding-top:16px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--faint);
}

/* ══ LES ÉTAPES DU PARCOURS ═════════════════════════════════════════════
   Essai gratuit, confirmation de formule, création d'espace après paiement.

   Ce ne sont pas des pages de site : ce sont des ÉCRANS D'ACTION. Quelqu'un
   qui les atteint a déjà décidé. Il ne faut donc plus le convaincre, mais lui
   éviter de chercher — d'où une largeur bien plus étroite que le reste du
   site (760 px au lieu de 1080), et rien à l'écran que l'action en cours.

   La page précédente occupait toute la largeur avec deux colonnes lointaines :
   on lisait un formulaire administratif avant d'avoir commencé. */
.etape{padding-block:clamp(36px,5vw,64px)}
.etape-in{max-width:760px}
.etape h1{font-size:clamp(24px,3.6vw,34px); max-width:22ch; margin-top:12px}
.etape .lede{margin-top:12px; max-width:56ch}

/* Le résumé de la formule : un encadré, pas une carte de vente. On ne
   redécore pas ce qui a déjà été choisi. */
.recap{
  margin-top:24px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); padding:18px 20px;
}
.recap-h{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; padding-bottom:12px; border-bottom:1px solid var(--line-soft)}
.recap-h > b{font-size:16px; letter-spacing:-.015em}
.recap-h > span{margin-left:auto; color:var(--muted); font-size:14px; white-space:nowrap}
.recap-h > span b{font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.recap ul{margin:13px 0 0; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.6}
.recap li{margin-bottom:4px}
.recap li b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.recap-note{margin-top:13px; padding-top:12px; border-top:1px solid var(--line-soft); color:var(--muted); font-size:13px; line-height:1.55}
.recap-lien{margin-top:11px; font-size:13.5px}
.recap-lien a{color:var(--brand-ink); font-weight:560}

/* L'essai gratuit : le résumé à gauche, le formulaire à droite. Colonnes
   ÉQUILIBRÉES — le formulaire n'est pas un appendice du résumé. */
.essai{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; margin-top:4px}
@media(max-width:720px){ .essai{grid-template-columns:1fr; gap:18px} }
.essai .recap{margin-top:24px}
.essai .form{margin-top:24px; max-width:none}

.etape-action{margin-top:22px; display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.etape-action .btn{min-width:240px}
.etape-note{color:var(--muted); font-size:13px; max-width:52ch}

/* Ce qui est acquis, après paiement. Des faits, pas des arguments : le
   client a payé, il veut voir que c'est passé. */
.acquis{margin:20px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 20px}
.acquis li{display:flex; align-items:baseline; gap:7px; color:var(--good-ink); font-size:13.5px; font-weight:560}
.acquis li::before{content:"✓"; font-weight:700}

/* La réassurance : sobre, et uniquement ce qui est vrai. */
.rassure{margin:22px 0 0; padding:0; list-style:none; display:grid; gap:6px}
.rassure li{display:flex; gap:9px; align-items:baseline; color:var(--faint); font-size:12.5px; line-height:1.5}
.rassure li::before{content:"·"; font-weight:700; flex:none}