/* ============================================================
   T3M — UI KIT
   Variables · Typographie · Boutons · Fonds · Utilitaires
   ============================================================ */


/* ============================================================
   01. VARIABLES
   ============================================================ */
:root {
  /* Couleurs */
  --t3m-or:          #B88C36;
  --t3m-or-hover:    #9A7A2E;
  --t3m-or-clair:    #C9A44A;
  --t3m-noir:        #141414;
  --t3m-noir-doux:   #2C2B2B;
  --t3m-gris-fonce:  #444748;
  --t3m-gris:        #777777;
  --t3m-gris-clair:  #C4C7C7;
  --t3m-creme:       #E9E7E2;
  --t3m-blanc:       #FFFFFF;

  /* Typographie */
  --t3m-font-titre: 'Rubik', sans-serif;
  --t3m-font-corps: 'Open Sans', sans-serif;

  /* Espacements section */
  --t3m-pad-section:    clamp(3rem, 7vw, 6.5rem);
  --t3m-pad-section-sm: clamp(2rem, 4vw, 4rem);

  /* Container — même padding que heroGrid (2.4% = ~46px à 1920px) */
  --t3m-pad-ctn:  clamp(1.25rem, 2.4%, 2.1875rem);
  --t3m-max-w:    100%;

  /* Rayon de bordure */
  --t3m-radius-sm: 0.1875rem; /* 3px */
  --t3m-radius:    0.25rem;   /* 4px — Figma */

  /* Transition */
  --t3m-transition: 0.25s ease-out;
}


/* ============================================================
   02. RESET UNIVERSEL
   (remplace style.css — html base 16px corrige tous les rem)
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:                 16px; /* base rem standard — style.css avait 20px ce qui faussait tous les rem */
  scroll-behavior:           smooth;
  -webkit-text-size-adjust:  100%;
}

body {
  font-family:                    var(--t3m-font-corps);
  color:                          var(--t3m-noir);
  background-color:               var(--t3m-blanc);
  -webkit-font-smoothing:         antialiased;
  -moz-osx-font-smoothing:        grayscale;
  overflow-x:                     hidden;
}

body.menu-open { overflow: hidden; }

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

a {
  color:           inherit;
  text-decoration: none;
  transition:      var(--t3m-transition);
}

a:hover { text-decoration: none; }

ul, ol { list-style: none; }

/* Listes à puce carrée or — contenu WYSIWYG uniquement (front + admin,
   même feuille de style chargée dans l'éditeur via add_editor_style).
   :not([class]) exclut les <ul> structurels du thème (nav, footer, etc.)
   qui portent toujours une classe et gèrent déjà leur propre style. */
ul:not([class]) {
  margin: 0 0 1em;  /* même rythme que les paragraphes (p) autour du bloc */
}
ul:not([class]):last-child { margin-bottom: 0; }
ul:not([class]) li {
  /* Pas de flex sur le li : casse la mise en page dès qu'il contient un
     élément bloc (liste imbriquée, plusieurs paragraphes...). La puce est
     positionnée en absolu dans le padding-left à la place. */
  position:      relative;
  padding-left:  1.125rem;   /* 8px puce + 10px d'espace, comme avant */
  margin:        0 0 1rem;   /* 16px entre items — plus de respiration pour du texte multi-lignes */
  min-width:     0;             /* évite qu'un item de liste refuse de rétrécir et déborde du conteneur */
  overflow-wrap: break-word;    /* force le retour à la ligne même sur du texte collé (espaces insécables, copié-collé Word) */
}
ul:not([class]) li:last-child { margin-bottom: 0; }
ul:not([class]) li::before {
  content:          '';
  position:         absolute;
  left:             0;
  top:              0.5em;   /* recentre la puce sur la 1re ligne du texte */
  width:            0.5rem;  /* 8px */
  height:           0.5rem;  /* 8px */
  background-color: var(--t3m-or);
}
/* Puces custom : exclure les listes de Ninja Forms */
ul:not([class]) li::before { /* … inchangé … */ }

.nf-form-cont ul li::before {
  content: none;
}
svg * {
  transition: fill var(--t3m-transition), stroke var(--t3m-transition);
}

/* Derniers enfants : pas de margin résiduel */
p:last-child { margin-bottom: 0; }


/* ============================================================
   03. TYPOGRAPHIE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--t3m-font-titre);
  font-weight: 600;
  line-height: 1.1;
  color: var(--t3m-noir);
}

/* h1 95px Figma / h2 Medium 54px / h3 Regular 40px / h4 SemiBold 28px */
h1 { font-size: clamp(2.25rem, 5.5vw, 5.9375rem); font-weight: 600; line-height: 1.055; letter-spacing: -0.021em; }
h2 { font-size: clamp(1.75rem, 4.5vw, 3.375rem);  font-weight: 500; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.375rem, 3vw,  2.5rem);    font-weight: 400; line-height: 1.1; }
h4 { font-size: clamp(1.125rem, 2vw,  1.75rem);   font-weight: 600; line-height: 1.21; }
h5 { font-size: clamp(0.9rem,  1.4vw, 1.05rem);   font-weight: 600; }

p {
  font-family:   'Open Sans', sans-serif;
  font-size:     clamp(1rem, calc(2px + 1vw), 1.375rem); /* 22px max — Figma */
  line-height:   1.55;
  color:         var(--t3m-gris-fonce);
  margin-top:    0;
  margin-bottom: 1em;
}

li:not(:has(*)) {
  font-size:   clamp(1rem, calc(2px + 1vw), 1.375rem);
  line-height: 1.55;
}
p:last-child { margin-bottom: 0; }

/* Texte blanc dans sections sombres */
.t3m-on-dark p,
.t3m-on-dark h1,
.t3m-on-dark h2,
.t3m-on-dark h3,
.t3m-on-dark h4 { color: var(--t3m-blanc); }

.t3m-on-dark p { color: rgba(255,255,255,0.78); }


/* ============================================================
   04. BOUTONS
   ============================================================ */
.btn-t3m {
  display:         inline-block;
  padding:         1.25rem 2.1875rem; /* 20px 35px — Figma */
  font-family:     var(--t3m-font-titre);
  font-size:       1.0625rem;         /* 17px — Figma */
  font-weight:     400;               /* Regular — Figma */
  text-transform:  uppercase;
  letter-spacing:  0.0625rem;         /* 1px — Figma */
  text-decoration: none;
  cursor:          pointer;
  border:          2px solid transparent;
  border-radius:   0.25rem;           /* 4px — Figma */
  line-height:     1;
  transition:      background-color var(--t3m-transition),
                   border-color     var(--t3m-transition),
                   color            var(--t3m-transition);
}

/* Or — primaire */
.btn-t3m-or {
  background-color: var(--t3m-or);
  border-color:     var(--t3m-or);
  color:            var(--t3m-noir);
}
.btn-t3m-or:hover {
  background-color: var(--t3m-or-hover);
  border-color:     var(--t3m-or-hover);
  color:            var(--t3m-blanc);
}

/* Outline blanc — secondaire sur fond sombre */
.btn-t3m-outline {
  background-color: transparent;
  border-color:     var(--t3m-blanc);
  color:            var(--t3m-blanc);
}
.btn-t3m-outline:hover {
  background-color: var(--t3m-blanc);
  color:            var(--t3m-noir);
}

/* Outline or — secondaire sur fond clair */
.btn-t3m-outline-or {
  background-color: transparent;
  border-color:     var(--t3m-or);
  color:            var(--t3m-or);
}
.btn-t3m-outline-or:hover {
  background-color: var(--t3m-or);
  border-color:     var(--t3m-or);
  color:            var(--t3m-noir);
}

/* Noir */
.btn-t3m-noir {
  background-color: var(--t3m-noir);
  border-color:     var(--t3m-noir);
  color:            var(--t3m-blanc);
}
.btn-t3m-noir:hover {
  background-color: var(--t3m-or);
  border-color:     var(--t3m-or);
  color:            var(--t3m-noir);
}

/* Groupe boutons côte à côte */
.t3m-btns {
  display:    flex;
  flex-wrap:  wrap;
  gap:        1rem;
  align-items: center;
}


/* ============================================================
   05. FONDS DE SECTION
   ============================================================ */
.bg-t3m-noir       { background-color: var(--t3m-noir); }
.bg-t3m-noir-doux  { background-color: var(--t3m-noir-doux); }
.bg-t3m-or         { background-color: var(--t3m-or); }
.bg-t3m-creme      { background-color: var(--t3m-creme); }
.bg-t3m-blanc      { background-color: var(--t3m-blanc); }
.bg-t3m-gris-clair { background-color: var(--t3m-gris-clair); }


/* ============================================================
   06. COULEURS DE TEXTE
   ============================================================ */
.t3m-text-or    { color: var(--t3m-or) !important; }
.t3m-text-noir  { color: var(--t3m-noir) !important; }
.t3m-text-blanc { color: var(--t3m-blanc) !important; }
.t3m-text-gris  { color: var(--t3m-gris) !important; }


/* ============================================================
   07. LAYOUT — CONTAINER & SECTION
   ============================================================ */

/* Wrapper centré avec padding latéral */
.t3m-wrap {
  width:         100%;
  max-width:     var(--t3m-max-w);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--t3m-pad-ctn);
  padding-right: var(--t3m-pad-ctn);
}

/* Wrapper pleine largeur (sans max-width) */
.t3m-wrap-full {
  width:         100%;
  padding-left:  var(--t3m-pad-ctn);
  padding-right: var(--t3m-pad-ctn);
}

/* Section standard */
.t3m-section {
  width:          100%;
  display:        block;
  padding-top:    var(--t3m-pad-section);
  padding-bottom: var(--t3m-pad-section);
}

/* Section compacte */
.t3m-section-sm {
  padding-top:    var(--t3m-pad-section-sm);
  padding-bottom: var(--t3m-pad-section-sm);
}

/* Section sans padding haut */
.t3m-section-no-top    { padding-top:    0; }
/* Section sans padding bas */
.t3m-section-no-bottom { padding-bottom: 0; }


/* ============================================================
   08. GRILLE — compatibilité masterCSS
   Classes de largeur utilisables dans les templates PHP.
   Définies ICI (tôt dans la cascade) pour que les composants
   qui suivent puissent surcharger display sans !important.
   ============================================================ */

/* Padding latéral standard T3M — même que .t3m-wrap */
.padingSide {
  padding-left:  var(--t3m-pad-ctn) !important;
  padding-right: var(--t3m-pad-ctn) !important;
}

/* Colonnes (inline-block, vertical-align: top) */
.d-full { display: inline-block; width: 100%;     vertical-align: top; }
.d-1-2  { display: inline-block; width: 50%;      vertical-align: top; }
.d-1-3  { display: inline-block; width: 33.333%;  vertical-align: top; }
.d-2-3  { display: inline-block; width: 66.666%;  vertical-align: top; }
.d-1-4  { display: inline-block; width: 25%;      vertical-align: top; }
.d-3-4  { display: inline-block; width: 75%;      vertical-align: top; }
.d-1-5  { display: inline-block; width: 20%;      vertical-align: top; }
.d-2-5  { display: inline-block; width: 40%;      vertical-align: top; }
.d-3-5  { display: inline-block; width: 60%;      vertical-align: top; }
.d-4-5  { display: inline-block; width: 80%;      vertical-align: top; }
.d-1-6  { display: inline-block; width: 16.666%;  vertical-align: top; }
.d-5-6  { display: inline-block; width: 83.333%;  vertical-align: top; }
.d-5-12 { display: inline-block; width: 41.666%;  vertical-align: top; }
.d-7-12 { display: inline-block; width: 58.333%;  vertical-align: top; }

/* Tablette — forcer pleine largeur (préfixe th-) */
@media (max-width: 1024px) {
  .th-full { display: block !important; width: 100% !important; }
  /* .formFaqColSide reste flex pour garder le gap FAQ/CTA (sinon .th-full
     les colle l'un sur l'autre, display:block ignore le gap) */
  .formFaqColSide.th-full { display: flex !important; }
}

/* Mobile — forcer pleine largeur (préfixe m-) */
@media (max-width: 768px) {
  .m-full { display: block !important; width: 100% !important; }
}


/* ============================================================
   09. OVERLAY IMAGE
   ============================================================ */
.t3m-overlay {
  position: relative;
  overflow: hidden;
}
.t3m-overlay::before {
  content:          "";
  position:         absolute;
  inset:            0;
  background-color: rgba(20, 20, 20, 0.55);
  z-index:          1;
  pointer-events:   none;
}
.t3m-overlay > * { position: relative; z-index: 2; }

/* Overlay léger */
.t3m-overlay-light::before { background-color: rgba(20, 20, 20, 0.35); }

/* Overlay fort */
.t3m-overlay-dark::before  { background-color: rgba(20, 20, 20, 0.70); }


/* ============================================================
   09. SÉPARATEUR / ACCENT OR
   ============================================================ */
.t3m-divider {
  display:          block;
  width:            6.25rem;  /* 100px — Figma */
  height:           0.375rem; /* 6px   — Figma */
  background-color: var(--t3m-or);
  border-radius:    0.25rem;
  margin-bottom:    1.25rem;
}
.t3m-divider--center {
  margin-left:  auto;
  margin-right: auto;
}


/* ============================================================
   10. ICONES
   ============================================================ */
.t3m-icon-or   { color: var(--t3m-or); }
.t3m-icon-blanc { color: var(--t3m-blanc); }


/* ============================================================
   11. IMAGE COUVERTURE
   ============================================================ */
.t3m-img-cover {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Ratio images */
.t3m-ratio {
  position:       relative;
  overflow:       hidden;
  width:          100%;
}
.t3m-ratio--16-9  { padding-top: 56.25%; }
.t3m-ratio--4-3   { padding-top: 75%; }
.t3m-ratio--1-1   { padding-top: 100%; }
.t3m-ratio--3-2   { padding-top: 66.66%; }

.t3m-ratio > img,
.t3m-ratio > .t3m-img-cover {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  object-fit: cover;
}


/* ============================================================
   12. GRILLE FLEX T3M
   ============================================================ */
.t3m-row {
  display:   flex;
  flex-wrap: wrap;
}

.t3m-row--gap-sm { gap: 1rem; }
.t3m-row--gap    { gap: 2rem; }
.t3m-row--gap-lg { gap: 3rem; }

.t3m-row--center  { justify-content: center; }
.t3m-row--between { justify-content: space-between; }
.t3m-row--align-c { align-items: center; }

/* Colonnes */
.t3m-col-1-2 { width: 50%; }
.t3m-col-1-3 { width: 33.3333%; }
.t3m-col-2-3 { width: 66.6666%; }
.t3m-col-1-4 { width: 25%; }
.t3m-col-3-4 { width: 75%; }
.t3m-col-full { width: 100%; }


/* ============================================================
   13. HEADER
   ============================================================ */

/* --- Top bar (fond or) --- */
.topBar {
  position:         relative;
  z-index:          999;
  width:            100%;
  background-color: var(--t3m-or);
  padding:          0.3125rem 0; /* 5px — Figma py-[5px] */
}

.topBarInner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
}

/* RS gauche */
.topBarRs {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
}

.topBarRs a {
  color:       var(--t3m-noir);
  font-size:   0.9375rem;
  line-height: 1;
  transition:  opacity var(--t3m-transition);
}
.topBarRs a:hover { opacity: 0.65; }

/* Droite : nav contact + tel */
.topBarRight {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
}

.topBarNav {
  display:     flex;
  align-items: center;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.topBarNav li a {
  font-family:    var(--t3m-font-titre);
  font-size:      0.9375rem;
  font-weight:    400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--t3m-noir);
  text-decoration: none;
  transition:     opacity var(--t3m-transition);
}
.topBarNav li a:hover { opacity: 0.65; }

.topBarTel {
  font-family:    var(--t3m-font-titre);
  font-size:      0.9375rem;
  font-weight:    700;
  letter-spacing: 0.04em;
  color:          var(--t3m-noir);
}
.topBarTel p  { color: var(--t3m-noir); font-size: inherit; font-weight: inherit; margin-bottom: 0; line-height: 1; }
.topBarTel a  { color: var(--t3m-noir); text-decoration: none; font-family: var(--t3m-font-titre);}
.topBarTel a:hover { opacity: 0.65; }


/* Texte accessible pour lecteurs d'écran uniquement (boutons flèche des sous-menus) */
.screen-reader-text {
  position: absolute !important;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0, 0, 0, 0);
  white-space: nowrap;
  border:   0;
}


/* --- Header principal ---
   Reste en flux normal.
   Le hero remontera derrière lui avec margin-top négatif.         */
.siteHeader {
  width:            100%;
  padding:          2.1875rem 0 1.25rem; /* 35px top / 20px bottom — Figma */
  position:         relative;
  z-index:          100;
}

/* Variable utile pour le hero — topBar (~26px) + siteHeader (~146px) */
:root { --t3m-header-height: 10.75rem; } /* 172px */

.headerInner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             2rem;
}


/* --- Logo --- */
.headerLogo a {
  display:     block;
  line-height: 1;
}

.headerLogo { flex-shrink: 0; }

.headerLogo img,
.headerLogo .siteLogo,
.headerLogo .custom-logo {
  max-height: clamp(2.75rem, 5vw, 5.625rem); /* 44px -> 90px — rétrécit pour laisser de la place au nav */
  width:      auto;
  display:    block;
}

.headerSiteName {
  font-family:    var(--t3m-font-titre);
  font-size:      1.75rem;
  font-weight:    800;
  color:          var(--t3m-blanc);
  text-transform: uppercase;
}


/* --- Nav desktop --- */
.headerNav {
  flex:            1;
  min-width:       0;
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
  gap:             clamp(0rem, 0.8vw, 0.5rem);
}

.navMenu {
  display:     flex;
  flex-wrap:   nowrap;
  justify-content: flex-end;
  align-items: center;
  gap:         0;
  min-width:   0;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.navMenu li { position: relative; }

.navMenu li a {
  display:         block;
  padding:         0.5em clamp(0rem, 0.9vw, 1.25em);
  font-family:     'Rubik', sans-serif;
  font-size:       clamp(0.5rem, 0.75vw + 0.35rem, 0.9375rem); /* 8px -> 15px */
  font-style:      normal;
  font-weight:     400;
  line-height:     1.0667;      /* 16/15 */
  letter-spacing:  clamp(0rem, 0.08vw, 0.0625rem);
  text-transform:  uppercase;
  text-align:      center;
  color:           #FFF;
  text-decoration: none;
  white-space:     nowrap;
  transition:      color var(--t3m-transition);
}

.navMenu li a:hover,
.navMenu li.current-menu-item > a,
.navMenu li.current-menu-ancestor > a { color: var(--t3m-or); }

/* Sous-menu */
.navMenu .sub-menu {
  position:   absolute;
  top:        calc(100% + 0.25rem);
  left:       0;
  min-width:  200px;
  background: var(--t3m-noir-doux);
  opacity:    0;
  visibility: hidden;
  transform:  translateY(-4px);
  transition: opacity var(--t3m-transition), visibility var(--t3m-transition), transform var(--t3m-transition);
  z-index:    10;
  list-style: none;
  padding:    0.5rem 0;
  margin:     0;
}

.navMenu .sub-menu li a { padding: 0.5em 1.25em; font-size: 0.75rem; }

/* Item avec enfants : lien + bouton flèche côte à côte */
.navMenu li.menu-item-has-children { display: flex; align-items: center; }

/* Déclenchement du sous-menu : survol souris, focus clavier, ou clic (tactile) */
.navMenu li.menu-item-has-children:hover > .sub-menu,
.navMenu li.menu-item-has-children:focus-within > .sub-menu,
.navMenu li.menu-item-has-children.isOpen > .sub-menu {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}

/* Sous-menu imbriqué (niveau 2+) : s'ouvre vers la droite plutôt que de s'empiler */
.navMenu .sub-menu .sub-menu {
  top:         0;
  left:        100%;
  margin-left: 0.25rem;
}

.navMenu .sub-menu .subMenuToggle { margin-left: -0.75em; }

/* Bouton flèche du sous-menu (desktop) */
.navMenu .subMenuToggle {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.75em;
  height:          1.75em;
  margin-left:     -1.25em;
  background:      none;
  border:          none;
  color:           var(--t3m-blanc);
  cursor:          pointer;
  padding:         0;
  flex-shrink:     0;
}
.navMenu li a:hover ~ .subMenuToggle,
.navMenu li.current-menu-item .subMenuToggle,
.navMenu li.current-menu-ancestor .subMenuToggle { color: var(--t3m-or); }

.navMenu .subMenuToggleIcon {
  display:    block;
  width:      0.55em;
  height:     0.55em;
  border-right:  2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform:  rotate(45deg);
  transition: transform var(--t3m-transition);
}

.navMenu .subMenuToggle[aria-expanded="true"] .subMenuToggleIcon { transform: rotate(-135deg); }


/* CTAs nav — ajouter classes via WP Admin > Menus */
/* "navCtaOr" → bouton or plein */
.navMenu .navCtaOr > a {
  background-color: var(--t3m-or);
  color:            var(--t3m-noir) !important;
  padding:          1rem clamp(0.375rem, 1vw, 1.25rem);
  border-radius:    0.25rem;           /* 4px — Figma */
  margin-left:      clamp(0rem, 0.6vw, 0.75rem);
  font-weight:      400;               /* Regular — Figma */
  transition:       background-color var(--t3m-transition), color var(--t3m-transition);
}
.navMenu .navCtaOr > a:hover {
  background-color: var(--t3m-or-hover);
  color:            var(--t3m-noir) !important;
}

/* "navCtaOutline" → bouton outline or, texte blanc */
.navMenu .navCtaOutline > a {
  border:           1px solid var(--t3m-or); /* Figma : border-1 */
  color:            var(--t3m-blanc) !important;
  padding:          1rem clamp(0.375rem, 1vw, 1.25rem);
  border-radius:    0.25rem;                 /* 4px — Figma */
  margin-left:      clamp(0.25rem, 0.6vw, 0.25rem);
  font-weight:      400;                     /* Regular — Figma */
  transition:       background-color var(--t3m-transition), color var(--t3m-transition), border-color var(--t3m-transition);
}
.navMenu .navCtaOutline > a:hover {
  background-color: var(--t3m-or);
  color:            var(--t3m-noir) !important;
}


/* --- Hamburger --- */
.hamburgerBtn {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           40px;
  height:          40px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         0;
  flex-shrink:     0;
}

.hamburgerBar {
  display:          block;
  width:            24px;
  height:           2px;
  background-color: var(--t3m-blanc);
  border-radius:    1px;
  transition:       transform 0.3s ease, opacity 0.3s ease;
}

.hamburgerBtn[aria-expanded="true"] .hamburgerBar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburgerBtn[aria-expanded="true"] .hamburgerBar:nth-child(2) { opacity: 0; }
.hamburgerBtn[aria-expanded="true"] .hamburgerBar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* --- Overlay mobile --- */
.mobileOverlay {
  display:        none;
  position:       fixed;
  inset:          0;
  background:     rgba(20, 20, 20, 0.60);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index:        920;
  opacity:        0;
  transition:     opacity 0.3s ease-out;
  pointer-events: none;
}
.mobileOverlay.isVisible {
  opacity:        1;
  pointer-events: auto;
}


/* --- Drawer mobile --- */
.mobileMenu {
  position:       fixed;
  top:            0;
  right:          0;
  width:          min(85vw, 360px);
  height:         100vh;
  background:     var(--t3m-noir);
  z-index:        930;
  transform:      translateX(100%);
  transition:     transform 0.3s ease-out;
  overflow-y:     auto;
  /* Padding-top plus grand : laisse la place au X (position fixe, calqué
     sur le hamburger dans le header) pour qu'il ne chevauche pas le premier
     item du menu. */
  padding:        7rem 1.5rem 2rem;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

.mobileMenu.isOpen { transform: translateX(0); }

/* Bouton sorti du <nav id="mobileMenu"> (qui a un transform : cela créerait
   un nouveau contexte de positionnement et casserait le "position: fixed"
   ci-dessous). Position calquée en JS sur celle du hamburger (main.js) :
   le X apparaît exactement à la place du burger, sans saut visuel. */
.mobileMenuClose {
  position:        fixed;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  background:      none;
  border:          none;
  color:           var(--t3m-blanc);
  font-size:       2rem;
  cursor:          pointer;
  line-height:     1;
  padding:         0;
  z-index:         940; /* au-dessus du drawer .mobileMenu (930) */
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.2s ease-out, color var(--t3m-transition);
}

.mobileMenuClose.isVisible {
  opacity:        1;
  pointer-events: auto;
}
.mobileMenuClose:hover { color: var(--t3m-or); }

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

.mobileNavMenu li { border-bottom: 1px solid rgba(255,255,255,0.08); }

.mobileNavMenu li a {
  display:         block;
  padding:         0.85rem 0;
  font-family:     var(--t3m-font-titre);
  font-size:       0.95rem;
  font-weight:     600;
  text-transform:  uppercase;
  letter-spacing:  0.06em;
  color:           var(--t3m-blanc);
  text-decoration: none;
  transition:      color var(--t3m-transition);
  border-radius: 4px;
}

.mobileNavMenu li a:hover,
.mobileNavMenu li.current-menu-item > a { color: var(--t3m-or); }

.mobileNavMenu .sub-menu {
  display:    none;
  list-style: none;
  padding:    0 0 0.5rem 1rem;
  margin:     0;
}
.mobileNavMenu .menu-item-has-children.isActive .sub-menu { display: block; }
.mobileNavMenu .sub-menu li { border-bottom: none; }
.mobileNavMenu .sub-menu li a { font-size: 0.85rem; padding: 0.4rem 0; color: rgba(255,255,255,0.65); }
.mobileNavMenu .sub-menu li a:hover { color: var(--t3m-or); }

/* Item avec enfants : lien + bouton flèche sur la même ligne, sous-menu en pleine largeur en dessous */
.mobileNavMenu li.menu-item-has-children {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
}
.mobileNavMenu li.menu-item-has-children > a  { flex: 1 1 auto; border-bottom: none; }
.mobileNavMenu li.menu-item-has-children > .sub-menu { flex-basis: 100%; }

/* Sous-menu imbriqué (niveau 2+) : indentation supplémentaire */
.mobileNavMenu .sub-menu .sub-menu { padding-left: 1rem; }

/* Bouton flèche du sous-menu (mobile) — cible tactile 44px */
.mobileNavMenu .subMenuToggle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           2.75rem;
  height:          2.75rem;
  background:      none;
  border:          none;
  color:           var(--t3m-blanc);
  cursor:          pointer;
  padding:         0;
  flex-shrink:     0;
}
/* Chevron fait de 2 barres qui se rejoignent pile au centre du bouton :
   à l'ouverture on inverse juste le sens (scaleY autour de ce même centre),
   donc la pointe de la flèche reste au même endroit — seul le sens change. */
.mobileNavMenu .subMenuToggleIcon {
  position:   relative;
  display:    block;
  width:      0.7em;
  height:     0.7em;
  transition: transform var(--t3m-transition);
}
.mobileNavMenu .subMenuToggleIcon::before,
.mobileNavMenu .subMenuToggleIcon::after {
  content:    "";
  position:   absolute;
  top:        50%;
  left:       50%;
  width:      0.5em;
  height:     2px;
  background: currentColor;
}
.mobileNavMenu .subMenuToggleIcon::before { transform: translate(-75%, -50%) rotate(45deg); }
.mobileNavMenu .subMenuToggleIcon::after  { transform: translate(-25%, -50%) rotate(-45deg); }

.mobileNavMenu .subMenuToggle[aria-expanded="true"] .subMenuToggleIcon { transform: scaleY(-1); }


/* CTAs dans le menu mobile */
.mobileNavMenu .navCtaOr {
  border-bottom: none;
  margin-top:    0.75rem;
}
.mobileNavMenu .navCtaOr > a {
  background-color: var(--t3m-or);
  color:            var(--t3m-noir) !important;
  text-align:       center;
  padding:          0.75rem 1rem;
}
.mobileNavMenu .navCtaOr > a:hover { background-color: var(--t3m-or-hover); }

.mobileNavMenu .navCtaOutline {
  border-bottom: none;
  margin-top:    0.5rem;
}
.mobileNavMenu .navCtaOutline > a {
  border:       2px solid var(--t3m-or);
  color:        var(--t3m-or) !important;
  text-align:   center;
  padding:      0.65rem 1rem;
}
.mobileNavMenu .navCtaOutline > a:hover { background-color: var(--t3m-or); color: var(--t3m-noir) !important; }

.mobileTel {
  border-top:  1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
}
.mobileTel p { color: rgba(255,255,255,0.65); font-size: 0.875rem; margin-bottom: 0; }
.mobileTel a { color: var(--t3m-or); }

.mobileRs { display: flex; gap: 1rem; }
.mobileRs a { color: rgba(255,255,255,0.55); font-size: 1.1rem; }
.mobileRs a:hover { color: var(--t3m-or); }

body.menuOpen { overflow: hidden; }


/* ============================================================
   13b. ENTÊTE PAGE INTÉRIEURE
   Bannière pleine largeur — image de fond + voile sombre.
   Remonte derrière le .siteHeader via margin-top négatif
   (même technique que .heroSection, réutilise .heroSurtitre/
   .heroTitre/.heroBtns pour la typo).
   ============================================================ */

.pageHeaderSection {
  width:               100%;
  background-color:    var(--t3m-noir);
  background-size:     cover;
  background-position: center;
  margin-top:          calc(-1 * var(--t3m-header-height));
  position:            relative;
  z-index:             0;
}

/* Overlay sombre — rgba(28,27,27,0.8) — Figma */
.pageHeaderSection::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background-color: rgba(28, 27, 27, 0.80);
  z-index:          1;
  pointer-events:   none;
}

/* Dégradé haut/bas — Figma */
.pageHeaderSection::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.70) 0%,
    rgba(0, 0, 0, 0)    50%,
    rgba(0, 0, 0, 0.70) 100%
  );
  z-index:        1;
  pointer-events: none;
}

.pageHeaderInner {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  /* padding-top = hauteur du header + respiration Figma (60px) */
  padding: calc(var(--t3m-header-height) + clamp(2rem, 4vw, 3.75rem)) clamp(1.25rem, 2.4%, 2.1875rem) clamp(2rem, 4vw, 3.75rem);
  position:        relative;
  z-index:         2; /* au-dessus des overlays ::before / ::after */
}

.pageHeaderDesc {
  max-width:     57.1875rem; /* 915px — Figma */
  margin-bottom: 1.25rem;    /* 20px — Figma gap */
}

.pageHeaderDesc p {
  font-family: 'Open Sans', sans-serif;
  color:       var(--t3m-blanc);
  margin:      0 0 1.25rem;
}
.pageHeaderDesc p:last-child { margin-bottom: 0; }


/* ============================================================
   13c. AVANTAGES — grille de cartes bordées (icône + titre + texte)
   ============================================================ */

.avantagesSection {
  width:          100%;
  background-color: var(--t3m-blanc);
  padding-top:    clamp(4rem, 8.5vw, 7.5rem); /* 120px max — symétrique au bottom */
  padding-bottom: clamp(4rem, 8.5vw, 7.5rem); /* 120px max — Figma */
}

.avantagesHeader { margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }

.avantagesTitre {
  font-family:    var(--t3m-font-titre);
  font-size:      clamp(2rem, calc(1.25rem + 2.2vw), 3.375rem); /* 54px max — progression plus fluide (comme .heroTitre/p) */
  font-weight:    500;
  color:          var(--t3m-noir);
  line-height:    1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom:  1.25rem;
}

.avantagesLigne {
  display:          block;
  width:            6.25rem;
  height:           0.375rem;
  background-color: var(--t3m-or);
  border-radius:    0.25rem;
}

.avantagesGrid {
  display:               grid;
  grid-template-columns: repeat(var(--avantages-count, 5), 1fr); /* s'ajuste selon le nombre d'avantages (max 6) */
  gap:                   0.625rem;
}

.avantageCard {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  border:         1px solid #737373;
  border-radius:  0.25rem;
  padding:        clamp(1.5rem, 3vw, 2.1875rem); /* 35px max — Figma */
}

.avantageIcon {
  margin-bottom: 2.1875rem; /* 35px — Figma */
  font-size:     2.1875rem; /* 35px — Figma */
  line-height:   1;
  color:         var(--t3m-or);
}

.avantageTitre {
  font-family:    var(--t3m-font-titre);
  /*font-size:      1.75rem;  28px — Figma */
  font-weight:    600;
  color:          var(--t3m-noir);
  line-height:    1.214; /* 34/28 */
  text-transform: none;
  margin:         0 0 0.625rem; /* 10px — Figma */
}

.avantageTexte {
  font-family: 'Open Sans', sans-serif;
  font-size:   1.0625rem; /* 17px — Figma */
  line-height: 1.294; /* 22/17 */
  color:       var(--t3m-noir);
  margin:      0;
}


/* ============================================================
   13d. GRILLE DE CARTES (3 COLONNES) — bloc générique réutilisable
   (image/logo + ligne or + titre optionnel + texte)
   ============================================================ */

.grille3colSection {
  width:            100%;
  background-color: var(--t3m-blanc);
  padding:          clamp(4rem, 8.5vw, 7.5rem) 0 clamp(2rem, 5vw, 3.75rem);
}

.grille3colHeader { margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }

.grille3colTitre {
  font-family:    var(--t3m-font-titre);
  font-size:      clamp(2rem, 4vw, 3.375rem); /* 54px max */
  font-weight:    500;
  color:          var(--t3m-noir);
  line-height:    1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom:  1.25rem;
}

.grille3colLigne {
  display:          block;
  width:            6.25rem;
  height:           0.375rem;
  background-color: var(--t3m-or);
  border-radius:    0.25rem;
}

.grille3colGrid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.625rem; /* 10px */
}

.grille3colCard {
  display:          flex;
  flex-direction:   column;
  align-items:      flex-start;
  justify-content:  center;
  gap:              1.25rem; /* 20px */
  background-color: var(--t3m-noir);
  border-radius:    0.25rem;
  padding:          clamp(2.1875rem, 5vw, 3.75rem); /* 35px -> 60px */
}

/* Variante "image au-dessus" — la carte devient une image pleine largeur
   posée sur une boîte noire, plutôt qu'un logo à l'intérieur de la boîte */
.grille3colCardWrap--imgDessus {
  display:        flex;
  flex-direction: column;
}

.grille3colImgDessus {
  position:      relative;
  aspect-ratio:  4 / 3;
  overflow:      hidden;
  border-radius: 0.25rem 0.25rem 0 0;
}
.grille3colImgDessus img,
.grille3colImgDessus a {
  display: block;
  width:   100%;
  height:  100%;
}
.grille3colImgDessus img {
  object-fit: cover;
}

.grille3colCard--imgDessus {
  border-radius: 0 0 0.25rem 0.25rem;
}

.grille3colImg {
  display:    block;
  width:      auto;
  height:     auto;
  max-width:  100%;
  max-height: 5.625rem; /* 90px */
  object-fit: contain;
}

.grille3colImgLien {
  display:    block;
  line-height: 0;
  transition: opacity var(--t3m-transition);
}
.grille3colImgLien:hover { opacity: 0.8; }

/* La ligne or de la carte réutilise .grille3colLigne (déjà déclarée ci-dessus) */

.grille3colTexte,
.grille3colTexte p,
.grille3colTexte li:not(:has(*)) {
  font-family: 'Open Sans', sans-serif;
  font-size:   1.0625rem !important; /* 17px — !important : écrase un style inline collé dans le WYSIWYG */
  line-height: 1.294;     /* 22/17 */
  color:       #E9E7E2 !important; /* idem : sans ça un texte collé peut arriver en noir, invisible sur fond noir */
}
.grille3colTexte p { margin: 0 0 0.9375rem; }
.grille3colTexte p:last-child { margin-bottom: 0; }

/* Lien dans le WYSIWYG — même style que .serviceCardLien (texte + chevron) */
.grille3colTexte a {
  display:         inline-flex;
  align-items:     center;
  gap:             0.625rem;
  font-family:     var(--t3m-font-titre);
  font-size:       0.9375rem; /* 15px */
  font-weight:     500;       /* Medium */
  color:           var(--t3m-or) !important;
  text-transform:  uppercase;
  letter-spacing:  0.0625rem; /* 1px */
  line-height:     1.0667;
  text-decoration: none;
  transition:      opacity var(--t3m-transition);
  margin-top:      0.625rem;
}
.grille3colTexte a:hover { opacity: 0.75; }

.grille3colTexte a::after {
  content:      '';
  display:      inline-block;
  flex-shrink:  0;
  width:        0.375rem;
  height:       0.375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform:    rotate(-45deg);
  transition:   transform var(--t3m-transition);
}
.grille3colTexte a:hover::after { transform: rotate(-45deg) translate(2px, -2px); }

/* Titre (h1-h6) dans le WYSIWYG — blanc sur le fond noir de la carte
   (sinon il hérite du noir par défaut des titres et devient invisible) */
.grille3colTexte h1,
.grille3colTexte h2,
.grille3colTexte h3,
.grille3colTexte h4,
.grille3colTexte h5,
.grille3colTexte h6 {
  color:         var(--t3m-blanc) !important; /* écrase aussi un style inline collé dans le WYSIWYG */
  margin-bottom: 0.5rem; /* espace avant le paragraphe qui suit (sinon collé, reset universel à 0) */
}
.grille3colTexte > h1:first-child,
.grille3colTexte > h2:first-child,
.grille3colTexte > h3:first-child,
.grille3colTexte > h4:first-child,
.grille3colTexte > h5:first-child,
.grille3colTexte > h6:first-child {
  margin-top: 0;
}


/* ============================================================
   13e. BLOC PRIX — cartes de la grille 3 colonnes
   Prix régulier en or ; en promo : ancien prix barré, prix promo
   en or, bandeau rouge "Économisez" + pastille "-X %" sur l'image.
   ============================================================ */

:root {
  --t3m-rabais: #D0202E; /* rouge réservé aux rabais */
}

.grille3colCard { position: relative; }

.t3m-prix {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            0.625rem;
  margin:         1rem 0 1.25rem;
}

.t3m-prix_ligne {
  display:          block;
  width:            100%;
  height:           1px;
  background-color: rgba(184, 140, 54, 0.35); /* --t3m-or à 35 % */
}

.t3m-prix_montants {
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  column-gap:  0.75rem;
  row-gap:     0.25rem;
  margin-top:  0.375rem;
}

.t3m-prix_prefixe {
  font-family:    var(--t3m-font-titre);
  font-size:      0.9375rem;
  font-weight:    500;
  color:          var(--t3m-gris-clair);
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.t3m-prix_actuel {
  font-family:     var(--t3m-font-titre);
  font-size:       clamp(2rem, 3vw, 2.625rem); /* 32px -> 42px */
  font-weight:     600;
  line-height:     1;
  color:           var(--t3m-or-clair);
  text-decoration: none;
  white-space:     nowrap;
  background:      none;
}

.t3m-prix_ancien {
  font-family:           var(--t3m-font-titre);
  font-size:             1.25rem;
  font-weight:           400;
  line-height:           1;
  color:                 var(--t3m-gris);
  text-decoration:       line-through;
  text-decoration-color: var(--t3m-rabais);
  text-decoration-thickness: 2px;
  white-space:           nowrap;
}

.t3m-prix_rabais {
  display:          inline-block;
  font-family:      var(--t3m-font-titre);
  font-size:        0.875rem;
  font-weight:      600;
  line-height:      1.2;
  color:            var(--t3m-blanc);
  text-transform:   uppercase;
  letter-spacing:   0.0625rem;
  background-color: var(--t3m-rabais);
  border-radius:    var(--t3m-radius-sm);
  padding:          0.4375rem 0.75rem;
}

.t3m-prix_mention {
  font-family: var(--t3m-font-corps);
  font-size:   0.875rem;
  line-height: 1.3;
  color:       var(--t3m-gris-clair);
}

/* Texte réservé aux lecteurs d'écran ("Prix régulier :", etc.) */
.t3m-prix_sr {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

/* Pastille "-X %" — coin supérieur droit de l'image (ou de la carte) */
.t3m-prix_badge {
  position:         absolute;
  top:              1rem;
  right:            1rem;
  z-index:          2;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  min-width:        4.25rem;
  height:           4.25rem;
  padding:          0 0.5rem;
  font-family:      var(--t3m-font-titre);
  font-size:        1.25rem;
  font-weight:      700;
  line-height:      1;
  color:            var(--t3m-blanc);
  background-color: var(--t3m-rabais);
  border-radius:    50%;
  box-shadow:       0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
  transform:        rotate(-8deg);
  pointer-events:   none;
}

@media screen and (max-width: 767px) {
  .t3m-prix_badge {
    min-width: 3.5rem;
    height:    3.5rem;
    font-size: 1rem;
  }
}


/* ============================================================
   14. HERO
   Deux colonnes pleine largeur — image gauche + contenu droite.
   Remonte derrière le .siteHeader via margin-top négatif.
   ============================================================ */

.heroSection {
  width:               100%;
  background-color:    var(--t3m-noir);
  background-size:     cover;
  background-position: center;
  margin-top:          calc(-1 * var(--t3m-header-height));
  position:            relative;
  z-index:             0;
}

/* Overlay sombre — rgba(28,27,27,0.8) — Figma */
.heroSection::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background-color: rgba(28, 27, 27, 0.80);
  z-index:          1;
  pointer-events:   none;
}

/* Dégradé haut/bas — Figma mix-blend-multiply */
.heroSection::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.70) 0%,
    rgba(0, 0, 0, 0)    50%,
    rgba(0, 0, 0, 0.70) 100%
  );
  z-index:        1;
  pointer-events: none;
}

.heroGrid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(2rem, 4.5vw, 3.75rem); /* 60px Figma */
  min-height:            clamp(31.25rem, 48vw, 57.5rem); /* 920px max */
  /* padding-top = hauteur du header : les 2 colonnes commencent sous la nav */
  padding:               var(--t3m-header-height) clamp(1.25rem, 2.4%, 2.1875rem) clamp(2rem, 4vw, 3.75rem);
  position:              relative;
  z-index:               2; /* au-dessus des overlays ::before / ::after */
}

/* Colonne image gauche — border-radius Figma 4px */
.heroImageCol {
  position:      relative;
  overflow:      hidden;
  min-height:    25rem;
  border-radius: 0.25rem;
}

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

/* Vidéo optionnelle — superposée à l'image, visible une fois la lecture lancée
   (main.js ajoute .isPlaying). L'image reste en repli si l'autoplay est bloqué. */
.heroImageCol .heroVideo {
  position:       absolute;
  inset:          0;
  opacity:        0;
  transition:     opacity 0.6s ease;
  pointer-events: none;
}

.heroImageCol .heroVideo.isPlaying { opacity: 1; }

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

/* Colonne contenu droite — transparent sur le fond de .heroSection */
.heroContentCol {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  position:        relative;
  z-index:         2;
}

/* Surtitre doré */
.heroSurtitre {
  font-family:    var(--t3m-font-titre);
  font-size:      clamp(0.875rem, 1.1vw, 1.0625rem); /* 17px max */
  font-weight:    400;
  color:          var(--t3m-or);
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  line-height:    normal;
  margin-bottom:  1.25rem; /* 20px — Figma gap */
}

/* Fil d'Ariane cliquable (entête page intérieure) — même style visuel
   que .heroSurtitre, avec les liens en plus. */
.heroBreadcrumb { margin-bottom: 1.25rem; /* 20px — Figma gap */ }
.heroBreadcrumb ol {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         0.375rem;
  list-style:  none;
  margin:      0;
  padding:     0;
}
.heroBreadcrumb li {
  display:        flex;
  align-items:    center;
  gap:            0.375rem;
  font-family:    var(--t3m-font-titre);
  font-size:      clamp(0.875rem, 1.1vw, 1.0625rem); /* 17px max */
  font-weight:    400;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  line-height:    normal;
  color:          var(--t3m-or);
}
.heroBreadcrumb li:not(:last-child)::after {
  content: '>';
  opacity: 0.5;
}
.heroBreadcrumb a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--t3m-transition);
}
.heroBreadcrumb a:hover { color: var(--t3m-blanc); }

/* Titre H1 */
.heroTitre {
  font-family:    var(--t3m-font-titre);
  font-size:      clamp(2.5rem, calc(1rem + 4.5vw), 5.9375rem); /* 95px Figma */
  font-weight:    600; /* SemiBold */
  color:          var(--t3m-blanc);
  line-height:    1.055;        /* ~100px/95px */
  letter-spacing: -0.125rem;   /* -2px */
  text-transform: none;
  margin-bottom:  1.25rem; /* 20px — Figma gap */
  text-wrap: balance;
}

/* Description */
.heroDesc {
  font-family:   'Open Sans', sans-serif;
  font-size:     clamp(0.9375rem, 1.53vw, 1.375rem); /* 22px max */
  font-weight:   400;
  color:         var(--t3m-blanc);
  line-height:   1.55;
  margin-bottom: 1.25rem; /* 20px — Figma gap */
}

/* Boutons */
.heroBtns {
  display:     flex;
  flex-wrap:   wrap;
  gap:         1rem;
  align-items: center;
  margin-top:  0.3rem; /* léger extra gap avant boutons Figma */
}

/* Bouton outline secondaire du hero — contour or, texte blanc */
.btn-t3m-hero-outline {
  background-color: transparent;
  border-color:     var(--t3m-or);
  color:            var(--t3m-blanc);
}
.btn-t3m-hero-outline:hover {
  background-color: var(--t3m-or);
  border-color:     var(--t3m-or);
  color:            var(--t3m-noir);
}


/* ============================================================
   15. PERKS
   Bande horizontale noire — icône + texte, repeater ACF
   ============================================================ */

.perksSection {
  width:            100%;
  background-color: var(--t3m-noir);
  padding:          2.1875rem 0; /* 35px */
}

.perksInner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             2rem; /* 32px */
  flex-wrap:       wrap;
  max-width:       76.875rem; /* 1230px — Figma */
  margin:          0 auto;
}

.perkItem {
  display:     flex;
  align-items: center;
  gap:         0.625rem; /* 10px */
  flex:        1 0 0;
  min-width:   0;
}

.perkIcon {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
}

.perkIconImg {
  display:    block;
  max-height: 2.1875rem; /* 35px */
  width:      auto;
}

.perkText {
  font-family:    var(--t3m-font-titre);
  font-size:      0.9375rem; /* 15px */
  font-weight:    400;
  color:          var(--t3m-blanc);
  text-transform: uppercase;
  letter-spacing: 0.0625rem; /* 1px */
  line-height:    1.0667;
  flex:           1 0 0; /* remplit l'espace restant de .perkItem, quel que soit le nb d'items */
  min-width:      0;
  margin:         0;
  text-wrap: balance;
  overflow-wrap:  break-word; /* mot long en majuscules : coupe au lieu de déborder */
}


/* ============================================================
   16. SERVICES
   Grille de cartes photo avec overlay dégradé
   ============================================================ */

.servicesSection {
  width:            100%;
  background-color: var(--t3m-blanc);
  padding:          clamp(4rem, 8.5vw, 7.5rem) 0; /* ~120px max */
}

/* --- En-tête : titre gauche + description droite --- */
.servicesHeader {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             2.1875rem; /* 35px — Figma */
  margin-bottom:   clamp(2.5rem, 4vw, 3.75rem);
}

.servicesHeaderLeft  { flex: 1 1 0; min-width: 0; }
.servicesHeaderRight { flex: 0 0 21%; min-width: 0; overflow: hidden; }

.servicesTitre {
  font-family:    var(--t3m-font-titre);
  font-size:      clamp(2rem, 4vw, 3.375rem); /* 54px max */
  font-weight:    500;
  color:          var(--t3m-noir);
  line-height:    1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom:  1.25rem;
}

.servicesLigne {
  display:          block;
  width:            6.25rem;
  height:           0.375rem;
  background-color: var(--t3m-or);
  border-radius:    0.25rem;
}

.servicesDesc {
  font-size:    1.0625rem;
  line-height:  1.4118;
  color:        var(--t3m-noir);
  text-align:   right;
  margin:       0;
}

/* --- WYSIWYG intérieur de chaque carte --- */
.serviceCardWysiwyg { display: flex; flex-direction: column; gap: 0.625rem; }

.serviceCardWysiwyg h1,
.serviceCardWysiwyg h2,
.serviceCardWysiwyg h3,
.serviceCardWysiwyg h5,
.serviceCardWysiwyg h6 {
  font-family:    var(--t3m-font-titre);
  font-size:      clamp(1.75rem, 3vw, 2.5rem); /* 40px max */
  font-weight:    400;
  color:          var(--t3m-blanc);
  line-height:    1.1;
  text-transform: none;
  margin:         0;
}

/* h4 = sous-titre, plus petit, sans ligne dorée */
.serviceCardWysiwyg h4 {
  font-family:    var(--t3m-font-titre);
  font-size:      1.75rem;   /* 28px */
  font-weight:    600;
  color:          var(--t3m-blanc);
  line-height:    2.125rem;  /* 34px */
  text-transform: none;
  margin:         0;
}

.serviceCardWysiwyg p {
  color:       #E9E7E2;
  margin:      0;
}

/* --- Grille cartes --- */
.servicesGrid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.625rem; /* 10px */
}

/* --- Carte --- */
.serviceCard {
  position:      relative;
  height:        clamp(18rem, 33vw, 30rem); /* ~480px max */
  min-height:    100%;
  overflow:      hidden;
  border-radius: 0.25rem;
  box-shadow:    0 1.25rem 2.5rem 0 rgba(18, 18, 18, 0.04);
  display:       flex;
  align-items:   flex-end;
}

/* Grande carte : 2 colonnes */
.serviceCard--grande { grid-column: span 2; }

/* Carte sombre : CTA sans image (ex. "Visitez notre salle de montre") */
.serviceCard--dark {
  height:            clamp(18rem, 33vw, 30rem); /* ~480px max — même hauteur que les cartes photo */
  background-color:  var(--t3m-noir);
}


/* Ligne or sous le titre — uniquement sur la carte sombre (CTA), comme les h2 */
.serviceCard--dark .serviceCardWysiwyg h1:last-of-type::after,
.serviceCard--dark .serviceCardWysiwyg h2:last-of-type::after,
.serviceCard--dark .serviceCardWysiwyg h3:last-of-type::after,
.serviceCard--dark .serviceCardWysiwyg h4:last-of-type::after,
.serviceCard--dark .serviceCardWysiwyg h5:last-of-type::after,
.serviceCard--dark .serviceCardWysiwyg h6:last-of-type::after {
  content:          '';
  display:          block;
  width:            6.25rem;  /* 100px */
  height:           0.375rem; /* 6px */
  background-color: var(--t3m-or);
  border-radius:    0.25rem;
  margin-top:       1.25rem;  /* 20px */
}

/* Image de fond — absolute fill */
.serviceCardBg {
  position: absolute;
  inset:    0;
}

.serviceCardImg {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Overlay dégradé bas → transparent (par défaut — accueil) */
.serviceCardOverlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.90) 0%,
    rgba(0, 0, 0, 0)    60%
  );
}

/* Contenu texte en bas */
.serviceCardContent {
  position:   relative;
  z-index:    2;
  width:      100%;
  padding:    2.1875rem; /* 35px */
  height:     100%;  /* occupe toute la carte : même padding partout */
  display:    flex;
  flex-direction: column;
  justify-content: flex-end; /* contenu collé au bas : « En savoir plus » toujours à la même place */
  gap:        0.625rem; /* 10px */
}

/* Variante "boîte noire pleine" (pages intérieures, ex. Patio) — remplace le
   dégradé par une boîte noire pleine autour du texte, posée sur l'image. */
.serviceCard--boiteNoire .serviceCardOverlay { display: none; }
.serviceCard--boiteNoire .serviceCardContent { 
background-color: var(--t3m-noir);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
    height: 100% !important;
    justify-content: flex-end; }

/* Bande alignée par rangée (boîte noire) — la hauteur est calculée en JS
   (main.js : egaliserBandesServices) sur la carte la plus haute de la
   rangée. Exclut la carte CTA sans image (.serviceCard--dark), qui a déjà
   sa propre hauteur fixe. */
.serviceCardWysiwyg p {
    font-size: clamp(0.875rem, calc(0.5rem + 0.5vw), 1.0625rem);
}

.serviceCardTitre {
  font-family:    var(--t3m-font-titre);
  font-size:      clamp(1.75rem, 3vw, 2.5rem); /* 40px max */
  font-weight:    400;
  color:          var(--t3m-blanc);
  line-height:    1.1;   /* ~44px/40px */
  text-transform: none;
  margin:         0;
}

.serviceCardDesc {
  font-size:   1.0625rem; /* 17px */
  line-height: 1.4118;   /* 22/17 */
  color:       #E9E7E2;
  margin:      0;
}

/* Lien "Voir les X" avec flèche */
.serviceCardLien {
  display:        inline-flex;
  align-items:    center;
  gap:            0.625rem;
  font-family:    var(--t3m-font-titre);
  font-size:      0.9375rem; /* 15px */
  font-weight:    500; /* Medium */
  color:          var(--t3m-or);
  text-transform: uppercase;
  letter-spacing: 0.0625rem; /* 1px */
  line-height:    1.0667;
  text-decoration: none;
  transition:     opacity var(--t3m-transition);
  margin-top:     0.625rem;
}

.serviceCardLien:hover { opacity: 0.75; }

.serviceCardArrow {
  flex-shrink: 0;
  transition:  transform var(--t3m-transition);
}
.serviceCardLien:hover .serviceCardArrow { transform: translateX(3px); }


/* ============================================================
   17. CONTENT 50/50
   Image pleine hauteur + WYSIWYG, fond configurable
   ============================================================ */

.c5050Section {
  width:   100%;
  padding: clamp(4rem, 8.5vw, 7.5rem) 0; /* 120px max — symétrique, comme .avantagesSection/.servicesSection */
}

/* 2 blocs 50/50 de la même couleur qui se suivent : pas de double espace entre eux */
.c5050Section.c5050--sansPadTop { padding-top: 0; }

/* Titre optionnel au-dessus des colonnes */
.c5050Header { margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }

.c5050Titre {
  font-family:    var(--t3m-font-titre);
  font-size:      clamp(2rem, 4vw, 3.375rem); /* 54px max */
  font-weight:    500;
  color:          var(--t3m-noir);
  line-height:    1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom:  1.25rem;
}

.c5050Ligne {
  display:          block;
  width:            6.25rem;
  height:           0.375rem;
  background-color: var(--t3m-or);
  border-radius:    0.25rem;
}

.c5050--dark .c5050Titre { color: var(--t3m-blanc); }

/* Grille 50/50 */
.c5050Inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(2rem, 4.5vw, 3.75rem); /* ~60px */
  align-items:           center;
}

/* Variante "2 textes" (pas d'image) : alignées en haut plutôt qu'au centre */
.c5050Inner--top { align-items: flex-start; }

/* --- Colonne image pleine hauteur --- */
.c5050ImageCol {
  position:      relative;
  align-self:    stretch;
  border-radius: 0.25rem; /* 4px */
  overflow:      hidden;
}

.c5050Img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Variante "Ne pas rogner l'image" — photo produit affichée en entier */
.c5050ImageCol--contain .c5050Img {
  object-fit: contain;
}

/* --- Points chauds interactifs (option "Points chauds" sur une colonne image) ---
   Comportement : survol (souris) ou clic/tap (tactile + clavier) sur le rond "+"
   fait apparaître une bulle avec titre / texte / lien. Un seul point chaud reste
   accessible par clic/tap à la fois ; le survol garde le comportement natif du
   navigateur (plusieurs peuvent techniquement être survolés successivement). */

/* En mode points chauds, l'image garde ses proportions naturelles (pas de
   recadrage object-fit:cover) : les % de position doivent correspondre
   exactement à l'image réelle, donc la colonne ne s'étire plus en hauteur. */
.c5050ImageCol--hotspot {
  align-self: center;
  overflow:   visible; /* laisse dépasser légèrement le pulse / la bulle près des bords */
}

.c5050HotspotWrap { position: relative; }

.c5050HotspotImg {
  width:         100%;
  height:        auto;
  object-fit:    initial;
  border-radius: 0.25rem; /* 4px, comme .c5050ImageCol */
}

.c5050HotspotPoint {
  position:    absolute;
  transform:   translate(-50%, -50%);
  width:       0;
  height:      0;
  z-index:     1; /* crée un contexte d'empilement propre à ce point */
}

/* Point ouvert (ou survolé/focus) : passe au-dessus de tout — les autres
   points ainsi que le contenu qui suit dans la page (colonne texte empilée
   en dessous sur mobile, section suivante, etc.). */
.c5050HotspotPoint:hover,
.c5050HotspotPoint:focus-within,
.c5050HotspotPoint.isOpen {
  z-index: 20;
}

/* Halo qui pulse en continu derrière le rond */
.c5050HotspotSonar {
  position:         absolute;
  inset:            -0.5rem;
  display:          block;
  border-radius:    50%;
  background-color: var(--t3m-blanc);
  animation:        c5050HotspotSonar 2s ease infinite;
  pointer-events:   none;
}

@keyframes c5050HotspotSonar {
  0%   { opacity: 0;   transform: scale(0.2); }
  50%  { opacity: 0.8; }
  100% { opacity: 0;   transform: scale(1); }
}

/* Rond "+" cliquable */
.c5050HotspotBtn {
  position:         relative;
  z-index:          1;
  display:          block;
  width:            1.875rem; /* 30px */
  height:           1.875rem;
  margin:            -0.9375rem 0 0 -0.9375rem; /* recentre sur le point (x,y) */
  border-radius:    50%;
  border:           none;
  background-color: var(--t3m-blanc);
  color:            var(--t3m-or);
  box-shadow:       0 0 0.1875rem rgba(0, 0, 0, 0.15);
  cursor:           pointer;
  padding:          0;
  transition:       background-color var(--t3m-transition), color var(--t3m-transition);
}

.c5050HotspotPoint:hover .c5050HotspotBtn,
.c5050HotspotPoint:focus-within .c5050HotspotBtn,
.c5050HotspotPoint.isOpen .c5050HotspotBtn {
  background-color: var(--t3m-or);
  color:            var(--t3m-blanc);
}

/* Icône "+" dessinée en CSS (2 barres), pas d'icon font */
.c5050HotspotPlus { display: block; width: 100%; height: 100%; position: relative; }
.c5050HotspotPlus::before,
.c5050HotspotPlus::after {
  content:          "";
  position:         absolute;
  top:              50%;
  left:             50%;
  background-color: currentColor;
  transform:        translate(-50%, -50%);
}
.c5050HotspotPlus::before { width: 0.75rem; height: 0.125rem; }
.c5050HotspotPlus::after  { width: 0.125rem; height: 0.75rem; }

/* Bulle de contenu */
.c5050HotspotContent {
  position:       absolute;
  z-index:        10;
  top:            calc(100% + 1.5rem);
  left:           50%;
  transform:      translate(-50%, 0.75rem);
  width:          min(15.625rem, calc(100vw - 2rem)); /* 250px, recule sur mobile étroit */
  padding:        0.9375rem;
  border-radius:  0.25rem;
  background:     var(--t3m-blanc);
  box-shadow:     0 0 0.1875rem rgba(0, 0, 0, 0.15);
  text-align:     center;
  visibility:     hidden;
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--t3m-transition), visibility var(--t3m-transition), transform var(--t3m-transition);
}

/* Comble l'écart entre le bouton et la bulle pour que le survol ne se coupe pas
   en descendant la souris du rond "+" vers la bulle. */
.c5050HotspotBridge {
  position: absolute;
  left:     0;
  bottom:   100%;
  width:    100%;
  height:   1.5rem;
}

.c5050HotspotPoint:hover .c5050HotspotContent,
.c5050HotspotPoint:focus-within .c5050HotspotContent,
.c5050HotspotPoint.isOpen .c5050HotspotContent {
  visibility:     visible;
  opacity:        1;
  transform:      translate(-50%, 0);
  pointer-events: auto;
}

/* Corrections de débordement (calculées en JS selon la position dans l'image) */
.c5050HotspotPoint.c5050Hotspot--alignRight .c5050HotspotContent { left: auto; right: -0.9375rem; transform: translateY(0.75rem); }
.c5050HotspotPoint.c5050Hotspot--alignRight:is(:hover, :focus-within, .isOpen) .c5050HotspotContent { transform: translateY(0); }
.c5050HotspotPoint.c5050Hotspot--alignLeft .c5050HotspotContent { left: -0.9375rem; transform: translateY(0.75rem); }
.c5050HotspotPoint.c5050Hotspot--alignLeft:is(:hover, :focus-within, .isOpen) .c5050HotspotContent { transform: translateY(0); }
.c5050HotspotPoint.c5050Hotspot--above .c5050HotspotContent { top: auto; bottom: calc(100% + 1.5rem); transform: translate(-50%, -0.75rem); }
.c5050HotspotPoint.c5050Hotspot--above:is(:hover, :focus-within, .isOpen) .c5050HotspotContent { transform: translate(-50%, 0); }
.c5050HotspotPoint.c5050Hotspot--above.c5050Hotspot--alignRight .c5050HotspotContent { transform: translateY(-0.75rem); }
.c5050HotspotPoint.c5050Hotspot--above.c5050Hotspot--alignLeft .c5050HotspotContent { transform: translateY(-0.75rem); }
.c5050HotspotPoint.c5050Hotspot--above:is(:hover, :focus-within, .isOpen).c5050Hotspot--alignRight .c5050HotspotContent,
.c5050HotspotPoint.c5050Hotspot--above:is(:hover, :focus-within, .isOpen).c5050Hotspot--alignLeft .c5050HotspotContent { transform: translateY(0); }
.c5050HotspotPoint.c5050Hotspot--above .c5050HotspotBridge { bottom: auto; top: 100%; }

.c5050HotspotTitre {
  font-family:    var(--t3m-font-titre);
  font-size:      0.9375rem;
  font-weight:    700;
  color:          var(--t3m-noir);
  margin-bottom:  0;
  text-transform: none;
}

/* --- Colonne texte --- */
.c5050TexteCol {
  padding: clamp(1.5rem, 4.5vw, 3.75rem) 0; /* 60px — Figma py-[60px] */
}

/* --- WYSIWYG styling T3M --- */
.c5050Texte > * + * { margin-top: 1.25rem; }

/* H2 principal + barre or automatique */
.c5050Texte h2 {
  font-family:    var(--t3m-font-titre);
  font-size:      clamp(2rem, 4vw, 3.375rem); /* 54px max */
  font-weight:    500; /* Medium */
  color:          var(--t3m-noir);
  line-height:    1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom:  0;
  text-wrap: balance;
}

.c5050Texte h2::after {
  content:          '';
  display:          block;
  width:            6.25rem; /* 100px */
  height:           0.375rem; /* 6px */
  background-color: var(--t3m-or);
  border-radius:    0.25rem;
  margin-top:       1.25rem;
}

/* H3, H4 secondaires */
.c5050Texte h3 {
  font-family:    var(--t3m-font-titre);
  font-size:      clamp(1.5rem, 2.5vw, 2rem);
  font-weight:    500;
  color:          var(--t3m-noir);
  text-transform: none;
  margin-bottom:  0;
}

/* Paragraphes */
.c5050Texte p {
  color: var(--t3m-noir);
}

/* Liens */
.c5050Texte a:not(.btn-t3m) {
  color:           var(--t3m-or);
  text-decoration: underline;
}

/* Boutons dans le WYSIWYG */
.c5050Texte .btn-t3m { margin-top: 0.5rem; }

/* Variante fond sombre */
.c5050--dark .c5050Texte h2,
.c5050--dark .c5050Texte h3,
.c5050--dark .c5050Texte p { color: var(--t3m-blanc); }

.c5050--dark .c5050Texte p { color: rgba(255,255,255,0.80); }


/* ============================================================
   18. CONTENT 1/3 + 2/3
   ============================================================ */
.c1323Section.bg-t3m-blanc .c1323ColTexte {
    background-color: var(--t3m-creme);
}
.c1323Section {
  padding-top:    clamp(2rem, 5vw,   3.75rem);    /* 60px max  */
  padding-bottom: clamp(4rem, 8.5vw, 7.5rem);    /* 120px max */
}

/* Carte blanche avec border-radius */
.c1323Card {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  border-radius:         0.25rem;
  overflow:              hidden;
  background:            var(--t3m-blanc);
  min-height:            clamp(18rem, 30vw, 28rem);
}

/* Colonne texte (1/3) */
.c1323ColTexte {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         clamp(2rem, 4vw, 3.75rem);
  background:      var(--t3m-blanc);
}

/* Colonne média (2/3) */
.c1323ColMedia {
  position: relative;
  overflow: hidden;
}

/* Image de fond plein format */
.c1323MediaBg {
  position: absolute;
  inset:    0;
}

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

/* Overlay sombre */
.c1323Overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.30);
}

/* Variante dégradé — quand un logo est centré sur l'image, même
   traitement que les autres images du site (ex. .serviceCardOverlay) */
.c1323Overlay--logo {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.90) 0%,
    rgba(0, 0, 0, 0)    60%
  );
}

/* Logo centré sur l'image */
.c1323Logo {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          100%;
  padding:         2rem;
}

.c1323LogoImg {
  max-width:  clamp(18rem, 60%, 42.25rem); /* ~676px Figma */
  max-height: 6.25rem;                     /* ~100px Figma */
  width:      auto;
  height:     auto;
  object-fit: contain;
}

/* WYSIWYG dans col texte */
.c1323Wysiwyg h2,
.c1323Wysiwyg h3 {
  font-family:    var(--t3m-font-titre);
  font-weight:    400;
  font-size:      clamp(1.75rem, 3vw, 2.5rem);
  line-height:    1.1;
  letter-spacing: -0.02em;
  color:          var(--t3m-noir);
  text-transform: none;
  margin-bottom:  0.5rem;
}

/* Barre dorée sous le titre */
.c1323Wysiwyg h2::after,
.c1323Wysiwyg h3::after {
  content:       '';
  display:       block;
  width:         6.25rem;
  height:        0.375rem;
  background:    var(--t3m-or);
  border-radius: 0.25rem;
  margin-top:    0.75rem;
  margin-bottom: 1rem;
}

.c1323Wysiwyg p {
  color:       var(--t3m-noir);
  margin-bottom: 1.25rem;
}

.c1323Wysiwyg .btn-t3m {
  margin-top: 0.5rem;
}

/* Image simple dans la colonne */
.c1323Img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Variante dark (section fond noir) */
.c1323--dark .c1323ColTexte {
  background: var(--t3m-noir);
}

.c1323--dark .c1323Wysiwyg h2,
.c1323--dark .c1323Wysiwyg h3,
.c1323--dark .c1323Wysiwyg p {
  color: var(--t3m-blanc);
}

/* ============================================================
   19. FOOTER
   ============================================================ */

.footerWrap {
  background-color: #000000;
  padding-top:      clamp(4rem, 8vw, 7.5rem);
  padding-bottom:   clamp(1.5rem, 3vw, 2.1875rem);
}

/* Grille 4 colonnes égales (flex) */
.footerInner {
  display:        flex;
  flex-wrap:      wrap;
  gap:            2.1875rem; /* 35px — Figma */
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

/* Col 1 — Marque */
.footerColBrand {
  display:        flex;
  flex:           1 0 0;
  min-width:      0;
  flex-direction: column;
  gap:            1.4375rem;
}

.footerLogo { display: inline-block; }

.footerLogoImg {
  width:      10.45rem;   /* 167px — Figma */
  height:     5.625rem;   /* 90px — Figma */
  max-width:  none;
  display:    block;
  object-fit: contain;
}

.footerLogoText {
  font-family: var(--t3m-font-titre);
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--t3m-blanc);
}

.footerSlogan,
.footerSlogan p {
  font-family: 'Open Sans', sans-serif;
  font-size:   1.0625rem; /* 17px — le p global (22px) écrasait cette valeur */
  line-height: 1.3;
  color:       #737373;
  max-width:   22rem;
  margin:      0;
}

.footerSlogan {
  min-height: 4.14rem; /* réserve 3 lignes (hauteur Figma) même si le texte réel tient sur 1-2 lignes, pour que la colo Marque reste toujours plus haute que les colonnes de liens */
}

/* Réseaux sociaux */
.footerSocial {
  display: flex;
  gap:     0.75rem;
}

.footerSocialLink {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--t3m-or); /* dorés par défaut — Figma */
  font-size:       1.25rem;
  transition:      color var(--t3m-transition);
}

.footerSocialLink:hover { color: var(--t3m-or-clair); }

/* Col 2, 3 & 4 — nos services, liens utiles, contact */
.footerColNav,
.footerColContact {
  display:        flex;
  flex:           1 0 0;
  min-width:      0;
  flex-direction: column;
  gap:            2rem;
}

/* Titre de colonne */
.footerNavTitle {
  font-family:    var(--t3m-font-titre);
  font-size:      1.0625rem;
  font-weight:    400;
  color:          var(--t3m-blanc);
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  line-height:    1;
  margin:         0; /* c'est un <p> pas last-child -> annule le margin-bottom:1em global */
}

/* Liens nav footer */
.footerNavList {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        1rem;
}

.footerNavList li a {
  font-family:    var(--t3m-font-titre);
  font-size:      0.9375rem;
  font-weight:    400;
  color:          #737373;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  line-height:    1;
  text-decoration: none;
  transition:     color var(--t3m-transition);
}

.footerNavList li a:hover { color: var(--t3m-or); }

/* Contact wysiwyg */
.footerContactInfo {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

.footerContactInfo p,
.footerContactInfo a {
  font-family:     'Open Sans', sans-serif;
  color:           #737373;
  text-decoration: none;
  line-height:     1;
  transition:      color var(--t3m-transition);
}

.footerContactInfo a:hover { color: var(--t3m-or); }

/* Barre de bas — 4 blocs égaux : copyright | APCHQ+RBQ | crédit agence | liens légaux */
.footerBottom {
  display:     flex;
  align-items: center;
  border-top:  1px solid #737373;
  padding-top: 2.0625rem;
  gap:         2.1875rem; /* 35px — Figma */
  flex-wrap:   wrap;
}

.footerCopyright,
.footerApchq,
.footerCredit,
.footerLegal {
  flex:      1 0 0;
  min-width: 0;
}

.footerCopyright {
  font-family:  'Open Sans', sans-serif;
  font-size:    0.8125rem;
  color:        #737373;
  line-height:  1.3;
  margin:       0;
  display:      inline-block;
}

/* Logo APCHQ + numéro RBQ */
.footerApchq {
  display:     flex;
  align-items: center;
  gap:         0.625rem; /* 10px */
}

.footerApchqLogo {
  height:     1.375rem; /* ~22px — proportion Figma */
  width:      auto;
  max-width:  5.3125rem; /* 85px */
  object-fit: contain;
}

.footerApchqRbq {
  font-family: 'Open Sans', sans-serif;
  font-size:   0.8125rem;
  color:       #737373;
  line-height: 1.69;
  white-space: nowrap;
}

/* Crédit agence */
.footerCredit {
  font-family:  'Open Sans', sans-serif;
  font-size:    0.8125rem;
  color:        #737373;
  line-height:  1.3;
  margin:       0;
  display:      inline-block;
}

.footerCredit a {
  color:           #737373;
  text-decoration: underline;
  transition:      color var(--t3m-transition);
}

.footerCredit a:hover { color: var(--t3m-or); }

.footerLegal {
  display: flex;
  gap:     clamp(1rem, 3vw, 2.1875rem);
}

.footerLegalLink {
  font-family:     'Open Sans', sans-serif;
  font-size:       0.8125rem;
  color:           #737373;
  text-decoration: none;
  line-height:     1.69;
  transition:      color var(--t3m-transition);
}

.footerLegalLink:hover { color: var(--t3m-or); }

/* ============================================================
   20. FORMULAIRE + FAQ + CTA
   ============================================================ */

.formFaqSection {
  padding:    clamp(4rem, 8vw, 7.5rem) 0;
}

/* Container flex : la colonne FAQ+CTA s'étire pour matcher la hauteur du form */
.formFaqInner {
  display:     flex;
  align-items: stretch;
  gap:         2.1875rem; /* 35px — Figma gap-x */
}

.formFaqColForm {
  flex:      7 1 0; /* 7/12 — ratio pur, gère correctement le gap (évite le débordement) */
  min-width: 0;
}

.formFaqIntro { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 0.25rem; }

.formFaqTitre {
  font-family:    var(--t3m-font-titre);
  font-weight:    400;
  font-size:      clamp(1.75rem, 3vw, 2.5rem);
  line-height:    1.1;
  color:          var(--t3m-noir);
  text-transform: none;
  letter-spacing: 0;
}

.formFaqDesc {
  font-family: 'Open Sans', sans-serif;
  font-size:   1rem;
  line-height: 1.5;
  color:       #444748;
}

/* Ninja Forms — surcharge T3M */
/* Titre des listes radio : même style que les autres titres */
.nf-t3m .nf-field-label .nf-label-span {
  font-family: var(--t3m-font-titre) !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  color: var(--t3m-or) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.0625rem !important;
  line-height: 1 !important;
}

/* Choix des radios : noirs, comme le texte des champs */
.nf-t3m .list-container .field-wrap li label {
  font-family: "Open Sans", sans-serif !important;
  font-size: 1rem !important;
  color: var(--t3m-noir) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
}
.nf-before-form-content{
  margin-top: 2em;
}
.nf-form-fields-required{
  display: none;
}
.nf-t3m .nf-field-container.submit-container{
  margin-bottom: 0!important;
}
.nf-t3m .nf-form-content { padding: 0 !important; }

/* Espacement entre les champs — Ninja Forms met 25px par défaut,
   Figma en veut 35px entre chaque champ/ligne. */
.nf-t3m .nf-field-container { margin-bottom: 2.1875rem !important; }

/* Labels */
.nf-t3m .nf-field-label label,
.nf-t3m .field-wrap label {
  font-family:    var(--t3m-font-titre) !important;
  font-size:      0.9375rem !important;
  font-weight:    400 !important;
  color:          var(--t3m-or) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.0625rem !important;
  line-height:    1 !important;
}

/* Espacement label -> champ — 8px (Figma), au lieu du 10px par défaut */
.nf-t3m .nf-field-label { margin-bottom: 0.5rem !important; }

/* Inputs texte / email / tel */
.nf-t3m input[type="text"],
.nf-t3m input[type="email"],
.nf-t3m input[type="tel"],
.nf-t3m input[type="number"],
.nf-t3m textarea {
  font-family:       'Open Sans', sans-serif !important;
  font-size:         clamp(1rem, calc(2px + 1vw), 1.375rem) !important;
  color:             var(--t3m-noir) !important;
  background:        transparent !important;
  border:            none !important;
  border-bottom:     1px solid rgba(20, 20, 20, 0.40) !important;
  border-radius:     0 !important;
  padding:           0.625rem 0 !important;
  width:             100% !important;
  box-shadow:        none !important;
  outline:           none !important;
}

.nf-t3m input::placeholder,
.nf-t3m textarea::placeholder { color: rgba(20, 20, 20, 0.40) !important; }

/* Textarea — hauteur min pour matcher la col FAQ */
.nf-t3m textarea {
  min-height: 10rem !important;
}

/* Bouton upload — .nf-fu-fileinput-button (structure réelle NF inspectée) */
.nf-t3m .nf-fu-fileinput-button {
  display:          inline-flex !important;
  align-items:      center !important;
  background-color: var(--t3m-creme) !important;
  color:            #444748 !important;
  font-family:      var(--t3m-font-titre) !important;
  font-size:        0.9375rem !important;
  font-weight:      400 !important;
  letter-spacing:   0.0625em !important;
  text-transform:   uppercase !important;
  padding:          1.25rem 2.1875rem !important;
  border:           none !important;
  border-radius:    0 !important;
  box-shadow:       none !important;
  cursor:           pointer !important;
  transition:       opacity var(--t3m-transition) !important;
}
.nf-t3m .nf-fu-fileinput-button:hover {
  opacity:          0.8 !important;
  background-color: var(--t3m-creme) !important;
}
/* Bouton Annuler — masqué par défaut */
.nf-t3m .nf-fu-button-cancel { display: none !important; }

.nf-t3m input:focus,
.nf-t3m textarea:focus {
  border-bottom-color: var(--t3m-or) !important;
  box-shadow: none !important;
}

/* Select */
.nf-t3m select {
  font-family:   'Open Sans', sans-serif !important;
  font-size:     1.375rem !important;
  color:         var(--t3m-noir) !important;
  background:    transparent !important;
  border:        1px solid rgba(20, 20, 20, 0.40) !important;
  border-radius: 0.25rem !important;
  padding:       0.6875rem !important;
  width:         100% !important;
  box-shadow:    none !important;
  outline:       none !important;
  cursor:        pointer;
}

/* Bouton submit */
.nf-t3m input[type="button"],
.nf-t3m input[type="submit"],
.nf-t3m button[type="submit"],
.nf-t3m .submit-wrap input {
  width:            100% !important;
  font-family:      var(--t3m-font-titre) !important;
  font-size:        1.0625rem !important;
  font-weight:      400 !important;
  letter-spacing:   0.0625rem !important;
  text-transform:   uppercase !important;
  background-color: var(--t3m-or) !important;
  color:            var(--t3m-noir) !important;
  border:           none !important;
  border-radius:    0.25rem !important;
  padding:          1.125rem 2.1875rem !important;
  cursor:           pointer !important;
  transition:       background-color var(--t3m-transition) !important;
}

.nf-t3m input[type="submit"]:hover,
.nf-t3m .submit-wrap input:hover {
  background-color: var(--t3m-or-hover) !important;
}

.formFaqColSide {
  display:        flex;
  flex-direction: column;
  flex:           5 1 0; /* 5/12 — ratio pur, gère correctement le gap (évite le débordement) */
  min-width:      0;
  gap:            2.1875rem; /* 35px entre FAQ et CTA */
}

/* FAQ box */
.formFaqFaq {
  background:    var(--t3m-creme);
  border-radius: 0.25rem;
  padding:       clamp(1.5rem, 3vw, 2.1875rem);
  display:       flex;
  flex-direction: column;
  gap:           1.25rem;
}

.formFaqFaqTitre {
  font-family:    var(--t3m-font-titre);
  font-size:      1.75rem;
  font-weight:    600;
  line-height:    1.21;
  color:          #1C1B1B;
  text-transform: none;
  letter-spacing: 0;
}

/* Accordéon <details> */
.formFaqAccordeon { display: flex; flex-direction: column; }

.formFaqItem {
  border-bottom: 1px solid #C4C7C7;
  padding-bottom: 1.3125rem;
  padding-top:    1.3125rem;
}

.formFaqItem:first-child { padding-top: 0; }

.formFaqQuestion {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             0.75rem;
  cursor:          pointer;
  list-style:      none;
  font-family:     'Open Sans', sans-serif;
  font-size:       1.0625rem;
  font-weight:     700;
  line-height:     1.3;
  color:           #1C1B1B;
}

.formFaqQuestion::-webkit-details-marker { display: none; }

.formFaqChevron {
  flex-shrink:     0;
  color:           #1C1B1B;
  font-size:       0.75rem;
  transition:      transform 0.25s ease;
}

/* Chevron rotation quand ouvert */
.formFaqItem.isOuvert .formFaqChevron { transform: rotate(180deg); }

.formFaqReponse {
  padding-top: 0.625rem;
}

.formFaqReponse p {
  font-family:  'Open Sans', sans-serif;
  font-size:    1rem;
  line-height:  1.6;
  color:        #444748;
}

/* Lien "Voir toutes les questions" */
.formFaqLienFaq {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  font-family:    var(--t3m-font-titre);
  font-size:      0.9375rem;
  font-weight:    500;
  color:          var(--t3m-or);
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  text-decoration: none;
  transition:     opacity var(--t3m-transition);
}

.formFaqLienFaq:hover { opacity: 0.75; }

/* CTA noir — grandit pour que la colonne finisse à la hauteur du form */
.formFaqCta {
  flex:            1 0 0;
  /*max-height:      21.875rem; */
  background:      var(--t3m-noir);
  border-radius:   0.25rem;
  padding:         clamp(1.5rem, 3vw, 2.1875rem);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  gap:             1rem;
}

.formFaqCtaTitre {
  font-family:    var(--t3m-font-titre);
  font-size:      1.75rem;
  font-weight:    600;
  line-height:    1.21;
  color:          var(--t3m-blanc);
  text-transform: none;
  letter-spacing: 0;
}

.formFaqCtaTexte {
  font-family:   'Open Sans', sans-serif;
  color:         var(--t3m-creme);
  margin-bottom: 0; /* .formFaqCta gère l'espacement via gap, pas le margin par défaut des <p> */
}

.formFaqCtaTel,
.formFaqCtaTel p,
.formFaqCtaTel a {
  font-family:     var(--t3m-font-titre);
  font-size:       1.75rem;
  font-weight:     600;
  line-height:     1.21;
  color:           var(--t3m-or) !important;
  text-decoration: none;
}

/* 404 — liste des services dans la boîte crème (réutilise .formFaqLienFaq) */
.notFoundServices {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

/* Variante sans formulaire (aucun form_id) — FAQ + CTA pleine largeur, 50/50 */
.formFaqInner--sansForm > .formFaqFaq,
.formFaqInner--sansForm > .formFaqCta {
  flex: 1 0 0;
}

/* ============================================================
   FAQ (sections + accordéon) — réutilise .formFaqAccordeon/.formFaqItem
   ============================================================ */
.faqAccSection {
  padding: clamp(4rem, 8vw, 7.5rem) 0;
}

/* Container plus étroit : largeur de lecture, comme .content100Inner */
.faqAccInner {
  max-width:      57.1875rem; /* 915px */
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            clamp(1.5rem, 3vw, 2.1875rem);
}

/* Carte crème — même traitement que le bloc FAQ existant (.formFaqFaq) */
.faqAccBlock {
  background:    var(--t3m-creme);
  border-radius: 0.25rem;
  padding:       clamp(1.5rem, 3vw, 2.1875rem);
}

.faqAccTitre {
  font-family:    var(--t3m-font-titre);
  font-size:      1.75rem;
  font-weight:    600;
  line-height:    1.21;
  color:          #1C1B1B;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom:  1.25rem;
}

/* Petite ligne or sous le titre, comme les autres titres de section du site */
.faqAccTitre::after {
  content:          '';
  display:          block;
  width:            3.75rem;  /* 60px */
  height:           0.25rem;  /* 4px */
  background-color: var(--t3m-or);
  border-radius:    0.25rem;
  margin-top:       0.75rem;
}

/* ============================================================
   Responsive Formulaire + FAQ
   ============================================================ */

/* ============================================================
   20. CONVERSION BANNER
   ============================================================ */

.convBannerSection {
  background: linear-gradient(131.73deg, #B18B47 0%, #795919 100%);
  padding:    clamp(4rem, 8vw, 6rem) 0;
  overflow:   hidden; /* coupe le débordement du peek Slick → évite la scrollbar horizontale */
}

.convBannerInner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             clamp(1.5rem, 3vw, 2.1875rem);
  max-width:       76.875rem; /* 1230px — Figma */
  margin:          0 auto;
}

.convBannerTitre {
  font-family:    var(--t3m-font-titre);
  font-weight:    500;
  font-size:      clamp(2rem, 4.5vw, 3.375rem);
  line-height:    1.1;
  letter-spacing: -0.02em;
  color:          var(--t3m-blanc);
  text-align:     center;
  text-transform: none;
    max-width:       76.875rem; /* 1230px — Figma */
    text-wrap: balance;

}

/* Galerie — slider Slick avec effet peek */
.convBannerGalerie {
  width: 100%;
}

/* Overflow visible pour laisser les slides latéraux dépasser */
.convBannerGalerie .slick-list {
  overflow: visible;
}

/* Espacement entre slides */
.convBannerGalerie .slick-slide {
  padding: 0 0.3125rem; /* 5px de chaque côté */
}

/* Spécificité 2 classes > 1 classe de slick.css (.slick-slide { height: 100% })
   slick.css est chargé dans le footer (après t3m.css), donc il écrase
   la hauteur avec 1 classe — on contre avec un sélecteur plus spécifique. */
.convBannerGalerie .convBannerImgWrap {
  position:      relative;
  height:        clamp(12rem, 22vw, 20rem); /* 320px max — Figma */
  border-radius: 0.25rem;
  overflow:      hidden;
}

.convBannerGalerie .convBannerImg {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  /* Pas de position:absolute — l'img remplit le parent via height:100%
     sans dépendre de inset/top/left (meilleure compat + pas de conflit Slick) */
}

/* Bouton outline blanc — déjà géré par .btn-t3m-outline */

/* ============================================================
   19b. CONTENT 100% (bloc WYSIWYG pleine largeur)
   ============================================================ */

.content100Section {
  padding: clamp(4rem, 8.5vw, 7.5rem) 0; /* 120px max — symétrique, comme .avantagesSection/.servicesSection/.c5050Section */
}

/* Fond doré (même dégradé que .convBannerSection) */
.content100Section--dore {
  background: linear-gradient(131.73deg, #B18B47 0%, #795919 100%);
}

.content100Inner {
  max-width: 57.1875rem; /* même largeur de lecture que .pageHeaderDesc */
  margin:    0 auto;
}

/* Espacement des titres WYSIWYG à l'intérieur du bloc (le reset universel les
   met à 0 : sans ça un titre comme "Clôture" touche direct la liste/texte
   précédent). Scopé ici pour ne pas affecter les titres des autres composants
   (c5050Titre, grille3colTitre, etc.) qui gèrent déjà leur propre marge. */
.content100Inner h1,
.content100Inner h2,
.content100Inner h3,
.content100Inner h4,
.content100Inner h5,
.content100Inner h6 {
  margin-top:    1.5em;
  margin-bottom: 0.75em;
}
.content100Inner > h1:first-child,
.content100Inner > h2:first-child,
.content100Inner > h3:first-child,
.content100Inner > h4:first-child,
.content100Inner > h5:first-child,
.content100Inner > h6:first-child {
  margin-top: 0;
}

/* ============================================================
   21. GALERIE DE PROJETS (réalisations + filtre)
   ============================================================ */

.gallerieSection {
  padding: clamp(4rem, 8vw, 7.5rem) 0;
}

.gallerieHeader {
  display:      flex;
  gap:          2.1875rem;
  align-items:  center;
  margin-bottom: clamp(2rem, 4vw, 3.75rem);
}

.gallerieTitreWrap { flex: 1 0 0; }

.gallerieTitre {
  font-family:    var(--t3m-font-titre);
  font-weight:    500;
  font-size:      clamp(2rem, 4.5vw, 3.375rem);
  line-height:    1.1;
  letter-spacing: -0.02em;
  color:          var(--t3m-noir);
}

.gallerieLigne {
  display:       block;
  width:         6.25rem;
  height:        0.375rem;
  background:    var(--t3m-or);
  border-radius: 0.25rem;
  margin-top:    1.25rem;
}

.gallerieFiltreWrap {
  position:    relative;
  flex-shrink: 0;
}
.gallerieFiltreWrap i{
  color: var(--t3m-or);
}

.gallerieFiltre {
  appearance:     none;
  -webkit-appearance: none;
  border:         1px solid var(--t3m-or);
  border-radius:  0;
  background:     transparent;
  padding:        1.25rem 2.5rem 1.25rem 1.25rem;
  font-family:    'Open Sans', sans-serif;
  font-size:      1.0625rem;
  color:          var(--t3m-noir);
  cursor:         pointer;
}

.gallerieFiltreChevron {
  position:      absolute;
  right:         1.25rem;
  top:           50%;
  transform:     translateY(-50%);
  font-size:     0.8125rem;
  color:         var(--t3m-noir);
  pointer-events: none;
}

.gallerieGrid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0.625rem;
}

.gallerieCard {
  position:      relative;
  height:        clamp(14rem, 22vw, 20rem);
  border-radius: 0.25rem;
  overflow:      hidden;
  cursor:        pointer;
}

.gallerieOuvrir {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  padding:    0;
  border:     0;
  background: none;
  cursor:     pointer;
}

.gallerieOuvrir:focus-visible {
  outline:        2px solid var(--t3m-or);
  outline-offset: -0.25rem;
}

.gallerieCard.isHidden { display: none; }

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

.gallerieOverlay {
  position:        absolute;
  left: 0; right: 0; bottom: 0;
  background:      var(--t3m-noir);
  /* Pas de padding à droite : le bouton Soumission est collé au bord de la carte */
  padding:         0 0 0 1.25rem;
  display:         flex;
  gap:             1rem;
  align-items:     stretch;
  justify-content: space-between;
  opacity:         0;
  transition:      opacity var(--t3m-transition);
}

.gallerieTypes {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.625rem;
  align-items: center;
  min-width:   0;
  padding:     0.9375rem 0;
}

/* Écrans tactiles (pas de survol) : overlay toujours visible pour garder les liens accessibles */
@media (hover: none) {
  .gallerieOverlay { opacity: 1; }
}

.gallerieCard:hover .gallerieOverlay,
.gallerieCard:focus-within .gallerieOverlay {
  opacity: 1;
}

.gallerieType {
  font-family:    'Rubik', sans-serif;
  font-size:      0.75rem;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color:          #E9E7E2;
  white-space:    nowrap;
}

.gallerieTypeLien {
  text-decoration:       underline;
  text-decoration-color: var(--t3m-or);
  text-underline-offset: 0.25rem;
  transition:            color var(--t3m-transition);
}

.gallerieTypeLien:hover,
.gallerieTypeLien:focus-visible { color: var(--t3m-or); }

/* Même taille de texte que .gallerieType, pleine hauteur du bandeau, collé à droite.
   Sélecteur renforcé : passe devant .btn-t3m { width: 100% } du mobile */
.gallerieOverlay .gallerieSoumission {
  display:        flex;
  align-items:    center;
  flex-shrink:    0;
  width:          auto;
  margin-left:    auto;
  padding:        0 1.25rem;
  border-width:   0;
  border-radius:  0;
  font-family:    'Rubik', sans-serif;
  font-size:      0.75rem;
  letter-spacing: 0.0625rem;
  white-space:    nowrap;
}

.gallerieDot {
  width:         0.375rem;
  height:        0.375rem;
  border-radius: 50%;
  background:    var(--t3m-or);
  flex-shrink:   0;
}

/* --- Lightbox --- */
.gallerieLightbox {
  position:        fixed;
  inset:           0;
  z-index:         1000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(20, 20, 20, 0.92);
  opacity:         0;
  visibility:      hidden;
  transition:      opacity var(--t3m-transition), visibility var(--t3m-transition);
  padding:         clamp(1.25rem, 4vw, 3.75rem);
}

.gallerieLightbox.isOpen {
  opacity:    1;
  visibility: visible;
}

.gallerieLightboxContent {
  position:      relative;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           1.25rem;
  max-width:     56.25rem; /* 900px */
  max-height:    100%;
}

.gallerieLightboxImg {
  display:       block;
  max-width:     100%;
  max-height:    75vh;
  width:         auto;
  height:        auto;
  border-radius: 0.25rem;
  box-shadow:    0 1.25rem 3.75rem 0 rgba(0, 0, 0, 0.45);
  opacity:       0;
  transform:     scale(0.97);
  transition:    opacity var(--t3m-transition), transform var(--t3m-transition);
}

.gallerieLightbox.isOpen .gallerieLightboxImg {
  opacity:   1;
  transform: scale(1);
}

.gallerieLightboxCaption { text-align: center; }

.gallerieLightboxTitre {
  font-family: var(--t3m-font-titre);
  font-size:   1.375rem;
  font-weight: 500;
  color:       var(--t3m-blanc);
  margin:      0;
}

.gallerieLightboxSousTitre {
  font-family:    'Rubik', sans-serif;
  font-size:      0.75rem;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color:          var(--t3m-or);
  margin:         0.375rem 0 0;
}

.gallerieLightboxClose {
  position:         absolute;
  top:              clamp(1.25rem, 3vw, 2.1875rem);
  right:            clamp(1.25rem, 3vw, 2.1875rem);
  width:            2.75rem;
  height:           2.75rem;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background:       transparent;
  border:           1px solid rgba(233, 231, 226, 0.4);
  border-radius:    50%;
  color:            var(--t3m-blanc);
  font-size:        1.125rem;
  cursor:           pointer;
  transition:       border-color var(--t3m-transition), color var(--t3m-transition);
}

.gallerieLightboxClose:hover {
  border-color: var(--t3m-or);
  color:        var(--t3m-or);
}

.gallerieLightboxNav {
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  width:            3.125rem;
  height:           3.125rem;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background:       transparent;
  border:           1px solid rgba(233, 231, 226, 0.4);
  border-radius:    50%;
  color:            var(--t3m-blanc);
  font-size:        1rem;
  cursor:           pointer;
  transition:       border-color var(--t3m-transition), color var(--t3m-transition);
}

.gallerieLightboxNav:hover {
  border-color: var(--t3m-or);
  color:        var(--t3m-or);
}

.gallerieLightboxPrev { left:  clamp(0.625rem, 3vw, 2.1875rem); }
.gallerieLightboxNext { right: clamp(0.625rem, 3vw, 2.1875rem); }


/* ============================================================
   22. LISTE DES ARTICLES (Articles + filtre Blogue)
   Réutilise le header + filtre de la galerie de projets, mais en liste
   (image à gauche, contenu à droite) plutôt qu'en grille de cartes.
   ============================================================ */

.articlesListeSection {
  padding: clamp(4rem, 8vw, 7.5rem) 0;
}

.articlesListeHeader {
  display:       flex;
  gap:           2.1875rem;
  align-items:   center;
  margin-bottom: clamp(2rem, 4vw, 3.75rem);
}

.articlesListeTitreWrap { flex: 1 0 0; }

.articlesListeTitre {
  font-family:    var(--t3m-font-titre);
  font-weight:    500;
  font-size:      clamp(2rem, 4.5vw, 3.375rem);
  line-height:    1.1;
  letter-spacing: -0.02em;
  color:          var(--t3m-noir);
}

.articlesListeLigne {
  display:       block;
  width:         6.25rem;
  height:        0.375rem;
  background:    var(--t3m-or);
  border-radius: 0.25rem;
  margin-top:    1.25rem;
}

.articlesListeFiltreWrap {
  position:    relative;
  flex-shrink: 0;
}
.articlesListeFiltreWrap i {
  color: var(--t3m-or);
}

.articlesListeFiltre {
  appearance:         none;
  -webkit-appearance: none;
  border:             1px solid var(--t3m-or);
  border-radius:      0;
  background:         transparent;
  padding:            1.25rem 2.5rem 1.25rem 1.25rem;
  font-family:        'Open Sans', sans-serif;
  font-size:          1.0625rem;
  color:              var(--t3m-noir);
  cursor:             pointer;
}

.articlesListeFiltreChevron {
  position:       absolute;
  right:          1.25rem;
  top:            50%;
  transform:      translateY(-50%);
  font-size:      0.8125rem;
  color:          var(--t3m-noir);
  pointer-events: none;
}

/* Liste (empilée, séparée par un filet) */
.articlesListeListe {
  display:        flex;
  flex-direction: column;
}

.articlesListeItem {
  display:        flex;
  align-items:    center;
  gap:            clamp(1.5rem, 3vw, 2.75rem);
  padding:        clamp(1.5rem, 3vw, 2.1875rem) 0;
  border-bottom:  1px solid rgba(20, 20, 20, 0.12);
  color:          inherit;
  transition:     opacity var(--t3m-transition);
}
.articlesListeItem:first-child { padding-top: 0; }
.articlesListeItem:hover { opacity: 0.7; }

.articlesListeItem.isHidden { display: none; }

.articlesListeImgWrap {
  flex:          0 0 auto;
  width:         clamp(9rem, 16vw, 14rem);
  aspect-ratio:  4 / 3;
  overflow:      hidden;
  border-radius: 0.25rem;
}

.articlesListeImg {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.articlesListeContenu {
  flex:          1 1 0;
  display:       flex;
  flex-direction: column;
  gap:           0.5rem;
}

.articlesListeThemes {
  font-family:    'Rubik', sans-serif;
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color:          var(--t3m-or);
}

.articlesListeDot {
  display:          inline-block;
  width:            0.25rem;
  height:           0.25rem;
  border-radius:    50%;
  background-color: var(--t3m-or);
  margin:           0 0.5rem;
  vertical-align:   middle;
}

.articlesListeItemTitre {
  font-family:    var(--t3m-font-titre);
  font-weight:    500;
  font-size:      clamp(1.25rem, 2vw, 1.625rem);
  line-height:    1.2;
  letter-spacing: -0.01em;
  color:          var(--t3m-noir);
  margin:         0;
}

.articlesListeExtrait {
  font-family: 'Open Sans', sans-serif;
  font-size:   1rem;
  line-height: 1.5;
  color:       var(--t3m-noir-doux);
  margin:      0;
}

.articlesListeDate {
  font-family:    'Open Sans', sans-serif;
  font-size:      0.875rem;
  color:          rgba(20, 20, 20, 0.55);
}


/* ============================================================
   23. SINGLE ARTICLE (single.php)
   Bannière = même technique que .pageHeaderSection (fond + voile),
   surtitre/titre réutilisent .heroSurtitre/.heroTitre.
   ============================================================ */

.singleArticleDate {
  display:        block;
  margin-top:     1.25rem;
  font-family:    'Open Sans', sans-serif;
  font-size:      0.9375rem;
  color:          rgba(233, 231, 226, 0.75);
}

.singleArticleSection {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.singleArticleContenu {
  max-width: 57.1875rem; /* même largeur de lecture que .content100Inner */
  margin:    0 auto;
}

/* Espacement par défaut du contenu WYSIWYG (the_content) */
.singleArticleContenu > * + * { margin-top: 1.5rem; }
.singleArticleContenu img {
  max-width:     100%;
  height:        auto;
  border-radius: 0.25rem;
}

.singleArticleRetour {
  max-width:  57.1875rem;
  margin:     clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(20, 20, 20, 0.12);
}

.singleArticleRetour a {
  display:        inline-flex;
  align-items:    center;
  gap:            0.625rem;
  font-family:    var(--t3m-font-titre);
  font-size:      0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  color:          var(--t3m-noir);
  transition:     color var(--t3m-transition);
}
.singleArticleRetour a:hover { color: var(--t3m-or); }


/* ============================================================
   Media queries 1/3 + 2/3
   ============================================================ */

/* Header — hamburger à 1120px (seuil dédié, distinct du 1024px utilisé
   pour le reste des mises en page tablette) */
@media (max-width: 1120px) {
  .siteHeader    { background-color: var(--t3m-noir); }
  .headerNav     { display: none; }
  .hamburgerBtn  { display: flex; }
  .mobileOverlay { display: block; }
}

/* Barre CTA mobile — fixe en bas, ≤ 1024px (Appeler + Soumission)
   z-index sous l'overlay du menu mobile (920) et la lightbox (1000) */
.mobileCtaBar { display: none; }

@media (max-width: 1024px) {
  .mobileCtaBar {
    position:         fixed;
    left:             0;
    right:            0;
    bottom:           0;
    z-index:          900;
    display:          flex;
    gap:              0.625rem;
    padding:          0.625rem var(--t3m-pad-ctn) calc(0.625rem + env(safe-area-inset-bottom));
    background-color: var(--t3m-noir);
    box-shadow:       0 -0.25rem 1rem rgba(0, 0, 0, 0.25);
  }
  .mobileCtaBtn {
    flex:            1 1 0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.875rem 1rem;
    font-size:       0.9375rem;
    text-align:      center;
  }
  /* Réserve la hauteur de la barre pour ne pas masquer le bas du footer */
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --t3m-pad-ctn:     1.25rem;
    --t3m-pad-section: clamp(2rem, 5vw, 3.5rem);
  }

  .t3m-col-1-4,
  .t3m-col-3-4,
  .t3m-col-full { width: 100%; }

  .t3m-btns { flex-direction: column; align-items: flex-start; }
  .t3m-btns.t3m-btns--center { align-items: center; }

  /* Hero mobile */
  .heroTitre { letter-spacing: -0.03125rem; }
  .heroBtns  { flex-direction: column; align-items: flex-start; }
  .heroBtns .btn-t3m { width: 100%; text-align: center; }

  /* Footer — 1 colonne sur mobile (m-full force déjà 100% sur les 4 colonnes) */
  .footerSocial      { margin-top: 1.25rem; }
  .footerNavList     { margin-top: 0.5rem; }
  .footerContactInfo { margin-top: 0.5rem; }
  .footerBottom     { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .footerBottom > * { flex: none; width: 100%; }
  .footerLegal      { flex-wrap: wrap; }

  /* Conversion Banner — 1 slide visible sur mobile */
  .convBannerImgWrap { height: 10rem; }

  /* Perks — 1 colonne sur mobile */
  .perkItem { flex: 1 1 100%; }

  /* Services — 1 colonne sur mobile */
  .servicesGrid        { grid-template-columns: 1fr; }
  .serviceCard--grande { grid-column: span 1; }
  .serviceCardContent  { padding: 1.5rem; }
  /* Hauteur mini au lieu de fixe : évite que le texte soit coupé (illisible)
     quand le titre/texte est un peu long sur mobile */
  .serviceCard         { height: auto; min-height: clamp(18rem, 33vw, 30rem); }

  /* Avantages — 1 colonne sur mobile */
  .avantagesGrid { grid-template-columns: 1fr; }

  /* Grille 3 colonnes — 1 colonne sur mobile */
  .grille3colGrid { grid-template-columns: 1fr; }

  /* Galerie de projets — 1 colonne + filtre sous le titre sur mobile */
  .gallerieHeader { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .gallerieGrid   { grid-template-columns: 1fr; }

  /* Liste des articles — image au-dessus du texte, filtre sous le titre */
  .articlesListeHeader { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .articlesListeItem   { flex-direction: column; align-items: flex-start; }
  .articlesListeImgWrap { width: 100%; }

  /* Lightbox — boutons plus compacts sur mobile */
  .gallerieLightboxNav  { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
  .gallerieLightboxClose { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
}

/* Mobile XS */
@media (max-width: 480px) {
  .btn-t3m { width: 100%; text-align: center; }
}

/* Form FAQ — empile en 100% dès la tablette (<1024px) */
@media (max-width: 1024px) {
  .formFaqInner { flex-direction: column; }
  .formFaqColForm,
  .formFaqColSide { flex: 1 1 auto; }
}


/* ============================================================
   MEDIA QUERIES TABLETTE (≤ 1024px)
   Placé après TOUT le CSS composant pour éviter que le CSS
   desktop (même spécificité, position plus tardive) ne l'écrase.
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --t3m-pad-section:    clamp(2.5rem, 6vw, 5rem);
    --t3m-pad-section-sm: clamp(1.75rem, 4vw, 3rem);
    --t3m-pad-ctn:        clamp(1rem, 5%, 3rem);
  }

  .t3m-col-1-2,
  .t3m-col-1-3,
  .t3m-col-2-3 { width: 100%; }

  .t3m-col-1-4,
  .t3m-col-3-4 { width: 50%; }

  /* Hero — empilé sur tablette */
  .heroSection       { margin-top: 0; }
  .pageHeaderSection { margin-top: 0; }
  .pageHeaderInner   { padding-top: clamp(2rem, 4vw, 3.75rem); }
  .heroGrid       { grid-template-columns: 1fr; gap: 0; padding: 0 0 2rem; }
  .heroImageCol   { min-height: 22rem; border-radius: 0; }
  .heroContentCol { padding: 2.5rem clamp(1.25rem, 5%, 2rem) 2.5rem; }

  /* Services — tablette */
  .servicesHeader      { flex-direction: column; align-items: flex-start; }
  .servicesHeaderLeft  { flex: 1 1 100%; }
  .servicesHeaderRight { flex: 1 1 100%; min-width: 0; }
  .servicesDesc        { text-align: left; }
  .servicesGrid        { grid-template-columns: repeat(2, 1fr);  }
  .serviceCard,
  .serviceCard--grande { grid-column: span 2; }



  /* Galerie de projets — 2 colonnes sur tablette */

  /* Content 50/50 — empilé sur tablette */
  .c5050Inner    { grid-template-columns: 1fr; }
  .c5050ImageCol { align-self: auto; }
  /* Inversion par position réelle (col1/col2), pas par type (image/texte) —
     sinon l'inversion donne le mauvais résultat quand l'image est en colonne 2. */
  .c5050--invMobile .c5050Inner > *:first-child { order: 2; }
  .c5050--invMobile .c5050Inner > *:last-child  { order: 1; }

  /* Content 1/3 + 2/3 — empilé sur tablette */
  .c1323Card                        { grid-template-columns: 1fr; }
  .c1323ColMedia                    { min-height: 18rem; }
  .c1323--invMobile .c1323ColTexte  { order: 2; }
  .c1323--invMobile .c1323ColMedia  { order: 1; }

  /* Footer — 2 colonnes par rangée sur tablette */
  .footerColBrand,
  .footerColNav,
  .footerColContact { flex: 1 1 45%; min-width: 16rem; }
  .footerSlogan     { max-width: 100%; }

  /* Conversion Banner */
  .convBannerImgWrap { height: clamp(10rem, 25vw, 14rem); }
}


/* Section grille déplacée en début de fichier (section 08) */

/* Cache la barre de progression d'upload Ninja Forms */
.nf-fu-progress {
  display: none;
}


/* Galerie de projets — 2 colonnes uniquement en vraie tablette (pas en téléphone) */
@media (min-width: 769px) and (max-width: 1024px) {
  .gallerieGrid { grid-template-columns: repeat(2, 1fr); }
}

/* Perks — 2 colonnes uniquement en vraie tablette (pas en téléphone) */
@media (min-width: 769px) and (max-width: 1024px) {
  .perkItem { flex: 1 1 40%; }
}

/* Avantages — 2 colonnes uniquement en vraie tablette (pas en téléphone) */
@media (min-width: 769px) and (max-width: 1024px) {
  .avantagesGrid { grid-template-columns: repeat(2, 1fr); }
}

/* Grille 3 colonnes — 2 colonnes uniquement en vraie tablette (pas en téléphone) */
@media (min-width: 769px) and (max-width: 1024px) {
  .grille3colGrid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   MEDIA QUERIES SUPPLÉMENTAIRES (1440 / 1366 / 1024)
   ============================================================ */
@media screen and (max-width: 1440px) {
  .btn-t3m {
    padding:   1rem 1.5rem;
    font-size: 0.875rem;
  }
  .servicesHeaderRight {
    flex: 0 0 40%;
  }
}

@media screen and (max-width: 1366px) {
  .navMenu li:not(.navCtaOutline, .navCtaOr) a {
    text-transform: none;
    letter-spacing: 0;
  }
  .servicesGrid {
    grid-template-columns: repeat(4, 1fr);
  }
  .serviceCard {
    grid-column: span 2;
  }
  .serviceCardOverlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.4) 60%);
  }
}

@media screen and (max-width: 1024px) {
  .serviceCard--boiteNoire .serviceCardContent {
    background-color: rgba(20, 20, 20, 0);
  }
  .serviceCard--boiteNoire .serviceCardOverlay {
    display: block;
  }
  .serviceCardOverlay {
    background: rgba(0, 0, 0, 0.7);
  }
  .servicesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}