/* =============================================================================
   BASE — reset, typographie, accessibilité
   ========================================================================== */

/* --- Polices auto-hébergées -------------------------------------------------
   Alice (titres) et Bree Serif (citations) sont servies depuis assets/fonts/ et
   non plus depuis fonts.googleapis.com. Un chargement depuis Google transmet
   l'adresse IP du visiteur à un tiers dès l'ouverture de la page, avant tout
   consentement — l'auto-hébergement supprime purement et simplement cet appel.
   Les fichiers sont les sous-ensembles latin / latin-ext officiels, placés sous
   licence SIL Open Font 1.1 (voir OFL-Alice.txt et OFL-BreeSerif.txt), qui
   autorise explicitement la redistribution. Le rendu est identique.          */
@font-face {
  font-family: 'Alice';
  src: url('../fonts/alice-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alice';
  src: url('../fonts/alice-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bree Serif';
  src: url('../fonts/bree-serif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bree Serif';
  src: url('../fonts/bree-serif-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Garet : police propriétaire, non distribuée ----------------------------
   Garet est sous licence commerciale : ses fichiers ne figurent pas dans ce
   dépôt. Les déclarations `@font-face` sont donc COMMENTÉES — actives, elles
   déclenchaient deux requêtes 404 à chaque chargement de page, puisque le
   navigateur télécharge la première police de la pile dès qu'elle est déclarée.
   La pile de repli (Avenir Next → Century Gothic → system-ui) s'applique sans
   décalage de mise en page.

   POUR ACTIVER GARET : déposez Garet-Book.woff2 et Garet-Heavy.woff2 dans
   assets/fonts/, puis retirez les marqueurs de commentaire ci-dessous.

@font-face {
  font-family: 'Garet';
  src: url('../fonts/Garet-Book.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Garet';
  src: url('../fonts/Garet-Heavy.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
*/

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

/* `hidden` doit primer sur tout display: sans cela, un bloc en grid/flex
   reste visible alors que le HTML ou le JS le déclare masqué. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Halos lumineux de fond : donne de la profondeur sans image. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 82% -8%, rgba(168,207,224,.42), transparent 62%),
    radial-gradient(44rem 34rem at -8% 22%, rgba(220,238,244,.75), transparent 60%),
    radial-gradient(50rem 38rem at 50% 108%, rgba(168,207,224,.30), transparent 65%);
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--navy-900);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--steel-500); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-700); }

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Pas de fond par défaut sur les images : il teintait le logo détouré.
   La couleur d'attente est portée par les conteneurs de photos. */
img { background-color: transparent; }

ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* --- Focus visible : contraste élevé, jamais supprimé ---------------------- */
:focus-visible {
  outline: 3px solid var(--steel-500);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* --- Utilitaires ----------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.section { padding-block: var(--section-y); position: relative; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--navy-900);
  color: #fff;
  padding: .8rem 1.4rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 0; color: #fff; }

/* --- En-têtes de section --------------------------------------------------- */
.section-head { max-width: 62ch; margin-bottom: var(--gap-lg); }
.section-head.is-centered { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}
.is-centered .eyebrow::before { display: none; }

.section-head p { color: var(--ink-soft); font-size: var(--t-lg); }

/* --- Apparition au défilement ---------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --- État vide : élégant, honnête, jamais un contenu inventé ---------------- */
.empty-state {
  display: grid;
  gap: .7rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.4rem);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
  background: rgba(255,255,255,.55);
  color: var(--ink-soft);
}
.empty-state__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--ice-50);
  color: var(--steel-500);
}
.empty-state strong { color: var(--navy-800); font-family: var(--font-title); font-size: var(--t-lg); }
.empty-state p { font-size: var(--t-sm); max-width: 48ch; margin: 0; }

/* --- Emplacement de donnée non renseignée ---------------------------------- */
.todo {
  display: inline-block;
  padding: .06em .5em;
  border-radius: var(--r-xs);
  background: repeating-linear-gradient(135deg, var(--ice-50) 0 7px, #E7F3F8 7px 14px);
  border: 1px dashed var(--steel-300);
  color: var(--ink-soft);
  font-size: .86em;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* --- Message éphémère ------------------------------------------------------ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  transform: translate(-50%, 16px);
  z-index: 180;
  max-width: min(92vw, 30rem);
  padding: .85rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--navy-900);
  color: #fff;
  font-size: var(--t-sm);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }