/* Page Immersion France — couleurs et décor propres à la rubrique.
   Référence : maquettes/FLE_FR_SITEMAP_AOUT26.pdf, colonne 11.
   body.tax-categorie-sejour (archives de la taxonomie categorie-sejour)
   partage exactement les mêmes règles que .page-template-page-immersion-france
   — même rubrique éditoriale, même décor. */

.page-template-page-immersion-france,
body.tax-categorie-sejour,
body.page-template-page-francais-en-ligne {
	--fle2026-immersion-fond:       rgba(241, 236, 217, .9); /* crème de la rubrique */
	--fle2026-immersion-fond-solide: rgb(241, 236, 217); /* même crème, sans alpha */

	/* Bande A (header::before) : point d'ancrage de la chaîne.
	   Négatif = remonte A + B + C ensemble (B et C sont dérivées de cette
	   valeur, leurs chevauchements sont conservés). */
	--fle2026-immersion-band-a-top:    -80px;
	--fle2026-immersion-band-a-height: 520px;
	/* Chevauchement de B sur le bas de A. */
	--fle2026-immersion-band-a-overlap-b: 100px;
	/* Chevauchement de C sur le bas de A (C est chaînée à A, pas à B). */
	--fle2026-immersion-band-a-overlap-c: 100px;

	/* Bande B (header::after) : dérivée de A, pas de top en dur. */
	--fle2026-immersion-band-b-height: 430px;
	--fle2026-immersion-band-b-top: calc(
		var(--fle2026-immersion-band-a-top) + var(--fle2026-immersion-band-a-height)
		- var(--fle2026-immersion-band-a-overlap-b)
	);

	/* Bande C (.page-template-page-immersion-france::before) : dérivée de A. */
	--fle2026-immersion-band-c-height: 540px;
	--fle2026-immersion-band-c-top: calc(
		var(--fle2026-immersion-band-a-top) + var(--fle2026-immersion-band-a-height)
		- var(--fle2026-immersion-band-a-overlap-c)
	);

	/* background-color: var(--fle2026-immersion-fond); */
}

/* Cours de français en ligne : pas de rectangles rouges derrière le H1
   (comme sur Immersion). Sélecteur = celui de components.css
   `body.page:not(.home) h1::before` + la classe de template → l'emporte.
   view.js exclut aussi cette page (SELECTOR). */
body.page:not(.home).page-template-page-francais-en-ligne h1::before,
body.page:not(.home).page-template-page-francais-en-ligne h1::after {
	content: none;
}

/* Page « Cours de français en ligne » : même décor, couleur différente.
   Valeurs littérales (light-green-cyan = #7BDCB5) et non var(--wp--preset--…) :
   le preset n'est régénéré qu'après vidage du cache theme.json, un var()
   non résolu rendrait le décor transparent. */
body.page-template-page-francais-en-ligne {
	--fle2026-immersion-fond:        rgba(123, 220, 181, .9);
	--fle2026-immersion-fond-solide: #7BDCB5;
}

.page-immersion-france header,
body.tax-categorie-sejour .wp-site-blocks > header,
body.page-template-page-francais-en-ligne header {
	position: relative;
	/* isolation: isolate; */
}

.page-immersion-france header::before,
.page-immersion-france header::after,
.page-template-page-immersion-france::before,
body.tax-categorie-sejour .wp-site-blocks > header::before,
body.tax-categorie-sejour .wp-site-blocks > header::after,
body.tax-categorie-sejour::before,
body.page-template-page-francais-en-ligne header::before,
body.page-template-page-francais-en-ligne header::after,
body.page-template-page-francais-en-ligne::before
 {
	content:"";
	pointer-events: none;
	position: absolute;
	display:block;
	background-color: var(--fle2026-immersion-fond);
	mix-blend-mode: multiply;

	width: 80%;
	top: var(--fle2026-immersion-band-a-top);
	height: var(--fle2026-immersion-band-a-height);
	clip-path: polygon(95% 0%, 100% 95%, 0% 100%, 0% 0%);
}

.page-immersion-france header::after,
body.tax-categorie-sejour .wp-site-blocks > header::after,
body.page-template-page-francais-en-ligne header::after {
	width: 70%;
	top: var(--fle2026-immersion-band-b-top);
	height: var(--fle2026-immersion-band-b-height);
	clip-path: polygon(95% 0%, 100% 95%, 0% 100%, 0% 5%);

}
.page-template-page-immersion-france::before,
body.tax-categorie-sejour::before,
body.page-template-page-francais-en-ligne::before {
	width: 70%;
	top: var(--fle2026-immersion-band-c-top);
	height: var(--fle2026-immersion-band-c-height);
	right:0;
	clip-path: polygon(100% 0%, 100% 95%, 5% 100%, 0% 1%);
}

/* ── Panneaux beige inclinés derrière le titre ──
   Deux rectangles légèrement pivotés, décalés l'un par rapport à l'autre.
   Ils sont détourés par le bloc pour ne jamais déborder horizontalement. */

.page-immersion-france .fle2026-titre-surtitre {
	overflow: hidden;
}

/* .page-immersion-france .fle2026-titre-surtitre::before,
.page-immersion-france .fle2026-titre-surtitre::after {
	content: "";
	position: absolute;
	background-color: var(--fle2026-immersion-fond);
	pointer-events: none;
	z-index: 0;
} */

/* Bande large en travers du sous-titre */
/* .page-immersion-france .fle2026-titre-surtitre::before {
	left: -10%;
	right: -10%;
	top: 46%;
	height: 34%;
	transform: rotate(-2.4deg);
} */

/* Bloc vertical calé à droite */
/* .page-immersion-france .fle2026-titre-surtitre::after {
	right: 4%;
	top: 30%;
	width: 34%;
	bottom: -6%;
	transform: rotate(-1.2deg);
} */

@media (max-width: 781px) {
	/* Trop chargé sur petit écran : on ne garde que la bande. */
	.page-immersion-france .fle2026-titre-surtitre::after {
		display: none;
	}
}

/* ── Sections ──
   Les images et les cadres blancs des sections se détachent du fond crème. */

.page-immersion-france .fle2026-diag__text,
.page-immersion-france .fle2026-superpose__text,
.page-immersion-france .fle2026-banniere__text,
body.tax-categorie-sejour .fle2026-diag__text,
body.tax-categorie-sejour .fle2026-superpose__text,
body.tax-categorie-sejour .fle2026-banniere__text,
body.page-template-page-francais-en-ligne .fle2026-diag__text,
body.page-template-page-francais-en-ligne .fle2026-superpose__text,
body.page-template-page-francais-en-ligne .fle2026-banniere__text {
	background: var(--fle2026-immersion-fond-solide);
}

/* :first-child ne marche pas ici : la section n'est jamais le premier enfant
   de son parent (titre-surtitre + chapô la précèdent dans le DOM). On cible
   donc « la .fle2026-section sans sœur .fle2026-section antérieure ». */

/* .page-immersion-france coupe net tout ce qui déborde de sa propre boîte
   (hauteur = tout le contenu, auto). Combiné à une hauteur volontairement
   excessive ci-dessous, la forme est toujours rognée pile au bas réel de la
   page, quelle que soit sa longueur — sans jamais mesurer ni fixer de top
   en pixels dépendant du contenu qui précède. */
/* main.* : .page-immersion-france est aussi posée sur <body> (body_class,
   pour cibler le header en CSS) — un sélecteur de classe seul appliquerait
   overflow:hidden aux deux, alors que seul <main> doit rogner ce débordement. */

.page-immersion-france .fle2026-section:not(.fle2026-section ~ .fle2026-section),
.tax-categorie-sejour .wp-block-fle2026-section,
body.page-template-page-francais-en-ligne .fle2026-section:not(.fle2026-section ~ .fle2026-section) {
	/* contexte de positionnement pour le ::before ci-dessous (le `::before`
	   ici était une erreur → la forme s'ancrait au <html>, mal positionnée). */
	position: relative;
}
.page-immersion-france .fle2026-section:not(.fle2026-section ~ .fle2026-section):before,
.tax-categorie-sejour .wp-block-fle2026-section::before,
body.page-template-page-francais-en-ligne .fle2026-section:not(.fle2026-section ~ .fle2026-section):before {
	content:"";
	position:absolute;
	display:block;
	width: 90vw;
	left: 50%;
	transform: translateX(-50%);
	background: var(--fle2026-immersion-fond-solide);
	clip-path: polygon(95% 0%, 100% 100%, 5% 100%, 0% 1%);
	z-index: -1;
	top: 150px;
	height: var(--fle2026-section-decor-height, 600vh);
}

/* Archives categorie-sejour uniquement (ex. /Cours-chez-le-professeur/) :
   décrochage propre du décor, sans toucher à la page Immersion France. */
.tax-categorie-sejour .wp-block-fle2026-section::before {
	clip-path: polygon(600% 0%, 100% 100%, 5% 100%, 0% 1%);
	top: -150px;
}

/* Cours de français en ligne uniquement : idem, valeurs propres. */
body.page-template-page-francais-en-ligne .fle2026-section:not(.fle2026-section ~ .fle2026-section):before {
	clip-path: polygon(200% 0%, 100% 100%, 5% 100%, 0% 1%);
	z-index: -1;
	top: -100px;
}

/* ── Badge « 30 ans » — rubrique Immersion (page Immersion France + archives
   de la taxonomie categorie-sejour, ex. /Cours-chez-le-professeur/) ──────────
   Plus petit, plus bas et plus à gauche que le défaut (components.css
   header .image-30ans), avec anneau blanc. Ajuste top / right / max-height. */
.page-immersion-france header .image-30ans,
body.tax-categorie-sejour .wp-site-blocks > header .image-30ans,
body.page-template-page-francais-en-ligne header .image-30ans {
	top: 70px;
	right: 220px;
}
/* ── Bloc titre/sous-titre (fle2026/titre-surtitre) — spécifique Immersion ──── */
.page-immersion-france .fle2026-titre-surtitre__titre {
	font-weight: 900;
}
.page-immersion-france .fle2026-titre-surtitre__soustitre {
	margin-right: 200px;
}

/* Chapo plus compact sur les archives categorie-sejour (bloc fle2026/chapo
   partagé par ~7 pages → on ne touche pas blocks/chapo/style.css). Le __text
   hérite du font-size du conteneur, donc l'override sur .fle2026-chapo suffit. */
body.tax-categorie-sejour .fle2026-chapo {
	padding-block: 2rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.4 !important;
}
body.tax-categorie-sejour .fle2026-chapo .fle2026-chapo__text {
	box-sizing: border-box;
	padding-right: 200px;
}
body.tax-categorie-sejour .fle2026-chapo .fle2026-chapo__text p {
	margin-block: 0;
}

/* Cours de français en ligne : padding droit sur le H1 (hero-titre) et sur le
   chapo. box-sizing:border-box → le bord gauche ne bouge pas. */
body.page-template-page-francais-en-ligne .section-titre-nav--default .wp-block-post-title,
body.page-template-page-francais-en-ligne .fle2026-chapo .fle2026-chapo__text {
	box-sizing: border-box;
	padding-right: 200px;
}

/* H1 en noir (le bloc section-titre-nav le met en --noir = #3d3d3d).
   Sélecteur avec la colonne → (0,0,4,1) pour passer devant. */
body.page-template-page-francais-en-ligne .section-titre-nav--default .wp-block-column:first-child .wp-block-post-title {
	color: var(--wp--preset--color--black);
}

.page-immersion-france header .image-30ans img,
body.tax-categorie-sejour .wp-site-blocks > header .image-30ans img,
body.page-template-page-francais-en-ligne header .image-30ans img {
	max-height: 150px;
	/* Anneau blanc épais autour du badge rouge : fond blanc + padding
	   (= épaisseur de l'anneau) + border-radius:50% (hérité) qui clippe en rond.
	   box-sizing:border-box → le padding reste inclus dans max-height. */
	box-sizing: border-box;
	background: var(--wp--preset--color--blanc, #fff);
	padding: 10px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* ── Barre de filtres « par région » (page categorie-sejour) — look rubrique ──
   Le markup .fle2026-region-badges n'existe que sur cette page ; les classes
   __toggle / __panel--regions sont partagées avec la page « écoles » → on
   scope tout par body.tax-categorie-sejour. */

/* Titre H1 (fle2026_section_titre_nav → .section-titre) en noir sur les
   archives categorie-sejour (aucune couleur n'est posée pour .taxonomy-generic,
   contrairement à .taxonomy-region/ville). */
body.tax-categorie-sejour .section-titre .wp-block-post-title {
	color: var(--wp--preset--color--black);
}

/* Bouton d'ouverture : hover + état ouvert → beige (au lieu de rouge-30). */
body.tax-categorie-sejour .fle2026-centres-filterbar__toggle:hover,
body.tax-categorie-sejour .fle2026-centres-filterbar__toggle[aria-expanded="true"] {
	background-color: var(--fle2026-immersion-fond-solide);
}

/* Conteneur des filtres : fond beige. */
body.tax-categorie-sejour .fle2026-centres-filterbar__panel--regions {
	background-color: var(--fle2026-immersion-fond-solide);
}

/* Badge : plus d'écart icône ↔ label ; le survol remplace le zoom. */
body.tax-categorie-sejour .fle2026-region-badges__badge {
	gap: var(--wp--preset--spacing--50);
}
body.tax-categorie-sejour .fle2026-region-badges__badge:hover {
	transform: none;
}

/* Icône : plus grande. Le « gris » = UNIQUEMENT le fond du span (le PNG carte
   a un fond transparent → le gris ressort autour, le marqueur rouge reste
   rouge). Bordure rouge épaisse au survol, transparente au repos (pas de saut
   de taille). */
body.tax-categorie-sejour .fle2026-region-badges__icon,
body.tax-categorie-sejour .fle2026-region-badges__icon:has(img) {
	width: 4.5rem;
	height: 4.5rem;
	box-sizing: border-box;
	background-color: #b6b6b6;
	border: 4px solid transparent;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* pas de padding → l'image remplit le disque et n'apparaît plus « carrée »
   (le padding la rétrécissait en carré au centre du cercle).
   Le gris se fait ICI, sur l'image : un background-color ne peut pas la griser
   (l'image opaque le masque). grayscale(1) = tout gris (marqueur inclus) ;
   descends à grayscale(.7) si tu veux garder une pointe de rouge. */
body.tax-categorie-sejour .fle2026-region-badges__icon img {
	padding: 0;
	filter: grayscale(1);
	transition: filter 0.2s ease;
}

/* Survol du filtre : bordure rouge, fond blanc, label rouge, image en couleur. */
body.tax-categorie-sejour .fle2026-region-badges__badge:hover .fle2026-region-badges__icon {
	border-color: var(--wp--preset--color--rouge);
	background-color: var(--wp--preset--color--blanc);
}
body.tax-categorie-sejour .fle2026-region-badges__badge:hover .fle2026-region-badges__icon img {
	filter: none;
}
body.tax-categorie-sejour .fle2026-region-badges__badge:hover .fle2026-region-badges__label {
	color: var(--wp--preset--color--rouge);
}