/* =========================================================================
   GDLCP — Système de design
   =========================================================================
   Repris de la landing page Ads Avocat, dont l'univers est étendu à tout le
   site : même palette, même duo typographique (Fraunces en titres, Montserrat
   en texte), mêmes cartes à grand rayon.

   Chargée APRÈS style.css et après les feuilles de hello-elementor, qui
   habillent tous les <button>. Les appels à l'action de la refonte sont donc
   des <a class="gd-btn"> : un lien n'est pas concerné par ces règles, ce qui
   évite une guerre de spécificité.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Jetons
   ------------------------------------------------------------------------- */

body {
	/* Palette (identique à style.css, redéclarée pour lisibilité) */
	--gd-dark: #0B2127;
	--gd-dark-2: #102C33;
	--gd-medium: #1C4D56;
	--gd-light: #BFD8D9;
	--gd-lime: #E3FE8F;
	--gd-cream: #F6F5F0;
	--gd-sand: #DED7C4;
	--gd-white: #FFFFFF;

	/* Typographie */
	--gd-serif: "Fraunces", Georgia, serif;
	--gd-sans: "Montserrat", sans-serif;

	/* Rythme */
	--gd-radius: 24px;
	--gd-radius-lg: 32px;
	--gd-radius-pill: 999px;
	--gd-section: clamp(5rem, 9vw, 9rem);
	--gd-gutter: clamp(1.25rem, 5vw, 4rem);
	--gd-max: 1280px;

	/* Mouvement */
	--gd-ease: cubic-bezier(.22, 1, .36, 1);
}

/* -------------------------------------------------------------------------
   2. Fondations
   ------------------------------------------------------------------------- */

.gd-section {
	position: relative;
	width: 100%;
	margin: 0;
	padding: var(--gd-section) 0;
	overflow: clip;
}

/* style.css applique « section { margin-bottom: 5em } » à tout le site — les
   gabarits historiques en dépendent, on ne peut pas la supprimer. Les sections
   du système de design gèrent leur respiration par leur padding : celles qui
   ne portent pas la classe .gd-section doivent donc l'annuler explicitement,
   sans quoi elles traînent 80 px de vide en dessous. */
section.gd-preuve,
section.gd-casp-verbatim,
section.gd-encart-articles {
	margin-bottom: 0;
}

.gd-wrap {
	width: 100%;
	max-width: var(--gd-max);
	margin: 0 auto;
	padding: 0 var(--gd-gutter);
}

.gd-section--dark {
	background-color: var(--gd-dark);
	color: var(--gd-white);
}

.gd-section--cream {
	background-color: var(--gd-cream);
}

/* Lueur diffuse : donne de la profondeur aux fonds sombres sans image. */
.gd-section--dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 50% at 15% 0%, rgba(28, 77, 86, .55) 0%, transparent 70%),
		radial-gradient(45% 45% at 90% 25%, rgba(227, 254, 143, .07) 0%, transparent 70%);
	pointer-events: none;
}

.gd-section > * {
	position: relative;
	z-index: 1;
}

/* style.css applique à TOUS les <span> une couleur, une hauteur de ligne et
   une police en !important. Une déclaration posée directement sur l'élément
   l'emporte sur l'héritage, quelle que soit la spécificité du parent : sans
   cette remise à zéro, un mot de titre ou un fragment de phrase reste en
   Montserrat vert foncé, illisible sur fond sombre.
   Placée haut dans la feuille pour que les composants définis plus bas
   reprennent la main dès qu'ils veulent une couleur propre. */
.gd-section :where(span),
.gd-preuve :where(span) {
	color: inherit;
	line-height: inherit;
	font-family: inherit !important;
}

/* Fond « grain » — inspiration digitz.fr
   =========================================================================
   Trois couches superposées sur une base très sombre :
     1. deux halos radiaux très larges et très diffus, décalés, qui créent
        une diagonale lumineuse plutôt qu'un centre net ;
     2. un grain fin, généré par un feTurbulence SVG en data-URI — aucune
        image à charger, et il ne pixellise à aucune résolution ;
     3. un vignettage qui referme les bords.
   Aucun canvas ni shader : digitz obtient ce rendu en CSS, on fait de même. */

.gd-grain {
	position: relative;
	background-color: #08181E;
	isolation: isolate;
}

/* Halos diffus, avec la trame en dessous.
   Dans une pile de fonds CSS, la première couche listée est la plus haute :
   la grille est donc placée en dernier pour passer sous les halos. */
.gd-grain::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		/* Voile central : le texte du hero passe sur des filaments clairs,
		   il faut lui garantir un fond sombre sans éteindre les bords. */
		radial-gradient(80% 65% at 50% 48%, rgba(8, 24, 30, .62) 0%, rgba(8, 24, 30, .3) 62%, transparent 100%),
		radial-gradient(70% 55% at 18% 8%, rgba(28, 77, 86, .6) 0%, transparent 62%),
		radial-gradient(55% 45% at 88% 22%, rgba(227, 254, 143, .09) 0%, transparent 60%),
		radial-gradient(90% 70% at 50% 100%, rgba(8, 24, 30, .9) 0%, transparent 70%),
		linear-gradient(rgba(191, 216, 217, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(191, 216, 217, .05) 1px, transparent 1px);
	background-size: auto, auto, auto, auto, 64px 64px, 64px 64px;
	pointer-events: none;
}

/* Grain + vignettage */
.gd-grain::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0, 0, 0, .55) 100%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
	background-size: auto, 240px 240px;
	/* Le grain se fond dans les zones claires sans salir les noirs. */
	mix-blend-mode: soft-light;
	opacity: .5;
	pointer-events: none;
}

/* Empilement du hero, du fond vers l'avant :
     0. fond vidéo (ou son affiche)
     1. grille puis halos           (::before)
     2. grain et vignettage         (::after)
     3. contenu                     (enfants directs)
   Les halos passent DEVANT la vidéo : c'est ce qui ramène son vert saturé
   dans la palette de la marque au lieu de le laisser dominer. */
.gd-grain > * {
	position: relative;
	z-index: 3;
}

.gd-grain::before {
	z-index: 1;
}

.gd-grain::after {
	z-index: 2;
}

/* --- Fond vidéo décoratif, partagé par le hero et le CTA --- */

.gd-fond-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	pointer-events: none;
	overflow: hidden;
	/* Le vert de la source est très saturé : on le désature et on l'assombrit
	   pour qu'il devienne une texture et non le sujet. */
	filter: saturate(.55) brightness(.6);
	opacity: .85;
}

.gd-fond-video__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 1.2s ease;
}

/* L'affiche ne s'efface qu'une fois la vidéo réellement en lecture. */
.gd-fond-video.est-joue .gd-fond-video__media {
	opacity: 1;
}

/* --- CTA à fond vidéo --- */

.gd-cta--fond {
	position: relative;
	overflow: clip;
}

/* Plus discret que dans le hero : ici le fond accompagne une carte, il ne
   doit pas lui disputer l'attention. */
.gd-cta__fond {
	filter: saturate(.4) brightness(.42);
	opacity: .7;
}

/* Voile sombre au-dessus de la vidéo, sous la carte. */
.gd-cta--fond::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(75% 70% at 50% 50%, rgba(8, 24, 30, .72) 0%, rgba(8, 24, 30, .45) 60%, rgba(8, 24, 30, .8) 100%);
	pointer-events: none;
}

.gd-cta--fond > .gd-wrap {
	position: relative;
	z-index: 2;
}

/* Trame discrète, comme sur la landing page */
.gd-grid-pattern::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(191, 216, 217, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(191, 216, 217, .05) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 80%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 80%);
	pointer-events: none;
	z-index: 0;
}

/* Imagify remplace chaque <img> par un <picture>, qui est un élément inline :
   une hauteur en pourcentage posée sur l'image ne se résout alors sur rien et
   le visuel s'effondre. On redonne au conteneur les dimensions de la carte. */
.gd-vitrine__card picture,
.gd-casp-suivante__media picture,
.gd-cas__media picture,
.gd-article__media picture,
.gd-portrait picture,
.gd-cta__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.gd-hero__reassurance picture {
	display: block;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
}

/* -------------------------------------------------------------------------
   3. Typographie
   ------------------------------------------------------------------------- */

.gd-display,
.gd-section h2.gd-display,
.gd-section h3.gd-display {
	font-family: var(--gd-serif);
	font-weight: 600;
	font-optical-sizing: auto;
	letter-spacing: -.02em;
	line-height: 1.14;
	margin: 0;
	text-wrap: balance;
}

.gd-display--xl {
	/* Calibré sur la colonne de gauche du hero (≈ 600 px) : au-delà, un mot
	   comme « communication » débordait et cassait la composition. */
	font-size: clamp(2.2rem, 4.1vw, 3.75rem);
}

.gd-display--l {
	font-size: clamp(2.1rem, 4.4vw, 3.5rem);
}

.gd-display--m {
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
}

/* Un titre porté par un <span> plutôt qu'un <hN> : style.css impose Montserrat
   en !important à tous les <span>, il faut donc le même poids pour reprendre
   la main. Règle générale, pour ne pas avoir à la reposer à chaque composant. */
span.gd-display {
	font-family: var(--gd-serif) !important;
}

/* Le mot d'un titre découpé hérite de tout : police, couleur, hauteur de ligne. */
.gd-display .gd-word,
.gd-display .gd-word > span {
	font-family: var(--gd-serif) !important;
	color: inherit;
	line-height: inherit;
}

.gd-section--dark .gd-display {
	color: var(--gd-white);
}

.gd-section--cream .gd-display,
.gd-section--light .gd-display {
	color: var(--gd-dark);
}

/* Mot mis en avant dans un titre, façon surligneur */
.gd-mark {
	color: var(--gd-lime);
	font-style: italic;
}

.gd-section--cream .gd-mark {
	color: var(--gd-medium);
}

.gd-lead {
	font-family: var(--gd-sans);
	font-size: clamp(1rem, 1.15vw, 1.15rem);
	line-height: 1.75;
	max-width: 58ch;
	margin: 1.5rem 0 0 0;
}

.gd-section--dark .gd-lead,
.gd-section--dark .gd-lead p {
	color: var(--gd-light);
}

/* Listes saisies dans les champs ACF.
   style.css impose « body li { color: var(--dark-green) } ». Une liste posée
   dans un champ de contenu ressortait donc foncée sur fond foncé, illisible.
   Colorer le conteneur ne suffit pas : l'héritage perd toujours face à une
   règle qui vise l'élément. Il faut atteindre le li lui-même. */
.gd-section--dark .gd-lead li,
.gd-section--dark .gd-casp-texte li,
.gd-section--dark .gd-quote li,
.gd-section--dark .gd-casp-solution__texte li {
	color: rgba(255, 255, 255, .84);
}

.gd-section--dark .gd-lead strong,
.gd-section--dark .gd-casp-texte strong,
.gd-section--dark .gd-casp-solution__texte strong {
	color: var(--gd-white);
	font-weight: 600;
}

.gd-section--dark .gd-lead a,
.gd-section--dark .gd-casp-texte a,
.gd-section--dark .gd-casp-solution__texte a {
	color: var(--gd-lime);
}

/* Mise en forme des listes de contenu, sur les deux fonds : le retrait par
   défaut du navigateur colle les puces au texte courant. */
.gd-lead ul,
.gd-lead ol,
.gd-casp-texte ul,
.gd-casp-texte ol,
.gd-casp-solution__texte ul,
.gd-casp-solution__texte ol {
	margin: 1.25rem 0;
	padding-left: 1.35rem;
}

.gd-lead li,
.gd-casp-texte li,
.gd-casp-solution__texte li {
	padding-left: .35rem;
}

.gd-lead li + li,
.gd-casp-texte li + li,
.gd-casp-solution__texte li + li {
	margin-top: .65rem;
}

.gd-lead li::marker,
.gd-casp-texte li::marker,
.gd-casp-solution__texte li::marker {
	color: var(--gd-lime);
}

.gd-section--cream .gd-lead,
.gd-section--cream .gd-lead p {
	color: rgba(11, 33, 39, .78);
}

.gd-lead p {
	margin: 0 0 .8em 0;
	line-height: 1.75;
}

.gd-lead p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   4. Badge / surtitre
   ------------------------------------------------------------------------- */

.gd-badge {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .55em 1.25em;
	border-radius: var(--gd-radius-pill);
	border: 1px solid rgba(191, 216, 217, .3);
	background: rgba(191, 216, 217, .06);
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.5;
	text-transform: uppercase;
	margin: 0 0 1.5rem 0;
}

.gd-section--cream .gd-badge {
	border-color: rgba(11, 33, 39, .15);
	background: rgba(11, 33, 39, .03);
	color: var(--gd-medium);
}

/* Pastille clignotante de disponibilité */
.gd-badge__dot {
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: var(--gd-lime);
	box-shadow: 0 0 0 0 rgba(227, 254, 143, .7);
	animation: gd-pulse 2.4s infinite;
}

@keyframes gd-pulse {
	0% { box-shadow: 0 0 0 0 rgba(227, 254, 143, .6); }
	70% { box-shadow: 0 0 0 .6em rgba(227, 254, 143, 0); }
	100% { box-shadow: 0 0 0 0 rgba(227, 254, 143, 0); }
}

/* -------------------------------------------------------------------------
   5. Boutons
   ------------------------------------------------------------------------- */

.gd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7em;
	padding: 1.05em 2em;
	border-radius: var(--gd-radius-pill);
	font-family: var(--gd-sans);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform .35s var(--gd-ease), box-shadow .35s var(--gd-ease),
		background-color .3s ease, color .3s ease, border-color .3s ease;
}

.gd-btn:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

body .gd-btn--primary {
	background-color: var(--gd-lime);
	color: var(--gd-dark);
	box-shadow: 0 0 0 0 rgba(227, 254, 143, .45);
}

body .gd-btn--primary:hover {
	background-color: #EEFFB4;
	color: var(--gd-dark);
	box-shadow: 0 12px 40px -8px rgba(227, 254, 143, .55);
}

body .gd-btn--ghost {
	background-color: transparent;
	border-color: rgba(191, 216, 217, .35);
	color: var(--gd-white);
}

body .gd-btn--ghost:hover {
	border-color: var(--gd-lime);
	color: var(--gd-lime);
	background-color: rgba(227, 254, 143, .06);
}

body .gd-section--cream .gd-btn--ghost {
	border-color: rgba(11, 33, 39, .2);
	color: var(--gd-dark);
}

body .gd-section--cream .gd-btn--ghost:hover {
	border-color: var(--gd-dark);
	background-color: rgba(11, 33, 39, .04);
	color: var(--gd-dark);
}

body .gd-btn--dark {
	background-color: var(--gd-dark);
	color: var(--gd-white);
}

body .gd-btn--dark:hover {
	background-color: var(--gd-medium);
	color: var(--gd-white);
}

.gd-btn__arrow {
	transition: transform .35s var(--gd-ease);
}

.gd-btn:hover .gd-btn__arrow {
	transform: translateX(4px);
}

.gd-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 2.25rem;
}

/* Lien fléché discret */
.gd-link {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--gd-sans);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gd-medium);
	transition: gap .3s var(--gd-ease), color .3s ease;
}

.gd-link:hover {
	gap: .9em;
	color: var(--gd-dark);
}

.gd-section--dark .gd-link {
	color: var(--gd-lime);
}

/* -------------------------------------------------------------------------
   6. Cartes
   ------------------------------------------------------------------------- */

.gd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2.5rem;
	border-radius: var(--gd-radius);
	background: var(--gd-white);
	border: 1px solid rgba(11, 33, 39, .08);
	transition: transform .5s var(--gd-ease), box-shadow .5s var(--gd-ease),
		border-color .4s ease;
}

.gd-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 60px -24px rgba(11, 33, 39, .28);
	border-color: rgba(11, 33, 39, .16);
}

.gd-card--dark {
	background: linear-gradient(160deg, #12313A 0%, var(--gd-dark) 100%);
	border-color: rgba(191, 216, 217, .12);
	color: var(--gd-white);
}

.gd-card--dark:hover {
	border-color: rgba(227, 254, 143, .35);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}

.gd-card__title {
	font-family: var(--gd-serif);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 .75rem 0;
	color: var(--gd-dark);
}

.gd-card--dark .gd-card__title {
	color: var(--gd-white);
}

.gd-card__text,
.gd-card__text p {
	font-family: var(--gd-sans);
	font-size: .95rem;
	line-height: 1.75;
	color: rgba(11, 33, 39, .72);
	margin: 0;
}

.gd-card--dark .gd-card__text,
.gd-card--dark .gd-card__text p {
	color: var(--gd-light);
}

/* -------------------------------------------------------------------------
   7. En-tête de section
   ------------------------------------------------------------------------- */

.gd-head {
	max-width: 46rem;
	margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.gd-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.gd-head--center .gd-lead {
	margin-left: auto;
	margin-right: auto;
}

.gd-head--split {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: end;
	gap: 3rem;
}

@media (max-width: 900px) {
	.gd-head--split {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
   8. Animations
   -------------------------------------------------------------------------
   Chaque élément animé part masqué via [data-anim]. Si le JavaScript ne
   s'exécute pas, la classe .gd-anim-ready n'est jamais posée sur <html> et la
   règle de repli plus bas rend tout visible : aucun contenu ne peut disparaître
   à cause d'un script en échec.
   ------------------------------------------------------------------------- */

html.gd-anim-ready [data-anim] {
	opacity: 0;
	will-change: transform, opacity;
}

html.gd-anim-ready [data-anim="up"] {
	transform: translateY(28px);
}

html.gd-anim-ready [data-anim="fade"] {
	transform: none;
}

html.gd-anim-ready [data-anim="left"] {
	transform: translateX(-28px);
}

html.gd-anim-ready [data-anim="right"] {
	transform: translateX(28px);
}

html.gd-anim-ready [data-anim="zoom"] {
	transform: scale(.96);
}

/* Titre révélé mot à mot */
/* Le masque de révélation ne doit rien ajouter à la hauteur de ligne :
   inline-block + overflow crée sinon un décalage de ligne de base.

   Le rognage est étendu vers le bas pour laisser passer les jambages (g, p, y,
   q), qui descendent sous la ligne de base et se retrouvaient sinon coupés.
   La marge négative annule ce surplus : sur un élément inline-block, c'est la
   boîte de marge qui fixe la hauteur de ligne, donc le flux reste inchangé. */
.gd-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	line-height: inherit;
	padding-bottom: .2em;
	margin-bottom: -.2em;
}

.gd-word > span {
	display: inline-block;
	line-height: inherit;
}

@media (prefers-reduced-motion: reduce) {
	html.gd-anim-ready [data-anim] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* =========================================================================
   9. En-tête — capsule de verre
   =========================================================================
   Inspiration macOS / iOS : une capsule translucide qui flotte au-dessus du
   contenu, floutée et légèrement sursaturée, avec un liseré clair sur l'arête
   supérieure qui simule la réfraction sur un bord biseauté.

   js/motion.js pose .est-compact au défilement ; js/menu.js pilote le panneau
   mobile et les replis de sous-menus.
   ========================================================================= */

body .main-header {
	position: fixed;
	top: clamp(.6rem, 1.4vw, 1.1rem);
	left: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: .5rem;
	width: min(1200px, calc(100% - 2 * clamp(1rem, 4vw, 2.5rem)));
	height: auto;
	margin: 0 auto;
	padding: .6rem .7rem .6rem 1.5rem;
	border-radius: var(--gd-radius-pill);

	/* Le verre : fond très translucide, flou important, saturation poussée
	   pour que les couleurs traversantes restent vivantes. */
	background: rgba(11, 33, 39, .5);
	backdrop-filter: blur(22px) saturate(180%);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .1);

	/* Arête lumineuse en haut, ombre douce en dessous : c'est ce couple qui
	   donne l'épaisseur, plus que le flou lui-même. */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		inset 0 -1px 0 rgba(0, 0, 0, .2),
		0 10px 34px -12px rgba(0, 0, 0, .5);

	transition: width .5s var(--gd-ease), padding .5s var(--gd-ease),
		background-color .5s ease, box-shadow .5s ease, top .5s var(--gd-ease);
}

/* Au défilement la capsule se resserre et se densifie. */
body .main-header.est-compact {
	width: min(1060px, calc(100% - 2 * clamp(1rem, 4vw, 2.5rem)));
	padding-top: .45rem;
	padding-bottom: .45rem;
	background: rgba(11, 33, 39, .72);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .2),
		inset 0 -1px 0 rgba(0, 0, 0, .25),
		0 14px 40px -14px rgba(0, 0, 0, .65);
}

/* Quand le panneau mobile est ouvert, la capsule se dissout : le verre du
   panneau prend le relais et le bouton reste seul au-dessus. */
body.gd-menu-ouvert .main-header {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body .main-header .site-branding {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
}

body .main-header .custom-logo-link {
	display: block;
	width: 44px;
	transition: width .5s var(--gd-ease);
}

body .main-header.est-compact .custom-logo-link {
	width: 38px;
}

/* -------------------------------------------------------------------------
   9.1 Navigation grand écran
   ------------------------------------------------------------------------- */

.gd-nav {
	margin-left: auto;
	padding-right: .5rem;
}

.gd-nav__liste {
	display: flex;
	align-items: center;
	gap: .15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-nav__liste li {
	position: relative;
	margin: 0;
}

/* Pastille au survol, façon contrôle segmenté. */
.gd-nav__liste > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: .45em;
	padding: .6em 1em;
	border-radius: var(--gd-radius-pill);
	font-family: var(--gd-sans);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	white-space: nowrap;
	transition: color .3s ease, background-color .3s ease;
}

.gd-nav__liste > li > a::after {
	content: none;
}

.gd-nav__liste > li > a:hover,
.gd-nav__liste > li.current-menu-item > a,
.gd-nav__liste > li.current-menu-ancestor > a {
	color: var(--gd-white);
	background: rgba(255, 255, 255, .1);
}

/* Chevron des entrées à sous-menu : deux bords d'une boîte carrée pivotée,
   donc pas d'image ni de police d'icônes à charger. */
.gd-nav__liste > li.menu-item-has-children > a .gd-nav__chevron,
.gd-nav__liste > li.gd-mega > a .gd-nav__chevron {
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 1.5px solid rgba(255, 255, 255, .72);
	border-bottom: 1.5px solid rgba(255, 255, 255, .72);
	transform: rotate(45deg);
	transition: transform .35s var(--gd-ease);
}

.gd-nav__liste > li.menu-item-has-children:hover > a .gd-nav__chevron,
.gd-nav__liste > li.menu-item-has-children:focus-within > a .gd-nav__chevron,
.gd-nav__liste > li.gd-mega:hover > a .gd-nav__chevron,
.gd-nav__liste > li.gd-mega:focus-within > a .gd-nav__chevron {
	transform: rotate(-135deg);
	margin-top: 2px;
	color: white;
}

/* Le panneau déroulant reprend le vocabulaire de la capsule. */
.gd-nav .sub-menu {
	position: absolute;
	top: calc(100% + .85rem);
	left: 50%;
	z-index: 10;
	min-width: 268px;
	margin: 0;
	padding: .45rem;
	list-style: none;
	border-radius: 22px;
	/* Assez opaque pour rester lisible même quand la capsule flotte au-dessus
	   d'une section claire : le flou d'un fond crème vire au blanc. */
	background: rgba(11, 33, 39, .88);
	color: var(--gd-white);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		0 26px 54px -24px rgba(0, 0, 0, .85);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(-8px);
	transition:
		opacity .28s ease,
		transform .34s var(--gd-ease),
		visibility .34s;
}

/* Passerelle invisible : sans elle, l'écart de .85rem entre l'entrée et le
   panneau suffit à perdre le survol en descendant la souris. */
.gd-nav .sub-menu::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -.9rem;
	height: .9rem;
}

.gd-nav .menu-item-has-children:hover > .sub-menu,
.gd-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.gd-nav .sub-menu a {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem .85rem;
	border-radius: 15px;
	font-family: var(--gd-sans);
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: none;
	color: rgba(255, 255, 255, .76);
	text-decoration: none;
	white-space: nowrap;
	transition: color .25s ease, background-color .25s ease;
}

.gd-nav .sub-menu a::before {
	content: '';
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gd-lime);
	opacity: .25;
	transition: opacity .25s ease, transform .35s var(--gd-ease);
}

.gd-nav .sub-menu a:hover {
	color: var(--gd-white);
	background: rgba(255, 255, 255, .09);
}

.gd-nav .sub-menu a:hover::before {
	opacity: 1;
	transform: scale(1.5);
}

/* -------------------------------------------------------------------------
   9.2 Appel à l'action
   -------------------------------------------------------------------------
   Tout est déclaré ici, sans rien attendre de la mise en forme des boutons du
   thème parent : le libellé est un <span>, donc aucune règle visant button ou
   [type=button] ne peut l'atteindre. Les états sont couverts un par un —
   survol, focus clavier, appui, lien visité — car hello-elementor recolore
   aussi les liens (a, a:hover) et supprime l'anneau de focus. */

/* -------------------------------------------------------------------------
   9.1 bis Méga-menu
   -------------------------------------------------------------------------
   Même verre que la capsule et que les sous-menus, mais en panneau large :
   trois colonnes et un bandeau d'appel. Aligné à droite sur son entrée de
   menu — centré, il déborderait de l'écran sur les petites résolutions de
   bureau. */

/* Enveloppe transparente, collée sous l'entrée de menu. L'écart visuel vient
   de son padding, pas d'un décalage de position : il n'y a donc aucun vide à
   franchir avec la souris entre le lien et le panneau. C'est la seule façon
   fiable de tenir le survol — une passerelle dessinée en pseudo-élément était
   rognée par le rognage nécessaire aux angles arrondis. */
.gd-nav .gd-mega-panneau {
	position: absolute;
	top: 100%;
	/* Aligné sur le bord droit de la capsule, pas sur celui de son entrée de
	   menu : selon le nombre d'entrées qui la suivent, le panneau paraissait
	   sinon posé de travers. Le décalage est mesuré par js/menu.js — il dépend
	   du menu, donc d'une donnée que le CSS ne connaît pas. Sans le script, on
	   retombe sur l'alignement à l'entrée, qui reste correct. */
	right: calc(-1 * var(--gd-mega-decalage, 0px));
	z-index: 10;
	width: min(860px, calc(100vw - 3rem));
	padding-top: .85rem;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity .28s ease,
		transform .36s var(--gd-ease),
		visibility .36s;
}


.gd-nav__liste > li:hover > .gd-mega-panneau,
.gd-nav__liste > li:focus-within > .gd-mega-panneau {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.gd-mega-panneau__carte {
	overflow: hidden;
	border-radius: 26px;
	background: rgba(11, 33, 39, .9);
	backdrop-filter: blur(26px) saturate(180%);
	-webkit-backdrop-filter: blur(26px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		0 30px 60px -28px rgba(0, 0, 0, .9);
}

.gd-mega__grille {
	display: grid;
	grid-template-columns: repeat(var(--gd-mega-cols, 3), minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3vw, 2rem);
}

.gd-mega-panneau .gd-mega__titre {
	display: block;
	margin-bottom: 1rem;
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gd-mega-panneau .gd-mega__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-mega-panneau .gd-mega__liste li {
	margin: 0;
}

.gd-mega-panneau .gd-mega__guide {
	display: block;
	padding: .6rem .7rem;
	margin-left: -.7rem;
	border-radius: 14px;
	text-decoration: none;
	transition: background-color .25s ease;
}

.gd-mega-panneau .gd-mega__guide:hover {
	background: rgba(255, 255, 255, .07);
}

.gd-mega-panneau .gd-mega__guide-titre {
	display: block;
	font-family: var(--gd-serif) !important;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gd-white);
}

.gd-mega-panneau .gd-mega__guide-texte {
	display: block;
	margin-top: .25rem;
	font-family: var(--gd-sans);
	font-size: .78rem;
	line-height: 1.5;
	color: rgba(191, 216, 217, .75);
}

.gd-mega-panneau .gd-mega__lien {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem 0;
	font-family: var(--gd-sans);
	font-size: .84rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	transition: color .25s ease;
}

.gd-mega-panneau .gd-mega__lien:hover {
	color: var(--gd-lime);
}

.gd-mega-panneau .gd-mega__puce {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gd-lime);
	opacity: .5;
	transition: opacity .25s ease, transform .3s var(--gd-ease);
}

.gd-mega-panneau .gd-mega__lien:hover .gd-mega__puce {
	opacity: 1;
	transform: scale(1.4);
}

.gd-mega-panneau .gd-mega__article {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .45rem 0;
	text-decoration: none;
}

.gd-mega-panneau .gd-mega__vignette {
	flex: 0 0 auto;
	display: block;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 8px;
	background: rgba(255, 255, 255, .08);
}

.gd-mega-panneau .gd-mega__vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gd-mega-panneau .gd-mega__article-titre {
	font-family: var(--gd-sans);
	font-size: .8rem;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, .82);
	transition: color .25s ease;
}

.gd-mega-panneau .gd-mega__article:hover .gd-mega__article-titre {
	color: var(--gd-lime);
}

.gd-mega-panneau .gd-mega__tous {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: 1rem;
	font-family: var(--gd-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gd-light);
	text-decoration: none;
	transition: color .25s ease;
}

.gd-mega-panneau .gd-mega__tous:hover {
	color: var(--gd-lime);
}

.gd-mega__bandeau {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem clamp(1.5rem, 3vw, 2rem);
	background: rgba(0, 0, 0, .28);
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.gd-mega__bandeau > span {
	font-family: var(--gd-serif) !important;
	font-size: 1rem;
	font-weight: 500;
	color: var(--gd-white);
}

.gd-mega-panneau .gd-mega__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7em 1.2em;
	border-radius: var(--gd-radius-pill);
	background: var(--gd-lime);
	color: var(--gd-dark);
	font-family: var(--gd-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .3s var(--gd-ease);
}

.gd-mega-panneau .gd-mega__cta:hover {
	color: var(--gd-dark);
	transform: translateY(-1px);
}

@media (max-width: 1125px) {
	.gd-nav .gd-mega-panneau {
		display: none;
	}
}

body .main-header .header-link,
body .main-header .header-link:visited,
body .main-header .header-link:hover,
body .main-header .header-link:focus {
	flex: 0 0 auto;
	display: inline-flex;
	text-decoration: none;
	color: inherit;
	outline: none;
}

body .main-header .header-link .button-contrast {
	display: inline-block;
	margin: 0;
	padding: .85em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--gd-radius-pill);
	background-color: var(--gd-lime);
	color: var(--gd-dark);
	font-family: var(--gd-sans);
	font-size: .76rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform .35s var(--gd-ease),
		box-shadow .35s var(--gd-ease),
		background-color .3s ease;
}

body .main-header .header-link:hover .button-contrast,
body .main-header .header-link:focus .button-contrast,
body .main-header .header-link:active .button-contrast {
	background-color: var(--gd-lime);
	color: var(--gd-dark);
	transform: translateY(-1px);
	box-shadow: 0 10px 26px -10px rgba(227, 254, 143, .7);
}

body .main-header .header-link:active .button-contrast {
	transform: translateY(0);
}

/* L'anneau se pose sur la pastille, pas sur le lien : sinon il épouserait la
   boîte du <a> et déborderait de la forme arrondie. */
body .main-header .header-link:focus-visible .button-contrast {
	outline: 2px solid var(--gd-lime);
	outline-offset: 3px;
}

/* Raccourci rond, visible là où le libellé ne l'est plus. */
.gd-contact {
	display: none;
	flex: 0 0 auto;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--gd-lime);
	color: var(--gd-dark);
	text-decoration: none;
	box-shadow: 0 8px 22px -10px rgba(227, 254, 143, .8);
	transition:
		transform .35s var(--gd-ease),
		box-shadow .35s var(--gd-ease),
		background-color .3s ease;
}

.gd-contact:visited {
	color: var(--gd-dark);
}

.gd-contact svg {
	width: 21px;
	height: 21px;
}

.gd-contact:hover,
.gd-contact:focus {
	color: var(--gd-dark);
	background: var(--gd-white);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -10px rgba(227, 254, 143, .9);
}

.gd-contact:active {
	transform: translateY(0);
}

.gd-contact:focus-visible {
	outline: 2px solid var(--gd-lime);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   9.3 Bouton menu
   ------------------------------------------------------------------------- */

.gd-burger {
	display: none;
	flex: 0 0 auto;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	/* hello-elementor colore tout bouton en rose : les traits sont peints
	   explicitement, mais la couleur héritée servirait à l'anneau de focus. */
	color: var(--gd-white);
	cursor: pointer;
	transition: background-color .3s ease, border-color .3s ease;
}

/* Survol et focus déclarés en toutes circonstances, y compris sur tactile :
   hello-elementor colore en rose tout bouton survolé ou focalisé, et un appui
   sur mobile produit les deux états. Les enfermer dans « hover: hover »
   rendait la main au thème parent — le bouton virait au rouge à l'appui. */
.gd-burger:hover,
.gd-burger:focus {
	background: rgba(255, 255, 255, .13);
	border-color: rgba(255, 255, 255, .28);
	color: var(--gd-white);
	outline: none;
}

.gd-burger:focus-visible {
	outline: 2px solid var(--gd-lime);
	outline-offset: 3px;
}

.gd-burger__traits {
	display: grid;
	gap: 5px;
	width: 18px;
}

.gd-burger__traits span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .92);
	transition:
		transform .42s var(--gd-ease),
		opacity .2s ease,
		width .42s var(--gd-ease);
}

/* Le trait du milieu est plus court au repos : le détail se lit tout de suite
   comme un bouton dessiné, pas comme trois barres génériques. */
.gd-burger__traits span:nth-child(2) {
	width: 64%;
	justify-self: end;
}

/* Ce détail-là, en revanche, n'a de sens qu'avec un vrai survol. */
@media (hover: hover) {
	.gd-burger:hover .gd-burger__traits span:nth-child(2) {
		width: 100%;
	}
}

/* Croix : l'écart de 5 px plus 2 px de trait place les centres à 7 px. */
.gd-burger[aria-expanded='true'] .gd-burger__traits span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.gd-burger[aria-expanded='true'] .gd-burger__traits span:nth-child(2) {
	opacity: 0;
	transform: scaleX(.2);
}

.gd-burger[aria-expanded='true'] .gd-burger__traits span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   9.4 Panneau mobile
   ------------------------------------------------------------------------- */

/* Il descend du haut, comme le panneau de transition entre les pages, et
   porte la même arête lime : les deux mouvements parlent la même langue. */
.gd-menu-mobile {
	position: fixed;
	inset: 0;
	z-index: 999;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba(8, 24, 30, .93);
	backdrop-filter: blur(26px) saturate(160%);
	-webkit-backdrop-filter: blur(26px) saturate(160%);
	border-bottom: 3px solid var(--gd-lime);
	transform: translateY(-101%);
	visibility: hidden;
	transition:
		transform .55s var(--gd-ease),
		visibility .55s;
}

body.gd-menu-ouvert .gd-menu-mobile {
	transform: translateY(0);
	visibility: visible;
}

body.gd-menu-ouvert {
	overflow: hidden;
}

.gd-menu-mobile__interieur {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	min-height: 100%;
	padding: calc(clamp(.6rem, 1.4vw, 1.1rem) + 5.5rem) var(--gd-gutter) 3rem;
}

.gd-menu-mobile__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* L'entrée et son bouton de repli tiennent sur une ligne, le sous-menu passe
   dessous en occupant toute la largeur : la mise en forme suffit, aucun
   emballage supplémentaire à créer dans le DOM. */
.gd-menu-mobile__liste > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity .5s ease,
		transform .55s var(--gd-ease);
}

.gd-menu-mobile__liste > li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* Cascade à l'ouverture : --gd-ordre est posé par js/menu.js. */
body.gd-menu-ouvert .gd-menu-mobile__liste > li {
	opacity: 1;
	transform: none;
	transition-delay: calc(.16s + var(--gd-ordre, 0) * .07s);
}

.gd-menu-mobile__liste > li > a {
	flex: 1 1 auto;
	padding: .85rem 0;
	font-family: var(--gd-serif);
	font-size: clamp(1.75rem, 8vw, 2.5rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--gd-white);
	text-decoration: none;
	text-transform: none;
}

.gd-menu-mobile__liste > li > a:hover {
	color: var(--gd-lime);
}

/* Plus qui devient moins : le repli se lit sans texte. */
.gd-menu-mobile__bascule {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: var(--gd-white);
	cursor: pointer;
	transition: background-color .3s ease, border-color .3s ease;
}

.gd-menu-mobile__bascule:hover,
.gd-menu-mobile__bascule:focus {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .3);
	color: var(--gd-white);
	outline: none;
}

.gd-menu-mobile__bascule:focus-visible {
	outline: 2px solid var(--gd-lime);
	outline-offset: 3px;
}

.gd-menu-mobile__bascule::before,
.gd-menu-mobile__bascule::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 2px;
	margin: -1px 0 0 -7.5px;
	border-radius: 2px;
	background: var(--gd-lime);
	transition: transform .4s var(--gd-ease);
}

.gd-menu-mobile__bascule::after {
	transform: rotate(90deg);
}

.gd-menu-mobile__bascule[aria-expanded='true']::after {
	transform: rotate(0deg);
}

/* La hauteur est mesurée par js/menu.js : aucune valeur en dur, donc un
   sous-menu de trois entrées comme de douze s'ouvre au bon format. */
.gd-menu-mobile .sub-menu {
	flex: 0 0 100%;
	max-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	transition: max-height .45s var(--gd-ease);
}

.gd-menu-mobile .sub-menu li {
	margin: 0;
}

.gd-menu-mobile .sub-menu a {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .6rem 0 .6rem .1rem;
	font-family: var(--gd-sans);
	font-size: .95rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	text-transform: none;
}

.gd-menu-mobile .sub-menu a::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 1px;
	background: var(--gd-lime);
	opacity: .5;
	transition: width .35s var(--gd-ease), opacity .3s ease;
}

.gd-menu-mobile .sub-menu a:hover {
	color: var(--gd-white);
}

.gd-menu-mobile .sub-menu a:hover::before {
	width: 28px;
	opacity: 1;
}

.gd-menu-mobile .sub-menu li:last-child a {
	padding-bottom: 1.1rem;
}

/* Méga-menu replié dans le panneau mobile : les intitulés de colonne
   deviennent des intertitres, et les liens gardent la mise en forme des
   sous-menus classiques. */
.gd-menu-mobile .gd-mega-mobile .gd-mega-mobile__groupe {
	margin-top: 1.1rem;
}

.gd-menu-mobile .gd-mega-mobile .gd-mega-mobile__groupe:first-child {
	margin-top: .4rem;
}

.gd-menu-mobile .gd-mega-mobile .gd-mega-mobile__titre {
	display: block;
	padding: .35rem 0;
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.gd-menu-mobile__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: auto;
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity .5s ease,
		transform .55s var(--gd-ease);
}

body.gd-menu-ouvert .gd-menu-mobile__pied {
	opacity: 1;
	transform: none;
	transition-delay: .42s;
}

.gd-menu-mobile__linkedin {
	font-family: var(--gd-sans);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	text-decoration: none;
	transition: color .3s ease;
}

.gd-menu-mobile__linkedin:hover {
	color: var(--gd-lime);
}

/* -------------------------------------------------------------------------
   9.5 Bascule des deux navigations
   ------------------------------------------------------------------------- */

@media (max-width: 1125px) {
	body .main-header {
		gap: .45rem;
		padding: .5rem .55rem .5rem 1.1rem;
	}

	.gd-nav,
	body .main-header .header-link {
		display: none;
	}

	.gd-contact {
		display: grid;
		margin-left: auto;
	}

	.gd-burger {
		display: grid;
	}

	/* Le raccourci de contact s'efface quand le panneau s'ouvre : le même
	   rendez-vous y figure déjà en toutes lettres. */
	body.gd-menu-ouvert .gd-contact {
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
	}
}

@media (min-width: 1126px) {
	.gd-menu-mobile {
		display: none;
	}
}

/* Repli : sans backdrop-filter, un fond translucide devient illisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body .main-header {
		background: rgba(11, 33, 39, .94);
	}

	.gd-nav .sub-menu {
		background: rgba(11, 33, 39, .97);
	}

	.gd-menu-mobile {
		background: rgba(8, 24, 30, .99);
	}
}

@media (prefers-reduced-motion: reduce) {
	body .main-header,
	.gd-nav .sub-menu,
	.gd-menu-mobile,
	.gd-menu-mobile__liste > li,
	.gd-menu-mobile__pied {
		transition: none;
	}
}

/* =========================================================================
   10. Hero
   ========================================================================= */

/* Colonne : le contenu se centre entre deux marges automatiques, le bandeau
   de logos se pose en bas. Les deux partagent donc le fond animé du hero. */
.gd-hero {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-top: clamp(9rem, 14vh, 12rem);
	padding-bottom: clamp(2rem, 3vw, 3rem);
	background:
		linear-gradient(180deg, #0B2127 0%, #0E272E 45%, #0B2127 100%);
}

.gd-hero > .gd-wrap {
	margin-top: auto;
}

.gd-hero .gd-preuve {
	margin-top: auto;
	/* Le fond est celui du hero : la bande ne doit rien peindre. */
	background: transparent;
	padding: clamp(2.5rem, 4vw, 4rem) 0 0 0;
}

/* Le hero à grain porte son propre fond : le dégradé ci-dessus masquerait
   la base sombre et les halos. */
.gd-hero.gd-grain {
	background: none;
	background-color: #08181E;
}

/* Hero centré : le titre porte seul, sans visuel d'appoint. */
.gd-hero--center {
	min-height: 92vh;
	text-align: center;
}

.gd-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 60rem;
	margin: 0 auto;
}

.gd-hero--center .gd-display--xl {
	/* Plus de place qu'en deux colonnes : le titre peut grandir. Bridé à 20
	   caractères par ligne, au-delà l'œil ne suit plus la ligne. */
	font-size: clamp(2.4rem, 5.6vw, 4.6rem);
	max-width: 20ch;
}

.gd-hero--center .gd-lead {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.gd-hero--center .gd-btn-row,
.gd-hero--center .gd-hero__eyebrow,
.gd-hero--center .gd-hero__reassurance {
	justify-content: center;
}

.gd-hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.gd-hero .gd-badge {
	margin-bottom: 0;
}

.gd-hero__note {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--gd-sans);
	font-size: .8rem;
	color: var(--gd-light);
}

.gd-hero__note strong {
	color: var(--gd-white);
}

.gd-hero__stars {
	color: var(--gd-lime);
	letter-spacing: .1em;
}

.gd-hero__reassurance {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: 1.75rem;
	font-family: var(--gd-sans);
	font-size: .82rem;
	color: rgba(191, 216, 217, .8);
}

.gd-hero__reassurance img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
	border: 1px solid rgba(227, 254, 143, .4);
}

/* Indicateur de défilement */
.gd-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 2.5rem;
	transform: translateX(-50%);
	width: 24px;
	height: 40px;
	border-radius: var(--gd-radius-pill);
	border: 1px solid rgba(191, 216, 217, .35);
}

.gd-hero__scroll::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 8px;
	width: 3px;
	height: 8px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--gd-lime);
	animation: gd-scroll 2s var(--gd-ease) infinite;
}

@keyframes gd-scroll {
	0% { opacity: 0; transform: translateY(0); }
	35% { opacity: 1; }
	75% { opacity: 0; transform: translateY(14px); }
	100% { opacity: 0; }
}

@media (max-width: 980px) {
	.gd-hero--center {
		min-height: 0;
	}
	.gd-hero__scroll {
		display: none;
	}
}

/* =========================================================================
   10 bis. Vitrine des réalisations — NON UTILISÉE
   =========================================================================
   Bande pleine largeur d'études de cas. Ce sont finalement les logos clients
   qui portent la preuve sous le hero. Styles conservés : template-parts/home/
   vitrine.php les réutilise tels quels si le bloc est remis en service.
   ========================================================================= */

.gd-vitrine {
	background: var(--gd-dark);
	padding-bottom: clamp(3rem, 5vw, 5rem);
}

.gd-vitrine .gd-marquee__group {
	gap: 1.25rem;
	padding-right: 1.25rem;
	align-items: stretch;
}

/* Plus lent que les logos : ces cartes se regardent. */
.gd-vitrine__track {
	animation-duration: 90s;
}

.gd-vitrine__card {
	position: relative;
	flex: 0 0 auto;
	width: clamp(240px, 24vw, 360px);
	aspect-ratio: 4 / 3;
	border-radius: var(--gd-radius);
	overflow: hidden;
	text-decoration: none;
	border: 1px solid rgba(191, 216, 217, .12);
	transition: transform .5s var(--gd-ease), border-color .4s ease;
}

.gd-vitrine__card:hover {
	transform: translateY(-6px);
	border-color: rgba(227, 254, 143, .4);
}

.gd-vitrine__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--gd-ease);
}

.gd-vitrine__card:hover img {
	transform: scale(1.06);
}

/* Le nom n'apparaît qu'au survol : au repos, la bande reste graphique. */
.gd-vitrine__nom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3rem 1.25rem 1.1rem 1.25rem;
	background: linear-gradient(180deg, transparent, rgba(11, 33, 39, .92));
	color: var(--gd-white);
	font-family: var(--gd-sans);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.45;
	text-align: left;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .4s ease, transform .5s var(--gd-ease);
}

.gd-vitrine__card:hover .gd-vitrine__nom,
.gd-vitrine__card:focus-visible .gd-vitrine__nom {
	opacity: 1;
	transform: none;
}

.gd-vitrine__card:focus-visible {
	outline: 2px solid var(--gd-lime);
	outline-offset: 3px;
}

/* =========================================================================
   11. Bandeau de logos
   =========================================================================
   Valeurs reprises telles quelles de la landing page Ads Avocat
   (template/landing-page-ads-avocat.php, .lpa-trust / .lpa-logos) : filet de
   séparation, libellé 12 px espacé, logos à 32 px et opacité .72.
   Aucun filtre : les fichiers de la galerie ACF sont déjà les versions
   blanches. Le grayscale + brightness précédent les cramait.
   ========================================================================= */

.gd-preuve {
	background: var(--gd-dark);
	padding: 0 0 clamp(3.5rem, 6vw, 6rem) 0;
}

.gd-preuve__inner {
	padding-top: clamp(28px, 4vw, 40px);
	border-top: 1px solid rgba(255, 255, 255, .12);
	text-align: center;
}

.gd-preuve__label {
	display: block;
	color: rgba(255, 255, 255, .6);
	font-family: var(--gd-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1.5;
	text-transform: uppercase;
}

.gd-preuve .gd-marquee {
	margin-top: clamp(24px, 3vw, 34px);
}

.gd-preuve .gd-marquee__group {
	gap: clamp(40px, 5vw, 64px);
	padding-right: clamp(40px, 5vw, 64px);
}

.gd-preuve .gd-marquee img {
	height: 32px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	flex-shrink: 0;
	opacity: .72;
	filter: none;
	transition: opacity .25s ease;
}

.gd-preuve .gd-marquee img:hover {
	opacity: 1;
}

@media (max-width: 560px) {
	.gd-preuve .gd-marquee__track {
		animation-duration: 28s;
	}
	.gd-preuve .gd-marquee__group {
		gap: 36px;
		padding-right: 36px;
	}
	.gd-preuve .gd-marquee img {
		height: 26px;
	}
}

/* --- Piste défilante, partagée --- */

.gd-marquee {
	position: relative;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.gd-marquee:hover .gd-marquee__track {
	animation-play-state: paused;
}

.gd-marquee__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	padding-right: clamp(2.5rem, 5vw, 4.5rem);
}

.gd-marquee__track {
	display: flex;
	width: max-content;
	animation: gd-marquee 42s linear infinite;
}

@keyframes gd-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.gd-marquee__track {
		animation: none;
	}
}

/* =========================================================================
   12. Expertises
   =========================================================================
   Colonne de gauche collante, liste éditoriale à droite. Chaque ligne se
   remplit de vert foncé au survol : le remplissage est un ::before à taille
   réelle qu'on translate, plutôt qu'un scaleX, pour ne pas déformer le voile
   pendant l'animation.
   ========================================================================= */

.gd-enjeux__grid {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(3rem, 6vw, 7rem);
	align-items: start;
}

/* Le titre de cette section est long : bridé plus bas que le gabarit commun,
   il laisse la liste d'expertises tenir son rang face à lui. */
.gd-enjeux .gd-display--l {
	font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.gd-enjeux__aside {
	position: sticky;
	/* Sous l'en-tête fixe, qui mesure ~5 rem une fois compacté. */
	top: 7rem;
}

.gd-enjeux__compte {
	display: block;
	margin-top: 2.5rem;
	color: rgba(11, 33, 39, .45);
	font-family: var(--gd-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gd-enjeux__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(11, 33, 39, .14);
	counter-reset: expertise;
}

.gd-enjeu {
	position: relative;
	border-bottom: 1px solid rgba(11, 33, 39, .14);
	overflow: hidden;
}

/* La ligne entière est cliquable quand un lien est renseigné ; sinon le même
   balisage reste un simple bloc, sans curseur ni destination promise. */
.gd-enjeu .gd-enjeu__corps {
	display: flex;
	align-items: baseline;
	gap: clamp(1rem, 2vw, 2rem);
	padding: clamp(1.4rem, 2.3vw, 2rem) clamp(1rem, 2vw, 1.75rem);
	text-decoration: none;
	cursor: default;
}

.gd-enjeu--lien .gd-enjeu__corps {
	cursor: pointer;
}

.gd-enjeu::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--gd-dark);
	transform: translateX(-101%);
	transition: transform .65s var(--gd-ease);
}

.gd-enjeu:hover::before {
	transform: translateX(0);
}

.gd-enjeu .gd-enjeu__corps > * {
	position: relative;
	z-index: 1;
}

.gd-enjeu .gd-enjeu__num {
	flex: 0 0 auto;
	font-family: var(--gd-serif) !important;
	font-size: .95rem;
	font-weight: 600;
	color: rgba(11, 33, 39, .35);
	transition: color .45s ease;
}

.gd-enjeu .gd-enjeu__titre {
	flex: 1;
	font-family: var(--gd-serif) !important;
	font-size: clamp(1.15rem, 1.85vw, 1.6rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--gd-dark);
	transition: color .45s ease, transform .55s var(--gd-ease);
}

/* Repère décoratif par défaut : sans lien, un chevron promettrait une
   destination inexistante. Les entrées liées le remplacent par une flèche. */
.gd-enjeu .gd-enjeu__marque {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gd-lime);
	opacity: 0;
	transform: scale(.4);
	transition: opacity .45s ease, transform .55s var(--gd-ease);
}

.gd-enjeu:hover .gd-enjeu__num {
	color: var(--gd-lime);
}

.gd-enjeu:hover .gd-enjeu__titre {
	color: var(--gd-white);
	transform: translateX(6px);
}

.gd-enjeu:hover .gd-enjeu__marque {
	opacity: 1;
	transform: scale(1);
}

.gd-enjeu--lien .gd-enjeu__marque {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .95rem;
	line-height: 1;
	transform: translateX(-6px);
}

.gd-enjeu--lien .gd-enjeu__marque::before {
	content: '→';
}

.gd-enjeu--lien:hover .gd-enjeu__marque {
	transform: translateX(0);
}

@media (max-width: 980px) {
	.gd-enjeux__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 3rem;
	}
	.gd-enjeux__aside {
		position: static;
	}
}

/* =========================================================================
   13. Services
   ========================================================================= */

.gd-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
}

.gd-service {
	overflow: hidden;
}

/* Dans le flux, en tête de carte : le numéro remplace l'icône comme point
   d'entrée visuel. En absolu, il chevauchait le titre dès que celui-ci
   passait sur deux lignes.
   Le !important est nécessaire : sur un <span>, style.css impose Montserrat
   en !important, que la remise à zéro de cette feuille relaie. */
.gd-service__num {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--gd-serif) !important;
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	color: rgba(227, 254, 143, .55);
	transition: color .4s ease;
}

.gd-service:hover .gd-service__num {
	color: var(--gd-lime);
}

/* =========================================================================
   14. Résultats / avis
   ========================================================================= */

.gd-resultats__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}

.gd-quote {
	position: relative;
	font-family: var(--gd-serif);
	font-size: clamp(1.4rem, 2.4vw, 2.1rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.45;
	letter-spacing: -.01em;
	color: var(--gd-white);
	margin: 0;
}

.gd-quote p {
	font-family: var(--gd-serif) !important;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0 0 .6em 0;
}

.gd-quote::before {
	content: '“';
	display: block;
	font-family: var(--gd-serif);
	font-size: 5rem;
	line-height: .8;
	color: var(--gd-lime);
	margin-bottom: .2em;
}

.gd-chiffres {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(191, 216, 217, .16);
}

.gd-chiffre__valeur {
	display: block;
	font-family: var(--gd-serif) !important;
	font-size: clamp(2.4rem, 4vw, 3.4rem);
	font-weight: 600;
	line-height: 1;
	color: var(--gd-lime);
}

.gd-chiffre__label {
	display: block;
	margin-top: .6rem;
	font-family: var(--gd-sans);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--gd-light);
	max-width: 18ch;
}

.gd-portrait {
	text-align: center;
}

.gd-portrait img {
	width: 100%;
	max-width: 260px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--gd-radius-lg);
	border: 1px solid rgba(191, 216, 217, .18);
}

.gd-portrait__nom {
	display: block;
	margin-top: 1.25rem;
	font-family: var(--gd-serif) !important;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--gd-white);
}

.gd-portrait__role {
	display: block;
	margin-top: .35rem;
	font-family: var(--gd-sans);
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(191, 216, 217, .75);
}

@media (max-width: 900px) {
	.gd-resultats__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   15. Process
   ========================================================================= */

.gd-etapes {
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 6vw, 6rem);
}

.gd-etape {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.gd-etape:nth-child(even) .gd-etape__texte {
	order: 2;
}

.gd-etape__num {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.25rem;
	font-family: var(--gd-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gd-medium);
}

.gd-etape__num b {
	font-family: var(--gd-serif);
	font-size: 2.6rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--gd-dark);
	opacity: .18;
}

/* Pas de cadre.
   Les visuels d'étapes sont des illustrations qui portent déjà leur propre
   fond clair et leur propre marge. Les enfermer dans une carte crée deux
   rectangles arrondis imbriqués, dans deux crèmes légèrement différents :
   l'effet est celui d'un montage, pas d'une composition. L'illustration se
   pose donc directement sur la section. */
.gd-etape__media {
	position: relative;
}

.gd-etape__cadre {
	position: relative;
	display: block;
	width: 100%;
}

.gd-etape__cadre img,
.gd-etape__cadre picture {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gd-radius-lg);
}

/* Pastille du numéro, en débord du cadre : elle relie visuellement la colonne
   de texte et le visuel, sans répéter le libellé « Étape n ». */
.gd-etape__pastille {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	padding: .35em .7em;
	border-radius: var(--gd-radius-pill);
	background: var(--gd-dark);
	color: var(--gd-lime);
	font-family: var(--gd-serif) !important;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.4;
}

@media (max-width: 900px) {
	.gd-etape {
		grid-template-columns: minmax(0, 1fr);
	}
	.gd-etape:nth-child(even) .gd-etape__texte {
		order: 0;
	}
}

/* =========================================================================
   16. Réalisations
   =========================================================================
   Deux colonnes : à 1280 px de contenu, chaque vignette fait ~600 px, assez
   large pour que le visuel du cabinet et ses trois résultats respirent.
   ========================================================================= */

.gd-cas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* Angles droits et carte immobile : c'est la vignette seule qui réagit,
   avec un parallaxe suivant la souris (voir js/motion.js). */
.gd-cas {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	background: linear-gradient(160deg, #12313A 0%, var(--gd-dark) 100%);
	border: 1px solid rgba(191, 216, 217, .12);
	transition: border-color .4s ease;
}

.gd-cas:hover {
	border-color: rgba(227, 254, 143, .3);
}

.gd-cas__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.gd-cas__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Court : pendant le déplacement de la souris, une transition longue
	   donnerait une impression de retard. */
	transition: transform .25s ease-out;
	will-change: transform;
}

/* Voile bas : assoit le visuel sur le corps de la carte, quelle que soit
   la couleur de la marque du cabinet. */
.gd-cas__media::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(180deg, transparent, rgba(11, 33, 39, .55));
	pointer-events: none;
}

.gd-cas__types {
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

/* Le badge sert aussi dans le hero de la page étude de cas, hors carte. */
.gd-cas .gd-cas__type,
.gd-casp-tags .gd-cas__type {
	display: inline-block;
	padding: .45em 1em;
	border-radius: var(--gd-radius-pill);
	background: rgba(11, 33, 39, .72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(227, 254, 143, .3);
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.gd-cas__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.9rem 2rem 2rem 2rem;
}

/* Blanc au repos comme au survol : c'est la flèche du pied de carte et les
   encadrés de résultats qui signalent l'interaction, le titre reste stable. */
.gd-cas .gd-cas__titre {
	font-family: var(--gd-serif);
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--gd-white);
	margin: 0;
}

/* Les résultats se partagent la largeur à parts égales : une rangée nette
   plutôt que des pastilles de tailles inégales qui partent à la ligne. */
.gd-cas__resultats {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.5rem 0 0 0;
	padding: 0;
	list-style: none;
}

.gd-cas__resultat {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 8rem;
	padding: .85em 1em;
	border-radius: 14px;
	background: rgba(227, 254, 143, .07);
	border: 1px solid rgba(227, 254, 143, .2);
	transition: background-color .4s ease, border-color .4s ease;
}

.gd-cas__resultat b {
	font-family: var(--gd-serif);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--gd-lime);
}

.gd-cas .gd-cas__resultat span {
	font-family: var(--gd-sans);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
	color: rgba(191, 216, 217, .85);
	margin-top: .45em;
}

/* Collé en bas : toutes les cartes d'une rangée alignent leur pied. */
.gd-cas .gd-cas__lien {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-top: auto;
	padding-top: 1.6rem;
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: color .3s ease;
}

.gd-cas:hover .gd-cas__lien {
	color: var(--gd-lime);
}

.gd-cas:hover .gd-btn__arrow {
	transform: translateX(4px);
}

@media (max-width: 560px) {
	.gd-cas__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.gd-cas__body {
		padding: 1.6rem 1.5rem 1.75rem 1.5rem;
	}
}

/* =========================================================================
   17. Cartes d'articles
   =========================================================================
   Même ossature que la carte d'étude de cas — angles droits, catégorie en
   pastille sur le visuel, titre en serif, lien collé en pied, parallaxe à la
   souris — mais en version claire. La parenté se voit, la distinction reste.
   ========================================================================= */

.gd-articles__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.gd-article {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	background: var(--gd-white);
	border: 1px solid rgba(11, 33, 39, .1);
	transition: border-color .4s ease;
}

.gd-article:hover {
	border-color: rgba(11, 33, 39, .28);
}

.gd-section--dark .gd-article {
	background: linear-gradient(160deg, #12313A 0%, var(--gd-dark) 100%);
	border-color: rgba(191, 216, 217, .12);
}

.gd-section--dark .gd-article:hover {
	border-color: rgba(227, 254, 143, .3);
}

.gd-article__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--gd-sand);
}

.gd-article__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s ease-out;
	will-change: transform;
}

/* Pastilles de catégorie, posées sur le visuel comme les typologies d'études. */
.gd-article__cats {
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.gd-article .gd-article__cat {
	display: inline-block;
	padding: .45em 1em;
	border-radius: var(--gd-radius-pill);
	background: rgba(11, 33, 39, .78);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(227, 254, 143, .3);
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.gd-article__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.75rem 1.9rem 1.9rem 1.9rem;
}

.gd-article__titre {
	font-family: var(--gd-serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--gd-dark);
	margin: 0;
}

.gd-section--dark .gd-article__titre {
	color: var(--gd-white);
}

.gd-article .gd-article__meta {
	margin-top: .9rem;
	color: rgba(11, 33, 39, .55);
	font-family: var(--gd-sans);
	font-size: .78rem;
	line-height: 1.5;
}

.gd-section--dark .gd-article .gd-article__meta {
	color: rgba(191, 216, 217, .7);
}

/* Collé en bas : toutes les cartes d'une rangée alignent leur pied. */
.gd-article .gd-article__lien {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-top: auto;
	padding-top: 1.5rem;
	color: var(--gd-medium);
	font-family: var(--gd-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: color .3s ease;
}

.gd-article:hover .gd-article__lien {
	color: var(--gd-dark);
}

.gd-section--dark .gd-article .gd-article__lien {
	color: var(--gd-light);
}

.gd-section--dark .gd-article:hover .gd-article__lien {
	color: var(--gd-lime);
}

.gd-article:hover .gd-btn__arrow {
	transform: translateX(4px);
}

/* =========================================================================
   18. FAQ
   ========================================================================= */

.gd-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.gd-faq__liste {
	border-top: 1px solid rgba(11, 33, 39, .12);
}

.gd-faq__item {
	border-bottom: 1px solid rgba(11, 33, 39, .12);
}

body .gd-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	margin: 0;
	padding: 1.6rem 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	text-align: left;
	text-transform: none;
	letter-spacing: -.01em;
	font-family: var(--gd-serif);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gd-dark);
	transition: color .3s ease;
}

/* Deux garde-fous pour qu'une question longue passe à la ligne au lieu de
   déborder sous le bouton d'ouverture : hello-elementor impose
   white-space: nowrap à tout élément bouton, et un élément flex refuse de
   descendre sous la largeur de son contenu sans min-width. */
body .gd-faq__q {
	white-space: normal;
}

body .gd-faq__q > span:first-child {
	min-width: 0;
	flex: 1 1 auto;
}

body .gd-faq__q:hover,
body .gd-faq__q:focus {
	background: transparent;
	border: none;
	color: var(--gd-medium);
}

body .gd-faq__q:focus-visible {
	outline: 2px solid var(--gd-medium);
	outline-offset: 4px;
}

.gd-faq__signe {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--gd-dark);
	transition: background-color .35s ease, transform .45s var(--gd-ease);
}

.gd-faq__signe::before,
.gd-faq__signe::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 2px;
	background: var(--gd-lime);
	transition: transform .45s var(--gd-ease);
}

.gd-faq__signe::after {
	transform: rotate(90deg);
}

.gd-faq__item.est-ouvert .gd-faq__signe {
	transform: rotate(180deg);
}

.gd-faq__item.est-ouvert .gd-faq__signe::after {
	transform: rotate(0deg);
}

.gd-faq__r {
	overflow: hidden;
	height: 0;
	transition: height .45s var(--gd-ease);
}

.gd-faq__r-inner {
	padding: 0 0 1.75rem 0;
	max-width: 60ch;
}

.gd-faq__r-inner p {
	font-family: var(--gd-sans);
	font-size: .95rem;
	line-height: 1.8;
	color: rgba(11, 33, 39, .75);
	margin: 0 0 1em 0;
}

.gd-faq__r-inner p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.gd-faq__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   19. CTA final
   ========================================================================= */

.gd-cta__box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	align-items: center;
	gap: clamp(2rem, 4vw, 4rem);
	padding: clamp(2.5rem, 5vw, 4.5rem);
	border-radius: var(--gd-radius-lg);
	background: linear-gradient(150deg, #12313A 0%, #0B2127 60%);
	border: 1px solid rgba(227, 254, 143, .22);
	overflow: hidden;
}

.gd-cta__box::after {
	/* content: '';
	position: absolute;
	right: -10%;
	top: -40%;
	width: 55%;
	height: 180%;
	background: radial-gradient(circle, rgba(227, 254, 143, .16) 0%, transparent 65%);
	pointer-events: none; */
}

.gd-cta__media img {
	width: 100%;
	border-radius: var(--gd-radius);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center;
}

@media (max-width: 900px) {
	.gd-cta__box {
		grid-template-columns: minmax(0, 1fr);
	}
	.gd-cta__media {
		display: none;
	}
}

/* =========================================================================
   20. États d'animation
   ========================================================================= */

html.gd-anim-ready [data-anim] {
	transition: opacity .85s var(--gd-ease), transform .85s var(--gd-ease);
	transition-delay: var(--gd-delay, 0ms);
}

html.gd-anim-ready [data-anim].est-visible {
	opacity: 1;
	transform: none;
}

/* Titre révélé mot à mot : chaque mot remonte de sa propre ligne. */
html.gd-anim-ready [data-split] .gd-word > span {
	transform: translateY(140%);
	opacity: 0;
	transition: transform .95s var(--gd-ease), opacity .7s ease;
	transition-delay: var(--gd-delay, 0ms);
}

html.gd-anim-ready [data-split].est-visible .gd-word > span {
	transform: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	html.gd-anim-ready [data-anim],
	html.gd-anim-ready [data-split] .gd-word > span {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}



















/* =========================================================================
   21. Page étude de cas
   =========================================================================
   Structure inspirée des pages projet de najumi : intitulé de section discret,
   titre, contenu. Les chiffres remontent juste après le visuel principal, là
   où l'attention est maximale.
   ========================================================================= */

.gd-casp-label {
	display: block;
	margin-bottom: .9rem;
	color: var(--gd-dark);
	font-family: var(--gd-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.gd-section--dark .gd-casp-label {
	color: var(--gd-lime);
}

/* --- En-tête de section commun ---
   C'est lui qui donne la structure de la page, pas la couleur des fonds :
   un filet, un numéro, un libellé, un titre. Le compteur est en CSS, donc il
   reste juste quand une section est absente faute de contenu — inutile de
   numéroter à la main dans le template. */

.gd-cas-page {
	counter-reset: casp;
}

.gd-casp-tete {
	counter-increment: casp;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	align-items: baseline;
	column-gap: clamp(1rem, 2vw, 2rem);
	padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
	border-top: 1px solid rgba(11, 33, 39, .16);
}

.gd-section--dark .gd-casp-tete {
	border-top-color: rgba(191, 216, 217, .2);
}

.gd-casp-tete::before {
	content: counter(casp, decimal-leading-zero);
	grid-row: 1 / 3;
	font-family: var(--gd-serif);
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	color: rgba(11, 33, 39, .28);
}

.gd-section--dark .gd-casp-tete::before {
	color: rgba(227, 254, 143, .5);
}

.gd-casp-tete .gd-casp-label {
	margin-bottom: .6rem;
}

.gd-casp-tete .gd-display {
	grid-column: 2;
}

@media (max-width: 620px) {
	.gd-casp-tete {
		grid-template-columns: minmax(0, 1fr);
	}
	.gd-casp-tete::before {
		grid-row: auto;
		display: block;
		margin-bottom: .5rem;
	}
	.gd-casp-tete .gd-display {
		grid-column: 1;
	}
}

/* --- Hero --- */

.gd-casp-hero {
	padding-top: clamp(9rem, 15vh, 12rem);
	/* Doit dépasser la remontée du visuel, sinon celui-ci mord sur le titre. */
	padding-bottom: clamp(8rem, 13vw, 13rem);
}

.gd-casp-hero .gd-display {
	max-width: 20ch;
}

.gd-casp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.5rem;
}

/* --- Visuel principal ---
   Il remonte sur le hero d'une valeur fixe, et non plus via un dégradé calé
   sur un pourcentage de sa propre hauteur : selon le format de l'image, la
   césure sombre/crème tombait n'importe où.

   z-index : la section suivante a un fond opaque et, à hauteur de pile égale,
   c'est le dernier élément du flux qui est peint par-dessus. Sans cela elle
   recouvrait le bas de l'ombre portée, qui apparaissait tranchée net. Le
   padding-bas laisse en outre à l'ombre la place de se diffuser. */

.gd-casp-visuel {
	/* Hauteur du débord sur le hero, réutilisée par la marge et le fond. */
	--gd-debord: clamp(5rem, 9vw, 9rem);

	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--gd-debord));
	padding-bottom: clamp(2.5rem, 4.5vw, 4.5rem);
	/* Le fond crème ne démarre qu'après le débord : la bande transparente
	   laisse voir le hero derrière le haut de l'image.
	   Une marge négative sur l'enfant ne convenait pas — elle fusionne avec
	   celle du parent, qui remonte alors avec son fond et recouvre le vert.
	   Le repère est une longueur fixe, pas un pourcentage : il ne dépend donc
	   pas du format de l'image. */
	background: linear-gradient(
		180deg,
		transparent 0 var(--gd-debord),
		var(--gd-cream) var(--gd-debord)
	);
}

.gd-casp-visuel img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gd-radius-lg);
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7);
}

/* --- Chiffres --- */

.gd-casp-chiffres {
	padding-top: clamp(3.5rem, 6vw, 6rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
}

.gd-casp-chiffres__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-top: 2.5rem;
}

.gd-casp-chiffre {
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: var(--gd-radius);
	background: var(--gd-dark);
	border: 1px solid rgba(227, 254, 143, .25);
}

.gd-casp-chiffre .gd-casp-chiffre__valeur {
	font-family: var(--gd-serif) !important;
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	font-weight: 600;
	line-height: 1.05;
	color: var(--gd-lime);
}

.gd-casp-chiffre .gd-casp-chiffre__label {
	margin-top: .8rem;
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* Deux sections claires consécutives : la seconde n'a pas à rouvrir toute sa
   marge haute, celle de la précédente suffit. */
.gd-casp-verbatim + .gd-casp-contexte,
.gd-casp-profil + .gd-casp-chiffres {
	padding-top: 0;
}

/* Le visuel porte déjà sa marge basse. */
.gd-casp-visuel + .gd-casp-contexte,
.gd-casp-visuel + .gd-casp-verbatim,
.gd-casp-visuel + .gd-casp-profil,
.gd-casp-visuel + .gd-casp-chiffres {
	padding-top: clamp(2rem, 3.5vw, 3.5rem);
}

/* --- Contexte --- */

.gd-casp-contexte {
	background: var(--gd-cream);
}

.gd-casp-contexte__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(2.5rem, 5vw, 5rem);
}

.gd-casp-texte,
.gd-casp-texte p {
	font-family: var(--gd-sans);
	font-size: 1rem;
	line-height: 1.85;
	color: rgba(11, 33, 39, .78);
}

.gd-casp-texte p {
	margin: 0 0 1em 0;
}

.gd-casp-texte p:last-child {
	margin-bottom: 0;
}

/* --- Solution --- */

/* Une seule colonne, puis les actions en grille.
   En deux colonnes, un texte de quatre paragraphes face à trois actions
   laissait la moitié droite vide : la longueur des deux contenus n'a aucune
   raison de coïncider. Empilés, ils s'équilibrent quel que soit le cas. */
.gd-casp-solution__texte {
	/* Mesure de lecture : au-delà, l'œil perd la ligne suivante. */
	max-width: 68ch;
	margin-top: 1.5rem;
}

.gd-casp-solution__intertitre {
	display: block;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	margin-bottom: 1.25rem;
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.gd-casp-actions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}

.gd-casp-action {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.1rem 1.4rem;
	border-radius: 16px;
	background: rgba(191, 216, 217, .06);
	border: 1px solid rgba(191, 216, 217, .14);
}

.gd-casp-action__puce {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gd-lime);
	color: var(--gd-dark);
	font-size: .7rem;
	font-weight: 800;
}

.gd-casp-action span:last-child {
	font-family: var(--gd-sans);
	font-size: .95rem;
	line-height: 1.65;
	color: var(--gd-light);
}

/* --- Galerie --- */

/* Colonnes maçonnées plutôt qu'une grille.
   Les visuels d'une étude n'ont pas de format commun — logo, palette,
   maquette, capture. En grille, les cellules d'une même rangée s'alignaient
   sur la plus haute et laissaient une bande vide sous les plus courtes.
   Le multi-colonnes laisse chaque image à sa hauteur réelle. */
.gd-casp-galerie__grid {
	columns: 3;
	column-gap: 1.5rem;
	margin-top: 2.5rem;
}

.gd-casp-galerie__item {
	break-inside: avoid;
	/* Safari ancien ne connaît que la propriété préfixée. */
	-webkit-column-break-inside: avoid;
	margin: 0 0 1.5rem 0;
	border-radius: var(--gd-radius);
	overflow: hidden;
	box-shadow: 0 18px 44px -26px rgba(11, 33, 39, .35);
}

.gd-casp-galerie__item img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1000px) {
	.gd-casp-galerie__grid {
		columns: 2;
	}
}

@media (max-width: 620px) {
	.gd-casp-galerie__grid {
		columns: 1;
	}
}

/* --- Témoignage --- */

.gd-casp-avis__bloc {
	max-width: 52rem;
	margin: 0 auto;
	text-align: center;
}

.gd-casp-avis .gd-quote::before {
	margin-left: auto;
	margin-right: auto;
}

.gd-casp-avis__auteur {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

.gd-casp-avis__auteur img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
}

.gd-casp-avis__auteur span {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.gd-casp-avis__auteur strong {
	color: var(--gd-white);
	font-family: var(--gd-serif);
	font-size: 1.05rem;
	font-weight: 600;
}

.gd-casp-avis__auteur em {
	margin-top: .2rem;
	color: rgba(191, 216, 217, .8);
	font-family: var(--gd-sans);
	font-size: .74rem;
	font-style: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* --- Livrable --- */

.gd-casp-site {
	text-align: center;
}

.gd-casp-site .gd-casp-label,
.gd-casp-site .gd-display {
	text-align: center;
}

.gd-casp-site__mockup {
	margin: 2.5rem auto 0 auto;
	max-width: 60rem;
}

.gd-casp-site__mockup img {
	display: block;
	width: 100%;
	height: auto;
}

.gd-casp-site .gd-btn-row {
	justify-content: center;
}

/* --- Étude suivante --- */

.gd-casp-suivante__lien {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .4fr);
	align-items: center;
	gap: 2rem;
	padding: clamp(2rem, 4vw, 3rem);
	border-radius: var(--gd-radius-lg);
	border: 1px solid rgba(191, 216, 217, .16);
	text-decoration: none;
	transition: border-color .4s ease, transform .5s var(--gd-ease);
}

.gd-casp-suivante__lien:hover {
	border-color: rgba(227, 254, 143, .4);
	transform: translateY(-4px);
}

.gd-casp-suivante__texte {
	display: block;
}

.gd-casp-suivante__corps {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	color: var(--gd-white);
}

.gd-casp-suivante__corps .gd-display {
	font-size: clamp(1.3rem, 2vw, 1.8rem);
	color: var(--gd-white);
}

.gd-casp-suivante__lien:hover .gd-btn__arrow {
	transform: translateX(6px);
}

.gd-casp-suivante__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 9rem;
	object-fit: cover;
	border-radius: var(--gd-radius);
}

@media (max-width: 900px) {
	.gd-casp-suivante__lien {
		grid-template-columns: minmax(0, 1fr);
	}
	.gd-casp-suivante__media {
		display: none;
	}
}


/* =========================================================================
   22. Étude de cas — profil, verbatim, vidéo
   ========================================================================= */

/* --- Profil du cabinet --- */

.gd-casp-profil {
	padding-top: clamp(3rem, 5vw, 4.5rem);
	padding-bottom: 0;
}

.gd-casp-profil__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.5rem 2rem;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem) 0;
	border-top: 1px solid rgba(11, 33, 39, .14);
	border-bottom: 1px solid rgba(11, 33, 39, .14);
}

.gd-casp-profil__item {
	min-width: 0;
}

.gd-casp-profil__liste dt {
	color: var(--gd-medium);
	font-family: var(--gd-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gd-casp-profil__liste dd {
	margin: .5rem 0 0 0;
	color: var(--gd-dark);
	font-family: var(--gd-serif);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.35;
}

/* --- Verbatim court --- */

/* Espacement indépendant des sections présentes.
   Toutes les études n'ont pas de chiffres : quand la section manque, l'encart
   se retrouvait collé au visuel. Il porte donc sa propre marge haute, annulée
   par le sélecteur d'adjacence quand les chiffres le précèdent déjà. */
.gd-casp-verbatim {
	background: var(--gd-cream);
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(4rem, 7vw, 7rem);
}

.gd-casp-chiffres + .gd-casp-verbatim {
	padding-top: 0;
}

/* Photo en rectangle arrondi à gauche, propos centré à droite dans les deux
   axes. Sans photo, la carte reste sur une colonne centrée. */
.gd-casp-verbatim__bloc {
	max-width: 56rem;
	margin: 0 auto;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: var(--gd-radius-lg);
	background: var(--gd-white);
	border: 1px solid rgba(11, 33, 39, .08);
	text-align: center;
}

.gd-casp-verbatim__bloc--photo {
	display: grid;
	grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.75rem);
}

.gd-casp-verbatim__photo,
.gd-casp-verbatim__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* Cadrage haut : le visage reste dans le cadre quel que soit le format
	   du portrait fourni. */
	object-position: top center;
	border-radius: var(--gd-radius);
}

.gd-casp-verbatim__photo {
	overflow: hidden;
	background: var(--gd-cream);
}

.gd-casp-verbatim__texte {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(.5rem, 2vw, 1.5rem);
}

.gd-casp-verbatim__bloc blockquote {
	margin: 0;
	padding: 0;
	border: none;
	color: var(--gd-dark);
	font-family: var(--gd-serif);
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.5;
}

.gd-casp-verbatim__bloc figcaption {
	margin-top: 1.25rem;
}

.gd-casp-verbatim__bloc figcaption span {
	color: var(--gd-medium);
	font-family: var(--gd-sans);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

@media (max-width: 700px) {
	.gd-casp-verbatim__bloc--photo {
		grid-template-columns: minmax(0, 1fr);
	}
	.gd-casp-verbatim__photo,
	.gd-casp-verbatim__photo img {
		aspect-ratio: 3 / 2;
	}
}

/* --- Témoignage : deux colonnes quand une vidéo accompagne le texte --- */

.gd-casp-avis__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.gd-casp-avis--video .gd-casp-avis__grid {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

/* En colonne étroite, la citation doit descendre d'un cran. */
.gd-casp-avis--video .gd-quote {
	font-size: clamp(1.1rem, 1.6vw, 1.45rem);
}

/* Centré seulement quand le témoignage est seul. */
.gd-casp-avis--video .gd-casp-avis__bloc {
	max-width: none;
	margin: 0;
	text-align: left;
}

.gd-casp-avis--video .gd-quote::before {
	margin-left: 0;
}

.gd-casp-avis--video .gd-casp-avis__auteur {
	justify-content: flex-start;
}

/* --- Façade vidéo --- */

body .gd-casp-video__facade {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(191, 216, 217, .16);
	border-radius: var(--gd-radius-lg);
	background: var(--gd-dark);
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 16 / 9;
	transition: transform .5s var(--gd-ease), border-color .4s ease;
}

body .gd-casp-video__facade:hover {
	transform: translateY(-4px);
	border-color: rgba(227, 254, 143, .45);
	background: var(--gd-dark);
}

.gd-casp-video__facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--gd-ease), opacity .4s ease;
}

.gd-casp-video__facade:hover img {
	transform: scale(1.04);
	opacity: .85;
}

/* Bouton de lecture */
.gd-casp-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--gd-lime);
	box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .7);
	transition: transform .45s var(--gd-ease);
}

.gd-casp-video__play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--gd-dark);
}

.gd-casp-video__facade:hover .gd-casp-video__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.gd-casp-video__iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--gd-radius-lg);
	display: block;
}

.gd-casp-video .gd-casp-video__mention {
	display: block;
	margin-top: .9rem;
	color: rgba(191, 216, 217, .6);
	font-family: var(--gd-sans);
	font-size: .68rem;
	line-height: 1.5;
}

@media (max-width: 900px) {
	.gd-casp-avis--video .gd-casp-avis__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}







/* =========================================================================
   23. Grille d'arguments (pages piliers)
   ========================================================================= */

.gd-grille__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5rem);
	margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.gd-grille__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gd-radius-lg);
}

.gd-section--dark .gd-grille__media img {
	border: 1px solid rgba(191, 216, 217, .14);
}

.gd-grille__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.gd-grille__item {
	padding: clamp(1.75rem, 3vw, 2.25rem);
	border-radius: var(--gd-radius);
	transition: transform .5s var(--gd-ease), box-shadow .5s var(--gd-ease),
		border-color .4s ease;
}

.gd-section--cream .gd-grille__item {
	background: var(--gd-white);
	border: 1px solid rgba(11, 33, 39, .08);
}

.gd-section--cream .gd-grille__item:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 52px -26px rgba(11, 33, 39, .3);
}

.gd-section--dark .gd-grille__item {
	background: linear-gradient(160deg, #12313A 0%, var(--gd-dark) 100%);
	border: 1px solid rgba(191, 216, 217, .12);
}

.gd-section--dark .gd-grille__item:hover {
	transform: translateY(-5px);
	border-color: rgba(227, 254, 143, .35);
	box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .7);
}

.gd-grille__item h3 {
	font-family: var(--gd-serif);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	margin: 0 0 .75rem 0;
}

.gd-section--cream .gd-grille__item h3 {
	color: var(--gd-dark);
}

.gd-section--dark .gd-grille__item h3 {
	color: var(--gd-white);
}

.gd-grille__texte,
.gd-grille__texte p {
	font-family: var(--gd-sans);
	font-size: .95rem;
	line-height: 1.75;
	margin: 0;
}

.gd-section--cream .gd-grille__texte,
.gd-section--cream .gd-grille__texte p {
	color: rgba(11, 33, 39, .72);
}

.gd-section--dark .gd-grille__texte,
.gd-section--dark .gd-grille__texte p {
	color: var(--gd-light);
}

/* Fil d'Ariane du hero partagé : centré comme le reste du bloc. */
.gd-hero__fil {
	margin: 0 0 1.5rem 0;
	font-family: var(--gd-sans);
	font-size: .8rem;
}

.gd-hero--center .gd-hero__fil {
	text-align: center;
}

@media (max-width: 900px) {
	.gd-grille__intro {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* =========================================================================
   24. Offres et tarifs
   ========================================================================= */

.gd-offres__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
	align-items: stretch;
}

.gd-offre {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(2rem, 3.5vw, 2.75rem);
	border-radius: var(--gd-radius-lg);
	background: linear-gradient(160deg, #12313A 0%, var(--gd-dark) 100%);
	border: 1px solid rgba(191, 216, 217, .14);
	transition: transform .5s var(--gd-ease), border-color .4s ease,
		box-shadow .5s var(--gd-ease);
}

.gd-offre:hover {
	transform: translateY(-6px);
	border-color: rgba(227, 254, 143, .35);
	box-shadow: 0 32px 70px -32px rgba(0, 0, 0, .75);
}

/* L'offre mise en avant se distingue par sa bordure, pas par sa taille :
   deux cartes de hauteurs différentes déséquilibraient la rangée. */
.gd-offre--phare {
	border-color: rgba(227, 254, 143, .45);
	box-shadow: 0 0 0 1px rgba(227, 254, 143, .15), 0 30px 70px -34px rgba(0, 0, 0, .7);
}

.gd-offre .gd-offre__badge {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	padding: .45em 1.1em;
	border-radius: var(--gd-radius-pill);
	background: var(--gd-lime);
	color: var(--gd-dark);
	font-family: var(--gd-sans);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.gd-offre .gd-offre__rang {
	color: rgba(191, 216, 217, .7);
	font-family: var(--gd-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.gd-offre__nom {
	font-family: var(--gd-serif);
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--gd-white);
	margin: .5rem 0 0 0;
}

.gd-offre .gd-offre__baseline {
	margin: .5rem 0 0 0;
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .9rem;
	line-height: 1.6;
}

/* Prix : la valeur en serif, le reste en retrait. */
.gd-offre__prix {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.75rem 0 0 0;
}

.gd-offre .gd-offre__prix-mention {
	color: rgba(191, 216, 217, .7);
	font-family: var(--gd-sans);
	font-size: .78rem;
}

.gd-offre .gd-offre__prix-montant {
	font-family: var(--gd-serif) !important;
	font-size: clamp(2.4rem, 4vw, 3.2rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--gd-white);
}

.gd-offre .gd-offre__prix-devise {
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: 1rem;
	font-weight: 700;
}

.gd-offre__reperes {
	list-style: none;
	margin: 1.25rem 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.gd-offre__reperes li {
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.5;
}

.gd-offre .gd-offre__texte {
	margin: 1.75rem 0 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(191, 216, 217, .16);
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .92rem;
	line-height: 1.75;
}

.gd-offre__points {
	list-style: none;
	margin: 1.5rem 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

.gd-offre__points li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}

.gd-offre__points li span:last-child {
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .9rem;
	line-height: 1.6;
}

.gd-offre .gd-offre__coche {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(227, 254, 143, .16);
	color: var(--gd-lime);
	font-size: .62rem;
	font-weight: 800;
}

/* Collé en bas : les deux cartes alignent leur bouton, quel que soit le
   nombre de lignes de la liste. La respiration vient de la liste elle-même —
   une marge haute sur le bouton annulerait le « auto ». */
.gd-offre__points {
	margin-bottom: 2rem;
}

.gd-offre .gd-offre__cta {
	width: 100%;
	margin-top: auto;
}

.gd-offres__note {
	max-width: 46rem;
	margin: clamp(2.5rem, 4vw, 3.5rem) auto 0 auto;
	text-align: center;
	color: rgba(191, 216, 217, .8);
	font-family: var(--gd-sans);
	font-size: .88rem;
	line-height: 1.8;
}

.gd-offres__note strong {
	color: var(--gd-white);
}

.gd-offres__note a {
	color: var(--gd-lime);
	text-decoration: underline;
	text-underline-offset: 3px;
}



/* =========================================================================
   25 bis. Article — raccords avec le système de design
   =========================================================================
   Le gabarit de l'article garde ses classes .article-*, mais son hero et ses
   catégories reprennent le langage commun. Les règles d'origine vivent dans
   style.css ; celles-ci les recadrent.
   ========================================================================= */

.article-hero .article-hero-contenu {
	width: 100%;
	max-width: var(--gd-max);
	margin: 0 auto;
	padding: 0 var(--gd-gutter);
}

.article-hero .gd-display {
	max-width: 24ch;
}

.article-hero .gd-lead {
	max-width: 58ch;
}

/* Catégorie : même pastille que les typologies d'études de cas. */
.article-hero .article-categorie {
	display: inline-block;
	padding: .45em 1.1em;
	border-radius: var(--gd-radius-pill);
	background: rgba(11, 33, 39, .5);
	border: 1px solid rgba(227, 254, 143, .3);
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease;
}

.article-hero .article-categorie:hover {
	background: var(--gd-lime);
	color: var(--gd-dark);
}

.article-hero .article-meta,
.article-hero .article-meta span,
.article-hero .article-meta time {
	font-family: var(--gd-sans);
}

/* Le hero de l'article ne porte plus sa largeur : elle vient de gd-wrap. */
.section-articles-connexes {
	padding-top: var(--gd-section);
}

/* =========================================================================
   25. Archives (blog, études de cas)
   ========================================================================= */

.gd-archive-hero {
	padding-top: clamp(9rem, 15vh, 12rem);
	padding-bottom: clamp(4rem, 7vw, 7rem);
}

.gd-archive-hero__inner {
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
}

.gd-archive-hero .gd-lead {
	margin-left: auto;
	margin-right: auto;
}

.gd-archive-hero .gd-hero__fil {
	text-align: center;
}

/* --- Filtres --- */

.gd-filtres {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

body .gd-filtre {
	margin: 0;
	padding: .8em 1.6em;
	border-radius: var(--gd-radius-pill);
	border: 1px solid rgba(191, 216, 217, .25);
	background: transparent;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

body .gd-filtre:hover {
	border-color: var(--gd-lime);
	color: var(--gd-lime);
	background: rgba(227, 254, 143, .06);
}

body .gd-filtre.est-actif {
	background: var(--gd-lime);
	border-color: var(--gd-lime);
	color: var(--gd-dark);
}

body .gd-filtre:focus-visible {
	outline: 2px solid var(--gd-lime);
	outline-offset: 3px;
}

/* L'enveloppe de filtrage devient l'élément de grille : la carte occupe
   toute sa cellule pour que les hauteurs restent alignées. */
.gd-filtrable {
	display: flex;
}

.gd-filtrable > a {
	width: 100%;
}

.gd-filtrable.est-masque {
	display: none;
}

.gd-filtres__vide {
	margin: 2rem 0 0 0;
	text-align: center;
	color: var(--gd-light);
	font-family: var(--gd-sans);
}

/* --- Pagination des archives --- */

.gd-archive-liste .pagination {
	display: flex;
	justify-content: center;
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

.gd-archive-liste .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .6em;
}

.gd-archive-liste .page-numbers {
	display: inline-block;
	padding: .75em 1.15em;
	border-radius: var(--gd-radius-pill);
	background: rgba(11, 33, 39, .06);
	color: var(--gd-dark);
	font-family: var(--gd-sans);
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease;
}

.gd-archive-liste .page-numbers:hover,
.gd-archive-liste .page-numbers.current {
	background: var(--gd-dark);
	color: var(--gd-lime);
}

.gd-archive-liste .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}



/* =========================================================================
   26. Partenaires
   ========================================================================= */

/* auto-fill et non auto-fit : les colonnes vides sont conservées, donc une
   carte isolée garde sa largeur au lieu de s'étirer sur toute la grille. */
.gd-partenaires__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.gd-partenaire {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	background: var(--gd-white);
	border: 1px solid rgba(11, 33, 39, .1);
	transition: border-color .4s ease;
}

.gd-partenaire:hover {
	border-color: rgba(11, 33, 39, .28);
}

/* Aplat clair derrière le logo : sans lui, un logo multicolore ou monochrome
   sombre devient illisible selon la carte. */
.gd-partenaire__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	padding: 2rem;
	background: var(--gd-cream);
	border-bottom: 1px solid rgba(11, 33, 39, .08);
}

.gd-partenaire__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .5s var(--gd-ease);
}

.gd-partenaire:hover .gd-partenaire__logo img {
	transform: scale(1.04);
}

.gd-partenaire__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.6rem 1.8rem 1.8rem 1.8rem;
}

.gd-partenaire .gd-partenaire__cat {
	display: inline-block;
	align-self: flex-start;
	padding: .4em 1em;
	margin-bottom: .9rem;
	border-radius: var(--gd-radius-pill);
	background: rgba(11, 33, 39, .06);
	color: var(--gd-medium);
	font-family: var(--gd-sans);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.gd-partenaire__titre {
	font-family: var(--gd-serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--gd-dark);
	margin: 0;
}

.gd-partenaire .gd-partenaire__texte {
	margin: .7rem 0 0 0;
	color: rgba(11, 33, 39, .72);
	font-family: var(--gd-sans);
	font-size: .92rem;
	line-height: 1.7;
}

.gd-partenaire .gd-partenaire__lien {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-top: auto;
	padding-top: 1.4rem;
	color: var(--gd-medium);
	font-family: var(--gd-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: color .3s ease;
}

.gd-partenaire:hover .gd-partenaire__lien {
	color: var(--gd-dark);
}

.gd-partenaire:hover .gd-btn__arrow {
	transform: translateX(4px);
}

/* --- Fiche partenaire --- */

.gd-partenaire-hero__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 220px;
	min-height: 110px;
	margin: 0 auto 1.75rem auto;
	padding: 1.5em 2em;
	background: var(--gd-white);
	border-radius: var(--gd-radius);
}

.gd-partenaire-hero__logo img {
	max-width: 100%;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.gd-partenaire-hero .gd-casp-tags {
	justify-content: center;
}

/* Le contenu libre de la fiche contient titres et listes : sans ces règles,
   ils tombaient sur les styles par défaut du navigateur. */
.gd-partenaire-presentation__texte {
	max-width: 68ch;
}

.gd-partenaire-presentation__texte h2,
.gd-partenaire-presentation__texte h3,
.gd-partenaire-presentation__texte h4 {
	font-family: var(--gd-serif);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--gd-dark);
	margin: 2em 0 .6em 0;
}

.gd-partenaire-presentation__texte h3 {
	font-size: 1.4rem;
}

.gd-partenaire-presentation__texte h4 {
	font-size: 1.1rem;
}

.gd-partenaire-presentation__texte ul,
.gd-partenaire-presentation__texte ol {
	margin: 1.2em 0;
	padding-left: 1.2em;
}

.gd-partenaire-presentation__texte li {
	margin-bottom: .5em;
	font-family: var(--gd-sans);
	font-size: 1rem;
	line-height: 1.8;
	color: rgba(11, 33, 39, .78);
}

.gd-partenaire-presentation__texte li::marker {
	color: var(--gd-medium);
}

.gd-partenaire-presentation__texte a {
	color: var(--gd-medium);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Le verbatim partenaire n'a pas de photo : la carte reste sur une colonne. */
.gd-partenaire-verbatim {
	background: var(--gd-cream);
}


/* --- Fiche partenaire : contenu et encart latéral --- */

/* Le bouton du hero est dans un conteneur centré : sans cette règle, il
   restait calé à gauche à l'intérieur. */
.gd-partenaire-hero .gd-btn-row {
	justify-content: center;
}

/* Pas d'align-items: start — la colonne de droite doit s'étirer sur toute la
   hauteur du texte, sinon son contenu collant n'a aucune course à parcourir
   et paraît simplement figé en haut. */
.gd-partenaire-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* Sans contenu rédactionnel, l'encart ne doit pas rester coincé à droite. */
.gd-partenaire-layout > .gd-partenaire-aside:only-child {
	grid-column: 1 / -1;
	max-width: 380px;
	margin: 0 auto;
}

.gd-partenaire-aside__inner {
	position: sticky;
	top: 7rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 2rem;
	border-radius: var(--gd-radius-lg);
	background: linear-gradient(160deg, #12313A 0%, var(--gd-dark) 100%);
	border: 1px solid rgba(191, 216, 217, .16);
}

.gd-partenaire-aside__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 88px;
	margin-bottom: 1.5rem;
	padding: 1rem 1.5rem;
	border-radius: var(--gd-radius);
	background: var(--gd-white);
}

.gd-partenaire-aside__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.gd-partenaire-aside .gd-partenaire-aside__cat {
	display: inline-block;
	padding: .4em 1em;
	margin-bottom: .9rem;
	border-radius: var(--gd-radius-pill);
	background: rgba(227, 254, 143, .12);
	border: 1px solid rgba(227, 254, 143, .28);
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.gd-partenaire-aside .gd-partenaire-aside__nom {
	margin: 0;
	font-family: var(--gd-serif);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--gd-white);
}

.gd-partenaire-aside .gd-partenaire-aside__baseline {
	margin: .6rem 0 0 0;
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .9rem;
	line-height: 1.65;
}

.gd-partenaire-aside .gd-partenaire-aside__cta {
	width: 100%;
	margin-top: 1.75rem;
}

.gd-partenaire-aside .gd-partenaire-aside__mention {
	margin-top: .8rem;
	color: rgba(191, 216, 217, .65);
	font-family: var(--gd-sans);
	font-size: .68rem;
	line-height: 1.5;
}

@media (max-width: 980px) {
	.gd-partenaire-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.gd-partenaire-aside__inner {
		position: static;
	}
}



/* =========================================================================
   27. Pied de page
   ========================================================================= */

.gd-footer {
	background: var(--gd-dark);
	padding: clamp(4rem, 7vw, 7rem) 0 2rem 0;
	border-top: 1px solid rgba(191, 216, 217, .12);
}

.gd-footer__haut {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

/* --- Colonne de marque --- */

.gd-footer__marque .custom-logo-link {
	display: block;
	width: 56px;
	margin-bottom: 1.5rem;
}

.gd-footer__marque .custom-logo-link img {
	width: 100%;
	height: auto;
}

.gd-footer .gd-footer__baseline {
	max-width: 34ch;
	margin: 0;
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .92rem;
	line-height: 1.75;
}

.gd-footer__reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.75rem;
}

.gd-footer__reseaux .gd-btn {
	padding: .85em 1.5em;
	font-size: .78rem;
}

/* --- Colonnes de liens --- */

.gd-footer .gd-footer__titre {
	display: block;
	margin-bottom: 1.25rem;
	color: var(--gd-white);
	font-family: var(--gd-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gd-footer .gd-footer__liens {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.gd-footer .gd-footer__liens li {
	margin: 0;
	line-height: 1.5;
}

.gd-footer .gd-footer__liens a {
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .92rem;
	text-decoration: none;
	transition: color .3s ease;
}

.gd-footer .gd-footer__liens a:hover {
	color: var(--gd-lime);
}

/* --- Barre du bas --- */

.gd-footer__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(191, 216, 217, .12);
}

.gd-footer__bas span {
	color: rgba(191, 216, 217, .6);
	font-family: var(--gd-sans);
	font-size: .78rem;
}

@media (max-width: 900px) {
	.gd-footer__haut {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gd-footer__marque {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.gd-footer__haut {
		grid-template-columns: minmax(0, 1fr);
	}
}




/* =========================================================================
   28. Page auteur et encadré auteur
   ========================================================================= */

.gd-auteur-hero {
	padding-top: clamp(9rem, 15vh, 12rem);
	padding-bottom: clamp(4rem, 7vw, 7rem);
}

.gd-auteur-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
	align-items: center;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

.gd-auteur-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gd-radius-lg);
	border: 1px solid rgba(191, 216, 217, .16);
}

.gd-auteur-hero__texte .gd-display {
	max-width: 16ch;
}

/* --- Chiffres et biographie --- */

.gd-auteur-chiffres {
	padding-bottom: 0;
}

.gd-auteur-chiffres + .gd-auteur-bio {
	padding-top: clamp(3rem, 5vw, 5rem);
}

.gd-auteur-bio__texte {
	max-width: 68ch;
}

.gd-auteur-bio__texte p {
	margin: 0 0 1.2em 0;
}

.gd-auteur-bio__texte p:last-child {
	margin-bottom: 0;
}

/* --- Encadré de fin d'article ---
   Les deux blocs sont sur le même crème et forment un ensemble : leurs marges
   sont resserrées pour que « À lire ensuite » suive de près l'encadré, au lieu
   d'être séparé par deux respirations de section pleines. */

.gd-auteur-encadre {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.gd-auteur-encadre + .section-articles-connexes {
	padding-top: clamp(1.75rem, 3vw, 2.75rem);
}


.gd-auteur-carte {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: var(--gd-radius-lg);
	background: linear-gradient(160deg, #12313A 0%, var(--gd-dark) 100%);
	border: 1px solid rgba(191, 216, 217, .16);
}

.gd-auteur-carte__photo {
	display: block;
	overflow: hidden;
	border-radius: var(--gd-radius);
}

.gd-auteur-carte__photo img,
.gd-auteur-carte__photo picture {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center;
}

.gd-auteur-carte .gd-auteur-carte__role {
	display: block;
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gd-auteur-carte .gd-auteur-carte__nom {
	margin: .5rem 0 0 0;
	font-family: var(--gd-serif);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
}

.gd-auteur-carte .gd-auteur-carte__nom a {
	color: var(--gd-white);
	text-decoration: none;
	transition: color .3s ease;
}

.gd-auteur-carte .gd-auteur-carte__nom a:hover {
	color: var(--gd-lime);
}

.gd-auteur-carte .gd-auteur-carte__accroche {
	margin: .8rem 0 0 0;
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .95rem;
	line-height: 1.7;
}

.gd-auteur-carte__liens {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1.4rem;
}

.gd-auteur-carte__liens a {
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .3s ease;
}

.gd-auteur-carte__liens a:hover {
	color: var(--gd-lime);
}

@media (max-width: 900px) {
	.gd-auteur-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.gd-auteur-hero__media {
		max-width: 320px;
	}

	.gd-auteur-carte {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}

	.gd-auteur-carte__photo {
		max-width: 160px;
		margin: 0 auto;
	}

	.gd-auteur-carte__liens {
		justify-content: center;
	}
}

/* =========================================================================
   29. Article — colonne latérale alignée sur le système
   =========================================================================
   Le gabarit garde ses classes .article-*, héritées de la première passe.
   Ces règles les ramènent au langage commun : angles droits comme les cartes,
   serif sur les titres, accents lime. Elles s'appuient sur css/refonte.css
   étant chargé après style.css.
   ========================================================================= */

.article-sommaire {
	border-radius: 0;
	border: 1px solid rgba(11, 33, 39, .1);
	background: var(--gd-white);
}

.article-sommaire button.article-sommaire-titre {
	font-family: var(--gd-sans);
	font-size: .68rem;
	letter-spacing: .16em;
	color: var(--gd-medium);
}

.article-sommaire li {
	border-left-color: rgba(11, 33, 39, .12);
}

.article-sommaire li::before {
	font-family: var(--gd-serif) !important;
	color: rgba(11, 33, 39, .38);
}

.article-sommaire a {
	font-family: var(--gd-sans);
	font-size: .9rem;
	line-height: 1.55;
}

.article-sommaire li.est-actif {
	border-left-color: var(--gd-lime);
}

.article-sommaire li.est-actif::before {
	color: var(--gd-medium);
}

/* --- CTA latéral --- */

/* Angles droits, comme le sommaire juste au-dessus. */
.article-cta {
	border-radius: 0;
	background: linear-gradient(160deg, #12313A 0%, var(--gd-dark) 100%);
	border: 1px solid rgba(191, 216, 217, .16);
}

.article-cta .article-cta-surtitre {
	background: rgba(227, 254, 143, .12);
	border: 1px solid rgba(227, 254, 143, .3);
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .62rem;
	letter-spacing: .12em;
}

.article-cta .article-cta-titre {
	font-family: var(--gd-serif) !important;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.article-cta .article-cta-description {
	font-family: var(--gd-sans);
	font-size: .9rem;
	line-height: 1.7;
}

/* Le bouton du CTA latéral est un <button> hérité : on le ramène à la pilule
   du système, en montant la spécificité au-dessus de hello-elementor. */
.article-cta .article-cta-lien button.button-contrast {
	width: 100%;
	margin-top: 1.5rem;
	margin-bottom: .8rem;
	padding: 1.05em 1.5em;
	border: none;
	border-radius: var(--gd-radius-pill);
	background-color: var(--gd-lime);
	color: var(--gd-dark);
	font-family: var(--gd-sans);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: none;
	cursor: pointer;
	transition: transform .35s var(--gd-ease), box-shadow .35s var(--gd-ease),
		background-color .3s ease;
}

.article-cta .article-cta-lien:hover button.button-contrast {
	transform: translateY(-2px);
	background-color: #EEFFB4;
	box-shadow: 0 12px 32px -10px rgba(227, 254, 143, .55);
}

.article-cta .article-cta-mention {
	font-family: var(--gd-sans);
	font-size: .66rem;
}

/* --- Corps de l'article --- */

.article-corps h2,
.article-corps h3,
.article-corps h4 {
	font-family: var(--gd-serif);
	font-weight: 600;
	letter-spacing: -.01em;
}

.article-corps p,
.article-corps li {
	font-family: var(--gd-sans);
}

/* Citation : même carte que le sommaire — angles droits, fond franc, filet
   de contour — avec une barre lime qui la signale dans le fil du texte.
   L'ancien fond crème sur fond blanc se voyait à peine. */
.article-corps blockquote {
	margin: 2.5em 0;
	padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
	background: var(--gd-cream);
	border: 1px solid rgba(11, 33, 39, .12);
	border-left: 4px solid var(--gd-lime);
	border-radius: 0;
}

.article-corps blockquote p {
	font-family: var(--gd-serif) !important;
	font-size: 1.2em;
	font-style: italic;
	line-height: 1.55;
	color: var(--gd-dark);
}

.article-corps blockquote p:last-child {
	margin-bottom: 0;
}

/* Attribution éventuelle, en fin de citation. */
.article-corps blockquote cite {
	display: block;
	margin-top: 1rem;
	color: var(--gd-medium);
	font-family: var(--gd-sans);
	font-size: .74rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}



/* =========================================================================
   30. Écran d'ouverture
   =========================================================================
   Le logo se dessine trait par trait, se remplit, puis le rideau s'ouvre en
   deux volets. Tout repose sur pathLength="1" posé par js/loader.js : le
   dessin est piloté par un dasharray unitaire, indépendant de la géométrie
   réelle des tracés.
   ========================================================================= */

.gd-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #08181E;
	pointer-events: none;
}

/* Au-dessus du rideau : les deux volets couvrent tout l'écran et, venant
   après dans le DOM, masquaient le logo. */
.gd-loader__marque {
	position: relative;
	z-index: 3;
	width: clamp(120px, 14vw, 180px);
	opacity: 0;
	transform: scale(.94);
	transition: opacity .5s ease, transform 1.4s var(--gd-ease);
}

.gd-loader.est-anime .gd-loader__marque {
	opacity: 1;
	transform: scale(1);
}

.gd-loader svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Départ : tracés vides, contour non dessiné. */
.gd-loader svg path,
.gd-loader svg rect {
	fill-opacity: 0;
	stroke: var(--gd-lime);
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	/* non-scaling-stroke : l'épaisseur est alors exprimée en pixels écran,
	   pas dans les unités du viewBox. D'où 1, et non une fraction. */
	vector-effect: non-scaling-stroke;
	stroke-width: 1;
}

/* Le cadre : trait un peu plus marqué. */
.gd-loader svg rect {
	stroke-width: 1.5;
}

.gd-loader.est-anime svg path,
.gd-loader.est-anime svg rect {
	animation:
		gd-tracer .75s var(--gd-ease) forwards,
		gd-remplir .4s ease forwards;
	/* Chaque forme part un cran après la précédente : le logo s'écrit.
	   Le dernier remplissage s'achève vers 1 360 ms — c'est ce qui cale le
	   tracé du trait puis l'ouverture du rideau. */
	animation-delay:
		calc(var(--gd-ordre, 0) * 55ms),
		calc(600ms + var(--gd-ordre, 0) * 45ms);
}

@keyframes gd-tracer {
	to { stroke-dashoffset: 0; }
}

@keyframes gd-remplir {
	to {
		fill-opacity: 1;
		stroke-opacity: 0;
	}
}

/* Rideau : deux volets qui s'écartent depuis le centre. */
.gd-loader__rideau {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.gd-loader__rideau::before,
.gd-loader__rideau::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	background: #08181E;
	transition: transform .9s var(--gd-ease);
}

.gd-loader__rideau::before {
	top: 0;
}

.gd-loader__rideau::after {
	bottom: 0;
}

/* Trait de coupe : il se trace du centre vers les bords une fois le logo
   écrit, juste avant que le rideau ne s'ouvre. Auparavant il était peint dès
   la première image et dévoilait la césure avant l'heure. */
.gd-loader::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	/* Entre le rideau (1) et le logo (3) : le trait file derrière la marque. */
	z-index: 2;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--gd-lime) 25%, #FFFFFF 50%, var(--gd-lime) 75%, transparent 100%);
	transform: scaleX(0);
	transform-origin: center;
	pointer-events: none;
}

.gd-loader.est-anime::after {
	animation: gd-trait .3s var(--gd-ease) 1350ms forwards;
}

@keyframes gd-trait {
	to { transform: scaleX(1); }
}

/* Il part avec les volets. */
.gd-loader.est-ouvert::after {
	opacity: 0;
	transition: opacity .25s ease;
}

.gd-loader.est-ouvert .gd-loader__marque {
	opacity: 0;
	transform: scale(1.08);
	transition: opacity .35s ease, transform .9s var(--gd-ease);
}

.gd-loader.est-ouvert .gd-loader__rideau::before {
	transform: translateY(-100%);
}

.gd-loader.est-ouvert .gd-loader__rideau::after {
	transform: translateY(100%);
}

/* Le fond de l'écran s'efface avec les volets, sinon il resterait visible
   entre les deux pendant l'ouverture. */
.gd-loader.est-ouvert {
	background: transparent;
	transition: background-color .1s linear .2s;
}

/* Pendant l'écran d'ouverture, la page ne défile pas.
   :has() plutôt qu'une classe : le verrou se lève tout seul quand le script
   retire l'écran du DOM, sans dépendre d'un nettoyage JavaScript. */
html:has(.gd-loader) {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.gd-loader {
		display: none;
	}
}

/* =========================================================================
   31. Transition entre les pages
   =========================================================================
   API View Transitions en navigation inter-documents : aucun JavaScript, donc
   aucun risque d'intercepter un lien et de casser la navigation, le bouton
   Retour ou l'ouverture dans un nouvel onglet. Les navigateurs qui ne la
   connaissent pas naviguent normalement, sans dégradation.
   ========================================================================= */

@view-transition {
	navigation: auto;
}

/* Le panneau.
   Les deux instantanés sont rognés dans le même sens, l'un après l'autre :
   l'ancienne page est recouverte du haut vers le bas, puis la nouvelle est
   découverte dans la même direction. Comme le fond de la transition apparaît
   entre les deux, tout se lit comme un seul panneau qui traverse l'écran.
   Aucun élément à ajouter au balisage, et rien à synchroniser entre les deux
   documents. */
::view-transition {
	background-color: #08181E;

	/* Liseré lime sur l'arête du panneau.
	   Le dégradé place la ligne tout en bas de la boîte de fond ; en animant
	   la hauteur de cette boîte de 0 à 100 %, la ligne descend exactement à la
	   vitesse du rognage des instantanés. Elle épouse donc l'arête du panneau
	   dans les deux phases : sa base pendant qu'il recouvre, son sommet pendant
	   qu'il découvre. */
	background-image: linear-gradient(
		180deg,
		transparent calc(100% - 3px),
		rgba(227, 254, 143, .35) calc(100% - 3px),
		var(--gd-lime, #E3FE8F) 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	animation: gd-panneau-arete .58s cubic-bezier(.76, 0, .24, 1) both;
}

@keyframes gd-panneau-arete {
	from { background-size: 100% 0%; }
	to   { background-size: 100% 100%; }
}

/* Phase 1 — le panneau descend et recouvre. */
::view-transition-old(root) {
	animation: gd-page-couvre .26s cubic-bezier(.76, 0, .24, 1) both;
}

/* Phase 2 — il poursuit sa course et découvre. */
::view-transition-new(root) {
	animation: gd-page-decouvre .32s cubic-bezier(.76, 0, .24, 1) .26s both;
}

@keyframes gd-page-couvre {
	from { clip-path: inset(0 0 0 0); }
	to   { clip-path: inset(100% 0 0 0); }
}

@keyframes gd-page-decouvre {
	from { clip-path: inset(0 0 100% 0); }
	to   { clip-path: inset(0 0 0 0); }
}

/* Entrée de page — le même panneau, la même arête lime.
   Là où les View Transitions n'entrent pas en jeu (rechargement, arrivée
   depuis un autre site, Firefox), le panneau couvre déjà l'écran au premier
   rendu puis descend hors champ : on retrouve exactement la seconde moitié de
   la transition ci-dessus. Une seule et même animation, quel que soit le cas. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: #08181E;
	border-top: 3px solid var(--gd-lime, #E3FE8F);
	box-shadow: 0 -6px 40px 6px rgba(227, 254, 143, .35);
	pointer-events: none;
	animation: gd-page-entree .34s cubic-bezier(.76, 0, .24, 1) both;
}

@keyframes gd-page-entree {
	from { transform: translateY(0); }
	to   { transform: translateY(101%); }
}

/* Quand une View Transition prend le relais, le document neuf se charge
   malgré tout : sans cette bride, le panneau se jouerait deux fois de suite.
   La classe est posée par js/motion.js sur l'événement pagereveal, avant le
   premier rendu — donc avant que l'animation n'ait pu démarrer. */
.gd-sans-entree body::before {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}

	body::before {
		display: none;
	}
}

/* =========================================================================
   30 bis. Blocs d'appel à l'action dans le corps des articles
   =========================================================================
   Insérés depuis l'éditeur (inc/blocs-cta.php). Bords droits, comme le CTA
   latéral et les citations : dans une colonne de texte, l'arrondi fait
   flotter le bloc au lieu de l'ancrer dans la lecture.

   Le même CSS sert à l'aperçu de l'éditeur, d'où l'absence de dépendance à
   une section parente.
   ========================================================================= */

.gd-bloc-cas,
.gd-bloc-rdv {
	position: relative;
	/* Marges généreuses : un encart collé au paragraphe précédent se lit
	   comme sa suite, et casse le fil de l'argumentation. */
	margin: clamp(2.5rem, 5vw, 3.5rem) 0;
	font-family: var(--gd-sans);
}

/* --- Renvoi vers une étude de cas --- */

/* La fiche du site, reprise telle quelle. Ne restent ici que les écarts dus
   au contexte : une colonne d'article, et un corps de texte qui impose ses
   propres règles aux <a>, <p>, <ul> et <img>. Ces règles-là ont deux niveaux
   de spécificité ; les nôtres doivent donc en avoir autant. */

.gd-encart-cas {
	margin: clamp(2.5rem, 5vw, 3.5rem) 0;
}

.gd-encart-cas .gd-encart-cas__surtitre {
	display: block;
	margin-bottom: .9rem;
	color: var(--gd-medium);
	font-family: var(--gd-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gd-cas.gd-cas--encart {
	text-decoration: none;
}

/* Le visuel garde son format, mais plafonné : sur toute la largeur d'une
   colonne d'article, un 16/9 ferait plus de 400 px de haut et l'encart
   avalerait l'écran. */
.gd-cas.gd-cas--encart .gd-cas__media {
	max-height: 240px;
}

.gd-cas.gd-cas--encart .gd-cas__media img {
	height: 100%;
	margin: 0;
	border-radius: 0;
}

.gd-cas.gd-cas--encart .gd-cas__body {
	padding: 1.75rem 1.9rem 1.9rem 1.9rem;
}

.gd-cas.gd-cas--encart .gd-cas__titre {
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
}

.gd-cas.gd-cas--encart .gd-cas__accroche {
	margin: .85rem 0 0;
	color: var(--gd-light);
	font-family: var(--gd-sans);
	font-size: .95rem;
	line-height: 1.7;
}

/* .article-corps impose un retrait et des marges à toute liste, et une taille
   de police aux <li> : sans ça, les encadrés de résultats se décalent et
   grossissent. */
.gd-cas.gd-cas--encart .gd-cas__resultats {
	margin: 1.4rem 0 0;
	padding: 0;
}

.gd-cas.gd-cas--encart .gd-cas__resultat {
	margin: 0;
	font-size: 1rem;
}

/* style.css colore tout <span> du site en vert foncé. La flèche du pied de
   carte en est un : sans cette reprise, elle disparaît sur le fond sombre. */
.gd-cas.gd-cas--encart .gd-btn__arrow {
	color: inherit;
}

/* --- Grille d'articles --- */

/* Même carte que partout ailleurs ; ne restent ici que l'en-tête du bloc et
   les reprises rendues nécessaires par le corps d'article. */

.gd-encart-articles {
	margin: clamp(2.5rem, 5vw, 4rem) 0;
}

.gd-encart-articles .gd-encart-articles__tete {
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.gd-encart-articles .gd-encart-articles__titre {
	margin: 0;
	font-family: var(--gd-serif) !important;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--gd-dark);
}

.gd-encart-articles .gd-encart-articles__texte {
	max-width: 62ch;
	margin: .8rem 0 0;
	font-family: var(--gd-sans);
	font-size: .98rem;
	line-height: 1.7;
	color: rgba(11, 33, 39, .72);
}

/* Les cartes sont des <a> : « .article-corps a » les soulignerait. */
.gd-encart-articles .gd-article {
	text-decoration: none;
}

/* Liste en pastilles.
   Chaque entrée est une boîte à part entière, cernée d'un filet : sur deux
   colonnes, les lignes séparées par de simples filets se confondaient d'une
   colonne à l'autre. La boîte referme chaque entrée sur elle-même.
   Puce lime en tête, dans la lignée des repères du reste du site. */
.gd-encart-articles .gd-liste-articles {
	display: grid;
	grid-template-columns: repeat(var(--gd-cols, 2), minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-encart-articles .gd-liste-article {
	margin: 0;
}

.gd-encart-articles .gd-liste-article__lien {
	position: relative;
	display: flex;
	align-items: center;
	/* Sans vignette, la puce a besoin d'air pour ne pas coller au titre. */
	gap: clamp(.9rem, 1.6vw, 1.25rem);
	height: 100%;
	padding: 1rem 1.35rem;
	border: 1px solid rgba(11, 33, 39, .14);
	border-radius: 14px;
	background: var(--gd-white);
	text-decoration: none;
	transition:
		border-color .35s ease,
		background-color .35s ease,
		transform .45s var(--gd-ease);
}

.gd-encart-articles .gd-liste-article__lien:hover,
.gd-encart-articles .gd-liste-article__lien:focus-visible {
	border-color: rgba(11, 33, 39, .5);
	background: var(--gd-cream);
	transform: translateY(-2px);
}

/* La puce remplace le chevron : un repère, pas une promesse de direction. */
.gd-encart-articles .gd-liste-article__puce {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--gd-lime);
	/* Le lime seul est trop clair sur du blanc : le cerne le pose. */
	box-shadow: 0 0 0 1px rgba(11, 33, 39, .25);
	transition: transform .45s var(--gd-ease);
}

.gd-encart-articles .gd-liste-article__lien:hover .gd-liste-article__puce,
.gd-encart-articles .gd-liste-article__lien:focus-visible .gd-liste-article__puce {
	transform: scale(1.35);
}

.gd-encart-articles .gd-liste-article__titre {
	flex: 1;
	font-family: var(--gd-serif) !important;
	font-size: clamp(.98rem, 1.25vw, 1.1rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--gd-dark);
}

@media (max-width: 760px) {
	.gd-encart-articles .gd-liste-articles {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Prise de rendez-vous --- */

.gd-bloc-rdv {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 3vw, 2rem);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background: var(--gd-dark);
	color: var(--gd-white);
}

.gd-bloc-rdv--portrait {
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: start;
}

.gd-bloc-rdv .gd-bloc-rdv__portrait {
	overflow: hidden;
	aspect-ratio: 1;
}

.gd-bloc-rdv .gd-bloc-rdv__portrait img,
.gd-bloc-rdv .gd-bloc-rdv__portrait picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Le portrait est cadré large : sans décalage, le regard tombe hors du
	   carré. */
	object-position: center 18%;
}

.gd-bloc-rdv .gd-bloc-rdv__surtitre {
	display: block;
	margin-bottom: .7rem;
	color: var(--gd-lime);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gd-bloc-rdv .gd-bloc-rdv__titre {
	margin: 0;
	font-family: var(--gd-serif) !important;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	font-weight: 500;
	line-height: 1.25;
	color: var(--gd-white);
}

.gd-bloc-rdv .gd-bloc-rdv__texte {
	margin: .8rem 0 0;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--gd-light);
}

.gd-bloc-rdv .gd-bloc-rdv__bouton {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-top: 1.5rem;
	padding: .95em 1.6em;
	background: var(--gd-lime);
	color: var(--gd-dark);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		transform .35s var(--gd-ease),
		box-shadow .35s var(--gd-ease);
}

.gd-bloc-rdv .gd-bloc-rdv__bouton span {
	transition: transform .35s var(--gd-ease);
}

.gd-bloc-rdv .gd-bloc-rdv__bouton:hover,
.gd-bloc-rdv .gd-bloc-rdv__bouton:focus {
	color: var(--gd-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -12px rgba(227, 254, 143, .8);
}

.gd-bloc-rdv .gd-bloc-rdv__bouton:hover span {
	transform: translateX(4px);
}

.gd-bloc-rdv .gd-bloc-rdv__bouton:focus-visible {
	outline: 2px solid var(--gd-lime);
	outline-offset: 3px;
}

@media (max-width: 520px) {
	.gd-bloc-rdv--portrait {
		grid-template-columns: 1fr;
	}

	.gd-bloc-rdv .gd-bloc-rdv__portrait {
		width: 84px;
	}
}

/* =========================================================================
   31 bis. Carrousel d'articles
   =========================================================================
   Swiper porte le défilement, le glisser et le clavier ; ne restent ici que
   l'habillage des flèches et deux ajustements de mise en page que la
   bibliothèque ne peut pas deviner.
   ========================================================================= */

/* Swiper rogne ce qui dépasse de la piste : sans ce retrait, l'ombre des
   cartes serait coupée. Le débord négatif garde la première carte alignée sur
   le reste de la page. */
.gd-articles__piste {
	margin: 0 calc(-1 * clamp(1rem, 2vw, 1.5rem));
	padding: .5rem clamp(1rem, 2vw, 1.5rem) 1.5rem;
}

/* Hauteur libre : les cartes d'une même vue s'alignent alors sur la plus
   haute, comme dans la grille. */
.gd-articles__piste .swiper-slide {
	display: flex;
	height: auto;
}

.gd-articles__piste .swiper-slide > * {
	width: 100%;
}

.gd-carrousel__nav {
	display: flex;
	gap: .6rem;
}

.gd-carrousel__nav[hidden] {
	display: none;
}

/* Filet de sécurité : Swiper marque les flèches « verrouillées » dès que tout
   tient à l'écran. On se raccroche à cette classe plutôt qu'aux seuls
   événements du script — si l'un d'eux ne partait pas, deux boutons inertes
   resteraient affichés. */
.gd-carrousel__nav:has(.est-verrouille) {
	display: none;
}

.gd-carrousel__fleche {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(11, 33, 39, .18);
	border-radius: 50%;
	background: transparent;
	color: var(--gd-dark);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color .3s ease,
		border-color .3s ease,
		color .3s ease,
		opacity .3s ease;
}

.gd-carrousel__fleche:hover,
.gd-carrousel__fleche:focus {
	background: var(--gd-dark);
	border-color: var(--gd-dark);
	color: var(--gd-lime);
	outline: none;
}

.gd-carrousel__fleche:focus-visible {
	outline: 2px solid var(--gd-medium);
	outline-offset: 3px;
}

/* Bout de course : la flèche s'efface sans disparaître, pour que la rangée ne
   se réorganise pas sous le curseur. Classe posée par Swiper. */
.gd-carrousel__fleche.est-inactif {
	opacity: .25;
	pointer-events: none;
}

/* =========================================================================
   31 ter. Guides — pages transverses
   =========================================================================
   Même typographie de corps de texte que les articles (.article-corps), mais
   le sommaire quitte la colonne latérale pour une barre d'onglets collante :
   sur un texte de trente écrans, le lecteur a besoin de savoir en permanence
   où il se trouve dans la démonstration. La colonne latérale récupère les
   renvois commerciaux.
   ========================================================================= */

.gd-guide-hero {
	/* La capsule du sommaire remonte à cheval sur le bas du hero : on lui
	   dégage la hauteur nécessaire. */
	padding-bottom: clamp(4.5rem, 8vw, 7rem);
}

.gd-guide-hero .gd-guide-hero__titre {
	max-width: 20ch;
	margin: 1.25rem 0 0;
}

.gd-guide-hero .gd-guide-hero__chapo {
	max-width: 62ch;
	font-size: clamp(1.05rem, 1.3vw, 1.25rem);
}

.gd-guide-hero__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-top: clamp(2rem, 4vw, 2.75rem);
}

.gd-guide-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	font-family: var(--gd-sans);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(191, 216, 217, .75);
}

/* Séparateur discret entre les repères, sans caractère à saisir. */
.gd-guide-hero__meta span + span {
	position: relative;
	padding-left: 1.5rem;
}

.gd-guide-hero__meta span + span::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--gd-lime);
	opacity: .6;
}

/* --- Barre d'onglets --- */

/* Capsule flottante, dans la logique de l'en-tête mais plus généreuse : le
   sommaire d'un guide de trente écrans mérite plus qu'un filet. Elle se pose
   sous la capsule de navigation et l'accompagne pendant toute la lecture. */
.gd-guide-onglets {
	position: sticky;
	top: calc(clamp(.6rem, 1.4vw, 1.1rem) + 72px);
	z-index: 900;
	width: min(1200px, calc(100% - 2 * clamp(1rem, 4vw, 2.5rem)));
	margin: calc(-1 * clamp(1.75rem, 3.5vw, 2.75rem)) auto 0;
	padding: .5rem;
	border-radius: var(--gd-radius-pill);

	background: rgba(11, 33, 39, .62);
	backdrop-filter: blur(22px) saturate(180%);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .1);
	overflow: hidden;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		inset 0 -1px 0 rgba(0, 0, 0, .2),
		0 14px 40px -16px rgba(0, 0, 0, .55);
}

/* Collée au bas de la capsule : c'est l'arrondi de celle-ci, via overflow,
   qui lui donne sa forme. */
.gd-guide-onglets__jauge {
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--gd-lime);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

/* La piste défile seule quand les chapitres sont nombreux : jamais de
   deuxième rangée, qui ferait sauter la mise en page au défilement. */
.gd-guide-onglets__piste {
	display: flex;
	gap: .3rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0 .25rem;
}

.gd-guide-onglets__piste::-webkit-scrollbar {
	display: none;
}

.gd-guide-onglet {
	display: inline-flex;
	align-items: baseline;
	gap: .55em;
	flex: 0 0 auto;
	max-width: 22rem;
	padding: .7rem 1.05rem;
	border-radius: var(--gd-radius-pill);
	font-family: var(--gd-sans);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.3;
	color: rgba(255, 255, 255, .7);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .3s ease, color .3s ease;
}

.gd-guide-onglet:hover {
	background: rgba(255, 255, 255, .1);
	color: var(--gd-white);
}

.gd-guide-onglet.est-actif {
	background: var(--gd-lime);
	color: var(--gd-dark);
}

.gd-guide-onglet .gd-guide-onglet__num {
	font-family: var(--gd-serif) !important;
	font-size: .78rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .38);
	transition: color .3s ease;
}

.gd-guide-onglet.est-actif .gd-guide-onglet__num {
	color: rgba(11, 33, 39, .5);
}

/* style.css colore tout <span> du site en vert foncé : sans cette reprise, le
   libellé de l'onglet actif disparaît sur sa pastille sombre. */
.gd-guide-onglet .gd-guide-onglet__texte {
	overflow: hidden;
	color: inherit;
	text-overflow: ellipsis;
}

/* --- Corps et colonne latérale --- */

.gd-guide-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	gap: clamp(2.5rem, 5vw, 5rem);
	width: 100%;
	max-width: var(--gd-max);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) var(--gd-gutter) clamp(4rem, 8vw, 6rem);
}

/* Mesure de lecture : au-delà d'une soixantaine de signes par ligne, l'œil
   perd le début de la suivante. Sur un texte long, ça se paie. */
.gd-guide-corps {
	max-width: 72ch;
}

/* Les titres visés par les onglets doivent s'arrêter sous la barre collante,
   y compris quand on arrive par un lien externe qui pointe une ancre. La FAQ
   est visée de la même façon, mais c'est une section entière. */
.gd-guide-corps h2,
.gd-guide-corps h3,
body.page-template-page-guide .gd-faq {
	scroll-margin-top: 190px;
}

.gd-guide-corps > h2 {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid rgba(11, 33, 39, .12);
}

.gd-guide-corps > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.gd-guide-aside {
	position: relative;
}

.gd-guide-aside__inner {
	position: sticky;
	top: calc(clamp(.6rem, 1.4vw, 1.1rem) + 62px + 4.5rem);
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--gd-dark);
	color: var(--gd-white);
}

.gd-guide-aside .gd-guide-aside__titre {
	display: block;
	margin-bottom: 1.25rem;
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gd-guide-aside .gd-guide-renvois {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-guide-aside .gd-guide-renvois li {
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.gd-guide-aside .gd-guide-renvoi {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	padding: .95rem 0;
	text-decoration: none;
}

.gd-guide-aside .gd-guide-renvoi__puce {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-top: .45rem;
	border-radius: 50%;
	background: var(--gd-lime);
	transition: transform .35s var(--gd-ease);
}

.gd-guide-aside .gd-guide-renvoi:hover .gd-guide-renvoi__puce {
	transform: scale(1.4);
}

.gd-guide-aside .gd-guide-renvoi__corps {
	display: block;
}

.gd-guide-aside .gd-guide-renvoi__titre {
	display: block;
	font-family: var(--gd-serif) !important;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gd-white);
	transition: color .3s ease;
}

.gd-guide-aside .gd-guide-renvoi:hover .gd-guide-renvoi__titre {
	color: var(--gd-lime);
}

.gd-guide-aside .gd-guide-renvoi__texte {
	display: block;
	margin-top: .3rem;
	font-family: var(--gd-sans);
	font-size: .84rem;
	line-height: 1.6;
	color: rgba(191, 216, 217, .8);
}

.gd-guide-aside .gd-guide-aside__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.5rem;
	padding: .85em 1.3em;
	background: var(--gd-lime);
	color: var(--gd-dark);
	font-family: var(--gd-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .35s var(--gd-ease);
}

.gd-guide-aside .gd-guide-aside__cta:hover {
	color: var(--gd-dark);
	transform: translateY(-2px);
}

@media (max-width: 1000px) {
	.gd-guide-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En pile, la colonne latérale n'a plus de raison de coller : elle se pose
	   après le texte, comme une conclusion. */
	.gd-guide-aside__inner {
		position: static;
	}
}

@media (max-width: 780px) {
	/* Au pouce plutôt qu'à l'œil : en bas d'écran, le sommaire est à portée
	   de doigt et ne mange plus la hauteur de lecture. */
	.gd-guide-onglets {
		position: fixed;
		top: auto;
		bottom: clamp(.6rem, 2vw, 1rem);
		left: 50%;
		z-index: 950;
		width: calc(100% - 2 * clamp(.75rem, 4vw, 1.5rem));
		margin: 0;
		transform: translateX(-50%);
		background: rgba(11, 33, 39, .82);
	}

	.gd-guide-onglet .gd-guide-onglet__texte {
		max-width: 12rem;
	}

	/* De quoi finir la lecture sans que la capsule recouvre la dernière
	   ligne du guide. */
	.gd-guide-layout {
		padding-bottom: clamp(6rem, 18vw, 8rem);
	}

	.gd-guide-hero {
		padding-bottom: var(--gd-section);
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.gd-guide-onglets {
		background: rgba(11, 33, 39, .95);
	}
}

/* =========================================================================
   31 quater. Page 404 et pages légales
   ========================================================================= */

/* --- 404 --- */

.gd-404 {
	text-align: center;
}

.gd-404 .gd-404__code {
	display: block;
	font-family: var(--gd-serif) !important;
	font-size: clamp(5rem, 16vw, 11rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.04em;
	/* Le chiffre est un décor, pas une information : il s'efface derrière le
	   titre qui, lui, explique. */
	color: rgba(227, 254, 143, .16);
}

.gd-404 .gd-404__titre {
	max-width: 18ch;
	margin: -.4em auto 0;
}

.gd-404 .gd-404__texte {
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}

.gd-404__recherche {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
	max-width: 34rem;
	margin: clamp(2rem, 4vw, 2.75rem) auto 0;
}

.gd-404__recherche input[type='search'] {
	flex: 1 1 16rem;
	min-width: 0;
	padding: .95em 1.3em;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--gd-radius-pill);
	background: rgba(255, 255, 255, .06);
	color: var(--gd-white);
	font-family: var(--gd-sans);
	font-size: .92rem;
}

.gd-404__recherche input[type='search']::placeholder {
	color: rgba(191, 216, 217, .6);
}

.gd-404__recherche input[type='search']:focus {
	outline: none;
	border-color: rgba(227, 254, 143, .5);
	background: rgba(255, 255, 255, .1);
}

.gd-404 .gd-404__recherche button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .95em 1.6em;
	border: none;
	border-radius: var(--gd-radius-pill);
	background: var(--gd-lime);
	color: var(--gd-dark);
	font-family: var(--gd-sans);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .3s var(--gd-ease);
}

.gd-404 .gd-404__recherche button:hover,
.gd-404 .gd-404__recherche button:focus {
	background: var(--gd-lime);
	color: var(--gd-dark);
	transform: translateY(-2px);
}

.gd-404__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	max-width: 46rem;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	text-align: left;
}

.gd-404 .gd-404__label {
	display: block;
	margin-bottom: .9rem;
	color: var(--gd-lime);
	font-family: var(--gd-sans);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gd-404 .gd-404__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-404 .gd-404__liste li {
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.gd-404 .gd-404__liste a {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem 0;
	color: rgba(255, 255, 255, .8);
	font-family: var(--gd-sans);
	font-size: .9rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color .25s ease;
}

.gd-404 .gd-404__liste a:hover {
	color: var(--gd-lime);
}

.gd-404 .gd-404__puce {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gd-lime);
	opacity: .5;
}

.gd-404__actions {
	justify-content: center;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* --- Pages légales --- */

.gd-legal-hero {
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.gd-legal-hero .gd-legal-hero__titre {
	max-width: 22ch;
	margin: 1.25rem 0 0;
}

.gd-legal-hero .gd-legal-hero__maj {
	margin: 1.25rem 0 0;
	color: rgba(191, 216, 217, .75);
	font-family: var(--gd-sans);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.gd-legal-layout {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	width: 100%;
	max-width: var(--gd-max);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 4.5rem) var(--gd-gutter) clamp(4rem, 8vw, 6rem);
}

/* Sans sommaire, pas d'aside : le contenu ne doit pas retomber dans la
   colonne étroite de 260px, sinon il se lit en lignes de quelques mots. */
.gd-legal-layout--pleine {
	grid-template-columns: minmax(0, 1fr);
}

.gd-legal-aside__inner {
	position: sticky;
	top: calc(clamp(.6rem, 1.4vw, 1.1rem) + 78px);
}

.gd-legal-aside .gd-legal-aside__titre {
	display: block;
	margin-bottom: 1rem;
	color: var(--gd-medium);
	font-family: var(--gd-sans);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gd-legal-aside .gd-legal-sommaire {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: legal;
}

.gd-legal-aside .gd-legal-sommaire li {
	margin: 0;
	counter-increment: legal;
	border-top: 1px solid rgba(11, 33, 39, .12);
}

.gd-legal-aside .gd-legal-sommaire a {
	display: flex;
	gap: .6rem;
	padding: .6rem 0;
	color: rgba(11, 33, 39, .68);
	font-family: var(--gd-sans);
	font-size: .85rem;
	line-height: 1.45;
	text-decoration: none;
	transition: color .25s ease;
}

.gd-legal-aside .gd-legal-sommaire a::before {
	content: counter(legal, decimal-leading-zero);
	flex: 0 0 auto;
	font-family: var(--gd-serif) !important;
	font-weight: 600;
	color: rgba(11, 33, 39, .3);
}

.gd-legal-aside .gd-legal-sommaire a:hover {
	color: var(--gd-dark);
}

/* Mesure courte : un texte juridique se lit mal en lignes longues. */
.gd-legal-corps {
	max-width: 68ch;
}

.gd-legal-corps h2 {
	scroll-margin-top: 120px;
}

.gd-legal-corps > h2 {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid rgba(11, 33, 39, .12);
}

.gd-legal-corps > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

@media (max-width: 900px) {
	.gd-legal-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En pile, le sommaire passe devant le texte et ne colle plus. */
	.gd-legal-aside__inner {
		position: static;
	}
}

/* =========================================================================
   32. Grilles — rangée incomplète centrée
   =========================================================================
   En CSS Grid, une dernière rangée incomplète reste calée à gauche : quatre
   cartes sur trois colonnes laissaient un orphelin isolé et deux tiers de vide
   à sa droite. Flexbox permet de centrer cette rangée, à condition de brider
   la largeur des éléments — sans plafond, l'orphelin s'étirerait sur toute la
   ligne, ce qui n'est pas mieux.

   Le nombre de colonnes est une variable, ce qui évite de redéclarer les
   calculs de largeur à chaque palier.
   ========================================================================= */

.gd-services__grid,
.gd-grille__items,
.gd-articles__grid,
.gd-partenaires__grid,
.gd-cas__grid,
.gd-offres__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}

.gd-services__grid > *,
.gd-grille__items > *,
.gd-articles__grid > *,
.gd-partenaires__grid > *,
.gd-cas__grid > *,
.gd-offres__grid > * {
	--gd-largeur: calc((100% - (var(--gd-cols) - 1) * var(--gd-espace)) / var(--gd-cols));

	flex: 1 1 var(--gd-largeur);
	max-width: var(--gd-largeur);
	min-width: 0;
}

/* Trois colonnes */
.gd-services__grid  { --gd-cols: 3; --gd-espace: 1.5rem; }
.gd-grille__items   { --gd-cols: 3; --gd-espace: clamp(1.25rem, 2.5vw, 2rem); }
.gd-articles__grid  { --gd-cols: 3; --gd-espace: clamp(1.25rem, 2.5vw, 1.75rem); }
.gd-partenaires__grid { --gd-cols: 3; --gd-espace: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Deux colonnes */
.gd-cas__grid    { --gd-cols: 2; --gd-espace: clamp(1.5rem, 2.5vw, 2.25rem); }
.gd-offres__grid { --gd-cols: 2; --gd-espace: clamp(1.5rem, 3vw, 2.25rem); }

@media (max-width: 1100px) {
	.gd-services__grid,
	.gd-grille__items,
	.gd-articles__grid,
	.gd-partenaires__grid {
		--gd-cols: 2;
	}
}

@media (max-width: 900px) {
	.gd-cas__grid,
	.gd-offres__grid {
		--gd-cols: 1;
	}
}

@media (max-width: 700px) {
	.gd-services__grid,
	.gd-grille__items,
	.gd-articles__grid,
	.gd-partenaires__grid {
		--gd-cols: 1;
	}
}



/* --- Rangée incomplète : l'orphelin prend toute la largeur ---------------
   Plutôt que de le laisser centré au milieu d'un vide, l'élément seul de la
   dernière rangée s'étend sur toute la grille.

   :not(:first-child) est indispensable : sans lui, une grille ne contenant
   qu'un seul élément — un partenaire unique, par exemple — le verrait passer
   en pleine largeur, ce qui n'a aucun sens.

   Le motif nth-child dépend du nombre de colonnes, il est donc redéclaré à
   chaque palier. */

.gd-services__grid > :last-child:not(:first-child):nth-child(3n + 1),
.gd-grille__items > :last-child:not(:first-child):nth-child(3n + 1),
.gd-articles__grid > :last-child:not(:first-child):nth-child(3n + 1),
.gd-partenaires__grid > :last-child:not(:first-child):nth-child(3n + 1),
.gd-cas__grid > :last-child:not(:first-child):nth-child(2n + 1),
.gd-offres__grid > :last-child:not(:first-child):nth-child(2n + 1) {
	flex-basis: 100%;
	max-width: 100%;
}

@media (max-width: 1100px) {
	/* Les grilles à trois colonnes passent à deux : l'ancien motif ne vaut
	   plus, on le neutralise avant d'appliquer le nouveau. */
	.gd-services__grid > :last-child:not(:first-child):nth-child(3n + 1),
	.gd-grille__items > :last-child:not(:first-child):nth-child(3n + 1),
	.gd-articles__grid > :last-child:not(:first-child):nth-child(3n + 1),
	.gd-partenaires__grid > :last-child:not(:first-child):nth-child(3n + 1) {
		flex-basis: var(--gd-largeur);
		max-width: var(--gd-largeur);
	}

	.gd-services__grid > :last-child:not(:first-child):nth-child(2n + 1),
	.gd-grille__items > :last-child:not(:first-child):nth-child(2n + 1),
	.gd-articles__grid > :last-child:not(:first-child):nth-child(2n + 1),
	.gd-partenaires__grid > :last-child:not(:first-child):nth-child(2n + 1) {
		flex-basis: 100%;
		max-width: 100%;
	}
}

@media (max-width: 700px) {
	/* Une seule colonne : tout occupe déjà la largeur, la règle n'a plus
	   d'objet et fausserait le calcul. */
	.gd-services__grid > :last-child:not(:first-child),
	.gd-grille__items > :last-child:not(:first-child),
	.gd-articles__grid > :last-child:not(:first-child),
	.gd-partenaires__grid > :last-child:not(:first-child) {
		flex-basis: 100%;
		max-width: 100%;
	}
}


/* Carte orpheline en pleine largeur : son visuel doit suivre.
   En 16/9 sur 1 150 px, l'image montait à 650 px de haut et écrasait tout le
   reste de la grille. Format panoramique, la carte se lit alors comme une
   mise en avant assumée. */
.gd-articles__grid > :last-child:not(:first-child):nth-child(3n + 1) .gd-article__media,
.gd-cas__grid > :last-child:not(:first-child):nth-child(2n + 1) .gd-cas__media {
	aspect-ratio: 32 / 9;
}

@media (max-width: 1100px) {
	.gd-articles__grid > :last-child:not(:first-child):nth-child(3n + 1) .gd-article__media {
		aspect-ratio: 16 / 9;
	}

	.gd-articles__grid > :last-child:not(:first-child):nth-child(2n + 1) .gd-article__media {
		aspect-ratio: 32 / 9;
	}
}

@media (max-width: 900px) {
	.gd-cas__grid > :last-child:not(:first-child):nth-child(2n + 1) .gd-cas__media {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 700px) {
	.gd-articles__grid > :last-child:not(:first-child) .gd-article__media {
		aspect-ratio: 16 / 9;
	}
}