/*
 * ══════════════════════════════════════════════════════════════════════════
 *  Espace outils — feuille de style unique
 *  Maître : Système IA/Design systems/cci/statique/css/cci.css
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Toutes les pages du projet chargent ce seul fichier, fronts et back-offices.
 * Il a remplacé le 7 août 2026 les quatre feuilles qui se partageaient le
 * travail — cci-fonts, cci-front, cci-admin, cci-components — et dont la
 * répartition produisait sa propre famille de pannes : un écran qui utilisait
 * une classe définie dans la feuille de l'autre côté s'affichait sans style,
 * sans que rien ne le signale. Ce risque n'existe plus : ce qui est ici est
 * disponible partout.
 *
 * SOMMAIRE
 *
 *   1. Jetons de couleur, de rayon et d'ombre .................. `:root`
 *   2. Base de page ............................ `*`, `body`, défilement
 *   3. Typographie ......................... Fira Sans auto-hébergée
 *   4. En-tête des fronts métier ......................... `.cci-tool-*`
 *   5. Coque du back-office ............................. `.cci-admin-*`
 *   6. Composants communs aux deux côtés ..... formulaires, messages,
 *      badges, tableaux, dialogues, dépôt de fichier, signature
 *
 * Pour retrouver une règle, chercher sa classe : les noms sont préfixés par
 * la section à laquelle ils appartiennent. Les six bannières encadrées
 * séparent les sections.
 *
 * L'ordre des sections compte. Les composants viennent en dernier : à
 * spécificité égale, ce sont eux qui l'emportent, comme lorsqu'ils étaient
 * dans une feuille chargée après les autres.
 *
 * Règles d'usage : docs/FORM_UI_HARMONIZATION.md
 * Aucun outil n'invente sa propre variante d'un composant qui existe ici.
 */


/* ── 1. Jetons de couleur, de rayon et d'ombre ────────────────────────── */

:root {
  /* Le bleu de la charte graphique CCI, et ses nuances officielles. Le socle
     n'en connaissait qu'une : les trois autres n'existaient nulle part, et un
     écran qui avait besoin d'un bleu plus soutenu inventait le sien.

     `clair` ne porte jamais de texte — 3,70 de contraste sur blanc, sous le
     seuil de 4,5. C'est une couleur de fond et de repère. Les deux foncées le
     supportent largement, dans les deux sens. */
  --cci-primary: #373cf5;
  --cci-primary-clair: #6877ff;
  --cci-primary-fonce: #0000cc;
  --cci-primary-nuit: #000099;

  --cci-primary-hover: #292ed2;
  --cci-primary-soft: #eeefff;
  --cci-primary-border: #cfd2ff;
  --cci-ink: #0a1551;
  --cci-ink-soft: #30395f;
  --cci-muted: #68708d;
  --cci-subtle: #9299af;
  --cci-canvas: #f5f6fb;
  --cci-surface: #ffffff;
  --cci-border: #e5e7f0;
  /* Les lignes métiers de la charte, ligne `f1`. Elles ne vivaient que dans
     `orgchart.js`, invisibles du design system et donc de quiconque n'ouvrait
     pas ce fichier.

     Elles sont documentées ici, et non employées par le socle : une palette
     catégorielle de onze teintes cesse d'informer à l'écran — le seuil
     communément admis est de quatre à six — et trois d'entre elles ne peuvent
     pas porter de texte (international 2,19, club et réseaux 2,55, numérique
     2,84). Leur domaine est le document imprimé, qui parle d'une ligne à la
     fois et porte une légende. */
  --cci-metier-territoires: #007ea5;
  --cci-metier-numerique: #13aba6;
  --cci-metier-durable: #3c7f20;
  --cci-metier-clubs: #f68341;
  --cci-metier-international: #eaa10f;
  --cci-metier-competence-rh: #bf4d00;
  --cci-metier-competitivite: #af1b1b;
  --cci-metier-commercial: #c11f84;
  --cci-metier-creation: #700ba2;
  --cci-metier-financement: #5b2e15;
  --cci-metier-formation: #be9b61;

  --cci-success: #18733b;
  --cci-success-soft: #e8f7ee;
  --cci-warning: #815900;
  --cci-warning-soft: #fff4d5;
  --cci-danger: #a32626;
  --cci-danger-soft: #fdecec;
  --cci-radius-sm: 8px;
  --cci-radius-md: 12px;
  --cci-radius-lg: 16px;
  --cci-radius-pill: 999px;
  --cci-shadow-sm: 0 1px 3px rgba(10, 21, 81, .06), 0 6px 18px rgba(10, 21, 81, .04);

  /* Réservés à la coque du back-office. */
  --cci-sidebar: #11183b;
  --cci-sidebar-soft: #1a234e;
  --cci-sidebar-width: 272px;
  --cci-content-width: 1440px;
  --cci-shadow-md: 0 16px 40px rgba(10, 21, 81, .10);
  --cci-dialog-open-duration: 180ms;
  --cci-dialog-close-duration: 140ms;

  /* Posée ici plutôt que dans la section typographie : la règle `body`
     qui la consomme est déclarée juste en dessous. */
  --cci-font-family: "Fira Sans", "Segoe UI", Arial, sans-serif;
}


/* ════════════════════════════════════════════════════════════════════════ */
/*  2. Base de page
 */
/* ════════════════════════════════════════════════════════════════════════ */


/*
 * La police, le fond et la couleur du texte n'étaient posés nulle part dans le
 * socle : chaque outil les tenait dans son `style.css` local, et `cci-fonts.css`
 * ne servait la famille qu'à `body.cci-admin`. Les trois outils écrits sans
 * feuille locale — CET, Missions et frais, Arrêts de travail — s'affichaient
 * donc en police à empattements sur fond noir, avec la marge par défaut du
 * navigateur.
 *
 * Les anciens outils chargent leur `style.css` avant le socle : cette règle
 * prend le dessus et aligne leur fond sur le jeton commun, ce qui est
 * exactement l'uniformisation recherchée.
 */

/* `cci-admin.css` posait cette règle depuis toujours, `cci-front.css` jamais.
   Absences et Véhicules la tenaient dans leur `style.css` local ; les outils
   écrits sans feuille locale ne l'avaient donc nulle part, et tout conteneur en
   `width: 100%` avec du rembourrage dépassait de la largeur exacte de ce
   rembourrage — d'où la barre de défilement horizontale sur chacune de leurs
   pages. */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--cci-canvas);
  color: var(--cci-ink);
  font-family: var(--cci-font-family, "Fira Sans", "Segoe UI", Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}



/* ════════════════════════════════════════════════════════════════════════ */
/*  3. Typographie — Fira Sans auto-hébergée
 */
/* ════════════════════════════════════════════════════════════════════════ */


@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fira-sans-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fira-sans-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fira-sans-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fira-sans-700-latin.woff2") format("woff2");
}


/* ════════════════════════════════════════════════════════════════════════ */
/*  4. En-tête des fronts métier
 */
/* ════════════════════════════════════════════════════════════════════════ */


.cci-tool-header {
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: 1px solid #e5e7f0;
  background: rgba(255, 255, 255, .98);
}

.cci-tool-header-inner {
  display: flex;
  width: min(100% - 48px, 1240px);
  min-height: 76px;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.cci-tool-brand {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 11px;
  align-items: center;
  color: #0a1551;
  text-decoration: none;
}

.cci-tool-brand:hover { color: #0a1551; }

.cci-tool-brandmark {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: #373cf5;
}

.cci-tool-brandmark img {
  display: block;
  width: 24px;
  height: 28px;
  object-fit: contain;
}

.cci-tool-brandcopy {
  display: grid;
  line-height: 1.12;
}

.cci-tool-brandcopy strong {
  color: #0a1551;
  font-size: 17px;
  font-weight: 700;
}

.cci-tool-brandcopy small {
  margin-top: 3px;
  color: #68708d;
  font-size: 11px;
}

.cci-tool-nav {
  display: flex;
  align-self: stretch;
  gap: 22px;
  align-items: center;
}

.cci-tool-nav a {
  display: inline-flex;
  height: 100%;
  align-items: center;
  border-bottom: 3px solid transparent;
  color: #68708d;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.cci-tool-nav a:hover,
.cci-tool-nav a.active {
  color: #0a1551;
  border-bottom-color: #373cf5;
}

.cci-tool-account {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
}

.cci-tool-admin-link {
  box-sizing: border-box;
  display: inline-flex;
  min-height: 38px;
  gap: 7px;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid #cfd2ff;
  border-radius: 999px;
  color: #272bbb;
  background: #eeefff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.cci-tool-admin-link:hover {
  color: #171b94;
  background: #e4e5ff;
}

.cci-tool-admin-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: currentColor;
}

.cci-tool-user {
  display: inline-flex;
  min-width: 0;
  min-height: 40px;
  gap: 8px;
  align-items: center;
  color: #0a1551;
}

button.cci-tool-user {
  padding: 3px 7px 3px 3px;
  border: 0;
  background: transparent;
}

.cci-tool-avatar {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #11183b;
  font-size: 11px;
  font-weight: 700;
}

.cci-tool-user-copy {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.cci-tool-user-name {
  max-width: 170px;
  overflow: hidden;
  color: #0a1551;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cci-tool-user-action {
  margin-top: 3px;
  color: #373cf5;
  font-size: 11px;
  text-decoration: none;
}

.cci-tool-user-action:hover { text-decoration: underline; }

/* Retour au portail : c'est une action de navigation, pas un réglage de
   compte. Elle mérite donc un bouton lisible plutôt qu'un lien minuscule sous
   le nom de la personne. Volontairement plus discrète que l'accès à
   l'administration, avec laquelle elle voisine. */
.cci-tool-back {
  box-sizing: border-box;
  display: inline-flex;
  min-height: 38px;
  gap: 7px;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid #e5e7f0;
  border-radius: 999px;
  background: #fff;
  color: #30395f;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.cci-tool-back:hover {
  border-color: #cfd2ff;
  background: #f7f8fd;
  color: #0a1551;
}

.cci-tool-back svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: currentColor;
}

@media (max-width: 760px) {
  /* Réduit à son icône, comme l'accès à l'administration. La taille reste une
     cible tactile confortable. */
  .cci-tool-back span { display: none; }
  .cci-tool-back {
    width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
  }

  .cci-tool-admin-link {
    width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 760px) {
  .cci-tool-header { position: static; }

  .cci-tool-header-inner {
    display: grid;
    width: min(100% - 32px, 1240px);
    min-height: 0;
    grid-template-columns: 1fr auto;
    gap: 12px 10px;
    padding: 14px 0 0;
  }

  .cci-tool-brandcopy small,
  .cci-tool-user-copy { display: none; }

  .cci-tool-brandmark {
    width: 38px;
    height: 38px;
  }

  .cci-tool-nav {
    min-height: 42px;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
  }

  .cci-tool-nav a {
    flex: 1 1 auto;
    justify-content: center;
  }

  .cci-tool-admin-link span { display: none; }

  .cci-tool-admin-link {
    width: 38px;
    min-height: 38px;
    justify-content: center;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cci-tool-header *,
  .cci-tool-header *::before,
  .cci-tool-header *::after {
    transition-duration: .01ms !important;
  }
}



/* ════════════════════════════════════════════════════════════════════════ */
/*  5. Coque du back-office
 */
/* ════════════════════════════════════════════════════════════════════════ */

.cci-admin a { color: var(--cci-primary); }

.cci-admin-shell {
  display: grid;
  grid-template-columns: var(--cci-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.cci-admin-sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--cci-sidebar-width);
  height: 100vh;
  padding: 22px 16px 18px;
  overflow-y: auto;
  color: #fff;
  background-color: var(--cci-sidebar);
}

.cci-admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 10px 20px;
  color: #fff !important;
  text-decoration: none;
}

.cci-admin-brand-mark {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: var(--cci-primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.cci-admin-brand-mark img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.cci-admin-brand-copy { min-width: 0; line-height: 1.2; }
.cci-admin-brand-name { display: block; font-size: 13px; font-weight: 750; letter-spacing: .01em; }
.cci-admin-brand-app { display: block; margin-top: 4px; color: #aeb6d4; font-size: 12px; }

.cci-admin-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.cci-admin-nav-label {
  margin: 10px 12px 7px;
  color: #7f89ad;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cci-admin-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px 10px 16px;
  border-radius: 10px;
  color: #c7cde2 !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, transform .15s ease;
}

.cci-admin-nav-link::before {
  position: absolute;
  left: 5px;
  width: 3px;
  height: 18px;
  border-radius: 99px;
  background: transparent;
  content: "";
}

.cci-admin-nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .07);
  transform: translateX(2px);
}

.cci-admin-nav-link.active {
  color: #fff !important;
  background: rgba(55, 60, 245, .3);
}

.cci-admin-nav-link.active::before { background: #8589ff; }
.cci-admin-nav-link.danger { color: #ffb8b8 !important; }

/* Sortir du back-office : voir l'outil côté agent, remonter à l'Espace outils,
   se déconnecter.

   Ces trois liens étaient dans la navigation, sous un intitulé « Accès rapide »,
   et portaient `.cci-admin-nav-link` : même hauteur de 42 px, même graisse,
   même pastille au survol, même barre d'état actif que les écrans du
   back-office. Rien ne disait qu'ils faisaient quitter la page plutôt que d'y
   naviguer, et ils pesaient autant que les vraies destinations.

   Ils descendent donc en pied de colonne — `.cci-admin-nav` porte `flex: 1`,
   c'est lui qui les y pousse — juste au-dessus du profil, et changent de
   registre : plus petits, plus discrets, sans fond ni barre, avec un chevron
   qui indique la sortie. */
.cci-admin-sortie {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.cci-admin-sortie-lien {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 12px 5px 8px;
  border-radius: 8px;
  color: #97a0bd !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}

/* Se déconnecter passe par un formulaire quand l'action doit être protégée
   contre les requêtes forgées : le portail le fait. Un `<button>` n'hérite ni
   de la police ni de l'alignement, et arrive avec son fond et sa bordure —
   il faut donc les retirer pour qu'il se tienne au milieu de liens. */
button.cci-admin-sortie-lien {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.cci-admin-sortie form { display: block; }

.cci-admin-sortie-lien:hover {
  color: #e7eaf5 !important;
  background: rgba(255, 255, 255, .05);
}

/* Le chevron est dessiné par le CSS : c'est une indication de direction, pas
   une information — un lecteur d'écran n'a rien à en faire. */
.cci-admin-sortie-lien::before {
  flex: none;
  width: 14px;
  color: #6f7999;
  content: "›";
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.cci-admin-sortie-lien:hover::before { color: inherit; }

.cci-admin-sortie-lien.danger { color: #d59a9a !important; }
.cci-admin-sortie-lien.danger:hover { color: #ffb8b8 !important; }

.cci-admin-profile {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding: 14px 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.cci-admin-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--cci-primary);
  font-size: 13px;
  font-weight: 800;
}

.cci-admin-profile strong,
.cci-admin-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cci-admin-profile strong { color: #fff; font-size: 12px; }
.cci-admin-profile small { margin-top: 3px; color: #8f98b9; font-size: 11px; }

.cci-admin-workspace { min-width: 0; }

.cci-admin-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  padding: 14px clamp(20px, 3vw, 42px);
  border-bottom: 1px solid var(--cci-border);
  /* Fond opaque, sans flou. La barre était translucide à 94 % : le contenu
     défilait dessous et transparaissait — un champ de recherche, un onglet ou
     un bouton bleu venaient se superposer au titre de la page. Six pour cent
     de transparence suffisent à rendre deux textes illisibles, et le flou
     d'arrière-plan est un effet décoratif que le design system exclut. */
  background: var(--cci-surface);
}

.cci-admin-heading { min-width: 0; }
.cci-admin-eyebrow { display: block; margin-bottom: 3px; color: var(--cci-primary); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.cci-admin-heading h1 { margin: 0; color: var(--cci-ink); font-size: clamp(20px, 2vw, 25px); font-weight: 750; letter-spacing: -.025em; }

.cci-admin-topbar-meta { display: flex; align-items: center; gap: 10px; }
.cci-admin-user-name { color: var(--cci-muted); font-size: 13px; font-weight: 650; }
/* Le rôle est une information, pas une action : il était en bleu CCI, la
   couleur réservée à ce sur quoi on clique. Trois bleus se suivaient alors en
   haut à droite — l'intitulé de l'outil, ce badge et le bouton principal —
   et plus rien ne désignait l'action de l'écran. */
.cci-admin-role {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--cci-border);
  border-radius: 7px;
  color: var(--cci-muted);
  background: var(--cci-canvas);
  font-size: 11px;
  font-weight: 750;
}

.cci-admin-content {
  width: min(100%, var(--cci-content-width));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 42px);
}

/* Retour vers l'écran précédent, en tête d'une page de détail.
   Il était écrit en lien nu dans un paragraphe, et différemment d'un outil à
   l'autre — parfois en bouton secondaire. Une capsule grise le dessine sans lui
   donner le poids d'une action : sur la fiche d'une demande, accepter et
   refuser doivent rester les seuls gestes qui appellent le regard.
   Le sélecteur est doublé pour l'emporter sur `.cci-admin a`, qui colore tous
   les liens en bleu CCI. */
.cci-admin .cci-admin-back {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 18px;
  padding: 6px 13px 6px 10px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-pill);
  background: var(--cci-surface);
  color: var(--cci-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.cci-admin .cci-admin-back:hover {
  border-color: var(--cci-primary-border);
  color: var(--cci-primary);
}

.cci-admin .cci-admin-back:focus-visible {
  outline: 2px solid var(--cci-primary);
  outline-offset: 2px;
}

.cci-admin-back svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.cci-admin .card,
.cci-admin-panel {
  border: 1px solid var(--cci-border) !important;
  border-radius: var(--cci-radius-lg) !important;
  background: var(--cci-surface);
  box-shadow: var(--cci-shadow-sm) !important;
}

/* Le panneau porte une bordure et un arrondi : ses enfants gèrent leur propre
   rembourrage, faute de quoi un tableau ne peut pas s'étendre bord à bord. */
.cci-admin-panel { overflow: hidden; }

/* En-tête de panneau : un intitulé à gauche, une action à droite. L'action ne
   se comprime pas, sinon son libellé se replie sur deux lignes. */
.cci-admin-panel-header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 24px 28px;
  border-bottom: 1px solid var(--cci-border);
}

.cci-admin-panel-header > div { min-width: 0; }

.cci-admin-panel-header h2 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--cci-ink);
}

.cci-admin-panel-header p {
  margin: 0;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cci-muted);
}

.cci-admin-panel-header form { flex: 0 0 auto; }

/* Champ et action sur une même ligne, alignés en bas. */
.cci-admin-publish {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cci-admin-publish input {
  box-sizing: border-box;
  width: 220px;
  padding: 10px 12px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-sm);
  font: inherit;
  font-size: 13px;
  color: var(--cci-ink);
}

.cci-admin-publish input:focus {
  outline: none;
  border-color: var(--cci-primary);
  box-shadow: 0 0 0 3px var(--cci-primary-soft);
}

.cci-admin-panel-body { padding: 20px 28px; }

/* Tableaux : chaque outil redéfinissait les siens. Ils vivent désormais ici,
   pour que tous les back-offices se ressemblent. */
.cci-admin-table-wrap { overflow-x: auto; }

.cci-admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cci-surface);
}

.cci-admin-table th,
.cci-admin-table td {
  padding: 13px 28px;
  border-bottom: 1px solid var(--cci-border);
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}

.cci-admin-table th {
  background: var(--cci-canvas);
  color: var(--cci-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* En-tête de colonne triable. Le tri passe par l'adresse et non par un script :
   trier au navigateur ne réordonnerait que la page affichée, en laissant croire
   qu'il classe la liste entière. */
.cci-admin-table th .cci-admin-sort {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.cci-admin-table th .cci-admin-sort:hover { color: var(--cci-primary); }
.cci-admin-table th .cci-admin-sort.is-active { color: var(--cci-primary); }

/* Adresse email d'une ligne : en bleu souligné, elle faisait tache — plus
   voyante que le nom de la personne, alors qu'elle est la donnée la moins
   consultée du tableau. Elle se lit désormais comme le reste de la ligne et
   ne se signale comme lien qu'au survol, où elle reste cliquable.
   Le sélecteur vise `mailto:` plutôt qu'une classe à poser : un tableau
   ajouté demain hériterait de la règle sans qu'on ait à y penser. */
.cci-admin-table a[href^="mailto:"] {
  color: inherit;
  text-decoration: none;
}

.cci-admin-table a[href^="mailto:"]:hover,
.cci-admin-table a[href^="mailto:"]:focus-visible {
  color: var(--cci-primary);
  text-decoration: underline;
}

/* Action de ligne : un lien nu se distingue mal dans un tableau dense.
   S'écrit indifféremment sur <a> ou sur <button> — d'où `font: inherit`, sans
   quoi un bouton reprend la police du navigateur au milieu d'un tableau. */
.cci-admin-action {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 14px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-pill);
  background: var(--cci-surface);
  color: var(--cci-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.cci-admin-action:hover {
  border-color: var(--cci-primary-border);
  background: var(--cci-primary-soft);
  color: var(--cci-primary);
}

.cci-admin-action:focus-visible {
  outline: 2px solid var(--cci-primary);
  outline-offset: 2px;
}

/* Action destructrice : même forme que les autres, pour ne pas déséquilibrer la
   colonne, mais teintée. La rendre plus grosse attirerait l'œil et le clic
   exactement là où il ne faut pas. */
.cci-admin-action.is-danger { color: var(--cci-danger); }

.cci-admin-action.is-danger:hover {
  border-color: #f3c4c4;
  background: var(--cci-danger-soft);
  color: var(--cci-danger);
}

/* Groupe d'actions en bout de ligne. Le `display: contents` sur les formulaires
   évite qu'un bouton enveloppé dans un <form> — une suppression, par exemple —
   ne s'aligne pas comme ses voisins. */
.cci-admin-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  /* Les actions d'une ligne restent sur une ligne. Empilées, elles doublent la
     hauteur de chaque rangée et le tableau devient illisible. C'est aux colonnes
     de texte de céder la place, pas à elles. */
  white-space: nowrap;
}

.cci-admin-actions form { display: contents; }

/* Tableau dense : au-delà de cinq colonnes, la gouttière de 28 px pousse le
   tableau hors de l'écran et impose un défilement horizontal, alors que le
   contenu tenait. À réserver à ces cas-là. */
.cci-admin-table.is-dense th,
.cci-admin-table.is-dense td { padding: 11px 16px; }

/* Une adresse email ne se coupe pas : « f.bethune@cci- » sur une ligne et
   « oise.fr » sur la suivante ne se lit pas et ne se recopie pas. La colonne
   prend la largeur qu'il lui faut ; ce sont les colonnes de plusieurs mots —
   poste, service — qui cèdent la place en passant à la ligne. */
.cci-admin-table .cci-admin-cell-nowrap { white-space: nowrap; }

.cci-admin-table tbody tr:last-child td { border-bottom: 0; }
.cci-admin-table tbody tr:hover td { background: #fafbff; }
.cci-admin-table small { display: block; color: var(--cci-muted); }

/* Pastilles d'état, jusqu'ici propres au portail. */
.cci-admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.cci-admin-badge.is-on {
  border-color: #b7e3c6;
  color: var(--cci-success);
  background: var(--cci-success-soft);
}

.cci-admin-badge.is-off {
  border-color: #f0dca8;
  color: var(--cci-warning);
  background: var(--cci-warning-soft);
}

.cci-admin .card { padding: 28px; }
.cci-admin .card .card-body { padding: 0; }
.cci-admin .card h1 { color: var(--cci-ink); font-size: 24px; font-weight: 750; letter-spacing: -.025em; }
.cci-admin .card h2,
.cci-admin .card h5,
.cci-admin .card h6 { color: var(--cci-ink); }
.cci-admin .card p.lead { color: var(--cci-muted); }

.cci-admin .card.cci-etab-card {
  padding: 0;
  overflow: hidden;
}

.cci-admin .card.cci-etab-card .card-body {
  padding: 20px;
}

.cci-admin .cci-etab-card-heading {
  min-height: 28px;
  align-items: flex-start !important;
}

.cci-admin .cci-visibility-badge {
  flex: 0 0 auto;
  justify-content: center;
  gap: 5px;
  min-width: 64px;
  margin-top: 0;
  line-height: 1;
  white-space: nowrap;
}

.cci-admin .cci-visibility-badge i {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.cci-admin .stat-card,
.cci-admin .stat-filter {
  min-height: 112px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-surface);
  box-shadow: var(--cci-shadow-sm);
}

.cci-admin .cci-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.cci-admin .stat-card {
  position: relative;
  min-width: 0;
  padding: 20px;
  overflow: hidden;
}

.cci-admin .stat-card::after {
  position: absolute;
  right: -18px;
  bottom: -30px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--cci-primary-soft);
  content: "";
}

.cci-admin .stat-card .stat-value,
.cci-admin .stat-card .stat-label {
  position: relative;
  z-index: 1;
}

.cci-admin .stat-icon { width: 46px; height: 46px; border-radius: 12px; }
.cci-admin .stat-value,
.cci-admin .stat-filter .num { color: var(--cci-ink); font-size: 29px; font-weight: 780; letter-spacing: -.03em; }
.cci-admin .stat-label,
.cci-admin .stat-filter .label { color: var(--cci-muted); font-size: 12px; font-weight: 650; }

.cci-admin .cci-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.cci-admin .cci-section-heading h2 {
  margin: 0;
  color: var(--cci-ink);
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -.02em;
}

.cci-admin .cci-empty-state {
  padding: 34px 20px;
  border: 1px dashed var(--cci-border-strong);
  border-radius: var(--cci-radius-md);
  color: var(--cci-muted);
  background: var(--cci-surface);
  text-align: center;
}

.cci-admin .stat-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.cci-admin .stat-filter {
  position: relative;
  min-width: 0;
  padding: 18px 20px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.cci-admin .stat-filter::after {
  position: absolute;
  right: -18px;
  bottom: -30px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--cci-primary-soft);
  content: "";
}

.cci-admin .stat-filter .num,
.cci-admin .stat-filter .label {
  position: relative;
  z-index: 1;
}

.cci-admin .stat-filter:hover { border-color: var(--cci-primary-border); transform: translateY(-2px); box-shadow: var(--cci-shadow-md); }
.cci-admin .stat-filter.active { border-color: var(--cci-primary); background: var(--cci-primary); }
.cci-admin .stat-filter.active::after { background: rgba(255, 255, 255, .12); }
.cci-admin .stat-filter.active .num,
.cci-admin .stat-filter.active .label { color: #fff; }

.cci-admin .table-scroll {
  overflow-x: auto;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-lg);
  background: var(--cci-surface);
  box-shadow: var(--cci-shadow-sm);
}

.cci-admin table.data { min-width: 760px; background: transparent; }
.cci-admin table.data th,
.cci-admin table.data td { padding: 15px 18px; border-bottom-color: var(--cci-border); vertical-align: middle; }
.cci-admin table.data th { color: var(--cci-muted); background: #fafbfe; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.cci-admin table.data td { color: var(--cci-ink-soft); font-size: 13px; }
.cci-admin table.data tr:hover td { background: #f8f9ff; }

.cci-admin .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--cci-radius-pill);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.cci-admin .btn:hover { transform: translateY(-1px); }
.cci-admin .btn-sm { min-height: 34px; padding: 7px 12px; font-size: 12px; }
.cci-admin .btn-primary,
.cci-admin .btn-cci { color: #fff; background: var(--cci-primary); border-color: var(--cci-primary); }
.cci-admin .btn-primary:hover,
.cci-admin .btn-cci:hover { color: #fff; background: var(--cci-primary-hover); border-color: var(--cci-primary-hover); box-shadow: 0 6px 16px rgba(55, 60, 245, .22); }
.cci-admin .btn-secondary,
.cci-admin .btn-outline-secondary { color: var(--cci-ink); background: #fff; border-color: var(--cci-border); }
.cci-admin .btn-secondary:hover,
.cci-admin .btn-outline-secondary:hover { color: var(--cci-primary); background: var(--cci-primary-soft); border-color: var(--cci-primary-border); }
.cci-admin .btn-outline-cci { color: var(--cci-primary); background: #fff; border-color: var(--cci-primary-border); }
.cci-admin .btn-outline-cci:hover { color: #fff; background: var(--cci-primary); border-color: var(--cci-primary); }
.cci-admin .btn-approve { color: #fff; background: var(--cci-success); }
.cci-admin .btn-refuse,
.cci-admin .btn-danger { color: #fff; background: var(--cci-danger); }

.cci-admin .badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 750;
}

.cci-admin .badge-en_attente { color: var(--cci-warning); background: var(--cci-warning-soft); }
.cci-admin .badge-validee { color: var(--cci-success); background: var(--cci-success-soft); }
.cci-admin .badge-refusee { color: var(--cci-danger); background: var(--cci-danger-soft); }

/* Un back-office se remplit à la souris, sur un écran large, et affiche
   souvent dix champs à la suite : la cible tactile de 44 px y produit des
   formulaires étirés et pénibles à parcourir. La hauteur est donc réduite pour
   le pointeur fin, et rétablie plus bas dès que l'appareil n'en a pas. */
.cci-admin input[type="text"],
.cci-admin input[type="email"],
.cci-admin input[type="password"],
.cci-admin input[type="date"],
.cci-admin input[type="time"],
.cci-admin input[type="number"],
.cci-admin input[type="url"],
.cci-admin select,
.cci-admin textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #d8dce8;
  border-radius: var(--cci-radius-sm);
  /* Sans taille explicite, le navigateur applique sa propre valeur aux
     contrôles de formulaire : le texte saisi ne suivrait pas la page. */
  font-size: 14px;
  color: var(--cci-ink);
  background: #fff;
}

.cci-admin input:focus,
.cci-admin select:focus,
.cci-admin textarea:focus {
  outline: none;
  border-color: var(--cci-primary);
  box-shadow: 0 0 0 3px var(--cci-primary-soft);
}

/* Sur un appareil sans pointeur fin, la cible reprend la taille du doigt : la
   densité est un confort de bureau, pas une règle à imposer au tactile. */
@media (pointer: coarse) {
  .cci-admin input[type="text"],
  .cci-admin input[type="email"],
  .cci-admin input[type="password"],
  .cci-admin input[type="date"],
  .cci-admin input[type="time"],
  .cci-admin input[type="number"],
  .cci-admin input[type="url"],
  .cci-admin select,
  .cci-admin textarea {
    min-height: 44px;
    padding: 10px 12px;
  }
}

/* Un libellé aussi gras que son champ se dispute la lecture avec lui. Il
   annonce, il ne réclame pas l'attention. */
.cci-admin .field label {
  display: block;
  margin-bottom: 7px;
  color: var(--cci-ink-soft);
  font-size: 12px;
  font-weight: 600;
}
.cci-admin .hint { color: var(--cci-muted); }
.cci-admin .detail-grid { margin-top: 12px; }
.cci-admin .detail-grid > div { padding: 14px 0; border-bottom-color: var(--cci-border); }
.cci-admin .detail-grid .k { color: var(--cci-muted); }
.cci-admin .detail-grid .v { color: var(--cci-ink); }
.cci-admin .detail-grid .detail-section-title { padding-top: 24px; color: var(--cci-primary); border-bottom-color: var(--cci-primary-border); }

.cci-admin .alert {
  border: 1px solid transparent;
  border-radius: var(--cci-radius-md);
  padding: 13px 16px;
  box-shadow: none;
}
.cci-admin .alert-success { color: var(--cci-success); background: var(--cci-success-soft); border-color: #cdebd8; }
.cci-admin .alert-warning { color: var(--cci-warning); background: var(--cci-warning-soft); border-color: #f0dfac; }
.cci-admin .alert-danger { color: var(--cci-danger); background: var(--cci-danger-soft); border-color: #f2caca; }

.cci-admin .danger-zone { border-color: #f1caca !important; background: #fffafa; }
.cci-admin .pagination { gap: 14px; }
.cci-admin .pagination a { color: var(--cci-primary); }

.cci-admin .cci-section-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-md);
  background: #fff;
  box-shadow: var(--cci-shadow-sm);
}

.cci-admin .cci-section-tabs a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--cci-radius-sm);
  color: var(--cci-muted);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.cci-admin .cci-section-tabs a:hover {
  color: var(--cci-primary);
  background: var(--cci-primary-soft);
}

.cci-admin .cci-section-tabs a.active {
  color: #fff;
  background: var(--cci-primary);
}

.cci-admin .cci-empty-cell {
  padding: 32px 18px !important;
  color: var(--cci-muted);
  text-align: center;
}

.cci-admin .detail-heading {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}

.cci-admin .detail-heading h1 { margin-top: 3px; }
.cci-admin .signature-block { margin-top: 24px; }
.cci-admin .signature-block .lead { margin-bottom: 8px; }
.cci-admin .decision-card { margin-top: 20px; }
.cci-admin .decision-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Dialogues Bootstrap : mouvement court, lisible et limité au compositing. */
.cci-admin .modal.fade {
  transition: opacity var(--cci-dialog-close-duration) ease-out;
}

.cci-admin .modal.fade.show {
  transition-duration: var(--cci-dialog-open-duration);
}

.cci-admin .modal.fade .modal-dialog {
  transform: translateY(8px) scale(.98);
  transition: transform var(--cci-dialog-close-duration) ease-out;
}

.cci-admin .modal.show .modal-dialog {
  transform: translateY(0) scale(1);
  transition-duration: var(--cci-dialog-open-duration);
}

.cci-admin .modal-content {
  overflow: hidden;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-lg);
  box-shadow: var(--cci-shadow-md);
}

.cci-admin .modal-header,
.cci-admin .modal-footer {
  border-color: var(--cci-border);
}

.cci-admin .modal-backdrop.fade {
  transition: opacity var(--cci-dialog-close-duration) ease-out;
}

.cci-admin-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cci-admin-menu-button { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--cci-border); border-radius: 10px; color: var(--cci-ink); background: #fff; cursor: pointer; }
.cci-admin-menu-icon,
.cci-admin-menu-icon::before,
.cci-admin-menu-icon::after { display: block; width: 18px; height: 2px; border-radius: 99px; background: currentColor; content: ""; }
.cci-admin-menu-icon::before { transform: translateY(-6px); }
.cci-admin-menu-icon::after { transform: translateY(4px); }
.cci-admin-overlay { display: none; }

@media (max-width: 1050px) {
  .cci-admin .stat-filters { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}

@media (max-width: 860px) {
  .cci-admin-shell { display: block; }
  .cci-admin-sidebar { position: fixed; left: 0; transform: translateX(-105%); transition: transform .2s ease; }
  .cci-admin-menu-button { display: grid; flex: 0 0 40px; margin-right: 12px; }
  .cci-admin-topbar { justify-content: flex-start; min-height: 72px; }
  .cci-admin-topbar-meta { margin-left: auto; }
  .cci-admin-nav-toggle:checked ~ .cci-admin-sidebar { transform: translateX(0); }
  .cci-admin-nav-toggle:checked ~ .cci-admin-overlay { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(10, 21, 81, .44); backdrop-filter: blur(2px); }
}

@media (max-width: 620px) {
  .cci-admin-content { padding: 20px 14px 36px; }
  .cci-admin-topbar { padding: 12px 14px; }
  .cci-admin-user-name { display: none; }
  .cci-admin .cci-stat-grid { grid-template-columns: 1fr; gap: 10px; }
  .cci-admin .cci-section-heading { align-items: flex-start; }
  .cci-admin .stat-filters { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cci-admin .stat-filter { min-height: 96px; padding: 15px; }
  .cci-admin .card { padding: 20px; }
  .cci-admin .detail-grid { grid-template-columns: 1fr; }
  .cci-admin .detail-grid .detail-section-title { grid-column: 1; }
  .cci-admin .detail-grid .k { padding-bottom: 2px; border-bottom: 0; }
  .cci-admin .detail-grid .v { padding-top: 2px; }
  .cci-admin .detail-heading { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .cci-admin *,
  .cci-admin *::before,
  .cci-admin *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}



/* ════════════════════════════════════════════════════════════════════════ */
/*  6. Composants communs aux deux côtés
 */
/* ════════════════════════════════════════════════════════════════════════ */

/* ── Contenu réservé aux lecteurs d'écran ─────────────────────────────────── */
/* Un libellé indispensable à la compréhension mais redondant à l'écran — celui
   d'un champ de recherche déjà identifié par sa loupe, par exemple. */

.cci-visually-hidden {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

/* ── Largeur de page ──────────────────────────────────────────────────────── */
/* Même gouttière et même largeur maximale que l'en-tête commun : sans cela le
   contenu ne s'aligne pas sur le logo, ce qui se voit tout de suite. Un outil
   qui a besoin d'une colonne plus étroite pose --cci-page-width, plutôt que de
   redéfinir la règle de son côté.
   `page-wrap` reste pris en charge : c'est le nom utilisé par les formulaires
   d'Absences, de Véhicules et de Télétravail. */

.cci-page {
  width: min(100% - 32px, var(--cci-page-width, 1240px));
  margin: 0 auto;
  padding: 28px 0 56px;
}

/* ── Messages ─────────────────────────────────────────────────────────────── */

.cci-alerts {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.cci-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--cci-primary-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-primary-soft);
  color: var(--cci-ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.cci-alert-success { border-color: #b7e3c6; background: var(--cci-success-soft); color: var(--cci-success); }
.cci-alert-warning { border-color: #f0dca8; background: var(--cci-warning-soft); color: var(--cci-warning); }
.cci-alert-danger { border-color: #f3c4c4; background: var(--cci-danger-soft); color: var(--cci-danger); }

.cci-alert-text { flex: 1; min-width: 0; }

.cci-alert-close {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  opacity: .6;
  cursor: pointer;
}

.cci-alert-close:hover { opacity: 1; }

/* ── Badges ───────────────────────────────────────────────────────────────── */

.cci-badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--cci-radius-pill);
  background: var(--cci-primary-soft);
  color: var(--cci-primary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.cci-badge-neutral { background: var(--cci-canvas); color: var(--cci-muted); }
.cci-badge-success { background: var(--cci-success-soft); color: var(--cci-success); }
.cci-badge-warning { background: var(--cci-warning-soft); color: var(--cci-warning); }
.cci-badge-danger { background: var(--cci-danger-soft); color: var(--cci-danger); }

/* ── Barre d'outils ───────────────────────────────────────────────────────── */

.cci-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cci-toolbar > .cci-toolbar-actions:only-child { margin-left: auto; }

.cci-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Bouton compact, pour les barres d'outils denses. */
.cci-btn-sm {
  padding: 7px 14px;
  font-size: 13px;
}

/* Bouton réduit à son icône : une action secondaire répétée sur chaque ligne
   d'un tableau, où un libellé alourdirait la lecture. Le titre accessible
   reste obligatoire. */
.cci-icon-btn {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-sm);
  background: var(--cci-surface);
  color: var(--cci-muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.cci-icon-btn:hover { border-color: var(--cci-primary-border); color: var(--cci-primary); }
.cci-icon-btn.is-danger:hover { border-color: #f3c4c4; color: var(--cci-danger); }
.cci-icon-btn svg { width: 17px; height: 17px; fill: currentColor; }

/* ── Sélecteur segmenté ───────────────────────────────────────────────────── */
/* Deux ou trois vues d'une même donnée. Ce n'est pas une navigation : la page
   ne change pas, seul l'angle de lecture change. */

.cci-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--cci-radius-sm);
  background: var(--cci-primary-soft);
}

.cci-segmented-option {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cci-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  /* Le soulignement manquait. Rendues en `a`, ces options héritaient du souligné
     des liens : un groupe de trois filtres se lisait comme trois liens dans une
     phrase, au lieu d'un interrupteur à trois positions. */
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.cci-segmented-option svg { width: 15px; height: 15px; fill: currentColor; }

/* Variante « champ » : l'option porte une case masquée et appartient au
   formulaire de filtrage, au lieu d'être un lien qui navigue.

   La règle d'emploi, écrite dans le design system : un groupe segmenté posé à
   côté d'un formulaire de filtres **en fait partie** — sinon il se comporte
   autrement que ses voisins, et la même page filtre de deux façons. Seul sur son
   écran, il reste une navigation, et l'adresse garde alors sa valeur. */
.cci-segmented-option input {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

/* Survol : un aplat plus clair que l'option retenue. Il annonce le geste sans
   se faire passer pour l'état actif, qui lui est posé sur `--cci-surface`. */
.cci-segmented-option:hover:not([aria-pressed="true"]) {
  background: rgba(255, 255, 255, .55);
  color: var(--cci-primary);
}

.cci-segmented-option[aria-pressed="true"] {
  background: var(--cci-surface);
  color: var(--cci-primary);
  box-shadow: 0 1px 3px rgba(10, 21, 81, .12);
}

/* Écrite à part, et non ajoutée à la liste ci-dessus : un navigateur qui ignore
   `:has()` jetterait le sélecteur entier, et les six outils dont les onglets
   sont des liens perdraient leur état actif. Le sélecteur est descendant pour
   l'emporter sur la règle de survol, dont le `:not()` pèse plus lourd. */
.cci-segmented .cci-segmented-option:has(input:checked) {
  background: var(--cci-surface);
  color: var(--cci-primary);
  box-shadow: 0 1px 3px rgba(10, 21, 81, .12);
}

/* La case étant masquée, le focus clavier n'a plus rien à entourer : il se
   reporte sur l'étiquette. Sans cela, parcourir les options au clavier ne se
   verrait pas du tout. */
.cci-segmented-option:has(input:focus-visible) {
  outline: 2px solid var(--cci-primary);
  outline-offset: 2px;
}

/* ── Menu d'actions ───────────────────────────────────────────────────────── */
/* Sur <details> : le navigateur gère l'ouverture, la fermeture et le clavier.
   Utile quand plusieurs variantes d'une même action encombreraient la barre
   d'outils — quatre formats d'export, par exemple. Au-delà de cinq entrées,
   c'est une page qu'il faut, pas un menu. */

.cci-menu { position: relative; }

.cci-menu > summary {
  list-style: none;
  cursor: pointer;
}

.cci-menu > summary::-webkit-details-marker { display: none; }
.cci-menu > summary::after { content: " ▾"; }

.cci-menu-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  min-width: 260px;
  padding: 6px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-surface);
  box-shadow: 0 12px 32px rgba(10, 21, 81, .16);
}

.cci-menu-panel button,
.cci-menu-panel a {
  padding: 9px 12px;
  border: 0;
  border-radius: var(--cci-radius-sm);
  background: none;
  color: var(--cci-ink-soft);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.cci-menu-panel button:hover,
.cci-menu-panel a:hover { background: var(--cci-primary-soft); color: var(--cci-primary); }

/* Un formulaire ne sert qu'à porter le jeton anti-rejeu d'une action
   destructrice : il ne doit pas former de colonne à lui seul dans la grille. */
.cci-menu-panel form { display: grid; }

/* Action destructrice : toujours en rouge, toujours en dernier. */
.cci-menu-panel .is-danger { color: var(--cci-danger); }
.cci-menu-panel .is-danger:hover { background: var(--cci-danger-soft); color: var(--cci-danger); }

/* Menu réduit à trois points, pour les actions d'une ligne de tableau.
   Aligner cinq actions de même poids ne disait plus laquelle comptait ; les
   deux qui modifient ou détruisent se rangent ici, les autres restent en
   clair. Le déclencheur porte `cci-icon-btn` et doit garder un nom
   accessible, faute de libellé visible. */
.cci-menu-dots > summary::after { content: none; }
.cci-menu-dots > summary { display: inline-grid; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
/* Trois apparences coexistaient : deux liens nus avec des flèches, des boutons
   secondaires, et nulle part le moyen d'atteindre une page précise. Sur une
   liste de plusieurs centaines de lignes, avancer de page en page est le seul
   chemin offert — c'est long, et on ne sait jamais où l'on est.

   Les numéros donnent la position et l'accès direct ; les deux extrémités
   restent des actions nommées, plus larges que les chiffres, parce qu'elles
   sont ce qu'on clique le plus. */

.cci-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-top: 1px solid var(--cci-border);
}

.cci-pagination-count { color: var(--cci-muted); font-size: 13px; }

/* Combien de lignes à la fois. Parcourir cent noms d'un coup vaut mieux que
   quatre allers-retours ; l'inverse est vrai sur un téléphone. Des liens et
   non un menu déroulant : sans script, et l'adresse reste partageable. */
.cci-pagination-size {
  display: flex;
  gap: 2px;
  align-items: center;
  color: var(--cci-muted);
  font-size: 13px;
}

.cci-pagination-size-label { margin-right: 6px; }

.cci-pagination-size a,
.cci-pagination-size span[aria-current] {
  padding: 4px 8px;
  border-radius: var(--cci-radius-sm);
  color: var(--cci-muted);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.cci-pagination-size a:hover { background: var(--cci-primary-soft); color: var(--cci-primary); }
.cci-pagination-size a:focus-visible { outline: 2px solid var(--cci-primary); outline-offset: 2px; }
.cci-pagination-size span[aria-current] { background: var(--cci-primary-soft); color: var(--cci-primary); }

.cci-pagination-pages,
.cci-pagination-steps {
  display: flex;
  gap: 4px;
  align-items: center;
}

.cci-pagination-steps { gap: 8px; }

.cci-pagination-pages a,
.cci-pagination-pages span {
  display: inline-grid;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--cci-radius-sm);
  color: var(--cci-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.cci-pagination-pages a:hover {
  border-color: var(--cci-primary-border);
  background: var(--cci-primary-soft);
  color: var(--cci-primary);
}

.cci-pagination-pages a:focus-visible {
  outline: 2px solid var(--cci-primary);
  outline-offset: 2px;
}

/* La page courante n'est pas un lien : elle se désigne, elle ne se clique pas. */
.cci-pagination-pages [aria-current="page"] {
  border-color: var(--cci-primary);
  background: var(--cci-primary);
  color: #fff;
}

/* Coupure entre deux séries de numéros : ni cliquable, ni survolable. */
.cci-pagination-gap { color: var(--cci-subtle); }

/* Les deux extrémités : nommées, et non réduites à une flèche. Une flèche
   seule oblige à deviner de quel côté on va. */
.cci-pagination-step {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-pill);
  background: var(--cci-surface);
  color: var(--cci-ink-soft);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.cci-pagination-step:hover { border-color: var(--cci-primary-border); color: var(--cci-primary); }
.cci-pagination-step:focus-visible { outline: 2px solid var(--cci-primary); outline-offset: 2px; }
.cci-pagination-step svg { width: 15px; height: 15px; fill: currentColor; }

/* Extrémité atteinte : le bouton reste en place pour que la barre ne se
   déforme pas d'une page à l'autre, mais il ne réagit plus. */
.cci-pagination-step.is-disabled {
  border-color: var(--cci-border);
  color: var(--cci-subtle);
  pointer-events: none;
}

@media (max-width: 720px) {
  .cci-pagination { justify-content: center; padding: 14px 18px; }
  .cci-pagination-count { width: 100%; text-align: center; }
  /* Sur un écran étroit, les numéros passeraient sur deux lignes : seules les
     deux extrémités restent, avec la position en toutes lettres au-dessus. */
  .cci-pagination-pages { display: none; }
  .cci-pagination-size { width: 100%; justify-content: center; }
}

/* ── Champ de recherche ───────────────────────────────────────────────────── */

.cci-search { position: relative; display: inline-flex; align-items: center; }

.cci-search svg {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  fill: var(--cci-subtle);
  pointer-events: none;
}

.cci-search input {
  width: 240px;
  max-width: 100%;
  min-height: 38px;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-sm);
  background: var(--cci-surface);
  color: var(--cci-ink);
  font: inherit;
  font-size: 14px;
}

.cci-search input:focus {
  border-color: var(--cci-primary);
  outline: 2px solid var(--cci-primary-soft);
  outline-offset: 0;
}

/* ── Boîte de dialogue ────────────────────────────────────────────────────── */
/* Sur <dialog>, ce qui donne gratuitement le fond assombri, la fermeture par
   Échap et le piège de focus — trois choses qu'une modale maison rate presque
   toujours. Ouverture et fermeture : cci-components.js. */

.cci-modal {
  width: min(100% - 32px, 640px);
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 0;
  border-radius: var(--cci-radius-lg);
  background: var(--cci-surface);
  color: var(--cci-ink);
  box-shadow: 0 24px 64px rgba(10, 21, 81, .22);
}

.cci-modal-lg { width: min(100% - 32px, 860px); }
.cci-modal::backdrop { background: rgba(10, 21, 81, .45); }

.cci-modal-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--cci-border);
}

.cci-modal-header h2 { margin: 0; font-size: 17px; font-weight: 700; }
.cci-modal-header p { margin: 4px 0 0; color: var(--cci-muted); font-size: 13px; }
.cci-modal-title { flex: 1; min-width: 0; }

.cci-modal-close {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: var(--cci-radius-sm);
  background: var(--cci-canvas);
  color: var(--cci-muted);
  cursor: pointer;
}

.cci-modal-close:hover { background: var(--cci-primary-soft); color: var(--cci-primary); }
.cci-modal-close svg { width: 15px; height: 15px; fill: currentColor; }

.cci-modal-body {
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  padding: 20px 24px;
}

.cci-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--cci-border);
}

/* ── Cartes ───────────────────────────────────────────────────────────────── */

.cci-card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.cci-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-lg);
  background: var(--cci-surface);
  box-shadow: var(--cci-shadow-sm);
  color: inherit;
  text-decoration: none;
}

a.cci-card { transition: border-color .15s ease, transform .15s ease; }
a.cci-card:hover { border-color: var(--cci-primary-border); transform: translateY(-2px); }

.cci-card h3 { margin: 0; font-size: 16px; font-weight: 700; }
.cci-card p { margin: 0; color: var(--cci-muted); font-size: 13px; line-height: 1.5; }

/* ── État vide ────────────────────────────────────────────────────────────── */
/* Une liste vide doit dire pourquoi elle l'est et ce qu'il faut faire ensuite,
   sinon l'utilisateur croit à une panne. */

.cci-empty {
  padding: 40px 24px;
  border: 1px dashed var(--cci-border);
  border-radius: var(--cci-radius-lg);
  color: var(--cci-muted);
  text-align: center;
}

.cci-empty strong { display: block; margin-bottom: 6px; color: var(--cci-ink); font-size: 15px; }
.cci-empty p { margin: 0; font-size: 13px; }

/* ── Fil d'Ariane ─────────────────────────────────────────────────────────── */

.cci-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 6px;
  padding: 0;
  color: var(--cci-subtle);
  font-size: 13px;
  list-style: none;
}

.cci-breadcrumb li + li::before { margin-right: 8px; content: "›"; }
.cci-breadcrumb a { color: var(--cci-muted); text-decoration: none; }
.cci-breadcrumb a:hover { color: var(--cci-primary); text-decoration: underline; }

/* ── Compteurs ────────────────────────────────────────────────────────────── */

.cci-stat-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 22px;
}

.cci-stat {
  padding: 18px 20px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-lg);
  background: var(--cci-surface);
  box-shadow: var(--cci-shadow-sm);
}

.cci-stat-value { color: var(--cci-ink); font-size: 26px; font-weight: 700; line-height: 1.1; }
.cci-stat-label { margin-top: 4px; color: var(--cci-muted); font-size: 13px; }

@media (max-width: 720px) {
  .cci-toolbar { align-items: stretch; }
  .cci-toolbar-actions { width: 100%; }
  .cci-search input { width: 100%; }
  .cci-modal-body { max-height: calc(100vh - 200px); }
  .cci-btn-sm { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  a.cci-card,
  .cci-segmented-option,
  .cci-icon-btn { transition-duration: .01ms !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Formulaires métier — socle partagé
   Voir docs/FORM_UI_HARMONIZATION.md pour les règles d'usage.
   ───────────────────────────────────────────────────────────────────────── */

.cci-form-page {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

/* Chaque outil enveloppe son contenu dans un conteneur de largeur différente :
   720 px pour Absences et Véhicules, 1180 px pour Télétravail. Un formulaire
   s'y retrouvait contraint deux fois, à des valeurs qui ne concordaient pas, et
   les pages ne pouvaient pas se ressembler malgré des composants identiques.
   Une page de formulaire porte donc sa propre largeur, et neutralise celle de
   son hôte. Les autres pages de chaque outil ne sont pas affectées. */
.page-wrap:has(> .cci-form-page),
.telework-main:has(> .cci-form-page) {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* Introduction : titre, explication courte, puis mention des champs
   obligatoires. Aucun astérisque sur les libellés : la règle est énoncée
   une fois ici, et seuls les champs facultatifs sont signalés. */
.cci-form-intro { margin-bottom: 24px; }

.cci-form-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cci-primary);
}

.cci-form-intro h1 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.25;
  color: var(--cci-ink);
}

/* Un même bloc sert de titre de page et de titre de section — « Mois déjà
   remis », sous le formulaire de dépôt. Sans règle propre, le `h2` retombait
   sur la taille du navigateur, à deux pixels du titre de la page : deux
   niveaux de lecture qui se disputaient le premier rang. */
.cci-form-intro h2 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--cci-ink);
}

.cci-form-intro p {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cci-ink-soft);
}

.cci-form-required-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cci-muted);
}

/* Circuit en trois étapes, affiché seulement quand le parcours le justifie. */
.cci-form-steps {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(3, 1fr);
  counter-reset: cci-step;
}

.cci-form-steps li {
  position: relative;
  padding: 14px 16px 14px 44px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-surface);
  font-size: 13px;
  line-height: 1.45;
  color: var(--cci-ink-soft);
  counter-increment: cci-step;
}

.cci-form-steps li::before {
  content: counter(cci-step);
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: var(--cci-radius-pill);
  background: var(--cci-primary-soft);
  color: var(--cci-primary);
  font-size: 12px;
  font-weight: 700;
}

.cci-form-card {
  padding: 28px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-lg);
  background: var(--cci-surface);
  box-shadow: var(--cci-shadow-sm);
}

/* Sections : titre et séparateur, sans numérotation — les numéros restent
   réservés aux étapes d'un circuit. */
.cci-form-section { border: 0; margin: 0; padding: 0; }

/* Le séparateur porte sur la légende et non sur le fieldset : un padding-top
   appliqué à un fieldset se place SOUS sa légende, pas au-dessus, ce qui
   creusait un écart de 44 px entre le titre de section et ses champs au lieu
   des 16 attendus. */
.cci-form-section + .cci-form-section { margin-top: 28px; }

.cci-form-section + .cci-form-section > legend,
.cci-form-section + .cci-form-section > h2 {
  padding-top: 28px;
  border-top: 1px solid var(--cci-border);
}

.cci-form-section > h2,
.cci-form-section > legend {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--cci-ink);
}

.cci-form-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cci-field { display: flex; flex-direction: column; min-width: 0; }

/* Un champ ne dépend pas forcément d'une grille : les formulaires courts le
   posent souvent directement dans une carte. Le même rythme de 20 px évite
   alors que le libellé suivant paraisse appartenir au contrôle précédent. */
.cci-form-card > .cci-field + .cci-field,
.cci-form-section > .cci-field + .cci-field,
.cci-form-section > .cci-form-grid + .cci-field,
.cci-form-section > .cci-field + .cci-form-grid { margin-top: 20px; }

/* Plusieurs cases dans un même champ : elles forment une liste, et une liste
   se lit mal sans respiration. */
.cci-field > .cci-checkbox + .cci-checkbox,
.cci-field > .cci-radio + .cci-radio { margin-top: 10px; }

/* Une aide ou une erreur qui suit une case reste rattachée à elle. */
.cci-checkbox + .cci-hint,
.cci-radio + .cci-hint { margin-top: 6px; }
.cci-field-full { grid-column: 1 / -1; }

/* Flex plutôt qu'inline : dans une colonne étroite, « (facultatif) » passe à la
   ligne, et une marge gauche laissait alors un décalage disgracieux en début de
   ligne. L'espacement est ici porté par column-gap, qui disparaît au retour à
   la ligne. */
.cci-label,
.cci-field > label:not(.cci-checkbox):not(.cci-radio):not(.cci-choix) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cci-ink);
}

.cci-optional,
.cci-field > label:not(.cci-checkbox):not(.cci-radio):not(.cci-choix) > small {
  font-weight: 400;
  color: var(--cci-muted);
  white-space: nowrap;
}

.cci-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cci-muted);
}

/* Tous les contrôles qui saisissent une valeur textuelle ou temporelle sont
   énumérés ici. `month`, `password` puis `search` ont chacun révélé le même
   défaut à des moments différents : omis, le contrôle retombait sur
   l'habillage carré du navigateur au milieu de champs arrondis. Les types qui
   ont une forme propre (`file`, `color`, `range`, cases et radios) sont traités
   séparément plus bas. */
.cci-field input:not([type]),
.cci-field input[type="text"],
.cci-field input[type="search"],
.cci-field input[type="email"],
.cci-field input[type="password"],
.cci-field input[type="date"],
.cci-field input[type="datetime-local"],
.cci-field input[type="month"],
.cci-field input[type="week"],
.cci-field input[type="number"],
.cci-field input[type="tel"],
.cci-field input[type="time"],
.cci-field input[type="url"],
.cci-field select,
.cci-field textarea {
  /* Sans cela, les champs héritent de box-sizing: content-box et leur
     rembourrage s'ajoute aux 100 % de largeur : ils débordaient de 26 px hors
     de leur colonne, mangeaient l'espacement de la grille et venaient toucher
     les bords de la carte. */
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-sm);
  background: var(--cci-surface);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cci-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
  .cci-field input:not(:disabled):not(:focus):hover,
  .cci-field select:not(:disabled):not(:focus):hover,
  .cci-field textarea:not(:disabled):not(:focus):hover {
    border-color: var(--cci-primary-border);
  }
}

.cci-field textarea { resize: vertical; min-height: 84px; }

/* Sélecteur de couleur : même cadre et même hauteur que les autres champs,
   avec la pastille native conservée pour que le choix reste familier. */
.cci-field input[type="color"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-sm);
  background: var(--cci-surface);
  cursor: pointer;
}

.cci-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cci-field input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: calc(var(--cci-radius-sm) - 3px);
}

.cci-field input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: calc(var(--cci-radius-sm) - 3px);
}

/* Le curseur conserve le contrôle natif, mais prend le rythme et la couleur
   du socle. Sa zone interactive fait au moins 44 px de haut. */
.cci-field input[type="range"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--cci-primary);
  cursor: pointer;
}

.cci-field input:focus,
.cci-field select:focus,
.cci-field textarea:focus {
  outline: none;
  border-color: var(--cci-primary);
  box-shadow: 0 0 0 3px var(--cci-primary-soft);
}

/* Le champ de fichier ne se met pas en forme comme les autres : son bouton
   « Parcourir… » appartient au navigateur, et aucune propriété posée sur
   l'`input` ne l'atteint. Faute de le traiter, quatre écrans affichaient le
   contrôle brut — dépôt du justificatif de transport, arrêt de travail, pièce
   jointe d'une absence, import d'un référentiel — au milieu de champs
   habillés.
   `::file-selector-button` est la seule prise sur ce bouton. Le trait
   discontinu dit ce que le champ attend : quelque chose à déposer, et non un
   texte à saisir. */
.cci-field input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  padding: 9px 12px;
  border: 1px dashed var(--cci-border);
  border-radius: var(--cci-radius-sm);
  background: var(--cci-canvas);
  font: inherit;
  font-size: 14px;
  color: var(--cci-ink-soft);
  cursor: pointer;
}

.cci-field input[type="file"]:hover { border-color: var(--cci-primary-border); }

.cci-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-sm);
  background: var(--cci-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--cci-ink);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.cci-field input[type="file"]::file-selector-button:hover {
  border-color: var(--cci-primary);
  background: var(--cci-primary-soft);
  color: var(--cci-primary);
}

/* Champ prérempli par l'identité du portail : lisible, non modifiable. */
.cci-field input[readonly],
.cci-field textarea[readonly] {
  background: var(--cci-canvas);
  color: var(--cci-ink-soft);
  cursor: default;
}

.cci-field input:disabled,
.cci-field select:disabled,
.cci-field textarea:disabled {
  background: var(--cci-canvas);
  color: var(--cci-subtle);
  cursor: not-allowed;
}

.cci-field input[aria-invalid="true"],
.cci-field select[aria-invalid="true"],
.cci-field textarea[aria-invalid="true"] {
  border-color: var(--cci-danger);
}

.cci-field-error {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cci-danger);
}

/* ── Cases à cocher et boutons radio ──────────────────────────────────────── */

/*
 * Le contrôle natif est laissé tel quel par les navigateurs : petit, gris, et
 * différent sur chaque système. Il est redessiné ici, une fois, pour les dix
 * outils — la page de décision d'Absences allait jusqu'à corriger sa taille
 * avec un `style="width:auto"` en ligne.
 *
 * `appearance: none` retire le dessin du système ; la coche est une image SVG
 * de fond, les pseudo-éléments n'étant pas rendus de façon fiable sur un champ.
 * Le point du bouton radio est une ombre interne, qui suit la couleur.
 *
 * `.cci-admin-nav-toggle` est exclu : c'est une case détournée en interrupteur
 * de menu, cachée hors de l'écran, qui ne doit rien afficher.
 */

input[type="checkbox"]:not(.cci-admin-nav-toggle),
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--cci-border);
  background-color: var(--cci-surface);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

input[type="checkbox"]:not(.cci-admin-nav-toggle) { border-radius: 6px; }
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:not(.cci-admin-nav-toggle):hover,
input[type="radio"]:hover { border-color: var(--cci-primary); }

input[type="checkbox"]:not(.cci-admin-nav-toggle):checked,
input[type="radio"]:checked {
  border-color: var(--cci-primary);
  background-color: var(--cci-primary);
}

/* La coche est tracée en blanc, dans le carré déjà bleu. */
input[type="checkbox"]:not(.cci-admin-nav-toggle):checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
  background-size: 14px 14px;
}

/* Le point du radio : un anneau blanc en ombre interne, plutôt qu'une seconde
   forme à positionner. */
input[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--cci-surface); }

input[type="checkbox"]:not(.cci-admin-nav-toggle):focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--cci-primary);
  outline-offset: 2px;
}

input[type="checkbox"]:not(.cci-admin-nav-toggle):disabled,
input[type="radio"]:disabled {
  border-color: var(--cci-border);
  background-color: var(--cci-canvas);
  cursor: not-allowed;
}

/* Le libellé fait partie de la cible : viser un carré de vingt pixels est
   pénible à la souris, et impossible au doigt. */
.cci-checkbox,
.cci-radio {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cci-ink-soft);
  cursor: pointer;
}

.cci-checkbox input,
.cci-radio input { margin-top: 1px; }

.cci-checkbox:hover,
.cci-radio:hover { color: var(--cci-ink); }

/* Variante en carte, pour un choix qui *est* la décision — accepter ou refuser
   une demande. La bordure suit la sélection, ce qu'un simple rond ne dit pas
   d'assez loin. */
.cci-choix {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-surface);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cci-ink-soft);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.cci-choix:hover { border-color: var(--cci-primary-border); background: var(--cci-canvas); }
.cci-choix:has(input:checked) { border-color: var(--cci-primary); background: var(--cci-primary-soft); }
.cci-choix strong { display: block; color: var(--cci-ink); }

.cci-choix-groupe {
  display: grid;
  gap: 10px;
  /* Une marge propre, sans dépendre du conteneur : ce groupe est posé aussi
     bien dans un `.cci-field` du socle que dans le `.field` local d'Absences. */
  margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Encarts d'information, d'alerte et de confirmation. */
.cci-note {
  padding: 12px 14px;
  border: 1px solid var(--cci-primary-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-primary-soft);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cci-ink-soft);
}

.cci-note-warning {
  border-color: #f0dca8;
  background: var(--cci-warning-soft);
  color: var(--cci-warning);
}

.cci-note-success {
  border-color: #b7e3c6;
  background: var(--cci-success-soft);
  color: var(--cci-success);
}

.cci-note p { margin: 0 0 8px; }
.cci-note p:last-child { margin: 0; }

/* Écran de confirmation après le dépôt d'une démarche : icône, titre, encart
   de statut puis actions. La structure est commune à tous les outils ; seuls
   les textes changent. */
.cci-confirmation {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  text-align: center;
}

.cci-confirmation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cci-success-soft);
  color: var(--cci-success);
  font-size: 26px;
  font-weight: 700;
}

.cci-confirmation h1 {
  margin: 18px 0 10px;
  font-size: 26px;
  line-height: 1.3;
  color: var(--cci-ink);
}

.cci-confirmation-lead {
  max-width: 480px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cci-ink-soft);
}

.cci-confirmation .cci-note {
  max-width: 480px;
  margin: 22px auto 0;
  text-align: left;
}

.cci-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

.cci-confirmation-close {
  margin-top: 26px;
  font-size: 13px;
  color: var(--cci-muted);
}

/* Résumé des erreurs, en tête du formulaire. Chaque ligne est un lien vers le
   champ concerné : sur un formulaire long, énumérer les manques sans permettre
   d'y aller oblige à les chercher un par un. Le bloc reçoit le focus au
   chargement, ce qui l'annonce aux lecteurs d'écran et place le clavier au bon
   endroit. */
.cci-error-summary {
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 2px solid var(--cci-danger);
  border-radius: var(--cci-radius-md);
  background: var(--cci-surface);
}

.cci-error-summary:focus-visible {
  outline: 2px solid var(--cci-danger);
  outline-offset: 2px;
}

.cci-error-summary h2 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--cci-danger);
}

.cci-error-summary p {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--cci-ink-soft);
}

.cci-error-summary ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
}

.cci-error-summary a {
  color: var(--cci-danger);
  font-weight: 600;
}

/* Champ resté vide au moment de l'envoi. Le résumé en tête dit quoi corriger
   et y conduit, ces marques confirment où l'on a atterri. La couleur ne porte
   jamais l'information à elle seule — un libellé « Champ obligatoire »
   l'accompagne, et `aria-invalid` la porte aux lecteurs d'écran. */
.cci-field-invalid > .cci-label { color: var(--cci-danger); }

.cci-field-invalid input,
.cci-field-invalid select,
.cci-field-invalid textarea,
.cci-field-invalid .cci-signature-pad {
  border-color: var(--cci-danger);
  background: var(--cci-danger-soft);
}

.cci-field-invalid input:focus,
.cci-field-invalid select:focus,
.cci-field-invalid textarea:focus {
  outline-color: var(--cci-danger);
  border-color: var(--cci-danger);
}

.cci-field-error {
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cci-danger);
}

.cci-field-error::before {
  content: "!";
  display: inline-grid;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: var(--cci-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* Mes démarches : la liste des demandes déposées par la personne connectée.
   Structure commune à tous les outils ; chaque outil fournit ses libellés et
   ramène ses statuts aux trois familles en_attente, validee et refusee. */
.cci-demarches { display: grid; gap: 14px; }

.cci-demarche {
  padding: 20px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-surface);
}

.cci-demarche-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.cci-demarche-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cci-muted);
}

.cci-demarche h2 {
  margin: 4px 0 0;
  font-size: 18px;
  color: var(--cci-ink);
}

.cci-demarche-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 14px 0 0;
}

.cci-demarche-meta div { min-width: 0; }

.cci-demarche-meta dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cci-subtle);
}

.cci-demarche-meta dd {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cci-ink);
}

.cci-demarche-comment {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--cci-radius-sm);
  background: var(--cci-canvas);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cci-ink-soft);
}

.cci-status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.cci-status-en_attente { background: var(--cci-warning-soft); color: var(--cci-warning); }
/* `acceptee` est le mot retenu le 5 août pour les quatre démarches. `validee`
   reste défini : les lignes déposées avant la migration le portent encore, et
   un badge sans style ne se voit pas — la pastille redevient simplement du
   texte gris. C'est d'ailleurs ce qui s'est produit entre la migration et
   aujourd'hui, sans que rien ne le signale : le vérificateur de classes ne
   peut pas suivre un nom construit à partir d'une variable. */
.cci-status-acceptee,
.cci-status-validee { background: var(--cci-success-soft); color: var(--cci-success); }
.cci-status-refusee { background: var(--cci-danger-soft); color: var(--cci-danger); }

.cci-demarches-empty {
  padding: 40px 24px;
  border: 1px dashed var(--cci-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-surface);
  text-align: center;
}

.cci-demarches-empty h2 { margin: 0; font-size: 19px; color: var(--cci-ink); }

.cci-demarches-empty p {
  margin: 8px auto 18px;
  max-width: 420px;
  font-size: 14px;
  color: var(--cci-ink-soft);
}

@media (max-width: 720px) {
  .cci-demarche-head { display: grid; }
  .cci-demarche-meta { grid-template-columns: minmax(0, 1fr); }
}

/* Bloc répétable : une occurrence d'une donnée qui peut exister en plusieurs
   exemplaires, comme les adresses d'un établissement. */
.cci-repeat-item {
  position: relative;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-canvas);
}

.cci-repeat-remove {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--cci-danger);
  text-decoration: underline;
  cursor: pointer;
}

.cci-repeat-remove[hidden] { display: none; }

/* Panneau révélé par une réponse conditionnelle. */
.cci-conditional {
  margin-top: 16px;
  padding: 16px;
  border: 1px dashed var(--cci-primary-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-canvas);
}

.cci-conditional[hidden] { display: none; }

/* Action principale alignée à droite sur ordinateur. */
.cci-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--cci-border);
}

.cci-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--cci-radius-pill);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.cci-btn-primary { background: var(--cci-primary); color: #fff; }
.cci-btn-primary:hover { background: var(--cci-primary-hover); }

.cci-btn-secondary {
  border-color: var(--cci-border);
  background: var(--cci-surface);
  color: var(--cci-ink);
}

.cci-btn-secondary:hover { border-color: var(--cci-primary-border); }

.cci-btn-danger { background: var(--cci-danger); color: #fff; }
.cci-btn-danger:hover { background: #8d1f1f; }

.cci-btn:focus-visible {
  outline: 2px solid var(--cci-primary);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .cci-form-page { padding: 24px 16px 48px; }
  .cci-form-card { padding: 20px; }
  .cci-form-grid { grid-template-columns: minmax(0, 1fr); }
  .cci-form-steps { grid-template-columns: minmax(0, 1fr); }

  /* Action principale en pleine largeur sur smartphone. */
  .cci-form-actions { flex-direction: column-reverse; align-items: stretch; }
  .cci-btn { width: 100%; }

  /* Cibles tactiles : au doigt, 44 px est le minimum confortable. Les boutons
     mesuraient 38 à 41 px. Les champs suivent, pour la même raison. */
  .cci-btn,
  .cci-tool-back,
  .cci-tool-admin-link {
    min-height: 44px;
  }

  .cci-field input,
  .cci-field select { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cci-field input,
  .cci-field select,
  .cci-field textarea,
  .cci-btn { transition-duration: .01ms !important; }
}

/* ── Retours après une action ─────────────────────────────────────────────── */

/*
 * Deux traitements, selon ce que le message coûte à manquer.
 *
 * Un succès confirme ce qui vient d'être fait : il s'efface seul au bout de
 * quelques secondes. Une erreur, elle, dit le plus souvent quoi corriger
 * — « Merci de signer avant de confirmer votre décision » — et reste jusqu'à
 * ce qu'on la ferme. Une erreur qui disparaît toute seule est une erreur qu'on
 * n'a pas lue.
 *
 * Les messages sont écrits par le serveur, jamais fabriqués en JavaScript :
 * ils restent lisibles si le script ne se charge pas. Le script n'ajoute que
 * la disparition automatique.
 */

.cci-toasts {
  position: fixed;
  /* En bas, et non en haut : l'en-tête d'outil mesure de 70 à 113 px selon la
     largeur — il passe sur deux lignes quand la navigation ne tient plus — et
     la barre du back-office a sa propre hauteur. Un message calé en haut les
     recouvrait, avec le compte et la déconnexion dessous. Aucune constante ne
     tient les deux coques à toutes les largeurs ; le bas n'a pas ce problème. */
  bottom: 16px;
  right: 16px;
  /* Au-dessus de la barre latérale du back-office (40) et de l'en-tête
     d'outil (30). Un <dialog> ouvert passe devant de toute façon : il vit
     dans la couche supérieure du navigateur, hors de portée du z-index. */
  z-index: 60;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  /* Le conteneur recouvre une zone où l'on doit pouvoir cliquer. Seuls les
     messages eux-mêmes interceptent le pointeur. */
  pointer-events: none;
}

.cci-toast {
  pointer-events: auto;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--cci-border);
  border-left: 3px solid var(--cci-success);
  border-radius: var(--cci-radius-md);
  background: var(--cci-surface);
  box-shadow: var(--cci-shadow-md);
  color: var(--cci-ink-soft);
  font-size: 14px;
  line-height: 1.5;
  animation: cci-toast-entree 220ms ease-out;
}

.cci-toast-text { flex: 1; min-width: 0; }

.cci-toast-close {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  opacity: .6;
  cursor: pointer;
}

.cci-toast-close:hover { opacity: 1; }

.cci-toast.is-leaving {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 200ms ease, transform 200ms ease;
}

@keyframes cci-toast-entree {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

/* ── Bouton en attente ────────────────────────────────────────────────────── */

/*
 * La décision d'une demande d'absence fabrique le PDF avant de rendre la main :
 * le clic attend réellement, et rien ne l'indiquait. Le bouton dit l'attente et
 * se désactive — ce qui interdit au passage le double envoi, autrement dit la
 * décision prise deux fois.
 */

button.is-busy,
.cci-btn.is-busy {
  cursor: progress;
  opacity: .8;
}

.cci-attente {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cci-attente-rotation .6s linear infinite;
}

@keyframes cci-attente-rotation {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Le déplacement disparaît, le tourniquet reste : c'est le seul mouvement
     dont l'information *est* le mouvement. Il tourne simplement plus lentement. */
  .cci-toast { animation: none; }
  .cci-toast.is-leaving { transition-duration: .01ms; transform: none; }
  .cci-attente { animation-duration: 1.4s; }
}

/* ── Barre de progression entre deux pages ────────────────────────────────── */

/*
 * Les pages sont fabriquées par le serveur : rien ne se charge une fois
 * arrivé. Ce qui se voit, c'est l'attente entre deux pages — un clic qui ne
 * produit rien pendant une seconde, et l'on reclique.
 *
 * La barre vise 90 % sans jamais l'atteindre : la navigation détruit la page,
 * donc la barre. Promettre une fin que l'on ne connaît pas serait pire que ne
 * rien promettre.
 */

/* Zone rafraîchie sans recharger la page — un filtre de tableau de bord.

   Le retour visuel ne disparaît pas, il change de place : au lieu de l'onglet du
   navigateur et de la barre en haut de page, c'est la liste elle-même qui
   s'estompe. Supprimer tout signal serait une régression : si le serveur met
   quatre cents millisecondes et que rien ne bouge, on reclique.

   Le délai de 150 ms est l'essentiel de la règle. En deçà, la réponse est déjà
   là et rien ne clignote ; au-delà, l'attente devient visible. Sans lui, chaque
   filtre produirait un battement gris désagréable. */
.cci-zone-attente {
  pointer-events: none;
  opacity: .5;
  transition: opacity .12s ease .15s;
}

/* Recherche à la frappe : la liste précédente reste lisible pendant l'échange.
   L'estompement convient à un clic sur un onglet, où tout le contenu change et
   où l'on attend quelque chose. En tapant, il fait exactement l'effet inverse
   de celui recherché — la page se met à clignoter à chaque lettre, et le
   filtrage semble lent alors qu'il ne l'est pas. */
.cci-zone-attente.cci-zone-frappe {
  pointer-events: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* L'estompement n'est pas un mouvement : il reste, sans transition. */
  .cci-zone-attente { transition: none; }
}

.cci-barre {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  height: 3px;
  width: 0;
  background: var(--cci-primary);
  border-radius: 0 var(--cci-radius-pill) var(--cci-radius-pill) 0;
  /* Lente puis presque immobile : l'accélération d'une barre qui ralentit se
     lit comme une progression, là où une vitesse constante donne l'impression
     d'un compte à rebours qui va se terminer. */
  transition: width 8s cubic-bezier(.1, .8, .2, 1);
}

.cci-barre.is-running { width: 90%; }

@media (prefers-reduced-motion: reduce) {
  /* Le mouvement porte ici l'information : il reste, sans la longue rampe. */
  .cci-barre { transition-duration: 1.5s; }
}

/* ── Pavé de signature ────────────────────────────────────────────────────── */

/*
 * Quatre démarches font signer : Absences, Véhicules, Congé spécial et le CET.
 * Le composant n'existait qu'en copies locales, dans le `style.css` de chaque
 * application — au point que `.cci-field-invalid .cci-signature-pad` plus haut
 * désignait une classe qu'aucune feuille ne définissait.
 *
 * `touch-action: none` sur la zone de dessin : sans lui, un doigt qui trace
 * fait défiler la page au lieu de signer, et c'est le geste le plus courant.
 */

.cci-signature-pad {
  padding: 10px;
  border: 1px dashed var(--cci-primary-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-canvas);
}

.cci-signature-pad canvas {
  display: block;
  width: 100%;
  height: 160px;
  border-radius: var(--cci-radius-sm);
  background: var(--cci-surface);
  touch-action: none;
  cursor: crosshair;
}

.cci-signature-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.cci-signature-actions button {
  padding: 7px 14px;
  border: 0;
  border-radius: var(--cci-radius-sm);
  background: var(--cci-primary-soft);
  color: var(--cci-ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cci-signature-actions button:hover { background: var(--cci-primary-border); }

/* ── Dépôt de fichier ─────────────────────────────────────────────────────── */

/*
 * Joindre une pièce se faisait de deux façons : une zone de glisser-déposer
 * dans Absences, écrite dans son `style.css` local, et le bouton brut du
 * navigateur dans Arrêts de travail — « Choisir un fichier / Aucun fichier
 * choisi », sans bordure ni arrondi, au milieu de champs qui en ont.
 *
 * Le composant vit ici, et son comportement dans cci-components.js. Aucune page
 * n'écrit de script : tout passe par des attributs.
 */

.cci-dropzone {
  position: relative;
  padding: 24px 16px;
  border: 2px dashed var(--cci-primary-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-canvas);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.cci-dropzone:hover,
.cci-dropzone.is-active {
  border-color: var(--cci-primary);
  background: var(--cci-primary-soft);
}

/* Le champ natif reste dans le flux pour rester focalisable au clavier, mais
   invisible : c'est la zone qui se voit et qui se clique. */
.cci-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cci-dropzone input[type="file"]:focus-visible + * {
  outline: 2px solid var(--cci-primary);
  outline-offset: 4px;
}

.cci-dropzone-invite p {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--cci-muted);
}

.cci-dropzone-invite strong { color: var(--cci-ink); }

.cci-dropzone-icone {
  display: block;
  margin-bottom: 8px;
  font-size: 26px;
}

.cci-dropzone-fichier {
  display: none;
  gap: 12px;
  align-items: center;
  text-align: left;
}

.cci-dropzone.has-file .cci-dropzone-fichier { display: flex; }
.cci-dropzone.has-file .cci-dropzone-invite { display: none; }
.cci-dropzone-fichier .cci-dropzone-icone { margin: 0; font-size: 22px; }

.cci-dropzone-infos {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cci-dropzone-nom {
  font-size: 14px;
  font-weight: 600;
  color: var(--cci-ink);
  word-break: break-all;
}

.cci-dropzone-taille { font-size: 12px; color: var(--cci-muted); }

.cci-dropzone-retirer {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--cci-border);
  border-radius: 50%;
  background: var(--cci-surface);
  color: var(--cci-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.cci-dropzone-retirer:hover {
  border-color: var(--cci-danger-soft);
  background: var(--cci-danger-soft);
  color: var(--cci-danger);
}

.cci-dropzone-erreur {
  display: none;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cci-danger);
}

.cci-dropzone-erreur.is-visible { display: block; }

.cci-field-invalid .cci-dropzone { border-color: var(--cci-danger); }