* { box-sizing: border-box; }
html {
  font-size: 19px; /* taille de base agrandie — tout le reste du site est en unités relatives (rem), donc grossit avec */
}
@media (max-width: 480px) {
  html { font-size: 17px; } /* un peu moins sur petit écran, pour éviter que ça déborde */
}
/* Filet de sécurité : les select/textarea "nus" (hors .dt-champ, ex: questions Oui/Non par
   poste, commentaires libres) n'héritaient pas correctement de l'agrandissement ci-dessus sur
   certains navigateurs — on force une taille et un padding confortables partout, sans exception. */
select, textarea, input[type="text"], input[type="number"], input[type="date"] {
  font-size: 1rem; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--bord); font-family: inherit; box-sizing: border-box;
}
body {
  font-family: 'Segoe UI', -apple-system, sans-serif; margin: 0; padding: 0; background: #f4f6f8;
  color: #333;
}
.header-bar {
  background: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100;
}
.header-bar h1 { color: var(--main-blue); font-size: 1.1rem; margin: 0; }
.header-bar img { max-height: 42px; }
#sync-badge { font-size: 0.75rem; padding: 4px 10px; border-radius: 12px; font-weight: 600; }
#sync-badge.ok { background: #e9f9ef; color: var(--accent-green); }
#sync-badge.attente { background: #fff3cd; color: #7a5d00; }
#sync-badge.synchro { background: #e7f1fb; color: var(--main-blue); }
#sync-badge.erreur { background: #fdeceb; color: var(--accent-red); }

/* ---- Connexion ---- */
#login-overlay {
  position: fixed; inset: 0; background: var(--main-blue); display: flex; align-items: center; justify-content: center; z-index: 5000;
}
#login-overlay.masque { display: none; }
.login-box { background: white; border-radius: 14px; padding: 30px; max-width: 360px; width: 90%; text-align: center; }
.login-box img { max-width: 150px; margin-bottom: 16px; }
.login-box input { width: 100%; padding: 10px; border: 1px solid var(--bord); border-radius: 8px; margin-top: 10px; font-size: 1rem; box-sizing: border-box; }
.login-box button { width: 100%; padding: 12px; margin-top: 14px; background: var(--main-blue); color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }

/* ---- Liste de dossiers ---- */
.conteneur { max-width: 1000px; margin: 0 auto; padding: 16px 20px 60px 20px; }
.barre-dossiers { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.barre-dossiers input { flex: 1; min-width: 180px; padding: 10px; border: 1px solid var(--bord); border-radius: 8px; }
.bouton { background: var(--main-blue); color: white; border: none; padding: 10px 18px; border-radius: 8px; font-weight: bold; cursor: pointer; }
.bouton.vert { background: var(--accent-green); }
.bouton.rouge { background: var(--accent-red); }
.bouton.gris { background: #6c757d; }
.carte-dossier {
  background: white; border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; display: flex;
  justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}
.carte-dossier:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.12); }
.carte-dossier .nom { font-weight: 700; color: var(--main-blue); }
.carte-dossier .maj { font-size: 0.78rem; color: #889; }
/* Miniature "photo maison" dans la liste des dossiers (demande du 2026-10-07) — la plus récente
   des 2 photos (avant/fin travaux), voir miniatureDossier() dans js/08-liste-dossiers.js. */
.miniature-dossier-liste { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; margin-right: 10px; vertical-align: middle; flex-shrink: 0; }
/* Même miniature, en grand (144px), dans la barre de titre d'un dossier ouvert — centrée sur les
   2 lignes titre+boutons qui suivent. Confirmée dans tous les outils le 2026-10-07 (essai validé
   sur Fiche client d'abord). Partagée ici plutôt que redéfinie par outil. */
.miniature-dossier-titre { width: 144px; height: 144px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; vertical-align: middle; flex-shrink: 0; }
/* Photo de couverture (avant/fin travaux) dans l'entête de la fiche Identification. */
.photo-maison-vignette { width: 100%; max-width: 220px; height: 140px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; display: block; }
.btn-action-dossier { background: #f4f6f8; border: 1px solid var(--bord); border-radius: 6px; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; margin-left: 4px; }

/* ---- Admin / Paramétrage ---- */
#admin-overlay {
  display: none; position: fixed; inset: 0; background: white; z-index: 6000; flex-direction: column; overflow: hidden;
}
.admin-barre-haut { background: var(--main-blue); color: white; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
.admin-onglets { display: flex; gap: 6px; padding: 10px 16px; background: #f4f6f8; overflow-x: auto; }
.admin-onglet-btn {
  background: white; border: 2px solid var(--main-blue); color: var(--main-blue); padding: 8px 16px;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.88rem; white-space: nowrap;
}
.admin-onglet-btn.actif { background: var(--main-blue); color: white; }
.admin-corps { flex: 1; overflow-y: auto; padding: 16px 20px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th, .admin-table td { border: 1px solid var(--bord); padding: 6px 8px; text-align: left; vertical-align: top; }
.admin-table th { background: var(--main-blue); color: white; }
.admin-table input[type="text"] { width: 100%; padding: 6px; border: 1px solid var(--bord); border-radius: 4px; box-sizing: border-box; }
#zone-matrices-par-famille table td, #zone-matrices-par-famille table th { text-align: center; white-space: nowrap; }
#zone-matrices-par-famille table td:first-child, #zone-matrices-par-famille table th:first-child { text-align: left; white-space: normal; min-width: 160px; }
#zone-matrices-par-famille table thead th { position: sticky; top: 0; background: var(--main-blue); z-index: 5; }
#zone-matrices-par-famille table td:first-child { position: sticky; left: 0; background: white; z-index: 4; }
#zone-matrices-par-famille table thead th:first-child { z-index: 6; }
.carte-poste-travaux { background: white; border: 1px solid var(--bord); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.carte-poste-travaux h4 { color: var(--main-blue); margin: 0 0 6px 0; font-size: 1rem; }
.table-devis-facture { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; }
.table-devis-facture th, .table-devis-facture td { border: 1px solid var(--bord); padding: 6px 8px; text-align: left; }
.table-devis-facture th { background: #f4f6f8; }
.table-devis-facture input { width: 100%; padding: 5px; border: 1px solid var(--bord); border-radius: 4px; box-sizing: border-box; font-size: 0.85rem; }
.ligne-total-poste td { font-weight: 700; }
.ecart-blanc { background: white; }
.ecart-orange { background: #ffe8cc; }
.ecart-rouge { background: #ffd0d0; }
/* Vignettes plus grandes (2026-10-15 : « c'est petit ») : 150 px au moins, autant par ligne que la place le permet. */
.dt-photos-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; max-width: 680px; }
.vignette-photo-legendee .dt-photo-statut { position: absolute; left: 4px; bottom: 4px; background: rgba(255,255,255,0.92); border-radius: 4px; padding: 0 4px; font-size: 0.85rem; line-height: 1.4; }
.vignette-photo-legendee { display: flex; flex-direction: column; gap: 4px; }
.vignette-photo-legendee .photo-conteneur { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; background: #eee; }
.vignette-photo-legendee .photo-conteneur img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette-photo-legendee input[type="text"] { font-size: 0.78rem; padding: 4px 6px; }
.vignette-photo-legendee .dt-suppr-photo { position: absolute; top: 4px; right: 4px; background: rgba(220,53,69,0.9); color: white; border: none; border-radius: 4px; width: 22px; height: 22px; cursor: pointer; }

/* Éditeur de texte enrichi "Situation actuelle" par famille de travaux — repris à l'identique
   du bloc "Dossier technique" de l'outil Aides (tailles de police fixes via execCommand). */
.dt-barre-rte { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.dt-barre-rte button { background: #eef1f5; border: 1px solid var(--bord); border-radius: 5px; width: 32px; height: 30px; cursor: pointer; font-size: 0.9rem; }
.dt-barre-rte button:hover { background: #dde3ea; }
.dt-zone-rte { min-height: 90px; border: 1px solid var(--bord); border-radius: 6px; padding: 10px; font-size: 0.92rem; line-height: 1.4; background: white; }
.dt-zone-rte font[size="2"] { font-size: 0.8rem; color: inherit; }
.dt-zone-rte font[size="3"] { font-size: 0.92rem; color: inherit; }
.dt-zone-rte font[size="5"] { font-size: 1.05rem; font-weight: 700; color: var(--accent-cyan); }
.dt-zone-rte font[size="6"] { font-size: 1.2rem; font-weight: 700; color: var(--main-blue); }
.dt-zone-rte font[size="7"] { font-size: 1.4rem; font-weight: 800; color: var(--main-blue); border-bottom: 2px solid var(--accent-orange); display: inline-block; padding-bottom: 2px; }
.dt-zone-rte:focus { outline: 2px solid var(--main-blue); }
.entete-accordion-poste { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 10px 14px; background: linear-gradient(135deg, var(--main-blue), #0068c9); color: white; border-radius: 8px; margin-bottom: 2px; scroll-margin-top: 76px; }
.entete-accordion-poste h4 { display: flex; align-items: center; gap: 8px; margin: 0; color: white; }
.corps-accordion-poste { padding-top: 6px; }
.taux-tva-indicatv, .taux-tva-indicatif { font-size: 0.75rem; color: #667; margin-top: 4px; }
.alerte-ttc-ht { font-size: 0.75rem; color: var(--accent-red); font-weight: 600; margin-top: 2px; }
.table-devis-facture textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; }
.table-devis-facture input[type="text"], .table-devis-facture input[type="date"], .table-devis-facture input[type="number"] { display: block; margin-bottom: 0; }
.picker-etiquette-dpe { display: flex; gap: 3px; }
.lettre-etiquette-dpe { flex: 1; text-align: center; padding: 8px 0; font-weight: 800; font-size: 1.1rem; border-radius: 5px; cursor: pointer; border: 3px solid transparent; color: black; }
.lettre-etiquette-dpe.selectionnee { border-color: var(--main-blue); transform: scale(1.08); }
.picker-etiquette-dpe.a-choix .lettre-etiquette-dpe:not(.selectionnee) { opacity: 0.25; }
.picker-etiquette-dpe.a-choix .lettre-etiquette-dpe.selectionnee { border-color: #000; box-shadow: 0 0 0 2px var(--main-blue); transform: scale(1.15); }
.dt-sub-accordion-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 8px 12px; margin: 8px 0 0 16px; background: #eef3fb; border-radius: 6px; font-weight: 700; color: var(--main-blue); font-size: 0.9rem; }
.dt-sub-accordion-panel { display: none; margin-left: 16px; padding-top: 6px; }
.dt-sub-accordion-panel.ouvert { display: block; }
.dt-sub-accordion-header .dt-chevron { transition: transform 0.2s ease; }
.dt-sub-accordion-header.actif .dt-chevron { transform: rotate(180deg); }
@media (min-width: 900px) {
  .conteneur { max-width: 1400px; }
}
.libelle-champ-specifique{ display:block; font-size:0.78rem; margin-top:6px; color:#667; }
.libelle-champ-specifique.champ-non-repondu{ color:var(--accent-red); font-weight:600; }
input.champ-non-repondu, select.champ-non-repondu{ border-color:var(--accent-red) !important; background:#fdeceb; }
@media print{
  .libelle-champ-specifique.champ-non-repondu{ color:#667 !important; font-weight:400 !important; }
  input.champ-non-repondu, select.champ-non-repondu{ border-color:var(--bord) !important; background:white !important; }
  /* Fond gris clair de l'écran (body, cette feuille étant partagée par plusieurs outils) jamais
     imprimé — page blanche, plus net. Demande du 2026-10-07 ("supprimer le fond" sur l'édition
     PDF), appliquée ici à tous les outils qui chargent ce fichier (Formulaires, ECS,
     Climatisation...). Les outils avec leur propre image de fond (Radiateurs, Ventilation...) ont
     leur propre règle équivalente dans leur feuille de style spécifique. */
  body{ background:white !important; }
}