/* ==========================================================================
   TiDevis — l'outil de devis (app.html)
   Téléphone d'abord : barre du haut, onglets en bas, total toujours visible.
   Ordinateur (1024 px et plus) : colonne de gauche ; à partir de 1280 px,
   le total et l'envoi restent affichés à droite du devis.
   ========================================================================== */

:root {
  --barre-h: 60px;
  --tab-h: 64px;
  --cote-l: 256px;
}

body.app { font-size: 1rem; line-height: 1.5; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 24px); }
body.app.vue-devis-active { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 96px); }

/* ---------- Barre du haut ---------- */
.app-barre {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--barre-h); padding: 0 10px 0 16px; padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  border-bottom: 1px solid var(--trait);
}
@supports (backdrop-filter: blur(8px)) {
  .app-barre { background: color-mix(in srgb, var(--fond) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
}
.app-barre .logo { font-size: 1.1875rem; }
.app-barre .logo-marque { width: 30px; height: 30px; }
.app-barre-etat { display: flex; align-items: center; gap: 6px; min-width: 0; }
.app-barre .bouton-menu { display: inline-flex; border: 0; background: transparent; width: 44px; height: 44px; }
@media (hover: hover) { .app-barre .bouton-menu:hover, .app-barre .bouton-menu[aria-expanded="true"] { background: var(--surface-3); } }
.enregistre { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--encre-3); font-weight: 550; white-space: nowrap; }
.enregistre:not(:empty)::before {
  content: ""; width: 14px; height: 14px; background: var(--vert);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
#statut-ia { min-height: 32px; padding: 4px 12px; }
@media (max-width: 380px) { .enregistre { display: none; } }

/* ---------- Colonne de gauche (ordinateur) ---------- */
.app-cote { display: none; }

/* ---------- Zone principale ---------- */
.app-main { padding: 18px 16px 24px; }
.vue { max-width: 780px; margin: 0 auto; }
.vue-entete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px;
  margin-bottom: 18px;
}
.vue-entete h1 { font-size: clamp(1.625rem, 5vw, 2.125rem); font-weight: 820; font-stretch: 112%; letter-spacing: -0.024em; line-height: 1.08; }
.vue-entete .hint { margin-top: 6px; }
.vue-entete > .btn { flex: none; }

.bandeau {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 780px; margin: 0 auto 16px; padding: 12px 14px; border-radius: var(--r-2);
  background: var(--rouge-pale); color: var(--rouge); border: 1px solid color-mix(in srgb, var(--rouge) 25%, transparent);
  font-size: 0.9375rem; font-weight: 550;
}
.bandeau .ic { flex: none; margin-top: 1px; }
.bandeau-calme { background: var(--surface-3); color: var(--encre); border-color: var(--trait); }
.bandeau-installer { background: var(--jaune-pale); color: var(--encre); border-color: color-mix(in srgb, var(--jaune-bord) 40%, transparent); align-items: center; }
.bandeau-installer .ic { color: var(--jaune-texte); margin-top: 0; }
.bandeau-installer-corps { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bandeau-installer-texte .ic-inline { width: 18px; height: 18px; vertical-align: -4px; margin: 0 2px; color: var(--encre); }
.bandeau-fermer { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--encre-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .bandeau-fermer:hover { background: color-mix(in srgb, var(--encre) 8%, transparent); color: var(--encre); } }
.bandeau-fermer .ic { width: 18px; height: 18px; margin: 0; }

/* ---------- Cartes de l'outil ---------- */
.bloc {
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px 16px; border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--trait);
}
.bloc + .bloc, .bloc + .bloc-repli, .bloc-repli + .bloc-repli, .bloc-repli + .bloc { margin-top: 12px; }
.bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; min-height: 32px; }
.bloc-tete h2, .bloc-tete h3 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 760; font-stretch: var(--mi-large); letter-spacing: -0.01em; }
.bloc-tete h3 { font-size: 1.0625rem; }
.bloc-tete-droite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.num {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--encre); color: var(--fond); font-size: 0.8125rem; font-weight: 800; font-stretch: 110%; letter-spacing: 0;
}
.grille-2, .grille-4 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.champ-court { max-width: 180px; }
.champs { display: flex; flex-direction: column; gap: 14px; }
.ligne-cp { display: grid; grid-template-columns: minmax(104px, 0.45fr) minmax(0, 1fr); gap: 12px; }
.mini-label { font-size: 0.75rem !important; font-weight: 650 !important; color: var(--encre-3) !important; letter-spacing: 0.01em; }
@media (min-width: 560px) {
  .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-2 > .champ-large { grid-column: 1 / -1; }
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .app-main { padding: 24px 24px 32px; }
  .bloc { padding: 22px 24px; }
}
@media (min-width: 900px) { .grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cartes repliables (client, conditions) */
.bloc-repli { padding: 0; gap: 0; }
.bloc-repli > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titre fleche" "resume fleche";
  align-items: center; gap: 2px 12px; padding: 16px; min-height: 64px; cursor: pointer; list-style: none;
  border-radius: var(--r-3);
}
.bloc-repli > summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .bloc-repli > summary:hover { background: var(--surface-2); } }
.bloc-repli > summary:focus-visible { outline: 2px solid var(--encre); outline-offset: -2px; }
.bloc-repli > summary h2 { grid-area: titre; }
.repli-resume { grid-area: resume; padding-left: 36px; color: var(--encre-3); font-size: 0.9375rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repli-resume.is-complet { color: var(--encre-2); }
.repli-resume.is-manquant { color: var(--orange); font-weight: 600; }
.repli-fleche { grid-area: fleche; width: 22px; height: 22px; color: var(--encre-3); transition: transform var(--transition); }
.bloc-repli[open] > summary .repli-fleche { transform: rotate(180deg); }
.bloc-repli[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.bloc-corps { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px 20px; }
@media (min-width: 640px) {
  .bloc-repli > summary { padding: 18px 24px; }
  .bloc-corps { padding: 4px 24px 24px; }
}

/* ---------- Devis : en-tête ---------- */
.devis-entete { align-items: flex-start; }
.devis-titre { min-width: 0; flex: 1 1 260px; }
.devis-meta { min-height: 1.5em; font-size: 0.875rem; color: var(--encre-3); font-weight: 550; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
#titre-devis { overflow-wrap: anywhere; }
.devis-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.tdv-devis-vide #btn-nouveau { display: none; }

/* Carte de bienvenue */
.accueil-outil {
  display: grid; gap: 14px; margin-bottom: 14px; padding: 18px; border-radius: var(--r-3);
  background: var(--jaune-pale); border: 1px solid color-mix(in srgb, var(--jaune-bord) 45%, transparent);
}
html.tdv-accueil-cache #accueil { display: none; }
.accueil-outil h2 { font-size: 1.125rem; font-weight: 780; font-stretch: var(--mi-large); }
.accueil-etapes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0; }
.accueil-etapes li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9375rem; }
.accueil-etapes span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--encre); color: var(--fond); font-size: 0.75rem; font-weight: 800; }
.accueil-outil .hint { color: var(--encre-2); }
.accueil-outil .hint a { font-weight: 650; color: var(--encre); }
.accueil-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
@media (max-width: 759px) { .accueil-outil { padding: 16px; gap: 10px; } .accueil-outil .hint { font-size: 0.8438rem; } }
@media (min-width: 760px) { .accueil-outil { grid-template-columns: 1fr auto; align-items: center; padding: 20px 24px; } .accueil-actions { flex-direction: column; align-items: stretch; } }

/* ---------- Devis : disposition ---------- */
.devis-grille { display: block; }
.envoi { margin-top: 12px; }

/* ---------- 1. Travaux ---------- */
#description { min-height: 120px; font-size: 1.0625rem; line-height: 1.5; }
.desc-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.compteur { margin-left: auto; font-size: 0.8125rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
#btn-dicter.is-actif { --btn-fond: var(--rouge); --btn-texte: #FFFFFF; --btn-bord: var(--rouge); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rouge) 40%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
.champ-tva { display: flex; flex-direction: column; gap: 8px; }
.champ-tva legend { margin-bottom: 0; }
.champ-tva .segments span { flex-direction: column; gap: 1px; min-height: 54px; padding: 6px 10px; font-size: 1rem; font-weight: 750; }
.champ-tva .segments small { font-size: 0.75rem; font-weight: 550; color: var(--encre-3); }
.tva-franchise { font-weight: 550; }
.tva-franchise a { font-weight: 650; }
.generer { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.generer .btn { width: 100%; }
.generer .hint a { font-weight: 650; color: var(--encre); }
@media (min-width: 640px) { .generer .btn { width: auto; align-self: flex-start; } }
.etat-generation {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-2);
  background: var(--surface-3); font-size: 0.9375rem; font-weight: 550; line-height: 1.45;
}
.etat-generation.is-erreur { background: var(--rouge-pale); color: var(--rouge); }
.etat-generation.is-info { background: var(--jaune-pale); color: var(--encre); }
.etat-generation a { font-weight: 650; color: inherit; }
.points { align-items: flex-start; }
.points > .ic { margin-top: 2px; color: var(--jaune-texte); }
.points h3 { font-size: 0.9688rem; font-weight: 750; }
.points ul { margin-top: 6px; padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; color: var(--encre-2); }

/* ---------- 2. Lignes ---------- */
.champ-objet input { font-weight: 600; }
.lignes-vide {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-2);
  border: 1.5px dashed var(--trait); color: var(--encre-2); font-size: 0.9375rem;
}
.lignes-vide .ic { flex: none; width: 26px; height: 26px; color: var(--encre-3); }
.lignes-vide strong { color: var(--encre); }
.lignes { list-style: none; border: 1px solid var(--trait); border-radius: var(--r-2); overflow: hidden; }
.lignes:empty { display: none; }
.section-titre { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; background: var(--surface-3); border-top: 1px solid var(--trait); }
.section-titre:first-child { border-top: 0; }
.section-titre label { flex: none; }
.section-titre .ic { width: 16px; height: 16px; color: var(--encre-3); }
.section-titre input {
  min-height: 34px; padding: 4px 8px; border: 1px solid transparent; background: transparent; box-shadow: none;
  font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2);
}
@media (hover: hover) { .section-titre input:hover { border-color: var(--trait); background: var(--surface); } }
.section-titre input:focus { border-color: var(--encre); background: var(--surface); text-transform: none; letter-spacing: 0; }

.ligne { position: relative; border-top: 1px solid var(--trait-doux); background: var(--surface); }
.lignes > .ligne:first-child { border-top: 0; }
.ligne.is-a-verifier::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rayures); z-index: 1;
}
.ligne-rangee { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; }
.ligne-case-zone { display: grid; place-items: center; min-height: 64px; }
.ligne-case-zone .case { width: 26px; height: 26px; border-radius: 8px; margin: 0; }
.ligne-case-zone label { display: grid; place-items: center; width: 48px; height: 56px; cursor: pointer; }
.ligne-resume {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 3px 10px;
  width: 100%; min-height: 64px; padding: 12px 14px 12px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.ligne-resume:focus-visible { outline: 2px solid var(--encre); outline-offset: -2px; border-radius: 8px; }
.ligne-nom { font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; }
.ligne-nom.est-vide { color: var(--encre-3); font-style: italic; font-weight: 500; }
.ligne-montant { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ligne-sous { grid-column: 1 / -1; font-size: 0.875rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .ligne-resume:hover { background: var(--surface-2); } }
.lignes-aide { margin-top: -6px; }
.ligne-note { grid-column: 1 / -1; font-size: 0.8125rem; font-weight: 650; color: var(--orange); }
.ligne.is-verifiee .ligne-nom { color: var(--encre); }
.ligne.is-ouverte { background: var(--surface-2); }
.ligne-edition { display: flex; flex-direction: column; gap: 14px; padding: 2px 14px 16px 14px; }
.edition-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.edition-grille .z-des, .edition-grille .z-det, .edition-grille .z-section { grid-column: 1 / -1; }
.edition-grille textarea { min-height: 48px; resize: none; overflow: hidden; }
.edition-grille select { padding-right: 32px; padding-left: 12px; background-position: right 8px center; background-size: 18px; }
.edition-grille .z-total { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.edition-grille .z-total .valeur { min-height: 48px; display: flex; align-items: center; font-weight: 750; font-variant-numeric: tabular-nums; }
.edition-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.edition-actions .espace { flex: 1; }
.edition-actions .btn-discret { min-height: 40px; padding: 0 10px; font-size: 0.9063rem; }
.edition-actions .ic { width: 18px; height: 18px; }
.ligne-verif-texte { font-size: 0.875rem; color: var(--orange); font-weight: 600; }
@media (min-width: 640px) {
  .ligne-edition { padding-left: 48px; }
  .edition-grille { grid-template-columns: 0.85fr 1.15fr 1.2fr 1fr 1.05fr; }
  .edition-grille .z-total .valeur { justify-content: flex-end; }
}
.lignes-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 420px) { .bloc-lignes .lignes-actions .btn { flex: 1 1 auto; padding: 0 10px; font-size: 0.9063rem; } }

/* Squelette pendant la génération */
.squelette { padding: 16px 14px 16px 48px; border-top: 1px solid var(--trait-doux); display: grid; gap: 8px; }
.squelette:first-child { border-top: 0; }
.squelette span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-3) 0%, var(--trait-doux) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: miroiter 1.3s ease-in-out infinite; }
.squelette span:first-child { width: 72%; }
.squelette span:last-child { width: 40%; height: 10px; }
@keyframes miroiter { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Totaux */
.totaux { display: grid; gap: 16px; padding-top: 16px; border-top: 1px solid var(--trait-doux); }
.totaux-reglages { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.totaux-reglages .champ-court { max-width: none; }
.totaux-liste { display: flex; flex-direction: column; margin: 0; }
.totaux-liste > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 5px 0; color: var(--encre-2); font-size: 0.9688rem; }
.totaux-liste dt, .totaux-liste dd { margin: 0; }
.totaux-liste dd { white-space: nowrap; color: var(--encre); font-weight: 600; }
.totaux-liste .ttc { margin-top: 6px; padding-top: 12px; border-top: 2px solid var(--encre); color: var(--encre); font-size: 1.25rem; font-weight: 820; }
.totaux-liste .ttc dd { font-weight: 820; }
.totaux-liste .mention dt { font-size: 0.875rem; font-style: italic; }
@media (min-width: 640px) {
  .totaux { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: start; gap: 32px; }
  .totaux-liste { max-width: 380px; width: 100%; margin-left: auto; }
}

/* ---------- 3. Client ---------- */
.client-carnet-note { display: flex; flex-wrap: wrap; gap: 4px 8px; }

/* ---------- 5. Relire et envoyer ---------- */
.envoi-carte {
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px 16px; border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--trait);
}
.envoi-titre { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 760; font-stretch: var(--mi-large); }
.envoi-somme { padding: 16px 18px; border-radius: var(--r-2); background: var(--bande); color: var(--sur-bande); }
.envoi-label { font-size: 0.8125rem; font-weight: 650; color: var(--sur-bande-2); letter-spacing: 0.02em; }
.envoi-total { margin-top: 2px; font-size: clamp(1.875rem, 7vw, 2.25rem); font-weight: 850; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.1; }
.envoi-detail { margin-top: 4px; font-size: 0.8438rem; color: var(--sur-bande-2); }
.envoi-actions { display: flex; flex-direction: column; gap: 8px; }
.envoi-actions-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.envoi-actions-2 .btn { padding: 0 12px; }
.btn-whatsapp { --btn-fond: #25D366; --btn-texte: #072213; --btn-bord: #1EB457; font-weight: 700; }
@media (hover: hover) { .btn-whatsapp:hover { background: #20BD5A; } }
:root[data-theme="dark"] .btn-whatsapp, :root:not([data-theme="light"]) .btn-whatsapp { --btn-texte: #06230F; }
#btn-signer .badge-pro { margin-left: 2px; }
.controles { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.controles li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.9063rem; line-height: 1.45; color: var(--encre-2); }
.controles li .ic { width: 20px; height: 20px; }
.controles li.warn .ic { color: var(--orange); }
.controles li.ok { color: var(--vert); font-weight: 600; }
.controles li.ok .ic { color: var(--vert); }
.controles a, .controles .lien-bouton { font-weight: 650; color: var(--encre); white-space: nowrap; }
.controles-titre { font-size: 0.875rem; font-weight: 750; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.controles-plus { margin-top: 6px; font-size: 0.875rem; }
.controles-bloc.is-alerte { padding: 14px; border-radius: var(--r-2); background: var(--orange-pale); border: 1px solid color-mix(in srgb, var(--orange) 22%, transparent); }
.controles-bloc.is-alerte .controles li { color: var(--encre); }
.controles-bloc.is-ok { padding: 12px 14px; border-radius: var(--r-2); background: var(--vert-pale); }
.quota-gratuit { font-size: 0.875rem; color: var(--encre-2); padding: 10px 12px; border-radius: var(--r-1); background: var(--surface-3); }
.quota-gratuit.is-epuise { background: var(--orange-pale); color: var(--encre); }
.quota-gratuit a { font-weight: 650; color: var(--encre); }
.envoi-statut legend { font-size: 0.875rem; margin-bottom: 8px; }
.segments-statut span { min-height: 40px; padding: 0 4px; font-size: 0.8438rem; }
.segments-statut input[value="envoye"]:checked + span { background: var(--jaune-pale); color: var(--jaune-texte); }
.segments-statut input[value="accepte"]:checked + span { background: var(--vert-pale); color: var(--vert); }
.segments-statut input[value="refuse"]:checked + span { background: var(--rouge-pale); color: var(--rouge); }
.envoi-pied { display: flex; flex-wrap: wrap; gap: 4px; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--trait-doux); }
.signature-faite { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-2); background: var(--vert-pale); font-size: 0.875rem; }
.signature-faite img { width: 96px; height: 48px; object-fit: contain; background: #FFFFFF; border-radius: 6px; border: 1px solid var(--trait); }
.signature-faite.is-perimee { background: var(--orange-pale); }
.signature-faite .lien-bouton { margin-top: 4px; font-size: 0.875rem; }

/* Bas d'écran (téléphone) : total et PDF, au-dessus des onglets */
.barre-total {
  position: fixed; z-index: 75; left: 10px; right: 10px;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 8px);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 16px; border-radius: 16px;
  background: var(--bande); color: var(--sur-bande); box-shadow: var(--ombre-3);
}
:root[data-theme="dark"] .barre-total { border: 1px solid var(--trait-bande); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .barre-total { border: 1px solid var(--trait-bande); } }
.barre-total-infos {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 44px; padding: 0; border: 0; background: none; color: inherit; text-align: left;
}
.barre-total-infos:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; border-radius: 8px; }
.barre-haut { font-size: 0.75rem; font-weight: 600; color: var(--sur-bande-2); line-height: 1.25; }
.barre-verif { color: var(--jaune); font-weight: 700; }
.barre-montant { font-size: 1.1875rem; font-weight: 820; line-height: 1.2; letter-spacing: -0.01em; }
.barre-total .btn { flex: none; min-height: 46px; padding: 0 16px; }
.barre-total { transition: transform 220ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease; }
.barre-total.is-masquee { transform: translateY(calc(100% + 16px)); opacity: 0; pointer-events: none; }
@media (min-width: 640px) and (max-width: 1023px) { .barre-total { max-width: 760px; margin-inline: auto; } }
.barre-total :focus-visible { outline-color: var(--jaune); }

/* Onglets (téléphone) */
.tabbar {
  position: fixed; z-index: 76; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--trait);
}
.onglet {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--encre-3); text-decoration: none; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .onglet:hover { color: var(--encre); text-decoration: none; } }
.onglet .ic { width: 24px; height: 24px; box-sizing: content-box; padding: 4px 18px; border-radius: 999px; transition: background-color var(--transition), color var(--transition); }
.onglet[aria-current="page"] { color: var(--encre); }
.onglet[aria-current="page"] .ic { background: var(--jaune); color: var(--sur-jaune); }
.onglet:focus-visible { outline-offset: -4px; }

/* ---------- Mes devis ---------- */
.indicateurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.indicateur { padding: 12px; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--trait); min-width: 0; }
.indicateur-label { font-size: 0.75rem; font-weight: 650; color: var(--encre-3); line-height: 1.3; }
.indicateur-valeur { margin-top: 2px; font-size: 1.375rem; font-weight: 820; font-stretch: 108%; line-height: 1.15; font-variant-numeric: tabular-nums; }
.indicateur-detail { font-size: 0.8125rem; color: var(--encre-2); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .indicateur { padding: 14px 16px; } .indicateur-valeur { font-size: 1.625rem; } }
.rappel-sauvegarde { margin-bottom: 16px; align-items: center; }
.rappel-sauvegarde .lien-bouton { white-space: nowrap; }
.relances { margin-bottom: 20px; padding: 16px; border-radius: var(--r-3); background: var(--jaune-pale); border: 1px solid color-mix(in srgb, var(--jaune-bord) 45%, transparent); }
.relances h2 { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 760; }
.relances > .hint { margin: 6px 0 12px; color: var(--encre-2); }
.filtres { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.champ-recherche { position: relative; flex: 1; }
.champ-recherche > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--encre-3); pointer-events: none; }
.champ-recherche input { padding-left: 44px; }
.pastilles-filtre { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.pastilles-filtre::-webkit-scrollbar { display: none; }
.pastilles-filtre label { position: relative; flex: none; }
.pastilles-filtre input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pastilles-filtre span {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--trait); background: var(--surface); color: var(--encre-2); font-weight: 620; font-size: 0.9063rem;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
@media (hover: hover) { .pastilles-filtre input:hover + span { border-color: var(--trait-fort); } }
.pastilles-filtre input:checked + span { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.pastilles-filtre input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }
.filtre-lot { min-width: 200px; }
@media (min-width: 760px) {
  .filtres { flex-direction: row; align-items: center; }
  .pastilles-filtre { margin: 0; padding: 2px; }
}
.synthese { margin: 0 2px 12px; font-size: 0.875rem; color: var(--encre-3); }
.synthese:empty { display: none; }
.liste-cartes { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.carte-devis {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
  padding: 14px 14px 12px 16px; border-radius: var(--r-2);
  background: var(--surface); border: 1px solid var(--trait);
  transition: border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) { .carte-devis:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-1); } }
.liste-cartes > li { z-index: 0; }
.liste-cartes > li:has(.menu-carte[open]) { z-index: 3; }
.carte-devis.is-courant { border-color: var(--encre); }
.carte-devis h2, .carte-devis h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.lien-carte { color: inherit; text-decoration: none; }
.lien-carte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.lien-carte:focus-visible { outline: none; }
.lien-carte:focus-visible::after { outline: 2px solid var(--encre); outline-offset: 2px; }
.carte-meta { font-size: 0.875rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.carte-montant { font-weight: 780; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.carte-montant.montant-discret { font-weight: 600; color: var(--encre-3); font-size: 0.9063rem; }
.carte-bas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; position: relative; z-index: 1; }
.carte-bas .espace { flex: 1; }
.carte-bas .btn { min-height: 38px; padding: 0 12px; font-size: 0.9063rem; }
.carte-bas .btn .ic { width: 18px; height: 18px; }
.carte-devis.relance-verrou { opacity: 0.75; }
.relance-pro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--trait); }
.relance-pro p { flex: 1 1 260px; font-size: 0.9375rem; }
.tarifs-pro { margin-bottom: 14px; background: var(--jaune-pale); border-color: color-mix(in srgb, var(--jaune-bord) 45%, transparent); }

/* Menu d'actions d'une carte (⋯) */
.menu-carte { position: relative; }
.menu-carte > summary {
  list-style: none; display: inline-grid; place-items: center; width: 40px; height: 38px; border-radius: 10px; cursor: pointer; color: var(--encre-2);
}
.menu-carte > summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .menu-carte > summary:hover, .menu-carte[open] > summary { background: var(--surface-3); color: var(--encre); } }
.menu-carte > summary:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; }
.menu-carte > summary .ic { width: 20px; height: 20px; }
.menu-panneau {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px;
  display: flex; flex-direction: column; padding: 6px; border-radius: var(--r-2);
  background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre-3);
  animation: menu-entree 120ms ease-out;
}
.menu-panneau.vers-haut { top: auto; bottom: calc(100% + 6px); }
.menu-panneau { scroll-margin: 80px 0 calc(var(--tab-h) + 96px); }
@media (min-width: 1024px) { .menu-panneau { scroll-margin: 80px 0 24px; } }
.menu-panneau button, .menu-panneau a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px;
  background: none; color: var(--encre); font-size: 0.9375rem; font-weight: 550; text-align: left; text-decoration: none; white-space: nowrap;
}
@media (hover: hover) { .menu-panneau button:hover, .menu-panneau a:hover { background: var(--surface-3); } }
.menu-panneau .ic { width: 18px; height: 18px; color: var(--encre-2); }
.menu-panneau .danger, .menu-panneau .danger .ic { color: var(--rouge); }
.menu-panneau hr { margin: 4px 6px; border-color: var(--trait-doux); }

/* États vides */
.vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 20px; border-radius: var(--r-3); border: 1.5px dashed var(--trait); }
.vide > .ic { width: 34px; height: 34px; color: var(--encre-3); margin-bottom: 4px; }
.vide .hint { max-width: 44ch; }
.vide .btn { margin-top: 10px; }
li.vide { list-style: none; }
.note-bas { margin-top: 18px; }
.note-pro { display: block; }
#carnet-limite { margin-bottom: 14px; }

/* Fiche client en édition */
.client-edition { display: flex; flex-direction: column; gap: 14px; }
.client-form { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Mes tarifs ---------- */
.liste-tarifs { display: flex; flex-direction: column; gap: 8px; }
.lot-titre { margin: 18px 4px 2px; font-size: 0.8125rem; font-weight: 760; letter-spacing: 0.07em; text-transform: uppercase; color: var(--encre-3); }
.lot-titre:first-child { margin-top: 4px; }
.tarif {
  display: grid; gap: 10px; align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  grid-template-areas: "des des des" "unite prix suppr" "badge badge badge";
  padding: 12px; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--trait);
}
.tarif .z-designation { grid-area: des; }
.tarif .z-unite { grid-area: unite; }
.tarif .prix { grid-area: prix; }
.tarif > .chip { grid-area: badge; justify-self: start; }
.tarif .supprimer { grid-area: suppr; }
.tarif .mots { grid-column: 1 / -1; }
.tarif input, .tarif select { min-height: 44px; }
.supprimer { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--encre-3); }
@media (hover: hover) { .supprimer:hover { background: var(--rouge-pale); color: var(--rouge); } }
.supprimer .ic { width: 20px; height: 20px; }
@media (min-width: 760px) {
  .tarif { grid-template-columns: minmax(0, 1fr) 110px 120px 116px 44px; grid-template-areas: "des unite prix badge suppr"; }
  .tarif > .chip { align-self: center; justify-self: center; margin-top: 18px; }
}

/* ---------- Paramètres ---------- */
.sous-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 18px; padding: 2px 16px; }
.sous-nav::-webkit-scrollbar { display: none; }
.sous-nav button {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--trait); background: var(--surface); color: var(--encre-2); font-weight: 620; font-size: 0.9375rem;
}
.sous-nav button .ic { width: 18px; height: 18px; }
@media (hover: hover) { .sous-nav button:hover { border-color: var(--trait-fort); color: var(--encre); } }
.sous-nav button[aria-current="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }
@media (min-width: 640px) { .sous-nav { margin: 0 0 20px; padding: 2px; } }
.groupe-param { margin: 4px 2px 14px; }
.groupe-titre { font-size: 1.3125rem; font-weight: 800; font-stretch: var(--mi-large); letter-spacing: -0.015em; }
.groupe-param .hint { margin-top: 4px; }
.completude-entete h3 { font-size: 1rem; font-weight: 750; }
.completude-barre { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.completude-barre span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--jaune); transition: width 300ms ease; }
.completude.is-complet .completude-barre span { background: var(--vert); }
.completude-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.completude-liste li.ok { color: var(--vert); font-weight: 600; font-size: 0.9375rem; }
.completude-liste .lien-bouton {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px dashed var(--trait-fort); background: var(--surface); text-decoration: none; font-size: 0.875rem; font-weight: 620;
}
.completude-liste .lien-bouton::before { content: "+"; font-weight: 800; color: var(--encre-3); }
@media (hover: hover) { .completude-liste .lien-bouton:hover { border-style: solid; border-color: var(--encre); } }
.logo-zone { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.logo-apercu {
  display: grid; place-items: center; width: 150px; height: 96px; padding: 10px; flex: none;
  border-radius: var(--r-2); border: 1.5px dashed var(--trait-fort); background: #FFFFFF; color: #5C6270; font-size: 0.875rem;
}
.logo-apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1 1 220px; }
.abo-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.abo-entete h3 { font-size: 1.1875rem; font-weight: 800; font-stretch: var(--mi-large); }
.abo-texte { color: var(--encre-2); }
.abo-offres { display: flex; flex-direction: column; gap: 12px; }
.abo-formules { display: grid; gap: 10px; }
@media (min-width: 560px) { .abo-formules { grid-template-columns: 1fr 1fr; } }
.abo-formule {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 16px 44px; border-radius: var(--r-2); border: 1.5px solid var(--trait-fort);
  background: var(--surface); color: var(--encre); text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.abo-formule::after {
  content: "S'abonner →"; position: absolute; left: 16px; bottom: 14px; font-weight: 700; font-size: 0.9375rem;
  padding: 2px 8px; margin-left: -8px; border-radius: 6px; background: var(--jaune); color: var(--sur-jaune);
}
@media (hover: hover) { .abo-formule:hover { border-color: var(--encre); box-shadow: var(--ombre-2); } }
.abo-formule-nom { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9375rem; color: var(--encre-2); }
.abo-formule-prix { font-size: 1.625rem; font-weight: 850; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.15; }
.abo-formule-prix small { font-size: 0.9375rem; font-weight: 600; color: var(--encre-2); letter-spacing: 0; }
.abo-formule-note { font-size: 0.875rem; color: var(--encre-3); }
.offre-fondateur {
  position: relative; padding: 18px 14px 12px; border-radius: var(--r-2); overflow: hidden;
  background: var(--jaune-pale); font-size: 0.9063rem; line-height: 1.5;
}
.offre-fondateur::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--rayures); }
.abo-actif { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.abo-cle { border-top: 1px solid var(--trait-doux); padding-top: 4px; }
.abo-cle > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 650; font-size: 0.9375rem; }
.abo-cle-corps { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 4px; }
.cle-ligne { display: flex; gap: 8px; }
.cle-ligne input { flex: 1; min-width: 0; }
.cle-ligne .btn { flex: none; }
.derniere-sauvegarde { font-size: 0.9063rem; font-weight: 600; }
.derniere-sauvegarde.is-ancienne { color: var(--orange); }

/* ---------- Fenêtres ---------- */
.choix-tarifs { display: flex; flex-direction: column; gap: 4px; max-height: min(52vh, 440px); overflow-y: auto; margin: 0 -6px; padding: 2px 6px; }
.choix-tarifs button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--trait-doux); border-radius: 10px; background: var(--surface); color: var(--encre); text-align: left; font-size: 0.9375rem;
}
@media (hover: hover) { .choix-tarifs button:hover { border-color: var(--encre); background: var(--surface-2); } }
.choix-tarifs .prix { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre-2); font-size: 0.875rem; }
.choix-tarifs .vide-choix { color: var(--encre-3); padding: 12px 4px; }
.sig-zone { position: relative; height: 200px; border-radius: var(--r-2); border: 1.5px dashed var(--trait-fort); background: #FFFFFF; touch-action: none; }
.sig-zone canvas { width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sig-aide { position: absolute; inset: 0; display: grid; place-items: center; color: #5C6270; pointer-events: none; font-weight: 550; }
.sig-zone::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 44px; border-bottom: 1px solid #D8D3C8; pointer-events: none; }

/* ---------- Comptes (désactivés pendant la phase de test) ---------- */
.ecran-compte {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  display: grid; place-items: center; padding: 20px 16px;
  background: var(--fond);
}
.compte-carte {
  width: min(460px, 100%); display: flex; flex-direction: column; gap: 16px;
  padding: 28px 22px; border-radius: var(--r-4); background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre-2);
}
.compte-carte h1 { font-size: 1.625rem; font-weight: 820; font-stretch: 112%; letter-spacing: -0.02em; }
.compte-logo { margin-bottom: 4px; }
.compte-bascule { display: grid; grid-template-columns: 1fr 1fr; }
.compte-bascule button { min-height: 40px; border: 0; border-radius: 10px; background: none; color: var(--encre-2); font-weight: 650; }
.compte-bascule button[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1), 0 0 0 1px var(--trait); }
#form-compte, #form-demarrage, .admin-form { display: flex; flex-direction: column; gap: 14px; }
.mdp-ligne { display: flex; gap: 8px; }
.mdp-ligne input { flex: 1; min-width: 0; }
.compte-message { padding: 10px 12px; border-radius: var(--r-1); font-size: 0.9063rem; background: var(--surface-3); }
.compte-message.is-erreur { background: var(--rouge-pale); color: var(--rouge); }
.compte-message.is-ok { background: var(--vert-pale); color: var(--vert); }
.compte-message.is-alerte { background: var(--jaune-pale); color: var(--encre); }
.compte-continuer, .compte-oubli, .demarrage-plus-tard { align-self: center; color: var(--encre-2); }
.demarrage-etape { font-size: 0.875rem; font-weight: 650; color: var(--encre-3); }
.demarrage-barre { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.demarrage-barre span { display: block; height: 100%; width: 33%; background: var(--jaune); border-radius: inherit; transition: width 250ms ease; }
.demarrage-page { display: flex; flex-direction: column; gap: 14px; }
.demarrage-actions { display: flex; gap: 10px; justify-content: flex-end; }
.choix-type { display: flex; flex-direction: column; gap: 10px; }
.mc-bloc { border-top: 1px solid var(--trait-doux); padding-top: 6px; }
.mc-bloc > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; }
.mc-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
.mc-danger > summary { color: var(--rouge); }
body.admin { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.admin-page { width: 100%; display: grid; place-items: center; }
.admin-resultat { display: flex; flex-direction: column; gap: 12px; }
.compte-retour { align-self: flex-start; font-weight: 600; }

/* ==========================================================================
   Ordinateur
   ========================================================================== */
@media (min-width: 1024px) {
  body.app, body.app.vue-devis-active { padding-bottom: 0; }
  .app-cote {
    position: fixed; z-index: 85; top: 0; bottom: 0; left: 0; width: var(--cote-l);
    display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
    padding: 18px 14px 16px; background: var(--surface); border-right: 1px solid var(--trait);
  }
  .app-cote > .logo { padding: 6px 10px 18px; }
  .cote-nouveau { margin-bottom: 16px; }
  .cote-nav { display: flex; flex-direction: column; gap: 2px; }
  .cote-lien {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px;
    border: 0; border-radius: 10px; background: none; color: var(--encre-2); text-align: left; text-decoration: none;
    font-size: 0.9688rem; font-weight: 600;
  }
  .cote-lien .ic { width: 20px; height: 20px; }
  @media (hover: hover) { .cote-lien:hover { background: var(--surface-3); color: var(--encre); text-decoration: none; } }
  .cote-lien[aria-current="page"] { background: var(--jaune-pale); color: var(--encre); }
  .cote-titre { margin: 20px 12px 6px; font-size: 0.75rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-3); }
  .cote-pied { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 2px; }
  .cote-offre {
    display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 12px 14px;
    border-radius: var(--r-2); border: 1px solid var(--trait); background: var(--surface-2); text-decoration: none; color: var(--encre);
  }
  @media (hover: hover) { .cote-offre:hover { border-color: var(--trait-fort); text-decoration: none; } }
  .cote-offre-titre { font-weight: 750; font-size: 0.9375rem; display: flex; align-items: center; gap: 8px; }
  .cote-offre-texte { font-size: 0.8438rem; color: var(--encre-3); }
  .cote-offre.is-pro { background: var(--jaune-pale); border-color: color-mix(in srgb, var(--jaune-bord) 45%, transparent); }

  .app-barre { margin-left: var(--cote-l); padding: 0 32px; justify-content: flex-end; }
  .app-barre > .logo, .app-barre .bouton-menu { display: none; }
  .app-main { margin-left: var(--cote-l); padding: 28px 40px 72px; }
  .tabbar { display: none; }
  .barre-total { left: calc(var(--cote-l) + 24px); right: 24px; bottom: 20px; max-width: 760px; margin-inline: auto; }
  .sous-nav { margin-bottom: 22px; }
}

@media (min-width: 1280px) {
  .vue-devis { max-width: 1140px; }
  .devis-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
  .envoi { margin-top: 0; position: sticky; top: calc(var(--barre-h) + 20px); }
  .envoi-carte { padding: 20px; }
  .barre-total { display: none !important; }
  body.app.vue-devis-active { padding-bottom: 0; }
}

@media print {
  .app-barre, .app-cote, .tabbar, .barre-total, .toast { display: none !important; }
}

/* Messages : au-dessus des onglets et du total (téléphone) */
body.app .toast { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px); }
body.app.vue-devis-active .toast { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 84px); }
@media (min-width: 1024px) {
  body.app .toast { bottom: 24px; }
  body.app.vue-devis-active .toast { bottom: 92px; }
}
@media (min-width: 1280px) { body.app.vue-devis-active .toast { bottom: 24px; } }

/* ---------- Facture (devis transformé) ----------
   Le même éditeur sert aux devis et aux factures : chaque mode masque ce qui ne le concerne pas. */
body:not(.mode-facture) .seul-facture,
body.mode-facture .seul-devis { display: none !important; }
.facture-origine { margin: 12px 0 0; }

/* ---------- Tirer pour actualiser (application installée, voir gestes.js) ---------- */
.tirer-actualiser {
  position: fixed; z-index: 90; left: 50%; top: calc(env(safe-area-inset-top) + 8px);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); color: var(--encre-2); box-shadow: var(--ombre-2);
  transform: translate(-50%, -60px); opacity: 0; pointer-events: none;
  transition: transform 200ms ease, opacity 200ms ease, background-color 150ms ease;
}
.tirer-actualiser .ic { width: 20px; height: 20px; }
.tirer-actualiser.is-pret { background: var(--jaune); color: var(--sur-jaune); }
.tirer-actualiser.is-charge { transform: translate(-50%, 36px); opacity: 1; background: var(--jaune); color: var(--sur-jaune); }
.tirer-actualiser.is-charge .ic { animation: tdv-tourne 700ms linear infinite; }
@keyframes tdv-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tirer-actualiser.is-charge .ic { animation: none; } }