/* =====================================================
   THÈME ENFANT DIVI — CSS PERSONNALISÉ
   =====================================================
   Ce fichier est dédié à vos personnalisations CSS.
   Il est chargé automatiquement après le style du parent.
   Valeurs issues de l'export Adobe XD (artboard « Règles »).
   ===================================================== */


/* -----------------------------------------------------
   0. POLICES (@font-face)
   -----------------------------------------------------
   ⚠ Clarika Pro Geometric et Richmond Display sont des
   polices commerciales NON fournies dans l'export.
   Déposez les fichiers dans /divi-enfant/assets/fonts/
   puis adaptez les noms ci-dessous si besoin.
   ----------------------------------------------------- */
@font-face {
	font-family: "Clarika Pro Geometric";
	src: url("fonts/ClarikaProGeo-Rg.woff2") format("woff2"),
	     url("fonts/ClarikaProGeo-Rg.woff")  format("woff");
	font-weight: 400;          /* Regular */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Clarika Pro Geometric";
	src: url("fonts/ClarikaProGeo-Dm.woff2") format("woff2"),
	     url("fonts/ClarikaProGeo-Dm.woff")  format("woff");
	font-weight: 600;          /* Demi */
	font-style: normal;
	font-display: swap;
}

/* H1 en italique : sur la maquette, ce style est rendu
   avec Richmond Display Light Italic (le libellé XD dit
   « Clarika light italic » — divergence à confirmer). */
@font-face {
	font-family: "Richmond Display";
	src: url("fonts/RichmondDisplay-LightItalic.woff2") format("woff2"),
	     url("fonts/RichmondDisplay-LightItalic.woff")  format("woff");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

/* Richmond Display Light DROITE (non-italique) — utilisée par le H5.
   ⚠ À fournir : dépose RichmondDisplay-Light.woff2/.woff dans /assets/fonts/
   (on n'a pour l'instant que la Light Italic). */
@font-face {
	font-family: "Richmond Display";
	src: url("fonts/RichmondDisplay-Light.woff2") format("woff2"),
	     url("fonts/RichmondDisplay-Light.woff")  format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}


/* -----------------------------------------------------
   1. VARIABLES GLOBALES
   ----------------------------------------------------- */
:root {
	/* Couleurs de marque (charte RHS) */
	--brand-primary:    #902357;   /* Plum — liens actifs, titres */
	--brand-secondary:  #570029;   /* Bordeaux foncé — état survol */
	--brand-text:       #4B4846;   /* Texte courant */
	--brand-gray:       #7D7773;   /* Gris secondaire */
	--brand-burger:     #7D6A55;   /* Taupe — icône menu burger */
	--brand-bg-light:   #F4F4F4;   /* Fond clair */
	--brand-white:      #FFFFFF;

	/* Polices */
	--font-base:    "Clarika Pro Geometric", "Century Gothic", "Futura", "Segoe UI", sans-serif;
	--font-display-italic: "Richmond Display", Georgia, "Times New Roman", serif;

	/* Espacements */
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 2rem;
}


/* -----------------------------------------------------
   2. TYPOGRAPHIE
   -----------------------------------------------------
   Tailles en rem (base 16px). Interlignage = ratio issu
   de la maquette (ex. H1 : 55/60 ≈ 0.92).
   ----------------------------------------------------- */
body,
.et_pb_text,
p {
	font-family: var(--font-base);
	font-weight: 400;                /* Regular */
	font-size: 1.375rem;             /* 22px — Body */
	line-height: 1.09;               /* 24/22 */
	color: var(--brand-text);
}

h1, .et_pb_module h1 {
	font-family: var(--font-base);
	font-weight: 600;                /* Demi */
	font-size: 3.75rem;              /* 60px */
	line-height: 0.92;               /* 55/60 */
	color: var(--brand-gray);
}

/* Variante italique du H1 (display) */
h1 em,
h1 .italic,
.h1-italic {
	font-family: var(--font-display-italic);
	font-weight: 300;
	font-style: italic;
	font-size: 3.75rem;              /* 60px */
	line-height: 0.92;               /* 55/60 */
	color: var(--brand-primary);
}

/* Divi applique un padding-bas de 10px à tous les titres, qui creuse
   un écart disgracieux. On le retire pour H1 et H6 (scopé à
   #page-container : spécificité ID > règle Divi, sans !important). */
#page-container h1,
#page-container h6 {
	padding-bottom: 0;
}

h2, .et_pb_module h2 {
	font-family: var(--font-base);
	font-weight: 600;                /* Demi */
	font-size: 3.125rem;             /* 50px */
	line-height: 0.9;                /* 45/50 */
	color: var(--brand-primary);
}

h3, .et_pb_module h3 {
	font-family: var(--font-base);
	font-weight: 600;                /* Demi */
	font-size: 2.1875rem;            /* 35px */
	line-height: 0.86;               /* 30/35 */
	color: var(--brand-text);
}

h4, .et_pb_module h4 {
	font-family: var(--font-base);
	font-weight: 600;                /* Demi */
	font-size: 1.625rem;             /* 26px */
	line-height: 1;                  /* 26/26 */
	color: var(--brand-text);
	margin-bottom: 0 !important;     /* espace fixe sous le H4 — ajustable */
}

/* H5 — Richmond Display Light (droite), 60px, blanc.
   Utilisé pour le titre incrusté « A Leading Independent… ». */
h5, .et_pb_module h5 {
	font-family: "Richmond Display", Georgia, "Times New Roman", serif;
	font-weight: 300;                /* Light */
	font-style: normal;
	font-size: 3.75rem;              /* 60px */
	line-height: 1.05;
	color: var(--brand-white);
}

/* H6 — style « Fil d'Ariane » (Clarika Demi 30px, gris #7D7773) */
h6, .et_pb_module h6 {
	font-family: var(--font-base);
	font-weight: 600;                /* Demi */
	font-size: 1.875rem;             /* 30px */
	color: var(--brand-gray);
}


/* =====================================================
   3. NAVIGATION — EN-TÊTE, BURGER & MENU PLEIN ÉCRAN
   =====================================================
   Repères :
   • Le bloc « Géométrie » ci-dessous est le SEUL endroit à
     modifier pour déplacer logo, burger et menu ensemble.
   • La constante 114px = hauteur de l'icône (36px) + 78px de
     respiration. À revoir si la taille du burger change.
   ===================================================== */
/* --- 1. Géométrie de l'en-tête ----------------------- */
:root {
--header-pad-top: 76px;    /* haut du logo (desktop : posé par Divi) */
--header-gutter:  30px;    /* retrait latéral, identique à gauche et à droite */
--logo-width:     223px;
--logo-ratio:     4.459;   /* viewBox du SVG : 299.938 / 67.2656 */
--logo-height:    calc(var(--logo-width) / var(--logo-ratio));
--burger-size:    36px;    /* hauteur de l'icône */
--burger-width:   34px;    /* largeur de l'icône */
--menu-opacity:   1;    /* 1 = opaque, 0.9 = plus transparent */
/* Burger centré verticalement sur le logo, à toute largeur */
--burger-top:   calc(
var(--header-pad-top) + (var(--logo-height) - var(--burger-size)) / 2
);
--burger-right: var(--header-gutter);
}
/* Burger légèrement réduit en mobile (le centrage --burger-top suit). */
@media (max-width: 767px) {
:root {
--burger-size:  30px;    /* au lieu de 36px */
--burger-width: 28px;    /* au lieu de 34px */
}
/* Accessibilité : zone cliquable ≥ 44×44px sans agrandir l'icône.
   La boîte s'étend vers le bas et la gauche ; l'icône reste calée en
   haut à droite (top/right inchangés), donc à sa position d'origine. */
.et_header_style_fullscreen .et_pb_header_toggle.et_toggle_fullscreen_menu {
width: 44px !important;
height: 44px !important;
display: flex;
align-items: flex-start;      /* icône en haut */
justify-content: flex-end;    /* icône à droite → ne bouge pas */
}
}
/* --- 2. Logo ----------------------------------------- */
/* Supprime l'espace de texte parasite entre .logo_helper et <a> */
.logo_container {
font-size: 0;
}
/* Dimensionné par la largeur : la hauteur suit le ratio natif du SVG */
.et_header_style_fullscreen #logo,
#logo {
width: var(--logo-width) !important;
height: auto !important;
max-height: none !important;
}
#main-header,
#main-header.et-fixed-header {
box-shadow: none !important;
}
/* --- 3. En-tête tablette + mobile (≤980px) -----------
   Divi replie .logo_container à 24px et rétrécit .container
   à 80 % de la largeur : on reprend la main sur les deux. */
@media (max-width: 980px) {
:root {
--header-pad-top: clamp(20px, 4.52vw, 76px);   /* 4.52vw = proportion maquette */
--logo-width:     clamp(150px, 22.75vw, 223px);
}
.et_header_style_fullscreen .logo_container {
position: static !important;
height: auto !important;
}
#main-header .container {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding-top:   var(--header-pad-top) !important;
padding-left:  var(--header-gutter) !important;
padding-right: var(--header-gutter) !important;
}
}
/* --- 4. Icône burger ---------------------------------
   display:block est essentiel : en inline-block, la position
   verticale dépendait des métriques de police, donc du navigateur. */
.et_header_style_fullscreen .mobile_menu_bar.et_toggle_fullscreen_menu:before,
.et_slide_in_menu_container .mobile_menu_bar.et_toggle_fullscreen_menu:before,
.et_pb_fullscreen_menu_opened .et_toggle_fullscreen_menu:before {
content: "" !important;            /* supprime hamburger + croix Divi */
font-family: inherit !important;
color: transparent !important;
display: block;
width: var(--burger-width);
height: var(--burger-size);
background: url("icon-burger.svg") no-repeat center / contain;
transition: transform 0.4s ease, opacity 0.4s ease;
transform-origin: center;
}
/* Évite le double burger : bascule de l'overlay masquée menu fermé */
.et_slide_in_menu_container:not(.et_pb_fullscreen_menu_opened) .et_toggle_fullscreen_menu {
display: none;
}
/* Menu ouvert : rotation 90° + fondu */
.et_header_style_fullscreen .et_pb_fullscreen_menu_opened .et_toggle_fullscreen_menu:before,
.et_pb_fullscreen_menu_opened .et_toggle_fullscreen_menu:before {
transform: rotate(90deg) !important;
opacity: 0.3 !important;
}
/* --- 5. Position du burger ---------------------------
   Les deux états (fermé + ouvert) épinglés au même point,
   donc superposés par construction. */
.et_header_style_fullscreen .et_pb_header_toggle.et_toggle_fullscreen_menu {
position: fixed !important;
top:   var(--burger-top) !important;
right: var(--burger-right) !important;
z-index: 99999 !important;
width: var(--burger-width) !important;   /* cale la boîte sur l'icône */
transition: opacity 0.35s ease, transform 0.35s ease;
}
/* Masquage au défilement : caché en descendant, réaffiché en remontant.
   La classe « burger-hidden » est posée sur <body> par custom.js. */
body.burger-hidden .et_pb_header_toggle.et_toggle_fullscreen_menu {
opacity: 0 !important;
transform: translateY(-150%) !important;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.et_header_style_fullscreen .et_pb_header_toggle.et_toggle_fullscreen_menu {
transition: none;
}
}
.et_header_style_fullscreen .et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu {
top:   var(--burger-top) !important;
right: var(--burger-right) !important;
}
/* Décalage barre d'admin WordPress (32px, 46px sous 783px) */
body.admin-bar .et_header_style_fullscreen .et_pb_header_toggle.et_toggle_fullscreen_menu,
body.admin-bar .et_header_style_fullscreen .et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu {
top: calc(var(--burger-top) + 32px) !important;
}
@media (max-width: 782px) {
body.admin-bar .et_header_style_fullscreen .et_pb_header_toggle.et_toggle_fullscreen_menu,
body.admin-bar .et_header_style_fullscreen .et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu {
top: calc(var(--burger-top) + 46px) !important;
}
}
/* --- 6. Panneau du menu plein écran ------------------ */
.et_slide_in_menu_container {
background-color: var(--brand-white) !important;
}
/* Ne cible que l'état ouvert : à l'état fermé Divi garde opacity:0,
   donc le fondu d'ouverture reste intact. */
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: var(--menu-opacity) !important;
}
.et_slide_in_menu_container .et_pb_fullscreen_nav_container,
.et_slide_in_menu_container ul.et_mobile_menu,
.et_slide_in_menu_container ul.et_mobile_menu li {
text-align: right !important;
}
.et_slide_in_menu_container .et_pb_fullscreen_nav_container {
padding-right: 7vw;
}
.et_slide_in_menu_container ul.et_mobile_menu {
vertical-align: top !important;
}
.et_slide_in_menu_container ul.et_mobile_menu li {
border: none !important;
}
/* --- 7. Décalage du menu sous le burger --------------
   Même formule des deux côtés, mais deux mécanismes : en desktop
   le conteneur est une cellule de tableau que Divi recentre, où un
   padding-top serait réparti au lieu d'être appliqué. */
@media (min-width: 981px) {
.et_slide_in_menu_container ul.et_mobile_menu > li:first-child {
margin-top: calc(var(--header-pad-top) + 114px) !important;
}
}
@media (max-width: 980px) {
.et_header_style_fullscreen .et_slide_in_menu_container {
padding-top: calc(var(--header-pad-top) + 114px) !important;
padding-bottom: 40px !important;   /* respiration en fin de défilement */
}
}
/* --- 8. Entrées du menu ------------------------------ */
.et_slide_in_menu_container ul.et_mobile_menu li a {
font-family: var(--font-base) !important;
font-weight: 600 !important;
font-size: 2.5rem !important;             /* 40px */
line-height: 1.1 !important;
color: var(--brand-primary) !important;
padding: 0 !important;
transition: color 0.2s ease;
}
.et_slide_in_menu_container ul.et_mobile_menu li a:hover {
color: var(--brand-secondary) !important;
opacity: 1;
}
/* Page active : même teinte que le survol. -webkit-text-fill-color est
   indispensable (c'est lui qui pilote le rendu du texte du menu). */
.et_slide_in_menu_container ul.et_mobile_menu li.current-menu-item > a,
.et_slide_in_menu_container ul.et_mobile_menu li.current_page_item > a {
color: var(--brand-secondary) !important;
-webkit-text-fill-color: var(--brand-secondary) !important;
}
/* Entrées secondaires (classe .menu2 : Enquiry form, Contact us) */
.et_slide_in_menu_container ul.et_mobile_menu li.menu2 a {
font-size: 2.1875rem !important;          /* 35px */
color: var(--brand-gray) !important;
-webkit-text-fill-color: var(--brand-gray) !important;   /* pilote le rendu (bat #page-container a) */
}
.et_slide_in_menu_container ul.et_mobile_menu li:not(.menu2) + li.menu2 {
margin-top: 3rem !important;
}
@media (max-width: 980px) {
.et_slide_in_menu_container ul.et_mobile_menu li a       { font-size: 2rem !important; }     /* 32px */
.et_slide_in_menu_container ul.et_mobile_menu li.menu2 a { font-size: 1.75rem !important; }  /* 28px */
}
@media (max-width: 767px) {
.et_slide_in_menu_container .et_pb_fullscreen_nav_container { padding-right: 8vw; }
.et_slide_in_menu_container ul.et_mobile_menu li a       { font-size: 1.625rem !important; }  /* 26px */
.et_slide_in_menu_container ul.et_mobile_menu li.menu2 a { font-size: 1.375rem !important; }  /* 22px */
}
/* --- 9. Apparition en cascade ------------------------ */
@keyframes rhsFadeInMenu {
from { opacity: 0; transform: translateX(24px); }
to   { opacity: 1; transform: translateX(0); }
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened ul.et_mobile_menu > li {
animation: rhsFadeInMenu 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened ul.et_mobile_menu > li:nth-child(1) { animation-delay: 0.05s; }
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened ul.et_mobile_menu > li:nth-child(2) { animation-delay: 0.11s; }
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened ul.et_mobile_menu > li:nth-child(3) { animation-delay: 0.17s; }
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened ul.et_mobile_menu > li:nth-child(4) { animation-delay: 0.23s; }
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened ul.et_mobile_menu > li:nth-child(5) { animation-delay: 0.29s; }
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened ul.et_mobile_menu > li:nth-child(6) { animation-delay: 0.35s; }
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened ul.et_mobile_menu > li:nth-child(7) { animation-delay: 0.41s; }
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened ul.et_mobile_menu > li:nth-child(8) { animation-delay: 0.47s; }
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened ul.et_mobile_menu > li:nth-child(9) { animation-delay: 0.53s; }
@media (prefers-reduced-motion: reduce) {
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened ul.et_mobile_menu > li {
animation: none;
}
}
/* --- 10. Barre de menu desktop classique -------------
   Inutilisée aujourd'hui (en-tête en plein écran), conservée au cas où. */
#main-header .et-menu a,
#et-top-navigation .et-menu a {
font-family: var(--font-base);
color: var(--brand-burger);
transition: color 0.2s ease;
}
#main-header .et-menu a:hover,
#et-top-navigation .et-menu a:hover {
color: var(--brand-secondary);
opacity: 1;
}
#main-header .et-menu .current-menu-item > a,
#main-header .et-menu .current_page_item > a {
color: var(--brand-primary);
}


/* -----------------------------------------------------
   4. FOOTER
   ----------------------------------------------------- */
/* Personnalisations du pied de page */

/* --- Rangée footer : responsive 3 → 2 → 1 colonne ----------------
   Classe « footer-2col » à poser sur la RANGÉE du footer
   (Divi → Avancé → ID et classes CSS → Classe CSS : footer-2col).
     • > 1366px  : 3 colonnes (réglage Divi par défaut)
     • 981–1366px : 2 colonnes — les deux premières prennent la largeur
       (49% chacune, gouttière 2%), la 3e passe pleine largeur dessous
     • ≤ 980px   : 1 colonne, tout empilé
   Les colonnes de contacts restant larges, les e-mails ne sont plus
   coupés (la police mobile est déjà réduite en section 7).
   Breakpoints ajustables ci-dessous. */
@media (max-width: 1366px) {
	.footer-2col {
		flex-wrap: wrap !important;
	}
	.footer-2col > .et_pb_column {
		width: 49% !important;    /* (100% − gouttière 2%) / 2 */
	}
	.footer-2col > .et_pb_column:nth-child(3) {
		width: 100% !important;   /* 3e colonne : pleine largeur, sous les deux autres */
	}
}
@media (max-width: 980px) {
	.footer-2col > .et_pb_column {
		width: 100% !important;   /* 1 colonne : tout empilé */
	}
	/* Espacement régulier : on aligne l'écart entre blocs empilés sur
	   celui des lignes de contact (22px) au lieu du row-gap de 40px,
	   pour une liste uniforme. Ajustable. */
	.footer-2col {
		row-gap: 22px !important;
	}
}


/* -----------------------------------------------------
   5. BOUTONS, LIENS & CTA
   ----------------------------------------------------- */

/* Liens actifs.
   Divi définit une couleur de lien globale (--gcid-link-color) qui pose
   un -webkit-text-fill-color : c'est LUI qui pilote le rendu du texte et
   écrase la propriété « color ». On rétablit donc la couleur de marque en
   forçant AUSSI -webkit-text-fill-color. */
/* Scopé à #page-container : n'affecte QUE les liens du site,
   jamais la barre d'admin WordPress (#wpadminbar, hors conteneur). */
#page-container a {
	color: var(--brand-primary);
	-webkit-text-fill-color: var(--brand-primary);
	transition: color 0.2s ease;
}

/* État survol */
#page-container a:hover,
#page-container a:focus {
	color: var(--brand-secondary);
	-webkit-text-fill-color: var(--brand-secondary);
}

/* Liens DANS les titres (h1…h6) --------------------------
   Divi applique aux titres « color: inherit » ET surtout un
   « -webkit-text-fill-color » (gris), qui pilote le rendu du
   texte et écrase toute règle « color ». On rétablit donc la
   couleur de marque en forçant AUSSI -webkit-text-fill-color.
   Spécificité (0,0,2) = celle de Divi ; custom.css chargé
   après → gagne, sans !important. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: var(--brand-primary);
	-webkit-text-fill-color: var(--brand-primary);
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus {
	color: var(--brand-secondary);
	-webkit-text-fill-color: var(--brand-secondary);
}

/* Boutons Divi — module Bouton + boutons de formulaire, newsletter, CTA.
   !important : les boutons de formulaire (.et_pb_contact_submit) ont un CSS
   Divi plus prioritaire, on doit passer devant. */
.et_pb_button,
.et_pb_button.et_pb_button,
.et_pb_contact_submit,
.et_pb_newsletter_button,
.et_pb_promo_button,
.et_pb_subscribe .et_pb_button {
	font-family: var(--font-base) !important;
	font-weight: 400 !important;             /* Body — Clarika Regular */
	font-size: 1.375rem !important;          /* 22px (body) — ajustable */
	line-height: 1.1 !important;             /* interlignage resserré (texte sur 2 lignes) */
	color: var(--brand-white) !important;
	-webkit-text-fill-color: var(--brand-white) !important;   /* texte blanc : bat le fill des liens #page-container a */
	background-color: var(--brand-primary) !important;   /* plum #902357 */
	border: none !important;                 /* sans bordure */
	border-radius: 0 !important;             /* sans arrondi */
	padding: 0.6em 1em !important;           /* + d'air vertical (compense le line-height réduit), horizontal inchangé */
	transition: background-color 0.2s ease;
}

.et_pb_button:hover,
.et_pb_contact_submit:hover,
.et_pb_newsletter_button:hover,
.et_pb_promo_button:hover,
.et_pb_subscribe .et_pb_button:hover {
	color: var(--brand-white) !important;
	background-color: var(--brand-secondary) !important;  /* bordeaux #570029 (État over) */
	/* Divi élargit le padding au survol (0.7em / 2em) pour loger sa
	   flèche — qu'on masque déjà. On fige le padding à l'identique de
	   l'état normal pour empêcher le texte de bouger. */
	padding: 0.6em 1em !important;
}

/* Pas de flèche Divi au survol (bouton net comme la maquette) */
.et_pb_button:after,
.et_pb_contact_submit:after {
	display: none !important;
}

/* Champs de formulaire : Divi impose « Open Sans » aux contrôles ET aux
   libellés (qui n'héritent pas de la police du site). On applique la
   police de marque partout. !important car certains éléments (textarea
   .et_pb_contact_message, cases à cocher) ont une règle Divi plus forte. */
.et_pb_contact_form input,
.et_pb_contact_form textarea,
.et_pb_contact_form select,
.et_pb_contact_form label,
.et_pb_contact_field_checkbox {
	font-family: var(--font-base) !important;
}


/* -----------------------------------------------------
   5bis. ONGLETS « ÉQUIPE » (module Tabs → texte simple)
   -----------------------------------------------------
   Classe « team-tabs » sur le module Onglets.
   Onglets en texte : inactif gris, actif plum, survol mauve, sans cadre. */

/* Retire le cadre / fond « boîte » de Divi */
.team-tabs.et_pb_tabs,
.team-tabs .et_pb_tabs_controls,
.team-tabs .et_pb_all_tabs {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
/* .et_pb_tabs_controls::after sert À LA FOIS de clearfix ET de filet gris
   (border-top). On garde le pseudo (sinon la mise en page casse) mais on
   retire uniquement sa bordure pour supprimer le trait sous les onglets. */
.team-tabs .et_pb_tabs_controls::after {
	border-top: none !important;
}

/* Onglets = liens texte */
.team-tabs .et_pb_tabs_controls li {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 2.5rem 0.5rem 0 !important;   /* espace entre onglets */
	list-style: none !important;
}
/* Sélecteurs Divi 5 (.et_pb_tab_nav_item_link) + spécificité renforcée
   pour battre le CSS par défaut de Divi. */
.team-tabs .et_pb_tabs_controls .et_pb_tab_nav_item .et_pb_tab_nav_item_link {
	font-family: var(--font-base) !important;
	font-weight: 600 !important;            /* Clarika Demi */
	font-size: 1.375rem !important;         /* 22px — ajustable */
	color: var(--brand-gray) !important;    /* inactif : gris #7D7773 */
	padding: 0 !important;
	transition: color 0.2s ease;
}

/* Onglet actif : plum */
.team-tabs .et_pb_tabs_controls .et_pb_tab_nav_item.et_pb_tab_active .et_pb_tab_nav_item_link {
	color: var(--brand-primary) !important; /* #902357 */
}

/* Survol : mauve */
.team-tabs .et_pb_tabs_controls .et_pb_tab_nav_item .et_pb_tab_nav_item_link:hover {
	color: var(--brand-secondary) !important; /* #570029 */
}


/* -----------------------------------------------------
   5ter. IMAGES DE HAUTEUR UNIFORME (classe « img-uniform »)
   -----------------------------------------------------
   À poser sur une rangée, une section ou un module Image.
   --img-ratio    : 1 = carré (défaut), 1.4, 16/9…
   --img-position : zone gardée au recadrage (center, top…) */
.img-uniform {
	--img-ratio: 1;
	--img-position: center;
}
.img-uniform .et_pb_image > a,
.img-uniform.et_pb_image > a,
.img-uniform .et_pb_image_wrap {
	display: block;
}
.img-uniform img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--img-ratio);
	object-fit: cover;
	object-position: var(--img-position);
}


/* -----------------------------------------------------
   6. LOADER LOTTIE (intro animation) — CONSERVÉ
   ----------------------------------------------------- */

#lottie-intro-loader {
	position: fixed;
	inset: 0;
	background: var(--brand-white);   /* fond blanc : masque le site pendant l'intro */
	overflow: hidden;                 /* clippe l'animation qui remplit l'écran */
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.6s ease;
}

#lottie-intro-loader.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* Intro déjà vue récemment (classe posée en <head>, cf. functions.php) :
   on masque le loader AVANT tout affichage → aucun flash au rechargement. */
html.intro-seen #lottie-intro-loader {
	display: none !important;
}

#lottie-intro-loader lottie-player {
	/* Remplit tout l'écran : le carré de l'animation couvre le viewport
	   (100vmax = la plus grande dimension), les bords qui dépassent sont
	   clippés par overflow:hidden du loader. Ainsi la partie qui grossit
	   en fin d'animation recouvre bien tout l'écran, coins compris.
	   !important pour primer sur le style inline du markup (<head>). */
	width: 100vmax !important;
	height: 100vmax !important;
	aspect-ratio: 1 / 1;
}

/* Mobile : animation 10% plus petite (90vmax) et décalée vers la droite
   (marge plus importante à gauche) pour rééquilibrer un sujet décentré.
   translateX : positif = vers la droite ; ajuster la valeur au besoin. */
@media (max-width: 767px) {
	#lottie-intro-loader lottie-player {
		width: 90vmax !important;
		height: 90vmax !important;
		transform: translateX(3vw);
	}
}

body.has-intro-loader {
	overflow: hidden;
}


/* -----------------------------------------------------
   7. RESPONSIVE
   -----------------------------------------------------
   Réduction fluide des grandes tailles sur petits écrans.
   ----------------------------------------------------- */
@media (max-width: 980px) {
	/* Tablette */
	h1, .et_pb_module h1,
	h1 em, h1 .italic, .h1-italic { font-size: 2.75rem; }   /* 44px */
	h2, .et_pb_module h2 { font-size: 2.375rem; }            /* 38px */
	h3, .et_pb_module h3 { font-size: 1.75rem; }             /* 28px */
	h4, .et_pb_module h4 { font-size: 1.375rem; }            /* 22px */
	h5, .et_pb_module h5 { font-size: 2.75rem; }             /* 44px */
	h6, .et_pb_module h6 { font-size: 1.5rem; }              /* 24px */
}

@media (max-width: 480px) {
	/* Mobile */
	body, .et_pb_text, p { font-size: 1.125rem; }            /* 18px */
	h1, .et_pb_module h1,
	h1 em, h1 .italic, .h1-italic { font-size: 2.125rem; }   /* 34px */
	h2, .et_pb_module h2 { font-size: 1.875rem; }            /* 30px */
	h3, .et_pb_module h3 { font-size: 1.5rem; }              /* 24px */
	h4, .et_pb_module h4 { font-size: 1.25rem; }             /* 20px */
	h5, .et_pb_module h5 { font-size: 2.125rem; }            /* 34px */
	h6, .et_pb_module h6 { font-size: 1.25rem; }             /* 20px */
}


/* -----------------------------------------------------
   8. HERO / BANNIÈRE (rangée .hero-banner)
   -----------------------------------------------------
   Les 2 images latérales du hero sont des FONDS de colonnes
   SANS module : Divi les marque « vides » et applique
   .et_pb_column_empty{display:none} sous 980px → la bannière
   casse (seule la colonne texte reste).
   La rangée garde pourtant sa grille 3 colonnes à tous les
   breakpoints ; on réaffiche donc les colonnes, on réduit la
   hauteur globale de la bande (images recadrées via cover) et
   on réduit le titre central pour qu'il tienne dans la bande.
   Scopé à .hero-banner pour n'affecter que ce bloc.
   ----------------------------------------------------- */

/* Desktop uniquement (≥981px) : espace SOUS le bandeau.
   margin-bottom → les images gardent leur taille et la section suivante
   est poussée vers le bas de 100px. */
@media (min-width: 981px) {
	.hero-banner.et_pb_row {
		margin-bottom: 100px !important;
	}
	/* Titre hero (h5) : 3rem en desktop */
	.hero-banner .et_pb_text_0,
	.hero-banner .et_pb_text_0 * {
		font-size: 3rem;
		line-height: 1.15;
	}
}

/* Tablette + mobile (≤980px) : structure de la bande */
@media (max-width: 980px) {

	/* Réaffiche les colonnes-images masquées par Divi.
	   Spécificité (0,3,0) > règle Divi (0,2,0) → pas de !important. */
	.hero-banner .et_pb_column.et_pb_column_empty {
		display: flex;
	}

	/* La colonne centrale porte un margin-top:50px (inset voulu
	   sur desktop) et, ayant un contenu, ne s'étire pas seule.
	   On neutralise l'inset et on force le remplissage pour que
	   les 3 images soient alignées et de même hauteur. */
	.hero-banner .et_pb_column:not(.et_pb_column_empty) {
		margin-top: 0;
		
	}

	/* Bande compacte + titre réduit (tablette : ~260px / 18px).
	   min-height sur .hero-banner.et_pb_row (0,2,0) prime sur la
	   valeur inline de Divi. */
	.hero-banner.et_pb_row {
		min-height: 260px;
	}
	.hero-banner .et_pb_text_0 {
		padding: 16px;
	}
	.hero-banner .et_pb_text_0,
	.hero-banner .et_pb_text_0 * {
		font-size: 1.8rem;   /* tablette */
		line-height: 1.15;
	}
}

/* Mobile (≤767px) : bande plus courte + titre plus petit */
@media (max-width: 767px) {
	.hero-banner.et_pb_row {
		min-height: 200px;
	}
	.hero-banner .et_pb_text_0 {
		padding: 10px;
	}
	.hero-banner .et_pb_text_0,
	.hero-banner .et_pb_text_0 * {
		font-size: 1.5rem;   /* mobile */
		line-height: 1.15;
		justify-content: flex-end
	}
}


/* -----------------------------------------------------
   9. UTILITAIRES
   ----------------------------------------------------- */

/* Espacement interne de section (à ajouter comme classe CSS
   sur une section/ligne Divi). */
.section-texte {
	padding-bottom: 200px;
}

/* Bandeau gris — classe « bandeau-gris ».
   Se pose au choix sur la SECTION ou directement sur la LIGNE
   (le fond gris est porté par la colonne).
   La ligne fait 95 % de large et est ALIGNÉE À DROITE (marge gauche auto,
   bord droit collé au conteneur), donc elle déborde vers la gauche. Le
   texte garde un retrait intérieur de 2,5 %. L'espace vertical n'est
   ajouté que si la classe est sur la SECTION (sinon il vient du padding
   de section existant). */
.bandeau-gris.et_pb_row,
.bandeau-gris .et_pb_row {
	width: 95% !important;
	max-width: 100% !important;
	margin-left: auto !important;      /* pousse la ligne à droite (collée au bord) */
}
.bandeau-gris .et_pb_text {
	padding: 30px !important;          /* espace intérieur du bandeau */
	padding-left: 2.5% !important;     /* retrait gauche du texte (prime sur le 30px) */
}
/* Le titre <h6> porte un « padding-left: 40px » codé en dur dans le
   contenu du module. On le neutralise ici (!important requis pour battre
   un style inline) → seul le retrait de 2,5 % ci-dessus s'applique. */
.bandeau-gris h6 {
	padding-left: 0 !important;
}
.et_pb_section.bandeau-gris {
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}
@media (max-width: 767px) {
	.et_pb_section.bandeau-gris {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
	.bandeau-gris .et_pb_text {
		padding: 20px !important;
		padding-left: 5% !important;   /* prime sur le 20px */
	}
}


/* -----------------------------------------------------
   10. ANIMATIONS — apparition au scroll
   -----------------------------------------------------
   Utilisation : ajouter la classe « anim-reveal » sur une
   section, une ligne ou un module Divi
   (Avancé → ID et classes CSS → Classe CSS).
   L'élément se révèle (fondu + léger glissement vers le haut)
   quand il entre dans l'écran ; le JS ajoute « is-visible ».

   Variantes de mouvement (à combiner avec anim-reveal) :
     anim-fade   → fondu seul
     anim-left   → arrive depuis la gauche
     anim-right  → arrive depuis la droite
     anim-zoom   → léger agrandissement
   Cascade (retard d'apparition) : anim-delay-1 … anim-delay-4

   L'état masqué est conditionné par la classe « anim-on », posée sur
   <html> uniquement sur le SITE PUBLIC (voir functions.php) — jamais
   dans le Divi Builder. Ainsi les modules restent visibles pendant
   l'édition, et sans JavaScript rien n'est caché.
   prefers-reduced-motion neutralise toute animation.
   ----------------------------------------------------- */

/* État initial (site public uniquement → rien de caché dans le builder) */
.anim-on .anim-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/* État révélé */
.anim-on .anim-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Variantes de mouvement */
.anim-on .anim-reveal.anim-fade  { transform: none; }
.anim-on .anim-reveal.anim-left  { transform: translateX(-40px); }
.anim-on .anim-reveal.anim-right { transform: translateX(40px); }
.anim-on .anim-reveal.anim-zoom  { transform: scale(0.94); }

/* Cascade : retards d'apparition */
.anim-on .anim-reveal.anim-delay-1 { transition-delay: 0.1s; }
.anim-on .anim-reveal.anim-delay-2 { transition-delay: 0.2s; }
.anim-on .anim-reveal.anim-delay-3 { transition-delay: 0.3s; }
.anim-on .anim-reveal.anim-delay-4 { transition-delay: 0.4s; }

/* Accessibilité : aucune animation si l'utilisateur la refuse. */
@media (prefers-reduced-motion: reduce) {
	.anim-on .anim-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}