/* Healthcare Resource Services — les lignes (aperçu du 2026-10-05). Rien ici n'existe sans html.l-on, que js/lignes.js
   pose seulement quand le mouvement est permis ; .rm (filet, mouvement réduit) rend tout tel que le site le montre sans
   ce fichier. */

.l-toile{display:block;pointer-events:none}

/* H1 · le labyrinthe : sous le texte de la colonne collante, au bureau seulement (au téléphone la colonne ne colle pas) */
.l-dedale{margin-top:clamp(28px,3vw,44px);width:100%;max-width:540px;height:clamp(170px,30vh,300px)}
.l-dedale-toile{width:100%;height:100%}
@media (max-width:900px){.l-dedale{display:none}}

/* H2 · « 2009 » : le chiffre HTML reste la face avant (tourné en 3D par le script) ; le canevas des contours, posé à
   côté dans l'enveloppe, déborde vers le bas pour loger la profondeur */
/* la boîte du chiffre épouse son texte : pleine largeur, tournée en perspective, son bord vide dépassait l'écran du
   téléphone (HRS, 418 px pour 390) ; et l'enveloppe rogne tout reste à l'horizontale, jamais à la verticale */
.l-annees-cadre{display:block;position:relative;overflow-x:clip}
.l-annees{width:-webkit-fit-content;width:fit-content}
.l-annees.l-tourne{will-change:transform}
/* jamais plus large que la colonne : un débordement à droite fait défiler la page de côté au téléphone */
.l-annees-hote{position:absolute;left:-3%;top:-30%;width:103%;height:190%;pointer-events:none}
.l-annees-toile{width:100%;height:100%}

/* H3 · les bandes : la section d'avant colle par son bas pendant que la bande monte par-dessus elle */
.l-paire{position:relative}
.l-on:not(.rm) .l-dessous{position:sticky;top:min(0px,calc(100vh - var(--l-h,100vh)));z-index:0;transform-origin:50% 35%}
/* au téléphone, la barre d'adresse : la petite hauteur d'écran, sinon le bas de la section collée passe dessous */
@supports (height:100svh){.l-on:not(.rm) .l-dessous{top:min(0px,calc(100svh - var(--l-h,100svh)))}}
.l-on:not(.rm) .l-dessous.l-recule{will-change:transform,opacity}
.l-on:not(.rm) .l-dessus{position:relative;z-index:1}

/* H4 · la photo des soins part d'un cadre ; le fond vert profond de la section tient le texte lisible autour */
.l-on:not(.rm) .story-media.l-cadre{clip-path:inset(12% 9% 12% 9% round 10px)}
.l-on:not(.rm) .story-media.l-cadre img{transform:scale(1.24);will-change:transform}

/* H5 · les collines (L4 du site Linker, 2026-10-07) : une bande pleine largeur au bas de l'appel vert, posée par
   js/lignes.js seulement ; la crête la plus proche a la couleur du pied de page, qui la prolonge */
.l-on:not(.rm) .cta.l-a-collines{padding-bottom:0}
.l-collines{margin-top:clamp(56px,6vw,104px);height:clamp(140px,19vw,330px)}
.l-collines-toile{width:100%;height:100%}

/* R · Des révélations partout. Les filets entre les lignes se tracent de gauche à droite à leur arrivée (.l-vu, posé par
   lignes.js) ; le trait des sur-titres aussi. Sans .l-on, ou sous .rm, les bordures d'origine restent telles quelles. */
.l-on:not(.rm) .l-trait-haut{border-top-color:transparent;background:linear-gradient(var(--line),var(--line)) left top/0% 1px no-repeat;transition:background-size 1.3s var(--ease)}
.l-on:not(.rm) .l-trait-bas{border-bottom-color:transparent;background:linear-gradient(var(--line),var(--line)) left bottom/0% 1px no-repeat;transition:background-size 1.3s var(--ease)}
.l-on:not(.rm) .foot-grid.l-trait-bas{background-image:linear-gradient(var(--line-dark),var(--line-dark))}
.l-on:not(.rm) .l-trait-haut.l-vu,.l-on:not(.rm) .l-trait-bas.l-vu{background-size:100% 1px}
.l-on:not(.rm) .eyebrow::before{transform:scaleX(0);transform-origin:left center;transition:transform .9s .12s var(--ease)}
.l-on:not(.rm) .eyebrow.l-vu::before{transform:none}
/* les chiffres qui comptent : le vrai texte reste pour les lecteurs d'écran, rogné dans sa propre boîte */
.trust-num.l-compte{position:relative}
.l-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}