/* Répartition des rues – jetons de design (direction C « Tech », système complet : design/DESIGN.md)
   SEUL fichier où figurent couleurs, tailles, espacements, rayons, ombres et durées. Tout le reste utilise var(--…) ;
   tester_design.py refuse une couleur ou une taille de texte écrite ailleurs.

   Thème clair / sombre : clair par défaut ; sombre avec [data-theme="dark"] sur <html> (posé par l'appli : automatique
   selon l'appareil, ou choix mémorisé) ou la classe .t-dark sur n'importe quel conteneur (vitrine design/systeme.html).
   Thème société : « Standard » = les valeurs ci-dessous (Dévelop'Ventes). « Client » (marque blanche) : ne remplace
   QUE --brand, --brand-2, --on-brand, --on-brand-2, --brand-glow et --font-ui (police de la liste fermée, ou fournie
   par le client avec une licence web ; Poppins en repli) ; l'échelle des tailles ne change pas, les chiffres restent
   en --font-data. --on-brand et --on-brand-2 sont calculés (noir ou blanc, le plus contrasté). Exemple : bloc
   [data-charte="exemple"] en fin de fichier. Un thème client n'est activé qu'après tester_design.py (contrastes AA
   et lisibilité de la police).
   Contrastes vérifiés par scripts/verifier_contrastes.py (WCAG AA : texte 4,5:1, éléments d'interface 3:1). */

:root {
  color-scheme: light;

  /* ── Charte société (Dévelop'Ventes par défaut) ─────────────────────────────── */
  --brand: #FFCC00;          /* accent : bouton principal, sélection, halo. Jamais du texte sur fond clair. */
  --brand-2: var(--brand);   /* couleur secondaire facultative : fond de la marque (pastille du logo) */
  --on-brand: #141414;       /* texte et icônes sur --brand : calculé par l'appli */
  --on-brand-2: var(--on-brand); /* … sur --brand-2 */
  --brand-glow: rgba(255, 204, 0, .45); /* halo de l'élément choisi (mode sombre surtout) : calculé par l'appli */
  --brand-glow-alpha: .4;    /* opacité du halo calculé à partir de la couleur de la société */
  --text-on-light: #141414;  /* texte calculé posé sur une couleur claire (--on-brand, initiales) */
  --text-on-dark: #FFFFFF;   /* … sur une couleur foncée */
  --accent: var(--brand);
  --couleur-repli: #9E9E9E;  /* produit ou catégorie sans couleur en base */
  --icone-fond: #14213D;     /* fond de l'icône de l'appli et de l'écran de lancement (recopié dans manifest.webmanifest) */

  /* ── Surfaces ───────────────────────────────────────────────────────────────── */
  --bg-page: #F6F7F9;        /* fond des écrans hors carte */
  --surface: #FFFFFF;        /* cartes, panneaux */
  --qr-fond: #FFFFFF;        /* fond du code QR : blanc dans les deux thèmes (lecture par l'appareil photo) */
  --qr-encre: #000000;       /* modules du code QR : noirs dans les deux thèmes */
  --surface-2: #EFF1F4;      /* zones en retrait : boutons discrets, résumés, squelettes */
  --surface-raised: #FFFFFF; /* panneaux flottants, menus, palette Ctrl+K (avec --shadow-2/3) */
  --surface-hover: #E6E9EE;  /* survol (PC) */
  --surface-pressed: #DCE0E6;/* appuyé */
  --scrim: rgba(11, 13, 18, .48); /* voile sous une fenêtre */
  --glass: rgba(255, 255, 255, .78); /* panneaux flottants sur PC seulement (avec --blur) */
  --toast-fond: rgba(255, 255, 255, .92); /* message temporaire : fond translucide, teinté de la couleur du type */

  /* ── Texte ──────────────────────────────────────────────────────────────────── */
  --ink: #0B0D12;            /* texte principal */
  --ink-2: #3E4552;          /* texte secondaire */
  --ink-3: #545C6A;          /* libellés, aides – rien de plus clair pour du texte lisible */
  --ink-disabled: #8A919C;   /* texte d'un élément désactivé (exempté de contraste, toujours doublé d'un état) */
  --inverse: #0B0D12;        /* éléments inversés : vendeur choisi, message temporaire, info-bulle */
  --on-inverse: #FFFFFF;
  --on-inverse-2: #B8C0CC;

  /* ── Bordures ───────────────────────────────────────────────────────────────── */
  --border: #D9DDE3;         /* séparations, contours de cartes (décoratifs) */
  --border-strong: #7F8794;  /* contour des champs et des contrôles (3:1) */
  --focus: #0B0D12;          /* anneau de focus clavier (doublé d'un liseré --surface) */

  /* ── États sémantiques (texte + fond doux) ──────────────────────────────────── */
  --ok: #15803D;      --ok-bg: #EEF8F1;
  --info: #1D4ED8;    --info-bg: #E8EEFD;
  --warn: #9A3412;    --warn-bg: #FDEEE3;     /* avertissement doux : tournée ancienne, alerte adresse */
  --danger: #B3261E;  --danger-bg: #FCECEA;   /* erreur, action destructrice (clôturer) */
  --offline: #9A3412; --offline-bg: #FDEEE3;  /* hors connexion, actions en attente */

  /* ── Palette de données (4/11, design v2) : pictos des tuiles KPI, et demain les séries des graphiques. Distincte
     des vendeurs, des statuts de rue, des catégories et des chartes (ΔE ≥ 20, verifier_contrastes.py) ; jamais
     remplacée par la couleur de la société. Picto (3:1 sur son fond doux -bg) ──────────────────────────────── */
  --donnee-1: #247AA8;  --donnee-1-bg: #E5EFF5;   /* azur : tournées */
  --donnee-2: #138613;  --donnee-2-bg: #E3F0E3;   /* vert : utilisateurs */
  --donnee-3: #6F5720;  --donnee-3-bg: #EEEBE4;   /* ambre : communes, logements */
  --donnee-4: #B6208E;  --donnee-4-bg: #F6E4F1;   /* fuchsia : sociétés */
  --donnee-5: #6B2E2E;  --donnee-5-bg: #EDE6E6;   /* grenat : signalements */

  /* ── Carte (fond discret, la donnée ressort) ────────────────────────────────── */
  --map-bg: #EDEFF2;
  --map-block: #DCDFE5;      /* bâtiments (dessinés à tous les zooms) */
  --map-block-edge: #C6CBD3; /* leur contour */
  --map-field: #E3E8E0;      /* espaces verts */
  --map-water: #D5DEE8;
  --map-road: #FFFFFF;
  --map-road-edge: #CBD0D8;
  --map-label: #3E4552;      /* noms des rues et des lieux */
  --map-label-halo: #FFFFFF;
  --map-dot: #737B89;        /* points de porte en mode répartition */
  --map-decor: #A7ADB7;      /* tronçon sans nom ni logement : décor, jamais affectable */
  --map-zone: #0B0D12;       /* contour de la zone de la tournée */
  --map-zone-fill: rgba(11, 13, 18, .04);
  --map-gps: #1D4ED8;        /* « Me localiser » */
  --case: #0B0D12;           /* liseré autour des rues affectées */
  --tag-bg: #0B0D12;         /* étiquette posée sur une rue (initiales, portes utiles) */
  --tag-fg: #FFFFFF;
  --map-mask: rgba(11, 13, 18, .16); /* reste du monde, hors de la zone de la tournée */

  /* ── Statuts des rues (toujours doublés d'un motif et d'un symbole, voir DESIGN.md) ── */
  --st-vierge: #566070;
  --st-faite-dots: #FFFFFF;  /* pointillé central d'une rue faite */
  --st-bloquee: #A7ADB7;
  --st-bloquee-hatch: #1E2430;
  --st-pending: #E8590C;     /* en attente du réseau : tirets autour de la rue (loin des couleurs vendeurs) */
  --st-choisie: var(--brand);/* halo de la rue choisie… */
  --st-choisie-ring: #0B0D12;/* …cerclé de ce contour (le jaune seul ne contraste pas sur fond clair) */
  /* Largeurs des traits de la carte (pixels, lues par l'appli pour MapLibre) */
  --map-w-vierge: 2; --map-w-trait: 4.5; --map-w-case: 7.5; --map-w-bloquee: 6; --map-w-points: 2;
  --map-w-halo: 14; --map-w-anneau: 18; --map-w-zone: 1.5; --map-w-decor: 1;
  --map-iris-opacite: .18; --map-iris-opacite-survol: .4; /* choix de l'IRIS : teinte des quartiers, et du quartier survolé */
  --map-gps-r: 8; --map-gps-w: 3; --map-gps-precision: .15; /* « Me localiser » : rayon et contour du point, teinte de la précision */
  --tag-h: 20px;             /* étiquette posée sur une rue */

  /* ── Vendeurs : copie de la table palette_vendeurs (la base fait foi ; vérifié par le script des contrastes).
        Affichage : couleur de la base, ajustée au minimum pour que les initiales (noir ou blanc, le plus
        contrasté) atteignent 4,5:1 ; en clair vers le noir, en sombre éclaircie d'au moins --v-dark-mix. ──── */
  --v-rouge: #D32F2F;      --v-bordeaux: #880E4F;  --v-rose: #E91E63;     --v-magenta: #D500F9;
  --v-violet: #7B1FA2;     --v-mauve: #BA68C8;     --v-bleu-violet: #651FFF; --v-marine: #1A237E;
  --v-sarcelle: #00796B;   --v-cyan: #0097A7;      --v-olive: #827717;    --v-brun: #6D3200;
  --v-ocre: #A1661A;
  --v-dark-mix: 0;         /* part de blanc mêlée en sombre (0 en clair) */

  /* ── Catégories de points (Fibre Free ; chaque produit a les siennes en base) – doublées d'une forme ── */
  --cat-eligible: #1A7F3C;
  --cat-alerte: #C26A00;
  --cat-confirmer: #1F5FAD;
  --cat-boaf: #6B4FA0;
  --cat-non: #6B717A;
  --cat-autre: #23867A;
  --cat-non-confirmee: #FFFFFF;

  /* ── Squelettes de chargement ───────────────────────────────────────────────── */
  --skeleton: #E6E9EE;
  --skeleton-shine: #F3F5F8;

  /* ── Typographie ────────────────────────────────────────────────────────────── */
  --font-repli: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* sans « Roboto » : nom réservé à la police servie */
  --font-ui: var(--font-repli); /* titres et texte : Poppins, ou la police du thème client (Poppins en repli) */
  --font-data: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;   /* chiffres : jamais remplacée */
  /* Échelle brute : ne s'emploie QUE dans ce fichier. Partout ailleurs, l'échelle par rôle (--t-…) ci-dessous. */
  --fs-1: 13px;    /* minimum absolu hors carte */
  --fs-2: 15px;
  --fs-menu: 14px;
  --fs-3: 17px;
  --fs-4: 20px;
  --fs-5: 22px;
  /* Échelle par rôle (téléphone ; tablette et PC : bloc @media plus bas). Toute taille de texte passe par un rôle :
     tester_design.py refuse une taille écrite autrement. Graisses : 400, 500, 600 seulement ; <b> et <strong> en 600. */
  --t-page: var(--fs-5);            /* titre de page (h1) : « Tournées en cours », ville de la tournée */
  --t-section: var(--fs-4);         /* titre de section, de fenêtre : « Télécom », rubrique de l'Aide, titre d'une fiche */
  --t-sous-section: var(--fs-3);    /* titre de sous-section ou d'élément : « En chiffres », ville d'une carte, état vide */
  --t-sous-titre: var(--fs-1);      /* sous-titre sous un titre : IRIS / « Commune entière », « commune · n quartiers » */
  --t-menu-tel: var(--fs-2);        /* menus : une taille sur téléphone, une sur tablette et PC (bloc @media plus bas) */
  --t-menu-pc: var(--fs-menu);
  --t-menu: var(--t-menu-tel);      /* intitulé de menu (menu latéral, tiroir du téléphone) */
  --t-sous-menu: var(--t-menu-tel); /* intitulé de sous-menu et de menu déroulant (profil, ⋯, liste de choix, palette) */
  --t-texte: var(--fs-2);           /* texte courant, titre de ligne, champ, chiffre dans le texte */
  --t-secondaire: var(--fs-1);      /* texte secondaire : sous-lignes, encadrés, bulles, aides */
  --t-legende: var(--fs-1);         /* légende : « Depuis le… », libellés des compteurs, étiquettes, pastilles */
  --t-groupe: var(--fs-1);          /* intitulé de groupe : mono, capitales, espacé (« Ou affecter à ») */
  --t-champ: var(--fs-1);           /* libellé de champ */
  --t-chiffre-cle: var(--fs-5);     /* chiffre clé : « 2 677 logements restants à répartir » */
  --t-chiffre: var(--fs-3);         /* chiffre de compteur : bandeau, « En chiffres », fiche d'un vendeur */
  --t-bouton-principal: var(--fs-3);
  --t-bouton: var(--fs-2);
  --t-bouton-petit: var(--fs-1);    /* petit bouton, puce, liste de choix, champ d'une barre d'outils */
  --t-recherche: var(--fs-3);       /* champ de la recherche rapide (Ctrl K) */
  /* Sur la carte seulement (texte posé sur un halo, lu au zoom) : seule exception au minimum de 13 px */
  --t-carte-libelle: 12px;          /* noms des rues et des lieux-dits */
  --t-carte-chiffre: 11px;          /* logements d'un immeuble, dans son point */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.2;
  --lh-body: 1.45;
  --tracking-caps: .06em;    /* libellés de section en mono capitales */

  /* ── Espacements (grille de 4/8 px) ─────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ── Tailles fixes ──────────────────────────────────────────────────────────── */
  --touch: 44px;             /* zone tactile minimale */
  --ctl: 44px;               /* bouton secondaire, champ, bouton de carte */
  --ctl-lg: 52px;            /* bouton principal */
  --ctl-xl: 56px;            /* bouton principal d'une fiche */
  --icon: 20px;  --icon-sm: 16px;  --icon-lg: 24px;
  --icon-stroke: 2;
  --avatar-sm: 24px; --avatar: 32px; --avatar-lg: 44px;
  --avatar-xl: 96px;   /* photo de profil en grand : Mon compte, photo à valider (4/11) */
  --tabbar-h: 64px;
  --appbar-h: 56px;          /* bandeau du haut, fixe sur tous les écrans sauf la carte */
  --tiroir-w: 304px;         /* menu latéral du téléphone (glisse depuis la gauche) */
  --toast-w: 400px;          /* largeur maximale d'un message temporaire */
  --toast-teinte: 12%;       /* part de la couleur du type (ok, info, alerte, erreur) dans le fond du message */
  --toast-bord: 35%;         /* part de cette couleur dans son contour */
  --logo-h: 20px;            /* logo horizontal d'un produit (cartes, en-têtes) */
  --logo-h-tuile: 24px;      /* logo horizontal dans une tuile de choix du produit */
  --logo-clarte-pleine: .6;  /* en sombre, logo en blanc : pixel plus foncé que cette clarté (luminance) = blanc plein… */
  --logo-clarte-evidee: .9;  /* …plus clair que celle-ci = détail blanc évidé ; entre les deux, opacité intermédiaire */
  --logo-v: 56px;            /* logo vertical d'un produit (tuiles) */
  --picto: 20px;             /* picto d'un produit devant un texte : même carré pour tous les produits, logo centré */
  /* Picto devant un titre sur deux lignes (ville, puis IRIS ou « Commune entière ») : carré de la hauteur des deux
     lignes, calculée sur leurs tailles de texte ; carte de tournée (ville 17 px) et groupe de Mes rues (ville 20 px) */
  --picto-titre: calc(var(--t-sous-section) * var(--lh-tight) + var(--bw-strong) + var(--t-sous-titre) * var(--lh-body));
  --picto-titre-l: calc(var(--t-section) * var(--lh-tight) + var(--bw-strong) + var(--t-sous-titre) * var(--lh-body));
  --picto-dans-tuile: .55;   /* taille du logo dans sa tuile (part du côté de la tuile) */
  --titre-optique: 2px;      /* ville + zone descendues un peu face à la tuile : la ville en gras pèse en haut (centrage optique) */
  --point-menu: 6px;        /* point de la page ouverte dans un sous-menu (le groupe garde le trait) */
  --chasse-data: .6;         /* largeur d'un chiffre de --font-data, en part de sa taille (JetBrains Mono : 600/1000) */
  --btn-court-w: 104px;      /* boutons côte à côte d'une liste (« Choisir », « Demander ») */
  --porte-num-min: 80px;     /* largeur minimale d'un numéro dans le détail d'une rue (grille des numéros) */
  --carte-tournee-min: 320px;/* largeur minimale d'une carte de tournée (grille sur PC) */
  --input-court: 96px;       /* champ numérique court (logements par vendeur) */
  --dot-statut: 10px;        /* point de statut d'une ligne de rue */
  --vc-teinte: 16%;          /* part de la couleur du vendeur dans le fond de sa pastille choisie */
  --chip-h: 36px;            /* puces, chips de statut (dans une ligne tactile de 44 px) */
  --tile-v-h: 84px;          /* tuile vendeur (vitrine) */
  --vchip-h: 48px;           /* vignette vendeur de la carte */
  --marge-carte: 12px;       /* marge des panneaux flottants sur la carte du téléphone */
  --bar-h: 6px;              /* barre d'avancement */
  --gauge-h: 3px;            /* jauge de charge, trait de l'onglet actif */
  --dot: 10px;               /* pastille de couleur dans une étiquette */
  --check-mark: 12px;        /* coche des cases */
  --knob: 18px;              /* bouton de l'interrupteur */
  --handle-w: 40px; --handle-h: 4px; /* poignée du panneau du bas */
  --empty-icon: 64px;        /* pictogramme des états vides */
  --form-w: 420px;           /* formulaires, fiche sur PC */
  --champ-court: 200px;      /* champ court posé sur une page (PC) : SIREN, couleur, code (règle du 3/11) */
  --champ-moyen: 360px;      /* champ d'un nom, d'un libellé posé sur une page (PC) */
  --logo-marque: 20px;       /* logo d'une marque (intégration) devant son nom */
  --qr: 176px;               /* code QR de la double authentification (lisible à l'appareil photo) */
  --menu-w: 240px; --tooltip-w: 280px; --cmdk-w: 640px;
  --sidebar-w: 288px;        /* menu latéral (tablette et PC), déplié */
  --sidebar-w-mini: 72px;    /* replié : logo + icônes */
  --panel-w: 400px;          /* volet de la page de la tournée, à gauche de la carte (PC) */
  --content-max: 1376px;
  --lecture-w: 760px;        /* largeur de lecture sur grand écran : formulaires (nouvelle tournée), aide */
  --kpi-min: 150px;          /* largeur minimale d'une tuile KPI (4/11) : deux par ligne sur téléphone */
  --gestion-w: 1100px;       /* largeur maximale des listes et pages de gestion sur grand écran (règle du 4/11) */
  --gutter: 16px;            /* marge latérale téléphone */
  --gutter-pc: 32px;
  /* Point de bascule PC : 1024 px (écrit dans les @media, qui ne lisent pas les variables) */

  /* ── Rayons, bordures ───────────────────────────────────────────────────────── */
  --radius-sm: 8px;          /* badges, puces */
  --radius-md: 12px;         /* boutons secondaires, tuiles, champs */
  --radius-btn: 14px;        /* bouton principal, boutons de carte, message temporaire */
  --radius-lg: 16px;         /* panneaux flottants */
  --radius-sheet: 20px;      /* panneau du bas (coins hauts) */
  --radius-full: 999px;
  --bw: 1px;
  --bw-strong: 2px;

  /* ── Ombres et élévations ───────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(11, 13, 18, .08);
  --shadow-2: 0 1px 2px rgba(11, 13, 18, .08), 0 8px 24px rgba(11, 13, 18, .14);   /* panneaux flottants */
  --shadow-3: 0 2px 6px rgba(11, 13, 18, .10), 0 24px 48px rgba(11, 13, 18, .22);  /* fenêtres, palette */
  --shadow: var(--shadow-2);
  --glow: 0 0 0 0 transparent; /* halo des éléments actifs (sombre seulement) */
  --blur: 16px;              /* flou des panneaux flottants (PC seulement, jamais sur la carte du téléphone) */
  --z-float: 10; --z-sheet: 20; --z-nav: 30; --z-toast: 40; --z-overlay: 50; --z-palette: 60;

  /* ── Mouvement (coupé si l'appareil demande moins d'animations) ─────────────── */
  --dur-1: 150ms;            /* survol, appui, focus */
  --dur-2: 200ms;            /* apparition, bascule */
  --dur-3: 250ms;            /* panneau, fiche, validation */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
}

[data-theme="dark"], .t-dark {
  color-scheme: dark;
  --brand-glow: rgba(255, 204, 0, .35);

  --bg-page: #0B0D12;
  --surface: #151922;
  --surface-2: #1F242F;
  --surface-raised: #1B202A;
  --surface-hover: #252B37;
  --surface-pressed: #2C3340;
  --scrim: rgba(0, 0, 0, .62);
  --glass: rgba(21, 25, 34, .78);
  --toast-fond: rgba(27, 32, 42, .92);

  --ink: #F3F5F8;
  --ink-2: #C9CFD8;
  --ink-3: #A3ABB8;
  --ink-disabled: #6B7383;
  --inverse: #F3F5F8;
  --on-inverse: #0B0D12;
  --on-inverse-2: #3E4552;

  --border: #2C3340;
  --border-strong: #6B7383;
  --focus: #F3F5F8;

  --ok: #4ADE80;      --ok-bg: #0F2A1A;
  --info: #8AB4FF;    --info-bg: #142040;
  --warn: #FDBA74;    --warn-bg: #3A2112;
  --danger: #FF8A80;  --danger-bg: #3A1714;
  --offline: #FDBA74; --offline-bg: #3A2112;

  /* Palette de données en sombre (direction C) : éclaircie pour 4,5:1 sur --surface, fond doux mêlé à la surface */
  --donnee-1: #3E8AB2;  --donnee-1-bg: #1C2D3C;
  --donnee-2: #2F952F;  --donnee-2-bg: #1A2F24;
  --donnee-3: #927F56;  --donnee-3-bg: #2C2B2B;
  --donnee-4: #C95AAB;  --donnee-4-bg: #35253B;
  --donnee-5: #A07979;  --donnee-5-bg: #2E2A32;

  --map-bg: #0F1218;
  --map-block: #1B2029;
  --map-block-edge: #262C37;
  --map-field: #121813;
  --map-water: #101826;
  --map-road: #2A313D;
  --map-road-edge: #0A0C10;
  --map-label: #C9CFD8;
  --map-label-halo: #0F1218;
  --map-dot: #6E7788;
  --map-decor: #465062;
  --map-zone: #F3F5F8;
  --map-zone-fill: rgba(243, 245, 248, .04);
  --map-gps: #8AB4FF;
  --case: #E8ECF2;
  --tag-bg: #F3F5F8;
  --tag-fg: #0B0D12;
  --map-mask: rgba(0, 0, 0, .42);

  --st-vierge: #9AA3B2;
  --st-faite-dots: #0F1218;
  --st-bloquee: #465062;
  --st-bloquee-hatch: #C9CFD8;
  --st-pending: #FB923C;

  --v-dark-mix: .24;

  --cat-eligible: #34C26B;
  --cat-alerte: #F59E0B;
  --cat-confirmer: #6FA3F0;
  --cat-boaf: #A98BE0;
  --cat-non: #8A919C;
  --cat-autre: #3CC2B0;
  --cat-non-confirmee: #0F1218;

  --skeleton: #1F242F;
  --skeleton-shine: #2A303C;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .55);
  --shadow-3: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 56px rgba(0, 0, 0, .65);
  --glow: 0 0 0 1px var(--brand), 0 0 18px var(--brand-glow);
}

/* Tablette et PC (≥ 768 px) : menus un peu plus petits que le texte courant */
@media (min-width: 768px) {
  :root { --t-menu: var(--t-menu-pc); --t-sous-menu: var(--t-menu-pc); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

/* ── Thème client d'exemple (marque blanche) : société fictive « Exemple », pour la vitrine, les captures et les
      contrôles. Un vrai client reçoit les mêmes six jetons, posés par l'appli (Couleurs.appliquerCharte). ──────── */
[data-charte="exemple"], .charte-exemple {
  --brand: #2563EB;
  --brand-2: #0F172A;
  --on-brand: #FFFFFF;
  --on-brand-2: #FFFFFF;
  --brand-glow: rgba(37, 99, 235, .4);
  --font-ui: 'Source Sans 3', var(--font-repli);
}
[data-theme="dark"][data-charte="exemple"], [data-theme="dark"] .charte-exemple, .t-dark.charte-exemple,
.t-dark .charte-exemple { --brand-glow: rgba(37, 99, 235, .35); }