/* Page « FLE 30 ans » (templates/page-fle-30ans.html).

   Les deux rectangles rouges inclinés derrière le titre sont les bandes
   natives du h1 (h1::before / h1::after, assets/css/components.css) — celles
   de la home. On les retaille ici : rouge plein, deux inclinaisons opposées,
   l'un superposé à l'autre, comme la maquette. Aucun autre décor.

   ponytail: tout se règle avec les 4 valeurs marquées « réglage » ci-dessous
   (les deux angles + les deux débords). */

/* Test couleur : « vivid-red » est absent de la palette (theme.json a
   defaultPalette:false). On le définit ici, scoping page uniquement — aucun
   changement dans theme.json ni components.css. Tous les décors rouges de
   fle-30ans.css pointent sur cette variable ; le h1 est ré-peint plus bas
   (ses bandes tiennent leur couleur de components.css). */
body.page-template-page-fle-30ans {
	--wp--preset--color--vivid-red: #cf2e2e; /* réglage : la teinte de test */
}

/* Titre + navigation : on utilise le part `hero-titre` comme toutes les
   autres pages (bloc fle2026/section-titre-nav > colonnes 85 % / 15 %).
   Ici on ne fait qu'ajuster taille + couleur du h1 : `.section-titre-nav
   --default … .wp-block-post-title` de components.css est en 0-3-0, donc
   !important pour les deux props qu'on change. */
.page-fle-30ans .wp-block-post-title {
	position: relative;
	isolation: isolate; /* on repart de zéro : le -2deg décoratif du thème ne s'additionne pas */
	--band-opacity: 88%; /* rouge quasi plein ; le recouvrement des 2 rectangles ressort un ton plus foncé */

	/* Taille des deux rectangles rouges. La largeur/hauteur des bandes est
	   calculée par components.css avec clamp(min, pref, max) sur le sélecteur
	   partagé `body.page:not(.home) h1::before/::after` (0-2-3), qu'on ne peut
	   pas battre en spécificité depuis `.page-fle-30ans …` (0-2-1). On ré-injecte
	   donc des valeurs plus grandes via ces variables : elles sont héritées par
	   les ::before/::after et ne servent QUE sur ce modèle.
	   Largeur : commune aux deux (--band-width-*).
	   Hauteur : min/max communs, mais pref DISTINCT par pseudo — le grand
	   rectangle (::after) est plus haut que le rectangle superposé (::before).
	   réglage : les 3 largeurs + les 2 hauteurs `pref` + min/max hauteur. */
	--band-width-min: 160px;
	--band-width-pref: 128%;
	--band-width-max: 1500px;
	--band-height-min: 90px;
	--band-height-max: 420px;
	--band-height-after-pref: 2.5em;
	--band-height-before-pref: 3.6em;

	/* Position des rectangles — même principe : `body.page:not(.home) h1::after`
	   / `::before` (components.css) posent left / top / bottom en 0-2-3, qu'on
	   ne peut pas battre depuis `.page-fle-30ans …` (0-2-1). On passe donc par
	   ces variables (héritées par les pseudo-éléments, actives sur ce modèle
	   seulement). réglage : décalage horizontal (left) et vertical (top/bottom),
	   négatif = déborde à gauche / vers le bas.
	     ::after  = grand rectangle (incliné à gauche)
	     ::before = rectangle superposé */
	--band-after-left: -20%;
	--band-after-bottom: -5%;
	--band-before-left: 20%;
	--band-before-top: 10%; /* réglage : + petit = rectangle superposé plus haut (négatif = déborde au-dessus du titre) */

	font-size: var(--wp--preset--font-size--display-large) !important;
	color: var(--wp--preset--color--blanc) !important;
}

/* La colonne qui contient le h1 (et la ligne titre/nav) : pas d'espace en
   dessous. */
.page-fle-30ans .section-titre-nav .wp-block-column,
.page-fle-30ans .section-titre-nav .wp-block-columns {
	margin-bottom: 0;
}

/* Rectangle de base : large, incliné vers la gauche, derrière les deux lignes. */
.page-fle-30ans .wp-block-post-title::after {
	inset: -0.35em -6% -0.35em -4%;
	/* width: auto; */
	height: auto;
	left: -10%;
	/* Ré-peint la bande native du h1 (components.css) en vivid-red, même
	   formule (rouge × --band-opacity). 0-2-1 > le h1::after de components. */
	background: color-mix(in srgb, var(--wp--preset--color--vivid-red) var(--band-opacity, 88%), transparent);
	transform: rotate(-3deg); /* réglage : angle du grand rectangle */
}

/* Rectangle superposé : calé à droite, incliné dans l'autre sens,
   dépasse en haut et en bas. */
.page-fle-30ans .wp-block-post-title::before {
	top: 0;
	bottom: -1.55em;
	left: auto;
	right: -10%;
	/* width: 60%;     */
	height: auto;
	background: color-mix(in srgb, var(--wp--preset--color--vivid-red) var(--band-opacity, 88%), transparent);
	transform: rotate(-3deg); /* réglage : angle du rectangle superposé */
}

/* ══ Bloc « Chapo » — surcharge propre à cette page ══
   Le chapo sert de première section (à la place d'un bloc Section FLE).
   Page unique et temporaire : on force directement le rendu du bloc,
   sans variante réutilisable.
   - texte blanc + gras ;
   - badge 30 ans : <img class="fle2026-chapo__badge"> injecté dans le bloc
     par functions.php (render_block), automatique dès qu'un Chapo est
     présent — aucun bloc image à ajouter côté éditeur ;
   - deux rectangles rouges en fond : ::before / ::after de .fle2026-chapo.
   réglage : les 2 angles + les 2 `inset` des bandes ; taille du badge sur
   .fle2026-chapo__badge.
   Ne pas activer en plus le style « Bande rouge » du bloc sur cette page. */

.page-fle-30ans .fle2026-chapo {
	position: relative;
	isolation: isolate;
	border-color: transparent; /* les filets noirs du bloc jurent sur le rouge */
	/* Écart avec le h1 au-dessus : les bandes rouges du chapo démarrent à
	   top:0 (cf. plus bas) et ne doivent pas remonter sur le titre malgré
	   la rotation. */
	margin-top: var(--wp--preset--spacing--60);
}

/* Texte blanc et gras (0-3-0 pour battre le .fle2026-chapo .fle2026-chapo__text
   du bloc, volontairement à 0-2-0).
   Alignement : le bloc est en pleine largeur, mais le texte doit s'aligner
   sur le h1 et les blocs Section (largeur « wide » + padding racine). Même
   calcul que le h1 (components.css) : marge = max(padding racine, moitié de
   la gouttière restante). Sans ça le texte débordait plus large. */
.page-fle-30ans .fle2026-chapo .fle2026-chapo__text {
	position: relative;
	max-width: none;
	margin-inline: max(
		var(--wp--style--root--padding-right),
		calc((100% - var(--width-wide)) / 2)
	);
	color: var(--wp--preset--color--black);
	font-weight: 700;
	padding-right: clamp(240px, 36vw, 420px); /* place réservée au badge (suit sa taille) */
}

/* Badge 30 ans — <img> réel injecté dans le bloc par functions.php
   (render_block sur fle2026/chapo). Calé sur le bord droit de la colonne
   de texte (même formule de marge que .fle2026-chapo__text). */
.page-fle-30ans .fle2026-chapo__badge {
	position: absolute;
	top: 50%;
	right: calc(
		max(
			var(--wp--style--root--padding-right),
			(100% - var(--width-wide)) / 2
		) - 1rem
	);
	transform: translateY(-50%);
	width: clamp(200px, 30vw, 360px); /* réglage : taille du disque complet */
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	/* Le PNG collait au bord du cercle. On l'enferme dans un disque blanc et
	   on le réduit vers le centre via le padding : le padding = l'anneau
	   blanc visible autour du badge. */
	background: var(--wp--preset--color--blanc);
	box-sizing: border-box;
	padding: clamp(1rem, 3vw, 2.25rem); /* réglage : épaisseur de l'espace blanc */
	object-fit: contain;
	object-position: center;
	pointer-events: none;
}

/* Deux rectangles rouges inclinés derrière le chapo.
   Le bloc est en pleine largeur (alignfull) → `100%` = viewport. On calcule
   donc explicitement la largeur = colonne de contenu × léger débord, MÊME
   base que les sections --odd (bloc alignwide × ~1.22 via leurs `inset`) et
   que le h1 → comportement identique quand l'écran rétrécit (le rectangle
   suit la colonne et déborde un peu, pas de plafond fixe).
   Préfixe body.* (0-2-2) : passe devant le ::before de la variante « Bande
   rouge » du bloc quel que soit l'ordre de chargement.
   réglage : le 1.22 (débord horizontal) + les 2 angles + les `bottom`. */
body.page-template-page-fle-30ans .fle2026-chapo::before,
body.page-template-page-fle-30ans .fle2026-chapo::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	left: 50%;
	width: calc(
		min(var(--width-wide), 100% - 2 * var(--wp--style--root--padding-right)) * 1.22
	);
	margin: 0;
	background: var(--wp--preset--color--vivid-red);
	transform: translateX(-50%) rotate(-3deg);
}

/* Taille verticale = distance entre `top` et `bottom` (height:auto). Donc
   baisser `bottom` (plus négatif) AGRANDIT le rectangle. Pour seulement le
   descendre/monter SANS le redimensionner, jouer la 2e valeur de
   `translate()` ci-dessous (px/rem, positif = vers le bas).
   top:0 sur les deux → jamais au-dessus du chapo, donc jamais sur le h1. */
body.page-template-page-fle-30ans .fle2026-chapo::before {
	top: 0;
	height: 50%;
	bottom: -8%;   /* hauteur */
	left: 55%;
	background: color-mix(in srgb, var(--wp--preset--color--vivid-red) 95%, transparent);
	transform: translate(calc(-50% - 3%), 0) rotate(3deg); /* 2e val = position verticale */
}

/* ::after : taille et position DÉCOUPLÉES (contrairement au ::before).
   Pas de `top` → la hauteur ne dépend plus de la position.
   `height` = taille du rectangle ; `bottom` = position (négatif = plus bas). */
body.page-template-page-fle-30ans .fle2026-chapo::after {
	top: auto;
	height: 90%;   /* réglage : taille (proportion de la hauteur du chapo) */
	bottom: -30%;  /* réglage : position verticale (négatif = descend) */
	background: color-mix(in srgb, var(--wp--preset--color--vivid-red) 95%, transparent);
	transform: translate(calc(-50% + 3%), 0) rotate(-3deg);
}

/* ══ Blocs « Section FLE » — alternance pair / impair ══
   Classe fle2026-section--odd / --even posée par functions.php (render_block).
   Communs   : image ronde et centrée (comme le badge du chapo).
   Impairs   : 2 rectangles rouges repris du titre h1 + texte blanc.
   Pairs     : texte noir, aucun rectangle.
   Hypothèse : variations « Image à gauche / à droite » (texte directement sur
   le fond, sans cartouche blanc). */

/* — Image ronde et centrée (pairs + impairs) —
   Le bloc rend l'image en `height:100%` d'un conteneur flex étiré → ovale.
   On casse ça : figure non étirée, `height:auto` + `aspect-ratio:1` → carré,
   `object-fit:cover` recadre, `border-radius:50%` → rond. */
.page-fle-30ans :is(.fle2026-section--odd, .fle2026-section--even) .fle2026-section__col-image {
	justify-content: center; /* centre le cercle sur la hauteur de la colonne */
}
.page-fle-30ans :is(.fle2026-section--odd, .fle2026-section--even) .fle2026-section__col-image .wp-block-image {
	flex: 0 0 auto;          /* ne plus étirer la figure */
}
.page-fle-30ans :is(.fle2026-section--odd, .fle2026-section--even) .wp-block-image {
	margin-inline: auto;
}
.page-fle-30ans :is(.fle2026-section--odd, .fle2026-section--even) .wp-block-image img {
	width: 100%;
	height: auto;           /* annule le height:100% du bloc → laisse jouer aspect-ratio */
	max-width: 460px;       /* réglage : diamètre max du cercle */
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	margin-inline: auto;
	display: block;
}

/* — Couleur du texte — */
.page-fle-30ans .fle2026-section--odd :where(h2, h3, p, li) {
	color: var(--wp--preset--color--blanc) !important;
}
.page-fle-30ans .fle2026-section--even :where(h2, h3, p, li) {
	color: var(--wp--preset--color--noir) !important;
}

/* — Impairs : 2 rectangles rouges derrière le bloc. Même rouge que le h1 /
     le chapo / le --first : color-mix(rouge 95%, transparent). Hauteurs un
     cran plus courtes que le bloc (top/bottom de `inset` rentrés).
     réglage : les `inset` (1+3 = hauteur, 2+4 = largeur). — */
.page-fle-30ans .fle2026-section--odd {
	position: relative;
	isolation: isolate;
}
.page-fle-30ans .fle2026-section--odd::before,
.page-fle-30ans .fle2026-section--odd::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background: color-mix(in srgb, var(--wp--preset--color--vivid-red) 95%, transparent);
	transform: rotate(-3deg);
}
.page-fle-30ans .fle2026-section--odd::before {
	inset: 6% -9% 30% -13%;
}
.page-fle-30ans .fle2026-section--odd::after {
	inset: 30% -15% 4% -7%;
}

/* — 1er bloc de la page (classe --first posée par functions.php) : rectangles
     à la taille et à la couleur propres, distincts des autres impairs.
     Placé après les règles --odd → gagne à spécificité égale (0-2-1).
     TAILLE = les 4 valeurs de `inset` (top right bottom left, en % du bloc).
     DÉPLACEMENT sans redimensionner = les 2 valeurs de `translate()`
     (x, y ; positif = droite / bas). Ne PAS ajouter de `left`/`bottom`
     séparés : ils rogneraient le rectangle au lieu de le bouger. — */
.page-fle-30ans .fle2026-section--first::before {
	inset: 15% -20% 20% -16%;
	background: color-mix(in srgb, var(--wp--preset--color--vivid-red) 95%, transparent); /* même rouge que le chapo */
	transform: translate(5rem, -3rem) rotate(-3deg);
}
.page-fle-30ans .fle2026-section--first::after {
	inset: 25% -20% 30% -15%;                       /* top+bottom = hauteur ; right+left = largeur */
	background: color-mix(in srgb, var(--wp--preset--color--vivid-red) 95%, transparent);
	transform: translate(3rem, 20rem) rotate(3deg);    /* 2e val de translate = descendre */
}

@media (max-width: 768px) {
	/* Badge sous le texte plutôt qu'en superposition ; padding-inline remis
	   à 0 (la marge ci-dessus assure déjà la gouttière, la règle mobile du
	   bloc la doublerait). */
	.page-fle-30ans .fle2026-chapo .fle2026-chapo__text {
		padding-inline: 0;
	}
	.page-fle-30ans .fle2026-chapo__badge {
		position: static;
		transform: none;
		display: block;
		margin: 1.5rem auto 0;
		width: clamp(140px, 40vw, 200px);
	}
	.page-fle-30ans :is(.fle2026-section--odd, .fle2026-section--even) .wp-block-image img {
		max-width: min(72vw, 320px);
	}
}