/* Bonjour Lama · un lever de soleil sur l'Himalaya.
   Le texte flotte dans le ciel du matin, la page repose sur la neige.
   Référence : design system Bonjour Lama. Accessibilité visée : WCAG 2.2 niveau AA.
   Les couleurs, polices, tailles, espacements et rayons viennent de assets/ds/tokens.css,
   chargé avant cette feuille : ne réécrivez pas leurs valeurs ici (voir CLAUDE.md).
   Police Luciole © Laurent Bourcellier & Jonathan Fabreguettes, licence CC BY 4.0
   (https://creativecommons.org/licenses/by/4.0/), hébergée avec le site. */

:root {
  color-scheme: light dark;
  --etoiles-opacite: 0; /* étoiles cachées en clair, visibles en sombre (composant Horizon) */
}
@media (prefers-color-scheme: dark) {
  :root { --etoiles-opacite: .8; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant-police);
  font-size: var(--courant-taille);
  line-height: var(--courant-interligne);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--rayon-s); }
:focus:not(:focus-visible) { outline: none; }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(var(--espace-4), 5vw, var(--espace-7));
}

/* Lien d'évitement : invisible jusqu'à ce qu'il reçoive le focus clavier. */
.skip {
  position: absolute;
  top: var(--espace-2);
  left: var(--espace-2);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .62em 1.05em;
  border-radius: var(--rayon-pilule);
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-family: var(--bouton-police);
  font-size: var(--bouton-taille);
  line-height: var(--bouton-interligne);
  font-weight: var(--bouton-graisse);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.label {
  font-family: var(--etiquette-police);
  font-size: var(--etiquette-taille);
  font-weight: var(--etiquette-graisse);
  letter-spacing: var(--etiquette-lettrage);
  line-height: var(--etiquette-interligne);
  text-transform: uppercase;
  color: var(--texte-soleil);
  margin: 0 0 var(--espace-2);
}
h1, h2, h3 { text-wrap: balance; }
h2 {
  font-family: var(--titre-section-police);
  font-weight: var(--titre-section-graisse);
  font-size: var(--titre-section-taille);
  line-height: var(--titre-section-interligne);
  letter-spacing: var(--titre-section-lettrage);
  margin: 0 0 var(--espace-4);
}

/* ---------- Le ciel ---------- */
.site-header { position: relative; background: var(--ciel-haut); }
.site-header--page { background: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-bas) 100%); }
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-bas) 100%);
}
.stars {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 70%;
  opacity: var(--etoiles-opacite);
  pointer-events: none;
}
.stars circle { fill: var(--etoile); }
.hero-top {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3) var(--espace-4);
  padding-block: var(--espace-5);
}
/* Le lien du logo : zone cliquable de 44 px de haut au moins (l'image en fait 33 sur mobile),
   sans changer la mise en page. */
.logo { display: inline-block; padding-block: var(--espace-2); margin-block: calc(-1 * var(--espace-2)); line-height: 0; border-radius: var(--rayon-s); }
.logo img { display: block; width: clamp(180px, 21vw, 230px); height: auto; }
.hero-body {
  position: relative;
  padding-block: clamp(var(--espace-6), 7vw, var(--espace-8)) 0;
}
.kicker {
  font-family: var(--etiquette-police);
  font-size: var(--etiquette-taille);
  font-weight: var(--etiquette-graisse);
  letter-spacing: var(--etiquette-lettrage);
  line-height: var(--etiquette-interligne);
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 var(--espace-2);
}
h1 {
  font-size: var(--accroche-taille);
  line-height: var(--accroche-interligne);
  margin: 0 0 var(--espace-5);
  font-weight: 400;
}
h1 .world {
  display: block;
  font-family: var(--accroche-police);
  font-weight: var(--accroche-graisse);
  letter-spacing: var(--accroche-lettrage);
}
h1 .lama {
  display: block;
  font-family: var(--lama-police);
  font-size: var(--lama-taille);
  line-height: var(--lama-interligne);
  font-style: var(--lama-style);
  font-weight: var(--lama-graisse);
  letter-spacing: var(--lama-lettrage);
}
.lede {
  font-family: var(--chapo-police);
  font-size: var(--chapo-taille);
  line-height: var(--chapo-interligne);
  max-width: 36ch;
  margin: 0;
}
.lede strong { font-weight: 700; }

.follow { margin-top: var(--espace-6); }
.socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
}

/* ---------- Boutons (Bouton principal et Bouton secondaire du design system) ---------- */
/* Cibles de 44 px de haut au moins : confortables au doigt. */
.boutons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
}
.bouton-secondaire {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 0 .5em;
  min-height: 44px;
  padding: .62em 1.05em;
  border: 1px solid var(--texte);
  border-radius: var(--rayon-pilule);
  color: var(--texte);
  text-decoration: none;
  font-family: var(--bouton-police);
  font-size: var(--bouton-taille);
  line-height: var(--bouton-interligne);
  font-weight: var(--bouton-graisse);
  transition: transform .2s ease;
}
.bouton-secondaire:hover { transform: translateY(-2px); }
.bouton-secondaire:hover .bouton-libelle { text-decoration: underline; text-underline-offset: .18em; }
.bouton-detail { font-weight: 400; opacity: .78; }
.du-jour { margin-top: var(--espace-6); }
.bouton,
.socials a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 0 .5em;
  min-height: 44px;
  padding: .62em 1.05em;
  border: 1px solid var(--bouton-fond); /* visible en mode contraste élevé */
  border-radius: var(--rayon-pilule);
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  text-decoration: none;
  font-family: var(--bouton-police);
  font-size: var(--bouton-taille);
  line-height: var(--bouton-interligne);
  font-weight: var(--bouton-graisse);
  transition: transform .2s ease;
}
.bouton:hover, .socials a:hover { transform: translateY(-2px); }
.bouton:hover .bouton-libelle, .socials a:hover .net { text-decoration: underline; text-underline-offset: .18em; }
.socials .handle { font-weight: 400; opacity: .78; }

.horizon {
  position: relative;
  height: clamp(150px, 24vw, 320px);
  margin-top: clamp(var(--espace-5), 5vw, var(--espace-7));
}
.horizon svg {
  position: absolute;
  inset: 0 0 -1px 0;
  width: 100%;
  height: calc(100% + 1px);
  display: block;
}
/* Position, taille et lever du soleil : ceux du composant Horizon du design system. */
.sun {
  position: absolute;
  right: 15%;
  bottom: 36%;
  width: clamp(92px, 15vw, 200px);
  aspect-ratio: 1;
  border-radius: var(--rayon-rond);
  background: radial-gradient(circle at 50% 42%, var(--soleil-coeur) 0%, var(--soleil) 72%);
  box-shadow: 0 0 90px 30px var(--halo);
  animation: rise 2.8s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes rise { from { transform: translateY(30%); } }
.ridge-far { fill: var(--crete-loin); }
.ridge-mid { fill: var(--crete-milieu); }
.ridge-near { fill: var(--crete-pres); }
.ridge-front { fill: var(--fond); }

/* ---------- La neige ---------- */
main:focus { outline: none; }
.section { padding-block: clamp(var(--espace-8-mobile), 9vw, var(--espace-8)); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--espace-5), 6vw, var(--espace-8));
  align-items: start;
}
.pull {
  margin: var(--espace-5) 0 0;
  font-family: var(--citation-police);
  font-style: var(--citation-style);
  font-weight: var(--citation-graisse);
  font-size: var(--citation-taille);
  line-height: var(--citation-interligne);
  letter-spacing: var(--citation-lettrage);
}
.prose p { margin: 0 0 var(--espace-5); max-width: 60ch; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- Le Zénomètre expliqué (composant Zenometre du design system) ---------- */
/* Les pictos sont masqués aux lecteurs d'écran : la légende en toutes lettres porte la note. */
.echelle { list-style: none; margin: var(--espace-5) 0 0; padding: 0; display: grid; gap: var(--espace-5); }
.echelle .zeno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
  margin: 0 0 var(--espace-1);
}
.zeno-pictos { display: inline-flex; align-items: center; gap: var(--espace-1); }
/* « Zénitude : à suivre » : le libellé, sans pictos, comme sur la page d'une édition. */
.zeno-titre {
  font-family: var(--legende-police);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  font-weight: var(--legende-graisse);
  white-space: nowrap;
}
.zeno img { display: block; }
.zeno-zero img { flex: none; }
.zeno-vide { opacity: .25; }
.zeno-legende {
  font-family: var(--legende-police);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  font-weight: var(--legende-graisse);
  color: var(--texte-doux);
  white-space: nowrap;
}

.final {
  background: linear-gradient(180deg, var(--fond) 0%, var(--ciel-bas) 100%);
  padding-block: clamp(var(--espace-8-mobile), 9vw, var(--espace-8));
}
.final h2 {
  font-family: var(--titre-final-police);
  font-weight: var(--titre-final-graisse);
  font-size: var(--titre-final-taille);
  line-height: var(--titre-final-interligne);
  letter-spacing: var(--titre-final-lettrage);
  margin-bottom: var(--espace-3);
  max-width: 18ch;
}
.final .lead {
  font-family: var(--chapo-police);
  font-size: var(--chapo-taille);
  line-height: var(--chapo-interligne);
  max-width: 40ch;
  margin: 0;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-2) var(--espace-5);
  padding-block: var(--espace-5) var(--espace-6);
  border-top: 1px solid var(--trait-ciel);
  font-family: var(--legende-police);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  font-weight: var(--legende-graisse);
  color: var(--texte-doux);
}
.site-footer--sky { background: var(--ciel-bas); }
.site-footer--page { margin-top: clamp(var(--espace-8-mobile), 9vw, var(--espace-8)); }
.footer p { margin: 0; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espace-1) var(--espace-5); }
/* Liens du pied de page : zone cliquable de 44 px de haut sans changer la mise en page. */
.footer a { color: inherit; display: inline-block; padding-block: var(--espace-3); margin-block: calc(-1 * var(--espace-3)); }

/* ---------- Pages de texte (mentions légales, accessibilité) ---------- */
.doc { max-width: 60ch; }
.doc h1 {
  font-family: var(--titre-section-police);
  font-weight: var(--titre-section-graisse);
  font-size: var(--titre-section-taille);
  line-height: var(--titre-section-interligne);
  letter-spacing: var(--titre-section-lettrage);
  margin: 0 0 var(--espace-5);
}
.doc h2 {
  font-family: var(--titre-info-police);
  font-weight: var(--titre-info-graisse);
  font-size: var(--titre-info-taille);
  line-height: var(--titre-info-interligne);
  letter-spacing: var(--titre-info-lettrage);
  margin: var(--espace-6) 0 var(--espace-2);
}
.doc p, .doc ul { margin: 0 0 var(--espace-4); }
.doc li { margin-bottom: var(--espace-2); }
.doc .updated {
  font-family: var(--legende-police);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  color: var(--texte-doux);
}

/* ---------- Pages d'abonnement (formulaire de Keila et pages du double opt-in) ---------- */
/* Le ciel et l'Horizon de l'accueil, avec un titre de page au lieu de l'accroche. */
.hero--page h1 {
  font-family: var(--titre-final-police);
  font-weight: var(--titre-final-graisse);
  font-size: var(--titre-final-taille);
  line-height: var(--titre-final-interligne);
  letter-spacing: var(--titre-final-lettrage);
  max-width: 18ch;
}
.hero--page .lede { max-width: 40ch; }
.suite { max-width: 52ch; margin: var(--espace-4) 0 0; }
.inscription {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-4);
  max-width: 34rem;
  margin-top: var(--espace-6);
}
.champ { display: flex; flex-direction: column; gap: var(--espace-2); width: 100%; }
.champ label { font-weight: 700; }
.champ input {
  width: 100%;
  min-height: 48px;
  padding: .55em .8em;
  border: 1px solid var(--texte-doux); /* contraste de 3:1 au moins avec le fond, dans les deux thèmes */
  border-radius: var(--rayon-s);
  background: var(--fond-carte);
  color: var(--texte);
  font: inherit;
}
.note {
  max-width: min(60ch, 100%); /* une adresse e-mail trop longue passe à la ligne */
  margin: 0;
  font-family: var(--petit-police);
  font-size: var(--petit-taille);
  line-height: var(--petit-interligne);
}
.captcha { min-height: 78px; } /* la place du CAPTCHA, réservée avant son chargement */
button.bouton { cursor: pointer; appearance: none; }

/* ---------- Adaptations ---------- */
@media (max-width: 760px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .sun { right: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bouton:hover, .bouton-secondaire:hover, .socials a:hover { transform: none; }
}
/* Mode contraste élevé (Windows) : on laisse les couleurs du système. */
@media (forced-colors: active) {
  .bouton, .bouton-secondaire, .socials a { border-color: LinkText; }
  .sun, .stars { display: none; }
}
@media print {
  .hero, .final { background: none; }
  .horizon, .stars, .skip { display: none; }
  .bouton, .socials a { background: none; color: inherit; border: 1px solid; }
}