/*
 * Planimonde, pages du site (accueil, connexion, compte) et du tableau de bord /gestion.
 * Mêmes variables que l'éditeur (planimonde.css) : les vingt designs s'y appliquent aussi.
 */
body.s-site { overflow: auto; height: auto; min-height: 100dvh; display: flex; flex-direction: column; font-size: 16px; line-height: 1.55; }
.s-site a { color: var(--accent2); }
.s-site a.pm-btn, .s-site a.pm-btn-icone { color: var(--encre); text-decoration: none; }
.s-site a.pm-btn.primaire { color: var(--accent-encre); }

.s-entete { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.2rem; background: var(--barre-fond); color: var(--barre-encre); border-bottom: var(--trait) solid var(--filet); flex-wrap: wrap; }
.s-entete .pm-marque { color: inherit; }
.s-entete .pm-logo { height: 38px; }
.s-nav { display: flex; align-items: center; gap: .3rem 1.1rem; margin-left: auto; flex-wrap: wrap; }
.s-nav > a:not(.pm-btn) { color: inherit; text-decoration: none; font-weight: 600; padding: .3rem 0; }
.s-nav > a:not(.pm-btn):hover, .s-nav > a[aria-current] { text-decoration: underline; text-underline-offset: .3em; }
.s-etiquette { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; padding: .2rem .55rem; border-radius: var(--rayon-btn); background: var(--accent2); color: var(--surface); }
.s-entete .pm-designs { border: 0; color: var(--encre); }
.s-entete .pm-design-nom { color: var(--barre-encre); }

.s-page { flex: 1; width: min(1080px, 100%); margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }
.s-page h1 { font: var(--graisse-titre) clamp(1.7rem, 4vw, 2.5rem)/1.15 var(--police-titre); margin: 0 0 1rem; text-transform: var(--casse); letter-spacing: var(--espacement); }
.s-page h2 { font: var(--graisse-titre) 1.2rem/1.25 var(--police-titre); margin: 0 0 .6rem; text-transform: var(--casse); letter-spacing: var(--espacement); }
.s-etroit { width: min(420px, 100%); margin: 2rem auto; }
.s-moyen { width: min(760px, 100%); margin: 0 auto; }
.s-bloc { width: 100%; min-height: 44px; }
.s-centre { text-align: center; max-width: 46rem; margin-left: auto; margin-right: auto; }
.s-titre { text-align: center; font-size: 1.5rem !important; margin: 3rem 0 1.2rem !important; }
.s-avis { margin-bottom: 1.2rem; }

.s-heros { text-align: center; padding: 3rem 0 2.2rem; }
.s-heros h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); max-width: 16em; margin-left: auto; margin-right: auto; }
.s-heros > p { max-width: 40rem; margin: .8rem auto; font-size: 1.12rem; }
.s-gros { font-size: 1.1rem; padding: .8rem 1.6rem; min-height: 50px; }

.s-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.s-carte { background: var(--surface); border: var(--trait) solid var(--filet); border-radius: var(--rayon); padding: 1.1rem 1.2rem; box-shadow: var(--ombre); margin: 0 0 1rem; }
.s-grille .s-carte { margin: 0; }
.s-carte p:last-child { margin-bottom: 0; }
.s-lien { display: grid; gap: .25rem; text-decoration: none; color: var(--encre) !important; }
.s-lien:hover { border-color: var(--accent2); }
.s-lien span { color: var(--encre2); font-size: .92rem; }
.s-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; max-width: 46rem; margin: 1rem auto; }
.s-pack { display: grid; gap: .2rem; justify-items: center; text-align: center; padding: 1rem; height: auto; white-space: normal; }
.s-pack b { font-size: 1.15rem; }
.s-prix { font-size: 1.5rem; font-weight: 700; color: var(--accent2); font-variant-numeric: tabular-nums; }
.s-solde { font-size: 2.2rem; font-weight: 700; margin: 0 0 .3rem; font-variant-numeric: tabular-nums; }

.s-liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.s-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; padding: .55rem 0; border-bottom: var(--trait) solid var(--filet); }
.s-liste li a { flex: 1; min-width: 10rem; }
.s-pastille { display: inline-block; padding: .05rem .55rem; border-radius: 99px; background: var(--surface2); border: 1px solid var(--filet); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.s-pastille.danger { color: var(--danger); border-color: var(--danger); }
.s-ligne { display: flex; gap: .5rem; margin: 1rem 0; flex-wrap: wrap; }
.s-ligne input[type=search] { flex: 1; min-width: 12rem; padding: .45rem .7rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface); min-height: 38px; }
.s-danger { margin-top: 1.4rem; border-top: var(--trait) solid var(--filet); padding-top: .8rem; }
.s-danger summary { cursor: pointer; color: var(--danger); font-weight: 600; }
.s-code { font-size: 1.7rem !important; letter-spacing: .25em; text-align: center; }
.s-site .pm-champ input, .s-site .pm-champ select { min-height: 42px; background: var(--surface); }
.s-carte .pm-champ input, .s-carte .pm-champ select { background: var(--surface2); }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .9em; background: var(--surface2); padding: .1em .35em; border-radius: 4px; }

.s-table { width: 100%; border-collapse: collapse; }
.s-table th, .s-table td { text-align: left; padding: .5rem .6rem .5rem 0; border-bottom: var(--trait) solid var(--filet); vertical-align: top; }
.s-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); font-weight: 650; }
.s-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-table form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.s-chiffre { display: grid; gap: .15rem; }
.s-chiffre span { color: var(--encre2); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.s-chiffre b { font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.s-chiffre small { color: var(--encre2); }

.s-pied { padding: 1.2rem; text-align: center; color: var(--encre2); font-size: .9rem; border-top: var(--trait) solid var(--filet); background: var(--surface); }
.s-pied p { margin: 0; }

/* Téléphone : les tableaux deviennent des fiches, la navigation passe sous le logo. */
@media (max-width: 700px) {
	.s-nav { margin-left: 0; width: 100%; gap: .2rem .9rem; }
	.s-entete .pm-design-nom { min-width: 0; }
	.s-empile thead { display: none; }
	.s-empile tr { display: block; padding: .6rem 0; border-bottom: var(--trait) solid var(--filet); }
	.s-empile td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem 0; text-align: right; }
	.s-empile td::before { content: attr(data-libelle); color: var(--encre2); font-size: .85rem; text-align: left; }
	.s-empile td:empty { display: none; }
}

/*
 * ───────────── Site public : types de plans, exemples, outils, métiers, pages légales, écoles ─────────────
 * Toujours les seules variables des designs : aucune couleur en dur.
 */
[hidden] { display: none !important; }
.s-site h3 { font: var(--graisse-titre) 1.05rem/1.3 var(--police-titre); margin: 1.2rem 0 .4rem; text-transform: var(--casse); letter-spacing: var(--espacement); }
.s-fil { font-size: .85rem; color: var(--encre2); margin: 0 0 1rem; }
.s-fil a { color: var(--encre2); }
.s-surtitre { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 650; color: var(--encre2); margin: 0 0 .4rem; }
.s-surtitre a { color: inherit; text-decoration: none; }
.s-chapeau { font-size: 1.12rem; max-width: 44rem; }
.s-fiche h2, .s-texte h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; }
.s-fiche ul, .s-fiche ol, .s-texte ul, .s-texte ol, .s-deux ul { padding-left: 1.3rem; }
.s-fiche li, .s-texte li, .s-deux li { margin: .35rem 0; }
.s-etapes { counter-reset: etape; list-style: none; padding: 0 !important; }
.s-etapes li { counter-increment: etape; position: relative; padding: .15rem 0 .15rem 2.7rem; margin: .7rem 0; min-height: 2rem; }
.s-etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent2); color: var(--surface); font-weight: 700; }
.s-suite { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0; }
.s-deux { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.s-deux h3 { margin-top: 0; }
.s-titre small { font-size: .8rem; font-weight: 600; color: var(--encre2); vertical-align: middle; }
.s-famille .s-titre { text-align: left; margin-top: 2.2rem !important; }
.s-recherche input[type=search] { font-size: 1.05rem; min-height: 48px; }
.s-metiers { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; max-width: 52rem; }
a.s-pastille { color: var(--encre) !important; text-decoration: none; padding: .35rem .85rem; min-height: 36px; display: inline-flex; align-items: center; background: var(--surface); }
a.s-pastille:hover { border-color: var(--accent2); }
.s-pastille.s-ok { color: var(--accent2); border-color: var(--accent2); }
.s-pack small { color: var(--encre2); }
.s-question { border-bottom: var(--trait) solid var(--filet); }
.s-question summary { cursor: pointer; font-weight: 650; padding: .75rem 0; }
.s-question > p, .s-question > form, .s-question > ol, .s-question > table, .s-question > ul { margin: 0 0 1rem; }
.s-site .pm-champ textarea { width: 100%; padding: .5rem .6rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface2); font: inherit; color: inherit; min-height: 5.5rem; resize: vertical; }
.s-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s-pied p { line-height: 2; }

/* Aperçu d'un plan : le dessin de l'éditeur (rendu.js), aux couleurs du design choisi. */
.s-apercu { margin: 1.4rem 0; padding: .8rem; background: var(--scene-fond); border: var(--trait) solid var(--filet); border-radius: var(--rayon); }
.s-apercu svg { display: block; width: 100%; height: auto; max-height: 70vh; }
.s-apercu figcaption { font-size: .85rem; color: var(--encre2); text-align: center; margin-top: .5rem; }
.pm-apercu .pm-sol { fill: var(--pm-papier); }
.pm-apercu .pm-elem .c { fill: var(--c, var(--pm-elem)); stroke: var(--pm-trait); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.pm-apercu .pm-elem .d { fill: color-mix(in srgb, var(--pm-papier) 55%, transparent); stroke: var(--pm-trait); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pm-apercu .pm-elem .t { fill: none; stroke: var(--pm-trait); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pm-apercu .pm-fin { fill: none; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.pm-apercu .pm-vide { stroke: var(--filet); }
.pm-apercu .pm-txt { font-family: var(--police); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--pm-papier); stroke-linejoin: round; fill: var(--pm-trait); }
.pm-apercu .pm-cote { fill: var(--pm-cote); }
.pm-apercu .pm-zone-txt { font-weight: 600; }
.s-galerie { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.s-vignette svg { display: block; width: 100%; height: 190px; background: var(--scene-fond); border-radius: calc(var(--rayon) / 2); margin-bottom: .4rem; }
.s-exemple { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.4rem; align-items: center; }
.s-exemple .s-apercu { margin: 0; }
.s-exemple h3 { margin-top: 0; font-size: 1.25rem; }
.s-chiffres { max-width: 26rem; margin: 1rem 0; }

/* Outils gratuits : le formulaire à gauche, le résultat à droite. */
.o-outil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.o-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0 .6rem; }
.o-sortie { position: sticky; top: 1rem; }
.o-resultats { font-size: 1rem; gap: .45rem .8rem; }
.o-resultats dd { font-size: 1.08rem; }
.o-croquis { background: var(--scene-fond); border-radius: var(--rayon); margin-bottom: .8rem; }
.o-croquis svg { display: block; width: 100%; height: auto; max-height: 340px; }
.o-diagonale { fill: none; stroke: var(--encre2); stroke-width: 1px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.o-cote { fill: var(--pm-cote); text-anchor: middle; dominant-baseline: central; font-family: var(--police); paint-order: stroke; stroke: var(--scene-fond); stroke-width: .3em; stroke-linejoin: round; }

/* Nouveautés, état, écoles, /gestion/site */
.s-nouveaute h2, .s-nouveaute h3 { margin-top: 0; }
.s-etat { font-size: 1.1rem; font-weight: 650; }
.s-etats li { align-items: center; }
.s-etats li b { flex: none; }
.s-exercice ol, .s-corrige ol { padding-left: 1.4rem; }
.s-exercice h3 { margin-top: 0; }
.s-incident { border-top: var(--trait) solid var(--filet); padding: .8rem 0; }
.s-incident .s-ligne { align-items: flex-end; margin: .4rem 0 0; }
.s-court { width: 7rem; margin: 0; }
.s-colonnes { columns: 16rem; padding-left: 1.2rem; }
.s-sommaire { margin-top: 0; }

/* Menu repliable : site.js pose le bouton et la classe ; sans JavaScript, l'en-tête reste déplié. */
.s-menu { display: none; }
@media (max-width: 820px) {
	.s-pliable .s-menu { display: inline-flex; margin-left: auto; min-height: 42px; }
	.s-pliable .s-nav { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; gap: .2rem; }
	.s-pliable .s-nav > a.primaire { min-height: 46px; }
	.s-pliable .s-nav > a:not(.primaire), .s-pliable .s-nav > .pm-designs { display: none; }
	.s-pliable.s-ouvert .s-nav > a:not(.primaire) { display: flex; align-items: center; min-height: 44px; border-bottom: var(--trait) solid var(--filet); }
	.s-pliable.s-ouvert .s-nav > .pm-designs { display: flex; justify-content: center; padding: .4rem 0; }
}
@media (max-width: 760px) {
	.s-exemple, .o-outil { grid-template-columns: 1fr; }
	.o-sortie { position: static; }
	.s-heros { padding: 1.6rem 0 1.4rem; }
}

/* Impression : le contenu seul. Les exercices des écoles s'impriment sans le corrigé, ou le corrigé seul. */
@media print {
	.s-entete, .s-pied, .s-fil, .s-ecran, .s-avis, .s-site .pm-btn { display: none !important; }
	body.s-site { background: none; font-size: 12pt; }
	.s-page { padding: 0; width: auto; }
	.s-carte { box-shadow: none; break-inside: avoid; }
	body[data-imprimer="exercices"] .s-ecoles > :not(.s-exercices):not(h1), body[data-imprimer="corrige"] .s-ecoles > :not(.s-corrige):not(h1) { display: none !important; }
	body[data-imprimer="exercices"] .s-exercice li { margin-bottom: 1.5cm; }
}