/* Kit d'interface commun (W0, 30/09/2026) : feuille chargée par le portail ET l'administration, après la feuille de
   chaque surface. Jetons de chaque surface repris sous un seul nom (--line / --border, --raised / --surface2,
   --red / --error). Guide : docs/UI-KIT.md. Aucune couleur écrite en dur hors des jetons ci-dessous. */
:root {
  --uk-ligne: var(--line);
  --uk-releve: var(--raised);
  --uk-danger: var(--red);
  /* R1 (10/10, ticket #93) : rayons à l'échelle de la marque (4 px), couleurs lues dans /jetons.css (seule source). */
  --uk-rayon: var(--rf-rayon);
  /* Ticket #34 (05/10) : éléments superposés (fenêtres, menus, infobulles, toasts, palette) — même bordure, même rayon,
     même ombre ; barres de défilement fines (pouce aux jetons, contraste ≥ 3:1 sur les surfaces, plus marqué au survol). */
  --uk-rayon-flottant: var(--rf-rayon);
  --uk-ombre-flottant: 0 12px 32px var(--rf-ombre);
  --uk-ombre-fenetre: 0 24px 64px var(--rf-ombre-forte);
  --uk-voile: var(--rf-voile);
  --uk-barre-pouce: color-mix(in srgb, var(--text) 42%, transparent);
  --uk-barre-pouce-survol: color-mix(in srgb, var(--text) 62%, transparent);
  /* Graphiques (méthode dataviz, docs/UI-KIT.md › Graphiques) : 8 séries dans un ordre fixe, issues des jetons de la
     marque (citron, électrique, ambre, sauge… ; forêt en clair) ; série unique = accent de la marque. */
  --gr-s1: var(--rf-serie-1); --gr-s2: var(--rf-serie-2); --gr-s3: var(--rf-serie-3); --gr-s4: var(--rf-serie-4);
  --gr-s5: var(--rf-serie-5); --gr-s6: var(--rf-serie-6); --gr-s7: var(--rf-serie-7); --gr-s8: var(--rf-serie-8);
  --gr-serie: var(--accent);
  --gr-neutre: var(--muted);
  /* États réservés (jamais pour une série quelconque), toujours avec un libellé. */
  --gr-bon: var(--rf-bon); --gr-attention: var(--rf-attention); --gr-serieux: var(--rf-serieux); --gr-critique: var(--rf-critique);
  --gr-info: var(--rf-info);
  /* Ticket #52 (07/10) : calque des micro vidéos (curseur et légende), mêmes couleurs dans les deux thèmes. */
  --uk-calque-fond: var(--rf-calque-fond); --uk-calque-texte: var(--rf-calque-texte); --uk-calque-trait: var(--rf-calque-trait); --uk-calque-ombre: var(--rf-calque-ombre);
}
:root[data-theme="light"] {
  --uk-barre-pouce: color-mix(in srgb, var(--text) 55%, transparent);
  --uk-barre-pouce-survol: color-mix(in srgb, var(--text) 72%, transparent);
}

/* Pictogramme Lucide hors vignette : taille par défaut (les vignettes gardent la leur, vignette.css). */
.vg-picto { width: 18px; height: 18px; flex: none; }

/* --- En-tête de page -------------------------------------------------------------------------------------- */
.uk-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 24px; margin: 0 0 26px; }
.uk-entete-texte { display: flex; align-items: center; gap: 16px; min-width: 0; }
.uk-entete-texte > div { min-width: 0; }
.uk-entete .uk-surtitre { margin: 0 0 8px; font-size: var(--rf-t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 650; }
.uk-entete h1 { margin: 0; font-size: var(--rf-t-4xl); line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
/* R1 (10/10) : fil au-dessus du surtitre, échelle de niveaux sur la ligne du surtitre (« Votre accompagnement »). */
.uk-entete-fil { margin: 0 0 6px; color: var(--muted); font-size: var(--rf-t-s); }
.uk-surtitre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.uk-surtitre-ligne .uk-surtitre { margin: 0; }
.uk-echelle { display: inline-flex; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); overflow: hidden; font-size: var(--rf-t-xs); }
.uk-echelle > span { padding: 3px 10px; color: var(--muted); white-space: nowrap; }
.uk-echelle > span + span { border-left: 1px solid var(--uk-ligne); }
.uk-echelle > .uk-echelle-actuel { background: var(--accent); color: var(--ink); font-weight: 650; }
@media (max-width: 760px) { .uk-entete h1 { font-size: var(--rf-t-3xl); } }
.uk-entete .uk-sous-titre { margin: 10px 0 0; max-width: 680px; color: var(--muted); font-size: var(--rf-t-sm); }
.uk-entete-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
@media (max-width: 760px) {
  .uk-entete { flex-direction: column; }
  .uk-entete-actions { justify-content: flex-start; }
}

/* --- Onglets soulignés -------------------------------------------------------------------------------------- */
/* X0 (01/10) : le trait de base est une ombre intérieure (plus de bordure + marge négative des onglets, qui débordait
   d'un pixel en hauteur et faisait apparaître une barre verticale) ; défilement horizontal seul (barre fine du kit,
   visible quand les onglets débordent : « Défilement (05/10) »). */
.uk-onglets { display: flex; gap: 4px; margin: 0 0 22px; box-shadow: inset 0 -1px 0 var(--uk-ligne); overflow-x: auto; overflow-y: hidden; }
.uk-onglets > a, .uk-onglets > button {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; padding: 8px 12px; margin: 0;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-size: var(--rf-t-s); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.uk-onglets > a:hover, .uk-onglets > button:hover { color: var(--text); }
.uk-onglets > a[aria-current="page"], .uk-onglets > button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 650; }
.uk-onglets .uk-onglet-picto { width: 16px; height: 16px; }
.uk-onglet-indice { color: var(--muted); font-size: var(--rf-t-micro); }
.uk-panneau:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* --- Pastilles (filtres) ----------------------------------------------------------------------------------- */
.uk-filtres { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 0 0 16px; }
.uk-pastilles-groupe { display: flex; align-items: center; gap: 10px; min-width: 0; }
.uk-pastilles-nom { font-size: var(--rf-t-xs); color: var(--muted); }
.uk-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.uk-pastille {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 12px; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon);
  background: transparent; color: var(--muted); font-size: var(--rf-t-s); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.uk-pastille:hover { color: var(--text); border-color: var(--muted); }
.uk-pastille[aria-pressed="true"], .uk-pastille[aria-current="true"] { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 650; }
/* R1 : pastille à compte nul atténuée par une couleur de jeton (≥ 4,5:1 dans les deux thèmes), jamais par l’opacité. */
.uk-pastille[data-vide]:not([aria-pressed="true"]):not([aria-current="true"]) { color: var(--rf-texte-discret); border-style: dashed; }
.uk-pastille[data-vide] .uk-compte { background: transparent; color: var(--rf-texte-discret); box-shadow: inset 0 0 0 1px var(--uk-ligne); }
.uk-compte { min-width: 18px; padding: 0 6px; border-radius: var(--rf-rayon-rond); background: var(--uk-releve); color: var(--text); font-size: var(--rf-t-xs); font-variant-numeric: tabular-nums; text-align: center; font-weight: 600; }
/* R1 : compte « 0 » : discret mais lisible (couleur de jeton ≥ 4,5:1, filet au lieu du fond). */
.uk-compte-nul { background: transparent; color: var(--rf-texte-discret); box-shadow: inset 0 0 0 1px var(--uk-ligne); }
@media (max-width: 640px) {
  .uk-pastilles { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-width: 100%; padding-bottom: 2px; }
  .uk-pastilles-groupe { flex-direction: column; align-items: flex-start; width: 100%; gap: 6px; }
}

/* --- Pager ------------------------------------------------------------------------------------------------- */
.uk-pager { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; }
.uk-pager-page { color: var(--muted); font-size: var(--rf-t-s); font-variant-numeric: tabular-nums; }
.uk-pager [aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* --- État vide --------------------------------------------------------------------------------------------- */
.uk-vide { display: grid; justify-items: center; gap: 10px; padding: 36px 20px; text-align: center; border: 1px dashed var(--uk-ligne); border-radius: var(--uk-rayon); }
.uk-vide h2, .uk-vide h3 { margin: 4px 0 0; font-size: var(--rf-t-xl); }
.uk-vide p { margin: 0; max-width: 460px; color: var(--muted); }
.uk-vide-action { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

/* --- Badges : état (point + libellé) et pilule neutre -------------------------------------------------------- */
.uk-etat, .badge.uk-etat {
  --uk-ton: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon);
  background: var(--surface); color: var(--text); font-size: var(--rf-t-xs); font-weight: 600; line-height: 1.35; white-space: nowrap;
  /* Ticket #43 (05/10) : l’espace d’Instrument fait 0,19 em : à 12 px en graisse 600, il tombe à 2 px et « En retard » se lisait
     « Enretard ». Un peu d’espace entre les mots dans les badges et les pilules (pas ailleurs). */
  word-spacing: .15em;
}
.uk-etat-point { width: 7px; height: 7px; border-radius: 50%; background: var(--uk-ton); flex: none; }
.uk-etat-bon { --uk-ton: var(--gr-bon); }
.uk-etat-attention { --uk-ton: var(--gr-attention); }
.uk-etat-critique { --uk-ton: var(--gr-critique); }
.uk-etat-info { --uk-ton: var(--gr-info); }
.uk-etat-neutre { --uk-ton: var(--muted); }
.uk-pilule, .badge.uk-pilule {
  display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); background: transparent;
  color: var(--muted); font-size: var(--rf-t-xs); line-height: 1.4; white-space: nowrap;
  word-spacing: .15em; /* même raison que .uk-etat (ticket #43) */
}

/* --- Liens courts (05/10, ticket #37) : jamais d'URL brute ; ellipse plutôt que coupure en plein mot -------------- */
.uk-lien-court { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; min-width: 0; min-height: 24px; vertical-align: bottom; }
a.uk-lien-court { color: var(--accent); text-decoration: none; }
.uk-lien-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.uk-lien-court .uk-lien-texte { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.uk-lien-court:hover .uk-lien-texte { text-decoration-thickness: 2px; }
.uk-lien-fleche { flex: none; font-size: .9em; }

/* --- Chiffres clés ------------------------------------------------------------------------------------------- */
.uk-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 22px; }
.uk-chiffre { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px 18px; border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon); background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s; }
a.uk-chiffre:hover { border-color: var(--accent); }
.uk-chiffre-corps { display: grid; gap: 3px; min-width: 0; flex: 1; }
.uk-chiffre-libelle { font-size: var(--rf-t-xs); color: var(--muted); }
.uk-chiffre-valeur { font: 650 var(--rf-t-3xl)/1.15 Archivo, Arial, sans-serif; color: var(--text); overflow-wrap: anywhere; }
.uk-chiffre-sous { font-size: var(--rf-t-xs); color: var(--muted); }
/* Source et seuil d'un chiffre (ticket #101) : ligne discrète, la nature du seuil en étiquette (texte, jamais la couleur seule). */
.uk-source { display: grid; gap: 2px; margin: 8px 0 12px; font-size: var(--rf-t-xs); line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.uk-source:last-child { margin-bottom: 0; }
.uk-source-cle { font-weight: 650; }
.uk-source-nature { display: inline-block; padding: 0 6px; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); }
.uk-source-officielle { color: var(--text); }
.uk-tendance { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: var(--rf-t-xs); font-weight: 600; color: var(--text); }
.uk-tendance .uk-tendance-picto { width: 15px; height: 15px; color: var(--uk-ton); }
.uk-chiffre-serie { align-self: flex-end; }
/* W1b : une carte étroite passe la mini-courbe sous le texte plutôt que d'écraser le libellé. */
.uk-chiffre { flex-wrap: wrap; }
.uk-chiffre-corps { min-width: min(120px, 100%); }
.uk-chiffre-serie { margin-left: auto; }
/* W3 : état à la place de la valeur (« En ligne »), visuel décoratif sous la valeur (bande « mini »). */
.uk-chiffre-etat { display: flex; align-items: center; min-height: 32px; }
/* #35 : un état long (« En dessous de vos habitudes ») revient à la ligne dans une carte étroite, jamais coupé. */
.uk-chiffre-etat { min-width: 0; }
.uk-chiffre-etat .uk-etat { white-space: normal; max-width: 100%; }
.uk-chiffre-visuel { display: block; margin: 4px 0 2px; max-width: 220px; }
@media (prefers-reduced-motion: reduce) { .uk-chiffre { transition: none; } }

/* --- Lignes « à la Codex » -------------------------------------------------------------------------------------- */
.uk-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon); background: var(--surface); overflow: hidden; }
.uk-liste > li + li { border-top: 1px solid var(--uk-ligne); }
.uk-liste .vg-ligne { border: 0; border-radius: 0; background: transparent; }
.uk-ligne-ouvrir { display: grid; gap: 2px; min-width: 0; flex: 1; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; min-height: 24px; }
.uk-ligne-ouvrir:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* --- Réglages et dépôt (W1b, 30/09) ------------------------------------------------------------------------------ */
/* Titre de rubrique au-dessus d'une liste de lignes (Réglages d'un espace, Intégrations). */
.uk-rubrique { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: 26px 0 10px; }
.uk-rubrique:first-child { margin-top: 0; }
.uk-rubrique h2, .uk-rubrique h3 { margin: 0; font-size: var(--rf-t-l); }
.uk-rubrique p { margin: 0; color: var(--muted); font-size: var(--rf-t-s); flex-basis: 100%; order: 2; }
/* Interrupteur (role="switch") : piste de 40 × 24 px, la couleur n'est pas seule (position du bouton). */
.uk-interrupteur { position: relative; display: inline-flex; align-items: center; flex: none; min-width: 44px; min-height: 32px; padding: 0 2px; margin: 0; border: 0; background: none; cursor: pointer; }
label.uk-interrupteur { display: inline-flex; gap: 0; }
.uk-interrupteur input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.uk-inter-piste { position: relative; display: block; width: 40px; height: 24px; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon-rond); background: var(--uk-releve); transition: background .15s, border-color .15s; }
.uk-inter-bouton { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.uk-interrupteur[aria-checked="true"] .uk-inter-piste, .uk-interrupteur input:checked + .uk-inter-piste { background: var(--accent); border-color: var(--accent); }
.uk-interrupteur[aria-checked="true"] .uk-inter-bouton, .uk-interrupteur input:checked + .uk-inter-piste .uk-inter-bouton { transform: translateX(16px); background: var(--ink); }
.uk-interrupteur:focus-visible .uk-inter-piste, .uk-interrupteur input:focus-visible + .uk-inter-piste { outline: 2px solid var(--accent); outline-offset: 3px; }
.uk-interrupteur:disabled, .uk-interrupteur:has(input:disabled) { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .uk-inter-piste, .uk-inter-bouton { transition: none; } }
/* Zone de dépôt : toute la zone ouvre le sélecteur ; un fichier glissé la surligne. */
.uk-depot { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px; border: 1.5px dashed var(--uk-ligne); border-radius: var(--uk-rayon); background: var(--uk-releve); color: var(--text); cursor: pointer; transition: border-color .15s; }
.uk-depot:hover, .uk-depot.uk-depot-survol, .uk-depot:focus-within { border-color: var(--accent); }
.uk-depot-texte { display: grid; gap: 2px; min-width: 0; }
.uk-depot-texte strong { font-size: var(--rf-t-sm); }
.uk-depot-texte small { color: var(--muted); font-size: var(--rf-t-s); }
.uk-depot-choisir { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.uk-depot-nom { font-size: var(--rf-t-s); font-weight: 600; overflow-wrap: anywhere; }
.uk-depot-nom:empty { display: none; }
.uk-depot-champ { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .uk-depot { transition: none; } }
/* Sections d'une fiche latérale (identité, rôle, accès…) et liste de faits (terme / valeur). */
.uk-fiche-section { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--uk-ligne); }
.uk-fiche-section:last-child { padding-bottom: 0; border-bottom: 0; }
.uk-fiche-section > h3 { margin: 0; font-size: var(--rf-t-s); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.uk-faits { display: grid; gap: 8px; margin: 0; }
.uk-faits > div { display: flex; justify-content: space-between; gap: 12px; min-width: 0; font-size: var(--rf-t-s); }
.uk-faits dt { color: var(--muted); }
.uk-faits dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 600; }
.uk-fiche .uk-liste .vg-ligne { padding: 8px 10px; }
/* Chiffre clé dont la valeur est un texte (nom, date) : plus petit qu'un nombre. */
.uk-chiffre-texte .uk-chiffre-valeur { font-size: var(--rf-t-xl); line-height: 1.3; }
/* État à côté du sous-titre d'un en-tête (badges). */
.uk-entete-etat { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-right: 10px; vertical-align: middle; }
/* Progression (jauge ligne + texte) : complétude d'une fiche, mise en service. */
.uk-progression { display: grid; gap: 6px; min-width: 0; }
.uk-progression-texte { display: flex; justify-content: space-between; gap: 12px; font-size: var(--rf-t-s); color: var(--muted); }
.uk-progression-texte strong { color: var(--text); font-weight: 650; }
/* --- Recherche (W3) : un champ, une loupe, un bouton -------------------------------------------------------------- */
.uk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.uk-recherche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; max-width: 640px; }
.uk-recherche-champ { position: relative; display: flex; align-items: center; flex: 1 1 160px; min-width: 0; margin: 0; }
.uk-recherche-champ input { width: 100%; min-height: 40px; margin: 0; padding: 8px 12px 8px 36px; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); background: var(--surface); color: var(--text); }
.uk-recherche-champ .uk-recherche-picto { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.uk-recherche > button, .uk-recherche > .button { min-height: 40px; }

/* --- Carte d'un site -------------------------------------------------------------------------------------------- */
.uk-site { display: grid; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon); background: var(--surface); }
.uk-site:has(.uk-site-lien:focus-visible), .uk-site:hover { border-color: var(--accent); }
.uk-site-tete { display: flex; align-items: center; gap: 12px; min-width: 0; }
.uk-site-nom { display: grid; min-width: 0; }
.uk-site-nom > a, .uk-site-nom > strong { font-weight: 650; font-size: var(--rf-t-m); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.uk-site-nom small { color: var(--muted); font-size: var(--rf-t-xs); overflow-wrap: anywhere; }
.uk-site-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uk-site-etat small { color: var(--muted); font-size: var(--rf-t-xs); }
.uk-site-mesures { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.uk-site-mesures dt { font-size: var(--rf-t-micro); color: var(--muted); }
.uk-site-mesures dd { display: grid; gap: 6px; margin: 4px 0 0; }
.uk-site-mesures strong { font: 650 var(--rf-t-2xl)/1.2 Archivo, Arial, sans-serif; }
.uk-site-mesures .gr-spark { width: 100%; max-width: 140px; }
.uk-site-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--uk-ligne); }
.uk-site-pied small { color: var(--muted); font-size: var(--rf-t-xs); }
.uk-site-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
/* Carte d'un objet (W2) : même cadre que la carte d'un site, 2 à 4 chiffres utiles. */
.uk-carte-mesures { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 12px 16px; margin: 0; }
.uk-carte-mesures > div { min-width: 0; }
.uk-carte-mesures dt { font-size: var(--rf-t-micro); color: var(--muted); }
.uk-carte-mesures dd { display: grid; gap: 2px; margin: 4px 0 0; min-width: 0; }
.uk-carte-mesures strong { font: 650 var(--rf-t-2xl)/1.2 Archivo, Arial, sans-serif; }
.uk-carte-mesures small { color: var(--muted); font-size: var(--rf-t-xs); overflow-wrap: anywhere; }
.uk-carte-html { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; align-items: center; }
.uk-carte-mesure-lien { display: block; min-height: 24px; margin: -4px; padding: 4px; border-radius: var(--rf-rayon); color: inherit; text-decoration: none; }
.uk-carte-mesure-lien:hover, .uk-carte-mesure-lien:focus-visible { background: var(--uk-releve); }
.uk-carte-mesure-lien:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.uk-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
/* Bouton ou lien réduit à son pictogramme (nouvel onglet, « … ») : cible de 36 px, nom donné par aria-label. */
.uk-bouton-icone, .button.uk-bouton-icone { display: inline-grid; place-items: center; flex: none; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: var(--rf-rayon); }
.uk-bouton-icone .vg-picto { width: 18px; height: 18px; }

/* --- Fenêtres et éléments superposés (05/10, ticket #34) ---------------------------------------------------------------
   Un seul composant (ui-kit.js : ouvrirFiche, ouvrirFenetre, confirmer ; adaptateur des anciennes fenêtres #dialog) :
   fiche latérale (consulter, modifier un objet) ou fenêtre centrée compacte (confirmer, choix court). Même architecture :
   en-tête (vignette, titre, sous-titre, état, ✕), corps qui défile seul, pied fixé en bas (un primaire à droite,
   secondaires à côté, danger à gauche). Plein écran sous 640 px, hauteur en 100dvh. Règles : docs/UI-KIT.md. */
dialog.uk-fenetre, dialog.uk-confirmation {
  --uk-pad: 20px;
  position: fixed; margin: 0; padding: 0; max-width: 100%; overflow: hidden;
  border: 1px solid var(--uk-ligne); background: var(--surface); color: var(--text); box-shadow: var(--uk-ombre-fenetre);
}
dialog.uk-fenetre::backdrop, dialog.uk-confirmation::backdrop { background: var(--uk-voile); backdrop-filter: none; }
/* Fiche latérale : pleine hauteur, à droite (largeur en % : une barre de la page ne la coupe pas). */
dialog.uk-fenetre-laterale { inset: 0 0 0 auto; width: min(640px, 100%); height: 100vh; height: 100dvh; max-height: 100dvh; border-width: 0 0 0 1px; border-radius: 0; }
dialog.uk-fenetre-laterale.uk-fenetre-s { width: min(480px, 100%); }
dialog.uk-fenetre-laterale.uk-fenetre-l, dialog.uk-fiche.uk-fiche-large { width: min(720px, 100%); }
dialog.uk-fenetre-laterale.uk-fenetre-xl { width: min(1180px, 100%); }
/* Éditeurs des anciennes fenêtres (accès, catalogue, composition de campagne, éditeur de la newsletter) : fiche large. */
dialog.uk-fenetre-laterale:is(.access-dialog, .cat-dialog, :has(.campaign-composer)) { width: min(980px, 100%); }
dialog.uk-fenetre-laterale.nl-large { width: min(1280px, 100%); }
dialog.uk-fiche { width: min(480px, 100%); }
dialog.uk-fiche.uk-fiche-large { width: min(720px, 100%); }
/* Fenêtre centrée compacte (confirmation, choix court). */
dialog.uk-fenetre-centree { inset: 0; margin: auto; width: min(560px, calc(100% - 32px)); height: fit-content; max-height: calc(100dvh - 48px); border-radius: var(--uk-rayon-flottant); }
dialog.uk-fenetre-centree.uk-fenetre-s { width: min(480px, calc(100% - 32px)); }
dialog.uk-fenetre-centree.uk-fenetre-l { width: min(720px, calc(100% - 32px)); }
dialog.uk-fenetre-laterale[open] { animation: uk-fiche-entree .18s ease-out; }
dialog.uk-fenetre-centree[open] { animation: uk-fenetre-entree .14s ease-out; }
@keyframes uk-fiche-entree { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes uk-fenetre-entree { from { transform: translateY(8px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.uk-fenetre[open] { animation: none; } }
.uk-fenetre-cadre { display: flex; flex-direction: column; height: 100%; min-height: 0; }
dialog.uk-fenetre-centree .uk-fenetre-cadre { height: auto; max-height: calc(100dvh - 48px); }
/* En-tête : vignette, titre, sous-titre, état, ✕ (aria-label « Fermer ») en haut à droite. */
dialog .uk-fenetre-tete { display: flex; align-items: flex-start; gap: 12px; flex: none; margin: 0; padding: 18px var(--uk-pad) 14px; border-bottom: 1px solid var(--uk-ligne); }
.uk-fenetre-vignette { flex: none; display: inline-flex; }
.uk-fenetre-titres { flex: 1; min-width: 0; display: grid; gap: 5px; justify-items: start; }
.uk-fenetre-titres h2 { margin: 0; font-size: var(--rf-t-xl); line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; outline: none; }
.uk-fenetre-titres p { margin: 0; color: var(--muted); font-size: var(--rf-t-s); overflow-wrap: anywhere; }
.uk-fenetre-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.uk-fenetre-fermer, button.uk-fenetre-fermer { display: inline-grid; place-items: center; flex: none; width: 36px; min-width: 36px; height: 36px; min-height: 36px; margin: -4px -6px 0 0; padding: 0; border-radius: var(--rf-rayon); }
.uk-fenetre-fermer svg { width: 18px; height: 18px; }
/* Corps : seul à défiler. Les fiches du kit sont en sections (grille) ; le contenu des anciennes fenêtres garde son flux. */
.uk-fenetre-corps { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px var(--uk-pad); }
.uk-fenetre-corps > :first-child { margin-top: 0; }
.uk-fenetre-corps > :last-child { margin-bottom: 0; }
.uk-fiche-corps { display: grid; gap: 16px; align-content: start; }
/* Pied : fixé en bas ; un seul primaire, à droite ; secondaires à côté ; une action dangereuse passe à gauche. */
.uk-fenetre-pied, .uk-fenetre-corps .uk-pied-colle {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px;
  padding: 12px var(--uk-pad); border-top: 1px solid var(--uk-ligne); background: var(--surface);
}
.uk-fenetre-pied { flex: none; margin: 0; }
.uk-fenetre-pied > .primary, .uk-pied-colle > .primary { order: 2; }
/* Action dangereuse à côté d'un primaire (supprimer, annuler) : à gauche. Sans primaire (confirmation d'une suppression),
   l'action dangereuse EST l'action de la fenêtre : à droite, à la place du primaire. */
.uk-fenetre-pied > [data-uk-danger], .uk-pied-colle > [data-uk-danger], .uk-fenetre-pied:has(> .primary) > .danger, .uk-pied-colle:has(> .primary) > .danger { order: -1; margin-right: auto; }
.uk-fenetre-pied:not(:has(> .primary)) > .danger:not([data-uk-danger]), .uk-pied-colle:not(:has(> .primary)) > .danger:not([data-uk-danger]) { order: 2; }
/* Bloc d'actions d'un formulaire (il envoie le formulaire, il y reste) : collé au bas du corps qui défile. */
.uk-fenetre-corps .uk-pied-colle { position: sticky; bottom: 0; z-index: 2; margin: 18px calc(-1 * var(--uk-pad)) 0; }
.uk-fenetre-corps:has(.uk-pied-colle) { padding-bottom: 0; }
/* Fiche latérale : le formulaire occupe la hauteur, son pied est en bas même quand il est court. */
dialog.uk-fenetre-laterale .uk-fenetre-corps:has(> form.uk-fenetre-chaine) { display: flex; flex-direction: column; }
dialog.uk-fenetre-laterale .uk-fenetre-corps > form.uk-fenetre-chaine { flex: 1 0 auto; display: flex; flex-direction: column; gap: 18px; }
dialog.uk-fenetre-laterale form.uk-fenetre-chaine > .uk-pied-colle { margin-top: auto; }
/* Message (toast) posé dans la fenêtre : le toast de la page passe sous une fenêtre modale. */
.uk-fenetre-annonce { flex: none; margin: 0; padding: 10px var(--uk-pad); border-top: 1px solid var(--uk-ligne); background: color-mix(in srgb, var(--gr-bon) 12%, var(--surface)); font-size: var(--rf-t-s); }
.uk-fenetre-annonce-erreur { background: color-mix(in srgb, var(--uk-danger) 16%, var(--surface)); }
[data-theme="light"] dialog.uk-fenetre { box-shadow: var(--uk-ombre-fenetre); }
/* Mobile : plein écran (fiches et fenêtres), confirmation en bas d'écran sur toute la largeur. */
@media (max-width: 640px) {
  dialog.uk-fenetre, dialog.uk-fenetre-laterale, dialog.uk-fenetre-centree, dialog.uk-fiche, dialog.uk-fiche.uk-fiche-large {
    inset: 0; width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0;
  }
  dialog.uk-fenetre-centree.uk-fenetre-s, dialog.uk-confirmation { inset: auto 0 0 0; height: fit-content; max-height: 90dvh; border-width: 1px 0 0; border-radius: var(--uk-rayon-flottant) var(--uk-rayon-flottant) 0 0; }
  dialog.uk-fenetre-centree.uk-fenetre-s .uk-fenetre-cadre { max-height: 90dvh; }
  dialog.uk-fenetre { --uk-pad: 16px; }
  .uk-fenetre-pied > *, .uk-pied-colle > * { flex: 1 1 auto; }
}
/* Menu « ⋯ » d'une ligne (actions secondaires ou dangereuses) : liste flottante aux jetons du kit. */
.uk-plus { position: relative; display: inline-block; }
/* Une liste qui porte un menu « ⋯ » ne le coupe pas (ses lignes n'ont pas de fond qui déborderait des coins). */
.uk-liste:has(.uk-plus) { overflow: visible; }
/* Sous-menu flottant de la barre réduite : le nom de l'entrée en tête (l'infobulle ne s'affiche pas sur une entrée à sous-menu). */
@media (min-width: 761px) { .menu-reduit .uk-menu-sous::after { content: attr(aria-label); order: -1; padding: 4px 10px 6px; color: var(--muted); font-size: var(--rf-t-micro); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; } }
.uk-plus > summary { list-style: none; cursor: pointer; }
.uk-plus > summary::-webkit-details-marker { display: none; }
.uk-plus > summary .vg-picto { width: 18px; height: 18px; }
.uk-plus-liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 2px; min-width: 220px; max-width: min(320px, 80vw); padding: 6px;
  border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon-flottant); background: var(--surface); box-shadow: var(--uk-ombre-flottant);
}
.uk-plus-liste > button, .uk-plus-liste > a { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 7px 10px; border: 0; border-radius: var(--rf-rayon); background: none; color: var(--text); font-size: var(--rf-t-s); text-align: left; text-decoration: none; white-space: normal; }
.uk-plus-liste > button:hover, .uk-plus-liste > a:hover, .uk-plus-liste > :focus-visible { background: var(--uk-releve); }
.uk-plus-liste > .danger { color: var(--uk-danger); }
/* Menu « ⋯ » au pied d'une fenêtre : il s'ouvre vers le haut, aligné à gauche. */
.uk-fenetre-pied .uk-plus-liste, .uk-pied-colle .uk-plus-liste { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.uk-fenetre-pied > details.uk-plus > summary, .uk-pied-colle > details.uk-plus > summary { min-height: 40px; height: 40px; width: 40px; }
/* Autres éléments superposés : toast, palette Ctrl+K, infobulles des graphiques, listes déroulantes : même bordure, même
   rayon, même ombre que les fenêtres et les menus du kit. Le toast reste sous une fenêtre modale : son message est alors
   aussi posé DANS la fenêtre (ui-kit.js › annoncerDansFenetre). */
#toast { padding: 12px 16px; border-radius: var(--uk-rayon-flottant); background: var(--surface); color: var(--text); box-shadow: var(--uk-ombre-flottant); }
#toast.error { border-color: var(--uk-danger); }
dialog.palette { border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon-flottant); box-shadow: var(--uk-ombre-fenetre); }
dialog.palette::backdrop { background: var(--uk-voile); backdrop-filter: none; }
.gr-infobulle { border-radius: var(--uk-rayon-flottant); box-shadow: var(--uk-ombre-flottant); }
[data-theme="light"] .gr-infobulle { box-shadow: var(--uk-ombre-flottant); }
.service-filter .service-options { border-color: var(--uk-ligne); border-radius: var(--uk-rayon-flottant); box-shadow: var(--uk-ombre-flottant); }
/* Cibles d'au moins 24 px (WCAG 2.5.8) : fil d'Ariane, liens de retour, liens de carte, résumés repliables. */
:is(.fil-ariane a, .client-exit > a, a.admin-back, a.text-link, a.admin-text-link, a.uk-site-lien, a.ops-carte-lien) { display: inline-flex; align-items: center; min-height: 24px; }
details > summary { min-height: 24px; }
/* Infobulle de la barre réduite (placée en JS, position fixe : jamais coupée par la barre qui défile). */
.uk-bulle {
  position: fixed; z-index: 80; pointer-events: none; padding: 5px 9px; border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon-flottant);
  background: var(--surface); color: var(--text); font-size: var(--rf-t-xs); font-weight: 600; white-space: nowrap; box-shadow: var(--uk-ombre-flottant);
}
.uk-bulle[hidden] { display: none; }

/* --- Menu latéral (les deux surfaces) ------------------------------------------------------------------------------ */
.uk-barre-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.uk-reduire { display: inline-grid; place-items: center; flex: none; min-width: 32px; min-height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--rf-rayon); background: none; color: var(--muted); cursor: pointer; }
.uk-reduire:hover { color: var(--text); border-color: var(--uk-ligne); }
.uk-reduire svg { width: 18px; height: 18px; }
.uk-reduire .uk-menu-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uk-menu { display: grid; gap: 4px; align-content: start; min-height: 0; }
.uk-menu-groupe { display: grid; gap: 2px; }
.uk-menu-groupe + .uk-menu-groupe { margin-top: 8px; }
.uk-menu-titre { margin: 2px 12px 2px; font-size: var(--rf-t-micro); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.uk-menu-titre-bouton { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: calc(100% - 8px); margin: 4px 4px; padding: 6px 8px; min-height: 32px; border: 0; border-radius: var(--rf-rayon); background: none; cursor: pointer; }
.uk-menu-titre-bouton:hover { color: var(--text); background: var(--uk-releve); }
.uk-menu-liste, .uk-menu-sous { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.uk-menu-item { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.uk-menu-lien {
  display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; min-height: 36px; padding: 7px 11px; border: 1px solid transparent; border-radius: var(--rf-rayon);
  color: var(--muted); font-size: var(--rf-t-s); text-decoration: none;
}
.uk-menu-lien:hover { color: var(--text); background: var(--uk-releve); }
.uk-menu-lien[aria-current="page"] { color: var(--text); background: var(--uk-releve); border-color: var(--uk-ligne); font-weight: 650; }
.uk-menu-lien[aria-current="page"] .uk-menu-picto, .uk-sous-actif > .uk-menu-lien .uk-menu-picto { color: var(--accent); }
.uk-menu-picto { width: 18px; height: 18px; flex: none; }
.uk-menu-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uk-menu-externe { width: 14px; height: 14px; flex: none; opacity: .7; }
.uk-menu-compte { margin-left: auto; min-width: 1.5rem; padding: .1rem .4rem; border-radius: var(--rf-rayon-rond); background: var(--accent); color: var(--ink); font-size: var(--rf-t-micro); text-align: center; }
.uk-menu-deplier { display: inline-grid; place-items: center; min-width: 30px; min-height: 30px; margin-left: 2px; padding: 0; border: 0; border-radius: var(--rf-rayon); background: none; color: var(--muted); cursor: pointer; }
.uk-menu-deplier:hover { color: var(--text); background: var(--uk-releve); }
.uk-menu-chevron { width: 16px; height: 16px; transition: transform .15s ease; }
[aria-expanded="false"] > .uk-menu-chevron { transform: rotate(-90deg); }
.uk-menu-sous { flex-basis: 100%; margin: 2px 0 4px 20px; padding-left: 8px; border-left: 1px solid var(--uk-ligne); }
.uk-menu-sous .uk-menu-lien { min-height: 36px; padding: 6px 10px; font-size: var(--rf-t-s); }
.uk-menu-sous .uk-menu-picto { width: 16px; height: 16px; }
.uk-barre-pied { display: grid; gap: 10px; margin-top: auto; padding-top: 12px; }
.uk-barre-pied .uk-menu { flex: none; }
@media (prefers-reduced-motion: reduce) { .uk-menu-chevron { transition: none; } }

/* Logo réduit (favicon) : montré seulement quand le menu est réduit. */
.uk-barre-logo { display: none; width: 28px; height: 28px; }
/* Menu réduit (bureau seulement) : pictogrammes seuls, infobulle, groupes séparés par un trait, sous-menu flottant. */
@media (min-width: 761px) {
  .menu-reduit .uk-barre-tete > :not(.uk-reduire):not(.uk-barre-logo) { display: none; }
  .menu-reduit .uk-barre-logo { display: block; }
  .menu-reduit .uk-barre-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-reduit .uk-barre-tete { flex-direction: column; align-items: center; }
  .menu-reduit .uk-menu-texte, .menu-reduit .uk-menu-titre > span, .menu-reduit p.uk-menu-titre, .menu-reduit .uk-menu-externe, .menu-reduit .uk-menu-deplier {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .menu-reduit .uk-menu-lien { justify-content: center; gap: 0; padding: 8px; }
  .menu-reduit .uk-sous-actif > .uk-menu-lien { color: var(--text); background: var(--uk-releve); border-color: var(--uk-ligne); }
  .menu-reduit .uk-menu-compte { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px; font-size: var(--rf-t-micro); }
  .menu-reduit .uk-menu-groupe + .uk-menu-groupe { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--uk-ligne); }
  .menu-reduit .uk-menu-titre-bouton { display: none; }
  .menu-reduit .uk-menu-liste[hidden] { display: grid; }
  /* Infobulle : libellé de l'entrée au survol et au focus clavier (le nom reste lu par les lecteurs d'écran) : élément
     .uk-bulle placé en JS (ticket #34 : l'ancienne infobulle en ::after était coupée par la barre qui défile). */
  .menu-reduit :is(.uk-menu-lien, .uk-reduire, .admin-account > a) { position: relative; }
  /* Sous-menu (Mes services) en menu flottant : au survol ou au focus de l'entrée ; position fixe calculée en JS. */
  .menu-reduit .uk-menu-sous, .menu-reduit .uk-menu-sous[hidden] {
    display: none; position: fixed; left: 76px; top: 0; z-index: 60; min-width: 220px; margin: 0; padding: 6px;
    border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon-flottant); background: var(--surface); box-shadow: var(--uk-ombre-flottant);
  }
  /* Pont de survol entre l'entrée et le sous-menu (le survol ne se perd pas dans l'écart). */
  .menu-reduit .uk-menu-sous::before { content: ""; position: absolute; right: 100%; top: 0; width: 10px; height: 44px; }
  /* Affiché transparent le temps d'être placé (JS : classe uk-sous-place), jamais au mauvais endroit. Opacité et non
     visibilité : un lien du sous-menu qui a le focus le garde. */
  .menu-reduit .uk-a-sous:is(:hover, :focus-within) > .uk-menu-sous { display: grid; opacity: 0; pointer-events: none; }
  .menu-reduit .uk-a-sous.uk-sous-place:is(:hover, :focus-within) > .uk-menu-sous { opacity: 1; pointer-events: auto; }
  .menu-reduit .uk-menu-sous .uk-menu-texte { position: static; width: auto; height: auto; overflow: hidden; clip: auto; }
  .menu-reduit .uk-menu-sous .uk-menu-lien { justify-content: flex-start; gap: 10px; padding: 7px 10px; }
}
@media (max-width: 760px) { .uk-reduire { display: none; } }

/* --- Graphiques (ui-graphiques.js) ----------------------------------------------------------------------------------- */
/* Couleur d'une marque : classe gr-* → currentColor ; les textes gardent les couleurs de texte. */
.gr-trait { color: transparent; }
.gr-s1 { color: var(--gr-s1); } .gr-s2 { color: var(--gr-s2); } .gr-s3 { color: var(--gr-s3); } .gr-s4 { color: var(--gr-s4); }
.gr-s5 { color: var(--gr-s5); } .gr-s6 { color: var(--gr-s6); } .gr-s7 { color: var(--gr-s7); } .gr-s8 { color: var(--gr-s8); }
.gr-serie { color: var(--gr-serie); } .gr-neutre { color: var(--gr-neutre); } .gr-autres { color: var(--muted); }
.gr-bon { color: var(--gr-bon); } .gr-attention { color: var(--gr-attention); } .gr-serieux { color: var(--gr-serieux); } .gr-critique { color: var(--gr-critique); }
.gr-vide { color: var(--uk-ligne); } .gr-reference, .gr-comparaison { color: var(--text); }
:where(.gr-svg, .gr-jauge, .gr-bande-mini, .gr-repartition, .gr-spark) :where(rect, path, polygon, circle) { fill: currentColor; }
:where(.gr-svg, .gr-jauge, .gr-repartition) .gr-autres { fill-opacity: .45; }
.gr-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gr-defile { overflow-x: auto; margin-top: 8px; }
@media (max-width: 620px) { .gr-defile > .gr-large { min-width: 560px; } }
.gr-grille { stroke: var(--uk-ligne); stroke-width: 1; }
.gr-axe { fill: var(--muted); font-size: var(--rf-t-micro); font-variant-numeric: tabular-nums; }
.gr-ligne { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gr-comparaison.gr-ligne { stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .75; }
.gr-aire { fill-opacity: .1; stroke: none; }
.gr-point { stroke: var(--surface); stroke-width: 2; }
.gr-seuil { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.gr-curseur { stroke: var(--muted); stroke-width: 1; opacity: 0; pointer-events: none; }
.gr-curseur:has(+ .gr-cible:hover), .gr-curseur:has(+ .gr-cible:focus-visible) { opacity: .7; }
.gr-svg .gr-cible { fill: var(--text); fill-opacity: 0; outline: none; cursor: default; }
.gr-svg .gr-cible:hover, .gr-svg .gr-cible:focus { fill-opacity: .06; }
.gr-svg .gr-cible:focus-visible { stroke: var(--accent); stroke-width: 1.5; }
.gr-part { outline: none; cursor: default; transition: opacity .15s; }
.gr-part:hover, .gr-part:focus { opacity: .8; }
.gr-part:focus-visible { stroke: var(--accent); stroke-width: 2; }
.gr-jour { outline: none; }
.gr-jour:focus-visible, .gr-jour:hover { stroke: var(--text); stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .gr-part { transition: none; } }
/* Légende, parts, tableau équivalent */
.gr-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; font-size: var(--rf-t-xs); color: var(--muted); }
.gr-legende li { display: inline-flex; align-items: center; gap: 6px; }
.gr-legende strong { color: var(--text); font-weight: 600; }
.gr-cle { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: var(--rf-rayon); background: currentColor; }
.gr-cle.gr-autres { opacity: .45; }
.gr-cle-ligne, .gr-cle-tirets { height: 0; border-top: 2px solid currentColor; border-radius: 0; background: none; }
.gr-cle-tirets { border-top-style: dashed; }
.gr-donnees { margin-top: 10px; font-size: var(--rf-t-xs); }
.gr-donnees summary { cursor: pointer; color: var(--muted); min-height: 24px; }
.gr-donnees summary:hover { color: var(--text); }
.gr-donnees table { font-size: var(--rf-t-xs); }
.gr-donnees table :is(th, td) { padding: 6px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* R1 : les en-têtes de colonnes passent à la ligne : le tableau tient sans défiler (Coûts › Évolution, 8 colonnes, 1280 px). */
.gr-donnees table th { white-space: normal; min-width: 4.5em; vertical-align: bottom; }
.gr-vide-texte { margin: 8px 0; color: var(--muted); }
/* Barres horizontales et jauges */
.gr-barres { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.gr-barres li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; font-size: var(--rf-t-s); }
.gr-barres li .gr-jauge { grid-column: 1 / -1; grid-row: 2; }
.gr-barre-libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-barre-valeur { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.gr-jauge { display: block; width: 100%; height: 6px; }
.gr-jauge .gr-piste, .gr-repartition .gr-piste { fill: var(--uk-releve); }
.gr-jauge-cercle { width: 108px; height: 108px; flex: none; }
.gr-jauge-cercle .gr-piste { fill: none; stroke: var(--uk-releve); stroke-width: 9; }
.gr-jauge-cercle .gr-arc { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; }
.gr-jauge-cercle text { fill: var(--text); font: 600 var(--rf-t-3xl) Archivo, Arial, sans-serif; }
.gr-repartition { display: block; width: 100%; height: 8px; margin: 6px 0 2px; }
/* Anneau */
.gr-anneau { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 14px; align-items: center; }
.gr-anneau svg { width: 100%; height: auto; display: block; }
.gr-anneau .gr-centre { fill: var(--text); font-size: var(--rf-t-2xl); font-weight: 600; }
.gr-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--rf-t-s); min-width: 0; }
.gr-parts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 6px; align-items: center; }
.gr-parts li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-parts li small { grid-column: 2 / -1; color: var(--muted); font-size: var(--rf-t-micro); }
.gr-unique { display: grid; gap: 2px; }
.gr-unique strong { font: 600 var(--rf-t-3xl) Archivo, Arial, sans-serif; }
.gr-unique small { color: var(--muted); }
@container (max-width: 340px) { .gr-anneau { grid-template-columns: 1fr; justify-items: center; } .gr-anneau svg { max-width: 150px; } .gr-parts { width: 100%; } }
/* Disponibilité et mini-courbes */
.gr-bande { height: 34px; }
.gr-bande-axe { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--rf-t-xs); color: var(--muted); }
.gr-bande-mini { display: block; width: 100%; height: 8px; border-radius: var(--rf-rayon-fin); }
.gr-spark { display: block; width: 120px; height: 28px; }
.gr-spark .gr-ligne { stroke-width: 1.5; }
/* Infobulle (survol et clavier) */
.gr-infobulle {
  position: fixed; z-index: 70; pointer-events: none; min-width: 170px; max-width: min(300px, calc(100vw - 16px)); padding: 10px 12px;
  display: grid; gap: 4px; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); background: var(--surface); color: var(--text); font-size: var(--rf-t-xs); box-shadow: 0 8px 28px var(--rf-ombre);
}
.gr-infobulle[hidden] { display: none; }
.gr-infobulle > strong { font-weight: 600; }
.gr-infobulle-texte { color: var(--muted); overflow-wrap: anywhere; }
.gr-infobulle > div { display: grid; grid-template-columns: 12px auto minmax(0, 1fr); gap: 8px; align-items: center; }
.gr-infobulle b { font-weight: 650; font-variant-numeric: tabular-nums; }
.gr-infobulle div span { color: var(--muted); overflow-wrap: anywhere; }
.gr-trait { display: block; width: 12px; height: 0; border-top: 2px solid currentColor; }
@media (forced-colors: active) {
  .uk-etat, .uk-pilule, .uk-pastille, .gr-cle { border: 1px solid CanvasText; }
  .uk-etat-point { background: CanvasText; }
  .uk-inter-piste { border: 1px solid CanvasText; } .uk-inter-bouton { background: CanvasText; }
  .uk-interrupteur[aria-checked="true"] .uk-inter-piste, .uk-interrupteur input:checked + .uk-inter-piste { background: Highlight; }
}

/* --- Défilement (05/10, ticket #34 ; remplace « Défilement sans barre » du 01/10) ------------------------------------
   Décision d'Anthony du 05/10 : une zone qui défile le montre. Barres fines et discrètes, aux jetons du kit, sur TOUTES
   les zones qui défilent (barre latérale, onglets, pastilles, kanban, planning, tableaux, corps des fiches et des fenêtres,
   palette) et sur la page : pouce arrondi (--uk-barre-pouce, contraste ≥ 3:1 en clair et en sombre), plus marqué au
   survol de la zone. Pas de fondu de bord (il masquait la barre). C'est le SEUL endroit où se règle l'apparence des barres :
   aucune autre feuille ne pose scrollbar-width ni ::-webkit-scrollbar (contrôle : test/ui-regles.test.mjs).
   Une nouvelle zone qui défile : classe « uk-defile » (horizontale) ou « uk-defile-v » (verticale), rien d'autre. */
* { scrollbar-width: thin; scrollbar-color: var(--uk-barre-pouce) transparent; }
/* La page ne bouge pas quand sa barre apparaît ; elle ne défile pas sous une fenêtre modale. */
html { scrollbar-gutter: stable; }
html:has(dialog[open]:modal) { overflow: hidden; }
*:hover { scrollbar-color: var(--uk-barre-pouce-survol) transparent; }
/* Navigateurs sans scrollbar-width (Safari) : même rendu. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--rf-rayon-rond); background: var(--uk-barre-pouce) padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--uk-barre-pouce-survol) padding-box; }
@media (forced-colors: active) { * { scrollbar-color: auto; } }
.uk-defile { overflow-x: auto; overflow-y: hidden; }
.uk-defile-v { overflow-y: auto; overflow-x: hidden; }
/* Onglets : le contour de focus reste visible dans une zone qui coupe ce qui dépasse. */
.uk-onglets > a:focus-visible, .uk-onglets > button:focus-visible, .tabs a:focus-visible, .tabs button:focus-visible { outline-offset: -3px; }

/* --- Barre latérale : défile dans tous les modes, à toutes les hauteurs (05/10, ticket #34) ----------------------------
   Bureau (≥ 761 px) : en-tête et pied fixes, le menu principal défile (normal ET réduit) ; écran bas (< 560 px de haut) :
   toute la barre défile. En menu réduit, l'infobulle (.uk-bulle) et le sous-menu flottant sont en position fixe, placés
   en JS (ui-kit.js › installerMenuFlottant) : la zone qui défile ne les coupe plus. Mobile : bande horizontale qui défile. */
@media (min-width: 761px) {
  .uk-barre { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .uk-barre > * { flex: none; }
  .uk-barre > .uk-menu:not(.uk-menu-pied) { flex: 1 1 auto; min-height: 48px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .uk-barre .uk-menu-lien:focus-visible, .uk-barre .uk-menu-deplier:focus-visible, .uk-barre .uk-menu-titre-bouton:focus-visible { outline-offset: -2px; }
  .menu-reduit .uk-barre > .uk-menu:not(.uk-menu-pied) { scrollbar-gutter: stable; }
}
@media (min-width: 761px) and (max-height: 559px) {
  .uk-barre { overflow-y: auto; }
  .uk-barre > .uk-menu:not(.uk-menu-pied) { flex: none; min-height: 0; }
  .uk-barre .uk-barre-pied { margin-top: 12px; }
}

/* Liens réseaux sur les sites (01/10) : section « Réseaux sur le site » (admin › Sites › Réglages, portail › Mon site ›
   Réseaux, reseaux-site-ui.js) et aperçu du pied de page (mêmes classes rf-reseaux que le rendu sur le site). */
.lr-reseaux { display: grid; gap: 12px; }
.lr-tete { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.lr-tete .uk-rubrique { flex: 1 1 260px; margin: 0; }
.lr-reseaux form { display: grid; gap: 12px; margin: 0; }
.lr-sous-titre { margin: 6px 0 0; font-size: var(--rf-t-s); font-weight: 650; color: var(--muted); }
.lr-case { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin: 0; cursor: pointer; }
.lr-case input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.lr-case input:disabled { cursor: not-allowed; }
.lr-grise .vg-corps strong { color: var(--muted); }
.lr-ligne .vg-corps small { overflow-wrap: anywhere; }
.lr-reseaux .vg-corps strong { white-space: normal; }
/* Mobile : l'interrupteur, la case et l'état restent à droite de leur ligne (le texte passe à la ligne). */
@media (max-width: 480px) {
  .lr-reseaux .vg-ligne { flex-wrap: nowrap; }
  .lr-reseaux .vg-ligne .vg-corps { flex-basis: auto; }
  .lr-reseaux .vg-ligne > .vg + .vg-corps + .vg-etat { margin-left: 0; }
}
.lr-note { margin: 0; color: var(--muted); font-size: var(--rf-t-s); }
.lr-fiche { color: var(--accent); font-weight: 600; }
.lr-apercu { display: grid; gap: 8px; }
.lr-apercu h3 { margin: 6px 0 0; font-size: var(--rf-t-s); font-weight: 650; color: var(--muted); }
.lr-apercu-cadre { padding: 18px 16px; border: 1px dashed var(--uk-ligne); border-radius: var(--uk-rayon); background: var(--uk-releve); }
.lr-apercu-pied { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--text); }
.lr-apercu-pied small { color: var(--muted); font-size: var(--rf-t-xs); }
.lr-apercu-vide { margin: 0; color: var(--muted); font-size: var(--rf-t-s); }
.lr-pied { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.lr-pied .lr-note { flex: 1 1 260px; }
.rf-reseaux-apercu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; font-size: var(--rf-t-s); }
.rf-reseaux-apercu { gap: 10px; }
.rf-reseaux-apercu .rf-reseaux-lien { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--rf-ligne, currentColor); border-radius: var(--rf-rayon-rond); }
.rf-reseaux-apercu .rf-reseaux-nom { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rf-reseaux-apercu .rf-reseaux-picto { flex: none; }
.rf-reseaux-apercu .rf-reseaux-sep { display: none; }
/* Visibilité V1 (05/10, ticket #39) : onglet « Visibilité » de l'admin › Sites et rubrique « Visibilité » de Mon site
   (visibilite.js, écran commun) ; section « Google Analytics 4 (option) ». */
.vis-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.vis-exports { display: flex; flex-wrap: wrap; gap: 8px; }
.vis-courbe { margin-bottom: 18px; }
.vis-vitesse { margin-bottom: 18px; }
.vis-indicateurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.vis-indicateur { display: grid; align-content: start; gap: 6px; padding: 12px 14px; border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon); background: var(--uk-releve); }
.vis-indicateur > strong { font-size: var(--rf-t-2xl); line-height: 1.2; }
.vis-indicateur .gr-legende { font-size: var(--rf-t-xs); }
.vis-indicateur .gr-legende strong { font-size: inherit; }
.vis-indicateur > small { color: var(--muted); font-size: var(--rf-t-xs); }
.vis-indicateur .uk-badge, .vis-indicateur .uk-etat { justify-self: start; }
.vis-pages td small { display: block; margin-top: 4px; color: var(--muted); font-size: var(--rf-t-xs); }
.vis-pages code { overflow-wrap: anywhere; }
.vis-ga4 { display: grid; gap: 12px; }
.vis-ga4-tete { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.vis-ga4-tete .uk-rubrique { flex: 1 1 260px; margin: 0; }
.vis-ga4 form { display: grid; gap: 12px; margin: 0; }
.vis-ga4-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vis-ga4-champs label { display: grid; gap: 6px; font-size: var(--rf-t-s); font-weight: 600; }
.vis-ga4-champs input { width: 100%; min-height: 40px; font-family: inherit; }
.vis-ga4-pied { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.vis-ga4-pied p { flex: 1 1 260px; margin: 0; font-size: var(--rf-t-s); }
.vis-vitesse-client .uk-liste { margin-top: 8px; }
.vis-ga4 .vg-corps strong, .vis-ga4 .vg-corps small { white-space: normal; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; line-clamp: unset; display: block; }
@media (max-width: 760px) {
  .vis-indicateurs, .vis-ga4-champs { grid-template-columns: 1fr; }
  .vis-barre { align-items: flex-start; }
}
@media (max-width: 480px) {
  .vis-ga4 .vg-ligne { flex-wrap: nowrap; }
  .vis-ga4 .vg-ligne .vg-corps { flex-basis: auto; }
}
/* Visibilité V2 (05/10, ticket #40) : sous-vue « Google et SEO » (admin) et sections du client (visibilite-seo.js). */
.vis-sous-onglets { margin: 0 0 14px; }
.vis-seo { display: grid; gap: 14px; margin-bottom: 18px; }
.vis-seo h3 { margin: 4px 0 8px; font-size: var(--rf-t-m); }
.vis-seo-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.vis-seo-tete .uk-rubrique { flex: 1 1 280px; margin: 0; }
.vis-seo-tete h3 { margin: 0; flex: 1 1 auto; }
.vis-seo-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vis-seo-bloc { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--uk-ligne); }
.vis-seo-score { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vis-seo-score .gr-jauge-cercle { width: 84px; height: 84px; flex: 0 0 84px; }
.vis-seo-score > div { flex: 1 1 220px; min-width: 0; }
.vis-seo-score strong { font-size: var(--rf-t-xl); }
.vis-seo-score p { margin: 4px 0 0; }
.vis-seo-comptes { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.vis-seo .vg-corps strong, .vis-seo .vg-corps small, .vis-seo-client .vg-corps strong, .vis-seo-client .vg-corps small { white-space: normal; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; line-clamp: unset; display: block; overflow-wrap: anywhere; }
.vis-seo-pages summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.vis-seo-pages code { overflow-wrap: anywhere; }
.vis-seo-page { display: grid; gap: 2px; }
.vis-seo-page small { color: var(--muted); font-size: var(--rf-t-xs); }
.vis-seo-choix-liste { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.vis-seo-choix-liste legend { font-weight: 600; margin-bottom: 6px; }
.vis-seo-choix { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon); background: var(--uk-releve); cursor: pointer; }
.vis-seo-choix input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; }
.vis-seo-choix span { display: grid; gap: 2px; min-width: 0; }
.vis-seo-choix small { color: var(--muted); font-size: var(--rf-t-xs); }
.vis-seo-client .uk-chiffres { margin-bottom: 12px; }
@media (max-width: 760px) {
  .vis-seo-duo { grid-template-columns: 1fr; }
}

/* --- Aide (07/10, ticket #52) : écrans « Aide » (portail) et « Documentation » (admin), page lue, lien contextuel -----
   aide.js ; lienAide() du kit. Pas de couleur en dur : jetons du kit et de la surface. */
.uk-lien-aide { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 8px; border: 0; border-radius: var(--rf-rayon); background: transparent; color: var(--muted); font: inherit; font-size: var(--rf-t-s); cursor: pointer; }
.uk-lien-aide:hover, .uk-lien-aide:focus-visible { color: var(--accent); background: var(--uk-releve); }
.uk-lien-aide .uk-lien-aide-picto { width: 16px; height: 16px; }
.uk-lien-aide span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.uk-aide-contexte { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.uk-fiche-section h3 .uk-lien-aide, .pa-section > .uk-lien-aide { margin-left: 4px; }
.aide-ecran { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.aide-ecran.aide-avec-page { grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); }
.aide-colonne { display: grid; gap: 14px; min-width: 0; }
.aide-outils { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.aide-outils .uk-recherche { margin: 0; }
.aide-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.aide-groupe h3 { margin: 0 0 6px; font-size: var(--rf-t-s); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.aide-groupe .uk-liste { margin: 0; }
.aide-ligne-active { background: var(--uk-releve); border-radius: var(--uk-rayon); box-shadow: inset 3px 0 0 var(--accent); }
/* Page ouverte : la liste devient une colonne étroite ; les pilules (Vidéo, public) y sont retirées. */
.aide-avec-page .aide-liste .vg-etat { display: none; }
.aide-page { min-width: 0; max-width: 820px; padding: 20px 24px; border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon); background: var(--surface); }
.aide-fenetre .aide-page { padding: 0; border: 0; background: transparent; max-width: none; }
.aide-page-tete h2 { margin: 6px 0 4px; font-size: var(--rf-t-2xl); line-height: 1.25; }
/* Titre focalisé par le script à l'ouverture d'une page (tabindex="-1", hors de l'ordre de tabulation) : pas de contour. */
.aide-page-tete h2:focus, .aide-page-tete h2:focus-visible { outline: none; }
.aide-page-meta { margin: 0 0 12px; color: var(--muted); font-size: var(--rf-t-s); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aide-page-resume { margin: 0 0 14px; font-size: var(--rf-t-m); }
.aide-retour { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--accent); text-decoration: none; font-size: var(--rf-t-sm); }
.aide-retour:hover span { text-decoration: underline; }
.aide-retour .vg-picto { width: 16px; height: 16px; }
.aide-texte { line-height: 1.6; overflow-wrap: anywhere; }
.aide-texte h3 { margin: 22px 0 6px; font-size: var(--rf-t-xl); }
.aide-texte h4 { margin: 16px 0 4px; font-size: var(--rf-t-m); }
.aide-texte p { margin: 0 0 10px; }
.aide-texte ol, .aide-texte ul { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 4px; }
.aide-texte code { padding: 1px 5px; border-radius: var(--rf-rayon); background: var(--uk-releve); font-size: .92em; }
.aide-lien { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.aide-note { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--uk-ligne); border-left: 3px solid var(--accent); border-radius: var(--uk-rayon); background: var(--uk-releve); }
.aide-note strong { display: block; font-size: var(--rf-t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.aide-note p { margin: 4px 0 0; }
.aide-code { margin: 8px 0 12px; padding: 10px 12px; border-radius: var(--uk-rayon); background: var(--uk-releve); overflow-x: auto; }
.aide-code code { padding: 0; background: transparent; white-space: pre; }
.aide-tableau { margin: 8px 0 14px; overflow-x: auto; }
.aide-video { margin: 4px 0 16px; }
.aide-video-lecteur { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon); background: var(--uk-releve); }
.aide-video figcaption { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font-size: var(--rf-t-xs); }
.aide-video-picto { width: 14px; height: 14px; }
.aide-faits { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--uk-ligne); }
.aide-faits code { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .aide-ecran.aide-avec-page { grid-template-columns: minmax(0, 1fr); }
  .aide-ecran.aide-avec-page .aide-colonne { display: none; }
  .aide-page { padding: 14px; }
}
/* Calque des micro vidéos (aide.js › installerCalqueVideo, pendant l'enregistrement seulement) : curseur et légende. */
.uk-calque-video, .uk-calque-video[popover] { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: hidden; z-index: 2147483647; pointer-events: none; }
.uk-calque-curseur { position: absolute; left: 0; top: 0; width: 26px; height: 26px; transform: translate(640px, 400px); transition-property: transform; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.uk-calque-curseur svg { width: 26px; height: 26px; fill: var(--uk-calque-texte); stroke: var(--uk-calque-trait); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px var(--uk-calque-ombre)); }
.uk-calque-onde { position: absolute; left: -14px; top: -14px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; }
.uk-calque-clic .uk-calque-onde { animation: uk-calque-onde .5s ease-out; }
@keyframes uk-calque-onde { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }
.uk-calque-legende { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); max-width: 80%; margin: 0; padding: 10px 18px; border-radius: var(--rf-rayon); background: var(--uk-calque-fond); color: var(--uk-calque-texte); font-size: var(--rf-t-2xl); font-weight: 600; line-height: 1.3; text-align: center; box-shadow: var(--uk-ombre-flottant); }

/* Trajectoire (ticket #49, communes au ticket #81) : frise des étapes, métriques, journal ; Admin › Pilotage › Trajectoire et
   portail › Mes services › Accompagnement. Couleurs par variables du kit seulement. */
.tj-frise { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: tj; }
.tj-etape { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; padding: 14px 12px 12px; border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon); background: var(--uk-releve); }
.tj-etape::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: var(--uk-rayon) var(--uk-rayon) 0 0; background: var(--uk-ligne); }
.tj-faite::before { background: var(--gr-bon); }
.tj-en-cours { border-color: var(--accent); }
.tj-en-cours::before { background: var(--accent); }
.tj-prochaine::before { background: var(--gr-attention); }
.tj-puce { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted); }
.tj-faite .tj-puce { border-color: var(--gr-bon); background: var(--gr-bon); }
.tj-en-cours .tj-puce { border-color: var(--accent); background: var(--accent); }
.tj-nom { font-weight: 650; overflow-wrap: anywhere; }
.tj-quand { color: var(--muted); font-size: var(--rf-t-xs); }
.tj-ici { color: var(--accent); font-size: var(--rf-t-s); }
.tj-sortie { margin: 0 0 12px; }
.tj-metrique { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--uk-ligne); }
.tj-metrique small { color: var(--muted); font-size: var(--rf-t-xs); }
.tj-metrique-action { display: flex; justify-content: flex-end; }
.tj-prochaine { margin: 12px 0 0; color: var(--muted); font-size: var(--rf-t-s); }
.tj-journal { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--rf-t-s); }
.tj-journal small { color: var(--muted); }
/* Mes services › Accompagnement (ticket #81) : fiche du service, étapes suivantes repliées, gestes de l'équipe. */
.tj-objectif { margin: 0 0 10px; }
.tj-attendu { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: var(--rf-t-s); }
.tj-suivantes { display: grid; gap: 8px; }
.tj-suivante { border: 1px solid var(--uk-ligne); border-radius: var(--uk-rayon); background: var(--uk-releve); padding: 0 12px; }
.tj-suivante > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 0; cursor: pointer; font-weight: 650; }
.tj-suivante > summary small { color: var(--muted); font-weight: 400; }
.tj-suivante[open] > summary { border-bottom: 1px solid var(--uk-ligne); }
.tj-suivante > div { padding: 10px 0 12px; display: grid; gap: 6px; }
.tj-suivante p { margin: 0; }
.tj-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tj-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }
@media (max-width: 640px) {
  .tj-frise { grid-template-columns: 1fr; }
}

/* === Base commune de la refonte (R1, 10/10/2026, ticket #93) ================================================================
   Filigrane O, menu en tiroir (mobile), schéma d'étapes, cartes, bascule de vue, « À vous de jouer », tuile objectif.
   Couleurs, rayons et tailles : jetons de /jetons.css seulement. Guide : docs/UI-KIT.md › « Base commune (R1) ». */

/* --- Filigrane O (signe Relais) : ton sur ton, coupé par le bord bas droit, fixe, sous le contenu, jamais cliquable.
   Intensité : html[data-filigrane="fort"] (connexion, accueils) ou "aucun" (poserFiligrane du kit). Forme : --rf-signe. */
:root { --uk-filigrane-taille: clamp(380px, 64vmax, 980px); }
body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  right: calc(var(--uk-filigrane-taille) * -.26); bottom: calc(var(--uk-filigrane-taille) * -.2);
  width: var(--uk-filigrane-taille); aspect-ratio: 56 / 54;
  background: var(--accent); opacity: var(--rf-filigrane);
  -webkit-mask: var(--rf-signe) center / contain no-repeat; mask: var(--rf-signe) center / contain no-repeat;
}
:root[data-filigrane="fort"] body::before { opacity: var(--rf-filigrane-fort); }
:root[data-filigrane="aucun"] body::before { display: none; }
@media (max-width: 760px) { :root { --uk-filigrane-taille: 132vw; } }
@media print { body::before { display: none; } }

/* --- Menu en tiroir (≤ 760 px) : bouton dans la barre du haut, barre latérale en panneau modal, carte compte repliée. --- */
.uk-tiroir-bouton, .uk-tiroir-fermer, .uk-tiroir-logo { display: none; }
@media (max-width: 760px) {
  .uk-tiroir-bouton { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); background: transparent; color: var(--text); cursor: pointer; }
  .uk-tiroir-bouton svg, .uk-tiroir-fermer svg { width: 20px; height: 20px; }
  .uk-tiroir-logo { display: block; flex: none; width: 30px; aspect-ratio: 56 / 54; background: var(--accent); -webkit-mask: var(--rf-signe) center / contain no-repeat; mask: var(--rf-signe) center / contain no-repeat; }
  .uk-tiroir-fermer { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); color: var(--text); }
  .uk-barre {
    position: fixed !important; inset: 0 auto 0 0; z-index: 70; width: min(88vw, 340px) !important; height: 100dvh !important; max-height: none;
    display: flex !important; flex-direction: column; gap: 16px; padding: 16px !important; overflow-y: auto !important; overscroll-behavior: contain;
    border-right: 1px solid var(--uk-ligne); border-bottom: 0 !important; background: var(--rf-barre); box-shadow: var(--uk-ombre-fenetre);
    transform: translateX(-104%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
  }
  .uk-tiroir-ouvert .uk-barre { transform: none; visibility: visible; transition: transform .22s ease; }
  .uk-tiroir-ouvert { overflow: hidden; }
  .uk-tiroir-voile { position: fixed; inset: 0; z-index: 65; background: var(--uk-voile); }
  .uk-tiroir-voile[hidden] { display: none; }
  .uk-barre .uk-barre-tete { display: flex !important; align-items: center; }
  .uk-barre .uk-reduire { display: none; }
  .uk-barre > .uk-menu, .uk-barre .uk-menu { display: grid !important; flex: none !important; overflow: hidden !important; }
  .uk-barre .uk-menu-groupe { display: grid !important; }
  .uk-barre .uk-menu-liste, .uk-barre .uk-menu-sous { display: grid !important; }
  .uk-barre .uk-menu-liste[hidden], .uk-barre .uk-menu-sous[hidden] { display: none !important; }
  .uk-barre .uk-menu-item { display: flex !important; }
  .uk-barre .uk-menu-titre { display: flex !important; }
  .uk-barre .uk-menu-lien { min-height: 44px; white-space: nowrap; }
  .uk-barre .uk-barre-pied { margin-top: auto !important; padding-top: 12px !important; }
  /* Carte compte repliée : nom et déconnexion sur une ligne ; le thème se règle dans Mon compte. */
  .uk-barre :is(.theme-segment, runflow-theme-switch, .account-admin) { display: none !important; }
  .uk-barre :is(.account-card, .admin-account) { display: flex !important; align-items: center; gap: 8px; padding: 6px; }
  .uk-barre :is(.account-card .account-controls, .admin-account-actions) { border: 0 !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .uk-barre, .uk-tiroir-ouvert .uk-barre { transition: none; } }

/* --- Schéma d'étapes : frise horizontale, verticale quand la place manque ; étape en cours pulsée, ligne animée. --- */
.uk-schema { position: relative; container: uk-schema / inline-size; }
.uk-schema-etapes { position: relative; display: grid; grid-template-columns: repeat(var(--uk-schema-n, 5), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.uk-schema[data-n="2"] { --uk-schema-n: 2; } .uk-schema[data-n="3"] { --uk-schema-n: 3; } .uk-schema[data-n="4"] { --uk-schema-n: 4; }
.uk-schema[data-n="5"] { --uk-schema-n: 5; } .uk-schema[data-n="6"] { --uk-schema-n: 6; } .uk-schema[data-n="7"] { --uk-schema-n: 7; } .uk-schema[data-n="8"] { --uk-schema-n: 8; }
/* Ligne : du centre de la première étape au centre de la dernière (rond de 36 px : centre à 18 px du haut). */
.uk-schema-ligne { position: absolute; top: 17px; left: calc(50% / var(--uk-schema-n, 5)); width: calc(100% - 100% / var(--uk-schema-n, 5)); height: 2px; overflow: visible; }
.uk-schema-piste { stroke: var(--uk-ligne); stroke-width: 2; }
.uk-schema-progres { stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: left center; animation: uk-remplir 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.uk-schema-etape { min-width: 0; }
.uk-schema-cible { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 24px; padding: 0; border: 0; border-radius: var(--rf-rayon); background: none; color: inherit; font: inherit; text-align: center; text-decoration: none; }
:is(a, button).uk-schema-cible { cursor: pointer; }
:is(a, button).uk-schema-cible:hover .uk-schema-titre { text-decoration: underline; text-underline-offset: 3px; }
.uk-schema-cible:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.uk-schema-rond {
  position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--uk-ligne); border-radius: 50%;
  background: var(--surface); color: var(--muted); font: 650 var(--rf-t-m)/1 var(--rf-police-titre);
}
.uk-schema-coche { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.uk-schema-texte { display: grid; gap: 2px; min-width: 0; }
.uk-schema-titre { font: 600 var(--rf-t-m)/1.3 var(--rf-police-titre); color: var(--muted); overflow-wrap: anywhere; }
.uk-schema-detail { font-size: var(--rf-t-s); color: var(--rf-texte-discret); overflow-wrap: anywhere; }
.uk-schema-etape[data-etat="fait"] .uk-schema-rond { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.uk-schema-etape[data-etat="fait"] .uk-schema-titre { color: var(--text); }
.uk-schema-etape[data-etat="fait"] .uk-schema-detail { color: var(--muted); }
.uk-schema-etape[data-etat="en-cours"] .uk-schema-rond { border: 2px solid var(--accent); background: var(--bg); color: var(--accent); animation: uk-pulser 1.8s ease-out infinite; }
.uk-schema-etape[data-etat="en-cours"] .uk-schema-titre { color: var(--accent); }
.uk-schema-etape[data-etat="en-cours"] .uk-schema-detail { color: var(--text); }
@keyframes uk-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes uk-pulser { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); } }
/* Verticale : une étape par ligne, rond à gauche, trait entre les ronds (accent jusqu'à l'étape en cours). */
@container uk-schema (max-width: 560px) {
  .uk-schema-ligne { display: none; }
  .uk-schema-etapes { grid-template-columns: 1fr; gap: 0; }
  .uk-schema-etape { position: relative; padding-bottom: 18px; }
  .uk-schema-etape:last-child { padding-bottom: 0; }
  .uk-schema-etape:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--uk-ligne); }
  .uk-schema-etape[data-etat="fait"]:not(:last-child)::after { background: var(--accent); }
  .uk-schema-cible { flex-direction: row; align-items: flex-start; gap: 14px; text-align: left; }
  .uk-schema-rond { width: 28px; height: 28px; font-size: var(--rf-t-s); }
  .uk-schema-coche { width: 15px; height: 15px; }
  .uk-schema-texte { padding-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .uk-schema-progres, .uk-schema-etape[data-etat="en-cours"] .uk-schema-rond { animation: none; }
}

/* --- Mini-frise (R2b, ticket #96) : points reliés d'un schéma, pour une carte ; en cours : anneau d'accent pulsé. --- */
.uk-mini-schema { display: inline-flex; align-items: center; min-width: 0; padding: 2px 0; }
.uk-mini-point { position: relative; flex: none; width: 10px; height: 10px; box-sizing: border-box; border: 1px solid var(--rf-ligne-forte); border-radius: 50%; background: var(--surface); }
.uk-mini-point + .uk-mini-point { margin-left: 16px; }
.uk-mini-point + .uk-mini-point::before { content: ""; position: absolute; right: calc(100% + 1px); top: 50%; width: 16px; height: 2px; margin-top: -1px; background: var(--uk-ligne); }
.uk-mini-point[data-etat="fait"] { border-color: var(--accent); background: var(--accent); }
.uk-mini-point[data-etat="fait"]::before, .uk-mini-point[data-etat="en-cours"]::before { background: var(--accent); }
.uk-mini-point[data-etat="en-cours"] { width: 14px; height: 14px; border: 2px solid var(--accent); background: var(--bg); animation: uk-pulser 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .uk-mini-point[data-etat="en-cours"] { animation: none; } }

/* --- Cartes d'objets (on parcourt) : grille responsive, survol sobre, pastille d'état, carte entière cliquable. --- */
.uk-grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.uk-grille-cartes > li { display: flex; min-width: 0; }
.uk-objet {
  position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; padding: 18px 20px; border: 1px solid var(--uk-ligne);
  border-radius: var(--rf-rayon); background: var(--surface); transition: border-color .15s ease;
}
.uk-objet-cliquable:hover, .uk-objet-cliquable:focus-within { border-color: var(--rf-ligne-forte); }
.uk-objet-choisie { border-color: var(--accent); }
.uk-objet-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.uk-objet-etat { margin-left: auto; }
.uk-objet-surtitre { margin: 0; font-size: var(--rf-t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.uk-objet-titre { margin: 0; font: 600 var(--rf-t-xl)/1.3 var(--rf-police-titre); overflow-wrap: anywhere; }
.uk-objet-ouvrir { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
/* Titre étiré : toute la carte ouvre l'objet ; les actions de la carte restent au-dessus. */
.uk-objet-ouvrir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.uk-objet-ouvrir:focus-visible { outline: none; }
.uk-objet:has(.uk-objet-ouvrir:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.uk-objet-texte { margin: 0; color: var(--muted); font-size: var(--rf-t-sm); }
.uk-objet-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.uk-objet-mesure { font: 650 var(--rf-t-xl)/1.2 var(--rf-police-titre); }
.uk-objet-actions, .uk-objet-etat, .uk-objet-tete a, .uk-objet-tete button { position: relative; z-index: 1; }
.uk-objet-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .uk-objet { transition: none; } }

/* --- Bascule de vue Cartes / Liste (mémorisée par page) : jamais en accent plein. --- */
.uk-bascule-vue { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); background: transparent; }
.uk-bascule-vue > button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border: 0; border-radius: var(--rf-rayon-fin); background: transparent; color: var(--muted); font-size: var(--rf-t-s); cursor: pointer; }
.uk-bascule-vue > button:hover { color: var(--text); }
.uk-bascule-vue > button[aria-pressed="true"] { background: var(--uk-releve); color: var(--text); font-weight: 650; }
.uk-bascule-vue svg { width: 16px; height: 16px; }

/* --- « À vous de jouer » : bandeau d'action en tête, citron plein, une action (inverse : encre sur accent). --- */
.uk-a-vous { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 0 0 24px; padding: 22px 26px; border-radius: var(--rf-rayon); background: var(--accent); color: var(--ink); animation: uk-monter .45s ease-out both; }
.uk-a-vous-texte { display: grid; gap: 4px; flex: 1 1 380px; min-width: 0; }
.uk-a-vous-surtitre { margin: 0; font-size: var(--rf-t-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.uk-a-vous h2 { margin: 0; color: inherit; font: 650 var(--rf-t-2xl)/1.25 var(--rf-police-titre); }
.uk-a-vous-texte > p:not(.uk-a-vous-surtitre) { margin: 0; font-size: var(--rf-t-m); }
.uk-a-vous-action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--rf-rayon); background: var(--ink); color: var(--accent); font: 650 var(--rf-t-m)/1.2 var(--rf-police-texte); text-decoration: none; cursor: pointer; }
.uk-a-vous-action:hover { background: color-mix(in srgb, var(--ink) 88%, var(--accent)); }
.uk-a-vous-action:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@keyframes uk-monter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .uk-a-vous { padding: 18px; } .uk-a-vous-action { width: 100%; } .uk-a-vous h2 { font-size: var(--rf-t-xl); } }
@media (prefers-reduced-motion: reduce) { .uk-a-vous { animation: none; } }

/* --- Tuile objectif : départ → cible, barre d'avancement (accent ; repère sans objectif : barre neutre). --- */
.uk-objectifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.uk-objectif { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); background: var(--surface); }
.uk-objectif-libelle { color: var(--muted); font-size: var(--rf-t-s); }
.uk-objectif-valeurs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.uk-objectif-valeurs strong { font: 650 var(--rf-t-3xl)/1.1 var(--rf-police-titre); }
.uk-objectif-valeurs span { color: var(--muted); font-size: var(--rf-t-s); }
.uk-objectif-barre { display: block; width: 100%; height: 6px; }
.uk-objectif-piste { fill: var(--uk-ligne); }
.uk-objectif-plein { fill: var(--accent); transform-box: fill-box; transform-origin: left center; animation: uk-remplir 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.uk-objectif-repere .uk-objectif-plein { fill: var(--rf-ligne-forte); }
.uk-objectif-note { color: var(--muted); font-size: var(--rf-t-xs); }
@media (prefers-reduced-motion: reduce) { .uk-objectif-plein { animation: none; } }

/* === R3 (10/10/2026, ticket #95) : segmenté, tableau de traitement, encart, détail d'une mesure de carte ====================
   Guide : docs/UI-KIT.md › « Offres, devis, services (R3) ». Jetons de /jetons.css seulement. */

/* --- Onglets en segmenté (« Formules | Options | Accompagnement ») : même composant onglets(), classe « uk-segmente »
   (règles écrites sur cette seule classe, placées après celles des onglets soulignés : elles l'emportent). --- */
.uk-segmente { display: inline-flex; max-width: 100%; gap: 0; margin: 0; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); box-shadow: none; }
.uk-segmente > button, .uk-segmente > a { min-height: 40px; padding: 8px 18px; border: 0; border-radius: 0; color: var(--muted); font-size: var(--rf-t-sm); font-weight: 600; }
.uk-segmente > button + button, .uk-segmente > a + a { border-left: 1px solid var(--uk-ligne); }
.uk-segmente > button[aria-selected="true"], .uk-segmente > a[aria-current="page"] { background: var(--text); color: var(--bg); }
.uk-segmente > button:hover { color: var(--text); }
.uk-segmente > button[aria-selected="true"]:hover { color: var(--bg); }
@media (max-width: 640px) {
  .uk-segmente { display: flex; width: 100%; }
  .uk-segmente > button, .uk-segmente > a { flex: 1 1 0; justify-content: center; padding: 8px 6px; }
}

/* --- Tableau de traitement : en-têtes discrets, lignes séparées par un filet, nombres alignés à droite. Le cadre est
   positionné : les textes pour lecteurs d'écran (.uk-sr, absolus) restent dans la zone qui défile (aucun débordement). --- */
.uk-tableau-cadre { position: relative; min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); background: var(--surface); }
.uk-tableau-cadre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Les surfaces stylent `th` (capitales, fond relevé) : le tableau du kit fixe les siens. */
.uk-tableau { width: 100%; border-collapse: collapse; background: transparent; font-size: var(--rf-t-sm); }
.uk-tableau :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--uk-ligne); background: transparent; text-align: left; vertical-align: middle; }
.uk-tableau tbody tr:last-child > * { border-bottom: 0; }
.uk-tableau thead th { color: var(--muted); font-size: var(--rf-t-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.uk-tableau tbody th { color: var(--text); font-size: var(--rf-t-sm); font-weight: 600; letter-spacing: 0; text-transform: none; }
.uk-tableau tbody tr:hover > * { background: var(--uk-releve); }
.uk-tableau .uk-tableau-nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uk-tableau .uk-tableau-centre { text-align: center; }
.uk-tableau .uk-tableau-choisie { color: var(--accent); }
.uk-tableau-oui svg, .uk-tableau-non svg { width: 18px; height: 18px; vertical-align: middle; }
.uk-tableau-oui { color: var(--accent); }
.uk-tableau-non { color: var(--rf-texte-discret); }
.uk-tableau button.uk-tableau-ouvrir { min-height: 24px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: var(--uk-ligne); text-underline-offset: 3px; cursor: pointer; }
.uk-tableau button.uk-tableau-ouvrir:hover { text-decoration-color: currentColor; }
.uk-tableau small { display: block; color: var(--muted); font-size: var(--rf-t-xs); font-weight: 400; }

/* --- Encart (prérequis d'une offre) : rond à pictogramme, titre, phrase, action. --- */
.uk-encart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 16px 18px; border: 1px solid var(--uk-ligne); border-radius: var(--rf-rayon); background: var(--surface); }
.uk-encart[data-ton="bon"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.uk-encart[data-ton="attention"] { border-color: var(--rf-attention); background: color-mix(in srgb, var(--rf-attention) 7%, var(--surface)); }
.uk-encart-rond { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--uk-releve); color: var(--text); }
.uk-encart[data-ton="bon"] .uk-encart-rond { background: var(--accent); color: var(--ink); }
.uk-encart[data-ton="attention"] .uk-encart-rond { border: 1px solid var(--rf-attention); background: transparent; color: var(--rf-attention); }
.uk-encart-rond svg { width: 16px; height: 16px; stroke-width: 2.4; }
.uk-encart-texte { display: grid; gap: 2px; flex: 1 1 260px; min-width: 0; }
.uk-encart-texte p { margin: 0; color: var(--muted); font-size: var(--rf-t-sm); }
.uk-encart-action { flex: none; }

/* --- Carte : détail sous la mesure (mise en place, engagement). --- */
.uk-objet-chiffre { display: grid; gap: 2px; min-width: 0; }
.uk-objet-detail { color: var(--muted); font-size: var(--rf-t-s); }

/* #245 : les replis bureau doivent masquer réellement leurs listes. Les règles du mode réduit gardent leurs exceptions. */
html:not(.menu-reduit) .uk-menu-liste[hidden], html:not(.menu-reduit) .uk-menu-sous[hidden] { display: none; }