/* Feuille de style d'adrienicolo.com, commune à toutes les pages.
 *
 * La STRUCTURE est celle de matteoth.com — la marque à gauche, la barre à
 * droite —, la DA est celle de la page Beacons d'Adrien, relevée dans DA.md :
 * noir, gris et blanc, AUCUNE autre couleur. La typographie, elle, ne vient
 * pas de Beacons : General Sans en capitales serrées pour les titres,
 * Satoshi pour le texte. Les pages sont vides à dessein : le contenu
 * viendra d'Adrien, pas d'une copie de sa page Beacons.
 */

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

:root {
  --fond: #101010;        /* mesuré sur la page Beacons */
  --blanc: #f3f3f3;       /* les titres sur le fond : 16,9:1 */
  --gris-doux: #a6a6a6;   /* le texte secondaire sur le fond : 7,9:1 */
  --carte: #8a8a8a;       /* le gris des cartes */
  --encre: #000000;       /* le texte sur carte : 6,9:1 */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

/* Le fond du DOCUMENT et pas seulement celui du body : c'est lui que Safari
   montre quand on tire la page au-delà de son bord. */
html { -webkit-text-size-adjust: 100%; background-color: var(--fond); }
body {
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--fond);
  color: var(--blanc);
  font-family: "Satoshi", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* ============================================================
   FOND — la pièce sombre, le grain, les rayures de pellicule
   ============================================================ */
/* La page Beacons pose une photo noir et blanc derrière tout ; on n'en a
   pas le fichier. Le décor la remplace par ce qu'elle donne à voir — une
   lumière froide qui tombe d'en haut dans le noir, du grain, des rayures. */
.fond {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 30% 0%, rgba(255, 255, 255, 0.10), transparent 70%),
    radial-gradient(50% 40% at 85% 35%, rgba(255, 255, 255, 0.05), transparent 70%),
    radial-gradient(70% 60% at 10% 90%, rgba(255, 255, 255, 0.04), transparent 70%);
}
/* Grain : sans lui, les dégradés se découpent en paliers sur le noir. */
.grain {
  position: fixed; inset: 0; pointer-events: none;
  opacity: 0.14; 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");
}
/* Rayures et poussières blanches. Un seul motif de 600 px qui se répète : à
   cette taille, l'œil ne retrouve pas la répétition. */
.rayures {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg stroke='%23fff' stroke-linecap='round' fill='none'%3E%3Cpath d='M40 80l26 30' stroke-width='1.2'/%3E%3Cpath d='M410 40l38 26' stroke-width='1'/%3E%3Cpath d='M520 300l18 40' stroke-width='1.4'/%3E%3Cpath d='M120 420l50 24' stroke-width='.9'/%3E%3Cpath d='M300 520l14 30' stroke-width='1.2'/%3E%3Cpath d='M260 200l6 18' stroke-width='1'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='200' cy='130' r='1.2'/%3E%3Ccircle cx='470' cy='180' r='1'/%3E%3Ccircle cx='80' cy='300' r='1.4'/%3E%3Ccircle cx='350' cy='360' r='.9'/%3E%3Ccircle cx='560' cy='500' r='1.2'/%3E%3Ccircle cx='30' cy='560' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   EN-TÊTE — la marque à gauche, la barre à droite (comme matteoth.com)
   ============================================================ */
.entete {
  position: relative; z-index: 2;
  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));
}
.marque {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: "General Sans", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.03em;
  color: var(--blanc); text-decoration: none;
}

.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-family: "General Sans", sans-serif; font-weight: 600; font-size: 0.88rem; letter-spacing: -0.01em;
  color: rgba(243, 243, 243, 0.62); text-decoration: none;
  border: 2px solid transparent;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.barre a:hover { color: var(--blanc); }
/* aria-current : la page ouverte ne se signale pas qu'en couleur — elle
   prend la pilule grise des cartes Beacons, avec leur liseré noir. */
.barre a[aria-current="page"] { color: var(--encre); background: var(--carte); border-color: var(--encre); }
.barre a:focus-visible { outline: 3px solid var(--blanc); outline-offset: 3px; }

/* ============================================================
   PAGE — le titre, et rien d'autre pour l'instant
   ============================================================ */
.ouverture {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(56px, 12vh, 120px) 20px 0;
}
.titre-page {
  font-family: "General Sans", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.92;
  font-size: clamp(2.4rem, 9vw, 4.5rem); text-wrap: balance;
  animation: monte 1s var(--ease) both;
}

.fin { padding: 80px 20px 44px; text-align: center; font-size: 12px; color: var(--gris-doux); position: relative; z-index: 1; }

@media (max-width: 520px) {
  .marque { font-size: 0.92rem; }
  .barre a { padding: 10px 11px; font-size: 0.84rem; }
}

@keyframes monte { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .titre-page { animation: none; }
  .barre a { transition: none; }
}