/* Atelier documents ACD — couleurs de la charte 2026 (azur, acier, rose).
   Polices web : Roboto Condensed et Roboto uniquement (Monte Stella n'est jamais servie). */
:root {
  --azur: #07548E; --acier: #779CC1; --rose: #BCA0B2;
  --ciel: #E3EBF3; --poudre: #EEE6EC; --filet: #C3D3E3; --gris: #57799B;
  --fond: #F5F8FB; --carte: #FFFFFF; --encre: #0B3A5F;
  --vert: #2E7D4F; --orange: #B5651D; --rouge: #A3313A;
  --rayon: 10px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif; font-size: 16px; line-height: 1.4; color: var(--encre); background: var(--fond); }
a { color: var(--azur); }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { font-weight: 700; color: var(--azur); margin: 0 0 .5em; line-height: 1.15; }
h1 { font-size: 1.7rem; text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
.intro { font-family: Roboto, Arial, sans-serif; font-weight: 300; color: var(--gris); font-size: 1.05rem; margin: 0 0 1.2em; max-width: 60em; }

/* Barre du haut */
.barre { background: var(--azur); color: #fff; display: flex; align-items: center; gap: 24px; padding: 10px 24px; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; }
.marque img { height: 34px; }
.marque span { border-left: 1px solid rgba(255,255,255,.35); padding-left: 14px; }
nav { display: flex; gap: 6px; flex-wrap: wrap; }
nav a { color: #fff; text-decoration: none; padding: 7px 12px; border-radius: 999px; font-weight: 600; }
nav a.actif { background: rgba(255,255,255,.16); }
nav a b { background: var(--rose); color: var(--azur); border-radius: 999px; padding: 0 7px; font-size: .8em; margin-left: 4px; }
nav a b:empty { display: none; }
.bouton-nav { background: var(--rose); color: var(--azur) !important; }
.qui { margin-left: auto; font-size: .9rem; opacity: .9; display: flex; gap: 10px; align-items: center; }
.qui button { background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.etat-agent { font-size: .85rem; padding: 6px 24px; background: var(--ciel); color: var(--gris); }
.etat-agent.hors { background: #FBEDE3; color: var(--orange); }

.vue { max-width: 1240px; margin: 0 auto; padding: 24px 16px 48px; }
.attente { color: var(--gris); }
.pied { text-align: center; font-size: .78rem; color: var(--gris); padding: 18px 16px 28px; }

/* Formulaires */
.carte { background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 18px 20px; margin-bottom: 16px; }
.connexion { max-width: 440px; margin: 40px auto; }
label { display: block; font-weight: 600; margin: 12px 0 4px; color: var(--azur); }
label small { font-weight: 400; color: var(--gris); }
input[type=text], input[type=email], input[type=password], select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--filet); border-radius: 8px; background: #fff; color: var(--encre); }
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acier); outline-offset: 1px; }
.bouton { display: inline-flex; align-items: center; gap: 6px; background: var(--azur); color: #fff; border: none; border-radius: 999px; padding: 9px 18px; font-weight: 700; cursor: pointer; text-decoration: none; }
.bouton:disabled { opacity: .5; cursor: wait; }
.bouton.secondaire { background: #fff; color: var(--azur); border: 1px solid var(--azur); }
.bouton.vert { background: var(--vert); }
.bouton.rouge { background: #fff; color: var(--rouge); border: 1px solid var(--rouge); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.erreur { color: var(--rouge); font-weight: 600; margin-top: 10px; }
.choix-type { display: flex; gap: 10px; flex-wrap: wrap; }
.choix-type label { flex: 1 1 220px; margin: 0; border: 1px solid var(--filet); border-radius: var(--rayon); padding: 12px 14px; cursor: pointer; background: #fff; font-weight: 400; color: var(--encre); }
.choix-type label b { display: block; color: var(--azur); }
.choix-type input { margin-right: 8px; }
.choix-type label:has(input:checked) { border-color: var(--azur); box-shadow: 0 0 0 2px var(--azur) inset; }

/* Outils de liste */
.outils { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.outils input[type=search] { flex: 1 1 260px; padding: 9px 12px; border: 1px solid var(--filet); border-radius: 999px; }
.filtres button { border: 1px solid var(--filet); background: #fff; color: var(--azur); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.filtres button.actif { background: var(--azur); color: #fff; border-color: var(--azur); }

/* Grille des documents */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.doc { background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow .15s; }
.doc:hover { box-shadow: 0 4px 16px rgba(7,84,142,.15); }
.doc .vignette { aspect-ratio: 4 / 3; background: var(--ciel); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--filet); }
.doc .vignette img { max-width: 100%; max-height: 100%; object-fit: contain; }
.doc .infos { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.doc .titre { font-weight: 700; color: var(--azur); line-height: 1.2; }
.doc .meta { font-size: .82rem; color: var(--gris); }
.pastilles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pastille { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--ciel); color: var(--azur); white-space: nowrap; }
.pastille.public { background: #E1F1E7; color: var(--vert); }
.pastille.interne { background: var(--poudre); color: #7A5A6E; }
.pastille.attente { background: #FBEDE3; color: var(--orange); }

/* Fiche d'un document */
.fiche { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.fiche .apercu { background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); padding: 10px; }
.fiche .apercu img { width: 100%; display: block; border-radius: 4px; }
.versions { list-style: none; padding: 0; margin: 0; }
.versions li { border-top: 1px solid var(--filet); padding: 10px 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.versions li:first-child { border-top: none; }
.versions .num { font-weight: 700; color: var(--azur); min-width: 3.2em; }
.versions .quand { color: var(--gris); font-size: .9rem; min-width: 9em; }
.versions .res { flex: 1 1 280px; font-size: .92rem; }
.fichiers a { margin-right: 10px; white-space: nowrap; }

/* Demandes */
.liste-demandes { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.liste-demandes li a { display: grid; grid-template-columns: 4em minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; border-top: 1px solid var(--filet); align-items: center; }
.liste-demandes li:first-child a { border-top: none; }
.liste-demandes li a:hover { background: var(--fond); }
.liste-demandes .num { color: var(--gris); font-weight: 700; }
.liste-demandes .t { font-weight: 700; color: var(--azur); }
.liste-demandes .s { font-size: .85rem; color: var(--gris); }
.statut { font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.st-nouvelle, .st-correction { background: var(--ciel); color: var(--azur); }
.st-en_cours { background: #E8EEF9; color: #2F5AA8; }
.st-proposition, .st-question { background: #FBEDE3; color: var(--orange); }
.st-validee { background: #E1F1E7; color: var(--vert); }
.st-appliquee { background: var(--vert); color: #fff; }
.st-refusee, .st-annulee { background: #EEE; color: #777; }
.st-erreur { background: #F8E1E3; color: var(--rouge); }

.fil { list-style: none; padding: 0; margin: 0; }
.fil li { border-left: 3px solid var(--filet); padding: 6px 0 10px 14px; margin-bottom: 6px; }
.fil li.e-acd { border-color: var(--acier); }
.fil li.responsable { border-color: var(--rose); }
.fil .auteur { font-weight: 700; color: var(--azur); }
.fil .quand { color: var(--gris); font-size: .82rem; margin-left: 8px; }
.fil .texte { white-space: pre-wrap; margin-top: 2px; }
.propositions { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.proposition { border: 1px solid var(--filet); border-radius: var(--rayon); padding: 10px; background: #fff; }
.proposition img { width: 100%; border-radius: 4px; border: 1px solid var(--filet); }
.proposition.ecartee { opacity: .5; }
.texte-demande { white-space: pre-wrap; }
.encadre { background: #FBEDE3; border-left: 4px solid var(--orange); padding: 10px 14px; border-radius: 6px; margin: 12px 0; }
.encadre.vert { background: #E1F1E7; border-color: var(--vert); }

@media (max-width: 760px) {
  .barre { padding: 10px 16px; gap: 10px; }
  .qui { margin-left: 0; width: 100%; }
  .fiche { grid-template-columns: 1fr; }
  .liste-demandes li a { grid-template-columns: 3em minmax(0, 1fr); }
  .liste-demandes .statut { grid-column: 2; justify-self: start; }
  h1 { font-size: 1.35rem; }
}