/* Academia Valente
   Direction : cinématique, sombre, or héraldique tiré du blason. Un seul thème (sombre) sur tout le site.
   Rayons : boutons et champs 10px, cartes et photos 20px, tags en pilule. */

:root {
  --bg: #0b0d10;
  --bg-2: #111419;
  --surface: #161a20;
  --surface-2: #1d222a;
  --line: rgb(255 255 255 / .09);
  --line-strong: rgb(255 255 255 / .18);
  --ink: #f2efe9;
  --body: #c4c1ba;
  --muted: #8f8c86;
  --gold: #d6b16a;
  --gold-hover: #e4c486;
  --on-gold: #14110b;
  --gold-soft: rgb(214 177 106 / .12);
  --danger: #f08a7e;
  --success: #8fd19e;

  --r-ctl: 10px;
  --r-card: 20px;
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 64px;
  --gutter: 16px;
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 32px; --nav-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 1rem/1.65 var(--font-body);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Grain filmique, fixe et non interactif */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.04; }
h1 em, h2 em { font-style: italic; color: var(--gold); }
h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--on-gold); }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--gold); color: var(--on-gold); padding: 10px 16px; border-radius: var(--r-ctl); }
.skip:focus { top: 12px; }

.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
  font: 600 .92rem/1 var(--font-body); padding: 14px 20px; border-radius: var(--r-ctl);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s, color .3s, transform .2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--gold-hover); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: rgb(11 13 16 / .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--lg { padding: 17px 26px; font-size: 1rem; }
.btn .ph { font-size: 1.1em; transition: transform .3s var(--ease); }
.btn:hover .ph-arrow-right, .btn:hover .ph-arrow-up-right { transform: translateX(3px); }
.btn[disabled] { opacity: .65; cursor: progress; }

.icon-btn {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-size: 1.1rem; cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s var(--ease);
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.icon-btn:active { transform: scale(.95); }

/* Navigation */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled, .nav.is-open {
  background: rgb(11 13 16 / .84);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; white-space: nowrap; }
.brand img { width: 34px; height: auto; }
.brand span { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--ink); }
.nav__links { display: none; gap: 26px; }
.nav__links a { text-decoration: none; font-size: .88rem; font-weight: 500; color: var(--body); transition: color .2s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--gold); }
.nav__switch { display: none; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--muted); text-decoration: none; padding-left: 22px; border-left: 1px solid var(--line-strong); }
.nav__switch:hover { color: var(--gold); }
.nav__cta { display: none; }
.nav__toggle {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-ctl);
  border: 1px solid var(--line-strong); background: rgb(11 13 16 / .4); color: var(--ink); font-size: 1.3rem; cursor: pointer;
}
.nav__mobile {
  display: flex; flex-direction: column; padding: 8px var(--gutter) 28px;
  height: calc(100dvh - var(--nav-h)); overflow-y: auto; background: var(--bg);
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a:not(.btn) {
  padding: 16px 0; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; border-bottom: 1px solid var(--line);
}
.nav__mobile a.nav__mobile-switch { font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--gold); border: 0; margin-top: 12px; }
.nav__mobile .btn { margin-top: 20px; }
@media (min-width: 1200px) {
  .nav__links, .nav__cta, .nav__switch { display: flex; }
  .nav__toggle, .nav__mobile { display: none !important; }
}

/* ===== Page d'accueil : les deux portes ===== */
.gate-top {
  position: absolute; inset: 0 0 auto 0; z-index: 5; display: flex; justify-content: center;
  padding: 18px var(--gutter); pointer-events: none;
}
.gate-top .brand { margin: 0; pointer-events: auto; }
.gate-top .brand img { width: 40px; }
.gate-top .brand span { font-size: 1.6rem; }
.gate { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.door {
  position: relative; flex: 1 1 0; min-height: 50vh; min-height: 50svh; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end; text-decoration: none; color: var(--ink);
  transition: flex-grow 1s var(--ease);
}
.door:first-child { padding-top: 64px; }
.door__img { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.door__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease), filter 1s; filter: saturate(.9) brightness(.9); }
.door::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(11 13 16 / .96) 8%, rgb(11 13 16 / .55) 50%, rgb(11 13 16 / .2) 85%);
}
.door__body { padding: 24px var(--gutter) 28px; width: 100%; max-width: 620px; }
.door__label { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.door__title { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.3rem, 9vw, 4.4rem); line-height: 1; margin-top: 10px; letter-spacing: -0.02em; }
.door__text { display: block; margin-top: 10px; max-width: 42ch; color: var(--body); font-size: .96rem; text-wrap: pretty; }
.door__go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  font-weight: 600; font-size: .92rem; color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid var(--gold);
}
.door__go .ph { color: var(--gold); transition: transform .4s var(--ease); }
.door:hover .door__img img, .door:focus-visible .door__img img { transform: scale(1.05); filter: saturate(1) brightness(.92); }
.door:hover .door__go .ph { transform: translateX(5px); }
.door + .door { border-top: 1px solid var(--line-strong); }
.gate-foot {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  padding: 20px; font-size: .8rem; color: var(--muted);
}
.gate-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.gate-foot a:hover, .gate-foot a:focus-visible { color: var(--gold); }
@media (min-width: 900px) {
  .gate { flex-direction: row; }
  .door { min-height: 100vh; min-height: 100svh; }
  .door:first-child { padding-top: 0; }
  .door + .door { border-top: 0; border-left: 1px solid var(--line-strong); }
  .door__body { padding: 0 48px 104px; }
  .gate:hover .door { flex-grow: .8; }
  .gate:hover .door:hover { flex-grow: 1.3; }
  /* sur ordinateur, posé sur le bas des deux portes ; seul le lien reste cliquable */
  .gate-foot { position: absolute; inset: auto 0 0 0; z-index: 5; pointer-events: none; }
  .gate-foot a { pointer-events: auto; }
}

/* ===== Hero plein cadre ===== */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden;
  padding: calc(var(--nav-h) + 40px) 0 48px;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 2%, rgb(11 13 16 / .72) 40%, rgb(11 13 16 / .2) 75%, rgb(11 13 16 / .6)),
    linear-gradient(to right, rgb(11 13 16 / .55), transparent 70%);
}
.hero h1 { font-size: clamp(2.7rem, 10vw, 5.4rem); max-width: 15ch; line-height: 1.04; padding-bottom: .06em; }
.hero__lead { font-size: 1.06rem; max-width: 46ch; margin-top: 18px; color: var(--body); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__place { position: absolute; right: var(--gutter); bottom: 24px; font-size: .78rem; color: var(--muted); display: none; transition: opacity .6s; }
@media (min-width: 768px) { .hero { padding-bottom: 88px; } .hero__place { display: block; } }
@media (max-width: 479px) { .hero__ctas .btn { flex: 1 1 100%; } }

/* Diaporama du hero */
.slideshow img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.slideshow img.is-on { opacity: 1; }

/* ===== Sections ===== */
.section { padding: 88px 0; position: relative; }
.section--alt { background: var(--bg-2); }
@media (min-width: 900px) { .section { padding: 136px 0; } }
.section h2 { font-size: clamp(2.3rem, 6vw, 3.8rem); max-width: 18ch; }
.lead { font-size: 1.06rem; max-width: 60ch; margin-top: 18px; }
.head { margin-bottom: 44px; }
@media (min-width: 900px) { .head { margin-bottom: 64px; } }

/* Chiffres */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.stat { background: var(--bg); padding: 24px 18px; }
.stat__value { display: block; font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.stat__value small { font-size: .45em; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.stat__label { display: block; margin-top: 10px; font-size: .84rem; color: var(--muted); line-height: 1.45; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } .stat { padding: 32px 28px; } }

/* Expertises */
.bento { display: grid; gap: 14px; }
.tile {
  position: relative; overflow: hidden; isolation: isolate; padding: 26px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px;
}
.tile__icon { font-size: 1.9rem; color: var(--gold); margin-bottom: 4px; }
.tile h3 { font-family: var(--font-display); font-weight: 500; font-size: 2rem; letter-spacing: -0.01em; }
.tile p { max-width: 50ch; }
.tile--photo { min-height: 480px; justify-content: flex-end; border-color: transparent; }
.tile--photo > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tile--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(11 13 16 / .97) 30%, rgb(11 13 16 / .35) 72%, rgb(11 13 16 / .1)); }
.tile--photo:hover > img { transform: scale(1.03); }
.ticks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 24px; font-size: .95rem; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 6px; height: 11px; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (min-width: 900px) {
  .bento { grid-template-columns: 1.3fr 1fr; }
  .tile--photo { grid-row: span 2; padding: 44px; min-height: 620px; }
  .tile { padding: 36px; }
}

/* Questions */
.questions { margin-top: 72px; }
.questions h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; margin-bottom: 22px; }
.questions__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.questions__list li { padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); font-size: .93rem; font-weight: 500; transition: border-color .25s, color .25s; }
.questions__list li:hover { border-color: var(--gold); color: var(--gold); }

/* ===== Défilement horizontal (Normandie, le fil des territoires) ===== */
.pan { position: relative; padding: 88px 0 72px; background: var(--bg-2); }
.pan__intro { margin-bottom: 32px; }
.pan__intro h2 { font-size: clamp(2.3rem, 6vw, 3.8rem); max-width: 16ch; }
.pan__track {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0 var(--gutter) 24px; scroll-padding: 0 var(--gutter); scrollbar-width: none;
}
.pan__track::-webkit-scrollbar { display: none; }
.slide {
  position: relative; flex: none; width: 82vw; max-width: 520px; aspect-ratio: 4 / 5;
  border-radius: var(--r-card); overflow: hidden; isolation: isolate; scroll-snap-align: start;
  display: flex; align-items: flex-end;
}
.slide > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(11 13 16 / .95) 15%, rgb(11 13 16 / .3) 58%, transparent); }
.slide__body { padding: 24px; }
.slide__kicker { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.slide h3 { font-family: var(--font-display); font-weight: 500; font-size: 2.1rem; line-height: 1.05; margin-top: 8px; }
.slide p { margin-top: 10px; font-size: .95rem; max-width: 42ch; }
.slide--text { background: var(--surface); border: 1px solid var(--line); align-items: center; }
.slide--text::before { display: none; }
.slide--text .slide__body { padding: 30px; }
.slide--text h3 { font-size: 2.4rem; }

.thread { position: relative; margin: 8px var(--gutter) 0; height: 12px; }
.thread__line, .thread__fill { position: absolute; left: 0; right: 0; top: 50%; height: 1px; }
.thread__line { background: var(--line-strong); }
.thread__fill { background: var(--gold); transform-origin: left; transform: scaleX(0); transition: transform .4s var(--ease); }
.thread__dots { position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%; }
.thread__dots span { width: 9px; height: 9px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-strong); transition: background-color .3s, border-color .3s; }
.thread__dots span.is-on { background: var(--gold); border-color: var(--gold); }

@media (min-width: 900px) {
  .pan { padding: 136px 0 0; }
  .pan--pinned .pan__viewport { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .pan--pinned .pan__track { overflow: visible; scroll-snap-type: none; width: max-content; gap: 24px; padding-bottom: 0; will-change: transform; }
  .pan--pinned .slide { width: min(60vw, 860px); max-width: none; aspect-ratio: auto; height: min(68vh, 620px); height: min(68svh, 620px); }
  .pan--pinned .slide--text { width: min(38vw, 500px); }
  .pan--pinned .slide__body { padding: 44px; }
  .pan--pinned .slide h3 { font-size: 3rem; }
  .pan--pinned .thread__fill { transition: none; }
  .pan--pinned .thread { margin: 40px auto 0; width: min(100% - 2 * var(--gutter), 1216px); }
  .pan:not(.pan--pinned) { padding-bottom: 96px; }
}

/* Méthode */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
.steps li { position: relative; }
.steps__icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px; position: relative; z-index: 1;
  border: 1px solid var(--gold); color: var(--gold); font-size: 1.4rem; margin-bottom: 18px; background: var(--bg);
}
.steps h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.8rem; margin-bottom: 6px; }
.steps p { font-size: .96rem; max-width: 34ch; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: 66px; right: -14px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--line)); }
}

/* Niveaux */
.levels { display: grid; gap: 14px; }
.level { padding: 28px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.level h3 { font-family: var(--font-display); font-weight: 500; font-size: 2rem; margin-bottom: 10px; }
.level--gold { border-color: rgb(214 177 106 / .55); background: linear-gradient(160deg, var(--gold-soft), var(--surface) 60%); }
.tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); }
@media (min-width: 900px) { .levels { grid-template-columns: repeat(3, 1fr); } .level { padding: 36px; } }

/* Déroulement */
.howto { display: grid; gap: 40px; align-items: center; }
.howto__media { margin: 0; border-radius: var(--r-card); overflow: hidden; }
.howto__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.howto__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.howto__list li { display: flex; gap: 16px; }
.howto__list .ph { flex: none; font-size: 1.5rem; color: var(--gold); margin-top: 2px; }
.howto__list strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.howto__list span { font-size: .95rem; }
@media (min-width: 900px) { .howto { grid-template-columns: .9fr 1.1fr; gap: 88px; } }

/* Avis */
.avis__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.avis__controls { display: none; gap: 10px; }
@media (min-width: 768px) { .avis__controls { display: flex; } }
.carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 400px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter))) 24px;
  scroll-padding: 0 max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.quote {
  margin: 0; scroll-snap-align: start; padding: 28px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
}
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.28; color: var(--ink); font-weight: 500; }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-size: .86rem; color: var(--muted); }
.quote figcaption strong { display: block; color: var(--ink); font-weight: 600; }
.avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); font-weight: 700; }

/* À propos */
.about { display: grid; gap: 44px; align-items: center; }
.about__media { margin: 0; border-radius: var(--r-card); overflow: hidden; }
.about__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.about__text p { margin-top: 18px; font-size: 1.04rem; max-width: 60ch; }
.facts { margin: 32px 0 0; padding: 0; display: grid; }
.facts div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); font-weight: 500; }
@media (min-width: 640px) { .facts div { grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; } }
@media (min-width: 900px) { .about { grid-template-columns: .85fr 1.15fr; gap: 88px; } }

/* Bandeau photo */
.band { position: relative; min-height: 72vh; min-height: 72svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.band > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--bg) 4%, rgb(11 13 16 / .5) 50%, rgb(11 13 16 / .2)); }
.band__body { padding-bottom: 64px; }
.band h2 { font-size: clamp(2.3rem, 7vw, 4.4rem); max-width: 18ch; }
.band p { margin-top: 16px; max-width: 52ch; }

/* Contact */
.contact { display: grid; gap: 44px; }
.contact__list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.contact__list li { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 500; }
.contact__list .ph { font-size: 1.3rem; color: var(--gold); flex: none; }
.contact__list a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.contact__list a:hover { border-color: var(--gold); }
@media (min-width: 960px) { .contact { grid-template-columns: .8fr 1.2fr; gap: 88px; align-items: start; } }

.form { padding: 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 768px) { .form { padding: 40px; } }
.form__grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .form__grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { font-size: .86rem; font-weight: 600; color: var(--ink); padding: 0; }
.optional { font-weight: 400; color: var(--muted); }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; font: 400 1rem/1.5 var(--font-body); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  padding: 13px 14px; transition: border-color .2s, box-shadow .2s;
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgb(214 177 106 / .2); }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field__hint { font-size: .82rem; color: var(--muted); }
.field__error { font-size: .82rem; color: var(--danger); font-weight: 500; }
.field__error:empty { display: none; }
.chips { flex-direction: row; flex-wrap: wrap; }
.chips legend { width: 100%; margin-bottom: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .9rem; font-weight: 500; transition: all .2s var(--ease); }
.chips input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.chips input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .87rem; cursor: pointer; }
.consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__footer { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.form__status { font-size: .92rem; font-weight: 500; }
.form__status.is-success { color: var(--success); }
.form__status.is-error { color: var(--danger); }
.form.is-sent .form__grid { opacity: .5; pointer-events: none; }
@media (max-width: 479px) { .form__footer .btn { width: 100%; } }

/* Pied de page */
.footer { border-top: 1px solid var(--line); padding: 48px 0 40px; }
.footer__inner { display: grid; gap: 28px; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__brand img { width: 52px; height: auto; }
.footer__brand strong { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--ink); }
.footer__brand span { font-size: .86rem; color: var(--muted); }
.footer__links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer__links a { text-decoration: none; font-size: .9rem; color: var(--body); }
.footer__links a:hover { color: var(--gold); }
.footer__copy { font-size: .8rem; color: var(--muted); }
@media (min-width: 900px) { .footer__inner { grid-template-columns: auto 1fr auto; gap: 48px; align-items: center; } .footer__links { justify-content: center; } }

/* Mouvement */
@media (prefers-reduced-motion: no-preference) {
  .kenburns { animation: kenburns 18s var(--ease) both; }
  .js .load { opacity: 0; transform: translateY(22px); animation: rise 1.1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 120ms + 150ms); }
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Mentions légales */
.legal { max-width: 780px; padding-top: calc(var(--nav-h) + 48px); padding-bottom: 96px; }
.legal h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); margin-bottom: 28px; }
.legal h2 { font-size: 1.8rem; margin: 40px 0 12px; }
.legal p, .legal li { margin-top: 10px; }
.legal a { color: var(--gold); }
.legal ul { padding-left: 18px; font-size: .9rem; }
.legal h3 { font: 600 1.05rem/1.4 var(--font-body); color: var(--ink); margin: 26px 0 4px; }
.legal__toc { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: .92rem; }
.legal__form { margin: 14px 0 0; padding: 4px 20px 18px; border-left: 2px solid var(--gold); background: var(--surface); border-radius: 0 12px 12px 0; font-size: .92rem; }
.not-found__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 8px; }
.legal .not-found__links a { color: inherit; }
.legal .not-found__links .btn--gold { color: var(--on-gold); }

@media (max-width: 899px) {
  .tile--photo::before { background: linear-gradient(to top, rgb(11 13 16 / .97) 40%, rgb(11 13 16 / .62)); }
}

/* ===== Blocs de contenu ajoutés (communs aux deux versions) ===== */

/* Livrables */
.deliver { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.deliver__item { padding: 28px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.deliver__item .ph { font-size: 1.8rem; color: var(--gold); }
.deliver__item h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; margin: 14px 0 10px; }
.deliver__item--gold { border-color: rgb(214 177 106 / .5); background: linear-gradient(160deg, var(--gold-soft), var(--surface) 65%); }
@media (min-width: 800px) { .deliver { grid-template-columns: 1fr 1fr; } .deliver__item { padding: 36px; } }

/* Référence */
.case { display: grid; gap: 40px; align-items: center; }
.case__media { margin: 0; border-radius: var(--r-card); overflow: hidden; }
.case__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.case__list { margin-top: 26px; }
.case__note { margin-top: 22px; font-size: .86rem; color: var(--muted); font-style: italic; }
@media (min-width: 900px) { .case { grid-template-columns: .85fr 1.15fr; gap: 88px; } }

/* Encadré du jeu « Aux commandes » (pages Cours et Entreprises) */
.jeu-promo { display: grid; gap: 40px; align-items: center; }
.jeu-promo__go { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.jeu-promo__note { font-size: .86rem; color: var(--muted); }
.jeu-promo__media { margin: 0 auto; width: min(280px, 72vw); border-radius: 30px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.jeu-promo__media img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .jeu-promo { grid-template-columns: 1.25fr .75fr; gap: 88px; } }

/* Principes */
.principles { display: grid; gap: 40px; }
.principles__who { margin-top: 32px; padding: 24px; border-radius: var(--r-card); border: 1px solid var(--line); max-width: 360px; }
.principles__list { margin-top: 0; }
@media (min-width: 960px) { .principles { grid-template-columns: .8fr 1.2fr; gap: 88px; } .principles__head { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; } }

/* Hero portrait (cours) */
.hero--portrait .hero__bg img { object-position: 68% 30%; }
@media (max-width: 767px) { .hero--portrait .hero__bg img { object-position: 62% 20%; } }

/* Pédagogie + extrait de fascicule */
.pedago { display: grid; gap: 44px; align-items: start; }
@media (min-width: 1000px) { .pedago { grid-template-columns: 1fr 1fr; gap: 72px; } }
.excerpt__caption { margin-top: 14px; font-size: .82rem; color: var(--muted); }
.pedago__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.pedago__list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; }
.pedago__list .ph { font-size: 1.5rem; color: var(--gold); margin-top: 2px; }
.pedago__list strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.pedago__list span { font-size: .95rem; }

/* Bibliothèque de documents */
.library { display: grid; gap: 40px; align-items: center; }
.library__numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.library__numbers > div { background: var(--bg-2); padding: 24px 20px; }
@media (min-width: 960px) { .library { grid-template-columns: 1fr 1fr; gap: 88px; } }
.library__text .ticks { margin-top: 24px; }
.stats__note { margin-top: 18px; font-size: .9rem; color: var(--muted); max-width: 80ch; }

/* Territoires en version compacte */
.pan--compact .slide { aspect-ratio: 3 / 4; width: 62vw; max-width: 340px; }
.pan--compact .slide h3 { font-size: 1.7rem; }
@media (min-width: 900px) {
  .pan--compact.pan--pinned .slide { width: min(30vw, 400px); height: min(56vh, 500px); height: min(56svh, 500px); }
  .pan--compact.pan--pinned .slide h3 { font-size: 2.1rem; }
  .pan--compact.pan--pinned .slide__body { padding: 30px; }
}
.hero--portrait h1 { font-size: clamp(2.5rem, 8vw, 4rem); max-width: 20ch; }

/* ===== Transitions entre les pages ===== */
/* Navigateurs récents : transition native, la photo de la porte se transforme en photo d'en-tête */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 420ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 620ms var(--ease) both vt-in; }
::view-transition-group(entree-entreprises), ::view-transition-group(entree-cours) { animation-duration: 760ms; animation-timing-function: var(--ease); }
::view-transition-old(entree-entreprises), ::view-transition-new(entree-entreprises),
::view-transition-old(entree-cours), ::view-transition-new(entree-cours) { height: 100%; object-fit: cover; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
/* Autres navigateurs : fondu à l'arrivée et au départ */
html:not(.vt) body { animation: page-in 600ms var(--ease) both; }
html.is-leaving body { opacity: 0; transform: translateY(-8px); transition: opacity 320ms ease, transform 320ms ease; }
@keyframes page-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html:not(.vt) body { animation: none; }
}

/* ===== Portes : plusieurs photos qui défilent ===== */
.door__img img { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease, transform 1.6s var(--ease), filter 1s; }
.door__img img.is-on { opacity: 1; }
.door__dots { display: flex; gap: 6px; margin-top: 16px; }
.door__dots i { width: 18px; height: 2px; border-radius: 2px; background: var(--line-strong); transition: background-color .4s; }
.door__dots i.is-on { background: var(--gold); }

/* Enquête */
.inquiry { list-style: none; margin: 0 0 56px; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; counter-reset: q; }
.inquiry li { background: var(--bg); padding: 24px 22px; display: grid; gap: 8px; }
.inquiry__q { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.2; color: var(--ink); font-style: italic; }
.inquiry__a { font-size: .95rem; }
@media (min-width: 900px) { .inquiry { grid-template-columns: repeat(3, 1fr); } .inquiry li { padding: 32px 28px; } }
.sub-head { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.head .lead + .lead { margin-top: 12px; }


/* Pied de page : mentions sur deux lignes */
.footer__copy { max-width: 40ch; }
.footer__links a { white-space: nowrap; }
@media (min-width: 900px) { .footer__copy { text-align: right; } }

/* Découvertes */
.discoveries { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-strong); }
.discoveries li { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.discoveries .ph { grid-row: span 2; font-size: 1.7rem; color: var(--gold); margin-top: 4px; }
.discoveries h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.15; }
.discoveries p { max-width: 62ch; }
@media (min-width: 900px) {
  .discoveries { grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .discoveries li { padding: 36px 0; }
}
.discoveries__note { margin-top: 28px; font-size: .92rem; color: var(--muted); max-width: 70ch; }
@media (min-width: 800px) { .deliver__item--wide { grid-column: 1 / -1; } }

/* Fascicules imprimés */
.print-offer { margin-top: 64px; display: grid; gap: 32px; align-items: center; padding: 24px; border-radius: var(--r-card); border: 1px solid rgb(214 177 106 / .45); background: linear-gradient(150deg, var(--gold-soft), var(--surface) 60%); }
.print-offer__media { margin: 0; border-radius: 12px; overflow: hidden; background: #111419; }
.print-offer__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.print-offer__text h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 4.4vw, 2.6rem); line-height: 1.1; }
.print-offer__text h3 em { display: block; color: var(--gold); font-style: italic; }
.print-offer__text > p { margin-top: 14px; max-width: 56ch; }
.print-offer__steps { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 14px; }
.print-offer__steps li { display: flex; gap: 14px; align-items: flex-start; }
.print-offer__steps .ph { flex: none; font-size: 1.4rem; color: var(--gold); margin-top: 1px; }
.print-offer__steps strong { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .print-offer { grid-template-columns: .9fr 1.1fr; gap: 56px; padding: 40px; } }

/* ===== Interrupteur jour / nuit ===== */
.theme-toggle {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: space-between;
  width: 66px; height: 34px; padding: 0 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgb(11 13 16 / .35); color: var(--muted);
  transition: background-color .4s, border-color .4s;
}
.theme-toggle .ph { position: relative; z-index: 1; font-size: 15px; transition: color .4s; }
.theme-toggle .ph-moon-stars { color: var(--on-gold); }
.theme-toggle__knob {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 999px;
  background: var(--gold); transition: transform .45s var(--ease), background-color .4s;
}
.theme-toggle[aria-checked="true"] .theme-toggle__knob { transform: translateX(32px); }
.theme-toggle[aria-checked="true"] .ph-moon-stars { color: var(--muted); }
.theme-toggle[aria-checked="true"] .ph-sun { color: var(--on-gold); }
.theme-toggle:hover { border-color: var(--gold); }
.gate-top .theme-toggle { position: absolute; right: var(--gutter); top: 22px; pointer-events: auto; }
/* Petit écran : le blason à gauche, l'interrupteur à droite, sans chevauchement */
@media (max-width: 479px) {
  .gate-top { justify-content: space-between; align-items: center; }
  .gate-top .brand span { font-size: 1.35rem; }
  .gate-top .brand img { width: 34px; }
  .gate-top .theme-toggle { position: relative; right: auto; top: auto; }
}
@media (max-width: 1199px) { .nav__inner { gap: 12px; } }

/* ===== Mode jour ===== */
:root[data-theme="light"] {
  --bg: #f5f6f8;
  --bg-2: #eceef2;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --line: rgb(16 22 31 / .1);
  --line-strong: rgb(16 22 31 / .2);
  --ink: #10161f;
  --body: #3b4250;
  --muted: #5f6673;
  --gold: #8a6516;
  --gold-hover: #75550f;
  --on-gold: #ffffff;
  --gold-soft: rgb(138 101 22 / .09);
  --danger: #b42318;
  --success: #17703f;
  color-scheme: light;
}
:root[data-theme="light"] body::after { opacity: .035; }
:root[data-theme="light"] .nav.is-scrolled,
:root[data-theme="light"] .nav.is-open { background: rgb(245 246 248 / .86); }
:root[data-theme="light"] .nav__toggle,
:root[data-theme="light"] .theme-toggle { background: rgb(255 255 255 / .6); }
:root[data-theme="light"] .btn--ghost { background: rgb(255 255 255 / .55); }
:root[data-theme="light"] .hero::before {
  background:
    linear-gradient(to top, var(--bg) 6%, rgb(245 246 248 / .86) 40%, rgb(245 246 248 / .25) 76%, rgb(245 246 248 / .45)),
    linear-gradient(to right, rgb(245 246 248 / .7), transparent 70%);
}
:root[data-theme="light"] .deliver__item--gold,
:root[data-theme="light"] .level--gold,
:root[data-theme="light"] .course-flow li:first-child,
:root[data-theme="light"] .print-offer { border-color: rgb(138 101 22 / .4); }
:root[data-theme="light"] .deliver__item, :root[data-theme="light"] .level,
:root[data-theme="light"] .quote, :root[data-theme="light"] .form { box-shadow: 0 1px 2px rgb(16 22 31 / .04), 0 12px 30px -16px rgb(16 22 31 / .18); }
:root[data-theme="light"] .print-offer__media,
:root[data-theme="light"] .door__img img[style*="contain"] { background-color: #e9ecf0 !important; }

/* Textes posés sur une photo : toujours clairs, de jour comme de nuit */
:root[data-theme="light"] .door, :root[data-theme="light"] .door__go,
:root[data-theme="light"] .gate-top .brand span { color: #f2efe9; }
:root[data-theme="light"] .door__text { color: #d4d1ca; }
:root[data-theme="light"] .door__label, :root[data-theme="light"] .door__go .ph { color: #e2c27f; }
:root[data-theme="light"] .slide h3, :root[data-theme="light"] .band h2 { color: #f4f2ed; }
:root[data-theme="light"] .slide p, :root[data-theme="light"] .band p { color: #dcd9d2; }
:root[data-theme="light"] .slide__kicker, :root[data-theme="light"] .band h2 em { color: #e2c27f; }
:root[data-theme="light"] .slide--text h3 { color: var(--ink); }
:root[data-theme="light"] .slide--text p { color: var(--body); }
:root[data-theme="light"] .slide--text .slide__kicker { color: var(--gold); }
:root[data-theme="light"] .band::before { background: linear-gradient(to top, rgb(11 13 16 / .85) 8%, rgb(11 13 16 / .4) 55%, rgb(11 13 16 / .15)); }
/* Passage jour / nuit : simple fondu, sans le mouvement des changements de page */
html.theme-switching::view-transition-old(root) { animation: 450ms ease both vt-out; }
html.theme-switching::view-transition-new(root) { animation: 450ms ease both theme-in; }
@keyframes theme-in { from { opacity: 0; } }
.nav__links a { white-space: nowrap; }
.door__dots i { background: rgb(255 255 255 / .28); }
:root[data-theme="light"] .door__dots i.is-on { background: #e2c27f; }


/* ===== Pages de fascicules ===== */
.page-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; }
.page-zoom img { width: 100%; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 24px 50px -24px rgb(0 0 0 / .65), 0 0 0 1px rgb(0 0 0 / .06); transition: transform .5s var(--ease); }
.page-zoom:hover img { transform: translateY(-4px); }
.pedago__page { margin: 0; align-self: end; max-width: 520px; justify-self: center; width: 100%; }
@media (min-width: 1000px) { .pedago { align-items: stretch; } .pedago__page { justify-self: end; } }

.pages-head { margin-top: 72px; margin-bottom: 24px; }
.pages-head h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.pages-head p { margin-top: 6px; color: var(--muted); }
.pages {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(64vw, 280px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 8px max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter))) 28px;
  scroll-padding: 0 max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
}
.pages::-webkit-scrollbar { display: none; }
.pages__item { margin: 0; scroll-snap-align: start; }
.pages__item figcaption { margin-top: 14px; font-size: .86rem; color: var(--muted); }
.pages__item figcaption strong { display: block; color: var(--ink); font-weight: 600; font-size: .95rem; }

.print-offer__media { background: transparent; }
.print-offer__media img { aspect-ratio: auto; object-fit: initial; background: transparent; box-shadow: none; }
.print-offer__media figcaption { margin-top: 10px; font-size: .84rem; color: var(--muted); }
.door__img img.door__page { object-fit: contain; background-color: #1a1e25; padding: 6% 0; }

/* Visionneuse */
.viewer { padding: 0; border: 0; background: transparent; max-width: min(94vw, 900px); max-height: 94dvh; overflow: visible; }
.viewer::backdrop { background: rgb(8 10 13 / .82); backdrop-filter: blur(4px); }
.viewer img { display: block; max-width: 100%; max-height: 92dvh; width: auto; margin: 0 auto; border-radius: 4px; background: #fff; }
.viewer__close { position: absolute; top: -14px; right: -14px; background: var(--bg); z-index: 1; }
@media (max-width: 600px) { .viewer__close { top: 8px; right: 8px; } }

/* ===== Déroulement d'un cours ===== */
.course-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: etape; }
.course-flow li {
  position: relative; padding: 28px 26px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.course-flow__when { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.course-flow .ph { font-size: 1.9rem; color: var(--gold); margin-top: 6px; }
.course-flow h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; line-height: 1.15; }
.course-flow li:nth-child(2) { border-color: rgb(214 177 106 / .5); background: linear-gradient(160deg, var(--gold-soft), var(--surface) 65%); }
@media (min-width: 760px) { .course-flow { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1150px) {
  .course-flow { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .course-flow li { padding: 32px 28px; }
  .course-flow li:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -13px; width: 10px; height: 10px; z-index: 1;
    border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); transform: translateY(-50%) rotate(45deg);
  }
}
:root[data-theme="light"] .course-flow li:nth-child(2) { border-color: rgb(138 101 22 / .4); }

/* ===== Étoiles ===== */
.stars { display: inline-flex; gap: 2px; color: var(--gold); font-size: 1rem; margin-bottom: 10px; }
.stat .stars, .library__numbers .stars { display: flex; }
.avis__score { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: .9rem; color: var(--muted); }
.avis__score .stars { margin: 0; font-size: 1.1rem; }

/* Avis : statut en grisé */
.quote__status { display: block; margin-top: 4px; font-style: normal; font-size: .8rem; color: var(--muted); }
.quote__status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--gold); margin-right: 6px; vertical-align: 1px; }

/* ===== Deux colonnes : texte et visuel ===== */
.split { display: grid; gap: 40px; align-items: center; }
.split__text { display: grid; gap: 22px; align-content: start; }
.split__text h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 20ch; }
.split__text .lead { margin-top: 0; }
.split__media { margin: 0; border-radius: var(--r-card); overflow: hidden; }
.split__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: stretch; }
  .split--top { align-items: center; }
  .split__media img { aspect-ratio: auto; min-height: 100%; }
}
.inquiry--stack { margin: 0; grid-template-columns: 1fr !important; }

/* Outils de l'enquête */
.tools__head { margin-top: 72px; }
.tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.tools li { background: var(--bg-2); padding: 22px 20px; display: grid; gap: 6px; align-content: start; }
.tools .ph { font-size: 1.6rem; color: var(--gold); margin-bottom: 6px; }
.tools strong { color: var(--ink); font-weight: 600; font-size: 1.02rem; }
.tools span { font-size: .9rem; color: var(--body); }
@media (min-width: 640px) { .tools { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .tools { grid-template-columns: repeat(5, 1fr); } .tools li { padding: 28px 24px; } }

/* En-têtes de section : titre à gauche, introduction à droite (ordinateur) */
@media (min-width: 960px) {
  .head { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 72px; align-items: end; }
  .head h2 { grid-row: 1 / span 3; }
  .head .lead { margin-top: 0; grid-column: 2; }
  .head .lead + .lead { margin-top: 12px; }
}
.section--tight { padding-bottom: 0; }
.section--after-tight { padding-top: 72px; }
.stat { position: relative; }
.stat .stars { position: absolute; top: 24px; right: 20px; margin: 0; font-size: .85rem; }
@media (min-width: 900px) { .stat .stars { top: 32px; right: 28px; } }

@property --roll { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@keyframes unroll { from { --roll: 0%; } to { --roll: 100%; } }

/* ===================== Animations discrètes =====================
   Chaque bloc .js-play reçoit .is-playing quand il entre à l'écran (main.js).
   Tout est désactivé si le visiteur a demandé moins d'animations. */

/* Photos qui défilent en fondu */
.fader { position: relative; }
.fader img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; }
.fader img.is-on { opacity: 1; }
.fader img:first-child { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .js .fader img.is-on { animation: drift 9s ease-out both; }

  /* 1. Le déroulé d'un cours : les étapes se déroulent l'une après l'autre */
  .js .course-flow li {
    opacity: 0; clip-path: inset(0 100% 0 0 round var(--r-card));
    transition: opacity .5s ease, clip-path 1s var(--ease);
    transition-delay: calc(var(--n, 0) * 380ms);
  }
  .js .course-flow li > * { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s var(--ease); transition-delay: calc(var(--n, 0) * 380ms + 420ms); }
  .js .course-flow.is-playing li { opacity: 1; clip-path: inset(0 0 0 0 round var(--r-card)); }
  .js .course-flow.is-playing li > * { opacity: 1; transform: none; }
  .js .course-flow li::after { opacity: 0; transition: opacity .4s ease; transition-delay: calc(var(--n, 0) * 380ms + 700ms); }
  .js .course-flow.is-playing li::after { opacity: 1; }
  @media (max-width: 759px) {
    .js .course-flow li { clip-path: inset(0 0 100% 0 round var(--r-card)); }
  }

  /* 2. Les étoiles jaillissent puis scintillent */
  .js .stars i { display: inline-block; transform: scale(0) rotate(-90deg); opacity: 0; }
  .js .stars.is-playing i {
    animation: star-pop .7s cubic-bezier(.34, 1.56, .64, 1) forwards, star-twinkle 5s ease-in-out 3;
    animation-delay: calc(var(--n, 0) * 110ms), calc(1.2s + var(--n, 0) * 700ms);
  }

  /* 3. Une feuille qui se déroule en diagonale, du coin haut gauche au coin bas droit.
     --roll avance de 0 à 100 % : la page découverte est un triangle qui grandit,
     et le rouleau de papier (le ::after) suit exactement le bord de la feuille. */
  .js .pedago__page .page-zoom{ position: relative; --roll: 0%; }
  .js .pedago__page .page-zoom img{
    clip-path: polygon(0 0, calc(var(--roll) * 2) 0, 0 calc(var(--roll) * 2));
  }
  .js .pedago__page .page-zoom::after{
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
    background: linear-gradient(to bottom right,
      transparent calc(var(--roll) - 7%),
      rgb(0 0 0 / .14) calc(var(--roll) - 1.2%),
      #d9d6cf var(--roll),
      #fbfaf6 calc(var(--roll) + 1.6%),
      #ece9e2 calc(var(--roll) + 3.4%),
      #b9b5ad calc(var(--roll) + 4.6%),
      rgb(0 0 0 / .22) calc(var(--roll) + 5.4%),
      transparent calc(var(--roll) + 8%));
    opacity: 1; transition: opacity .4s ease;
  }
  .js .pedago__page.is-playing .page-zoom{ animation: unroll 1.9s cubic-bezier(.45, .05, .25, 1) .15s forwards; }
  .js .pedago__page.is-rolled .page-zoom::after{ opacity: 0; }
  .js .pedago__page .page-zoom:hover{ transform: translateY(-4px); transition: transform .5s var(--ease); }
  .js .pedago__page .page-zoom:hover img{ transform: none; }
  .js .pedago__page figcaption { opacity: 0; transition: opacity .8s ease 1.6s; }
  .js .pedago__page.is-playing figcaption { opacity: 1; }

  /* 4. Feuilleter : les pages arrivent en paquet, puis s'ouvrent en accordéon */
  .js .pages .pages__item {
    transform: translateX(calc(var(--k) * -100% - var(--k) * 20px + var(--k) * 14px)) rotate(calc(var(--k) * 1.5deg));
    opacity: 0;
    transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
    transition-delay: calc(var(--k) * 140ms + 150ms);
    z-index: calc(10 - var(--k)); position: relative;
  }
  .js .pages .pages__item:first-child { opacity: 1; transform: rotate(-1deg); }
  .js .pages.is-playing .pages__item { transform: none; opacity: 1; }
  .js .pages__item figcaption { opacity: 0; transition: opacity .6s ease; transition-delay: calc(var(--k) * 140ms + 1.1s); }
  .js .pages.is-playing .pages__item figcaption { opacity: 1; }

  /* 5. Bandeau : l'image passe du flou au net en arrivant */
  .js .band > img { filter: blur(14px) saturate(.8); transform: scale(1.08); transition: filter 1.6s ease, transform 2.4s var(--ease); }
  .js .band.is-playing > img { filter: none; transform: scale(1); }
}

@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes star-pop {
  0% { transform: scale(0) rotate(-90deg); opacity: 0; }
  70% { transform: scale(1.35) rotate(12deg); opacity: 1; filter: drop-shadow(0 0 6px var(--gold)); }
  100% { transform: scale(1) rotate(0); opacity: 1; filter: none; }
}
@keyframes star-twinkle {
  0%, 86%, 100% { transform: scale(1); filter: none; opacity: 1; }
  92% { transform: scale(1.25) rotate(8deg); filter: drop-shadow(0 0 5px var(--gold)) brightness(1.3); }
}

/* Bandeau : fondu adouci avec les sections voisines */
.band::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 34%; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg-2) 0%, rgb(17 20 25 / .6) 35%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent); mask-image: linear-gradient(to bottom, #000 10%, transparent);
}
.band::before { background: linear-gradient(to top, var(--bg) 2%, rgb(11 13 16 / .55) 34%, rgb(11 13 16 / .2) 62%, transparent 92%) !important; }
:root[data-theme="light"] .band::before { background: linear-gradient(to top, var(--bg) 2%, rgb(245 246 248 / .1) 30%, rgb(11 13 16 / .35) 55%, rgb(11 13 16 / .15) 80%, transparent) !important; }

:root[data-theme="light"] .band::after { background: linear-gradient(to bottom, var(--bg-2) 0%, rgb(236 238 242 / .55) 35%, transparent); }

/* ===== Animations légères, page Entreprises ===== */
@media (prefers-reduced-motion: no-preference) {
  /* Les étiquettes de relevés apparaissent une à une */
  .js .chips-pop li { opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--n, 0) * 90ms); }
  .js .chips-pop.is-playing li { opacity: 1; transform: none; }

  /* Les questions d'enquête arrivent, une barre dorée les souligne */
  .js .inquiry li { position: relative; opacity: 0; transform: translateX(18px); transition: opacity .6s ease, transform .8s var(--ease); transition-delay: calc(var(--n, 0) * 220ms); }
  .js .inquiry li::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease); transition-delay: calc(var(--n, 0) * 220ms + 350ms); }
  .js .inquiry.is-playing li { opacity: 1; transform: none; }
  .js .inquiry.is-playing li::before { transform: scaleY(1); }

  /* Les icônes jaillissent, comme les étoiles */
  /* Chaque icône tourne sur elle-même (largeur ajustée à l'icône), quand sa carte arrive à l'écran */
  .js .tools .ph, .js .discoveries .ph { display: inline-block; width: fit-content; justify-self: start; transform-origin: 50% 50%; opacity: 0; transform: scale(.3) rotate(-40deg); }
  .js .tools li.is-playing .ph, .js .discoveries li.is-playing .ph { animation: icon-pop .75s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: calc(var(--n, 0) * 90ms + 120ms); }

  /* Trait d'or sous le titre d'accueil */
  .js .ink-underline { background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 2px; animation: ink 1.2s var(--ease) 1.1s forwards; }
}
@keyframes icon-pop {
  0% { opacity: 0; transform: scale(.3) rotate(-40deg); }
  60% { opacity: 1; transform: scale(1.18) rotate(6deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ink { to { background-size: 100% 2px; } }
.js-count { font-variant-numeric: tabular-nums; }

/* Encadré fascicules : le devoir en quatre pages, déplié en accordéon */
.fan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fan__page { position: relative; z-index: calc(10 - var(--k)); }
.fan__page .page-zoom img { box-shadow: 0 14px 30px -16px rgb(0 0 0 / .7), 0 0 0 1px rgb(0 0 0 / .06); }
.fan__page span { display: block; margin-top: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .fan .fan__page {
    transform: translateX(calc(var(--k) * (-100% - 10px) + var(--k) * 6px)) rotate(calc(var(--k) * -1.5deg));
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--k) * 160ms + 150ms);
  }
  .js .fan .fan__page span { opacity: 0; transition: opacity .5s ease; transition-delay: calc(var(--k) * 160ms + 900ms); }
  .js .fan.is-playing .fan__page { transform: none; }
  .js .fan.is-playing .fan__page span { opacity: 1; }
}
.print-offer__media { overflow: visible; }
@media (max-width: 480px) { .fan { gap: 8px; } .fan__page span { font-size: .66rem; letter-spacing: .02em; white-space: nowrap; } }

/* ===== Page Entreprises : livrables et référence ===== */
@media (prefers-reduced-motion: no-preference) {
  /* Les livrables s'allument l'un après l'autre : chaque étape se décide après la précédente */
  .js .deliver .deliver__item { opacity: .18; transform: translateY(16px); filter: saturate(0); transition: opacity .7s ease, transform .8s var(--ease), filter .9s ease, border-color .9s ease; transition-delay: calc(var(--n, 0) * 380ms); }
  .js .deliver .deliver__item .ph { transform: scale(.6); opacity: .4; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .5s ease; transition-delay: calc(var(--n, 0) * 380ms + 250ms); }
  .js .deliver.is-playing .deliver__item { opacity: 1; transform: none; filter: none; }
  .js .deliver.is-playing .deliver__item .ph { transform: none; opacity: 1; }

  /* La liste de la référence se coche ligne par ligne */
  .js .case__list li { opacity: .35; transition: opacity .5s ease; transition-delay: calc(var(--n, 0) * 330ms + 200ms); }
  .js .case__list li::before { clip-path: inset(0 0 100% 0); transition: clip-path .45s ease; transition-delay: calc(var(--n, 0) * 330ms + 200ms); }
  .js .case__list.is-playing li { opacity: 1; }
  .js .case__list.is-playing li::before { clip-path: inset(0 0 0 0); }
}

/* ===== Easter egg : « Fission » ===== */
.atom-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }
.atom-hud {
  position: fixed; right: 16px; bottom: 16px; z-index: 96; display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--gold);
  box-shadow: 0 16px 40px -18px rgb(0 0 0 / .6); font-size: .82rem; color: var(--muted);
  transform: translateY(20px); opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .5s var(--ease);
}
.atom-hud.is-on { opacity: 1; transform: none; pointer-events: auto; }
.atom-hud b { color: var(--ink); font-variant-numeric: tabular-nums; }
.atom-hud__title { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--gold); }
.atom-hud__close { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; font-size: 1rem; line-height: 1; }
.atom-hud__close:hover { border-color: var(--gold); color: var(--gold); }
.atom-toast {
  position: fixed; left: 50%; bottom: 76px; z-index: 95; width: min(92vw, 440px);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--gold);
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / .6); color: var(--body); font-size: .88rem; line-height: 1.5;
  transition: opacity .5s ease, transform .6s var(--ease);
}
.atom-toast strong { color: var(--ink); display: block; margin-bottom: 2px; }
.atom-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 480px) { .atom-hud { left: 12px; right: 12px; justify-content: space-between; gap: 8px; font-size: .76rem; } }
.atom-win {
  position: fixed; left: 50%; top: 50%; z-index: 97; width: min(92vw, 520px); text-align: center;
  transform: translate(-50%, -46%) scale(.96); opacity: 0; pointer-events: none;
  padding: 36px 28px 30px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--gold);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / .7), 0 0 60px -20px var(--gold);
  transition: opacity .6s ease, transform .8s cubic-bezier(.34, 1.56, .64, 1);
}
.atom-win.is-on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.atom-win__kicker { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1.2rem; }
.atom-win h2 { font-size: clamp(1.9rem, 6vw, 2.6rem); margin: 6px 0 12px; }
.atom-win h2 em { display: block; }
.atom-win p { color: var(--body); }
.atom-win .btn { margin-top: 22px; }

/* ===== Easter egg : la chasse aux imposteurs ===== */
.imp { display: inline-block; cursor: pointer; transform: translate(var(--nx, 0), var(--ny, 0)); transition: transform .4s var(--ease); }
.imp--wiggle { animation: imp-wiggle .7s ease-in-out; }
.imp--shake { animation: imp-shake .9s ease-in-out; color: var(--gold); }
.imp--caught { animation: imp-caught .9s cubic-bezier(.34, 1.56, .64, 1) forwards; color: var(--gold); }
@keyframes imp-wiggle {
  0%, 100% { transform: translate(var(--nx, 0), var(--ny, 0)) rotate(0); }
  30% { transform: translate(var(--nx, 0), calc(var(--ny, 0px) - 1px)) rotate(-7deg); }
  60% { transform: translate(var(--nx, 0), var(--ny, 0)) rotate(5deg); }
}
@keyframes imp-shake {
  0%, 100% { transform: rotate(0) scale(1); }
  20%, 60% { transform: rotate(-14deg) scale(1.3); }
  40%, 80% { transform: rotate(12deg) scale(1.3); }
}
@keyframes imp-caught {
  0% { transform: scale(1); }
  45% { transform: translateY(-6px) scale(1.8); text-shadow: 0 0 12px var(--gold); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .imp { color: var(--gold); } }
.imp-hud {
  position: fixed; left: 16px; bottom: 16px; z-index: 96; display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--gold);
  box-shadow: 0 16px 40px -18px rgb(0 0 0 / .6); font-size: .82rem; color: var(--muted);
  transform: translateY(20px); opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .5s var(--ease);
}
.imp-hud.is-on { opacity: 1; transform: none; pointer-events: auto; }
.imp-hud__title { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--gold); }
.imp-hud__word { display: flex; gap: 4px; }
.imp-hud__slot { display: grid; place-items: center; width: 22px; height: 28px; border-bottom: 2px solid var(--line-strong); color: var(--ink); font-weight: 700; font-size: .95rem; }
.imp-hud__slot.is-found { border-color: var(--gold); animation: star-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
.imp-hud__btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 600 .78rem var(--font-body); cursor: pointer; }
.imp-hud__btn:hover, .imp-hud__close:hover { border-color: var(--gold); color: var(--gold); }
.imp-hud__close { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; font-size: 1rem; line-height: 1; }
@media (max-width: 600px) {
  .imp-hud { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; gap: 6px; padding-left: 12px; font-size: .74rem; }
  .imp-hud__slot { width: 18px; }
  .atom-hud.is-on ~ .imp-hud, .imp-hud.is-on ~ .atom-hud { bottom: 72px; }
}
.imp-word { white-space: nowrap; }

/* ===== Easter egg : Belka ===== */
.belka {
  position: fixed; left: 0; bottom: 6px; z-index: 44; width: 90px; height: 66px;
  background: no-repeat 0 0 / 1800px 1056px;
  transform-origin: 46.8px 100%; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .6s ease;
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / .35));
}
.belka.is-ready { background-image: url("assets/belka/belka.webp?v=3"); }
.belka.is-on { opacity: 1; pointer-events: auto; }

/* ===== Easter egg : la supernova ===== */
.nova-spark { position: fixed; z-index: 98; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 6px 1px rgb(255 230 170 / .8); }
.nova-flash { position: fixed; z-index: 98; width: 22px; height: 22px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0%, #f3dfa7 35%, transparent 70%); }

/* ===== Easter egg : le blason ===== */
.footer__brand img { transform: rotate(var(--tilt, 0deg)); transition: transform .3s var(--ease); }
.crest-tap { animation: crest-tap .35s ease; }
@keyframes crest-tap { 50% { transform: rotate(var(--tilt, 0deg)) scale(1.18); } }
.crest {
  position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 16px;
  background: rgb(8 10 13 / .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .5s ease; perspective: 1600px;
}
.crest.is-on { opacity: 1; pointer-events: auto; }
.crest__inner {
  position: relative; width: min(88vw, 420px); aspect-ratio: 4 / 5; transform-style: preserve-3d;
  transform: scale(.8) rotateY(0); transition: transform 1.1s cubic-bezier(.3, 1.3, .5, 1);
}
.crest.is-on .crest__inner { transform: scale(1) rotateY(0); }
.crest.is-flipped .crest__inner { transform: scale(1) rotateY(180deg); }
.crest__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-card); display: grid; place-items: center; }
.crest__front img { width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgb(0 0 0 / .5)); }
.crest__back {
  transform: rotateY(180deg); align-content: center; gap: 14px; padding: 32px 26px; text-align: center;
  background: var(--surface); border: 1px solid var(--gold); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .7), 0 0 60px -20px var(--gold);
}
.crest__kicker { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.crest__latin { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1.2; color: var(--ink); }
.crest__fr { color: var(--body); }
.crest__note { font-size: .84rem; color: var(--muted); }
.crest__back .btn { justify-self: center; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .crest__inner { transition: none; } }

/* ===== Carnet des trouvailles ===== */
.carnet-tab {
  position: fixed; right: 0; top: 50%; z-index: 94; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; border-radius: 12px 0 0 12px; border: 1px solid var(--gold); border-right: 0;
  background: var(--surface); color: var(--gold); font: 700 .7rem var(--font-body); cursor: pointer;
  transform: translate(100%, -50%); transition: transform .5s var(--ease), box-shadow .4s;
}
.carnet-tab .ph { font-size: 1.3rem; }
.carnet-tab.is-on { transform: translate(0, -50%); }
.carnet-tab.is-new { box-shadow: 0 0 24px -4px var(--gold); }
.carnet {
  position: fixed; right: 16px; top: 50%; z-index: 97; width: min(92vw, 400px); max-height: 82dvh; overflow-y: auto;
  padding: 24px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--gold);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / .7); transform: translate(20px, -50%); opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .5s var(--ease);
}
.carnet.is-on { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.carnet__head { display: grid; grid-template-columns: 1fr auto; align-items: start; margin-bottom: 14px; }
.carnet__kicker { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.carnet__head h2 { font-size: 2rem; grid-column: 1; }
.carnet__head .icon-btn { grid-column: 2; grid-row: 1 / span 2; }
.carnet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.carnet__list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; opacity: .7; }
.carnet__list li.is-found { opacity: 1; }
.carnet__list .ph { font-size: 1.3rem; color: var(--muted); margin-top: 2px; }
.carnet__list li.is-found .ph { color: var(--gold); }
.carnet__list strong { display: block; color: var(--ink); font-weight: 600; }
.carnet__list span { font-size: .84rem; color: var(--muted); }
.carnet__note { margin-top: 16px; font-size: .84rem; font-style: italic; color: var(--muted); }
.carnet-toast {
  position: fixed; left: 50%; top: 84px; z-index: 98; display: flex; gap: 12px; align-items: center; width: max-content; max-width: 92vw;
  padding: 12px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--gold); color: var(--muted); font-size: .84rem;
  box-shadow: 0 16px 40px -18px rgb(0 0 0 / .6); transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .5s var(--ease);
}
.carnet-toast .ph { font-size: 1.4rem; color: var(--gold); }
.carnet-toast strong { display: block; color: var(--ink); }
.carnet-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ===== Easter egg : le trou noir ===== */
.black-hole {
  position: fixed; z-index: 93; width: 160px; height: 160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #000 0 34%, rgb(0 0 0 / .9) 40%, transparent 41%);
  box-shadow: 0 0 0 2px rgb(255 214 140 / .55), 0 0 40px 14px rgb(214 177 106 / .45), 0 0 120px 50px rgb(214 177 106 / .15);
}
.black-hole::after {
  content: ""; position: absolute; inset: -30%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgb(255 220 150 / .55), transparent 30%, rgb(255 190 110 / .4), transparent 60%, rgb(255 230 170 / .5), transparent);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 52%, transparent 70%); mask: radial-gradient(circle, transparent 38%, #000 40%, #000 52%, transparent 70%);
  animation: accretion 1.2s linear infinite;
}
@keyframes accretion { to { transform: rotate(360deg); } }

/* Trou noir : pendant l'aspiration, le vrai texte est masqué et redessiné lettre par lettre */
.bh-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 92; pointer-events: none; }
html.bh-ghost body *:not(.bh-layer):not(.snap-layer):not(.black-hole):not(.carnet-toast):not(.carnet-toast *):not(.atom-win):not(.atom-win *):not(.atom-toast):not(.atom-toast *) { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; }
html.bh-fade body * { transition: color 1.8s ease, -webkit-text-fill-color 1.8s ease !important; }
.bh-burst {
  position: fixed; z-index: 94; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, #fff 0 8%, rgb(255 236 190 / .9) 14%, transparent 42%),
    repeating-conic-gradient(from 0deg, rgb(255 226 160 / .85) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
}
.bh-win__mini {
  display: block; width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%;
  background: radial-gradient(circle, #000 0 40%, transparent 42%);
  box-shadow: 0 0 0 2px rgb(255 214 140 / .7), 0 0 18px 6px rgb(214 177 106 / .5);
}

/* ===== Easter egg : la surtension ===== */
.surge-spark { width: 3px; height: 3px; background: #fff6c9; box-shadow: 0 0 6px 2px rgb(255 220 120 / .9); }
.blackout {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #000; cursor: pointer; outline: none;
}
.blackout p { text-align: center; color: #3a3a3a; font-family: var(--font-display); font-size: 1.6rem; font-style: italic; }
.blackout span { display: block; margin-top: 8px; font-family: var(--font-body); font-style: normal; font-size: .82rem; color: #2c2c2c; }

/* ===== Easter egg : les six pierres ===== */
.gem {
  position: absolute; z-index: 6; width: 9px; height: 9px; padding: 0; border: 0; cursor: pointer;
  background: var(--c); transform: rotate(45deg); border-radius: 2px;
  box-shadow: 0 0 6px 1px var(--c), inset -2px -2px 0 rgb(0 0 0 / .25), inset 1px 1px 0 rgb(255 255 255 / .5);
  opacity: 0; pointer-events: none;
}
.gem::after { content: ""; position: absolute; inset: -9px; transform: rotate(-45deg); }
.gem.is-awake { pointer-events: auto; animation: gem-blink var(--blink, 7s) ease-in-out infinite; }
.gem.is-awake:hover { opacity: 1; animation-play-state: paused; }
.gem.is-taken { animation: gem-take .6s ease-out forwards; opacity: 1; }
/* Presque invisible, puis un éclat bref, de plus en plus fréquent */
@keyframes gem-blink {
  0%, 78%, 100% { opacity: .06; box-shadow: 0 0 2px 0 var(--c); }
  85% { opacity: 1; box-shadow: 0 0 16px 5px var(--c), inset 1px 1px 0 rgb(255 255 255 / .6); }
  91% { opacity: .35; box-shadow: 0 0 6px 1px var(--c); }
}
@keyframes gem-take { to { transform: rotate(225deg) scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gem.is-awake { animation: none; opacity: .6; } }
.gauntlet {
  position: fixed; left: 50%; bottom: 16px; z-index: 95; display: flex; gap: 8px; padding: 10px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--gold); box-shadow: 0 16px 40px -18px rgb(0 0 0 / .6);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .5s var(--ease);
}
.gauntlet.is-on, .gauntlet.is-snap { opacity: 1; transform: translate(-50%, 0); }
.gauntlet.is-snap { animation: gauntlet-snap .8s ease-in-out; }
@keyframes gauntlet-snap { 30% { transform: translate(-50%, 0) scale(1.25); filter: brightness(1.8); } 60% { transform: translate(-50%, 0) scale(.9); } }
.gauntlet__slot { width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; border: 1px solid var(--line-strong); }
.gauntlet__slot.is-set { background: var(--c); border-color: var(--c); box-shadow: 0 0 8px 1px var(--c); }
.snap-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 92; pointer-events: none; }
html.snap-lock { overflow: hidden; scrollbar-gutter: stable; }

/* ===== Envoi : l'avion en papier ===== */
.paper-plane { position: fixed; left: 0; top: 0; z-index: 99; font-size: 1.4rem; color: var(--gold); pointer-events: none; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }
.plane-trail { position: fixed; z-index: 98; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--gold); pointer-events: none; }

/* ===== Easter egg : le QCM ===== */
.qcm .qcm__q { font-size: clamp(1.5rem, 4.6vw, 2rem); line-height: 1.25; margin: 10px 0 20px; }
.qcm__answers { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.qcm__answers .btn { min-width: 110px; }
.qcm .btn.is-right { border-color: var(--success); color: var(--success); }
.qcm .btn.is-wrong { border-color: var(--danger); color: var(--danger); }
.qcm .btn:disabled { cursor: default; }
.qcm__fb { margin-top: 18px; font-size: .95rem; }
.qcm__fb:empty { display: none; }
.qcm__fb strong { color: var(--ink); }
.qcm__fb + .btn { margin-top: 18px; }
.qcm__close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; }
.qcm__close:hover { border-color: var(--gold); color: var(--gold); }
.gauntlet.is-spending { background: transparent; border-color: transparent; box-shadow: none; transition: background-color 1.2s ease 1.4s, border-color 1.2s ease 1.4s, box-shadow 1.2s ease 1.4s; }
.gauntlet.is-spending .gauntlet__slot { box-shadow: 0 0 14px 3px var(--c); }
.carnet__reset { margin-top: 14px; padding: 0; border: 0; background: none; font: 500 .78rem var(--font-body); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.carnet__reset:hover, .carnet__reset[data-sure] { color: var(--danger); }

/* ===== Films : scènes animées au rythme du défilement (page entreprises) =====
   Sans JS, sans GSAP ou avec moins d'animations : image finale fixe et les trois étapes lisibles. */
.film { position: relative; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.film__sticky { padding: 72px 0; }
.film__inner { display: grid; gap: 28px; align-items: center; }
.film__title { font-size: clamp(1.9rem, 6.4vw, 3rem); margin-bottom: 22px; }
.film__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: step; }
.film__steps li {
  position: relative; padding: 10px 0 12px 40px; color: var(--muted); font-size: 1.02rem; line-height: 1.45;
  border-bottom: 1px solid var(--line); transition: color .5s var(--ease); counter-increment: step;
}
.film__steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 11px;
  font: 600 .74rem/1.4 var(--font-body); letter-spacing: .12em; color: var(--muted); transition: color .5s var(--ease);
}
.film__steps li::after {
  content: ""; position: absolute; left: 40px; right: 0; bottom: -1px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease);
}
.film__steps li.is-on, .film.is-static .film__steps li { color: var(--ink); }
.film__steps li.is-on::before, .film.is-static .film__steps li::before { color: var(--gold); }
.film__steps li.is-on::after, .film__steps li.is-past::after { transform: scaleX(1); }
.film__steps li.is-past::after { opacity: .35; }

.film__stage { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-2); overflow: hidden; }
.film__svg { display: block; width: 100%; height: auto; }
.film__tag { display: block; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.film.is-live { height: 320vh; }
.film--long.is-live { height: 500vh; }
.film.is-live .film__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding: calc(var(--nav-h) + 12px) 0 16px; display: flex; align-items: center; }
.film.is-live .film__inner { width: 100%; }
@media (max-width: 899px) {
  .film.is-live .film__title { font-size: 1.7rem; margin-bottom: 10px; }
  /* Une seule étape visible : toutes empilées dans la même case (hauteur fixe, numérotation juste),
     l'étape suivante monte en fondu pendant que la précédente s'efface vers le haut */
  .film.is-live .film__steps { display: grid; }
  .film.is-live .film__steps li {
    grid-area: 1 / 1; opacity: 0; transform: translateY(16px); padding-top: 4px; padding-bottom: 10px;
    transition: opacity .45s ease, transform .6s var(--ease), color .5s var(--ease);
  }
  .film.is-live .film__steps li.is-past { transform: translateY(-16px); }
  .film.is-live .film__steps li.is-on { opacity: 1; transform: none; transition-delay: .12s; }
  .film.is-live .film__steps li::before { top: 5px; }
}
@media (min-width: 900px) {
  .film__sticky { padding: 120px 0; }
  .film__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; }
}

/* Éléments dessinés des films (couleurs du thème) */
.fx-text { font-family: var(--font-body); fill: var(--body); }
.fx-ink { fill: var(--ink); }
.fx-muted { fill: var(--muted); }
.fx-gold { fill: var(--gold); }
.fx-surface { fill: var(--surface); }
.fx-surface2 { fill: var(--surface-2); }
.fx-bg { fill: var(--bg-2); }
.fx-line { stroke: var(--line-strong); fill: none; }
.fx-goldsoft { fill: var(--gold-soft); }
.fx-danger { fill: var(--danger); }
.fx-success { fill: var(--success); }
/* Fond de carte peint dans des canvas, zoomé par transformation CSS (sans repeinte) sous le SVG des arcs */
.film__map { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 640 / 420; overflow: hidden; pointer-events: none; }
.film__map-layer { position: absolute; top: 0; left: 0; width: 640px; height: 420px; transform-origin: 0 0; will-change: transform; }
.film__map-layer canvas { position: absolute; display: block; }
.film__map-zoom { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film__map + .film__svg { position: relative; }

/* Scène en deux temps (la carte, puis les territoires) : les deux textes partagent la même place */
.film__visual { position: relative; }
.film--duo.is-live { height: 940vh; } /* la carte, puis onze photos qui ont chacune leur temps (un demi-écran de défilement chacune) */
.film--duo.is-live .film__text { display: grid; }
.film--duo.is-live .film__text > * { grid-column: 1; }
.film--duo.is-live .film__text > .eyebrow { grid-row: 1; }
.film--duo.is-live .film__text > .film__title { grid-row: 2; }
.film--duo.is-live .film__text > .film__steps { grid-row: 3; }
.film--duo.is-live .film__text > .film__conclusion { grid-row: 4; }
.film--duo.is-live .film__text > :not(.film__alt) { transition: opacity .5s ease, transform .6s var(--ease); }
.film--duo.is-live .film__alt { grid-row: 1 / span 4; align-self: center; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .5s ease, transform .6s var(--ease); }
.film--duo.is-live.is-beyond .film__text > :not(.film__alt) { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.film--duo.is-live.is-beyond .film__alt { opacity: 1; transform: none; pointer-events: auto; transition-delay: .2s; }
.film__alt { margin-top: 40px; }
.film--duo.is-live .film__alt { margin-top: 0; }
.film__alt .lead { margin-top: 18px; max-width: 44ch; }
.film__stage { transform-origin: 50% 50%; }
/* L'éventail des territoires : des cartes qui pivotent autour d'un point situé sous elles */
.film__deck { position: absolute; inset: 0; pointer-events: none; }
.film:not(.is-live) .film__deck { display: none; }
.deck__card {
  position: absolute; left: 30%; top: 16%; width: 40%; aspect-ratio: 4 / 3; margin: 0; opacity: 0;
  border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: var(--surface);
  box-shadow: 0 14px 32px rgb(0 0 0 / .3); transform-origin: 50% 250%;
  will-change: transform, opacity; /* chaque photo a son calque : la faire tourner ne repeint ni l'image ni l'ombre */
}
:root[data-theme="light"] .deck__card { box-shadow: 0 10px 24px rgb(20 24 30 / .14); }
@media (max-width: 899px) { .deck__card { left: 27%; width: 46%; } }
.deck__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deck__card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(to top, rgb(11 13 16 / .92), transparent); }
.deck__card span { display: block; font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #d6b16a; }
.deck__card strong { display: block; margin-top: 2px; font-family: var(--font-display); font-size: clamp(1rem, 2.2vw, 1.5rem); font-weight: 500; line-height: 1.1; color: #f2efe9; }

/* Exemples à onglets : un métier au choix */
.film--tabs.is-live { height: 520vh; }
.film__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.film__tabs [role="tab"] {
  font: 600 .9rem/1 var(--font-body); padding: 10px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--body);
  transition: background-color .3s var(--ease), color .3s, border-color .3s;
}
.film__tabs [role="tab"]:hover { border-color: var(--gold); color: var(--ink); }
.film__tabs [role="tab"][aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.film__sub { font-family: var(--font-display); font-size: clamp(1.3rem, 4.6vw, 1.7rem); font-weight: 500; font-style: italic; color: var(--gold); margin-bottom: 10px; }
@media (max-width: 899px) {
  .film--tabs.is-live .film__sub { display: none; }
  .film--tabs.is-live .film__tabs { margin-bottom: 8px; }
  .film__tabs [role="tab"] { padding: 9px 13px; font-size: .84rem; }
}

/* Conclusion d'une scène : elle apparaît quand la scène est terminée */
.film__conclusion { margin-top: 22px; padding-left: 14px; border-left: 2px solid var(--gold); color: var(--body); line-height: 1.55; max-width: 46ch; }
.film__conclusion strong { color: var(--ink); font-weight: 600; }
.film.is-live .film__conclusion { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.film.is-live.is-done .film__conclusion { opacity: 1; transform: none; }
@media (max-width: 899px) {
  /* La conclusion prend la place des étapes, en fondu, sans faire sauter la mise en page */
  .film:not(.film--tabs).is-live .film__text { display: grid; }
  .film:not(.film--tabs).is-live .film__text > * { grid-column: 1; }
  .film:not(.film--tabs).is-live .film__text > .eyebrow { grid-row: 1; }
  .film:not(.film--tabs).is-live .film__title { grid-row: 2; }
  .film:not(.film--tabs).is-live .film__steps,
  .film:not(.film--tabs).is-live .film__conclusion { grid-row: 3; align-self: start; }
  .film.is-live .film__conclusion { margin-top: 0; font-size: .9rem; }
  .film.is-live .film__steps { transition: opacity .45s ease, transform .6s var(--ease); }
  .film.is-live.is-done .film__steps { opacity: 0; transform: translateY(-12px); }
  .film.is-live.is-done .film__conclusion { transition-delay: .15s; }
}


/* Exemples : la colonne de texte tient dans la hauteur de l'illustration */
@media (min-width: 900px) {
  .film--tabs .film__inner { align-items: center; }
  .film--tabs .film__title { font-size: clamp(2rem, 3vw, 2.6rem); margin-bottom: 16px; }
  .film--tabs .film__tabs { gap: 6px; margin-bottom: 14px; }
  .film--tabs .film__tabs [role="tab"] { padding: 8px 13px; font-size: .84rem; }
  .film--tabs .film__sub { font-size: 1.3rem; margin-bottom: 6px; }
  .film--tabs .film__steps li { padding: 7px 0 8px 32px; font-size: .9rem; line-height: 1.38; }
  .film--tabs .film__steps li::before { top: 8px; font-size: .68rem; }
  .film--tabs .film__steps li::after { left: 32px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .film--tabs .film__sub { display: none; }
  .film--tabs .eyebrow { margin-bottom: 10px; }
}