/*
 * Planimonde, pages publiques (app/Accueil.php) : l'accueil, les pages par plan, la confidentialité.
 * Mêmes variables que l'outil (simple/simple.css) : designs.css leur donne les valeurs du design « Blocs »,
 * accueil-designs.css ajoute sa mise en page. Les valeurs ci-dessous ne servent que si designs.css manque.
 */
:root {
	--fond: #fbf1e0; --surface: #ffffff; --surface2: #fdf6ea; --encre: #202a4c; --encre2: #62697f; --filet: #eeddc3;
	--accent: #d5403a; --accent-encre: #ffffff; --accent2: #057f8a; --danger: #b3261e;
	--barre-fond: #ffffff; --barre-encre: #202a4c;
	--scene-fond: #fff9ef; --grille: rgba(86, 51, 11, .07); --grille-forte: rgba(86, 51, 11, .15);
	--pm-papier: #ffffff; --pm-trait: #2a3357; --pm-cote: #057f8a; --pm-elem: #fbe7c8;
	--rayon: 14px; --rayon-btn: 999px; --rayon-panneau: 22px; --trait: 1px; --ombre: 0 10px 26px rgba(32, 42, 76, .1);
	--police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --police-titre: var(--police);
	--casse: none; --espacement: 0; --graisse-titre: 650; --corps: 14px;
	/* Propres à ces pages */
	--a-large: 72rem; --a-marge: clamp(1rem, 4vw, 2.5rem); --a-titre: clamp(2.1rem, 5.2vw, 3.7rem); --a-h2: clamp(1.5rem, 3vw, 2.1rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.a-page { margin: 0; background: var(--fond); color: var(--encre); font: 1.0625rem/1.6 var(--police); overflow-x: hidden; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
a { color: var(--accent2); }
h1, h2, h3 { font-family: var(--police-titre); font-weight: var(--graisse-titre); letter-spacing: var(--espacement); text-transform: var(--casse); line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.a-evite { position: absolute; left: .5rem; top: -4rem; z-index: 90; padding: .55rem .9rem; background: var(--accent); color: var(--accent-encre); border-radius: var(--rayon-btn); font-weight: 700; text-decoration: none; }
.a-evite:focus { top: .5rem; }

/* Boutons */
.a-btn, .pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1.1rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface); color: var(--encre); font: 650 .95rem/1.2 var(--police); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .12s, box-shadow .12s, background .12s; }
.a-btn:hover { border-color: var(--encre2); }
.a-btn.primaire { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.a-btn.primaire:hover { filter: brightness(1.06); }
.a-btn.grand { padding: .85rem 1.5rem; font-size: 1.05rem; }
.a-lien { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }

/* En-tête */
.a-tete { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1.2rem; padding: .6rem var(--a-marge); background: var(--barre-fond); color: var(--barre-encre); border-bottom: var(--trait) solid var(--filet); }
.a-marque { display: flex; flex: none; }
.a-marque .pm-logo { height: 2.3rem; width: auto; display: block; }
.a-nav { display: flex; gap: .2rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.a-nav a { padding: .35rem .7rem; border-radius: var(--rayon-btn); color: inherit; text-decoration: none; font-weight: 600; font-size: .95rem; }
/* Lien vers la même page dans l'autre langue. */
.a-tete .a-langue { flex: none; padding: .35rem .5rem; border-radius: var(--rayon-btn); color: inherit; text-decoration: none; font-weight: 600; font-size: .9rem; }
.a-langue b { display: none; font-weight: inherit; }
.a-tete .a-langue:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.a-nav a:hover, .a-nav a[aria-current] { background: color-mix(in srgb, currentColor 12%, transparent); }

/* Sections */
main { display: block; overflow-x: clip; }
.a-bloc, .a-hero, .a-fil { max-width: var(--a-large); margin-inline: auto; padding-inline: var(--a-marge); }
.a-bloc { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.a-bloc > h2 { font-size: var(--a-h2); margin-bottom: 1.6rem; }
.a-note { color: var(--encre2); font-size: .95rem; }
.a-fil { padding-top: 1.2rem; font-size: .9rem; color: var(--encre2); }
.a-fil a { color: inherit; }

/* Entrée : le texte, puis le plan */
.a-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 6vw, 4.5rem); }
.a-sur { font: 700 .8rem/1.2 var(--police); text-transform: uppercase; letter-spacing: .14em; color: var(--accent2); margin-bottom: .9rem; }
.a-hero h1 { font-size: var(--a-titre); margin-bottom: 1.1rem; }
.a-plan .a-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.a-chapo { font-size: 1.15rem; color: var(--encre2); max-width: 36rem; }
.a-chapo + .a-chapo { margin-top: .8rem; }
.a-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }
.a-preuves { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin: 1.4rem 0 0; padding: 0; color: var(--encre2); font-size: .95rem; font-weight: 600; }
.a-preuves li::before { content: "✓"; color: var(--accent2); font-weight: 800; margin-right: .4rem; }
.a-hero-plan { margin: 0; min-width: 0; }
.a-hero-plan figcaption { margin-top: .7rem; font-size: .85rem; color: var(--encre2); text-align: center; }
.a-hero-plan .a-dessin { background: var(--scene-fond); border: var(--trait) solid var(--filet); border-radius: var(--rayon-panneau, var(--rayon)); box-shadow: var(--ombre); padding: clamp(.4rem, 2vw, 1.2rem); background-image: linear-gradient(var(--grille-forte) 1px, transparent 1px), linear-gradient(90deg, var(--grille-forte) 1px, transparent 1px); background-size: 34px 34px; background-color: var(--scene-fond); }

/* Le dessin d'un exemple : les couleurs neutres de l'outil deviennent celles du design. */
.a-dessin svg { display: block; width: 100%; height: auto; max-height: 30rem; font-family: var(--police); }
.a-dessin svg > rect:first-child { fill: transparent; }
.a-dessin [fill="#ffffff"] { fill: var(--pm-papier); }
.a-dessin [stroke="#ffffff"] { stroke: var(--pm-papier); }
.a-dessin [fill="#2b3a4f"] { fill: var(--pm-trait); }
.a-dessin [stroke="#2b3a4f"] { stroke: var(--pm-trait); }
.a-dessin [fill="#e6ebf1"] { fill: var(--pm-elem); }
.a-dessin [fill="#0f7f98"] { fill: var(--pm-cote); }
.a-dessin [stroke="#0f7f98"] { stroke: var(--pm-cote); }

/* Étapes */
.a-etapes ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; counter-reset: etape; }
.a-etapes li { counter-increment: etape; background: var(--surface); border: var(--trait) solid var(--filet); border-radius: var(--rayon); padding: 1.3rem 1.3rem 1.4rem; }
.a-etapes li::before { content: counter(etape); display: grid; place-items: center; width: 2.3rem; height: 2.3rem; margin-bottom: .9rem; border-radius: 50%; background: var(--accent); color: var(--accent-encre); font: 700 1.1rem/1 var(--police-titre); }
.a-etapes h3, .a-atouts h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.a-etapes p, .a-atouts p, .a-carte p { color: var(--encre2); font-size: .98rem; }

/* Cartes des plans */
.a-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1.1rem; }
.a-carte { display: flex; flex-direction: column; background: var(--surface); border: var(--trait) solid var(--filet); border-radius: var(--rayon); padding: .9rem .9rem 1.1rem; color: inherit; text-decoration: none; transition: transform .14s, box-shadow .14s, border-color .14s; }
.a-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: var(--accent2); }
.a-carte .a-dessin { background: var(--scene-fond); border-radius: calc(var(--rayon) * .6); margin-bottom: .8rem; padding: .3rem; }
.a-carte .a-dessin svg { height: 9.5rem; }
.a-carte .a-dessin text { display: none; }
.a-carte h3 { font-size: 1.15rem; margin-bottom: .25rem; }

/* Atouts */
.a-atouts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2rem; }
.a-atouts li { border-top: 3px solid var(--accent2); padding-top: .9rem; }

/* Catalogue et repères (pages par plan) */
.a-catalogue h3 { font-size: 1.05rem; margin: 1.4rem 0 .6rem; color: var(--encre2); }
.a-catalogue ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.a-catalogue li { display: flex; flex-direction: column; background: var(--surface); border: var(--trait) solid var(--filet); border-radius: calc(var(--rayon) * .7); padding: .55rem .8rem; }
.a-catalogue li span { color: var(--encre2); font-size: .88rem; font-variant-numeric: tabular-nums; }
.a-reperes ul { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .7rem; max-width: 46rem; }
.a-reperes li { padding: .8rem 1rem .8rem 1.1rem; background: var(--surface); border-left: 4px solid var(--accent); border-radius: 0 var(--rayon) var(--rayon) 0; }

/* Questions */
.a-faq { max-width: 50rem; }
.a-faq details { border-top: var(--trait) solid var(--filet); }
.a-faq details:last-child { border-bottom: var(--trait) solid var(--filet); }
.a-faq summary { cursor: pointer; padding: 1rem 2rem 1rem 0; font: var(--graisse-titre) 1.1rem/1.3 var(--police-titre); list-style: none; position: relative; }
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq summary::after { content: "+"; position: absolute; right: .2rem; top: .8rem; font-size: 1.4rem; font-weight: 400; color: var(--accent2); }
.a-faq details[open] summary::after { content: "−"; }
.a-faq details p { padding: 0 2rem 1.1rem 0; color: var(--encre2); }

/* Appel de la fin */
.a-fin { margin: clamp(1rem, 4vw, 3rem) auto clamp(2.5rem, 6vw, 4.5rem); max-width: calc(var(--a-large) - 2 * var(--a-marge)); width: calc(100% - 2 * var(--a-marge)); padding: clamp(2rem, 6vw, 3.5rem) var(--a-marge); background: var(--accent); color: var(--accent-encre); border-radius: var(--rayon-panneau, var(--rayon)); text-align: center; }
.a-fin h2 { font-size: var(--a-h2); margin-bottom: .5rem; }
.a-fin p { opacity: .9; margin-bottom: 1.4rem; }
.a-fin .a-btn.primaire { background: var(--accent-encre); color: var(--accent); border-color: var(--accent-encre); }

/* Page de texte */
.a-texte { max-width: 46rem; }
.a-texte h1 { font-size: var(--a-h2); margin-bottom: 1.5rem; }
.a-texte h2 { font-size: 1.25rem; margin: 1.8rem 0 .5rem; }
.a-texte ul { padding-left: 1.2rem; }
.a-texte li { margin: .45rem 0; }

/* Pied */
.a-pied { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2rem; padding: 2.5rem var(--a-marge) 2rem; background: var(--surface); border-top: var(--trait) solid var(--filet); font-size: .93rem; }
.a-pied > * { max-width: 100%; }
.a-pied .pm-logo { height: 2.1rem; width: auto; display: block; margin-bottom: .6rem; }
.a-pied p { color: var(--encre2); }
.a-pied nav { display: grid; gap: .35rem; align-content: start; }
.a-pied nav a, .a-pied .a-lien { color: var(--encre); text-decoration: none; }
.a-pied nav a:hover, .a-pied .a-lien:hover { text-decoration: underline; }
.a-droits { grid-column: 1 / -1; padding-top: 1.2rem; border-top: var(--trait) solid var(--filet); }

@media (max-width: 860px) {
	.a-hero { grid-template-columns: minmax(0, 1fr); }
	.a-etapes ol, .a-atouts ul { grid-template-columns: minmax(0, 1fr); }
	.a-nav { display: none; }
	.a-tete .a-langue span { display: none; }
	.a-tete .a-langue b { display: inline; }
	.a-tete { gap: .6rem; }
	.a-tete .a-btn { margin-left: auto; }
	.a-pied { grid-template-columns: minmax(0, 1fr); }
	.a-btn.grand { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* Téléphone étroit : le logo, le bouton et le lien de langue tiennent sur une ligne. */
@media (max-width: 460px) {
	.a-marque .pm-logo { height: 1.8rem; }
	.a-tete .a-btn { padding-inline: .7rem; white-space: nowrap; }
	.a-tete .a-langue { padding-inline: .25rem; }
}
@media print { .a-tete, .a-fin, .a-pied nav { display: none; } }

/* Réponse en une phrase, dès le haut des pages de plan */
.a-reponse { max-width: 36rem; margin: 1rem 0 0; padding: .8rem 1rem; border-left: 4px solid var(--accent); background: var(--surface); border-radius: var(--rayon); color: var(--encre); }

/* — Annonce maison (Accueil::pub) : au-dessus du pied des pages publiques, aux couleurs de l'annonceur, en police du système, avec la
   mention en noir plein dans le coin, pour qu'elle n'ait pas l'air de faire partie du site (même allure que sur howdidimissthat.com). — */
.a-escales { display: grid; gap: 1rem; max-width: var(--a-large); margin: 2.5rem auto 0; padding: 0 var(--a-marge); }
.a-escale--shows { --pb-bg: #EFEDE6; --pb-line: #0B0B0B; --pb-ink: #0B0B0B; --pb-btn: #E6007E; --pb-btn-ink: #ffffff; }
.a-escale--tools { --pb-bg: #0d0a05; --pb-line: #ffbf47; --pb-ink: #ffbf47; --pb-btn: #ffbf47; --pb-btn-ink: #15110a; }
.a-escale--shows .a-escale-logo, .a-escale--tools .a-escale-logo { border-radius: 22%; }
.a-escale--swim { --pb-bg: #f8efe6; --pb-line: #4a5f82; --pb-ink: #3b2a22; --pb-btn: #9f5833; --pb-btn-ink: #ffffff; }
.a-escale-lien { position: relative; display: flex; align-items: center; gap: 1.25rem; padding: 2.3rem 1.4rem 1.1rem; overflow: hidden; border: 3px solid var(--pb-line); border-radius: 0.75rem; background: var(--pb-bg); color: var(--pb-ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; }
.a-escale-etiquette { position: absolute; top: 0; left: 0; padding: 0.3rem 0.8rem; border-radius: 0 0 0.6rem 0; background: #111111; color: #ffffff; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.a-escale-logo { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: 50%; }
.a-escale-texte { flex: 1; min-width: 0; }
.a-escale-titre { display: block; font-weight: 800; font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem); line-height: 1.2; }
.a-escale-accroche { display: block; margin-top: 4px; font-size: 0.9375rem; }
.a-escale-domaine { display: block; margin-top: 0.3rem; font-size: 0.8125rem; opacity: 0.75; }
.a-escale-bouton { flex: 0 0 auto; padding: 0.6rem 1.1rem; border-radius: 999px; background: var(--pb-btn); color: var(--pb-btn-ink); font-weight: 700; white-space: nowrap; }
.a-escale-lien:hover .a-escale-bouton { filter: brightness(0.92); }
@media (max-width: 640px) { .a-escale-lien { flex-direction: column; align-items: flex-start; gap: 0.6rem; } }
@media print { .a-escales { display: none; } }