/* Jetons du Suivi : les couleurs, polices et ombres communes au Suivi v4, au Suivi simple et à « Nouvelle vente ».
   UN SEUL endroit pour les changer (regroupé le 13/10/2026 ; avant, chaque page en avait sa copie).

   Chaque couleur existe en clair et en sombre. Le sombre est écrit deux fois, à l'identique :
   une fois pour l'ordinateur réglé en sombre (thème « Auto »), une fois pour le thème forcé par le bouton.
   → toute valeur changée dans l'un des deux blocs sombres doit l'être dans l'autre.
   Un 4e jeu, « Nuit » (en fin de fichier), n'existe que forcé par le bouton du thème.

   Après toute modification : changer le ?v= du <link> dans suivi-v4.html, suivi-simple.html et nouvelle-vente.html. */
:root {
  /* Clair : fond « papier » chaud (jamais de blanc pur), cartes ivoire, encre quasi noire chaude,
     indigo plus profond que le sombre pour garder le contraste, ombres teintées (pas grises) */
  color-scheme: light;
  --bg: #eeebe4; --surface: #f9f7f2; --surface-2: #f3f0e9;
  --ink: #1f1c29; --ink-2: #4a4656; --muted: #6a6575; --line: #ddd8cd; --grid: #e6e1d7;
  --accent: #4b3ff0; --accent-soft: rgba(75, 63, 240, .1); --on-accent: #ffffff;
  --heat-0: #e6e2d9; --heat-1: #d3d0f0; --heat-2: #aba7ea; --heat-3: #827ce0; --heat-4: #5a54d6; --heat-5: #3a35ad;
  --f1: #2f7fe0; --f2: #13a394; --f3: #cfc8ba;
  /* ADV : --a1 Louise, --a2 Mélody, --a3 Alice, --a4 Théo, --a5 Jean-Marc, --a6 Johnny (la même table sur toutes les pages) */
  --a1: #d6246e; --a2: #0fa968; --a3: #f06414; --a4: #3d63f0; --a5: #d49a00; --a6: #0e9cc7;
  --elec: #a86a00; --gaz: #0b78a8;
  /* tuile phare en clair : émeraude → turquoise → océan, lumineux (le sombre garde son canard) */
  --big: linear-gradient(135deg, #10c47e 0%, #0bb3a4 50%, #0a86c2 100%); --big-ombre: 0 14px 34px rgba(11, 160, 170, .30);
  --shadow: 0 1px 2px rgba(64, 50, 30, .05), 0 10px 28px rgba(64, 50, 30, .07);
  --display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --body: 'Instrument Sans', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  /* Couleurs d'agence : LA source unique (15/10/2026). Chaque page (Suivi v4, En direct, Validées, Équipes, Suivi simple,
     visus RJC / Pons, Nouvelle vente) nomme l'agence par son nom court et lit ces variables, jamais un code couleur à elle.
     RJC n'a pas de couleur propre : ce sont ses trois agences (Landais, Launay, Ménard), chacune la sienne. */
  --ag-landais: #ec7418; --ag-launay: #7c4dff; --ag-menard: #12a150; --ag-pons: #2f6bff; --ag-avignon: #dca200; --ag-indep: #e0357a;
  /* Agences ajoutées après les 6 premières (16/10/2026, Louise : « pourquoi la plupart sont ternes et gris ») : aussi vives. */
  --ag-lyon: #da3380; --ag-hymery: #0db3a5; --ag-patrick: #bb2cc6; --ag-marseille: #0baee0; --ag-paris: #8ec620; --ag-aix: #ec81c0;
  /* Commerciaux (16/10/2026, piste B choisie par Louise) : chacun sa couleur vive parmi 24 réparties sur le cercle, sans lien avec
     l'agence, toujours la même pour une personne. Le choix est fait par js/couleur-commercial.js, jamais à la main. */
  --com-0: #3c79f0; --com-1: #8e9afe; --com-2: #8663e6; --com-3: #c380fe; --com-4: #b250c2; --com-5: #ec6fcf; --com-6: #cf428c; --com-7: #fe6c91; --com-8: #da4149; --com-9: #fe764e; --com-10: #c3610d; --com-11: #e48e14; --com-12: #a4780e; --com-13: #bea412; --com-14: #83870b; --com-15: #85b803; --com-16: #239a19; --com-17: #0ac378; --com-18: #089678; --com-19: #07bdb2; --com-20: #0d919a; --com-21: #19b7d7; --com-22: #0c8bbb; --com-23: #49abfd;
  /* --g1…--g6 : les anciens noms, gardés pour le code existant (même ordre : Landais, Launay, Ménard, Pons, Avignon, indépendants) */
  --g1: var(--ag-landais); --g2: var(--ag-launay); --g3: var(--ag-menard); --g4: var(--ag-pons); --g5: var(--ag-avignon); --g6: var(--ag-indep);
  /* États : bon, à regarder, mauvais ; ambre ; « conforme » (fuchsia, choix de Louise du 02/10/2026) */
  --ok: #0e7a45; --warn: #a84a08; --ko: #c2254a; --ambre: #935c00; --conforme: #b8179a;      /* ambre foncé le 16/10 : 4,7 de contraste même sur le fond (avant #c27a00, 3,2) */
  /* Étapes d'En direct : en cours, prête, en signature, signée, finalisée, annulée */
  --c-en_cours: #6a6575; --c-prete: #4b3ff0; --c-signature: #e08600; --c-signee: #13a05a; --c-finalisee: #0a93b0; --c-annulee: #dc3b5a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #11121c; --surface: #1b1c2b; --surface-2: #202133;
    --ink: #ececf4; --ink-2: #c1c3d6; --muted: #9194ad; --line: #2d2f45; --grid: #25263a;
    --accent: #8b8bff; --accent-soft: rgba(139, 139, 255, .14); --on-accent: #11121c;
    --heat-0: #23243a; --heat-1: #2f2f63; --heat-2: #40408f; --heat-3: #5555c0; --heat-4: #7373ea; --heat-5: #a3a3ff;
    --f1: #d9dae8; --f2: #8d90aa; --f3: #4a4c66;
    --a1: #b8437a; --a2: #45a874; --a3: #c9621e; --a4: #7a88dc; --a5: #b08a0c; --a6: #2a93b8;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --elec: #f5b83d; --gaz: #4cc3f0;
    --big: linear-gradient(135deg, #10b981 0%, #0d9488 48%, #0e5f73 100%); --big-ombre: 0 12px 32px rgba(13, 148, 136, .32);
    --ag-landais: #b36b12; --ag-launay: #9474d0; --ag-menard: #3f9a68; --ag-pons: #6f80d8; --ag-avignon: #a8900a; --ag-indep: #c2477e;
    --ag-lyon: #b74774; --ag-hymery: #3ea297; --ag-patrick: #9e42a5; --ag-marseille: #449ec3; --ag-paris: #8cb451; --ag-aix: #ce82ae;
    --com-0: #6496f4; --com-1: #a5b1fd; --com-2: #9b85ec; --com-3: #cf9efd; --com-4: #c376cf; --com-5: #f390da; --com-6: #dc6da2; --com-7: #fd93a9; --com-8: #e66e6d; --com-9: #fe987b; --com-10: #df7a32; --com-11: #f6a23c; --com-12: #c38e01; --com-13: #d3b72a; --com-14: #9ba003; --com-15: #9dc957; --com-16: #5caf54; --com-17: #53d490; --com-18: #0db28f; --com-19: #0dd3c6; --com-20: #06adb6; --com-21: #1fccef; --com-22: #15a5dd; --com-23: #78befd;
    --ok: #6fcf97; --warn: #f0a868; --ko: #e6848f; --ambre: #f0b25a; --conforme: #ea7af4;
    --c-en_cours: #9194ad; --c-prete: #8b8bff; --c-signature: #f0b25a; --c-signee: #6fcf97; --c-finalisee: #5ec8d8; --c-annulee: #e6848f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11121c; --surface: #1b1c2b; --surface-2: #202133;
  --ink: #ececf4; --ink-2: #c1c3d6; --muted: #9194ad; --line: #2d2f45; --grid: #25263a;
  --accent: #8b8bff; --accent-soft: rgba(139, 139, 255, .14); --on-accent: #11121c;
  --heat-0: #23243a; --heat-1: #2f2f63; --heat-2: #40408f; --heat-3: #5555c0; --heat-4: #7373ea; --heat-5: #a3a3ff;
  --f1: #d9dae8; --f2: #8d90aa; --f3: #4a4c66;
  --a1: #b8437a; --a2: #45a874; --a3: #c9621e; --a4: #7a88dc; --a5: #b08a0c; --a6: #2a93b8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --elec: #f5b83d; --gaz: #4cc3f0;
  --big: linear-gradient(135deg, #10b981 0%, #0d9488 48%, #0e5f73 100%); --big-ombre: 0 12px 32px rgba(13, 148, 136, .32);
  --ag-landais: #b36b12; --ag-launay: #9474d0; --ag-menard: #3f9a68; --ag-pons: #6f80d8; --ag-avignon: #a8900a; --ag-indep: #c2477e;
  --ag-lyon: #b74774; --ag-hymery: #3ea297; --ag-patrick: #9e42a5; --ag-marseille: #449ec3; --ag-paris: #8cb451; --ag-aix: #ce82ae;
  --com-0: #6496f4; --com-1: #a5b1fd; --com-2: #9b85ec; --com-3: #cf9efd; --com-4: #c376cf; --com-5: #f390da; --com-6: #dc6da2; --com-7: #fd93a9; --com-8: #e66e6d; --com-9: #fe987b; --com-10: #df7a32; --com-11: #f6a23c; --com-12: #c38e01; --com-13: #d3b72a; --com-14: #9ba003; --com-15: #9dc957; --com-16: #5caf54; --com-17: #53d490; --com-18: #0db28f; --com-19: #0dd3c6; --com-20: #06adb6; --com-21: #1fccef; --com-22: #15a5dd; --com-23: #78befd;
  --ok: #6fcf97; --warn: #f0a868; --ko: #e6848f; --ambre: #f0b25a; --conforme: #ea7af4;
  --c-en_cours: #9194ad; --c-prete: #8b8bff; --c-signature: #f0b25a; --c-signee: #6fcf97; --c-finalisee: #5ec8d8; --c-annulee: #e6848f;
}

/* Nuit (15/10/2026) : le 4e thème du bouton, pour le soir. Plus doux que Sombre : fond presque noir et chaud (brun, pas bleu),
   textes moins blancs (contraste réduit mais lisible), indigo atténué, couleurs de sens adoucies, presque pas de halo.
   Choisi seulement par le bouton (jamais par « Auto »). Les pages qui demandent « est-ce sombre ? » doivent compter « nuit » avec « dark ». */
:root[data-theme="nuit"] {
  color-scheme: dark;
  --bg: #12100e; --surface: #1a1714; --surface-2: #1f1c18;
  --ink: #ddd5c8; --ink-2: #b5ad9f; --muted: #8b8377; --line: #2c2823; --grid: #24201c;
  --accent: #9f96d6; --accent-soft: rgba(159, 150, 214, .12); --on-accent: #12100e;
  --heat-0: #221e1a; --heat-1: #2c2a3e; --heat-2: #3a3760; --heat-3: #4c4983; --heat-4: #6662a6; --heat-5: #8984c4;
  --f1: #cfc7ba; --f2: #8b8377; --f3: #48423b;
  --a1: #a54d74; --a2: #4b9871; --a3: #b2673a; --a4: #7480bd; --a5: #a08932; --a6: #3f8aa6;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 22px rgba(0, 0, 0, .3);
  --elec: #d6a650; --gaz: #62acc9;
  --big: linear-gradient(135deg, #12916c 0%, #107670 48%, #134f5c 100%); --big-ombre: 0 8px 22px rgba(0, 0, 0, .35);
  --ag-landais: #a86a2c; --ag-launay: #8a76b8; --ag-menard: #4b8d68; --ag-pons: #6e7cbd; --ag-avignon: #9c8a34; --ag-indep: #ad587f;
  --ag-lyon: #a3486b; --ag-hymery: #48968c; --ag-patrick: #8e4493; --ag-marseille: #4d93b1; --ag-paris: #87a959; --ag-aix: #bd7fa2;
  --com-0: #638bd5; --com-1: #929def; --com-2: #8e7ecf; --com-3: #b890df; --com-4: #ae72b7; --com-5: #d486c0; --com-6: #c36c94; --com-7: #e48398; --com-8: #cb6c6b; --com-9: #e5886e; --com-10: #c57542; --com-11: #d7954b; --com-12: #b08423; --com-13: #baa442; --com-14: #8e9331; --com-15: #90b25c; --com-16: #5f9e59; --com-17: #5cbb86; --com-18: #16a384; --com-19: #22bcb1; --com-20: #179fa7; --com-21: #2ab6d5; --com-22: #2698c8; --com-23: #62abec;
  --ok: #6fb68c; --warn: #d39a6c; --ko: #cf8189; --ambre: #d4a660; --conforme: #c985cf;
  --c-en_cours: #8b8377; --c-prete: #9f96d6; --c-signature: #d4a660; --c-signee: #6fb68c; --c-finalisee: #63adb9; --c-annulee: #cf8189;
}

/* Échelles (15/10/2026, étape 0 de l'upgrade visuel) : les crans permis pour les espacements, arrondis, tailles de texte,
   ombres, durées, courbes et couches. Bâties sur les valeurs les plus employées dans les feuilles du Suivi ; les mêmes dans
   tous les thèmes (rien à recopier dans les blocs sombres). Appliquées partout depuis la vague 1 de l'upgrade visuel (16/10) :
   une nouvelle valeur prend un cran, jamais un nombre écrit en dur. Ce qui reste en dur est voulu (calc, clamp, très grandes
   marges, animations en boucle). Une valeur entre deux crans va au plus proche, et vers le plus grand pour l'air autour d'un bloc. */
:root {
  /* Un choix fait (onglet, filtre, bouton de vue) : jamais un bloc noir (Louise, 15/10 : « sélection douce, teintée ») —
     fond indigo teinté, trait fin indigo, texte indigo, comme les vues d'En direct */
  --choix-fond: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --choix-trait: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent);
  --choix-bord: color-mix(in srgb, var(--accent) 55%, var(--line));     /* pour un bouton qui a déjà un contour */
  /* Les voiles : derrière un panneau (celui d'En direct, léger et flou) et derrière une fenêtre de dialogue (plus sombre) */
  --voile: rgba(10, 11, 20, .35); --voile-flou: blur(4px);
  --voile-fort: rgba(10, 11, 20, .5); --voile-fort-flou: blur(6px);

  /* Le blanc pur, toujours le même quel que soit le thème : texte et marques posés sur une couleur (tuile phare, bouton plein,
     pastille de nombre), fond des captures d'écran */
  --blanc: #fff;

  /* Espacements (marges intérieures, écarts entre éléments) — avant : 73 valeurs d'écart et 284 de marge */
  --esp-3xs: 2px; --esp-2xs: 4px; --esp-xs: 6px; --esp-s: 8px; --esp-m: 10px; --esp-l: 12px;
  --esp-xl: 16px; --esp-2xl: 20px; --esp-3xl: 24px; --esp-4xl: 32px; --esp-5xl: 48px;

  /* Arrondis — avant : 37 valeurs */
  --rayon-xs: 4px;        /* touches, petites marques */
  --rayon-s: 8px;         /* petits boutons, options serrées */
  --rayon-m: 12px;        /* boutons, champs, options de menu, petites cartes */
  --rayon-l: 16px;        /* tuiles de chiffre, menus ouverts, cadre du tableau */
  --rayon-xl: 20px;       /* cartes, dialogues */
  --rayon-2xl: 24px;      /* panneaux flottants (goût du 15/10 : décollés de 12 px, coins de 24 px) */
  --rayon-pilule: 999px; --rayon-rond: 50%;

  /* Tailles de texte — avant : 57 tailles, de 10 à 40 px ; 12 px est le plancher (« textes pas trop petits ») */
  --texte-xs: 12px;       /* intitulés en capitales, mentions */
  --texte-s: 13px;        /* tableau, boutons, sous-lignes */
  --texte-m: 14px;        /* texte des cartes et des listes */
  --texte-l: 15px;        /* texte courant, valeur d'un champ */
  --texte-xl: 17px;       /* titre d'un petit bloc */
  --texte-2xl: 21px;      /* titre d'une carte */
  --texte-3xl: 26px;      /* chiffre d'une tuile, titre du panneau */
  --texte-4xl: 34px;      /* gros chiffres */
  --texte-phare: 44px;    /* chiffre de la tuile phare */
  --texte-titre: clamp(34px, 3.3vw, 46px); /* titre de page, sur une ligne (dessin v5, 16/10/2026 ; avant : clamp(38px, 6vw, 64px)) */

  /* Ombres — avant : 94 valeurs */
  --ombre-carte: var(--shadow);                                      /* carte posée sur la page */
  --ombre-survol: 0 2px 4px rgba(26, 26, 46, .05), 0 16px 36px rgba(26, 26, 46, .1); /* carte cliquable survolée */
  --ombre-menu: var(--shadow), 0 18px 40px -18px rgba(0, 0, 0, .35); /* menu ou liste ouverte */
  --ombre-flottant: 0 18px 50px rgba(0, 0, 0, .22);                  /* toast, barre qui flotte en bas */
  --ombre-panneau: 0 30px 90px rgba(0, 0, 0, .3);                    /* panneau latéral flottant */
  --ombre-dialogue: 0 30px 80px rgba(0, 0, 0, .45);                  /* fenêtre de dialogue */
  --anneau: 0 0 0 3px var(--accent-soft);                            /* halo d'un champ en saisie */

  /* Durées — avant : 46 valeurs. Règle : la sortie est plus rapide que l'entrée (une sortie prend le cran du dessous) */
  --duree-instant: 120ms; /* retour d'un clic */
  --duree-vif: 160ms;     /* survol : couleurs, contours */
  --duree-courte: 240ms;  /* ce qui s'en va, petits mouvements */
  --duree-moyenne: 420ms; /* ce qui arrive : panneau, menu, pastille qui glisse */
  --duree-ample: 620ms;   /* mouvement ample : un élément qui vole, un rebond */
  --duree-scene: 900ms;   /* grande scène : rideau, entrée d'un écran */
  --cascade: 55ms;        /* écart entre deux éléments qui arrivent un par un */

  /* Courbes — avant : 25 valeurs */
  --courbe-entree: cubic-bezier(0.23, 1, 0.32, 1);    /* ce qui arrive : part vite, freine en douceur (= --vm-sortie) */
  --courbe-sortie: cubic-bezier(0.4, 0, 1, 1);        /* ce qui s'en va : part doucement, file */
  --courbe-rebond: cubic-bezier(0.34, 1.56, 0.64, 1); /* dépasse un peu puis revient : toast, pastille, « pop » */
  --courbe-glisse: cubic-bezier(0.77, 0, 0.175, 1);   /* ce qui traverse l'écran (= --vm-glisse) */
  --courbe-rideau: cubic-bezier(0.32, 0.72, 0, 1);    /* rideau, panneau qui glisse loin (= --vm-rideau) */

  /* Couches (z-index), du dessous au dessus. « Un cran au-dessus » : calc(var(--couche-…) + 1).
     Les listes maison de js/v4-select.js sont à 2000 (écrit dans le script), comme --couche-alerte. */
  --couche-sous: -1;             /* décor glissé sous son élément (pastille qui glisse, halo, fête) */
  --couche-fond: 0;              /* fonds animés de la page, pastille des onglets */
  --couche-dessus: 1;            /* un cran au-dessus de ses voisins (onglet sur sa pastille, grain) */
  --couche-colle: 2;             /* en-têtes collants, contenu au-dessus du fond animé */
  --couche-bulle: 5;             /* bulle d'aide, suggestions sous un champ, voile de dépôt dans une carte */
  --couche-menu: 10;             /* listes ouvertes et rideau de fin des pages simples (Suivi simple, visus, Nouvelle vente, connexion) */
  --couche-panneau-simple: 15;   /* panneau du Suivi simple (son voile juste en dessous) */
  --couche-voile: 20;            /* voile d'En direct (sa fiche juste au-dessus), menus ouverts du Suivi */
  --couche-toast: 30;            /* toasts et listes déroulantes des onglets */
  --couche-flottant: 40;         /* barre des actions groupées, liste des filtres d'En direct */
  --couche-recherche: 50;        /* recherche plein écran du Suivi simple, voile de Validées */
  --couche-panneau: 1100;        /* panneaux latéraux du Suivi (leur voile à ce niveau, le panneau un cran au-dessus ; le fil du jour 50 en dessous) */
  --couche-notif: 1200;          /* toasts du Suivi, voile de « Nouvelle vente » */
  --couche-vol: 1300;            /* la vente qui vole dans le tableau */
  --couche-dialogue: 1500;       /* ⌘K, envoi de contrats, menu Yousign */
  --couche-alerte: 2000;         /* toast au-dessus des dialogues */
  --couche-connexion: 3000;      /* écran de reconnexion */
  --couche-rideau: 9000;         /* rideaux plein écran (entrée après connexion, mode réunion) */
  --couche-direct: 9500;         /* aperçu du direct, au-dessus de tout */
}

/* Petites icônes dessinées à la place des emojis (15/10/2026 : « pas d'emoji dans l'interface »).
   <span class="v4i v4i-eclair" aria-hidden="true"></span> : trait fin, 14 px, de la couleur du texte autour (currentColor),
   posée sur la ligne du texte. Le dessin est un SVG dans la feuille de style : aucune page n'a de script à charger.
   Forme courte sans espace, pour les textes du Suivi v4 qui coupent au premier espace : <span class=v4i-alerte></span>. */
.v4i, [class^="v4i-"] { display: inline-block; width: 14px; height: 14px; flex: none; vertical-align: -2px; background-color: currentColor;
  -webkit-mask: var(--v4i) center / contain no-repeat; mask: var(--v4i) center / contain no-repeat; }
.v4i-eclair { --v4i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M13.5 2.5 5 13.5h6.2L10.5 21.5 19 10.5h-6.2l.7-8Z'/%3E%3C/svg%3E"); }
.v4i-flamme { --v4i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5c-3.6 0-6-2.5-6-5.8 0-3.6 2.7-5.4 3.8-8.7.2 1.9 1 3 2 3.6.4-3.1 1.7-5.4 3.6-7.1-.2 3.4 2.6 5.6 2.6 10.1 0 4.3-2.5 7.9-6 7.9Z'/%3E%3Cpath d='M12 21.5c-1.5 0-2.5-1.1-2.5-2.6 0-1.7 1.4-2.6 2.1-4.1.9 1.1 2.9 2.2 2.9 4.1 0 1.5-1 2.6-2.5 2.6Z'/%3E%3C/svg%3E"); }
.v4i-alerte { --v4i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.6A2 2 0 0 0 4.3 20.5h15.4a2 2 0 0 0 1.7-2.9L13.7 4.2a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.5v4.2'/%3E%3Cpath d='M12 17h.01' stroke-width='2.4'/%3E%3C/svg%3E"); }
.v4i-attente { --v4i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h11M6.5 21h11'/%3E%3Cpath d='M8 3v2.8c0 2.2 4 3.9 4 6.2s-4 4-4 6.2V21M16 3v2.8c0 2.2-4 3.9-4 6.2s4 4 4 6.2V21'/%3E%3C/svg%3E"); }
.v4i-trombone { --v4i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 11.2-8 8a5 5 0 0 1-7.1-7.1l8.4-8.4a3.3 3.3 0 0 1 4.7 4.7l-8.4 8.4a1.7 1.7 0 0 1-2.4-2.4l7.7-7.7'/%3E%3C/svg%3E"); }
.v4i-telecharger { --v4i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11.5M7 10.5l5 5 5-5M4.5 20h15'/%3E%3C/svg%3E"); }
.v4i-fete { --v4i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5 8.2 7.8l8 8-12.7 4.7Z'/%3E%3Cpath d='M6.3 13 11 17.7M5 16.6l2.4 2.4'/%3E%3Cpath d='M13.5 3.5c.8 1.6.4 3.3-1 4.4M20.5 10.5c-1.6-.8-3.3-.4-4.4 1M15.5 8.5l4-4'/%3E%3Cpath d='M17.5 3h.01M21 6.5h.01M10 3.5h.01M20.5 14h.01' stroke-width='2.4'/%3E%3C/svg%3E"); }
.v4i-couronne { --v4i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 17.5 3 7.5l5 4 4-6.5 4 6.5 5-4-1.5 10h-15Z'/%3E%3Cpath d='M5 20.5h14'/%3E%3C/svg%3E"); }
/* Variante qui suit la taille du texte (gros boutons, titres) au lieu des 14 px */
.v4i.v4i-em { width: 1em; height: 1em; vertical-align: -.14em; }