@import url("/theme.css");

/* Administration — onROCKY. La même finition que le panel : blanc nacré ou graphite, surfaces satinées,
   reflets lilas et menthe, boutons en relief doux. La disposition et les couleurs des états restent communes
   aux deux thèmes. Les actions définitives gardent leur rouge franc et leur confirmation explicite.
   Les jetons de theme.css alimentent aussi le panel ; les sélecteurs de cette page restent autonomes.
   CSP : style-src 'self', aucun attribut style. Les bordures redeviennent visibles en couleurs forcées. */

/* ------------------------------------------------------------ Base */
:root {
  font-synthesis: none; --muted: var(--oaa-secondaire);
  /* La barre latérale de la maquette (244 px) ; 220 px sous 1150 px. */
  --oaa-nav-admin: 244px;
  /* Galet : les rayons de forme qui s'ajoutent aux jetons (10 · 16 · 24 · pilule), les teintes et la rangée alternée. */
  --rayon-champ: 14px;
  --rayon-bloc: 18px;
  --rayon-tuile: 22px;
  --rayon-carte: 28px;
  --admin-bord-satin: color-mix(in srgb, var(--oaa-bord) 52%, transparent);
  --admin-reflet: color-mix(in srgb, var(--oaa-encre) 4%, transparent);
  --info-teinte: color-mix(in srgb, var(--oaa-info) 7%, var(--oaa-surface));
  --info-halo: color-mix(in srgb, var(--oaa-info) 22%, transparent);
  --rangee-alternee: color-mix(in srgb, var(--oaa-surface-alt) 60%, var(--oaa-surface));
  --survol-surface: color-mix(in srgb, var(--oaa-encre) 4%, var(--oaa-surface));
  --survol-alt: color-mix(in srgb, var(--oaa-encre) 5%, var(--oaa-surface-alt));
  /* Case à cocher vide : un fond gris doux, sans contour (mêmes valeurs que rapport/bilan.css et DataFiche). */
  --case-vide: color-mix(in srgb, var(--oaa-bord-fort) 45%, var(--oaa-surface-alt));
}
* { box-sizing: border-box; }
/* Une ambiance discrète derrière des surfaces opaques, y compris à la connexion. */
body { margin: 0; font: 14px/1.5 var(--oaa-police); font-variant-numeric: tabular-nums; color: var(--oaa-encre); background: var(--oaa-fond); background-image: var(--oaa-fond-ambiance); background-attachment: fixed; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
:is(button, a):focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 2px; }
a { color: var(--oaa-info); }
::selection { background: var(--oaa-accent-doux); color: var(--oaa-encre); }
h1, h2, h3, p { margin-top: 0; }
/* Titre de page 26/650, titre de section 16/600, titre de bloc 15/600. */
h1 { margin-bottom: 8px; font: 650 26px/32px var(--oaa-police-titre); letter-spacing: -.03em; }
h2 { margin-bottom: 4px; font: 600 16px/24px var(--oaa-police-titre); letter-spacing: -.015em; }
h3 { font: 600 15px/20px var(--oaa-police-titre); letter-spacing: -.01em; }
.petit { font-size: 12px; }
.secondaire { color: var(--oaa-secondaire); }
.surtitre { margin: 0 0 6px; font: 650 11px/16px var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; color: var(--oaa-secondaire); }
.lecteur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ Champs : surface douce et liseré léger,
   anneau turquoise au focus. Le chevron reste dessiné séparément du fond. */
label { display: block; margin: 16px 0 6px 4px; color: var(--oaa-secondaire); font: 600 12px/16px var(--oaa-police); }
input, select, textarea {
  width: 100%; height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--rayon-champ);
  background-color: var(--oaa-champ-fond); color: var(--oaa-encre); font: 500 13.5px var(--oaa-police);
  border-color: var(--admin-bord-satin); box-shadow: inset 0 1px 2px var(--admin-reflet);
  transition: background-color var(--oaa-duree-rapide) ease, border-color var(--oaa-duree-rapide) ease;
}
select {
  --chevron: var(--oaa-secondaire);
  padding-right: 36px; cursor: pointer; text-overflow: ellipsis; -webkit-appearance: none; appearance: none;
  background-image:
    linear-gradient(45deg, transparent calc(50% - .8px), var(--chevron) calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px)),
    linear-gradient(-45deg, transparent calc(50% - .8px), var(--chevron) calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px));
  background-size: 5px 5px; background-position: right 22px center, right 17px center; background-repeat: no-repeat;
}
select option { background-color: var(--oaa-surface); color: var(--oaa-encre); }
textarea { height: auto; padding: 11px 14px; border-radius: var(--oaa-rayon); resize: vertical; line-height: 1.5; }
/* Case à cocher : 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. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center;
  width: 18px; height: 18px; padding: 0; margin: 0; border: 1px solid transparent; border-radius: 6px;
  background: var(--case-vide); box-shadow: none; cursor: pointer;
}
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);
}
input[type="checkbox"]:checked { background: var(--oaa-accent); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover:not(:disabled):not(:checked) { background: color-mix(in srgb, var(--oaa-bord-fort) 65%, var(--oaa-surface-alt)); }
::placeholder { color: var(--oaa-discret); opacity: 1; }   /* le gris par défaut de Chrome passe sous 4,5:1 sur surface-alt ; discret reste au-dessus (5,9:1) sans passer pour une valeur */
:is(input, select, textarea):focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 1px; border-color: transparent; }
:is(input:not([type="checkbox"]), select, textarea):hover:not(:disabled):not(:focus) { background-color: var(--survol-alt); }
:is(input, select, textarea):disabled { opacity: .55; cursor: default; }
input[type="checkbox"]:focus-visible { outline-offset: 2px; }
.champ { height: 44px; padding: 0 16px; font-size: 14.5px; }
/* Recherche : une pilule, la loupe ronde devant (pictogramme de theme.css, posé par le conteneur). */
input[type="search"] { border-radius: var(--oaa-rayon-pilule); padding-left: 42px; }
:is(.equipe-filtres > div:first-child, .filtre-recherche) { position: relative; }
:is(.equipe-filtres > div:first-child, .filtre-recherche)::after {
  content: ""; position: absolute; left: 16px; bottom: 11.5px; width: 17px; height: 17px; pointer-events: none; background: var(--oaa-secondaire);
  -webkit-mask: var(--oaa-ic-recherche) center / contain no-repeat; mask: var(--oaa-ic-recherche) center / contain no-repeat;
}

/* ------------------------------------------------------------ Boutons satinés : lilas pour l'action principale,
   neutre pour la secondaire, rose pour l'avertissement. Le danger définitif reste rubis plein.
   Le relief se renforce au survol ; la pression enfonce, sans déplacer la mise en page. */
.principal, .secondaire-bouton, .discret, .danger, .danger-texte {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px;
  border: 1px solid var(--admin-bord-satin); 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; box-shadow: var(--oaa-bouton-ombre);
  transition: box-shadow var(--oaa-duree-rapide) ease, border-color var(--oaa-duree-rapide) ease, color var(--oaa-duree-rapide) ease, transform var(--oaa-duree-rapide) ease, opacity var(--oaa-duree-rapide) ease;
}
:is(.principal, .secondaire-bouton, .discret, .danger, .danger-texte) .oaa-ic { --oaa-taille-ic: 16px; }
:is(.principal, .secondaire-bouton, .discret, .danger, .danger-texte, .fermer):active:not(:disabled) { transform: scale(.98); }
:is(.principal, .secondaire-bouton, .danger, .danger-texte):hover:not(:disabled) { box-shadow: var(--oaa-bouton-ombre-survol); border-color: color-mix(in srgb, var(--oaa-accent) 28%, var(--oaa-bord)); }
.principal { padding: 0 20px 0 18px; background: var(--oaa-bouton-principal); color: var(--oaa-sur-bouton-principal); font-weight: 650; }
.principal:has(> .oaa-ic) { padding-left: 16px; }
.discret { background: transparent; border-color: transparent; color: var(--oaa-encre); box-shadow: none; }
.discret:hover:not(:disabled) { background: var(--oaa-surface-alt); }
.danger { background: var(--oaa-danger); color: var(--oaa-sur-danger); font-weight: 650; }
.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--oaa-danger) 86%, var(--oaa-encre)); }
.danger-texte { background: var(--oaa-bouton-danger); color: var(--oaa-sur-bouton-danger); }
:is(.danger, .danger-texte):hover:not(:disabled) { border-color: color-mix(in srgb, var(--oaa-danger) 38%, var(--oaa-bord)); }
.large { width: 100%; height: 44px; margin-top: 20px; font-size: 14.5px; }
/* Actualiser, posé sur le fond : surface et l'ombre douce ; pictogramme devant, anneau d'attente derrière (sa place est
   réservée : rien ne bouge au rafraîchissement). */
#actualiser { padding: 0 16px 0 14px; }
#actualiser::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--oaa-ic-reessayer) center / contain no-repeat; mask: var(--oaa-ic-reessayer) center / contain no-repeat; color: var(--oaa-secondaire); }
#actualiser::after { content: ""; width: 11px; height: 11px; flex: none; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; opacity: 0; transition: opacity var(--oaa-duree-rapide) ease; }
#actualiser:disabled { opacity: .8; }
#actualiser:disabled::after { opacity: 1; animation: oaa-tourner .8s linear infinite; }
.fermer { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--oaa-secondaire); transition: background-color var(--oaa-duree-rapide) ease, color var(--oaa-duree-rapide) ease, transform var(--oaa-duree-rapide) ease; }
.fermer .oaa-ic { --oaa-taille-ic: 18px; }
.fermer:hover { background: var(--oaa-surface-alt); color: var(--oaa-encre); }

/* ------------------------------------------------------------ Puces d'état (contrat § 8 : .puce-etat)
   Un état = une couleur, un mot et un point rond : une pilule teintée, le mot en casse de phrase dans la couleur du
   minéral. Les neutres en surface-alt, le point graphite ; une licence supprimée, le point en anneau. */
.badge {
  --etat: var(--etat-neutre);
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px 0 8px;
  border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: color-mix(in srgb, var(--etat) 12%, var(--oaa-surface)); color: var(--etat);
  font: 650 11.5px/1 var(--oaa-police); letter-spacing: 0; white-space: nowrap; vertical-align: middle;
}
.badge::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.badge.active, .badge.en-direct, .badge.en-ligne { --etat: var(--etat-en-ligne); }
.badge.suspendue, .badge.a-decider { --etat: var(--etat-decroche); }
.badge.expiree, .badge.probleme { --etat: var(--etat-probleme); }
.badge.sonne { --etat: var(--etat-sonne); }
.badge.role-admin { --etat: var(--oaa-accent); }
.badge:is(.neutre, .supprimee) { background: var(--oaa-surface-alt); color: var(--oaa-secondaire); }
.badge:is(.neutre, .supprimee)::before { background: var(--oaa-bord-fort); }
.badge.supprimee::before { background: radial-gradient(circle closest-side, transparent 0 1.6px, var(--oaa-bord-fort) 2.1px); }
/* Témoin du direct (même geste que .oaa-temoin, sur un pseudo-élément de la puce) : un point, un anneau qui s'élargit. */
.badge.en-direct { position: relative; }
.badge.en-direct::after, .employe-activite.activite-recente::after {
  content: ""; position: absolute; top: 50%; box-sizing: border-box; width: 7px; height: 7px; margin-top: -3.5px; border: 2px solid currentColor; border-radius: 50%;
  opacity: 0; pointer-events: none; animation: oaa-temoin 2s var(--oaa-courbe) infinite;
}
.badge.en-direct::after { left: 8px; }
/* Un seul témoin bat par liste, quel que soit le nombre d'employés actifs ou d'écoutes en direct (IDENTITE § 6 : jamais
   plus de deux témoins animés à l'écran) : le premier ; les suivants gardent le point, la couleur et le mot. */
.employe-ligne:has(.activite-recente) ~ .employe-ligne .employe-activite.activite-recente::after,
tr:has(.badge.en-direct) ~ tr .badge.en-direct::after { display: none; }
.compte { display: inline-grid; place-items: center; min-width: 26px; height: 22px; margin-left: 10px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-surface-alt); color: var(--oaa-encre); font: 700 12px/1 var(--oaa-police); letter-spacing: 0; vertical-align: 1px; }
.compte:empty { display: none; }

/* ------------------------------------------------------------ Messages : un fond doux arrondi et un pictogramme, sans liseré */
.erreur, .message, .avertissement { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px 12px 14px; border: 1px solid transparent; border-radius: var(--oaa-rayon); font-size: 13px; line-height: 1.5; color: var(--oaa-encre); }
.message { margin-bottom: 22px; background: var(--oaa-info-doux); }
.erreur, .message.echec { background: var(--oaa-danger-doux); }
.erreur { margin: 16px 0 0; }
.avertissement { margin: 14px 0 0; background: var(--oaa-attention-doux); }
:is(.erreur, .message.echec, .avertissement)::before { content: ""; width: 18px; height: 18px; flex: none; margin-top: 1px; background: var(--oaa-danger); -webkit-mask: var(--oaa-ic-alerte) center / contain no-repeat; mask: var(--oaa-ic-alerte) center / contain no-repeat; }
.avertissement::before { background: var(--oaa-attention); }

/* ------------------------------------------------------------ Sélecteur d'apparence posé sur le fond (en-tête, connexion)
   Le rail en surface avec l'ombre douce, 40 px comme les boutons voisins ; le segment choisi en accent doux. */
:is(.entete, .connexion-entete) .oaa-theme-control { min-height: 40px; height: auto; padding: 4px; background: var(--oaa-surface-satin); box-shadow: var(--oaa-bouton-ombre); }
:is(.entete, .connexion-entete) .oaa-theme-control button { min-height: 32px; padding: 0 13px 0 11px; font-size: 13px; }
:is(.entete, .connexion-entete) .oaa-theme-control button:hover { background: var(--oaa-surface-alt); }
:is(.entete, .connexion-entete) .oaa-theme-control button[aria-pressed="true"] { background: var(--oaa-bouton-principal); color: var(--oaa-sur-bouton-principal); box-shadow: var(--oaa-bouton-ombre); }
:is(.entete, .connexion-entete) .oaa-theme-control button[aria-pressed="true"] svg { color: inherit; }
:is(.entete, .connexion-entete) .oaa-theme-control svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------ Connexion : carte nacrée ou graphite, symbole au-dessus du mot. */
.connexion { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 76px 24px 40px; }
.connexion-entete { position: absolute; top: 20px; right: 24px; }
.connexion-carte { width: 100%; max-width: 440px; padding: 36px 36px 30px; border: 1px solid var(--admin-bord-satin); border-radius: var(--rayon-carte); background: var(--oaa-surface-satin); box-shadow: var(--oaa-ombre); }
.connexion-marque { display: grid; justify-items: center; gap: 16px; margin-bottom: 26px; }
.connexion-symbole { --oaa-taille-symbole: 72px; }
:root[data-theme="dark"] .connexion-symbole { background-image: var(--oaa-symbole-cristal); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .connexion-symbole { background-image: var(--oaa-symbole-cristal); } }
.connexion-marque .oaa-mot { --oaa-hauteur-mot: 17px; }
.connexion-carte h1 { margin-bottom: 6px; text-align: center; }
.connexion-carte > p.secondaire { margin-bottom: 0; text-align: center; font-size: 13.5px; }
.connexion-carte form { margin-top: 24px; }
.connexion-carte form label { margin-top: 0; }
.connexion-note { margin: 22px 0 0; color: var(--oaa-discret); text-align: center; }
#integration-statut { margin-top: 4px; }
#integration-reconnecter { white-space: normal; }

/* ------------------------------------------------------------ Cadre : barre latérale posée sur l'ambiance (244 px).
   L'entrée choisie porte le même bouton lilas que les actions du panel. */
.application { display: flex; min-height: 100vh; }
.navigation {
  position: fixed; inset: 0 auto 0 0; z-index: 2; display: flex; flex-direction: column; width: var(--oaa-nav-admin);
  padding: 28px 18px 24px; border: 0; background: transparent; overflow: hidden auto;
}
.navigation > .marque { display: flex; align-items: center; height: 30px; padding: 0 9px; }
.navigation .oaa-logotype { --oaa-taille-symbole: 30px; --oaa-hauteur-mot: 15px; }
.navigation nav { display: grid; gap: 6px; margin-top: 34px; }
.navigation nav button {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px 0 14px; border: 1px solid transparent;
  border-radius: var(--oaa-rayon-pilule); background: transparent; color: var(--oaa-secondaire); font: 550 13.5px/1.2 var(--oaa-police); text-align: left; white-space: nowrap;
  transition: background-color var(--oaa-duree-rapide) ease, color var(--oaa-duree-rapide) ease, box-shadow var(--oaa-duree-rapide) ease;
}
.navigation nav .oaa-ic { --oaa-taille-ic: 20px; transition: color var(--oaa-duree-rapide) ease; }
.navigation nav button:hover { background: color-mix(in srgb, var(--oaa-surface) 60%, transparent); color: var(--oaa-encre); }
.navigation nav button[aria-current] { background: var(--oaa-bouton-principal); box-shadow: var(--oaa-bouton-ombre); color: var(--oaa-sur-bouton-principal); font-weight: 650; }
.navigation nav button[aria-current] .oaa-ic { color: inherit; }
.navigation nav .compte { --etat: var(--etat-decroche); margin-left: auto; background: var(--oaa-attention-doux); color: var(--etat); }
.navigation-bas { margin-top: auto; padding: 24px 14px 0; border: 0; color: var(--oaa-secondaire); font-size: 12px; line-height: 18px; }
.navigation-bas p { margin: 0 0 4px; }
.navigation-bas .navigation-prive { display: flex; align-items: center; gap: 8px; color: var(--oaa-encre); font-size: 13px; line-height: 20px; font-weight: 650; }
.navigation-bas p:not(.navigation-prive) { color: var(--oaa-secondaire); }
.navigation-bas button { height: 36px; margin: 8px 0 0 -14px; padding: 0 14px; font-size: 13px; }
.pastille { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--oaa-info); }
.contenu { width: calc(100% - var(--oaa-nav-admin)); max-width: 1720px; margin-left: var(--oaa-nav-admin); padding: 34px 40px 24px 24px; min-width: 0; }
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.entete .surtitre { margin: 0; }
.entete h1 { margin: 2px 0 0; white-space: nowrap; }
.actualisation { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.actualisation .petit { max-width: 150px; text-align: right; color: var(--oaa-secondaire); }
footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 32px; padding: 0 4px 4px; border: 0; color: var(--oaa-discret); font-size: 12px; }

/* ------------------------------------------------------------ Tuiles chiffrées (contrat § 8 : .tuile, une seule héros) */
.equipe-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.equipe-intro h2 { margin-bottom: 2px; font-size: 18px; line-height: 26px; }
.equipe-intro p { margin: 0; font-size: 14px; line-height: 20px; }
.equipe-intro > div:first-child > p:only-child { margin-bottom: 10px; }
.periode { width: 220px; flex: none; }
.periode label { margin: 0 0 6px 4px; }
.periode select { background-color: var(--oaa-surface); box-shadow: var(--oaa-ombre); font-weight: 550; }
.periode select:hover:not(:disabled):not(:focus) { background-color: var(--survol-surface); }
.statistiques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px; border: 1px solid var(--admin-bord-satin); border-radius: var(--rayon-tuile); background: var(--oaa-surface-satin); box-shadow: var(--oaa-ombre); }
.stat p { margin: 0; font: 650 11px/16px var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; color: var(--oaa-secondaire); }
.stat strong { display: block; margin-top: 8px; font: 650 29px/32px var(--oaa-police-titre); letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat small { display: block; margin-top: 4px; color: var(--oaa-secondaire); font-size: 12px; line-height: 17px; }
/* La tuile mise en avant garde le turquoise des conversations. */
.stat.heros { background: linear-gradient(145deg, color-mix(in srgb, var(--oaa-info) 12%, var(--oaa-surface)), var(--oaa-surface)); border-color: color-mix(in srgb, var(--oaa-info) 19%, transparent); }
.stat.heros strong { font-size: 40px; line-height: 40px; letter-spacing: -.025em; color: var(--oaa-info); }
.statistiques-exploitation .stat strong { white-space: normal; font-size: 26px; line-height: 30px; }
.statistiques-exploitation .stat:nth-child(2) strong { font-size: 22px; line-height: 30px; }

/* ------------------------------------------------------------ Blocs : cartes satinées, rayon 28, marges de 26,
   liseré discret et ombre douce. */
.bloc { margin-bottom: 22px; padding: 26px; border: 1px solid var(--admin-bord-satin); border-radius: var(--rayon-carte); background: var(--oaa-surface-satin); box-shadow: var(--oaa-ombre); }
.bloc-entete { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bloc-entete h2 { display: flex; align-items: center; margin: 0; }
.bloc-entete p { margin: 2px 0 0; color: var(--oaa-secondaire); font-size: 13px; line-height: 20px; }
.bloc-entete > .principal { flex: none; }
.note-bloc { margin: 22px 4px 0; padding: 0; border: 0; background: none; color: var(--oaa-discret); font-size: 12px; line-height: 1.6; }
/* Encart d'information : une surface arrondie, l'icône dans un rond accent doux. */
.information { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; padding: 22px 24px; border: 1px solid var(--admin-bord-satin); border-radius: var(--oaa-rayon-grand); background: var(--oaa-surface-satin); box-shadow: var(--oaa-ombre); color: var(--oaa-secondaire); }
.information-icone { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--oaa-accent-doux); color: var(--oaa-accent); }
.information-icone .oaa-ic { --oaa-taille-ic: 19px; }
.information h2 { margin: 0 0 4px; color: var(--oaa-encre); font-size: 15px; line-height: 22px; }
.information p { max-width: 900px; margin-bottom: 6px; font-size: 13px; }
.information p:last-child { margin-bottom: 0; }
.information .discret { height: 34px; margin: 6px 0 0 -12px; padding: 0 12px; color: var(--oaa-info); font-size: 13px; }
.protection { max-width: 950px; margin: 0 4px; line-height: 1.65; color: var(--oaa-discret); }

/* Comptes Onoff : import confidentiel, stock et affectations. */
.statistiques-onoff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.onoff-import { margin-top: 20px; }
.onoff-import textarea { width: 100%; min-height: 120px; font-family: ui-monospace, monospace; font-size: 13px; }
.onoff-import > p { margin: 10px 0 16px; max-width: 850px; }
.onoff-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.onoff-affectation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 14px; margin-top: 20px; }
.onoff-affectation > div { min-width: 0; }
#vue-onoff td p { margin: 4px 0 0; overflow-wrap: anywhere; }
#vue-onoff td button { white-space: nowrap; }
.onoff-numero { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.onoff-alertes { display: grid; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.onoff-alerte { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px; border-radius: var(--oaa-rayon); background: var(--oaa-surface-alt); }
.onoff-alerte > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
@media (max-width: 700px) {
  .onoff-affectation { grid-template-columns: minmax(0, 1fr); }
  .onoff-affectation > button { justify-self: start; }
  .statistiques.statistiques-onoff { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ Équipe : liste de licences
   Une licence par ligne. Les colonnes s'adaptent à la largeur du bloc, y compris dans l'extension intégrée. */
.equipe-bloc { container-type: inline-size; }
.equipe-filtres { display: flex; gap: 12px; margin-top: 20px; }
.equipe-filtres > div:first-child { flex: 1; min-width: 0; }
.equipe-filtres > div:last-child { width: 240px; flex: none; }
.employes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.employe-ligne {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 16px 24px;
  min-width: 0; padding: 16px; border: 1px solid var(--admin-bord-satin); border-radius: 20px;
  transition: background-color var(--oaa-duree-rapide) ease, border-color var(--oaa-duree-rapide) ease;
}
.employe-ligne:nth-child(odd) { background: var(--rangee-alternee); }
.employe-ligne:hover { background: var(--oaa-surface-alt); border-color: color-mix(in srgb, var(--oaa-accent) 20%, var(--oaa-bord)); }
.employe-entete, .employe-licence { min-width: 0; }
.employe-identite { display: flex; align-items: center; gap: 12px; min-width: 0; }
.employe-identite > div { min-width: 0; }
.employe-identite h3 { margin: 0; overflow-wrap: anywhere; }
.employe-identite p { margin: 0; color: var(--oaa-secondaire); font-size: 12px; line-height: 18px; }
.avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 16px; background: var(--oaa-accent-doux); color: var(--oaa-accent); box-shadow: inset 0 1px 0 var(--admin-reflet); font: 700 13px/1 var(--oaa-police); letter-spacing: .02em; }
.employe-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.employe-activite { position: relative; min-height: 18px; margin: 6px 0 0; color: var(--oaa-secondaire); font-size: 12px; line-height: 18px; }
.employe-activite.activite-recente { padding-left: 22px; color: var(--oaa-info); font-weight: 600; }
.employe-activite.activite-recente::before { content: ""; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--info-halo); }
.employe-activite.activite-recente::after { left: 4px; width: 8px; height: 8px; margin-top: -4px; }
.employe-stats { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; min-width: 0; }
.employe-stats strong { display: block; font: 600 18px/24px var(--oaa-police-titre); letter-spacing: -.02em; }
.employe-stats span { display: block; margin-top: 2px; color: var(--oaa-secondaire); font-size: 12px; line-height: 16px; }
.employe-expiration { margin: 6px 0 0; color: var(--oaa-secondaire); font-size: 12px; line-height: 18px; }
.employe-bas { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.employe-liens { display: flex; flex-wrap: wrap; gap: 4px; }
.employe-bas button { height: 34px; padding: 0 12px; font-size: 12.5px; font-weight: 600; }
.employe-bas .discret:hover:not(:disabled) { background: var(--oaa-surface); }
.employe-bas .secondaire-bouton { padding: 0 16px; }
.equipe-vide { grid-column: 1 / -1; padding: 36px 20px; border: 1px solid transparent; border-radius: 20px; background: var(--oaa-surface-alt); text-align: center; color: var(--oaa-secondaire); }
.equipe-vide strong { color: var(--oaa-encre); font: 600 16px var(--oaa-police-titre); }
.equipe-vide p { margin: 6px 0 0; font-size: 13px; }
@container (min-width: 860px) {
  .employe-ligne { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(264px, 1.15fr) auto; gap: 16px; }
  .employe-stats { grid-template-columns: minmax(72px, .8fr) minmax(68px, 1fr) minmax(100px, 1.3fr); }
}
@container (max-width: 559px) {
  .employe-ligne { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 12px; }
  .employe-identite { gap: 10px; }
  .employe-bas { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@container (max-width: 379px) {
  .employe-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
  .employe-stats strong { font-size: 16px; }
}

/* ------------------------------------------------------------ Filtres, tableaux et pagination (contrat § 8 : tableaux) */
/* Les champs d'abord, sur une rangée dès 1366 (6 champs : 196 + 3 × 165 + 2 × 122 + écarts = 995 px pour 1 004), en
   13 px ; les deux boutons ensemble sur la rangée suivante (le ::after force le retour à la ligne). 165 px : la plus
   longue valeur affichée d'une liste (« Tous les employés ») avec le chevron ; 196 px : le texte indicatif de la
   recherche après la loupe ; 122 px : une date et son calendrier. */
.filtres { display: flex; flex-wrap: wrap; align-items: end; gap: 0 12px; margin-top: 20px; }
.filtres > div { min-width: 165px; flex: 1 1 165px; margin-bottom: 12px; }
.filtres > div:has(> input[type="date"]) { min-width: 122px; flex: .6 1 122px; }
.filtres .filtre-recherche { min-width: 196px; flex: 1.6 1 196px; }
.filtres :is(input, select) { font-size: 13px; }
.filtres::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
.filtres > button { order: 2; flex: none; margin-top: 2px; }
.filtres > button + button { margin-left: -4px; }
.filtres label { margin: 0 0 6px 4px; }
/* 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. */
.table-conteneur { position: relative; min-width: 0; max-width: 100%; margin-top: 18px; padding-bottom: 4px; overflow: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--oaa-bord-fort) transparent; }
table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 13px; white-space: nowrap; }
th { padding: 0 14px 10px; white-space: normal; border: 0; background: transparent; color: var(--oaa-secondaire); font: 650 11px/1.3 var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; }
td { padding: 18px 14px; border: 0; background: transparent; vertical-align: middle; transition: background-color var(--oaa-duree-rapide) ease; }
/* Rangées d'une ligne : 56 px ; les tableaux d'appels et d'audio, à deux ou trois lignes par contact, restent plus serrés. */
:is(#appels, #audio-enregistrements) td { padding-block: 12px; }
:is(th, td):first-child { padding-left: 16px; }
:is(th, td):last-child { padding-right: 16px; }
tbody td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
tbody td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
tbody tr:nth-child(even) td { background: var(--rangee-alternee); }
tbody tr:hover:not(:has(> .vide)) td { background: var(--oaa-surface-alt); }
td strong { font-weight: 650; }
td small { display: block; margin-top: 3px; color: var(--oaa-discret); font-size: 12px; line-height: 1.45; }
td > div > small + small { margin-top: 1px; }
.numerique { text-align: right; font-variant-numeric: tabular-nums; }
.actions { display: flex; align-items: center; gap: 4px; }
.actions button { height: 32px; padding: 0 12px; font-size: 12.5px; }
.vide { padding: 40px 20px; border-radius: 16px; text-align: center; white-space: normal; color: var(--oaa-secondaire); }
.vide strong { display: block; margin-bottom: 4px; color: var(--oaa-encre); font: 600 15px var(--oaa-police-titre); }
/* Le résumé des appels : trois pilules en surface-alt, le chiffre devant son mot. */
.resume-appels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 0; border: 0; color: var(--oaa-secondaire); font-size: 13px; }
.resume-appels:empty { display: none; }
.resume-appels > span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-surface-alt); }
.resume-appels strong { margin-right: 6px; color: var(--oaa-encre); font: 650 15px/1 var(--oaa-police-titre); letter-spacing: -.01em; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 16px; padding: 0 4px 0 16px; border: 0; font-size: 12.5px; }
.pagination > div { display: flex; gap: 8px; }
.pagination button { height: 36px; padding: 0 16px; font-size: 13px; }
.audit-details { max-width: 420px; white-space: normal; color: var(--oaa-secondaire); }

/* ------------------------------------------------------------ Audio : réglages, écoute et états bien séparés */
.audio-reglages { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.audio-reglages > div { flex: 1 1 280px; }
.audio-reglages h2 { margin-bottom: 4px; }
.audio-reglages p { margin: 4px 0 0; }
.retention-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
#form-retention { flex: 1 1 430px; justify-content: flex-end; }
.retention-form label { margin-top: 0; }
.retention-valeur { display: flex; align-items: center; gap: 8px; color: var(--oaa-secondaire); font-size: 13px; }
.retention-valeur input { width: 80px; }
.case-audio { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--oaa-encre); font: 600 13.5px var(--oaa-police); cursor: pointer; }
.audio-activation { align-self: center; min-width: 200px; max-width: 270px; }
.audio-activation p { margin: 4px 0 0; font-size: 12px; }
#audio-reglages-message { flex-basis: 100%; max-width: 650px; margin: 0 0 0 auto; text-align: right; }
/* L'écoute en cours est vivante : un fond turquoise très doux, le surtitre turquoise (ni dégradé, ni lueur, ni contour). */
.audio-lecture { background: var(--info-teinte); }
.audio-lecture-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.audio-lecture-entete h2 { margin-bottom: 2px; font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -.02em; }
.audio-lecture-entete .surtitre { margin-bottom: 4px; color: var(--oaa-info); }
.audio-lecture-entete p { margin: 0; }
.audio-lecture .secondaire-bouton { background: var(--oaa-surface); }
.audio-lecture .secondaire-bouton:hover:not(:disabled) { background: var(--survol-surface); }
.audio-lecture audio { display: block; width: 100%; margin: 16px 0 12px; border-radius: var(--oaa-rayon-pilule); }
.audio-lecture-etat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.audio-lecture-etat p { flex: 1; min-width: 200px; margin: 4px 0; font-size: 13px; }
.audio-lecture-note { margin: 10px 0 0; color: var(--oaa-discret); }
.audio-erreur { color: var(--oaa-danger); }
.audio-actions { flex-wrap: wrap; max-width: 260px; }
.table-audio { min-width: 920px; white-space: normal; }
.filtres .filtre-tri-audio { min-width: 200px; flex: 1.1 1 200px; }
.table-audio .duree-appel { white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-audio td:first-child { width: 170px; }
.table-audio td:nth-child(2) { width: 150px; }
.table-audio td:nth-child(3) { min-width: 145px; }
.table-audio .audio-actions { min-width: 145px; max-width: 270px; }
.table-audio td:first-child span { white-space: nowrap; }
.table-audio td:nth-child(4) > div { display: flex; flex-direction: column; align-items: flex-start; }
/* Les parties enregistrées d'un appel (dialogue) : un bloc en surface-alt dans la carte du dialogue. */
.appel-audios { margin-top: 4px; padding: 14px 18px; border: 0; border-radius: var(--rayon-bloc); background: var(--oaa-surface-alt); }
.appel-audios h3 { margin: 0 0 8px; }
.appel-audios p { margin: 0; }
.appel-audio { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.appel-audio .secondaire-bouton { height: 34px; background: var(--oaa-surface); }

/* ------------------------------------------------------------ Ventes : agrégats privés, période et historiques */
.commercial-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.commercial-intro p { margin: 0 0 8px; }
.commercial-actions { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; flex: none; }
.commercial-actions .periode { min-width: 170px; }
.commercial-titre { margin: 0 4px 14px; font-size: 18px; }
.statistiques-commerciales .stat strong { font-size: clamp(23px, 2.1vw, 32px); line-height: 1.2; overflow-wrap: anywhere; }
.commercial-note { margin: 0 4px 22px; line-height: 1.65; }
.commercial-encaissements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 4px 0; }
.commercial-encaissements span { display: block; color: var(--oaa-secondaire); font-size: 13px; }
.commercial-encaissements strong { display: block; margin-top: 8px; font: 600 clamp(24px, 2.5vw, 34px)/1.2 var(--oaa-police-titre); letter-spacing: -.02em; overflow-wrap: anywhere; }
.commercial-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.commercial-grille > .bloc { min-width: 0; }
.commercial-details { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin: 22px 4px 0; font-size: 13px; }
.commercial-details dt { color: var(--oaa-secondaire); overflow-wrap: anywhere; }
.commercial-details dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.commercial-details-larges { max-width: 620px; }
.commercial-table { width: 100%; min-width: 560px; }
.commercial-table td:first-child { overflow-wrap: anywhere; max-width: 360px; }
.commercial-historique { min-width: 750px; }
.depots-filtre { flex: none; min-width: 200px; }
.depots-table { min-width: 1050px; }
.depots-table td { padding-block: 14px; }
.depots-table td:first-child { min-width: 150px; max-width: 230px; white-space: normal; }
.depots-table .depot-crypto { font-variant-numeric: tabular-nums; }
.depot-transaction { display: flex; align-items: center; gap: 8px; }
.depot-transaction code { font-size: 12px; }
.depot-transaction button { height: 30px; padding: 0 10px; font-size: 12px; }
#depots-copie:empty { display: none; }
#depots-copie { overflow-wrap: anywhere; }
#depots-erreur { margin-top: 18px; }
.commercial-graphe-conteneur { margin: 16px 0; overflow-x: auto; }
.commercial-graphe { display: block; width: 100%; min-width: 460px; max-height: 240px; }
.commercial-graphe-grille { stroke: var(--oaa-bord); stroke-width: 1; }
.commercial-graphe-texte { fill: var(--oaa-secondaire); font: 12px var(--oaa-police); }
.commercial-graphe-barre { fill: var(--oaa-info); }
.commercial-graphe-barre.en-cours { fill: var(--oaa-encre); }
#commercial-erreur { margin-bottom: 18px; }
#commercial-autres-devises { margin-top: 18px; margin-bottom: 0; }
@media (max-width: 1150px) {
  .commercial-intro { flex-wrap: wrap; }
  .commercial-grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 760px) {
  .commercial-actions { width: 100%; align-items: flex-end; }
  .commercial-actions .periode { flex: 1; max-width: none; }
  .commercial-actions > button { height: auto; min-height: 40px; white-space: normal; padding-block: 10px; }
  .commercial-encaissements { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .commercial-encaissements strong { margin-top: 4px; font-size: 28px; }
  .commercial-details { gap: 10px 12px; }
  .commercial-note { font-size: 12.5px; }
}

/* ------------------------------------------------------------ Exploitation : chaque alerte dans son bloc arrondi */
.liste-alertes { display: grid; gap: 10px; margin-top: 18px; }
.exploitation-vide { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--rayon-bloc); background: var(--oaa-surface-alt); color: var(--oaa-secondaire); font-size: 13px; }
.exploitation-vide .information-icone { width: 26px; height: 26px; background: var(--oaa-info-doux); }
.exploitation-vide .information-icone::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--oaa-info); }
.alerte-exploitation { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 0; border-radius: var(--rayon-bloc); background: var(--oaa-surface-alt); }
.alerte-exploitation > div { flex: 1; min-width: 0; }
.alerte-titre { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.alerte-exploitation strong { font-size: 14px; font-weight: 650; }
.alerte-exploitation p { margin: 3px 0; color: var(--oaa-secondaire); font-size: 13px; }
.alerte-exploitation small { color: var(--oaa-secondaire); font-size: 12px; }
.alerte-exploitation > button { height: 34px; }
.alerte-icone { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--oaa-attention-doux); color: var(--oaa-attention); }
.alerte-icone::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--oaa-ic-alerte) center / contain no-repeat; mask: var(--oaa-ic-alerte) center / contain no-repeat; }
.critique .alerte-icone { background: var(--oaa-danger-doux); color: var(--oaa-danger); }

/* Pages de détail : même contenu, même navigation, sans fenêtre superposée. */
.page-admin { width: 100%; min-height: min(680px, 75vh); padding: 26px; border: 1px solid var(--admin-bord-satin); border-radius: var(--rayon-carte); background: var(--oaa-surface-satin); box-shadow: var(--oaa-ombre); color: var(--oaa-encre); }
.page-admin > form, .page-admin > p, .page-admin > label, .page-admin > textarea, .page-admin > .details, .page-admin > .page-actions { max-width: 900px; }
.page-admin p { font-size: 14px; line-height: 1.65; }
.page-retour { margin-bottom: 28px; }
.page-entete { margin: 0 0 24px; }
.page-entete h1 { margin: 0; font: 600 clamp(26px, 3vw, 38px)/1.18 var(--oaa-police-titre); letter-spacing: -.035em; }
.page-entete h1:focus, #titre-vue:focus { outline: none; }
.page-entete .surtitre { margin-bottom: 8px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--oaa-bord); }
.page-admin[aria-busy="true"] { cursor: progress; }
.details { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; margin: 16px 4px 18px; font-size: 13px; }
.details dt { color: var(--oaa-secondaire); }
.details dd { margin: 0; overflow-wrap: anywhere; }
#cle-licence { margin-top: 2px; font: 500 13px/1.55 var(--oaa-police-mono); letter-spacing: .02em; }
#dialog-employe .details { grid-template-columns: 170px minmax(0, 1fr); }
#statut-employe { display: flex; gap: 6px; flex-wrap: wrap; }
.stats-employe { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 12px; margin-top: 16px; padding: 14px 18px; border: 0; border-radius: var(--rayon-bloc); background: var(--oaa-surface-alt); box-shadow: none; }
.stats-employe > p { grid-column: 1 / -1; margin: 0; font: 650 11px/16px var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; color: var(--oaa-secondaire); }
.stats-employe strong { display: block; font: 600 23px/26px var(--oaa-police-titre); letter-spacing: -.02em; }
.stats-employe span { color: var(--oaa-secondaire); font-size: 12px; }
.navigation-employe { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.navigation-employe button { height: 36px; padding: 0 16px; font-size: 13px; }
.gestion-employe { margin-top: 4px; padding-top: 0; border: 0; }
.gestion-employe h3 { margin: 0 0 4px 4px; }
.gestion-employe > p { margin: 0 4px 12px; }
.actions-employe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.actions-employe button { white-space: normal; height: auto; min-height: 40px; padding-block: 9px; line-height: 1.25; }

/* ------------------------------------------------------------ Dans l'extension : fond opaque, marges de la coque
   (4 px contre la navigation de l'extension, 16 px à droite). Le logotype reste dans la navigation de l'extension.
   Les vues sont dans une piste satinée et l'entrée choisie reprend le lilas du panel. */
body[data-integration="extension"] { background-color: var(--oaa-fond); }
body[data-integration="extension"] .application { display: block; min-height: 100vh; }
body[data-integration="extension"] .navigation { position: static; flex-direction: row; width: auto; padding: 8px 16px 0 4px; overflow: visible; border: 0; background: transparent; box-shadow: none; }
body[data-integration="extension"] .navigation > .marque,
body[data-integration="extension"] .navigation-bas,
body[data-integration="extension"] [data-theme-control] { display: none; }
body[data-integration="extension"] .navigation nav { display: flex; gap: 4px; min-width: 0; max-width: 100%; margin: 0; padding: 5px; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-surface-satin); box-shadow: var(--oaa-ombre); overflow-x: auto; scrollbar-width: none; }
body[data-integration="extension"] .navigation nav button { flex-shrink: 0; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; font-size: 13px; font-weight: 600; }
body[data-integration="extension"] .navigation nav button:hover { background: var(--oaa-surface-alt); color: var(--oaa-encre); }
body[data-integration="extension"] .navigation nav .oaa-ic { --oaa-taille-ic: 17px; }
body[data-integration="extension"] .navigation nav button[aria-current] { background: var(--oaa-bouton-principal); color: var(--oaa-sur-bouton-principal); box-shadow: var(--oaa-bouton-ombre); }
body[data-integration="extension"] .navigation nav .compte { min-width: 22px; height: 20px; margin-left: 2px; padding: 0 7px; font-size: 11px; }
body[data-integration="extension"] .contenu { width: 100%; max-width: none; margin: 0; padding: 22px 16px 40px 4px; }
body[data-integration="extension"] .entete { margin-bottom: 20px; }
body[data-integration="extension"] .entete .surtitre { display: none; }
body[data-integration="extension"] .entete h1 { font-size: 24px; line-height: 30px; }
body[data-integration="extension"] footer { margin-top: 24px; }
body[data-integration="extension"] .connexion { padding-top: 40px; }

/* ------------------------------------------------------------ Largeurs */
@media (min-width: 1550px) {
  .contenu { padding-right: 48px; padding-left: 32px; }
}
@media (max-width: 1150px) {
  :root { --oaa-nav-admin: 220px; }
  .navigation { padding-right: 12px; padding-left: 12px; }
  .navigation .oaa-logotype { --oaa-taille-symbole: 26px; --oaa-hauteur-mot: 13px; }
  .contenu { padding: 28px 24px 20px 20px; }
  .statistiques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actualisation { gap: 8px; flex-wrap: wrap; }
  .actualisation .petit { display: none; }
}
@media (max-width: 760px) {
  .application { display: block; }
  .navigation { position: relative; width: 100%; padding: 16px 16px 0; overflow: visible; }
  .navigation > .marque { height: 28px; padding: 0 4px; }
  .navigation nav { display: flex; gap: 4px; margin-top: 12px; padding: 5px; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-surface-satin); box-shadow: var(--oaa-ombre); overflow-x: auto; scrollbar-width: none; }
  .navigation nav button { flex: none; min-height: 36px; padding: 0 12px; font-size: 13px; }
  .navigation nav button[aria-current] { background: var(--oaa-bouton-principal); color: var(--oaa-sur-bouton-principal); box-shadow: var(--oaa-bouton-ombre); }
  .navigation nav .oaa-ic { display: none; }
  .navigation nav .compte { margin-left: 6px; }
  .navigation-bas { position: absolute; right: 16px; top: 12px; margin: 0; padding: 0; font-size: 0; }
  .navigation-bas > p, .navigation-bas .navigation-prive { display: none; }
  .navigation-bas button { margin: 0; font-size: 12.5px; }
  .contenu { width: 100%; margin: 0; padding: 22px 16px; }
  .entete { flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; }
  .entete h1 { font-size: 24px; line-height: 30px; white-space: normal; }
  .actualisation { justify-content: flex-start; }
  .equipe-intro { gap: 16px; align-items: flex-start; }
  .equipe-intro p { font-size: 13px; }
  .equipe-intro > div:first-child > p:only-child { margin-bottom: 0; }
  .periode { width: auto; min-width: 145px; max-width: 170px; }
  .statistiques { gap: 12px; margin-bottom: 18px; }
  .stat { padding: 16px; border-radius: 20px; }
  .stat strong { font-size: 26px; line-height: 30px; }
  .stat.heros strong { font-size: 32px; line-height: 34px; }
  .stat small { font-size: 11.5px; }
  .bloc { padding: 18px; border-radius: var(--oaa-rayon-grand); }
  .bloc-entete { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .bloc-entete p { font-size: 12.5px; }
  .equipe-filtres { flex-wrap: wrap; gap: 10px; }
  .equipe-filtres > div:last-child { width: 100%; }
  .employes { margin-top: 16px; }
  .employe-identite h3 { font-size: 14.5px; }
  .note-bloc { margin-top: 16px; }
  .information { padding: 16px; }
  .information p { font-size: 12.5px; }
  .filtres { column-gap: 10px; }
  .filtres > div { margin-bottom: 10px; }
  .filtres .filtre-recherche { flex-basis: 100%; }
  .filtres > button { flex: 1; }
  .filtres > button + button { margin-left: 0; }
  .resume-appels { font-size: 12.5px; }
  .pagination { padding: 0 4px; align-items: flex-start; flex-direction: column; }
  :is(th, td):first-child { padding-left: 12px; }
  :is(th, td):last-child { padding-right: 12px; }
  .audio-reglages { gap: 18px; }
  #form-retention { justify-content: flex-start; }
  .audio-activation { min-width: 100%; max-width: none; }
  #audio-reglages-message { margin: 0; text-align: left; }
  .audio-lecture-entete { flex-wrap: wrap; gap: 8px; }
  .audio-lecture-etat p { flex-basis: 100%; }
  .statistiques-exploitation .stat strong { font-size: 23px; }
  .statistiques-exploitation .stat:nth-child(2) strong { font-size: 18px; }
  .alerte-exploitation { flex-wrap: wrap; padding: 14px; }
  .alerte-exploitation > button { margin-left: 52px; }
  footer { display: block; margin-top: 22px; font-size: 11.5px; }
  footer > span { display: block; margin-top: 4px; }
  .connexion { padding: 64px 16px 24px; }
  .connexion-carte { padding: 28px 22px 22px; border-radius: var(--oaa-rayon-grand); }
  .page-admin { padding: 18px; border-radius: var(--oaa-rayon-grand); }
  .page-retour { margin-bottom: 20px; }
  .details, #dialog-employe .details { grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; font-size: 12.5px; }
  .stats-employe { padding: 12px 14px; }
  .stats-employe strong { font-size: 21px; line-height: 24px; }
  .actions-employe button { font-size: 12.5px; }
  body[data-integration="extension"] .navigation { padding: 8px 12px 0; }
  body[data-integration="extension"] .entete { align-items: center; flex-wrap: nowrap; gap: 12px; }
  body[data-integration="extension"] .entete h1 { font-size: 22px; }
  body[data-integration="extension"] .contenu { padding: 18px 12px 32px; }
}
@media (max-width: 400px) {
  .equipe-intro { flex-wrap: wrap; }
  .periode { max-width: none; width: 100%; }
}

/* ------------------------------------------------------------ Mouvement
   120 ms ce qu'on touche, 320 ms une vue qui s'installe, une cascade pour les tuiles (.cascade de theme.css). Les listes
   rechargées toutes les 30 s ne rejouent rien : rien ne clignote au rafraîchissement. Seuls transform et opacity s'animent. */
.contenu > section[id^="vue-"]:not([hidden]) { animation: oaa-apparition var(--oaa-duree-lente) var(--oaa-courbe); }
#audio-lecture:not([hidden]) { animation: oaa-apparition var(--oaa-duree-lente) var(--oaa-courbe); }
.message:not([hidden]), .erreur:not([hidden]), .avertissement:not([hidden]) { animation: oaa-apparition var(--oaa-duree) var(--oaa-courbe); }
.connexion-carte { animation: oaa-apparition var(--oaa-duree-lente) var(--oaa-courbe); }
.page-admin:not([hidden]) { animation: oaa-apparition var(--oaa-duree-lente) var(--oaa-courbe); }
/* Mouvement réduit : theme.css coupe les animations ; les témoins maison disparaissent au lieu de rester figés. */
@media (prefers-reduced-motion: reduce) {
  .badge.en-direct::after, .employe-activite.activite-recente::after { display: none; }
}
/* Couleurs forcées (contraste élevé de Windows) : les bordures transparentes redeviennent des contours ; les ronds
   (avatars, icônes, pastilles) prennent un contour qui suit leur arrondi ; la vue choisie prend la couleur de sélection. */
@media (forced-colors: active) {
  .badge, .compte, .stat, .bloc, .employe-ligne, .employe-stats, .stats-employe, .information, .alerte-exploitation, .exploitation-vide, .appel-audios, .equipe-vide, .resume-appels > span { border: 1px solid CanvasText; }
  .avatar, .information-icone, .alerte-icone { outline: 1px solid CanvasText; }
  .badge::before, .pastille, .employe-activite.activite-recente::before, :is(.equipe-filtres > div:first-child, .filtre-recherche)::after { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  /* Les dégradés du chevron s'effacent : la flèche native revient. */
  select { -webkit-appearance: auto; appearance: auto; background-image: none; }
  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; }
  .navigation nav button[aria-current] { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
  .navigation nav button[aria-current] .oaa-ic { background: HighlightText; }
  tbody tr:hover:not(:has(> .vide)) td { outline: 1px solid CanvasText; outline-offset: -1px; }
}

/* Notifications Telegram : composer, confirmer, puis suivre les envois. */
.telegram-admin-bloc { padding:24px; margin-bottom:20px; }
#telegram-admin-form { display:grid; gap:10px; max-width:760px; margin-top:24px; }
#telegram-admin-texte { width:100%; min-height:160px; resize:vertical; line-height:1.6; }
#telegram-admin-form .principal { justify-self:start; }
.telegram-admin-confirmation { margin-top:24px; padding:20px; border:1px solid var(--admin-bord-satin); border-radius:var(--rayon-bloc); background:var(--oaa-surface-alt); }
#telegram-admin-apercu { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.7; }
#telegram-admin-historique > article { padding:18px 0; border-top:1px solid var(--oaa-bord); }
#telegram-admin-historique .telegram-texte { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; }

/* Notifications internes : composition et aperçu restent visibles avant l’envoi. */
.oaa-ic--notifications { --oaa-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4'/%3E%3C/svg%3E"); }
.notifications-admin-bloc { padding: 24px; margin-bottom: 20px; }
.notifications-admin-portee { max-width: 760px; margin: 12px 0 0; }
.notifications-admin-composition { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 32px; margin-top: 12px; }
#notifications-admin-form, .notifications-admin-apercu { min-width: 0; }
.notifications-admin-compteur { margin: 5px 0 0; text-align: right; }
#notifications-admin-envoyer { margin-top: 20px; max-width: 100%; white-space: normal; }
#notifications-admin-texte { min-height: 160px; }
.notifications-admin-apercu { margin-top: 16px; padding: 22px; border-radius: var(--rayon-bloc); background: var(--oaa-surface-alt); overflow-wrap: anywhere; }
.notifications-admin-apercu .surtitre { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.notifications-admin-apercu h3 { margin-bottom: 8px; }
#notifications-admin-apercu-texte, .notifications-admin-corps { white-space: pre-wrap; overflow-wrap: anywhere; }
#notifications-admin-message { margin: 20px 0 0; }
.notifications-admin-annonce { padding: 20px 0; border-top: 1px solid var(--oaa-bord); overflow-wrap: anywhere; }
.notifications-admin-annonce:first-child { border-top: 0; padding-top: 16px; }
.notifications-admin-annonce:last-child { padding-bottom: 0; }
.notifications-admin-annonce > :last-child { margin-bottom: 0; }
@media (max-width: 1050px) { .notifications-admin-composition { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
@media (max-width: 560px) { .notifications-admin-bloc { padding: 18px; } .notifications-admin-apercu { padding: 18px; } }

/* Capacité d’appels : occupation réservée, groupes et historique agrégé. */
.capacite { overflow: hidden; }
.capacite-entete { align-items: flex-start; }
.capacite .capacite-surtitre { margin: 0 0 7px; color: var(--oaa-info); font: 650 10px/1.4 var(--oaa-police); letter-spacing: .12em; text-transform: uppercase; }
.capacite-entete h2 { font-size: 23px; letter-spacing: -.025em; }
.capacite #capacite-admin-erreur { margin: 18px 0 0; }
.capacite-direct { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; margin: 26px 0 20px; }
.capacite-principale { padding: 23px 25px 17px; border-radius: var(--rayon-tuile); background: var(--info-teinte); min-width: 0; }
.capacite-libelle { margin: 0; color: var(--oaa-secondaire); font-size: 11px; font-weight: 650; letter-spacing: .025em; }
.capacite-chiffre { display: flex; align-items: baseline; gap: 12px; margin: 12px 0 15px; }
.capacite-chiffre strong { color: var(--oaa-info); font: 600 clamp(42px, 5vw, 64px)/1 var(--oaa-police-titre); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.capacite-chiffre > span { color: var(--oaa-secondaire); font: 550 25px/1.2 var(--oaa-police-titre); }
.capacite-jauge-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; font-size: 12px; }
.capacite-jauge-ligne > :first-child { font-weight: 700; }
.capacite progress { display: block; appearance: none; width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 20px; background: color-mix(in srgb, var(--oaa-info) 14%, transparent); color: var(--oaa-info); }
.capacite progress::-webkit-progress-bar { border-radius: 20px; background: color-mix(in srgb, var(--oaa-info) 14%, transparent); }
.capacite progress::-webkit-progress-value { border-radius: 20px; background: var(--oaa-info); }
.capacite progress::-moz-progress-bar { border-radius: 20px; background: var(--oaa-info); }
.capacite[data-niveau="tendu"] #capacite-admin-jauge::-webkit-progress-value, .capacite-groupe[data-niveau="tendu"] progress::-webkit-progress-value { background: var(--oaa-attention); }
.capacite[data-niveau="sature"] #capacite-admin-jauge::-webkit-progress-value, .capacite-groupe[data-niveau="sature"] progress::-webkit-progress-value { background: var(--oaa-danger); }
.capacite[data-niveau="tendu"] #capacite-admin-jauge::-moz-progress-bar, .capacite-groupe[data-niveau="tendu"] progress::-moz-progress-bar { background: var(--oaa-attention); }
.capacite[data-niveau="sature"] #capacite-admin-jauge::-moz-progress-bar, .capacite-groupe[data-niveau="sature"] progress::-moz-progress-bar { background: var(--oaa-danger); }
.capacite-note { margin: 12px 0 0; color: var(--oaa-secondaire); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.capacite-repartition { padding: 6px 0; min-width: 0; }
.capacite-repartition dl { display: grid; gap: 14px; margin: 18px 0; }
.capacite-repartition dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.capacite-repartition dt { color: var(--oaa-secondaire); font-size: 13px; }
.capacite-repartition dd { margin: 0; font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; }
.capacite-groupes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.capacite-groupe { padding: 17px 18px; border-radius: 15px; background: var(--oaa-surface-alt); min-width: 0; }
.capacite-groupe > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 10px; }
.capacite-groupe > div > span { overflow-wrap: anywhere; }
.capacite-groupe strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.capacite-groupe p { margin: 8px 0 0; color: var(--oaa-secondaire); font-size: 11px; line-height: 1.5; }
.capacite-conseil { margin: 14px 0 0; padding: 12px 15px; border-radius: 12px; color: var(--oaa-encre); background: var(--oaa-surface-alt); font-size: 12px; line-height: 1.6; }
.capacite-historique-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 32px 0 20px; }
.capacite-historique-entete h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.capacite-historique-entete p { margin: 0; color: var(--oaa-secondaire); font-size: 12px; }
.capacite-periode { flex: none; width: 190px; margin: 0; font-size: 11px; }
.capacite-periode select { margin-top: 6px; font-size: 12px; }
.capacite-mesures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.capacite-mesures article { min-width: 0; }
.capacite-mesures p { margin: 0; color: var(--oaa-secondaire); font-size: 11px; font-weight: 550; }
.capacite-mesures strong { display: block; margin: 8px 0 6px; font: 600 27px/1.25 var(--oaa-police-titre); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.capacite-mesures small { display: block; color: var(--oaa-secondaire); font-size: 10px; line-height: 1.5; }
#capacite-admin-couverture { margin-top: 20px; }
.capacite-graphe-conteneur { margin: 14px -4px 0; }
.capacite-graphe { display: block; width: 100%; height: auto; }
.capacite-graphe-grille { stroke: var(--oaa-bord); stroke-width: 1; }
.capacite-graphe-texte { fill: var(--oaa-secondaire); font: 11px var(--oaa-police); }
.capacite-graphe-pic { fill: color-mix(in srgb, var(--oaa-info) 25%, var(--oaa-surface)); }
.capacite-graphe-moyenne { stroke: var(--oaa-info); stroke-width: 2.4; }
.capacite-graphe-seuil { stroke: var(--oaa-attention); stroke-width: 1.3; stroke-dasharray: 5 5; }
.capacite-zone-inconnue { fill: var(--oaa-surface-alt); }
.capacite-legende { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; color: var(--oaa-secondaire); font-size: 10px; }
.capacite-legende span { display: inline-flex; align-items: center; gap: 6px; }
.capacite-legende span::before { content: ''; width: 14px; height: 3px; background: var(--oaa-info); }
.capacite-legende .capacite-legende-pic::before { height: 7px; background: color-mix(in srgb, var(--oaa-info) 35%, var(--oaa-surface)); }
.capacite-legende .capacite-legende-seuil::before { background: var(--oaa-attention); }
.capacite-historique-groupes { margin-top: 18px; }
.capacite-historique-groupes p { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 6px 0; color: var(--oaa-secondaire); font-size: 11px; line-height: 1.6; }
.capacite-historique-groupes strong { color: var(--oaa-encre); font-weight: 600; }
.capacite-table-details { margin-top: 14px; font-size: 12px; }
.capacite-table-details summary { display: inline list-item; padding: 8px 0; cursor: pointer; color: var(--oaa-secondaire); }
.capacite-table-details summary:focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 3px; }
.capacite-table-details .table-conteneur { max-height: 300px; margin-top: 8px; overflow: auto; }
.capacite-table { width: 100%; min-width: 0; table-layout: fixed; }
.capacite-table :is(th,td) { white-space: normal; overflow-wrap: anywhere; font-size: 11px; }
.capacite-table :is(th,td):first-child { width: 64%; }
.capacite-licences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding-top: 22px; margin-top: 20px; border-top: 1px solid var(--oaa-bord); }
.capacite-licences > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.capacite-licences strong { font: 600 25px/1.25 var(--oaa-police-titre); font-variant-numeric: tabular-nums; }
.capacite-licences span { color: var(--oaa-secondaire); font-size: 12px; }
.capacite-licences > p { grid-column: 1 / -1; margin: 0; color: var(--oaa-secondaire); font-size: 11px; line-height: 1.6; }
.capacite-vide { margin: 24px 0; padding: 22px; border-radius: 14px; background: var(--oaa-surface-alt); color: var(--oaa-secondaire); font-size: 12px; text-align: center; line-height: 1.6; }
@media (max-width: 1100px) {
  .capacite-direct { gap: 22px; }
  .capacite-principale { padding: 22px 20px 17px; }
}
@media (max-width: 620px) {
  .capacite-entete h2 { font-size: 21px; }
  .capacite-direct { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 20px; }
  .capacite-repartition { padding: 0 2px; }
  .capacite-repartition dl { gap: 10px; margin: 13px 0; }
  .capacite-groupes { gap: 10px; }
  .capacite-groupe { padding: 13px 12px; }
  .capacite-groupe > div { flex-direction: column; gap: 4px; }
  .capacite-historique-entete { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 26px; }
  .capacite-periode { width: 100%; }
  .capacite-mesures { gap: 12px; }
  .capacite-mesures strong { font-size: 23px; }
  .capacite-mesures p { min-height: 32px; line-height: 16px; font-size: 10px; }
  .capacite-mesures small { font-size: 9px; }
  .capacite-graphe-conteneur { overflow-x: auto; }
  .capacite-graphe { min-width: 0; }
  .capacite-licences { gap: 14px; }
  .capacite-licences > div { gap: 5px; flex-direction: column; }
}
@media (forced-colors: active) {
  .capacite-principale, .capacite-groupe, .capacite-conseil { border: 1px solid CanvasText; }
  .capacite-graphe-pic { fill: GrayText; }
  .capacite-graphe-moyenne, .capacite-graphe-seuil { stroke: CanvasText; }
}

/* Présence, directs et crédit du profil. */
.equipe-filtres-presence { flex-wrap: wrap; }
.equipe-filtres-presence > div { min-width: 190px; }
.equipe-filtres-presence > div:first-child { flex: 2 1 250px; }
.equipe-filtres-presence > div:not(:first-child) { width: auto; flex: 1 1 190px; }
.equipe-temps { margin: 16px 4px 0; }
.nom-profil { border: 0; padding: 0; height: auto; background: transparent; color: inherit; text-align: left; font: inherit; min-height: 28px; overflow-wrap: anywhere; }
.nom-profil:hover { text-decoration: underline; }
.presence-badge { margin-top: 3px; gap: 6px; font-size: 11px; }
.presence-icone { font-size: 12px; line-height: 1; }
#statut-employe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.direct-bloc { margin-bottom: 24px; }
.direct-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 20px; }
.direct-carte { min-width: 0; padding: 20px; border: 1px solid var(--oaa-bordure, #d9deea); border-radius: 18px; background: var(--oaa-surface-alt); }
.direct-identite { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.direct-identite strong { overflow-wrap: anywhere; }
.direct-contact { margin: 18px 0 4px; font: 600 19px/1.4 var(--oaa-police-titre); overflow-wrap: anywhere; }
.direct-carte > button { margin-top: 12px; }
.direct-vide { grid-column: 1 / -1; padding: 24px; text-align: center; border-radius: 18px; background: var(--oaa-surface-alt); }
.direct-vide p { margin-bottom: 0; color: var(--oaa-secondaire); }
.profil-direct { margin: 26px 0; }
.credit-employe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding: 24px; margin: 24px 0; border-radius: 22px; background: var(--oaa-surface-alt); }
.credit-montant { display: block; margin: 4px 0; font: 600 clamp(28px, 4vw, 40px)/1.2 var(--oaa-police-titre); letter-spacing: -.03em; }
.credit-resume p { margin: 8px 0 0; }
.credit-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#form-credit { max-width: 560px; }
.credit-disponible { padding: 16px; background: var(--oaa-surface-alt); border-radius: 14px; font-weight: 600; }
.credit-champ { display: flex; align-items: center; gap: 12px; }
.credit-champ input { min-width: 0; font-size: 24px; }
.credit-champ span { font-size: 22px; color: var(--oaa-secondaire); }
#form-credit input[readonly] { background: var(--oaa-surface-alt); }
.audio-options { margin-top: 24px; }
.audio-options > summary { cursor: pointer; font-weight: 600; }
.audio-options .audio-reglages { margin: 20px 0 0; padding: 0; border: 0; }
@media (max-width: 600px) { .credit-employe { padding: 18px; } .credit-actions { width: 100%; } .credit-actions button { flex: 1 1 auto; } .direct-carte { padding: 16px; } }

.presence-badge::before { display: none; }
.commercial-detail-serie summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
@container (min-width: 860px) { .employe-stats { grid-template-columns: minmax(48px, .7fr) minmax(86px, 1fr) minmax(104px, 1.3fr); } }
/* Garde les champs lisibles sans zoom automatique et les petites actions accessibles au toucher. */
@media (pointer: coarse) {
  input:not([type="checkbox"]), select, textarea, .champ, .filtres :is(input, select), #cle-licence, .onoff-import textarea, .capacite-periode select { font-size: 16px; }
  .navigation nav button, .actions button, .employe-bas button, .pagination button, .navigation-employe button { min-height: 44px; }
}

.maintenance-admin .maintenance-admin-champs { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); align-items: start; gap: 20px; padding: 0 24px; }
.maintenance-admin label { display: grid; gap: 8px; font-size: 14px; }
.maintenance-admin input, .maintenance-admin textarea { box-sizing: border-box; width: 100%; min-width: 0; font: inherit; }
.maintenance-admin textarea { min-height: 90px; resize: vertical; }
.maintenance-admin .maintenance-admin-commandes { display: flex; flex-wrap: wrap; gap: 12px; padding: 20px 24px; }
.maintenance-admin .maintenance-admin-commandes button { min-height: 44px; max-width: 100%; white-space: normal; text-align: center; }
.maintenance-admin .maintenance-admin-temps { margin: 0; padding: 0 24px 20px; font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.maintenance-admin .maintenance-admin-resultat, .maintenance-admin > .erreur { margin: 0 24px 20px; }
.maintenance-admin .maintenance-admin-avertissement { margin: 0; padding: 0 24px 20px; color: var(--secondaire, #6d6577); font-size: 13px; }
@media (max-width: 600px) { .maintenance-admin .maintenance-admin-champs { grid-template-columns: minmax(0, 1fr); padding: 0 16px; gap: 16px; } .maintenance-admin .maintenance-admin-commandes { padding: 20px 16px; } .maintenance-admin .maintenance-admin-commandes button { width: 100%; } .maintenance-admin .maintenance-admin-temps, .maintenance-admin .maintenance-admin-avertissement { padding-inline: 16px; } }

/* Vue Stats : trois périodes comparables, avec mesures lisibles sur mobile. */
.stats-appels-intro { margin-bottom: 24px; }
.stats-appels-intro > p:last-child { color: var(--oaa-secondaire); max-width: 66ch; }
.stats-appels-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stats-appels-carte { min-width: 0; padding: 26px; border-radius: 28px; background: var(--oaa-surface); box-shadow: var(--oaa-ombre-carte, 0 8px 24px #00000005); }
.stats-appels-carte h2 { margin: 0; font: 600 20px/1.3 var(--oaa-police-titre); }
.stats-appels-periode { margin: 8px 0 24px; color: var(--oaa-secondaire); font-size: 12px; }
.stats-appels-total { display: grid; gap: 4px; margin: 0 0 28px; }
.stats-appels-total strong { font: 650 clamp(32px, 4vw, 48px)/1.1 var(--oaa-police-titre); letter-spacing: -.04em; overflow-wrap: anywhere; }
.stats-appels-total span { color: var(--oaa-secondaire); }
.stats-appels-mesures { margin: 0; display: grid; gap: 18px; }
.stats-appels-mesures > div { display: grid; gap: 4px; }
.stats-appels-mesures dt { color: var(--oaa-secondaire); font-size: 13px; }
.stats-appels-mesures dd { margin: 0; font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.stats-appels-note { margin-top: 28px; padding: 22px 26px; border-radius: 22px; background: var(--oaa-surface-alt); }
.stats-appels-note p { max-width: 85ch; color: var(--oaa-secondaire); margin-bottom: 0; }
#stats-appels-date { margin-top: 18px; }
#stats-appels-reessayer { margin-bottom: 20px; min-height: 44px; }
@media (max-width: 1100px) { .stats-appels-grille { gap: 12px; } .stats-appels-carte { padding: 20px; } }
@media (max-width: 760px) { .stats-appels-grille { grid-template-columns: minmax(0, 1fr); } .stats-appels-carte { padding: 24px; } .stats-appels-total { margin-bottom: 22px; } .stats-appels-mesures > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: baseline; } .stats-appels-mesures dd { text-align: right; } .stats-appels-note { padding: 20px; } }

/* Téléphone : adaptation ciblée, sans changement du poste ordinateur. */
@media (max-width: 720px) {
  body[data-integration="extension"] .entete { flex-wrap: wrap; align-items: flex-start; }
  [data-theme-control] .oaa-theme-control button { flex: 0 0 auto; width: auto; height: 44px; min-width: 64px; min-height: 44px; }
  #nouvelle-licence, button.principal, .secondaire-bouton, .discret { min-height: 44px; }
  body[data-integration="extension"] .entete > *, .actualisation { min-width: 0; max-width: 100%; }
  body[data-integration="extension"] .navigation nav { scroll-padding-inline: 6px; overscroll-behavior-inline: contain; }
  body[data-integration="extension"] .navigation nav button { min-height: 44px; scroll-margin-inline: 6px; }
  .contenu, body[data-integration="extension"] .contenu { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .tableau { max-width: 100%; overscroll-behavior-inline: contain; }
  .page-admin, .bloc, .details, .employe-ligne { min-width: 0; }
  :is(.details, .commercial-details) dd { overflow-wrap: anywhere; }
  .pagination, .audio-actions { flex-wrap: wrap; }
  .nom-profil, .page-retour, .navigation-bas button, .pagination button, .actions-employe button, .credit-actions button, .actualisation button, .audio-lecture button { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; min-height: 44px; }
  .page-actions { flex-wrap: wrap; gap: 8px; }
  .page-actions button { flex: 1 1 140px; min-height: 44px; white-space: normal; }
}

/* Onglet Stats : lignes ouvertes, sans cartes ni encadrements. */
#vue-stats { min-width: 0; }
body:has(#vue-stats:not([hidden])) #rythme-actualisation { display: none; }
#vue-stats .stats-activite-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
#vue-stats .stats-activite-intro p { margin: 0; }
#vue-stats .stats-activite-intro .surtitre { margin-bottom: 6px; }
#vue-stats .stats-activite-intro > div > p:last-child { color: var(--oaa-secondaire); }
#vue-stats .stats-activite-plage { display: flex; flex: none; align-items: center; gap: 16px; }
#vue-stats .stats-activite-plage button { min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--oaa-secondaire); white-space: nowrap; }
#vue-stats .stats-activite-plage button[aria-pressed="true"] { color: var(--oaa-accent); font-weight: 750; }
#vue-stats .stats-activite-plage button:focus-visible { outline: 2px solid var(--oaa-accent); outline-offset: 5px; border-radius: 4px; }
#vue-stats #stats-activite-horizon { margin: 0 0 30px; }
#vue-stats .stats-activite-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 52px; }
#vue-stats .stats-activite-serie { --stats-couleur: var(--oaa-accent); min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#vue-stats .stats-activite-serie[data-mesure="conversationMs"] { --stats-couleur: var(--oaa-info); }
#vue-stats .stats-activite-serie[data-mesure="utilisateursActifs"] { --stats-couleur: var(--oaa-sonne); }
#vue-stats .stats-activite-serie[data-mesure="depotsCentimes"] { --stats-couleur: var(--oaa-attention); }
#vue-stats .stats-activite-entete { margin: 0 0 22px; }
#vue-stats .stats-activite-entete h2 { margin: 0 0 4px; font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; }
#vue-stats .stats-activite-entete p { margin: 0; font-size: 12px; color: var(--oaa-secondaire); }
#vue-stats .stats-activite-totaux { display: grid; grid-template-columns: 1.15fr 1fr 1fr; align-items: start; gap: 12px; margin: 0 0 24px; }
#vue-stats .stats-activite-totaux > div { min-width: 0; }
#vue-stats .stats-activite-totaux dt { font-size: 11px; line-height: 1.5; color: var(--oaa-secondaire); }
#vue-stats .stats-activite-totaux dd { margin: 6px 0 0; font-size: clamp(19px, 1.7vw, 27px); line-height: 1.3; font-weight: 550; letter-spacing: -.035em; overflow-wrap: anywhere; }
#vue-stats .stats-activite-totaux > div:first-child dd { color: var(--stats-couleur); }
#vue-stats .stats-activite-totaux small { display: block; margin-top: 4px; font-size: 11px; color: var(--oaa-secondaire); }
#vue-stats .stats-activite-figure { min-width: 0; margin: 0; }
#vue-stats .stats-activite-courbe { display: block; width: 100%; height: 196px; overflow: visible; color: var(--stats-couleur); touch-action: pan-y; }
#vue-stats .stats-activite-courbe:focus-visible { outline: 2px solid var(--oaa-accent); outline-offset: 5px; }
#vue-stats .stats-activite-axe { fill: var(--oaa-secondaire); font: 11px var(--oaa-police); }
#vue-stats .stats-activite-grille-ligne { stroke: var(--oaa-bord); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 2 6; }
#vue-stats .stats-activite-aire { fill: currentColor; opacity: .055; }
#vue-stats .stats-activite-trait { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#vue-stats .stats-activite-repere { stroke: currentColor; stroke-width: 1; stroke-opacity: .25; stroke-dasharray: 3 4; }
#vue-stats .stats-activite-point { fill: currentColor; stroke: var(--oaa-fond); stroke-width: 2; }
#vue-stats .stats-activite-legende { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 30px; margin-top: 8px; font-size: 12px; color: var(--oaa-secondaire); }
#vue-stats .stats-activite-legende strong { color: var(--oaa-encre); font-size: 13px; font-weight: 550; }
#vue-stats #stats-appels-date { margin: 36px 0 0; }
#vue-stats .stats-activite-note { margin-top: 24px; max-width: 100ch; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--oaa-secondaire); font-size: 11px; line-height: 1.7; }
#vue-stats .stats-activite-note p { margin: 0 0 8px; }
#vue-stats .stats-activite-note summary { min-height: 44px; padding: 12px 0; color: var(--oaa-encre); cursor: pointer; }
#vue-stats .stats-activite-note summary:focus-visible { outline: 2px solid var(--oaa-accent); outline-offset: 5px; }
@media (max-width: 1100px) {
  #vue-stats .stats-activite-grille { gap: 38px 28px; }
  #vue-stats .stats-activite-totaux { gap: 8px; }
}
@media (max-width: 800px) {
  #vue-stats .stats-activite-intro { align-items: start; flex-direction: column; gap: 12px; }
  #vue-stats .stats-activite-grille { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  #vue-stats .stats-activite-totaux dd { font-size: 24px; }
  #vue-stats .stats-activite-entete { margin-bottom: 18px; }
  #vue-stats .stats-activite-note { font-size: 12px; }
}
@media (forced-colors: active) {
  #vue-stats .stats-activite-trait, #vue-stats .stats-activite-point { stroke: CanvasText; }
  #vue-stats .stats-activite-point { fill: CanvasText; }
  #vue-stats .stats-activite-aire { display: none; }
}

/* Ajustements Stats : histogrammes quotidiens et date de Paris visible. */
#vue-stats #stats-activite-horizon { color: var(--oaa-encre); font-size: 14px; font-weight: 600; line-height: 1.7; }
#vue-stats .stats-activite-barre { fill: currentColor; opacity: .55; }
#vue-stats .stats-activite-barre.aujourdhui { opacity: 1; stroke: var(--oaa-encre); stroke-width: 1; }
@media (forced-colors: active) {
  #vue-stats .stats-activite-barre { fill: CanvasText; opacity: .65; }
  #vue-stats .stats-activite-barre.aujourdhui { fill: Highlight; stroke: CanvasText; opacity: 1; }
}

/* Comparaison de l’équipe, sans modifier la période ni les filtres. */
.equipe-tri { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:0 24px 16px; }
.equipe-tri label { color:var(--oaa-secondaire); font-size:13px; margin:0; }
.equipe-tri select { width:auto; min-width:150px; }
.employe-stats .equipe-cout { display:block; margin-top:5px; font-size:11px; line-height:1.4; color:var(--oaa-secondaire); font-weight:400; }
@media(max-width:620px) { .equipe-tri { padding-inline:16px; gap:8px; } .equipe-tri label { width:100%; } .equipe-tri select { min-width:0; flex:1; } }

/* Bilan, fiche client et fréquentation : mêmes surfaces que l’administration. */
.bilan-intro { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin-bottom:24px; }
.bilan-intro > p { max-width:420px; margin:0; }
.rapport-periode { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.rapport-periode label { margin:0; }
.rapport-periode input { margin-top:6px; max-width:164px; background:var(--oaa-surface); }
.bilan-couverture { margin:28px 0 18px; max-width:850px; }
.bilan-couverture p { margin:6px 0; }
.bilan-profils { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.bilan-profil { min-width:0; margin:0; }
.bilan-profil .bloc-entete { padding-block:18px; }
.bilan-profil h3 { margin:0; }
.bilan-profil td:first-child { white-space:normal; min-width:130px; }
.bilan-profil th { font-size:11px; }
.bilan-taux { color:var(--oaa-info); font-weight:650; }
.rapport-vide { padding:24px; border-radius:18px; background:var(--oaa-surface-alt); color:var(--oaa-secondaire); }
.contact-identite { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; padding:0 0 4px; }
.contact-identite strong { font-size:20px; }
.contact-identite span { color:var(--oaa-secondaire); }
.contact-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.contact-bloc { padding:24px; margin:0; min-width:0; }
.contact-bloc h2 { margin-bottom:20px; }
.contact-bloc .details { padding:0; margin:0; }
.contact-bloc dd { white-space:pre-wrap; overflow-wrap:anywhere; }
.connexions-bloc { margin-top:30px; }
.connexions-bloc .bloc-entete select { width:180px; flex:none; }
#connexions-erreur { margin:0 24px 20px; }
#connexions-resultats { padding:0 24px 24px; }
.connexions-resume { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin:0 0 20px; }
.connexions-resume strong { font:650 34px/1.2 var(--oaa-police-titre); letter-spacing:-.04em; }
.connexions-resume span { color:var(--oaa-secondaire); }
.connexions-heures { margin:0 0 30px; }
.connexions-heures figcaption { font-weight:600; margin-bottom:20px; }
.connexions-barres { display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:5px; }
.connexion-heure { display:flex; flex-direction:column; align-items:center; min-width:0; }
.connexion-valeur { font-size:10px; color:var(--oaa-secondaire); margin-bottom:5px; }
.connexion-piste { height:126px; width:100%; max-width:28px; border-radius:6px; background:var(--oaa-surface-alt); overflow:hidden; }
.connexion-piste svg { width:100%; height:100%; display:block; }
.connexion-piste rect { fill:var(--oaa-info); }
.connexion-heure small { margin-top:6px; font-size:10px; color:var(--oaa-secondaire); }
.connexions-semaine h3 { margin-bottom:5px; }
.connexions-heatmap-scroll { overflow-x:auto; padding-bottom:8px; }
.connexions-heatmap { width:100%; min-width:660px; border-collapse:separate; border-spacing:3px; table-layout:fixed; }
.connexions-heatmap th { font-size:10px; padding:5px 0; text-align:center; font-weight:500; color:var(--oaa-secondaire); }
.connexions-heatmap th:first-child { width:74px; text-align:left; }
.connexions-heatmap td { padding:7px 0; text-align:center; border-radius:4px; font-size:10px; color:var(--oaa-encre); background:var(--oaa-surface-alt); }
.connexions-details { margin-top:18px; }
.connexions-details summary { cursor:pointer; color:var(--oaa-secondaire); font-size:12px; }
.connexions-details .table-conteneur { margin-top:10px; }
.connexions-heatmap .chaleur-1 { background:color-mix(in srgb, var(--oaa-info) 10%, var(--oaa-surface)); }
.connexions-heatmap .chaleur-2 { background:color-mix(in srgb, var(--oaa-info) 20%, var(--oaa-surface)); }
.connexions-heatmap .chaleur-3 { background:color-mix(in srgb, var(--oaa-info) 30%, var(--oaa-surface)); }
.connexions-heatmap .chaleur-4 { background:color-mix(in srgb, var(--oaa-info) 40%, var(--oaa-surface)); }
.connexions-heatmap .chaleur-5 { background:color-mix(in srgb, var(--oaa-info) 50%, var(--oaa-surface)); }
.connexions-heatmap .chaleur-6 { background:color-mix(in srgb, var(--oaa-info) 60%, var(--oaa-surface)); }
.connexions-heatmap .chaleur-7 { background:color-mix(in srgb, var(--oaa-info) 70%, var(--oaa-surface)); }
.connexions-heatmap .chaleur-8 { background:color-mix(in srgb, var(--oaa-info) 80%, var(--oaa-surface)); }

@media(max-width:1050px) { .bilan-profils { grid-template-columns:minmax(0,1fr); } }
@media(max-width:620px) {
  .contact-sections { grid-template-columns:minmax(0,1fr); gap:14px; }
  .contact-bloc { padding:18px; }
  .rapport-periode { width:100%; }
  .rapport-periode label { flex:1; min-width:120px; }
  .rapport-periode input { max-width:none; }
  #connexions-resultats { padding-inline:16px; }
  .connexions-bloc .bloc-entete { flex-wrap:wrap; }
  .connexions-barres { gap:3px; }
  .connexion-valeur { font-size:8px; }
  .connexion-heure small { font-size:8px; }
  .connexion-piste { height:96px; }
}
@media(forced-colors:active) { .connexion-piste rect { fill:Highlight; } .connexions-heatmap td { border:1px solid ButtonText; } }

.equipe-estimation { padding:0 24px; margin:0 0 18px; }
.equipe-cout-total { display:block; margin-top:3px; color:var(--oaa-secondaire); }
@media(max-width:620px) { .equipe-estimation { padding-inline:16px; } }

.bilan-profil .commercial-table { min-width:0; width:100%; table-layout:fixed; }
.bilan-profil .commercial-table :is(th,td) { padding:14px 10px; white-space:normal; overflow-wrap:anywhere; }
.bilan-profil .commercial-table :is(th,td):first-child { width:40%; min-width:0; }
.bilan-profil .commercial-table :is(th,td):not(:first-child) { text-align:right; }
.bilan-profil .commercial-table th { font-size:10px; letter-spacing:.035em; }
@media(max-width:620px) { .bilan-profil .commercial-table :is(th,td) { padding:12px 7px; font-size:11px; } .bilan-profil .commercial-table th { font-size:9px; } }
:root[data-theme="dark"] .connexions-heatmap :is(.chaleur-7,.chaleur-8) { color:#082a29; }
/* Même matière sur tablette et téléphone : les actions gardent leur surface tactile, les informations
   denses défilent dans leur tableau et les formulaires utilisent toute la largeur disponible. */
@media (pointer: coarse), (max-width: 720px) {
  :is(.principal, .secondaire-bouton, .discret, .danger, .danger-texte, .fermer),
  .navigation nav button, .navigation-employe button, .actions button, .employe-bas button,
  .pagination button, .navigation-bas button, .information .discret, .alerte-exploitation > button {
    min-height: 44px;
  }
  .fermer { width: 44px; }
  :is(.entete, .connexion-entete) .oaa-theme-control { min-height: 52px; }
  :is(.entete, .connexion-entete) .oaa-theme-control button { min-width: 64px; min-height: 44px; }
  .case-audio { min-height: 44px; }
  :is(.equipe-filtres > div:first-child, .filtre-recherche)::after { bottom: 13.5px; }
  .table-conteneur { padding-bottom: 8px; }
}
@media (max-width: 620px) {
  .navigation nav { scroll-padding-inline: 5px; overscroll-behavior-inline: contain; }
  .navigation nav button { scroll-margin-inline: 5px; }
  .statistiques { gap: 10px; }
  .stat { padding: 15px; }
  .bloc, .page-admin { padding: 16px; }
  .bloc-entete > div, .information > div:last-child { min-width: 0; }
  .information, .page-admin { overflow-wrap: anywhere; }
  .equipe-filtres > div { width: 100%; }
  .emails-actions { align-items: stretch; }
  .emails-actions > button { flex: 1 1 160px; white-space: normal; line-height: 1.35; height: auto; padding-block: 10px; }
  .actions-employe { grid-template-columns: minmax(0, 1fr); }
  .page-admin .details { margin-inline: 0; }
  .page-actions { margin-top: 24px; }
  .pagination > div { max-width: 100%; flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .stat strong { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .details, #dialog-employe .details { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .details dd { margin-bottom: 11px; }
  .stats-employe { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .stats-employe > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
}
/* Les matières s'effacent devant les préférences d'accessibilité du système. */
@media (forced-colors: active) {
  body, .connexion-carte, .stat, .stat.heros, .bloc, .information, .page-admin,
  .navigation nav, body[data-integration="extension"] .navigation nav,
  :is(.entete, .connexion-entete) .oaa-theme-control {
    background: Canvas; box-shadow: none;
  }
  .page-admin, .connexion-carte { border-color: CanvasText; }
  :is(.principal, .secondaire-bouton, .discret, .danger, .danger-texte) {
    background: ButtonFace; color: ButtonText; border-color: ButtonText; box-shadow: none;
  }
  .navigation nav button[aria-current], body[data-integration="extension"] .navigation nav button[aria-current],
  :is(.entete, .connexion-entete) .oaa-theme-control button[aria-pressed="true"] {
    background: Highlight; color: HighlightText; box-shadow: none;
  }
}