/* Novidel — la feuille du site public, version « une journée, heure par heure » (23/09).
   Téléphone d'abord : la base est le petit écran, les paliers 700 px et 1100 px ajoutent.
   Tout est en IBM Plex Sans, le lettrage de l'application ; les heures prennent des
   chiffres alignés. Aucune ressource externe. */

:root{
  --papier:#F5F1E8; --sable:#EDE7DA; --carte:#FFFDF8; --encre:#17302F; --canard:#12565C;
  --nuit:#0E3D41; --doux:#D9E6E3; --ocre:#A2521F; --corps:#3F4F4C; --gris:#5C6966;
  --filet:#DDD5C5; --filet-fort:#C9BFAC; --clair:#F5F1E8; --clair-2:#C7D8D6; --jauge:#9FCBCF;
  --alerte-fond:#FBEDE4; --alerte:#6E3614;
  --pad:20px; --h1:40px; --h2:32px; --h3:23px; --t:17px; --sec:56px;
}
@media (min-width:700px){:root{--pad:48px; --h1:54px; --h2:42px; --h3:27px; --t:18px; --sec:80px}}
@media (min-width:1100px){:root{--pad:96px; --h1:66px; --h2:50px; --h3:30px; --t:19px; --sec:96px}}

@font-face{font-family:'IBM Plex Sans';src:url(p/r.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'IBM Plex Sans';src:url(p/s.woff2) format('woff2');font-weight:500 600;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'IBM Plex Sans';src:url(p/b.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122}
/* Audit du 09/10 : les trois fichiers sont des SOUS-ENSEMBLES LATINS d'IBM Plex Sans (licence OFL sans nom réservé ; 15 Ko
   chacun contre 63-67 Ko : grec, cyrillique et vietnamien retirés, plus aucun caractère du site ne manquait), et la police
   de repli a les proportions de Plex (size-adjust, ascent/descent) : quand Plex arrive, le texte ne bouge plus (le titre
   de /fonctions passait de 204 à 272 px de haut, CLS 0,108 à 1 366 px). Valeurs mesurées sur le texte du site. */
@font-face{font-family:'Plex repli';src:local('Arial'),local('Helvetica');font-weight:400 500;size-adjust:102.2%;ascent-override:100.3%;descent-override:26.9%;line-gap-override:0%}
@font-face{font-family:'Plex repli';src:local('Arial Bold'),local('Helvetica Bold');font-weight:600 700;size-adjust:98%;ascent-override:104.6%;descent-override:28.1%;line-gap-override:0%}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--encre);overflow-x:clip;
  font-family:'IBM Plex Sans','Plex repli',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--canard)} a:hover{color:var(--nuit)}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:600;letter-spacing:-.03em}
p{text-wrap:pretty}
.heure,.num{font-variant-numeric:tabular-nums lining-nums}
.evite{position:absolute;left:-9999px;top:0;background:var(--carte);padding:12px 16px;z-index:50}
.evite:focus{left:12px;top:12px}

.dans{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.sec{padding:var(--sec) 0}
.sec--sable{background:var(--sable)}
.sec--nuit{background:var(--nuit);color:#EEF3F1}
.sec--encre{background:var(--encre);color:#EEF3F1}
.sec--filet{border-top:1px solid var(--filet)}
.sec--nuit a,.sec--encre a{color:var(--clair)}

/* ── textes ── */
.sur{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ocre)}
.sec--nuit .sur,.sec--encre .sur,.carte-canard .sur{color:var(--jauge)}
h1{font-size:var(--h1);line-height:1.03}
h2{font-size:var(--h2);line-height:1.06}
h3{font-size:var(--h3);line-height:1.18;letter-spacing:-.02em}
.accent{color:var(--canard)}
.sec--nuit .accent,.sec--encre .accent,.carte-canard .accent{color:var(--jauge)}
.chapo{font-size:calc(var(--t) + 1px);line-height:1.58;color:var(--corps);max-width:560px}
.texte{font-size:var(--t);line-height:1.6;color:var(--corps);max-width:560px}
.sec--nuit .texte,.sec--nuit .chapo,.sec--encre .texte{color:var(--clair-2)}
.pile{display:flex;flex-direction:column;gap:22px}
.pile--serre{gap:14px}
.note{font-size:12.5px;color:var(--gris)}

/* ── boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;
  border-radius:999px;font-size:17px;font-weight:600;text-decoration:none;background:var(--canard);color:var(--clair);
  border:1px solid var(--canard);align-self:flex-start}
.btn:hover{background:var(--nuit);color:var(--clair)}
.btn--2{background:transparent;color:var(--encre);border-color:var(--filet-fort);font-weight:400}
.btn--2:hover{background:var(--sable);color:var(--encre)}
.btn svg{flex:none}
.boutons{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:699px){.boutons .btn{flex:1 1 100%}}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;min-height:44px}

/* ── en-tête ── */
.entete{background:var(--papier);border-bottom:1px solid var(--filet);position:sticky;top:0;z-index:20}
.entete .dans{height:64px;display:flex;align-items:center;gap:12px}
@media (min-width:1100px){.entete .dans{height:88px;gap:40px}}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--canard);flex:none}
.marque span{font-size:21px;font-weight:700;color:var(--encre);letter-spacing:-.01em}
@media (min-width:1100px){.marque span{font-size:23px}}

/* ── téléphones (vraies captures) ── */
.tel{background:var(--encre);padding:8px;border-radius:40px;flex:none;width:100%;max-width:300px}
.tel img{width:100%;height:auto;border-radius:32px}
/* Coupé : au plus --haut, et jamais plus bas que la ligne --ratio de la capture, juste au-dessus de son menu du bas
   (gen2.py, COUPE) — un menu tranché à mi-hauteur n'est pas joli. */
.tel--haut{padding:8px 8px 0;border-radius:38px 38px 0 0;overflow:hidden;max-height:var(--haut,330px)}
.tel--haut img{border-radius:31px 31px 0 0;height:auto;aspect-ratio:var(--ratio,auto);object-fit:cover;object-position:top}
.tel--bas img{transform:translateY(var(--decale,-40%))}

/* ── ouverture de l’accueil ── */
/* Le haut de chaque page : 32 px sous le menu sur téléphone, 40 px sur tablette, 48 px sur ordinateur (30/09 : trois
   marges s'additionnaient — celle de la section, celle de l'ouverture et un décalage du texte —, 196 px sur ordinateur). */
.ouv{display:grid;gap:36px;padding-top:32px}
.ouv-texte{display:flex;flex-direction:column;gap:22px}
.confiance{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--filet);font-size:15px;color:var(--gris);margin-top:8px}
.confiance div{display:flex;gap:6px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--filet)}
.confiance b{font-weight:600;color:var(--encre)}
.vis{position:relative}
.vis-photo{width:100%;height:380px;object-fit:cover;border-radius:24px}
/* Le téléphone de l'ouverture est coupé comme les autres (tel--haut), juste avant le menu de la capture, et posé sur
   le bas de la section (sec--bas0) : entier, son menu flottait sur la liste des patients (Antoine, 30/09). */
.vis .tel{position:relative;margin:-160px auto 0;width:230px;--haut:400px;box-shadow:0 -20px 40px -24px rgba(14,61,65,.5)}
@media (min-width:700px){
  .ouv{padding-top:40px}
  .confiance{grid-template-columns:repeat(3,1fr);gap:28px;border-bottom:0}
  .confiance div{flex-direction:column;gap:4px;border-bottom:0;padding:18px 0 0}
  .vis-photo{height:520px}
  .vis .tel{width:280px;--haut:520px;margin-top:-260px}
}
@media (min-width:1100px){
  .ouv{grid-template-columns:1fr 1fr;gap:64px;padding-top:48px;min-height:760px}
  .ouv-texte{padding-bottom:72px}
  .confiance{margin-top:auto}
  /* La colonne de la photo suit la hauteur du texte (12/10) : à 760 px fixes, le téléphone flottait 180 à 300 px
     au-dessus du bas de la section dès que le texte d’à côté était plus long. */
  .vis{height:auto;min-height:760px;align-self:stretch}
  .vis-photo{position:absolute;right:0;top:0;width:470px;height:640px;border-radius:28px}
  .vis .tel{position:absolute;left:20px;bottom:0;margin:0;width:300px;--haut:640px;padding:9px 9px 0;border-radius:44px 44px 0 0;
    box-shadow:0 -30px 70px -30px rgba(14,61,65,.55)}
  .vis .tel img{border-radius:36px 36px 0 0}
}

/* ── avant ── */
.avant{display:grid;gap:40px;align-items:center}
.citation{font-size:calc(var(--h2) - 2px);line-height:1.15;font-weight:500;letter-spacing:-.02em;color:var(--clair)}
.avant-vis{position:relative}
.avant-vis img{width:100%;height:260px;object-fit:cover;border-radius:22px}
.avant-mot{background:var(--papier);color:var(--encre);border-radius:18px;padding:16px 20px;font-size:15px;line-height:1.5;margin-top:-40px;
  position:relative;margin-left:20px;max-width:300px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
@media (min-width:1100px){
  .avant{grid-template-columns:1.25fr 1fr;gap:96px}
  .avant-vis img{height:420px}
  .avant-mot{position:absolute;right:-24px;bottom:-28px;margin:0;max-width:280px}
}

/* ── une journée, heure par heure ── */
.jour-tete{display:grid;gap:18px;margin-bottom:40px}
@media (min-width:1100px){.jour-tete{grid-template-columns:1fr 1fr;gap:72px;align-items:end;margin-bottom:64px}}
.moments{border-bottom:1px solid var(--filet)}
.moment{display:grid;gap:14px;padding-top:32px;border-top:1px solid var(--filet)}
.moment-h{display:flex;align-items:baseline;gap:12px}
.moment-h .heure{font-size:26px;font-weight:600;color:var(--canard);letter-spacing:-.01em}
.moment-h span:last-child{font-size:14px;color:var(--gris)}
.moment--soir .heure{color:var(--ocre)}
.moment-t{display:flex;flex-direction:column;gap:12px}
.moment-v{display:grid;grid-template-columns:1fr 150px;gap:14px;align-items:end;margin-top:6px}
.moment-v--seul{grid-template-columns:200px;justify-content:center}
.moment-v img.photo{width:100%;height:210px;object-fit:cover;border-radius:18px;margin-bottom:24px}
.moment-v .tel{--haut:240px}
@media (min-width:700px){
  .moment-v{grid-template-columns:1fr 220px}
  .moment-v--seul{grid-template-columns:240px;justify-content:start}
  .moment-v .tel{--haut:300px}
  .moment-v img.photo{height:250px}
}
@media (min-width:1100px){
  .moment{grid-template-columns:140px 1fr 648px;gap:48px;align-items:end;padding-top:40px}
  .moment-h{flex-direction:column;gap:6px;align-self:start}
  .moment-h .heure{font-size:30px}
  .moment-t{align-self:start;padding-bottom:40px}
  .moment-v{grid-template-columns:340px 260px;gap:48px;margin:0}
  .moment-v--seul{grid-template-columns:260px;justify-content:end}
  .moment-v img.photo{height:260px;margin-bottom:40px}
  .moment-v .tel{--haut:330px}
}

/* ── chacune à sa place ── */
.roles{display:grid;gap:18px}
.carte-canard{background:var(--canard);color:#EEF3F1;border-radius:26px;padding:30px 24px;display:flex;flex-direction:column;gap:18px}
.carte-canard h2{color:var(--clair)}
.roles-liste{display:flex;flex-direction:column;gap:18px;padding-top:20px;border-top:1px solid rgba(238,243,241,.2);margin-top:auto}
.roles-liste div{display:flex;flex-direction:column;gap:6px}
.roles-liste b{font-size:17px;font-weight:600;color:var(--clair)}
.roles-liste span{font-size:15.5px;line-height:1.55;color:var(--clair-2)}
.roles-tels{background:var(--sable);border-radius:26px;padding:28px 16px 0;display:flex;gap:14px;justify-content:center;align-items:flex-end;overflow:hidden}
.roles-tels figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;width:48%;max-width:240px}
.roles-tels figcaption{font-size:14px;font-weight:600;color:var(--corps)}
.roles-tels .tel{--haut:320px}
@media (min-width:1100px){
  .roles{grid-template-columns:1fr 1fr;gap:24px}
  .carte-canard{padding:48px}
  .roles-tels{padding:44px 40px 0;gap:24px}
  .roles-tels .tel{--haut:490px}
}

/* ── les données (bloc de l’accueil et page) ── */
.donnees{display:grid;gap:40px}
@media (min-width:1100px){.donnees{grid-template-columns:.9fr 1.1fr;gap:80px}}
.donnees-photo{width:100%;height:260px;object-fit:cover;border-radius:22px}
@media (min-width:1100px){.donnees-photo{height:330px;margin-top:auto}}
.deux{display:grid;gap:14px}
@media (min-width:700px){.deux{grid-template-columns:1fr 1fr;gap:16px}}
.vu{background:var(--carte);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:4px;font-size:16px;line-height:1.5}
.vu small,.base small{font-size:13px;font-weight:600;color:var(--gris);padding-bottom:8px}
.base{background:var(--encre);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:6px}
.base small{color:var(--jauge);display:flex;align-items:center;gap:8px}
.base code{font-family:'IBM Plex Sans',sans-serif;font-size:13.5px;line-height:1.7;color:var(--clair-2);word-break:break-all;font-variant-numeric:tabular-nums}
.lignes{display:flex;flex-direction:column;border-bottom:1px solid var(--filet)}
.sec--sable .lignes,.sec--sable .ligne{border-color:#D6CDBA}
.ligne{display:grid;gap:6px;padding:18px 0;border-top:1px solid var(--filet)}
.ligne b,.ligne h3{font-size:17px;font-weight:600}
.ligne span,.ligne p{font-size:16px;line-height:1.6;color:var(--corps)}
/* item() et ligne() écrivent <h3>/<p> depuis le 10/10 : l'allure de l'ancien <b> (ni l'interligne serré ni l'approche
   des titres) */
.ligne h3,.item h3{line-height:inherit;letter-spacing:normal;text-wrap:wrap}
@media (min-width:700px){.ligne{grid-template-columns:var(--lt,240px) 1fr;gap:28px;padding:20px 0}}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.chiffres div{display:flex;flex-direction:column;gap:4px}
.chiffres b{font-size:clamp(28px,4vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--canard)}
.chiffres span{font-size:13.5px;color:var(--gris);line-height:1.4}

/* ── gratuit et appel ── */
.gratuit{display:grid;gap:32px;align-items:center}
@media (min-width:1100px){.gratuit{grid-template-columns:1.2fr 1fr;gap:80px}}
.gratuit h2{font-size:calc(var(--h2) + 12px);line-height:1.02}
.carte-appel{background:var(--carte);border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:18px;
  box-shadow:0 30px 60px -30px rgba(14,61,65,.3),0 0 0 1px rgba(23,48,47,.06)}
.carte-appel b{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.carte-appel span{font-size:16px;line-height:1.55;color:var(--gris)}
.carte-appel .btn{align-self:stretch}
@media (min-width:1100px){.carte-appel{padding:40px}}
.appel{display:grid;gap:26px;align-items:center}
@media (min-width:1100px){.appel{grid-template-columns:1fr auto;gap:80px}}

/* ── pages intérieures ── */
.intro{display:grid;gap:36px;padding-top:32px}
.intro-photo{width:100%;height:280px;object-fit:cover;border-radius:24px}
@media (min-width:700px){.intro{padding-top:40px}.intro-photo{height:420px}}
@media (min-width:1100px){.intro{grid-template-columns:1fr 1fr;gap:72px;padding-top:48px}.intro-photo{height:520px;border-radius:28px}}
.jetons{display:flex;gap:8px;flex-wrap:wrap}
.jetons a{font-size:14px;font-weight:600;color:var(--canard);background:var(--doux);border-radius:999px;padding:9px 14px;text-decoration:none}
.chap{display:grid;gap:24px;padding-top:48px;border-top:1px solid var(--filet);scroll-margin-top:100px}
.chap-t{display:flex;flex-direction:column;gap:12px}
.chap-t .num{font-size:40px;font-weight:600;color:var(--canard);line-height:1;letter-spacing:-.02em}
.chap-t h2{font-size:calc(var(--h2) - 10px)}
.items{display:grid;gap:26px 40px}
@media (min-width:700px){.items{grid-template-columns:1fr 1fr}}
.item{display:flex;flex-direction:column;gap:7px}
.item b,.item h3{font-size:18px;font-weight:600}
.item span,.item p{font-size:16px;line-height:1.6;color:var(--corps)}
.sec--nuit .item b,.sec--encre .item b,.sec--nuit .item h3,.sec--encre .item h3{color:var(--clair)}
.sec--nuit .item span,.sec--encre .item span,.sec--nuit .item p,.sec--encre .item p{color:var(--clair-2)}
.chap .tel{--haut:300px;max-width:230px;justify-self:center}
@media (min-width:1100px){
  .chap{grid-template-columns:300px 1fr 260px;gap:64px;padding-top:0}
  .chap-t{padding-top:72px}
  .items{padding-top:80px;padding-bottom:48px;align-content:start}
  .chap .tel{--haut:440px;max-width:260px;align-self:end}
}
.chap--sable{background:var(--sable)}
.complique{display:grid;gap:40px}
.complique-vis{display:flex;gap:16px;align-items:flex-end;justify-content:center}
.complique-vis img.photo{width:48%;height:260px;object-fit:cover;border-radius:20px;margin-bottom:40px}
.complique-vis .tel{--haut:340px;max-width:190px}
@media (min-width:1100px){
  .complique{grid-template-columns:1fr auto;gap:72px}
  .complique-vis{gap:20px}
  .complique-vis img.photo{width:300px;height:420px;margin-bottom:96px}
  .complique-vis .tel{--haut:520px;max-width:260px}
}
.sec--bas0{padding-bottom:0}
.mail{font-size:clamp(22px,3vw,30px);font-weight:600;color:var(--canard);text-decoration:none;border-bottom:2px solid var(--canard);
  padding-bottom:4px;align-self:flex-start;letter-spacing:-.01em}
.alerte{background:var(--alerte-fond);color:var(--alerte);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:14px;align-self:center}
.alerte b{font-size:22px;font-weight:600;letter-spacing:-.02em;display:flex;gap:12px;align-items:center}
.alerte span{font-size:16.5px;line-height:1.6}
@media (min-width:1100px){.alerte{padding:40px}}
.duree{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (min-width:1100px){.duree{grid-template-columns:repeat(4,1fr)}}
.duree div{display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:2px solid var(--canard)}
.duree b{font-size:clamp(44px,6vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--canard)}
.duree i{font-style:normal;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ocre)}
.duree span{font-size:16px;line-height:1.5;color:var(--corps)}
.quatre{display:grid;gap:28px}
@media (min-width:700px){.quatre{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.quatre{grid-template-columns:repeat(4,1fr);gap:40px}}
.quatre div{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid rgba(199,216,214,.25)}
.quatre b{font-size:23px;font-weight:600;letter-spacing:-.02em;color:var(--clair)}
.quatre span{font-size:16px;line-height:1.6;color:var(--clair-2)}
.quatre small{font-size:14px;font-weight:600;color:var(--jauge)}
.grille{display:grid;gap:40px}
@media (min-width:1100px){.grille{grid-template-columns:var(--g,1fr 1fr);gap:96px}}
.photos-hist{position:relative}
.photos-hist img{width:100%;object-fit:cover;border-radius:24px}
.photos-hist .grande{height:300px}
.photos-hist .petite{height:200px;width:70%;margin:-80px 0 0 0;position:relative;box-shadow:0 0 0 8px var(--papier)}
@media (min-width:1100px){
  .photos-hist{height:600px}
  .photos-hist .grande{position:absolute;right:0;top:0;width:440px;height:520px;border-radius:28px}
  .photos-hist .petite{position:absolute;left:0;bottom:0;width:300px;height:260px;margin:0;box-shadow:0 0 0 10px var(--papier)}
}
.photo-large{width:100%;height:300px;object-fit:cover;border-radius:24px}
@media (min-width:1100px){.photo-large{height:500px;border-radius:28px}}
.signature{font-size:18px;font-weight:600;color:var(--canard)}
.signaler{display:grid;gap:36px}
.signaler .tel{--haut:420px;max-width:260px;justify-self:center}
@media (min-width:1100px){.signaler{grid-template-columns:1fr 280px;gap:120px}.signaler .pile{padding:var(--sec) 0}.signaler .tel{--haut:520px;max-width:280px;align-self:end}}

/* ── documents (légal) : repris du site d'avant ── */
.moyen{font-size:calc(var(--h1) - 10px)}
.l{font-size:var(--t);line-height:1.6;color:var(--corps);max-width:640px}
.sec--carte{background:var(--papier)}
.sec--nu{padding-top:32px}
@media (min-width:700px){.sec--nu{padding-top:48px}}
.sec--haut{padding-top:28px}
.sec--fin{padding-bottom:12px}
.sec--bas{padding:28px 0}
.doc{max-width:700px}
.doc h2{font-size:21px;margin:36px 0 0;letter-spacing:-.01em}
@media (min-width:700px){.doc h2{font-size:23px}}
.doc h2:first-child{margin-top:0}
.doc p,.doc ul{font-size:calc(var(--t) - 1px);line-height:1.72;color:var(--encre);max-width:700px;margin:12px 0 0}
.doc ul{padding-left:22px}
.doc li{margin:7px 0}
.trou{color:#96570A;font-weight:600;background:#FDF3E4;padding:1px 6px;border-radius:5px}
.encart{background:var(--sable);border-radius:16px;padding:20px 22px;max-width:700px;margin:26px 0 0;display:flex;flex-direction:column;gap:8px}
.encart b{font-size:16.5px;font-weight:600}
.encart span{font-size:calc(var(--t) - 1px);line-height:1.7}
.som{max-width:700px;display:grid;grid-template-columns:1fr;gap:0 40px}
@media (min-width:700px){.som{grid-template-columns:1fr 1fr}}
.som a{font-size:15px;color:var(--canard);text-decoration:none;padding:9px 0;border-bottom:1px solid var(--filet)}
/* Les pages légales : le sommaire, puis le texte ; sur ordinateur, le sommaire en colonne à gauche, qui reste sous les
   yeux au défilement, et le texte sur toute la largeur restante (30/09). */
.sec--legal{padding-top:32px}
@media (min-width:700px){.sec--legal{padding-top:40px}}
.legal{display:grid;gap:32px}
.legal .som{max-width:none}
.legal .doc,.legal .doc p,.legal .doc ul,.legal .encart{max-width:none}
.legal .doc h2{scroll-margin-top:100px}
@media (min-width:1100px){
  .legal{grid-template-columns:260px minmax(0,1fr);gap:72px;align-items:start}
  .legal .som{position:sticky;top:112px;grid-template-columns:1fr;gap:0}
}

/* ── pied ── */
.pied{background:var(--encre);color:var(--clair-2);padding:48px 0 36px}
.pied-haut{display:grid;gap:32px}
@media (min-width:700px){.pied-haut{grid-template-columns:auto 1fr;gap:96px}}
.pied-marque{display:flex;align-items:center;gap:10px;color:var(--jauge);align-self:start}
.pied-marque span{font-size:22px;font-weight:700;color:var(--clair)}
.pied-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
/* Les trois colonnes de liens se répartissent sur toute la largeur (30/09 : tassées à gauche, elles laissaient la
   moitié du pied vide). */
@media (min-width:700px){.pied-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}}
.pied-col{display:flex;flex-direction:column;gap:2px;font-size:15px}
.pied-col b{font-weight:600;color:var(--clair);padding-bottom:6px}
.pied-col a{color:var(--clair-2);text-decoration:none;min-height:36px;display:flex;align-items:center}
.pied-col a:hover{color:var(--clair)}
.pied-bas{margin-top:32px;padding-top:20px;border-top:1px solid rgba(199,216,214,.18);font-size:13px;line-height:1.5;color:#9AB0AD;
  display:flex;flex-direction:column;gap:6px}
/* « Conçu par incubapp » (01/11) : discret, de la couleur du texte, souligné pour se lire comme un lien ; le retrait
   vertical agrandit la zone à toucher sans déplacer la ligne. Trois phrases ne tiennent pas sur une ligne à 1 100 px :
   la dernière passe dessous. */
.pied-bas a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;padding:4px 0}
.pied-bas a:hover{color:var(--clair)}
@media (min-width:1100px){.pied-bas{flex-direction:row;flex-wrap:wrap;justify-content:space-between;column-gap:32px}}
@media (min-width:1100px){.quatre.trois{grid-template-columns:repeat(3,1fr);gap:48px}}
.sec--haut0{padding-top:0}

/* Le bandeau de la mesure d'audience (m.js, 26/09) : une carte posée en bas de l'écran, qui ne
   bloque rien. Téléphone : toute la largeur moins les marges ; au-delà, 460 px en bas à gauche.
   ⚠️ « Refuser » et « Accepter » ont le MÊME style et la même taille (CNIL). */
.mesure{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:460px;display:grid;gap:10px;
  background:var(--carte);color:var(--encre);border:1px solid var(--filet-fort);border-radius:14px;
  padding:18px 18px 16px;box-shadow:0 12px 40px rgba(23,48,47,.18);font-size:15px;line-height:1.5}
.mesure b{font-size:17px;font-weight:600}
.mesure p{color:var(--corps)}
.mesure-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.mesure-choix .btn{min-height:48px;padding:0 16px;font:inherit;font-weight:600;cursor:pointer}
@media (min-width:700px){.mesure{left:24px;right:auto;bottom:24px}}

/* ── la vidéo de présentation (30/09) ──
   Deux lecteurs, un seul visible : le paysage au-delà de 700 px, le vertical (sous-titré) en dessous.
   Le fond du cadre est celui de la vidéo, pour qu'aucun liseré ne se voie avant la lecture. */
.film{display:grid;gap:32px}
.film-tete{display:grid;gap:16px}
@media (min-width:1100px){.film-tete{grid-template-columns:1fr 1fr;gap:72px;align-items:end}}
.film-cadre{border-radius:22px;overflow:hidden;background:#F1F4F4;
  box-shadow:0 40px 80px -40px rgba(14,61,65,.45),0 0 0 1px rgba(23,48,47,.06)}
.film-cadre video{display:block;width:100%;height:auto}
/* Le bouton du film (f.js, 01/10) : la lecture automatique est muette, lui rallume le son — en plein écran sur un
   téléphone. Posé par le script : sans lui, la page garde le lecteur ordinaire. ⚠️ [hidden] doit gagner sur le flex. */
.film-cadre{position:relative}
.film-son{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 22px 0 18px;border:0;border-radius:999px;background:var(--canard);color:var(--clair);
  font:inherit;font-size:16px;font-weight:600;white-space:nowrap;cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(14,61,65,.7)}
.film-son:hover{background:var(--nuit)}
.film-son[hidden]{display:none}
.film-apercu{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer;z-index:1}
.film-apercu[hidden]{display:none}
.film-son{z-index:2}
.film-large{display:none}
.film-haut{width:100%;max-width:360px;margin:0 auto}
@media (min-width:700px){.film-large{display:block}.film-haut{display:none}}
@media (min-width:1100px){.film-cadre{border-radius:28px}}
@media (min-width:1100px){.intro--film{grid-template-columns:.85fr 1.15fr;align-items:center}}
.intro-film{display:flex;flex-direction:column;gap:16px;align-self:center}
.intro-film .lien-fleche{align-self:center}
@media (min-width:1100px){.intro-film .lien-fleche{align-self:flex-start}}

/* ── le contrat de remplacement (30/09) ── */
/* La frise « Où en est-il » de l'application : coche faite, trois points ocre pour ce qui attend. */
.frise{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column}
.frise li{position:relative;display:grid;grid-template-columns:30px 1fr;column-gap:14px;padding-bottom:20px}
.frise li:last-child{padding-bottom:0}
.frise li:not(:last-child)::after{content:"";position:absolute;left:14.5px;top:34px;bottom:4px;width:1px;background:var(--filet-fort)}
.frise i{grid-row:1 / span 2;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--doux);color:var(--canard)}
.frise .attente i{background:#F6E3D5;color:var(--ocre)}
.frise b{font-size:17px;font-weight:600;line-height:1.3;padding-top:4px}
.frise span{font-size:15px;line-height:1.5;color:var(--corps)}
.sec--nuit .frise li:not(:last-child)::after{background:rgba(159,203,207,.3)}
.sec--nuit .frise i{background:rgba(159,203,207,.16);color:var(--jauge)}
.sec--nuit .frise .attente i{background:rgba(232,180,140,.16);color:#E8B48C}
.sec--nuit .frise b{color:var(--clair)}
.sec--nuit .frise span{color:var(--clair-2)}

/* Sur l'accueil : le texte à gauche ; à droite deux vraies pages du PDF signé et le téléphone. */
.ctr{display:grid;gap:44px}
.ctr-texte{padding-bottom:8px}
.ctr-vis{position:relative;height:430px;overflow:hidden;margin:0 calc(-1 * var(--pad));padding:0 var(--pad)}
.feuille{margin:0;background:#fff;border-radius:3px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.04)}
.feuille img{width:100%;height:auto}
.ctr-vis .feuille{position:absolute}
.ctr-vis .feuille--1{width:56%;left:3%;top:34px;transform:rotate(-5deg)}
.ctr-vis .feuille--2{width:56%;left:17%;top:128px;transform:rotate(2.5deg)}
.ctr-vis .tel{position:absolute;right:4%;bottom:0;width:44%;max-width:230px;--haut:330px;
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.6)}
@media (min-width:700px){
  .ctr-vis{height:560px;margin:0;padding:0}
  .ctr-vis .feuille--1{width:340px;left:4%;top:40px}
  .ctr-vis .feuille--2{width:350px;left:24%;top:150px}
  .ctr-vis .tel{width:260px;max-width:260px;--haut:440px;right:6%}
}
@media (min-width:1100px){
  .ctr{grid-template-columns:1fr 1.05fr;gap:72px}
  .ctr-texte{padding-bottom:var(--sec);align-self:center}
  .ctr-vis{height:680px;align-self:end}
  .ctr-vis .feuille--1{width:370px;left:0;top:56px}
  .ctr-vis .feuille--2{width:380px;left:56px;top:210px}
  .ctr-vis .tel{width:280px;max-width:280px;--haut:520px;right:0}
}

/* La page : les cinq étapes, et l'écran d'ordinateur dans un cadre sobre. */
.etapes-grille{display:grid;gap:40px}
@media (min-width:1100px){.etapes-grille{grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}}
.etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-bottom:1px solid var(--filet)}
.etapes li{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;padding:18px 0;border-top:1px solid var(--filet)}
.etapes .num{grid-row:1 / span 2;font-size:28px;font-weight:600;color:var(--canard);line-height:1;letter-spacing:-.02em}
.etapes b{font-size:18px;font-weight:600}
.etapes span:last-child{font-size:16px;line-height:1.6;color:var(--corps)}
.ecran-fig{margin:0;display:flex;flex-direction:column;gap:12px}
.ecran-fig figcaption,.sig-trois figcaption,.fig-tel figcaption,.deux-tels figcaption{font-size:14px;font-weight:600;color:var(--corps);text-align:center}
.ecran{background:var(--encre);border-radius:14px;padding:26px 6px 6px;position:relative;
  box-shadow:0 40px 70px -34px rgba(14,61,65,.55)}
.ecran::before{content:"";position:absolute;left:14px;top:10px;width:7px;height:7px;border-radius:50%;background:#5C6966;
  box-shadow:12px 0 0 #5C6966,24px 0 0 #5C6966}
.ecran img{width:100%;height:auto;border-radius:9px}
@media (min-width:1100px){.ecran{border-radius:18px;padding:32px 8px 8px}.ecran::before{left:18px;top:13px}.ecran img{border-radius:11px}}

/* La signature : trois vraies pièces côte à côte — le téléphone, le code, le papier. */
.sig-trois{display:grid;gap:40px;margin-top:48px;align-items:end}
.sig-trois figure{margin:0;display:flex;flex-direction:column-reverse;align-items:center;gap:14px;
  border-bottom:1px solid #D6CDBA}
.sig-trois .tel{--haut:430px;max-width:250px}
.detail{background:var(--carte);border-radius:22px;overflow:hidden;width:100%;max-width:320px;
  box-shadow:0 30px 60px -30px rgba(14,61,65,.45),0 0 0 1px rgba(23,48,47,.06)}
.detail img{width:100%;height:auto}
.papier{background:#fff;border-radius:6px;padding:16px 14px 10px;width:100%;max-width:360px;
  box-shadow:0 30px 60px -30px rgba(14,61,65,.45),0 0 0 1px rgba(23,48,47,.06)}
.papier img{width:100%;height:auto}
@media (min-width:1100px){
  .sig-trois{grid-template-columns:repeat(3,1fr);gap:0 48px;margin-top:72px;border-bottom:1px solid #D6CDBA}
  .sig-trois figure{border-bottom:0}
  .sig-trois .tel{--haut:440px;max-width:270px}
  .detail{max-width:340px}
  .papier{max-width:400px;padding:22px 20px 14px}
}
.items--quatre{margin-top:48px;padding-top:32px;border-top:1px solid #D6CDBA}
.sig-trois + .items--quatre{border-top:0}
@media (min-width:1100px){.items--quatre{grid-template-columns:repeat(4,1fr)}}

.fig-tel{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;align-self:end}
.fig-tel .tel{--haut:440px;max-width:260px}
@media (min-width:1100px){.fig-tel .tel{--haut:540px;max-width:280px}}
.deux-tels{display:flex;gap:16px;justify-content:center;align-items:flex-end}
.deux-tels figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;width:48%;max-width:260px}
.deux-tels .tel{--haut:330px}
@media (min-width:1100px){.deux-tels{gap:24px}.deux-tels .tel{--haut:500px}.deux-tels figure{width:260px}}
/* UN TÉLÉPHONE COUPÉ SE POSE SUR UN BORD (12/10, Antoine sur son iPhone : « elles ne sont pas collées au bas ») : coupé
   juste au-dessus de son menu, il se lit comme un téléphone qui SORT du bord d'une carte, d'une section ou d'un trait ;
   une bande vide dessous le faisait flotter. Contrôle : node outils/tels-au-bord.mjs. Ici, deux téléphones qui finissent
   leur section mangent sa marge du bas — le texte d'à côté garde la sienne. */
.sec:not(.sec--bas0) > .dans > .deux-tels:last-child{margin-bottom:calc(-1 * var(--sec));align-self:end}
/* Entre 1 100 et 1 279 px, les trois colonnes d'un moment de la journée ne tenaient pas (4 px de trop à 1 100). */
@media (min-width:1100px) and (max-width:1279px){.moment{gap:32px}.moment-v{grid-template-columns:300px 230px;gap:32px}}

/* ════════ 07/10 : la vitrine corrigée après l'étude des trois profils (etudes/vitrine-parcours-2026-10-07.md) ════════ */
/* quatre arguments au premier écran, en deux rangées de deux dès 700 px */
@media (min-width:700px){.confiance--4{grid-template-columns:repeat(2,1fr);gap:4px 28px}}
.vous-remplacez{margin-top:-6px;font-size:15.5px}
/* la section des remplaçants */
.remplacants-pas{margin-top:26px;padding:18px 20px;border-radius:14px;background:var(--carte);border:1px solid var(--filet)}
/* le délai de réponse */
.delai{font-size:15px;color:var(--gris);margin-top:-4px}
/* ce que Novidel ne fait pas */
.ne-fait-pas{margin-top:18px;padding:16px 18px;border-radius:14px;border:1px dashed var(--filet-fort);background:var(--carte);
  font-size:16px;line-height:1.6;color:var(--corps);max-width:900px}
.ne-fait-pas b{color:var(--encre)}
/* la même journée sur l'ordinateur */
.bureau{display:grid;gap:28px}
@media (min-width:1100px){.bureau{grid-template-columns:.75fr 1.6fr;align-items:center;gap:56px}}
/* le bandeau de la mesure d'audience, compact au téléphone, à droite au-delà */
@media (max-width:699px){
  .mesure{padding:12px 14px;gap:6px;font-size:14px;line-height:1.45;bottom:8px;left:8px;right:8px}
  .mesure b{font-size:15px}
  .mesure-choix{margin-top:2px}
  .mesure-choix .btn{min-height:42px}
}
@media (min-width:700px){.mesure{left:auto;right:24px;max-width:400px}}
/* au téléphone, les quatre moments de la journée défilent de côté */
@media (max-width:699px){
  .moments{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;border-bottom:0;
    margin:0 calc(-1 * var(--pad));padding:4px var(--pad) 12px;scrollbar-width:none}
  .moments::-webkit-scrollbar{display:none}
  .moment{flex:0 0 86%;scroll-snap-align:center;border-top:0;padding:20px 16px 0;background:var(--carte);
    border-radius:20px;border:1px solid var(--filet);overflow:hidden}
  .moment-v img.photo{height:170px}
  .jour-glisser{display:block;font-size:14px;font-weight:600;color:var(--canard);margin-top:14px}
}
@media (min-width:700px){.jour-glisser{display:none}}
@media (max-width:699px){.moment{display:flex;flex-direction:column;gap:14px}.moment-v{margin-top:auto}}

/* ════════ 07/10 (2) : les captures agrandies à l'ordinateur (demande d'Antoine, après l'étude : à 1 440 px, les téléphones
   faisaient 240 à 300 px de large, leur texte 7 à 9 px). Deux marches : 1 280 px, sans écraser le texte voisin (la colonne
   des moments n'y faisait que 204 px), puis 1 440 px, où les téléphones passent à 340 px environ. Le cadre montre plus
   d'écran, jamais au-delà de la ligne de coupe (COUPE dans gen2.py, au-dessus du menu de la capture). ════════ */
:root{--col-tel:280px}
.fig-acces .tel{--haut:440px;max-width:260px}
@media (min-width:1280px){
  .moment{grid-template-columns:130px 1fr 580px}
  .moment-v{grid-template-columns:240px 300px;gap:40px}
  .moment-v .tel{--haut:390px;max-width:300px}
  .roles{grid-template-columns:.85fr 1.15fr}
  .roles-tels figure{max-width:280px}
  .roles-tels .tel{--haut:560px}
  .chap{grid-template-columns:280px 1fr 300px;gap:56px}
  .chap .tel{--haut:500px;max-width:300px}
}
@media (min-width:1440px){
  :root{--col-tel:340px}
  .vis .tel{width:340px;max-width:340px}
  .moment{grid-template-columns:140px 1fr 660px}
  .moment-v{grid-template-columns:280px 340px}
  .moment-v .tel{--haut:440px;max-width:340px}
  .roles-tels figure{max-width:300px}
  .roles-tels .tel{--haut:600px}
  .chap{grid-template-columns:280px 1fr 340px}
  .chap .tel{--haut:560px;max-width:340px}
  .complique-vis img.photo{width:260px}
  .complique-vis .tel{--haut:600px;max-width:330px}
  :root{--g-rempl:.9fr 1.1fr}
  .deux-tels figure{width:290px;max-width:290px}
  .deux-tels .tel{--haut:560px}
  .fig-tel .tel{max-width:340px;--haut:600px}
  .fig-acces .tel{--haut:560px;max-width:340px}
  .signaler{grid-template-columns:1fr 340px}
  .signaler .tel{--haut:620px;max-width:340px}
}
/* LA TRANCHE 1 100 – 1 279 px (petits portables), vue en mesurant le 07/10 : la colonne de texte des moments tombait à
   109 px (un mot par ligne), les chapitres des fonctions et la section des remplaçants étaient aussi écrasés. On y réduit
   les visuels, et les remplaçants passent sur une colonne, les téléphones dessous. */
@media (min-width:1100px) and (max-width:1279px){
  .moment{grid-template-columns:110px 1fr 460px;gap:36px}
  .moment-v{grid-template-columns:200px 220px;gap:40px}
  .moment-v img.photo{height:220px}
  .moment-v .tel{--haut:300px;max-width:220px}
  .chap{grid-template-columns:240px 1fr 240px;gap:40px}
  .chap .tel{--haut:400px;max-width:240px}
  .roles{grid-template-columns:.85fr 1.15fr}
  :root{--g-rempl:1fr}
  #remplacants .deux-tels{justify-content:center}
}

/* ════════ 07/10 (3) : la page des questions fréquentes, « le magazine qu'on interroge » (maquette D + A validée par
   Antoine, etudes/maquette-faq-2026-10-07/). ⚠️ SEO et GEO : chaque réponse est écrite dans la page, repliée par
   <details> (Google et les moteurs de réponse la lisent) ; la recherche (q.js) ne fait que filtrer. ════════ */
.qr-ouv{padding-top:clamp(32px,5vw,72px)}
.qr-ouv-grille{display:flex;flex-wrap:wrap;gap:48px 80px;align-items:stretch}
.qr-ouv-texte{flex:999 1 480px;min-width:0}
.qr-ouv-photo{flex:1 1 380px;margin:0;min-height:520px;min-width:0}
.qr-ouv-photo img{width:100%;height:100%;object-fit:cover;object-position:35% center;border-radius:28px}
@media (max-width:699px){.qr-ouv-photo{min-height:0}.qr-ouv-photo img{height:auto;aspect-ratio:3/2}}
.qr-cherche{display:flex;flex-direction:column;gap:8px;max-width:640px;margin-top:6px}
.qr-cherche label{font-size:14px;font-weight:600;color:var(--jauge);padding-left:22px}
.qr-champ{display:flex;align-items:center;gap:12px;min-height:62px;padding:0 8px 0 22px;border-radius:999px;
  background:var(--carte);color:var(--canard);box-shadow:0 14px 36px rgba(0,0,0,.25)}
.qr-champ:focus-within{box-shadow:0 0 0 3px var(--jauge),0 14px 36px rgba(0,0,0,.25)}
.qr-champ svg{flex:none}
.qr-champ input{flex:1;min-width:0;height:58px;border:0;outline:none;background:transparent;font:inherit;font-size:18px;
  color:var(--encre);-webkit-appearance:none;appearance:none}
.qr-champ input::placeholder{color:#6B7774}
.qr-champ input::-webkit-search-cancel-button{display:none}
.qr-effacer{flex:none;min-height:46px;padding:0 18px;border-radius:999px;border:0;background:var(--sable);color:var(--encre);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.qr-bilan{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding-left:22px;min-height:44px;font-size:15px;
  color:var(--clair-2)}
.qr-tout{min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--jauge);font:inherit;font-size:15px;
  font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qr-som{display:flex;flex-direction:column;margin-top:8px}
.sec--nuit .qr-som a{display:flex;align-items:baseline;gap:20px;padding:16px 0;border-top:1px solid rgba(199,216,214,.25);
  color:var(--clair);text-decoration:none;font-size:20px;font-weight:500}
.sec--nuit .qr-som a:last-child{border-bottom:1px solid rgba(199,216,214,.25)}
.sec--nuit .qr-som a:hover{color:#fff}
.qr-som-num{flex:none;width:24px;font-size:14px;color:var(--jauge);font-variant-numeric:tabular-nums}
.qr-som-n{margin-left:auto;padding-left:12px;font-size:14px;color:var(--jauge);white-space:nowrap}
.sec--nuit .qr-som a.qr-som--vide{opacity:.4}
@media (max-width:699px){.sec--nuit .qr-som a{font-size:18px;gap:14px}}
.qr-cherche[hidden],.qr-effacer[hidden],.qr-tout[hidden],.qr-rien[hidden],.qr-chap[hidden],.qr-q[hidden]{display:none!important}
.qr-rien-boite{padding:40px;border-radius:24px;background:var(--carte);border:1px dashed var(--filet-fort);text-align:center;
  display:flex;flex-direction:column;gap:10px;align-items:center;font-size:17px;color:var(--corps)}
.qr-rien-titre{font-size:22px;font-weight:600;color:var(--encre)}
/* les chapitres */
.qr-chap{scroll-margin-top:64px}
@media (min-width:1100px){.qr-chap{scroll-margin-top:88px}}
.sec.qr-serre{padding-top:0}
.qr-trait{border-top:2px solid var(--encre);padding-top:clamp(48px,6vw,88px)}
.qr-tete{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 28px}
.qr-tete h2{font-size:clamp(32px,3.6vw,48px)}
.qr-num{font-size:clamp(72px,9vw,132px);line-height:.8;font-weight:400;color:var(--ocre);letter-spacing:-.05em;
  font-variant-numeric:tabular-nums lining-nums}
.sec--encre .qr-num{color:var(--jauge)}
.qr-cite{font-size:clamp(24px,2.4vw,32px);line-height:1.25;font-weight:500;letter-spacing:-.02em;color:var(--canard);
  max-width:460px;text-wrap:balance}
.qr-deux{display:flex;flex-wrap:wrap;gap:40px 72px;align-items:flex-start}
.qr-cote{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:28px}
.qr-principal{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:28px}
.qr-pile{display:flex;flex-direction:column;gap:36px}
.qr-liste{display:flex;flex-direction:column;gap:12px}
.qr-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;align-items:start}
.qr-photo{width:100%;height:auto;border-radius:24px;object-fit:cover}
.qr-photo--portrait{max-width:440px;aspect-ratio:4/5}
.qr-photo--large{aspect-ratio:21/8;object-position:center 40%}
@media (max-width:699px){.qr-photo--large{aspect-ratio:16/10}}
.qr-photo--cote{flex:1 1 340px;max-width:500px;aspect-ratio:4/5}
.qr-badges{display:flex;flex-wrap:wrap;gap:10px}
.qr-badges span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;
  background:var(--carte);border:1px solid var(--filet-fort);font-size:15px;font-weight:600;color:var(--canard)}
/* une question qui se déplie */
.qr-q{border-radius:18px;background:var(--carte);border:1px solid var(--filet);scroll-margin-top:84px;
  transition:border-color .2s,box-shadow .2s}
@media (min-width:1100px){.qr-q{scroll-margin-top:108px}}
.qr-q[open]{border-color:var(--canard);box-shadow:0 0 0 .5px var(--canard),0 12px 32px rgba(18,86,92,.12)}
.qr-q summary{list-style:none;display:flex;align-items:center;gap:18px;padding:22px 24px;cursor:pointer;border-radius:18px}
.qr-q summary::-webkit-details-marker{display:none}
.qr-q summary:focus-visible{outline:3px solid var(--canard);outline-offset:2px}
.qr-q h3{flex:1;margin:0;font-size:19px;line-height:1.35;letter-spacing:-.01em;font-weight:600}
.qr-q h3 .lie{white-space:nowrap}
@media (max-width:699px){.qr-q summary{padding:18px 18px;gap:14px}.qr-q h3{font-size:17px}}
.qr-signe{flex:none;position:relative;width:36px;height:36px;border-radius:50%;background:var(--sable);color:var(--canard);
  transition:background .2s,color .2s}
.qr-signe::before,.qr-signe::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;
  border-radius:2px;background:currentColor;transition:transform .2s}
.qr-signe::after{transform:rotate(90deg)}
.qr-q[open] .qr-signe{background:var(--canard);color:var(--clair)}
.qr-q[open] .qr-signe::after{transform:rotate(0deg)}
.qr-r{padding:0 24px 24px}
@media (max-width:699px){.qr-r{padding:0 18px 20px}}
.qr-r p{font-size:17px;line-height:1.62;color:var(--corps);max-width:680px}
.qr-r a{color:var(--canard);font-weight:600}
@media (prefers-reduced-motion:reduce){.qr-q,.qr-signe,.qr-signe::before,.qr-signe::after{transition:none}}
/* le chapitre sombre */
.sec--encre .qr-q{background:rgba(255,255,255,.04);border-color:rgba(199,216,214,.28)}
.sec--encre .qr-q[open]{background:rgba(255,255,255,.08);border-color:var(--jauge);box-shadow:0 0 0 .5px var(--jauge)}
.sec--encre .qr-q h3{color:var(--clair)}
.sec--encre .qr-q summary:focus-visible{outline-color:var(--jauge)}
.sec--encre .qr-signe{background:rgba(255,255,255,.1);color:var(--jauge)}
.sec--encre .qr-q[open] .qr-signe{background:var(--jauge);color:var(--nuit)}
.sec--encre .qr-r p{color:var(--clair-2)}
.sec--encre .qr-r a{color:var(--jauge)}
/* l'appel du bas */
.qr-appel{border-radius:28px;background:var(--canard);color:var(--clair);padding:clamp(32px,5vw,64px);display:flex;
  flex-wrap:wrap;align-items:center;gap:24px 56px}
.qr-appel h2{flex:999 1 460px;font-size:clamp(30px,3.6vw,48px)}
.qr-appel .accent{color:var(--jauge)}
.qr-appel-act{flex:1 1 260px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;font-size:15px;color:var(--clair-2)}
.qr-appel .btn{background:var(--clair);color:var(--nuit);border-color:var(--clair)}
.qr-appel .btn:hover{background:#fff;color:var(--nuit)}

/* ════════ 07/10 (4) : SEO et GEO, suite. Les images AVIF / WebP arrivent dans un <picture> : display:contents le rend
   transparent, l'image garde sa place dans la grille ou la rangée qui la porte (aucune règle n'y vise un enfant direct).
   « Mis à jour le … » : la date de la page, tenue par dates.json. ════════ */
picture{display:contents}
/* ⚠️ Les <source> d'un <picture> transparent devenaient des CASES de la grille ou de la rangée (Chrome ne les cache
   pas) : la photo de l'ouverture des données et du contrat tombait sous le texte (Antoine, 07/10). Cachées, elles
   servent toujours au choix du format. */
picture source{display:none}
.maj{font-size:14px;color:var(--gris)}
.sec--nuit .maj,.sec--encre .maj{color:var(--clair-2)}

/* ════════ 07/10 (5) : les badges des boutiques (officiels, sans lien tant que les applications ne sont pas publiées :
   gen2.py, BOUTIQUES) et la page des remplaçants (maquette validée par Antoine). ════════ */
.boutiques{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.boutique{display:inline-flex;line-height:0;border-radius:8px}
.boutique img{height:48px;width:auto}
.boutiques--petit .boutique img{height:40px}
.boutique--attente{cursor:default}
a.boutique:focus-visible{outline:3px solid var(--canard);outline-offset:3px}
.boutiques-note{flex-basis:100%;font-size:13px;color:var(--gris)}
.sec--nuit .boutiques-note,.sec--encre .boutiques-note,.pied .boutiques-note,.rp-chemin--nuit .boutiques-note,
.rp-appel .boutiques-note{color:var(--clair-2)}
.boutiques--ouv{margin-top:-4px}
.appel-act{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media (min-width:1100px){.appel-act{align-items:flex-end}.appel-act .boutiques{justify-content:flex-end}}
.pied-gauche{display:flex;flex-direction:column;gap:20px;align-self:start}
.qr-r .boutiques{margin-top:14px}
/* les deux boutons du partage, et leurs variantes sur fond sombre */
.btn--clair{background:var(--clair);color:var(--nuit);border-color:var(--clair)}
.btn--clair:hover{background:#fff;color:var(--nuit)}
.btn--trait{background:transparent;color:var(--clair);border-color:rgba(159,203,207,.6)}
.btn--trait:hover{background:rgba(255,255,255,.08);color:#fff}
.btn--trait[hidden]{display:none}
.partage{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.partage .btn{min-height:48px;padding:0 22px;font-size:16px}
/* la page */
.rp-ouv{display:flex;flex-wrap:wrap;gap:48px 72px;align-items:stretch}
.rp-ouv-texte{flex:999 1 520px;min-width:0}
.rp-ou{font-size:15px;font-weight:600;margin-top:6px}
.rp-chemins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:14px}
.rp-chemin{background:var(--carte);border:1px solid var(--filet);border-radius:20px;padding:24px;display:flex;
  flex-direction:column;gap:14px}
.rp-chemin p{font-size:16px;line-height:1.55;color:var(--corps)}
.rp-chemin .btn{min-height:48px;padding:0 22px;font-size:16px;margin-top:auto}
.rp-chemin-t{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600}
.rp-rond{flex:none;width:34px;height:34px;border-radius:50%;background:var(--doux);color:var(--canard);display:flex;
  align-items:center;justify-content:center}
.rp-chemin--nuit{background:var(--nuit);border-color:var(--nuit);color:#EEF3F1}
.rp-chemin--nuit p{color:var(--clair-2)}
.rp-chemin--nuit .rp-rond{background:rgba(255,255,255,.1);color:var(--jauge)}
.rp-chemin--nuit .partage{margin-top:auto}
.rp-ouv-photo{flex:1 1 380px;min-width:0;margin:0;position:relative;min-height:460px}
.rp-ouv-photo img{width:100%;height:100%;object-fit:cover;object-position:30% center;border-radius:28px}
.rp-ouv-photo figcaption{position:absolute;left:18px;right:18px;bottom:18px;max-width:320px;background:var(--carte);
  border-radius:18px;padding:14px 18px;box-shadow:0 16px 36px rgba(23,48,47,.18);font-size:15px;line-height:1.45;
  color:var(--corps)}
.rp-ouv-photo figcaption b{color:var(--encre)}
@media (max-width:699px){.rp-ouv-photo{min-height:0}.rp-ouv-photo img{height:auto;aspect-ratio:4/3}
  .rp-ouv-photo figcaption{position:static;max-width:none;margin-top:12px;box-shadow:none;border:1px solid var(--filet)}}
.rp-deux{display:flex;flex-wrap:wrap;gap:48px 72px;align-items:center}
.rp-deux--inverse{flex-wrap:wrap-reverse}
.rp-texte{flex:999 1 480px;min-width:0}
.rp-pas{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.rp-pas li{display:flex;gap:20px;padding:20px 0;border-top:1px solid #D6CDBA}
.rp-pas li:last-child{border-bottom:1px solid #D6CDBA}
.rp-pas-n{flex:none;width:44px;font-size:30px;font-weight:400;line-height:1;color:var(--ocre);font-variant-numeric:tabular-nums}
.rp-pas b{display:block;font-size:19px;font-weight:600;margin-bottom:6px}
.rp-pas span:not(.rp-pas-n){font-size:16px;line-height:1.55;color:var(--corps)}
.rp-tels{flex:1 1 480px;min-width:0;display:flex;gap:20px;justify-content:center;align-items:flex-start}
.rp-tels figure{margin:0;flex:1 1 0;max-width:280px;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.rp-tels figcaption{font-size:14px;font-weight:600;color:var(--corps);text-align:center}
.rp-tels .tel{max-width:280px}
.rp-tels > .tel,.rp-tels > .rp-decale{flex:1 1 0;min-width:0}
.rp-decale{margin-top:48px}
.rp-tels--un{flex:1 1 320px}
.rp-tels--un .tel{max-width:300px}
.rp-vis{flex:1 1 460px;min-width:0;display:flex;gap:20px;align-items:flex-end;justify-content:center}
.rp-vis .rp-photo{flex:1 1 0;min-width:0;max-width:300px;aspect-ratio:4/5;object-fit:cover;border-radius:24px}
.rp-vis .tel{flex:1 1 0;min-width:0;max-width:260px}
.rp-items{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.rp-items--trait .item{border-top:1px solid #D6CDBA;padding-top:16px}
.rp-terrain{display:flex;flex-direction:column;gap:40px}
.rp-terrain-tete{max-width:760px}
.rp-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.rp-col{border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(199,216,214,.28);padding:28px;
  display:flex;flex-direction:column;gap:16px}
.rp-col--trait{background:transparent;border-style:dashed;border-color:rgba(199,216,214,.4)}
.rp-col-t{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--jauge)}
.rp-col--trait .rp-col-t{color:var(--clair-2)}
.rp-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;font-size:17px;line-height:1.5}
.rp-col li{display:flex;gap:12px}
.rp-col li svg{flex:none;margin-top:3px;color:var(--jauge)}
.rp-points{color:var(--clair-2)}
.rp-points li::before{content:"·";flex:none;width:20px;text-align:center;color:var(--jauge)}
.rp-col-note{font-size:14px;color:var(--clair-2)}
.rp-lignes .ligne{grid-template-columns:150px 1fr;gap:16px}
@media (max-width:699px){.rp-lignes .ligne{grid-template-columns:1fr;gap:4px}}
.rp-depart{display:flex;flex-wrap:wrap;gap:32px 72px}
.rp-depart > .pile{flex:1 1 320px}
.rp-depart > .items{flex:999 1 560px;min-width:0;align-content:start}
.rp-questions{display:flex;flex-wrap:wrap;gap:32px 72px}
.rp-questions > .pile{flex:1 1 320px}
.rp-questions > .qr-liste{flex:999 1 560px;min-width:0}
.rp-appel{border-radius:28px;background:var(--canard);color:var(--clair);padding:clamp(32px,5vw,64px);display:flex;
  flex-wrap:wrap;align-items:center;gap:24px 56px}
.rp-appel h2{flex:999 1 460px;font-size:clamp(30px,3.6vw,46px)}
.rp-appel .accent{color:var(--jauge)}
.rp-appel-act{flex:1 1 260px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rp-appel-act .btn{min-height:48px;padding:0 22px;font-size:16px}
.rp-appel .boutiques{flex-basis:100%}
@media (max-width:699px){.rp-tels{gap:12px}.rp-decale{margin-top:28px}.rp-vis{gap:12px}}
/* Le pied : les badges l'un sous l'autre (côte à côte, ils élargissaient la colonne de la marque et la page débordait
   à 820 px, vu le 07/10). */
.pied .boutiques{flex-direction:column;align-items:flex-start}
.pied .boutiques-note{flex-basis:auto;max-width:160px}
/* La page des remplaçants, retouches après regard (07/10) : une règle générale de l'accueil donne 80 px au-dessus des
   .items (à partir de 1 100 px) — ici, la liste suit son titre ; le haut de la page respire sous le menu ; les titres
   des colonnes étroites (le départ, les questions) restent sur trois lignes au plus. */
.rp-items{padding-top:0;padding-bottom:0}
.sec--haut0 .rp-ouv{padding-top:clamp(32px,4vw,56px)}
.rp-depart > .pile,.rp-questions > .pile{flex:1 1 380px}
.rp-depart h2,.rp-questions h2{font-size:clamp(30px,3vw,42px)}
.appel-act .btn{align-self:auto}
@media (min-width:1100px){.appel-act .boutiques-note{text-align:right}}

/* ════════ 07/10 (6) : les boutons et les badges CENTRÉS dans leurs blocs (Antoine : « les boutons ne sont pas centrés
   vraiment dans les blocs, même sur le téléphone »). Dans un encadré ou une colonne d'action, les boutons prennent toute
   la largeur, l'un sous l'autre, et les badges se centrent dessous ; au téléphone, sous des boutons pleine largeur,
   les badges et leur phrase se centrent aussi. ════════ */
.rp-chemin .btn{align-self:stretch;width:100%}
.rp-chemin .partage{flex-direction:column;align-items:stretch}
.rp-chemin .partage .btn{width:100%}
.rp-chemin .boutiques,.rp-appel-act .boutiques{justify-content:center}
.rp-chemin .boutiques-note,.rp-appel-act .boutiques-note{text-align:center}
.rp-appel-act{flex-direction:column;align-items:stretch;flex:1 1 280px;max-width:340px}
.rp-appel-act .partage{flex-direction:column;align-items:stretch}
.rp-appel-act .btn{width:100%}
@media (max-width:699px){
  .boutiques--ouv{justify-content:center}
  .boutiques--ouv .boutiques-note{text-align:center}
  .appel-act{align-items:stretch}
  .appel-act .btn{width:100%}
  .appel-act .boutiques{justify-content:center}
  .appel-act .boutiques-note{text-align:center}
  .rp-appel-act{max-width:none}
}

/* ════════ 07/10 (7) : la page des tarifs (maquette validée par Antoine). Le prix d'abord, en chiffres ; ce qui est
   compris ; ce que disent les CGU si cela change ; de quoi vit Novidel ; les questions. ════════ */
.tf-ouv{display:flex;flex-wrap:wrap;gap:48px 80px;align-items:center;padding-top:clamp(32px,4vw,56px)}
.tf-ouv-texte{flex:999 1 480px;min-width:0}
.tf-carte{flex:1 1 360px;min-width:0;max-width:460px;margin:0 auto;background:var(--nuit);color:#EEF3F1;border-radius:28px;
  padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:22px;box-shadow:0 40px 80px -40px rgba(14,61,65,.6)}
.tf-carte-tete{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--jauge)}
.tf-pastille{font-size:13px;letter-spacing:0;text-transform:none;color:var(--nuit);background:var(--jauge);border-radius:999px;
  padding:5px 12px}
.tf-prix{display:flex;align-items:baseline;gap:12px;font-size:17px;line-height:1.35;color:var(--clair-2)}
.tf-montant{font-size:clamp(72px,8vw,104px);line-height:.9;font-weight:600;letter-spacing:-.05em;color:#EEF3F1;
  font-variant-numeric:tabular-nums lining-nums}
.tf-carte ul{margin:0;padding:20px 0 0;border-top:1px solid rgba(199,216,214,.25);list-style:none;display:flex;
  flex-direction:column;gap:12px;font-size:16px;line-height:1.45}
.tf-carte li{display:flex;gap:12px}
.tf-carte li svg{flex:none;margin-top:2px;color:var(--jauge)}
.tf-carte .btn{align-self:stretch;width:100%}
.tf-carte .boutiques{justify-content:center}
.tf-carte .boutiques-note{text-align:center;color:var(--clair-2)}
.tf-compris{display:flex;flex-direction:column;gap:36px}
.tf-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px}
.tf-tete .pile{max-width:720px}
.tf-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.tf-item{background:var(--carte);border:1px solid var(--filet);border-radius:18px;padding:20px 22px;display:flex;gap:14px;
  align-items:flex-start}
.tf-item div{display:flex;flex-direction:column;gap:4px}
.tf-item b{font-size:17px;font-weight:600}
.tf-item div span{font-size:15px;line-height:1.5;color:var(--corps)}
.tf-rond{flex:none;width:30px;height:30px;border-radius:50%;background:var(--doux);color:var(--canard);display:flex;
  align-items:center;justify-content:center}
.tf-rond svg{width:16px;height:16px}
.tf-pas{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:flex-start;padding:20px 24px;border-radius:18px;
  border:1px dashed var(--filet-fort);max-width:900px}
.tf-pas b{flex:none;font-size:16px}
.tf-pas span{flex:1 1 320px;font-size:16px;line-height:1.55;color:var(--corps)}
.tf-demain{display:flex;flex-direction:column;gap:40px}
.tf-demain-tete{max-width:780px}
.tf-demain-tete a{color:var(--jauge)}
.tf-engs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.tf-eng{border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(199,216,214,.28);padding:26px;display:flex;
  flex-direction:column;gap:10px}
.tf-eng-grand{font-size:44px;font-weight:400;line-height:1;color:var(--jauge);font-variant-numeric:tabular-nums}
.tf-eng b{font-size:18px;color:var(--clair)}
.tf-eng span:last-child{font-size:15px;line-height:1.55;color:var(--clair-2)}
.tf-vit{display:flex;flex-wrap:wrap;gap:32px 80px;align-items:flex-start}
.tf-vit > .pile{flex:1 1 340px}
.tf-vit h2{font-size:clamp(30px,3.4vw,44px)}
.tf-vit-texte{flex:999 1 520px;min-width:0;max-width:760px;display:flex;flex-direction:column;gap:18px}
.tf-vit-texte p{font-size:18px;line-height:1.65;color:var(--corps)}

/* ════════ 07/10 (8) : « gratuit » dès l'ouverture de l'accueil (proposition A + C, choisie par Antoine). Au téléphone,
   la pastille au-dessus du titre ; à l'ordinateur (photo à côté du texte, dès 1 100 px), l'étiquette « 0 € » sur la
   photo, et la pastille se cache ; la phrase sous les boutons, partout. ════════ */
.gratuit-pastille{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:7px 14px 7px 10px;
  border-radius:999px;background:var(--doux);color:var(--nuit);font-size:15px;font-weight:600}
.gratuit-pastille svg{color:var(--canard);flex:none}
.gratuit-phrase{font-size:15px;line-height:1.5;color:var(--gris);margin-top:-8px}
.gratuit-phrase b{color:var(--encre);font-weight:600}
.gratuit-etiquette{display:none}
@media (min-width:1100px){
  .gratuit-pastille{display:none}
  .gratuit-etiquette{display:flex;position:absolute;z-index:3;left:18px;top:18px;align-items:center;gap:14px;
    background:var(--nuit);color:#EEF3F1;border-radius:20px;padding:16px 20px;box-shadow:0 18px 40px rgba(14,61,65,.35);
    transform:rotate(-3deg)}
  .gratuit-etiquette b{font-size:46px;line-height:.9;letter-spacing:-.04em;font-weight:600;font-variant-numeric:lining-nums}
  .gratuit-etiquette span{font-size:15px;line-height:1.3;color:var(--clair-2)}
  .gratuit-etiquette strong{display:block;color:#fff;font-size:17px;font-weight:600}
}
@media (max-width:699px){.gratuit-phrase{text-align:center}}

/* ════════ LES PAGES PAR FONCTION (10/10, maquette validée par Antoine : etudes/maquette-pages-fonctions-2026-10-10/) ════════
   Sept pages (tournée, transmissions, compte rendu, patients, planning, kilomètres, « à côté de la facturation ») sur la
   mise en page de la page des remplaçants (rp-…) ; « Les fonctions » en sommaire, piste B « trois temps » (tb-…, so-…) ;
   « Les fonctions » qui se déroule dans le menu ; « Ce qu'il faut savoir » du contrat ; la 4e colonne du pied. ════════ */
.fn-sur a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.fn-large-tete{max-width:780px;margin-bottom:36px}
.fn-ecran{min-width:0;width:100%}
.rp-deux > .fn-ecran{flex:1 1 460px;max-width:680px}
.dans > .fn-ecran{max-width:980px;margin:0 auto}
.fn-detail{max-width:100%;border:1px solid var(--filet)}
.rp-col a{color:var(--clair);text-underline-offset:3px}
/* « Les autres fonctions » : une carte par page */
.fn-autres{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px;margin-top:32px}
.fn-carte{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 48px 20px 22px;border:1px solid var(--filet);
  border-radius:14px;background:var(--carte);color:var(--encre);text-decoration:none;transition:border-color .15s}
.fn-carte:hover{border-color:var(--canard)}
.fn-carte b{font-size:17px;font-weight:600}
.fn-carte span{font-size:15px;line-height:1.5;color:var(--corps)}
.fn-carte svg{position:absolute;right:18px;top:22px;color:var(--canard)}
/* Le contrat : ce qu'il faut savoir, règle par règle */
.savoir-tete{max-width:780px}
.regles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:14px;margin-top:36px}
.regle{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--filet);border-radius:14px;background:var(--carte)}
.regle h3{font-size:18px;font-weight:600;line-height:1.35;letter-spacing:normal}
.regle p{font-size:15.5px;line-height:1.55;color:var(--corps)}
.regle .regle-nov{background:var(--doux);border-radius:10px;padding:10px 12px;font-size:15px;color:var(--encre)}
.regle-nov b{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--canard);margin-bottom:3px}
.regle .regle-src{margin-top:auto;font-size:14px;font-weight:600}
.regle-src a{color:var(--canard)}
.savoir-note{margin-top:20px;font-size:14px;max-width:780px}
/* Le pied : une quatrième colonne, « Les fonctions » */
@media (min-width:700px){.pied-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pied-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
/* « Les fonctions », le sommaire en trois temps : sur la route, entre collègues, au bureau */
.so-tete{max-width:760px;padding-top:clamp(32px,4vw,56px);padding-bottom:36px}
.so-puces{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.so-puces li{font-size:13.5px;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--doux);color:var(--canard)}
.so-lien{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--canard);
  margin-top:auto;padding-top:8px}
.so-carte{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:26px;border-radius:22px;overflow:hidden;
  text-decoration:none;color:var(--encre);background:var(--carte);border:1px solid var(--filet);transition:transform .2s,box-shadow .2s}
.so-carte:hover,.so-carte:focus-visible{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(23,48,47,.35)}
.so-carte:focus-visible{outline:2px solid var(--canard);outline-offset:3px}
.so-texte{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;min-width:0}
.so-carte h2{font-size:26px;line-height:1.15;letter-spacing:-.01em}
.so-carte p{font-size:16px;line-height:1.55;color:var(--corps);max-width:40ch}
.so--km{min-height:320px;justify-content:flex-end;border:0;color:#fff}
.so--km .so-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;z-index:0}
.so--km::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,61,65,0) 25%,rgba(14,61,65,.92) 100%)}
.so--km h2{color:#fff} .so--km p{color:#E4EEEC} .so--km .so-lien{color:var(--jauge)}
.so--fact{background:transparent;border:1.5px dashed var(--filet-fort);justify-content:center}
.so--fact:hover{box-shadow:none}
@media (min-width:1100px){.so-carte{padding:30px;min-height:270px}}
@media (prefers-reduced-motion:reduce){.so-carte{transition:none}.so-carte:hover{transform:none}}
.tb-tete{max-width:760px;margin-bottom:36px}
.tb-texte{display:flex;flex-direction:column;gap:10px;min-width:0}
.tb-texte h3{font-size:30px;line-height:1.15;letter-spacing:-.01em}
.tb-texte p{font-size:17px;line-height:1.55;color:var(--corps)}
.tb-route{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.tb-tels{display:flex;gap:16px;justify-content:center;align-items:flex-end}
.tb-tels .tel{width:46%;max-width:240px;--haut:420px}
.tb-tels .tel + .tel{margin-bottom:40px}
@media (min-width:1100px){
  .tb-route{grid-template-columns:minmax(0,1fr) 520px minmax(0,1fr);gap:40px;align-items:end}
  .tb-route > .tb-texte{padding-bottom:64px}
  .tb-tels .tel{--haut:500px}
}
.tb-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.tb-carte{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;text-decoration:none;color:var(--clair);
  background:rgba(255,255,255,.06);border:1px solid rgba(199,216,214,.28);transition:background .2s}
.tb-carte:hover,.tb-carte:focus-visible{background:rgba(255,255,255,.1)}
.tb-vis{height:250px;display:flex;justify-content:center;align-items:flex-end;padding:24px 24px 0;background:rgba(0,0,0,.18);overflow:hidden}
.tb-vis .tel{width:210px;--haut:230px}
.tb-vis--detail{padding:0;align-items:flex-start} .tb-vis--detail img{width:100%;height:100%;object-fit:cover;object-position:top}
.tb-vis--papier{align-items:flex-start;padding-top:28px} .tb-vis--papier .feuille{width:200px;transform:rotate(-3deg)}
.tb-carte-t{display:flex;flex-direction:column;gap:10px;padding:24px 26px 26px;flex:1}
.tb-carte-t h3{font-size:24px;color:var(--clair)} .tb-carte-t p{font-size:16px;line-height:1.55;color:var(--clair-2)}
.tb-carte .so-lien{color:var(--jauge)}
.tb-bureau{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.tb-grand{display:flex;flex-direction:column;gap:20px;text-decoration:none;color:var(--encre);background:var(--carte);
  border:1px solid #D6CDBA;border-radius:22px;padding:22px}
.tb-grand-t{display:flex;flex-direction:column;gap:10px} .tb-grand-t h3{font-size:28px} .tb-grand-t p{color:var(--corps)}
.tb-pile{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:1100px){.tb-bureau{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
/* la photo de « Et quand ça se complique » est en portrait (3:4) : cadrée sur la personne */
.complique-vis img.photo{object-position:center 40%}
/* ════════ « Les fonctions », retouches du 10/10 au soir (Antoine : « le téléphone est coupé en bas, c'est pas joli,
   trouve une solution plus esthétique et originale » ; « le texte en haut, il y a un vide à droite ») ════════ */
.so-ouv{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:end;padding-bottom:36px}
.so-ouv .so-tete{padding-bottom:0}
@media (min-width:1100px){.so-ouv{grid-template-columns:minmax(0,1fr) 400px;gap:72px}}
.so-plan{background:var(--carte);border:1px solid var(--filet);border-radius:22px;padding:22px 24px}
.so-plan-titre{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ocre);margin:0 0 6px}
.so-plan ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.so-plan li{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-top:1px solid var(--filet)}
.so-plan li:first-child{border-top:0;padding-top:8px}
.so-plan-t{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:600;color:var(--encre);text-decoration:none}
.so-plan-t:hover{color:var(--canard)}
.so-plan-n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--doux);color:var(--canard);font-size:14px;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.so-plan-fn{display:flex;flex-wrap:wrap;gap:4px 14px;padding-left:40px;font-size:15px}
.so-plan-fn a{color:var(--corps);text-decoration:underline;text-decoration-color:var(--filet-fort);text-underline-offset:3px}
.so-plan-fn a:hover{color:var(--canard)}
#sur-la-route,#entre-collegues,#au-bureau{scroll-margin-top:90px}
/* Sur la route : deux téléphones ENTIERS, en éventail, sur un disque — plus jamais tranchés par le bord de la section */
.tb-tels{position:relative;align-items:center;padding:28px 0 36px;isolation:isolate}
.tb-tels::before{content:"";position:absolute;left:50%;top:50%;width:min(470px,98%);aspect-ratio:1;border-radius:50%;
  background:var(--doux);transform:translate(-50%,-50%);z-index:-1}
.tb-tels .tel{width:44%;max-width:230px;box-shadow:0 34px 60px -30px rgba(14,61,65,.6)}
.tb-tels .tel:first-child{transform:rotate(-6deg) translate(12px,-8px)}
.tb-tels .tel + .tel{margin-bottom:0;transform:rotate(5deg) translate(-12px,28px)}
@media (min-width:1100px){.tb-route{align-items:center} .tb-route > .tb-texte{padding-bottom:0}}
/* Entre collègues : le planning en détail d'écran, comme la relève */
.tb-vis--mois img{object-position:center 8%}
/* Et quand ça se complique : le téléphone entier, à côté de la photo */
.complique-vis--entier{align-items:center}
.complique-vis--entier img.photo{margin-bottom:0}
.complique-vis--entier .tel{box-shadow:0 34px 60px -30px rgba(0,0,0,.6)}
.so-ouv{padding-top:clamp(32px,4vw,56px);align-items:center}
.so-ouv .so-tete{padding-top:0}

/* Au volant (maquette du 10/10) : l'écran de la voiture et le téléphone du mode route. */
.rp-deux > .av-visuel{flex:1 1 520px;max-width:640px;min-width:0}
.av-visuel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 30%;gap:18px;align-items:end}
.av-voiture{margin:0;position:relative}
.av-ecran{border-radius:22px;overflow:hidden;background:#0b0b0f;padding:8px;box-shadow:0 24px 50px rgba(18,49,58,.22)}
.av-ecran img{display:block;width:100%;height:auto;border-radius:16px}
.av-ecran--2{margin:16px 0 0 14%;width:86%;position:relative}
.av-tel{margin:0}
.av-visuel figcaption{font-size:14px;font-weight:600;color:var(--corps);margin-top:12px;text-align:center}
@media (max-width:820px){.av-visuel{grid-template-columns:minmax(0,1fr) 34%;gap:12px}}
/* ════════ Audit SEO et GEO du 11/10 ════════ */
/* « Les fonctions » : les kilomètres et la facturation en H3, au niveau de « Les patients » */
.so-carte h3{font-size:26px;line-height:1.15;letter-spacing:-.01em}
.so--km h3{color:#fff}
#au-volant{scroll-margin-top:90px}

/* Les comptes de Novidel (11/10) : sous les badges, les icônes seules sur une ligne (18/10), cibles de 40 px. */
.pied-reseaux{display:flex;flex-wrap:wrap;gap:8px}
.pied-reseaux a{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;color:var(--clair-2);
  border:1px solid rgba(199,216,214,.18);text-decoration:none}
.pied-reseaux a:hover{color:var(--clair);border-color:rgba(199,216,214,.45)}
.pied-reseaux a:focus-visible{outline:3px solid var(--canard);outline-offset:3px}
.pied-reseaux svg{flex:none}
/* ═══ LE CARNET (11/10) : la rubrique des pages « métier », piste A « Les intercalaires » (maquette validée par Antoine). */
/* ── l'article, commun aux deux pistes */
.ct-sur{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ocre)}
.ct-sur a{color:var(--canard)}
.ct-reponse{font-size:calc(var(--t) + 1px);line-height:1.58;color:var(--corps);max-width:680px;margin:0 0 14px}
.ct-meta{font-size:14px;color:var(--gris);margin:0}
.ct-relu i{color:var(--ocre);font-style:normal;font-weight:600}
.ct-sec{padding-block:clamp(26px,3.6vw,44px);border-top:1px solid var(--filet);scroll-margin-top:120px}
.ct-sec h2{font-size:calc(var(--h3) + 2px);line-height:1.15;margin:0 0 14px;text-wrap:balance}
.ct-sec>p,.ct-cycle-texte p{font-size:var(--t);line-height:1.6;color:var(--corps);margin:0 0 12px;max-width:640px}
.ct-questions3{display:grid;gap:22px 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.ct-questions3 h3{font-size:17px;margin:0 0 6px}
.ct-questions3 p{font-size:15.5px;line-height:1.55;margin:0}
.ct-cycle{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));align-items:center}
.ct-chiffres{font-size:16px!important;line-height:1.55;color:var(--encre)!important;background:var(--doux);border-radius:12px;padding:13px 15px}
.ct-cycle-fig{margin:0;display:grid;gap:10px;min-width:0}
.ct-cycle-fig figcaption{font-size:13.5px;color:var(--gris)}
.cy-grille{display:grid;grid-template-columns:34px repeat(7,minmax(0,1fr));gap:4px;width:100%;max-width:460px}
.cy-c{min-height:40px;display:flex;align-items:center;justify-content:center;gap:3px;border-radius:8px;background:var(--papier);border:1px solid var(--filet);min-width:0}
.cy-c.cy-we{background:#EADFCB}
.cy-vide,.cy-c.cy-j,.cy-c.cy-s{background:none;border:0}
.cy-c.cy-j{min-height:22px;font-size:12px;font-weight:600;color:var(--gris)}
.cy-c.cy-j.cy-we{color:var(--ocre)}
.cy-c.cy-s{font-size:12px;font-weight:600;color:var(--gris);justify-content:flex-start}
.cy-i{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#fff;flex:none}
.cy-grille--deux .cy-i{width:18px;height:21px;font-size:11px;border-radius:5px}
.cy-ia{background:#12565C}
.cy-ib{background:#A2521F}
.cy-ic{background:#55702F}
.cy-id{background:#5A4E86}
@media (max-width:640px){
  .cy-grille--deux .cy-c:not(.cy-j):not(.cy-s):not(.cy-vide){flex-direction:column;gap:2px;min-height:50px}
  .cy-grille--deux .cy-i{width:21px;height:18px;font-size:10.5px}
}
.ct-tableau{overflow-x:auto;border:1px solid var(--filet);border-radius:14px;background:var(--carte);margin-bottom:16px}
.ct-tableau table{border-collapse:collapse;width:100%;min-width:620px;font-size:14.5px}
.ct-tableau th,.ct-tableau td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--filet);vertical-align:top}
.ct-tableau thead th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);font-weight:600;background:var(--papier)}
.ct-tableau td{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Un tableau court (le tarif au kilomètre en euros, 12/10) : il tient sur un téléphone, sans défiler. */
.ct-tableau--etroit table{min-width:0;font-size:13.5px}
.ct-tableau--etroit th,.ct-tableau--etroit td{padding:10px 7px}
.ct-tableau--etroit thead th{text-transform:none;letter-spacing:0;font-size:12.5px}
.ct-tableau tbody tr:last-child th,.ct-tableau tbody tr:last-child td{border-bottom:0}
.ct-tableau tbody th{font-weight:500}
.ct-tableau th a{color:var(--encre)}
.ct-citation{margin:4px 0 16px;padding:16px 20px;border-left:4px solid var(--canard);background:var(--papier);border-radius:0 12px 12px 0;font-size:19px;line-height:1.45;color:var(--encre);max-width:640px}
.ct-citation cite{display:block;margin-top:10px;font-size:14px;font-style:normal;color:var(--gris)}
.ct-novidel{display:grid;gap:26px;align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));background:#0E3D41;border-radius:18px;padding:clamp(22px,3vw,34px);color:#C7D8D6}
.ct-novidel h2{color:#F5F1E8}
.ct-novidel .accent{color:#9FCBCF}
.ct-novidel .sur{color:#9FCBCF;margin-bottom:6px}
.ct-novidel p{color:#C7D8D6;font-size:16.5px;line-height:1.6;margin:0 0 16px}
.ct-novidel .btn--2{color:#F5F1E8;border-color:rgba(245,241,232,.38)}
.ct-novidel .btn--2:hover{background:rgba(245,241,232,.1);color:#fff}
.ct-novidel-tel{margin:0;width:100%;max-width:230px;justify-self:center}
/* Une photo du carnet (carnet-*.jpg) à la place du téléphone, 12/10 : au format 4/3, arrondie comme les cartes. */
.ct-novidel-photo{margin:0;width:100%;max-width:440px;justify-self:center}
.ct-novidel-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.ct-sources{font-size:14.5px!important}
.ct-imprimer{align-self:flex-start}
/* ── PISTE A · les intercalaires */
.ca{display:grid;gap:18px;padding-block:24px 64px}
/* Le carnet coupe un mot trop long (une adresse collée, un mot composé) plutôt que de déborder d’un téléphone (12/10) :
   publié depuis le serveur, il n’a plus de Chrome pour mesurer les débordements. Un tableau, lui, défile dans sa boîte. */
.ca{overflow-wrap:break-word}
.ca-onglets{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.ca-onglet{flex:none}
.ca-onglet-nom{display:block;background:var(--c);color:#fff;font-weight:600;font-size:14.5px;padding:9px 15px;border-radius:10px 10px 0 0;text-decoration:none;white-space:nowrap}
.ca-onglet--ouvert .ca-onglet-nom{box-shadow:inset 0 -3px 0 rgba(255,255,255,.55)}
.ca-onglet ul{display:none}
.ca-page{--marge:38px;min-width:0;position:relative;background-color:var(--carte);
  background-image:linear-gradient(90deg,transparent calc(var(--marge) - 1px),rgba(162,82,31,.38) calc(var(--marge) - 1px),rgba(162,82,31,.38) calc(var(--marge) + 1px),transparent calc(var(--marge) + 1px)),
  repeating-linear-gradient(180deg,transparent 0 33px,rgba(18,86,92,.075) 33px 34px);
  border:1px solid var(--filet);border-radius:6px 18px 18px 18px;padding:28px 20px 32px calc(var(--marge) + 18px);box-shadow:0 30px 60px -44px rgba(14,61,65,.4)}
@media (min-width:1000px){
  .ca{grid-template-columns:220px minmax(0,1fr);gap:0;align-items:start}
  .ca-onglets{flex-direction:column;gap:8px;position:sticky;top:112px;overflow:visible;padding-top:46px;margin-right:-1px;z-index:2}
  .ca-onglet-nom{border-radius:12px 0 0 12px;padding:12px 18px;font-size:15px;text-align:right}
  .ca-onglet:not(.ca-onglet--ouvert) .ca-onglet-nom{margin-left:22px}
  .ca-onglet--ouvert .ca-onglet-nom{box-shadow:none}
  .ca-onglet--ouvert ul{display:grid;gap:2px;margin:0;padding:10px 12px 12px 14px;list-style:none;background:var(--carte);border:1px solid var(--filet);border-right:0;border-top:0;border-radius:0 0 0 12px;font-size:14px;line-height:1.35}
  .ca-onglet--ouvert li a{display:block;padding:5px 6px;border-radius:6px;color:var(--corps);text-decoration:none}
  .ca-onglet--ouvert li a[aria-current]{background:var(--doux);color:var(--encre);font-weight:600}
  .ca-a-ecrire{padding:5px 6px;color:var(--gris);opacity:.6}
  .ca-page{--marge:64px;padding:48px 56px 56px calc(var(--marge) + 32px);border-radius:4px 22px 22px 22px}
}
.ca-couverture{display:grid;gap:26px;align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));padding-bottom:30px;border-bottom:1px solid var(--filet)}
.ca-etiquette{justify-self:start;display:grid;gap:4px;text-align:center;padding:22px 30px;background:var(--papier);border:2px solid var(--encre);outline:1px solid var(--encre);outline-offset:-8px;border-radius:6px;transform:rotate(-1.2deg)}
.ca-etiquette h1{display:grid;gap:4px;font-size:clamp(44px,6vw,64px);line-height:1;letter-spacing:-.02em;margin:0}
.ca-etiquette h1 .ca-etiquette-sous{line-height:1.4}
.ca-etiquette-sur,.ca-etiquette-sous{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ocre)}
.ca-histoire{font-size:15.5px;line-height:1.55;color:var(--gris);border-left:3px solid var(--ocre);padding-left:12px;margin-top:12px}
.ca-sommaire{padding-top:26px}
.ca-sommaire-titre{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.ca-groupe{margin-top:26px;scroll-margin-top:110px}
.ca-theme{display:flex;gap:10px;align-items:center;font-size:20px;color:var(--c);border-bottom:2px solid var(--c);padding-bottom:6px;margin:0}
.ca-ligne{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:end;gap:12px;padding:13px 0 11px;text-decoration:none;color:var(--encre);border-bottom:1px solid transparent}
.ca-n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--c);font-size:15px}
.ca-titre{display:grid;gap:2px;min-width:0}
.ca-titre b{font-size:17px;line-height:1.3}
.ca-titre small{font-size:14px;color:var(--gris)}
.ca-points{display:none}
.ca-lire{font-size:14px;font-weight:600;color:var(--canard);white-space:nowrap}
a.ca-ligne:hover .ca-titre b{text-decoration:underline;text-underline-offset:3px}
.ca-ligne--maquette{opacity:.48}
.ca-ligne--maquette .ca-lire{color:var(--gris);font-weight:500}
@media (min-width:700px){.ca-ligne{grid-template-columns:40px minmax(0,auto) minmax(30px,1fr) auto}.ca-points{display:block;border-bottom:2px dotted #C9BFAC;margin-bottom:7px}}
.ca-tete{padding-bottom:24px}
.ca-dans{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:18px}
.ca-dans b{width:100%;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.ca-dans a{font-size:14px;padding:6px 12px;border-radius:999px;background:var(--papier);border:1px solid var(--filet);color:var(--encre);text-decoration:none}
.ca-page .ct-sec{border-top:1px dashed #C9BFAC}
.cb{display:grid;gap:18px;padding-block:24px 64px}
/* Piste A sur téléphone : les cinq onglets se voient d'un coup, sur deux lignes, plutôt que de défiler de côté. */
@media (max-width:999px){.ca-onglets{flex-wrap:wrap;overflow:visible}.ca-onglet-nom{border-radius:10px}}
/* Piste A sur téléphone : « Lire » sous le titre du sommaire ; « Dans cette page » replié. */
.ca-dans-mobile{display:none}
@media (max-width:699px){
  .ca-ligne{grid-template-columns:30px minmax(0,1fr)}.ca-lire{grid-column:2}
  .ca-dans{display:none}
  .ca-dans-mobile{display:block;margin-top:16px;border:1px solid var(--filet);border-radius:12px;background:var(--papier)}
  .ca-dans-mobile summary{cursor:pointer;font-weight:600;font-size:15px;padding:12px 14px;color:var(--encre)}
  .ca-dans-mobile nav{display:grid;gap:2px;padding:0 14px 12px}.ca-dans-mobile nav a{color:var(--corps);text-decoration:none;padding:6px 0;font-size:15px}
}
@media (max-width:699px){.ca-ligne{align-items:start}.ca-n{padding-top:2px}}
.cc{display:grid;gap:18px;padding-block:24px 64px}
@media (min-width:1100px){.cc{grid-template-columns:250px minmax(0,1fr) 200px;gap:44px;align-items:start}}
@media print{
  .entete,.pouce,.ca-onglets,.ca-dans,.ca-dans-mobile,footer.pied,.ct-novidel,#questions,.appel,.boutons,.ct-imprimer{display:none!important}
  body,.ca-page{background:#fff!important;box-shadow:none!important;border:0!important}.ct-sec{break-inside:avoid}
}

/* ── Le carnet · le simulateur des frais kilométriques (12/10) : les saisies à gauche, le résultat à droite (collant sur
   ordinateur), l'un sous l'autre sur téléphone. Deux barres à la même échelle : la plus longue déduit le plus. */
.ct-legende{caption-side:bottom;text-align:left;font-size:13.5px;color:var(--gris);padding:10px 13px}
.ks{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);margin-top:6px}
@media (min-width:900px){.ks{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}
.ks-saisies{display:grid;gap:14px;min-width:0}
.ks fieldset{margin:0;border:1px solid var(--filet);border-radius:14px;background:var(--papier);padding:12px 16px 14px;min-width:0}
.ks legend{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ocre);padding:0 6px;margin-left:-6px}
.ks-champ{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--filet)}
.ks-champ:last-of-type{border-bottom:0}
.ks-champ > span:first-child{font-size:15.5px;color:var(--encre);line-height:1.35}
.ks-champ small{display:block;font-size:12.5px;color:var(--gris)}
.ks-saisie{display:flex;align-items:center;gap:6px;background:var(--carte);border:1px solid var(--filet-fort);border-radius:10px;padding:0 10px;min-width:0}
.ks-saisie:focus-within{border-color:var(--canard);box-shadow:0 0 0 2px rgba(18,86,92,.18)}
.ks-saisie input,.ks-saisie select{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--encre);padding:9px 0;text-align:right;font-variant-numeric:tabular-nums;outline:0}
.ks-saisie select{text-align:left;cursor:pointer}
.ks-saisie i{font-style:normal;font-size:14px;color:var(--gris)}
.ks-coche{display:flex;align-items:center;gap:9px;font-size:15.5px;padding:10px 0 2px;cursor:pointer}
.ks-coche input{width:18px;height:18px;accent-color:var(--canard)}
.ks-puces{display:flex;flex-wrap:wrap;gap:8px;padding-top:6px}
.ks-puce input{position:absolute;opacity:0;pointer-events:none}
.ks-puce span{display:inline-block;border:1px solid var(--filet-fort);background:var(--carte);border-radius:99px;padding:7px 14px;font-size:15px;font-variant-numeric:tabular-nums;cursor:pointer}
.ks-puce input:checked + span{background:var(--canard);border-color:var(--canard);color:#F5F1E8;font-weight:600}
.ks-puce input:focus-visible + span{outline:2px solid var(--canard);outline-offset:2px}
.ks-resultat{background:var(--nuit);color:#C7D8D6;border-radius:16px;padding:20px 20px 18px;display:grid;gap:14px;min-width:0}
@media (min-width:900px){.ks-resultat{position:sticky;top:110px}}
.ks-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline}
.ks-nom{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9FCBCF}
.ks-ligne b{font-size:30px;line-height:1.1;color:#F5F1E8;font-variant-numeric:tabular-nums;white-space:nowrap}
.ks-barre{grid-column:1 / -1;height:10px;border-radius:99px;background:rgba(245,241,232,.12);position:relative;overflow:hidden}
.ks-barre::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--l,0%);background:#9FCBCF;border-radius:99px;transition:width .25s ease}
.ks-barre--2::after{background:#E0A57A}
@media (prefers-reduced-motion:reduce){.ks-barre::after{transition:none}}
.ks-ligne small{grid-column:1 / -1;font-size:13.5px;color:#C7D8D6;font-variant-numeric:tabular-nums}
.ks-verdict{margin:4px 0 0;font-size:19px;font-weight:600;color:#F5F1E8;line-height:1.35;border-top:1px solid rgba(245,241,232,.18);padding-top:14px}
.ks-impot{margin:0;font-size:15.5px;line-height:1.5;color:#F5F1E8}
.ks-impot:empty{display:none}
.ks-note{margin:0;font-size:13.5px;line-height:1.5;color:#C7D8D6}
@media (max-width:420px){.ks-champ{grid-template-columns:minmax(0,1fr) 120px}.ks fieldset{padding:10px 12px 12px}}
@media print{.ks-resultat{background:#fff!important;color:#000!important;border:1px solid #999}.ks-resultat *{color:#000!important}}

/* ── Le carnet · les feuilles à imprimer (12/10) : une vignette de la page A4, son titre, ce qu'elle trace, le lien. */
.ft-grille{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);margin:6px 0 14px}
.ft-carte{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--filet);border-radius:14px;background:var(--carte);overflow:hidden;
  text-decoration:none;color:var(--encre);transition:border-color .2s ease,box-shadow .2s ease}
.ft-carte:hover{border-color:var(--canard);box-shadow:0 6px 18px rgba(23,48,47,.08)}
/* Une vignette au format d'une page A4 couchée pour toutes : une feuille en hauteur montre son haut (titre, en-tête,
   premières lignes), et les cartes d'une rangée s'alignent. */
.ft-image{display:block;aspect-ratio:1.414;overflow:hidden;background:var(--sable);padding:14px 14px 0;border-bottom:1px solid var(--filet)}
.ft-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:6px 6px 0 0;
  box-shadow:0 2px 10px rgba(23,48,47,.12)}
.ft-texte{display:grid;gap:4px;padding:12px 14px 14px;align-content:start}
.ft-texte b{font-size:16.5px;line-height:1.3}
.ft-texte small{font-size:14px;color:var(--gris);line-height:1.45}
.ft-lien{margin-top:6px;font-size:14px;font-weight:600;color:var(--canard)}
/* Deux colonnes dès qu'elles tiennent ; une carte seule sur sa rangée (la cinquième, ou le carnet de bord) prend toute la
   largeur, sa vignette à gauche, au lieu de laisser un trou à côté d'elle. */
@media (min-width:560px){
  .ft-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-carte:last-child:nth-child(odd){grid-column:1/-1;grid-template-rows:none;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .ft-carte:last-child:nth-child(odd) .ft-image{padding-bottom:14px;border-bottom:0;border-right:1px solid var(--filet)}
  .ft-carte:last-child:nth-child(odd) .ft-image img{border-radius:6px}
  .ft-carte:last-child:nth-child(odd) .ft-texte{align-content:center;padding:16px 18px}
}
@media print{.ft-grille{display:none}}
/* Le carnet (12/10) : un long mot de titre (« remplacement ») ne tenait pas à 320 px ; il se coupe, avec son trait d'union. */
.ca-page h1,.ca-page h2{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
/* Un champ de simulateur qui n'est pas un nombre (13/10) */
form[data-simu-km] input[aria-invalid="true"],form[data-simu-retro] input[aria-invalid="true"],form[data-simu-revenu] input[aria-invalid="true"]{border-color:var(--alerte);outline:2px solid var(--alerte-fond)}

/* ════════ LE MENU (15/10, maquette « 1 + 4 » choisie par Antoine : etudes/maquette-menu-vitrine-2026-10-15/) ════════
   Ordinateur (≥ 1 100 px) : quatre entrées — Fonctions (son grand panneau), Remplaçants, Tarifs, Conseils (le carnet : « Le
   carnet » se lisait comme le carnet de liaison du patient) —, « Se connecter » cerclé (Antoine, 30/09 : un simple lien
   passait inaperçu) et « Créer mon espace ». « Le contrat » quitte le menu (il est dans les fonctions), « Nous écrire » et
   « Notre histoire » vivent au pied de page. « Accueil » ouvre les deux menus (19/10, Antoine : le logo seul ne se devine pas).
   Tablette et téléphone : en haut, le logo et « Se connecter » ; en BAS, sous le pouce, la pilule « Menu » + « Créer mon
   espace », qui ouvre une feuille de tuiles. Sans script (`details`). ⚠️ Ni `transform` ni `backdrop-filter` sur la
   pilule : l'un ou l'autre fait d'elle le repère des `position:fixed` de la feuille et du voile, collés à elle. */
.nav{display:none}
.entete-droite{margin-left:auto;display:flex;align-items:center;gap:12px}
.entete-droite .btn{display:none}
a.connexion{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:999px;
  border:1.5px solid var(--canard);color:var(--canard);font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap}
a.connexion:hover{background:var(--doux);color:var(--nuit)}
.pouce{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));margin:0 auto;width:max-content;z-index:45;
  display:flex;align-items:center;gap:6px;padding:6px}
.pouce::before{content:"";position:absolute;inset:0;border-radius:999px;background:rgba(23,48,47,.95);
  box-shadow:0 16px 40px rgba(14,61,65,.35);z-index:3}
.pouce summary{position:relative;z-index:4;list-style:none;display:inline-flex;align-items:center;min-height:48px;padding:0 18px 0 14px;
  border-radius:999px;background:rgba(255,255,255,.10);color:var(--clair);font-size:15.5px;font-weight:600;cursor:pointer;user-select:none}
.pouce summary::-webkit-details-marker{display:none}
.pouce summary span{display:inline-flex;align-items:center;gap:8px}
.pouce .p-fermer,.pouce details[open] .p-ouvrir{display:none}
.pouce details[open] .p-fermer{display:inline-flex}
.pouce > .btn{position:relative;z-index:4;align-self:center;min-height:48px;padding:0 18px;font-size:15.5px;
  background:var(--clair);color:var(--encre);border-color:var(--clair)}
.pouce > .btn:hover{background:#fff;color:var(--encre)}
.pouce-voile{position:fixed;inset:0;background:rgba(14,61,65,.42);z-index:1}
.pouce-feuille{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:2;background:var(--papier);
  border-radius:28px;padding:10px 18px 96px;box-shadow:0 -10px 40px rgba(14,61,65,.25);max-height:calc(100dvh - 24px);overflow-y:auto}
.pouce-poignee{display:block;width:44px;height:5px;border-radius:9px;background:var(--filet-fort);margin:2px auto 14px}
.pouce-tuiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pouce-tuiles a{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;background:var(--carte);
  border:1px solid var(--filet);text-decoration:none;color:var(--encre);font-size:15px;font-weight:600;line-height:1.25}
.pouce-tuiles i{color:var(--canard);display:flex}
.pouce-rangee{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pouce-rangee a{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border-radius:999px;background:var(--sable);
  color:var(--encre);text-decoration:none;font-weight:500;font-size:15px}
.pouce-feuille a.connexion{display:flex;min-height:50px;margin-top:14px;font-size:16px}
@media (max-width:1099px){body{padding-bottom:84px}}
@media (min-width:700px){.pouce-tuiles{grid-template-columns:repeat(4,1fr)}
  .pouce-feuille{left:0;right:0;margin:0 auto;width:680px}}
@media (min-width:1100px){
  .pouce{display:none}
  .entete .dans{gap:44px}
  .nav{display:flex;align-items:center;align-self:stretch;gap:34px}
  .nav > a,.nav-fn > a{font-size:16px;font-weight:500;color:var(--encre);text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .nav a.ici{color:var(--canard);font-weight:600}
  .nav-fn{display:flex;align-items:center;align-self:stretch}
  .nav-fn > a svg{transition:transform .15s}
  .nav-fn:hover > a,.nav-fn:focus-within > a{color:var(--canard)}
  .nav-fn:hover > a svg,.nav-fn:focus-within > a svg{transform:rotate(180deg)}
  /* Le panneau, sous toute la largeur de l'en-tête (son repère : `.entete`, collante). Il reste dans l'arbre
     d'accessibilité au repos (audit du 11/10 : en display:none, un agent n'y voyait aucun des huit liens) : invisible et
     intouchable, puis montré au survol et au clavier ; `.nav-fn` occupe toute la hauteur de la barre, la souris ne le perd
     pas en descendant. */
  .nav-fn-panneau{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--carte);border-bottom:1px solid var(--filet);
    box-shadow:0 30px 60px rgba(23,48,47,.10);opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .15s,transform .15s}
  .nav-fn:hover .nav-fn-panneau,.nav-fn:focus-within .nav-fn-panneau{opacity:1;pointer-events:auto;transform:none}
  /* ⚠️ `.entete .dans` (88 px de haut, centré) vaut aussi pour le conteneur du panneau, qui est dans l'en-tête : sans
     cette règle, son contenu débordait au-dessus et au-dessous de son fond (vu le 15/10). */
  .entete .nav-fn-in{height:auto;display:grid;align-items:start;grid-template-columns:minmax(0,1fr) 320px;gap:40px;
    padding-top:28px;padding-bottom:34px}
  .nav-fn-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .nav-fn-grille a{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;text-decoration:none;color:var(--encre)}
  .nav-fn-grille a:hover,.nav-fn-grille a:focus-visible{background:var(--doux)}
  .nav-fn-grille i{width:42px;height:42px;border-radius:12px;background:var(--doux);color:var(--canard);display:flex;align-items:center;
    justify-content:center;margin-bottom:8px}
  .nav-fn-grille a:hover i,.nav-fn-grille a:focus-visible i{background:var(--carte)}
  .nav-fn-grille b{font-size:16px;font-weight:600}
  .nav-fn-grille span{font-size:14px;line-height:1.45;color:var(--gris)}
  .nav-fn-carte{background:var(--canard);color:var(--clair);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:14px}
  .nav-fn-carte .sur{color:var(--jauge)}
  .nav-fn-carte p{font-size:17px;line-height:1.5;color:var(--clair-2)}
  .nav-fn-carte a{color:var(--clair);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-size:16px}
  .nav-fn-carte a:hover{color:#fff;text-decoration:underline}
  .entete-droite .btn{display:inline-flex;min-height:48px;padding:0 22px;font-size:16px;white-space:nowrap}
  .entete-droite a.connexion{min-height:48px;padding:0 20px;font-size:16px}
}
/* « Accueil » au menu (19/10) : à 1 100 px, « Créer mon espace » passait sur trois lignes (il manquait 80 px ; il en
   manquait déjà 14 avant). Jusqu'à 1 279 px, la barre se resserre — entre les entrées, autour du menu, dans les boutons —
   plutôt que de couper un bouton ; à 1 100 px, il reste ~20 px de jeu (mesuré : logo, menu et boutons à leur largeur). */
@media (min-width:1100px) and (max-width:1199px){.entete .dans{gap:24px}.nav{gap:18px}.entete-droite{gap:10px}
  .entete-droite .btn{padding:0 18px}.entete-droite a.connexion{padding:0 16px}}
@media (min-width:1200px) and (max-width:1279px){.entete .dans{gap:32px}.nav{gap:26px}}
@media (prefers-reduced-motion:reduce){.nav-fn > a svg,.nav-fn-panneau{transition:none}}