/*
	Theme Name: Thème CREFAO
	Theme URI: https://crefao.fr/
	Description: Thème enfant de Hello Elementor pour le site CREFAO. Permet de personnaliser le thème parent sans perdre les modifications lors des mises à jour.
	Author: CREFAO
	Author URI: https://crefao.fr/
	Template: hello-elementor
	Version: 1.0.0
	Requires at least: 6.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: crefao-child
	Tags: elementor, child-theme
*/

/* ========================================================================
   Variables — Charte graphique Safer Occitanie
   Valeurs « Web » de la charte (font foi pour l'écran).
   ======================================================================== */

:root {
	/* --- Couleurs institutionnelles --- */
	--crefao-vert-olive: #7C9B40;   /* RVB 111/156/18  */
	--crefao-orange:     #E39642;   /* RVB 255/135/0   */

	/* --- Palette --- */
	--crefao-vert-fonce: #006633;   /* RVB 0/95/39     */
	--crefao-rouge:      #CC3947;   /* RVB 228/0/58    */
	--crefao-vert:       #009933;   /* RVB 0/157/72    */
	--crefao-bleu:       #52ACBE;   /* RVB 46/180/211  */
	--crefao-vert-clair: #cccc33;   /* RVB 200/211/0   */
	--crefao-jaune:      #ffff00;   /* RVB 255/229/0   */

	/* --- Alias sémantiques --- */
	--crefao-primary:    var(--crefao-vert-olive);
	--crefao-secondary:  var(--crefao-orange);
	--crefao-success:    var(--crefao-vert);
	--crefao-danger:     var(--crefao-rouge);
	--crefao-info:       var(--crefao-bleu);
	--crefao-warning:    var(--crefao-jaune);
	

	/* --- Couleur dédiée --- */
	--crefao-izifriche:  #0F737E;  /* page « Izifriche » */
	--crefao-grey: #F3F3F3;

	/* ====================================================================
	   Typographie — Montserrat
	   ==================================================================== */

	/* --- Familles --- */
	--crefao-font-base:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--crefao-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* --- Graisses --- */
	--crefao-fw-light:     300;
	--crefao-fw-regular:   400;
	--crefao-fw-medium:    500;
	--crefao-fw-semibold:  600;
	--crefao-fw-bold:      700;
	--crefao-fw-extrabold: 800;
	--crefao-fw-black:     900;

	/* --- Tailles --- */
	--crefao-fs-base: 16px;   /* corps de texte */
	--crefao-fs-h1:   48px;
	--crefao-fs-h2:   32px;
	--crefao-fs-h3:   24px;
	--crefao-fs-h4:   20px;
	--crefao-fs-h5:   18px;
	--crefao-fs-h6:   16px;

	/* --- Interlignages --- */
	--crefao-lh-heading: 1.2;
	--crefao-lh-base:    1.6;

	/* --- Layout --- */
	--crefao-container:     1280px;
	--crefao-container-pad: 24px;
}

/* ========================================================================
   Application de la typographie — tous les éléments HTML
   ======================================================================== */

/* --- Garde-fous responsive globaux --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

/* --- Base : toute la page hérite de Montserrat --- */
body {
	font-family: var(--crefao-font-base);
	font-weight: var(--crefao-fw-regular);
	font-size: var(--crefao-fs-base);
	line-height: var(--crefao-lh-base);
}

/* Force l'héritage sur les éléments qui ont parfois leur propre famille */
input, button, textarea, select, optgroup {
	font-family: inherit;
}

/* --- Titres --- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--crefao-font-heading);
	line-height: var(--crefao-lh-heading);
}

h1 { font-size: var(--crefao-fs-h1); font-weight: var(--crefao-fw-bold); }
h2 { font-size: var(--crefao-fs-h2); font-weight: var(--crefao-fw-bold); }
h3 { font-size: var(--crefao-fs-h3); font-weight: var(--crefao-fw-semibold); }
h4 { font-size: var(--crefao-fs-h4); font-weight: var(--crefao-fw-semibold); }
h5 { font-size: var(--crefao-fs-h5); font-weight: var(--crefao-fw-medium); }
h6 { font-size: var(--crefao-fs-h6); font-weight: var(--crefao-fw-medium); }

/* --- Texte courant --- */
p,
ul, ol, li,
dl, dt, dd,
blockquote,
figcaption,
table, th, td,
a,
label,
address {
	font-family: var(--crefao-font-base);
}

p {
	font-size: var(--crefao-fs-base);
	line-height: var(--crefao-lh-base);
}

/* --- Listes --- */
ul, ol {
	font-size: var(--crefao-fs-base);
	line-height: var(--crefao-lh-base);
}

/* --- Citations --- */
blockquote {
	font-size: var(--crefao-fs-base);
	line-height: var(--crefao-lh-base);
}

/* --- Emphases --- */
strong, b { font-weight: var(--crefao-fw-bold); }
em, i     { font-style: italic; }

/* --- Carré vert devant chaque h2 du site --- */
h2::before {
	content: "";
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	margin-right: 0.5em;
	background-color: var(--crefao-vert-fonce);
	vertical-align: -0.02em;
}

/* ========================================================================
   Header — deux niveaux
   ======================================================================== */

.crefao-header__inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	text-align: center;
}

/* --- Barre du haut (menu secondaire) --- */
.crefao-header__top {
	background-color: #f2f2f2;
}

.crefao-header__top .crefao-header__inner {
	justify-content: flex-end;
	min-height: 56px;
}

.crefao-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.crefao-menu a {
	display: block;
	text-decoration: none;
	font-weight: var(--crefao-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

/* Menu secondaire : petit, vert, aligné à droite */
.crefao-menu--secondary {
	gap: 40px;
	text-align: right;
}

.crefao-menu--secondary a {
	font-size: 12px;
	color: var(--crefao-vert-olive);
}

.crefao-menu--secondary a:hover,
.crefao-menu--secondary .current-menu-item > a {
	color: var(--crefao-vert-fonce);
}

/* --- Barre principale --- */
.crefao-header__main {
	background-color: #fff;
	border-bottom: 3px solid var(--crefao-vert-olive);
}

.crefao-header__main .crefao-header__inner {
	gap: 32px;
	min-height: 96px;
}

.crefao-header__brand {
	margin-right: auto;
	display: flex;
	align-items: center;
}

.crefao-header__brand img,
.crefao-header__brand .custom-logo {
	max-height: 72px;
	width: auto;
	height: auto;
}

.crefao-header__site-title {
	font-weight: var(--crefao-fw-extrabold);
	font-size: 24px;
	color: var(--crefao-vert-fonce);
	text-decoration: none;
}

/* Menu principal */
.crefao-menu--primary {
	gap: 36px;
	align-items: center;
}

.crefao-menu--primary a {
	font-size: 12px;
	color: var(--crefao-vert-fonce);
	padding: 8px 0;
}

.crefao-menu--primary a:hover,
.crefao-menu--primary .current-menu-item > a {
	color: var(--crefao-orange);
}

/* Sous-menus (niveau 2) */
.crefao-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	z-index: 100;
	min-width: 220px;
	background-color: #fff;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
	border-top: 3px solid var(--crefao-vert-olive);
	display: none;
	text-align: left;
}

.crefao-menu li {
	position: relative;
}

.crefao-menu li:hover > .sub-menu,
.crefao-menu li:focus-within > .sub-menu {
	display: block;
}

.crefao-menu .sub-menu a {
	padding: 8px 20px;
	white-space: nowrap;
}

/* Chevron : éléments de menu ayant un sous-menu */
.crefao-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	vertical-align: middle;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY( -2px ) rotate( 45deg );
	transition: transform 0.2s ease;
}

/* Chevron retourné quand le sous-menu est ouvert */
.crefao-menu .menu-item-has-children:hover > a::after,
.crefao-menu .menu-item-has-children:focus-within > a::after {
	transform: translateY( 1px ) rotate( -135deg );
}

/* --- Actions (recherche + burger) --- */
.crefao-header__actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* --- Recherche --- */
.crefao-header__search {
	position: relative;
	display: flex;
	align-items: center;
}

.crefao-header__search-toggle,
.crefao-header__burger {
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--crefao-vert-fonce);
	padding: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.crefao-header__search-panel {
	position: absolute;
	top: calc( 100% + 8px );
	right: 0;
	z-index: 100;
	background-color: #fff;
	padding: 16px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
	border-top: 3px solid var(--crefao-vert-olive);
}

/* --- Burger (caché en desktop) --- */
.crefao-header__burger {
	display: none;
	flex-direction: column;
	gap: 5px;
}

.crefao-header__burger span {
	display: block;
	width: 26px;
	height: 3px;
	background-color: var(--crefao-vert-fonce);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease;
	transform-origin: center;
}

/* Animation en croix quand le menu mobile est ouvert. */
.crefao-header--nav-open .crefao-header__burger span:nth-child( 1 ) {
	transform: translateY( 8px ) rotate( 45deg );
}

.crefao-header--nav-open .crefao-header__burger span:nth-child( 2 ) {
	opacity: 0;
}

.crefao-header--nav-open .crefao-header__burger span:nth-child( 3 ) {
	transform: translateY( -8px ) rotate( -45deg );
}

/* ========================================================================
   Header — responsive (mobile / tablette)
   ======================================================================== */

/* Panneau mobile : masqué en desktop (le burger ne s'y affiche pas). */
.crefao-header__mobile {
	display: none;
}

@media ( max-width: 1024px ) {
	/* Barre secondaire (haut) et menu principal desktop : masqués. */
	.crefao-header__top {
		display: none;
	}

	.crefao-nav--primary {
		display: none;
	}

	/* Barre mobile : logo à gauche, actions à droite, fond gris/blanc. */
	.crefao-header__main {
		background-color: var(--crefao-grey);
		border-bottom: 1px solid #e3e3e3;
	}

	.crefao-header__main .crefao-header__inner {
		min-height: 68px;
		gap: 12px;
		padding: 0 16px;
	}

	.crefao-header__actions {
		margin-left: auto;
		gap: 2px;
	}

	.crefao-header__burger {
		display: flex;
	}

	/* Le panneau de recherche se déroule sous la barre, comme le menu mobile.
	   Ancré sur .crefao-header (top: 100%) et non sur une hauteur en dur : la
	   barre peut dépasser 68px, le logo montant jusqu'à 72px. */
	.crefao-header__search {
		position: static;
	}

	.crefao-header__search-panel {
		position: absolute;
		left: 16px;
		right: 16px;
		top: 100%;
		z-index: 200;
	}

	/* --- Panneau menu mobile fusionné (déroulant sous la barre) --- */
	/* N'apparaît que lorsque JS retire l'attribut « hidden ». */
	.crefao-header__mobile:not( [hidden] ) {
		display: block;
	}

	.crefao-header__mobile {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 200;
		background-color: #fff;
		border-top: 1px solid #e3e3e3;
		box-shadow: 0 16px 28px rgba( 0, 0, 0, 0.12 );
	}

	.crefao-header {
		position: relative;
	}

	.crefao-mobile-nav {
		max-height: calc( 100vh - 68px );
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.crefao-mobile-menu-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.crefao-mobile-menu-list a {
		display: block;
		padding: 15px 20px;
		text-decoration: none;
		font-weight: var(--crefao-fw-bold);
		text-transform: uppercase;
		font-size: 14px;
		letter-spacing: 0.03em;
		line-height: 1.3;
		color: var(--crefao-vert-fonce);
		border-bottom: 1px solid #f0f0f0;
	}

	.crefao-mobile-menu-list a:hover,
	.crefao-mobile-menu-list a:focus,
	.crefao-mobile-menu-list .current-menu-item > a {
		color: var(--crefao-orange);
		background-color: var(--crefao-grey);
	}

	/* Menu secondaire fusionné : plus discret, en bas de liste. */
	.crefao-mobile-menu-list--secondary {
		border-top: 4px solid var(--crefao-grey);
	}

	.crefao-mobile-menu-list--secondary a {
		font-size: 12px;
		color: var(--crefao-vert-olive);
	}

	/* Ligne parent : libellé + bouton chevron. */
	.crefao-mobile-row {
		position: relative;
	}

	/* Le libellé parent laisse la place au bouton chevron à droite. */
	.crefao-mobile-row > a {
		padding-right: 60px;
	}

	/* Sous-menus : masqués par défaut, dépliés au clic sur le chevron. */
	.crefao-mobile-menu-list .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0;
		background-color: #fafafa;
		display: none;
	}

	.crefao-mobile-menu-list .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	.crefao-mobile-menu-list .sub-menu a {
		padding-left: 40px;
		font-size: 13px;
		font-weight: var(--crefao-fw-semibold);
		text-transform: none;
		letter-spacing: 0;
	}

	/* Bouton chevron dépliant (injecté par JS). */
	.crefao-mobile-toggle {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		background: none;
		color: var(--crefao-vert-fonce);
		cursor: pointer;
	}

	.crefao-mobile-toggle__chevron {
		display: block;
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY( -2px ) rotate( 45deg );
		transition: transform 0.25s ease;
	}

	.crefao-mobile-menu-list .menu-item-has-children.is-open .crefao-mobile-toggle__chevron {
		transform: translateY( 2px ) rotate( -135deg );
	}

	/* Verrou de défilement quand le menu est ouvert. */
	body.crefao-no-scroll {
		overflow: hidden;
	}
}

/* ========================================================================
   Hero — toutes les pages sauf la home
   ======================================================================== */

/* Alignement du contenu gauche sur le conteneur centré (max 1280px). */
:root {
	--crefao-edge: max( var(--crefao-container-pad), calc( ( 100% - var(--crefao-container) ) / 2 + var(--crefao-container-pad) ) );
}

/* Univers colorimétrique par section (porté par le <body>, partagé par tous
   les composants : hero, cartes départementales, etc.). */
body                       { --crefao-section-color: var(--crefao-vert-fonce); }
.crefao-section--friche    { --crefao-section-color: var(--crefao-orange); }
.crefao-section--sylvo     { --crefao-section-color: var(--crefao-bleu); }
.crefao-section--bvsm      { --crefao-section-color: var(--crefao-rouge); }
.crefao-section--izifriche { --crefao-section-color: var(--crefao-izifriche); }

.crefao-hero {
	position: relative;
	display: grid;
	grid-template-columns: 52% 48%;
	grid-template-rows: auto 1fr;
	min-height: 520px;
	background-color: var(--crefao-section-color);
}

/* Sans image : le titre s'étale sur toute la largeur, mais le fil d'Ariane
   (colonne gauche) et le carré rouge gardent leur position à mi-parcours. */
.crefao-hero--no-image .crefao-hero__content {
	grid-column: 1 / -1;
}

/* Média sans fond : ne couvre pas le titre mais conserve le carré rouge à mi-parcours. */
.crefao-hero--no-image .crefao-hero__media {
	background-color: transparent;
	pointer-events: none;
}

/* --- Fil d'Ariane (bande grise, colonne gauche, ligne 1) --- */
.crefao-hero__breadcrumb {
	grid-column: 1;
	grid-row: 1;
	background-color: #f2f2f2;
	display: flex;
	align-items: center;
	min-height: 64px;
}

.crefao-hero__breadcrumb-inner {
	padding-left: var(--crefao-edge);
	padding-right: 24px;
	width: 100%;
}

.crefao-breadcrumb {
	font-size: 11px;
	font-weight: var(--crefao-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--crefao-vert-fonce);
}

.crefao-breadcrumb a {
	color: var(--crefao-vert-fonce);
	text-decoration: none;
}

.crefao-breadcrumb a:hover {
	color: var(--crefao-orange);
}

.crefao-breadcrumb .breadcrumb_last {
	color: var(--crefao-vert-fonce);
}

/* --- Bloc titre coloré (colonne gauche, ligne 2) --- */
.crefao-hero__content {
	grid-column: 1;
	grid-row: 2;
	background-color: var(--crefao-section-color);
	display: flex;
	align-items: center;
}

.crefao-hero__content-inner {
	padding: 72px;
	width: 100%;
}

.crefao-hero__title {
	margin: 0;
	color: #fff;
	font-weight: var(--crefao-fw-extrabold);
	font-size: clamp( 26px, 5vw, 45px );
	line-height: 1.1;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

/* --- Média (colonne droite, sur les 2 lignes) --- */
.crefao-hero__media {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: relative;
	background-color: var(--crefao-section-color);
}

.crefao-hero__image {
	display: block;
	width: 100%;
	height: 550px;
	object-fit: cover;
}

/* Carré rouge en débord sur le coin haut-gauche de l'image. */
.crefao-hero__square {
	position: absolute;
	top: 40px;
	left: -56px;
	width: 112px;
	height: 112px;
	background-color: var(--crefao-rouge);
	z-index: 2;
}

/* Section BVSM : le fond est rouge → le carré passe en orange pour rester visible. */
.crefao-section--bvsm .crefao-hero__square {
	background-color: var(--crefao-orange);
}

/* ========================================================================
   Hero — responsive
   ======================================================================== */

@media ( max-width: 1024px ) {
	.crefao-hero {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		min-height: 0;
	}

	.crefao-hero__breadcrumb { grid-column: 1; grid-row: 1; }
	.crefao-hero__content    { grid-column: 1; grid-row: 2; }

	.crefao-hero__media {
		grid-column: 1;
		grid-row: 3;
		min-height: 350px;
	}

	/* Sans image : on supprime le bloc média (évite un espace vide inutile). */
	.crefao-hero--no-image .crefao-hero__media {
		display: none;
	}

	.crefao-hero__content-inner {
		padding: 40px var(--crefao-container-pad);
	}

	.crefao-hero__square {
		left: auto;
		right: 24px;
		top: -40px;
		width: 80px;
		height: 80px;
	}
}

/* Mobile & tablette : on retire le carré décoratif du hero. */
@media ( max-width: 1024px ) {
	.crefao-hero__square {
		display: none;
	}
}

/* ========================================================================
   Composant : Triple titre (texte solide + 2 échos)
   ======================================================================== */

.crefao-triple-title {
	display: inline-block;
	position: relative;
	margin: 0;
	color: #fff;
	font-weight: var(--crefao-fw-extrabold);
	/* Taille fluide : se cale sur la largeur d'écran sous ~755px, plafonnée à 34px. */
	font-size: clamp( 15px, 4.5vw, 34px );
	line-height: 1.05;
	text-transform: uppercase;
	white-space: nowrap;
}

.crefao-ressources__header .crefao-triple-title {
	position: absolute;
	left: 0;
	top: 0.7em;
}

.crefao-ressources__header .crefao-triple-title::before, .crefao-ressources__header .crefao-triple-title::after {
	color: var(--crefao-vert-fonce);
}

/* Couche solide (au-dessus). */
.crefao-triple-title__main {
	position: relative;
	z-index: 3;
}

/* Échos : texte évidé (contour seul) via -webkit-text-stroke. */
.crefao-triple-title::before,
.crefao-triple-title::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	white-space: nowrap;
	pointer-events: none;
	color: transparent;
	-webkit-text-stroke: 1.5px #fff;
	paint-order: stroke fill;
}

.crefao-triple-title::before { top: -0.6em; z-index: 2; }
.crefao-triple-title::after  { top: 0.6em;  z-index: 1; }

/* ========================================================================
   Template-part : Introduction (titre centré + texte)
   ======================================================================== */

.crefao-intro {
	padding: 72px 0;
	background-color: var(--crefao-grey);
}

.crefao-intro__inner {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

.crefao-intro__title {
	margin: 0 0 32px;
	text-align: center;
	text-transform: uppercase;
	font-weight: var(--crefao-fw-bold);
	font-size: 28px;
	line-height: 1.2;
	color: #1d1d1b;
}

.crefao-intro__text {
	font-size: var(--crefao-fs-base);
	line-height: var(--crefao-lh-base);
	color: var(--crefao-vert-fonce);
}

.crefao-intro__text p {
	margin: 0 0 1.2em;
	font-size: 20px;
	line-height: 2;
}

.crefao-intro__text ul,
.crefao-intro__text ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.crefao-intro__text li {
	margin-bottom: 0.6em;
}

/* ========================================================================
   Template-part : Typologie départementale (cartes en 2 colonnes)
   ======================================================================== */

.crefao-typo-dep {
	padding: 56px 0;
	background-color: #fff;
}

.crefao-typo-dep__inner {
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

.crefao-typo-dep__title {
	margin: 0 0 40px;
	font-size: 22px;
	text-transform: uppercase;
	color: #1d1d1b;
}

.crefao-typo-dep__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 40px 64px;
}

.crefao-typo-dep__item {
	margin: 0;
}

/* --- Carte département --- */
.crefao-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 120px;
	padding: 0 28px 0 44px;
	background-color: #ececec;
	text-decoration: none;
	overflow: hidden;
	transition: background-color 0.2s ease;
}

.crefao-card__bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 20px;
	background-color: var(--crefao-section-color);
	transition: background-color 0.2s ease;
}

/* Numéro en gros avec effet « écho » : couche pleine au-dessus + 2 contours.
   Remplissage des échos = couleur du FOND (--crefao-num-bg) → ils paraissent
   creux ET occultent proprement la couche du dessous (pas de traits croisés).
   Contour = couleur d'encre (--crefao-num-ink). */
.crefao-card__number {
	position: relative;
	flex: 0 0 auto;
	min-width: 1.4em;
	font-size: 46px;
	font-weight: var(--crefao-fw-extrabold);
	line-height: 1;
	color: var(--crefao-section-color);
}

/* Couche pleine (au-dessus des échos). */
.crefao-card__number-main {
	position: relative;
	z-index: 3;
}

.crefao-card__number::before,
.crefao-card__number::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	pointer-events: none;
	color: var(--crefao-num-bg, #ececec);
	-webkit-text-stroke: 1.5px var(--crefao-num-ink, var(--crefao-section-color));
	paint-order: stroke fill;
}

.crefao-card__number::before { top: -0.6em; z-index: 2; }
.crefao-card__number::after  { top: 0.6em;  z-index: 1; }

.crefao-card__name {
	font-size: 15px;
	font-weight: var(--crefao-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--crefao-section-color);
	transition: color 0.2s ease;
}

/* --- Survol / focus : remplissage couleur de section, barre rouge, texte blanc --- */
.crefao-card:hover,
.crefao-card:focus-visible {
	background-color: var(--crefao-section-color);
	--crefao-num-bg: var(--crefao-section-color);
	--crefao-num-ink: #fff;
}

.crefao-card:hover .crefao-card__bar,
.crefao-card:focus-visible .crefao-card__bar {
	background-color: var(--crefao-rouge);
}

.crefao-card:hover .crefao-card__number,
.crefao-card:hover .crefao-card__name,
.crefao-card:focus-visible .crefao-card__number,
.crefao-card:focus-visible .crefao-card__name {
	color: #fff;
}

/* État actif (carte sélectionnée) : même rendu que le survol. */
.crefao-card.is-active                    { background-color: var(--crefao-section-color); --crefao-num-bg: var(--crefao-section-color); --crefao-num-ink: #fff; }
.crefao-card.is-active .crefao-card__bar  { background-color: var(--crefao-rouge); }
.crefao-card.is-active .crefao-card__number,
.crefao-card.is-active .crefao-card__name { color: #fff; }

/* Reset quand la carte est un <button>. */
button.crefao-card {
	width: 100%;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

@media ( max-width: 768px ) {
	.crefao-typo-dep__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ========================================================================
   Template-part : Affichage carte (cartes PDF)
   ======================================================================== */

.crefao-affichage-carte {
	padding: 56px 0;
	background-color: #fff;
}

.crefao-affichage-carte__inner {
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

.crefao-affichage-carte__title {
	margin: 0 0 40px;
	font-size: 22px;
	text-transform: uppercase;
	color: #1d1d1b;
}

.crefao-affichage-carte__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

/* --- Colonne gauche : liste de cartes --- */
.crefao-affichage-carte__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* --- Colonne droite : prévisualisation --- */
.crefao-affichage-carte__viewer {
	position: relative;
	border: 1px solid #e0e0e0;
	background-color: #fff;
	overflow: hidden;
}

/* Panneaux d'accordéon : masqués en desktop (aperçu partagé utilisé à la place). */
.crefao-affichage-carte__panel {
	display: none;
}

.crefao-affichage-carte__preview {
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: #f2f2f2;
}

.crefao-affichage-carte__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Barre « NOM DE LA CARTE » + boutons : flottante sur le bas de l'aperçu. */
.crefao-affichage-carte__bar {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background-color: rgba( 255, 255, 255, 0.55 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.12 );
}

.crefao-affichage-carte__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	background-color: var(--crefao-vert-olive);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.crefao-affichage-carte__btn:hover {
	background-color: var(--crefao-vert-fonce);
}

.crefao-affichage-carte__name {
	margin-left: 8px;
	font-weight: var(--crefao-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #1d1d1b;
}

@media ( max-width: 1024px ) {
	.crefao-affichage-carte__layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Aperçu partagé masqué : on bascule en accordéon. */
	.crefao-affichage-carte__viewer--desktop {
		display: none;
	}

	/* Panneaux visibles (sauf ceux repliés via [hidden]). */
	/* Fond = couleur de section, collé à la carte → montre l'appartenance. */
	.crefao-affichage-carte__panel {
		display: block;
		background-color: var(--crefao-section-color);
		padding: 16px;
	}

	.crefao-affichage-carte__panel[hidden] {
		display: none;
	}

	/* Barre boutons : plus en absolute → passe sous l'aperçu (ne recouvre plus le PDF). */
	.crefao-affichage-carte__bar {
		position: static;
		left: auto;
		right: auto;
		bottom: auto;
		flex-wrap: wrap;
		background-color: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	/* La sélection desktop (is-active) ne surligne plus : c'est l'ouverture qui le fait. */
	.crefao-affichage-carte__card.is-active {
		background-color: #ececec;
		--crefao-num-bg: #ececec;
		--crefao-num-ink: var(--crefao-section-color);
	}

	.crefao-affichage-carte__card.is-active .crefao-card__bar {
		background-color: var(--crefao-section-color);
	}

	.crefao-affichage-carte__card.is-active .crefao-card__number,
	.crefao-affichage-carte__card.is-active .crefao-card__name {
		color: var(--crefao-section-color);
	}

	/* Carte dont le panneau est ouvert : surlignage plein. */
	.crefao-affichage-carte__card[aria-expanded="true"] {
		background-color: var(--crefao-section-color);
		--crefao-num-bg: var(--crefao-section-color);
		--crefao-num-ink: #fff;
	}

	.crefao-affichage-carte__card[aria-expanded="true"] .crefao-card__bar {
		background-color: var(--crefao-rouge);
	}

	.crefao-affichage-carte__card[aria-expanded="true"] .crefao-card__number,
	.crefao-affichage-carte__card[aria-expanded="true"] .crefao-card__name {
		color: #fff;
	}
}

/* ========================================================================
   Template-part : Ressources (bloc builder)
   ======================================================================== */

.crefao-ressources {
	padding: 80px 0;
}

.crefao-ressources__inner {
	position: relative;
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

/* Carré orange décoratif, en débord haut-droite, derrière le panneau. */
.crefao-ressources__square {
	position: absolute;
	top: -28px;
	right: -8px;
	z-index: 0;
	width: 120px;
	height: 120px;
	background-color: var(--crefao-orange);
}

.crefao-ressources__panel {
	position: relative;
	z-index: 1;
	padding: 56px 72px 72px;
	background-color: var(--crefao-section-color);
	color: #fff;
	/* Remplit le centre des échos du triple titre → effet évidé sur le panneau. */
	--crefao-triple-bg: var(--crefao-section-color);
}

.crefao-ressources__header {
	margin-bottom: 40px;
}

.crefao-ressources__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 640px;
}

.crefao-ressources__item + .crefao-ressources__item {
	border-top: 1px solid rgba( 255, 255, 255, 0.3 );
}

.crefao-ressources__link {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 0;
	color: #fff;
	text-decoration: none;
}

.crefao-ressources__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--crefao-vert-olive);
	color: #fff;
	transition: background-color 0.2s ease;
}

.crefao-ressources__link:hover .crefao-ressources__icon {
	background-color: #fff;
	color: var(--crefao-vert-fonce);
}

.crefao-ressources__label-title {
	font-weight: var(--crefao-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.crefao-ressources__label-url {
	display: block;
	margin-top: 4px;
	font-weight: var(--crefao-fw-bold);
	text-transform: uppercase;
	word-break: break-all;
}

/* Visuel (carré rouge) en débord bas-gauche, devant le panneau. */
.crefao-ressources__icone {
	position: absolute;
	left: -40px;
	bottom: -40px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	background-color: var(--crefao-rouge);
}

.crefao-ressources__icone-img {
	width: 60%;
	height: auto;
}

@media ( max-width: 768px ) {
	.crefao-ressources__panel {
		padding: 50px 24px 80px;
	}

	.crefao-ressources__icone {
		left: -16px;
		bottom: -24px;
		width: 96px;
		height: 96px;
	}

	.crefao-ressources__square {
		width: 80px;
		height: 80px;
		right: 0px;
	}
}

/* ========================================================================
   Template-part : Texte + image (fond carto)
   ======================================================================== */

.crefao-textimg {
	position: relative;
	padding: 72px 0;
}

/* Bande grise partielle : l'image et le fond carto sont à cheval gris / blanc. */
.crefao-textimg::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 74%;
	background-color: var(--crefao-grey);
	z-index: 0;
}

/* Image à gauche → la bande grise passe à droite (miroir). */
.crefao-textimg--image-left::before {
	left: auto;
	right: 0;
}

.crefao-textimg__inner {
	position: relative;
	z-index: 1;
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

/* Image à gauche → on inverse l'ordre des colonnes. */
.crefao-textimg--image-left .crefao-textimg__media {
	order: -1;
}

/* --- Texte --- */
.crefao-textimg__title {
	margin: 0 0 24px;
	font-size: 24px;
	text-transform: uppercase;
	color: #1d1d1b;
}

.crefao-textimg__body {
	color: #1d1d1b;
}

.crefao-textimg__body p {
	margin: 0 0 1.2em;
}

.crefao-textimg__body :last-child {
	margin-bottom: 0;
}

/* --- Média : image superposée au fond carto --- */
.crefao-textimg__media {
	position: relative;
	min-height: 800px;
}

.crefao-textimg__carto {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: 90%;
	height: 90%;
	background-color: var(--crefao-carto-color, var(--crefao-orange));
}

/* Couche dédiée au fond carto : opacité réglable sans toucher à la couleur. */
.crefao-textimg__carto::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url( 'assets/svg/safer_fond_carto.svg' );
	background-size: cover;
	background-position: center;
	opacity: var(--crefao-carto-opacity, .5);
	pointer-events: none;
}

.crefao-textimg__image {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 90%;
	height: 90%;
	object-fit: cover;
}

/* Miroir quand l'image est à gauche. */
.crefao-textimg--image-left .crefao-textimg__carto {
	right: auto;
	left: 0;
}

.crefao-textimg--image-left .crefao-textimg__image {
	left: auto;
	right: 0;
}

@media ( max-width: 1024px ) {
	.crefao-textimg__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Section empilée : la bande de fond passe en pleine largeur. */
	.crefao-textimg::before,
	.crefao-textimg--image-left::before {
		width: 100%;
		left: 0;
		right: auto;
	}

	.crefao-textimg--image-left .crefao-textimg__media {
		order: 0;
	}

	.crefao-textimg__media {
		min-height: 360px;
	}
}

/* ========================================================================
   Template-part : CTA (bannière fond carto)
   ======================================================================== */

.crefao-cta {
	padding: 200px 0;
}

.crefao-cta__inner {
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

.crefao-cta__banner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 72px;
	min-height: 280px;
	overflow: hidden;
	background-color: var(--crefao-carto-color, var(--crefao-orange));
}

/* Couche dédiée au fond carto : opacité réglable (--crefao-carto-opacity)
   sans toucher à la couleur de fond. */
.crefao-cta__banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url( 'assets/svg/safer_fond_carto.svg' );
	background-size: cover;
	background-position: center;
	opacity: var(--crefao-carto-opacity, .2);
	pointer-events: none;
}

/* Contenu au-dessus de la couche carto. */
.crefao-cta__title,
.crefao-cta__button {
	position: relative;
	z-index: 1;
}

.crefao-cta__title {
	margin: 0;
	max-width: 52%;
	color: #fff;
	font-size: 34px;
	font-weight: var(--crefao-fw-extrabold);
	line-height: 1.15;
	text-transform: uppercase;
}

/* Pas de carré vert sur le titre du CTA. */
.crefao-cta__title::before {
	content: none;
}

.crefao-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 40px;
	flex: 0 0 auto;
	padding: 16px 28px;
	background-color: #fff;
	color: var(--crefao-cta-btn-color, var(--crefao-bleu));
	font-weight: var(--crefao-fw-bold);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.crefao-cta__button:hover {
	color: var(--crefao-vert-fonce);
}

.crefao-cta__icon {
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 1;
}

.crefao-cta__icon-img {
	display: block;
	width: 96px;
	height: auto;
}

@media ( max-width: 768px ) {
	.crefao-cta__banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
		padding: 40px 28px 96px;
	}

	.crefao-cta__title {
		max-width: 100%;
		font-size: 26px;
	}
}

/* ========================================================================
   Composant : Liste de documents (panneau coloré)
   ======================================================================== */

.crefao-doclist {
	padding: 32px 40px;
	background-color: var(--crefao-doclist-bg, var(--crefao-section-color));
}

.crefao-doclist__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.crefao-doclist__item + .crefao-doclist__item {
	border-top: 1px solid rgba( 255, 255, 255, 0.35 );
}

.crefao-doclist__link {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 0;
	color: #fff;
	text-decoration: none;
}

.crefao-doclist__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--crefao-vert-olive);
	color: #fff;
	transition: background-color 0.2s ease;
}

.crefao-doclist__link:hover .crefao-doclist__icon {
	background-color: var(--crefao-vert-fonce);
}


.crefao-doclist__label {
	font-weight: var(--crefao-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.3;
}

/* ========================================================================
   Template-part : Texte + image + documents (style BVSM)
   ======================================================================== */

.crefao-txtdoc {
	padding: 72px 0;
}

.crefao-txtdoc__inner {
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

/* Position de l'image (défaut : gauche). */
.crefao-txtdoc--image-right .crefao-txtdoc__media {
	order: 2;
}

/* --- Média : image + carrés décoratifs --- */
.crefao-txtdoc__media {
	position: relative;
	min-height: 560px;
	height: 100%;
}

.crefao-txtdoc__square {
	position: absolute;
    top: -1em;
    right: -1em;
    z-index: -1;
    width: 300px;
    height: 300px;
    background-color: var(--crefao-vert-olive);
}

.crefao-txtdoc__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.crefao-txtdoc__icone {
	position: absolute;
    left: -2em;
    bottom: -2em;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    background-color: var(--crefao-td-color, var(--crefao-section-color));
    border: 10px solid white;
}

.crefao-txtdoc__icone-img {
	width: 60%;
	height: auto;
}

/* Miroir (image à droite). */
.crefao-txtdoc--image-right .crefao-txtdoc__square { right: auto; left: -1em; }
.crefao-txtdoc--image-right .crefao-txtdoc__image  { left: auto; right: 0; }
.crefao-txtdoc--image-right .crefao-txtdoc__icone  { left: auto; right: 0; }

/* --- Texte --- */
.crefao-txtdoc__title {
	margin: 0 0 24px;
	font-size: 24px;
	text-transform: uppercase;
	color: #1d1d1b;
}

/* Carré du titre en orange (au lieu du vert global). */
.crefao-txtdoc__title::before {
	background-color: var(--crefao-orange);
}

.crefao-txtdoc__body {
	margin-bottom: 32px;
	color: #1d1d1b;
}

.crefao-txtdoc__body p { margin: 0 0 1em; }
.crefao-txtdoc__body ul { margin: 0 0 1em; padding-left: 1.2em; }
.crefao-txtdoc__body li { margin-bottom: 0.4em; }

/* ========================================================================
   Template-part : Grille image + texte
   ======================================================================== */

.crefao-grille-texte {
	padding: 72px 0;
}

.crefao-grille-texte__inner {
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	/* Les deux colonnes font la même hauteur ; le média suit la hauteur du texte. */
	align-items: stretch;
}

/* Colonne média en flex pour que la zone images remplisse la hauteur dispo. */
.crefao-grille-texte__media {
	display: flex;
	flex-direction: column;
}

.crefao-grille-texte__logo {
	margin-bottom: 32px;
}

.crefao-grille-texte__logo-img {
	max-width: 100%;
	height: auto;
}

.crefao-grille-texte__images {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
	/* Remplit la hauteur restante de la colonne (= hauteur du texte). */
	flex: 1 1 auto;
	min-height: 400px;
}

/* Fond carto (gauche) et image (droite) : remplissent la hauteur de la rangée. */
.crefao-grille-texte__carto,
.crefao-grille-texte__img--photo {
	width: 100%;
	height: 100%;
}

.crefao-grille-texte__img--photo {
	display: block;
	object-fit: cover;
}

/* Fond carto : orange + motif SVG (opacité réglable via --crefao-carto-opacity). */
.crefao-grille-texte__carto {
	position: relative;
	background-color: var(--crefao-carto-color, var(--crefao-orange));
}

.crefao-grille-texte__carto::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url( 'assets/svg/safer_fond_carto.svg' );
	background-size: cover;
	background-position: center;
	opacity: var(--crefao-carto-opacity, .4);
	pointer-events: none;
}

/* Courbe blanche reliant les deux images. */
.crefao-grille-texte__curve {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* --- Texte --- */
.crefao-grille-texte__title {
	margin: 0 0 24px;
	font-size: 28px;
	color: var(--crefao-vert-fonce);
}

/* Pas de carré vert sur ce titre. */
.crefao-grille-texte__title::before {
	content: none;
}

.crefao-grille-texte__body {
	margin-bottom: 32px;
	color: #1d1d1b;
}

.crefao-grille-texte__body p { margin: 0 0 1em; }

@media ( max-width: 1024px ) {
	.crefao-txtdoc__inner,
	.crefao-grille-texte__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.crefao-txtdoc--image-right .crefao-txtdoc__media {
		order: 0;
	}

	.crefao-txtdoc__media {
		min-height: 420px;
	}
}

/* ========================================================================
   Template-part : Vidéo (pleine section)
   ======================================================================== */

.crefao-video {
	padding: 56px 0;
}

.crefao-video__inner {
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

.crefao-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: #000;
}

.crefao-video__frame iframe,
.crefao-video__frame embed,
.crefao-video__frame object,
.crefao-video__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ========================================================================
   Modèle de page : Article (contenu long)
   ======================================================================== */

.crefao-article__inner {
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 56px var(--crefao-container-pad);
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 340px;
	gap: 56px;
	align-items: start;
}

.crefao-article__content {
	color: #1d1d1b;
}

.crefao-article__content > :first-child {
	margin-top: 0;
}

.crefao-article__content p {
	margin: 0 0 1.2em;
}

.crefao-article__content ul,
.crefao-article__content ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

/* h2 du contenu : barre orange pleine largeur au-dessus (pas de carré vert). */
.crefao-article__content h2 {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 3px solid var(--crefao-orange);
}

.crefao-article__content h2::before {
	content: none;
}

/* CTA latéral, collant. */
.crefao-article__aside {
	position: sticky;
	top: 24px;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media ( max-width: 1024px ) {
	.crefao-article__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* CTA latéral masqué sur mobile : le CTA du bas suffit. */
	.crefao-article__aside {
		display: none;
	}
}

/* ========================================================================
   Composant : CTA-box (encart compact)
   ======================================================================== */

.crefao-cta-box {
	padding: 32px;
	background-color: var(--crefao-ctabox-bg, var(--crefao-izifriche));
	color: #fff;
}

.crefao-cta-box__title {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: var(--crefao-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.3;
	text-align: center;
}

.crefao-cta-box__button {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	padding: 12px 22px;
	background-color: #fff;
	color: var(--crefao-ctabox-bg, var(--crefao-izifriche));
	font-weight: var(--crefao-fw-bold);
	text-decoration: none;
}

/* ========================================================================
   Template-part : Frise chronologique
   ======================================================================== */

.crefao-frise {
	padding: 56px 0;
}

.crefao-frise__inner {
	position: relative;
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

/* --- Colonne gauche sticky --- */
.crefao-frise__aside {
	position: sticky;
	top: 24px;
	align-self: start;
}

.crefao-frise__panel {
	min-height: 420px;
	padding: 40px;
	color: #fff;
	background-color: var(--crefao-vert-fonce);
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
}

.crefao-frise__title {
	margin: 0 0 32px;
	font-size: 26px;
	text-transform: uppercase;
	color: #fff;
}

/* Pas de carré vert sur fond vert. */
.crefao-frise__title::before {
	content: none;
}

.crefao-frise__summary {
	list-style: none;
	margin: 0;
	padding: 0;
}

.crefao-frise__summary-link {
	display: block;
	padding: 16px 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.35 );
	color: #fff;
	text-decoration: none;
	font-weight: var(--crefao-fw-bold);
	font-size: 14px;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.crefao-frise__summary-item:first-child .crefao-frise__summary-link {
	padding-top: 0;
}

.crefao-frise__summary-link:hover {
	opacity: 0.8;
}

.crefao-frise__summary-link.is-active {
	color: var(--crefao-vert-clair);
}

/* --- Colonne droite : cartes --- */
.crefao-frise__items {
	position: relative;
}

/* Ligne de temps : centrée dans la grille (gouttière entre les 2 colonnes). */
.crefao-frise__line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	transform: translateX( -50% );
	background-color: rgba( 0, 153, 51, 0.2 ); /* piste */
}

/* Partie « tracée » qui grandit au scroll. */
.crefao-frise__progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: var(--crefao-vert);
}

.crefao-frise__marker {
	position: absolute;
	left: 50%;
	bottom: -6px; /* suit le front du tracé */
	width: 14px;
	height: 14px;
	transform: translateX( -50% );
	background-color: var(--crefao-vert);
}

.crefao-frise__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 40px;
	padding: 40px;
	background-color: var(--crefao-grey);
	min-height: 400px;
}

.crefao-frise__item:last-child {
	margin-bottom: 0;
}

/* Contenu à droite du numéro (titre + texte + fichiers). */
.crefao-frise__item-content {
	flex: 1;
	min-width: 0;
}

.crefao-frise__num {
	position: relative;
	flex: 0 0 auto;
	font-size: 40px;
	font-weight: var(--crefao-fw-extrabold);
	line-height: 1;
	color: var(--crefao-vert-fonce);
}

/* Couche pleine (au-dessus des échos). */
.crefao-frise__num-main {
	position: relative;
	z-index: 3;
}

/* Échos : remplissage opaque = fond de la carte (gris) → creux + occultation. */
.crefao-frise__num::before,
.crefao-frise__num::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	pointer-events: none;
	color: var(--crefao-grey);
	-webkit-text-stroke: 1.5px var(--crefao-vert-fonce);
	paint-order: stroke fill;
}

.crefao-frise__num::before { top: -0.6em; z-index: 2; }
.crefao-frise__num::after  { top: 0.6em;  z-index: 1; }

.crefao-frise__item-title {
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.15 );
	font-size: 20px;
	text-transform: uppercase;
	color: var(--crefao-vert-fonce);
}

.crefao-frise__item-body {
	margin-bottom: 24px;
	color: #1d1d1b;
}

.crefao-frise__item-body p { margin: 0 0 1em; }
.crefao-frise__item-body ul { margin: 0 0 1em; padding-left: 1.2em; }

/* Variante claire du composant documents (sur fond gris, texte foncé). */
.crefao-doclist--plain {
	padding: 8px 0 0;
	background-color: transparent;
	border-top: 1px solid rgba( 0, 0, 0, 0.15 );
}

.crefao-doclist--plain .crefao-doclist__item + .crefao-doclist__item {
	border-top-color: rgba( 0, 0, 0, 0.12 );
}

.crefao-doclist--plain .crefao-doclist__link {
	color: var(--crefao-vert-fonce);
}

@media ( max-width: 1024px ) {
	.crefao-frise__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.crefao-frise__aside {
		position: static;
		padding-left: 28px;
	}

	/* Barre de défilement de l'animation : basculée à gauche (au lieu du centre). */
	.crefao-frise__line {
		left: var( --crefao-container-pad );
		transform: none;
	}

	/* Les cartes laissent un rail à gauche pour la barre. */
	.crefao-frise__items {
		padding-left: 28px;
	}
}

/* Téléphones : le numéro passe au-dessus du contenu et la carte s'allonge.
   Côte à côte, il ne restait que ~147px de large au texte (padding de carte
   40px, numéro 40px, gouttière 24px, rail 28px) et les mots longs des titres
   en majuscules débordaient. */
@media ( max-width: 600px ) {
	.crefao-frise__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 28px 20px;
		min-height: 0;
	}

	.crefao-frise__items,
	.crefao-frise__aside {
		padding-left: 20px;
	}

	/* Filet de sécurité : aucun mot ne peut plus déborder de sa carte. */
	.crefao-frise__item-title,
	.crefao-frise__item-body {
		overflow-wrap: break-word;
	}
}

/* ========================================================================
   Archive Actualités + composant Carte article
   ======================================================================== */

.crefao-actus {
	padding: 56px 0;
}

.crefao-actus__inner {
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

.crefao-actus__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 28px;
}

/* --- Composant carte article --- */
.crefao-article-card__link {
	position: relative;
	display: block;
	min-height: 320px;
	padding: 32px 32px 88px;
	overflow: hidden;
	background-color: var(--crefao-vert-olive);
	color: #fff;
	text-decoration: none;
}

.crefao-article-card__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.35;
	transition: opacity 0.3s ease;
}

.crefao-article-card__link:hover .crefao-article-card__img {
	opacity: 0.5;
}

.crefao-article-card__body {
	position: relative;
	z-index: 1;
	display: block;
}

.crefao-article-card__title {
	margin: 0 0 16px;
	font-size: 18px;
	text-transform: uppercase;
	color: #fff;
}

.crefao-article-card__excerpt {
	display: block;
	font-size: 14px;
	line-height: 1.55;
	color: #fff;
}

.crefao-article-card__arrow {
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--crefao-rouge);
	border: 5px solid white;
	color: #fff;
	transition: background-color 0.2s ease;
}

.crefao-article-card__link:hover .crefao-article-card__arrow {
	background-color: var(--crefao-vert-fonce);
}

/* --- Pagination --- */
.crefao-actus .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 48px;
}

.crefao-actus .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	background-color: var(--crefao-grey);
	color: var(--crefao-vert-fonce);
	font-weight: var(--crefao-fw-bold);
	text-decoration: none;
}

.crefao-actus .page-numbers.current,
.crefao-actus .page-numbers:hover {
	background-color: var(--crefao-vert-olive);
	color: #fff;
}

@media ( max-width: 960px ) {
	.crefao-actus__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.crefao-actus__grid {
		grid-template-columns: 1fr;
	}
}

/* ========================================================================
   Template-part : Slider Actualités (Swiper)
   ======================================================================== */

.crefao-actus-slider {
	padding: 56px 0;
}

.crefao-actus-slider__inner {
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

.crefao-actus-slider__title {
	margin: 0 0 24px;
	color: var(--crefao-vert-fonce);
}

.crefao-actus-slider__nav {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.crefao-actus-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	cursor: pointer;
	background-color: var(--crefao-vert-fonce);
	color: #fff;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.crefao-actus-slider__btn:hover {
	background-color: var(--crefao-vert-olive);
}

.crefao-actus-slider__btn.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

.crefao-actus-slider__swiper {
	padding-top: 32px;
	border-top: 1px solid #e0e0e0;
	overflow: hidden;
}

/* Cartes de hauteur égale dans le slider. */
.crefao-actus-slider .swiper-slide {
	height: auto;
}

.crefao-actus-slider .swiper-slide .crefao-article-card,
.crefao-actus-slider .swiper-slide .crefao-article-card__link {
	height: 100%;
}

.crefao-actus-slider__footer {
	margin-top: 48px;
	text-align: center;
}

.crefao-actus-slider__button {
	display: inline-block;
	padding: 16px 32px;
	background-color: var(--crefao-orange);
	color: #fff;
	font-weight: var(--crefao-fw-bold);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.crefao-actus-slider__button:hover {
	background-color: var(--crefao-vert-fonce);
}

/* ========================================================================
   Hero — Accueil (texte + colonnes d'images défilantes)
   ======================================================================== */

.crefao-hero-home {
	display: grid;
	grid-template-columns: 55% 45%;
	grid-template-rows: minmax( 0, 1fr ); /* la rangée = hauteur du hero, pas celle des images */
	height: clamp( 560px, 82vh, 780px );
	overflow: hidden;
	background-color: var(--crefao-vert-olive);
}

.crefao-hero-home__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	padding: 90px;
	color: #fff;
}

.crefao-hero-home__title {
	margin: 0 0 24px;
	font-size: 44px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
}

.crefao-hero-home__text {
	max-width: 540px;
}

.crefao-hero-home__text p {
	margin: 0 0 1em;
	color: #fff;
}

.crefao-hero-home__text :last-child {
	margin-bottom: 0;
}

/* Bouton document sous le texte (même traitement que le CTA-box). */
.crefao-hero-home__button {
	align-self: flex-start;
	margin-top: 32px;
	display: inline-flex;
	align-items: center;
	gap: 24px;
	padding: 12px 22px;
	background-color: #fff;
	color: var(--crefao-vert-fonce);
	font-weight: var(--crefao-fw-bold);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.crefao-hero-home__button:hover,
.crefao-hero-home__button:focus {
	opacity: 0.85;
}

/* --- Média : deux colonnes d'images défilantes --- */
.crefao-hero-home__media {
	position: relative;
	display: flex;
	gap: 24px;
	height: 100%;
	min-height: 0;
}

.crefao-hero-home__col {
	position: relative;
	flex: 1;
	min-height: 0; /* indispensable pour le clipping en flex */
	overflow: hidden;
}

.crefao-hero-home__item {
	margin: 0 0 24px;
}

.crefao-hero-home__item img {
	display: block;
	width: 100%;
	height: 500px;
    object-fit: cover;
}

.crefao-hero-home__col--up .crefao-hero-home__track {
	animation: crefao-scroll-up 40s linear infinite;
}

.crefao-hero-home__col--down .crefao-hero-home__track {
	animation: crefao-scroll-down 40s linear infinite;
}

.crefao-hero-home__media:hover .crefao-hero-home__track {
	animation-play-state: paused;
}

@keyframes crefao-scroll-up {
	from { transform: translateY( 0 ); }
	to   { transform: translateY( -50% ); }
}

@keyframes crefao-scroll-down {
	from { transform: translateY( -50% ); }
	to   { transform: translateY( 0 ); }
}

.crefao-hero-home__curve {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.crefao-hero-home__track {
		animation: none;
	}
}

@media ( max-width: 900px ) {
	.crefao-hero-home {
		grid-template-columns: 1fr;
		height: auto;
	}

	.crefao-hero-home__content {
		padding: 48px var(--crefao-container-pad);
	}

	.crefao-hero-home__media {
		height: 460px;
	}
}

/* ========================================================================
   Pied de page
   ======================================================================== */

/* --- Bandeau contact (orange) --- */
.crefao-footer-contact {
	position: relative;
	overflow: hidden;
	background-color: var(--crefao-fc-bg, var(--crefao-orange));
}

/* Motif carto en filigrane dans le bandeau contact. */
.crefao-footer-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url( 'assets/svg/safer_fond_carto.svg' );
	background-size: cover;
	background-position: center;
	opacity: 0.2;
	pointer-events: none;
}

.crefao-footer-contact__inner {
	position: relative;
	z-index: 1;
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 300px;
}

.crefao-footer-contact__title {
	margin: 0;
	max-width: 60%;
	color: #fff;
	font-size: 40px;
	line-height: 1.15;
	text-transform: uppercase;
}

.crefao-footer-contact__title::before {
	content: none;
}

.crefao-footer-contact__button {
	flex: 0 0 auto;
	display: inline-block;
	padding: 18px 36px;
	background-color: #fff;
	color: var(--crefao-fc-btn, var(--crefao-orange));
	font-weight: var(--crefao-fw-bold);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.crefao-footer-contact__button:hover {
	background-color: var(--crefao-vert-fonce);
	color: #fff;
}

/* --- Pied de page vert --- */
.crefao-footer {
	position: relative;
	overflow: hidden;
	padding: 56px 0 40px;
	background-color: var(--crefao-vert-fonce);
	color: #fff;
}

.crefao-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

/* Rangée haute : logo + réseaux + filet. */
.crefao-footer__top {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.3 );
}

/* Rangée de 3 logos. */
.crefao-footer__logos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 32px;
}

.crefao-footer__logo {
	display: inline-flex;
	align-items: center;
}

.crefao-footer__logo-img {
	display: block;
	max-height: 90px;
	max-width: 240px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.crefao-footer__brand img,
.crefao-footer__brand .custom-logo {
	display: block;
	max-width: 280px;
	width: auto;
	height: auto;
}

.crefao-footer__social {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.crefao-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--crefao-orange);
	color: var(--crefao-vert-fonce);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.crefao-footer__social-link:hover {
	background-color: #fff;
}

/* Colonnes de menus. */
.crefao-footer__cols {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 40px;
	margin-top: 72px;
}

.crefao-footer__title {
	margin: 0 0 18px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #fff;
}

/* Pas de carré vert sur les titres du footer. */
.crefao-footer__title::before {
	content: none;
}

.crefao-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.crefao-footer__menu a {
	display: block;
	padding: 6px 0;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	transition: color 0.2s ease;
}

.crefao-footer__menu a:hover {
	color: var(--crefao-orange);
}

/* Barre du bas centrée : copyright + liens légaux. */
.crefao-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 28px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba( 255, 255, 255, 0.3 );
	font-size: 13px;
}

.crefao-footer__copyright {
	color: rgba( 255, 255, 255, 0.85 );
}

.crefao-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

.crefao-footer__legal a {
	color: #fff;
	text-decoration: none;
}

.crefao-footer__legal a:hover {
	color: var(--crefao-orange);
}

@media ( max-width: 900px ) {
	.crefao-footer-contact__inner {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.crefao-footer-contact__title {
		max-width: 100%;
		font-size: 30px;
	}

	.crefao-footer__cols {
		grid-template-columns: repeat( 2, 1fr );
		gap: 32px;
	}
}

@media ( max-width: 520px ) {
	.crefao-footer__top {
		flex-direction: column;
		gap: 24px;
	}

	.crefao-footer__logos {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.crefao-footer__social {
		justify-content: center;
	}

	.crefao-footer__cols {
		grid-template-columns: 1fr;
	}
}

/* ========================================================================
   Template-part : Partenaires (grille de cartes + filtres)
   ======================================================================== */

.crefao-partenaires {
	padding: 72px 0;
	background-color: #fff;
}

.crefao-partenaires__inner {
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

.crefao-partenaires__title {
	margin: 0 0 24px;
	text-align: center;
	text-transform: uppercase;
	font-weight: var(--crefao-fw-bold);
	font-size: 28px;
	line-height: 1.2;
	color: #1d1d1b;
}

.crefao-partenaires__intro {
	max-width: 860px;
	margin: 0 auto 40px;
	font-size: 18px;
	line-height: var(--crefao-lh-base);
	color: var(--crefao-vert-fonce);
	text-align: center;
}

.crefao-partenaires__intro p {
	margin: 0 0 1em;
}

/* --- Filtres --- */
.crefao-partenaires__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 40px;
}

.crefao-partenaires__filter {
	padding: 8px 18px;
	border: 1px solid #d8d8d8;
	border-radius: 999px;
	background: #fff;
	color: #444;
	font-family: var(--crefao-font-base);
	font-size: 14px;
	font-weight: var(--crefao-fw-semibold);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.crefao-partenaires__filter:hover {
	border-color: var(--crefao-primary);
	color: var(--crefao-primary);
}

.crefao-partenaires__filter.is-active {
	background: var(--crefao-primary);
	border-color: var(--crefao-primary);
	color: #fff;
}

/* --- Grille de cartes --- */
.crefao-partenaires__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}

.crefao-partenaires__card {
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.crefao-partenaires__card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}

.crefao-partenaires__card.is-hidden {
	display: none;
}

/* Boîte de logo commune : « contain » y fait tenir chaque logo en entier,
   quel que soit son format. Un logo large est limité par la largeur, un logo
   carré ou haut par la hauteur. Jamais rogné, jamais déformé. */
.crefao-partenaires__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 110px;
	margin-bottom: 20px;
}

.crefao-partenaires__logo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}

.crefao-partenaires__name {
	margin: 0 0 12px;
	font-size: var(--crefao-fs-h4);
	font-weight: var(--crefao-fw-bold);
	line-height: 1.25;
	color: #1d1d1b;
}

.crefao-partenaires__badge {
	align-self: flex-start;
	margin-bottom: 16px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--crefao-primary);
	color: #fff;
	font-size: 12px;
	font-weight: var(--crefao-fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Couleurs de badge par catégorie */
.crefao-partenaires__badge--decideur-public    { background: var(--crefao-bleu); }
.crefao-partenaires__badge--decideur-financeur { background: var(--crefao-vert-fonce); }
.crefao-partenaires__badge--administration     { background: var(--crefao-izifriche); }
.crefao-partenaires__badge--financeur          { background: var(--crefao-orange); }
.crefao-partenaires__badge--environnement      { background: var(--crefao-vert); }
.crefao-partenaires__badge--expertise-conseil  { background: var(--crefao-vert-olive); }
.crefao-partenaires__badge--veille-sanitaire   { background: var(--crefao-rouge); }
.crefao-partenaires__badge--operateur-foncier  { background: #8a6d3b; }
.crefao-partenaires__badge--acteur-agricole    { background: #5a7d2a; }

.crefao-partenaires__desc {
	font-size: 15px;
	line-height: var(--crefao-lh-base);
	color: #333;
}

.crefao-partenaires__desc p {
	margin: 0 0 0.9em;
}

.crefao-partenaires__desc p:last-child {
	margin-bottom: 0;
}

.crefao-partenaires__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 20px;
	color: var(--crefao-primary);
	font-weight: var(--crefao-fw-semibold);
	text-decoration: none;
}

.crefao-partenaires__link:hover {
	text-decoration: underline;
}

.crefao-partenaires__link-arrow {
	transition: transform 0.2s ease;
}

.crefao-partenaires__link:hover .crefao-partenaires__link-arrow {
	transform: translateX(3px);
}

@media (max-width: 600px) {
	.crefao-partenaires {
		padding: 48px 0;
	}

	.crefao-partenaires__grid {
		grid-template-columns: 1fr;
	}

	.crefao-partenaires__logo {
		height: 90px;
	}
}

/* ========================================================================
   Formulaire de recherche
   ======================================================================== */

.crefao-searchform__field {
	display: flex;
	align-items: center;
	border: 1px solid #d8d8d8;
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.2s ease;
}

.crefao-searchform__field:focus-within {
	border-color: var(--crefao-primary);
}

.crefao-searchform__input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	padding: 10px 16px;
	font-family: var(--crefao-font-base);
	font-size: 15px;
	color: #1d1d1b;
	background: transparent;
}

.crefao-searchform__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: var(--crefao-primary);
	transition: background-color 0.2s ease;
}

.crefao-searchform__submit:hover {
	background: var(--crefao-vert-fonce);
}

/* Panneau du header : largeur confortable. */
.crefao-header__search-panel .crefao-searchform__input {
	min-width: 220px;
}

/* ========================================================================
   Page de résultats de recherche
   ======================================================================== */

.crefao-search {
	padding: 64px 0;
	background: #fff;
}

.crefao-search__inner {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

.crefao-search__header {
	margin-bottom: 40px;
}

.crefao-search__title {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: var(--crefao-fw-bold);
	line-height: 1.2;
	color: #1d1d1b;
}

.crefao-search__count {
	margin: 0 0 24px;
	color: #666;
	font-size: 15px;
}

.crefao-search__form {
	max-width: 520px;
}

.crefao-search__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.crefao-search__result {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.04 );
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.crefao-search__result:hover {
	box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.1 );
	transform: translateY( -2px );
	border-color: var(--crefao-primary);
}

.crefao-search__result-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: var(--crefao-grey);
	color: var(--crefao-primary);
}

/* Documents (PDF) : accent orange. */
.crefao-search__result--attachment .crefao-search__result-icon {
	background: #fdf0e2;
	color: var(--crefao-orange);
}

.crefao-search__result-body {
	flex: 1;
	min-width: 0;
}

.crefao-search__result-type {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: var(--crefao-fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--crefao-primary);
}

.crefao-search__result-title {
	display: block;
	font-size: 18px;
	font-weight: var(--crefao-fw-bold);
	line-height: 1.3;
	color: #1d1d1b;
}

.crefao-search__result-excerpt {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.5;
	color: #555;
}

.crefao-search__result-arrow {
	flex: 0 0 auto;
	color: #bbb;
	transition: color 0.2s ease, transform 0.2s ease;
}

.crefao-search__result:hover .crefao-search__result-arrow {
	color: var(--crefao-primary);
	transform: translateX( 3px );
}

.crefao-search__empty {
	padding: 48px 24px;
	text-align: center;
	background: var(--crefao-grey);
	border-radius: 12px;
	color: #444;
}

.crefao-search__empty-hint {
	margin: 8px 0 0;
	font-size: 14px;
	color: #777;
}

.crefao-search__pagination {
	margin-top: 40px;
}

.crefao-search__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	margin: 0 4px;
	border-radius: 8px;
	border: 1px solid #e0e0e0;
	color: #444;
	text-decoration: none;
	font-weight: var(--crefao-fw-semibold);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.crefao-search__pagination .page-numbers.current,
.crefao-search__pagination .page-numbers:hover {
	background: var(--crefao-primary);
	border-color: var(--crefao-primary);
	color: #fff;
}

@media ( max-width: 600px ) {
	.crefao-search {
		padding: 40px 0;
	}

	.crefao-search__result {
		padding: 16px;
		gap: 14px;
	}

	.crefao-search__result-icon {
		width: 40px;
		height: 40px;
	}
}

/* ========================================================================
   Modèle : Page contact
   ======================================================================== */

.crefao-contact {
	padding: 64px 0;
	background: #fff;
}

.crefao-contact__inner {
	max-width: var(--crefao-container);
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
}

.crefao-contact__banner {
	margin-bottom: 40px;
	padding: 16px 24px;
	border-left: 4px solid var(--crefao-orange);
	background: #fdf4ea;
	color: #7a4a12;
	font-size: 15px;
	line-height: 1.5;
}

.crefao-contact__banner p:last-child {
	margin-bottom: 0;
}

/* --- Grille : infos à gauche, formulaire à droite --- */
.crefao-contact__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 40px;
	align-items: start;
}

.crefao-contact__col--info {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.crefao-contact__card {
	padding: 32px;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.04 );
}

.crefao-contact__heading {
	margin: 0 0 20px;
	font-size: var(--crefao-fs-h3);
	font-weight: var(--crefao-fw-bold);
	line-height: 1.2;
	color: var(--crefao-section-color);
}

.crefao-contact__name {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: var(--crefao-fw-semibold);
	color: #1d1d1b;
}

.crefao-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.crefao-contact__list-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: #333;
}

.crefao-contact__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--crefao-section-color);
	margin-top: 2px;
}

.crefao-contact__value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.crefao-contact__value a:hover {
	border-bottom-color: currentColor;
}

/* --- Horaires --- */
.crefao-contact__hours {
	margin: 0;
}

.crefao-contact__hours-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
}

.crefao-contact__hours-row:last-child {
	border-bottom: 0;
}

.crefao-contact__hours-label {
	margin: 0;
	font-weight: var(--crefao-fw-semibold);
	color: #1d1d1b;
}

.crefao-contact__hours-value {
	margin: 0;
	font-size: 14px;
	color: #555;
	text-align: right;
}

/* --- Formulaire --- */
.crefao-contact__form {
	font-size: 15px;
}

.crefao-contact__form input[type="text"],
.crefao-contact__form input[type="email"],
.crefao-contact__form input[type="tel"],
.crefao-contact__form input[type="url"],
.crefao-contact__form input[type="number"],
.crefao-contact__form select,
.crefao-contact__form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d8d8d8;
	border-radius: 8px;
	font-family: var(--crefao-font-base);
	font-size: 15px;
	color: #1d1d1b;
	background: #fff;
}

.crefao-contact__form textarea {
	min-height: 140px;
	resize: vertical;
}

.crefao-contact__form input:focus,
.crefao-contact__form select:focus,
.crefao-contact__form textarea:focus {
	outline: none;
	border-color: var(--crefao-section-color);
}

.crefao-contact__form input[type="submit"],
.crefao-contact__form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--crefao-section-color);
	color: #fff;
	font-family: var(--crefao-font-base);
	font-size: 15px;
	font-weight: var(--crefao-fw-semibold);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.crefao-contact__form input[type="submit"]:hover,
.crefao-contact__form button[type="submit"]:hover {
	opacity: 0.9;
}

/* --- Plan d'accès --- */
.crefao-contact__plan {
	margin-top: 56px;
}

.crefao-contact__map {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 16 / 7;
	background: var(--crefao-grey);
}

.crefao-contact__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.crefao-contact__plan-link {
	margin: 20px 0 0;
}

.crefao-contact__button {
	display: inline-flex;
	align-items: center;
	padding: 12px 28px;
	border-radius: 999px;
	background: var(--crefao-section-color);
	color: #fff;
	font-weight: var(--crefao-fw-semibold);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.crefao-contact__button:hover {
	opacity: 0.9;
}

/* --- Contenu libre éventuel --- */
.crefao-contact-page__content {
	padding: 0 0 64px;
	background: #fff;
}

.crefao-contact-page__content-inner {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 var(--crefao-container-pad);
	font-size: 16px;
	line-height: var(--crefao-lh-base);
	color: #333;
}

@media ( max-width: 860px ) {
	.crefao-contact__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media ( max-width: 600px ) {
	.crefao-contact {
		padding: 40px 0;
	}

	.crefao-contact__card {
		padding: 24px;
	}

	.crefao-contact__map {
		aspect-ratio: 4 / 3;
	}
}

/* ========================================================================
   Animations & micro-interactions

   Tout est conditionné à la classe « crefao-anim », posée sur <html> par
   functions.php uniquement si JavaScript répond et si l'utilisateur n'a pas
   demandé moins d'animations. Sans elle, la page s'affiche telle quelle.
   ======================================================================== */

/* --- Apparition au défilement (assets/js/reveal.js) ---

   L'état masqué est posé ici, et non par le script : il s'applique dès
   l'analyse de la feuille, donc avant le premier rendu. C'est ce qui permet
   d'animer aussi les blocs déjà à l'écran au chargement — masqués par le
   script, ils auraient clignoté (peints, puis masqués, puis refondus).

   La liste doit rester synchrone avec BLOCS dans assets/js/reveal.js. */
.crefao-anim main > *,
.crefao-anim .crefao-footer-contact {
	opacity: 0;
	transform: translateY( 48px );
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier( 0.16, 1, 0.3, 1 );
	will-change: opacity, transform;
}

/* Exclusions : le hero a son arrivée au chargement, la frise est pilotée par
   GSAP, dont les mesures supportent mal un parent transformé. */
.crefao-anim main > .crefao-hero,
.crefao-anim main > .crefao-hero-home,
.crefao-anim main > .crefao-frise {
	opacity: 1;
	transform: none;
	transition: none;
	will-change: auto;
}

.crefao-anim .crefao-reveal {
	opacity: 0;
	transform: translateY( 48px );
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier( 0.16, 1, 0.3, 1 );
	will-change: opacity, transform;
}

/* Pas d'échelle sur les sections : elles portent des fonds pleine largeur,
   qui laisseraient apparaître le fond de page sur les bords pendant l'effet. */
.crefao-anim .crefao-reveal--item {
	transform: translateY( 32px ) scale( 0.97 );
	transition-duration: 0.65s;
}

.crefao-anim main > .is-revealed,
.crefao-anim .crefao-reveal.is-revealed,
.crefao-anim .is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* --- Hero : arrivée en cascade au chargement --- */
@keyframes crefao-arrivee {
	from { opacity: 0; transform: translateY( 36px ); }
	to   { opacity: 1; transform: none; }
}

@keyframes crefao-fondu {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.crefao-anim .crefao-hero-home__content > *,
.crefao-anim .crefao-hero__content-inner > * {
	animation: crefao-arrivee 1s cubic-bezier( 0.16, 1, 0.3, 1 ) backwards;
}

.crefao-anim .crefao-hero-home__content > :nth-child( 2 ),
.crefao-anim .crefao-hero__content-inner > :nth-child( 2 ) { animation-delay: 0.13s; }

.crefao-anim .crefao-hero-home__content > :nth-child( 3 ),
.crefao-anim .crefao-hero__content-inner > :nth-child( 3 ) { animation-delay: 0.26s; }

.crefao-anim .crefao-hero-home__content > :nth-child( 4 ),
.crefao-anim .crefao-hero__content-inner > :nth-child( 4 ) { animation-delay: 0.39s; }

/* Visuels : fondu simple. Pas d'échelle sur l'image — .crefao-hero__media n'est
   pas en overflow:hidden (le carré rouge déborde volontairement à gauche), elle
   empiéterait sur la colonne de texte. */
.crefao-anim .crefao-hero__image,
.crefao-anim .crefao-hero-home__media {
	animation: crefao-fondu 1.1s ease 0.15s backwards;
}

/* --- Menu principal : soulignement qui se déploie --- */
.crefao-menu--primary a {
	position: relative;
}

.crefao-menu--primary a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--crefao-orange);
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 0.3s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.crefao-menu--primary a:hover::before,
.crefao-menu--primary a:focus-visible::before,
.crefao-menu--primary .current-menu-item > a::before {
	transform: scaleX( 1 );
}

/* Le chevron des sous-menus ne doit pas hériter du soulignement. */
.crefao-menu--primary .sub-menu a::before {
	content: none;
}

/* --- Cartes article : léger soulèvement, sans ombre --- */
.crefao-article-card__link {
	transition: transform 0.35s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.crefao-article-card__link:hover,
.crefao-article-card__link:focus-visible {
	transform: translateY( -6px );
}

.crefao-article-card__arrow {
	transition: background-color 0.2s ease, transform 0.35s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.crefao-article-card__link:hover .crefao-article-card__arrow {
	transform: translateX( 6px );
}

/* --- Boutons à flèche : la flèche avance --- */
.crefao-cta-box__button svg,
.crefao-hero-home__button svg,
.crefao-cta__button svg {
	transition: transform 0.3s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.crefao-cta-box__button:hover svg,
.crefao-hero-home__button:hover svg,
.crefao-cta__button:hover svg {
	transform: translateX( 5px );
}

/* Sur les boutons de téléchargement, la flèche descend au lieu d'avancer. */
.crefao-hero-home__button:hover svg {
	transform: translateY( 3px );
}

/* --- Lignes de documents et de ressources : décalage au survol --- */
.crefao-doclist__link,
.crefao-ressources__link {
	transition: transform 0.25s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.crefao-doclist__link:hover,
.crefao-doclist__link:focus-visible,
.crefao-ressources__link:hover,
.crefao-ressources__link:focus-visible {
	transform: translateX( 6px );
}

.crefao-doclist__icon,
.crefao-ressources__icon {
	transition: transform 0.25s ease, background-color 0.2s ease;
}

.crefao-doclist__link:hover .crefao-doclist__icon,
.crefao-ressources__link:hover .crefao-ressources__icon {
	transform: scale( 1.12 );
}

/* --- Sélecteur de cartes PDF : onglets et aperçu --- */

/* Onglets : la carte survolée ou active avance légèrement. */
.crefao-affichage-carte__card {
	transition: background-color 0.25s ease, transform 0.3s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.crefao-affichage-carte__card:hover,
.crefao-affichage-carte__card:focus-visible {
	transform: translateX( 6px );
}

/* La sélection ne décale qu'en desktop : en dessous de 1025px, « is-active »
   n'a plus de sens visuel, c'est l'ouverture du panneau qui marque la carte. */
@media ( min-width: 1025px ) {
	.crefao-affichage-carte__card.is-active {
		transform: translateX( 6px );
	}
}

@media ( max-width: 1024px ) {
	.crefao-affichage-carte__card[aria-expanded="true"] {
		transform: translateX( 6px );
	}
}

.crefao-affichage-carte__card .crefao-card__bar {
	transition: background-color 0.25s ease;
}

/* Aperçu : fondu enchaîné au changement de carte. La nouvelle image est
   préchargée par le script, le fondu sortant n'expose donc jamais de vide. */
.crefao-affichage-carte__image,
.crefao-affichage-carte__name {
	transition: opacity 0.3s ease, transform 0.45s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.crefao-affichage-carte__image.is-swapping {
	opacity: 0;
	transform: scale( 0.985 );
}

.crefao-affichage-carte__name.is-swapping {
	opacity: 0;
	transform: translateY( 6px );
}

/* Panneaux mobiles : ouverture en glissé. La fermeture reste immédiate,
   l'attribut hidden ne se laissant pas animer. */
@keyframes crefao-panneau {
	from { opacity: 0; transform: translateY( -10px ); }
	to   { opacity: 1; transform: none; }
}

.crefao-anim .crefao-affichage-carte__panel:not( [hidden] ) {
	animation: crefao-panneau 0.35s cubic-bezier( 0.16, 1, 0.3, 1 );
}

/* --- Focus clavier visible et cohérent --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--crefao-orange);
	outline-offset: 3px;
}

/* --- Défilement fluide vers les ancres --- */
.crefao-anim {
	scroll-behavior: smooth;
}

/* --- Garde-fou : aucune animation si l'utilisateur n'en veut pas --- */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ========================================================================
   Styles personnalisés du thème CREFAO
   Ajoutez vos règles CSS ci-dessous.
   ======================================================================== */