/* Congés Ados : mobile d'abord, sans bibliothèque. Palette reprise du prototype du 06/09. */
:root{
  --bg:#f4f5f7; --card:#ffffff; --ink:#16191d; --ink2:#4a5058; --line:#d8dce2;
  --accent:#1d4ed8; --accent-ink:#ffffff;
  --warn-bg:#fff7e6; --warn-line:#e0a800; --warn-ink:#6b4e00;
  --stop-bg:#fdeaea; --stop-line:#c0392b; --stop-ink:#8b1f14;
  --ok-bg:#e9f6ec; --ok-line:#2e7d32; --ok-ink:#1b5e20;
  --mute:#6b7280; --gris:#9aa3ae;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
a{color:var(--accent)}
h1{font-size:1.45rem;margin:16px 0 10px}
h2{font-size:1.1rem;margin:0 0 8px}
h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);margin:16px 0 6px}
code,.mono{font-family:Consolas,Menlo,monospace;font-size:.92em}
pre.mono{white-space:pre-wrap;word-break:break-word;background:#f7f8fa;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:.88rem}
.choix{user-select:all;word-break:break-all}

.entete{background:#12161c;color:#fff}
.entete-int{max-width:1100px;margin:0 auto;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.marque{color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem}
.sous{font-size:.8rem;color:var(--gris)}
.nav{display:flex;flex-wrap:wrap;gap:4px;width:100%}
.nav a,.nav .btn.lien{color:#dfe4ea;text-decoration:none;background:#232a33;border:1px solid #333c47;border-radius:6px;padding:6px 10px;font-size:.88rem}
.nav a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:#fff}
.principal{max-width:1100px;margin:0 auto;padding:6px 14px 40px}
.pied{max-width:1100px;margin:0 auto;padding:14px;color:var(--mute);font-size:.82rem;border-top:1px solid var(--line)}

.carte{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}
.carte.inactif{opacity:.75}
.carte.etroit{max-width:460px}
.colonnes{display:grid;gap:14px}
@media(min-width:800px){.colonnes{grid-template-columns:1fr 1fr}}
.lede{color:var(--ink2);margin:0 0 12px}
.muet{color:var(--mute);font-size:.9rem}
.mini{font-size:.8rem;color:var(--mute)}
.petit-texte{font-size:.82rem}
.fort{font-weight:700}
.neg{color:var(--stop-ink);font-weight:700}
.rappel{background:var(--warn-bg);border-left:4px solid var(--warn-line);padding:8px 10px;border-radius:6px;color:var(--warn-ink)}
.cadre .rappel{margin:10px 0}
.accuse{border-color:var(--ok-line);background:var(--ok-bg)}
.texte-long h1{font-size:1.35rem}
.texte-long h2{font-size:1.05rem;margin-top:18px}
.texte-long mark{background:#fff1a8}
.texte-long hr{border:0;border-top:1px solid var(--line);margin:14px 0}

.flash{padding:10px 12px;border-radius:8px;margin:10px 0;border:1px solid}
.flash-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.flash-erreur{background:var(--stop-bg);border-color:var(--stop-line);color:var(--stop-ink)}
.flash-avert{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}

label{display:block;font-weight:600;font-size:.92rem;margin-bottom:4px}
label.radio{font-weight:400;display:flex;gap:8px;align-items:flex-start;margin:6px 0}
label.radio input{margin-top:4px;width:auto}
.obl{color:var(--stop-ink);font-weight:400;font-size:.82rem}
.fac{color:var(--mute);font-weight:400;font-size:.82rem}
.hint{color:var(--mute);font-size:.84rem;margin:4px 0 0}
.hint.avert{color:var(--warn-ink)}
.erreur{color:var(--stop-ink);font-size:.88rem;margin:4px 0 0}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--stop-line)}
fieldset{border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:0 0 12px}
legend{font-weight:600;font-size:.92rem;padding:0 4px}
.champ{margin-bottom:12px}
.deux{display:grid;gap:10px}
@media(min-width:560px){.deux{grid-template-columns:1fr 1fr}}
.ligne-form{display:grid;gap:10px;align-items:end}
@media(min-width:700px){.ligne-form{grid-template-columns:1fr 1fr 1fr auto}}
.ligne-form .champ{margin:0}

.btn{display:inline-block;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:8px;font:inherit;cursor:pointer;text-decoration:none;line-height:1.2}
.btn.secondaire{background:#fff;color:var(--accent)}
.btn.danger{background:#fff;color:var(--stop-ink);border-color:var(--stop-line)}
.btn.petit{padding:6px 10px;font-size:.86rem}
.btn.lien{background:transparent;border-color:#333c47}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.principal-btn{font-weight:600}
form.inline{display:inline}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}

.solde{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:0}
.solde div{background:#f7f8fa;border-radius:8px;padding:8px 10px}
.solde dt{font-size:.78rem;color:var(--mute)}
.solde dd{margin:0;font-size:1.1rem}
.solde.compact dd{font-size:1rem}
.recap{margin:0}
.recap div{display:grid;grid-template-columns:130px 1fr;gap:6px;padding:5px 0;border-bottom:1px solid #eef0f3}
.recap dt{color:var(--mute);font-size:.88rem}
.recap dd{margin:0}

ul.demandes{list-style:none;padding:0;margin:0}
ul.demandes li.demande{border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px}
.ligne{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.note{background:var(--warn-bg);border-radius:6px;padding:6px 8px;margin-top:6px;font-size:.9rem}
.statut-RETIREE,.statut-NONRETENUE{opacity:.65}
.historique{padding-left:18px;font-size:.9rem}
.historique time{color:var(--mute)}

.feu{display:inline-block;min-width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);vertical-align:middle;font-size:.78rem;line-height:14px;padding:0 4px;color:#fff}
.feu-v{background:var(--ok-line)} .feu-o{background:var(--warn-line)} .feu-r{background:var(--stop-line)} .feu-g{background:var(--gris)}
.signaux .feu,.feu:not(:empty){padding:2px 10px;height:auto;line-height:1.3;border-radius:12px;font-weight:600}
.liste-signaux{list-style:none;padding:0;margin:8px 0 0}
.liste-signaux li{padding:6px 8px;border-radius:6px;margin-bottom:4px;font-size:.9rem;border-left:4px solid}
.liste-signaux .code{font-family:Consolas,Menlo,monospace;font-size:.78rem;color:var(--mute);margin-right:4px}
.niv-r{background:var(--stop-bg);border-color:var(--stop-line);color:var(--stop-ink)}
.niv-o{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.niv-i{background:#f3f4f6;border-color:#c7ccd3;color:var(--ink2)}
span.niv-r,span.niv-o{padding:1px 6px;border-radius:10px;border:1px solid;display:inline-block;margin:1px 0}

.badge{display:inline-block;font-size:.76rem;padding:2px 8px;border-radius:10px;background:#eef0f3;color:var(--ink2)}
.badge-statut{background:#e8eefc;color:#1e3a8a}
.badge-r{background:var(--stop-bg);color:var(--stop-ink)} .badge-o{background:var(--warn-bg);color:var(--warn-ink)} .badge-v{background:var(--ok-bg);color:var(--ok-ink)}

.defilant{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink2);background:#f7f8fa}
.grille th[scope="row"]{white-space:nowrap;font-size:.84rem;text-transform:none;letter-spacing:0}
.grille td.abs{background:#e8eefc}
.grille td.abs-non{color:var(--mute)}
.grille tr.depasse td,.grille tr.depasse th{background:var(--stop-bg)}
/* Avenant 6 (DEC-160) : trois états visuels au lieu de deux sur la ligne de semaine. */
.grille tr.toleree td,.grille tr.toleree th{background:var(--warn-bg)}
/* Avenant 7 : une semaine sans place se voit avant d'ouvrir le formulaire, même quand elle n'est
   ni tolérée ni refusée. Une marque de bord, pas un fond, pour ne pas écraser les trois niveaux. */
.grille tr.sans-place th[scope="row"]{box-shadow:inset 3px 0 0 var(--warn-line)}
.grille td.places{white-space:normal}
.grille tr.sans-place td.places{font-weight:600}
/* Avenant 9 (§17.4, DEC-168) : une indisponibilité structurelle n'est pas un congé. Elle porte sa
   propre marque, hachurée et sans fond bleu, pour qu'aucune couleur ne la fasse passer pour une
   absence de congé. */
.grille td.structurelle{background:repeating-linear-gradient(45deg,#f2f3f5,#f2f3f5 5px,#e6e8ec 5px,#e6e8ec 10px)}
.marque-structurelle{display:inline-block;border:1px dashed var(--gris);color:var(--ink2);font-size:.7rem;border-radius:6px;padding:0 5px;line-height:1.5}
.grille td.places .repos-semaine,.grille td.places .structurelle-semaine{display:block;white-space:normal}
.detail-structurelles li{color:var(--ink2)}
.detail-structurelles{border-top:1px dashed var(--line);margin-top:3px;padding-top:3px}
.filtres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.filtres a{font-size:.86rem;padding:4px 10px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink2);background:#fff}
.filtres a[aria-current="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.liens-export{list-style:none;padding:0}
.liens-export li{margin-bottom:10px}
.lien-perso{font-size:.84rem;background:#f7f8fa;padding:8px;border-radius:6px;border:1px solid var(--line)}

.hors-periode-liste{background:var(--warn-bg);border-left:4px solid var(--warn-line);padding:8px 10px;border-radius:6px;font-size:.9rem}
.code-affiche{border-color:var(--warn-line);background:var(--warn-bg)}
.code-personnel{font-family:Consolas,Menlo,monospace;font-size:2rem;letter-spacing:.3em;margin:6px 0;user-select:all}
.apercu{border:1px dashed var(--line);border-radius:8px;padding:12px;margin:14px 0;background:#fafbfc}
.apercu h2{font-size:1rem}
.apercu .chiffre{font-size:1.3rem;font-weight:700}
details summary{cursor:pointer;color:var(--accent)}

/* Lot 3 : jours de repos souhaités (CH). Blocs montrés ou cachés par le type choisi (JavaScript) ; sans JavaScript, tout est visible. */
[hidden]{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bloc-ch[aria-invalid="true"]{border-color:var(--stop-line)}
.grille-ch{display:grid;gap:6px;margin:8px 0 12px}
.semaine-ch{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.semaine-ch-titre{grid-column:1 / -1;font-size:.8rem;color:var(--mute);margin-top:4px}
.entete-ch .semaine-ch-titre{display:none}
.jour-ch-entete{font-size:.74rem;color:var(--mute);text-align:center;text-transform:uppercase}
.jour-ch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 2px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:400;font-size:.82rem;margin:0;cursor:pointer;position:relative;text-align:center}
.jour-ch input{width:20px;height:20px;margin:0;accent-color:var(--accent)}
.jour-ch .jj{color:var(--mute);font-size:.72rem}
.jour-ch .num{font-weight:600}
.jour-ch .marque{font-size:.68rem;font-weight:700;text-decoration:none;border-radius:8px;padding:0 5px;line-height:1.4}
.jour-ch.reunion{background:var(--warn-bg);border-color:var(--warn-line)}
.jour-ch.reunion .marque{background:var(--warn-line);color:#fff}
.jour-ch.ferie{background:#f3f4f6}
.jour-ch.ferie .marque{background:var(--gris);color:#fff}
.jour-ch.dimanche{background:#f3f4f6;color:var(--mute)}
.jour-ch.vide{border:0;background:transparent;min-height:0}
.jour-ch:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:#e8eefc}
.jour-ch:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.jour-ch .marques{display:flex;gap:2px;justify-content:center;flex-wrap:wrap}
.jour-ch.repartir{background:#eef2ff;border-color:var(--accent)}
/* Avenant 2 du 08/09 (DEC-154) : navigation par mois de la grille des jours de repos. */
/* Filtre de « Mes demandes » (avenant 3 du 08/09, DEC-156). Cibles confortables au doigt. */
.filtre-demandes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0 0 12px;padding:10px;background:#f7f8fa;border-radius:8px}
.filtre-demandes .champ-filtre{flex:1 1 200px;margin:0}
.filtre-demandes select{width:100%;min-height:44px}
.filtre-retirees{flex:1 1 100%;display:flex;align-items:center;gap:8px;margin:0;min-height:44px}
.filtre-retirees input{width:20px;height:20px}
.filtre-retirees label{margin:0}
.filtre-compteur{flex:1 1 100%;margin:0;font-size:.86rem;font-weight:600;color:var(--ink2)}
.filtre-vide{margin:0 0 8px;color:var(--mute)}
.ch-nav{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:8px 0 4px}
.ch-nav .champ-mois{flex:1 1 200px;margin:0}
.ch-nav select{width:100%}
.ch-compteur{margin:0 0 6px;font-size:.86rem;font-weight:600;color:var(--ink2)}
.jour-ch.hors-mois{opacity:.55;background:#fafbfc}
.jour-ch.hors-mois .num{font-weight:400}
.ch-ailleurs{margin:4px 0 10px;padding:8px 10px;border:1px dashed var(--line);border-radius:8px;background:#fbfcfd}
.ch-ailleurs h3{margin:0 0 6px}
.ch-ailleurs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ch-ailleurs li{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:3px 6px;background:#fff;font-size:.84rem}
.ch-ailleurs button{min-height:32px;padding:2px 8px;font-size:.8rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink2);cursor:pointer}
.ch-ailleurs button:hover{border-color:var(--accent);color:var(--accent)}
.jour-ch .marque.marque-jr{background:var(--accent);color:#fff}
.champ-autre-jour{margin-top:8px}

/* Avenant du 08/09 (DEC-152) : jours à répartir, mis en évidence par une lettre, pas par la seule couleur. */
.marque-repartir{display:inline-block;background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;text-decoration:none;border-radius:8px;padding:0 5px;line-height:1.4}
.jours-repartir{margin-top:12px;background:#eef2ff;border-left:4px solid var(--accent);padding:8px 10px;border-radius:6px}
.jours-repartir h3{margin-top:0}
.liste-repartir{margin:6px 0 0;padding-left:20px;font-size:.9rem}
.liste-repartir li{margin-bottom:2px}
.ligne-repartir{font-size:.9rem;color:var(--ink2);margin:0 0 12px}
.apercu-jours{list-style:none;padding:0;margin:8px 0 0}
.apercu-jours>li{padding:8px 0;border-top:1px solid var(--line)}
.apercu-jours>li:first-child{border-top:0}
@media(max-width:400px){.jour-ch{min-height:50px;font-size:.76rem;padding:4px 1px}.jour-ch .jj{display:none}}

/* Avenant 4 du 08/09 (DEC-158) : détail jour par jour d'une semaine du calendrier.
   Le panneau vit dans une ligne de tableau qui couvre toutes les colonnes, pour ne casser ni la
   structure du tableau ni l'en-tête. Sans JavaScript il reste déplié : rien n'est perdu. */
.detail-controles{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.detail-controles .mini{margin:0}
.detail-bouton{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;padding:0;margin-right:2px;vertical-align:middle;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--accent);cursor:pointer;font:inherit;line-height:1}
.detail-bouton:hover{border-color:var(--accent)}
.detail-bouton:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.detail-bouton .fleche::before{content:"\25BE"}
.detail-bouton[aria-expanded="true"] .fleche::before{content:"\25B4"}
.grille tr.detail-semaine>td{background:#fafbfc;padding:8px 10px 12px}
.detail-titre{margin:0 0 6px}
/* Sept colonnes, toujours : le panneau montre la semaine entière du lundi au dimanche, et jamais
   un jour renvoyé à la ligne ou hors de vue. Les colonnes valent 1/7 de la largeur du tableau, si
   bien que le panneau n'élargit jamais la grille : on fait défiler l'un comme l'autre. */
.detail-jours{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.detail-jour{border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px;min-width:0}
.detail-date{margin:0 0 4px;font-size:.82rem}
.detail-date .jj{color:var(--mute)}
.detail-date .num{font-weight:600}
.detail-jour .marque{font-size:.68rem;font-weight:700;text-decoration:none;border-radius:8px;padding:0 5px;line-height:1.4;background:var(--gris);color:#fff}
.detail-jour .marque.marque-jr{background:var(--accent)}
.detail-jour.dimanche{background:#f3f4f6;color:var(--mute)}
.detail-jour.ferie{background:#f3f4f6}
.detail-jour.repartir{border-color:var(--accent)}
.detail-jour.hors-periode-jour{opacity:.6;background:#fafbfc}
.detail-jour.depasse-jour{background:var(--stop-bg)}
.detail-jour.toleree-jour{background:var(--warn-bg)}
.detail-jour.pic{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.detail-jour.pic.depasse-jour{border-color:var(--stop-line);box-shadow:inset 0 0 0 1px var(--stop-line);background:var(--stop-bg)}
.detail-jour.pic.toleree-jour{border-color:var(--warn-line);box-shadow:inset 0 0 0 1px var(--warn-line);background:var(--warn-bg)}
.detail-pic{margin:0 0 4px}
.detail-pic .badge{font-size:.7rem}
.detail-qui{list-style:none;margin:0;padding:0;font-size:.84rem}
.detail-qui li{padding:1px 0;word-break:break-word}
.detail-personne{margin:0}

/* Avenant 5 (DEC-159) : les congés trimestriels se lisent en états, pas en compteurs de jours.
   Chaque trimestre est une carte à part, celui de la période préparée est mis en avant. */
.trimestres{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.trimestre{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#f7f8fa}
.trimestre p{margin:0}
.trimestre-titre{margin:0 0 2px}
.trimestre.en-avant{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#fff}
.trimestre.etat-pris{background:var(--ok-bg)}
.trimestre.etat-perdu,.trimestre.etat-sansObjet{color:var(--mute)}
.champ-large{grid-column:1/-1}