/* DEFCON ONE : styles communs à toutes les pages de la maquette (accueil, merch).
   Couleurs, base, typographie, boutons, barre de navigation, menu, pied de page. Chaque page ajoute ensuite les siens.
   Chargé par un <link> : fonctionne aussi en file://. */

/* ============================================================
   JETONS
   ============================================================ */
:root {
  --black: #000;
  --chalk: #E4E5DF;          /* blanc magnésie, adouci (était #EFF0EC, trop vif) : mat, jamais crème */
  --red: #D50101;            /* rouge exact du X du logo */
  --red-text: #FF5245;       /* rouge lisible en petit texte sur noir (erreurs) */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23E4E5DF' stroke-opacity='.6' stroke-width='1.4'/%3E%3C/svg%3E");
  --bg: var(--black);
  --fg: var(--chalk);
  --mute: rgba(228, 229, 223, .64);
  --line: rgba(228, 229, 223, .16);
  --hatch: rgba(228, 229, 223, .05);
  --gut: clamp(16px, 4.5vw, 64px);
  --max: 1360px;
  --nav-h: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
/* « Les lumières s'allument » : les progressions et « Nous rejoindre » éclairent tout l'écran en blanc magnésie.
   Le fond (--bg) est posé par le script, au rythme du défilement ; le texte bascule ici, au milieu de la transition. */
html[data-zone="chalk"] {
  --fg: #000;
  --mute: rgba(0, 0, 0, .64);
  --line: rgba(0, 0, 0, .16);
  --hatch: rgba(0, 0, 0, .05);
  --red-text: #B00000;       /* 6,5:1 sur le blanc magnésie */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23000' stroke-opacity='.6' stroke-width='1.4'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #3a3a3a transparent }
html.is-locked { overflow: hidden }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Archivo, system-ui, sans-serif;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: color .35s var(--ease);
}
img, svg, video { display: block; max-width: 100% }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px }
p { text-wrap: pretty }
::selection { background: var(--red); color: var(--chalk) }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px }
input, select, textarea, button { font: inherit; color: inherit }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto }
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 100; padding: .6rem 1rem;
  background: var(--chalk); color: #000; transform: translateY(-200%);
}
.skip:focus { transform: none }
/* Les photos passent en noir et blanc : le rouge reste le seul accent de couleur */
.bw { filter: grayscale(1) contrast(1.06) }
.bw-lift { filter: grayscale(1) contrast(1.04) brightness(1.35) }
.credit { margin: .5rem 0 0; font-size: .75rem; color: var(--mute) }

/* ============================================================
   TYPOGRAPHIE — une seule famille, Archivo, jouée sur sa largeur
   ============================================================ */
.display {
  margin: 0;
  font-stretch: 75%; font-weight: 800;
  font-size: clamp(3rem, 1.6rem + 6vw, 6rem);
  line-height: .9; letter-spacing: -.025em;
  text-wrap: balance;
}
.h2 {
  margin: 0;
  font-stretch: 75%; font-weight: 800;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
  line-height: .95; letter-spacing: -.02em;
  text-wrap: balance;
}
.h2-xl { font-size: clamp(2.8rem, 1.4rem + 5.6vw, 6.25rem) }
h3 { margin: 0; font-stretch: 87.5%; font-weight: 700; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); line-height: 1.1; letter-spacing: -.01em }
.intro { max-width: 58ch; margin: 1.25rem 0 0; color: var(--mute) }
.todo { color: var(--mute); font-style: italic }
.sec { padding-block: clamp(104px, 14vw, 200px); overflow-x: clip }

/* ============================================================
   BOUTONS ET LIENS
   ============================================================ */
/* Du relief comme une touche : une arête claire en haut, une base pleine plus sombre dessous, aucune ombre floue ni
   halo coloré. Le bouton monte d'un pixel au survol et s'enfonce sur sa base au clic. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.6rem;
  border: 0; border-radius: 6px;
  font-weight: 650; font-size: .9375rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-red {
  background: var(--red); color: var(--chalk);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 3px 0 #8A0000;
}
.btn-red:hover { background: #E30808; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 4px 0 #8A0000 }
.btn-red:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 0 #8A0000 }
/* Bouton secondaire : même forme, sans rouge (un seul rouge d'action à l'écran) */
.btn-ghost {
  color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 12%, transparent), 0 3px 0 color-mix(in srgb, var(--fg) 20%, transparent);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); border-color: color-mix(in srgb, var(--fg) 55%, transparent); transform: translateY(-1px) }
.btn-ghost:active { transform: translateY(2px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 8%, transparent), 0 1px 0 color-mix(in srgb, var(--fg) 20%, transparent) }
.link { font-weight: 500; text-decoration: underline; text-decoration-color: var(--line); transition: text-decoration-color .3s }
.link:hover { text-decoration-color: currentColor }

/* Case réservée (photos produits à fournir) */
.ph {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, var(--hatch) 0 1px, transparent 1px 13px),
    color-mix(in srgb, var(--fg) 3%, transparent);
  outline: 1px solid var(--line); outline-offset: -1px;
}
.ph > span { max-width: 32ch; padding: 1rem 1.25rem; text-align: center; font-size: .8125rem; line-height: 1.45; color: var(--mute) }
.ph > span b { display: block; margin-bottom: .3rem; color: var(--fg); font-weight: 600; font-size: .875rem }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 1.25rem;
  padding-inline: var(--gut);
  border-bottom: 1px solid transparent;
  transition: transform .5s var(--ease), border-color .35s var(--ease);
}
.nav.is-solid { background: var(--bg); border-color: var(--line) }
/* Cachée, la barre monte un peu plus que sa hauteur : la base de son bouton ne dépasse pas en haut de l'écran */
.nav.is-hidden { transform: translateY(calc(-100% - 32px)) }
.nav-logo { flex: none; margin-right: auto }
.nav-logo img { height: 46px; width: auto }
.nav-logo .dark { display: none }
html[data-zone="chalk"] .nav-logo .light { display: none }
html[data-zone="chalk"] .nav-logo .dark { display: block }
.nav-links { display: none; gap: 1.75rem; font-size: .9375rem }
.nav-links a { text-decoration: none; color: var(--mute); transition: color .3s }
.nav-links a:hover { color: var(--fg) }
.nav-cta { min-height: 42px; padding: 0 1.1rem; font-size: .875rem }
.js .nav-cta { opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s }
.js .nav.cta-on .nav-cta { opacity: 1; visibility: visible; transition-delay: 0s }
/* Menu (téléphone) : deux traits, le second plus court ; le mot « Menu » reste pour les lecteurs d'écran */
.nav-menu { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; cursor: pointer }
.nav-menu i { position: relative; display: block; width: 26px; height: 2px; margin-top: -8px; border-radius: 2px; background: currentColor }
.nav-menu i::after { content: ""; position: absolute; left: 8px; right: 0; top: 8px; height: 2px; border-radius: 2px; background: currentColor }
@media (min-width: 960px) {
  :root { --nav-h: 80px }
  .nav { gap: 2.25rem }
  .nav-logo img { height: 58px }
  .nav-links { display: flex }
  .nav-menu { display: none }
}
/* Menu ouvert : le logo et la croix en haut, les rubriques en liste numérotée et aérée, le bouton en bas */
.menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  padding: 0 var(--gut) calc(28px + env(safe-area-inset-bottom, 0px));
  background: #000; color: var(--chalk);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .6s var(--ease), visibility 0s linear .6s;
}
.menu.is-open { clip-path: inset(0); visibility: visible; transition-delay: 0s }
.menu-top { flex: none; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between }
.menu-top img { height: 46px; width: auto }
.menu-close { position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; cursor: pointer }
.menu-close i::before, .menu-close i::after { content: ""; position: absolute; left: 10px; right: 10px; top: 21px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg) }
.menu-close i::after { transform: rotate(-45deg) }
.menu nav { margin-top: clamp(20px, 5svh, 48px); border-top: 1px solid rgba(228, 229, 223, .14) }
.menu nav a {
  display: flex; align-items: baseline; gap: 16px; padding: 17px 0;
  border-bottom: 1px solid rgba(228, 229, 223, .14);
  font-stretch: 87.5%; font-weight: 700; font-size: clamp(1.55rem, 6.4vw, 2rem); line-height: 1.1; text-decoration: none;
}
.menu nav a span { width: 1.6rem; flex: none; font-stretch: 100%; font-size: .8125rem; font-weight: 500; color: rgba(228, 229, 223, .5); font-variant-numeric: tabular-nums }
.menu .btn { margin-top: auto; width: 100%; min-height: 56px; font-size: 1rem }
/* Les rubriques arrivent l'une après l'autre (état de départ seulement sous .fx) */
.fx .menu nav a, .fx .menu .btn { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease), background-color .25s, box-shadow .25s }
.fx .menu.is-open nav a, .fx .menu.is-open .btn { opacity: 1; transform: none }
.fx .menu.is-open nav a:nth-child(1) { transition-delay: .12s } .fx .menu.is-open nav a:nth-child(2) { transition-delay: .17s }
.fx .menu.is-open nav a:nth-child(3) { transition-delay: .22s } .fx .menu.is-open nav a:nth-child(4) { transition-delay: .27s }
.fx .menu.is-open nav a:nth-child(5) { transition-delay: .32s } .fx .menu.is-open .btn { transition-delay: .4s }

/* ============================================================
   PIED DE PAGE
   ============================================================ */
/* Le pied de page porte son propre fond noir, sur toutes les pages : la dernière section claire reste claire jusqu'à lui */
.foot {
  --bg: #000; --fg: var(--chalk); --mute: rgba(228, 229, 223, .64); --line: rgba(228, 229, 223, .16);
  padding-block: clamp(64px, 9vw, 120px) 32px; background: #000; color: var(--chalk);
}
.foot-grid { display: grid; gap: 40px }
.foot-logo { height: 48px; width: auto }
.foot-grid > div > p { margin: 1.25rem 0 0; color: var(--mute); max-width: 32ch }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; align-content: start }
.foot a { color: var(--mute); text-decoration: none; transition: color .3s }
.foot a:hover { color: var(--fg) }
.foot-bottom { margin-top: 64px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; font-size: .8125rem; color: var(--mute) }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr } }

/* ============================================================
   MERCH — les fiches produit (accueil et page Merch) et le panier de la barre
   Les visuels sont détourés (outils/habits.py) : le vêtement se pose directement sur le blanc de la page, sans case
   ni bordure. Leurs couleurs sont calculées pour ce blanc-là (--chalk).
   ============================================================ */
.carte { position: relative; min-width: 0 }
.carte-lien { display: block; color: inherit; text-decoration: none }
.carte-photo { position: relative; aspect-ratio: 1 }
.carte-photo img { position: relative; width: 100%; height: 100%; object-fit: contain }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx) .carte-photo img { transition: transform .8s var(--ease) }
  html:not(.fx) .carte-lien:hover .carte-photo img { transform: scale(1.04) }
}
.carte-lien:focus-visible { outline-offset: 6px }
/* Relief (relief.js) : au survol, ou sous le doigt, le vêtement se soulève et s'incline vers le pointeur ; son ombre
   (sa silhouette, floutée) reste au sol, décalée. Pas de menu d'appui long sur iPhone : il couperait le geste. */
.fx .carte-photo { perspective: 900px }
.fx .carte-lien { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none }
.carte-ombre { position: absolute; inset: 0; background: center / contain no-repeat; opacity: 0; pointer-events: none }
.carte-nom { margin: .85rem 0 0; font-stretch: 100%; font-weight: 600; font-size: 1rem; line-height: 1.25; letter-spacing: 0 }
.carte-nom span { display: block; margin-top: .1rem; font-weight: 450; color: var(--mute) }
.carte-prix { margin: .4rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums }
.carte-prix.is-avenir { font-weight: 450; color: var(--mute) }
/* Le panier de la barre : un sac et le nombre d'articles (pas de rouge : le rouge reste à l'action) */
.nav-cart { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; text-decoration: none }
.nav-cart svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round }
.nav-cart b { position: absolute; top: 3px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--fg); color: var(--bg); font-size: .6875rem; font-weight: 700; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums }
.nav-cart[data-vide] b { display: none }