/* =========================================================
   Blocs ACF Gutenberg — TheLittleBig
   Réutilise les tokens :root et les classes charte de style.css
   (.bandes, .btn, .newsletter-home, .wrap…). Styles spécifiques ici.
   ========================================================= */

.acf-block { position: relative; }

/* Padding horizontal du conteneur de contenu (les blocs ne collent jamais aux bords) */
.acf-block .wrap { padding-left: 32px; padding-right: 32px; }

/* ---- Bloc TITRE DE SECTION ---- */
.block-titre-section
{
	padding: 0;
}

/* Bandes de titre de page : barres 14px (largeur 114) mais courtes (47px), collées au header */
.block-titre-section h2.bandes,
.block-titre-section h1.bandes { padding-top: 67px; }
.block-titre-section h2.bandes:before,
.block-titre-section h1.bandes:before { width: 114px; height: 47px; background-image: url(../images/bandes-titre.svg); background-size: 114px 47px; }

.block-titre-section h1.bandes .t-lg { line-height: 0.7; }

/* Sous-titre : filet violet + texte Poppins SemiBold */
.block-titre-section .ts-soustitre
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-top: 36px;
}
.block-titre-section .ts-soustitre .filet { width: 110px; height: 2px; background: var(--violet); }
.block-titre-section .ts-soustitre p
{
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 40px;
	line-height: 1.1;
	color: var(--violet);
	text-align: center;
}

.block-titre-section.fond-fonce
{
	background: var(--violet);
}

.block-titre-section.fond-fonce h1.bandes,
.block-titre-section.fond-fonce h2.bandes
{
	color: var(--beige);
}

.block-titre-section .intro
{
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	color: var(--violet);
}

.block-titre-section.fond-fonce .intro,
.block-titre-section.fond-fonce .intro p
{
	color: var(--beige);
}

/* ---- Bloc BANNIÈRE ---- */
.block-banniere
{
	padding: 0;
}

.block-banniere .banniere-img
{
	display: block;
	width: 100%;
	max-width: 1248px;
	margin: 0 auto;
	height: auto;
	border-radius: 30px;
}

/* Badge incrusté sur la bannière (certification, label). Position et taille en
   POURCENTAGES de l'image : le badge garde sa place quelle que soit la largeur
   d'écran. Les trois valeurs sont exposées en variables pour se régler sans
   toucher à la règle.
   Placement retenu : en bas à droite, à l'intérieur de l'image et à distance
   égale des deux bords (environ 6 %). C'est la zone la plus calme du motif —
   le ruban multicolore descend au centre — et la place attendue d'un label de
   certification. Le débrief le montrait au centre-haut, mais il y chevauchait
   le ruban et débordait du cadre. */
.block-banniere .banniere-media
{
	position: relative;
	width: 100%;
	max-width: 1248px;
	margin: 0 auto;
	--badge-x: 88.5%;
	--badge-y: 77.5%;
	--badge-taille: 11.5%;
}

.block-banniere .banniere-badge
{
	position: absolute;
	left: var(--badge-x);
	top: var(--badge-y);
	width: var(--badge-taille);
	min-width: 76px;
	max-width: 160px;
	height: auto;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Sous 900px la bannière se rétrécit vite : à 11,5 % le badge tomberait sous les
   40px et son texte deviendrait illisible. On le remonte à 22 %, avec un plancher
   de 76px — et comme ce plancher peut le rendre plus large que le pourcentage
   prévu, on l'accroche ici au coin en pixels plutôt qu'en pourcentages, sans quoi
   il déborderait de l'image sur les petites largeurs. */
@media (max-width: 900px)
{
	.block-banniere .banniere-media { --badge-taille: 22%; }

	.block-banniere .banniere-badge
	{
		left: auto;
		top: auto;
		right: 14px;
		bottom: 14px;
		transform: none;
	}
}


/* Espace entre l'en-tête (sous-titre) et l'image principale qui suit */
.block-titre-section + .block-banniere { margin-top: 20px; }

/* ---- Bloc CONTENU (texte riche charte) ---- */
.block-contenu
{
	padding: 34px 0 0;
}

.block-contenu .rte
{
	max-width: 720px;
	margin: 0 auto;
	color: var(--violet);
	font-family: var(--font-body);
}

.block-contenu .rte h2,
.block-contenu .rte h3
{
	font-family: var(--font-title);
	font-weight: 300;
	color: var(--violet);
	line-height: 1.1;
	margin-bottom: 16px;
}

.block-contenu .rte h2 { font-size: 30px; }
.block-contenu .rte h3 { font-size: 22px; }

.block-contenu .rte p
{
	color: var(--violet);
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 26px;
}
.block-contenu .rte p:last-child { margin-bottom: 0; }

/* Sous-titre courant (Poppins SemiBold 24) */
.block-contenu .rte p.sous
{
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	padding-bottom: 0;
}

/* Paragraphes mis en exergue (filet saumon + gras) : classe .exergue sur le <p> */
/* Exergue = filet saumon + retrait. Le GRAS ne vient plus d'ici : il est porté
   par les <strong> du contenu, car il est partiel et jamais appliqué au paragraphe
   entier. Idem pour l'ancienne classe .fort, supprimée. */
.block-contenu .rte p.exergue
{
	position: relative;
	padding-left: 26px;
	padding-bottom: 0;
}

.block-contenu .rte p.exergue:before
{
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 6px;
	background: var(--saumon);
}

/* Titre de fin de contenu (avant la grille) : tiret multicolore + Poppins SemiBold 44, aligné à gauche */
.block-contenu .rte p.fin-titre
{
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 44px;
	line-height: 46px;
	text-align: left;
	margin-top: 8px;
}
.block-contenu .rte p.fin-titre:before
{
	content: '';
	display: block;
	width: 84px;
	height: 4px;
	margin-bottom: 24px;
	background: url(../images/tiret-multicolor.svg) no-repeat left center;
	background-size: 84px 4px;
}

/* ---- Bloc GRILLE DE CARTES ---- */
.block-grille-cartes
{
	background: var(--beige);
	padding: 40px 0 90px;
	margin-top: 40px;
}

/* Titre de grille (aligné à gauche, tiret au-dessus) — si présent */
.block-grille-cartes .grille-titre
{
	text-align: left;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 44px;
	line-height: 46px;
	color: var(--violet);
	max-width: 1246px;
	margin: 0 auto 40px;
}

.block-grille-cartes .cartes
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1246px;
	margin: 0 auto;
}

.block-grille-cartes .carte
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	aspect-ratio: 1 / 1;
	padding: 0 26px;
	border-radius: 21%;
	background-color: var(--violet);
	background-image: url(../images/expertises/card-swirl.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: var(--beige);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.25s ease;
}

a.carte:hover { transform: translateY(-6px); }

.block-grille-cartes .carte.carte-violet { background-color: #3f266c; }
.block-grille-cartes .carte.carte-fonce  { background-color: #2a1052; }

/* Bandes multicolores (SVG) collées en haut / en bas — haut courtes, bas hautes */
.block-grille-cartes .carte-bandes
{
	position: relative;
	z-index: 1;
	display: block;
	line-height: 0;
}

.block-grille-cartes .carte-bandes img { display: block; width: auto; }
.block-grille-cartes .carte-bandes-haut img { height: 13px; }
.block-grille-cartes .carte-bandes-bas  img { height: 49px; }

/* Corps centré : picto + titre + texte + flèche */
.block-grille-cartes .carte-body
{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
	text-align: center;
}

.block-grille-cartes .carte-picto
{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 90px;
}

.block-grille-cartes .carte-picto img { display: block; max-height: 90px; width: auto; }

/* Espacements spécifiques (Figma = 20px entre boîtes rognées via text-box-trim ;
   ici compensés du leading propre à chaque élément pour 20px visibles cap-à-cap) */
.block-grille-cartes .carte h3
{
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 32px;
	line-height: 36px;
	color: var(--beige);
	margin: 13px 0 0; /* picto -> titre */
}

.block-grille-cartes .carte p
{
	font-size: 14px;
	line-height: 22px;
	color: var(--beige);
	max-width: 328px;
	margin: 7px 0 0; /* titre -> texte */
}

.block-grille-cartes .carte-fleche
{
	margin-top: 15px; /* texte -> flèche */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 33px;
	border: 1px solid #fff;
	border-radius: 100px;
}

.block-grille-cartes .carte-fleche img { display: block; width: 17px; height: auto; transform: scaleX(-1); }

/* ---- Bloc NEWSLETTER (réutilise .newsletter-home) ---- */
.block-newsletter .newsletter-home { /* hérite de style.css */ }

/* =========================================================
   Responsive blocs
   ========================================================= */
@media (max-width: 900px)
{
	.block-titre-section { padding: 56px 0 6px; }

	.block-grille-cartes
	{
		padding: 50px 0 70px;
	}

	/* Tablette : 2 colonnes (cartes carrées, contenu identique au desktop) */
	.block-grille-cartes .cartes
	{
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.block-grille-cartes .grille-titre
	{
		font-size: 28px;
		margin-bottom: 36px;
	}

	.block-banniere .banniere-img { border-radius: 20px; }
}

/* Mobile : 1 colonne, cartes carrées pleine largeur (Figma 8419:28298) */
@media (max-width: 600px)
{
	.block-grille-cartes .wrap { padding-left: 20px; padding-right: 20px; }

	.block-grille-cartes .cartes { grid-template-columns: 1fr; gap: 20px; }

	/* Hauteur auto (le carré strict ne tient pas sous ~360px de large) ; bandes collées */
	.block-grille-cartes .carte
	{
		aspect-ratio: auto;
		row-gap: 30px;
		padding: 0 26px;
	}

	.block-grille-cartes .carte p { font-size: 13px; line-height: 20.9px; }
}

/* =========================================================
   Bloc TEXTE + MÉDIA
   ========================================================= */
.block-texte-media { padding: 40px 0; }
.block-texte-media.fond-fonce { background: var(--violet); }

.block-texte-media .tm-ligne
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin-bottom: 40px;
}
.block-texte-media .tm-ligne:last-child { margin-bottom: 0; }
.block-texte-media .tm-media-droite { flex-direction: row-reverse; }

.block-texte-media .tm-media { flex: 0 0 528px; max-width: 528px; }
.block-texte-media .tm-media img { width: 100%; height: auto; display: block; border-radius: 40px; }
.block-texte-media .tm-media-ph { display: block; width: 100%; aspect-ratio: 528 / 331; border-radius: 40px; background: var(--mauve); }

/* Colonne texte : largeur 480, hauteur contrainte à celle de l'image (réglée en JS) */
.block-texte-media .tm-txt
{
	flex: 0 0 480px;
	max-width: 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.block-texte-media .tm-txt .tiret
{
	display: block;
	flex: none;
	width: 84px;
	height: 4px;
	margin-bottom: 30px;
	background: url(../images/tiret-multicolor.svg) no-repeat left center;
	background-size: 84px 4px;
}
.block-texte-media .tm-txt h2
{
	font-family: var(--font-title);
	font-weight: 600 !important; /* bat la règle #content h2 (weight 300) */
	font-size: 24px;
	line-height: 26px;
	color: var(--violet);
	margin: 0 0 30px;
}
.block-texte-media .tm-txt h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 700; }
.block-texte-media .tm-txt .tm-rte,
.block-texte-media .tm-txt .tm-rte p { color: var(--violet); font-size: 16px; line-height: 26px; }
.block-texte-media .tm-txt .tm-rte p { margin: 0 0 12px; }
.block-texte-media .tm-txt .tm-rte p:last-child { margin-bottom: 0; }

/* Lien « Plus » (saumon) + repli du texte à la hauteur de l'image */
.block-texte-media .tm-rte { position: relative; flex: 1 1 auto; min-height: 0; }
.block-texte-media .tm-ligne.is-clamped .tm-rte { overflow: hidden; }
.block-texte-media .tm-ligne.is-clamped.is-open .tm-rte { overflow: visible; }
.block-texte-media .tm-ligne.is-clamped:not(.is-open) .tm-rte::after
{
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 52px;
	background: linear-gradient(to bottom, rgba(246,237,229,0), var(--beige));
	pointer-events: none;
}
.block-texte-media .tm-plus
{
	display: none;
	align-self: flex-start;
	margin-top: 6px;
	padding: 0;
	border: none;
	background: none;
	color: var(--saumon);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 26px;
	cursor: pointer;
}
.block-texte-media .tm-ligne.is-clamped .tm-plus { display: inline-block; }

.block-texte-media.fond-fonce .tm-txt h2,
.block-texte-media.fond-fonce .tm-txt .tm-rte,
.block-texte-media.fond-fonce .tm-txt .tm-rte p { color: var(--beige); }
.block-texte-media.fond-fonce .tm-ligne.is-clamped:not(.is-open) .tm-rte::after { background: linear-gradient(to bottom, rgba(63,38,108,0), var(--violet)); }

/* =========================================================
   Bloc LOGOS / partenaires
   ========================================================= */
.block-logos { padding: 0 0 100px; }
.block-logos.fond-fonce { background: var(--violet); }
.block-logos.fond-fonce h2.bandes { color: #fff !important; }
.block-logos.fond-clair { background: var(--mauve); }
/* Fond mauve : titre en beige (#F6EDE5), relevé au pixel sur la maquette
   « Titre etage » de la page Engagements. `!important` comme pour le fond foncé
   juste au-dessus : la règle héritée `body.page-template-default #content h2`
   (style.css) porte un ID et l'emporterait sinon sur ce sélecteur de bloc. */
.block-logos.fond-clair h2.bandes { color: var(--beige) !important; }

.block-logos .logos-card
{
	position: relative;
	max-width: 1274px;
	margin: 50px auto 0;
}

/* Carte beige (au-dessus des flèches, qui dépassent à moitié des bords) */
.block-logos .logos-card-inner
{
	position: relative;
	z-index: 1;
	background: var(--beige);
	border-radius: 40px;
	height: 302px;
	padding: 0 50px;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.block-logos .logos-swiper { width: 100%; }
/* width auto : chaque slide fait la largeur de son logo (slidesPerView:'auto' côté
   Swiper). Des slides de largeur égale creusaient de grands vides autour des logos
   étroits. */
.block-logos .logo-item
{
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 302px;
	width: auto;
	flex-shrink: 0;
}
.block-logos .logo-item a { display: block; }
/* --logo-h est calculé par le template (surface apparente constante) ; 72px sert de
   repli si l'image n'a pas de dimensions connues. Le plafond est plus haut que la
   valeur maximale calculée automatiquement (100px) : il ne doit brider que les cas
   aberrants, pas le réglage manuel « Taille (%) » posé sur un logo. */
.block-logos .logo-item img
{
	height: calc(var(--logo-h, 72) * 1px);
	width: auto;
	max-width: 300px;
	max-height: 132px;
	object-fit: contain;
	display: block;
}

/* Variante « grands logos » (classe additionnelle `logos-grands`) : le template
   vise une surface apparente 1,85× plus grande, il faut relever les plafonds sinon
   les logos panoramiques restent bridés par max-width/max-height. */
.block-logos.logos-grands .logo-item img { max-width: 340px; max-height: 150px; }

/* Flèches saumon : centrées sur les bords gauche/droite, derrière la carte (moitié visible) */
.block-logos .logos-nav
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
	width: 55.5px;
	height: 55.5px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}
.block-logos .logos-prev { left: -28px; }
.block-logos .logos-next { right: -28px; }
.block-logos .logos-nav img { display: block; width: 100%; height: 100%; }
/* Orientation : flèche de base diagonale (↗) → gauche (prev) / droite (next) */
.block-logos .logos-prev img { transform: rotate(-135deg); }
.block-logos .logos-next img { transform: rotate(45deg); }
.block-logos .logos-nav.swiper-button-disabled { opacity: 0.35; cursor: default; }
/* Bande statique (peu de logos, aucune répétition : cf. main.js) : les logos sont
   centrés dans la carte et les flèches n'ont plus lieu d'être. `swiper-button-lock`
   est posée par Swiper quand tous les slides tiennent dans la vue. */
.block-logos .logos-statique .logos-nav,
.block-logos .logos-nav.swiper-button-lock { display: none; }
.block-logos .logos-statique .swiper-wrapper
{
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px 50px;
	transform: none !important;
}
/* Bande statique qui passe sur plusieurs lignes (carte etroite, mobile) : chaque
   slide mesure 302px de haut — la hauteur de la carte —, donc dès qu'elle wrappe,
   les lignes suivantes tombent hors du `overflow: hidden` et disparaissent. La
   hauteur de la carte devient un minimum, celle des slides s'ajuste au logo. */
.block-logos .logos-statique .logo-item { height: auto; }
.block-logos .logos-statique .logos-card-inner
{
	height: auto;
	min-height: 302px;
	padding-top: 32px;
	padding-bottom: 32px;
}

/* =========================================================
   Bloc CONTACT (formulaire CF7)
   ========================================================= */
.block-contact { background: var(--beige); padding: 0 0 110px; }
.block-contact .block-contact-form { max-width: 1200px; margin: 0 auto; padding: 0 50px; }

/* Grille 3 colonnes : nom | prénom | email, puis message pleine largeur */
.block-contact .wpcf7-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 56px; }
.block-contact .wpcf7-form br { display: none; }
.block-contact .champ { display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }
.block-contact .champ.f-message { grid-column: 1 / -1; }
.block-contact .champ label { color: var(--violet); font-family: var(--font-body); font-size: 16px; line-height: 1; }
.block-contact .champ-submit { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 4px; }
/* Centrer le bouton Envoyer : sortir le spinner CF7 du flux (sinon il décale le centrage du <p>) */
.block-contact .champ-submit p { margin: 0; position: relative; }
.block-contact .champ-submit .wpcf7-spinner { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); margin-left: 12px; }
/* Titre « On reste en / contact » resserré */
.block-contact .bandes .t-sm { line-height: 0.6; }
.block-contact .wpcf7-form-control-wrap { display: block; }

.block-contact input[type="text"],
.block-contact input[type="email"],
.block-contact textarea
{
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--violet);
	border-radius: 0;
	padding: 6px 0;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--violet);
	outline: none;
}
.block-contact textarea { resize: vertical; height: 44px; min-height: 44px; }
.block-contact .wpcf7-submit
{
	display: inline-flex;
	align-items: center;
	height: 50px;
	padding: 0 32px;
	background: var(--violet);
	color: var(--blanc);
	border: none;
	border-radius: 100px;
	font-family: var(--font-body);
	font-size: 16px;
	cursor: pointer;
	transition: 0.2s all ease-in-out;
}
.block-contact .wpcf7-submit:hover { background: var(--mauve); color: var(--violet-fonce); }

/* =========================================================
   Responsive — blocs texte-media / logos / contact
   ========================================================= */
@media (max-width: 900px)
{
	.block-texte-media .tm-ligne,
	.block-texte-media .tm-media-droite
	{
		flex-direction: column;
		gap: 24px;
		margin-bottom: 32px;
	}
	.block-texte-media .tm-media { flex: none; width: 100%; max-width: none; }

	.block-logos { padding: 50px 0 70px; }
	.block-logos .logos-card { height: auto; padding: 28px 24px; gap: 24px 28px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
	.block-logos .logo-item img { height: calc(var(--logo-h, 72) * 0.62px); max-height: 82px; max-width: 186px; }
	.block-logos.logos-grands .logo-item img { max-height: 92px; max-width: 210px; }
	/* Flèches : l'image est un chevron tourné à 45°, donc sa boîte réelle mesure la
	   DIAGONALE du bouton (55,5 × √2 ≈ 78px). À -28px sur une carte qui n'a que 32px
	   de marge, les pointes sortaient du viewport et déclenchaient le shrink-to-fit
	   de Chrome mobile (page rendue à 94 %). */
	.block-logos .logos-prev { left: -16px; }
	.block-logos .logos-next { right: -16px; }
	/* Bande statique : sans flèches, la carte n'a plus besoin de ses 50px de
	   respiration latérale — sur 375px ils faisaient passer 2 logos sur 2 lignes. */
	.block-logos .logos-statique .logos-card-inner { padding: 0 20px; }
	.block-logos .logos-statique .swiper-wrapper { gap: 20px 28px; }

	.block-contact { padding: 50px 0 70px; }
	.block-contact .block-contact-form { padding: 0 20px; }
	.block-contact .wpcf7-form { grid-template-columns: 1fr; gap: 0; }
	.block-contact .champ { margin-bottom: 24px; }
}

/* Contenu centré (ex. « Une vision responsable et durable ») */
.block-contenu.txt-center .rte { text-align: center; max-width: 820px; }
.block-contenu.txt-center .rte h2 { font-weight: 400; }

/* Titre avec tiret multicolore au-dessus (dans un bloc contenu) */
.block-contenu .rte h2.av-tiret { position: relative; padding-top: 24px; }
.block-contenu .rte h2.av-tiret:before
{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 84px;
	height: 4px;
	background: url(../images/tiret-multicolor.svg) no-repeat left center;
	background-size: 84px 4px;
}
.block-contenu .rte h2.av-tiret em { font-family: var(--font-serif); font-style: italic; font-weight: 700; }
/* CTA centré dans un bloc contenu */
.block-contenu .rte .cta-center { text-align: center; margin-top: 30px; }

/* =========================================================
   Bloc HERO (home) — hérite de .hero (style.css, dé-scopé)
   Bloc RÉALISATIONS (sélection) — bandes + bento + bouton
   ========================================================= */
.block-realisations { background: var(--beige); padding: 0 0 84px; }
.block-realisations .texte,
.block-realisations .texte p { color: var(--violet); text-align: center; margin-bottom: 30px; }
.block-realisations .realisations-grid { margin-top: 80px; }

@media (max-width: 900px) {
	.block-realisations { padding: 50px 0 60px; }
}

/* =========================================================
   PAGE DÉTAIL EXPERTISE — hero (grand carré) + texte + CTA
   ========================================================= */
.block-expertise-hero { padding: 30px 0 0; }
.block-expertise-hero .exh-nav
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1248px;
	margin: 0 auto 10px;
	padding: 0 40px; /* boutons en recul par rapport au bord de l'image */
}
.block-expertise-hero .exh-nav a
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--violet);
}
.block-expertise-hero .exh-nav .fleche
{
	display: inline-block;
	width: 52px;
	height: 32px;
	border: 1px solid var(--violet);
	border-radius: 200px;
	background: url(../images/fleche-violet.svg) no-repeat center center;
	background-size: 16px auto;
}
.block-expertise-hero .exh-nav .fleche-next { transform: scaleX(-1); }
.block-expertise-hero .exh-card
{
	position: relative;
	max-width: 1248px;
	margin: 0 auto;
	aspect-ratio: 1248 / 640;
	border-radius: 90px;
	overflow: hidden;
	background-color: #3f266c;
	background-image: url(../images/hero.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0 26px;
}
.block-expertise-hero .carte-bandes { position: relative; z-index: 1; line-height: 0; }
.block-expertise-hero .carte-bandes img { display: block; width: auto; }
.block-expertise-hero .carte-bandes-haut img { height: 13px; }
.block-expertise-hero .carte-bandes-bas img { height: 49px; }
.block-expertise-hero .exh-inner
{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}
.block-expertise-hero .exh-picto img { height: 200px; width: auto; display: block; }
.block-expertise-hero .exh-titre
{
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 60px;
	line-height: 67px;
	color: var(--beige);
	margin: 0;
}

/* Texte de l'expertise : 720px centré, exergues = filet VIOLET à gauche */
.block-contenu.expertise-texte { padding-top: 60px; }
.block-contenu.expertise-texte .rte .lead { font-family: var(--font-body); font-weight: 700; font-size: 22px; line-height: 32px; color: var(--violet); }
.block-contenu.expertise-texte .rte p.exergue:before { background: var(--saumon); }

/* Bloc CTA (titre + 3 flèches + bouton) */
.block-cta { padding: 30px 20px 80px; }
.block-cta .cta-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.block-cta .cta-titre { font-family: var(--font-title); font-weight: 600 !important; /* bat #content h2 (weight 300) */ font-size: 24px; line-height: 26px; color: var(--violet); margin: 0; }
.block-cta .cta-fleches img { display: block; width: 132px; height: auto; }
.block-cta .cta-btn
{
	display: inline-flex; align-items: center; justify-content: center;
	height: 50px; padding: 0 32px; border-radius: 100px;
	background: var(--violet); color: var(--blanc);
	font-family: var(--font-body); font-size: 16px;
	transition: 0.2s all ease-in-out;
}
.block-cta .cta-btn:hover { background: var(--mauve); color: var(--violet-fonce); }

@media (max-width: 900px)
{
	.block-expertise-hero { padding: 20px 20px 0; }
	.block-expertise-hero .exh-nav { display: none; } /* la maquette mobile ne montre pas Retour/Suivant */
	.block-expertise-hero .exh-titre { font-size: 32px; line-height: 1.1; }
	.block-expertise-hero .exh-picto img { height: 110px; }
	.block-expertise-hero .exh-inner { gap: 16px; }
	.block-expertise-hero .exh-card { border-radius: 40px; aspect-ratio: 1 / 1; padding: 0 24px; }
}

/* =========================================================
   PAGE BIARRITZ — petite image (colonne gauche) + texte 723
   ========================================================= */
.block-contenu.biarritz-texte .rte
{
	position: relative;
	max-width: 1248px;
	padding-left: 390px;
}
.block-contenu.biarritz-texte .rte .bia-petite
{
	position: absolute;
	left: 0;
	top: 6px;
	width: 350px;
	height: auto;
	border-radius: 40px;
	display: block;
}
/* Exergues saumon (rouge charte, comme la maquette Biarritz) */
.block-contenu.biarritz-texte .rte p.exergue:before { background: var(--saumon); }
/* Chapô (1er paragraphe après le titre) en gras, comme la maquette */
.block-contenu.biarritz-texte .rte h2:first-of-type + p { font-weight: 700; }
/* Titres de section (44 SemiBold, nom de ville en Playfair italic 48) — maquette Biarritz/Paris */
.block-contenu.biarritz-texte .rte h2.av-tiret { font-size: 44px; line-height: 46px; font-weight: 600 !important; }
.block-contenu.biarritz-texte .rte h2.av-tiret em { font-size: 48px; }
@media (max-width: 900px)
{
	.block-contenu.biarritz-texte .rte { padding-left: 0; max-width: 720px; }
	.block-contenu.biarritz-texte .rte .bia-petite { position: static; width: 100%; max-width: 350px; margin: 0 0 24px; }
}