/* CET, module Devis et composant Croquis. Complète le style de index.html, jamais ne le
   redéfinit : mêmes variables, mêmes cartes, mêmes boutons. */

/* --- liste des relevés --- */
.dv-nouveau { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; font-size: 16px; }
.dv-nouveau svg { width: 20px; height: 20px; }
.dv-groupe-titre { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 22px 0 8px; }
.dv-releve {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; font: inherit; color: var(--ink);
}
.dv-releve:hover { border-color: var(--blue); background: #f4fafc; }
.dv-releve .dv-releve-corps { flex: 1; min-width: 0; }
.dv-releve b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-releve small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.dv-releve .dv-jauge { height: 4px; background: var(--line); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.dv-releve .dv-jauge i { display: block; height: 100%; background: var(--orange); }
.dv-releve.envoye .dv-jauge i { background: #2e8b57; }
.dv-releve .dv-poubelle { flex: 0 0 38px; height: 38px; border: none; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.dv-releve .dv-poubelle:hover { background: #fdecea; color: var(--ok); }
.dv-releve .dv-poubelle svg { width: 18px; height: 18px; }
.dv-vide { color: var(--muted); font-size: 14px; padding: 14px 0 4px; text-align: center; }

/* --- fil, progression --- */
/* Le fil d'Ariane reste sous l'en-tête pendant le défilement. Les marges négatives, puis
   le padding qui les compense, lui font couvrir toute la largeur du contenu : sans elles,
   le relevé défilerait visiblement dans les gouttières, de part et d'autre du bloc. */
.dv-fil-bloc {
  position: sticky; top: var(--h-entete, 0px); z-index: 22;
  background: var(--bg); margin: -22px -16px 0; padding: 12px 16px 10px;
  box-shadow: 0 6px 10px -8px rgba(15,30,40,.35);
}
.dv-fil { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 36px; }
.dv-retour { display: inline-flex; align-items: center; gap: 2px; border: none; background: none; color: var(--blue); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; padding: 6px 8px 6px 2px; border-radius: 8px; }
.dv-retour svg { width: 18px; height: 18px; }
.dv-retour:hover { background: #eef6f9; }
.dv-fil-titre { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.dv-sauve { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dv-sauve.en-cours { color: var(--orange); }
.dv-progress { display: flex; gap: 6px; }
.dv-progress .dot { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.dv-progress .dot.on { background: var(--orange); }
.dv-progress .dot.fait { background: #f8c68b; }
.dv-etape-nom { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.dv-step { display: none; }
.dv-step.active { display: block; }

/* --- puces (choix multiples) et options courtes --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip {
  border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 600;
  cursor: pointer; background: #fff; color: var(--ink); user-select: none; -webkit-user-select: none;
}
.chip.sel { border-color: var(--orange); background: #fff7ee; color: var(--orange); }
.chip.sug { font-weight: 500; padding: 6px 11px; font-size: 13px; color: var(--blue); border-color: #cfe3ea; }
.chip.sug:hover { background: #eef6f9; }
/* Choix courts (civilité, alimentation, niveau) : chaque option prend sa largeur naturelle,
   sans couper un libellé (« Rez-de-chaussée »), et tient côte à côte sur un téléphone.
   Le plafond évite qu'elles s'étirent sur toute la largeur d'une tablette. */
.opts-court .opt { flex: 1 1 auto; min-width: 0; max-width: 220px; white-space: nowrap; padding-left: 16px; padding-right: 16px; }
.dv-lien { border: none; background: none; color: var(--blue); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 6px; }
.dv-fiche { margin-top: 14px; padding: 10px 12px; background: #eef6f9; border-radius: 8px; font-size: 13px; color: var(--blue); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dv-fiche[hidden] { display: none; }

/* --- pièces --- */
.dv-piece { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; background: #fff; }
.dv-piece-tete { display: flex; align-items: center; gap: 10px; }
.dv-piece-num { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.dv-piece-tete input { flex: 1; min-width: 0; font-weight: 600; }
.dv-piece .del { flex: 0 0 36px; height: 36px; border: none; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.dv-piece .del:hover { background: #fdecea; color: var(--ok); }
.dv-piece .del svg { width: 18px; height: 18px; }
.dv-piece label { margin-top: 12px; }
.dv-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; }
.dv-grille label { margin-top: 10px; }
/* Sous-grille : libellé, champ et message partagent leurs rangées d'une colonne à l'autre,
   donc un libellé sur deux lignes (« Hauteur sous plafond » sur téléphone) ne décale plus
   le champ voisin. Sans prise en charge de subgrid, le navigateur garde l'empilement simple. */
.dv-grille > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.dv-num { position: relative; }
.dv-num input { padding-right: 44px; }
.dv-num .u { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
.dv-indic { font-size: 13px; color: var(--muted); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.dv-indic b { color: var(--ink); font-weight: 600; }
.dv-indic .dv-lien { padding: 0; }

/* --- galerie de photos et croquis --- */
.dv-galerie { margin-top: 10px; }
.dv-galerie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-galerie-actions button {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fff; color: var(--blue);
  border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px;
}
.dv-galerie-actions button:hover { background: #eef6f9; border-color: var(--blue); }
.dv-galerie-actions svg { width: 18px; height: 18px; }
.dv-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.dv-vignette { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #f4f6f8; position: relative; }
.dv-vignette .dv-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; cursor: pointer; }
.dv-vignette .dv-vig-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.dv-vignette .dv-vig-actions button { width: 34px; height: 34px; border: none; border-radius: 8px; background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.dv-vignette .dv-vig-actions button.sup:hover { color: var(--ok); }
.dv-vignette .dv-vig-actions svg { width: 17px; height: 17px; }
.dv-vignette .dv-vig-cadre { position: relative; }
.dv-vignette .dv-type { position: absolute; left: 6px; bottom: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: rgba(1,109,150,.9); color: #fff; padding: 2px 7px; border-radius: 6px; }
.dv-vignette input { width: 100%; border: none; border-top: 1px solid var(--line); border-radius: 0; font-size: 13px; padding: 8px 10px; background: #fff; }
.dv-vignette input:focus { outline: none; background: #fffdf8; }

/* --- notes --- */
.dv-notes-outils { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.dv-outil {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fff; color: var(--blue);
  border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px;
}
.dv-outil svg { width: 18px; height: 18px; }
.dv-outil:hover { background: #eef6f9; border-color: var(--blue); }
.dv-outil.ecoute { background: #fdecea; border-color: var(--ok); color: var(--ok); }
.dv-outil.ecoute svg { animation: dv-pulse 1.1s ease-in-out infinite; }
@keyframes dv-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .7; } }
#d_notes { min-height: 170px; line-height: 1.5; }

/* --- récapitulatif --- */
.dv-manque { background: #fff7ee; border: 1px solid #f8c68b; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.dv-manque[hidden] { display: none; }
.dv-manque b { color: #8a5a12; display: block; margin-bottom: 6px; }
.dv-manque ul { margin: 0; padding-left: 18px; }
.dv-manque li { margin: 3px 0; }
.dv-manque a { color: var(--blue); font-weight: 600; cursor: pointer; text-decoration: none; }
.dv-recap-bloc { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.dv-recap-bloc .dv-recap-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.dv-recap-bloc .dv-recap-tete b { color: var(--blue); font-size: 15px; }
.dv-recap-bloc .dv-recap-tete .rcp-edit { min-height: 36px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 8px; }
.dv-recap-bloc .dv-recap-tete .rcp-edit:hover { background: #eef6f9; }
.dv-recap-ligne { display: flex; gap: 12px; font-size: 14px; padding: 4px 0; }
.dv-recap-ligne span:first-child { flex: 0 0 130px; color: var(--muted); font-size: 12.5px; padding-top: 2px; }
.dv-recap-ligne span:last-child { flex: 1; min-width: 0; word-break: break-word; }
.dv-recap-ligne .vide { color: var(--muted); font-style: italic; }
.dv-recap-piece { display: flex; gap: 10px; align-items: baseline; font-size: 14px; padding: 6px 0; border-top: 1px solid var(--line); }
.dv-recap-piece:first-of-type { border-top: none; }
.dv-recap-piece b { flex: 0 0 auto; }
.dv-recap-piece .kw { color: var(--blue); font-weight: 700; margin-left: auto; white-space: nowrap; }
.dv-recap-piece small { color: var(--muted); }
.dv-recap-total { display: flex; justify-content: space-between; font-weight: 700; border-top: 2px solid var(--line); padding-top: 8px; margin-top: 4px; font-size: 14px; }
.dv-recap-total .kw { color: var(--blue); }
.dv-minis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dv-minis img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.dv-envoi-info { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.dv-envoi-info b { color: var(--ink); font-weight: 600; }
.dv-nav-envoi #dv_next { background: var(--orange); }

/* --- feuille de confirmation --- */
.dv-sheet-overlay { align-items: flex-end; padding: 0; }
.dv-sheet { border-radius: 16px 16px 0 0; max-width: 100%; margin: 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 640px) {
  .dv-sheet-overlay { align-items: center; padding: 20px; }
  .dv-sheet { border-radius: 12px; max-width: 520px; }
}
.dv-sheet .btn:disabled { opacity: .55; cursor: default; }
.dv-sheet-resume { font-size: 14px; color: var(--ink); }
.dv-sheet-resume div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dv-sheet-resume div:last-child { border-bottom: none; }
.dv-sheet-resume span:first-child { color: var(--muted); flex: 0 0 auto; white-space: nowrap; }
.dv-sheet-resume span:last-child { text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.dv-progression { margin-top: 12px; }
.dv-progression[hidden] { display: none; }
.dv-progression div { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--muted); }
.dv-progression .dv-puce { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: 0 0 18px; }
.dv-progression div.en-cours { color: var(--ink); }
.dv-progression div.en-cours .dv-puce { border-color: var(--orange); border-top-color: transparent; animation: dv-tourne .8s linear infinite; }
.dv-progression div.fait { color: var(--ink); }
.dv-progression div.fait .dv-puce { background: #2e8b57; border-color: #2e8b57; }
.dv-progression div.rate .dv-puce { background: var(--ok); border-color: var(--ok); }
@keyframes dv-tourne { to { transform: rotate(360deg); } }

/* --- succès --- */
.dv-succes { text-align: center; padding: 34px 24px; }
.dv-coche { width: 72px; height: 72px; border-radius: 50%; background: #e6f4ec; color: #2e8b57; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.dv-coche svg { width: 40px; height: 40px; }
.dv-succes h2 { font-size: 24px; margin-bottom: 8px; }
.dv-succes .sub { margin-bottom: 22px; }
.dv-succes-actions { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto; }
.dv-succes-actions .btn { width: 100%; }

/* --- composant croquis, plein écran --- */
#croquis { position: fixed; inset: 0; z-index: 70; background: #fff; display: flex; flex-direction: column; }
#croquis[hidden] { display: none; }
body.cq-ouvert { overflow: hidden; }
.cq-haut { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--blue); color: #fff; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.cq-titre { flex: 1; text-align: center; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-btn { min-width: 84px; min-height: 40px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 12px; }
.cq-annuler { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.cq-valider { background: var(--orange); color: #fff; border: none; }
.cq-zone { flex: 1; position: relative; overflow: hidden; background: #fff; }
#cq_canvas { display: block; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.cq-saisie { position: absolute; z-index: 2; width: 180px; padding: 6px 10px; font: 600 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; border: 2px solid var(--orange); border-radius: 8px; background: rgba(255,255,255,.96); }
.cq-saisie[hidden] { display: none; }
.cq-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: #f5f7f8; border-top: 1px solid var(--line); }
.cq-groupe { display: flex; align-items: center; gap: 6px; }
.cq-outil { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.cq-outil svg { width: 22px; height: 22px; }
.cq-outil.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cq-outil:disabled { opacity: .4; cursor: default; }
.cq-couleur { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; padding: 0; }
.cq-couleur.on { box-shadow: 0 0 0 3px var(--ink); }
.cq-epaisseur { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.cq-epaisseur span { display: block; border-radius: 50%; background: var(--ink); }
.cq-epaisseur.on { border-color: var(--blue); background: #eef6f9; }


/* --- écran Dimensionnement --------------------------------------------------------
   Les mêmes pièces qu'à l'étape précédente, en synthèse et corrigibles sur place, puis
   le calcul de déperdition. Chaque carte tient sur une hauteur d'œil : en-tête, cinq
   champs, résultat. Les champs se replient en deux colonnes sous 480 px. */
.dz-tot { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dz-tot > div { flex: 1 1 90px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.dz-tot span { display: block; font-size: 12px; color: var(--muted); }
.dz-tot b { font-size: 16px; font-weight: 700; }
.dz-bilan { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #fff; margin-top: 18px; }
.dz-bilan h3 { margin: 0 0 12px; font-size: 14px; color: var(--blue); text-transform: uppercase; letter-spacing: .04em; }
.dz-bilan.vide p { margin: 0; color: var(--muted); font-style: italic; }
.dz-cols { display: flex; flex-wrap: wrap; gap: 16px; text-align: center; }
.dz-cols > div { flex: 1 1 150px; }
.dz-lib { display: block; font-size: 13px; color: var(--muted); }
/* Bleu et non rouge : sur cet écran le rouge signale déjà un matériel sous le besoin.
   Deux sens pour une même couleur, et l'alerte cesse d'alerter. */
.dz-kw { display: block; font-size: 38px; font-weight: 800; color: var(--blue); letter-spacing: -1px; line-height: 1.15; }
.dz-formules { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dz-formules p { margin: 0 0 6px; font-size: 13px; color: var(--ink); }
.dz-formules b { font-weight: 700; }
.dz-note { color: var(--muted); }
.dz-ecart { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: #eef6f9; }

/* Méthode de calcul : visible, jamais repliée. Les valeurs sont préréglées, et c'est
   justement parce qu'elles le sont qu'elles doivent se voir : un paramètre caché derrière
   un repli passe pour une constante, alors qu'un chantier particulier demande de le régler. */
.dz-methode { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px 16px 16px; }
.dz-methode h3 { margin: 0 0 4px; font-size: 14px; color: var(--blue); text-transform: uppercase; letter-spacing: .04em; }
.dz-methode > .field-help { margin: 0 0 6px; }
.dz-param { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 16px; }
.dz-param[hidden] { display: none; }
.dz-param > div { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; align-content: start; }
.dz-param label { margin-top: 12px; }
.dz-step { display: flex; align-items: center; background: #eef1f3; border-radius: 999px; padding: 4px; min-width: 0; }
.dz-step button { flex: 0 0 38px; height: 38px; border: none; background: none; font-size: 19px; cursor: pointer; color: var(--ink); border-radius: 50%; padding: 0; }
.dz-step button:active { background: #dfe5e9; }
.dz-step input { flex: 1; min-width: 0; width: auto; border: none; background: none; text-align: center; font-size: 16px; padding: 0; }
.dz-step input:focus { outline: none; }
.dz-step .u { color: var(--muted); font-size: 13px; white-space: nowrap; padding: 0 4px; }
#dz_reinit { margin-top: 12px; padding: 0; }
#dz_reinit[hidden] { display: none; }

/* --- mode pouce --- */
@media (max-width: 480px) {
  /* Une seule barre collante sur téléphone. L'en-tête et le fil d'Ariane collés ensemble
     mangeaient 39 % de la hauteur d'un écran de 844 px, avant même la barre de navigation
     du bas. C'est le fil qui reste, parce qu'il porte le nom du client et l'étape ; le logo
     se retrouve d'un coup de pouce vers le haut. */
  header.app { position: static; }
  .dv-fil-bloc { top: 0; margin-top: -22px; }
  .dv-grille { grid-template-columns: 1fr 1fr; }
  .dz-kw { font-size: 32px; }
  .dv-vignettes { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .dv-recap-ligne span:first-child { flex-basis: 100px; }
  .cq-outils { gap: 6px 8px; }
  .cq-outil { width: 40px; height: 40px; }
}