/* =====================================================================
   Styles partagés du template Premium.
   Couleurs : variables --c-* (triplets RVB) posées par assets/palette.js.
   Les valeurs ci-dessous ne servent que si palette.js ne s'exécute pas.
   Mouvement : transform et opacité uniquement, 400 à 900 ms,
   tout est neutralisé avec prefers-reduced-motion.
====================================================================== */
:root {
  --c-fond: 251 248 243;
  --c-clair: 244 233 219;
  --c-texte: 42 38 34;
  --c-doux: 107 96 88;
  --c-accent: 30 42 68;
  --c-chaud: 148 86 47;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Grain léger (SVG inline, aucun fichier externe) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Fondations ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: rgb(var(--c-fond)); color: rgb(var(--c-texte)); font-feature-settings: "ss01", "cv11"; }
h1, h2, h3 { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
::selection { background: rgb(var(--c-accent)); color: rgb(var(--c-fond)); }
:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: rgb(var(--c-fond)); }

/* Titres : Newsreader, un mot en italique (<em>) dans chaque grand titre */
.display { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-weight: 300; letter-spacing: -0.02em; font-optical-sizing: auto; }
.display em { font-style: italic; font-weight: 300; letter-spacing: -0.01em; }

/* ---------- Transitions entre les pages ----------
   View Transitions (navigateurs compatibles) : fondu enchaîné, l'en-tête reste en place.
   Sinon (classe .no-vt posée dans le <head>) : simple fondu à l'arrivée. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease); }
#site-header { view-transition-name: site-header; }
.no-vt body { animation: page-in .2s var(--ease) both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Titres ligne par ligne ----------
   <h1 class="lines"><span class="ln"><span>…</span></span>…</h1>
   Chaque ligne monte depuis un masque ; décalage de 110 ms entre lignes. */
.ln { display: block; overflow: hidden; padding: 0 .12em .14em 0; margin-bottom: -.14em; }
.ln > span { display: inline-block; }
.js .lines .ln > span { transform: translate3d(0, 108%, 0); transition: transform .9s var(--ease-out) calc(var(--i, 0) * 110ms + var(--d, 0s)); }
.js .lines.is-visible .ln > span { transform: none; }

/* ---------- Apparition au scroll (cascade de 100 ms via data-delay) ---------- */
.reveal[data-delay="1"] { --rd: .1s; }
.reveal[data-delay="2"] { --rd: .2s; }
.reveal[data-delay="3"] { --rd: .3s; }
.js .reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .8s var(--ease) var(--rd, 0s), transform .8s var(--ease) var(--rd, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* En-tête d'accueil : visible dès le premier affichage, avec un fondu court en CSS pur
   (ne dépend pas de site.js ; délais plafonnés à 120 ms). Sans JavaScript : identique. */
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
@keyframes hero-fade { from { opacity: 0; } }
.hero .hero-in, .hero .lines .ln > span { animation: hero-rise .32s var(--ease) both; animation-delay: min(calc(var(--d, 0s) * .25), 120ms); }
.js .hero .lines .ln > span { transform: none; transition: none; }

/* ---------- Images qui se dévoilent (masque) ----------
   Un volet de la couleur du fond se replie vers le haut (scaleY), l'image se recadre (scale). */
.mask { position: relative; overflow: hidden; isolation: isolate; }
.js .mask::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgb(var(--mask-c, var(--c-clair))); transform-origin: 50% 0; transition: transform .9s var(--ease-out) var(--rd, 0s); pointer-events: none; }
.js .mask.is-visible::after { transform: scaleY(0); }
.js .mask > .photo { transform: scale(1.08); transition: transform .9s var(--ease-out) var(--rd, 0s); }
.js .mask.is-visible > .photo { transform: none; }

/* ---------- Photo ou bloc de remplacement ----------
   .photo : conteneur à ratio fixe (aucun décalage de mise en page).
   .ph : libellé de remplacement discret (pages Équipe et Accès uniquement). */
.photo { position: relative; width: 100%; height: 100%; border-radius: inherit; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; background: rgb(var(--ph-bg, var(--c-clair))); color: rgb(var(--c-doux)); text-align: center; padding: 1rem; }
.ph::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgb(var(--c-texte) / .14); border-radius: inherit; pointer-events: none; }
.ph svg { width: 1.25rem; height: 1.25rem; opacity: .55; }
.ph span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- Compositions graphiques (accueil, quand une photo manque) ----------
   Dégradés doux superposés + grain SVG + trait fin. Décoratives : aria-hidden. */
.compo { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; color: rgb(var(--c-accent)); background:
  radial-gradient(55% 45% at 82% 14%, rgb(var(--c-accent) / .07), transparent 72%),
  radial-gradient(65% 55% at 12% 88%, rgb(var(--c-fond) / .95), transparent 70%),
  radial-gradient(45% 40% at 62% 58%, rgb(var(--c-fond) / .55), transparent 70%),
  radial-gradient(80% 60% at 30% 20%, rgb(var(--c-clair)), transparent 75%),
  linear-gradient(165deg, rgb(var(--c-clair)) 0%, rgb(var(--c-fond)) 100%); }
.compo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: var(--grain); }
.compo svg { position: absolute; overflow: visible; }
.compo .sil-line { stroke: currentColor; stroke-opacity: 1; }
.compo-ring { fill: none; stroke: currentColor; stroke-opacity: .16; stroke-width: 1; vector-effect: non-scaling-stroke; }
.compo-dot { fill: currentColor; }
.compo-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(4rem, 10vw, 7rem); color: rgb(var(--c-accent)); }
.compo-band-sil { top: 14%; right: 8%; height: 150%; opacity: .2;
  /* Fondu vers le bas : la silhouette ne s'arrête pas net au bord de la bande */
  -webkit-mask-image: linear-gradient(to bottom, #000 34%, transparent 56%); mask-image: linear-gradient(to bottom, #000 34%, transparent 56%); }
.compo-band-sil .sil-line { stroke: rgb(var(--c-texte)); stroke-width: .7; }
@media (max-width: 639px) { .compo-band-sil { right: -18%; height: 135%; } }
.compo-txt { position: absolute; left: 1.5rem; bottom: 1.4rem; right: 1.5rem; color: rgb(var(--c-texte)); }
.compo-txt small { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--c-doux)); }
.compo-txt span { display: block; margin-top: .4rem; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.05; }

/* En-tête sans photo : grande silhouette au trait (≈ 14 %, ≈ 70 % de la hauteur), tracée à l'ouverture */
.compo-hero-sil { height: 70%; top: 13%; left: 50%; transform: translateX(-50%); opacity: .16; }
@media (min-width: 1024px) { .compo-hero-sil { left: auto; right: 9%; transform: none; top: 12%; height: 72%; opacity: .26; } }
.compo-hero-sil .sil-line { stroke: rgb(var(--c-accent)); stroke-width: 1.1; }
.js .compo-hero-sil .sil-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-loaded .compo-hero-sil .sil-line { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-out) .2s; }

/* ---------- En-tête d'accueil ----------
   Sans photo : composition claire, texte foncé. Avec photo (.has-photo) : texte clair sur voile.
   Voile : ≥ .70 sous le titre et sous la navigation, pour un contraste ≥ 4,5:1 même sur une photo très claire. */
.hero { background: rgb(var(--c-clair)); color: rgb(var(--c-texte)); }
.hero .hero-muted { color: rgb(var(--c-doux)); }
.hero .hero-soft { color: rgb(var(--c-texte) / .85); }
.hero .hero-btn { background: rgb(var(--c-accent)); color: rgb(var(--c-fond)); }
.hero .hero-ghost { border: 1px solid rgb(var(--c-texte) / .6); }
.hero-shade { display: none; }
.hero-parallax { will-change: transform; }
.has-parallax .hero[data-concept="A"] .hero-parallax { transform: translate3d(0, var(--py, 0px), 0) scale(1.1); }

/* Téléphone, A et C (photo au-dessus du texte) : boutons juste sous le titre, avant le paragraphe,
   pour que « Prendre rendez-vous » et « Appeler » restent au premier écran */
@media (max-width: 639px) {
  .hero:is([data-concept="A"], [data-concept="C"]) .hero-actions { order: -1; }
  .hero:is([data-concept="A"], [data-concept="C"]) .hero-row { margin-top: 1.5rem; gap: 1.5rem; }
}
/* A et C : texte et boutons alignés à gauche, l'un sous l'autre */
.hero:is([data-concept="A"], [data-concept="C"]) .hero-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.hero:is([data-concept="A"], [data-concept="C"]) .hero-actions { justify-content: flex-start; }

/* Concept A : photo plein écran, voile de la couleur du fond (bas sur mobile, gauche sur ordinateur), texte foncé */
.hero[data-concept="A"] { background: rgb(var(--c-fond)); }
.hero[data-concept="A"] .hero-shade { display: block; background:
  linear-gradient(to bottom, rgb(var(--c-fond) / .7) 0, rgb(var(--c-fond) / 0) 140px),
  linear-gradient(to top, rgb(var(--c-fond) / .95) 0%, rgb(var(--c-fond) / .82) 44%, rgb(var(--c-fond) / 0) 72%); }
/* Mobile : la photo commence sous l'en-tête (qui reste sur le fond uni, lisible), pleine largeur,
   sans voile ; un fondu bas court la relie au texte posé dessous, sans chevauchement */
@media (max-width: 1023px) {
  .hero[data-concept="A"] { height: auto; min-height: 100svh; padding-top: 4.25rem; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .hero[data-concept="A"] .hero-parallax { position: relative; inset: auto; flex: none; height: 34svh; min-height: 200px; }
  .hero[data-concept="A"] .photo img { object-position: 62% 78%; }
  .hero[data-concept="A"] .hero-shade { inset: 4.25rem 0 auto; height: max(34svh, 200px); background: linear-gradient(to top, rgb(var(--c-fond)) 0%, rgb(var(--c-fond) / 0) 16%); }
  .hero[data-concept="A"] .hero-inner { padding-top: 1rem; }
}
@media (min-width: 1024px) {
  .hero[data-concept="A"] .hero-shade { background:
    linear-gradient(to bottom, rgb(var(--c-fond) / .7) 0, rgb(var(--c-fond) / 0) 160px),
    linear-gradient(to right, rgb(var(--c-fond) / .92) 0%, rgb(var(--c-fond) / .7) 34%, rgb(var(--c-fond) / 0) 62%); }
  .hero[data-concept="A"] .hero-inner > * { max-width: 58%; }
}

/* Concept C : fond chaud (halo d'accent clair + grain), photo dans une arche (à droite sur ordinateur, au-dessus du texte sur mobile) */
.hero[data-concept="C"] { background:
  radial-gradient(60% 70% at 78% 45%, rgb(var(--c-clair)), transparent 70%),
  linear-gradient(170deg, rgb(var(--c-fond)) 0%, rgb(var(--c-clair) / .55) 100%); }
.hero[data-concept="C"]::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .45; mix-blend-mode: multiply; pointer-events: none; }
.hero-tag { display: none; }
.hero[data-concept="C"].has-photo .hero-tag { display: block; position: absolute; z-index: 2; padding: 1rem 1.25rem; border-radius: .9rem; max-width: 15rem;
  background: rgb(var(--c-fond)); box-shadow: 0 1px 2px rgb(var(--c-texte) / .05), 0 18px 40px -18px rgb(var(--c-texte) / .28);
  font-size: 13px; font-weight: 300; line-height: 1.5; color: rgb(var(--c-texte) / .85); }
.hero-tag small { display: block; margin-bottom: .35rem; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--c-chaud)); }
@media (max-width: 1023px) { .hero[data-concept="C"].has-photo .hero-tag { display: none; } }
.hero[data-concept="C"] .hero-tag { animation: hero-rise .32s var(--ease) 120ms both; }
.hero[data-concept="C"] .hero-parallax { border-radius: 50% 50% 1.25rem 1.25rem / 40% 40% 1.25rem 1.25rem; overflow: hidden; aspect-ratio: 4 / 5; }
.hero[data-concept="C"] .photo img { object-position: 62% 60%; }
/* L'arche a sa forme et sa teinte dès le premier affichage ; la photo (préchargée) s'y pose ensuite */
.hero[data-concept="C"] .hero-parallax { background: rgb(var(--c-clair)); animation: hero-fade .3s var(--ease) both; }
@media (max-width: 1023px) {
  .hero[data-concept="C"] { height: auto; min-height: 100svh; flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .hero[data-concept="C"] .hero-parallax { position: relative; inset: auto; flex: none; width: min(68vw, 20rem, calc(30svh * .8)); margin: 5.25rem auto 0; }
  .hero[data-concept="C"] .hero-inner { padding-top: 1.75rem; }
}
@media (min-width: 1024px) {
  .hero[data-concept="C"] { --aw: min(32vw, 29rem, calc((100svh - 9rem) * .8)); align-items: center; }
  .hero[data-concept="C"] { --ar: max(3rem, calc((100vw - 80rem) / 2 + 3rem)); --at: calc(50% + 2.25rem - var(--aw) * .625); }
  .hero[data-concept="C"] .hero-parallax { inset: auto; top: var(--at); right: var(--ar); width: var(--aw); }
  .hero[data-concept="C"] .hero-tag { right: calc(var(--ar) + var(--aw) - 3.5rem); top: calc(var(--at) + var(--aw) * 1.25 - 5.5rem); }
  .hero[data-concept="C"] .hero-inner { padding-top: 5rem; padding-bottom: 0; }
  .hero[data-concept="C"] .hero-inner > * { max-width: 52%; }
  .hero[data-concept="C"] .hero-title { font-size: clamp(4.25rem, 6.2vw, 5.75rem); }
}

/* Valeurs qui ne doivent jamais se couper (ex. « [Conventionnement] ») */
.nobreak { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; }

/* ---------- Header ---------- */
/* Fond flouté : calque en opacité (seule propriété animée) */
#site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(var(--c-fond) / .88); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid rgb(var(--c-texte) / .10); opacity: 0; transition: opacity .5s var(--ease); }
#site-header.is-scrolled::before { opacity: 1; }
#site-header.is-overlay { color: rgb(var(--c-fond)); }
#site-header.is-dark::before { background: rgb(var(--c-accent) / .9); border-bottom-color: rgb(var(--c-fond) / .12); }
#site-header .h-muted { color: rgb(var(--c-doux)); }
/* Monogramme : initiale en italique dans une petite arche */
.monogram { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 42px; padding-top: 4px;
  border: 1px solid currentColor; border-radius: 17px 17px 5px 5px; color: rgb(var(--c-chaud));
  font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 300; font-size: 22px; line-height: 1; }
.on-dark .monogram { color: inherit; opacity: .85; }
@media (max-width: 380px) { .monogram { display: none; } }
#site-header.is-overlay .h-muted { color: rgb(var(--c-fond) / .8); }
#site-header .h-btn { background: rgb(var(--c-accent)); color: rgb(var(--c-fond)); }
#site-header.is-overlay .h-btn { background: rgb(var(--c-fond)); color: rgb(var(--c-texte)); }
#site-header .h-burger { border-color: rgb(var(--c-texte) / .14); }
#site-header.is-overlay .h-burger { border-color: rgb(var(--c-fond) / .4); }

/* Menu mobile plein écran */
.js #mobile-menu { opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.js #mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
.js #mobile-menu .mm-item { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js #mobile-menu.is-open .mm-item { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 60ms + 80ms); }

/* ---------- Boutons, liens ---------- */
.btn { transition: transform .45s var(--ease), opacity .45s var(--ease), box-shadow .45s var(--ease); }
.btn:hover { transform: translate3d(0, -2px, 0); }
.btn:active { transform: translate3d(0, 0, 0) scale(.98); }
.arrow { display: inline-block; transition: transform .45s var(--ease); }
a:hover .arrow, button:hover .arrow { transform: translate3d(4px, 0, 0); }
.link-line { position: relative; }
.link-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgb(var(--c-chaud)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.on-dark .link-line::after { background: currentColor; }
.link-line:hover::after, .link-line:focus-visible::after, a:hover > .link-line::after, a:focus-visible > .link-line::after, .link-line[aria-current="page"]::after, [aria-current="page"] > .link-line::after { transform: none; }

/* ---------- Barre RDV (téléphone) ---------- */
.js .mbar { transform: translate3d(0, 110%, 0); transition: transform .6s var(--ease); }
.js .mbar.is-shown { transform: none; }

/* ---------- Page Motifs : silhouette interactive ---------- */
.sil-line { fill: none; stroke: currentColor; stroke-opacity: .7; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sil-trace .sil-line { stroke-width: 1; }
.sil-label { fill: rgb(var(--c-doux)); }
.js .sil-trace .sil-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .sil-trace.is-visible .sil-line { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); }
.mz { fill: rgb(var(--c-accent)); fill-opacity: .2; stroke: rgb(var(--c-accent)); stroke-width: 1; cursor: pointer; opacity: 0; transition: opacity .45s var(--ease); }
.mz:hover { opacity: .45; }
.mz.is-active, html:not(.js) .mz { opacity: 1; }
.mz-rep { fill: rgb(var(--c-accent)); }
.mz-rep .rep { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .45s var(--ease), transform .6s var(--ease-out); }
.mz-rep.is-active .rep, html:not(.js) .mz-rep .rep { opacity: 1; transform: none; }

.zone-tab[aria-selected="true"] { background: rgb(var(--c-accent)); color: rgb(var(--c-fond)); border-color: rgb(var(--c-accent)); }
.zone-tab[aria-selected="true"] .zt-num { color: rgb(var(--c-fond) / .75); }
.js .zone-panel[hidden] { display: none; }
.js .zone-panel .zp-step { opacity: 0; transform: translate3d(0, 12px, 0); }
.js .zone-panel.is-shown .zp-step { opacity: 1; transform: none; transition: opacity .6s var(--ease) var(--s, 0s), transform .6s var(--ease) var(--s, 0s); }

/* ---------- Accueil : scène signature (seul effet lourd) ----------
   Section haute (5 étapes) avec un écran épinglé (sticky) : la silhouette se trace, puis les
   4 zones s'allument une à une et le texte change à côté.
   .sd : animations pilotées par le défilement (animation-timeline), si le navigateur les gère.
   .io : repli IntersectionObserver (classes posées par site.js).
   Sans JS ou en mouvement réduit : version statique (tout affiché, rien d'épinglé). */
.sz { fill: rgb(var(--c-accent)); fill-opacity: .2; stroke: rgb(var(--c-accent)); stroke-width: 1; }
.sz-dot { fill: rgb(var(--c-accent)); }
.scene-sil .sil-line { stroke-width: 1; }
.scene-text .zt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--c-doux)); }
.scene-bar { height: 2px; background: rgb(var(--c-texte) / .12); overflow: hidden; }
.scene-bar > span { display: block; height: 100%; background: rgb(var(--c-accent)); transform: scaleX(0); transform-origin: 0 50%; }
.scene-intro { display: none; }
.scene-progress { display: none; }

.scene.sd, .scene.io { height: 380svh; }
.scene.sd .scene-pin, .scene.io .scene-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* Textes superposés dans la même case de grille : la hauteur suit le plus long, rien ne se chevauche */
:is(.sd, .io) .scene-texts { display: grid; }
:is(.sd, .io) .scene-text { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 16px, 0); }
.scene:not(.sd):not(.io) .scene-text + .scene-text { margin-top: 2.5rem; }
:is(.sd, .io) .scene-intro { display: block; }
:is(.sd, .io) .scene-progress { display: grid; }
:is(.sd, .io) .sz { opacity: 0; }
:is(.sd, .io) .scene-sil .sil-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.scene:not(.sd):not(.io) .scene-pin { padding: 6rem 0; }
.scene:not(.sd):not(.io) .scene-pin > div { align-items: start; }
@media (min-width: 1024px) { .scene:not(.sd):not(.io) .scene-sil { position: sticky; top: 7rem; } }
.scene-steps { position: absolute; inset: 0; display: none; grid-template-rows: repeat(5, 1fr); pointer-events: none; }
.io .scene-steps { display: grid; }

/* Repli IntersectionObserver : transitions entre états */
.io .scene-sil .sil-line { transition: stroke-dashoffset .9s var(--ease); }
.io.is-traced .scene-sil .sil-line { stroke-dashoffset: 0; }
.io .sz { transition: opacity .6s var(--ease); }
.io .sz.is-past { opacity: .3; }
.io .sz.is-on { opacity: 1; }
.io .scene-text { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.io .scene-text.is-on { opacity: 1; transform: none; }
.io .scene-bar > span { transition: transform .6s var(--ease); }
.io .scene-bar.is-done > span { transform: none; }

/* Défilement piloté (Chrome, Edge…) : chaque élément lit sa plage dans la timeline --scene */
@supports (animation-timeline: view()) {
  .scene.sd { view-timeline-name: --scene; }
  .sd .scene-sil .sil-line { animation: sc-trace linear both; animation-timeline: --scene; animation-range: contain 0% contain 16%; }
  .sd .sz, .sd .scene-text, .sd .scene-bar > span { animation-timeline: --scene; animation-fill-mode: both; animation-timing-function: linear; animation-range: contain var(--a) contain var(--b); }
  .sd .sz { animation-name: sc-zone; }
  .sd .sz[data-i="4"] { animation-name: sc-zone-last; }
  .sd .scene-text { animation-name: sc-text; }
  .sd .scene-text[data-i="0"] { animation-name: sc-text-first; }
  .sd .scene-text[data-i="4"] { animation-name: sc-text-last; }
  .sd .scene-bar > span { animation-name: sc-bar; }
}
[data-i="0"] { --a: 0%;  --b: 20%; }
[data-i="1"] { --a: 20%; --b: 40%; }
[data-i="2"] { --a: 40%; --b: 60%; }
[data-i="3"] { --a: 60%; --b: 80%; }
[data-i="4"] { --a: 80%; --b: 100%; }
@keyframes sc-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sc-zone { 0% { opacity: 0; } 18%, 82% { opacity: 1; } 100% { opacity: .3; } }
@keyframes sc-zone-last { 0% { opacity: 0; } 18%, 100% { opacity: 1; } }
@keyframes sc-text { 0% { opacity: 0; transform: translate3d(0, 16px, 0); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(0, -16px, 0); } }
@keyframes sc-text-first { 0%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(0, -16px, 0); } }
@keyframes sc-text-last { 0% { opacity: 0; transform: translate3d(0, 16px, 0); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes sc-bar { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- Grain uniforme sur les fonds crème ---------- */
.grain { position: relative; isolation: isolate; }
.grain::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .45; mix-blend-mode: multiply; pointer-events: none; }

/* ---------- Accueil : cartes typographiques de l'équipe ---------- */
.team-card { position: relative; display: flex; flex-direction: column; border-radius: 1rem; background: rgb(var(--c-fond)); transition: transform .5s var(--ease); }
.team-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  box-shadow: 0 1px 2px rgb(var(--c-texte) / .05), 0 22px 44px -24px rgb(var(--c-texte) / .3); }
.team-card:hover { transform: translate3d(0, -4px, 0); }
.team-card:hover::after, .team-card:focus-visible::after { opacity: 1; }
.team-card .tc-mark, .team-card .mask { margin-bottom: 1.5rem; }
@media (min-width: 640px) { .team-card .tc-mark, .team-card .mask { margin-bottom: 2.5rem; } }
.team-card.is-static:hover { transform: none; }
.team-card.is-static:hover::after { opacity: 0; }
.team-card .tc-mark.tc-mark-xl { margin: auto; font-size: clamp(5.5rem, 22vw, 10rem); }
.tc-mark { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 300; line-height: .9; letter-spacing: -.02em; color: rgb(var(--c-accent)); font-size: clamp(3.25rem, 8vw, 6rem); }

/* Téléphone : fiches compactes (portrait ou initiales à gauche), texte courant à 16 px, zones tactiles ≥ 44 px */
@media (max-width: 639px) {
  /* Accueil : une fiche par ligne */
  #team-preview { grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 2rem; max-width: none; }
  #team-preview .team-card { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; column-gap: .875rem; padding: .875rem 1rem; }
  #team-preview .tc-media { order: 1; margin: 0; }
  #team-preview .tc-info { order: 2; margin: 0; padding: 0; border: 0; }
  #team-preview .tc-head { order: 3; }
  #team-preview .tc-num { display: none; }
  #team-preview .tc-mark, #team-preview .mask { margin: 0; }
  #team-preview .tc-mark { font-size: 2.25rem; text-align: center; }
  #team-preview .tc-metier { margin-top: .125rem; font-size: 1rem; }
  /* Page Équipe : en-tête sur deux colonnes, puis détails et bouton sur toute la largeur */
  #team-full .fiche { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 1rem; padding-block: 1.75rem; }
  #team-full .fiche:first-child { padding-top: 0; }
  #team-full .fiche:last-child { padding-bottom: 0; }
  #team-full .fiche-corps { display: contents; }
  #team-full .fiche-media .team-card { aspect-ratio: 1; padding: 0; }
  #team-full .fiche-media .team-card > span:first-child { display: none; }
  #team-full .fiche-media .tc-mark-xl { font-size: 2.25rem; }
  #team-full .fiche-tete h2 { font-size: 1.75rem; }
  #team-full .fiche-tete p { margin-top: .25rem; font-size: 1rem; line-height: 1.35; }
  #team-full .fiche dl { grid-column: 1 / -1; max-width: none; margin-top: 1rem; font-size: 1rem; }
  #team-full .fiche dl > div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding-block: .625rem; }
  #team-full .fiche dt { font-size: 12px; line-height: 1.3; letter-spacing: .08em; }
  #team-full .fiche dd { line-height: 1.4; }
  #team-full .fiche .btn { grid-column: 1 / -1; display: flex; justify-content: center; min-height: 44px; margin-top: 1rem; padding: .75rem 1.25rem; font-size: 1rem; }
}

/* ---------- Scène signature sur fond sombre (accent) : texte et zones en couleur de fond ---------- */
.scene.on-dark .sz { fill: rgb(var(--c-fond)); fill-opacity: .22; stroke: rgb(var(--c-fond)); }
.scene.on-dark .sz-dot { fill: rgb(var(--c-fond)); }
.scene.on-dark .sil-label { fill: rgb(var(--c-fond) / .75); }
.scene.on-dark .sil-line { stroke-opacity: .8; }
.scene.on-dark .zt { color: rgb(var(--c-fond) / .75); }
.scene.on-dark .scene-bar { background: rgb(var(--c-fond) / .2); }
.scene.on-dark .scene-bar > span { background: rgb(var(--c-fond)); }

/* ---------- Cabinet de démonstration fictif (config.demo.js) ---------- */
.demo-badge { position: fixed; right: .75rem; bottom: calc(env(safe-area-inset-bottom) + 5.1rem); z-index: 35; display: flex; align-items: center; gap: .6rem; padding: .3rem .6rem; border-radius: 999px; font-size: 10px; letter-spacing: .03em;
  background: rgb(var(--c-texte) / .86); color: rgb(var(--c-fond)); }
/* « Essayez vos couleurs » + pastilles : accent de la palette, liseré de son fond, point de sa teinte chaude */
.demo-try { display: inline-flex; align-items: center; gap: .45rem; padding-left: .6rem; border-left: 1px solid rgb(var(--c-fond) / .25); }
.demo-try-l { color: rgb(var(--c-fond) / .8); white-space: nowrap; }
.demo-short { display: none; }
/* Ancien lien vers le hub des maquettes : inutilisé dans la démo en ligne */
.demo-hub { padding: .2rem 0 .2rem .6rem; border-left: 1px solid rgb(var(--c-fond) / .25); color: rgb(var(--c-fond) / .8); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgb(var(--c-fond) / .4); transition: color .4s var(--ease); }
.demo-hub:hover { color: rgb(var(--c-fond)); }
.demo-hub:focus-visible { outline: 2px solid rgb(var(--c-fond)); outline-offset: 2px; border-radius: 2px; }
.demo-swatches { display: inline-flex; gap: .15rem; }
/* Zone cliquable de 24 × 24 px (cible tactile minimale), rond visible de 18 px */
.demo-swatch { position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.demo-swatch::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid var(--sw-f);
  background: radial-gradient(circle at 70% 30%, var(--sw-c) 0 22%, transparent 24%), var(--sw-a); transition: transform .3s var(--ease); }
.demo-swatch:hover::before { transform: scale(1.12); }
.demo-swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 2px rgb(var(--c-fond)); }
.demo-swatch:focus-visible { outline: 2px solid rgb(var(--c-fond)); outline-offset: 1px; }
/* Téléphone : fine bande (28 px) fixée juste sous l'en-tête. Au repos, toutes les pages ont déjà
   cet espace libre en haut : elle ne cache ni titre ni bouton, et le bas de l'écran reste à la barre RDV. */
@media (max-width: 639px) {
  .demo-badge { top: 68px; left: 0; right: 0; bottom: auto; justify-content: space-between; gap: .5rem; border-radius: 0; padding: .125rem .75rem;
    font-size: 10px; background: rgb(var(--c-texte)); }
  .demo-long { display: none; }
  .demo-short { display: inline; white-space: nowrap; }
  .demo-hub { padding-left: .5rem; }
  .demo-try { gap: .3rem; padding-left: .5rem; }
  /* Le libellé reste le nom du groupe pour les lecteurs d'écran */
  .demo-try-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .demo-swatches { gap: 0; }
  /* En-têtes d'accueil dont la photo commence sous l'en-tête : décalés de la hauteur de la bande */
  /* … et réduits d'autant, pour que les boutons restent au premier écran */
  .has-demo-badge .hero[data-concept="C"] .hero-parallax { margin-top: 7rem; width: min(68vw, 20rem, calc((30svh - 1.75rem) * .8)); }
  .has-demo-badge .hero[data-concept="A"] { padding-top: 6rem; }
  .has-demo-badge .hero[data-concept="A"] .hero-parallax { height: calc(34svh - 1.75rem); min-height: 172px; }
  .has-demo-badge .hero[data-concept="A"] .hero-shade { top: 6rem; height: max(calc(34svh - 1.75rem), 172px); }
  /* Démo sans ville : titre de quatre lignes ramené à trois, le bouton « Appeler » reste au premier écran (360 × 640) */
  .hero-title.sans-ville { font-size: 2.5rem; }
}
/* Ordinateur : en bas à gauche, loin de la navigation */
@media (min-width: 640px) { .demo-badge { right: auto; left: 1rem; bottom: 1rem; padding: .45rem .8rem; font-size: 11px; } }
/* Le badge ne masque jamais la dernière ligne du pied de page */
@media (min-width: 640px) { .has-demo-badge footer > div { padding-bottom: 4.5rem; } }

/* ---------- Pages légales ---------- */
/* Liens dans le texte : zone de clic de 44 px de haut, sans décaler les lignes (marge intérieure d'un élément en ligne) */
.legal p a, .legal li a { padding: .85rem .25rem; margin-inline: -.25rem; }
.legal h2 { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgb(var(--c-texte) / .12); font-family: 'Newsreader', Georgia, serif; font-size: 1.75rem; font-weight: 300; letter-spacing: -0.01em; }
.legal p, .legal li, .legal dd { margin-top: 1rem; font-size: 15px; font-weight: 300; line-height: 1.75; color: rgb(var(--c-texte) / .85); }
.legal ul { margin-top: .5rem; padding-left: 1.25rem; list-style: disc; }
.legal li { margin-top: .4rem; }
.legal dl { margin-top: 1.25rem; display: grid; gap: .25rem 2rem; }
.legal dt { margin-top: 1rem; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: rgb(var(--c-doux)); }
.legal dd { margin-top: .25rem; color: rgb(var(--c-texte)); }
.legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Mouvement réduit : tout est affiché d'emblée ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  /* Règle générale : aucune animation ni transition, quel que soit le composant (états finaux fixés ci-dessous) */
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .no-vt body { animation: none; }
  .js .lines .ln > span, .js .reveal, .js .hero-in, .js .mbar, .js .zone-panel .zp-step,
  .js #mobile-menu .mm-item, .js .mask > .photo { opacity: 1; transform: none; transition: none; }
  .js .mask::after { display: none; }
  .hero .hero-in, .hero .lines .ln > span, .hero[data-concept="C"] .hero-tag, .hero[data-concept="C"] .hero-parallax { animation: none; }
  .has-parallax .hero[data-concept="A"] .hero-parallax { transform: none; }
  .js .sil-trace .sil-line, .js .compo-hero-sil .sil-line { stroke-dasharray: none; transition: none; }
  .team-card, .team-card::after { transition: none; }
  .team-card:hover { transform: none; }
  .js #mobile-menu, .mz, .mz-rep .rep, .btn, .arrow, .link-line::after, #site-header::before { transition: none; }
  .btn:hover, .btn:active, a:hover .arrow, button:hover .arrow { transform: none; }
}