@import url("../styles/theme.css");
/* onROCKY — la feuille de composants partagée par les pages de l’extension (Lignes, Contacts, Bilan, DataFiche,
   Licence, Entretien), puis la page Bilan elle-même. Forme « Galet » et matière satinée : tout est arrondi (pilule pour
   ce qu’on touche, 24 px pour les cartes, 14 px pour les champs, rond pour les pastilles). Le ton, l’espace et un léger
   reflet statique séparent les contrôles. Les bordures restent là où il y en avait, mais
   transparentes : la géométrie ne bouge pas et le contraste élevé de Windows les redessine. Jetons seulement : aucune
   couleur en dur. Les sélecteurs d’éléments nus passent par :where() : aucune spécificité, la feuille de chaque page les
   reprend sans surenchère. */

/* Alias historiques, lus aussi par suivi.css, gestion.css, licence.css et datafiche.css. */
:root {
  --plan: var(--oaa-fond);
  --surface: var(--oaa-surface);
  --encre: var(--oaa-encre);
  --encre-2: var(--oaa-secondaire);
  --encre-3: var(--oaa-discret);
  /* Galet : plus d’alias de trait (--grille, --axe, --trait) : aucun quadrillage, aucun filet ne les lisait plus. */
  --serie: var(--oaa-accent);
  --serie-fonce: var(--oaa-accent-fonce);
  /* Série atténuée des graphiques : le graphite éclairci, au moins 3:1 sur la surface dans les deux thèmes (3,8 et 4,3). */
  --attenue: color-mix(in srgb, var(--oaa-discret) 75%, var(--oaa-surface));
  --critique: var(--oaa-danger);
  --bien-texte: var(--oaa-accent-fonce);
  --survol: var(--oaa-surface-alt);
  /* Galet : les rayons de forme qui s’ajoutent aux jetons (10 · 16 · 24 · pilule), les teintes de fond et la rangée
     alternée des tableaux. */
  --rayon-champ: 14px;
  --rayon-bloc: 18px;
  --rayon-tuile: 22px;
  --info-teinte: color-mix(in srgb, var(--oaa-info) 7%, var(--oaa-surface));
  --info-halo: color-mix(in srgb, var(--oaa-info) 22%, transparent);
  --attention-halo: color-mix(in srgb, var(--oaa-attention) 26%, transparent);
  --rangee-alternee: color-mix(in srgb, var(--oaa-surface-alt) 60%, var(--oaa-surface));
  /* Case à cocher vide : un fond gris doux (sans contour), qui se voit sur une carte comme sur un bloc surface-alt
     (même valeur que datafiche/datafiche.css). */
  --case-vide: color-mix(in srgb, var(--oaa-bord-fort) 45%, var(--oaa-surface-alt));
  /* Anneau rond (evenodd ; nom historique) : la pastille « creuse » des résultats neutres, sans fond à recopier dessous.
     Un rond plein, percé au centre : jamais un contour ni des tirets. */
  --octogone-creux: polygon(evenodd, 50% 0%, 62.9% 1.7%, 75% 6.7%, 85.4% 14.6%, 93.3% 25%, 98.3% 37.1%, 100% 50%, 98.3% 62.9%,
    93.3% 75%, 85.4% 85.4%, 75% 93.3%, 62.9% 98.3%, 50% 100%, 37.1% 98.3%, 25% 93.3%, 14.6% 85.4%, 6.7% 75%, 1.7% 62.9%, 0% 50%,
    1.7% 37.1%, 6.7% 25%, 14.6% 14.6%, 25% 6.7%, 37.1% 1.7%, 50% 0%, 50% 28%, 55.7% 28.7%, 61% 30.9%, 65.6% 34.4%, 69.1% 39%,
    71.3% 44.3%, 72% 50%, 71.3% 55.7%, 69.1% 61%, 65.6% 65.6%, 61% 69.1%, 55.7% 71.3%, 50% 72%, 44.3% 71.3%, 39% 69.1%, 34.4% 65.6%,
    30.9% 61%, 28.7% 55.7%, 28% 50%, 28.7% 44.3%, 30.9% 39%, 34.4% 34.4%, 39% 30.9%, 44.3% 28.7%, 50% 28%);
}

/* ------------------------------------------------------------------------------------------------ Base */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font: 14px/1.5 var(--oaa-police);
  font-variant-numeric: tabular-nums;
  color: var(--oaa-encre);
  background: var(--oaa-fond);
  -webkit-font-smoothing: antialiased;
}
/* Titre de page 26/650, titre de section 16/650, titre de bloc 15/650. */
:where(h1) { margin: 0; font: 650 26px/1.2 var(--oaa-police-titre); letter-spacing: -.03em; }
:where(h2) { margin: 0; font: 650 16px/1.3 var(--oaa-police-titre); letter-spacing: -.015em; }
:where(h3) { margin: 0; font: 650 15px/1.3 var(--oaa-police-titre); }
:where(button, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 2px; }
::selection { background: var(--oaa-accent-doux); color: var(--oaa-encre); }
.page { max-width: 1120px; margin: 0 auto; padding: 32px 28px 72px; }
.espace { flex: 1; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* En-tête d’une page autonome : logotype 28 px, titre, état en direct, liens. Caché dans les vues intégrées. */
.entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.direct { margin: 4px 0 0; color: var(--oaa-secondaire); font-size: 13px; min-height: 20px; }
.direct .point { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--oaa-info); box-shadow: 0 0 0 4px var(--info-halo); vertical-align: 1px; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.surtitre { margin: 0; font: 650 11px/1.2 var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; color: var(--oaa-secondaire); }
.sous-titre { margin: 2px 0 0; color: var(--oaa-secondaire); font-size: 13px; }

/* ------------------------------------------------------------------------------------------------ Boutons */

/* Pilules satinées : secondaire neutre, principal lilas à texte sombre, action sensible rose poudré. Les états rubis
   restent réservés aux erreurs et au micro coupé. .irise, conservé pour le JS, désigne aussi le principal. Le survol
   renforce le reflet sans déplacer le bouton ; aucune lueur n’est animée. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-bouton-satin);
  color: var(--oaa-encre); font: 600 13.5px/1 var(--oaa-police); white-space: nowrap; text-decoration: none; box-shadow: var(--oaa-bouton-ombre); cursor: pointer;
  transition: background-color var(--oaa-duree-rapide) ease, color var(--oaa-duree-rapide) ease, opacity var(--oaa-duree-rapide) ease, box-shadow var(--oaa-duree-rapide) ease, transform var(--oaa-duree-rapide) ease;
}
.bouton .oaa-ic, .bouton::before { --oaa-taille-ic: 18px; }
.bouton:hover:not(:disabled) { box-shadow: var(--oaa-bouton-ombre-survol); }
.bouton:active:not(:disabled) { transform: scale(.98); }
.bouton:focus-visible { outline: 2px solid var(--oaa-accent); outline-offset: 3px; }
.bouton:disabled { opacity: .5; cursor: default; }
.bouton.principal, .bouton.irise { background: var(--oaa-bouton-principal); color: var(--oaa-sur-bouton-principal); font-weight: 650; }
.bouton.danger-doux { background: var(--oaa-bouton-danger); color: var(--oaa-sur-bouton-danger); font-weight: 650; }
.bouton:is(.principal, .irise, .danger-doux) kbd { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
.bouton.danger-plein { background: var(--oaa-danger); color: var(--oaa-sur-danger); font-weight: 650; }
.bouton.danger-plein:hover:not(:disabled) { background: color-mix(in srgb, var(--oaa-danger) 88%, var(--oaa-encre)); }
/* Bouton plein désactivé : son fond, à demi effacé (plus de bordure en tirets). */
.bouton:is(.principal, .irise, .danger-plein):disabled { opacity: .5; box-shadow: none; }
.bouton:is(.principal, .irise, .danger-plein) :is(.oaa-ic), .bouton:is(.principal, .irise, .danger-plein)::before { color: currentColor; }
.bouton.fantome { background: transparent; box-shadow: none; color: var(--oaa-encre); }
.bouton.fantome:hover:not(:disabled) { background: var(--oaa-surface-alt); color: var(--oaa-encre); }
.bouton.mini { height: 28px; padding: 0 11px; gap: 5px; font-size: 12px; }
.bouton.mini .oaa-ic, .bouton.mini::before { --oaa-taille-ic: 15px; width: 15px; height: 15px; }
.bouton.fiche { height: 42px; padding: 0 16px; font-size: 14px; }
/* Pictogramme posé par ::before, quand le JS réécrit le texte du bouton : --oaa-ic par une règle, ou data-ic="nom". */
.bouton[data-ic]::before, .avec-ic::before {
  content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--oaa-ic) center / contain no-repeat; mask: var(--oaa-ic) center / contain no-repeat;
}
.bouton.mini[data-ic]::before { width: 15px; height: 15px; }
[data-ic="lignes"] { --oaa-ic: var(--oaa-ic-lignes); }
[data-ic="contacts"] { --oaa-ic: var(--oaa-ic-contacts); }
[data-ic="bilan"] { --oaa-ic: var(--oaa-ic-bilan); }
[data-ic="datafiche"] { --oaa-ic: var(--oaa-ic-datafiche); }
[data-ic="admin"] { --oaa-ic: var(--oaa-ic-admin); }
[data-ic="licence"] { --oaa-ic: var(--oaa-ic-licence); }
[data-ic="entretien"] { --oaa-ic: var(--oaa-ic-entretien); }
[data-ic="reglages"] { --oaa-ic: var(--oaa-ic-reglages); }
[data-ic="plus"] { --oaa-ic: var(--oaa-ic-plus); }
[data-ic="micro"] { --oaa-ic: var(--oaa-ic-micro); }
[data-ic="micro-coupe"] { --oaa-ic: var(--oaa-ic-micro-coupe); }
[data-ic="haut-parleur"] { --oaa-ic: var(--oaa-ic-haut-parleur); }
[data-ic="son-coupe"] { --oaa-ic: var(--oaa-ic-son-coupe); }
[data-ic="messagerie"] { --oaa-ic: var(--oaa-ic-messagerie); }
[data-ic="raccrocher"] { --oaa-ic: var(--oaa-ic-raccrocher); }
[data-ic="quelquun"] { --oaa-ic: var(--oaa-ic-quelquun); }
[data-ic="onglet"] { --oaa-ic: var(--oaa-ic-onglet); }
[data-ic="demarrer"] { --oaa-ic: var(--oaa-ic-demarrer); }
[data-ic="reprendre"] { --oaa-ic: var(--oaa-ic-reprendre); }
[data-ic="pause"] { --oaa-ic: var(--oaa-ic-pause); }
[data-ic="arreter"] { --oaa-ic: var(--oaa-ic-arreter); }
[data-ic="reessayer"] { --oaa-ic: var(--oaa-ic-reessayer); }
[data-ic="alerte"] { --oaa-ic: var(--oaa-ic-alerte); }
[data-ic="fermer"] { --oaa-ic: var(--oaa-ic-fermer); }
[data-ic="telephone"] { --oaa-ic: var(--oaa-ic-telephone); }
[data-ic="agence"] { --oaa-ic: var(--oaa-ic-agence); }
[data-ic="banque"] { --oaa-ic: var(--oaa-ic-banque); }
[data-ic="coordonnees"] { --oaa-ic: var(--oaa-ic-coordonnees); }
[data-ic="historique"] { --oaa-ic: var(--oaa-ic-historique); }
[data-ic="note"] { --oaa-ic: var(--oaa-ic-note); }
[data-ic="exporter"] { --oaa-ic: var(--oaa-ic-exporter); }
[data-ic="importer"] { --oaa-ic: var(--oaa-ic-importer); }
[data-ic="recherche"] { --oaa-ic: var(--oaa-ic-recherche); }
[data-ic="audio"] { --oaa-ic: var(--oaa-ic-audio); }
[data-ic="journal"] { --oaa-ic: var(--oaa-ic-journal); }
[data-ic="exploitation"] { --oaa-ic: var(--oaa-ic-exploitation); }

/* Raccourci dans un bouton : une pilule en surface posée sur le fond du bouton, sans trait. */
:where(kbd) {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: var(--oaa-surface); color: var(--oaa-secondaire); font: 700 11px/1 var(--oaa-police-mono); box-shadow: none;
}
/* Touches M · G · S : rondes, sur surface-alt. Désactivée : sans fond, lettre en neutre fort. À choisir (la ligne attend
   ce geste) : pastille citrine douce, lettre en gras, sans anneau. */
.touche {
  display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 50%;
  background: var(--oaa-bouton-satin); color: var(--oaa-encre); font: 700 11.5px/1 var(--oaa-police-mono); cursor: pointer;
  transition: background-color var(--oaa-duree-rapide) ease, color var(--oaa-duree-rapide) ease, transform var(--oaa-duree-rapide) ease;
}
.touche:hover:not(:disabled) { background: color-mix(in srgb, var(--oaa-encre) 8%, var(--oaa-surface-alt)); }
.touche:active:not(:disabled) { transform: scale(.94); }
.touche:focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 2px; }
.touche:disabled { background: transparent; color: var(--oaa-bord-fort); cursor: default; }
.touche.marquee { background: var(--oaa-attention-doux); color: var(--oaa-attention); font-weight: 800; box-shadow: none; }
.touche.marquee:hover:not(:disabled) { background: color-mix(in srgb, var(--oaa-attention) 22%, var(--oaa-surface)); }
.lien { border: 0; background: none; padding: 2px 0; color: var(--oaa-info); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: color var(--oaa-duree-rapide) ease; }
.lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.danger, .lien.danger { color: var(--oaa-danger); }

/* ------------------------------------------------------------------------------------------------ Champs */

/* .champ : le style d’un champ, posé sur le champ lui-même (ou sur un faux champ). Un conteneur .champ qui enveloppe
   son champ (licence, DataFiche) n’est pas dessiné comme un champ. Galet : un fond surface-alt (le champ est dans une
   carte), rayon 14, aucun contour ; un contrôle se distingue par son fond, son libellé visible et l’anneau de focus. La
   recherche est une pilule. Sur le fond de la page, la page le pose en surface avec l’ombre douce. */
.filtres select,
:where(.champ:not(:has(input, select, textarea)), #recherche, input[type="search"], input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input:not([type]), select) {
  height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--rayon-champ);
  background: var(--oaa-champ-fond); color: var(--oaa-encre); font: 500 13.5px var(--oaa-police); box-shadow: none;
  transition: background-color var(--oaa-duree-rapide) ease;
}
:where(select) { padding-right: 30px; }
:where(#recherche, input[type="search"]) { border-radius: var(--oaa-rayon-pilule); }
:where(textarea) { padding: 10px 12px; border: 1px solid transparent; border-radius: var(--rayon-champ); background: var(--oaa-champ-fond); color: var(--oaa-encre); font: 500 14px/1.45 var(--oaa-police); }
/* Survol : le fond fonce à peine (sans spécificité : une page qui pose son fond garde le sien). */
:where(input, select, textarea):where(:hover:not(:disabled):not(:focus)) { background: color-mix(in srgb, var(--oaa-encre) 5%, var(--oaa-surface-alt)); }
:is(input, select, textarea):focus-visible { outline: 2px solid var(--oaa-accent); outline-offset: 1px; }
:where(input, select, textarea):disabled { opacity: .55; cursor: default; }
:where(label), .libelle-champ { color: var(--oaa-secondaire); font: 600 12px var(--oaa-police); }
::placeholder { color: var(--oaa-discret); opacity: 1; }   /* discret : plus pâle que la saisie pour ne pas passer pour une valeur, 5,9:1 sur surface-alt */
:where(input[type="radio"]) { accent-color: var(--oaa-accent); }
/* Case à cocher (comme DataFiche) : un carré arrondi de 18 px sur un fond gris doux, sans le contour gris de la case du
   système ; cochée, l’accent plein et la coche. La bordure transparente redevient un contour en couleurs forcées. */
:where(input[type="checkbox"]) {
  appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center;
  width: 18px; height: 18px; margin: 0; border: 1px solid transparent; border-radius: 6px;
  background: var(--case-vide); vertical-align: -3px; cursor: pointer;
  transition: background-color var(--oaa-duree-rapide) ease;
}
:where(input[type="checkbox"])::before {
  content: ""; width: 10px; height: 10px; background: var(--oaa-sur-accent);
  clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 69%); transform: scale(0);
  transition: transform var(--oaa-duree-rapide) var(--oaa-courbe);
}
:where(input[type="checkbox"]):checked { background: var(--oaa-accent); }
:where(input[type="checkbox"]):checked::before { transform: scale(1); }
:where(input[type="checkbox"]):hover:not(:disabled):not(:checked) { background: color-mix(in srgb, var(--oaa-bord-fort) 65%, var(--oaa-surface-alt)); }
input[type="checkbox"]:focus-visible { outline-offset: 2px; }
/* Champ de recherche avec son pictogramme : <label class="champ-recherche"><span class="oaa-ic oaa-ic--recherche"></span><input type="search"></label> */
.champ-recherche { position: relative; display: inline-flex; align-items: center; }
.champ-recherche > .oaa-ic { position: absolute; left: 14px; --oaa-taille-ic: 17px; color: var(--oaa-secondaire); pointer-events: none; }
.champ-recherche > input { padding-left: 40px; }
/* Barre d’outils (.filtres, Bilan et Contacts) posée sur le fond, sans cadre : ses champs et ses boutons secondaires
   passent en surface avec l’ombre douce, à 40 px (le principal reste en accent plein). */
.filtres select, .filtres input[type="search"] { height: 40px; background: var(--oaa-surface); box-shadow: var(--oaa-ombre); }
.filtres .bouton { height: 40px; }
.filtres .bouton:not(.principal, .irise, .danger-plein, .danger-doux, .fantome) { background: var(--oaa-bouton-satin); box-shadow: var(--oaa-bouton-ombre); }
.filtres .bouton:not(.principal, .irise, .danger-plein, .danger-doux, .fantome):hover:not(:disabled) { box-shadow: var(--oaa-bouton-ombre-survol); }

/* ------------------------------------------------------------------------------------------------ Puces et états */

/* Un état = un minéral et son mot : la couleur vient de --etat, posée par data-etat. Une pilule teintée, sans trait ;
   libre, fin et vide en surface-alt (le mot et l’absence de teinte disent « rien en cours »). */
.puce-etat {
  --etat: var(--etat-neutre); display: inline-flex; align-items: center; height: 19px; padding: 0 7px;
  border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: color-mix(in srgb, var(--etat) 13%, var(--oaa-surface)); color: var(--etat);
  font: 650 11.5px/1 var(--oaa-police); letter-spacing: 0; white-space: nowrap;   /* casse de phrase, comme la maquette */
}
[data-etat="sonne"], [data-etat="lancement"] { --etat: var(--etat-sonne); }
[data-etat="en-ligne"] { --etat: var(--etat-en-ligne); }
[data-etat="decroche"] { --etat: var(--etat-decroche); }
[data-etat="probleme"] { --etat: var(--etat-probleme); }
[data-etat="libre"], [data-etat="raccroche"], [data-etat="vide"] { --etat: var(--etat-neutre); }   /* sans elle, var(--etat) est vide sur le compteur « libre » de la bande : point invisible */
.puce-etat[data-etat="libre"], .puce-etat[data-etat="vide"], .puce-etat[data-etat="raccroche"] { background: var(--oaa-surface-alt); color: var(--oaa-secondaire); }
/* Filtres en pilules : surface-alt ; actif en accent doux, sans bordure. */
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.puce {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: var(--oaa-surface-alt); color: var(--oaa-secondaire); font: 600 12.5px var(--oaa-police); white-space: nowrap; cursor: pointer;
  transition: background-color var(--oaa-duree-rapide) ease, color var(--oaa-duree-rapide) ease, transform var(--oaa-duree-rapide) ease;
}
.puce:hover:not(:disabled) { background: color-mix(in srgb, var(--oaa-encre) 6%, var(--oaa-surface-alt)); color: var(--oaa-encre); }
.puce:active:not(:disabled) { transform: scale(.98); }
.puce b { color: var(--oaa-encre); font-weight: 700; }
.puce[aria-pressed="true"], .puce.active { background: var(--oaa-accent-doux); color: var(--oaa-accent-fonce); }
.puce[aria-pressed="true"] b, .puce.active b { color: var(--oaa-accent-fonce); }
.puce-genre { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-surface-alt); color: var(--oaa-encre); font: 600 13px/1 var(--oaa-police); }

/* Pastille ronde d’un résultat d’appel (à la place des symboles ✓ ✉ ✕ ⚠ ☎ de src/stockage.js, qui sortent en emoji
   sous Windows) : la couleur du minéral, pleine ; un anneau (rond percé) pour les résultats neutres. */
.pastille { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--etat, var(--etat-neutre)); }
[data-resultat="repondu"] { --etat: var(--etat-en-ligne); }
[data-resultat="messagerie"] { --etat: var(--etat-decroche); }
[data-resultat="occupe"], [data-resultat="a-rappeler"], [data-resultat="en-cours"] { --etat: var(--etat-sonne); }
[data-resultat="refuse"], [data-resultat="injoignable"], [data-resultat="invalide"], [data-resultat="echec"] { --etat: var(--etat-probleme); }
[data-resultat="sans-reponse"], [data-resultat="passe"], [data-resultat="coupe"], [data-resultat="entrant"], [data-resultat="arrete"], [data-resultat="a-appeler"], [data-resultat="appele"] { --etat: var(--etat-neutre); }
:is([data-resultat="sans-reponse"], [data-resultat="passe"], [data-resultat="coupe"], [data-resultat="entrant"], [data-resultat="arrete"], [data-resultat="a-appeler"], [data-resultat="appele"]) .pastille,
.pastille:is([data-resultat="sans-reponse"], [data-resultat="passe"], [data-resultat="coupe"], [data-resultat="entrant"], [data-resultat="arrete"], [data-resultat="a-appeler"], [data-resultat="appele"]) { clip-path: var(--octogone-creux); }
/* Le résultat dans un tableau : point + mot dans une pilule teintée, le mot de la couleur du minéral ; les neutres en
   surface-alt et en secondaire, avec leur anneau. */
.resultat {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px 0 8px; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: color-mix(in srgb, var(--etat, var(--etat-neutre)) 12%, var(--oaa-surface)); color: var(--etat, var(--etat-neutre)); font-size: 12px; font-weight: 650; line-height: 1;
}
.resultat .pastille { width: 7px; height: 7px; }
.resultat:is([data-resultat="sans-reponse"], [data-resultat="passe"], [data-resultat="coupe"], [data-resultat="entrant"], [data-resultat="arrete"], [data-resultat="a-appeler"], [data-resultat="appele"]) { background: var(--oaa-surface-alt); color: var(--oaa-secondaire); }
.resultat.repondu { font-weight: 700; }

/* ------------------------------------------------------------------------------------------------ Barre d’état (Lignes) */

/* Bande des minéraux : cinq compteurs toujours présents, posés sur le fond (ni cadre ni séparateurs) : un point rond, le
   chiffre, le mot. À zéro : chiffre et mot en secondaire, point neutre. */
.bande-etats {
  display: inline-flex; align-items: center; height: 34px; padding: 0 2px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: transparent; box-shadow: none; font-size: 12.5px; color: var(--oaa-secondaire); white-space: nowrap;
}
.bande-etats > span { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; }
.bande-etats i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--etat); }
.bande-etats b { color: var(--oaa-encre); font-weight: 700; }
.bande-etats [data-zero], .bande-etats [data-zero] b { color: var(--oaa-secondaire); font-weight: 600; }
.bande-etats [data-zero] i { background: var(--oaa-bord-fort); }
/* Transport de la liste : commandes satinées ; Démarrer, Pause et Reprendre en lilas. L’état reste une pastille
   turquoise ou citrine. Les positions et dimensions des commandes ne changent pas selon l’état. */
.transport {
  display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 3px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: var(--oaa-surface); box-shadow: var(--oaa-ombre);
}
.transport[data-etat="en-cours"] { border-color: transparent; background: var(--oaa-surface); }
.transport .segment {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 0; border-radius: var(--oaa-rayon-pilule);
  background: var(--oaa-bouton-satin); color: var(--oaa-encre); font: 600 13px/1 var(--oaa-police); white-space: nowrap; cursor: pointer; box-shadow: var(--oaa-bouton-ombre);
  transition: background-color var(--oaa-duree-rapide) ease, opacity var(--oaa-duree-rapide) ease, box-shadow var(--oaa-duree-rapide) ease, transform var(--oaa-duree-rapide) ease;
}
.transport .segment:hover:not(:disabled) { box-shadow: var(--oaa-bouton-ombre-survol); }
.transport .segment:active:not(:disabled) { transform: scale(.98); }
.transport .segment:disabled { opacity: .45; cursor: default; }
.transport #principal.segment { background: var(--oaa-bouton-principal); color: var(--oaa-sur-bouton-principal); font-weight: 650; }
.transport #principal.segment:hover:not(:disabled) { box-shadow: var(--oaa-bouton-ombre-survol); }
/* Démarrer sans liste, Reprendre pendant un appel entrant : son fond, à demi effacé (plus de contour en tirets). */
.transport #principal.segment:disabled { opacity: .5; box-shadow: none; outline: 0; }
.transport-direct {
  display: none; align-items: center; gap: 8px; height: 32px; padding: 0 13px 0 12px; border-radius: var(--oaa-rayon-pilule);
  background: var(--oaa-info-doux); color: var(--oaa-info); font: 650 12.5px/1 var(--oaa-police); white-space: nowrap;
}
.transport[data-etat="en-cours"] .transport-direct, .transport[data-etat="pause"] .transport-direct { display: inline-flex; }
.transport[data-etat="pause"] .transport-direct { background: var(--oaa-attention-doux); color: var(--oaa-attention); }
.transport-direct i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--info-halo); }
.transport[data-etat="pause"] .transport-direct i { box-shadow: 0 0 0 4px var(--attention-halo); }
.transport[data-etat="pause"] .transport-direct i::after { animation: none; display: none; }

/* ------------------------------------------------------------------------------------------------ Cartes, tuiles */

/* Carte de page : surface posée sur le fond, rayon 24, l’ombre douce, sans bordure visible. */
.carte {
  margin: 16px 0 0; padding: 22px 24px; min-width: 0; border: 1px solid transparent; border-radius: var(--oaa-rayon-grand);
  background: var(--oaa-surface); box-shadow: var(--oaa-ombre);
}
figcaption, .titre-carte { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
figcaption { flex-wrap: nowrap; }
figcaption > div { flex: 1; min-width: 0; }
figcaption > .bouton, figcaption > .lien { flex: none; }
/* Tuile chiffrée : surtitre, chiffre de 29 px, précision en secondaire. */
.tuile {
  display: flex; flex-direction: column; min-width: 0; padding: 20px 22px; border: 1px solid transparent; border-radius: var(--rayon-tuile);
  background: var(--oaa-surface); box-shadow: var(--oaa-ombre);
}
.tuile .libelle, .tuile .surtitre { display: flex; align-items: center; gap: 7px; font: 650 11px/15px var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; color: var(--oaa-secondaire); }
.tuile strong { margin-top: 6px; font: 650 29px/32px var(--oaa-police-titre); letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tuile .precision, .tuile small { margin-top: 4px; color: var(--oaa-secondaire); font-size: 12px; line-height: 17px; }
/* Une seule tuile héros par vue : fond turquoise très doux (jamais un contour ni un dégradé), chiffre de 40 px en
   turquoise, sa jauge en bas. La classe .oaa-texte-irise reste posée (le JS ne la lit pas) mais ne teint plus le chiffre. */
.tuile.heros { --oaa-fond-carte: var(--info-teinte); border-color: transparent; background: var(--info-teinte); box-shadow: var(--oaa-ombre); }
.tuile.heros strong { font-size: 40px; line-height: 40px; letter-spacing: -.025em; }
.tuile.heros strong.oaa-texte-irise { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--oaa-info); }

/* ------------------------------------------------------------------------------------------------ Tableaux */

/* Sans aucun trait : un en-tête en surtitre, des rangées arrondies séparées par un fond alterné très doux ; le survol en
   surface-alt. L’en-tête collant garde le fond de la carte (les rangées passent dessous). */
:where(table) { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
:where(th) {
  text-align: left; padding: 10px 14px; background: var(--oaa-surface); color: var(--oaa-secondaire);
  font: 650 11px/1.3 var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border-bottom: 0;
}
/* En-tête collant : il reste en haut du conteneur qui défile (la page, ou le cadre d’un tableau pleine hauteur). */
:where(thead th) { position: sticky; top: 0; z-index: 1; }
:where(td) { padding: 11px 14px; border-bottom: 0; background: transparent; vertical-align: middle; transition: background-color var(--oaa-duree-rapide) ease; }
:where(tbody tr:nth-child(even) td) { background: var(--rangee-alternee); }
:where(tbody tr:hover td) { background: var(--oaa-surface-alt); }
:where(tbody td:first-child) { border-top-left-radius: var(--oaa-rayon-petit); border-bottom-left-radius: var(--oaa-rayon-petit); }
:where(tbody td:last-child) { border-top-right-radius: var(--oaa-rayon-petit); border-bottom-right-radius: var(--oaa-rayon-petit); }
td.nombre, th.nombre, .numerique { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.defile { overflow-x: auto; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail { color: var(--oaa-discret); font-size: 12px; }

/* ------------------------------------------------------------------------------------------------ Messages */

.vide {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 16px 20px; border: 1px solid transparent; border-radius: var(--oaa-rayon);
  background: var(--oaa-surface); color: var(--oaa-secondaire); box-shadow: var(--oaa-ombre);
}
/* Message dans une page (data-ton="info" par défaut, "succes", "attention", "erreur") : un fond doux arrondi et un
   pictogramme, sans liseré ni bordure. */
.message-page, .erreur-page {
  --ton: var(--oaa-info); --ton-doux: var(--oaa-info-doux); --oaa-ic: var(--oaa-ic-alerte);
  display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; padding: 12px 16px 12px 14px;
  border: 1px solid transparent; border-radius: var(--oaa-rayon);
  background: var(--ton-doux); box-shadow: none; color: var(--oaa-encre); font-size: 13.5px;
}
.message-page::before, .erreur-page::before {
  content: ""; width: 18px; height: 18px; margin-top: 1px; flex: none; background: var(--ton);
  -webkit-mask: var(--oaa-ic) center / contain no-repeat; mask: var(--oaa-ic) center / contain no-repeat;
}
.message-page[data-ton="succes"] { --ton: var(--oaa-info); --ton-doux: var(--oaa-info-doux); }
.message-page[data-ton="attention"] { --ton: var(--oaa-attention); --ton-doux: var(--oaa-attention-doux); }
.message-page[data-ton="erreur"], .erreur-page { --ton: var(--oaa-danger); --ton-doux: var(--oaa-danger-doux); }
.erreur-page[hidden] { display: none; }
.message-page:not([hidden]), .erreur-page:not([hidden]) { animation: oaa-apparition var(--oaa-duree) var(--oaa-courbe); }

/* ------------------------------------------------------------------------------------------------ Onglets, jauge, panneau, dialogue */

/* Onglets horizontaux ou choix segmenté : <div class="segments" role="tablist"><button role="tab" aria-selected="true">…
   (ou aria-pressed). Une piste en pilule surface-alt ; l’élément choisi est une pilule en surface avec l’ombre douce,
   jamais un souligné. La navigation verticale de l’espace de travail (.onglets) est dans suivi.css. */
.segments { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-surface-alt); box-shadow: none; }
.segments > :is(button, a, [role="tab"]) {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: transparent; color: var(--oaa-secondaire); font: 600 12.5px/1 var(--oaa-police); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--oaa-duree-rapide) ease, color var(--oaa-duree-rapide) ease;
}
.segments > :is(button, a, [role="tab"]):hover { color: var(--oaa-encre); }
.segments > :is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) { background: var(--oaa-surface); border-color: transparent; color: var(--oaa-encre); box-shadow: var(--oaa-ombre); }
/* Jauge : une pilule surface-alt, le remplissage turquoise (transform: scaleX, jamais width). */
.jauge-marque { display: block; width: 88px; height: 6px; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-surface-alt); overflow: hidden; }
.jauge-marque > span { display: block; height: 100%; border-radius: inherit; background: var(--oaa-info); transform-origin: left; transform: scaleX(0); transition: transform var(--oaa-duree-lente) var(--oaa-courbe); }
/* Panneau latéral : surface pleine, arrondie du côté de la page, l’ombre de flottant (sans anneau ni flou). */
.panneau-lateral {
  position: fixed; top: var(--oaa-barre); right: 0; bottom: 0; width: 420px; max-width: 100vw; overflow: auto; padding: 20px; z-index: 30;
  border-left: 1px solid transparent; border-radius: var(--oaa-rayon-grand) 0 0 var(--oaa-rayon-grand);
  background: var(--oaa-surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--oaa-ombre-flottant);
  animation: oaa-apparition var(--oaa-duree) var(--oaa-courbe);
}
:where(dialog) { width: min(520px, calc(100vw - 32px)); padding: 22px 24px; border: 1px solid transparent; border-radius: var(--oaa-rayon-grand); color: var(--oaa-encre); }
:where(dialog[open]) { animation: oaa-apparition var(--oaa-duree) var(--oaa-courbe); }
:where(dialog)::backdrop { background: var(--oaa-voile); }

/* ------------------------------------------------------------------------------------------------ Page Bilan */

/* Même largeur que DataFiche. Seule, la page respire : 24 px en haut, 28 px sur les côtés. */
.page-bilan .page { max-width: 1760px; padding: 24px 28px 64px; }
/* Fenêtre étroite (moitié d’un écran 1366) : les liens passent à la ligne plutôt que d’écraser le titre. */
.page-bilan .entete { flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.entete-logo { --oaa-taille-symbole: 28px; }
.entete-sep { width: 4px; height: 30px; flex: none; }   /* l’ancien filet vertical : un espace */
.entete-titre { flex: 1 1 240px; min-width: 0; }
/* Message d’erreur de la page (bilan.js l’insère en tête du body, hors de .page) : aligné sur la colonne de la page. */
.page-bilan > .erreur-page { max-width: 1704px; margin: 16px max(28px, calc((100% - 1704px) / 2)) 0; }
/* L’annonce « aucun appel » garde son écart avec les tuiles (gestion.html a aussi un #vide : sélecteur limité au bilan). */
.page-bilan #vide { margin: 0 0 16px; }
.page-bilan .entete h1 { font-size: 24px; }
.page-bilan .direct { margin-top: 2px; min-height: 19px; font-size: 12.5px; }
.entete .bouton .oaa-ic { --oaa-taille-ic: 15px; }

/* Barre d’outils : le choix des appels et de la période, l’export. */
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 14px; }
.filtres label { display: inline-flex; align-items: center; gap: 9px; font: 650 11px/1 var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; color: var(--oaa-secondaire); }
.filtres select { min-width: 200px; max-width: 340px; text-overflow: ellipsis; letter-spacing: 0; text-transform: none; }
#filtre-periode { min-width: 180px; }
/* Dans le Bilan, la barre se pose sur le fond, sans cadre : chaque choix est une pilule en surface avec l’ombre douce,
   son libellé en surtitre dedans et le chevron au bout ; l’anneau de focus entoure toute la pilule. */
.page-bilan .filtres { gap: 12px; margin: 20px 0 16px; }
.page-bilan .filtres label {
  position: relative; height: 40px; gap: 10px; padding: 0 0 0 17px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: var(--oaa-surface); box-shadow: var(--oaa-ombre); cursor: pointer;
}
.page-bilan .filtres label::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; pointer-events: none;
  border: solid var(--oaa-secondaire); border-width: 0 1.8px 1.8px 0; border-radius: 0 0 1.5px 0; transform: translateY(-70%) rotate(45deg);
}
/* L’anneau entoure toute la pilule, au clavier seulement (comme la liste de Lignes) : un clic ne dessine aucun contour. */
.page-bilan .filtres label:has(:focus-visible) { outline: 2px solid var(--oaa-info); outline-offset: 2px; }
.page-bilan .filtres select {
  height: 38px; min-width: 180px; max-width: 320px; padding: 0 42px 0 0; appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 0 var(--oaa-rayon-pilule) var(--oaa-rayon-pilule) 0; background: transparent; box-shadow: none;
  color: var(--oaa-encre); font: 600 13.5px var(--oaa-police); cursor: pointer;
}
.page-bilan .filtres select:focus-visible { outline: 0; }
.page-bilan .filtres select option { background: var(--oaa-surface); color: var(--oaa-encre); }
.page-bilan #filtre-periode { min-width: 150px; }
.page-bilan .filtres .bouton { padding: 0 18px 0 16px; }

/* Les chiffres clés : la tuile héros (taux de réponse) et cinq tuiles. Elles arrivent en cascade, une fois. */
.tuiles { display: grid; grid-template-columns: minmax(0, 1.55fr) repeat(5, minmax(0, 1fr)); gap: 16px; }
.tuile .libelle .pastille { width: 10px; height: 10px; }
.tuile.heros .precision { margin-bottom: 12px; }
.tuile-jauge { width: 100%; height: 6px; margin-top: auto; background: var(--oaa-surface); }

/* Les graphiques : la série mise en avant en accent, les autres atténuées, pistes en surface-alt, tout arrondi. */
.grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.grille .carte { margin: 0; padding: 22px 24px 20px; display: flex; flex-direction: column; }
/* Les deux cartes ont la hauteur de la plus haute : le graphique prend la place libre (celui des heures s’étire). */
.grille .graphe { flex: 1 1 auto; display: flex; flex-direction: column; }
.page-bilan .carte h2 { font-size: 16px; }
.graphe { min-height: 60px; }
[data-bascule]::before { --oaa-ic: var(--oaa-ic-journal); }
[data-bascule][aria-pressed="true"]::before { --oaa-ic: var(--oaa-ic-bilan); }
.page-bilan figcaption .bouton.mini { height: 32px; padding: 0 12px 0 10px; font-size: 12.5px; }
.tableau-graphe table { font-size: 13px; }

/* Barres horizontales : résultats, profils. Piste en pilule, remplissage en pilule (au moins un rond de 10 px) : sa
   longueur passe par clip-path (bilan.js pose --p), ce qui garde l’arrondi du bout, sans toucher à la mise en page. */
.barres { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; column-gap: 12px; }
.barres .nom { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--oaa-encre); font-size: 13px; white-space: nowrap; }
.barres .piste { position: relative; display: flex; align-items: center; height: 26px; cursor: default; border-radius: var(--oaa-rayon-pilule); }
.barres .piste:focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 1px; }
.barres .trait-barre { position: relative; width: 100%; height: 10px; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-surface-alt); }
.barres .trait-barre::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--attenue);
  clip-path: inset(0 min(calc((1 - var(--p, 0)) * 100%), calc(100% - 10px)) 0 0 round var(--oaa-rayon-pilule));
  transition: clip-path var(--oaa-duree-lente) var(--oaa-courbe), opacity var(--oaa-duree-rapide) ease;
}
.barres .trait-barre.mis-en-avant::before { background: var(--serie); }
.barres .piste:hover .trait-barre::before, .barres .piste:focus-visible .trait-barre::before { opacity: .82; }
.barres .valeur { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.barres .valeur b { font-weight: 700; color: var(--oaa-encre); }
.barres .valeur span { display: inline-block; min-width: 40px; margin-left: 10px; color: var(--oaa-discret); font-size: 12.5px; }

/* Colonnes : taux de réponse par heure. La meilleure heure en accent, les autres atténuées, les fragiles en retrait.
   Une grille : repères et colonnes sur la première rangée, heures dessous. Plus de quadrillage : trois repères en texte
   (0 · 50 · 100 %) suffisent. La rangée prend la hauteur libre de la carte (180 px au moins), pour que les deux cartes
   finissent ensemble. Hauteurs et positions en % (bilan.js) ; .zone s’efface (display: contents) pour que ses enfants
   se placent dans la grille. */
.colonnes { position: relative; flex: 1 1 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: minmax(180px, 1fr) auto; margin-top: 8px; }
.colonnes .axe-y { position: relative; grid-area: 1 / 1; }
.colonnes .axe-y span { position: absolute; right: 10px; transform: translateY(50%); color: var(--oaa-discret); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.colonnes .zone { display: contents; }
.colonnes .quadrillage { display: none; }
.colonnes .bandes { position: relative; grid-area: 1 / 2; display: flex; gap: 4px; }
.colonnes .bande { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: default; border-radius: var(--oaa-rayon-petit); transition: background-color var(--oaa-duree-rapide) ease; }
.colonnes .bande:hover, .colonnes .bande:focus-visible { background: var(--oaa-surface-alt); }
.colonnes .bande:focus-visible { outline: 2px solid var(--oaa-info); outline-offset: -2px; }
.colonnes .col { position: relative; width: 100%; max-width: 28px; border-radius: 10px 10px 4px 4px; background: var(--attenue); transition: height var(--oaa-duree-lente) var(--oaa-courbe); }
.colonnes .col.mis-en-avant { background: var(--serie); }
.colonnes .col.fragile { opacity: .45; }
.colonnes .col .etiquette { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; color: var(--oaa-accent); font: 700 12.5px/1 var(--oaa-police-titre); white-space: nowrap; }
.colonnes .legendes { grid-area: 2 / 2; display: flex; gap: 4px; margin-top: 8px; }
.colonnes .legendes div { flex: 1; min-width: 0; text-align: center; font-size: 11px; line-height: 15px; font-variant-numeric: tabular-nums; }
.colonnes .legendes b { display: block; color: var(--oaa-encre); font-size: 12px; line-height: 16px; font-weight: 600; }
.colonnes .legendes span { color: var(--oaa-discret); }

/* Les sept jours restent comparables : mêmes effectifs cumulés, même échelle.
   Sur téléphone, seul le graphique défile pour garder les libellés lisibles. */
.page-bilan #carte-semaine { grid-column: 1 / -1; }
.page-bilan #graphe-semaine {
  min-width: 0; max-width: 100%; overflow-x: auto; padding: 24px 0 10px;
  overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--oaa-bord-fort) transparent;
}
.page-bilan #graphe-semaine .colonnes { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 160px auto; min-width: 320px; margin-top: 0; }
.page-bilan #graphe-semaine .col { max-width: 44px; }
.page-bilan #graphe-semaine .col.fragile { opacity: 1; background: var(--attenue); }
.page-bilan #graphe-semaine .etiquette { color: var(--oaa-encre); }
.page-bilan #graphe-semaine .semaine-vide { margin-bottom: 5px; color: var(--oaa-secondaire); font-size: 13px; }
.page-bilan #tableau-semaine table { min-width: 420px; }

/* Profils qui répondent : les meilleurs profils en cartes accent doux (à reprendre dans DataFiche), puis un bloc
   surface-alt numéroté par critère. */
.carte-profils { padding: 22px 24px 24px; }
.carte-profils .titre-carte { margin-bottom: 16px; }
.carte-profils .titre-carte .sous-titre { max-width: 820px; }
/* Au plus un profil par critère, donc cinq cartes : cinq colonnes dès que la largeur le permet (232 px au moins), qui
   remplissent la rangée sur grand écran sans étirer une carte seule sur toute la largeur. */
.profils-meilleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(232px, calc((100% - 48px) / 5)), 1fr)); gap: 12px; margin-bottom: 16px; }
.profils-meilleurs .sous-titre { grid-column: 1 / -1; margin: 0; }
.profils-meilleurs .profil-meilleur {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 6px 10px; margin: 0; padding: 14px 18px 16px;
  border-color: transparent; border-radius: 20px; background: var(--oaa-accent-doux); box-shadow: none;
}
.profil-meilleur-critere { grid-column: 1; align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 11px/15px var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; color: var(--oaa-secondaire); }
.profil-meilleur-ecart { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-info-doux); color: var(--oaa-info); font: 650 11.5px/1 var(--oaa-police); white-space: nowrap; }
.profil-meilleur strong { grid-column: 1 / -1; font: 650 16px/20px var(--oaa-police-titre); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-meilleur-taux { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; color: var(--oaa-secondaire); font-size: 13px; }
.profil-meilleur-taux b { color: var(--oaa-accent); font: 650 29px/32px var(--oaa-police-titre); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.profil-meilleur-detail { grid-column: 1 / -1; margin-top: 2px; color: var(--oaa-secondaire); font-size: 12px; line-height: 17px; }
.profils-base { margin: 0 0 16px; color: var(--oaa-secondaire); font-size: 13px; }
.profils-grille { columns: 3 340px; column-gap: 16px; counter-reset: critere; }
.profil-critere { break-inside: avoid; margin: 0 0 16px; min-width: 0; padding: 16px 18px 12px; border: 1px solid transparent; border-radius: var(--rayon-bloc); background: var(--oaa-surface-alt); }
.profil-critere h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 650 11px/1.3 var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; color: var(--oaa-secondaire); }
.profil-critere h3::before {
  counter-increment: critere; content: counter(critere, decimal-leading-zero); display: inline-grid; place-items: center; flex: none;
  min-width: 24px; height: 22px; padding: 0 6px; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-surface);
  color: var(--oaa-accent); font: 700 11px/1 var(--oaa-police-mono); letter-spacing: 0;
}
.profil-critere h3 small { margin-left: auto; color: var(--oaa-secondaire); font: 500 11.5px var(--oaa-police); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.profil-critere .trait-barre { background: var(--oaa-surface); }
.profil-barres .nom { max-width: 170px; overflow: hidden; text-overflow: ellipsis; display: block; }
.profil-barres .piste { height: 24px; }
.profil-barres .trait-barre { height: 8px; }
.profil-barres .trait-barre::before { clip-path: inset(0 min(calc((1 - var(--p, 0)) * 100%), calc(100% - 8px)) 0 0 round var(--oaa-rayon-pilule)); }
/* Peu d’appels : le résultat ne veut pas encore dire grand-chose, il reste en retrait ; l’inconnu aussi. */
.profil-barres .nom.fragile, .profil-barres .valeur.fragile, .profil-barres .valeur.fragile b { color: var(--oaa-discret); }
.profil-barres .trait-barre.fragile::before { opacity: .45; }
.profil-barres .nom.inconnu { font-style: italic; }

/* Tous les appels, numéros de la liste. */
.carte-appels .titre-carte { align-items: center; }
.carte-appels .champ-recherche { width: min(320px, 100%); }
.carte-appels #recherche { width: 100%; height: 40px; }
.puce .pastille { width: 8px; height: 8px; }
.plus { margin-top: 16px; }
/* Zone de suppression : un bloc surface-alt arrondi, sans filet au-dessus. */
.page-bilan .zone-danger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 10px 10px 10px 18px;
  border-radius: var(--rayon-bloc); background: var(--oaa-surface-alt); color: var(--oaa-secondaire); font-size: 13px;
}
#resume-numeros { margin: -6px 0 16px; }
#table-appels td:first-child, #table-numeros td:last-child, #table-jours td:first-child { white-space: nowrap; }
/* Assez large pour les colonnes : le tableau ne défile plus de côté, son en-tête colle alors en haut de la page. */
@media (min-width: 1180px) { .page-bilan .defile { overflow-x: clip; } }

/* Bulle d’information des graphiques : une surface qui flotte, sans trait. */
.bulle {
  position: fixed; z-index: 10; pointer-events: none; max-width: 250px; padding: 10px 12px; border: 1px solid transparent; border-radius: 14px;
  background: var(--oaa-surface); color: var(--oaa-encre); box-shadow: var(--oaa-ombre-flottant); font-size: 12px; line-height: 1.4;
  animation: oaa-fondu var(--oaa-duree-rapide) ease;
}
.bulle strong { display: block; font: 650 16px/1.2 var(--oaa-police-titre); }
.bulle span { color: var(--oaa-secondaire); }

@media (max-width: 1100px) {
  .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tuile.heros { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .grille { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page, .page-bilan .page { padding: 16px 16px 48px; }
  .page-bilan > .erreur-page { margin: 12px 16px 0; }
  .entete { flex-direction: column; }
  .entete-titre { flex: none; }           /* en colonne, la base de 240 px deviendrait une hauteur vide sous le titre */
  .entete-sep { display: none; }
  .tuiles { grid-template-columns: 1fr 1fr; }
  .filtres label { flex: 1 1 140px; flex-wrap: wrap; }
  .page-bilan .filtres label { flex: 1 1 100%; flex-wrap: nowrap; }
  .filtres select, #recherche { min-width: 0; width: 100%; }
  .page-bilan .filtres select { flex: 1; }
  .page-bilan figcaption { flex-wrap: wrap; }
  .page-bilan figcaption > div { flex-basis: 100%; }
  .page-bilan .profil-critere h3 { flex-wrap: wrap; }
  .page-bilan .profil-critere h3 small { width: 100%; margin-left: 0; white-space: normal; }
  .page-bilan .barres { grid-template-columns: minmax(0, 1fr) minmax(20px, .8fr) max-content; column-gap: 8px; }
  .page-bilan .barres .nom { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .page-bilan .zone-danger { flex-direction: column; align-items: stretch; padding: 14px; }
  .page-bilan .zone-danger .bouton, .page-bilan .titre-carte .actions .bouton { max-width: 100%; height: auto; min-height: 44px; padding: 12px; white-space: normal; line-height: 1.4; }
}

/* ------------------------------------------------------------------------------------------------ Vues intégrées */

/* Page affichée dans un onglet de l’espace de travail : pas de titre ni de liens en double. Fond transparent (body
   .oaa-integre-transparent, theme.css) : le fond uni de la page parente continue derrière ; cartes, tableaux et
   panneaux restent opaques. Marges de la coque Galet : 4 px contre la navigation, 16 px à droite. */
.integre .page { padding-top: 8px; }
.integre .entete h1, .integre .entete .actions, .integre .entete-logo, .integre .entete-sep { display: none; }
:root[data-integration="extension"] .page { max-width: none; padding: 8px 16px 40px 4px; }
:root[data-integration="extension"] .entete a[href*="suivi.html"],
:root[data-integration="extension"] .entete a[href*="bilan.html"],
:root[data-integration="extension"] .entete a[href*="gestion.html"] { display: none; }
/* L’état des lignes est déjà présenté par la barre d’état de l’espace de travail. */
:root[data-integration="extension"] .entete { display: none; }
:root[data-integration="extension"] .filtres { margin-top: 0; }
:root[data-integration="extension"] .page-bilan > .erreur-page { max-width: none; margin: 12px 16px 0 4px; }

/* Couleurs forcées (contraste élevé de Windows) : les bordures transparentes redeviennent des contours ; pastilles,
   points et traits prennent la couleur du texte ; ce qui est choisi prend la couleur de sélection. */
@media (forced-colors: active) {
  .bouton, .bouton:is(.principal, .irise, .danger-doux, .danger-plein, .fantome), .transport #principal.segment, .transport .segment {
    background: ButtonFace; color: ButtonText; border-color: ButtonText; box-shadow: none;
  }
  .transport .segment { outline: 1px solid ButtonText; outline-offset: -1px; }
  .bouton:disabled, .transport #principal.segment:disabled, .transport .segment:disabled { color: GrayText; border-color: GrayText; opacity: 1; }
  .bouton:focus-visible, .transport .segment:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
  .pastille, .barres .trait-barre::before, .colonnes .col, .direct .point, .bande-etats i, .transport-direct i, .jauge-marque > span { forced-color-adjust: none; background: CanvasText; }
  .tuile.heros { border-color: CanvasText; background: Canvas; }
  .tuile.heros strong.oaa-texte-irise { color: CanvasText; }
  .touche.marquee, .puce[aria-pressed="true"], .segments > :is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
  input[type="checkbox"] { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  input[type="checkbox"]:checked { border-color: Highlight; background: Highlight; }
  input[type="checkbox"]::before { background: HighlightText; }
}


/* Mobile : les commandes restent tactiles et les heures gardent leur largeur dans une zone qui défile seule. */
@media (max-width: 720px) {
  .page-bilan :is(.bouton, .puce) { min-width: 44px; min-height: 44px; }
  .page-bilan .puce { max-width: 100%; height: auto; padding-block: 10px; white-space: normal; line-height: 1.3; }
  .page-bilan .filtres label { min-height: 44px; height: auto; }
  .page-bilan .grille .carte { min-width: 0; padding: 16px; }
  .page-bilan #graphe-heures {
    min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding: 20px 0 10px;
    scrollbar-width: thin; scrollbar-color: var(--oaa-bord-fort) transparent;
  }
  /* 26 px minimum par heure, soit au moins 760 px pour 24 heures ; une courte plage reste ajustée à la carte. */
  .page-bilan #graphe-heures .colonnes { grid-template-columns: 44px minmax(max-content, 1fr); }
  .page-bilan #graphe-heures .bande, .page-bilan #graphe-heures .legendes > div { flex: 1 0 26px; min-width: 26px; }
}