/* L'autre rive — l'application. Reprise de la maquette ordinateur du 14 septembre 2026 :
   barre latérale bleue, tableaux côte à côte, fiche sur deux colonnes. Sur téléphone, la barre passe en bas. */
:root {
  --creme: #F3F1EF; --sol: #E9E5E0; --encre: #23262E; --gris: #6B6B6B; --gris-clair: #9A968F; --bord: #D8D4D0; --bord-clair: #E7E3DF; --filet: #F0EDE9;
  --blanc: #FFFFFF; --bleu: #46536E; --bleu-fonce: #39445C; --bleu-pale: #E1E6F0; --corail: #DB897B; --jaune: #E5B95E; --rouge: #B42318;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bleu-fonce); }
body { margin: 0; background: var(--creme); color: var(--encre); font-family: var(--serif); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: inherit; }
img { max-width: 100%; }
input, select, textarea, button { font: inherit; color: inherit; }

/* ---------- Coque : barre latérale + zone principale ---------- */
.ecran { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.lat { background: var(--bleu-fonce); color: var(--creme); padding: 28px 22px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; }
.lat img { width: 170px; height: auto; margin: 0 0 26px 4px; }
.lat .item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 8px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: .03em; color: rgba(243,241,239,.78); text-decoration: none; }
.lat .item.on { background: rgba(243,241,239,.12); color: var(--creme); }
.lat .item:hover { color: var(--creme); }
.lat .item svg { width: 20px; height: 20px; flex: none; }
.lat .item .bientot { margin-left: auto; font-size: 9.5px; letter-spacing: .08em; opacity: .55; }
.lat .bas { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(243,241,239,.18); display: flex; align-items: center; gap: 10px; }
.lat .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--creme); color: var(--bleu-fonce); font-family: var(--sans); font-size: 13px; font-weight: 600; display: grid; place-items: center; flex: none; }
.lat .qui { font-size: 15px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.lat .qui small { display: block; font-family: var(--sans); font-size: 11px; opacity: .7; letter-spacing: .04em; text-transform: uppercase; }
.lat .sortir { font-family: var(--sans); font-size: 11.5px; letter-spacing: .05em; opacity: .7; text-decoration: underline; text-underline-offset: 3px; margin: 10px 0 0 12px; }
.lat .replier { position: absolute; top: 16px; right: -13px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bord); background: var(--creme); color: var(--bleu-fonce); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 0 2px; display: grid; place-items: center; z-index: 3; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
@media (min-width: 60rem) {
  .ecran.reduite { grid-template-columns: 76px minmax(0, 1fr); }
  .ecran.reduite .lat { padding: 22px 12px; align-items: center; }
  .ecran.reduite .lat img { width: 46px; margin: 0 0 22px; }
  .ecran.reduite .lat .item { width: 48px; justify-content: center; padding: 0; }
  .ecran.reduite .lat .item .libelle, .ecran.reduite .lat .item .bientot, .ecran.reduite .lat .qui, .ecran.reduite .lat .sortir { display: none; }
  .ecran.reduite .lat .bas { width: 100%; justify-content: center; }
}
.haut-mobile { display: none; }
.main { padding: 26px 36px 60px; min-width: 0; }

/* ---------- Barre de page ---------- */
.barre { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.barre .titre { flex: 1 1 auto; min-width: 0; }
.barre h1 { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.15; overflow-wrap: anywhere; }
.barre .sous { font-family: var(--sans); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); margin-top: 2px; }
.recherche { width: 300px; height: 42px; border: 1px solid var(--bord); border-radius: 9px; background: var(--blanc); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--gris-clair); }
.recherche svg { width: 18px; height: 18px; flex: none; }
.recherche input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-style: italic; font-size: 16px; color: var(--encre); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--bleu); color: var(--creme); font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; cursor: pointer; text-decoration: none; }
.btn.second { background: var(--blanc); color: var(--bleu); border: 1px solid var(--bleu); }
.btn.large { width: 100%; height: 50px; margin-top: 18px; }
.btn.second.rouge { color: var(--rouge); border-color: var(--rouge); }
.boutons-corbeille { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn.petit { height: 36px; padding: 0 14px; font-size: 11.5px; }
.bloc .boutons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.bloc.en-edition { border-color: var(--bleu); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn svg { width: 16px; height: 16px; }
.lab { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gris); margin: 0; }
.bandeau { background: var(--jaune); color: var(--encre); font-family: var(--sans); font-size: 13px; padding: 8px 12px; border-radius: 9px; margin-bottom: 16px; }
.erreur { color: var(--rouge); font-family: var(--sans); font-size: 14px; margin: 12px 0 0; }
.chargement, .vide-liste { color: var(--gris); font-style: italic; padding: 14px 18px; margin: 0; }

/* ---------- Tableau de bord ---------- */
.barre-tableau .titre { flex: 0 1 auto; }
.barre-tableau .quand-centre { flex: 1 1 260px; }
.barre-tableau .quand-centre .ligne1 { font-size: 26px; }
.barre-tableau .quand-centre .ligne2 { text-transform: none; letter-spacing: .02em; font-size: 14px; }
a.tuile { text-decoration: none; color: inherit; }
a.tuile:hover { border-color: var(--bleu); }
.tuiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 8px 0 26px; }
.tuile { background: var(--blanc); border: 1px solid var(--bord-clair); border-radius: 12px; padding: 14px 18px; }
.tuile .chiffre { font-size: 34px; font-weight: 500; line-height: 1; color: var(--bleu); font-variant-numeric: tabular-nums; }
.tuile .quoi { font-family: var(--sans); font-size: 12px; color: var(--gris); margin-top: 6px; }
/* Archives (23 septembre 2026) : une bande sous les cinq cases, le nombre de dossiers terminés, un clic ouvre la page. */
.tuile-archives { display: flex; align-items: center; gap: 14px; margin: -12px 0 26px; padding: 12px 18px; background: var(--blanc); border: 1px dashed var(--bord-clair); border-radius: 12px; text-decoration: none; color: inherit; }
.tuile-archives:hover { border-color: var(--bleu); border-style: solid; }
.tuile-archives svg { width: 22px; height: 22px; color: var(--gris); flex: none; }
.tuile-archives .chiffre { font-size: 26px; font-weight: 500; line-height: 1; color: var(--bleu); font-variant-numeric: tabular-nums; }
.tuile-archives .quoi { font-family: var(--sans); font-size: 12.5px; color: var(--gris); flex: 1; }
.btn.archiver { background: #2F5A3B; }
.deja-archive { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; color: var(--gris); text-decoration: none; }
.deja-archive svg { width: 16px; height: 16px; }
.grille2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* « Dossiers en paiement » (31 octobre 2026) : tout en bas, sur toute la largeur, ses dossiers sur deux colonnes. */
.grille2 > .carte.large { grid-column: 1 / -1; }
.lignes2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lignes2 > .ligne:nth-child(2) { border-top: 0; }
.lignes2 > .ligne:nth-child(odd) { border-right: 1px solid var(--filet); }
/* La page « En paiement » : un intertitre par statut ; le nombre de dossiers sur le bouton de la barre latérale. */
.groupe-liste { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); padding: 10px 18px 5px; background: var(--filet); }
.groupe-liste + .ligne { border-top: 0; }
.lat .item .nb { margin-left: auto; font-family: var(--sans); font-size: 10.5px; background: rgba(243,241,239,.18); border-radius: 999px; padding: 1px 7px; }
.lat .item .nb:empty { display: none; }
.ecran.reduite .lat .item .nb { display: none; }
.carte { background: var(--blanc); border: 1px solid var(--bord-clair); border-radius: 12px; overflow: hidden; }
.carte .tete { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid var(--bord-clair); }
.carte .tete h2 { margin: 0; font-size: 20px; font-weight: 600; }
.carte .n { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--bleu); background: var(--creme); border: 1px solid var(--bord); border-radius: 999px; padding: 1px 9px; }
.ligne { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 9px 18px; border-top: 1px solid var(--filet); text-decoration: none; color: inherit; }
.ligne:first-of-type { border-top: 0; }
a.ligne:hover { background: #FBFAF8; }
.ligne .txt { flex: 1 1 auto; min-width: 0; }
.ligne .nom { font-weight: 600; font-size: 17px; }
.ligne .det { font-size: 13.5px; color: var(--gris); font-family: var(--sans); }
.pill { flex: none; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .04em; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.p-rouge { background: #F9E3DE; color: #8A3B2C; } .p-bleu { background: var(--bleu-pale); color: #33405C; } .p-jaune { background: #F8EBC9; color: #6F5312; } .p-vert { background: #E3EEE5; color: #2F5A3B; }
.chev { flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--gris-clair); border-bottom: 1.5px solid var(--gris-clair); transform: rotate(-45deg); }
.liens-bas { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 26px 0 0; font-family: var(--sans); font-size: 13px; }
.liens-bas a { color: var(--bleu); }

/* ---------- Fiche ---------- */
.fiche-tete { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 22px; flex-wrap: wrap; }
.fiche-tete .photo { width: 96px; height: 120px; border-radius: 10px; background: var(--bleu-pale); border: 1px solid var(--bord); display: grid; place-items: center; flex: none; overflow: hidden; }
.fiche-tete .photo img { width: 100%; height: 100%; object-fit: cover; }
.fiche-tete .photo svg { width: 70px; height: 70px; }
/* La photo se change depuis le bandeau : la photo est un bouton, avec « Ajouter / Changer la photo » dessous. */
.fiche-tete .photo-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.fiche-tete button.photo { appearance: none; -webkit-appearance: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; }
.fiche-tete button.photo:hover { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
.lien-photo { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); }
.lien-photo.retirer { color: var(--gris); font-weight: 500; }
.fiche-tete .texte { flex: 0 1 420px; min-width: 0; }
.fiche-tete .retour { font-family: var(--sans); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); text-decoration: none; }
.fiche-tete h1 { margin: 4px 0 6px; font-size: 32px; font-weight: 500; line-height: 1.1; overflow-wrap: anywhere; }
.fiche-tete .droite { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.quand-centre { flex: 1 1 300px; align-self: center; text-align: center; padding: 0 12px; color: var(--bleu-fonce); }
.quand-centre .ligne1 { margin: 0; font-size: 32px; line-height: 1.15; white-space: nowrap; }
.quand-centre .ligne1 b { font-weight: 600; }
.quand-centre .ligne2 { margin: 6px 0 0; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); }
.quand-centre.afixer .ligne1 { color: #8A3B2C; }
.fiche-tete .meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: var(--sans); font-size: 13px; color: var(--gris); }
.fiche-tete .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* Statut du dossier sous les boutons du bandeau : une pastille colorée qui est aussi une liste déroulante. */
.statut-rapide { display: flex; align-items: center; gap: 10px; font-family: var(--sans); }
.statut-rapide .lab { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.statut-rapide .pill { font-size: 13px; padding: 6px 12px; }
.statut-rapide select.pill { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2346536E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 6px; }
.statut-rapide select.pill:disabled { opacity: .6; cursor: wait; }
.colonnes { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.bloc { background: var(--blanc); border: 1px solid var(--bord-clair); border-radius: 12px; padding: 14px 18px 12px; margin-bottom: 16px; }
.bloc h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bloc h3 .modif { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; white-space: nowrap; }
.kv2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.kv2.blocs { gap: 16px; }
.kv2.blocs .bloc { margin-bottom: 0; }
.kv2.cercueil-urne { margin-bottom: 16px; }   /* Cercueil et Urne côte à côte, les notes dessous */
.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--filet); align-items: baseline; }
.kv:first-child { border-top: 0; }
.kv .k { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); line-height: 1.3; padding-top: 3px; }
.kv .v { font-size: 16px; overflow-wrap: anywhere; }
.kv .v.vide { color: var(--gris-clair); font-style: italic; }
.kv .v a { color: var(--bleu); }
.kv .v .heure-lieu { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--bleu); white-space: nowrap; }
.etape { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 0; border-top: 1px solid var(--filet); font-size: 16px; }
.etape:first-child { border-top: 0; }
.etape .h { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--bleu); white-space: nowrap; }
.etape .h.afixer { color: #8A3B2C; font-style: italic; font-weight: 400; }
.etape .fleche { color: var(--gris-clair); }
.etape .q { font-weight: 600; }
.etape .l { color: var(--gris); }
.groupe { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--bleu); margin: 10px 0 2px; }
.taches2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.tache { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 0; border-top: 1px solid var(--filet); }
.tache .case { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--bleu); border-radius: 5px; display: grid; place-items: center; background: var(--blanc); padding: 0; cursor: pointer; }
.tache .case.ok { background: var(--bleu); } .tache .case svg { width: 11px; height: 11px; }
.tache .t { flex: 1 1 auto; font-size: 14.5px; min-width: 0; } .tache .t .nom.fait { color: var(--gris-clair); text-decoration: line-through; }
.tache .pill { font-size: 10px; padding: 2px 7px; }
.jauge { display: inline-block; width: 44px; height: 6px; border-radius: 3px; background: var(--bord-clair); overflow: hidden; flex: none; vertical-align: middle; }
.jauge .rempli { display: block; height: 100%; border-radius: 3px; transition: width .25s; }
.jauge.grande { width: 160px; height: 9px; border-radius: 5px; }
.jauge-globale { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--encre); }
.tache .st { min-width: 58px; text-align: center; }
.tache .d { font-family: var(--sans); font-size: 11.5px; color: var(--gris); }
/* Date de réalisation d'une tâche faite (6 octobre 2026) : en vert après le nom, un clic pour la corriger ; bulle « Fait le ». */
.tache { position: relative; }
.tache .fait-le { margin-left: 6px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: #2F5A3B; background: #E3EEE5; border: 0; border-radius: 6px; padding: 1px 6px; cursor: pointer; white-space: nowrap; vertical-align: 1px; }
.tache .fait-le:hover { outline: 1.5px solid #2F5A3B; }
.fait-le-bulle { position: absolute; z-index: 20; top: calc(100% + 4px); left: 20px; width: 290px; max-width: calc(100vw - 48px); background: var(--blanc); border: 1px solid var(--bord); border-radius: 10px; box-shadow: 0 6px 22px rgba(35,38,46,.18); padding: 12px 14px; font-family: var(--sans); font-size: 13px; }
.fait-le-bulle::before { content: ""; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px; background: var(--blanc); border-left: 1px solid var(--bord); border-top: 1px solid var(--bord); transform: rotate(45deg); }
.fait-le-bulle b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu-fonce); margin-bottom: 8px; }
.fait-le-bulle .champs { display: flex; align-items: center; gap: 6px; color: var(--gris); }
.fait-le-bulle input { width: 44px; font-family: var(--sans); font-size: 16px; border: 1px solid var(--bord); border-radius: 6px; padding: 5px 4px; text-align: center; background: var(--creme); color: var(--encre); }
.fait-le-bulle .boutons { display: flex; gap: 8px; margin-top: 10px; }
.fait-le-bulle button { font-family: var(--sans); font-size: 12.5px; font-weight: 600; border-radius: 7px; padding: 6px 12px; cursor: pointer; }
.fait-le-bulle .enregistrer { background: var(--bleu); color: #fff; border: 0; }
.fait-le-bulle .sans-date { background: none; border: 1px solid var(--bord); color: var(--gris); }
.fait-le-bulle .note { margin: 8px 0 0; font-size: 11.5px; color: var(--gris); }
.doc { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 0; border-top: 1px solid var(--filet); }
.doc:first-child { border-top: 0; }
.doc svg { width: 18px; height: 18px; flex: none; }
/* Aperçu du document devant son nom (vignette 60 × 78) ; sur ordinateur, agrandissement au survol. */
.doc .vig { position: relative; flex: none; width: 60px; height: 78px; border: 1px solid var(--bord-clair); border-radius: 6px; background: var(--creme); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.doc .vig > img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 5px; display: block; }
.doc .vig svg { width: 22px; height: 22px; }
.doc .vig .grand { display: none; }
.jauge-ligne { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--encre); }
@media (hover: hover) and (min-width: 60rem) {
  .doc .vig.prete:hover .grand { display: block; position: absolute; left: 68px; top: -8px; width: 320px; height: auto; max-height: 460px; object-fit: contain; object-position: top; background: #fff; border: 1px solid var(--bord-clair); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); z-index: 20; }
} .doc .t { flex: 1 1 auto; font-size: 15.5px; overflow-wrap: anywhere; color: inherit; } .doc .f { font-family: var(--sans); font-size: 11px; color: var(--gris); white-space: nowrap; }
/* La frise des papiers */
.etapes-docs { display: flex; align-items: flex-start; gap: 2px; margin-top: 10px; }
.etapes-docs .tache.doc-etape { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; border: 0; padding: 0; min-height: 0; }
.etapes-docs .rond { width: 36px; height: 36px; border-radius: 50%; border: 2px solid; font-family: var(--sans); font-weight: 600; font-size: 15px; display: grid; place-items: center; cursor: pointer; background: var(--blanc); padding: 0; }
.rond.r-rouge { border-color: #B45A48; color: #8A3B2C; background: #F9E3DE; }
.rond.r-bleu { border-color: var(--bleu); color: #33405C; background: var(--bleu-pale); }
.rond.r-jaune { border-color: #C9A24A; color: #6F5312; background: #F8EBC9; }
.rond.r-vert { border-color: #2F5A3B; color: #FFFFFF; background: #2F5A3B; }
.etapes-docs .tache.courante .rond { box-shadow: 0 0 0 4px rgba(70,83,110,.22); }
.etapes-docs .tache.courante .lib { font-weight: 600; }
.etapes-docs .lib { font-size: 13px; line-height: 1.2; }
.etapes-docs .lib.fait { color: var(--gris-clair); }
.etapes-docs .lib .d { display: block; font-family: var(--sans); font-size: 11px; color: var(--gris); }
.etapes-docs .doc-etape .st { min-width: 0; }
.etapes-docs .fleche-doc { flex: none; margin-top: 8px; color: var(--gris-clair); font-size: 18px; line-height: 1; }
.ou-en-est { font-family: var(--sans); font-size: 12.5px; color: var(--bleu); margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--filet); }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 8px; }
.galerie a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--creme); border: 1px solid var(--bord-clair); }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.note { font-size: 15px; padding: 6px 0 8px; border-top: 1px solid var(--filet); white-space: pre-wrap; }
.note:first-child { border-top: 0; }
.info { color: var(--gris); font-family: var(--sans); font-size: 12.5px; }
.danger { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--bord); }
.btn-supprimer { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; border: 0; border-radius: 9px; background: var(--rouge); color: var(--blanc); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.danger p { font-family: var(--sans); font-size: 12.5px; color: var(--gris); margin: 10px 0 0; }

/* ---------- Formulaires ---------- */
.form3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
.form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.form3 + .form3, .form3 + .form2, .form2 + .form2 { margin-top: 12px; }
.champ .lab { margin-bottom: 4px; }
.champ input:not([type="checkbox"]):not([type="file"]), .champ select, .champ textarea, .champ .val {
  display: block; width: 100%; background: var(--blanc); border: 1px solid var(--bord); border-radius: 8px; min-height: 42px; padding: 9px 12px; font-size: 16px; }
.champ .val.lecture { background: var(--creme); color: var(--gris); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }
.champ select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.champ textarea { min-height: 150px; resize: vertical; line-height: 1.45; }
.champ small { display: block; font-family: var(--sans); font-size: 12px; color: var(--gris); margin-top: 4px; }
.depot { display: block; border: 1.5px dashed var(--bleu); border-radius: 10px; padding: 16px; text-align: center; color: var(--bleu); font-style: italic; background: #FAFAF8; cursor: pointer; min-height: 42px; }
.depot.plein { border-style: solid; font-style: normal; }
.depot input { display: none; }
.rangee { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 0; border-top: 1px solid var(--filet); }
.rangee:first-child { border-top: 0; }
.rangee .champ input, .rangee .champ select { min-height: 38px; font-size: 15px; padding: 6px 10px; }
.rangee .champ .lab { font-size: 10px; }
.retirer { background: none; border: 1px solid var(--bord); border-radius: 8px; color: var(--gris); min-height: 38px; padding: 0 10px; cursor: pointer; font-family: var(--sans); font-size: 12px; align-self: end; }
.ajouter { margin-top: 8px; background: none; border: 0; color: var(--bleu); font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: 6px 0; }
.cl-groupe .groupe { margin-top: 12px; }
.cl-groupe .ajouter { font-size: 11px; padding: 4px 0; margin-top: 2px; }
.tl { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 0; }
.tl input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--bleu); flex: none; margin: 0; }
.tl input[type="text"] { min-height: 30px; padding: 3px 8px; font-size: 14.5px; border: 1px solid var(--bord-clair); border-radius: 6px; background: var(--blanc); min-width: 0; }
.tl input[name="tache"] { flex: 1 1 auto; }
.tl input.dates { flex: 0 0 72px; font-family: var(--sans); font-size: 12px; }
.pill.st { border: 0; cursor: pointer; font-family: var(--sans); line-height: 1.3; }
.tl .st { font-size: 10px; padding: 3px 7px; min-width: 58px; text-align: center; }
.tl .jauge { width: 36px; }
.tl .retirer-tache { flex: none; width: 26px; height: 26px; border: 1px solid var(--bord); border-radius: 6px; background: var(--blanc); color: var(--gris); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.tl .retirer-tache:hover { color: var(--rouge); border-color: var(--rouge); }
.tl input:focus { outline: 2px solid var(--bleu); outline-offset: 0; }
.docs-edit label { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 15px; }
.docs-edit input { width: 18px; height: 18px; accent-color: var(--bleu); }
.enregistre { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--encre); color: var(--creme); font-family: var(--sans); font-size: 13px; padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.2); z-index: 20; }

/* ---------- Lieux (le répertoire) ---------- */
.ligne .emoji { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--creme); display: grid; place-items: center; font-size: 19px; }
.colonnes-lieux > div > .carte + .carte { margin-top: 20px; }
.sous-lieu { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--gris); margin-top: 2px; line-height: 1.35; }
.sous-lieu a { color: var(--bleu); }
.bandeau.vert { background: #E3EEE5; color: #2F5A3B; }
.bandeau .lien-photo { margin-left: 6px; }
.champ textarea.courte { min-height: 80px; }

/* ---------- Équipe ---------- */
table.eq { width: 100%; border-collapse: collapse; background: var(--blanc); }
table.eq th { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--bord-clair); background: var(--creme); }
table.eq td { padding: 12px 18px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
table.eq .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bleu-pale); color: #33405C; font-family: var(--sans); font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.defile { overflow-x: auto; }
.eq-ajout { display: flex; justify-content: flex-end; margin: -6px 0 20px; }
table.eq td small { display: block; font-family: var(--sans); font-size: 12px; color: var(--gris); }
table.eq td.num { font-family: var(--sans); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.eq tr.suspendu td { color: var(--gris-clair); }
table.eq tr.suspendu .avatar { background: var(--filet); color: var(--gris-clair); }
.lien-modif { background: none; border: 0; padding: 0; color: var(--bleu); font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#ajout, #acces { margin-bottom: 20px; border: 2px solid var(--bleu); }
.mdp-ligne { display: flex; gap: 8px; align-items: center; }
.mdp-ligne input { flex: 1; min-width: 0; }
.cx-alerte { background: #F9E3DE; color: #8A3B2C; border-radius: 9px; padding: 8px 12px; font-family: var(--sans); font-size: 13px; margin-bottom: 10px; }
.cx-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.cx-filtre { font-family: var(--sans); font-size: 12px; border: 1px solid var(--bord); border-radius: 999px; padding: 5px 12px; background: var(--blanc); color: var(--encre); cursor: pointer; }
.cx-filtre[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: var(--creme); }
.cx-jour { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu-fonce); padding: 14px 0 4px; }
.cx { display: grid; grid-template-columns: 56px 32px minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--filet); align-items: center; }
.cx .h { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--bleu-fonce); font-variant-numeric: tabular-nums; }
.cx .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--bleu-pale); color: #33405C; font-family: var(--sans); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.cx .q { min-width: 0; }
.cx .q small { display: block; font-family: var(--sans); font-size: 12px; color: var(--gris); }
.cx.absent { opacity: .55; }
@media (max-width: 60rem) { .cx { grid-template-columns: 48px minmax(0, 1fr) auto; } .cx .avatar { display: none; } .grille2.acces { grid-template-columns: 1fr; } }

/* ---------- Connexion ---------- */
.plein { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.carte-cx { width: 440px; max-width: 100%; background: var(--blanc); border: 1px solid var(--bord-clair); border-radius: 14px; padding: 40px 40px 34px; }
.carte-cx img { display: block; width: 240px; height: auto; margin: 0 auto 8px; }
.carte-cx .accroche { text-align: center; margin: 0 0 28px; font-style: italic; color: var(--gris); }
.carte-cx .champ + .champ { margin-top: 12px; }
.carte-cx .pied { text-align: center; margin: 28px 0 0; font-family: var(--sans); font-size: 11px; color: var(--gris-clair); letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Écrans moyens (portable, fenêtre réduite) : les formulaires à deux colonnes passent en une ---------- */
@media (min-width: 60rem) and (max-width: 78rem) {
  .kv2.blocs { grid-template-columns: 1fr; }   /* en lecture comme en saisie : Obsèques et Cercueil l'un sous l'autre */
  .ecran:not(.reduite) .main { padding-inline: 24px; }
  .ecran:not(.reduite) .form3 { gap: 10px 12px; }
}
/* ---------- Téléphone et petits écrans ---------- */
@media (max-width: 60rem) {
  .ecran { grid-template-columns: 1fr; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .haut-mobile { display: flex; align-items: center; justify-content: space-between; background: var(--bleu-fonce); padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
  .haut-mobile img { width: 130px; height: auto; }
  .haut-mobile .qui { color: var(--creme); font-family: var(--sans); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
  .lat { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; flex-direction: row; justify-content: space-around; gap: 0; padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 10; border-top: 1px solid rgba(243,241,239,.15); }
  .lat img, .lat .bas, .lat .sortir, .lat .item .bientot, .lat .replier { display: none; }
  .lat .item { flex-direction: column; gap: 3px; padding: 4px 8px; min-height: 50px; font-size: 10.5px; letter-spacing: .04em; justify-content: center; flex: 1 1 0; }
  .lat .item svg { width: 22px; height: 22px; }
  .main { padding: 14px 16px 40px; }
  .barre h1 { font-size: 24px; }
  .recherche { width: 100%; }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tuile .chiffre { font-size: 28px; }
  .grille2, .colonnes, .kv2, .form3, .form2, .taches2 { grid-template-columns: 1fr; }
  .etapes-docs { flex-direction: column; align-items: stretch; gap: 0; }
  .etapes-docs .tache.doc-etape { flex-direction: row; text-align: left; gap: 10px; padding: 4px 0; }
  .etapes-docs .lib { flex: 1 1 auto; }
  .etapes-docs .fleche-doc { transform: rotate(90deg); margin: 0 0 0 9px; width: 18px; }
  .kv2:not(.blocs) > div + div .kv:first-child { border-top: 1px solid var(--filet); }
  .kv { grid-template-columns: 120px minmax(0, 1fr); }
  .fiche-tete { gap: 14px; }
  .fiche-tete h1 { font-size: 26px; }
  .fiche-tete .droite { margin-left: 0; width: 100%; align-items: stretch; }
  .statut-rapide { justify-content: space-between; }
  .statut-rapide select.pill { flex: 1 1 auto; text-align: left; }
  .fiche-tete .texte { flex: 1 1 100%; }
  .quand-centre { flex: 1 1 100%; padding: 4px 0; }
  .quand-centre .ligne1 { white-space: normal; font-size: 26px; }
  .barre-tableau .quand-centre { order: 3; }
  .barre-tableau .quand-centre .ligne1 { font-size: 22px; }
  .fiche-tete .actions { width: 100%; }
  .fiche-tete .actions .btn { flex: 1 1 auto; }
  .champ input:not([type="checkbox"]):not([type="file"]), .champ select { min-height: 48px; font-size: 17px; }
  .carte-cx { padding: 28px 22px 24px; }
}
@media (min-width: 60rem) {
  .rangee.deroule { grid-template-columns: 1.2fr 1fr 1.2fr auto; align-items: end; }
  .rangee.tache-edit { grid-template-columns: 1.6fr 1fr .8fr .9fr auto; align-items: end; }
}

/* ---------- Vues d'ensemble (version 40, 24 septembre 2026) : alertes, délai légal, Aujourd'hui, Agenda, cartes, gestes, lecture des papiers ---------- */
/* Lignes de dossier : liseré de couleur de la sorte de fiche, vignette ronde (photo, initiales ou emoji). */
.ligne.avec-vignette { box-shadow: inset 4px 0 0 var(--c, var(--bleu)); padding-left: 16px; }
.vignette { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--bleu); color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .03em; }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette.emoji { font-size: 19px; }
.ligne .cote { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.delai { display: inline-block; font-family: var(--sans); font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delai.d-ok { background: #E3EEE5; color: #2F5A3B; }
.delai.d-att { background: #F8EBC9; color: #6F5312; }
.delai.d-urg { background: #F9E3DE; color: #8A3B2C; }
/* Alertes */
.alertes { display: grid; gap: 8px; }
.alerte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 10px; font-family: var(--sans); font-size: 13px; line-height: 1.4; text-decoration: none; color: var(--encre); border: 1px solid transparent; }
.alerte b { display: block; font-size: 14px; }
.alerte .ic { font-size: 20px; }
.alerte.a-urg { background: #F9E3DE; border-color: #EBC2B8; } .alerte.a-urg b { color: #8A3B2C; }
.alerte.a-att { background: #F8EBC9; border-color: #EBD7A2; }
.alerte.a-ok { background: #E3EEE5; grid-template-columns: auto 1fr; }
a.alerte:hover { filter: brightness(.98); }
.alertes-tableau { margin: 0 0 22px; }
.alertes-tete { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.alertes-tete h2, .titre-section { margin: 0; font-size: 20px; font-weight: 600; }
.alertes-tete a { font-family: var(--sans); font-size: 12.5px; color: var(--bleu); }
.titre-section { margin: 22px 0 10px; }
.titre-section:first-child { margin-top: 0; }
/* Aujourd'hui */
.nav-jours { display: flex; gap: 6px; flex-wrap: wrap; }
.nav-jours .btn.on { background: var(--bleu); color: var(--creme); }
.barre-jour .sous { margin: 0 0 2px; }
.frise-jour { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; }
.frise-jour > .h { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--bleu); padding-top: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.frise-jour > .h.passe { color: var(--gris-clair); }
.frise-jour .ev { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; background: var(--blanc); border: 1px solid var(--bord-clair); border-left: 5px solid var(--c); border-radius: 10px; padding: 9px 12px; }
.frise-jour .ev-lien { flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.frise-jour .ev .t { font-size: 17px; font-weight: 600; line-height: 1.2; }
.frise-jour .ev .l { font-family: var(--sans); font-size: 12.5px; color: var(--gris); overflow-wrap: anywhere; }
.frise-jour .aller { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--creme); display: grid; place-items: center; text-decoration: none; font-size: 19px; }
.frise-jour .maint { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--corail); }
.frise-jour .maint::after { content: ""; flex: 1; height: 2px; background: var(--corail); border-radius: 1px; }
.leg { white-space: nowrap; margin-left: 8px; }
.leg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
/* Agenda */
.semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.semaine .jour { background: var(--blanc); border: 1px solid var(--bord-clair); border-radius: 12px; padding: 10px; min-height: 170px; display: flex; flex-direction: column; gap: 6px; }
.semaine .jour.libre { background: transparent; border-style: dashed; }
.semaine .jour.auj { border: 2px solid var(--corail); }
.jour-tete { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; margin-bottom: 2px; }
.jour-tete .jn { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.jour-tete .jd { font-size: 26px; line-height: 1; }
.jour-tete .rien { margin-left: auto; font-family: var(--sans); font-size: 11px; color: var(--gris-clair); font-style: italic; }
.pastille { display: block; font-family: var(--sans); font-size: 12px; line-height: 1.3; padding: 6px 8px; border-radius: 7px; background: var(--creme); border-left: 4px solid var(--c); text-decoration: none; color: var(--encre); overflow-wrap: anywhere; }
.pastille b { font-weight: 600; color: var(--bleu); }
.pastille span { display: block; color: var(--gris); font-size: 11.5px; }
/* Cartes */
.carte-parcours { height: 330px; border-radius: 10px; overflow: hidden; background: var(--sol); margin: 8px 0 10px; }
.carte-lieux { height: 400px; border-radius: 10px; overflow: hidden; background: var(--sol); margin-top: 8px; }
.bloc-carte-lieux { margin-bottom: 20px; }
.carte-parcours .vide-liste, .carte-lieux .vide-liste { padding: 20px; }
.leaflet-container { font-family: var(--sans); }
.leaflet-tile-pane { filter: saturate(.55) sepia(.12); }
.leaflet-popup-content { font-size: 13px; line-height: 1.45; }
.leaflet-popup-content a { color: var(--bleu); }
.repere span { display: grid; place-items: center; border-radius: 50%; color: #fff; font-family: var(--sans); font-weight: 600; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.resume-parcours { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--gris); text-align: right; }
.rouge { color: #B42318; }
.etapes-parcours { list-style: none; margin: 0; padding: 0; }
.etapes-parcours li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 9px 0; border-top: 1px solid var(--filet); }
.etapes-parcours li:first-child { border-top: 0; }
.etapes-parcours .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--sans); font-size: 12.5px; font-weight: 600; }
.etapes-parcours .quoi { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.etapes-parcours .nom { font-size: 16px; line-height: 1.25; }
.etapes-parcours .adr { font-family: var(--sans); font-size: 12px; color: var(--gris); }
.etapes-parcours .hr { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--bleu); white-space: nowrap; font-variant-numeric: tabular-nums; }
.etapes-parcours .troncon { grid-column: 2 / 4; font-family: var(--sans); font-size: 12px; color: var(--gris); }
.etapes-parcours .troncon.rouge { color: #B42318; font-weight: 600; }
.boutons-carte { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
/* Gestes de la fiche */
.gestes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0; }
.geste { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 9px 14px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--bord-clair); color: var(--bleu-fonce); font-family: var(--sans); font-size: 13.5px; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer; }
.geste .ic { font-size: 22px; flex: none; }
.geste small { display: block; font-weight: 400; font-size: 12px; color: var(--gris); overflow-wrap: anywhere; }
.geste.plein { background: #2F5A3B; border-color: #2F5A3B; color: #fff; }
.geste.plein small { color: rgba(255,255,255,.82); }
.geste:hover { border-color: var(--bleu); }
.fiche-tete .meta .delai { font-size: 12px; }
/* Fenêtre (lecture d'un papier, choix d'une pièce) */
.voile { position: fixed; inset: 0; z-index: 50; background: rgba(35,38,46,.45); display: grid; place-items: center; padding: 16px; }
.fenetre { width: 620px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: var(--creme); border-radius: 14px; padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.fenetre h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.fenetre .boutons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.choix-papier { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.choix-papier label { cursor: pointer; }
.etat-lecture { font-family: var(--sans); font-size: 13px; color: var(--bleu); background: var(--bleu-pale); padding: 9px 12px; border-radius: 8px; margin: 10px 0; }
.resultat { display: grid; gap: 2px; }
.ligne-lue { display: grid; grid-template-columns: 26px 150px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--filet); }
.ligne-lue:first-child { border-top: 0; }
.ligne-lue .lab { margin: 0; }
.ligne-lue input:not([type=checkbox]), .ligne-lue select { width: 100%; min-height: 40px; border: 1px solid var(--bord); border-radius: 8px; padding: 7px 10px; background: var(--blanc); font-size: 16px; }
.ligne-lue.trouve input:not([type=checkbox]), .ligne-lue.trouve select { border-color: var(--bleu); background: #F7F9FC; }
.ligne-lue .garder input, .resultat .opt input { width: 18px; height: 18px; accent-color: var(--bleu); }
.resultat .opt { display: flex; gap: 8px; align-items: center; font-family: var(--sans); font-size: 13px; margin-top: 8px; }
.resultat details { margin-top: 10px; font-family: var(--sans); font-size: 12px; color: var(--gris); }
.resultat pre { white-space: pre-wrap; max-height: 200px; overflow: auto; background: var(--blanc); padding: 10px; border-radius: 8px; font-size: 11.5px; }
.choix-docs { display: grid; gap: 8px; margin-top: 12px; }
.choix-docs .btn { justify-content: flex-start; text-transform: none; letter-spacing: 0; font-size: 14px; height: auto; min-height: 44px; }
@media (max-width: 78rem) and (min-width: 60rem) { .semaine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 60rem) {
  .lat .item-archives { display: none; }
  .lat .item .nb { display: none; }
  .lignes2 { grid-template-columns: 1fr; }
  .lignes2 > .ligne:nth-child(2) { border-top: 1px solid var(--filet); }
  .lignes2 > .ligne:nth-child(odd) { border-right: 0; }
  .lat .item { padding: 4px 2px; font-size: 9.5px; letter-spacing: .02em; text-align: center; line-height: 1.15; }
  .semaine { grid-template-columns: 1fr; }
  .semaine .jour { min-height: 0; }
  .semaine .jour.libre { padding: 6px 10px; }
  .frise-jour { grid-template-columns: 52px minmax(0, 1fr); gap: 0 8px; }
  .gestes { grid-template-columns: 1fr 1fr; margin-top: 0; }
  .geste { min-height: 64px; padding: 8px 10px; font-size: 12.5px; }
  .ligne.avec-vignette { flex-wrap: wrap; }
  .ligne .cote { flex-direction: row; align-items: center; order: 5; width: 100%; padding-left: 56px; justify-content: flex-start; }
  .ligne .cote:empty { display: none; }
  .carte-parcours { height: 270px; }
  .carte-lieux { height: 320px; }
  .ligne-lue { grid-template-columns: 26px minmax(0, 1fr); }
  .ligne-lue > input:not([type=checkbox]), .ligne-lue > select { grid-column: 1 / 3; }
  .barre-jour h1 { font-size: 24px; }
}
/* Dans une carte étroite (deux tableaux côte à côte sur un écran moyen), le délai et la jauge passent sous le nom. */
.carte { container-type: inline-size; }
@container (max-width: 560px) {
  .ligne.avec-vignette { flex-wrap: wrap; row-gap: 4px; }
  .ligne.avec-vignette .txt { flex: 1 1 calc(100% - 150px); }
  .ligne .cote { flex-direction: row; align-items: center; order: 5; width: 100%; padding-left: 56px; justify-content: flex-start; gap: 10px; }
  .ligne .cote:empty { display: none; }
  .ligne.avec-vignette .chev { display: none; }
}
/* Écran moyen, barre latérale ouverte : les blocs à deux colonnes de clés-valeurs passent en une (sinon « Madame » s'écrit lettre par lettre). */
@media (min-width: 60rem) and (max-width: 78rem) { .ecran:not(.reduite) .bloc .kv2:not(.blocs) { grid-template-columns: 1fr; } }
/* La bulle « Informations funéraires » (24 septembre), compacte : une ligne de pastilles sur toute la largeur. */
.bulle-zone { grid-column: 1 / -1; }
/* Fiche Obsèques : la bulle à gauche, les gestes à droite, sur la même ligne (demande de Frédéric du 24 septembre). */
.bulle-gauche .bloc { height: 100%; }
.gestes-zone .gestes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.gestes-zone .geste { min-height: 44px; padding: 6px 10px; font-size: 12.5px; gap: 8px; }
.gestes-zone .geste .ic { font-size: 18px; }
.gestes-zone .geste small { font-size: 11px; }
.bloc.bulle-funeraire { padding: 8px 14px 8px; border-left-width: 5px; margin-bottom: 0; }
.bulle-funeraire h3 { font-size: 13px; font-family: var(--sans); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); margin-bottom: 5px; }
.bulle-funeraire.b-urg { border-color: #E3B3A6; border-left-color: #B42318; background: #FDF3F0; }
.bulle-funeraire.b-att { border-color: #EBD7A2; border-left-color: #D9A441; background: #FDF8EC; }
.bulle-funeraire.b-ok { border-left-color: #5E9B6F; }
.bulle-funeraire.b-vide { border-style: dashed; }
.bulle-titre { margin: 0; font-family: var(--sans); font-size: 12.5px; color: var(--gris); font-style: italic; }
.pastilles-fun { display: flex; flex-wrap: wrap; gap: 5px; }
.pf { font-family: var(--sans); font-size: 11.5px; padding: 3px 9px; border-radius: 999px; line-height: 1.35; }
.pf-urg { background: #B42318; color: #fff; font-weight: 600; }
.pf-att { background: #F8EBC9; color: #6F5312; font-weight: 600; }
.pf-info { background: var(--bleu-pale); color: #33405C; font-weight: 600; }
.pf-ok { background: #E3EEE5; color: #2F5A3B; }
.pf-vide { background: var(--sol); color: var(--gris); }
.suites-fun { margin: 6px 0 0; padding-left: 18px; font-family: var(--sans); font-size: 12.5px; color: var(--encre); }
.suites-fun li { margin: 1px 0; }
.etape .l a { color: inherit; } .etape .itin { text-decoration: none; margin-left: 2px; }
.ligne-lue .actuel { grid-column: 2 / -1; font-family: var(--sans); font-size: 11.5px; color: #8A3B2C; }
.ligne-lue.conflit input:not([type=checkbox]), .ligne-lue.conflit select { border-color: #D9A441; background: #FDF8EC; }
/* Bulle en plus gros (« fais plus gros la partie information funéraire », 24 septembre). */
.bloc.bulle-funeraire { padding: 12px 16px 12px; }
.bulle-funeraire h3 { font-size: 14px; margin-bottom: 8px; }
.bulle-etat { margin: 0 0 9px; font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--bleu-fonce); }
.b-urg .bulle-etat { color: #8A3B2C; } .b-ok .bulle-etat { color: #2F5A3B; } .b-att .bulle-etat { color: #6F5312; }
.bulle-etat small { font-weight: 400; font-size: 13px; color: var(--gris); }
.bulle-funeraire .pastilles-fun { gap: 7px; }
.bulle-funeraire .pf { font-size: 13.5px; padding: 5px 12px; }
.bulle-funeraire .pf-urg, .bulle-funeraire .pf-att { font-size: 14.5px; padding: 6px 13px; }
.bulle-funeraire .suites-fun { font-size: 14px; margin-top: 10px; }
.bulle-funeraire .bulle-titre { font-size: 14px; }
/* Autres contacts de la famille (24 septembre) : lecture comme l'identité du pouvoir, saisie ligne par ligne. */
.contacts { display: grid; gap: 6px; margin-top: 4px; }
.contact-ligne { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.3fr) 30px; gap: 6px; align-items: center; }
.contact-ligne input { min-height: 38px; padding: 6px 10px; border: 1px solid var(--bord); border-radius: 8px; background: var(--blanc); font-size: 15px; min-width: 0; }
.contact-ligne input:focus { outline: 2px solid var(--bleu); outline-offset: 0; }
.contact-ligne .retirer-contact { width: 30px; height: 30px; border: 1px solid var(--bord); border-radius: 6px; background: var(--blanc); color: var(--gris); cursor: pointer; font-size: 16px; padding: 0; }
.contact-ligne .retirer-contact:hover { color: var(--rouge); border-color: var(--rouge); }
.contact-lu { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--filet); }
.contact-lu:first-of-type { border-top: 0; }
.contact-lu .qui { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.contact-lu .lien { color: var(--gris); }
.contact-lu .coord { font-family: var(--sans); font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.contact-lu .coord a { color: var(--bleu); }
.contact-lu .appel { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #E3EEE5; text-decoration: none; font-size: 18px; }
@media (max-width: 60rem) {
  .contact-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; }
  .contact-ligne [name=c_nom] { grid-column: 1 / 3; }
  .contact-ligne [name=c_mail] { grid-column: 1 / 3; }
  .contact-ligne input { min-height: 44px; font-size: 16px; }
}
/* Fiche Obsèques (24 septembre) : Identité du défunt et Identité du pouvoir sur la même ligne, une colonne de libellés chacune. */
.identite-gauche .kv2:not(.blocs), .identite-droite .kv2:not(.blocs) { grid-template-columns: 1fr; }
.identite-gauche .kv2 > div + div .kv:first-child, .identite-droite .kv2 > div + div .kv:first-child { border-top: 1px solid var(--filet); }
.identite-gauche .bloc { height: calc(100% - 16px); }
/* La date des obsèques / de pose à côté du nom, sur les lignes des tableaux (24 septembre). */
.date-nom { display: inline-block; vertical-align: 2px; margin-left: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--bleu-pale); color: #33405C; white-space: nowrap; }
.date-nom.proche { background: #DB897B; color: #fff; }
.date-nom.afixer { background: #F9E3DE; color: #8A3B2C; font-weight: 500; font-style: italic; }
.date-nom.passee { background: var(--sol); color: var(--gris); }
/* « Déroulé et trajet » (24 septembre) : une bulle sur toute la largeur, la frise à gauche, la carte à droite. */
.bloc-parcours h3 { flex-wrap: wrap; }
.bloc-parcours h3 > span:last-child { margin-left: auto; }
.bloc-parcours .resume-parcours { flex: 1 1 auto; text-align: left; margin-left: 10px; }
.parcours-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 6px; }
.carte-cote .carte-parcours { height: 380px; margin: 0 0 8px; }
.frise-parcours { position: relative; }
.fr-jour { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--bleu); margin: 14px 0 6px 64px; }
.fr-jour:first-child { margin-top: 2px; }
.fr-jour.afixer { color: #8A3B2C; }
.fr-item { display: grid; grid-template-columns: 52px 30px minmax(0, 1fr); gap: 0 10px; align-items: start; position: relative; }
.fr-item::before { content: ""; position: absolute; left: 76px; top: 26px; bottom: -10px; width: 2px; background: var(--bord-clair); }
.fr-h { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--bleu); text-align: right; padding-top: 5px; font-variant-numeric: tabular-nums; }
.fr-point { width: 26px; height: 26px; border-radius: 50%; background: var(--bord); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 600; display: grid; place-items: center; position: relative; z-index: 1; margin-top: 2px; border: 2px solid var(--blanc); box-shadow: 0 0 0 1px var(--bord-clair); }
.fr-txt { padding: 4px 0 8px; min-width: 0; }
.fr-txt b { font-size: 17px; font-weight: 600; }
.fr-lieu { font-family: var(--sans); font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.fr-lieu a { color: var(--bleu); } .fr-lieu .itin { text-decoration: none; }
/* « Itinéraire Waze » en toutes lettres dans la frise (Frédéric, 26 septembre : plus de boussole) */
.fr-lieu .itin-waze { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: #33ccff; color: #0b2a3a; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.fr-item.passe .fr-h, .fr-item.passe .fr-txt b { color: var(--gris-clair); }
.fr-item.deces .fr-point { background: var(--encre); }
.fr-trajet { margin: -2px 0 6px 92px; font-family: var(--sans); font-size: 12px; color: var(--gris); }
.fr-trajet:not(.calcule) { display: none; }
.fr-trajet.calcule { padding: 3px 10px; background: var(--creme); border-radius: 999px; display: inline-block; }
.fr-trajet.rouge { background: #F9E3DE; color: #8A3B2C; font-weight: 600; }
@media (max-width: 60rem) {
  .parcours-grille { grid-template-columns: 1fr; }
  .carte-cote .carte-parcours { height: 260px; }
  .fr-item { grid-template-columns: 44px 28px minmax(0, 1fr); gap: 0 8px; }
  .fr-item::before { left: 65px; }
  .fr-jour { margin-left: 0; }
  .fr-trajet { margin-left: 80px; }
}
/* La date du bandeau est un bouton (24 septembre) : un clic pour changer la date ou le type d'obsèques. */
button.quand-centre { appearance: none; -webkit-appearance: none; background: none; border: 1px solid transparent; border-radius: 12px; font: inherit; cursor: pointer; padding: 6px 12px; }
button.quand-centre:hover { border-color: var(--bord); background: var(--blanc); }
.quand-centre .crayon { display: block; margin-top: 4px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-clair); }
button.quand-centre:hover .crayon { color: var(--bleu); }
.fenetre.petite { width: 460px; }
/* « Commencer avec un document » en tête du formulaire Obsèques (25 septembre). */
.depart-documents { border: 2px solid var(--bleu); background: var(--bleu-pale); }
.gros-docs { display: flex; flex-wrap: wrap; gap: 10px; }
.gros-docs .btn { height: 52px; font-size: 13.5px; padding: 0 22px; }
@media (max-width: 60rem) { .gros-docs .btn { flex: 1 1 100%; } }

/* Rappels sur le téléphone (26 septembre 2026) : le bouton Activé / Inactif de chaque nom, page Équipe */
.bascule { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 5px; border-radius: 999px; border: 1px solid var(--bord-clair); background: #ECEAE7; color: var(--gris); font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bascule .rond { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.bascule.on { background: #2F5A3B; border-color: #2F5A3B; color: #fff; flex-direction: row-reverse; padding: 0 5px 0 12px; }
.bascule:disabled { cursor: default; opacity: .75; }
.col-rappels .appareils { display: block; margin-top: 4px; font-family: var(--sans); font-size: 11.5px; color: var(--gris); }

/* Page Lieux en listes déroulantes (26 septembre 2026) : une ligne par type, un second niveau par culte */
.carte.repertoire { margin-bottom: 20px; overflow: hidden; }
.repertoire details.rubrique + details.rubrique { border-top: 1px solid var(--bord-clair); }
.repertoire summary { display: flex; align-items: center; gap: 10px; padding: 15px 18px; cursor: pointer; list-style: none; font-size: 18px; color: var(--bleu); }
.repertoire summary::-webkit-details-marker { display: none; }
.repertoire summary .titre-rubrique { flex: 1; }
.repertoire summary .n { font-family: var(--sans); font-size: 11.5px; font-weight: 600; background: #ECEAE7; color: var(--gris); border-radius: 999px; padding: 2px 10px; }
.repertoire summary .chev { transition: transform .15s; }
.repertoire details[open] > summary { background: #F6F4F1; }
.repertoire details[open] > summary .chev { transform: rotate(45deg); }
.repertoire details:not([open]) > .ligne, .repertoire details:not([open]) > details { display: none; }
.repertoire details.sous { border-top: 1px solid var(--bord-clair); }
.repertoire details.sous > summary { font-size: 16px; padding: 12px 18px 12px 34px; }
.repertoire details.sous[open] > summary { background: #FAF8F6; }
.repertoire details > .ligne { padding-left: 34px; }
.repertoire details.sous > .ligne { padding-left: 50px; }

/* Type d'obsèques (2 octobre 2026, proposition B validée par Frédéric) : crémation en lavande, couleur froide, jamais de
   rouge ni d'orange ; inhumation en terre. Étiquette rectangulaire bordée avec icône, distincte des pastilles rondes de statut. */
.type-obs { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: none; line-height: 1.2; border: 1.5px solid; border-radius: 6px; padding: 2px 8px 2px 6px; margin-right: 8px; vertical-align: 1px; white-space: nowrap; }
.type-obs svg { width: 13px; height: 13px; flex: none; }
.type-obs.t-cremation { background: #E8E6F4; color: #3F3A78; border-color: #6B64A8; }
.type-obs.t-inhumation { background: #EFE8DF; color: #5A4632; border-color: #957A5E; }
.type-obs.grand { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px 4px 10px; gap: 7px; margin: 0; border-radius: 8px; }
.type-obs.grand svg { width: 16px; height: 16px; }

/* Horloge analogique de la barre latérale (2 octobre 2026) : sous « Équipe », en bas, au-dessus du nom. Crème sur bleu
   foncé, trotteuse corail. Absente sur téléphone (la barre passe en bas), réduite quand la barre est réduite. */
.lat .horloge { margin: auto 0 0; padding: 18px 0 6px; display: flex; justify-content: center; }
.lat .horloge + .bas { margin-top: 14px; }
.lat .horloge svg { display: block; }
.horloge .h-cadran { fill: rgba(243,241,239,.06); stroke: rgba(243,241,239,.35); stroke-width: 1.5; }
.horloge .h-heure { stroke: var(--creme); stroke-width: 2.6; stroke-linecap: round; }
.horloge .h-min { stroke: rgba(243,241,239,.45); stroke-width: 1.2; stroke-linecap: round; }
.horloge .h-a-heure { stroke: var(--creme); stroke-width: 4.5; stroke-linecap: round; }
.horloge .h-a-min { stroke: var(--creme); stroke-width: 3; stroke-linecap: round; }
.horloge .h-a-sec { stroke: var(--corail); stroke-width: 1.5; stroke-linecap: round; }
.horloge .h-centre { fill: var(--corail); }
@media (max-height: 760px) { .lat .horloge { padding-top: 10px; } }
@media (max-height: 640px) and (min-width: 60.01rem) { .lat .horloge svg { display: none; } .lat .horloge { --taille: 80px; } }

/* Ari, la mascotte (2 octobre 2026) : à gauche de l'horloge, même hauteur ; « libre » = déplacée, flotte sur la page. */
.lat .horloge { --taille: 112px; align-items: center; justify-content: space-between; gap: 10px; padding-left: 4px; padding-right: 2px; }
.lat .horloge:not(:has(.ari:not(.libre))) { justify-content: center; }
.lat .horloge svg { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.lat .horloge svg.libre { position: fixed; z-index: 60; filter: drop-shadow(0 6px 14px rgba(35,38,46,.3)); }
.lat .horloge svg.libre .h-cadran { fill: var(--bleu-fonce); }
.lat .horloge svg.glisse { cursor: grabbing; }
.lat .horloge svg { width: var(--taille); height: var(--taille); }
.lat img.ari { width: calc(var(--taille, 112px) * .617); height: var(--taille, 112px); flex: none; margin: 0; display: block; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .15s ease; }
.lat img.ari:hover { transform: translateY(-2px); }
.lat img.ari.libre { position: fixed; z-index: 60; filter: drop-shadow(0 0 1px rgba(57,68,92,.55)) drop-shadow(0 6px 14px rgba(35,38,46,.28)); }
.lat img.ari.glisse { cursor: grabbing; transform: scale(1.06); transition: none; }
@media (max-height: 760px) { .lat .horloge { --taille: 96px; } }
.ecran.reduite .lat .horloge { --taille: 46px; flex-direction: column; justify-content: center; gap: 6px; padding-left: 0; padding-right: 0; }
@media (max-width: 60rem) {
  .lat .horloge { display: contents !important; }
  .lat .horloge svg { display: none; }
  .lat img.ari, .lat img.ari.libre { position: fixed; z-index: 60; --taille: 96px; filter: drop-shadow(0 0 1px rgba(57,68,92,.55)) drop-shadow(0 6px 14px rgba(35,38,46,.28)); }
  .lat img.ari:not(.libre) { right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ---------- Compte à rebours avant la mise en bière (version 68, 3 octobre 2026) ---------- */
/* En haut de la fiche Obsèques en cours : bande bleue, quatre cases ; corail sous 24 h ; pointillés si l'heure manque. */
.rebours { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: var(--bleu-fonce); color: var(--creme); border-radius: 12px; padding: 14px 22px; margin-bottom: 20px; }
.rebours .quoi { display: grid; gap: 2px; min-width: 0; }
.rebours .lab { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,241,239,.75); }
.rebours .quand { font-size: 19px; }
.rebours .ou { font-family: var(--sans); font-size: 12.5px; color: rgba(243,241,239,.75); }
.rebours .chiffres { display: flex; gap: 8px; margin-left: auto; align-items: flex-start; }
.rebours .case { display: grid; justify-items: center; gap: 3px; }
.rebours .case b { display: block; min-width: 62px; text-align: center; font-family: var(--sans); font-weight: 600; font-size: 36px; line-height: 1; padding: 10px 8px 9px; border-radius: 9px; background: #2C3548; color: var(--creme); font-variant-numeric: tabular-nums; border: 1px solid rgba(243,241,239,.12); }
.rebours .case span { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,241,239,.7); }
.rebours .sep { font-family: var(--sans); font-size: 30px; font-weight: 600; line-height: 56px; color: rgba(243,241,239,.4); }
.rebours.proche .case b { background: var(--corail); color: #fff; border-color: transparent; }
.rebours.afixer { background: var(--blanc); color: var(--encre); border: 1px dashed var(--corail); padding: 10px 18px; }
.rebours.afixer .lab { color: #8A3B2C; }
.rebours.afixer .quand { font-size: 15px; color: var(--gris); }
/* Sur la ligne du tableau de bord */
.rebours-mini { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 3px 9px 3px 7px; border-radius: 6px; background: var(--bleu-fonce); color: var(--creme); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rebours-mini svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .8; }
.rebours-mini.proche { background: var(--corail); color: #fff; }
.rebours-mini.afixer { background: var(--blanc); color: #8A3B2C; border: 1px dashed var(--corail); font-weight: 500; }
/* « Obsèques en cours » (version 76, 8 octobre 2026) : à l'heure de la mise en bière, vert fluo qui respire, jusqu'à minuit. */
.rebours.encours { background: #2A9A52; color: #fff; }
.rebours.encours .lab, .rebours.encours .ou { color: rgba(255,255,255,.92); }
.badge-encours { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-weight: 700; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; color: #0B3A1B; background: #4FE584; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 0 18px rgba(79,229,132,.55); padding: 14px 24px; border-radius: 12px; animation: respire 2.2s ease-in-out infinite; }
.badge-encours .point, .rebours-mini.encours .point { width: 14px; height: 14px; border-radius: 50%; background: #0B3A1B; flex: none; animation: halo 2.2s ease-out infinite; }
.rebours-mini.encours { background: #4FE584; color: #0B3A1B; box-shadow: 0 0 10px rgba(79,229,132,.55); animation: respire 2.2s ease-in-out infinite; }
.rebours-mini.encours .point { width: 8px; height: 8px; animation: none; }
@keyframes respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(11,58,27,.55); } 70% { box-shadow: 0 0 0 10px rgba(11,58,27,0); } 100% { box-shadow: 0 0 0 0 rgba(11,58,27,0); } }
@media (prefers-reduced-motion: reduce) { .badge-encours, .rebours-mini.encours { animation-duration: 4s; } }
@media (max-width: 60rem) {
  .rebours { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .rebours .chiffres { margin-left: 0; justify-content: center; gap: 5px; }
  .rebours .case b { min-width: 52px; font-size: 28px; padding: 8px 6px 7px; }
  .rebours .sep { font-size: 22px; line-height: 46px; }
  .badge-encours { margin-left: 0; justify-content: center; font-size: 20px; padding: 12px 16px; }
}

/* Suivi des paiements (12 octobre 2026) : encart en tête des fiches « Dossiers en paiement », bordé de bleu. */
.bloc.paiements { border: 2px solid var(--bleu); }
.paiements .modif { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.paiements .lab { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-bottom: 4px; }
.paie-comptes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 8px; }
.paie-compte { background: var(--creme); border-radius: 9px; padding: 8px 12px; min-width: 0; }
.paie-compte b { display: block; font-size: 24px; font-weight: 500; color: var(--bleu-fonce); font-variant-numeric: tabular-nums; line-height: 1.2; }
.paie-compte.reste b { color: #8A3B2C; }
.paie-compte.reste.solde b { color: #2F5A3B; }
.paie-barre { height: 7px; border-radius: 4px; background: var(--bord-clair); overflow: hidden; margin-bottom: 10px; }
.paie-barre i { display: block; height: 100%; background: #2F5A3B; border-radius: 4px; }
.paie-alertes { display: grid; gap: 6px; margin-bottom: 10px; }
.paie-alerte { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; border-radius: 9px; padding: 8px 12px; font-family: var(--sans); font-size: 13px; }
.paie-alerte > span { flex: 1 1 220px; min-width: 0; }
.paie-alerte.retard { background: #F9E3DE; color: #8A3B2C; }
.paie-alerte.retard .modif { color: #8A3B2C; }
.paie-alerte.attente { background: #F8EBC9; color: #6F5312; }
.paie-alerte.solde { background: #E3EEE5; color: #2F5A3B; }
.paie-alerte.propose { background: var(--bleu-pale); color: var(--bleu-fonce); margin: 8px 0; }
.paie-oui-non { display: flex; gap: 8px; margin-left: auto; }
.paie-payeurs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; font-family: var(--sans); font-size: 12px; }
.paie-payeurs span { border: 1px solid var(--bord); border-radius: 8px; padding: 4px 9px; }
.paie-payeurs b { color: var(--bleu-fonce); }
.paie-ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--filet); align-items: start; }
.paie-ligne:first-child { border-top: 0; }
.paie-ligne .quand { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--bleu-fonce); font-variant-numeric: tabular-nums; }
.paie-ligne .quand small { display: block; font-weight: 400; color: var(--gris-clair); }
.paie-ligne .quoi { font-size: 15.5px; min-width: 0; }
.paie-ligne .quoi .pill { margin-right: 4px; font-size: 10.5px; padding: 2px 8px; vertical-align: 2px; }
.paie-ligne .note-paie { display: block; font-size: 14px; color: var(--gris); white-space: pre-wrap; }
.paie-ligne .montant { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paie-ligne .montant.plus { color: #2F5A3B; }
.paie-ligne.nouveau { animation: paie-eclat 1.8s ease-out 1; border-radius: 8px; }
@keyframes paie-eclat { 0% { background: var(--bleu-pale); } 100% { background: transparent; } }
.retirer-paie { width: 26px; height: 26px; border: 1px solid var(--bord); border-radius: 6px; background: var(--blanc); color: var(--gris); cursor: pointer; font-size: 15px; padding: 0; }
.retirer-paie:hover { color: var(--rouge); border-color: var(--rouge); }
.paie-retirer { margin-top: 6px; font-family: var(--sans); font-size: 13px; color: var(--rouge); }
.paie-retirer .modif { color: var(--rouge); }
.pill.p-gris { background: var(--filet); color: var(--gris); }
.paie-form { background: var(--creme); border-radius: 10px; padding: 12px 14px; margin: 8px 0 12px; display: grid; gap: 10px; font-family: var(--sans); font-size: 13px; }
.paie-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.paie-puce { font-family: var(--sans); font-size: 13px; border: 1px solid var(--bord); background: var(--blanc); color: var(--encre); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.paie-puce[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.paie-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.paie-form input, .paie-form select, .paie-form textarea { width: 100%; min-height: 38px; font-family: var(--sans); font-size: 15px; border: 1px solid var(--bord); border-radius: 8px; padding: 6px 10px; background: var(--blanc); color: var(--encre); }
.paie-form textarea { min-height: 60px; resize: vertical; font-family: var(--serif); font-size: 16px; }
.paie-form .boutons { display: flex; gap: 10px; justify-content: flex-end; }
.ligne .paie-det { color: var(--bleu); font-family: var(--sans); font-size: 12px; }
.relance-ligne { font-family: var(--sans); font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 2px 8px; background: #F9E3DE; color: #8A3B2C; white-space: nowrap; }
@media (max-width: 60rem) {
  .paie-comptes { grid-template-columns: 1fr 1fr; }
  .paie-compte.reste { grid-column: 1 / -1; }
  .paie-ligne { grid-template-columns: 74px minmax(0, 1fr); }
  .paie-ligne .montant { grid-column: 2; }
  .paie-form input, .paie-form select { min-height: 44px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .paie-ligne.nouveau { animation: none; } }

/* ---------- Qui a modifié quoi (16 octobre 2026, carnet.js) ---------- */
.signe-bloc { margin: 10px 0 0; padding-top: 7px; border-top: 1px solid var(--filet); font-family: var(--sans); font-size: 11.5px; color: var(--gris); }
.signe-bloc b { font-weight: 600; color: var(--bleu-fonce); }
#presence-zone:empty { display: none; }
#presence-zone .bandeau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bandeau.presence { background: #F8EBC9; color: #6F5312; }
.bandeau.presence .point { width: 9px; height: 9px; border-radius: 50%; background: #D9A21B; flex: none; animation: presence-pouls 1.6s ease-in-out infinite; }
.bandeau.presence.conflit { background: #F9E3DE; color: #8A3B2C; }
.bandeau.presence.conflit .point { background: var(--corail); }
.bandeau.geste-autrui { background: var(--bleu-pale); color: var(--bleu-fonce); }
.bandeau.geste-autrui span { flex: 1 1 260px; }
@keyframes presence-pouls { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .bandeau.presence .point { animation: none; } }
.fenetre.historique-fiche { width: 760px; }
.historique-fiche .h-select { font-family: var(--sans); font-size: 12px; border: 1px solid var(--bord); border-radius: 999px; padding: 5px 10px; background: var(--blanc); }
.historique-fiche .h-compte { font-family: var(--sans); font-size: 12px; color: var(--gris); margin-left: auto; align-self: center; }
.historique-fiche .cx { align-items: start; grid-template-columns: 56px 32px minmax(0, 1fr); }
.historique-fiche .cx .h { padding-top: 6px; }
.historique-fiche .cx .q > div { font-size: 15.5px; overflow-wrap: anywhere; }
.historique-fiche .cx .q small b { color: var(--encre); font-weight: 600; }
.g-avant { color: var(--gris); text-decoration: line-through; text-decoration-color: var(--corail); }
.g-apres { font-weight: 500; }
.g-fleche { color: var(--gris-clair); font-family: var(--sans); padding: 0 5px; }
.g-vide { color: var(--gris-clair); }
.ligne .det.dernier-geste { font-size: 12px; color: var(--gris-clair); }
@media (max-width: 60rem) { .historique-fiche .cx { grid-template-columns: 46px minmax(0, 1fr); } }

/* ---------- Onglets de la fiche Obsèques : « Fiche administrative » | « Cérémonie » (31 octobre 2026) ---------- */
#panneau-admin[hidden], #panneau-ceremonie[hidden], .panneau-ceremonie [hidden] { display: none !important; }
.onglets-fiche { display: flex; gap: 6px; margin: 18px 0 18px; padding-left: 8px; border-bottom: 1px solid var(--bord); }
.onglet-fiche { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--bord); border-bottom: 0; border-radius: 11px 11px 0 0;
  padding: 11px 22px 10px; margin-bottom: -1px; background: var(--sol); color: var(--gris); cursor: pointer; }
.onglet-fiche:hover { color: var(--bleu-fonce); }
.onglet-fiche[aria-selected="true"] { background: var(--creme); color: var(--bleu-fonce); box-shadow: inset 0 3px 0 var(--corail); padding-bottom: 11px; }
.onglet-fiche:focus-visible { outline: 2px solid var(--corail); outline-offset: 2px; }
.panneau-ceremonie .bloc h3 > span:first-child { display: inline-flex; align-items: baseline; gap: 8px; }
.pill-cer { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .04em; border-radius: 999px; padding: 2px 9px; background: var(--bleu-pale); color: var(--bleu-fonce); }
.cer-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 22px; }
.cer-info { display: grid; gap: 1px; min-width: 0; }
.cer-info .k { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.cer-info .v { font-size: 16px; overflow-wrap: anywhere; }
.cer-info .v.vide { color: var(--gris-clair); font-style: italic; }
.cer-info .heure-lieu { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--bleu); white-space: nowrap; }
.type-lieu-cer { font-family: var(--sans); font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 1px 8px; background: var(--bleu-pale); color: var(--bleu-fonce); }
.minutage-cer { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; background: var(--bleu-fonce); color: var(--creme); border-radius: 10px; padding: 7px 14px; margin: 0 0 16px; font-family: var(--sans); }
.minutage-cer span { display: inline-flex; gap: 6px; align-items: baseline; }
.minutage-cer small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.minutage-cer b { font-family: var(--serif); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.minutage-cer .marge b { color: #BFE3C7; }
.minutage-cer .trop b { color: #F4B9AE; }
.minutage-cer .detail { font-size: 11px; opacity: .75; margin-left: auto; }
.notes-cer { width: 100%; min-height: 280px; border: 1px solid var(--bord); border-radius: 9px; padding: 10px 12px; background: var(--blanc); font-size: 16px; line-height: 1.5; resize: vertical; }
.notes-cer:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }
.notes-cer[readonly] { background: var(--creme); }
#bloc-notes-ceremonie .boutons { display: flex; justify-content: flex-end; margin-top: 8px; }
.etat-notes-cer { font-family: var(--sans); font-size: 11.5px; font-weight: 400; color: var(--gris); }
.cer-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
.cer-parole { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--filet); }
.cer-parole:first-of-type { border-top: 0; }
.cer-parole .rang { width: 24px; height: 24px; border-radius: 50%; background: var(--bleu-pale); color: var(--bleu-fonce); font-family: var(--sans); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.cer-parole .qui { min-width: 0; overflow-wrap: anywhere; }
.cer-parole .qui small, .cer-musique .quoi small { display: block; font-family: var(--sans); font-size: 12px; color: var(--gris); }
.cer-parole .duree, .cer-musique .duree { font-family: var(--sans); font-size: 13px; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cer-musique { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--filet); }
.cer-musique:first-of-type { border-top: 0; }
.cer-musique .quoi { min-width: 0; overflow-wrap: anywhere; }
.cer-musique .moment { display: block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8C6A4F; }
.cer-musique .vide { color: var(--gris-clair); }
.cer-musique .prete { font-family: var(--sans); font-size: 12px; color: var(--gris); display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.cer-musique .prete input { width: 17px; height: 17px; accent-color: #2F5A3B; }
.cer-type { display: flex; gap: 18px; margin: 4px 0 12px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--bleu-fonce); }
.cer-type label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.cer-type input { width: 17px; height: 17px; accent-color: var(--bleu); }
.cer-lignes { display: grid; gap: 6px; }
.cer-ligne { display: grid; gap: 6px; align-items: center; }
.parole-ligne { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .6fr) 30px; }
.musique-ligne { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, .6fr) 30px; }
.lieu-ligne { grid-template-columns: minmax(0, .8fr) minmax(0, 1.8fr) minmax(0, .6fr) 30px; }
.cer-ligne input:not([type="hidden"]), .cer-ligne select { min-height: 38px; padding: 6px 10px; border: 1px solid var(--bord); border-radius: 8px; background: var(--blanc); font-size: 15px; min-width: 0; width: 100%; }
.cer-ligne input:focus, .cer-ligne select:focus { outline: 2px solid var(--bleu); outline-offset: 0; }
.cer-ligne .moment-fixe { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8C6A4F; }
.cer-ligne .retirer-contact { width: 30px; height: 30px; border: 1px solid var(--bord); border-radius: 6px; background: var(--blanc); color: var(--gris); cursor: pointer; font-size: 16px; padding: 0; }
.cer-ligne .retirer-contact:hover { color: var(--rouge); border-color: var(--rouge); }
@media (max-width: 60rem) {
  .onglets-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding-left: 0; margin: 12px 0 14px; }
  .onglet-fiche { padding: 11px 6px 10px; font-size: 13px; text-align: center; }
  .cer-deux { grid-template-columns: minmax(0, 1fr); }
  .minutage-cer .detail { margin-left: 0; }
  .parole-ligne, .musique-ligne, .lieu-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px 0; border-top: 1px solid var(--filet); }
  .musique-ligne .moment-fixe { grid-column: 1 / -1; }
}

/* Case à cocher dans un formulaire de fiche (« Zinc » du bloc Cercueil, 2 novembre) */
.champ .case-champ { display: flex; align-items: center; gap: 10px; min-height: 42px; font-size: 16px; cursor: pointer; }
.champ .case-champ input { width: 22px; height: 22px; margin: 0; accent-color: var(--bleu); flex: none; }
.oui-alerte { color: #C0392B; font-weight: 700; }   /* « ⚠️ Oui » du Zinc en lecture */