/* ═══════════════════════════════════════════════════════════════════════════
   Dr Cyrille Temstet — Chirurgien ophtalmologue Paris 17
   Feuille de style du site statique. Reconstruction 2026-09.

   Parti pris : la couleur du cabinet (#2f5f82) est conservée — c'est son
   identité depuis 2019. Ce qui change, c'est la typographie (Fjalla One et
   Pompiere, très datées, remplacées par Newsreader + Inter) et la mise en
   page, qui laisse enfin respirer la photographie du plateau technique.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bleu:#2f5f82;          /* couleur du cabinet, reprise telle quelle */
  --bleu-fonce:#1e4059;
  --bleu-clair:#eaf1f6;
  --encre:#14202b;
  --gris:#54646f;          /* 7,1:1 sur blanc */
  --ligne:#dde5ea;
  --brume:#f5f8fa;
  --blanc:#fff;
  --large:1200px;
  --texte:68ch;
  --r:3px;
  --ombre:0 1px 2px rgba(20,32,43,.05), 0 8px 24px -12px rgba(20,32,43,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu);text-underline-offset:.18em}
a:hover,a:focus{color:var(--bleu-fonce)}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}

h1,h2,h3,h4{
  font-family:Newsreader,Georgia,"Times New Roman",serif;
  font-weight:500;line-height:1.15;color:var(--encre);
  margin:0 0 .5em;letter-spacing:-.01em;
}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
h4{font-size:1.05rem;font-family:Inter,sans-serif;font-weight:600}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.enveloppe{max-width:var(--large);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
.surtitre{
  font-family:Inter,sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bleu);
  margin:0 0 .9rem;
}
.chapo{font-size:1.12rem;color:var(--gris);max-width:60ch}

/* ── En-tête ───────────────────────────────────────────────────────────── */
.entete{
  position:sticky;top:0;z-index:50;background:var(--blanc);
  border-bottom:1px solid var(--ligne);
}
/* La barre a besoin de plus de largeur que le contenu : logo + 5 entrees +
   telephone + bouton Doctolib ne tiennent pas dans 1200 px. */
.entete__int{display:flex;align-items:center;gap:1.1rem;min-height:74px;max-width:1400px}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;
  margin-right:auto;flex:0 0 auto}  /* jamais comprime : son texte deborderait sur le menu */
.marque img{width:auto;height:44px}
.marque__nom{display:block;font-family:Newsreader,serif;font-size:1.05rem;line-height:1.15;white-space:nowrap}
.marque__role{display:block;white-space:nowrap;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}

.nav{display:flex;align-items:center;gap:.1rem}
.nav a{
  display:flex;align-items:center;min-height:44px;padding:0 .7rem;
  text-decoration:none;color:var(--encre);font-size:.92rem;font-weight:500;
  border-radius:var(--r);white-space:nowrap;
}
.nav a:hover,.nav a:focus{background:var(--bleu-clair);color:var(--bleu-fonce)}
.nav a[aria-current="page"]{color:var(--bleu);box-shadow:inset 0 -2px 0 var(--bleu);border-radius:0}

.tel{
  display:flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .8rem;
  text-decoration:none;color:var(--encre);font-weight:600;font-size:.94rem;white-space:nowrap;
}
.tel:hover,.tel:focus{color:var(--bleu)}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:0 1.25rem;border-radius:var(--r);
  font-family:Inter,sans-serif;font-weight:600;font-size:.95rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.bouton--plein{background:var(--bleu);color:#fff}
.bouton--plein:hover,.bouton--plein:focus{background:var(--bleu-fonce);color:#fff}
.bouton--ligne{border-color:var(--ligne);color:var(--encre);background:var(--blanc)}
.bouton--ligne:hover,.bouton--ligne:focus{border-color:var(--bleu);color:var(--bleu);background:var(--bleu-clair)}
.bouton--clair{background:#fff;color:var(--bleu-fonce)}
.bouton--clair:hover,.bouton--clair:focus{background:var(--bleu-clair);color:var(--bleu-fonce)}
.bouton img{height:15px;width:auto}

.bascule{display:none;align-items:center;justify-content:center;width:46px;height:46px;
  background:none;border:1px solid var(--ligne);border-radius:var(--r);cursor:pointer}
.bascule span{display:block;width:20px;height:2px;background:var(--encre);position:relative}
.bascule span::before,.bascule span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--encre)}
.bascule span::before{top:-6px}.bascule span::after{top:6px}

/* La barre d'en-tete tient a 6 px pres a 1240 px : trop juste. On degage de
   la marge par paliers plutot que de frôler la limite.
   1320 px : le sous-titre de la marque part (l'info est dans le heros).
   1260 px : le telephone part de la barre (il reste dans le bandeau, le
             bloc rendez-vous, le pied de page et le bouton flottant mobile). */
@media (max-width:1320px){ .marque__role{display:none} }
@media (max-width:1260px){ .entete .tel{display:none} }

/* ── Bouton de prise de rendez-vous ───────────────────────────────────────
   Convention MREL : le logo Doctolib dans le bouton. Forme en pastille pour
   le distinguer nettement des boutons secondaires, qui gardent l'angle vif
   du reste du site. Le trait de separation reprend la couleur du texte. */
.rdv-btn{
  display:inline-flex;align-items:center;gap:.75rem;
  min-height:52px;padding:.35rem 1.15rem .35rem 1.4rem;
  border-radius:999px;border:1px solid transparent;
  font-family:Inter,sans-serif;font-weight:600;font-size:.95rem;line-height:1.2;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .18s ease,box-shadow .2s ease,transform .18s ease,border-color .18s ease;
}
.rdv-btn__sep{flex:0 0 1px;width:1px;height:22px;background:currentColor;opacity:.3}
.rdv-btn__logo{height:20px;width:auto;display:block;flex:0 0 auto}

.rdv-btn--plein{
  background:var(--bleu);color:#fff;
  box-shadow:0 1px 2px rgba(20,32,43,.14), 0 12px 24px -14px rgba(47,95,130,.95);
}
.rdv-btn--plein:hover,.rdv-btn--plein:focus-visible{
  background:var(--bleu-fonce);color:#fff;transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(20,32,43,.16), 0 18px 32px -14px rgba(47,95,130,1);
}
.rdv-btn--clair{
  background:#fff;color:var(--bleu-fonce);border-color:rgba(20,32,43,.08);
  box-shadow:0 1px 2px rgba(20,32,43,.10), 0 12px 24px -16px rgba(20,32,43,.7);
}
.rdv-btn--clair:hover,.rdv-btn--clair:focus-visible{
  background:var(--bleu-clair);color:var(--bleu-fonce);transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(20,32,43,.12), 0 18px 32px -16px rgba(20,32,43,.8);
}
/* .pied a l'emporterait sur .rdv-btn--clair : on redit la couleur. */
.pied .rdv-btn--clair{color:var(--bleu-fonce);text-decoration:none}
.pied .rdv-btn--clair:hover,.pied .rdv-btn--clair:focus{color:var(--bleu-fonce);text-decoration:none;background:var(--bleu-clair)}
/* Variante compacte de l'en-tete : la place y est comptee. */
.rdv-btn--compact{min-height:46px;padding:.3rem .9rem .3rem 1.05rem;gap:.6rem;font-size:.9rem}
.rdv-btn--compact .rdv-btn__logo{height:17px}

/* Quand un bouton secondaire est appaire au bouton de rendez-vous, il prend
   la meme forme : deux rayons differents cote a cote font accident. */
.heros__actions .bouton,.rdv__actions .bouton,.flottant .bouton{border-radius:999px;min-height:52px}

@media (max-width:620px){
  .rdv-btn{white-space:normal;justify-content:center;width:100%}
}
@media (prefers-reduced-motion:reduce){ .rdv-btn:hover{transform:none} }

/* ── Héros ─────────────────────────────────────────────────────────────── */
.heros{position:relative;isolation:isolate;background:var(--encre)}
.heros__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.heros__media img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.heros::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(20,32,43,.92) 0%,rgba(20,32,43,.78) 38%,rgba(20,32,43,.34) 68%,rgba(20,32,43,.12) 100%);
}
.heros__int{position:relative;padding-block:clamp(4rem,11vw,8.5rem);max-width:38rem}
.heros h1{color:#fff;margin-bottom:.35em}
.heros__role{
  font-family:Newsreader,serif;font-size:clamp(1.15rem,2.4vw,1.5rem);
  color:#dbe6ee;font-weight:400;margin:0 0 1.8rem;
}
.heros .surtitre{color:#9fc4dc}
.heros__actions{display:flex;flex-wrap:wrap;gap:.7rem}

/* héros court des pages intérieures */
.heros--page .heros__int{padding-block:clamp(3rem,7vw,5rem);max-width:44rem}

/* ── Sections ──────────────────────────────────────────────────────────── */
.section{padding-block:clamp(3.2rem,7vw,5.5rem)}
.section--brume{background:var(--brume)}
.section__tete{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}

/* ── Bandeau praticien / coordonnées ───────────────────────────────────── */
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:1.5rem}
.infos__bloc{min-width:0}
.infos__bloc h3{font-family:Inter,sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);margin-bottom:.5rem}
.infos__bloc p,.infos__bloc address{font-style:normal;color:var(--gris);margin:0}
.infos__bloc a{display:inline-flex;align-items:center;min-height:44px}
.infos__bloc strong{color:var(--encre);font-weight:600}

/* ── Cartes des interventions ──────────────────────────────────────────── */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:1.5rem}
.carte{
  display:flex;flex-direction:column;background:var(--blanc);
  border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.carte:hover,.carte:focus-within{border-color:var(--bleu);box-shadow:var(--ombre);transform:translateY(-2px)}
.carte__img{aspect-ratio:16/9;overflow:hidden;background:var(--bleu-clair)}
.carte__img img{width:100%;height:100%;object-fit:cover}
.carte__corps{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.carte h3{margin-bottom:.45rem}
.carte p{color:var(--gris);font-size:.97rem;margin-bottom:1.2rem}
.carte__lien{margin-top:auto;font-weight:600;font-size:.92rem;text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px}
.carte__lien::after{content:"→";transition:transform .18s ease}
.carte:hover .carte__lien::after{transform:translateX(3px)}
/* toute la carte cliquable, sans imbriquer de lien dans un lien */
.carte__lien::before{content:"";position:absolute;inset:0}
.carte{position:relative}

/* ── Portrait / présentation ───────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:clamp(2rem,5vw,4rem);align-items:center}
.duo__media img{width:100%;border-radius:var(--r)}
.duo--inverse .duo__media{order:2}

/* ── Corps de texte long (pages médicales) ─────────────────────────────── */
.prose{max-width:var(--texte)}
.prose h2{margin-top:2.4em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.8em;font-family:Inter,sans-serif;font-weight:600;font-size:1.12rem}
.prose ul{padding-left:1.15rem;margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.prose img{border-radius:var(--r);margin:1.8em 0}
.prose figure{margin:1.8em 0}
.prose figcaption{font-size:.87rem;color:var(--gris);margin-top:.5rem}


/* ── Pages longues : sommaire d'ancres ─────────────────────────────────────
   La page chirurgie réfractive fait 5 100 mots. Sans point d'entrée, le
   lecteur ne sait pas ce qu'elle contient. Le sommaire est construit à partir
   des <h2> réellement présents — aucun titre inventé. */
.article{display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem}
@media (min-width:1000px){
  .article{grid-template-columns:15.5rem minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem)}
  .sommaire{
    position:sticky;top:96px;align-self:start;
    max-height:calc(100vh - 130px);overflow:auto;overscroll-behavior:contain;
    border:0;border-left:2px solid var(--ligne);border-radius:0;
    padding:.1rem 0 .1rem 1.1rem;background:none;
  }
}
.sommaire{
  border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.1rem 1.3rem;background:var(--brume);
}
.sommaire__titre{
  font-family:Inter,sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--bleu);
  margin:0 0 .7rem;  /* .74rem tombait a 11,84 px : sous le plancher de 12 px */
}
.sommaire ol{list-style:none;margin:0;padding:0;counter-reset:s}
.sommaire li.niv1{counter-increment:s;margin:0}
.sommaire li.niv2{margin:0 0 0 1.6rem}
.sommaire li.niv2 a{font-size:.86rem}
.sommaire li.niv2 a::before{content:"—";color:var(--ligne);opacity:1}
.sommaire a{
  display:flex;gap:.55rem;align-items:baseline;min-height:44px;
  padding:.25rem 0;color:var(--gris);text-decoration:none;
  font-size:.92rem;line-height:1.35;
}
.sommaire a::before{
  content:counter(s,decimal-leading-zero);
  font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:600;
  color:var(--bleu);opacity:.65;flex:0 0 auto;
}
.sommaire a:hover,.sommaire a:focus{color:var(--bleu-fonce);text-decoration:underline}

/* L'en-tête est collant : sans cette marge, l'ancre atterrit sous la barre. */
.prose h2[id],.prose h3[id]{scroll-margin-top:96px}
.prose h2:target,.prose h3:target{
  background:linear-gradient(transparent 62%, var(--bleu-clair) 62%);
}


/* ── Sections d'un article long ────────────────────────────────────────────
   Le sommaire seul ne suffisait pas : le texte restait une colonne unique de
   paragraphes. Chaque <h2> ouvre maintenant sa propre bande, numérotée, avec
   un vrai intervalle. C'est ce découpage qui rend la page lisible. */
.corps{min-width:0}
.bloc{padding-block:clamp(2.4rem,4.5vw,3.6rem);border-top:1px solid var(--ligne)}
.bloc--intro{border-top:0;padding-top:0}
.bloc:first-child{border-top:0;padding-top:0}
.bloc__tete{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.5rem}
.bloc__num{
  flex:0 0 auto;font-family:Inter,sans-serif;font-size:.82rem;font-weight:600;
  letter-spacing:.08em;color:var(--bleu);opacity:.5;
  font-variant-numeric:tabular-nums;padding-top:.5em;
}
.bloc__tete h2,.bloc__tete h3{margin:0}
.bloc__soustitre{
  font-family:Newsreader,Georgia,serif;font-weight:500;
  font-size:clamp(1.25rem,2.4vw,1.65rem);color:var(--encre);letter-spacing:-.01em;
}
.bloc__num--vide{opacity:.3;font-size:1rem;padding-top:.15em}
.bloc--n3{padding-block:clamp(1.9rem,3.5vw,2.8rem)}
/* Troisieme niveau : les questions de la source (« Quels sont les risques ? »).
   Pas de bande — sinon la page devient un damier — mais un filet d'accent et
   un vrai intervalle, pour que l'oeil sache ou une reponse commence. */
.bloc--n4{
  border-top:0;padding:1.4rem 0 1.4rem 1.15rem;margin:1.9rem 0;
  border-left:3px solid var(--bleu-clair);
}
.bloc__question{
  margin:0 0 .7rem;font-family:Inter,sans-serif;font-weight:600;
  font-size:1.02rem;line-height:1.4;color:var(--bleu-fonce);
}
.bloc--n4 .prose{font-size:1rem}
/* Une bande sur deux prend un fond, qui déborde légèrement de la colonne :
   c'est ce léger débord qui donne le rythme, sans encadrer bêtement le texte. */
.bloc--pair{
  background:var(--brume);border-top-color:transparent;border-radius:var(--r);
  margin-inline:clamp(-1.4rem,-2vw,-.8rem);
  padding-inline:clamp(.8rem,2vw,1.4rem);
}
/* Le premier paragraphe d'une section sert de chapô. */
.bloc > .prose > p:first-child{font-size:1.1rem;color:var(--encre)}

/* Confort de lecture sur les pages longues */
.corps .prose{max-width:64ch;font-size:1.05rem;line-height:1.78}
.corps .prose h3{
  margin-top:2.2em;margin-bottom:.6em;font-family:Inter,sans-serif;
  font-weight:600;font-size:1.06rem;color:var(--bleu-fonce);
}
.corps .prose h3:first-child{margin-top:0}
.corps .prose ul{
  border-left:2px solid var(--bleu-clair);
  padding-left:1.3rem;margin:1.7em 0;list-style:none;
}
.corps .prose li{position:relative;margin-bottom:.55em}
.corps .prose li::before{
  content:"";position:absolute;left:-1.05rem;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--bleu);opacity:.55;
}
/* Les figures sortent un peu de la colonne et sont cadrées : un schéma
   médical posé nu au milieu du texte se confond avec le fond. */
.corps .prose figure{
  margin:2.2em 0;padding:.9rem;background:var(--blanc);
  border:1px solid var(--ligne);border-radius:var(--r);
}
.bloc--pair .prose figure{background:var(--blanc)}
.corps .prose figure img{border-radius:2px;margin:0 auto}
.corps .prose figcaption{
  margin-top:.75rem;text-align:center;font-size:.87rem;color:var(--gris);
}

@media (max-width:999px){
  .bloc--pair{margin-inline:calc(-1*clamp(1.1rem,4vw,2.5rem));
    padding-inline:clamp(1.1rem,4vw,2.5rem);border-radius:0}
}

/* ── Vidéos et liens externes ──────────────────────────────────────────────
   Récupérés depuis post_content : la première extraction, faite sur le HTML
   rendu, ne gardait que le texte et les avait perdus. */
.video{position:relative;aspect-ratio:16/9;margin:1.9em 0;border-radius:var(--r);
  overflow:hidden;background:var(--encre);border:1px solid var(--ligne)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lien-externe{margin:1.5em 0}
.lien-externe a{
  display:flex;align-items:center;gap:.8rem;min-height:52px;
  padding:.7rem 1rem;border:1px solid var(--ligne);border-radius:var(--r);
  background:var(--blanc);text-decoration:none;color:var(--encre);
}
.lien-externe a:hover,.lien-externe a:focus{border-color:var(--bleu);background:var(--bleu-clair)}
.lien-externe__type{
  font-size:.78rem;  /* .72rem tombait a 11,52 px : sous le plancher de 12 px */
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bleu);flex:0 0 auto;
}
.lien-externe__hote{color:var(--gris);font-size:.94rem;overflow-wrap:anywhere}
.lien-externe a::after{content:"↗";margin-left:auto;color:var(--bleu);flex:0 0 auto}

/* ── Galerie de publications ───────────────────────────────────────────── */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(11rem,45%),1fr));gap:1rem}
.galerie a{display:block;border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;background:var(--brume)}
.galerie a:hover,.galerie a:focus{border-color:var(--bleu)}
.galerie img{width:100%;aspect-ratio:1190/1684;object-fit:cover}

/* ── Encart rendez-vous ────────────────────────────────────────────────── */
.rdv{background:var(--bleu);color:#fff;border-radius:var(--r);padding:clamp(2rem,5vw,3.2rem)}
.rdv h2{color:#fff;margin-bottom:.4em}
.rdv p{color:#dbe6ee;max-width:46ch}
.rdv__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.rdv .bouton--ligne{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.rdv .bouton--ligne:hover,.rdv .bouton--ligne:focus{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ── Carte Google ──────────────────────────────────────────────────────── */
.carte-geo{border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;background:var(--brume)}
.carte-geo iframe{display:block;width:100%;height:clamp(260px,38vw,420px);border:0}

/* ── Pied de page ──────────────────────────────────────────────────────── */
.pied{background:var(--encre);color:#c3cfd8;padding-block:clamp(2.8rem,6vw,4rem);font-size:.94rem}
.pied a{color:#fff;text-decoration:none}
.pied a:hover,.pied a:focus{color:#9fc4dc;text-decoration:underline}
/* .pied a (0,1,1) l'emportait sur .bouton--clair (0,1,0) : le bouton Doctolib
   du pied etait blanc sur blanc, mesure a 1,00:1. */
.pied .bouton--clair{color:var(--bleu-fonce);text-decoration:none}
.pied .bouton--clair:hover,.pied .bouton--clair:focus{background:var(--bleu-clair);color:var(--bleu-fonce);text-decoration:none}
.pied h3{color:#fff;font-family:Inter,sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.8rem}
.pied__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:2rem}
.pied address{font-style:normal}
.pied p a{display:inline-flex;align-items:center;min-height:44px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:.4rem}
.pied li a{display:inline-flex;align-items:center;min-height:44px}
.pied__bas{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.87rem;
}
.pied__bas a{display:inline-flex;align-items:center;min-height:44px}
.pied__bas span{display:flex;flex-wrap:wrap;align-items:center;gap:0 .35rem}

/* ── Bouton flottant mobile ────────────────────────────────────────────── */
.flottant{display:none}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .bascule{display:flex}
  .nav{
    position:fixed;inset:74px 0 auto;background:var(--blanc);flex-direction:column;
    align-items:stretch;gap:0;padding:.6rem clamp(1.1rem,4vw,2.5rem) 1.4rem;
    border-bottom:1px solid var(--ligne);box-shadow:var(--ombre);
  }
  .nav[hidden]{display:none}
  .nav a{min-height:52px;padding:0 .4rem;font-size:1.02rem;border-radius:0;
    border-bottom:1px solid var(--ligne)}
  .nav a[aria-current="page"]{box-shadow:none;background:var(--bleu-clair)}
  /* Sur mobile la barre ne garde que la marque et le burger : la prise de
     rendez-vous est assuree par le bouton flottant en bas d'ecran. */
  .entete .bouton,.entete .tel,.entete .rdv-btn{display:none}
  .heros::before{
    background:linear-gradient(180deg,rgba(20,32,43,.55) 0%,rgba(20,32,43,.86) 55%,rgba(20,32,43,.94) 100%);
  }
  .heros__int{max-width:none}
  .duo--inverse .duo__media{order:0}
  .flottant{
    display:flex;position:fixed;left:.9rem;right:.9rem;bottom:.9rem;z-index:60;
    gap:.6rem;
  }
  .flottant .bouton,.flottant .rdv-btn{flex:1 1 0;min-width:0;width:auto;
    box-shadow:0 6px 20px -6px rgba(20,32,43,.5)}
  .flottant .rdv-btn{padding-inline:.8rem;gap:.5rem}
  .flottant .rdv-btn__logo{height:16px}
  .pied{padding-bottom:calc(clamp(2.8rem,6vw,4rem) + 72px)}
}
/* Sous 620 px les libelles longs doivent pouvoir se replier : « Prendre
   rendez-vous sur Doctolib » debordait de 19 px a 320 px a cause du nowrap. */
@media (max-width:620px){
  .bouton{white-space:normal;text-align:center;line-height:1.25;padding-block:.6rem}
  .rdv__actions .bouton,.heros__actions .bouton{width:100%}
}
@media (max-width:420px){
  body{font-size:16px}
  .heros__actions .bouton{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media print{
  .entete,.flottant,.rdv__actions,.carte-geo{display:none}
  body{font-size:12pt}
}