/* ============================================================
   OVERBORN — SITE v02 · STYLES
   Mobile d'abord. La mécanique vitrine (une silhouette par écran,
   vide généreux, flou→net) dans la DA OVERBORN : noir chaud
   profond, la couleur de la région comme LUMIÈRE saturée dans le
   noir, mono italique brut, tags tranchants, tampon incliné, grain.
   Jamais de noir et blanc pur — la teinte est partout.
   Zéro font externe (2 s en 4G) : pile mono système.
   ============================================================ */

:root {
  --teinte: #b02a35;            /* la lumière de la région (posée par app.js) */
  --noir: #100a09;              /* noir chaud teinté bordeaux, jamais un noir pur */
  --encre: #F0EDE8;             /* ivoire de la marque */
  --bordeaux: #5A0B12;          /* bordeaux de la marque */
  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", monospace;
  --profane: #1B3A6B;           /* le bleu d'anomalie du signal — la trace de PROFANE */
  --profane-clair: #6aa8ff;     /* sa lueur : assez claire pour se lire sur le noir */
}

/* ============================================================
   MODE CLAIR ADAPTATIF — « papier d'archive »
   Le dossier passe du noir-écran au parchemin chaud. La teinte
   région est assouplie côté JS (couleurClair, data.js). Les scènes
   WebGL (descente, scans de points) gardent leur nuit — non touchées.
   ============================================================ */
@media (prefers-color-scheme: light) {
  :root {
    --noir: #e9e1d0;            /* parchemin chaud — le « papier » */
    --encre: #211a12;           /* encre brun-noir chaude */
    /* --teinte : posée par app.js en variante claire (couleurClair) */
  }
  /* la salle éclairée devient une planche de dossier : halos très discrets */
  body {
    background:
      radial-gradient(110vw 70vh at 50% 108%, color-mix(in srgb, var(--teinte) 13%, transparent), transparent 72%),
      radial-gradient(90vw 55vh at 88% -12%, color-mix(in srgb, var(--teinte) 7%, transparent), transparent 70%),
      var(--noir);
  }
  /* halos derrière les silhouettes : à peine une ombre teintée */
  .carte::before, .plan::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--teinte) 12%, transparent), transparent 66%);
  }
  /* ombres portées des visuels : plus douces sur papier */
  .carte img, .plan img {
    filter: drop-shadow(0 0 26px color-mix(in srgb, var(--teinte) 22%, transparent))
            drop-shadow(0 18px 30px rgba(40, 30, 20, .22));
  }
}

/* ============================================================
   ARCHIVE PROFANÉE — PROFANE a effacé ce fragment.
   La silhouette reste, fracturée, sous une lueur bleue liquid
   glass. On ne l'annonce pas : on le voit, ou on ne le voit pas.
   (déclenché par `profane: true` sur une archive dans data.js)
   ============================================================ */
.carte-profanee { position: relative; isolation: isolate; }
.carte-profanee::before {                 /* halo liquid glass, respire lentement */
  content: ""; position: absolute; inset: 6% 10%; z-index: -1; border-radius: 28px;
  background: radial-gradient(ellipse at 50% 45%,
    color-mix(in srgb, var(--profane-clair) 55%, transparent),
    color-mix(in srgb, var(--profane) 45%, transparent) 45%, transparent 74%);
  filter: blur(30px);
  animation: profane-souffle 7s ease-in-out infinite alternate;
}
@keyframes profane-souffle { from { opacity: .5 } to { opacity: 1 } }

/* la silhouette : le PNG sert de masque sur un dégradé bleu, puis on la
   fracture en bandes qui se dissolvent vers le bas */
.carte-profanee .silhouette {
  width: 100%; max-width: 660px; aspect-ratio: 660 / 880;
  background: linear-gradient(180deg,
    var(--profane-clair) 0%,
    color-mix(in srgb, var(--profane-clair) 70%, var(--profane)) 42%,
    color-mix(in srgb, var(--profane) 70%, transparent) 100%);
  -webkit-mask-image: var(--src), repeating-linear-gradient(to bottom, #000 0 7px, transparent 7px 11px);
          mask-image: var(--src), repeating-linear-gradient(to bottom, #000 0 7px, transparent 7px 11px);
  -webkit-mask-size: contain, auto;      mask-size: contain, auto;
  -webkit-mask-repeat: no-repeat, repeat; mask-repeat: no-repeat, repeat;
  -webkit-mask-position: center, center;  mask-position: center, center;
  -webkit-mask-composite: source-in;      mask-composite: intersect;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--profane-clair) 70%, transparent))
          drop-shadow(0 0 46px color-mix(in srgb, var(--profane-clair) 35%, transparent));
  opacity: .92;
}
.profane-tag, .profane-signe {
  color: color-mix(in srgb, var(--profane) 65%, var(--encre)) !important;
  border-color: color-mix(in srgb, var(--profane) 55%, transparent) !important;
}
@media (prefers-reduced-motion: reduce) { .carte-profanee::before { animation: none } }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { min-height: 100%; }

body {
  /* la salle sombre, éclairée par la couleur du territoire */
  background:
    radial-gradient(110vw 70vh at 50% 108%, color-mix(in srgb, var(--teinte) 34%, transparent), transparent 72%),
    radial-gradient(90vw 55vh at 88% -12%, color-mix(in srgb, var(--teinte) 16%, transparent), transparent 70%),
    var(--noir);
  background-attachment: fixed;
  color: var(--encre);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

/* grain — inline, aucun asset */
body::after {
  content: "";
  position: fixed; inset: -60%;
  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 baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: soft-light;
}

#app { max-width: 640px; margin: 0 auto; padding: 0 20px; }

/* ============ TAGS (chrome minimal, angles nets) ============ */
.tag {
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--encre) 35%, transparent);
  padding: 10px 16px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--encre);
  background: color-mix(in srgb, var(--noir) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tag.logo { position: fixed; top: 14px; left: 14px; z-index: 50; font-style: italic; }

/* ============ MARQUE (SVG currentColor via mask, teintable) ============ */
.marque {
  position: fixed; top: 14px; left: 16px; z-index: 50;
  width: 52px; height: 72px;           /* ratio de l'emblème (1142x1590) */
  background: var(--encre);
  -webkit-mask: url("assets/marque/OVB_2026-07-18_logo-master-currentcolor_v01.svg") center / contain no-repeat;
  mask: url("assets/marque/OVB_2026-07-18_logo-master-currentcolor_v01.svg") center / contain no-repeat;
}

.hero-embleme {
  width: 84px; height: 117px;
  background: var(--teinte);
  -webkit-mask: var(--embleme) center / contain no-repeat;
  mask: var(--embleme) center / contain no-repeat;
  margin-bottom: 26px;
}

/* en-tête propre sous le nom de région : filet — RÉGION — filet */
.sous-entete {
  display: flex; align-items: center; gap: 16px;
  margin-top: 26px; width: min(320px, 70vw);
}
.sous-entete .filet { height: 1px; flex: 1; background: color-mix(in srgb, var(--encre) 30%, transparent); }
.sous-entete-mot {
  font-size: 10px; letter-spacing: 0.55em; text-transform: uppercase;
  color: color-mix(in srgb, var(--encre) 62%, transparent);
  padding-left: 0.55em;   /* compense le tracking du dernier caractère */
}
.tag.region-tag {
  position: fixed; top: 14px; right: 14px; z-index: 50;
  font-size: 10px; letter-spacing: 0.25em; padding: 11px 12px;
  color: var(--teinte); border-color: color-mix(in srgb, var(--teinte) 55%, transparent);
}
.tag.mini { font-size: 10px; padding: 8px 12px; letter-spacing: 0.28em; }
.tag.accent { color: var(--teinte); border-color: color-mix(in srgb, var(--teinte) 55%, transparent); }
.tag.rebours {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
  text-shadow: 0 0 14px color-mix(in srgb, var(--teinte) 60%, transparent);
}

/* le tampon — l'énergie sticker, à peine incliné, plus propre */
.tampon {
  display: inline-block;
  transform: rotate(-2deg);
  background: var(--teinte); color: var(--noir);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 1px;
}
.tag.tenue { color: color-mix(in srgb, var(--encre) 66%, transparent); border-color: color-mix(in srgb, var(--encre) 18%, transparent); letter-spacing: 0.2em; }

/* ============ QUIZ ============ */
.quiz { min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
.quiz-corps {
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 26px; padding: 90px 0 60px;
}

.compteur {
  font-size: 12px; letter-spacing: 0.5em;
  color: var(--teinte);
  font-variant-numeric: tabular-nums;
}

.progression { display: flex; gap: 6px; width: min(240px, 64vw); }
.progression span { height: 2px; flex: 1; background: color-mix(in srgb, var(--encre) 14%, transparent); }
.progression span.fait { background: var(--teinte); box-shadow: 0 0 10px color-mix(in srgb, var(--teinte) 70%, transparent); }

.question {
  font-size: clamp(20px, 5.8vw, 30px);
  font-style: italic; font-weight: 700; text-transform: uppercase;
  line-height: 1.25; letter-spacing: 0.03em;
  max-width: 24ch; margin: 6px 0;
}

.options { width: 100%; display: flex; flex-direction: column; margin-top: 8px; }
.opt {
  font: inherit; font-weight: 700;
  color: color-mix(in srgb, var(--encre) 72%, transparent);
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
  border-left: 3px solid transparent;
  padding: 24px 10px;
  font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.opt:first-child { border-top: 1px solid color-mix(in srgb, var(--encre) 14%, transparent); }
.opt:active, .opt.choisi {
  color: var(--teinte);
  border-left-color: var(--teinte);
  background: color-mix(in srgb, var(--teinte) 8%, transparent);
}

.refuser {
  font: inherit; margin-top: 10px; padding: 12px 16px;
  background: transparent; border: none; cursor: pointer;
  color: color-mix(in srgb, var(--encre) 38%, transparent);
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px;
}
.refuser:active { color: var(--teinte); }

/* ============ VITRINE ============ */
.vitrine { padding: 110px 0 90px; }

.hero { min-height: 34vh; display: grid; place-items: center; }
.territoire {
  font-size: clamp(58px, 19vw, 116px);
  font-style: italic; font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.03em; line-height: 0.9;
  text-align: center;
  color: var(--encre);
  text-shadow: 0 0 44px color-mix(in srgb, var(--teinte) 65%, transparent);
}
/* titre en SVG de marque (tag graffiti, mot seul) quand la région en a un */
.territoire-svg {
  width: min(84vw, 560px);
  aspect-ratio: 2369 / 940;            /* ratio du tag OVERBORN, mot seul */
  background: var(--encre);
  -webkit-mask: var(--titre-svg) center / contain no-repeat;
  mask: var(--titre-svg) center / contain no-repeat;
  /* pas de filter sur un mask (SVG autotracé lourd) — halo interdit ici */
}

/* ---- rotation 3D « mode vidéo » ---- */
#rot3d {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}
.carte-3d { aspect-ratio: 3 / 4; justify-content: flex-end; }
.carte-3d .rot { position: absolute; inset: 0 0 44px 0; }

/* ============ ARCHIVES ============
   Une tenue = une rangée : swipe horizontal → les 4 vues.
   Scroll vertical → la tenue suivante. En bas → le vêtement. */
.archive {
  min-height: 92dvh;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.archive-entete { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }

.rangee {
  display: flex; gap: 14px;
  margin: 0 -20px; padding: 0 clamp(20px, 7vw, 60px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(20px, 7vw, 60px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rangee::-webkit-scrollbar { display: none; }

.carte {
  flex: 0 0 84%;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  position: relative;
  padding: 4vh 0 2vh;
}
.carte img {
  width: 100%; height: auto;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 34px color-mix(in srgb, var(--teinte) 34%, transparent))
          drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
}
/* halo de lumière derrière chaque vue */
.carte::before {
  content: "";
  position: absolute; z-index: 0;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 110%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--teinte) 24%, transparent), transparent 65%);
  filter: blur(10px);
}
.carte figcaption { z-index: 1; }

/* un plan par écran — la silhouette flotte dans la lumière de la région */
.plan {
  min-height: 86dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px;
  position: relative;
}
.plan img {
  width: min(78vw, 430px); height: auto;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 34px color-mix(in srgb, var(--teinte) 34%, transparent))
          drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
}
/* halo de lumière derrière la silhouette */
.plan::before {
  content: "";
  position: absolute; z-index: 0;
  width: min(88vw, 500px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--teinte) 26%, transparent), transparent 65%);
  filter: blur(10px);
}
.plan-legende { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 1; }

.vide { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: color-mix(in srgb, var(--encre) 55%, transparent); text-align: center; line-height: 2.2; }

/* flou → net à l'arrivée dans le viewport */
.apparait { opacity: 0; filter: blur(16px); transform: translateY(18px); transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease; }
.apparait.net { opacity: 1; filter: blur(0); transform: none; }

/* ---- le vêtement : jamais montré ---- */
.produit .mystere {
  width: min(66vw, 340px); aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  position: relative; z-index: 1;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--teinte) 70%, transparent);
  background: color-mix(in srgb, var(--teinte) 6%, transparent);
  box-shadow:
    inset 0 0 40px color-mix(in srgb, var(--teinte) 12%, transparent),
    0 0 44px color-mix(in srgb, var(--teinte) 22%, transparent);
}
/* l'emblème en filigrane derrière le « ? » — le sceau sur le mystère */
.produit .mystere::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--teinte);
  opacity: 0.13;
  -webkit-mask: url("assets/marque/OVB_2026-07-18_logo-master-currentcolor_v01.svg") center / 58% no-repeat;
  mask: url("assets/marque/OVB_2026-07-18_logo-master-currentcolor_v01.svg") center / 58% no-repeat;
}
.produit .mystere span {
  font-size: 110px; font-style: italic; font-weight: 700;
  color: var(--teinte);
  text-shadow: 0 0 36px color-mix(in srgb, var(--teinte) 75%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .apparait { transition: none; }
}

/* desktop : on aère */
@media (min-width: 700px) {
  .plan img { width: 400px; }
  .carte { flex-basis: 46%; }
  .tag.logo { top: 22px; left: 22px; }
  .tag.region-tag { top: 22px; right: 22px; }
}

/* grands écrans : la colonne s'élargit, les sections plein-écran se resserrent,
   les vues d'archive grandissent — fini l'îlot minuscule perdu au centre. */
@media (min-width: 1000px) {
  #app { max-width: 940px; }
  .vitrine { padding: 88px 0 72px; }
  .hero { min-height: 48vh; }
  .archive { min-height: auto; padding: 8vh 0; }
  .plan { min-height: auto; padding: 9vh 0; }
  .rangee { padding: 0; margin: 0; scroll-padding-left: 0; }
  .carte { flex: 0 0 clamp(260px, 30%, 330px); padding: 2vh 0; }
  .plan img { width: min(440px, 34vw); }
}
@media (min-width: 1500px) {
  #app { max-width: 1120px; }
  .carte { flex: 0 0 clamp(300px, 24%, 360px); }
}


/* ============ NEXUS (le pacte + l'inscription) ============
   Même grammaire que le quiz : mono, majuscules espacées, filets
   fins. Le champ est un simple trait qui s'allume à la teinte —
   aucune boîte, rien qui ressemble à un formulaire d'e-commerce.

   Le récit est la seule zone du site en bas-de-casse : c'est une
   voix qui parle, pas un panneau. Les LOIS repassent en capitales
   espacées — c'est gravé, pas dit. */
.nexus-corps { gap: 22px; }

.nexus-recit {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 42ch;
}
.nexus-recit p {
  font-size: 13px; line-height: 2; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--encre) 62%, transparent);
}
.nexus-recit p:first-child {
  font-style: italic;
  color: color-mix(in srgb, var(--encre) 80%, transparent);
}

.nexus-form {
  width: 100%; display: flex; flex-direction: column; gap: 20px;
  margin-top: 6px; text-align: left;
}

.nexus-libelle {
  font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--teinte);
}

.nexus-champ {
  font: inherit; font-size: 15px; letter-spacing: 0.08em;
  color: var(--encre);
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 24%, transparent);
  padding: 12px 2px;
  width: 100%;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.nexus-champ::placeholder { color: color-mix(in srgb, var(--encre) 22%, transparent); letter-spacing: 0.04em; }
.nexus-champ:focus {
  outline: none;
  border-bottom-color: var(--teinte);
  box-shadow: 0 1px 0 0 var(--teinte), 0 6px 22px -12px var(--teinte);
}

/* La case n'est PAS en capitales espacées comme le reste du site :
   un consentement doit être intelligible pour être valable, et
   deux phrases en display mono seraient un mur. Bas-de-casse,
   interligne large — ça se lit, donc ça vaut. */
.nexus-consent {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 11.5px; letter-spacing: 0.01em;
  line-height: 1.85;
  color: color-mix(in srgb, var(--encre) 60%, transparent);
  cursor: pointer;
  text-align: left;
}
.nexus-consent:hover { color: color-mix(in srgb, var(--encre) 74%, transparent); }
.nexus-consent input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px;
  border: 1px solid color-mix(in srgb, var(--encre) 34%, transparent);
  background: transparent; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 0.15s;
}
.nexus-consent input::after {
  content: ""; width: 7px; height: 7px;
  background: var(--teinte); transform: scale(0);
  transition: transform 0.15s;
}
.nexus-consent input:checked { border-color: var(--teinte); }
.nexus-consent input:checked::after { transform: scale(1); }
.nexus-consent input:focus-visible { outline: 1px solid var(--teinte); outline-offset: 3px; }

.nexus-erreur {
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--teinte); line-height: 1.8;
}

/* le bouton reprend .opt, avec un cadre pour marquer l'action */
.opt.nexus-valider {
  border: 1px solid color-mix(in srgb, var(--teinte) 55%, transparent);
  border-left-width: 3px; border-left-color: var(--teinte);
  color: var(--teinte);
  padding: 20px 10px;
  text-align: center;
}
.opt.nexus-valider:active { background: color-mix(in srgb, var(--teinte) 12%, transparent); }
.opt.nexus-valider:disabled { opacity: 0.55; cursor: default; }

.nexus-mentions {
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: color-mix(in srgb, var(--encre) 30%, transparent);
  text-decoration: underline; text-underline-offset: 5px;
}
.nexus-mentions:active { color: var(--teinte); }