/* ==========================================================================
   Habillage v4 : applique l'esthetique de /v4.html aux pages de la v3
   (accueil, carte, admin) sans toucher a leur structure ni a leurs scripts.
   Se charge APRES theme.css et apres la feuille propre a la page.

   Principe : la v3 derive tout de ses jetons et utilise deja les bonnes
   polices (Archivo Black oblique, Inter, JetBrains Mono). Il suffit donc
   de repeindre les jetons, de remplacer l'aurore par le brouillard, et de
   ramener les surfaces a leur seul contour.
   ========================================================================== */

:root {
  /* du vrai noir */
  --bg: #000;
  --bg-2: #050505;

  /* l'accent n'est plus rouge mais vert PDM Truck : tous les filets, lueurs et
     pastilles de la v3 suivent, puisqu'ils lisent ces trois jetons. */
  --red: #2EE06F;
  --red-hi: #9DF7BC;
  --red-deep: #0E6B34;
  --red-lum: 46, 224, 111;

  /* le chrome argente des titres et des boutons */
  --chrome: linear-gradient(115deg,
    #F2FFF6 0%, #B9F5CD 16%, #2FB462 36%, #E9FFF0 54%,
    #1E7A45 76%, #F2FFF6 100%);
  --gloss-ag: linear-gradient(115deg,
    #B8FFD2 0%, #7DEBA6 22%, #34B868 45%, #A8FAC6 62%,
    #2C9E5A 82%, #B8FFD2 100%);
}

html { background: #000; }
body { background: transparent; }

/* --------------------------------------------------- le fond : brouillard */

/* l'aurore rouge et le grain laissent la place au shader */
.aurora, .grain { display: none !important; }

/* v4-fog.js pose cette couche lui-meme sur les pages qui n'en ont pas */
.v4-bg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 50% at 70% 40%, rgba(255,255,255,.045), transparent),
    radial-gradient(50% 45% at 20% 80%, rgba(255,255,255,.03), transparent),
    #000;
}
.v4-bg canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: scale(1.1);
  opacity: 0; transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
}
.v4-bg canvas.is-on { opacity: 1; }
.v4-veil {
  position: absolute; inset: 0;
  background: radial-gradient(100% 80% at 50% 45%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.62) 100%);
}

/* ------------------------------------------------------- titres et chrome */

/* le detourage des mots mis en avant reste celui de la v3 : il est deja
   en blanc, donc conforme au theme, et il survit au decoupage SplitText. */

/* --------------------------------------------------- surfaces : contour seul */

.vcard {
  background: none;
  border-color: rgba(255,255,255,.07);
}
.vcard:hover { border-color: rgba(255,255,255,.18); }

/* les panneaux de la carte et de l'admin restent lisibles par dessus la
   carte, donc ils gardent un fond sombre, mais perdent leur degrade. */
.panel {
  background: rgba(0, 0, 0, .55);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 30px 80px -24px #000;
}

.chip { border-color: rgba(255,255,255,.1); }
.chip:hover { border-color: rgba(255,255,255,.22); }

/* ------------------------------------------------------------- le bouton */

/* la v3 a deja le bouton a contour de TZ ; on aligne juste le remplissage
   du survol sur l'argent et on ajoute la lueur qui l'ancre dans la page. */
.btn:hover {
  box-shadow: 0 14px 34px -12px rgba(154, 154, 162, .55);
}
.btn.is-primary,
.btn[data-primary] {
  background-image: var(--gloss-ag);
  border-color: transparent;
  color: #000;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 14px 34px -12px #9A9AA2;
}

/* ---------------------------------------------------------- le prechargeur */

/* fond noir franc et logo en blanc froid plutot qu'en gris */
.loader { background: #000; }
.loader__logo { filter: grayscale(1) brightness(.78); }

/* PAS de background-clip: text sur les grands titres : SplitText les
   decoupe en div imbriques et le texte disparait completement. Le
   detourage de la v3 est deja monochrome, on le garde tel quel. */

/* un fond net ne doit pas etre agrandi (voir v4.css) */
.v4-bg canvas.is-sharp { transform: none; }