:root{
    --green-dark:#1B4332; --green:#2D6A4F; --green-pale:#E8F0EA;
    --amber:#F59E0B; --amber-pale:#FDF0D5;
    --red:#C1443C; --ink:#243029; --muted:#5F6E5E; --line:#E4DFD2; --bg:#F8F5EC;
    --shadow:0 2px 10px rgba(27,67,50,.07);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);line-height:1.6;
    font-family:'Nunito','Segoe UI',system-ui,sans-serif;
    font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{max-width:1200px;margin:0 auto;padding:0 22px}
  h1,h2,h3,.marque,.chiffre b,.montant{font-family:'Baloo 2','Segoe UI',system-ui,sans-serif}
  h1,h2,h3{line-height:1.08;letter-spacing:-.025em;font-weight:800}
  a{color:var(--green-dark)}
  /* height:auto est indispensable, et son absence a déformé toutes les images
   du site : les balises portent des attributs width/height en pixels (utiles,
   ils réservent la place et évitent que la page saute au chargement). Dès que
   max-width réduit la largeur, la hauteur, elle, restait celle de l'attribut —
   l'image était donc écrasée verticalement, jusqu'à 79 % d'écart sur
   téléphone. height:auto rend la hauteur au format réel du fichier. */
  img{max-width:100%;height:auto}
  .tiny{font-size:14px;color:var(--muted);line-height:1.55}

  /* ---------- en-tete ---------- */
  /* En-tete opaque, sans backdrop-filter : le flou laissait des coutures
     verticales visibles sur le vert de l'ouverture, pour un effet que
     personne ne remarque sur un fond de cette couleur. */
  header{position:sticky;top:0;z-index:60;background:var(--green-dark);color:#fff}
  header .wrap{display:flex;align-items:center;gap:20px;padding-top:13px;padding-bottom:13px}
  .marque{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;color:#fff;text-decoration:none}
  .marque img{width:31px;height:31px;border-radius:9px;display:block}
  .marque span{color:var(--amber)}
  nav{margin-left:auto;display:flex;gap:20px;font-size:14.5px;align-items:center}
  nav a{color:rgba(255,255,255,.85);text-decoration:none}
  nav a:hover{color:#fff}
  nav .btn{padding:9px 17px;font-size:14px}

  /* Sous-menu « Aller plus loin ». Il s'ouvre au survol ET au clavier
     (focus-within), sinon il serait inatteignable sans souris. Sur telephone
     l'en-tete ne montre que le logo et le bouton : le menu complet est repris
     en bas de l'ouverture, ou le doigt l'atteint vraiment. */
  .deroule{position:relative}
  .deroule > a{color:rgba(255,255,255,.85);text-decoration:none;display:inline-flex;
    align-items:center;gap:6px}
  .deroule > a:hover{color:#fff}
  .deroule .fleche{font-size:10px;opacity:.75}
  .deroule .sous{position:absolute;top:100%;left:-16px;margin-top:12px;min-width:262px;
    background:#fff;border-radius:16px;padding:8px;box-shadow:0 18px 40px rgba(19,45,34,.28);
    opacity:0;visibility:hidden;transform:translateY(-6px);z-index:70;
    /* On ne fait PAS transitionner « visibility » : elle ne bascule qu'à la fin
       de la transition, et le menu restait donc inerte 160 ms après la prise de
       focus au clavier. Seuls l'opacité et le glissement s'animent. */
    transition:opacity .16s ease,transform .16s ease}
  .deroule:hover .sous,.deroule:focus-within .sous{opacity:1;visibility:visible;transform:none}
  .deroule .sous::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
  .deroule .sous a{display:block;padding:11px 14px;border-radius:11px;text-decoration:none;color:var(--ink)}
  .deroule .sous a:hover{background:var(--green-pale)}
  .deroule .sous b{display:block;font-size:15px;color:var(--green-dark)}
  .deroule .sous i{font-style:normal;font-size:13px;color:var(--muted);line-height:1.35}
  @media(max-width:1020px){nav a.lien,nav .deroule{display:none}}

  /* le menu repris sous l'ouverture, pour le pouce */
  .menu-pouce{display:none}
  @media(max-width:1020px){
    .menu-pouce{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
    .menu-pouce a{font-size:14px;font-weight:700;text-decoration:none;color:#fff;
      background:rgba(255,255,255,.10);border:1.4px solid rgba(255,255,255,.26);
      border-radius:99px;padding:9px 15px}
  }

  /* ---------- boutons ---------- */
  .btn{display:inline-block;border:0;font-family:'Nunito',sans-serif;border-radius:13px;
    padding:15px 26px;font-weight:800;font-size:16px;cursor:pointer;text-decoration:none;text-align:center}
  .btn.p{background:var(--amber);color:#fff}
  .btn.v{background:var(--green);color:#fff}
  .btn.g{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.5)}
  .btn.o{background:#fff;color:var(--green-dark);border:1.6px solid var(--line)}
  .actions{display:flex;gap:12px;flex-wrap:wrap}

  /* ---------- ouverture ---------- */
  .ouverture{background:var(--green-dark);color:#fff;position:relative;overflow:hidden;
    padding:76px 0 0}
  /* Le halo couvre TOUTE l'ouverture et s'eteint avant les bords. Porte par une
     boite plus petite, il se coupait net et laissait une couture verticale
     visible en plein milieu du titre. */
  .ouverture::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(58% 62% at 16% 26%,rgba(245,158,11,.17),rgba(245,158,11,0) 72%)}
  .ouverture .wrap{position:relative;z-index:1;display:grid;
    grid-template-columns:minmax(0,1.05fr) auto;gap:48px;align-items:end}
  .ouverture h1{font-size:clamp(38px,7.4vw,82px);margin-bottom:20px}
  .ouverture h1 em{font-style:normal;color:var(--amber);display:block}
  .ouverture .lead{font-size:clamp(17px,2vw,21px);color:rgba(255,255,255,.9);max-width:23em;margin-bottom:26px}
  .ouverture .texte{padding-bottom:76px}
  .sous{font-size:14px;color:rgba(255,255,255,.7);margin-top:16px;max-width:34em;line-height:1.55}
  @media(max-width:900px){
    .ouverture{padding-top:44px}
    .ouverture .wrap{grid-template-columns:1fr;gap:34px}
    .ouverture .texte{padding-bottom:0}
  }

  /* ---------- bandeau de preuve ---------- */
  .preuves{background:#153729;color:#fff;padding:22px 0;border-top:1px solid rgba(255,255,255,.1)}
  .preuves .wrap{display:flex;gap:14px 42px;flex-wrap:wrap;justify-content:center;
    font-size:14.5px;color:rgba(255,255,255,.86);text-align:center}
  .preuves b{color:var(--amber)}

  /* ---------- scenes ---------- */
  /* L'en-tete est colle en haut : sans cette marge, un lien du menu amene la
     section pile SOUS l'en-tete, qui en mange le titre. */
  section,.ouverture{scroll-margin-top:74px}
  .scene{padding:96px 0;border-top:1px solid var(--line)}
  .scene.sombre{background:var(--green-dark);color:#fff;border-top-color:rgba(255,255,255,.12)}
  .scene.sombre .kicker{color:var(--amber)}
  .scene.sombre .dit{color:rgba(255,255,255,.92)}
  .scene.sombre p{color:rgba(255,255,255,.84)}
  .scene.sombre .chiffre{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
  .scene.sombre .chiffre b{color:var(--amber)}
  .scene.sombre .chiffre span{color:rgba(255,255,255,.78)}
  .scene .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:60px;align-items:center}
  .scene.inverse .wrap{grid-template-columns:auto minmax(0,1fr)}
  .scene.inverse .texte{order:2}
  .scene.inverse .visuel{order:1}
  @media(max-width:960px){
    .scene{padding:64px 0}
    .scene .wrap,.scene.inverse .wrap{grid-template-columns:1fr;gap:34px}
    .scene.inverse .texte{order:1}
    .scene.inverse .visuel{order:2}
  }
  .kicker{font-size:12.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
    color:var(--green);margin-bottom:14px}
  .scene h2{font-size:clamp(30px,5.2vw,58px);margin-bottom:18px;max-width:15em}
  .dit{font-size:clamp(19px,2.3vw,25px);line-height:1.42;color:var(--ink);
    font-weight:700;margin-bottom:16px;max-width:20em}
  .scene p{font-size:17px;color:var(--muted);margin-bottom:14px;max-width:34em}
  .scene.sombre h2,.scene.sombre h3{color:#fff}

  /* le chiffre d'une scene */
  .chiffre{display:inline-flex;align-items:baseline;gap:14px;margin-top:12px;
    background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 22px;
    box-shadow:var(--shadow);flex-wrap:wrap}
  .chiffre b{font-size:clamp(30px,4.4vw,46px);line-height:1;color:var(--green-dark);font-weight:800}
  .chiffre span{font-size:14.5px;color:var(--muted);max-width:17em;line-height:1.45}

  /* ---------- telephone ---------- */
  .tel{width:330px;min-width:330px;background:#101a15;border-radius:38px;padding:10px;
    box-shadow:0 26px 60px rgba(27,67,50,.30)}
  .scene.sombre .tel{box-shadow:0 26px 60px rgba(0,0,0,.45)}
  .tel-ecran{background:var(--bg);border-radius:29px;overflow:hidden;height:712px;
    display:flex;flex-direction:column}
  .tel-ecran img{width:100%;height:auto;display:block}
  .duo{display:flex;gap:18px}
  .duo .tel{width:250px;min-width:250px;border-radius:32px}
  .duo .tel-ecran{height:540px;border-radius:24px}
  .duo .tel:last-child{margin-top:44px}
  @media(max-width:960px){
    .tel{width:min(330px,86vw);min-width:0;margin:0 auto}
    .tel-ecran{height:auto}
    .duo{justify-content:center;flex-wrap:wrap}
    .duo .tel{width:min(250px,44vw);min-width:0}
    .duo .tel-ecran{height:auto}
    .duo .tel:last-child{margin-top:0}
  }

  /* ---------- encadres ---------- */
  .note{background:#fff;border-left:4px solid var(--amber);border-radius:0 13px 13px 0;
    padding:14px 18px;margin:18px 0 0;font-size:15.5px;box-shadow:var(--shadow);max-width:34em;color:var(--ink)}
  .scene.sombre .note{background:rgba(255,255,255,.08);color:#fff;box-shadow:none}
  .note b{color:var(--green-dark)}
  .scene.sombre .note b{color:var(--amber)}

  /* ---------- avertissement d'honnetete ---------- */
  .cadre-honnete{background:var(--amber-pale);border-top:1px solid #F3DCA9;border-bottom:1px solid #F3DCA9;padding:26px 0}
  .cadre-honnete .wrap{max-width:900px}
  .cadre-honnete p{font-size:15.5px;color:#7A5308;margin:0;line-height:1.6}
  .cadre-honnete b{color:#5C3D04}

  /* ---------- aller plus loin : les trois autres parcours ---------- */
  .plus-loin{padding:96px 0;background:var(--green-pale);border-top:1px solid var(--line)}
  .plus-loin h2{font-size:clamp(30px,5.2vw,54px);margin-bottom:16px}
  .plus-loin .intro{font-size:18px;color:var(--muted);max-width:44em;margin-bottom:34px}
  .parcours{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
  .pc{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;
    box-shadow:var(--shadow);display:flex;flex-direction:column}
  .pc h3{font-size:21px;margin-bottom:10px;color:var(--green-dark);letter-spacing:-.012em;line-height:1.2}
  .pc p{font-size:15.5px;color:var(--muted);margin-bottom:12px}
  .pc .quoi{font-size:15.5px;color:var(--ink);margin-bottom:12px}
  .etat{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
    border-radius:99px;padding:4px 11px;margin-bottom:12px}
  .etat.ouvert{background:var(--green-pale);color:var(--green-dark);border:1px solid #BFD8C6}
  .etat.lien{background:var(--amber-pale);color:#8A5A06;border:1px solid #F3DCA9}
  .etat.demain{background:#EEEBE1;color:var(--muted);border:1px solid var(--line)}
  .pc .rien{font-size:14.5px;color:var(--muted);border-top:1px dashed var(--line);
    padding-top:12px;margin-top:4px;margin-bottom:16px}
  .pc .liens{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
  .pc .liens a{font-size:14.5px;font-weight:700;text-decoration:none;border-radius:11px;
    padding:10px 15px;border:1.5px solid var(--line);color:var(--green-dark);background:#fff}
  .pc .liens a.fort{background:var(--green);color:#fff;border-color:var(--green)}

  /* ---------- ouverture de chapitre ---------- */
  .chapitre{padding:88px 0 20px;border-top:1px solid var(--line)}
  .chapitre .wrap{display:block}
  .chap-num{font-family:'Baloo 2',sans-serif;font-size:15px;font-weight:800;letter-spacing:2px;
    color:var(--amber);margin-bottom:10px}
  .chapitre h2{font-size:clamp(32px,5.8vw,60px);margin-bottom:14px}
  .chapitre p{font-size:18px;color:var(--muted);max-width:42em}

  /* ---------- illustrations de situation ---------- */
  .illus{display:block;width:100%;height:auto;border-radius:20px;
    box-shadow:0 14px 34px rgba(27,67,50,.14);background:var(--green-pale)}
  .scene.sombre .illus{box-shadow:0 14px 34px rgba(0,0,0,.32)}
  .visuel .legende{font-size:14px;color:var(--muted);margin-top:10px;max-width:34em}
  .scene.sombre .visuel .legende{color:rgba(255,255,255,.68)}
  .visuel{min-width:0}
  .scene.large .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .scene.large.inverse .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  @media(max-width:960px){.scene.large .wrap,.scene.large.inverse .wrap{grid-template-columns:1fr}}

  /* ---------- pourquoi AviBande ---------- */
  .pourquoi{padding:96px 0;background:var(--green-dark);color:#fff;border-top:1px solid rgba(255,255,255,.12)}
  .pourquoi h2{font-size:clamp(30px,5.2vw,54px);margin-bottom:18px;color:#fff}
  .pourquoi .intro{font-size:19px;color:rgba(255,255,255,.86);max-width:44em;margin-bottom:14px}
  .convictions{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:36px}
  .cv{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:18px;
    padding:20px 22px 24px;text-align:center}
  /* La vignette porte l'idee ; le texte ne fait que la nommer. Fond creme
     assume : ces dessins sont concus sur creme, les detourer sur du vert
     les aurait salis. */
  .cv .spot{width:100%;max-width:186px;height:auto;display:block;margin:0 auto 14px;
    background:var(--bg);border-radius:16px}
  .cv h3{font-size:18.5px;margin-bottom:8px;color:#fff;line-height:1.28}
  .cv p{font-size:15.5px;color:rgba(255,255,255,.78);margin:0;line-height:1.5}

  /* ---------- accessoires ---------- */
  .accessoires{padding:96px 0;background:#FCFAF3;border-top:1px solid var(--line)}
  .accessoires h2{font-size:clamp(30px,5.2vw,54px);margin-bottom:16px}
  .accessoires .intro{font-size:18px;color:var(--muted);max-width:46em;margin-bottom:32px}
  .kits{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:26px}
  .kit{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;
    box-shadow:var(--shadow);display:flex;flex-direction:column}
  .kit.pack{border:2px solid var(--amber);box-shadow:0 10px 30px rgba(245,158,11,.16)}
  .kit h3{font-size:21px;margin-bottom:8px;color:var(--green-dark);line-height:1.2}
  .kit .tarif{font-family:'Baloo 2',sans-serif;font-size:36px;font-weight:800;
    color:var(--green-dark);line-height:1.05;margin:12px 0 2px}
  .kit .tarif i{font-style:normal;font-size:15px;font-weight:700;color:var(--muted)}
  .kit .barre{font-size:14px;color:var(--muted);text-decoration:line-through;margin-bottom:12px}
  .kit ul{list-style:none;margin:14px 0 20px}
  .kit li{font-size:15px;padding:7px 0 7px 26px;position:relative;border-bottom:1px solid #F1EDE2}
  .kit li:last-child{border-bottom:0}
  .kit li::before{content:"";position:absolute;left:4px;top:14px;width:11px;height:6px;
    border-left:2.4px solid var(--green);border-bottom:2.4px solid var(--green);transform:rotate(-45deg)}
  .kit .btn{margin-top:auto}
  .avant{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
    background:var(--amber-pale);color:#8A5A06;border:1px solid #F3DCA9;border-radius:99px;
    padding:4px 11px;margin-bottom:12px}

  /* ---------- rejoindre ---------- */
  .rejoindre{padding:96px 0;background:var(--green-dark);color:#fff}
  .rejoindre h2{font-size:clamp(32px,5.6vw,58px);margin-bottom:16px;color:#fff}
  .rejoindre .intro{font-size:19px;color:rgba(255,255,255,.86);max-width:42em;margin-bottom:36px}
  .deux-voies{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
  .voie{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
    border-radius:22px;padding:28px;display:flex;flex-direction:column}
  .voie.forte{background:#fff;border-color:#fff;color:var(--ink)}
  .voie h3{font-size:24px;margin-bottom:8px;color:#fff;line-height:1.2}
  .voie.forte h3{color:var(--green-dark)}
  .voie > p{font-size:16px;color:rgba(255,255,255,.78);margin-bottom:20px}
  .voie.forte > p{color:var(--muted)}
  .etapes{list-style:none;counter-reset:e;margin-bottom:24px}
  .etapes li{counter-increment:e;position:relative;padding:0 0 16px 46px;font-size:15.5px;
    color:rgba(255,255,255,.86);line-height:1.5}
  .voie.forte .etapes li{color:var(--ink)}
  .etapes li::before{content:counter(e);position:absolute;left:0;top:-2px;width:30px;height:30px;
    border-radius:50%;background:var(--amber);color:#fff;font-family:'Baloo 2',sans-serif;
    font-weight:800;font-size:16px;display:grid;place-items:center}
  .etapes li b{color:#fff}
  .voie.forte .etapes li b{color:var(--green-dark)}
  .voie .btn{margin-top:auto}
  .voie .apres{font-size:13.5px;color:rgba(255,255,255,.6);margin-top:12px;line-height:1.5}
  .voie.forte .apres{color:var(--muted)}
  .paire{display:flex;gap:14px;margin-bottom:20px}
  .paire img{width:50%;height:auto;background:var(--bg);border-radius:14px}
  .spot-inline{width:150px;height:auto;display:block;margin-top:18px;background:var(--bg);border-radius:14px}

  /* ---------- ce qui n'existe pas ---------- */
  .franchise{background:var(--ink);color:#fff;padding:96px 0}
  .franchise h2{font-size:clamp(30px,5.2vw,54px);margin-bottom:16px;color:#fff}
  .franchise .intro{font-size:18px;color:rgba(255,255,255,.78);max-width:40em;margin-bottom:34px}
  /* 300 px et non 255 : a 255 la grille tenait quatre colonnes et les six
     jalons se rangeaient 4 + 2, avec deux trous au bout de la seconde ligne. */
  .jalons{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
  .jalon{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
    border-radius:16px;padding:20px}
  .jalon .d{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.8px;
    text-transform:uppercase;color:var(--amber);margin-bottom:8px}
  .jalon h3{font-size:18.5px;margin-bottom:7px;color:#fff;letter-spacing:-.01em;line-height:1.25}
  .jalon p{font-size:14.5px;color:rgba(255,255,255,.72);margin:0;line-height:1.55}

  /* ---------- prix ---------- */
  .prix-section{padding:96px 0;background:#FCFAF3;border-top:1px solid var(--line)}
  .prix-section h2{font-size:clamp(30px,5.2vw,54px);margin-bottom:14px}
  .prix-section .intro{font-size:18px;color:var(--muted);max-width:40em;margin-bottom:34px}
  .prix{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px}
  .offre{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;
    box-shadow:var(--shadow);display:flex;flex-direction:column}
  .offre.mise{border:2px solid var(--amber);box-shadow:0 10px 30px rgba(245,158,11,.16)}
  .etiq{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
    color:var(--green);margin-bottom:10px}
  .offre.mise .etiq{color:#B45309}
  .montant{font-size:38px;font-weight:800;line-height:1.05;color:var(--green-dark)}
  .montant i{font-style:normal;font-size:16px;font-weight:700}
  .par{font-size:14.5px;color:var(--muted);margin-bottom:16px}
  .offre ul{list-style:none;margin-bottom:20px}
  .offre li{font-size:15px;padding:7px 0 7px 26px;position:relative;border-bottom:1px solid #F1EDE2}
  .offre li:last-child{border-bottom:0}
  .offre li::before{content:"";position:absolute;left:4px;top:14px;width:11px;height:6px;
    border-left:2.4px solid var(--green);border-bottom:2.4px solid var(--green);transform:rotate(-45deg)}
  .offre .btn{margin-top:auto}

  /* ---------- appel final ---------- */
  .final{background:var(--green-dark);color:#fff;padding:104px 0;text-align:center}
  .final h2{font-size:clamp(32px,6vw,64px);margin-bottom:20px;color:#fff}
  .final p{font-size:19px;color:rgba(255,255,255,.86);max-width:32em;margin:0 auto 30px}
  .final .actions{justify-content:center}

  footer{background:#132D22;color:rgba(255,255,255,.72);padding:40px 0;font-size:14.5px;text-align:center}
  footer a{color:var(--amber)}
  footer .liens{margin-bottom:14px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
  footer .liens a{color:rgba(255,255,255,.8);text-decoration:none}

  /* Apparition douce. Le contenu est visible PAR DEFAUT : c'est le script qui
     pose « js-anim » sur <html> avant de masquer quoi que ce soit. Ainsi aucune
     defaillance — script bloque, navigateur ancien, defilement trop rapide — ne
     peut laisser une section invisible. Une page de presentation qui avale une
     section vaut moins qu'une page sans animation. */
  .js-anim .fondu{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .js-anim .fondu.vu{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .js-anim .fondu{opacity:1;transform:none;transition:none}
  }

  /* ================================================================
     Ajouts des pages « Aller plus loin » (acheteur, veterinaire,
     institution). Ces pages partagent tout le reste avec l'accueil :
     seules les pieces qui n'existaient pas encore sont ici.
     ================================================================ */

  /* ---------- fil de retour vers l'accueil ---------- */
  .retour{background:var(--green-pale);border-bottom:1px solid var(--line);padding:11px 0;font-size:14.5px}
  .retour .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--muted)}
  .retour a{color:var(--green-dark);text-decoration:none;font-weight:700}
  .retour a:hover{text-decoration:underline}

  /* ---------- cadre d'ecran d'ordinateur ---------- */
  /* La console de l'acheteur est une page web ouverte sur un ordinateur :
     la montrer dans un cadre de telephone aurait menti sur son usage. */
  .ordi{background:#101a15;border-radius:18px;padding:11px;box-shadow:0 22px 50px rgba(27,67,50,.24)}
  .ordi .barre{display:flex;gap:6px;padding:1px 5px 10px}
  .ordi .barre i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);display:block}
  .ordi img{display:block;width:100%;height:auto;border-radius:10px}
  .scene.sombre .ordi{box-shadow:0 22px 50px rgba(0,0,0,.45)}

  /* ---------- etapes numerotees, pleine largeur ---------- */
  .pas{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px;margin-top:34px;counter-reset:p}
  .pas > div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px 22px;
    box-shadow:var(--shadow);counter-increment:p;position:relative}
  .pas > div::before{content:counter(p);position:absolute;top:-15px;left:22px;width:32px;height:32px;
    border-radius:50%;background:var(--amber);color:#fff;font-family:'Baloo 2',sans-serif;
    font-weight:800;font-size:17px;display:grid;place-items:center}
  .pas h3{font-size:19px;margin:6px 0 8px;color:var(--green-dark);line-height:1.24}
  .pas p{font-size:15.5px;color:var(--muted);margin:0;line-height:1.55}
  .scene.sombre .pas > div{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
  .scene.sombre .pas h3{color:#fff}
  .scene.sombre .pas p{color:rgba(255,255,255,.78)}

  /* ---------- lecture d'un ecran : ce que dit chaque zone ---------- */
  .lecture{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:30px}
  .lz{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
  .lz b{display:block;font-family:'Baloo 2',sans-serif;font-size:17px;color:var(--green-dark);
    margin-bottom:6px;line-height:1.25}
  .lz span{font-size:15px;color:var(--muted);line-height:1.55;display:block}
  .scene.sombre .lz{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
  .scene.sombre .lz b{color:#fff}
  .scene.sombre .lz span{color:rgba(255,255,255,.78)}

  /* ---------- avertissement fort (ce qui n'existe pas) ---------- */
  .attention{background:var(--amber-pale);border-left:4px solid var(--amber);
    border-radius:0 13px 13px 0;padding:16px 20px;margin:18px 0 0;font-size:15.5px;
    color:#7A5308;line-height:1.6}
  .attention b{color:#5C3D04}

  /* ---------- ouverture de page fille ---------- */
  .ouverture.page{padding:60px 0 0}
  .ouverture.page h1{font-size:clamp(33px,5.6vw,62px)}
  .ouverture.page .visuel img{border-radius:22px;box-shadow:0 22px 50px rgba(0,0,0,.34)}
  .ouverture.page .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
  @media(max-width:900px){.ouverture.page .wrap{grid-template-columns:1fr}}
  .badge-venir{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
    background:rgba(245,158,11,.18);color:var(--amber);border:1px solid rgba(245,158,11,.5);
    border-radius:99px;padding:5px 13px;margin-bottom:16px}

  /* Ecran de telephone a hauteur libre : ces captures sont des pages entieres,
     pas des vues d'application. Les enfermer dans les 712 px du cadre normal
     les aurait rognees en plein milieu du dossier. */
  .tel.long{width:344px;min-width:344px}
  .tel.long .tel-ecran{height:auto;border-radius:29px}
  @media(max-width:960px){.tel.long{width:min(344px,86vw);min-width:0}}

  /* ================================================================
     v2.1 (17 septembre 2026) — audit Codex 57 : réassurance, modèle
     par étape, détail au toucher, « Voir l'écran », cartes comparables,
     trois niveaux d'« Aller plus loin », parcours Sentinelle, « Je suis… »,
     panneau d'aide à l'installation, relances, lien d'évitement.
     Rien de ce qui précède n'est modifié : les pages filles y restent.
     ================================================================ */

  /* ---------- lien d'évitement et focus visible ---------- */
  .evite{position:absolute;left:-999px;top:10px;z-index:99;background:var(--amber);color:var(--green-dark);
    padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none}
  .evite:focus{left:12px}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

  /* ---------- réassurance sous les boutons ---------- */
  .reassurance{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:14px;font-weight:700;
    color:rgba(255,255,255,.85)}
  .reassurance span{display:inline-flex;align-items:center;gap:7px}
  .reassurance span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none}

  /* ---------- modèle d'une étape : écran, décision, résultat ---------- */
  .modele{margin:0 0 18px;max-width:34em;display:grid;gap:8px}
  .modele > div{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:10px;align-items:start;
    border-left:3px solid var(--amber);padding-left:12px}
  .modele dt{font-size:12.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--green);padding-top:2px}
  .modele dd{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
  .scene.sombre .modele dt{color:var(--amber)}
  .scene.sombre .modele dd{color:rgba(255,255,255,.9)}
  .scene.sombre .modele > div{border-left-color:rgba(245,158,11,.7)}
  @media(max-width:520px){.modele > div{grid-template-columns:1fr;gap:2px}}
  .etape .actions{margin-top:4px}
  .etape .actions .btn{padding:12px 20px;font-size:15px}
  .scene.sombre .btn.o{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35)}

  /* le détail, replié par défaut */
  .detail{margin-top:18px;max-width:34em}
  .detail summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
    font-weight:800;font-size:15px;color:var(--green-dark);padding:10px 0;min-height:44px}
  .detail summary::-webkit-details-marker{display:none}
  .detail summary::before{content:"+";width:24px;height:24px;border-radius:50%;background:var(--amber);color:#fff;
    display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-size:18px;line-height:1}
  .detail[open] summary::before{content:"–"}
  .scene.sombre .detail summary{color:#fff}
  .detail > p{margin-top:10px}
  .detail .chiffre{margin-top:6px}
  .chiffre b i{font-style:normal;font-size:.5em;color:var(--muted)}
  .scene.sombre .chiffre b i{color:rgba(255,255,255,.6)}

  /* ---------- « Voir l'écran » : le dialogue ---------- */
  dialog.ecran{border:0;border-radius:24px;padding:14px;background:#101a15;color:#fff;max-width:min(420px,92vw);
    box-shadow:0 30px 80px rgba(0,0,0,.5)}
  dialog.ecran::backdrop{background:rgba(16,26,21,.7)}
  dialog.ecran img{display:block;width:100%;height:auto;border-radius:16px;max-height:76vh;object-fit:contain;background:var(--bg)}
  dialog.ecran .legende{margin:12px 6px 4px;font-size:14px;color:rgba(255,255,255,.85);line-height:1.5}
  dialog.ecran form{position:absolute;top:8px;right:8px;margin:0}
  dialog.ecran .fermer{width:40px;height:40px;border-radius:50%;border:0;background:var(--amber);color:#fff;
    font-size:24px;line-height:1;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:800}

  /* ---------- relance : une action par grand chapitre ---------- */
  .relance{padding:34px 0;background:var(--amber-pale);border-top:1px solid #F3DCA9;border-bottom:1px solid #F3DCA9}
  .relance .wrap{display:flex;gap:16px 28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .relance p{font-size:17px;color:#7A5308;max-width:38em;margin:0;font-weight:700}
  .relance.sombre{background:#153729;border-color:rgba(255,255,255,.1)}
  .relance.sombre p{color:rgba(255,255,255,.88)}

  /* ---------- pourquoi : cartes comparables ---------- */
  .cv{text-align:left}
  .cv .spot{margin:0 auto 14px}
  .cv h3{text-align:center}
  .compare{display:grid;gap:9px;margin-top:12px}
  .compare > div{border-top:1px solid rgba(255,255,255,.14);padding-top:8px}
  .compare dt{font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--amber)}
  .compare dd{margin:2px 0 0;font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.5}
  .compare a{color:#fff;font-weight:800}

  /* ---------- aller plus loin : trois niveaux ---------- */
  .plus-loin .chap-num{margin-bottom:10px}
  .plus-loin .intro{margin-bottom:26px}
  .niveau{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:19px;color:var(--green-dark);
    margin:34px 0 14px;letter-spacing:-.01em}
  .niveau .etat{margin:0}
  .pc .pc-illus{display:block;width:calc(100% + 48px);margin:-24px -24px 16px;height:auto;border-radius:20px 20px 0 0;
    aspect-ratio:16/9;object-fit:cover;background:var(--green-pale);max-width:none}
  .pc > .etat{align-self:flex-start}
  .pc .pour{font-size:14.5px;color:var(--muted);margin-bottom:8px;font-weight:700}
  .pc p b{color:var(--green-dark)}
  .pc .liens a{min-height:44px;display:inline-flex;align-items:center}

  /* ---------- prix : « je suis… » ---------- */
  .je-suis{width:100%;border-collapse:collapse;margin-top:28px;background:#fff;border:1px solid var(--line);
    border-radius:16px;overflow:hidden;box-shadow:var(--shadow);font-size:15px}
  .je-suis caption{text-align:left;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px;
    color:var(--green-dark);padding:0 0 10px}
  .je-suis th,.je-suis td{padding:14px 16px;border-top:1px solid #F1EDE2;vertical-align:top;text-align:left}
  .je-suis th{width:14em;color:var(--green-dark);font-family:'Baloo 2',sans-serif;font-size:16.5px}
  .je-suis td{color:var(--muted)}
  .je-suis td a{font-weight:800;white-space:nowrap;display:inline-flex;align-items:center;min-height:32px}
  @media(max-width:700px){
    .je-suis,.je-suis tbody,.je-suis tr,.je-suis th,.je-suis td{display:block;width:auto}
    .je-suis th{padding-bottom:4px}.je-suis td{border-top:0;padding-top:0}
    .je-suis td:last-child{padding-bottom:16px}
  }

  /* ---------- rejoindre : panneau d'aide replié ---------- */
  .deux-voies{align-items:start}
  .voie:not(.forte) .btn{margin-top:8px}
  .voie .aide{margin-top:18px;border-top:1px dashed var(--line);padding-top:6px}
  .voie .aide summary{cursor:pointer;font-weight:800;color:var(--green-dark);padding:10px 0;min-height:44px;
    display:flex;align-items:center;gap:8px}
  .voie .aide summary::before{content:"?";width:24px;height:24px;border-radius:50%;background:var(--amber);color:#fff;
    display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-size:15px;flex:none}
  .voie .aide p{font-size:14.5px;color:var(--muted);margin:8px 0 0;line-height:1.55}
  .voie .aide p b{color:var(--green-dark)}
  .voie > p.apres a{color:var(--green-dark);font-weight:800}
  .premiers-pas{margin-top:10px}
  .premiers-pas a{color:var(--amber);font-weight:800;text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
  .premiers-pas a:hover{text-decoration:underline}
  .offre .apres{font-size:13.5px;color:var(--muted);margin-top:10px;text-align:center}
  .offre .apres a{font-weight:800;display:inline-flex;align-items:center;min-height:40px}

  /* le sous-menu et le bouton d'en-tête : cible tactile suffisante */
  @media(min-width:1021px){nav a.lien,.deroule > a{min-height:44px;display:inline-flex;align-items:center}}
  .menu-pouce a{min-height:40px;display:inline-flex;align-items:center}

  /* ---------- contraste (audit 57) : texte sombre sur ambre, numéros de chapitre lisibles ---------- */
  .btn.p{color:var(--green-dark)}
  .chap-num{color:#8A5A06}
  .pourquoi .chap-num,.rejoindre .chap-num{color:#F7DFA4}
  .compare dt{color:#F7DFA4}
  .marque{min-height:44px}
  footer .liens a{display:inline-flex;align-items:center;min-height:40px;padding:0 4px}
  .je-suis td a{min-height:36px}