/* Maquette "page guide" : structure d'un site vitrine à hero en demi-teinte, rail de sommaire et pied de page foncé.
   Tout passe par les jetons du kit Glint (glint.css), thème clair par défaut, thème sombre avec ?theme=dark. */
html { background: #f7f7f4; }                 /* = --surface-page clair, pour le rebond du défilement */
html[data-theme="dark"] { background: #14120b; }
html, body { margin: 0; }

.gl {
  --m: 32px; --nav-h: 80px; --gutter: 24px; --rail-top: 48px;
  --r-btn: var(--radius-lg); --r-chip: var(--radius-md); --r-card: var(--radius-xl);
  --e-ui: cubic-bezier(0.2, 0, 0, 1); --e-enter: cubic-bezier(0.16, 1, 0.3, 1); --e-exit: cubic-bezier(0.4, 0, 1, 1);
  --d-hover: 120ms; --d-fast: 200ms; --d-arrow: 380ms;
  --body: var(--text-neutral); --muted: var(--text-secondary); --line: var(--border-low);
  font: 400 14px/20px var(--font-sans); min-height: 100vh;
}
.gl :where(a) { color: inherit; }
.gl :focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; border-radius: 4px; }  /* focus en gris, règle du kit */

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--nav-h); padding-inline: var(--m);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-page); transition: background-color 200ms var(--e-ui);   /* barre pleine : aucune trame ne passe dessous */
}
.nav[data-dark] { background: var(--bg-primary); }
.nav-blur { display: none !important; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none; visibility: hidden; }
.nav[data-scrolled] .nav-blur { visibility: visible; }
.nav-blur > i { position: absolute; inset: 0; -webkit-mask-image: var(--mask); mask-image: var(--mask);
  -webkit-backdrop-filter: blur(calc(var(--b) * var(--nav-p, 0))); backdrop-filter: blur(calc(var(--b) * var(--nav-p, 0))); }
.nav-blur > i:nth-child(1) { --b: 2px;  --mask: linear-gradient(#000 0%, #000 50%, transparent 100%); }
.nav-blur > i:nth-child(2) { --b: 6px;  --mask: linear-gradient(#000 0%, #000 30%, transparent 70%); }
.nav-blur > i:nth-child(3) { --b: 14px; --mask: linear-gradient(#000 0%, transparent 45%); }
.nav-blur::after { content: ""; position: absolute; inset: 0; opacity: var(--nav-p, 0);
  background: linear-gradient(color-mix(in srgb, var(--surface-page) 82%, transparent), color-mix(in srgb, var(--surface-page) 60%, transparent) 50%, transparent); }
.nav[data-dark] .nav-blur::after { background: linear-gradient(color-mix(in srgb, var(--bg-primary) 82%, transparent), color-mix(in srgb, var(--bg-primary) 60%, transparent) 50%, transparent); }
.nav .gl-wordmark { align-self: center; }   /* le kit l'aligne en haut (flex-start) : dans la barre de 80 px il se centre, comme l'original */
.nav .gl-wordmark, .nav .gl-btn { transition: color 200ms var(--e-ui), background-color 200ms var(--e-ui); }
.nav[data-dark] .gl-wordmark { color: var(--text-invert); }
.nav[data-dark] .gl-btn--primary { background: var(--text-invert); color: var(--bg-primary) !important; }
.nav[data-dark] .gl-btn--secondary { background: color-mix(in srgb, var(--text-invert) 14%, transparent); color: var(--text-invert) !important; box-shadow: none; }
.nav-actions, .hero-actions { position: relative; display: flex; gap: 8px; }

/* ---------- Puces des cartes : 24 de côté, rayon 6 ---------- */
.chip { position: relative; overflow: hidden; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-block: -2px; border-radius: var(--r-chip);
  transition: background-color var(--d-fast) var(--e-ui), color var(--d-fast) var(--e-ui), transform var(--d-fast) var(--e-ui); }
.chip-in, .chip-next { grid-area: 1 / 1; display: block; line-height: 0; transition: transform var(--d-arrow) var(--e-ui); }
.chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip-next { transform: translateX(-160%); }
.chip-next[data-dir="s"] { transform: translateY(-160%); }
.chip-next[data-dir="ne"] { transform: translate(-160%, 160%); }
@media (hover: hover) {
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--nav-h) var(--m) var(--m); }
.hero-shader { position: absolute; inset: var(--nav-h) 0 auto; height: 60svh; z-index: -1; overflow: hidden; background: var(--surface-page); opacity: 0; transition: opacity 900ms var(--e-ui); }
.hero-shader.is-live { opacity: 1; }
.hero-shader canvas, .card-art, .photo-art, .foot-art { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.hero-copy { margin-bottom: 64px; }
.hero h1 { width: 566px; max-width: 100%; margin: 0; font: 500 40px/125% var(--font-sans); letter-spacing: -0.04em; text-wrap: balance; }
.hero-note { margin: 16px 0 0; max-width: 420px; font-size: 13px; line-height: 18px; color: var(--body); }
.hero-actions { margin-top: 20px; }

/* Cartes d'orientation : 246 de haut, rayon 12, 8 d'écart */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.card { position: relative; overflow: hidden; isolation: isolate; height: 246px; padding: 24px; border-radius: var(--r-card);
  --tint: var(--bg-highlight); background: linear-gradient(var(--tint), var(--tint)), var(--surface-page);  /* surface opaque : la trame du hero ne passe pas à travers */
  display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; }
.card:active { --tint: var(--bg-active); }
.card-scene { position: absolute; inset: 0; z-index: -1; }
.card-text { display: flex; flex-direction: column; align-items: flex-start; }
.card-text > * { transition: translate var(--d-fast) var(--e-ui); }
.card h2 { margin: 0; font: 400 20px/25px Sentient, Georgia, serif; letter-spacing: -0.02em; }
.card p { margin: 16px 0 0; font: 400 14px/150% var(--font-sans); color: var(--muted); }
.card-link .chip { background: transparent; color: var(--text-primary); }
.card-link { margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; font: 500 14px/24px var(--font-sans); }
@media (hover: hover) {
  .card:hover { --tint: var(--bg-active); }
  .card:hover .card-text > * { translate: 0 -4px; }
}
@media (hover: hover) {
  .card:hover .chip { background: var(--bg-primary); color: var(--text-invert); }
  .card:hover .chip-in:first-child { transform: translateX(160%); }
  .card:hover .chip-in:first-child[data-dir="s"] { transform: translateY(160%); }
  .card:hover .chip-in:first-child[data-dir="ne"] { transform: translate(160%, -160%); }
  .card:hover .chip-next { transform: none; }
}

/* ---------- Guide : rail + article ---------- */
.guide { display: flex; justify-content: center; padding: 96px var(--m); background: var(--surface-page); }
.guide-frame { display: flex; align-items: flex-start; gap: 28px; width: 1024px; max-width: 100%; }
.rail { position: sticky; top: var(--nav-h); flex-shrink: 0; width: 30%; padding-block: var(--rail-top); }
.rail ol { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.rail li { position: relative; z-index: 1; }
.rail a { display: block; font: 400 16px/24px var(--font-sans); color: var(--muted); transition: color var(--d-hover) var(--e-ui); }
.rail a[aria-current="true"] { color: var(--text-primary); font-weight: 500; }
.rail-tick { position: absolute; left: -14px; top: 0; width: 2px; height: 16px; border-radius: 2px; background: var(--text-primary);
  transition: transform var(--d-fast) var(--e-ui), opacity 120ms var(--e-ui); }
.doc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 96px; }
.doc-sec { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; scroll-margin-top: calc(var(--nav-h) + var(--rail-top)); }
.doc-sec > h2 { align-self: stretch; min-height: 32px; margin: 0; font: 500 24px/24px var(--font-sans); letter-spacing: -0.025em; }
.doc-sec > h2:focus { outline: none; }
.doc-sec > p { align-self: stretch; margin: 0; font: 400 16px/24px var(--font-sans); color: var(--body); text-wrap: pretty; }

.team { display: flex; align-items: flex-start; gap: 16px; padding-block: 16px; max-width: 100%; }
.person { width: 176px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.photo { position: relative; width: 128px; height: 128px; flex-shrink: 0; border-radius: 50%; overflow: clip; background: var(--bg-highlight);
  transition: transform var(--d-fast) var(--e-ui); }
.person-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.person-name { font: 400 14px/14px var(--font-sans); }
.person-link { display: inline-flex; align-items: center; gap: 4px; font: 400 14px/14px var(--font-sans); color: var(--muted); transition: color var(--d-hover) var(--e-ui); }
.person-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .person:hover .photo { transform: translateY(-2px); } .person-link:hover, .rail a:hover { color: var(--text-primary); } }

.facts { align-self: stretch; margin: 0; }
.facts > div { display: flex; gap: 24px; padding: 8px 0 16px; border-top: 1px solid var(--line); }
.facts dt { width: 152px; flex-shrink: 0; font: 500 14px/24px var(--font-sans); }
.facts dd { flex: 1; margin: 0; font: 400 14px/24px var(--font-sans); color: var(--muted); text-wrap: pretty; }

.rows { position: relative; align-self: stretch; padding-block: 16px; }
.row { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.row-link { display: flex; align-items: center; gap: 4px; width: 152px; flex-shrink: 0; margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 500 14px/24px var(--font-sans); color: var(--text-primary); }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--d-hover) var(--e-ui); }
.row-desc { flex: 1; min-width: 0; font: 400 14px/24px var(--font-sans); color: var(--muted); transition: color var(--d-hover) var(--e-ui); }
@media (hover: hover) { .row:hover .row-desc { color: var(--text-primary); } .row:hover .i-arrow { transform: translateX(2px); } .row:hover .i-out { transform: translate(2px, -2px); } }
.copy { transition: transform 120ms var(--e-ui); }
.copy:active { transform: scale(0.97); }
.icon-slot { position: relative; display: inline-grid; width: 16px; height: 16px; }
.icon-slot svg { grid-area: 1 / 1; transition: opacity var(--d-fast) var(--e-ui), transform var(--d-fast) var(--e-ui); }
.icon-slot .i-check { opacity: 0; transform: scale(0.6); }
.copy[data-copied] .i-copy { opacity: 0; transform: scale(0.6); }
.copy[data-copied] .i-check { opacity: 1; transform: none; }

.glider { position: absolute; z-index: 0; pointer-events: none; left: 0; top: 0; width: 0; height: 0; border-radius: 10px; background: var(--bg-subtle); opacity: 0;
  transition: transform 160ms var(--e-ui), width 160ms var(--e-ui), height 160ms var(--e-ui), opacity 120ms var(--e-ui); }
.glider.is-on { opacity: 1; }
.glider.is-jump { transition: opacity 120ms var(--e-ui); }
.foot .glider { background: color-mix(in srgb, var(--text-invert) 8%, transparent); border-radius: 8px; }

/* ---------- Pied de page ---------- */
.foot { background: var(--bg-primary); color: var(--text-invert); overflow: clip; --on-dark-muted: color-mix(in srgb, var(--text-invert) 60%, transparent); --on-dark-faint: color-mix(in srgb, var(--text-invert) 33%, transparent); --on-dark-body: color-mix(in srgb, var(--text-invert) 74%, transparent); }
.foot-top { display: flex; min-height: 273px; }
.foot-brand { width: 50%; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--gutter); padding: 64px var(--gutter) 0 var(--m); }
.foot .gl-wordmark { --logo-h: 28px; color: var(--text-invert); }
.foot .foot-word { --logo-h: var(--fs, 18vw); }
.foot-line { width: 256px; max-width: 100%; margin: 0; font: 400 14px/20px var(--font-sans); color: var(--on-dark-muted); }
.foot-copy { margin: 0; font: 500 13px/18px var(--font-sans); letter-spacing: 0.01em; color: var(--on-dark-faint); }
.foot-cols { position: relative; flex: 1; min-width: 0; display: flex; align-content: flex-start; gap: 40px var(--gutter); padding: 64px var(--m) 0 var(--gutter); }
.foot-col { position: relative; z-index: 1; flex: 0 1 205px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.foot-head { padding-bottom: 4px; font: 500 13px/18px var(--font-sans); letter-spacing: 0.01em; color: var(--on-dark-faint); }
.foot-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font: 400 14px/20px var(--font-sans); }
.foot-col a { color: var(--on-dark-body); transition: color var(--d-hover) var(--e-ui); }
@media (hover: hover) { .foot-col a:hover { color: var(--text-invert); } }
.foot-mark { position: relative; padding: 0 var(--gutter) 0 var(--m); line-height: 1; user-select: none; }
.foot-word { align-self: auto; color: var(--text-invert); }   /* repli avant que le canvas ne dessine le logo */
.foot-mark.is-live .foot-word { visibility: hidden; }
.foot-art { position: absolute; inset: 0 var(--gutter) 0 var(--m); width: calc(100% - var(--gutter) - var(--m)); visibility: hidden; pointer-events: none; }
.foot-mark.is-live .foot-art { visibility: visible; }

/* ---------- Mouvement d'entrée (seulement si le JS tourne) : mots qui se lèvent, blocs qui montent ---------- */
.w { display: inline-block; vertical-align: top; perspective: 600px; }
.wi { display: inline-block; transform-origin: 50% 100%; }
.js .wi { opacity: 0; transform: rotateX(72deg) translateY(32%); }
.js.ready .hero h1 .wi { opacity: 1; transform: none; transition: opacity 900ms var(--e-enter) calc(300ms + var(--d)), transform 900ms var(--e-enter) calc(300ms + var(--d)); }
.js [data-reveal].in h2 .wi { opacity: 1; transform: none; transition: opacity 900ms var(--e-enter) var(--d), transform 900ms var(--e-enter) var(--d); }
.js .nav > :not(.nav-blur), .js .hero-note, .js .hero-actions, .js .card { opacity: 0; translate: 0 8px; }
.js .card { translate: 0 24px; }
.js.ready .nav > :not(.nav-blur), .js.ready .hero-note, .js.ready .hero-actions { opacity: 1; translate: none; transition: opacity 900ms var(--e-enter) var(--delay, 0ms), translate 900ms var(--e-enter) var(--delay, 0ms); }
.js.ready .card { opacity: 1; translate: none; transition: opacity 1000ms var(--e-enter) var(--delay, 0ms), translate 1000ms var(--e-enter) var(--delay, 0ms); }
.js [data-reveal] > :not(h2) { opacity: 0; translate: 0 16px; }
.js [data-reveal].in > :not(h2) { opacity: 1; translate: none; transition: opacity 900ms var(--e-enter) 120ms, translate 900ms var(--e-enter) 120ms; }

/* Sortie du hero au défilement (bureau seulement : --out va de 0 à 1) */
.hero h1 { transform-origin: 50% 100%; transform: perspective(600px) rotateX(calc(var(--out, 0) * 58deg)) translateY(calc(var(--out, 0) * -26%)); opacity: calc(1 - var(--out, 0)); }
.hero-note, .hero-actions { --o: calc(1 - var(--out, 0)); }
.js.ready .hero-note, .js.ready .hero-actions { opacity: var(--o); }
.hero-actions { margin-top: 20px; }
.card { scale: calc(1 - var(--out, 0) * 0.03); }

@media (prefers-reduced-motion: reduce) {
  .gl *, .gl *::before, .gl *::after { transition: none !important; animation: none !important; }
  .js .wi, .js .nav > :not(.nav-blur), .js .hero-note, .js .hero-actions, .js .card, .js [data-reveal] > :not(h2) { opacity: 1; translate: none; transform: none; }
}

/* ---------- Tablette ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .card p { display: none; }
  .card-link { margin-top: 12px; }
  .foot-top { flex-direction: column; min-height: 0; }
  .foot-brand { width: auto; padding-right: var(--m); }
  .foot-cols { padding: 48px var(--m) 64px; }
}

/* ---------- Téléphone : une colonne, pas de rail ---------- */
@media (max-width: 767px) {
  .gl { --m: 20px; --nav-h: 56px; }
  .nav .gl-btn--secondary { display: none; }
  .nav-actions { transition: opacity 180ms var(--e-exit), translate 180ms var(--e-exit), visibility 0s linear 180ms; }
  .nav[data-cta="off"] .nav-actions { opacity: 0; translate: 0 6px; visibility: hidden; }
  .nav[data-cta="on"] .nav-actions { transition: opacity 520ms cubic-bezier(0.4, 0, 0.2, 1), translate 600ms var(--e-ui), visibility 0s; }
  .hero h1 { width: auto; font-size: 24px; letter-spacing: -0.02em; }
  .hero-copy { margin-bottom: 0; min-height: calc(100svh - var(--nav-h) - var(--m)); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 40px; }
  .cards { grid-template-columns: 1fr; }
  .card { height: 264px; }
  .guide { flex-direction: column; padding: 0 0 80px; }
  .guide-frame { padding: 48px var(--m) 0; }
  .rail { display: none; }
  .doc { gap: 48px; }
  .doc-sec { scroll-margin-top: 72px; }
  .doc-sec > h2 { min-height: 0; font-size: 22px; line-height: 28px; }
  .doc-sec > p { font-size: 14px; line-height: 150%; }
  .facts > div { flex-direction: column; gap: 0; }
  .facts dt { width: auto; }
  .row { flex-wrap: wrap; gap: 4px 24px; }
  .foot-top { flex-direction: column; min-height: 0; }
  .foot-brand { width: auto; padding: 48px var(--m) 0; }
  .foot-cols { flex-wrap: wrap; padding: 40px var(--m) 48px; gap: 32px var(--gutter); }
  .foot-col { flex: 0 0 calc((100% - var(--gutter)) / 2); }
}