/* prestations.css : la famille « prestations » dans le système Arche.
   Hub /prestations/, quinze fiches (tpl/prestation.php) et pages croisées
   commune × prestation (tpl/commune-prestation.php). Toutes les classes
   ci-dessous ne sont posées que par ces gabarits.

   La mise en page du héros (texte à gauche, baie cintrée à droite) est dans
   core.css, critique : cette feuille différée n'y ajoute que des détails qui
   ne déplacent rien (moulure, rameau, prix), pour qu'aucune mise en page ne
   saute à son arrivée.

   Sans JavaScript, chaque section est dans son état final : rien n'est
   masqué ici en attendant une animation. Seules les vues de réserve des
   baies collantes (data-vues) sont transparentes, et la première vue est
   toujours visible. */

@layer components {
  /* ======================================================================
     Le héros : la moulure de pierre suit la baie à 14 px (le geste du héros
     de l'accueil), le rameau d'olivier en filigrane derrière le titre.
     ====================================================================== */
  .fiche-hero__panneau::before { content: ""; position: absolute; inset: -14px -14px 0; border: 1px solid var(--pierre); border-bottom: 0; border-radius: var(--cintre); pointer-events: none; }
  .rameau--fiche { top: -10%; left: -7%; width: min(42vw, 560px); height: min(42vw, 560px); transform: rotate(-8deg); }
  .fiche-hero > h1, .fiche-hero__surtitre, .fiche-hero__panneau, .fiche-hero__intro { position: relative; z-index: 1; }
  /* Le titre est déjà coupé en lignes par le PHP. Si une ligne doit encore
     se replier (colonne étroite, police de secours), ses deux moitiés
     s'équilibrent au lieu de laisser un mot seul. */
  .fiche-hero__titre .ligne { text-wrap: pretty; }
  .fiche-hero__titre .ligne__int { text-wrap: balance; }
  /* Le surtitre passe AU-DESSUS du titre (revue : lu sous le H1, il passait
     pour un sous-titre). Sur bureau, la grille de core.css a deux rangées
     (titre, intro) : on en ajoute une en tête, le panneau couvre les trois.
     Sur téléphone, l'ordre du source suffit : surtitre, titre, baie, texte. */
  .fiche-hero > .fiche-hero__surtitre { margin-bottom: .9rem; }
  @media (min-width: 900px) {
    .fiche-hero { grid-template-rows: auto auto 1fr; }
    .fiche-hero > .fiche-hero__surtitre { grid-column: 1; grid-row: 1; align-self: end; padding-top: clamp(1rem, 5vh, 4rem); }
    .fiche-hero > h1 { grid-row: 2; align-self: start; padding-top: 0; }
    .fiche-hero > .fiche-hero__intro { grid-row: 3; }
    .fiche-hero > .fiche-hero__panneau { grid-row: 1 / span 3; }
  }
  .fiche-hero__chapo { max-width: 32em; }
  .fiche-hero__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; padding-top: var(--esp-m); border-top: var(--filet); max-width: 30em; }
  .fiche-hero__prix > small { font: italic 1.2rem / 1 var(--serif); color: var(--argile); }
  .fiche-hero__prix > .u-num { font: 300 var(--fs-prix) / 1 var(--sans); color: var(--encre); }
  .fiche-hero__devis { font: italic 1.6rem / 1 var(--serif); color: var(--argile); }
  .fiche-hero__prix-note { flex-basis: 100%; font-size: var(--fs-petit); color: var(--encre-doux); }
  /* Les familles du hub : des pilules fond lin, 44 px, jamais des liens nus. */
  .hub-hero__familles { display: flex; flex-wrap: wrap; gap: 10px; max-width: none; }
  .hub-hero__familles li { display: flex; max-width: none; }
  .hub-hero__familles a { display: inline-flex; align-items: center; min-height: var(--cible); padding: .5rem 1.15rem; border-radius: var(--pill); background: var(--lin); font-size: .92rem; color: var(--encre); transition: box-shadow var(--dur-survol) var(--doux), color var(--dur-survol) var(--doux); }
  .hub-hero__familles a:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px var(--argile); color: var(--argile); }
  @media (max-width: 899px) {
    /* Sur téléphone, titre, baie, chapo et bouton tiennent dans le premier
       écran, y compris avec les barres de Safari (svh) : la baie se fait un
       peu plus basse et les espaces du texte se resserrent. */
    .fiche-hero .fiche-hero__panneau { height: clamp(220px, 30svh, 360px); }
    .fiche-hero .fiche-hero__intro { margin-top: 1rem; }
    .fiche-hero__intro > * + * { margin-block-start: 1rem; }
    .fiche-hero > .fiche-hero__surtitre { margin-bottom: .6rem; }
    .fiche-hero .fiche-hero__chapo { font-size: 1rem; line-height: 1.6; }
    .fiche-hero__panneau::before { inset: -9px -9px 0; }
    .rameau--fiche { top: -4%; left: -34%; width: 96vw; height: 96vw; }
    .hub-hero__familles { display: none; }
  }
  /* Tablette : une baie pleine largeur deviendrait un dôme écrasé ; elle
     garde des proportions d'arche. Calée à gauche, elle laissait la moitié
     droite de l'écran vide à 768 (revue) : la tête du hub ET celle des
     fiches se centrent, texte, baie et boutons, sur 560 px au plus, et les
     baies du nuancier et du bloc local aussi. Les deux têtes de la famille
     se ressemblent ainsi à la même largeur. */
  @media (min-width: 600px) and (max-width: 899px) {
    .fiche-hero { justify-items: center; text-align: center; }
    .fiche-hero > :is(h1, .fiche-hero__surtitre, .fiche-hero__intro) { width: 100%; max-width: 560px; }
    .fiche-hero > .fiche-hero__surtitre { justify-content: center; }
    .fiche-hero .fiche-hero__panneau { justify-self: center; width: min(100%, 560px); height: clamp(300px, 40svh, 440px); }
    .fiche-hero :is(.fiche-hero__chapo, .fiche-hero__prix) { margin-inline: auto; }
    .fiche-hero :is(.fiche-hero__liens, .fiche-hero__prix, .hub-hero__familles) { justify-content: center; }
    :is(.fiche-nuancier__baie, .fiche-local__baie) { justify-self: center; width: min(100%, 560px); }
  }

  /* ======================================================================
     Rythme et grille des sections : un titre à gauche (collant sur bureau),
     le corps à droite ; du grand air entre deux sections.
     ====================================================================== */
  .fiche-section { position: relative; padding-block: var(--section-y); overflow-x: clip; }
  .fiche-reperes { padding-block: var(--section-y-s) 0; }
  .fiche-reperes + .fiche-section { padding-top: var(--section-y-s); }
  .fiche-grille { display: grid; gap: var(--esp-xl) var(--gouttiere); }
  .fiche-grille__tete > * + * { margin-block-start: var(--esp-m); }
  .fiche-grille__tete > .surtitre + h2 { margin-block-start: 0; }
  .fiche-grille__tete h2 { max-width: 12em; }
  .fiche-grille__corps { min-width: 0; }
  .fiche-grille__corps.faq-zone { max-width: none; }
  @media (min-width: 900px) {
    .fiche-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
    .fiche-grille__tete { position: sticky; top: calc(var(--h-entete) + 3rem); }
  }

  /* ---- Le résultat : la liste en feuilles d'olivier, en serif ---- */
  .rameau--retire { right: -8%; top: 4%; width: min(36vw, 420px); height: min(36vw, 420px); transform: scaleX(-1) rotate(10deg); opacity: .8; }
  .fiche-retire .wrap { position: relative; z-index: 1; }
  .fiche-retire__liste { border-top: var(--filet); }
  .fiche-retire__surfaces-titre { margin-top: var(--esp-l); font: italic 1.2rem / 1.3 var(--serif); color: var(--argile); }
  .fiche-retire__surfaces { display: grid; gap: .45rem; margin-top: .8rem; padding: 0; list-style: none; }
  .fiche-retire__surfaces li { position: relative; padding-left: 1.2rem; color: var(--encre-doux); }
  .fiche-retire__surfaces li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--argile-doux); }
  .fiche-retire__liste li { position: relative; padding: 1.2rem 0 1.2rem 2.1rem; border-bottom: var(--filet); font: 400 clamp(1.25rem, 1.05rem + .5vw, 1.6rem) / 1.35 var(--serif); max-width: none; }
  .fiche-retire__liste li::before { content: ""; position: absolute; left: 2px; top: 1.65rem; width: 9px; height: 16px; border-radius: 0 100% 0 100%; background: var(--olive); opacity: .7; transform: rotate(28deg); }
  @media (max-width: 899px) { .rameau--retire { right: -30%; width: 80vw; height: 80vw; } }

  /* ---- Le protocole : une petite arche de pierre par étape, sur un fil ---- */
  .fiche-protocole { position: relative; }
  .fiche-protocole__liste { display: grid; }
  .fiche-protocole__fil { position: absolute; top: 24px; bottom: 24px; left: 20px; width: 1px; background: linear-gradient(180deg, var(--pierre), rgba(205, 184, 149, 0)); transform-origin: top; }
  .fiche-protocole__etape { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 1.6rem; align-items: start; padding-block: 0 2.6rem; max-width: 46rem; }
  .fiche-protocole__etape:last-child { padding-bottom: 0; }
  .fiche-protocole__etape > div { padding-top: .55rem; }
  .fiche-protocole__etape > div > * + * { margin-block-start: .5rem; }
  .fiche-protocole__etape h3 { font-size: var(--fs-h4); }
  .fiche-protocole__etape p { color: var(--encre-doux); max-width: none; }
  /* Le numéro : petit, dans une arche, jamais un grand chiffre sur le titre. */
  .fiche-protocole__num, .hub-reals__num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 48px; padding-top: 6px; border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; background: var(--chaux-clair); font-size: .95rem; color: var(--argile); }
  .surface--travertin .fiche-protocole__num { background: var(--chaux); }

  /* ======================================================================
     Le nuancier : le geste de la famille. Une baie collante (bureau) dont la
     texture change avec la matière qui passe au milieu de l'écran ; à côté,
     le registre des matières, chaque ligne complète en elle-même.
     ====================================================================== */
  .fiche-nuancier__tete { display: grid; gap: var(--esp-m) var(--gouttiere); align-items: end; margin-bottom: var(--esp-xl); }
  .fiche-nuancier__tete .lead { margin: 0; }
  .fiche-nuancier__grille { display: grid; gap: var(--esp-l) clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .fiche-nuancier__baie { position: relative; }
  .fiche-nuancier__baie::before { content: ""; position: absolute; inset: -12px -12px 0; border: 1px solid var(--pierre); border-bottom: 0; border-radius: var(--cintre); pointer-events: none; }
  .fiche-nuancier__arche { height: clamp(280px, 84vw, 460px); box-shadow: var(--ombre-baie); }
  /* Les vues de réserve : posées l'une sur l'autre, transparentes tant que
     le défilement ne les appelle pas. La première porte .is-actif dans le
     HTML : sans JS, c'est elle qu'on voit. */
  .fiche-nuancier[data-vues] .fiche-nuancier__arche img { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity 1.6s var(--doux), transform 2.4s var(--doux); }
  .fiche-nuancier[data-vues] .fiche-nuancier__arche img.is-actif { opacity: 1; transform: none; }
  .fiche-nuancier__liste { border-top: var(--filet); }
  .fiche-nuancier__ligne { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .5rem 1.4rem; align-items: start; padding-block: 1.6rem; border-bottom: var(--filet); max-width: none; }
  .fiche-nuancier__pastille { grid-row: 1 / span 2; width: 56px; height: 68px; border-radius: var(--cintre); background: var(--sable) center / cover no-repeat; box-shadow: var(--ombre-douce); }
  /* Une matière sans texture fidèle : une pastille de chaux et de lin, la
     petite arche d'argile au centre. Plus de numéro : seul entre deux
     vignettes, il passait pour une image manquante (revue). */
  .fiche-nuancier__pastille--vide { background: var(--arc-icone) center 56% / 15px 18px no-repeat, linear-gradient(180deg, var(--chaux-clair), var(--lin)); box-shadow: inset 0 0 0 1px var(--pierre); }
  .fiche-nuancier__nom { font-size: var(--fs-h4); line-height: 1.2; padding-top: .3rem; }
  .fiche-nuancier__valeurs { display: grid; gap: .55rem 1.6rem; margin: .4rem 0 0; }
  .fiche-nuancier__valeurs > div { display: grid; gap: .1rem; }
  .fiche-nuancier__valeurs dt { font: italic 1.02rem / 1.3 var(--serif); color: var(--argile); }
  .fiche-nuancier__valeurs dd { margin: 0; font-size: var(--fs-petit); line-height: 1.5; color: var(--encre); }
  .fiche-nuancier__sechage dd .u-num { font-size: 1.05rem; }
  @media (min-width: 720px) {
    .fiche-nuancier__valeurs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr); }
  }
  /* Sans photo fidèle (haute pression), pas de baie : le registre prend
     toute la largeur, en deux colonnes sur bureau comme « Le résultat ». */
  @media (min-width: 900px) {
    .fiche-nuancier__grille--seule .fiche-nuancier__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 5rem); border-top: 0; }
    .fiche-nuancier__grille--seule .fiche-nuancier__ligne { border-top: var(--filet); border-bottom: 0; }
    .fiche-nuancier__grille--seule .fiche-nuancier__valeurs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
    .fiche-nuancier__grille--seule .fiche-nuancier__sechage { grid-column: 1 / -1; }
  }
  @media (min-width: 900px) {
    .fiche-nuancier__tete { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .fiche-nuancier__grille:not(.fiche-nuancier__grille--seule) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .fiche-nuancier__baie { position: sticky; top: calc(var(--h-entete) + 5vh); }
    .fiche-nuancier__arche { height: min(70svh, 620px); }
    /* Chaque matière prend le temps d'être lue : la baie a le temps de changer. */
    .fiche-nuancier[data-vues] .fiche-nuancier__ligne { min-height: 11.5rem; align-content: center; }
  }

  /* ======================================================================
     Les prix : le repère en Jost léger, la grille dans un encadré d'enduit.
     ====================================================================== */
  .fiche-prix__repere { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; max-width: none; }
  .fiche-prix__repere small { font: italic 1.3rem / 1 var(--serif); color: var(--argile); }
  .fiche-prix__repere > .u-num { font: 300 var(--fs-repere) / 1 var(--sans); color: var(--argile); }
  .fiche-prix__repere > span:not(.u-num) { flex-basis: 100%; font: italic 1.15rem / 1.3 var(--serif); color: var(--encre-doux); }
  .fiche-prix__repere--devis em { font: italic 2.2rem / 1 var(--serif); color: var(--argile); }
  .fiche-prix__actions { margin-top: var(--esp-l); }
  .fiche-prix__panneau { padding: clamp(1.5rem, 3vw, 2.75rem); }
  .fiche-prix__lignes { border-top: var(--filet); }
  .fiche-prix__lignes li { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: var(--esp-m); align-items: baseline; padding-block: .95rem; border-bottom: var(--filet); max-width: none; }
  .fiche-prix__lignes li > span:first-child { color: var(--encre); }
  .fiche-prix__montant { text-align: right; }
  .fiche-prix__montant .u-num { font-size: 1.1rem; white-space: nowrap; }
  .fiche-prix__devis { font: italic 1.15rem / 1.2 var(--serif); color: var(--argile); }
  .fiche-prix__note { font-size: var(--fs-petit); color: var(--encre-doux); max-width: none; }
  .fiche-prix__note strong { font-weight: var(--fw-appui); color: var(--encre); }
  .surface--travertin .fiche-prix__panneau { background: var(--chaux-clair); }
  .fiche-credit { padding-bottom: var(--section-y-s); }
  .fiche-credit .credit { margin: 0; }

  /* ======================================================================
     Le séchage : la phrase posée sous une arche de pierre, sur l'enduit.
     ====================================================================== */
  .fiche-sechage { overflow: clip; }
  .fiche-sechage__ombre { z-index: 0; }
  .fiche-sechage__corps { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
  .fiche-sechage__corps .surtitre { justify-content: center; }
  .fiche-sechage__titre { max-width: 16em; }
  .fiche-sechage__arche { position: relative; width: min(100%, 50rem); margin-top: var(--esp-xl); padding: clamp(5.5rem, 10vw, 9rem) clamp(1.25rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); border: 1px solid var(--pierre); border-bottom: 0; border-radius: var(--anse); background: linear-gradient(180deg, rgba(250, 246, 238, .7), rgba(250, 246, 238, 0) 85%); }
  .fiche-sechage__arche::before { content: ""; position: absolute; top: clamp(2.2rem, 4vw, 3.4rem); left: 50%; width: 15px; height: 18px; margin-left: -7.5px; background: var(--arc-icone) center / contain no-repeat; }
  .fiche-sechage__texte { margin-inline: auto; font: italic 400 clamp(1.35rem, 1.05rem + 1vw, 2.05rem) / 1.4 var(--serif); color: var(--encre); max-width: 30ch; }
  .fiche-sechage__texte .u-num { font-style: normal; }

  /* ---- En toute honnêteté : deux colonnes sur le lin ---- */
  .fiche-diy__colonnes { display: grid; gap: var(--esp-xl) clamp(2rem, 5vw, 4rem); }
  @media (min-width: 720px) { .fiche-diy__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .fiche-diy__col ul { list-style: none; margin: 0; padding: 0; }
  .fiche-diy__col h3 { padding-bottom: var(--esp-s); border-bottom: var(--filet-plein); font-size: var(--fs-h4); }
  .fiche-diy__col li { position: relative; padding: 1rem 0 1rem 2rem; border-bottom: var(--filet); color: var(--encre); max-width: none; }
  .fiche-diy__col li::before { content: ""; position: absolute; left: 2px; top: 1.45rem; }
  .fiche-diy__col--ok li::before { width: 9px; height: 15px; border-radius: 0 100% 0 100%; background: var(--olive); opacity: .75; transform: rotate(28deg); }
  .fiche-diy__col--non li::before { width: 12px; height: 1px; top: 1.75rem; background: var(--argile); }

  /* ======================================================================
     Nos communes : une grille de niches basses, sans épinglage. La bande
     horizontale épinglée retenait l'écran sur 2 600 px pour des cartes
     presque vides (revue). Chaque niche est une pilule fond lin de 64 px au
     moins : le nom, puis le délai et la distance. Un nom composé ne se coupe
     jamais au trait d'union (nom_lie) ; un nom long passe sur deux lignes
     sans repousser le délai, qui reste dessous.
     ====================================================================== */
  .fiche-communes { padding-block: var(--section-y) var(--section-y-s); }
  .fiche-communes__tete { display: grid; gap: var(--esp-l) var(--gouttiere); align-items: end; }
  .fiche-communes__tete .surtitre + h2 { margin-top: 0; }
  .fiche-communes__tete p:not(.surtitre) { margin-top: var(--esp-m); font-size: var(--fs-lead); color: var(--encre-doux); max-width: var(--mesure-lead); }
  .fiche-communes__cote { max-width: 34rem; }
  @media (min-width: 900px) { .fiche-communes__tete { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .fiche-communes__cote { justify-self: end; width: 100%; } }
  @media (max-width: 899px) { .fiche-communes__cote { display: none; } }
  .fiche-communes__bande { margin-top: var(--esp-xl); }
  .fiche-communes__piste { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 12px; padding-inline: var(--marge); }
  .fiche-communes__piste li { display: flex; max-width: none; }
  /* position: relative : le texte d'ancre masqué (.visually-hidden, en
     position absolue) se place dans la niche. Sans elle, une fois la
     cascade finie (GSAP retire le transform des <li>), il se plaçait par
     rapport à la page, hors de la bande défilante, et élargissait la page
     mobile à 944 px (revue, bloquant). */
  .fiche-communes__escale { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .15rem; width: 100%; min-height: 64px; padding: .7rem 1.5rem; border-radius: var(--pill); background: var(--lin); transition: box-shadow var(--dur-survol) var(--doux), background-color var(--dur-survol) var(--doux); }
  .fiche-communes__escale:is(:hover, :focus-visible) { background: var(--chaux-clair); box-shadow: inset 0 0 0 1px var(--argile); }
  /* En bloc, jamais en flex : les morceaux insécables de nom_lie() gardent leurs espaces. */
  .fiche-communes__nom { display: block; font: 400 1.2rem / 1.2 var(--serif); color: var(--encre); transition: color var(--dur-survol) var(--doux); }
  .fiche-communes__escale:is(:hover, :focus-visible) .fiche-communes__nom { color: var(--argile); }
  .fiche-communes__meta { font-size: var(--fs-petit); line-height: 1.35; color: var(--encre-doux); }
  .fiche-communes__meta .u-num { color: var(--encre); }
  .fiche-communes__toutes { margin-top: var(--esp-l); }
  /* La bande se termine déjà par un demi-vide de section : la FAQ qui suit
     n'en rajoute pas un entier (même fond, 400 px de vide à 1 440). */
  .fiche-communes + .fiche-questions { padding-top: var(--section-y-s); }
  @media (min-width: 1200px) { .fiche-communes__piste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  /* Téléphone : trois rangées qui défilent au doigt, la colonne suivante
     dépasse du bord pour montrer qu'il y a une suite. */
  @media (max-width: 599px) {
    .fiche-communes__bande { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); scrollbar-width: none; }
    .fiche-communes__bande::-webkit-scrollbar { display: none; }
    .fiche-communes__piste { grid-template-columns: none; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: 74vw; width: max-content; padding-bottom: .4rem; }
    .fiche-communes__piste li { scroll-snap-align: start; }
  }

  /* ======================================================================
     Page croisée commune × prestation : sur place, texte et anse de panier.
     ====================================================================== */
  .fiche-local__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 6vw, 7rem); align-items: center; }
  .fiche-local > * + * { margin-block-start: var(--esp-m); }
  .fiche-local > .surtitre + h2 { margin-block-start: 0; }
  /* Le paragraphe garde son flux de texte : le lien qu'il contient n'est
     pas une rangée de pilules (core.css met en flex un p qui a un .lien). */
  .fiche-local__texte p { display: block; }
  .fiche-local__texte > * + * { margin-block-start: var(--esp-m); }
  .fiche-local__texte p:first-child { font-size: var(--fs-lead); color: var(--encre); max-width: var(--mesure-lead); }
  .fiche-local__baie { height: clamp(300px, 86vw, 440px); box-shadow: var(--ombre-baie); }
  .fiche-local__baie picture { inset: -6% 0; }
  @media (min-width: 900px) {
    .fiche-local__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .fiche-local__baie { height: min(64svh, 560px); }
  }
  .fiche-autres__liens { margin-top: var(--esp-l); }
  /* Deux sections de même fond qui se suivent : un seul grand vide entre elles. */
  .fiche-questions + .fiche-autres { padding-top: var(--section-y-s); }
  /* La ligne entière est cliquable : le titre ne glisse pas (une
     transformation réduirait la zone cliquable au seul titre), la petite
     baie se soulève à sa place, le titre passe en argile et le rond de fin
     de ligne se remplit de lin. */
  :is(.fiche-autres, .hub-famille) .registre__ligne:is(:hover, :focus-within) .registre__titre { transform: none; color: var(--argile); }
  :is(.fiche-autres, .hub-famille) .registre__fibre { transition: translate var(--dur-survol) var(--doux); }
  :is(.fiche-autres, .hub-famille) .registre__ligne:is(:hover, :focus-within) .registre__fibre { translate: 0 -4px; }
  /* Les vignettes : un filet de pierre les détache du fond (le surmatelas
     blanc et la literie pâle se perdaient sur le lin, revue). */
  :is(.fiche-autres, .hub-famille) .registre__fibre { box-shadow: inset 0 0 0 1px var(--pierre), var(--ombre-douce); }
  /* Le signe du lien : un rond de 44 px à contour argile et sa flèche, dans
     le vocabulaire des « + » de la FAQ. Sans lui, ces lignes, la navigation
     principale vers les fiches, se lisaient comme une liste de texte. */
  .registre__aller { flex: none; width: var(--cible); height: var(--cible); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--argile); background: var(--fleche) center / 16px auto no-repeat; transition: background-color var(--dur-survol) var(--doux), translate var(--dur-survol) var(--doux); }
  .registre__ligne:is(:hover, :focus-within) .registre__aller { background-color: var(--lin); translate: 4px 0; }
  .fiche-autres .registre__ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
  @media (min-width: 900px) {
    .hub-famille .registre__ligne { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  }
  /* Téléphone et tablette : le rond se place à droite du titre, la petite
     baie à gauche, le prix sous le texte. */
  @media (max-width: 899px) {
    .hub-famille .registre__ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
    .hub-famille .registre__ligne > .registre__fibre { grid-row: 1 / span 2; align-self: start; }
    .hub-famille .registre__ligne > div { grid-column: 2; grid-row: 1; }
    .hub-famille .registre__chiffres { grid-column: 2 / -1; grid-row: 2; }
    .hub-famille .registre__aller { grid-column: 3; grid-row: 1; align-self: start; }
  }

  /* ======================================================================
     Hub : chaque famille, sa baie collante et son registre.
     ====================================================================== */
  .hub-famille__tete { display: grid; gap: var(--esp-m) var(--gouttiere); align-items: end; margin-bottom: var(--esp-xl); }
  .hub-famille__tete h2 { max-width: 13em; }
  .hub-famille__compte { font: italic 1.25rem / 1.3 var(--serif); color: var(--encre-doux); max-width: none; }
  .hub-famille__compte .u-num { color: var(--argile); }
  .hub-famille__registre { min-width: 0; }
  .hub-famille__grille { display: grid; gap: var(--esp-l) clamp(2.5rem, 6vw, 7rem); align-items: start; }
  /* Sous 900 px, la baie de chaque famille reste visible : une arche
     statique entre le titre de la famille et sa liste, sur sa première vue.
     Les vues de réserve n'y changent pas (data-vues ne tourne que sur
     bureau) : elles sont retirées, donc jamais téléchargées. */
  .hub-famille__baie { position: relative; }
  .hub-famille__baie::before { content: ""; position: absolute; inset: -10px -10px 0; border: 1px solid var(--pierre); border-bottom: 0; border-radius: var(--cintre); pointer-events: none; }
  .surface--travertin .hub-famille__baie::before { border-radius: var(--anse); }
  .hub-famille__arche { height: clamp(300px, 46svh, 480px); box-shadow: var(--ombre-baie); }
  .hub-famille__arche img { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity 1.6s var(--doux), transform 2.4s var(--doux); }
  .hub-famille__arche img.is-actif { opacity: 1; transform: none; }
  /* Un bleu de mer ou de piscine très franc rompait l'ivoire et le sable
     des baies voisines (revue) : les vues des familles sont un peu adoucies. */
  .hub-famille__arche img { filter: saturate(.86); }
  @media (max-width: 899px) {
    .hub-famille__arche picture:not(:has(img.is-actif)) { display: none; }
    .hub-famille__baie { justify-self: center; width: min(100%, 560px); }
  }
  .hub-famille__ligne { gap: .6rem 1.4rem; padding-block: 1.5rem; }
  .hub-famille__ligne .registre__meta { max-width: 52ch; }
  .hub-famille__ligne .registre__chiffres { display: grid; gap: .15rem; }
  .hub-famille__ligne .registre__chiffres > span:first-child { font-size: 1.02rem; color: var(--encre); }
  .hub-famille__ligne .registre__chiffres small { font: italic 1.05rem / 1 var(--serif); color: var(--argile); }
  .hub-famille__ligne .registre__chiffres .u-num { font-size: 1.1rem; }
  .hub-famille__devis { font: italic 1.2rem / 1.1 var(--serif); color: var(--argile); }
  @media (min-width: 900px) {
    .hub-famille__tete { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
    .hub-famille__compte { justify-self: end; text-align: right; }
    .hub-famille__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .hub-famille__baie { position: sticky; top: calc(var(--h-entete) + 5vh); }
    .hub-famille__baie::before { inset: -12px -12px 0; }
    .hub-famille__arche { height: min(70svh, 600px); }
    .hub-famille__ligne { min-height: 9.5rem; }
  }
  /* Téléphone : le rond fléché passe sous le texte, à droite du prix, et
     rend sa largeur au texte (il n'en restait que 210 px). Le chapo est
     limité à trois lignes : le texte complet reste dans le HTML et sur la
     fiche ; la page faisait 14 600 px de haut (revue). */
  @media (max-width: 599px) {
    .hub-famille .registre__ligne > div { grid-column: 2 / -1; }
    .hub-famille .registre__chiffres { grid-column: 2; align-self: center; }
    .hub-famille .registre__aller { grid-column: 3; grid-row: 2; align-self: center; }
    .hub-famille__ligne .registre__meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: .9rem; }
  }

  /* ======================================================================
     L'appel final des pages de la famille (presta_appel_baie) : un paysage
     ou un carré prend une baie moins haute, la photo y est moins agrandie
     et on en voit davantage ; methode-equipe, grise, est un peu réchauffée.
     ====================================================================== */
  .arche--appel.arche--paysage { height: min(64svh, 560px); }
  @media (max-width: 899px) { .arche--appel.arche--paysage { height: clamp(280px, 92vw, 420px); } }
  .arche--rechauffee img { filter: saturate(1.05) sepia(.08); }

  /* ---- Hub : la fibre avant tout ---- */
  .rameau--matiere { right: -6%; bottom: -8%; width: min(36vw, 480px); height: min(36vw, 480px); transform: scaleX(-1) rotate(-14deg); }
  .hub-matiere .wrap { position: relative; z-index: 1; }
  /* Après la dernière famille, un seul vide de section (il en restait
     environ 300 px de trop à 1 440). */
  .hub-famille + .hub-matiere { padding-top: var(--section-y-s); }
  .hub-matiere__points { border-top: var(--filet); }
  .hub-matiere__points li { position: relative; padding: 1.15rem 0 1.15rem 2.1rem; border-bottom: var(--filet); font: 400 var(--fs-h4) / 1.32 var(--serif); max-width: none; }
  .hub-matiere__points li::before { content: ""; position: absolute; left: 2px; top: 1.6rem; width: 9px; height: 16px; border-radius: 0 100% 0 100%; background: var(--olive); opacity: .7; transform: rotate(28deg); }
  .hub-matiere__niche { max-width: 30rem; margin-top: var(--esp-xl); padding: 3.4rem clamp(1.5rem, 3vw, 2.4rem) 2rem; border-radius: 999px 999px var(--rayon) var(--rayon); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .6), var(--ombre-douce); text-align: center; }
  .hub-matiere__niche h3 { font-size: var(--fs-h3); }
  .hub-matiere__niche p { margin: .6rem auto 0; color: var(--encre-doux); }
  .hub-matiere__liens { margin-top: var(--esp-l); }
  @media (max-width: 899px) { .rameau--matiere { right: -30%; width: 80vw; height: 80vw; } }

  /* ---- Hub : nos interventions récentes, sans photo, et la mini côte ---- */
  .hub-reals__tete > .surtitre + h2 { margin-top: 0; }
  .hub-reals__tete p:not(.surtitre) { margin-top: var(--esp-m); font-size: var(--fs-lead); color: var(--encre-doux); max-width: var(--mesure-lead); }
  .hub-reals__grille { display: grid; gap: var(--esp-xl) var(--gouttiere); align-items: start; margin-top: var(--esp-xl); }
  .hub-reals__registre .hub-reals__num { padding-top: 6px; }
  .hub-reals__cote { position: sticky; top: calc(var(--h-entete) + var(--esp-l)); }
  /* La mini côte est réduite : le contour de 5 px des étiquettes y tombe à
     un pixel, et « La Seyne-sur-Mer » chevauchait le trait du littoral
     (revue). Un contour plus épais, couleur de l'enduit, l'en détache. */
  :is(.hub-reals__cote, .fiche-communes__cote) .coastline__point text { stroke-width: 14px; }
  /* La seule étiquette visible au repos, celle de la base, était posée sur
     le trait de côte et sur un point, en 11 px environ (revue). Elle passe
     au large, centrée sous son anneau, dans la mer, et grandit : 36 unités
     font 13 px dès que la carte mesure 430 px de large. */
  :is(.hub-reals__cote, .fiche-communes__cote) .coastline__point text { font-size: 36px; }
  :is(.hub-reals__cote, .fiche-communes__cote) .coastline__point--base text { text-anchor: middle; transform: translate(8px, 86px); }
  .hub-reals__lien { margin-top: var(--esp-l); }
  @media (min-width: 900px) { .hub-reals__grille { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
  @media (max-width: 899px) { .hub-reals__cote { display: none; } }

  /* Blocs de structure : leur rythme vient de .fiche-section et de leurs enfants. */
  .fiche-retire, .fiche-proto, .fiche-nuancier, .fiche-prix, .fiche-diy, .fiche-questions, .fiche-local-section, .fiche-autres, .hub-famille, .hub-devis, .hub-reals, .hub-hero { min-width: 0; }
}