/* Reset minimal + patterns communs à toutes les maquettes */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  font-size: var(--t-corps);
  line-height: 1.65;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--font-titre); font-weight: 600; line-height: 1.12; }
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

/* Wordmark recomposé — utilisable sur toutes les pages */
.wm { font-family: var(--font-titre); font-weight: 400; letter-spacing: 0.045em; line-height: 1; }
.a-macron { position: relative; }
.a-macron::before {
  content: ""; position: absolute;
  top: 0.16em; left: 4%; right: 4%; height: 0.05em;
  background: currentColor;
}

/* Label capitales espacées — signature typographique du wordmark */
.label {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  letter-spacing: var(--lettre-label);
  text-transform: uppercase;
  color: var(--gris);
}

/* LA signature : le macron du ā devenu ligne d'horizon (spec §5) */
.regle-horizon {
  border: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  width: 72px;
  margin: 1.4rem 0;
}
.regle-horizon--centre { margin-inline: auto; }

.section { padding-block: var(--section-y); }
.contenu { width: min(100% - 3rem, 1080px); margin-inline: auto; }
.mesure { max-width: var(--mesure); }

/* Bouton unique du système — pas de variantes fantaisie */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  letter-spacing: var(--lettre-label);
  text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  border: 1px solid currentColor;
  border-radius: var(--rayon);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.btn--plein { background: var(--noir); border-color: var(--noir); color: var(--papier); }
.btn--corail { background: var(--corail-fonce); border-color: var(--corail-fonce); color: var(--papier); }
.btn::after { content: "→"; display: inline-block; margin-left: 0.6rem; transition: translate 0.25s ease; }
.btn:hover::after { translate: 5px 0; }
.btn--plein:hover { background: #000; }
.btn--corail:hover { background: var(--corail); border-color: var(--corail); }

/* Révélation au scroll — CSS pur (Chrome moderne), dégrade proprement ailleurs */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-up 0.8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
  }
}
@keyframes reveal-up {
  from { opacity: 0; translate: 0 36px; }
  to { opacity: 1; translate: 0 0; }
}

/* Grain photographique premium */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.055; mix-blend-mode: overlay;
}
.grain > * { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  .btn::after { transition: none; }
}

/* Focus visible au clavier (cahier des charges F1 : accessibilité de base) */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ————— Barre de navigation partagée (accueil, manifeste) ————— */
.barre-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap;
  width: min(100% - 3rem, 1080px); margin-inline: auto;
  padding-block: 1.6rem;
}
.barre-nav--fin { justify-content: flex-end; }
/* Le wordmark n'est pas un lien de nav : il garde sa serif et sa casse basse */
.barre-nav .wm {
  font-family: var(--font-titre);
  font-size: 1.5rem;
  letter-spacing: 0.045em;
  text-transform: none;
  text-decoration: none;
  color: inherit;
  opacity: 1;
}
.barre-nav ul { list-style: none; display: flex; align-items: baseline; gap: 1.7rem; flex-wrap: wrap; }
.barre-nav a, .barre-nav .inactif {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  letter-spacing: var(--lettre-label);
  text-transform: uppercase;
  text-decoration: none;
  color: currentColor;
  opacity: 0.72;
  transition: opacity .25s ease;
  /* cible tactile ≥ 24px */
  display: inline-block;
  padding-block: 0.45rem;
}
.barre-nav a:hover, .barre-nav a[aria-current="page"] { opacity: 1; }
.barre-nav .inactif i {
  font-style: normal; text-transform: none;
  letter-spacing: 0.02em; opacity: 0.8; margin-left: 0.45rem;
}
/* Mobile : les 3 entrées tiennent sur une ligne, centrées si elles passent à la ligne */
@media (max-width: 560px) {
  .barre-nav { padding-block: 1.2rem; gap: 0.8rem; }
  .barre-nav ul { width: 100%; justify-content: center; gap: 1.15rem; }
  .barre-nav a, .barre-nav .inactif { font-size: 0.72rem; letter-spacing: 0.1em; }
}

/* ————— Pied de page partagé ————— */
.pied { background: var(--noir); color: var(--papier); padding-block: 4rem 3rem; }
.pied-grille { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; }
.pied .wm { font-size: 1.7rem; color: var(--papier); text-decoration: none; }
.pied nav { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.pied nav a {
  color: color-mix(in srgb, var(--papier) 72%, transparent);
  text-decoration: none;
  font-size: var(--t-label);
  letter-spacing: var(--lettre-label);
  text-transform: uppercase;
  /* cible tactile ≥ 24px (WCAG 2.2) sans changer le rendu */
  display: inline-block;
  padding-block: 0.5rem;
}
.pied nav a:hover { color: var(--papier); }
.pied img { width: 34px; opacity: 0.85; }

/* Formulaire liste d'attente : 2 champs max (spec §3/§6) */
.form-attente { display: grid; gap: 0.8rem; max-width: 420px; }
.form-attente input {
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--gris-trait);
  border-radius: var(--rayon);
  background: var(--papier);
  color: var(--encre);
}
.form-attente input:focus { outline: 2px solid var(--corail); outline-offset: 1px; }
.microcopy { font-size: 0.8125rem; color: var(--gris); }