/*
Theme Name: Lifeshine Child
Description: Child theme for Lifeshine theme
Author: ThemeSpirit
Author URI: https://themespirit.com/
Template: lifeshine
Version: 1.0.0
*/
/* 1) Paragraphes WordPress alignés sur le "Corps" Elementor */
body p {
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  line-height: var(--e-global-typography-text-line-height);
  color: var(--e-global-color-text);
}

/* 2) Listes et blockquotes issus de WP */
body li,
body blockquote {
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  line-height: var(--e-global-typography-text-line-height);
  color: var(--e-global-color-text);
}

/* 3) Titres WP (ex. articles de blog) → mappés sur tes globals Elementor */
body h1 {
  font-family: var(--e-global-typography-primary-font-family);
  font-size: var(--e-global-typography-primary-font-size);
  line-height: var(--e-global-typography-primary-line-height);
  letter-spacing: var(--e-global-typography-primary-letter-spacing);
  color: var(--e-global-color-primary);
  font-weight: 700;
}

body h2 {
  font-family: var(--e-global-typography-secondary-font-family);
  font-size: var(--e-global-typography-secondary-font-size);
  line-height: var(--e-global-typography-secondary-line-height);
  letter-spacing: var(--e-global-typography-secondary-letter-spacing);
  color: var(--e-global-color-primary);
  font-weight: 600;
}

body h3 {
  font-family: var(--e-global-typography-text-font-family);
  font-size: var(--e-global-typography-h3-font-size, 1.6rem); /* fallback si tu n'as pas défini un H3 global dédié */
  line-height: 1.4;
  color: var(--e-global-color-primary);
  font-weight: 600;
}

/* 4) Liens dans le corps (légèrement distinctifs) */
body p a {
  color: var(--e-global-color-secondary);     /* ex: #216b5f */
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
body p a:hover {
  color: var(--e-global-color-accent);        /* ex: #c9a64b */
  text-decoration-thickness: 2px;
}
a {
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

/*Couleur du mega menu*/
.mega-menu-content-width>.sub-menu, .mega-menu-full-width>.sub-menu {
max-width: 100%;
	height: 620px;
}
.mega-menu-full-width>.sub-menu:before {
    background-color: #fff3e1;
}
.mega-menu-full-width>.sub-menu:before {
    position: absolute;
    content: "";
    display: block;
    background-color: #fff3e1;
    -webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 1px 1px #0000001a;
    height: 100%;
    width: 100%;
    /* width: 150vw; */ /*Je commente cette ligne*/
    top: 0;
    left: 0;  /*Je met le left à 0 */
    z-index: -1;
}
.container {
    width: 100%;
     padding-left: 0;  /*Je met le padding à 0*/
    padding-right: 0;  /*Je met le padding à 0*/
    margin-right: auto;
    margin-left: auto;
    max-width: var(--content-width);
}
.transparent-header .site-header {
    padding-top: 20px;
    padding-right: 0px!important; /*Je met le padding à 0*/
    padding-left: 0px!important; /*Je met le padding à 0*/
}
.nav-start, .nav-middle, .nav-end {
    padding-left: 15px; /*Je rajoute le padding ici*/
    padding-right: 15px; /*Je rajoute le padding ici*/
}

/* Exemple : si ton slider fait 700px de haut */
.site-header .has-mega-menu > .sub-menu {
  min-height: 620px;   /* tu cales sur la hauteur du slider */
  height: 620px;
  z-index: 1002;
}

.site-header .has-mega-menu > .sub-menu::before {
  height: 100%; /* suit automatiquement */
}

/* 1) Autoriser les retours à la ligne dans le méga-menu */
.site-header .has-mega-menu > .sub-menu,
.site-header .has-mega-menu > .sub-menu * {
  white-space: normal;
}

/* 2) Flexbox : laisser les colonnes se rétrécir (clé anti-scroll) */
.site-header .has-mega-menu > .sub-menu .e-con,
.site-header .has-mega-menu > .sub-menu .elementor-element {
  min-width: 0;
}

/* 3) Casser les mots/URLs très longs si besoin */
.site-header .has-mega-menu > .sub-menu a,
.site-header .has-mega-menu > .sub-menu p,
.site-header .has-mega-menu > .sub-menu li,
.site-header .has-mega-menu > .sub-menu h1,
.site-header .has-mega-menu > .sub-menu h2,
.site-header .has-mega-menu > .sub-menu h3 {
  overflow-wrap: anywhere;
  word-break: break-word; /* fallback anciens navigateurs */
}


/*Couleur des titres*/
.tit-color{
	color:#78ADA5;
}

/* =========================================================
   Cartes “Vous aimerez aussi” – CSS consolidé
   ========================================================= */

/* ---------- Thématiques : masquées puis visibles au survol ---------- */
.offre-card .hover-thematiques{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.offre-card:hover .hover-thematiques{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   GRILLE
   ========================================================= */
.offers-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;           /* toutes les cartes même hauteur */
}
@media (max-width: 1199px){
  .offers-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .offers-grid{ grid-template-columns: 1fr; gap: 22px; }
}

/* =========================================================
   CARTE : conteneur + hover + structure flexible
   ========================================================= */
.offre-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 1px 8px rgba(19,41,61,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow:hidden;

  /* structure */
  display:flex;
  flex-direction:column;
  height:100%;
}
.offre-card:hover,
.offre-card:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(19,41,61,.14);
}

/* wrapper Elementor interne */
.offre-card .elementor-widget-wrap{
  display:flex;
  flex-direction:column;
  flex-grow:1;
}

/* rendre toute la carte cliquable (Wrapper Link) */
.offre-card a:focus-visible{
  outline:2px solid #7b5bd6;
  outline-offset:2px;
}

/* =========================================================
   IMAGE
   ========================================================= */
.offre-card .offre-img img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}

/* =========================================================
   TITRE / EXCERPT / RYTHME
   ========================================================= */

/* Titre : clamp + hauteur mini → CTA toujours aligné */
.offre-card .titre .elementor-heading-title{
  line-height:1.25;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;     /* 2 lignes par défaut (passe à 3 si tu veux) */
  overflow:hidden;
  min-height:3em;         /* 2 × 1.25em */
}
/* Marge uniforme sous le widget titre */
.offre-card .titre.elementor-widget-heading{
  margin-bottom:.65rem;
}

/* Extrait : clamp + hauteur mini stable */
.offre-card .excerpt{
  color:#475569;
  margin-bottom:.75rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:3.6em;
}

/* Espace vertical entre widgets (hors pills) */
.offre-card .elementor-widget:not(:last-child){
  margin-bottom:.75rem;
}

/* Zone bas de carte (CTA + pills + badges) poussée en bas */
.offre-card .cta,
.offre-card .pills,
.offre-card .badges{
  margin-top:auto;
}
.offre-card .cta{ margin-bottom:.75rem; }
.offre-card .pills{ margin-bottom:.5rem; }

/* =========================================================
   PILLS (prix & durée)
   ========================================================= */

/* Ligne de pills */
.offre-card .pills{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;                  /* retour à la ligne si besoin */
}
/* Elementor ajoute des marges entre widgets : on supprime dans la ligne */
.offre-card .pills > .elementor-widget{ margin:0 !important; }

/* Style générique d’une pill */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.75rem .75rem;
  border-radius:10px;
  border:1px solid #badbcd;
  background:var(--e-global-color-secondary-10,#e9f7f1);
  color:var(--e-global-color-text,#2e3a35);
  font-weight:500;
  font-size:0.7rem;
  line-height:1;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Variantes + plafonds de largeur (pour garder l’alignement) */
.pill--price{
  --pill-bg:#e9f7f1;
  --pill-border:#cdece0;
  max-width:65%;
  word-break:break-word;
}
.pill--duration{
  --pill-bg:#f3f7fb;
  --pill-border:#d7e5f4;
  max-width:30%;
  word-break:break-word;
}

/* =========================================================
   BADGES (catégories / thématiques)
   ========================================================= */
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  /* si Elementor insère des virgules entre les termes */
  letter-spacing:-.25em;
	font-size: 0.7rem;
}
.badges a, .badges span {
    display: inline-block;
    padding: .28rem .6rem;
    border-radius: 9999px;
    background: #F6F7FB;
    color: #41506B;
    font-size: 0.7rem;
    font-weight: 400;
    text-decoration: none;
    line-height: 0.7rem;
    letter-spacing: normal;
}
.badges a + a::before{
  content:"";
  margin-left:.1rem;               /* compense le letter-spacing parent */
}
.badges a:hover,
.badges a:focus{ background:#EDEFF6; }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:767px){
  .offre-card .excerpt{ -webkit-line-clamp:2; min-height:2.4em; }
  .offre-card .pills{ gap:.4rem; }
  /* si tu veux alléger visuellement */
  .badges{ display:none; }
}



/* === Harmonisation du widget Liste d'icônes Elementor avec les pastilles .keyfacts === */

.offre-hero{
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(20px, 3vw, 28px);
  margin: 12px 0 24px;
}

/* Conteneur global (le div portant la classe .keyfact) */
.keyfact .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .5rem;
  margin: .5rem 0 1rem;
  padding: 0;
  list-style: none;
}

/* Chaque élément de la liste */
.keyfact .elementor-icon-list-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--c-chip-bg, #eef6f3);
  color: var(--c-chip-text, #2f6e63);
  padding: .5rem .75rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  transition: background .2s ease;
}

/* L'icône à gauche */
.keyfact .elementor-icon-list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: inherit; /* même couleur que le texte */
}

/* Le texte */
.keyfact .elementor-icon-list-text {
  margin: 0;
  color: inherit;
}

/* Hover (optionnel) */
.keyfact .elementor-icon-list-item:hover {
  background: #ddeee8;
}

/* === Liste d’icônes Elementor > style "pastilles infos" quand le widget a la classe .keyfact === */

/* Le <ul> */
.keyfact .elementor-icon-list-items{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.5rem .5rem !important;
  margin:.5rem 0 1rem !important;
  padding:0 !important;
  list-style:none !important;
}

/* Chaque <li> */
.keyfact .elementor-icon-list-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:.4rem !important;

  background:#EEF6F3 !important;
  color:#2F6E63 !important;
  border:1px solid #badbcd !important;
  padding:.5rem .75rem !important;
  border-radius:9999px !important;

  font-weight:600 !important;
  font-size:.95rem !important;
  line-height:1 !important;

  /* au cas où Elementor positionne l’item */
  position:static !important;
}

/* Le conteneur d’icône à gauche */
.keyfact .elementor-icon-list-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  /* Elementor met un padding calculé : on le neutralise */
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  color:inherit !important;
}

/* Le texte */
.keyfact .elementor-icon-list-text{
  margin:0 !important;
  color:inherit !important;
}

/* Rollover (optionnel) */
.keyfact .elementor-icon-list-item:hover{
  background:#DDEEE8 !important;
}


/*Les puces du thème / elementor**********************/
/* ——— Base : UL / OL cohérents avec la typo globale ——— */

/* 1) Remettre les puces par défaut dans Elementor et le contenu */
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.entry-content ul,
.entry-content ol,
body .elementor ul,
body .elementor ol {
  list-style-position: outside;
  list-style-image: none;
  margin: 0 0 1em 1.4em;
  padding-left: 0;
}

/* Forcer le type de puce (le thème le met à none) */
.elementor-widget-text-editor ul,
.entry-content ul,
body .elementor ul {
  list-style-type: disc !important;
}

.elementor-widget-text-editor ol,
.entry-content ol,
body .elementor ol {
  list-style-type: decimal !important;
}

/* Espacement des items */
.elementor-widget-text-editor li,
.entry-content li,
body .elementor li {
  display: list-item;          /* au cas où un reset le change */
  margin-bottom: .45em;
  line-height: var(--e-global-typography-text-line-height, 1.6);
}

/* Couleur des puces (après avoir réactivé le list-style) */
.elementor-widget-text-editor li::marker,
.entry-content li::marker,
body .elementor li::marker {
  color: var(--e-global-color-secondary, #4F8574);
  font-size: .9em;
}

/* Optionnel : un peu moins d’indentation sur mobile */
@media (max-width: 767px) {
  .elementor-widget-text-editor ul,
  .elementor-widget-text-editor ol,
  .entry-content ul,
  .entry-content ol,
  body .elementor ul,
  body .elementor ol {
    margin-left: 1.1em;
  }
}
/* ——— Variante à la demande : puces “check” douces ——— */
ul.list--check { list-style: none !important; margin-left: 0; padding-left: 0; }
ul.list--check li { position: relative; padding-left: 1.6em; margin-bottom: .5em; }
ul.list--check li::before {
  content: "✔";
  position: absolute; left: 0; top: .05em;
  color: var(--e-global-color-secondary, #4F8574);
  font-size: .9em; font-weight: 600;
}

/*scroll doux vers le formulaire de réservation*/
#reserver {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#reserver.appear {
  opacity: 1;
  transform: translateY(0);
}
.details-seance {
  font-size: 1.1rem;
  font-weight: 500;
  color: #404040;
  margin-top: 0.5rem;
}
.details-seance strong {
  color: #8c589a; /* ton violet doux */
	 font-weight: 700;
}
/* Ne pas cacher la section dans l’éditeur Elementor */
body.elementor-editor-active #reserver,
body.elementor-editor-preview #reserver {
  opacity: 1 !important;
  transform: none !important;
}

/* =========================
   Scope strict au header
   ========================= */
header.site-header{
  --cta-bg: #d4af37;     /* ton doré */
  --cta-text: #fff;
  --focus-ring: rgba(0,0,0,.25);

  --icon-size: 1.4rem;  /* taille loupe ~20px */
  --icon-rest: #333;
  --icon-hover: #777c80;
  --icon-nudge-y: .5px;  /* micro-centrage vertical (+/-) */
}

/* =========================
   CTA
   ========================= */
header.site-header .nav-btn-cta{
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  cursor: pointer;

  font: inherit;
  font-weight: 600;
  line-height: 1;

  padding: .6rem 1.2rem;
  min-height: 2.5rem;
  border-radius: 9999px;

  background: var(--cta-bg);
  color: var(--cta-text);
  text-decoration: none;
  border: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  transition: filter .2s ease, transform .15s ease, box-shadow .2s ease;
}
header.site-header .nav-btn-cta:hover {
    background: #78ada5;
}
header.site-header .nav-btn-cta:active{ transform: translateY(1px); }
header.site-header .nav-btn-cta:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* Sticky : compaction douce */
header.site-header.is-sticky .nav-btn-cta,
header.site-header .navbar.is-sticky .nav-btn-cta{
  padding: .5rem 1.05rem;
  min-height: 2.25rem;
}

/* =========================
   LOUPE (bouton recherche)
   ========================= */

/* 1) Bouton : zone cliquable + alignement */
header.site-header .nav-end .nav-items .nav-item-wrap .nav-btn.btn-search{
  all: unset;
  display: inline-flex;
  align-items: center;         /* centre verticalement l’icône */
  justify-content: center;
  vertical-align: middle;
  align-self: center;

  width: 32px;
  height: 32px;
  padding: 0;
  margin-inline-end: 12px;     /* espace avant le CTA */

  background: transparent;
  border: none !important;
  border-radius: 0;

  color: var(--icon-rest);
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, transform .15s ease;
}
header.site-header .nav-end .nav-items .nav-item-wrap .nav-btn.btn-search:hover{
  color: var(--icon-hover);
}
header.site-header .nav-end .nav-items .nav-item-wrap .nav-btn.btn-search:active{
  transform: translateY(1px);
}
header.site-header .nav-end .nav-items .nav-item-wrap .nav-btn.btn-search:focus-visible{
  outline: 2px solid rgba(119,124,128,.35);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(119,124,128,.2);
}

/* 2) Icône : forcer la fonte d’icônes + métriques
      (le thème 'lifeshine' met le glyphe dans ::before) */
header.site-header .nav-end .nav-items .nav-item-wrap .nav-btn.btn-search .shine-icon-search,
header.site-header .nav-end .nav-items .nav-item-wrap .nav-btn.btn-search .shine-icon-search::before{
  font-family: lifeshine !important;  /* <— important pour contrer les resets */
  display: inline-block !important;
  font-size: var(--icon-size) !important;
  line-height: 1 !important;
  height: auto !important;
  width: 1em;
  color: currentColor !important;
  position: relative;
  top: var(--icon-nudge-y);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3) Protéger contre les hauteurs/line-height hérités */
header.site-header .nav-items,
header.site-header .nav-end,
header.site-header .nav-end .nav-item-wrap{
  align-items: center;
}
header.site-header .nav-end .nav-item-wrap:first-child{
  margin-left: 0;  /* pas d’écart parasite à gauche de la loupe */
}

/* Sticky : bouton un peu plus compact */
header.site-header.is-sticky .nav-end .nav-items .nav-item-wrap .nav-btn.btn-search,
header.site-header .navbar.is-sticky .nav-end .nav-items .nav-item-wrap .nav-btn.btn-search{
  width: 30px;
  height: 30px;
  margin-inline-end: 10px;
}

/* Accessibilité : si l’utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce){
  header.site-header .nav-btn-cta,
  header.site-header .nav-end .nav-items .nav-item-wrap .nav-btn.btn-search{
    transition: none;
  }
}
/* === Patch d’alignement – neutralise height: inherit; sur le wrap === */
header.site-header .nav-end .nav-items{
  display: flex;              /* s’assure que le conteneur est flex */
  align-items: center;        /* centre tous les items du bloc droite */
}

header.site-header .nav-end .nav-item-wrap{
  height: auto !important;    /* <-- annule le height: inherit problématique */
  min-height: unset !important;
  display: flex;              /* pour centrer le contenu interne */
  align-items: center;
}

/* Le thème met un margin-left sur le premier wrap : on le remet à zéro */
header.site-header .nav-end .nav-item-wrap:first-child{
  margin-left: 0 !important;
}

/* Loupe : zone cliquable + centrage vertical (si pas déjà dans ton CSS) */
header.site-header .nav-btn.btn-search{
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  color: #333;
  background: transparent;
  border: none !important;
  margin-right: 12px;
  cursor: pointer;
  transition: color .2s ease, transform .15s ease;
}
header.site-header .nav-btn.btn-search:hover{ color: #777c80; }

/* Icône (police lifeshine + centrage optique) */
header.site-header .nav-btn.btn-search .shine-icon-search,
header.site-header .nav-btn.btn-search .shine-icon-search::before{
  font-family: lifeshine !important;
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1;
  color: currentColor;
  position: relative;
  top: .5px;                  /* ajuste si besoin : 0 / 1px / -1px */
}

/* Sticky : compaction légère */
header.site-header.is-sticky .nav-btn.btn-search,
header.site-header .navbar.is-sticky .nav-btn.btn-search{
  width: 30px; height: 30px;
  margin-right: 10px;
}
header.site-header a.menu-link:hover {
    text-decoration: none;
}


/* ===============================
   Header – Mobile & Tablette
   (scope strict)
   =============================== */

/* Variables */
header.site-header{
  --menu-text: #2f6f68;        /* texte menu mobile */
  --menu-muted: #777c80;       /* icônes / chevrons / hover loupe */
  --menu-divider: rgba(0,0,0,.06);
  --tap: 44px;                 /* cible tactile min */
}

/* ======== Tablette (<=1024px) : léger compactage ======== */
@media (max-width:1024px){
  header.site-header .nav-btn-cta{ padding:.5rem 1rem; min-height:2.25rem; font-size:.95rem; }
  header.site-header .nav-btn.btn-search{ width:30px; height:30px; }
}

/* ======== Mobile (<768px) ======== */
@media (max-width:767.98px){

  /* Barre du haut (loupe + close) */
  header.site-header .mobile-header .mobile-top .nav-items{
    display:flex; align-items:center; gap:10px;
  }
  header.site-header .mobile-header .nav-btn.btn-search{
    all:unset;
    width:28px; height:28px;
    display:inline-flex; align-items:center; justify-content:center;
    color:#333; cursor:pointer;
    transition:color .2s ease, transform .15s ease;
  }
  header.site-header .mobile-header .nav-btn.btn-search:hover{ color:var(--menu-muted); }
  header.site-header .mobile-header .nav-btn.btn-search:active{ transform:translateY(1px); }

  /* Contenu du panneau */
  header.site-header .mobile-header .mobile-content,
  header.site-header .mobile-header .mobile-content-inner{
    background:#fff; color:var(--menu-text);
  }

  /* Liens 1er niveau */
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > a.menu-link{
    position:relative;
    display:block;
    padding:14px 18px;
    min-height:var(--tap);
    color:var(--menu-text);
    text-decoration:none;
    font-size:1.05rem; line-height:1.2;
    border-bottom:1px solid var(--menu-divider);
  }
  /* feedback discret au toucher */
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > a.menu-link:hover{
    background:rgba(0,0,0,.03);
  }

  /* Sous-menus */
  header.site-header .mobile-header .mobile-menu .sub-menu{
    background:#fff;
  }
  header.site-header .mobile-header .mobile-menu .sub-menu > li > a{
    padding:12px 18px 12px 28px;
    font-size:1rem;
    border-bottom:1px solid var(--menu-divider);
  }
  header.site-header .mobile-header .mobile-menu .sub-menu > li:last-child > a{
    border-bottom:none;
  }

  /* ===== Toggles de sous-menus – SANS bulles vertes ===== */
  header.site-header .mobile-header .mobile-menu.vertical-menu > li{
    position:relative; /* pour positionner le toggle */
  }
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle{
    all:unset;                           /* efface styles thème */
    position:absolute; right:6px; top:50%;
    transform:translateY(-50%);
    width:var(--tap); height:var(--tap);
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--menu-muted);
    cursor:pointer; border:none !important; background:transparent !important;
    box-shadow:none !important; border-radius:8px; /* no “pastilles” */
    transition:color .2s ease, transform .2s ease;
  }
  /* Certains thèmes ajoutent des décorations via ::before/::after — on les coupe */
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle::before,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle::after{
    background:none !important; box-shadow:none !important; border:none !important;
  }

  /* Icône chevron (quel que soit le support : <i>, ::before, svg) */
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle i,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle svg,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle::before{
    font-size:1rem; line-height:1; color:currentColor;
    transition:transform .2s ease;
  }
  /* Ouvert → pivote */
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle[aria-expanded="true"] i,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle[aria-expanded="true"] svg,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle.is-active i{
    transform:rotate(180deg);
  }

  /* Focus clavier visibles */
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > a.menu-link:focus-visible,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle:focus-visible{
    outline:2px solid rgba(0,0,0,.25); outline-offset:2px;
  }

  /* Réduction des animations si demandé */
  @media (prefers-reduced-motion:reduce){
    header.site-header .mobile-header .nav-btn.btn-search,
    header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle,
    header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle i{
      transition:none;
    }
  }
}


/* ===== Loupe parfaitement centrée — mobile (<768px) ===== */
@media (max-width: 767.98px) {
  /* Barre du haut du panneau mobile */
  header.site-header .mobile-header .mobile-top{
    display: flex;
    align-items: center;       /* centre verticalement la ligne */
    padding: 8px 12px;
    min-height: 48px;          /* hauteur cohérente */
  }
  header.site-header .mobile-header .mobile-top .nav-items{
    display: flex;
    align-items: center;       /* centre les items (loupe / close) */
    gap: 10px;
    height: 100%;
  }

  /* Bouton loupe */
  header.site-header .mobile-header .nav-btn.btn-search{
    all: unset;
    display: inline-flex;
    flex-direction: row !important; /* override le column parasite */
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;              /* carré = centrage visuel parfait */
    line-height: 1;            /* pas de décalage vertical */
    color: #333;
    cursor: pointer;
    transition: color .2s ease, transform .15s ease;
  }
  header.site-header .mobile-header .nav-btn.btn-search:hover{ color: #777c80; }
  header.site-header .mobile-header .nav-btn.btn-search:active{ transform: translateY(1px); }

  /* Icône à l'intérieur du bouton */
  header.site-header .mobile-header .nav-btn.btn-search .shine-icon-search,
  header.site-header .mobile-header .nav-btn.btn-search .shine-icon-search::before{
    display: inline-block;
    font-size: 1.1rem;         /* ~18px */
    line-height: 1;
    height: 1em;
    color: currentColor;
    position: relative;
    top: 0;                    /* pas de nudge nécessaire ici */
  }
}

/**********************************************
 * NAVBAR MOBILE/TABLET – COHÉRENCE & STICKY
 * (scope strict : header.site-header)
 **********************************************/

/* ——— Layout commun mobile/tablette ——— */
@media (max-width: 1024px) {
  /* Grille du header mobile (burger | logo | actions) */
  header.site-header .site-navigation {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 10px;
    min-height: 70px;               /* même hauteur partout */
    padding-inline: 12px;
    background: #fff;
  }

  /* Forcer les zones en flex centrées */
  header.site-header .nav-start,
  header.site-header .nav-middle,
  header.site-header .nav-end {
    display: flex !important;
    align-items: center !important;
    min-height: inherit;
  }
  header.site-header .nav-middle { justify-content: center !important; }

  /* Logo */
  header.site-header .nav-middle img,
  header.site-header .nav-middle svg {
    max-height: 60px;               /* évite le “saut” en sticky */
    height: 60px;
    width: auto;
  }

  /* Burger (mobile-toggle) */
  header.site-header .mobile-toggle{
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 9999px;
    cursor: pointer;
  }

  /* Loupe à droite */
  header.site-header .nav-end .nav-btn.btn-search{
    width: 28px; height: 28px;
    margin: 0;
  }

  /* ➜ Le CTA NE DOIT PAS apparaître sur la topbar mobile */
  header.site-header .nav-end .nav-btn-cta{
    display: none !important;
  }
}

/* ——— Sticky = même rendu (fond/bloc/hauteur) ——— */
@media (max-width: 1024px) {
  /* Certains thèmes appliquent .is-sticky sur .navbar et/ou header */
  header.site-header .navbar.is-sticky,
  header.site-header.is-sticky .navbar,
  header.site-header.is-sticky,
  header.site-header .navbar.is-sticky .site-navigation,
  header.site-header.is-sticky .site-navigation {
    background: #fff !important;
    min-height: 70px !important;         /* identique à l’état normal */
  }

  /* Légère ombre uniquement en sticky pour marquer la séparation */
  header.site-header .navbar.is-sticky,
  header.site-header.is-sticky {
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
  }
}

/* ——— Petites largeurs (<768px) : compaction douce ——— */
@media (max-width: 767.98px) {
  /* Réduit un peu la hauteur, tout en restant cohérent */
  header.site-header .site-navigation { min-height: 60px; }
  header.site-header .navbar.is-sticky .site-navigation,
  header.site-header.is-sticky .site-navigation { min-height: 60px !important; }

  /* Logo un chouïa plus petit */
  header.site-header .nav-middle img,
  header.site-header .nav-middle svg { height: 60px; max-height: 60px; }

  /* Burger / loupe adaptés */
  header.site-header .mobile-toggle { width: 34px; height: 34px; }
  header.site-header .nav-end .nav-btn.btn-search { width: 26px; height: 26px; }
}

/* ——— Sécurité : toujours centré verticalement ——— */
@media (max-width: 1024px) {
  header.site-header .site-navigation,
  header.site-header .nav-start,
  header.site-header .nav-middle,
  header.site-header .nav-end {
    align-items: center !important;
  }
}
/********************************************
 * OFF-CANVAS (Mobile + Tablette <=1024px)
 * Nettoyage des pastilles vertes + chevrons
 ********************************************/
@media (max-width: 1024px) {

  /* Conteneur du menu latéral */
  header.site-header .mobile-header .mobile-content,
  header.site-header .mobile-header .mobile-content-inner,
  header.site-header .mobile-header .mobile-menu.vertical-menu {
    background: #fff;
    color: var(--menu-text, #2f6f68);
  }

  /* Liens de 1er niveau (tap target propre) */
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > a.menu-link{
    position: relative;
    display: block;
    padding: 14px 18px;
    min-height: 44px;
    text-decoration: none;
    color: var(--menu-text, #2f6f68);
    border-bottom: 1px solid var(--menu-divider, rgba(0,0,0,.06));
  }

  /* ------- TOGGLE des sous-menus (le coupable) ------- */
  /* 1) Bouton : plus de bulle, juste une zone cliquable à droite */
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle{
    all: unset;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;                /* cible tactile */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--menu-muted, #777c80);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px;         /* pas de pilule */
    transition: color .2s ease;
  }
  /* 2) Certains styles de thème dessinent les bulles via pseudo-éléments */
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle::before,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle::after{
    content: none !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* 3) Icône chevron : simple et qui pivote à l’ouverture */
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle i,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle svg,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle::before{
    font-size: 1rem;
    line-height: 1;
    color: currentColor;
    transition: transform .2s ease;
  }
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle[aria-expanded="true"] i,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* Sous-menus */
  header.site-header .mobile-header .mobile-menu .sub-menu > li > a{
    padding: 12px 18px 12px 28px;
    min-height: 44px;
    border-bottom: 1px solid var(--menu-divider, rgba(0,0,0,.06));
  }
  header.site-header .mobile-header .mobile-menu .sub-menu > li:last-child > a{
    border-bottom: none;
  }
}
/**********************************************
 * NAVBAR ≤1024px — cohérence normal/sticky
 * (scope strict : header.site-header)
 **********************************************/

/* Layout commun (burger | logo | actions) */
@media (max-width:1024px){
  header.site-header .site-navigation{
    display:grid !important;
    grid-template-columns:auto 1fr auto;
    align-items:center !important;
    column-gap:10px;
    min-height:70px !important;        /* même hauteur partout */
    padding-inline:12px;
    background:#fff;
  }
  header.site-header .nav-start,
  header.site-header .nav-middle,
  header.site-header .nav-end{
    display:flex !important;
    align-items:center !important;
    min-height:inherit;
  }
  header.site-header .nav-middle{ justify-content:center !important; }

  /* Logo (évite le “saut” en sticky) */
  header.site-header .nav-middle img,
  header.site-header .nav-middle svg{
    height:60px; max-height:60px; width:auto;
  }

  /* Burger */
  header.site-header .mobile-toggle{
    all:unset;
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:9999px; cursor:pointer;
    background:transparent !important; box-shadow:none !important;
  }

  /* Loupe (alignement parfait) */
  header.site-header .nav-end .nav-btn.btn-search{
    all:unset;
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; line-height:1;
    color:#333; cursor:pointer; transition:color .2s ease, transform .15s ease;
  }
  header.site-header .nav-end .nav-btn.btn-search:hover{ color:#777c80; }

  /* CTA : visible tablette, masqué téléphone (voir bloc <768 plus bas) */
  header.site-header .nav-end .nav-btn-cta{
    padding:.5rem 1rem; min-height:2.25rem; font-size:.95rem;
  }

  /* Sticky = même rendu que normal */
  header.site-header .navbar.is-sticky,
  header.site-header.is-sticky .navbar,
  header.site-header.is-sticky,
  header.site-header .navbar.is-sticky .site-navigation,
  header.site-header.is-sticky .site-navigation{
    background:#fff !important;
    min-height:70px !important;
  }
  header.site-header .navbar.is-sticky,
  header.site-header.is-sticky{
    box-shadow:0 8px 20px rgba(0,0,0,.06);
  }
}

/* Offset correct quand la barre d’admin WP est visible */
@media (max-width:1024px){
  body.admin-bar header.site-header .navbar.is-sticky,
  body.admin-bar header.site-header.is-sticky{
    top:32px !important;        /* 46px sur très petits écrans si besoin */
  }
}

/* Nettoyage “pastilles vertes” + chevrons sobres dans l’off-canvas (mobile & tablette) */
@media (max-width:1024px){
  header.site-header .mobile-header .mobile-menu.vertical-menu > li{ position:relative; }

  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle{
    all:unset;
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
    color:#777c80; background:transparent !important; border:none !important; box-shadow:none !important; border-radius:8px;
  }
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle::before,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle::after{ content:none !important; }

  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle i,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle svg{
    font-size:1rem; line-height:1; color:currentColor; transition:transform .2s ease;
  }
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle[aria-expanded="true"] i,
  header.site-header .mobile-header .mobile-menu.vertical-menu > li > .sub-menu-toggle[aria-expanded="true"] svg{
    transform:rotate(180deg);
  }
}

/* Téléphone (<768px) : topbar compacte + CTA caché de la topbar (à mettre dans le panneau) */
@media (max-width:767.98px){
  header.site-header .site-navigation{ min-height:60px !important; }
  header.site-header .nav-middle img, header.site-header .nav-middle svg{ height:60px; max-height:60px; }
  header.site-header .mobile-toggle{ width:34px; height:34px; }
  header.site-header .nav-end .nav-btn.btn-search{ width:26px; height:26px; }
  header.site-header .nav-end .nav-btn-cta{ display:none !important; } /* le CTA vit dans l’off-canvas */
}
/* Palette */
.sec-audience{
  --ink: #1f1f1f;        /* titres */
  --muted: #777c80;      /* sous-titres */
  --brand: #2f6f68;      /* vert signature */
  --accent: #d4af37;     /* doré (hover/border) */
  --card-bd: rgba(0,0,0,.08);
}

/* Cartes */
.sec-audience .aud-card .elementor-widget-container{
  border: 1px solid var(--card-bd);
  border-radius: 16px;
  padding: 20px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease, color .2s ease;
}

/* Icône, Titre, Texte */
.sec-audience .aud-card .elementor-icon{ 
  color: var(--brand);     /* icônes vert signature */
  font-size: 22px; line-height: 1;
}
.sec-audience .aud-card .elementor-icon svg{
  fill: currentColor;      /* pour les SVG */
}

.sec-audience .aud-card .elementor-icon-box-title,
.sec-audience .aud-card h4{
  color: var(--ink);       /* titres charcoal */
  margin: 8px 0 6px;
}

.sec-audience .aud-card .elementor-icon-box-description,
.sec-audience .aud-card p{
  color: var(--muted);     /* sous-titres gris doux */
  margin: 0;
}

/* Hover/focus */
.sec-audience .aud-card:hover .elementor-widget-container,
.sec-audience .aud-card:focus-within .elementor-widget-container{
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  transform: translateY(-2px);
}
.sec-audience .aud-card:hover .elementor-icon,
.sec-audience .aud-card:focus-within .elementor-icon{
  color: var(--accent);    /* icône dorée au hover */
}
.sec-audience .aud-card:hover h4,
.sec-audience .aud-card:focus-within h4{
  color: var(--brand);     /* titre passe en vert */
}

/* Petite note */
.sec-audience .aud-note{
  color: var(--muted);
  font-style: italic;
  margin-top: 14px;
  display: block;
}
.icon--outline svg,
.icon--outline svg *{
  fill: none !important;
  stroke: currentColor !important;
}