/*
 * Constella — la feuille du site vitrine.
 * Les couleurs sont celles de l'appli (apps/mobile/src/theme/index.ts) ; les titres, en EB Garamond (OFL), la police
 * des cartes ; le texte courant, la police du système, comme dans l'appli.
 * Ce qui bouge ne bouge que par transform et opacity (et des variables CSS lues par transform).
 */

@font-face {
  font-family: 'Constella Garamond';
  src: url('/polices/eb-garamond-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@property --flip { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

:root {
  --espace: #070B1F;
  --profond: #03050F;
  --nebuleuse: #151B3B;
  --violet: #7C5CFF;
  --violet-doux: #A78BFA;
  --aurore: #3DDC97;
  --aurore-douce: #8BF0C6;
  --or: #FFD166;
  --orange: #FF9F66;
  --rose: #FF7AA2;
  --ciel: #5EC8FF;
  --texte: #F4F2FF;
  --texte-2: rgba(244, 242, 255, 0.74);
  --texte-3: rgba(244, 242, 255, 0.6);
  --verre: rgba(255, 255, 255, 0.055);
  --verre-fort: rgba(255, 255, 255, 0.09);
  --surface: linear-gradient(180deg, rgba(26, 31, 70, 0.82), rgba(13, 16, 42, 0.82));
  --surface-reflet: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --bord: rgba(255, 255, 255, 0.12);
  --bord-fort: rgba(255, 255, 255, 0.2);
  --rayon: 22px;
  --serif: 'Constella Garamond', 'EB Garamond', Garamond, 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic UI', Meiryo, sans-serif;
  --gouttiere: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
.ja {
  --serif: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'Noto Serif CJK JP', 'Constella Garamond', serif;
  --sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', 'Yu Gothic', Meiryo, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--profond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ja body { line-break: strict; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--violet-doux); text-underline-offset: 3px; }
a:hover { color: var(--texte); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(124, 92, 255, 0.55); color: #fff; }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement {
  position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px;
  background: var(--or); color: #1b1300; font-weight: 700; text-decoration: none; transition: top 0.2s;
}
.evitement:focus { top: 12px; }

.conteneur { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gouttiere); }
.conteneur--etroit { max-width: 820px; }

/* ── Le ciel : nébuleuses fixes (dégradés, rien à recalculer), et la toile des étoiles ── */
.ciel { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, #03050F 0%, #070B1F 45%, #0B1030 100%); }
.ciel__nebuleuses {
  position: absolute; inset: -10%;
  background:
    radial-gradient(42% 34% at 12% 8%, rgba(124, 92, 255, 0.24), transparent 70%),
    radial-gradient(36% 30% at 92% 22%, rgba(255, 122, 162, 0.12), transparent 70%),
    radial-gradient(50% 36% at 70% 92%, rgba(61, 220, 151, 0.09), transparent 70%),
    radial-gradient(40% 30% at 18% 70%, rgba(94, 200, 255, 0.08), transparent 70%);
}
.ciel__toile { position: absolute; left: 0; top: 0; width: 100%; height: 100lvh; }
.filigrane {
  position: absolute; left: 50%; top: 50%; width: min(64vh, 80vw); aspect-ratio: 2 / 3; margin: calc(min(64vh, 80vw) * -0.75) 0 0 calc(min(64vh, 80vw) * -0.5);
  opacity: 0; transition: opacity 3.4s ease-in-out; filter: blur(1.4px); transform: rotate(-4deg);
}
.filigrane--visible { opacity: 0.06; }
.filigrane__forme {
  position: absolute; inset: 0; border-radius: 5% / 3.4%;
  border: 1px solid rgba(255, 233, 176, 0.9);
  box-shadow: inset 0 0 0 10px rgba(255, 233, 176, 0.05), inset 0 0 0 11px rgba(255, 233, 176, 0.45), 0 0 80px rgba(255, 209, 102, 0.6), inset 0 0 120px rgba(167, 139, 250, 0.5);
  background: radial-gradient(42% 30% at 50% 38%, rgba(255, 246, 220, 0.55), transparent 70%), radial-gradient(70% 18% at 50% 88%, rgba(255, 209, 102, 0.25), transparent 70%);
}
.filigrane__poussiere {
  position: absolute; inset: 4%; border-radius: 4%;
  background:
    radial-gradient(1.6px 1.6px at 18% 22%, #fff, transparent), radial-gradient(1.4px 1.4px at 74% 16%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 50% 38%, #fff, transparent), radial-gradient(1.2px 1.2px at 31% 61%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 66% 70%, #fff, transparent), radial-gradient(1.2px 1.2px at 84% 48%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 12% 84%, #fff, transparent), radial-gradient(1.6px 1.6px at 48% 90%, #fff, transparent);
  animation: souffle-filigrane 14s ease-in-out infinite; animation-play-state: paused;
}
.filigrane--visible .filigrane__poussiere { animation-play-state: running; }
@keyframes souffle-filigrane { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.015); } }

/* ── Typographie ── */
.titre-1, .titre-2, .titre-3, .titre-4 { font-family: var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.ja .titre-1, .ja .titre-2, .ja .titre-3 { letter-spacing: 0.02em; word-break: auto-phrase; }
.titre-1 { font-size: clamp(2.65rem, 7.4vw, 4.4rem); line-height: 1.04; }
@media (min-width: 960px) { .titre-1 { font-size: clamp(2.6rem, 4.7vw, 4.3rem); } }
.ja .titre-1 { font-size: clamp(2.1rem, 6vw, 4.2rem); line-height: 1.2; }
.titre-1 .ligne { display: block; }
.titre-2 { font-size: clamp(2rem, 4.6vw, 3.45rem); line-height: 1.08; }
.ja .titre-2 { font-size: clamp(1.7rem, 3.8vw, 2.8rem); line-height: 1.3; }
.titre-3 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; }
.titre-4 { font-size: 1.45rem; line-height: 1.2; color: var(--texte); }
.degrade {
  background: linear-gradient(92deg, var(--or) 0%, var(--orange) 45%, var(--rose) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.08em;
}
.surtitre {
  display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 1.1rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--or);
}
.ja .surtitre { letter-spacing: 0.12em; }
.surtitre::before { content: '✦'; font-size: 0.95em; letter-spacing: 0; color: var(--or); text-shadow: 0 0 12px rgba(255, 209, 102, 0.8); }
.chapo { font-size: clamp(1.06rem, 1.6vw, 1.2rem); line-height: 1.65; color: var(--texte-2); max-width: 62ch; }
.note { font-size: 0.9rem; color: var(--texte-3); margin: 0.9rem 0 0; }
.note--centre { text-align: center; max-width: 72ch; margin: 2.5rem auto 0; }

main, .pied { overflow-x: clip; }
.section { position: relative; padding-block: clamp(64px, 9vw, 128px); }
.entete-section { margin-bottom: clamp(36px, 5vw, 64px); }
.entete-section .titre-2 { margin-bottom: 1.1rem; }
.entete-section--centre { text-align: center; }
.entete-section--centre .chapo { margin-inline: auto; }

/* ── En-tête ── */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: max(10px, env(safe-area-inset-top)) var(--gouttiere) 10px; transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s; border-bottom: 1px solid transparent; }
.entete--defilee { background: rgba(5, 8, 24, 0.82); border-bottom-color: var(--bord); box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.8); }
@media (hover: hover) and (min-width: 900px) {
  .entete--defilee { background: rgba(5, 8, 24, 0.55); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
}
.entete__bande { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--texte); text-decoration: none; }
.marque__logo { width: 40px; height: 40px; filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.45)); }
.marque__nom { font-family: 'Constella Garamond', Georgia, serif; font-size: 1.55rem; font-weight: 600; letter-spacing: 0.01em; }
.entete__nav { margin-left: auto; display: none; }
.entete__nav ul { display: flex; gap: 4px; }
.entete__nav a { display: block; padding: 8px 12px; border-radius: 999px; color: var(--texte-2); text-decoration: none; font-size: 0.94rem; transition: color 0.2s, background-color 0.2s; }
.entete__nav a:hover { color: var(--texte); background: var(--verre-fort); }
.entete__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.entete__nav + .entete__actions { margin-left: 8px; }
.entete__cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 0.92rem; color: #170f00; background: linear-gradient(135deg, var(--or), var(--orange));
  box-shadow: 0 6px 22px -6px rgba(255, 159, 102, 0.6); white-space: nowrap;
}
.entete__cta:hover { color: #170f00; filter: brightness(1.06); }
@media (min-width: 1080px) { .entete__nav { display: block; } }

/* Le sélecteur de langue : un <details>, utilisable sans script et au clavier. */
.langues { position: relative; }
.langues summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--bord); background: rgba(10, 14, 36, 0.6); color: var(--texte); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em;
}
.langues summary::-webkit-details-marker { display: none; }
.langues summary .icone { width: 18px; height: 18px; }
.langues .langues__chevron { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.2s; }
.langues[open] .langues__chevron { transform: rotate(180deg); }
.langues__liste {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; padding: 8px; border-radius: 16px;
  background: rgba(11, 16, 42, 0.97); border: 1px solid var(--bord-fort); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.9);
}
.langues__liste a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; color: var(--texte-2); }
.langues__liste a:hover { background: var(--verre-fort); color: var(--texte); }
.langues__liste a[aria-current] { color: var(--texte); background: rgba(124, 92, 255, 0.22); }
.langues__liste a[aria-current]::after { content: ' ✦'; color: var(--or); }

.icone { width: 22px; height: 22px; flex: none; }

/* ── Boutons des stores (maison, sobres : aucun logo de marque n'est imité) ── */
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.stores--centre { justify-content: center; }
.store {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 22px 10px 16px;
  border-radius: 16px; text-decoration: none; color: var(--texte); border: 1px solid var(--bord-fort);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); isolation: isolate;
}
.store--actif {
  background: linear-gradient(135deg, #8B6CFF 0%, #6A4BF0 48%, #4E36C9 100%); border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 34px -12px rgba(124, 92, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  overflow: hidden; transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), box-shadow 0.25s;
}
.store--actif::after {
  content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
}
.store--actif:hover { color: var(--texte); transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(124, 92, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.store--actif:hover::after { transform: translateX(120%); transition: transform 0.9s ease; }
.store--bientot { color: var(--texte-3); border-style: dashed; cursor: default; }
.store__icone { width: 26px; height: 26px; }
.store__texte { display: flex; flex-direction: column; line-height: 1.1; }
.store__petit { font-size: 0.74rem; letter-spacing: 0.04em; opacity: 0.86; }
.store__grand { font-size: 1.22rem; font-weight: 700; letter-spacing: 0.005em; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px;
  font-weight: 700; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--violet), #5A3DE0);
  box-shadow: 0 12px 30px -12px rgba(124, 92, 255, 0.9);
}
.bouton:hover { color: #fff; filter: brightness(1.08); }

/* ── Apesanteur : chaque objet flotte à son rythme (transform seulement) ── */
@keyframes flotte {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot-a, -1.5deg)); }
  50% { transform: translate3d(var(--dx, 4px), var(--dy, -14px), 0) rotate(var(--rot-b, 1.5deg)); }
}
.flotte { animation: flotte var(--duree, 9s) ease-in-out infinite; animation-delay: var(--delai, 0s); will-change: transform; }
.flotte--1 { --duree: 9.5s; --delai: -2s; --dy: -16px; --rot-a: -2deg; --rot-b: 1deg; }
.flotte--2 { --duree: 8s; --delai: -5s; --dy: -12px; --dx: -3px; }
.flotte--3 { --duree: 10.5s; --delai: -1s; --dy: -18px; --rot-a: 1.5deg; --rot-b: -1.5deg; }
.flotte--4 { --duree: 11s; --delai: -3s; --dy: -20px; --dx: 6px; --rot-a: -6deg; --rot-b: 4deg; }
.flotte--5 { --duree: 12s; --delai: -7s; --dy: -22px; --dx: -6px; --rot-a: 8deg; --rot-b: -3deg; }
.flotte--6 { --duree: 9s; --delai: -4s; --dy: -15px; --dx: 5px; --rot-a: -8deg; --rot-b: 5deg; }

/* ── Apparitions au défilement (seulement avec les scripts : sans eux, tout est visible) ── */
.js .apparait { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.9s cubic-bezier(.2, .7, .2, 1), transform 0.9s cubic-bezier(.2, .7, .2, 1); }
.js .apparait.vu { opacity: 1; transform: none; }
.etapes .apparait:nth-child(2), .tuiles .apparait:nth-child(3n+2), .points .apparait:nth-child(2), .garanties .apparait:nth-child(3n+2), .chiffres .apparait:nth-child(2), .galerie .apparait:nth-child(2), .tresors__liste .apparait:nth-child(2) { transition-delay: 0.08s; }
.etapes .apparait:nth-child(3), .tuiles .apparait:nth-child(3n), .points .apparait:nth-child(3), .garanties .apparait:nth-child(3n), .chiffres .apparait:nth-child(3), .galerie .apparait:nth-child(3), .tresors__liste .apparait:nth-child(3) { transition-delay: 0.16s; }
.points .apparait:nth-child(4), .galerie .apparait:nth-child(4), .tresors__liste .apparait:nth-child(4) { transition-delay: 0.24s; }
.galerie .apparait:nth-child(5) { transition-delay: 0.32s; }
.galerie .apparait:nth-child(6) { transition-delay: 0.4s; }
.galerie .apparait:nth-child(7) { transition-delay: 0.48s; }

/* ── La carte : 3D, le foil de l'appli (un canevas WebGL, sur la carte active), un reflet léger sur les autres ── */
.carte {
  --rx: 0deg; --ry: 0deg; --px: 0.5; --py: 0.5; --o: 0;
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: default;
  aspect-ratio: 2 / 3; perspective: 1100px; -webkit-tap-highlight-color: transparent;
}
button.carte { cursor: pointer; }
.carte__corps {
  position: absolute; inset: 0; display: block; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip)));
  transition: --flip 0.8s cubic-bezier(.3, 1.3, .4, 1);
}
.carte.retournee { --flip: 180deg; }
/* Le retournement automatique de la galerie : lent, sans rebond. */
.carte.retournee--douce .carte__corps { transition: --flip 1.25s cubic-bezier(.45, .05, .2, 1); }
.carte__face {
  position: absolute; inset: 0; border-radius: 4.2% / 2.8%; overflow: hidden; isolation: isolate;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -22px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
  background: #0b0f2a;
}
.carte__face img { width: 100%; height: 100%; object-fit: cover; }
.carte__verso { transform: rotateY(180deg); }
/* Le foil : le canevas du nuanceur de l'appli, posé exactement sur l'illustration (même boîte, mêmes coins). */
.carte__foil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.32s ease; pointer-events: none; }
.carte__foil--visible { opacity: 1; }
/* Le reflet léger des cartes sans foil : une bande de lumière douce qui suit l'inclinaison (transform seulement). */
.carte__reflet {
  position: absolute; inset: -40% -60%; pointer-events: none; opacity: calc(0.38 + var(--o) * 0.5);
  background: linear-gradient(112deg, transparent 38%, rgba(255, 246, 220, 0.16) 47%, rgba(255, 255, 255, 0.26) 50%, rgba(220, 210, 255, 0.12) 53%, transparent 62%);
  transform: translate3d(calc((var(--px) - 0.5) * 46%), calc((var(--py) - 0.5) * 18%), 0);
}
.carte--foil .carte__reflet { opacity: 0; transition: opacity 0.3s; }

/* La carte légendaire secrète : une silhouette sombre, un « ? », un foil légendaire discret (dégradés seulement). */
.carte--secrete { cursor: default; }
.secrete {
  display: grid; place-items: center;
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(124, 92, 255, 0.28), transparent 70%),
    radial-gradient(80% 60% at 50% 110%, rgba(232, 176, 74, 0.16), transparent 70%),
    linear-gradient(160deg, #0d1030 0%, #05061a 55%, #0a0b24 100%);
  box-shadow: 0 0 0 1px rgba(255, 217, 138, 0.35), 0 30px 60px -22px rgba(0, 0, 0, 0.9), 0 0 46px -12px rgba(232, 176, 74, 0.45);
}
.secrete__cadre { position: absolute; inset: 5.5% 7%; border-radius: 3.2% / 2.2%; border: 1px solid rgba(255, 217, 138, 0.42); box-shadow: inset 0 0 0 4px rgba(10, 12, 36, 0.6), inset 0 0 0 5px rgba(255, 217, 138, 0.18); }
.secrete__voile {
  position: absolute; inset: -50%; opacity: 0.55; mix-blend-mode: screen;
  background: conic-gradient(from 0deg at 50% 50%, rgba(255, 209, 102, 0) 0deg, rgba(255, 209, 102, 0.22) 40deg, rgba(167, 139, 250, 0.2) 95deg, rgba(94, 200, 255, 0.14) 150deg, rgba(255, 122, 162, 0.16) 210deg, rgba(255, 209, 102, 0) 270deg, rgba(255, 209, 102, 0.18) 330deg, rgba(255, 209, 102, 0) 360deg);
  animation: tourne 26s linear infinite;
}
.secrete__signe {
  position: relative; font-family: var(--serif); font-size: clamp(4rem, 9vw, 6.2rem); line-height: 1; color: transparent;
  background: linear-gradient(180deg, #FFF6DC 0%, #FFD98A 45%, #B98A3A 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 18px rgba(255, 209, 102, 0.45));
}
.rarete--secrete { white-space: nowrap; letter-spacing: 0.04em; color: #FFD98A; background: linear-gradient(90deg, rgba(255, 209, 102, 0.14), rgba(167, 139, 250, 0.14)); }

/* ── Héros ── */
.heros { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(96px, 12vh, 140px); padding-bottom: 72px; }
.heros__grille { display: grid; gap: clamp(36px, 6vw, 64px); align-items: center; }
.heros__texte { position: relative; z-index: 2; }
.heros__intro { font-size: clamp(1.08rem, 1.7vw, 1.26rem); color: var(--texte-2); max-width: 54ch; margin-top: 1.6rem; }
.heros__scene { position: relative; z-index: 1; }
.eventail { position: relative; width: min(560px, 100%); margin: 0 auto; aspect-ratio: 1 / 0.98; }
.eventail__lueur {
  position: absolute; inset: 6% 2% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.5), rgba(255, 122, 162, 0.16) 55%, transparent 75%);
  filter: blur(8px);
}
.eventail__carte { position: absolute; width: 44%; top: 8%; left: 28%; }
.eventail__carte--gauche { left: 6%; top: 15%; }
.eventail__carte--gauche .carte { transform: rotate(-12deg); }
.eventail__carte--droite { left: 50%; top: 15%; }
.eventail__carte--droite .carte { transform: rotate(12deg); }
.eventail__carte--centre { width: 47%; left: 26.5%; top: 2%; z-index: 2; }
.objets { position: absolute; inset: 0; pointer-events: none; }
.objet { position: absolute; display: block; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.55)); }
.objet img { width: 100%; }
.objet--coffre { width: 23%; left: -4%; bottom: 2%; z-index: 3; }
.objet--booster { width: 17%; right: -3%; top: -4%; }
.objet--cadeau { width: 16%; right: 0; bottom: 0; z-index: 3; }
.objet--etoile { width: 12%; left: 4%; top: 0; filter: drop-shadow(0 0 18px rgba(255, 209, 102, 0.7)); }
.defiler { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 2px; color: var(--texte-3); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.defiler .icone { width: 18px; height: 18px; animation: descend 2.4s ease-in-out infinite; }
@keyframes descend { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(6px); opacity: 1; } }
@media (min-width: 960px) {
  .heros__grille { grid-template-columns: 1.02fr 0.98fr; }
  .defiler { display: flex; }
}
@media (max-width: 959px) {
  .heros { min-height: 0; }
  .heros__texte { text-align: left; }
  .eventail { width: min(440px, 96%); }
}

/* ── Le principe ── */
.principe { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 960px) { .principe { grid-template-columns: 1.1fr 0.9fr; } }
.etapes { display: grid; gap: 14px; counter-reset: etape; }
.etape {
  display: flex; gap: 18px; padding: 20px 22px; border-radius: var(--rayon);
  background: var(--surface); border: 1px solid var(--bord); box-shadow: var(--surface-reflet);
}
.etape p { margin: 0; color: var(--texte-2); }
.etape__n {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font-family: var(--serif); font-size: 1.35rem; color: #1a1200;
  background: radial-gradient(circle at 35% 30%, #FFF1C4, var(--or) 55%, #E6A93A);
  box-shadow: 0 0 22px rgba(255, 209, 102, 0.45);
}
.etape__titre { font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; margin-bottom: 4px; }

/* L'écran du jeu : le mur sous le ciel de Constella MAX, des bulles habillées par le kit visuel de l'appli */
.principe__maquette { display: flex; justify-content: center; perspective: 1400px; }
.jeu { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(360px, 88vw); }
.telephone { width: 100%; }
.telephone__cadre {
  position: relative; aspect-ratio: 9 / 18.5; border-radius: 48px; padding: 10px;
  background: linear-gradient(145deg, #3a3f6e, #12152f 30%, #0c0f26 55%, #2b2f55 80%, #4a4f80);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 90px -24px rgba(232, 176, 74, 0.35);
}
.telephone__cadre::before { content: ''; position: absolute; top: 20px; left: 50%; width: 30%; height: 22px; margin-left: -15%; border-radius: 999px; background: #03040c; z-index: 3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
@media (min-width: 960px) {
  .telephone__cadre { transform: rotateY(-9deg) rotateX(3deg); }
}
.telephone__ecran { position: relative; height: 100%; border-radius: 39px; overflow: hidden; background: #0a0618; isolation: isolate; }
.telephone__capture, .telephone__ecran > picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.telephone__fond, .telephone__fond picture, .telephone__fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.telephone__haut { position: relative; display: flex; align-items: center; gap: 8px; padding: 52px 16px 8px; }
.telephone__avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.82rem; font-weight: 700; background: linear-gradient(135deg, var(--rose), var(--violet)); box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.75); }
.telephone__titre { font-family: var(--serif); font-size: 1.14rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.telephone__ciel { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; background: rgba(10, 8, 30, 0.45); border: 1px solid rgba(255, 217, 138, 0.35); color: var(--or); }
.telephone__mur { position: absolute; inset: 96px 0 0; }
.bulle {
  --r: 50; --x: 50; --y: 50; --i: 0;
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--r) * 2px); height: calc(var(--r) * 2px); margin: calc(var(--r) * -1px) 0 0 calc(var(--r) * -1px);
  border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0 9%; text-align: center; color: #fff; hyphens: auto; -webkit-hyphens: auto;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
  animation: flotte calc(7s + var(--i) * 0.9s) ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s);
  --dy: -7px; --dx: 3px; --rot-a: -2deg; --rot-b: 2deg;
}
.bulle__habit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; border-radius: 50%; }
/* Un voile très doux sous le texte, comme le verre des bulles de l'appli : le titre reste lisible sur les motifs vifs. */
.bulle::after { content: ''; position: absolute; inset: 16%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(5, 6, 20, 0.42), rgba(5, 6, 20, 0)); }
.bulle__emoji { font-size: calc(var(--r) * 0.4px); line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.bulle__titre { font-size: calc(5px + var(--r) * 0.08px); font-weight: 700; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.45); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bulle__contrepartie { display: inline-flex; align-items: center; gap: 3px; margin-top: 1px; padding: 1px 6px; border-radius: 999px; font-size: calc(5.5px + var(--r) * 0.042px); font-weight: 700; background: rgba(6, 8, 24, 0.62); color: #fff; white-space: nowrap; max-width: 100%; }
.bulle__contrepartie span { overflow: hidden; text-overflow: ellipsis; }
.bulle__contrepartie img { width: 12px; height: 12px; }
.jeu__legende { text-align: center; }
.jeu__ciel { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 0.86rem; color: #FFE7A8; background: rgba(232, 176, 74, 0.1); border: 1px solid rgba(232, 176, 74, 0.35); }
.jeu__ciel::before { content: '✦'; color: var(--or); }
.jeu__themes { width: 100%; }
.jeu__titre-themes { margin: 0 0 10px; text-align: center; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-3); }
.ja .jeu__titre-themes { letter-spacing: 0.06em; }
.themes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.theme { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--texte-2); text-align: center; line-height: 1.2; }
.theme img { width: 100%; max-width: 54px; aspect-ratio: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.3); }
.theme:hover img { transform: translateY(-3px) scale(1.06); }

/* Les contreparties */
.contreparties { margin-top: clamp(80px, 10vw, 140px); }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.tuile {
  --teinte: 167, 139, 250; --tx: 0deg; --ty: 0deg; --gx: 50%; --gy: 0%;
  position: relative; padding: 22px 20px 20px; border-radius: var(--rayon); overflow: hidden; isolation: isolate; outline: none;
  background: var(--surface); border: 1px solid var(--bord); box-shadow: var(--surface-reflet);
  transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), border-color 0.35s, box-shadow 0.45s;
}
.tuile--voucher { --teinte: 255, 122, 162; } .tuile--joker { --teinte: 167, 139, 250; } .tuile--surprise { --teinte: 255, 159, 102; }
.tuile--xp { --teinte: 94, 200, 255; } .tuile--chest { --teinte: 255, 209, 102; } .tuile--booster { --teinte: 124, 92, 255; }
.tuile--swap { --teinte: 61, 220, 151; } .tuile--none { --teinte: 255, 122, 162; } .tuile--money { --teinte: 61, 220, 151; }
.tuile::before { content: ''; position: absolute; inset: auto -30% 60% -30%; height: 120px; background: radial-gradient(closest-side, rgba(var(--teinte), 0.2), transparent); pointer-events: none; z-index: -1; }
/* Le halo dans la couleur de la contrepartie, qui suit le pointeur (opacité et position seulement). */
.tuile__halo { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity 0.4s; background: radial-gradient(260px circle at var(--gx) var(--gy), rgba(var(--teinte), 0.24), transparent 65%); }
.tuile:hover, .tuile:focus-visible, .tuile--touchee {
  transform: perspective(900px) translateY(-6px) rotateX(var(--tx)) rotateY(var(--ty));
  border-color: rgba(var(--teinte), 0.55);
  box-shadow: var(--surface-reflet), 0 22px 44px -22px rgba(var(--teinte), 0.75), 0 0 0 1px rgba(var(--teinte), 0.18);
}
.tuile:hover .tuile__halo, .tuile:focus-visible .tuile__halo, .tuile--touchee .tuile__halo { opacity: 1; }
.tuile:focus-visible { box-shadow: var(--surface-reflet), 0 0 0 2px var(--or), 0 22px 44px -22px rgba(var(--teinte), 0.75); }
.tuile__picto { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--bord); overflow: hidden; transition: border-color 0.35s, background-color 0.35s, box-shadow 0.35s; }
.tuile__picto img, .tuile__picto .emoji { position: relative; transition: transform 0.5s cubic-bezier(.3, 1.6, .5, 1); }
.tuile__picto img { width: 40px; height: 40px; }
.tuile__picto .emoji { font-size: 1.9rem; line-height: 1; }
/* La brillance qui traverse l'icône au survol. */
.tuile__picto::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); transform: translateX(-120%); }
.tuile:hover .tuile__picto, .tuile:focus-visible .tuile__picto, .tuile--touchee .tuile__picto { border-color: rgba(var(--teinte), 0.6); background: rgba(var(--teinte), 0.14); box-shadow: 0 0 22px -4px rgba(var(--teinte), 0.7); }
.tuile:hover .tuile__picto img, .tuile:hover .tuile__picto .emoji, .tuile:focus-visible .tuile__picto img, .tuile:focus-visible .tuile__picto .emoji, .tuile--touchee .tuile__picto img, .tuile--touchee .tuile__picto .emoji { transform: translateY(-3px) scale(1.14) rotate(-6deg); }
.tuile:hover .tuile__picto::after, .tuile:focus-visible .tuile__picto::after, .tuile--touchee .tuile__picto::after { transform: translateX(120%); transition: transform 0.75s ease; }
.tuile__titre { font-family: var(--serif); font-size: 1.32rem; margin-bottom: 4px; }
.tuile p { margin: 0; font-size: 0.96rem; color: var(--texte-2); }
/* La contrepartie annoncée mais pas encore proposée (l'argent, "argent": "bientot") : pastille « Bientôt », bord en tirets
   comme le bouton « Bientôt sur l'App Store ». */
.tuile--bientot { border-style: dashed; }
.tuile__pastille {
  position: absolute; top: 18px; right: 16px; padding: 4px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
  color: var(--or); background: rgba(255, 209, 102, 0.1); border: 1px solid rgba(255, 209, 102, 0.4);
}
.ja .tuile__pastille { letter-spacing: 0.04em; }

/* ── Les cartes ── */
.section--cartes { overflow: hidden; }
.galerie {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(58vw, 250px); gap: 22px;
  padding: 40px var(--gouttiere) 34px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.galerie::-webkit-scrollbar { display: none; }
.galerie__place { scroll-snap-align: center; text-align: center; }
.galerie__place .carte { max-width: 280px; margin: 0 auto; }
@media (min-width: 1100px) {
  .galerie { grid-auto-flow: row; grid-template-columns: repeat(7, 1fr); gap: 20px; max-width: 1440px; margin: 0 auto; overflow: visible; padding-top: 30px; }
  .galerie__place:nth-child(odd) { transform: translateY(28px); }
  .js .galerie__place.apparait:nth-child(odd) { transform: translate3d(0, 56px, 0); }
  .js .galerie__place.apparait.vu:nth-child(odd) { transform: translateY(28px); }
}
.rarete { display: inline-block; margin: 16px 0 0; padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid currentColor; }
.ja .rarete { letter-spacing: 0.04em; }
.rarete--commune { color: #9FD8C4; background: rgba(61, 220, 151, 0.08); }
.rarete--rare { color: #B9D3FF; background: rgba(94, 200, 255, 0.1); }
.rarete--epique { color: #E3C2FF; background: linear-gradient(90deg, rgba(167, 139, 250, 0.18), rgba(255, 209, 102, 0.12)); }
.astuce { display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--texte-3); font-size: 0.9rem; margin: 0 0 clamp(48px, 7vw, 80px); text-align: center; }
.astuce .icone { width: 18px; height: 18px; }
.points { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.point { padding: 22px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--surface); box-shadow: var(--surface-reflet); }
.point__titre { font-family: var(--serif); font-size: 1.36rem; margin-bottom: 6px; }
.point__titre::before { content: '✦ '; color: var(--or); font-size: 0.9em; }
.point p { margin: 0; color: var(--texte-2); font-size: 0.97rem; }

/* ── Le ciel du duo : la voûte de l'appli au fond de la section, la constellation, sa fenêtre ── */
.section--ciel { isolation: isolate; padding-block: clamp(90px, 11vw, 150px); }
.voute { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #050616;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.voute__affiche, .voute__affiche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.2s ease; }
.voute__toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
.section--voute-prete .voute__toile { opacity: 1; }
.section--voute-prete .voute__affiche { opacity: 0; }
.ciel-du-duo { position: relative; display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .ciel-du-duo { grid-template-columns: 0.95fr 1.05fr; } }
.ciel-du-duo__texte .chapo { text-shadow: 0 1px 12px rgba(3, 5, 15, 0.9); }
.ciel-du-duo__scene { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ciel-du-duo__figure { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1.35 / 1; }
@media (max-width: 959px) { .ciel-du-duo__figure { aspect-ratio: 1.15 / 1; max-width: 480px; } }
.constellation { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.constellation__traits line { stroke: #FFE7A8; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.9; filter: drop-shadow(0 0 4px rgba(232, 176, 74, 0.75)); transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1); }
.constellation__traits line.allume { stroke-dashoffset: 0; }
.astre__halo { fill: url(#halo-astre); opacity: 0; transform: scale(0.3); transition: opacity 0.9s, transform 0.9s cubic-bezier(.2, 1.5, .4, 1); transform-box: fill-box; transform-origin: center; }
.astre__coeur { fill: rgba(255, 220, 150, 0.2); stroke: rgba(255, 212, 130, 0.68); stroke-width: 1; transition: fill 0.6s, stroke 0.6s; }
.astre.allume .astre__halo { opacity: 1; transform: scale(1); }
.astre.allume .astre__coeur { fill: #FFF6DC; stroke: #FFD98A; }
.astre__nom { font-family: var(--serif); font-size: 15px; fill: rgba(255, 233, 176, 0.9); letter-spacing: 0.04em; opacity: 0; transition: opacity 0.8s; paint-order: stroke; stroke: rgba(3, 5, 15, 0.6); stroke-width: 3px; }
.astre__nom.allume { opacity: 1; }
.no-js .astre__nom, html:not(.js) .astre__nom { opacity: 1; }
html:not(.js) .constellation__traits line { stroke-dashoffset: 0; }
html:not(.js) .astre .astre__halo { opacity: 1; transform: none; }

/* La fenêtre de la constellation, dans le style de la fiche de l'appli. */
.fenetre {
  position: relative; width: min(100%, 440px); padding: 18px 20px 16px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(24, 20, 58, 0.82), rgba(10, 10, 32, 0.9)); border: 1px solid rgba(255, 217, 138, 0.28);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 50px -26px rgba(232, 176, 74, 0.7);
}
@media (hover: hover) and (min-width: 900px) { .fenetre { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(24, 20, 58, 0.66), rgba(10, 10, 32, 0.78)); } }
.fenetre__haut { display: flex; align-items: center; gap: 12px; }
.fenetre__embleme { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; color: #1b1300; font-size: 1.15rem; background: radial-gradient(circle at 35% 30%, #FFF6DC, #FFD98A 50%, #E8B04A); box-shadow: 0 0 22px rgba(255, 209, 102, 0.5); }
.fenetre__titres { min-width: 0; }
.fenetre__surtitre { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-3); }
.ja .fenetre__surtitre { letter-spacing: 0.06em; }
.fenetre__nom { margin: 0; font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.fenetre__etat { margin-left: auto; flex: none; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; color: var(--violet-doux); background: rgba(124, 92, 255, 0.14); border: 1px solid rgba(167, 139, 250, 0.38); transition: color 0.4s, background-color 0.4s, border-color 0.4s; }
.fenetre__etat--achevee { color: #1b1300; background: linear-gradient(135deg, #FFE7A8, #FFD166); border-color: transparent; }
.fenetre__resume { margin: 10px 0 12px; font-size: 0.9rem; color: var(--texte-2); }
.fenetre__jauge { display: flex; align-items: center; gap: 14px; }
.fenetre__pips { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.fenetre__pips li { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 212, 130, 0.22); transition: background-color 0.5s, box-shadow 0.5s; }
.fenetre__pips li.allume { background: linear-gradient(90deg, #FFE7A8, #FFD166); box-shadow: 0 0 10px rgba(255, 209, 102, 0.65); }
html:not(.js) .fenetre__pips li { background: linear-gradient(90deg, #FFE7A8, #FFD166); }
.fenetre__compte { margin: 0; flex: none; white-space: nowrap; color: var(--texte-2); font-size: 0.85rem; }
.fenetre__n { font-family: var(--serif); font-size: 1.7rem; color: var(--or); }
.fenetre__total { font-family: var(--serif); font-size: 1.1rem; color: var(--texte-2); }
.fenetre__mot { display: block; font-size: 0.72rem; color: var(--texte-3); text-align: right; }
.fenetre__brille { margin: 8px 0 0; min-height: 1.4em; font-size: 0.86rem; color: #FFE7A8; opacity: 0; transform: translateY(4px); transition: opacity 0.5s, transform 0.5s; }
.fenetre__brille--visible { opacity: 1; transform: none; }
.fenetre__coffre { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.9rem; color: var(--texte); }
.fenetre__coffre img { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.fenetre--achevee { border-color: rgba(255, 217, 138, 0.6); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 60px -18px rgba(255, 209, 102, 0.75); }
.chiffres { display: grid; gap: 12px; margin-top: 8px; }
.chiffre { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-radius: var(--rayon); border: 1px solid var(--bord); background: linear-gradient(90deg, rgba(36, 30, 60, 0.72), rgba(12, 14, 38, 0.8)); }
.chiffre__n { flex: none; min-width: 2.2ch; font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--or); text-shadow: 0 0 22px rgba(255, 209, 102, 0.45); }
.chiffre__l { color: var(--texte-2); line-height: 1.4; }
.saison { margin-top: 18px; color: var(--texte-2); font-style: italic; text-shadow: 0 1px 10px rgba(3, 5, 15, 0.9); }
.ja .saison { font-style: normal; }

/* ── Coffres, boosters et roue ── */
.tresors { display: grid; gap: clamp(36px, 6vw, 72px); align-items: center; }
@media (min-width: 960px) { .tresors { grid-template-columns: 1fr 1fr; } }
.tresors__scene { position: relative; display: flex; flex-direction: column; align-items: center; }
.roue { position: relative; width: min(380px, 84vw); aspect-ratio: 1; }
.roue img { position: absolute; inset: 0; width: 100%; height: 100%; }
.roue::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, 0.45), transparent); filter: blur(18px); }
.roue__disque { animation: tourne 46s linear infinite; will-change: transform; }
@keyframes tourne { to { transform: rotate(360deg); } }
.coffres { display: flex; justify-content: center; gap: clamp(6px, 2vw, 18px); margin-top: -6%; flex-wrap: nowrap; width: 100%; }
.coffre { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 24%; max-width: 120px; text-align: center; font-size: 0.74rem; color: var(--texte-3); line-height: 1.25; }
.coffre .flotte { display: block; width: 100%; }
.coffre img { width: 100%; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55)); }
.tresors__liste { display: grid; gap: 14px; }
.tresor { display: flex; gap: 18px; align-items: center; padding: 18px 20px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--surface); box-shadow: var(--surface-reflet); }
.tresor__picto { flex: none; display: grid; place-items: center; width: 72px; height: 72px; }
.tresor__picto img { max-width: 72px; max-height: 72px; width: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)); }
.duo-pictos { display: flex; }
.duo-pictos img { width: 44px; height: 44px; }
.duo-pictos img + img { margin-left: -10px; margin-top: 18px; }
.tresor__titre { font-family: var(--serif); font-size: 1.36rem; margin-bottom: 4px; }
.tresor p { margin: 0; color: var(--texte-2); font-size: 0.97rem; }

/* ── Constella PLUS et MAX ── */
.formules { display: grid; gap: 20px; max-width: 980px; margin: 0 auto; }
@media (min-width: 820px) { .formules { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.formule { position: relative; padding: 32px 28px 30px; border-radius: 28px; overflow: hidden; isolation: isolate; border: 1px solid var(--bord-fort); background: linear-gradient(180deg, rgba(30, 35, 78, 0.86), rgba(13, 16, 42, 0.88)); box-shadow: var(--surface-reflet); }
.formule__nom { font-family: var(--serif); font-size: 2rem; line-height: 1.1; }
.formule__nom span { font-family: var(--sans); font-size: 0.62em; font-weight: 800; letter-spacing: 0.14em; padding: 3px 10px 3px 12px; border-radius: 999px; vertical-align: 0.22em; margin-left: 4px; }
.formule--plus .formule__nom span { color: #170f00; background: linear-gradient(135deg, var(--or), var(--orange)); }
.formule--max .formule__nom span { color: #fff; background: linear-gradient(135deg, var(--violet), var(--rose)); }
.formule__prix { margin: 14px 0 22px; color: var(--texte-2); }
.formule__montant { font-family: var(--serif); font-size: 2.6rem; color: var(--texte); line-height: 1; }
.formule__prix--store { font-size: 1rem; }
.formule__avantages { display: grid; gap: 10px; }
.formule__avantages li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.formule__avantages .icone { width: 20px; height: 20px; margin-top: 2px; color: var(--aurore); }
.formule--max { border-color: rgba(255, 209, 102, 0.45); box-shadow: 0 30px 80px -30px rgba(124, 92, 255, 0.8); background: linear-gradient(180deg, rgba(21, 27, 59, 0.75), rgba(7, 11, 31, 0.9)); }
.formule--max::before {
  content: ''; position: absolute; inset: -60%; z-index: -2;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 209, 102, 0.55) 40deg, transparent 90deg, transparent 180deg, rgba(167, 139, 250, 0.5) 220deg, transparent 270deg);
  animation: tourne 14s linear infinite;
}
.formule--max::after { content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: 27px; background: linear-gradient(180deg, rgba(12, 16, 42, 0.9), rgba(5, 8, 22, 0.94)); }
.formule__fond { position: absolute; inset: 1px; z-index: 0; border-radius: 27px; overflow: hidden; opacity: 0.5; }
.formule > :not(.formule__fond) { position: relative; z-index: 1; }
.formule__fond img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 70%); }
.formule--max .formule__avantages .icone { color: var(--or); }

/* ── Confiance ── */
.garanties { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.garantie { padding: 24px 22px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--surface); box-shadow: var(--surface-reflet); }
.garantie__icone { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; color: var(--aurore-douce); background: rgba(61, 220, 151, 0.1); border: 1px solid rgba(61, 220, 151, 0.28); }
.garantie__titre { font-family: var(--serif); font-size: 1.32rem; margin-bottom: 6px; }
.garantie p { margin: 0; color: var(--texte-2); font-size: 0.97rem; }

/* ── Questions ── */
.questions { display: grid; gap: 10px; }
.question { border-radius: 18px; border: 1px solid var(--bord); background: var(--surface); box-shadow: var(--surface-reflet); transition: border-color 0.25s, background-color 0.25s; }
.question[open] { border-color: rgba(167, 139, 250, 0.45); background: linear-gradient(180deg, rgba(40, 34, 96, 0.86), rgba(16, 18, 48, 0.86)); }
.question summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; font-weight: 650; font-size: 1.04rem; }
.question summary::-webkit-details-marker { display: none; }
.question__chevron { transition: transform 0.25s; color: var(--violet-doux); }
.question[open] .question__chevron { transform: rotate(180deg); }
.question p { margin: 0; padding: 0 20px 20px; color: var(--texte-2); }

/* ── Dernier appel ── */
.final { text-align: center; padding-bottom: clamp(100px, 14vw, 180px); }
.final__contenu { display: flex; flex-direction: column; align-items: center; }
.final__logo { width: 140px; height: 140px; margin-bottom: 22px; filter: drop-shadow(0 0 40px rgba(167, 139, 250, 0.6)); }
.final .titre-2 { margin-bottom: 1rem; }

/* ── Pied de page ── */
.pied { position: relative; border-top: 1px solid var(--bord); background: linear-gradient(180deg, rgba(3, 5, 15, 0.4), rgba(3, 5, 15, 0.92)); padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 0.95rem; }
.pied__grille { display: grid; gap: 36px; }
@media (min-width: 820px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied__marque p { margin-top: 14px; color: var(--texte-3); max-width: 40ch; }
.pied__titre { font-family: var(--sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-3); margin-bottom: 14px; }
.pied ul { display: grid; gap: 8px; }
.pied__liens a, .pied__langues a { color: var(--texte-2); text-decoration: none; overflow-wrap: anywhere; }
.pied__liens a:hover, .pied__langues a:hover { color: var(--texte); text-decoration: underline; }
.pied__langues ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.pied__langues a[aria-current] { color: var(--or); }
.pied__bas { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--texte-3); font-size: 0.82rem; }
.pied__bas p { margin: 0; }

/* ── Pages simples : mentions légales, 404 ── */
.page-mentions { padding: 130px 0 90px; }
.page-mentions .titre-2 { margin-bottom: 1rem; }
.fil { margin-bottom: 26px; }
.fil a { text-decoration: none; color: var(--texte-3); }
.fil a:hover { color: var(--texte); }
.bloc { margin-top: 30px; padding: 26px 26px 22px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--surface); box-shadow: var(--surface-reflet); }
.bloc .titre-4 { margin-bottom: 14px; }
.bloc p { color: var(--texte-2); margin: 0; overflow-wrap: anywhere; }
.fiche { margin: 0; display: grid; gap: 10px; }
.fiche__ligne { display: grid; gap: 2px; }
@media (min-width: 640px) { .fiche__ligne { grid-template-columns: 220px 1fr; gap: 16px; } }
.fiche dt { color: var(--texte-3); font-size: 0.9rem; }
.fiche dd { margin: 0; overflow-wrap: anywhere; }
.liste-liens { display: grid; gap: 8px; }
.page-erreur { min-height: 100svh; display: grid; place-items: center; padding: 60px 0; text-align: center; }
.erreur { display: flex; flex-direction: column; align-items: center; }
.marque--grande { flex-direction: column; gap: 6px; margin-bottom: 18px; }
.marque--grande .marque__logo { width: 96px; height: 96px; }
.marque--grande .marque__nom { font-size: 2rem; }
.erreur__code { font-family: 'Constella Garamond', Georgia, serif; font-size: clamp(4.5rem, 16vw, 8rem); line-height: 1; margin: 0 0 6px; background: linear-gradient(180deg, #fff, rgba(167, 139, 250, 0.4)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.erreur .titre-2 { margin-bottom: 0.8rem; }
.erreur .bouton { margin-top: 8px; }
.erreur__langues { margin-top: 34px; display: grid; gap: 6px; }
.erreur__langues a { color: var(--texte-3); text-decoration: none; font-size: 0.92rem; }
.erreur__langues a:hover { color: var(--texte); }

/* ── Petits écrans ── */
@media (max-width: 520px) {
  body { font-size: 1rem; }
  .entete__cta { display: none; }
  .store { flex: 1 1 200px; justify-content: flex-start; }
  .etape { padding: 18px; gap: 14px; }
  .tuiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tuile { padding: 16px 14px; }
  .tuile__picto { width: 46px; height: 46px; margin-bottom: 10px; border-radius: 13px; }
  .tuile__picto img { width: 32px; height: 32px; }
  .tuile__picto .emoji { font-size: 1.5rem; }
  .tuile__titre { font-size: 1.12rem; }
  .tuile p { font-size: 0.88rem; }
  .tresor { padding: 16px; gap: 14px; }
  .tresor__picto { width: 56px; height: 56px; }
  .tresor__picto img { max-width: 56px; max-height: 56px; }
  .duo-pictos img { width: 36px; height: 36px; }
  .formule { padding: 26px 20px; }
  .bloc { padding: 20px 18px; }
}
@media (max-width: 520px) and (min-width: 361px) {
  /* Une tuile seule sur sa ligne, en deux colonnes : elle prend toute la largeur. */
  .tuiles .tuile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .tuiles { grid-template-columns: 1fr; }
  .themes { grid-template-columns: repeat(3, 1fr); }
  .marque__nom { font-size: 1.35rem; }
}

/* ── Animations réduites : tout se pose, rien ne flotte ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flotte, .bulle, .roue__disque, .formule--max::before, .defiler .icone, .secrete__voile, .filigrane__poussiere { animation: none !important; }
  .tuile, .tuile:hover, .tuile:focus-visible, .tuile--touchee { transform: none; }
  .tuile__picto img, .tuile__picto .emoji, .tuile__picto::after { transition: none !important; transform: none !important; }
  .filigrane, .voute__toile, .voute__affiche, .constellation__traits line, .astre__halo { transition: none; }
  .js .apparait { opacity: 1; transform: none; transition: none; }
  .carte__corps, .carte.retournee--douce .carte__corps { transition: none; }
  .store--actif:hover::after { transition: none; }
}

/* Les tuiles apparues gardent leur inclinaison vers le pointeur (la règle des apparitions remet sinon transform à none). */
.js .tuiles .tuile.apparait.vu { transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); transition: opacity 0.9s cubic-bezier(.2, .7, .2, 1), transform 0.45s cubic-bezier(.2, .8, .2, 1), border-color 0.35s, box-shadow 0.45s; }
.js .tuiles .tuile.apparait.vu:hover, .js .tuiles .tuile.apparait.vu:focus-visible, .js .tuiles .tuile.apparait.vu.tuile--touchee { transform: perspective(900px) translateY(-6px) rotateX(var(--tx)) rotateY(var(--ty)); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .js .tuiles .tuile.apparait.vu, .js .tuiles .tuile.apparait.vu:hover, .js .tuiles .tuile.apparait.vu:focus-visible, .js .tuiles .tuile.apparait.vu.tuile--touchee { transform: none; }
}