/* Clinique F — couche de finition visuelle, octobre 2026.
   ────────────────────────────────────────────────────────────────────
   Le site a trois gabarits. Les fiches de soin ont `soins.css`, qui leur
   appartient en propre. Les deux autres — les pages d'atterrissage et les
   guides du Journal — portaient chacune leur feuille en ligne, recopiée
   page par page : quarante-deux fois la même, puis vingt-six fois une
   autre. Corriger un détail voulait dire soixante-huit modifications.

   Ce fichier est la couche partagée. Il se charge APRÈS la feuille en
   ligne de la page et ne corrige que ce qui le mérite :

   · les défauts réels — liens collés faute d'espacement, flèches de
     `<details>` laissées à l'état natif, cadrages photo extrêmes ;
   · le vocabulaire visuel — mêmes filets, mêmes losanges, mêmes
     numéros en chiffres monospace que sur les fiches de soin ;
   · la largeur — un titre de section qui reste en vue pendant qu'on lit
     la colonne d'à côté, au lieu d'un demi-écran vide.

   La portée passe par `data-gabarit` sur le <body> : les deux gabarits
   emploient les mêmes noms de classe (`.hero`, `.eyebrow`, `.faq`) pour
   des choses différentes, et sans cette clé les règles se mélangeraient.
   Une page qui perdrait l'attribut retrouve simplement son apparence
   d'avant — rien ne casse. */

/* ════════════════════════════════════════════════════════════════════
   1. Ce qui vaut pour les deux gabarits
   ════════════════════════════════════════════════════════════════════ */

body:is([data-gabarit="soin"],[data-gabarit="journal"],[data-gabarit="accueil"]){
  --f-sage:#7f9b8b;
  --f-sage-deep:#567365;
  --f-sage-pale:#eef2ef;
  --f-ink:#1a1814;
  --f-ink-soft:#4e4943;
  --f-line:rgba(26,24,20,.14);
  --f-line-fine:rgba(26,24,20,.08);
  --f-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

body:is([data-gabarit="soin"],[data-gabarit="journal"]) :is(h1,h2,h3){text-wrap:balance}

body[data-gabarit] :focus-visible{outline:2px solid var(--f-sage-deep);outline-offset:3px}

/* Les `<details>` des deux gabarits : plus de triangle natif, un signe
   qui s'ouvre, une ligne qui réagit au survol. */
body:is([data-gabarit="soin"],[data-gabarit="journal"]) details>summary{list-style:none;cursor:pointer}
body:is([data-gabarit="soin"],[data-gabarit="journal"]) details>summary::-webkit-details-marker{display:none}
body:is([data-gabarit="soin"],[data-gabarit="journal"]) details>summary::marker{content:""}

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

/* ════════════════════════════════════════════════════════════════════
   2. Les pages d'atterrissage
   ════════════════════════════════════════════════════════════════════ */

/* ── Entête ─────────────────────────────────────────────────────────
   La photo était cadrée au centre : sur un portrait vertical réduit à
   une bande, le centre tombe sur une joue ou un front. On remonte le
   point de mire et on borde l'image d'un filet, pour qu'elle s'arrête
   franchement au lieu de se perdre dans l'ivoire. */
body[data-gabarit="soin"] .hero-img{position:relative;background:var(--f-sage-pale)}
body[data-gabarit="soin"] .hero-img img{object-position:50% 36%}
body[data-gabarit="soin"] .hero-img::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(26,24,20,.06);
  pointer-events:none;
}

body[data-gabarit="soin"] .hero h1{letter-spacing:-.045em}
body[data-gabarit="soin"] .lede{max-width:46ch}

/* La bande de faits : trois chiffres qui doivent se lire d'un coup
   d'œil. Ils étaient à la taille du texte courant. */
body[data-gabarit="soin"] .fact{padding:1.5rem}
body[data-gabarit="soin"] .fact small{letter-spacing:.14em}
body[data-gabarit="soin"] .fact strong{
  font-size:1.35rem;line-height:1.25;
  font-variant-numeric:tabular-nums;
}

/* ── Sections de lecture ────────────────────────────────────────────
   Le titre tenait la colonne de gauche et la laissait vide sur les trois
   quarts de sa hauteur. Il suit maintenant la lecture. */
@media (min-width:900px){
  body[data-gabarit="soin"] .section-grid{align-items:start}
  body[data-gabarit="soin"] .section-grid>:first-child{
    position:sticky;top:2.4rem;
  }
}

/* Les listes d'arguments reprennent le losange des fiches de soin.
   (Le `::before` est neutralisé par la signature de la page : on passe
   par `::after`, qui est libre.) */
body[data-gabarit="soin"] .benefits li{position:relative;padding-left:1.6rem}
body[data-gabarit="soin"] .benefits li::after{
  content:"◈";position:absolute;left:0;top:1.05rem;
  color:var(--f-sage);font-size:.72rem;line-height:1;
}

/* ── Le déroulement ─────────────────────────────────────────────────
   Trois étapes numérotées : c'est une vraie séquence, le chiffre porte
   donc une information. On lui donne la couleur et la casse des numéros
   d'étape des fiches de soin. */
body[data-gabarit="soin"] .process-list li{min-height:0;padding:1.4rem 1.3rem 1.6rem}
body[data-gabarit="soin"] .process-list b{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
  color:var(--f-sage-deep);margin-bottom:.8rem;
}
body[data-gabarit="soin"] .process-list span{font-size:1.12rem;line-height:1.3}

/* ── Questions fréquentes ───────────────────────────────────────────
   Elles s'affichaient avec le triangle du navigateur et sans séparation.
   Même traitement que sur les fiches : un filet par question, un signe
   à droite. */
body[data-gabarit="soin"] .faq details{
  border-top:1px solid var(--f-line);padding:0;
}
body[data-gabarit="soin"] .faq details:last-child{border-bottom:1px solid var(--f-line)}
body[data-gabarit="soin"] .faq summary{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1.15rem 0;font-weight:500;line-height:1.45;
  transition:color .2s;
}
body[data-gabarit="soin"] .faq summary:hover{color:var(--f-sage-deep)}
body[data-gabarit="soin"] .faq summary::after{
  content:"+";color:var(--f-sage-deep);
  font:400 1.3rem/1 'Cormorant Garamond',serif;
}
body[data-gabarit="soin"] .faq details[open] summary::after{content:"–"}
body[data-gabarit="soin"] .faq details p{padding-bottom:1.2rem;margin-top:.2rem}

/* ── Boutons et appel final ─────────────────────────────────────────── */
body[data-gabarit="soin"] .button{transition:background .25s,color .25s,border-color .25s}
body[data-gabarit="soin"] .button:hover{background:var(--f-ink);border-color:var(--f-ink);color:#fff}
body[data-gabarit="soin"] .button.alt:hover{background:var(--f-ink);color:#fff}
body[data-gabarit="soin"] .cta .button:hover{background:#fff;border-color:#fff;color:var(--f-ink)}

/* La barre du haut : deux liens aux deux bouts, et non collés. */
body[data-gabarit="soin"] .top .wrap{align-items:center}

/* ════════════════════════════════════════════════════════════════════
   3. Les guides du Journal
   ════════════════════════════════════════════════════════════════════ */

/* Le défaut le plus visible du Journal : « ← Retour au BlogClinique F by
   Flavia » en haut, « Tous les articlesAccueilPoser une question » en
   bas. Les deux barres sont des suites de liens sans mise en forme —
   quatre pages sur vingt-six en avaient une, par un bloc ajouté à la
   main. Elle vaut pour toutes. */
body[data-gabarit="journal"] .journal-nav__inner,
body[data-gabarit="journal"] .journal-footer__inner{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.8rem 2rem;
}
body[data-gabarit="journal"] .journal-footer__inner nav{
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
}
body[data-gabarit="journal"] .journal-nav a,
body[data-gabarit="journal"] .journal-footer a{
  font:500 .62rem/1.6 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--f-sage-deep);text-decoration:none;transition:color .2s;
}
body[data-gabarit="journal"] .journal-nav a:hover,
body[data-gabarit="journal"] .journal-footer a:hover{
  color:var(--f-ink);text-decoration:underline;text-underline-offset:4px;
}

body[data-gabarit="journal"] .journal-footer{
  margin-top:0;padding:2.4rem 0 2.8rem;
  border-top:1px solid var(--f-line);background:var(--f-sage-pale);
}
body[data-gabarit="journal"] .journal-footer__eyebrow{
  display:block;font:500 .59rem/1.6 var(--f-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--f-sage-deep);
}
body[data-gabarit="journal"] .journal-footer p{margin:.35rem 0 0;color:var(--f-ink-soft);font-size:.92rem}

/* ── Le corps de l'article ──────────────────────────────────────────
   Un guide se lit d'un trait : on lui donne un rythme de titres plus
   net et un filet de sauge devant chaque section, qui sert de repère
   au défilement. */
body[data-gabarit="journal"] .article>h2{
  position:relative;padding-top:1.9rem;margin-top:3.2rem;
  border-top:1px solid var(--f-line-fine);
  font-size:clamp(1.9rem,3.4vw,2.4rem);line-height:1.02;
}
body[data-gabarit="journal"] .article>h2::before{
  content:"";position:absolute;top:-1px;left:0;width:3.2rem;height:1px;
  background:var(--f-sage-deep);
}
/* Le renvoi vers la page pilier ouvre l'article : plus petit que le
   corps du texte, sans filet — le premier titre en pose déjà un. */
body[data-gabarit="journal"] .article>p:first-child{
  color:var(--f-ink-soft);font-size:.95rem;margin-bottom:0;
}

/* L'entête du guide : le dégradé diagonal partait d'un coin et finissait
   dans un autre sans raison. Un halo posé en haut à droite, comme sur
   les fiches de soin. */
body[data-gabarit="journal"] .hero{
  background:
    radial-gradient(116% 88% at 84% -8%,rgba(127,155,139,.2),transparent 60%),
    #f5f2ed;
  border-bottom:1px solid var(--f-line-fine);
}
body[data-gabarit="journal"] .intro{color:var(--f-ink-soft);line-height:1.72}

/* ── Renvois et suggestions ─────────────────────────────────────────── */
body[data-gabarit="journal"] .links a,
body[data-gabarit="journal"] .recommended a{
  transition:background .22s,border-color .22s,transform .22s;
}
body[data-gabarit="journal"] .links a:hover,
body[data-gabarit="journal"] .recommended a:hover{
  border-color:var(--f-sage);transform:translateX(2px);
}
body[data-gabarit="journal"] .recommended a b{
  color:var(--f-sage-deep);font-weight:400;transition:transform .22s;
}
body[data-gabarit="journal"] .recommended a:hover b{transform:translateX(3px);display:inline-block}
body[data-gabarit="journal"] .note{border-left-width:3px;background:var(--f-sage-pale)}

body[data-gabarit="journal"] .guide-faq summary{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.4rem;
  transition:color .2s;
}
body[data-gabarit="journal"] .guide-faq summary:hover{color:var(--f-sage-deep)}
body[data-gabarit="journal"] .guide-faq summary::after{float:none}

/* ════════════════════════════════════════════════════════════════════
   4. L'accueil
   ════════════════════════════════════════════════════════════════════
   L'accueil a sa propre feuille en ligne et cinq scripts qui la
   retouchent : on n'y ajoute que ce qui corrige un défaut visible.

   Sur la page Tarifs, le badge « Aussi à Mont-Saint-Hilaire » suivait le
   nom du soin en `inline-block` avec une marge haute. Sur un nom long il
   partait dans la colonne des prix et chevauchait la ligne suivante.
   Le nom et son badge forment maintenant un bloc souple : le badge passe
   à la ligne proprement quand il n'y a plus la place. */
body[data-gabarit="accueil"] #p-tarifs .pn{
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;
}
body[data-gabarit="accueil"] #p-tarifs .pmsh{
  margin-top:0;
  background:var(--f-sage-pale);
  border-color:rgba(127,155,139,.55);
}
body[data-gabarit="accueil"] #p-tarifs .prow{align-items:center}
body[data-gabarit="accueil"] #p-tarifs .pv{font-variant-numeric:tabular-nums}

/* Un mot plus large que le téléphone — « Micropigmentation » à 3,45 rem —
   débordait de 34 px et faisait glisser toute la page latéralement. Le
   titre se césure maintenant, et sa taille suit la largeur réelle. */
@media (max-width:760px){
  body[data-gabarit="soin"] .hero h1{
    font-size:clamp(2.3rem,10.5vw,3.45rem);
    hyphens:auto;overflow-wrap:break-word;
  }
}

/* ════════════════════════════════════════════════════════════════════
   5. Les bandes photographiques
   ════════════════════════════════════════════════════════════════════
   Une image d'ambiance par famille, posée en pleine largeur sous
   l'entête. Elles sont décoratives — portées par un pseudo-élément,
   donc absentes du texte lu par un lecteur d'écran — et choisies pour
   montrer la salle, le geste et la lumière. Jamais un avant/après,
   jamais un résultat : ces pages décrivent des actes et la photo ne
   doit rien promettre.

   La table sert deux gabarits : les fiches de soin (`soins.css` pose la
   géométrie) et les guides du Journal (ci-dessous). Les fichiers sont
   fabriqués par `scratchpad/bandes.py`, en ~3,6:1 et moins de 60 Ko. */
body[data-famille="visage"]    {--bande:url(/assets/bande-visage.jpg)}
body[data-famille="epilation"] {--bande:url(/assets/bande-epilation.jpg);--bande-pos:72% 50%}
body[data-famille="avances"]   {--bande:url(/assets/bande-avances.jpg)}
body[data-famille="signature"] {--bande:url(/assets/bande-signature.jpg)}
body[data-famille="rituels"]   {--bande:url(/assets/bande-rituels.jpg)}
body[data-famille="corps"]     {--bande:url(/assets/bande-corps.jpg);--bande-pos:58% 42%}
body[data-famille="capillaire"]{--bande:url(/assets/bande-capillaire.jpg);--bande-pos:50% 42%}
body[data-famille="catalogue"] {--bande:url(/assets/bande-catalogue.jpg);--bande-pos:58% 45%}
body[data-famille="msh"]       {--bande:url(/assets/bande-msh.jpg)}

/* L'entête du guide perd sa marge basse : c'est la bande qui ferme le
   bloc, et un reste de dégradé sous la photo se verrait. */
body[data-gabarit="journal"][data-famille] .hero{padding-bottom:0}
body[data-gabarit="journal"][data-famille] .hero::after{
  content:"";display:block;
  height:clamp(150px,19vw,260px);
  width:100vw;margin:clamp(2.4rem,4vw,3.6rem) 0 0 calc(50% - 50vw);
  background:var(--bande) var(--bande-pos,center 50%)/cover no-repeat,var(--f-sage-pale);
  border-top:1px solid var(--f-line-fine);
}
@media (max-width:640px){
  body[data-gabarit="journal"][data-famille] .hero::after{height:clamp(130px,34vw,190px)}
}

/* ════════════════════════════════════════════════════════════════════
   6. Le bouton de pause des films
   ════════════════════════════════════════════════════════════════════
   Posé par `video-commandes.js` sur chaque <video autoplay>. La règle
   n'est pas préfixée par `data-gabarit` — à dessein : la classe
   `.cf-video-pause` n'existe que là où le script l'a créée, et les
   trois pages concernées (l'accueil et les deux Mont-Saint-Hilaire)
   n'ont pas le même gabarit.

   Discret au repos, lisible sur n'importe quelle image : fond sombre
   translucide, flou derrière, et une cible d'au moins 44 px — la taille
   que WCAG 2.5.5 demande pour un doigt. */
.cf-video-pause{
  position:absolute;right:.7rem;bottom:.7rem;z-index:3;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.45);border-radius:50%;
  background:rgba(26,24,20,.52);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;
  cursor:pointer;opacity:.75;
  transition:opacity .2s,background .2s;
}
/* Le signe est dessiné, pas écrit : à 44 px, « ▶ » et « ‖ » se rendent
   différemment d'une police à l'autre, et parfois en émoji couleur. */
.cf-video-signe{display:block;width:12px;height:13px;position:relative}
.cf-video-signe::before{                     /* triangle de lecture */
  content:"";position:absolute;top:0;left:2px;
  border:6.5px solid transparent;border-left:11px solid currentColor;border-right:0;
}
.cf-video-pause.en-lecture .cf-video-signe::before{   /* deux barres de pause */
  border:0;left:0;width:4px;height:13px;background:currentColor;
}
.cf-video-pause.en-lecture .cf-video-signe::after{
  content:"";position:absolute;top:0;right:0;width:4px;height:13px;background:currentColor;
}
.cf-video-pause:hover,
.cf-video-pause:focus-visible{opacity:1;background:rgba(26,24,20,.78)}
.cf-video-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:640px){
  .cf-video-pause{right:.5rem;bottom:.5rem}
}

/* ════════════════════════════════════════════════════════════════════
   7. Des cibles qu'on peut viser au doigt
   ════════════════════════════════════════════════════════════════════
   Les liens des barres de navigation et des pieds de page sont écrits en
   petites capitales monospace : larges, mais hauts de 10 à 16 px. Au
   doigt, c'est trop petit — le critère WCAG 2.5.8 demande 24 px dans les
   deux sens, et une barre de liens serrés n'a pas droit à l'exception
   d'espacement.

   On agrandit la zone sensible, pas le texte : une marge intérieure
   verticale ne change rien à la typographie et porte la cible à 25 px.
   `pointer:coarse` vise les écrans tactiles quelle que soit leur largeur
   — une tablette en paysage a le même doigt qu'un téléphone. */
@media (pointer:coarse),(max-width:760px){
  body[data-gabarit="soin"] .top a,
  body[data-gabarit="soin"] .footer a,
  body[data-gabarit="journal"] .journal-nav a,
  body[data-gabarit="journal"] .journal-footer a{
    display:inline-block;padding-block:7px;
  }
}

/* Dans les tableaux de tarifs des pages piliers, le nom du soin est un
   lien de 17 px de haut dans sa cellule. Même raison, même remède. */
@media (pointer:coarse),(max-width:760px){
  body[data-gabarit="soin"] .tarifs-zone td a,
  body[data-gabarit="soin"] table td a{display:inline-block;padding-block:4px}
}

/* ════════════════════════════════════════════════════════════════════
   8. « Quelle est votre préoccupation ? » au téléphone
   ════════════════════════════════════════════════════════════════════
   Onze pastilles empilées sur une colonne, 58 px chacune : le bloc
   mesurait 946 px sur un écran de 844. Plus d'un écran entier pour un
   aiguilleur, avant même d'avoir vu un soin.

   Deux colonnes et des pastilles à la hauteur de leur texte : le même
   contenu, moitié moins de défilement. La cible reste bien au-dessus
   des 24 px du critère 2.5.8. */
@media (max-width:820px){
  body[data-gabarit="accueil"] #p-esth .concern-pills{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.5rem!important;
    max-width:100%!important;
  }
  body[data-gabarit="accueil"] #p-esth .concern-pills .pill{
    min-height:0!important;
    padding:.66rem .7rem!important;
    font-size:.79rem!important;
    line-height:1.25!important;
    align-items:center;
    gap:.45rem!important;
    /* Sans cela le libellé sort de la pastille par la droite : les
       pastilles sont en `white-space:nowrap`, réglé pour une colonne
       pleine largeur. Sur deux colonnes, il doit passer à la ligne. */
    white-space:normal!important;
  }
  body[data-gabarit="accueil"] #p-esth .concern-pills .pill>span{white-space:normal!important}
  body[data-gabarit="accueil"] #p-esth .concern-pills .pill .pill-num{flex:0 0 auto}
  body[data-gabarit="accueil"] #p-esth .concern-pills .pill-num{font-size:.52rem!important}
}