/* ==========================================================================
   WorkManagement — système de design « Chaux & Encre »
   Polices, jetons des deux thèmes, alias --ib-* des apps, pictogrammes et base.
   Inclure AVANT tout CSS applicatif. Les composants partagés sont dans composants.css.
   ========================================================================== */

/* ===== Polices servies par la plateforme ===================================
   Hanken Grotesk variable (300 à 800) et IBM Plex Mono 400 / 500 / 600, licence SIL OFL
   (public/fonts/OFL-*.txt). Aucun CDN : le kiosque et les postes d'atelier tournent sur
   le réseau local. Sous-ensembles latin et latin étendu, chargés à la demande. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-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-20C4, 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-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: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600-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: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Interrupteurs de thème ==============================================
   Chaque jeton porte ses DEUX valeurs sur une ligne :
       --fond: var(--en-clair, #F2EDE4) var(--en-sombre, #121110);
   Seul l'interrupteur du thème affiché vaut `initial` (sa valeur de repli s'écrit),
   l'autre est vide (il ne produit rien). Une seule définition par thème, appliquée à
   l'identique par le choix manuel (data-theme sur <html> ou sur un bloc) et par le
   réglage du système quand aucun choix n'est posé.
   Le même idiome sert aux composants : var(--en-clair, A) var(--en-sombre, B).
   Lecture JS d'un jeton : getPropertyValue(…).trim(), la valeur porte des espaces.

   `color-scheme` suit le même chemin : il pilote ce que le navigateur dessine lui-même
   (champs, listes, cases, barres de défilement, remplissage automatique). */
:root,
[data-theme="light"] {
  --en-clair: initial;
  --en-sombre: ;
  color-scheme: light;
}
[data-theme="dark"] {
  --en-clair: ;
  --en-sombre: initial;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --en-clair: ;
    --en-sombre: initial;
    color-scheme: dark;
  }
}

/* ===== Jetons de couleur, matières et ombres ===============================
   Recalculés sur tout élément qui porte data-theme : un bloc peut afficher l'autre thème. */
:root,
[data-theme] {
  /* Chaux : fond de page */
  --fond:            var(--en-clair, #F2EDE4) var(--en-sombre, #121110);
  --fond-haut:       var(--en-clair, #F7F3EC) var(--en-sombre, #171614);
  --fond-bas:        var(--en-clair, #ECE5D9) var(--en-sombre, #0E0D0C);
  --halo-chaud:      var(--en-clair, rgba(238, 182, 64, .30)) var(--en-sombre, rgba(233, 174, 47, .13));
  --halo-blanc:      var(--en-clair, rgba(255, 255, 255, .75)) var(--en-sombre, rgba(255, 240, 220, .035));
  --halo-metier-dose: var(--en-clair, 17%) var(--en-sombre, 11%);

  /* Verre laiteux, papier, creux */
  --surface:         var(--en-clair, rgba(253, 251, 247, .80)) var(--en-sombre, rgba(31, 29, 26, .80));
  --surface-dense:   var(--en-clair, rgba(253, 251, 247, .92)) var(--en-sombre, rgba(33, 31, 28, .94));
  --surface-pleine:  var(--en-clair, #FCFAF6) var(--en-sombre, #1D1B18);
  --surface-bord:    var(--en-clair, rgba(255, 255, 255, .85)) var(--en-sombre, rgba(255, 240, 220, .075));
  --creux:           var(--en-clair, #ECE6DB) var(--en-sombre, #161513);
  --creux-doux:      var(--en-clair, rgba(28, 27, 24, .045)) var(--en-sombre, rgba(255, 240, 220, .045));
  --trait:           var(--en-clair, #E3DBCD) var(--en-sombre, #2D2A26);
  --trait-fort:      var(--en-clair, #CEC4B3) var(--en-sombre, #3E3A34);
  --trait-champ:     var(--en-clair, #968B7C) var(--en-sombre, #7A7266);

  /* Texte */
  --texte:           var(--en-clair, #1C1B18) var(--en-sombre, #F2EDE4);
  --texte-2:         var(--en-clair, #57514A) var(--en-sombre, #B5AC9F);
  --texte-3:         var(--en-clair, #69625A) var(--en-sombre, #948B7E);

  /* Encre : ce qui est actif, sélectionné ou fait. Crème en sombre (règle d'inversion). */
  --encre:           var(--en-clair, #1C1B18) var(--en-sombre, #EDE7DC);
  --sur-encre:       var(--en-clair, #F6F2EA) var(--en-sombre, #161513);
  --sur-encre-2:     var(--en-clair, #B8AFA2) var(--en-sombre, #5B554D);
  --sur-encre-voile: var(--en-clair, rgba(255, 255, 255, .14)) var(--en-sombre, rgba(0, 0, 0, .09));
  --ombre-encre:     var(--en-clair, 0 8px 20px -10px rgba(28, 27, 24, .55)) var(--en-sombre, 0 8px 20px -12px rgba(0, 0, 0, .8));

  /* Contraste : carte d'encre, barre et pied d'atelier. Restent sombres dans les deux thèmes. */
  --contraste:       var(--en-clair, #1C1B18) var(--en-sombre, #2A2622);
  --contraste-2:     var(--en-clair, #2E2B27) var(--en-sombre, #36312B);
  --contraste-3:     var(--en-clair, #3A3631) var(--en-sombre, #433D36);
  --contraste-bord:  var(--en-clair, rgba(255, 255, 255, .09)) var(--en-sombre, rgba(255, 240, 220, .10));
  --contraste-lueur: var(--en-clair, none) var(--en-sombre, linear-gradient(180deg, rgba(237, 182, 61, .07), transparent 46%));
  --carte-encre-bord: var(--en-clair, rgba(255, 255, 255, .09)) var(--en-sombre, rgba(237, 182, 61, .16));
  --sur-contraste:   var(--en-clair, #F6F2EA) var(--en-sombre, #F2EDE4);
  --sur-contraste-2: var(--en-clair, #B3AA9D) var(--en-sombre, #ADA497);

  /* Cyan Innobéton : fonctionnel (focus, lien, sélection, « en route ») */
  --accent:          var(--en-clair, #0891B2) var(--en-sombre, #36BFD9);
  --accent-texte:    var(--en-clair, #0B6E86) var(--en-sombre, #45C3DC);
  --accent-teinte:   var(--en-clair, #D5EBF1) var(--en-sombre, rgba(54, 191, 217, .15));
  --focus:           var(--en-clair, rgba(8, 145, 178, .42)) var(--en-sombre, rgba(69, 195, 220, .50));

  /* Ocre : « en cours », « maintenant », l'action d'atelier posée sur l'encre */
  --ocre:            var(--en-clair, #E9AE2F) var(--en-sombre, #EDB63D);
  --ocre-teinte:     var(--en-clair, #F6E3B4) var(--en-sombre, rgba(237, 182, 61, .16));
  --ocre-texte:      var(--en-clair, #7A5200) var(--en-sombre, #EDB63D);

  /* Statuts : texte · teinte de fond · vif (point, jauge, liseré) */
  --succes:          var(--en-clair, #2C6A43) var(--en-sombre, #86D3A0);
  --succes-teinte:   var(--en-clair, #DDEBDD) var(--en-sombre, rgba(134, 211, 160, .13));
  --succes-vif:      var(--en-clair, #3E9A5F) var(--en-sombre, #5FBF80);
  --alerte:          var(--en-clair, #7F4800) var(--en-sombre, #F2BC66);
  --alerte-teinte:   var(--en-clair, #F8E5C0) var(--en-sombre, rgba(242, 188, 102, .14));
  --alerte-vif:      var(--en-clair, #D98A12) var(--en-sombre, #F2A93B);
  --danger:          var(--en-clair, #A1311E) var(--en-sombre, #FF9580);
  --danger-teinte:   var(--en-clair, #F7DCD2) var(--en-sombre, rgba(255, 149, 128, .14));
  --danger-vif:      var(--en-clair, #C2412B) var(--en-sombre, #F2694F);
  --info:            var(--en-clair, #0B6680) var(--en-sombre, #6AD0E6);
  --info-teinte:     var(--en-clair, #D5EBF1) var(--en-sombre, rgba(106, 208, 230, .13));
  --info-vif:        var(--en-clair, #0891B2) var(--en-sombre, #36BFD9);
  --neutre:          var(--en-clair, #57514A) var(--en-sombre, #B5AC9F);
  --neutre-teinte:   var(--en-clair, #E9E3D9) var(--en-sombre, rgba(242, 237, 228, .08));
  /* Texte et icône posés sur une couleur vive de statut : blanc en clair, presque noir en
     sombre, où les vifs s'éclaircissent. */
  --sur-vif:         var(--en-clair, #FFFFFF) var(--en-sombre, #1C1B18);

  /* Métiers : repère d'identité, en détail seulement, jamais un statut */
  --m-atelier:          var(--en-clair, #D99A1E) var(--en-sombre, #EDB63D);
  --m-atelier-teinte:   var(--en-clair, #F6E6BF) var(--en-sombre, rgba(237, 182, 61, .15));
  --m-atelier-texte:    var(--en-clair, #7A5200) var(--en-sombre, #EDB63D);
  --m-qualite:          var(--en-clair, #4E8A5E) var(--en-sombre, #7FC495);
  --m-qualite-teinte:   var(--en-clair, #DCEADB) var(--en-sombre, rgba(127, 196, 149, .15));
  --m-qualite-texte:    var(--en-clair, #2F6040) var(--en-sombre, #7FC495);
  --m-logistique:       var(--en-clair, #0891B2) var(--en-sombre, #45C3DC);
  --m-logistique-teinte: var(--en-clair, #D2ECF2) var(--en-sombre, rgba(69, 195, 220, .15));
  --m-logistique-texte: var(--en-clair, #0B6A82) var(--en-sombre, #45C3DC);
  --m-outils:           var(--en-clair, #3B5BA9) var(--en-sombre, #8FA6EA);
  --m-outils-teinte:    var(--en-clair, #DDE3F3) var(--en-sombre, rgba(143, 166, 234, .16));
  --m-outils-texte:     var(--en-clair, #2E4687) var(--en-sombre, #8FA6EA);
  --m-admin:            var(--en-clair, #B8573A) var(--en-sombre, #EE8D6E);
  --m-admin-teinte:     var(--en-clair, #F3DDD3) var(--en-sombre, rgba(238, 141, 110, .15));
  --m-admin-texte:      var(--en-clair, #8C3A22) var(--en-sombre, #EE8D6E);

  /* Hachures, voile de modale */
  --hachure:         var(--en-clair, rgba(28, 27, 24, .20)) var(--en-sombre, rgba(242, 237, 228, .20));
  --voile:           var(--en-clair, rgba(28, 24, 18, .38)) var(--en-sombre, rgba(0, 0, 0, .58));

  /* Ombres chaudes, jamais grises */
  --ombre-1:         var(--en-clair, 0 1px 2px rgba(64, 48, 24, .05), 0 10px 28px -14px rgba(64, 48, 24, .20))
                     var(--en-sombre, 0 1px 2px rgba(0, 0, 0, .30), 0 12px 30px -14px rgba(0, 0, 0, .60));
  --ombre-2:         var(--en-clair, 0 2px 6px rgba(64, 48, 24, .06), 0 26px 50px -22px rgba(64, 48, 24, .32))
                     var(--en-sombre, 0 2px 8px rgba(0, 0, 0, .35), 0 28px 56px -22px rgba(0, 0, 0, .75));
  --ombre-flottante: var(--en-clair, 0 16px 44px -10px rgba(40, 30, 15, .34), 0 2px 8px rgba(40, 30, 15, .08))
                     var(--en-sombre, 0 18px 48px -10px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .40));
  --reflet:          var(--en-clair, inset 0 1px 0 rgba(255, 255, 255, .9)) var(--en-sombre, inset 0 1px 0 rgba(255, 240, 220, .06));

  /* Barres de défilement */
  --ib-scroll-thumb:       var(--en-clair, rgba(28, 27, 24, .22)) var(--en-sombre, rgba(242, 237, 228, .20));
  --ib-scroll-thumb-hover: var(--en-clair, rgba(28, 27, 24, .36)) var(--en-sombre, rgba(242, 237, 228, .34));
}

/* ===== Jetons indépendants du thème ======================================== */
:root {
  --police:      "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Tailles : géant (salutation), page, chiffre-clé, section, carte, corps, petit, légende */
  --t-geant:   clamp(2.5rem, 1.55rem + 3.9vw, 5.5rem);
  --t-page:    clamp(2.125rem, 1.45rem + 2.7vw, 4rem);
  --t-chiffre: clamp(2.25rem, 1.7rem + 2vw, 3.75rem);
  --t-titre:   1.75rem;
  --t-carte:   1.25rem;
  --t-corps:   1rem;
  --t-petit:   .875rem;
  --t-legende: .8125rem;

  /* Graisses : léger pour lire, lourd pour mesurer */
  --g-leger:  300;
  --g-normal: 400;
  --g-moyen:  500;
  --g-fort:   600;
  --g-mesure: 720;

  /* Rayons : 26 pour les cartes, 34 pour les modales */
  --r-xs: 8px;
  --r-s:  12px;
  --r-m:  18px;
  --r-l:  26px;
  --r-xl: 34px;
  --r-pilule: 999px;

  /* Espacements, base 4 */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-7: 32px; --e-8: 40px; --e-9: 56px; --e-10: 72px;

  /* Cibles : 44 partout, 48 au doigt pour les −/+ d'une ligne, 56 en atelier */
  --cible: 44px;
  --cible-ligne: 44px;
  --cible-atelier: 56px;
  --gouttiere: 16px;
  --barre-h: 64px;
  /* Hauteur de la rampe de flou qu'iOS 26 dessine sous la barre d'état d'une application installée
     (mesurée sur iPhone : jusqu'à ~19 pt sous la zone sûre) ; nulle ailleurs. */
  --rampe-ios: 0px;

  /* Plans : cadre d'app bas, feuilles et toast au-dessus de tout le mobilier des apps */
  --z-barre: 40;
  --z-pied: 45;
  --z-barre-bas: 50;
  --z-voile: 10040;
  --z-toast: 10060;

  --duree: .18s;
  --courbe: cubic-bezier(.2, .7, .2, 1);
}

@media (pointer: coarse) { :root { --cible-ligne: 48px; } }
@media (min-width: 600px)  { :root { --gouttiere: 24px; } }
@media (min-width: 900px)  { :root { --gouttiere: 32px; --barre-h: 72px; } }
:root.ios-installee { --rampe-ios: 24px; }
@media (min-width: 1280px) { :root { --gouttiere: 40px; } }

/* ===== Alias --ib-* =========================================================
   Noms historiques lus par les feuilles des apps. Ils pointent vers les jetons
   ci-dessus : une app qui n'a pas encore migré prend la chaux sans rien changer. */
:root,
[data-theme] {
  --ib-font-sans: var(--police);
  --ib-font-mono: var(--police-mono);

  --ib-glass:          var(--surface);
  --ib-glass-elevated: var(--surface-dense);
  --ib-glass-subtle:   var(--en-clair, rgba(253, 251, 247, .55)) var(--en-sombre, rgba(31, 29, 26, .55));
  --ib-surface:         var(--surface-pleine);
  --ib-surface-subtle:  var(--creux-doux);
  --ib-bg-elevated:     var(--surface-pleine);

  --ib-border:        var(--surface-bord);
  --ib-border-subtle: var(--trait);

  --ib-shadow:          var(--ombre-1);
  --ib-shadow-elevated: var(--ombre-flottante);

  --ib-text:           var(--texte);
  --ib-text-secondary: var(--texte-2);
  --ib-text-tertiary:  var(--texte-3);

  /* Cyan en deux usages : --ib-accent pour le texte (liens), --ib-accent-fond pour un fond
     sous du texte blanc (bouton, bulle, onglet actif). Le cyan clair du thème sombre ne
     supporte pas le blanc. */
  --ib-accent:        var(--accent-texte);
  --ib-accent-fond:   var(--en-clair, #0B6E86) var(--en-sombre, #0E7490);
  --ib-accent-green:  var(--succes-vif);
  --ib-accent-orange: var(--alerte-vif);
  --ib-accent-red:    var(--danger-vif);
  --ib-accent-purple: var(--m-outils);
  --ib-accent-teal:   var(--accent);
  --ib-accent-blue:   var(--accent-texte);

  --ib-bg-fallback: var(--fond);
  --ib-bg-gradient:
    radial-gradient(1100px 680px at 100% -8%, var(--halo-chaud), transparent 62%),
    radial-gradient(900px 640px at -10% 108%, var(--halo-blanc), transparent 60%),
    linear-gradient(180deg, var(--fond-haut) 0%, var(--fond) 46%, var(--fond-bas) 100%);

  --ib-specular:    var(--en-clair, rgba(255, 255, 255, .9)) var(--en-sombre, rgba(255, 240, 220, .06));
  --ib-rim:         var(--reflet);
  --ib-rim-subtle:  var(--reflet);
  --ib-is-dark:     var(--en-clair, 0) var(--en-sombre, 1);
}
:root {
  --ib-blur:          blur(22px) saturate(1.35);
  --ib-blur-nav:      blur(18px) saturate(1.4);
  --ib-blur-elevated: blur(24px) saturate(1.5);

  --ib-radius-sm:   var(--r-s);
  --ib-radius-md:   14px;
  --ib-radius:      var(--r-m);
  --ib-radius-lg:   var(--r-l);
  --ib-radius-xl:   var(--r-xl);
  --ib-radius-pill: var(--r-pilule);

  --ib-space-xs:  4px;
  --ib-space-sm:  8px;
  --ib-space-md:  16px;
  --ib-space-lg:  24px;
  --ib-space-xl:  32px;
  --ib-space-2xl: 48px;

  --ib-ctrl-h: var(--cible);

  --ib-ease:          var(--courbe);
  --ib-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ib-duration-fast: 0.15s;
  --ib-duration:      0.25s;
}

/* Fond de chaux, avec le halo du métier quand le <body> en déclare un (--halo-metier) :
   déclaré sur le <body> pour être calculé avec SES variables. */
body {
  --ib-bg-gradient:
    radial-gradient(1100px 680px at 100% -8%, var(--halo-chaud), transparent 62%),
    radial-gradient(760px 520px at var(--halo-x, 0%) -6%, var(--halo-metier, transparent), transparent 64%),
    radial-gradient(900px 640px at -10% 108%, var(--halo-blanc), transparent 60%),
    linear-gradient(180deg, var(--fond-haut) 0%, var(--fond) 46%, var(--fond-bas) 100%);
}

/* ===== Accessibilité ===== */
@media (prefers-reduced-transparency: reduce) {
  :root, [data-theme] {
    --surface: var(--surface-pleine);
    --surface-dense: var(--surface-pleine);
    --ib-glass-subtle: var(--surface-pleine);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, [data-theme] {
    --surface: var(--surface-pleine);
    --surface-dense: var(--surface-pleine);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===== Base =====
   Pas de fond sur <html> : celui du <body> se propage au canevas, y compris dans les
   apps dont le body est décalé par une marge. */
::selection { background: var(--ocre-teinte); color: var(--texte); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ===== Icônes d'interface et pictogrammes d'app ============================
   Rendus par Pictos::icone() / picto() (PHP), wmIcone() / wmPicto() (JS), ou par le sprite
   (<svg class="c-i"><use href="#wm-i-scan"/></svg>). Le trait est compensé par taille
   pour rester autour de 1,8 px à l'écran. Le détail plein .c-pa prend la couleur du
   métier (--m) posée par une classe .c-m-<métier> sur le pictogramme ou un parent. */
.c-i { display: block; width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.c-i-s  { width: 16px; height: 16px; }
.c-i-l  { width: 24px; height: 24px; }
.c-i-xl { width: 28px; height: 28px; }

.c-picto {
  display: block;
  width: 48px;
  height: 48px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--texte);
  overflow: visible;
}
.c-picto-l   { width: 64px; height: 64px; stroke-width: 1.45; }
.c-picto-m   { width: 40px; height: 40px; stroke-width: 2.2; }
.c-picto-s   { width: 32px; height: 32px; stroke-width: 2.7; }
.c-picto-xs  { width: 24px; height: 24px; stroke-width: 3.6; }
.c-picto-xxs { width: 18px; height: 18px; stroke-width: 4.8; }
.c-pa { fill: var(--m, currentColor); stroke: none; }
.c-pa-doux { opacity: .38; }
.c-pt { stroke: var(--surface-pleine); }

/* Métiers : posent --m (pigment), --m-teinte (fond) et --m-texte (texte sur fond clair). */
.c-metier, .c-m-autres { --m: var(--texte-3); --m-teinte: var(--creux); --m-texte: var(--texte-2); }
.c-m-atelier    { --m: var(--m-atelier);    --m-teinte: var(--m-atelier-teinte);    --m-texte: var(--m-atelier-texte); }
.c-m-qualite    { --m: var(--m-qualite);    --m-teinte: var(--m-qualite-teinte);    --m-texte: var(--m-qualite-texte); }
.c-m-logistique { --m: var(--m-logistique); --m-teinte: var(--m-logistique-teinte); --m-texte: var(--m-logistique-texte); }
.c-m-outils     { --m: var(--m-outils);     --m-teinte: var(--m-outils-teinte);     --m-texte: var(--m-outils-texte); }
.c-m-admin      { --m: var(--m-admin);      --m-teinte: var(--m-admin-teinte);      --m-texte: var(--m-admin-texte); }
.c-point-metier { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--m, var(--texte-3)); flex: none; }

/* Visible dans un seul thème (icônes du bouton de thème, logos clair / sombre). L'élément
   visible garde l'affichage par défaut de son type : l'envelopper s'il doit être en bloc. */
.c-seulement-clair  { display: var(--en-sombre, none); }
.c-seulement-sombre { display: var(--en-clair, none); }

/* ===== Utilitaires historiques =============================================
   Classes encore posées par les apps ; elles prennent la matière de la chaux. */
.ib-glass {
  background: var(--surface);
  -webkit-backdrop-filter: var(--ib-blur);
  backdrop-filter: var(--ib-blur);
  border: 1px solid var(--surface-bord);
  border-radius: var(--ib-radius-lg);
  box-shadow: var(--reflet), var(--ombre-1);
}
.ib-glass-elevated {
  background: var(--surface-dense);
  -webkit-backdrop-filter: var(--ib-blur-elevated);
  backdrop-filter: var(--ib-blur-elevated);
  border: 1px solid var(--surface-bord);
  border-radius: var(--ib-radius-xl);
  box-shadow: var(--reflet), var(--ombre-flottante);
}
.ib-glass-subtle {
  background: var(--ib-glass-subtle);
  -webkit-backdrop-filter: var(--ib-blur-nav);
  backdrop-filter: var(--ib-blur-nav);
  border: 1px solid var(--trait);
  border-radius: var(--ib-radius-lg);
  box-shadow: var(--reflet);
}

/* Interrupteur de thème historique (#themeToggle) : rond de 44 px en verre. */
.ib-theme-toggle {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; appearance: none;
  border-radius: 50%;
  background: var(--surface);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--surface-bord);
  box-shadow: var(--reflet), 0 1px 2px rgba(64, 48, 24, .06), 0 6px 16px -10px rgba(64, 48, 24, .30);
  color: var(--texte);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background var(--duree), transform var(--duree) var(--courbe);
}
.ib-theme-toggle:hover  { background: var(--surface-pleine); }
.ib-theme-toggle:active { transform: scale(.94); }

/* Le glyphe de l'interrupteur arrive en tournant ; rejoué par updateThemeIcon(). */
#themeIcon { display: inline-block; will-change: transform; }
@keyframes ib-theme-icon {
  from { transform: rotate(-140deg) scale(0.3); opacity: 0; }
  to   { transform: rotate(0deg)    scale(1);   opacity: 1; }
}

/* ===== Bascule jour / nuit — révélation circulaire =========================
   ibToggleTheme() anime un disque qui s'ouvre depuis le bouton : l'ancien calque reste
   immobile dessous, le nouveau le découvre. Sans l'API View Transitions, ou en
   mouvement réduit, le thème bascule net. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 0;
  transform-origin: var(--wm-wave-x, 50%) var(--wm-wave-y, 50%);
}

/* Rayon du front d'onde, enregistré pour s'interpoler comme une longueur. */
@property --wm-wave-r {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

/* Masque du nouveau calque : (rampe) ∩ (grain ∪ disque intérieur dégradé). Le grain
   n'apparaît que sur la bande du front et s'intensifie vers l'extérieur. */
::view-transition-new(root) {
  z-index: 1;
  mask-image:
    radial-gradient(circle at var(--wm-wave-x, 50%) var(--wm-wave-y, 50%),
      #000                 calc(var(--wm-wave-r, 0px) - 300px),
      rgba(0, 0, 0, 0.92)  calc(var(--wm-wave-r, 0px) - 230px),
      rgba(0, 0, 0, 0.62)  calc(var(--wm-wave-r, 0px) - 150px),
      rgba(0, 0, 0, 0.28)  calc(var(--wm-wave-r, 0px) - 80px),
      rgba(0, 0, 0, 0.08)  calc(var(--wm-wave-r, 0px) - 30px),
      transparent          var(--wm-wave-r, 0px)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='11' stitchTiles='stitch'/><feComponentTransfer><feFuncA type='discrete' tableValues='0 0 0.18 0.42 0.68 0.88 1 1'/></feComponentTransfer></filter><rect width='200' height='200' filter='url(%23g)'/></svg>"),
    radial-gradient(circle at var(--wm-wave-x, 50%) var(--wm-wave-y, 50%),
      #000                calc(var(--wm-wave-r, 0px) - 300px),
      rgba(0, 0, 0, 0.55) calc(var(--wm-wave-r, 0px) - 210px),
      transparent         calc(var(--wm-wave-r, 0px) - 130px));
  mask-composite: intersect, add;
  mask-repeat: no-repeat, repeat, no-repeat;
  mask-size: 100% 100%, 200px 200px, 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ===== Animations d'entrée ===== */
@keyframes ib-fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ib-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ib-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes lg-enter {
  from { opacity: 0; transform: scale(0.90) translateY(8px); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   filter: blur(0px); }
}
@keyframes lg-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.ib-animate-in   { animation: ib-fade-in-up var(--ib-duration) var(--ib-ease-spring) both; }
.ib-scale-in     { animation: ib-scale-in  var(--ib-duration) var(--ib-ease-spring) both; }
.lg-enter        { animation: lg-enter 0.38s var(--ib-ease-spring) both; }
.lg-pop          { animation: lg-pop   0.30s var(--ib-ease-spring) both; }

/* ===== Barres de défilement =================================================
   Pouce fin et arrondi, identique sur clair et sombre. Sélecteur `*` de spécificité
   nulle : les zones qui masquent leur barre l'emportent sans réécriture.
   Les propriétés standard (scrollbar-width / -color) sont réservées aux moteurs sans
   ::-webkit-scrollbar : Chromium les ferait primer et ignorerait les pseudo-éléments. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--ib-scroll-thumb) transparent;
  }
}
*::-webkit-scrollbar        { width: 11px; height: 11px; }
*::-webkit-scrollbar-track  { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-thumb {
  background-color: var(--ib-scroll-thumb);
  border: 3.5px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--ib-scroll-thumb-hover); }

/* ===== Chargement ===== */
.skeleton {
  background: linear-gradient(90deg, var(--creux) 25%, var(--surface-pleine) 50%, var(--creux) 75%);
  background-size: 200% 100%;
  animation: ib-shimmer 1.4s infinite;
  border-radius: var(--ib-radius-lg);
  pointer-events: none;
}