/* ============================================================================
   Charte InfAuber — jaune (#F5C518) & noir. Style public + admin + login.
   Volontairement sans framework (un seul fichier, facile à maintenir sur le Pi).
   ========================================================================== */

:root {
    --jaune: #f5c518;
    --jaune-fonce: #e0ab00;     /* survols, "Inf" sur fond clair */
    --jaune-pale: #fff7d6;      /* fonds doux, encadrés */
    --noir: #141414;
    --noir-doux: #1f1f1f;
    --gris-texte: #23272e;
    --gris-doux: #6b7280;
    --gris-bordure: #e2e2dd;
    --fond: #f7f5ef;            /* blanc cassé chaud */
    --blanc: #ffffff;
    --vert: #15803d;  --vert-clair: #dcfce7;
    --rouge: #b91c1c; --rouge-clair: #fee2e2;
    --orange: #c2410c; --orange-clair: #ffedd5;
    --violet: #6d28d9; --violet-clair: #ede9fe;
    --teal: #0f766e; --teal-clair: #ccfbf1;
    --bleu-clair: #dbeafe; --bleu-fonce: #1e3a8a;
    --ombre: 0 1px 3px rgba(20,20,20,.08), 0 1px 2px rgba(20,20,20,.04);
    --ombre-carte: 0 4px 16px rgba(20,20,20,.06);
    --rayon: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--gris-texte);
    background: var(--fond);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    line-height: 1.5;
}

/* ------------------------------------------------------------------ logo */

.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { height: 44px; width: auto; display: block; }

/* ------------------------------------------------------------- en-têtes */

.entete {
    background: #000;   /* noir pur : se fond avec le fond du logo SVG */
    padding: .85rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--jaune);
}
.entete-baseline { color: #c9c9c4; font-size: .85rem; margin-left: auto; }

.entete-admin { gap: 1rem; }
.badge-admin {
    background: var(--jaune); color: var(--noir);
    font-weight: 800; font-size: .7rem; text-transform: uppercase;
    padding: .15rem .5rem; border-radius: 5px; letter-spacing: .5px;
}
.nav-admin { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav-admin a { color: #d6d6d2; text-decoration: none; font-size: .92rem; font-weight: 500; }
.nav-admin a:hover { color: var(--jaune); }
.nav-deconnexion { color: #9b9b96 !important; }

/* ------------------------------------------------------------- structure */

.contenu { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: 2rem 1.5rem; }
.contenu-large { max-width: 1200px; }
.contenu-login { max-width: 420px; padding-top: 4rem; }

.carte {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    padding: 1.6rem 1.9rem;
    box-shadow: var(--ombre-carte);
    margin-bottom: 1.5rem;
}
.carte h1, .carte h2 { color: var(--noir); }
.carte h1 { margin-top: 0; }
.carte h2 { font-size: 1.15rem; margin-top: 1.6rem; }
.carte h2:first-child { margin-top: 0; }

.colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .colonnes { grid-template-columns: 1fr; } }

.pied {
    text-align: center; color: var(--gris-doux); font-size: .85rem;
    padding: 1.4rem; background: var(--noir); color: #c9c9c4;
}
.pied strong { color: var(--jaune); }

.sous-titre { color: var(--gris-doux); }
.mention { color: var(--gris-doux); font-size: .85rem; }
.vide { color: var(--gris-doux); font-style: italic; }
a { color: var(--jaune-fonce); }
code { background: var(--jaune-pale); padding: .1rem .35rem; border-radius: 4px; font-size: .95em; }

/* ----------------------------------------------------------- hero public */

.hero {
    background: linear-gradient(135deg, var(--noir) 0%, var(--noir-doux) 100%);
    border-radius: var(--rayon);
    padding: 2rem 2rem 1.7rem;
    color: var(--blanc);
    margin-bottom: 1.5rem;
    border-left: 5px solid var(--jaune);
}
.hero h1 { margin: 0 0 .5rem; color: var(--blanc); font-size: 1.7rem; }
.hero h1 .accent { color: var(--jaune); }
.hero p { margin: 0; color: #d6d6d2; }
.atouts { display: flex; gap: 1.3rem; flex-wrap: wrap; margin-top: 1.1rem; }
.atout { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: #f0f0ec; font-weight: 500; }
.atout .puce { color: var(--jaune); font-weight: 800; }

/* ------------------------------------------------------------- formulaires */

.formulaire label { display: block; margin-bottom: .9rem; font-weight: 600; font-size: .95rem; }
.formulaire label.case { font-weight: 400; }

.formulaire input[type="text"], .formulaire input[type="tel"], .formulaire input[type="email"],
.formulaire input[type="url"], .formulaire input[type="number"], .formulaire input[type="password"],
.formulaire input[type="datetime-local"], .formulaire select, .formulaire textarea {
    display: block; width: 100%; margin-top: .3rem; padding: .6rem .75rem;
    border: 1px solid var(--gris-bordure); border-radius: 9px; font: inherit; font-weight: 400;
    background: var(--blanc); transition: border-color .15s, box-shadow .15s;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
    outline: none; border-color: var(--jaune); box-shadow: 0 0 0 3px rgba(245,197,24,.25);
}
.formulaire textarea { resize: vertical; }
.formulaire fieldset {
    border: 1px solid var(--gris-bordure); border-radius: 11px; padding: 1.1rem 1.3rem; margin: 0 0 1.2rem;
}
.formulaire legend { font-weight: 800; color: var(--noir); padding: 0 .4rem; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 700px) { .grille-2 { grid-template-columns: 1fr; } }

.question-radio { font-weight: 600; font-size: .95rem; }
.radios { display: flex; gap: 1.4rem; margin: .4rem 0 .9rem; }
.radios label { font-weight: 400; display: flex; align-items: center; gap: .35rem; margin: 0; }
.radios-colonne { flex-direction: column; gap: .55rem; }
.radios-colonne label {
    border: 1px solid var(--gris-bordure); border-radius: 9px; padding: .6rem .8rem; cursor: pointer;
}
.radios-colonne label:hover { border-color: var(--jaune); background: var(--jaune-pale); }

.hp { position: absolute; left: -9999px; top: -9999px; }

/* --------------------------------------------------------------- boutons */

.btn {
    display: inline-block; padding: .6rem 1.25rem; border: 2px solid var(--noir);
    border-radius: 9px; background: var(--blanc); color: var(--noir); font: inherit;
    font-weight: 700; text-decoration: none; cursor: pointer; transition: all .15s;
}
.btn:hover { background: #f0f0ec; }
.btn-principal { background: var(--jaune); border-color: var(--jaune); color: var(--noir); }
.btn-principal:hover { background: var(--jaune-fonce); border-color: var(--jaune-fonce); }
.btn-secondaire { border-color: var(--gris-bordure); color: var(--gris-texte); font-weight: 600; }
.btn-danger { border-color: var(--rouge); color: var(--rouge); }
.btn-danger:hover { background: var(--rouge-clair); }
.btn-petit { padding: .28rem .65rem; font-size: .85rem; border-width: 1.5px; }
.btn-bloc { display: block; width: 100%; text-align: center; font-size: 1.05rem; padding: .8rem; }

/* --------------------------------------------------------------- alertes */

.alerte { border-radius: 10px; padding: .9rem 1.2rem; margin-bottom: 1.2rem; }
.alerte ul { margin: 0; padding-left: 1.2rem; }
.alerte-erreur { background: var(--rouge-clair); color: var(--rouge); }
.alerte-succes { background: var(--vert-clair); color: var(--vert); }
.alerte-info { background: var(--jaune-pale); color: #7a5c00; border: 1px solid var(--jaune); }

/* -------------------------------------------------------------- tableaux */

table.liste { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.liste th {
    text-align: left; color: var(--gris-doux); font-weight: 700; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .3px; padding: .5rem .6rem;
    border-bottom: 2px solid var(--gris-bordure);
}
table.liste td { padding: .58rem .6rem; border-bottom: 1px solid #eceae3; vertical-align: middle; }
table.liste tbody tr:hover { background: var(--jaune-pale); }
table.liste tr.inactif td { opacity: .45; }
td.actions { white-space: nowrap; }
td.tronque { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grille-table input[type="text"] {
    width: 5em; padding: .3rem .4rem; border: 1px solid var(--gris-bordure); border-radius: 6px; font: inherit;
}
.grille-table select { padding: .3rem .4rem; border-radius: 6px; border: 1px solid var(--gris-bordure); }
.carte-categorie h2 { font-size: 1.05rem; }
.info { cursor: help; color: var(--gris-doux); margin-left: .3rem; }

/* ---------------------------------------------------------------- badges */

.badge {
    display: inline-block; padding: .2rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.badge-nouvelle_demande { background: var(--jaune-pale); color: #7a5c00; }
.badge-devis_envoye { background: var(--violet-clair); color: var(--violet); }
.badge-confirmee { background: var(--teal-clair); color: var(--teal); }
.badge-en_cours { background: var(--orange-clair); color: var(--orange); }
.badge-terminee { background: var(--vert-clair); color: var(--vert); }
.badge-facturee { background: #e5e7eb; color: var(--gris-texte); }
.badge-refusee { background: var(--rouge-clair); color: var(--rouge); }
.badge-annulee { background: var(--rouge-clair); color: var(--rouge); }

/* ------------------------------------------------------------ filtres */

.filtres { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.filtres input, .filtres select {
    padding: .5rem .7rem; border: 1px solid var(--gris-bordure); border-radius: 9px; font: inherit;
}
.filtres input[name="q"] { min-width: 280px; }

/* ----------------------------------------------------- fiches & suivi */

dl.fiche { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; }
dl.fiche dt { color: var(--gris-doux); font-weight: 600; }
dl.fiche dd { margin: 0; white-space: pre-line; }

.liste-services { padding-left: 1.2rem; }
.estimation-totale { font-size: 1.2rem; }
.estimation-totale strong { color: var(--noir); }

.trace {
    background: var(--jaune-pale); border: 1px dashed var(--jaune); border-radius: 10px;
    padding: .9rem 1.2rem; font-size: .9rem;
}
.trace ul { margin: .4rem 0; padding-left: 1.2rem; }
.trace-detail { color: #7a5c00; margin: .25rem 0; }

.bloc-rdv { border: 1px solid var(--gris-bordure); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .9rem; }
.bloc-rdv-date { margin: 0 0 .6rem; font-size: 1.05rem; }
.reponse-rdv {
    background: var(--jaune-pale); border-radius: 10px; padding: .9rem 1.2rem;
    display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
}
.reponse-rdv p { margin: 0; font-weight: 600; }
.reponse-rdv form { margin: 0; }
.statut-rdv { font-weight: 600; }
.form-en-ligne { margin-top: .8rem; }

.actions-rapides { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.actions-rapides form { margin: 0; }
.zone-danger { border-color: var(--rouge); }
.zone-danger h2 { color: var(--rouge); }

/* --------------------------------------------------------- indicateurs */

.indicateurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 700px) { .indicateurs { grid-template-columns: repeat(2, 1fr); } }
.indicateur {
    background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: 12px;
    padding: 1.1rem; text-align: center; box-shadow: var(--ombre); border-top: 3px solid var(--jaune);
}
.indicateur .valeur { display: block; font-size: 1.6rem; font-weight: 800; color: var(--noir); }
.indicateur .legende { color: var(--gris-doux); font-size: .85rem; }

/* ------------------------------------------------------------- login */

.login-logo-img { display: block; max-width: 240px; margin: 0 auto 1.2rem; }


/* --------------------------------------------------------- cases à cocher (disponibilités) */

.choix-cases {
    display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem;
}
.choix-case {
    display: flex; align-items: center; gap: .4rem;
    background: var(--gris-fond); border: 2px solid var(--gris-bordure);
    border-radius: 8px; padding: .55rem 1rem; cursor: pointer;
    font-size: .9rem; line-height: 1.3; text-align: center;
    transition: border-color .12s, background .12s;
}
.choix-case input[type="checkbox"] { display: none; }
.choix-case:has(input:checked) {
    border-color: var(--jaune); background: var(--jaune-pale); font-weight: 600;
}
.choix-case small { display: block; font-weight: 400; color: var(--gris-doux); font-size: .78rem; }