@charset "UTF-8";
/* Planning AMG2 — feuille de style unique, aspect repris de la V1 (panneau bleu nuit, cartes, tableaux, fenêtres).
   Sous 860 px (téléphone), le bandeau AMG2 en haut, les onglets des membres en bas ; le gestionnaire a en haut une
   ligne d'onglets Gestion. */

:root {
  --panneau: 240px;
  --nuit: #1a2744;
  --onglets-bas: 58px;  /* hauteur de la barre d'onglets du bas, sur téléphone */
  --accent: #4f8ef7;
  --accent-2: #3a7be0;
  --texte: #1e2a3a;
  --doux: #6b7a99;
  --fond: #f4f6fb;
  --carte: #ffffff;
  --bord: #e0e6f0;
  --rayon: 10px;
  --ombre: 0 2px 12px rgba(30, 42, 80, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px; color: var(--texte); background: var(--fond);
  display: flex; min-height: 100vh;
}
a { color: var(--accent); }

/* ── Panneau de navigation ───────────────────────────── */
.panneau {
  width: var(--panneau); min-height: 100vh; background: var(--nuit);
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100;
}
.marque { display: block; text-decoration: none; padding: 24px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.marque strong { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #fff; letter-spacing: .5px; }
.logo-marque { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); flex: none; }  /* le logo de l'appli (05/11/2026) */
.navigation { padding: 10px 0; }
/* Gestion juste sous la navigation ; Réglages en bas du panneau (27/10/2026). */
.navigation-gestion { flex: 1; display: flex; flex-direction: column; padding: 28px 0 10px; }
.navigation-gestion .reglages { margin-top: auto; }
/* Mon compte (02/11/2026) : tout en bas du panneau, sous Réglages ; à droite du bandeau AMG2 sur téléphone. */
.mon-compte-nav { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; padding-bottom: 14px; }
.navigation-gestion + .mon-compte-nav { margin-top: 0; }
.mon-compte-nav:has(+ .deconnexion-nav) { padding-bottom: 10px; }
.deconnexion-nav { margin: -6px 0 10px; }
.deconnexion-nav button { padding: 2px 20px 2px 54px; background: none; border: 0; font-family: inherit; font-size: 11.5px; color: rgba(255,255,255,.38); cursor: pointer; }
.deconnexion-nav button:hover { color: rgba(255,255,255,.75); text-decoration: underline; }
.nav-section {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.28); padding: 14px 20px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 20px;
  color: rgba(255,255,255,.62); text-decoration: none; font-size: 13px; font-weight: 500;
  border-left: 3px solid transparent; transition: all .15s;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.actif { background: rgba(79,142,247,.18); color: #fff; border-left-color: var(--accent); }
.nav-item .icone { font-size: 15px; width: 20px; text-align: center; }
.bascule-mode { display: none; }  /* Membre / Gestion : seulement sur téléphone (04/11/2026) */
.nom-court { display: none; }  /* « Dispos », « Suivi » : les noms courts de la barre du bas, sur téléphone */
/* Bulle rouge accolée en haut à droite de « Missions » : missions à venir attribuées à la personne connectée. */
.avec-pastille { position: relative; }
.pastille {
  position: absolute; top: -6px; left: 100%; margin-left: 1px; min-width: 14px; height: 14px; padding: 0 4px;
  border-radius: 7px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; line-height: 14px;
  text-align: center; box-sizing: border-box;
}
/* Poignée sur le bord droit du panneau : on la tire pour changer la largeur (base.html). */
.poignee {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 1;
}
.poignee:hover, .redimension .poignee { background: rgba(79,142,247,.5); }
.redimension { cursor: col-resize; user-select: none; }

/* ── Zone principale ─────────────────────────────────── */
.principal { margin-left: var(--panneau); flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barre {
  background: var(--carte); border-bottom: 1px solid var(--bord); padding: 0 32px; height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 0; z-index: 50;
}
.barre h1 { font-size: 16px; font-weight: 600; }
.choix-mois { display: flex; align-items: center; gap: 6px; }  /* le mois : flèches et menu déroulant, dans le bandeau */
.choix-mois select {
  padding: 5px 10px; border: 1px solid var(--bord); border-radius: 8px; background: var(--carte);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--texte); cursor: pointer;
}
.choix-mois select:hover { border-color: var(--accent); }
.date {
  font-size: 12px; color: var(--doux); background: var(--fond); white-space: nowrap;
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--bord);
}
.contenu { padding: 26px 32px; flex: 1; min-width: 0; }

/* ── Cartes et tuiles ────────────────────────────────── */
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.carte-titre { padding: 15px 20px; border-bottom: 1px solid var(--bord); font-size: 13px; font-weight: 600; }
.carte.deuxieme { margin-top: 22px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.tuile {
  background: var(--carte); border: 1px solid var(--bord); border-left: 4px solid var(--accent);
  border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre);
  color: var(--texte); text-decoration: none;
}
a.tuile:hover { border-color: var(--accent); }
.tuile h2 { font-size: 14px; margin-bottom: 4px; }
.tuile p { font-size: 12px; color: var(--doux); }
.tuile.inactive { opacity: .55; border-left-color: var(--bord); }
.tuile .etiquette { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--doux); }
.tuile .valeur { font-size: 26px; font-weight: 700; margin: 6px 0 4px; }
.tuile .detail { font-size: 12px; color: var(--doux); }
/* Accueil (01/11/2026) : mes prochains jours, le bloc « À faire » du gestionnaire */
.prochains-jours { list-style: none; margin-top: 6px; font-size: 12px; }
.prochains-jours li { display: flex; align-items: center; gap: 4px; padding: 2px 0; }
.prochains-jours .quand { min-width: 120px; color: var(--doux); }
.pc.repos { background: #fce7f3; color: #9d174d; }  /* un affecté sans rien ce jour-là : repos de garde ou vrai repos (rose : seule teinte libre, 01/11/2026) */
.a-faire { margin-top: 22px; }
.a-faire ul { list-style: none; padding: 6px 20px 12px; font-size: 13px; }
.a-faire li { padding: 7px 0; border-bottom: 1px solid var(--bord); }
.a-faire li:last-child { border-bottom: 0; }
.a-faire details { margin-top: 4px; }
.a-faire summary { cursor: pointer; color: var(--accent); font-size: 12.5px; }

/* ── Tableaux ────────────────────────────────────────── */
.defile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  background: var(--fond); font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--doux); padding: 10px 14px;
  border-bottom: 1px solid var(--bord); text-align: left; white-space: nowrap;
}
td { padding: 9px 14px; border-bottom: 1px solid var(--bord); font-size: 13px; vertical-align: middle; white-space: nowrap; }
td.etiquettes { white-space: normal; min-width: 110px; }
/* Tableau trop large : il défile sur le côté, la première colonne (les noms) reste visible. */
.defile th:first-child, .defile td:first-child { position: sticky; left: 0; z-index: 1; background: var(--carte); }
.defile th:first-child { background: var(--fond); }
.defile tbody tr:hover td:first-child { background: #eef3fe; }
.defile tr.groupe td:first-child, .defile tr.groupe:hover td:first-child { background: var(--fond); }
tbody tr:hover td { background: rgba(79,142,247,.08); }
tr:last-child td { border-bottom: none; }
td.doux, .doux { color: var(--doux); }
td.centre, th.centre { text-align: center; }
tr.groupe td { background: var(--fond); font-weight: 600; font-size: 12px; }
tr.groupe:hover td { background: var(--fond); }
tr.inactif td { opacity: .5; }

/* ── Étiquettes ──────────────────────────────────────── */
.badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.badge-chef { background: #ede9fe; color: #6d28d9; }
.badge-admin { background: #1e293b; color: #fff; }  /* compte administrateur (01/11/2026) */
.badge-affecte { background: #e0f2fe; color: #0369a1; }
.badge-renfort_bmu { background: #fef3c7; color: #92400e; }
.badge-interne { background: #d1fae5; color: #065f46; }
.badge-reserviste, .badge-gris { background: #f1f5f9; color: #475569; }
.badge-ok { background: #dcfce7; color: #166534; }
.badge-alerte { background: #fef9c3; color: #854d0e; }
.badge-dur { background: #fee2e2; color: #991b1b; }
/* Capsule d'une mission, une couleur par catégorie : Pré-DSM indigo, mission (avec ou sans ARA2) turquoise,
   VRM rose, formation/réserve jaune (armé en plus vert, désarmé rouge). Cliquable : ouvre sa carte. */
.badge-mission { background: #e0e7ff; color: #3730a3; border: 0; font-family: inherit; cursor: pointer; }
.badge-mission:hover { background: #c7d2fe; }
.badge-mission.pre-dsm { background: #c3ebe5; color: #0e5c54; }  /* turquoise, comme le cartouche PDn (26/10/2026) */
.badge-mission.pre-dsm:hover { background: #a5ded5; }
.badge-mission.mission { background: #e2e8f0; color: #334155; }  /* bleu-gris (26/10/2026) */
.badge-mission.mission:hover { background: #cbd5e1; }
.badge-mission.vrm { background: #fce7f3; color: #9d174d; }
.badge-mission.vrm:hover { background: #fbcfe8; }
.badge-mission.formation { background: #fef08a; color: #713f12; }
.badge-mission.formation:hover { background: #fde047; }
.badge-mission.marque-vrm { margin-right: 4px; }  /* planning : la VRM dans la case ARA, ouvre sa carte */
/* barre-mission : posée sur sa case sans l'élargir ; son nom (à part, car un bouton coupe ce qui dépasse)
   déborde à droite si la mission est courte. */
.barre-mission { position: absolute; left: 2px; right: 2px; top: 4px; bottom: 4px; padding: 0; border-radius: 5px; }
.nom-barre { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 600; color: #3730a3; pointer-events: none; z-index: 1; }  /* au-dessus des cases suivantes */
.nom-barre.pre-dsm { color: #0e5c54; }
.nom-barre.mission { color: #334155; }
.nom-barre.vrm { color: #9d174d; }
.nom-barre.formation { color: #713f12; }
.nom-barre.arme { color: #166534; }
.nom-barre.desarme { color: #991b1b; }
.fiche-mission { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; font-size: 13.5px; }
.fiche-mission dt { font-weight: 600; color: var(--doux); font-size: 12px; padding-top: 1px; }
.fiche-mission dd { line-height: 1.5; }
.voile[hidden] { display: none; }
.bloc-missions { margin-bottom: 18px; }
/* Besoins et Missions : un besoin fini est en gris (29/10/2026). */
.titre-section { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); margin: 22px 0 10px; }
.titre-passees { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.titre-section .doux { text-transform: none; letter-spacing: 0; font-weight: 400; }
.lien-retour { font-weight: 600; color: var(--accent-2); text-decoration: none; }
.lien-retour:hover { text-decoration: underline; }
.bas-passees { margin: 4px 0 18px; }
.a-solliciter { margin-top: 2px; font-size: 12px; }
.a-solliciter summary { cursor: pointer; color: var(--doux); }
.a-solliciter details[open] summary { margin-bottom: 2px; }
.bloc-missions tr.passe td { color: var(--doux); }
.bloc-missions tr.passe .badge { opacity: .6; }
.autres-medecins {  /* « + 5 autres » : ouvre la carte de la mission, avec tous les médecins (02/11/2026) */
  border: 0; background: #eef4fe; color: var(--accent-2); font: inherit; font-size: 12px; font-weight: 600;
  padding: 1px 7px; border-radius: 10px; cursor: pointer; white-space: nowrap;
}
.autres-medecins:hover { background: #dbe7fd; }
.moi { background: #fef3c7; padding: 1px 6px; border-radius: 4px; }  /* son propre nom */
.tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: #e0f2fe; color: #0369a1; margin: 1px; }
/* Une couleur par qualification, celle des piquets correspondants (26/10/2026) : AR rouge, coordinateur orange
   (coordinateur chef plus soutenu), Pré-DSM turquoise, DSM et MCB sable, BRI gris. */
.tag.q-ar { background: #f8c6c0; color: #8c1f16; }
.tag.q-coordinateur { background: #fcd3a8; color: #85450b; }
.tag.q-coordinateur_chef { background: #f6ad6b; color: #6b3203; }
.tag.q-pre_dsm { background: #c3ebe5; color: #0e5c54; }
.tag.q-dsm, .tag.q-mcb { background: #ead9c4; color: #66441f; }
.tag.q-bri { background: #dfe2e7; color: #464e5b; }

/* ── Onglets et boutons ──────────────────────────────── */
.onglets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.onglet {
  padding: 5px 13px; border-radius: 20px; border: 1px solid var(--bord); background: var(--carte);
  color: var(--doux); font-size: 12px; font-weight: 600; text-decoration: none; transition: all .15s;
}
.onglet:hover { border-color: var(--accent); color: var(--accent); }
.onglet.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.onglet .nb { font-size: 11px; opacity: .72; margin-left: 3px; }
.onglets .bouton { margin-left: auto; }
.onglet.clos:not(.actif) { border-style: dashed; opacity: .75; }
.intro { margin-bottom: 14px; font-size: 13px; }

.bouton, .bouton-second, .bouton-danger {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.bouton { background: var(--accent); color: #fff; border: 0; }
.bouton:hover { background: var(--accent-2); }
.bouton:disabled { opacity: .45; cursor: default; background: var(--accent); }
.bouton-second { background: var(--fond); color: var(--texte); border: 1px solid var(--bord); }
.bouton-second:hover { border-color: var(--accent); color: var(--accent); }
.bouton-danger { background: #fff; color: #b91c1c; border: 1px solid #fecaca; margin-right: auto; }
.bouton-danger:hover { background: #fee2e2; border-color: #b91c1c; }
/* Fiche : l'état du compte sous l'adresse (05/11/2026) */
.etat-compte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; font-size: 13px; }
.etat-compte .bouton-second { padding: 4px 10px; font-size: 12.5px; }
.compte-bloque { color: #b91c1c; font-weight: 600; }
/* Page Personnel : glisser-déposer pour l'ordre d'affichage (25/10/2026). */
td.poignee, th.poignee { width: 18px; padding-left: 10px; padding-right: 0; }
td.poignee { cursor: grab; color: #9aa5b8; font-size: 15px; user-select: none; }
td.poignee:hover { color: var(--accent); }
tr.tenue { opacity: .4; }
tr.enregistree > td { background: #ecfdf3; transition: background .3s; }
.aide-ordre { margin: 10px 4px 0; font-size: 12.5px; }
.crayon { text-decoration: none; font-size: 15px; padding: 2px 4px; border-radius: 4px; opacity: .7; }
.crayon:hover { opacity: 1; background: var(--fond); }
button.crayon { border: 0; background: none; cursor: pointer; font-family: inherit; }
.croix { font-size: 11px; margin-left: 2px; }  /* supprimer la ligne */
.actions-ligne { white-space: nowrap; }

/* ── Messages ────────────────────────────────────────── */
.message { padding: 10px 16px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 500; }
.message.success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.message.error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.message.info, .message.warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* ── Fenêtre de modification ─────────────────────────── */
.voile {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.fenetre {
  background: #fff; border: 1px solid var(--bord); border-radius: 10px; width: 100%; max-width: 620px;
  max-height: 92vh; overflow-y: auto; padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.fenetre-titre { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.fenetre-titre h2 { font-size: 16px; }
.fenetre-titre a { color: var(--doux); text-decoration: none; font-size: 18px; line-height: 1; }
.fenetre-pied {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bord);
}

.confirmation {
  position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 1100;
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.confirmation.ouverte { display: flex; }
.confirmation-boite {
  background: #fff; border-radius: 10px; width: 100%; max-width: 440px; padding: 22px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3); font-size: 14px; line-height: 1.5;
}
.confirmation-boite p { white-space: pre-line; }
.confirmation-pied { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.confirmation-pied .bouton-danger { margin-right: 0; }

.grille-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ.large { grid-column: 1 / -1; }
.champ > label { font-size: 12px; font-weight: 600; color: #374151; }
.champ small { font-size: 11.5px; color: var(--doux); }
.champ .erreur, .erreur { color: #b91c1c; font-size: 12px; }
.erreur ul, .champ .erreur ul { list-style: none; }
.champ input:not([type=checkbox], [type=radio]), .champ select, .champ textarea {
  padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #f8fafc;
  color: var(--texte); font: inherit; font-size: 13px; width: 100%;
}
.champ input:focus, .champ select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
input.majuscules { text-transform: uppercase; }
.champ.case { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 18px; }
.champ.case > input { order: 1; }
.champ.case > label { order: 2; font-weight: 500; }
.champ.case > small, .champ.case > .erreur { order: 3; flex-basis: 100%; }  /* l'aide sous la case et son intitulé */
.cases { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.cases label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: #374151; }
.cases div { display: contents; }
.champ[hidden], .cases [hidden] { display: none; }
.cases label:has(input:disabled) { opacity: .35; cursor: default; }
.cases label.contradiction { color: #b91c1c; font-weight: 600; }  /* souhaité alors que le code l'exclut */
/* Fiche : qualifications obtenues en cours de route, inaptitudes temporaires (4.2.10, 28/10/2026) */
/* La fiche du personnel en blocs (01/11/2026) : deux blocs côte à côte, les parties rares repliées. */
.fenetre.fenetre-fiche { max-width: 860px; }
.sous-titre-fenetre { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; color: var(--doux); }
.fiche-blocs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.bloc-fiche { border: 1px solid var(--bord); border-radius: 8px; padding: 12px 14px 14px; min-width: 0; }
.bloc-fiche.large { grid-column: 1 / -1; }
.bloc-fiche legend, .bloc-fiche .titre-bloc { padding: 0 4px; font-size: 13px; font-weight: 700; color: var(--texte); }
.bloc-fiche .grille-form { gap: 10px; }
.bloc-fiche > .cases { margin-top: 2px; }
.replie { margin-top: 10px; font-size: 13px; }
.replie > summary { cursor: pointer; color: var(--accent); font-size: 12.5px; list-style: none; }
.replie > summary::before { content: '＋ '; }
.replie[open] > summary::before { content: '− '; }
.replie[open] > summary { margin-bottom: 8px; }
.replie > .ligne-date { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.replie > .ligne-date > span { font-size: 12.5px; color: var(--doux); white-space: nowrap; }
.replie .ligne-date select { width: 11em; flex: none; }
.replie .ligne-date input[type=date] { width: 10.5em; flex: none; }
.replie > small { display: block; font-size: 11.5px; color: var(--doux); }
.legende-repliee { margin-top: 12px; }
.legende-repliee > summary::before, .legende-repliee[open] > summary::before { content: none; }
.legende-repliee > summary::after { content: ' ▸'; }
.legende-repliee[open] > summary::after { content: ' ▾'; }
.replie .retirer { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--doux); cursor: pointer; }
.replie.restrictions { margin-top: 0; }
.replie.restrictions > summary { color: inherit; }
.replie.restrictions > summary::before { color: var(--accent); }
.familles { display: grid; gap: 6px; }
.qualifs-datees { width: auto; border-collapse: collapse; font-size: 13px; }
.qualifs-datees th { padding: 0 0 4px 16px; background: none; border: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--doux); text-align: left; }
.qualifs-datees td { padding: 2px 0; border: 0; }
.qualifs-datees .vide-depuis-toujours { font-weight: 400; }
.qualifs-datees td + td { padding-left: 16px; }
.qualifs-datees td.cases { min-width: 170px; }
.qualifs-datees input[type=date] { width: 10.5em; padding: 4px 8px; border: 1px solid var(--bord); border-radius: 6px; font: inherit; font-size: 13px; color: var(--texte); background: #f8fafc; }
.familles .famille { gap: 4px 14px; }
.aide { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 4px; border-radius: 50%; background: #e5e9f0; color: #4b5563; font-size: 10px; font-weight: 700; cursor: help; vertical-align: 1px; }
@media (max-width: 720px) { .fiche-blocs { grid-template-columns: minmax(0, 1fr); } }
/* Téléphone (04/11/2026) : les qualifications et leurs dates tiennent dans la largeur ; une inaptitude sur deux lignes. */
@media (max-width: 560px) {
  .qualifs-datees td.cases { min-width: 0; }
  .qualifs-datees th, .qualifs-datees td + td { padding-left: 8px; }
  .qualifs-datees .vide-depuis-toujours { display: none; }
  .qualifs-datees input[type=date] { width: 9.5em; padding: 4px 6px; }
  .replie > .ligne-date { flex-wrap: wrap; gap: 6px; }
  .replie .ligne-date select { width: 100%; }
  .replie .ligne-date input[type=date] { width: 9.5em; }
}
.tag .des-le { font-weight: 400; opacity: .8; }

/* ── Pages de formulaire : connexion, mot de passe ──── */
.etroite { max-width: 420px; margin: 8px auto; padding: 24px; }
.etroite h2 { font-size: 16px; margin-bottom: 14px; }
.etroite p { margin-bottom: 12px; font-size: 13px; }
.etroite form .champ { margin-bottom: 14px; }
.etroite .bouton { width: 100%; justify-content: center; padding: 10px 16px; }
.etroite .champ ul { margin: 4px 0 0 18px; color: var(--doux); font-size: 12px; }

/* ── Disponibilités : saisie jour par jour ───────────── */
/* Gestionnaire : « Disponibilités de [personne] » en titre, flèches vers la précédente / la suivante. */
.titre-personne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.titre-personne .doux { font-weight: 500; }
.titre-personne select {
  padding: 5px 10px; border: 1px solid var(--accent); border-radius: 8px; background: var(--carte);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--texte); max-width: 100%; cursor: pointer;
}
.fleche {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); color: var(--texte);
  font-size: 16px; text-decoration: none;
}
a.fleche:hover { border-color: var(--accent); color: var(--accent); }
.fleche.inactive { opacity: .35; }
.titre-personne .retour { margin-left: auto; font-size: 12px; color: var(--accent); }
.pour-autrui { padding: 8px 20px; background: #fef3c7; color: #92400e; border-bottom: 1px solid #fde68a; font-size: 13px; }
.consigne { font-weight: 400; color: var(--doux); margin-top: 6px; white-space: normal; }
.consigne.changement-statut { color: #92400e; background: #fef3c7; border-radius: 6px; padding: 6px 10px; }  /* changement de statut dans le mois (27/10/2026) */
/* Remplir plusieurs jours : 1re ligne du tableau, ses menus sous les colonnes Journée entière, Jour, Nuit. */
.saisie tr.remplir td, .defile .saisie tr.remplir td:first-child { background: #eef3fe; border-bottom: 2px solid var(--accent); font-size: 12px; }
.remplir strong { display: block; font-size: 11px; color: var(--accent); margin-bottom: 4px; }
.remplir-dates { display: flex; gap: 4px 10px; flex-wrap: wrap; color: var(--doux); }
.remplir-dates label { display: flex; align-items: center; gap: 4px; }
/* La date choisie (« sam 2 ») ; le champ date, invisible par-dessus, ouvre le calendrier au clic. */
.choix-date {
  position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; min-width: 52px;
  border: 1px solid #cbd5e1; border-radius: 6px; background: #f8fafc; color: var(--texte); font-size: 13px; cursor: pointer;
}
.choix-date:hover { border-color: var(--accent); }
.choix-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.remplir-boutons { display: flex; gap: 6px; }
.remplir .bouton-second, .remplir .bouton-danger { margin-right: 0; padding: 5px 10px; font-size: 12px; }
.remplir .sur-telephone { display: none; }
.saisie select {
  padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: #f8fafc;
  font: inherit; font-size: 13px; max-width: 190px;
}
.saisie td { padding: 6px 10px; }
.saisie thead th { border-bottom-color: #b8c3d6; }  /* ligne sous les titres un peu plus marquée */
/* Le tableau défile dans sa carte, haut comme l'écran : la ligne des titres (Date, Journée entière…) reste en haut
   quand on descend (27/10/2026). */
.defile-saisie { max-height: calc(100vh - 150px); overflow: auto; }
.saisie thead tr:first-child th { position: sticky; top: 0; z-index: 2; }
.saisie thead tr:first-child th:first-child { z-index: 3; }
.saisie select { max-width: 160px; }
.saisie select:disabled { background: transparent; border-color: transparent; color: var(--texte); appearance: none; opacity: 1; }
.saisie .heures, .grille .heures { font-weight: 400; text-transform: none; letter-spacing: 0; }
.saisie tr.we td, .grille .we { background: #f3f5fa; }
.saisie tr.en-erreur td { background: #fee2e2; }
.saisie tr.details td { white-space: normal; background: #fafbfe; padding: 10px 14px 14px; }
.saisie .details-resume { white-space: normal; min-width: 120px; }
.bouton-details { border: 1px solid var(--bord); background: var(--carte); border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 13px; }
.bouton-details:hover { border-color: var(--accent); }
.ligne-piquets { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 6px; }
.ligne-piquets .intitule { font-size: 12px; font-weight: 600; min-width: 150px; color: #374151; }
.ligne-piquets small { font-weight: 400; color: var(--doux); }
.ligne-piquets textarea { flex: 1; min-width: 220px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; font-size: 13px; }
.armement { font-size: 11px; color: var(--doux); white-space: nowrap; margin-top: 2px; }
/* ⚠️ en pastille sur le coin de la capsule d'une mission attribuée à la personne ; le texte dans une bulle au survol. */
.avec-attribution { position: relative; display: inline-block; }
.attribution { position: absolute; top: -8px; right: -2px; padding: 0; border: 0; background: none; font-size: 11px; line-height: 1; cursor: pointer; }
.attribution::after { content: attr(aria-label); position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); z-index: 5; padding: 3px 8px; border: 1px solid #fcd34d; border-radius: 6px; background: #fef9c3; color: #854d0e; font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.12); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; }
.attribution:hover::after, .attribution:focus-visible::after { opacity: 1; visibility: visible; }
.marque-plus { padding: 0 6px; border-radius: 999px; background: #ffedd5; color: #c2410c; font-weight: 600; }  /* piquet armé en plus : petite capsule orange */
.marque-moins { text-decoration: line-through; color: #991b1b; }
.lettre { display: inline-block; min-width: 18px; font-size: 10px; font-weight: 700; color: var(--doux); background: var(--fond); border: 1px solid var(--bord); border-radius: 4px; text-align: center; }
.barre-enregistrer {
  position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 14px;
  padding: 12px 0; margin-top: 10px; background: var(--fond); border-top: 1px solid var(--bord); z-index: 5;
}
#non-enregistre { color: #92400e; font-weight: 600; font-size: 12px; }

/* ── Disponibilités de l'équipe : grille personnes × jours ── */
.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; font-size: 12px; color: var(--doux); align-items: center; }
.grille th { padding: 6px 2px; font-size: 10px; line-height: 1.5; letter-spacing: 0; }
/* La grille défile dans sa carte, haute comme l'écran : la ligne des dates reste en haut quand on descend. */
.defile-grille { max-height: calc(100vh - 90px); overflow: auto; }
.grille thead tr:first-child th { position: sticky; top: 0; z-index: 4; }
.grille thead tr:first-child th:first-child { z-index: 5; }
.grille thead tr:first-child th.centre { font-size: 12px; }
.grille thead tr:first-child .lettre { font-size: 11px; min-width: 20px; }
/* Les dates comme dans le planning (27/10/2026) : jour en petit, numéro en gras (rouge le week-end et les fériés), « Férié » dessous. */
.grille thead th.j { line-height: 1.15; vertical-align: top; padding-top: 4px; }
.grille thead th.j .js { display: block; font-size: 9.5px; font-weight: 500; color: var(--doux); }
.grille thead th.j b { display: block; font-size: 13px; color: var(--texte); }
.grille thead th.j.we b { color: #b42318; }
.grille thead th.j .lettre { margin-top: 2px; }
.grille thead th.j .ferie { display: block; font-size: 8.5px; color: #b42318; text-transform: none; }
.grille th:first-child, .grille td.nom { padding: 6px 12px; }
.grille td.nom a { color: var(--texte); text-decoration: none; }  /* gestionnaire : le nom ouvre sa saisie */
.grille td.nom a:hover { color: var(--accent); text-decoration: underline; }
.grille tr.besoins th { padding-top: 6px; padding-bottom: 6px; }
.grille th:first-child, .grille td:first-child { z-index: 2; }  /* les noms passent devant le nom d'une mission qui défile */
.grille tr.besoins td { position: relative; height: 26px; padding: 0; border-left: 1px solid var(--bord); }  /* missions du mois, sous les dates */
/* Gestionnaire : un jour libre d'une ligne de besoins ouvre « Nouveau besoin » à cette date ; « + » au survol. */
/* Fenêtre d'une VRM : qui tient l'ARA dans le planning, jour par jour. */
.info-vrm { order: 3; flex-basis: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 6px; background: #eef3fe; font-size: 12px; line-height: 1.5; white-space: pre-line; }
.info-vrm[hidden] { display: none; }
.info-morceaux { order: 3; flex-basis: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 6px; background: #eef3fe; font-size: 12px; }
.info-morceaux:empty { display: none; }
/* « Quoi ? » sur toute la largeur, le menu garde sa demi-largeur : les deux phrases du Pré-DSM tiennent chacune sur une ligne (29/10/2026). */
.champ:has(> .cases #id_quoi), .champ:has(> #id_quoi) { grid-column: 1 / -1; }
#id_quoi { max-width: calc(50% - 7px); }
@media (max-width: 520px) { #id_quoi { max-width: none; } }
.ajout-besoin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--accent); font-weight: 700; font-size: 14px; }
.ajout-besoin:hover { background: rgba(79,142,247,.12); }
.ajout-besoin:hover::after { content: '+'; }
.grille td.case { padding: 6px 2px; min-width: 30px; text-align: center; font-size: 11px; font-weight: 600; border-left: 1px solid var(--bord); }
/* Commentaire ou piquets : triangle orange dans le coin, comme dans Excel ; le contenu dans une bulle au survol. */
.case.note, .case-exemple.note { position: relative; }
.case.note::after, .case-exemple.note::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent #f97316 transparent transparent; }
.case-exemple.note { overflow: hidden; min-height: 16px; vertical-align: middle; border: 1px solid var(--bord); }
.bulle { position: fixed; z-index: 50; max-width: 300px; padding: 6px 10px; border-radius: 6px; background: #1e2a3a; color: #fff; font-size: 12px; line-height: 1.45; white-space: pre-line; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.bulle[hidden] { display: none; }
.bulle.refus { background: #991b1b; }
.bulle.figee { pointer-events: auto; outline: 2px solid #facc15; user-select: text; }  /* figée par Maj */
.bulle.figee::after { content: 'Figée — Maj ou Échap pour libérer'; display: block; margin-top: 4px; font-size: 10.5px; color: #fde68a; }
/* Gestionnaire : taper un code dans une case ; la zone de texte déborde de la case, plus large qu'elle. */
.grille td.case.saisissable { cursor: text; }
.grille td.case.saisissable:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.grille td.case.ouverte { position: relative; box-shadow: none; }
.saisie-case { position: absolute; z-index: 3; left: 0; top: 50%; transform: translateY(-50%); width: 92px; padding: 4px 6px; border: 2px solid var(--accent); border-radius: 4px; font: inherit; font-size: 12px; font-weight: 600; text-transform: none; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.ouverte.refus .saisie-case { border-color: #dc2626; }
.ouverte.envoi .saisie-case { opacity: .6; }
.case.indispo, .case-exemple.indispo { background: #fee2e2; color: #991b1b; }
.case.activite, .case-exemple.activite { background: #e0f2fe; color: #0369a1; }
.case.dispo, .case-exemple.dispo { background: #dcfce7; color: #166534; }
.case.partiel { font-size: 10px; }
.case.absent { background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 4px, #e2e8f0 4px, #e2e8f0 8px); }
.case-exemple { display: inline-block; min-width: 22px; padding: 1px 5px; border-radius: 4px; text-align: center; font-weight: 600; margin-right: 4px; }

/* ── Planning : choix de la vue (par jour, par personne) ── */
.outils { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 12px 20px; border-bottom: 1px solid var(--bord); }
.vues { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--fond); border: 1px solid var(--bord); }
.vues a, .vues button { padding: 6px 14px; border: 0; background: none; font-family: inherit; cursor: pointer; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--doux); text-decoration: none; white-space: nowrap; }
.vues a:hover { color: var(--texte); }
.vues a.actif, .vues button.actif { background: var(--carte); color: var(--texte); box-shadow: 0 1px 3px rgba(30,42,80,.15); }
.vues-dispos { margin-bottom: 14px; }  /* page Disponibilités : Les miennes / L'équipe, bien visible en haut */
.vues-dispos a { font-size: 14px; padding: 7px 18px; }
.segment { display: inline-flex; border: 1px solid var(--bord); border-radius: 7px; overflow: hidden; }
.segment button { border: 0; border-left: 1px solid var(--bord); background: var(--carte); padding: 5px 11px; font: inherit; font-size: 12px; color: var(--doux); cursor: pointer; }
.segment button:first-child { border-left: 0; }
.segment button.actif { background: var(--accent); color: #fff; }
.bascule { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; user-select: none; }
.bascule input { accent-color: var(--accent); }
.outils + .legende { padding: 12px 20px 0; }

/* ── Planning par personne : une ligne par personne, une case par jour ── */
/* Couleurs pastel (25/10/2026) : AR rouge, coordination de jour orange, de nuit violet, Pré-DSM turquoise ;
   desiderata : vacances bleu, formation / réserve jaune, DSM / MCB sable, BRI gris. « demi » : une moitié, plus claire. */
.pc { display: inline-block; min-width: 28px; padding: 0 4px; border-radius: 4px; font-size: 10.5px; font-weight: 700; line-height: 15px; text-align: center; white-space: nowrap; }
.pc.ar { background: #f8c6c0; color: #8c1f16; }
.pc.ar.demi { background: #fde6e3; color: #a2382e; }
.pc.coord-jour { background: #fcd3a8; color: #85450b; }
.pc.coord-jour.demi { background: #feeacf; color: #9a5a1c; }
.pc.coord-nuit { background: #d9c8f5; color: #4a2784; }
.pc.coord-nuit.demi { background: #ece3fb; color: #5d3a97; }
.pc.predsm { background: #c3ebe5; color: #0e5c54; }
.pc.predsm.demi { background: #e0f6f2; color: #1d6e65; }
.pc.vacances, .grille td.case.c-vacances, .table-semaine td.case.c-vacances, .case-exemple.c-vacances { background: #cbe0fa; color: #1d4a86; }
.pc.vacances.demi, .grille td.case.c-vacances.c-demi, .table-semaine td.case.c-vacances.c-demi { background: #e5effd; color: #2f5d98; }
.pc.formation, .grille td.case.c-formation { background: #f9eaa6; color: #685310; }
.pc.formation.demi, .grille td.case.c-formation.c-demi { background: #fdf5d3; color: #7a6420; }
.pc.dsm, .grille td.case.c-dsm { background: #ead9c4; color: #66441f; }
.pc.dsm.demi, .grille td.case.c-dsm.c-demi { background: #f5ece1; color: #7a5631; }
.pc.bri, .grille td.case.c-bri { background: #dfe2e7; color: #464e5b; }
.pc.bri.demi, .grille td.case.c-bri.c-demi { background: #eef0f3; color: #5a6270; }
.pc.a-valider { background: #fff; border: 1px dashed currentColor; line-height: 13px; }  /* activité pas encore validée par le gestionnaire */
.grille td.case.c-perso { background: #fbcfcf; color: #991b1b; }  /* I : indisponibilité personnelle */
.grille td.case.c-perso.c-demi { background: #fde4e4; color: #a12a2a; }
.grille td.case.c-service { background: #f9cde0; color: #9d174d; }  /* IS : indisponibilité de service, rouge rosé */
.grille td.case.c-service.c-demi { background: #fce3ee; color: #a8285c; }
/* Astreinte (A, Aj, An) un jour de mission : une pastille dans le coin, couleur de la mission (26/10/2026). */
.pc.avec-mission { position: relative; }
.pc.avec-mission::after { content: ''; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #fff; background: #3730a3; }
.pc.mission-vrm::after { background: #db2777; }
.pc.mission-pre-dsm::after { background: #14a397; }
.pc.mission-mission::after { background: #64748b; }
.pc.alerte { outline: 2px solid #e8590c; outline-offset: 1px; }
.pc-duo { display: inline-flex; align-items: center; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px #e3e7ef; }  /* activité validée et pièce le même jour : « F + Bn » */
.pc-duo .pc { min-width: 0; padding: 0 3px; border-radius: 0; }
.pc-duo .pc:first-child { border-radius: 4px 0 0 4px; }
.pc-duo .pc:last-child { border-radius: 0 4px 4px 0; }
.pc-duo .plus { padding: 0 1px; font-size: 9px; font-weight: 700; line-height: 15px; color: #6b7280; }
.pc-duo.alerte { outline: 2px solid #e8590c; outline-offset: 1px; }
.legende-personnes .pc + .pc { margin-left: -2px; }
.legende-personnes { padding: 14px 20px 16px; margin: 0; border-top: 1px solid var(--bord); }  /* sous le tableau */
.legende-personnes > span { display: inline-flex; align-items: center; gap: 5px; }
.legende-personnes .separation { width: 1px; height: 16px; background: var(--bord); }
.echantillon { display: inline-block; width: 22px; height: 14px; border-radius: 3px; }
/* Repos de sécurité (25/10/2026) : une barre à gauche, de la couleur de la garde de la veille. */
.echantillon.repos-ar { background: var(--carte); border: 1px solid var(--bord); }
.echantillon.repos-ar, .tds td.repos-ar, .table-semaine td.repos-ar { box-shadow: inset 3px 0 0 #f8c6c0; }
.tds td.repos-coord-nuit, .table-semaine td.repos-coord-nuit { box-shadow: inset 3px 0 0 #d9c8f5; }
.tds td.repos-coord-jour, .table-semaine td.repos-coord-jour { box-shadow: inset 3px 0 0 #fcd3a8; }
.tds td.repos-predsm, .table-semaine td.repos-predsm { box-shadow: inset 3px 0 0 #c3ebe5; }
.echantillon.indispo, .tds td.indispo, .table-semaine td.gestion.indispo { background: repeating-linear-gradient(135deg, #e7e9ee 0 3px, #f5f6f8 3px 7px); }
.point-dispo { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }

.defile-personnes { max-height: calc(100vh - 150px); overflow: auto; }
.tds { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.tds th, .tds td { padding: 0 2px; border-bottom: 1px solid #edf0f6; text-align: center; }
.tds td { width: 38px; min-width: 38px; height: 28px; border-left: 1px solid #f0f2f7; background: var(--carte); font-size: 12px; }
.tds .lundi { border-left: 2px solid #c9d2e3; }
.tds td.we { background: #f6f7fb; }
.echantillon.absent, .tds td.absent, .tds td.absent.we, .table-semaine td.gestion.absent { background: #e9ecf2; }  /* pas encore arrivé, ou parti : gris uni (I, IS sont hachurés) */
.tag.doublure { background: #ede9fe; color: #5b21b6; font-weight: 600; margin-left: 4px; }
.tag.changement-statut { background: #fef3c7; color: #92400e; font-weight: 600; margin-left: 4px; }  /* → Renfort BMU le 15/01 (27/10/2026) */
.tds td.indispo.we { background: repeating-linear-gradient(135deg, #e7e9ee 0 3px, #f5f6f8 3px 7px); }  /* I / IS hachurés même le week-end */
.tds .pile { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tds .code { font-size: 10px; font-weight: 600; color: #6b7280; }
.tds.sans-desiderata .code, .tds.sans-desiderata .point-dispo, .tds.sans-desiderata a > .pc:not(.ar, .coord-jour, .coord-nuit, .predsm, .validee),
.par-semaine.sans-desiderata td.gestion .code, .par-semaine.sans-desiderata td.gestion .point-dispo, .par-semaine.sans-desiderata td.gestion a > .pc:not(.ar, .coord-jour, .coord-nuit, .predsm, .validee) { visibility: hidden; }  /* une activité validée reste : un piquet */
.tds.sans-desiderata td.indispo, .par-semaine.sans-desiderata td.gestion.indispo { background: var(--carte); }
.tds.sans-desiderata td.indispo.we, .par-semaine.sans-desiderata td.gestion.indispo.we { background: #f6f7fb; }

/* Les noms à gauche et les trois lignes d'en-tête restent visibles pendant le défilement. */
.defile .tds th.nom { position: sticky; left: 0; z-index: 2; min-width: 190px; padding: 0 12px 0 16px; text-align: left; background: var(--carte); border-right: 1px solid var(--bord); }
.tds tbody th.nom { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--texte); cursor: pointer; }
.tds thead th { position: sticky; z-index: 3; background: var(--carte); }
.defile .tds thead th.nom { z-index: 5; background: var(--carte); }
.tds thead tr:nth-child(1) th { top: 0; height: 56px; }
.tds thead tr:nth-child(2) th { top: 56px; height: 26px; border-bottom: 1px solid var(--bord); box-shadow: 0 2px 4px rgba(30,42,80,.05); }
.tds thead th.j { width: 38px; line-height: 1.15; letter-spacing: 0; vertical-align: top; padding-top: 3px; }  /* dates alignées en haut, « Férié » dessous */
.tds thead th.we { background: #f6f7fb; }
.tds thead th.j a { display: block; color: var(--texte); text-decoration: none; }
.tds thead th.j a:hover b { color: var(--accent); }
.tds thead th.j .js { display: block; font-size: 9.5px; font-weight: 500; color: var(--doux); }
.tds thead th.j b { display: block; font-size: 13px; text-transform: none; }
.tds thead th.we b { color: #b42318; }
.tds thead th.j .lettre { margin-top: 2px; }
.tds thead th.j .ferie { display: block; font-size: 8.5px; color: #b42318; }
/* Les besoins du mois sous les dates, une ligne par type (comme la grille de l'équipe) ; ils défilent avec les noms. */
.tds tr.besoins th.nom { height: 26px; font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--doux); cursor: default; }
.tds tr.besoins td { position: relative; height: 26px; padding: 0; }
.tds tr.besoins:last-child > * { border-bottom: 1px solid var(--bord); }
.couverture { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 9px; font-size: 10.5px; font-weight: 700; line-height: 17px; color: #16a34a; text-decoration: none; }
.couverture.manque { background: #fee2e2; color: #991b1b; }
.couverture.manque:hover { background: #fecaca; }

/* Un trait entre deux statuts, filtre « avec un piquet », survol et personne mise en évidence. */
.tds tbody + tbody tr:first-child > * { border-top: 2px solid #d5dce8; }
.grille tbody + tbody tr:first-child > * { border-top: 2px solid #d5dce8; }  /* grille de l'équipe : entre deux statuts (27/10/2026) */
.tds.seulement-poses tr[data-sans-piquet], .par-semaine.seulement-poses tr[data-sans-piquet] { display: none; }
.tds tbody tr:hover td { background-color: inherit; }
.tds tr.survol > td:not(.repos):not(.indispo), .tds td.col-survol:not(.repos):not(.indispo) { background: #eef4ff; }
.tds tr.survol > th.nom, .tds thead th.col-survol { background: #e3edff; }
.tds tr.suivi > th.nom { background: #e3edff; box-shadow: inset 3px 0 0 var(--accent); }
.tds tr.suivi > td { border-top: 1px solid #93b4f5; border-bottom: 1px solid #93b4f5; }
/* Survol d'une colonne : qui peut prendre une pièce qui reste à couvrir (vert franc : sans alerte, pâle : avec alerte). */
.tds.colonne-active tr.personne > td.col-survol:not([data-libre]) > a { opacity: .25; }
.tds.colonne-active tr.personne > td.col-survol:not([data-libre]) { background: #f4f6fa; }
.tds tr.personne > td.col-survol[data-libre="propose"] { box-shadow: inset 0 0 0 2px #16a34a; background: #ecfdf3; }
.tds tr.personne > td.col-survol[data-libre="alerte"] { box-shadow: inset 0 0 0 2px #86efac; background: #f4fdf7; }
.tds tr.libre-propose > th.nom { color: #15803d; font-weight: 700; }
.tds tr.libre-alerte > th.nom { color: #4ade80; font-weight: 600; }

/* Commentaire ou piquets souhaités : le même coin orange que la grille de l'équipe ; le texte au survol et dans la fenêtre. */
.tds td.note { position: relative; }
.tds td.note::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent #f97316 transparent transparent; pointer-events: none; }
.note-du-jour { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -8px 0 4px; padding: 7px 10px; border-left: 3px solid #f97316; border-radius: 4px; background: #fff7ed; font-size: 12.5px; color: #7c2d12; }
.note-du-jour .commentaire { font-style: italic; }
.motif-du-jour { padding: 8px 12px; background: #fef2f2; border-bottom: 1px solid #fecaca; color: #991b1b; font-size: 13px; font-weight: 600; }  /* fenêtre d'une personne : son indisponibilité, une fois */

/* Un clic sur une case ouvre sa fenêtre : ce que la personne tient, les pièces du jour qu'elle peut tenir. */
/* Gestion → Planning sur téléphone (04/11/2026) : chaque case de la semaine ouvre sa fenêtre, comme dans le mois. */
.table-semaine td.gestion .code { font-size: 9.5px; font-weight: 600; color: #6b7280; }
.tds a.case-lien, .table-semaine td.gestion a.case-lien { display: flex; align-items: center; justify-content: center; min-height: 27px; color: inherit; text-decoration: none; }
.table-semaine td.gestion a.case-lien { min-height: 31px; }
.table-semaine td.gestion a.case-lien > .pile, .table-semaine td.gestion a.case-lien > .pc-duo { width: 100%; }
/* En haut de la fenêtre : les desiderata du jour à droite du titre, le commentaire juste dessous. */
.fenetre-titre .desiderata-du-jour { margin: 0 18px 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.fenetre-titre .desiderata-du-jour .case-exemple { margin: 0; }
.fenetre-personne .fenetre-titre { align-items: flex-start; }
.fenetre-personne .fenetre-titre h2 { font-size: 22px; line-height: 1.2; }
.fenetre-personne .fenetre-titre h2 .lettre { vertical-align: 4px; }
.titre-personne { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--texte); }
.titre-personne .badge { vertical-align: 1px; margin-left: 2px; }
.titre-personne .profil { font-size: 12.5px; font-weight: 500; color: var(--doux); }
.fenetre-personne .fenetre-titre .desiderata-du-jour, .fenetre-personne .fenetre-titre .fermer { margin-top: 5px; }
/* Une ligne par groupe : chaque pièce (P, Pj, Pn) est un bouton ; à droite, où en est le groupe. */
.candidat.ligne-groupe { cursor: default; padding: 5px 8px; flex-wrap: wrap; }
.candidat.ligne-groupe:hover { background: var(--carte); }
.pieces-du-groupe { display: flex; flex-wrap: wrap; gap: 4px; }
.choix-piece-groupe { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px; background: none; font: inherit; font-size: 12.5px; color: inherit; text-align: left; }
button.choix-piece-groupe { cursor: pointer; }
button.choix-piece-groupe:hover { background: #eef3fe; border-color: #c7d7f8; }
.choix-piece-groupe .raisons { font-size: 11.5px; }
.choix-piece-groupe.alerte .raisons { color: #9a3412; }
.choix-piece-groupe.indispo .raisons { color: #991b1b; }
.onglet-liste.deja .nombre { background: #e0e7ff; color: #3730a3; }
.fenetre.fenetre-personne { max-width: 700px; }  /* cinq onglets sur une ligne */
.etat-groupe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; margin-left: auto; font-size: 12px; }
.etat-groupe .trou { display: inline-block; margin: 0; padding: 0 6px; font-size: 11px; }
/* Téléphone (04/11/2026) : la fenêtre d'une personne allégée. La date plus petite, le desiderata sous la personne,
   les onglets en pastilles deux par ligne, qui tient chaque pièce sous ses pièces, « Attribuer » au-dessus des codes. */
@media (max-width: 560px) {
  .voile { padding: 10px; }
  .fenetre { padding: 18px 16px; }
  .fenetre-personne .fenetre-titre { flex-wrap: wrap; margin-bottom: 12px; }
  .fenetre-personne .titre-jour-personne { flex: 1; min-width: 0; }
  .fenetre-personne .fenetre-titre h2 { font-size: 18px; }
  .fenetre-personne .fenetre-titre .fermer { margin-top: 2px; }
  .fenetre-personne .fenetre-titre .desiderata-du-jour { order: 3; flex-basis: 100%; margin: 6px 0 0; font-size: 12px; }
  .titre-personne { font-size: 13.5px; gap: 4px 6px; }
  .titre-personne .profil { flex-basis: 100%; font-size: 11.5px; }
  .fenetre-personne .titulaire { margin: 8px 0; font-size: 13px; }
  .fenetre-personne .onglets-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; border-bottom: 0; margin-bottom: 10px; }
  .fenetre-personne .onglet-liste { margin: 0; padding: 6px 8px; border: 1px solid var(--bord); border-radius: 7px; font-size: 12.5px; text-align: left; }
  .fenetre-personne .onglet-liste .nombre { float: right; }
  .fenetre-personne .onglet-liste.actif { background: #eef4fe; border-color: var(--accent); }
  .candidat.ligne-groupe { padding: 6px 8px; }
  .choix-piece-groupe { padding: 3px 5px; font-size: 12px; gap: 4px; }
  .etat-groupe { flex-basis: 100%; justify-content: flex-start; margin: 2px 0 0 5px; font-size: 11.5px; }
  .motif-du-jour { padding: 7px 10px; font-size: 12.5px; }
  .pied-attribuer { justify-content: flex-start; }
  .pied-attribuer > .doux { flex-basis: 100%; font-size: 12px; }
  .pied-attribuer .fermer { flex-basis: 100%; margin: 6px 0 0; justify-content: center; text-align: center; }
}

/* Bulle de détail au survol d'une case. */
.bulle { position: fixed; z-index: 400; max-width: 360px; padding: 10px 12px; border-radius: 8px; background: var(--nuit); color: #fff; font-size: 12px; line-height: 1.5; box-shadow: 0 8px 24px rgba(15,23,42,.3); pointer-events: none; }
.bulle .titre { font-weight: 700; font-size: 12.5px; }
.bulle .doux { color: rgba(255,255,255,.65); }
.bulle .alerte { color: #fdba74; }
.bulle .action { margin-top: 4px; color: #93c5fd; }
.bulle .cartouches { display: flex; gap: 10px; margin-top: 4px; }  /* AR | coordinations | reste */
.bulle .cartouches > div { display: flex; flex-direction: column; gap: 3px; }
.bulle .cartouches > div:empty { display: none; }
.bulle .rangee-cartouches { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.bulle .commentaire { margin-top: 3px; font-style: italic; }
.bulle .etiquette { min-width: 68px; color: rgba(255,255,255,.65); }  /* « Attribué », « Desiderata » : les cartouches alignés */
.pc.indispo { background: repeating-linear-gradient(135deg, #d5d9e0 0 3px, #eceef2 3px 7px); color: #374151; }  /* I, IS */
.pc.indispo.demi { background: repeating-linear-gradient(135deg, #e4e7ec 0 3px, #f5f6f8 3px 7px); }
.pc.dispo { background: #c8efd5; color: #166534; }  /* D */
.pc.dispo.demi { background: #e3f7ea; }

/* ── Téléphone : le panneau passe en haut, pour tous ─ */
@media (max-width: 860px) {
  body { display: block; }
  .panneau { position: static; width: auto; min-height: 0; }
  .poignee { display: none; }
  .marque { padding: 12px 16px; }
  .panneau { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .panneau .marque { flex: 1; border-bottom: 0; white-space: nowrap; }
  .logo-marque { width: 28px; height: 28px; border-radius: 7px; }
  .panneau .mon-compte-nav { order: 2; margin: 0 12px 0 0; padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; gap: 6px; font-size: 12.5px; white-space: nowrap; }
  .bascule-mode ~ .mon-compte-nav span:not(.icone) { display: none; }
  .deconnexion-nav { display: none; }  /* sur téléphone : dans Mon compte */  /* gestionnaire : 👤 seul, la place pour la bascule */
  .panneau .mon-compte-nav.actif { background: rgba(79,142,247,.25); border-color: var(--accent); }
  /* Bascule Membre / Gestion dans le bandeau, avant Mon compte (04/11/2026). */
  .bascule-mode { order: 1; display: flex; margin-right: 8px; padding: 2px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; }
  .bascule-mode a { padding: 4px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.62); text-decoration: none; }
  .bascule-mode a.actif { background: var(--accent); color: #fff; }
  /* Les onglets des membres en bas, fixes, comme une appli (02/11/2026) : Dispos, Planning, Missions, Suivi ; en mode
     Gestion, à leur place : Personnel, Planning, Besoins, Suivi (04/11/2026). */
  .navigation, .navigation-gestion {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr); padding: 0 0 env(safe-area-inset-bottom); background: var(--carte);
    border-top: 1px solid var(--bord); box-shadow: 0 -2px 10px rgba(15,23,42,.06);
  }
  .navigation-gestion, .navigation-gestion .reglages, .mode-gestion .navigation { display: none; }  /* une barre à la fois */
  .mode-gestion .navigation-gestion { display: grid; }
  .navigation .nav-item, .navigation-gestion .nav-item {
    flex-direction: column; justify-content: center; gap: 3px; padding: 7px 2px 6px; font-size: 11px;
    color: var(--doux); border-bottom: 0; border-top: 3px solid transparent;
  }
  .navigation .nav-item:hover, .navigation-gestion .nav-item:hover { background: none; color: var(--accent); }
  .navigation .nav-item.actif, .navigation-gestion .nav-item.actif { background: #eef4fe; color: var(--accent); border-top-color: var(--accent); }
  .navigation .nav-item .icone, .navigation-gestion .nav-item .icone { font-size: 19px; width: auto; }
  .nom-long { display: none; }
  .nom-court { display: inline; }
  body { padding-bottom: calc(var(--onglets-bas) + env(safe-area-inset-bottom)); }
  .barre-enregistrer { bottom: calc(var(--onglets-bas) + env(safe-area-inset-bottom)); }
  .nav-section { display: none; }
  .nav-item { border-left: 0; border-bottom: 3px solid transparent; padding: 10px 14px; white-space: nowrap; }
  .nav-item.actif { border-bottom-color: var(--accent); }
  .principal { margin-left: 0; }
  .saisie select { max-width: 118px; }
  .saisie td { padding: 6px 6px; }
  .barre { padding: 0 16px; }
  .barre:has(.choix-mois) .date { display: none; }  /* téléphone : la place pour le mois */
  .choix-mois { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 4px; }
  .choix-mois select { min-width: 0; width: 100%; max-width: 150px; font-size: 13px; padding: 4px 6px; }
  .choix-mois .fleche { flex: none; }
  .contenu { padding: 16px; }
}

/* Téléphone : la fenêtre de modification sur une seule colonne ; la saisie tient dans la largeur. */
@media (max-width: 520px) {
  .saisie th, .saisie td { padding: 6px 4px; }
  .saisie th:first-child, .saisie td:first-child { padding-left: 10px; }
  .saisie { table-layout: fixed; }  /* les trois menus se partagent la largeur à parts égales */
  .saisie th:first-child { width: 66px; }
  .saisie th:last-child { width: 38px; }
  .saisie td { overflow: hidden; }
  .saisie select { width: 100%; max-width: none; padding: 5px 2px; font-size: 12px; }
  .saisie .details-resume .tag, .saisie .details-resume small { display: none; }
  .saisie th { white-space: normal; padding: 6px 3px; letter-spacing: 0; }
  .saisie th .sur-ordinateur { display: none; }
  .saisie .armement { white-space: normal; }
  .saisie .cartouches-jour { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 2px; }  /* missions et férié sous la date (02/11/2026) */
  .saisie .cartouches-jour:empty { display: none; }
  .saisie .cartouches-jour .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 2px 5px; }
  .saisie .details-resume { min-width: 0; }
  .saisie .details-resume .doux, .saisie .heures { display: none; }
  .titre-personne > .doux { display: none; }  /* le titre de la page le dit déjà */
  .titre-personne select { flex: 1 0 calc(100% - 96px); min-width: 0; }  /* ‹ menu › sur une ligne, le reste dessous */
  .remplir-dates { flex-direction: column; }
  .remplir-dates label { display: block; font-size: 0; }  /* « du » / « au » cachés : la date du haut, puis celle du bas */
  .choix-date { display: flex; justify-content: center; min-width: 0; padding: 4px 1px; font-size: 11px; }
  .remplir strong { font-size: 10px; white-space: normal; line-height: 1.2; }
  .remplir-boutons { flex-direction: column; gap: 4px; }
  .remplir .bouton-second, .remplir .bouton-danger { padding: 4px 0; width: 100%; justify-content: center; }
  .remplir .sur-ordinateur { display: none; }
  .remplir .sur-telephone { display: inline; }
  .grille-form { grid-template-columns: 1fr; }
  .champ.case { padding-top: 0; }
}
/* Besoins : la liste des personnes à qui attribuer une mission, avec sa recherche ; elle défile dans son cadre. */
.recherche-personnes { margin-bottom: 4px; }
.cases:has(#id_personnels), .cases:has(#id_medecin_vrm) { display: block; max-height: 190px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--bord); border-radius: 6px; }
.cases #id_personnels, .cases #id_medecin_vrm { display: block; columns: 2 190px; column-gap: 12px; }  /* alphabétique : colonne de gauche, puis de droite */
.cases #id_personnels label, .cases #id_medecin_vrm label { padding: 2px 0; break-inside: avoid; }
.cases #id_pieces { display: block; columns: 3 160px; column-gap: 12px; }  /* qualification : les piquets, groupe après groupe */
.cases #id_pieces label { padding: 2px 0; break-inside: avoid; }
.champ:has(#id_lieu_autre) { grid-column: 2; }  /* « Autre lieu » sous la liste des lieux */
@media (max-width: 520px) { .champ:has(#id_lieu_autre) { grid-column: auto; } }

/* ── Planning (gestionnaire) : grille jours × piquets ── */
.grille-planning th { text-align: center; }
.grille-planning td { padding: 5px 6px; border-left: 1px solid var(--bord); vertical-align: top; }
.grille-planning td.jour { white-space: nowrap; border-left: 0; }
.grille-planning td.creneaux { min-width: 110px; }
.mission-du-jour { display: block; margin: 2px 0; font-size: 12px; white-space: nowrap; }  /* colonne des missions */
.grille-planning td.off, .case-exemple.off { background: #f1f3f8; }
.grille-planning tr.we td { background: #f7f8fb; }
.grille-planning tr.we td.off { background: #eceff5; }
a.pose, a.trou { text-decoration: none; }
a.pose:hover, a.trou:hover { filter: brightness(.94); text-decoration: underline; }
.pose, .trou { display: block; width: fit-content; margin: 2px 0; padding: 1px 6px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
.pose { background: #dcfce7; color: #166534; }
.trou { background: #fee2e2; color: #991b1b; font-weight: 600; }
.pose.alerte { background: #ffedd5; color: #9a3412; }
.pc.doublure { box-shadow: inset 0 0 0 1.5px #7c3aed; }  /* X* dans la vue par personne : liseré violet (les pointillés : à valider) */
.pose.doublure { background: #ede9fe; color: #5b21b6; }  /* X* (9.2) : le violet de l'étiquette « doublure » */
.pose.doublure.alerte { background: #ffedd5; color: #9a3412; }
.grille-planning .pose, .grille-planning .trou { margin: 2px auto; }  /* centrées dans leur case */
.legende .pose, .legende .trou { display: inline-block; margin: 0 4px 0 0; }
.fenetre-planning { max-width: 620px; }
.choix-piece { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.choix-piece .horaire { font-weight: 400; font-size: 11px; opacity: .75; }
/* Fenêtre « Nouveau besoin », une seule date : les piquets armés ce jour-là (26/10/2026). */
.piquets-jour { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: -6px; font-size: 12.5px; }
.piquets-jour .doux { margin-right: 4px; }
/* Choix du médecin : rappel des pièces du jour déjà tenues, en haut à droite (25/10/2026). */
.entete-choix { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rappel-jour { min-width: 190px; max-height: 150px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 8px; background: var(--fond); font-size: 12.5px; }
.rappel-titre { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--doux); }
.rappel-ligne { display: flex; align-items: center; gap: 6px; padding: 1px 0; white-space: nowrap; }
.titulaire { margin: 14px 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.titulaire .trou { display: inline-block; }
.activite-du-jour { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 12px; font-size: 13px; }  /* formation / réserve attribuée */
.activite-du-jour .bouton-second, .activite-du-jour .bouton { margin-right: 0; padding: 4px 10px; font-size: 12.5px; }
.activite-du-jour .valide { color: #15803d; font-weight: 600; }
.tds td[data-activite] { user-select: none; }  /* double-clic : valider, sans sélectionner le texte */
.tds td.refus-validation { box-shadow: inset 0 0 0 2px #dc2626; }
.outils .tout-valider { margin-left: auto; margin-right: 0; }
/* Gestion → Planning sur téléphone (04/11/2026) : pas de vue par jour ; les boutons du titre côte à côte, à parts
   égales ; « Tout le monde / Avec un piquet » sur toute la largeur, puis Desiderata et Tout valider. */
@media (max-width: 860px) {
  .carte-gestion-planning .carte-titre .actions-titre { display: flex; gap: 6px; }
  .carte-gestion-planning .carte-titre .actions-titre > * { flex: 1 1 0; min-width: 0; justify-content: center; padding: 7px 6px; white-space: nowrap; }
  .carte-gestion-planning .outils { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 12px 16px; }
  .carte-gestion-planning .outils .vues { display: none; }
  .carte-gestion-planning .outils .segment { grid-column: 1 / -1; display: flex; }
  .carte-gestion-planning .outils .segment button { flex: 1 1 0; padding: 7px 6px; font-size: 13px; }
  .carte-gestion-planning .outils .bascule { font-size: 13px; }
  .carte-gestion-planning .outils .tout-valider { padding: 6px 10px; font-size: 12.5px; }
}
.tout-valider .nombre { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; }
.confirmer-tout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 20px 12px; padding: 10px 14px; border: 1px solid #fcd34d; border-radius: 8px; background: #fffbeb; font-size: 13px; }
.confirmer-tout[hidden] { display: none; }
.confirmer-tout .bouton, .confirmer-tout .bouton-second { margin-right: 0; padding: 5px 12px; font-size: 12.5px; }
.pied-attribuer { flex-wrap: wrap; align-items: center; gap: 6px; }  /* en bas : attribuer V, F, R, DSM, MCB, BRI */
.pied-attribuer .bouton-second { margin-right: 0; padding: 4px 9px; font-size: 12px; }
.pied-attribuer .fermer { margin-left: auto; }
.par-moitie { display: inline-flex; }  /* DSM, MCB, BRI : journée entière | jour | nuit */
.par-moitie .bouton-second { border-radius: 0; margin-left: -1px; }
.par-moitie .bouton-second:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.par-moitie .bouton-second:last-child { border-radius: 0 8px 8px 0; }
.par-moitie .moitie { padding: 4px 6px; }
.par-moitie .moitie .pc { min-width: 0; }
.liste-candidats[hidden] { display: none; }
.liste-candidats { max-height: 52vh; overflow-y: auto; border: 1px solid var(--bord); border-radius: 8px; }
.onglets-liste { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--bord); margin-bottom: 8px; }
.onglet-liste { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--doux); cursor: pointer; }
.onglet-liste:hover { color: var(--texte); }
.onglet-liste.actif { color: var(--texte); border-bottom-color: var(--accent); }
.onglet-liste .nombre { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; font-size: 11px; background: #dcfce7; color: #166534; }
.onglet-liste.alerte .nombre { background: #ffedd5; color: #9a3412; }
.onglet-liste.indispo .nombre { background: #fee2e2; color: #991b1b; }
.onglet-liste.impossible .nombre { background: #fee2e2; color: #991b1b; }
.onglet-liste.doublure .nombre { background: #ede9fe; color: #5b21b6; }
.candidat { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-top: 1px solid var(--bord); background: var(--carte); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.candidat:hover { background: #eef3fe; }
.candidat.actuel { background: #dcfce7; }
.candidat.indispo { color: var(--doux); }
.candidat .droite { display: flex; align-items: center; gap: 10px; text-align: right; }
.candidat .raisons { font-size: 12px; text-align: right; }
.candidat .desiderata { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--doux); white-space: nowrap; }
.candidat .desiderata .case-exemple { margin: 0; font-size: 11px; }
.candidat .commentaire { font-style: italic; }
.candidat.alerte .raisons, .titulaire .raisons { color: #9a3412; font-size: 12px; }
.candidat.indispo .raisons { color: #991b1b; }
/* Impossible : en rouge ; le gestionnaire peut quand même forcer, après confirmation (28/10/2026). */
.candidat.impossible { color: var(--doux); background: #fef2f2; }
.candidat.impossible:hover { background: #fee2e2; }
.candidat.impossible .raisons, .choix-piece-groupe.impossible .raisons { color: #b42318; }
.forcer-aide { margin: 4px 0 8px; font-size: 12px; color: #b42318; }
.titulaire .raisons.forcee { color: #b42318; font-weight: 600; }
/* Une pièce forcée : en rouge partout (grille, vue par personne, bulle, bilan, Mon planning). */
.pose.forcee { background: #fee2e2; color: #991b1b; font-weight: 600; }
.pc.forcee, .pc-duo.forcee { outline: 2px solid #dc2626; outline-offset: 1px; }
.bulle .forcee { color: #fca5a5; font-weight: 600; }
.badge-forcee { background: #fee2e2; color: #991b1b; }
.liste-candidats .vide { padding: 8px 12px; }
.liste-candidats .sous-titre-liste { position: sticky; top: 0; z-index: 1; background: #dfe5ef; padding: 7px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--texte); border-top: 1px solid #c9d2e0; border-bottom: 1px solid #c9d2e0; }  /* se distingue nettement des noms */
.liste-candidats .sous-titre-liste:first-child { border-top: 0; }

/* ── Publication du planning (26/10/2026) ─────────────── */
.carte-titre .actions-titre { float: right; display: flex; gap: 8px; margin-top: -5px; }
.carte-titre .actions-titre > * { margin: 0; padding: 5px 12px; font-size: 12.5px; }
.bilan { list-style: none; margin: 0 0 12px; display: grid; gap: 8px; font-size: 13.5px; }
.bilan li { padding: 8px 12px; border-radius: 6px; }
.bilan .fait { background: #f0fdf4; color: #166534; }
.bilan .a-voir { background: #fffbeb; color: #92400e; }
.rapport-liste { margin: 6px 0 0 18px; max-height: 180px; overflow-y: auto; font-size: 12.5px; line-height: 1.5; }  /* rapport du solveur */
.rapport-parts summary { cursor: pointer; color: var(--accent-2); margin-top: 4px; }
.rapport-parts .defile { max-height: 220px; overflow-y: auto; margin-top: 6px; }
.rapport-parts table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.rapport-parts th, .rapport-parts td { padding: 2px 8px; text-align: right; border-bottom: 1px solid var(--bord); }
.rapport-parts th:first-child, .rapport-parts td:first-child { text-align: left; }
.rapport-parts thead th { position: sticky; top: 0; background: var(--carte); font-weight: 600; }
.progression { height: 10px; margin: 6px 0 8px; border-radius: 5px; background: #e5e7eb; overflow: hidden; }
.progression-barre { height: 100%; background: var(--accent); transition: width 1.5s linear; }
.bilan .manque { background: #fef2f2; color: #b42318; }  /* piquets encore à couvrir : en rouge (27/10/2026) */
.fenetre-publication p { font-size: 13.5px; line-height: 1.5; margin-bottom: 8px; }
.pas-publie { padding: 28px 20px; text-align: center; font-size: 14px; }
.tds.lecture tbody th.nom { cursor: default; }
.tds.lecture tr.mienne > th.nom { background: #fef3c7; box-shadow: inset 3px 0 0 #f59e0b; font-weight: 700; }  /* sa propre ligne */
.tds.lecture tr.mienne > td { background: #fffbeb; }
/* Mon planning : la liste de ce que la personne tient dans le mois (26/10/2026). */
.mon-planning { width: 100%; }
.mon-planning td { vertical-align: top; }
.mon-planning td.jour { white-space: nowrap; width: 1%; }
.mon-planning tr.we td { background: #f6f7fb; }
.mon-planning .tenu { display: flex; align-items: center; gap: 8px; min-height: 22px; white-space: normal; }
.mon-planning td { white-space: normal; }
@media (max-width: 700px) { .mon-planning td, .mon-planning th { padding: 8px 10px; } }
.mon-planning .tenu .doux { white-space: nowrap; }
/* Mon planning : pièces posées malgré une alerte, surtout contre ses desiderata (26/10/2026). */
.avertissement-mon-planning { margin: 14px 20px 16px; padding: 10px 14px; border-radius: 8px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; display: grid; gap: 4px; }
.avertissement-mon-planning .contre { color: #b91c1c; }
.mon-planning .alerte-tenu { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: #b45309; }
.mon-planning .alerte-tenu.contre { color: #b91c1c; }
.mon-planning .tenu { padding: 2px 0; }
/* Journal des changements après publication (26/10/2026). */
.journal td { vertical-align: middle; }
.journal td.jour { width: 1%; white-space: nowrap; }
.journal td.fleche { width: 1%; color: var(--doux); padding-left: 0; padding-right: 0; }
.journal tr.mien td { background: #fffbeb; }
.mon-planning .modifie { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; color: #1d4ed8; }
.sous-titre-journal { padding: 16px 20px 6px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--doux); border-top: 1px solid var(--bord); }
/* Accueil : un bandeau par planning publié (26/10/2026). */
.annonce { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; padding: 12px 16px; border-radius: 8px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; font-size: 13.5px; }
/* Bandeau « Mettez le planning sur votre écran d'accueil » (04/11/2026), sur téléphone. */
.installer-icone .annonce-texte { display: flex; gap: 12px; align-items: flex-start; }
.installer-icone img { flex: none; border-radius: 8px; }
.installer-icone[hidden], .installer-icone [hidden] { display: none; }
.symbole-partager { display: inline-block; width: 13px; height: 15px; vertical-align: -2px; border: 1.8px solid currentColor;
  border-top: 0; border-radius: 0 0 3px 3px; position: relative; margin: 0 2px; }
.symbole-partager::before { content: "↑"; position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  font-size: 13px; font-weight: 700; line-height: 1; }
.annonce-changements { display: inline-block; margin-left: 4px; font-weight: 600; color: #b45309; }
.annonce-liens { display: flex; gap: 8px; }
.annonce-liens a { padding: 6px 14px; font-size: 12.5px; }
/* Aperçu de l'Excel (26/10/2026) : la feuille redessinée case par case, police et quadrillage d'Excel. */
.apercu-excel { max-height: calc(100vh - 210px); overflow: auto; background: #fff; }
.apercu-excel table { table-layout: fixed; border-collapse: collapse; font-family: Calibri, Carlito, Arial, sans-serif; font-size: 14.5px; color: #000; }
.apercu-excel td { padding: 0 3px; border: 1px solid #e1e4e8; white-space: nowrap; overflow: visible; vertical-align: bottom; font-size: inherit; line-height: 1.15; }
.apercu-excel thead th, .apercu-excel tbody th { position: sticky; background: #f3f4f6; color: #6b7280; font-size: 11px; font-weight: 500; text-align: center; border: 1px solid #d1d5db; padding: 0 2px; letter-spacing: 0; text-transform: none; }
.apercu-excel thead th { top: 0; z-index: 2; height: 20px; }
.apercu-excel tbody th { left: 0; z-index: 1; }
.apercu-excel th.coin { left: 0; z-index: 3; }
.apercu-excel col.numero { width: 34px; }
.onglets-excel { display: flex; gap: 2px; padding: 0 0 0 34px; border-top: 1px solid #d1d5db; background: #f3f4f6; }  /* les onglets, en bas */
.onglets-excel button { border: 1px solid #d1d5db; border-top: 0; border-radius: 0 0 6px 6px; background: #e5e7eb; padding: 5px 16px; font: inherit; font-size: 12.5px; color: var(--doux); cursor: pointer; margin-top: -1px; }
.onglets-excel button.actif { background: #fff; color: #166534; font-weight: 600; border-bottom: 2px solid #166534; }
/* Gestion → Planning, fenêtre « Exporter » (proposition A, 26/10/2026) : 1. le format en deux cartes, 2. le contenu en
   boutons à bascule, 3. Export : télécharger, ou « Mail… » qui ouvre la fenêtre Mail (fichier, lien ou les deux). */
.etape-export { margin: 14px 0 7px; font-size: 12px; font-weight: 700; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }
.etape-export small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.options-export > .etape-export:first-of-type { margin-top: 2px; }
.options-export fieldset { border: 0; margin: 0 0 8px; padding: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.options-export legend { float: left; width: 90px; font-size: 13px; font-weight: 600; color: var(--doux); }
.options-export label { position: relative; cursor: pointer; }
.options-export label input { position: absolute; opacity: 0; pointer-events: none; }
.options-export label span { display: inline-block; padding: 6px 13px; border: 1px solid var(--bord); border-radius: 7px; font-size: 13px; background: var(--carte); }
.options-export label:hover span { border-color: var(--accent); }
.options-export input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.options-export input[type="checkbox"]:checked + span::before { content: "✓ "; }
.options-export input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cartes-format { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cartes-format label span { display: block; height: 100%; padding: 10px 14px; border-radius: 8px; }
.cartes-format strong { display: block; font-size: 14px; }
.cartes-format small { display: block; margin-top: 2px; font-size: 12px; color: var(--doux); }
.cartes-format input:checked + span { background: #eef3fe; color: var(--texte); box-shadow: inset 0 0 0 1px var(--accent); }
.cartes-format.trois { grid-template-columns: 1fr 1fr 1fr; }
.coche-mail { display: block; margin-top: 10px; text-align: right; font-size: 13px; color: var(--texte); }  /* fenêtre Mail, sous « Envoyer » */
.options-export label.coche-mail input { position: static; opacity: 1; pointer-events: auto; margin-right: 4px; vertical-align: -2px; }
.etape-trait { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bord); }
.options-export > .bouton, .options-export > .bouton-second { margin: 0 4px 0 0; }
.options-export fieldset:disabled label { cursor: default; opacity: .45; }
.options-export fieldset:disabled label:hover span { border-color: var(--bord); }
.options-export fieldset.verrouille label { pointer-events: none; }  /* Excel : les deux vues, d'office */
@media (max-width: 640px) { .cartes-format.trois { grid-template-columns: 1fr; } }
/* Téléphone (04/11/2026) : le titre (Vues, Personnes) au-dessus, les choix côte à côte, à parts égales. */
@media (max-width: 560px) {
  .options-export legend { float: none; width: auto; margin-bottom: 6px; }
  .options-export fieldset { flex-wrap: nowrap; }
  .options-export fieldset > label:not(.coche-mail) { flex: 1 1 0; min-width: 0; }
  .options-export fieldset > label:not(.coche-mail) span { display: block; text-align: center; }
  .options-export .fenetre-pied .bouton { flex: 1 1 auto; white-space: nowrap; }  /* Mail : « Envoyer à 27 personnes » sur une ligne */
  .options-export .fenetre-pied .bouton-second { flex: none; }
  .coche-mail { text-align: left; }
}
/* Gestion → Suivi (31/10/2026) : tableau de bord (proposition B, colonnes choisies par l'utilisateur) ; charge en
   orange au-dessus de la part, en bleu au-dessous ; pastilles vert / jaune / rouge ; la fiche au clic. */
table.suivi td { font-size: 14px; padding: 9px 10px; }
table.suivi th { white-space: normal; max-width: 110px; line-height: 1.3; vertical-align: bottom; }
table.suivi th.large { min-width: 140px; max-width: none; }
/* Trois blocs (31/10/2026) : Gardes (rouge), Repos (bleu nuit), Remarques (gris), comme le récapitulatif de la V1 ;
   un trait plus marqué au début de chaque bloc. */
table.suivi tr.blocs th { color: #fff; font-size: 11px; padding: 6px 10px; text-align: center; max-width: none; }
table.suivi tr.blocs th:first-child { background: var(--carte); }
table.suivi .bloc-gardes { background: #b5544f; } table.suivi .bloc-repos { background: #2f4b73; }
table.suivi .bloc-indispos { background: #6b7a99; }
table.suivi .bloc-equite { background: #3f7a5a; } table.suivi .bloc-antenne { background: #5b4a8a; }
table.suivi th.triable { cursor: pointer; user-select: none; }
table.suivi th.triable:hover { color: var(--accent, #1d4ed8); }
table.suivi th.trie { color: var(--accent, #1d4ed8); }
table.suivi th.trie::after { content: " ▼"; font-size: 10px; }
table.suivi th.trie.montant::after { content: " ▲"; }
.tri-tel { display: none; }
.etiquette-tel { display: none; }  /* internes : « AR opé » à côté du chiffre, sur téléphone seulement */
table.suivi tr.blocs th.coin-tri { padding: 4px 8px; text-align: left; vertical-align: middle; }
.retour-tri { font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); background: #fff; border: 1px solid var(--accent);
  border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.retour-tri:hover { background: var(--accent); color: #fff; }
.retour-tri[hidden] { display: none; }
table.suivi .bloc-objectif { background: #7a5c2e; }
.onglets .vue-suivi { margin-left: auto; }
/* Gestion → Suivi sur téléphone (04/11/2026) : Antenne sur toute la largeur, les quatre groupes deux par deux, à parts
   égales ; dessous, « Ce mois / Depuis septembre » sur toute la largeur. */
@media (max-width: 860px) {
  .onglets-suivi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .onglets-suivi .onglet { margin: 0; padding: 7px 6px; text-align: center; white-space: nowrap; }
  .onglets-suivi .onglet:first-child { grid-column: 1 / -1; }
  .onglets-suivi .vue-suivi { grid-column: 1 / -1; display: flex; margin: 4px 0 0; }
  .onglets-suivi .vue-suivi a { flex: 1 1 0; text-align: center; }
}
/* Onglet Antenne (31/10/2026) : la vue d'ensemble en tuiles. */
.tuiles-antenne .tuile { cursor: default; }
.tuiles-antenne .valeur small { font-size: 13px; font-weight: 500; }
.part-statut { display: grid; grid-template-columns: 1fr 70px 38px; align-items: center; gap: 8px; font-size: 12px; color: var(--doux); margin-top: 4px; }
.part-statut b { text-align: right; color: var(--texte); }
.barre-statut { height: 7px; background: #eef1f6; border-radius: 4px; overflow: hidden; }
.barre-statut span { display: block; height: 100%; background: #b5544f; }
.ecart-extreme { margin-top: 5px; }
table.suivi .debut-bloc { border-left: 2px solid #cbd5e1; }
table.suivi tr.blocs th.debut-bloc { border-left-color: #fff; }
table.suivi th { text-align: center; }
table.suivi th:first-child { text-align: left; }
table.suivi tbody tr:nth-child(even) td { background: #fafbfd; }
table.suivi td.chiffre { font-variant-numeric: tabular-nums; }
.nom-suivi { color: var(--texte); text-decoration: none; font-weight: 500; }
.nom-suivi:hover { color: var(--accent); text-decoration: underline; }
/* Partis avant la fin de la période (04/11/2026) : en bas, grisés, séparés des présents par un trait. */
table.suivi tr.parti td { color: var(--doux); }
table.suivi tr.parti .nom-suivi, table.suivi tr.parti strong { color: var(--doux); }
table.suivi tr.premier-parti td { border-top: 2px solid var(--bord); }
.parti-le { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 9px; background: #eef1f6; font-size: 11px; color: var(--doux); white-space: nowrap; }
.ecart-tel { display: none; }  /* l'écart à la part : sur téléphone seulement, à côté des gardes */
/* Gestion → Suivi sur téléphone (proposition A, 04/11/2026) : une carte par personne au lieu du tableau ; le nom, ses
   gardes sur sa part et l'écart en haut, les autres chiffres en petites étiquettes ; toucher la carte ouvre la fiche. */
@media (max-width: 860px) {
  table.suivi, table.suivi tbody { display: block; }
  table.suivi thead { display: none; }
  table.suivi tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; padding: 10px 14px; border-top: 1px solid var(--bord); }
  table.suivi tbody tr:first-child { border-top: 0; }
  table.suivi tbody tr:nth-child(even) td { background: none; }
  table.suivi tbody td { display: block; padding: 0; border: 0; text-align: left; font-size: 12px; }
  table.suivi td.col-nom { order: 1; flex: 1; min-width: 0; }
  table.suivi .nom-suivi { font-size: 14px; }
  table.suivi tbody tr { cursor: pointer; }  /* toute la carte ouvre la fiche (script de la page) */
  table.suivi td.col-gardes { order: 2; font-size: 14px; }
  table.suivi .ecart-tel { display: inline; margin-left: 4px; font-size: 13px; }
  table.suivi .etiquette-tel { display: inline; font-size: 12px; }
  table.suivi tbody tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }  /* les étiquettes à la ligne */
  table.suivi td[data-etiquette] { order: 4; padding: 2px 7px; border-radius: 5px; background: var(--fond); white-space: nowrap; }
  table.suivi td[data-etiquette]::before { content: attr(data-etiquette) " "; color: var(--doux); }
  table.suivi td[data-etiquette]:empty { display: none; }
  table.suivi td[data-etiquette] .pastille-suivi { margin: 0; padding: 0 6px; font-size: 11.5px; }
  table.suivi td[data-etiquette] small { display: none; }
  .tri-tel { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--bord); font-size: 13px; color: var(--doux); }
  .tri-tel label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
  .tri-tel select { flex: 1; min-width: 0; font-size: 14px; padding: 6px 8px; }
  table.suivi tbody td.debut-bloc { border-left: 0; }
  table.suivi tbody tr.premier-parti { border-top: 2px solid var(--bord); }
  table.suivi tbody tr.premier-parti td { border-top: 0; }
  table.suivi tr.parti { background: #fafbfd; }
  table.suivi .parti-le { display: block; width: fit-content; margin: 3px 0 0; }  /* sous le nom */
}
.avance { color: #c2410c; font-weight: 600; } .retard { color: #1d4ed8; font-weight: 600; }
.rouge { color: #b91c1c; }
.pastille-suivi { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 10px; margin: 1px 4px 1px 0; white-space: nowrap; }
.ps-ok { background: #dcfce7; color: #166534; } .ps-alerte { background: #fef3c7; color: #92400e; }
.ps-grave { background: #fee2e2; color: #991b1b; } .ps-gris { background: #f1f5f9; color: #475569; }
.fenetre.fenetre-suivi { max-width: 760px; }
.fiche-carte { padding: 22px 24px; max-width: 900px; }  /* Mon suivi : la fiche dans la page */
.titre-fiche { font-size: 18px; margin-bottom: 14px; }
.fenetre-suivi .mois-fiche { font-size: 13px; font-weight: 400; margin-left: 6px; }
.jours-suivi { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.jour-suivi { display: inline-flex; width: 21px; height: 24px; border-radius: 4px; font-size: 10.5px; align-items: center; justify-content: center; color: #334155; }
.jour-suivi.we { box-shadow: inset 0 -2px 0 #1a2744; }
.jour-suivi.travaille { background: #f7c6c3; } .jour-suivi.repos_de_garde { background: #fde2c4; }
.jour-suivi.vrai_repos { background: #d9f5e1; } .jour-suivi.vacances { background: #dbeafe; }
.legende-suivi { font-size: 12px; color: var(--doux); margin-bottom: 18px; }
.legende-suivi .jour-suivi { width: 12px; height: 12px; vertical-align: -1px; margin: 0 3px 0 8px; }
.legende-suivi .jour-suivi:first-child { margin-left: 0; }
/* Depuis septembre : une barre par mois (02/11/2026), découpée selon les jours ; un clic ouvre le mois. */
.mois-suivi { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.mois-barre { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 5px 6px; border-radius: 6px; color: inherit; text-decoration: none; }
.mois-barre:hover { background: var(--fond); }
.mois-nom { font-size: 12.5px; font-weight: 600; }
.barre-jours { display: flex; gap: 2px; height: 16px; }
.barre-jours .jour-suivi { width: auto; height: 100%; flex-basis: 0; border-radius: 3px; }
.mois-comptes { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: var(--doux); }
.compte-suivi .jour-suivi { width: 9px; height: 9px; margin-right: 4px; vertical-align: 0; border-radius: 2px; }
.fiche-blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 26px; }
.fiche-bloc + .fiche-bloc { margin-top: 18px; }
.fiche-bloc h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--doux); padding-bottom: 5px; margin-bottom: 4px; border-bottom: 2px solid var(--bord); }
.fiche-bloc.bloc-gardes h3 { border-color: #b5544f; } .fiche-bloc.bloc-equite h3 { border-color: #d07a3c; }
.fiche-bloc.bloc-antenne h3 { border-color: #d4a72c; } .fiche-bloc.bloc-repos h3 { border-color: #2f4b73; }
.fiche-bloc.bloc-absences h3 { border-color: #7c93b5; } .fiche-bloc.bloc-desiderata h3 { border-color: #6b7a99; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13.5px; border-bottom: 1px dashed #eef1f6; }
.kv span { color: var(--doux); } .kv b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ── Mon compte (02/11/2026) : sa fiche en lecture, puis mot de passe et déconnexion ── */
.mon-compte-carte { max-width: 860px; }
.mon-compte-corps { padding: 16px 20px; }
.mon-compte-restrictions .tag { font-size: 12px; }
.mon-compte-note { margin-top: 16px; font-size: 12.5px; }
.mon-compte-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; max-width: 860px; }
.mon-compte-actions form { margin: 0; }
.mon-compte-actions .bouton-danger { margin-right: 0; border-color: #f87171; }

/* ── Planning de tout le monde, jour par jour (téléphone, 02/11/2026) ── */
.par-jour { display: none; }
.tete-jour { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--bord); }
.titre-jour { text-align: center; font-size: 14px; }
.titre-jour small { display: block; font-size: 11px; color: var(--doux); }
.fleche-jour { width: 36px; height: 36px; flex: none; border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); font-size: 20px; line-height: 1; color: var(--texte); cursor: pointer; }
.fleche-jour:disabled { opacity: .3; cursor: default; }
a.fleche-jour { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.bloc-jour { padding: 12px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--doux); }
.ligne-jour { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid #f0f3f8; font-size: 13.5px; }
.ligne-jour .pc { justify-self: start; min-width: 38px; text-align: center; }
.ligne-jour.doublure-jour { padding-left: 24px; font-size: 13px; }
.ligne-jour.mienne { background: #fef3c7; box-shadow: inset 3px 0 0 #f59e0b; font-weight: 600; }  /* comme sa ligne du tableau */
.horaires-jour { font-size: 11.5px; white-space: nowrap; }
.non-tenu { color: #b91c1c; font-style: italic; }
.vide-jour { font-style: italic; }
.jour-du-planning { padding-bottom: 6px; }
@media (max-width: 860px) {  /* après les règles ci-dessus, qu'elles remplacent sur téléphone */
  .tableau-tout-le-monde { display: none; }
  .par-jour { display: block; }
  .carte-titre .actions-titre { float: none; margin: 8px 0 0; }  /* le titre, puis « Télécharger » dessous */
  /* Tout le monde · Mon planning · Changements sur une seule ligne (02/11/2026). */
  .onglets-une-ligne { flex-wrap: nowrap; gap: 5px; }
  .onglets-une-ligne .onglet {
    flex: 1 1 auto; min-width: 0; padding: 6px 6px; text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
}
@media (max-width: 360px) { .onglets-une-ligne .onglet { font-size: 11px; padding: 6px 4px; } }
/* Missions et Besoins sur téléphone : une carte par besoin au lieu du tableau (02/11/2026) ; la capsule, le piquet et
   la date en haut, l'intitulé, puis les médecins et les précisions. */
@media (max-width: 860px) {
  .bloc-missions .defile { overflow: visible; }
  .bloc-missions table, .bloc-missions tbody { display: block; }
  .bloc-missions thead { display: none; }
  .bloc-missions tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 14px; border-top: 1px solid var(--bord); }
  .bloc-missions tr:first-child { border-top: 0; }
  .bloc-missions td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; max-width: 100%; }
  .bloc-missions td.col-type { order: 1; }
  .bloc-missions td.col-piquet { order: 2; }
  .bloc-missions td.col-date { order: 3; margin-left: auto; font-size: 12px; color: var(--doux); }
  .bloc-missions td.col-intitule { order: 4; flex-basis: 100%; font-weight: 600; }
  .bloc-missions td.col-medecins { order: 5; flex-basis: 100%; font-size: 13px; }
  .bloc-missions td.col-precisions { order: 6; flex-basis: 100%; font-size: 12px; }
  .bloc-missions td.actions-ligne { order: 7; flex-basis: 100%; text-align: right; }
  .bloc-missions .vide-tel { display: none; }
}

/* Gestion → Personnel sur téléphone (04/11/2026) : une carte par personne au lieu du tableau ; le nom, le statut et le
   crayon en haut, puis le compte, la cible, les dates, les qualifications et les restrictions. Pas de glisser-déposer
   (il se fait à la souris, sur ordinateur). */
@media (max-width: 860px) {
  .liste-personnel .defile { overflow: visible; }
  .liste-personnel table, .liste-personnel tbody { display: block; }
  .liste-personnel thead, .liste-personnel td.poignee, .aide-ordre { display: none; }
  .liste-personnel tr { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; padding: 10px 14px; border-top: 1px solid var(--bord); }
  .liste-personnel tr:first-child { border-top: 0; }
  .liste-personnel td { display: block; padding: 0; border: 0; white-space: normal; font-size: 12px; }
  .liste-personnel td.col-nom { order: 1; font-size: 14px; }
  .liste-personnel td.col-statut { order: 2; }
  .liste-personnel td.col-actions { order: 3; margin-left: auto; }
  .liste-personnel tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }  /* le reste à la ligne */
  .liste-personnel td.col-compte { order: 4; }
  .liste-personnel td.col-compte:not(:has(.badge)) { display: none; }  /* pas de compte : rien */
  .liste-personnel td.col-cible { order: 5; }
  .liste-personnel td.col-cible::before { content: "Cible "; color: var(--doux); }
  .liste-personnel td.col-arrivee { order: 6; }
  .liste-personnel td.col-arrivee::before { content: "Arrivée "; }
  .liste-personnel td.col-depart { order: 7; }
  .liste-personnel td.col-depart::before { content: "Départ "; }
  .liste-personnel td.vide-tel { display: none; }
  .liste-personnel td.col-qualifs { order: 8; flex-basis: 100%; }
  .liste-personnel td.col-restrictions { order: 9; flex-basis: 100%; }
  .liste-personnel td.col-restrictions:not(:has(.badge)) { display: none; }
}

/* ── Téléphone : semaine par semaine (Disponibilités de l'équipe, Planning de tout le monde, 02/11/2026) ── */
.carte-semaine, .par-semaine, .choix-vue-tel { display: none; }
.table-semaine { width: 100%; table-layout: fixed; border-collapse: collapse; }
.table-semaine th, .table-semaine td { padding: 0; font-weight: 600; height: 32px; text-align: center; font-size: 10.5px; border-bottom: 1px solid #eef1f6; border-left: 1px solid #f3f5f9; white-space: nowrap; overflow: hidden; }
.table-semaine th.nom { width: 100px; text-align: left; padding: 3px 3px 3px 7px; font-size: 11px; font-weight: 600; line-height: 1.15; white-space: normal; text-overflow: ellipsis; border-left: 0; text-transform: none; letter-spacing: 0; color: var(--texte); }
.table-semaine th.nom small { display: block; font-weight: 400; color: var(--doux); font-size: 10.5px; }
.table-semaine thead th { height: auto; padding: 4px 0; font-weight: 500; color: var(--doux); text-transform: none; letter-spacing: 0; line-height: 1.25; }
.table-semaine thead th .js { display: block; font-size: 9.5px; }
.table-semaine thead th b { display: block; font-size: 12px; color: var(--texte); }
.table-semaine thead th .lettre { font-size: 9px; min-width: 14px; }
.table-semaine .we { background: #f6f8fc; }
.table-semaine .hors-mois { background: repeating-linear-gradient(135deg, #f3f5f9 0 3px, #fff 3px 7px); }
.table-semaine tr.separation > * { border-top: 2px solid #dfe5ef; }
.table-semaine tr.mienne > th.nom { background: #fef3c7; box-shadow: inset 3px 0 0 #f59e0b; }
.table-semaine tr.mienne > td:not(.case) { background-color: #fffbeb; }
.table-semaine tr.absents > * { height: 24px; font-weight: 600; color: #991b1b; border-bottom: 2px solid var(--bord); }
.table-semaine tr.absents th.nom { font-weight: 500; color: var(--doux); font-size: 10.5px; }
.table-semaine tr.absents .h1 { background: #fdecec; } .table-semaine tr.absents .h2 { background: #fbd5d5; } .table-semaine tr.absents .h3 { background: #f7b9b9; }
.table-semaine.planning .pc { min-width: 0; width: calc(100% - 4px); padding: 0; font-size: 9.5px; }
.table-semaine.planning .pile, .table-semaine.planning .pc-duo { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.table-semaine.planning .pc-duo .plus { display: none; }
/* Les quatre lignes de besoins sous les dates (04/11/2026) : le nom d'une barre peut déborder sur les jours libres. */
.table-semaine tr.besoins th.nom { height: 22px; padding-top: 2px; padding-bottom: 2px; font-size: 8.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--doux); line-height: 1.1; }
.table-semaine tr.besoins td { position: relative; height: 22px; overflow: visible; }
.table-semaine tr.besoins .barre-mission { top: 3px; bottom: 3px; }
.table-semaine tr.besoins .nom-barre { left: 5px; font-size: 9.5px; }
.table-semaine tbody.besoins tr:last-child > * { border-bottom: 2px solid var(--bord); }
.deplier-semaine { display: block; width: 100%; padding: 9px 12px; border: 0; border-top: 1px solid var(--bord); background: none; text-align: left; font: inherit; font-size: 12px; color: var(--accent-2); cursor: pointer; }
.besoins-semaine { padding: 8px 12px 10px; border-top: 1px solid var(--bord); display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
@media (max-width: 860px) {
  .tableau-mois { display: none; }
  .carte-semaine, .par-semaine { display: block; }
  .choix-vue-tel { display: inline-flex; margin-left: auto; }
  .carte-titre .actions-titre:has(.choix-vue-tel) { display: flex; align-items: center; gap: 8px; }  /* Télécharger à gauche, la vue à droite */
  .carte-titre .actions-titre > .choix-vue-tel { padding: 3px; margin-left: auto; font-size: inherit; }
  .choix-vue-tel button { padding: 5px 10px; font-size: 12px; }
}

/* ── Réglages → Solveur (04/11/2026) ─ */
.aide-solveur { padding: 12px 20px 0; font-size: 12.5px; line-height: 1.5; }
.table-solveur td:nth-child(2) { white-space: normal; min-width: 240px; line-height: 1.4; }
.table-solveur th.nombre, .table-solveur td.nombre { text-align: right; }
.table-solveur input.poids { width: 70px; padding: 5px 8px; border: 1px solid var(--bord); border-radius: 6px; font: inherit; text-align: right; }
.table-solveur tr.changee td { background: #fffbeb; }
.table-solveur tr.coupee td { color: var(--doux); background: #f8fafc; }
.table-solveur tr.coupee td:nth-child(2) { text-decoration: line-through; }
.case-active { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; }
.pied-solveur { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--bord); }
.corps-solveur { padding: 14px 20px; }
.regles-en-attente { list-style: none; margin-bottom: 14px; }
.regles-en-attente li { padding: 10px 0; border-bottom: 1px solid var(--bord); font-size: 13px; line-height: 1.5; }
.regles-en-attente .badge { background: #fef3c7; color: #92400e; }
.retirer-regle { display: inline; }
.lien-retirer { margin-left: 8px; border: 0; background: none; color: #b91c1c; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.ajouter-regle { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ajouter-regle textarea { width: 100%; padding: 10px; border: 1px solid var(--bord); border-radius: 8px; font: inherit; resize: vertical; }
.sous-titre-solveur { font-size: 12.5px; font-weight: 600; margin: 4px 0 8px; }
.sous-titre-solveur + * { margin-bottom: 16px; }
.priorites-solveur, .dures-solveur { padding-left: 20px; font-size: 13px; line-height: 1.6; }

/* ── Bourse aux gardes (05/11/2026) ───────────────────── */
.carte.bourse + .carte.bourse { margin-top: 18px; }
.carte-titre .doux { font-weight: 400; }
.offres { list-style: none; padding: 4px 20px 8px; font-size: 13px; }
.offre { padding: 11px 0; border-bottom: 1px solid var(--bord); }
.offre:last-child { border-bottom: 0; }
.offre-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.offre-quand { font-weight: 600; min-width: 150px; }
.offre-piece { color: #374151; }
.offre-mission { font-size: 12.5px; }
.offre-mission .badge-mission { cursor: default; }
.offre-action { margin-left: auto; }
.offre-action form { margin: 0; }
.offre-action .bouton-second, .offre .offre-action > .bouton-second { padding: 5px 12px; font-size: 12.5px; }
.offre-ligne { margin-top: 5px; font-size: 12.5px; }
.offre-mot { font-style: italic; color: #374151; }
.offre details summary { cursor: pointer; color: var(--accent); }
.offre.caduque .offre-tete > :not(.offre-action) { opacity: .55; }
.situation { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 10px; border-radius: 6px; background: #f8fafc; }
.situation .verdict { font-weight: 600; }
.situation.libre .verdict { color: #166534; }
.situation.alerte { background: #fff7ed; }
.situation.alerte .verdict { color: #c2410c; }
.situation.impossible { background: #fef2f2; }
.situation.impossible .verdict, .offre-ligne.situation.impossible { color: #b91c1c; }
.tag.a-la-bourse { font-size: 11.5px; padding: 3px 8px; background: #ede9fe; color: #5b21b6; }
.bourse-vide { padding: 14px 20px; font-size: 13px; }
.bourse-note { padding: 10px 20px 0; font-size: 12.5px; }
.mon-planning .col-bourse { width: 1%; white-space: nowrap; text-align: right; }
.mon-planning .tenu-bourse { min-height: 22px; display: flex; align-items: center; justify-content: flex-end; }
.mon-planning .tenu-bourse + .tenu-bourse { margin-top: 0; }
.mon-planning .tenu-bourse .bouton-second { padding: 2px 10px; font-size: 12px; }
.mon-planning .tenu-bourse .tag { text-decoration: none; }
.mon-planning .bourse-telephone { display: none; }
.mon-planning .bourse-telephone .bouton-second { padding: 2px 10px; font-size: 12px; }
.mon-planning .bourse-telephone .tag { text-decoration: none; }
@media (max-width: 700px) {
  .mon-planning .col-bourse { display: none; }
  .mon-planning .bourse-telephone { display: block; margin-top: 4px; }
}
.fenetre-bourse { max-width: 520px; }
.choix-offre { border: 0; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.choix-unique { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; }
.choix-offre legend { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.choix-offre label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fenetre-bourse .champ textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 6px; font: inherit; resize: vertical; }
.note-bourse { margin-top: 12px; font-size: 12px; }
@media (max-width: 560px) {
  .offres { padding: 2px 14px 6px; }
  .offre-quand { min-width: 0; flex-basis: 100%; }
  .offre-action { margin-left: 0; }
}
/* Bourse aux gardes, étape 2 (05/11/2026) : répondre, les réponses. */
.ma-reponse { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 7px 10px; border-radius: 6px; background: #eef4fe; }
.ma-reponse.refusee { background: #f3f4f6; }
.etat-reponse { color: #5b21b6; font-weight: 600; }
.reponses { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 3px solid #ddd6fe; display: grid; gap: 8px; }
.reponse { font-size: 12.5px; display: grid; gap: 4px; }
.reponse.refusee { opacity: .6; }
.reponse .situation { padding: 4px 8px; }
.decider-echange { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 0; }
.decider-echange .bouton, .decider-echange .bouton-second { padding: 5px 12px; font-size: 12.5px; }
.situation-fenetre { margin-bottom: 14px; font-size: 13px; }
.garde-rendue { margin-left: 26px; max-width: calc(100% - 26px); padding: 6px 8px; border: 1px solid var(--bord); border-radius: 6px; font: inherit; font-size: 12.5px; }
.obligatoire { color: #b91c1c; font-weight: 600; }
.offre-action .bouton { padding: 5px 12px; font-size: 12.5px; }