/*
 * Planimonde, pages publiques : la mise en page du design « Blocs », retenu par Mathieu le 2026-10-08 parmi vingt
 * (les dix-neuf autres sont dans sauvegardes/designs-2026-10-08/). Les couleurs, la police et les rayons viennent de
 * designs.css. L'entrée est en deux aplats collés, les sections en bandes de couleur, tout en capitales et angles droits.
 */
[data-design=blocs] .a-hero { background: var(--a-bande); box-shadow: 0 0 0 100vmax var(--a-bande); clip-path: inset(0 -100vmax); color: var(--a-bande-encre); }
[data-design=blocs] .a-hero :is(.a-chapo, .a-preuves, .a-sur, figcaption) { color: var(--a-bande-encre); opacity: .92; }
[data-design=blocs] .a-hero .a-preuves li::before { color: inherit; }
[data-design=blocs] .a-fil { background: var(--a-bande); box-shadow: 0 0 0 100vmax var(--a-bande); clip-path: inset(0 -100vmax); color: var(--a-bande-encre); padding-bottom: .2rem; }
[data-design=blocs] .a-hero .a-btn:not(.primaire) { background: transparent; color: var(--a-bande-encre); border-color: currentColor; }
[data-design] .a-plan .a-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.12; }
[data-design=blocs] { --rayon-panneau: var(--rayon); }
[data-design=blocs] { --a-bande: #202a4c; --a-bande-encre: #ffffff; }
[data-design=blocs] .a-tete { border-bottom: 0; }
[data-design=blocs] .a-tete .a-btn.primaire { background: #f9a712; }
[data-design=blocs] .a-hero { gap: 0; padding-block: 0; align-items: stretch; }
[data-design=blocs] .a-hero-texte { padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem) 0; }
[data-design=blocs] .a-hero-plan { position: relative; z-index: 0; display: grid; align-content: center; padding: clamp(1.2rem, 4vw, 3rem); }
[data-design=blocs] .a-hero-plan::before { content: ""; position: absolute; inset: 0 -100vmax 0 0; background: #f9a712; z-index: -1; }
[data-design=blocs] .a-hero-plan .a-dessin { border: 3px solid #1a2030; box-shadow: 10px 10px 0 #1a2030; background-color: #ffffff; }
[data-design=blocs] .a-hero-plan figcaption { color: #1a2030; opacity: 1; font-weight: 700; }
[data-design=blocs] .a-hero h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
[data-design=blocs] .a-plan .a-hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
[data-design=blocs] .a-btn { text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; font-weight: 800; }
[data-design=blocs] .a-etapes { background: #e54b42; box-shadow: 0 0 0 100vmax #e54b42; clip-path: inset(0 -100vmax); color: #ffffff; }
[data-design=blocs] .a-etapes li { border: 0; color: #1a2030; }
[data-design=blocs] .a-etapes li::before { border-radius: 0; background: #1a2030; color: #fff; }
[data-design=blocs] .a-atouts { background: #04b0be; box-shadow: 0 0 0 100vmax #04b0be; clip-path: inset(0 -100vmax); }
[data-design=blocs] .a-atouts li { border-top: 4px solid #1a2030; }
[data-design=blocs] .a-atouts p { color: #1a2030; }
[data-design=blocs] .a-carte { border-width: 3px; }
[data-design=blocs] .a-carte:hover { box-shadow: 8px 8px 0 #1a2030; border-color: #1a2030; }
[data-design=blocs] .a-fin { background: #202a4c; color: #fff; }
[data-design=blocs] .a-fin .a-btn.primaire { background: #f9a712; color: #1a2030; border-color: #f9a712; }
@media (max-width: 860px) { [data-design=blocs] .a-hero-plan { margin-inline: calc(-1 * var(--a-marge)); } [data-design=blocs] .a-hero-texte { padding-right: 0; } }

/* Téléphone étroit, trois langues : le logo, le bouton et deux liens de langue tiennent sur une ligne. */
@media (max-width: 460px) {
	[data-design=blocs] .a-tete { gap: .3rem; }
	[data-design=blocs] .a-tete .a-btn { font-size: .76rem; letter-spacing: .02em; padding-inline: .55rem; }
}
@media (max-width: 340px) {
	[data-design=blocs] .a-tete { gap: .15rem; }
	[data-design=blocs] .a-tete .a-btn { font-size: .66rem; padding-inline: .4rem; }
	.a-marque .pm-logo { height: 1.5rem; }
	.a-tete .a-langue { padding-inline: .15rem; font-size: .8rem; }
}