/* ============================================================
   IN MY ELEMENT — REBRAND · LA COUPE FRANCHE
   Direction: Anton (titres) + Archivo (corps)
   Palette: LA PALETTE DU PORTE-PASSEPORT, deux couleurs et pas une de plus.
     vert  #C2CC83 — le cuir
     prune #4A2530 — le gaufrage
   Le noir et l'or sont bannis : ils n'existent pas sur le produit.
   ============================================================ */

/* Override: toutes les polices */
:root {
  --sans: 'Anton', 'Archivo', system-ui, sans-serif;
  --serif: 'Archivo', system-ui, sans-serif;
  --mono: 'Archivo', system-ui, sans-serif;
}

/* ——— HERO ———
   Anton en capitales sur une vidéo demande un fond : sans voile, le texte
   se perd dans l'image. Interlignage à 1.0 — sous ça, les accents percutent. */
/* Le voile est porté par la SECTION, pas par le bloc de texte : posé sur
   le bloc, sa boîte commence sous le header et trace une arête nette en
   travers de la photo. Il couvre donc tout le hero, et se dégrade aussi
   vers le bas pour qu'aucun bord ne se voie. */
.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(74,37,48,.92) 0%,
      rgba(74,37,48,.76) 42%,
      rgba(74,37,48,.10) 78%,
      rgba(74,37,48,0) 100%),
    linear-gradient(180deg,
      rgba(74,37,48,.55) 0%,
      rgba(74,37,48,0) 30%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  /* Le header est fixe : sans cette garde, la première ligne d'Anton
     passe dessous et se fait couper. */
  padding: calc(var(--nav-h) + var(--announce-h) + clamp(1.5rem,4vw,3rem))
           var(--gutter) clamp(2rem,5vw,4rem);
}

/* L'indicateur de défilement venait percuter les boutons dès que la
   colonne se resserrait. Il passe à droite, hors de la colonne de texte,
   et disparaît quand la place manque vraiment. */
.hero__scroll {
  z-index: 3;
  left: auto;
  right: var(--gutter);
  transform: none;
  color: var(--paper);
}
@media (max-width: 900px) {
  .hero__scroll { display: none; }
}

.hero-q {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.2rem, 6.4vw, 5.2rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-transform: uppercase;
  max-width: 16ch;
}

.hero-q span { display: block; }
.hero-q .w1, .hero-q .w4 { color: var(--ime-green); }
.hero-q .w2, .hero-q .w3, .hero-q .w5 { color: var(--paper); }

.hero-answer {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(.95rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--paper);
}
.hero-answer .fixed { color: var(--ime-green); }

/* ============================================================
   LES PHOTOS, TELLES QUELLES
   Le traitement « duo » désaturait l'image en gris puis reposait
   deux voiles colorés par-dessus. Sur des photos où le cuir vert
   EST le sujet, ça détruit exactement ce qu'on vend.
   Aucun filtre, aucun voile, aucun dégradé : l'original.
   ============================================================ */
.duo img, .duo video,
.uni-fig img, .uni-fig video,
.uni-head__bg img {
  filter: none !important;
  mix-blend-mode: normal !important;
}
.duo::after, .duo::before { display: none !important; }

/* ——— TITRES ——— */
h1, h2, h3, .display {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.95;
  color: var(--prune);
}

h1 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }

.display { font-size: clamp(2.4rem, 7vw, 5rem); }

/* ——— CORPS ——— */
p, body, .body {
  font-family: 'Archivo', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.62;
  color: var(--prune);
}

.lead {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--prune);
}

/* ——— BOUTONS ——— */
.btn {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  font-weight: 400;
}

/* Le prune ne se lit QUE sur fond clair : 11,64:1 sur ivoire, mais il ne
   peut pas se poser sur lui-même. Le fantôme est donc ivoire sur les fonds
   prune, et prune sur les fonds clairs. */
.btn--ghost {
  border: 2px solid var(--paper);
  color: var(--paper);
  background: transparent;
}
.btn--ghost:hover {
  background: var(--paper);
  color: var(--prune);
}

.silence .btn--ghost,
.universe .btn--ghost,
[data-theme="paper"] .btn--ghost {
  border-color: var(--prune);
  color: var(--prune);
}
.silence .btn--ghost:hover,
.universe .btn--ghost:hover,
[data-theme="paper"] .btn--ghost:hover {
  background: var(--prune);
  color: var(--paper);
}

.btn--green {
  background: var(--ime-green);
  color: var(--prune);
  border: none;
}

.btn--green:hover {
  background: var(--prune);
  color: var(--paper);
}

/* ——— ACCENTS COULEUR ——— */
.eyebrow {
  font-family: 'Archivo', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--prune);
}

/* Pas de règle de fond globale sur `section` : les chapitres sombres
   (sig3d, carte, journal) ont déjà le leur et seraient écrasés. */

/* ——— SIGNATURE 3D ——— */
.sig3d {
  background: var(--prune);
}

.sig3d-copy {
  color: var(--paper);
}

.sig3d-copy h2 {
  color: var(--ime-green);
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
}

/* ——— CARTE ——— */
.carte {
  border: 3px solid var(--prune);
}

/* ——— FOOTER ——— */
footer {
  background: var(--prune);
  color: var(--paper);
  font-family: 'Archivo', sans-serif;
}

footer a {
  color: var(--ime-green);
}

footer a:hover {
  color: var(--prune);
}

/* ——— LIENS ———
   Ciblés dans le corps de texte UNIQUEMENT. Une règle sur `a` nu
   souligne aussi la navigation, les boutons et les cartes produit. */
.lead a, p a:not(.btn) {
  color: var(--prune);
  text-decoration: none;
  border-bottom: 2px solid var(--ime-green);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.lead a:hover, p a:not(.btn):hover {
  color: var(--ime-green);
  border-bottom-color: var(--prune);
}

/* ——— MARQUEE ——— */
.marquee {
  background: var(--prune);
  color: var(--paper);
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1rem, 2.4vw, 1.8rem);
}

/* ——— LISIÈRE ——— */
.lisiere {
  background: linear-gradient(90deg, var(--prune), var(--ime-green));
}

/* ——— MICRO COPY ——— */
.meta {
  font-family: 'Archivo', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--prune);
}

/* ——— CONTRASTE : texte sur vert —— */
.on-green {
  background: var(--ime-green);
  color: var(--prune);
}

.on-green a {
  color: var(--prune);
  border-bottom-color: var(--prune);
}

/* ——— CONTRASTE : texte sur bordeaux ——— */
.on-burgundy {
  background: var(--prune);
  color: var(--paper);
}

.on-burgundy a {
  color: var(--ime-green);
  border-bottom-color: var(--paper);
}

/* ——— CHAMPS ———
   Sans règle, le navigateur les rend en noir pur avec sa bordure système —
   les deux seules occurrences de noir qui restaient sur la page. */
input, textarea, select {
  font-family: 'Archivo', sans-serif;
  color: var(--prune);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--prune);
  border-radius: 0;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--ime-green);
  outline-offset: 3px;
}
[data-theme="noir"] input,
.sig3d input, .carte input, footer input {
  color: var(--paper);
  border-bottom-color: var(--ime-green);
}

/* ——— PRINT ——— */
@media print {
  * {
    font-family: 'Archivo', sans-serif;
  }
  h1, h2, h3, .display {
    font-family: 'Anton', sans-serif;
  }
}