:root {
    --nuit:      #0C0D10;
    --nuit-2:    #16181C;
    --nuit-3:    #131519;
    --blanc:     #FFFFFF;
    --creme:     #F7F7F6;
    --encre:     #111214;
    --gris:      #5E6167;
    --gris-clair:#8D9096;
    --bord:      #E6E6E4;
    --bord-nuit: #26292E;
    --vert:      #0E9F6E;
    --vert-fonce:#05674A;
    --vert-pale: #E8F6F0;
    --craie:     #F2C14E;
    --fond:      var(--blanc);
    --surface:   var(--creme);
    --texte:     var(--encre);
    --texte-2:   var(--gris);
    --trait:     var(--bord);
    --dsp: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --txt: "Public Sans", -apple-system, "Segoe UI", Helvetica, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: #FFFFFF; color: var(--texte); font-family: var(--txt); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  @media (max-width: 620px) { .wrap { padding: 0 24px; } body { font-size: 16px; } }

  h1, h2, h3, .dsp { font-family: var(--dsp); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; margin: 0; }
  .eyebrow { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }

  /* Un display explicite dans la feuille bat le display:none du navigateur.
     On tranche une fois pour toutes : masqué veut dire masqué. */
  [hidden] { display: none !important; }


  /* ── Les notes : un bouton qui ne se cherche pas ────────── */
  .notes-bouton { position: fixed; right: 22px; bottom: 22px; z-index: 80;
    display: flex; align-items: center; gap: 10px; font: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer; background: var(--encre); color: #FFFFFF; border: none;
    border-radius: 999px; padding: 14px 22px; box-shadow: 0 16px 40px -14px rgba(17,18,20,.55); }
  .notes-bouton:hover { background: var(--vert-fonce); }
  .notes-bouton:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }
  .notes-ico { font-size: 16px; }
  .notes-compte { background: var(--vert); color: #FFFFFF; border-radius: 999px;
    min-width: 21px; padding: 1px 7px; font-family: var(--mono); font-size: 13.5px; text-align: center; }
  @media (max-width: 620px) { .notes-bouton { right: 14px; bottom: 14px; padding: 12px 18px; }
    .notes-lib { display: none; } }

  .notes-tiroir { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 100vw); z-index: 90;
    background: #FFFFFF; border-left: 1px solid var(--trait); display: flex; flex-direction: column;
    box-shadow: -30px 0 70px -40px rgba(17,18,20,.5); }
  .notes-tiroir header { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid var(--trait); }
  .notes-tiroir header b { display: block; font-family: var(--dsp); font-size: 20px;
    letter-spacing: -0.02em; }
  .notes-tiroir header span { display: block; margin-top: 4px; font-family: var(--mono);
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair); }
  .notes-fermer { font: inherit; font-size: 26px; line-height: 1; cursor: pointer; background: none;
    border: none; color: var(--gris); padding: 0 4px; }
  .notes-fermer:hover { color: var(--encre); }

  #notes-form { padding: 20px 24px; border-bottom: 1px solid var(--trait);
    display: flex; flex-direction: column; gap: 8px; }
  #notes-form label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); margin-top: 6px; }
  #notes-form select, #notes-form textarea { font: inherit; font-size: 15px; width: 100%;
    border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; background: #FFFFFF;
    color: var(--encre); }
  #notes-form textarea { resize: vertical; line-height: 1.5; }
  #notes-form select:focus-visible, #notes-form textarea:focus-visible,
  .notes-envoyer:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 1px; }
  .notes-envoyer { font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 12px;
    background: var(--vert); color: #FFFFFF; border: none; border-radius: 10px; padding: 12px 18px; }
  .notes-envoyer:hover { background: var(--vert-fonce); color: #FFFFFF; }
  .notes-envoyer[disabled] { opacity: .5; cursor: default; }
  .notes-aide { margin: 10px 0 0; font-size: 13.5px; color: var(--gris); min-height: 1.2em; }
  .notes-aide.souci { color: #9A3412; }

  .notes-liste { list-style: none; margin: 0; padding: 14px 24px 28px; overflow-y: auto; flex: 1; }
  .notes-liste li { padding: 15px 0; border-bottom: 1px solid var(--trait); }
  .notes-liste li:last-child { border-bottom: none; }
  .notes-liste .ou { font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--vert); }
  .notes-liste p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--texte-2);
    white-space: pre-wrap; }
  .notes-liste .qui { margin-top: 7px; font-size: 13px; color: var(--gris-clair); }
  .notes-vide { padding: 22px 24px; font-size: 15px; color: var(--gris); }

  /* ── Barre ────────────────────────────────────────────── */
  .barre { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9);
    backdrop-filter: blur(14px); border-bottom: 1px solid var(--bord); }
  .barre .wrap { display: flex; align-items: center; justify-content: space-between;
    height: 76px; gap: 20px; }
  @media (max-width: 560px) { .barre .wrap { height: 66px; } }
  .logo { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
  .logo img { display: block; height: 42px; width: auto; }
  @media (max-width: 560px) { .logo img { height: 34px; } }

  .liens { display: flex; gap: 28px; font-size: 14.5px; white-space: nowrap; }
  .liens a { color: var(--gris); text-decoration: none; transition: color .15s; }
  .liens a:hover, .liens a:focus-visible { color: var(--encre); }
  @media (max-width: 1080px) { .liens { gap: 22px; font-size: 14px; } }
  @media (max-width: 940px)  { .liens { display: none; } }

  .barre-droite { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
  .cta-barre { background: var(--vert); color: #FFFFFF; font-weight: 600; font-size: 14.5px;
    padding: 10px 17px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
  .cta-barre:hover { background: #12B981; }
  /* Le bouton était purement masqué sous 640 px : sur un téléphone, plus aucun
     appel à l'action permanent, et c'est là que le déroulé est le plus long.
     Il rétrécit au lieu de disparaître. */
  @media (max-width: 640px) {
    .cta-barre { font-size: 13.5px; padding: 9px 14px; }
    .cta-plus { display: none; }
  }
  @media (max-width: 380px) { .cta-barre { display: none; } }

  /* Le menu du petit écran : ouvert et fermé sans JavaScript. */
  .menu { display: none; position: relative; }
  @media (max-width: 940px) { .menu { display: block; } }
  .menu > summary { list-style: none; cursor: pointer; width: 44px; height: 44px;
    border: 1px solid var(--trait); border-radius: 11px; display: grid; place-items: center;
    background: #FFFFFF; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }
  .menu > summary span { display: block; width: 18px; height: 2px; background: var(--encre);
    border-radius: 2px; position: relative; }
  .menu > summary span::before, .menu > summary span::after { content: ""; position: absolute;
    left: 0; width: 18px; height: 2px; background: var(--encre); border-radius: 2px;
    transition: transform .2s ease, top .2s ease; }
  .menu > summary span::before { top: -6px; }
  .menu > summary span::after  { top: 6px; }
  .menu[open] > summary span { background: transparent; }
  .menu[open] > summary span::before { top: 0; transform: rotate(45deg); }
  .menu[open] > summary span::after  { top: 0; transform: rotate(-45deg); }
  .menu-liens { position: absolute; right: 0; top: calc(100% + 12px); min-width: 250px;
    background: #FFFFFF; border: 1px solid var(--trait); border-radius: 16px; padding: 10px;
    display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 34px 70px -34px rgba(17,18,20,.42); }
  .menu-liens a { padding: 13px 14px; border-radius: 10px; text-decoration: none;
    color: var(--texte-2); font-size: 16px; }
  .menu-liens a:hover, .menu-liens a:focus-visible { background: var(--creme); color: var(--encre); }
  .menu-liens .menu-cta { margin-top: 6px; background: var(--vert); color: #FFFFFF;
    font-weight: 600; text-align: center; }
  .menu-liens .menu-cta:hover { background: var(--vert-fonce); color: #FFFFFF; }

  /* ── Hero ─────────────────────────────────────────────── */
  .hero { background: #FFFFFF; color: var(--encre); position: relative; overflow: hidden; }
  .hero::before {
    content: ""; position: absolute; inset: -30% -10% 20% 30%;
    background: radial-gradient(48% 46% at 62% 42%, rgba(14,159,110,.10), transparent 70%);
    pointer-events: none;
  }
  .hero .wrap { position: relative; display: flex; flex-direction: column; gap: 52px; padding: 84px 28px 92px; }
  @media (max-width: 980px) { .hero .wrap { gap: 38px; padding: 58px 24px 64px; } }
  .hero-haut { max-width: 68ch; }

  .hero .eyebrow { color: var(--vert); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
  .hero .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--vert); }
  .hero h1 { font-size: clamp(42px, 6.6vw, 82px); font-weight: 600; margin-bottom: 22px; max-width: 16ch; }
  .hero h1 em { font-style: normal; color: var(--vert); }
  .hero .sous { font-size: clamp(18px, 2.2vw, 22px); color: var(--gris); max-width: 52ch; margin-bottom: 32px; }
  .hero .sous b { color: var(--encre); font-weight: 600; }
  .boutons { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .btn-1 { background: var(--vert); color: #FFFFFF; font-weight: 700; font-size: 16px; padding: 15px 26px; border-radius: 11px; text-decoration: none; box-shadow: 0 10px 30px -12px rgba(14,159,110,.8); transition: transform .15s, background .15s; }
  .btn-1:hover { background: #14B981; transform: translateY(-1px); }
  .btn-1.blanc { background: #FFFFFF; color: var(--vert-fonce); box-shadow: 0 12px 30px -14px rgba(0,0,0,.45); }
  .btn-1.blanc:hover { background: #F2FBF7; }
  .btn-2 { color: var(--encre); font-weight: 500; font-size: 16px; padding: 15px 20px; border-radius: 11px; text-decoration: none; border: 1px solid var(--bord); transition: border-color .15s, background .15s; }
  .btn-2:hover { border-color: var(--gris-clair); background: var(--creme); }
  .sous-boutons { margin-top: 18px; font-size: 14px; color: var(--gris); }

  /* ── Le produit, mis en scène ─────────────────────────── */
  .scene { position: relative; }
  .app {
    background: #FFFFFF; border: 1px solid var(--bord); border-radius: 20px;
    box-shadow: 0 40px 80px -42px rgba(17,18,20,.28), 0 3px 12px -6px rgba(17,18,20,.10);
    overflow: hidden;
  }
  .app-tete { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-bottom: 1px solid var(--bord); background: var(--creme); }
  .app-tete .jour { font-family: var(--mono); font-size: 12.5px; color: var(--gris); letter-spacing: 0.06em; }
  .pastilles { display: flex; gap: 6px; }
  .pastilles i { width: 9px; height: 9px; border-radius: 50%; background: #DCDDDB; display: block; }
  .app-corps { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 15px; }

  .bulle { display: flex; gap: 12px; }
  .ava { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(145deg, var(--vert), var(--vert-fonce)); flex: 0 0 auto; display: grid; place-items: center; font-family: var(--dsp); font-size: 13px; font-weight: 700; color: #042016; }
  .bulle .dit { color: #D5D7DA; font-size: 15.5px; }
  .bulle .dit strong { color: #fff; font-weight: 600; }
  .bulle ul { margin: 11px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .bulle li { display: flex; gap: 10px; font-size: 14.5px; color: #A4A7AD; align-items: baseline; }
  .bulle li b { color: #fff; font-weight: 500; }
  .puce { width: 5px; height: 5px; border-radius: 50%; background: var(--vert); flex: 0 0 auto; transform: translateY(-2px); }

  .valider { border: 1px solid #33422E; background: #171F16; border-radius: 13px; overflow: hidden; }
  .valider-tete { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #263021; }
  .valider-tete span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--craie); }
  .valider-tete i { width: 6px; height: 6px; border-radius: 50%; background: var(--craie); display: block; }
  .valider-corps { padding: 13px 14px; display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-size: 14px; }
  .valider-corps dt { color: #7A7E85; }
  .valider-corps dd { margin: 0; text-align: right; font-family: var(--mono); color: #EAF0ED; font-variant-numeric: tabular-nums; }
  .valider-pied { display: flex; gap: 9px; padding: 0 14px 14px; }
  .v-ok { flex: 1; text-align: center; background: var(--vert); color: #FFFFFF; font-weight: 700; font-size: 14px; padding: 10px; border-radius: 9px; }
  .v-non { text-align: center; color: #A4A7AD; font-size: 14px; padding: 10px 16px; border: 1px solid var(--bord-nuit); border-radius: 9px; }

  .flottant {
    position: absolute; right: -14px; bottom: -26px; width: 216px;
    background: var(--vert); color: #FFFFFF; border-radius: 13px; padding: 13px 15px;
    box-shadow: 0 24px 46px -20px rgba(14,159,110,.7); border: none;
  }
  .flottant .t { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(4,32,22,.65); margin-bottom: 7px; }
  .flottant .m { font-family: var(--dsp); font-size: 25px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .flottant .s { font-size: 13px; color: rgba(4,32,22,.75); margin-top: 2px; }
  @media (max-width: 980px) { .flottant { position: static; width: auto; margin-top: 16px; } }

  /* ── Bande de rupture ─────────────────────────────────── */
  .bande { background: var(--creme); color: var(--gris); border-bottom: 1px solid var(--bord); }
  .bande .wrap { display: flex; gap: 40px; padding: 26px 28px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .bande p { margin: 0; font-size: 15px; }
  .bande b { color: var(--encre); font-weight: 600; }

  /* ── Sections ─────────────────────────────────────────── */
  section.bloc { padding: 96px 0; }
  @media (max-width: 720px) { section.bloc { padding: 62px 0; } }
  .tete { max-width: 62ch; margin-bottom: 52px; }
  .tete .eyebrow { color: var(--vert); margin-bottom: 16px; }
  .tete h2 { font-size: clamp(30px, 4.3vw, 46px); margin-bottom: 16px; }
  .tete p { color: var(--texte-2); font-size: 18px; margin: 0; }

  /* La journée */
  .journee { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--trait); }
  @media (max-width: 900px) { .journee { grid-template-columns: 1fr; } }
  .etape { padding: 26px 22px 30px; border-right: 1px solid var(--trait); position: relative; }
  .etape:last-child { border-right: none; }
  @media (max-width: 900px) { .etape { border-right: none; border-bottom: 1px solid var(--trait); } .etape:last-child { border-bottom: none; } }
  .etape::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--vert); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
  .etape:hover::before { transform: scaleX(1); }
  .etape .h { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--vert); letter-spacing: 0.04em; margin-bottom: 14px; }
  .etape h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -0.02em; }
  .etape p { margin: 0; font-size: 15px; color: var(--texte-2); }
  .etape .cite { display: block; margin-top: 12px; font-family: var(--mono); font-size: 14.5px; color: var(--texte); background: var(--surface); border-left: 2px solid var(--vert); padding: 8px 10px; border-radius: 0 6px 6px 0; }

  /* Fonctions */
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; padding: 58px 0; border-top: 1px solid var(--trait); }
  .duo:first-of-type { border-top: none; }
  .duo.inverse .texte { order: 2; }
  @media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 30px; padding: 40px 0; } .duo.inverse .texte { order: 0; } }
  .duo h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 14px; }
  .duo p { color: var(--texte-2); font-size: 17px; margin: 0 0 18px; }
  .duo .detail { font-family: var(--mono); font-size: 14.5px; color: var(--texte-2); border-top: 1px solid var(--trait); padding-top: 14px; }

  .doc { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 22px 24px;
         box-shadow: 0 18px 40px -32px rgba(0,0,0,.5); }
  .doc-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--trait); padding-bottom: 13px; margin-bottom: 4px; }
  .doc-tete b { font-family: var(--dsp); font-size: 19px; }
  .doc-tete span { font-family: var(--mono); font-size: 13px; color: var(--texte-2); }
  table { width: 100%; border-collapse: collapse; }
  th { text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-2); padding: 12px 0 8px; }
  td { padding: 9px 0; border-top: 1px solid var(--trait); font-size: 14.5px; }
  td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tot { display: flex; justify-content: flex-end; gap: 28px; padding-top: 14px; margin-top: 4px; border-top: 2px solid var(--texte); font-family: var(--dsp); font-size: 18px; font-weight: 700; }
  .tot span:last-child { font-variant-numeric: tabular-nums; }

  .chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
  .chiffre { background: var(--surface); padding: 20px 22px; }
  .chiffre .t { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-2); }
  .chiffre .v { font-family: var(--dsp); font-size: 27px; font-weight: 700; letter-spacing: -0.03em; margin-top: 7px; font-variant-numeric: tabular-nums; }
  .chiffre .v.ok { color: var(--vert); }
  .chiffre .v.att { color: #C2410C; }
  .barre-jauge { height: 5px; border-radius: 3px; background: var(--trait); margin-top: 12px; overflow: hidden; }
  .barre-jauge i { display: block; height: 100%; background: var(--vert); border-radius: 3px; }

  /* Tarifs */
  .tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 860px) { .tarifs { grid-template-columns: 1fr; } }
  .plan { border: 1px solid var(--trait); border-radius: 16px; padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); }
  .plan.phare { border-color: var(--vert); box-shadow: 0 20px 50px -28px rgba(14,159,110,.6); position: relative; }
  .plan.phare::after { content: "Recommandé"; position: absolute; top: -11px; left: 26px; background: var(--vert); color: #FFFFFF; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; }
  .plan .nom { font-family: var(--dsp); font-size: 19px; font-weight: 600; }
  .plan .prix { font-family: var(--dsp); font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
  .plan .prix small { font-family: var(--txt); font-size: 15px; font-weight: 400; color: var(--texte-2); letter-spacing: 0; }
  .plan ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
  .plan li { font-size: 15px; display: flex; gap: 10px; align-items: baseline; color: var(--texte-2); }
  .plan li::before { content: "✓"; color: var(--vert); font-weight: 700; }
  .plan .choisir { margin-top: auto; padding-top: 18px; }
  .plan .choisir a { display: block; text-align: center; padding: 12px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid var(--trait); color: var(--texte); }
  .plan.phare .choisir a { background: var(--vert); color: #FFFFFF; border-color: var(--vert); }

  /* Appel final */
  .final { background: var(--vert-fonce); color: #FFFFFF; border-radius: 24px;
    padding: 62px 56px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
  @media (max-width: 900px) { .final { grid-template-columns: 1fr; gap: 34px; padding: 46px 30px; } }
  @media (max-width: 620px) { .final { padding: 38px 24px; border-radius: 18px; } }
  .final .eyebrow { color: var(--vert-pale); margin-bottom: 14px; }
  .final .eyebrow::before { background: var(--vert-pale); }
  .final h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 16px; }
  .final-txt p { margin: 0; font-size: 18px; color: rgba(255,255,255,.8); max-width: 42ch; }
  .final-suite { list-style: none; margin: 0 0 30px; padding: 0;
    display: flex; flex-direction: column; gap: 18px; }
  .final-suite li { display: flex; gap: 15px; align-items: flex-start;
    font-size: 16.5px; line-height: 1.55; color: rgba(255,255,255,.8); }
  .final-suite span { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.34); display: grid; place-items: center;
    font-family: var(--mono); font-size: 13.5px; color: var(--vert-pale); }
  .final-suite b { color: #FFFFFF; font-weight: 600; }
  .final-cta { display: inline-block; background: #FFFFFF; color: var(--vert-fonce);
    font-weight: 700; font-size: 17px; padding: 15px 30px; border-radius: 12px;
    text-decoration: none; }
  .final-cta:hover { background: var(--vert-pale); }
  .final-cta:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
  .final-fin { margin: 15px 0 0; font-size: 14.5px; color: rgba(255,255,255,.62); }


  footer { padding: 40px 0 56px; border-top: 1px solid var(--trait); margin-top: 90px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14.5px; color: var(--texte-2); }
  footer a { color: var(--texte-2); }
  a:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; border-radius: 4px; }








  /* ── Le cadre du hero : un clip, pas une animation fragile ─ */
  .cadre {
    background: #FFFFFF; border: 1px solid var(--bord); border-radius: 20px; overflow: hidden;
    box-shadow: 0 50px 100px -48px rgba(17,18,20,.45), 0 4px 14px -8px rgba(17,18,20,.12);
  }
  .cadre-tete {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--bord); background: var(--creme);
  }
  .cadre-tete .jour { font-family: var(--mono); font-size: 13px; color: var(--gris); letter-spacing: .06em; }
  .cadre video { width: 100%; height: auto; display: block; background: #FFFFFF; }
  .scene { width: 100%; }
  .sous-clip { margin: 16px 2px 0; font-size: 15px; color: var(--gris); }



  /* ── La gestion de chantier, le vrai sujet ─────────────── */
  .chantier { padding: 100px 0 96px; border-top: 1px solid var(--trait); }
  @media (max-width: 720px) { .chantier { padding: 62px 0 58px; } }
  .ch-tete { max-width: 58ch; margin-bottom: 44px; }
  .ch-tete .eyebrow { color: var(--vert); margin-bottom: 16px; }
  .ch-tete h2 { font-size: clamp(34px, 5vw, 58px); margin-bottom: 18px; }
  .ch-sous { font-size: 19px; color: var(--texte-2); margin: 0; }
  .suite { list-style: none; margin: 0 0 58px; padding: 0 0 0 30px; max-width: 74ch;
    border-left: 2px solid var(--vert-pale); }
  .suite li { position: relative; padding: 0 0 26px; font-size: 18px; line-height: 1.6;
    color: var(--texte-2); }
  .suite li:last-child { padding-bottom: 0; }
  .suite li::before { content: ""; position: absolute; left: -37px; top: 11px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--vert-pale); }
  .suite.coule li::before { animation: pointPose .4s cubic-bezier(.3,1.4,.5,1) forwards; }
  .suite.coule li:nth-child(1)::before { animation-delay: .05s; }
  .suite.coule li:nth-child(2)::before { animation-delay: .17s; }
  .suite.coule li:nth-child(3)::before { animation-delay: .29s; }
  .suite.coule li:nth-child(4)::before { animation-delay: .41s; }
  .suite.coule li:nth-child(5)::before { animation-delay: .53s; }
  .suite.coule li:nth-child(6)::before { animation-delay: .65s; }
  @keyframes pointPose { to { background: var(--vert); transform: scale(1.25); } }
  .suite b { color: var(--encre); font-family: var(--dsp); font-weight: 600; font-size: 19.5px;
    letter-spacing: -0.015em; }
  @media (max-width: 620px) { .suite { padding-left: 22px; } .suite li { font-size: 16.5px; }
    .suite li::before { left: -28px; } .suite b { font-size: 18px; } }
  .ch-v { margin: 0; }
  .ch-v video { width: 100%; display: block; border-radius: 20px; border: 1px solid var(--trait);
    box-shadow: 0 50px 100px -56px rgba(17,18,20,.45); }
  .ch-v figcaption { margin-top: 14px; font-size: 14.5px; color: var(--gris); }
  .ch-note { margin: 0 0 54px; font-size: 17.5px; color: var(--vert-fonce); max-width: 72ch; }
  .ch-note b { font-weight: 600; }

  /* ── (ancien bloc dictée, remplacé) ────────────────────── */


  /* ── Le devis, dans la rubrique 02 ─────────────────────── */
  .devis-vrai { border: 1px solid var(--trait); border-radius: 20px; padding: 32px 36px 28px;
    background: #FFFFFF; box-shadow: 0 50px 100px -56px rgba(17,18,20,.45);
    font-size: 14px; line-height: 1.5; }
  .devis-vrai header { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap;
    border-bottom: 2px solid var(--encre); padding-bottom: 16px; }
  .devis-vrai header b { font-family: var(--dsp); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
  .devis-vrai header p { margin: 4px 0 0; color: var(--gris); font-size: 12.5px; }
  .devis-vrai .emet { text-align: right; }
  .devis-vrai .emet b { font-size: 16px; }
  .devis-vrai .client { padding: 14px 0; border-bottom: 1px solid var(--trait); color: var(--gris); }
  .devis-vrai .client span { display: block; font-family: var(--mono); font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair); margin-bottom: 4px; }
  .devis-vrai .client b { color: var(--encre); }
  /* Le tableau garde ses colonnes : c'est lui qui défile, pas la page. */
  .devis-tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .devis-vrai table { width: 100%; min-width: 340px; border-collapse: collapse; }
  @media (max-width: 620px) {
    .devis-vrai { padding: 22px 18px 20px; }
    .devis-vrai header { gap: 14px; }
    .devis-vrai .emet { text-align: left; }
  }
  .devis-vrai th { text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair);
    padding: 16px 0 8px; border-bottom: 1px solid var(--trait); }
  .devis-vrai td { padding: 11px 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
  .devis-vrai .n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
    white-space: nowrap; padding-left: 16px; }
  .devis-vrai .totaux { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 16px; }
  .devis-vrai .totaux div { display: flex; gap: 30px; }
  .devis-vrai .totaux b { font-family: var(--mono); font-variant-numeric: tabular-nums;
    min-width: 108px; text-align: right; font-weight: 500; }
  .devis-vrai .totaux .ttc { font-size: 17px; font-weight: 700; border-top: 1px solid var(--encre);
    padding-top: 9px; margin-top: 4px; }
  .devis-vrai .totaux .ttc b { font-weight: 700; }
  .devis-vrai footer { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--trait); }
  .devis-vrai footer p { margin: 0; font-size: 11.5px; color: var(--gris); line-height: 1.55; }
  .devis-vrai .signer { display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    margin-top: 16px; padding-top: 15px; border-top: 1px dashed var(--trait); flex-wrap: wrap; }
  .devis-vrai .signer span { font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gris-clair); }
  .devis-vrai .signer i { font-style: normal; font-family: var(--mono); font-size: 14px; font-weight: 700;
    color: var(--vert-fonce); background: var(--vert-pale); padding: 7px 13px; border-radius: 9px; }


  /* ── Le devis s'écrit ligne à ligne ────────────────────── */
  /* Sans JavaScript la classe .jsok n'existe pas : tout reste visible. */
  .devis-etat { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; min-height: 2.9em;
    font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gris-clair); }
  .devis-etat i { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); flex: 0 0 auto;
    animation: battre 1.1s ease-in-out infinite; }
  @keyframes battre { 0%,100% { opacity: 1; } 50% { opacity: .22; } }
  .devis-vrai.fini .devis-etat { color: var(--vert-fonce); }
  .devis-vrai.fini .devis-etat i { animation: none; }
  .jsok .devis-vrai tbody tr,
  .jsok .devis-vrai .totaux div,
  .jsok .devis-vrai footer { opacity: 0; }
  .devis-vrai.ecrit tbody tr { animation: ligneEcrite .44s cubic-bezier(.22,.8,.3,1) forwards; }
  .devis-vrai.ecrit tbody tr:nth-child(1) { animation-delay: .35s; }
  .devis-vrai.ecrit tbody tr:nth-child(2) { animation-delay: .72s; }
  .devis-vrai.ecrit tbody tr:nth-child(3) { animation-delay: 1.09s; }
  .devis-vrai.ecrit tbody tr:nth-child(4) { animation-delay: 1.46s; }
  .devis-vrai.ecrit tbody tr:nth-child(5) { animation-delay: 1.83s; }
  .devis-vrai.ecrit .totaux div { animation: ligneEcrite .4s cubic-bezier(.22,.8,.3,1) forwards; }
  .devis-vrai.ecrit .totaux div:nth-child(1) { animation-delay: 2.26s; }
  .devis-vrai.ecrit .totaux div:nth-child(2) { animation-delay: 2.40s; }
  .devis-vrai.ecrit .totaux div:nth-child(3) { animation-delay: 2.56s; }
  .devis-vrai.ecrit .totaux div:nth-child(4) { animation-delay: 2.72s; }
  .devis-vrai.ecrit footer { animation: ligneEcrite .5s ease forwards; animation-delay: 3.0s; }
  @keyframes ligneEcrite { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  /* Le trait vert qui court sous la ligne en cours d'écriture. */
  .devis-vrai.ecrit tbody td:first-child { position: relative; }
  .devis-vrai.ecrit tbody td:first-child::after { content: ""; position: absolute; left: 0; bottom: 0;
    height: 2px; width: 100%; background: var(--vert); transform-origin: left; transform: scaleX(0); }
  .devis-vrai.ecrit tbody tr:nth-child(1) td:first-child::after { animation: traitCourt .55s ease forwards .35s; }
  .devis-vrai.ecrit tbody tr:nth-child(2) td:first-child::after { animation: traitCourt .55s ease forwards .72s; }
  .devis-vrai.ecrit tbody tr:nth-child(3) td:first-child::after { animation: traitCourt .55s ease forwards 1.09s; }
  .devis-vrai.ecrit tbody tr:nth-child(4) td:first-child::after { animation: traitCourt .55s ease forwards 1.46s; }
  .devis-vrai.ecrit tbody tr:nth-child(5) td:first-child::after { animation: traitCourt .55s ease forwards 1.83s; }
  @keyframes traitCourt { 0% { transform: scaleX(0); opacity: 1; }
                          62% { transform: scaleX(1); opacity: 1; }
                          100% { transform: scaleX(1); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .jsok .devis-vrai tbody tr, .jsok .devis-vrai .totaux div,
    .jsok .devis-vrai footer { opacity: 1 !important; }
    .devis-vrai tbody tr, .devis-vrai .totaux div, .devis-vrai footer,
    .devis-vrai td::after, .devis-etat i, .direct-fil .msg { animation: none !important; transform: none !important; }
    .suite li::before { animation: none !important; background: var(--vert) !important;
                        transform: none !important; }
  }




  /* ── La douleur d'abord, la réponse ensuite ────────────── */
  .mal { display: block; font-size: 15.5px; line-height: 1.5; color: var(--gris-clair);
    margin-bottom: 6px; }
  .mal::before { content: "\2014\00a0"; }



  /* ── Les graphiques ────────────────────────────────────── */
  .graphes { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin: 46px 0 8px; }
  @media (max-width: 860px) { .graphes { grid-template-columns: 1fr; gap: 26px; } }
  .graphe { margin: 0; border: 1px solid var(--trait); border-radius: 18px; padding: 24px 26px 22px;
    background: #FFFFFF; }
  .graphe figcaption { display: flex; justify-content: space-between; align-items: flex-start;
    gap: 18px; margin-bottom: 20px; }
  .g-t { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gris); padding-top: 6px; }
  .g-v { text-align: right; font-family: var(--dsp); font-size: 26px; font-weight: 600;
    letter-spacing: -0.02em; white-space: nowrap; }
  .g-v em { display: block; font-family: var(--corps); font-style: normal; font-size: 13.5px;
    font-weight: 400; color: var(--gris); margin-top: 3px; }
  .graphe svg { width: 100%; height: auto; display: block; }
  .g-axe { stroke: var(--trait); stroke-width: 1; }
  .g-barres rect { fill: var(--vert-pale); transition: height 1s cubic-bezier(.22,.8,.3,1),
    y 1s cubic-bezier(.22,.8,.3,1); }
  .g-barres rect.fort { fill: var(--vert); }
  .g-lab text { font-family: var(--mono); font-size: 12.5px; fill: var(--gris-clair);
    text-anchor: middle; letter-spacing: .08em; }

  .g-marges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
  .g-marges li { display: grid; grid-template-columns: 9ch 1fr 5ch; align-items: center; gap: 14px;
    font-size: 16px; }
  .g-n { color: var(--texte-2); }
  .g-jauge { height: 10px; border-radius: 6px; background: var(--creme); overflow: hidden; }
  .g-jauge i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--vert);
    transition: width 1.1s cubic-bezier(.22,.8,.3,1); }
  .g-marges .bas .g-jauge i { background: #D97706; }
  .g-marges b { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right;
    font-weight: 600; }
  .g-marges .bas b { color: #9A6A00; }
  .g-note { margin: 20px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--gris); }
  @media (prefers-reduced-motion: reduce) {
    .g-barres rect, .g-jauge i { transition: none; }
  }

  .mini-graphe { padding: 14px 14px 8px; }
  .mini-graphe svg { width: 100%; height: auto; display: block; }
  .g-marges.g-dans-carte { padding: 14px; gap: 13px; }
  .g-marges.g-dans-carte li { font-size: 14.5px; grid-template-columns: 8ch 1fr 5ch; }


  /* ── Gestion documentaire ──────────────────────────────── */
  .docs { padding: 88px 0 82px; }
  @media (max-width: 720px) { .docs { padding: 56px 0 52px; } }
  .docs-tete { max-width: 60ch; margin-bottom: 44px; }
  .docs-tete .eyebrow { color: var(--vert); margin-bottom: 14px; }
  .docs-tete h2 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 16px; }
  .docs-tete > p { font-size: 18.5px; color: var(--texte-2); margin: 0; }

  /* ── Finances ──────────────────────────────────────────── */
  .finances { padding: 88px 0 82px; }
  @media (max-width: 720px) { .finances { padding: 56px 0 52px; } }
  .fin-tete { max-width: 58ch; margin-bottom: 44px; }
  .fin-tete .eyebrow { color: var(--vert); margin-bottom: 14px; }
  .fin-tete h2 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 16px; }
  .fin-tete > p { font-size: 18.5px; color: var(--texte-2); margin: 0; }
  .fin-tete em, .suite em { font-style: italic; }
  .fin-note { margin: 38px 0 0; padding-top: 18px; border-top: 1px solid var(--trait);
    font-size: 14px; line-height: 1.65; color: var(--gris); max-width: 90ch; }
  .fin-note b { color: var(--texte-2); font-weight: 600; }

  /* Le trajet du ticket, qui se joue à l'entrée dans l'écran. */
  .trajet { position: relative; margin-top: 8px; padding: 30px 0 4px; }
  .trajet-t { margin: 0 0 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); }
  .trajet-pas { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  @media (max-width: 860px) { .trajet-pas { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .trajet-pas { grid-template-columns: 1fr; } }
  .trajet-pas li { background: #FFFFFF; border: 1px solid var(--trait); border-radius: 16px;
    padding: 20px 20px 22px; }
  .jsok .trajet-pas li { opacity: .38; transition: opacity .45s ease, border-color .45s ease,
    box-shadow .45s ease, transform .45s cubic-bezier(.22,.8,.3,1); }
  .jsok .trajet-pas li.passe { opacity: 1; border-color: var(--vert);
    box-shadow: 0 18px 40px -26px rgba(14,159,110,.9); transform: translateY(-3px); }
  .trajet-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
    background: var(--creme); color: var(--gris); margin-bottom: 14px; transition: background .4s, color .4s; }
  .trajet-pas li.passe .trajet-ico { background: var(--vert); color: #FFFFFF; }
  .trajet-pas li b { display: block; font-family: var(--dsp); font-size: 17.5px; font-weight: 600;
    letter-spacing: -0.015em; margin-bottom: 7px; }
  .trajet-d { display: block; font-size: 14.5px; line-height: 1.5; color: var(--texte-2); }
  .trajet-rail { position: absolute; left: 0; right: 0; top: calc(30px + 24px + 38px);
    height: 2px; background: var(--trait); z-index: 0; }
  .trajet-rail i { display: block; height: 100%; width: 0; background: var(--vert);
    transition: width 2.6s cubic-bezier(.3,.9,.4,1); }
  .trajet.coule .trajet-rail i { width: 100%; }
  @media (max-width: 860px) { .trajet-rail { display: none; } }
  @media (prefers-reduced-motion: reduce) {
    .jsok .trajet-pas li { opacity: 1 !important; transform: none !important; }
    .trajet-rail i { transition: none; width: 100% !important; }
  }

  /* ── Communication centralisée ─────────────────────────── */
  .fil-com { padding: 88px 0 82px; border-top: 1px solid var(--trait); }
  @media (max-width: 720px) { .fil-com { padding: 56px 0 52px; } }
  .com-tete { max-width: 58ch; margin-bottom: 44px; }
  .com-tete .eyebrow { color: var(--vert); margin-bottom: 14px; }
  .com-tete h2 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 18px; }
  .com-mal { font-size: 18px; line-height: 1.62; color: var(--texte-2); margin: 0; }
  .com-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; }
  @media (max-width: 820px) { .com-cols { grid-template-columns: 1fr; gap: 34px; } }
  .com-p { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--vert); margin-bottom: 18px;
    padding-bottom: 12px; border-bottom: 2px solid var(--encre); }
  .com-bloc ul { list-style: none; margin: 0; padding: 0; }
  .com-bloc li { padding: 16px 0; border-bottom: 1px solid var(--trait);
    font-size: 16.5px; line-height: 1.55; color: var(--texte-2); }
  .com-bloc li:last-child { border-bottom: none; }
  .com-bloc b { color: var(--encre); font-weight: 600; }
  .com-fin { margin: 40px 0 0; font-size: 18px; line-height: 1.55; color: var(--vert-fonce);
    max-width: 72ch; }
  .com-fin b { font-weight: 600; }



  /* ── Les onglets : une partie du produit à la fois ─────── */
  .onglets { border-top: 1px solid var(--trait); }
  .onglets-tete { max-width: 56ch; padding: 78px 0 30px; }
  @media (max-width: 720px) { .onglets-tete { padding: 52px 0 22px; } }
  .onglets-tete .eyebrow { color: var(--vert); margin-bottom: 14px; }
  .onglets-tete h2 { font-size: clamp(28px, 3.8vw, 44px); margin-bottom: 14px; }
  .onglets-tete p { font-size: 18px; color: var(--texte-2); margin: 0; }
  .onglets-barre { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    padding: 0; margin-bottom: -1px; position: sticky; top: 76px; z-index: 20;
    background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
  .onglets-barre::-webkit-scrollbar { display: none; }
  .onglets-barre button { font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
    white-space: nowrap; color: var(--gris); background: none; border: none;
    border-bottom: 2px solid transparent; padding: 12px 18px; transition: color .15s; }
  .onglets-barre button:hover { color: var(--encre); }
  .onglets-barre button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--vert); }
  .onglets-barre button:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: -2px; }
  /* Sans JavaScript, toutes les parties restent lisibles à la suite. */
  .jsok .onglets > section { display: none; }
  .jsok .onglets > section.actif { display: block; }
  .onglets > section { border-top: 1px solid var(--trait); }
  @media (max-width: 620px) { .onglets-barre button { font-size: 14.5px; padding: 11px 13px; } }

  /* ── BatiSpot Studio ───────────────────────────────────── */
  .studio { padding: 88px 0 82px; border-top: 1px solid var(--trait); }
  @media (max-width: 720px) { .studio { padding: 56px 0 52px; } }
  .studio-tete { max-width: 58ch; margin-bottom: 46px; }
  .studio-tete .eyebrow { color: var(--vert); margin-bottom: 14px; }
  .studio-tete h2 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 16px; }
  .studio-tete > p { font-size: 18.5px; color: var(--texte-2); margin: 0; }
  .studio-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--trait); border: 1px solid var(--trait); border-radius: 18px;
    overflow: hidden; }
  @media (max-width: 820px) { .studio-liste { grid-template-columns: 1fr; } }
  .studio-liste article { background: #FFFFFF; padding: 28px 30px 30px; }
  @media (max-width: 620px) { .studio-liste article { padding: 24px 20px 26px; } }
  .studio-n { display: block; font-family: var(--dsp); font-size: 21px; font-weight: 600;
    letter-spacing: -0.02em; margin-bottom: 14px; }
  .studio-liste .mal { margin: 0 0 12px; }
  .studio-r { margin: 0; font-size: 16.5px; line-height: 1.58; color: var(--texte-2); }
  .studio-r b { color: var(--encre); font-weight: 600; }
  .studio-cond { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--trait);
    font-size: 14px; line-height: 1.65; color: var(--gris); max-width: 90ch; }
  .studio-cond b { color: var(--texte-2); font-weight: 600; }

  /* ── Devis & factures ──────────────────────────────────── */
  .papiers { padding: 88px 0 82px; border-top: 1px solid var(--trait); }
  @media (max-width: 720px) { .papiers { padding: 56px 0 52px; } }
  .papiers-tete { max-width: 56ch; margin-bottom: 42px; }
  .papiers-tete .eyebrow { color: var(--vert); margin-bottom: 14px; }
  .papiers-tete h2 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 16px; }
  .papiers-tete > p { font-size: 18.5px; color: var(--texte-2); margin: 0; }
  .papiers-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  @media (max-width: 820px) { .papiers-cols { grid-template-columns: 1fr; gap: 34px; } }
  .papiers-bloc h3 { font-size: 22px; margin-bottom: 18px; padding-bottom: 12px;
    border-bottom: 2px solid var(--encre); }
  .papiers-bloc ul { list-style: none; margin: 0; padding: 0; }
  .papiers-bloc li { padding: 14px 0; border-bottom: 1px solid var(--trait);
    font-size: 16.5px; line-height: 1.55; color: var(--texte-2); }
  .papiers-bloc li:last-child { border-bottom: none; }
  .papiers-bloc b { color: var(--encre); font-weight: 600; }

  .loi { margin-top: 52px; display: grid; grid-template-columns: 16ch 1fr; gap: 40px;
    padding-top: 34px; border-top: 1px solid var(--trait); }
  @media (max-width: 820px) { .loi { grid-template-columns: 1fr; gap: 18px; } }
  .loi-t { margin: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--vert); }
  .loi-corps > p { margin: 0 0 20px; font-size: 17.5px; line-height: 1.62; color: var(--texte-2);
    max-width: 68ch; }
  .loi-corps b { color: var(--encre); font-weight: 600; }
  .loi-etat { list-style: none; margin: 0 0 20px; padding: 0;
    display: flex; flex-direction: column; gap: 12px; }
  .loi-etat li { position: relative; padding-left: 30px; font-size: 16.5px; line-height: 1.55;
    color: var(--texte-2); max-width: 66ch; }
  .loi-etat li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
    border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
  .loi-etat .fait::before { content: "\2713"; background: var(--vert); color: #FFFFFF; }
  .loi-etat .encours::before { content: "\2192"; background: var(--creme); color: var(--gris);
    border: 1px solid var(--trait); }
  .loi-fin { font-size: 16px !important; color: var(--gris) !important; font-style: italic; }


  /* ── Le camion : il passe une fois, puis la bande se referme ──── */
  .gagne-liste .camion { grid-column: 1 / -1; background: var(--creme); padding: 0;
    position: relative; overflow: hidden; height: 276px;
    transition: height .7s cubic-bezier(.5,0,.3,1), opacity .45s ease .1s; }
  @media (max-width: 620px) { .gagne-liste .camion { height: 212px; } }
  /* Une fois qu'on l'a vu passer, il n'a plus rien à dire. */
  .gagne-liste .camion.replie { height: 0; opacity: 0; }
  /* Récitatif de BD : la case de narration, encre franche et ombre portée nette. */
  .camion-dit { position: absolute; left: 30px; top: 20px; margin: 0; z-index: 2;
    background: var(--craie); color: var(--encre);
    border: 2.5px solid var(--encre); border-radius: 5px;
    box-shadow: 4px 4px 0 var(--encre);
    padding: 9px 15px 10px; transform: rotate(-1.3deg);
    font-family: var(--dsp); text-transform: uppercase; letter-spacing: .005em; }
  .camion-dit span { display: block; font-family: var(--dsp); font-size: 12.5px;
    font-weight: 500; letter-spacing: .06em; color: var(--gris); }
  /* Le lettrage : fonte de bulle, pas la fonte du site. */
  .camion-dit b { display: block; font-family: "Bangers", "Archivo Black", Impact,
    "Helvetica Neue", sans-serif; font-weight: 400; font-size: 30px; line-height: .98;
    letter-spacing: .035em; margin-top: 3px; }
  @media (max-width: 620px) { .camion-dit { left: 14px; right: 14px; top: 14px;
    padding: 7px 11px 8px; border-width: 2px; box-shadow: 3px 3px 0 var(--encre); }
    .camion-dit span { font-size: 10px; }
    .camion-dit b { font-size: 19px; line-height: 1.02; } }
  .camion::after { content: ""; position: absolute; left: 0; right: 0; bottom: 34px;
    height: 2px; background: var(--trait); }
  @media (max-width: 620px) { .camion::after { bottom: 26px; } }
  .fourgon { position: absolute; bottom: 34px; left: 0; width: 344px;
    transform: translateX(-360px); }
  @media (max-width: 620px) { .fourgon { width: 246px; bottom: 26px; } }
  .fourgon svg { display: block; width: 100%; height: auto; overflow: visible; }
  /* Le passage ne démarre qu'à l'arrivée dans l'écran, et ne se rejoue pas. */
  .camion.passe .fourgon { animation: roule 5.4s cubic-bezier(.45,0,.55,1) forwards; }
  .camion.passe .roue { animation: tourne 1.15s linear infinite; }
  .camion .trait { fill: none; stroke: var(--encre); stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round; }
  .camion .trait.fin { stroke: var(--gris-clair); stroke-width: 1.5; }
  .camion .flanc { fill: var(--vert-pale); stroke: var(--vert); stroke-width: 1.5; }
  .camion .pneu  { fill: none; stroke: var(--encre); stroke-width: 6; }
  .camion .jante { fill: #FFFFFF; stroke: var(--gris-clair); stroke-width: 1.4; }
  .camion .moyeu { fill: var(--encre); }
  .camion .roue { transform-box: fill-box; transform-origin: 50% 50%; }
  @keyframes roule {
    from { transform: translateX(-360px); }
    to   { transform: translateX(calc(100vw + 60px)); }
  }
  @keyframes tourne { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .camion.passe .fourgon { animation: none; transform: translateX(100%); }
    .camion.passe .roue { animation: none; }
    .gagne-liste .camion.replie { height: 172px; opacity: 1; }
  }

  /* ── Ce que ça change ──────────────────────────────────── */
  .gagne { padding: 88px 0 82px; border-top: 1px solid var(--trait); }
  @media (max-width: 720px) { .gagne { padding: 56px 0 52px; } }
  .gagne-tete { max-width: 56ch; margin-bottom: 46px; }
  .gagne-tete .eyebrow { color: var(--vert); margin-bottom: 14px; }
  .gagne-tete h2 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 16px; }
  .gagne-tete > p { font-size: 18.5px; color: var(--texte-2); margin: 0; }
  .gagne-tete em { font-style: italic; color: var(--encre); }
  .gagne-liste { list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--trait); border-top: 1px solid var(--trait);
    border-bottom: 1px solid var(--trait); }
  @media (max-width: 820px) { .gagne-liste { grid-template-columns: 1fr; } }
  .gagne-liste li { background: #FFFFFF; padding: 28px 30px 30px; }
  @media (max-width: 620px) { .gagne-liste li { padding: 24px 20px 26px; } }
  .gagne-av, .gagne-ap { display: block; font-family: var(--mono); font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; }
  .gagne-av { color: var(--gris-clair); }
  .gagne-ap { color: var(--vert); margin-top: 20px; }
  .gagne-a { margin: 9px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--gris); }
  .gagne-b { margin: 9px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--texte-2); }
  .gagne-b b { color: var(--encre); font-family: var(--dsp); font-weight: 600; font-size: 17.5px;
    letter-spacing: -0.015em; }
  .gagne-fin { margin: 40px 0 0; font-size: 18.5px; color: var(--vert-fonce); max-width: 64ch;
    font-family: var(--dsp); font-weight: 500; letter-spacing: -0.012em; line-height: 1.5; }

  .savoir-mal { font-size: 17px !important; color: var(--gris-clair) !important;
    margin-bottom: 14px !important; }
  .savoir-tete b { color: var(--encre); font-weight: 600; }
  .com-coffre { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--trait); }
  .com-coffre ul { list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
  @media (max-width: 820px) { .com-coffre ul { grid-template-columns: 1fr; gap: 22px; } }
  .com-coffre li { font-size: 16.5px; line-height: 1.55; color: var(--texte-2); }
  .com-coffre b { color: var(--encre); font-weight: 600; }


  /* ── Ce qui reste gratuit ──────────────────────────────── */
  .gratuit { display: grid; grid-template-columns: 16ch 1fr; gap: 40px;
    padding: 46px 0 52px; border-top: 1px solid var(--trait); }
  @media (max-width: 820px) { .gratuit { grid-template-columns: 1fr; gap: 18px; } }
  .gratuit-t { margin: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--vert); }
  .gratuit-corps > p { margin: 0 0 20px; font-size: 18px; line-height: 1.6; color: var(--texte-2);
    max-width: 66ch; }
  .gratuit-corps b { color: var(--encre); font-weight: 600; }
  .gratuit-liste { list-style: none; margin: 0 0 20px; padding: 0;
    display: flex; flex-direction: column; gap: 13px; }
  .gratuit-liste li { position: relative; padding-left: 28px; font-size: 16.5px; line-height: 1.55;
    color: var(--texte-2); max-width: 66ch; }
  .gratuit-liste li::before { content: ""; position: absolute; left: 0; top: 9px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--vert); }
  .gratuit-fin { font-size: 14.5px !important; color: var(--gris) !important; }
  .gratuit-fin em { font-style: italic; }

  /* ── Démarrer · droits · guides · métiers ──────────────── */
  .demarrer, .droits, .savoir, .metiers { padding: 82px 0; border-top: 1px solid var(--trait); }
  @media (max-width: 720px) { .demarrer, .droits, .savoir, .metiers { padding: 54px 0; } }
  .demarrer-tete, .savoir-tete { max-width: 52ch; margin-bottom: 34px; }
  .demarrer-tete .eyebrow, .savoir-tete .eyebrow, .droits .eyebrow { color: var(--vert); margin-bottom: 14px; }
  .demarrer h2, .droits h2, .savoir h2 { font-size: clamp(28px, 3.8vw, 42px); margin-bottom: 14px; }
  .savoir-tete p { font-size: 18px; color: var(--texte-2); margin: 0; }
  .marches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 800px) { .marches { grid-template-columns: 1fr; } }
  .marches li { display: flex; gap: 18px; align-items: flex-start; padding: 24px 26px;
    border: 1px solid var(--trait); border-radius: 16px; font-size: 17px; color: var(--texte-2); }
  .marches span { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    background: var(--vert-pale); color: var(--vert-fonce); display: grid; place-items: center;
    font-family: var(--mono); font-size: 16.5px; font-weight: 700; }
  .marches b { display: block; color: var(--encre); font-weight: 700; margin-bottom: 3px; }
  .droits { display: grid; grid-template-columns: 1fr 1.05fr; gap: 54px; align-items: start; }
  @media (max-width: 900px) { .droits { grid-template-columns: 1fr; gap: 32px; } }
  .droits-txt { max-width: 46ch; }
  .roles { margin: 0; padding: 0; }
  .roles > div { padding: 18px 0; border-top: 1px solid var(--trait); }
  .roles > div:first-child { border-top: none; padding-top: 0; }
  .roles > div:last-child { padding-bottom: 0; }
  .roles dt { font-family: var(--dsp); font-size: 18.5px; font-weight: 600; letter-spacing: -0.015em;
    margin-bottom: 6px; }
  .roles dd { margin: 0; font-size: 16.5px; color: var(--texte-2); line-height: 1.55; }
  .droits-txt p { font-size: 18.5px; color: var(--texte-2); margin: 0; }
  .savoir-liste { display: flex; flex-wrap: wrap; gap: 10px; }
  .savoir-liste a { font-size: 15.5px; color: var(--encre); text-decoration: none;
    border: 1px solid var(--trait); border-radius: 11px; padding: 11px 18px; transition: all .15s; }
  .savoir-liste a:hover { border-color: var(--vert); color: var(--vert-fonce); background: var(--vert-pale); }
  .savoir-liste a.tout { background: var(--encre); color: #FFFFFF; border-color: var(--encre); font-weight: 600; }
  .savoir-liste a.tout:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #FFFFFF; }
  .metiers .eyebrow { color: var(--gris-clair); margin-bottom: 18px; }
  .mtags { display: flex; flex-wrap: wrap; gap: 9px; }
  .mtags a { font-size: 15px; color: var(--gris); text-decoration: none; background: var(--creme);
    border-radius: 10px; padding: 9px 16px; transition: all .15s; }
  .mtags a:hover { background: var(--vert-pale); color: var(--vert-fonce); }

  /* ── Qui exécute ───────────────────────────────────────── */
  .qui { padding: 92px 0 84px; border-top: 1px solid var(--trait); }
  @media (max-width: 720px) { .qui { padding: 58px 0 52px; } }
  .wrap-qui { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: start; }
  @media (max-width: 900px) { .wrap-qui { grid-template-columns: 1fr; gap: 34px; } }
  .qui-txt .eyebrow { color: var(--vert); margin-bottom: 16px; }
  .qui-txt h2 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 18px; }
  .qui-txt p { font-size: 19px; color: var(--texte-2); margin: 0; }
  .qui-txt p b { color: var(--encre); font-weight: 600; }
  .qui-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .qui-etapes li {
    display: flex; gap: 20px; align-items: flex-start; padding: 22px 0;
    border-top: 1px solid var(--trait); font-size: 18px; color: var(--texte-2);
  }
  .qui-etapes li:last-child { border-bottom: 1px solid var(--trait); }
  .qui-etapes span {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    background: var(--vert-pale); color: var(--vert-fonce);
    display: grid; place-items: center; font-family: var(--mono); font-size: 16.5px; font-weight: 700;
  }
  .qui-etapes b { color: var(--encre); font-weight: 700; }
  .qui-pas { margin: 18px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--texte-2);
    max-width: 72ch; }
  .qui-regle {
    margin: 42px 0 0; padding: 20px 26px; border-left: 3px solid var(--vert);
    background: var(--vert-pale); border-radius: 0 12px 12px 0;
    font-size: 18px; font-weight: 500; color: var(--vert-fonce);
  }


  /* ── L'échange en direct, un seul fil ──────────────────── */
  .exemples { padding: 92px 0 86px; border-top: 1px solid var(--trait); }
  @media (max-width: 720px) { .exemples { padding: 58px 0 54px; } }
  .ex-tete { max-width: 56ch; margin-bottom: 40px; }
  .ex-tete .eyebrow { color: var(--vert); margin-bottom: 14px; }
  .ex-tete h2 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 14px; }
  .ex-tete > p { font-size: 18.5px; color: var(--texte-2); margin: 0; }

  .direct { max-width: 860px; border: 1px solid var(--trait); border-radius: 24px; background: #FFFFFF;
    overflow: hidden; box-shadow: 0 50px 110px -66px rgba(17,18,20,.5); }
  .direct-tete { display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 20px 26px 18px; border-bottom: 1px solid var(--trait); background: var(--creme); }
  .direct-p { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--vert); margin-bottom: 7px; transition: color .3s; }
  .direct-tete b { font-family: var(--dsp); font-size: 20px; letter-spacing: -0.02em; }
  .rejouer { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
    background: #FFFFFF; border: 1px solid var(--trait); color: var(--texte-2);
    border-radius: 999px; padding: 9px 18px; }
  .rejouer:hover { border-color: var(--encre); color: var(--encre); }
  .rejouer:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }

  /* Le cadre grandit avec son contenu : on ne fait défiler personne.
     Une seule demande est affichée à la fois, la précédente s'efface. */
  .direct-fil { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 15px;
    min-height: 260px; }
  @media (max-width: 620px) { .direct-fil { padding: 20px 18px 24px; } }

  .sep { padding: 12px 0 2px; }
  .sep span { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--vert); }
  .msg { max-width: 76%; }
  .msg p { margin: 0 0 9px; font-size: 16px; line-height: 1.55; }
  .msg p:last-child { margin-bottom: 0; }
  .msg b { font-weight: 600; }
  .msg.bot { align-self: flex-start; background: var(--creme); border: 1px solid var(--trait);
    border-radius: 18px; border-top-left-radius: 6px; padding: 15px 18px; color: var(--texte-2); }
  .msg.bot b { color: var(--encre); }
  .msg.moi { align-self: flex-end; background: var(--vert); color: #FFFFFF;
    border-radius: 18px; border-top-right-radius: 6px; padding: 14px 18px; }
  .msg.moi p { font-family: var(--dsp); font-weight: 600; font-size: 17px; letter-spacing: -0.012em; }
  @media (max-width: 620px) { .msg { max-width: 92%; } }
  .direct-fil .msg { animation: msgArrive .38s cubic-bezier(.22,.8,.3,1) both; }
  @keyframes msgArrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* Il tape. */
  .frappe { align-self: flex-start; display: flex; gap: 5px; align-items: center;
    background: var(--creme); border: 1px solid var(--trait); border-radius: 18px;
    border-top-left-radius: 6px; padding: 16px 20px; }
  .frappe i { width: 7px; height: 7px; border-radius: 50%; background: var(--gris-clair);
    animation: pointe 1.2s ease-in-out infinite; }
  .frappe i:nth-child(2) { animation-delay: .18s; }
  .frappe i:nth-child(3) { animation-delay: .36s; }
  @keyframes pointe { 0%, 60%, 100% { opacity: .3; transform: translateY(0); }
                      30% { opacity: 1; transform: translateY(-4px); } }

  .carte { margin-top: 13px; border: 1px solid var(--trait); border-radius: 14px; background: #FFFFFF;
    overflow: hidden; }
  .carte + .carte { margin-top: 10px; }
  .carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; border-bottom: 1px solid var(--trait); }
  .carte-tete span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris); }
  .carte-tete i { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--vert-fonce); background: var(--vert-pale);
    padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
  .carte-corps { margin: 0; padding: 13px 14px; font-size: 14.5px; color: var(--texte-2); line-height: 1.55; }
  .carte-lignes { list-style: none; margin: 0; padding: 4px 0; }
  .carte-lignes li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 14px;
    font-size: 14px; border-bottom: 1px solid var(--trait); }
  .carte-lignes li:last-child { border-bottom: none; }
  .carte-lignes b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500;
    white-space: nowrap; }
  .carte-lignes .manque { background: #FFF8E8; }
  .carte-lignes .manque b { color: #9A6A00; }
  .carte-edit { display: block; padding: 13px 14px; border-top: 1px solid var(--trait); }
  .carte-edit span { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gris-clair); margin-bottom: 8px; }
  .carte-edit textarea { width: 100%; font: inherit; font-size: 14.5px; line-height: 1.55;
    color: var(--texte-2); background: #FFFFFF; border: 1px solid var(--vert);
    border-radius: 10px; padding: 11px 13px; resize: vertical; }
  .carte-edit textarea:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 1px; }

  .carte-detail { margin: 0; padding: 6px 14px 10px; border-top: 1px solid var(--trait); }
  .carte-detail > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0;
    font-size: 14px; }
  .carte-detail dt { color: var(--gris); margin: 0; }
  .carte-detail dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums;
    white-space: nowrap; }
  .carte-detail .net { border-top: 1px solid var(--encre); margin-top: 4px; padding-top: 10px;
    font-weight: 600; }
  .carte-detail .net dt { color: var(--encre); }

  .carte-lignes.mat { border-top: 1px solid var(--encre); }
  .carte-lignes .chapeau { background: var(--creme); }
  .carte-lignes .chapeau span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris); }
  .carte-lignes .chapeau b { font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gris-clair); font-weight: 500; }
  .carte-lignes .total { background: var(--vert-pale); font-weight: 600; }
  .carte-lignes .total b { color: var(--vert-fonce); }
  .carte-lignes li.remplie { background: transparent; }
  .carte-lignes li.remplie b { color: var(--encre); }

  .carte-dictee { display: flex; align-items: center; gap: 13px; padding: 13px 14px;
    border-top: 1px solid var(--trait); background: var(--vert-pale); }
  .carte-dictee p { margin: 0; font-family: var(--dsp); font-size: 15.5px; font-weight: 600;
    color: var(--vert-fonce); min-height: 1.4em; }
  .carte-dictee p::after { content: "\258f"; opacity: .55; animation: bat 1s steps(1) infinite; }
  .carte-dictee.fini p::after { content: ""; }
  @keyframes bat { 50% { opacity: 0; } }
  .ondes { display: inline-flex; align-items: center; gap: 3px; height: 20px; flex: 0 0 auto; }
  .ondes i { width: 3px; border-radius: 2px; background: var(--vert);
    animation: ondeVoix .85s ease-in-out infinite; }
  .ondes i:nth-child(1) { height: 8px;  animation-delay: 0s; }
  .ondes i:nth-child(2) { height: 16px; animation-delay: .1s; }
  .ondes i:nth-child(3) { height: 11px; animation-delay: .2s; }
  .ondes i:nth-child(4) { height: 20px; animation-delay: .3s; }
  .ondes i:nth-child(5) { height: 9px;  animation-delay: .4s; }
  .carte-dictee.fini .ondes i { animation: none; transform: scaleY(.4); opacity: .4; }

  .carte-pied { display: flex; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--trait);
    background: var(--creme); flex-wrap: wrap; }
  .carte-pied button { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    border-radius: 9px; padding: 8px 14px; border: 1px solid transparent; }
  .carte-pied .ok { background: var(--vert); color: #FFFFFF; }
  .carte-pied .ok:hover { background: var(--vert-fonce); color: #FFFFFF; }
  .carte-pied .non { background: #FFFFFF; border-color: var(--trait); color: var(--texte-2); }
  .carte-pied .non:hover { border-color: var(--encre); color: var(--encre); }
  .carte-pied button:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }
  .carte-faite { margin: 0; padding: 13px 14px; background: var(--vert-pale); color: var(--vert-fonce);
    font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 9px;
    border-top: 1px solid var(--trait); cursor: pointer; }
  .carte-faite::before { content: "\2713"; width: 20px; height: 20px; border-radius: 50%;
    background: var(--vert); color: #FFFFFF; display: grid; place-items: center;
    font-size: 12px; flex: 0 0 auto; }
  .carte-faite:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: -2px; }
  .carte.faite .carte-tete i { background: var(--vert); color: #FFFFFF; }

  .puces { padding: 16px 26px 18px; border-top: 1px solid var(--trait); }
  @media (max-width: 620px) { .puces { padding: 14px 18px 16px; } }
  .puces-t { margin: 0 0 11px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); }
  .puces-liste { display: flex; flex-wrap: wrap; gap: 8px; }
  .puces-liste button { font: inherit; font-size: 14.5px; cursor: pointer; text-align: left;
    color: var(--vert-fonce); background: var(--vert-pale); border: 1px solid transparent;
    border-radius: 999px; padding: 9px 16px; transition: background .15s, color .15s; }
  .puces-liste button:hover { background: var(--vert); color: #FFFFFF; }
  .puces-liste button:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }
  .puces-liste button.clin { background: var(--vert); color: #FFFFFF;
    box-shadow: 0 0 0 0 rgba(14,159,110,.55); animation: clignote 1.5s ease-out; }
  @keyframes clignote {
    0%   { box-shadow: 0 0 0 0 rgba(14,159,110,.5); }
    70%  { box-shadow: 0 0 0 11px rgba(14,159,110,0); }
    100% { box-shadow: 0 0 0 0 rgba(14,159,110,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .puces-liste button.clin { animation: none; }
  }
  .puces-liste button[disabled] { cursor: default; background: #FFFFFF;
    border-color: var(--trait); color: var(--gris-clair); }
  .puces-liste button[disabled]:hover { background: #FFFFFF; color: var(--gris-clair); }

  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
    clip-path: inset(50%); white-space: nowrap; }
  .parler { display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px;
    border-top: 1px solid var(--trait); background: var(--creme); }
  @media (max-width: 620px) { .parler { padding: 12px 14px 8px; gap: 8px; } }
  .parler-champ { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; cursor: pointer;
    text-align: left; color: var(--gris-clair); background: #FFFFFF; border: 1px solid var(--trait);
    border-radius: 999px; padding: 13px 20px; transition: border-color .15s, color .15s; }
  .parler-champ:hover { border-color: var(--vert); color: var(--texte-2); }
  .parler-champ:focus-visible { outline: none; border-color: var(--vert);
    box-shadow: 0 0 0 3px var(--vert-pale); color: var(--texte-2); }
  .parler-champ[disabled] { cursor: default; }
  .parler-champ.ecrit { color: var(--encre); border-color: var(--vert);
    box-shadow: 0 0 0 3px var(--vert-pale); font-family: var(--dsp); font-weight: 600;
    letter-spacing: -0.012em; }
  .parler-champ.ecrit::after { content: "\258f"; opacity: .5;
    animation: batChamp 1s steps(1) infinite; }
  @keyframes batChamp { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .parler-champ.ecrit::after { animation: none; } }
  .envoi-b { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: var(--encre); color: #FFFFFF; border: none; display: grid; place-items: center;
    transition: background .15s, transform .12s; }
  .envoi-b:hover { background: var(--vert-fonce); }
  .envoi-b:active { transform: scale(.94); }
  .envoi-b:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 3px; }
  .envoi-b[disabled] { opacity: .45; cursor: default; }
  .micro-txt { margin: 0; padding: 0 22px 15px; background: var(--creme);
    font-size: 13.5px; color: var(--gris); line-height: 1.5; }
  .micro-txt.dit { font-family: var(--dsp); font-size: 15.5px; font-weight: 600;
    color: var(--vert-fonce); letter-spacing: -0.012em; }

  .micro-b { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: var(--vert); border: none; display: grid; place-items: center;
    box-shadow: 0 10px 24px -12px rgba(14,159,110,.8); transition: background .15s, transform .12s; }
  .micro-b:hover { background: var(--vert-fonce); }
  .micro-b:active { transform: scale(.94); }
  .micro-b:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 3px; }
  .micro-b[disabled] { cursor: default; }
  .micro-b .direct-micro i { background: #042016; }
  .micro-b.ecoute { background: var(--vert-fonce); }
  .micro-b.ecoute .direct-micro i { background: #FFFFFF; }
  .photo-b { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: #FFFFFF; border: 1px solid var(--trait); color: var(--encre);
    display: grid; place-items: center; transition: background .15s, color .15s, transform .12s; }
  .photo-b:hover { background: var(--encre); color: #FFFFFF; border-color: var(--encre); }
  .photo-b:active { transform: scale(.94); }
  .photo-b:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 3px; }
  .photo-b[disabled] { cursor: default; }
  .photo-b.vise { background: var(--encre); color: #FFFFFF; border-color: var(--encre); }
  .photo-b.vise svg { animation: viser 1.1s ease-in-out infinite; }
  @keyframes viser { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.88); opacity: .55; } }

  /* La photo telle qu'elle apparaît dans le fil. */
  .cliche { display: flex; align-items: center; gap: 13px; background: var(--encre); color: #FFFFFF;
    border-radius: 14px; padding: 13px 16px; }
  .cliche .vignette { flex: 0 0 auto; width: 58px; height: 44px; border-radius: 8px; position: relative;
    background: linear-gradient(170deg, #2B2F33 0%, #16191C 100%); overflow: hidden; }
  .cliche .vignette::before { content: ""; position: absolute; left: 9px; right: 9px; bottom: 7px;
    height: 17px; border: 1px solid rgba(255,255,255,.34); border-bottom: none; }
  .cliche .vignette::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 7px;
    height: 1px; background: var(--vert); }
  .cliche b { display: block; font-family: var(--dsp); font-size: 15.5px; font-weight: 600; }
  .cliche span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 12.5px;
    color: rgba(255,255,255,.62); }

  .direct-micro { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
  .direct-micro i { width: 3px; border-radius: 2px; background: var(--vert); }
  .micro-b.ecoute .direct-micro i { animation: ondeVoix .85s ease-in-out infinite; }
  .direct-micro i:nth-child(1) { height: 8px;  animation-delay: 0s; }
  .direct-micro i:nth-child(2) { height: 17px; animation-delay: .12s; }
  .direct-micro i:nth-child(3) { height: 11px; animation-delay: .24s; }
  .direct-micro i:nth-child(4) { height: 20px; animation-delay: .36s; }

  @keyframes ondeVoix { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

  .ex-autres { margin-top: 34px; padding: 26px 28px; border: 1px solid var(--trait);
    border-radius: 18px; background: var(--creme); max-width: 860px; }
  .ex-autres-t { margin: 0 0 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris); }
  .ex-autres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
  .ex-autres li { background: #FFFFFF; border: 1px solid var(--trait); border-radius: 999px;
    padding: 9px 16px; font-size: 15px; color: var(--texte-2); }

  /* ── Le récit en six rubriques ─────────────────────────── */
  .recit { padding: 104px 0 96px; }
  @media (max-width: 720px) { .recit { padding: 66px 0 60px; } }
  .recit-tete { max-width: 46ch; margin-bottom: 76px; }
  .recit-tete .eyebrow { color: var(--vert); margin-bottom: 16px; }
  .recit-tete h2 { font-size: clamp(32px, 4.6vw, 52px); margin-bottom: 16px; }
  .recit-tete p { color: var(--texte-2); font-size: 19px; margin: 0; }

  /* Le clip prend TOUTE la largeur : c'est lui qui explique, pas le texte.
     Le texte se met en bandeau au-dessus, sur deux colonnes. */
  .rub { padding: 72px 0 0; border-top: 1px solid var(--trait); }
  .rub-txt {
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start;
    margin-bottom: 38px;
  }
  @media (max-width: 860px) { .rub-txt { grid-template-columns: 1fr; gap: 18px; margin-bottom: 26px; }
    .rub { padding-top: 46px; } }
  .num {
    font-family: var(--mono); font-size: 14.5px; font-weight: 700; letter-spacing: .18em;
    color: var(--vert-fonce); background: var(--vert-pale); align-self: flex-start;
    padding: 5px 11px; border-radius: 7px;
  }
  .rub h3 { font-size: clamp(30px, 4vw, 46px); line-height: 1.04; margin: 10px 0 0; grid-column: 1; }
  .num { grid-column: 1; }
  .rub-txt > p { grid-column: 2; font-size: 18.5px; color: var(--texte-2); margin: 0; }
  .rub .detail {
    grid-column: 2; font-family: var(--mono); font-size: 14.5px; letter-spacing: .04em;
    color: var(--gris-clair); border-top: 1px solid var(--trait); padding-top: 14px; margin-top: 4px;
  }
  @media (max-width: 860px) { .rub h3, .num, .rub-txt > p, .rub .detail { grid-column: 1; } }
  .rub-v { margin: 0; }
  .rub-v video {
    width: 100%; display: block; border-radius: 20px; border: 1px solid var(--trait);
    height: auto; background: var(--creme);
    box-shadow: 0 50px 100px -50px rgba(17,18,20,.5);
  }

  .matin {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: center;
    margin-top: 70px; padding: 44px 48px; background: var(--creme);
    border: 1px solid var(--trait); border-radius: 22px;
  }
  @media (max-width: 900px) { .matin { grid-template-columns: 1fr; gap: 26px; padding: 26px; } }
  .matin .eyebrow { color: var(--vert-fonce); margin-bottom: 12px; }
  .matin h3 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; }
  .matin p { font-size: 17.5px; color: var(--texte-2); margin: 0; max-width: 40ch; }

  /* ── Les étapes, en clips (retiré) ──────────────────────────────── */
  .etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 980px) { .etapes { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
  @media (max-width: 620px) { .etapes { grid-template-columns: 1fr; } }
  .etape-v { margin: 0; display: flex; flex-direction: column; gap: 12px; }
  .etape-v.large { grid-column: span 2; }
  @media (max-width: 620px) { .etape-v.large { grid-column: span 1; } }
  .etape-v video {
    width: 100%; display: block; border-radius: 14px; background: var(--creme);
    border: 1px solid var(--bord); aspect-ratio: 16 / 9; object-fit: cover;
  }
  .etape-v.large video { aspect-ratio: 32 / 9; }
  @media (max-width: 620px) { .etape-v.large video { aspect-ratio: 16 / 9; } }
  .etape-v figcaption { font-size: 15.5px; color: var(--gris); line-height: 1.5; }
  .etape-v figcaption b { display: inline-block; font-family: var(--mono); font-size: 14px;
    font-weight: 700; letter-spacing: .08em; color: var(--vert-fonce); margin-right: 8px; }

  /* ── Photographies ─────────────────────────────────────── */
  .scene .app { position: relative; z-index: 1; }

  /* (l'ancien échange en boucle a été retiré : remplacé par les deux vraies
     conversations de la section #exemples) */


  /* ── LE MÉTRÉ EN SCÈNE ─────────────────────────────────
     Une seule horloge de 13 s pour toute la séquence : le viseur cherche, trois
     points se posent, la pièce se lève, les cotes tombent, la surface se
     calcule, et les lignes du devis s'écrivent. Chaque élément porte la MÊME
     durée et se montre à son moment, en pourcentage — c'est ce qui les garde
     synchronisés sans une ligne de JavaScript. */
  .metre { display: flex; flex-direction: column; gap: 0; }
  .viseur { background: #FFFFFF; border: 1px solid var(--bord); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 64px -40px rgba(17,18,20,.3); }
  .viseur-tete { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-bottom: 1px solid var(--bord); background: var(--creme); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
  .viseur-etat { margin-left: auto; color: var(--vert); }
  .flux { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 0 10px; }
  .flux span { width: 5px; height: 5px; border-radius: 50%; background: var(--vert); animation: coule 13s ease-in-out infinite; }
  .flux span:nth-child(2) { animation-delay: .16s; }
  .flux span:nth-child(3) { animation-delay: .32s; }


  /* ── MOUVEMENT ─────────────────────────────────────────
     Règle tenue partout : le contenu est LISIBLE sans JavaScript et sans
     défilement. Rien n'attend un observateur pour exister — les animations
     partent d'un état déjà visible, ou se jouent au chargement. */
  @keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes entreCarte { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes respire { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,193,78,0); } 50% { box-shadow: 0 0 0 5px rgba(242,193,78,.13); } }
  @keyframes derive { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3%,-2%,0) scale(1.06); } 100% { transform: translate3d(0,0,0) scale(1); } }
  @keyframes curseur { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } }

  .hero::before { animation: derive 18s ease-in-out infinite; }
  .hero .eyebrow, .hero h1, .hero .sous, .hero .boutons, .hero .sous-boutons {
    animation: monte .7s cubic-bezier(.22,.8,.3,1) backwards;
  }
  .hero .eyebrow      { animation-delay: .04s; }
  .hero h1            { animation-delay: .12s; }
  .hero .sous         { animation-delay: .22s; }
  .hero .boutons      { animation-delay: .32s; }
  .hero .sous-boutons { animation-delay: .40s; }
  .scene .app         { animation: monte .8s cubic-bezier(.22,.8,.3,1) .18s backwards; }
  .flottant           { animation: entreCarte .7s cubic-bezier(.22,.8,.3,1) 1.9s backwards; }

  /* Les trois puces du matin arrivent l'une après l'autre, comme l'assistant les écrit. */
  @keyframes clignote { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

  /* Le curseur de dictée, comme dans l'application. */
  .curseur { display: inline-block; width: 2px; height: 1em; background: var(--vert); vertical-align: -2px; margin-left: 3px; animation: curseur 1.05s steps(1) infinite; }

  /* Les cartes réagissent au doigt et à la souris. */
  .etape { transition: background .25s ease; }
  .etape:hover { background: var(--surface); }
  .etape .cite { background: var(--surface); }
  .plan { transition: transform .25s cubic-bezier(.22,.8,.3,1), box-shadow .25s ease; }
  .plan:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.35); }
  .doc, .chiffres { transition: transform .4s cubic-bezier(.22,.8,.3,1); }
  .duo:hover .doc, .duo:hover .chiffres { transform: translateY(-3px); }

  /* Les jauges partent pleines dans le CSS : sans JavaScript, elles sont justes. */
  .barre-jauge i { transition: width 1.1s cubic-bezier(.22,.8,.3,1); }
  .barre-jauge.attente i { width: 0 !important; }

  /* Une section qui se révèle part TOUJOURS d'un état visible : la classe
     n'est posée que si JavaScript tourne, et retirée dès qu'elle est vue. */
  .jsok .reveler { opacity: 0; transform: translateY(18px); }
  .jsok .reveler.vu { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1); }

  @media (prefers-reduced-motion: reduce) {
    .hero::before, .hero .eyebrow, .hero h1, .hero .sous, .hero .boutons, .hero .sous-boutons,
    .scene .app, .direct-fil .msg, .frappe i, .direct-micro i, .ondes i, .carte-dictee p::after,
    .suite li::before, .devis-etat i {
      animation: none !important;
    }
    .jsok .reveler { opacity: 1 !important; transform: none !important; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

  /* ── Les rubriques : une page par partie du produit ────── */
  .rubriques, .ailleurs { padding: 82px 0 78px; border-top: 1px solid var(--trait); }
  @media (max-width: 720px) { .rubriques, .ailleurs { padding: 54px 0 50px; } }
  .rub-tete { max-width: 56ch; margin-bottom: 38px; }
  .rub-tete .eyebrow { color: var(--vert); margin-bottom: 14px; }
  .rub-tete h2 { font-size: clamp(28px, 3.8vw, 44px); margin-bottom: 14px; }
  .rub-tete p { font-size: 18px; color: var(--texte-2); margin: 0; }
  .ailleurs .eyebrow { color: var(--vert); margin-bottom: 24px; }

  /* Les filets se dessinent SUR les cartes, pas par un fond qui transparaît :
     à cinq cartes sur trois colonnes, la sixième case vide laissait voir du gris. */
  .ailleurs-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    background: #FFFFFF; border: 1px solid var(--trait); border-radius: 18px;
    overflow: hidden; }
  @media (max-width: 860px) { .ailleurs-liste { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .ailleurs-liste { grid-template-columns: 1fr; } }
  .ailleurs-liste a { display: block; background: #FFFFFF; padding: 24px 24px 26px;
    text-decoration: none; color: inherit; transition: background .15s;
    box-shadow: 1px 0 0 var(--trait), 0 1px 0 var(--trait); }
  .ailleurs-liste a:hover { background: var(--creme); }
  .ailleurs-liste a:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: -2px; }
  .ailleurs-liste b { display: block; font-family: var(--dsp); font-size: 19px; font-weight: 600;
    letter-spacing: -0.02em; margin-bottom: 7px; }
  .ailleurs-liste span { display: block; font-size: 15.5px; line-height: 1.5; color: var(--texte-2); }
  .ailleurs-liste.grand a { padding: 30px 28px 32px; }
  .ailleurs-liste.grand b { font-size: 22px; margin-bottom: 9px; }
  .ailleurs-liste.grand span { font-size: 16.5px; }
  /* La page où l'on se trouve, dans le bandeau. */
  .liens a.ici { color: var(--encre); font-weight: 600; }

  /* Sur téléphone, aucune étiquette ne descend sous 11 px : à 10 px,
     du monospace en capitales avec interlettrage ne se lit plus au soleil. */
  @media (max-width: 620px) {
    .puces-t, .camion-dit, .direct-p, .trajet-t, .g-t, .gratuit-t, .loi-t,
    .com-p, .studio-n, .fil-p, .carte-tete span, .notes-aide { font-size: 11px; }
    .carte-tete i, .ex-autres-t { font-size: 10.5px; }
  }

  /* Sur téléphone, les clips prennent toute la largeur : bridés par les marges
     du conteneur, le texte qu'ils contiennent devenait trop petit pour être lu. */
  @media (max-width: 720px) {
    .rub-v, .ch-v, .scene .cadre {
      margin-left: -28px; margin-right: -28px; width: calc(100% + 56px);
    }
    .rub-v video, .ch-v video, .cadre video { border-radius: 0; border-left: none; border-right: none; }
    .ch-v figcaption, .sous-clip { padding-left: 28px; padding-right: 28px; }
  }
  @media (max-width: 620px) {
    .rub-v, .ch-v, .scene .cadre { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); }
    .ch-v figcaption, .sous-clip { padding-left: 20px; padding-right: 20px; }
  }


  /* Deux montages par clip : le large pour l'écran, le cadré pour le téléphone.
     Aucun des deux ne se télécharge avant d'être affiché. */
  video.pour-tel { display: none; }
  @media (max-width: 620px) {
    video.pour-grand { display: none; }
    video.pour-tel { display: block; }
  }

  /* Le bouton Notes flotte : sur téléphone il doit se faire oublier.
     Plus petit, calé dans le coin, avec un halo pour se détacher du texte —
     et la page réserve la hauteur en bas pour qu'il ne couvre pas la fin. */
  @media (max-width: 620px) {
    .notes-bouton { right: 12px; bottom: 12px; padding: 11px 13px;
      box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 14px 32px -12px rgba(17,18,20,.5); }
    .notes-ico { font-size: 15px; }
    footer { padding-bottom: 78px; }
  }
  .notes-bouton { transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .22s ease,
    background .15s; }
  .notes-bouton.efface { transform: translateY(120%); opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) {
    .notes-bouton { transition: none; }
    .notes-bouton.efface { transform: none; opacity: 1; pointer-events: auto; }
  }

  /* ── Les trois portes ──────────────────────────────────── */
  .portes { padding: 80px 0 76px; border-top: 1px solid var(--trait); }
  @media (max-width: 720px) { .portes { padding: 52px 0 48px; } }
  .portes-tete { max-width: 54ch; margin-bottom: 34px; }
  .portes-tete .eyebrow { color: var(--vert); margin-bottom: 14px; }
  .portes-tete h2 { font-size: clamp(28px, 3.8vw, 42px); margin-bottom: 14px; }
  .portes-tete p { font-size: 18px; color: var(--texte-2); margin: 0; }
  .portes-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    background: #FFFFFF; border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; }
  @media (max-width: 820px) { .portes-liste { grid-template-columns: 1fr; } }
  .portes-liste a { display: block; padding: 26px 26px 28px; text-decoration: none; color: inherit;
    box-shadow: 1px 0 0 var(--trait), 0 1px 0 var(--trait); transition: background .15s; }
  .portes-liste a:hover { background: var(--vert-pale); }
  .portes-liste a:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: -2px; }
  .porte-q { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--vert); margin-bottom: 10px; }
  .portes-liste b { display: block; font-family: var(--dsp); font-size: 21px; font-weight: 600;
    letter-spacing: -0.02em; margin-bottom: 8px; }
  .porte-d { display: block; font-size: 15.5px; line-height: 1.5; color: var(--texte-2); }

  /* Le menu du petit écran est devenu long : il défile plutôt que de déborder. */
  .menu-liens { max-height: calc(100vh - 110px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* ── Le dossier avant / après, envoyé ──────────────────── */
  .dossier { margin: 46px 0 8px; }
  .dossier-t { margin: 0 0 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); }
  .dossier-scene { display: grid; grid-template-columns: 1fr 1fr auto 1.15fr;
    align-items: center; gap: 18px; }
  @media (max-width: 900px) { .dossier-scene { grid-template-columns: 1fr 1fr; }
    .dossier-scene .fleche { display: none; }
    .dossier-scene .envoi { grid-column: 1 / -1; } }
  @media (max-width: 560px) { .dossier-scene { grid-template-columns: 1fr; } }

  .jeu { border: 1px solid var(--trait); border-radius: 16px; padding: 18px 18px 20px;
    background: #FFFFFF; }
  .jeu-q { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); margin-bottom: 14px; }
  .jeu[data-quand="apres"] .jeu-q { color: var(--vert); }
  .vignettes { display: flex; gap: 6px; margin-bottom: 13px; }
  .vg { flex: 1; aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center;
    font-family: var(--mono); font-size: 13.5px; font-weight: 700; color: var(--gris); }
  .vg-mur  { background: repeating-linear-gradient(135deg, #EFEFEE 0 6px, #E4E4E2 6px 12px); }
  .vg-fini { background: var(--vert-pale); box-shadow: inset 0 0 0 1px rgba(14,159,110,.3); }
  .vg-plus { background: var(--creme); border: 1px dashed var(--trait); }
  .vg-plus.vert { color: var(--vert-fonce); border-color: var(--vert); }
  .jeu-d { display: block; font-size: 14.5px; line-height: 1.45; color: var(--texte-2); }

  .fleche { color: var(--trait); display: block; }
  .fleche svg { width: 64px; height: 24px; display: block; }
  .dossier.parti .fleche { color: var(--vert); }
  .dossier.parti .fleche svg { animation: pousse 1.1s ease-out; }
  @keyframes pousse { 0% { transform: translateX(-14px); opacity: 0; } 100% { transform: none; opacity: 1; } }

  .envoi { border: 1px solid var(--vert); border-radius: 16px; padding: 20px 22px 22px;
    background: #FFFFFF; box-shadow: 0 24px 54px -34px rgba(14,159,110,.8); }
  .dossier.parti .envoi { animation: poseEnvoi .6s cubic-bezier(.22,.8,.3,1) both .5s; }
  @keyframes poseEnvoi { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .envoi-q { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--vert); margin-bottom: 9px; }
  .envoi b { display: block; font-family: var(--dsp); font-size: 19px; font-weight: 600;
    letter-spacing: -0.02em; margin-bottom: 12px; }
  .envoi ul { list-style: none; margin: 0 0 12px; padding: 0; }
  .envoi li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5;
    color: var(--texte-2); margin-bottom: 6px; }
  .envoi li::before { content: "\2713"; position: absolute; left: 0; color: var(--vert); font-weight: 700; }
  .envoi-d { display: block; font-size: 14px; color: var(--gris); }
  .dossier-fin { margin: 26px 0 0; font-size: 16px; line-height: 1.55; color: var(--texte-2);
    max-width: 72ch; }
  @media (prefers-reduced-motion: reduce) {
    .dossier.parti .fleche svg, .dossier.parti .envoi { animation: none; }
  }

  /* ── Le tableau de bord, en chiffres ───────────────────── */
  .bord { border: 1px solid var(--trait); border-radius: 20px; background: #FFFFFF;
    overflow: hidden; margin-bottom: 46px;
    box-shadow: 0 40px 90px -60px rgba(17,18,20,.45); }
  .bord-tete { display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 18px 24px; border-bottom: 1px solid var(--trait); background: var(--creme); }
  .bord-q { font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris); }
  .bord-maj { font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--vert); display: flex; align-items: center; gap: 7px; }
  .bord-maj::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--vert); animation: battre 1.8s ease-in-out infinite; }
  .bord-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  @media (max-width: 820px) { .bord-tuiles { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 460px) { .bord-tuiles { grid-template-columns: 1fr; } }
  .tuile { padding: 22px 24px 24px; box-shadow: 1px 0 0 var(--trait), 0 1px 0 var(--trait); }
  .tuile-q { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); margin-bottom: 10px; }
  .tuile b { display: block; font-family: var(--dsp); font-size: 30px; font-weight: 600;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-bottom: 7px; }
  .tuile b.vert { color: var(--vert-fonce); }
  .tuile-d { display: block; font-size: 14px; line-height: 1.45; color: var(--texte-2);
    display: flex; align-items: center; gap: 7px; }
  .tuile.alerte b { color: #9A6A00; }
  .tuile-d i { width: 7px; height: 7px; border-radius: 50%; background: #D97706; flex: 0 0 auto; }
  .bord-fin { margin: 0; padding: 18px 24px 20px; border-top: 1px solid var(--trait);
    background: var(--creme); font-size: 15px; line-height: 1.5; color: var(--texte-2); }

  /* ── Ce que le téléphone remplace ──────────────────────── */
  .remplace { display: grid; grid-template-columns: 1fr auto 1.25fr; align-items: center;
    gap: 26px; margin-bottom: 46px; }
  @media (max-width: 860px) { .remplace { grid-template-columns: 1fr; gap: 16px; }
    .remplace-fl { transform: rotate(90deg); justify-self: center; } }
  .remplace-q { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); margin-bottom: 14px; }
  .remplace-avant { border: 1px solid var(--trait); border-radius: 16px; padding: 20px 22px 18px;
    background: var(--creme); }
  .remplace-avant ul { list-style: none; margin: 0; padding: 0; }
  .remplace-avant li { padding: 11px 0; border-bottom: 1px solid var(--trait); }
  .remplace-avant li:last-child { border-bottom: none; }
  .obj { display: block; font-size: 17px; font-weight: 600; color: var(--gris);
    text-decoration: line-through; text-decoration-color: var(--gris-clair); }
  .det { display: block; font-size: 13.5px; color: var(--gris-clair); margin-top: 3px; }
  .remplace-fl { color: var(--vert); display: block; }
  .remplace-fl svg { width: 60px; height: 24px; display: block; }
  .remplace-apres { border: 1px solid var(--vert); border-radius: 16px; padding: 22px 24px 24px;
    background: #FFFFFF; box-shadow: 0 26px 58px -36px rgba(14,159,110,.8); }
  .remplace-apres .remplace-q { color: var(--vert); }
  .remplace-apres b { display: block; font-family: var(--dsp); font-size: 24px; font-weight: 600;
    letter-spacing: -0.025em; margin-bottom: 14px; }
  .remplace-apres ul { list-style: none; margin: 0; padding: 0; }
  .remplace-apres li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5;
    color: var(--texte-2); margin-bottom: 9px; }
  .remplace-apres li:last-child { margin-bottom: 0; }
  .remplace-apres li::before { content: "\2713"; position: absolute; left: 0;
    color: var(--vert); font-weight: 700; }

  /* ── L'imprévu, en schéma ──────────────────────────────── */
  .imprevu { display: grid; grid-template-columns: 1fr 1.35fr auto; gap: 26px;
    align-items: start; margin-bottom: 46px; }
  @media (max-width: 900px) { .imprevu { grid-template-columns: 1fr; gap: 18px; } }
  .imprevu-q { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); margin-bottom: 14px; }
  .imprevu-dit { background: var(--vert); border-radius: 18px; padding: 22px 24px 24px; }
  .imprevu-dit .imprevu-q { color: rgba(4,32,22,.6); }
  .imprevu-p { margin: 0; font-family: var(--dsp); font-size: 21px; font-weight: 600;
    letter-spacing: -0.02em; line-height: 1.35; color: #042016; }
  .imprevu-suite { border: 1px solid var(--trait); border-radius: 18px; padding: 22px 24px 24px;
    background: #FFFFFF; }
  .imprevu-suite .imprevu-q { color: var(--vert); }
  .imprevu-suite ol { list-style: none; margin: 0; padding: 0; counter-reset: pas; }
  .imprevu-suite li { counter-increment: pas; position: relative; padding: 0 0 14px 34px; }
  .imprevu-suite li:last-child { padding-bottom: 0; }
  .imprevu-suite li::before { content: counter(pas); position: absolute; left: 0; top: 1px;
    width: 22px; height: 22px; border-radius: 50%; background: var(--vert-pale);
    color: var(--vert-fonce); font-family: var(--mono); font-size: 12.5px; font-weight: 700;
    display: grid; place-items: center; }
  .imprevu-suite b { display: block; font-size: 16.5px; font-weight: 600; }
  .imprevu-suite span { display: block; font-size: 14.5px; color: var(--texte-2); margin-top: 2px; }
  .imprevu-gain { background: var(--encre); color: #FFFFFF; border-radius: 18px;
    padding: 24px 26px; text-align: center; min-width: 200px; }
  .gain-c { display: block; font-family: var(--dsp); font-size: 44px; font-weight: 600;
    letter-spacing: -0.035em; margin-bottom: 10px; }
  .gain-t { display: block; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.7); }

  /* ── L'éparpillement, et le fil ────────────────────────── */
  .eparpille { display: grid; grid-template-columns: 1fr auto 1.15fr; gap: 24px;
    align-items: center; margin-bottom: 40px; }
  @media (max-width: 900px) { .eparpille { grid-template-columns: 1fr; gap: 16px; }
    .epar-fl { transform: rotate(90deg); justify-self: center; } }
  .epar-q { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); margin-bottom: 14px; }
  .epar-avant { border: 1px solid var(--trait); border-radius: 18px; padding: 22px 24px 20px;
    background: var(--creme); }
  .epar-bulles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .bl { background: #FFFFFF; border: 1px solid var(--trait); border-radius: 999px;
    padding: 8px 14px; font-size: 14px; color: var(--gris); }
  .bl:nth-child(2n) { transform: rotate(-1.4deg); }
  .bl:nth-child(3n) { transform: rotate(1.2deg); }
  .epar-d { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--gris-clair); }
  .epar-d.vert { color: var(--vert-fonce); }
  .epar-fl { color: var(--vert); display: block; }
  .epar-fl svg { width: 60px; height: 24px; display: block; }
  .epar-apres { border: 1px solid var(--vert); border-radius: 18px; padding: 22px 24px 22px;
    background: #FFFFFF; box-shadow: 0 26px 58px -36px rgba(14,159,110,.8); }
  .epar-apres .epar-q { color: var(--vert); }
  .epar-apres b { display: block; font-family: var(--dsp); font-size: 22px; font-weight: 600;
    letter-spacing: -0.025em; margin-bottom: 14px; }
  .epar-fil { list-style: none; margin: 0 0 14px; padding: 0; }
  .epar-fil li { display: grid; grid-template-columns: 26px 11ch 1fr; align-items: baseline;
    gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
  .epar-fil li:last-child { border-bottom: none; }
  .epar-fil i { width: 9px; height: 9px; border-radius: 50%; justify-self: start; }
  .qui-cl { background: var(--vert); }
  .qui-eq { background: var(--encre); }
  .qui-do { background: var(--gris-clair); }
  .epar-fil span { font-size: 16px; font-weight: 600; }
  .epar-fil em { font-style: normal; font-size: 14.5px; line-height: 1.45; color: var(--texte-2); }

  /* ── Le coffre, en pièces ──────────────────────────────── */
  .coffre { border: 1px solid var(--trait); border-radius: 20px; overflow: hidden;
    background: #FFFFFF; margin-bottom: 46px;
    box-shadow: 0 40px 90px -62px rgba(17,18,20,.45); }
  .coffre-tete { display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 18px 24px; border-bottom: 1px solid var(--trait); background: var(--creme); }
  .coffre-q { font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris); }
  .coffre-n { font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--vert); }
  .coffre-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  @media (max-width: 900px) { .coffre-grille { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .coffre-grille { grid-template-columns: 1fr; } }
  .piece { padding: 20px 22px 22px; box-shadow: 1px 0 0 var(--trait), 0 1px 0 var(--trait); }
  .pc-t { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--vert); margin-bottom: 10px; }
  .piece b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.4;
    margin-bottom: 7px; }
  .pc-d { display: block; font-size: 14px; line-height: 1.45; color: var(--texte-2);
    margin-bottom: 12px; }
  .pc-vu { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gris); background: var(--creme);
    border-radius: 999px; padding: 5px 10px; }
  .coffre-fin { margin: 0; padding: 18px 24px 20px; border-top: 1px solid var(--trait);
    background: var(--creme); font-size: 15.5px; line-height: 1.5; color: var(--texte-2); }
  .coffre-fin b { color: var(--encre); font-weight: 600; }

  /* La partie où l'on se trouve : un bouton déjà enfoncé, pas un lien. */
  .ailleurs-liste .ici { display: block; padding: 24px 24px 26px; background: var(--vert-pale);
    box-shadow: 1px 0 0 var(--trait), 0 1px 0 var(--trait), inset 0 2px 5px rgba(5,103,74,.14);
    cursor: default; }
  .ailleurs-liste .ici b { color: var(--vert-fonce); }
  .ailleurs-liste .ici > span { color: var(--vert-fonce); opacity: .82; }
  .ailleurs-liste .ici em { display: block; margin-top: 12px; font-style: normal;
    font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--vert-fonce); }
  .ailleurs-liste .ici em::before { content: "\2713\00a0\00a0"; }

  /* ── Studio · la liste de matériaux qui sort du métré ──── */
  .matos { margin: 30px 0 4px; border: 1px solid var(--trait); border-radius: 18px;
    padding: 24px 26px 22px; background: var(--fond); }
  .matos-t { margin: 0 0 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); }

  .cotes { border: 1px solid var(--trait); border-radius: 14px; padding: 16px 18px 14px;
    background: var(--surface); }
  .cotes-q { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); margin-bottom: 12px; }
  .cotes-l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
  .cotes-l li { display: flex; align-items: baseline; gap: 7px; }
  .cotes-l b { font-family: var(--dsp); font-size: 26px; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; }
  .cotes-l span { font-size: 13px; color: var(--texte-2); }
  .cotes-d { margin: 12px 0 0; font-size: 13px; color: var(--texte-2); }

  .matos-fl { display: block; width: 22px; margin: 14px auto 12px; color: var(--vert); }
  .matos-fl svg { display: block; width: 100%; height: auto; }

  .lot { list-style: none; margin: 0; padding: 0; border: 1px solid var(--trait);
    border-radius: 14px; overflow: hidden; }
  .lot li { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1.3fr) auto;
    align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--trait); }
  .lot li:first-child { border-top: none; }
  .lot-n { font-weight: 600; font-size: 15px; }
  .lot-n span { display: block; font-weight: 400; font-size: 12.5px; color: var(--gris-clair); }
  .lot-c { font-family: var(--mono); font-size: 13.5px; color: var(--texte-2);
    font-variant-numeric: tabular-nums; }
  .lot-q { justify-self: end; text-align: right; font-weight: 600; font-size: 14.5px;
    color: var(--vert-fonce); background: var(--vert-pale); border-radius: 999px;
    padding: 5px 13px; white-space: nowrap; }
  @media (max-width: 760px) {
    .lot li { grid-template-columns: 1fr auto; row-gap: 6px; }
    .lot-c { grid-column: 1 / -1; order: 3; }
    .matos { padding: 20px 18px 18px; }
    .cotes-l b { font-size: 22px; }
  }

  .rendu { margin: 16px 0 0; font-size: 14px; color: var(--texte-2); }
  .rendu span { color: var(--gris-clair); }

  /* ── Chantier · comment le client accède à son suivi ───── */
  .cmt { margin: 26px 0 4px; border: 1px solid var(--trait); border-radius: 18px;
    padding: 24px 26px 22px; }
  .cmt-t { margin: 0 0 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gris-clair); }
  .cmt-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .cmt-l li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
  .cmt-l span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--vert-pale); color: var(--vert-fonce); font-family: var(--mono);
    font-size: 13.5px; font-weight: 600; }
  .cmt-l div { font-size: 15.5px; color: var(--texte-2); }
  .cmt-l b { color: var(--texte); font-weight: 600; }
  .cmt-n { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--trait);
    font-size: 14px; color: var(--texte-2); }
  @media (max-width: 620px) { .cmt { padding: 20px 18px 18px; } }

  /* L'onomatopée : elle n'arrive qu'avec le fourgon, et repart avec lui. */
  .vroum { position: absolute; left: 0; bottom: 52px; z-index: 1; opacity: 0;
    font-family: "Bangers", "Archivo Black", Impact, sans-serif; font-size: 40px;
    letter-spacing: .04em; color: var(--vert); transform: translateX(-580px) rotate(-7deg);
    -webkit-text-stroke: 1.5px var(--encre); paint-order: stroke fill; pointer-events: none; }
  .camion.passe .vroum { animation: vroum 5.4s cubic-bezier(.45,0,.55,1) forwards; }
  @keyframes vroum {
    0%   { transform: translateX(-580px) rotate(-7deg); opacity: 0; }
    16%  { opacity: .95; }
    72%  { opacity: .95; }
    100% { transform: translateX(min(98vw, 1120px)) rotate(-7deg); opacity: 0; }
  }
  @media (max-width: 620px) { .vroum { font-size: 28px; bottom: 40px;
    -webkit-text-stroke: 1.2px var(--encre); } }
  @media (prefers-reduced-motion: reduce) { .vroum { display: none; } }

  /* ── Le relais : agir au moment où la démonstration a convaincu ── */
  .relais { margin: 44px 0 8px; padding: 22px 26px; border-radius: 18px;
    background: var(--surface); border: 1px solid var(--trait);
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    column-gap: 26px; row-gap: 10px; }
  /* Placement explicite : un élément à ligne définie est posé AVANT les
     automatiques, et le bouton doublait le texte. */
  .relais-txt { grid-column: 1; grid-row: 1; }
  .relais-txt b { display: block; font-family: var(--dsp); font-size: 21px;
    letter-spacing: -0.02em; line-height: 1.14; }
  .relais-txt span { display: block; margin-top: 4px; font-size: 15px; color: var(--texte-2); }
  .relais-b { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center;
    background: var(--vert); color: #FFFFFF; font-weight: 600; font-size: 15.5px;
    text-decoration: none; border-radius: 11px; padding: 13px 22px; white-space: nowrap;
    transition: background .18s ease; }
  .relais-b:hover { background: var(--vert-fonce); }
  .relais-b:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 3px; }
  /* Portait une mention en 10 px majuscules ; elle porte maintenant un vrai
     lien — on ne rend pas cliquable ce qui n'est pas lisible. */
  .relais-fin { grid-column: 1; grid-row: 2; margin: 0; font-size: 13.5px; color: var(--texte-2); }
  @media (max-width: 680px) {
    .relais { grid-template-columns: 1fr; padding: 20px; }
    .relais-txt, .relais-b, .relais-fin { grid-column: 1; grid-row: auto; }
    .relais-b { justify-self: stretch; text-align: center; }
    .relais-txt b { font-size: 18px; }
    .relais-fin { grid-column: auto; }
  }

  /* ── La seconde porte : l'essai sans compte ──────────────── */
  /* Ce bloc est sur fond vert foncé : les jetons clairs y sont illisibles et
     le lien y disparaissait complètement. */
  .final-ou { margin: 14px 0 0; font-size: 14.5px; color: rgba(255,255,255,.80); }
  .final-ou a { color: #FFFFFF; font-weight: 600; text-decoration: underline;
    text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
  .final-ou a:hover { color: var(--vert-pale); }
  .final-ou a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 3px; }
  .relais-fin a { color: var(--vert-fonce); font-weight: 600; text-decoration: underline;
    text-underline-offset: 2px; }

  /* (17/10/2026) Écrans réels de l'appli dans un cadre de téléphone (page Studio). */
  .tel-img { display: block; width: 100%; max-width: 290px; height: auto; margin: 0 auto; border-radius: 28px; border: 5px solid #1C2B22; box-shadow: 0 26px 60px -24px rgba(15, 40, 30, .45); background: #FFFFFF; }
  .rub-v.rub-tel { background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 34px 16px; }
  .lien-suite { color: var(--vert-fonce); font-weight: 700; text-decoration: none; }
  .lien-suite:hover { text-decoration: underline; }
  .studio-pour { margin: 18px 0 0; color: var(--texte-2); font-size: 15.5px; }

  /* (17/10/2026) Le comparateur avant / après du salon d'exemple (avant-apres.js). */
  .ba-comp { position: relative; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; background: #ECE6DA; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; box-shadow: 0 26px 60px -28px rgba(15, 40, 30, .45); }
  .ba-comp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
  .ba-comp .ba-clip { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; }
  .ba-comp .ba-clip img { width: auto; max-width: none; }
  .ba-comp .ba-trait { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: #FFFFFF; box-shadow: 0 0 8px rgba(0, 0, 0, .35); pointer-events: none; }
  .ba-comp .ba-trait i { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #FFFFFF; color: var(--vert-fonce); display: grid; place-items: center; font: 800 16px/1 var(--txt); font-style: normal; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
  .ba-comp .ba-lbl { position: absolute; top: 12px; font: 700 11px/1 var(--txt); letter-spacing: .1em; text-transform: uppercase; color: #FFFFFF; background: rgba(10, 29, 20, .6); padding: 6px 10px; border-radius: 999px; pointer-events: none; }
  .ba-comp .ba-lbl.av { left: 12px; } .ba-comp .ba-lbl.ap { right: 12px; }
  .ba-legende { margin: 10px 0 0; font-size: 13.5px; color: var(--texte-2); }
  .rub-v.rub-ba { background: transparent; padding: 0; display: block; }
  .rub-v.rub-ba { width: auto; max-width: 760px; margin-left: auto; margin-right: auto; }
  /* La démonstration « Dites à l'assistant » sous le comparateur. */
  .deco-demo { margin-top: 16px; border: 1px solid var(--trait); border-radius: 18px; padding: 18px; background: #FFFFFF; display: flex; flex-direction: column; gap: 12px; }
  .dd-q { margin: 0; font-weight: 700; }
  .dd-form { display: flex; gap: 8px; }
  .dd-form input { flex: 1; min-width: 0; font: 500 16px var(--txt); border: 1.5px solid var(--trait); border-radius: 12px; padding: 12px 14px; }
  .dd-form button { border: 0; border-radius: 12px; background: var(--vert); color: #FFFFFF; font: 700 15.5px var(--txt); padding: 0 18px; cursor: pointer; }
  .dd-puces { display: flex; flex-wrap: wrap; gap: 8px; }
  .dd-puces button { border: 1.5px solid var(--trait); background: #FFFFFF; border-radius: 999px; padding: 8px 14px; font: 600 14px var(--txt); color: var(--texte); cursor: pointer; text-align: left; }
  .dd-puces button[aria-pressed="true"] { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); }
  .dd-rep { margin: 0; min-height: 3em; color: var(--texte); }
  @media (max-width: 620px) { .dd-rep { min-height: 4.5em; } }
  .dd-rep a { color: var(--vert-fonce); font-weight: 700; }
  /* (18/10) « Rejouer » garde sa place même caché : l'en-tête de l'exemple ne change pas de hauteur. */
  #rejouer[hidden] { display: inline-flex !important; visibility: hidden; }
  .dd-note { margin: 0; font-size: 13px; color: var(--texte-2); }
  .dd-attente { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--vert-pale); border-top-color: var(--vert); animation: dd-tour .8s linear infinite; vertical-align: -1px; }
  @keyframes dd-tour { to { transform: rotate(360deg); } }
  .ba-comp.dd-charge > img { filter: blur(3px) brightness(.95); transition: filter .3s; }

  /* (17/10/2026, Moctar : « une harmonie entre l'écriture de l'appli et celle du site, notre vraie identité
     visuelle ») La charte de l'appli (app/css/app.css) : Inter partout, titres en 800-900, petites capitales
     espacées pour les intitulés, les mêmes verts et le même gris-vert. */
  :root { --mono: "Inter", -apple-system, "Segoe UI", Helvetica, sans-serif; --texte: #1C2B22; --encre: #1C2B22; --texte-2: #5A7268; --gris: #5A7268;
          --trait: #DCE6E0; --bord: #DCE6E0; --surface: #F4F7F5; --creme: #F4F7F5; --vert: #228B5B; --vert-fonce: #1B7049; --vert-pale: #F0FDF4; }
  h1 { font-weight: 900; letter-spacing: -0.025em; }
  h2, h3, .dsp { font-weight: 800; letter-spacing: -0.02em; }
  .eyebrow { font-family: var(--txt); font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
  /* Une question ? WhatsApp, en bas de page (plus de bouton flottant sur ces pages). */
  .pied-wa { display: inline-flex; align-items: center; gap: 8px; color: var(--vert-fonce); font-weight: 700; text-decoration: none; }
  .pied-wa svg { width: 18px; height: 18px; }
  .pied-wa:hover { text-decoration: underline; }
  /* (17/10/2026, Moctar) Les suggestions passent au vert au survol, et la suggestion choisie reste verte. */
  .dd-puces button { transition: background .15s, border-color .15s, color .15s; }
  .dd-puces button:hover, .dd-puces button:focus-visible { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); }
  .dd-puces button[aria-pressed="true"], .dd-puces button[aria-pressed="true"]:hover { background: var(--vert); border-color: var(--vert); color: #FFFFFF; }
  /* Le bouton WhatsApp flottant (whatsapp-flottant.js) : le rond seul sur téléphone, avec son texte sur ordinateur. */
  .wa-flottant { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 10px;
    background: #25D366; color: #FFFFFF; text-decoration: none; font: 700 15px var(--txt); border-radius: 999px; padding: 12px 18px 12px 14px;
    box-shadow: 0 10px 28px -8px rgba(15, 40, 30, .45); transition: opacity .2s, transform .2s; }
  .wa-flottant svg { width: 26px; height: 26px; flex: 0 0 auto; }
  .wa-flottant.cache { opacity: 0; transform: translateY(12px); pointer-events: none; }
  @media (max-width: 760px) { .wa-flottant { width: 56px; height: 56px; padding: 0; justify-content: center; } .wa-flottant span { display: none; } }
  /* (18/10/2026, Moctar : « un vrai téléphone », « le dernier iPhone Pro Max ») Un téléphone dessiné : cadre en
     titane, îlot noir, boutons latéraux, barre d'état. L'écran garde les proportions d'une vraie capture. */
  .telephone { position: relative; width: 100%; max-width: 300px; margin: 0 auto; padding: 11px; border-radius: 58px;
    background: linear-gradient(145deg, #4A4D52 0%, #2B2D31 22%, #1A1B1E 50%, #34363A 78%, #55585D 100%);
    box-shadow: 0 0 0 1.5px #0B0C0E inset, 0 0 0 2px #6B6E73, 0 34px 70px -30px rgba(15, 40, 30, .55); }
  .telephone::before, .telephone::after { content: ""; position: absolute; width: 4px; border-radius: 3px; background: #3A3C40; }
  .telephone::before { left: -4px; top: 22%; height: 9%; box-shadow: 0 64px 0 #3A3C40, 0 -38px 0 -1px #3A3C40; }
  .telephone::after { right: -4px; top: 27%; height: 14%; }
  .tel-ecran { position: relative; overflow: hidden; border-radius: 47px; background: #000; }
  .tel-ecran img { display: block; width: 100%; height: auto; }
  .tel-ilot { position: absolute; z-index: 3; top: 10px; left: 50%; width: 31%; height: 26px; margin-left: -15.5%; border-radius: 20px; background: #000; }
  .tel-barre { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 46px; display: flex; align-items: center; justify-content: space-between;
    padding: 4px 24px 0 30px; font: 700 13px/1 var(--txt); color: #FFFFFF; pointer-events: none; }
  .telephone[data-barre="clair"] .tel-barre { color: #1C2B22; }
  .tel-barre i { width: 54px; height: 11px; background:
      linear-gradient(currentColor, currentColor) 0 100% / 3px 4px no-repeat, linear-gradient(currentColor, currentColor) 5px 100% / 3px 6px no-repeat,
      linear-gradient(currentColor, currentColor) 10px 100% / 3px 8px no-repeat, linear-gradient(currentColor, currentColor) 15px 100% / 3px 11px no-repeat,
      linear-gradient(currentColor, currentColor) 32px 0 / 20px 11px no-repeat; border-radius: 2px; opacity: .95; }
  /* L'écran capturé n'a pas de barre d'état : on lui laisse la place, dans la couleur de son en-tête. */
  .tel-ecran::before { content: ""; display: block; height: 44px; background: var(--haut, #1F8A57); }
  .telephone[data-barre="clair"] .tel-ecran::before { background: var(--haut, #FFFFFF); }
  /* Le téléphone garde ses proportions à toutes les tailles (galerie, colonnes étroites) : unités de son conteneur. */
  .telephone { container-type: inline-size; padding: 3.6cqw; border-radius: 19cqw; }
  .tel-ecran { border-radius: 15.5cqw; }
  .tel-ilot { top: 3.3cqw; height: 8.6cqw; width: 31%; border-radius: 6cqw; }
  .tel-barre { height: 15cqw; padding: 1.3cqw 8cqw 0 10cqw; font-size: 4.4cqw; }
  .tel-barre i { width: 17.5cqw; height: 3.6cqw; }
  .tel-ecran::before { height: 14.5cqw; }
  /* (18/10) Correction : le cadre ne peut pas se mesurer lui-même. .telephone est le conteneur (sans dessin) ;
     .tel-cadre porte le titane, les boutons et l'arrondi, en proportion de la largeur du téléphone. */
  .telephone { container-type: inline-size; width: 100%; max-width: 300px; margin: 0 auto; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .telephone::before, .telephone::after { content: none; }
  .tel-cadre { position: relative; padding: 3.4cqw; border-radius: 17cqw;
    background: linear-gradient(145deg, #5A5D62 0%, #2E3034 20%, #1B1C1F 50%, #35373B 80%, #5E6166 100%);
    box-shadow: 0 0 0 1.5px #0B0C0E inset, 0 0 0 1px #75787D, 0 30px 60px -28px rgba(15, 40, 30, .55); }
  .tel-cadre::before, .tel-cadre::after { content: ""; position: absolute; width: 1.3cqw; border-radius: 1cqw; background: #3A3C40; }
  .tel-cadre::before { left: -1.1cqw; top: 21%; height: 7%; box-shadow: 0 10cqw 0 #3A3C40; }
  .tel-cadre::after { right: -1.1cqw; top: 26%; height: 12%; }
  .tel-ecran { border-radius: 14cqw; }
  /* (18/10) La barre d'état prolonge l'écran lui-même : la première ligne de l'image, étirée vers le haut.
     Le dégradé de l'en-tête de Studio continue sans couture (Moctar : « pourquoi on a deux tons de vert ? »). */
  .tel-ecran::before { background: var(--fond) 0 0 / 100% 9000% no-repeat, var(--haut, #FFFFFF); }
  .telephone[data-barre="clair"] .tel-ecran::before { background: var(--fond) 0 0 / 100% 9000% no-repeat, var(--haut, #FFFFFF); }
  /* (18/10) Le salon d'exemple, clair (photo libre Pexels) : format 3:2, celui des photos. */
  .ba-comp { aspect-ratio: 3 / 2; }
  /* (18/10) La barre du bas de l'appli ne touche plus l'arrondi de l'écran : une bande comme sur un iPhone,
     avec l'indicateur d'accueil, prolonge le bas de la capture. */
  /* (18/10, Moctar : « un genre d'espace noir ») l'indicateur d'accueil est un trait fin aux bouts arrondis,
     à l'échelle d'un iPhone (134 × 5 points), pas une ellipse floue. */
  .tel-ecran::after { content: ""; display: block; height: 7cqw; background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 5'%3E%3Crect width='134' height='5' rx='2.5' fill='%231C2B22'/%3E%3C/svg%3E") 50% 50% / 36% auto no-repeat,
      var(--bas, #FFFFFF); }
  /* (18/10, Moctar) Plus de case « 21 h » : l'imprévu tient sur deux colonnes. */
  .imprevu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important; }
  @media (max-width: 860px) { .imprevu { grid-template-columns: 1fr !important; } }

  /* (18/10, Moctar) « Aujourd'hui, pour un devis » : chaque ligne se barre l'une après l'autre. */
  .jsok .remplace .obj { text-decoration: none; background: linear-gradient(var(--gris-clair), var(--gris-clair)) no-repeat 0 58% / 0 2px;
    transition: background-size .55s ease, color .55s ease; display: inline; }
  .jsok .remplace .det { transition: opacity .55s ease; }
  .jsok .remplace.vu .obj { background-size: 100% 2px; color: var(--gris-clair); }
  .jsok .remplace.vu li:nth-child(1) .obj { transition-delay: .5s; }
  .jsok .remplace.vu li:nth-child(2) .obj { transition-delay: 1.3s; }
  .jsok .remplace.vu li:nth-child(3) .obj { transition-delay: 2.1s; }
  .jsok .remplace.vu li:nth-child(4) .obj { transition-delay: 2.9s; }
  .jsok .remplace .obj + .det { margin-top: 6px; }
  @media (prefers-reduced-motion: reduce) { .jsok .remplace .obj { transition: none; } }
  .dossier-l { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; }
  .dossier-l li { position: relative; padding-left: 22px; }
  .dossier-l li::before { content: "\2713"; position: absolute; left: 0; color: var(--vert); font-weight: 700; }

  /* (18/10, Moctar) Trois modèles de devis à la marque de l'artisan. */
  .modeles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .mod { --c: #228B5B; background: #fff; border: 1px solid var(--trait); border-radius: 12px; padding: 14px 12px 34px;
    position: relative; box-shadow: 0 10px 24px -14px rgba(15, 60, 40, .35); display: flex; flex-direction: column; gap: 7px; }
  .mod:nth-child(2) { transform: translateY(-14px); }
  .mod-tete { display: flex; gap: 8px; align-items: center; padding-bottom: 9px; margin-bottom: 3px; }
  .mod-logo { font-style: normal; width: 26px; height: 26px; border-radius: 7px; background: var(--c); color: #fff;
    font: 700 10px var(--sans, Inter, sans-serif); display: grid; place-items: center; flex: none; }
  .mod-tete span { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .mod-tete b { height: 7px; width: 70%; border-radius: 4px; background: var(--c); }
  .mod-tete em { height: 5px; width: 45%; border-radius: 3px; background: #DCE6E0; }
  .mod-l { margin: 0; height: 5px; border-radius: 3px; background: #E4ECE7; width: 88%; }
  .mod-l.l1 { width: 60%; } .mod-l.l2 { width: 74%; }
  .mod-tab { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
  .mod-tab p { margin: 0; height: 9px; border-radius: 2px; background: #F1F5F2; }
  .mod-tot { margin: 4px 0 0 auto; height: 10px; width: 42%; border-radius: 3px; background: var(--c); }
  .mod figcaption { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--gris); }
  .mod-classique .mod-tete { border-bottom: 2px solid var(--c); }
  .mod-classique .mod-tab p:first-child { background: var(--c); opacity: .85; }
  .mod-moderne { --c: #1F5F8B; }
  .mod-moderne .mod-tete { background: var(--c); margin: -14px -12px 3px; padding: 12px; border-radius: 12px 12px 0 0; }
  .mod-moderne .mod-logo { background: #fff; color: var(--c); }
  .mod-moderne .mod-tete b { background: #fff; } .mod-moderne .mod-tete em { background: rgba(255,255,255,.5); }
  .mod-moderne .mod-tab p:nth-child(even) { background: #E8F0F6; }
  .mod-epure { --c: #8A5A2B; }
  .mod-epure .mod-logo { background: none; color: var(--c); border: 1.5px solid var(--c); }
  .mod-epure .mod-tete b { background: #2A2A2A; height: 6px; } .mod-epure .mod-tab p { background: none; border-bottom: 1px solid #E4E4E4; border-radius: 0; }
  .mod-epure .mod-tot { background: none; border-top: 2px solid var(--c); border-radius: 0; height: 6px; }
  @media (max-width: 560px) { .modeles { gap: 8px; } .mod { padding: 10px 8px 30px; } .mod-moderne .mod-tete { margin: -10px -8px 3px; padding: 9px 8px; } .mod-logo { width: 20px; height: 20px; font-size: 8px; } }

  /* (18/10) Le dossier avant travaux, comme dans l'appli. */
  .liasse-carte { background: #fff; border: 1.5px solid #D3E3DA; border-radius: 16px; padding: 18px 18px 16px;
    display: flex; flex-direction: column; gap: 6px; box-shadow: 0 18px 40px -24px rgba(15, 60, 40, .4); max-width: 460px; margin: 0 auto; }
  .liasse-carte > b { font-size: 17px; color: #1C2B22; }
  .liasse-ch { font-size: 13px; color: var(--gris); margin-bottom: 6px; }
  .liasse-carte ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .liasse-carte li { display: flex; gap: 10px; align-items: flex-start; background: #F7FBF8; border: 1px solid #E7EEEA; border-radius: 10px; padding: 9px 11px; }
  .liasse-carte li i { font-style: normal; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #DCFCE7; color: #065F46;
    display: grid; place-items: center; font-size: 12px; font-weight: 800; }
  .liasse-carte li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .liasse-carte li b { font-size: 14.5px; color: #1C2B22; } .liasse-carte li span { font-size: 12.5px; color: var(--gris); }
  .liasse-btn { margin: 8px 0 0; text-align: center; background: #228B5B; color: #fff; font-weight: 700; border-radius: 12px; padding: 12px; font-size: 15px; }

  /* (18/10) Le PV de réception signé. */
  .pv-vrai header b { font-size: 20px; }
  .pv-garanties { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .pv-garanties li { border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
  .pv-garanties span { font-size: 12px; color: var(--gris); } .pv-garanties b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
  @media (max-width: 560px) { .pv-garanties { grid-template-columns: 1fr; } }
  .pv-signatures { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
  .pv-signatures div { border: 1px dashed #BFD3C7; border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; }
  .pv-signatures span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
  .pv-signatures svg { width: 100%; max-width: 170px; height: 44px; }
  .pv-signatures path { fill: none; stroke: #1F3A8A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 400; stroke-dashoffset: 0; }
  .jsok .pv-vrai path { stroke-dashoffset: 400; transition: stroke-dashoffset 1.6s ease .4s; }
  .jsok .pv-vrai.vu path, .jsok .rub.vu .pv-vrai path { stroke-dashoffset: 0; }
  .jsok .rub.vu .pv-signatures div:nth-child(2) path { transition-delay: 1.8s; }
  .pv-signatures i { font-style: normal; font-size: 12.5px; color: #1C2B22; font-weight: 600; }
  .jsok .pv-vrai footer { opacity: 1; }

  /* (18/10, Moctar) L'imprévu en animation : tâches, équipe, puis planning. */
  .imprevu-suite.pl-actif > ol { display: none; }
  .pl-demo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .pl-etat { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--vert); font-weight: 600; min-height: 20px; }
  .pl-etat i { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); flex: none; animation: plPulse 1.2s ease-in-out infinite; }
  .t4 .pl-etat i { animation: none; }
  @keyframes plPulse { 50% { opacity: .3; } }
  .pl-taches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .pl-taches li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
    background: #fff; border: 1px solid var(--trait); border-radius: 10px; padding: 8px 11px;
    opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
  .pl-taches b { font-size: 14px; font-weight: 600; min-width: 0; }
  .pl-d { font-size: 12px; color: var(--gris); white-space: nowrap; }
  .pl-qui { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px; color: #fff;
    opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s ease; }
  .pl-K { background: #228B5B; } .pl-T { background: #1F5F8B; }
  .t1 .pl-taches li { opacity: 1; transform: none; }
  .t1 .pl-taches li:nth-child(2) { transition-delay: .38s; } .t1 .pl-taches li:nth-child(3) { transition-delay: .76s; }
  .t1 .pl-taches li:nth-child(4) { transition-delay: 1.14s; } .t1 .pl-taches li:nth-child(5) { transition-delay: 1.52s; }
  .t2 .pl-qui { opacity: 1; transform: none; }
  .t2 .pl-taches li:nth-child(2) .pl-qui { transition-delay: .3s; } .t2 .pl-taches li:nth-child(3) .pl-qui { transition-delay: .6s; }
  .t2 .pl-taches li:nth-child(4) .pl-qui { transition-delay: .9s; } .t2 .pl-taches li:nth-child(5) .pl-qui { transition-delay: 1.2s; }
  .t3 .pl-taches { display: none; }
  .pl-grille { display: none; grid-template-columns: 58px repeat(8, minmax(0, 1fr)); grid-template-rows: auto 38px 38px; gap: 5px 3px;
    background: #fff; border: 1px solid var(--trait); border-radius: 12px; padding: 10px; }
  .t3 .pl-grille { display: grid; }
  .pl-jour { font-size: 11px; color: var(--gris); text-align: center; grid-row: 1; }
  .pl-sem { border-left: 1px dashed var(--trait); }
  .pl-nom { grid-column: 1; font-size: 12.5px; font-weight: 600; align-self: center; }
  .pl-barre { border-radius: 7px; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 4px; min-width: 0; }
  .pl-sdb { background: #E7EEEA; color: var(--gris); }
  .pl-cui { background: #228B5B; color: #fff; opacity: 0; transform: translateX(-14px); transition: opacity .4s ease, transform .4s ease;
    transition-delay: calc(var(--k) * .42s + .3s); }
  .pl-sechage { background: repeating-linear-gradient(135deg, #F3E6C8 0 6px, #FBF4E2 6px 12px); color: #8A5A2B;
    opacity: 0; transition: opacity .4s ease; transition-delay: calc(var(--k) * .42s + .3s); }
  .t3 .pl-cui, .t3 .pl-sechage { opacity: 1; transform: none; }
  .pl-fin { display: flex; flex-wrap: wrap; gap: 6px; }
  .pl-fin span { font-size: 12.5px; font-weight: 600; color: #065F46; background: #DCFCE7; border-radius: 20px; padding: 5px 11px;
    opacity: 0; transition: opacity .4s ease; }
  .pl-fin span::before { content: "\2713\00a0"; }
  .t4 .pl-fin span { opacity: 1; } .t4 .pl-fin span:nth-child(2) { transition-delay: .5s; }
  @media (max-width: 480px) { .pl-grille { grid-template-columns: 46px repeat(8, minmax(0, 1fr)); padding: 8px 6px; gap: 5px 2px; }
    .pl-barre { font-size: 9.5px; padding: 0 2px; } .pl-jour { font-size: 9.5px; } .pl-nom { font-size: 11px; } }
  /* isoler la démo des styles de la liste numérotée « Ce qui se passe » */
  .imprevu-suite .pl-demo li { padding: 8px 11px; counter-increment: none; }
  .imprevu-suite .pl-demo li::before { content: none; display: none; }
  .imprevu-suite .pl-demo b { display: block; font-size: 14px; }
  .imprevu-suite .pl-demo span { margin-top: 0; }
  .imprevu-suite .pl-demo .pl-etat span { display: inline; font-size: 13.5px; color: var(--vert); }
  .imprevu-suite .pl-demo .pl-d { display: inline; font-size: 12px; color: var(--gris); }
  .imprevu-suite .pl-demo .pl-jour { display: block; font-size: 11px; color: var(--gris); }
  .imprevu-suite .pl-demo .pl-nom { display: block; font-size: 12.5px; color: var(--texte, #1C2B22); font-weight: 600; }
  .imprevu-suite .pl-demo .pl-barre { display: flex; font-size: 11px; color: #fff; }
  .imprevu-suite .pl-demo .pl-sdb { color: var(--gris); }
  .imprevu-suite .pl-demo .pl-sechage { color: #8A5A2B; }
  .imprevu-suite .pl-demo .pl-fin span { display: inline-block; font-size: 12.5px; color: #065F46; }
  .pl-grille { grid-template-rows: auto 34px 34px; }
  @media (max-width: 480px) {
    .pl-grille { grid-template-columns: 50px repeat(8, minmax(0, 1fr)); }
    .imprevu-suite .pl-demo .pl-barre { font-size: 9px; padding: 0 1px; }
    .imprevu-suite .pl-demo .pl-jour { font-size: 9.5px; } .imprevu-suite .pl-demo .pl-nom { font-size: 11px; } }
  .pl-barre em { font-style: normal; } .pl-court { display: none; }
  @media (max-width: 480px) { .pl-long { display: none; } .pl-court { display: inline; } }
  .pl-revoir { border: 0; background: none; font: 600 12.5px var(--sans, Inter, sans-serif); color: var(--gris); text-decoration: underline;
    cursor: pointer; padding: 5px 4px; opacity: 0; transition: opacity .4s ease 1s; }
  .t4 .pl-revoir { opacity: 1; }

  /* (18/10, Moctar) La marque BatiSpot Studio, là où on présente Studio. */
  .marque-studio { display: inline-flex; align-items: center; gap: 10px; font-family: var(--txt, Inter, sans-serif); font-size: 19px;
    font-weight: 600; color: #1C2B22; letter-spacing: -.01em; margin: 0 0 12px; line-height: 1; }
  .marque-studio img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
  .marque-studio b { color: var(--vert, #228B5B); font-weight: 700; }
  .marque-studio small { font-size: 13px; font-weight: 600; color: var(--gris); margin-left: 4px; letter-spacing: 0; }
  /* fond sombre uniquement (h-inv ne fait qu'inverser les colonnes) */
  .marque-studio.claire { color: #fff; } .marque-studio.claire b { color: #9BE3BD; } .marque-studio.claire small { color: rgba(255,255,255,.7); }
  .marque-studio { flex-wrap: wrap; row-gap: 6px; } .marque-studio small { white-space: nowrap; }
  .h-txt > p.marque-studio, p.marque-studio { color: #1C2B22; font-size: 19px; } .h-txt > p.marque-studio.claire { color: #fff; }

  /* (18/10) Barre d'action sur téléphone : un geste sous le pouce ; le bouton WhatsApp flottant (js/whatsapp.js) passe au-dessus. */
  .barre-action { display: none; }
  @media (max-width: 760px) {
    html body.bs-has-sticky-cta #bs-wa { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
    .barre-action { display: flex; gap: 10px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96);
      border-top: 1px solid #DCE8E1; box-shadow: 0 -10px 30px -18px rgba(15, 60, 40, .35);
      transform: translateY(110%); transition: transform .28s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .barre-action.visible { transform: none; }
    .barre-action-b { flex: 1; min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 14px;
      background: var(--vert, #228B5B); color: #fff; font: 700 16.5px var(--txt, Inter, sans-serif); text-decoration: none; }
    .barre-action-wa { flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
      background: #E9F7EF; color: #1F9D55; border: 1px solid #CDEBD9; }
    .barre-action-wa svg { width: 26px; height: 26px; }
  }
  @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .barre-action { transition: none; } }

  /* (18/10, Moctar) La marque BatiSpot Studio : « BatiSpot » dessiné comme dans le logo Pro (mêmes lettres),
     seul « Studio » a sa propre écriture. Proportions du logo Pro : icône = 2 × hauteur des majuscules. */
  p.marque-studio { font-size: 22px; gap: 0.36em; align-items: center; }
  .marque-studio .ms-ico { width: 1.43em; height: 1.43em; border-radius: 0.36em; }
  .marque-studio .ms-mot { display: inline-flex; align-items: baseline; gap: 0.22em; line-height: 1; }
  /* « B » = 18,9 unités sur 26,8, ligne de base à 20,9 : majuscule à la hauteur de celles d'Inter (0,727 em). */
  .marque-studio .ms-batispot { height: 1.031em; width: auto; position: relative; top: 0.227em; }
  .marque-studio .ms-mot b { font-weight: 600; color: var(--vert, #228B5B); letter-spacing: -0.005em; }
  .marque-studio small { font-size: 13px; }
  .marque-studio.claire .ms-batispot { filter: brightness(0) invert(1); }
  @media (max-width: 480px) { p.marque-studio { font-size: 20px; } }
  /* Le mot « BatiSpot » est une image : pas d'angles arrondis (ils rognaient le « B »). */
  .marque-studio img.ms-batispot { border-radius: 0; width: auto; }
  @media (max-width: 760px) { .avec-barre body { padding-bottom: 76px; } }

  /* (18/10, Moctar : « harmonise les logos ») La marque Studio suit les proportions exactes du logo Pro :
     majuscules = 0,479 × l'icône, écart icône-mot = 0,255 × l'icône. Tout se règle par --h (taille de l'icône).
     En-tête : icône du logo Pro ≈ 32 px ; cartes « Nos applications » : 30 px (logos de 40 px de haut). */
  p.marque-studio { --h: 32px; font-size: calc(var(--h) * .659); gap: calc(var(--h) * .255); align-items: center; }
  .h-txt > p.marque-studio, p.marque-studio { font-size: calc(var(--h) * .659); }
  .marque-studio img.ms-ico { width: var(--h); height: var(--h); border-radius: calc(var(--h) * .24); }
  .marque-studio .ms-mot { gap: .24em; }
  .marque-studio img.ms-batispot { height: calc(var(--h) * .679); top: calc(var(--h) * .1495); }
  .marque-studio .ms-mot b { font-size: 1em; }
  .marque-studio small { font-size: 13px; }
  @media (max-width: 480px) { p.marque-studio { --h: 30px; font-size: calc(var(--h) * .659); } }

  /* (18/10, Moctar) « Vous demandez, il répond » : la question tapée, la réponse écrite, la source. */
  .savoir-haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-bottom: 34px; }
  .savoir-haut .savoir-tete { margin-bottom: 0; }
  @media (max-width: 900px) { .savoir-haut { grid-template-columns: 1fr; gap: 26px; } }
  .qd { margin: 0; min-width: 0; }
  .qd-titre { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vert); }
  .qd-carte { background: #fff; border: 1px solid #DCE8E1; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(15, 60, 40, .45); }
  .qd-tete { display: flex; align-items: center; gap: 10px; background: #228B5B; color: #fff; font-weight: 700; font-size: 16px; padding: 14px 18px; }
  .qd-tete svg { width: 20px; height: 20px; }
  .qd-corps { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #F4F8F5; height: 300px; overflow-y: auto; scroll-behavior: smooth; }
  .qd-moi { align-self: flex-end; max-width: 85%; background: #228B5B; color: #fff; border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 15px; line-height: 1.4; }
  .qd-lui { align-self: flex-start; max-width: 92%; background: #fff; border: 1px solid #DCE8E1; border-radius: 16px 16px 16px 4px; padding: 11px 14px; font-size: 15px; line-height: 1.5; color: #1C2B22; }
  .qd-source { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #0F5132; background: #E3F4EA; border-radius: 8px; padding: 5px 9px; display: inline-block; animation: qdApparait .4s ease; }
  @keyframes qdApparait { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .qd-points { align-self: flex-start; display: flex; gap: 5px; background: #fff; border: 1px solid #DCE8E1; border-radius: 14px; padding: 12px 14px; }
  .qd-points i { width: 7px; height: 7px; border-radius: 50%; background: #9DBBAA; animation: qdPoint 1s infinite ease-in-out; }
  .qd-points i:nth-child(2) { animation-delay: .15s; } .qd-points i:nth-child(3) { animation-delay: .3s; }
  @keyframes qdPoint { 50% { transform: translateY(-4px); background: #228B5B; } }
  .qd-champ { display: flex; align-items: center; gap: 10px; border-top: 1px solid #E3EBE6; padding: 12px 16px; font-size: 15px; color: #8AA095; min-height: 50px; }
  .qd-champ.actif { color: #1C2B22; }
  .qd-champ span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qd-champ i { width: 34px; height: 34px; border-radius: 10px; flex: none; margin-left: auto;
    background: #228B5B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E") center / 17px no-repeat; }
  @media (prefers-reduced-motion: reduce) { .qd-corps { height: auto; max-height: none; } }

  /* (21/10/2026, Gabriel : « la version mobile est nettement moins bonne que l'ordinateur ») Téléphone seulement,
     mêmes principes que l'accueil (propositions/saas.css) : premier écran dégagé, encarts répétés retirés,
     listes compactes. Rien ne change au-dessus de 760 px. */
  @media (max-width: 760px) {
    /* La barre du bas porte déjà « Rejoindre le test » : les encarts verts entre les sections partent */
    html.avec-barre .relais { display: none; }
    /* WhatsApp arrive avec la barre, une fois les boutons du haut passés ; un seul bouton (deux scripts en posaient deux) */
    html.avec-barre:not(.hero-passe) #bs-wa, html.avec-barre:not(.hero-passe) .wa-flottant { opacity: 0; transform: translateY(12px); pointer-events: none; }
    #bs-wa { transition: opacity .2s, transform .15s ease, bottom .2s ease; }
    body:has(#bs-wa) .wa-flottant { display: none; }
    html body.bs-consent-open #bs-wa { bottom: calc(var(--bs-consent-h, 180px) + 4px); }
  }
  @media (max-width: 640px) {
    /* Bandeau cookies : une bande basse et compacte, les deux choix aussi visibles l'un que l'autre */
    html body #bs-consent { left: 8px; right: 8px; bottom: 8px; padding: 10px 12px; border-radius: 12px; }
    html body #bs-consent .bs-c-title { display: none; }
    html body #bs-consent p { font-size: 12px; line-height: 1.4; margin: 0 0 8px; }
  }
  @media (max-width: 620px) {
    /* Étapes numérotées (Studio, Démarrer) : le numéro à gauche, sans grande carte */
    .marches { gap: 8px; }
    .marches li { padding: 12px 14px; gap: 12px; border-radius: 14px; }
    .marches span { width: 28px; height: 28px; font-size: 13px; }
    /* Rubriques : des lignes, plus des blocs */
    .ailleurs-liste.grand a { padding: 16px 18px; }
    .ailleurs-liste.grand b { font-size: 17.5px; margin-bottom: 4px; }
    .ailleurs-liste.grand span { font-size: 14.5px; }
    /* Avant / maintenant */
    .gagne-liste li { padding: 16px 16px 18px; }
    /* Démonstration : les demandes sur une ligne qui défile, le champ sur une ligne */
    .puces-liste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
    .puces-liste::-webkit-scrollbar { display: none; }
    .puces-liste button { flex: none; white-space: nowrap; }
    .parler { flex-wrap: wrap; }
    .parler-champ { order: -1; flex: 1 0 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; }
    /* Guides : des étiquettes qui se suivent */
    .savoir-liste { gap: 6px; }
    .savoir-liste a { font-size: 14px; padding: 7px 12px; }
  }
  @media (max-width: 620px) {
    /* Pages rubriques (Studio, Devis et factures…) : étapes plus serrées, téléphones plus petits */
    .rub { padding-top: 32px; }
    .rub-txt { gap: 12px; margin-bottom: 18px; }
    .num { justify-self: start; font-size: 13px; padding: 4px 9px; }
    .rub h3 { font-size: 27px; }
    .rub-txt > p { font-size: 16.5px; }
    .rub-v.rub-tel { padding: 20px 16px; }
    .rub-tel .telephone { max-width: 210px; }
    .remplace-avant, .remplace-apres { padding: 16px 16px 14px; }
    .remplace-avant li { padding: 8px 0; }
    .remplace-apres b { font-size: 20px; }
    .remplace-fl svg { height: 18px; }
    /* Fin commune des pages : autres rubriques, accès, appel final */
    .ailleurs-liste a { padding: 14px 16px; }
    .ailleurs-liste b { font-size: 17px; margin-bottom: 2px; }
    .ailleurs-liste span { font-size: 14.5px; line-height: 1.45; }
    .portes-tete { margin-bottom: 20px; }
    .portes-liste a { padding: 14px 18px; }
    .portes-liste b { font-size: 18px; }
    .porte-d { font-size: 14.5px; }
    .final { padding: 30px 20px; gap: 22px; }
    .final h2 { font-size: 27px; }
    .final-txt p { font-size: 16px; }
    .final-suite { margin-bottom: 22px; }
  }