/* ===========================================================================
   light-and-fire.com — fondations partagées par toutes les pages
   ---------------------------------------------------------------------------
   Jetons, polices, coquille (en-tête, pied), wordmark. Ce qui est propre à une
   page reste dans son <style> à elle. Aucun build step, aucune origine externe.
   Le monde visuel est « La Veillée », hérité de DESIGN.md, étendu pour le web
   par la photographie et la composition éditoriale.
   =========================================================================== */

/* ---------- POLICES ----------
   Les mêmes fichiers que l'app (www/fonts). Inter est variable : un fichier
   couvre 400 à 700. latin-ext porte un unicode-range et n'est récupéré que si
   un caractère de sa plage apparaît vraiment. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/inter-var-latin.woff2') format('woff2');
  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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/inter-var-latin-ext.woff2') format('woff2');
  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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  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;}

/* ---------- JETONS ----------
   Deux niveaux de filet, et la distinction est de principe : --line décore et
   sépare (1.31:1, volontairement à la limite du visible) ; --line-int
   identifie ce qu'on peut toucher (3.05:1, le seuil de WCAG 1.4.11). */
:root{
  --nuit:#0B0B0A; --nuit-doux:#151513;
  --line:#272723; --line-int:#5F5F55;
  --cendre:#8C8C86; --parch-att:#C7C6C0; --ink:#F5F4F0; --ink-presse:#E8E7E2;
  --noyau:#FF7A1A; --couronne:#FFA542; --halo:#FFC93C;
  --etoile:#FFD23F; --geante:#E63946;

  --fs-micro:.6875rem; --fs-caption:.78125rem; --fs-small:.875rem;
  --fs-body:1rem; --fs-title:1.125rem; --fs-title-lg:1.375rem;
  --fs-headline:clamp(1.5rem,3.2vw,1.875rem);
  --fs-display:clamp(1.875rem,4.6vw,3rem);

  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Inter',system-ui,-apple-system,sans-serif;

  --page:1180px;
  --read:64ch;
  --gut:clamp(20px,4vw,52px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--nuit);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:2px;
}

.wrap{max-width:var(--page);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* Lien d'évitement — la page est longue, le clavier ne doit pas la traverser. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  display:inline-flex;align-items:center;min-height:44px;padding:12px 18px;
  background:var(--ink);color:var(--nuit);font-family:var(--mono);
  font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none}
.skip:focus{left:var(--gut);top:10px}

/* ---------- CIBLES TACTILES ----------
   Aucune cible sous 44pt. Quand le dessin exige un contrôle plus menu, un
   pseudo-élément transparent porte la surface tactile au minimum plutôt que de
   grossir le visuel — c'est la règle de DESIGN.md, appliquée telle quelle. */
.wm,.lang a,.foot-nav a{position:relative}
.wm::after,.lang a::after,.foot-nav a::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%);
}

/* ---------- WORDMARK ----------
   La Règle du Wordmark Bicolore : « Light » en Étoile Fixe, l'esperluette en
   Cendre, « Fire » en Géante Rouge. Fixe, jamais recoloré, purement
   typographique — pas de pictogramme. */
.wm{font-family:var(--mono);font-size:var(--fs-body);letter-spacing:.14em;
  text-transform:uppercase;font-weight:400;white-space:nowrap;text-decoration:none}
.wm i{font-style:normal;color:var(--etoile)}
/* L'esperluette porte <em> comme dans l'app : <s> signifie « plus exact » et
   certains lecteurs d'écran l'annoncent comme tel. */
.wm .amp{font-style:normal;color:var(--cendre)}
.wm b{font-weight:400;color:var(--geante)}

/* ---------- EN-TÊTE ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--nuit);
  border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:60px;padding-block:12px}
.top-sp{flex:1}

.lang{display:flex;gap:6px;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.08em;text-transform:uppercase}
.lang a,.lang span{padding:7px 11px;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;color:var(--cendre);transition:color .15s,border-color .15s}
.lang [aria-current]{color:var(--ink);border-color:var(--etoile)}
@media (hover:hover){.lang a:hover{color:var(--ink);border-color:var(--ink)}}
.lang a:active{color:var(--ink);border-color:var(--ink)}

/* La pastille « bientôt ». Volontairement PAS une imitation du badge officiel
   Apple : afficher le vrai badge pour une app qu'on ne peut pas télécharger
   induirait en erreur. Il prendra cette place au lancement. */
.soon{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;
  border:1px solid var(--line-int);border-radius:999px;font-family:var(--mono);
  font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--parch-att);white-space:nowrap}
.soon::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--noyau);flex:none}
.soon em{font-style:normal;color:var(--cendre)}
/* L'action principale ne se cache pas au téléphone : elle se raccourcit.
   Seuls les mots qui se déduisent tombent. */
/* Deux libellés complets plutôt qu'une phrase découpée : découper laissait
   une espace parasite au milieu (« sur l' App Store »). */
.soon-short{display:none}
@media (max-width:760px){
  .top .soon{padding:9px 12px;gap:7px}
  .top .soon .soon-long{display:none}
  .top .soon .soon-short{display:inline}
}

/* ---------- PIED ---------- */
.foot{border-top:1px solid var(--line);padding-block:34px 46px;margin-top:auto}
.foot-row{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;margin-bottom:26px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-nav a{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--cendre);text-decoration:none;padding:6px 0;
  transition:color .15s}
@media (hover:hover){.foot-nav a:hover{color:var(--ink)}}
.foot-nav a:active{color:var(--ink)}
/* Des crédits sont une phrase à lire : Inter, pas de mono (Règle du Mono
   Étiquette), et un contraste qui tient — Cendre sur Nuit ≈ 6.9:1. */
.credits{font-size:var(--fs-caption);line-height:1.7;color:var(--cendre);max-width:80ch}
.credits a{color:var(--parch-att)}

/* ---------- MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}