/* ==========================================================
   DARCOS — Administration
   ========================================================== */

:root {
    --encre:   #14110F;
    --panneau: #1C1815;
    --fond:    #F4F2EE;
    --carte:   #FFFFFF;
    --signal:  #E0511C;
    --acier:   #6B6560;
    --ligne:   #E0DBD3;
    --vert:    #2F6B4F;
    --rouge:   #A32C1E;
    --ambre:   #B87309;
    --bleu:    #2C5A8A;
    --display: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", system-ui, sans-serif;
    --texte: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --rayon: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--texte);
    font-size: 15px;
    line-height: 1.55;
    color: var(--encre);
    background: var(--fond);
}
a { color: var(--bleu); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ---------- Structure ---------- */
.appli { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.lateral {
    background: var(--panneau);
    color: #C8C2BB;
    padding: 1.2rem 0;
    display: flex;
    flex-direction: column;
}
.lateral__logo {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    text-decoration: none;
    padding: 0 1.2rem 1.2rem;
    display: block;
}
.lateral__logo span { color: var(--signal); }
.lateral__groupe { padding: 0.9rem 1.2rem 0.3rem; }
.lateral__groupe span {
    font-family: var(--mono);
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6E665F;
}
.lateral a.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 1.2rem;
    color: #C8C2BB;
    text-decoration: none;
    font-size: 0.92rem;
    border-left: 3px solid transparent;
}
.lateral a.item:hover { background: #262019; color: #fff; }
.lateral a.item.actif { background: #262019; color: #fff; border-left-color: var(--signal); }
.lateral__pied {
    margin-top: auto;
    padding: 1rem 1.2rem 0;
    border-top: 1px solid #2C2724;
    font-size: 0.82rem;
}
.pastille {
    background: var(--signal);
    color: #fff;
    border-radius: 100px;
    padding: 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 1.3rem;
    text-align: center;
}

.principal { padding: 1.6rem clamp(1rem, 3vw, 2.2rem) 4rem; min-width: 0; }
.entete-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.entete-page h1 {
    font-family: var(--display);
    font-size: 2rem;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: -0.01em;
}
.entete-page .actions { margin-left: auto; display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- Cartes ---------- */
.carte {
    background: var(--carte);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}
.carte > h2, .carte > h3 {
    font-family: var(--display);
    text-transform: uppercase;
    font-size: 1.15rem;
    margin: 0 0 1rem;
    letter-spacing: 0.01em;
}
.grille-cartes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.indicateur {
    background: var(--carte);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    padding: 1rem 1.1rem;
    display: grid;
    gap: 0.2rem;
}
.indicateur b { font-family: var(--display); font-size: 2.2rem; line-height: 1; }
.indicateur span {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--acier);
}
.indicateur--alerte { border-left: 3px solid var(--signal); }

/* ---------- Tableaux ---------- */
.tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tableau th {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acier);
    text-align: left;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--ligne);
    white-space: nowrap;
}
.tableau td { padding: 0.65rem 0.6rem; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau tbody tr:hover { background: #FAF8F5; }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.defilement { overflow-x: auto; }

/* ---------- Étiquettes de statut ---------- */
.statut {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.statut--attente_validation { background: #FDF0DC; color: var(--ambre); }
.statut--validee,
.statut--documents_valides  { background: #E2EFE8; color: var(--vert); }
.statut--documents_attente  { background: #FDF0DC; color: var(--ambre); }
.statut--prete              { background: #E4EDF6; color: var(--bleu); }
.statut--en_cours           { background: #FBE4DA; color: var(--signal); }
.statut--terminee           { background: #ECE9E4; color: var(--acier); }
.statut--annulee,
.statut--refusee            { background: #F7E1DE; color: var(--rouge); }
.statut--disponible         { background: #E2EFE8; color: var(--vert); }
.statut--maintenance        { background: #FDF0DC; color: var(--ambre); }
.statut--hors_service       { background: #F7E1DE; color: var(--rouge); }
.statut--valide             { background: #E2EFE8; color: var(--vert); }
.statut--attente            { background: #FDF0DC; color: var(--ambre); }
.statut--refuse             { background: #F7E1DE; color: var(--rouge); }

/* ---------- Formulaires ---------- */
label { display: block; }
.libelle {
    font-family: var(--mono);
    font-size: 0.67rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--acier);
    margin-bottom: 0.3rem;
    display: block;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="password"], input[type="file"],
input[type="search"], select, textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: #fff;
    font: inherit;
    color: var(--encre);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--signal);
    outline: none;
    box-shadow: 0 0 0 3px rgba(224, 81, 28, 0.14);
}
textarea { min-height: 90px; resize: vertical; }
.champs { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.champ--large { grid-column: 1 / -1; }
.case { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.case input { width: auto; }

/* ---------- Boutons ---------- */
.bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--encre);
    border-radius: var(--rayon);
    background: var(--encre);
    color: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.bouton:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.bouton--signal { background: var(--signal); border-color: var(--signal); }
.bouton--signal:hover { background: #B83D12; border-color: #B83D12; }
.bouton--clair { background: #fff; color: var(--encre); border-color: var(--ligne); }
.bouton--clair:hover { background: var(--encre); color: #fff; border-color: var(--encre); }
.bouton--danger { background: #fff; color: var(--rouge); border-color: #E5C4BF; }
.bouton--danger:hover { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.bouton--petit { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* ---------- Messages ---------- */
.message {
    padding: 0.8rem 1rem;
    border-radius: var(--rayon);
    border-left: 3px solid;
    margin-bottom: 1rem;
    font-size: 0.92rem;
    background: #fff;
}
.message--succes { border-color: var(--vert); background: #F1F7F4; }
.message--erreur { border-color: var(--rouge); background: #FBF1EF; }

/* ---------- Filtres ---------- */
.filtres {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
}

/* ---------- Planning ---------- */
.planning { overflow-x: auto; border: 1px solid var(--ligne); border-radius: var(--rayon); background: #fff; }
.planning table { border-collapse: collapse; width: 100%; font-size: 0.78rem; }
.planning th, .planning td { border: 1px solid var(--ligne); padding: 0; }
.planning thead th {
    padding: 0.35rem 0.2rem;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--acier);
    background: #FAF8F5;
    min-width: 26px;
}
.planning thead th.weekend { background: #F0EDE8; }
.planning .vehicule {
    text-align: left;
    padding: 0.4rem 0.6rem;
    min-width: 190px;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
    border-right: 2px solid var(--ligne);
}
.planning .vehicule strong { display: block; font-family: var(--mono); font-size: 0.8rem; }
.planning .vehicule span { color: var(--acier); font-size: 0.75rem; }
.planning .jour { height: 34px; min-width: 26px; }
.planning .jour.weekend { background: #FAF8F5; }
.planning .jour a {
    display: block;
    height: 100%;
    text-decoration: none;
    background: var(--encre);
    opacity: 0.9;
}
.planning .jour a:hover { opacity: 1; }
.planning .occ-attente_validation a { background: #E0A33C; }
.planning .occ-validee a,
.planning .occ-documents_valides a { background: var(--vert); }
.planning .occ-documents_attente a { background: #D9902D; }
.planning .occ-prete a { background: var(--bleu); }
.planning .occ-en_cours a { background: var(--signal); }
.planning .occ-terminee a { background: #9C958E; }
.planning .occ-blocage { background: repeating-linear-gradient(45deg, #D8D3CB, #D8D3CB 4px, #EAE6E0 4px, #EAE6E0 8px); }
.legende { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.8rem; font-size: 0.8rem; color: var(--acier); }
.legende i { display: inline-block; width: 14px; height: 10px; margin-right: 0.35rem; vertical-align: middle; }

/* ---------- Vignettes de photos ---------- */
.vignettes { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.vignette { border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; background: #fff; }
.vignette img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.vignette figcaption { padding: 0.35rem 0.5rem; font-size: 0.75rem; color: var(--acier); }

/* ---------- Connexion ---------- */
.connexion {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--panneau);
    padding: 2rem 1rem;
}
.connexion__carte {
    background: #fff;
    border-radius: var(--rayon);
    padding: 2.2rem;
    width: 100%;
    max-width: 380px;
}
.connexion__logo {
    font-family: var(--display);
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    margin: 0 0 0.3rem;
}
.connexion__logo span { color: var(--signal); }
.connexion__sous { text-align: center; color: var(--acier); font-size: 0.85rem; margin: 0 0 1.8rem; }

/* ---------- Divers ---------- */
.pagination { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 1rem; }
.pagination a, .pagination span {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: #fff;
    text-decoration: none;
    color: var(--encre);
    font-size: 0.85rem;
}
.pagination .actif { background: var(--encre); color: #fff; border-color: var(--encre); }
.vide { text-align: center; color: var(--acier); padding: 2.5rem 1rem; }
.mono { font-family: var(--mono); font-size: 0.85rem; }
.discret { color: var(--acier); font-size: 0.85rem; }
.paires { display: grid; gap: 0.5rem; }
.paires div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--ligne); padding-bottom: 0.4rem; }
.paires dt, .paires b { color: var(--acier); font-weight: 400; font-size: 0.85rem; }

@media (max-width: 900px) {
    .appli { grid-template-columns: 1fr; }
    .lateral { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0.8rem 1rem; gap: 0.3rem; }
    .lateral__logo { padding: 0 1rem 0 0; }
    .lateral__groupe { display: none; }
    .lateral a.item { border-left: 0; padding: 0.4rem 0.7rem; border-radius: var(--rayon); }
    .lateral__pied { margin: 0 0 0 auto; border: 0; padding: 0; }
}

@media print {
    .lateral, .entete-page .actions, .sans-impression { display: none !important; }
    .appli { grid-template-columns: 1fr; }
    body { background: #fff; }
}

/* ---------- Vignette de modèle dans les listes ---------- */
.vignette-modele {
    display: block;
    width: 68px;
    height: 51px;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--fond);
    text-decoration: none;
}
.vignette-modele img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette-modele span {
    display: grid;
    place-items: center;
    height: 100%;
    font-family: var(--mono);
    font-size: 0.58rem;
    line-height: 1.3;
    text-align: center;
    color: var(--acier);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- Photo en tête de la fiche modèle ---------- */
.photo-modele {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(180px, 260px) 1fr;
    align-items: start;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--ligne);
}
.photo-modele__apercu {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--fond);
    display: grid;
    place-items: center;
}
.photo-modele__apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-modele__apercu span {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acier);
}
@media (max-width: 700px) {
    .photo-modele { grid-template-columns: 1fr; }
}

/* ---------- Pièce jointe non graphique d'un état des lieux ---------- */
.vignette__document {
    display: grid;
    place-content: center;
    gap: 0.25rem;
    aspect-ratio: 4 / 3;
    background: var(--fond);
    border-bottom: 1px solid var(--ligne);
    text-align: center;
}
.vignette__document strong {
    font-family: var(--display);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--encre);
}
.vignette__document em {
    font-style: normal;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acier);
}
.vignette__document[data-type="pdf"] strong  { color: var(--rouge); }
.vignette__document[data-type="doc"] strong,
.vignette__document[data-type="docx"] strong { color: var(--bleu); }
.vignette figcaption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }