/* Direction artistique GPOL : couleurs du logo (bleu du « V », vert du point et du cercle), formes arrondies,
   lisible en plein soleil (contraste fort, boutons d'au moins 44 px).
   Polices hébergées dans l'appli (hors connexion) : Quicksand pour la marque et les titres, Nunito pour le texte (licence OFL). */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/fonts/nunito.woff2) format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/quicksand.woff2) format("woff2"); }
:root {
  --bleu-gpol: #2868b0;
  --vert-gpol: #4cb083;
  --gris-gpol: #686868;
  --fond: #f1f5f9;
  --carte: #ffffff;
  --texte: #1b2b3f;
  --texte-2: #4f5d6e;
  --texte-3: #6d7a8a;
  --trait: #e3e9f0;
  --trait-2: #cbd5e1;
  --accent: var(--bleu-gpol);
  --accent-fonce: #1f5593;
  --accent-doux: #e8f0fa;
  --vert-doux: #e5f5ed;
  --rouge: #b91c1c;
  --rouge-fond: #fee2e2;
  --orange: #b45309;
  --orange-fond: #ffedd5;
  --vert: #1f7a54;
  --vert-fond: #ddf3e8;
  --jaune: #facc15;
  --jaune-fond: #fef9c3;
  --ombre: 0 1px 2px rgba(27, 43, 63, .04), 0 6px 22px rgba(40, 104, 176, .08);
  --ombre-forte: 0 18px 50px rgba(27, 43, 63, .22);
  --rayon: 18px;
  --barre-haut: 64px;
  --police-titre: "Quicksand", "Nunito", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); }
body { font-family: "Nunito", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; line-height: 1.45; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--police-titre); }
h1 { font-size: 1.65rem; letter-spacing: -.01em; margin: .2rem 0 .6rem; font-weight: 700; }
h2 { font-size: 1.15rem; margin: 1.3rem 0 .5rem; font-weight: 700; }
h3 { font-size: 1.02rem; margin: 1rem 0 .4rem; font-weight: 700; }
p { margin: .4rem 0; }
a { color: var(--accent); }
summary { cursor: pointer; padding: 6px 0; }
.chargement { padding: 3rem 1rem; text-align: center; color: var(--texte-3); }
.cap { display: inline-block; }
td.cap, th.cap { display: table-cell; } /* (sur une case de tableau, inline-block la sortirait du tableau) */
.cap::first-letter, .carte-jour h2::first-letter, .trame-jour h3::first-letter { text-transform: uppercase; }

/* ---------- Structure ---------- */
.page { padding: 16px 16px calc(92px + env(safe-area-inset-bottom)); max-width: 1440px; margin: 0 auto; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.entete h1 { margin: 0; }
.ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pile > * + * { margin-top: 8px; }
.discret { color: var(--texte-2); font-size: .92rem; }
.petit { font-size: .85rem; }
.centre { text-align: center; }

/* Navigation : en bas sur téléphone (à portée du pouce), en haut sur ordinateur */
nav.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--trait); display: flex; padding: 4px 4px env(safe-area-inset-bottom);
}
nav.barre .marque { display: none; }
nav.barre button {
  flex: 1; min-height: 58px; border: 0; background: none; font-size: .78rem; font-weight: 600; color: var(--texte-3); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; cursor: pointer;
}
nav.barre button svg { width: 24px; height: 24px; }
nav.barre button[aria-current="page"] { color: var(--accent); }
nav.barre button[aria-current="page"] svg { background: var(--accent-doux); border-radius: 10px; padding: 2px; width: 40px; }
/* Ordinateur : menu latéral */
@media (min-width: 820px) {
  nav.barre {
    top: 0; bottom: 0; right: auto; width: 232px; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 18px 12px; border-top: 0; border-right: 1px solid var(--trait); background: var(--carte); backdrop-filter: none;
  }
  nav.barre .marque {
    display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.35rem; letter-spacing: .04em;
    padding: 6px 10px; margin-bottom: 16px; color: var(--texte); text-decoration: none; border-radius: 12px;
  }
  nav.barre .marque:hover { background: var(--fond); }
  nav.barre .marque img { width: 64px; height: auto; }
  nav.barre button { flex: none; flex-direction: row; justify-content: flex-start; min-height: 44px; padding: 10px 12px; font-size: .95rem; gap: 12px; color: var(--texte-2); }
  nav.barre button svg { width: 20px; height: 20px; }
  nav.barre button[aria-current="page"] { background: var(--accent-doux); color: var(--accent); }
  nav.barre button[aria-current="page"] svg { background: none; width: 20px; padding: 0; }
  nav.barre button:hover { background: var(--fond); color: var(--texte); }
  nav.barre .pied { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--trait); font-size: .85rem; color: var(--texte-3); display: block; }
  nav.barre .pied strong { color: var(--texte); display: block; }
  .page { margin-left: 232px; padding: 22px 28px 40px; max-width: none; }
  .toast { bottom: 24px !important; left: 248px; }
}
nav.barre .pied { display: none; }

/* ---------- Boutons et champs ---------- */
.btn {
  min-height: 46px; min-width: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--trait-2);
  background: var(--carte); color: var(--texte); font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: background .15s, border-color .15s;
}
.btn:hover { border-color: var(--texte-3); }
.btn.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.principal:hover { background: var(--accent-fonce); }
.btn.danger { color: var(--rouge); border-color: #fca5a5; }
.btn.large { width: 100%; }
.btn.discret { background: var(--carte); color: var(--texte-2); }
.btn.icone { padding: 10px 14px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .cellule:focus-visible, .creneau:focus-visible { outline: 3px solid var(--vert-gpol); outline-offset: 2px; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix button { min-height: 46px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--trait-2); background: var(--carte); font-weight: 600; cursor: pointer; }
.choix button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
label.champ { display: block; margin: 10px 0; font-weight: 600; font-size: .95rem; }
label.champ > span { display: block; margin-bottom: 5px; color: var(--texte-2); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=month], select, textarea {
  width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid var(--trait-2); border-radius: 10px; background: var(--carte);
}
input[type=color] { width: 64px; height: 46px; border: 1px solid var(--trait-2); border-radius: 10px; padding: 3px; background: var(--carte); }
textarea { min-height: 80px; }
label.case { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; cursor: pointer; }
label.case input { width: 24px; height: 24px; flex: none; accent-color: var(--accent); }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }

/* ---------- Messages ---------- */
.message { padding: 12px 14px; border-radius: 12px; margin: 8px 0; font-weight: 600; border: 1px solid transparent; }
.message.erreur { background: var(--rouge-fond); color: var(--rouge); border-color: #fecaca; }
.message.orange { background: var(--orange-fond); color: var(--orange); border-color: #fed7aa; }
.message.ok { background: var(--vert-fond); color: var(--vert); border-color: #bbf7d0; }
.message.info { background: var(--carte); border-color: var(--trait); font-weight: 500; box-shadow: var(--ombre); }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.badge.rouge { color: var(--rouge); background: var(--rouge-fond); }
.badge.orange { color: var(--orange); background: var(--orange-fond); }
.badge.vert { color: var(--vert); background: var(--vert-fond); }
.badge.gris { color: var(--texte-2); background: #f1f5f9; }
.badge.bleu { color: var(--accent); background: var(--accent-doux); }
.point { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 2px; vertical-align: middle; }
.point.rouge { background: #dc2626; } .point.orange { background: #f59e0b; } .point.vert { background: var(--vert-gpol); }

/* ---------- Toast « Annuler » ---------- */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 60; max-width: 560px; margin: 0 auto;
  background: var(--texte); color: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--ombre-forte);
  display: flex; align-items: center; gap: 12px; font-weight: 600;
}
.toast .texte { flex: 1; }
.toast .btn { background: #fff; color: #0f172a; border-color: #fff; min-height: 42px; }
.toast .btn.fermer-toast { background: transparent; color: #fff; border-color: transparent; padding: 6px 10px; }
.toast.erreur { background: var(--rouge); }

/* ---------- Feuille (fenêtre) ---------- */
.voile { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.feuille {
  background: var(--carte); width: 100%; max-width: 620px; max-height: 92vh; overflow: auto; border-radius: 22px 22px 0 0;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: var(--ombre-forte);
}
@media (min-width: 700px) { .voile { align-items: center; } .feuille { border-radius: 22px; } }
.feuille .titre { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.feuille .titre h2 { margin: 4px 0 6px; font-size: 1.25rem; }
.fermer { min-width: 44px; min-height: 44px; border: 0; background: #f1f5f9; border-radius: 50%; font-size: 1.1rem; cursor: pointer; color: var(--texte-2); }
.actions { display: grid; gap: 10px; margin-top: 14px; }

/* ---------- Créneaux : teinte = couleur du métier, poste écrit ---------- */
.creneau {
  --c: var(--metier, #64748b);
  display: block; width: 100%; text-align: left; border: 0; border-left: 4px solid var(--c); border-radius: 8px;
  background: color-mix(in srgb, var(--c) 13%, white); padding: 5px 7px; margin: 3px 0; font-size: .82rem; line-height: 1.25; cursor: pointer; min-height: 44px; color: var(--texte);
}
.creneau:hover { background: color-mix(in srgb, var(--c) 22%, white); }
.creneau .h { font-weight: 750; white-space: nowrap; display: block; }
.creneau .p { color: var(--texte-2); font-size: .78rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Absence validée : créneau grisé et barré */
.creneau.absent { --c: #9ca3af; background: #e5e7eb; color: #6b7280; }
.creneau.absent .h { text-decoration: line-through; color: #6b7280; }
.creneau.absent .p { color: #9ca3af; }
.creneau.absent .mention { background: #6b7280; color: #fff; }
/* Absence demandée, en attente de validation : hachures orange, horaires lisibles */
.creneau.demande { --c: #f59e0b; background: repeating-linear-gradient(135deg, #fff7ed, #fff7ed 6px, #fde7c7 6px, #fde7c7 12px); box-shadow: inset 0 0 0 1px #f59e0b; }
.mention.demande { background: #f59e0b; color: #fff; }
.carte-jour .bloc.demande { --c: #f59e0b; background: repeating-linear-gradient(135deg, #fff7ed, #fff7ed 6px, #fde7c7 6px, #fde7c7 12px); }
.demande-carte { border-left: 5px solid #f59e0b; }
.creneau.ecole { --c: #7c3aed; background: #f3e8ff; }
.creneau.garde { --c: #0f172a; background: var(--jaune-fond); }
.creneau.modifie { box-shadow: 0 0 0 2px var(--jaune); }
.creneau.echange, .frise-piste .barre-c.echange { background: var(--jaune-fond); box-shadow: 0 0 0 2px var(--jaune); }
.creneau .ancien { text-decoration: line-through; color: var(--texte-3); }
.mention { display: inline-block; font-size: .68rem; font-weight: 750; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, .8); color: var(--texte-2); margin: 0 3px 2px 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.mention.modif { background: var(--jaune); color: #000; }

/* ---------- Ma semaine ---------- */
.jours-semaine { display: grid; gap: 10px; touch-action: pan-y; }
@media (min-width: 820px) { .jours-semaine { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.carte-jour { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px 14px; box-shadow: var(--ombre); }
.carte-jour.aujourdhui { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--ombre); }
.carte-jour.aujourdhui h2 { color: var(--accent); }
.carte-jour h2 { margin: 0 0 6px; font-size: 1.02rem; }
.carte-jour .grand { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.carte-jour .bloc { --c: var(--metier, #64748b); border-left: 5px solid var(--c); padding: 7px 12px; margin: 6px 0; background: color-mix(in srgb, var(--c) 10%, white); border-radius: 8px; cursor: pointer; }
.carte-jour .bloc.modifie { background: var(--jaune-fond); border-left-color: var(--jaune); }
.carte-jour .bloc.absent { --c: #94a3b8; background: #f5f8fb; }
.repos { color: var(--texte-3); font-weight: 600; }
/* Ma semaine façon agenda : la date à gauche, les horaires à droite */
.carte-jour.agenda { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: start; }
.carte-jour.agenda .date-col { display: flex; flex-direction: column; align-items: center; padding-top: 2px; }
.carte-jour.agenda .jsem { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); font-weight: 700; }
.carte-jour.agenda .jnum { font-size: 1.5rem; font-weight: 800; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.carte-jour.agenda.aujourdhui .jnum { background: var(--accent); color: #fff; }
.carte-jour.agenda.aujourdhui .jsem { color: var(--accent); }
.carte-jour.agenda.libre { background: transparent; box-shadow: none; border-style: dashed; padding-top: 6px; padding-bottom: 6px; }
.carte-jour.agenda.libre .repos { margin-top: 12px; }
.carte-jour.agenda .bloc:first-child, .carte-jour.agenda .lecteur + .bloc { margin-top: 0; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 820px) { .jours-semaine:has(.agenda) { grid-template-columns: 1fr; max-width: 760px; } }
.nav-semaine { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 10px 0; }
.nav-semaine .titre-sem { font-weight: 700; text-align: center; flex: 1; }

/* ---------- Accueil (tableau de bord) ---------- */
.tableau-bord { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 10px; }
@media (min-width: 700px) { .tableau-bord { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tableau-bord { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 16px 18px; box-shadow: var(--ombre); }
.carte h2 { margin: 0 0 10px; font-size: 1rem; color: var(--texte-2); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.carte-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lien { border: 0; background: none; color: var(--accent); font-weight: 650; cursor: pointer; min-height: 44px; padding: 0 4px; }
.carte.vedette { background: linear-gradient(135deg, var(--bleu-gpol) 0%, #2f7cc4 60%, #3a9bb8 100%); color: #fff; border: 0; cursor: pointer; }
.carte.vedette h2 { color: rgba(255, 255, 255, .8); }
.carte.vedette .quand { font-weight: 650; margin: 0; opacity: .95; }
.carte.vedette .grand-txt { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: 2px 0; }
.carte.vedette .poste-txt { font-weight: 600; opacity: .9; margin: 8px 0 0; font-size: .9rem; }
.carte.vedette .journee { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.carte.vedette .journee li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: rgba(255, 255, 255, .14); border-radius: 10px; padding: 8px 12px; }
.carte.vedette .journee li.evt { background: rgba(15, 118, 110, .55); }
.carte.vedette .journee .hh { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.carte.vedette .journee .pp { font-weight: 600; opacity: .95; }
.grand-txt { font-size: 1.3rem; font-weight: 750; }
.mini-liste { list-style: none; margin: 0; padding: 0; }
.mini-liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--trait); min-height: 44px; }
.mini-liste li:first-child { border-top: 0; }
.mini-liste li.cliquable { cursor: pointer; }
.mini-liste li.cliquable:hover { background: #f5f8fb; }
.mini-liste li.fete strong { color: var(--vert); }
.agenda-liste li { justify-content: flex-start; }
.agenda-liste .agenda-txt { flex: 1; min-width: 0; }
.agenda-ico { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; font-size: .9rem; }
.agenda-ico.evt { background: #ccfbf1; color: #0f766e; }
.agenda-ico.anniv { background: #fef3c7; color: #b45309; }
.semaine-mini { list-style: none; margin: 0 0 12px; padding: 0; }
.semaine-mini li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; min-height: 38px; }
.semaine-mini li.auj { background: var(--accent-doux); }
.semaine-mini li.auj .j { color: var(--accent); }
.semaine-mini .j { font-weight: 700; font-size: .85rem; color: var(--texte-2); text-transform: capitalize; }
.semaine-mini .c { display: flex; flex-wrap: wrap; gap: 6px; }
.semaine-mini .puce { background: #f1f5f9; border-radius: 6px; padding: 2px 8px; font-weight: 650; font-size: .88rem; }
.semaine-mini .puce.absent { color: var(--texte-3); text-decoration: line-through; }
.semaine-mini .puce.modifie { background: var(--jaune-fond); box-shadow: inset 0 0 0 1px var(--jaune); }
.compteur-large { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--texte-2); }
.compteur-large .jauge { display: block; height: 6px; border-radius: 6px; background: #e2e8f0; overflow: hidden; }
.compteur-large .jauge i { display: block; height: 100%; background: var(--vert-gpol); }
.chiffres-cles { display: flex; gap: 24px; margin-bottom: 8px; }
.chiffres-cles div { display: flex; flex-direction: column; }
.chiffres-cles strong { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
.chiffres-cles span { color: var(--texte-3); font-size: .85rem; }

/* ---------- Collaborateurs ---------- */
.entete-collab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.entete-collab .avatar { width: 48px; height: 48px; font-size: 1rem; }
.entete-collab .qui-collab { flex: 1; min-width: 180px; }
.entete-collab h1 { margin: 0; }
.entete-collab .choix-collab { max-width: 240px; }

table.infos-perso th { width: 40%; background: none; color: var(--texte-3); font-weight: 600; }
table.infos-perso td { font-weight: 600; }

/* ---------- Date en 3 roues (création de compte) ---------- */
.roues { position: relative; display: grid; grid-template-columns: 1fr 1.7fr 1.2fr; height: 200px; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; background: var(--carte); }
.roues::before { content: ''; position: absolute; left: 6px; right: 6px; top: 80px; height: 40px; border-radius: 8px; background: rgba(40, 104, 176, .10); pointer-events: none; }
.roues::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--carte), transparent 35%, transparent 65%, var(--carte)); }
.roue { height: 200px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; outline: none; }
.roue::-webkit-scrollbar { display: none; }
.roue:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.roue-marge { height: 80px; }
.roue-item { height: 40px; line-height: 40px; text-align: center; scroll-snap-align: center; font-size: 1.05rem; color: var(--texte-2); cursor: pointer; user-select: none; }
.roue-item.choisi { color: var(--texte); font-weight: 700; }

/* ---------- Pointeuse ---------- */
.carte.pointeuse { border: 2px solid var(--accent); margin-top: 12px; }
.carte.pointeuse .etat-pt { font-size: 1.3rem; font-weight: 800; margin: 2px 0 6px; }
.boutons-pt { display: grid; gap: 10px; margin: 12px 0 6px; }
.boutons-pt .btn { min-height: 64px; font-size: 1.15rem; }
@media (min-width: 700px) { .boutons-pt { grid-template-columns: 1fr 1fr; } }
/* Téléphone : carte compacte (titre et état sur une ligne, boutons côte à côte) */
@media (max-width: 699px) {
  .carte.pointeuse { padding: 10px 12px; margin-top: 8px; }
  .carte.pointeuse h2 { display: inline; font-size: .95rem; margin: 0; }
  .carte.pointeuse h2::after { content: ' · '; color: var(--texte-2); }
  .carte.pointeuse .etat-pt { display: inline; font-size: .95rem; margin: 0; }
  .carte.pointeuse p.petit { margin: 4px 0 0; }
  .boutons-pt { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 4px; }
  .boutons-pt .btn { min-height: 46px; font-size: 1rem; padding: 6px 10px; }
}

/* ---------- Export paie ---------- */
table.simple.paie { min-width: 860px; }
table.simple.paie td, table.simple.paie th { white-space: nowrap; }
table.simple.paie td.fort { font-weight: 800; color: var(--orange); }
table.simple.paie tr.cliquable { cursor: pointer; }
table.simple.paie tr.detail > td { background: #f5f8fb; padding: 8px 12px 14px; }
table.simple.paie tr.detail table.simple { background: var(--carte); }
.chiffres-cles.carte { flex-wrap: wrap; }
.semaines-paie { margin: 12px 0; }
.liste-semaines { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.liste-semaines .sem { background: var(--accent-doux); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.liste-semaines .num { font-size: .8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.liste-semaines .dates { font-size: 1.1rem; font-weight: 750; }
.liste-semaines .badge { align-self: flex-start; margin-top: 4px; }

/* ---------- Événements ---------- */
.puce-evt { display: block; width: 100%; text-align: left; border: 0; border-radius: 8px; background: #0f766e; color: #fff; padding: 4px 7px; margin: 3px 0; font-size: .76rem; line-height: 1.25; cursor: pointer; min-height: 36px; }
.puce-evt .h { display: block; font-weight: 750; }
.puce-evt .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .95; }
.carte-jour .bloc.evt { --c: #0f766e; background: #ccfbf1; }
.carte.invitation { border: 2px solid #0f766e; margin-top: 12px; }
.carte.invitation h2 { color: #0f766e; }
.reponse-evt { margin: 10px 0; }
.compteur-evt { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 6px; }
.compteur-evt.grand .nb { font-size: 1.1rem; }
.compteur-evt.grand .nb strong { font-size: 2rem; font-weight: 800; color: #0f766e; margin-right: 4px; }
.onglets.petits { margin: 0; padding: 3px; gap: 2px; }
.onglets.petits button { min-height: 36px; padding: 4px 10px; font-size: .82rem; }
.onglets.petits button[aria-selected="true"] { color: #fff; background: var(--accent); }
.grille-invites { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
.invites-detail { margin-top: 10px; }
.invites-detail h4 { margin: 10px 0 2px; font-size: .85rem; color: var(--texte-2); }

/* ---------- Barre d'outils du planning ---------- */
.barre-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.barre-outils .espace { flex: 1; }
/* Période au centre de l'écran : vue à gauche, « Aujourd'hui » à droite */
.barre-outils.trois { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.barre-outils.trois .gauche { justify-self: start; }
.barre-outils .onglets { flex-wrap: nowrap; }
.barre-outils .onglets button { white-space: nowrap; }
.barre-outils.trois .droite { justify-self: end; }
.barre-outils.trois .semaine-choix { justify-self: center; }
.barre-outils .onglets { margin: 0; }
.semaine-choix { display: flex; align-items: center; gap: 6px; }
.semaine-choix .periode { font-weight: 750; font-size: 1.12rem; min-width: 170px; text-align: center; letter-spacing: -.01em; }
.semaine-choix .btn.icone { font-size: 1.4rem; line-height: 1; padding: 6px 14px; }
@media (max-width: 600px) {
  .barre-outils { gap: 8px; }
  /* Téléphone : la période en premier, sur toute la largeur, puis vue et « Aujourd'hui » */
  .barre-outils.trois { grid-template-columns: 1fr auto; }
  .barre-outils.trois .semaine-choix { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; }
  .semaine-choix { width: 100%; justify-content: space-between; }
  .semaine-choix .periode { flex: 1; min-width: 0; font-size: 1rem; }
  .barre-outils .onglets button { padding: 6px 10px; font-size: .85rem; }
}

/* Pastille d'initiales et compteur d'heures */
.avatar { width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 750; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; flex: none; letter-spacing: .02em; }
.qui-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.qui-nom { overflow: hidden; text-overflow: ellipsis; }
.compteur { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; font-weight: 650; color: var(--texte-2); }
.compteur .sur { color: var(--texte-3); font-weight: 500; }
.compteur .jauge { display: block; height: 4px; border-radius: 4px; background: #e2e8f0; overflow: hidden; width: 90px; }
.compteur .jauge i { display: block; height: 100%; background: var(--vert-gpol); border-radius: 4px; }
.compteur.moins .jauge i { background: #94a3b8; }
.compteur.plus { color: var(--orange); }
.compteur.plus .jauge i { background: #f59e0b; }

/* ---------- Toute l'équipe ---------- */
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
table.equipe { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; min-width: calc(140px + var(--nb-jours, 6) * 104px); }
table.equipe col.c-nom { width: 210px; }
table.equipe { min-width: calc(210px + var(--nb-jours, 6) * 104px); }
@media (max-width: 600px) {
  table.equipe col.c-nom { width: 96px; }
  table.equipe { min-width: calc(96px + var(--nb-jours, 6) * 82px); }
  table.equipe th.nom { font-size: .8rem; }
  table.equipe .avatar { display: none; }
  .compteur .jauge { width: 70px; }
  table.equipe .creneau { padding: 4px 5px; }
  table.equipe .creneau .h { font-size: .76rem; letter-spacing: -.02em; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
  .legende { font-size: .78rem; gap: 4px 10px; }
}
table.equipe th, table.equipe td { border-bottom: 1px solid var(--trait); vertical-align: top; padding: 3px 4px; }
table.equipe td + td, table.equipe th + th, table.equipe th + td { border-left: 1px solid #eef2f6; }
table.equipe thead th { position: sticky; top: 0; background: var(--carte); z-index: 2; font-size: .85rem; border-bottom: 1px solid var(--trait-2); }
table.equipe th.nom { position: sticky; left: 0; background: var(--carte); z-index: 3; text-align: left; font-size: .85rem; }
table.equipe thead th.nom { z-index: 4; vertical-align: middle; color: var(--texte-3); font-weight: 600; padding-left: 10px; }
table.equipe tr.groupe th { background: #f5f8fb; text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); padding: 6px 10px; }
table.equipe tr.groupe th .pastille { margin-right: 6px; }
table.equipe td.vide { cursor: pointer; }
/* Glisser-déposer d'un créneau */
.creneau.deplacable { cursor: grab; }
.creneau.deplacable:active { cursor: grabbing; }
table.equipe td.cible-depot { background: var(--accent-doux) !important; box-shadow: inset 0 0 0 2px var(--accent); }
table.equipe td.vide:hover { background: #f5f8fb; }
table.equipe td.ferme { background: #f5f8fb; }
table.equipe .aujourdhui { background: var(--accent-doux); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
table.equipe thead th.aujourdhui { background: var(--accent-doux); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 3px 0 var(--accent); }
table.equipe thead th.aujourdhui .jnum { background: var(--accent); color: #fff; }
table.equipe thead th.aujourdhui .jsem { color: var(--accent); }
.cellule { min-height: 44px; display: block; width: 100%; border: 0; background: none; cursor: pointer; }
.cellule:hover::after { content: "+"; color: var(--texte-3); font-size: 1.2rem; }
.nom-btn { border: 0; background: none; text-align: left; font-weight: 650; padding: 6px 8px; min-height: 52px; cursor: pointer; width: 100%; line-height: 1.25; display: flex; align-items: center; gap: 10px; }
.jour-entete .jsem { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); font-weight: 650; }
.jour-entete .jnum { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 750; margin-top: 2px; }
.jour-entete .alertes { display: block; height: 12px; line-height: 10px; }
tbody.synthese tr.remplissage td { text-align: center; font-weight: 700; font-size: .9rem; padding: 6px 4px; }
tbody.synthese tr.remplissage th { font-size: .82rem; font-weight: 600; color: var(--texte-2); padding-left: 10px; }
tbody.synthese .zero { color: var(--trait-2); font-weight: 400; }
tbody.synthese tr.effectifs td, tbody.synthese tr.effectifs th { border-bottom: 2px solid var(--trait-2); }
tr.totaux td, tr.totaux th { background: #f5f8fb; font-size: .82rem; border-top: 1px solid var(--trait-2); text-align: center; }
tr.totaux th { text-align: left; padding-left: 10px; color: var(--texte-2); }
.total { font-size: .74rem; font-weight: 500; color: var(--texte-3); display: block; }
.total.ecart { color: var(--orange); font-weight: 650; }
.jour-entete { display: block; border: 0; background: none; width: 100%; cursor: pointer; font-weight: 700; padding: 6px 2px; min-height: 44px; color: var(--texte); }
.jour-entete .sous { display: block; font-weight: 500; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tr.effectifs td, tr.effectifs th { background: #f5f8fb; font-size: .76rem; }
tr.effectifs .badge { white-space: normal; display: block; margin: 2px 0; border-radius: 8px; font-weight: 600; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0; font-size: .85rem; color: var(--texte-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.pastille { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; }
.filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 8px 0; }

/* ---------- Vue jour ---------- */
.frise { position: relative; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); overflow-x: auto; box-shadow: var(--ombre); }
.frise-interne { min-width: 720px; }
.frise-ligne { display: grid; grid-template-columns: 140px 1fr; border-bottom: 1px solid #eef2f6; min-height: 44px; }
.frise-groupe { background: #f5f8fb; border-bottom: 1px solid #eef2f6; }
.frise-groupe span { display: inline-block; position: sticky; left: 0; padding: 6px 10px; font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); }
.frise-groupe .pastille { margin-right: 6px; }
.frise-ligne .qui { padding: 6px 10px; font-weight: 650; font-size: .85rem; position: sticky; left: 0; background: var(--carte); z-index: 1; }
.frise-piste { position: relative; }
.frise-piste .barre-c { --c: var(--metier, #64748b); position: absolute; top: 6px; bottom: 6px; border-radius: 6px; background: color-mix(in srgb, var(--c) 18%, white); border: 0; border-left: 4px solid var(--c); color: var(--texte); font-size: .74rem; font-weight: 650; padding: 2px 6px; overflow: hidden; white-space: nowrap; cursor: pointer; text-align: left; }
.frise-piste .barre-c.absent { --c: #94a3b8; background: repeating-linear-gradient(135deg, #f5f8fb, #f5f8fb 6px, #e2e8f0 6px, #e2e8f0 12px); color: var(--texte-3); }
.frise-piste .barre-c.ecole { --c: #7c3aed; background: #f3e8ff; }
.frise-piste .barre-c.garde { --c: #0f172a; background: var(--jaune-fond); }
.graduation { display: grid; grid-template-columns: 140px 1fr; background: #f5f8fb; font-size: .72rem; font-weight: 650; color: var(--texte-3); border-bottom: 1px solid var(--trait); }
.graduation .pas { position: relative; height: 24px; }
.graduation .pas span { position: absolute; top: 4px; transform: translateX(-50%); }
.cases-effectifs { position: relative; }
.cases-effectifs div { position: absolute; top: 0; bottom: 0; text-align: center; font-size: .7rem; padding: 2px 0; border-right: 1px solid #fff; background: var(--vert-fond); }
.cases-effectifs div.rouge { background: #dc2626; color: #fff; font-weight: 800; }
.cases-effectifs div.orange { background: #fed7aa; }

/* ---------- Mois ---------- */
.mois { display: grid; grid-template-columns: repeat(var(--nb-col, 7), 1fr); gap: 4px; }
.mois .entete-j { text-align: center; font-weight: 650; font-size: .78rem; color: var(--texte-3); padding: 4px 0; }
.mois .case-j { min-height: 76px; border: 1px solid var(--trait); border-radius: 10px; padding: 4px 6px; font-size: .74rem; cursor: pointer; background: var(--carte); text-align: left; overflow: hidden; }
.mois .case-j:hover { border-color: var(--texte-3); }
.mois .case-j.hors { opacity: .4; }
.mois .case-j.ferme { background: #f5f8fb; }
.mois .case-j.aujourdhui { border: 2px solid var(--accent); }
.mois .case-j .num { font-weight: 800; font-size: .95rem; }
.mois .case-j .abs { color: var(--rouge); font-weight: 650; display: block; }
.mois .case-j .gar { background: #0f172a; color: #fff; border-radius: 4px; padding: 0 4px; font-weight: 700; display: inline-block; }

/* ---------- Listes, tableaux simples ---------- */
.liste { list-style: none; padding: 0; margin: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.feuille .liste { box-shadow: none; }
.liste > li + li { border-top: 1px solid var(--trait); }
.liste > li > button, .liste > li > .item { width: 100%; min-height: 56px; border: 0; background: none; text-align: left; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.liste > li > button:hover { background: #f5f8fb; }
table.simple { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.simple th, table.simple td { border-bottom: 1px solid var(--trait); padding: 10px 10px; text-align: left; vertical-align: top; }
table.simple th { background: #f5f8fb; color: var(--texte-2); font-weight: 650; font-size: .82rem; }
table.simple tbody tr:hover { background: #f5f8fb; }
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; padding: 4px; background: #e6edf5; border-radius: 12px; width: fit-content; }
.onglets button { min-height: 42px; padding: 6px 16px; border: 0; border-radius: 9px; background: none; font-weight: 650; cursor: pointer; color: var(--texte-2); }
.onglets button[aria-selected="true"] { background: var(--carte); color: var(--texte); box-shadow: var(--ombre); }
.trame-jours { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.trame-jour { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px; box-shadow: var(--ombre); }
.trame-jour h3 { margin: 0 0 6px; }
.trame-jour.cible-depot { background: var(--accent-doux); box-shadow: inset 0 0 0 2px var(--accent); }
.trame-jour .creneau[draggable="true"] { cursor: grab; }
.trame-jour .creneau.glisse { opacity: .5; }
.menu-plus { display: grid; gap: 10px; max-width: 520px; }
.menu-plus .btn { justify-content: flex-start; min-height: 54px; gap: 12px; }
.menu-plus .btn svg { width: 22px; height: 22px; flex: none; }

/* Menu : barre du bas sur téléphone (4 entrées + « Menu »), menu complet à gauche sur ordinateur */
@media (max-width: 819px) { nav.barre .pas-tel { display: none; } }
/* Téléphone : seule la page défile, la barre du bas est posée sous la page (et non plus « flottante ») :
   l'iPhone ne peut plus la laisser au milieu de l'écran. */
@media (max-width: 819px) {
  html:has(main.contenu), html:has(main.contenu) body { height: 100%; overflow: hidden; }
  #app:has(> main.contenu) { height: 100%; display: flex; flex-direction: column; }
  /* Au-dessus de la barre du bas : les fenêtres (voile fixe dans la zone qui défile) la recouvrent */
  main.contenu { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; position: relative; z-index: 31; }
  /* Fenêtre ouverte : la barre du bas s'efface (Safari peut la dessiner par-dessus la fenêtre) */
  html:has(.voile) #app:has(> main.contenu) nav.barre { display: none; }
  main.contenu .page { padding-bottom: 24px; }
  #app:has(> main.contenu) nav.barre { position: relative; flex: none; }
  main.contenu .barre-appliquer { bottom: 0; }
}
@media (min-width: 820px) {
  nav.barre .tel-seul { display: none; }
  nav.barre button.pied { margin-top: auto; padding: 12px 10px; border-top: 1px solid var(--trait); border-radius: 0 0 10px 10px; font-size: .85rem;
    color: var(--texte-3); display: flex; align-items: center; gap: 10px; text-align: left; min-height: 0; }
  nav.barre button.pied span { display: flex; flex-direction: column; }
  nav.barre button.pied strong { color: var(--texte); }
}

/* Paramètres */
.groupe-param { margin: 18px 0; }
.groupe-param h2 { margin: 0 0 8px; font-size: 1rem; color: var(--texte-2); text-transform: uppercase; letter-spacing: .04em; }
.tuiles-param { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tuile-param { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--carte); box-shadow: var(--ombre); cursor: pointer; font: inherit; color: inherit; }
.tuile-param:hover { border-color: var(--accent); }
.tuile-param strong { font-size: 1rem; }
.tuile-param span { color: var(--texte-3); font-size: .86rem; }

/* ---------- Guide d'installation ---------- */
.guide-etape { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; margin: 10px 0; box-shadow: var(--ombre); }
.guide-etape svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 8px auto; }
.guide-etape .num { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; align-items: center; justify-content: center; margin-right: 8px; }

.connexion { max-width: 420px; margin: 8vh auto 0; padding: 28px 22px; background: var(--carte); border-radius: 22px; box-shadow: var(--ombre); }
.connexion .logo { width: 150px; height: auto; display: block; margin: 0 auto 10px; }

/* Export paie : commentaires pour le comptable, résumé des absences et compteur de congés payés */
.commentaire-general { margin: 12px 0; }
.commentaire-general h2 { margin: 0 0 8px; font-size: 1rem; }
.commentaire-paie textarea { min-height: 54px; resize: vertical; }
.commentaire-paie .ligne { min-height: 28px; margin-top: 4px; gap: 10px; }
.commentaire-paie .btn.petit { min-height: 34px; padding: 4px 12px; font-size: .88rem; }
table.paie .col-commentaire { min-width: 240px; cursor: auto; }
table.paie .col-commentaire textarea { min-height: 44px; font-size: .88rem; }
table.paie .col-commentaire .commentaire-paie .ligne { min-height: 0; margin-top: 2px; }
.resume-abs { display: flex; flex-direction: column; gap: 10px; }
.abs-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.abs-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-compteur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--fond); border-radius: 12px; padding: 10px 12px; }
.cp-compteur div { display: flex; flex-direction: column; }
.cp-compteur strong { font-size: 1.25rem; font-weight: 800; }
.cp-compteur span { color: var(--texte-3); font-size: .8rem; }
.cp-compteur .negatif strong { color: var(--rouge); }
@media (max-width: 600px) { .cp-compteur { grid-template-columns: repeat(2, 1fr); } }

.cycle-contrat { margin: 8px 0; background: var(--fond); }

/* Campagne des congés d'été */
.conges-ete { display: flex; flex-direction: column; gap: 12px; }
.campagne { display: flex; flex-direction: column; gap: 12px; }
.choix-conges { align-items: end; }
.mois-charge { margin: 8px 0; }
.jours-charge { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.jc { width: 34px; height: 40px; border-radius: 7px; background: var(--fond); border: 1px solid var(--trait); display: flex; flex-direction: column; align-items: center;
  justify-content: center; font-size: .72rem; position: relative; }
.jc .d { color: var(--texte-3); }
.jc .a { font-weight: 800; font-size: .86rem; }
.jc .q { position: absolute; top: 1px; right: 3px; font-size: .62rem; color: var(--accent); }
.jc.un-peu { background: #e7f6ec; }
.jc.plein { background: #fff6e0; border-color: #f2c66b; }
.jc.trop { background: #fde8e8; border-color: #f2a3a3; color: var(--rouge); }
.liste-prio { padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.echange-collegue { display: flex; flex-direction: column; gap: 6px; }

/* Créneau proposé à partir des disponibilités (planning du titulaire) */
.bloc-proposition { border: 1.5px dashed var(--vert-gpol); background: #f1fbf4; border-radius: 8px; padding: 3px 5px; margin: 2px 0; font-size: .74rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: #1e6b37; }
.bloc-proposition .lib { font-weight: 700; }
.bloc-proposition .actions { display: flex; gap: 4px; margin-left: auto; }
.bloc-proposition button { border: 0; border-radius: 6px; padding: 2px 6px; font: inherit; font-weight: 700; cursor: pointer; min-height: 24px; }
.bloc-proposition .ok { background: var(--vert-gpol); color: #fff; }
.bloc-proposition .non { background: transparent; color: var(--texte-3); }

/* Disponibilités */
.dispos { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.grille-dispos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.grille-dispos .tete { text-align: center; font-size: .78rem; color: var(--texte-3); font-weight: 600; }
.jour-dispo { min-height: 64px; border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); display: flex; flex-direction: column;
  align-items: flex-start; padding: 4px 6px; gap: 2px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.jour-dispo .num { font-weight: 700; }
.jour-dispo .etat { font-size: .74rem; font-weight: 600; }
.jour-dispo .prevu { font-size: .66rem; color: var(--texte-3); line-height: 1.2; }
.jour-dispo.dispo { background: #e7f6ec; border-color: #86d19f; }
.jour-dispo.matin, .jour-dispo.apres { background: #fff6e0; border-color: #f2c66b; }
.jour-dispo.indispo { background: #fde8e8; border-color: #f2a3a3; }
.jour-dispo.ferme { background: #f1f5f9; color: var(--texte-3); }
.jour-dispo.passe { opacity: .45; cursor: default; }
@media (max-width: 600px) { .jour-dispo { min-height: 54px; padding: 3px; } .jour-dispo .prevu { display: none; } }

/* Synchronisation agenda */
.synchro-agenda { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.synchro-agenda h2 { margin: 0; font-size: 1.05rem; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.synchro-agenda .ligne { gap: 8px; flex-wrap: wrap; }
.etapes-agenda { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* Remplissage : besoin visé */
tr.remplissage td .vise { color: var(--texte-3); font-size: .78em; font-weight: 500; }
tr.remplissage td.sous-objectif { background: #fff4e5; color: #b45309; font-weight: 700; }
tr.remplissage td.sur-objectif { background: var(--accent-doux); color: var(--accent); font-weight: 700; }
.grille-objectifs input { width: 64px; min-height: 40px; padding: 4px 6px; text-align: center; }
.grille-objectifs th[scope=row] { text-align: left; white-space: nowrap; }

/* Génération intelligente */
.regles-generation { margin: 6px 0 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 14px; }
.regles-generation summary { cursor: pointer; font-weight: 650; }
.regles-generation ul { margin: 8px 0 0; padding-left: 20px; color: var(--texte-2); font-size: .92rem; }
.jour-generation h3 { margin: 14px 0 8px; }
.jour-generation .semaine-titre { margin: 26px 0 4px; padding-top: 10px; border-top: 2px solid var(--trait); }
.generation .barre-outils .gauche .btn { white-space: nowrap; }
.choix-periode { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.choix-periode select { width: auto; min-height: 40px; }
.equilibre { margin: 14px 0; }
.equilibre summary { cursor: pointer; }
.equilibre tr.fort-ligne td:first-child { font-weight: 700; }
.proposition { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; opacity: .6; }
.proposition.cochee { opacity: 1; border-color: var(--accent); }
.proposition input[type=checkbox] { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.proposition .contenu { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.barre-appliquer { position: sticky; bottom: 70px; background: var(--fond); padding: 10px 0; margin-top: 12px; }
@media (min-width: 820px) { .barre-appliquer { bottom: 0; } }
.message.orange ul { margin: 6px 0; padding-left: 20px; }
.pile-boutons { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.offre .mini-liste li { align-items: center; }

@media print { nav.barre, .toast { display: none; } }

/* ---------- Compteurs ---------- */
table.compteurs { width: 100%; border-collapse: collapse; min-width: 760px; }
table.compteurs td.nombre, table.compteurs th + th { text-align: right; white-space: nowrap; }
table.compteurs tr.cliquable { cursor: pointer; }
table.compteurs tr.cliquable:hover { background: #f5f8fb; }
table.compteurs .positif { color: #15803d; font-weight: 650; }
table.compteurs .negatif, .grand-nombre.negatif { color: #b91c1c; }
.grand-nombre { font-size: 1.9rem; font-weight: 750; margin: 2px 0 8px; }
.grand-nombre .discret { font-size: .95rem; font-weight: 500; }
.jauge-cpt { height: 8px; border-radius: 6px; background: #e2e8f0; overflow: hidden; margin-bottom: 8px; }
.jauge-cpt span { display: block; height: 100%; background: var(--vert-gpol); border-radius: 6px; }
.jauge-cpt span.haut { background: #f59e0b; }
.jauge-cpt span.plein { background: #dc2626; }table.compteurs td { vertical-align: middle; }
.mini-liste li > strong { white-space: nowrap; }
.choix-hs { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.choix.petit { flex-wrap: nowrap; gap: 4px; }
.choix.petit button { min-height: 30px; padding: 3px 10px; font-size: .78rem; white-space: nowrap; }
.choix.petit button:disabled { cursor: default; opacity: .7; }
.compteur-paie { display: flex; flex-direction: column; gap: 3px; min-width: 210px; }
.compteur-paie input.heures { width: 64px; min-height: 30px; padding: 3px 6px; }

/* ---------- Audit 2 : raccourcis ---------- */
.raccourcis-horaires { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.raccourcis-horaires .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; }
.raccourcis-horaires .btn .petit { font-weight: 500; opacity: .9; font-size: .75rem; }
.message.alerte-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
table.equipe td { position: relative; }
table.equipe .plus-creneau { display: block; width: 100%; margin-top: 3px; border: 1px dashed var(--trait-2); border-radius: 8px; background: transparent; color: var(--texte-3); font-size: .9rem; line-height: 1.4; cursor: pointer; opacity: .55; }
table.equipe .plus-creneau:hover, table.equipe .plus-creneau:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent); }
@media (max-width: 820px) { details.replie-tel:not([open]) > :not(summary) { display: none; } }.outils-planning .bouton-actions { display: none; }
@media (max-width: 820px) {
  .outils-planning .bouton-actions { display: inline-flex; }
  .outils-planning:not(.ouverts) > .btn:not(.bouton-actions) { display: none; }
}
/* Alertes RH : échéances des salariés */
li.echeance { align-items: flex-start; }
.echeance-actions { flex-wrap: nowrap; justify-content: flex-end; }
.liste-echeances > li.echeance { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--fond-carte, #fff); }
.echeances-salarie { max-width: 760px; margin-bottom: 16px; border-left: 5px solid #f59e0b; }
@media (max-width: 640px) {
  li.echeance { flex-direction: column; align-items: stretch; }
  .echeance-actions { justify-content: flex-start; flex-wrap: wrap; }
}.echeance-actions .btn { white-space: nowrap; }
.echeance-actions label { display: inline-block; }
.apercu-email { white-space: pre-wrap; font-family: inherit; font-size: .9rem; background: #f5f8fb; border: 1px solid var(--trait); border-radius: 8px; padding: 12px; max-height: 50vh; overflow: auto; }
/* Carte de l'accueil (colonne étroite) : les boutons passent sous le texte */
.mini-liste li.echeance { flex-direction: column; align-items: stretch; }
.mini-liste li.echeance .echeance-actions { justify-content: flex-start; flex-wrap: wrap; }

/* Centre d'aide */
.aide { max-width: 860px; }
.aide-recherche { width: 100%; font-size: 1.05rem; padding: 12px 14px; margin: 6px 0 12px; }
.aide-themes { margin-bottom: 8px; }
.aide-theme h2 { margin-top: 22px; }
.aide-question { background: var(--fond-carte, #fff); border: 1px solid var(--trait); border-radius: 10px; margin: 8px 0; }
.aide-question summary { cursor: pointer; padding: 13px 14px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; min-height: 44px; align-items: center; }
.aide-question summary::-webkit-details-marker { display: none; }
.aide-question summary::after { content: '+'; font-size: 1.3rem; color: var(--bleu, #2563eb); flex: none; }
.aide-question[open] summary::after { content: '–'; }
.aide-reponse { padding: 0 14px 14px; line-height: 1.5; }
.aide-reponse p { margin: 0 0 10px; }
.aide-reponse ol { margin: 0 0 10px; padding-left: 22px; }
.aide-reponse li { margin: 4px 0; }
.aide-contact { margin-top: 26px; }
/* ================= Direction artistique GPOL : finitions ================= */
/* Marque « GPOL » : Quicksand, bleu du logo, point vert comme sur le logo */
nav.barre .marque { font-family: var(--police-titre); font-weight: 700; letter-spacing: .1em; color: var(--bleu-gpol); }
nav.barre .marque::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--vert-gpol); margin-left: -6px; align-self: center; transform: translateY(-7px); }
/* Menu : élément actif en bleu doux avec un repère vert */
@media (min-width: 820px) {
  nav.barre { background: linear-gradient(180deg, #ffffff 0%, #f7fafd 100%); }
  nav.barre button { border-radius: 14px; font-weight: 650; position: relative; }
  nav.barre button[aria-current="page"] { background: var(--accent-doux); color: var(--accent); font-weight: 750; }
  nav.barre button[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--vert-gpol); }
  nav.barre button.pied[aria-current="page"]::before { display: none; }
}
@media (max-width: 819px) {
  nav.barre { border-top: 0; box-shadow: 0 -6px 24px rgba(27, 43, 63, .08); }
  nav.barre button[aria-current="page"] { color: var(--accent); font-weight: 750; }
  nav.barre button[aria-current="page"] svg { background: var(--accent-doux); border-radius: 999px; width: 52px; }
  nav.barre button { font-size: .74rem; white-space: nowrap; letter-spacing: -.01em; }
}

/* Boutons : arrondis, bleu du logo, léger relief */
.btn { border-radius: 14px; font-weight: 700; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.principal { background: linear-gradient(180deg, #2f76c4 0%, var(--bleu-gpol) 100%); border-color: var(--bleu-gpol); color: #fff; box-shadow: 0 4px 14px rgba(40, 104, 176, .28); }
.btn.principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; box-shadow: 0 6px 18px rgba(40, 104, 176, .34); }
.btn.danger:hover { border-color: var(--rouge); color: var(--rouge); }
.btn:disabled:hover { border-color: var(--trait-2); color: inherit; }
.btn.principal:disabled { box-shadow: none; }
.choix button { transition: background .15s, border-color .15s, color .15s; }
.choix button:hover { border-color: var(--accent); }
.choix button[aria-pressed="true"] { box-shadow: 0 3px 10px rgba(40, 104, 176, .25); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=month], input[type=search], select, textarea {
  border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(40, 104, 176, .14); outline: none; }
.onglets { border-radius: 14px; }
.onglets button { border-radius: 11px; }
.onglets button[aria-selected="true"] { color: var(--accent); }

/* Cartes : plus rondes, ombre douce, titre avec le point vert du logo */
.carte { border-radius: 20px; border-color: #e8eef5; }
.carte h2 { font-family: var(--police-titre); font-weight: 700; color: var(--texte-2); display: flex; align-items: center; gap: 8px; }
.carte h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vert-gpol); flex: none; }
.carte-titre h2 { margin-bottom: 10px; }
.demande-carte { border-left: 0; box-shadow: inset 3px 0 0 #f5a524, var(--ombre); }
.demande-carte h2::before { background: #f59e0b; }
.liste, .tableau-defile, .frise, .tuile-param, .guide-etape, .trame-jour, .carte-jour { border-radius: var(--rayon); }
.tuile-param { transition: border-color .15s, box-shadow .15s, transform .15s; }
.tuile-param:hover { box-shadow: 0 10px 28px rgba(40, 104, 176, .12); transform: translateY(-2px); }
.tuile-param strong { font-family: var(--police-titre); color: var(--texte); }
.groupe-param h2, .aide-theme h2 { font-family: var(--police-titre); color: var(--accent); }

/* « Ma prochaine journée » : dégradé bleu du logo et le cercle vert en filigrane */
.carte.vedette { position: relative; overflow: hidden; box-shadow: 0 12px 30px rgba(40, 104, 176, .3); }
.carte.vedette::after { content: ""; position: absolute; width: 200px; height: 200px; right: -110px; top: -120px; border-radius: 50%; border: 2px solid rgba(124, 214, 172, .5); pointer-events: none; }
.carte.vedette > * { position: relative; z-index: 1; }
.carte.vedette::before { content: ""; position: absolute; width: 12px; height: 12px; right: 18px; top: 18px; border-radius: 50%; background: var(--vert-gpol); pointer-events: none; }
.carte.vedette h2 { color: rgba(255, 255, 255, .85); }
.carte.vedette h2::before { display: none; }
.carte.vedette .grand-txt, .carte.vedette .journee .hh { font-family: var(--police-titre); }

/* Messages et badges plus doux */
.message { border-radius: 14px; }
.message.ok { border-color: #b9e6cf; }
.badge { font-weight: 750; }
.toast { border-radius: 18px; }
.feuille { border-radius: 26px 26px 0 0; }
@media (min-width: 700px) { .feuille { border-radius: 26px; } }
.feuille .titre h2 { font-family: var(--police-titre); }
.voile { background: rgba(27, 43, 63, .42); backdrop-filter: blur(2px); }

/* Chiffres : la police des titres pour les grands nombres */
.chiffres-cles strong, .grand-nombre, .cp-compteur strong, .carte-jour .grand, .carte-jour.agenda .jnum, .jour-entete .jnum, .semaine-choix .periode { font-family: var(--police-titre); }

/* Écran de connexion : fond aux couleurs du logo */
body:has(main.connexion) { background: radial-gradient(circle at 12% 18%, rgba(76, 176, 131, .18) 0, transparent 38%), radial-gradient(circle at 88% 82%, rgba(40, 104, 176, .16) 0, transparent 42%), var(--fond); min-height: 100vh; }
.connexion { border-radius: 28px; box-shadow: 0 20px 60px rgba(40, 104, 176, .14); padding: 32px 26px; }
.connexion h1 { color: var(--bleu-gpol); letter-spacing: .02em; }@media (max-width: 460px) { .connexion { margin: 5vh 12px 0; padding: 26px 18px; } }

/* Accueil en widgets */
.tableau-bord > .widget { display: flex; flex-direction: column; min-width: 0; }
.tableau-bord > .widget > * { flex: 1; margin-top: 0; }
@media (min-width: 700px) { .tableau-bord > .widget.large { grid-column: span 2; } }
.liste-widgets .widget-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; min-height: 56px; background: var(--carte); }
.liste-widgets .widget-ligne[draggable="true"] { cursor: grab; }
.liste-widgets .widget-ligne.glisse { opacity: .5; }
.liste-widgets .widget-ligne.masque .widget-nom { opacity: .5; }
.liste-widgets .poignee { color: var(--texte-3); font-weight: 800; letter-spacing: -2px; }
.liste-widgets .widget-nom { flex: 1; min-width: 0; }
.liste-widgets .widget-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.liste-widgets .widget-actions .btn.icone { min-height: 40px; min-width: 40px; padding: 4px 10px; }
label.case.petite { min-height: 40px; gap: 6px; font-size: .88rem; margin-right: 6px; }
label.case.petite input { width: 20px; height: 20px; }
@media (max-width: 520px) { .liste-widgets .widget-ligne { flex-wrap: wrap; } .liste-widgets .widget-actions { width: 100%; } }
/* ---------- Accueil : tailles optimisées ---------- */
/* À répondre (invitations, propositions, échanges, rappels) : cartes compactes, côte à côte sur ordinateur */
.a-repondre { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 10px; align-items: start; }
.a-repondre:empty { display: none; }
@media (min-width: 900px) { .a-repondre { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }
.a-repondre > .carte { margin-top: 0; padding: 14px 16px; }
.carte.invitation.compacte h2 { margin-bottom: 6px; }
.carte.invitation.compacte p { margin: 0 0 4px; }
.carte.invitation .inv-titre { font-family: var(--police-titre); font-size: 1.12rem; font-weight: 700; line-height: 1.25; }
.carte.invitation .inv-quand { font-size: .95rem; }
.carte.invitation .inv-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte.invitation .reponse-evt { margin: 8px 0 0; }
.carte.invitation.compacte > .btn { margin-top: 6px; }
/* Les cartes gardent leur hauteur naturelle (pas de grand vide quand la voisine est longue) */
.tableau-bord { align-items: start; }
.tableau-bord > .widget > * { flex: none; }
/* Boutons plus compacts dans les cartes de l'accueil (au moins 40 px de haut au doigt) */
.tableau-bord .mini-liste .btn, .a-repondre .mini-liste .btn, .a-repondre .reponse-evt .btn, .carte.invitation.compacte > .btn { min-height: 40px; padding: 7px 14px; font-size: .92rem; }
.tableau-bord .carte, .a-repondre .carte { padding: 14px 16px; }
.tableau-bord .mini-liste li { padding: 8px 0; }
/* Échéances RH compactes sur l'accueil */
.mini-liste li.echeance.compacte { gap: 6px; }
.mini-liste li.echeance.compacte .echeance-actions .btn { min-height: 36px; padding: 5px 12px; font-size: .88rem; }
/* Demandes à valider : le nom sur une ligne, les boutons dessous quand la colonne est étroite */
.tableau-bord .demande-carte .mini-liste li { flex-wrap: wrap; }.carte-titre { align-items: flex-start; }
.carte-titre .lien { white-space: nowrap; min-height: 32px; flex: none; }
.semaine-mini li { min-height: 34px; padding: 4px 8px; }
.semaine-mini .c { gap: 4px; }
.semaine-mini .puce { font-size: .82rem; padding: 2px 7px; white-space: nowrap; }
@media (max-width: 819px) {
  .page > .entete .btn.discret { min-height: 38px; padding: 6px 12px; font-size: .85rem; }
}.semaine-mini li { grid-template-columns: 54px 1fr; gap: 6px; }
.semaine-mini .puce { font-size: .8rem; padding: 2px 6px; }
/* Grille sans trous : pas de 4 px, l'écart entre cartes est compté dans la hauteur de chacune */
.tableau-bord.empilee { --ecart: 14px; grid-auto-rows: 4px; row-gap: 0; column-gap: var(--ecart); }
.tableau-bord.empilee > .widget { align-self: start; }

/* ---------- Temps de travail ---------- */
.periode-libre { margin: 10px 0; gap: 10px; }
.periode-libre input { width: auto; min-height: 40px; }
.tt-jour { margin: 14px 0; }
.tt-entete { justify-content: space-between; }
.tt-entete h3 { margin: 0; }

/* ---------- Statistiques ---------- */
.choix-mois { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.choix-mois input { width: auto; min-height: 40px; }
.tuiles-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 14px 0; }
.tuile-stat { display: flex; flex-direction: column; gap: 2px; }
.tuile-stat .etiquette { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); font-weight: 700; }
.tuile-stat strong { font-family: var(--police-titre); font-size: 1.9rem; font-weight: 700; color: var(--texte); line-height: 1.2; }
.grille-graphiques { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); margin-bottom: 12px; }
.graphique h2 { margin-bottom: 4px; }
/* Colonnes : barres fines (24 px max), bout arrondi, base carrée, quadrillage discret */
.colonnes { display: flex; align-items: stretch; gap: 2px; height: 190px; margin-top: 10px; padding-bottom: 22px; position: relative;
  background: linear-gradient(to top, var(--trait) 1px, transparent 1px) 0 calc(100% - 22px) / 100% 1px no-repeat; }
.colonnes .col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; outline: none; cursor: default; }
.colonnes .barre { width: 100%; max-width: 24px; background: var(--bleu-gpol); border-radius: 4px 4px 0 0; transition: opacity .15s; }
.colonnes .val { font-size: .74rem; font-weight: 700; color: var(--texte); white-space: nowrap; margin-bottom: 3px; min-height: 1em; }
.colonnes .lib { position: absolute; bottom: -20px; font-size: .7rem; color: var(--texte-3); white-space: nowrap; }
.colonnes:hover .col .barre { opacity: .45; }
.colonnes .col:hover .barre, .colonnes .col:focus .barre { opacity: 1; }
/* Détail au survol (ou au toucher) */
.colonnes .col[data-info]:hover::after, .colonnes .col[data-info]:focus::after, .barres li[data-info]:hover::after, .barres li[data-info]:focus::after {
  content: attr(data-info); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 5; white-space: nowrap;
  background: var(--texte); color: #fff; font-size: .8rem; font-weight: 600; padding: 5px 9px; border-radius: 8px; box-shadow: var(--ombre); pointer-events: none; }
.colonnes .col[data-info]:hover::after, .colonnes .col[data-info]:focus::after { bottom: auto; top: -6px; }
.colonnes .col:first-child:hover::after, .colonnes .col:first-child:focus::after { left: 0; transform: none; }
.colonnes .col:last-child:hover::after, .colonnes .col:last-child:focus::after { left: auto; right: 0; transform: none; }
.barres { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.barres li { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: 10px; position: relative; outline: none; }
.barres .lib { font-size: .88rem; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barres .piste { height: 14px; }
.barres .barre { display: block; height: 100%; max-height: 14px; background: var(--bleu-gpol); border-radius: 0 4px 4px 0; min-width: 2px; }
.barres .val { font-size: .85rem; font-weight: 700; }
table.stats th.nombre, table.stats td.nombre { text-align: right; white-space: nowrap; }
table.stats th .tri { border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; padding: 4px 0; min-height: 36px; text-align: inherit; }
table.stats tr.cliquable { cursor: pointer; }
.barre-cellule { display: inline-block; width: 60px; height: 8px; margin-right: 8px; vertical-align: middle; background: transparent; }
.barre-cellule span { display: block; height: 100%; background: var(--bleu-gpol); border-radius: 0 4px 4px 0; margin-left: auto; }
@media (max-width: 600px) { .grille-graphiques { grid-template-columns: 1fr; } .barre-cellule { display: none; } }table.stats td:first-child strong { white-space: nowrap; }
.barre-cellule span { margin-left: 0; }
@media (max-width: 600px) { .tuiles-stats { grid-template-columns: 1fr 1fr; gap: 8px; } .tuile-stat { padding: 12px; } .tuile-stat strong { font-size: 1.4rem; } .tuile-stat .etiquette { font-size: .68rem; } .tuile-stat .petit { font-size: .74rem; } }

/* ---------- Export paie sur téléphone : une carte par salarié ---------- */
.cartes-paie { display: grid; gap: 10px; }
.carte-paie { display: flex; flex-direction: column; gap: 8px; }
.carte-paie .cp-tete { display: flex; flex-direction: column; gap: 2px; }
.carte-paie .cp-tete strong { font-family: var(--police-titre); font-size: 1.08rem; }
.carte-paie .cp-tete .ligne { gap: 4px; }
.carte-paie .cp-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: var(--fond); border-radius: 12px; padding: 8px; }
.carte-paie .cp-chiffres div { display: flex; flex-direction: column; min-width: 0; }
.carte-paie .cp-chiffres span { font-size: .7rem; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-paie .cp-chiffres strong { font-size: .95rem; }
.carte-paie .cp-chiffres strong.fort { color: var(--orange); }
.carte-paie .cp-ligne { display: flex; flex-direction: column; gap: 4px; }
.carte-paie .cp-ligne .choix.petit { flex-wrap: wrap; }
.carte-paie p { margin: 0; }
.carte-paie .cp-semaines summary { font-weight: 650; color: var(--accent); min-height: 40px; display: flex; align-items: center; }
.carte-paie .cp-semaines li { flex-wrap: wrap; align-items: flex-start; }
.carte-paie .commentaire-paie textarea { min-height: 44px; }.bloc-transmission { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 12px; padding: 10px 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; }
.bloc-transmission .ligne { gap: 6px; }
.bloc-transmission .btn { min-height: 38px; padding: 6px 12px; font-size: .88rem; }

/* ---------- Notifications ---------- */
.choix-notif h3 { margin: 12px 0 2px; font-size: .95rem; }
.choix-notif label.case { min-height: 40px; }
.mes-notifications { max-width: 620px; }
.grille-notif { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 12px 0; }
.grille-notif .ligne input { width: auto; min-height: 40px; }
/* ---------- Écrans larges : utiliser la place (Absences, Collaborateurs, Événements) ---------- */
.seul-tel { display: block; }
.seul-ordi { display: none; }
@media (min-width: 900px) { .seul-tel { display: none; } .seul-ordi { display: block; } }
.negatif { color: #b91c1c; }
/* Demandes d'absence : cartes côte à côte, avec les faits utiles pour décider */
.grille-demandes { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .grille-demandes { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); } }
.grille-demandes > .carte { margin: 0; }
dl.faits { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0 10px; }
dl.faits > div { min-width: 0; }
dl.faits dt { font-size: .75rem; color: var(--texte-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
dl.faits dd { margin: 2px 0 0; font-weight: 600; }
table.simple.absences td, table.simple.collabs td { vertical-align: middle; }
table.simple tr.cliquable { cursor: pointer; }
table.simple tr.cliquable:hover td { background: var(--accent-doux); }
table.simple.collabs .qui { display: flex; align-items: center; gap: 10px; }
table.simple.collabs .qui .btn-nom { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* Événements : cartes en grille, invités visibles */
.grille-evts { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .grille-evts { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } }
.grille-evts > .carte { margin: 0; cursor: pointer; }
.grille-evts .evt-quand { font-weight: 600; }
.invites-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.invites-puces .puce-inv { font-size: .8rem; padding: 3px 9px; border-radius: 999px; background: #eef2f7; color: var(--texte-2); }
.invites-puces .puce-inv.acceptee { background: #e3f5ec; color: #17633f; }
.invites-puces .puce-inv.refusee { background: #fde8e8; color: #9b1c1c; text-decoration: line-through; }
.grille-evts .inv-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grille-evts .compteur-evt { margin: 10px 0 0; }
table.simple.collabs td { padding: 8px 10px; }
table.simple.collabs td:nth-child(3), table.simple.collabs td:nth-child(4), table.simple.collabs td:nth-child(1) { white-space: nowrap; }
table.simple.collabs td:last-child { min-width: 150px; }
table.simple.collabs td:nth-child(2) { min-width: 130px; }
table.simple.collabs td:nth-child(6) { min-width: 170px; }
.grille-evts .inv-titre { font-family: var(--police-titre); font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.evts-colonnes { display: grid; gap: 8px 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .evts-colonnes { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
table.compteurs td:first-child { white-space: nowrap; }
.solde-compteur { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; min-width: 130px; }
.solde-compteur { max-width: 200px; white-space: normal; }
.solde-compteur .nowrap { white-space: nowrap; }
table.simple.abs-paie td { vertical-align: top; }
table.simple.abs-paie td:nth-child(n+3):not(.col-commentaire) { white-space: nowrap; }
.abs-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 2px 0; }
.resume-abs .abs-ligne { padding: 4px 0; }table.simple.abs-paie textarea { min-height: 38px; height: 38px; resize: vertical; }
table.simple.abs-paie textarea:focus { height: 80px; }
@media (max-width: 819px) { .chiffres-cles.resume-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 14px; } .chiffres-cles.resume-types strong { font-size: 1.25rem; } .chiffres-cles.resume-types span { font-size: .78rem; } }
.barre-vue .droite { gap: 8px; flex-wrap: nowrap; }
.groupe-export { margin: 6px 0 10px; }
.outils-planning .btn { min-height: 40px; }
@media (min-width: 821px) { .outils-planning .btn, .barre-vue .btn.discret:not(.icone) { padding: 8px 14px; font-size: .9rem; } .outils-planning { gap: 8px; } }
.barre-vue .exporter .ico { display: none; }
@media (max-width: 819px) { .barre-outils.trois.barre-vue { grid-template-columns: minmax(0, 1fr) auto; } .barre-vue .droite { gap: 6px; } .barre-vue .droite .btn { padding: 6px 10px; font-size: .85rem; min-height: 38px; } .barre-vue .exporter .txt { display: none; } .barre-vue .exporter .ico { display: inline; font-size: 1.1rem; } .barre-vue .gauche .onglets button { padding: 6px 9px; } }
/* ---------- Absences (titulaire) : à valider | à venir, côte à côte ---------- */
.absences-colonnes { display: grid; gap: 8px 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .absences-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.absences-colonnes > section > h2 { margin-top: 6px; }
.pile-demandes { display: grid; gap: 12px; }
.pile-demandes > .carte { margin: 0; padding: 14px 16px; }
.pile-demandes .demande-carte .ligne .btn { min-height: 40px; padding: 7px 14px; }
.liste.a-venir .item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 4px 12px; align-items: center; }
.liste.a-venir .av-qui .badge { margin-top: 3px; }
details.refusees { margin-top: 10px; }
details.refusees summary { cursor: pointer; font-weight: 650; padding: 6px 0; }
.pastille-nb { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: .75rem; font-weight: 800; margin-left: 4px; }.pile-demandes .demande-carte .cap { display: inline; }
.salarie-actif { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 14px; border-radius: 14px; margin-bottom: 14px; }
.salarie-actif.oui { background: #e3f5ec; color: #17633f; }
.salarie-actif.non { background: #f1f3f6; color: #4b5563; }
.salarie-actif label.case { margin: 0; font-size: 1.02rem; }.liste.a-venir.avec-actions .item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto auto; }
.liste.a-venir .av-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.liste.a-venir .av-actions .btn { min-height: 34px; padding: 4px 10px; font-size: .82rem; }
@media (max-width: 600px) {
  .liste.a-venir .item, .liste.a-venir.avec-actions .item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .liste.a-venir .item > span:empty { display: none; }
  .liste.a-venir .item > .badge { justify-self: start; }
  .liste.a-venir .av-actions { justify-content: flex-start; }
}
.lien.deplier { display: block; margin-top: 8px; font-weight: 650; min-height: 36px; }

/* Noms cliquables vers la fiche, cartes cliquables en entier */
a.nom-collab { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a.nom-collab:hover { color: var(--accent); text-decoration-color: currentColor; }
.carte-lien { cursor: pointer; }
.carte-lien > .carte { transition: box-shadow .15s, transform .15s; }
@media (hover: hover) { .carte-lien > .carte:hover, section.carte-lien:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .12); } }
/* Pas d'effet d'appui quand une fenêtre est ouverte dans la carte : le transform la ferait sauter sous le doigt */
.carte-lien:not(:has(.voile)):active > .carte, section.carte-lien:not(:has(.voile)):active { transform: scale(.99); }

/* Ma semaine sur téléphone : compacte, pour voir toute la semaine sans défiler (créneaux du jour côte à côte) */
@media (max-width: 819px) {
  .jours-semaine:has(.agenda) { gap: 6px; }
  .carte-jour.agenda { grid-template-columns: 38px 1fr; gap: 8px; padding: 7px 9px; align-items: center; }
  .carte-jour.agenda .jsem { font-size: .64rem; }
  .carte-jour.agenda .jnum { font-size: 1.05rem; width: 30px; height: 30px; }
  .carte-jour.agenda .contenu { display: flex; flex-wrap: wrap; gap: 5px; align-items: stretch; min-width: 0; }
  .carte-jour.agenda .contenu > * { flex: 1 1 100%; margin: 0; }
  .carte-jour.agenda .contenu > .lecteur { flex: none; }
  .carte-jour.agenda .contenu > .bloc { flex: 1 1 120px; min-width: 0; margin: 0; padding: 4px 6px; border-left-width: 4px; font-size: .8rem; line-height: 1.25; }
  .carte-jour.agenda .bloc .grand { font-size: .9rem; white-space: nowrap; letter-spacing: -.02em; }
  .carte-jour.agenda .bloc .discret { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .carte-jour.agenda .contenu > p { font-size: .8rem; }
  .carte-jour.agenda.libre { padding-top: 3px; padding-bottom: 3px; }
  .carte-jour.agenda.libre .repos { margin: 0; }
  .carte-jour.agenda.libre .jnum { height: 24px; }
}
/* Ma semaine sur ordinateur : une colonne par jour, toute la semaine visible d'un coup */
@media (min-width: 820px) {
  .jours-semaine:has(.agenda) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: none; gap: 8px; align-items: stretch; }
  .carte-jour.agenda { grid-template-columns: 1fr; gap: 8px; padding: 10px; align-items: start; align-content: start; }
  .carte-jour.agenda .date-col { flex-direction: row; justify-content: center; gap: 6px; padding: 0 0 6px; border-bottom: 1px solid var(--trait); }
  .carte-jour.agenda .jnum { width: 34px; height: 34px; font-size: 1.15rem; }
  .carte-jour.agenda .contenu { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .carte-jour.agenda .contenu > * { margin: 0; }
  .carte-jour.agenda .bloc { padding: 6px 8px; font-size: .85rem; line-height: 1.3; }
  .carte-jour.agenda .bloc .grand { font-size: 1rem; white-space: nowrap; letter-spacing: -.02em; }
  .carte-jour.agenda .bloc .discret { font-size: .78rem; }
  .carte-jour.agenda.libre { padding: 10px; }
  .carte-jour.agenda.libre .repos { margin: 8px 0 0; text-align: center; }
  .carte-jour.agenda .contenu > p { font-size: .82rem; }
}
/* Repère de la semaine affichée (« Cette semaine », « Semaine prochaine »…) */
.semaine-choix .periode .repere { display: block; font-family: inherit;font-size: .72rem; font-weight: 600; color: var(--texte-3); letter-spacing: 0; text-transform: none; }
.semaine-choix .periode.en-cours { color: var(--accent); }
.semaine-choix .periode.en-cours .repere { color: var(--accent); }
/* Titres de groupe du planning : restent visibles quand la grille défile sur le côté */
table.equipe tr.groupe .colle { position: sticky; left: 10px; display: inline-block; }