/* =====================================================================================================================
   Assistant immobilier : la feuille de style commune. Polices du système, aucune requête externe, aucun outil de build.
   Le système (jetons, composants, classes) est décrit dans docs/front-design.md ; une page peut ajouter sa feuille
   (static/<page>.css, bloc « tete » de base.html) mais n'utilise que ces jetons.
   1 Jetons · 2 Base · 3 Typographie · 4 Boutons · 5 Champs · 6 Repliables · 7 Coque · 8 En-tête de page · 9 Panneaux
   10 Tuiles · 11 Listes · 12 Frises (agenda, jalons) · 13 Fiche · 14 Pastilles · 15 Tableaux · 16 Messages
   17 Onglets · 18 Aujourd'hui · 19 Connexion, erreur · 20 Documents · 21 Téléphone · 22 Thème sombre · 23 Mouvement
   ===================================================================================================================== */

/* 1. Jetons ----------------------------------------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue",
            Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Neutres, teinte chaude (sable). --doux reste lisible (AA) sur toutes les surfaces ; --bord-champ : 3:1 (WCAG 1.4.11). */
  --fond: #f5f3ef; --surface: #fff; --surface-2: #faf9f6; --surface-3: #efece6;
  --bord: #e5e1d9; --bord-fort: #d3cdc3; --bord-champ: #948d81;
  --texte: #1f1c18; --texte-2: #4b463f; --doux: #6b655c; --pale: #857e73;

  /* Marque : une seule couleur d'accent, sarcelle profonde. Boutons principaux, rubrique active, « à valider ». */
  --accent: #0f6b66; --accent-fort: #0b5551; --accent-texte: #0d625d; --accent-pale: #e6f2f0; --accent-bord: #b5d8d3;
  --sur-accent: #fff;

  /* Sens : toujours accompagnés d'un texte ou d'une icône, jamais la couleur seule. */
  --ok: #26703a; --ok-fond: #eaf5ec; --ok-bord: #bcdfc4; --ok-vif: #3b8a3e;
  --attention: #8a5300; --attention-fond: #fdf5e4; --attention-bord: #efd59b; --attention-vif: #d68a12;
  --danger: #b3261e; --danger-fond: #fdf0ee; --danger-bord: #f2c4bd; --sur-danger: #fff;
  --tiers: #4f43b0; --tiers-fond: #f1effc; --tiers-bord: #d4cff3; --tiers-vif: #6b5fd0;
  --sensible: #7b2d57; --sensible-fond: #f9eef4; --sensible-bord: #ebc8da;

  /* Phases de la vente (pastilles statut-*, barre des biens) : la sarcelle fonce à mesure que la vente avance. */
  --phase-estimation: #9fcdc6; --phase-mandat: #3f9a90; --phase-vente: #0f6b66; --phase-clos: #b9b2a6;
  --phase-mandat-fond: #e3f1ee; --phase-mandat-texte: #17524d; --phase-vente-fond: #cde6e1; --phase-vente-texte: #0b4743;

  /* Typographie : tailles ; interlignage 1.5 pour le texte, 1.2 pour les titres et les nombres. */
  --t-xs: 12px; --t-s: 13px; --t-m: 14px; --t-l: 16px; --t-xl: 20px; --t-2xl: 26px; --t-3xl: 30px;
  /* Espacements : grille de 4 px. */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px;
  --r-1: 6px; --r-2: 8px; --r-3: 12px; --r-4: 14px; --r-rond: 999px;
  --ombre-1: 0 1px 2px rgb(31 28 24 / 5%);
  --ombre-2: 0 1px 2px rgb(31 28 24 / 4%), 0 8px 20px -8px rgb(31 28 24 / 14%);
  --ombre-3: 0 18px 40px -12px rgb(31 28 24 / 30%);
  --anneau: 0 0 0 3px rgb(15 107 102 / 22%);
  --voile: rgb(31 28 24 / 35%);
  --barre: 248px; --haut: 56px;

  /* Icônes des messages et pastilles (masques : elles prennent la couleur du texte). */
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
  --i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.2 2.4 2.4 4.6-5'/%3E%3C/svg%3E");
  --i-alerte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.6 2.9 17.5A2 2 0 0 0 4.6 20.5h14.8a2 2 0 0 0 1.7-3L13.7 4.6a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5V14M12 17v.1'/%3E%3C/svg%3E");
  --i-cadenas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b655c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* 2. Base ------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: 400 var(--t-m)/1.5 var(--police); color: var(--texte); background: var(--fond);
       -webkit-font-smoothing: antialiased; }
img, svg, iframe, audio, video { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-bord); }
.icone { width: 16px; height: 16px; flex: none; }

/* 3. Typographie ------------------------------------------------------------------------------------------------------ */
h1 { margin: 0; font-size: var(--t-2xl); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
h1 small, h2 small { margin-left: 8px; color: var(--doux); font-size: var(--t-l); font-weight: 400; letter-spacing: 0;
                     font-variant-numeric: tabular-nums; }
h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 var(--e-3); font-size: var(--t-l);
     line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }
h2 small { margin-left: 0; font-size: var(--t-m); }
h3, legend { color: var(--doux); font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
h3 { margin: var(--e-5) 0 var(--e-2); }
p { margin: 0 0 10px; }
a { color: var(--accent-texte); text-decoration: underline; text-decoration-color: var(--accent-bord);
    text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
small, .aide, .vide { color: var(--doux); }
.aide { font-size: var(--t-s); }
.vide { margin: 0; }
.retard { color: var(--danger); font-weight: 550; }
strong { font-weight: 650; }
code { padding: 1px 5px; border-radius: 4px; background: var(--surface-3); font: 12.5px var(--mono); }
.texte { white-space: pre-wrap; overflow-wrap: anywhere; }
pre.texte { margin: 0 0 var(--e-4); padding: 14px 16px; border: 1px solid var(--bord); border-radius: var(--r-3);
            background: var(--surface); font: var(--t-m)/1.6 var(--police); }
.nombre, td, dd, time { font-variant-numeric: tabular-nums; }
.surtitre { margin: 0 0 6px; color: var(--accent-texte); font-size: var(--t-xs); font-weight: 650; letter-spacing: .08em;
            text-transform: uppercase; }

/* 4. Boutons : sarcelle pleine = l'action principale du bloc (une seule) ; .secondaire = contour ; .discret = sans
   cadre ; .danger = destructif ; .lien = bouton qui se lit comme un lien ; .petit = compact. aria-busy : envoi en cours
   (static/envoi.js), .htmx-request : requête htmx. Le survol ne s'applique pas à un bouton désactivé (:where). */
button, .bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px;
  padding: 7px 16px; border: 1px solid transparent; border-radius: var(--r-2); background: var(--accent);
  color: var(--sur-accent); font: 600 var(--t-m)/1.2 var(--police); text-align: center; text-decoration: none;
  cursor: pointer; box-shadow: var(--ombre-1); transition: background-color .15s, border-color .15s, color .15s; }
button:where(:not(:disabled)):hover, .bouton:hover { background: var(--accent-fort); color: var(--sur-accent); }
.secondaire { border-color: var(--bord-fort); background: var(--surface); color: var(--texte); }
.secondaire:where(:not(:disabled)):hover, .bouton.secondaire:hover { border-color: var(--bord-champ);
  background: var(--surface-2); color: var(--texte); }
.discret { border-color: transparent; background: transparent; color: var(--texte-2); box-shadow: none; }
.discret:where(:not(:disabled)):hover, .bouton.discret:hover { background: var(--surface-3); color: var(--texte); }
.danger { background: var(--danger); color: var(--sur-danger); }
.danger:where(:not(:disabled)):hover, .bouton.danger:hover { background: var(--danger); color: var(--sur-danger);
  filter: brightness(.9); }
.secondaire.danger { border-color: var(--danger-bord); background: var(--surface); color: var(--danger); }
.secondaire.danger:where(:not(:disabled)):hover { background: var(--danger-fond); color: var(--danger); filter: none; }
button.lien { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent-texte);
  font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent-bord); text-underline-offset: 3px; }
button.lien:where(:not(:disabled)):hover { background: none; color: var(--accent-fort); text-decoration-color: currentColor; }
.petit { min-height: 30px; padding: 4px 12px; font-size: var(--t-s); }
button .icone, .bouton .icone { width: 16px; height: 16px; margin-left: -2px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button[aria-busy="true"], .htmx-request > button, button.htmx-request { opacity: .8; cursor: progress; }
button[aria-busy="true"]::before, .htmx-request > button::before, button.htmx-request::before { content: ""; width: 14px;
  height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: tourne .7s linear infinite; }
@keyframes tourne { to { transform: rotate(1turn); } }
.boutons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: var(--e-4) 0; }
td .boutons { margin: 0; }
form.enligne { display: inline; }

/* 5. Champs ----------------------------------------------------------------------------------------------------------- */
label { display: block; margin: 0 0 var(--e-4); color: var(--texte-2); font-size: var(--t-s); font-weight: 550; }
label.case { display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 8px 0; color: var(--texte);
             font-size: var(--t-m); font-weight: 400; }
input, select, textarea { font-family: inherit; font-size: var(--t-m); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea {
  display: block; width: 100%; min-height: 38px; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--bord-champ);
  border-radius: var(--r-2); background: var(--surface); color: var(--texte); font-weight: 400; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: var(--anneau); outline: none; }
select:not([multiple]) { appearance: none; padding-right: 36px;
  background: var(--surface) var(--chevron) no-repeat right 12px center / 14px; }
select[multiple] { min-height: 7rem; }
textarea { min-height: 5rem; resize: vertical; }
textarea.code { font: 13px/1.55 var(--mono); }
input::placeholder, textarea::placeholder { color: var(--pale); }
input[type=file] { display: block; max-width: 100%; margin-top: 6px; color: var(--texte-2); font-size: var(--t-s); }
input[type=file]::file-selector-button { margin-right: 12px; padding: 7px 12px; border: 1px solid var(--bord-fort);
  border-radius: var(--r-2); background: var(--surface); color: var(--texte); font: 600 var(--t-s) var(--police);
  cursor: pointer; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
fieldset { min-width: 0; margin: 0 0 var(--e-4); padding: 14px 16px 4px; border: 1px solid var(--bord);
           border-radius: var(--r-3); }
legend { padding: 0 6px; }
.nouveau { margin-top: var(--e-2); padding-top: var(--e-3); border-top: 1px dashed var(--bord-fort); }
.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 var(--e-5); }
.filtres label { flex: 1 1 11rem; margin: 0; }
.ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-2); }
.ligne label { flex: 1 1 14rem; margin: 0; }
.ligne > select { flex: 1 1 12rem; width: auto; min-width: 0; margin-top: 0; }
.ligne > form.ligne { flex: 1 1 26rem; min-width: 0; }
.boutons > form.ligne { flex-wrap: nowrap; align-items: center; }
.boutons > form.ligne > select { flex: 0 1 14rem; }
@media (min-width: 640px) {
  form.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e-5); }
  form.grille .large { grid-column: 1 / -1; }
  form.grille > button { align-self: end; justify-self: start; margin-bottom: var(--e-4); }
}

/* 6. Repliables : details = bloc à ouvrir ; details.ajout = un bouton en pointillés qui ouvre un petit formulaire ;
   details.repli = une rubrique secondaire, fermée par défaut. */
details { margin: 0 0 var(--e-3); border: 1px solid var(--bord); border-radius: var(--r-3); background: var(--surface); }
summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: inherit;
          font-weight: 600; cursor: pointer; list-style: none; }
summary:hover { background: var(--surface-2); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 3px auto;
                 border-right: 1.5px solid var(--doux); border-bottom: 1.5px solid var(--doux); transform: rotate(45deg); }
details[open] > summary { border-bottom: 1px solid var(--bord); border-radius: var(--r-3) var(--r-3) 0 0; }
details[open] > summary::after { margin-bottom: -3px; transform: rotate(-135deg); }
details > :not(summary) { margin: var(--e-4); }
details.journal { margin-top: var(--e-2); }
.liste + details { margin-top: var(--e-4); }

details.ajout { margin: var(--e-4) 0 0; border: 0; background: none; }
details.ajout > summary { display: inline-flex; min-height: 36px; padding: 6px 14px 6px 10px;
  border: 1px dashed var(--bord-champ); border-radius: var(--r-2); color: var(--texte-2); font-weight: 550; }
details.ajout > summary::after { display: none; }
details.ajout > summary:hover, details.ajout[open] > summary { border-color: var(--accent); background: var(--accent-pale);
  color: var(--accent-texte); }
details.ajout[open] > summary { border-radius: var(--r-2); border-style: solid; }
details.ajout > form { margin: var(--e-3) 0 0; padding: var(--e-4); border: 1px solid var(--bord);
  border-radius: var(--r-3); background: var(--surface-2); }

details.repli { margin: 0 0 var(--e-3); border-radius: var(--r-4); box-shadow: var(--ombre-1); }
details.repli > summary { min-height: 52px; padding: 12px 20px; font-size: var(--t-l); font-weight: 650; }
details.repli[open] > summary { border-radius: var(--r-4) var(--r-4) 0 0; }
details.repli > .repli-corps { margin: 0; padding: var(--e-4) var(--e-5) var(--e-5); }
.repli-corps > :last-child { margin-bottom: 0; }

/* 7. Coque : barre latérale pleine hauteur (le fond s'étire avec la page, le contenu reste collé en haut), rubriques
   groupées ; sur le téléphone, barre du haut et tiroir (§ 21). */
.app { display: grid; grid-template-columns: var(--barre) minmax(0, 1fr); min-height: 100vh; }
.barre { background: var(--surface); border-right: 1px solid var(--bord); }
.barre-dedans { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh;
                padding: var(--e-5) var(--e-3) var(--e-4); overflow-y: auto; }
.marque { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 8px var(--e-5); color: var(--texte);
          font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; text-decoration: none; }
.logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px;
        background: var(--accent); color: var(--sur-accent); }
.logo .icone { width: 20px; height: 20px; stroke-width: 2; }
.tiroir { display: flex; flex: 1; flex-direction: column; }
.tiroir nav { display: flex; flex-direction: column; gap: 2px; }
.nav-groupe { margin: var(--e-5) 0 var(--e-1); padding: 0 10px; color: var(--doux); font-size: 11px; font-weight: 650;
              letter-spacing: .08em; text-transform: uppercase; }
.tiroir nav a, .sortie button { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%;
  min-height: 38px; padding: 6px 10px; border: 0; border-radius: var(--r-2); background: none; box-shadow: none;
  color: var(--texte-2); font-weight: 500; text-decoration: none; }
.tiroir nav .icone, .sortie .icone { width: 18px; height: 18px; margin: 0; color: var(--doux); }
.tiroir nav a:hover, .sortie button:where(:not(:disabled)):hover { background: var(--surface-3); color: var(--texte); }
.tiroir nav a[aria-current] { background: var(--accent-pale); color: var(--accent-fort); font-weight: 650; }
.tiroir nav a[aria-current] .icone { color: var(--accent); }
.sortie { margin-top: auto; padding-top: var(--e-3); border-top: 1px solid var(--bord); }
.masque, .bouton-menu, .voile { display: none; }
main { width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--e-8) var(--e-10) 64px; overflow-wrap: break-word; }
main.seul { display: grid; place-items: center; max-width: none; min-height: 100vh; padding: var(--e-6) var(--e-4); }

/* 8. En-tête de page : fil d'Ariane, titre (+ <small> pour le compte ou la date), sous-titre, boutons à droite. */
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--e-2); color: var(--doux);
       font-size: var(--t-s); }
.fil a { color: var(--doux); text-decoration: none; }
.fil a:hover { color: var(--accent-texte); text-decoration: underline; }
.entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
          margin: 0 0 var(--e-6); }
.entete .boutons { margin: 0; }
.sous-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: var(--e-2) 0 0; color: var(--doux); }

/* 9. Panneaux : .panneau = carte blanche ; .panneau-tete = titre + lien à droite ; .compte = nombre (seulement s'il
   n'est pas nul) ; .calme = rubrique vide, tenue sur une ligne ; .colonnes = deux colonnes sur grand écran. */
.panneau { margin: 0 0 var(--e-4); padding: var(--e-5) 22px; border: 1px solid var(--bord); border-radius: var(--r-4);
           background: var(--surface); box-shadow: var(--ombre-1); }
.panneau > :last-child { margin-bottom: 0; }
.panneau-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 var(--e-3); }
.panneau-tete h2 { margin: 0; }
.lien-tete { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-size: var(--t-s);
             font-weight: 600; text-decoration: none; }
.lien-tete:hover { text-decoration: underline; }
.lien-tete .icone { width: 14px; height: 14px; }
.compte { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px;
          border-radius: var(--r-rond); background: var(--surface-3); color: var(--texte-2); font-size: var(--t-xs);
          font-weight: 700; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.compte.fort { background: var(--accent); color: var(--sur-accent); }
.compte.danger { background: var(--danger); color: var(--sur-danger); }
.panneau.calme { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 18px;
                 border-style: dashed; border-color: var(--bord-fort); background: transparent; box-shadow: none; }
.panneau.calme h2, .panneau.calme .panneau-tete { margin: 0; color: var(--texte-2); font-size: var(--t-m); }
.panneau.calme .liste, .panneau.calme > .vide { color: var(--doux); font-size: var(--t-s); }
.panneau.calme .liste { container-type: normal; }  /* en ligne, un conteneur de requête aurait une largeur nulle */
.panneau.calme details.ajout { margin: 0 0 0 auto; }
.panneau.calme details.ajout[open] { flex-basis: 100%; margin: var(--e-2) 0 0; }
.colonnes { display: grid; gap: 0 var(--e-5); }
@media (min-width: 1180px) {
  .colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* 10. Tuiles (chiffres du jour) : .tuile, en lien vers sa rubrique ; .a-traiter (sarcelle), .alerte, .zero (atténuée),
   .systeme (état de l'agent, budget) ; .valeur.etat pour un état écrit plutôt qu'un nombre. .jauge : barre de niveau. */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-3);
          margin: 0 0 var(--e-6); }
.tuile { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: 14px 16px;
         border: 1px solid var(--bord); border-radius: var(--r-4); background: var(--surface); box-shadow: var(--ombre-1);
         color: var(--texte); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.tuile:hover { border-color: var(--accent-bord); box-shadow: var(--ombre-2); }
.tuile .etiquette { display: flex; align-items: center; gap: 6px; color: var(--doux); font-size: var(--t-s);
                    font-weight: 550; }
.tuile .etiquette .icone { width: 15px; height: 15px; }
.tuile .valeur { margin-top: 4px; font-size: var(--t-3xl); font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
                 font-variant-numeric: tabular-nums; }
.tuile .valeur.etat { display: flex; align-items: center; gap: 8px; margin: 8px 0 3px; font-size: var(--t-l);
                      letter-spacing: -.01em; }
.tuile .detail { color: var(--doux); font-size: var(--t-xs); }
.tuile.a-traiter .valeur, .tuile.a-traiter .etiquette { color: var(--accent-texte); }
.tuile.a-traiter { border-color: var(--accent-bord); }
.tuile.zero .valeur { color: var(--pale); }
.tuile.alerte { border-color: var(--danger-bord); background: var(--danger-fond); }
.tuile.alerte .valeur, .tuile.alerte .etiquette { color: var(--danger); }
.tuile.systeme { background: var(--surface-2); box-shadow: none; }
.tuile.systeme.alerte { background: var(--danger-fond); }
.tuile.ok .valeur.etat { color: var(--ok); }
.tuile.ok .valeur.etat::before, .tuile.alerte .valeur.etat::before { content: ""; width: 8px; height: 8px;
  border-radius: 50%; background: currentColor; }
.tuile.ok .valeur.etat::before { box-shadow: 0 0 0 3px var(--ok-fond); }
.jauge { display: block; height: 6px; margin: 8px 0 0; border-radius: var(--r-rond); background: var(--bord);
         overflow: hidden; }
.jauge span { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--accent); }
.alerte .jauge span { background: var(--danger); }

/* 11. Listes : .liste = lignes séparées (.titre à gauche, .meta dessous, .droite au bout) ; .a-faire = point de tête
   (urgent, tiers, close) et boutons au bout de la ligne, dessous quand la place manque ; .question = bloc de réponse. */
.liste { margin: 0; padding: 0; list-style: none; }
.liste > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 0; }
.liste > li:first-child { padding-top: 0; }
.liste > li:last-child { padding-bottom: 0; }
.liste > li + li { border-top: 1px solid var(--bord); }
.liste .titre { flex: 1 1 12rem; min-width: 0; }
.liste .titre .meta { display: block; margin-top: 2px; }
/* Liens de titre ; pas les .bouton. Dans un tableau, :where garde .meta prioritaire (lien atténué). */
.liste a:not(.bouton), td a:where(:not(.bouton)) { color: var(--texte); font-weight: 550; text-decoration: none; }
.liste a:not(.bouton):hover, td a:where(:not(.bouton)):hover { color: var(--accent-texte); text-decoration: underline; }
.meta { color: var(--doux); font-size: var(--t-s); }
.meta a, .liste .meta a { color: var(--texte-2); font-weight: 450; text-decoration: underline;
                          text-decoration-color: var(--bord-fort); }
td.meta, .insecable { white-space: nowrap; }
.droite { margin-left: auto; color: var(--doux); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.question + .question { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--bord); }
.question > :last-child { margin-bottom: 0; }
.question .boutons { margin: var(--e-2) 0 var(--e-3); }
#fil, #historique { margin-bottom: var(--e-5); }  /* fil d'une conversation, puis le formulaire de réponse */

.a-faire { container-type: inline-size; }
.a-faire > li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; }
.a-faire > li.vide { display: block; }
.a-faire > li:not(.vide)::before { content: ""; width: 14px; height: 14px; margin-top: 3px; border: 2px solid var(--bord-champ);
                                   border-radius: 50%; }
.a-faire > li.urgent::before { border-color: var(--danger); background: var(--danger);
                               box-shadow: inset 0 0 0 2px var(--surface); }
.a-faire > li.tiers::before { border-color: var(--tiers-vif); border-style: dashed; }
.a-faire > li.close::before { border-color: var(--ok-vif); background: var(--ok-vif); box-shadow: inset 0 0 0 2px var(--surface); }
.a-faire > li > .boutons { flex-wrap: nowrap; margin: 0; }
.a-faire > li > .droite { margin: 0; }
.a-faire .titre .pastille { margin-right: 4px; }
.a-faire button.lien { padding: 0 6px; color: var(--doux); text-decoration-color: var(--bord-fort); }
@container (max-width: 600px) {
  .a-faire > li > .boutons, .a-faire > li > .droite { grid-column: 2 / -1; flex-wrap: wrap; }
}

/* 12. Frises : .agenda (rendez-vous, une ligne verticale et un point par heure) ; .feu (où en est la vente : point
   vert, orange ou rouge, toujours avec son texte) ; dl.jalons (étapes de la vente). */
.agenda { position: relative; container-type: inline-size; }
.agenda > li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; }
.agenda > li.vide { display: block; }
.agenda > li:not(.vide)::before { content: ""; position: relative; z-index: 1; width: 12px; height: 12px;
  border: 2.5px solid var(--accent); border-radius: 50%; background: var(--surface); transform: translateY(1px); }
.agenda::after { content: ""; position: absolute; top: 10px; bottom: 10px; left: 5px; width: 2px; background: var(--bord); }
.agenda:has(> li:only-child)::after, .agenda:has(> .vide)::after { display: none; }
.agenda strong { color: var(--accent-texte); font-variant-numeric: tabular-nums; }
.agenda > li > .droite { margin: 0; }
.panneau.aujourdhui { border-color: var(--accent-bord); background: var(--accent-pale); }
@container (max-width: 460px) {
  .agenda > li > .droite { grid-column: 2 / -1; }
}
.feu { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--bord);
       border-radius: var(--r-3); background: var(--surface-2); }
.feu::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.feu span[aria-hidden] { display: none; }
.feu.vert { border-color: var(--ok-bord); background: var(--ok-fond); color: var(--ok); }
.feu.orange { border-color: var(--attention-bord); background: var(--attention-fond); color: var(--attention); }
.feu.rouge { border-color: var(--danger-bord); background: var(--danger-fond); color: var(--danger); }
.feu.vert::before { background: var(--ok-vif); }
.feu.orange::before { background: var(--attention-vif); }
.feu.rouge::before { background: var(--danger); }
.feu .retard { color: inherit; }
dl.jalons dt { position: relative; padding-left: 22px; }
dl.jalons dt::before { content: ""; position: absolute; top: 13px; left: 1px; width: 10px; height: 10px;
                       border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); }

/* 13. Fiche : dl.fiche = libellé / valeur sur deux colonnes, une seule sous 640 px ; grouper avec des h3. */
dl.fiche { display: grid; grid-template-columns: minmax(8rem, 36%) minmax(0, 1fr); margin: 0 0 var(--e-3); }
dl.fiche dt, dl.fiche dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--bord); }
dl.fiche dt { padding-right: var(--e-3); color: var(--doux); font-size: var(--t-s); }
dl.fiche dt:last-of-type, dl.fiche dd:last-of-type { border-bottom: 0; }

/* 14. Pastilles : statut d'un bien (statut-*, avec un point de la couleur de sa phase) et états (classe = le code de
   l'état : brouillon, en_cours, envoyee…, ou un mot : urgent, retard, a-valider, a-verifier, tiers, sensible).
   Couleur via --p-fond, --p-texte, --p-bord, --p-point ; une nouvelle pastille ne fait que les donner. */
.pastille { --p-fond: var(--surface-3); --p-texte: var(--texte-2); --p-bord: transparent; --p-point: var(--doux);
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border: 1px solid var(--p-bord);
  border-radius: var(--r-rond); background: var(--p-fond); color: var(--p-texte); font-size: var(--t-xs); font-weight: 600;
  line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; vertical-align: 1px; }
.pastille[class*="statut-"]::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
                                      background: var(--p-point); }
/* Phases : estimation → mandat, en vente → vente en cours → vendu → clos ; abandon et sans suite à part. */
.statut-estimation { --p-point: var(--phase-estimation); }
.statut-mandat, .statut-pieces, .statut-diffusion { --p-fond: var(--phase-mandat-fond); --p-texte: var(--phase-mandat-texte);
  --p-point: var(--phase-mandat); }
.statut-offre, .statut-compromis, .statut-financement, .statut-acte_prevu { --p-fond: var(--phase-vente-fond);
  --p-texte: var(--phase-vente-texte); --p-point: var(--phase-vente); }
.statut-acte { --p-fond: var(--ok-fond); --p-texte: var(--ok); --p-point: var(--ok-vif); }
.statut-clos { --p-fond: transparent; --p-bord: var(--bord-fort); --p-texte: var(--doux); --p-point: var(--phase-clos); }
.statut-abandonne, .statut-sans_suite { --p-fond: transparent; --p-bord: var(--bord-fort); --p-texte: var(--doux);
  --p-point: transparent; }
.pastille.statut-abandonne, .pastille.statut-sans_suite { border-style: dashed; }
.pastille.statut-abandonne::before, .pastille.statut-sans_suite::before { box-shadow: inset 0 0 0 1.5px var(--phase-clos); }
/* États : à valider (à Pierre), en cours (à l'agent), fait, problème, à vérifier, tiers, sensible, éteint. */
.pastille.brouillon, .pastille.a_trier, .pastille.a-valider { --p-fond: var(--accent); --p-texte: var(--sur-accent); }
.pastille.en_attente, .pastille.en_cours, .pastille.en_envoi, .pastille.validee, .pastille.en-cours { --p-fond: var(--surface);
  --p-bord: var(--bord-fort); --p-texte: var(--texte-2); }
.pastille.en_cours::before, .pastille.en_envoi::before, .pastille.en-cours::before { content: ""; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.pastille.envoyee, .pastille.terminee, .pastille.traite, .pastille.faite, .pastille.fait { --p-fond: var(--ok-fond);
  --p-texte: var(--ok); }
.pastille.echec, .pastille.alerte, .pastille.urgent, .pastille.retard { --p-fond: var(--danger-fond); --p-texte: var(--danger);
  --p-bord: var(--danger-bord); }
.pastille.incertaine, .pastille.attention { --p-fond: var(--attention-fond); --p-texte: var(--attention);
  --p-bord: var(--attention-bord); }
.pastille.tiers, .pastille.a-verifier { --p-fond: var(--tiers-fond); --p-texte: var(--tiers); --p-bord: var(--tiers-bord); }
.pastille.sensible { --p-fond: var(--sensible-fond); --p-texte: var(--sensible); --p-bord: var(--sensible-bord); gap: 4px; }
.pastille.sensible::before { content: ""; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: var(--i-cadenas) center / contain no-repeat; mask: var(--i-cadenas) center / contain no-repeat; }
.pastille.rejetee, .pastille.annulee, .pastille.ignore, .pastille.eteinte, .pastille.ecartee, .pastille.sans_objet {
  --p-fond: transparent; --p-bord: var(--bord-fort); --p-texte: var(--doux); }

/* 15. Tableaux : .tableau enveloppe la table (défilement horizontal si besoin) ; .collant = en-tête collé en haut sur
   grand écran ; .empile = une carte par ligne sous 640 px (chaque td porte data-label). */
.tableau { margin: 0 0 var(--e-4); border: 1px solid var(--bord); border-radius: var(--r-3); background: var(--surface);
           box-shadow: var(--ombre-1); overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; }
th { background: var(--surface-2); color: var(--doux); font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
     white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
td.vide { padding: 14px; }
@media (min-width: 1100px) {
  .tableau.collant { overflow: visible; }
  .tableau.collant th { position: sticky; top: 0; z-index: 1; }
  .tableau.collant th:first-child { border-top-left-radius: var(--r-3); }
  .tableau.collant th:last-child { border-top-right-radius: var(--r-3); }
}
@media (max-width: 639px) {
  .tableau.empile thead { display: none; }
  .tableau.empile tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--bord); }
  .tableau.empile tbody tr:last-child { border-bottom: 0; }
  .tableau.empile td { display: block; padding: 2px 0; border: 0; }
  .tableau.empile td[data-label]::before { content: attr(data-label) " : "; color: var(--doux); font-size: var(--t-xs); }
}

/* 16. Messages : .message (information), .succes, .erreur, .attention, .tiers ; une icône dit le sens. */
.message { position: relative; margin: 0 0 var(--e-4); padding: 10px 14px 10px 40px; border: 1px solid var(--bord);
           border-radius: var(--r-3); background: var(--surface); color: var(--texte); }
.message::before { content: ""; position: absolute; top: 12px; left: 14px; width: 17px; height: 17px;
  background: var(--doux); -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat; }
.message.succes { border-color: var(--ok-bord); background: var(--ok-fond); color: var(--ok); }
.message.succes::before { background: var(--ok); -webkit-mask-image: var(--i-ok); mask-image: var(--i-ok); }
.message.erreur { border-color: var(--danger-bord); background: var(--danger-fond); color: var(--danger); }
.message.erreur::before { background: var(--danger); -webkit-mask-image: var(--i-alerte); mask-image: var(--i-alerte); }
.message.attention { border-color: var(--attention-bord); background: var(--attention-fond); color: var(--attention); }
.message.attention::before { background: var(--attention); -webkit-mask-image: var(--i-alerte); mask-image: var(--i-alerte); }
.message.tiers { border-color: var(--tiers-bord); background: var(--tiers-fond); color: var(--tiers); }
.message.tiers::before { background: var(--tiers); }
.message a { color: inherit; text-decoration-color: currentColor; }

/* Bandeau d'état de chaque page (base.html) : vert quand tout va bien, ambre quand quelque chose attend, jamais rouge. */
.bandeau { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0 0 var(--e-5); padding: 8px 14px; border: 1px solid var(--ok-bord);
        border-radius: var(--r-3); background: var(--ok-fond); color: var(--ok); font-size: var(--t-s); font-weight: 550; }
.bandeau.attention { border-color: var(--attention-bord); background: var(--attention-fond); color: var(--attention); }
.bandeau a { color: inherit; text-decoration-color: currentColor; }

/* 17. Onglets : .onglets, liens en pilule dans un rail ; l'onglet courant porte aria-current. */
.onglets { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--e-5); padding: 4px;
           border-radius: var(--r-rond); background: var(--surface-3); }
.onglets a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px;
             border-radius: var(--r-rond); color: var(--texte-2); font-weight: 600; text-decoration: none; }
.onglets a:hover { color: var(--texte); }
.onglets a[aria-current] { background: var(--surface); color: var(--texte); box-shadow: var(--ombre-1); }

/* 18. Aujourd'hui : à gauche ce qui attend Pierre, à droite l'agenda puis le reste ; une colonne sous 1100 px. */
.jour { display: grid; gap: 0 var(--e-5); }
@media (min-width: 1100px) {
  .jour { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
  .jour-agenda { grid-column: 2; grid-row: 1; }
  .jour-principal { grid-column: 1; grid-row: 1 / span 2; }
  .jour-cote { grid-column: 2; grid-row: 2; }
}
.message.a-jour { padding: 14px 18px 14px 44px; }
.message.a-jour::before { top: 15px; left: 16px; }
.panneau.alertes { border-color: var(--danger-bord); border-left: 4px solid var(--danger); }
.panneau.alertes h2 { color: var(--danger); }
.panneau.alertes h2 .icone { width: 18px; height: 18px; }
.panneau.alertes > .liste + .liste { margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--bord); }
.echeances > li { font-size: var(--t-s); }
.echeances a { font-weight: 450; }
.alertes .liste a.retard { color: var(--danger); }
.pipeline { display: flex; gap: 3px; height: 10px; margin: var(--e-1) 0 var(--e-4); border-radius: var(--r-rond);
            overflow: hidden; }
.pipeline span { min-width: 8px; background: var(--p-point); }
.pipeline .statut-estimation { background: var(--phase-estimation); }
.pipeline .statut-abandonne, .pipeline .statut-sans_suite { background: var(--bord-fort); }
.legende { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.legende li { display: inline-flex; align-items: center; gap: 6px; }
.legende a { text-decoration: none; }
.legende a:hover .pastille { box-shadow: 0 0 0 2px var(--accent-bord); }
.legende .nombre { color: var(--texte-2); font-size: var(--t-s); font-weight: 650; }
.panneau.calme .legende { font-size: var(--t-s); }

/* 19. Connexion, erreur ----------------------------------------------------------------------------------------------- */
.connexion { width: 100%; max-width: 400px; padding: 40px 32px 32px; border: 1px solid var(--bord); border-radius: 20px;
             background: var(--surface); box-shadow: var(--ombre-2); }
.connexion .marque { flex-direction: column; gap: 16px; padding: 0; font-size: var(--t-xl); text-align: center; }
.connexion .logo, .page-erreur .logo { width: 52px; height: 52px; border-radius: 16px; }
.connexion .logo .icone, .page-erreur .logo .icone { width: 30px; height: 30px; }
.accroche { margin: 8px 0 28px; color: var(--doux); text-align: center; }
.connexion button { width: 100%; min-height: 44px; }
.page-erreur { width: 100%; max-width: 560px; }
.page-erreur .logo { margin-bottom: var(--e-5); background: var(--danger-fond); color: var(--danger); }
.page-erreur .entete { margin-bottom: var(--e-4); }

/* 20. Documents, courrier, texte mis en forme ------------------------------------------------------------------------ */
.courrier { margin: 0 0 var(--e-4); border: 1px solid var(--bord); border-radius: var(--r-3); background: var(--surface);
            overflow: hidden; }
.courrier dl.fiche { grid-template-columns: minmax(6rem, 18%) minmax(0, 1fr); margin: 0; padding: 2px 16px;
                     border-bottom: 1px solid var(--bord); background: var(--surface-2); }
.courrier pre.texte { margin: 0; border: 0; border-radius: 0; }
.document { display: block; width: 100%; max-width: 100%; border: 1px solid var(--bord); border-radius: var(--r-3); }
iframe.document { height: 80vh; }
.prose h1, .prose h2 { margin: var(--e-4) 0 var(--e-2); font-size: var(--t-l); }
.prose h3 { margin: 14px 0 6px; }
.prose ul { margin: 0 0 10px; padding-left: 1.2rem; }

/* 21. Téléphone : barre du haut collée, tiroir sans JavaScript (case à cocher), cibles de 44 px, champs à 16 px
   (Safari zoome en dessous). */
@media (max-width: 859px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .barre { position: sticky; top: 0; z-index: 20; border-right: 0; border-bottom: 1px solid var(--bord); }
  .barre-dedans { position: static; flex-direction: row; align-items: center; height: var(--haut); padding: 0 var(--e-4);
                  overflow: visible; }
  .marque { padding: 0; }
  .logo { width: 30px; height: 30px; border-radius: 9px; }
  .masque { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .bouton-menu { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 0 auto; padding: 6px 12px;
                 border: 1px solid var(--bord-fort); border-radius: var(--r-2); background: var(--surface); color: var(--texte);
                 font-size: var(--t-m); font-weight: 600; cursor: pointer; }
  .bouton-menu .icone { width: 18px; height: 18px; }
  .bouton-menu .icone + .icone, .masque:checked + .bouton-menu .icone:first-child { display: none; }
  .masque:checked + .bouton-menu .icone + .icone { display: block; }
  .masque:focus-visible + .bouton-menu { outline: 2px solid var(--accent); outline-offset: 2px; }
  .tiroir { display: none; position: fixed; top: var(--haut); right: 0; left: 0; z-index: 22;
            max-height: calc(100dvh - var(--haut)); padding: var(--e-1) var(--e-3) var(--e-4); overflow-y: auto;
            border-bottom: 1px solid var(--bord); background: var(--surface); box-shadow: var(--ombre-3); }
  .masque:checked ~ .tiroir { display: flex; }
  .masque:checked ~ .voile { display: block; position: fixed; inset: var(--haut) 0 0; z-index: 21; background: var(--voile); }
  .nav-groupe { margin-top: var(--e-4); }
  .tiroir nav a, .sortie button { min-height: 44px; }
  .sortie { margin-top: var(--e-4); }
  html { scroll-padding-top: 72px; }  /* la barre du haut, collée, ne cache pas le champ atteint au clavier */
  main { padding: var(--e-5) var(--e-4) var(--e-12); }
  h1 { font-size: 23px; }
  .entete { margin-bottom: var(--e-5); }
  .panneau { padding: var(--e-4); }
  .panneau.calme { padding: 10px 14px; }
  input, select, textarea, textarea.code { font-size: 16px; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select { min-height: 44px; }
  button, .bouton, details.ajout > summary { min-height: 44px; }
  button.lien { min-height: 44px; }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--e-5); }
  .tuile { padding: 12px 14px; }
  .tuile .valeur { font-size: var(--t-2xl); }
  .colonnes, .jour { gap: 0; }
}
@media (max-width: 639px) {
  dl.fiche { grid-template-columns: minmax(0, 1fr); }
  dl.fiche dt { padding-bottom: 0; border-bottom: 0; font-size: var(--t-xs); }
  dl.fiche dd { padding-top: 2px; }
}

/* 22. Thème sombre : les mêmes jetons, redéfinis ; rien d'autre ne change. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fond: #151412; --surface: #1f1d1a; --surface-2: #24221e; --surface-3: #2e2b27;
    --bord: #36322d; --bord-fort: #4a453e; --bord-champ: #7a7368;
    --texte: #ece8e1; --texte-2: #cdc7bd; --doux: #a9a196; --pale: #8a8378;
    --accent: #5fbcb1; --accent-fort: #7fd0c6; --accent-texte: #6cc6bb; --accent-pale: #17302d; --accent-bord: #2d5a54;
    --sur-accent: #0b1f1d;
    --ok: #86d293; --ok-fond: #172a1b; --ok-bord: #2d4c33; --ok-vif: #5cb86a;
    --attention: #f0bb66; --attention-fond: #2c2213; --attention-bord: #574220; --attention-vif: #e09a2c;
    --danger: #f2948a; --danger-fond: #2f1815; --danger-bord: #5b2c26; --sur-danger: #2a0f0c;
    --tiers: #b1aaf3; --tiers-fond: #221f38; --tiers-bord: #3e3969; --tiers-vif: #8f85e6;
    --sensible: #eaa2ca; --sensible-fond: #2d1925; --sensible-bord: #58324b;
    --phase-estimation: #3d6f69; --phase-mandat: #4fa79c; --phase-vente: #7fd0c6; --phase-clos: #6b655c;
    --phase-mandat-fond: #1b302d; --phase-mandat-texte: #a6dcd4; --phase-vente-fond: #24443f; --phase-vente-texte: #c9eee8;
    --ombre-1: 0 1px 2px rgb(0 0 0 / 30%);
    --ombre-2: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 20px -8px rgb(0 0 0 / 50%);
    --ombre-3: 0 18px 40px -12px rgb(0 0 0 / 70%);
    --anneau: 0 0 0 3px rgb(95 188 177 / 30%);
    --voile: rgb(0 0 0 / 55%);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9a196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* 23. Mouvement réduit : ni animation ni transition. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; scroll-behavior: auto !important; }
}