/*
Theme Name: Coloc Starter
Theme URI: https://coloc.coop/
Author: Studio Creatif Coloc
Author URI: https://coloc.coop/
Description: Theme starter optimise pour WordPress avec ACF, WPML, Yoast, Ninja Forms. Grille 12 colonnes, pixel perfect, responsive.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coloc
Tags: custom, grid, responsive, acf, wpml
*/

/* ========================================
   00. FONTS — Lexend (auto-hébergé, police variable)
   Fichier : assets/fonts/lexend/Lexend-VariableFont_wght.woff2
   ======================================== */
   @font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100 900; /* plage variable : couvre toutes les graisses */
    font-display: swap;
    src: url('assets/fonts/lexend/Lexend-VariableFont_wght.woff2') format('woff2');
  }

/* ========================================
   01. CSS VARIABLES
   ======================================== */
   :root {
    /* --- Prologue 2026 — UI Kit (maquette Figma) --- */
    /* Couleurs de texte */
    --text-bleu: #153A7C;
    --text-bleu-fonce: #02428C;
    --text-mauve: #633E7B;
    --text-mauve-clair: #AB7CD0;
    --text-blanc: #FFFFFF;

    /* Couleurs de fond */
    --bg-blanc: #FFFFFF;
    --bg-mauve-pale: #F5F0F9;
    --bg-bleu: #153A7C;
    --bg-bleu-fonce: #02428C;
    --bg-mauve: #633E7B;

    --font-family: 'Lexend', sans-serif;
    --font-size-base: 20px;
    --line-height-base: 1.3;
    --letter-spacing: -0.03em;

    /* --- Typographie Prologue (maquette Figma) --- */
    /* Tailles fluides clamp(min mobile, fluide, max @1920px) : min ~375px → max 1920px */
    --fs-h1: clamp(34px, 2px + 2.5vw, 52px);
    --fs-h2: clamp(28px, 2px + 2.15vw, 46px);
    --fs-h3: clamp(22px, 2px + 1.45vw, 32px);
    --fs-h4: clamp(18px, 2px + 1.25vw, 24px);
    --fs-p: clamp(16px, 1.2px + 1vw, 18px);
    --fs-small: clamp(14px, 1px + 0.9vw, 16px);
    --fs-nav: clamp(16px, 1.2px + 1vw, 18px);
    --fs-copyright: clamp(11px, 10.76px + 0.06vw, 12px); /* 11 → 12px */

    /* Interlignes (ratio sans unité) */
    --lh-h1: 1.12;          /* 58/52 */
    --lh-h2: 1.17;          /* 54/46 */
    --lh-h3: 1.25;          /* 40/32 */
    --lh-h4: 1.58;          /* 38/24 */
    --lh-p: 1.67;           /* 30/18 */
    --lh-small: 1.25;       /* 20/16 */
    --lh-nav: 1;            /* 100% */
    --lh-copyright: 1;      /* 100% */

    /* Letter-spacing : 0 sur tous les formats Figma */

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    /* Espacements de sections : valeurs fixes par palier (media queries) au lieu de clamp() fluide */
    --spacing-xl: 60px;
    --spacing-xxl: 70px;

    --container-max: 1920px;
    --gutter: 10.8rem;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-full: 100px;

    --menu-direction: right;
    --menu-speed: 300ms;
    --menu-overlay-opacity: 0.5;
    --menu-overlay-blur: 4px;
  }

/* ========================================
   02. RESET & BASE
   ======================================== */
   *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-family);
    color: var(--text-bleu);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body.menu-open { overflow: hidden; }

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

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

  a:hover { text-decoration: none; }

/* Hover mauve par défaut sur tous les liens du site.
   Les boutons sont exclus (ils gardent leur propre couleur). */
   a:hover:not(.btn):not(.btn-cta):not(.btn-primary):not(.btn-secondary):not(.btnBrun):not(.resource-single-btn):not(.pass-submit):not(.footer-submit):not(.tab-btn) {
    color: var(--text-mauve);
  }

  ul, ol { list-style: none; }

/* Les champs de formulaire (dont <button>) n'héritent pas de la police :
   on le force, sinon ils s'affichent en police système (preflight désactivé). */
   button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  .wpml-ls-statics-footer {
    display: none;
  }

/* Sélecteur de langue WPML (header + menu mobile) : lien texte bleu, cf. maquette */
#masthead .wpml-ls,
.mobile-lang .wpml-ls {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: 0;
}
#masthead .wpml-ls ul,
.mobile-lang .wpml-ls ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
}
#masthead .wpml-ls li,
.mobile-lang .wpml-ls li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#masthead .wpml-ls a.wpml-ls-link,
.mobile-lang .wpml-ls a.wpml-ls-link {
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
  background: none !important;
  color: var(--text-bleu);
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
#masthead .wpml-ls a.wpml-ls-link:hover,
.mobile-lang .wpml-ls a.wpml-ls-link:hover { color: var(--text-mauve); }
#masthead .wpml-ls .wpml-ls-native,
.mobile-lang .wpml-ls .wpml-ls-native { color: inherit; font-weight: 400; letter-spacing:0!important; }

.mobile-lang { margin-top: 1.5rem; }

svg * {
  transition: fill var(--transition), stroke var(--transition);
}

.padLeftInt {
  padding-left: 3.8em;
}
.padRightInt {
  padding-right: 3.8em;
}

/* ========================================
   03. TYPOGRAPHY
   ======================================== */
   h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 400;
  }

  h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: 0;
    font-weight: 400;
    margin-bottom: 1.2888888888888888rem;
  }

/* Titre des pages intérieures (voir page.php) */
.page-header .page-title {
  color: var(--text-bleu);
  margin-bottom: 0.7rem;
}

/* Sous-titre de page (champ ACF « soustitre_page », optionnel) */
.page-header .page-subtitle {
  color: var(--text-mauve);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  margin: 0;
}

/* Tags à droite du titre (pages enfants de services) */
.page-tag {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--text-mauve);
  border-radius: 100px;
  color: var(--text-mauve);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  white-space: nowrap;
}
h2 { 
  font-size: var(--fs-h2); 
  line-height: var(--lh-h2); 
  letter-spacing: 0; 
  color: var(--text-bleu); 
}
h3 { 
  font-size: var(--fs-h3); 
  line-height: var(--lh-h3); 
  letter-spacing: 0; 
  color: var(--text-bleu); 
  margin-bottom: 1.1888888888888888rem;
}
h4 { 
  font-size: var(--fs-h4); 
  line-height: var(--lh-h4); 
  letter-spacing: 0; 
  font-weight: 400; 
  color: var(--text-bleu); 
}
h5 { 
  font-size: 1.1rem; 
  font-weight: 400; 
  letter-spacing: -0.03em; 
}
h6 { 
  font-size: 0.8rem; 
  font-weight: 400; 
  letter-spacing: -0.03em; 
}

p {
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  font-weight: 400;
  letter-spacing: 0;
}

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

/* Autres formats texte (maquette Figma) */
.text-small     { 
  font-size: var(--fs-small);     
  line-height: var(--lh-small);     
  letter-spacing: 0; 
  margin-bottom: 0.5555555555555556em!important;
  color: var(--bg-mauve);
}
.text-nav       { font-size: var(--fs-nav);       line-height: var(--lh-nav);       letter-spacing: 0; }
.text-copyright { font-size: var(--fs-copyright); line-height: var(--lh-copyright); letter-spacing: 0; }

/* ========================================
   04. LAYOUT
   ======================================== */
   .site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .site-main { flex: 1; }

  .maxW {
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
  }

  .container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    width: 100%;
  }

/* Gouttière responsive : voir section 17. RESPONSIVE (fin de fichier) */

.section-full {
  display: block;
  width: 100%;
}

/* ========================================
   05. SPACING UTILITIES
   ======================================== */
   .padTB60 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
   .padTB40 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
   .padTB { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
   .padBottom { padding-bottom: var(--spacing-xl);}
   .padTop { padding-top: var(--spacing-xl);}
   .padLR { padding-left: var(--gutter); padding-right: var(--gutter); }
   .padTB0 { padding-top: 0; }
   .padB0 { padding-bottom: 0; }
   .marB0 { margin-bottom: 0; }
   .marT15 { margin-top: 1.5rem; }
   .mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
   .px-0 { padding-left: 0 !important; padding-right: 0 !important; }

/* ========================================
   06. BACKGROUND UTILITIES
   ======================================== */
   .bg-white { background-color: var(--bg-blanc); }
   .bg-primary { background-color: var(--bg-bleu); }
   .bg-beige { background-color: var(--bg-mauve-pale); }
   .bg-green { background-color: var(--bg-mauve-pale); }
   .bg-blue-light { background-color: var(--bg-mauve-pale); }

/* ========================================
   07. FLEX UTILITIES
   ======================================== */
   .flex-center { display: flex; align-items: center; }
   .flex-between { display: flex; align-items: center; justify-content: space-between; }
   .flex-top { display: flex; align-items: flex-start; }

   .inverted { direction: rtl; }
   .inverted > * { direction: ltr; }

   .text-left { text-align: left; }
   .text-center { text-align: center; }
   .text-right { text-align: right; }

/* ========================================
   08. BUTTONS
   ======================================== */
   .btn {
    display: inline-block;
    text-align: center;
    border-radius: var(--radius-full);
    padding: 0.8em 1.6em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    margin-top: 2.2222222222222223em;
  }

  .btn-primary { background-color: var(--bg-bleu); color: var(--text-blanc); }
  .btn-primary:hover { background-color: var(--bg-bleu-fonce); color: var(--text-blanc); }

  .btn-secondary { background-color: var(--bg-mauve); color: var(--text-blanc); }
  .btn-secondary:hover { background-color: var(--bg-mauve); color: var(--text-blanc); }

/* ========================================
   09. 12-COLUMN GRID
   ======================================== */
/* DÉSACTIVÉ — remplacé par la grid Tailwind (grid grid-cols-12 / col-span-*)
   directement dans les templates .php. Ne pas réactiver sans retirer les
   classes .row/.col des templates.

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) * -0.5);
  margin-right: calc(var(--gutter) * -0.5);
}

.col {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--gutter) * 0.5);
  padding-right: calc(var(--gutter) * 0.5);
}

.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
*/

/* Font-size responsive (--font-size-base), logo, .hidden-* : voir section 17. RESPONSIVE */

.ctn-2col { padding-left: 16.666667%; padding-right: 16.666667%; }
.ctn-3col { padding-left: 25%; padding-right: 25%; }
.ctn-4col { padding-left: 33.333333%; padding-right: 33.333333%; }
.ctn-5col { padding-left: 41.666667%; padding-right: 41.666667%; }
.ctn-6col { padding-left: 50%; padding-right: 50%; }

/* Print styles already at bottom */

/* Inline-style replacements */
.titre-section-text { margin-top: 1rem; }

/* ========================================
   10. HEADER
   ======================================== */
/* Placement (grid/flex) géré en Tailwind dans header.php.
   Ici : styles répétés (logo, liens, bouton, couleurs). */

   #masthead .btn-cta {
    margin-top: 0;
  }
/* Logo */
.custom-logo-link img, .custom-logo { width: 115px; max-width: 115px; height: auto; }
.site-title { font-size: 1.5rem; font-weight: 700; color: var(--text-bleu); }

/* Menu principal (desktop) — l'espacement horizontal vient de Tailwind (gap-[51px]) */
.main-menu .menu li { position: relative; }

.main-menu .menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-bleu);
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
  white-space: nowrap;
  transition: color var(--transition);
}

/* Hover mauve sur les liens du menu parent */
.main-menu .menu > li > a:hover,
.main-menu .menu > .menu-item-has-children:hover > a {
  color: var(--text-mauve);
}

/* Chevron : niveau 1 vers le bas, niveaux imbriqués vers la droite (flyout) */
.main-menu .menu > .menu-item-has-children > a::after {
  content: "\f078"; /* fa-chevron-down */
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  font-style: normal;
  font-size: 0.7em;
  line-height: 1;
  margin-left: 6px;
  transition: transform var(--transition);
  -webkit-font-smoothing: antialiased;
}
.main-menu .menu > .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}
.main-menu .menu .sub-menu .menu-item-has-children > a::after {
  content: "\f054"; /* fa-chevron-right */
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  font-style: normal;
  font-size: 0.65em;
  line-height: 1;
  margin-left: 12px;
  -webkit-font-smoothing: antialiased;
}

/* Sous-menus (communs à tous les niveaux) */
.main-menu .menu .sub-menu {
  position: absolute;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 265px;
  max-width: 20em;
  padding: 8px;
  background-color: var(--bg-blanc);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(21, 58, 124, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
}

/* Niveau 2 : sous le parent */
.main-menu .menu > li > .sub-menu {
  top: 100%;
  left: -1em;
  margin-top: 12px;
}
/* Pont invisible pour ne pas perdre le survol entre l'item et son menu */
.main-menu .menu > .menu-item-has-children > .sub-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

/* Niveau 3+ : à droite du parent */
.main-menu .menu .sub-menu .sub-menu {
  top: -8px;
  left: 100%;
  margin-left: 12px;
  transform: translateX(8px);
}
.main-menu .menu .sub-menu .menu-item-has-children > .sub-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  width: 12px;
  height: 100%;
}

/* Affichage au survol du parent DIRECT uniquement (chaque niveau indépendant) */
.main-menu .menu > .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-menu .menu .sub-menu .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Liens des sous-menus : bloc, coin arrondi, survol mauve pâle */
.main-menu .menu .sub-menu li { position: relative; border: 0; }
.main-menu .menu .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-bleu);
  font-size: var(--fs-small);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
  transition: background-color var(--transition), color var(--transition);
}
.main-menu .menu .sub-menu a:hover,
.main-menu .menu .sub-menu .menu-item-has-children:hover > a {
  background-color: var(--bg-mauve-pale);
  color: var(--text-mauve);
}

/* Bouton CTA du header (mauve, coins 5px — cf. maquette) */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 17px;
  border-radius: 5px;
  background-color: var(--bg-mauve);
  color: var(--text-blanc) !important;
  font-size: var(--fs-nav);
  line-height: 30px;
  white-space: nowrap;
  transition: var(--transition);
  margin-top: 0.5em;
  border: 1px solid var(--bg-mauve);
  letter-spacing: 0.006em;
}
/* Icône lien externe (fa-light fa-arrow-up-right-from-square) sur le bouton
   « Buy from a Canadian bookseller » — même icône que les ressources externes */
.book-single-summary .btn-cta::after {
  content: "\f08e";
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  font-style: normal;
  margin-left: 10px;
}
/* Pas de marge haute si un paragraphe précède le bouton
   (bouton frère direct, ou bouton enveloppé dans un <p> qui suit un <p>) */
   p + .btn-cta,
   p + p > .btn-cta { margin-top: 0; }
   .btn-cta:hover {
    background: transparent;
    color: var(--text-blanc);
    border: 1px solid var(--bg-mauve);
    color: var(--bg-mauve) !important;
  }

/* Sélecteur de langue */
.lang-selector .lang-link {
  color: var(--text-bleu);
  font-size: var(--fs-nav);
  white-space: nowrap;
}
.lang-selector .lang-link:hover { color: var(--text-mauve); }

/* Nav réduite entre 1024 et 1280px : voir section 17. RESPONSIVE */

/* ========================================
   11. MOBILE MENU
   ======================================== */
   .menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
  }

  .hamburger {
    display: block;
    width: 28px;
    height: 2px;
    background-color: var(--bg-bleu);
    position: relative;
    transition: var(--transition);
  }

  .hamburger::before, .hamburger::after {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background-color: var(--bg-bleu);
    position: absolute;
    transition: var(--transition);
  }

  .hamburger::before { top: -8px; }
  .hamburger::after { top: 8px; }

  .menu-toggle[aria-expanded="true"] .hamburger { background-color: transparent; }
  .menu-toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg); top: 0; }
  .menu-toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg); top: 0; }

  .menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, var(--menu-overlay-opacity));
    backdrop-filter: blur(var(--menu-overlay-blur));
    -webkit-backdrop-filter: blur(var(--menu-overlay-blur));
    z-index: 999;
    opacity: 0;
    pointer-events: none; /* ne bloque pas les clics quand le menu est fermé */
    transition: opacity var(--menu-speed);
  }

  .menu-overlay.is-visible { opacity: 1; pointer-events: auto; }

  .mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 100%;
    max-width: none;
    height: 100vh;
    background-color: var(--bg-blanc);
    z-index: 1000;
    /* Plus de glissement : simple fondu à l'ouverture */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--menu-speed) ease, visibility var(--menu-speed) ease;
    overflow-y: auto;
    padding: 1.5rem; /* aligné sur le px-6/pt-6 du header */
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  }

  .mobile-menu.is-open { opacity: 1; visibility: visible; }

/* Barre du haut du drawer : logo à gauche (même taille que la nav), X à droite */
.mobile-menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.mobile-menu-bar .custom-logo { margin: 0; }

/* Bouton fermer en style hamburger (X), identique au hamburger d'ouverture */
.menu-close {
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
}
.menu-close .hamburger { background-color: transparent; }
.menu-close .hamburger::before { transform: rotate(45deg); top: 0; }
.menu-close .hamburger::after  { transform: rotate(-45deg); top: 0; }

/* Quand le menu est ouvert, on masque le hamburger du header : un seul X (celui du drawer) */
body.menu-open .menu-toggle { display: none; }

/* Le CTA du header reste toujours à sa place, au-dessus du drawer (ouvert ou fermé) :
   z-index fixe (non conditionné à body.menu-open) pour qu'il ne bouge jamais. */
body.menu-open .header-cta {
  position: absolute;
  right: 18%;
  z-index: 1002; /* au-dessus du drawer (1000) et du bouton X (1001) */
}

.mobile-menu .menu { padding: 0; }
.mobile-menu .menu li { display: block; }
.mobile-menu .menu li a { display: block; padding: 0.75rem 0; font-size: 1.1rem; font-weight: 400; }
/* Sous-pages : police + espacement réduits (sélecteur plus spécifique que .menu li a) + couleur mauve */
.mobile-menu .menu .sub-menu a { font-size: 0.85rem; padding: 0.35rem 0; color: var(--text-mauve); }
/* Petits-enfants (sous-sous-menu) : encore plus petit + fond mauve pâle (même mauve que derrière la flèche) */
.mobile-menu .menu .sub-menu .sub-menu a {
  font-size: 0.75rem;
  background-color: var(--bg-mauve-pale);
  padding-left: 0.75rem;
}

/* Page parent : le lien (titre) navigue ; le bouton chevron à droite ouvre le sous-menu. */
.mobile-menu .menu-item-has-children { position: relative; }
.mobile-menu .menu-item-has-children > a { padding-right: 3.25rem; }

.mobile-menu .submenu-toggle {
  position: absolute;
  top: 0.45rem;              /* centre le cercle sur la ligne du lien */
  right: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-mauve-pale);
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text-bleu);
}
.mobile-menu .submenu-toggle::after {
  content: "\f078"; /* fa-chevron-down (comme le menu desktop) */
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--text-bleu);
  transition: transform var(--transition);
  -webkit-font-smoothing: antialiased;
}
.mobile-menu .menu-item-has-children.is-active > .submenu-toggle::after { transform: rotate(180deg); }
/* Cercle mauve réservé au 1er niveau : les flèches des enfants et petits-enfants n'en ont pas */
.mobile-menu .sub-menu .submenu-toggle { background: none; }

.mobile-menu .sub-menu {
  display: none;
  padding-left: 0; /* liens alignés à gauche comme le menu principal */
  opacity: 0;
  transition: opacity var(--menu-speed);
}

.mobile-menu .menu-item-has-children.is-active > .sub-menu {
  display: block;
  opacity: 1;
}
/* Niveaux imbriqués : pas d'indentation, alignés à gauche */
.mobile-menu .sub-menu .sub-menu {
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
}

/* Espacement entre la liste des pages et le bouton CTA (ID pour battre #masthead .btn-cta) */
#masthead .mobile-menu .btn-cta { margin-top: 1em; }

.mobile-menu .lang-selector {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex;
  gap: 0.5rem;
}

/* Bascule menu desktop -> hamburger (max 1023.98px) : voir section 17. RESPONSIVE */

/* ========================================
   12. FOOTER
   ======================================== */
   #colophon { 
    padding: 0; 
    margin-top: var(--spacing-xl);
  }

/* --- Bande Newsletter (mauve) --- */
.footer-newsletter { background-color: var(--bg-mauve); color: var(--text-blanc); }
/* Contenu WYSIWYG (Options client) : tout en blanc */
.footer-nl-wysiwyg { color: var(--text-blanc); }
.footer-nl-wysiwyg * { color: var(--text-blanc); }
/* 1er paragraphe = surtitre (petit) */
.footer-nl-wysiwyg p:first-child { font-size: var(--fs-small); line-height: normal; }
/* Paragraphes de texte (sauf surtitre) = format h4 */
.footer-nl-wysiwyg p:not(:first-child) { font-size: var(--fs-h4); line-height: var(--lh-h4); }
/* Pas de margin-bottom sur p et h2 dans le footer (override .wysiwyg h2) */
.footer-newsletter .footer-nl-wysiwyg p { 
  margin-bottom: 0; 
}
.footer-newsletter .footer-nl-wysiwyg h2 {
  margin-bottom: 1rem !important;
}

/* Champs du formulaire newsletter */
.footer-input {
  width: 100%;
  padding: 10px 15px;
  border: none;
  background-color: var(--bg-blanc);
  color: var(--text-mauve);
  font-size: var(--fs-p);
  line-height: 30px;
}
.footer-input::placeholder { color: var(--text-mauve); opacity: 1; }
.footer-submit {
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: var(--bg-blanc);
  color: var(--text-mauve);
  font-size: var(--fs-p);
  line-height: 30px;
  cursor: pointer;
  margin-top: 0.7222222222222222em;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.footer-submit:hover {
  background-color: var(--bg-mauve);
  border: 1px solid var(--bg-blanc);
  color: var(--text-blanc);
}

/* --- Formulaire Newsletter Ninja Forms (id 5 EN / id 6 FR, WPML) ---
   Reproduit l'apparence de l'ancien formulaire statique (.footer-input / .footer-submit).
   !important nécessaire : Ninja Forms impose ses propres styles, sinon ces règles n'ont aucun effet. */
.footer-newsletter-form .nf-form-cont,
.footer-newsletter-form .nf-form-layout,
.footer-newsletter-form form,
.footer-newsletter-form .nf-form-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.footer-newsletter-form .nf-form-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.footer-newsletter-form .nf-field-container {
  margin: 0 !important;
  padding: 0 !important;
}
/* Labels masqués : le placeholder tient lieu d'étiquette, comme l'ancien formulaire (sr-only) */
.footer-newsletter-form .nf-field-label {
  display: none !important;
}
.footer-newsletter-form .nf-field-element input:not([type="submit"]) {
  width: 100% !important;
  padding: 10px 15px !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: var(--bg-blanc) !important;
  color: var(--text-mauve) !important;
  font-size: var(--fs-p) !important;
  line-height: 30px !important;
  box-shadow: none !important;
}
.footer-newsletter-form .nf-field-element input::placeholder {
  color: var(--text-mauve) !important;
  opacity: 1 !important;
}
.footer-newsletter-form .nf-form-fields-required {
  display: none !important;
}
.footer-newsletter-form .nf-error-wrap.nf-error {
  font-size: 14px !important;
}
.footer-newsletter-form input[type="submit"],
.footer-newsletter-form .ninja-forms-field-button {
  width: auto !important;
  align-self: flex-start !important;
  padding: 10px 18px !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  background-color: var(--bg-blanc) !important;
  color: var(--text-mauve) !important;
  font-size: var(--fs-p) !important;
  line-height: 30px !important;
  cursor: pointer !important;
  margin-top: 0.7222222222222222em !important;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition) !important;
}
.footer-newsletter-form input[type="submit"]:hover,
.footer-newsletter-form .ninja-forms-field-button:hover {
  background-color: var(--bg-mauve) !important;
  border: 1px solid var(--bg-blanc) !important;
  color: var(--text-blanc) !important;
}

/* --- Bas de page (blanc) --- */
.footer-bottom { background-color: var(--bg-blanc); color: var(--text-bleu); }
.footer-logo-img { width: 114px; height: auto; }

.social-icons a i {
  font-size: 23px;
  color: var(--bg-mauve);
}

/* Contact : téléphone + courriel côte à côte */
.footer-telephone{
  margin-right: 1.6666666666666667em;
}
.footer-contact-info { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
.footer-contact-info p { margin: 0; }
.footer-contact-info,
.footer-contact-info a { color: var(--text-bleu); font-size: var(--fs-p); }

.footer-social a { color: var(--text-bleu); font-size: 20px; transition: var(--transition); }

/* Copyright */
.footer-credit, .footer-copy { color: var(--text-bleu); font-size: var(--fs-copyright); margin: 0; }
.footer-credit a, .footer-copy a { color: var(--text-bleu); text-decoration: underline; }

/* Hover footer : bleu -> mauve, mauve -> bleu */
.footer-bottom a { transition: color var(--transition); }
.footer-bottom a:hover,
.footer-bottom a:hover i { color: var(--text-mauve); }
.social-icons a i { transition: color var(--transition); }
.social-icons a:hover i { color: var(--text-bleu); }

/* ========================================
   13. NINJA FORMS
   ======================================== */
   .ninja-forms-wrapper .nf-field-container { margin-bottom: 15px; }

/* Case infolettre (#nf-field-5) : sa propre ligne, pleine largeur.
   La ligne parente doit pouvoir wrapper, sinon la cellule reste collée. */
   .ninja-forms-wrapper .nf-row,
   .ninja-forms-wrapper .field-wrap { flex-wrap: wrap; }

   .ninja-forms-wrapper .nf-cell:has(#nf-field-5),
   #nf-field-5-container {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: -1; /* remonte la case au-dessus du courriel ; enlève cette ligne pour la mettre en dessous */
  }
  .ninja-forms-wrapper .label-above .nf-field-label { margin-bottom: 2px; }
  .ninja-forms-wrapper label { font-size: 14px; font-weight: 500; }

  .nf-form-fields-required {
    display: none;
  }

  .nf-error-wrap.nf-error {
    font-size: 14px !important;
  }
  .nf-error-field-errors {
    display: none !important;
  }

  #nf-field-5-container {
    margin-bottom: 0 !important;
  }

  .ninja-forms-wrapper input:not([type="submit"]),
  .ninja-forms-wrapper select.ninja-forms-field:not([multiple]),
  .ninja-forms-wrapper .list-select-wrap .nf-field-element > div {
    padding: 8px 12px;
    height: auto;
    color: var(--text-bleu);
    border: 1px solid var(--text-mauve);
    border-radius: var(--radius-sm);
    background-color: var(--bg-blanc);
  }

  .ninja-forms-wrapper .list-select-wrap .nf-field-element > div { height: 35px; }
  .ninja-forms-wrapper .list-radio-wrap .nf-field-element ul { margin-top: 5px; }
  .ninja-forms-wrapper .listradio-wrap li,
  .ninja-forms-wrapper .list-radio-wrap .nf-field-element li label { margin-bottom: 4px; padding-left: 0; }
  .ninja-forms-wrapper .nf-error.field-wrap .nf-field-element:after { display: none; }
  .ninja-forms-wrapper .nf-error .nf-error-msg { font-size: 12px; color: #c0392b; }
  .ninja-forms-wrapper textarea { background-color: var(--bg-blanc); border: 1px solid var(--text-mauve); border-radius: var(--radius-sm); padding: 12px; }

  .nf-field-element input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid rgb(99, 62, 123, 0.3) !important;
    border-radius: 5px;
    font-size: var(--fs-p);
    line-height: var(--lh-p);
    color: var(--text-bleu);
  }
  .field-wrap textarea,
  .nf-field-element textarea,
  .ninja-forms-field.nf-element {
    border: 1px solid rgb(99, 62, 123, 0.3) !important;
  }
  .nf-field-label label {
    color: var(--text-bleu);
    font-size: var(--fs-p);
    line-height: var(--lh-p);
    font-weight: 400 !important;
  }

  .ninja-forms-wrapper .nf-form-content input[type="submit"],
  .ninja-forms-wrapper .ninja-forms-field-button {
    border-radius: var(--radius-full);
    padding: 0.8em 1.6em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
  }

  .nf-field-container.subForm { background-color: var(--bg-blanc); padding: 15px; }

/* --- Formulaires Ninja Forms génériques (WYSIWYG) ---
   Ciblé sur le conteneur natif .nf-form-cont (toujours présent).
   Les règles .passContactBox restent prioritaires (plus spécifiques). */

/* Labels masqués : le placeholder tient lieu d'étiquette */
.nf-form-cont .nf-field-label { display: none !important; }

/* Placeholders en bleu */
.nf-form-cont input::placeholder,
.nf-form-cont textarea::placeholder {
  color: var(--text-bleu) !important;
  opacity: 1 !important;
}

/* Textarea : même bordure, padding et taille de police que les autres champs */
.nf-form-cont textarea {
  border: 1px solid var(--bg-mauve-pale) !important;
  border-radius: 5px !important;
  padding: 10px 15px !important;
  font-size: var(--fs-p) !important;
  line-height: var(--lh-p) !important;
  color: var(--text-bleu) !important;
}

/* Bouton mauve + hover identique aux autres boutons du site */
.nf-form-cont input[type="submit"],
.nf-form-cont input[type="button"],
.nf-form-cont button,
.nf-form-cont .ninja-forms-field-button {
  background-color: var(--bg-mauve) !important;
  color: var(--text-blanc) !important;
  border: 1px solid var(--bg-mauve) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}
.nf-form-cont input[type="submit"]:hover,
.nf-form-cont input[type="button"]:hover,
.nf-form-cont button:hover,
.nf-form-cont .ninja-forms-field-button:hover {
  background: transparent !important;
  color: var(--bg-mauve) !important;
  border-color: var(--bg-mauve) !important;
}

/* --- Formulaires Ninja Forms 23 & 29 (maquette Figma node 228-165) ---
   Champs blancs sans bordure + bouton blanc arrondi, texte mauve — sur fond mauve de la section.
   #nf-form-XX-cont : conteneur natif de chaque formulaire, surclasse les regles .nf-form-cont generiques.
   !important requis : Ninja Forms impose ses propres styles. */

/* Champs empiles avec 10px d'ecart (cf. maquette) */
#nf-form-23-cont .nf-form-content,
#nf-form-29-cont .nf-form-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
#nf-form-23-cont .nf-field-container,
#nf-form-29-cont .nf-field-container { margin: 0 0 10px !important; }

/* Labels masques : le placeholder tient lieu d'etiquette */
#nf-form-23-cont .nf-field-label,
#nf-form-29-cont .nf-field-label { display: none !important; }

/* Champs : fond blanc, sans bordure ni coin arrondi, texte + placeholder mauve */
#nf-form-23-cont .nf-field-element input:not([type="submit"]),
#nf-form-23-cont .nf-field-element textarea,
#nf-form-29-cont .nf-field-element input:not([type="submit"]),
#nf-form-29-cont .nf-field-element textarea {
  width: 100% !important;
  padding: 10px 15px !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: var(--bg-blanc) !important;
  color: var(--text-mauve) !important;
  font-size: var(--fs-p) !important;
  line-height: var(--lh-p) !important;
  box-shadow: none !important;
}
#nf-form-23-cont .nf-field-element input::placeholder,
#nf-form-23-cont .nf-field-element textarea::placeholder,
#nf-form-29-cont .nf-field-element input::placeholder,
#nf-form-29-cont .nf-field-element textarea::placeholder {
  color: var(--text-mauve) !important;
  opacity: 1 !important;
}

/* Bouton : blanc, coins 5px, texte mauve, largeur au contenu, ~25px sous les champs */
#nf-field-31,
#nf-field-26 {
  width: auto !important;
  align-self: flex-start !important;
  margin-top: 15px !important;
  padding: 10px 18px !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  background-color: var(--bg-blanc) !important;
  color: var(--text-mauve) !important;
  font-size: var(--fs-p) !important;
  line-height: var(--lh-p) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}
/* Hover : inversion mauve/blanc, coherent avec le reste du site */
#nf-field-31:hover,
#nf-field-26:hover {
  background-color: var(--bg-mauve) !important;
  border-color: var(--bg-blanc) !important;
  color: var(--text-blanc) !important;
}

/* ========================================
   14. SLICK SLIDER
   ======================================== */
   .slick-slider { position: relative; }

   .slick-dots {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    list-style: none;
    padding: 0.3rem 0.6rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-full);
  }

  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 2px;
    cursor: pointer;
  }

  .slick-dots li button {
    border: none;
    background: none;
    font-size: 0;
    line-height: 0;
    padding: 0;
    cursor: pointer;
  }

  .slick-dots li button:before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--bg-bleu);
    opacity: 0.25;
    transition: var(--transition);
  }

  .slick-dots li.slick-active button:before { opacity: 0.75; }
  .slick-slide img { display: block; width: 100%; }

/* ========================================
   15. FLEXIBLE CONTENT BLOCKS
   ======================================== */

/* 50/50 Content — commun aux deux variantes */
.content-h5050 .h5050-image img { width: 100%; height: 100%; object-fit: cover; }
.content-h5050.border-bottom { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.content-h5050 .h5050-titre { margin-bottom: var(--spacing-lg); }
.content-h5050 + .section-full.block-listing{
  padding-top: 0;
}
/* 50/50 suivi d'un bloc cartes-services : padding bottom réduit à lg */
.content-h5050:has(+ .section-full.block-cartes-services) {
  padding-bottom: var(--spacing-lg);
}
/*.page-header + .content-h5050 {
    padding-bottom: var(--spacing-lg);
}*/

/* Colonnes de texte : sans padding interne, typo maquette (listes à puces, sous-titre H4) */
.content-h5050 .h5050-text { padding: 0; }
.content-h5050 .h5050-text h4 { margin-bottom: var(--spacing-xs); }
.content-h5050 .h5050-text ul { list-style: disc; padding-left: 0.8rem; }

/* Réduit la taille de la puce des listes à puces (sans changer le texte) */
ul li::marker { font-size: 0.8em; }
.content-h5050 .h5050-text li {
  margin-bottom: 0.6em;
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  letter-spacing: 0.002em;
}

/* Défaut (non mauve) : fond blanc, texte bleu — cf. maquette « the middle of everything ».
   Le bleu vient déjà des styles globaux (h2/h3/h4/p + body). */

/* Option fond mauve pâle + texte mauve (cf. maquette « Who trusts us ») */
/* Padding vertical du bloc 50/50 (sauf 1er = bottom seul, dernier = top seul) */
.content-h5050 {
  padding-top: var(--spacing-xxl);    /* responsive : 40 → 70px (figé à 70px dès 1920) */
  padding-bottom: var(--spacing-xxl);
}
/* ≤ 1680px : padding réduit à 50px */
@media (max-width: 1680px) {
  .content-h5050 {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
/* ≤ 1440px : padding réduit à 30px (l'emporte sur la règle 1680px ci-dessus) */
@media (max-width: 1440px) {
  .content-h5050 {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.content-h5050.is-first { padding-top: 0; }
.content-h5050.is-last  { padding-bottom: 0; }
/* Dernier bloc de la page (juste avant le footer) : pas de padding bottom */
/*#primary > .content-h5050:last-child,
#primary > .block-3-cartes:last-child,
#primary > .block-cta:last-child { padding-bottom: 0; }*/

/* 50/50 sur une sous-page de service : padding-top 4.2rem, pas de padding-bottom */
/*.content-h5050.serviceChild-h5050 {
  padding-top: clamp(2rem, 4vw, 4.2rem); /* responsive : 2rem mobile → 4.2rem desktop 
  padding-bottom: 0;
}*/

.content-h5050--mauve {
  background-color: var(--bg-mauve-pale);
  padding: 3em 0;
}
.content-h5050--mauve .h5050-titre,
.content-h5050--mauve .h5050-text,
.content-h5050--mauve .h5050-text h2,
.content-h5050--mauve .h5050-text h3,
.content-h5050--mauve .h5050-text h4,
.content-h5050--mauve .h5050-text p,
.content-h5050--mauve .h5050-text ul { color: var(--text-mauve); }

/* Bannière d'accueil : layout géré en Tailwind (grid/flex) dans banniere.php. */
.homeBanner {
  padding-bottom: var(--spacing-xxl);
}

/* Légende sur la photo (champ « Légende » de l'image WP) */
.banniere-legende {
  position: absolute;
  left: 30px;
  bottom: 24px;
  right: 30px;
  margin: 0;
  color: var(--bg-mauve-pale);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  padding: var(--spacing-md);
  padding-left: 0.6rem;
  padding-bottom: 1.3rem;
  letter-spacing: 0.003rem;
}

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

/* Espacement du contenu texte : sous les H2, les H4, et entre les paragraphes
   (s'applique au wysiwyg et aux colonnes du 50/50). Valeurs en rem, ajustables. */
   .wysiwyg h2, .h5050-text h2 { margin-bottom: 2rem; }  /* 30px */
   .wysiwyg h4, .h5050-text h4 { margin-bottom: 1rem; }    /* 20px */
   .wysiwyg p,  .h5050-text p  { margin-bottom: 1.4rem; }    /* 20px entre paragraphes */
   .h5050-text > *:last-child { margin-bottom: 0; }

/* Listes à puces visibles dans tout le contenu wysiwyg (le reset global les enlève) */
.wysiwyg ul, .mce-content-body ul { list-style: disc; padding-left: 1.25rem; }
.wysiwyg ol, .mce-content-body ol { list-style: decimal; padding-left: 1.25rem; }
.wysiwyg li, .mce-content-body li {
  margin-bottom: var(--spacing-xs);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
}

/* Note de bas de page : petit chiffre en exposant (format WYSIWYG « footnote-ref ») */
.footnote-ref {
  font-size: 0.6em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
}

/* --- Bloc « Cartes services (pages enfants) » --- */

/* Séparateur horizontal en haut de la section « autres services »
   (Figma = #F5F0F9, trop clair sur blanc ; on garde un mauve léger visible) */
   .ligne-separateur { 
    width: 100%; 
    height: 2px; 
    background-color: rgba( 99, 62, 123, 0.15 );
    margin: clamp(1.25rem, 4vw, 5em) 0; /* responsive : 1.25rem mobile → 5em desktop */
  }
  .block-cartes-services .cartes-services-soustitre {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    color: var(--text-bleu);
  }

/* Annule le gap Tailwind lg:gap-[40px] (titre/sous-titre) dans ce bloc */
@media (min-width: 1025px) {
  .block-cartes-services .lg\:gap-\[40px\] {
    gap: 0;
  }
}

/* Carte = lien cliquable, titre en haut, lien en bas (justify-between) */
.carte-service {
  background-color: var(--bg-mauve-pale);
  transition: var(--transition);
}
/* Hover identique à block-3-cartes : fond mauve plein + texte blanc */
.carte-service:hover { background-color: var(--bg-mauve); }
.carte-service:hover * { color: var(--bg-blanc); }
.carte-service-titre { color: var(--text-mauve); font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0; }
.carte-service-lien,
.resource-single-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  color: var(--text-mauve);
  font-size: var(--fs-p);
  line-height: 30px;
  white-space: nowrap;
}
.resource-single-btn {
  margin-top: 0.5em;
}
/* Flèche Font Awesome 7 Pro (fa-light fa-arrow-right-long) */
.carte-service-lien::after,
.resource-single-btn::after {
  content: "\f178";
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  font-style: normal;
  line-height: 1;
}

/* --- Bloc « 3 colonnes cartes » --- */
.block-3-cartes { 
  padding-top: var(--spacing-xxl); 
  padding-bottom: var(--spacing-xxl);
}
.block-3-cartes .carte--blanc .carte-texte {
  gap: 24px;
}
/* Carte mauve : le dernier élément (lien) reste collé en bas de la carte */
.carte--mauve .carte-texte {
  flex: 1 1 auto;
}
/* Seul le lien (span/a) est poussé en bas ; le texte garde son flux naturel */
.carte--mauve .carte-texte > a:last-child,
.carte--mauve .carte-texte > p:last-child:has(> a) {
  margin-top: auto;
}
.carte-mauve h3 {
  margin-bottom: 0;
}

/* Fond des cartes (option mauve / blanc) */
.carte--mauve {
  background-color: var(--bg-mauve-pale);
  transition: background-color var(--transition);
}
/* Transitions douces sur le texte, les liens et la flèche des cartes */
.carte-texte,
.carte-texte *,
.carte--mauve .carte-texte a,
.carte--mauve .carte-texte a::after,
.carte-service-titre,
.carte-service-lien,
.carte-service-lien::after,
.resource-single-btn {
  transition: color var(--transition), background-color var(--transition);
}
.carte--mauve:has(a):hover {
  background-color: var(--bg-mauve);
}
.carte--mauve:has(a):hover * {
  color: var(--bg-blanc);
}
/* Lien « more about » : mauve clair uniquement au survol DU lien (pas de la carte) */
.carte-service-lien:hover,
.carte--mauve .carte-texte a:hover,
.resource-card--book .resource-single-btn:hover {
  opacity: 0.7;
}
.carte--blanc {
  background-color: var(--bg-blanc);
  border: 1px solid var(--bg-mauve-pale);
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
}

/* Texte des cartes : toujours en mauve (cf. maquette) */
.carte-texte, .carte-texte * { color: var(--text-mauve); }

/* Lien « more about » des cartes mauves pâles : flèche Font Awesome 7 Pro.
   La flèche hérite de la couleur du texte, donc elle change au hover. */
   .carte--mauve .carte-texte a {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
  }
  .carte--mauve .carte-texte a::after {
    content: "\f178"; /* fa-arrow-right-long */
    font-family: "Font Awesome 7 Pro";
    font-weight: 300; /* fa-light */
    font-style: normal;
    line-height: 1;
  }

/* Listing Cards */
.listingArticles { display: flex; flex-wrap: wrap; gap: var(--gutter); }
.listingArticles .sameHeight { display: flex; flex-direction: column; }

/* Toggles */
.toggle-item { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.toggle-item .toggle-title { cursor: pointer; padding: var(--spacing-md) 0; font-weight: 600; position: relative; }
.toggle-item .toggle-title:after { content: "+"; position: absolute; right: 0; transition: var(--transition); }
.toggle-item.is-active .toggle-title:after { content: "-"; }
.toggle-item .toggle-content { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.toggle-item.is-active .toggle-content { max-height: 1000px; padding-bottom: var(--spacing-md); }

/* Tabs */
.tabs-nav { display: flex; gap: 0.5rem; margin-bottom: var(--spacing-lg); flex-wrap: wrap; }
.tabs-nav .tab-btn {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: 1px solid var(--text-mauve);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: var(--transition);
}
.tabs-nav .tab-btn.is-active { background-color: var(--bg-bleu); color: var(--text-blanc); border-color: var(--text-bleu); }
.tab-content { display: none; }
.tab-content.is-active { display: block; }

/* --- Bloc « Services (onglets) » (surcharge les styles d'onglets ci-dessus) --- */
/* Colonnes pleine largeur */
.block-services {
  padding: var(--spacing-xxl) 0;
}
.block-services .services-left  { background-color: var(--bg-mauve); }
.block-services .services-right { background-color: var(--bg-mauve-pale); }

/* Colonne gauche : texte blanc sur mauve */
.block-services .services-titre { 
  color: var(--text-blanc); 
  font-weight: 700;
}
/* Le panneau actif remplit la hauteur pour pousser les boutons en bas */
.block-services .services-panneaux { display: flex; flex-direction: column; flex: 1; }
.block-services .tab-content.is-active { display: flex; flex-direction: column; flex: 1; }
.block-services .btnCtn {
  margin-top: auto;
}
.block-services .services-soustitre {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--text-blanc);
}
.block-services .btn-cta {
  margin-top: 0 ;
}

/* Onglets = pastilles (blanc plein / mauve, actif = contour blanc) */
.block-services .tabs-nav { margin-bottom: 0; gap: 10px; }
.block-services .tab-btn {
  padding: 9px 17px;
  border-radius: 5px;
  border: 1px solid var(--text-blanc);
  background-color: var(--bg-blanc);
  color: var(--text-mauve);
  font-size: var(--fs-nav);
  line-height: 30px;
  border: 1px solid var(--bg-mauve);
}
.block-services .tab-btn:hover {
  color: #fff;
  background-color:: var(--bg-mauve);
  border: 1px solid #fff;
}
.block-services .tab-btn.is-active {
  background-color: transparent;
  color: var(--text-blanc);
  border-color: var(--text-blanc);
}

/* Colonne droite : titre + description en mauve */
.block-services .service-titre { color: var(--text-mauve); margin-bottom: 20px; }
.block-services .service-desc { margin-bottom: 1.5em; }
.block-services .service-desc,
.block-services .service-desc * { color: var(--text-mauve); }

/* Lien « voir tous les services » : souligné + flèche */
.block-services .lien-tous { 
  color: var(--text-mauve); 
  text-decoration: none; 
  font-size: var(--fs-nav); 
}
.block-services .lien-tous:hover,
.block-services .lien-tous:hover::after { 
  opacity: 0.7; 
}
.block-services .lien-tous span { 
  text-decoration: underline; 
  letter-spacing: 0.005em;
}
/* Flèche « voir tous les services » — Font Awesome 7 Pro (::after) */
.block-services .lien-tous::after {
  content: "\f138"; /* fa-circle-arrow-right */
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  font-style: normal;
  font-size: 1.1em;
  line-height: 1;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

/* Au-delà de 1920px : les bg (colonnes) restent pleine largeur, mais le contenu
   s'aligne sur le conteneur maxW en augmentant le padding externe des colonnes. */
   @media (min-width: 1920px) {
    .block-services .services-left {
      padding-left: calc((100vw - var(--container-max)) / 2 + var(--gutter));
    }
    .block-services .services-right {
      padding-right: calc((100vw - var(--container-max)) / 2 + var(--gutter));
    }
  }

/* CTA */
.cta-section { text-align: center; padding: var(--spacing-xxl) var(--gutter); }
.cta-section .btn { margin-top: var(--spacing-md); }

/* --- Bloc « CTA Contact » --- */
.block-cta {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
}
/* Si un h2 est suivi d'un autre h2, le premier n'a pas de margin bottom */
.block-cta h2:has(+ h2) {
  margin-bottom: 0;
}

/* ========================================
   Page protégée par mot de passe
   ======================================== */
   .getPagePass {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
  }
  .passBox.passBox--full {
    max-width: none;
    width: 100%;
  }
/* Boîte de droite (email) en mauve pâle ; celle de gauche reste blanche */
.passContactBox.passBox--full { background-color: var(--bg-mauve-pale); }
.passBox {
  max-width: 560px;
  margin: 0 auto;
  padding: 30px 30px;
  border: 1px solid var(--bg-mauve-pale);
  border-radius: 10px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.passLock {
  font-size: 48px;
  line-height: 1;
  color: var(--text-mauve);
}
.passLock--sm { font-size: 46px; flex: none;}
.passTitle {
  color: var(--text-bleu);
  margin: 0;
}

.passContact {
  color: var(--text-bleu);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  margin: 0;
}
.passContact a { color: var(--text-mauve); text-decoration: underline; }

/* Boîte contact (texte + Ninja Form) : texte gauche, formulaire droite */
.passContactBox .passIntro { text-align: left; }
.passContactBox .passForm { width: 100%; }
.passContactBox .nf-form-cont { width: 100% !important; }
.passIntro {
  padding-right: 2em;
}

/* 50 / 50 à partir du desktop (min 768px) : voir section 17. RESPONSIVE */

/* Style du Ninja Form (!important : Ninja Forms impose ses propres styles) */
/* Boîtes email-access : on masque les labels, seuls les placeholders restent */
.passContactBox .nf-field-label {
  display: none !important;
}
.passContactBox .nf-field-container {
  margin-bottom: 0 !important;
}
#nf-field-5-wrap,
#nf-field-21-wrap {
  margin: 0.8em 0 !important;
}
#nf-field-5-wrap .nf-field-label,
#nf-field-5-wrap label,
#nf-field-21-wrap .nf-field-label,
#nf-field-21-wrap label {
  font-size: 14px !important;
  line-height: 1.37 !important;
}

#nf-field-29,
#nf-field-23 {
  margin-bottom: 5px;
}

/* Placeholders en bleu dans les boîtes email-access */
.passBox input::placeholder,
.passContactBox .nf-form-content input::placeholder {
  color: var(--text-bleu);
  opacity: 1;
}

/* Label accessible masqué visuellement (formulaire de mot de passe) */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.passContactBox .nf-form-content input:not([type="button"]),
.passContactBox .nf-form-content textarea {
  width: 100% !important;
  height: auto !important;
  padding: 10px 15px !important;
  border: 1px solid var(--bg-mauve-pale) !important;
  border-radius: 5px !important;
  background: #fff !important;
  color: var(--text-bleu) !important;
  font-size: var(--fs-p) !important;
  line-height: var(--lh-p) !important;
  box-shadow: none !important;
}
.passContactBox .nf-form-content input[type="button"],
.passContactBox .nf-form-content input[type="submit"],
.passContactBox .nf-form-content button {
  width: auto !important;
  background-color: var(--bg-mauve) !important;
  color: var(--text-blanc) !important;
  border: 1px solid var(--bg-mauve) !important;
  border-radius: 5px !important;
  padding: 10px 18px !important;
  font-size: var(--fs-p) !important;
  line-height: 30px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}
.passContactBox .nf-form-content input[type="button"]:hover,
.passContactBox .nf-form-content input[type="submit"]:hover,
.passContactBox .nf-form-content button:hover {
  background: transparent !important;
  color: var(--bg-mauve) !important;
  border: 1px solid var(--bg-mauve) !important;
}
.passContactBox .nf-error-msg { color: #c0392b !important; }
.passContactBox .nf-form-fields-required {
  color: var(--text-mauve) !important;
  font-size: var(--fs-small) !important;
  flex: 1 0 100% !important; /* la note "* required" reste sur sa propre ligne */
}

#nf-field-4 {
  margin-right: 1em;
}

/* Toute la chaîne Ninja Forms occupe 100 % de la colonne, sans déborder */
.passContactBox .nf-form-cont,
.passContactBox .nf-form-layout,
.passContactBox form,
.passContactBox .nf-form-content,
.passContactBox nf-fields-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.passContactBox .nf-form-cont * { box-sizing: border-box; }
/* Les conteneurs de champs NF ont un padding gauche/droite qui fait déborder */
.passContactBox .nf-field-container,
.passContactBox .field-wrap,
.passContactBox .nf-field {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Le contenu du formulaire reste en bloc pleine largeur */
.passContactBox .nf-form-content { display: block !important; }
/* On ré-affiche le label pour la checkbox (masqué ailleurs) */
/* #nf-field-5 = formulaire EN, #nf-field-21 = formulaire FR (WPML) */
.passContactBox #nf-field-5-container .nf-field-label,
.passContactBox #nf-field-21-container .nf-field-label {
  display: block !important;
}

/* Formulaire */
.passForm { width: 100%; }
.pass-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 15px;
  text-align: left;
}
.pass-field {
  flex: 1 1 100%; /* champ sur toute la largeur -> bouton passe dessous */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pass-field label {
  color: var(--text-bleu);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
}
.pass-field input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid rgb(99, 62, 123, 0.3);
  border-radius: 5px;
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  color: var(--text-bleu);
}
.pass-submit {
  flex: none;
  background-color: var(--bg-mauve);
  color: var(--text-blanc);
  font-size: var(--fs-p);
  line-height: 30px;
  padding: 10px 18px;
  border: 1px solid var(--bg-mauve);
  border-radius: 5px;
  cursor: pointer;
  transition: var(--transition);
}
.pass-submit:hover {
  background: transparent;
  color: var(--bg-mauve);
  border: 1px solid var(--bg-mauve);
}
.password-error-message {
  color: #c0392b;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  margin: 0;
}

/* ========================================
   Liste de documents (PDF) + cadenas
   ======================================== */
   .block-liste-documents {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
  }
  .documents-title {
    color: var(--text-bleu);
    margin: 0;
  }
  .document-item {
    position: relative;
    border: 1px solid var(--bg-mauve-pale);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
  }
  .document-title {
    color: var(--text-bleu);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    margin: 0;
    flex: 1;
  }
  .document-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    background-color: var(--bg-mauve-pale);
    color: var(--text-mauve);
    white-space: nowrap;
  }
/* Variantes de couleur par catégorie (optionnel, ajuste selon tes catégories) */
.document-badge.badge-admin    { background-color: #eef2fb; color: var(--text-bleu); }
.document-badge.badge-sante    { background-color: #e9f6ef; color: #1b7a4b; }
.document-badge.badge-logement { background-color: #fbeef2; color: var(--text-mauve); }

.bloc-link {
  display: inline-flex;
  align-items: center;
  color: var(--text-mauve);
  font-size: var(--fs-p);
  line-height: 30px;
  text-decoration: underline;
  white-space: nowrap;
}
.bloc-link.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}

/* État verrouillé : overlay + cadenas, clic désactivé */
.document-item-protected {
  pointer-events: none;
}
.document-item-protected .lockOverlay {
  position: absolute;
  inset: 0;
  background: rgba(245, 240, 249, 0.75); /* mauve pâle translucide */
  border-radius: 10px;
  z-index: 1;
}
.document-item-protected .theLock {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 24px;
  line-height: 1;
  color: var(--text-mauve);
}
.document-item-protected > .document-title,
.document-item-protected > .document-badge,
.document-item-protected > .document-link {
  position: relative;
  z-index: 0;
}
.block-cta h4 {
  padding-bottom: 0.5555555555555556em;
  margin-bottom: 0;
}
.cta-card { background-color: var(--bg-mauve-pale); }

/* ========================================
   Bloc « Listing » — cartes Open Resources
   ======================================== */
   .block-listing {
    padding-top: var(--spacing-md);
  }
/* Carte cliquable */
.resource-card {
  border: 1px solid var(--bg-mauve-pale);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
  color: var(--text-bleu);
  transition: var(--transition);
}
/* Cartes livres : pas d'encadré (ni bordure, ni ombre, ni fond, ni padding de boîte) */
.resource-card--book {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
/* Hover cartes blanches : fond bleu + texte blanc, lien CTA blanc 50 % (Figma 237:1790) */
.resource-card:not(.resource-card--locked):not(.resource-card--book):hover,
.block-3-cartes .carte--blanc:has(a):hover {
  background-color: var(--bg-bleu);
  border-color: var(--bg-bleu);
  box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.01);
}

.carte.carte--blanc h4 {
  margin-bottom: 0;
}
.carte.carte--blanc p {
 margin-bottom: 0;
}
.resource-card:not(.resource-card--locked):not(.resource-card--book):hover,
.resource-card:not(.resource-card--locked):not(.resource-card--book):hover .resource-card-titre,
.resource-card:not(.resource-card--locked):not(.resource-card--book):hover .resource-card-resume,
.resource-card:not(.resource-card--locked):not(.resource-card--book):hover .resource-card-resume p,
.resource-card:not(.resource-card--locked):not(.resource-card--book):hover .resource-card-author,
.block-3-cartes .carte--blanc:has(a):hover .carte-texte,
.block-3-cartes .carte--blanc:has(a):hover .carte-texte * {
  color: #fff!important;
}
.resource-card:not(.resource-card--locked):not(.resource-card--book):hover .resource-card-lien,
.resource-card:not(.resource-card--locked):not(.resource-card--book):hover .resource-card-lien *,
.block-3-cartes .carte--blanc:has(a):hover .carte-texte a {
  color: rgba(255, 255, 255)!important;
}

.resource-card,
.resource-card-body,
.resource-card-resume,
.resource-card-titre {
  min-width: 0;
}
.resource-card-titre {
  margin-bottom: 0;
}
/* Titre plus petit (taille p) uniquement sur les cartes livres */
.resource-card--book .resource-card-titre {
  font-size: var(--fs-p);
  line-height: var(--lh-p);
}
.resource-card-resume,
.resource-card-resume p {
  color: var(--text-bleu);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  margin: 0;
}
.resource-card-resume p + p { margin-top: 1em; }
/* Date des cartes reliées (sidebar single) : petit et mauve */
.resource-card-date {
  color: var(--text-mauve);
  font-size: 0.8rem;
  margin: 0;
}
/* Lien « Read more » + icône Font Awesome 7 Pro */
.resource-card-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--text-bleu);
  font-size: var(--fs-p);
  line-height: 30px;
  text-decoration: none;
  white-space: nowrap;
}
.resource-card-lien-txt { text-decoration: underline; }
.resource-card-lien i { font-size: 21px; line-height: 1; }

/* Icône interne (duotone f138) : cercle bleu + chevron blanc */
.resource-card-icon {
  font-size: 21px;
  --fa-primary-color: #fff;              /* chevron */
  --fa-secondary-color: var(--bg-bleu);  /* cercle */
  --fa-secondary-opacity: 1;
}
/* Au survol (carte bleue) : on inverse pour garder le contraste */
.resource-card:not(.resource-card--locked):not(.resource-card--book):hover .resource-card-icon {
  --fa-primary-color: var(--bg-bleu);
  --fa-secondary-color: #fff;
}

/* Carte verrouillée (Email-access) : non cliquable + cadenas, sans overlay */
.resource-card--locked {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.resource-card--locked:hover {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}
/* Overlay mauve pâle translucide sur toute la carte */
.resource-card-overlay {
  position: absolute;
  inset: 0;
  background: rgb(21, 58, 124, 0.6); 
  z-index: 1;
}
/* Cadenas centré au-dessus de l'overlay */
.resource-card-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  font-size: 32px;
  line-height: 1;
}
/* Icône cadenas (fa-jelly fa-regular fa-lock) en ::after */
.resource-card-lock::after {
  content: "\f023";
  font-family: "Font Awesome 7 Jelly";
  font-weight: 400;
}
.resource-card--locked .resource-card-lien .bloc-link.disabled {
  color: var(--text-mauve);
  opacity: 0.5;
}

/* Carte 3-colonnes entièrement cliquable */
.carte--clickable { cursor: pointer; }

/* Carte livre (Book Recommendations) : image + auteur */
.resource-card-image {
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 5px;
}
.resource-card-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  max-height: 26rem;
  min-height: 22rem;
  object-fit: cover;
  transition: transform var(--transition);
}
/* Zoom au survol de la carte livre */
.resource-card--book:hover .resource-card-image img {
  transform: scale(1.05);
}
.resource-card-author {
  color: var(--text-mauve);
  font-size: var(--fs-small);
  line-height: var(--lh-p);
  margin: 0;
}
.book-single-tags {
  margin-bottom: 1em;
}

/* Pastilles de filtre (Book Recommendations) */
.book-filters {
  width: 100%;
  margin-bottom: 1.5em;
}
.book-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--bg-mauve-pale);
  background: var(--bg-mauve-pale);
  color: var(--text-mauve);
  font-size: var(--fs-small);
  line-height: 1;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
}
.book-filter-count {
  font-size: 0.75em;
  opacity: 0.7;
}
.book-filter:hover {
  border-color: var(--bg-mauve);
}
.book-filter.is-active {
  background: var(--bg-mauve);
  border-color: var(--bg-mauve);
  color: var(--text-blanc);
}

/* --- Single ressource « Open Resources » --- */
.block-single-resource {
  padding-top: var(--spacing-xl);
}
.block-single-resource .entry-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin: 0;
}
.resource-single-date {
  color: var(--text-mauve);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  margin: 0;
}
.resource-single-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Single « Book Recommendations » : couverture + méta / résumé --- */
.block-single-book {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xxl);
}
.book-single-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
.book-single-summary .book-single-title{
  margin-bottom: 0;
}
.book-single-cover {
  margin-bottom: 1em;
}
.book-single-cover img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 24rem;
  height: auto;
  object-fit: contain;
  border-radius: 5px;
}
.book-single-author {
  color: var(--text-mauve);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  margin: 0;
}
.book-single-year {
  color: var(--text-bleu);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  margin: 0;
}
.book-single-summary {
  color: var(--text-bleu);
  min-width: 0;
  overflow-wrap: break-word;
}
.book-single-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg-mauve-pale);
  color: var(--text-mauve);
  font-size: var(--fs-small);
  line-height: 1.4;
  text-decoration: none;
}
.resource-single-media img {
  max-height: 37em;
  object-fit: cover;
}
/* Bouton « Back to open resources » (Figma : flèche gauche + texte bleu) */
.resource-single-back {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 40px;
  color: var(--text-bleu);
  font-size: var(--fs-p);
  line-height: 30px;
}
.resource-single-back:hover span { text-decoration: underline; }
.lockedCtn {
  margin-bottom: var(--spacing-xl);
}

/* Corps de l'article : texte bleu, paragraphes 18px/30px */
.block-single-resource .entry-content {
  color: var(--text-bleu);
}
.block-single-resource .entry-content p {
  font-size: var(--fs-p);
  line-height: var(--lh-p);
}


/* ========================================
   TEAM — listing 4 colonnes + single (Figma 403:538)
   ======================================== */

/* Titre de section « Our Team » */
.block-team .team-titre {
  color: var(--text-bleu);
  margin: 0;
}
.block-team {
  padding-top: var(--spacing-lg);
}
/* ≤ 768px : la grille est trop proche de la section suivante sans espace en dessous */
@media (max-width: 768px) {
  .block-team,
  .block-single-team { padding-bottom: var(--spacing-xl); }
  /* min-height + aspect-ratio ensemble font bugger Safari iOS (la boîte dépasse sa colonne) : au mobile, le ratio 1/1 suffit */
  .team-card-image { min-height: 0; }
}

/* Carte membre : photo carrée + infos, entièrement en bleu */
/* La carte au complet est un <a> (plus de <a> imbriqués dans le markup) */
.team-card {
  color: var(--text-bleu);
  text-decoration: none;
  min-width: 0; /* évite que l'image force la carte (item grid/flex) à dépasser sa colonne -> scroll horizontal mobile */
}
.team-card-image {
  display: block;
  width: 100%; /* largeur explicite : évite un bug Safari/iOS où aspect-ratio + min-height élargit la boîte au-delà de sa colonne */
  margin-bottom: 10px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  min-height: 400px;
}
.team-card-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1); /* Noir & blanc : listing uniquement */
  /* transitions séparées (pas "all") pour éviter que le zoom et le N&B se désynchronisent visuellement */
  transition: transform var(--transition), filter var(--transition);
  transform: scale(1);
  will-change: transform; /* évite le recalcul de layout qui donne l'effet de tassement */
  backface-visibility: hidden;
}
.team-card:hover .team-card-image img {
  transform: scale(1.03);
  filter: grayscale(0);
}

.team-card-titre {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  /* couleur héritée de .team-card, plus besoin d'un <a> imbriqué ici */
}

/* Titres professionnels (ex. CPA, MA, HSDP) sous le nom */
.team-card-titles {
  margin: 0 0 0.8em 0;
  color: var(--text-bleu);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* Rôle / poste (petit texte) */
.team-card-role {
  margin: 0;
  color: var(--text-mauve);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* Lien « Learn More » + icône cercle/flèche duotone */
.team-card-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;   /* colle le lien au bas de la carte */
  padding-top: 20px;  /* espace minimum au-dessus du lien */
  color: var(--text-bleu);
  font-size: var(--fs-small);
  line-height: 1;
  text-decoration: none;
}
.team-card-lien-txt { 
  /*text-decoration: underline;*/
  font-size: var(--fs-p);
}
/* Icône Font Awesome 7 Pro (f138 : fa-circle-chevron-right) en ::after */
.team-card-lien::after {
  content: "\f138";
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
}
/* Hover : lien + icône en bleu 60 % */
.team-card-lien:hover {
  color: rgba(21, 58, 124, 0.6); /* #153A7C @ 60% */
}

/* Placeholder Team : fond mauve pâle + logo centré (pas d'image à la une) */
.team-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: var(--bg-mauve-pale);
}
.team-placeholder-logo {
  width: 40%;
  max-width: 180px;
  height: auto;
  opacity: 0.85;
}
/* Listing : petit logo centré dans les cartes (annule le cover/grayscale de .team-card-image img) */
.team-card-image.team-placeholder .team-placeholder-logo {
  width: auto;
  height: auto;
  max-width: 110px;
  object-fit: contain;
  filter: grayscale(1); /* N&B par défaut, couleur au hover (règle existante) */
}

/* Single Team : titres professionnels sous le nom */
.block-single-team .team-single-titles {
  color: var(--text-bleu);
  margin: 0 0 0.25em 0;
}

/* Single Team : rôle sous le titre */
.block-single-team .team-single-role {
  color: var(--text-mauve);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  margin: 0 0 1em 0;
}
/* Single Team : short bio (visible uniquement dans la single) */
.block-single-team .team-single-resume,
.block-single-team .team-single-resume p {
  color: var(--text-bleu);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  margin: 0;
}
.block-single-team .team-single-resume p + p { margin-top: 1em; }

/* Tout le texte de la carte en mauve (sauf le bouton) */
.block-cta .cta-surtitre,
.block-cta .cta-titre,  .block-cta .cta-titre *,
.block-cta .cta-texte,  .block-cta .cta-texte * { color: var(--text-mauve); }

/* ========================================
   17. RESPONSIVE — TOUTES LES MEDIA QUERIES
   Un bloc par breakpoint, du plus large au plus petit.
   Placé en fin de fichier pour l'emporter sur les règles de base
   (les @media n'ajoutent pas de spécificité : c'est l'ordre qui tranche).
   ======================================== */

/* ---- max 1600px ---- */
@media (max-width: 1680px) {
  :root { --gutter: 7rem; }
  .custom-logo-link img, .custom-logo { width: 100px !important; max-width: 100px !important; } /* logo réduit */

}

/* ---- max 1440px ---- */
@media (max-width: 1440px) {
  :root { --gutter: 3.5rem; }
  /* Bloc services : la gouttière centrale suit aussi le container (au lieu de 147px figé) */
  .block-services .services-left  { padding-right: var(--gutter); }
  .block-services .services-right { padding-left: var(--gutter); }
}

/* ---- 1024 → 1280px : nav resserrée (évite le retour à la ligne) ---- */
@media (min-width: 1025px) and (max-width: 1280px) {
 /* taille de police */
 #masthead .btn-cta { padding: 7px 13px; }                 /* padding du bouton CTA */
 #masthead .main-menu .menu { gap: 28px; }                 /* espacement entre les li (défaut Tailwind gap-[51px]) */
}

/* ---- Gap des 2 colonnes : identique entre le bloc CTA et le footer-newsletter, à toutes les tailles ----
   Spécificité .block-cta .grid / .footer-newsletter .grid (0,2,0) > classes Tailwind gap-* (0,1,0). */
   .block-cta .grid,
   .footer-newsletter .grid {
    gap: 20px; /* ≤ 1024px : colonnes empilées */
  }
  @media (min-width: 1025px) and (max-width: 1440px) {
    .block-cta .grid,
    .footer-newsletter .grid { gap: 60px; }
  }
  @media (min-width: 1441px) and (max-width: 1679px) {
    .block-cta .grid,
    .footer-newsletter .grid { gap: 147px; }
  }
  @media (min-width: 1680px) {
    .block-cta .grid,
    .footer-newsletter .grid { gap: 100px; }
  }

/* ---- Toutes les sections avec gap-[60px] : réduit à 40px sous 1440px ---- */
@media (max-width: 1440px) {
  .gap-\[60px\] { gap: 40px; }
}

/* ---- Toutes les sections avec gap-10 : réduit à 1rem à 1024px et moins ---- */
@media (max-width: 1024px) {
  .gap-10 { gap: 1rem; }
}

/* ---- text-center aligné à gauche à 1024px et moins ---- */
@media (max-width: 1024px) {
  .text-center { text-align: left; }
}

/* ---- max 1280px ---- */
@media (max-width: 1280px) {
  :root { --gutter: 2.5rem; }
  .custom-logo-link img, .custom-logo { width: 90px !important; max-width: 90px !important; } /* logo réduit */
  /* Bannière : on resserre le padding interne de la colonne texte (encore en 2 colonnes) */
  .homeBanner .padLeftInt { padding-left: 2rem; }
}

/* ---- max 1024px ---- */
@media (max-width: 1024px) {
  :root {
    --gutter: 2.5rem;
    --spacing-xl: 32px;
    --spacing-xxl: 36px;
  }
  .hidden-md { display: none !important; }
  /* Bannière empilée sur une colonne */

  .homeBanner .grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .homeBanner .padLeftInt { padding-left: 0; }           /* plus de décalage une fois empilé */
  /* Image pleine largeur ici (au lieu de la moitié en desktop) : ratio plus large pour garder une hauteur raisonnable */
  .homeBanner .banniere-image img { aspect-ratio: 4 / 3; }

  /* Boîte email (droite) : le champ prend toute la largeur, le bouton passe dessous */
  .passContactBox #nf-field-4-container {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  .wysiwyg h2, .h5050-text h2 { margin-bottom: 1rem; }
}

/* ---- max 1024.98px : bascule menu desktop -> hamburger (breakpoint lg Tailwind, décalé à 1025px) ---- */
@media (max-width: 1024.98px) {
  .menu-toggle { display: block; }
  .mobile-menu { display: block; }
  .menu-overlay { display: block; }
}

/* ---- min 768px : mise en page 50/50 du bloc mot de passe (Ninja Forms) ---- */
/* @media (min-width: 768px) {
  .passContactBox .passIntro,
  .passContactBox .passForm {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
} */

/* ---- max 930px : bouton du formulaire mot de passe sous le champ ---- */
@media (max-width: 930px) {
  .pass-form .pass-field { flex: 0 0 100%; }   /* le champ prend toute la largeur */
  .pass-submit { align-self: flex-start; }      /* le bouton passe dessous, aligné à gauche */
}

/* ---- max 768px ---- */
@media (max-width: 768px) {
  :root {
    --font-size-base: 18px;
    --gutter: 1.5rem;
    --spacing-xl: 24px;
    --spacing-xxl: 28px;
  }
  .hidden-sm { display: none !important; }
}

/* ---- max 700px : boutons de la colonne droite des services empilés ---- */
@media (max-width: 700px) {
  .block-services .btnCtn { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* Onglets = pastilles (blanc plein / mauve, actif = contour blanc) */
.block-services .tabs-nav { margin-bottom: 0; gap: 10px; }
.block-services .tab-btn {
    line-height: 25px;
    margin-bottom: 2px;
    text-align: left;
  }
}

/* ---- max 480px ---- */
@media (max-width: 480px) {
  :root {
    --font-size-base: 16px;
    --gutter: 1rem;
    --spacing-xl: 16px;
    --spacing-xxl: 20px;
  }
  /* h1-h4 gérés par clamp() dans :root — pas d'override ici */
  .hidden-xs { display: none !important; }
  .custom-logo-link img, .custom-logo { width: 70px !important; max-width: 70px !important; } /* logo réduit en mobile */
}

/* --- Listing logos --- */
.block-listing-logos .listing-logos-img {
  max-height: 125px;
  width: auto;
  object-fit: contain;
}
.block-listing-logos .listing-logos-item a { display: inline-flex; }

/* Grille : colonnes égales, max 6 par ligne (3 en tablette, 2 en mobile).
   En grid, une dernière rangée incomplète se remplit depuis la gauche
   (pas d'écartement aux bords comme avec space-between). */
   .listing-logos-grid {
    display: grid;
    grid-template-columns: repeat(var(--logo-cols, 6), 1fr);
    column-gap: 30px;
    row-gap: 40px;
    align-items: center;
  }
  @media (max-width: 1280px) {
    .listing-logos-grid { grid-template-columns: repeat(5, 1fr); } /* 5 par ligne */
  }
  @media (max-width: 1024px) {
    .listing-logos-grid { grid-template-columns: repeat(4, 1fr); } /* 4 par ligne */
  }
  @media (max-width: 768px) {
    .listing-logos-grid { grid-template-columns: repeat(2, 1fr); } /* 2 par ligne */
  }
/* Premier logo collé à gauche, dernier collé à droite */
.listing-logos-grid .listing-logos-item:first-child { justify-content: flex-start; }
.listing-logos-grid .listing-logos-item:last-child  { justify-content: flex-end; }

/* Moins de 4 logos : collés l'un à côté de l'autre, alignés à gauche */
.listing-logos-grid--few {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 60px;
  row-gap: 40px;
}
.listing-logos-grid--few .listing-logos-item { width: auto; }
.listing-logos-grid--few .listing-logos-item:first-child,
.listing-logos-grid--few .listing-logos-item:last-child { justify-content: center; }

/* Fond mauve pâle pleine largeur (option ACF) */
.block-listing-logos--mauve {
  background-color: var(--bg-mauve-pale);
  padding-bottom: var(--spacing-xl);
}

/* ---- Impression ---- */
@media print {
  #masthead, #colophon, .menu-toggle, .slick-dots { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
}