/* ═══════════════════════════════════════════════════════════════════════
   Le style de Côté équipe — même dessin que Tour de rôle, autre couleur.
   Couche posée PAR-DESSUS app.css (08/11/2026).

   POURQUOI UNE AUTRE COULEUR. Les deux applications se ressemblent assez pour
   qu'on passe de l'une à l'autre sans réapprendre ; elles doivent se
   distinguer assez pour qu'on sache, d'un coup d'œil, dans laquelle on écrit.
   Le planning des familles est vert, les heures de l'équipe sont bleues — et
   le mot en serif italique reste pêche des deux côtés : c'est la maison.

   Pourquoi une feuille à part plutôt qu'une réécriture d'app.css : celui-ci
   fait 99 Ko et porte dix mois de réglages fins, écran par écran. Le refondre
   d'un bloc, c'est casser des choses qu'on ne saurait même pas nommer. Ici on
   ne touche qu'à ce qui fait le STYLE — la palette, les formes, le papier,
   la typographie des titres — et chaque règle d'app.css continue de valoir
   partout où celle-ci ne dit rien.

   Pour revenir en arrière : retirer la ligne <link> de vue.js. Rien d'autre.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────── la palette */
:root{
  --paper:#eef1f5; --card:rgba(255,255,255,.84); --flanc:#13263a;
  --ink:#131d28; --ink2:#6b7682; --ink3:#8b949e;
  --rule:rgba(19,38,58,.08); --rule2:rgba(19,38,58,.045); --sur2:#e6eff8;
  --accent:#2f6f9f; --accent-soft:#e6eff8; --sur-accent:#fff; --logo-vert:#2f6f9f;
  --crit:#c4523f; --crit-soft:#fadfd9;
  --warn:#b4653a; --warn-soft:#fde3d3;
  --calme:#3f6a78; --calme-soft:#dcebf6;
  --done:#8b9995;
  --ombre:0 10px 30px -18px rgba(19,38,58,.35);
  /* propres à cette couche */
  --mint:#2f6f9f; --mint-l:#c2dcf0; --mint-xl:#e6eff8;
  --peach:#f6a57a; --peach-l:#fde3d3;
  --vr:22px; --vease:cubic-bezier(.22,1,.36,1);
}
/* Le sombre garde son rôle : même famille de verts, posée sur l'encre. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0b1724; --card:rgba(26,40,56,.86); --flanc:#091220;
    --ink:#e8eef5; --ink2:#a9bed2; --ink3:#7e8d9c;
    --rule:rgba(255,255,255,.08); --rule2:rgba(255,255,255,.05); --sur2:#152a3a;
    --accent:#7fb6d3; --accent-soft:#152a3a; --sur-accent:#0b1724;
    --crit:#f0a195; --crit-soft:#36211d; --warn:#e8b98f; --warn-soft:#33261b;
    --mint:#7fb6d3; --mint-l:#6fa8c9; --mint-xl:#152a3a;
    --ombre:0 10px 30px -18px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#0b1724; --card:rgba(26,40,56,.86); --flanc:#091220;
  --ink:#e8eef5; --ink2:#a9bed2; --ink3:#7e8d9c;
  --rule:rgba(255,255,255,.08); --rule2:rgba(255,255,255,.05); --sur2:#152a3a;
  --accent:#7fb6d3; --accent-soft:#152a3a; --sur-accent:#0b1724;
  --crit:#f0a195; --crit-soft:#36211d; --warn:#e8b98f; --warn-soft:#33261b;
  --mint:#7fb6d3; --mint-l:#6fa8c9; --mint-xl:#152a3a;
  --ombre:0 10px 30px -18px rgba(0,0,0,.6);
}

/* ───────────────────────────────── le papier */
body{
  font-family:"Inter Tight","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(1200px 700px at 0 0,#cfe2f2,transparent 60%),
    radial-gradient(900px 700px at 100% 100%,#fbe1cf,transparent 60%),
    var(--paper);
  background-attachment:fixed;
  grid-template-columns:232px 1fr;
  gap:16px; padding:16px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body{
    background:
      radial-gradient(1200px 700px at 0 0,#132a3e,transparent 60%),
      radial-gradient(900px 700px at 100% 100%,#2a1e18,transparent 60%),
      var(--paper);
  }
}
:root[data-theme="dark"] body{
  background:
    radial-gradient(1200px 700px at 0 0,#132a3e,transparent 60%),
    radial-gradient(900px 700px at 100% 100%,#2a1e18,transparent 60%),
    var(--paper);
}
main{padding:14px 14px 48px 6px}

/* ───────────────────────────────── la barre latérale
   Elle garde ses INTITULÉS. Treize entrées en icônes seules obligeraient à
   survoler chacune pour la reconnaître : on gagnerait une silhouette et on
   perdrait l'écran. Seule la forme change — encre, coins ronds, lien actif
   en pastille menthe. */
.flanc{
  background:var(--flanc); color:#cfe4dd; border-right:0;
  border-radius:26px; padding:20px 0 16px; height:calc(100vh - 32px);
  top:16px; box-shadow:0 18px 40px -26px rgba(19,38,58,.7);
}
.marque .mot,.marque a{color:#fff}
.creche{color:#9fb6c7}
.creche span{color:#7f97a7}
.qui-sortie{color:#c2dcf0}
.lien{
  color:#a9bed2; border-left:0; margin:1px 10px; padding:7px 12px;
  border-radius:12px; transition:background .22s var(--vease), color .22s var(--vease);
}
.lien:hover{background:rgba(255,255,255,.07); color:#fff}
.lien.on{
  background:var(--mint-l); color:#13263a; font-weight:600;
  box-shadow:0 0 0 5px rgba(194,220,240,.14);
}
.lien-n{background:var(--peach); color:#3a1d0d; font-weight:700}
.pied-t{color:#7f97a7}

/* ───────────────────────────────── les titres
   Un mot en serif italique : c'est la signature du style. On le pose sur le
   DERNIER mot du titre, choisi par le gabarit (vue.js), sans toucher au texte
   que chaque écran se donne. */
h1{font-family:"Inter Tight","Fredoka",system-ui,sans-serif; letter-spacing:-.02em}
h1 .mot-s{
  font-family:"Instrument Serif",Georgia,serif; font-style:italic; font-weight:400;
  color:var(--peach); letter-spacing:0;
}
.bloc-t h2{font-family:"Inter Tight","Fredoka",system-ui,sans-serif; letter-spacing:-.01em}
.chapeau{color:var(--ink2)}

/* ───────────────────────────────── les surfaces vitrées */
.tuile,.bloc > .table-enveloppe,.card,.tb-tuile,.encadre,.form{
  border-radius:var(--vr);
}
.tuile,.tb-tuile{
  background:var(--card); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7); box-shadow:var(--ombre);
}
/* Les quatre chiffres de tête : ce sont eux qu'on lit en arrivant, ils
   méritent un peu plus d'air que le reste. */
.tb-cles{gap:14px}
.tb-cles > *{padding:18px 20px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tuile,
  :root:not([data-theme="light"]) .tb-tuile{border-color:rgba(255,255,255,.08)}
}
:root[data-theme="dark"] .tuile,:root[data-theme="dark"] .tb-tuile{border-color:rgba(255,255,255,.08)}

table{border-radius:16px; overflow:hidden}
thead th{background:var(--sur2); color:var(--ink2); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; font-size:11px}

/* ───────────────────────────────── boutons en pilules */
.bouton{
  border-radius:999px; font-weight:600; letter-spacing:.005em;
  transition:transform .18s var(--vease), filter .18s, box-shadow .18s;
}
.bouton:hover{transform:translateY(-1px); filter:brightness(1.04)}
.bouton:active{transform:none}
.bouton.primaire{
  background:var(--peach); color:#3a1d0d; border-color:transparent;
  box-shadow:0 8px 18px -10px rgba(246,165,122,.9);
}
.bouton.primaire:hover{background:var(--peach)}
.bouton.danger{border-radius:999px}
.etiq,.pill,.pastille,.lien-n{border-radius:999px}
.etiq{font-weight:600; letter-spacing:.01em}

/* ───────────────────────────────── champs */
input,select,textarea{border-radius:12px; transition:border-color .18s, box-shadow .18s}
input:focus,select:focus,textarea:focus{
  border-color:var(--mint); box-shadow:0 0 0 3px var(--mint-xl); outline:0;
}
.requis{color:var(--peach); font-weight:600; letter-spacing:.04em}

/* ───────────────────────────────── entrée en cascade
   Les écrans du bureau sont rendus par le serveur : il n'y a pas de framework
   pour échelonner l'animation. On s'appuie sur l'ordre des blocs, ce que le
   CSS sait faire seul avec :nth-of-type. */
main > .bloc{animation:v-entre .5s var(--vease) both}
main > .bloc:nth-of-type(1){animation-delay:.04s}
main > .bloc:nth-of-type(2){animation-delay:.10s}
main > .bloc:nth-of-type(3){animation-delay:.16s}
main > .bloc:nth-of-type(4){animation-delay:.22s}
main > .bloc:nth-of-type(n+5){animation-delay:.28s}
.entete{animation:v-entre .5s var(--vease) both}
@keyframes v-entre{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  main > .bloc,.entete{animation:none}
  .bouton:hover{transform:none}
}

/* ───────────────────────────────── téléphone */
@media (max-width:860px){
  body{padding:0; gap:0; grid-template-columns:1fr}
  .flanc{border-radius:0; height:auto; top:0; box-shadow:none}
  main{padding:14px}
}

/* La bascule vers Tour de rôle, en pied de barre : un lien, pas un bouton —
   on y retrouve sa session, il n'y a rien à poster. */
.flanc-switch{display:flex; align-items:center; gap:9px; margin:0 10px 10px;
  padding:9px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:#c2dcf0; font-size:13.5px;
  text-decoration:none; transition:background .18s, color .18s}
.flanc-switch:hover{background:rgba(255,255,255,.13); color:#fff}
.flanc-switch svg{flex:none; opacity:.85}

/* ───────────────────────────── Les noms, les nombres, les notes.
   Trois petites choses qui rendaient les tableaux pénibles à lire : le lien
   bleu souligné du navigateur, le « 0 jour » coupé en deux lignes faute de
   place, et la date de saisie collée à la note qui la suit. */

/* Un nom de salariée est quelque chose qu'on OUVRE, pas une référence vers
   l'extérieur : il garde la couleur du texte, et ne se souligne qu'au survol. */
.lien-s{color:var(--ink); text-decoration:none; font-weight:600;
  border-bottom:1px solid transparent; transition:border-color .15s, color .15s}
.lien-s:hover,.lien-s:focus-visible{color:var(--accent); border-bottom-color:var(--accent)}
.lien-s:focus-visible{outline:2px solid var(--mint); outline-offset:3px; border-radius:3px}

/* Un nombre et son unité ne se séparent pas. */
td.n,.sol-reste{white-space:nowrap}

/* ── Une seule police dans les tableaux (08/11/2026).
   Les colonnes de chiffres héritaient d'une monospace qui tranchait avec les
   noms : deux caractères différents sur une même ligne, et le regard bute.
   L'alignement des décimales, lui, se garde très bien avec tabular-nums. */
.bloc table th,.bloc table td,
.bloc table th.n,.bloc table td.n{font-family:inherit; font-variant-numeric:tabular-nums}
/* Un nom de salariée ne se coupe pas en deux lignes : c'est la colonne qui
   s'élargit, pas la ligne qui grandit. */
.bloc table td:first-child .lien-s{white-space:nowrap}

/* La date de la saisie, puis la note, chacune sur sa ligne. */
.jour-saisi{display:block; font-variant-numeric:tabular-nums}
.note-s{display:block; margin-top:2px; font-size:12.5px; color:var(--ink3); line-height:1.4}

/* L'étiquette qui suit un nom absent de longue durée. */
.lien-s + .etiq{margin-left:8px; vertical-align:1px}

/* La case à cocher de la fiche, lisible et cliquable sur toute sa ligne. */
.coche-ligne{display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:9px 11px; border-radius:10px; background:var(--sur2)}
.coche-ligne input{accent-color:var(--accent); width:17px; height:17px; flex:none}

/* Une fiche désactivée, un congé terminé, une heure retirée : la ligne reste
   là, consultable, mais elle s'efface. Le marqueur « sortie » existait déjà
   dans le code sans qu'aucune règle ne lui réponde (08/11/2026) — le nom, lui,
   restait noir, et c'est lui qu'on lit d'abord. */
tbody tr.sortie td,
tbody tr.sortie .lien-s{color:var(--ink3)}
tbody tr.sortie .lien-s:hover{color:var(--accent)}
tbody tr.sortie .etiq{opacity:.6}
tbody tr.sortie{background:var(--rule2)}

/* Le contrat : « CDI » se lit comme un fait, pas comme une alerte ; une fin de
   CDD se remarque, parce qu'elle appelle une décision avant sa date. */
.contrat-cdi{font-size:12.5px; font-weight:600; color:var(--ink3); letter-spacing:.02em}
.contrat-cdd{font-size:12.5px; font-weight:600; color:var(--warn);
  font-variant-numeric:tabular-nums; white-space:nowrap}

/* ── Les fiches de l'équipe : des colonnes de largeur fixe.
   Laissées libres, elles se redistribuaient à chaque ligne selon la longueur
   d'un poste ou d'un identifiant, et l'œil n'avait plus de repère vertical. */
.fiches-equipe{table-layout:fixed; width:100%}
.fiches-equipe th,.fiches-equipe td{vertical-align:middle}
.fiches-equipe th:nth-child(1),.fiches-equipe td:nth-child(1){width:28%}
.fiches-equipe th:nth-child(2),.fiches-equipe td:nth-child(2){width:26%}
.fiches-equipe th:nth-child(3),.fiches-equipe td:nth-child(3){width:10%}
.fiches-equipe th:nth-child(4),.fiches-equipe td:nth-child(4){width:13%; white-space:nowrap}
.fiches-equipe th:nth-child(5),.fiches-equipe td:nth-child(5){width:12%}
/* La colonne des actions : assez large pour que « modifier » tienne sur une
   ligne. À 7 % il se coupait en deux (« modifi / er »). */
.fiches-equipe th:nth-child(6),.fiches-equipe td:nth-child(6){width:11%; text-align:right;
  white-space:nowrap}
/* Un poste long passe à la ligne dans sa colonne, il n'élargit plus la table. */
.fiches-equipe td{overflow-wrap:anywhere}
/* L'étiquette d'absence sous le nom plutôt qu'à côté : la ligne garde sa hauteur. */
.fiches-equipe td:nth-child(1) .etiq{margin-left:0; margin-top:3px; display:inline-block}
.fiches-equipe td:nth-child(1) .lien-s + .etiq{margin-left:7px}

/* ═══════════════════════════ Les angles (08/11/2026).
   Une tuile arrondie dont un enfant ne l'est pas laisse voir, aux quatre
   coins, le fond qui passe dessous — l'en-tête coloré, la première ligne d'un
   tableau, une barre de progression. On coupe au rayon plutôt que d'arrondir
   chaque enfant un par un : il y en a trop, et il s'en ajoutera. */
.tb-tuile,.bloc > .table-enveloppe,.deborde,.tuile{overflow:hidden}
/* Sauf les tableaux larges : « .deborde » porte justement un défilement
   horizontal pour les écrans étroits, et le masquer faisait se chevaucher les
   colonnes au lieu de les laisser glisser. L'écrêtage vertical suffit aux
   angles (08/11/2026). */
.deborde{overflow-x:auto; overflow-y:hidden}
.tb-tuile{border-radius:var(--vr)}
.tb-tuile > .tb-tete{border-radius:0}
.tb-tuile table,.bloc table{border-radius:0}
/* La dernière ligne d'un tableau ne doit pas porter de filet : le bord de la
   tuile le fait déjà, et les deux ensemble font une double ligne. */
.tb-tuile tbody tr:last-child td,.bloc tbody tr:last-child td{border-bottom:0}

/* ═══════════════════════════ Le tableau des soldes de congés.
   Deux compteurs distincts : les congés payés, qui se décomptent, et les jours
   Alisfa, qui expirent au 30 juin. Les mêler dans une seule case cachait la
   seule chose qu'on vient y chercher. La note passe en infobulle — étalée,
   elle doublait la hauteur de chaque ligne. */
.soldes-cp{table-layout:fixed; width:100%}
.soldes-cp th,.soldes-cp td{vertical-align:middle}
/* Le nom et son étiquette tiennent sur UNE ligne : deux lignes ici et une
   ailleurs donnaient des hauteurs inégales d'une salariée à l'autre, et l'œil
   perdait le fil horizontal (08/11/2026). */
/* La première colonne porte le nom ET son étiquette d'absence : « Marina
   BOUSSERONDE » suivi de « congé maternité » est la ligne la plus longue, et
   c'est elle qui fixe la largeur. Posée trop étroite avec nowrap, elle ne se
   coupait pas — elle DÉBORDAIT sur la colonne voisine (08/11/2026). */
.soldes-cp th:nth-child(1),.soldes-cp td:nth-child(1){width:27%}
.soldes-cp th:nth-child(2),.soldes-cp td:nth-child(2){width:9%}
.soldes-cp th:nth-child(3),.soldes-cp td:nth-child(3){width:8%}
.soldes-cp th:nth-child(4),.soldes-cp td:nth-child(4){width:9%}
.soldes-cp th:nth-child(5),.soldes-cp td:nth-child(5){width:12%}
.soldes-cp th:nth-child(6),.soldes-cp td:nth-child(6){width:8%}
.soldes-cp th:nth-child(7),.soldes-cp td:nth-child(7){width:16%}
.soldes-cp th:last-child,.soldes-cp td:last-child{width:11%; text-align:right}
/* Nom et étiquette sur UNE ligne, sans jamais sortir de la colonne : la place
   vient de la largeur ci-dessus et du motif raccourci (« maternité » plutôt
   que « congé maternité »). Si un jour cela ne suffit plus, c'est la fin du
   nom qui s'efface en fondu — jamais un débordement sur la colonne voisine,
   jamais une seconde ligne. */
.soldes-cp td:nth-child(1){white-space:nowrap; overflow:hidden;
  mask-image:linear-gradient(to right, #000 calc(100% - 18px), transparent);
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 18px), transparent)}
.soldes-cp td:nth-child(1) .etiq{font-size:10px; padding:1px 6px; margin-left:6px}

/* Corriger un compteur depuis sa ligne. Le bouton reste discret : on vient
   d'abord LIRE ce tableau, et la correction est l'exception. */
.modif-solde{padding:3px 11px; font-size:11.5px; font-weight:600; white-space:nowrap}
.soldes-cp td:nth-child(n+2){white-space:nowrap}
/* Un intitulé de colonne a le droit de tenir sur deux lignes — « Congés
   supplémentaires » forcé sur une seule débordait sur la colonne voisine. */
.soldes-cp th{white-space:normal; line-height:1.3}

/* Un compteur : un nombre, posé comme les autres. Seul le zéro se colore —
   encadrer une valeur sur deux en orange ne hiérarchisait rien. */
.sol-n{font-weight:600; color:var(--ink)}
.sol-n.zero{color:var(--crit)}
.rien{color:var(--ink3)}

/* La date de saisie et sa note sur la même ligne : la colonne est assez large,
   et la ligne garde la hauteur des autres. */
.soldes-cp .jour-saisi{display:inline}
.note-puce{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px;
  background:var(--sur2); color:var(--ink3); font-size:11px; font-weight:600;
  letter-spacing:.03em; cursor:help; vertical-align:1px}

/* ═══════════════════════════ Les angles, suite (08/11/2026).
   Deux causes, et aucune n'était dans la tuile elle-même.

   1. La rangée des quatre chiffres est posée sur un conteneur au fond gris,
      arrondi à 3 px, qui sert à dessiner les séparateurs par le « gap ».
      Ses enfants étant arrondis à 22 px, le gris ressortait aux quatre coins
      de chacun. On retire le fond du conteneur et on écarte les tuiles d'un
      vrai espace : chacune porte déjà son fond et son bord.

   2. Les tuiles sont translucides (84 %). Sur le dégradé de la page, cette
      transparence prend une teinte froide au ras du bord arrondi, et c'est
      ce liseré grisâtre qu'on voyait. On les rend opaques : le flou derrière
      ne servait à rien puisqu'il n'y a rien à voir au travers. */
.tuiles{background:transparent; border:0; border-radius:0; gap:14px; overflow:visible}
.tuiles > *{border:1px solid var(--rule2)}

:root{--card:#fdfeff}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--card:#1a2838}
}
:root[data-theme="dark"]{--card:#1a2838}
.tuile,.tb-tuile{backdrop-filter:none; border-color:var(--rule2)}

/* ── La barre d'onglets des salariées : bleue, comme le reste (08/11/2026).
   Elle était restée au vert de Tour de rôle, d'où cet écart bizarre entre
   une application bleue et sa barre verte. */
:root{--barre-fond:#13263a; --barre-texte:#a9bed2; --barre-actif:#fff;
  --barre-pastille:rgba(255,255,255,.16)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--barre-fond:#091220; --barre-texte:#a9bed2;
    --barre-actif:#fff; --barre-pastille:rgba(255,255,255,.14)}
}
:root[data-theme="dark"]{--barre-fond:#091220; --barre-texte:#a9bed2;
  --barre-actif:#fff; --barre-pastille:rgba(255,255,255,.14)}

/* Cinq onglets tiennent, à condition de resserrer un peu. */
@media (max-width:420px){ .barre-o{font-size:10px; padding-left:0; padding-right:0} }

/* Le lien « Changer mon mot de passe » et son explication se collaient. */
.s-ligne .hl-t,.s-ligne .hl-s{display:block}
.s-ligne .hl-s{margin-top:2px}

/* ═══════════════ Les trois gestes de l'accueil (08/11/2026).
   Une salariée ouvre cette application pour faire quelque chose, pas pour
   lire. Trois pavés assez grands pour le pouce, chacun d'une couleur, et le
   geste écrit en toutes lettres : poser, déclarer, envoyer. */
.pr-gestes{display:grid; gap:10px; margin:0 0 20px}
.pr-geste{display:grid; grid-template-columns:52px 1fr; align-items:center;
  column-gap:14px; row-gap:2px; padding:16px 18px; border-radius:18px;
  text-decoration:none; color:var(--ink); border:1px solid transparent;
  transition:transform .14s var(--vease), filter .14s}
.pr-geste:active{transform:scale(.985)}
.pr-geste b{grid-column:2; font-size:16.5px; line-height:1.2}
.pr-geste em{grid-column:2; font-style:normal; font-size:13px; color:var(--ink2)}
.pr-i{grid-row:1 / span 2; display:grid; place-items:center;
  width:52px; height:52px; border-radius:16px; background:rgba(255,255,255,.72)}
.pr-i svg{width:26px; height:26px; stroke-width:1.9}

.pr-geste.conges{background:var(--calme-soft)}
.pr-geste.conges .pr-i{color:var(--calme)}
.pr-geste.heures{background:var(--accent-soft)}
.pr-geste.heures .pr-i{color:var(--accent)}
.pr-geste.papiers{background:var(--warn-soft)}
.pr-geste.papiers .pr-i{color:var(--warn)}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pr-i{background:rgba(255,255,255,.1)}
}
:root[data-theme="dark"] .pr-i{background:rgba(255,255,255,.1)}
@media (prefers-reduced-motion:reduce){ .pr-geste{transition:none} }

/* Au-delà du téléphone, les trois tiennent sur une ligne. */
@media (min-width:620px){ .pr-gestes{grid-template-columns:repeat(3,1fr)} }

/* ═══════════════ Les deux portes de l'écran « Absences » (08/11/2026).
   Un congé se demande, une absence se déclare : deux gestes distincts, un
   seul écran. Repliées, parce qu'on vient d'abord relire sa liste. */
.pr-portes{display:grid; gap:10px; margin:0 0 20px}
.pr-porte{border-radius:18px; overflow:hidden}
.pr-porte > summary{display:grid; grid-template-columns:52px 1fr auto;
  align-items:center; column-gap:14px; row-gap:2px; padding:16px 18px;
  cursor:pointer; list-style:none}
.pr-porte > summary::-webkit-details-marker{display:none}
.pr-porte > summary b{grid-column:2; font-size:16.5px; line-height:1.2}
.pr-porte > summary em{grid-column:2; font-style:normal; font-size:13px; color:var(--ink2)}
.pr-porte > summary::after{content:"+"; grid-column:3; grid-row:1 / span 2;
  font-size:22px; line-height:1; color:var(--ink2); padding-right:4px}
.pr-porte[open] > summary::after{content:"−"}
.pr-porte > .s-form,.pr-porte > .s-aide{padding:0 18px}
.pr-porte > .s-aide{padding-bottom:16px}
.pr-porte.conges{background:var(--calme-soft)}
.pr-porte.conges .pr-i{color:var(--calme)}
.pr-porte.absence{background:var(--warn-soft)}
.pr-porte.absence .pr-i{color:var(--warn)}
@media (min-width:620px){ .pr-portes{grid-template-columns:repeat(2,1fr); align-items:start} }

/* ═══════════════════════════ Trancher une demande (08/11/2026).

   Deux boutons de même poids visuel laissaient la décision sans couleur : on
   lisait « Accepter » et « Refuser » comme deux options neutres, alors que ce
   sont deux issues opposées. Le vert et le rouge disent lesquelles en un coup
   d'œil, et le refus n'est plus relégué sous la carte. */
:root{ --oui:#2f7d4f; --oui-soft:#def0e4; --non:#b23c2c; --non-soft:#fbe2dd; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --oui:#7fd3a0; --oui-soft:#17301f; --non:#f0a195; --non-soft:#36211d;
  }
}
:root[data-theme="dark"]{
  --oui:#7fd3a0; --oui-soft:#17301f; --non:#f0a195; --non-soft:#36211d;
}

.dem-choix{display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap}
.dem-choix .bouton{min-width:132px; justify-content:center; font-weight:700}
.bouton.oui{background:var(--oui); color:#fff; border-color:transparent;
  box-shadow:0 8px 18px -10px rgba(47,125,79,.85)}
.bouton.oui:hover{background:var(--oui); filter:brightness(1.06)}
.bouton.non{background:var(--non-soft); color:var(--non);
  border:1px solid color-mix(in srgb, var(--non) 35%, transparent)}
.bouton.non:hover{background:var(--non); color:#fff}

/* ── Ce que le congé coûte au solde.
   Trois chiffres, et la seule question qui compte : reste-t-il assez ? */
.dem-solde{margin-top:14px; padding:12px 14px; border-radius:14px;
  background:var(--sur2); border:1px solid var(--rule)}
.dem-solde.alerte{background:var(--crit-soft);
  border-color:color-mix(in srgb, var(--crit) 30%, transparent)}
.dem-solde.inconnu{background:var(--warn-soft);
  border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
.dem-solde.inconnu b{color:var(--warn); display:block; margin-bottom:3px}
.dem-solde p{font-size:13px; color:var(--ink2); line-height:1.5; margin:0}
.ds-cases{display:flex; gap:10px; flex-wrap:wrap}
.ds-case{flex:1 1 118px; min-width:0; background:var(--card); border-radius:11px;
  padding:9px 12px; border:1px solid var(--rule2)}
.ds-t{display:block; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink3); font-weight:700; margin-bottom:3px}
.ds-v{display:block; font-size:17px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.ds-v.negatif{color:var(--crit)}
.ds-v.zero{color:var(--warn)}
.ds-note{margin-top:9px !important}
.ds-note b{color:var(--crit)}

/* ── Revenir sur une réponse, ou l'effacer.
   Deux gestes discrets au bout de la ligne : ils ne doivent pas attirer l'œil
   avant la réponse elle-même, mais être là quand on les cherche. */
.reponses th:nth-child(1),.reponses td:nth-child(1){white-space:nowrap}
.reponses th:last-child,.reponses td:last-child{width:19%; text-align:right}
.rep-act{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.rep-act form{margin:0}
.rep-act .bouton{padding:3px 10px; font-size:11.5px; font-weight:600; white-space:nowrap}
.rep-act .bouton.danger{color:var(--crit);
  border-color:color-mix(in srgb, var(--crit) 32%, transparent)}
.rep-act .bouton.danger:hover{background:var(--crit); color:#fff; border-color:transparent}

/* ── Les gestes sur une demande en attente, côté salariée (08/11/2026).
   Trois verbes alignés, de poids décroissant : modifier d'abord, supprimer en
   dernier et en rouge. */
.hl-gestes{display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; align-items:center}
.hl-gestes form{margin:0}
.hl-gestes .bouton{padding:4px 12px; font-size:12.5px; font-weight:600}
.hl-gestes .bouton.danger,.hl-act .bouton.danger{color:var(--crit);
  border-color:color-mix(in srgb, var(--crit) 32%, transparent)}
.hl-gestes .bouton.danger:hover{background:var(--crit); color:#fff; border-color:transparent}

/* Le formulaire quand il sert à corriger plutôt qu'à déposer : un liseré
   suffit à dire qu'on n'est plus en train de créer. */
.s-form.en-modification{border-left:3px solid var(--accent); padding-left:13px}
.pr-envoi{display:flex; gap:9px; align-items:center; flex-wrap:wrap}

/* ── Les actions de « Tous les congés de la période ». */
.tous-conges th:last-child,.tous-conges td:last-child{width:22%; text-align:right}

/* ── Les champs décimaux, sans leurs flèches (08/11/2026).

   Un pas de 0,01 rend le petit compteur du navigateur inutilisable : il
   faudrait cliquer soixante-deux fois pour aller de 1 à 1,62, et la flèche
   prend la place du curseur quand on vise la fin du nombre. Ces valeurs se
   relèvent sur un bulletin de paie et se tapent ; le clavier numérique des
   téléphones reste acquis, puisque le champ demeure un champ nombre. */
input[type="number"][step="0.01"]{appearance:textfield; -moz-appearance:textfield}
input[type="number"][step="0.01"]::-webkit-outer-spin-button,
input[type="number"][step="0.01"]::-webkit-inner-spin-button{
  appearance:none; -webkit-appearance:none; margin:0}
.lignes-heures th:last-child,.lignes-heures td:last-child{width:20%; text-align:right}

/* ── Une largeur plancher pour les tableaux à beaucoup de colonnes
   (08/11/2026). Sans elle, « table-layout:fixed » avec « width:100% » comprime
   les colonnes à l'infini sur un écran étroit : les chiffres se chevauchent au
   lieu que le tableau glisse dans son enveloppe. En dessous de ce plancher, on
   fait défiler — c'est à cela que sert « .deborde ». */
.soldes-cp,.tous-conges,.lignes-heures,.reponses{min-width:820px}
.toutes-absences{min-width:900px}
.toutes-absences th:last-child,.toutes-absences td:last-child{width:19%; text-align:right}