/* Bureau CAPSI — styles de l'application (maquette validée par le gérant le 28/09/2026).
   Charte CAPSI : marine, Or UNIQUEMENT en point, terre pour les alertes, forêt pour « payé / cliente ». */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-display: swap; src: url(/assets/archivo-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-display: swap; src: url(/assets/archivo-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo Black"; font-weight: 400; font-display: swap; src: url(/assets/archivo-black-latin-400-normal.woff2) format("woff2"); }
:root {
  color-scheme: light;
  --marine: #0B2A4A; --marine-2: #16406B; --or: #D9A441; --ardoise: #5A6B7E; --texte: #0E2036; --texte-2: #33465C;
  --fond: #F4F6F8; --carte: #FFFFFF; --ligne: #D5DCE3; --ligne-2: #E8EDF2; --survol: #F7F9FB;
  --terre: #C0512A; --terre-fond: #FBEEE8; --foret: #1F6F4A; --foret-fond: #E6F2EB; --marine-fond: #E8EEF5;
  --menu-texte: #D6DFE8; --menu-doux: #9FB0C2; --menu-ligne: #22476E;
  --titre: "Archivo Black", "Archivo", Helvetica, Arial, sans-serif; --corps: "Archivo", Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: 15px; line-height: 1.5; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--titre); font-weight: 400; color: var(--marine); letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--marine); }
.visuel-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { padding: 24px; }

/* ── Connexion ── */
.ecran-connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.carte-connexion { width: min(420px, 100%); background: var(--carte); border: 1px solid var(--ligne); border-radius: 8px; padding: 28px 26px; }
.marque-connexion { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.marque-connexion svg { width: 40px; height: 40px; }
.marque-connexion .nom { font-family: var(--titre); font-size: 22px; color: var(--marine); letter-spacing: 0.04em; line-height: 1; display: block; }
.marque-connexion .sous { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ardoise); margin-top: 4px; }
.carte-connexion form { display: grid; gap: 14px; }
.carte-connexion h1 { font-size: 24px; }
.texte-doux { color: var(--texte-2); font-size: 14px; }
.case { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--texte-2); }
.case input { width: 18px; height: 18px; }
.lien { background: none; border: 0; padding: 4px 0; color: var(--marine); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; justify-self: start; }
.aide-connexion { margin-top: 18px; font-size: 13px; color: var(--ardoise); }
#cCode { font-size: 24px; letter-spacing: 0.4em; text-align: center; font-weight: 700; }

/* ── Cadre de l'application ──
   Demande du gérant (28/09/2026) : « tout l'écran défile ». Le cadre tient désormais la hauteur de la fenêtre :
   le menu de gauche et le contenu de droite défilent chacun de leur côté, et la barre du haut de chaque rubrique
   (titre et boutons) reste en place. Le programme mesure cette barre (--haut-tete) et la hauteur du contenu
   (--haut-contenu) pour caler la fiche de droite dessous. */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
.menu { background: var(--marine); color: var(--menu-texte); display: flex; flex-direction: column; padding: 22px 16px; gap: 26px;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--menu-ligne) transparent; }
.marque { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.marque svg { width: 34px; height: 34px; flex: none; }
.marque .nom { font-family: var(--titre); font-size: 21px; color: #fff; letter-spacing: 0.04em; line-height: 1; }
.marque .sous { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--menu-doux); margin-top: 4px; }
.menu nav { display: flex; flex-direction: column; gap: 2px; }
.menu nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; color: var(--menu-texte); padding: 10px 10px; border-radius: 4px; font-size: 15px; }
.menu nav button:hover { background: var(--marine-2); }
.menu nav button .point { width: 7px; height: 7px; border-radius: 50%; background: transparent; flex: none; }
.menu nav button.actif { background: var(--marine-2); color: #fff; font-weight: 600; }
.menu nav button.actif .point { background: var(--or); }
.menu nav .compte { margin-left: auto; background: #fff; color: var(--marine); font-size: 12px; font-weight: 700; border-radius: 10px; padding: 1px 8px; }
.menu nav .bientot { margin-left: auto; font-size: 11px; color: var(--menu-doux); }
.moi { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 6px 0; border-top: 1px solid var(--menu-ligne); font-size: 13px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--marine-2); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.moi strong { display: block; color: #fff; font-weight: 600; }
.lien-sortie { background: none; border: 0; padding: 0; color: var(--menu-doux); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.lien-sortie:hover { color: #fff; }

main { padding: 0 28px 40px; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ligne) transparent; }
.tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20; background: var(--fond); margin: 0 -28px; padding: 24px 28px 14px; border-bottom: 1px solid var(--ligne); }
.ajout, .detail { scroll-margin-top: calc(var(--haut-tete, 90px) + 12px); }
.tete h1 { font-size: 30px; }
.tete p { color: var(--ardoise); margin-top: 4px; }
.tete .boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { border: 1px solid var(--ligne); background: var(--carte); color: var(--marine); padding: 9px 14px; border-radius: 4px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn:hover { border-color: var(--marine); }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn.principal { background: var(--marine); color: #fff; border-color: var(--marine); }
.btn.principal:hover { background: var(--marine-2); }
.btn.principal .point { width: 7px; height: 7px; border-radius: 50%; background: var(--or); }
.btn.petit { padding: 6px 11px; font-size: 13px; }
.btn.large { width: 100%; padding: 12px 16px; font-size: 15px; }
.btn.danger { color: var(--terre); }
.conseil { margin-top: 16px; border-left: 3px solid var(--or); background: var(--carte); padding: 10px 14px; font-size: 13.5px; color: var(--texte-2); }

.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 18px; }
.chiffre { background: var(--carte); border: 1px solid var(--ligne); border-radius: 6px; padding: 14px 16px; }
.chiffre .val { display: block; font-family: var(--titre); font-size: 26px; color: var(--marine); line-height: 1.1; }
.chiffre .lib { display: block; color: var(--texte-2); font-size: 13px; margin-top: 4px; }
.chiffre.alerte { border-color: var(--terre); background: var(--terre-fond); }
.chiffre.alerte .val, .chiffre.alerte .lib { color: var(--terre); }

.ajout { background: var(--carte); border: 1px solid var(--marine); border-radius: 6px; padding: 18px; margin-bottom: 18px; }
.ajout h2 { font-size: 18px; margin-bottom: 4px; }
.ajout > p { color: var(--ardoise); font-size: 13px; margin-bottom: 14px; }
.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.champ { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texte-2); }
.champ.large { grid-column: 1 / -1; }
.champ input, .champ select, .champ textarea { border: 1px solid var(--ligne); border-radius: 4px; padding: 9px 10px; background: #fff; font-size: 15px; color: var(--texte); }
.champ textarea { min-height: 64px; resize: vertical; }
.ajout .actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.erreur { color: var(--terre); font-size: 13px; }
.ajout .erreur { margin-top: 8px; }

.lignes-form { margin-top: 14px; display: grid; gap: 8px; }
.ligne-form { display: grid; grid-template-columns: minmax(0, 1fr) 80px 120px 110px 34px; gap: 8px; align-items: end; margin-bottom: 8px; }
.ligne-form select, .ligne-form input { border: 1px solid var(--ligne); border-radius: 4px; padding: 8px 10px; background: #fff; font-size: 14px; width: 100%; min-width: 0; }
.ligne-form .total-ligne { font-weight: 700; color: var(--marine); padding-bottom: 8px; text-align: right; white-space: nowrap; }
.ligne-form .retirer { border: 1px solid var(--ligne); background: #fff; border-radius: 4px; height: 38px; color: var(--ardoise); }
.lignes-tete { display: grid; grid-template-columns: minmax(0, 1fr) 80px 120px 110px 34px; gap: 8px; font-size: 12px; color: var(--ardoise); }
.lignes-tete span:nth-child(4) { text-align: right; }
.total-form { margin-left: auto; font-size: 15px; color: var(--texte-2); }
.total-form strong { font-family: var(--titre); font-weight: 400; font-size: 20px; color: var(--marine); margin-left: 8px; }

.filtres { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.onglets { display: flex; background: var(--carte); border: 1px solid var(--ligne); border-radius: 6px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.onglets button { border: 0; background: none; padding: 7px 12px; border-radius: 4px; font-size: 13px; color: var(--texte-2); }
.onglets button.actif { background: var(--marine); color: #fff; font-weight: 600; }
.onglets button .n { opacity: 0.7; margin-left: 4px; }
.filtres select, .filtres input[type="month"] { border: 1px solid var(--ligne); border-radius: 6px; padding: 7px 10px; background: var(--carte); font-size: 13px; color: var(--texte-2); }
.export { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }

.zone { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 16px; align-items: start; }
/* La fiche de droite reste sous la barre du haut pendant qu'on descend dans la liste, avec son propre défilement.
   La liste a au moins la hauteur de la fiche : sinon, une fiche plus longue que la liste ne peut pas rester en place
   et glisse sous la barre du haut (constaté le 28/09 sur une liste de quatre demandes). */
.zone .detail { position: sticky; top: calc(var(--haut-tete, 90px) + 16px); max-height: calc(var(--haut-contenu, 100vh) - var(--haut-tete, 90px) - 56px);
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ligne) transparent; }
.zone .liste { min-height: calc(var(--haut-contenu, 100vh) - var(--haut-tete, 90px) - 56px); }
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.carte-d { width: 100%; text-align: left; background: var(--carte); border: 1px solid var(--ligne); border-radius: 6px; padding: 12px 14px; display: block; }
.carte-d:hover { background: var(--survol); }
.carte-d.choisie { border-color: var(--marine); box-shadow: inset 3px 0 0 var(--marine); }
.carte-d .l1 { display: flex; align-items: center; gap: 8px; }
.carte-d .qui { font-weight: 700; color: var(--marine); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-d .nouv { width: 8px; height: 8px; border-radius: 50%; background: var(--or); flex: none; }
.carte-d .objet { display: block; color: var(--texte); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-d .l3 { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--ardoise); flex-wrap: wrap; }
.carte-d .delai { margin-left: auto; font-weight: 600; color: var(--texte-2); }
.carte-d .delai.retard { color: var(--terre); }
.carte-d .montant { margin-left: auto; font-weight: 700; color: var(--marine); white-space: nowrap; }
.vide { background: var(--carte); border: 1px dashed var(--ligne); border-radius: 6px; padding: 26px; text-align: center; color: var(--ardoise); }
.chargement { color: var(--ardoise); padding: 20px; }

.pastille { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; white-space: nowrap; border: 1px solid transparent; }
.p-nouvelle, .p-brouillon { background: #fff; color: var(--marine); border-color: var(--marine); }
.p-rappelee, .p-envoye, .p-envoyee { background: var(--marine-fond); color: var(--marine); }
.p-devis, .p-partielle { background: #EEF0F3; color: var(--texte-2); }
.p-cliente, .p-accepte, .p-payee { background: var(--foret-fond); color: var(--foret); }
.p-perdue, .p-refuse, .p-annulee { background: #F1F2F4; color: var(--ardoise); text-decoration: line-through; }
.p-retard { background: var(--terre-fond); color: var(--terre); }
.etiq { font-size: 12px; color: var(--texte-2); background: var(--fond); border: 1px solid var(--ligne-2); border-radius: 4px; padding: 1px 7px; }

.detail { background: var(--carte); border: 1px solid var(--ligne); border-radius: 6px; padding: 22px 24px; min-width: 0; }
.retour { display: none; margin-bottom: 12px; }
.d-tete { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.d-tete h2 { font-size: 22px; overflow-wrap: anywhere; }
.d-sous { color: var(--ardoise); margin-top: 4px; font-size: 14px; }
.d-contact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.objectif { margin-top: 16px; padding: 10px 14px; border-radius: 4px; background: var(--marine-fond); color: var(--marine); font-size: 14px; }
.objectif.retard { background: var(--terre-fond); color: var(--terre); font-weight: 600; }
.bloc { margin-top: 20px; }
.bloc h3 { font-family: var(--corps); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ardoise); margin-bottom: 8px; }
.message { border-left: 3px solid var(--ligne); padding: 2px 0 2px 14px; color: var(--texte); white-space: pre-line; overflow-wrap: anywhere; }
.infos { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: 14px; }
.infos dt { color: var(--ardoise); }
.infos dd { margin: 0; overflow-wrap: anywhere; }
.etapes { display: flex; gap: 0; flex-wrap: wrap; }
.etape { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ardoise); padding: 4px 0; }
.etape + .etape::before { content: ""; width: 22px; height: 1px; background: var(--ligne); margin: 0 8px 0 4px; }
.etape .rond { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ligne); background: #fff; }
.etape.faite { color: var(--marine); }
.etape.faite .rond { border-color: var(--marine); background: var(--marine); }
.etape.courante { color: var(--marine); font-weight: 700; }
.etape.courante .rond { border-color: var(--marine); background: var(--or); }
.d-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.d-actions.espace { margin-top: 14px; }
.perdue-choix { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.perdue-choix select { border: 1px solid var(--ligne); border-radius: 4px; padding: 6px 8px; font-size: 13px; }
.duo { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: start; }
.note-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.assistant { margin-top: 22px; border: 1px solid var(--ligne); border-radius: 6px; overflow: hidden; }
.assistant .a-tete { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--fond); border-bottom: 1px solid var(--ligne); font-weight: 700; color: var(--marine); font-size: 14px; flex-wrap: wrap; }
.assistant .a-tete .point { width: 8px; height: 8px; border-radius: 50%; background: var(--or); }
.assistant .a-tete span.doux { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--ardoise); }
.assistant textarea { display: block; width: 100%; border: 0; padding: 14px; min-height: 104px; resize: vertical; font-size: 14px; line-height: 1.55; background: #fff; color: var(--texte); }
.assistant .a-pied { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--ligne-2); }
.assistant .a-pied p { font-size: 12.5px; color: var(--ardoise); margin-left: auto; }
.histo { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.histo li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ligne-2); align-items: center; }
.histo li:last-child { border-bottom: 0; }
.histo time { color: var(--ardoise); }

.doc { border: 1px solid var(--ligne); border-radius: 4px; padding: 26px 28px; margin-top: 18px; background: #fff; }
.doc-tete { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid var(--marine); }
.doc-marque { display: flex; gap: 12px; align-items: flex-start; }
.doc-marque svg { width: 40px; height: 40px; flex: none; }
.doc-marque strong { display: block; font-family: var(--titre); font-weight: 400; color: var(--marine); font-size: 17px; letter-spacing: 0.02em; }
.doc-marque span { display: block; font-size: 12px; color: var(--texte-2); line-height: 1.5; }
.doc-num { text-align: right; font-size: 13px; color: var(--texte-2); }
.doc-num strong { display: block; font-family: var(--titre); font-weight: 400; font-size: 22px; color: var(--marine); letter-spacing: 0.04em; }
.doc-client { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0; font-size: 14px; }
.doc-client span { display: block; font-size: 12px; color: var(--ardoise); text-transform: uppercase; letter-spacing: 0.1em; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc th { text-align: left; font-size: 12px; color: var(--ardoise); font-weight: 600; border-bottom: 1px solid var(--ligne); padding: 8px 6px; }
.doc td { border-bottom: 1px solid var(--ligne-2); padding: 9px 6px; vertical-align: top; }
.doc .nb { text-align: right; white-space: nowrap; }
.doc-totaux { margin-left: auto; margin-top: 12px; width: min(320px, 100%); font-size: 14px; }
.doc-totaux div { display: flex; justify-content: space-between; padding: 4px 0; }
.doc-totaux .grand { border-top: 2px solid var(--marine); margin-top: 4px; padding-top: 8px; font-weight: 700; color: var(--marine); font-size: 16px; }
.doc-totaux .reste { color: var(--terre); font-weight: 700; }
.doc-pied { margin-top: 18px; font-size: 12px; color: var(--ardoise); display: grid; gap: 4px; }
.doc-pied .avertir { color: var(--terre); }
.paiement-form { margin-top: 14px; border: 1px solid var(--marine); border-radius: 6px; padding: 14px; }

/* ── Clients ── */
.lignes-modele, .ligne-modele { display: grid; grid-template-columns: minmax(0, 1fr) 170px 140px 110px 34px; gap: 8px; }
.lignes-modele { font-size: 12px; color: var(--ardoise); }
.ligne-modele { align-items: end; margin-bottom: 8px; }
.ligne-modele select, .ligne-modele input { border: 1px solid var(--ligne); border-radius: 4px; padding: 8px 10px; background: #fff; font-size: 14px; width: 100%; min-width: 0; }
.ligne-modele select:disabled { background: var(--fond); color: var(--ardoise); }
.ligne-modele .retirer { border: 1px solid var(--ligne); background: #fff; border-radius: 4px; height: 38px; color: var(--ardoise); }
.case.espace-haut { margin-top: 12px; }
.filtres .case { font-size: 13px; }
.modele { width: 100%; border-collapse: collapse; font-size: 14px; }
.modele th { text-align: left; font-size: 12px; color: var(--ardoise); font-weight: 600; border-bottom: 1px solid var(--ligne); padding: 8px 6px; }
.modele td { border-bottom: 1px solid var(--ligne-2); padding: 9px 6px; vertical-align: top; }
.modele .nb { text-align: right; white-space: nowrap; }
.modele tfoot td { font-weight: 700; color: var(--marine); border-bottom: 0; }
.modele input.a-qte { width: 76px; text-align: right; border: 1px solid var(--ligne); border-radius: 4px; padding: 5px 8px; font-size: 14px; }
.fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fiche div { background: var(--fond); border: 1px solid var(--ligne-2); border-radius: 6px; padding: 12px 14px; overflow-wrap: anywhere; }
.fiche span { display: block; font-size: 12px; color: var(--ardoise); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.fiche strong { color: var(--marine); }
.apercu { margin-top: 14px; border: 1px solid var(--marine); border-radius: 6px; padding: 16px; background: #fff; }
.apercu-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.apercu-tete h3 { font-size: 17px; }
.apercu-pied { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.apercu-pied .calcul { flex: 1; min-width: 200px; }
.champ.court input { padding: 6px 8px; font-size: 14px; }
.calcul { font-size: 12.5px; color: var(--ardoise); margin-top: 6px; }
.fait { font-size: 13px; color: var(--foret); font-weight: 600; align-self: center; }

/* ── Tableau du lundi ── */
.section-titre { font-family: var(--corps); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ardoise); margin: 26px 0 10px; }
.a-faire { list-style: none; margin: 0; padding: 0; background: var(--carte); border: 1px solid var(--ligne); border-radius: 6px; }
.a-faire li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--ligne-2); }
.a-faire li:last-child { border-bottom: 0; }
.a-faire .puce { width: 9px; height: 9px; border-radius: 50%; background: var(--or); margin-top: 6px; flex: none; }
.a-faire .puce.urgent { background: var(--terre); }
.a-faire div { min-width: 0; }
.a-faire strong { color: var(--marine); }
.a-faire p { color: var(--texte-2); font-size: 13.5px; overflow-wrap: anywhere; }
.a-faire .btn { margin-left: auto; flex: none; }
.defile-large { overflow-x: auto; }
.tableau-pole { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--ligne); font-size: 14px; }
.tableau-pole th, .tableau-pole td { padding: 11px 14px; border-bottom: 1px solid var(--ligne-2); text-align: right; white-space: nowrap; }
.tableau-pole th:first-child, .tableau-pole td:first-child { text-align: left; white-space: normal; }
.tableau-pole thead th { background: var(--fond); font-size: 12px; color: var(--ardoise); text-transform: uppercase; letter-spacing: 0.08em; }
.tableau-pole .total { font-weight: 700; color: var(--marine); }
.tableau-pole tr:last-child td { border-bottom: 0; }
.barres { display: flex; align-items: flex-end; gap: 14px; height: 180px; padding: 16px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 6px; }
.barre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.barre .b { width: 100%; max-width: 54px; background: var(--marine); border-radius: 3px 3px 0 0; }
.barre.actuelle .b { background: var(--or); }
.barre span { font-size: 12px; color: var(--ardoise); }
.barre em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--marine); white-space: nowrap; }

.toast { position: sticky; bottom: 16px; margin: 16px auto 0; width: fit-content; max-width: calc(100% - 32px); background: var(--marine); color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.vu { opacity: 1; }
.toast.erreur-toast { background: var(--terre); }

@media (max-width: 1080px) {
  /* Le menu devient la barre du haut : elle reste en place, seul le contenu défile dessous. */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .menu { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 12px 16px; gap: 12px; overflow: visible; }
  .menu nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .menu nav button { width: auto; padding: 8px 10px; }
  .moi { margin-top: 0; border-top: 0; padding: 0; }
  .moi .avatar, .moi strong { display: none; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .export { margin-left: 0; }
}
@media (max-width: 760px) {
  main { padding: 0 16px 32px; }
  /* Sur téléphone, seul le menu reste en haut : la barre de la rubrique défile avec la page (l'écran est petit). */
  .tete { position: static; margin: 0; padding: 18px 0 0; border-bottom: 0; background: none; }
  .tete h1 { font-size: 26px; }
  .zone { grid-template-columns: 1fr; }
  .zone .detail { position: static; max-height: none; overflow: visible; }
  .zone .liste { min-height: 0; }
  .lignes-modele { display: none; }
  .ligne-modele { grid-template-columns: 1fr 1fr 38px; padding-bottom: 10px; border-bottom: 1px solid var(--ligne-2); }
  .ligne-modele .m-presta { grid-column: 1 / -1; }
  .ligne-modele .m-prix { grid-column: 1 / 3; }
  .fiche { grid-template-columns: 1fr; }
  .tableau-pole th, .tableau-pole td { padding: 9px 8px; font-size: 13px; }
  .barres { gap: 6px; padding: 12px 8px; }
  .a-faire li { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 12px; }
  .a-faire .btn { grid-column: 2; justify-self: start; margin: 8px 0 0; }
  /* Le menu fixe tient sur UNE ligne (il défile de côté) : sur un téléphone, il ne doit pas manger l'écran. */
  .menu { flex-wrap: nowrap; padding: 8px 12px; gap: 10px; }
  .marque { padding: 0; gap: 7px; }
  .marque svg { width: 26px; height: 26px; }
  .marque .nom { font-size: 16px; }
  .marque .sous { display: none; }
  .menu nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; }
  .menu nav button { white-space: nowrap; padding: 7px 9px; font-size: 14px; flex: none; }
  .moi { flex: none; }
  .lien-sortie { font-size: 12px; }
  .zone.voir-detail .liste { display: none; }
  .zone:not(.voir-detail) .detail { display: none; }
  .retour { display: inline-flex; }
  .grille { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .menu nav .bientot { display: none; }
  .histo li { grid-template-columns: 84px 1fr; }
  .infos { grid-template-columns: 1fr; }
  .doc { padding: 18px 14px; }
  .doc-num { text-align: left; }
  /* Sur téléphone : la prestation sur toute la largeur, puis quantité, prix et retrait sur une ligne. */
  .lignes-tete { display: none; }
  .ligne-form { grid-template-columns: 1fr 1.4fr 38px; padding-bottom: 10px; border-bottom: 1px solid var(--ligne-2); }
  .ligne-form .presta { grid-column: 1 / -1; }
  .ligne-form .total-ligne { display: none; }
}