/*
 * Mémoire et Sépulture - feuille de style unique (téléphone d'abord, PC ensuite).
 *
 * Briques réutilisables par les écrans :
 *   .entete-page            titre (h1) + action principale (.bouton), côte à côte dès que la place le permet
 *   .carte                  bloc blanc encadré (résumé, section de formulaire)
 *   .liste-conteneur        <div class="liste-conteneur"> OBLIGATOIRE autour de chaque table.liste (défilement horizontal
 *                           local entre 768 et ~1100 px, jamais de défilement de la page ; sans effet sur téléphone)
 *   .liste                  <table class="liste"> ; chaque <td> porte data-libelle="…" : sous 768 px chaque
 *                           ligne devient une carte. Un <a class="lien-ligne"> dans la 1re cellule rend toute
 *                           la ligne cliquable. Cellule à droite : classe .num ; cellule d'actions : .actions
 *   .formulaire             libellés au-dessus des champs, 1 colonne ; <div class="deux-colonnes"> = 2 colonnes
 *                           dès 768 px ; chaque champ : <div class="champ"><label>…</label><input>
 *                           [<p class="aide">] [<p class="erreur-champ">]</div> (ajouter .invalide au .champ)
 *   .bouton                 bouton principal ; + .secondaire (contour) ; + .danger (rouge) ; + .plein (pleine largeur)
 *   .actions-bas            barre d'actions : collée au-dessus de la barre de navigation sous 1024 px,
 *                           en ligne dans la page sur PC
 *   .pastille               pastille de statut ; utiliser le partiel partiels/statut.php
 *   .alerte                 message (.alerte-erreur, .alerte-succes, .alerte-info) ; partiel partiels/message.php
 *   .liste-vide             état vide ; partiel partiels/liste-vide.php
 *   .num                    chiffres alignés à droite (montants)
 *   .liste-sauvegardes      écran Sauvegardes : <ul> de .sauvegarde (infos + boutons) ; .comparaison = petit tableau avant/après
 *   form[data-sans-verrou]  formulaire dont la réponse est un fichier : app.js ne le verrouille que 3 s (voir app.js)
 *
 * Contrastes : l'or #a8844a sur ivoire fait ~3,2:1 (insuffisant pour du texte) : il ne sert qu'aux filets et
 * décors ; le texte utilise --sapin, --sapin-fonce, --encre ou --mousse (tous >= 4,5:1 sur l'ivoire).
 */

@font-face {
    font-family: "Cormorant Garamond";
    src: url("/fonts/CormorantGaramond-600.woff2") format("woff2");
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mulish";
    src: url("/fonts/Mulish-400.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --sapin: #2f4a2e;
    --sapin-fonce: #223722;
    --or: #a8844a;
    --or-clair: #d9c29a;
    --ivoire: #f6f3eb;
    --pierre: #ebe7dc;
    --encre: #1e2a1f;
    --mousse: #56624f;
    --blanc: #fff;
    --danger: #8a1f1f;
    --rayon: 8px;
    --hauteur-barre: 3.75rem;
    --bas-securise: env(safe-area-inset-bottom, 0px);
    --police-titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --police-texte: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    font: 400 1rem/1.5 var(--police-texte);
    color: var(--encre);
    background: var(--ivoire);
    overflow-wrap: break-word;
}

h1, h2, h3 {
    margin: 0 0 0.75rem;
    font-family: var(--police-titre);
    font-weight: 600;
    line-height: 1.15;
    color: var(--sapin-fonce);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; }

a { color: var(--sapin); text-underline-offset: 0.15em; }
a:hover { color: var(--sapin-fonce); }

:focus-visible {
    outline: 3px solid var(--sapin);
    outline-offset: 2px;
}

.lien-evitement {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    color: var(--blanc);
    background: var(--sapin-fonce);
    border-radius: var(--rayon);
}
.lien-evitement:focus { top: 0.5rem; color: var(--blanc); outline-color: var(--or-clair); }

/* ---------- Cadre général ---------- */

.principal {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem;
}

body.connecte { padding-bottom: calc(var(--hauteur-barre) + 3px + var(--bas-securise)); }

.entete {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--blanc);
    background: var(--sapin);
    border-bottom: 3px solid var(--or);
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    color: var(--blanc);
    text-decoration: none;
}
.marque:hover { color: var(--blanc); }
.marque:focus-visible { outline-color: var(--or-clair); }
.marque img { flex: none; background: var(--ivoire); border-radius: 6px; padding: 2px; }
.marque-nom { font-family: var(--police-titre); font-size: 1.4rem; font-weight: 600; line-height: 1.1; }

/* ---------- Navigation : barre du bas (téléphone) ---------- */

.navigation {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    background: var(--sapin);
    border-top: 3px solid var(--or);
    padding-bottom: var(--bas-securise);
}

.navigation ul { margin: 0; padding: 0; list-style: none; }

.nav-liste {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.nav-liste > li { min-width: 0; }

.navigation a,
.navigation summary,
.navigation button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: var(--hauteur-barre);
    padding: 0.25rem 0.125rem;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--blanc);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    list-style: none;
}
.navigation summary::-webkit-details-marker { display: none; }
.navigation a:focus-visible,
.navigation summary:focus-visible,
.navigation button:focus-visible { outline: 3px solid var(--or-clair); outline-offset: -3px; }

.navigation a[aria-current="page"],
.navigation summary.actif,
.navigation details[open] > summary {
    color: var(--sapin-fonce);
    background: var(--ivoire);
}

.navigation .icone { flex: none; }

.nav-plus { position: relative; }

.plus > .panneau {
    position: fixed;
    right: 0.5rem;
    bottom: calc(var(--hauteur-barre) + var(--bas-securise) + 0.5rem);
    z-index: 60;
    min-width: 13rem;
    max-width: calc(100vw - 1rem);
    background: var(--sapin);
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.plus > .panneau a,
.plus > .panneau button {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}
.plus > .panneau a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--or); }
.plus > .panneau li + li { border-top: 1px solid rgba(255, 255, 255, 0.18); }

/* Éléments réservés à la colonne PC */
.navigation .nav-secondaire,
.navigation .nav-session { display: none; }

/* ---------- Titres de page, cartes ---------- */

.entete-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.entete-page h1 { margin: 0; }

.carte {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--blanc);
    border: 1px solid var(--pierre);
    border-top: 3px solid var(--or-clair);
    border-radius: var(--rayon);
}
.carte > :last-child { margin-bottom: 0; }

/* ---------- Boutons ---------- */

.bouton,
button.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1.25rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--blanc);
    text-align: center;
    text-decoration: none;
    background: var(--sapin);
    border: 2px solid var(--sapin);
    border-radius: var(--rayon);
    cursor: pointer;
}
.bouton:hover { color: var(--blanc); background: var(--sapin-fonce); border-color: var(--sapin-fonce); }
.bouton.secondaire { color: var(--sapin-fonce); background: transparent; border-color: var(--sapin); }
.bouton.secondaire:hover { color: var(--sapin-fonce); background: var(--pierre); }
.bouton.danger { color: var(--blanc); background: var(--danger); border-color: var(--danger); }
.bouton.danger:hover { background: #6e1818; border-color: #6e1818; }
.bouton.plein { width: 100%; }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Barre d'actions : collée au-dessus de la barre de navigation sur téléphone */
.actions-bas {
    position: sticky;
    bottom: calc(var(--hauteur-barre) + 3px + var(--bas-securise));
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem -1rem 0;
    padding: 0.75rem 1rem;
    background: var(--ivoire);
    border-top: 1px solid var(--or-clair);
}
.actions-bas .bouton { flex: 1 1 10rem; }

/* ---------- Formulaires ---------- */

.formulaire { display: grid; gap: 1rem; }
.formulaire .deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.champ { min-width: 0; }
.champ label { display: block; margin-bottom: 0.25rem; font-weight: 700; }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="search"], input[type="url"],
select, textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 16px;
    color: var(--encre);
    background: var(--blanc);
    border: 1px solid var(--mousse);
    border-radius: var(--rayon);
}
textarea { min-height: 6rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--sapin);
    outline-offset: 1px;
}
input[type="checkbox"], input[type="radio"] { width: 1.5rem; height: 1.5rem; accent-color: var(--sapin); }
.champ.invalide input, .champ.invalide select, .champ.invalide textarea { border: 2px solid var(--danger); }
.aide { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--mousse); }
.erreur-champ { margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 700; color: var(--danger); }

/* ---------- Messages ---------- */

.alerte { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid; border-radius: var(--rayon); }
.alerte-erreur { color: #6e1818; background: #fbe9e9; border-color: #e3b4b4; }
.alerte-succes { color: #1f4a22; background: #e6f2e4; border-color: #b4d6b0; }
.alerte-info { color: #1d3c5a; background: #e8f1fa; border-color: #b7d0e6; }

.liste-vide {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--mousse);
    background: var(--blanc);
    border: 1px dashed var(--or-clair);
    border-radius: var(--rayon);
}

.detail-technique { overflow-x: auto; padding: 0.75rem; font-size: 0.85rem; background: var(--pierre); }

/* ---------- Pastilles de statut (contraste >= 4,5:1) ---------- */

.pastille {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--encre);
    background: var(--pierre);
    border: 1px solid var(--mousse);
    border-radius: 999px;
}
.pastille-brouillon { color: #3d4639; background: #e4e4df; border-color: #8a9084; }
.pastille-envoye { color: #17405f; background: #dcecf8; border-color: #7aa6c8; }
.pastille-accepte, .pastille-reglee, .pastille-realise { color: #1b4a1f; background: #dff0dc; border-color: #78ad74; }
.pastille-refuse, .pastille-en-retard, .pastille-en-retard-passage { color: #7a1a1a; background: #fbe3e3; border-color: #cf8a8a; }
.pastille-expire, .pastille-annulee, .pastille-contrat-annule { color: #4a4a4a; background: #ececec; border-color: #9a9a9a; }
.pastille-a-regler { color: #6a4a10; background: #f8ecd0; border-color: #c9a55a; }
.pastille-partielle { color: #5a4a08; background: #f4efc6; border-color: #b9ab4d; }

/* ---------- Listes : tableau sur PC, cartes sur téléphone ---------- */

.liste-conteneur { max-width: 100%; overflow-x: auto; }
.liste { width: 100%; border-collapse: collapse; background: var(--blanc); }
.liste th, .liste td { padding: 0.75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--pierre); }
.liste th { font-size: 0.875rem; color: var(--sapin-fonce); background: var(--pierre); }
.liste .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste tbody tr:hover { background: var(--ivoire); }
.liste a.lien-ligne { font-weight: 700; }

@media (max-width: 767.98px) {
    .liste-conteneur { overflow: visible; }
    .liste, .liste tbody, .liste tr, .liste td { display: block; width: 100%; }
    .liste { background: none; }
    .liste thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .liste tr {
        position: relative;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        background: var(--blanc);
        border: 1px solid var(--pierre);
        border-left: 4px solid var(--or-clair);
        border-radius: var(--rayon);
    }
    .liste td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.375rem 0;
        text-align: right;
        border: 0;
    }
    .liste td::before {
        content: attr(data-libelle);
        flex: none;
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--mousse);
        text-align: left;
    }
    .liste td:not([data-libelle])::before { content: none; }
    /* Ligne entière cliquable */
    .liste a.lien-ligne::after { content: ""; position: absolute; inset: 0; }
    .liste td.actions { position: relative; z-index: 1; }
}

/* ---------- Clients : recherche, fiche, choix du type ---------- */

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
[hidden] { display: none !important; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.carte { padding: 1rem; }
legend { padding: 0; margin-bottom: 0.5rem; font-weight: 700; color: var(--sapin-fonce); }
fieldset.carte > legend { float: left; width: 100%; font-family: var(--police-titre); font-size: 1.25rem; }
fieldset.carte > legend + * { clear: both; }

.recherche { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.recherche input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 52px; font-size: 1.125rem; }
.recherche .bouton { flex: none; }

.choix-type { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.choix-type legend { grid-column: 1 / -1; }
.choix-type .erreur-champ { grid-column: 1 / -1; }
.choix-type label { position: relative; display: block; }
.choix-type input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choix-type span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.5rem 1rem;
    font-weight: 700;
    color: var(--sapin-fonce);
    background: var(--blanc);
    border: 2px solid var(--sapin);
    border-radius: var(--rayon);
}
.choix-type input:checked + span { color: var(--blanc); background: var(--sapin); }
.choix-type input:focus-visible + span { outline: 3px solid var(--or); outline-offset: 2px; }

.details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem 1rem; margin: 0; }
.details dt { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 700; color: var(--mousse); }
.details dd { margin: 0; }
.lien-contact { display: inline-block; padding: 0.5rem 0; font-weight: 700; }

.elements { margin: 0; padding: 0; list-style: none; }
.elements li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--pierre);
}
.elements li:last-child { border-bottom: 0; }
.elements li > div { min-width: 0; flex: 1 1 14rem; }

.actions-ligne { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.actions-ligne form { margin: 0; }
.actions-ligne .aide { margin: 0; }

@media (min-width: 768px) {
    .details { grid-template-columns: 10rem minmax(0, 1fr); }
    .details dt { margin-top: 0; padding: 0.25rem 0; }
    .details dd { padding: 0.25rem 0; }
    .choix-type { max-width: 28rem; }
}

/* ---------- Connexion (page sans navigation) ---------- */

body.anonyme .principal { max-width: 28rem; padding-top: 2rem; }

.connexion {
    padding: 1.5rem;
    background: var(--blanc);
    border: 1px solid var(--pierre);
    border-top: 4px solid var(--or);
    border-radius: var(--rayon);
}
.connexion-logo { display: block; margin: 0 auto 0.75rem; }
.connexion h1 { text-align: center; }
.connexion-sous-titre { margin: 0 0 1.5rem; text-align: center; color: var(--mousse); }
.formulaire-connexion label { display: block; margin: 1rem 0 0.25rem; font-weight: 700; }
.formulaire-connexion .bouton { width: 100%; margin-top: 1.5rem; }

/* ---------- Tablette ---------- */

@media (min-width: 768px) {
    .principal { padding: 1.5rem; }
    .formulaire .deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .actions-bas { margin-inline: -1.5rem; padding-inline: 1.5rem; }
    .actions-bas .bouton { flex: 0 1 auto; }
}

/* ---------- PC : colonne de navigation à gauche ---------- */

@media (min-width: 1024px) {
    body.connecte {
        display: grid;
        grid-template-columns: 15rem minmax(0, 1fr);
        align-items: start;
        padding-bottom: 0;
    }

    .cote {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow-y: auto;
        background: var(--sapin);
        border-right: 3px solid var(--or);
    }
    .entete { padding: 1.25rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }

    .navigation {
        position: static;
        display: flex;
        flex: 1;
        flex-direction: column;
        border: 0;
        padding: 0.5rem 0;
    }
    .nav-liste { display: block; }
    .nav-plus { display: none; }

    .navigation a,
    .navigation button {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.75rem;
        min-height: 48px;
        padding: 0.5rem 1.25rem;
        font-size: 1rem;
    }
    .navigation a:hover,
    .navigation button:hover { background: var(--sapin-fonce); }
    .navigation a[aria-current="page"] {
        color: var(--sapin-fonce);
        background: var(--ivoire);
        box-shadow: inset 4px 0 0 var(--or);
    }

    .navigation .nav-secondaire {
        display: block;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
    .navigation .nav-session {
        display: block;
        margin-top: auto;
        padding: 0.75rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
    .nav-utilisateur { display: block; padding: 0 1.25rem 0.5rem; font-size: 0.875rem; color: var(--or-clair); }

    .principal { margin: 0; padding: 2rem 2.5rem 3rem; }
    .actions-bas {
        position: static;
        margin: 0 0 1rem;
        padding: 0;
        background: none;
        border: 0;
    }
}

@media (min-width: 1024px) and (max-height: 500px) {
    .cote { position: static; height: auto; min-height: 100vh; }
}

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

/* Prestation désactivée : ligne atténuée (catalogue) */
.liste tr.ligne-inactive td:not(.actions) { color: var(--mousse); }

/* ---------- Devis : filtres, saisie des lignes, fiche ---------- */

.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filtres a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem 1rem;
    font-weight: 700;
    color: var(--sapin-fonce);
    text-decoration: none;
    background: var(--blanc);
    border: 2px solid var(--sapin);
    border-radius: 999px;
}
.filtres a:hover { background: var(--pierre); }
.filtres a[aria-current="page"] { color: var(--blanc); background: var(--sapin); }

.client-devis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin: 0; }
.client-devis a { display: inline-flex; align-items: center; min-height: 44px; }

.formules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.bouton.formule {
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    font-weight: 600;
}
.formule-prix { flex: none; font-weight: 700; white-space: nowrap; }

/* Une ligne = une carte sur téléphone (libellé en haut, quantité / prix / passages côte à côte) */
.lignes { counter-reset: ligne; }
.lignes-entete { display: none; }
.ligne-devis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: end;
}
.ligne-devis::before {
    counter-increment: ligne;
    content: "Ligne " counter(ligne);
    grid-column: 1 / 3;
    align-self: center;
    font-family: var(--police-titre);
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: lining-nums;
    color: var(--sapin-fonce);
}
.ligne-devis .supprimer-ligne { grid-column: 3; grid-row: 1; justify-self: end; padding-inline: 0.75rem; }
.ligne-devis .champ-libelle { grid-column: 1 / -1; }

.total-direct { flex: 1 0 100%; margin: 0; font-size: 1.25rem; text-align: right; }
.total-direct strong { font-variant-numeric: tabular-nums; }
.total-direct .aide { display: block; margin: 0; }

.total-devis { margin: 0.75rem 0 1rem; font-size: 1.25rem; text-align: right; }
.total-devis strong { font-variant-numeric: tabular-nums; }

.actions-bas form { display: flex; flex: 1 1 10rem; margin: 0; }
.actions-bas form .bouton { flex: 1 1 auto; }
.actions-section { margin: 0.75rem 0 1rem; }

@media (min-width: 768px) {
    .formules { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* PC : rangée compacte, libellés remplacés par un en-tête commun */
    .lignes-entete,
    .ligne-devis {
        grid-template-columns: minmax(0, 1fr) 6rem 8rem 6rem 7rem;
        gap: 0.5rem 0.75rem;
    }
    .lignes-entete {
        display: grid;
        padding: 0 calc(0.75rem + 1px) 0.25rem;
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--mousse);
    }
    .ligne-devis { align-items: center; margin-bottom: 0.5rem; padding: 0.5rem 0.75rem; }
    .ligne-devis::before { content: none; }
    .ligne-devis .champ-libelle { grid-column: auto; }
    .ligne-devis .supprimer-ligne { grid-column: auto; grid-row: auto; justify-self: stretch; }
    .ligne-devis .champ label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .total-direct { flex: 0 0 auto; margin-left: auto; order: 3; }
    .actions-bas form { flex: 0 1 auto; }
}

@media (min-width: 1024px) {
    .total-direct { margin-left: 0; }
}

/* ---------- Règlements et avoirs (fiche facture) ---------- */

.solde { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0 0 1rem; font-size: 1.125rem; }
.solde-trop-percu { color: var(--danger); }
.liste td.actions form { margin: 0; }
.liste td.actions .bouton { width: 100%; }
@media (min-width: 768px) {
    .liste td.actions .bouton { width: auto; }
}

/* ---------- Suivi des passages (écran du cimetière : gros boutons, lecture rapide) ---------- */

.groupe-passages { margin-bottom: 1.5rem; }
.groupe-passages h2 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.compteur {
    display: inline-block;
    min-width: 1.75rem;
    padding: 0 0.5rem;
    font-family: var(--police-texte);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.75rem;
    text-align: center;
    color: var(--sapin-fonce);
    background: var(--pierre);
    border-radius: 999px;
}
.passages-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.passage { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0; }
.passage > p { margin: 0; }
.passage-retard { border-top-color: var(--danger); }
.passage-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 0.75rem; }
.passage-client { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.passage-client a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sapin-fonce); text-decoration: none; }
.passage-commune { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--sapin); }
.passage-sepulture { overflow-wrap: anywhere; }
.passage-note { padding: 0.5rem 0.75rem; background: var(--ivoire); border-left: 3px solid var(--or-clair); overflow-wrap: anywhere; }
.passage-photos { display: inline-block; margin-left: 0.5rem; font-size: 0.9375rem; color: var(--mousse); }
.passage-facture a { display: inline-block; padding: 0.5rem 0; }
.passage-action { margin: 0.25rem 0 0; }
.passage-action .bouton { min-height: 52px; font-size: 1.125rem; }
.detail-passage { border-top: 1px solid var(--pierre); }
.detail-passage > summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-weight: 700;
    color: var(--sapin-fonce);
    cursor: pointer;
}
.detail-passage[open] > summary { margin-bottom: 0.5rem; }
.case-grande {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0.25rem 0.75rem;
    font-weight: 700;
    background: var(--ivoire);
    border: 1px solid var(--mousse);
    border-radius: var(--rayon);
    cursor: pointer;
}
.case-grande input[type="checkbox"] { flex: none; width: 2rem; height: 2rem; }

@media (min-width: 768px) {
    .passages-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .passages-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Tableau de bord ---------- */

.raccourcis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.raccourcis .bouton { min-height: 56px; font-size: 1.125rem; }

.alertes-liste { margin: 0; padding: 0; list-style: none; }
.alertes-liste .alerte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 1rem;
    margin-bottom: 0.5rem;
    padding-block: 0.25rem;
    font-weight: 700;
}
.alertes-liste .alerte a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; }

.tableau-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; align-items: start; }
.tableau-grille .carte h2 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.tableau-grille .carte h3 { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0.25rem; font-size: 1.125rem; }
.tableau-grille .elements li > div { flex: 1 1 10rem; display: flex; flex-direction: column; }
.tableau-grille .elements li > .montant-statut { flex: 0 0 auto; align-items: flex-end; gap: 0.25rem; text-align: right; }
.tableau-grille .elements strong { white-space: nowrap; }
.lien-bloc { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; overflow-wrap: anywhere; }
.element-bientot { margin-inline: -0.5rem; padding-inline: 0.5rem !important; background: #fbf4e0; border-left: 4px solid #c9a55a; }
.pied-carte { margin: 1rem 0 0; }
.pied-carte .bouton { width: 100%; }

.chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.chiffres dt { font-size: 0.875rem; font-weight: 700; color: var(--mousse); }
.chiffres dd { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--sapin-fonce); }
.jauge-texte { margin: 0 0 0.5rem; font-weight: 700; }
.jauge-alerte { color: var(--danger); }
.jauge { display: block; width: 100%; height: 1.25rem; margin-bottom: 0.75rem; background: var(--pierre); border: 1px solid var(--mousse); border-radius: 999px; overflow: hidden; -webkit-appearance: none; appearance: none; }
.jauge::-webkit-meter-bar { height: 100%; background: var(--pierre); border: 0; }
.jauge::-webkit-meter-optimum-value { background: var(--sapin); }
.jauge::-webkit-meter-suboptimum-value { background: #b8860b; }
.jauge::-webkit-meter-even-less-good-value { background: var(--danger); }
.jauge::-moz-meter-bar { background: var(--sapin); }
.jauge:-moz-meter-sub-optimum::-moz-meter-bar { background: #b8860b; }
.jauge:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--danger); }

@media (min-width: 768px) {
    .raccourcis { grid-template-columns: repeat(2, max-content); }
}
@media (min-width: 1024px) {
    .tableau-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .raccourcis .bouton { min-height: 44px; font-size: 1rem; }
}
@media (min-width: 1600px) {
    .tableau-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Sauvegardes ---------- */

input[type="file"] {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 16px;
    color: var(--encre);
    background: var(--blanc);
    border: 1px solid var(--mousse);
    border-radius: var(--rayon);
}
.liste-sauvegardes { margin: 0; padding: 0; list-style: none; }
.sauvegarde { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--pierre); }
.sauvegarde-infos { display: flex; flex-direction: column; min-width: 0; }
.sauvegarde-detail { font-size: 0.875rem; color: var(--mousse); overflow-wrap: anywhere; }
.sauvegarde-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sauvegarde-actions form { margin: 0; }
.comparaison { width: 100%; border-collapse: collapse; }
.comparaison th, .comparaison td { padding: 0.5rem 0.25rem; text-align: left; border-bottom: 1px solid var(--pierre); }
.comparaison .num { text-align: right; font-variant-numeric: tabular-nums; }
.comparaison thead th { font-size: 0.875rem; color: var(--mousse); }
@media (min-width: 768px) {
    .page-sauvegardes .bouton.plein { width: auto; }
}

/* Lien « Retour » en haut des fiches (utile quand l'application est installée sans bouton retour du navigateur) */
.lien-retour { margin: 0 0 0.25rem; }
.lien-retour a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
}