/* Interface devis Climago : charte du site (Syne + DM Sans, verts Climago), lisible
   par un lecteur de 65 ans : texte de base 17 px, cibles de 44 px, statuts écrits en
   toutes lettres (jamais la couleur seule). */
@font-face { font-family: 'Syne'; src: url('/fonts/Syne.ttf') format('truetype'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/DMSans.ttf') format('truetype'); font-weight: 100 1000; font-display: swap; }

:root {
  --vert: #3E906C;
  --vert-fonce: #345041;
  --vert-pale: #E8F3ED;
  --creme: #F8F5F0;
  --creme-fonce: #EDE9E2;
  --encre: #1C1C28;
  --gris: #565B63;
  --filet: #D9D3C8;
  --alerte: #9A3412;
  --alerte-pale: #FFF3E7;
  --bleu: #1D4E89;
  --bleu-pale: #E7EEF7;
  --rayon: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--encre);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  height: 100dvh; display: flex; flex-direction: column;
}
h1, h2, h3 { font-family: 'Syne', 'DM Sans', sans-serif; color: var(--vert-fonce); margin: 0; line-height: 1.15; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ── Barre du haut ── */
.barre { display: flex; align-items: center; gap: 18px; padding: 12px 24px; border-bottom: 2px solid var(--vert); flex: none; }
.barre .logo { height: 34px; }
.chiffres { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 14px; font-size: 15px; color: var(--gris); }
.chiffres b { display: block; font-size: 20px; color: var(--vert-fonce); font-weight: 700; }
.chiffres .relance b { color: var(--alerte); }
.moi { font-size: 15px; color: var(--gris); white-space: nowrap; }

.onglets { display: flex; gap: 6px; margin-right: auto; }
.onglets a { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; border: 1.5px solid transparent; border-radius: var(--rayon); color: var(--vert-fonce); font-weight: 600; text-decoration: none; }
.onglets a:hover { border-color: var(--vert-fonce); }
.onglets a[aria-current="page"] { background: var(--vert-fonce); color: #fff; }

/* ── Deux pages : la feuille de devis (accueil) et la liste des devis et factures ── */
.plan { flex: 1; min-height: 0; position: relative; }
.plan[data-page="feuille"] .colonne-devis, .plan[data-page="liste"] .editeur { display: none; }
.colonne-devis { position: relative; height: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; padding: 18px 24px 0; overflow: hidden; }

.outils { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.outils h1 { font-size: 22px; }
.recherche { margin-left: auto; flex: 1; max-width: 360px; }
.recherche input { width: 100%; height: 44px; padding: 0 14px; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: #fff; }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.filtres button { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--filet); border-radius: 999px; background: #fff; font-size: 15px; }
.filtres button[aria-pressed="true"] { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
.filtres .n { opacity: .75; margin-left: 4px; }

/* Liste : un registre, pas des cartes. */
.liste { flex: 1; overflow-y: auto; padding-bottom: 24px; }
.ligne-devis {
  display: grid; grid-template-columns: 118px minmax(0, 1fr) auto 112px; gap: 14px; align-items: center;
  width: 100%; text-align: left; padding: 13px 8px; background: none; border: 0; border-bottom: 1px solid var(--creme-fonce);
}
.ligne-devis:hover { background: var(--creme); }
.ligne-devis .num { font-family: 'Syne', sans-serif; font-weight: 700; color: var(--vert-fonce); font-size: 15px; }
.ligne-devis .num small { display: block; font-family: 'DM Sans'; font-weight: 400; color: var(--gris); font-size: 13px; }
.ligne-devis .qui { min-width: 0; }
.ligne-devis .qui b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-devis .qui span { display: block; color: var(--gris); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-devis .montant { font-weight: 700; white-space: nowrap; }
.vide { color: var(--gris); padding: 28px 8px; }

/* Statuts : libellé écrit + pastille de forme distincte. */
.statut { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.statut::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.s-cree { background: var(--creme-fonce); color: var(--encre); }
.s-envoye { background: var(--bleu-pale); color: var(--bleu); }
.s-accepte { background: var(--vert-pale); color: var(--vert-fonce); }
.s-refuse, .s-annule { background: #F3E8E8; color: #8A2B2B; }
.s-expire { background: var(--alerte-pale); color: var(--alerte); }
.s-remplace, .s-echec { background: #EEE; color: var(--gris); }

/* Détail d'un devis : panneau qui recouvre la liste. */
.detail { position: absolute; inset: 0; background: #fff; overflow-y: auto; padding: 18px 24px 32px; }
.detail .retour { min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--vert-fonce); font-weight: 600; }
.detail header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.detail h2 { font-size: 28px; font-weight: 800; }
.detail .client { font-size: 19px; font-weight: 600; margin: 10px 0 2px; }
.detail .coord, .detail .objet { color: var(--gris); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.btn { min-height: 44px; padding: 0 16px; border-radius: var(--rayon); border: 1.5px solid var(--vert-fonce); background: #fff; color: var(--vert-fonce); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn.plein { background: var(--vert-fonce); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.tableau { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 16px; }
.tableau th { text-align: left; font-weight: 600; color: var(--vert-fonce); font-size: 14px; border-bottom: 2px solid var(--vert); padding: 6px 8px 6px 0; }
.tableau td { border-bottom: 1px solid var(--creme-fonce); padding: 8px 8px 8px 0; vertical-align: top; }
.tableau td.n, .tableau th.n { text-align: right; white-space: nowrap; }
.tableau tr.section td { font-family: 'Syne'; font-weight: 700; color: var(--vert-fonce); border-bottom: 0; padding-top: 14px; }
.totaux { display: flex; justify-content: flex-end; gap: 24px; margin-top: 12px; font-size: 16px; }
.totaux .ttc { font-size: 22px; font-weight: 800; color: var(--vert-fonce); }
.detail h3 { font-size: 18px; margin: 26px 0 10px; }
.histoire { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--filet); }
.histoire li { position: relative; padding: 0 0 14px 18px; }
.histoire li::before { content: ''; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--vert); }
.histoire time { display: block; color: var(--gris); font-size: 14px; }
.note-form { display: flex; gap: 10px; margin-top: 6px; }
.note-form input { flex: 1; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--filet); border-radius: var(--rayon); }

/* ── Téléphone : deux onglets ── */
@media (max-width: 860px) {
  .barre { padding: 10px 16px; gap: 12px; flex-wrap: wrap; }
  .barre .logo { height: 28px; }
  .onglets { order: 5; width: 100%; margin: 0; }
  .onglets a { flex: 1; justify-content: center; padding: 0 8px; }
  .moi { margin-left: auto; }
  .colonne-devis { padding: 14px 16px 0; }
  .recherche { max-width: none; flex-basis: 100%; }
  .ligne-devis { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "qui montant" "num statut"; gap: 4px 10px; }
  .ligne-devis .qui { grid-area: qui; } .ligne-devis .montant { grid-area: montant; }
  .ligne-devis .num { grid-area: num; } .ligne-devis .statut { grid-area: statut; justify-self: end; }
  .detail { padding: 14px 16px 28px; }
}


/* Suppression : à l'écart des actions courantes, couleur d'alerte + libellé explicite. */
.zone-suppression { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--creme-fonce); color: var(--gris); font-size: 14px; }
.btn.danger { border-color: #8A2B2B; color: #8A2B2B; }
.btn.danger:hover { background: #F3E8E8; }

/* ── Devis en préparation (au-dessus de la liste) ── */
.brouillons h3 { font-size: 16px; margin: 4px 0 8px; }
.brouillons:empty { display: none; }
.brouillon { display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--vert); border-radius: var(--rayon); padding: 4px 10px 4px 4px; margin-bottom: 8px; background: var(--vert-pale); }
.ligne-brouillon { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 8px; min-height: 44px; }
.ligne-brouillon b { display: block; }
.ligne-brouillon span { display: block; color: var(--gris); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brouillons + #lignes-devis { margin-top: 10px; }

/* ── Feuille de devis : un devis vierge posé sur la table, rempli sur place ── */
.editeur { position: absolute; inset: 0; background: var(--creme); display: flex; flex-direction: column; z-index: 5; }
.editeur.verrou .ed-zone { opacity: .55; pointer-events: none; }
.ed-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 860px; width: 100%; margin: 0 auto; padding: 4px 24px 0; }
.ed-tete .lien { margin-left: 0; }
.ed-sauve { color: var(--gris); font-size: 14px; }
.ed-zone { flex: 1; overflow-y: auto; padding: 4px 24px 28px; }

.feuille { max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid var(--filet); border-radius: 4px; padding: 30px 34px 34px; box-shadow: 0 1px 0 var(--filet), 0 12px 28px -18px rgba(52, 80, 65, .35); }
.f-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--vert); }
.f-logo { height: 38px; }
.f-titre { text-align: right; }
.f-titre h2 { font-size: 30px; font-weight: 800; }
.f-titre span { color: var(--gris); font-size: 14px; }
.f-bloc { padding: 18px 0 6px; border-bottom: 1px solid var(--creme-fonce); }
.f-bloc:last-child { border-bottom: 0; }
.f-bloc h3 { font-size: 18px; margin-bottom: 10px; }
.f-aide { color: var(--gris); font-size: 15px; margin: 4px 0 10px; }

.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; }
.champ { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.champ.large { grid-column: 1 / -1; }
.lib { font-size: 14px; color: var(--gris); }
/* Le champ ressemble à une ligne de formulaire papier : pointillés tant qu'il est vide. */
.champ input, .champ select {
  width: 100%; min-height: 44px; padding: 6px 2px; border: 0; border-bottom: 2px solid var(--vert-fonce);
  background: transparent; font-size: 17px; border-radius: 0;
}
.champ.vide input { border-bottom: 2px dotted var(--gris); }
.champ input::placeholder { color: #9A9EA5; }
.champ input:focus, .champ select:focus { outline: none; border-bottom-color: var(--vert); background: var(--vert-pale); }
.champ select { border-bottom-style: solid; cursor: pointer; }

.choix-feuille { padding: 8px 0; }
.choix-feuille .lib { display: block; margin-bottom: 6px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: #fff; font-size: 16px; }
.seg button[aria-pressed="true"] { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
.seg button[aria-pressed="true"]::before { content: '✓ '; }
.seg button.inconnu { border-style: dashed; color: var(--gris); }
.seg button.inconnu[aria-pressed="true"] { background: var(--creme-fonce); border-color: var(--gris); color: var(--encre); }

.ligne-feuille { border: 1px solid var(--filet); border-radius: var(--rayon); padding: 10px 14px 12px; margin-bottom: 12px; background: #fff; }
.retirer { min-height: 44px; background: none; border: 0; color: #8A2B2B; text-decoration: underline; font-size: 15px; padding: 0; }
.ajouter { min-height: 48px; width: 100%; border: 2px dashed var(--vert); border-radius: var(--rayon); background: #fff; color: var(--vert-fonce); font-weight: 700; font-size: 16px; }
/* Totaux de la feuille : sous-total HT, TVA, puis le total TTC en grand. Calculés à chaque saisie. */
.f-totaux { margin: 18px 0 0 auto; width: min(440px, 100%); display: flex; flex-direction: column; }
.t-rang { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 9px 2px; border-bottom: 1px solid var(--creme-fonce); font-size: 17px; }
.t-rang b { font-weight: 600; white-space: nowrap; }
.t-rang:first-child { font-size: 18px; font-weight: 600; color: var(--vert-fonce); border-top: 2px solid var(--vert); }
.t-rang:first-child b { font-weight: 700; }
.f-ttc { margin-top: 10px; background: var(--vert-fonce); color: #fff; border-radius: var(--rayon); padding: 14px 16px; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; font-weight: 600; }
.f-ttc span { white-space: nowrap; }
.f-ttc b { font-size: 27px; font-weight: 800; white-space: nowrap; }
.f-ttc.attente { background: var(--creme-fonce); color: var(--encre); }
.f-ttc.attente b { font-size: 18px; font-weight: 600; }
.f-totaux .f-aide { margin: 8px 2px 0; }
/* Rappel du total à la fin de la feuille, juste avant « Créer le devis ». */
.ed-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 14px 16px; background: #fff; border: 2px solid var(--vert-fonce); border-radius: var(--rayon); }
.ed-total:empty { display: none; }
.ed-total span { font-weight: 600; color: var(--vert-fonce); }
.ed-total b { font-size: 26px; font-weight: 800; color: var(--vert-fonce); white-space: nowrap; }
.ed-total b.attente { font-size: 18px; font-weight: 600; color: var(--gris); }
.ed-total small { flex-basis: 100%; text-align: right; color: var(--gris); font-size: 15px; }

/* Fin de la feuille : ce qui manque, puis les boutons, à la suite du devis (rien de fixe à l'écran). */
.ed-fin { max-width: 860px; margin: 18px auto 0; display: flex; flex-direction: column; gap: 14px; }
.ed-fin .ed-actions { justify-content: flex-end; }
.ed-fin .btn { min-height: 52px; padding: 0 22px; }
.ed-etat { font-size: 16px; }
.ed-etat ul { margin: 4px 0 0; padding-left: 18px; }
.ed-bloquant { color: #8A2B2B; }
.ed-reste summary { cursor: pointer; color: var(--vert-fonce); font-weight: 600; min-height: 32px; }
.ed-complet { color: var(--vert-fonce); font-weight: 600; }
.ed-complet::before { content: '✓ '; }
.ed-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ed-actions .btn:disabled { opacity: .45; }

@media (max-width: 860px) {
  .ed-tete, .ed-zone { padding-left: 10px; padding-right: 10px; }
  .feuille { padding: 18px 14px 22px; }
  .grille { grid-template-columns: 1fr 1fr; }
  .ed-actions { width: 100%; }
  .ed-actions .btn { flex: 1; justify-content: center; padding: 0 8px; }
  .outils .btn { order: 2; }
}

/* Téléchargement du PDF depuis la liste : à côté de la ligne, pas dedans. */
.ligne-wrap { display: flex; align-items: center; border-bottom: 1px solid var(--creme-fonce); }
.ligne-wrap .ligne-devis { flex: 1; min-width: 0; border-bottom: 0; }
.telecharger { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 52px; min-height: 52px; margin-left: 6px; border-radius: var(--rayon); color: var(--vert-fonce); text-decoration: none; font-size: 12px; font-weight: 700; }
.telecharger:hover { background: var(--vert-pale); }
.btn svg { flex: none; }

/* Relecture avant création : fenêtre au-dessus de la feuille. */
.relecture { position: absolute; inset: 0; z-index: 20; background: rgba(28, 28, 40, .45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.rel-boite { background: #fff; border-radius: 12px; width: min(720px, 100%); padding: 24px 26px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .45); }
.rel-boite h3 { font-size: 22px; margin-bottom: 10px; }
.rel-boite h4 { font-family: 'Syne', sans-serif; color: var(--vert-fonce); font-size: 16px; margin: 0 0 6px; }
.rel-resume { margin: 0 0 12px; }
.rel-section { margin-top: 14px; }
.rel-section ul { margin: 0; padding-left: 20px; }
.rel-section li { margin-bottom: 6px; }
.rel-important { background: var(--alerte-pale); border-radius: 8px; padding: 12px 14px; color: var(--alerte); }
.rel-important h4 { color: var(--alerte); }
.rel-corrections { list-style: none; padding: 0 !important; }
.rel-corrections label { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--creme-fonce); cursor: pointer; }
.rel-corrections input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.rel-champ { display: block; font-size: 14px; color: var(--gris); }
.rel-avant { display: block; text-decoration: line-through; color: var(--gris); }
.rel-apres { display: block; font-weight: 600; }
.rel-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; }
@media (max-width: 860px) { .relecture { padding: 12px 8px; } .rel-boite { padding: 18px 16px; } .rel-actions .btn { flex: 1; justify-content: center; } }

/* Boîte Gmail (barre du haut) et fenêtre d'envoi */
.gmail { display: flex; align-items: center; }
.gmail-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--vert-fonce); font-size: 14px; font-weight: 600; background: var(--vert-pale); border: 0; border-radius: 999px; padding: 6px 12px; min-height: 36px; }
.gmail-connecter { min-height: 40px; font-size: 15px; }
.envoi .champ textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--filet); border-radius: var(--rayon); font-size: 16px; line-height: 1.5; resize: vertical; }
.envoi .champ input { border-bottom: 2px solid var(--vert-fonce); }
body > .relecture { position: fixed; }
@media (max-width: 860px) { .gmail { order: 4; width: 100%; } .gmail-ok span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.gmail-perdu { border-color: var(--alerte); color: var(--alerte); background: var(--alerte-pale); }

/* Connexion par Google */
.page-connexion { display: flex; align-items: center; justify-content: center; background: var(--creme); padding: 16px; }
.connexion { background: #fff; border: 1px solid var(--filet); border-radius: 12px; padding: 36px 32px; width: min(420px, 100%); text-align: center; }
.c-logo { height: 46px; margin-bottom: 18px; }
.connexion h1 { font-size: 30px; font-weight: 800; margin-bottom: 8px; }
.connexion p { color: var(--gris); margin: 0 0 18px; }
.c-google { width: 100%; justify-content: center; min-height: 52px; font-size: 17px; gap: 12px; }
.c-google svg { background: #fff; border-radius: 50%; padding: 2px; }
.c-erreur { color: var(--alerte) !important; background: var(--alerte-pale); border-radius: 8px; padding: 10px 12px; }
.c-aide { font-size: 14px; margin-top: 18px !important; }
.gmail-absent { font-size: 14px; color: var(--gris); }
.deconnexion { font-size: 14px; min-height: auto; margin-left: 8px; }

/* Adresse en une ligne : suggestions de la Base Adresse Nationale */
.champ.adresse { position: relative; }
.suggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; margin: 2px 0 0; padding: 4px 0; list-style: none;
  background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: 0 12px 24px -12px rgba(28, 28, 40, .3); }
.suggestions li { padding: 10px 14px; min-height: 44px; cursor: pointer; font-size: 16px; }
.suggestions li span { color: var(--gris); }
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: var(--vert-pale); }

/* ── Factures ── */
/* Bascule devis / factures : les deux moitiés d'un même bouton. */
.bascule { display: inline-flex; border: 1.5px solid var(--vert-fonce); border-radius: var(--rayon); overflow: hidden; }
.bascule button { min-height: 44px; padding: 0 18px; border: 0; background: #fff; color: var(--vert-fonce); font-weight: 600; }
.bascule button[aria-pressed="true"] { background: var(--vert-fonce); color: #fff; }
.bascule button:focus-visible { outline-offset: -3px; }
.s-emise { background: var(--creme-fonce); color: var(--encre); }
.s-envoyee { background: var(--bleu-pale); color: var(--bleu); }
.s-payee { background: var(--vert-pale); color: var(--vert-fonce); }
.s-en_retard { background: var(--alerte-pale); color: var(--alerte); }
.s-annulee { background: #EEE; color: var(--gris); }
.lien.dans-texte { margin: 0; padding: 0; min-height: 0; font-size: inherit; font-weight: 600; }

/* Ce que le client doit encore : le chiffre que Patrick vient chercher sur une facture. */
.reste { margin: 16px 0 4px; padding: 14px 18px; border-radius: var(--rayon); background: var(--vert-fonce); color: #fff;
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 18px; }
.reste span { font-weight: 600; }
.reste b { font-size: 30px; font-weight: 800; white-space: nowrap; }
.reste small { grid-column: 1 / -1; font-size: 15px; opacity: .9; }
.reste.retard { background: var(--alerte); }
.reste.paye { background: var(--vert-pale); color: var(--vert-fonce); }
.reste.neutre { background: var(--creme-fonce); color: var(--encre); }
.decompte { margin: 12px 0 0 auto; max-width: 460px; font-size: 16px; }
.decompte div { display: flex; justify-content: space-between; gap: 24px; padding: 4px 0; border-bottom: 1px solid var(--creme-fonce); }
.decompte div:last-child { border-bottom: 0; }
.factures-devis { border-top: 1px solid var(--creme-fonce); }

/* Fenêtres « Faire la facture », « Annuler », « Payée » */
.envoi .champ input[type="date"] { max-width: 240px; }
.ff-info { background: var(--vert-pale); color: var(--vert-fonce); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.ff-verse { border-left: 3px solid var(--vert); padding-left: 14px; margin-bottom: 6px; }
.ff-retour { margin-top: 14px; }
.ff-retour .rel-important ul { margin: 0; padding-left: 20px; }
.ff-pret { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border: 1.5px solid var(--vert); border-radius: var(--rayon); }
.ff-pret p { margin: 0; }
@media (max-width: 860px) {
  .bascule { flex: 1; } .bascule button { flex: 1; }
  .reste b { font-size: 26px; }
}

/* ── Feuille de devis en plein écran, présentée comme le devis imprimé (2026-10-11) ── */
.f-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.f-partie { border-radius: 8px; padding: 14px 16px 10px; min-width: 0; }
.f-emetteur { background: var(--creme); }
.f-emetteur b { display: block; font-family: 'Syne', sans-serif; font-size: 19px; color: var(--vert-fonce); margin: 2px 0 6px; }
.f-emetteur p { margin: 0; font-size: 15px; }
.f-client { border: 2px solid var(--vert-fonce); }
.f-client h3.lib { font-family: 'DM Sans', sans-serif; font-weight: 400; }
.f-cadre { margin-top: 18px; padding: 8px 0 4px; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.f-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.champ textarea { width: 100%; min-height: 44px; padding: 6px 2px; border: 0; border-bottom: 2px solid var(--vert-fonce); background: transparent; font: inherit; line-height: 1.45; border-radius: 0; resize: vertical; }
.champ.vide textarea { border-bottom: 2px dotted var(--gris); }
.champ textarea:focus { outline: none; border-bottom-color: var(--vert); background: var(--vert-pale); }

/* Valeur par défaut : écrite dans la case comme du vrai texte, et dite en dessous. */
.champ.a-defaut.vide input::placeholder { color: var(--encre); opacity: 1; }
.champ.a-defaut.vide::after { content: 'par défaut, modifiable'; font-size: 13px; color: var(--gris); }
.champ.a-defaut.vide:focus-within input::placeholder { color: #9A9EA5; }

/* Cases à cocher (une seule à la fois) : type de client, lieu de signature, TVA d'une ligne. */
.coches { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 8px; }
.coches button { min-height: 44px; padding: 0 12px 0 9px; display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--filet); border-radius: var(--rayon); font-size: 16px; touch-action: manipulation; }
.coches button:hover { border-color: var(--vert-fonce); }
.coches .boite { width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; background: #fff; border: 2px solid var(--vert-fonce); border-radius: 4px; }
.coches [aria-checked="true"] { background: var(--vert-pale); border-color: var(--vert-fonce); font-weight: 600; }
.coches [aria-checked="true"] .boite { background: var(--vert-fonce); }
.coches [aria-checked="true"] .boite::after { content: ''; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }

/* Une ligne du devis : désignation, puis quantité, unité, prix, TVA, total. */
.l-section { font-family: 'Syne', sans-serif; color: var(--vert-fonce); font-size: 16px; margin: 14px 0 6px; }
.l-chiffres { display: grid; grid-template-columns: 96px 120px 170px minmax(0, 1fr) auto; gap: 0 16px; align-items: start; }
.l-tva { padding: 6px 0; }
.l-tva .coches { margin: 2px 0 0; gap: 6px; }
.l-tva .coches button { padding: 0 9px 0 7px; }
.l-tva.a-choisir .lib { color: var(--alerte); font-weight: 700; }
.l-tva.a-choisir .boite { border-color: var(--alerte); }
.l-total { padding: 6px 0; min-width: 104px; text-align: right; }
.l-total b { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; white-space: nowrap; }
.f-dechets { color: var(--encre); }

/* Devis en cours de création : ligne grisée avec un indicateur qui tourne. */
.ligne-wrap.en-cours { background: var(--creme); }
.ligne-wrap.en-cours .ligne-devis { cursor: default; }
.ligne-wrap.en-cours .ligne-devis:hover { background: none; }
.ligne-wrap.en-cours .num, .ligne-wrap.en-cours .qui { opacity: .55; }
.ligne-wrap.en-cours .statut::before { content: none; }
.tourne { width: 14px; height: 14px; flex: none; border: 2px solid var(--filet); border-top-color: var(--vert-fonce); border-radius: 50%; animation: tourne .9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tourne { animation-duration: 4s; } }
.brouillon.echec { border-color: var(--alerte); background: var(--alerte-pale); }
.brouillon.echec .motif { color: var(--alerte); white-space: normal; font-weight: 600; }
.editeur.verrou .ed-zone { opacity: .55; pointer-events: none; }

@media (max-width: 860px) {
  .f-parties, .f-duo { grid-template-columns: 1fr; }
  .l-chiffres { grid-template-columns: 1fr 1fr; }
  .l-chiffres > :nth-child(3), .l-tva, .l-total { grid-column: 1 / -1; }
  .l-total { display: flex; align-items: center; justify-content: space-between; text-align: left; }
  .l-total b { min-height: 0; }
  .ed-tete { padding: 4px 10px 0; }
}

/* Lien discret (jeter un brouillon, recommencer, renvoi vers un devis). */
.lien { margin-left: auto; min-height: 44px; background: none; border: 0; color: var(--vert-fonce); text-decoration: underline; font-size: 15px; }
.ed-tete .lien, .lien.dans-texte { margin-left: 0; }

/* Les trois taux tiennent sur une ligne à l'écran large. */
@media (min-width: 861px) {
  .l-chiffres { grid-template-columns: 80px 104px 150px minmax(0, 1fr) auto; }
  .l-tva .coches { flex-wrap: nowrap; }
  .l-tva .coches button { padding: 0 8px 0 6px; gap: 7px; font-size: 15px; white-space: nowrap; }
  .l-tva .coches .boite { width: 20px; height: 20px; }
  .l-total { min-width: 92px; }
}
@media (max-width: 860px) {
  .onglets a { font-size: 15px; line-height: 1.2; text-align: center; }
  .ed-actions .btn { font-size: 15px; line-height: 1.2; text-align: center; padding: 0 6px; }
  .gmail-absent, .gmail-ok { font-size: 13px; }
}
.ligne-wrap.en-cours .ligne-devis { grid-template-columns: 118px minmax(0, 1fr) auto; }
.ligne-wrap.en-cours .montant { display: none; }
.ligne-wrap.en-cours .statut { justify-self: end; }
@media (max-width: 860px) { .ligne-wrap.en-cours .ligne-devis { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "qui qui" "num statut"; } }

/* Zones de texte de la feuille (désignation, précisions) : de la place, et elles grandissent avec le texte. */
.feuille .champ textarea { display: block; min-height: 64px; resize: none; overflow: hidden; }
.ligne-feuille + .ajouter, .ajouter + .ligne-feuille { margin-top: 0; }
.ajouter { margin-bottom: 12px; }

/* Objet du devis et précisions : les deux textes que le client lit en premier, mis en avant sur la feuille. */
.champ.fort { margin: 12px 0; padding: 12px 14px 14px; gap: 8px; background: var(--vert-pale); border: 1.5px solid var(--vert); border-radius: var(--rayon); }
.champ.fort .lib { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 17px; color: var(--vert-fonce); }
.feuille .champ.fort textarea { min-height: 52px; padding: 10px 12px; background: #fff; border: 1.5px solid var(--vert-fonce); border-radius: 8px; font-size: 18px; }
.feuille .champ.fort.vide textarea { border: 1.5px dashed var(--vert-fonce); }
.feuille .champ.fort textarea:focus { background: #fff; border-style: solid; outline: 3px solid var(--vert); outline-offset: 1px; }
.champ.fort #f-objet { font-weight: 600; }
.champ.fort #f-notes { min-height: 104px; }

/* Sous-question d'un choix (installation : climatisation ou autre, puis caractéristiques de l'appareil). */
.f-sous { margin: 2px 0 10px; padding: 8px 0 4px 14px; border-left: 3px solid var(--vert); }
.coches.liste { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.coches.liste button { width: 100%; min-height: 48px; padding: 8px 12px 8px 9px; text-align: left; align-items: flex-start; line-height: 1.35; }
.coches.liste .boite { margin-top: 1px; }
.coches.liste [aria-checked="true"] { font-weight: 400; }

/* ══ Téléphone (2026-10-11) ══════════════════════════════════════════════════════════════════════
   Patrick travaille surtout sur son téléphone. Trois règles :
   1. c'est la page qui défile, d'un seul tenant (plus de zone de défilement dans une autre) ;
   2. tout ce qui s'appuie fait au moins 44 px, et réagit sous le doigt ;
   3. un devis ouvert, une fenêtre d'envoi : plein écran, avec le retour toujours sous le pouce. */
.compte:empty { display: none; }
/* La ligne où l'on écrit se voit : cadre vert tant que le curseur est dans une de ses cases. */
.ligne-feuille:focus-within { border-color: var(--vert-fonce); box-shadow: 0 0 0 2px var(--vert); }
/* En-tête d'une ligne de la feuille : son numéro (le même que sur le devis) et le bouton pour la retirer. */
.l-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 2px; }
.l-num { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--vert-fonce); color: #fff; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; }
.l-tete .retirer { min-height: 44px; }
/* Ligne de déplacement : titre fixe, pas de bouton pour la retirer. */
.l-fixe { min-height: 44px; display: inline-flex; align-items: center; color: var(--gris); font-size: 15px; text-align: right; }
.l-titre { min-height: 44px; display: flex; align-items: center; padding: 6px 2px; font-size: 18px; font-weight: 600; color: var(--vert-fonce); }
/* Liste déroulante d'une case (unité d'une ligne) : même trait que les autres cases, flèche à droite. */
.champ select { -webkit-appearance: none; appearance: none; padding-right: 26px; color: var(--encre); text-overflow: ellipsis;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23345041' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 4px center; }
.champ.vide select { border-bottom: 2px dotted var(--gris); color: #6B7078; }
/* Devis commencés : un titre qui se déplie (replié quand il y en a beaucoup, pour laisser voir la liste). */
.brouillons summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--vert-fonce); font-weight: 600; font-size: 15px; }
.brouillons summary::-webkit-details-marker { display: none; }
.brouillons summary::after { content: ''; flex: none; width: 9px; height: 9px; margin: 0 8px 4px auto; border: solid var(--vert-fonce); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.brouillons details[open] summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
.brouillons details[open] summary { margin-bottom: 4px; }
.champ input, .note-form input, .recherche input { text-overflow: ellipsis; }
a, button, input, textarea, summary { touch-action: manipulation; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
.btn:active, .ajouter:active, .filtres button:active, .coches button:active, .onglets a:active { transform: scale(.98); }
.ligne-devis:active, .ligne-brouillon:active, .telecharger:active { background: var(--vert-pale); }
@media (prefers-reduced-motion: reduce) { .btn:active, .ajouter:active, .filtres button:active, .coches button:active, .onglets a:active { transform: none; } }
/* Au doigt, un survol reste collé après l'appui : on ne le montre qu'à la souris. */
@media (hover: none) {
  .ligne-devis:hover { background: none; }
  .coches button:hover { border-color: var(--filet); }
  .coches [aria-checked="true"]:hover { border-color: var(--vert-fonce); }
  .onglets a:hover { border-color: transparent; }
}

@media (max-width: 860px) {
  :root { --bord: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); --tete: 60px; }

  /* 1. La page défile, l'en-tête reste en haut sur une seule ligne. */
  body:not(.page-connexion) { display: block; height: auto; min-height: 100dvh; }
  body:has(#detail:not([hidden])), body:has(> .relecture) { overflow: hidden; }
  .barre { position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; gap: 10px; background: #fff;
    padding: calc(8px + env(safe-area-inset-top)) var(--bord) 8px; }
  .barre .logo { height: 24px; flex: none; }
  .onglets { order: 0; flex: 1; width: auto; min-width: 0; margin: 0; gap: 4px; }
  .onglets a { flex: 1 1 auto; min-width: 0; padding: 0 6px; white-space: nowrap; }
  .plan { position: static; }
  .editeur { position: static; display: block; min-height: calc(100dvh - var(--tete)); }
  .ed-zone { overflow: visible; padding: 0 0 calc(28px + env(safe-area-inset-bottom)); }
  .colonne-devis { height: auto; overflow: visible; display: block; padding: 12px var(--bord) calc(20px + env(safe-area-inset-bottom)); }
  .liste { overflow: visible; padding-bottom: 8px; }

  /* 2. Liste des devis. */
  .chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--creme-fonce); font-size: 14px; line-height: 1.3; }
  .chiffres b { font-size: 19px; }
  .outils { gap: 10px; }
  .outils h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .recherche { margin-left: 0; }
  .recherche input { height: 48px; }
  .filtres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0 6px; }
  .filtres button { min-height: 44px; padding: 0 4px; border-radius: var(--rayon); white-space: nowrap; }
  .ligne-devis { padding: 12px 2px; min-height: 64px; }
  .ligne-devis .num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; font-size: 13px; white-space: nowrap; }
  .ligne-devis .num small { display: inline; font-size: 12px; }
  .ligne-devis .qui span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 14px; line-height: 1.35; }
  .telecharger { margin-left: 2px; }
  p.vide { padding: 24px 0; }
  .brouillon .lien { flex: none; padding: 0 8px; }
  .ligne-brouillon span { white-space: normal; }
  /* Le compte et la boîte d'envoi : en bas de la liste, hors du passage. */
  .compte { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--creme-fonce); }
  .compte .gmail { order: 0; width: 100%; }
  .compte .gmail .btn { width: 100%; justify-content: center; min-height: 48px; }
  .compte .gmail-ok { max-width: 100%; min-height: 44px; }
  .compte .gmail-ok span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .compte .gmail-absent { padding: 6px 0; }
  .compte .moi { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; white-space: normal; }
  .deconnexion { min-height: 44px; margin: 0; padding: 0 2px; display: inline-flex; align-items: center; font-size: 15px; }

  /* 3. Un devis ouvert : plein écran, « retour » toujours en haut. */
  .detail { position: fixed; inset: 0; z-index: 40; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: env(safe-area-inset-top) var(--bord) calc(28px + env(safe-area-inset-bottom)); }
  .detail .retour { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; width: calc(100% + 2 * var(--bord)); min-height: 52px;
    margin: 0 calc(-1 * var(--bord)) 8px; padding: 0 var(--bord); background: #fff; border-bottom: 2px solid var(--vert); text-align: left; }
  .detail h2 { font-size: 24px; }
  .detail .coord { overflow-wrap: anywhere; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
  .actions .btn { min-height: 48px; padding: 6px 8px; justify-content: center; text-align: center; line-height: 1.2; }
  .actions .btn.plein { grid-column: 1 / -1; min-height: 54px; font-size: 18px; }
  .actions .btn:last-child:nth-child(even):not(.plein) { grid-column: auto; }
  /* Lignes du devis : la désignation sur toute la largeur, puis « quantité × prix, TVA » et le total à droite. */
  .tableau, .tableau tbody { display: block; }
  .tableau thead { display: none; }
  .tableau tr { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); column-gap: 6px; row-gap: 2px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--creme-fonce); }
  .tableau td { display: block; border: 0; padding: 0; }
  .tableau td:first-child { grid-column: 1 / -1; white-space: pre-line; overflow-wrap: anywhere; }
  .tableau td.n { text-align: left; font-size: 15px; color: var(--gris); }
  .tableau td:nth-child(2)::after { content: ' ×'; }
  .tableau td:nth-child(4)::before { content: 'TVA '; }
  .tableau td:nth-child(4) { margin-left: 8px; }
  .tableau td:nth-child(5) { justify-self: end; font-size: 16px; font-weight: 700; color: var(--encre); }
  .tableau tr.section { padding: 14px 0 0; border-bottom: 0; }
  .totaux { justify-content: space-between; align-items: baseline; gap: 12px; }
  .zone-suppression { flex-direction: column; align-items: stretch; gap: 8px; }
  .zone-suppression .btn { justify-content: center; }
  .note-form { flex-direction: column; }
  .note-form input { min-height: 48px; flex: none; }
  .note-form .btn { justify-content: center; min-height: 48px; }
  .decompte { max-width: none; }

  /* Fenêtres (envoyer au client, facture…) : une page entière, les boutons empilés, le principal en premier. */
  body > .relecture, .relecture { z-index: 60; padding: 0; align-items: stretch; background: #fff; overscroll-behavior: contain; }   /* au-dessus du devis ouvert (40) */
  .rel-boite { width: 100%; min-height: 100%; border-radius: 0; box-shadow: none;
    padding: calc(18px + env(safe-area-inset-top)) var(--bord) calc(20px + env(safe-area-inset-bottom)); }
  .rel-boite h3 { font-size: 19px; }
  .rel-actions { flex-direction: column-reverse; gap: 8px; }
  .rel-actions .btn { flex: none; width: 100%; min-height: 52px; justify-content: center; }
  .envoi .champ textarea { min-height: 40dvh; }
  .envoi .champ input[type="date"] { max-width: none; }

  /* 4. La feuille de devis : bord à bord, une colonne. */
  .ed-tete { padding: 0 var(--bord); min-height: 44px; flex-wrap: wrap; gap: 0 12px; }
  .feuille { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; padding: 14px var(--bord) 20px; }
  .f-entete { align-items: center; gap: 4px 12px; flex-wrap: wrap; padding-bottom: 10px; }
  .f-logo { height: 28px; }
  .f-titre { display: contents; }
  .f-titre h2 { font-size: 24px; margin-left: auto; }
  .f-titre span { flex-basis: 100%; }
  .f-parties { margin-top: 10px; }
  .f-emetteur { display: none; }   /* les coordonnées de Climago : rien à saisir, elles sont sur le PDF */
  .f-client { border: 0; padding: 0; }
  .f-client h3.lib { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 18px; color: var(--vert-fonce); margin: 6px 0; }
  .f-cadre { margin-top: 12px; }
  .f-bloc h3 { margin-bottom: 8px; }
  .champ { scroll-margin-top: calc(var(--tete) + 12px); }
  .champ input, .champ textarea { font-size: 17px; }
  /* Cases : deux par rangée, de même largeur ; les trois taux de TVA sur une rangée. */
  .coches:not(.liste) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .coches:not(.liste) button { min-height: 48px; padding: 6px 10px 6px 8px; text-align: left; line-height: 1.2; }
  .l-tva .coches:not(.liste) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .l-tva .coches:not(.liste) button { padding: 0 6px; gap: 7px; white-space: nowrap; }
  .coches.liste button { min-height: 52px; }
  .f-sous { padding-left: 12px; }
  .champ.fort { padding: 10px 12px 12px; }
  .ligne-feuille { padding: 8px 12px 6px; }
  /* Une ligne : quantité et unité, puis prix et total côte à côte, puis la TVA. */
  .l-chiffres { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .l-chiffres > :nth-child(3) { grid-column: 1; grid-row: 2; }
  .l-total { grid-column: 2; grid-row: 2; display: block; text-align: right; }
  .l-total b { min-height: 44px; }
  .l-tva { grid-column: 1 / -1; grid-row: 3; }
  .ajouter { min-height: 64px; font-size: 21px; border-width: 2.5px; }
  .f-totaux { width: 100%; }
  .f-ttc b { font-size: 28px; }
  /* Fin de la feuille : « Créer le devis » d'abord, en grand. */
  .ed-fin { margin-top: 16px; padding: 0 var(--bord); }
  .ed-actions { flex-direction: column-reverse; gap: 8px; }
  .ed-fin .ed-actions .btn { flex: none; width: 100%; min-height: 56px; font-size: 18px; justify-content: center; }
  .ed-fin .ed-actions .btn:not(.plein) { min-height: 48px; font-size: 16px; }
  .ed-reste summary { min-height: 44px; display: flex; align-items: center; }
  .suggestions li { min-height: 48px; display: flex; flex-direction: column; justify-content: center; }
}
/* Écran très étroit : les deux onglets prennent toute la largeur. */
@media (max-width: 359px) {
  .barre .logo { display: none; }
  .coches:not(.liste) button { font-size: 15px; gap: 6px; padding-left: 6px; padding-right: 6px; hyphens: auto; overflow-wrap: anywhere; }
}