/* DestinyCraft — le site.
   Le temple des portails, la nuit : un violet presque noir, l'or du logo pour les actions et les titres, et les quatre
   couleurs des éléments (les gemmes du D) réservées aux îles. Grandes capitales d'un serif de cérémonie pour les titres,
   un sans-serif net pour tout le reste. Le mouvement suit le scroll et la souris, sans jamais cacher le contenu. */
:root {
  /* couleurs */
  --nuit: #0a0613;          /* fond */
  --nuit-2: #100a1f;        /* bandes, pied */
  --nuit-3: #181030;        /* cartes */
  --nuit-4: #22173f;        /* champs, survol */
  --voile: rgba(236, 225, 255, 0.08);
  --voile-fort: rgba(236, 225, 255, 0.16);
  --texte: #f2ecfc;
  --doux: #bcb0d9;
  --tres-doux: #8b7fab;
  --violet: #a77af5;        /* liens, repères */
  --violet-fort: #7742c6;
  --or: #ecc15a;            /* actions, titres */
  --or-clair: #ffe7a3;
  --or-sombre: #b8862a;
  --nature: #45d83a; --eau: #33c3ea; --air: #d3e2ec; --feu: #ff8a2b;
  --succes: #5fe0a2; --danger: #ff7085;
  /* dégradé de Destiny (titres du jeu) et dégradé d'or */
  --destiny: linear-gradient(90deg, #22dd1b, #15b5d6 38%, #96a79f 66%, #d75008);
  --dore: linear-gradient(180deg, #fff1c4 0%, #f2c75f 48%, #c18d2c 100%);
  /* typographie */
  --f-titre: 'Cormorant Garamond', 'Cormorant', 'Georgia', serif;
  --f-texte: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;
  /* espaces, formes, mouvement */
  --large: 1200px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --r: 16px;
  --r-petit: 10px;
  --sortie: cubic-bezier(.2, .75, .2, 1);
  --entete: 72px;
  color-scheme: dark;
}

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@view-transition { navigation: auto; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--entete) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--nuit); color: var(--texte);
  font: 400 16.5px/1.65 var(--f-texte); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* l'atmosphère : lueurs des éléments aux quatre coins, grain léger */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 40vmax at 8% -10%, rgba(119, 66, 198, 0.28), transparent 60%),
    radial-gradient(50vmax 35vmax at 105% 10%, rgba(236, 193, 90, 0.10), transparent 60%),
    radial-gradient(45vmax 30vmax at -5% 100%, rgba(51, 195, 234, 0.07), transparent 60%),
    radial-gradient(45vmax 30vmax at 100% 100%, rgba(255, 138, 43, 0.06), transparent 60%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
img, svg { max-width: 100%; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
a { color: var(--violet); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--or-clair); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(236, 193, 90, .35); color: #fff; }
.pix { image-rendering: pixelated; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.conteneur { width: 100%; max-width: var(--large); margin: 0 auto; padding-inline: var(--gouttiere); }

/* ------------------------------------------------------------------ typographie */
h1, h2, h3 { font-family: var(--f-titre); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; margin: 0; text-wrap: balance; font-variant-numeric: lining-nums; }
/* les chiffres de Cormorant sont « à l'ancienne » (10 se lit IO) : chiffres alignés partout où il y en a */
.chiffres b, .stat b, .pack .quantite, .rang .noeud span, .classement .place, .nombre { font-family: var(--f-texte) !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
h1 { font-size: clamp(48px, 8vw, 104px); }
h2 { font-size: clamp(36px, 5vw, 60px); }
h3 { font-size: clamp(24px, 2.4vw, 30px); }
.dore { background: var(--dore); -webkit-background-clip: text; background-clip: text; color: transparent; }
.destiny { background: var(--destiny); -webkit-background-clip: text; background-clip: text; color: transparent; }
.surtitre { display: inline-flex; align-items: center; gap: 12px; font: 700 12.5px/1 var(--f-texte); letter-spacing: .22em; text-transform: uppercase; color: var(--or); }
.surtitre::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.chapo { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--doux); max-width: 60ch; margin: 0; }
.petit { font-size: 14px; color: var(--doux); }
.mono { font-family: var(--f-mono); }

/* ------------------------------------------------------------------ boutons */
.bouton {
  --fond: rgba(255, 255, 255, 0.04);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid var(--voile-fort); background: var(--fond);
  color: var(--texte); font: 700 15px/1 var(--f-texte); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--sortie), border-color .25s, background .25s, box-shadow .25s; overflow: hidden; isolation: isolate;
}
.bouton:hover { border-color: rgba(236, 193, 90, .6); color: var(--texte); transform: translateY(-1px); }
.bouton:active { transform: translateY(0) scale(.98); }
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton.or { background: linear-gradient(180deg, #ffe9ad, #ecc15a 55%, #c9922f); border-color: transparent; color: #1c1004; box-shadow: 0 10px 30px -10px rgba(236, 193, 90, .55), inset 0 1px 0 rgba(255, 255, 255, .6); }
.bouton.or:hover { color: #1c1004; box-shadow: 0 16px 40px -12px rgba(236, 193, 90, .75), inset 0 1px 0 rgba(255, 255, 255, .6); }
/* l'éclat qui passe sur l'or */
.bouton.or::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%); transform: translateX(-120%); transition: transform .8s var(--sortie); }
.bouton.or:hover::after { transform: translateX(120%); }
.bouton.petit { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--or-clair); text-decoration: none; }
.lien-fleche::after { content: "→"; transition: transform .25s var(--sortie); }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------ en-tête */
.entete { position: sticky; top: 0; z-index: 50; height: var(--entete); padding-top: env(safe-area-inset-top, 0px); }
.entete::before { content: ""; position: absolute; inset: 0; background: rgba(10, 6, 19, .72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--voile); opacity: 0; transition: opacity .3s; }
.entete.defile::before, .entete.ouvert::before { opacity: 1; }
.entete .conteneur { position: relative; height: 100%; display: flex; align-items: center; gap: 28px; }
.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texte); flex: none; }
.marque .embleme { width: 40px; height: 40px; filter: drop-shadow(0 4px 12px rgba(119, 66, 198, .55)); transition: transform .5s var(--sortie); }
.marque:hover .embleme { transform: rotate(-6deg) scale(1.06); }
.marque b { font: 700 25px/1 var(--f-titre); letter-spacing: .01em; }
.navigation { display: flex; gap: 4px; margin-left: 8px; }
.navigation a { position: relative; padding: 10px 14px; border-radius: 10px; color: var(--doux); font-weight: 600; font-size: 15px; text-decoration: none; transition: color .2s; }
.navigation a:hover { color: var(--texte); }
.navigation a[aria-current="page"] { color: var(--texte); }
.navigation a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--dore); }
.entete .actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.compte-puce { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 12px; border: 1px solid var(--voile-fort); background: rgba(255, 255, 255, .04); color: var(--texte); text-decoration: none; font-weight: 700; font-size: 14.5px; }
.compte-puce:hover { border-color: rgba(236, 193, 90, .6); color: var(--texte); }
.bouton-menu { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--voile-fort); background: rgba(255, 255, 255, .04); cursor: pointer; padding: 0; place-items: center; }
.bouton-menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--texte); position: relative; transition: transform .3s var(--sortie), background .2s; }
.bouton-menu span::before, .bouton-menu span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: var(--texte); transition: transform .3s var(--sortie); }
.bouton-menu span::before { transform: translateY(-6px); }
.bouton-menu span::after { transform: translateY(6px); }
.entete.ouvert .bouton-menu span { background: transparent; }
.entete.ouvert .bouton-menu span::before { transform: rotate(45deg); }
.entete.ouvert .bouton-menu span::after { transform: rotate(-45deg); }
.menu-mobile { display: none; }

/* la tête d'un joueur (son skin : le visage et la couche du chapeau, sans flou) */
.tete { --t: 32px; position: relative; display: inline-block; vertical-align: middle; width: var(--t); height: var(--t); border-radius: calc(var(--t) * .22); overflow: hidden; flex: none; background: var(--nuit-4); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.tete i { position: absolute; inset: 0; background-size: 800% 800%; image-rendering: pixelated; }
.tete i:first-child { background-position: 14.2857% 14.2857%; }
.tete i:last-child { background-position: 71.4286% 14.2857%; transform: scale(1.125); }

/* ------------------------------------------------------------------ apparition au défilement */
/* ce qui est déjà à l'écran au chargement reste visible et glisse en place ; seul ce qui est plus bas (classe « attend »,
   posée par le script) attend d'arriver à l'écran pour apparaître */
.mouvement [data-apparait] { transition: opacity .9s var(--sortie), transform .9s var(--sortie); transition-delay: calc(var(--i, 0) * 90ms); }
.mouvement [data-apparait]:not(.attend) { animation: glisse 1s var(--sortie) both; animation-delay: calc(var(--i, 0) * 90ms); }
.mouvement [data-apparait].attend { opacity: 0; transform: translateY(26px); }
@keyframes glisse { from { transform: translateY(16px); } to { transform: none; } }

/* ------------------------------------------------------------------ sections */
.section { padding-block: clamp(72px, 10vw, 140px); position: relative; }
.section-tete { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 760px; }
.section-tete.centre { margin-inline: auto; text-align: center; justify-items: center; }

/* ------------------------------------------------------------------ accueil : le portail */
.accueil-haut { position: relative; min-height: min(92vh, 900px); display: grid; align-items: center; padding-block: 40px 80px; overflow: hidden; }
.accueil-haut canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.accueil-haut .conteneur { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.accueil-texte { display: grid; gap: 26px; justify-items: start; }
.accueil-texte h1 { font-size: clamp(44px, 9.2vw, 128px); line-height: .92; overflow-wrap: anywhere; }
.accueil-texte h1 span { display: block; }
.accueil-texte h1 .sous { font: italic 600 clamp(22px, 2.6vw, 34px)/1.2 var(--f-titre); color: var(--doux); margin-top: 14px; letter-spacing: 0; }
.adresse { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adresse-boite { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 6px 6px 18px; border-radius: 14px; border: 1px solid var(--voile-fort); background: rgba(10, 6, 19, .55); backdrop-filter: blur(8px); }
.adresse-boite code { font: 600 16px var(--f-mono); color: var(--or-clair); letter-spacing: .02em; }
.en-ligne { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--doux); }
.en-ligne b { color: var(--texte); font-variant-numeric: tabular-nums; }
.pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--succes); box-shadow: 0 0 0 0 rgba(95, 224, 162, .6); animation: battement 2.4s infinite; }
.pastille.hors { background: var(--tres-doux); animation: none; }
@keyframes battement { 0% { box-shadow: 0 0 0 0 rgba(95, 224, 162, .55); } 70% { box-shadow: 0 0 0 12px rgba(95, 224, 162, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 224, 162, 0); } }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.portail { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: min(100%, 520px); justify-self: center; perspective: 900px; }
.portail::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(167, 122, 245, .45), rgba(119, 66, 198, .12) 60%, transparent); filter: blur(10px); animation: respire 6s ease-in-out infinite; }
.portail .anneau { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(236, 193, 90, .25); }
.portail .anneau.deux { inset: 0; border-color: rgba(236, 225, 255, .08); border-style: dashed; animation: tourne 90s linear infinite; }
.portail .embleme { position: relative; width: 58%; height: auto; filter: drop-shadow(0 30px 50px rgba(20, 6, 40, .8)) drop-shadow(0 0 30px rgba(167, 122, 245, .35)); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--sortie); animation: flotte 7s ease-in-out infinite; }
.portail .gemme .reflet { animation: scintille 4s ease-in-out infinite; animation-delay: calc(var(--i) * .9s); }
@keyframes respire { 50% { transform: scale(1.06); opacity: .85; } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes flotte { 50% { translate: 0 -12px; } }
@keyframes scintille { 0%, 70%, 100% { opacity: .9; } 80% { opacity: .1; } }
.defiler { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; display: grid; justify-items: center; gap: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--tres-doux); }
.defiler i { width: 1px; height: 38px; background: linear-gradient(var(--or), transparent); animation: descend 2.2s var(--sortie) infinite; transform-origin: top; }
@keyframes descend { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--voile); }
.chiffres > div { padding: 30px 20px; display: grid; gap: 6px; text-align: center; }
.chiffres > div + div { border-left: 1px solid var(--voile); }
.chiffres b { font: 800 clamp(34px, 4vw, 50px)/1 var(--f-texte); }
.chiffres span { font-size: 14px; color: var(--doux); }

/* ------------------------------------------------------------------ les îles */
.iles { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.iles-liste { display: grid; gap: 10px; align-content: start; }
.ile-onglet { --c: var(--or); display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--voile); background: rgba(255, 255, 255, .02); text-align: left; cursor: pointer; transition: border-color .3s, background .3s, transform .3s var(--sortie); }
.ile-onglet:hover { border-color: var(--voile-fort); transform: translateX(4px); }
.ile-onglet[aria-selected="true"] { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); }
.ile-onglet i { width: 12px; height: 12px; border-radius: 3px; rotate: 45deg; background: var(--c); box-shadow: 0 0 14px var(--c); }
.ile-onglet b { display: block; font: 700 26px/1.1 var(--f-titre); }
.ile-onglet small { color: var(--doux); font-size: 13.5px; }
.ile-onglet em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tres-doux); }
.ile-scene { --c: var(--or); position: relative; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--voile)); overflow: hidden; min-height: 520px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: radial-gradient(80% 70% at 75% 55%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), linear-gradient(160deg, var(--nuit-3), var(--nuit-2)); transition: border-color .6s, background .6s; }
.ile-scene .infos { position: relative; z-index: 1; padding: clamp(24px, 4vw, 44px); display: grid; gap: 18px; align-content: center; }
.ile-scene .element { font: 700 12.5px/1 var(--f-texte); letter-spacing: .22em; text-transform: uppercase; color: var(--c); }
.ile-scene h3 { font-size: clamp(40px, 5vw, 64px); }
.ile-scene .faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0 0; }
.ile-scene .faits div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--voile); background: rgba(10, 6, 19, .4); }
.ile-scene dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tres-doux); }
.ile-scene dd { margin: 4px 0 0; font-weight: 700; }
.ile-scene .visuel { position: relative; display: grid; place-items: center; padding: 24px; }
.ile-scene .visuel::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 12%; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); }
.ile-scene .visuel img { position: relative; z-index: 1; width: min(100%, 440px); height: auto; max-height: 420px; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); animation: flotte 6s ease-in-out infinite; }
.ile-scene .bientot { position: relative; z-index: 1; width: 62%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; border: 1px dashed color-mix(in srgb, var(--c) 50%, transparent); color: var(--doux); font: italic 600 22px/1.3 var(--f-titre); background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 18%, transparent), transparent); }
.ile-scene.change .infos > *, .ile-scene.change .visuel > * { animation: fondu .7s var(--sortie) both; }
.ile-scene.change .infos > :nth-child(2) { animation-delay: .05s; } .ile-scene.change .infos > :nth-child(3) { animation-delay: .1s; } .ile-scene.change .infos > :nth-child(4) { animation-delay: .15s; } .ile-scene.change .infos > :nth-child(5) { animation-delay: .2s; }
@keyframes fondu { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ la voie des rangs */
.voie { position: relative; }
.voie-trait { position: absolute; left: 0; right: 0; top: 33px; height: 2px; background: var(--voile); }
.voie-trait i { position: absolute; inset: 0; background: linear-gradient(90deg, #707070, #3a9a54, #2a9aee, #aa2ecc, #ff88cc, #ffd700); transform-origin: left; transform: scaleX(var(--p, 1)); transition: transform 1.6s var(--sortie); }
.mouvement .voie.attend .voie-trait i { --p: 0; }
.voie ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; }
.rang { display: grid; justify-items: center; gap: 12px; text-align: center; }
.rang .noeud { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; rotate: 45deg; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c) 45%, var(--nuit-3)), var(--nuit-3)); box-shadow: 0 10px 30px -12px var(--c); transition: transform .4s var(--sortie); }
.rang .noeud span { rotate: -45deg; font: 800 19px var(--f-texte); }
.rang:hover .noeud { transform: scale(1.08); }
.rang b { font: 700 19px/1.1 var(--f-titre); }
.rang small { font-size: 12.5px; color: var(--tres-doux); line-height: 1.4; }
.mouvement .voie .rang { transition: opacity .7s var(--sortie), transform .7s var(--sortie); transition-delay: calc(var(--i) * 110ms + .2s); }
.mouvement .voie.attend .rang { opacity: 0; transform: translateY(18px); }

/* ------------------------------------------------------------------ cartes */
.grille { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.carte { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); border: 1px solid var(--voile); transition: transform .4s var(--sortie), border-color .4s; isolation: isolate; min-width: 0; }
.carte::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--angle), transparent 0 70%, rgba(236, 193, 90, .9) 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; z-index: -1; }
.carte:hover { transform: translateY(-4px); border-color: var(--voile-fort); }
.carte:hover::before { opacity: 1; animation: contour 3s linear infinite; }
@keyframes contour { to { --angle: 360deg; } }
.carte .icone { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(160deg, rgba(236, 193, 90, .18), rgba(236, 193, 90, .04)); border: 1px solid rgba(236, 193, 90, .3); color: var(--or-clair); }
.carte .icone svg { width: 24px; height: 24px; }
.carte h3 { font-size: 27px; }
.carte p { margin: 0; color: var(--doux); }
.carte .chiffre { font: 700 13px/1 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--or); }

/* ------------------------------------------------------------------ l'histoire */
.histoire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 80px); align-items: center; }
.histoire blockquote { margin: 0; font: italic 500 clamp(24px, 2.6vw, 34px)/1.4 var(--f-titre); color: var(--texte); }
.histoire blockquote::first-letter { float: left; font: 700 4.2em/0.8 var(--f-titre); padding: 6px 12px 0 0; color: var(--or); font-style: normal; }
.histoire .texte { display: grid; gap: 22px; }

/* ------------------------------------------------------------------ nouveautés */
.nouveautes { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nouveaute { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--r); border: 1px solid var(--voile); background: rgba(255, 255, 255, .02); }
.nouveaute .version { font: 600 13px var(--f-mono); color: var(--or); }
.nouveaute h3 { font-size: 26px; }
.nouveaute p { margin: 0; color: var(--doux); font-size: 15px; }

/* ------------------------------------------------------------------ appels */
.appels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.appel { position: relative; overflow: hidden; display: grid; gap: 14px; align-content: start; padding: 32px; border-radius: 22px; border: 1px solid var(--voile); background: linear-gradient(160deg, var(--nuit-3), var(--nuit-2)); text-decoration: none; color: var(--texte); transition: transform .4s var(--sortie), border-color .4s; }
.appel::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, var(--c, rgba(236, 193, 90, .35)), transparent); opacity: .5; transition: transform .6s var(--sortie), opacity .6s; }
.appel:hover { transform: translateY(-4px); border-color: var(--voile-fort); color: var(--texte); }
.appel:hover::after { transform: scale(1.4); opacity: .85; }
.appel h3 { font-size: 32px; }
.appel p { margin: 0; color: var(--doux); }

/* ------------------------------------------------------------------ pages intérieures */
.page-haut { padding-block: clamp(56px, 8vw, 110px) clamp(30px, 4vw, 50px); position: relative; }
.page-haut .conteneur { display: grid; gap: 20px; }
.page-haut h1 { font-size: clamp(46px, 7vw, 88px); }
.fil { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--tres-doux); }
.fil a { color: var(--doux); text-decoration: none; }
.fil a:hover { color: var(--or-clair); }

/* documents : règlement et pages légales */
.document { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: start; padding-bottom: 100px; }
.sommaire-doc { position: sticky; top: calc(var(--entete) + 20px); display: grid; gap: 4px; font-size: 14px; max-height: calc(100vh - var(--entete) - 40px); overflow-y: auto; padding-right: 6px; }
.sommaire-doc b { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--or); margin-bottom: 8px; }
.sommaire-doc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--doux); text-decoration: none; border-left: 2px solid transparent; line-height: 1.35; }
.sommaire-doc a:hover { color: var(--texte); background: rgba(255, 255, 255, .03); }
.sommaire-doc a.actif { color: var(--or-clair); border-left-color: var(--or); background: rgba(236, 193, 90, .06); }
.prose { max-width: 74ch; min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(30px, 3.4vw, 40px); margin: 56px 0 16px; padding-top: 8px; }
.prose h3 { font-size: 24px; margin: 32px 0 10px; }
.prose p { margin: 0 0 16px; color: #ddd4f0; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; color: #ddd4f0; }
.prose li { margin: 6px 0; padding-left: 4px; }
.prose li::marker { color: var(--or); }
.prose strong { color: var(--texte); }
.prose a { color: var(--or-clair); }
.prose .intro { font-size: 19px; color: var(--doux); }
.prose .maj { font-size: 13.5px; color: var(--tres-doux); border-top: 1px solid var(--voile); padding-top: 14px; margin-top: 4px; }
mark.a-completer { background: rgba(255, 112, 133, .14); color: #ffb4c0; border: 1px dashed rgba(255, 112, 133, .5); border-radius: 6px; padding: 0 6px; font-weight: 600; }
.bandeau { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(236, 193, 90, .35); background: rgba(236, 193, 90, .07); color: var(--or-clair); font-size: 14.5px; margin-bottom: 30px; }
.bandeau svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }

/* ------------------------------------------------------------------ boutique */
.packs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.pack { position: relative; display: grid; gap: 14px; justify-items: center; text-align: center; padding: 30px 20px 22px; border-radius: 20px; border: 1px solid var(--voile); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); transition: transform .4s var(--sortie), border-color .4s; }
.pack:hover { transform: translateY(-6px); border-color: rgba(236, 193, 90, .5); }
.pack.vedette { border-color: rgba(236, 193, 90, .55); background: radial-gradient(90% 60% at 50% 0%, rgba(236, 193, 90, .14), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)); }
.pack .etiquette { position: absolute; top: -12px; padding: 5px 12px; border-radius: 999px; background: var(--dore); color: #1c1004; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.joyau { width: 74px; height: 74px; filter: drop-shadow(0 12px 22px rgba(51, 195, 234, .35)); transition: transform .6s var(--sortie); }
.pack:hover .joyau { transform: rotate(-8deg) scale(1.08); }
.pack .quantite { font: 800 34px/1 var(--f-texte); }
.pack .quantite small { display: block; font: 600 13px var(--f-texte); color: var(--doux); margin-top: 6px; letter-spacing: .04em; }
.pack .bonus { font-size: 13px; font-weight: 800; color: var(--succes); min-height: 18px; }
.pack .prix { font: 700 22px var(--f-texte); font-variant-numeric: tabular-nums; }
.onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.onglets button { min-height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--voile); background: rgba(255, 255, 255, .02); color: var(--doux); font-weight: 700; cursor: pointer; transition: all .25s; }
.onglets button:hover { color: var(--texte); border-color: var(--voile-fort); }
.onglets button[aria-selected="true"] { color: #1c1004; background: var(--dore); border-color: transparent; }
.panneau[hidden] { display: none; }
.panneau.change { animation: fondu .6s var(--sortie) both; }
.tableau-defile { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--voile); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--voile); vertical-align: top; }
thead th { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tres-doux); background: rgba(255, 255, 255, .02); }
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td b { color: var(--texte); }
.grades { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade { --c: var(--or); position: relative; display: grid; gap: 16px; align-content: start; padding: 30px 26px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--voile)); background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), var(--nuit-2); overflow: hidden; }
.grade h3 { font-size: 40px; }
.grade .cout { font-weight: 800; color: var(--or-clair); }
.grade ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.grade li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--doux); font-size: 15px; }
.grade li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; rotate: 45deg; background: var(--c); border-radius: 2px; }
.questions { display: grid; gap: 10px; max-width: 860px; }
.questions details { border-radius: 14px; border: 1px solid var(--voile); background: rgba(255, 255, 255, .02); }
.questions summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; display: flex; justify-content: space-between; gap: 16px; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; font: 400 24px/1 var(--f-texte); color: var(--or); transition: transform .3s var(--sortie); }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details p { margin: 0; padding: 0 22px 20px; color: var(--doux); }

/* ------------------------------------------------------------------ vote */
.sites-vote { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.site-vote { display: grid; gap: 14px; padding: 24px; border-radius: 18px; border: 1px solid var(--voile); background: rgba(255, 255, 255, .025); }
.site-vote .haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.site-vote b { font: 700 22px/1.2 var(--f-titre); }
.etat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(95, 224, 162, .12); color: var(--succes); white-space: nowrap; }
.etat.attente { background: rgba(236, 225, 255, .08); color: var(--doux); }
.etat.bientot { background: rgba(236, 193, 90, .1); color: var(--or-clair); }
.recompenses-vote { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.recompense { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 16px; border: 1px solid var(--voile); background: rgba(255, 255, 255, .02); }
.recompense .icone { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(236, 193, 90, .1); color: var(--or-clair); }
.recompense .icone svg { width: 22px; height: 22px; }
.fete { padding: 30px; border-radius: 22px; border: 1px solid rgba(236, 193, 90, .35); background: radial-gradient(80% 120% at 0% 0%, rgba(236, 193, 90, .14), transparent 60%), var(--nuit-2); display: grid; gap: 16px; }
.jauge { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.jauge i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--destiny); transition: width 1.6s var(--sortie); }
.classement { display: grid; gap: 8px; }
.classement li { display: grid; grid-template-columns: 34px 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--voile); background: rgba(255, 255, 255, .02); }
.classement .place { font: 800 18px var(--f-texte); text-align: center; color: var(--tres-doux); }
.classement li:nth-child(1) .place { color: #ffd700; } .classement li:nth-child(2) .place { color: #d6dde6; } .classement li:nth-child(3) .place { color: #e0995a; }
.classement .votes { font-weight: 800; font-variant-numeric: tabular-nums; }
.colonnes-vote { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
.vide { padding: 34px; border-radius: 18px; border: 1px dashed var(--voile-fort); text-align: center; color: var(--doux); }
.exemple { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 112, 133, .14); color: #ffb4c0; vertical-align: middle; }

/* ------------------------------------------------------------------ formulaires et compte */
.carte-formulaire { width: min(100%, 470px); margin: 0 auto; padding: clamp(26px, 4vw, 40px); border-radius: 24px; border: 1px solid var(--voile-fort); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); display: grid; gap: 22px; }
.carte-formulaire h1 { font-size: clamp(38px, 5vw, 50px); }
.champ { display: grid; gap: 8px; }
.champ label { font-size: 13.5px; font-weight: 700; color: var(--doux); }
.champ input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 13px; border: 1px solid var(--voile-fort); background: rgba(10, 6, 19, .6); font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.champ input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 4px rgba(236, 193, 90, .15); }
.champ small { color: var(--tres-doux); font-size: 13px; }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--doux); }
.case input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--or); }
.message { padding: 12px 16px; border-radius: 12px; font-size: 14.5px; }
.message.erreur { background: rgba(255, 112, 133, .1); border: 1px solid rgba(255, 112, 133, .35); color: #ffc2cb; }
.message.info { background: rgba(167, 122, 245, .1); border: 1px solid rgba(167, 122, 245, .3); color: #e2d2ff; }
.code-jeu { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 24px; border-radius: 18px; border: 1px dashed rgba(236, 193, 90, .5); background: rgba(236, 193, 90, .05); }
.code-jeu code { font: 700 clamp(26px, 4vw, 34px) var(--f-mono); letter-spacing: .12em; color: var(--or-clair); }
.etapes { display: flex; gap: 8px; }
.etapes span { flex: 1; height: 4px; border-radius: 4px; background: var(--voile-fort); }
.etapes span.fait { background: var(--dore); }
.attente { display: inline-flex; align-items: center; gap: 10px; color: var(--doux); font-size: 14.5px; }
.attente::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--voile-fort); border-top-color: var(--or); animation: tourne 1s linear infinite; }
.profil { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: 26px; border: 1px solid var(--voile-fort); background: radial-gradient(70% 120% at 0% 0%, rgba(119, 66, 198, .3), transparent 70%), var(--nuit-2); }
.profil .tete { --t: clamp(96px, 14vw, 140px); border-radius: 26px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 50px -20px rgba(119, 66, 198, .9); }
.profil h1 { font-size: clamp(44px, 6vw, 72px); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--voile-fort); font-size: 13.5px; font-weight: 800; }
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.stat { padding: 22px; border-radius: 18px; border: 1px solid var(--voile); background: rgba(255, 255, 255, .02); display: grid; gap: 6px; }
.stat span { font-size: 13px; color: var(--tres-doux); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.stat b { font: 800 30px/1 var(--f-texte); }
.dialogue { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(5, 2, 12, .7); backdrop-filter: blur(6px); animation: fondu .3s var(--sortie); }
.dialogue[hidden] { display: none; }
[data-achat-corps] { display: grid; gap: 18px; }
.badges .exemple { margin-left: 0; align-self: center; }
.dialogue .carte-formulaire { animation: fondu .5s var(--sortie); }

/* ------------------------------------------------------------------ pied */
.pied { border-top: 1px solid var(--voile); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35)); padding-block: 70px 40px; margin-top: 40px; }
.pied-haut { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.pied .marque .embleme { width: 46px; height: 46px; }
.pied p { color: var(--doux); font-size: 14.5px; max-width: 34ch; }
.pied h4 { margin: 0 0 14px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--or); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied ul a { color: var(--doux); text-decoration: none; font-size: 14.5px; }
.pied ul a:hover { color: var(--texte); }
.pied-bas { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--voile); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 12.5px; color: var(--tres-doux); }
.notification { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; padding: 12px 18px; border-radius: 12px; background: var(--nuit-4); border: 1px solid rgba(236, 193, 90, .45); color: var(--texte); font-weight: 700; font-size: 14.5px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); animation: fondu .4s var(--sortie); }

/* ------------------------------------------------------------------ téléphones et tablettes */
@media (max-width: 1080px) {
  .navigation, .entete .actions .bouton:not(.bouton-menu), .entete .actions .compte-puce { display: none; }
  .bouton-menu { display: grid; }
  .menu-mobile { display: grid; position: fixed; inset: calc(var(--entete) + env(safe-area-inset-top, 0px)) 0 0; z-index: 49; padding: 28px var(--gouttiere) 40px; align-content: start; gap: 6px; background: rgba(10, 6, 19, .96); backdrop-filter: blur(16px); visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; overflow-y: auto; }
  .entete.ouvert + .menu-mobile { visibility: visible; opacity: 1; }
  .menu-mobile a.lien { font: 700 40px/1.2 var(--f-titre); color: var(--texte); text-decoration: none; padding: 6px 0; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--sortie), transform .5s var(--sortie); transition-delay: calc(var(--i) * 60ms); }
  .entete.ouvert + .menu-mobile a.lien { opacity: 1; transform: none; }
  .menu-mobile .bas { margin-top: 26px; display: grid; gap: 12px; }
  .accueil-haut .conteneur { grid-template-columns: minmax(0, 1fr); }
  .portail { width: min(80%, 420px); order: -1; }
  .iles { grid-template-columns: minmax(0, 1fr); }
  .iles-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voie ol { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 34px; }
  .voie-trait { display: none; }
  .histoire, .document { grid-template-columns: minmax(0, 1fr); }
  .sommaire-doc { display: none; }
  .nouveautes, .appels, .grades, .colonnes-vote { grid-template-columns: minmax(0, 1fr); }
  .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  :root { --entete: 64px; }
  .marque b { font-size: 22px; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres > div:nth-child(3) { border-left: 0; }
  .chiffres > div:nth-child(n+3) { border-top: 1px solid var(--voile); }
  .ile-scene { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ile-scene .visuel { order: -1; padding: 30px 20px 0; }
  .ile-scene .visuel img { max-height: 260px; }
  .ile-scene .faits { grid-template-columns: minmax(0, 1fr); }
  .iles-liste { grid-template-columns: minmax(0, 1fr); }
  .voie ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profil { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .pied-haut { grid-template-columns: minmax(0, 1fr); }
  .adresse-boite { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .mouvement [data-apparait], .mouvement .voie .rang { opacity: 1; transform: none; }
  .mouvement .voie .voie-trait i { --p: 1; }
}