/* =========================================================
   ERYX — base : tokens, reset, unités, utilitaires, animations.
   Toutes les cotes viennent des maquettes (ordinateur 1440, mobile 390).
   1 unité de maquette = var(--u) = var(--k) × 1px ; --k est posé par bloc (JS).
   Mobile : < 700 px (maquettes M-*).
   ========================================================= */

:root {
  --bg: #090808;
  --ivory: #F6F2EB;
  --ivory-2: #ECE5DA;
  --ox: #821B29;
  --ox-d: #38060D;
  --red: #A61C32;
  --red-2: #C1263D;
  --text: #FBF8F6;
  --grey: #9C9590;
  --ease: cubic-bezier(.22, .9, .24, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --glide: cubic-bezier(.16, 1, .3, 1);
  --tab-dur: .55s;
  --k: 1;
  --u: calc(var(--k) * 1px);
  --hh: 110px;  /* hauteur de l'en-tête fixe (JS) */
  --bh: 128px;  /* hauteur de la barre d'incitation fixe (JS) */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  font-family: Mulish, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* pile ouverte ou formulaire : la page du dessous ne défile plus */
html.is-locked, html.is-locked body { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; }
p, h1, h2, h3, figure, blockquote, ol, ul { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus { outline: none; }
:focus-visible { outline: 2px solid #E2788A; outline-offset: 4px; border-radius: 6px; }

/* bascule ordinateur / mobile : chaque maquette a ses propres textes */
.only-m { display: none !important; }
@media (max-width: 699px) {
  .only-d { display: none !important; }
  .only-m { display: revert !important; }
  br.only-m { display: inline !important; }
}

/* --k change par bloc : --u doit être recalculé là où --k est posé */
.hdr, .band, .bar, .scene, .kbox, .tab, .sec, .ov-card { --u: calc(var(--k) * 1px); }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo { display: flex; align-items: center; }
.logo svg { display: block; }
.ft { font-family: Mulish, sans-serif; font-weight: 300; }

/* =========================================================
   ANIMATIONS (CLACK d'arrivée, survols)
   ========================================================= */
/* glissement court, longue décélération, sans rebond : les pièces se posent l'une contre l'autre */
@keyframes clackL { 0% { transform: translate3d(-24px, 0, 0); opacity: 0 } 55% { opacity: 1 } 100% { transform: translate3d(0, 0, 0); opacity: 1 } }
@keyframes clackR { 0% { transform: translate3d(24px, 0, 0); opacity: 0 } 55% { opacity: 1 } 100% { transform: translate3d(0, 0, 0); opacity: 1 } }
@keyframes clackD { 0% { transform: translate3d(0, -16px, 0); opacity: 0 } 55% { opacity: 1 } 100% { transform: translate3d(0, 0, 0); opacity: 1 } }
.js .anim:not(.in) .clackL, .js .anim:not(.in) .clackR, .js .anim:not(.in) .clackD { opacity: 0; }
.anim.in .clackL { animation: clackL .7s var(--glide) both; }
.anim.in .clackR { animation: clackR .7s var(--glide) both; }
.anim.in .clackD { animation: clackD .7s var(--glide) .08s both; }

.duo .clackL, .duo .clackR { transition: translate .6s var(--glide); }
.stp { transition: translate .5s var(--spring), filter .4s; }
.qwrap .medal { transition: translate .6s var(--spring); }
.slab { transition: translate .6s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .duo:hover .clackL { translate: -14px 0; }
  .duo:hover .clackR { translate: 14px 0; }
  .stp:hover { translate: 0 -10px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55)) brightness(1.04); }
  .qwrap:hover .medal { translate: 0 -16px; }
  .slab:hover { translate: 0 -6px; }
}
.lac::after { content: ""; position: absolute; top: -20%; left: -40%; width: 26%; height: 140%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); transform: skewX(-18deg); transition: left 1.2s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.lac:hover::after { left: 125%; }

@keyframes shimmer { 0% { background-position: 120% 0 } 100% { background-position: -20% 0 } }
.shim { background: linear-gradient(100deg, #A61C32 0%, #A61C32 40%, #E2788A 50%, #A61C32 60%, #A61C32 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  :root { --tab-dur: 0s; }
  .anim.in .clackL, .anim.in .clackR, .anim.in .clackD, .shim { animation: none; }
  .js .anim:not(.in) .clackL, .js .anim:not(.in) .clackR, .js .anim:not(.in) .clackD { opacity: 1; }
  .duo .clackL, .duo .clackR, .stp, .btn, .btn .shine, .qwrap .medal, .slab, .lac::after { transition: none !important; }
  .duo:hover .clackL, .duo:hover .clackR, .stp:hover, .qwrap:hover .medal, .slab:hover { translate: none; }
  .btn:hover .shine { left: -50%; }
}

/* =========================================================
   MOBILE : toucher, encoche, rendu
   ========================================================= */
a, button, .band { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* les sections d'onglets hors écran ne sont pas rendues (gros gain sur mobile) */
.sec { content-visibility: auto; contain-intrinsic-size: auto 100vh; }
@media (max-width: 699px) {
  html .hdr { top: env(safe-area-inset-top, 0px); }
  .tabs .tab { top: calc(var(--top, 96px) + env(safe-area-inset-top, 0px)); }
  html .band { height: calc(var(--band-h, 96px) + env(safe-area-inset-top, 0px)); }
  .ov-card { touch-action: pan-y; }
}
@media (max-width: 699px), (pointer: coarse) {
  /* flous d'arrière-plan des mini-sites : invisibles à cette taille, très coûteux au défilement */
  .dev-scr *, .vis * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* poignées de fermeture : un appui ferme l'onglet, glisser vers le bas aussi.
   Celle des onglets est partout (ordinateur compris) ; celle des volets, seulement sur écrans tactiles. */
.ov-card__grip { display: none; }
.tab__grip { display: block; position: absolute; left: 0; right: 0; top: 0; height: calc(26 * var(--u)); z-index: 5; touch-action: none; cursor: pointer; }
@media (max-width: 699px), (pointer: coarse) {
  .tab__grip { height: calc(22 * var(--u)); }
  .ov-card__grip { display: block; position: absolute; left: 0; right: calc(60 * var(--u)); top: 0; height: calc(26 * var(--u)); z-index: 3; touch-action: none; }
}