/* ASL du château de Mercy — feuille de style unique (aucun style en ligne dans les pages). */

:root {
  --fond: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #f0eee8;
  --bord: #dcd8cd;
  --bord-fort: #b9b3a3;
  --texte: #1f2428;
  --texte-2: #5a6168;
  --marque: #1d4e5f;
  --marque-fonce: #143845;
  --marque-clair: #e3eef1;
  --ok: #1e6b43;
  --ok-fond: #e2f2e8;
  --attention: #8a5a00;
  --attention-fond: #fbf0d3;
  --danger: #a32222;
  --danger-fond: #fbe4e2;
  --info: #1d4e8f;
  --info-fond: #e2ecf9;
  --gris-fond: #e9e9e6;
  --rayon: 8px;
  --ombre: 0 1px 2px rgba(20, 30, 40, 0.06), 0 2px 8px rgba(20, 30, 40, 0.04);
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #15191c;
    --surface: #1d2226;
    --surface-2: #252b30;
    --bord: #343c43;
    --bord-fort: #4b555e;
    --texte: #e8eaec;
    --texte-2: #a3acb4;
    --marque: #7fc0d4;
    --marque-fonce: #a6d6e4;
    --marque-clair: #1f3540;
    --ok: #7fd3a2;
    --ok-fond: #17322a;
    --attention: #f0c36a;
    --attention-fond: #3a2f14;
    --danger: #ff9d94;
    --danger-fond: #3d1e1c;
    --info: #9cc3f5;
    --info-fond: #1b2c44;
    --gris-fond: #2c3237;
    --ombre: none;
  }
}

* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--police); color: var(--texte); background: var(--fond); line-height: 1.5; }
a { color: var(--marque); }
a:hover { color: var(--marque-fonce); }
h1 { font-size: 1.55rem; line-height: 1.25; margin: 0; font-weight: 650; }
h2 { font-size: 1.1rem; margin: 0; font-weight: 650; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; font-weight: 650; }
p { margin: .5rem 0; }
:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; border-radius: 3px; }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 8px; top: 8px; background: var(--surface); padding: .5rem 1rem; z-index: 100; }

.bandeau-demo { background: #7a3d00; color: #fff; text-align: center; padding: .35rem 1rem; font-weight: 650; font-size: .9rem; letter-spacing: .01em; }

/* ---------- En-tête et menu ---------- */
.entete { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: var(--marque-fonce); color: #fff; position: sticky; top: 0; z-index: 20; }
@media (prefers-color-scheme: dark) { .entete { background: #0f2a35; } }
.entete a, .entete .lien { color: #fff; }
.marque { font-weight: 700; text-decoration: none; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-droite { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: .92rem; }
.entete-droite a { text-decoration: none; }
.entete-droite a:hover { text-decoration: underline; }
.pastille { display: inline-block; min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: #e9b44c; color: #1f2428; font-weight: 700; font-size: .78rem; text-align: center; }
.bouton-menu { display: none; background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 6px; font-size: 1.1rem; padding: .15rem .55rem; cursor: pointer; }
.lien { background: none; border: 0; padding: 0; font: inherit; color: var(--marque); cursor: pointer; text-decoration: underline; }
.entete .lien { text-decoration: none; }
.entete .lien:hover { text-decoration: underline; }

.cadre { display: flex; align-items: flex-start; min-height: calc(100vh - 3rem); }
.menu { width: 16.5rem; flex: none; padding: 1rem .75rem 2rem; border-right: 1px solid var(--bord); background: var(--surface); align-self: stretch; }
.menu ul { list-style: none; margin: 0 0 .5rem; padding: 0; }
.menu a { display: block; padding: .42rem .7rem; border-radius: 6px; color: var(--texte); text-decoration: none; font-size: .95rem; }
.menu a:hover { background: var(--surface-2); }
.menu a.actif { background: var(--marque-clair); color: var(--marque-fonce); font-weight: 650; }
.menu-groupe { margin: 1rem .7rem .25rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-2); font-weight: 650; }
.contenu { flex: 1; min-width: 0; padding: 1.25rem 1.5rem 3rem; max-width: 82rem; }

@media (max-width: 900px) {
  .bouton-menu { display: inline-block; }
  .menu { display: none; position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: min(19rem, 86vw); overflow-y: auto; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); padding-top: 3.5rem; }
  .menu.ouvert { display: block; }
  .contenu { padding: 1rem .9rem 3rem; }
  .entete-droite .compte { display: none; }
  .entete-droite { gap: .7rem; font-size: .86rem; white-space: nowrap; }
  .marque { max-width: 38vw; }
  .tableau td:first-child { min-width: 11rem; }
}


.fil { font-size: .88rem; color: var(--texte-2); margin-bottom: .5rem; }
.fil a { color: var(--texte-2); }
.titre-page { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin: .25rem 0 1.1rem; }
.sous-titre { color: var(--texte-2); margin: .2rem 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ---------- Boutons ---------- */
.bouton { display: inline-block; font: inherit; font-size: .93rem; font-weight: 600; padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte); cursor: pointer; text-decoration: none; line-height: 1.3; }
.bouton:hover { background: var(--surface-2); color: var(--texte); }
.bouton-principal { background: var(--marque); border-color: var(--marque); color: #fff; }
.bouton-principal:hover { background: var(--marque-fonce); border-color: var(--marque-fonce); color: #fff; }
@media (prefers-color-scheme: dark) { .bouton-principal, .bouton-principal:hover { color: #0f1a1f; } }
.bouton-discret { border-color: transparent; background: transparent; color: var(--marque); }
.bouton-danger { border-color: var(--danger); color: var(--danger); background: var(--surface); }
.bouton-danger:hover { background: var(--danger-fond); color: var(--danger); }
form.en-ligne { display: inline; margin: 0; }

/* ---------- Cartes, alertes, badges ---------- */
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--ombre); }
.carte-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: start; }
.grille > .carte { margin-bottom: 0; }
.grille { margin-bottom: 1rem; }
.deux-colonnes { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1100px) { .deux-colonnes { grid-template-columns: 1fr; } }

.alerte { border-radius: var(--rayon); padding: .7rem .95rem; margin: 0 0 1rem; border: 1px solid; }
.alerte-ok { background: var(--ok-fond); border-color: var(--ok); color: var(--ok); }
.alerte-erreur { background: var(--danger-fond); border-color: var(--danger); color: var(--danger); }
.alerte-info { background: var(--info-fond); border-color: var(--info); color: var(--info); }
.alerte-attention { background: var(--attention-fond); border-color: var(--attention); color: var(--attention); }
.alerte ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.badge { display: inline-block; padding: .08rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 650; white-space: nowrap; border: 1px solid transparent; background: var(--surface-2); color: var(--texte); }
.badge-info { background: var(--info-fond); color: var(--info); }
.badge-ok { background: var(--ok-fond); color: var(--ok); }
.badge-attention { background: var(--attention-fond); color: var(--attention); }
.badge-danger { background: var(--danger-fond); color: var(--danger); }
.badge-gris { background: var(--gris-fond); color: var(--texte-2); }

.discret, .vide, .aide { color: var(--texte-2); }
.aide { font-size: .86rem; margin: .25rem 0 0; }
.vide-liste { color: var(--texte-2); font-style: italic; margin: .4rem 0; }
.important { font-weight: 650; }
.negatif { color: var(--danger); }
.montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
.texte-libre { white-space: pre-wrap; overflow-wrap: anywhere; }
.droite { text-align: right; }
.centre { text-align: center; }
.espace-haut { margin-top: 1rem; }
.retard { color: var(--danger); font-weight: 650; }

/* ---------- Tableaux ---------- */
.tableau-defilant { overflow-x: auto; margin: 0 -.2rem; }
.tableau { border-collapse: collapse; width: 100%; font-size: .93rem; }
.tableau caption { text-align: left; color: var(--texte-2); font-size: .86rem; padding-bottom: .3rem; }
.tableau th, .tableau td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
.tableau th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2); font-weight: 650; white-space: nowrap; background: var(--surface); }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau tfoot td { font-weight: 700; border-top: 2px solid var(--bord-fort); border-bottom: 0; }
.tableau-compact th, .tableau-compact td { padding: .3rem .5rem; }
.recap-fournisseurs td:first-child { min-width: 11rem; }
.tableau .ecart { background: var(--attention-fond); }
.tableau .absent { background: var(--danger-fond); color: var(--danger); }

/* ---------- Fiches ---------- */
.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .65rem 1.25rem; margin: 0; }
.fiche dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2); font-weight: 650; }
.fiche dd { margin: .1rem 0 0; overflow-wrap: anywhere; }

/* ---------- Formulaires ---------- */
.formulaire { max-width: 62rem; }
.champ { margin-bottom: .9rem; min-width: 0; }
.champ label, .champ legend { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; padding: 0; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="password"], .champ input[type="date"], .champ input[type="url"], .champ input[type="tel"], .champ input[type="file"], .champ select, .champ textarea,
.filtres input, .filtres select, .lignes input, .lignes select {
  width: 100%; font: inherit; font-size: .95rem; padding: .45rem .6rem; border: 1px solid var(--bord-fort); border-radius: 6px; background: var(--surface); color: var(--texte);
}
.champ textarea { resize: vertical; min-height: 4.5rem; }
.champ-court { max-width: 12rem; }
.champ-moyen { max-width: 24rem; }
.champ.en-erreur input, .champ.en-erreur select, .champ.en-erreur textarea { border-color: var(--danger); border-width: 2px; }
.erreur-champ { color: var(--danger); font-size: .86rem; font-weight: 600; margin: .25rem 0 0; }
.requis { color: var(--danger); }
.champ-coche label, .cases label { font-weight: 400; display: flex; gap: .5rem; align-items: baseline; margin-bottom: .2rem; }
fieldset.champ { border: 1px solid var(--bord); border-radius: 6px; padding: .5rem .8rem .6rem; }
fieldset.champ legend { padding: 0 .3rem; }
.avec-unite { display: flex; align-items: center; gap: .4rem; }
.unite { color: var(--texte-2); }
.rangee { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.formulaire-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.filtres { display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: flex-end; margin-bottom: 1rem; padding: .7rem .8rem; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); }
.filtres .champ { margin: 0; min-width: 10rem; flex: 1 1 10rem; max-width: 18rem; }
.filtres-actions { display: flex; gap: .4rem; }
/* Filtres repliables : bouton « Filtres », panneau ouvert à la demande */
.barre-filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin-bottom: 1rem; }
.panneau-filtres { flex: 1 1 100%; }
.panneau-filtres > summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.panneau-filtres > summary::-webkit-details-marker { display: none; }
.panneau-filtres > summary::after { content: "▾"; font-size: .8em; }
.panneau-filtres[open] > summary::after { content: "▴"; }
.panneau-filtres > .filtres { margin: .6rem 0 0; }
.barre-filtres:has(.panneau-filtres:not([open])) .panneau-filtres { flex: 0 0 auto; }
.repli { margin-top: .8rem; border-top: 1px solid var(--bord); padding-top: .6rem; }
.repli > summary { cursor: pointer; font-weight: 650; color: var(--marque); margin-bottom: .6rem; }

/* Lignes de devis / commande */
.lignes { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.lignes th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2); text-align: left; padding: .2rem .3rem; }
.lignes td { padding: .2rem .3rem; vertical-align: top; }
.lignes .col-designation { min-width: 14rem; }
.lignes .col-court { width: 6.5rem; }

/* ---------- Onglets ---------- */
.onglets { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 1px solid var(--bord); margin-bottom: 1rem; }
.onglets a { padding: .5rem .85rem; text-decoration: none; color: var(--texte-2); border-bottom: 3px solid transparent; font-weight: 600; font-size: .94rem; margin-bottom: -1px; }
.onglets a:hover { color: var(--texte); }
.onglets a.actif { color: var(--marque-fonce); border-bottom-color: var(--marque); }
.compteur { font-size: .78rem; background: var(--surface-2); border-radius: 999px; padding: 0 .45rem; font-weight: 650; }

/* ---------- Indicateurs (tableau de bord) ---------- */
.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.indicateur { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .85rem; background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--bord-fort); border-radius: var(--rayon); text-decoration: none; color: var(--texte); box-shadow: var(--ombre); }
a.indicateur:hover { background: var(--surface-2); color: var(--texte); }
.indicateur-libelle { font-size: .8rem; color: var(--texte-2); font-weight: 600; }
.indicateur-valeur { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.indicateur-detail { font-size: .82rem; color: var(--texte-2); }
.indicateur-ok { border-left-color: var(--ok); }
.indicateur-attention { border-left-color: var(--attention); }
.indicateur-danger { border-left-color: var(--danger); }
.indicateur-info { border-left-color: var(--info); }
progress { width: 100%; height: .55rem; accent-color: var(--marque); }

/* ---------- Vue par statut (tâches) ---------- */
.colonnes { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
.colonne { flex: 0 0 17rem; background: var(--surface-2); border-radius: var(--rayon); padding: .6rem; border: 1px solid var(--bord); }
.colonne h2 { font-size: .9rem; display: flex; justify-content: space-between; margin-bottom: .5rem; }
.tuile { display: block; background: var(--surface); border: 1px solid var(--bord); border-radius: 6px; padding: .5rem .6rem; margin-bottom: .5rem; text-decoration: none; color: var(--texte); box-shadow: var(--ombre); }
.tuile:hover { border-color: var(--marque); color: var(--texte); }
.tuile-titre { font-weight: 600; font-size: .92rem; display: block; }
.tuile-meta { font-size: .8rem; color: var(--texte-2); display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .25rem; align-items: center; }

/* ---------- Historique ---------- */
.historique { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.historique li { padding: .35rem 0; border-bottom: 1px solid var(--bord); }
.historique li:last-child { border-bottom: 0; }
.historique-date { color: var(--texte-2); font-variant-numeric: tabular-nums; }
.historique-auteur { font-weight: 650; }
.note { border-left: 3px solid var(--bord-fort); padding: .1rem 0 .1rem .7rem; margin: 0 0 .7rem; }
.note-entete { font-size: .84rem; color: var(--texte-2); }

/* ---------- Pages publiques ---------- */
body.public { display: flex; flex-direction: column; min-height: 100vh; }
.boite-publique { width: min(28rem, 92vw); margin: 8vh auto 2rem; background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 1.6rem 1.6rem 1.4rem; box-shadow: var(--ombre); }
.marque-publique { font-weight: 700; color: var(--marque-fonce); margin: 0 0 .6rem; letter-spacing: .01em; }
.boite-publique h1 { margin-bottom: 1rem; font-size: 1.3rem; }
.boite-publique .bouton-principal { width: 100%; }
.liste-etat { list-style: none; padding: 0; margin: 0 0 1rem; }
.liste-etat li { padding: .45rem 0; border-bottom: 1px solid var(--bord); }
.liste-etat li:last-child { border-bottom: 0; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; background: var(--surface-2); border: 1px solid var(--bord); border-radius: 6px; padding: .5rem .6rem; overflow-wrap: anywhere; user-select: all; display: block; }

@media print {
  .entete, .menu, .actions, .filtres, .formulaire-actions, .bandeau-demo, .repli, .bouton { display: none !important; }
  body { background: #fff; }
  .contenu { max-width: none; padding: 0; }
  .carte { box-shadow: none; break-inside: avoid; }
}

/* Bouton de fermeture du menu : uniquement sur petit écran (règles placées en fin de fichier pour primer sur .bouton) */
.menu .menu-fermer { display: none; }
@media (max-width: 900px) {
  .menu .menu-fermer { display: block; position: absolute; top: .7rem; right: .7rem; }
}
/* Cases à cocher : jamais étirées */
.filtres input[type="checkbox"], .champ input[type="checkbox"], .lignes input[type="checkbox"] { width: auto; flex: none; }
.filtres .champ-coche { align-self: center; }