:root {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --texte: #1c2433;
  --texte-2: #5b6578;
  --bord: #dfe4ec;
  --accent: #2856d8;
  --accent-texte: #ffffff;
  --accent-doux: #e8eefc;
  --vert: #157347;  --vert-doux: #e3f4ea;
  --bleu: #1d5fbf;  --bleu-doux: #e4eefc;
  --ambre: #9a5b00; --ambre-doux: #fdf0d8;
  --rouge: #b42318; --rouge-doux: #fde8e6;
  --gris: #5b6578;  --gris-doux: #eef1f5;
  --violet: #6b3fc7; --violet-doux: #efe8fc;
  --ombre: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .08);
  --rayon: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0f141c;
    --surface: #171e29;
    --surface-2: #1c2431;
    --texte: #e6eaf1;
    --texte-2: #9aa5b8;
    --bord: #2a3445;
    --accent: #6d93ff;
    --accent-texte: #0b1020;
    --accent-doux: #1d2a4a;
    --vert: #5fd39a;  --vert-doux: #143325;
    --bleu: #7fb0ff;  --bleu-doux: #172a47;
    --ambre: #f3b55a; --ambre-doux: #3a2a10;
    --rouge: #ff8a80; --rouge-doux: #3d1916;
    --gris: #9aa5b8;  --gris-doux: #242d3b;
    --violet: #b79bff; --violet-doux: #2a2145;
    --ombre: 0 1px 2px rgb(0 0 0 / .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texte);
  background: var(--fond);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.evitement { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-texte); padding: .5rem 1rem; z-index: 10; }
.evitement:focus { left: 0; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icone { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Cadre : menu latéral, contenu à droite ; barre en haut sur petit écran. */
.cadre { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.menu { background: var(--surface); border-right: 1px solid var(--bord); padding: 1.25rem .75rem; position: sticky; top: 0; height: 100vh; }
.marque { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.15rem; color: var(--texte); padding: 0 .6rem 1.25rem; }
.marque .icone { width: 26px; height: 26px; color: var(--accent); }
.marque:hover { text-decoration: none; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu nav a { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 8px; color: var(--texte-2); font-weight: 500; }
.menu nav a:hover { background: var(--surface-2); color: var(--texte); text-decoration: none; }
.menu nav a[aria-current="page"] { background: var(--accent-doux); color: var(--accent); }
.principal { padding: 1.75rem 2rem 3rem; max-width: 1280px; width: 100%; }
.menu { display: flex; flex-direction: column; }
.moi { margin-top: auto; border-top: 1px solid var(--bord); padding: .75rem .7rem 0; display: grid; gap: .35rem; }
.moi a { display: flex; align-items: center; gap: .7rem; color: var(--texte); font-weight: 500; min-width: 0; }
.moi a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moi a[aria-current="page"] { color: var(--accent); }
.moi form { padding-left: calc(18px + .7rem); }
.sans-menu { grid-template-columns: minmax(0, 1fr); }
.sans-menu .principal { max-width: 420px; margin: 12vh auto 0; }

@media (max-width: 860px) {
  .cadre { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .menu { position: sticky; height: auto; border-right: 0; border-bottom: 1px solid var(--bord); padding: .5rem .75rem; display: flex; align-items: center; gap: .5rem; z-index: 5; }
  .marque { padding: 0 .5rem 0 0; }
  .marque span { display: none; }
  .menu nav { overflow-x: auto; min-width: 0; }
  .menu ul { display: flex; }
  .menu nav a { padding: .45rem .6rem; white-space: nowrap; font-size: .9rem; }
  .menu nav a .icone { display: none; }
  .menu { flex-direction: row; }
  .moi { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; align-items: center; gap: .75rem; }
  .moi a span { display: none; }
  .moi form { padding: 0; white-space: nowrap; }
  .principal { padding: 1.25rem 1rem 2.5rem; }
}

.entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.sous-titre { margin: 0; color: var(--texte-2); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fil { font-size: .875rem; color: var(--texte-2); margin-bottom: .5rem; }
.discret { color: var(--texte-2); font-size: .875em; }
.lien-discret { color: var(--texte-2); font-size: .9rem; }

/* Boutons */
.bouton, .bouton-lien { font: inherit; cursor: pointer; }
.bouton {
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
  padding: .5rem .95rem; border-radius: 8px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-texte); font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.bouton:hover { text-decoration: none; filter: brightness(1.07); }
.bouton.secondaire { background: var(--surface); color: var(--texte); border-color: var(--bord); }
.bouton.secondaire:hover { background: var(--surface-2); }
.bouton.danger { background: transparent; color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 45%, transparent); }
.bouton.danger:hover { background: var(--rouge-doux); }
.bouton .icone { width: 16px; height: 16px; }
.bouton-lien { background: none; border: 0; padding: 0; color: var(--accent); font-size: .875rem; }
.bouton-lien.danger { color: var(--rouge); }
.bouton-lien:hover { text-decoration: underline; }

/* Messages */
.flash { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-radius: var(--rayon); margin-bottom: 1.25rem; border: 1px solid; }
.flash-ok { background: var(--vert-doux); color: var(--vert); border-color: color-mix(in srgb, var(--vert) 30%, transparent); }
.flash-erreur { background: var(--rouge-doux); color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 30%, transparent); }
.flash .fermer { background: none; border: 0; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
.formulaire .flash { margin-bottom: 1rem; }

/* Cartes et grilles */
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.25rem; box-shadow: var(--ombre); margin-bottom: 1.25rem; min-width: 0; }
.grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.25rem; }
.grille-3 .carte, .grille-fiche .carte { margin-bottom: 0; }
.grille-fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.25rem; margin-bottom: 1.25rem; }
@media (max-width: 980px) { .grille-fiche { grid-template-columns: 1fr; } }
.pied-carte { margin: .75rem 0 0; font-size: .9rem; }

.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .9rem; margin-bottom: 1.5rem; }
.indicateur { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); color: var(--texte); border-left: 4px solid var(--bord); }
a.indicateur:hover { text-decoration: none; border-color: var(--accent); }
.indicateur .valeur { font-size: 1.65rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.indicateur .valeur.montant { font-size: 1.3rem; }
.indicateur .valeur small { font-size: .9rem; color: var(--texte-2); font-weight: 500; }
.indicateur .nom { color: var(--texte-2); font-size: .85rem; }
.indicateur.alerte { border-left-color: var(--rouge); }
.indicateur.alerte .valeur { color: var(--rouge); }
.indicateur.attention { border-left-color: var(--ambre); }
.indicateur.attention .valeur { color: var(--ambre); }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li + li { border-top: 1px solid var(--bord); }
.liste a { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .25rem; color: var(--texte); border-radius: 6px; }
.liste a:hover { background: var(--surface-2); text-decoration: none; }
.ligne-titre { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.proprietes { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 0; }
.proprietes dt { color: var(--texte-2); }
.proprietes dd { margin: 0; font-weight: 500; }
.notes { margin: 1rem 0 0; padding: .75rem 1rem; background: var(--surface-2); border-radius: 8px; color: var(--texte-2); white-space: pre-line; }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--gris-doux); color: var(--gris); }
.b-disponible, .b-terminee, .b-ok, .b-actif, .b-repare, .b-assure { background: var(--vert-doux); color: var(--vert); }
.b-en_mission, .b-en_cours { background: var(--bleu-doux); color: var(--bleu); }
.b-en_atelier, .b-en_reparation { background: var(--violet-doux); color: var(--violet); }
.b-planifiee, .b-reparation_planifiee, .b-a_venir { background: var(--accent-doux); color: var(--accent); }
.b-proche, .b-bientot, .b-moyen, .b-a_reparer, .b-a_renouveler, .b-preavis, .b-assurance_proche { background: var(--ambre-doux); color: var(--ambre); }
.b-retard, .b-expire, .b-immobilise, .b-immobilisant, .b-echu, .b-non_assure { background: var(--rouge-doux); color: var(--rouge); }
.pastilles { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }

.plaque { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; font-size: .85em; letter-spacing: .03em; padding: .05rem .4rem; border: 1px solid var(--bord); border-radius: 4px; background: var(--surface-2); color: var(--texte); }
a.plaque:hover { border-color: var(--accent); text-decoration: none; }

/* Tableaux */
.tableau-defilant { overflow-x: auto; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.carte .tableau-defilant { border: 0; box-shadow: none; border-radius: 0; margin: 0 -.25rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-weight: 600; color: var(--texte-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); }
th, td { padding: .65rem .9rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
.carte th { background: none; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr[data-href] { cursor: pointer; }
tbody tr:hover td { background: var(--surface-2); }
tfoot td { border-top: 2px solid var(--bord); border-bottom: 0; }
.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.action-ligne { text-align: right; white-space: nowrap; }

/* Filtres et onglets */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filtres input[type="search"] { flex: 1 1 260px; max-width: 420px; }
.onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--bord); margin-bottom: 1rem; overflow-x: auto; }
.onglets a { padding: .55rem .9rem; color: var(--texte-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.onglets a:hover { color: var(--texte); text-decoration: none; }
.onglets a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* Formulaires */
input, select, textarea {
  font: inherit; color: var(--texte); background: var(--surface);
  border: 1px solid var(--bord); border-radius: 8px; padding: .5rem .7rem; width: 100%; min-height: 2.4rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--rouge); }
input[type="checkbox"] { width: 1.1rem; height: 1.1rem; min-height: 0; accent-color: var(--accent); }
.filtres select { width: auto; }
.filtres .export { margin-left: auto; }
.majuscules { text-transform: uppercase; }
.majuscules::placeholder { text-transform: none; }
.formulaire { max-width: 880px; }
.carte.formulaire { padding: 1.5rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
legend { font-weight: 600; margin-bottom: .75rem; padding: 0; }
.champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.champ { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.champ.large { grid-column: 1 / -1; }
.formulaire > .champ { margin-bottom: 1rem; }
.champ label { font-weight: 500; font-size: .9rem; }
.champ.case label { display: flex; align-items: center; gap: .5rem; }
.requis { color: var(--rouge); text-decoration: none; }
.aide { color: var(--texte-2); font-size: .82rem; margin: 0; }
.formulaire > .aide, fieldset > .aide { margin: -.25rem 0 1rem; }
.erreur { color: var(--rouge); font-size: .82rem; font-weight: 500; }
.boutons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.formulaire p { margin-top: 0; }
.formulaire.en-ligne { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--bord); }
.cases { display: grid; gap: .5rem; }
.case-option { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--bord); border-radius: 8px; cursor: pointer; }
.case-option input { margin-top: .2rem; }
.case-option span { display: grid; gap: .1rem; }
.case-option.desactivee { opacity: .6; cursor: not-allowed; }
.case-option:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.secret { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 600; letter-spacing: .05em; padding: .3rem .6rem; border: 1px dashed var(--bord); border-radius: 6px; background: var(--surface-2); user-select: all; }
details.ajout { margin-top: 1rem; border-top: 1px solid var(--bord); padding-top: .75rem; }
details.ajout summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .9rem; }
details.ajout[open] summary { margin-bottom: 1rem; }

.zone-danger { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px dashed var(--bord); }
.zone-danger .aide { flex-basis: 100%; }

.vide { text-align: center; padding: 3rem 1.5rem; background: var(--surface); border: 1px dashed var(--bord); border-radius: var(--rayon); color: var(--texte-2); }
.vide p { max-width: 520px; margin: 0 auto 1rem; }
.vide-court { color: var(--texte-2); margin: 0; }
.tronque { color: var(--texte-2); font-size: .85rem; margin: .75rem 0 0; }

/* Planning */
.navigation-mois { gap: .4rem; }
.titre-mois { margin: 0 .5rem; min-width: 10ch; text-align: center; text-transform: capitalize; font-size: 1.15rem; }
.legende { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; padding: 0; margin: 0 0 1rem; color: var(--texte-2); font-size: .85rem; }
.legende li { display: flex; align-items: center; gap: .4rem; }
.pastille { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border-left: 3px solid; }
.calendrier { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.cal-entete, .cal-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-entete span { padding: .5rem .6rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2); background: var(--surface-2); border-bottom: 1px solid var(--bord); }
.cal-jour { min-height: 118px; padding: .35rem .4rem .5rem; border-right: 1px solid var(--bord); border-bottom: 1px solid var(--bord); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-jour:nth-child(7n) { border-right: 0; }
.cal-semaine:last-child .cal-jour { border-bottom: 0; }
.cal-jour.hors-mois { background: var(--surface-2); }
.cal-jour.hors-mois .cal-numero { opacity: .5; }
.cal-numero { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 600; padding: 0 .15rem; }
.cal-jour-semaine { display: none; }
.aujourdhui .cal-numero > span { background: var(--accent); color: var(--accent-texte); border-radius: 999px; padding: 0 .5rem; }
.cal-ajout { opacity: 0; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 6px; color: var(--texte-2); font-weight: 600; }
.cal-jour:hover .cal-ajout, .cal-ajout:focus { opacity: 1; }
.cal-ajout:hover { background: var(--accent-doux); color: var(--accent); text-decoration: none; }
.evenement { display: block; font-size: .76rem; line-height: 1.3; padding: .15rem .4rem; border-radius: 4px; border-left: 3px solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texte); }
.evenement:hover { text-decoration: none; filter: brightness(.96); }
.mission, .pastille.mission { background: var(--bleu-doux); border-color: var(--bleu); }
.mission.terminee { opacity: .65; }
.entretien, .pastille.entretien { background: var(--violet-doux); border-color: var(--violet); }
.entretien.proche { background: var(--ambre-doux); border-color: var(--ambre); }
.entretien.retard, .pastille.entretien.retard { background: var(--rouge-doux); border-color: var(--rouge); }
.entretien.terminee, .pastille.entretien.terminee { background: var(--vert-doux); border-color: var(--vert); }

@media (max-width: 760px) {
  .cal-entete { display: none; }
  .cal-semaine { display: block; }
  .cal-jour { min-height: 0; border-right: 0; }
  .cal-jour.hors-mois, .cal-jour.sans-evenement:not(.aujourdhui) { display: none; }
  .cal-jour-semaine { display: inline; text-transform: capitalize; }
  .cal-ajout { opacity: 1; }
  .evenement { white-space: normal; font-size: .85rem; }
  .evenement .masque { position: static; width: auto; height: auto; clip: auto; white-space: normal; color: var(--texte-2); }
}

@media (prefers-reduced-motion: no-preference) {
  .flash { animation: apparition .2s ease-out; }
  @keyframes apparition { from { opacity: 0; transform: translateY(-4px); } }
}