/* ===========================================================================
   COGENCY — système visuel
   ---------------------------------------------------------------------------
   Parti pris : le noir n'est pas un thème sombre, c'est un espace. Les agents
   sont les seules sources de lumière ; tout le reste s'efface pour eux. La
   couleur ne décore jamais — elle identifie une voix, ou elle n'existe pas.

   Ce fichier ne contient aucune valeur en dur ailleurs que dans :root.
   =========================================================================== */

:root {
  /* --- L'espace ----------------------------------------------------------- */
  --void:        #05060A;
  --void-deep:   #030409;
  --plane:       #0B0D14;
  --plane-hi:    #12151F;

  /* Surfaces de verre : jamais opaques, toujours posées sur le vide. */
  --glass:       rgba(255, 255, 255, .035);
  --glass-hi:    rgba(255, 255, 255, .065);
  --edge:        rgba(255, 255, 255, .09);
  --edge-hi:     rgba(255, 255, 255, .16);

  /* --- L'encre ------------------------------------------------------------ */
  --ink:         #EDEAE3;   /* blanc chaud : le blanc pur brûle sur du noir */
  --ink-soft:    #A9A5B4;
  /* CES DEUX ENCRES ÉTAIENT ILLISIBLES, ET C'EST MESURABLE.
     Le 22 août 2026, sur le fond le plus clair de la maison (#12151F) :

         --ink-faint  #3D3B47  →  1,66:1
         --ink-mute   #6B6878  →  3,36:1

     Il faut 4,5:1 pour du texte courant, 3:1 pour du grand texte. L'encre la
     plus pâle échouait donc même le seuil du GRAND texte, d'un facteur trois
     — et elle porte les textes d'explication : « c'est ce numéro qu'Airtel
     nommera dans son avis », la tenue des paliers, les aides de saisie.
     Autrement dit, tout ce qu'on écrit pour être utile était le plus dur à
     lire. Signalé par l'exploitant, sur un vrai téléphone.

     La teinte et la saturation sont conservées : seule la clarté monte. La
     hiérarchie reste donc lisible — 15,2 / 7,6 / 6,4 / 4,6 — et les quatre
     encres passent désormais le seuil du texte courant. */
  --ink-mute:    #9997A5;
  --ink-faint:   #817E94;

  /* --- Le laiton — l'unique métal, réservé à la synthèse ------------------- */
  --brass:       #C9B896;
  --brass-deep:  #8A7B5E;

  /* --- Les voix ------------------------------------------------------------
     Cinq teintes séparées d'au moins 60° : distinguables même par un œil
     daltonien, et par la seule luminance en cas de doute. */
  --voice-1:  #E8A33D;   /* Analyste       — ambre  */
  --voice-2:  #E86AA8;   /* Contradicteur  — magenta */
  --voice-3:  #4FD3E8;   /* Bâtisseur      — cyan   */
  --voice-4:  #9B7BF0;   /* Humaniste      — violet */
  --voice-5:  #A8E05F;   /* Prospectiviste — lime   */

  --danger:   #FF5C5C;

  /* --- Typographie ---------------------------------------------------------
     Deux familles, un contraste franc. Le sans porte l'interface, le serif
     porte la réponse : ce qui a été délibéré mérite un autre corps que ce
     qui sert à cliquer. Aucune police distante — chargement instantané. */
  --sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Code", "JetBrains Mono", monospace;

  /* Échelle fluide, ratio ~1.33 — assez large pour créer de la hiérarchie
     sans multiplier les niveaux. */
  --t--2: clamp(.68rem, .66rem + .1vw, .74rem);
  --t--1: clamp(.8rem, .77rem + .14vw, .88rem);
  --t-0:  clamp(.95rem, .92rem + .18vw, 1.05rem);
  --t-1:  clamp(1.18rem, 1.1rem + .4vw, 1.4rem);
  --t-2:  clamp(1.5rem, 1.3rem + .9vw, 2.05rem);
  --t-3:  clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --t-4:  clamp(2.7rem, 1.9rem + 3.6vw, 5.2rem);
  --t-5:  clamp(3.4rem, 2rem + 6.4vw, 8rem);

  /* --- Rythme ------------------------------------------------------------- */
  --gut: clamp(1.1rem, 3.5vw, 2.4rem);
  --wrap: 1320px;
  --read: 68ch;

  /* --- Marges physiques de l'appareil ---------------------------------------
     L'encoche, l'îlot dynamique, la barre d'accueil de l'iPhone, et les coins
     arrondis d'à peu près tous les Android récents. `viewport-fit=cover` nous
     donne tout l'écran ; à nous de ne pas écrire sous le verre. Repli à 0
     partout ailleurs, donc aucune conséquence sur un écran d'ordinateur. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* --- Formes ------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* --- Mouvement -----------------------------------------------------------
     Rien de linéaire : une pensée n'arrive pas à vitesse constante. */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-in:   cubic-bezier(.55, 0, .68, .2);
  --spring:    cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .2s;
  --t-mid:  .45s;
  --t-slow: .9s;
  --t-vast: 1.8s;
}

/* ===========================================================================
   Réinitialisation
   =========================================================================== */

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

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

body {
  margin: 0;
  /* `100vh` d'abord pour iOS antérieur à 15.4, `100dvh` ensuite pour tous les
     autres : sur Safari mobile, `vh` compte la barre d'adresse comme si elle
     était toujours repliée, et le bas de page passe sous elle. */
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Android affiche un halo gris au doigt posé. Nos états de survol et de
     pression disent déjà ce qui est touché ; le halo ne fait que salir. */
  -webkit-tap-highlight-color: transparent;
  /* Empêche le rebond de la page entière quand on fait défiler un panneau
     jusqu'à sa fin — et le « tirer pour rafraîchir » d'Android, qui rechargeait
     l'Arène en plein milieu d'une délibération. */
  overscroll-behavior-y: none;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-wrap: balance;
}

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

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

/* Un appui long sur un bouton, sur Android, sélectionne son libellé et ouvre
   la poignée de copie. Sur une commande, c'est un accident, jamais une
   intention. Les zones de texte gardent évidemment la sélection. */
button, .dial, .rounds__n, .node { -webkit-user-select: none; user-select: none; }

/* iOS habille les champs et les boutons de son propre style — dégradé interne,
   ombre portée, coins imposés — qui contredit tout ce qui précède. `appearance`
   suffit à le retirer ; on ne force PAS `border-radius: 0` derrière, sinon tout
   champ qui n'aurait pas déclaré le sien deviendrait un rectangle dur. */
input, textarea, button { -webkit-appearance: none; appearance: none; }

svg { display: block; }

::selection { background: var(--brass); color: var(--void); }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Barre de défilement discrète : elle ne doit pas trouer l'espace. */
* { scrollbar-width: thin; scrollbar-color: var(--edge-hi) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--edge-hi); border-radius: var(--r-pill); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

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