/* =============================================================================
   MÔNE — Réinitialisation, typographie, éléments natifs
   ========================================================================== */

/* --- Police auto-hébergée (RGPD + latence depuis Libreville) -------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-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;
}

/* --- Réinitialisation ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] { list-style: none; }

/*
  Le canevas : un aplat minéral uni. Les cartes s'en détachent par leur
  valeur, plus claire, et non par une ombre — c'est ce qui donne à l'écran son
  calme.
*/
body {
  min-height: 100dvh;
  background-color: var(--canevas);
  color: var(--anthracite);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Montserrat sans crénage optique paraît décousue sous 15 px. */
  font-kerning: normal;
  font-optical-sizing: auto;
}

img,
picture,
svg { max-width: 100%; display: block; }

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

/* --- Typographie ---------------------------------------------------------
   Règle optique : plus le corps grandit, plus l'interlettrage se resserre.
   Un H1 composé au même interlettrage que le corps de texte paraît toujours
   « tapé » et jamais « composé ». */
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-serre);
  letter-spacing: var(--ls-h1);
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: 1.3;
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: 1.4;
  letter-spacing: -.008em;
}

p { max-width: 72ch; }

a {
  color: var(--vert-foret);
  text-decoration-color: var(--vert-foret-16);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover { color: var(--terre-cuite-hover); text-decoration-color: var(--terre-cuite); }

strong { font-weight: 650; }

small,
.texte-petit {
  font-size: var(--fs-small);
  color: var(--gris-moyen);
}

.texte-secondaire { color: var(--gris-moyen); }

/*
  Micro-libellé. Le §10.4 en fait un composant, et tout gabarit généré en
  sème un au-dessus de chaque bloc — c'est le tic le plus reconnaissable de
  l'interface produite à la chaîne. Ici il ne sert qu'aux **clés de données**
  (en-tête de tableau, terme de liste de définitions, libellé de KPI), jamais
  d'ornement au-dessus d'un titre de section.
*/
.etiquette {
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gris-moyen);
}

/*
  Règle d'or comptable : les chiffres s'alignent, colonne par colonne.

  Nouveauté : ils passent en **chasse fixe**. Un matricule, un numéro de pièce
  et un montant se comparent caractère par caractère et se dictent au
  téléphone ; Montserrat, géométrique et large, rend le 1 quasi identique au I
  et le 0 au O. La pile est système, donc gratuite. Le `.96em` compense la
  hauteur d'œil supérieure des polices à chasse fixe : sans lui, un montant
  paraîtrait plus gros que le texte qui le précède.
*/
.chiffre,
.montant {
  font-family: var(--font-mono);
  font-size: .96em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.01em;
}

.montant { font-weight: 600; white-space: nowrap; }

/*
  `<code>` sert dans toute l'application à porter une **référence** : matricule,
  numéro de pièce, empreinte d'audit. Aucun fond ni cadre — dans une ligne de
  tableau dense, une pastille grise par référence transformerait la colonne en
  damier. La chasse fixe suffit à dire « ceci se recopie caractère par
  caractère ».
*/
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: .95em;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* --- Accessibilité -------------------------------------------------------
   Contour Terre Cuite imposé par le §10.3. On y ajoute un halo blanc : sur un
   aplat sombre — le rail de navigation — un contour terre cuite seul se noie. */
:focus-visible {
  outline: 2px solid var(--terre-cuite);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Le focus par clic ne doit pas dessiner de contour : il n'aide personne. */
:focus:not(:focus-visible) { outline: none; }

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

.lien-evitement {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  background: var(--vert-foret);
  color: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow-flottant);
  transform: translateY(-200%);
  transition: transform var(--transition-panneau);
}

.lien-evitement:focus {
  transform: translateY(0);
  color: var(--blanc);
}

/* --- Icônes -------------------------------------------------------------- */
/*
  Icônes Phosphor pleines (sprite components/icons.twig). Le tracé suit
  `currentColor` ; le calque de fond des icônes duotone prend
  `--icone-fond` (la couleur du tracé par défaut) à `--icone-fond-opacite`.
  Un composant qui veut une icône bicolore — tuile de tableau de bord,
  pastille de domaine — n'a qu'à redéfinir ces deux variables.
*/
.icone {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: currentColor;
  stroke: none;
}

.icone__fond {
  fill: var(--icone-fond, currentColor);
  opacity: var(--icone-fond-opacite, .22);
}

/* Sprite : présent dans le DOM, jamais peint. */
.sprite-icones { display: none; }

.icone--petite { width: 15px; height: 15px; }
.icone--grande { width: 24px; height: 24px; }

/* --- Utilitaires d'espacement --------------------------------------------
   La CSP interdit l'attribut `style` en ligne : tout écart de mise en page
   passe donc par une classe, jamais par du style attaché au balisage. */
.espace-haut-2 { margin-top: var(--sp-2); }
.espace-haut-3 { margin-top: var(--sp-3); }
.espace-haut-4 { margin-top: var(--sp-4); }
.espace-haut-5 { margin-top: var(--sp-5); }
.espace-bas-4  { margin-bottom: var(--sp-4); }
.pleine-largeur { width: 100%; }

/* --- Sélection ----------------------------------------------------------- */
::selection {
  background: var(--vert-foret);
  color: var(--blanc);
}

/* --- Barres de défilement discrètes -------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--filet-appuye) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--filet-appuye);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-pilule);
}

*::-webkit-scrollbar-thumb:hover { background-color: var(--gris-moyen); background-clip: content-box; }

/* --- Entrée en scène ----------------------------------------------------
   Un seul mouvement dans toute l'application, et il est motivé : à
   l'ouverture d'un écran, les blocs apparaissent dans l'ordre de lecture, ce
   qui indique la hiérarchie avant même que l'œil ait lu un mot. 14 px de
   translation, 380 ms, quatre paliers de retard, puis plus rien ne bouge.
   Aucune boucle infinie, aucun effet au défilement. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mone-entree {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  .entree,
  .contenu > .entete-page,
  .contenu > .section,
  .contenu > .grille,
  .contenu > .carte {
    animation: mone-entree 380ms cubic-bezier(.2, .8, .3, 1) both;
  }

  .contenu > .entete-page { animation-delay: 0ms; }
  .contenu > *:nth-child(2) { animation-delay: 40ms; }
  .contenu > *:nth-child(3) { animation-delay: 80ms; }
  .contenu > *:nth-child(4) { animation-delay: 120ms; }
  .contenu > *:nth-child(n + 5) { animation-delay: 150ms; }
}

/* --- Respect des préférences système ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Alpine.js : masque les blocs tant que le composant n'est pas initialisé. */
[x-cloak] { display: none !important; }