/* Planning Spectacles — thème commun, responsive (ordinateur, tablette, téléphone). */
:root {
  --bleu: #2f6fd6; --bleu-fonce: #2560bd; --nuit: #1b2a3a; --nuit-2: #24384d; --nuit-3: #2e4a66;
  --encre: #1f3b57; --texte: #1d2733; --gris: #5b6b7b; --pale: #9aa6b2;
  --fond: #f4f6f9; --blanc: #ffffff; --bord: #d5dce4; --bord-doux: #e6ebf0;
  --rouge: #c0392b; --orange: #b26a00; --vert: #1e7e34; --bleu-info: #1f5fa8;
  --rayon: 8px; --menu: 232px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: 15px; color: var(--texte);
       background: var(--fond); }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; color: var(--encre); margin: 0; }
h2 { font-size: 1.1rem; color: var(--encre); margin: 0 0 .6rem; }

/* --- structure : menu latéral + contenu ------------------------------------- */
.app { display: flex; min-height: 100vh; }
.menu { width: var(--menu); background: var(--nuit); color: #cfd8e3; flex-shrink: 0; display: flex;
        flex-direction: column; position: sticky; top: 0; height: 100vh; }
.menu .logo { color: #fff; font-weight: 700; font-size: 1.15rem; padding: 20px 18px 2px; }
.menu .sous-logo { color: #8ea3b8; font-size: .8rem; padding: 0 18px 16px; }
.menu nav { flex: 1; overflow-y: auto; }
.menu nav a { display: flex; align-items: center; gap: 10px; color: #cfd8e3; padding: 10px 14px; margin: 2px 10px;
              border-radius: 6px; }
.menu nav a:hover { background: var(--nuit-2); text-decoration: none; }
.menu nav a.actif { background: var(--nuit-3); color: #fff; font-weight: 600; }
.menu nav svg { width: 20px; height: 20px; flex-shrink: 0; }
.menu .utilisateur { border-top: 1px solid var(--nuit-2); padding: 12px 18px; font-size: .85rem; color: #8ea3b8; }
.menu .utilisateur strong { color: #fff; display: block; }
.menu .utilisateur a, .menu .utilisateur button { color: #cfd8e3; font-size: .85rem; }
.contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entete { background: var(--blanc); border-bottom: 1px solid var(--bord); padding: 14px 24px; display: flex;
          align-items: center; gap: 12px; position: sticky; top: 0; z-index: 5; }
.bouton-menu { display: none; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer;
               color: var(--encre); padding: 0 4px; }
.page { padding: 18px 24px 40px; }
.voile { display: none; }

/* --- éléments ------------------------------------------------------------------ */
.bouton, button.bouton { display: inline-flex; align-items: center; gap: 6px; background: var(--blanc);
  border: 1px solid var(--bord); border-radius: 6px; padding: 7px 14px; color: var(--texte); font: inherit;
  cursor: pointer; white-space: nowrap; }
.bouton:hover { background: #eef3f9; text-decoration: none; }
.bouton.primaire { background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 600; }
.bouton.primaire:hover { background: var(--bleu-fonce); }
.bouton.danger { color: var(--rouge); }
.lien-bouton { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.barre .titre { font-weight: 700; color: var(--encre); font-size: 1.05rem; margin: 0 8px; }
.barre .espace { flex: 1; }
input, select, textarea { font: inherit; border: 1px solid var(--bord); border-radius: 6px; padding: 7px 9px;
  background: var(--blanc); color: var(--texte); max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(47, 111, 214, .15); }
label { font-weight: 600; color: var(--encre); }
.cadre { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; }
.sous { color: var(--gris); font-size: .88rem; }
.messages { list-style: none; padding: 0; margin: 0 0 14px; }
.messages li { background: #e8f4ec; border: 1px solid #b9dfc5; color: #14532d; border-radius: 6px;
               padding: 10px 14px; margin-bottom: 6px; }
.messages li.error { background: #fdecea; border-color: #f5c2bd; color: #7f1d1d; }

/* --- accueil ------------------------------------------------------------------------ */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.chiffre { background: var(--blanc); border: 1px solid var(--bord); border-radius: 10px; padding: 14px 16px; }
.chiffre .valeur { font-size: 1.8rem; font-weight: 700; color: var(--encre); }
.chiffre .legende { color: var(--gris); font-size: .88rem; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.alertes { list-style: none; margin: 0; padding: 0; }
.alertes li { border-bottom: 1px solid var(--bord-doux); }
.alertes a, .alertes span { display: block; padding: 9px 4px; }
.alertes .rouge { color: var(--rouge); } .alertes .orange { color: var(--orange); }
.alertes .bleu { color: var(--bleu-info); } .alertes .gris { color: var(--gris); }
.alertes .ok { color: var(--vert); }
.semaine .jour-titre { background: #eef2f6; font-weight: 700; color: var(--encre); padding: 6px 8px;
                        border-radius: 5px; margin-top: 6px; display: block; }
.semaine .ligne { padding: 4px 8px 4px 22px; }
.semaine .vide { color: var(--pale); }

/* --- planning ------------------------------------------------------------------------ */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filtres label { font-weight: 400; color: var(--gris); display: flex; align-items: center; gap: 6px; }
.grille { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.grille .rangee { display: grid; grid-template-columns: var(--colonnes); border-bottom: 1px solid var(--bord-doux); }
.grille .rangee:last-child { border-bottom: none; }
.grille .entetes { background: #eef2f6; font-weight: 700; color: var(--encre); text-align: center; font-size: .9rem; }
.grille .entetes > div { padding: 8px 6px; border-right: 1px solid var(--bord-doux); }
.grille .entetes small { display: block; font-weight: 400; color: var(--gris); }
.grille .cellule { padding: 5px; border-right: 1px solid var(--bord-doux); min-height: 46px; min-width: 0; }
.grille .jour { padding: 8px 10px; background: #f6f8fa; font-size: .9rem; }
.grille .week-end .jour, .grille .week-end .cellule { background: #f3f5f8; }
.grille .aujourdhui .jour { font-weight: 700; color: var(--bleu); }
.grille .etiquette { display: none; }
.carte { background: var(--c, #fff); border: 1px solid color-mix(in srgb, var(--c, #fff) 75%, #000);
         border-left: 5px solid color-mix(in srgb, var(--c, #fff) 55%, #000); border-radius: 7px;
         padding: 5px 8px; margin-bottom: 5px; font-size: .86rem; }
.carte .titre-carte { font-weight: 700; }
.carte .badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; }
.badge { display: inline-block; border-radius: 4px; padding: 0 6px; font-size: .78rem; font-weight: 700;
         background: var(--blanc); }
.badge.rg { background: var(--encre); color: #fff; }
.badge.alerte { background: var(--rouge); color: #fff; }
.carte .equipe { margin: 4px 0 0; padding: 0; list-style: none; font-size: .82rem; }
.carte .equipe .rouge { color: var(--rouge); font-weight: 700; }
.mouvement { background: #fdf6e3; border-radius: 6px; padding: 5px 8px; margin-bottom: 5px; font-size: .84rem; }
.statut-a_demander { color: var(--orange); font-weight: 700; } .statut-demande { color: var(--bleu-info); font-weight: 700; }
.statut-valide { color: var(--vert); font-weight: 700; }
.resume { margin-top: 10px; color: var(--gris); font-size: .9rem; }

/* --- mon planning ---------------------------------------------------------------------- */
.jour-bloc { margin-bottom: 14px; }
.jour-bloc h2 { font-size: 1rem; }
.service-perso { background: var(--blanc); border: 1px solid var(--bord); border-left: 6px solid var(--c, var(--bord));
                 border-radius: var(--rayon); padding: 10px 14px; margin-bottom: 8px; }
.service-perso .haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.service-perso .heure { font-weight: 700; font-size: 1.05rem; color: var(--encre); }
.service-perso .collegues { margin: 6px 0 0; padding: 0; list-style: none; color: var(--gris); font-size: .9rem; }
.service-perso .collegues a { white-space: nowrap; }
.service-perso.rouge { border-color: var(--rouge); }
.alerte-texte { color: var(--rouge); font-weight: 700; }

/* --- tableaux qui deviennent des fiches sur téléphone ------------------------------- */
table.liste { width: 100%; border-collapse: collapse; background: var(--blanc); border: 1px solid var(--bord);
              border-radius: var(--rayon); overflow: hidden; }
table.liste th { background: #eef2f6; color: var(--encre); text-align: left; padding: 9px 10px; font-size: .88rem; }
table.liste td { padding: 9px 10px; border-top: 1px solid var(--bord-doux); vertical-align: top; }
.inactif { color: var(--pale); }

/* --- formulaires --------------------------------------------------------------------- */
.formulaire { max-width: 640px; }
.formulaire .champ { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.formulaire .champ input:not([type=checkbox]), .formulaire .champ select { width: 100%; }
.formulaire .aide { color: var(--gris); font-size: .84rem; font-weight: 400; }
.formulaire .erreur { color: var(--rouge); font-size: .86rem; }
.formulaire .case { flex-direction: row; align-items: center; gap: 8px; }

/* --- connexion ----------------------------------------------------------------------- */
.page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
                  background: linear-gradient(160deg, var(--nuit) 0%, var(--nuit-3) 100%); }
.boite-connexion { background: var(--blanc); border-radius: 12px; padding: 28px; width: 100%; max-width: 380px;
                   box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.boite-connexion h1 { margin-bottom: 4px; }
.boite-connexion .bouton { width: 100%; justify-content: center; margin-top: 6px; }

/* --- saisie ---------------------------------------------------------------------------------- */
.formulaire.large { max-width: 1000px; }
.formulaire .cadre { margin-bottom: 14px; }
.ligne-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; }
.formulaire .cases > div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.formulaire .cases label { font-weight: 400; color: var(--texte); display: flex; gap: 6px; align-items: center; }
.formulaire textarea { width: 100%; }
.zone-danger { margin-top: 14px; }
.attention { color: var(--orange); }
.alerte-bloc { border-color: var(--rouge); background: #fff6f5; margin-bottom: 14px; }
.alerte-bloc h2 { color: var(--rouge); }
.alerte-bloc label { color: var(--rouge); }
.horaire-modifie, .fin-serie { color: var(--orange); font-weight: 600; margin: 0 0 10px; }
.fin-serie { color: var(--encre); }
.cout-global { margin-bottom: 14px; background: #eef2f6; color: var(--encre); }
.pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px;
            vertical-align: -1px; border: 1px solid rgba(0, 0, 0, .15); }
ul.simple { list-style: none; margin: 0; padding: 0; }
ul.simple li { padding: 7px 2px; border-bottom: 1px solid var(--bord-doux); }
.grille-reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.grille-reglages .barre h2 { margin: 0; }
.bouton.petit { padding: 3px 9px; font-size: .85rem; }
.equipe-editeur .lignes-equipe { margin-bottom: 12px; }
.ajout-equipe { background: #f6f8fa; border: 1px dashed var(--bord); border-radius: var(--rayon); padding: 12px; }
.ajout-equipe .ligne-choix { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.ajout-equipe .ligne-choix label { font-weight: 400; display: flex; gap: 6px; align-items: center; }
.candidats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px;
             margin-bottom: 10px; }
.candidats label { font-weight: 400; color: var(--texte); display: flex; gap: 6px; align-items: flex-start; }
.candidats label.rouge { color: var(--rouge); }
.candidats small { display: block; color: inherit; opacity: .85; }

/* planning modifiable : cartes cliquables, glisser-déposer, « + » dans les cases */
a.carte { display: block; color: inherit; text-decoration: none; }
a.carte:hover { filter: brightness(.97); text-decoration: none; }
.grille.modifiable a.carte { cursor: grab; }
.grille .cellule { position: relative; }
.ajouter-ici { position: absolute; right: 4px; bottom: 3px; width: 22px; height: 22px; border-radius: 50%;
               display: flex; align-items: center; justify-content: center; color: var(--bleu); font-weight: 700;
               opacity: 0; background: var(--blanc); border: 1px solid var(--bord); }
.cellule:hover .ajouter-ici, .ajouter-ici:focus { opacity: 1; text-decoration: none; }
.cellule.cible { outline: 2px dashed var(--bleu); outline-offset: -3px; background: #eaf2ff !important; }
.carte.en-deplacement { opacity: .4; }

/* --- matériel, comptabilité ------------------------------------------------------------------------ */
ul.arbre { list-style: none; margin: 8px 0 0; padding: 0; }
ul.arbre > li { padding-left: calc(var(--niveau, 0) * 18px); border-bottom: 1px solid var(--bord-doux); padding-top: 6px;
                padding-bottom: 6px; }
ul.arbre .ligne-cat { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
ul.arbre .actions-cat { font-size: .82rem; display: flex; gap: 10px; }
ul.arbre ul.materiels { list-style: none; margin: 4px 0 0; padding: 0 0 0 16px; }
ul.arbre ul.materiels li { padding: 2px 0; }
ul.catalogue { max-height: 560px; overflow-y: auto; }
ul.catalogue ul.materiels label { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                                  font-weight: 400; color: var(--texte); }
ul.catalogue input[type=number] { width: 80px; }
ul.catalogue li.choisi label { font-weight: 700; }
input[type=search] { width: 100%; margin-bottom: 6px; }
.ttc { font-weight: 700; color: var(--encre); margin: -6px 0 12px; }
th.nombre, td.nombre { text-align: right; white-space: nowrap; }
h3 { color: var(--encre); font-size: 1rem; margin: 16px 0 8px; }
details.cadre > summary { cursor: pointer; }

/* --- tablette ---------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .deux-colonnes { grid-template-columns: 1fr; }
}

/* --- téléphone : menu escamotable, planning en liste, tableaux en fiches ---------------------- */
@media (max-width: 820px) {
  body { font-size: 15.5px; }
  .menu { position: fixed; left: 0; top: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  body.menu-ouvert .menu { transform: none; }
  body.menu-ouvert .voile { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 20; }
  .bouton-menu { display: block; }
  .entete { padding: 10px 14px; }
  .page { padding: 12px 12px 40px; }
  .barre .titre { width: 100%; order: -1; margin: 0 0 4px; }
  .filtres select { flex: 1 1 140px; }

  .grille { background: none; border: none; }
  .grille .rangee { display: block; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon);
                    margin-bottom: 10px; overflow: hidden; }
  .grille .rangee.entetes { display: none; }
  .grille .rangee.sans-service .cellule { display: none; }
  .grille .jour { font-weight: 700; color: var(--encre); background: #eef2f6; }
  .filtres label { flex: 1 1 100%; justify-content: space-between; }
  .filtres label select { flex: 1; max-width: 70%; }
  .grille .cellule { border-right: none; min-height: 0; }
  .grille .cellule.vide { display: none; }
  .grille .etiquette { display: block; font-size: .78rem; font-weight: 700; color: var(--gris); margin: 2px 2px 4px; }

  table.liste, table.liste tbody, table.liste tr, table.liste td { display: block; width: 100%; }
  table.liste thead { display: none; }
  table.liste tr { border-top: 1px solid var(--bord); padding: 6px 0; }
  table.liste td { border: none; padding: 3px 12px; }
  table.liste td[data-label]::before { content: attr(data-label) " : "; color: var(--gris); font-weight: 600; }
}