/* Healthcare Resource Services — LES SCÈNES du 2026-10-06 (décision 106 de Gabriel). Portées des prototypes acceptés
   (atelier : linker-financial-site/prototypes-2026-10-06/scenes/hrN-*.html), avec les jetons de site.css : --edge pour
   le bord du contenu, Newsreader et Figtree, aucune couleur hors des jetons.
   Rien n'est caché ici : sans JavaScript, en mouvement réduit, ou quand js/scenes.js retire une scène, chaque scène est
   une section ordinaire, complète, dans son état final. Seul l'étage d'une scène épinglée change : il colle (sticky, une
   hauteur d'écran, 840 px au plus) pendant que js/scenes.js fait jouer la scène (data-etat="anime" ; erreur, retire et
   trop-haut le rendent ordinaire). La hauteur de la piste est posée par le JS
   seulement. Chaque sélecteur propre à une scène commence par son id. */

[data-scene]{position:relative;overflow-x:clip;--barre:76px}
/* l'étage commence sous la barre de navigation fixe (site.css, .nav.is-scrolled : 14 px + 46 px + 14 px et son filet,
   73 px au téléphone) : épinglé en haut de l'écran, son haut passe sous elle */
[data-scene] .piste>.etage{padding-top:calc(var(--barre) + clamp(10px,2.4vh,28px))}
/* seulement quand js/scenes.js fait jouer la scène : si le script manque ou plante avant de démarrer, l'étage reste une
   section ordinaire (revue motion du 2026-10-06) */
[data-scene][data-etat="anime"] .piste>.etage{position:sticky;top:0;height:100vh;max-height:840px}
@supports (height:100svh){[data-scene][data-etat="anime"] .piste>.etage{height:100svh}}
/* le filet et la flèche des liens du site : même état au clavier qu'au survol */
[data-scene] .link:focus-visible::before{transform:scaleX(1)}
[data-scene] .link:focus-visible svg{transform:translateX(4px)}

/* ── HR10 · le trait sous l'italique (tous les grands titres ; décision 112) ──
   scripts/build.mjs colle un trait à la plume sous les derniers mots de la fin en italique de chaque .display et
   .headline (h1, h2), et marque le titre [data-trait]. Tout se lit dans --t10 (0 à 1), posé par js/scenes.js sur le
   TITRE (motion.js en remplace les enfants quand il le découpe en mots, jamais le titre lui-même) : sans JS, en
   mouvement réduit ou après .rm, --t10 n'existe pas et vaut 1, le trait est entier et les mots ont leur encre.
   La fin soulignée est une boîte en ligne qui ne se coupe pas ; le SVG se pose sous la ligne des jambages : son haut à
   .24 em sous la ligne de base quelle que soit l'interligne (les jambages de Newsreader italique descendent à .265 em,
   l'encre n'occupe que le bas du SVG ; mesuré aux pixels sur le prototype, bureau et téléphone). */
.sous-trait{position:relative;display:inline-block;white-space:nowrap}
.sous-trait .plume{position:absolute;left:-.05em;width:calc(100% + .11em);top:calc(100% - .045em);top:calc(100% - .035em + (1.02em - 1lh) / 2);
  height:.34em;overflow:visible;pointer-events:none}
.sous-trait .plume-encre{fill:var(--green)}
.dark .sous-trait .plume-encre,.cta .sous-trait .plume-encre,.hero .sous-trait .plume-encre,.story .sous-trait .plume-encre{fill:var(--sage)}
.sous-trait .plume-e2{fill-opacity:.82}
/* HRS n'a pas de jeton blanc : le masque se lit en alpha ; son guide (la ligne médiane, assez large pour couvrir
   l'encre) porte un jeton opaque et se dessine. Trait simple : tout le long de --t10 ; double : l'aller jusqu'à .65,
   le retour (.plume-g2) de .6 à 1. pathLength=1000, tirets « 1000 2000 » : 1000 = rien de visible, 0 = entier. */
.sous-trait mask{mask-type:alpha}
.sous-trait .plume-guide{fill:none;stroke:var(--ink);stroke-width:22;stroke-dasharray:1000 2000;stroke-dashoffset:calc((1 - var(--t10,1)) * 1000px)}
.sous-trait .plume-double .plume-guide{stroke-dashoffset:calc((1 - clamp(0,var(--t10,1) / .65,1)) * 1000px)}
.sous-trait .plume-double .plume-g2{stroke-dashoffset:calc((1 - clamp(0,(var(--t10,1) - .6) / .4,1)) * 1000px)}
/* les mots en italique attendent en gris-vert (ivoire voilé sur fond sombre) et prennent l'encre avec leur trait ;
   currentColor, dans « color », est la couleur héritée du titre */
.trait-hote{--attente:var(--muted);color:color-mix(in srgb,currentColor calc(var(--t10,1) * 100%),var(--attente))}
.dark .trait-hote,.cta .trait-hote,.hero .trait-hote,.story .trait-hote{--attente:var(--paper-dim)}
@media (max-width:760px){.sous-trait .plume{height:.44em}}

/* ── HR4 · la règle graduée (accueil, à la place du bandeau des chiffres) ── */
#hr4{background:var(--bg)}
#hr4 .piste{position:relative}
/* minmax(0,1fr) : sans colonne déclarée, WebKit laisse la colonne grandir jusqu'à la largeur intrinsèque de la règle
   (100vw) et « 35 years » sortait de l'écran à droite (1868 px pour 1800, mesuré le 2026-10-06) */
#hr4 .etage{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;padding-inline:var(--edge);padding-bottom:clamp(28px,5vh,56px)}
/* --t (0 à 1) : la part de règle tracée, posée par le JS ; 1 par défaut (sans JS, mouvement réduit) */
#hr4 .mesure{--t:1;display:grid;grid-template-columns:repeat(3,max-content);justify-content:space-between;column-gap:clamp(20px,3vw,56px)}
#hr4 .item{display:contents}
#hr4 .item:nth-child(1)>*{grid-column:1}
#hr4 .item:nth-child(2)>*{grid-column:2}
#hr4 .item:nth-child(3)>*{grid-column:3}
/* interligne 1.14 : l'encre des chiffres reste dans leur boîte, rien ne traîne quand le compte change */
#hr4 .chiffre{grid-row:1;position:relative;display:grid;justify-self:start;margin:0 0 clamp(2px,.8vh,10px);
  font:400 clamp(56px,7.2vw,132px)/1.14 'Newsreader',Georgia,serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);white-space:nowrap}
#hr4 .fantome,#hr4 .val{grid-area:1/1}
#hr4 .fantome{visibility:hidden}
#hr4 .lib{grid-row:3;margin:18px 0 0;font:400 16px/1.4 'Figtree',system-ui,sans-serif;letter-spacing:.02em;color:var(--muted)}
#hr4 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* la règle déborde jusqu'aux bords de l'écran (la scène coupe ce qui dépasse) */
#hr4 .regle{grid-row:2;grid-column:1/-1;position:relative;height:34px;width:100vw;margin-left:calc(50% - 50vw)}
#hr4 .graduations{position:absolute;inset:0;width:100%;height:100%;overflow:visible;clip-path:inset(-4px calc((1 - var(--t)) * 100%) -4px -4px)}
#hr4 .graduations.tel{display:none}
#hr4 .graduations path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
#hr4 .graduations .fine{stroke:var(--line)}
#hr4 .graduations .moyenne,#hr4 .graduations .grande,#hr4 .graduations .base{stroke:var(--muted)}
#hr4 .encre{position:absolute;left:0;top:0;width:100%;height:1.5px;background:var(--green);transform-origin:0 50%;transform:scaleX(var(--t))}
/* la tête : invisible à la fin (état par défaut), déplacée par transform depuis le JS */
#hr4 .curseur{position:absolute;top:-16px;bottom:-8px;left:0;width:1.5px;margin-left:-.75px;background:var(--green);
  opacity:clamp(0,calc((1 - var(--t)) * 60),1)}
@media (max-width:760px){
  #hr4 .mesure{grid-template-columns:34px minmax(0,1fr);justify-content:stretch;column-gap:22px}
  #hr4 .item:nth-child(n)>*{grid-column:2;grid-row:auto}
  #hr4 .chiffre{margin:0;font-size:clamp(52px,19vw,80px)}
  #hr4 .lib{margin:4px 0 clamp(44px,8.6vh,76px);font-size:15px}
  #hr4 .item:nth-child(3) .lib{margin-bottom:0}
  #hr4 .regle{grid-column:1;grid-row:1/span 6;width:34px;height:auto;margin:0}
  #hr4 .graduations{clip-path:inset(-4px -4px calc((1 - var(--t)) * 100%) -4px)}
  #hr4 .graduations.bureau{display:none}
  #hr4 .graduations.tel{display:block}
  #hr4 .encre{width:1.5px;height:100%;transform-origin:50% 0;transform:scaleY(var(--t))}
  #hr4 .curseur{top:0;bottom:auto;left:-8px;right:-14px;width:auto;height:1.5px;margin:-.75px 0 0}
}

/* ── HR6 · les deux chemins (accueil, à la place de « For individuals and families » et « For healthcare providers ») ── */
#hr6{background:var(--bg)}
#hr6 .piste{position:relative}
#hr6 .etage{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;padding-inline:var(--edge);padding-bottom:clamp(24px,4vh,44px)}
#hr6 .eyebrow{justify-content:center;margin:0 0 14px}
/* la fourche : proportions fixes (pas de déformation du trait) ; les deux arrivées tombent à 23 % et 77 %, le centre des
   deux cartes, dont l'écart est lui aussi en % */
#hr6 .fourche{display:block;width:100%;height:auto;aspect-ratio:1000 / 200;overflow:visible}
#hr6 .fourche path{fill:none;stroke:var(--green);stroke-width:.95;stroke-linecap:butt;stroke-dasharray:1;
  transition:stroke-width .45s var(--ease),opacity .45s var(--ease)}
#hr6 .cartes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8%}
#hr6 .carte{position:relative;display:flex;flex-direction:column;align-items:center;padding:clamp(26px,4vh,38px) clamp(20px,3vw,52px) clamp(22px,3.4vh,32px);
  text-align:center;transition:background-color .45s var(--ease)}
#hr6 .regle{position:absolute;left:0;right:0;top:0;height:1px;background:var(--green)}
#hr6 .arrivee{position:absolute;left:50%;top:0;width:9px;height:9px;margin:-4px 0 0 -4.5px;border-radius:50%;background:var(--green)}
#hr6 .montee{display:none}
#hr6 .pour{margin:0 0 14px;font:600 12px/1.4 'Figtree',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
#hr6 h2{margin:0;max-width:21ch;font:400 clamp(26px,2.15vw,38px)/1.12 'Newsreader',Georgia,serif;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
#hr6 h2 em{font-style:italic}
#hr6 .phrase{margin:14px 0 0;font-size:17.5px;line-height:1.6;color:var(--muted)}
#hr6 .lien{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:18px;padding:12px 0 9px;
  font:600 12.5px 'Figtree',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none}
#hr6 .lien::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.3}
#hr6 .lien::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);z-index:1}
#hr6 .lien svg{width:16px;height:16px;transition:transform .5s var(--ease)}
#hr6 .lien:focus-visible{outline:2px solid var(--green);outline-offset:4px}
/* survol et clavier : la carte visée prend la sauge, son chemin s'épaissit, l'autre s'efface un peu. Avec l'animation,
   #hr6.attente suspend cet état tant que les cartes ne sont pas encore apparues (le JS la retire à leur arrivée). */
#hr6:not(.attente) .carte:hover,#hr6:not(.attente) .carte:focus-within{background:var(--sage)}
#hr6:not(.attente) .carte:hover .lien::before,#hr6:not(.attente) .carte:focus-within .lien::before{transform:scaleX(1)}
#hr6:not(.attente) .carte:hover .lien svg,#hr6:not(.attente) .carte:focus-within .lien svg{transform:translateX(4px)}
#hr6:not(.attente) .etage:has(.carte-a:hover) .chemin-a,#hr6:not(.attente) .etage:has(.carte-a:focus-within) .chemin-a,
#hr6:not(.attente) .etage:has(.carte-b:hover) .chemin-b,#hr6:not(.attente) .etage:has(.carte-b:focus-within) .chemin-b,
#hr6:not(.attente) .etage:has(.carte:hover) .tige,#hr6:not(.attente) .etage:has(.carte:focus-within) .tige{stroke-width:2}
#hr6:not(.attente) .etage:has(.carte-a:hover) .chemin-b,#hr6:not(.attente) .etage:has(.carte-a:focus-within) .chemin-b,
#hr6:not(.attente) .etage:has(.carte-b:hover) .chemin-a,#hr6:not(.attente) .etage:has(.carte-b:focus-within) .chemin-a{opacity:.22}
@media (max-width:760px){
  /* au téléphone, les deux portes s'empilent : un tronc le long de la marge, une branche vers chaque carte */
  #hr6 .eyebrow{justify-content:flex-start;margin:0 0 22px;padding-left:26px}
  #hr6 .fourche{display:none}
  #hr6 .cartes{grid-template-columns:minmax(0,1fr);row-gap:26px}
  #hr6 .carte{align-items:flex-start;padding:20px 0 6px 26px;text-align:left}
  #hr6 .arrivee{left:0;margin-left:-3.75px}
  #hr6 .montee{display:block;position:absolute;left:0;top:-41px;bottom:-26px;width:1.5px;background:var(--green)}
  #hr6 .pour{margin-bottom:10px}
  #hr6 h2{max-width:none;font-size:clamp(22px,6.2vw,26px);line-height:1.16}
  #hr6 .phrase{margin-top:8px;font-size:16px}
  #hr6 .lien{display:inline-block;margin-top:8px;font-size:12px;line-height:1.5}
  #hr6 .lien svg{display:inline-block;margin-left:8px;vertical-align:-3px}
}

/* ── HR2 · le continuum de soins (accueil, #care-placement, juste après la photo plein cadre H4) ── */
/* H4 garde sa photo ; son texte est passé dans HR2 : le voile qui le rendait lisible n'a plus de raison d'être */
.story-seule .story-media::after{content:none}
#hr2{background:var(--bg)}
#hr2 .piste{position:relative}
#hr2 .etage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:center;
  padding-inline:var(--edge);padding-bottom:clamp(28px,5vh,56px)}
#hr2 .corps{margin:24px 0 0;max-width:600px;font-size:17px;line-height:1.65;color:var(--muted)}
/* --p (0 à 1) : la longueur tracée de la ligne, posée par le JS ; --f : la place de chaque station sur la ligne (mesurée).
   --q : la part d'arrivée de la station (0 avant la ligne, 1 une fois passée), d'où le remplissage, le filet et le glissé. */
#hr2 .continuum{--p:1;--marge:clamp(56px,5vw,84px);position:relative;padding:clamp(12px,2vh,24px) 0 0 var(--marge)}
#hr2 .stations{margin:0;padding:0;list-style:none}
#hr2 .rail,#hr2 .encre{position:absolute;left:9.25px;top:0;bottom:22px;width:1.5px}
#hr2 .rail{background:var(--line)}
#hr2 .encre{background:var(--green);transform-origin:50% 0;transform:scaleY(var(--p))}
#hr2 .station{--decal:46px;--q:clamp(0,calc((var(--p) - var(--f,0)) * 14),1);position:relative;display:block;margin:0;
  padding:22px 0 clamp(34px,6.4vh,64px)}
#hr2 .station::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%;transform:scaleX(var(--q))}
#hr2 .rond{position:absolute;left:calc(-1 * var(--marge));top:calc(var(--decal) + .52em - 10px);width:20px;height:20px;
  border:1.5px solid var(--green);border-radius:50%;background:var(--bg);font-size:clamp(34px,3.7vw,66px)}
#hr2 .rond::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--green);transform:scale(var(--q))}
#hr2 .nom{display:block;opacity:var(--q);transform:translateX(calc((1 - var(--q)) * -16px))}
#hr2 .num{display:block;margin:0 0 8px;font:600 11.5px/16px 'Figtree',system-ui,sans-serif;letter-spacing:.14em;color:var(--green)}
#hr2 .titre{display:block;font:400 clamp(34px,3.7vw,66px)/1.04 'Newsreader',Georgia,serif;letter-spacing:-.018em;color:var(--ink)}
#hr2 .station.fin{padding:18px 0 0}
#hr2 .station.fin::before{display:none}
#hr2 .link{color:var(--ink)}
#hr2 .link:focus-visible::before{transform:scaleX(1)}
#hr2 .link:focus-visible svg{transform:translateX(4px)}
/* au clavier, le lien se montre dès qu'il a le focus, même si la ligne ne l'a pas encore atteint */
#hr2 .station.fin:focus-within .nom{opacity:1;transform:none}
@media (max-width:760px){
  #hr2 .etage{grid-template-columns:minmax(0,1fr);align-content:center;gap:6px}
  #hr2 .eyebrow{margin-bottom:14px}
  #hr2 .headline{font-size:clamp(28px,8vw,36px)}
  #hr2 .corps{margin-top:14px;font-size:15px;line-height:1.55}
  #hr2 .continuum{--marge:46px;padding-top:18px}
  #hr2 .station{--decal:36px;padding:16px 0 30px}
  #hr2 .num{margin-bottom:4px}
  #hr2 .titre,#hr2 .rond{font-size:30px}
  #hr2 .station.fin{padding-top:10px}
}

/* ── HR7 · la mission qui s'éclaire (accueil, #since « Why we serve. ») ── */
#hr7 .piste{position:relative}
#hr7 .etage{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,80px);align-content:center;align-items:start;
  padding-inline:var(--edge);padding-bottom:clamp(28px,5vh,56px)}
/* « 2009 » : la scène H2 de js/lignes.js, plus petit que dans l'ancienne colonne (il partage la sienne avec le titre) */
#hr7 .since-num{font-size:clamp(80px,9.4vw,170px);margin:0 0 clamp(14px,2.6vh,30px)}
#hr7 .headline{font-size:clamp(32px,3.6vw,60px)}
#hr7 .corps{position:relative;padding-left:clamp(28px,3vw,56px)}
#hr7 .rail,#hr7 .trait{position:absolute;left:0;top:.45em;bottom:.45em;width:2px;font-size:clamp(25px,2.3vw,44px)}
#hr7 .rail{background:var(--line)}
#hr7 .trait{background:var(--green)}
#hr7 .texte{margin:0;max-width:27em;font:400 clamp(25px,2.3vw,44px)/1.32 'Newsreader',Georgia,serif;letter-spacing:-.008em;color:var(--ink)}
/* la suite de la section (la phrase sur Ray, le lien vers l'équipe) se lit sous le paragraphe, hors de l'épinglage */
#hr7 .suite{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,80px);padding:0 var(--edge)}
#hr7 .suite>div{grid-column:2;padding-left:clamp(28px,3vw,56px)}
#hr7 .suite .link{margin-top:28px}
@media (max-width:760px){
  #hr7 .etage{grid-template-columns:minmax(0,1fr);gap:18px}
  #hr7 .eyebrow{margin-bottom:12px}
  #hr7 .since-num{font-size:72px;margin-bottom:10px}
  #hr7 .headline{font-size:clamp(30px,8.4vw,36px)}
  #hr7 .corps{padding-left:20px}
  #hr7 .rail,#hr7 .trait{font-size:clamp(19px,5.4vw,22px)}
  #hr7 .texte{font-size:clamp(19px,5.4vw,22px);line-height:1.36}
  #hr7 .suite{grid-template-columns:minmax(0,1fr)}
  #hr7 .suite>div{grid-column:1;padding-left:20px}
}

/* ── HR8 · les questions au trait (accueil, #faq « Have a question? ») ── */
#hr8 .bloc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:start}
#hr8 .headline{font-size:clamp(32px,3.6vw,60px)}
#hr8 .liste{border-top:1px solid var(--line)}
#hr8 details{border-bottom:1px solid var(--line)}
#hr8 summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;
  font:500 clamp(20px,1.5vw,25px)/1.3 'Newsreader',Georgia,serif;color:var(--ink);transition:color .4s var(--ease)}
#hr8 summary::-webkit-details-marker{display:none}
#hr8 summary:hover,#hr8 summary:focus-visible{color:var(--green)}
#hr8 summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}
/* le « + » : deux traits ; ouvert, le trait vertical a tourné d'un quart de tour et se couche sur l'autre : « − » */
#hr8 .plus{position:relative;flex:none;width:14px;height:14px}
#hr8 .plus i{position:absolute;left:0;top:50%;width:14px;height:1.5px;margin-top:-.75px;background:var(--green)}
#hr8 .plus .v{transform:rotate(90deg)}
#hr8 details[open] .plus .v{transform:rotate(180deg)}
#hr8 .rep{position:relative;padding:0 0 26px 26px}
#hr8 .filet{position:absolute;left:0;top:5px;bottom:31px;width:2px;background:var(--green)}
#hr8 .rep p{margin:0;max-width:640px;font-size:17px;line-height:1.65;color:var(--muted)}
@media (max-width:760px){
  #hr8 .bloc{grid-template-columns:minmax(0,1fr);gap:30px}
  #hr8 .headline{font-size:clamp(30px,8.4vw,36px)}
  #hr8 summary{gap:18px;padding:18px 0;font-size:19px}
  #hr8 .rep{padding:0 0 22px 18px}
  #hr8 .filet{bottom:27px}
  #hr8 .rep p{font-size:15.5px;line-height:1.6}
}

/* ── HR3 · le nœud qui se défait (/families, section « Providing care… ») ── */
#hr3 .piste{position:relative}
#hr3 .etage{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,96px);align-items:center;
  padding-inline:var(--edge);padding-bottom:clamp(28px,5vh,56px)}
#hr3 .headline{font-size:clamp(32px,3vw,54px);line-height:1.07}
#hr3 .lede{margin:22px 0 0}
#hr3 .carte{--h:540px;position:relative;height:var(--h);min-width:0}
#hr3 .fil{position:absolute;left:0;top:0;overflow:visible}
#hr3 .fil.bureau{width:min(560px,54%);height:540px}
#hr3 .fil.tel{display:none;width:100%;max-width:360px;height:560px}
#hr3 .fil polyline,#hr3 .fil .branche{fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#hr3 .fil .depart,#hr3 .fil .bout{fill:none;stroke:var(--green);stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke}
#hr3 .biens{position:absolute;top:0;right:0;left:calc(min(560px,54%) + 30px);display:grid;grid-template-rows:repeat(3,180px);margin:0;padding:0;list-style:none}
#hr3 .bien h3{margin:0;font:500 26px/30px 'Newsreader',Georgia,serif;letter-spacing:-.005em;color:var(--ink)}
#hr3 .bien p{margin:10px 0 0;max-width:44ch;font:400 16px/1.6 'Figtree',system-ui,sans-serif;color:var(--muted)}
/* la suite de la section (les deux paragraphes, le lien) se lit sous le titre, hors de l'épinglage */
#hr3 .suite{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,96px);padding:0 var(--edge);align-items:center}
#hr3 .suite .link{margin-top:30px}
/* le texte, seul à côté de la photo revenue, prend le corps d'un chapeau : il tient sa colonne sans laisser de vide */
#hr3 .suite .body{max-width:40em}
#hr3 .suite .body p{font-size:clamp(17px,1.3vw,21px);line-height:1.6}
/* sous 1024 px, la mise en page verticale du téléphone : la colonne du dessin horizontal laissait aux bénéfices ~210 px
   (à 900 px de large) pour des rangées fixes de 180 px, et ils se chevauchaient de 48 à 74 px entre 761 et 1000 px
   (mesuré le 2026-10-06, sans JS compris) ; le dessin vertical garde sa largeur de téléphone (360 px au plus) */
@media (max-width:1023px){
  #hr3 .etage{grid-template-columns:minmax(0,1fr);align-content:center;gap:18px}
  #hr3 .eyebrow{margin-bottom:14px}
  #hr3 .headline{font-size:clamp(26px,7.4vw,34px)}
  #hr3 .lede{margin-top:10px;font-size:16px}
  /* la carte prend la hauteur qui reste sous la barre et le texte (560 px au plus, celle du prototype) ; le dessin
     (viewBox 360 × 560), le haut des bénéfices et leurs rangées suivent la même échelle. 500 px au moins : à 420, les
     rangées (94 px) laissaient le 2e bénéfice mordre de 17 px sur le 3e à 375 × 667 et 360 × 740 ; un écran plus court
     ne loge pas l'étage, la scène s'y retire (section ordinaire, rien de coupé) */
  #hr3 .carte{--h:clamp(500px,calc(100svh - 340px),560px)}
  #hr3 .fil.bureau{display:none}
  #hr3 .fil.tel{display:block;height:var(--h)}
  #hr3 .biens{top:calc(var(--h) * 180 / 560);left:48px;grid-template-rows:repeat(3,calc(var(--h) * 126 / 560))}
  #hr3 .bien h3{font-size:20px;line-height:24px}
  #hr3 .bien p{margin-top:5px;font-size:14px;line-height:1.48}
  /* la photo garde sa colonne jusqu'au téléphone : seule sur toute la largeur, une photo de 688 px s'agrandissait
     (710 px à 768 × 1024, 930 px à 1000 ; preuve-scenes.mjs « image agrandie », 2026-10-09) */
  #hr3 .serve-fig{aspect-ratio:3/4}
}
@media (max-width:699px){
  #hr3 .suite{grid-template-columns:minmax(0,1fr)}
  #hr3 .serve-fig{aspect-ratio:4/3}
}
@media (max-width:380px){
  #hr3 .bien p{font-size:13.5px;line-height:1.45}
}

/* ── HR5 · la Californie d'un seul trait (/providers, section « Our mission », sur la bande sauge) ── */
#hr5 .piste{position:relative}
#hr5 .etage{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,96px);align-items:center;
  padding-inline:var(--edge);padding-bottom:clamp(24px,4vh,44px)}
#hr5 .headline{max-width:19ch;font-size:clamp(32px,3.6vw,60px);line-height:1.07}
#hr5 .link{margin-top:30px}
/* la suite de la section (le paragraphe « Our approach… ») se lit sous le titre, hors de l'épinglage */
#hr5 .suite{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,96px);padding:0 var(--edge)}
/* la carte : dimensionnée par sa largeur (proportions du viewBox), pour que l'étiquette en % tombe juste sur Fresno */
#hr5 .carte{position:relative;justify-self:center;width:min(100%,calc((min(100vh,840px) - 88px - var(--barre)) * 1000 / 1151));aspect-ratio:1000 / 1151;margin:0;container-type:inline-size}
#hr5 .dessin{display:block;width:100%;height:100%;overflow:visible}
/* sur la bande sauge, l'État prend le papier du site */
#hr5 .fond{fill:var(--bg);stroke:none}
#hr5 .cote,#hr5 .iles path{fill:none;stroke:var(--green);stroke-width:2.8;stroke-linejoin:round;stroke-linecap:butt;stroke-dasharray:1}
#hr5 .iles path{stroke-width:2.2}
#hr5 .anneau{fill:none;stroke:var(--green);stroke-width:1.7}
#hr5 .anneau:nth-of-type(1){opacity:.75}
#hr5 .anneau:nth-of-type(2){opacity:.5}
#hr5 .anneau:nth-of-type(3){opacity:.3}
#hr5 .point{fill:var(--green)}
/* sous les anneaux (rayon 76 = 6,6 % de la hauteur), centrée sur Fresno, un mot par ligne : elle reste dans l'État */
#hr5 .lieu{position:absolute;left:43.34%;top:calc(55.87% + 6.6% + 10px);translate:-50% 0;width:min-content;margin:0;text-align:center;
  font:600 12px/1.3 'Figtree',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep)}
#hr5 .lieu span{display:inline-block}
@media (max-width:760px){
  #hr5 .etage{grid-template-columns:minmax(0,1fr);align-content:center;gap:22px}
  #hr5 .eyebrow{margin-bottom:14px}
  #hr5 .headline{font-size:clamp(23px,6.6vw,28px);line-height:1.14}
  #hr5 .link{margin-top:16px}
  #hr5 .carte{width:min(100%,calc((min(100vh,840px) - 420px - var(--barre)) * 1000 / 1151),330px)}
  #hr5 .suite{grid-template-columns:minmax(0,1fr)}
  #hr5 .cote{stroke-width:5}
  #hr5 .iles path{stroke-width:3.4}
  #hr5 .anneau{stroke-width:3}
  /* au téléphone, la carte fait ~120 px de large : posée sur elle, l'étiquette passait sur le contour de l'État (sonde
     mobile du 2026-10-08, 375 à 402 px). Elle devient une légende sous la carte, sur une ligne ; le point reste sur Fresno */
  #hr5 .carte{aspect-ratio:auto}
  #hr5 .dessin{height:auto}
  #hr5 .lieu{position:static;translate:none;width:auto;margin-top:10px;text-align:center;font-size:10.5px;letter-spacing:.12em}
}
/* la carte suit la hauteur de l'écran ET la largeur de sa colonne ; l'étiquette (12 px) non : sous ~470 px de carte elle
   passait sur la côte (sonde « pc- » du 2026-10-09 : 14 px à 1366 × 640, 62 à 1280 × 585, 19 à 1024 × 768). Le critère
   est donc la largeur de la carte (requête de conteneur), pas celle de l'écran : légende sous la carte, dans la marge du
   bas de l'étage (24 px au moins, mesuré). Au téléphone, la règle du dessus (légende dans le flux) reste */
@media (min-width:761px){
  @container (max-width:470px){
    #hr5 .lieu{top:calc(100% + 8px);left:50%;translate:-50% 0;width:max-content;font-size:11px;letter-spacing:.12em}
  }
}

/* ── HR9 · l'équipe autour de vous (/team, section « The people behind each file. », sur la bande sauge) ── */
#hr9 .piste{position:relative}
#hr9 .etage{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,80px);align-items:center;
  padding-inline:var(--edge);padding-bottom:clamp(24px,4vh,44px)}
/* la roue : un carré ; portraits et étiquettes placés en cqw (1 cqw = 1 % du côté), la place des étiquettes réservée autour */
#hr9 .equipe{position:relative;justify-self:center;width:min(560px,calc(100% - 400px),calc(min(100vh,840px) - 220px - var(--barre)));container-type:inline-size}
#hr9 .roue{aspect-ratio:1}
#hr9 .dessin{display:block;width:100%;height:100%;overflow:visible}
#hr9 .anneau,#hr9 .rayons path{fill:none;stroke:var(--green);stroke-dasharray:1;stroke-linecap:butt}
#hr9 .anneau{stroke-width:1.3}
#hr9 .rayons path{stroke-width:1;opacity:.75}
#hr9 .noeuds circle{fill:var(--green)}
/* sur la bande sauge, le disque de « You » prend le papier du site */
#hr9 .coeur{fill:var(--bg);stroke:var(--sage-deep);stroke-width:1}
#hr9 .you{font:italic 400 40px 'Newsreader',Georgia,serif;fill:var(--green-deep)}
#hr9 .gens{list-style:none;margin:0;padding:0}
#hr9 .photo{position:absolute;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);width:17.143cqw;aspect-ratio:1;translate:-50% -50%}
#hr9 .photo picture{display:contents}
#hr9 .photo img{display:block;width:100%;height:100%;object-fit:cover;clip-path:circle(50% at 50% 50%);background:var(--sage-deep)}
#hr9 .halo{position:absolute;inset:-1.071cqw;border:1px solid var(--green);border-radius:50%}
#hr9 .etiquette{position:absolute;display:flex;flex-direction:column;gap:3px;white-space:nowrap}
#hr9 .nom{font:500 clamp(16px,3.5cqw,20px)/1.2 'Newsreader',Georgia,serif;color:var(--ink)}
#hr9 .role{font:600 11px/1.3 'Figtree',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
#hr9 .haut .etiquette{left:calc(var(--x) * 1cqw);bottom:calc((100 - var(--y) + 9.643) * 1cqw + 8px);translate:-50% 0;align-items:center;text-align:center}
#hr9 .bas .etiquette{left:calc(var(--x) * 1cqw);top:calc((var(--y) + 9.643) * 1cqw + 8px);translate:-50% 0;align-items:center;text-align:center}
#hr9 .d .etiquette{left:calc((var(--x) + 9.643) * 1cqw + 14px);top:calc(var(--y) * 1cqw);translate:0 -50%;align-items:flex-start}
#hr9 .g .etiquette{right:calc((100 - var(--x) + 9.643) * 1cqw + 14px);top:calc(var(--y) * 1cqw);translate:0 -50%;align-items:flex-end;text-align:right}
#hr9 .p1{--x:50.000;--y:8.929}
#hr9 .p2{--x:85.569;--y:29.464}
#hr9 .p3{--x:85.569;--y:70.536}
#hr9 .p4{--x:50.000;--y:91.071}
#hr9 .p5{--x:14.431;--y:70.536}
#hr9 .p6{--x:14.431;--y:29.464}
#hr9+.wrap .people{margin-top:clamp(24px,4vw,56px)}
@media (max-width:1100px){
  /* tablette et téléphone : l'anneau rapetisse (300 px) et ne porte plus que les visages ; les noms passent en liste dessous */
  #hr9 .equipe{width:300px}
  #hr9 .anneau{stroke-width:2.2}
  #hr9 .rayons path{stroke-width:1.8}
  #hr9 .noeuds circle{r:6px}
  #hr9 .coeur{stroke-width:1.8}
  #hr9 .gens{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 20px;margin:24px calc((300px - min(100vw - 36px, 420px)) / 2) 0}
  #hr9 .gens li{display:block;padding-top:10px;border-top:1px solid var(--line)}
  #hr9 .haut .etiquette,#hr9 .bas .etiquette,#hr9 .d .etiquette,#hr9 .g .etiquette{position:static;translate:none;align-items:flex-start;text-align:left}
  #hr9 .nom{font-size:18px}
  #hr9 .role{font-size:10.5px}
}
@media (max-width:760px){
  #hr9 .etage{grid-template-columns:minmax(0,1fr);align-content:center;gap:24px}
  #hr9 .eyebrow{margin-bottom:14px}
  #hr9 .headline{font-size:clamp(28px,8vw,34px)}
}

/* ── HR14 · le chemin du retour (page 404, décision 112) ──
   La page ne charge ni GSAP ni js/scenes.js (motion: false) : js/retour.js trace le trait une seule fois, à l'arrivée,
   et pose data-etat="anime" pendant qu'il joue. Le CSS par défaut est l'état final : trait entier, point posé.
   Bureau : le texte à droite (5/12), le trait dans la colonne de gauche, accroché aux actions ; son point d'arrivée
   (bord droit, 70 % de la hauteur) tombe à 10 px du bouton, à hauteur de son centre (26 px = la moitié de ses 52 px).
   Sa largeur (58vw + 20 px) le fait partir du bord gauche de l'écran ; sur un écran bas, il rétrécit pour tenir. */
#hr14{overflow-x:clip}
#hr14 .wrap{width:100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,96px);align-items:center}
#hr14 .texte{grid-column:2;min-width:0}
#hr14 .actions{position:relative}
#hr14 .chemin{display:block;overflow:visible}
#hr14 .chemin.bureau{position:absolute;right:calc(100% + 10px);top:26px;width:min(calc(58vw + 20px),calc((min(100vh,840px) - 120px) * 1.5714));
  height:auto;aspect-ratio:880/560;translate:0 -70%;pointer-events:none}
#hr14 .chemin.tel{display:none}
#hr14 .trait{fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2}
#hr14 .arrivee{fill:var(--green);transform-box:fill-box;transform-origin:50% 50%}
/* tablette et téléphone : une seule colonne ; le trait passe entre le paragraphe et les actions, et se pose juste
   au-dessus du bouton (la colonne de 5/12 serait trop étroite pour le titre sous 1024 px) */
@media (max-width:1024px){
  #hr14 .wrap{grid-template-columns:minmax(0,1fr)}
  #hr14 .texte{grid-column:1}
  #hr14 .chemin.bureau{display:none}
  #hr14 .chemin.tel{display:block;width:min(100%,420px);height:auto;aspect-ratio:360/260;margin-top:18px}
  #hr14 .actions{margin-top:8px;gap:8px 28px}
}
/* téléphone court (375 × 667) : le dessin rétrécit à gauche, son point d'arrivée reste au-dessus du bouton */
@media (max-width:1024px) and (max-height:760px){
  #hr14 .chemin.tel{width:min(72%,300px);margin-top:10px}
}

/* ── HR11 · les courbes de niveau (/contact, section « Our office », sur la bande sauge ; décision 112) ──
   Comme la carte des rues qu'il remplace : le dessin à gauche, le texte à droite. Les courbes sont un décor (le relief
   n'est pas celui de Fresno) ; le bloc d'adresse se pose dessus, en bas à droite, et le fil du sommet arrive sur sa règle. */
#hr11 .piste{position:relative}
#hr11 .etage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,96px);align-items:center;
  padding-inline:var(--edge);padding-bottom:clamp(24px,4vh,44px);overflow:hidden}
#hr11 .texte{grid-column:2;grid-row:1;position:relative;z-index:1;min-width:0}
#hr11 .headline{font-size:clamp(38px,4.4vw,72px);line-height:1.02;letter-spacing:-.02em}
#hr11 .headline .ligne{display:block}
#hr11 .zone{margin-top:24px;max-width:30ch;font-size:clamp(17px,1.2vw,19px);line-height:1.6;color:var(--muted)}
#hr11 .coordonnees{margin-top:clamp(26px,4.4vh,44px);max-width:30em;border-top:1px solid var(--line)}
#hr11 .coordonnees>div{display:grid;grid-template-columns:7em minmax(0,1fr);align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
#hr11 dt{font:600 12px/1.6 'Figtree',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#hr11 dd{font-size:16px;line-height:1.6;color:var(--ink)}
#hr11 dd a{position:relative;display:inline-block;color:var(--ink)}
#hr11 dd a::after,#hr11 dd a::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px}
#hr11 dd a::after{background:var(--line)}
#hr11 dd a::before{background:var(--green);z-index:1;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
#hr11 dd a:hover::before,#hr11 dd a:focus-visible::before{transform:scaleX(1)}
#hr11 dd .grand{font:400 clamp(24px,2.4vw,34px)/1.1 'Newsreader',Georgia,serif;white-space:nowrap}
#hr11 dd .grand::after{display:none}
/* le dessin : dimensionné par la hauteur de l'étage (sous la barre de navigation) et par sa colonne */
#hr11 .plan{grid-column:1;grid-row:1;position:relative;justify-self:start;display:grid;grid-template-columns:minmax(0,1fr);
  width:min(100%,calc((min(100vh,840px) - var(--barre) - clamp(10px,2.4vh,28px) - clamp(24px,4vh,44px)) * 1.2))}
#hr11 .carte{grid-area:1/1;position:relative;aspect-ratio:960/800}
#hr11 .courbes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#hr11 .anneau{fill:none;stroke:var(--green);stroke-width:1.1;stroke-linejoin:round;stroke-dasharray:1000 2000}
#hr11 .fil circle{fill:var(--green)}
#hr11 .fil-telephone{display:none}
#hr11 .epingle{position:absolute;left:var(--px);top:var(--py);width:24px;height:24px;margin:-12px 0 0 -12px}
#hr11 .epingle-cercle{position:absolute;inset:0;border:1.5px solid var(--green);border-radius:50%;background:var(--sage)}
#hr11 .epingle-point{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--green)}
/* l'étiquette se place par translate (CSS) ; sa boîte intérieure glisse (GSAP), sinon GSAP reprendrait ce translate dans
   sa propre transformation et l'état final animé ne serait plus celui du CSS */
#hr11 .etiquette{position:absolute;left:calc(var(--px) + 22px);top:var(--py);translate:0 -50%;
  font:500 13.5px/1.35 'Figtree',system-ui,sans-serif;letter-spacing:.01em;color:var(--ink);white-space:nowrap}
#hr11 .etiquette .dedans{display:inline-block;padding:5px 10px;background:var(--sage)}
/* sur une ligne, le point médian entre le nom et la ville est dessiné ici (au téléphone, deux lignes, pas de point) */
#hr11 .etiquette .dedans>span+span::before{content:"·\00a0"}
/* le dessin et le bloc partagent la même case de grille : le bloc commence à 60 % de la hauteur du dessin (50 % de la largeur,
   960/800), là où le fil arrive, et la case prend la hauteur du plus grand des deux. En position absolue (jusqu'au
   2026-10-09), un bloc plus haut que le reste du dessin dépassait de l'étage, qui le coupait : « Open the map » coupé de
   13 px sur un portable à 1280 × 585, la carte entière rognée à 1024 × 768. Trop haut pour l'écran, la scène se retire
   (js/scenes.js, « trop-haut ») */
#hr11 .bloc{grid-area:1/1;align-self:start;position:relative;margin:50% 0 0 52%;width:48%;padding:clamp(20px,2vw,32px);background:var(--bg)}
#hr11 .regle{position:absolute;left:0;right:0;top:0;height:1px;background:var(--green);transform-origin:28% 0}
#hr11 .bloc-surtitre{display:flex;align-items:center;gap:14px;margin-bottom:14px;font:600 12px/1.4 'Figtree',system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
#hr11 .bloc-surtitre::before{content:"";flex:none;width:28px;height:1px;background:currentColor}
#hr11 h3{margin-bottom:12px;font:400 clamp(22px,1.6vw,28px)/1.15 'Newsreader',Georgia,serif;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
#hr11 address{font:normal 400 clamp(18px,1.3vw,22px)/1.4 'Newsreader',Georgia,serif;color:var(--ink)}
#hr11 .ouvrir{display:inline-block;margin-top:10px;font-size:15px;border-bottom:1px solid var(--line);transition:border-color .3s}
#hr11 .ouvrir:hover,#hr11 .ouvrir:focus-visible{border-color:var(--ink)}
@media (max-width:960px){
  /* tablette et téléphone, une seule colonne (à deux colonnes sous 960 px, l'étiquette du bureau mord sur le texte) :
     l'ordre de lecture suit le fil, titre, phrase, dessin, bloc d'adresse. Le téléphone et le courriel sont déjà dans la
     liste « Schedule a call », juste au-dessus : ils sortent de la scène (data-doublon), sinon l'étage ne tient plus */
  #hr11 .etage{grid-template-columns:minmax(0,1fr);align-content:center;gap:16px;overflow:visible}
  #hr11 .texte{display:contents}
  #hr11 .eyebrow{margin-bottom:-6px}
  #hr11 .headline{font-size:clamp(32px,6vw,44px)}
  #hr11 .headline .ligne{display:inline}
  #hr11 .zone{margin:0;max-width:44ch;font-size:15.5px;line-height:1.5}
  #hr11 .coordonnees{display:none}
  #hr11 .plan{display:grid;grid-template-columns:minmax(0,1fr);grid-column:1;grid-row:auto;width:100%;justify-self:stretch}
  /* le dessin va d'un bord de l'écran à l'autre (les anneaux s'arrêtent au bord, pas à la marge), sauf si l'étage est
     trop bas pour lui (une hauteur d'écran, 840 px au plus, même sur une tablette de 1024) : il rétrécit alors, centré,
     pour que tout tienne sous la barre (480 px : tout le reste de l'étage) */
  #hr11 .carte{justify-self:center;width:min(calc(100% + 2 * var(--edge)),calc((min(100vh,840px) - 480px) * 1.2));
    width:min(calc(100% + 2 * var(--edge)),calc((min(100svh,840px) - 480px) * 1.2))}
  /* coupé en haut et en bas (le texte au-dessus, le bloc dessous) ; sur les côtés, les anneaux filent jusqu'aux bords de
     l'écran quand le dessin a rétréci (sinon ils s'arrêtent net sur les bords de sa boîte) */
  #hr11 .courbes{overflow:visible;clip-path:inset(0 -100vw)}
  #hr11 .anneau{stroke-width:2.6}
  #hr11 .fil-bureau{display:none}
  #hr11 .fil-telephone{display:inline}
  /* deux lignes (le nom, la ville), qui peuvent déborder de la carte vers la marge : sur cinq lignes, l'étiquette se tassait */
  #hr11 .etiquette{left:calc(var(--px) + 18px);white-space:nowrap;font-size:12.5px}
  #hr11 .etiquette .dedans{padding:4px 8px}
  #hr11 .etiquette .dedans span{display:block}
  #hr11 .etiquette .dedans>span+span::before{content:none}
  #hr11 .carte,#hr11 .bloc{grid-area:auto}
  #hr11 .bloc{position:relative;left:auto;top:auto;width:auto;margin:0;padding:18px 20px 20px}
  #hr11 .regle{transform-origin:var(--px) 0}
  #hr11 h3{font-size:22px;margin-bottom:8px}
  #hr11 address{font-size:18px}
}
/* téléphone court (375 × 667) */
@media (max-width:960px) and (max-height:760px){
  /* ici le reste de l'étage tient en ~390 px (mesuré : polices réduites ci-dessous) : une réserve de 480 px laissait une
     carte de 190 px de large à 402 × 640 (l'iPhone de Gabriel dans un navigateur intégré), 88 px sur un iPhone SE */
  #hr11 .carte{width:min(calc(100% + 2 * var(--edge)),calc((min(100vh,840px) - 400px) * 1.2));
    width:min(calc(100% + 2 * var(--edge)),calc((min(100svh,840px) - 400px) * 1.2))}
  #hr11 .etage{gap:12px}
  #hr11 .headline{font-size:28px}
  #hr11 .bloc{padding:12px 16px 14px}
  #hr11 .bloc-surtitre{margin-bottom:8px}
  #hr11 h3{font-size:19px;margin-bottom:4px}
  #hr11 address{font-size:16px;line-height:1.3}
  #hr11 .ouvrir{margin-top:6px;font-size:14px}
}

/* ── HR12 · trois lieux, un seul trait (/care-placement, section « Options to cover your needs. », sur la bande sauge ;
   décision 112) : à la place de la photo de la soignante. Le texte à gauche, le dessin et les trois noms à droite. ── */
#hr12 .piste{position:relative}
#hr12 .etage{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:center;
  padding-inline:var(--edge);padding-bottom:clamp(24px,4vh,44px)}
#hr12 .texte{min-width:0}
#hr12 .headline{font-size:clamp(34px,3.6vw,62px);line-height:1.04;letter-spacing:-.018em}
#hr12 .corps{margin-top:24px;max-width:46ch;font-size:17px;line-height:1.65;color:var(--muted)}
#hr12 .link{margin-top:22px}
#hr12 .plan{min-width:0}
/* le dessin : sa largeur suit aussi la hauteur de l'étage (sous la barre), pour que les noms tiennent dessous */
#hr12 .dessin{display:block;width:min(100%,860px,calc((min(100vh,840px) - var(--barre) - 160px) * 760 / 440));height:auto;margin:0 auto;overflow:visible}
#hr12 .trait{fill:none;stroke:var(--green);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
/* --q (0 à 1) : la part du filet remplie, posée par le JS pendant que le trait prend la forme de ce lieu ; 1 par défaut */
#hr12 .lieux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2vw,36px);max-width:860px;
  margin:clamp(14px,2.4vh,28px) auto 0;list-style:none}
#hr12 .lieu{--q:1;position:relative;padding-top:16px}
#hr12 .lieu::before,#hr12 .lieu::after{content:"";position:absolute;left:0;right:0;top:0;height:1px}
#hr12 .lieu::before{background:var(--line)}
#hr12 .lieu::after{height:1.5px;background:var(--green);transform-origin:0 50%;transform:scaleX(var(--q))}
#hr12 .lieu p{font:400 clamp(21px,1.8vw,30px)/1.15 'Newsreader',Georgia,serif;letter-spacing:-.008em;color:var(--ink)}
@media (max-width:960px){
  #hr12 .etage{grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(14px,2.6vh,24px)}
  #hr12 .eyebrow{margin-bottom:12px}
  #hr12 .headline{font-size:clamp(28px,5vw,40px)}
  #hr12 .corps{margin-top:12px;font-size:15px;line-height:1.55}
  #hr12 .link{margin-top:8px}
  #hr12 .dessin{width:min(100%,560px,calc((min(100vh,840px) - var(--barre) - 420px) * 760 / 440))}
  #hr12 .lieux{margin-top:12px;gap:0 12px;max-width:560px}
  #hr12 .lieu{padding-top:10px}
  #hr12 .lieu p{font-size:17px;line-height:1.2}
}
@media (max-width:760px){
  #hr12 .trait{stroke-width:3.2}
}

/* ── HR15 · les lignes qui se démêlent (/providers, section « Streamlining healthcare eligibility and reimbursement for
   all. » ; décision 112) : à la place de la photo de l'administratrice. Le champ de lignes part du bord gauche de
   l'écran ; le texte garde la marge du reste de la page. ── */
#hr15 .piste{position:relative}
#hr15 .etage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(600px,40vw));gap:clamp(28px,4vw,80px);align-items:center;
  padding-right:var(--edge);padding-bottom:clamp(24px,4vh,44px)}
/* la hauteur du champ suit celle de l'étage, sous la barre de navigation */
#hr15 .champ{position:relative;height:min(620px,calc(min(100vh,840px) - var(--barre) - 90px));min-width:0}
#hr15 .lignes{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
#hr15 .lignes.tel{display:none}
#hr15 .lignes polyline{fill:none;stroke:var(--green);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
#hr15 .texte{min-width:0}
#hr15 .headline{font-size:clamp(30px,2.7vw,48px);line-height:1.08}
#hr15 .corps{margin-top:24px}
#hr15 .corps p{margin-bottom:14px;font-size:16.5px;line-height:1.62;color:var(--muted)}
#hr15 .corps p:last-child{margin-bottom:0}
@media (max-width:960px){
  /* une colonne : le courant arrive par la droite, au-dessus du texte, et descend vers lui */
  #hr15 .etage{grid-template-columns:minmax(0,1fr);align-content:center;gap:14px;padding-left:var(--edge)}
  #hr15 .champ{height:clamp(120px,20vh,210px);margin-inline:calc(-1 * var(--edge))}
  #hr15 .lignes.bureau{display:none}
  #hr15 .lignes.tel{display:block}
  #hr15 .eyebrow{margin-bottom:12px}
  #hr15 .headline{font-size:clamp(25px,4.4vw,34px)}
  #hr15 .corps{margin-top:12px}
  #hr15 .corps p{margin-bottom:9px;font-size:14.5px;line-height:1.5}
}