/* ==================================================================
   IDENTITÉ TYPOGRAPHIQUE UNIQUE — celle de la home (index-b.html)
   appliquée à toutes les pages du site.

   Le problème corrigé : deux registres cohabitaient.
     home   → titres en CAPITALES, h1 56px, interlettrage +2,8px
     pages  → titres bas-de-casse, h1 jusqu'à 104px, interlettrage −6,7px
   Même police, même couleur, mais deux identités visuelles opposées.

   Cette feuille est chargée EN DERNIER et impose le traitement de la home :
   capitales, interlettrage positif, échelle mesurée.
   Sélecteurs préfixés par `body` pour l'emporter sur premium.css
   sans recourir à !important.
   ================================================================== */

/* ---- Traitement commun ---- */
body h1,
body h2,
body h3,
body .universe-hero h1,
body .news-hero h1,
body .procedure-hero h1,
body .article-section .section-heading h2,
body .topic-section > header h2,
body .universe-intro h2,
body .news-intro h2,
body .cross-universes h2,
body .consultation-band h2,
body .information-strip h2,
body .article-aside h2 {
  font-family: var(--display, "Tenor Sans", system-ui, sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.22;
}

/* ---- Échelle, alignée sur la home ---- */
body .universe-hero h1,
body .news-hero h1,
body .procedure-hero h1,
body h1 {
  font-size: clamp(34px, 4.4vw, 56px);
  max-width: 22ch;
}

body h2,
body .article-section .section-heading h2,
body .topic-section > header h2,
body .universe-intro h2,
body .news-intro h2,
body .cross-universes h2,
body .consultation-band h2,
body .information-strip h2,
body .article-aside h2 {
  font-size: clamp(22px, 2.6vw, 34px);
}

body h3 {
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: 0.04em;
}

/* ---- Numéros et intitulés décoratifs : mêmes proportions ---- */
body .topic-card > span,
body[data-page="home"] .expertise-index,
body[data-page="home"] .journey-number {
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.14em;
}

/* Les micro-labels gardent leur traitement propre : ils sont déjà
   en capitales espacées et ne doivent pas suivre l'échelle des titres. */
body .eyebrow,
body .module-title,
body .anatomie h3,
body .frise h3 {
  letter-spacing: 0.05em;
}
body .module-title,
body .anatomie h3,
body .frise h3 {
  text-transform: uppercase;
}

/* ==================================================================
   BOUTONS — une seule morphologie sur tout le site.
   `.btn` (header, home) et `.button` (pages intérieures) s'affichaient
   côte à côte : pilule 11px capitales d'un côté, rectangle 14px de
   l'autre, avec un translateY au survol. On aligne `.button` sur `.btn`.
   ================================================================== */
body .button {
  min-height: 0;
  padding: 15px 32px;
  border-radius: 999px;
  font-family: var(--body, "Raleway", Arial, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  gap: 10px;
}
body .button:hover,
body .button:focus-visible {
  transform: none;
}
/* Bouton plein : le mauve accessible, jamais le mauve clair (2,57:1). */
body .button-primary {
  background: #5A4758;
  color: #fff;
  border-color: #5A4758;
}
body .button-primary:hover,
body .button-primary:focus-visible {
  background: #463745;
  border-color: #463745;
  color: #fff;
}

/* ==================================================================
   RESPIRATION DES PARAGRAPHES AJOUTÉS
   `styles.css:1369` pose margin:0 sur les <p> du bandeau d'information :
   correct quand il n'y en avait qu'un, illisible depuis que la section
   en compte plusieurs. Même correctif pour les h3 de sous-section.
   ================================================================== */
body .information-strip p + p,
body .universe-intro p + p,
body .universe-intro-copy p + p {
  margin-top: 16px;
}
body .information-strip h3,
body .universe-intro h3 {
  margin-top: 30px;
  margin-bottom: 12px;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body .information-strip li,
body .universe-intro li {
  margin-bottom: 8px;
}

/* ------------------------------------------------------------------ 25/08
   Recalibrage des boites de titres.
   Les max-width du site sont exprimees en ch et avaient ete calibrees pour
   du bas-de-casse, alors que cette feuille bascule tous les titres en
   capitales. En Tenor Sans, 1ch = 0,597 em quand une capitale francaise
   avance 0,71 em avec l'interlettrage : chaque boite perdait 16 % de sa
   capacite annoncee, d'ou les titres sur 4, 5 et 6 lignes.
   Reduire la taille de police ne change rien, le ch etant relatif a elle.
   On reindexe donc les boites et on equilibre les lignes.
   Le prefixe body est necessaire : les blocs <style> en fin de page
   portent les memes selecteurs et se chargent en dernier. */
body h1, body h2, body h3,
body .ar-head h1, body .pl h2, body .lx-head h1, body .rp-head h1,
body .universe-hero h1, body .news-hero h1, body .procedure-hero h1{
  text-wrap: balance;
}
body .universe-hero h1, body .news-hero h1, body h1{ max-width: 30ch }
body .ar-head{ max-width: 76ch }
body .ar-head h1{ max-width: none }
body .pl h2{ max-width: 25ch }
body .pl--verdict h2{ max-width: 21ch }
/* 03/09, retour du Dr Hayot : le titre du lexique etait trop gros et trop
   ramasse. Corps reduit d'un cran, boite a 17ch pour qu'il tombe sur trois
   lignes equilibrees, et un peu d'air entre surtitre, titre et chapeau. */
body .lx-head h1{ max-width: 17ch; font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12; margin: 14px 0 20px }
body .lx-head .eyebrow{ display: block; margin-bottom: 4px }
body .rp-head h1{ max-width: 21ch }

/* Hero d'intervention : le mot BLEPHAROPLASTIE en capitales a 56px mesure
   596px pour une colonne de 489px. Il debordait. */
body .procedure-hero h1{
  max-width: none;
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: .012em;
}

/* ------------------------------------------------------------------ 25/08
   Vocabulaire typographique du gabarit article.
   Le style de .ar-body vit dans un bloc <style> duplique dans 74 pages et
   ne declare que h2, h3, p, ul, ol, li, strong et a. Un redacteur n'avait
   litteralement rien d'autre a poser, d'ou 116 blocs faits de <p> seuls et
   59 blocs de plus de 1200 caracteres sans le moindre point d'accroche.
   On complete le vocabulaire ici, une fois, pour les 82 pages article. */
body .ar-body h4{
  font-family: var(--display);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 38px 0 12px;
}
body .ar-body blockquote{
  margin: 34px 0;
  padding: 2px 0 2px 26px;
  border-left: 2px solid var(--purple-deep);
  font-family: var(--display);
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.5;
  color: var(--ink);
}
body .ar-body blockquote p{ margin: 0 0 12px; font-size: inherit; line-height: inherit }
body .ar-body blockquote p:last-child{ margin: 0 }
body .ar-body blockquote cite{
  display: block; margin-top: 14px; font-style: normal;
  font-family: var(--body); font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
body .ar-body figure{ margin: 34px 0 }
body .ar-body figure img{ width: 100%; height: auto; display: block }
body .ar-body figcaption{
  margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted);
}
body .ar-body table{
  width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 15px;
}
body .ar-body th, body .ar-body td{
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
body .ar-body th{
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
/* encadre de respiration a l'interieur du texte */
body .ar-body .ar-note{
  margin: 34px 0; padding: 26px 28px; background: var(--mauve-soft);
  font-size: 16px; line-height: 1.62;
}
body .ar-body .ar-note p{ margin: 0 0 12px }
body .ar-body .ar-note p:last-child{ margin: 0 }
/* la FAQ en accordeon, a l'echelle du corps d'article */
body .ar-body .procedure-accordions{ margin: 30px 0 0 }
body .ar-body .procedure-accordions summary{
  font-family: var(--display); font-size: 16px; line-height: 1.4;
  min-height: 0; padding: 19px 0; gap: 18px;
}
body .ar-body .procedure-accordions details p{ padding: 0 40px 22px 0; margin: 0 }
body .ar-body .procedure-accordions details p + p{ padding-top: 0 }

/* ------------------------------------------------------------------ 25/08
   Les titres passent au pourpre profond sur tout le site, comme sur
   l'accueil et comme sur le site officiel. Le noir pur disparait.
   #3E2F3D tient 12,5:1 sur blanc, la ou #5A4758 tombait a 8,5:1 et
   ecrasait l'ecart avec le texte secondaire.
   Les blocs inverses gardent evidemment le blanc. */
body h1, body h2, body h3{ color: var(--black) }
body .information-strip h1, body .information-strip h2, body .information-strip h3,
body .news-hero h1, body .news-hero h2, body .news-hero h3{ color: var(--white) }

/* .information-strip h2 monte a 106px : en capitales, le mot le plus long
   depassait sa colonne. */
body .information-strip h2{
  font-size: clamp(34px, 3.4vw, 56px);
  letter-spacing: -.04em;
  overflow-wrap: break-word;
}

/* La colonne laterale ne fait que 299px : a 34px en capitales, le mot
   INFORMATION debordait. */
body .article-aside h2{
  font-size: clamp(21px, 1.9vw, 27px);
  letter-spacing: .02em;
  line-height: 1.2;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ 25/08
   « Pas de noir, du pourpre fonce comme sur le site officiel. »
   Les bandeaux pleins passent au pourpre. On ne touche pas a --ink
   lui-meme, qui reste le noir chaud du texte courant, ni au fond de la
   boite video (#000 est une convention de letterbox, pas une couleur
   de marque), ni aux fonds d'attente des images. */
/* .consultation-band n'est pas un bandeau sombre : premium.css le repasse en
   blanc sur les pages piliers. Lui imposer un fond fonce sans reprendre la
   couleur du texte rendait le numero de telephone illisible. */
body .information-strip{ background: var(--black) }
body .mobile-actions a:last-child{ background: var(--purple-deep); border-color: var(--purple-deep) }

/* ------------------------------------------------------------------ 25/08
   Debordement horizontal sur telephone, mesure a 390 px : la barre d'action
   du bas est une grille en 0.8fr 1.2fr, mais une piste fr ne descend jamais
   sous la largeur minimale de son contenu. Le libelle « Rendez-vous » avec
   son icone mesure 243 px, la grille montait donc a 405 px pour 390 px de
   fenetre et toute la page defilait lateralement.
   minmax(0, …) autorise la piste a se comprimer. */
@media (max-width: 900px){
  body .mobile-actions{
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    max-width: 100vw;
  }
  body .mobile-actions a{ min-width: 0; padding-inline: 10px }
  body .mobile-actions a span,
  body .mobile-actions a{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
}

/* La pastille d'auteur servait le portrait complet, 1600x1422 et 79 ko,
   pour un rond de 46 px, sur 76 pages. Elle a sa propre vignette, deja
   cadree sur le visage : plus besoin de object-position. */
body .ar-by img{ object-position: 50% 50% }

/* ------------------------------------------------------------------ 25/08
   Sur iOS, un champ dont la police est sous 16 px declenche un zoom
   automatique au moment de la saisie : le patient tape son nom et la page
   se met a grossir. Les champs du formulaire etaient a 14,5 px et la
   recherche du journal a 15 px. On les remonte a 16 px, seulement sur
   petit ecran, pour ne pas alourdir la maquette de bureau. */
@media (max-width: 900px){
  body .field input, body .field textarea,
  body input[type="search"], body input[type="text"],
  body input[type="email"], body input[type="tel"],
  body textarea, body select{ font-size: 16px }
}

/* Le contour de focus etait a #775F73, illisible sur les aplats pourpres
   qui portent desormais la meme famille de teinte. Il devient un double
   trait, qui tient sur clair comme sur fonce. */
:focus-visible{
  outline: 2px solid var(--purple-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.9);
}
.information-strip :focus-visible,
.news-hero :focus-visible,
.btn-dark:focus-visible, .button-primary:focus-visible,
.mobile-actions a:last-child:focus-visible{
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(62,47,61,.9);
}

/* BLEPHAROPLASTIE en capitales mesure 298 px : sur un ecran de 320 ou
   360 px, dans une colonne de 206 a 276 px, le mot debordait et la page
   entiere se mettait a defiler lateralement. */
@media (max-width: 460px){
  body h1, body h2, body h3{ overflow-wrap: break-word; hyphens: auto }
  body .topic-card h3, body .universe-hero h1, body .procedure-hero h1{
    font-size: clamp(24px, 7.4vw, 34px);
  }
}

/* commentaires:debut */
/* Fils de questions repris du site actuel. Lecture seule : pas de formulaire,
   pas d'avatar distant, pas de cookie. */
body .block--comm{padding-top:0}
body .ar-comm{max-width:72ch;margin:clamp(40px,5vw,64px) 0 0;padding-top:30px;
  border-top:1px solid var(--line,#E4DEE3)}
body .ar-comm-titre{font-family:var(--display,"Tenor Sans",system-ui,sans-serif);
  font-weight:400;font-size:clamp(19px,2.2vw,23px);line-height:1.25;margin:0 0 8px;
  color:var(--black,#5A4758);text-transform:none;letter-spacing:0}
body .ar-comm-note{margin:0 0 26px;font-size:12.5px;line-height:1.6;color:var(--muted,#6E6469)}
body .ar-comm-origine{margin:26px 0 12px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted,#6E6469)}
body .ar-comm-origine code{font-size:11px;letter-spacing:.04em;text-transform:none;
  background:none;padding:0;color:var(--black,#5A4758)}
body .comm-fil{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
body .comm-fil--reponses{margin:16px 0 0;padding-left:clamp(14px,2.2vw,26px);gap:16px;
  border-left:1px solid var(--line,#E4DEE3)}
body .comm{margin:0}
body .comm-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 6px}
body .comm-qui{font-size:12.5px;font-weight:500;color:var(--ink,#1E1916)}
body .comm-date{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted,#6E6469)}
body .comm-corps p{margin:0 0 10px;font-size:14px;line-height:1.62;color:var(--ink,#1E1916)}
body .comm-corps p:last-child{margin-bottom:0}
body .comm--praticien>.comm-tete .comm-qui{color:var(--purple-deep,#5A4758)}
body .comm--praticien>.comm-tete .comm-qui::after{content:"réponse du praticien";
  margin-left:9px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;color:var(--muted,#6E6469)}
body .comm--praticien>.comm-corps{border-left:2px solid var(--purple-deep,#5A4758);
  padding-left:clamp(11px,1.6vw,16px)}
@media (max-width:560px){
  body .comm-fil--reponses{padding-left:12px}
  body .comm--praticien>.comm-tete .comm-qui::after{display:block;margin:2px 0 0}
}
/* commentaires:fin */

/* categories:debut */
body .cat-liste{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
body .cat-liste li{margin:0;border-bottom:1px solid var(--line,#E4DEE3)}
body .cat-liste li:first-child{border-top:1px solid var(--line,#E4DEE3)}
body .cat-liste a{display:block;padding:13px 0;font-size:14.5px;line-height:1.5;
  color:var(--ink,#1E1916);text-decoration:none}
body .cat-liste a:hover,body .cat-liste a:focus-visible{color:var(--purple-deep,#5A4758);
  text-decoration:underline;text-underline-offset:3px}
/* categories:fin */

/* 03/09 : rail droit des articles (sommaire + contact). Sur ordinateur le
   corps restait a 76ch a gauche avec toute la droite vide. */
@media (min-width: 1100px){
  body .wrap--article{ display: grid; grid-template-columns: minmax(0, 76ch) 300px; column-gap: clamp(48px, 6vw, 96px); align-items: start }
  body .ar-rail{ position: sticky; top: 150px }
}
body .ar-rail{ display: none }
@media (min-width: 1100px){ body .ar-rail{ display: block } }
body .ar-rail-t, body .ar-rail-cta-t{ font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px }
body .ar-rail-somm ol{ list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line) }
body .ar-rail-somm li a{ display: block; padding: 7px 0 7px 16px; font-size: 14px; line-height: 1.35; color: var(--ink); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px }
body .ar-rail-somm li a:hover, body .ar-rail-somm li a:focus-visible{ border-left-color: var(--black); color: var(--black) }
body .ar-rail-cta{ margin-top: 32px; padding: 22px 22px 24px; background: var(--mauve-bg, #F3EEF1); border-radius: 4px }
body .ar-rail-cta p{ margin: 0 0 14px; font-size: 14.5px; color: var(--ink) }
body .ar-rail-cta .btn{ width: 100%; box-sizing: border-box }
body .ar-rail-tel{ display: block; margin-top: 12px; text-align: center; font-size: 13px; letter-spacing: .1em; color: var(--black); text-decoration: none }

/* 03/09 : passe design des articles, dans le vocabulaire de l'accueil.
   Chapeau plus grand, section « A lire ensuite » en cartes comme les
   conseils de l'accueil, sur fond mauve pale. */
body .ar-lede{ font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink) }
body .ar-suite{ background: var(--mauve-bg, #F3EEF1); padding-block: clamp(56px, 7vw, 96px); margin-top: clamp(40px, 5vw, 72px) }
body .ar-suite .block-head{ max-width: 780px; margin-bottom: clamp(28px, 3vw, 44px) }
body .ar-suite .block-head .eyebrow{ font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--mauve-dark, #5A4758); font-weight: 600; display: block; margin-bottom: 14px }
body .ar-suite .block-head h2{ font-size: clamp(24px, 3vw, 38px); color: var(--black); margin: 0 }
body .ar-suite-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px }
@media (max-width: 860px){ body .ar-suite-grid{ grid-template-columns: 1fr } }
body .ar-suite-card{ background: #fff; border: 1px solid var(--line); padding: 30px; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s }
body .ar-suite-card:hover{ box-shadow: 0 18px 40px rgba(90, 71, 88, .10); transform: translateY(-2px) }
body .ar-suite-card .eyebrow{ font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mauve-dark, #5A4758); font-weight: 600; margin: 0 0 12px }
body .ar-suite-card h3{ font-family: var(--body); font-size: 15.5px; letter-spacing: .02em; line-height: 1.45; margin: 0 0 10px; text-transform: none; font-weight: 600 }
body .ar-suite-card h3 a{ color: var(--black); text-decoration: none }
body .ar-suite-card h3 a::after{ content: ""; position: absolute; inset: 0 }
body .ar-suite-card{ position: relative }
body .ar-suite-card p{ font-size: 13.5px; color: var(--muted); margin: 0 }
body .ar-body figure img, body .ar-body > img{ border-radius: 4px }