/* ============================================================================
   Charte InfAuber — jaune (#F5C518) & noir. Style public + admin + login.
   Volontairement sans framework (un seul fichier, facile à maintenir sur le Pi).
   Refonte 2026 : design modernisé, micro-animations, mobile-first.
   ========================================================================== */

: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: #e6e4dc;
    --gris-fond: #f4f2ec;
    --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,.07), 0 1px 2px rgba(20,20,20,.04);
    --ombre-carte: 0 2px 6px rgba(20,20,20,.04), 0 12px 32px -12px rgba(20,20,20,.10);
    --ombre-haute: 0 6px 14px -4px rgba(20,20,20,.14), 0 18px 44px -16px rgba(20,20,20,.18);
    --rayon: 16px;
    --rayon-petit: 10px;
    --transition: .18s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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;
    min-height: 100dvh;
    flex-direction: column;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { letter-spacing: -.02em; line-height: 1.25; }

/* --------------------------------------------------------- animations clés */

@keyframes apparition {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes apparition-douce {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pulsation {
    0%   { box-shadow: 0 0 0 0 rgba(245,197,24,.55); }
    70%  { box-shadow: 0 0 0 12px rgba(245,197,24,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,197,24,0); }
}
@keyframes trait-monte {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
@keyframes coche-pop {
    0%   { transform: scale(.4); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
/* Bannière congés : entrée douce, reflet lent qui balaie, palmier qui ondule */
@keyframes banniere-entree {
    from { opacity: 0; transform: translateY(-10px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes banniere-reflet {
    0%       { transform: translateX(-120%) skewX(-18deg); }
    55%, 100% { transform: translateX(320%) skewX(-18deg); }
}
@keyframes palme-ondule {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(6deg); }
}
/* Halo d'ambiance du hero : dérive très lente, à peine perceptible */
@keyframes halo-derive {
    from { transform: translate(0, 0); }
    to   { transform: translate(-26px, 22px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ 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; }
@media (max-width: 640px) {
    .entete { padding: .7rem 1rem; }
    .entete-baseline { display: none; }
}

.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;
    padding: .25rem .1rem; border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.nav-admin a:hover { color: var(--jaune); }
.nav-deconnexion { color: #9b9b96 !important; }
@media (max-width: 720px) {
    .nav-admin {
        margin-left: 0; width: 100%; flex-wrap: nowrap;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; gap: 1rem; padding-bottom: .1rem;
    }
    .nav-admin::-webkit-scrollbar { display: none; }
}

/* ------------------------------------------------------------- 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; }
@media (max-width: 640px) { .contenu { padding: 1.1rem .9rem 2rem; } }

.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;
    animation: apparition .45s cubic-bezier(.22, .9, .3, 1) both;
}
.carte:nth-of-type(2) { animation-delay: .06s; }
.carte:nth-of-type(3) { animation-delay: .12s; }
.carte:nth-of-type(4) { animation-delay: .18s; }
@media (max-width: 640px) { .carte { padding: 1.15rem 1.05rem; border-radius: 14px; } }

.carte h1, .carte h2 { color: var(--noir); }
.carte h1 { margin-top: 0; }
.carte h2 { font-size: 1.12rem; 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: 960px) { .colonnes { grid-template-columns: 1fr; gap: 0; } }

.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); transition: color var(--transition); }
a:hover { color: var(--jaune); }
code { background: var(--jaune-pale); padding: .1rem .35rem; border-radius: 4px; font-size: .95em; }

:focus-visible {
    outline: 3px solid rgba(245,197,24,.6);
    outline-offset: 2px;
    border-radius: 4px;
}

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

.hero {
    position: relative;
    background:
        radial-gradient(620px 320px at 88% -10%, rgba(245,197,24,.16), transparent 62%),
        linear-gradient(135deg, var(--noir) 0%, var(--noir-doux) 100%);
    border-radius: var(--rayon);
    padding: 2.1rem 2.1rem 1.8rem;
    color: var(--blanc);
    margin-bottom: 1.5rem;
    overflow: hidden;
    animation: apparition .5s cubic-bezier(.22, .9, .3, 1) both;
}
.hero::before {
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 5px; z-index: 2;
    background: linear-gradient(180deg, var(--jaune), var(--jaune-fonce));
}
/* halo doré qui dérive très lentement — donne un peu de vie sans distraire */
.hero::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    width: 320px; height: 320px; top: -130px; right: -70px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,197,24,.16), transparent 70%);
    animation: halo-derive 13s ease-in-out infinite alternate;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { margin: 0 0 .5rem; color: var(--blanc); font-size: clamp(1.35rem, 4.5vw, 1.8rem); }
.hero h1 .accent { color: var(--jaune); }
.hero p { margin: 0; color: #d6d6d2; }
.atouts { display: flex; gap: .6rem 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.atout {
    display: flex; align-items: center; gap: .45rem;
    font-size: .87rem; color: #f0f0ec; font-weight: 500;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(245,197,24,.28);
    border-radius: 999px; padding: .3rem .8rem;
    transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.atout:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.11); border-color: rgba(245,197,24,.55);
}
.atout .puce { color: var(--jaune); font-weight: 800; }
@media (max-width: 640px) { .hero { padding: 1.5rem 1.2rem 1.3rem; } }

/* ------------------------------------------------------------- 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: .65rem .8rem;
    border: 1.5px solid var(--gris-bordure); border-radius: var(--rayon-petit);
    font: inherit; font-weight: 400;
    background: var(--blanc);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.formulaire input:hover, .formulaire select:hover, .formulaire textarea:hover {
    border-color: #cfccc2;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
    outline: none; border-color: var(--jaune); box-shadow: 0 0 0 4px rgba(245,197,24,.22);
}
.formulaire textarea { resize: vertical; }
.formulaire fieldset {
    border: 1px solid var(--gris-bordure); border-radius: 12px;
    padding: 1.1rem 1.3rem; margin: 0 0 1.2rem;
    background: #fdfcf9;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.formulaire fieldset:focus-within {
    border-color: var(--jaune); box-shadow: 0 0 0 3px rgba(245,197,24,.14);
}
.formulaire legend {
    font-weight: 800; color: var(--noir); padding: .2rem .7rem;
    background: var(--jaune-pale); border-radius: 999px; font-size: .9rem;
}

.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; flex-wrap: wrap; }
.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: 1.5px solid var(--gris-bordure); border-radius: var(--rayon-petit);
    padding: .65rem .85rem; cursor: pointer; background: var(--blanc);
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.radios-colonne label:hover { border-color: var(--jaune); background: var(--jaune-pale); }
.radios-colonne label:has(input:checked) {
    border-color: var(--jaune); background: var(--jaune-pale); font-weight: 600;
}

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

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

.btn {
    display: inline-block; padding: .6rem 1.25rem; border: 2px solid var(--noir);
    border-radius: var(--rayon-petit); background: var(--blanc); color: var(--noir); font: inherit;
    font-weight: 700; text-decoration: none; cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                transform var(--transition), box-shadow var(--transition);
    touch-action: manipulation;
}
.btn:hover { background: #f0f0ec; transform: translateY(-1px); box-shadow: var(--ombre); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn-principal {
    background: var(--jaune); border-color: var(--jaune); color: var(--noir);
    box-shadow: 0 2px 10px -2px rgba(245,197,24,.5);
    position: relative; overflow: hidden;
}
.btn-principal:hover {
    background: var(--jaune-fonce); border-color: var(--jaune-fonce);
    box-shadow: 0 4px 16px -3px rgba(245,197,24,.6);
}
/* reflet qui traverse le bouton au survol */
.btn-principal::after {
    content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.btn-principal:hover::after { left: 135%; }
.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: .85rem; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

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

.alerte {
    border-radius: 12px; padding: .9rem 1.2rem; margin-bottom: 1.2rem;
    animation: apparition .35s ease both;
}
.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); }

/* --------------------------------------------------------- bannière congés */

.banniere-conges {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: .85rem;
    background:
        linear-gradient(120deg, var(--jaune-pale) 0%, #fffdf2 55%, var(--jaune-pale) 100%);
    border: 1px solid var(--jaune);
    border-left: 5px solid var(--jaune); border-radius: 12px;
    padding: .9rem 1.2rem; margin-bottom: 1.2rem; color: #7a5c00;
    box-shadow: 0 2px 14px -6px rgba(245,197,24,.5);
    animation: banniere-entree .55s cubic-bezier(.22, .9, .3, 1) both;
}
/* reflet lumineux qui balaie lentement puis marque une pause */
.banniere-conges::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 28%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
    animation: banniere-reflet 8s ease-in-out 1s infinite;
    pointer-events: none;
}
.banniere-conges-icone {
    font-size: 1.5rem; line-height: 1; display: inline-block;
    transform-origin: 50% 85%;
    animation: palme-ondule 4.5s ease-in-out infinite;
}
.banniere-conges p { margin: 0; font-weight: 600; position: relative; }

/* Rappel congés côté admin (fond sombre) */
.rappel-conges {
    display: flex; align-items: center; gap: .6rem;
    background: var(--jaune-pale); border: 1px solid var(--jaune);
    border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1rem; color: #7a5c00;
    animation: apparition .4s ease both;
}
.rappel-conges a { color: var(--jaune-fonce); font-weight: 700; }
.rappel-conges .banniere-conges-icone { font-size: 1.15rem; }

/* -------------------------------------------------------------- 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: .78rem;
    text-transform: uppercase; letter-spacing: .4px; padding: .5rem .6rem;
    border-bottom: 2px solid var(--gris-bordure);
}
table.liste td { padding: .6rem; border-bottom: 1px solid #eceae3; vertical-align: middle; }
table.liste tbody tr { transition: background var(--transition); }
table.liste tbody tr:hover { background: var(--jaune-pale); }
table.liste tbody tr[data-href] { cursor: pointer; }
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; }

/* Sur mobile, chaque ligne du tableau devient une petite carte lisible.
   Les <td> portent data-th="Libellé" pour afficher l'intitulé de colonne. */
@media (max-width: 760px) {
    table.liste, table.liste tbody { display: block; }
    table.liste thead { display: none; }
    table.liste tbody tr {
        display: block; background: var(--blanc);
        border: 1px solid var(--gris-bordure); border-radius: 12px;
        padding: .55rem .9rem; margin-bottom: .7rem; box-shadow: var(--ombre);
    }
    table.liste tbody tr:hover { background: var(--blanc); }
    table.liste td {
        display: flex; justify-content: space-between; align-items: center;
        gap: 1rem; border-bottom: none; padding: .28rem 0; text-align: right;
    }
    table.liste td[data-th]::before {
        content: attr(data-th);
        color: var(--gris-doux); font-size: .78rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: .3px; text-align: left;
    }
    table.liste td:not([data-th]) { justify-content: flex-end; }
    table.liste td.vide-mobile { display: none; }
    td.tronque { max-width: none; white-space: normal; }
}

.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: .22rem .65rem; 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: .55rem .7rem; border: 1.5px solid var(--gris-bordure);
    border-radius: var(--rayon-petit); font: inherit; background: var(--blanc);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.filtres input:focus, .filtres select:focus {
    outline: none; border-color: var(--jaune); box-shadow: 0 0 0 4px rgba(245,197,24,.22);
}
.filtres input[name="q"] { min-width: 280px; flex: 1; }
@media (max-width: 640px) {
    .filtres input[name="q"] { min-width: 0; width: 100%; }
    .filtres input, .filtres select { flex: 1; min-width: 40%; }
}

/* ----------------------------------------------------- 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; }
@media (max-width: 480px) {
    dl.fiche { grid-template-columns: 1fr; gap: 0; }
    dl.fiche dt { margin-top: .55rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; }
}

.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: var(--rayon-petit);
    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: var(--rayon-petit);
    padding: .85rem 1rem; margin-bottom: .9rem; background: #fdfcf9;
}
.bloc-rdv-date { margin: 0 0 .6rem; font-size: 1.05rem; }
.reponse-rdv {
    background: var(--jaune-pale); border-radius: var(--rayon-petit); 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: #f3c6c6; }
.zone-danger h2 { color: var(--rouge); }

/* ------------------------------------------- timeline de suivi (client) */

.timeline { list-style: none; margin: 1.2rem 0 .4rem; padding: 0; }
.timeline-etape {
    position: relative; display: flex; gap: 1rem;
    padding: 0 0 1.55rem 0;
    animation: apparition .5s ease both;
}
.timeline-etape:nth-child(1) { animation-delay: .05s; }
.timeline-etape:nth-child(2) { animation-delay: .15s; }
.timeline-etape:nth-child(3) { animation-delay: .25s; }
.timeline-etape:nth-child(4) { animation-delay: .35s; }
.timeline-etape:nth-child(5) { animation-delay: .45s; }
.timeline-etape:last-child { padding-bottom: .2rem; }

/* trait vertical entre les puces */
.timeline-etape::before {
    content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px;
    width: 3px; border-radius: 3px; background: var(--gris-bordure);
}
.timeline-etape:last-child::before { display: none; }
.timeline-etape.faite::before {
    background: linear-gradient(180deg, var(--jaune), var(--jaune-fonce));
    transform-origin: top;
    animation: trait-monte .5s ease both;
}
.timeline-etape:nth-child(1).faite::before { animation-delay: .2s; }
.timeline-etape:nth-child(2).faite::before { animation-delay: .3s; }
.timeline-etape:nth-child(3).faite::before { animation-delay: .4s; }
.timeline-etape:nth-child(4).faite::before { animation-delay: .5s; }

.timeline-puce {
    flex: none; width: 33px; height: 33px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; font-weight: 800; z-index: 1;
    background: var(--blanc); border: 3px solid var(--gris-bordure); color: #c6c3b9;
}
.timeline-etape.faite .timeline-puce {
    background: var(--jaune); border-color: var(--jaune); color: var(--noir);
    animation: coche-pop .4s cubic-bezier(.34, 1.56, .64, 1) both;
}
.timeline-etape:nth-child(1).faite .timeline-puce { animation-delay: .1s; }
.timeline-etape:nth-child(2).faite .timeline-puce { animation-delay: .2s; }
.timeline-etape:nth-child(3).faite .timeline-puce { animation-delay: .3s; }
.timeline-etape:nth-child(4).faite .timeline-puce { animation-delay: .4s; }
.timeline-etape:nth-child(5).faite .timeline-puce { animation-delay: .5s; }
.timeline-etape.courante .timeline-puce {
    background: var(--noir); border-color: var(--jaune); color: var(--jaune);
    animation: pulsation 2s ease-out infinite;
}

.timeline-corps { padding-top: .2rem; min-width: 0; }
.timeline-titre { margin: 0; font-weight: 700; color: #b3b0a6; }
.timeline-etape.faite .timeline-titre,
.timeline-etape.courante .timeline-titre { color: var(--noir); }
.timeline-etape.courante .timeline-titre { font-size: 1.05rem; }
.timeline-detail { margin: .15rem 0 0; font-size: .87rem; color: var(--gris-doux); }
.timeline-detail strong { color: var(--gris-texte); }

/* --------------------------------------------- onglets fiche admin (mobile) */

.onglets { display: none; }

@media (max-width: 960px) {
    .onglets {
        display: flex; gap: .3rem;
        position: sticky; top: 0; z-index: 30;
        background: rgba(247,245,239,.92);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        margin: 0 -0.9rem 1rem; padding: .55rem .9rem;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 1px solid var(--gris-bordure);
    }
    .onglets::-webkit-scrollbar { display: none; }
    .onglet-bouton {
        flex: 1; white-space: nowrap;
        border: 1.5px solid var(--gris-bordure); border-radius: 999px;
        background: var(--blanc); color: var(--gris-texte);
        font: inherit; font-size: .88rem; font-weight: 600;
        padding: .45rem .9rem; cursor: pointer;
        transition: background var(--transition), border-color var(--transition), color var(--transition);
    }
    .onglet-bouton.actif {
        background: var(--noir); border-color: var(--noir); color: var(--jaune);
    }
    .groupe-onglet { display: none; }
    .groupe-onglet.actif { display: block; animation: apparition-douce .25s ease both; }
}

/* --------------------------------------------------------- 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); gap: .7rem; } }
.indicateur {
    background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: 14px;
    padding: 1.1rem .8rem; text-align: center; box-shadow: var(--ombre);
    position: relative; overflow: hidden;
    animation: apparition .45s ease both;
    transition: transform var(--transition), box-shadow var(--transition);
}
.indicateur:hover { transform: translateY(-2px); box-shadow: var(--ombre-carte); }
.indicateur::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--jaune), var(--jaune-fonce));
}
.indicateur:nth-child(2) { animation-delay: .07s; }
.indicateur:nth-child(3) { animation-delay: .14s; }
.indicateur:nth-child(4) { animation-delay: .21s; }
.indicateur .valeur { display: block; font-size: 1.65rem; font-weight: 800; color: var(--noir); }
.indicateur .legende { color: var(--gris-doux); font-size: .84rem; }

/* ------------------------------------------------------------- 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: var(--rayon-petit); padding: .55rem 1rem; cursor: pointer;
    font-size: .9rem; line-height: 1.3; text-align: center;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.choix-case:active { transform: scale(.97); }
.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; }

/* --------------------------------------------- lignes de facturation (devis) */

table.lignes-facturation { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.lignes-facturation th {
    text-align: left; color: var(--gris-doux); font-size: .76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px; padding: .3rem .3rem;
}
table.lignes-facturation td { padding: .18rem .3rem; }
table.lignes-facturation input {
    width: 100%; padding: .45rem .55rem;
    border: 1.5px solid var(--gris-bordure); border-radius: 8px; font: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
table.lignes-facturation input:focus {
    outline: none; border-color: var(--jaune); box-shadow: 0 0 0 3px rgba(245,197,24,.2);
}
table.lignes-facturation tfoot tr { border-top: 2px solid var(--noir); }
.cellule-total { text-align: right; white-space: nowrap; }
.bouton-supprimer-ligne {
    border: none; background: none; color: var(--rouge); cursor: pointer;
    font-size: 1rem; padding: .3rem; border-radius: 6px;
    transition: background var(--transition);
}
.bouton-supprimer-ligne:hover { background: var(--rouge-clair); }

/* ---- Journal des emails (fiche intervention) ---- */
.journal-emails {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}
.journal-emails li {
    padding: .55rem .75rem;
    margin-bottom: .4rem;
    border-radius: 4px;
    border-left: 3px solid var(--vert, #2e7d32);
    background: #fafafa;
    line-height: 1.5;
}
.journal-emails li.envoi-ko {
    border-left-color: var(--rouge, #c62828);
    background: #fff6f6;
}
.journal-emails .form-en-ligne {
    display: inline-block;
    margin-left: .5rem;
}

/* ---- Onglet Notifications ---- */
.tableau-notifications td,
.tableau-notifications th { vertical-align: top; }
.tableau-notifications label { cursor: pointer; font-weight: 600; }
.etiquette {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .45rem;
    border-radius: 3px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.etiquette-auto {
    background: var(--jaune, #f5c518);
    color: #141414;
}
.liste-reglages {
    line-height: 1.7;
    max-width: 70ch;
}

/* ---- État de la sauvegarde (page Stats) ---- */
.etat-sauvegarde {
    padding: .6rem .85rem;
    border-radius: 4px;
    border-left: 3px solid var(--vert);
    background: #fafafa;
    line-height: 1.6;
}
.etat-sauvegarde.etat-ko {
    border-left-color: var(--rouge);
    background: #fff6f6;
}

/* ---- Contact sur la page de suivi client ---- */
.contact-suivi {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .75rem;
}
.contact-lien {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 1 1 240px;
    padding: .8rem 1rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: border-color var(--transition), transform var(--transition);
}
.contact-lien:hover {
    border-color: var(--jaune);
    transform: translateY(-1px);
}
.contact-lien strong { display: block; word-break: break-word; }
.contact-lien small { color: #666; }
.contact-icone { font-size: 1.35rem; line-height: 1; }