/* home.css — styles propres à la page d'accueil.
   Le socle commun (typographie, header, footer, variables) vit dans style.css.
   Ce fichier ne contient que ce qui diffère ou s'y ajoute. */

h2{font-size:clamp(28px,3.4vw,40px);color:var(--brun)}
h3{font-size:20px;color:var(--brun)}
.lede{max-width:640px}
.nav{gap:20px}
.logo{font-size:21px;letter-spacing:.26em}
.menu a:hover{border-color:var(--or)}
/* fond du hero : une lueur pétrole montant du bas gauche vers un
   pétrole profond, pour donner de la matière au bloc de texte.
   La partie claire reste sous le surtitre doré, dont le contraste
   se dégraderait sur un fond plus lumineux. */
.hero{background:var(--brun);background:radial-gradient(125% 105% at 0% 100%,#0E4448 0%,#0B2B2D 38%,#0C2122 62%,#061518 100%);color:var(--creme);position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;min-height:82vh;align-items:center;max-width:var(--hero-max)}
.hero-txt{padding:90px 60px 90px 0}
.hero h1{font-size:clamp(34px,4.4vw,var(--hero-h1-max));color:var(--creme);margin-bottom:26px}
.hero p:not(.eyebrow){max-width:440px;color:rgba(245,230,200,.82);font-size:16.5px;margin-bottom:40px}
.hero-img{align-self:stretch;position:relative}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:left center}
/* la photo est montrée telle quelle ; un filet or la sépare du texte,
   dans le prolongement du geste graphique de la charte */
.hero-img::after{content:'';position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--or);opacity:.55}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap}
.proof{border-bottom:1px solid var(--hair)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-item{padding:38px 28px;text-align:center;border-left:1px solid var(--hair)}
.proof-item:first-child{border-left:none}
.proof-item strong{display:block;font-family:var(--slab);font-weight:400;font-size:22px;color:var(--brun);margin-bottom:6px}
.proof-item span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muet)}
section{padding:110px 0}
.split img{width:100%;height:520px;object-fit:cover}
.link-line{margin-top:30px;font-size:12.5px}
.univers{background:#F3ECDC}
.cards{grid-template-columns:repeat(4,1fr);margin-top:60px}
.card{background:var(--ivoire);border:1px solid var(--hair);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,20,16,.08)}
.card img{height:220px;object-fit:cover;width:100%;filter:saturate(.82)}
.card-body{padding:26px 24px 30px;flex:1;display:flex;flex-direction:column}
.card h3{margin-bottom:12px}
.card p{font-size:14px;color:var(--muet);flex:1;line-height:1.65}
.card .link-line{margin-top:22px;font-size:11.5px;align-self:flex-start}
.docs{border-top:1px solid var(--hair)}
.docs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:50px 30px;margin-top:60px}
.doc{text-align:center}
/* La vignette occupe toute sa colonne — 199 px sur un ecran large, la
   grille etant de cinq colonnes dans 1116 px utiles. Le plafond evite
   qu'elle enfle demesurement quand la grille retombe a deux colonnes. */
.doc-photo{width:100%;max-width:220px;aspect-ratio:1;height:auto;margin:0 auto 22px;object-fit:cover;filter:grayscale(.2);display:block}
.doc-photo.ph{display:flex;align-items:center;justify-content:center;background:var(--creme);color:var(--or);font-family:var(--slab);font-size:26px;border:1px solid var(--hair-or)}
.doc h3{font-size:17px;margin-bottom:6px}
.doc span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muet)}
.steps{margin-top:60px}
.step{padding:44px 36px 10px}
.step em{font-size:15px;margin-bottom:16px}
.step h3{margin-bottom:12px}
/* l'image occupe la gauche, le texte la droite : la lueur monte donc
   du bas droit, pour porter le texte et non l'image */
.b2b{background:var(--brun);background:radial-gradient(115% 100% at 100% 100%,#0E4448 0%,#0B2B2D 40%,#0C2122 65%,#061518 100%);color:var(--creme)}
.b2b .split img{height:560px;opacity:.9}
.b2b h2{color:var(--creme)}
.b2b p:not(.eyebrow){color:rgba(245,230,200,.82)}
.b2b-points{list-style:none;margin:34px 0 44px}
.b2b-points li{padding:16px 0;border-bottom:1px solid rgba(245,230,200,.14);font-size:15px;display:flex;gap:16px;align-items:baseline}
.b2b-points li::before{content:'';width:18px;height:1px;background:var(--or);flex:none;transform:translateY(-4px)}
.access{background:#F3ECDC;border-top:1px solid var(--hair)}
.access .split{align-items:start}
.map{width:100%;height:420px;border:1px solid var(--hair);filter:sepia(.25) saturate(.7)}
.coord{list-style:none;margin-top:34px}
.coord li{padding:15px 0;border-bottom:1px solid var(--hair);font-size:15px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.coord li b{font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--muet);align-self:center}
footer{padding:70px 0 40px}
.foot-grid{margin-bottom:56px}
.foot-grid .logo{margin-bottom:18px}
footer h4{margin-bottom:20px}
footer li{margin-bottom:11px}
.foot-legal{padding-top:28px}
@media(max-width:980px){
  .burger{display:block;background:none;border:none;color:var(--brun);font-size:22px;cursor:pointer}
  .hero-inner{grid-template-columns:1fr;min-height:auto}
  .hero-txt{padding:70px 0 50px}
  .hero-img{height:340px}
  .hero-img::after{top:0;bottom:auto;left:0;right:0;width:auto;height:1px}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .proof-item:nth-child(3){border-left:none}
  .proof-item{border-top:1px solid var(--hair)}
  .proof-item:nth-child(-n+2){border-top:none}
  .split img{height:340px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .docs-grid{grid-template-columns:repeat(2,1fr);gap:44px 20px}
  .step{padding:34px 0 6px}
  .foot-grid{gap:36px}
  section{padding:74px 0}
}
@media(max-width:560px){
  .cards{grid-template-columns:1fr}
  .docs-grid{grid-template-columns:repeat(2,1fr)}
}
.eyebrow,.step em,.news time{color:#7E6426}
.hero .eyebrow,.b2b .eyebrow,footer h4{color:#C9A243}
.proof-item span{color:#675D4D}
.dark-page .menu .submenu{background:#241C15}
@media(max-width:980px){
  .burger{display:flex}
  .mobile-nav{z-index:110}
}
.cta{font-size:10.5px;padding:12px 20px 10px;letter-spacing:.1em}
.step-ico{display:block;margin-bottom:18px}
.step-ico svg{width:32px;height:32px;stroke:var(--or-txt);fill:none;stroke-width:1.4;display:block}
.hero-img{position:relative;margin-right:calc((100vw - var(--hero-max)) / -2 - 32px)}
@media(max-width:1244px){
  .hero-img{margin-right:-32px}
}
@media(max-width:980px){
  .hero-img{margin-right:0}
}
.hero-img img{object-position:20% center !important}
@media(max-width:900px){
  .proof + div p, div[style*="accompagner chaque patient"]{white-space:normal !important;font-size:20px !important}
}

/* — plan d'accès : aperçu hébergé localement, carte Google chargée
     uniquement sur action du visiteur (aucun cookie tiers avant clic) — */
.map-zone{position:relative;border:1px solid var(--hair);background:var(--creme);overflow:hidden}
.map-apercu{display:block;width:100%;height:420px;object-fit:cover;object-position:center}
.map-barre{padding:18px 22px 20px;border-top:1px solid var(--hair);background:var(--ivoire)}
.map-note{font-size:12.5px;color:var(--muet);line-height:1.55;margin-bottom:14px}
.map-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.map-actions .cta{cursor:pointer;font-family:inherit;background:none}
.map-actions .link-line{margin-top:0}
@media(max-width:980px){
  .map-apercu{height:300px}
  .map-actions{gap:16px}
  .map-actions .cta{width:100%;text-align:center}
}

/* — Sur le dégradé du hero, le fond s'éclaircit vers le bas : l'or profond
     utilisé sur fond clair y tombe sous le seuil de lisibilité (3,8 pour
     le bouton). Les éléments dorés du hero reprennent donc l'or lumineux
     de la charte, qui remonte le contraste à 5,2 et 6,2. — */
.hero .eyebrow{color:#C9A243}
.hero .cta.gold{border-color:#C9A243;color:#C9A243}
.hero .cta.gold:hover{background:#C9A243;color:var(--brun)}

/* Éléments dorés du bloc praticiens : même raison que dans le hero,
   le fond éclairci impose l'or lumineux. */
.b2b .eyebrow{color:#C9A243}
.b2b .cta.gold{border-color:#C9A243;color:#C9A243}
.b2b .cta.gold:hover{background:#C9A243;color:var(--brun)}
.b2b-points li::before{background:#C9A243}

/* — Avec cinq chirurgiens sur une grille à deux colonnes, le dernier se
     retrouve seul et calé à gauche. La règle ne s'applique qu'à un
     dernier élément en position impaire : elle se désactive d'elle-même
     si l'équipe passe à quatre ou six praticiens. — */
@media(max-width:980px){
  .docs-grid > .doc:last-child:nth-child(odd){grid-column:1 / -1}
  /* Ce dernier bloc occupe deux colonnes : sans plafond, sa vignette serait
     plus grande que les quatre autres. On la ramène à la largeur d'une
     colonne, gouttière déduite. */
  .docs-grid > .doc:last-child:nth-child(odd) .doc-photo{max-width:min(220px, calc((100% - 20px) / 2))}
}

/* — À 320 px, deux colonnes coupaient « Certification HAS — 2025 » et
     « Parc de la Tête d'Or » en plein mot. Le bandeau de réassurance
     passe sur une seule colonne : quatre lignes lisibles valent mieux
     que quatre libellés tronqués. — */
@media(max-width:360px){
  .proof-grid{grid-template-columns:1fr}
  .proof-item{border-left:none;border-top:1px solid var(--hair);padding:24px 20px}
  .proof-item:nth-child(2),
  .proof-item:nth-child(3){border-top:1px solid var(--hair)}
  .proof-item:first-child{border-top:none}
}

/* La fonction du directeur médical se distingue de la spécialité :
   même graisse, teinte or, sans italique — les capitales espacées de
   la carte rendraient l'italique illisible. */
.doc span em{display:block;font-style:normal;color:var(--or-txt);margin-top:6px;font-size:11px}

/* ═══════════ Survol des portraits ═══════════
   Le portrait se lève légèrement, retrouve ses couleurs pleines et
   s'entoure d'un filet or. Le nom passe à l'or : le lien tout entier
   réagit, pas seulement l'image survolée. */
.doc-photo,
.doc h3,
.doc span{
  transition:transform .45s cubic-bezier(.22,1,.36,1),
             filter .45s ease,
             box-shadow .45s ease,
             color .3s ease;
}
.doc:hover .doc-photo,
.doc:focus-visible .doc-photo{
  transform:translateY(-7px) scale(1.035);
  filter:grayscale(0);
  box-shadow:0 0 0 1px var(--or), 0 16px 34px rgba(12,33,34,.16);
}
.doc:hover h3,
.doc:focus-visible h3{color:var(--or-txt)}
.doc:hover span,
.doc:focus-visible span{color:var(--encre)}
.doc:focus-visible{outline:none}

/* Le médaillon à initiale suit le même mouvement. */
.doc:hover .doc-photo.ph{background:var(--ivoire);border-color:var(--or)}

@media(prefers-reduced-motion:reduce){
  .doc-photo,.doc h3,.doc span{transition:none}
  .doc:hover .doc-photo{transform:none}
}

/* ═══════════ La citation ═══════════
   Les mots se posent l'un après l'autre, comme une phrase que l'on
   prononce. Le découpage est fait par le script ; sans lui, la phrase
   s'affiche entière et sans mouvement. */
.citation{
  background:var(--brun);
  background:radial-gradient(120% 180% at 50% 100%,
    #0E4448 0%,#0B2B2D 42%,#0C2122 68%,#061518 100%);
  color:var(--creme);
  text-align:center;
  padding:82px 32px 86px;
}
.citation-texte{
  font-family:var(--slab);font-weight:300;font-style:italic;
  font-size:clamp(19px,2.4vw,31px);
  line-height:1.45;
  max-width:1180px;margin:0 auto;
  color:var(--creme);
}
.citation .guillemet{color:#C9A243;font-style:normal}

.js .citation .mot{
  display:inline-block;
  opacity:0;
  transform:translateY(14px);
}
.js .citation.vu .mot{
  opacity:1;
  transform:none;
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
}

@media(max-width:980px){
  .citation{padding:62px 24px 66px}
  .citation-texte{font-size:clamp(18px,5vw,24px)}
}
@media(prefers-reduced-motion:reduce){
  .js .citation .mot{opacity:1;transform:none}
}

/* La carte des réseaux ferme la rangée d'actualités. Elle porte deux
   liens au lieu d'un : ils partagent la ligne du bas. */
.news-social{background:#F3ECDC}
.news-liens{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px}
.news-liens .link-line{margin-top:0;font-size:11.5px}


/* ═══════════ Sociétés savantes ═══════════
   Une bande de réassurance en fin de page, en typographie seule : afficher
   les logos supposerait l'autorisation de chaque société, une marque
   déposée ne se reprenant pas sans accord. Les acronymes portent le regard,
   le nom complet lève l'ambiguïté, et chaque entrée mène à l'annuaire
   officiel où l'affiliation se vérifie. */
.societes{background:#F1E9DA}
.societes .lede{max-width:620px}
.societes-liste{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;
  margin-top:46px;
  background:var(--hair);
  border:1px solid var(--hair);
}
.societes-liste li{background:#F1E9DA}
.societes-liste a{
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
  padding:30px 26px 28px;
  transition:background .25s;
}
.societes-liste b{
  font-family:var(--slab);
  font-weight:400;
  font-size:23px;
  letter-spacing:.06em;
  color:var(--brun);
  transition:color .25s;
}
.societes-liste span{
  font-size:12.5px;
  line-height:1.6;
  color:var(--muet);
}
.societes-liste a:hover{background:#EDE3D0}
.societes-liste a:hover b{color:var(--or-txt)}
.societes-note{
  margin-top:26px;
  font-size:13px;
  color:var(--muet);
}

@media(max-width:560px){
  .societes-liste{grid-template-columns:1fr;margin-top:36px}
  .societes-liste a{padding:24px 22px 22px}
  .societes-liste b{font-size:21px}
}


/* ═══════════ Hero sur grand écran ═══════════
   Le titre plafonnait a 58 px et le texte restait enferme dans une colonne
   de 500 px heritee du conteneur a 1180 px. Sur un ecran large — ou chez un
   visiteur qui a dezoome — le bandeau s'etirait sans que rien ne grandisse,
   et le titre paraissait perdu. Le conteneur du hero et le plafond du titre
   montent donc par paliers. Le debord de l'image suit la meme variable :
   sans cela, la photo cesserait de toucher le bord droit de la fenetre. */
:root{--hero-max:1180px;--hero-h1-max:58px}

@media(min-width:1400px){
  :root{--hero-max:1300px;--hero-h1-max:66px}
}
@media(min-width:1700px){
  :root{--hero-max:1440px;--hero-h1-max:76px}
}
@media(min-width:2100px){
  :root{--hero-max:1600px;--hero-h1-max:88px}
  .hero p:not(.eyebrow){max-width:520px;font-size:18px}
}


/* Cartes portant une photo affleurante : le haut s'arrondit avec elle. */
.card{border-radius:var(--rayon);overflow:hidden}
.card img{border-radius:var(--rayon) var(--rayon) 0 0}

/* ═══════════ Chirurgiens : un par ligne sur telephone ═══════════
   A deux colonnes, les noms sur deux lignes et les intitules decales
   donnaient un rendu brouillon. Un seul portrait par ligne, plus grand,
   avec de l'air entre chacun. */
@media(max-width:640px){
  .docs-grid{grid-template-columns:1fr;gap:44px;margin-top:44px}
  .docs-grid .doc-photo{max-width:260px}
  /* Le dernier chirurgien n'est plus un cas particulier a une colonne :
     on annule le plafond pose pour la grille a deux colonnes. */
  .docs-grid > .doc:last-child:nth-child(odd) .doc-photo{max-width:260px}
}


/* ═══════════ Carte interactive ═══════════
   Leaflet remplace l'ancien apercu a charger d'un clic. La hauteur est
   celle qu'avait l'image, pour que la mise en page ne bouge pas. */
#carte{height:420px;width:100%;background:var(--creme);z-index:0}
.leaflet-container{font-family:var(--sans);border-radius:0}
.leaflet-popup-content{font-size:13.5px;line-height:1.6;color:var(--encre)}
.leaflet-popup-content b{font-family:var(--slab);font-weight:400;font-size:16px}
.leaflet-control-attribution{font-size:10.5px;background:rgba(246,242,234,.86)}
.leaflet-control-attribution a{color:var(--or-txt)}
@media(max-width:980px){
  #carte{height:320px}
}


/* ═══════════ Hero video ═══════════
   La video occupe tout le bandeau, le texte passe par-dessus. Le voile
   reprend le degrade petrole de la charte : sans lui le titre creme
   tomberait sur des plans clairs et deviendrait illisible d'un instant a
   l'autre — un fond mouvant ne garantit aucun contraste. Il est plus dense
   a gauche, la ou se trouve le texte, et s'ouvre a droite pour laisser
   respirer l'image. */
.hero{position:relative;overflow:hidden}
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;
  /* L'image d'attente s'affiche des le premier rendu, avant meme que la
     video ne soit demandee. */
  background:#061518 center/cover no-repeat;
}
/* Le texte etant centre, le voile l'est aussi : un degrade de gauche a
   droite laisserait le bord droit du titre passer sur la zone claire. Il
   est le plus dense au centre, la ou se lit le texte, et s'allege vers les
   angles pour ne pas etouffer l'image. Meme a son point le plus ouvert
   (72 %), un plan blanc pur se compose a RGB(80,95,96) : 6,1:1 pour le
   creme, au-dessus du seuil AA. */
.hero-voile{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(82% 80% at 50% 48%, rgba(6,21,24,.80) 0%, rgba(11,43,45,.72) 52%, rgba(12,33,34,.58) 100%),
    linear-gradient(180deg, rgba(6,21,24,.50) 0%, rgba(6,21,24,.06) 30%, rgba(6,21,24,.06) 70%, rgba(6,21,24,.45) 100%);
}
.hero-inner{position:relative;z-index:2;grid-template-columns:1fr;justify-items:center}
.hero-txt{padding:96px 0 112px;max-width:900px;text-align:center;margin:0 auto}
.hero .eyebrow{margin-bottom:22px}
.hero p:not(.eyebrow){max-width:600px;margin-left:auto;margin-right:auto}
.hero-actions{justify-content:center}

@media(max-width:980px){
  .hero-txt{padding:76px 0 92px;max-width:none}
  .hero-inner{min-height:auto}
}
@media(min-width:1400px){ .hero-txt{max-width:880px} }
@media(min-width:1700px){ .hero-txt{max-width:1000px} }
@media(min-width:2100px){ .hero-txt{max-width:1160px} }

/* Mouvement refuse : la video n'est jamais demandee par le script, mais on
   la neutralise aussi cote CSS par securite. */
@media(prefers-reduced-motion:reduce){
  /* Le script ne demande jamais la video dans ce cas ; on la neutralise
     aussi cote CSS, l'image d'attente restant affichee par le poster. */
  .hero-video{display:none}
}


/* ═══════════ Presence du bandeau ═══════════
   Le contraste etait bon — 10,9:1 mesure — mais la hierarchie faible : un
   chapeau a 82 % d'opacite et deux filets d'un pixel a 12 px s'effacent
   derriere l'image, quelle que soit leur lisibilite theorique. Le bloc
   gagne donc du poids sans changer de registre : l'appel principal devient
   plein, le secondaire garde son filet mais s'epaissit, et les textes
   reprennent leur pleine opacite. */

/* Un leger halo detache les lettres du plan mouvant : sur une video, deux
   images consecutives n'offrent pas le meme fond. */
.hero h1{text-shadow:0 2px 30px rgba(6,21,24,.55)}
.hero p:not(.eyebrow){
  color:rgba(246,242,234,.95);
  font-size:17.5px;
  line-height:1.75;
  margin-bottom:24px;
  text-shadow:0 1px 18px rgba(6,21,24,.5);
}
.hero .eyebrow{font-size:12px;letter-spacing:.34em;text-shadow:0 1px 14px rgba(6,21,24,.5)}

.hero-actions{gap:16px}
.hero-actions .cta{
  font-size:12.5px;
  letter-spacing:.14em;
  padding:17px 34px 15px;
  border-width:1px;
}
/* Appel principal : plein, pour qu'il se lise comme l'action a faire. */
.hero-actions .cta.light{
  background:var(--creme);
  border-color:var(--creme);
  color:var(--brun);
}
.hero-actions .cta.light:hover{
  background:transparent;
  color:var(--creme);
}
/* Appel secondaire : le filet reste, mais sur un fond legerement assombri
   pour qu'il ne se dissolve pas dans les plans clairs. */
.hero-actions .cta.gold{
  background:rgba(6,21,24,.32);
  border-color:#C9A243;
  color:#C9A243;
}
.hero-actions .cta.gold:hover{
  background:#C9A243;
  color:var(--brun);
}

@media(max-width:560px){
  .hero-actions{width:100%}
  .hero-actions .cta{width:100%;text-align:center;padding:16px 20px 14px}
}


/* ═══════════ Logo et accent du bandeau ═══════════ */
/* 480 px de source pour 240 affiches : net sur un ecran a double densite. */
.hero-logo{
  display:block;
  width:330px;height:auto;
  margin:0 auto 30px;
  filter:drop-shadow(0 2px 22px rgba(6,21,24,.55));
}
/* « Lyon » a l'or lumineux — celui des fonds sombres, pas l'or des fonds
   clairs qui tomberait a 2,2:1 ici. */
.titre-or{color:#C9A243}

/* Le chapeau tenait sur trois lignes ; elargi, il en fait deux. On reste
   sous 80 caracteres par ligne, la limite au-dela de laquelle l'oeil perd
   le debut de la ligne suivante. */
.hero p:not(.eyebrow){max-width:790px}

@media(max-width:980px){
  .hero-logo{width:260px;margin-bottom:28px}
  .hero p:not(.eyebrow){max-width:560px}
}
@media(max-width:560px){
  .hero-logo{width:210px;margin-bottom:24px}
}

/* ═══════════ Titre du bandeau : deux lignes, toujours ═══════════
   La taille du titre et la largeur de son bloc varient toutes deux avec
   l'ecran, a des rythmes differents : le titre passait sur une ligne a
   1280 px et sur deux au-dela de 1400. Plutot que de dependre de ce
   calcul, « a Lyon » part a la ligne sur tous les ecrans d'ordinateur.
   Sous 980 px le retour n'est pas force : le titre s'y replie deja, et
   l'imposer le couperait en trois lignes. */
@media(min-width:981px){
  .hero h1 .titre-ligne2{display:block}
}

/* ═══════════ Voile eclairci, or du bandeau releve ═══════════
   Le voile passe de 93 % a 80 % au centre et de 78 % a 58 % sur les bords :
   la video se voit trois fois plus. Mesure sur quinze images de la video,
   le surtitre en or de 12 px etait le premier a perdre en lisibilite —
   4,18:1 des le premier cran, sous le seuil de 4,5. L'or du bandeau
   remonte donc d'un ton, pour le surtitre, « Lyon » et le bouton
   secondaire. Le bloc praticiens et le pied de page gardent leur or. */
.hero .eyebrow{color:#E0C478}
.hero .titre-or{color:#E0C478}
.hero-actions .cta.gold{border-color:#E0C478;color:#E0C478}
.hero-actions .cta.gold:hover{background:#E0C478;color:var(--brun)}

/* Sous 980 px, la video est recadree serre sur un ecran etroit et une zone
   plus claire passe derriere le surtitre : avec le voile ordinateur il
   tombait a 4,27:1 sur telephone, et a 4,52:1 sur tablette, trop juste. Le
   voile y reste donc un peu plus dense — toujours plus clair qu'avant —
   pour garder le surtitre au-dessus de 4,5:1. */
@media(max-width:980px){
  .hero-voile{
    background:
      radial-gradient(82% 80% at 50% 48%, rgba(6,21,24,.84) 0%, rgba(11,43,45,.76) 52%, rgba(12,33,34,.62) 100%),
      linear-gradient(180deg, rgba(6,21,24,.50) 0%, rgba(6,21,24,.06) 30%, rgba(6,21,24,.06) 70%, rgba(6,21,24,.45) 100%);
  }
}

/* ═══════════ Bande de réassurance : logos de tutelle ═══════════
   Les logos ARS et HAS occupent la place du chiffre. Chiffre et logo ont
   la même hauteur, pour que les intitulés restent alignés sur une ligne. */
.proof-item strong{display:flex;align-items:center;justify-content:center;height:46px;margin-bottom:10px}
.proof-item .proof-logo{display:block;height:46px;width:auto;margin:0 auto 10px}
/* Sur téléphone, deux colonnes de 160 px : avec l'espacement des capitales,
   « d'hospitalisation » dépassait de sa case. On resserre les intitulés. */
@media(max-width:560px){
  .proof-item{padding-left:10px;padding-right:10px}
  .proof-item span{font-size:11px;letter-spacing:.05em}
}

/* ═══════════ Retours de septembre ═══════════ */
/* Le logo a son emblème à gauche et son nom à droite : centré au pixel, il
   paraît décalé vers la droite. On le ramène d'un cran vers la gauche. */
.hero-logo{translate:-5% 0}

/* Avant / Pendant / Après mènent au déroulé détaillé de Votre séjour */
.step-lien{color:inherit;border-bottom:1px solid currentColor;padding-bottom:3px;transition:color .2s}
.step-lien::after{content:'→';display:inline-block;margin-left:10px;transition:transform .2s}
.step-lien:hover,.step-lien:focus-visible{color:#0E4448}
.step-lien:hover::after{transform:translateX(4px)}

/* Accès : deux boutons côte à côte */
.coord-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.coord-actions .cta{margin:0}

/* Carte : cliquable, et lien « Itinéraire » plus lisible */
#carte.leaflet-grab{cursor:pointer}
.map-actions .link-line{font-size:15px;letter-spacing:.16em}