/* Jetons de « HUB IA (nouveau site) ». Palette « signal-nuit » (et « signal-jour »), polices « instrument », forme « pilule »
   (14 octobre 2026 : passée de « carre » à « pilule » après le retour de MA sur Urbi : panneaux et boutons arrondis).
   Toute couleur, toute police et toute dimension passent par ces variables. */
:root {
  /* Couleurs */
  --fond: #101211;
  --surface: #202221;
  --bordure: #373B39;
  --texte: #ECEEED;
  --texte-doux: #ADB5B2;
  --accent: #BDEE63;
  --sur-accent: #101211;
  --accent-2: #F0EEE9;
  --sur-accent-2: #21201C;
  /* États : lisibles sur le fond et sur la surface de la palette */
  --erreur: #FF9592;
  --reussite: #3DD68C;

  /* Polices */
  --police-titres: "Instrument Sans", Arial, sans-serif;
  --graisse-titres: 500;
  --etirement-titres: 100%;
  --police-texte: "Instrument Sans", Arial, sans-serif;
  --graisse-texte: 400;
  --police-interface: "Instrument Sans", Arial, sans-serif;
  --graisse-interface: 500;
  --police-donnees: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  /* Police du logo (« ub ia ») : arrondie comme les pilules du H. M PLUS Rounded 1c, 900, licence SIL OFL.
     --cap-logo : hauteur de ses capitales, en em ; le H du logo prend cette hauteur. */
  --police-logo: "M PLUS Rounded 1c", "Instrument Sans", Arial, sans-serif;
  --graisse-logo: 900;
  --cap-logo: 0.734;

  /* Forme : ces valeurs viennent de formes.json. Elles règlent le squelette du site. */
  --echelle-titres: 1.2;
  --densite: 0.9;
  --rayon: 14px;
  --rayon-action: 999px;
  --epaisseur-filet: 2px;
  --epaisseur-forte: 4px;
  --largeur-page: 1320px;
  --largeur-texte: 62ch;
  --interligne-titres: 1;
  --interligne-texte: 1.5;
  --champ: 52px;
  --bouton-fond: var(--accent);
  --bouton-texte: var(--sur-accent);
  --bouton-bord: var(--accent);

  /* Tailles de texte. Sur téléphone elles ne bougent pas ; l'échelle agit sur les grands écrans. */
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.25rem;
  --t-xl: clamp(1.5rem, calc(1.2rem + 1.2vw * var(--echelle-titres)), calc(2rem * var(--echelle-titres)));
  --t-2xl: clamp(2rem, calc(1.4rem + 2.6vw * var(--echelle-titres)), calc(3.25rem * var(--echelle-titres)));
  --t-3xl: clamp(2.5rem, calc(1.5rem + 4.6vw * var(--echelle-titres)), calc(5rem * var(--echelle-titres)));
  --t-4xl: clamp(3rem, calc(1.2rem + 8.6vw * var(--echelle-titres)), calc(8.5rem * var(--echelle-titres)));

  /* Espacement, multiples de 4 px. La densité agit sur les grands espacements seulement. */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-6: 24px;
  --e-8: calc(32px * var(--densite));
  --e-12: calc(48px * var(--densite));
  --e-16: calc(64px * var(--densite));
  --e-24: calc(96px * var(--densite));
  --e-32: calc(128px * var(--densite));

  /* Filets et ombre */
  --filet: var(--epaisseur-filet) solid var(--bordure);
  --filet-fort: var(--epaisseur-forte) solid var(--texte);
  --ombre: none;

  /* Mesures */
  --gouttiere: clamp(16px, 4vw, 48px);
  /* Distance entre le bord de l'écran et le contenu : sert à faire déborder un élément jusqu'au bord. */
  --marge-page: max(var(--gouttiere), (100vw - var(--largeur-page)) / 2);
  --cible: 44px;

  /* Mouvement */
  --duree: 160ms;
  --duree-lente: 480ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);

  /* Ajouts du site (14 octobre 2026). Tailles d'affichage tirées de l'étude des sites de référence :
     un titre d'ouverture qui occupe la largeur, des énoncés de section très grands, une trame fine. */
  --t-ecran: clamp(3.2rem, calc(0.8rem + 8.2vw), 9.5rem);
  --t-enorme: clamp(2.6rem, calc(0.8rem + 6.4vw), 7.4rem);
  --t-titre: clamp(2.1rem, calc(1rem + 3.5vw), 4.5rem);
  --t-intro: clamp(1.25rem, calc(1rem + 0.75vw), 1.75rem);
  --t-donnees: 0.875rem;
  --serrage-ecran: -0.052em;
  --serrage-titre: -0.038em;
  --trame: 1px;
  --barre: 72px;
  --courbe-sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --duree-entree: 900ms;

  /* Ajouts du 14 octobre, après les retours de MA (Urbi, Mind Robotics, logo à sphère).
     La page est claire (fond de signal-jour) ; les sections sombres deviennent des panneaux arrondis posés dessus. */
  --page: #F0EEE9;
  --rayon-panneau: clamp(20px, 2.2vw, 32px);
  --marge-panneau: clamp(8px, 0.9vw, 14px);
  /* La sphère du hub : le signal, éclairé en haut à gauche, ombré en bas à droite (blanc #FFFFFF et sageDark 1). */
  --sphere-clair: color-mix(in srgb, var(--accent) 45%, #FFFFFF);
  --sphere-sombre: color-mix(in srgb, var(--accent) 58%, #101211);
  /* Les jambages du grand H : deux pilules pleines, à peine plus claires que le fond (comme le M de Mind Robotics,
     blanc sur gris chaud). Redéfini dans .nuit et .jour, parce qu’il dépend du fond. */
  --jambage: color-mix(in srgb, var(--texte) 12%, var(--fond));
}

/* Les panneaux sombres reprennent la palette « signal-nuit » même posés dans une page claire. */
.nuit {
  --fond: #101211;
  --surface: #202221;
  --bordure: #373B39;
  --texte: #ECEEED;
  --texte-doux: #ADB5B2;
  --sur-accent: #101211;
  --accent-2: #F0EEE9;
  --sur-accent-2: #21201C;
  --erreur: #FF9592;
  --reussite: #3DD68C;
  --jambage: color-mix(in srgb, var(--texte) 12%, var(--fond));
}

/* Sections claires : palette « signal-jour » de palettes.json (cloud-dancer, radix-sand1, radix-sand7,
   radix-sand12, radix-sand11). L'accent n'est pas redéfini : il suit celui de la page. */
.jour {
  --fond: #F0EEE9;
  --surface: #FDFDFC;
  --bordure: #CFCECA;
  --texte: #21201C;
  --texte-doux: #63635E;
  --sur-accent: #21201C;
  --accent-2: #101211;
  --sur-accent-2: #ECEEED;
  --erreur: #CA244D;
  --reussite: #193B2D;
  --jambage: var(--surface);
}

/* Aperçu seulement : autres signaux pour juger la couleur (page ouvrir.html, paramètre ?accent=).
   Chaque valeur vient de palettes.json : waterfall (sarcelle-nuit), radix-amber9 (ambre-ardoise), radix-yellow9 (noir-jaune). */
:root[data-accent="sarcelle"] { --accent: #3AB0A2; }
:root[data-accent="ambre"] { --accent: #FFC53D; }
:root[data-accent="jaune"] { --accent: #FFE629; }