:root {
  --bleu: #222687;
  --bleu-2: #4654B8;
  --bleu-3: #7B8BDB;
  --bleu-4: #B3BFF0;
  --jaune: #FFCC00;
  --tempo: #E2F4F8;
  --encre: #1B1D5C;
  --encre-douce: #4B4F86;
  --trait: #DDE0F0;
  --fond: #F3F4FA;
  --carte: #FFFFFF;
  --orange: #B86E00;
  --rouge: #9B1C1C;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: Urbanist, system-ui, sans-serif; color: var(--encre); background: var(--fond); font-weight: 600; }
h1, h2, h3, .v { font-family: Outfit, system-ui, sans-serif; }
[hidden] { display: none !important; }

.barre { height: 56px; background: var(--bleu); display: flex; align-items: center; gap: 12px; padding: 0 16px; color: #fff; }
.logo { height: 30px; }
.produit { font-family: Outfit; font-weight: 700; color: var(--jaune); letter-spacing: .02em; }
.espace { flex: 1; }
.qui { font-size: 14px; opacity: .85; }
.lien-clair { background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 6px; padding: 6px 10px; font: inherit; cursor: pointer; }

.connexion { display: grid; place-items: center; min-height: calc(100% - 56px); padding: 16px; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 28px; width: min(420px, 100%); display: grid; gap: 12px; }
.carte h1 { margin: 0; font-size: 24px; color: var(--bleu); }

label { display: grid; gap: 4px; font-size: 13px; color: var(--encre-douce); font-weight: 700; }
input, select { font: inherit; font-size: 15px; color: var(--encre); border: 1px solid var(--trait); border-radius: 6px; padding: 9px 10px; background: #fff; width: 100%; }
input:focus, select:focus { outline: 2px solid var(--bleu-3); border-color: var(--bleu-3); }
button { cursor: pointer; }
.bouton-jaune { background: var(--jaune); color: var(--bleu); border: 0; border-radius: 6px; padding: 11px 16px; font: 800 15px Outfit, sans-serif; }
.bouton-jaune:disabled { opacity: .45; cursor: default; }
.bouton-contour { background: #fff; color: var(--bleu); border: 1px solid var(--bleu); border-radius: 6px; padding: 9px 12px; font: 700 14px Outfit, sans-serif; }
.doux { color: var(--encre-douce); }
.petit { font-size: 13px; margin: 0; }
.erreur { color: var(--rouge); font-weight: 700; margin: 0; min-height: 0; }
.avert { color: var(--orange); font-weight: 700; }
.attente { color: var(--bleu); font-weight: 700; margin: 0; }
a { color: var(--bleu); }

/* Disposition : les informations en grand à gauche ; à droite, la carte en encadré (environ 1/8 de l'écran) et le résumé du projet. */
.appli { display: grid; grid-template-columns: minmax(0, 1fr) min(34vw, 600px); height: calc(100% - 56px); }
.panneau { overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; background: var(--fond); }
.panneau > * { flex-shrink: 0; }
.cote { padding: 16px 16px 16px 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.etape { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 14px; display: grid; gap: 10px; }
.etape h2 { margin: 0; font-size: 17px; color: var(--bleu); display: flex; align-items: center; gap: 8px; }
.etape h3 { margin: 6px 0 0; font-size: 14px; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .05em; }
.num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bleu); color: var(--jaune); font-size: 13px; }
.recherche { display: flex; gap: 8px; }
.suggestions { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.suggestions li { padding: 8px 10px; border: 1px solid var(--trait); border-radius: 6px; cursor: pointer; font-size: 14px; }
.suggestions li:hover, .suggestions li:focus { background: var(--tempo); outline: none; }
.choisi { margin: 0; padding: 8px 10px; background: var(--tempo); border-radius: 6px; font-size: 14px; }
.docs { display: grid; gap: 2px; }
.docs a { font-size: 13px; }

.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tuile { background: var(--tempo); border-radius: 6px; padding: 10px; display: grid; }
.tuile.large { grid-column: span 2; background: var(--bleu); color: #fff; }
.tuile .v { font-size: 26px; font-weight: 800; }
.tuile.large .v { color: var(--jaune); }
.tuile .u { font-size: 13px; }
#graphique { width: 100%; height: auto; }
#graphique text { font: 600 9px Urbanist, sans-serif; fill: var(--encre-douce); }
.pans { width: 100%; border-collapse: collapse; font-size: 13px; }
.pans th { text-align: left; color: var(--encre-douce); font-weight: 700; border-bottom: 1px solid var(--trait); padding: 4px 2px; }
.pans td { padding: 4px 2px; border-bottom: 1px solid var(--trait); font-variant-numeric: tabular-nums; }

.carteZone { position: relative; height: 37vh; min-height: 220px; border-radius: 8px; overflow: hidden; border: 1px solid var(--trait); flex-shrink: 0; }
#carte { position: absolute; inset: 0; }
.agrandir { position: absolute; left: 10px; bottom: 10px; z-index: 500; background: #fff; color: var(--bleu); border: 1px solid var(--bleu); border-radius: 6px; padding: 6px 10px; font: 700 13px Outfit, sans-serif; }
.vue-dessus { position: absolute; left: 0; right: 0; bottom: 0; z-index: 400; margin: 0; padding: 4px 10px 4px 120px; font-size: 11.5px; background: rgba(255,255,255,.85); color: var(--encre-douce); }
/* carte agrandie : toute la zone de travail, le temps de choisir le toit ou de vérifier le calepinage */
.appli.carte-grande .carteZone { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; height: auto; z-index: 1000; border-radius: 0; border: 0; }
.resume { gap: 6px; }
.resume strong { font: 800 18px Outfit, sans-serif; color: var(--bleu); }
.chiffres3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.chiffres3 > div { background: var(--tempo); border-radius: 6px; padding: 8px; display: grid; }
.chiffres3 .v { font-size: 22px; font-weight: 800; color: var(--bleu); }
.chiffres3 .u { font-size: 12px; color: var(--encre-douce); }
.fonds { position: absolute; top: 10px; right: 10px; z-index: 500; background: #fff; border-radius: 6px; border: 1px solid var(--trait); overflow: hidden; }
.fonds button { border: 0; background: #fff; padding: 7px 12px; font: 700 13px Outfit, sans-serif; color: var(--bleu); }
.fonds button.actif { background: var(--bleu); color: #fff; }

@media (max-width: 860px) {
  .appli { grid-template-columns: minmax(0, 1fr); height: auto; }
  .panneau, .cote { min-width: 0; }
  .cote { order: -1; padding: 10px 10px 0; overflow: visible; }
  .carteZone { height: 14vh; min-height: 120px; }
  .resume { display: none !important; }
  .vue-dessus { display: none !important; }
  .panneau { padding: 10px; overflow: visible; }
}
.logo { background: #fff; border-radius: 4px; padding: 2px 4px; }
@media (max-width: 520px) {
  .produit { display: none; }
  .lien-clair { padding: 5px 8px; font-size: 13px; }
  .barre { gap: 8px; }
}

/* --- Étape 2 : onglets, projets, électrique, charges, documents --- */
/* barre d'onglets : hauteur fixe (elle ne s'écrase plus), collée en haut, fond opaque jusqu'au bord de la colonne */
.onglets { display: flex; gap: 4px; background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 4px; position: sticky; top: 0; z-index: 5; overflow-x: auto; min-height: 50px; flex-shrink: 0; box-shadow: 0 -16px 0 var(--fond); }
.onglets button { flex: 1; border: 0; background: none; padding: 10px 8px; border-radius: 6px; font: 700 15px Outfit, sans-serif; color: var(--encre-douce); white-space: nowrap; }
.onglets button.actif { background: var(--bleu); color: #fff; }
.onglets button:disabled { opacity: .4; cursor: default; }
.bandeau { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 10px 12px; }
.vue { display: grid; gap: 12px; }
.ligne { display: flex; align-items: center; gap: 8px; }
.petit-bouton { padding: 7px 12px; font-size: 14px; }
.projets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.projets li { border: 1px solid var(--trait); border-radius: 6px; padding: 10px; display: grid; gap: 2px; cursor: pointer; }
.projets li:hover, .projets li:focus { background: var(--tempo); outline: none; }
.lien-danger { background: none; border: 0; color: var(--rouge); font: 700 13px Urbanist, sans-serif; text-align: left; padding: 0; }
.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau th { text-align: left; color: var(--encre-douce); font-weight: 700; border-bottom: 1px solid var(--trait); padding: 4px 3px; }
.tableau td { padding: 4px 3px; border-bottom: 1px solid var(--trait); font-variant-numeric: tabular-nums; vertical-align: top; }
td.ok { color: #1E7A3C; font-weight: 800; } td.ko { color: var(--rouge); font-weight: 800; } td.avert { color: var(--orange); font-weight: 800; }
.grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grille4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.propositions { display: grid; gap: 6px; }
.proposition { display: grid; gap: 2px; text-align: left; background: #fff; border: 1px solid var(--trait); border-radius: 6px; padding: 10px; font: inherit; color: var(--encre); }
.proposition.choisie { background: var(--tempo); border: 2px solid var(--bleu); }
.surtitre { font: 800 11px Outfit, sans-serif; letter-spacing: .06em; color: var(--encre-douce); }
.schema { overflow-x: auto; background: #fff; border: 1px solid var(--trait); border-radius: 6px; padding: 6px; }
.schema svg { max-width: 100%; height: auto; }
.verifications { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.verifications li { display: grid; gap: 2px; }
.verifications li.ok strong { color: #1E7A3C; } .verifications li.ko strong { color: var(--rouge); }
.boutons { display: flex; flex-wrap: wrap; gap: 8px; }
a.bouton-contour, a.bouton-jaune { text-decoration: none; display: inline-block; text-align: center; }
textarea { font: inherit; font-size: 14px; color: var(--encre); border: 1px solid var(--trait); border-radius: 6px; padding: 8px 10px; width: 100%; resize: vertical; }
.photos { display: grid; gap: 10px; }
.photos label { border: 1px dashed var(--trait); border-radius: 6px; padding: 8px; }
@media (max-width: 520px) { .grille2, .grille4 { grid-template-columns: 1fr 1fr; } }

/* informations en grand sur un écran large */
@media (min-width: 861px) {
  label { font-size: 14px; }
  input, select { font-size: 16px; padding: 10px 12px; }
  .etape { padding: 18px 20px; gap: 12px; }
  .etape h2 { font-size: 21px; }
  .etape h3 { font-size: 14.5px; }
  .petit { font-size: 14px; }
  .tableau { font-size: 14px; }
  .tuile .v { font-size: 34px; }
  .chiffres { grid-template-columns: repeat(4, 1fr); }
  .tuile.large { grid-column: span 2; }
  .grille2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .propositions { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .proposition { font-size: 15px; }
  #graphique { max-width: 760px; }
}

/* réseau public : cases à cocher et légende */
.cases { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.case { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--encre); cursor: pointer; }
.case input { width: 18px; height: 18px; padding: 0; accent-color: var(--bleu); }
.pastille { display: inline-block; width: 18px; height: 0; border-top: 3px solid #E8710A; }
.pastille.souterraine { border-top-style: dashed; }
.pastille.poste { width: 12px; height: 12px; border: 2px solid #fff; background: #7B2FBE; outline: 1px solid #7B2FBE; }
.icone-poste { background: #7B2FBE; border: 2px solid #fff; box-shadow: 0 0 0 1px #7B2FBE; }

/* dimensionnement */
.segments { display: flex; gap: 6px; flex-wrap: wrap; }
.segments button { flex: 1; min-width: 120px; border: 1px solid var(--bleu-4); background: #fff; color: var(--bleu); border-radius: 6px; padding: 9px 8px; font: 700 14px Outfit, sans-serif; }
.segments button.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }
/* retouche du calepinage, sur la carte agrandie */
.barre-retouche { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 600; background: rgba(255,255,255,.97); border: 1px solid var(--trait); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; box-shadow: 0 6px 20px rgba(27,29,92,.18); }
.rt-correction { background: #FFF8DC; border-radius: 6px; padding: 8px 10px; font-size: 14px; display: grid; gap: 4px; }
.bandeau-vert { margin: 0; background: #E3F4EA; border: 1px solid #2E9E5B; color: var(--encre); border-radius: 8px; padding: 10px 12px; font-weight: 700; }
.lien-reserve { display: inline-block; margin-top: 4px; background: #FFF3C4; color: var(--bleu); border-radius: 6px; padding: 5px 8px; font: 800 13px Urbanist, sans-serif; cursor: pointer; border: 0; text-align: left; }
.appli.retouche .agrandir { display: none; }

/* Visite technique */
.rubriques { display: grid; gap: 12px; }
.rubrique { border: 1px solid var(--trait); border-radius: 8px; padding: 10px; display: grid; gap: 8px; }
.rubrique h3 { margin: 0; text-transform: none; letter-spacing: 0; color: var(--bleu); font-size: 15px; display: flex; gap: 8px; align-items: center; }
.rubrique .compte { font: 700 12px Urbanist, sans-serif; color: var(--encre-douce); background: var(--fond); border-radius: 10px; padding: 2px 8px; }
.attendues { margin: 0; padding-left: 18px; font-size: 13px; color: var(--encre-douce); }
.prise { display: flex; gap: 8px; flex-wrap: wrap; }
.prise label { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 10px 14px; border-radius: 6px; font: 800 15px Outfit, sans-serif; }
.prise label.appareil { background: var(--jaune); color: var(--bleu); }
.prise label.galerie { background: #fff; color: var(--bleu); border: 1px solid var(--bleu); font-weight: 700; font-size: 14px; }
.prise input { display: none; }
.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vignette { border: 1px solid var(--trait); border-radius: 6px; overflow: hidden; display: grid; gap: 6px; padding-bottom: 6px; background: #fff; }
.vignette img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--fond); cursor: zoom-in; }
.vignette > * { margin: 0 6px; }
.vignette > img { margin: 0; }
.vignette input, .vignette select { font-size: 13px; padding: 6px 8px; }
.vignette .marques { display: flex; gap: 4px; flex-wrap: wrap; }
.vignette .marques button { font: 700 12px Urbanist, sans-serif; border: 1px solid var(--bleu-3); background: #fff; color: var(--bleu); border-radius: 12px; padding: 3px 8px; }
.vignette .marques button.oui { background: var(--bleu); color: var(--jaune); border-color: var(--bleu); }
.vignette .marques button.retirer { border-color: #E5B8B8; color: var(--rouge); }
.releves fieldset { border: 0; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.releves legend { font: 700 14px Outfit, sans-serif; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
textarea { font: inherit; font-size: 15px; color: var(--encre); border: 1px solid var(--trait); border-radius: 6px; padding: 9px 10px; width: 100%; }

/* Photomontage DP6 par les angles des pans : plein écran, au doigt ou à la souris */
.montage { position: fixed; inset: 0; z-index: 2000; background: #111433; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.montage-photo { overflow: auto; display: grid; place-items: center; padding: 8px; touch-action: pan-x pan-y; }
.montage-cadre { position: relative; width: 100%; line-height: 0; }
.montage-cadre img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.montage-cadre svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.montage-cote { background: var(--fond); padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.montage-cote h2 { margin: 0; font-size: 17px; color: var(--bleu); }
.montage-plan { width: 100%; height: 230px; background: #F7F8FC; border: 1px solid var(--trait); border-radius: 8px; touch-action: manipulation; }
.montage-pans { display: grid; gap: 6px; }
.montage-pans button { text-align: left; font: 700 13px Urbanist, sans-serif; background: #fff; border: 1px solid var(--trait); border-radius: 6px; padding: 8px 10px; color: var(--encre); }
.montage-pans button.actif { border-color: var(--bleu); outline: 2px solid var(--bleu-4); }
.montage-pans button .ok { color: #1F7A3A; }
.zoom { display: inline-flex; align-items: center; gap: 6px; }
.zoom select { width: auto; padding: 6px 8px; }
@media (max-width: 860px) {
  .montage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 58vh) minmax(0, 1fr); }
  .montage-plan { height: 170px; }
}

/* téléphone : les onglets défilent sur le côté au lieu d'élargir la page */
@media (max-width: 860px) { .onglets button { flex: 0 0 auto; padding: 10px 12px; } }

/* Comptes et abonnement */
.formulaire { display: grid; gap: 12px; }
.formulaire h2 { margin: 4px 0 0; font-size: 18px; color: var(--bleu); }
.abonnement { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #FFF7D6; border-color: #F2DC8A; }
.abonnement p { margin: 0; flex: 1; min-width: 220px; font-size: 14px; }
.formules { display: flex; gap: 12px; flex-wrap: wrap; }
.formule { display: grid; gap: 4px; text-align: left; min-width: 200px; padding: 14px 16px; border-radius: 8px; border: 2px solid var(--bleu); background: #fff; color: var(--bleu); font: 600 15px Urbanist, sans-serif; }
.formule strong { font: 800 18px Outfit, sans-serif; }
.formule:hover { background: var(--tempo); }
.tableau-defile { overflow-x: auto; }
.tableau-defile input[type=date] { width: auto; padding: 5px 6px; font-size: 13px; }
#nouveau.verrou { opacity: .55; }

/* Électrique : autres solutions repliées, raccordement */
.autres { border: 1px solid var(--trait); border-radius: 8px; padding: 8px 12px; }
.autres summary { cursor: pointer; font: 700 14px Outfit, sans-serif; color: var(--bleu); }
.autres-liste { display: grid; gap: 4px; margin-top: 8px; }
.autre { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; text-align: left; background: #fff; border: 1px solid var(--trait); border-radius: 6px; padding: 7px 10px; font: 600 14px Urbanist, sans-serif; color: var(--encre); }
.autre:hover { background: var(--tempo); }
.raccordements { display: grid; gap: 10px; }
.raccordement { border: 1px solid var(--trait); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; }
.raccordement.retenu { border-color: var(--bleu); background: #F7F8FF; }
.raccordement .v { font: 800 17px Outfit, sans-serif; color: var(--bleu); }
td.nombre { text-align: right; white-space: nowrap; }
.pastille.bt { border-top-color: #2E8B57; border-top-width: 2px; }

/* Couverture et charpente, exigences */
.verdict { margin: 0; padding: 10px 12px; border-radius: 6px; font: 800 16px Outfit, sans-serif; background: var(--fond); }
.verdict.ok { background: #E3F4E8; color: #1F6B36; }
.verdict.avert { background: #FFF4DC; color: var(--orange); }
.verdict.ko { background: #FBE4E4; color: var(--rouge); }
.exigences { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.exigences li { border: 1px solid var(--trait); border-radius: 6px; padding: 8px 10px; display: grid; gap: 4px; }
.exigences select { width: auto; padding: 5px 8px; font-size: 13px; }
td.ok { color: #1F6B36; } td.avert { color: var(--orange); } td.ko { color: var(--rouge); }