/* Dr Kerby Venord — feuille de style unique. Zéro script, zéro dépendance extérieure.
   ────────────────────────────────────────────────────────────────────────────────────────
   REFONTE du 06/09, sur les retours d'Arthur et de Nadia. Ce qui a changé, et pourquoi :
   · la palette passe au BLEU ET BLANC, lumineuse — la précédente (bleu pétrole + ivoire)
     a été jugée « totalement austère » ;
   · l'en-tête devient une PILULE BLANCHE FLOTTANTE, collante, inspirée de mediweb.fr ;
   · la « une » n'est plus un texte à gauche et une image à droite (« il y a un vide à
     droite ») : l'image passe EN FOND, en 16/9, et le texte se pose dessus, centré ;
   · les grilles ne se replient plus à 1000 px mais bien plus tard — à 1000 px on avait
     « trois éléments sur deux lignes de façon bizarre » et un plan « très grand et pixelisé »
     sur un écran d'ordinateur.
   ──────────────────────────────────────────────────────────────────────────────────────── */

/* Polices
---------------------------------------------------------------------------*/
@font-face{font-family:Lora;src:url(fonts/lora.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lora;src:url(fonts/lora-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(fonts/inter-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Socle — bleu et blanc, lumineux
---------------------------------------------------------------------------*/
:root{--encre:#243b4a;--gris:#5a6b78;--gris-c:#66737c;--bleu:#1c5fa8;--bleu-v:#2f78c7;--bleu-c:#51a3f1;--bleu-p:#eaf2fb;--bleu-b:#d6e6f7;--fond:#f6f9fd;--bord:#dfe8f2;--urgence:#c0392b;--urgence-f:#fdf1ef;--blanc:#fff;--large:1280px;--r:14px;--rp:10px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--encre);font:400 17px/1.7 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu-v);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--bleu)}
h1,h2,h3{font-family:Lora,Georgia,'Times New Roman',serif;font-weight:600;line-height:1.16;letter-spacing:-.014em;color:var(--encre);margin:0 0 .55em}
h1{font-size:clamp(32px,5vw,54px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:clamp(19px,2vw,23px)}
h4{font-family:Inter,sans-serif;font-weight:600;font-size:16px;color:var(--encre);margin:0 0 .5em;line-height:1.35}
.bl{color:var(--bleu-v)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin-bottom:.45em}
strong{font-weight:600}
.k{max-width:var(--large);margin:0 auto;padding:0 28px}
.k-etroit{max-width:820px;margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--bleu-v);outline-offset:3px}
.saut{position:absolute;left:-999px;top:0;background:var(--bleu);color:#fff;padding:12px 18px;z-index:99}
.saut:focus{left:8px;top:8px}
.centre{text-align:center}

/* Bandeau de démonstration — une ligne, sur chaque page
---------------------------------------------------------------------------*/
.demo-bd{background:var(--encre);color:#dce8f0;font-size:13px;line-height:1.45;padding:8px 0}
.demo-bd .k{display:flex;align-items:center;gap:14px;justify-content:space-between}
.demo-bd b{font-weight:600;color:#fff}
.demo-bd .cpi{display:block;font-size:10.5px;color:#9fb4c2;margin-top:2px;max-width:74ch}
.demo-bd .cpi-court{display:none}
.demo-bd a{color:#fff;flex:0 0 auto;display:inline-flex;align-items:center;text-decoration:none}
.demo-bd svg{width:28px;height:28px;display:block}

/* En-tête — une pilule blanche flottante, collante (repère : mediweb.fr)
---------------------------------------------------------------------------*/
.tete{position:sticky;top:0;z-index:40;padding:14px 0;background:linear-gradient(180deg,var(--blanc) 60%,rgba(255,255,255,0))}
.tete .k{display:flex;align-items:center;gap:16px}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--bleu);margin-right:auto;flex:0 0 auto}
.marque svg{width:42px;height:42px;flex:0 0 auto}
.marque .n{font-family:Lora,Georgia,serif;font-size:22px;line-height:1;display:block;white-space:nowrap;color:var(--encre)}
.marque .s{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--bleu-v);display:block;margin-top:4px;font-weight:600}
.pilule{display:flex;align-items:center;gap:6px;background:var(--blanc);border:1px solid var(--bord);border-radius:999px;padding:6px;box-shadow:0 6px 26px rgba(28,95,168,.10)}
.nav{display:flex;align-items:center;gap:2px}
.nav a{color:var(--encre);text-decoration:none;font-size:15px;padding:9px 15px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--bleu-p);color:var(--bleu)}
.nav a[aria-current=page]{background:var(--bleu-p);color:var(--bleu);font-weight:600}
.lang{display:inline-flex;align-items:center;border:1px solid var(--bord);border-radius:999px;overflow:hidden;flex:0 0 auto;margin-left:2px}
.lang a,.lang span{font-size:12.5px;font-weight:600;letter-spacing:.03em;padding:7px 10px;text-decoration:none;line-height:1}
.lang a{color:var(--gris)}
.lang a:hover{background:var(--bleu-p);color:var(--bleu)}
.lang span{background:var(--bleu);color:#fff}
.l-dl{display:inline-flex;align-items:center;gap:7px;color:var(--bleu-v);text-decoration:none;font-size:14.5px;font-weight:600;padding:9px 13px;border-radius:999px;white-space:nowrap}
.l-dl:hover{background:var(--bleu-p);color:var(--bleu)}
.l-dl svg{width:16px;height:16px}
.compte{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;color:var(--gris);border:1px solid var(--bord);text-decoration:none;flex:0 0 auto;background:var(--blanc)}
.compte:hover{background:var(--bleu-p);color:var(--bleu);border-color:var(--bleu-c)}
.compte svg{width:18px;height:18px}
.b-rdv{display:inline-flex;align-items:center;gap:8px;background:var(--bleu-v);color:#fff;text-decoration:none;font-size:14.5px;font-weight:600;padding:11px 18px;border-radius:999px;flex:0 0 auto;white-space:nowrap}
.b-rdv:hover{background:var(--bleu);color:#fff}
.b-rdv svg{width:16px;height:16px}
.plier{display:none}
.nav-plus{display:none}

/* La « une » — l'image EST le fond, le texte se pose dessus, en 16/9
   ⚠️ Arthur : « elle est beaucoup trop grande en hauteur, pratiquement deux fois moins haute,
   plus 16/9 » et « tout ça doit avoir comme background l'image ». La hauteur suit donc le
   RATIO de l'image, bornée pour ne jamais dépasser l'écran.
---------------------------------------------------------------------------*/
.une{position:relative;overflow:hidden;background:var(--encre);min-height:clamp(380px,46vw,560px);display:grid;align-items:center}
.une-img{position:absolute;inset:0;z-index:0}
.une-img img{width:100%;height:100%;object-fit:cover;object-position:60% 42%}
.une-voile{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(16,42,64,.80) 0%,rgba(16,42,64,.62) 44%,rgba(16,42,64,.24) 74%,rgba(16,42,64,.10) 100%)}
.une .k{position:relative;z-index:2;padding:56px 28px}
.une-in{max-width:44rem}
.une h1{color:#fff;margin-bottom:.4em;text-shadow:0 2px 22px rgba(6,20,32,.30)}
.une h1 .bl{color:#9ed0ff}
.une .chapo{font-size:19px;line-height:1.62;color:#e7f1f9;max-width:52ch;margin-bottom:1.5em}
.une .surtitre{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#cfe6ff;margin:0 0 16px;font-weight:600}

/* Tête des pages intérieures
---------------------------------------------------------------------------*/
.tete-page{background:var(--bleu-p);padding:46px 0 44px;border-bottom:1px solid var(--bord)}
.tete-page h1{max-width:22ch;margin-bottom:.35em}
.tete-page p{font-size:18.5px;color:var(--gris);max-width:62ch;margin:0}
.tete-page .surtitre{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);margin:0 0 14px;font-weight:600}
.fil{font-size:13.5px;color:var(--gris);margin:0 0 18px}
.fil a{color:var(--bleu)}
.fil span{opacity:.5;padding:0 6px}

/* Boutons
---------------------------------------------------------------------------*/
.b{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;padding:14px 26px;border-radius:999px;border:1px solid transparent}
.b svg{width:18px;height:18px;flex:0 0 auto}
.b-bleu{background:var(--bleu-v);color:#fff;border-color:var(--bleu-v)}
.b-bleu:hover{background:var(--bleu);color:#fff}
.b-blanc{background:var(--blanc);color:var(--bleu);border-color:var(--blanc)}
.b-blanc:hover{background:var(--bleu-p);color:var(--bleu)}
.b-clair{background:transparent;color:#fff;border-color:#ffffff7a}
.b-clair:hover{background:#ffffff1f;color:#fff}
.b-vide{background:transparent;color:var(--bleu);border-color:var(--bord)}
.b-vide:hover{background:var(--bleu-p)}
.bs{display:flex;flex-wrap:wrap;gap:12px}

/* Sections
---------------------------------------------------------------------------*/
.s-blanc{background:var(--blanc);padding:78px 0}
.s-clair{background:var(--fond);padding:78px 0}
.s-bleu{background:var(--bleu);color:#dfeaf5;padding:78px 0}
.s-bleu h2,.s-bleu h3{color:#fff}
.s-bleu .t-sec p{color:#dceafa}
.s-serre{background:var(--bleu-p);padding:26px 0}
.t-sec{max-width:64ch;margin:0 0 44px}
.t-sec.centre{margin-left:auto;margin-right:auto}
.t-sec p{font-size:18px;color:var(--gris);margin:0}
.t-sec .surtitre-s{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);margin:0 0 12px;font-weight:600}
.s-bleu .t-sec .surtitre-s{color:#c3e2ff}

/* Repères chiffrés
---------------------------------------------------------------------------*/
.rep{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.rep>div{padding:6px 4px}
.rep .v{display:block;font-family:Lora,Georgia,serif;font-size:25px;font-weight:600;color:var(--bleu);line-height:1.2}
.rep .l{display:block;font-size:13.5px;color:var(--gris);margin-top:5px;line-height:1.45}

/* Cartes et grilles
   ⚠️ LE REPLI SE FAIT TARD, ET C'EST LE POINT CORRIGÉ : à 1000 px les trois cartes passaient
   sur deux lignes sur un écran d'ordinateur à peine réduit. `auto-fit` + `minmax` garde trois
   colonnes tant qu'il y a la place, et n'en perd une que quand c'est vraiment nécessaire.
---------------------------------------------------------------------------*/
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));gap:24px}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));gap:20px}
.c{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);padding:28px 26px;box-shadow:0 2px 14px rgba(28,95,168,.05)}
.c h3{margin-bottom:.45em}
.c p:last-child{margin-bottom:0}
.c-lien{text-decoration:none;color:inherit;display:block}
.c-lien:hover{border-color:var(--bleu-c);box-shadow:0 10px 30px rgba(28,95,168,.13)}
.c-ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--bleu-p);color:var(--bleu-v);margin-bottom:16px}
.c-ico svg{width:24px;height:24px}
.s-bleu .c{background:#2a6bb3;border-color:#3f7fc4;color:#e2edf7;box-shadow:none}
.s-bleu .c p{color:#e6f0fb}
.s-bleu .c-ico{background:#1a5296;color:#9ed0ff}
.suite{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--bleu-v);margin-top:14px}

/* Texte + image, et bande panoramique
---------------------------------------------------------------------------*/
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:48px;align-items:center}
.duo-img img{border-radius:var(--r);width:100%;aspect-ratio:3/2;object-fit:cover}
.duo p:last-child{margin-bottom:0}
.pano{margin:0;overflow:hidden}
.pano img{width:100%;height:clamp(180px,22vw,300px);object-fit:cover;display:block}

/* Encadrés
---------------------------------------------------------------------------*/
.enc{background:var(--bleu-p);border-radius:var(--r);padding:24px 28px;margin:0 0 26px}
.enc p:last-child,.enc ul:last-child{margin-bottom:0}
.enc h3,.enc h2{font-size:20px;margin-bottom:.45em;color:var(--bleu)}
.urg{background:var(--urgence-f);border-left:4px solid var(--urgence);border-radius:0 var(--r) var(--r) 0;padding:24px 28px;margin:0 0 26px}
.urg h3,.urg h2{color:var(--urgence);font-size:20px;margin-bottom:.45em}
.urg p:last-child{margin-bottom:0}
.urg .num{font-family:Lora,Georgia,serif;font-size:28px;font-weight:700;color:var(--urgence);line-height:1;display:inline-block;vertical-align:-3px;margin-right:5px}

/* Listes cochées, tableau d'informations pratiques, questions fréquentes
---------------------------------------------------------------------------*/
.lc{list-style:none;padding:0;margin:0 0 1.15em}
.lc li{position:relative;padding-left:29px;margin-bottom:.6em}
.lc li::before{content:"";position:absolute;left:0;top:.55em;width:13px;height:7px;border-left:2px solid var(--bleu-v);border-bottom:2px solid var(--bleu-v);transform:rotate(-45deg)}
.s-bleu .lc li::before{border-color:#9ed0ff}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:0;border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;background:var(--blanc)}
.info>div{padding:20px 24px;border-bottom:1px solid var(--bord);border-right:1px solid var(--bord)}
.info dt{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--bleu);font-weight:600;margin:0 0 6px}
.info dd{margin:0;font-size:16px;color:var(--encre)}
.info dd small{display:block;font-size:13.5px;color:var(--gris);margin-top:3px}
.faq{border-top:1px solid var(--bord)}
.faq details{border-bottom:1px solid var(--bord)}
.faq summary{cursor:pointer;padding:19px 40px 19px 0;font-weight:600;font-size:17px;color:var(--encre);position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--bleu)}
.faq summary::after{content:"";position:absolute;right:8px;top:28px;width:9px;height:9px;border-right:2px solid var(--bleu-v);border-bottom:2px solid var(--bleu-v);transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg);top:31px}
.faq .rep-faq{padding:0 40px 20px 0;color:var(--gris)}
.faq .rep-faq p:last-child{margin-bottom:0}

/* Lieux de consultation
   ⚠️ LE PLAN NE DOIT JAMAIS DEVENIR ÉNORME : Arthur, sur un écran d'ordinateur à peine réduit,
   « la map se met en très grand, du coup ça pixelise et c'est très moche ». La hauteur est donc
   BORNÉE en toutes circonstances, jamais laissée libre.
---------------------------------------------------------------------------*/
.lieu{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.lieu+.lieu{margin-top:24px}
.lieu-txt{padding:30px 28px}
.lieu-txt h3{margin-bottom:.35em}
.lieu-txt dl{margin:0;font-size:15.5px}
.lieu-txt dt{font-weight:600;color:var(--bleu);margin-top:13px}
.lieu-txt dd{margin:2px 0 0;color:var(--gris)}
.lieu-plan img{width:100%;height:100%;min-height:240px;max-height:340px;object-fit:cover}
.credit{font-size:12px;color:var(--gris-c);margin:8px 0 0}

/* Formulaire (inerte, et il le dit)
---------------------------------------------------------------------------*/
.form{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);padding:30px 28px}
.form label{display:block;font-weight:600;font-size:15px;color:var(--bleu);margin:0 0 6px}
.form input,.form textarea,.form select{width:100%;padding:12px 14px;border:1px solid var(--bord);border-radius:var(--rp);font:inherit;font-size:16px;background:var(--fond);color:var(--encre);margin-bottom:16px}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--bleu-v);outline-offset:-2px;background:var(--blanc)}
.form textarea{min-height:120px;resize:vertical}
.form .note{font-size:13.5px;color:var(--gris);margin:10px 0 0}

/* Pied de page
---------------------------------------------------------------------------*/
.pied{background:var(--encre);color:#b6c8d4;font-size:15px;padding:52px 0 28px}
.pied .g-pied{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:34px;margin-bottom:34px}
.pied h3{color:#fff;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:15px;font-family:Inter,sans-serif;font-weight:600}
.pied a{color:#d5e4ee;text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:8px}
.pied .marque-p{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.pied .marque-p svg{width:40px;height:40px}
.pied .marque-p .n{font-family:Lora,Georgia,serif;font-size:20px;color:#fff;line-height:1.15;display:block}
.pied .marque-p .s{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9ed0ff;display:block;margin-top:3px}
.pied .bas{border-top:1px solid #3a5468;padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13.5px;color:#8fa5b5}
.pied .bas p{margin:0}

/* Écrans étroits — le menu ne se replie que quand il ne tient VRAIMENT plus
---------------------------------------------------------------------------*/
@media (max-width:1180px){
.tete .k{gap:12px}
.tete>.k>.pilule>.nav{display:none}
.plier{display:block;flex:0 0 auto;position:relative}
.plier summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--bord);background:var(--blanc);color:var(--bleu)}
.plier summary::-webkit-details-marker{display:none}
.plier summary svg{width:19px;height:19px}
.plier[open] .nav{display:flex;flex-direction:column;align-items:stretch;position:absolute;right:0;top:calc(100% + 10px);background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);box-shadow:0 16px 40px rgba(28,95,168,.16);padding:8px;gap:0;min-width:220px;z-index:50}
.plier .nav a{padding:12px 14px;border-radius:var(--rp);text-align:left}
.nav-plus{display:none;align-items:center;gap:8px;padding:10px 6px 4px;margin-top:6px;border-top:1px solid var(--bord)}
.nav-plus .l-dl{padding:9px 10px}
.nav-plus .l-dl span{display:inline}
.une .k{padding:48px 28px}
}
@media (max-width:860px){
.rep{grid-template-columns:1fr 1fr;gap:16px}
.l-dl span{display:none}
.l-dl{padding:9px 11px}
}
@media (max-width:700px){
body{font-size:16.5px}
/* ⚠️ Mesure a 390 px : marque + pilule complete = 440 px pour 354 disponibles. Sur telephone
   l'en-tete ne garde donc que le RENDEZ-VOUS et le MENU ; la langue, Doctolib et le compte
   descendent dans le menu replie, ou ils ont toute la place. */
.tete>.k>.pilule>.lang,.tete>.k>.pilule>.l-dl,.tete>.k>.pilule>.compte{display:none}
.plier[open] .nav-plus{display:flex}
.tete{position:static;padding:12px 0}
.k,.k-etroit{padding:0 18px}
.s-blanc,.s-clair,.s-bleu{padding:52px 0}
.une{min-height:340px}
.une .k{padding:40px 18px}
.une .chapo{font-size:17.5px}
.demo-bd .cpi-long{display:none}
.demo-bd .cpi-court{display:inline}
.b-rdv span{display:none}
.b-rdv{padding:11px 13px}
.marque .s{display:none}
.marque svg{width:36px;height:36px}
.marque .n{font-size:19px}
.pilule{padding:5px;gap:4px}
.c{padding:24px 20px}
.enc,.urg{padding:20px 20px}
.form{padding:24px 20px}
.duo{gap:30px}
.lieu-plan img{min-height:190px;max-height:230px}
}
@media (max-width:420px){
.b{white-space:normal;text-align:center;justify-content:center}
.bs .b{width:100%}
.rep{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media print{.demo-bd,.plier,.b-rdv,.lang,.compte{display:none}.tete{position:static}}