/* ============================================================================
   Le Marginal — habillage du site
   Le moteur scroll-world injecte ses propres styles dans un @layer "sw" ;
   tout ce qui suit est hors layer, donc gagne toujours sur ses valeurs par
   défaut (thème clair). Ne pas envelopper ce fichier dans un @layer.
   ========================================================================== */

/* ── Jetons ────────────────────────────────────────────────────────────── */
:root, .sw-root {
  --sw-bg:        #0B0A09;   /* le noir des mockups produits */
  --sw-ink:       #F3EDE3;
  --sw-ink-soft:  #8B8177;
  --sw-accent:    #EA2E33;   /* rouge signal — contraste 4,65:1 sur le fond,
                                lisible en petit corps (eyebrows, liens) */

  --sw-font-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', system-ui, sans-serif;
  --sw-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --line: #221E19;
  --max: 1280px;
}

* { box-sizing: border-box; }

/* `display` déclaré dans une règle de classe bat l'attribut `hidden` : sans
   cette ligne, la visionneuse reste posée sur toute la page et avale les clics. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sw-bg);
  color: var(--sw-ink);
  font-family: var(--sw-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── En-tête ───────────────────────────────────────────────────────────── */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: clamp(14px, 2.2vw, 24px) clamp(18px, 5vw, 64px);
  padding-top: calc(clamp(14px, 2.2vw, 24px) + env(safe-area-inset-top));
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
.hdr.is-solid {
  background: rgba(11, 10, 9, .82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.hdr__brand { display: flex; align-items: center; text-decoration: none; }
.hdr__logo {
  /* Capitales sans hampes ni jambages : elles occupent 72 % de la hauteur de
     boîte, contre ~45 % pour l'écriture manuscrite. À valeur égale ce logotype
     paraîtrait donc bien plus gros — d'où une hauteur nettement plus basse
     pour une présence équivalente. */
  height: clamp(34px, 4.6vw, 56px); width: auto; display: block;
  /* Le logotype flotte sur le ciel doré tant que l'en-tête est transparent. */
  filter: drop-shadow(0 1px 14px rgba(11, 10, 9, .9));
  transition: height .35s ease, filter .35s ease;
}
/* Grand à l'atterrissage, resserré une fois qu'on défile : sans ça, un en-tête
   de 130 px de haut suivrait le visiteur sur toute la page. Pour une taille
   fixe, supprimer cette règle. */
.hdr.is-solid .hdr__logo { height: clamp(26px, 3.4vw, 40px); filter: none; }
.hdr__nav { display: flex; gap: clamp(14px, 2vw, 30px); }
/* La nav flotte sur un plan clair (ciel doré) tant que l'en-tête est
   transparent : sans ombre portée, elle disparaît dans les hautes lumières. */
.hdr__nav a {
  color: color-mix(in srgb, var(--sw-ink) 82%, var(--sw-ink-soft));
  text-decoration: none;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  text-shadow: 0 1px 14px rgba(11, 10, 9, .9);
  transition: color .25s, text-shadow .25s;
}
.hdr.is-solid .hdr__nav a { color: var(--sw-ink-soft); text-shadow: none; }
.hdr__nav a:hover { color: var(--sw-ink); }
/* Même langage que le lien de fin de page : rectangle à filet fin, capitales
   espacées, remplissage rouge au survol. Le fond sombre n'est là que tant que
   l'en-tête est transparent — sans lui, un filet clair sur le ciel doré du film
   devient illisible. */
.hdr__cta {
  text-decoration: none; white-space: nowrap;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  color: var(--sw-ink);
  padding: 11px 24px;
  background: rgba(11, 10, 9, .38);
  border: 1px solid rgba(243, 237, 227, .32);
  text-shadow: 0 1px 10px rgba(11, 10, 9, .9);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
/* `:not(:hover)` est indispensable ici : sans lui, cette règle (3 classes)
   l'emporte sur `.hdr__cta:hover` (2), et le survol perdait son fond rouge dès
   que l'en-tête devenait opaque — texte sombre sur fond sombre. */
.hdr.is-solid .hdr__cta:not(:hover) { background: transparent; text-shadow: none; }
.hdr__cta:hover {
  background: var(--sw-accent); border-color: var(--sw-accent);
  color: var(--sw-bg); text-shadow: none;
}
.hdr__cta:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 3px; }
@media (max-width: 860px) { .hdr__nav { display: none; } }

/* ── Correctifs de thème sombre sur le moteur ──────────────────────────── */
/* Ses défauts sont pensés pour un fond clair : plusieurs éléments arrivent
   en blanc sur blanc si on ne les reprend pas. */
.sw-topbar { display: none; }                    /* on a notre propre en-tête */

.sw-copy__eyebrow { letter-spacing: .22em; font-weight: 500; }
.sw-copy__title   { font-weight: 500; letter-spacing: .005em; text-transform: uppercase; line-height: .98; }
.sw-copy__body    { color: color-mix(in srgb, var(--sw-ink) 72%, var(--sw-ink-soft)); }
.sw-copy__num     { color: color-mix(in srgb, var(--sw-ink-soft) 80%, transparent); }


/* Boutons du film : rectangulaires comme le reste du site (le moteur les pose
   en pilule à 999px). Même langage que le CTA d'en-tête et le lien de fin. */
.sw-btn {
  border-radius: 0;
  padding: 16px 32px;
  font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.sw-btn--primary { color: var(--sw-bg); background: var(--sw-accent); border-color: var(--sw-accent); }
.sw-btn--primary:hover { background: var(--sw-ink); border-color: var(--sw-ink); transform: none; }
/* Le secondaire flotte sur l'image du film : sans fond sombre, un filet clair
   se perd dans le contre-jour doré. */
.sw-btn--ghost {
  color: var(--sw-ink);
  background: rgba(11, 10, 9, .38);
  border-color: rgba(243, 237, 227, .32);
  text-shadow: 0 1px 10px rgba(11, 10, 9, .9);
}
.sw-btn--ghost:hover {
  background: var(--sw-accent); border-color: var(--sw-accent);
  color: var(--sw-bg); text-shadow: none; transform: none;
}

.sw-route__label {
  color: var(--sw-ink);
  background: rgba(11, 10, 9, .78);
  border-color: rgba(243, 237, 227, .14);
  letter-spacing: .1em; text-transform: uppercase; font-size: .7rem;
}
.sw-hint { color: var(--sw-ink-soft); }
.sw-hint i { border-color: rgba(243, 237, 227, .3); }

/* Le film est un plan chaud et lumineux : on assombrit un peu pour que le
   texte tienne, et on garde le voile latéral du moteur par-dessus. */
.sw-scene__video, .sw-scene__still { filter: saturate(1.04) contrast(1.03) brightness(.9); }

/* ── Téléphone : reprises sur le texte du film ─────────────────────────── */
@media (max-width: 700px) {
  /* Le moteur met le texte pleine largeur et pose ses pastilles de progression
     par-dessus, à droite : sans cette réserve, les deux se chevauchent. */
  .sw-copy { padding-right: 34px; }
  /* Et il l'ancre si bas que l'indication « défile » vient le toucher. */
  .sw-copy { bottom: calc(clamp(76px, 15dvh, 132px) + env(safe-area-inset-bottom)); }

  /* Deux boutons côte à côte font 418 px pour 375 disponibles : ils se cassent
     en deux lignes inégales. Empilés pleine largeur, ils tiennent et se visent
     mieux au pouce. */
  .sw-copy__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .sw-btn { width: 100%; text-align: center; padding: 15px 20px; letter-spacing: .16em; }
}

/* Une fois le film terminé, ses couches fixes doivent disparaître pour
   laisser la galerie occuper l'écran. L'opacité ne touche pas au layout,
   donc la hauteur de piste du moteur reste intacte. */
#world { transition: opacity .45s ease; }
#world.is-past { opacity: 0; pointer-events: none; }
#world.is-past .sw-route { pointer-events: none; }

/* ── La tête : carton de fin du film ───────────────────────────────────── */
/* z-index 25 : au-dessus des plans du moteur (10) et de son texte (20), sous
   `.after__sheet` (30). Elle monte avant la fin du film, tient seule sur le
   noir pendant la respiration, puis se fond à l'approche de la citation. */
.emblem {
  position: fixed; inset: 0; z-index: 25;
  pointer-events: none; opacity: 0;
  will-change: opacity;
}
/* Voile sombre local : la dernière image est en plein contre-jour doré,
   la tête ne tiendrait pas dessus sans l'assombrir sous elle. */
.emblem::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 64% at 50% 50%,
    rgba(11, 10, 9, .93) 0%, rgba(11, 10, 9, .70) 46%, rgba(11, 10, 9, 0) 82%);
}
/* Une seule dimension contrainte, jamais les deux : sur un <img> à `width`
   fixée, un `max-height` rogne la hauteur sans recalculer la largeur — le
   dessin s'aplatirait sur écran bas. Le plafond de hauteur est donc exprimé
   en largeur, via le rapport du tracé (108.1 / 96.5 = 1.12). */
.emblem__mark {
  position: absolute; left: 50%; top: 50%;
  width: min(52vw, 600px, 56vh);   /* 56vh ≈ 50vh de hauteur — c'est presque
                                      toujours la hauteur qui borne, donc la
                                      tête garde la même présence d'un écran
                                      à l'autre au lieu de rapetisser. */
  height: auto;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transform-origin: center;
}
@media (max-width: 860px) {
  .emblem__mark { width: min(70vw, 360px, 45vh); }   /* 45vh ≈ 40vh de hauteur */
}
@media (prefers-reduced-motion: reduce) { .emblem__mark { transform: translate(-50%, -50%); } }

/* La tête occupe désormais le centre : le texte de la dernière scène doit lui
   céder la place. `!important` bat le style inline que le moteur réécrit à
   chaque tick de scroll — c'est le seul moyen de reprendre la main dessus. */
#world .sw-copylayer .sw-copy:last-child { transition: opacity .45s ease; }
#world.is-endcard .sw-copylayer .sw-copy:last-child {
  opacity: 0 !important;
  pointer-events: none !important;   /* sinon les boutons restent cliquables, invisibles */
}

/* ── Après le film ─────────────────────────────────────────────────────── */
/* `.after` reste transparent : c'est ce qui laisse la respiration montrer le
   noir de la page et la tête posée dessus. L'opacité vit sur `.after__sheet`,
   dont l'arrivée en bas d'écran déclenche le fondu de la tête. */
.after { position: relative; z-index: 30; background: transparent; }
.handoff { height: 60vh; }
.after__sheet { position: relative; background: var(--sw-bg); }

.manifeste {
  max-width: 780px; margin: 0 auto;
  padding: clamp(90px, 16vh, 190px) clamp(22px, 6vw, 40px);
  border-top: 1px solid var(--line);
}
.manifeste__eyebrow {
  display: block; color: var(--sw-accent);
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600;
}
.manifeste__title {
  margin: 18px 0 clamp(34px, 5vw, 54px);
  font-family: var(--sw-font-display); font-weight: 500;
  font-size: clamp(1.8rem, 4.6vw, 3rem); line-height: 1.04;
  letter-spacing: .01em; text-transform: uppercase;
}
/* Texte long : aligné à gauche et borné en largeur de ligne — centré, il
   deviendrait illisible passé trois lignes. */
.manifeste__body p {
  margin: 0 0 1.35em;
  font-size: clamp(1rem, 1.35vw, 1.09rem); line-height: 1.72;
  color: color-mix(in srgb, var(--sw-ink) 74%, var(--sw-ink-soft));
  max-width: 62ch;
}
.manifeste__body em {
  font-style: normal; font-weight: 600;
  color: var(--sw-ink);
  box-shadow: inset 0 -.42em 0 color-mix(in srgb, var(--sw-accent) 22%, transparent);
}
.manifeste__punch {
  margin-top: clamp(26px, 4vw, 40px) !important;
  font-family: var(--sw-font-display); font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem) !important;
  line-height: 1.2 !important; text-transform: uppercase; letter-spacing: .01em;
  color: var(--sw-ink) !important;
}
/* Chute du manifeste : la citation, centrée sous un filet. */
.manifeste__quote {
  margin: clamp(44px, 7vw, 72px) 0 0;
  padding-top: clamp(34px, 5vw, 52px);
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--sw-font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem); line-height: 1.14;
  letter-spacing: .005em; text-transform: uppercase;
  color: var(--sw-ink);
}
.manifeste__quote cite {
  display: block; margin-top: 22px;
  font-family: var(--sw-font-body); font-style: normal; font-weight: 500;
  font-size: .76rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--sw-accent);
}

.pieces {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(50px, 8vh, 90px) clamp(18px, 5vw, 64px) clamp(70px, 12vh, 130px);
}
.pieces__head { margin-bottom: clamp(28px, 5vw, 52px); }
.pieces__eyebrow {
  display: block; color: var(--sw-accent);
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600;
}
.pieces__title {
  margin: 14px 0 0; font-family: var(--sw-font-display); font-weight: 500;
  font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1;
  letter-spacing: .01em; text-transform: uppercase;
}

/* Deux pièces réelles : 2 colonnes. À 3, elles laisseraient un trou visible ;
   à 2, elles remplissent la ligne et gagnent en présence. Repasser à
   `repeat(3, 1fr)` le jour où il y en aura 3 ou plus. */
.grid {
  display: grid; gap: clamp(12px, 1.8vw, 24px);
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }
.tile {
  position: relative; display: block; padding: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 3px;
  background: #000; overflow: hidden; cursor: pointer;
  aspect-ratio: 3 / 2;
  transition: border-color .3s ease, transform .3s ease;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, opacity .3s; }
.tile:hover { border-color: rgba(234, 46, 51, .5); transform: translateY(-3px); }
.tile:hover img { transform: scale(1.04); }
.tile:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 3px; }

/* Fin de page : un carton, pas un bloc d'appel à l'action. Type très grande et
   serrée, un filet rouge court en guise de signature, et un lien rectangulaire
   — la pilule arrondie sur fond sombre est le vocabulaire d'une landing page,
   pas celui d'une marque de vêtement. */
.outro {
  text-align: center;
  padding: clamp(110px, 20vh, 220px) clamp(22px, 6vw, 40px);
  border-top: 1px solid var(--line);
}
.outro__title {
  position: relative;
  margin: 0; padding-top: clamp(34px, 5vw, 52px);
  font-family: var(--sw-font-display); font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 5rem); line-height: .96;
  letter-spacing: .005em; text-transform: uppercase;
}
.outro__title::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 48px; height: 2px; background: var(--sw-accent);
}
.outro__body {
  margin: clamp(22px, 3vw, 30px) auto 0;
  color: var(--sw-ink-soft);
  font-size: clamp(1rem, 1.7vw, 1.15rem);
}
.outro__link {
  display: inline-flex; align-items: center; gap: 18px;
  margin-top: clamp(40px, 6vw, 60px);
  padding: 21px 44px;
  border: 1px solid rgba(243, 237, 227, .3);
  color: var(--sw-ink); text-decoration: none;
  font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.outro__link svg { display: block; transition: transform .3s ease; }
.outro__link:hover {
  background: var(--sw-accent); border-color: var(--sw-accent); color: var(--sw-bg);
}
.outro__link:hover svg { transform: translateX(6px); }
.outro__link:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 4px; }
@media (max-width: 560px) {
  .outro__link { width: 100%; justify-content: center; padding: 20px 24px; }
}

.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px;
  max-width: var(--max); margin: 0 auto;
  padding: 34px clamp(18px, 5vw, 64px);
  padding-bottom: calc(34px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sw-ink-soft);
}
.foot__brand { font-family: var(--sw-font-display); letter-spacing: .26em; color: var(--sw-ink); }
.foot__links { display: flex; gap: clamp(14px, 2.4vw, 30px); }
.foot__links a { color: var(--sw-ink-soft); text-decoration: none; transition: color .25s; }
.foot__links a:hover { color: var(--sw-accent); }

/* ── Visionneuse ───────────────────────────────────────────────────────── */
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(5, 5, 4, .96);
  padding: clamp(50px, 8vh, 90px) clamp(50px, 8vw, 110px);
  opacity: 0; transition: opacity .28s ease;
}
.lb.is-open { opacity: 1; }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lb__close, .lb__nav {
  position: absolute; border: 0; background: transparent; cursor: pointer;
  color: var(--sw-ink-soft); line-height: 1;
  transition: color .2s, transform .2s;
}
.lb__close:hover, .lb__nav:hover { color: var(--sw-accent); }
.lb__close { top: clamp(14px, 3vh, 30px); right: clamp(16px, 3vw, 34px); font-size: 2.4rem; }
.lb__nav { top: 50%; transform: translateY(-50%); font-size: clamp(2.6rem, 6vw, 4rem); padding: 10px 16px; }
.lb__nav--prev { left: clamp(4px, 1.6vw, 22px); }
.lb__nav--next { right: clamp(4px, 1.6vw, 22px); }
body.lb-open { overflow: hidden; }

@media (max-width: 640px) {
  .foot { justify-content: center; text-align: center; }
  .lb { padding: 70px 12px; }
}