/* La page Aulne, dans la DA d'Aulne — la version VALIDÉE par Thomas pour
 * ses visuels (fond marine lumineux, gras serré, très peu de texte), pas
 * celle, plus sage, du livre de marque.
 *
 * Un premier écran, puis l'avant/après : un premier jet en cinq chapitres
 * a été jugé beaucoup trop long. Le nom, une accroche, les livrables en
 * pastilles. Pas de paragraphe, pas d'appel à l'action.
 */

@font-face {
  font-family: "Unbounded";
  src: url("/aulne/fonts/unbounded-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/aulne/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Les teintes de la charte d'Aulne, plus la « nuit » du bas du dégradé. */
:root {
  --nuit: #111C30;
  --marine: #1C2D4A;
  --indigo: #2C4468;
  --bleu: #3E5C8A;
  --sable: #C9B694;
  --creme: #F4EEE3;
}

/* Jamais de fond uni : la nuit monte vers le marine puis l'indigo. */
body {
  min-height: 100svh;
  background: linear-gradient(160deg, var(--nuit) 0%, var(--marine) 52%, var(--indigo) 100%);
  color: var(--creme);
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif; font-weight: 700;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; position: relative;
}

/* Halos flous qui dérivent lentement : bleu, sable, et un crème plus léger.
   Couches fixes ; le flou est dans le dégradé lui-même, pas dans un filter,
   que le téléphone découpe en tuiles sur une grande surface. */
.halo { position: fixed; border-radius: 50%; pointer-events: none; }
.halo.bleu  { width: 70vmax; height: 70vmax; left: -22vmax; top: -26vmax;
  background: radial-gradient(closest-side, rgba(62, 92, 138, 0.55), transparent); animation: derive 22s ease-in-out infinite alternate; }
.halo.sable { width: 60vmax; height: 60vmax; right: -24vmax; bottom: -28vmax;
  background: radial-gradient(closest-side, rgba(201, 182, 148, 0.30), transparent); animation: derive 26s ease-in-out infinite alternate-reverse; }
.halo.creme { width: 40vmax; height: 40vmax; left: 38%; top: 30%;
  background: radial-gradient(closest-side, rgba(244, 238, 227, 0.08), transparent); animation: derive 30s ease-in-out infinite alternate; }
@keyframes derive { to { transform: translate(6vmax, 4vmax) scale(1.08); } }

/* Grain léger, autour de 9 %. */
.grain {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- En-tête : le logo crème à gauche, la barre du site à droite ---------- */
.entete {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}
/* Le logo de la charte, jamais recomposé : seulement coloré en crème. */
svg.e, svg.w { display: block; fill: currentColor; }
.lock { display: inline-flex; align-items: center; gap: 0.32em; line-height: 1; font-size: 30px; color: var(--creme); text-decoration: none; }
/* Le logo est un lien : 44 px de haut, comme toute cible au doigt. */
a.lock { min-height: 44px; }
.lock svg.e { height: 1em; width: auto; }
.lock svg.w { height: 0.58em; width: auto; margin-top: 0.02em; }

.barre { display: flex; gap: 4px; flex-wrap: wrap; }
/* 44 px de haut : un onglet se rate au pouce comme un bouton. */
.barre a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 999px;
  font-size: 0.88rem; letter-spacing: 0.02em; text-decoration: none; color: rgba(244, 238, 227, 0.7);
  border: 1px solid transparent;
}
.barre a:hover { color: var(--creme); }
/* aria-current : la page ouverte ne se signale pas qu'en couleur. */
.barre a[aria-current="page"] { color: var(--creme); border-color: rgba(244, 238, 227, 0.22); background: rgba(244, 238, 227, 0.06); }

/* ---------- Le premier écran ---------- */
/* Il remplit la hauteur sous l'en-tête, et l'avant/après vient en
   dessous. svh et non vh : vh compte la barre d'adresse du téléphone. */
.ecran {
  position: relative; z-index: 1;
  min-height: calc(100svh - 82px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px max(20px, env(safe-area-inset-left)) 64px;
  text-align: center;
}

/* Unbounded en capitales, très gras et serré. Le reflet crème/sable reste
   dans les deux teintes claires : le titre ne passe jamais par une couleur
   illisible sur le marine. */
h1 {
  font-family: "Unbounded", "Arial Black", sans-serif; font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.06em; line-height: 0.95;
  font-size: clamp(2.3rem, 9vw, 7rem);
  background: linear-gradient(100deg, var(--creme) 0%, var(--creme) 35%, var(--sable) 50%, var(--creme) 65%, var(--creme) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: reflet 7s linear infinite, monte 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) both;
}
.accroche {
  margin-top: 18px; color: var(--sable);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem); letter-spacing: -0.01em;
  animation: monte 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) 0.12s both;
}

/* Les livrables, en pastilles : seul « texte » de la page après l'accroche. */
.livrables {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 760px; margin: 40px auto 0; list-style: none;
  animation: monte 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) 0.24s both;
}
.livrables li {
  padding: 10px 18px; border-radius: 999px;
  font-size: 0.95rem; letter-spacing: 0.02em;
  border: 1px solid rgba(244, 238, 227, 0.22);
  background: rgba(244, 238, 227, 0.06);
}

@keyframes reflet { to { background-position: -250% center; } }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 520px) {
  .lock { font-size: 24px; }
  .barre a { padding: 10px 11px; font-size: 0.84rem; }
  .livrables { gap: 8px; }
  .livrables li { padding: 9px 14px; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .halo, h1, .accroche, .livrables { animation: none; }
}