/* =====================================================================================================================
   Base du socle : remise à zéro, sombre forcé, styles de texte (Fonte.*), squelette d'application (ARCHITECTURE § 5),
   responsive (§ 6), zones sûres, focus visible, mouvement réduit, mode discret.
   À charger après jetons.css :  jetons.css → base.css → verre.css → composants.css
   ===================================================================================================================== */

/* ---------- remise à zéro ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html {
  color-scheme: dark;
  background: var(--couleur-fond);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100dvh;
  background: var(--couleur-fond-app, var(--couleur-fond));
  color: var(--couleur-texte);
  font: var(--graisse-normale) var(--taille-corps)/var(--interligne) var(--police-sans);
  font-synthesis: none;                 /* pas de faux gras ni de faux italique : l'app n'a ni 700 ni italique */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- styles de texte : Fonte.* (Theme.swift:91-133) ---------- */
.ak-texte-largeTitle  { font-size: var(--taille-grand-titre); line-height: var(--interligne); font-weight: 400; }
.ak-texte-title       { font-size: var(--taille-titre);       line-height: var(--interligne); font-weight: 400; }
.ak-texte-title2      { font-size: var(--taille-titre-2);     line-height: var(--interligne); font-weight: 400; }
.ak-texte-title3      { font-size: var(--taille-titre-3);     line-height: var(--interligne); font-weight: 400; }
.ak-texte-headline    { font-size: var(--taille-intertitre);  line-height: var(--interligne); font-weight: 500; } /* seul défaut medium */
.ak-texte-body        { font-size: var(--taille-corps);       line-height: var(--interligne); font-weight: 400; }
.ak-texte-callout     { font-size: var(--taille-legende-haute); line-height: var(--interligne); font-weight: 400; }
.ak-texte-subheadline { font-size: var(--taille-sous-titre);  line-height: var(--interligne); font-weight: 400; }
.ak-texte-footnote    { font-size: var(--taille-note);        line-height: var(--interligne); font-weight: 400; }
.ak-texte-caption     { font-size: var(--taille-legende);     line-height: var(--interligne); font-weight: 400; }
.ak-texte-caption2    { font-size: var(--taille-legende-2);   line-height: var(--interligne); font-weight: 400; }
.ak-texte-heros       { font-size: var(--taille-heros);       line-height: var(--interligne); font-weight: 500; }

/* graisses (Fonte.sans : regular 400, medium 500, semibold et au-delà 600) */
.ak-regular  { font-weight: 400; }
.ak-medium   { font-weight: 500; }
.ak-semibold { font-weight: 600; }

/* familles */
.ak-sans { font-family: var(--police-sans); }
.ak-mono { font-family: var(--police-mono); }
.ak-systeme { font-family: var(--police-systeme); }   /* composants système de l'app (SF Pro) */

/* couleurs de texte */
.ak-c-texte   { color: var(--couleur-texte); }
.ak-c-texte-2 { color: var(--couleur-texte-2); }
.ak-c-texte-3 { color: var(--couleur-texte-3); }
.ak-c-teinte  { color: var(--couleur-teinte); }
.ak-c-gain    { color: var(--couleur-gain); }
.ak-c-perte   { color: var(--couleur-perte); }
.ak-c-alerte  { color: var(--couleur-alerte); }

/* chiffre(style, poids = medium) : Plex a des chiffres de chasse fixe (600/1000 em) ; tabular-nums est sans risque */
.ak-chiffre { font-weight: 500; font-variant-numeric: tabular-nums; }
.ak-tabulaire { font-variant-numeric: tabular-nums; }
/* meta() : mono caption 12, regular, label3 */
.ak-meta { font: 400 var(--taille-legende)/var(--interligne) var(--police-mono); color: var(--couleur-texte-3); }

/* lineLimit(1) */
.ak-une-ligne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ak-deux-lignes { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ak-texte-long { line-height: var(--interligne-texte-long); }

/* accessibilité : texte lu mais invisible */
.ak-lecteur { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- squelette d'une application (ARCHITECTURE § 5) ---------- */
.ak-app {
  position: relative;
  min-height: 100dvh;
  isolation: isolate;
  background: var(--couleur-fond-app);
  color: var(--couleur-texte);
}
/* FondVivant : fixe, derrière tout, plein écran (zones sûres comprises) */
.ak-fond {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  display: block;
  max-width: none;
  background-color: var(--couleur-fond-app);
}
[data-espace="moniteur"] .ak-fond {
  /* trame de points du « studio froid » : pas de 22, premier point à (12, 12), diamètre 1,5, blanc 7 % */
  background-image: radial-gradient(circle at 12px 12px, rgba(255, 255, 255, 0.07) 0.75px, transparent 1.05px);
  background-size: 22px 22px;
  background-position: 0 0;
}
/* Pages : onglets gardés en mémoire, chacun son défilement. JAMAIS d'opacity/filter/mask/will-change:opacity ici
   (cela couperait le verre des enfants, règle « Backdrop Root »). */
.ak-pages {
  position: relative;
  min-height: 100dvh;
}
.ak-page {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding:
    calc(var(--sur-haut) + 8px)
    calc(var(--espace-page) + var(--sur-droite))
    calc(var(--sur-bas) + var(--haut-barre) + var(--marge-bas-barre) + var(--espace-bas-page))
    calc(var(--espace-page) + var(--sur-gauche));
}
.ak-page::-webkit-scrollbar { display: none; }
.ak-page:not(.est-affiche) { visibility: hidden; pointer-events: none; }  /* même convention que navigation.css */
/* Page unique sans conteneur absolu (galerie, écrans simples) : défilement du document */
.ak-page--document { position: static; overflow: visible; min-height: 100dvh; visibility: visible; pointer-events: auto; }

/* Pile de blocs : 24 entre blocs (feuilles : 16) */
.ak-pile { display: flex; flex-direction: column; gap: var(--espace-bloc); }
.ak-pile--serree { gap: 16px; }

/* ---------- responsive (ARCHITECTURE § 6) ---------- */
/* ≤ 599 px : exactement l'app iPhone. 600-1099 : même colonne, centrée, 560 au plus. ≥ 1100 : 2 colonnes ; ≥ 1600 : 3. */
.ak-colonne { width: 100%; margin-inline: auto; }
@media (min-width: 600px) {
  .ak-colonne { max-width: var(--largeur-colonne); }
}
/* Grille de cartes : en une colonne, une simple pile ; en large, les mêmes cartes dans le même ordre sur 2 ou 3 colonnes.
   .ak-pleine-largeur (globe, en-tête) occupe toute la ligne. */
.ak-grille-cartes { display: flex; flex-direction: column; gap: var(--espace-bloc); }
@media (min-width: 1100px) {
  .ak-colonne--large { max-width: 1180px; }
  .ak-grille-cartes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--espace-bloc);
  }
  .ak-grille-cartes > .ak-pleine-largeur { grid-column: 1 / -1; }
}
@media (min-width: 1600px) {
  .ak-colonne--large { max-width: 1760px; }
  .ak-grille-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- focus visible (clavier) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--couleur-teinte);
  outline-offset: 2px;
  border-radius: var(--rayon-s);
}
.ak-verre:focus-visible, .ak-rangee-bouton:focus-visible { outline-offset: -2px; }

/* ---------- mode discret : identite() = blur(radius: 7), caché à l'accessibilité (aria-hidden posé par le composant) ---------- */
.ak-identite { transition: filter var(--duree-doux) var(--ressort); }
[data-discret] .ak-identite { filter: blur(7px); }

/* ---------- mouvement réduit : Mouvement.doux = nil ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}