/*
Theme Name: Cabinet IGC
Theme URI: https://cabinet-igc.com/
Author: Gemeos Agency
Author URI: https://gemeosagency.com/
Description: Le thème donne au site son apparence : les couleurs, les polices, les espacements et la façon dont les pages sont structurées. Il ne contient ni les textes ni les images du site, qui se gèrent depuis le menu de gauche. Toutes les valeurs de style viennent d'un seul fichier, ce qui garantit qu'une couleur ou un espacement reste le même partout. Les rubriques Guides, Glossaire, Programmes et Offres ne viennent pas du thème mais de l'extension Contenus, qui doit rester activée.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.00.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cabinet-igc
Tags: full-site-editing, block-theme, blog
*/

/*
  Ce fichier ne contient QUE ce que theme.json ne sait pas exprimer :
  hauteurs fixes, line-height responsive, backdrop-filter, pseudo-éléments.
  Aucune couleur ni espacement en dur — tout passe par les variables de presets.
*/

/* ---------------------------------------------------------------
   0. Transitions — une seule courbe pour tout le site

   Le survol changeait d'état sèchement à 26 endroits : la liste des
   offres, les étiquettes, la pagination, les onglets, le sommaire.
   Chacun aurait pu recevoir sa transition, mais autant en poser une
   seule, à spécificité nulle, que tout composant peut remplacer.

   `:where()` ne pèse rien dans le calcul : les animations déjà
   réglées finement — la pastille des boutons, le dépliage des étapes —
   gardent leurs propres durées.

   On n'anime que ce qui change au survol : fond, texte, bordure,
   opacité. Pas `transform`, qui appartient aux composants qui le
   mettent en scène et qui déclarent leur propre courbe.
   --------------------------------------------------------------- */

:root {
	--igc-duree: 240ms;
	--igc-courbe: cubic-bezier(0.22, 0.61, 0.24, 1);
}

@media (prefers-reduced-motion: no-preference) {

	:where(a, button, summary, label, .igc-card, .igc-solution, .igc-programme, .igc-etape, .igc-offre-ligne, [role="button"]) {
		transition:
			background-color var(--igc-duree) var(--igc-courbe),
			border-color var(--igc-duree) var(--igc-courbe),
			color var(--igc-duree) var(--igc-courbe),
			opacity var(--igc-duree) var(--igc-courbe);
	}
}

/* ---------------------------------------------------------------
   1. Line-height responsive
      theme.json gère la taille fluide mais pas le line-height fluide.
      Valeurs issues du UI Kit, section Mobile/Heading.
   --------------------------------------------------------------- */
@media (max-width: 781px) {

	h1,
	.has-heading-1-font-size {
		line-height: 1.2;
		letter-spacing: -0.04em;
	}

	h2,
	.has-heading-2-font-size {
		line-height: 1.2;
		letter-spacing: -0.04em;
	}

	h3,
	.has-heading-3-font-size {
		line-height: 1.2;
		letter-spacing: -0.02em;
	}

	h4,
	.has-heading-4-font-size {
		line-height: 1.2;
		letter-spacing: -0.01em;
	}
}

/* ---------------------------------------------------------------
   2. Boutons — géométrie commune, hauteur 48px (Figma 24551:39)
   --------------------------------------------------------------- */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 48px;
}

/* Bouton principal : fond bleu-100 + pastille blanche de 8px. */
.wp-block-button.is-style-igc-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--bleu-100);
	color: var(--wp--preset--color--neutral-0);
}

/* Bouton blanc sur fond sombre (panneaux d'onglets, Figma 24568:1925).
   La pastille suit currentColor et devient donc sombre d'elle-même. */
.wp-block-button.is-style-igc-invert .wp-block-button__link {
	background-color: var(--wp--preset--color--neutral-0);
	color: var(--wp--preset--color--neutral-100);
}

/* ---- Pastille des boutons, et son relais au survol ----

   Au repos : une pastille à droite du libellé, exactement comme au Figma.
   Au survol : elle s'échappe par la droite pendant qu'une seconde arrive par
   la gauche, le libellé glissant entre les deux. Trois mouvements décalés,
   c'est ce décalage qui rend le geste lisible plutôt que simultané.

   Les deux pastilles sont les pseudo-éléments du lien ; le libellé est
   enveloppé dans un <span> par un filtre du thème, un nœud de texte nu ne
   pouvant pas être transformé.

   Le glissement vaut le diamètre de la pastille plus l'écart : c'est
   précisément la place qu'elle occupait. Toute autre valeur décalerait le mot
   par rapport à sa position d'arrivée, et l'œil le voit. */

/* Les quatre styles partagent ces mesures : le secondaire accueille la même
   pastille au survol, il lui faut le même vocabulaire. Les déclarer sur le seul
   bouton principal les rendait inaccessibles aux autres, et les `calc` qui s'y
   référaient tombaient silencieusement. */
.wp-block-button.is-style-igc-primary .wp-block-button__link,
.wp-block-button.is-style-igc-invert .wp-block-button__link,
.wp-block-button.is-style-igc-glass .wp-block-button__link,
.wp-block-button.is-style-igc-glass-clair .wp-block-button__link {
	--igc-pastille: 8px;
	--igc-ecart: 12px;
	--igc-glisse: calc(var(--igc-pastille) + var(--igc-ecart));

	/* Le rembourrage horizontal du bouton et l'ancrage des deux pastilles sont
	   la même mesure : la pastille se pose au bord de la boîte de contenu.
	   Tant que les deux étaient écrits séparément, toucher au rembourrage
	   désalignait l'animation en silence. Une variable, pour qu'ils ne
	   puissent plus diverger — et pour que le palier mobile n'ait qu'un
	   chiffre à changer. La valeur est exactement celle qu'elle remplace. */
	--igc-marge: var(--wp--preset--spacing--20);

	position: relative;

	/* L'écart n'est plus une gouttière de flex : les pastilles sont sorties du
	   flux, c'est le rembourrage du libellé qui réserve leur place. */
	gap: 0;
	overflow: hidden;
	padding-inline: var(--igc-marge);
}

.wp-block-button.is-style-igc-primary .wp-block-button__link::before,
.wp-block-button.is-style-igc-primary .wp-block-button__link::after,
.wp-block-button.is-style-igc-invert .wp-block-button__link::before,
.wp-block-button.is-style-igc-invert .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	width: var(--igc-pastille);
	height: var(--igc-pastille);
	margin-top: calc(var(--igc-pastille) / -2);
	border-radius: 50%;
	background-color: currentColor;
}

/* Pastille sortante : posée à droite, au bord du rembourrage. */
.wp-block-button.is-style-igc-primary .wp-block-button__link::after,
.wp-block-button.is-style-igc-invert .wp-block-button__link::after {
	right: var(--igc-marge);
}

/* Pastille entrante : invisible et décalée à gauche tant qu'on ne survole
   pas. Sans animation, elle reste simplement absente. */
.wp-block-button.is-style-igc-primary .wp-block-button__link::before,
.wp-block-button.is-style-igc-invert .wp-block-button__link::before {
	left: var(--igc-marge);
	opacity: 0;
	transform: translateX(calc(var(--igc-glisse) * -1));
}

.igc-btn__label {
	padding-right: var(--igc-glisse);
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-button.is-style-igc-primary .wp-block-button__link::after,
	.wp-block-button.is-style-igc-invert .wp-block-button__link::after {
		transition:
			transform 240ms cubic-bezier(0.55, 0, 1, 0.45),
			opacity 200ms linear;
		will-change: transform, opacity;
	}

	.wp-block-button.is-style-igc-primary .wp-block-button__link::before,
	.wp-block-button.is-style-igc-invert .wp-block-button__link::before {
		transition:
			transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 160ms linear;
		will-change: transform, opacity;
	}

	.igc-btn__label {
		transform: translateX(0);
		transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
		will-change: transform;
	}

	/* La pastille sortante part la première et accélère ; le libellé suit ;
	   l'entrante arrive en dernier et décélère franchement — c'est ce
	   contraste qui donne le glissé. Environ 540ms en tout.

	   Le focus clavier déclenche la même séquence : sans cela, l'état actif
	   d'un bouton atteint au clavier ne se verrait pas. */
	.wp-block-button.is-style-igc-primary .wp-block-button__link:hover::after,
	.wp-block-button.is-style-igc-primary .wp-block-button__link:focus-visible::after,
	.wp-block-button.is-style-igc-invert .wp-block-button__link:hover::after,
	.wp-block-button.is-style-igc-invert .wp-block-button__link:focus-visible::after {
		transform: translateX(calc(var(--igc-marge) + var(--igc-pastille)));
		opacity: 0;
	}

	.wp-block-button.is-style-igc-primary .wp-block-button__link:hover .igc-btn__label,
	.wp-block-button.is-style-igc-primary .wp-block-button__link:focus-visible .igc-btn__label,
	.wp-block-button.is-style-igc-invert .wp-block-button__link:hover .igc-btn__label,
	.wp-block-button.is-style-igc-invert .wp-block-button__link:focus-visible .igc-btn__label {
		transform: translateX(var(--igc-glisse));
		transition-delay: 60ms;
	}

	.wp-block-button.is-style-igc-primary .wp-block-button__link:hover::before,
	.wp-block-button.is-style-igc-primary .wp-block-button__link:focus-visible::before,
	.wp-block-button.is-style-igc-invert .wp-block-button__link:hover::before,
	.wp-block-button.is-style-igc-invert .wp-block-button__link:focus-visible::before {
		transform: translateX(0);
		opacity: 1;
		transition-delay: 120ms;
	}
}

/* Sans survol — tactile —, la séquence se joue au doigt posé, moitié moins
   longue : un retour d'appui, pas une animation à contempler. */
@media (hover: none) {

	.wp-block-button.is-style-igc-primary .wp-block-button__link:active::after,
	.wp-block-button.is-style-igc-invert .wp-block-button__link:active::after {
		transform: translateX(calc(var(--igc-marge) + var(--igc-pastille)));
		opacity: 0;
		transition-duration: 120ms;
	}

	.wp-block-button.is-style-igc-primary .wp-block-button__link:active .igc-btn__label,
	.wp-block-button.is-style-igc-invert .wp-block-button__link:active .igc-btn__label {
		transform: translateX(var(--igc-glisse));
		transition-duration: 210ms;
		transition-delay: 30ms;
	}

	.wp-block-button.is-style-igc-primary .wp-block-button__link:active::before,
	.wp-block-button.is-style-igc-invert .wp-block-button__link:active::before {
		transform: translateX(0);
		opacity: 1;
		transition-duration: 210ms;
		transition-delay: 60ms;
	}
}

/* Carte translucide posée sur une image (Figma 24568:1891).

   La variante est déclarée pour `core/group`, d'où le sélecteur d'origine.
   Les blocs du thème qui rendent leur propre balisage — la carte de pilier —
   n'ont pas de `wp-block-group` à porter : on accepte donc la classe seule,
   sans quoi le verre ne prendrait pas et le texte blanc se retrouverait sur
   du transparent. */
.wp-block-group.is-style-igc-verre,
.igc-pilier__panneau.is-style-igc-verre {
	background-color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 30%, transparent);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

/* Même bouton translucide, mais posé sur une photo sombre : texte blanc
   (Figma 24551:938). */
.wp-block-button.is-style-igc-glass-clair .wp-block-button__link {
	background-color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 20%, transparent);
	color: var(--wp--preset--color--neutral-0);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* ---- Survol du bouton secondaire ----

   Le principal fait passer sa pastille d'un bord à l'autre : celle de droite
   sort, le libellé suit, une nouvelle entre par la gauche. Le secondaire n'en
   porte aucune au repos — la maquette n'en montre pas — mais il peut en
   accueillir une. C'est le même geste amputé de sa moitié sortante, et c'est
   déjà celui des lignes de dispositifs : la pastille arrive, le texte lui fait
   place.

   Le libellé réserve la moitié de l'écart de chaque côté plutôt que la
   totalité à droite comme le principal : sans pastille au repos, une réserve
   d'un seul côté décentrerait visiblement le texte. Le glissement vaut donc la
   moitié de celui du principal — ce qui va bien à une action secondaire. */

.wp-block-button.is-style-igc-glass .wp-block-button__link,
.wp-block-button.is-style-igc-glass-clair .wp-block-button__link {
	position: relative;
	overflow: hidden;
}

.wp-block-button.is-style-igc-glass .igc-btn__label,
.wp-block-button.is-style-igc-glass-clair .igc-btn__label {
	position: relative;
	padding-inline: calc(var(--igc-glisse) / 2);
}

/* La pastille entrante, absente tant qu'on ne survole pas. */
.wp-block-button.is-style-igc-glass .wp-block-button__link::before,
.wp-block-button.is-style-igc-glass-clair .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--igc-marge);
	width: var(--igc-pastille);
	height: var(--igc-pastille);
	margin-top: calc(var(--igc-pastille) / -2);
	border-radius: 50%;
	background-color: currentcolor;
	opacity: 0;
	transform: translateX(calc(var(--igc-glisse) * -1));
}

/* La surface répond aussi : le verre s'épaissit d'un cran. Le flou reste
   inchangé — l'augmenter fait vaciller le texte derrière. */
.wp-block-button.is-style-igc-glass .wp-block-button__link:hover,
.wp-block-button.is-style-igc-glass .wp-block-button__link:focus-visible,
.wp-block-button.is-style-igc-glass-clair .wp-block-button__link:hover,
.wp-block-button.is-style-igc-glass-clair .wp-block-button__link:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 30%, transparent);
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-button.is-style-igc-glass .wp-block-button__link,
	.wp-block-button.is-style-igc-glass-clair .wp-block-button__link {
		transition: background-color 200ms var(--igc-courbe);
	}

	.wp-block-button.is-style-igc-glass .wp-block-button__link::before,
	.wp-block-button.is-style-igc-glass-clair .wp-block-button__link::before {
		transition:
			transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 160ms linear;
	}

	.wp-block-button.is-style-igc-glass .igc-btn__label,
	.wp-block-button.is-style-igc-glass-clair .igc-btn__label {
		transform: translateX(0);
		transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
	}

	/* Le libellé part le premier, la pastille se pose derrière lui. */
	.wp-block-button.is-style-igc-glass .wp-block-button__link:hover .igc-btn__label,
	.wp-block-button.is-style-igc-glass .wp-block-button__link:focus-visible .igc-btn__label,
	.wp-block-button.is-style-igc-glass-clair .wp-block-button__link:hover .igc-btn__label,
	.wp-block-button.is-style-igc-glass-clair .wp-block-button__link:focus-visible .igc-btn__label {
		transform: translateX(calc(var(--igc-glisse) / 2));
	}

	.wp-block-button.is-style-igc-glass .wp-block-button__link:hover::before,
	.wp-block-button.is-style-igc-glass .wp-block-button__link:focus-visible::before,
	.wp-block-button.is-style-igc-glass-clair .wp-block-button__link:hover::before,
	.wp-block-button.is-style-igc-glass-clair .wp-block-button__link:focus-visible::before {
		transform: translateX(0);
		opacity: 1;
		transition-delay: 60ms;
	}
}

/* Au doigt, le même geste se joue à l'appui, deux fois plus court. */
@media (hover: none) {

	.wp-block-button.is-style-igc-glass .wp-block-button__link:active .igc-btn__label,
	.wp-block-button.is-style-igc-glass-clair .wp-block-button__link:active .igc-btn__label {
		transform: translateX(calc(var(--igc-glisse) / 2));
		transition-duration: 210ms;
	}

	.wp-block-button.is-style-igc-glass .wp-block-button__link:active::before,
	.wp-block-button.is-style-igc-glass-clair .wp-block-button__link:active::before {
		transform: translateX(0);
		opacity: 1;
		transition-duration: 210ms;
		transition-delay: 30ms;
	}
}

/* ---- Hero pleine largeur avec photo de fond (Figma 24551:925) ---- */

/* Le cadre du Figma fait 1416x740, soit 1,91. Une hauteur fixe le respecte à
   1440 et le perd partout ailleurs : à 2560 la boîte s'étire en 3,43 et la
   photo, qui reste en `cover`, se fait tailler le haut et le bas — les
   personnages sont coupés. C'est donc le rapport qu'on tient, pas la hauteur.

   Quatre valeurs, chacune pour une raison :
   - la largeur est fixée : sans elle, un `aspect-ratio` buté sur son plafond
     de hauteur rétrécit la boîte plutôt que de s'écarter du rapport, et le
     hero cesse d'être pleine largeur — 2342px dans un écran de 3440 ;
   - `aspect-ratio` reprend le cadre du Figma et suit la largeur ;
   - le plancher garde la hauteur dessinée sur les écrans plus étroits que la
     maquette, où le rapport donnerait une bande trop basse (les paliers plus
     bas le descendent à leur tour, avec le même raisonnement) ;
   - le plafond en `vh` empêche le hero d'avaler l'écran : sans lui, un 2560
     donnerait 1325px de haut et plus rien ne serait visible en dessous. Il
     laisse toujours voir le début de la section suivante. */
.igc-hero-photo {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	aspect-ratio: 1416 / 740;
	min-height: 740px;
	max-height: 85vh;
	padding: 56px;
	overflow: hidden;
	border-radius: 8px;
}

.igc-hero-photo > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-hero-photo > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile assombrissant côté texte : le Figma superpose une seconde photo
   masquée à 30 % de noir, non reproductible en blocs. Le dégradé rend le
   même service de lisibilité. */
.igc-hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, color-mix(in srgb, var(--wp--preset--color--neutral-100) 62%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--neutral-100) 18%, transparent) 46%, transparent 68%);
	pointer-events: none;
}

.igc-hero-photo > *:not(figure) {
	position: relative;
	z-index: 1;
	margin: 0;
}

.igc-hero-photo__texte {
	width: 517px;
	max-width: 100%;
}

/* ---- Hero d'un programme (Figma 24967:6435) ----

   Le même hero photo, mais à deux colonnes : le texte reste en bas à gauche et
   deux cartes de repère — le prix, la livraison — se calent en bas à droite.
   Elles sont l'essentiel de ce qu'un visiteur cherche en arrivant, d'où leur
   place avant même la première section. */

.igc-hero-photo--programme {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.igc-hero-photo--programme .igc-hero-photo__texte {
	width: 517px;
	max-width: 100%;
}

.igc-hero-chiffres {
	display: flex;
	flex: 0 0 397px;
	flex-direction: column;
	/* Les cartes remplissent la colonne : la mise en page en flex de WordPress
	   les calerait sinon sur leur contenu, et « Livraison » serait plus large
	   que « Prix à partir de ». */
	align-items: stretch;
	gap: 8px;
	max-width: 100%;
}

.igc-hero-chiffre {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--wp--preset--spacing--30);
	border-radius: 8px;
	background-color: var(--wp--preset--color--beige-20);
	color: var(--wp--preset--color--neutral-100);
}

.igc-hero-chiffre > * {
	margin-block: 0;
}

.igc-hero-chiffre__intitule {
	opacity: 0.7;
}

.igc-hero-chiffre__valeur {
	font-family: var(--wp--preset--font-family--title);
	/* 45 Light : la Neue Haas ne sert qu'en Light dans la maquette. */
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.03em;
}

/* ---- Hero d'un hub de ville (Figma 24935:5805) ----

   Texte à gauche, photo à droite, à parts égales. Sous le texte, une rangée de
   trois chiffres séparés par un filet vertical. */

.igc-hub-hero {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* 120px au Figma, ce qui donne deux colonnes de 572 dans les 1264. Une
	   valeur de l'échelle d'espacement, élastique, les décalerait. */
	gap: 120px;
	align-items: stretch;
}

.igc-hub-hero > * {
	min-width: 0;
	margin-block: 0;
}

.igc-hub-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: var(--igc-hero-photo-plancher, 669px);
	border-radius: 8px;
	object-fit: cover;
}

/* Les hubs de ville posent trois chiffres sous leur texte ; le hero du site
   franchisé, non. Sa colonne de gauche est donc bien plus courte, et le
   plancher de 669px creusait un vide sous le bouton (Figma 25035:4430).

   Par variable et non par règle propre : la règle mobile qui ramène la photo
   à 320px a la même spécificité que celle du dessus et l'emporte par sa
   position. Une règle plus spécifique passerait devant elle. */
.igc-hub-hero--sans-chiffres {
	--igc-hero-photo-plancher: 510px;
}

.igc-hub-hero__chiffres {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
}

.igc-hub-hero__chiffre {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 0;

	/* Le groupe est en mise en page « flux » côté WordPress, qui écarte ses
	   frères de 24px. Passé en flex par cette feuille, il garde cette marge :
	   elle décalait les deuxième et troisième chiffres d'un cran vers le bas. */
	margin-block: 0;
}

/* Le filet du Figma est un trait entre deux colonnes : on le porte en bordure
   plutôt qu'en élément, pour qu'il disparaisse de lui-même à l'empilement. */
.igc-hub-hero__chiffre + .igc-hub-hero__chiffre {
	padding-left: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--wp--preset--color--beige-20);
}

.igc-hub-hero__chiffre > * {
	margin-block: 0;
}

.igc-hub-hero__valeur {
	font-family: var(--wp--preset--font-family--title);
	/* 45 Light : la Neue Haas ne sert qu'en Light dans la maquette. */
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.03em;
}

@media (max-width: 900px) {

	.igc-hub-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	.igc-hub-hero__photo img {
		min-height: 320px;
	}

	/* Trois chiffres côte à côte deviennent illisibles bien avant de déborder :
	   on les empile, et le filet passe du côté au dessus. */
	.igc-hub-hero__chiffres {
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
	}

	.igc-hub-hero__chiffre + .igc-hub-hero__chiffre {
		padding-top: var(--wp--preset--spacing--20);
		padding-left: 0;
		border-top: 1px solid var(--wp--preset--color--beige-20);
		border-left: 0;
	}
}

/* ---- Présentation d'un programme (Figma 24990:6666) ----
   Titre et texte à gauche sur 864px, prestations à droite sur 400px. Les deux
   colonnes se touchent, comme partout ailleurs dans ces maquettes. */

.igc-programme-presentation {
	display: grid;
	grid-template-columns: minmax(0, 864fr) minmax(0, 400fr);
	gap: 0;
	align-items: start;
}

.igc-programme-presentation > * {
	min-width: 0;
	margin-block: 0;
}

/* La liste des prestations est plus courte que la présentation : alignée en
   haut, elle laissait un blanc sous elle et le bloc semblait tomber en cours de
   route. On la cale sur le bas du texte — les deux colonnes finissent
   ensemble, et le blanc passe au-dessus, là où le titre respire déjà. */
.igc-programme-presentation > *:last-child {
	align-self: end;
}

/* Les deux colonnes se touchent — 864 + 400 font les 1264 du Figma — et la
   maquette s'en accommode parce que son titre d'exemple est court. Un vrai
   titre, lui, court jusqu'au bord et vient buter contre les prestations. La
   colonne de gauche garde donc 120px pour elle, la gouttière du hero : le
   titre s'arrête à 744, la largeur qu'ont déjà les titres de la liste de
   programmes. */
.igc-programme-presentation > *:first-child {
	padding-right: 120px;
}

/* Le titre coupe au milieu de sa longueur plutôt qu'au bord de sa colonne :
   deux lignes de poids voisin, au lieu d'une ligne pleine suivie de trois
   mots. C'est le navigateur qui trouve le point de coupe, donc juste quel que
   soit le nom de la ville. */
.igc-programme-presentation h2 {
	text-wrap: balance;
}

/* Le texte ne court pas sur toute la colonne : la maquette l'arrête à 520px,
   ce qui lui donne une longueur de ligne lisible sous un titre bien plus large. */
.igc-programme-presentation__texte {
	max-width: 520px;
}

@media (max-width: 900px) {

	.igc-hero-photo--programme {
		flex-direction: column;
		align-items: stretch;
	}

	.igc-hero-chiffres {
		flex-basis: auto;
	}

	.igc-programme-presentation {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	/* Empilées, les colonnes n'ont plus de voisine à laquelle se heurter. */
	.igc-programme-presentation > *:first-child {
		padding-right: 0;
	}
}

/* Retraits de 12px et 8px, hors échelle d'espacement (multiples de 8),
   d'où le CSS plutôt qu'un preset (Figma 24551:924). */
.igc-hero-immo {
	padding: 0 12px 8px;
}

.igc-hero-immo > * {
	margin-block: 0;
}

/* ---- Palier avant le tiroir ----

   Logo, barre et boutons pèsent 1031px ; la gouttière du gabarit en prend
   12,2 % de chaque côté, si bien que la ligne déborde sous 1174px. Plutôt que
   de basculer en tiroir à ce seuil au demi-pixel près, on retire le bouton
   « Contact » un peu avant : il est doublé dans le panneau « À propos » du
   menu, et la barre tient alors jusqu'à 1064px. */
@media (max-width: 1199px) {

	.igc-header__actions .wp-block-button.is-style-igc-glass {
		display: none;
	}
}

/* ---- Réponse au survol des liens ----

   Aucun lien ne se souligne au survol, nulle part : la réponse passe par la
   densité. Sont exclus les boutons, qui ont leur propre état, et les composants
   qui gèrent déjà le leur — menu, cartes, listes de dispositifs, piliers —
   sinon deux effets se superposeraient. Les textes légaux gardent leur
   soulignement permanent : ce n'est pas un effet de survol mais une convention
   de lecture, et on y renvoie vers des autorités de contrôle. */
a:where(:not(
	.wp-element-button,
	.wp-block-button__link,
	.igc-menu a,
	.igc-card a,
	.igc-carte a,
	.igc-programme-ligne__lien,
	.igc-programme-carte__lien,
	.igc-pole__texte a,
	.igc-offre-ligne__lien,
	.igc-solution__lien,
	.igc-pilier__lien a,
	.igc-legal__corps a
)):hover {
	opacity: 0.7;
	text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {

	a:where(:not(.wp-element-button, .wp-block-button__link)) {
		transition: opacity var(--igc-duree) var(--igc-courbe);
	}
}

/* ---- Hero des pages intérieures (Figma 24554:9208) ----
   Les deux colonnes font 620px au Figma : la photo reprend donc la hauteur
   du texte, quel que soit le volume de celui-ci. */
/* Toutes les pages n'ont pas de sur-titre de renfort sous le titre : la
   maquette « Réduire mes impôts » n'en montre pas. Une surcharge de motif sait
   vider un texte mais pas retirer son bloc, et un paragraphe vide continue de
   consommer l'écart de la pile. On le retire donc de la mise en page. */
.igc-hero-rp p:empty {
	display: none;
}

.igc-hero-rp .wp-block-columns {
	align-items: stretch;
}

.igc-hero-rp__photo {
	display: flex;
}

.igc-hero-rp__photo > figure.wp-block-image {
	flex: 1 1 auto;
	margin: 0;
}

.igc-hero-rp__photo > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bouton translucide du header : neutral-100 à 20 % + flou d'arrière-plan */
.wp-block-button.is-style-igc-glass .wp-block-button__link {
	background-color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 20%, transparent);
	color: var(--wp--preset--color--neutral-100);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------
   2a-ter. Interlettrage des petites tailles

   Un interlettrage en `em` se calcule là où il est déclaré, puis
   s'hérite en valeur absolue. Le -0.02em du corps, posé sur 16px,
   vaut -0.32px : un texte de 12px qui en hérite se retrouve à
   -2,67 % au lieu de -2 %, soit plus serré que la maquette.

   On le redéclare donc partout, pour qu'il se recalcule à la taille
   de chaque élément.

   `:where()` ne pèse rien dans le calcul de spécificité : la règle
   sert de valeur par défaut, et n'importe quelle règle explicite —
   les boutons à -0.01em, les titres mobiles à -0.04em — l'emporte.
   Elle ne fait qu'empêcher l'héritage d'une valeur mal dimensionnée.
   --------------------------------------------------------------- */
:where(body *) {
	letter-spacing: -0.02em;
}

/* Contrepartie : là où un parent impose sa propre valeur — le bouton à
   -0.01em, les titres resserrés du palier mobile — ses enfants doivent
   la suivre et non retomber sur la valeur par défaut ci-dessus. */
.wp-block-button__link *,
h1 *,
h2 *,
h3 *,
h4 *,
h5 * {
	letter-spacing: inherit;
}

/* ---------------------------------------------------------------
   2a-bis. Graisse de la police de titre

   Le Figma n'emploie la Neue Haas qu'en 45 Light — titres, gros
   chiffres, étiquettes. La seule exception est le sur-titre, en
   55 Roman, qui redéclare sa graisse plus bas.

   `theme.json` ne pose le 300 que sur les balises h1 à h5. Les
   chiffres clés sont écrits en paragraphe pour ne pas polluer le plan
   du document : ils héritaient donc du 400. L'écart est resté
   invisible tant que la police n'était pas licenciée.
   --------------------------------------------------------------- */
.has-title-font-family,
.igc-etiquette {
	font-weight: 300;
}

/* ---------------------------------------------------------------
   2b. Sur-titre (composant « Petit titre », Figma 24551:16)
       Neue Haas 55 Roman, filet beige-20 sous le texte.

       Le filet est une bordure, pas un soulignement : `text-decoration`
       suivrait les descendantes du texte et se couperait sous les « p »
       et les « g », là où la maquette veut un trait continu posé 8px
       sous la ligne de base.

       La graisse était à 500 — soit 65 Medium — alors que le composant
       demande 55 Roman. L'écart est resté invisible tant que la police
       n'était pas licenciée : Helvetica n'a pas de 55, le repli tombait
       sur son Regular et donnait par accident le bon dessin.
   --------------------------------------------------------------- */
.is-style-igc-eyebrow {
	display: inline-flex;
	align-items: center;
	padding-bottom: var(--wp--preset--spacing--10);
	border-bottom: 1px solid var(--wp--preset--color--beige-20);
	font-family: var(--wp--preset--font-family--title);
	font-weight: 400;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 80%, transparent);
}

/* ---------------------------------------------------------------
   2c. Cartes de la home (Figma 24566:1479 / 24566:1489)
   --------------------------------------------------------------- */
.igc-card {
	width: 496px;
	max-width: 100%;
}

.igc-card figure.wp-block-image,
.igc-card figure.wp-block-image img {
	width: 100%;
	margin: 0;
}

/* Variante des cartes à hauteur imposée : la photo absorbe la place
   restante pour que les deux cartes s'alignent malgré des textes de
   longueurs différentes (Figma 24551:963, 1000x560). */
.igc-cards--hauteur-fixe {
	height: 560px;
	align-items: stretch;
}

.igc-cards--hauteur-fixe .igc-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.igc-cards--hauteur-fixe .igc-card > figure.wp-block-image {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
}

.igc-cards--hauteur-fixe .igc-card > figure.wp-block-image img {
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

/* ---- Grille des avantages (Figma 24551:990) ----
   Trois rangées de 240px : cartes numérotées extensibles et photos de 320px. */

.igc-avantages {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* `height` et non `min-height`, et c'est délibéré : les cartes de la rangée
   ne s'étirent qu'au-dessus d'une hauteur DÉFINIE. Avec un simple plancher, le
   conteneur reste indéfini, `align-items: stretch` n'a rien contre quoi se
   mesurer, et chaque carte retombe à la hauteur de son texte — 185px au lieu
   de 240. La carte à fond dégradé n'affichait alors qu'une bande encore plus
   mince de son image.

   Corollaire assumé : une page dont le texte dépasse 240px se fait rogner.
   C'est le cas d'`/investissement-locatif/`, dont la copie est plus longue que
   celle de la maquette — un sujet de contenu, pas de mise en page. */
.igc-avantages__ligne {
	display: flex;
	gap: 8px;
	height: 240px;
}

/* Les rangées et leurs cartes ne s'espacent que par le `gap` : sans cela
   la marge de flux de WordPress (24px) s'ajoute entre elles. */
.igc-avantages > *,
.igc-avantages__ligne > * {
	margin-block: 0;
}

.igc-avantage {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	min-width: 0;
	height: 100%;
	overflow: hidden;
}

.igc-avantage > *:not(figure) {
	position: relative;
	z-index: 1;
	margin: 0;
}

/* Photo seule, largeur imposée de 320px. */
.igc-avantage--photo {
	flex: 0 0 320px;
	width: 320px;
	padding: 0;
}

.igc-avantage--photo > figure.wp-block-image,
.igc-avantage--photo > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* Carte sur photo : voile sombre à 30 %, texte blanc. */
.igc-avantage--sombre > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-avantage--sombre > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-avantage--sombre::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 30%, transparent);
	pointer-events: none;
}

/* Pastille numérotée de 40px, alignée à droite (Figma 24551:993). */
.igc-avantage__num {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

/* Curseur décoratif de la carte 03 (Figma 24551:1016). La règle de la photo
   de fond vise toutes les figures de la carte : il faut lui reprendre
   `inset` et la hauteur, sinon le curseur se colle en haut à gauche et
   s'étire sur toute la carte. */
.igc-avantage__curseur,
.igc-avantage--sombre > figure.igc-avantage__curseur {
	position: absolute;
	inset: auto;
	top: 33.5px;
	left: 183px;
	z-index: 2;
	width: 18px;
	height: auto;
	margin: 0;
	pointer-events: none;
}

.igc-avantage--sombre > figure.igc-avantage__curseur img {
	width: 18px;
	height: auto;
}

/* ---- Cartes simulateur (Figma 24551:1137) ---- */

.igc-simulateurs {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.igc-simulateurs > * {
	margin-block: 0;
}

.igc-simulateur {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}

.igc-simulateur > * {
	margin: 0;
}

.igc-simulateur__icone {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

.igc-simulateur__icone figure.wp-block-image,
.igc-simulateur__icone img {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	object-fit: contain;
}

/* ---- Hero des pages simulateur (Figma 24551:5500) ----
   Deux colonnes égales séparées de 120px : le texte à gauche, décalé de 40px
   comme au Figma, la coque du simulateur à droite. */

/* Colonnes en grille plutôt qu'en flex. Avec `flex-basis: 0`, la base ne
   couvre que la boîte de contenu : une colonne rembourrée récupère son
   rembourrage en plus et les deux colonnes cessent d'être égales. Deux pistes
   de grille restent égales quoi qu'elles contiennent. */
.igc-hero-simu > .wp-block-columns,
.igc-pedago .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.igc-hero-simu__texte {
	padding-top: 40px;
}

.igc-hero-simu__carte {
	box-sizing: border-box;
	position: relative;
	display: flex;
	min-height: 586px;
	padding: 16px;
	overflow: hidden;
	border-radius: 8px;
}

.igc-hero-simu__carte > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-hero-simu__carte > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-hero-simu__carte > *:not(figure) {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	margin: 0;
}

/* Emplacement du simulateur : le Figma n'en montre que la coque blanche et
   son intitulé, l'outil de calcul viendra s'y loger. */
.igc-hero-simu__panneau {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px;
	border-radius: 6px;
	background-color: var(--wp--preset--color--neutral-0);
}

/* Trio des autres simulateurs : cartes de 416x394 (Figma 24551:5534), contre
   310x286 pour la rangée de quatre. */
.igc-simulateurs--trio .igc-simulateur {
	min-height: 394px;
}

/* Le bouton de la carte s'aligne à gauche, comme au Figma. La mise en page
   contrainte de WordPress centre ses enfants avec `margin-left/right: auto`
   assorti de `!important` : aucune spécificité n'en vient à bout, d'où le
   `!important` ici aussi. */
.igc-simulateur.wp-block-group > .wp-block-buttons {
	margin-inline: 0 !important;
}

/* Variante à trois cartes : elles se partagent la largeur au lieu des 496px
   fixes des cartes de l'accueil (Figma 24551:630, 416px chacune).

   La rangée est une grille et chaque carte reprend ses lignes en `subgrid` :
   les trois photos partagent alors une même ligne, et les trois blocs de
   texte une autre. Sans cela, la photo n'étant qu'un `flex: 1`, la carte au
   texte le plus long se retrouvait avec une photo plus courte. Et comme les
   lignes se dimensionnent sur le contenu, l'alignement tient encore si le
   client rallonge un texte. */
/* Sélecteur alourdi de `.wp-block-group` : la classe de mise en page de
   WordPress impose `display: flex` avec la même spécificité, et sa feuille
   passe après celle du thème. */
.wp-block-group.igc-cards.igc-cards--trois {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: 1fr auto;
}

.wp-block-group.igc-cards--trois .igc-card {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	width: auto;
	min-width: 0;
}

/* Les trois boutons se posent au même niveau, en bas de leur carte, quelle
   que soit la longueur du texte au-dessus. */
.wp-block-group.igc-cards--trois .igc-card .wp-block-buttons {
	margin-block-start: auto;
}

/* ---- Hero de la gestion de patrimoine (Figma 24551:546) ----
   À droite, une photo qui prend la place restante puis une carte de 200px
   portant les trois pôles en pastilles de verre. */

.igc-hero-gp__media {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/* Les 8px du Figma sont portés par le `gap` : sans cette remise à zéro, la
   marge de flux de WordPress (24px) s'y ajoute et l'écart passe à 32px. */
.igc-hero-gp__media > * {
	margin-block: 0;
}

.igc-hero-gp__photo {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
}

.igc-hero-gp__photo figure.wp-block-image,
.igc-hero-gp__photo img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.igc-hero-gp__poles {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex: 0 0 200px;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	justify-content: center;
	height: 200px;
	padding: 16px;
	overflow: hidden;
	border-radius: 8px;
}

.igc-hero-gp__poles > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-hero-gp__poles > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-hero-gp__poles > *:not(figure) {
	position: relative;
	z-index: 1;
	margin: 0;
}

/* Pastille de pôle : 32px de haut, 12px de retrait (Figma 24551:565). */
.igc-pole-pastille {
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border-radius: 6px;
}

/* ---- Trois chiffres séparés par un filet (Figma 24551:574) ----
   Les colonnes sont espacées de 128px et le filet se pose au milieu, à 64px
   de la colonne suivante — c'est la géométrie exacte de la maquette. */

.igc-stats-trio {
	display: flex;
	gap: 128px;
	align-items: stretch;
}

.igc-stats-trio > * {
	flex: 1 1 0;
	min-width: 0;
	margin-block: 0;
}

.igc-stats-trio > * + * {
	position: relative;
}

.igc-stats-trio > * + *::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -64px;
	border-left: 1px solid var(--wp--preset--color--beige-20);
}

/* Pastille dorée du chiffre : 52x52, icône de 20px (Figma 24551:576). */
.igc-stat-badge {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
}

.igc-stat-badge figure.wp-block-image,
.igc-stat-badge img {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	object-fit: contain;
}

/* ---- Bloc pédagogique des pages simulateur (Figma 24551:5704) ----
   Deux colonnes de 596px séparées de 72px, alignées en bas. La gouttière est
   posée en attribut de bloc : la règle de mise en page générée par WordPress
   l'emporterait sur une déclaration du thème. */

.igc-pedago__photo {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 8px;
	overflow: hidden;
	border-radius: 8px;
}

/* La photo monte à la hauteur du texte : les deux colonnes forment une paire,
   pas une image posée à côté d'un paragraphe. L'alignement en bas du bloc
   collerait la colonne à sa propre hauteur — on l'étire, la carte chiffrée
   restant posée en bas par `align-items`. Sélecteur en trois classes pour
   passer devant la règle d'alignement écrite par WordPress. */
.igc-pedago .wp-block-column.igc-pedago__photo {
	align-self: stretch;
}

.igc-pedago__photo > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-pedago__photo > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-pedago__photo > *:not(figure) {
	position: relative;
	z-index: 1;
	margin: 0;
}

/* Encart chiffré posé sur la photo : 324px de large, verre dépoli. */
.igc-pedago__chiffre {
	box-sizing: border-box;
	width: 324px;
	max-width: 100%;
}

/* Le sélecteur segmenté est désormais un bloc à part entière
   (cabinet-igc/segments) : sa mise en forme vit dans le CSS du bloc. */

/* ---- Cartes programmes (Figma 24551:1207) ---- */

.igc-programmes {
	display: flex;
	gap: 16px;
	height: 567px;
}

.igc-programmes > * {
	margin-block: 0;
}

/* Le titre de la carte porte le lien, et le calque l'étend à toute la carte :
   c'est le titre qui nomme la destination, et un lecteur d'écran doit entendre
   « Appartements neufs » plutôt qu'un lien sans nom.

   La cote est portée par le lien lui-même et la carte s'isole : sur un
   pseudo-élément, la moindre opacité posée sur le lien le ferait retomber sous
   la photo, et le clic se mettrait à vibrer. */
.igc-programme {
	/* La carte forme son propre plan : la cote du calque de clic ne vaut alors
	   qu'à l'intérieur d'elle. */
	isolation: isolate;
}

.igc-pole__texte a {
	position: static;
	color: inherit;
	text-decoration: none;
}

.igc-pole__texte a::after {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 8px;
	content: "";
}

.igc-pole__texte a:hover,
.igc-pole__texte a:focus-visible {
	text-decoration: none;
}

.igc-programme:focus-within {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: 2px;
}

/* La photo se rapproche lentement au survol, comme sur les cartes du
   catalogue : le même geste pour deux composants qui font la même promesse. */
@media (hover: hover) {

	.igc-programme > figure.wp-block-image img {
		transform: scale(1);
	}

	.igc-programme:hover > figure.wp-block-image img,
	.igc-programme:focus-within > figure.wp-block-image img {
		transform: scale(1.04);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.igc-programme > figure.wp-block-image img {
		transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: transform;
	}
}

.igc-programme {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	height: 100%;
	padding: 8px;
	overflow: hidden;
}

.igc-programme > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-programme > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dégradé remontant du bas sur 307px (Figma 24551:1209) */
.igc-programme::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 307px;
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--neutral-100) 60%, transparent), transparent);
	pointer-events: none;
}

/* Les décors passent derrière le contenu, plutôt que le contenu devant les
   décors. C'est la même image à l'écran, mais le contenu n'a plus besoin d'être
   positionné — et c'est ce qui libère le calque de clic du titre : tant que
   l'encart beige était son plus proche ancêtre positionné, l'étendue du lien
   s'arrêtait à cet encart au lieu de couvrir la carte, photo comprise. */
.igc-programme > figure.wp-block-image {
	z-index: -2;
}

.igc-programme::after {
	z-index: -1;
}

.igc-programme > *:not(figure) {
	margin: 0;
}

/* WordPress positionne d'office tout groupe en mise en page « contrainte ».
   Cette position n'apporte plus rien ici — les décors sont passés derrière —
   et elle retenait le calque de clic dans l'encart beige au lieu de le laisser
   couvrir la carte. */
.igc-programme > .wp-block-group {
	position: static;
}

/* Au repos la carte beige n'affiche que son titre ; le texte se déplie au
   survol. `grid-template-rows: 0fr → 1fr` est la seule technique qui anime
   une hauteur automatique sans la mesurer en JavaScript. La marge de flux
   de WordPress (24px) est reprise ici, sinon un vide subsisterait sous le
   titre carte fermée. */
.igc-programme__revele {
	display: grid;
	grid-template-rows: 0fr;
	margin-block-start: 0;
	opacity: 0;
}

.igc-programme__revele > * {
	margin: 0;
	overflow: hidden;
}

.igc-programme:hover .igc-programme__revele,
.igc-programme:focus-within .igc-programme__revele {
	grid-template-rows: 1fr;
	margin-block-start: var(--wp--preset--spacing--30);
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {

	.igc-programme__revele {
		transition:
			grid-template-rows 480ms var(--igc-courbe),
			margin-block-start 480ms var(--igc-courbe),
			opacity 320ms var(--igc-courbe);
	}
}

/* Sans survol (tactile) ou sans animation, le texte reste visible en
   permanence : mieux vaut une carte plus haute qu'un contenu inatteignable. */
@media (prefers-reduced-motion: reduce), (hover: none) {

	.igc-programme__revele {
		grid-template-rows: 1fr;
		margin-block-start: var(--wp--preset--spacing--30);
		opacity: 1;
	}
}

/* Bouton flèche de 34px (Figma 24551:1213) */
.igc-fleche {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--neutral-100) 10%, transparent);
	border-radius: 4px;
}

.igc-fleche figure.wp-block-image,
.igc-fleche a,
.igc-fleche img {
	display: block;
	width: 11px;
	margin: 0;
}

/* Le quart de tour ne se pose que sur l'image. Porté aussi par le <figure>, il
   se cumulait avec celui de l'image : la flèche faisait un demi-tour complet et
   pointait vers le bas au lieu de la droite. */
.igc-fleche img {
	transform: rotate(90deg);
}

/* Survol — uniquement quand la flèche est un vrai lien : là où elle n'est que
   décorative (cartes programmes), c'est la carte entière qui réagit déjà.
   La flèche avance de 2px : elle a subi un quart de tour, un déplacement vers
   le haut dans son repère se lit donc vers la droite à l'écran. */
.igc-fleche:has(a) {
	transition:
		border-color 200ms var(--igc-courbe),
		background-color 200ms var(--igc-courbe);
}

.igc-fleche:has(a) img {
	transition: transform 200ms var(--igc-courbe);
}

.igc-fleche:has(a:hover),
.igc-fleche:has(a:focus-visible) {
	border-color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 30%, transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 6%, transparent);
}

.igc-fleche:has(a:hover) img,
.igc-fleche:has(a:focus-visible) img {
	transform: rotate(90deg) translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {

	.igc-fleche:has(a:hover) img,
	.igc-fleche:has(a:focus-visible) img {
		transform: rotate(90deg);
	}
}

/* ---- FAQ en accordéon natif core/details (Figma 24551:1326) ---- */

/* Section FAQ.

   Le bloc remplace neuf motifs qui portaient tous le même écart entre leur
   en-tête et leur liste — 56px — et un rembourrage vertical de 40px, sauf
   deux pages à 120. L'écart devient donc une règle, le rembourrage un
   réglage de bloc que ces deux pages redéclarent. */

.igc-faq-section {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--50);
}

.igc-faq-section > * {
	margin-block: 0;
}

/* La liste est bornée à 880px : sans marge automatique elle resterait calée
   à gauche de la section, là où le motif la centrait par sa mise en page
   contrainte. */
.igc-faq-section > .igc-faq {
	margin-inline: auto;
}

/* En-tête d'une section FAQ.

   Reproduit ce que faisait le groupe des neuf motifs remplacés : sur-titre
   et titre centrés, 16px entre les deux. C'est le bloc `cabinet-igc/faq`
   qui pose désormais ce balisage, une seule fois. */

.igc-faq-section__entete {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.igc-faq-section__entete > * {
	margin-block: 0;
}

.igc-faq {
	width: 880px;
	max-width: 100%;
}

.igc-faq .wp-block-details {
	padding: 24px;
	border-radius: 4px;
}

.igc-faq .wp-block-details[open] {
	background-color: var(--wp--preset--color--beige-20);
}

/* Variante gestion de patrimoine : c'est l'or qui remplit la question
   ouverte, le beige clair restant à l'immobilier (Figma 24551:873). Même
   composant, inversion d'usage des couleurs entre les deux univers. */
.igc-faq--or .wp-block-details[open] {
	background-color: var(--wp--preset--color--beige-80);
}

.igc-faq summary {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	justify-content: space-between;
	list-style: none;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--title);
	font-size: var(--wp--preset--font-size--heading-5);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
	cursor: pointer;
}

.igc-faq summary::-webkit-details-marker,
.igc-faq summary::marker {
	display: none;
	content: "";
}

/* Icônes du Figma en data URI : croix à l'ouverture, plus à la fermeture. */
.igc-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 4px;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0.36L6 11.64' stroke='%23111111' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M11.64 6L0.36 6' stroke='%23111111' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

/* La croix du Figma est le même « plus » tourné de 45° : une seule icône,
   donc une rotation animable au lieu d'un changement d'image sec. */
.igc-faq .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.igc-faq .wp-block-details > *:not(summary) {
	margin: 16px 0 0;
	padding-right: 52px;
}

/* Ouverture animée sans JavaScript : `::details-content` expose le panneau
   d'un core/details, et `interpolate-size` autorise la transition vers une
   hauteur automatique. Les navigateurs qui ne connaissent pas encore ces
   règles ouvrent le panneau d'un coup — le contenu reste accessible. */
:root {
	interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: no-preference) {

	.igc-faq .wp-block-details {
		transition: background-color 320ms var(--igc-courbe);
	}

	.igc-faq summary::after {
		transition: transform 320ms var(--igc-courbe);
	}

	.igc-faq summary {
		transition: opacity 320ms var(--igc-courbe);
	}

	.igc-faq .wp-block-details:not([open]) summary:hover {
		opacity: 0.7;
	}

	.igc-faq .wp-block-details::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			block-size 420ms var(--igc-courbe),
			opacity 260ms var(--igc-courbe),
			content-visibility 420ms allow-discrete;
	}

	.igc-faq .wp-block-details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}

	.igc-faq .wp-block-details > *:not(summary) {
		transform: translateY(-8px);
		transition: transform 420ms var(--igc-courbe);
	}

	.igc-faq .wp-block-details[open] > *:not(summary) {
		transform: none;
	}
}

/* ---- Bandeau CTA final (Figma 24551:1407) ---- */

.igc-cta {
	box-sizing: border-box;
	position: relative;
	display: flex;
	gap: 8px;
	align-items: flex-end;
	min-height: 476px;
	padding: 16px;
	overflow: hidden;
}

.igc-cta > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-cta > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-cta > *:not(figure) {
	position: relative;
	z-index: 1;
	margin: 0;
}

.igc-cta__carte {
	box-sizing: border-box;
	flex: 0 0 600px;
	width: 600px;
	max-width: 100%;
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
}

/* Le chapô est plus étroit que la carte (441px au Figma), mais il reste calé à
   gauche sous le titre. La mise en page contrainte de WordPress centre ses
   enfants avec des marges automatiques marquées `!important` : il faut le même
   poids pour les annuler. */
.igc-cta__carte .igc-dim {
	max-width: 441px;
	margin-inline: 0 !important;
}

.igc-cta__photo {
	flex: 0 0 240px;
	width: 240px;
}

.igc-cta__photo figure.wp-block-image,
.igc-cta__photo img {
	display: block;
	width: 240px;
	height: 338px;
	margin: 0;
	border-radius: 6px;
	object-fit: cover;
}

/* Texte secondaire du design (opacité 70 %) */
.igc-dim {
	opacity: 0.7;
}

/* Même rôle sur fond sombre : le Figma monte à 80 % (24551:1015) */
.igc-dim-clair {
	opacity: 0.8;
}

/* Mention discrète, blanc à 50 % (Figma 24568:1964) */
.igc-mention {
	opacity: 0.5;
}

/* Filet clair sur fond sombre : blanc à 10 % (Figma 24568:1932).
   `border: 0` d'abord : core/separator pose une bordure haute ET basse,
   ce qui donnerait un trait de 2px au lieu de 1. */
.igc-rule-clair {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--neutral-0);
	opacity: 0.1;
}

/* Filet sombre à 20 % entre les pôles (Figma 24566:1544).
   WordPress met `align-items: flex-start` sur un groupe flex vertical :
   sans largeur explicite, le <hr> se réduirait à 0. */
.igc-rule-sombre {
	width: 100%;
	align-self: stretch;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
	opacity: 0.2;
}

/* Variante de sur-titre posée sur fond beige : un filet beige-20 y serait
   invisible, le Figma passe donc à neutral-100 à 10 % (24566:1525). */
.igc-eyebrow-sur-beige.is-style-igc-eyebrow {
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 10%, transparent);
}

/* Pastille numérotée des pôles, 48x48 (Figma 24566:1531) */
.igc-badge {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
}

/* Photo de fond d'une carte : l'image occupe toute la carte, le contenu
   se pose par-dessus, aligné en bas. */
/* La colonne photo s'étire sur la hauteur de la plus haute colonne, quelle
   que soit la longueur du texte à côté : dans le Figma les deux colonnes
   font toujours la même hauteur. `align-self` l'emporte sur l'alignement
   bas posé par core/columns. */
.igc-carte-photo {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	justify-content: flex-end;
	min-height: 680px;
	overflow: hidden;
}

/* WordPress pose `align-self: flex-end` sur les colonnes d'un bloc aligné en
   bas, avec une spécificité de 0,3,0 : il faut passer devant. */
.wp-block-columns.are-vertically-aligned-bottom > .wp-block-column.igc-carte-photo {
	align-self: stretch;
}

.igc-carte-photo > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-carte-photo > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Les 8px de retrait vivent ici et non sur la colonne : `flex-basis: 0`
   ne peut pas descendre sous le rembourrage d'un élément en border-box,
   ce qui donnerait 16px d'avance à cette colonne sur l'autre. */
.igc-carte-photo > .wp-block-group {
	position: relative;
	margin: 8px;
}

/* Carte de citation incrustée : 418px au Figma (24566:1517) */
.igc-citation {
	max-width: 418px;
}

/* Même carte photo, en bandeau large de 560px (Figma 24551:1196) */
.igc-carte-photo--bande {
	min-height: 560px;
}

/* Le texte d'un pôle occupe la place restante à droite de la pastille. */
.igc-pole__texte {
	flex: 1 1 auto;
	min-width: 0;
}

/* En-tête de section : accroche à gauche, chapô de 520px à droite
   (Figma 24566:1664). */
.igc-entete__gauche {
	flex: 1 1 auto;
	min-width: 0;
}

.igc-entete__droite {
	flex: 0 0 520px;
	max-width: 520px;
}

/* Bandeau photo 1264x560 (Figma 24566:1639). Le Figma cadre l'image
   sur ses 79 % inférieurs, d'où `object-position: center bottom`. */
.igc-bande-photo {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 560px;
	padding: 16px;
	overflow: hidden;
}

/* Le layout flow de WordPress pose un margin-block-start de 24px sur le
   second enfant. Le <figure> étant absolu, c'est la carte qui l'hérite et
   perd 24px de hauteur : on remet les marges à zéro. */
.igc-bande-photo > * {
	margin-block: 0;
}

.igc-bande-photo > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-bande-photo > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/* Carte de chiffres de 300px sur son propre dégradé (Figma 24566:1640) */
.igc-carte-chiffres {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex: 0 0 300px;
	flex-direction: column;
	justify-content: space-between;
	align-self: stretch;
	width: 300px;
	padding: 32px;
	overflow: hidden;
}

.igc-carte-chiffres > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-carte-chiffres > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-carte-chiffres > *:not(figure) {
	position: relative;
	margin: 0;
}

/* Variante du site franchisé : le bandeau de chiffres court sur toute la
   largeur de la photo et se pose en bas, au lieu de la carte verticale calée
   à droite (Figma 25119:5143).

   `align-self: auto` est indispensable : la règle de base étire la carte sur
   toute la hauteur du bandeau, ce qui annulerait l'alignement en bas. */
.igc-bande-photo--bas {
	align-items: flex-end;
}

.igc-carte-chiffres--bandeau {
	flex: 1 1 auto;
	flex-direction: row;
	align-items: center;
	align-self: auto;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	width: auto;
}

/* Cinq repères ne tiennent pas sur une ligne étroite, et le bandeau les
   rognait : sa règle de base coupe ce qui dépasse. Ils passent donc à la
   ligne, par paires. */
@media (width <= 900px) {

	.igc-carte-chiffres--bandeau {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.igc-carte-chiffres--bandeau > .wp-block-group {
		flex: 1 1 40%;
	}
}

/* Grille de témoignages : colonnes jointives séparées d'un filet beige,
   coins hauts arrondis (Figma 24566:1724). */
.igc-avis__grille {
	overflow: hidden;
	border-radius: 8px 8px 0 0;
}

/* Six témoignages plutôt que trois, sur le site franchisé : le cadre arrondi
   et le rognage restent au conteneur, et chaque rangée n'apporte que son
   filet. Le sélecteur ne vise que les rangées imbriquées — sur le site
   principal, c'est la grille elle-même qui porte les colonnes. */
.igc-avis__grille > .wp-block-columns {
	margin-block: 0;
}

.igc-avis__grille > .wp-block-columns + .wp-block-columns {
	border-top: 1px solid var(--wp--preset--color--beige-20);
}

/* ---------------------------------------------------------------------------
   Le carrousel de témoignages
   ---------------------------------------------------------------------------

   Six franchisés à montrer, trois qui tiennent de front : le site franchisé
   les fait défiler plutôt que de les empiler sur deux rangées. La piste défile
   d'elle-même — molette, doigt, tabulation ; `assets/carrousel.js` n'ajoute
   que les deux flèches, et seulement quand il y a de quoi défiler.

   La classe ne vit que sur la page d'accueil du site franchisé. Le site
   principal ne la porte nulle part : même feuille, un seul carrousel.

   Le nombre de cartes visibles est une variable et non une requête média
   répétée : le script mesure la première carte pour connaître son pas, et il
   n'a ainsi qu'une seule source à lire. */

.igc-carrousel {
	--igc-carrousel-vues: 3;

	/* Une rangée flex et non une grille : sous 600px, Chrome résolvait le
	   premier `grid-auto-columns` en pourcentage à zéro — la première carte
	   disparaissait et les suivantes se chevauchaient. Le carrousel des avis
	   Google est une rangée flex depuis toujours, et ne connaît pas ce défaut. */
	display: flex;

	/* Une piste qui passe à la ligne n'est plus une piste. Déclaré et non
	   supposé : `flex-wrap: wrap` est la règle du thème pour les grilles qui
	   se réorganisent sous 900px, et une piste n'en est pas une. */
	flex-wrap: nowrap;

	/* `overflow-y` est déclaré explicitement : dès qu'un axe cesse d'être
	   `visible`, l'autre passe de `visible` à `auto`, et la piste se mettrait
	   à défiler verticalement sous le doigt. */
	overflow-x: auto;
	overflow-y: hidden;

	/* Le balayage horizontal ne doit pas déclencher le retour arrière. */
	overscroll-behavior-x: contain;

	scroll-snap-type: x mandatory;

	/* La barre de défilement est masquée : la piste porte déjà ses flèches et
	   ses points d'arrêt, et une barre sous les cartes couperait le filet qui
	   les sépare. */
	scrollbar-width: none;
}

.igc-carrousel::-webkit-scrollbar {
	display: none;
}

.igc-carrousel:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: 2px;
}

/* Les portraits n'ont pas tous le même format : les quatre premiers sont en
   916x969, les deux derniers en 819x1024. À largeur égale, ces deux-là sont
   plus hauts de 80 pixels, et tout ce qui suit dans la carte — le nom, les
   étoiles, la citation — descend d'autant. Une rangée de cartes en escalier.

   On impose donc un format unique et on recadre. `center top` plutôt que
   `center` : sur un portrait, ce qu'on peut rogner est en bas. */
.igc-temoignages .igc-carrousel figure.wp-block-image {
	margin: 0;
}

.igc-temoignages .igc-carrousel figure.wp-block-image img {
	width: 100%;
	aspect-ratio: 916 / 969;
	object-fit: cover;
	object-position: center top;
}

/* `min-width: 0` sans quoi une carte refuse de descendre sous la largeur de
   son texte et déborde de son pas. */
.igc-carrousel > * {
	flex: 0 0 calc(100% / var(--igc-carrousel-vues));
	min-width: 0;
	scroll-snap-align: start;
	margin-block: 0;
}

/* Les coins hauts arrondis appartiennent au dessin des témoignages, pas au
   carrousel : le bloc `.igc-avis__grille` les portait avant que la grille ne
   devienne une piste (Figma 24566:1724). */
.igc-temoignages .igc-carrousel {
	border-radius: 8px 8px 0 0;
}

.igc-carrousel__commandes {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--30);
}

.igc-carrousel__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--neutral-20);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--neutral-100);
	cursor: pointer;
}

.igc-carrousel__fleche::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m11.293 17.293l1.414 1.414L19.414 12l-6.707-6.707l-1.414 1.414L15.586 11H6v2h9.586z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.igc-carrousel__fleche[data-precedent]::before {
	transform: scaleX(-1);
}

.igc-carrousel__fleche:hover:not(:disabled) {
	border-color: var(--wp--preset--color--neutral-40);
}

.igc-carrousel__fleche:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: 2px;
}

.igc-carrousel__fleche:disabled {
	opacity: 0.3;
	cursor: default;
}

@media (width <= 900px) {
	.igc-carrousel {
		--igc-carrousel-vues: 2;
	}
}

/* Une carte pleine et le bord de la suivante : l'amorce dit qu'il y a une
   suite, là où trois cartes tronquées ne diraient plus rien. */
@media (width <= 600px) {
	.igc-carrousel {
		--igc-carrousel-vues: 1.15;
	}

	.igc-carrousel__commandes {
		justify-content: center;
	}
}

.igc-avis {
	border-left: 1px solid var(--wp--preset--color--beige-20);
}

.igc-avis > figure.wp-block-image {
	margin: 0;
}

.igc-avis > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 344px;
	object-fit: cover;
}

/* ---- Section Contact (Figma 24568:1972) ---- */

.igc-contact__gauche {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 40px;
}

.igc-contact__gauche > figure.wp-block-image {
	margin: 0;
}

.igc-contact__gauche > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 297px;
	border-radius: 8px;
	object-fit: cover;
}

.igc-contact__chapo {
	max-width: 392px;
}

/* Les 32px de retrait sont portés par l'enfant, pas par la colonne :
   `flex-basis: 0` ne descend pas sous le rembourrage d'un élément en
   border-box, ce qui déséquilibrerait les deux colonnes de 64px. */
.igc-contact__cadre {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 8px;
}

.igc-contact__cadre > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-contact__cadre > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-contact__cadre > *:not(figure) {
	position: relative;
	flex: 1 1 auto;
	margin: 32px;
}

/* WordPress annule la marge basse du dernier enfant d'un layout flow, avec
   une spécificité supérieure : il faut la reposer explicitement. */
.igc-contact__cadre > *:not(figure):last-child {
	margin-block-end: 32px;
}

/* ---- Grille d'articles (Figma 24566:1800) ---- */

.igc-articles {
	display: flex;
	gap: 40px;
	height: 440px;
}

/* Le layout flow de WordPress pose 24px de marge haute sur les enfants
   suivants : la seconde carte descendait de 24px. */
.igc-articles > * {
	margin-block: 0;
}

.igc-article--large {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: flex-end;
	min-width: 0;
	height: 100%;
	padding: 16px;
	overflow: hidden;
	border-radius: 8px;
}

.igc-article--large > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-article--large > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dégradé radial sombre, centré à 5 % / 97 % de la carte, rayons 95 % / 63 %
   — valeurs déduites de la gradientTransform du Figma (24566:1802). */
.igc-article--large::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(95% 63% at 5% 97%, var(--wp--preset--color--neutral-100), transparent);
	pointer-events: none;
}

.igc-article--large > .wp-block-group {
	position: relative;
	z-index: 1;
	width: 360px;
	max-width: 100%;
	margin: 0;
}

.igc-article--petit {
	display: flex;
	flex: 0 0 427px;
	flex-direction: column;
	gap: 40px;
	width: 427px;
	height: 100%;
}

.igc-article--petit > figure.wp-block-image {
	margin: 0;
}

.igc-article--petit > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: 8px;
}

/* Pastille de 4px entre l'étiquette et la date. */
.igc-article__meta > p + p::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 8px;
	border-radius: 50%;
	background-color: currentColor;
	vertical-align: middle;
}

/* Lien souligné de l'en-tête (Figma 24566:1827) */
.igc-lien-souligne {
	width: fit-content;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
}

.igc-lien-souligne a {
	text-decoration: none;
}

/* 12px entre le nom, la ville et les étoiles. Valeur hors échelle
   d'espacement (multiples de 8 uniquement), d'où le CSS. */
/* Réassurance des heros : trois pastilles de 32px décalées de 16px, donc à
   moitié superposées (Figma 24554:9221). Sans mise en page flex, WordPress
   empile les trois figures les unes sous les autres. */
.igc-avatars {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.igc-avatars > figure.wp-block-image {
	flex: 0 0 auto;
	width: 32px;
	margin: 0;
}

.igc-avatars > figure.wp-block-image + figure.wp-block-image {
	margin-left: -16px;
}

.igc-avatars img {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.igc-avis__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* Le layout contraint de WordPress centre ses enfants (`margin-inline: auto`)
   et leur ajoute un `margin-block-start` de 24px : les deux se cumulaient au
   gap de 12px et poussaient nom, ville et étoiles au centre. */
.igc-avis__meta > * {
	margin-block: 0;
	margin-inline: 0;
}

/* Texte discret, neutral-100 à 50 % (Figma 24566:1731) */
.igc-attenue {
	color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 50%, transparent);
}

/* Filet court entre les chiffres : 83px, neutral-100 à 10 % (24566:1644) */
.igc-rule-court {
	width: 84px;
	margin-inline: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
	opacity: 0.1;
}

/* Statistique : 4px entre le chiffre et son libellé. Valeur hors échelle
   d'espacement (qui ne contient que des multiples de 8), d'où le CSS. */
.igc-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Baseline du hero : 821px au Figma (24566:1507) */
.igc-hero__baseline {
	max-width: 821px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------
   2d. Animations
       Uniquement transform et opacity : ce sont les deux seules
       propriétés que le compositeur anime sans recalcul de mise en
       page ni repeinture. Tout est sous prefers-reduced-motion, et
       les états de survol restent lisibles sans animation.
   --------------------------------------------------------------- */
:root {
	--igc-duree-lente: 600ms;
}

/* Les boutons ne bougent plus au survol : le relais de pastille suffit, et un
   soulèvement du bouton entier brouillerait le glissement du libellé. */

/* Liens de navigation : soulignement qui se déploie depuis la gauche. */

/* Cartes de la home : la photo respire légèrement au survol. */
.igc-card figure.wp-block-image {
	overflow: hidden;
	border-radius: 8px;
}

@media (prefers-reduced-motion: no-preference) {

	.igc-card figure.wp-block-image img {
		transition: transform var(--igc-duree-lente) var(--igc-courbe);
	}

	.igc-card:hover figure.wp-block-image img,
	.igc-card:focus-within figure.wp-block-image img {
		transform: scale(1.03);
	}
}

/* ---------------------------------------------------------------
   3. En-tête
   --------------------------------------------------------------- */
/* En-tête collant. C'est l'élément <header> de la partie de gabarit qui doit
   porter la position collante : posée sur le groupe intérieur, elle n'aurait
   aucune course, son bloc conteneur faisant exactement sa hauteur. */
header.wp-block-template-part:has(> .igc-header) {
	position: sticky;
	top: 0;
	z-index: 30;
}

.igc-header {
	min-height: 72px;
	border-bottom: 1px solid var(--wp--preset--color--beige-20);
	background-color: var(--wp--preset--color--neutral-0);
}

/* Écart de 28px entre les liens — valeur du Figma (24551:249) */

/* Les deux boutons de l'en-tête viennent d'un bloc rendu par le serveur et non
   plus de `core/buttons` : ils n'héritent donc plus des classes de disposition
   que WordPress engendrait. La rangée se pose ici. */
.igc-header__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

.igc-header__actions > .wp-block-button {
	margin: 0;
}

/* ---- Sous-menu « Ressources » ----
   Habillage volontairement sobre en attendant la maquette : carte blanche,
   même filet et mêmes coins que le reste du système. */

/* Le soulignement animé de la barre principale n'a pas de sens dans une
   liste déroulante : chaque entrée y a déjà son propre fond au survol. */

/* L'intitulé « Ressources » ouvre le menu, il ne mène nulle part. */

/* Dans le menu superposé du mobile, les entrées sont déjà dépliées en pleine
   page : la carte flottante n'a plus d'objet et laisse un rectangle blanc
   fantôme sur le fond blanc. On la démonte. */

/* ---------------------------------------------------------------
   3f. Page « Qui sommes-nous »
   --------------------------------------------------------------- */

/* ---- Chapô centré de la section « Nos métiers » (Figma 24665:9709) ---- */
.igc-metiers__chapo {
	max-width: 688px;
}

/* ---- Frise chronologique (Figma 24666:9858) ----
   Le filet traverse toute la largeur à hauteur du milieu des pastilles :
   40px de retrait haut + la moitié des 48px de la pastille = 64px. Les
   pastilles, opaques, le masquent là où elles se posent. */

.igc-frise {
	position: relative;
	display: flex;
	gap: 80px;
	align-items: flex-start;
}

.igc-frise::before {
	content: "";
	position: absolute;
	top: calc(var(--wp--preset--spacing--50) + 24px);
	right: 0;
	left: 0;
	border-top: 1px solid var(--wp--preset--color--beige-20);
}

.igc-frise > * {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
	margin-block: 0;
}

/* Pastille de l'année : 48x48, coins de 4px (Figma 24666:9861) */
.igc-frise__annee {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
}

.igc-frise__annee > * {
	margin-block: 0;
}

/* ---- Bandeau franchise (Figma 24666:9775) ----
   Deux colonnes égales de 592px séparées de 80px, alignées sur le bas :
   la photo mesure 350px de haut, le texte peut la dépasser. */

.igc-franchise {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px;
	align-items: stretch;
}

.igc-franchise > * {
	min-width: 0;
	margin-block: 0;
}

/* La photo suit la hauteur du texte à côté, sans jamais descendre sous les
   350px de la maquette. */
.igc-franchise__photo {
	display: flex;
	min-height: 350px;
}

.igc-franchise__photo figure.wp-block-image {
	flex: 1 1 auto;
	margin: 0;
}

.igc-franchise__photo img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 8px;
	object-fit: cover;
}

/* ---------------------------------------------------------------
   3g. Page « Nos agences »
   --------------------------------------------------------------- */

/* Hero centré : le chapô tient sur 800px, le titre peut déborder de la boîte
   comme dans la maquette (Figma 24668:9911). */
.igc-hero-centre__chapo {
	max-width: 800px;
}

/* ---- Liste d'agences et carte (Figma 24668:10560) ----
   416px de liste, 16px de gouttière, la carte prend le reste. */

.igc-agences {
	display: grid;
	grid-template-columns: 416px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.igc-agences > * {
	min-width: 0;
	margin-block: 0;
}

/* La liste défile ; le fondu vers le blanc, lui, reste en place — il vit donc
   sur l'enveloppe et non sur la zone qui défile. */
.igc-agences__colonne {
	position: relative;
	height: 528px;
}

/* 8px de marge intérieure pour que l'anneau de sélection, qui déborde de la
   carte, ne soit pas rogné par le défilement. La liste ressort d'autant de sa
   colonne par une marge négative : les cartes gardent ainsi leurs 416px et la
   hauteur visible reste de 528px. */
/* `.wp-block-group` en tête : la mise en page en flux de WordPress pose un
   `margin-block` sur les enfants avec la même spécificité que la nôtre, et sa
   feuille est chargée après celle du thème — à égalité, c'est elle qui gagne. */
.wp-block-group.igc-agences__liste {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: calc(100% + 16px);
	margin: -8px;
	padding: 8px;
	overflow-y: auto;
	scrollbar-width: none;
}

.igc-agences__liste::-webkit-scrollbar {
	display: none;
}

.igc-agences__liste > * {
	margin-block: 0;
}

/* Le fondu annonce qu'il reste des agences sous la ligne de flottaison : il
   couvre les 8px de débord de la liste et s'efface une fois le bas atteint,
   sinon il délaverait la dernière carte.

   Son opacité passe par une variable, que le script du bloc carte fait varier.
   Un simple sélecteur d'attribut ne suffirait pas : le navigateur ne
   réévalue pas toujours le style d'un pseudo-élément quand seul un attribut de
   son parent change, alors qu'une variable héritée, elle, redescend toujours. */
.igc-agences__colonne {
	--igc-fondu: 1;
}

.igc-agences__colonne::after {
	opacity: var(--igc-fondu);
	content: "";
	position: absolute;
	right: -8px;
	bottom: -8px;
	left: -8px;
	height: 296px;
	background: linear-gradient(to bottom, transparent 71.34%, var(--wp--preset--color--neutral-0) 100%);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

	.igc-agences__colonne::after {
		transition: opacity 240ms var(--igc-courbe);
	}
}

/* Carte d'agence : 144px de haut, contour beige. La carte active est remplie
   et son contour devient transparent, pour garder exactement la même hauteur. */
.igc-agence-carte {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: space-between;
	height: 144px;
	border: 1px solid var(--wp--preset--color--beige-20);
}

/* Deux gestes distincts sur une même carte : la carte elle-même recentre la
   carte géographique, la flèche ouvre la page de l'agence. La flèche est donc
   le seul lien, et rien ne doit recouvrir le reste de la carte. */
.igc-agence-carte a {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Le curseur ne change que si le script est là pour répondre au clic. */
.igc-agences[data-igc-interactif] .igc-agence-carte {
	cursor: pointer;
}

/* Le remplissage de la carte active vit ici et non dans le balisage : c'est le
   script qui bascule la classe au fil des clics. */
.igc-agence-carte--actif {
	border-color: transparent;
	background-color: var(--wp--preset--color--beige-20);
}

.igc-agence-carte:focus-visible,
.igc-agence-carte:focus-within {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: 2px;
}

.igc-agence-carte > * {
	margin-block: 0;
}

.igc-agence-carte--actif {
	border-color: transparent;
}

.igc-agence-carte__pied {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-end;
	justify-content: space-between;
}

/* La carte de droite (Figma 24725:3969) est le bloc `cabinet-igc/carte` :
   sa mise en forme vit dans le CSS du bloc. */

/* ---- Variante : l'agenda au-dessus, la carte sur toute la largeur ----

   Le module de prise de rendez-vous est une iframe fournie par HubSpot : elle
   se dimensionne elle-même et ne tient pas dans une colonne de 416px, où elle
   débordait de son cadre en hauteur comme en largeur. Sur une page d'agence
   on lui donne donc sa propre bande, et la carte récupère toute la largeur au
   lieu de laisser un vide à gauche.

   C'est une variante, et non le nouveau comportement de `.igc-agences` : sur
   la page « Nos agences », la colonne de gauche porte la liste des agences et
   leurs adresses, et doit rester telle quelle. */

.igc-agences--carte-seule {
	grid-template-columns: minmax(0, 1fr);
}

/* L'agenda garde le cadre beige de l'emplacement qu'il remplace, mais plus sa
   hauteur fixe : c'est l'iframe qui commande, une fois chargée. */
.igc-agenda-agence {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--beige-20);
	border-radius: 8px;
}

/* Emplacement du module de prise de rendez-vous d'une agence : la maquette
   ne montre qu'un cadre vide portant son intitulé, comme pour les
   simulateurs. Le module lui-même reste à fournir. */
.igc-agence-calendrier {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 528px;
	padding: 40px;
	border: 1px solid var(--wp--preset--color--beige-20);
}

.igc-agence-calendrier > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------
   3h. Pages Contact, Prise de rendez-vous et 404
   --------------------------------------------------------------- */

/* L'encadré doré du formulaire est déjà le composant `.igc-contact__cadre`
   de l'accueil : mêmes 32px de retrait, même photo de fond. On le réemploie
   tel quel ici et sur la prise de rendez-vous. */

/* Chapô de la page 404 : 736px au Figma (24551:1673). */
.igc-404__chapo {
	max-width: 736px;
}

/* Module de prise de rendez-vous : 880x879 au Figma (24551:3597). Le panneau
   blanc remplit l'encadré, là où la variante de l'accueil le centre sur sa
   hauteur naturelle. */
.igc-contact__cadre.igc-rdv-cadre {
	width: 880px;
	max-width: 100%;
	height: 879px;
	align-items: stretch;
}

/* ---- Colonnes de la page Contact (Figma 24551:3447) ---- */

.igc-contact .wp-block-columns {
	align-items: stretch;
}

/* La colonne de droite n'est qu'un support : l'encadré doré s'y étire sur
   toute la hauteur, comme les deux colonnes de la maquette. */
.igc-contact__colonne {
	display: flex;
}

.igc-contact__colonne > .igc-contact__cadre {
	flex: 1 1 auto;
}

/* Pastille dorée d'un moyen de contact : 36x36, icône de 20px
   (Figma 24551:3455). */
.igc-tag {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}

.igc-tag figure.wp-block-image,
.igc-tag img {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
}

/* Photo du bas de colonne : 297px de haut (Figma 24551:3468). */
.igc-contact-photo figure.wp-block-image,
.igc-contact-photo img {
	display: block;
	width: 100%;
	height: 297px;
	margin: 0;
	border-radius: 8px;
	object-fit: cover;
}

/* ---------------------------------------------------------------
   3i. Blocs de contenu — corps des articles, guides et définitions

       Ces blocs ne sont pas synchronisés : ils s'insèrent dans le
       texte et se remplissent au cas par cas. Un article n'a pas la
       même suite de sections que le suivant, c'est tout l'intérêt.
   --------------------------------------------------------------- */

/* Dans le corps d'un texte, l'échelle des titres descend d'un cran par rapport
   aux pages de présentation : 32px pour une section, 28px pour une
   sous-section (Figma 24581:8944 et 24581:8948). C'est ce qui place la
   citation détachée, à 28px, juste sous le niveau des sections — et non
   écrasée par des titres de 40px. */

/* L'interligne serré des titres vient de l'affichage : à 40px et sur une seule
   ligne, il fait sa force. Dans un article, un H2 tient souvent sur deux
   lignes — « Comment obtenir votre Prêt à Taux Zéro ? Démarches et
   Simulation » — et les deux lignes se touchaient. On leur rend de l'air sans
   perdre le caractère du dessin. */
.igc-contenu h2 {
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: 1.15;
}

.igc-contenu h3 {
	font-size: var(--wp--preset--font-size--heading-4);
	line-height: 1.2;
}

.igc-contenu h4 {
	line-height: 1.25;
}

/* Colonne de texte : 744px au Figma (24581:8706), 40px entre les blocs. */
.igc-contenu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--50);
}

/* La mise en page contrainte de WordPress centre ses enfants avec des marges
   automatiques. Dans un conteneur flex, une marge automatique fait en plus
   rétrécir l'élément sur son contenu : les titres se retrouvaient centrés et
   au format de leur texte. On les remet au fil du texte. */
.igc-contenu > * {
	margin-block: 0;
	margin-inline: 0 !important;
}

/* Le bandeau photo n'a pas de rembourrage : chaque section qui le suit apporte
   le sien, et c'est très bien tant que cette section est sur fond blanc. Quand
   c'est un bloc à fond plein — le beige de l'accompagnement —, sa couleur
   démarre au ras de l'image et les deux se touchent franchement.

   La règle ne vise donc que ce cas-là, par le voisinage. Poser la marge sur le
   bandeau lui-même l'ajoutait partout, y compris là où le rembourrage de la
   section suivante suffisait déjà : les pages de simulateur se retrouvaient
   avec 228px de blanc. */
.igc-bande-citation + .has-background {
	margin-block-start: var(--wp--preset--spacing--110);
}

/* ---- Lecture longue : le corps des contenus de Ressources ----

   Le Libertinus Serif tient le discours de la marque partout ailleurs, mais un
   guide de 4 000 mots se lit mieux dans une linéale. Inter prend donc le corps
   du texte des articles, des guides et du glossaire. Les titres n'y touchent
   pas : ils gardent le Neue Haas du thème, et la règle ne vise que les
   éléments de texte courant, jamais leurs conteneurs, pour qu'aucun titre
   n'hérite de la police par la bande.

   Le rythme est relevé sur le blog de Finary, pris comme référence : 16px de
   corps, 32px d'interligne — soit le double —, et une colonne d'environ 680px
   qui tient la ligne autour de 75 caractères. Le nôtre en affichait 99, ce qui
   suffit à faire perdre la ligne suivante à l'œil. */

:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-contenu
	:is(p, li, dd, dt, figcaption, cite, address) {
	font-family: var(--wp--preset--font-family--lecture);
	line-height: 2;
}

/* Inter est une police variable : son 700 tape beaucoup plus fort que le gras
   du Libertinus, au point de trouer le paragraphe. Le 600 marque l'accent sans
   arrêter la lecture. */
:is(.single-post, .single-igc_guide, .single-igc_terme)
	:is(.igc-contenu, .igc-fiche__cote) :is(strong, b) {
	font-weight: 600;
}

/* Les cellules de tableau gardent la police mais pas l'interligne : à 32px,
   un tableau de six colonnes devient une page à lui tout seul. */
:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-contenu :is(td, th) {
	font-family: var(--wp--preset--font-family--lecture);
	line-height: 1.5;
}

/* La longueur de ligne. Elle ne s'applique qu'au texte courant : les titres,
   les tableaux et les images gardent la pleine largeur de la colonne, sinon la
   page prendrait deux alignements différents.

   Le sélecteur descend au lieu de viser les enfants directs : le corps d'un
   guide est enveloppé dans un groupe, les paragraphes n'y sont donc jamais au
   premier niveau. Les blocs de mobilier — résumé, encadré, FAQ — ont leur
   propre largeur et sont écartés. */
:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-contenu
	:is(p, ul, ol):not(
		.igc-resume *, .igc-encadre *, .igc-faq *, .igc-cta-contenu *,
		figure *, td *, th *
	) {
	max-width: 42em;
}

/* Les puces se suivaient sans respirer : une liste de huit points formait un
   pâté. On leur donne l'écart d'un demi-interligne. */
:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-contenu :is(ul, ol) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding-left: 1.25em;
}

:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-contenu li::marker {
	color: var(--wp--preset--color--neutral-40);
}

/* Le résumé, les encadrés, la FAQ et la citation à filet vivent dans la même
   colonne : ils suivent la police, mais gardent leur propre interligne, plus
   serré — ce sont des blocs courts, pas du texte au long.

   La citation garde la Neue Haas Light sur les pages d'univers, où elle est un
   élément de mise en page. Dans un article, elle sert d'encart : elle passe
   donc à la police de lecture, au même corps et à la même graisse que le texte
   qui l'entoure. Sans quoi le lecteur change deux fois de police en trois
   lignes, et le gras de la Neue Haas — beaucoup plus lourd — fait de chaque
   terme mis en avant un titre. */
:is(.single-post, .single-igc_guide, .single-igc_terme)
	:is(.igc-resume, .igc-encadre, .igc-faq, .wp-block-quote.is-style-igc-citation, .igc-citation-filet)
	:is(p, li, dd, dt) {
	font-family: var(--wp--preset--font-family--lecture);
	line-height: 1.6;
}

:is(.single-post, .single-igc_guide, .single-igc_terme)
	:is(.wp-block-quote.is-style-igc-citation, .igc-citation-filet) p {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--body-16);
	letter-spacing: 0;
}

/* Le demi-gras, dans les encarts comme dans le texte : le gras plein de l'Inter
   est trop appuyé pour une mise en avant au fil d'une phrase. */
:is(.single-post, .single-igc_guide, .single-igc_terme)
	:is(.igc-resume, .igc-encadre, .igc-faq, .wp-block-quote.is-style-igc-citation, .igc-citation-filet)
	:is(strong, b) {
	font-weight: 600;
}

/* La section des simulateurs vient elle aussi des pages, où son en-tête tient
   sur deux colonnes — le titre à gauche, le chapô à droite — et où ses quatre
   cartes s'alignent d'un bord à l'autre. Dans la colonne d'un article, large de
   744 px, le titre se retrouvait dans 184 px : il tombait en six lignes et
   passait par-dessus le chapô, pendant que les cartes, réduites au quart,
   coupaient le libellé de leurs boutons. On empile donc l'en-tête et on range
   les cartes en deux fois deux. */
:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-simulateurs-section {
	padding-block: var(--wp--preset--spacing--60) 0;
}

:is(.single-post, .single-igc_guide, .single-igc_terme)
	.igc-simulateurs-section .wp-block-group:has(> .igc-entete__gauche) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--20);
}

:is(.single-post, .single-igc_guide, .single-igc_terme)
	.igc-simulateurs-section :is(.igc-entete__gauche, .igc-entete__droite) {
	width: 100%;
	max-width: none;
	flex: none;
}

:is(.single-post, .single-igc_guide, .single-igc_terme)
	.igc-simulateurs-section .igc-entete__gauche h2 {
	font-size: var(--wp--preset--font-size--heading-3) !important;
	line-height: 1.15;
}

:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-simulateurs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

@media (max-width: 600px) {
	:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-simulateurs {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Même raison pour la liste de dispositifs : dans un guide, elle n'ouvre pas
   une section de page, elle continue le texte. Son titre centré en 32 px
   dominait tous les autres titres de l'article, restés à gauche en 26. Elle
   s'aligne donc sur eux, et perd le rembourrage qui la détachait. */
:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-solutions {
	padding-block: 0;
}

:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-solutions__entete {
	align-items: flex-start;
	text-align: left;
}

:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-solutions :is(h2, .igc-solutions__chapo) {
	text-align: left;
}

:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-solutions h2 {
	font-size: var(--wp--preset--font-size--heading-3) !important;
	line-height: 1.15;
}

:is(.single-post, .single-igc_guide, .single-igc_terme)
	.igc-solutions__entete > .is-style-igc-eyebrow {
	display: none;
}

/* La foire aux questions d'un article n'est pas une section de page : c'est une
   section de texte, au même rang que les autres. Elle perd donc son sur-titre
   souligné et son centrage — sur une page d'univers, où elle occupe toute la
   largeur, les deux gardent leur sens. */
:is(.single-post, .single-igc_guide, .single-igc_terme)
	.igc-faq-section__entete > .is-style-igc-eyebrow {
	display: none;
}

:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-faq-section__entete {
	align-items: flex-start;
	text-align: left;
}

/* Dans un article, la colonne espace déjà ses blocs de 40px : le rembourrage
   propre à la section s'y ajoutait et doublait l'écart, au-dessus comme en
   dessous. Sur une page d'univers, où la section vit seule, il garde son sens. */
:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-faq-section {
	padding-block: 0;
}

:is(.single-post, .single-igc_guide, .single-igc_terme) .igc-faq-section__entete h2 {
	text-align: left;
	/* Un titre de section du corps, pas un titre de page. Le `!important` n'est
	   pas un caprice : WordPress marque lui-même ses classes de taille
	   (`has-heading-2-font-size`) en `!important`, et rien ne les reprend sans
	   ça. Le bloc garde sa taille de page partout ailleurs. */
	font-size: var(--wp--preset--font-size--heading-3) !important;
	line-height: 1.15;
}

/* La colonne latérale suit elle aussi — sommaire, appel à l'action, partage.
   Elle longe le texte sur toute la hauteur de la page : en gardant le
   Libertinus, elle faisait une troisième police à l'écran. Deux suffisent :
   le Neue Haas pour ce qui titre, l'Inter pour tout ce qui se lit. */
:is(.single-post, .single-igc_guide, .single-igc_terme)
	.igc-fiche__cote :is(a, li, p, span, dt, dd) {
	font-family: var(--wp--preset--font-family--lecture);
}

/* ---- Encadré (Figma 24581:8394) ---- */

.igc-encadre {
	box-sizing: border-box;
	border-radius: 8px;
	background-color: var(--wp--preset--color--beige-20);
}

/* ---- Résumé de l'article (Figma 24581:8830) ----
   Le bloc qui ouvre l'article : c'est lui que reprennent les moteurs et
   c'est là que s'arrête le lecteur pressé. */

.igc-resume {
	box-sizing: border-box;
	border-radius: 8px;
	background-color: var(--wp--preset--color--beige-20);
}

.igc-resume ul {
	margin: 0;
	padding-left: var(--wp--preset--spacing--30);
}

.igc-resume li {
	opacity: 0.7;
}

.igc-resume li + li {
	margin-top: var(--wp--preset--spacing--10);
}

/* Rangée « Envie d'aller plus loin ? » : les assistants de réponse.
   Poser la question ailleurs qu'ici reste une visite en moins ; autant
   qu'elle parte de l'article, source citée. */
.igc-resume__ia {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}

.igc-resume__ia .wp-block-image,
.igc-resume__ia img {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0;
}

@media (prefers-reduced-motion: no-preference) {

	.igc-resume__ia a {
		transition: opacity var(--igc-duree) var(--igc-courbe);
	}
}

.igc-resume__ia a:hover {
	opacity: 0.6;
}

/* ---- Appel à l'action dans le fil du texte (Figma 24581:9024) ----
   Photo dorée en fond, carte translucide posée dessus. Le retrait haut de
   80px laisse voir la matière avant la carte. */

.igc-cta-contenu {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding: 80px 16px 16px;
	overflow: hidden;
}

.igc-cta-contenu > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-cta-contenu > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-cta-contenu > *:not(figure) {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
}

/* ---- Citation détachée (Figma 24581:8967) ----
   Un filet à gauche, pas de guillemets décoratifs : ce sont ceux du texte
   qui font le travail. */

.wp-block-quote.is-style-igc-citation,
.igc-citation-filet {
	box-sizing: border-box;
	margin: 0;
	padding: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--50);
	border: 0;
	border-left: 1px solid var(--wp--preset--color--neutral-100);
}

/* La taille descend d'un cran, de 28 à 20px : la citation détachée sert aussi
   à porter des blocs longs — une liste de sources, un rappel réglementaire —
   et 28px en faisaient alors un mur. Elle s'aligne du même coup sur les autres
   citations du site, qui sont toutes en heading-5. L'interligne remonte en
   conséquence : 0,93 est fait pour un titre de deux lignes, pas pour un
   paragraphe. */
.wp-block-quote.is-style-igc-citation p,
.igc-citation-filet p {
	margin: 0;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--title);
	/* 45 Light : la Neue Haas ne sert qu'en Light dans la maquette. */
	font-weight: 300;
	font-size: var(--wp--preset--font-size--heading-5);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* ---- Tableau (Figma 24588:9170) ----
   Un vrai <table> et non une grille : c'est ce que lisent les lecteurs
   d'écran et ce que comprennent les moteurs. La maquette ne montre aucun
   filet vertical, seulement des filets entre les lignes. */

.wp-block-table.is-style-igc-tableau {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30);
	border-radius: 8px;
	background-color: var(--wp--preset--color--beige-20);
}

/* Disposition fixe : sans elle, le navigateur répartit les colonnes selon la
   longueur du texte et les deux dernières cessent d'être égales. */
.wp-block-table.is-style-igc-tableau table {
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
}

/* Au-delà de quatre colonnes, la répartition égale devient intenable : les
   tableaux repris du blog en comptent jusqu'à huit, soit 87px par colonne dans
   la colonne de texte — des mots coupés à chaque ligne. Ceux-là reprennent leur
   largeur naturelle et défilent dans leur cadre, qui est déjà en `overflow-x`.
   Les tableaux de quatre colonnes ou moins gardent la disposition fixe. */
.wp-block-table.is-style-igc-tableau:has(tr > :nth-child(5)) table {
	table-layout: auto;
	width: max-content;
	min-width: 100%;
}

.wp-block-table.is-style-igc-tableau:has(tr > :nth-child(5)) :is(th, td) {
	/* Sans plancher, une colonne d'une seule ligne se réduit à un mot. */
	min-width: 9rem;
}

.wp-block-table.is-style-igc-tableau th,
.wp-block-table.is-style-igc-tableau td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) 0;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--neutral-100) 10%, transparent);
	color: var(--wp--preset--color--neutral-100);
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	text-align: left;
	vertical-align: top;
}

.wp-block-table.is-style-igc-tableau thead th {
	padding-top: 0;
	font-weight: inherit;
}

.wp-block-table.is-style-igc-tableau tbody tr:last-child td {
	padding-bottom: 0;
	border-bottom: 0;
}

/* Les 40px séparent deux colonnes ; après la dernière, ils ne séparent rien. */
.wp-block-table.is-style-igc-tableau th:last-child,
.wp-block-table.is-style-igc-tableau td:last-child {
	padding-right: 0;
}

/* Première colonne : 160px au Figma, et elle garde sa pleine opacité —
   c'est l'entrée de ligne, pas du commentaire. */
.wp-block-table.is-style-igc-tableau th:first-child,
.wp-block-table.is-style-igc-tableau td:first-child {
	width: 160px;
}

.wp-block-table.is-style-igc-tableau tbody td:not(:first-child) {
	opacity: 0.7;
}

/* ---- Image de contenu ----
   440px de haut au Figma (24581:8969), coins de 8px, légende discrète. */

.igc-contenu figure.wp-block-image img {
	display: block;
	width: 100%;
	border-radius: 8px;
}

.igc-contenu figure.wp-block-image figcaption {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--neutral-100);
	font-size: var(--wp--preset--font-size--body-12);
	line-height: 1.5;
	opacity: 0.7;
	text-align: left;
}

/* ---------------------------------------------------------------
   3m. Pages légales

   Un titre, puis du texte, sur une colonne à la mesure du corps d'article
   — 744px, la valeur du Figma. Rien d'autre : ni fil d'Ariane, ni sommaire,
   ni visuel. Ces pages se lisent en entier ou pas du tout, elles ne se
   parcourent pas.

   Il n'y a pas de maquette pour cet écran : c'est une proposition, calquée
   sur le gabarit fourni en référence.
   --------------------------------------------------------------- */

.igc-legal__corps > * {
	margin-block: 0;
}

/* Interligne à 1,6 : plus aéré que le corps d'article, parce qu'on lit ici
   des phrases longues et denses, et parce que WCAG 1.4.12 demande au moins
   1,5 sur du texte courant. */
.igc-legal__corps p,
.igc-legal__corps li {
	line-height: 1.6;
}

.igc-legal__corps h2 {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--heading-4);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.igc-legal__corps h3 {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--body-18);
}

.igc-legal__corps ul {
	margin: 0;
	padding-left: var(--wp--preset--spacing--30);
}

.igc-legal__corps li + li {
	margin-top: 8px;
}

/* Dans un texte légal, un lien doit se voir sans survol : on y renvoie à des
   organismes, des médiateurs, une autorité de contrôle. */
.igc-legal__corps a {
	color: var(--wp--preset--color--bleu-100);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Date de dernière mise à jour, en fin de page. */
.igc-legal__maj {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--beige-20);
	color: var(--wp--preset--color--neutral-100);
	font-size: var(--wp--preset--font-size--body-14);
	opacity: 0.7;
}

/* ---------------------------------------------------------------
   3k. Cartes de contenu (Figma 24574:4736)

       Trois formes pour un même objet : la grille des rubriques, la
       mise en avant du dernier contenu, et la ligne horizontale des
       contenus populaires.
   --------------------------------------------------------------- */

.igc-carte {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 8px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--beige-20);

	/* La carte forme son propre plan : la cote posée sur le calque de clic
	   ci-dessous ne vaut alors qu'à l'intérieur d'elle. Sans cela elle entrerait
	   en concurrence avec l'en-tête et les panneaux du menu, qui doivent
	   continuer de passer par-dessus les cartes. */
	isolation: isolate;
}

/* Un seul lien couvre la carte : plus lisible pour un lecteur d'écran qu'un
   lien par élément, et toute la surface reste cliquable.

   Le calque doit monter, sinon il ne reçoit le clic que sur une partie de la
   carte. Trois éléments passaient devant lui, tous placés après lui dans le
   document : le visuel et son étiquette, qui sont positionnés, et l'extrait,
   dont l'`opacity` inférieure à 1 suffit à le peindre dans la même couche
   qu'un élément positionné.

   C'est le lien lui-même qui porte le calque, et non un `::after` : sur le
   pseudo-élément, la moindre `opacity` posée sur le lien — celle du survol,
   par exemple — lui donnerait son propre plan, la cote ci-dessous n'y vaudrait
   plus rien, et le calque retomberait sous l'image. Le pointeur quitterait le
   lien, le survol tomberait, le calque remonterait : la souris se met à
   vibrer. Positionné en propre, le lien garde sa cote quoi qu'il arrive.

   Il ne contient qu'un texte de lecteur d'écran, déjà hors du flux : le sortir
   du flux à son tour ne déplace donc rien dans la carte. */
.igc-carte__lien {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 8px;
}

.igc-carte:focus-within {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: 2px;
}

.igc-carte__visuel {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: flex-start;
	padding: 16px;
	border-radius: 4px;
	overflow: hidden;
}

.igc-carte__visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-carte__visuel .igc-etiquette {
	position: relative;
	z-index: 1;
}

/* Dans le corps d'une carte, l'étiquette est un élément flex : sans cela elle
   s'étirerait sur toute la largeur au lieu de tenir dans son texte. */
.igc-carte__corps .igc-etiquette {
	align-self: flex-start;
}

.igc-carte__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
}

.igc-carte__titre {
	margin: 0;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--title);
	/* 45 Light : la Neue Haas ne sert qu'en Light dans la maquette. */
	font-weight: 300;
	font-size: var(--wp--preset--font-size--heading-4);
	line-height: 0.93;
	letter-spacing: -0.02em;

	/* Trois lignes au plus : au-delà, les cartes d'une même rangée se
	   désalignent et le titre cesse d'être lisible d'un coup d'œil. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.igc-carte__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0;
	margin-top: auto;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--tag);
	/* 45 Light : la police d'étiquette ne sert qu'en Light. */
	font-weight: 300;
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;
}

.igc-carte__point {
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--neutral-100);
}

/* Grille : l'image tient 256px, le texte occupe le reste. */
.igc-carte--grille .igc-carte__visuel {
	height: 256px;
}

/* Mise en avant : l'image prend la hauteur qui reste (Figma 24610:2577). */
.igc-carte--mise-en-avant {
	height: 100%;
	min-height: 562px;
}

.igc-carte--mise-en-avant .igc-carte__visuel {
	flex: 1 1 auto;
	min-height: 256px;
}

/* Horizontale : vignette de 202x166 à gauche, texte à droite. */
.igc-carte--horizontale {
	flex-direction: row;
	align-items: stretch;
	min-height: 182px;
}

.igc-carte--horizontale .igc-carte__visuel {
	flex: 0 0 202px;
	padding: 0;
}

.igc-carte--horizontale .igc-carte__corps {
	gap: var(--wp--preset--spacing--40);
}

.igc-carte__extrait {
	margin: 0;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;
	opacity: 0.7;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

/* ---- Étiquette de thématique (Figma 24574:5078) ----
   Nommée `igc-etiquette` et non `igc-tag` : cette dernière désigne déjà la
   pastille d'icône de la page Contact, en 36x36. Deux composants distincts ne
   peuvent pas partager un nom de classe. */

.igc-etiquette {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--beige-40);
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--tag);
	/* 45 Light : la police d'étiquette ne sert qu'en Light. */
	font-weight: 300;
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;
	text-decoration: none;
	white-space: nowrap;
}

/* L'étiquette retenue s'inverse : fond sombre, texte clair. */
.igc-etiquette--actif {
	background-color: var(--wp--preset--color--beige-100);
	color: var(--wp--preset--color--neutral-0);
}

/* Même raison que pour la bascule : le survol se lit au fond, pas au trait. */
.igc-etiquette--lien:hover,
.igc-etiquette--lien:focus {
	text-decoration: none;
}

.igc-etiquette--lien:not(.igc-etiquette--actif):hover {
	background-color: var(--wp--preset--color--beige-80);
}

/* ---- Tête d'article (Figma 24581:8852) ----
   Photo de 680px à gauche, titre et signature à droite, alignés en bas. */

.igc-tete-article {
	display: grid;
	grid-template-columns: 680px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: end;
}

.igc-tete-article > * {
	min-width: 0;
	margin-block: 0;
}

.igc-tete-article__photo img {
	display: block;
	width: 100%;
	height: 440px;
	border-radius: 8px;
	object-fit: cover;
}

/* Les thématiques du contenu, rendues par core/post-terms : on leur donne
   l'apparence des étiquettes du reste du site. */
.igc-etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.igc-etiquettes a {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--beige-40);
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--tag);
	/* 45 Light : la police d'étiquette ne sert qu'en Light. */
	font-weight: 300;
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.igc-etiquettes a:hover,
.igc-etiquettes a:focus {
	background-color: var(--wp--preset--color--beige-80);
	text-decoration: none;
}

/* Le séparateur que core/post-terms glisse entre deux termes n'a pas de sens
   entre deux pastilles. */
.igc-etiquettes .wp-block-post-terms__separator {
	display: none;
}

/* ---- Encart d'appel dans la colonne latérale (Figma 24581:8909) ----
   Même photo dorée que dans le fil du texte, mais le retrait haut est plus
   généreux : la carte se pose en bas du cadre. */

.igc-cta-cote {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 80px 16px 16px;
	overflow: hidden;
}

.igc-cta-cote > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-cta-cote > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-cta-cote > *:not(figure) {
	position: relative;
	z-index: 1;
	margin: 0;
}

/* ---- Tête de fiche auteur (Figma 24589:9447) ----
   Portrait rond de 200px, nom, biographie sur 776px, réseaux. */

.igc-auteur-tete {
	align-items: center;
	text-align: center;
}

.igc-auteur-tete > * {
	margin-block: 0;
}

.igc-auteur-tete__portrait img {
	display: block;
	width: 200px;
	height: 200px;
	border-radius: 999px;
	object-fit: cover;
}

.igc-auteur-tete__bio {
	max-width: 776px;
	color: var(--wp--preset--color--neutral-100);
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;
	opacity: 0.7;
}

.igc-auteur-tete__bio > * {
	margin-block: 0;
}

/* ---- Navigation par ancres ----
   Le sommaire et les liens internes glissent au lieu de sauter, et la section
   visée s'arrête sous l'en-tête collant plutôt que dessous. */

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

.igc-contenu :is(h2, h3)[id],
.igc-faq [id] {
	scroll-margin-top: 96px;
}

/* La FAQ d'un article occupe la colonne de texte, pas les 880px des pages
   dédiées. */
.igc-contenu .igc-faq {
	width: 100%;
}

/* ---------------------------------------------------------------
   3j. Fiche de contenu — sommaire à gauche, texte à droite
   --------------------------------------------------------------- */

/* Colonne latérale de 400px, gouttière de 120px, texte sur le reste :
   744px à 1264px de contenu (Figma 24581:8693). */
.igc-fiche {
	padding-top: var(--wp--preset--spacing--90);
}

.igc-fiche__grille {
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 120px;
	align-items: start;
}

.igc-fiche__grille > * {
	min-width: 0;
	margin-block: 0;
}

/* Les enfants d'une colonne flex ne doivent pas ajouter la marge que
   WordPress pose au titre de sa mise en page « flux » : elle s'ajoute à
   l'écart de la colonne et le rythme double en silence. */
.igc-fiche__cote > * {
	margin-block: 0 !important;
}

/* Le sommaire accompagne la lecture : il reste sous l'en-tête collant.

   La colonne est bornée à la hauteur de l'écran. Sans cette borne, un sommaire
   de treize entrées la faisait dépasser — et un bloc collant plus haut que
   l'écran voit son bas coupé en permanence : l'appel à l'action qui le termine
   n'était jamais atteignable. C'est le sommaire qui absorbe le manque, en
   faisant défiler sa liste ; tout ce qui le suit garde sa place. */
.igc-fiche__cote {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	max-height: calc(100dvh - 96px - var(--wp--preset--spacing--30));
}

/* Le sommaire cède, le reste non. */
.igc-fiche__cote > * {
	flex: 0 0 auto;
}

.igc-fiche__cote > .igc-sommaire {
	flex: 1 1 auto;

	/* Un élément de boîte flexible refuse de descendre sous la taille de son
	   contenu tant qu'on ne l'y autorise pas. */
	min-height: 0;
}

/* Les enfants s'alignent sur la largeur de la colonne et peuvent descendre
   sous leur largeur naturelle : sans `min-width: 0`, un bloc au contenu large
   — le résumé et ses puces, par exemple — impose sa taille et fait déborder
   toute la page sur un écran étroit. */
.igc-fiche__corps {
	align-items: stretch;
}

.igc-fiche__corps > * {
	min-width: 0;
	max-width: 100%;
	margin-block: 0;
}

/* ---------------------------------------------------------------
   3l. Entrée des sections au défilement

       Une seule règle pour tout le site : 12px de montée et un fondu,
       800ms, une fois. Les cartes d'une même rangée se décalent de
       40ms.

       La courbe est très sortante : l'essentiel du déplacement se joue
       dans le premier tiers, le reste n'est qu'un long repos. C'est ce
       qui rend 800ms posé plutôt que lent.

       Trois endroits en sont volontairement exclus :
       — le hero, parce que retarder le titre et la photo dégrade
         directement le LCP, c'est-à-dire ce que Google chronomètre en
         premier sur un site dont tout l'enjeu est le référencement ;
       — le corps des articles, parce que le lecteur est venu lire et
         que masquer son texte pour le révéler est hostile sur trois
         mille mots ;
       — les chiffres clés, parce qu'un chiffre se lit d'un coup.

       Les classes sont posées par assets/apparition.js : sans
       JavaScript, rien n'est masqué.
   --------------------------------------------------------------- */

.igc-apparait {
	opacity: 0;
	transform: translateY(12px);
	will-change: transform, opacity;
}

.igc-apparait--vu {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: no-preference) {

	.igc-apparait {
		transition:
			opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
			transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: calc(var(--igc-rang, 0) * 40ms);
	}
}

/* ---------------------------------------------------------------
   4. Pied de page
   --------------------------------------------------------------- */
.igc-footer__rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
	opacity: 0.1;
}

/* Largeur de l'accroche : 658,5px au Figma (I24566:1422;24551:149) */
.igc-footer__claim {
	max-width: 660px;
	line-height: 0.92;
	letter-spacing: -0.02em;
}

.igc-footer__columns {
	gap: var(--wp--preset--spacing--110);
}

/* Premier élément de chaque colonne = intitulé de rubrique */
.igc-muted {
	opacity: 0.7;
}

/* Les liens du pied de page ont l'apparence du texte : WordPress souligne les
   liens par défaut, alors que theme.json ne prévoit le soulignement qu'au
   survol — et la maquette montre bien du texte nu.

   La règle de survol de theme.json est enfermée dans un `:where()` : sa
   spécificité tombe à celle du seul `:root`, donc plus basse que celle-ci. Le
   soulignement au survol est donc reposé ici, sans quoi il disparaîtrait. */
.igc-footer a {
	text-decoration: none;
}

@media (max-width: 781px) {

	.igc-footer__columns {
		gap: var(--wp--preset--spacing--50);
	}
}

/* ===============================================================
   3o. Liste de dispositifs (Figma 24598:11243)

   Une liste-tableau : un dispositif à gauche, son bénéfice au milieu,
   un lien à droite. Elle remplace, sur la page Investissement locatif,
   les deux sections qui disaient déjà la même chose deux fois.
   =============================================================== */

/* La section n'est plus faite de groupes WordPress mais d'un bloc rendu par le
   serveur : ses écarts et son rembourrage se posent ici, aux valeurs que le
   motif portait dans ses attributs. */
.igc-solutions {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--110) var(--wp--preset--spacing--50);
}

.igc-solutions > * {
	margin-block: 0;
}

.igc-solutions__entete {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

/* Sur-titre et titre se tiennent : ils forment un seul bloc de titraille, que
   le chapô suit de plus loin. */
.igc-solutions__titres {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.igc-solutions__entete > *,
.igc-solutions__titres > * {
	margin-block: 0;
}

.igc-solutions__chapo {
	max-width: 880px;
}

.igc-solution {
	/* Le glissement vaut la pastille plus son écart : c'est la place qu'elle
	   occupe, et donc exactement ce dont le nom doit s'écarter. Une seule
	   mesure pour les deux, sinon ils divergent en silence. */
	--igc-pastille: 8px;
	--igc-glisse: var(--wp--preset--spacing--30);

	position: relative;
	display: flex;

	/* La maquette centre les trois colonnes : sans cela le nom, plus court que
	   le bénéfice sur deux lignes, se calerait en haut pendant que la pastille
	   viserait le milieu de la ligne. */
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--20);

	/* Un seul filet par intervalle : la maquette dessine bordure haute ET
	   basse sur chaque ligne, ce qui en donnerait deux entre deux voisines. */
	border-bottom: 1px solid var(--wp--preset--color--beige-20);
}

.igc-solution > * {
	margin-block: 0;
}

.igc-solutions__liste > .igc-solution:first-child {
	border-top: 1px solid var(--wp--preset--color--beige-20);
}

/* 424px au total dans la maquette. Au repos le nom les occupe tous ; au
   survol il glisse de 24 vers la droite pour ouvrir la place de la pastille.
   Le rembourrage droit garde 400px de texte utile dans les deux états, pour
   qu'un nom long ne vienne jamais mordre sur la colonne du bénéfice. */
.igc-solution__nom {
	position: relative;

	/* Sans cela le rembourrage s'ajouterait à la base flex et la colonne
	   ferait 448 au lieu de 424, décalant tout ce qui suit. */
	box-sizing: border-box;
	flex: 0 0 424px;
	padding-right: var(--igc-glisse);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* La pastille appartient à la ligne, pas au nom : le nom se déplace au
   survol, et son pseudo-élément se serait déplacé avec lui. Sortie du flux,
   elle n'entre pas dans les colonnes de la ligne malgré le flex. */
.igc-solution::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--igc-pastille);
	height: var(--igc-pastille);
	border-radius: 999px;
	background-color: var(--wp--preset--color--neutral-100);
	content: "";
	margin-top: calc(var(--igc-pastille) / -2);
	opacity: 0;
	transform: translateX(calc(var(--igc-glisse) * -1));
}

.igc-solution__texte {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* Gouttière large : le bénéfice s'arrête 160px avant le lien au lieu de 16.
   Les 144 s'ajoutent à l'écart de 16 que la ligne pose déjà. La maquette
   « Réduire mes impôts » l'emploie parce que ses bénéfices sont longs ; celle
   de l'investissement locatif s'en passe, ses bénéfices tiennent en trois mots. */
.igc-solutions--gouttiere-large .igc-solution__lien {
	margin-inline-start: 144px;
}

.igc-solution__lien {
	flex: 0 0 auto;
	padding-bottom: var(--wp--preset--spacing--10);
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
	line-height: 1.24;
	letter-spacing: -0.02em;
}

.igc-solution__lien a {
	color: var(--wp--preset--color--neutral-100);
	text-decoration: none;
}

/* Une ligne sans destination garde la place de sa troisième colonne — le
   libellé y est écrit mais invisible — et perd son filet : mieux vaut une case
   muette qu'un « En savoir plus » qui ne mène nulle part. C'est cette colonne
   qui règle la hauteur de la ligne et la largeur laissée au bénéfice ; la
   retirer donnerait une ligne plus courte et un bénéfice plus large que ses
   voisines. */
.igc-solution__lien-fantome {
	visibility: hidden;
}

.igc-solution__lien:has(.igc-solution__lien-fantome) {
	border-bottom-color: transparent;
}

/* Toute la ligne est cliquable : le lien s'étend sur elle. Un seul lien
   réel, donc un seul arrêt au clavier par dispositif. */
.igc-solution__lien a::after {
	position: absolute;
	inset: 0;
	content: "";
}

/* L'état de repos n'existe que là où le survol existe. Au doigt il n'y a
   pas de survol : une ligne à 40 % d'opacité y resterait illisible, et un
   lien invisible serait un lien absent. */
@media (hover: hover) {

	.igc-solution__nom,
	.igc-solution__texte {
		opacity: 0.4;
		transition: opacity var(--igc-duree) var(--igc-courbe);
	}

	.igc-solution__lien {
		opacity: 0;
		transition: opacity var(--igc-duree) var(--igc-courbe);
	}

	.igc-solution:hover .igc-solution__nom,
	.igc-solution:hover .igc-solution__texte,
	.igc-solution:focus-within .igc-solution__nom,
	.igc-solution:focus-within .igc-solution__texte,
	.igc-solution:hover .igc-solution__lien,
	.igc-solution:focus-within .igc-solution__lien,
	.igc-solution:hover::before,
	.igc-solution:focus-within::before {
		opacity: 1;
	}
}

/* ---- Le geste de la pastille ----

   Le même que celui des boutons, dans sa moitié entrante : le nom part le
   premier et s'écarte de la place qu'il doit céder, la pastille s'y glisse
   juste après en décélérant franchement. C'est ce décalage de 60ms qui fait
   lire un geste plutôt que deux mouvements simultanés.

   Les courbes sont celles des boutons, pour que le site n'ait qu'un seul
   vocabulaire de mouvement : celle du libellé pour le texte qui s'écarte,
   celle de la pastille entrante pour la pastille. */
@media (prefers-reduced-motion: no-preference) {

	.igc-solution__nom {
		transform: translateX(0);
		transition:
			opacity var(--igc-duree) var(--igc-courbe),
			transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
		will-change: transform;
	}

	.igc-solution::before {
		transition:
			transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 160ms linear;
		will-change: transform, opacity;
	}

	.igc-solution:hover .igc-solution__nom,
	.igc-solution:focus-within .igc-solution__nom {
		transform: translateX(var(--igc-glisse));
	}

	.igc-solution:hover::before,
	.igc-solution:focus-within::before {
		transform: translateX(0);
		transition-delay: 60ms;
	}
}

/* Sans le mouvement, la pastille et le nom prennent leur place d'un coup :
   l'information reste, seul le glissé disparaît. */
@media (prefers-reduced-motion: reduce) {

	.igc-solution__nom,
	.igc-solution__texte,
	.igc-solution__lien,
	.igc-solution::before {
		transition: none;
	}

	.igc-solution:hover .igc-solution__nom,
	.igc-solution:focus-within .igc-solution__nom {
		transform: translateX(var(--igc-glisse));
	}

	.igc-solution:hover::before,
	.igc-solution:focus-within::before {
		transform: translateX(0);
	}
}

/* ===============================================================
   3q. Piliers d'expertise (Figma 24861:4843)

   Un index à gauche qui reste à l'écran, des cartes photo à droite
   qui défilent. L'index suit la carte qu'on lit : même langage que
   la liste de dispositifs — pastille et pleine opacité sur l'actif,
   40 % sur le reste.
   =============================================================== */

.igc-piliers {
	/* Ligne d'ancrage de tout ce qui se colle dans cette section — l'index à
	   gauche, la pile de cartes à droite. 96 = les 72 de l'en-tête collant plus
	   24 de respiration, la même valeur que le sommaire des fiches. */
	--igc-pile: 96px;

	display: grid;

	/* 480 et 664 dans la maquette — la colonne de gauche va de 88 à 568, celle
	   de droite de 688 à 1352 — soit 120 de gouttière. En fractions plutôt
	   qu'en pixels, pour que la section se resserre avec la page sans palier
	   intermédiaire. */
	grid-template-columns: minmax(0, 480fr) minmax(0, 664fr);
	column-gap: 120px;
	padding-block: var(--wp--preset--spacing--50);
}

.igc-piliers > * {
	margin-block: 0;
}

/* La colonne d'index se cale en haut de sa case et y reste. Sans
   `align-self`, la grille l'étirerait sur toute la hauteur des cartes et il
   n'y aurait plus rien à coller. */
.igc-piliers__index {
	display: flex;
	position: sticky;
	top: var(--igc-pile);
	align-self: start;
	flex-direction: column;
	gap: var(--wp--preset--spacing--90);
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--110);
}

.igc-piliers__entete {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.igc-piliers__titres {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.igc-piliers__entete > *,
.igc-piliers__titres > * {
	margin-block: 0;
}

/* 391px dans la maquette : le chapô s'arrête avant le bord de sa colonne. */
.igc-piliers__chapo {
	max-width: 392px;
}

.igc-piliers__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Même trame que la liste de dispositifs, et exactement le même geste : au
   repos l'intitulé est calé à gauche, actif il s'écarte de la place qu'il
   cède à la pastille. */
.igc-piliers__item {
	--igc-pastille: 8px;
	--igc-glisse: var(--wp--preset--spacing--30);

	position: relative;
	padding-block: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--beige-20);
	line-height: 1.2;
	letter-spacing: -0.02em;
	opacity: 0.4;
}

.igc-piliers__liste > .igc-piliers__item:first-child {
	border-top: 1px solid var(--wp--preset--color--beige-20);
}

/* L'intitulé se déplace, la pastille non : elle est donc portée par la ligne
   et pas par le texte, sans quoi elle glisserait avec lui. */
.igc-piliers__item::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--igc-pastille);
	height: var(--igc-pastille);
	margin-top: calc(var(--igc-pastille) / -2);
	border-radius: 999px;
	background-color: var(--wp--preset--color--neutral-100);
	content: "";
	opacity: 0;
	transform: translateX(calc(var(--igc-glisse) * -1));
}

.igc-piliers__item[data-actif] {
	opacity: 1;
	padding-left: var(--igc-glisse);
}

.igc-piliers__item[data-actif]::before {
	opacity: 1;
	transform: translateX(0);
}

/* Le geste des boutons, dans sa moitié entrante : l'intitulé part le premier,
   la pastille s'y glisse 60ms plus tard en décélérant. Mêmes courbes que les
   CTA, pour que le site n'ait qu'un seul vocabulaire de mouvement.

   Ici c'est le rembourrage qui bouge et non une translation : l'intitulé peut
   tenir sur deux lignes, et une translation aurait poussé la seconde hors de
   la colonne. Le rembourrage, lui, replie le texte proprement. */
@media (prefers-reduced-motion: no-preference) {

	.igc-piliers__item {
		transition:
			opacity var(--igc-duree) var(--igc-courbe),
			padding-left 420ms cubic-bezier(0.65, 0, 0.35, 1);
	}

	.igc-piliers__item::before {
		transition:
			transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 160ms linear;
		transition-delay: 60ms;
	}
}

/* ---- Les cartes ---- */

.igc-piliers__cartes {
	/* Les cartes s'empilent au défilement : chacune se cale sur la ligne
	   d'ancrage de la section et la suivante vient glisser par-dessus. Le
	   décalage est ce qui dépasse de chaque carte déjà posée — assez pour
	   qu'on voie la pile se former, assez peu pour ne pas manger le haut de
	   la carte du dessus. */
	--igc-decalage: 16px;

	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--110);
}

/* Le décalage croît d'une carte à l'autre. CSS ne sait pas encore compter les
   frères dans un `calc()` : on écrit donc les rangs, de quoi couvrir large.
   Au-delà, les cartes se posent toutes au même niveau — la pile reste lisible,
   elle cesse simplement de s'étager. */
.igc-pilier:nth-child(2) { top: calc(var(--igc-pile) + 1 * var(--igc-decalage)); }
.igc-pilier:nth-child(3) { top: calc(var(--igc-pile) + 2 * var(--igc-decalage)); }
.igc-pilier:nth-child(4) { top: calc(var(--igc-pile) + 3 * var(--igc-decalage)); }
.igc-pilier:nth-child(5) { top: calc(var(--igc-pile) + 4 * var(--igc-decalage)); }
.igc-pilier:nth-child(6) { top: calc(var(--igc-pile) + 5 * var(--igc-decalage)); }
.igc-pilier:nth-child(7) { top: calc(var(--igc-pile) + 6 * var(--igc-decalage)); }
.igc-pilier:nth-child(n + 8) { top: calc(var(--igc-pile) + 7 * var(--igc-decalage)); }

.igc-pilier {
	/* Sans cela le rapport s'appliquerait à la boîte de contenu et les 32 de
	   rembourrage s'ajouteraient par-dessus : 463 de haut au lieu de 453. */
	box-sizing: border-box;

	/* La carte se colle sous l'en-tête et la suivante vient glisser par-dessus
	   — c'est l'empilement. `sticky` établit aussi le bloc conteneur de la
	   photo de fond, qui n'a donc plus besoin d'un `relative` séparé.
	   La déclaration appartient à cette règle et non à une règle voisine :
	   posée plus haut dans la feuille, elle se ferait écraser par celle-ci. */
	position: sticky;
	top: var(--igc-pile);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;

	/* 40 entre le numéro et le panneau, comme la maquette. `space-between` seul
	   ne garantit rien : dès que la carte fait exactement la hauteur de son
	   contenu — ce qui arrive sur Family Office, où les points détaillés la
	   font grandir — il ne reste plus d'espace à répartir et les deux se
	   touchent. L'écart pose le plancher, `space-between` distribue le reste. */
	gap: var(--wp--preset--spacing--50);

	/* 664 x 453 dans la maquette. En rapport plutôt qu'en hauteur fixe, pour
	   que la carte garde ses proportions quand la colonne se resserre.

	   Le rapport n'est qu'un plancher : les cartes de Family Office portent une
	   liste de points et montent à 574. Pour qu'il le reste, la carte ne doit
	   pas être en `overflow: hidden` — masquer le débordement annule la taille
	   minimale automatique d'un élément flexible, et le rapport devient alors
	   une hauteur fixe qui rogne le texte. Les coins de la photo sont donc
	   arrondis sur la photo elle-même. */
	aspect-ratio: 664 / 453;
	padding: var(--wp--preset--spacing--20);
	border-radius: 8px;

	/* Le compteur qui numérote les pastilles : posé ici plutôt que saisi,
	   pour qu'un pilier déplacé se renumérote tout seul. */
	counter-increment: igc-pilier;
}

.igc-pilier__fond {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	object-fit: cover;
}

.igc-pilier > *:not(.igc-pilier__fond) {
	position: relative;
	z-index: 1;
}

.igc-pilier__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	padding: var(--wp--preset--spacing--10);
	border-radius: 4px;
	background-color: var(--wp--preset--color--beige-80);
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--title);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 300;
	line-height: 0.93;
	letter-spacing: -0.02em;
}

/* `decimal-leading-zero` donne 01, 02… sans qu'on ait à écrire le zéro. */
.igc-pilier__numero::before {
	content: counter(igc-pilier, decimal-leading-zero);
}

.igc-pilier__panneau {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--30);
	border-radius: 6px;
	color: var(--wp--preset--color--neutral-0);
}

.igc-pilier__texte {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.igc-pilier__panneau > *,
.igc-pilier__texte > * {
	margin-block: 0;
}

/* Le corps de la carte est libre : un paragraphe seul, ou un paragraphe suivi
   d'une liste de points. Les écarts sont posés ici plutôt que par la mise en
   page générée de WordPress, qui ne s'applique pas dans un bloc rendu par le
   serveur. */
.igc-pilier__corps > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.igc-pilier__corps ul {
	margin-block: 0;
	padding-left: var(--wp--preset--spacing--30);
}

/* La maquette sépare les points d'une ligne blanche entière, pas d'un simple
   écart : les trois points d'un pilier se lisent comme trois entrées. */
.igc-pilier__corps li + li {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Dans la maquette, l'intitulé du point est en blanc plein et son explication
   à 70 % — même graisse, seule l'opacité change. `.igc-dim` du thème le fait
   déjà ; on l'aère seulement d'une ligne, comme le retour de la maquette. */
.igc-pilier__corps li .igc-dim {
	display: block;
}

.igc-pilier__lien {
	align-self: flex-start;
	padding-bottom: var(--wp--preset--spacing--10);
	border-bottom: 1px solid var(--wp--preset--color--neutral-0);
	line-height: 1.24;
	letter-spacing: -0.02em;
}

.igc-pilier__lien a {
	color: var(--wp--preset--color--neutral-0);
	text-decoration: none;
}

/* Toute la carte est cliquable : un seul lien réel, donc un seul arrêt au
   clavier par pilier. */
.igc-pilier__lien a::after {
	position: absolute;
	inset: 0;
	content: "";
}

/* Le compteur naît sur la pile de cartes, sinon chaque carte repartirait
   de 1. */
.igc-piliers__cartes {
	counter-reset: igc-pilier;
}

/* ===============================================================
   3n. Recrutement (Figma 24858:3506 et 24858:3637)

   Deux sections propres à la page « Nous rejoindre ». La liste des
   offres elle-même est habillée par le bloc `cabinet-igc/offres` ;
   ce qui suit ne traite que leur enrobage.
   =============================================================== */

/* ---- Hero ----
   Même charpente que les autres heros à deux colonnes : c'est la rangée
   de chiffres, imbriquée dans la colonne de texte au lieu d'un bandeau
   autonome, qui empêche de réutiliser `hero-page-interieure` tel quel. */

.igc-hero-rejoindre__photo img {
	height: 100%;
	object-fit: cover;
}

.igc-hero-rejoindre__photo .wp-block-image,
.igc-hero-rejoindre__photo figure {
	height: 100%;
	margin: 0;
}

/* Les trois chiffres se partagent la largeur à parts égales, séparés par
   un filet. Le filet appartient aux deuxième et troisième colonnes : posé
   sur toutes, il en resterait un pendu au bord droit. */

/* La colonne de texte du hero est un groupe flex vertical : WordPress y cale
   ses enfants sur leur contenu. Sans cet étirement, la rangée de chiffres ne
   fait que la largeur de ses trois libellés et les colonnes se resserrent. */
.igc-chiffres-hero {
	align-self: stretch;
}

.igc-chiffres-hero > .wp-block-group {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

/* Le filet est tracé DANS l'écart, pas dans la colonne : posé en bordure, il
   mangerait 24px à deux colonnes sur trois et les trois libellés ne feraient
   plus la même largeur. Le Figma les veut égales — 158,67px chacune pour
   572px de colonne, soit deux écarts de 48px. */
.igc-chiffres-hero > .wp-block-group + .wp-block-group::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--wp--preset--spacing--60) / -2);
	border-left: 1px solid var(--wp--preset--color--beige-20);
	content: "";
}

.igc-chiffres-hero__nombre {
	line-height: 0.92;
	letter-spacing: -0.02em;
}

/* ---- Fiche d'une offre (Figma 24858:2924) ----
   Le miroir de la fiche de guide : le texte à gauche, la colonne d'appui
   de 400px à droite, même gouttière de 120px. On ne réécrit donc que
   l'ordre des colonnes, pas la grille. */

.igc-fiche--cote-droit {
	padding-top: var(--wp--preset--spacing--50);
}

.igc-fiche--cote-droit .igc-fiche__grille {
	grid-template-columns: minmax(0, 1fr) 400px;
}

/* La maquette décale la colonne d'appui de 40px sous le corps : le texte
   commence à 40px du haut, la carte à 80px. */
.igc-fiche--cote-droit .igc-fiche__cote {
	padding-top: var(--wp--preset--spacing--50);
}

/* La maquette groupe la carte et le récapitulatif à 24px l'un de l'autre,
   puis laisse 40px avant le bloc de partage. Sans ce groupe, les trois
   éléments héritaient du même écart. */
.igc-offre-cote__haut {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.igc-offre-cote__haut > * {
	margin-block: 0 !important;
}

/* La photo de la carte est l'image à la une de l'offre, donc une figure
   `wp-block-post-featured-image` et non `wp-block-image` : la règle de
   `.igc-cta-cote` ne l'attrapait pas. */
.igc-offre-cote > .igc-offre-cote__fond {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-offre-cote > .igc-offre-cote__fond img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-offre-cote > *:not(.igc-offre-cote__fond) {
	position: relative;
	z-index: 1;
	margin: 0;
}

/* Sans image à la une, la carte garderait un fond nu : on lui donne le
   beige du thème plutôt qu'un trou blanc. */
.igc-offre-cote {
	background-color: var(--wp--preset--color--beige-20);
}

/* ---- Section des offres ----

   La section n'a pas besoin de toute la largeur du contenu : trois lignes
   d'offre y occupaient 1264px pour un texte qui en tient 300, avec le titre
   collé à gauche et les filtres à l'autre bout de l'écran. On la borne à 880px
   — la même largeur que le site donne déjà à ses autres blocs centrés, chapôs
   et questions fréquentes. La gouttière du gabarit est ajoutée à la borne pour
   que le rembourrage reste celui des autres sections.

   La maquette pose les filtres sur la même ligne que le titre, poussés à
   droite. Or ils sont rendus par le bloc, donc imbriqués d'un niveau de
   plus que le titre. `display: contents` sur le bloc fait remonter ses
   enfants dans la grille de la section : les filtres deviennent alors une
   cellule voisine du titre, sans dupliquer le balisage ni sortir la
   requête du bloc. */

.igc-offres-section {
	box-sizing: border-box;
	max-width: calc(880px + 2 * clamp(1rem, 6.1vw, 5.5rem));
	margin-inline: auto;
}

@media (min-width: 782px) {

	.igc-offres-section {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		column-gap: var(--wp--preset--spacing--40);
		row-gap: var(--wp--preset--spacing--40);
	}

	/* Sur la fiche d'une offre il n'y a pas de filtres : la deuxième colonne
	   est vide, mais sa gouttière rognait quand même 32px à l'en-tête, et
	   « Voir toutes les offres » n'atteignait pas le bord du contenu. */
	.igc-offres-section:not(:has(.igc-offres__filtres)) {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.igc-offres-section > .igc-offres {
		display: contents;
	}

	/* La mise en page contrainte de WordPress pose `margin-inline: auto` sur
	   les enfants de la section. Dans une grille, ces marges automatiques
	   centrent chaque cellule au lieu de la caler, et elles priment sur
	   `justify-self`. WordPress les écrit en `!important` : c'est la seule
	   raison pour laquelle on en remet un ici. */
	.igc-offres-section > * {
		margin-inline: 0 !important;
	}

	/* L'en-tête occupe toute sa colonne. Calé sur son contenu, il n'avait
	   pas de place où pousser « Voir toutes les offres » : le lien se
	   collait au titre au lieu de rejoindre le bord droit. */
	.igc-offres-section__entete {
		grid-column: 1;
		grid-row: 1;
		justify-self: stretch;
		width: 100%;
	}

	.igc-offres-section .igc-offres__filtres {
		grid-column: 2;
		grid-row: 1;
		justify-content: flex-end;
	}

	.igc-offres-section .igc-offres__liste,
	.igc-offres-section .igc-offres__vide,
	.igc-offres-section .igc-pagination {
		grid-column: 1 / -1;
	}
}

/* ---- Pagination — carrés de 48px (Figma 24574:4795) ----

   Trois blocs l'écrivent : le hub des ressources, la liste des offres et les
   contenus d'un auteur. Ses règles vivaient dans la feuille du seul hub, qui
   n'est chargée que là où ce bloc est présent — la pagination des pages auteur
   se retrouvait donc nue, réduite à « 123…7 » souligné. Un composant partagé
   par trois blocs appartient au thème. */

.igc-pagination {
	display: flex;
	gap: 0;
	align-items: center;
}

.igc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-18);
	line-height: 1.2;
	text-decoration: none;
	opacity: 0.5;
}

.igc-pagination .page-numbers:hover {
	opacity: 1;
}

.igc-pagination .page-numbers.current {
	border-radius: 4px;
	background-color: var(--wp--preset--color--beige-20);
	opacity: 1;
}

.igc-pagination .page-numbers.dots {
	opacity: 0.5;
}

.igc-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: -2px;
	border-radius: 4px;
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {

	.igc-pagination .page-numbers {
		transition: opacity var(--igc-duree) var(--igc-courbe),
			background-color var(--igc-duree) var(--igc-courbe);
	}
}

/* ===============================================================
   5. Adaptation aux petits écrans

   Le socle est déjà fluide : la gouttière du site est un `clamp`
   (16px à 88px), les tailles de police aussi, et les interlignes
   mobiles viennent du UI Kit. Ce qui suit ne traite donc que les
   mises en page — toutes bâties sur une grille de 1264px qui ne
   peut pas rétrécir seule.

   Trois paliers, et pas un de plus :
     1200px  l'ordinateur portable : les grandes gouttières se
             resserrent, les colonnes fixes deviennent souples ;
      900px  la tablette : tout ce qui est en deux colonnes passe
             en une, les grilles de trois passent à deux ;
      600px  le téléphone : une seule colonne partout.

   Les maquettes mobiles n'existent pas : ces valeurs sont des
   choix d'intégration, revoyables à réception du Figma.
   =============================================================== */

@media (max-width: 1200px) {

	/* Les gouttières de 120px sont taillées pour 1440 : elles mangent la
	   moitié de l'écran dès qu'il se réduit. */

	/* La colonne photo passe de 680 à ~500px à ce palier. Plutôt qu'une
	   nouvelle hauteur en dur, on applique dès ici le traitement retenu plus
	   bas : hauteur naturelle, plafonnée. À 500px de colonne l'image fait
	   333px de haut, soit son rapport de 1,50 — plus près des 1,55 du Figma
	   qu'un recadrage. Le plafond reprend la main dès que la colonne
	   s'élargit. */
	.igc-tete-article__photo img {
		height: auto;
		max-height: 360px;
	}

	/* Les témoignages restaient à trois colonnes jusqu'à 900. À 1120 chacune
	   ne fait déjà plus que 279px et la citation, en corps 20, tombe à 28
	   signes par ligne. Deux par rangée leur rendent une mesure lisible dès
	   ce palier.

	   `grid-template-columns` ne servirait à rien : `.igc-avis__grille` est un
	   `core/columns`, donc un flex.

	   `!important` est ici le seul recours, et il est assumé : au-dessus de
	   782px le cœur de WordPress pose lui-même
	   `.wp-block-columns { flex-wrap: nowrap !important }`. Aucune
	   spécificité ne bat un `!important` — il faut lui répondre. Le
	   `flex-basis` juste en dessous, lui, passe sans forcer. */
	.wp-block-columns.igc-avis__grille {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.igc-avis__grille > .igc-avis {
		flex-basis: calc(50% - var(--wp--preset--spacing--20));
		flex-grow: 1;
	}

	/* La frise chronologique est une rangée de quatre jalons séparés par 80px.
	   Elle est étroite par dessein — 256px par jalon à 1440, soit 26 signes
	   par ligne — mais en dessous de ce palier elle descend à 20 puis 16, et
	   on ne lit plus rien.

	   La frise passe donc en colonne : un jalon par ligne. Le filet horizontal,
	   qui n'a de sens que sur une rangée, s'efface avec elle. */
	.igc-frise {
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
	}

	.igc-frise::before {
		content: none;
	}

	/* À l'intérieur du jalon, en revanche, la pastille reprend sa place à
	   GAUCHE du texte plutôt qu'au-dessus. Empilé, chaque jalon occupait
	   142px de haut pour deux lignes utiles ; côte à côte il en fait 110, la
	   pastille et son année restent solidaires de leur libellé, et la lecture
	   reste celle d'une frise et non d'une liste de blocs.

	   Le sélecteur porte deux classes : la direction et l'écart viennent de la
	   classe de mise en page que WordPress génère pour le groupe, à
	   spécificité égale et servie dans le <head>, donc plus tardive que la
	   feuille du thème. */
	.igc-frise > .wp-block-group {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--20);
		align-items: center;
	}

	/* La pastille garde ses 48px de maquette et ne se laisse ni étirer ni
	   comprimer. */
	.igc-frise__annee {
		flex: 0 0 48px;
	}

	/* Le libellé prend la place restante. `min-width: 0` est indispensable :
	   sans lui, un élément flex refuse de descendre sous la largeur de son
	   plus long mot et le texte débordait à droite. */
	.igc-frise > .wp-block-group > *:not(.igc-frise__annee) {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* La tête du hub descend d'un palier de plus que les autres grilles : sa
	   pile contient des cartes horizontales dont la vignette de 202px est
	   fixe. À 1120 la carte ne fait plus que 423px, il reste 157px de mesure
	   pour l'extrait — vingt signes par ligne. */
	.igc-hub__tete {
		grid-template-columns: minmax(0, 1fr);
	}

	.igc-fiche__grille {
		grid-template-columns: 320px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--90);
	}

	.igc-tete-article {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}

	.igc-agences {
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	}

	.igc-stats-trio {
		gap: var(--wp--preset--spacing--90);
	}

	.igc-stats-trio > * + *::before {
		left: calc(var(--wp--preset--spacing--90) / -2);
	}

	.igc-franchise {
		gap: var(--wp--preset--spacing--60);
	}
}

/* --- En-tête de section : intitulé au-dessus du chapô ------------------ */

/* `.igc-entete__droite` est en `flex: 0 0 520px` — une valeur de maquette 1440.
   Dès que la zone de contenu passe sous ~1100px, ces 520px rigides ne laissent
   presque rien à la colonne de gauche : 96px mesurés à 768px, pour un titre qui
   se casse alors sur 274px de hauteur.

   Rendre simplement la droite flexible, comme le faisait la règle précédente,
   aggravait le mal : avec `flex-basis: auto` des deux côtés, l'espace va à celui
   dont le contenu a la plus grande largeur intrinsèque — le chapô, d'une seule
   coulée, contre un titre qui se coupe entre les mots. La gauche tombait alors
   à 131px à 900px, contre 230px sans règle du tout.

   La seule mise en page correcte à cette largeur est l'empilement. Le conteneur
   n'a pas de classe propre — c'est un groupe WordPress générique posé par le
   motif —, d'où le `:has()` sur son enfant.

   Le palier est celui de la barre de navigation (1119px) : c'est la même cause,
   une mise en page 1440 qui ne tient plus, et le site gagne à n'avoir qu'un
   seul seuil « la composition desktop rend la main ». */

@media (max-width: 1119px) {

	.wp-block-group:has(> .igc-entete__gauche) {
		flex-direction: column;
		align-items: flex-start;
	}

	.igc-entete__gauche,
	.igc-entete__droite {
		flex: 1 1 auto;
		max-width: none;
	}

	/* Les grilles à deux pistes de la maquette 1440 rendent la main ici, et
	   non à 900 : entre les deux, leur colonne étroite descend sous ce qu'un
	   texte peut occuper. Le cas le plus net est la pile du hub, où la carte
	   horizontale tombait à 339px — moins sa vignette de 202px, il restait
	   78px de mesure, soit dix signes par ligne. */
	.igc-tete-article,
	.igc-franchise,
	.igc-agences {
		grid-template-columns: minmax(0, 1fr);
	}


}

/* Les deux cartes de `.igc-cards--hauteur-fixe` font 496px de large dans un
   conteneur en `flex-wrap: wrap` : elles se replient dès que la zone de
   contenu passe sous ~1000px, soit vers 1150px de fenêtre. C'est là que la
   hauteur imposée de 560px — une valeur de rangée unique en 1440 — cesse de
   pouvoir les contenir, bien avant le palier de 900. La rangée rend la main,
   chaque carte reprend la hauteur de son contenu ; `align-items: stretch`
   reste en place, donc deux cartes d'une même ligne continuent de s'aligner,
   et la photo absorbe l'écart par son `height: 100%`. */

@media (max-width: 1150px) {

	.igc-cards--hauteur-fixe,
	.igc-cards--hauteur-fixe .igc-card {
		height: auto;
	}

	/* Corollaire indispensable : la photo est en `height: 100%` pour absorber
	   l'écart entre deux cartes de textes inégaux. Dès que la carte n'a plus
	   de hauteur, ce 100% ne résout plus rien et l'image reprend sa taille
	   source — 1500px de haut pour l'une des deux. On lui rend donc une
	   proportion, celle des visuels de carte de la maquette (400x256). */
	.igc-cards--hauteur-fixe .igc-card > figure.wp-block-image {
		flex: 0 0 auto;
	}

	.igc-cards--hauteur-fixe .igc-card > figure.wp-block-image img {
		height: auto;
		aspect-ratio: 25 / 16;
	}
}

@media (max-width: 900px) {

	/* --- Les largeurs imposées de la home rendent la main --- */

	.igc-article--petit,
	.igc-avantage--photo,
	.igc-hero-gp__poles {
		flex: 1 1 auto;
		width: auto;
	}

	.igc-avantages,
	.igc-hero-gp__media {
		flex-wrap: wrap;
	}

	/* --- Tout ce qui est en deux colonnes passe en une --- */

	.igc-hero-rp .wp-block-columns,
	.igc-contact .wp-block-columns {
		flex-direction: column;
	}

	/* Ces deux compositions ont leurs colonnes en grille et non en flex
	   (ligne 544, pour que les deux pistes restent égales malgré les
	   rembourrages). L'empilement mobile de WordPress agit sur `flex-basis` :
	   il est sans effet sur une grille, et les colonnes restaient côte à côte
	   jusqu'à 390px. C'est donc la piste qu'il faut ramener à une colonne. */
	.igc-hero-simu > .wp-block-columns,
	.igc-pedago .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Les 40px du Figma alignent ce texte sur la coque voisine ; empilés, ils
	   ne font plus qu'ajouter au rembourrage de section. */
	.igc-hero-simu__texte {
		padding-top: 0;
	}

	/* Au Figma cette photo prend la place que la carte des pôles laisse : elle
	   n'a pas de hauteur propre à transposer. Une fois la colonne empilée, il
	   n'y a plus de place restante et le `height: 100%` de la règle de base
	   (ligne 667) n'a plus de hauteur de référence. On rend la main à l'image,
	   sans recadrage ajouté. */
	.igc-hero-gp__photo {
		flex: 0 0 auto;
	}

	.igc-hero-gp__photo figure.wp-block-image,
	.igc-hero-gp__photo img {
		height: auto;
	}

	.igc-hero-rp .wp-block-column,
	.igc-contact .wp-block-column {
		flex-basis: auto !important;
	}

	/* La photo du hero passe sous le texte : sur un écran étroit, le titre
	   doit rester la première chose lue. */
	.igc-hero-rp__photo {
		order: 2;
	}

	.igc-hero-rp__photo img {
		height: auto;
		max-height: 420px;
	}


	/* --- Les hauteurs de la maquette 1440 rendent la main --- */

	/* Le hero est en alignfull : 1416x740 au Figma, un cadre en 1,91. À 900px
	   le cadre ne fait plus que 876 : on redescend le plancher pour rester
	   dans la même famille de proportion, et on rend au texte les 32px de
	   rembourrage qu'il ne peut plus payer. */
	.igc-hero-photo {
		min-height: 560px;
		padding: 40px;
	}

	/* Le voile du Figma est un dégradé à 100°, transparent dès 68 % : il est
	   pensé pour une boîte large où le texte n'occupe que le tiers gauche.
	   Empilé, ce texte prend 87 % de la largeur et 92 % de la hauteur — la
	   moitié des lignes se retrouvait en blanc sur photo claire.

	   On garde l'intention (assombrir pour lire) en changeant l'axe : vertical,
	   plus dense en bas où le texte se termine, et jamais complètement
	   transparent puisqu'il n'y a plus de zone sans texte à préserver. Les
	   valeurs restent dans la famille du Figma, dont le maximum est 62 %. */
	.igc-hero-photo::after {
		background: linear-gradient(
			to top,
			color-mix(in srgb, var(--wp--preset--color--neutral-100) 72%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--neutral-100) 58%, transparent) 60%,
			color-mix(in srgb, var(--wp--preset--color--neutral-100) 44%, transparent) 100%
		);
	}

	/* 592x680 au Figma, un cadre en 0,87 : cette carte est portrait par
	   dessein, la photo n'est qu'un fond pour la citation en verre. On garde
	   l'intention en descendant le plancher, et le rapport entre la carte et
	   sa variante bandeau (560/680) est conservé. */
	.igc-carte-photo {
		min-height: 480px;
	}

	.igc-carte-photo--bande {
		min-height: 400px;
	}

	/* 1264x560 au Figma, un bandeau en 2,26. À 790px de cadre, 400px de haut
	   redonnent 1,98 : la bande reste une bande. */
	.igc-bande-photo {
		min-height: 400px;
	}

	/* Sauf quand le bandeau de chiffres est posé dessus : il passe alors à
	   trois rangées et ne laissait plus voir la photo. */
	.igc-bande-photo--bas {
		min-height: 560px;
	}

	/* Les 344px sont calés sur une colonne de 421 (1264/3). Dès qu'elle
	   rétrécit, la photo doit rétrécir avec elle plutôt que de virer au
	   portrait. */
	.igc-avis > figure.wp-block-image img {
		height: auto;
		max-height: 344px;
		aspect-ratio: 421 / 344;
	}

	/* Pleine largeur, la carte mise en avant n'a plus de colonne à remplir :
	   c'est le visuel qui redonne la hauteur, au rapport des visuels de carte
	   de la maquette (400x256), au lieu d'un bandeau étiré par `flex`. */
	.igc-carte--mise-en-avant {
		min-height: 0;
	}

	.igc-carte--mise-en-avant .igc-carte__visuel {
		flex: 0 0 auto;
		min-height: 0;
		max-height: 448px;
		aspect-ratio: 25 / 16;
	}

	.igc-franchise__photo {
		min-height: 0;
	}

	.igc-franchise__photo img {
		height: auto;
		max-height: 320px;
	}

	/* La carte géographique n'a plus de colonne à remplir : on lui donne une
	   hauteur qui reste lisible sans dévorer l'écran. */
	.igc-agences__colonne {
		height: 420px;
	}

	/* `height: auto` ne marche pas ici : l'iframe est en `height: 100%`, et
	   dans un parent sans hauteur définie elle retombe sur les 150px que le
	   HTML donne par défaut à une iframe. Il faut donc une valeur ferme.

	   Le sélecteur doit nommer le bloc, pas la seule classe `.igc-carte` : le
	   thème s'en sert AUSSI pour les cartes de contenu du blog et des guides,
	   qu'un `height: 320px` tronquait. Et il lui faut deux classes : la règle
	   de base vit dans la feuille du bloc, chargée après celle du thème, donc
	   à spécificité égale c'est elle qui l'emporterait. */
	.wp-block-cabinet-igc-carte.igc-carte {
		height: min(var(--igc-carte-hauteur, 528px), 320px);
	}

	/* --- La fiche : le texte avant la colonne d'appui ---
	   Le sommaire garde sa place en tête, mais l'encadré d'appel et les
	   boutons de partage passent après l'article : personne ne partage un
	   texte qu'il n'a pas encore lu. `display: contents` fait remonter les
	   enfants dans la grille, seul moyen de les réordonner. */

	.igc-fiche__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	.igc-fiche__cote {
		display: contents;
	}

	.igc-sommaire {
		order: 1;
	}

	.igc-fiche__corps {
		order: 2;
	}

	.igc-cta-cote {
		order: 3;
	}

	.igc-partage {
		order: 4;
	}

	/* --- Grilles de cartes : trois colonnes deviennent deux --- */

	.wp-block-group.igc-cards.igc-cards--trois {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.igc-programmes,
	.igc-simulateurs,
	.igc-articles,
	.igc-avis__grille,
	.igc-avantages__ligne {
		flex-wrap: wrap;
		height: auto;
	}

	/* `.igc-article` nu ne correspond à aucun élément : le balisage n'écrit
	   que `--large` et `--petit`. La règle ne servait à rien. */
	.igc-programme,
	.igc-simulateur,
	.igc-article--large,
	.igc-article--petit,
	.igc-avis,
	.igc-avantage:not(.igc-avantage--photo) {
		flex: 1 1 clamp(260px, 45%, 100%);
	}

	/* La rangée ne fait plus 440px : la grande carte tient sa hauteur de son
	   propre rapport de maquette (797 x 440). */
	.igc-article--large {
		height: auto;
		aspect-ratio: 797 / 440;
	}

	/* La photo de la petite carte n'a plus 427px de large : ses 240px de haut
	   la rendaient presque carrée. Même rapport qu'en 1440. */
	.igc-article--petit > figure.wp-block-image img {
		height: auto;
		aspect-ratio: 427 / 240;
	}

	/* Sans hauteur de rangée, la carte programme se replie sur son texte et
	   l'affiche verticale disparaît : on garde son rapport de maquette.
	   `max-height` borne le seul cas où il dérape — entre 601 et 900 les
	   cartes tiennent à deux par ligne et la troisième, seule sur la suivante,
	   est étirée par `flex-grow`. */
	.igc-programme {
		height: auto;
		aspect-ratio: 411 / 567;
		max-height: 567px;
	}

	/* Le dégradé couvrait 307 des 567px, soit 54 % : en proportion, il garde
	   la même assise sous le titre quelle que soit la hauteur de la carte. */
	.igc-programme::after {
		height: 54%;
	}

	/* --- Chiffres : le filet vertical n'a plus de sens sur deux lignes --- */

	.igc-stats-trio {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--60);
	}

	.igc-stats-trio > * {
		flex: 1 1 40%;
	}

	.igc-stats-trio > * + *::before {
		content: none;
	}

	/* --- Appels à l'action : la carte n'a plus de largeur fixe --- */

	.igc-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.igc-cta__carte {
		flex: 1 1 auto;
		width: auto;
	}

	.igc-cta__carte .igc-dim {
		max-width: none;
	}

	/* La photo d'accompagnement disparaît : conservée, elle ne serait plus
	   qu'une bande de 240px sans rapport avec la mise en page. */
	.igc-cta__photo {
		display: none;
	}

	/* Seul élément des trois pour lequel ces 16px sont un ajout et non une
	   réduction : il n'a pas de règle de base. */
	.igc-cadre-dore {
		padding: var(--wp--preset--spacing--20);
	}

	/* Les deux encarts dorés, eux, ont 80px de retrait haut en base — ce n'est
	   pas de la marge, c'est la bande de photo que la carte laisse voir. Un
	   rembourrage uniforme de 16px la faisait disparaître, c'est-à-dire la
	   composition même du bloc. 40px, la moitié de la valeur de maquette,
	   gardent la même proportion de matière visible sur un cadre deux fois
	   moins haut. */
	.igc-cta-contenu,
	.igc-cta-cote {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	}

	/* Deux classes, et non `.igc-rdv-cadre` seul : la règle de base (ligne
	   1999) pèse 0,2,0 et impose `height: 879px`. Un `min-height` posé à
	   0,1,0 ne pouvait pas la contredire — la règle précédente était sans
	   effet. `width` était dans le même cas ; seul le `max-width: 100%` de
	   la base sauvait la mise. */
	.igc-contact__cadre.igc-rdv-cadre {
		width: 100%;
		height: auto;
		min-height: 520px;
	}

	/* Les 40px du Figma alignent ce texte sur le haut de l'encadré doré.
	   Les colonnes étant empilées à partir d'ici, il n'y a plus rien à
	   aligner : ce ne serait qu'un blanc de plus au-dessus du titre. */
	.igc-contact__gauche {
		padding-top: 0;
	}

	/* La coque du module de rendez-vous d'agence n'a plus de colonne voisine
	   dont épouser la hauteur : elle se réduit dans la même proportion que
	   la colonne d'agences juste au-dessus (528 → 420). */
	.igc-agence-calendrier {
		height: 400px;
	}

	.igc-histoire > .wp-block-group.is-layout-flex,
	.igc-agences-section > .wp-block-group.is-layout-flex {
		flex-direction: column;
		align-items: flex-start;
	}

	/* --- Pied de page : l'accroche et son bouton l'un sous l'autre --- */

	/* La rangée haute du pied est en `nowrap` avec `space-between` : à 390px
	   l'accroche prend toute la place et le bouton était comprimé à 44px de
	   large pour 430 de haut — une lettre par ligne. Le groupe n'a pas de
	   classe propre, d'où le `:has()` sur l'accroche. */
	.igc-footer .wp-block-group:has(> .igc-footer__claim) {
		flex-direction: column;
		align-items: flex-start;
		row-gap: var(--wp--preset--spacing--40);
	}

	/* --- Tableaux : on préfère un défilement horizontal à un texte illisible --- */

	/* `overscroll-behavior-x: contain` empêche le geste de défilement de se
	   propager au document une fois le bout du tableau atteint : sans lui, sur
	   Chrome Android, poursuivre le geste déclenche le retour arrière et fait
	   perdre la page. */
	.wp-block-table.is-style-igc-tableau {
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	.wp-block-table.is-style-igc-tableau table {
		table-layout: auto;
		min-width: 520px;
	}

}

/* --- Témoignages : le filet suit la mise en page ----------------------- */

/* 781px n'est pas un choix d'intégration : c'est la largeur exacte à laquelle
   le cœur de WordPress empile `.wp-block-columns` — et `.igc-avis__grille` en
   est un, `.igc-avis` une colonne. Aucun palier du thème ne coïncide, et il
   n'existe aucune plage où le filet pendrait au milieu d'une rangée : entre
   782 et 900 le `flex-wrap: nowrap !important` du cœur garde les trois
   colonnes sur une ligne, où elles se contentent de rétrécir. Poser la
   bascule à 900 ou à 600 serait faux. */

@media (max-width: 781px) {

	/* Le filet beige sépare deux témoignages voisins. Empilés, « voisin » veut
	   dire au-dessus et non à gauche : même trait, même couleur, même
	   épaisseur, il pivote avec la mise en page. */
	.igc-avis {
		border-top: 1px solid var(--wp--preset--color--beige-20);
		border-left: 0;
	}

	/* Le premier témoignage est déjà borné par le coin arrondi de la grille. */
	.igc-avis:first-child {
		border-top: 0;
	}
}

@media (max-width: 600px) {

	/* --- Corps d'article : les retraits calés sur une colonne de 744px --- */

	/* La gouttière de 40px entre colonnes est taillée pour une table large.
	   Sur téléphone la table défile déjà : au cran inférieur, chaque colonne
	   rend 16px de texte sans rien changer à la composition. */
	.wp-block-table.is-style-igc-tableau th,
	.wp-block-table.is-style-igc-tableau td {
		padding-right: var(--wp--preset--spacing--30);
	}

	/* Le filet reste, le retrait descend d'un cran : la citation continue de
	   se détacher du fil du texte sans lui prendre un huitième de la ligne. */
	.wp-block-quote.is-style-igc-citation,
	.igc-citation-filet {
		padding-left: var(--wp--preset--spacing--30);
	}

	/* 40px est le retrait par défaut du navigateur, pas une valeur de la
	   maquette. À 24px, celui qu'emploie déjà le bloc « résumé » pour ses
	   puces, les deux listes d'une même page s'alignent enfin. */
	.igc-contenu ul,
	.igc-contenu ol {
		padding-left: var(--wp--preset--spacing--30);
	}

	/* Les 52px de retrait de la réponse ne sont pas un espacement choisi :
	   c'est 40 (l'écart de la question) + 12 (la largeur de l'icône), pour
	   que la réponse s'arrête exactement où s'arrête la question. On garde
	   cette égalité en descendant l'écart d'un cran : 24 + 12 = 36. */
	.igc-faq summary {
		gap: var(--wp--preset--spacing--30);
	}

	.igc-faq .wp-block-details > *:not(summary) {
		padding-right: calc(var(--wp--preset--spacing--30) + 12px);
	}

	/* --- Contact et prise de rendez-vous --- */

	/* Le plancher redescend d'un cran pour se rapprocher du carré du Figma :
	   342 x 400 donne 0,86, contre 0,66 avec les 520px du palier précédent. */
	.igc-contact__cadre.igc-rdv-cadre {
		min-height: 400px;
	}

	/* Le principe de l'encadré — une photo qui déborde tout autour de la
	   carte blanche — est conservé, mais 32px de retrait de chaque côté
	   prennent 64 des 342px du téléphone. À 16px la carte gagne 32px de
	   largeur et la photo reste visible sur les quatre côtés.
	   La seconde règle est le pendant de celle de la ligne 1416 : WordPress
	   annule la marge basse du dernier enfant d'un layout flow. */
	.igc-contact__cadre > *:not(figure) {
		margin: 16px;
	}

	.igc-contact__cadre > *:not(figure):last-child {
		margin-block-end: 16px;
	}

	/* 297px sont taillés pour une colonne de 572px : la photo y est une
	   bande à 1,93. Empilée sur un téléphone, cette hauteur fixe la rend
	   presque carrée. On remplace la hauteur par le rapport, qui est ce que
	   porte la maquette ; l'`object-fit: cover` des règles de base garde le
	   même cadrage. */
	.igc-contact__gauche > figure.wp-block-image img,
	.igc-contact-photo figure.wp-block-image,
	.igc-contact-photo img {
		height: auto;
		aspect-ratio: 572 / 297;
	}

	.igc-agence-calendrier {
		height: 320px;
		padding: 24px;
	}

	/* 40px sur une coque de 310px, c'est un quart de la largeur perdu. On
	   descend d'un cran d'espacement, sans changer le dessin. La règle vaut
	   pour les deux emplois de la coque : le hero des pages simulateur et
	   l'encadré doré de la page rendez-vous. */
	.igc-hero-simu__panneau {
		padding: var(--wp--preset--spacing--30);
	}

	/* 586px était la hauteur d'une carte de 540px de large (rapport 0,92).
	   En pleine largeur sur téléphone on garde ce rapport plutôt que la
	   valeur : 342 de large appellent ~400 de haut. */
	.igc-hero-simu__carte {
		min-height: 400px;
	}

	/* Les 394px du Figma valent pour une carte de 416px de large. En pleine
	   largeur à 342px, la même proportion demande 320px. */
	.igc-simulateurs--trio .igc-simulateur {
		min-height: 320px;
	}

	/* 56px de rembourrage de chaque côté mangent 31 % de la largeur et font
	   passer le chapô de 400 signes à 17 lignes. À 24px la colonne de texte
	   remonte de 254 à 318px, et la boîte de 901 à ~680px de haut — le
	   cadrage passe de 0,41 à 0,54. */
	.igc-hero-photo {
		min-height: 480px;
		padding: 24px;
	}

	/* --- Une seule colonne partout --- */

	.wp-block-group.igc-cards.igc-cards--trois,
	.igc-avis__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.igc-programme,
	.igc-simulateur,
	.igc-article--large,
	.igc-article--petit,
	.igc-avis,
	.igc-stats-trio > * {
		flex: 1 1 100%;
	}

	/* La carte horizontale n'a plus la place de tenir sa vignette de côté. */
	.igc-carte--horizontale {
		flex-direction: column;
	}

	/* En deux colonnes la carte descend jusqu'à ~256px de large : une hauteur
	   fixe de 256px y donne un visuel carré, puis un bandeau une fois la carte
	   en pleine largeur. Le rapport de la maquette (400x256) tient sur toute
	   la plage, la hauteur suit la largeur. */
	.igc-carte--grille .igc-carte__visuel {
		height: auto;
		aspect-ratio: 25 / 16;
	}

	/* Seule sur sa ligne, la grande carte d'article n'a plus de voisine dont
	   épouser la hauteur. À 342 de large, le rapport 797/440 ne donnerait que
	   189px — moins que son titre sur quatre lignes, que l'`overflow: hidden`
	   couperait. On rend la main au contenu, avec un plancher au gabarit
	   mobile du thème. */
	.igc-article--large {
		aspect-ratio: auto;
		min-height: 320px;
	}

	.igc-carte--horizontale .igc-carte__visuel {
		flex: 0 0 auto;
		aspect-ratio: 25 / 16;
	}

	.igc-carte--mise-en-avant {
		min-height: 0;
	}

	/* --- Titres de section et blocs de texte --- */

	.igc-lies__entete {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
	}

	.igc-metiers__chapo,
	.igc-404__chapo,
	.igc-hero-centre__chapo,
	.igc-auteur-tete__bio,
	.igc-footer__claim,
	.igc-onglets__intro {
		max-width: none;
	}

	/* --- Fiche auteur --- */

	.igc-auteur-tete__portrait img {
		width: 140px;
		height: 140px;
	}

	/* --- Cible tactile : la flèche d'une carte d'agence est le seul lien
	       de la ligne ; ses 34px passent sous le seuil confortable. --- */

	.igc-agence-carte .igc-fleche {
		position: relative;
	}

	.igc-agence-carte .igc-fleche a::after {
		content: "";
		position: absolute;
		inset: -8px;
	}

	.igc-agence-carte {
		height: auto;
		min-height: 144px;
	}

	.igc-agence-carte__pied {
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
		align-items: flex-start;
	}

	/* --- En-tête ---
	   Le logo, le menu et l'appel à l'action doivent tenir sur une ligne. Le
	   bouton secondaire cède la place, le retrait se resserre et l'appel
	   principal descend d'un cran de taille. */

	/* Le libellé au gabarit 1440 (16px de rembourrage, 20px réservés à la
	   pastille) est plus large que la colonne qu'il occupe une fois les
	   grilles repliées : « Explorer la gestion de patrimoine » demande 292px
	   pour 278 disponibles et casse sur trois lignes. On resserre le
	   rembourrage et l'écart de la pastille — la variable partagée garde
	   l'animation alignée toute seule.

	   L'en-tête est exclu : il a déjà ses propres réglages, plus bas.

	   Réserve : ces largeurs sont mesurées dans la police de SECOURS, la
	   vraie fonte du Figma n'étant pas encore installée. À revalider le jour
	   où elle arrive. */
	/* 8px de rembourrage collaient le libellé aux bords. 12px lui rendent de
	   l'air sans le faire casser : au corps 16, le plus long libellé qui
	   tienne encore sur une ligne demande 231px, plus 24 de rembourrage et 16
	   réservés à la pastille, soit 271 pour 278 disponibles dans une carte.
	   12 n'est pas un cran d'espacement du système, c'est un réglage optique
	   de contrôle — comme les 10 et 12px déjà employés dans l'en-tête. */
	.wp-block-buttons:not(.igc-header__actions) .wp-block-button__link {
		--igc-marge: 12px;
		--igc-ecart: 8px;

		font-size: var(--wp--preset--font-size--body-16);
		line-height: 1.2;
	}

	.wp-block-buttons:not(.igc-header__actions) .igc-btn__label {
		text-wrap: balance;
	}

	.igc-header__actions .wp-block-button.is-style-igc-glass {
		display: none;
	}

	/* La barre est en `space-between` : sans cela le groupe de boutons se
	   laisse comprimer et le libellé casse sur trois lignes alors que la
	   place ne manque pas. */

	.igc-header__actions {
		flex-shrink: 0;
	}

	/* `.wp-block-button` inséré : le `padding-inline` de la règle de base
	   pèse 0,3,0 et écraserait ces réglages restés à 0,2,0. */
	.igc-header__actions .wp-block-button .wp-block-button__link {
		min-height: 44px;
		padding: 10px 12px;
		font-size: var(--wp--preset--font-size--body-16);
		white-space: nowrap;
	}

	/* --- Héros : le rythme des sections est trop généreux en tête de page ---

	   Les crans fluides donnent 64px de retrait vertical à 390px. C'est juste
	   pour une section au milieu du fil, trop pour un héros, qui est déjà
	   séparé de l'en-tête et dont le titre doit apparaître haut dans l'écran.
	   24px suffisent. */

	/* `!important` est le seul recours : ces retraits sont posés en style
	   inline par les motifs (`padding-top:var(--wp--preset--spacing--70)` et
	   `--80`), et un style inline ne se bat pas à la spécificité. Les crans 70
	   et 80 valent 56 et 64px fixes — ils ne font pas partie des quatre crans
	   passés en clamp, qui ne concernent que le rythme des sections. Corriger
	   le balisage plutôt que la feuille demanderait de rouvrir les motifs ET
	   les copies synchronisées en base : disproportionné pour un réglage de
	   palier. */
	.igc-hero,
	.igc-hero-rp,
	.igc-hero-simu,
	.igc-hero-immo,
	.igc-hero-centre {
		padding-top: var(--wp--preset--spacing--30) !important;
		padding-bottom: var(--wp--preset--spacing--30) !important;
	}

	/* Les autres pages ouvrent sur une section qui n'est pas un héros mais
	   joue le même rôle. Seul le haut est ramené à 24px : leur retrait bas
	   sépare du contenu qui suit, il n'a pas la même fonction. */
	.igc-contact,
	.igc-rdv,
	.igc-hub-entete,
	.igc-legal {
		padding-top: var(--wp--preset--spacing--30) !important;
	}

	/* Retraits internes qui s'ajoutaient à celui de la section : dans la
	   maquette ils alignent une colonne sur sa voisine, mais une fois les
	   colonnes empilées ils ne font plus que repousser le titre. */
	.igc-hero-rp__texte,
	.igc-contact > .wp-block-columns > .wp-block-column:first-child,
	.igc-hero-centre > .wp-block-group:first-child,
	.igc-rdv > .wp-block-group:first-child {
		padding-top: 0 !important;
	}

	/* --- Encadrés et cartes : moins de retrait --- */

	.igc-encadre {
		padding: var(--wp--preset--spacing--30);
	}

	.igc-carte__corps {
		padding: var(--wp--preset--spacing--20);
	}
}

/* Sous 400px, la barre n'a plus la largeur pour un libellé à 16px à côté du
   logo et du menu. Le bouton descend d'un cran dans l'échelle typographique
   plutôt que d'être tronqué ou masqué : « Je prends rendez-vous » reste
   l'action principale du site, y compris sur le plus petit téléphone. */

@media (max-width: 400px) {

	.igc-header__actions .wp-block-button .wp-block-button__link {
		padding-right: 10px;
		padding-left: 10px;
		font-size: var(--wp--preset--font-size--body-14);
	}
}

/* --- Bascule du menu principal ----------------------------------------- */

/* Quatre intitulés français longs, un logo et deux boutons : la barre a besoin
   d'environ 1000px pour tenir sur une ligne. En dessous, WordPress ne bascule
   pas de lui-même — son menu superposé n'arrive qu'à 600px — et les entrées se
   replient sur deux lignes, faisant passer l'en-tête de 72 à 105px.

   On avance donc la bascule à 1119px. Resserrer l'espacement des entrées ne
   suffisait pas : il aurait fallu descendre à 8px, trop serré pour une barre
   de cabinet. Les sélecteurs sont volontairement plus spécifiques que ceux de
   WordPress, dont la feuille est chargée après celle du thème. */

/* ---------------------------------------------------------------
   Menu superposé du mobile

   WordPress fournit ici le balisage et l'ouverture ; le dessin, lui,
   n'existe nulle part — il n'y a pas de maquette de ce menu. Ce qui suit
   est donc une proposition, à remplacer quand le Figma arrivera.

   Parti pris : le fond passe au bleu nuit du bouton principal plutôt qu'au
   blanc par défaut, les entrées s'alignent à gauche et se séparent d'un
   filet, elles arrivent en cascade, et l'appel à l'action ferme la liste.
   Rien n'est décoratif : chaque règle remplace un défaut de WordPress.
   --------------------------------------------------------------- */

/* --- Le bouton d'ouverture et sa croix --- */

/* Les deux icônes de WordPress sont des SVG en dur, de gabarits différents.
   On les remplace par un tracé unique en pseudo-éléments : même épaisseur,
   même longueur, la croix n'est que les deux traits pivotés. */

/* Deux traits séparés de 7px, centrés dans la cible de 44px. */

/* --- Le panneau --- */

/* `!important` sur le fond : le cœur de WordPress pose lui-même
   `background-color: inherit !important` sur le panneau ouvert, pour qu'il
   reprenne celui de l'en-tête. Aucune spécificité ne bat un `!important`. */

/* L'enveloppe intermédiaire est en hauteur automatique : sans cette ligne, le
   `height: 100%` du panneau se mesurait sur le contenu et non sur l'écran, et
   le panneau devenait plus haut que la fenêtre. */

/* La croix se cale sur la même gouttière que le bouton qui l'a ouverte :
   elle reste exactement là où le pouce vient de quitter l'écran. */

/* WordPress intercale un conteneur de contenu qui porte lui aussi un retrait
   haut de 56px : cumulé aux 80px du panneau, il repoussait l'appel à l'action
   sous la ligne de flottaison. Le retrait est déjà donné par le panneau. */

/* --- Les entrées --- */

/* `!important` sur l'alignement : le cœur de WordPress centre la liste du
   panneau. Centré, chaque entrée n'occupe que la largeur de son texte — les
   filets de séparation devenaient des tirets de longueurs inégales et rien ne
   s'alignait. Une liste de navigation se lit au bord gauche. */

/* Le sélecteur descend jusqu'au `li` pour passer devant la règle de zones
   tactiles, qui pose 44px sur la même cible et vit plus bas dans le fichier. */

/* --- Le sous-menu « Ressources » --- */

/* Déjà déplié en pleine page : il devient un retrait, pas une carte. */
/* Le sous-menu du panneau est le morceau le plus verrouillé du composant :
   WordPress lui impose largeur, marges, retrait et centrage. On reprend la
   main sur ces quatre points seulement, pour qu'il se lise comme un retrait
   sous « Ressources » et non comme une liste flottante au milieu. */

/* --- L'appel à l'action, en pied de liste --- */

/* C'est une entrée de navigation, pour qu'elle vive dans le même panneau que
   les autres ; elle ne se montre que là où ce panneau existe. */
.igc-header .igc-menu__cta {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
	border: 0;
}

@media (min-width: 1120px) {

	/* Au-delà de la bascule, la barre a déjà son bouton : l'entrée ferait
	   doublon. */
	.igc-header .igc-menu__cta {
		display: none;
	}
}

/* --- Mouvement --- */

@media (prefers-reduced-motion: no-preference) {

	/* Les entrées arrivent l'une après l'autre, de 60ms en 60ms. `backwards`
	   leur applique l'état de départ avant même le début du délai : sans lui,
	   elles clignoteraient à pleine opacité le temps d'une image. */

	/* Au survol, les deux traits se rapprochent : un signe de vie, rien de plus. */
}

/* --- Zones tactiles --------------------------------------------------- */

/* Au doigt, une cible de moins de 44px se rate. On agrandit la zone sensible
   sans toucher au dessin : une pastille transparente en ::after, centrée sur
   le lien, porte le clic.

   Les hauteurs ne sont pas uniformes : deux cibles voisines dont les zones se
   chevauchent, c'est la seconde qui devient inatteignable. Chaque valeur est
   donc bornée par l'écart mesuré entre l'élément et son voisin du dessous —
   étiquettes 8px d'écart, liens de pied 18px. Le sommaire, lui, a des liens
   jointifs : il reste à 38px, au-dessus du minimum WCAG de 24px. */

@media (max-width: 900px) {

	.igc-fil__lien,
	.igc-etiquette--lien,
	.igc-lies__tout,
	.igc-partage__bouton,
	.igc-bascule__lien,
	.igc-footer__columns a,
	.igc-etiquettes a,
	a[href^='tel:'],
	a[href^='mailto:'] {
		position: relative;
	}

	.igc-fil__lien::after,
	.igc-etiquette--lien::after,
	.igc-lies__tout::after,
	.igc-partage__bouton::after,
	.igc-bascule__lien::after,
	.igc-footer__columns a::after,
	.igc-etiquettes a::after,
	a[href^='tel:']::after,
	a[href^='mailto:']::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		height: 44px;
		translate: 0 -50%;
	}

	/* Les thématiques rendues par core/post-terms portent `.igc-etiquettes`
	   et non `.igc-etiquette--lien` : elles avaient été oubliées. Comme les
	   autres étiquettes, la pastille est bornée à 32px par le `row-gap` de
	   8px du conteneur — au-delà, deux rangées se chevaucheraient et la
	   seconde deviendrait inatteignable. */
	.igc-etiquette--lien::after,
	.igc-etiquettes a::after {
		height: 32px;
	}

	.igc-footer__columns a::after {
		height: 36px;
	}

	/* Dans le pied, téléphone et adresse sont des liens de liste comme les
	   autres : ils héritent des 36px, pas des 44px. */

	.igc-footer__columns a[href^='tel:']::after,
	.igc-footer__columns a[href^='mailto:']::after {
		height: 36px;
	}

	/* Le logo et le bouton du menu sont des boutons à part entière : on les
	   agrandit pour de bon, le dessin étant centré dans la boîte. */

	.custom-logo-link {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

}

/* Le menu superposé est du mobilier WordPress, absent du Figma : son bouton
   d'ouverture à 24px, sa croix et ses entrées à 20px sont dimensionnés pour la
   souris. On les met au gabarit du doigt — sur toute la plage où ce menu
   existe, soit jusqu'à 1119px, et non jusqu'à 900px comme le reste. */

@media (max-width: 1119px) {

	/* Le bouton du menu passe après l'appel à l'action, à l'extrémité droite
	   de la barre : c'est le bord que le pouce atteint le plus facilement, et
	   l'ordre de lecture reste logo → action → menu. Le palier est celui du
	   menu superposé, pour que l'ordre ne change pas en cours de plage. */
}

/* ---- Recrutement, petits écrans ----
   Les trois chiffres tiennent encore sur une ligne à 390px : on resserre
   l'écart plutôt que de les empiler, une colonne de trois nombres serait
   plus haute que le reste du hero. */

@media (max-width: 600px) {

	.igc-chiffres-hero {
		gap: var(--wp--preset--spacing--30);
	}

	.igc-chiffres-hero > .wp-block-group + .wp-block-group::before {
		left: calc(var(--wp--preset--spacing--30) / -2);
	}

	/* La photo d'équipe est un portrait de 992x1200 : sans contrainte, elle
	   occuperait un écran entier une fois les colonnes empilées. */
	.igc-hero-rejoindre__photo img {
		aspect-ratio: 3 / 2;
	}
}

/* Une carte plus haute que la place disponible ne peut pas se coller sans
   qu'on en perde le bas : elle reprend alors le fil normal du défilement. */
@media (max-height: 700px) {

	.igc-pilier {
		position: static;
	}
}

/* ---- Piliers d'expertise, petits écrans ----
   Une colonne : rien à coller, et l'index n'a plus de cartes à suivre. Il
   redouble alors mot pour mot les intitulés qui le suivent immédiatement,
   sans rien apporter — on le retire. */

@media (max-width: 900px) {

	.igc-piliers {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.igc-piliers__index {
		position: static;
		gap: var(--wp--preset--spacing--40);
		padding-bottom: var(--wp--preset--spacing--50);
	}

	.igc-piliers__liste {
		display: none;
	}

	.igc-piliers__cartes {
		padding-top: 0;
	}

	/* La carte cesse de tenir son rapport : à 400px de large, 453 de haut
	   laisserait le panneau déborder de la photo. */
	.igc-pilier {
		aspect-ratio: auto;
		min-height: 420px;
	}
}

/* ---- Liste de dispositifs, petits écrans ----
   La colonne de nom fixée à 424px ne tient plus : la ligne passe en pile,
   nom puis bénéfice puis lien, et garde son filet de séparation. */

@media (max-width: 900px) {

	.igc-solution {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--10);
	}

	.igc-solution__nom,
	.igc-solution__texte,
	.igc-solution__lien {
		flex: 1 1 100%;
	}

	/* Empilée, la ligne n'a plus de colonne à céder : le nom reprend toute
	   la largeur et la pastille n'a plus lieu d'être — il n'y a pas de survol
	   au doigt. */
	.igc-solution__nom {
		padding-right: 0;
	}

	.igc-solution__lien,
	.igc-solutions--gouttiere-large .igc-solution__lien {
		align-self: flex-start;
		flex-basis: auto;
		margin-top: var(--wp--preset--spacing--10);
		margin-inline-start: 0;
	}

	/* Empilée, la ligne ne tire plus sa hauteur ni sa largeur de sa troisième
	   colonne : une case muette n'a donc plus rien à y réserver. */
	.igc-solution__lien:has(.igc-solution__lien-fantome) {
		display: none;
	}
}

/* ---------------------------------------------------------------
   3p. Corps d'une offre (Figma 24858:2962)

   Trois trames qui reviennent dans le texte d'une offre : des points
   numérotés, une rangée de cartes, et des lignes intitulé/texte.
   --------------------------------------------------------------- */

/* ---- Respiration entre les sections d'une offre ----

   La maquette pose 40px de rembourrage au-dessus de chaque titre de
   section, qui s'ajoutent aux 40px d'écart entre blocs : une section
   commence donc à 80px de la précédente. Le premier titre en est
   dispensé, il suit déjà le filet de la ligne de repères. */

.igc-fiche--cote-droit .igc-contenu > * + h2 {
	padding-top: var(--wp--preset--spacing--50);
}

/* ---- Encart chiffres d'une offre (Figma 24858:3267) ----

   Une bande de 280px sur photo, et par-dessus une carte en dégradé qui
   prend toute la largeur, les quatre chiffres alignés de gauche à droite.
   Les visuels sont ceux de `bandeau-chiffres-cles`, la mise en page non :
   celle-là empile ses chiffres dans une colonne de 300px. */

.igc-offre-chiffres {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 280px;
	padding: var(--wp--preset--spacing--20);
	overflow: hidden;
}

.igc-offre-chiffres > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-offre-chiffres > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

.igc-offre-chiffres__carte {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	overflow: hidden;
}

.igc-offre-chiffres__carte > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.igc-offre-chiffres__carte > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* La mise en page « flux » de WordPress pose une marge haute sur tous les
   enfants sauf le premier : dans une rangée, elle décalerait les trois
   derniers chiffres. Sa règle passe après la nôtre. */
.igc-offre-chiffres > *,
.igc-offre-chiffres__carte > * {
	margin-block: 0 !important;
}

.igc-offre-chiffres__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

/* Le filet est tracé dans l'écart, pour que les quatre colonnes gardent
   exactement la même largeur. */
.igc-offre-chiffres__item + .igc-offre-chiffres__item::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--wp--preset--spacing--40) / -2);
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--neutral-100) 20%, transparent);
	content: "";
}

@media (max-width: 900px) {

	.igc-offre-chiffres {
		height: auto;
	}

	.igc-offre-chiffres__carte {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--30);
	}

	.igc-offre-chiffres__item {
		flex-basis: calc(50% - var(--wp--preset--spacing--40));
	}
}

/* ---- Lignes intitulé / texte (Avantages, Processus) ---- */

.igc-offre-lignes {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/* Alignement sur la ligne de base, et non sur le haut des boîtes.

   L'intitulé est en 20px d'interligne 1,1, le texte en 16px d'interligne 1,24,
   et les deux ne sont pas dans la même police. Alignés par le haut, leurs
   premières lignes tombent à deux hauteurs différentes — de quelques pixels,
   mais l'œil les voit. `baseline` fait coïncider les deux premières lignes,
   ce qui est ce que la maquette montre. */
.igc-offre-ligne-def {
	display: flex;
	gap: var(--wp--preset--spacing--105);
	align-items: baseline;
}

.igc-offre-ligne-def + .igc-offre-ligne-def {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--beige-20);
}

.igc-offre-ligne-def__intitule {
	flex: 0 0 240px;
}

.igc-offre-ligne-def__texte {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---- Cartes de profil ---- */

.igc-offre-cartes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

/* La mise en page « flux » de WordPress pose une marge haute sur tous les
   enfants sauf le premier. Dans une grille, cette marge décale les cartes
   suivantes à l'intérieur de leur cellule : elles finissent à la même
   hauteur que la première mais commencent 8px plus bas, donc plus courtes.
   Sa règle est écrite après la feuille du thème, d'où le `!important`. */
.igc-offre-cartes > *,
.igc-offre-lignes > * {
	margin-block: 0 !important;
}

.igc-offre-carte {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	min-height: 240px;
	padding: var(--wp--preset--spacing--20);
	border-radius: 8px;
	background-color: var(--wp--preset--color--beige-20);
}

@media (max-width: 900px) {

	.igc-offre-cartes {
		grid-template-columns: minmax(0, 1fr);
	}

	.igc-offre-carte {
		min-height: 0;
	}

	.igc-offre-ligne-def {
		flex-direction: column;
		gap: var(--wp--preset--spacing--10);
	}

	.igc-offre-ligne-def__intitule {
		flex-basis: auto;
	}
}

@media (max-width: 1119px) {

	.igc-fiche--cote-droit .igc-fiche__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	/* Empilée, la colonne d'appui n'a plus rien à accompagner. */
	.igc-fiche--cote-droit .igc-fiche__cote {
		position: static;
		padding-top: 0;
	}

	/* Sous le palier où `display: contents` remonte les enfants de la colonne
	   dans la grille, l'ordre de la source reprend ses droits : le
	   récapitulatif passerait alors AVANT le titre, qui vit dans le corps.
	   On fixe donc la séquence — l'offre, puis ses conditions, puis les deux
	   invitations à agir. */
	.igc-fiche--cote-droit .igc-fiche__corps {
		order: 2;
	}

	.igc-fiche--cote-droit .igc-offre-recap {
		order: 3;
	}

	.igc-fiche--cote-droit .igc-cta-cote {
		order: 4;
	}

	.igc-fiche--cote-droit .igc-partage {
		order: 5;
	}
}

/* Chapô d'une archive de thématique : la description du terme, quand elle
   est renseignée. Même largeur que les autres chapôs de rubrique. */
.igc-hub-entete__chapo {
	max-width: 736px;
	margin-inline: auto;
}

/* Une colonne du pied de page.
   Les colonnes viennent d'un menu et non plus de groupes WordPress : elles
   portent donc leur propre classe, au lieu des classes de disposition que le
   moteur de blocs engendrait. Mêmes réglages qu'avant — pile verticale,
   1 rem entre les liens. */
.igc-pied__colonne {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.igc-pied__colonne > p {
	margin: 0;
}

/* ===============================================================
   Bande de chiffres clés (Figma 25111:4559)

   Une rangée de repères chiffrés séparés par un filet. Employée en
   tête des pages du site franchisé, juste sous le hero ; rien ne la
   réserve à ce site.
   =============================================================== */

.igc-bande-chiffres {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--80);
	align-items: stretch;
	justify-content: center;
}

.igc-bande-chiffres > * {
	flex: 1 1 0;
	min-width: 140px;
	margin: 0;
	text-align: center;
}

/* Le filet entre deux repères. Porté par la bordure du suivant plutôt
   que par un élément à part : un séparateur n'est pas un contenu, et
   il disparaît de lui-même quand les repères passent à la ligne. */
.igc-bande-chiffres > * + * {
	position: relative;
}

.igc-bande-chiffres > * + *::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--wp--preset--spacing--80) / -2);
	border-left: 1px solid var(--wp--preset--color--neutral-20);
}

.igc-bande-chiffres__valeur {
	margin: 0 0 16px;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--title);
	font-size: var(--wp--preset--font-size--heading-1);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.03em;
}

.igc-bande-chiffres__intitule {
	margin: 0;
	color: var(--wp--preset--color--neutral-100);
	font-size: var(--wp--preset--font-size--body-18);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

@media (width <= 900px) {

	.igc-bande-chiffres {
		gap: var(--wp--preset--spacing--40);
	}

	.igc-bande-chiffres > * + *::before {
		display: none;
	}

	.igc-bande-chiffres__valeur {
		font-size: var(--wp--preset--font-size--heading-3);
	}
}

/* Fond déjà composité — les heros du site franchisé.

   Leur image de fond est exportée de la maquette avec ses calques : la photo,
   la toile texturée masquée à gauche et le voile assombrissant. Tout y est
   déjà, et le voile du thème viendrait s'ajouter par-dessus. */
.igc-hero-photo--fond-composite::after {
	content: none;
}

/* ---------------------------------------------------------------------------
   Le carrousel a le dernier mot
   ---------------------------------------------------------------------------

   Ces déclarations répètent celles du bloc « Le carrousel de témoignages »,
   plus haut. Ce n'est pas un oubli : elles sont ici, en fin de feuille, parce
   que la cascade se joue à l'ordre.

   La piste des témoignages porte aussi `igc-avis__grille` dans le contenu de
   la page, et sous 900px le thème replie cette classe-là :

       @media (width <= 900px) { …, .igc-avis__grille, … { flex-wrap: wrap } }

   Même spécificité, règle écrite plus loin : elle gagnait. Les six cartes
   passaient à la ligne, la piste ne débordait plus, et le script n'ajoutait
   aucune flèche — un carrousel qui ressemblait à une grille figée.

   On aurait pu retirer la classe de la page. Mais la page appartient à la
   cliente, qui l'édite : une mise en page ne doit pas tenir à une classe
   qu'un copier-coller peut ramener. Le thème tranche donc lui-même, et le
   carrousel reste un carrousel quoi que porte le balisage.
   --------------------------------------------------------------------------- */

.igc-carrousel {
	display: flex;
	flex-wrap: nowrap;
	height: auto;
	overflow-x: auto;
	overflow-y: hidden;
}

.igc-carrousel > * {
	flex: 0 0 calc(100% / var(--igc-carrousel-vues, 3));
}

/* ---------------------------------------------------------------------------
   Titre principal masqué

   Les pages de formulaires et la liste des programmes n'affichent aucun titre :
   leur maquette n'en prévoit pas. Elles portent tout de même un H1, masqué à
   l'écran par la classe « screen-reader-text » de WordPress, pour les lecteurs
   d'écran et les moteurs de recherche.

   Masqué ne veut pas dire absent. Ce titre devient le premier enfant du
   contenu : le bloc suivant perd ce statut et hériterait de l'espacement
   vertical réservé aux blocs qui en suivent un autre. On le lui retire, pour
   que la page s'affiche exactement comme avant.
   --------------------------------------------------------------------------- */

:where(.is-layout-flow, .is-layout-constrained) > .screen-reader-text:first-child + * {
	margin-block-start: 0;
}