/* =====================================================================
   BUREL AVOCAT — DESIGN SYSTEM
   Toutes les valeurs de design sont centralisées ici en variables CSS.
   Les sections/composants ne doivent JAMAIS coder une valeur en dur :
   ils consomment ces tokens (var(--...)).
   Source : maquette Figma "Burel Marie".
   ===================================================================== */

:root {

	/* -----------------------------------------------------------------
	   1. COULEURS — palette de marque
	   ----------------------------------------------------------------- */
	--c-bleu-fonce:      #1e2f48;   /* Bleu foncé — fonds sombres, texte */
	--c-creme:           #fbf8f4;   /* Crème — fonds clairs */
	--c-orange:          #dd7345;   /* Orange — accents, CTA, lauriers */
	--c-orange-rgb:      221, 115, 69; /* composantes RGB de l'orange (halos, ombres) */
	--c-blanc:           #ffffff;
	--c-noir:            #12181f;
	--c-peche:           #f5bca3;   /* Pêche — titres serif sur fond sombre (maquette) */
	--c-carte:           #21324c;   /* Navy des vignettes/cartes (léger contraste avec le fond) */

	/* Déclinaisons utilitaires (dérivées de la palette) */
	--c-orange-fonce:    #c85f32;   /* survol des CTA orange */
	--c-bleu-clair:      #35496b;   /* bleu intermédiaire (bordures/surfaces sombres) */
	--c-bleu-70:         rgba(30, 47, 72, 0.70);
	--c-bleu-10:         rgba(30, 47, 72, 0.10);
	--c-creme-60:        rgba(251, 248, 244, 0.60);
	--c-blanc-70:        rgba(255, 255, 255, 0.70);
	--c-blanc-15:        rgba(255, 255, 255, 0.15);

	/* -----------------------------------------------------------------
	   2. RÔLES SÉMANTIQUES — on manipule ces variables dans les composants
	   ----------------------------------------------------------------- */
	--color-bg:              var(--c-creme);        /* fond de page par défaut */
	--color-bg-dark:         var(--c-bleu-fonce);   /* sections sombres */
	--color-surface:         var(--c-blanc);        /* cartes claires */
	--color-text:            var(--c-bleu-fonce);   /* texte sur fond clair */
	--color-text-muted:      var(--c-bleu-70);      /* texte secondaire clair */
	--color-text-invert:     var(--c-blanc);        /* texte sur fond sombre */
	--color-text-invert-muted: var(--c-blanc-70);
	--color-accent:          var(--c-orange);
	--color-accent-hover:    var(--c-orange-fonce);
	--color-title-warm:      var(--c-peche);      /* titres serif chauds sur fond sombre */
	--color-border:          var(--c-bleu-10);
	--color-border-invert:   var(--c-blanc-15);

	/* -----------------------------------------------------------------
	   3. TYPOGRAPHIE
	   ----------------------------------------------------------------- */
	/* Familles */
	--font-title:  "Cormorant Garamond", "Times New Roman", Georgia, serif;
	--font-body:   "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-button: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* CTA maquette */

	/* Graisses */
	--fw-regular: 400;
	--fw-medium:  500;
	--fw-semibold:600;
	--fw-bold:    700;

	/* Échelle typographique (desktop). Titres = Cormorant, fluides via clamp. */
	--fs-display: clamp(2.75rem, 3vw, 3rem);      /* 64px — H1 héros */
	--fs-h1:      clamp(2.5rem, 1.6rem + 3vw, 3.5rem);     /* 56px */
	--fs-h2:      clamp(2rem, 1.4rem + 2.2vw, 3rem);       /* 48px — titres de section */
	--fs-h3:      clamp(1.5rem, 1.2rem + 1vw, 2rem);       /* 32px */
	--fs-h4:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);  /* 24px */
	--fs-lead:    clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 22px — chapô */
	--fs-body:    1rem;      /* 16px — texte courant */
	--fs-small:   0.75rem;  /* 14px */
	--fs-eyebrow: 0.875rem;  /* 14px — sur-titres */

	/* Interlignes */
	--lh-tight:   1.1;   /* titres */
	--lh-snug:    1.3;
	--lh-normal:  1.6;
	--lh-loose:   1.8;   /* texte courant (maquette) */

	/* Interlettrage */
	--ls-eyebrow: 0.35em;  /* ≈ 4.9px sur 14px — sur-titres MAJ */
	--ls-tight:   -0.01em;

	/* -----------------------------------------------------------------
	   4. ESPACEMENTS — échelle basée sur 8px
	   ----------------------------------------------------------------- */
	--space-2xs: 0.25rem;  /* 4  */
	--space-xs:  0.5rem;   /* 8  */
	--space-sm:  1rem;     /* 16 */
	--space-md:  1.5rem;   /* 24 */
	--space-lg:  2rem;     /* 32 */
	--space-xl:  3rem;     /* 48 */
	--space-2xl: 4rem;     /* 64 */
	--space-3xl: 6rem;     /* 96 */
	--space-4xl: 8rem;     /* 128 */

	/* Rythme vertical des sections */
	--section-padding-y: clamp(3.5rem, 2rem + 6vw, 7rem);

	/* -----------------------------------------------------------------
	   5. LAYOUT — conteneurs & grille
	   ----------------------------------------------------------------- */
	--container-max:    1280px;  /* largeur utile (1920 - marges maquette) */
	--container-wide:   1520px;
	--container-narrow: 780px;   /* blocs de texte centrés */
	--container-gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
	--grid-gap:         clamp(1.5rem, 1rem + 2vw, 3rem);

	/* -----------------------------------------------------------------
	   6. RAYONS
	   ----------------------------------------------------------------- */
	--radius-sm:   8px;
	--radius-md:   16px;
	--radius-lg:   24px;
	--radius-xl:   32px;
	--radius-pill: 999px;

	/* -----------------------------------------------------------------
	   7. OMBRES
	   ----------------------------------------------------------------- */
	--shadow-sm: 0 2px 8px rgba(30, 47, 72, 0.08);
	--shadow-md: 0 12px 32px rgba(30, 47, 72, 0.12);
	--shadow-lg: 0 24px 60px rgba(30, 47, 72, 0.18);

	/* -----------------------------------------------------------------
	   8. TRANSITIONS & Z-INDEX
	   ----------------------------------------------------------------- */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

	--z-header:  100;
	--z-overlay: 200;
	--z-modal:   300;
}


/* =====================================================================
   BASE — reset léger + mappage des tokens sur les éléments HTML
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Pas de scroll-behavior:smooth ici : il casse les mesures de ScrollTrigger
   (GSAP scrolle en interne pour mesurer le pin). Le smooth des ancres est
   géré au cas par cas si besoin. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6.5rem; /* ancres sous le header fixe */ }

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-loose);
	font-weight: var(--fw-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent); }

/* Titres — Cormorant Garamond */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-title);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	margin: 0 0 var(--space-md);
	color: inherit;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* =====================================================================
   OVERRIDE HELLO ELEMENTOR
   Le thème parent bride « .site-main », « .site-header » ET « .site-footer »
   à 500→1140px sur les pages non Elementor : on les rend pleine largeur,
   la largeur utile étant gérée par nos .container internes.
   (Sélecteurs calés pour battre la spécificité du parent.)
   ===================================================================== */
body:not([class*="elementor-page-"]) main.site-main,
body:not([class*="elementor-page-"]) .site-header:not(.dynamic-header),
body:not([class*="elementor-page-"]) .site-footer:not(.dynamic-footer) {
	max-width: none;
	width: 100%;
	padding-inline: 0;
	margin-inline: 0;
}

/* =====================================================================
   LAYOUT — conteneurs & sections
   ===================================================================== */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

/* overflow: clip (et non hidden) → clippe les débordements décoratifs SANS
   créer de conteneur de défilement, donc position: sticky reste fonctionnel. */
.section { padding-block: var(--section-padding-y); position: relative; overflow: clip; }
.section--dark  { background-color: var(--color-bg-dark); color: var(--color-text-invert); }
.section--cream { background-color: var(--color-bg); color: var(--color-text); }

/* =====================================================================
   TYPOGRAPHIE UTILITAIRE
   ===================================================================== */
.eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-accent);
	display: inline-block;
	margin-bottom: var(--space-sm);
}
.section--dark .eyebrow { color: var(--color-accent); }

.title-display { font-size: var(--fs-display); font-family: var(--font-title); line-height: var(--lh-tight); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-normal); }
.text-muted { color: var(--color-text-muted); }
.section--dark .text-muted { color: var(--color-text-invert-muted); }

/* =====================================================================
   BOUTONS — reproduction fidèle de la maquette Figma
   ===================================================================== */

/* --- Pilule orange pleine (header « contact », « Envoyer ») ---------
   Réf. Figma : fond #dd7345, radius pill, Helvetica Neue 14px MAJ,
   letter-spacing 4.9px, texte crème, hauteur ~57px. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-size: var(--fs-small);            /* 14px */
	font-weight: var(--fw-regular);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);     /* ≈ 4.9px */
	line-height: 1;
	padding: 1.3rem 2.5rem;                /* ≈ 57px de haut */
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background-color: var(--color-accent); color: var(--c-creme); }
.btn--primary:hover { background-color: var(--color-accent-hover); color: var(--c-creme); }

.btn--outline { background-color: transparent; border-color: currentColor; color: inherit; }
.btn--outline:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--c-creme); }

/* --- CTA « Prendre rendez-vous » (texte + cercle-flèche) ------------
   Réf. Figma : Montserrat 16px MAJ, letter-spacing 3.2px, pas de fond,
   cercle contour 44px avec flèche diagonale ↗. Hérite de la couleur
   du contexte (blanc sur fond sombre). */
.btn-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-lg);                  /* ~30px entre texte et cercle */
	font-family: var(--font-button);       /* Montserrat */
	font-size: 1rem;                       /* 16px */
	font-weight: var(--fw-regular);
	text-transform: uppercase;
	letter-spacing: 0.2em;                 /* 3.2px sur 16px */
	line-height: 1;
	color: inherit;
}
.btn-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.btn-cta__icon svg { width: 16px; height: 16px; display: block; }
.btn-cta:hover .btn-cta__icon {
	/* couleur de remplissage paramétrable → override sur fond orange */
	background-color: var(--btn-cta-hover-bg, var(--color-accent));
	border-color: var(--btn-cta-hover-bg, var(--color-accent));
	color: var(--btn-cta-hover-fg, var(--c-creme));
	transform: translate(2px, -2px);       /* la flèche « part » en ↗ */
}
/* Conteneur à fond orange/pêche : le survol du btn-cta se remplit en navy
   (pas orange sur orange) pour rester lisible. Les variables héritent au bouton.
   Réutilisable : ajouter .on-orange sur tout conteneur au fond orange. */
.on-orange,
.body-cta,
.apropos-engagement {
	--btn-cta-hover-bg: var(--color-bg-dark);
	--btn-cta-hover-fg: var(--color-text-invert);
}
/* Bouton dont le survol est bleu : le texte passe aussi en bleu au survol. */
.on-orange .btn-cta:hover .btn-cta__label,
.body-cta .btn-cta:hover .btn-cta__label,
.apropos-engagement .btn-cta:hover .btn-cta__label {
	color: var(--btn-cta-hover-bg);
}

/* =====================================================================
   UTILITAIRE — halo orange décoratif (réutilisable partout)
   Ajouter la classe .opacity-bg-orange sur un CONTENEUR ; un halo radial
   se dessine derrière son contenu. Paramétrable par variables (en inline
   `style="--glow-..."` ou via une classe custom) :
     --glow-size    taille du halo            (défaut clamp(320px,34vw,1000px))
     --glow-x       position horizontale      (défaut 0%   → bord gauche)
     --glow-y       position verticale        (défaut 50%  → centre)
     --glow-opacity opacité au centre         (défaut 0.5)
     --glow-rgb     couleur RGB               (défaut orange)
   Modificateurs rapides : --right / --center / --top / --bottom.
   ===================================================================== */
.opacity-bg-orange,
.glow-right,
.glow-center { position: relative; }

/* contenu au-dessus du halo */
.opacity-bg-orange > *,
.glow-right > *,
.glow-center > * { position: relative; z-index: 1; }

.opacity-bg-orange::before,
.glow-right::before,
.glow-center::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: var(--glow-y, 50%);
	left: var(--glow-x, 0%);
	width: var(--glow-size, clamp(320px, 34vw, 1000px));
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(var(--glow-rgb, var(--c-orange-rgb)), var(--glow-opacity, 0.5)), transparent 68%);
	pointer-events: none;
}

/* Classes prêtes à l'emploi — UNE seule classe suffit (aucune variable) */
.opacity-bg-orange--right,  .glow-right  { --glow-x: 100%; }               /* halo à droite */
/* Halo centré : dimensionné en hauteur de viewport pour tenir dans une
   section ~100vh sans être coupé par son overflow (s'estompe avant les bords). */
.opacity-bg-orange--center, .glow-center { --glow-x: 50%; --glow-y: 50%; --glow-size: min(88vh, 1100px); }
.opacity-bg-orange--top     { --glow-y: 0%; }
.opacity-bg-orange--bottom  { --glow-y: 100%; }

/* =====================================================================
   COURONNE DE LAURIER (décor)
   ===================================================================== */
.laurel { position: absolute; pointer-events: none; z-index: 0; line-height: 0; }
.laurel svg { width: 100%; height: auto; }
.laurel--flip svg { transform: scaleX(-1); }

/* =====================================================================
   TRANSITION DE PAGE — rideau terracotta

   Mouvement continu d'une page à l'autre : au clic le rideau MONTE depuis
   le bas (bord haut bombé qui s'aplatit) ; sur la page suivante il CONTINUE
   sa course vers le haut et sort par le plafond (bord bas qui se bombe).
   L'œil lit un seul geste ascendant à travers la navigation.

   Sécurité : la position de REPOS est déjà hors écran (translateY(-101%)).
   L'animation d'arrivée part de translateY(0) et revient à ce repos — donc
   si rien ne s'exécute (animations désactivées, CSS partiel), le rideau est
   simplement absent. Impossible de rester coincé derrière un écran plein.
   ===================================================================== */
/* Rideau de transition (sans couronne) : glissé net, fluide et rapide. */
.page-curtain {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--color-accent);
	pointer-events: none;
	transform: translateY(-101%);
	will-change: transform;
	animation: curtain-out 0.5s cubic-bezier(0.76, 0, 0.24, 1) both;
}
@keyframes curtain-out {
	from { transform: translateY(0);     border-radius: 0; }
	to   { transform: translateY(-101%); border-radius: 0 0 40% 40% / 0 0 12% 12%; }
}

/* --- Départ (au clic sur un lien interne) : le JS pose .is-entering --- */
.page-curtain.is-entering {
	pointer-events: auto;     /* absorbe les clics pendant la sortie */
	animation: curtain-in 0.4s cubic-bezier(0.76, 0, 0.24, 1) both;
}
@keyframes curtain-in {
	from { transform: translateY(101%); border-radius: 40% 40% 0 0 / 12% 12% 0 0; }
	to   { transform: translateY(0);    border-radius: 0; }
}

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

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
	position: fixed;             /* reste visible au défilement (« sticky ») */
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--z-header);
	padding-block: var(--space-md);
	transition: padding-block 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* La pilule reste centrée avec une largeur max (le header couvre toute la largeur). */
.site-header .container { max-width: 1400px; }
/* Pilule « liquid glass » (verre dépoli façon iOS) : fond translucide, flou
   d'arrière-plan, reflet supérieur et fine bordure lumineuse. */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(251, 248, 244, 0.35));
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--radius-pill);
	padding: 0.75rem 0.75rem 0.75rem 1.75rem;
	box-shadow:
		0 10px 34px rgba(30, 47, 72, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		inset 0 -1px 0 rgba(30, 47, 72, 0.04);
	transition: padding 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		background 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}
.site-header__logo img { max-height: 60px; width: auto; transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.site-header__logo { font-family: var(--font-title); font-size: var(--fs-h4); color: var(--c-bleu-fonce); }

/* --- État réduit au défilement ------------------------------------- */
.site-header.is-scrolled { padding-block: 0.5rem; }
.site-header.is-scrolled .site-header__inner {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(251, 248, 244, 0.55));
	box-shadow:
		0 6px 24px rgba(30, 47, 72, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.site-header.is-scrolled .site-header__logo img { max-height: 42px; }

/* Repli gracieux si le navigateur ne gère pas le backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header__inner { background: rgba(251, 248, 244, 0.96); }
	.site-header.is-scrolled .site-header__inner { background: rgba(251, 248, 244, 0.98); }
}

.nav-primary ul { display: flex; align-items: center; gap: var(--space-lg); }
.nav-primary a {
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-bleu-fonce);
}
.nav-primary a:hover { color: var(--color-accent); }
.nav-primary a[href="#"] { cursor: default; }

/* --- Sous-menus (déroulés au survol, desktop) + chevron --------------- */
.nav-primary .menu-item-has-children { position: relative; }
.nav-primary .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 0.45em; }

/* Chevron (caret CSS) sur les items parents */
.nav-primary .menu-item-has-children > a::after {
	content: "";
	width: 0.42em;
	height: 0.42em;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform var(--transition-base);
}
.nav-primary .menu-item-has-children:hover > a::after,
.nav-primary .menu-item-has-children:focus-within > a::after {
	transform: translateY(0.05em) rotate(-135deg);   /* pointe vers le haut */
}

/* Le sous-menu : carte blanche déroulée au survol */
.nav-primary .sub-menu {
	position: absolute;
	inset-block-start: calc(100% + 0.5rem);
	inset-inline-start: 50%;   /* centré sous le parent */
	min-width: 210px;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: var(--space-xs);
	background: var(--c-blanc);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	z-index: var(--z-overlay);
}
/* pont transparent : évite la perte de survol dans l'espace parent → menu */
.nav-primary .sub-menu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -0.5rem;
	height: 0.5rem;
}
.nav-primary .menu-item-has-children:hover > .sub-menu,
.nav-primary .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.nav-primary .sub-menu a {
	display: block;
	padding: 0.55rem 0.8rem;
	border-radius: var(--radius-sm);
	text-transform: none;      /* items de sous-menu non capitalisés */
	letter-spacing: 0;
	white-space: nowrap;
	color: var(--c-bleu-fonce);
}
.nav-primary .sub-menu a:hover { background: var(--color-bg); color: var(--color-accent); }

.site-header__cta { flex-shrink: 0; }
/* L'icône enveloppe n'apparaît qu'en version pastille (mobile). */
.header-cta__icon { display: none; }
.header-cta__icon svg { width: 20px; height: 20px; display: block; }

/* Burger (mobile) — reset complet pour neutraliser tout effet hérité de
   Hello Elementor / Elementor (fonds, bordures, ombres, focus rouge, tap). */
.nav-toggle {
	display: none;
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0;
	outline: none;
	cursor: pointer;
	padding: var(--space-xs);
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover,
.nav-toggle:focus,
.nav-toggle:active,
.nav-toggle:focus-visible {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit;
}
.nav-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--c-bleu-fonce);
	border-radius: 2px;
	margin: 5px 0;
	transition: transform var(--transition-base), opacity var(--transition-base);
}
/* Ouvert → croix (le JS bascule aria-expanded="true") */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   FOOTER — bandeau CTA + carte logo/coordonnées + colonnes de menus
   ===================================================================== */
.site-footer {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg-dark);
	color: var(--color-text-invert);
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) var(--space-lg);
}
.site-footer a { color: var(--color-text-invert-muted); }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__inner { position: relative; z-index: 1; }

/* Filigrane (couronne, bleu clair) */
.site-footer__watermark {
	width: clamp(360px, 38vw, 680px);
	top: 46%;
	left: 56%;
	transform: translate(-50%, -50%);
	opacity: 0.06;
}
.site-footer__watermark svg path { fill: var(--c-bleu-clair); }

/* Bandeau CTA */
.site-footer__cta { text-align: center; padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.site-footer__cta-title {
	font-family: var(--font-title);
	font-size: var(--fs-h2);
	color: var(--color-text-invert);
	margin: 0 0 var(--space-lg);
}
.site-footer__cta .btn-cta {
	justify-content: center;
	gap: var(--space-md);
	padding: 0.6rem 0.6rem 0.6rem 2rem;
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	color: var(--c-creme);
	box-shadow: 0 10px 28px rgba(var(--c-orange-rgb), 0.35);
	transition: background-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.site-footer__cta .btn-cta:hover {
	background-color: var(--color-accent-hover);
	color: var(--c-creme);   /* sinon .site-footer a:hover passe le libellé en orange sur orange */
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(var(--c-orange-rgb), 0.45);
	--btn-cta-hover-bg: var(--c-creme);
	--btn-cta-hover-fg: var(--color-accent-hover);
}

/* Grille principale : carte + 3 colonnes de menus */
.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(280px, 440px) repeat(3, 1fr);
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	align-items: start;
}
.site-footer__card {
	background: var(--c-blanc);
	color: var(--color-text);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.site-footer__logo img { max-height: 90px; width: auto; }
.site-footer__name { font-family: var(--font-title); font-size: var(--fs-h4); color: var(--color-text); }
.site-footer__coords { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.site-footer__coords li { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-text); }
.site-footer__coords a { color: var(--color-text); }
.site-footer__coords a:hover { color: var(--color-accent); }
.site-footer__coord-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--c-bleu-10);
	color: var(--color-accent);
}

.site-footer__col-title {
	/* même style que les sur-titres (.eyebrow), espacement resserré pour
	   que « Informations légales » tienne sur une ligne */
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-medium);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 var(--space-md);
}
.site-footer__menu { display: flex; flex-direction: column; gap: var(--space-sm); }
.site-footer__menu a { font-size: var(--fs-body); }

/* Barre du bas */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: space-between;
	margin-top: clamp(3rem, 2rem + 4vw, 5rem);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border-invert);
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	color: var(--color-text-invert-muted);
}

@media (max-width: 900px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__card { grid-column: 1 / -1; max-width: 440px; }
}
@media (max-width: 560px) {
	.site-footer__grid { grid-template-columns: 1fr; }
	.site-footer__bottom { flex-direction: column; }
}

/* =====================================================================
   ELEMENTOR : polices du kit
   Le kit Elementor (formulaire de contact) pointait vers Roboto / Roboto
   Slab, dont le chargement est coupé (inc/enqueue.php) : on redirige ses
   variables vers les polices du thème. body[…] l'emporte sur .elementor-kit-N.
   ===================================================================== */
body[class*="elementor-kit-"] {
	--e-global-typography-primary-font-family: var(--font-title);
	--e-global-typography-secondary-font-family: var(--font-title);
	--e-global-typography-text-font-family: var(--font-body);
	--e-global-typography-accent-font-family: var(--font-button);
}

/* =====================================================================
   RESPONSIVE — header
   ===================================================================== */
@media (max-width: 900px) {
	/* Ordre mobile : logo à gauche, puis, collés à droite, la pastille
	   « contact » et le burger. Le DOM garde son ordre logique (le burger reste
	   juste avant le menu qu'il commande) ; seul l'affichage est réagencé. */
	.site-header__inner {
		gap: var(--space-sm);
		padding-inline: 1rem 0.6rem;
		padding-block: 0.5rem;
	}
	.site-header__logo { order: 0; flex-shrink: 0; }   /* jamais compressé */
	.site-header__cta { order: 1; margin-inline-start: auto; }
	.nav-toggle { order: 2; display: block; }
	.nav-primary { order: 3; }

	/* Le logo paraissait petit parce qu'il était ÉCRASÉ : le libellé « Contact »
	   (pilule large) et le burger débordaient de la pilule, et `max-width: 100%`
	   rabotait l'image bien en dessous de ses 60px. La pastille ronde libère la
	   place, `flex-shrink: 0` garantit le reste. */
	.site-header__logo img { max-height: 68px; }
	.site-header.is-scrolled .site-header__logo img { max-height: 50px; }

	/* CTA « contact » réduit à une pastille ronde à enveloppe. Le libellé
	   disparaît visuellement ; le nom accessible est repris par l'aria-label
	   posé sur le lien (header.php). */
	.header-cta {
		width: 46px;
		height: 46px;
		padding: 0;
		border-radius: 50%;
	}
	.header-cta__label { display: none; }
	.header-cta__icon { display: inline-flex; }

	.nav-primary {
		position: absolute;
		inset-block-start: calc(100% + var(--space-xs));
		inset-inline: 0;
		background: var(--c-blanc);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-md);
		padding: var(--space-md);
		display: none;
	}
	.nav-primary.is-open { display: block; }
	.nav-primary ul { flex-direction: column; align-items: flex-start; gap: var(--space-md); }

	/* Sous-menus : REPLIÉS par défaut, dépliés au tap (classe .is-open sur le
	   parent, ajoutée par le JS). Transition douce en hauteur. */
	.nav-primary .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		box-shadow: none;
		background: transparent;
		padding: 0 0 0 var(--space-md);
		gap: var(--space-xs);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s ease, padding 0.35s ease;
	}
	.nav-primary .menu-item-has-children.is-open > .sub-menu {
		max-height: 70vh;
		padding: var(--space-xs) 0 var(--space-sm) var(--space-md);
	}
	.nav-primary .menu-item-has-children:hover > .sub-menu,
	.nav-primary .menu-item-has-children:focus-within > .sub-menu { transform: none; }
	.nav-primary .sub-menu::before { display: none; }
	.nav-primary .menu-item-has-children > a::after { transform: rotate(45deg); }
	.nav-primary .menu-item-has-children.is-open > a::after { transform: rotate(-135deg); }
}


/* =====================================================================
   FAQ — accordéon (home + pages catégorie « compétences » + articles)
   Chargée globalement (la FAQ n'est pas propre à la home).
   ===================================================================== */
.faq { background-color: var(--color-bg); color: var(--color-text); }
.faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}
.faq__eyebrow { color: var(--color-text); }   /* « FAQ » en foncé (maquette) */
.faq__title {
	font-family: var(--font-title);
	font-size: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
	line-height: 1.2;
	color: var(--color-text);
	margin: 0;
}

.faq__list { display: flex; flex-direction: column; gap: var(--space-md); }

/* Élément accordéon : pilule à bord orange, fond blanc.
   Le bord au repos est volontairement discret : il ne s'affirme (orange plein
   + légère ombre) qu'au survol et à l'ouverture — sinon la grille de pilules
   pleines cerclées d'orange « crie » à l'écran.
   Le rayon N'A PAS de transition CSS : il est animé en px par faq.js, sur la
   même courbe que la hauteur (voir l'en-tête du script). */
.faq-item {
	--faq-radius-open: var(--radius-lg);
	background: var(--c-blanc);
	border: 1px solid rgba(var(--c-orange-rgb), 0.34);
	border-radius: var(--radius-pill);
	transition: border-color 0.45s ease, box-shadow 0.45s ease;
}
.faq-item:hover { border-color: rgba(var(--c-orange-rgb), 0.7); }
.faq-item[open] {
	border-radius: var(--faq-radius-open);
	border-color: var(--color-accent);
	box-shadow: 0 14px 38px rgba(30, 47, 72, 0.09);
}

.faq-item__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: clamp(0.9rem, 0.6rem + 0.6vw, 1.35rem) clamp(1.25rem, 1vw + 0.75rem, 2rem);
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: inherit; }

.faq-item__q {
	flex: 1 1 auto;
	font-family: var(--font-title);
	font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.5rem);
	line-height: 1.25;
	color: var(--color-text);
}

.faq-item__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(44px, 3.4vw, 52px);
	height: clamp(44px, 3.4vw, 52px);
	border-radius: 50%;
	background: var(--color-bg-dark);
	color: var(--color-accent);
	/* même courbe et même durée que l'ouverture (faq.js) : le « + » pivote
	   exactement au rythme du dépliage, pas en deux temps. */
	transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
		background-color var(--transition-base), color var(--transition-base);
}
.faq-item__toggle svg { width: 45%; height: 45%; display: block; }
.faq-item[open] .faq-item__toggle { transform: rotate(45deg); }   /* + → × */
.faq-item__summary:hover .faq-item__toggle { background: var(--color-accent); color: var(--c-blanc); }

/* Corps (réponse) : conteneur animé en hauteur par faq.js */
.faq-item__body { overflow: hidden; }
.faq-item__answer {
	padding: 0 clamp(1.25rem, 1vw + 0.75rem, 2rem) clamp(1.1rem, 0.8rem + 0.6vw, 1.5rem);
	color: var(--color-text-muted);
	line-height: var(--lh-normal);
}

@media (max-width: 860px) {
	.faq__inner { grid-template-columns: 1fr; }
}


/* =====================================================================
   HERO COMPÉTENCE (modèle des catégories)
   Fond pêche + couronne SVG en filigrane (5 %), texte à gauche, image à droite.
   ===================================================================== */
.hero-cat {
	position: relative;
	overflow: hidden;
	background-color: var(--c-peche);
	color: var(--color-text);
}
/* Couronne de fond, opacité 5 % */
.hero-cat__laurel {
	width: clamp(480px, 52vw, 900px);
    left: 5%;
    bottom: 0;
    /* transform: translate(-50%, -50%); */
    opacity: 0.1;
}

.hero-cat__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: stretch;
	min-height: clamp(520px, 66vh, 720px);
}

.hero-cat__content {
	align-self: center;
	padding-block: clamp(8rem, 6rem + 6vw, 11rem) clamp(3rem, 2rem + 3vw, 5rem);
	/* décalage gauche divisé par 2 (aligné sur le corps de page) */
	padding-inline: calc((max(0px, (100vw - var(--container-wide)) / 2) + var(--container-gutter)) / 2) var(--space-xl);
	margin-inline-start: 0;
}

.hero-cat__breadcrumb {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}
.hero-cat__breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.hero-cat__breadcrumb a:hover { color: var(--color-accent); }
.hero-cat__breadcrumb .breadcrumb_last { color: var(--color-text); font-weight: var(--fw-medium); }

.hero-cat__eyebrow { color: var(--color-text); }   /* sur-titre en foncé (pas orange) */
.hero-cat__title {
	font-family: var(--font-title);
	font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	line-height: 1.12;
	color: var(--color-text);
	margin: 0;
}

/* Image à droite, débordant jusqu'au bord droit, coins gauches arrondis */
.hero-cat__media { position: relative; }
.hero-cat__media img,
.hero-cat__media-empty {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* border-radius: var(--radius-lg) 0 0 var(--radius-lg); */
}
.hero-cat__media-empty { background: var(--c-bleu-clair); }

@media (max-width: 900px) {
	.hero-cat__inner { grid-template-columns: 1fr; }
	.hero-cat__content {
		max-width: none;
		margin-inline-start: 0;
		padding-block: clamp(7rem, 5rem + 6vw, 9rem) var(--space-xl);
	}
	.hero-cat__media { min-height: 320px; }
	.hero-cat__media img,
	.hero-cat__media-empty { position: relative; border-radius: var(--radius-lg); }
}

/* Corps de la page compétence */
.competence-body__intro { max-width: var(--container-narrow); margin: 0 auto var(--space-2xl); font-size: var(--fs-lead); }
.competence-articles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--grid-gap);
}
.competence-article__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: var(--space-sm); }
.competence-article__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.competence-article__link:hover .competence-article__media img { transform: scale(1.04); }
.competence-article__title { font-size: var(--fs-h4); margin-bottom: var(--space-2xs); }


/* =====================================================================
   CORPS COMPÉTENCE — WYSIWYG (gauche) + blocs à liste & CTA (droite)
   Les cartes (navy, orange) débordent jusqu'au bord droit du viewport.
   ===================================================================== */
.competence-content-section { padding-block: 0px; overflow: clip; }
.competence-content {
	/* aligne le contenu gauche sur la gouttière de page (comme un .container) */
	--gx: calc(max(0px, (100vw - var(--container-wide)) / 2) + var(--container-gutter));
	--block-pad: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	/* gap: clamp(2rem, 4vw, 5.5rem); */
	align-items: start;
}
.competence-content__left { padding: var(--block-pad); color: var(--color-text); }
.competence-content__left > :first-child { margin-top: 0; }
.competence-content__left h1,
.competence-content__left h2,
.competence-content__left h3 {
	font-family: var(--font-title);
	color: var(--color-text);
	font-size: var(--fs-h3);
	line-height: 1.2;
	margin: var(--space-lg) 0 var(--space-md);
}
.competence-content__left p { color: var(--color-text-muted); line-height: var(--lh-loose); margin-bottom: var(--space-md); }
.competence-content__left a { color: var(--color-accent); text-decoration: underline; }
.competence-content__left ul { list-style: disc; padding-left: 1.25em; margin-bottom: var(--space-md); color: var(--color-text-muted); }
.competence-content__left li { margin-bottom: var(--space-2xs); }

/* Colonne droite : blocs empilés */
.competence-content__right { display: flex; flex-direction: column; gap: clamp(2rem, 3vw, 3.5rem); }

/* Bloc à liste — variante « plein » (aligné à la gouttière droite) */
.body-block {
	color: var(--color-text);
	padding: var(--block-pad);
}
.body-block__title {
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	color: var(--color-text);
	margin: 0 0 var(--space-sm);
}

/* Variante « carte navy » — borde le bord droit, coins gauches arrondis */
.body-block--card {
	background: var(--color-bg-dark);
	color: var(--color-text-invert);
	padding: var(--block-pad);
	border-radius: 0 0 0 var(--radius-lg);
}
.body-block--card .body-block__title { color: var(--color-title-warm); }

/* Liste à puces « cible » + séparateurs */
.body-list { display: flex; flex-direction: column; }
.body-list__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-md);
	align-items: start;
	padding-block: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}
.body-block--card .body-list__item { border-color: var(--color-border-invert); }
.body-list__icon { width: 24px; margin-top: 0.2em; color: inherit; }
.body-list__icon svg { width: 100%; height: auto; display: block; }
.body-list__text { margin: 0; color: inherit; font-size: var(--fs-body); line-height: var(--lh-normal); }
.body-block--card .body-list__text { color: var(--color-text-invert-muted); }
.body-block:not(.body-block--card) .body-list__text { color: var(--color-text-muted); }

/* CTA orange — borde le bord droit, coins gauches arrondis */
.body-cta {
	background: var(--color-accent);
	color: var(--color-text-invert);
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--block-pad);
}
.body-cta__title { font-family: var(--font-title); font-size: var(--fs-h2); color: var(--color-text-invert); margin: 0 0 var(--space-md); }
.body-cta__text { color: var(--c-creme); opacity: 0.9; margin-bottom: var(--space-xl); max-width: 90ch; }
.body-cta__btn {
	color: var(--color-text-invert);
	/* sur la carte orange, le hover remplit en navy (pas en orange) */
	--btn-cta-hover-bg: var(--color-bg-dark);
	--btn-cta-hover-fg: var(--color-text-invert);
}

@media (max-width: 900px) {
	.competence-content { grid-template-columns: 1fr; gap: var(--space-2xl); }
	.competence-content__left { padding-inline: var(--container-gutter); }
	.competence-content__right { padding-inline: var(--container-gutter); }
	.body-block { padding-inline: 0; }
	.body-block--card,
	.body-cta { border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); }
}


/* =====================================================================
   COMPOSANT — carrousel « carte vedette + petites »  (GLOBAL)
   Utilisé par : section Dommages (home) ET articles de compétence.
   La carte active est grande à gauche ; les flèches changent l'active :
   la suivante s'agrandit à la place de la 1re, la piste défile.
   ===================================================================== */
.dommages {
	/* dimensions des cartes (ratios maquette : 750×624 / 405×373, image = 58%) */
	--dom-gap:   clamp(1.25rem, 2.2vw, 2.75rem);
	--dom-lg-w:  clamp(300px, 45vw, 690px);
	--dom-lg-h:  clamp(340px, 40vw, 624px);
	--dom-sm-w:  clamp(210px, 24vw, 370px);
	--dom-sm-h:  clamp(280px, 24vw, 373px);
	/* min-height : une hauteur FIXE combinée à `overflow: clip` (.section)
	   rognait l'en-tête empilé + les cartes dès que l'écran était étroit. */
	min-height: 120vh;
}
.dommages__title { font-size: var(--fs-h2); color: var(--color-title-warm); }

.dommages__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--grid-gap);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border-invert);
	margin-bottom: var(--space-2xl);
}
.dommages__intro { max-width: 85ch; }
.dommages__text { margin-top: var(--space-sm); }

.dommages__nav { display: flex; gap: var(--space-sm); flex-shrink: 0; align-self: center; }
.carousel-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px; height: 62px;
	border-radius: 50%;                       /* flèches rondes (maquette) */
	border: 1px solid var(--color-border-invert);
	background: transparent;
	color: var(--color-text-invert);
	cursor: pointer;
	transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.carousel-arrow svg { width: 26px; height: 26px; }
.carousel-arrow:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--c-blanc); }
/* Swiper pose .swiper-button-disabled ET l'attribut disabled sur les <button>. */
.carousel-arrow[disabled],
.carousel-arrow.swiper-button-disabled { opacity: 0.3; pointer-events: none; }

/* Fenêtre + piste */
/* `column-gap` sur la FENÊTRE n'a aucun effet visuel (elle n'est ni flex ni
   grid) : c'est une sonde. Swiper remet le gap de la piste à zéro et gère
   l'espacement lui-même, or il lui faut une valeur en px — le JS lit donc la
   gouttière ici, où elle reste résolue quel que soit l'état du carrousel. */
.dommages__viewport { overflow: hidden; column-gap: var(--dom-gap); }
.dommages__track {
	display: flex;
	gap: var(--dom-gap);
	align-items: flex-start;                  /* cartes alignées en haut */
	transition: transform var(--transition-slow);
	will-change: transform;
}
/* Sous Swiper (classes posées par le JS), la gouttière passe par
   `spaceBetween` : un `gap` en plus fausserait ses mesures. */
.dommages__track.swiper-wrapper { gap: 0; }

/* Carte : petite par défaut, grande si active.
   Pas de transition sur width/height : la taille doit être définitive au
   moment où Swiper re-mesure sa grille (voir site.js → initCarousel).
   C'est le glissement de la piste qui porte le mouvement. */
.dommage-card {
	flex: 0 0 auto;
	width: var(--dom-sm-w);
	height: var(--dom-sm-h);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--c-carte);            /* navy des vignettes, léger contraste */
	border: 1px solid #000;                /* bordure arrondie noire 100% */
	display: flex;
	flex-direction: column;
}
.dommage-card.is-active { width: var(--dom-lg-w); height: var(--dom-lg-h); }

.dommage-card__link { display: flex; flex-direction: column; height: 100%; color: var(--color-text-invert); }
.dommage-card__media { flex: 0 0 58%; overflow: hidden; }   /* image = 58% de la hauteur */
.dommage-card__media--empty { background: var(--c-bleu-clair); }
.dommage-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.dommage-card__link:hover .dommage-card__media img { transform: scale(1.04); }
.dommage-card__title {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-title);
	font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
	color: var(--color-title-warm);
	margin: 0;
}
.dommages__empty { padding-block: var(--space-xl); }

/* Le carrousel est glissable au doigt : la fenêtre déborde volontairement de
   la gouttière droite pour montrer que « ça continue ». */
@media (max-width: 900px) {
	.dommages { min-height: 0; }
	.dommages__header { margin-bottom: var(--space-xl); }
}
@media (max-width: 700px) {
	.dommages {
		--dom-gap:   var(--space-sm);
		--dom-lg-w:  min(78vw, 340px);
		--dom-lg-h:  min(104vw, 430px);
		--dom-sm-w:  min(56vw, 240px);
		--dom-sm-h:  min(76vw, 310px);
	}
	.dommages__header { flex-direction: column; }
	.dommages__nav { align-self: flex-start; }
	.carousel-arrow { width: 52px; height: 52px; }
	.carousel-arrow svg { width: 22px; height: 22px; }
}


/* =====================================================================
   HERO variante SOMBRE (articles) + comportement sans image
   ===================================================================== */
.hero-cat--dark { background-color: var(--color-bg-dark); color: var(--color-text-invert); }
.hero-cat--dark .hero-cat__eyebrow,
.hero-cat--dark .hero-cat__title { color: var(--color-text-invert); }
.hero-cat--dark .hero-cat__breadcrumb,
.hero-cat--dark .hero-cat__breadcrumb a { color: var(--color-text-invert-muted); }
.hero-cat--dark .hero-cat__breadcrumb .breadcrumb_last { color: var(--color-text-invert); }
.hero-cat--dark .hero-cat__media img,
.hero-cat--dark .hero-cat__media-empty { border-radius: 0; }

/* Couronne BLEUE en contraste sur le navy (au lieu de l'orange) */
.hero-cat--dark .hero-cat__laurel { opacity: 1; }
.hero-cat--dark .hero-cat__laurel svg path { fill: var(--c-bleu-clair); }

/* Hero sans image → le titrage prend toute la largeur */
.hero-cat--no-image .hero-cat__inner { grid-template-columns: 1fr; }
.hero-cat--no-image .hero-cat__media { display: none; }
.hero-cat--no-image .hero-cat__content { max-width: min(1100px, 92%); padding-inline-end: var(--container-gutter); }

/* =====================================================================
   ARTICLE (single) — une seule colonne (pas de sidebar)
   ===================================================================== */
/* single.php sur une colonne (pages légales) ; l'article a une sidebar (voir .article-layout) */
.article-container { max-width: 860px; }

/* Article avec sidebar CTA sticky à droite (le modèle légal reste à 860px) */
.article-container--wide { max-width: 1200px; }
.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: start;
}
.article-layout .article-body__content { max-width: 760px; }
.article-sidebar { position: sticky; top: clamp(1.5rem, 4vw, 3rem); }

.article-body__content { color: var(--color-text); }
.article-body__content > :first-child { margin-top: 0; }
.article-body__content h2,
.article-body__content h3 {
	font-family: var(--font-title);
	color: var(--color-text);
	margin: var(--space-xl) 0 var(--space-md);
}
.article-body__content h2 { font-size: var(--fs-h3); }
.article-body__content h3 { font-size: var(--fs-h4); }
.article-body__content p { color: var(--color-text-muted); line-height: var(--lh-loose); margin-bottom: var(--space-md); }
.article-body__content a { color: var(--color-accent); text-decoration: underline; }
.article-body__content ul,
.article-body__content ol { list-style: revert; padding-left: 1.3em; margin-bottom: var(--space-md); color: var(--color-text-muted); }
.article-body__content li { margin-bottom: var(--space-2xs); }
.article-body__content img { border-radius: var(--radius-md); margin-block: var(--space-md); }

/* Carte CTA de la sidebar — pêche, en colonne (titre puis bouton) */
.article-cta {
	background: var(--c-peche);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-lg);
	/* sur pêche, le hover du bouton se remplit en navy (pas en orange) */
	--btn-cta-hover-bg: var(--color-bg-dark);
	--btn-cta-hover-fg: var(--color-text-invert);
}
.article-cta__title { font-family: var(--font-title); font-size: var(--fs-h3); color: var(--color-text); margin: 0; }
.article-cta__btn { color: var(--color-text); }

@media (max-width: 900px) {
	.article-layout { grid-template-columns: 1fr; }
	.article-layout .article-body__content { max-width: none; }
	.article-sidebar { position: static; }
}


/* =====================================================================
   PAGE CONTACT — 2 colonnes (infos / formulaire par shortcode)
   ===================================================================== */
.page-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr); /* formulaire (gauche) + liste (droite) */
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}
.page-contact__aside { max-width: 460px; }

/* Liste de coordonnées (répéteur) */
.contact-list { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.contact-list__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}
.contact-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list__label {
	font-size: var(--fs-small);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-accent);
}
.contact-list__value {
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	line-height: 1.4;
	color: var(--color-text);
}
a.contact-list__value:hover { color: var(--color-accent); }

.contact-coords { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-xl); }
.contact-coords li { display: flex; align-items: center; gap: var(--space-sm); }
.contact-coords__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	background: var(--c-bleu-10);
	color: var(--color-accent);
	font-size: 1.1rem;
}
.contact-socials { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }
.contact-socials a { font-size: var(--fs-small); text-decoration: underline; }

/* Le formulaire (shortcode) hérite d'un style de base neutre */
.page-contact__form :where(input, textarea, select) { max-width: 100%; }

@media (max-width: 900px) {
	.page-contact__grid { grid-template-columns: 1fr; }
	.page-contact__aside { max-width: none; }
}


/* =====================================================================
   COMPOSANT — « À propos » (présentation avocate)  (GLOBAL)
   Utilisé par : section À propos (home) ET page À propos.
   ===================================================================== */
.about__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	align-items: center;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	position: relative;
	z-index: 1;
}
.about__media {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 3 / 4;
}
.about__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } /* cadrage favorisant le visage */
.about__title { font-size: var(--fs-h2); margin-bottom: var(--space-md); }
.about__text { margin-bottom: var(--space-xl); }
.about__laurel { width: 50%; opacity: 0.9; }
.about__laurel--left { bottom: 0; left: 0; }
.about__laurel--right { bottom: 0; right: 0; transform: scaleX(-1); }

/* Variante inversée : portrait à droite (pour alterner d'une section à l'autre) */
.about--reverse .about__media { order: 2; }
.about--reverse .about__content { order: 1; }

.about__stats { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.stat {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
	min-width: 160px;
}
.stat__value { display: block; font-family: var(--font-title); font-size: var(--fs-h3); color: var(--color-accent); line-height: 1; }
.stat__label { display: block; font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-2xs); }

@media (max-width: 900px) {
	.about__inner { grid-template-columns: 1fr; }
	.about__media { max-width: 460px; margin-inline: auto; }
	.about--reverse .about__media { order: 1; }
	.about--reverse .about__content { order: 2; }

	/* Couronne : en une seule colonne, la section devient très haute et une
	   couronne calée dans l'angle bas-gauche (50 % de large) tombait n'importe
	   où — souvent à moitié rognée par `overflow: clip`, et à contre-emploi du
	   portrait qui est, lui, centré. On la recentre sous le contenu, plus large
	   mais nettement plus discrète : elle redevient un filigrane.
	   Le décalage bas laisse la marge nécessaire au parallaxe (±16 %, site.js). */
	.about__laurel {
		width: min(86vw, 420px);
		left: 50%;
		right: auto;
		bottom: 5%;
		transform: translateX(-50%);
		opacity: 0.28;
	}
	.about__laurel--right { transform: translateX(-50%) scaleX(-1); }
}

/* =====================================================================
   PAGE À PROPOS — parcours éditorial (design premium)
   ===================================================================== */
/* Chiffre-repère géant en « fantôme » (contour) : 01 → 04 */
.apropos-index {
	display: block;
	font-family: var(--font-title);
	font-size: clamp(3.5rem, 2rem + 7vw, 7rem);
	line-height: 0.8;
	letter-spacing: -0.02em;
	color: transparent;
	-webkit-text-stroke: 1px var(--color-accent);
	font-variant-numeric: lining-nums;
	opacity: 0.55;
	margin-bottom: var(--space-md);
}
.section--dark .apropos-index { opacity: 0.7; }

.apropos-h2 { font-size: var(--fs-h2); line-height: 1.08; margin: 0 0 var(--space-lg); }
.apropos-h2--warm { color: var(--color-title-warm); }
.apropos-prose { color: var(--color-text-muted); line-height: var(--lh-loose); font-size: var(--fs-lead); }
.apropos-prose p { margin-bottom: var(--space-md); }
.apropos-prose p:last-child { margin-bottom: 0; }
.apropos-prose h3 { font-size: var(--fs-h3); color: var(--color-text); margin: var(--space-lg) 0 var(--space-sm); }

/* --- 01 · Parcours : deux colonnes, aside collant --------------------- */
.apropos-parcours__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
	gap: clamp(2.5rem, 1.5rem + 5vw, 6rem);
	align-items: start;
}
.apropos-parcours__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	margin-top: var(--space-lg);
	font-family: var(--font-button);
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.apropos-parcours__tag::before { content: ""; width: 34px; height: 1px; background: currentColor; }
@media (min-width: 981px) {
	.apropos-parcours__aside { position: sticky; top: clamp(6rem, 4rem + 4vh, 7.5rem); }
}

/* --- 02 · Domaines : liste éditoriale pleine largeur (fond sombre) ---- */
.apropos-domaines__head { max-width: 46rem; margin-bottom: var(--space-2xl); }
.apropos-domaines__intro { color: var(--color-text-invert-muted); font-size: var(--fs-lead); max-width: 52ch; margin: var(--space-md) 0 0; }
.apropos-domaines__list { border-top: 1px solid var(--color-border-invert); }
.apropos-domaines__list li {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--space-lg);
	padding-block: clamp(1.1rem, 0.7rem + 1.2vw, 1.9rem);
	border-bottom: 1px solid var(--color-border-invert);
	color: var(--color-text-invert);
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	line-height: 1.4;
	transition: color 0.35s ease, padding-left 0.35s ease;
}
.apropos-domaines__icon { color: var(--color-accent); width: clamp(24px, 3vw, 36px); opacity: 0.45; justify-self: end; transition: opacity 0.35s ease, transform 0.35s ease; }
.apropos-domaines__icon svg { width: 100%; height: auto; display: block; }
.apropos-domaines__list li:hover { color: var(--color-title-warm); padding-left: var(--space-md); }
.apropos-domaines__list li:hover .apropos-domaines__icon { opacity: 1; transform: rotate(90deg); }
.apropos-domaines__outro { color: var(--color-text-invert-muted); max-width: 72ch; margin-top: var(--space-2xl); }

/* --- 03 · Méthode : cartes surélevées, grand chiffre ------------------ */
.apropos-methode__head { max-width: var(--container-narrow); margin-bottom: var(--space-2xl); }
.apropos-methode__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.apropos-methode__card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.apropos-methode__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-accent); }
.apropos-methode__num { font-family: var(--font-title); font-size: var(--fs-h3); color: var(--color-accent); line-height: 1.1; }
.apropos-methode__card p { color: var(--color-text-muted); line-height: var(--lh-normal); margin: 0; }

/* --- 04 · Engagement : manifeste deux colonnes (fond pêche) ----------- */
.apropos-engagement { background: var(--c-peche); overflow: hidden; }
.apropos-engagement__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
	gap: clamp(2.5rem, 1.5rem + 5vw, 6rem);
	align-items: start;
}
.apropos-engagement .apropos-index { -webkit-text-stroke-color: var(--color-bg-dark); opacity: 0.4; }
.apropos-engagement .apropos-h2 { color: var(--color-bg-dark); }
.apropos-engagement__prose { color: var(--color-text); }
.apropos-engagement__cta {
	margin-top: var(--space-xl);
	--btn-cta-hover-bg: var(--color-bg-dark);
	--btn-cta-hover-fg: var(--color-text-invert);
}

@media (max-width: 980px) {
	.apropos-parcours__grid,
	.apropos-engagement__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
	.apropos-methode__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   ANIMATIONS AU DÉFILEMENT
   Révélations, balayage des fonds de section et parallaxe sont pilotés par
   GSAP + ScrollTrigger (voir site.js → initScrollAnimations). GSAP pose les
   états initiaux inline : si GSAP ne se charge pas, rien n'est masqué.
   ===================================================================== */
:root { --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); }   /* easeOutExpo, feutré */
/* Anti-FOUC : masque les cibles tant que GSAP n'a pas pris la main. La classe
   .gsap-ready n'est posée QUE si GSAP est présent → jamais de contenu bloqué. */
.gsap-ready [data-reveal],
.gsap-ready [data-reveal-section],
.gsap-ready [data-hero] :is(.hero-cat__breadcrumb, .eyebrow, h1, h2, .hero__text, .hero__actions, .hero__media, .hero-cat__media, .laurel) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
	.gsap-ready [data-reveal],
	.gsap-ready [data-reveal-section],
	.gsap-ready [data-hero] :is(.hero-cat__breadcrumb, .eyebrow, h1, h2, .hero__text, .hero__actions, .hero__media, .hero-cat__media, .laurel) { visibility: visible !important; }
}
/* Les médias en parallaxe sont sur-cadrés pour couvrir le décalage vertical. */
.competence-article__media img { will-change: transform; }

/* =====================================================================
   MICRO-INTERACTIONS (élégantes, discrètes)
   ===================================================================== */
/* Lien de nav : soulignement animé depuis la gauche */
.nav-primary .nav-menu > .menu-item > a { position: relative; }
.nav-primary .nav-menu > .menu-item > a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.35em;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--transition-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.nav-primary .nav-menu > .menu-item > a:hover::before,
.nav-primary .nav-menu > .menu-item.current-menu-item > a::before {
	transform: scaleX(1);
	transform-origin: left;
}
/* le chevron des parents ne doit pas être « souligné » */
.nav-primary .menu-item-has-children > a::before { display: none; }

/* Cartes : léger soulèvement au survol (là où ce n'est pas déjà géré) */
.competence-article,
.dommage-card,
.stat { transition: transform 0.45s var(--reveal-ease, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 0.45s ease; }
.competence-article:hover { transform: translateY(-6px); }
.stat:hover { transform: translateY(-4px); }
/* Les images sur-cadrées « vivent » désormais par le parallaxe (translateY),
   pas par un zoom au survol → transform piloté en rAF, sans transition. */

/* Boutons pleins : léger soulèvement + ombre */
.btn--primary { transition: transform 0.35s ease, box-shadow 0.35s ease, background-color var(--transition-base); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--c-orange-rgb), 0.35); }

/* Média sur-cadré : zoom doux au survol de la figure */
.about__media, .competence-article__media { overflow: hidden; }

/* Colonnes de gauche sticky au défilement (offset = sous le header fixe) :
   contenu des catégories + aside de la FAQ. */
@media (min-width: 901px) {
	.competence-content__left,
	.faq__aside {
		position: sticky;
		top: clamp(6rem, 5rem + 3vw, 7.5rem);
		align-self: start;
	}
}


/* =====================================================================
   ARCHIVE ACTUALITÉS — grille de cartes (image + corps navy + titre pêche)
   ===================================================================== */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 colonnes desktop */
	gap: var(--grid-gap);
}
@media (max-width: 1024px) {
	.news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.news-card {
	background: var(--c-carte);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.28);
	transition: transform 0.45s var(--reveal-ease, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 0.45s ease;
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.news-card__link { display: flex; flex-direction: column; height: 100%; color: var(--color-text-invert); }
.news-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.news-card__media--empty { background: var(--c-bleu-clair); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--reveal-ease, cubic-bezier(0.16, 1, 0.3, 1)); }
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__body { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); display: flex; flex-direction: column; gap: var(--space-xs); }
.news-card__date { font-family: var(--font-button); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
.news-card__title { font-family: var(--font-title); font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); line-height: 1.15; color: var(--color-title-warm); margin: 0; }

.news-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin-top: var(--space-2xl); }
.news-pagination a,
.news-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 0.75rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-family: var(--font-button); font-size: var(--fs-small);
	color: var(--color-text);
	transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}
.news-pagination .current { background: var(--color-accent); border-color: var(--color-accent); color: var(--c-creme); }
.news-pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.news-empty { text-align: center; color: var(--color-text-muted); font-size: var(--fs-lead); padding-block: var(--space-2xl); }

@media (max-width: 640px) {
	.news-grid { grid-template-columns: 1fr; }
}


/* Carte d'article sans image */
.news-card--no-media .news-card__body { min-height: 160px; justify-content: center; }


/* =====================================================================
   MOBILE — lauriers & filigranes plus discrets (évite l'encombrement,
   moins de débordement décoratif sur petits écrans).
   ===================================================================== */
@media (max-width: 700px) {
	.hero__laurel { width: 125%; }
	.hero-cat__laurel { width: min(92vw, 380px); }
	.intro__laurel { width: min(82vw, 360px); opacity: 0.12; }
	.hero__watermark { width: min(58vw, 260px); opacity: 0.2; }
	/* .about__laurel : voir le bloc « COMPOSANT À propos » (max-width: 900px),
	   qui la recentre en filigrane sous le contenu. */
}


/* =====================================================================
   AJUSTEMENTS MOBILE (≤ 700px)
   ===================================================================== */
@media (max-width: 700px) {
	/* Header plus compact hors défilement (moins « gros ») */
	.site-header__inner { padding: 0.5rem 0.6rem 0.5rem 1.3rem; }
	.site-header__logo img { max-height: 44px; }

	/* Plus d'air entre le contenu du hero catégories et le header fixe */
	.hero-cat__content { padding-top: clamp(9.5rem, 7rem + 12vw, 11.5rem); }

	/* Espace le CTA orange (carte des pages catégorie) */
	.body-cta { margin-top: 1.5em; }

	/* Carousel articles / dommages : glissé plus doux (moins brusque) */
	.dommages__track { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
}