/* ==========================================================================
   Réalisations — « Le générique »
   Une page sombre ponctuée de sept chapitres, chacun dans l'univers du projet.
   Chaque chapitre : ouverture (titre seul) → visuel (animation signature) → accès (phrase + bouton).
   Règle : le CSS décrit l'état FINAL de chaque animation. Le JS (GSAP) part
   d'un autre état et y revient : sans JS ou avec « réduire les animations »,
   tout reste lisible et en place.
   ========================================================================== */

.page-showcase {
  --sc-bg: #0b0c10;
  --sc-fg: #f3efe8;
  --sc-dim: rgba(243, 239, 232, .62);
  --sc-line: rgba(243, 239, 232, .12);
  background: var(--sc-bg);
  color: var(--sc-fg);
}
.page-showcase main { overflow-x: clip; }
.page-showcase ::selection { background: var(--orange); color: #121722; }
.page-showcase .site-footer { position: relative; z-index: 2; }
/* le menu desktop garde un fond clair : « Prendre rendez-vous » reste en noir */
.page-showcase .nav__meeting { color: var(--ink); }

/* ---------- Structure commune d'un chapitre ---------- */
.chap { position: relative; isolation: isolate; overflow: clip; }

/* 1. Ouverture : le nom du projet, seul à l'écran */
.chap__intro {
  position: relative; min-height: 0;
  display: grid; align-content: center; justify-items: center; gap: clamp(16px, 2vh, 24px);
  padding-block: clamp(72px, 9vh, 110px) clamp(16px, 2.5vh, 32px); text-align: center;
}
.chap__meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .55em 1.1em;
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
/* Numéro du projet : un chiffre dans un rond, posé juste au-dessus de la ligne */
.chap__meta { flex-direction: column; }
.chap__num {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.chap__status { font-size: .8125rem; letter-spacing: .04em; opacity: .58; }
.chap__status--live { opacity: 1; display: inline-flex; align-items: center; gap: .6em; }
.chap__status--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #39c07f; box-shadow: 0 0 0 4px rgba(57, 192, 127, .22); }
.chap__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3.6rem, 13vw, 14rem);
  line-height: .84;
  letter-spacing: -.045em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 80;
}
/* Rayonne et Bloum : un peu plus d'air autour du titre, sans écran vide */
.chap--rayonne .chap__intro { min-height: 0; padding-block: clamp(48px, 6vh, 76px) clamp(24px, 3.5vh, 44px); }
.chap--aure .chap__intro { padding-block: clamp(44px, 5.5vh, 68px) clamp(16px, 2.5vh, 32px); }
.chap--bloum .chap__intro { padding-block: clamp(96px, 12vh, 140px) clamp(16px, 2.5vh, 32px); }
.chap__mask { display: inline-block; overflow: hidden; padding: .06em .02em .04em; margin: -.06em -.02em -.04em; vertical-align: top; }
.chap__mask > span { display: inline-block; }

/* 3. Accès : une phrase, un bouton */
.chap__outro {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px clamp(32px, 5vw, 80px);
  padding-block: clamp(40px, 6vh, 64px) clamp(40px, 6vh, 68px);
}
/* Desktop : la phrase à gauche, l'accès à droite (bouton, précision, démo suivante) */
.chap__outro > .chap__lead, .chap__outro > .chap__text { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
.chap__outro > .chap__cta, .chap__outro > .chap__hint, .chap__outro > .chap__next { grid-column: 2; justify-self: center; }
.chap__outro--center > * { grid-column: 1 !important; grid-row: auto !important; justify-self: center; }
.chap__outro--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.chap__lead { display: grid; gap: 18px; }
.chap__outro--center .chap__text { max-width: 31em; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.55; opacity: .86; text-wrap: pretty; }
.chap__cta {
  --cta-bg: var(--sc-fg); --cta-fg: var(--sc-bg);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .7em;
  padding: .85em .85em .85em 1.9em; border-radius: var(--r-pill); overflow: hidden; white-space: nowrap;
  background: var(--cta-bg); color: var(--cta-fg);
  font-weight: 700; font-size: clamp(1.2rem, 1.55vw, 1.55rem); line-height: 1; letter-spacing: -.005em; min-width: 12.5em;
  justify-content: space-between; gap: 1.1em;
}
/* la flèche dans un cercle : on comprend que le bouton ouvre quelque chose */
.chap__cta svg { box-sizing: content-box; width: 1.05em; height: 1.05em; padding: .6em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: transform var(--dur) var(--ease); }
.chap__hint { font-size: .8125rem; opacity: .62; text-align: center; }
.chap--bloum .chap__hint, .chap--bloum .chap__next { color: #fff; opacity: .9; }
.chap__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--orange); transform: translateY(102%); transition: transform var(--dur) var(--ease); }
.chap__cta:hover::before, .chap__cta:focus-visible::before { transform: none; }
.chap__cta:hover, .chap__cta:focus-visible { color: #121722; }
.chap__cta:hover svg { transform: translateX(4px) rotate(-45deg); }

/* Lien « démo suivante » */
.chap__next {
  display: inline-flex; align-items: center; gap: .6em; margin-top: 6px;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; transition: opacity var(--dur-fast);
}
.chap__next:hover { opacity: 1; }
.chap__next span { font-weight: 500; }
.chap__next b { font-weight: 700; }
.chap__next i { display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; font-style: normal; font-size: 1em; }

.sc-phone {
  position: relative; overflow: hidden; aspect-ratio: 780 / 1688;
  border-radius: clamp(22px, 2.6vw, 38px);
  box-shadow: 0 0 0 clamp(4px, .45vw, 7px) #0d0e12, 0 40px 80px -30px rgba(0, 0, 0, .55);
  background: #0d0e12;
}
.sc-phone img { width: 100%; height: 100%; object-fit: cover; }
.sc-anchor { position: absolute; top: 0; }

/* ==========================================================================
   HERO : même langage que l'accueil (serif, mots qui sortent du flou),
   avec sa signature : un carrousel 3D des démos
   ========================================================================== */
.sc-hero { --serif: "Instrument Serif", Georgia, "Times New Roman", serif; position: relative; overflow: hidden; background: #050505; }
.sc-hero__glow { position: absolute; left: 50%; top: 58%; width: min(1100px, 120vw); aspect-ratio: 2 / 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 122, 26, .16), rgba(255, 122, 26, .05) 55%, transparent); filter: blur(20px); pointer-events: none; }
.sc-hero__inner { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(104px, 13vh, 132px) 16px clamp(112px, 15vh, 140px); text-align: center; }
.sc-crumb { display: flex; gap: .7em; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-dim); }
.sc-crumb a:hover { color: var(--sc-fg); }
.sc-hero__title { max-width: 16em; margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.4vw, 84px); line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.sc-hero__title em { font-style: italic; }
.sc-w { display: inline-block; }
.sc-dot { color: var(--orange); }

/* Le carrousel : 12 faces sur un cylindre, la face avant à taille réelle */
.sc-ring { --cw: clamp(150px, 18.5vw, 290px); --R: calc(var(--cw) * 2.02); position: relative; width: 100%; height: calc(var(--cw) * .62 + 110px); margin-top: clamp(14px, 3vh, 36px); perspective: 1800px; perspective-origin: 50% 30%; }
.sc-ring__track { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform: translateZ(calc(var(--R) * -1)) rotateX(-6deg); }
.sc-ring__track li { position: absolute; left: 0; top: 0; width: var(--cw); aspect-ratio: 16 / 10; margin: calc(var(--cw) * -.3125) 0 0 calc(var(--cw) * -.5); backface-visibility: hidden; transform: rotateY(calc(var(--i) * 30deg)) translateZ(var(--R)); }
.sc-card { position: relative; display: block; width: 100%; height: 100%; border-radius: clamp(10px, 1vw, 14px); overflow: hidden; background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 50px -24px rgba(0, 0, 0, .9); }
.sc-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.sc-card span { position: absolute; left: 8px; bottom: 8px; padding: .38em .75em; border-radius: var(--r-pill); background: rgba(5, 5, 5, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #f4f1ea; font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.sc-card:hover img { transform: scale(1.06); }
/* reflet au sol */
.sc-ring::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(70%, 760px); height: 26px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 122, 26, .22), transparent); filter: blur(6px); }

.sc-hero__sub { max-width: 34em; margin-top: clamp(14px, 2.6vh, 28px); font-size: clamp(.98rem, 1.1vw, 1.06rem); line-height: 1.6; color: #b5b5b5; text-wrap: pretty; }
/* Invitation à défiler : une souris dont la molette descend, deux chevrons en cascade ;
   elle s'efface dès qu'on commence à défiler. */
.sc-cue { position: absolute; left: 50%; bottom: clamp(12px, 2.4vh, 26px); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sc-dim); }
.sc-cue > * { transition: opacity .5s var(--ease), translate .6s var(--ease); }
.sc-cue:hover { color: var(--sc-fg); }
.sc-hero.is-scrolled .sc-cue > * { opacity: 0; translate: 0 10px; }
.sc-hero.is-scrolled .sc-cue { pointer-events: none; }
.sc-cue__mouse { position: relative; width: 24px; height: 38px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgba(244, 241, 234, .5); }
.sc-cue__mouse i { position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--orange); animation: sc-wheel 1.9s var(--ease-in-out) infinite; }
.sc-cue__chev { display: grid; justify-items: center; height: 18px; }
.sc-cue__chev i { width: 8px; height: 8px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; animation: sc-chev 1.9s ease-in-out infinite; }
.sc-cue__chev i + i { animation-delay: .18s; }
@keyframes sc-wheel { 0% { opacity: 0; transform: translateY(-2px); } 25%, 65% { opacity: 1; } 100% { opacity: 0; transform: translateY(13px); } }
@keyframes sc-chev { 0%, 100% { opacity: .15; transform: translateY(-3px); } 50% { opacity: 1; transform: translateY(3px); } }
@media (hover: none) { .sc-cue__mouse { display: none; } }

/* ---------- Indicateur de chapitre ---------- */
.sc-hud {
  position: fixed; left: var(--gutter); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: .5em;
  color: #fff; mix-blend-mode: difference;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(10px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.sc-hud.is-on { opacity: 1; transform: none; }
.sc-hud__n { font-weight: 700; }
.sc-hud__sep { opacity: .6; }
.sc-hud__name { margin-left: .8em; }
.sc-hud__bar { position: relative; width: 72px; height: 1px; margin-left: 1em; background: rgba(255, 255, 255, .35); }
.sc-hud__bar i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--hp, 0)); }

/* ==========================================================================
   01 — RAYONNE : affiche 70's, défilement horizontal
   ========================================================================== */
.chap--rayonne { --ink-r: #2b1608; --o: #ff5a1f; --p: #ff8fb1; --y: #ffc12e; background: #f4ead6; color: var(--ink-r); }
.rayonne__arcs { position: absolute; left: 50%; bottom: -40vw; width: 56vw; aspect-ratio: 1; translate: -50% 0; z-index: -1; opacity: .9; }
.rayonne__arcs i { position: absolute; inset: calc(var(--k) * 3vw); border-radius: 50%; border: 3vw solid; }
.rayonne__arcs i:nth-child(1) { --k: 0; border-color: var(--o); }
.rayonne__arcs i:nth-child(2) { --k: 1; border-color: var(--p); }
.rayonne__arcs i:nth-child(3) { --k: 2; border-color: var(--y); }
.rayonne__arcs i:nth-child(4) { --k: 3; border-color: #6bb7a5; }
.chap--rayonne .chap__intro { overflow: hidden; }
.rayonne__title { display: flex; justify-content: center; font-size: clamp(3.6rem, 12vw, 13rem); font-weight: 900; text-transform: none; letter-spacing: -.02em; font-variation-settings: "wdth" 150; color: var(--o); text-shadow: .045em .045em 0 var(--ink-r); line-height: .9; }
.rayonne__title span { display: inline-block; }
.rayonne__title, .bloum__title { width: max-content; max-width: none; }
.rayonne__pin { position: relative; }
.rayonne__track { display: flex; align-items: flex-start; gap: clamp(48px, 5.5vw, 100px); padding: clamp(24px, 4vh, 48px) var(--gutter) clamp(40px, 6vh, 72px); width: max-content; min-height: 100svh; }
.rayonne__panel { flex: none; }
.rayonne__shot { width: min(64vw, 1060px); transform: rotate(-2deg); }
.rayonne__shot img, .pola img { width: 100%; height: auto; }
.rayonne__shot img { border-radius: 26px; border: 3px solid var(--ink-r); box-shadow: 14px 14px 0 var(--ink-r); }
.rayonne__polas { position: relative; width: min(44vw, 700px); height: min(70vh, 640px); }
.pola { position: absolute; width: 56%; padding: 12px 12px 0; background: #fffdf6; box-shadow: 0 30px 50px -24px rgba(43, 22, 8, .5); border-radius: 4px; }
.pola figcaption { padding: 12px 2px 14px; font-weight: 700; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.pola--a { left: 0; top: 4%; transform: rotate(-6deg); }
.pola--b { right: 0; bottom: 0; transform: rotate(5deg); }
.pola--c { left: 4%; bottom: 2%; transform: rotate(4deg); }
.pola--d { right: 2%; top: 0; transform: rotate(-5deg); }
.rayonne__phone { width: clamp(220px, 19vw, 300px); transform: rotate(3deg); box-shadow: 0 0 0 6px var(--ink-r), 12px 14px 0 6px var(--o); }
.rayonne__date { display: flex; flex-wrap: wrap; gap: 8px; }
.rayonne__date span { padding: .5em 1em; border-radius: var(--r-pill); background: var(--y); font-weight: 700; font-size: .9rem; box-shadow: 3px 3px 0 var(--ink-r); }
.rayonne__date span + span { background: var(--p); }
.chap--rayonne .chap__cta { --cta-bg: var(--ink-r); --cta-fg: #f4ead6; box-shadow: 4px 4px 0 var(--o); }

/* ==========================================================================
   02 — BLOUM : une bulle de couleur, des bonbons en apesanteur
   ========================================================================== */
.chap--bloum { color: #0a2a66; }
.bloum__sky { position: relative; background: linear-gradient(180deg, #7fd8ff 0%, #36a8f5 48%, #1677e6 100%); }
.chap--bloum .chap__meta, .chap--bloum .chap__status { color: #fff; }
.bloum__title { display: flex; justify-content: center; font-size: clamp(5rem, 17vw, 17rem); line-height: .78; color: #fff; text-transform: none; letter-spacing: -.035em; font-weight: 900; font-variation-settings: "wdth" 118; text-shadow: 0 .045em 0 #0a4fc0, 0 .09em 0 rgba(10, 42, 102, .25); }
.bloum__title span { display: inline-block; transform-origin: 50% 100%; }
.bloum__scene { position: relative; display: grid; justify-items: center; padding: clamp(16px, 3vh, 40px) var(--gutter) 0; }
.bloum__puff { position: relative; z-index: 2; width: min(78vw, 1120px); }
.bloum__shot { overflow: hidden; border-radius: clamp(26px, 4vw, 56px); border: clamp(6px, .8vw, 12px) solid #fff; box-shadow: 0 40px 80px -30px rgba(10, 42, 102, .55); }
.bloum__shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bloum__phone { position: absolute; right: -6%; bottom: -12%; width: clamp(120px, 15vw, 220px); transform: rotate(7deg); box-shadow: 0 0 0 clamp(5px, .6vw, 9px) #fff, 0 30px 60px -20px rgba(10, 42, 102, .6); }
.bloum__jujubes { position: absolute; inset: -10% 0 0; z-index: 1; pointer-events: none; }
.jj { position: absolute; width: clamp(70px, 8.5vw, 160px); height: auto; filter: drop-shadow(0 18px 24px rgba(10, 42, 102, .35)); will-change: transform; }
.jj--1 { left: 4%; top: 10%; }
.jj--2 { right: 4%; top: 6%; width: clamp(80px, 10vw, 180px); }
.jj--3 { left: 6%; bottom: 4%; }
.jj--4 { right: 9%; bottom: 0; width: clamp(60px, 7vw, 130px); }
.chap--bloum .chap__outro { padding-top: clamp(64px, 9vh, 100px); }
.chap--bloum .chap__text { color: #fff; opacity: .95; }
.chap__cta--pill { --cta-bg: #ffd93b; --cta-fg: #0a2a66; box-shadow: 0 .4em 0 #c99a00; }

/* ==========================================================================
   03 — CAP AURE : lenteur, cinéma, boussole
   ========================================================================== */
.chap--aure { --navy: #030812; --lime: #f2ff9e; --sand: #d6d1c4; background: var(--navy); color: var(--sand); }
.chap--aure .chap__meta { color: var(--lime); }
.aure__title { font-weight: 500; font-variation-settings: "wdth" 62; letter-spacing: -.01em; color: #fff; font-size: clamp(3.8rem, 13vw, 13rem); }
.aure__aperture { position: absolute; inset: 0; z-index: 2; }
.aure__aperture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.chap--aure .chap__cta { --cta-bg: var(--lime); --cta-fg: var(--navy); }

/* ==========================================================================
   04 — ORSENNE : éditorial, nuit dorée
   ========================================================================== */
.chap--orsenne { --gold: #d2913f; background: #120b07; color: #f1e6d8; }
.chap--orsenne .chap__meta { color: var(--gold); }
.orsenne__title { font-weight: 600; text-transform: none; letter-spacing: -.01em; line-height: .88; font-size: clamp(4.4rem, 15vw, 15rem); font-variation-settings: "wdth" 52; }
.orsenne__gallery { display: grid; gap: clamp(32px, 5vh, 64px); }
.orsenne__img { overflow: hidden; border-radius: 2px; }
.orsenne__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.orsenne__trio { display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 3.5vw, 64px); padding-block: clamp(16px, 4vh, 48px) 0; }
.orsenne__img--wide { width: min(100%, 1080px); margin-inline: auto; }
.orsenne__lang { position: relative; width: clamp(150px, 15vw, 240px); display: grid; gap: 18px; justify-items: center; }
.orsenne__lang .sc-phone { width: 100%; box-shadow: 0 0 0 6px #241710, 0 40px 80px -30px rgba(0, 0, 0, .75); }
.orsenne__lang figcaption { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.orsenne__lang--fr { transform: rotate(-6deg) translateY(6%); }
.orsenne__lang--ar { z-index: 2; }
.orsenne__lang--en { transform: rotate(6deg) translateY(6%); }
.orsenne__quote { font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.3; font-style: italic; color: var(--gold); max-width: 22em; }
.chap--orsenne .chap__cta { --cta-bg: var(--gold); --cta-fg: #120b07; }

/* ==========================================================================
   05 — LE ROYAL : photographie, arche, ivoire
   ========================================================================== */
.chap--royal { --green: #1e2a22; --brass: #b08d57; background: #f3efe6; color: var(--green); }
.royal__hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: #fff; }
.royal__photo { position: absolute; inset: 0; }
.royal__photo img { width: 100%; height: 100%; object-fit: cover; }
.royal__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 18, 14, .72), rgba(12, 18, 14, .08) 62%); }
.royal__head { position: absolute; left: 0; right: 0; bottom: clamp(36px, 9vh, 96px); display: grid; justify-items: center; gap: 18px; text-align: center; }
.royal__title { display: grid; justify-items: center; font-weight: 400; text-transform: none; letter-spacing: -.035em; font-variation-settings: "wdth" 72; font-size: clamp(4rem, 13vw, 13.5rem); }
.royal__sub { font-family: var(--f-text); font-weight: 500; font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.7rem); letter-spacing: .32em; text-transform: uppercase; line-height: 1.3; margin-top: .3em; }
.royal__media { position: relative; width: min(100%, 1180px); padding-top: clamp(36px, 6vh, 72px); }
.royal__arch { overflow: hidden; border-radius: 40vw 40vw 18px 18px / 26vw 26vw 18px 18px; box-shadow: 0 50px 100px -40px rgba(30, 42, 34, .5); }
.royal__arch img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 0; }
.royal__phone { position: absolute; right: -4%; bottom: -8%; width: clamp(110px, 17%, 210px); transform: rotate(-4deg); box-shadow: 0 0 0 6px #f3efe6, 0 30px 60px -20px rgba(30, 42, 34, .5); }
.royal__facts { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.royal__facts span { margin: 0 .6em; opacity: .6; }
.chap--royal .chap__outro { padding-top: clamp(64px, 9vh, 96px); }
.chap--royal .chap__cta { --cta-bg: var(--green); --cta-fg: #f3efe6; }

/* ==========================================================================
   06 — RESTAURANT : service à table
   ========================================================================== */
.chap--resto { --red: #e3342f; background: #1b120c; color: #f5ead9; }
.chap--resto .chap__meta { color: #f0b48a; }
.resto__title { display: grid; justify-items: center; font-size: clamp(3.8rem, 13vw, 13rem); }
.resto__script { font-family: var(--f-text); font-weight: 500; font-style: italic; text-transform: none; letter-spacing: -.02em; font-size: .24em; line-height: 1.2; margin-top: .4em; color: #f0b48a; }
.resto__pin { display: grid; align-items: center; min-height: 92svh; }
.resto__table { position: relative; height: min(76vh, 720px); width: min(100%, 1180px); }
.plate { position: absolute; overflow: hidden; border-radius: 10px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.plate--1 { left: 2%; top: 6%; width: 64%; aspect-ratio: 16 / 10; transform: rotate(-5deg); }
.plate--2 { right: 2%; top: 30%; width: 58%; aspect-ratio: 16 / 10; transform: rotate(4deg); }
.plate--3 { left: 40%; bottom: -4%; width: 16%; transform: rotate(-7deg); }
.plate.sc-phone { border-radius: clamp(18px, 2vw, 30px); box-shadow: 0 0 0 6px #0d0e12, 0 40px 80px -30px rgba(0, 0, 0, .8); }
.resto__menu { display: grid; gap: 4px; width: min(100%, 30em); }
.resto__menu li { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; }
.resto__menu span { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #f0b48a; }
.resto__menu li::after { content: ""; order: 2; flex: 1; border-bottom: 1px dotted rgba(245, 234, 217, .35); transform: translateY(-4px); }
.resto__menu b { order: 3; font-weight: 600; }
.chap--resto .chap__cta { --cta-bg: var(--red); --cta-fg: #fff; }

/* ==========================================================================
   FINALE
   ========================================================================== */
.sc-end { position: relative; overflow: hidden; min-height: 100svh; display: grid; align-items: center; padding: clamp(120px, 16vh, 180px) 0 clamp(70px, 12vh, 140px); background: var(--orange); color: #121722; }
.sc-end__disc { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--orange); transform: scale(0); }
.sc-end__inner { position: relative; z-index: 2; display: grid; gap: clamp(30px, 6vh, 64px); }
.sc-end__eyebrow { display: flex; align-items: center; gap: 1em; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sc-end__eyebrow span { display: inline-grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; border: 1px solid currentColor; font-variant-numeric: tabular-nums; }
.sc-end__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.9rem, 8.2vw, 9.4rem); line-height: .88; letter-spacing: -.045em; text-transform: uppercase; font-variation-settings: "wdth" 84; text-wrap: balance; max-width: 15em; }
.sc-end__title > span { display: inline-block; }
.sc-end__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.sc-end__btn {
  display: inline-flex; align-items: center; gap: .8em;
  padding: 1.25em 2.1em; border-radius: var(--r-pill);
  background: #121722; color: #fff; font-weight: 650; font-size: clamp(1rem, 1.3vw, 1.2rem);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  will-change: transform;
}
.sc-end__btn svg { width: 1.1em; height: 1.1em; transition: transform var(--dur) var(--ease); }
.sc-end__btn:hover, .sc-end__btn:focus-visible { background: #fff; color: #121722; }
.sc-end__btn:hover svg { transform: translateX(5px) rotate(-45deg); }
.sc-end__alt { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.sc-end__alt:hover { text-decoration-thickness: 2px; }
.sc-end :focus-visible { outline-color: #121722; }
.sc-motion .sc-end { background: var(--sc-bg); color: var(--sc-fg); }

/* ==========================================================================
   Tablette et mobile : compositions repensées, pas réduites
   ========================================================================== */
@media (max-width: 900px) {
  .sc-hero__inner { padding-top: 96px; }
  .sc-hero__title { font-size: clamp(38px, 10.6vw, 56px); }
  .sc-ring { --cw: min(44vw, 200px); height: calc(var(--cw) * .62 + 56px); }


  .sc-hud { display: none; } /* sur mobile, le lien « Démo suivante » guide la lecture */

  .chap__intro { min-height: 54svh; padding-block: 72px 48px; gap: 14px; }
  .chap--rayonne .chap__intro, .chap--bloum .chap__intro { min-height: 54svh; padding-block: 72px 48px; }
  /* Bloum suit directement l'ouverture : moins de vide au-dessus du numéro */
  .chap--bloum .chap__intro { min-height: 0; padding-block: 40px 36px; }
  .chap--rayonne .chap__intro { min-height: 0; padding-block: 36px 32px; }
  .chap--aure .chap__intro { min-height: 0; padding-block: 36px 24px; }
  .chap__title { font-size: clamp(3.2rem, 18vw, 7.4rem); }
  .chap__outro { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 14px; padding-block: 40px 60px; }
  .chap__outro > * { grid-column: 1 !important; grid-row: auto !important; }
  .chap__outro > .chap__lead, .chap__outro > .chap__text { margin-bottom: 8px; }
  .chap__cta { justify-self: stretch !important; min-width: 0; font-size: 1.15rem; padding: .8em .8em .8em 1.5em; }
  .chap__hint, .chap__next { justify-self: center !important; }
  .chap--bloum .chap__outro, .chap--royal .chap__outro { padding-top: 64px; }
  .chap__outro--center { justify-items: center; }
  .chap__next { margin-top: 10px; font-size: .8125rem; opacity: .78; }
  .chap__next i { width: 2.4em; height: 2.4em; animation: sc-next 1.8s var(--ease-in-out) infinite; }
  @keyframes sc-next { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }


  .rayonne__arcs { width: 120vw; bottom: -88vw; }
  .rayonne__title { font-size: clamp(2.4rem, 11.4vw, 6rem); }
  .rayonne__track { display: grid; grid-template-columns: minmax(0, 1fr); width: auto; gap: 18px; padding-block: 8px; min-height: 0; }
  .rayonne__shot { width: auto; }
  .rayonne__shot img { border-radius: 18px; box-shadow: 8px 8px 0 var(--ink-r); }
  /* Mobile : polaroïds et téléphone se chevauchent comme un collage, pour un chapitre plus court */
  .rayonne__polas { width: auto; height: 72vw; }
  .rayonne__polas .pola { width: 48%; }
  .rayonne__phone { position: relative; z-index: 2; width: 38vw; justify-self: center; margin-top: -16vw; }

  .bloum__title { font-size: clamp(3.6rem, 21vw, 10rem); }
  .bloum__scene { padding-top: 8px; }
  .bloum__puff { width: 86vw; }
  .bloum__phone { right: 2%; bottom: -14%; width: 22vw; transform: rotate(6deg); }
  .jj { width: clamp(54px, 16vw, 92px); }
  .jj--1 { left: -3%; top: 0; }
  .jj--2 { right: -2%; top: -4%; width: clamp(60px, 18vw, 104px); }
  .jj--3 { left: 0; bottom: -18%; }
  .jj--4 { right: 18%; bottom: -24%; }

  .aure__title { font-size: clamp(3.4rem, 20vw, 7rem); }

  .orsenne__title { font-size: clamp(4.6rem, 26vw, 9rem); }
  .orsenne__gallery { gap: 28px; }
  .orsenne__lang { width: 31vw; gap: 12px; }
  .orsenne__lang figcaption { font-size: .625rem; letter-spacing: .1em; }
  .orsenne__trio { gap: 2vw; }
  .orsenne__lang { width: 26vw; }

  .royal__hero { height: 92svh; }
  .royal__title { font-size: clamp(3.6rem, 19vw, 7.5rem); }
  .royal__media { padding-top: 44px; }
  .royal__arch { border-radius: 50vw 50vw 14px 14px / 40vw 40vw 14px 14px; }
  .royal__arch img { aspect-ratio: 4 / 4.4; object-position: 30% 0; }
  .royal__phone { right: -2%; bottom: -6%; width: 22vw; }
  .royal__facts span { margin: 0 .35em; }

  .resto__title { font-size: clamp(3.4rem, 18vw, 7rem); }
  .resto__script { font-size: .3em; }
  .resto__pin { min-height: 0; padding-block: 24px; }
  .resto__table { height: 100vw; }
  .plate--1 { width: 84%; left: 0; }
  .plate--2 { width: 78%; top: 38%; right: 0; }
  .plate--3 { width: 24%; left: 6%; bottom: -4%; }

  .sc-end__title { font-size: clamp(2.5rem, 12.6vw, 5.4rem); }
  .sc-end__actions { flex-direction: column; align-items: flex-start; }
}

/* ---------- Navigation mobile sur fond noir (cette page uniquement) ---------- */
@media (max-width: 1060px) {
  .page-showcase .nav.glass { background: #07080b; border-color: rgba(255, 255, 255, .1); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8); color: #f3efe8; }
  .page-showcase .nav.glass::before { display: none; }
  .page-showcase .nav.glass::after { background: #07080b; }
  .page-showcase .nav__bg { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .page-showcase .nav__burger { color: #f3efe8; }
  .page-showcase .nav__burger .bars { background: #f3efe8; }
  .page-showcase .nav__burger .bars i { background: #07080b; }

  .page-showcase .mobile-menu { color: #f3efe8; }
  .page-showcase .mobile-menu__backdrop { background: #07080b; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .page-showcase .mobile-menu__group, .page-showcase a.mobile-menu__top { border-color: rgba(255, 255, 255, .12); }
  .page-showcase .mobile-menu__top .plus { border-color: rgba(255, 255, 255, .28); }
  .page-showcase .mobile-menu__top[aria-expanded="true"] .plus { background: #f3efe8; color: #07080b; border-color: #f3efe8; }
  .page-showcase .mobile-menu__main span, .page-showcase .mobile-menu__contact { color: rgba(243, 239, 232, .62); }
  .page-showcase .mobile-menu__more a { background: rgba(255, 255, 255, .08); }
}

/* ---------- Réduction des animations : tout est statique et lisible ---------- */
@media (prefers-reduced-motion: reduce) {
  .sc-cue__mouse i, .sc-cue__chev i, .chap__next i { animation: none; }
  .aure__compass { display: none; }
}

/* ==========================================================================
   Choix des démos (dans l'ouverture)
   ========================================================================== */
.sc-filter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin-top: clamp(18px, 3vh, 28px); background: rgba(255, 255, 255, .04); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--sc-line); }
.sc-filter button { padding: 12px 22px; border-radius: var(--r-pill); font-size: .95rem; font-weight: 600; color: var(--sc-dim); transition: background var(--dur-fast), color var(--dur-fast); }
.sc-filter button:hover { color: var(--sc-fg); }
.sc-filter button.is-on { background: var(--sc-fg); color: var(--sc-bg); }
.chap[hidden] { display: none !important; }

/* ==========================================================================
   TOLVA : le chapitre prend la teinte du coloris affiché
   ========================================================================== */
.chap--tolva { --tl-bg: #b9694f; --tl-fg: #fff4ec; background: var(--tl-bg); color: var(--tl-fg); }
.tolva__title { display: grid; justify-items: center; font-weight: 700; text-transform: none; letter-spacing: -.05em; font-variation-settings: "wdth" 96; font-size: clamp(4.2rem, 15vw, 15rem); line-height: .82; }
.tolva__sub { font-family: var(--f-text); font-size: .16em; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .7; margin-top: .6em; }
.tolva__stage { position: relative; display: grid; justify-items: center; padding-top: clamp(16px, 3vh, 40px); }
.tolva__frame { position: relative; width: min(100%, 1120px); aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .55); }
.tolva__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.tolva__frame img.is-on { opacity: 1; }
.tolva__phone { position: absolute; right: max(2%, calc(50% - 600px)); bottom: -6%; width: clamp(120px, 14vw, 210px); transform: rotate(5deg); box-shadow: 0 0 0 6px rgba(0, 0, 0, .85), 0 30px 60px -20px rgba(0, 0, 0, .6); }
.tolva__swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: clamp(28px, 4vh, 44px); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tolva__swatches li { display: inline-flex; align-items: center; gap: 8px; opacity: .55; transition: opacity .4s var(--ease); }
.tolva__swatches li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px currentColor; }
.tolva__swatches li.is-on { opacity: 1; }
.chap--tolva .chap__cta { --cta-bg: var(--tl-fg); --cta-fg: var(--tl-bg); }

/* ==========================================================================
   PEAK : air froid, logotype arrondi, la montagne en fond
   ========================================================================== */
.chap--peak { --pk-ice: #a9cbe6; --pk-ink: #0f2a3d; background: #e9f0f5; color: var(--pk-ink); }
.peak__title { font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-variation-settings: "wdth" 150; font-size: clamp(4.4rem, 16vw, 16rem); line-height: .8; color: var(--pk-ice); -webkit-text-stroke: .012em var(--pk-ink); }
.peak__stage { position: relative; display: grid; justify-items: center; padding-block: clamp(16px, 3vh, 40px) clamp(16px, 3vh, 32px); }
.peak__ghost { position: absolute; top: 2%; left: 0; right: 0; z-index: 0; text-align: center; font-family: var(--f-display); font-weight: 900; font-variation-settings: "wdth" 150; font-size: clamp(8rem, 30vw, 30rem); line-height: .8; color: rgba(169, 203, 230, .45); pointer-events: none; }
.peak__plate { position: relative; z-index: 1; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px rgba(15, 42, 61, .08), 0 50px 100px -40px rgba(15, 42, 61, .5); }
.peak__plate img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.peak__plate--hero { width: min(88%, 1040px); }
.peak__plate--gear { z-index: 2; width: min(52%, 600px); margin-top: -12%; justify-self: end; margin-right: 2%; }
.peak__phone { position: absolute; z-index: 2; left: 4%; bottom: 4%; width: clamp(110px, 12vw, 190px); transform: rotate(-5deg); box-shadow: 0 0 0 6px var(--pk-ink), 0 30px 60px -20px rgba(15, 42, 61, .5); }
.chap--peak .chap__cta { --cta-bg: var(--pk-ink); --cta-fg: #e9f0f5; }

/* ==========================================================================
   STRYDE : noir et blanc, un bandeau « Pure force » qui défile
   ========================================================================== */
.chap--stryde { background: #0b0b0b; color: #e7e7e7; }
.stryde__title { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-variation-settings: "wdth" 140; font-size: clamp(3.4rem, 11vw, 11rem); line-height: .85; color: #d8d8d8; }
.stryde__stage { position: relative; overflow: hidden; padding-block: clamp(16px, 3vh, 40px) clamp(24px, 4vh, 48px); perspective: 1400px; }
.stryde__band { position: absolute; top: 50%; left: 0; z-index: 0; display: flex; width: max-content; transform: translateY(-50%); white-space: nowrap; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 140; font-size: clamp(5rem, 14vw, 14rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(231, 231, 231, .22); pointer-events: none; }
.stryde__inner { position: relative; z-index: 1; display: grid; justify-items: center; }
.stryde__shot { width: min(100%, 1080px); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 120px -40px rgba(0, 0, 0, .9); transform-origin: 50% 100%; }
.stryde__shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.stryde__phone { position: absolute; right: 3%; bottom: -4%; width: clamp(110px, 12vw, 190px); box-shadow: 0 0 0 6px #1e1e1e, 0 30px 60px -20px rgba(0, 0, 0, .8); }
.chap--stryde .chap__cta { --cta-bg: #e7e7e7; --cta-fg: #0b0b0b; }

/* ==========================================================================
   SNEAKS : douceur crème, trois coloris en éventail
   ========================================================================== */
.chap--sneaks { background: #f6ecdd; color: #2b2118; }
.sneaks__title { font-weight: 900; text-transform: none; letter-spacing: -.04em; font-variation-settings: "wdth" 110; font-size: clamp(4.4rem, 15vw, 15rem); line-height: .82; color: #e3b88a; text-shadow: .04em .04em 0 #2b2118; }
.sneaks__stage { position: relative; overflow: hidden; padding-block: clamp(24px, 4vh, 48px) clamp(40px, 7vh, 96px); }
.sneaks__ghost { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -55%; text-align: center; white-space: nowrap; font-family: var(--f-display); font-weight: 900; font-variation-settings: "wdth" 110; font-size: clamp(7rem, 24vw, 24rem); line-height: .8; letter-spacing: -.04em; color: #efdcc2; pointer-events: none; }
.sneaks__row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.35fr 1fr; align-items: center; gap: 0; perspective: 1600px; }
.sneaks__card { position: relative; display: grid; gap: 14px; justify-items: center; }
.sneaks__frame { width: 100%; border-radius: 22px; padding: 8px; background: #fff; box-shadow: 0 40px 80px -40px rgba(120, 82, 40, .55), 0 0 0 1px rgba(43, 33, 24, .06); }
.sneaks__frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 15px; }
.sneaks__card--sky { transform: translateX(12%) rotateY(24deg) scale(.86); transform-origin: 100% 50%; }
.sneaks__card--orange { transform: translateX(-12%) rotateY(-24deg) scale(.86); transform-origin: 0% 50%; }
.sneaks__card--main { z-index: 2; }
.sneaks__card figcaption { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.sneaks__card figcaption::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(43, 33, 24, .2); }
.sneaks__phone { position: absolute; z-index: 3; right: max(4%, calc(50% - 640px)); bottom: clamp(8px, 2vh, 24px); width: clamp(110px, 11vw, 180px); transform: rotate(6deg); box-shadow: 0 0 0 6px #2b2118, 0 30px 60px -20px rgba(43, 33, 24, .5); }
.chap--sneaks .chap__cta { --cta-bg: #2b2118; --cta-fg: #f6ecdd; }

@media (max-width: 900px) {
  .sc-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 18px; }
  .sc-filter button { padding: 11px 6px; font-size: .8rem; line-height: 1.2; border-radius: 14px; }
  .tolva__title, .sneaks__title { font-size: clamp(3.4rem, 19vw, 7rem); }
  .peak__title { font-size: clamp(3.4rem, 22vw, 8rem); }
  .stryde__title { font-size: clamp(2.6rem, 14vw, 6rem); }
  .tolva__phone { width: 26vw; right: 2%; bottom: -10%; }
  .peak__plate--hero { width: 100%; }
  .peak__plate--gear { width: 70%; margin-top: -8%; }
  .peak__phone { width: 25vw; left: 0; bottom: 4px; }
  .peak__stage { padding-bottom: 8px; }
  .stryde__phone { width: 26vw; bottom: -8%; }
  /* mobile : la carte beige devant, les deux coloris en retrait de chaque côté */
  .sneaks__stage { padding-bottom: 72px; }
  .sneaks__row { grid-template-columns: 1fr; justify-items: center; }
  .sneaks__card--main { width: 74%; grid-row: 1; grid-column: 1; }
  .sneaks__card--sky, .sneaks__card--orange { grid-row: 1; grid-column: 1; width: 58%; align-self: start; }
  .sneaks__card--sky { justify-self: start; transform: translate(-6%, -34%) rotate(-7deg); }
  .sneaks__card--orange { justify-self: end; transform: translate(6%, 52%) rotate(7deg); }
  .sneaks__card--sky figcaption, .sneaks__card--orange figcaption { display: none; }
  .sneaks__frame { padding: 5px; border-radius: 14px; }
  .sneaks__frame img { border-radius: 10px; }
  .sneaks__stage { padding-top: 40px; }
  .sneaks__phone { width: 22vw; right: auto; left: 5%; bottom: 8px; transform: rotate(-6deg); }
}

/* Nouvelles démos : ouverture resserrée, le numéro suit de près la démo précédente */
.chap--tolva .chap__intro, .chap--peak .chap__intro, .chap--stryde .chap__intro, .chap--sneaks .chap__intro { padding-block: clamp(36px, 4.5vh, 56px) clamp(12px, 2vh, 24px); }
@media (max-width: 900px) {
  .chap--tolva .chap__intro, .chap--peak .chap__intro, .chap--stryde .chap__intro, .chap--sneaks .chap__intro { min-height: 0; padding-block: 36px 24px; }
}

/* Choix des démos toujours accessible : une petite barre en verre sous le menu, visible pendant les chapitres */
.sc-dock {
  position: fixed; left: 50%; top: 80px; z-index: 80; display: flex; gap: 2px; padding: 4px;
  border-radius: var(--r-pill); translate: -50% 0; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease), top .45s var(--ease), visibility 0s .35s;
}
.sc-dock.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sc-dock.glass { background: rgba(18, 23, 34, .22); border-color: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); }
.sc-dock.glass::before { opacity: .35; }
.menu-open .sc-dock, .sc-dock.is-hidden { opacity: 0 !important; visibility: hidden !important; }
.sc-dock.is-up { top: 14px; }
.sc-dock button { position: relative; z-index: 1; padding: 8px 14px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; color: rgba(243, 239, 232, .72); white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast); }
.sc-dock button:hover { color: #fff; }
.sc-dock button.is-on { background: rgba(243, 239, 232, .92); color: #121722; }
@media (max-width: 900px) {
  .sc-dock { top: 76px; max-width: calc(100% - 24px); }
  .sc-dock button { padding: 8px 11px; font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) { .sc-dock { transition: none; } }

/* Sneaks : les nuages s'écartent, la chaussure se dévoile puis change de coloris */
.chap--sneaks { --sn-tint: #f6ecdd; background: var(--sn-tint); }
.sneaks__reveal { position: relative; display: grid; justify-items: center; padding-block: clamp(8px, 2vh, 24px) clamp(20px, 3vh, 40px); }
.sneaks__scene { position: relative; perspective: 1200px; -webkit-mask-image: radial-gradient(62% 64% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(62% 64% at 50% 50%, #000 62%, transparent 100%); width: min(100%, 1100px); height: clamp(360px, 62vh, 620px); overflow: hidden; }
.sneaks__float { position: absolute; left: 50%; top: 42%; width: min(62%, 640px); aspect-ratio: 1000 / 336; translate: -50% -50%; z-index: 2; }
@keyframes sn-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(-2deg); } }
.sneaks__shoe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: sn-bob 6s ease-in-out infinite; opacity: 0; transition: opacity .6s var(--ease); filter: drop-shadow(0 30px 24px rgba(120, 82, 40, .22)); }
.sneaks__shoe.is-on { opacity: 1; }
.sneaks__floor { position: absolute; left: 50%; top: 70%; width: min(40%, 380px); height: 46px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 82, 40, .28), transparent); z-index: 1; }
.sneaks__cloud { position: absolute; z-index: 3; width: clamp(280px, 46%, 560px); height: auto; pointer-events: none; opacity: .95; }
.sneaks__cloud--1 { left: -26%; top: -14%; }
.sneaks__cloud--2 { right: -26%; top: -4%; transform: scaleX(-1); }
.sneaks__cloud--3 { left: -12%; bottom: -62%; width: clamp(320px, 52%, 640px); }
.sneaks__cloud--4 { right: -12%; bottom: -66%; width: clamp(320px, 52%, 640px); transform: scaleX(-1); }
.sneaks__dots { display: flex; gap: 18px; margin-top: 10px; font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.sneaks__dots li { display: inline-flex; align-items: center; gap: 8px; opacity: .45; transition: opacity .4s var(--ease); }
.sneaks__dots li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(43, 33, 24, .2); }
.sneaks__dots li.is-on { opacity: 1; }
@media (max-width: 900px) {
  .sneaks__scene { height: 64vw; min-height: 260px; }
  .sneaks__float { width: 86%; top: 44%; }
  .sneaks__cloud { width: 62%; }
  .sneaks__cloud--3, .sneaks__cloud--4 { width: 70%; }
  .sneaks__dots { gap: 12px; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .sneaks__shoe { animation: none; } }

/* Cap Aure : un écran et un téléphone comme les autres démos ; la boussole s'efface pour ouvrir le site */
.aure__stage { position: relative; height: auto; min-height: 0; overflow: visible; display: grid; justify-items: center; padding-top: clamp(8px, 2vh, 24px); }
.aure__screen { position: relative; width: min(100%, 1080px); aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: radial-gradient(70% 80% at 50% 45%, #1b2230, #090b10); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 110px -50px rgba(0, 0, 0, .9); }
.aure__screen .aure__aperture { position: absolute; inset: 0; z-index: 1; }
.aure__screen .aure__aperture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.aure__screen .aure__compass { position: absolute; left: 50%; top: 50%; z-index: 3; width: 34%; translate: -50% -50%; opacity: 0; visibility: hidden; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.aure__phone { position: absolute; right: max(2%, calc(50% - 600px)); bottom: -5%; z-index: 4; width: clamp(120px, 13vw, 200px); transform: rotate(4deg); box-shadow: 0 0 0 6px #0d0e12, 0 30px 60px -20px rgba(0, 0, 0, .8); }
@media (max-width: 900px) {
  .aure__stage { height: auto; }
  .aure__screen { border-radius: 14px; }
  .aure__screen .aure__compass { width: 38%; }
  .aure__phone { width: 26vw; right: 2%; bottom: -10%; }
  /* Sneaks sur mobile : la chaussure et le téléphone, sans les trois écrans */
  .sneaks__ghost, .sneaks__phone { display: none; }
  .sneaks__stage { padding-block: 56px 72px; }
}
@media (prefers-reduced-motion: reduce) { .aure__screen .aure__compass { display: none; } }

/* Cap Aure, version immersive : l'écran reste à l'écran (sticky CSS) le temps que la boussole ouvre le site */
.aure__stage { display: block; height: 118svh; }
.aure__sticky { position: sticky; top: max(84px, 11vh); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; width: 100%; perspective: 1400px; }
.aure__screen { width: min(100%, 1160px); transform-origin: 50% 50%; }
.aure__screen .aure__compass { width: 40%; }
.aure__ring { position: absolute; left: 50%; top: 50%; z-index: 2; width: 40%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(220, 230, 200, .55), 0 0 60px rgba(220, 230, 200, .18) inset; opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  .aure__stage { height: 66svh; }
  .aure__sticky { top: 96px; }
  .aure__screen .aure__compass { width: 46%; }
  .aure__ring { width: 46%; }
}
@media (prefers-reduced-motion: reduce) { .aure__stage { height: auto; } .aure__sticky { position: static; } .aure__ring { display: none; } }

/* Cap Aure mobile : la boussole ouvre le rendu mobile, puis l'écran d'ordinateur vient combler l'espace dessous */
@media (max-width: 900px) {
  .aure__stage { height: auto; }
  .aure__sticky { position: relative; top: auto; }
  .aure__screen { width: 78%; aspect-ratio: 4 / 5; }
  .aure__phone { display: none; }
  .aure__pc { display: block; width: 92%; margin: -14% auto 0; position: relative; z-index: 5; border-radius: 12px; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 0 0 4px #0d0e12, 0 30px 60px -24px rgba(0, 0, 0, .9); }
  .aure__pc img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
  .aure__stage { padding-bottom: 8px; }
}

/* Sneaks : les trois écrans remontent sur le bas des nuages */
.sneaks__stage { margin-top: clamp(-150px, -12vh, -60px); z-index: 2; }
@media (max-width: 900px) { .sneaks__stage { margin-top: -64px; } }

/* Cap Aure, composition compacte (PC comme mobile) : l'écran vertical où la boussole ouvre le site mobile,
   et l'écran d'ordinateur qui vient se poser contre lui */
.aure__phone { display: none !important; }
.aure__pc { position: relative; z-index: 5; margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 4px #0d0e12, 0 40px 80px -30px rgba(0, 0, 0, .9); }
.aure__pc img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.aure__screen .aure__aperture img { object-position: 50% 0; }
@media (min-width: 901px) {
  .aure__stage { height: 104svh; }
  .aure__sticky { grid-template-columns: auto auto; justify-content: center; align-items: center; top: max(96px, 14vh); }
  .aure__screen { width: clamp(300px, 25vw, 390px); aspect-ratio: 4 / 5; }
  .aure__screen .aure__compass, .aure__ring { width: 50%; }
  .aure__pc { width: clamp(460px, 44vw, 680px); margin-left: -56px; transform: rotate(-2deg); }
}

/* ==========================================================================
   PC uniquement : des chapitres compacts — en arrivant sur une démo,
   on voit déjà son ouverture, son visuel et sa fin (voire le début de la suivante).
   ========================================================================== */
@media (min-width: 901px) {
  .chap__intro, .chap--rayonne .chap__intro, .chap--bloum .chap__intro, .chap--aure .chap__intro,
  .chap--tolva .chap__intro, .chap--peak .chap__intro, .chap--stryde .chap__intro, .chap--sneaks .chap__intro { padding-block: clamp(36px, 5vh, 56px) clamp(10px, 1.6vh, 18px); gap: 10px; }
  .chap__outro { padding-block: clamp(24px, 3.5vh, 40px) clamp(32px, 5vh, 56px); }
  .chap--bloum .chap__outro, .chap--royal .chap__outro { padding-top: clamp(28px, 4vh, 48px); }

  /* titres : plus contenus */
  .chap__title { font-size: clamp(3rem, 7vw, 7.4rem); }
  .bloum__title { font-size: clamp(3.6rem, 9vw, 9.4rem); }
  .rayonne__title { font-size: clamp(3rem, 7vw, 7.6rem); }
  .aure__title, .royal__title, .resto__title { font-size: clamp(3rem, 7vw, 7.4rem); }
  .orsenne__title, .tolva__title, .sneaks__title { font-size: clamp(3.2rem, 8vw, 8.4rem); }
  .peak__title { font-size: clamp(3.2rem, 8.5vw, 9rem); }
  .stryde__title { font-size: clamp(2.6rem, 6.4vw, 6.6rem); }

  /* visuels : à l'échelle d'un écran */
  .bloum__scene { padding-top: 12px; }
  .bloum__puff { width: min(52vw, 760px); }
  /* piste plus large que l'écran : le défilement horizontal a une vraie course (~30vw) */
  .rayonne__track { height: 100svh; min-height: 0; align-items: center; padding-block: 110px 48px; }
  .rayonne__shot { width: min(60vw, 110vh); }
  .rayonne__polas { width: min(40vw, 72vh); height: min(56vh, 40vw); }
  .rayonne__phone { width: min(15vw, 26vh); }
  .tolva__frame { width: min(100%, 760px); }
  .tolva__swatches { margin-top: 18px; }
  .aure__stage { height: 82svh; }
  .aure__sticky { top: max(90px, 12vh); }
  .aure__screen { width: clamp(240px, 19vw, 300px); }
  .aure__pc { width: clamp(380px, 34vw, 540px); }
  .orsenne__lang { width: clamp(130px, 11vw, 180px); }
  .royal__hero { height: 72svh; min-height: 460px; }
  .royal__media { width: min(100%, 780px); padding-top: clamp(24px, 4vh, 48px); }
  .resto__pin { min-height: 0; padding-block: 12px; }
  .resto__table { height: min(54vh, 500px); width: min(100%, 880px); }
  .peak__plate--hero { width: min(64%, 720px); }
  .peak__plate--gear { width: min(36%, 420px); margin-top: -9%; margin-right: 12%; }
  .peak__phone { left: max(4%, calc(50% - 440px)); bottom: clamp(12px, 2vh, 24px); width: clamp(100px, 9vw, 150px); }
  .stryde__shot { width: min(100%, 740px); }
  .stryde__band { font-size: clamp(4rem, 10vw, 10rem); }
  .sneaks__scene { height: clamp(260px, 38vh, 380px); }
  .sneaks__float { width: min(48%, 460px); }
  .sneaks__row { max-width: 1000px; }
  .sneaks__stage { margin-top: clamp(-90px, -8vh, -40px); padding-bottom: 32px; }
  .sneaks__ghost { font-size: clamp(5rem, 16vw, 16rem); }
}

/* Après la démo : un accès direct au configurateur */
.chap__start { display: inline-flex; align-items: center; gap: .5em; margin-top: 4px; font-size: .9rem; opacity: .85; transition: opacity var(--dur-fast); }
.chap__start b { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.chap__start svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.chap__start:hover { opacity: 1; }
.chap__start:hover svg { transform: translateX(3px); }
.chap__outro > .chap__start { grid-column: 2; justify-self: center; }
.chap__outro--center > .chap__start { grid-column: 1; }
.chap--bloum .chap__start { color: #fff; }
@media (max-width: 900px) { .chap__outro > .chap__start { grid-column: 1 !important; justify-self: center !important; } }

/* ==========================================================================
   SELMARIN : la mannequin traverse la scène, puis la scène devient le site
   La scène animée est masquée par défaut (état final = la capture du site) :
   sans JS ou avec « réduire les animations », on voit directement la page d'accueil.
   ========================================================================== */
.chap--selmarin { --sm-bg: #ede9e1; --sm-ink: #0d0d0f; --sm-blue: #1e3fd8; background: var(--sm-bg); color: var(--sm-ink); }
.selm__title { display: flex; justify-content: center; width: max-content; max-width: none; font-weight: 800; letter-spacing: -.06em; font-variation-settings: "wdth" 100; }
.selm__title span { display: inline-block; }
.chap--selmarin .chap__meta { color: var(--sm-blue); }
.selm__stage { position: relative; padding-top: clamp(16px, 3vh, 40px); }
.selm__sticky { position: relative; display: grid; place-items: center; overflow: clip; }
/* le mot géant en contour, derrière le téléphone */
.selm__ghost { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: max-content; padding-inline: 4vw; font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: clamp(7rem, 24vw, 26rem); line-height: .8; letter-spacing: -.06em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(13, 13, 15, .14); pointer-events: none; }
.selm__duo { position: relative; z-index: 1; display: flex; align-items: center; }
/* le téléphone : écran, contour noir, liseré métal, boutons latéraux et Dynamic Island */
.selm__frame {
  --bz: clamp(7px, .7vw, 11px);
  position: relative; z-index: 2; flex: none; height: min(76svh, 700px); aspect-ratio: 780 / 1688;
  border-radius: clamp(30px, 3.2vw, 48px); overflow: hidden; background: #ede9e1; container-type: inline-size;
  box-shadow: 0 0 0 var(--bz) #0d0e12, 0 0 0 calc(var(--bz) + 1.5px) #4a4c52, 0 0 0 calc(var(--bz) + 2.5px) #17181c, 0 60px 110px -36px rgba(13, 13, 15, .6);
  will-change: transform;
}
.selm__duo::before { content: ""; position: absolute; z-index: 1; left: calc(-1 * clamp(7px, .7vw, 11px) - 5px); top: 20%; width: 4px; height: 9%; border-radius: 3px 0 0 3px; background: #2a2b30; box-shadow: 0 calc(min(76svh, 700px) * .12) 0 #2a2b30; }
.selm__island { position: absolute; z-index: 3; left: 50%; top: 1.7%; width: 31%; height: 3.4%; translate: -50% 0; border-radius: 99px; background: #0d0e12; }
.selm__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.selm__scene { position: absolute; inset: 0; background: #ede9e1; opacity: 0; visibility: hidden; }
.selm__kicker { position: absolute; left: 4%; top: 8%; font-size: 2.6cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6b675f; }
.selm__count { display: none; }
.selm__word { position: absolute; left: 0; right: 0; top: 15.4%; padding-left: 2%; font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: 19.4cqw; line-height: .8; letter-spacing: -.06em; text-transform: uppercase; white-space: nowrap; color: var(--sm-ink); }
.selm__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: rgba(110, 96, 70, .07); }
.selm__wipe { position: absolute; top: 0; bottom: 0; left: 102%; z-index: 2; width: 3px; margin-left: -1.5px; background: var(--sm-blue); box-shadow: 0 0 24px 2px rgba(30, 63, 216, .45); pointer-events: none; }
.selm__model { position: absolute; left: 50%; bottom: 14%; height: 56%; aspect-ratio: 560 / 814; translate: -50% 0; }
.selm__model::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -2%; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 13, 15, .28), transparent); z-index: -1; }
.selm__model img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.selm__model img.is-on { opacity: 1; }
/* l'écran d'ordinateur, glissé derrière le téléphone */
.selm__pc { position: relative; z-index: 1; flex: none; width: min(46vw, 640px, 92svh); margin-left: clamp(-90px, -5vw, -40px); border-radius: 14px; overflow: hidden; transform: rotate(2deg); box-shadow: 0 0 0 1px rgba(13, 13, 15, .1), 0 50px 100px -40px rgba(13, 13, 15, .5); }
.selm__pc img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* Animations actives : la scène reste à l'écran (sticky) le temps du défilé */
.sc-motion .selm__stage { height: 150svh; padding-top: 0; }
.sc-motion .selm__sticky { position: sticky; top: 0; height: 100svh; }

/* Cinq looks : un éventail de cartes */
.selm__looks { position: relative; z-index: 2; background: var(--sm-bg); display: grid; justify-items: center; padding-top: clamp(28px, 5vh, 56px); }
.selm__looks-title { margin-bottom: clamp(16px, 3vh, 32px); font-family: var(--f-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: .95; letter-spacing: -.045em; text-align: center; }
.selm__fan { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); width: min(100%, 1000px); }
.selm__fan li { position: relative; overflow: hidden; border-radius: 6px; background: var(--c); color: var(--t); box-shadow: 0 30px 50px -30px rgba(13, 13, 15, .45); transition: translate .5s var(--ease); }
.selm__fan li:nth-child(1) { transform: rotate(-5deg) translateY(26px); }
.selm__fan li:nth-child(2) { transform: rotate(-2.5deg) translateY(8px); }
.selm__fan li:nth-child(4) { transform: rotate(2.5deg) translateY(8px); }
.selm__fan li:nth-child(5) { transform: rotate(5deg) translateY(26px); }
.selm__fan li:hover { translate: 0 -12px; }
.selm__fan img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.selm__fan span { display: block; padding: .85em .9em; font-size: .8rem; font-weight: 650; letter-spacing: .02em; }
.chap--selmarin .chap__cta { --cta-bg: var(--sm-blue); --cta-fg: #f7f6f2; }

/* ==========================================================================
   NATURELLE : un flacon, un anneau d'ingrédients, une boutique en douceur
   ========================================================================== */
@font-face { font-family: "Erode"; src: url("../../exempletemplate/naturelle/assets/fonts/Erode-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Erode"; src: url("../../exempletemplate/naturelle/assets/fonts/Erode-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
.chap--naturelle { --nt-bg: #f6f4ef; --nt-ink: #171717; --nt-gray: #575757; --nt-star: #ff462e; background: var(--nt-bg); color: var(--nt-ink); }
.natu__title { display: grid; justify-items: center; font-family: "Erode", Georgia, serif; font-weight: 500; text-transform: none; letter-spacing: -.035em; font-variation-settings: normal; line-height: .9; }
.natu__script { font-family: "Erode", Georgia, serif; font-weight: 400; font-size: .3em; letter-spacing: -.01em; color: var(--nt-gray); margin-top: .2em; }
.natu__stage { display: grid; justify-items: center; padding-top: clamp(16px, 3vh, 40px); }
.natu__orbit { position: relative; display: grid; place-items: center; width: min(82vw, 560px); aspect-ratio: 1; }
.natu__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.natu__path circle { fill: none; stroke: rgba(23, 23, 23, .16); stroke-width: .25; stroke-dasharray: 1; stroke-dashoffset: 0; }
.natu__ring { --r: -294; position: absolute; inset: 0; }
.natu__ring li { position: absolute; left: 41.5%; top: 41.5%; width: 17%; aspect-ratio: 1; transform: rotate(var(--a)) translateY(calc(var(--r) * 1%)) rotate(calc(-1 * var(--a))); }
.natu__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--nt-bg), 0 18px 30px -14px rgba(23, 23, 23, .45); }
.natu__bottle { position: relative; z-index: 1; width: 34%; mix-blend-mode: multiply; }
.natu__badge { position: absolute; z-index: 2; right: -6%; top: 16%; padding: .75em 1.15em; border-radius: var(--r-pill); background: #fff; box-shadow: 0 14px 30px -14px rgba(23, 23, 23, .3); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.natu__badge span { color: var(--nt-star); letter-spacing: .08em; margin-right: .35em; }
.natu__screens { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: start; gap: clamp(12px, 2vw, 28px); width: min(100%, 1040px); margin-top: clamp(32px, 6vh, 72px); padding-bottom: clamp(40px, 7vh, 80px); }
.natu__plate { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(23, 23, 23, .06), 0 40px 80px -36px rgba(23, 23, 23, .35); }
.natu__plate img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.natu__plate--shop { margin-top: 14%; }
.natu__phone { position: absolute; z-index: 2; left: 50%; bottom: 0; width: clamp(110px, 11vw, 170px); translate: -50% 0; transform: rotate(-4deg); box-shadow: 0 0 0 6px var(--nt-ink), 0 30px 60px -20px rgba(23, 23, 23, .45); }
.chap--naturelle .chap__cta { --cta-bg: var(--nt-ink); --cta-fg: #fff; }

/* ==========================================================================
   ORÉLIA : l'écrin s'ouvre, les collections en sortent
   ========================================================================== */
.chap--orelia { --or-bg: #fffbec; --or-ink: #1f1b16; --or-red: #af432b; --or-gold: #d9b26a; background: var(--or-bg); color: var(--or-ink); }
.orel__ticker { display: flex; width: max-content; padding: .6em 0; background: var(--or-red); color: #fff3e6; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; animation: orel-tick 40s linear infinite; }
.orel__ticker span { padding-right: .5em; }
@keyframes orel-tick { to { transform: translateX(-50%); } }
.orel__title { display: flex; justify-content: center; width: max-content; max-width: none; font-weight: 800; letter-spacing: -.03em; font-variation-settings: "wdth" 112; perspective: 600px; }
/* reflet doré : chaque lettre porte le dégradé, le JS le fait glisser de gauche à droite */
.orel__title span { display: inline-block; padding-top: .12em; margin-top: -.12em; background: linear-gradient(100deg, var(--or-ink) 42%, var(--or-gold) 50%, var(--or-ink) 58%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.chap--orelia .chap__meta { color: var(--or-red); }
.orel__stage { display: grid; justify-items: center; padding-top: clamp(16px, 3vh, 40px); }
.orel__box { position: relative; width: min(100%, 1120px); }
.orel__case { position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; background: #2a2018 url("../../img/realisations/orelia/poster.webp") 50% 50% / cover; clip-path: inset(0% 0% 0% 0% round 22px); }
.orel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.orel__caption { position: absolute; left: 3.5%; top: 8%; font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: clamp(1.5rem, 4.2vw, 4rem); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; color: #fffbec; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.orel__shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 236, 200, .5) 50%, transparent 62%); mix-blend-mode: screen; transform: translateX(120%); pointer-events: none; }
.orel__cols { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); width: min(86%, 900px); margin-top: -8%; }
.orel__cols figure { display: grid; gap: .6em; }
.orel__cols img { width: 100%; aspect-ratio: 640 / 605; object-fit: cover; border-radius: 14px; box-shadow: 0 0 0 6px var(--or-bg), 0 30px 50px -28px rgba(80, 40, 20, .5); transition: transform .7s var(--ease); }
.orel__cols li:hover img { transform: scale(1.03) rotate(-1deg); }
.orel__cols figcaption { font-size: .95rem; font-weight: 600; color: var(--or-red); }
.orel__cols sup { font-size: .65em; margin-right: .2em; }
.orel__phone { position: absolute; z-index: 3; right: -4%; top: 12%; width: clamp(100px, 11vw, 160px); transform: rotate(5deg); box-shadow: 0 0 0 6px var(--or-ink), 0 30px 60px -20px rgba(80, 40, 20, .55); }
.chap--orelia .chap__cta { --cta-bg: var(--or-red); --cta-fg: #fffbec; }
@media (prefers-reduced-motion: reduce) { .orel__ticker { animation: none; } }

/* PC : même compacité que les autres chapitres */
@media (min-width: 901px) {
  .chap--selmarin .chap__intro, .chap--naturelle .chap__intro, .chap--orelia .chap__intro { padding-block: clamp(18px, 2.6vh, 28px) clamp(8px, 1.2vh, 14px); gap: 8px; }
  .chap--selmarin .chap__outro, .chap--naturelle .chap__outro, .chap--orelia .chap__outro { padding-block: clamp(20px, 3vh, 32px) clamp(28px, 4vh, 44px); }
  .selm__title, .orel__title { font-size: clamp(3.2rem, 8vw, 8.4rem); }
  .natu__title { font-size: clamp(3.4rem, 8.4vw, 8.8rem); }
  .selm__fan { width: min(100%, 680px); }
  .selm__looks-title { font-size: clamp(1.8rem, 3.2vw, 3rem); }
  /* Naturelle : l'anneau d'ingrédients et les écrans côte à côte */
  .natu__stage { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 72px); width: min(100%, 1180px); margin-inline: auto; }
  .natu__orbit { width: min(32vw, 54vh, 420px); }
  .natu__screens { width: 100%; margin-top: 0; padding-bottom: 40px; }
  .orel__box { width: min(100%, 860px, 150vh); }
  .orel__cols { width: min(70%, 600px); margin-top: -7%; }
}

/* Mobile */
@media (max-width: 900px) {
  .chap--selmarin .chap__intro, .chap--naturelle .chap__intro, .chap--orelia .chap__intro { min-height: 0; padding-block: 24px 16px; gap: 12px; }
  .chap--selmarin .chap__outro, .chap--naturelle .chap__outro, .chap--orelia .chap__outro { padding-block: 28px 44px; }
  .selm__title, .orel__title { font-size: clamp(3rem, 16vw, 6.4rem); }
  .natu__title { font-size: clamp(3.4rem, 18vw, 7rem); }
  /* la scène passe en portrait : c'est le site mobile qui apparaît à la fin */
  .selm__frame { height: min(64svh, 560px); }
  /* mobile : le téléphone se cale juste sous le menu (pas au centre de l'écran) : il suit le titre de près */
  .selm__stage { padding-top: 6px; }
  .sc-motion .selm__sticky { top: 78px; height: auto; place-items: start center; padding-top: 6px; }
  .selm__pc { display: none; }
  .selm__duo::before { box-shadow: 0 calc(min(64svh, 560px) * .12) 0 #2a2b30; }
  .selm__ghost { font-size: 44vw; }
  .sc-motion .selm__stage { height: calc(min(64svh, 560px) + 60svh); padding-top: 6px; }
  .selm__looks { padding-top: 18px; }
  .selm__looks-title { font-size: 1.9rem; margin-bottom: 14px; }
  .selm__fan { width: 136%; margin-inline: -18%; gap: 5px; }
  .selm__fan span { padding: .7em .6em; font-size: .62rem; }
  .natu__ring img { box-shadow: 0 0 0 3px var(--nt-bg), 0 12px 20px -10px rgba(23, 23, 23, .45); }
  .natu__orbit { width: min(74vw, 340px); }
  .natu__badge { right: -6%; top: 4%; font-size: .72rem; }
  /* mobile : une seule capture (la boutique) et le téléphone posé dessus */
  .natu__screens { grid-template-columns: minmax(0, 1fr); margin-top: 20px; padding-bottom: 24px; }
  .natu__plate--hero { display: none; }
  .natu__plate--shop { width: 84%; margin-top: 0; }
  .natu__phone { left: auto; right: 0; bottom: -4%; translate: none; width: 27vw; transform: rotate(5deg); }
  .orel__case { aspect-ratio: 1 / 1; }
  .orel__phone { right: -2%; top: 14%; width: 25vw; box-shadow: 0 0 0 4px var(--or-ink), 0 20px 40px -16px rgba(80, 40, 20, .55); }
  .orel__caption { font-size: clamp(1.8rem, 10vw, 3rem); }
  .orel__cols { width: 100%; margin-top: -14%; gap: 8px; }
  .orel__cols img { border-radius: 10px; box-shadow: 0 0 0 4px var(--or-bg), 0 20px 30px -20px rgba(80, 40, 20, .5); }
  .orel__cols figcaption { font-size: .78rem; }
}