/*
 * Planimonde, l'outil simple (racine du site). Mêmes variables que planimonde.css ; designs.css leur donne les valeurs
 * du design « Blocs », le seul du site public depuis le 2026-10-08.
 */
:root {
	--fond: #eef2f6; --surface: #ffffff; --surface2: #f3f6f9; --encre: #0d2951; --encre2: #5b6b82; --filet: #d5dde6;
	--accent: #0d2951; --accent-encre: #ffffff; --accent2: #1099b6; --danger: #b3402e;
	--barre-fond: #ffffff; --barre-encre: #0d2951;
	--scene-fond: #e6ebf1; --grille: rgba(13, 41, 81, .08); --grille-forte: rgba(13, 41, 81, .16);
	--pm-papier: #ffffff; --pm-trait: #2b3a4f; --pm-cote: #0f7f98; --pm-elem: #e3e9f0;
	--rayon: 8px; --rayon-btn: 7px; --trait: 1px; --ombre: 0 1px 2px rgba(13, 41, 81, .08), 0 6px 20px rgba(13, 41, 81, .08);
	--police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --police-titre: var(--police);
	--casse: none; --espacement: 0; --graisse-titre: 650; --corps: 14px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: var(--corps)/1.45 var(--police); overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

.s-app { height: 100%; display: grid; grid-template: "barre barre barre" auto "ajout scene liste" minmax(0, 1fr) / 15.5rem minmax(0, 1fr) 18rem; }

/* Barre du haut */
.s-barre { grid-area: barre; display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; background: var(--barre-fond); color: var(--barre-encre); border-bottom: var(--trait) solid var(--filet); min-width: 0; }
.s-marque { display: flex; align-items: center; flex: none; color: inherit; text-decoration: none; font: var(--graisse-titre) 1.05rem var(--police-titre); margin-right: .3rem; white-space: nowrap; }
.s-marque .pm-logo { height: 1.95rem; width: auto; display: block; flex: none; }
.s-nom { flex: 1 1 8rem; min-width: 5rem; max-width: 22rem; border: var(--trait) solid transparent; background: transparent; border-radius: var(--rayon-btn); padding: .3rem .5rem; font-weight: 600; text-overflow: ellipsis; }
.s-nom:hover, .s-nom:focus { border-color: var(--filet); background: var(--surface); color: var(--encre); }
.s-pousse { flex: 1 1 0; }
.s-tel { display: none; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .38rem .7rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface); color: var(--encre); cursor: pointer; white-space: nowrap; font-weight: 550; }
.s-btn:hover { border-color: var(--encre2); }
.s-btn:disabled { opacity: .4; cursor: default; }
.s-btn.primaire { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.s-btn.danger { color: var(--danger); }
.s-btn.rond { width: 2.1rem; padding: .38rem 0; }
.s-barre select { padding: .36rem .4rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface); color: var(--encre); }

/* Panneaux */
.s-ajout, .s-liste { background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.s-ajout { grid-area: ajout; border-right: var(--trait) solid var(--filet); }
.s-liste { grid-area: liste; border-left: var(--trait) solid var(--filet); }
.s-tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .7rem .4rem; }
.s-tete h2 { margin: 0; font: var(--graisse-titre) .95rem var(--police-titre); letter-spacing: var(--espacement); text-transform: var(--casse); }
.s-tete small { color: var(--encre2); }
.s-fermer { display: none; }
.s-cherche { margin: 0 .7rem .5rem; padding: .4rem .55rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface2); }
.s-defile { overflow-y: auto; flex: 1 1 0; padding: 0 .7rem .8rem; scrollbar-width: thin; }
.s-cat { margin: .55rem 0 .3rem; font-size: .76rem; font-weight: 650; color: var(--encre2); text-transform: uppercase; letter-spacing: .05em; }
.s-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.s-tuile { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .4rem .25rem .35rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon); background: var(--surface); cursor: grab; text-align: center; line-height: 1.2; touch-action: none; user-select: none; }
.s-tuile:hover { border-color: var(--accent2); background: var(--surface2); }
.s-tuile svg { width: 100%; height: 2.3rem; pointer-events: none; }
.s-tuile b { font-weight: 550; font-size: .82rem; }
.s-tuile small { color: var(--encre2); font-size: .72rem; }
.s-vide { color: var(--encre2); padding: .4rem 0; }

/* Liste de ce que contient le plan */
.s-items { list-style: none; margin: 0; padding: 0; }
.s-item { border: var(--trait) solid transparent; border-radius: var(--rayon); margin-bottom: .15rem; }
.s-item > button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .38rem .45rem; border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: var(--rayon); }
.s-item > button:hover { background: var(--surface2); }
.s-item > button span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.s-item > button small { color: var(--encre2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-item > button svg { width: 2rem; height: 1.25rem; flex: none; }
.s-item.choisi { border-color: var(--accent2); background: var(--surface2); }
.s-fiche { padding: .2rem .55rem .6rem; display: grid; gap: .45rem; }
.s-fiche label { display: grid; gap: .15rem; font-size: .8rem; color: var(--encre2); }
.s-fiche input[type=text] { padding: .4rem .5rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface); color: var(--encre); font-size: 1rem; width: 100%; min-width: 0; }
.s-fiche input.faux { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.s-deux { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.s-angle { display: grid; grid-template-columns: auto 1fr auto; gap: .3rem; align-items: center; }
.s-couleurs { display: flex; flex-wrap: wrap; gap: .3rem; }
.s-couleurs button { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--filet); cursor: pointer; padding: 0; }
.s-couleurs button[aria-pressed=true] { outline: 2px solid var(--accent2); outline-offset: 1px; }
.s-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.s-actions .s-btn { flex: 1 1 auto; font-size: .86rem; padding: .32rem .5rem; }
.s-aide { color: var(--encre2); font-size: .78rem; margin: 0; }
.s-total { border-top: var(--trait) solid var(--filet); padding: .5rem .7rem; color: var(--encre2); font-size: .85rem; }

/* Scène */
.s-scene { grid-area: scene; position: relative; background: var(--scene-fond); min-width: 0; min-height: 0; overflow: hidden; }
.s-scene svg.s-plan { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; display: block; }
.s-zoom { position: absolute; right: .7rem; bottom: .7rem; display: flex; gap: .25rem; }
.s-echelle { position: absolute; left: .7rem; bottom: .7rem; font-size: .75rem; color: var(--encre2); pointer-events: none; }
.s-echelle i { display: block; height: 5px; border: 1.5px solid var(--encre2); border-top: 0; margin-top: 2px; }
.s-onglets { display: none; }

/* Carte de départ : dans la scène, pas par-dessus l'écran */
.s-depart { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(27rem, calc(100% - 1.5rem)); background: var(--surface); border: var(--trait) solid var(--filet); border-radius: calc(var(--rayon) + 4px); box-shadow: var(--ombre); padding: 1.1rem 1.2rem 1rem; }
.s-depart h1 { margin: 0 0 .2rem; font: var(--graisse-titre) 1.2rem var(--police-titre); }
.s-depart p { margin: 0 0 .8rem; color: var(--encre2); }
.s-depart form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: end; }
.s-depart label { display: grid; gap: .15rem; font-size: .8rem; color: var(--encre2); }
.s-depart input { padding: .5rem .6rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface); color: var(--encre); font-size: 1.05rem; min-width: 0; width: 100%; }
.s-depart .s-choix { grid-column: 1 / -1; display: flex; gap: .4rem; flex-wrap: wrap; }
.s-depart .s-choix { gap: .4rem 1.2rem; }
.s-depart .s-choix label { display: inline-flex; align-items: center; gap: .35rem; font-size: .92rem; color: var(--encre); cursor: pointer; white-space: nowrap; }
.s-depart .s-choix input { width: auto; padding: 0; margin: 0; }
.s-depart .s-btn.primaire { grid-column: 1 / -1; padding: .55rem; }
.s-depart .s-liens { display: flex; gap: 1rem; justify-content: center; margin-top: .7rem; }
.s-lien { border: 0; background: none; color: var(--accent2); cursor: pointer; padding: 0; text-decoration: underline; }

/* Menus, dialogue, messages */
.s-menu { position: absolute; z-index: 30; min-width: 13rem; background: var(--surface); border: var(--trait) solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre); padding: .3rem; display: grid; }
.s-menu button { text-align: left; border: 0; background: none; padding: .45rem .6rem; border-radius: var(--rayon-btn); cursor: pointer; }
.s-menu button:hover { background: var(--surface2); }
.s-menu hr { border: 0; border-top: var(--trait) solid var(--filet); margin: .25rem 0; width: 100%; }
.s-voile { position: fixed; inset: 0; z-index: 40; background: rgba(10, 20, 35, .35); display: grid; place-items: center; padding: 1rem; }
.s-dialogue { background: var(--surface); border-radius: calc(var(--rayon) + 4px); box-shadow: var(--ombre); width: min(30rem, 100%); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; }
.s-dialogue header { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem .4rem; }
.s-dialogue h2 { margin: 0; font: var(--graisse-titre) 1.05rem var(--police-titre); }
.s-dialogue .s-corps { padding: .2rem 1rem 1rem; overflow-y: auto; }
.s-plans { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .3rem; }
.s-plans li { display: flex; align-items: center; gap: .4rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon); padding: .35rem .35rem .35rem .7rem; }
.s-plans li.courant { border-color: var(--accent2); }
.s-plans li span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.s-plans li small { color: var(--encre2); }
.s-raccourcis { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; margin: .6rem 0 0; }
.s-raccourcis dt { font-weight: 600; white-space: nowrap; }
.s-raccourcis dd { margin: 0; color: var(--encre2); }
.s-toast { position: fixed; left: 50%; bottom: 4.2rem; transform: translateX(-50%); z-index: 50; background: var(--encre); color: var(--surface); padding: .5rem .9rem; border-radius: 999px; box-shadow: var(--ombre); max-width: calc(100vw - 2rem); }

/* Visite guidée : une bulle à côté de ce qu'elle montre, jamais lancée d'office */
.s-visite-cadre { position: fixed; z-index: 60; border: 2px solid var(--accent2); border-radius: var(--rayon); box-shadow: 0 0 0 9999px rgba(10, 20, 35, .32); pointer-events: none; transition: all .2s; }
.s-visite { position: fixed; z-index: 61; width: min(19rem, calc(100vw - 1.5rem)); background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); padding: .8rem .9rem; }
.s-visite p { margin: 0 0 .7rem; }
.s-visite div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.s-visite small { color: var(--encre2); }

/* Au doigt, le panneau défile : une tuile s'y touche pour ajouter, elle ne se glisse pas. */
@media (pointer: coarse) { .s-tuile { touch-action: pan-y; cursor: pointer; } }

#s-impression { display: none; }

/* Tablette et téléphone : le plan prend l'écran, les deux panneaux montent du bas */
@media (max-width: 900px) {
	.s-app { grid-template: "barre" auto "scene" minmax(0, 1fr) "onglets" auto / minmax(0, 1fr); }
	.s-ajout, .s-liste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 62vh; border: 0; border-top: var(--trait) solid var(--filet); border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(10, 20, 35, .18); transform: translateY(105%); transition: transform .2s; padding-bottom: env(safe-area-inset-bottom); }
	.s-app[data-panneau=ajout] .s-ajout, .s-app[data-panneau=liste] .s-liste { transform: none; }
	.s-fermer { display: inline-flex; }
	.s-tuiles { grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); }
	.s-onglets { grid-area: onglets; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .4rem .6rem calc(.4rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: var(--trait) solid var(--filet); }
	.s-onglets .s-btn { padding: .6rem; }
	.s-barre { gap: .3rem; padding: .35rem .45rem; flex-wrap: wrap; }
	.s-cache-tel { display: none; }
	/* Du logo, le téléphone ne garde que l'emblème : le nom, à sa droite, est rogné. */
	.s-marque { width: 1.75rem; overflow: hidden; margin-right: 0; }
	.s-marque .pm-logo { height: 1.8rem; }
	.s-barre .s-pousse { flex: 0 0 100%; height: 0; }
	.s-barre .s-nom { max-width: none; }
	.s-barre select, .s-barre [data-a=plans], .s-barre [data-a=exporter] { flex: 1 1 0; min-width: 0; }
	.s-tel { display: inline; }
	.s-zoom { bottom: .5rem; right: .5rem; }
}

@media print {
	@page { margin: 12mm; }
	body { overflow: visible; background: #fff; }
	.s-app, .s-toast, .s-voile { display: none !important; }
	#s-impression { display: block; }
	#s-impression h1 { font: 600 14pt system-ui, sans-serif; margin: 0 0 2mm; color: #000; }
	#s-impression p { font: 9pt system-ui, sans-serif; margin: 0 0 4mm; color: #444; }
	#s-impression svg { width: 100%; height: auto; max-height: 240mm; }
}