/* ================================================================
   Geocharge — la mise en page, aux codes graphiques de NDC26 (www.ndc26.fr, demande de l'utilisateur du 12/11/2026) :
   fond clair, gris chaud #504F4D, vert anis #CCD725 pour l'action, rouge #D13133 et bleu canard #59A8B7 du logo, police
   Titillium Web (polices/, licence OFL), intitulés en capitales espacées entre crochets. Les blocs du tableau gardent les
   classes de visite.remesure (pv-zonages-…).
   ================================================================ */
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 300; font-display: swap; src: url("/polices/titillium-web-300.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 400; font-display: swap; src: url("/polices/titillium-web-400.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 600; font-display: swap; src: url("/polices/titillium-web-600.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 700; font-display: swap; src: url("/polices/titillium-web-700.woff2") format("woff2"); }

:root {
	--fond: #f4f4f4;
	--panneau: #ffffff;
	--sur-vue: rgba(255, 255, 255, 0.94);      /* les commandes posées sur la vue 3D */
	--trait: rgba(80, 79, 77, 0.16);
	--trait-fort: rgba(80, 79, 77, 0.34);
	--texte: #504f4d;
	--gris: #6b6b6b;
	--gris-clair: #8a8987;
	--accent: #ccd725;                         /* vert anis : ce qui est actif, ce qui agit */
	--accent-fonce: #707614;                   /* le même, lisible en texte sur du blanc */
	--accent-pale: rgba(204, 215, 37, 0.14);
	--rouge: #d13133;
	--bleu: #59a8b7;
	--alerte: #9a5b00;
	--police: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--radius-md: 6px;
	--ombre: 0 4px 14px rgba(80, 79, 77, 0.16);
	color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
	background: var(--fond);
	color: var(--texte);
	font: 14.5px/1.45 var(--police);
	display: flex;
	flex-direction: column;
}
button, input, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-fonce); outline-offset: 1px; }

/* La barre : la marque, l'adresse, le logo de NDC26. */
.barre { display: flex; align-items: center; gap: 18px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--trait); }
.marque { color: inherit; text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.marque-nom { font-size: 21px; font-weight: 700; letter-spacing: 0.01em; color: var(--texte); }
.marque-nom b { font-weight: 700; color: var(--accent-fonce); }
.marque-sous { margin-top: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris-clair); }
.recherche { position: relative; flex: 1; max-width: 640px; }
#adresse {
	width: 100%; height: 40px; padding: 0 12px; font-size: 15px; color: var(--texte);
	background: #fff; border: 1px solid var(--trait-fort); border-radius: 3px;
}
#adresse::placeholder { color: var(--gris-clair); }
#adresse:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent-fonce); }
#suggestions {
	position: absolute; z-index: 20; top: 44px; left: 0; right: 0; margin: 0; padding: 4px; list-style: none;
	background: #fff; border: 1px solid var(--trait); border-radius: 3px; box-shadow: var(--ombre);
}
#suggestions li { padding: 8px 10px; border-radius: 2px; cursor: pointer; }
#suggestions li[aria-selected="true"], #suggestions li:hover { background: var(--accent-pale); }
/* « NDC26 » collé à la marque, à la hauteur de « Geocharge » (12/11/2026 : le mot seul, sans la ligne « Métal · Bois ·
   Béton », trop petite) ; il mène à www.ndc26.fr. */
.marques { flex: none; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 8px; }
.marques .marque-sous { grid-column: 1 / -1; }
.ndc26 { display: block; line-height: 0; border-radius: 2px; }
.ndc26 img { display: block; height: 17px; width: auto; }
.ndc26:hover img { opacity: 0.75; }

/* La vue 3D à gauche, le panneau des résultats à droite ; l'un sous l'autre sur un écran étroit. */
.principal { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
.vue { position: relative; min-height: 0; overflow: hidden; background: var(--fond); }
#vue3d { position: absolute; inset: 0; }
#vue3d canvas { display: block; touch-action: none; }
.panneau {
	overflow-y: auto; padding: 12px; background: var(--fond); border-left: 1px solid var(--trait);
	display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 860px) {
	/* minmax(0, 1fr) : une colonne « 1fr » ne descend pas sous la largeur de son contenu, et la page débordait à
	   moins de 280 px (volet du navigateur étroit). */
	.principal { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(360px, 58vh) auto; }
	.panneau { border-left: 0; border-top: 1px solid var(--trait); overflow: visible; }
	body { height: auto; min-height: 100%; }
	/* La barre sur deux lignes : la marque et le logo, puis l'adresse sur toute la largeur. */
	.barre { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
	.recherche { flex-basis: 100%; max-width: none; order: 1; }
	.ndc26 img { height: 16px; }
	/* Une valeur longue (l'adresse) passe à la ligne plutôt que de pousser le panneau. */
	.pv-zonages-ligne { flex-wrap: wrap; row-gap: 0; }
	.pv-zonages-valeur { margin-left: auto; overflow-wrap: anywhere; max-width: 100%; min-width: 0; }
	.pv-zonages-valeur select { max-width: 100%; }
	.aide { display: none; }
}
@media (max-width: 360px) {
	.marque { white-space: normal; }
	.marque-sous { display: none; }
	.pv-champ { width: 60px; }
}

/* Sur la vue : les fonds et les vues, le nord, l'état, l'aide. */
/* La barre d'outils et, dessous, le bandeau des zonages : une colonne qui s'arrête avant la boussole. Sur un écran étroit,
   la barre passe sur deux lignes et le bandeau descend avec elle (un placement fixe le faisait chevaucher). Le vide de la
   colonne laisse passer les gestes vers la vue 3D. */
.haut {
	position: absolute; top: 10px; left: 10px; right: 68px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start;
	gap: 8px; pointer-events: none;
}
.haut > * { pointer-events: auto; }
.outils { display: flex; flex-wrap: wrap; gap: 8px; }
.groupe {
	display: inline-flex; gap: 2px; background: var(--sur-vue); border: 1px solid var(--trait); border-radius: 3px; padding: 2px;
	box-shadow: var(--ombre);
}
.outil {
	height: 30px; padding: 0 11px; font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--texte); background: transparent; border: 0; border-radius: 2px; cursor: pointer;
}
.outil[aria-checked="true"], .outil[aria-pressed="true"] { background: var(--accent); color: var(--texte); }
.outil:hover:not([aria-checked="true"]):not([aria-pressed="true"]) { background: var(--accent-pale); }
.nord {
	position: absolute; right: 12px; top: 10px; z-index: 5; display: grid; justify-items: center; color: var(--texte);
	background: var(--sur-vue); border: 1px solid var(--trait); border-radius: 50%; width: 46px; height: 46px; padding: 2px 0 0;
	box-shadow: var(--ombre); cursor: pointer; font: inherit;
}
/* La boussole est un bouton (12/11/2026) : un clic met le nord en haut et la vue de dessus. */
.nord:hover { background: var(--accent-pale); }
.nord:focus-visible { outline: 2px solid var(--accent-fonce); outline-offset: 2px; }
.nord svg { transition: none; }
.nord span {
	position: absolute; bottom: -19px; padding: 0 4px; font-size: 11px; font-weight: 700; color: var(--texte);
	background: var(--sur-vue); border-radius: 2px;
}
.etat {
	position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 5; margin: 0; padding: 6px 14px;
	font-size: 13px; color: var(--texte); background: var(--sur-vue); border: 1px solid var(--trait); border-radius: 16px;
	box-shadow: var(--ombre); max-width: calc(100% - 24px);
}
.etat:empty { display: none; }
.etat.erreur { color: var(--rouge); border-color: rgba(209, 49, 51, 0.45); }
/* La fiche de la mesure, en bas de la vue (comme celle de Google Maps). */
.mesure {
	position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6; width: max-content; min-width: 260px;
	max-width: calc(100% - 20px); padding: 9px 13px; background: #fff; border: 1px solid var(--trait); border-top: 3px solid var(--accent);
	border-radius: 3px; box-shadow: var(--ombre);
}
.mesure[hidden] { display: none; }
/* La fiche du bâtiment de l'IGN cliqué, en bas de la vue comme la mesure (12/11/2026), et non plus dans le panneau, « pour ne
   pas prêter à confusion » avec le projet : liseré bleu (un bâtiment existant), le bouton d'action en anis. */
.fiche-batiment {
	position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6; width: min(440px, calc(100% - 20px));
	padding: 9px 13px 11px; background: #fff; border: 1px solid var(--trait); border-top: 3px solid var(--bleu);
	border-radius: 3px; box-shadow: var(--ombre);
}
.fiche-batiment[hidden] { display: none; }
.fiche-batiment-tete { display: flex; align-items: center; gap: 8px; }
.fiche-batiment-tete strong { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.fiche-batiment-lignes { display: grid; grid-template-columns: max-content 1fr; gap: 1px 12px; margin: 6px 0 9px; font-size: 12.5px; line-height: 1.5; }
.fiche-batiment-lignes dt { color: var(--gris); }
.fiche-batiment-lignes dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fiche-batiment-bouton {
	display: block; width: 100%; padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
	color: var(--texte); background: var(--accent); border: 1px solid var(--accent); border-radius: 2px; cursor: pointer;
}
.fiche-batiment-bouton:hover:not(:disabled) { color: #fff; background: var(--accent-fonce); border-color: var(--accent-fonce); }
.fiche-batiment-bouton:focus-visible { outline: 2px solid var(--accent-fonce); outline-offset: 2px; }
.fiche-batiment-bouton:disabled { color: var(--gris); background: transparent; border-color: var(--trait); cursor: not-allowed; }
.fiche-batiment-note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--gris); }
.mesure-tete { display: flex; align-items: center; gap: 8px; }
.mesure-tete strong { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mesure-tete .outil { margin-left: auto; height: 26px; border: 1px solid var(--trait-fort); }
.mesure-tete .pv-fermer { margin-left: 0; }
.mesure-aide { margin: 4px 0 0; font-size: 12px; color: var(--gris); }
.mesure-total { margin: 4px 0 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mesure-total:empty { display: none; }
.mesure-total span { display: block; font-size: 12.5px; font-weight: 400; color: var(--gris); }
.vue.en-mesure .aide { display: none; }
.aide {
	position: absolute; left: 10px; bottom: 8px; margin: 0; padding: 4px 10px; font-size: 12px; color: var(--gris); z-index: 5;
	max-width: calc(100% - 20px); background: var(--sur-vue); border: 1px solid var(--trait); border-radius: 3px;
}
@media (pointer: coarse) {
	.outil { height: 36px; font-size: 12px; }
}

/* Le bandeau des zonages, en haut de la vue (comme celui de la carte de visite.remesure). */
.bandeau {
	/* Dans la colonne du haut, sous la barre d'outils, centré. */
	align-self: center; width: max-content; max-width: 100%;
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 0;
	font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--texte);
	background: var(--sur-vue); border: 1px solid var(--trait); border-radius: 999px; padding: 4px 12px; box-shadow: var(--ombre);
}
.bandeau[hidden] { display: none; }
.pv-zonages-bout { display: inline-flex; align-items: center; gap: 4px; }
.pv-zonages-bout-mot { font-weight: 400; color: var(--gris); }
.pv-zonages-bout strong { font-weight: 700; }
.pv-zonages-bout:not(:last-child)::after { content: "·"; margin: 0 2px 0 6px; color: var(--gris-clair); }
.pv-zonages-bout svg { color: var(--accent-fonce); }

/* Les blocs du tableau (repris de visite.remesure), à plat, avec un filet à gauche à la couleur du sujet. */
.pv-zonages-bloc {
	background: var(--panneau); border: 1px solid var(--trait); border-left: 3px solid var(--trait-fort);
	border-radius: 3px; padding: 9px 12px;
}
.pv-zonages-bloc--projet { border-left-color: var(--texte); }
.pv-zonages-bloc--neige { border-left-color: var(--bleu); }
.pv-zonages-bloc--vent { border-left-color: var(--accent); }
.pv-zonages-bloc--seisme { border-left-color: var(--rouge); }
.pv-zonages-bloc--orographie { border-left-color: var(--accent-fonce); }
.pv-fermer {
	margin-left: auto; width: 24px; height: 24px; padding: 0; font: inherit; font-size: 16px; line-height: 1; color: var(--texte);
	background: #fff; border: 1px solid var(--trait-fort); border-radius: 2px; cursor: pointer;
}
.pv-fermer:hover { background: var(--accent-pale); }
/* Le titre d'un bloc, comme les intitulés de ndc26.fr : « [ NEIGE ] », en capitales espacées. Le pictogramme passe
   devant le crochet, le bouton de fermeture derrière. */
.pv-zonages-bloc h4 {
	margin: 0 0 6px; display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-fonce);
}
.pv-zonages-bloc h4 > svg { order: -2; margin-right: 2px; color: var(--texte); }
.pv-zonages-bloc h4::before { content: "["; order: -1; font-weight: 400; }
.pv-zonages-bloc h4::after { content: "]"; order: 1; font-weight: 400; }
.pv-zonages-bloc h4 > .pv-fermer { order: 2; }
.pv-zonages-bloc--neige h4 > svg { color: var(--bleu); }
.pv-zonages-bloc--vent h4 > svg { color: var(--accent-fonce); }
.pv-zonages-bloc--seisme h4 > svg { color: var(--rouge); }
.pv-zonages-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; line-height: 1.75; }
.pv-zonages-libelle { color: var(--gris); min-width: 8em; }   /* « Catégorie de terrain » ne se casse plus mot par mot */
.pv-zonages-valeur { font-weight: 600; text-align: right; color: var(--texte); font-variant-numeric: tabular-nums; }
.pv-zonages-valeur select, .pv-champ {
	font: inherit; font-size: 12.5px; padding: 2px 6px; max-width: min(230px, 100%); background: #fff; color: var(--texte);
	border: 1px solid var(--trait-fort); border-radius: 2px;
}
.pv-zonages-valeur select:focus, .pv-champ:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent-fonce); }
.pv-champ { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.pv-champs { display: inline-flex; align-items: center; gap: 4px; }
.pv-zonages-note { font-size: 11.5px; line-height: 1.4; color: var(--gris-clair); margin: -3px 0 3px; }
.pv-zonages-attente, .pv-zonages-source {
	margin: 0; font-size: 12px; line-height: 1.5; color: var(--gris); background: var(--panneau);
	border: 1px solid var(--trait); border-radius: 3px; padding: 8px 10px;
}
.pv-zonages-source { font-size: 11.5px; color: var(--gris-clair); }
.pv-avertissement { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--alerte); }
/* La barre de progression du calcul du vent (12/11/2026) : la part faite, en anis, qui glisse ; sans pourcentage connu (le
   chargement de Python), un segment qui défile. Le même nœud d'un dessin du panneau à l'autre (tableau.js). */
.pv-zonages-valeur .pv-progression { display: block; width: clamp(120px, 40vw, 200px); }
.pv-progression { position: relative; height: 8px; overflow: hidden; border-radius: 4px; background: var(--trait); }
.pv-progression-barre { width: 3%; height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.35s ease-out; }
.pv-progression.indeterminee .pv-progression-barre { width: 30%; transition: none; animation: pv-defile 1.3s ease-in-out infinite; }
@keyframes pv-defile { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) {
	.pv-progression.indeterminee .pv-progression-barre { width: 100%; opacity: 0.5; animation: none; }
}
.pv-avertissement::before { content: "⚠ "; }
@media (pointer: coarse) {
	.pv-champ, .pv-zonages-valeur select { height: 36px; font-size: 13px; }
}

/* Les faces du projet, dans le bloc Vent (rugosité automatique) */
.pv-faces { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pv-faces th, .pv-faces td { padding: 1px 6px; text-align: right; }
.pv-faces th:first-child, .pv-faces td:first-child { text-align: left; }
.pv-faces th { font-weight: 600; color: var(--gris); }
.pv-faces tr.plus-chargee td { font-weight: 700; background: var(--accent-pale); }
.pv-legende span { white-space: nowrap; margin-right: 6px; }
.pv-legende span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 3px; vertical-align: -1px;
	background: var(--c); border: 1px solid rgba(80, 79, 77, 0.35); }

/* L'aide de la carte, sur la vue tant qu'aucune adresse n'est choisie (« arrive par défaut sur l'adresse France, pas de boîte de
   dialogue », 12/11/2026 ; la carte est la vue 3D elle-même, zoomable de la France entière à la rue : un clic sur le relief
   ouvre l'adresse la plus proche). Des outils de la vue, seul le choix du fond reste (la carte le suit). */
.vue.vide #vue3d canvas { cursor: crosshair; }
.france-aide {
	position: absolute; left: 50%; bottom: 14px; z-index: 4; transform: translateX(-50%); margin: 0; padding: 6px 14px; max-width: calc(100% - 24px);
	font-size: 13px; color: var(--texte); background: var(--sur-vue); border: 1px solid var(--trait); border-radius: 16px;
	box-shadow: var(--ombre); pointer-events: none;
}
html.avec-adresse .france-aide { display: none; }
html:not(.avec-adresse) .vue.vide :is(.nord, .aide, .etat:not(.erreur), .outils .groupe:not(:first-child)) { display: none; }
/* Le mode d'emploi dans le panneau, tant qu'aucune adresse n'est choisie. */
.panneau-titre { margin: 2px 0 0; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--texte); }
.panneau-etapes { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--gris); }
.panneau-etapes li { margin-bottom: 4px; }
.panneau-etapes strong { color: var(--texte); font-weight: 600; }
.panneau-exemple {
	align-self: flex-start; min-height: 36px; padding: 6px 18px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--texte); background: var(--accent); border: 0; border-radius: 2px; cursor: pointer;
}
.panneau-exemple:hover:not(:disabled) { color: #fff; background: var(--accent-fonce); }
.panneau-exemple:disabled { cursor: progress; opacity: 0.7; }
/* L'avancement du chargement, en fond de la pastille d'état. */
.etat.avance { background: linear-gradient(90deg, rgba(204, 215, 37, 0.4) var(--avance, 0%), var(--sur-vue) var(--avance, 0%)); }
.pv-apercu p { margin: 0 0 6px; }
.pv-apercu p:last-child { margin: 0; }
.pv-apercu strong { color: var(--texte); font-weight: 600; }