/* ===========================================================================
   Feuille de style unique — Boussole
   Reprend le design validé sur la maquette.
   Organisation : jetons · base · structure · composants · impression · mobile
   =========================================================================== */
/* ===========================================================================
   Jetons — thème clair unique, appliqué quel que soit le réglage du navigateur
   =========================================================================== */
:root {
  --fond:          #EEF2F1;
  --surface:       #FFFFFF;
  --surface-2:     #F6F8F8;
  --surface-3:     #E9EEEE;
  --encre:         #131C1B;
  --encre-2:       #55635F;
  /* Assombri : à #849490 le texte secondaire tombait à 3,2:1 sur blanc et
     2,8:1 sur le fond de page, sous le seuil RGAA de 4,5:1. Il tient
     maintenant 5,1 / 4,5 / 4,8 sur les trois fonds du site. */
  --encre-3:       #62716D;
  --trait:         #D6DEDC;
  /* Le contour d'un champ de saisie est un composant, pas un ornement : il lui
     faut 3:1 (WCAG 1.4.11). --trait, à 1,4:1, convient aux séparateurs mais
     pas aux champs. */
  --trait-champ:   #8A9794;
  --trait-fin:     #E6ECEA;

  --marque:        #0A5B54;
  --marque-vif:    #0D7A70;
  --marque-doux:   #E2EFED;

  --attention:     #9A6209;
  --attention-doux:#FBF1DF;
  --alerte:        #A8352B;
  /* Écarté du fond « attention » : les deux se confondaient (ΔE 9,1), ce qui
     rendait « à surveiller » et « en retard » difficiles à distinguer d'un
     coup d'œil. Désormais ΔE 13. */
  --alerte-doux:   #F6D9D6;
  --info:          #2B5D8F;
  /* Même raison face au vert de marque : ΔE 6,0 → 13,3. */
  --info-doux:     #C0DDFB;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r:     6px;
  --barre: 15rem;
  --gouttiere: clamp(1.1rem, 2vw, 4rem);
}

/* ===========================================================================
   Base
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Toute règle « display » d'un composant l'emporte sur le display:none que le
   navigateur applique à [hidden] : .fiche, .onglet, .jour-detail et les autres
   resteraient visibles alors qu'on les a masqués. On tranche une fois pour
   toutes plutôt que de retomber dans le piège à chaque nouveau composant. */
[hidden] { display: none !important; }

/* Toute la feuille est en rem : la taille de la racine commande l'échelle
   entière — textes, gouttières, largeur de la barre latérale. */
html { font-size: 17px; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

a { color: var(--marque); text-decoration: none; }
a:hover { text-decoration: underline; }
.lien, .lien:hover, .bouton, .bouton:hover, .marque, .marque:hover { text-decoration: none; }

:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.etiq {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-3); font-weight: 600;
}


/* ===========================================================================
   Structure générale
   =========================================================================== */
.app { display: grid; grid-template-columns: var(--barre) 1fr; min-height: 100vh; }

/* --- Barre latérale --- */
/* Le menu tient dans la hauteur de l'écran, sans défilement : une direction a
   dix-huit entrées, et devoir faire défiler pour atteindre « Paramétrage »
   revient à ne pas savoir qu'il existe.
  
   Les espaces sont donc resserrés — mais un premier essai les avait rendus
   trop justes : dix-huit lignes collées se lisent moins vite que seize
   espacées, et l'on gagnait de la place contre la lecture. Ils ont été
   rouverts d'un sixième. */
.laterale {
  background: var(--surface);
  border-right: 1px solid var(--trait);
  display: flex; flex-direction: column; gap: 1.3rem;
  padding: 1rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.marque { display: flex; align-items: center; gap: .6rem; padding: 0 .35rem; }
.marque__lien { display: flex; align-items: center; gap: .6rem; color: inherit; min-width: 0; }
.marque__lien:hover .marque__nom { color: var(--marque); }
.marque__sigle {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  background: var(--marque); border-radius: 50%;
}
.marque__sigle svg { width: 15px; height: 15px; }
.marque__nom { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; }
.marque__prov { font-size: .68rem; color: var(--encre-3); letter-spacing: .04em; }

.menu { display: flex; flex-direction: column; gap: .94rem; }
.menu__groupe { display: flex; flex-direction: column; gap: .1rem; }
.menu__titre { padding: 0 .35rem .19rem; }

.lien {
  display: flex; align-items: center; gap: .6rem;
  padding: .38rem .55rem; border-radius: var(--r);
  background: none; border: 0; width: 100%; text-align: left;
  color: var(--encre-2); font-size: .875rem; line-height: 1.35; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.lien svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.lien:hover { background: var(--surface-2); color: var(--encre); }
.lien[aria-current="page"] {
  background: var(--marque-doux); color: var(--marque); font-weight: 600;
}
.lien[aria-current="page"] svg { opacity: 1; }
.lien__pastille {
  margin-left: auto; font-family: var(--mono); font-size: .68rem; font-weight: 700;
  background: var(--attention-doux); color: var(--attention);
  padding: .05rem .34rem; border-radius: 20px;
}

.laterale__pied { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; }


/* --- Contenu --- */
.principal { display: flex; flex-direction: column; min-width: 0; }

.entete {
  background: var(--surface); border-bottom: 1px solid var(--trait);
  padding: .8rem var(--gouttiere);
  display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 20;
}
.entete__agence { display: flex; flex-direction: column; color: inherit; }
a.entete__agence:hover b { color: var(--marque); }
.entete__agence b { font-size: .95rem; font-weight: 650; }
.entete__agence span { font-size: .74rem; color: var(--encre-3); }

.recherche { margin-left: auto; position: relative; max-width: 17rem; width: 100%; }
.recherche input {
  width: 100%; padding: .42rem .7rem .42rem 2rem;
  font: inherit; font-size: .85rem;
  background: var(--surface-2); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--r);
}
.recherche svg {
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--encre-3);
}

.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--marque); color: #fff;
  font-size: .78rem; font-weight: 700;
}

.utilisateur { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.utilisateur--apres-vue { margin-left: .75rem; }
.utilisateur__nom { font-size: .86rem; font-weight: 600; }

.ouvrir-menu { display: none; }

/* --- Vues --- */
/* Le titre avait été monté d'un cran, et il l'avait été d'un cran de trop : collé
   sous la barre du haut, il se lisait comme sa continuation plutôt que comme le
   nom de la page. Il redescend de quoi se détacher, sans revenir à la ligne
   perdue d'avant. */
.vue { padding: 1.6rem var(--gouttiere) 3rem; display: none; flex-direction: column; gap: 1.5rem; max-width: 76rem; }
.vue.actif { display: flex; }

/* Titre à gauche, actions au centre de la page : trois colonnes dont les deux
   extrêmes sont égales, ce qui place la colonne du milieu au centre réel de
   l'écran quelle que soit la longueur du titre. Le minmax(0, …) est ce qui le
   garantit — sans lui, un titre long élargirait sa colonne et décalerait le
   centre. */
.vue__tete {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 1rem;
}
/* Les actions et le coin partagent une même ligne médiane : sans cela, un
   bouton plein et un bouton discret, alignés par le bas, ne se regardaient pas
   à la même hauteur.

   Le titre, lui, reste en haut. Centré, il descendait avec la hauteur de ce
   qui l'accompagne : sur le calendrier, dont le coin porte une navigation de
   mois sur deux rangées, il tombait soixante pixels plus bas que sur « Mes
   notes ». D'une page à l'autre le titre doit se retrouver au même endroit —
   c'est le repère qui dit qu'on a changé de page, pas qu'on a changé de site. */
.vue__titre { align-self: start; }
.vue__actions, .vue__coin { align-self: center; }
.vue__tete h1 { font-family: var(--serif); font-size: 1.55rem; line-height: 1.15; }
.vue__tete p { color: var(--encre-2); font-size: .9rem; margin-top: .15rem; }

/* ===========================================================================
   Composants
   =========================================================================== */
/* Hauteur commune à tous les contrôles — boutons, sélecteurs, champs de
   filtre. C'est elle qui les fait tenir ensemble sur une même ligne, et qui
   donne une cible franche à la souris comme au doigt. */
:root { --hauteur-controle: 2.3rem; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--hauteur-controle);
  padding: .4rem 1rem; font-size: .86rem; font-weight: 600;
  background: var(--marque); color: #fff;
  border: 1px solid var(--marque); border-radius: var(--r);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.bouton:hover { background: var(--marque-vif); border-color: var(--marque-vif); }
.bouton--sobre {
  background: var(--surface); color: var(--encre); border-color: var(--trait-champ);
}
.bouton--sobre:hover { background: var(--surface-2); border-color: var(--encre-3); }
/* Un bouton qui mène à la vue où l'on se trouve déjà : il reste un bouton, mais
   il se marque, faute de quoi on ne sait plus d'où l'on revient. */
.bouton--enfonce, .bouton--enfonce:hover {
  background: var(--marque-doux); border-color: var(--marque); color: var(--marque);
}
/* « min » reste plus compact, mais garde une hauteur cliquable. */
.bouton--min { padding: .2rem .7rem; font-size: .8rem; min-height: 1.9rem; }

/* ---------------------------------------------------------------------------
   Sélecteurs
   ---------------------------------------------------------------------------
   Ceux des en-têtes de page — le choix de l'exercice, du collaborateur —
   n'avaient aucun style : c'était le menu déroulant brut du navigateur, plus
   petit que tout ce qui l'entourait. Ils prennent la même hauteur et le même
   dessin que les boutons, avec un chevron tracé plutôt que celui du système,
   qui varie d'un navigateur à l'autre.
   --------------------------------------------------------------------------- */
select {
  -webkit-appearance: none; appearance: none;
  min-height: var(--hauteur-controle);
  padding: .35rem 2.1rem .35rem .7rem;
  font: inherit; font-size: .86rem;
  color: var(--encre); background-color: var(--surface);
  border: 1px solid var(--trait-champ); border-radius: var(--r);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355635F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  transition: border-color .12s ease, box-shadow .12s ease;
}
select:hover { border-color: var(--encre-3); }
select:focus-visible { border-color: var(--marque); }

/* Champs de saisie : même hauteur, pour qu'une ligne de filtres s'aligne. */
input[type="text"], input[type="date"], input[type="month"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"] {
  min-height: var(--hauteur-controle);
}

.carte {
  background: var(--surface); border: 1px solid var(--trait-fin);
  border-radius: var(--r); padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: .85rem;
}
.carte__tete { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.carte__tete h2 { font-size: .98rem; }

.grille { display: grid; gap: 1rem; }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
/* Rangée d'actions de l'accueil : le nombre de tuiles varie selon le rôle et
   ce qui attend. En « auto-fill », une tuile seule garde sa largeur normale
   au lieu de s'étirer sur toute la ligne. */
.grille--actions { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.grille--synthese { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
@media (min-width: 66rem) { .grille--synthese { grid-template-columns: repeat(3, 1fr); } }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.grille--21 { grid-template-columns: 1.6fr 1fr; }
/* L'inverse, quand la colonne étroite vient en premier : sur l'accueil, ce
   qu'il y a à traiter se lit avant le calendrier, qui garde la largeur dont
   ses sept colonnes ont besoin. */
.grille--12 { grid-template-columns: 1fr 1.6fr; }
@media (max-width: 60rem) { .grille--12 { grid-template-columns: 1fr; } }
/* Quand la colonne de droite ne fait qu'informer, elle s'arrête à son
   contenu au lieu d'être étirée à la hauteur du formulaire. */
.grille--haut { align-items: start; }
@media (max-width: 60rem) { .grille--21 { grid-template-columns: 1fr; } }

/* Le jour puis ce qui attend, dans une carte de la hauteur du calendrier.
   ---------------------------------------------------------------------------
   Le contenu est sorti du flux : la carte ne pèse alors plus rien dans le
   calcul de la rangée, dont la hauteur revient au seul calendrier, et
   l'étirement par défaut la lui donne. Sans cela une journée à quinze
   rendez-vous étirerait la rangée, et le calendrier avec elle — c'est
   précisément ce qu'on veut éviter.

   À l'intérieur, deux zones qui défilent chacune de leur côté. Le jour prend
   ce dont il a besoin sans dépasser la moitié de la carte : au-delà, ce qui
   attend par ailleurs disparaîtrait sous le pli les jours chargés. */
/* Un encart qui n'a qu'un chiffre à dire : le cadre se resserre autour de lui
   plutôt que de garder la hauteur d'une carte pleine. */
.carte--mince { padding: .8rem 1rem; gap: .35rem; }
.carte--mince .carte__tete h2 { font-size: .9rem; }
.carte-chiffre { display: flex; align-items: baseline; gap: .45rem; }

.carte--jour { position: relative; overflow: hidden; }
.jour-pile {
  position: absolute; inset: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: .85rem;
}

.jour-panneau--liste {
  border: 0; padding: 0; margin: 0;
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  max-height: 55%;
}
.jour-panneau--liste .jour__date {
  border-bottom: 1px solid var(--trait-fin); padding-bottom: .45rem; margin-bottom: .6rem;
}
.jour__note--compte { margin-bottom: .5rem; font-style: italic; }

/* Le titre qui ouvre la seconde moitié : même graisse que celui d'une carte,
   posé sur un trait pour qu'on voie où le jour s'arrête. */
.carte__tete--suite {
  flex: none; padding-top: .8rem; border-top: 1px solid var(--trait-fin);
}
.jour-attente { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Empilées, les deux cartes reprennent leur hauteur naturelle : rien ne les
   oblige plus à se ressembler, et une zone qui défile dans une page qui défile
   déjà se manipule mal. */
@media (max-width: 60rem) {
  .carte--jour { overflow: visible; }
  .jour-pile { position: static; }
  .jour-panneau--liste, .jour-attente { max-height: none; overflow: visible; }
  /* Plus rien ne défile ici : la phrase qui l'annonçait serait un mensonge. */
  .jour__note--compte { display: none; }
}
/* Passé 1700 px, la colonne de droite se dédouble au lieu de s'étirer :
   on gagne une colonne d'information plutôt qu'une colonne plus large. */
@media (min-width: 100rem) {
  /* Uniquement quand il y a une pile à déplier : sur Congés, les deux cartes
     restent côte à côte au lieu de laisser une colonne vide. */
  .vue--large .grille--21:has(> .pile) { grid-template-columns: 1.6fr 1fr 1fr; align-items: start; }
  .vue--large .grille--21:has(> .pile) > .pile { display: contents; }
}

/* --- Tuile chiffrée --- */
.tuile {
  background: var(--surface); border: 1px solid var(--trait-fin);
  border-radius: var(--r); padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .2rem;
  /* Une tuile sans pied centre son contenu plutôt que de le laisser en haut
     avec du vide dessous. Celles qui ont un pied ne bougent pas : sa marge
     automatique absorbe l'espace et neutralise ce centrage. */
  justify-content: center;
}

/* Deux natures de tuile, qui ne doivent pas se ressembler : celles qui
   mesurent, et celles qui réclament une action. */
.tuile__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.tuile__tete .etiq { padding-top: .12rem; }
.tuile__tete .etiq + .tuile__choix { margin-left: auto; }
.tuile__pic {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--marque-doux); color: var(--marque);
}
.tuile__pic svg { width: 1.05rem; height: 1.05rem; }

a.tuile { text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
a.tuile:hover { text-decoration: none; border-color: var(--trait); box-shadow: 0 1px 3px rgba(19, 28, 27, .07); }
a.tuile:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 2px; }

/* Il reste quelque chose à faire : la tuile le dit par la couleur, le
   pictogramme et le texte — jamais par la couleur seule. */
.tuile--urgent { background: var(--attention-doux); border-color: #EFE0C2; }
.tuile--urgent .tuile__pic { background: #F4E4C6; color: var(--attention); }
.tuile--urgent .tuile__val { color: var(--attention); }
.tuile--urgent .tuile__note { color: #7C5210; }

/* Plus rien en attente : même emplacement, tout autre visage. */
.tuile--calme .tuile__pic { background: var(--marque-doux); color: var(--marque-vif); }
.tuile--calme .tuile__val { color: var(--marque); }

/* Courbe de tendance : une seule teinte, le dernier point marqué. */
.tuile svg.courbe { margin-top: .45rem; width: 100%; height: 26px; display: block; overflow: visible; }
.courbe__aire   { fill: var(--marque); opacity: .1; stroke: none; }
.courbe__trait  { fill: none; stroke: var(--marque); stroke-width: 2; vector-effect: non-scaling-stroke;
                  stroke-linecap: round; stroke-linejoin: round; }
.courbe__fin    { fill: var(--marque); stroke: var(--surface); stroke-width: 1.5; }
.tuile__val {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.55rem; font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
}
.tuile__pied { display: flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .3rem; }
.tuile__ecart { font-size: .76rem; font-weight: 650; }
.tuile__ecart--haut { color: var(--marque); }
.tuile__ecart--bas  { color: var(--alerte); }
.tuile__note { font-size: .76rem; color: var(--encre-3); }

/* La même mesure un an plus tôt, sous celle de l'année. Le sens de l'écart se
   lit à la couleur, mais jamais par elle seule : le signe est écrit devant le
   pourcentage. */
.sous--ecart { display: block; }
.sous--ecart-haut { color: var(--marque); }
.sous--ecart-bas  { color: var(--alerte); }

/* --- Jauge --- */
.jauge { display: flex; flex-direction: column; gap: .35rem; }
.jauge__piste { height: 7px; background: var(--surface-3); border-radius: 20px; overflow: hidden; }
.jauge__part { display: block; height: 100%; background: var(--marque); border-radius: inherit; }
.jauge__leg { display: flex; justify-content: space-between; font-size: .78rem; color: var(--encre-2); }

/* --- Pastilles d'état --- */
.pastille {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .45rem; border-radius: 20px;
  font-size: .72rem; font-weight: 650; white-space: nowrap;
}
/* Le repère change de FORME selon l'état, pas seulement de couleur : rond,
   triangle, carré, losange. Un daltonien lit l'état, et il se lit encore sur
   une impression en noir et blanc. C'est ce que demande le RGAA — ne pas faire
   porter l'information par la seule couleur — et c'est aussi ce qui répond à
   « je confonds à surveiller et en retard ». */
.pastille::before {
  content: ""; width: 6px; height: 6px; flex: none;
  background: currentColor; border-radius: 50%;
}
/* Une pastille qui porte une phrase, et non un état d'un mot : « nowrap »
   convient à « Actif », pas à « il manque 7 pièces : … ». Sans cela la liste
   sortait de la carte par la droite. */
.pastille--phrase {
  /* En bloc, et non en flex : la puce et la phrase y formaient deux colonnes,
     si bien que « Il manque 7 pièces : » se retrouvait à l'étroit sur trois
     lignes pendant que la liste occupait le reste. La puce redevient une marque
     posée devant le texte, qui coule d'un seul tenant. */
  display: block; white-space: normal;
  border-radius: var(--r); padding: .5rem .75rem;
  font-size: .82rem; font-weight: 500; line-height: 1.5;
}
.pastille--phrase::before {
  display: inline-block; margin-right: .45rem; vertical-align: middle;
  position: relative; top: -1px;
}

.pastille--ok      { color: var(--marque);    background: var(--marque-doux); }
.pastille--attente { color: var(--attention); background: var(--attention-doux); }
.pastille--refus   { color: var(--alerte);    background: var(--alerte-doux); }
.pastille--info    { color: var(--info);      background: var(--info-doux); }

.pastille--attente::before {
  border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 7px; height: 7px;
}
.pastille--refus::before { border-radius: 1px; }
.pastille--info::before {
  border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  width: 7px; height: 7px;
}

/* --- Tableaux --- */
.tableau { overflow-x: auto; border: 1px solid var(--trait-fin); border-radius: var(--r); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 36rem; }
th, td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--trait-fin); }

/* Colonnes groupées : un trait vertical ouvre chaque groupe, et son titre se
   centre au-dessus de la colonne qui l'ouvre. Sans le trait, six colonnes de
   nombres se lisent d'un bloc et l'on ne voit plus où finit la production. */
.col-sep { border-left: 1px solid var(--trait); }
/* Le titre de groupe se cale à droite, comme le « Objectif » qu'il coiffe :
   les deux mots partagent alors le même bord et se lisent l'un sous l'autre.
   Centré, il paraissait décalé vers la gauche — la colonne porte des nombres,
   dont l'alignement est à droite. */
.col-groupe { text-align: right; }
/* Un titre qui coiffe deux colonnes de même largeur se pose entre elles : rien
   ici ne lui commande de se caler sur l'une plutôt que sur l'autre. */
.col-groupe--milieu { text-align: center; }
/* Un intitulé de colonne en deux mots tient sur deux lignes plutôt que d'élargir
   sa colonne d'un mot entier : c'est la largeur du tableau qu'on gagne, et avec
   elle le bouton de la dernière colonne, qui sortait du cadre. */
/* Écrit avec l'élément : .num, plus bas dans la feuille, interdit sinon le
   retour à la ligne des colonnes de nombres. */
th.col-repli { white-space: normal; }
/* Le trait tombe entre deux colonnes ; les nombres étant calés à droite, il
   frôlait la fin d'un groupe et restait loin du début du suivant.

   Deux réglages le déplacent. La colonne qui précède se donne de l'air à
   droite : la frontière — donc le trait — recule vers « Objectif ». Et la
   colonne qui suit resserre sa marge gauche, ce qui rapproche encore le trait
   du mot, puisque le vide d'une colonne de nombres se tient à sa gauche.
   L'avancement, lui, garde sa marge : il porte une jauge, pas un nombre, et
   elle se collerait au trait. */
.col-avant-sep { padding-right: 3.4rem; }
.num.col-sep { padding-left: .35rem; }
thead th {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--encre-3); background: var(--surface-2); font-weight: 600; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }

/* Une ligne sur deux légèrement teintée : c'est ce qui aide l'œil à suivre une
   ligne jusqu'au bout d'un tableau large, bien plus que le survol.
   Le survol, lui, ne subsiste que là où la ligne mène quelque part — ailleurs
   il promettait un clic qui n'existe pas. Les lignes qui portent déjà un fond
   (total, cumul) gardent le leur : la teinte ne s'applique qu'aux autres.

   Les CELLULES qui portent le leur aussi : le libellé du suivi des cibles est
   blanc sur vert foncé, et la teinte le repeignait en gris pâle une ligne sur
   deux — le texte blanc y devenait illisible. */
tbody tr:nth-child(even):not(.total):not(.cumul) td:not(.lib) { background: var(--surface-2); }
/* Une ligne qui mène quelque part le dit au survol. La règle vise les cellules
   et non la ligne : le rayage une ligne sur deux repeint les td, et un fond
   posé sur le tr passerait dessous. */
.data--cliquable tbody tr[data-lien] { cursor: pointer; }
.data--cliquable tbody tr[data-lien]:hover td { background: var(--marque-doux); }
.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.total td { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--trait); }

/* Le tableau des objectifs : vingt produits de large, comme la feuille Excel
   qu'il remplace. La colonne des prénoms reste en place quand on fait défiler
   vers la droite — sans elle, à la douzième colonne, on ne sait plus à qui est
   la ligne. Elle porte son propre fond, sinon les cases défilent à travers. */
.grille-objectifs table { min-width: 0; }
.grille-objectifs th, .grille-objectifs td { padding: .4rem .45rem; white-space: nowrap; }
.grille-objectifs .fixe {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--trait);
}
.grille-objectifs thead .fixe { z-index: 2; }
.grille-objectifs .total .fixe { background: var(--surface-2); }
.grille-objectifs input {
  width: 6.2rem; min-height: 0; padding: .3rem .4rem;
  text-align: right; font-family: var(--mono); font-size: .82rem;
}
.grille-objectifs--nombre input { width: 3.6rem; }
/* Le nom du produit, sa case et son total se tiennent sur le même axe : dans
   une grille large, c'est l'alignement vertical qui dit à quelle colonne une
   case appartient, bien plus que la position du texte dans sa cellule. */
.grille-famille, .grille-produit, .grille-case { text-align: center; }
/* Un nom long passe à la ligne plutôt que d'élargir sa colonne : la largeur
   est celle de la case à remplir, le nom s'y range, au milieu de la hauteur
   que le plus long lui impose. */
.grille-objectifs thead th.grille-produit { white-space: normal; vertical-align: middle; line-height: 1.35; overflow-wrap: break-word; }
.grille-case.col-sep, .grille-produit.col-sep { padding-left: .45rem; }
.client { font-weight: 600; }
.sous { display: block; font-size: .76rem; color: var(--encre-3); font-weight: 400; }
/* Ce qu'ajoute « Comparer à dates égales » : l'an dernier, dans une teinte à
   lui. En gris, il se confondait avec les notes déjà présentes et l'on ne
   voyait pas ce que le bouton avait changé. Après `.sous`, pour l'emporter. */
.an-dernier { color: var(--info); font-weight: 500; }

/* Bande de gravité en début de ligne */
tr.agir td:first-child { box-shadow: inset 3px 0 0 var(--attention); }

/* --- Filtres --- */
.filtres { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filtres input {
  min-height: var(--hauteur-controle);
  padding: .35rem .7rem; font: inherit; font-size: .86rem;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--trait-champ); border-radius: var(--r);
}
.filtres input:hover { border-color: var(--encre-3); }
/* Dans une ligne de filtres, même un bouton « min » prend la hauteur commune :
   sept pixels d'écart sur une même ligne se voient tout de suite. */
.filtres .bouton { min-height: var(--hauteur-controle); padding-top: .3rem; padding-bottom: .3rem; }

/* --- Liste de tâches --- */
.taches { display: flex; flex-direction: column; }
.tache {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .6rem 0; border-bottom: 1px solid var(--trait-fin);
}
.tache:last-child { border-bottom: 0; }
/* Un peu plus grosse qu'un point : c'est elle qui distingue les natures dans
   une liste où tout se ressemble, et six pixels n'y suffisaient pas. */
.tache__marque { width: 9px; height: 9px; border-radius: 50%; margin-top: .42rem; flex: none; }

/* La pastille dit la nature de la ligne. Des teintes franches et éloignées les
   unes des autres : le teal des congés, qui est aussi le leur au calendrier ;
   l'orange vif de ce qui attend une décision ; le rouge des entretiens à
   signer. Trois bruns voisins s'y trouvaient auparavant, qu'on ne distinguait
   qu'en les comparant.

   Les écarts tiennent aussi en deutéranopie, où le bleu d'usage (#2B5D8F) se
   confondait avec le violet des événements (ΔE 5,4 contre 16,1 pour celui
   retenu). */
.tache__marque--conge     { background: var(--cal-conge); }
.tache__marque--attente   { background: #E8720C; }
.tache__marque--entretien { background: var(--alerte); }
.tache__marque--relance   { background: var(--cal-relance); }

/* Une note datée porte la couleur qu'on lui a donnée sur le tableau : c'est à
   elle qu'on la reconnaît, et non à son titre. Les teintes des notes sont
   pâles — un fond de papier — et disparaîtraient en pastille de neuf pixels :
   chacune a donc ici sa version dense, de même famille. */
.tache__marque--note-jaune { background: #D9A400; }
.tache__marque--note-vert  { background: #5E9B2F; }
.tache__marque--note-bleu  { background: #2C7FB8; }
.tache__marque--note-rose  { background: #C9508A; }
.tache__corps { flex: 1; min-width: 0; }
.tache__titre { font-size: .88rem; font-weight: 600; }
.tache__det { font-size: .79rem; color: var(--encre-3); }

/* --- Formulaire --- */
.form { display: flex; flex-direction: column; gap: 1.4rem; }
.form__bloc { display: flex; flex-direction: column; gap: .9rem; }
.form__legende {
  display: flex; align-items: baseline; gap: .6rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--trait-fin);
}
.form__legende h2 { font-size: .95rem; }
.form__legende span { font-size: .78rem; color: var(--encre-3); }
.rangee { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
/* Trois champs courts sur une ligne — un choix et deux dates, par exemple. */
.rangee--3 { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

/* Saisie d'un rendez-vous : trois lignes, des colonnes taillées au contenu.
   Une heure n'a pas besoin d'autant de place qu'un nom de client. */
.rangee--rdv1 { grid-template-columns: 1.7fr 1.4fr 1fr .85fr .85fr; }
.rangee--rdv2 { grid-template-columns: 1.7fr 1fr 1.4fr; }
.rangee--rdv3 { grid-template-columns: 1fr auto; align-items: end; }

@media (max-width: 60rem) {
  /* Sous cette largeur, cinq colonnes deviennent illisibles : on retombe sur
     le pavage automatique commun. */
  .rangee--rdv1, .rangee--rdv2, .rangee--rdv3 {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}
.champ { display: flex; flex-direction: column; gap: .25rem; }
.champ > label { font-size: .8rem; font-weight: 600; }
.champ input, .champ select, .champ textarea {
  padding: .48rem .6rem; font: inherit; font-size: .88rem;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--trait-champ); border-radius: var(--r);
}
.champ__aide { font-size: .74rem; color: var(--encre-3); }
/* Le champ de mot de passe et son œil. Le bouton se pose dans le champ plutôt
   qu'à côté : à côté, il allongeait la ligne et le champ rétrécissait d'autant
   sur téléphone. */
.mdp { position: relative; display: flex; align-items: center; }
.mdp input { width: 100%; padding-right: 2.4rem; }
.mdp__oeil {
  position: absolute; right: .25rem; flex: none;
  width: 2rem; height: 2rem; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 4px;
  color: var(--encre-3); cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.mdp__oeil:hover { color: var(--encre); background: var(--surface-2); }
.mdp__oeil:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 1px; }
.mdp__oeil[aria-pressed="true"] { color: var(--marque); }
.mdp__oeil svg { width: 17px; height: 17px; }

.suffixe { position: relative; display: flex; align-items: center; }
.suffixe input { width: 100%; padding-right: 2rem; }
.suffixe span { position: absolute; right: .6rem; font-size: .82rem; color: var(--encre-3); }

.recap { position: sticky; top: 5rem; align-self: start; }
.recap__ligne { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; padding: .3rem 0; }
.recap__ligne b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.recap__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-top: .6rem; margin-top: .3rem; border-top: 1px solid var(--trait);
}
.recap__total b { font-family: var(--mono); font-size: 1.2rem; }

.avis {
  background: var(--info-doux); border-left: 3px solid var(--info);
  padding: .65rem .8rem; font-size: .8rem; color: var(--encre-2);
  border-radius: 0 4px 4px 0;
}
.avis b { color: var(--info); }

/* --- Classement --- */
.classement { display: flex; flex-direction: column; gap: .7rem; }
.rang { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .7rem; align-items: center; }
.rang__pos { font-family: var(--mono); font-size: .78rem; color: var(--encre-3); font-weight: 600; }
.rang__nom { display: block; font-size: .86rem; font-weight: 600; }
.rang__piste { display: block; height: 5px; background: var(--surface-3); border-radius: 20px; margin-top: .25rem; overflow: hidden; }
.rang__part { display: block; height: 100%; background: var(--marque); border-radius: inherit; }
.rang__val { font-family: var(--mono); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* --- Histogramme --- */
.histo { display: grid; grid-template-columns: repeat(12, 1fr); gap: .35rem; align-items: end; height: 170px; }
.histo__col { display: grid; grid-template-rows: auto 1fr auto; gap: .25rem; height: 100%; justify-items: center; }
.histo__col > .histo__barre { align-self: end; }
.histo__paire { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 100%; }
.histo__val { font-family: var(--mono); font-size: .68rem; color: var(--encre-3); }
.histo__barre { width: 100%; background: var(--marque); border-radius: 3px 3px 0 0; min-height: 2px; }
.histo__barre--vide { background: var(--surface-3); }
.histo__barre--ref { background: var(--surface-3); opacity: .9; }
.histo__leg { font-size: .68rem; color: var(--encre-3); }

/* --- Frise des congés --- */
.frise { display: grid; grid-template-columns: 5.5rem 1fr; gap: .45rem .6rem; align-items: center; }
.frise__nom { font-size: .82rem; font-weight: 600; }
.frise__piste { display: grid; grid-template-columns: repeat(31, 1fr); gap: 1px; height: 18px; }
.frise__jour { background: var(--surface-2); border-radius: 1px; }
.frise__jour--we { background: var(--surface-3); }
.frise__jour--pris { background: var(--marque); }
.frise__jour--demande { background: var(--attention); }
.frise__ech { display: grid; grid-template-columns: repeat(31, 1fr); font-family: var(--mono); font-size: .68rem; color: var(--encre-3); text-align: center; }

/* --- Légende --- */
.legende { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .76rem; color: var(--encre-2); }
.legende > span { display: inline-flex; align-items: center; gap: .35rem; }
.legende i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* --- Part relative dans un tableau --- */
.part { display: block; height: 5px; background: var(--surface-3); border-radius: 20px; overflow: hidden; margin-top: .3rem; min-width: 5rem; }
.part span { display: block; height: 100%; background: var(--marque); border-radius: inherit; }

/* --- Saisie en ligne dans un tableau --- */
td input, td select { width: 100%; padding: .3rem .45rem; font: inherit; font-size: .84rem;
  background: var(--surface); color: var(--encre); border: 1px solid var(--trait); border-radius: 4px; }

/* --- Bloc d'information secondaire --- */
.fiche { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: baseline; }

/* Une commande et les chiffres qu'elle gouverne, sur une seule ligne. Les
   éléments s'alignent par le bas : le sélecteur, les valeurs et le bouton
   reposent sur la même assise, sous des intitulés de hauteurs différentes. */
.ligne-resume {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 1.25rem; margin-bottom: 1rem;
}
.ligne-resume__chiffres {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem;
}
.ligne-resume b { font-size: .95rem; }
.fiche__item { display: flex; flex-direction: column; gap: .1rem; }
.fiche__item b { font-size: .95rem; }

/* --- Séries de graphique (palette validée pour le daltonisme) ---
   Le teal et le violet ont laissé la place à un bleu et une terre cuite : deux
   teintes opposées sur la roue, l'écart le plus sûr qui existe pour deux séries.

   Mesuré : ΔE 20,6 en protanopie et 26,0 en vision normale entre les deux (le
   couple précédent tenait 15,1 et 24,9), et 15,2 face au vert de marque, qui
   peut se trouver dans la même vue.

   Les deux teintes graduent aussi les ordonnées, donc elles portent du texte :
   il leur faut 4,5:1 et non 3:1. Le bleu tient 5,3 sur blanc et 5,0 sur le gris
   des cartes, la terre cuite 5,3 et 4,9. L'ancien teal, lui, plafonnait à 3,3 —
   les graduations de gauche étaient sous le seuil sans que rien ne le dise. */
:root { --serie-1: #1E6FB0; --serie-2: #B04F22; }

/* La plaque s'arrête après le dernier onglet. Étirée sur toute la largeur,
   elle promettait des onglets qui n'existaient pas, et le vide gris à droite
   se confondait avec un onglet vide. */
.segments { display: flex; gap: .2rem; padding: .22rem; flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--trait-fin); border-radius: var(--r); }
.segments button, .segments a {
  padding: .38rem .8rem; font-size: .84rem; cursor: pointer;
  background: none; border: 0; border-radius: 4px; color: var(--encre-2);
  text-decoration: none;
}
.segments button:hover, .segments a:hover { color: var(--encre); text-decoration: none; }
.segments button[aria-pressed="true"], .segments button[aria-current="page"],
.segments a[aria-current="page"] {
  background: var(--surface); color: var(--marque); font-weight: 600;
  box-shadow: 0 1px 2px rgba(16,24,40,.08);
}
/* Deux plaques côte à côte : les vues d'un même tableau à gauche, ce qu'on y
   regarde à droite. Elles restent voisines — séparées, elles se liraient comme
   deux barres sans rapport. */
.barre-segments { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.onglet { display: none; flex-direction: column; gap: 1.25rem; }
.onglet.actif { display: flex; }

/* --- Histogramme groupé --- */
/* Hauteur calée pour que les deux graphiques mensuels d'un même onglet
   tiennent ensemble à l'écran, sans avoir à défiler pour voir le second. */
.graph { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .3rem; align-items: end; height: 155px; }
.graph__col { display: grid; grid-template-rows: 1fr auto; gap: .3rem; justify-items: center; height: 100%; }
.graph__paire { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 100%; }
.graph__tige { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 2px; height: 100%; }
.graph__nb { font-family: var(--mono); font-size: .68rem; color: var(--encre-3); white-space: nowrap; }
.graph__barre { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
.graph__barre--1 { background: var(--serie-1); }
.graph__barre--2 { background: var(--serie-2); }
.graph__barre--nul { min-height: 0; height: 0; }
.graph__mois { font-size: .68rem; color: var(--encre-3); }
.graph__tige[tabindex]:hover .graph__barre,
.graph__tige[tabindex]:focus-visible .graph__barre { filter: brightness(1.12); }

.infobulle {
  position: fixed; z-index: 200; pointer-events: none; opacity: 0;
  transition: opacity .1s ease;
  background: var(--encre); color: var(--surface);
  padding: .35rem .6rem; border-radius: 4px;
  font-size: .78rem; white-space: nowrap;
}
.infobulle.visible { opacity: 1; }

/* --- Cartes de synthèse par famille --- */
.famille { display: flex; flex-direction: column; gap: .7rem; }
.famille__nom { font-size: .95rem; font-weight: 650; }
.famille__duo { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 60rem) {
  .famille--large { grid-column: span 2; }
  .famille__duo { grid-template-columns: 1fr 1fr; }
}

.avancement { margin-top: auto; display: flex; flex-direction: column; gap: .3rem; }
.avancement__piste { position: relative; height: 8px; background: var(--surface-3);
  border-radius: 20px; overflow: hidden; }
.avancement__part { display: block; height: 100%; background: var(--marque); border-radius: inherit; }
.avancement__repere { position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--encre-2); opacity: .55; }
.avancement__leg { display: flex; justify-content: space-between; font-size: .76rem; color: var(--encre-2); }
.avancement__leg b { font-family: var(--mono); }

/* --- Tableau d'indicateurs --- */
.indic { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 46rem; }
.indic thead th {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--marque); background: var(--surface); font-weight: 700;
  padding: .7rem .8rem; text-align: right; white-space: nowrap;
  border-bottom: 2px solid var(--marque);
}
.indic thead th:first-child { text-align: left; }
.indic td { padding: .5rem .8rem; text-align: right; border-bottom: 1px solid var(--trait-fin);
  font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.indic td.lib {
  text-align: left; font-family: var(--sans); font-weight: 600;
  background: var(--marque); color: #fff; border-bottom: 1px solid var(--surface);
  width: 22rem; white-space: normal;
}
.indic tr.cumul td.lib { text-transform: uppercase; font-size: .82rem; letter-spacing: .02em; }
.indic tr.cumul td { background: var(--surface-2); font-weight: 700; }
.indic tr.cumul td.lib { background: var(--marque); }
.indic td.cible-libre { color: var(--attention); }

.atteinte { display: flex; align-items: center; gap: .6rem; min-width: 9rem; }
.atteinte__piste { flex: 1; height: 14px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.atteinte__part { display: block; height: 100%; background: #6FA8A2; }
.atteinte__val { width: 3rem; text-align: right; }

/* --- Fiches salariés --- */
.fiches { display: grid; grid-template-columns: 13rem 1fr; gap: 1.25rem; align-items: start; }
.liste-salaries { display: flex; flex-direction: column; gap: .15rem; }
.salarie-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .5rem .6rem; border: 0; background: none; border-radius: var(--r);
  cursor: pointer; color: var(--encre-2); font-size: .875rem;
}
.salarie-item:hover { background: var(--surface-2); color: var(--encre); text-decoration: none; }
.salarie-item[aria-pressed="true"], .salarie-item[aria-current="page"] {
  background: var(--marque-doux); color: var(--marque); font-weight: 600;
}
.salarie-item .avatar { width: 26px; height: 26px; font-size: .72rem; }
.salarie-item[aria-pressed="true"] .avatar,
.salarie-item[aria-current="page"] .avatar { background: var(--marque); }
@media (max-width: 48rem) {
  .fiches { grid-template-columns: 1fr; }
  /* La liste passe en ligne, mais elle revient à la ligne plutôt que de
     défiler : un rang qui glisse sous le doigt se confond avec la page. */
  .liste-salaries { flex-direction: row; flex-wrap: wrap; overflow-x: visible; }
  .liste-salaries .salarie-item { width: auto; }
}

/* --- Validation d'un contrat --- */
.valid-item {
  border: 1px solid var(--trait-fin); border-radius: var(--r); background: var(--surface);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .9rem;
  border-left: 3px solid var(--attention);
}
.valid-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.valid-tete h3 { font-size: 1rem; }
.valid-detail { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }
.valid-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  padding-top: .8rem; border-top: 1px solid var(--trait-fin); }

/* --- Étapes numérotées --- */
.etape { display: flex; align-items: center; gap: .65rem; }
.etape__num {
  width: 1.55rem; height: 1.55rem; flex: none; border-radius: 50%;
  background: var(--marque-doux); color: var(--marque);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
}

/* --- Décisions en attente --- */
.decisions { display: flex; flex-direction: column; }
.decision {
  display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid var(--trait-fin);
}
.decision:last-child { border-bottom: 0; }
.decision__q { font-size: .88rem; font-weight: 600; }
.decision__ref { font-family: var(--mono); font-size: .72rem; color: var(--encre-3); }

/* --- Simulateur --- */
.simu { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.25rem; align-items: start; }
.simu__sortie {
  background: var(--surface-2); border: 1px solid var(--trait-fin);
  border-radius: var(--r); padding: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
}
@media (max-width: 48rem) { .simu { grid-template-columns: 1fr; } }

/* --- Règle de calcul --- */
.regle { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid var(--trait-fin); }
.regle:last-child { border-bottom: 0; }
.regle__si { font-size: .85rem; }
.regle__fleche { color: var(--encre-3); font-family: var(--mono); }
.regle__alors { font-size: .85rem; font-family: var(--mono); }
.regle__vide { color: var(--attention); font-style: italic; font-family: var(--sans); }

/* --- Empilement --- */
.pile { display: flex; flex-direction: column; gap: 1.5rem; }
.pile--serre { gap: 1rem; }

/* ===========================================================================
   Éléments propres au site (absents de la maquette)
   =========================================================================== */

/* Lien d'évitement, visible seulement au clavier */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--marque); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

/* Messages affichés après une action */
.alert {
  padding: .75rem 1rem; margin-bottom: 0;
  border: 1px solid transparent; border-left-width: 3px;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .9rem; font-weight: 500;
}
.alert--success { color: var(--marque);    background: var(--marque-doux);    border-left-color: var(--marque); }
.alert--error   { color: var(--alerte);    background: var(--alerte-doux);    border-left-color: var(--alerte); }
.alert--info    { color: var(--info);      background: var(--info-doux);      border-left-color: var(--info); }
.alert--warning { color: var(--attention); background: var(--attention-doux); border-left-color: var(--attention); }

/* Tableau vide */
table .empty { text-align: center; color: var(--encre-3); padding: 2rem; }

/* Contenu pleine largeur : aucun plafond, la page suit l'écran.
   Les pages de saisie gardent le plafond de .vue — un champ de formulaire
   étiré sur deux mètres ne se lit pas. */
.vue--large { max-width: none; }

/* Liens dans les tableaux : discrets, soulignés au survol */
table a { color: inherit; }
table a:hover { color: var(--marque); }

/* Pagination */
.pagination { display: flex; gap: .35rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 2rem; padding: .3rem .55rem; text-align: center;
  border: 1px solid var(--trait); border-radius: var(--r);
  font-size: .84rem; color: var(--encre-2); background: var(--surface);
}
.pagination a:hover { background: var(--surface-2); text-decoration: none; }
.pagination [aria-current="page"] { background: var(--marque); border-color: var(--marque); color: #fff; font-weight: 600; }
.pagination .ellipse { border: 0; background: none; }

/* ===========================================================================
   Impression
   =========================================================================== */
@media print {
  .laterale, .entete, .bouton, .btn-row, .segments, .filtres { display: none !important; }
  .app { grid-template-columns: 1fr; }
  body { background: #fff; }
  .carte, .tableau { border: 0; box-shadow: none; break-inside: avoid; }
  .vue { padding: 0; }
}

/* --- Suivi de dossier ------------------------------------------------------ */
.etapes { display: flex; flex-direction: column; }
.etape-ligne {
  display: grid; grid-template-columns: auto 1fr minmax(8rem, 16rem);
  gap: .75rem; align-items: center;
  padding: .55rem 0; border-bottom: 1px solid var(--trait-fin);
}
.etape-ligne:last-child { border-bottom: 0; }
.etape-bascule { display: flex; margin: 0; }
.case {
  width: 20px; height: 20px; flex: none; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--surface); color: #fff;
  border: 1.5px solid var(--trait); border-radius: 5px;
}
.case:hover { border-color: var(--marque); }
.case[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); }
.case svg { width: 12px; height: 12px; }
.etape-corps { display: flex; flex-direction: column; min-width: 0; }
.etape-libelle { font-size: .9rem; }
.etape-ligne--faite .etape-libelle { color: var(--encre-2); }
.etape-commentaire { margin: 0; }
.etape-commentaire input { width: 100%; padding: .35rem .5rem; font-size: .82rem;
  background: var(--surface); color: var(--encre); border: 1px solid var(--trait); border-radius: 5px; }
.avancement__part--complet { background: var(--marque-vif); }

@media (max-width: 40rem) {
  .etape-ligne { grid-template-columns: auto 1fr; }
  .etape-commentaire { grid-column: 1 / -1; }
}

/* --- Planning des congés --------------------------------------------------- */
.frise-enveloppe { overflow-x: auto; }
.frise { display: grid; grid-template-columns: 5.5rem 1fr; gap: .45rem .6rem; align-items: center; min-width: 34rem; }
.frise__nom { font-size: .82rem; font-weight: 600; }
.frise__piste { display: grid; grid-template-columns: repeat(var(--jours, 31), 1fr); gap: 1px; height: 18px; }
.frise__jour { background: var(--surface-2); border-radius: 1px; }
.frise__jour--we { background: var(--surface-3); }
.frise__jour--pris { background: var(--marque); }
.frise__jour--demande { background: var(--attention); }
.frise__ech { display: grid; grid-template-columns: repeat(var(--jours, 31), 1fr);
  font-family: var(--mono); font-size: .68rem; color: var(--encre-3); text-align: center; }

/* --- Pages sans barre latérale : connexion, erreurs ------------------------ */
.login-shell {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 2rem 1.25rem;
  background: var(--fond);
}
.login-carte { width: 100%; max-width: 22rem; display: flex; flex-direction: column; gap: 1.25rem; }
.login-carte .marque { justify-content: center; }
.login-carte .marque__nom { font-size: 1.25rem; }
.login-pied { text-align: center; font-size: .82rem; color: var(--encre-3); }

.champ__erreur { font-size: .78rem; color: var(--alerte); font-weight: 600; }

/* --- Tableau de prospection ------------------------------------------------ */
.tableaux-prospection {
  display: grid;
  /* Les deux tableaux de sujets à égalité, « À rappeler » plus étroit : il ne
     porte qu'un nom, un numéro et deux mots, une colonne lui suffit. */
  grid-template-columns: 1fr 1fr 0.66fr;
  gap: 1.25rem;
  align-items: start;
}

.tableau-liege {
  position: relative;
  height: 60vh;
  min-height: 30rem;
  border: 1px solid var(--trait-fin);
  border-radius: var(--r);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 12px,
                              rgba(16,24,40,.02) 12px, rgba(16,24,40,.02) 24px),
    var(--surface-2);
  overflow: auto;
  overscroll-behavior: contain;
}

/* La zone est plus haute que la fenêtre : on peut poser des notes loin
   vers le bas et faire défiler pour les retrouver. */
.tableau-liege__zone {
  position: relative;
  min-height: 100rem;
  min-width: 100%;
}

.tableau-liege__vide {
  position: sticky; top: 40%;
  margin: 0; text-align: center;
  color: var(--encre-3); font-size: .88rem;
  pointer-events: none;
}
.tableau-liege__zone .postit ~ .tableau-liege__vide { display: none; }

.postit {
  position: absolute;
  width: 12.5rem;
  padding: .7rem .75rem .45rem;
  display: flex; flex-direction: column; gap: .3rem;
  color: #2a2a22;
  transform: rotate(-1.2deg);
  box-shadow: 0 3px 8px rgba(16,24,40,.18), 0 12px 24px rgba(16,24,40,.06);
  transition: transform .12s ease, box-shadow .12s ease, outline-color .3s ease;
  outline: 2px solid transparent;
}
.postit:nth-of-type(even) { transform: rotate(1.4deg); }
.postit:nth-of-type(3n)   { transform: rotate(-.6deg); }

.postit:hover, .postit:focus-within {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 6px 14px rgba(16,24,40,.22), 0 18px 32px rgba(16,24,40,.08);
  z-index: 20;
}
.postit--deplace {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 14px 30px rgba(16,24,40,.28);
  z-index: 50;
}
.postit--enregistre { outline-color: rgba(10,91,84,.55); }

/* Deux cernes, deux questions.
   ---------------------------------------------------------------------------
   Le vert de marque dit « ce jour-là », l'orange dit « c'est passé ». Ni l'un
   ni l'autre n'est un fond : les quatre couleurs de note veulent dire autre
   chose, et un cinquième fond les aurait contredites. Ils sont portés par une
   ombre plutôt que par « outline », déjà pris par le clignotement de
   l'enregistrement — les deux se répondraient au lieu de se superposer.

   Aucun ne porte seul son sens : la date est écrite sur la note, en rouge
   quand elle est dépassée. */
.postit--vise {
  box-shadow: 0 0 0 3px var(--marque-vif),
              0 3px 8px rgba(16,24,40,.18), 0 12px 24px rgba(16,24,40,.06);
}
.postit--retard {
  box-shadow: 0 0 0 3px #E8720C,
              0 3px 8px rgba(16,24,40,.18), 0 12px 24px rgba(16,24,40,.06);
}
/* En retard ET dans le jour repéré : les deux cernes, l'un dans l'autre. Faire
   gagner l'un aurait effacé une information au moment où l'on en a le plus
   besoin — c'est justement en repérant aujourd'hui qu'on veut voir ses
   retards. */
.postit--retard.postit--vise {
  box-shadow: 0 0 0 3px #E8720C, 0 0 0 6px var(--marque-vif),
              0 3px 8px rgba(16,24,40,.18), 0 12px 24px rgba(16,24,40,.06);
}

/* Le repli de papier, en bas à droite */
.postit::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  border-width: 0 0 1.1rem 1.1rem;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,.10) transparent;
}

.postit--jaune { background: #FDF3A7; }
.postit--vert  { background: #D6F0BE; }
.postit--bleu  { background: #C9E6F7; }
.postit--rose  { background: #FBD3E0; }

/* La poignée : la bande du haut sert à attraper la note */
.postit__poignee {
  height: .5rem; margin: -.35rem -.35rem .1rem;
  cursor: grab; border-radius: 3px;
}
.postit--deplace .postit__poignee { cursor: grabbing; }

/* Les champs se fondent dans le papier tant qu'on ne les touche pas */
.postit input, .postit textarea {
  width: 100%; padding: .15rem .25rem; margin: 0;
  font-family: inherit; color: inherit;
  background: transparent; border: 1px solid transparent; border-radius: 3px;
  resize: none;
}
.postit input::placeholder, .postit textarea::placeholder { color: rgba(42,42,34,.45); }
.postit input:hover, .postit textarea:hover { border-color: rgba(0,0,0,.10); }
.postit input:focus, .postit textarea:focus {
  outline: none; background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.22);
}

.postit__titre { font-size: .92rem; font-weight: 700; }
.postit__texte { font-size: .8rem; line-height: 1.4; min-height: 3.4rem; }
.postit__ligne { display: flex; align-items: center; gap: .3rem; }
/* Les champs d'une note ne sont pas des contrôles de formulaire : ils vivent
   dans un carré de papier de douze centimètres. La hauteur minimale commune,
   posée pour les filtres et les formulaires, les gonflait de moitié. */
.postit input, .postit textarea { min-height: 0; }
.postit__tel   { font-family: var(--mono); font-size: .76rem; }
.postit__appel { font-size: .7rem; color: inherit; text-decoration: underline; white-space: nowrap; }
.postit__date  { font-family: var(--mono); font-size: .74rem; }
.postit__date--retard { color: #8f2b22; font-weight: 700; }

.postit__barre {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .1rem; padding-top: .3rem;
  border-top: 1px solid rgba(0,0,0,.08);
  opacity: 0; transition: opacity .12s ease;
}
.postit:hover .postit__barre, .postit:focus-within .postit__barre { opacity: 1; }

.postit__couleurs { display: flex; gap: .2rem; margin-right: auto; }
.postit__pastille {
  width: .85rem; height: .85rem; padding: 0; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.25); cursor: pointer;
}
.postit__pastille[aria-pressed="true"] { box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.postit__pastille--jaune { background: #FDF3A7; }
.postit__pastille--vert  { background: #D6F0BE; }
.postit__pastille--bleu  { background: #C9E6F7; }
.postit__pastille--rose  { background: #FBD3E0; }

.postit__action {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .7rem; color: inherit; text-decoration: underline;
}

@media (max-width: 62rem) {
  .tableaux-prospection { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  /* Sur mobile, traîner une note au doigt n'a pas de sens : on empile. */
  .tableau-liege { height: auto; min-height: 0; overflow: visible; }
  .tableau-liege__zone { display: flex; flex-wrap: wrap; gap: .8rem; padding: .8rem; min-height: 0; }
  .postit { position: static !important; transform: none !important; width: 100%; }
  .postit__barre { opacity: 1; }
  .postit__poignee { display: none; }
  .tableau-liege__vide { position: static; padding: 2rem 0; }
}

/* --- Graphique à deux échelles --------------------------------------------- */
.bi { position: relative; height: 17rem; margin: .5rem 0 .3rem; }

.bi__fond { position: absolute; inset: 0 0 1.8rem; display: flex; flex-direction: column; }
.bi__graduation { flex: 1; display: flex; align-items: flex-start; gap: .5rem; }
.bi__graduation:last-child { flex: 0; }
.bi__ligne { flex: 1; border-top: 1px dashed var(--trait-fin); margin-top: .45rem; }
.bi__axe {
  width: 3.4rem; font-family: var(--mono); font-size: .7rem;
  font-variant-numeric: tabular-nums;
}
.bi__axe--gauche { text-align: right; color: var(--serie-1); }
.bi__axe--droite { text-align: left;  color: var(--serie-2); }

.bi__colonnes {
  position: absolute; inset: 0 3.9rem 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem;
}

/* Une seule mesure, donc une seule échelle : la place réservée à droite pour
   la seconde ordonnée n'a plus lieu d'être, et l'axe restant prend la teinte
   de la série qu'il gradue. */
.bi--simple .bi__colonnes { right: 0; }
.bi--nombre .bi__axe--gauche { color: var(--serie-2); }
.bi__col { display: grid; grid-template-rows: 1fr auto; gap: .35rem; min-width: 0; }
.bi__paire { display: flex; align-items: flex-end; justify-content: center; gap: .5rem; height: 100%; }

/* La barre d'objectif est large et pâle ; le réalisé se pose devant. */
.bi__socle { position: relative; width: 1.7rem; height: 100%; display: flex; align-items: flex-end; }
.bi__objectif {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: 3px 3px 0 0; opacity: .28;
}
.bi__objectif--montant { background: var(--serie-1); }
.bi__objectif--nombre  { background: var(--serie-2); }
.bi__barre {
  position: relative; width: .95rem; margin: 0 auto;
  border-radius: 3px 3px 0 0; min-height: 2px;
}
.bi__barre--montant { background: var(--serie-1); }
.bi__barre--nombre  { background: var(--serie-2); }
.bi__socle:hover .bi__barre, .bi__socle:focus-visible .bi__barre { filter: brightness(1.12); }

.bi__libelle {
  font-size: .68rem; color: var(--encre-3); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 48rem) {
  .bi { height: 14rem; }
  .bi__socle { width: 1.2rem; }
  .bi__barre { width: .7rem; }
  .bi__libelle { font-size: .68rem; }
}

/* Le nom et la bulle en en-tête mènent à la page « Mon compte » */
a.utilisateur__nom { color: inherit; text-decoration: none; }
a.utilisateur__nom:hover { text-decoration: underline; }
a.avatar { color: #fff; text-decoration: none; }
a.avatar:hover { filter: brightness(1.12); }

/* Un bouton réduit à son icône : carré, et assez grand pour le doigt. */
.bouton--icone {
  padding: 0; width: 2rem; min-height: 2rem;
  display: inline-grid; place-items: center;
}
.bouton--icone svg { width: 15px; height: 15px; }

/* ===========================================================================
   Calendrier
   Trois teintes seulement, validées pour la vision daltonienne (ΔE 13,7 en
   protanopie/deutéranopie, 22,9 en vision normale, toutes paires confondues).
   Le texte reste à l'encre courante : la couleur ne porte jamais seule le sens,
   une pastille et un libellé l'accompagnent toujours.
   =========================================================================== */
:root {
  /* Le calendrier garde ses propres teintes, il ne suit plus les séries de
     graphique. Ses quatre cases sont déjà réparties sur la roue — relance en
     orange, en cours en brun — et y verser la terre cuite des graphiques
     ramènerait deux voisins à ΔE 6,3, sous le seuil. Le couple teal/violet
     reste donc ici, où il est le seul à tenir les quatre écarts. */
  --cal-conge:     #149E90;
  --cal-evenement: #7E4CA0;
  --cal-relance:   #C2661A;
  --cal-cours:     #6B5B4A;
}

.cal-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.cal-legende { display: flex; gap: 1rem; flex-wrap: wrap; }
.cal-cle {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--encre-2);
}
.cal-cle::before {
  content: ''; width: .6rem; height: .6rem; border-radius: 2px; flex: none;
}
.cal-cle--conge::before     { background: var(--cal-conge); }
.cal-cle--evenement::before { background: var(--cal-evenement); }
.cal-cle--relance::before   { background: var(--cal-relance); }
.cal-cle--cours::before     { background: repeating-linear-gradient(45deg,
                                var(--cal-cours) 0 2px, transparent 2px 4px); }

.cal { overflow-x: auto; }
.cal__entete, .cal__grille {
  display: grid; grid-template-columns: repeat(7, minmax(8.5rem, 1fr)); gap: 1px;
}
.cal__entete {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--encre-3); font-weight: 600;
  padding-bottom: .4rem;
}
.cal__entete span { padding: 0 .4rem; }

.cal__grille { background: var(--trait-fin); border: 1px solid var(--trait-fin); border-radius: var(--r); overflow: hidden; }

.cal__jour {
  background: var(--surface); min-height: 5rem; padding: .32rem .4rem .36rem;
  display: flex; flex-direction: column; gap: .12rem;
}
.cal__jour--hors  { background: var(--surface-2); }
.cal__jour--hors .cal__num { color: var(--encre-3); }
.cal__jour--we    { background: var(--surface-2); }
.cal__jour--ferie { background: var(--surface-3); }
.cal__jour--auj   { box-shadow: inset 0 0 0 2px var(--marque); }

/* Un jour de cours se marque au fond, pas par une étiquette de plus : ce n'est
   pas un événement du jour, c'est ce qu'est le jour. */
.cal__jour--cours {
  background-image: repeating-linear-gradient(45deg,
    rgba(107, 91, 74, .09) 0 4px, transparent 4px 9px);
}

.cal__tete { display: flex; align-items: baseline; justify-content: space-between; gap: .25rem; }
.cal__num {
  font-family: var(--mono); font-size: .76rem; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.cal__jour--auj .cal__num { color: var(--marque); }
.cal__ferie {
  font-size: .62rem; color: var(--encre-3); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}

.cal__item, .cal__cours {
  display: flex; align-items: center; gap: .28rem;
  font-size: .7rem; line-height: 1.25; color: var(--encre);
  background: var(--surface-2); border-radius: 3px;
  padding: .06rem .25rem;
  overflow: hidden;
}
/* Plus rien ne se clique dans une case : le survol n'a plus à promettre. */
.cal__item--flou { opacity: .62; }
.cal__lib { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal__cours { background: transparent; color: var(--encre-2); font-size: .68rem; padding-left: 0; }

.cal__pastille { width: .42rem; height: .42rem; border-radius: 2px; flex: none; }
.cal__pastille--conge     { background: var(--cal-conge); }
.cal__pastille--evenement { background: var(--cal-evenement); }
.cal__pastille--relance   { background: var(--cal-relance); }
.cal__pastille--cours     { background: var(--cal-cours); }

/* Les cases de rythme d'alternance */
.cal-jours { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; padding: 0; margin: 0; }
.cal-jours legend {
  font-size: .78rem; font-weight: 600; color: var(--encre-2);
  padding: 0; margin-bottom: .35rem;
}
.cal-jour { position: relative; }
.cal-jour input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cal-jour span {
  display: block; border: 1px solid var(--trait); border-radius: 999px;
  padding: .2rem .62rem; font-size: .82rem; color: var(--encre-2);
  cursor: pointer; background: var(--surface);
}
.cal-jour input:checked + span {
  background: var(--marque); border-color: var(--marque); color: #fff; font-weight: 600;
}
.cal-jour input:focus-visible + span { outline: 2px solid var(--marque-vif); outline-offset: 2px; }

@media (max-width: 60rem) {
  .cal__entete { display: none; }
  .cal__grille { grid-template-columns: 1fr; }
  .cal__jour { min-height: 0; }
  .cal__jour--hors { display: none; }
  .cal__tete::after { content: attr(data-jour); font-size: .7rem; color: var(--encre-3); }
}

/* ===========================================================================
   Calendrier compact de l'accueil
   Une grille de chiffres à gauche, le détail du jour à droite. Les jours ne
   portent que des points : le contenu se lit dans le panneau, pas dans la case.
   =========================================================================== */
.mini-duo { display: grid; grid-template-columns: minmax(17rem, 22rem) 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 54rem) { .mini-duo { grid-template-columns: 1fr; } }

/* Le calendrier de l'accueil partage désormais sa ligne : quand sa colonne se
   resserre, la grille et le détail du jour s'empilent au lieu de s'écraser.
   La mesure porte sur la carte, pas sur la fenêtre — c'est la largeur
   disponible qui décide. */
.carte--calendrier { container-type: inline-size; }
@container (max-width: 34rem) {
  .mini-duo { grid-template-columns: 1fr; gap: 1.1rem; }
}

.mini__tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .7rem;
}
.mini__mois { font-weight: 650; font-size: .95rem; }
.mini__nav {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--trait); border-radius: 6px; background: var(--surface);
  color: var(--encre-2); text-decoration: none; font-size: .8rem; line-height: 1;
}
.mini__nav:hover { background: var(--surface-2); color: var(--encre); text-decoration: none; }

.mini__sem, .mini__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: .18rem; }
.mini__sem {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--encre-3); text-align: center;
  margin-bottom: .3rem;
}

.mini__jour {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .12rem; padding: .3rem 0 .32rem; border-radius: 6px;
  font-family: var(--mono); font-size: .8rem; font-variant-numeric: tabular-nums;
  color: var(--encre); text-decoration: none; border: 1px solid transparent;
  cursor: pointer; background: none;
}
.mini__jour:hover { background: var(--surface-2); text-decoration: none; }
.mini__jour--we   { background: var(--surface-2); }
.mini__jour--hors { color: var(--encre-3); }
.mini__jour--ferie { color: var(--alerte); }
.mini__jour--auj  { background: var(--marque-doux); color: var(--marque); font-weight: 700; }
.mini__jour[aria-current="date"] { border-color: var(--marque); background: var(--marque-doux); }
.mini__jour:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 1px; }

/* Un jour de cours se marque au fond, comme sur le calendrier complet. */
.mini__jour--cours {
  background-image: repeating-linear-gradient(45deg,
    rgba(107, 91, 74, .12) 0 3px, transparent 3px 7px);
}

.mini__points { display: flex; gap: .12rem; height: .3rem; align-items: center; }
.mini__point { width: .3rem; height: .3rem; border-radius: 50%; }
.mini__point--conge     { background: var(--cal-conge); }
.mini__point--evenement { background: var(--cal-evenement); }
.mini__point--relance   { background: var(--cal-relance); }
.mini__point--cours     { background: var(--cal-cours); }

/* --- Panneau du jour --- */
.jour__date {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  line-height: 1.25; margin-bottom: .15rem; text-wrap: balance;
}
.jour__vide { color: var(--encre-3); font-size: .9rem; }
.jour__liste { display: flex; flex-direction: column; gap: .4rem; margin: .7rem 0 1.1rem; }
.jour__entree {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .45rem .6rem; border: 1px solid var(--trait-fin); border-radius: var(--r);
  background: var(--surface-2); color: inherit; text-decoration: none;
}
a.jour__entree:hover { background: var(--surface-3); text-decoration: none; }
.jour__entree .cal__pastille { margin-top: .38rem; }
.jour__texte { display: flex; flex-direction: column; min-width: 0; }
.jour__titre { font-size: .9rem; font-weight: 600; }
.jour__note  { font-size: .78rem; color: var(--encre-2); }

.jour__actions { display: flex; flex-direction: column; gap: .5rem; }
.jour__action {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .8rem; border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); color: var(--marque); font-size: .9rem; font-weight: 600;
  text-decoration: none;
}
.jour__action:hover { background: var(--marque-doux); border-color: var(--marque-doux); text-decoration: none; }
.jour__action svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* --- Mise en route : la liste des choses à renseigner ---------------------- */
.etapes-init { display: flex; flex-direction: column; gap: .1rem; margin-top: .8rem; }
.init {
  display: grid; grid-template-columns: 9rem 1fr auto; gap: 1rem;
  align-items: start; padding: .75rem 0;
  border-top: 1px solid var(--trait-fin);
}
.init:first-child { border-top: 0; }
.init__corps { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.init__titre { font-weight: 600; font-size: .95rem; }
.init__mention {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--encre-3); margin-left: .4rem;
  border: 1px solid var(--trait); border-radius: 3px; padding: .04rem .3rem;
  white-space: nowrap;
}
.init__role   { font-size: .85rem; color: var(--encre-2); }
.init__detail {
  font-family: var(--mono); font-size: .78rem; color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}
.init__action { display: flex; align-items: center; white-space: nowrap; }

@media (max-width: 48rem) {
  .init { grid-template-columns: 1fr; gap: .4rem; }
  .init__action { justify-content: flex-start; }
}

/* La barre des écrans de paramétrage : plus discrète que les onglets internes
   d'une page, pour qu'on ne confonde pas « où je suis » et « quelle section ». */

/* --- Bascule de vue d'essai (compte technique seulement) ------------------- */
.vue-essai {
  display: flex; align-items: center; gap: .15rem; margin-left: auto; margin-right: 0;
  padding: .18rem .25rem; border: 1px dashed var(--trait);
  border-radius: var(--r); background: var(--surface-2);
}
.vue-essai__lib {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-3); padding: 0 .25rem;
}
.vue-essai__choix {
  border: 0; background: none; border-radius: 4px; cursor: pointer;
  padding: .18rem .5rem; font-size: .76rem; color: var(--encre-2);
}
.vue-essai__choix:hover { background: var(--surface-3); color: var(--encre); }
.vue-essai__choix.actif { background: var(--marque); color: #fff; font-weight: 600; }
.vue-essai__choix:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 1px; }

/* En visite, la bascule change de ton : on n'est plus chez soi, et cela doit
   se voir sans avoir à lire. */
.vue-essai--visite {
  border-style: solid; border-color: var(--attention);
  background: var(--attention-doux);
}
.vue-essai--visite .vue-essai__lib { color: var(--attention); }
.vue-essai--visite .vue-essai__choix { color: var(--attention); }
.vue-essai--visite .vue-essai__choix.actif { background: var(--attention); color: #fff; }
.vue-essai--visite .vue-essai__choix:hover { background: rgb(154 98 9 / .16); color: var(--attention); }

@media (max-width: 62rem) {
  .vue-essai { display: none; }
  /* Le retour de visite, lui, reste joignable : le masquer enfermerait dans
     l'agence visitée quiconque regarde sur un écran étroit. */
  .vue-essai--visite { display: flex; }
}

/* Panneaux d'une carte à onglets : un seul visible, sans espace superflu. */
.ajout-panneau { display: flex; flex-direction: column; gap: 1.4rem; }

/* Rendez-vous : quatrième teinte du calendrier, validée avec les trois autres
   (ΔE 8,6 en vision daltonienne, 15,8 en vision normale, toutes paires).
   Son contraste sur blanc est en deçà de 3:1 : la pastille ne porte donc
   jamais le sens seule — l'heure et le nom du client l'accompagnent toujours,
   et sa forme ronde la distingue des marques carrées. */
:root { --cal-rdv: #9AA82E; }

.cal-cle--rdv::before { background: var(--cal-rdv); border-radius: 50%; }

/* Entre agences : la même teinte que les rendez-vous, et la double flèche qui
   les précède dans le calendrier. Le sens tient à la forme, jamais à la seule
   couleur — c'est la règle du reste de cette légende. */
.cal-cle--collab::before {
  content: "↔"; background: none; width: auto; height: auto;
  color: var(--cal-rdv); font-weight: 700; line-height: 1;
}
.cal__pastille--rdv { background: var(--cal-rdv); border-radius: 50%; }
.mini__point--rdv   { background: var(--cal-rdv); }

.cal__heure {
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  color: var(--encre-2); flex: none;
}
.jour__entree .cal__pastille--rdv { margin-top: .4rem; }

/* Un choix discret dans l'en-tête d'une tuile, sans peser sur le chiffre. */
/* Exception assumée : posé dans le coin d'une tuile, ce sélecteur doit rester
   discret. Il garde donc sa petite taille, mais reprend le chevron commun. */
.tuile__choix {
  font: inherit; font-size: .74rem; color: var(--encre-2);
  background-color: var(--surface-2); border: 1px solid var(--trait);
  border-radius: 4px; padding: .12rem 1.4rem .12rem .4rem;
  max-width: 9rem; min-height: 0; cursor: pointer;
  min-width: 0; flex: 0 1 auto;
  background-position: right .3rem center; background-size: 13px;
}
.tuile__choix:hover { border-color: var(--trait); color: var(--encre); }

/* ===========================================================================
   Synthèse de l'agence
   Une jauge par série plutôt qu'une liste de valeurs : ce qu'on vient
   chercher, c'est qui tient le rythme et qui décroche. Les états sont des
   couleurs de statut — jamais employées comme teintes de catégorie — et
   chacune porte son libellé.
   =========================================================================== */
.pastille--avance    { color: var(--marque);    background: var(--marque-doux); }
.pastille--temps     { color: var(--marque);    background: var(--marque-doux); }
.pastille--surveille { color: var(--attention); background: var(--attention-doux); }
/* Mêmes formes que les états généraux, pour les quatre états de la synthèse. */
.pastille--surveille::before {
  border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 7px; height: 7px;
}
.pastille--retard::before { border-radius: 1px; }
.pastille--temps::before {
  border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 7px; height: 7px;
}
.pastille--retard    { color: var(--alerte);    background: var(--alerte-doux); }
.pastille--neutre    { color: var(--encre-3);   background: var(--surface-2); }

/* --- Bandeau de répartition --- */
.etats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; }
.etat {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem .8rem; border-radius: var(--r);
  border: 1px solid var(--trait-fin); background: var(--surface-2);
  border-left: 3px solid var(--trait);
}
.etat__nombre {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.etat__titre { font-size: .84rem; font-weight: 600; }
.etat__note  { font-size: .74rem; color: var(--encre-3); }

.etat--avance    { border-left-color: var(--marque); }
.etat--avance .etat__nombre    { color: var(--marque); }
.etat--temps     { border-left-color: var(--marque-vif); }
.etat--temps .etat__nombre     { color: var(--marque-vif); }
.etat--surveille { border-left-color: var(--attention); }
.etat--surveille .etat__nombre { color: var(--attention); }
.etat--retard    { border-left-color: var(--alerte); }
.etat--retard .etat__nombre    { color: var(--alerte); }

/* --- Une série --- */
/* Un liseré à gauche, épais et coloré selon l'état : sur une grille de onze
   cartes, c'est lui qui fait ressortir celles qui décrochent, avant même qu'on
   lise le pourcentage. La couleur seule, sur un fond blanc, ne suffisait pas. */
.jauge-serie { display: flex; flex-direction: column; gap: .5rem; border-left: 4px solid var(--trait); }
.jauge-serie--retard    { border-left-color: var(--alerte); }
.jauge-serie--surveille { border-left-color: var(--attention); }
.jauge-serie--avance,
.jauge-serie--temps     { border-left-color: var(--marque); }
.jauge-serie--neutre    { border-left-color: var(--trait); }
.jauge-serie__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.jauge-serie__titre { font-size: .95rem; font-weight: 650; }
/* La roue de réglage : présente sans se faire voir, franche au survol. C'est
   un recours, pas une action qu'on propose à chaque lecture du tableau. */
.jauge-serie__reglage {
  flex: none; width: 24px; height: 24px; margin: -.15rem -.2rem 0 0;
  display: grid; place-items: center; border-radius: var(--r);
  color: var(--encre-3); opacity: .55;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.jauge-serie:hover .jauge-serie__reglage { opacity: 1; }
.jauge-serie__reglage:hover { background: var(--surface-2); color: var(--marque); }
.jauge-serie__reglage svg { width: 15px; height: 15px; }
.jauge-serie__haut { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.jauge-serie__part {
  font-family: var(--mono); font-size: 1.7rem; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em;
}
.jauge-serie--retard .jauge-serie__part    { color: var(--alerte); }
.jauge-serie--surveille .jauge-serie__part { color: var(--attention); }
.jauge-serie--avance .jauge-serie__part,
.jauge-serie--temps .jauge-serie__part     { color: var(--marque); }
.jauge-serie--neutre .jauge-serie__part    { color: var(--encre-3); }

.jauge-serie__piste {
  position: relative; height: 10px; border-radius: 20px;
  background: var(--surface-3); overflow: hidden;
}
.jauge-serie__part-barre {
  display: block; height: 100%; border-radius: inherit; background: var(--marque);
}
.jauge-serie--retard .jauge-serie__part-barre    { background: var(--alerte); }
.jauge-serie--surveille .jauge-serie__part-barre { background: var(--attention); }
/* Le repère du rythme attendu : c'est lui qui donne son sens au pourcentage. */
.jauge-serie__repere {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--encre-2); opacity: .6;
}

.jauge-serie__pied {
  display: flex; flex-wrap: wrap; gap: .15rem 1.1rem;
  font-size: .78rem; color: var(--encre-2); margin-top: .1rem;
}
.jauge-serie__pied b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--encre); }

/* Toutes les cartes ont la même largeur : la grille reste régulière. */
.grille--synthese > .jauge-serie { justify-content: flex-start; }


/* ===========================================================================
   Téléphone — coque installable
   ---------------------------------------------------------------------------
   Le site s'ajoute à l'écran d'accueil de l'iPhone et s'ouvre sans barre
   Safari. Il faut donc qu'il se tienne seul : navigation au pouce en bas,
   barre latérale en tiroir, marges qui évitent l'encoche et la barre d'accueil.
   =========================================================================== */

/* La barre du bas, le voile et le pied de tiroir n'existent qu'au téléphone. */
.barre-basse { display: none; }
.voile { display: none; }
.laterale__pied { display: none; }

@media (max-width: 52rem) {

  /* --- Coque ------------------------------------------------------------- */
  .app { grid-template-columns: 1fr; }

  /* Le tiroir glisse depuis la droite : c'est de ce côté qu'est le bouton
     « Menu » de la barre du bas, et c'est là que le pouce se tient. */
  .laterale {
    position: fixed; z-index: 60; inset: 0 0 0 auto;
    /* Assez large pour les libellés, pas plus : à dix-neuf rem, le tiroir
       laissait une bande vide à droite des mots et couvrait presque toute la
       page. */
    width: min(15.5rem, 74vw); height: 100%;
    padding-top: calc(1.1rem + env(safe-area-inset-top));
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));
    border-left: 1px solid var(--trait); border-right: 0;
    box-shadow: 0 0 40px rgb(0 0 0 / .18);
    transform: translateX(100%);
    transition: transform .22s ease;
    overscroll-behavior: contain;
  }
  .laterale.ouverte { transform: none; }

  .voile {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgb(9 20 19 / .42);
  }

  /* Compte et déconnexion, chassés de l'en-tête faute de place. */
  .laterale__pied {
    display: flex; flex-direction: column; gap: .15rem;
    margin-top: auto; padding-top: .8rem;
    border-top: 1px solid var(--trait-fin);
  }
  .laterale__pied form { display: contents; }
  .lien--bouton {
    background: none; border: 0; cursor: pointer;
    width: 100%; text-align: left; font: inherit;
  }
  .avatar--min { width: 22px; height: 22px; font-size: .7rem; flex: none; }

  /* --- En-tête ----------------------------------------------------------- */
  .entete {
    padding: .55rem 1rem;
    padding-top: calc(.55rem + env(safe-area-inset-top));
    gap: .7rem;
  }
  .entete__agence b { font-size: .9rem; }
  /* Le tiroir s'ouvre depuis la barre du bas : pas de second bouton en haut. */
  .ouvrir-menu { display: none; }
  /* Le nom prend la place qu'il reste ; « Déconnexion » vit dans le tiroir. */
  .utilisateur { margin-left: auto; }
  .utilisateur .bouton { display: none; }

  /* --- Contenu ----------------------------------------------------------- */
  .vue {
    padding: 1.45rem 1rem .9rem;
    /* Hauteur de la barre du bas, plus la barre d'accueil de l'iPhone. */
    padding-bottom: calc(4.6rem + env(safe-area-inset-bottom));
    gap: .9rem;
  }
  /* Trop étroit pour trois colonnes : le titre et ses actions se suivent.

     Les actions restent ici, sous le titre. Elles ont un temps flotté en bas
     à droite, près du pouce — mais une pastille posée par-dessus la page
     recouvre ce qu'on est en train de lire : un titre de carte, une case du
     calendrier. Mieux vaut la voir une fois, à sa place, que la retrouver
     partout. */
  /* En rangée plutôt qu'en grille : le titre prend la largeur, l'action et le
     coin se partagent la ligne suivante quand ils y tiennent, et passent l'un
     sous l'autre sinon. En trois lignes fixes, on perdait un cinquième de
     l'écran avant d'avoir rien lu. */
  .vue__tete { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .4rem; }
  /* Le titre cède de la place plutôt que de prendre la ligne entière : il se
     replie sur deux lignes s'il le faut, et laisse le coin monter à côté de
     lui. */
  .vue__titre { flex: 1 1 6rem; min-width: 0; }
  /* L'exercice, l'export et la comparaison restent sur la ligne du titre, calés
     à droite comme sur grand écran. Renvoyés dessous, ils coûtaient une ligne
     entière — un dixième de la hauteur utile — pour trois contrôles qui tiennent
     dans la marge du titre une fois resserrés.

     Écrit avec le parent, faute de quoi la règle qui range le coin dans la
     troisième colonne — plus bas dans cette feuille, donc lue après — reprenait
     le dessus : le coin partait dans une colonne qui n'existe plus sur
     téléphone, et le titre se retrouvait dessous, illisible. */
  .vue__tete .vue__coin {
    flex: 0 1 auto; margin-left: auto;
    grid-column: auto; justify-self: auto; justify-content: flex-end;
    gap: .25rem; flex-wrap: nowrap;
    /* Un seul réglage commande la hauteur de tout ce qui entre dans le coin —
       boutons, listes déroulantes —, sans avoir à les nommer un par un. */
    --hauteur-controle: 1.8rem;
  }
  .vue__coin .bouton { padding: .15rem .45rem; font-size: .72rem; }
  .vue__coin select {
    font-size: .72rem; padding: .15rem 1.3rem .15rem .4rem;
    background-position: right .3rem center; background-size: 13px;
  }
  /* L'action de la page, elle, garde sa largeur : elle porte un verbe — « Nouveau
     contrat », « Poser une absence » — et se lit de loin. Elle passe donc sous le
     titre, seule sur sa ligne. */
  .vue__tete .vue__actions { order: 1; flex: 1 1 100%; justify-content: flex-start; }
  /* Le titre tenait sur deux lignes — « Bonjour Maxime » coupé en deux — et
     poussait tout le reste vers le bas d'un écran qui n'en a pas à revendre. */
  .vue__tete h1 { font-size: 1.18rem; }
  .vue__tete p { font-size: .84rem; }

  /* --- Barre du bas ------------------------------------------------------ */
  .barre-basse {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; z-index: 40; inset: auto 0 0 0;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--trait);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .barre-basse__lien {
    display: flex; flex-direction: column; align-items: center; gap: .12rem;
    padding: .45rem .2rem .5rem;
    background: none; border: 0; cursor: pointer;
    font-size: .64rem; line-height: 1.25; text-align: center;
    color: var(--encre-3); text-decoration: none;
    /* Repère tactile minimum, même quand le libellé est court. */
    min-height: 3.1rem;
    -webkit-tap-highlight-color: transparent;
  }
  .barre-basse__lien:hover { text-decoration: none; }
  .barre-basse__lien[aria-current="page"] { color: var(--marque); font-weight: 600; }
  .barre-basse__icone { position: relative; display: block; }
  .barre-basse__icone svg { width: 22px; height: 22px; display: block; }
  .barre-basse__pastille {
    position: absolute; top: -5px; right: -9px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 20px; background: var(--attention); color: #fff;
    font-family: var(--mono); font-size: .58rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }

  /* --- Saisie ------------------------------------------------------------ */
  /* En dessous de 16 px, iOS zoome à la prise de focus et ne redézoome pas :
     tous les champs repassent à 16 px sur téléphone. */
  .champ input, .champ select, .champ textarea,
  input, select, textarea { font-size: 16px; }

  /* --- Densité -----------------------------------------------------------
     Un téléphone tient six fois moins de choses qu'un écran de bureau, et
     tout gardait ses mesures de bureau : trois chiffres occupaient un écran
     entier, et il fallait faire défiler pour atteindre ce qu'on venait
     chercher. Cartes, tuiles et boutons se resserrent.

     La limite basse n'est pas le goût mais le doigt : 2,4 rem font trente-huit
     pixels de haut, et l'aire réellement touchable d'un bouton déborde son
     dessin. Rien ne descend en dessous. */
  .carte { padding: .85rem .9rem; gap: .7rem; }

  .tuile { padding: .7rem .8rem; }
  .tuile__val { font-size: 1.3rem; }
  .tuile__pic { width: 1.6rem; height: 1.6rem; }
  .tuile__pic svg { width: .9rem; height: .9rem; }
  .etiq { font-size: .66rem; letter-spacing: .07em; }

  .bouton { min-height: 2.4rem; padding: .35rem .85rem; font-size: .84rem; }
  .bouton--min { min-height: 2.1rem; }
  .champ input, .champ select { min-height: 2.4rem; }

  /* --- Tableaux ---------------------------------------------------------- */
  /* Ils défilent latéralement plutôt que d'écraser les colonnes ; l'élan
     reste dans le tableau au lieu de faire bouger la page entière. */
  .tableau { overscroll-behavior-x: contain; }
  table { min-width: 30rem; font-size: .82rem; }
  th, td { padding: .5rem .6rem; }

  /* --- Le tableau retourné en fiches --------------------------------------
     Huit colonnes ne tiennent pas dans un téléphone. Le tableau défilait donc
     de côté, à l'intérieur de son cadre : un geste qu'on déclenche sans le
     vouloir en faisant défiler la page, et le site paraît glisser sous le
     doigt. Chaque ligne devient une fiche, un champ par ligne, son intitulé
     devant — celui de l'en-tête, que le script y recopie.

     Rien n'est masqué : ce qui se lit sur grand écran se lit ici aussi, en
     hauteur plutôt qu'en largeur. */
  .tableau table.empile { min-width: 0; width: 100%; display: block; }
  .tableau .empile thead { display: none; }
  .tableau .empile tbody, .tableau .empile tr { display: block; }
  .tableau .empile tr {
    padding: .55rem .8rem;
    border-bottom: 1px solid var(--trait-fin);
  }
  .tableau .empile tr:last-child { border-bottom: 0; }
  .tableau .empile tr:nth-child(even) { background: var(--surface-2); }

  .tableau .empile td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: .16rem 0; border: 0;
    text-align: right; white-space: normal;
    /* Les largeurs posées pour tenir des colonnes côte à côte n'ont plus
       d'objet, et débordaient : chaque champ occupe sa ligne. */
    width: auto; min-width: 0; max-width: none;
  }
  .tableau .empile td::before {
    content: attr(data-libelle);
    flex: none; max-width: 45%; text-align: left;
    font-family: var(--mono); font-size: .66rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--encre-3); font-weight: 700;
  }
  /* Une cellule sans intitulé — les boutons d'action, une case à cocher —
     prend la ligne entière plutôt que de laisser un vide à gauche. */
  .tableau .empile td:not([data-libelle]) { justify-content: flex-end; }
  .tableau .empile td:not([data-libelle])::before { content: none; }
  /* Le premier champ nomme la fiche : c'est le client, la personne, la date. */
  .tableau .empile td:first-child { font-size: .95rem; font-weight: 650; }
  .tableau .empile td[colspan] { display: block; text-align: left; }
  .tableau .empile td:empty { display: none; }
  /* Les cellules qui refusaient de se couper tiennent maintenant sur une
     ligne à elles : elles peuvent revenir à la ligne. */
  .tableau .empile .num, .empile .mono, .empile .actions-ligne { white-space: normal; }
  .tableau .empile .actions-ligne > * + * { margin-left: .3rem; }

  /* --- Grilles ----------------------------------------------------------- */
  .grille { gap: .8rem; }
  /* « minmax(0, 1fr) » et non « 1fr » : une colonne « 1fr » refuse de descendre
     sous la largeur minimale de son contenu, et un tableau large repoussait
     alors la carte — donc la page entière — hors de l'écran. */
  .grille--2, .grille--3, .grille--21, .grille--synthese { grid-template-columns: minmax(0, 1fr); }
  .grille--4, .grille--actions { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .fiches { grid-template-columns: minmax(0, 1fr); }

  /* Un en-tête de carte porte parfois un titre ET une commande (une date à
     choisir, un bouton) : les deux passent à la ligne plutôt que de déborder.
     « flex-wrap » n'a aucun effet sur les <span> qui ne sont pas des conteneurs
     flex, la règle est donc sans risque pour les autres en-têtes. */
  .carte__tete { flex-wrap: wrap; }
  .carte__tete > *, .carte__tete span { min-width: 0; flex-wrap: wrap; }

  /* Une tuile fait la moitié de l'écran : le sélecteur posé à côté du libellé
     passe sous lui plutôt que de l'écraser. Il est à 16 px comme les autres
     champs — sans quoi iOS zoome à l'ouverture de la liste. */
  .tuile__tete { flex-wrap: wrap; }
  .tuile__choix { max-width: 100%; }
  .rangee, .rangee--3 { grid-template-columns: minmax(0, 1fr); }

  /* Douze mois sur 34 cl de large : les barres restent lisibles, le chiffre
     posé dessus ne l'était plus et forçait la largeur de la colonne. */
  .graph { gap: .15rem; }
  .graph__nb { display: none; }
  .graph__mois { font-size: .6rem; }
}

/* Le tiroir ouvert fige la page derrière lui. */
body.tiroir-ouvert { overflow: hidden; }

/* Le second chemin de la page de connexion : obtenir des accès quand on n'en
   a pas encore. Détaché du formulaire par un filet, pour qu'on ne le prenne
   pas pour un bouton de plus du même geste. */
.login-autre {
  margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid var(--trait-fin);
  display: flex; flex-direction: column; gap: .6rem; align-items: center;
}
.login-autre span { font-size: .82rem; color: var(--encre-2); }

/* ===========================================================================
   Barre latérale repliée
   ---------------------------------------------------------------------------
   Sur un écran chargé — un tableau large, un calendrier — les 15 rem du menu
   se paient. Replié, il ne garde que les pictogrammes ; le libellé revient en
   infobulle. Le choix est retenu d'une visite à l'autre.
   =========================================================================== */

.replier {
  margin-left: auto; flex: none;
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 5px;
  color: var(--encre-3); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.replier:hover { background: var(--surface-2); color: var(--encre); }
.replier svg { width: 16px; height: 16px; }

@media (min-width: 52.01rem) {
  .app--reduit { grid-template-columns: 3.6rem 1fr; }

  .app--reduit .laterale { padding-left: .5rem; padding-right: .5rem; overflow-x: hidden; }
  .app--reduit .marque { justify-content: center; gap: 0; }
  .app--reduit .marque__lien { gap: 0; }
  .app--reduit .marque__nom { display: none; }

  /* Le bouton repasse sous le sigle : côte à côte, il n'y a plus la place. */
  .app--reduit .marque { flex-direction: column; gap: .5rem; }
  .app--reduit .replier { margin-left: 0; }

  /* Les intitulés de groupe disparaissent, mais le filet garde la césure :
     sans lui, les quatorze pictogrammes formeraient une colonne indistincte. */
  .app--reduit .menu__titre { display: none; }
  .app--reduit .menu__groupe + .menu__groupe {
    border-top: 1px solid var(--trait-fin); padding-top: .45rem; margin-top: .45rem;
  }

  .app--reduit .lien { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  .app--reduit .lien__texte { display: none; }
  .app--reduit .lien svg { width: 19px; height: 19px; }

  /* La pastille n'a plus de place à droite du libellé : elle se pose sur
     l'angle du pictogramme, comme sur la barre du bas de l'iPhone. */
  .app--reduit .lien { position: relative; }
  .app--reduit .lien__pastille {
    position: absolute; top: .1rem; right: .35rem; margin: 0;
    min-width: 15px; padding: 0 3px; font-size: .58rem;
    background: var(--attention); color: #fff; text-align: center;
  }

  .app--reduit .laterale__pied .lien__texte,
  .app--reduit .laterale__pied form { display: none; }
}

/* Retour : toujours à gauche du titre, sur toutes les pages où l'on arrive
   depuis un bouton. Une place unique, pour qu'on la cherche une seule fois. */
.vue__titre { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.retour {
  flex: none; margin-top: .15rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); color: var(--encre-2);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.retour:hover { background: var(--surface-2); color: var(--encre); border-color: var(--encre-3); text-decoration: none; }
.retour svg { width: 17px; height: 17px; }

/* Les actions de page — ajouter, exporter, filtrer — toutes à droite du titre. */
.vue__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: center; }
/* Le coin haut droit : l'ancienne place des actions, laissée à ce qui
   accompagne la page — un export, une navigation de mois. */
.vue__coin { grid-column: 3; justify-self: end;
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* --- Tableau de notes : ajouter, et voir en grand ------------------------- */
.liege-actions { display: flex; gap: .3rem; margin-left: auto; }
.liege-bouton {
  width: 28px; height: 28px; flex: none; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); color: var(--encre-2); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.liege-bouton:hover { background: var(--marque-doux); color: var(--marque); border-color: var(--marque); }
.liege-bouton svg { width: 15px; height: 15px; }
a.liege-bouton { text-decoration: none; }


/* Actions rangées en fin de ligne : modifier, supprimer, dupliquer. */
.actions-ligne { white-space: nowrap; text-align: right; }
.actions-ligne > * + * { margin-left: .3rem; }
.ligne-correction > td { background: var(--surface-2); padding: .9rem; }
.champ--boutons { justify-content: flex-end; }
.champ--boutons { display: flex; flex-direction: row; align-items: flex-end; gap: .4rem; }
/* Un complément de libellé que le téléphone n'a pas la place de porter. Le sens
   entier reste dans l'aria-label du bouton : ce qui disparaît est le mot, jamais
   l'information. */
@media (max-width: 52rem) { .tel-masque { display: none; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===========================================================================
   Modèle d'entretien
   =========================================================================== */

/* Case à cocher lisible : toute la ligne est cliquable, pas seulement la case. */
.coche {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .32rem .45rem; border-radius: var(--r);
  font-size: .85rem; color: var(--encre-2); cursor: pointer;
}
.coche:hover { background: var(--surface-2); color: var(--encre); }
.coche input { margin-top: .18rem; flex: none; accent-color: var(--marque); }
.coche .sous { margin-top: -.1rem; }

/* Une question du modèle : intitulé, précision, et de quoi la retirer. */
.question-modele {
  display: grid; gap: .7rem; align-items: end;
  grid-template-columns: 2fr 2fr auto;
  padding: .7rem 0; border-bottom: 1px solid var(--trait-fin);
}
.question-modele:last-child { border-bottom: 0; }
@media (max-width: 52rem) {
  .question-modele { grid-template-columns: minmax(0, 1fr); }
}

/* Réponses en regard : celle du collaborateur, celle du manager. Chacune sous
   son nom — sur une pièce signée, on doit savoir qui a écrit quoi. */
.deux-voix { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 52rem) { .deux-voix { grid-template-columns: minmax(0, 1fr); } }
.voix { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.voix__qui {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 600;
}
.voix--collaborateur .voix__qui { color: var(--marque); }
.voix--manager .voix__qui { color: var(--info); }
.voix__qui::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.voix__texte {
  border-left: 2px solid var(--trait); padding: .1rem 0 .1rem .7rem;
  font-size: .9rem; white-space: pre-wrap;
}
.voix--collaborateur .voix__texte { border-left-color: var(--marque); }
.voix--manager .voix__texte { border-left-color: var(--info); }
.voix__vide { color: var(--encre-3); font-style: italic; }

/* ===========================================================================
   Liste dépliante à cases — choisir dans un long catalogue
   ---------------------------------------------------------------------------
   Une trentaine de produits en cases à cocher tenaient sur deux écrans. Repliée,
   la liste occupe une ligne ; ce qui est retenu se lit sous elle, sans déplier.
   Un <details> plutôt qu'un menu maison : ouverture au clavier et fonctionnement
   sans JavaScript viennent avec.
   =========================================================================== */
.multi { position: relative; max-width: 32rem; }

.multi__resume {
  display: flex; align-items: center; gap: .5rem;
  padding: .48rem .7rem; cursor: pointer;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); font-size: .88rem;
  list-style: none;
}
.multi__resume::-webkit-details-marker { display: none; }
.multi__resume:hover { border-color: var(--encre-3); }
.multi__resume svg { width: 15px; height: 15px; margin-left: auto; color: var(--encre-3); transition: transform .15s ease; }
.multi[open] .multi__resume svg { transform: rotate(180deg); }
.multi[open] .multi__resume { border-color: var(--marque); }
.multi__compte { font-family: var(--mono); font-size: .72rem; color: var(--encre-3); }

/* Le panneau flotte au-dessus : déplier ne doit pas repousser la page. */
.multi__panneau {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .3rem);
  max-height: 22rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); box-shadow: 0 10px 30px rgb(9 20 19 / .12);
  padding: .5rem;
}
.multi__groupe { border: 0; margin: 0; padding: .2rem 0 .5rem; }
.multi__groupe + .multi__groupe { border-top: 1px solid var(--trait-fin); padding-top: .5rem; }
.multi__groupe legend { padding: 0 .45rem .25rem; }

/* Ce qui est coché, rappelé sous la liste repliée. */
/* Un bouton qui dit un état plutôt qu'une action : allumé quand la sélection
   qu'il commande est complète. */
.bouton--sobre[aria-pressed="true"] {
  background: var(--marque-doux); color: var(--marque); border-color: var(--marque);
}

.multi__choisis { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.multi__choisis:empty { display: none; }
.jeton {
  font-size: .76rem; padding: .12rem .5rem; border-radius: 20px;
  background: var(--marque-doux); color: var(--marque); font-weight: 500;
}

@media (max-width: 52rem) {
  .multi { max-width: none; }
  /* Sur téléphone le panneau flottant sortirait de l'écran : il reprend sa
     place dans le flux, et la page défile normalement. */
  .multi__panneau { position: static; max-height: 60vh; box-shadow: none; margin-top: .3rem; }
}

/* ===========================================================================
   Volet du jour, sur le calendrier
   ---------------------------------------------------------------------------
   Une case de calendrier ne peut pas tout montrer sans devenir illisible. Le
   volet donne le détail complet du jour sans quitter le mois : on compare deux
   journées en deux clics, au lieu de deux allers-retours.
   =========================================================================== */
.cal__jour[data-jour-cal] { cursor: pointer; }
.cal__jour[data-jour-cal]:hover { background: var(--surface-2); }
.cal__jour--ouvert { box-shadow: inset 0 0 0 2px var(--marque); }

/* --- Fiche en surimpression -------------------------------------------------
   Un rendez-vous se lit et se corrige sans quitter le mois : la fiche se pose
   par-dessus, le calendrier reste dessous, on la referme et on est revenu. */
.modale {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modale__fond { position: absolute; inset: 0; background: rgba(16, 24, 40, .38); }
.modale__boite {
  position: relative; z-index: 1;
  width: min(38rem, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); box-shadow: 0 18px 44px rgba(16, 24, 40, .22);
}
.modale__tete {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--trait-fin);
}
.modale__tete b { font-size: 1rem; }
.modale__corps { padding: 1rem; overflow-y: auto; overscroll-behavior: contain; }

/* Une fenêtre où l'on choisit plutôt qu'on ne lit : elle prend ses aises, les
   listes déroulantes ont besoin de place et le regard d'un peu d'air. */
.modale--ample .modale__boite { width: min(46rem, 100%); }

/* Hauteur confortable, mais seulement quand il y a quelque chose à choisir. */
.modale--haute .modale__boite { min-height: min(30rem, 82vh); }
.modale--ample .modale__tete  { padding: 1.1rem 1.6rem; }
.modale--ample .modale__tete b { font-size: 1.1rem; }
.modale--ample .modale__corps { padding: 1.6rem; display: flex; flex-direction: column; }

/* Le corps est une colonne flexible : ses enfants s'y écrasaient dès qu'il
   manquait de la place, et un tableau — qui défile déjà de lui-même — tombait
   à deux pixels de haut. Chacun garde donc sa hauteur, c'est le corps qui
   défile. */
.modale--ample .modale__corps > * { flex: none; }

/* Le corps occupe la hauteur laissée par l'en-tête : sans cela il s'arrêtait à
   son contenu et le bas de la fenêtre restait vide. */
.modale--haute .modale__corps { flex: 1; }
.modale--ample .champ > label { font-size: .86rem; }

/* La fenêtre a une hauteur à elle : le formulaire l'occupe, et ses boutons
   descendent au bas plutôt que de flotter au milieu du vide. */
.modale--haute .modale__corps > form { display: flex; flex-direction: column; flex: 1; }
.modale--haute .modale__corps .btn-row { margin-top: auto; }

/* --- Marche à suivre, en trois gestes --------------------------------------
   Les numéros comptent : ce sont des gestes à faire dans l'ordre, sur un
   téléphone qu'on tient d'une main pendant qu'on lit de l'autre. */
.etapes-aide {
  margin: .5rem 0 0; padding-left: 1.25rem;
  /* La remise à zéro générale retire les puces : ici les numéros font le sens,
     ce sont des gestes à faire dans l'ordre. */
  list-style: decimal;
}
.etapes-aide li { margin-bottom: .45rem; line-height: 1.5; }
.etapes-aide li:last-child { margin-bottom: 0; }
/* Le pictogramme du bouton « Partager » de l'iPhone, dessiné dans la phrase :
   c'est lui qu'on cherche des yeux, pas son nom. */
.glyphe {
  width: 1em; height: 1em; vertical-align: -.15em; margin: 0 .1em;
  color: var(--marque);
}

/* Le fond ne défile pas pendant qu'une fiche est ouverte. */
body.sans-defilement { overflow: hidden; }

/* Une entrée de calendrier qui s'ouvre : c'est un bouton, il ne doit pas en
   avoir l'air. */

.jour-volet {
  position: fixed; z-index: 45; top: 0; right: 0; bottom: 0;
  width: min(24rem, 92vw);
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--trait);
  box-shadow: -12px 0 34px rgb(9 20 19 / .14);
  padding-top: env(safe-area-inset-top);
}
.jour-volet__tete {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--trait-fin);
}
.jour-volet__tete b { font-size: .98rem; }
.jour-volet__corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; }

/* La liste déborde de la marge du volet : le fond du survol s'étend un peu
   plus large que le texte, qui reste aligné avec le reste du panneau. */
.jour-volet__liste { display: flex; flex-direction: column; gap: .15rem; margin: 0 -.5rem; }
.jour-volet__item { font-size: .88rem; }

/* La ligne entière est la cible : pastille, heure, libellé, détail. Viser le
   seul titre demandait de la précision pour une rangée haute de deux lignes,
   et le reste de la ligne paraissait mort. */
.jour-volet__ligne {
  display: flex; align-items: flex-start; gap: .5rem;
  width: 100%; padding: .45rem .5rem; border-radius: var(--r);
  border: 0; background: none; font: inherit; font-size: inherit;
  color: inherit; text-align: left;
  transition: background .12s ease;
}
.jour-volet__ligne .cal__pastille { margin-top: .38rem; flex: none; }
/* Le nom garde la couleur de marque : c'est lui qu'on lit, et il dit que la
   ligne mène quelque part même sans la survoler. */
a.jour-volet__ligne .jour-volet__nom,
button.jour-volet__ligne .jour-volet__nom { color: var(--marque); font-weight: 600; }
a.jour-volet__ligne, button.jour-volet__ligne { cursor: pointer; }
a.jour-volet__ligne:hover, button.jour-volet__ligne:hover {
  /* Le gris de fond du site se distinguait à peine du blanc de la carte : on
     survolait sans savoir si l'on visait la bonne ligne. Le vert pâle de la
     marque tranche, et dit en plus que la ligne appartient au site. */
  background: var(--marque-doux); text-decoration: none;
}
a.jour-volet__ligne:focus-visible, button.jour-volet__ligne:focus-visible {
  outline: 2px solid var(--marque-vif); outline-offset: 1px;
}

/* Le même geste ailleurs : dans les listes de la collaboration, une cellule
   ouvre la fiche de sa ligne. Là, la ligne est celle d'un tableau et ne peut
   pas devenir un bouton ; c'est le libellé qui l'ouvre, et il se présente
   comme le lien qu'il remplace. */
.jour-volet__ouvrir {
  background: none; border: 0; padding: 0; font: inherit; color: var(--marque);
  cursor: pointer; text-align: left;
}
.jour-volet__ouvrir:hover { text-decoration: underline; }

.jour-volet__actions {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--trait-fin);
}

@media (max-width: 52rem) {
  /* Sur téléphone, un volet latéral laisserait deux centimètres au contenu :
     il devient une feuille qui monte du bas, au-dessus de la barre. */
  .jour-volet {
    top: auto; left: 0; width: auto; max-height: 72vh;
    border-left: 0; border-top: 1px solid var(--trait);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 34px rgb(9 20 19 / .18);
    padding-bottom: calc(3.6rem + env(safe-area-inset-bottom));
  }
}

/* ===========================================================================
   Choix d'une période
   ---------------------------------------------------------------------------
   Deux champs date côte à côte se remplissent l'un après l'autre, et l'on se
   trompe volontiers de mois sur le second. Ce petit calendrier règle les deux
   d'un coup — premier clic le début, second la fin — sans retirer les champs
   natifs, qui restent saisissables et gardent le sélecteur du téléphone.
   =========================================================================== */
.plage { position: relative; margin-top: -.4rem; }

.plage__panneau {
  position: absolute; z-index: 30; left: 0; top: calc(100% + .35rem);
  width: 17.5rem; padding: .6rem;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); box-shadow: 0 10px 30px rgb(9 20 19 / .14);
}

.plage__tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; margin-bottom: .45rem;
}
.plage__mois { font-size: .88rem; text-transform: capitalize; }

.plage__semaine, .plage__grille {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.plage__semaine span {
  text-align: center; font-family: var(--mono); font-size: .64rem;
  color: var(--encre-3); padding-bottom: .2rem;
}

.plage__jour {
  border: 0; background: none; cursor: pointer;
  padding: .3rem 0; border-radius: 4px;
  font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--encre);
}
.plage__jour:hover { background: var(--surface-2); }
.plage__jour--hors { color: var(--encre-3); opacity: .55; }
.plage__jour--auj { font-weight: 700; text-decoration: underline; }
/* La bande entre les deux bornes : c'est elle qui fait lire une période
   plutôt que deux dates isolées. */
.plage__jour--entre { background: var(--marque-doux); border-radius: 0; }
.plage__jour--borne { background: var(--marque); color: #fff; font-weight: 600; }

.plage__aide { margin-top: .5rem; text-align: center; }
.plage__aide:empty { display: none; }

/* Une date isolée : l'enveloppe épouse le champ, le panneau s'ancre dessous. */
.plage--seule { display: block; position: relative; margin-top: 0; }

/* Le champ ouvre notre calendrier : l'icône du navigateur ouvrirait le sien
   par-dessus. Elle disparaît, la zone entière devient cliquable. */
.date--perso::-webkit-calendar-picker-indicator { display: none; }
/* En lecture seule, mais c'est un champ qu'on remplit : il garde l'allure d'un
   champ, pas celle d'un texte figé. */
.date--perso { cursor: pointer; background: var(--surface); color: var(--encre); }

@media (max-width: 52rem) {
  /* Le panneau flottant sortirait de l'écran : il reprend sa place dans le flux. */
  .plage__panneau { position: static; width: auto; box-shadow: none; margin-top: .4rem; }
}

/* Sur un tableau à deux, une note d'en face se lit sans se modifier : ses
   champs restent du papier, sans le liseré qui invite à écrire. Et son auteur
   prend la place des pastilles de couleur — c'est l'information qui manque le
   plus quand deux agences écrivent au même endroit. */
.postit--lecture input, .postit--lecture textarea { cursor: default; }
.postit--lecture input:hover, .postit--lecture textarea:hover { border-color: transparent; }
/* L'auteur reste lisible sans survol, à la différence de la barre d'actions :
   sur un tableau à deux, ne pas savoir qui a écrit une note la rend inutile. */
.postit__auteur {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .02em;
  color: rgb(0 0 0 / .5); margin-top: .05rem;
}
/* La barre garde sa place même vide de pastilles, pour que « Traitée » ne
   saute pas d'un bord à l'autre selon que la note est la nôtre. */
.postit--lecture .postit__couleurs { min-height: .85rem; }

/* --- Note de rappel ---------------------------------------------------------
   Un rappel tient en trois choses : qui, quel numéro, pourquoi. La note est
   donc plus basse et plus étroite que celle d'un sujet, et occupe toute la
   largeur de sa colonne — on en empile une dizaine sans faire défiler.
   -------------------------------------------------------------------------- */
.postit--rappel {
  width: calc(100% - 1.5rem);
  padding: .5rem .6rem .35rem;
  gap: .2rem;
  transform: rotate(-0.5deg);
}
.postit--rappel .postit__titre { font-size: .88rem; }
.postit--rappel .postit__texte { min-height: 0; resize: none; font-size: .8rem; }
/* La date de relance reste, c'est elle qui remonte le rappel dans « À traiter ». */
.postit--rappel .postit__date { font-size: .72rem; }
.postit--rappel .postit__barre { padding-top: .15rem; }

@media (max-width: 62rem) {
  /* Empilés, tous les tableaux se valent : la note reprend sa largeur normale. */
  .postit--rappel { width: 100%; }
}

/* --- Un seul tableau de notes affiché --------------------------------------
   Quand on isole un tableau, il prend toute la largeur et gagne en hauteur :
   c'est précisément parce qu'il déborde qu'on est venu le voir seul.
   -------------------------------------------------------------------------- */
.tableaux-prospection--seul { grid-template-columns: minmax(0, 1fr); }
.tableaux-prospection--seul .tableau-liege { height: 74vh; }

/* Le compteur dans un onglet : discret, mais il dit tout de suite où ça
   s'accumule. */
/* --- Onglets à gauche, réglages à droite -----------------------------------
   Deux questions distinctes sur une seule ligne — quel onglet, et de quoi le
   restreindre : le jour repéré sur « Mes notes », les filtres sur les
   contrats. Empilées, elles prenaient deux fois la hauteur pour dire ce qui
   se lit d'un coup d'œil, et repoussaient d'autant le tableau qu'on vient
   consulter. Sur écran étroit, la seconde passe simplement à la ligne. */
.barre-onglets {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem 1rem; flex-wrap: wrap;
}
/* Les onglets gardent leur largeur entière : comprimés, ils se replient sur
   deux ou trois lignes et l'on ne voit plus où l'on est. Ce sont les réglages
   qui cèdent — ils passent à la ligne, et restent alors calés à droite. */
.barre-onglets > .segments { flex: 0 0 auto; }
.barre-onglets .filtres { margin-left: auto; justify-content: flex-end; }
/* Sur téléphone, tout est déjà sur sa propre ligne : alignés à droite, les
   contrôles descendaient en escalier, chacun décalé du précédent. */
@media (max-width: 52rem) {
  .barre-onglets .filtres { margin-left: 0; justify-content: flex-start; }
  /* Les listes prennent la largeur : leurs intitulés sont longs — « Tous les
     collaborateurs » — et une liste déroulante coupe son texte sans prévenir.
     La recherche et son bouton partagent la ligne suivante. */
  .barre-onglets .filtres > select { flex: 1 1 100%; }
  .barre-onglets .filtres input[type="search"] { flex: 1 1 8rem; max-width: none; }
  .barre-onglets .filtres > .bouton { flex: 0 0 auto; }
}
/* Le champ de recherche prendrait toute la place qu'on lui laisse ; ici il
   partage la ligne avec trois listes et deux boutons. */
.barre-onglets .filtres input[type="search"] { max-width: 15rem; }
.notes-jour { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.notes-jour .filtres input[type="date"] { font-size: .84rem; }


.segments__compte {
  display: inline-block; margin-left: .3rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  color: var(--encre-3);
}
[aria-current="page"] .segments__compte { color: inherit; }