/* =============================================================
   Devillard Theme — feuille de style principale
   -------------------------------------------------------------
   Sommaire
   1. Variables (design tokens)
   2. Reset & base
   3. Typographie
   4. Mise en page (container, sections)
   5. Composants récurrents
   6. États d'animation GSAP
   ============================================================= */


/* =============================================================
   1. VARIABLES — modifier les valeurs ici se répercute partout
   ============================================================= */
:root {

	/* --- Palette de marque ----------------------------------- */
	--dv-navy:      #1a1d2d;
	--dv-gold:      #d1af79;
	--dv-cream:     #efeae6;
	--dv-bordeaux:  #590E0E;
	--dv-white:     #ffffff;

	/* --- Rôles couleur (utiliser ceux-ci dans les composants) - */
	--dv-color-bg:       var(--dv-cream);
	--dv-color-surface:  var(--dv-white);
	--dv-color-text:     var(--dv-navy);
	--dv-color-heading:  var(--dv-navy);
	--dv-color-primary:  var(--dv-bordeaux);
	--dv-color-accent:   var(--dv-gold);
	--dv-color-on-dark:  var(--dv-cream);
	--dv-color-muted:    color-mix(in srgb, var(--dv-navy) 55%, var(--dv-cream));
	--dv-color-border:   color-mix(in srgb, var(--dv-navy) 14%, var(--dv-cream));

	/* --- Familles de polices --------------------------------- */
	--dv-font-heading: "the-seasons", "Cormorant Garamond", Georgia, serif;
	--dv-font-body:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* --- Échelle typographique ------------------------------- */
	--dv-fs-xs:    0.8125rem;
	--dv-fs-sm:    0.9375rem;
	--dv-fs-base:  1rem;
	--dv-fs-md:    1.125rem;
	--dv-fs-lg:    clamp(1.125rem, 1.4vw, 1.375rem);
	--dv-fs-xl:    clamp(1.375rem, 2.4vw, 1.875rem);
	--dv-fs-2xl:   clamp(1.625rem, 3.6vw, 2.375rem);
	--dv-fs-3xl:   clamp(2rem, 5vw, 3.125rem);

	/* --- Graisses -------------------------------------------- */
	--dv-fw-light:    300;
	--dv-fw-regular:  400;
	--dv-fw-medium:   600;
	--dv-fw-bold:     700;

	/* --- Interlignes & interlettrage ------------------------- */
	--dv-lh-tight:   1.12;
	--dv-lh-snug:    1.3;
	--dv-lh-normal:  1.7;
	--dv-ls-wide:    0.14em;
	--dv-ls-normal:  0.01em;

	/* --- Espacement ------------------------------------------ */
	--dv-space-2xs:  0.25rem;
	--dv-space-xs:   0.5rem;
	--dv-space-sm:   1rem;
	--dv-space-md:   1.5rem;
	--dv-space-lg:   2.5rem;
	--dv-space-xl:   4rem;
	--dv-space-2xl:  6rem;
	--dv-section:    clamp(3rem, 8vw, 7rem);

	/* --- Mise en page ---------------------------------------- */
	--dv-container:       1240px;
	--dv-container-wide:  1500px;
	--dv-container-text:  760px;
	--dv-gutter:          clamp(1.25rem, 4vw, 2.5rem);
	--dv-gap:             2rem;

	/* --- Rayons, ombres, transitions ------------------------- */
	--dv-radius-sm:   4px;
	--dv-radius:      10px;
	--dv-radius-lg:   20px;
	--dv-shadow-sm:   0 6px 18px rgba(26, 29, 45, 0.08);
	--dv-shadow:      0 16px 44px rgba(26, 29, 45, 0.14);
	--dv-transition:  0.3s ease;

	/* --- Fond ornement « fond-devillard » -------------------- */
	/* Valeur par défaut, surchargeable par section :
	   .ma-section { --dv-fond-opacity: 0.25; } */
	--dv-fond-opacity: 0.30;
}


/* =============================================================
   2. RESET & BASE
   ============================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--dv-font-body);
	font-size: var(--dv-fs-base);
	font-weight: var(--dv-fw-regular);
	line-height: var(--dv-lh-normal);
	color: var(--dv-color-text);
	background-color: var(--dv-color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--dv-color-primary);
	text-decoration: none;
	transition: color var(--dv-transition);
}

a:hover {
	color: var(--dv-color-accent);
}

::selection {
	background: var(--dv-color-accent);
	color: var(--dv-navy);
}

:focus-visible {
	outline: 2px solid var(--dv-color-accent);
	outline-offset: 3px;
}


/* =============================================================
   3. TYPOGRAPHIE
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--dv-space-sm);
	font-family: var(--dv-font-heading);
	font-weight: var(--dv-fw-regular);
	line-height: var(--dv-lh-tight);
	color: var(--dv-color-heading);
}

h1 { font-size: var(--dv-fs-3xl); }
h2 { font-size: var(--dv-fs-2xl); }
h3 { font-size: var(--dv-fs-xl); }
h4 { font-size: var(--dv-fs-lg); }

p {
	margin: 0 0 var(--dv-space-sm);
}

/* Sur-titre / étiquette en capitales — utilisable partout. */
.eyebrow {
	font-family: var(--dv-font-body);
	font-size: var(--dv-fs-xs);
	font-weight: var(--dv-fw-medium);
	letter-spacing: var(--dv-ls-wide);
	text-transform: uppercase;
	color: var(--dv-color-primary);
}


/* =============================================================
   4. MISE EN PAGE
   ============================================================= */
.container {
	width: 100%;
	max-width: var(--dv-container);
	margin-inline: auto;
	padding-inline: var(--dv-gutter);
}

.container--text {
	max-width: var(--dv-container-text);
}

/* Neutralise la largeur max imposée par Hello Elementor sur .site-main.
   Son theme.css plafonne `body:not([class*=elementor-page-]) .site-main`
   à 1140 px — ce qui s'applique justement à nos gabarits PHP custom.
   Nos sections gèrent elles-mêmes leur largeur via .container. */
body:not([class*="elementor-page-"]) .site-main {
	max-width: none;
	padding-inline: 0;
}

/* Espacement vertical standard d'une section. */
.intro,
.featured,
.related,
.category-grid {
	padding-block: var(--dv-section);
}

/* Variantes de fond réutilisables. */
.section--dark {
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
	color: var(--dv-color-on-dark);
}

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


/* =============================================================
   5. COMPOSANTS RÉCURRENTS
   ============================================================= */

/* --- Surtitre (2 formes) ------------------------------------- */
.surtitre {
	display: inline-flex;
	align-items: center;
}

/* Forme 1 — pilule avec losange à gauche. */
.surtitre--pill {
	position: relative;
	padding: 0.72rem 1.9rem 0.72rem 3.2rem;
	border: 1px solid color-mix(in srgb, var(--dv-gold) 40%, transparent);
	border-radius: 999px;
}

.surtitre--pill .surtitre__diamond {
	position: absolute;
	left: 0;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.3rem;
	height: 2.3rem;
	border: 1px solid var(--dv-gold);
	transform: translate(-45%, -50%) rotate(45deg);
}

.surtitre--pill .surtitre__diamond::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	background-color: var(--dv-gold);
}

/* Forme 2 — texte + losange + trait extensible (inversable). */
.surtitre--line {
	display: flex;
	align-items: center;
	gap: var(--dv-space-md);
	width: 100%;
}

.surtitre--line.surtitre--reverse {
	flex-direction: row-reverse;
}

.surtitre--line .surtitre__diamond {
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	background-color: var(--dv-gold);
	transform: rotate(45deg);
}

.surtitre--line .surtitre__rule {
	flex: 1;
	height: 1px;
	background-color: color-mix(in srgb, var(--dv-gold) 60%, transparent);
}

.surtitre__label {
	font-family: var(--dv-font-body);
	font-size: var(--dv-fs-xs);
	font-weight: var(--dv-fw-medium);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--dv-gold);
	white-space: nowrap;
}

/* --- Héro ----------------------------------------------------- */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
}

/* Fond vidéo — moitié droite. */
.hero__video {
	position: absolute;
	inset: 0 0 0 auto;
	width: 45%;
	z-index: 1;
}

.hero__video-el {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile : fond le bord gauche de la vidéo dans le navy + assombrit légèrement. */
.hero__video-veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, var(--dv-navy) 0%, transparent 24%),
		linear-gradient(to bottom, rgba(26, 29, 45, 0.28), rgba(26, 29, 45, 0.06));
}

/* Texte défilant en fond. */
.hero__marquee {
	position: absolute;
	left: 0;
	right: 0;
	top: 52%;
	transform: translateY(-50%);
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}

.hero__marquee-track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.hero__marquee-group {
	display: flex;
	flex: none;
}

.hero__marquee-item {
	padding-inline: 0.3em;
	font-family: var(--dv-font-heading);
	font-size: clamp(5rem, 15vw, 14rem);
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--dv-cream);
	opacity: 0.06;
}

/* Contenu : texte (gauche) + portrait (droite), grille centrée et capée. */
.hero__inner {
	position: relative;
	z-index: 4;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(2rem, 4vw, 5rem);
	width: 100%;
	max-width: var(--dv-container-wide);
	margin-inline: auto;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(8rem, 12vh, 13rem) var(--dv-gutter) clamp(3rem, 6vh, 5rem);
}

.hero__content {
	max-width: 620px;
}

.hero__title {
	margin: var(--dv-space-md) 0;
	font-size: var(--dv-fs-3xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.14;
	color: var(--dv-color-on-dark);
}

.hero__text {
	max-width: 42ch;
	color: color-mix(in srgb, var(--dv-cream) 62%, transparent);
}

.hero__text p {
	margin: 0 0 var(--dv-space-sm);
}

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

.hero__cta {
	margin-top: var(--dv-space-lg);
}

/* Portrait encadré — colonne de droite. */
.hero__figure {
	position: relative;
	z-index: 3;
	justify-self: center;
	width: min(100%, 460px);
	aspect-ratio: 100 / 124;
	margin: 0;
}

/* Cadre doré décalé, à l'arrière. */
.hero__figure::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -1.75rem;
	right: -1.75rem;
	width: 100%;
	height: 100%;
	border: 1px solid color-mix(in srgb, var(--dv-gold) 55%, transparent);
}

.hero__portrait {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	padding: 0.4rem;
	border: 1px solid color-mix(in srgb, var(--dv-gold) 70%, transparent);
	background-color: var(--dv-navy);
}

.hero__portrait-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Héro : empilement sous 1024px --------------------------- */
@media (max-width: 1024px) {
	.hero {
		min-height: 0;
	}

	.hero__video {
		width: 100%;
	}

	.hero__video-veil {
		background: linear-gradient(to bottom, rgba(26, 29, 45, 0.9), rgba(26, 29, 45, 0.97));
	}

	.hero__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: clamp(2.5rem, 6vw, 3.5rem);
		min-height: 0;
		padding: clamp(7rem, 16vw, 9rem) var(--dv-gutter) clamp(2.5rem, 8vw, 4rem);
		text-align: center;
	}

	.hero__content {
		order: 1;
		max-width: 42rem;
	}

	.hero__text {
		max-width: 52ch;
		margin-inline: auto;
	}

	.hero__figure {
		order: 2;
		width: min(80vw, 360px);
	}
}

/* --- Héro : ajustements mobile ------------------------------- */
@media (max-width: 560px) {
	.hero__figure {
		width: min(86vw, 320px);
	}

	.hero__figure::before {
		top: -1rem;
		right: -1rem;
	}
}

/* --- Titre de section ---------------------------------------- */
.section-title {
	margin-bottom: var(--dv-space-lg);
}

.section-title__subtitle {
	display: block;
	margin-bottom: var(--dv-space-xs);
	font-size: var(--dv-fs-xs);
	font-weight: var(--dv-fw-medium);
	letter-spacing: var(--dv-ls-wide);
	text-transform: uppercase;
	color: var(--dv-color-primary);
}

.section-title__heading {
	font-size: var(--dv-fs-2xl);
	margin: 0;
}

/* --- Grille de cartes ---------------------------------------- */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: var(--dv-gap);
}

/* --- Carte article ------------------------------------------- */
.card {
	background-color: var(--dv-color-surface);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius);
	overflow: hidden;
	transition: transform var(--dv-transition), box-shadow var(--dv-transition);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--dv-shadow);
}

.card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}

.card__link:hover {
	color: inherit;
}

.card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.card__image--placeholder {
	background: linear-gradient(135deg, var(--dv-cream), var(--dv-color-border));
}

.card:hover .card__image {
	transform: scale(1.05);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-xs);
	padding: var(--dv-space-md);
}

.card__category {
	font-size: var(--dv-fs-xs);
	font-weight: var(--dv-fw-medium);
	letter-spacing: var(--dv-ls-wide);
	text-transform: uppercase;
	color: var(--dv-color-primary);
}

.card__title {
	font-family: var(--dv-font-heading);
	font-size: var(--dv-fs-lg);
	line-height: var(--dv-lh-snug);
	margin: 0;
}

.card__excerpt {
	font-size: var(--dv-fs-sm);
	color: var(--dv-color-muted);
	margin: 0;
}

.card__meta {
	margin-top: auto;
	font-size: var(--dv-fs-xs);
	color: var(--dv-color-muted);
}

/* --- Variante minimale (liste d'articles) -------------------- */
.category-grid__head {
	text-align: center;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.category-grid__title {
	margin: 0;
	font-size: var(--dv-fs-2xl);
	font-weight: var(--dv-fw-light);
	color: var(--dv-color-heading);
}

.category-grid__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem) clamp(1.5rem, 3vw, 2.25rem);
}

/* Réinitialisations sur la carte par défaut. */
.card--minimal {
	background: transparent;
	border: 0;
	border-radius: 0;
	border-block: 1px solid color-mix(in srgb, var(--dv-gold) 28%, transparent);
	overflow: hidden;
}

.card--minimal:hover {
	transform: none;
	box-shadow: none;
}

.card--minimal .card__link {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.75rem);
	height: auto;
	padding: clamp(1.25rem, 2.4vw, 1.8rem) clamp(1rem, 2vw, 1.5rem);
}

/* Voile doré qui s'étire depuis la gauche au survol. */
.card--minimal .card__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--dv-gold) 10%, transparent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card--minimal:hover .card__link::before,
.card--minimal:focus-within .card__link::before {
	transform: scaleX(1);
}

.card--minimal .card__title {
	flex: 1;
	margin: 0;
	font-family: var(--dv-font-heading);
	font-size: var(--dv-fs-xl);
	font-weight: var(--dv-fw-regular);
	line-height: 1.25;
	color: var(--dv-color-heading);
	transition: color 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card--minimal:hover .card__title,
.card--minimal:focus-within .card__title {
	color: var(--dv-bordeaux);
	transform: translateX(0.5rem);
}

/* Cercle + flèche : même mécanique que le bouton CTA (piste de deux
   flèches qui défile au survol, le cercle reste en place). */
.card--minimal .card__circle {
	position: relative;
	flex: none;
	overflow: hidden;
	width: 3.1rem;
	height: 3.1rem;
	border: 1px solid var(--dv-gold);
	border-radius: 50%;
	color: var(--dv-gold);
	background-color: transparent;
	transition: background-color 0.35s ease, color 0.35s ease;
}

.card--minimal:hover .card__circle,
.card--minimal:focus-within .card__circle {
	background-color: var(--dv-gold);
	color: var(--dv-navy);
}

.card--minimal .card__arrows {
	position: absolute;
	inset: 0;
	display: flex;
	width: 200%;
	transform: translateX(-50%);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card--minimal .card__arrow {
	flex: 0 0 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card--minimal .card__arrow svg {
	width: 1.3rem;
	height: auto;
}

.card--minimal:hover .card__arrows,
.card--minimal:focus-within .card__arrows {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.card--minimal .card__arrows,
	.card--minimal .card__title,
	.card--minimal .card__link::before {
		transition: none;
	}
}

/* --- Bouton CTA ---------------------------------------------- */
/* Intitulé capitales + ligne + flèche dans un cercle.
   Les variables locales --cta-* sont surchargées par les variantes. */
.cta {
	--cta-color:       var(--dv-gold);
	--cta-line:        var(--dv-gold);
	--cta-circle:      2.9rem;
	--cta-line-length: 2rem;

	display: inline-flex;
	align-items: center;
	gap: var(--dv-space-sm);
	color: var(--cta-color);
	font-family: var(--dv-font-body);
	line-height: 1;
}

.cta:hover {
	color: var(--cta-color);
}

.cta__label {
	font-size: var(--dv-fs-xs);
	font-weight: var(--dv-fw-bold);
	letter-spacing: var(--dv-ls-wide);
	text-transform: uppercase;
}

.cta__line {
	flex: none;
	width: var(--cta-line-length);
	height: 1px;
	background-color: var(--cta-line);
}

.cta__circle {
	position: relative;
	flex: none;
	width: var(--cta-circle);
	height: var(--cta-circle);
	border: 1px solid var(--cta-line);
	border-radius: 50%;
	overflow: hidden;
}

/* Piste de deux flèches : au survol elle glisse pour faire « avancer »
   la flèche (sortie à droite, nouvelle flèche entrante à gauche). */
.cta__arrows {
	position: absolute;
	inset: 0;
	display: flex;
	width: 200%;
	transform: translateX(-50%);
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta__arrow {
	flex: 0 0 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cta__icon {
	width: 1.4rem;
	height: auto;
}

.cta:hover .cta__arrows,
.cta:focus-visible .cta__arrows {
	transform: translateX(0);
}

/* Variante fond clair. */
.cta--light {
	--cta-color: var(--dv-navy);
	--cta-line:  color-mix(in srgb, var(--dv-navy) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.cta__arrows {
		transition: none;
	}
}

/* Mobile : le long trait rend mal sur petit écran. On le retire pour un
   bouton compact « libellé + flèche dans un cercle », bien aligné. */
@media (max-width: 768px) {
	.cta {
		gap: 0.85rem;
		--cta-circle: 2.6rem;
	}

	.cta__line {
		display: none;
	}
}

/* --- Fil d'ariane -------------------------------------------- */
.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dv-space-2xs);
	margin: 0 0 var(--dv-space-sm);
	padding: 0;
	list-style: none;
	font-size: var(--dv-fs-xs);
	color: var(--dv-color-muted);
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "—";
	margin-right: var(--dv-space-2xs);
	color: var(--dv-color-border);
}

.breadcrumb__link {
	color: var(--dv-color-muted);
}

.breadcrumb__link:hover {
	color: var(--dv-color-primary);
}

.breadcrumb__current {
	color: var(--dv-color-text);
}

/* --- En-tête catégorie / article ----------------------------- */
.category-header,
.article-header {
	padding-block: var(--dv-space-xl) var(--dv-space-lg);
}

.category-header__title,
.article-header__title {
	font-size: var(--dv-fs-2xl);
	margin: 0 0 var(--dv-space-sm);
}

.category-header__description {
	max-width: 60ch;
	color: var(--dv-color-muted);
}

.category-header__count {
	margin-top: var(--dv-space-xs);
	font-size: var(--dv-fs-xs);
	letter-spacing: var(--dv-ls-wide);
	text-transform: uppercase;
	color: var(--dv-color-primary);
}

.article-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dv-space-sm);
	font-size: var(--dv-fs-sm);
	color: var(--dv-color-muted);
}

.article-header__thumbnail {
	margin: var(--dv-space-lg) 0 0;
}

.article-header__thumbnail img {
	width: 100%;
	border-radius: var(--dv-radius);
}

/* --- Corps d'article ----------------------------------------- */
.article-body__inner {
	max-width: var(--dv-container-text);
}

.article-body__content {
	font-size: var(--dv-fs-md);
	line-height: var(--dv-lh-normal);
}

.article-body__content > * + * {
	margin-top: var(--dv-space-md);
}

.article-body__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dv-space-xs);
	margin: var(--dv-space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.article-body__tags li a {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--dv-color-border);
	border-radius: 999px;
	font-size: var(--dv-fs-xs);
	color: var(--dv-color-muted);
}

.article-body__tags li a:hover {
	border-color: var(--dv-color-accent);
	color: var(--dv-color-primary);
}

/* --- Pagination ---------------------------------------------- */
.pagination {
	margin-top: var(--dv-space-lg);
}

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dv-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-sm);
	color: var(--dv-color-text);
	transition: background-color var(--dv-transition), color var(--dv-transition),
		border-color var(--dv-transition);
}

.pagination__item .page-numbers:hover {
	border-color: var(--dv-color-accent);
}

.pagination__item .page-numbers.current {
	background-color: var(--dv-color-primary);
	border-color: var(--dv-color-primary);
	color: var(--dv-white);
}

/* --- Aucun résultat ------------------------------------------ */
.no-results {
	padding: var(--dv-space-xl) 0;
	text-align: center;
	color: var(--dv-color-muted);
}


/* --- Image à double cadre (component framed-image) ----------- */
.framed-image {
	position: relative;
	width: 100%;
	height: 100%;
}

.framed-image__img {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid color-mix(in srgb, var(--dv-gold) 75%, transparent);
}

.framed-image__img--placeholder {
	display: block;
	background: linear-gradient(135deg, color-mix(in srgb, var(--dv-navy) 72%, #000), var(--dv-navy));
}

.framed-image__frame {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	border: 1px solid color-mix(in srgb, var(--dv-gold) 55%, transparent);
}

.framed-image--br .framed-image__frame { top: 1.6rem; left: 1.6rem; }
.framed-image--bl .framed-image__frame { top: 1.6rem; right: 1.6rem; }
.framed-image--tr .framed-image__frame { bottom: 1.6rem; left: 1.6rem; }
.framed-image--tl .framed-image__frame { bottom: 1.6rem; right: 1.6rem; }

/* --- Section « Services principaux » -------------------------
   Mise en page entièrement en flux / flexbox. position:absolute
   réservé aux seules superpositions réelles : les étiquettes posées
   sur l'image (.svc__arguments) et le cadre décalé (.framed-image__frame).
   ------------------------------------------------------------- */
.services {
	background-color: var(--dv-cream);
	overflow-x: clip;

	/* Marge extérieure : aligne le contenu (surtitre, texte) sur le conteneur
	   large tout en laissant le panneau sombre déborder jusqu'au bord. */
	--svc-pad: max(var(--dv-gutter), calc((100vw - var(--dv-container-wide)) / 2));
}


/* Bandeau crème supérieur — surtitre. */
.svc__head {
	padding: clamp(1.75rem, 2.8vw, 2.8rem) var(--svc-pad) clamp(1.25rem, 2vw, 2rem);
}

.svc .surtitre--line .surtitre__label {
	color: var(--dv-color-heading);
}

/* Corps : libellé vertical + panneau sombre, côte à côte.
   Pleine largeur : le panneau sombre déborde jusqu'au bord, le contenu
   interne est aligné sur le conteneur via --svc-pad. */
.svc__body {
	display: flex;
	align-items: stretch;
}

.svc--right .svc__body {
	flex-direction: row-reverse;
}

/* Libellé vertical, dans la marge crème extérieure. */
.svc__sidelabel {
	flex: 0 0 clamp(6rem, 16vw, 340px);
	display: flex;
	align-items: center;
}

.svc--left .svc__sidelabel  { justify-content: flex-start; padding-left: clamp(0.5rem, 1.6vw, 1.6rem); }
.svc--right .svc__sidelabel { justify-content: flex-end; padding-right: clamp(0.5rem, 1.6vw, 1.6rem); }

.svc__sidelabel-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--dv-font-heading);
	font-size: clamp(1.9rem, 4.4vw, 3.9rem);
	font-weight: var(--dv-fw-light);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dv-navy);
	white-space: nowrap;
}

/* Panneau sombre — image de fond Devillard (navy + motif doré). */
.svc__main {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	padding-block: clamp(3.5rem, 6vw, 6rem);
	background-color: var(--dv-navy);
	isolation: isolate;
}

.svc__main::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../images/fond-devillard.png") center / cover no-repeat;
	opacity: var(--dv-fond-opacity);
	pointer-events: none;
}

.svc--right .svc__main {
	flex-direction: row-reverse;
	background-position: left;
}

.svc--left .svc__main {
	background-position: right;
	gap: clamp(2rem, 6vw, 6rem);
}

.svc--left .svc__main  { padding-inline: 0 var(--svc-pad); }
.svc--right .svc__main { padding-inline: var(--svc-pad) 0; }

/* Image encadrée — léger débord vers la marge crème extérieure. */
.svc__figure {
	position: relative;
	flex: 0 0 clamp(20rem, 32vw, 35rem);
	max-width: 100%;
	aspect-ratio: 5 / 7;
}

.svc--left .svc__figure  { margin-left: clamp(-7rem, -6vw, -3rem); }
.svc--right .svc__figure { margin-right: clamp(-7rem, -6vw, -3rem); }

.svc__framed {
	position: relative;
	z-index: 1;
}

/* Étiquettes « arguments » — superposées sur le bord intérieur de
   l'image (vraie superposition : position absolute justifiée). */
.svc__arguments {
	position: absolute;
	z-index: 2;
	top: 15%;
	bottom: 15%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
}

.svc--left .svc__arguments  { left: 24%; right: -2.75rem; align-items: flex-end; }
.svc--right .svc__arguments { right: 24%; left: -2.75rem; align-items: flex-start; }

.svc__argument {
	max-width: 100%;
	padding: 0.95rem 2rem;
	border: 1px solid color-mix(in srgb, var(--dv-gold) 38%, transparent);
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--dv-navy) 58%, transparent);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	font-size: var(--dv-fs-xs);
	font-weight: var(--dv-fw-medium);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dv-cream);
	text-align: center;
}

/* .svc--left .svc__argument:nth-child(even)  { transform: translateX(2.25rem); }
.svc--right .svc__argument:nth-child(even) { transform: translateX(-2.25rem); } */

/* Contenu. */
.svc__content {
	flex: 1;
	min-width: 0;
	color: var(--dv-color-on-dark);
}

.svc__title {
	margin: 0 0 var(--dv-space-md);
	font-size: var(--dv-fs-2xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.18;
	color: var(--dv-color-on-dark);
}

.svc__text {
	max-width: 38rem;
	font-size: var(--dv-fs-sm);
	color: color-mix(in srgb, var(--dv-cream) 60%, transparent);
}

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

.svc__cta {
	margin-top: var(--dv-space-lg);
}

/* Adaptation : empilement en colonne sous 1024px. */
@media (max-width: 1024px) {
	.svc__sidelabel {
		display: none;
	}

	.svc__body,
	.svc--right .svc__body {
		flex-direction: column;
	}

	.svc__main,
	.svc--right .svc__main {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 3rem;
	}

	.svc--left .svc__main,
	.svc--right .svc__main {
		padding-inline: clamp(1.5rem, 6vw, 3rem);
	}

	.svc--left .svc__figure,
	.svc--right .svc__figure {
		flex-basis: auto;
		width: 100%;
		max-width: 22rem;
		margin: 0 auto;
	}

	.svc--left .svc__arguments,
	.svc--right .svc__arguments {
		left: 1rem;
		right: 1rem;
	}

	.svc--left .svc__argument:nth-child(even),
	.svc--right .svc__argument:nth-child(even) {
		transform: none;
	}
}


/* --- Section « Services secondaires » (carousel Swiper) ------ */
.scarousel {
	position: relative;
	overflow: hidden;
	padding-top: clamp(2rem, 4vw, 4rem);
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
}

/* Image de fond — couvre 100 % de la section, voile navy par-dessus. */
.scarousel__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.scarousel__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.scarousel__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			100deg,
			var(--dv-navy) 34%,
			color-mix(in srgb, var(--dv-navy) 25%, transparent) 70%,
			color-mix(in srgb, var(--dv-navy) 8%, transparent) 100%
		),
		linear-gradient(to bottom, transparent 52%, var(--dv-navy) 100%);
}

/* Contenu — au-dessus de l'image de fond. */
.scarousel__head,
.scarousel__intro,
.scarousel__carousel {
	position: relative;
	z-index: 1;
}

.scarousel__head {
	padding-inline: clamp(1.5rem, 5vw, 6rem);
}

.scarousel__intro {
	max-width: 46rem;
	margin-top: clamp(2rem, 4vw, 3.5rem);
	padding-inline: clamp(1.5rem, 5vw, 6rem);
}

.scarousel__title {
	margin: 0 0 var(--dv-space-md);
	font-size: var(--dv-fs-2xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.18;
	color: var(--dv-color-on-dark);
}

.scarousel__text {
	font-size: var(--dv-fs-sm);
	color: color-mix(in srgb, var(--dv-cream) 60%, transparent);
}

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

/* Flèches de navigation. */
.scarousel__nav {
	display: flex;
	gap: 0.65rem;
	margin-top: var(--dv-space-lg);
}

.scarousel__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	padding: 0;
	border: 0;
	background-color: var(--dv-bordeaux);
	color: var(--dv-cream);
	cursor: pointer;
	transition: background-color var(--dv-transition);
}

.scarousel__nav-btn:hover {
	background-color: color-mix(in srgb, var(--dv-bordeaux) 82%, var(--dv-white));
}

.scarousel__nav-btn svg {
	width: 1.6rem;
	height: auto;
}

.scarousel__nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* Carousel. */
.scarousel__carousel {
	margin-top: clamp(2.5rem, 5vw, 5rem);
}


.scarousel__swiper .swiper-slide {
	width: clamp(17rem, 30vw, 32rem);
	overflow: visible;
}

/* Losange. */
.dia {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	color: inherit;
}

/* Forme du losange : carré pivoté à 45° (bordure nette conservée). */
.dia__shape {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70.71%;
	height: 70.71%;
	transform: translate(-50%, -50%) rotate(45deg);
	border: 1px solid color-mix(in srgb, var(--dv-gold) 45%, transparent);
	background-color: color-mix(in srgb, var(--dv-cream) 5%, transparent);
	transition: background-color 0.4s ease, border-color 0.4s ease;
}

.dia__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: 64%;
	text-align: center;
}

.dia__number {
	font-family: var(--dv-font-heading);
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	font-weight: var(--dv-fw-light);
	line-height: 1;
	color: var(--dv-gold);
	transition: color 0.4s ease;
}

.dia__title {
	font-size: var(--dv-fs-sm);
	font-weight: var(--dv-fw-medium);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dv-cream);
	transition: color 0.4s ease;
}

/* État survolé / focus — le losange passe en blanc plein. */
.dia:hover .dia__shape,
.dia:focus-visible .dia__shape {
	background-color: var(--dv-white);
	border-color: var(--dv-white);
}

.dia:hover .dia__number,
.dia:hover .dia__title,
.dia:focus-visible .dia__number,
.dia:focus-visible .dia__title {
	color: var(--dv-navy);
}


/* --- Section FAQ (accordéon) --------------------------------- */
.faq {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 8vw, 8rem);
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
}

/* Ornement décoratif en fond, débordant sur le bord gauche. */
.faq::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	height: 100%;
    width: 100%;
	aspect-ratio: 1817 / 1000;
	transform: translate(-40%, -50%);
	background: url("../images/fond-devillard.png") center / contain no-repeat;
	opacity: var(--dv-fond-opacity);
	pointer-events: none;
}

.faq__head {
	position: relative;
	z-index: 1;
	padding-inline: clamp(1.5rem, 5vw, 6rem);
}

.faq__inner {
	position: relative;
	z-index: 1;
	max-width: 73rem;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 3rem);
}

.faq__title {
	margin: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.25rem, 4vw, 3.5rem);
	font-size: var(--dv-fs-2xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.2;
	text-align: center;
	color: var(--dv-color-on-dark);
}

/* Élément d'accordéon. */
.faq__item {
	border-top: 1px solid color-mix(in srgb, var(--dv-gold) 28%, transparent);
}

.faq__heading {
	margin: 0;
	font: inherit;
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: clamp(1.4rem, 2.5vw, 2rem) 0;
	cursor: pointer;
}

.faq__question-text {
	font-family: var(--dv-font-heading);
	font-size: clamp(1.1rem, 1.7vw, 1.45rem);
	font-weight: var(--dv-fw-regular);
	line-height: 1.3;
	color: var(--dv-color-on-dark);
	transition: color var(--dv-transition);
}

.faq__question:hover .faq__question-text,
.faq__item.is-open .faq__question-text {
	color: var(--dv-gold);
}

/* Bouton circulaire « + » → « × » à l'ouverture. */
.faq__toggle {
	position: relative;
	flex: none;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background-color: var(--dv-gold);
	transition: transform 0.35s ease;
}

.faq__toggle::before,
.faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--dv-navy);
}

.faq__toggle::before {
	width: 0.95rem;
	height: 2px;
	transform: translate(-50%, -50%);
}

.faq__toggle::after {
	width: 2px;
	height: 0.95rem;
	transform: translate(-50%, -50%);
}

.faq__item.is-open .faq__toggle {
	transform: rotate(45deg);
}

/* Réponse — accordéon via transition de grid-template-rows. */
.faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease;
}

.faq__item.is-open .faq__answer {
	grid-template-rows: 1fr;
}

.faq__answer-inner {
	overflow: hidden;
}

.faq__answer-body {
	padding-bottom: clamp(1.5rem, 2.6vw, 2.1rem);
	font-size: var(--dv-fs-sm);
	color: color-mix(in srgb, var(--dv-cream) 62%, transparent);
}

.faq__answer-body > :last-child {
	margin-bottom: 0;
}


/* --- Tête d'archive : bascule de la section 2 au défilement --
   Conteneur enveloppant hero + losanges + intro. Sans JS, chaque
   bloc garde son fond (repli statique = rendu d'origine). Quand JS
   active l'effet (.is-scrollfx), toute la zone reste bleue puis la
   section 2 (intro) bascule du bleu au blanc à son entrée dans la vue.
   ------------------------------------------------------------- */
.archive-lead {
	background-color: var(--dv-navy);
}

/* Zone bleue : le hero et la bande de losanges laissent voir le navy. */
.archive-lead.is-scrollfx .archive-hero {
	background-color: transparent;
}

.archive-lead.is-scrollfx .archive-diamonds {
	position: relative;
	background: transparent;
}

/* Losanges au-dessus de la couche « flip ». */
.archive-lead.is-scrollfx .archive-diamonds .diamond-band {
	position: relative;
	z-index: 1;
}

/* Couche basculant en blanc sous les losanges (moitié basse de la bande).
   Masquée sans l'effet ; le JS l'anime du navy vers le crème. */
.archive-diamonds__flip {
	display: none;
}

.archive-lead.is-scrollfx .archive-diamonds__flip {
	display: block;
	position: absolute;
	inset: auto 0 0 0;
	z-index: 0;
	height: 50%;
	background-color: var(--dv-navy);
}

/* Section 2 : démarre bleue, le JS la bascule en crème (cf. initArchiveBg). */
.archive-lead.is-scrollfx .archive-intro {
	background-color: var(--dv-navy);
}

/* --- Hero de page d'archive ---------------------------------- */
.archive-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(9rem, 14vw, 14rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 8vw, 8rem);
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
	text-align: center;
}

/* Image des colonnes — fond droit estompé.
   Remplacer le fichier dans assets/images/ et mettre à jour ce chemin. */
.archive-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/fond-devillard.png") right center / cover no-repeat;
	opacity: 0.3;
	-webkit-mask-image: linear-gradient(to left, #000 5%, transparent 62%);
	mask-image: linear-gradient(to left, #000 5%, transparent 62%);
	pointer-events: none;
}

.archive-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dv-space-md);
	max-width: 58rem;
	margin-inline: auto;
}

.archive-hero__title {
	margin: 0;
	font-size: var(--dv-fs-2xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.18;
	color: var(--dv-color-on-dark);
}

.archive-hero__text {
	max-width: 46rem;
	color: color-mix(in srgb, var(--dv-cream) 62%, transparent);
}

.archive-hero__text > :last-child {
	margin-bottom: 0;
}

.archive-hero__cta {
	margin-top: var(--dv-space-xs);
}

/* Bande de losanges — image unique découpée en clip-path.
   Le fond bicolore prolonge le navy du hero (haut) et le crème
   de l'introduction (bas) entre les losanges. */
.archive-diamonds {
	background: linear-gradient(to bottom, var(--dv-navy) 50%, var(--dv-cream) 50%);
}

/* Bande de losanges (component diamond-band) — partagée. */
.diamond-band {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2000 / 750;
}

/* Bloc d'introduction — fond clair, logo en filigrane. */
.archive-intro {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 5vw, 5rem) clamp(4rem, 9vw, 9rem);
	background-color: var(--dv-cream);
	display: flex;
    justify-content: center;
}

.archive-intro__logo {
	position: absolute;
	left: 0;
	top: 50%;
	width: clamp(20rem, 32vw, 34rem);
	transform: translate(-24%, -50%);
	opacity: 0.07;
	pointer-events: none;
}

.archive-intro__logo img {
	width: 100%;
	height: auto;
}

.archive-intro__text {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin-inline: auto;
	color: var(--dv-color-text);

}

.archive-intro__text > :last-child {
	margin-bottom: 0;
}

/* Mobile : marge intérieure pour décoller le texte des bords. */
@media (max-width: 768px) {
	.archive-intro__text {
		padding: 1em;
	}
}


/* --- Section « Compétences » (archive catégorie) ------------- */
.competences {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 6vw, 6rem);
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
}

.competences__head {
	padding-inline: clamp(1.5rem, 5vw, 6rem);
}

.competences__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 6rem);
	max-width: 86rem;
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 6rem) 0;
}

.competences__main,
.competences__aside {
	display: flex;
	flex-direction: column;
}

.competences__title {
	margin: 0 0 clamp(1.75rem, 3.5vw, 3rem);
	font-size: var(--dv-fs-2xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.18;
	color: var(--dv-color-on-dark);
}

/* Dépliant (accordéon). */
.competences__trigger {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: clamp(0.5rem, 1vw, 0.85rem);
	cursor: pointer;
}

.competences__toggle {
	position: relative;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid color-mix(in srgb, var(--dv-gold) 55%, transparent);
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--dv-gold) 10%, transparent);
	transition: transform 0.35s ease;
}

.competences__toggle::before,
.competences__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--dv-gold);
}

.competences__toggle::before {
	width: 0.7rem;
	height: 1.5px;
	transform: translate(-50%, -50%);
}

.competences__toggle::after {
	width: 1.5px;
	height: 0.7rem;
	transform: translate(-50%, -50%);
}

.competences__item.is-open .competences__toggle {
	transform: rotate(45deg);
}

.competences__label {
	font-family: var(--dv-font-heading);
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	color: var(--dv-color-on-dark);
	transition: color var(--dv-transition);
}

.competences__trigger:hover .competences__label,
.competences__item.is-open .competences__label {
	color: var(--dv-gold);
}

/* Ligne + carré décoratif sous chaque entrée. */
.competences__rule {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-block: 0.5rem;
}

.competences__rule-line {
	flex: 1;
	height: 1px;
	background-color: color-mix(in srgb, var(--dv-gold) 42%, transparent);
}

.competences__rule-square {
	flex: none;
	width: 0.85rem;
	height: 0.85rem;
	border: 1px solid color-mix(in srgb, var(--dv-gold) 60%, transparent);
	background-color: color-mix(in srgb, var(--dv-gold) 28%, transparent);
}

/* Réponse — accordéon (transition grid-template-rows). */
.competences__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease;
}

.competences__item.is-open .competences__answer {
	grid-template-rows: 1fr;
}

.competences__answer-inner {
	overflow: hidden;
}

.competences__answer-body {
	padding: 0.25rem 0 0.75rem 3.5rem;
	font-size: var(--dv-fs-sm);
	color: color-mix(in srgb, var(--dv-cream) 62%, transparent);
}

.competences__answer-body > :last-child {
	margin-bottom: 0;
}

/* Aside : texte + image. */
.competences__text {
	margin-bottom: clamp(4rem, 4vw, 3.5rem);
	color: color-mix(in srgb, var(--dv-cream) 62%, transparent);
}

.competences__text > :last-child {
	margin-bottom: 0;
}

.competences__figure {
	position: relative;
	width: 100%;
	max-width: 30rem;
	margin-inline: auto;
	aspect-ratio: 4 / 5;
}

.competences__framed {
	position: relative;
	z-index: 1;
}

/* Ornement décoratif derrière l'image. */
.competences__ornament {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 0;
	width: 135%;
	aspect-ratio: 1817 / 1000;
	transform: translate(-44%, -50%);
	background: url("../images/fond-devillard.png") center / contain no-repeat;
	opacity: var(--dv-fond-opacity);
	pointer-events: none;
}

/* Arguments superposés sur l'image. */
.competences__arguments {
	position: absolute;
	z-index: 2;
	inset: 9% 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.competences__argument {
	padding: 0.9rem 2rem;
	border: 1px solid color-mix(in srgb, var(--dv-gold) 35%, transparent);
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--dv-navy) 55%, transparent);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	font-size: var(--dv-fs-xs);
	font-weight: var(--dv-fw-medium);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dv-cream);
	text-align: center;
	/* white-space: nowrap; */
}

/* Adaptation mobile. */
@media (max-width: 880px) {
	.competences__inner {
		grid-template-columns: 1fr;
		gap: clamp(2.5rem, 6vw, 3.5rem);
	}

	.competences__figure {
		max-width: 22rem;
	}

	.competences__ornament {
		display: none;
	}
}


/* --- Section « Services de la catégorie » -------------------- */
.cat-services {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 7vw, 7rem);
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
	isolation: isolate;
}

.cat-services::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../images/fond-devillard.png") center / contain no-repeat;
	opacity: var(--dv-fond-opacity);
	pointer-events: none;
}

/* En-tête : titre + description. */
.cat-services__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	max-width: 86rem;
	margin: 0 auto clamp(2.5rem, 6vw, 6rem);
	padding-inline: clamp(1.5rem, 5vw, 6rem);
}

.cat-services__title {
	margin: 0;
	font-size: var(--dv-fs-2xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.18;
	color: var(--dv-color-on-dark);
}

.cat-services__text {
	font-size: var(--dv-fs-sm);
	color: color-mix(in srgb, var(--dv-cream) 62%, transparent);
}

.cat-services__text > :last-child {
	margin-bottom: 0;
}

.cat-services__list {
	max-width: 86rem;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 6rem);
}

/* --- Dépliant (accordéon) ------------------------------------ */
.depliant {
	border-top: 1px solid color-mix(in srgb, var(--dv-gold) 30%, transparent);
}

.depliant:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--dv-gold) 30%, transparent);
}

.depliant__header {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.4rem);
	padding-block: clamp(1.1rem, 2vw, 1.7rem);
	cursor: pointer;
}

.depliant.is-open .depliant__header {
	border-bottom: 1px solid color-mix(in srgb, var(--dv-gold) 30%, transparent);
}

/* Numéro : losange (fermé) qui pivote en carré (ouvert). */
.depliant__num {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.3rem;
	height: 3.3rem;
}

.depliant__num::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--dv-bordeaux);
	transform: rotate(45deg);
	transition: transform 0.45s ease;
}

.depliant.is-open .depliant__num::before {
	transform: rotate(0deg);
}

.depliant__num-text {
	position: relative;
	z-index: 1;
	font-family: var(--dv-font-heading);
	font-size: 1.1rem;
	color: var(--dv-color-on-dark);
}

.depliant__title {
	flex: 1;
	font-family: var(--dv-font-heading);
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	font-weight: var(--dv-fw-regular);
	line-height: 1.3;
	color: var(--dv-color-on-dark);
}

/* Bascule « + » → « × ». */
.depliant__toggle {
	position: relative;
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	transition: transform 0.4s ease;
}

.depliant__toggle::before,
.depliant__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--dv-gold);
}

.depliant__toggle::before {
	width: 100%;
	height: 2px;
	transform: translate(-50%, -50%);
}

.depliant__toggle::after {
	width: 2px;
	height: 100%;
	transform: translate(-50%, -50%);
}

.depliant.is-open .depliant__toggle {
	transform: rotate(45deg);
}

/* Contenu déplié (transition grid-template-rows). */
.depliant__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s ease;
}

.depliant.is-open .depliant__panel {
	grid-template-rows: 1fr;
}

.depliant__panel-inner {
	overflow: hidden;
}

.depliant__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	padding: clamp(1.75rem, 3vw, 2.75rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.depliant__heading {
	margin: 0 0 var(--dv-space-md);
	font-size: var(--dv-fs-xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.2;
	color: var(--dv-color-on-dark);
}

.depliant__desc {
	font-size: var(--dv-fs-sm);
	color: color-mix(in srgb, var(--dv-cream) 62%, transparent);
}

.depliant__desc > :last-child {
	margin-bottom: 0;
}

.depliant__cta {
	margin-top: var(--dv-space-lg);
}

/* Panneau bordeaux des arguments. */
.depliant__args {
	position: relative;
	align-self: start;
}

.depliant__args-frame {
	position: absolute;
	z-index: 0;
	inset: 0;
	transform: translate(1.25rem, -1.25rem);
	border: 1px solid color-mix(in srgb, var(--dv-gold) 50%, transparent);
}

.depliant__args-list {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.6rem);
	margin: 0;
	padding: clamp(1.75rem, 3vw, 2.75rem);
	list-style: none;
	background-color: var(--dv-bordeaux);
	border: 1px solid color-mix(in srgb, var(--dv-gold) 55%, transparent);
}

.depliant__arg {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.depliant__arg-icon {
	flex: none;
	margin-top: 0.3rem;
	color: var(--dv-gold);
}

.depliant__arg-icon svg {
	width: 1.6rem;
	height: auto;
}

.depliant__arg-text {
	font-size: var(--dv-fs-sm);
	line-height: 1.55;
	color: color-mix(in srgb, var(--dv-cream) 88%, transparent);
}

/* Adaptation mobile. */
@media (max-width: 880px) {
	.cat-services__head,
	.depliant__body {
		grid-template-columns: 1fr;
	}

	.depliant__args-frame {
		transform: translate(0.75rem, -0.75rem);
	}
}


/* --- Section CTA (archive catégorie) -------------------------
   Bloc nommé .cta-block pour ne pas entrer en collision avec la
   classe .cta du composant bouton. */
.cta-block {
	position: relative;
	overflow: hidden;
	padding-block: clamp(5.5rem, 11vw, 11rem);
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
}

/* Bande de losanges — centrée verticalement dans la section. */
.cta-block__band {
	position: relative;
	z-index: 0;
}

/* Losange bordeaux centré, au-dessus de la bande. */
.cta-block__center {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(20rem, 52vw, 50rem);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
}

.cta-block__diamond {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70.71%;
	height: 70.71%;
	background-color: var(--dv-bordeaux);
	transform: translate(-50%, -50%) rotate(45deg);
}

.cta-block__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dv-space-md);
	width: 60%;
	text-align: center;
}

.cta-block__title {
	margin: 0;
	font-size: var(--dv-fs-xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.2;
	color: var(--dv-color-on-dark);
}

/* Petits écrans : le losange suit la largeur de l'écran (au lieu d'un
   minimum fixe de 20rem qui débordait la hauteur de la section et se
   faisait rogner). On assure aussi assez de hauteur autour. */
@media (max-width: 600px) {
	.cta-block {
		padding-block: clamp(6rem, 18vw, 8rem);
	}

	.cta-block__center {
		width: min(80vw, 22rem);
	}

	.cta-block__content {
		width: 76%;
	}
}


/* --- Page article : hero ------------------------------------- */
.article-hero {
	padding: clamp(9rem, 14vw, 14rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
}

.article-hero__inner {
	max-width: 70rem;
	margin-inline: auto;
}

/* Fil d'ariane sur fond sombre. */
.article-hero .breadcrumb__list,
.article-hero .breadcrumb__link {
	color: color-mix(in srgb, var(--dv-cream) 55%, transparent);
}

.article-hero .breadcrumb__item + .breadcrumb__item::before {
	color: color-mix(in srgb, var(--dv-cream) 30%, transparent);
}

.article-hero .breadcrumb__link:hover {
	color: var(--dv-gold);
}

.article-hero .breadcrumb__current {
	color: color-mix(in srgb, var(--dv-cream) 85%, transparent);
}

.article-hero__title {
	margin: clamp(1.25rem, 2.5vw, 2.25rem) 0;
	font-size: var(--dv-fs-2xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.18;
	color: var(--dv-color-on-dark);
}

.article-hero__author {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.article-hero__avatar-img {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
}

.article-hero__author-name {
	font-size: var(--dv-fs-sm);
	color: color-mix(in srgb, var(--dv-cream) 78%, transparent);
}

/* --- Page article : corps ------------------------------------ */
.article-main {
	padding-block: clamp(3rem, 6vw, 6rem);
	background-color: var(--dv-cream);
}

.article-main__inner {
	max-width: 84rem;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 3rem);
}

/* Layout 2 colonnes : contenu à gauche, sidebar plus large à droite (~35 %). */
.article-main__layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
	align-items: start;
	gap: clamp(2rem, 5vw, 5rem);
}

/* Sidebar sticky qui suit le scroll. */
.article-main__sidebar {
	position: sticky;
	top: 6rem;
}

/* Sommaire — affiché au-dessus du layout, sur toute la largeur. */
.article-toc {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid color-mix(in srgb, var(--dv-gold) 50%, transparent);
}

.article-toc__title {
	margin: 0 0 var(--dv-space-md);
	font-size: var(--dv-fs-lg);
	font-weight: var(--dv-fw-regular);
	color: var(--dv-color-heading);
}

.article-toc__list {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding-left: 1.4rem;
}

.article-toc__link {
	font-size: var(--dv-fs-sm);
	color: var(--dv-color-text);
}

.article-toc__link:hover {
	color: var(--dv-color-primary);
}

/* Encart « Encore une question ? ». */
.article-aside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dv-space-md);
	padding: clamp(1.75rem, 3vw, 2.75rem);
	background-color: var(--dv-bordeaux);
	color: var(--dv-color-on-dark);
	text-align: center;
}

.article-aside__title {
	margin: 0;
	font-size: var(--dv-fs-lg);
	font-weight: var(--dv-fw-light);
	color: var(--dv-color-on-dark);
}

.article-aside__text {
	margin: 0;
	font-size: var(--dv-fs-sm);
	color: color-mix(in srgb, var(--dv-cream) 82%, transparent);
}

.article-aside__text > :last-child {
	margin-bottom: 0;
}

/* Contenu rédactionnel. */
.article-main__content {
	font-size: var(--dv-fs-md);
	line-height: var(--dv-lh-normal);
	color: var(--dv-color-text);
}

.article-main__content > * {
	margin-block: 0;
}

.article-main__content > * + * {
	margin-top: var(--dv-space-md);
}

.article-main__content h2 {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	font-size: var(--dv-fs-xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.2;
	color: var(--dv-color-heading);
}

.article-main__content h3 {
	margin-top: clamp(2rem, 4vw, 3rem);
	color: var(--dv-color-heading);
}

.article-main__content a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --- Page article : CTA de bas de page ----------------------- */
.article-cta {
	padding-block: clamp(3rem, 6vw, 6rem);
	background-color: var(--dv-bordeaux);
	color: var(--dv-color-on-dark);
}

.article-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3rem);
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.article-cta__title {
	margin: 0;
	font-size: var(--dv-fs-xl);
	font-weight: var(--dv-fw-light);
	color: var(--dv-color-on-dark);
}

/* Adaptation mobile : sidebar passe sous le contenu. */
@media (max-width: 880px) {
	.article-main__layout {
		grid-template-columns: 1fr;
	}

	.article-main__sidebar {
		position: static;
	}
}


/* --- Animation d'arrivée (intro / rideau) -------------------- */
/* Masqué par défaut : ne s'affiche que si JavaScript l'arme dans le <head>
   (classe .dv-intro-armed). Sans JS, ou si l'intro a déjà été vue dans la
   session, l'overlay ne s'affiche jamais — la page est visible directement. */
.dv-intro {
	display: none;
}

.dv-intro-armed .dv-intro {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background-color: var(--dv-navy);
	will-change: transform;
}

/* États initiaux (avant que GSAP ne prenne la main) — évite tout flash :
   le panneau bleu nuit couvre la page, contenu déjà masqué prêt à se dévoiler. */
.dv-intro-armed .dv-intro__logo {
	clip-path: inset(0 100% 0 0);
}

.dv-intro-armed .dv-intro__rule {
	transform: scaleX(0);
}

.dv-intro-armed .dv-intro__diamond {
	transform: scale(0);
}

.dv-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	will-change: transform, opacity;
}

.dv-intro__logo {
	width: clamp(190px, 34vw, 380px);
	will-change: clip-path, transform;
}

.dv-intro__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.dv-intro__accent {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.4vw, 1rem);
}

.dv-intro__rule {
	display: block;
	width: clamp(48px, 9vw, 96px);
	height: 1px;
	background-color: var(--dv-gold);
	will-change: transform;
}

.dv-intro__diamond {
	display: block;
	width: 0.55rem;
	height: 0.55rem;
	background-color: var(--dv-gold);
	transform: rotate(45deg);
	will-change: transform;
}

/* Verrouille le défilement pendant que l'intro joue. */
body.dv-intro-lock {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.dv-intro {
		display: none !important;
	}
}


/* --- Header global du site ----------------------------------- */
.dv-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transition: background-color 0.35s ease, backdrop-filter 0.35s ease,
		border-color 0.35s ease;
	border-bottom: 1px solid transparent;
}

.dv-header__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 4rem);
	width: 100%;
	max-width: var(--dv-container-wide);
	margin-inline: auto;
	padding: clamp(1rem, 1.5vw, 1.6rem) clamp(1.5rem, 5vw, 4rem);
	border: 1px solid transparent;
	transition: padding 0.4s ease, background-color 0.4s ease,
		border-color 0.4s ease, border-radius 0.4s ease, box-shadow 0.4s ease;
}

.dv-header__logo {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
}

.dv-header__logo-img {
	display: block;
	width: auto;
	height: clamp(2.75rem, 4.2vw, 4.25rem);
	transition: opacity 0.35s ease, height 0.35s ease;
}

/* Repli quand aucun logo personnalisé n'est défini dans WordPress :
   le SVG noir du thème est inversé en blanc par filtre CSS. */
.dv-header__logo-img--light.is-svg-fallback {
	filter: brightness(0) invert(1);
}

/* Le logo sombre se superpose au logo clair et n'apparaît qu'au scroll. */
.dv-header__logo-img--dark {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	opacity: 0;
	pointer-events: none;
}

.dv-header__cta {
	flex: none;
}

/* Conteneur menu — aplatit dans le flex de l'en-tête sur desktop. */
.dv-header__menu {
	display: contents;
}

/* Navigation desktop. */
.dv-nav {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dv-nav > .menu-item > a {
	display: inline-block;
	padding-block: 0.5rem;
	font-family: var(--dv-font-body);
	font-size: var(--dv-fs-xs);
	font-weight: var(--dv-fw-medium);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dv-color-on-dark);
	text-decoration: none;
	transition: color 0.3s ease;
}

.dv-nav a:hover,
.dv-nav .menu-item-has-children:hover > a,
.dv-nav .menu-item-has-children:focus-within > a,
.dv-nav .current-menu-item > a,
.dv-nav .current-menu-ancestor > a {
	color: var(--dv-gold);
}

/* Stabilité au survol : on fige graisse, interlettrage et transform pour
   éviter le décalage des liens (typo de survol héritée du kit Elementor). */
.dv-header .dv-nav a,
.dv-header .dv-nav a:hover,
.dv-header .dv-nav a:focus {
	font-weight: var(--dv-fw-medium);
	transform: none;
}

.dv-header .dv-nav > .menu-item > a,
.dv-header .dv-nav > .menu-item > a:hover,
.dv-header .dv-nav > .menu-item > a:focus {
	letter-spacing: 0.18em;
}

/* Sous-menus — fond blanc translucide + flou, au survol. */
.dv-nav .menu-item-has-children {
	position: relative;
}

/* Chevron sur les entrées qui ont un sous-menu. */
.dv-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.55em;
	vertical-align: 0.18em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.3s ease;
}

/* Au survol/focus desktop, la flèche pivote pour indiquer l'ouverture. */
.dv-nav .menu-item-has-children:hover > a::after,
.dv-nav .menu-item-has-children:focus-within > a::after {
	transform: rotate(225deg);
}

.dv-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 16rem;
	margin: 0;
	border-radius: 1em;
	padding: 0.5rem 0;
	list-style: none;
	background-color: color-mix(in srgb, var(--dv-white) 80%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid color-mix(in srgb, var(--dv-navy) 8%, transparent);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 0.5rem);
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.dv-nav .menu-item-has-children:hover > .sub-menu,
.dv-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.dv-nav .sub-menu .menu-item > a {
	display: block;
	padding: 0.7rem 1.4rem;
	font-family: var(--dv-font-body);
	font-size: var(--dv-fs-xs);
	font-weight: var(--dv-fw-medium);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dv-navy);
	white-space: nowrap;
	transition: color 0.25s ease, background-color 0.25s ease;
}

.dv-nav .sub-menu .menu-item > a:hover {
	color: var(--dv-gold);
	background-color: color-mix(in srgb, var(--dv-navy) 4%, transparent);
}

/* Bouton hamburger — caché par défaut (visible sous 1024px). */
.dv-header__burger {
	display: none;
	background: transparent;
	border: 0;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

/* Neutralise le style de bouton de Hello Elementor (reset.css) :
   bordure + fond rose/rouge #c36 au survol, focus et activation. */
.dv-header__burger:hover,
.dv-header__burger:focus,
.dv-header__burger:active,
.dv-header__burger:focus-visible {
	background: transparent;
	border: 0;
	color: inherit;
	outline: none;
	box-shadow: none;
}

/* État défilé — barre flottante : le header n'est plus qu'un cadre
   transparent qui ménage la marge ; c'est l'inner qui devient la carte. */
.dv-header.is-scrolled {
	padding: clamp(0.55rem, 1.1vw, 1rem) clamp(1rem, 3vw, 2rem) 0;
}

/* La carte flottante : verre clair, coins arrondis, ombre portée. */
.dv-header.is-scrolled .dv-header__inner {
	padding-block: clamp(0.6rem, 0.9vw, 0.9rem);
	padding-inline: clamp(1.35rem, 2.5vw, 2.25rem);
	background-color: color-mix(in srgb, var(--dv-white) 84%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border-color: color-mix(in srgb, var(--dv-white) 55%, transparent);
	border-radius: 1.35rem;
	box-shadow:
		0 18px 44px -20px rgba(26, 29, 45, 0.5),
		0 4px 14px -8px rgba(26, 29, 45, 0.25);
}

.dv-header.is-scrolled .dv-header__logo-img {
	height: clamp(2.5rem, 3.4vw, 3.4rem);
}

.dv-header.is-scrolled .dv-header__logo-img--light {
	opacity: 0;
}

.dv-header.is-scrolled .dv-header__logo-img--dark {
	opacity: 1;
}

.dv-header.is-scrolled .dv-nav > .menu-item > a {
	color: var(--dv-color-text);
}

.dv-header.is-scrolled .dv-nav a:hover,
.dv-header.is-scrolled .dv-nav .menu-item-has-children:hover > a {
	color: var(--dv-color-primary);
}

/* Bouton — bascule en variante claire (texte navy) sur fond blanc. */
.dv-header.is-scrolled .dv-header__cta .cta {
	--cta-color: var(--dv-navy);
	--cta-line:  color-mix(in srgb, var(--dv-navy) 35%, transparent);
}

/* Adaptation mobile : burger + menu pleine page.
   Même seuil (1024px) que l'empilement du contenu (hero, services) pour
   une bascule mobile unique et cohérente. */
@media (max-width: 1024px) {
	.dv-header__inner {
		padding-block: clamp(0.85rem, 2.5vw, 1.25rem);
	}

	/* Burger. */
	.dv-header__burger {
		position: relative;
		z-index: 3;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 1.75rem;
		height: 1.1rem;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	.dv-header__burger-bar {
		display: block;
		width: 100%;
		height: 2px;
		background-color: var(--dv-color-on-dark);
		border-radius: 2px;
		transform-origin: center;
		transition: transform 0.4s ease, opacity 0.3s ease,
			background-color 0.3s ease;
	}

	.dv-header.is-scrolled .dv-header__burger-bar {
		background-color: var(--dv-navy);
	}

	/* Hamburger animé → croix. */
	.dv-header.is-menu-open .dv-header__burger-bar:nth-child(1) {
		transform: translateY(0.49rem) rotate(45deg);
	}

	.dv-header.is-menu-open .dv-header__burger-bar:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}

	.dv-header.is-menu-open .dv-header__burger-bar:nth-child(3) {
		transform: translateY(-0.49rem) rotate(-45deg);
	}

	/* Menu mobile — overlay pleine page. */
	.dv-header__menu {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: clamp(2rem, 5vw, 3rem);
		padding: 6rem 1.5rem 3rem;
		background-color: var(--dv-navy);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s ease, visibility 0.4s ease;
	}

	.dv-header.is-menu-open .dv-header__menu {
		opacity: 1;
		visibility: visible;
	}

	/* Entrée en cascade des items à l'ouverture (fade + glissement).
	   Le délai n'est posé que sur l'état ouvert → fermeture immédiate. */
	.dv-header__menu .dv-nav > .menu-item,
	.dv-header__menu .dv-header__cta {
		opacity: 0;
		transform: translateY(1.25rem);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.dv-header.is-menu-open .dv-nav > .menu-item,
	.dv-header.is-menu-open .dv-header__cta {
		opacity: 1;
		transform: none;
	}

	.dv-header.is-menu-open .dv-nav > .menu-item:nth-child(1) { transition-delay: 0.14s; }
	.dv-header.is-menu-open .dv-nav > .menu-item:nth-child(2) { transition-delay: 0.20s; }
	.dv-header.is-menu-open .dv-nav > .menu-item:nth-child(3) { transition-delay: 0.26s; }
	.dv-header.is-menu-open .dv-nav > .menu-item:nth-child(4) { transition-delay: 0.32s; }
	.dv-header.is-menu-open .dv-nav > .menu-item:nth-child(5) { transition-delay: 0.38s; }
	.dv-header.is-menu-open .dv-nav > .menu-item:nth-child(6) { transition-delay: 0.44s; }
	.dv-header.is-menu-open .dv-header__cta { transition-delay: 0.5s; }

	@media (prefers-reduced-motion: reduce) {
		.dv-header__menu .dv-nav > .menu-item,
		.dv-header__menu .dv-header__cta {
			opacity: 1;
			transform: none;
			transition: none;
		}
	}

	/* Nav en colonne. */
	.dv-nav {
		flex-direction: column;
		gap: clamp(1.25rem, 3vw, 1.75rem);
		text-align: center;
	}

	.dv-nav > .menu-item > a {
		font-size: var(--dv-fs-md);
		color: var(--dv-color-on-dark);
	}

	/* Sous-menus dépliés en permanence sur mobile. */
	.dv-nav .sub-menu {
		position: static;
		transform: none;
		background: transparent;
		backdrop-filter: none;
		border: 0;
		padding: 0.5rem 0 0;
		opacity: 1;
		visibility: visible;
	}

	.dv-nav .sub-menu .menu-item > a {
		padding: 0.35rem 0;
		color: color-mix(in srgb, var(--dv-cream) 75%, transparent);
		text-align: center;
	}

	.dv-header__cta {
		margin-top: 0.75rem;
	}

	/* Menu ouvert : on force l'aspect « sombre » du header. */
	.dv-header.is-menu-open {
		background-color: transparent;
		backdrop-filter: none;
		border-bottom-color: transparent;
	}

	/* La carte flottante s'efface quand le menu plein écran est ouvert. */
	.dv-header.is-menu-open .dv-header__inner {
		background-color: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-color: transparent;
		border-radius: 0;
		box-shadow: none;
	}

	/* Le logo reste au-dessus de l'overlay (qui est en z-index 1). */
	.dv-header__logo {
		z-index: 3;
	}

	/* Menu mobile ouvert : on revient au logo clair, peu importe le scroll. */
	.dv-header.is-menu-open .dv-header__logo-img--light {
		opacity: 1;
	}

	.dv-header.is-menu-open .dv-header__logo-img--dark {
		opacity: 0;
	}

	.dv-header.is-menu-open .dv-header__burger-bar {
		background-color: var(--dv-color-on-dark);
	}

	/* Menu ouvert sur l'overlay sombre : on force les couleurs claires,
	   même si le header est en état défilé (sinon liens navy invisibles). */
	.dv-header.is-menu-open .dv-nav > .menu-item > a {
		color: var(--dv-color-on-dark);
	}

	.dv-header.is-menu-open .dv-nav .menu-item-has-children:hover > a,
	.dv-header.is-menu-open .dv-nav .current-menu-item > a {
		color: var(--dv-gold);
	}

	.dv-header.is-menu-open .dv-header__cta .cta {
		--cta-color: var(--dv-gold);
		--cta-line:  var(--dv-gold);
	}
}

/* Empêche le scroll de l'arrière-plan quand le menu mobile est ouvert. */
body.menu-open {
	overflow: hidden;
}


/* --- Cadre crème autour du pied de page ---------------------- */
.dv-footer-frame {
	padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem) 0;
	background-color: var(--dv-cream);
}

/* --- Pré-footer « Contactez le cabinet » --------------------- */
.dv-footer-cta {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 5vw, 5rem);
	background-color: var(--dv-bordeaux);
	color: var(--dv-color-on-dark);
}

.dv-footer-cta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dv-footer-cta__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	opacity: 0.2;
}

.dv-footer-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3rem);
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.dv-footer-cta__title {
	margin: 0;
	font-size: var(--dv-fs-xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.2;
	color: var(--dv-color-on-dark);
}

/* --- Pied de page (colonnes navy) ---------------------------- */
.dv-footer {
	padding-block: clamp(3rem, 5vw, 5rem);
	background-color: var(--dv-navy);
	color: color-mix(in srgb, var(--dv-cream) 75%, transparent);
}

.dv-footer__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: clamp(2rem, 5vw, 5rem);
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.dv-footer__col--legal  { justify-self: start; }
.dv-footer__col--logo   { justify-self: center; text-align: center; }
.dv-footer__col--skills { justify-self: end; text-align: right; }

.dv-footer__col-title {
	margin: 0 0 var(--dv-space-md);
	font-family: var(--dv-font-heading);
	font-size: var(--dv-fs-lg);
	font-weight: var(--dv-fw-regular);
	color: var(--dv-color-on-dark);
}

.dv-footer-menu {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dv-footer__col--skills .dv-footer-menu { align-items: flex-end; }

.dv-footer-menu a {
	font-size: var(--dv-fs-sm);
	color: color-mix(in srgb, var(--dv-cream) 70%, transparent);
	text-decoration: none;
	transition: color 0.3s ease;
}

.dv-footer-menu a:hover {
	color: var(--dv-gold);
}

.dv-footer__logo-img {
	display: block;
	width: auto;
	height: clamp(7rem, 11vw, 11rem);
	max-width: 100%;
}

/* --- Bas de page (copyright + crédit) — sur fond crème ------- */
.dv-footer-bottom {
	background-color: var(--dv-cream);
}

.dv-footer-bottom__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 100%;
	margin-inline: auto;
	padding: clamp(1rem, 2vw, 1.75rem) clamp(1.5rem, 5vw, 4rem);
}

.dv-footer-bottom__copy,
.dv-footer-bottom__credit {
	margin: 0;
	font-size: var(--dv-fs-xs);
	color: var(--dv-color-text);
}

.dv-footer-bottom__credit a {
	color: var(--dv-color-text);
	text-decoration: none;
	transition: color 0.3s ease;
}

.dv-footer-bottom__credit a:hover {
	color: var(--dv-bordeaux);
}

/* Adaptation mobile. */
@media (max-width: 760px) {
	
	.dv-footer-cta__inner {
		justify-content: center;
	}
	
	.dv-footer__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.dv-footer__col--legal,
	.dv-footer__col--logo,
	.dv-footer__col--skills {
		justify-self: center;
		text-align: center;
	}

	.dv-footer-menu,
	.dv-footer__col--skills .dv-footer-menu {
		align-items: center;
	}

	.dv-footer-bottom__inner {
		justify-content: center;
		text-align: center;
	}
}


/* --- Page contact -------------------------------------------- */
.contact-hero {
	padding: clamp(9rem, 14vw, 14rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
	text-align: center;
}

.contact-hero__inner {
	max-width: 56rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dv-space-md);
}

.contact-hero__title {
	margin: clamp(1.25rem, 2.5vw, 2.25rem) 0 0;
	font-size: var(--dv-fs-2xl);
	font-weight: var(--dv-fw-light);
	line-height: 1.18;
	color: var(--dv-color-on-dark);
}

.contact-hero__intro {
	max-width: 44rem;
	color: color-mix(in srgb, var(--dv-cream) 70%, transparent);
}

.contact-hero__intro > :last-child {
	margin-bottom: 0;
}

/* Corps : grille 2 colonnes. */
.contact-body {
	background-color: var(--dv-cream);
	padding-block: clamp(3rem, 6vw, 6rem);
}

.contact-body__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
	align-items: start;
}

.contact-body__title {
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
	font-size: var(--dv-fs-xl);
	font-weight: var(--dv-fw-light);
	color: var(--dv-color-heading);
}

.contact-body__title--light {
	color: var(--dv-color-on-dark);
}

/* Colonne formulaire (claire). */
.contact-body__form {
	color: var(--dv-color-text);
}

.contact-body__form-slot {
	min-height: 16rem;
}

.contact-body__placeholder {
	padding: 1.5rem;
	border: 1px dashed color-mix(in srgb, var(--dv-navy) 25%, transparent);
	font-size: var(--dv-fs-sm);
	color: var(--dv-color-muted);
	text-align: center;
}

/* Colonne coordonnées (sombre). */
.contact-body__info {
	padding: clamp(2rem, 4vw, 3rem);
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
}

.contact-body__info-intro {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	font-size: var(--dv-fs-sm);
	color: color-mix(in srgb, var(--dv-cream) 70%, transparent);
}

.contact-body__info-intro > :last-child {
	margin-bottom: 0;
}

/* Liste des coordonnées. */
.contact-info {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-info__item {
	display: flex;
	gap: 1.1rem;
	padding: 16px 0 0 0;
	align-items: center;
	border-top: 1px solid color-mix(in srgb, var(--dv-gold) 22%, transparent);
}

.contact-info__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.contact-info__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid color-mix(in srgb, var(--dv-gold) 50%, transparent);
	border-radius: 50%;
	color: var(--dv-gold);
}

.contact-info__icon svg {
	width: 1.2rem;
	height: 1.2rem;
}

.contact-info__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.contact-info__label {
	font-size: var(--dv-fs-xs);
	font-weight: var(--dv-fw-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dv-gold);
}

.contact-info__value {
	font-size: var(--dv-fs-sm);
	line-height: 1.5;
	color: var(--dv-color-on-dark);
	text-decoration: none;
	transition: color 0.3s ease;
}

a.contact-info__value:hover,
a.contact-info__value:focus-visible {
	color: var(--dv-gold);
}

/* Adaptation mobile. */
@media (max-width: 880px) {
	.contact-body__inner {
		grid-template-columns: 1fr;
	}
}


/* --- Page texte (honoraires, mentions légales, RGPD…) -------- */
.text-hero {
	position: relative;
	background-color: var(--dv-navy);
	color: var(--dv-color-on-dark);
	padding: clamp(9rem, 14vw, 14rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
	text-align: center;
}

.text-hero__inner {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.text-hero__title {
	font-family: var(--dv-font-heading);
	font-weight: 400;
	font-size: var(--dv-fs-3xl);
	line-height: 1.15;
	margin: 0;
	color: var(--dv-color-on-dark);
}

.text-page {
	background-color: var(--dv-cream);
	padding-block: clamp(3.5rem, 8vw, 7rem);
}

.text-page__inner {
	max-width: 760px;
	margin: 0 auto;
	padding-inline: clamp(1.5rem, 5vw, 2.5rem);
}

.text-page__content {
	color: var(--dv-navy);
	font-size: var(--dv-fs-base);
	line-height: 1.75;
}

.text-page__content > *:first-child {
	margin-top: 0;
}

.text-page__content > *:last-child {
	margin-bottom: 0;
}

.text-page__content h2 {
	font-family: var(--dv-font-heading);
	font-size: var(--dv-fs-xl);
	font-weight: 400;
	line-height: 1.25;
	margin: 2.75rem 0 1rem;
	color: var(--dv-navy);
}

.text-page__content h3 {
	font-family: var(--dv-font-heading);
	font-size: var(--dv-fs-lg);
	font-weight: 400;
	line-height: 1.3;
	margin: 2rem 0 0.75rem;
	color: var(--dv-navy);
}

.text-page__content p {
	margin: 0 0 1.25rem;
}

.text-page__content a {
	color: var(--dv-bordeaux);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.text-page__content a:hover {
	opacity: 0.7;
}

.text-page__content ul,
.text-page__content ol {
	margin: 0 0 1.5rem;
	padding-inline-start: 1.5rem;
}

.text-page__content li {
	margin-bottom: 0.5rem;
}

.text-page__content blockquote {
	border-inline-start: 3px solid var(--dv-gold);
	padding: 0.25rem 0 0.25rem 1.5rem;
	margin: 2rem 0;
	font-style: italic;
	color: color-mix(in srgb, var(--dv-navy) 80%, transparent);
}

.text-page__content hr {
	border: 0;
	height: 1px;
	background: color-mix(in srgb, var(--dv-navy) 12%, transparent);
	margin: 2.5rem 0;
}

.text-page__content strong {
	font-weight: 600;
}

.text-page__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}

.text-page__content th,
.text-page__content td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--dv-navy) 12%, transparent);
	text-align: start;
}

.text-page__content th {
	font-family: var(--dv-font-heading);
	font-weight: 400;
	color: var(--dv-navy);
}


/* -------------------------------------------------------------
   Gabarit « Page À propos » — photo à gauche, texte à droite.
   ------------------------------------------------------------- */
.about {
	background-color: var(--dv-cream);
	padding-block: clamp(3.5rem, 8vw, 7rem);
}

.about__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: stretch;
	gap: clamp(2rem, 6vw, 5rem);
	width: 100%;
	max-width: var(--dv-container);
	margin-inline: auto;
	padding-inline: var(--dv-gutter);
}

.about__media {
	position: relative;
	min-height: 520px;
}

.about__framed {
	width: 100%;
}

.about__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

.about__title {
	font-family: var(--dv-font-heading);
	font-weight: 400;
	font-size: var(--dv-fs-3xl);
	line-height: 1.15;
	margin: 0;
	color: var(--dv-navy);
}

@media (max-width: 860px) {
	.about__inner {
		grid-template-columns: 1fr;
		gap: clamp(1.75rem, 6vw, 2.5rem);
	}

	/* En une colonne, on redonne une hauteur définie à l'image. */
	.about__media {
		height: 60vh;
		min-height: 360px;
	}
}


/* =============================================================
   6. ÉTATS D'ANIMATION GSAP
   Appliqués seulement si JavaScript est actif (.gsap-ready).
   Sans JS : le contenu reste pleinement visible.
   ============================================================= */
.gsap-ready [data-animate-item],
.gsap-ready [data-animate="fade-up"],
.gsap-ready [data-animate="reveal"] {
	opacity: 0;
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.gsap-ready [data-animate-item],
	.gsap-ready [data-animate="fade-up"],
	.gsap-ready [data-animate="reveal"] {
		opacity: 1;
	}
}