/* Masque le header Elementor Pro — remplacé par notre nav FAF injecté via wp_body_open */
header.elementor-location-header,
.elementor-location-header { display: none !important; }

/* ─── Variables ───────────────────────────────────────────────────────────
   CE QUI A FUITÉ, ET POURQUOI C'EST RÉPARÉ AINSI. Ce bloc posait seize jetons
   sur `:root`, dont SIX portent le même nom que ceux de faf-tokens.css — et cinq
   avec une valeur différente : --ink (#2C2A26 contre #3E362D), --ink-soft,
   --ink-muted, --cream, --teal-dark. nav.css étant chargé APRÈS faf-tokens, ses
   valeurs l'emportaient partout, jusque dans le corps des articles.

   Relevé le 25/08 : le gras du carnet sortait en quasi-noir, une couleur que la
   charte n'emploie nulle part. Le coupable n'était pas le carnet.

   La palette de la navigation descend donc dans la navigation. Elle garde ses
   valeurs propres — rien ne bouge à l'écran — mais elle ne déborde plus.
   Restent sur `:root` les seules mesures dont le `body` a besoin pour se
   décaler sous la barre fixe, et qui ne portent le nom de rien d'autre. */
:root {
  --nav-font:    'Raleway', sans-serif;
  --nav-h:       64px;
  --announce-h:  32px;
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-wrap,
.site-header,
#site-header,
.mobile-drawer {
  --teal:        #58AC9F;
  --teal-dark:   #3d8f82;
  --teal-ghost:  rgba(88, 172, 159, 0.08);
  --amber:       #D4A84B;
  --ink:         #2C2A26;
  --ink-soft:    #6B6660;
  --ink-muted:   #A09A94;
  --parchment:   #FDFAF5;
  --cream:       #F5F0E8;
  --white:       #FFFFFF;
  --border:      rgba(44, 42, 38, 0.10);
  --border-soft: rgba(44, 42, 38, 0.06);
}

/* ─── Décalage contenu sous la barre fixe ─── */
/* !important nécessaire : Gutenberg/WP injecte body{padding:0} sans !important mais après */
body {
  padding-top: calc(var(--nav-h) + var(--announce-h)) !important;
}
body.faf-no-announce {
  padding-top: var(--nav-h) !important;
}

/* Anti-débordement horizontal (menu off-canvas fermé positionné hors-écran) — clip sans casser sticky/fixed. */
html { overflow-x: clip; }

/* ─── Wrapper fixe ─── */
.nav-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

/* ─── Barre d'annonce ─── */
.nav-announcement {
  background: var(--teal);
  color: #fff;
  text-align: center;
  font-family: var(--nav-font);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 8px 24px;
  font-weight: 400;
  height: var(--announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* L'icône de l'accompagnement annoncé, en blanc sur le fond vert. `flex-shrink`
   à zéro : sans lui, elle se laisse écraser par le texte quand celui-ci occupe
   toute la ligne, et un symbole aplati vaut moins que pas de symbole. */
.nav-announcement .faf-annonce-ico { flex: 0 0 auto; }
/* Au large, titre et date se suivent sur une ligne, séparés par un point
   médian posé en CSS — une ponctuation de mise en page, qui disparaît donc
   quand la mise en page change (voir le palier mobile). */
.nav-announcement .faf-annonce-quand::before { content: "·"; margin: 0 6px; opacity: 0.75; }
.nav-announcement a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 6px;
  /* « S'inscrire → » ne se coupe pas : la flèche partait seule à la ligne, et
     une flèche isolée ne veut rien dire. C'est un libellé, pas une phrase. */
  white-space: nowrap;
}

/* ─── Header ─── */
/* Reset Hello Elementor defaults + annule le max-width de theme.css (.site-header:not(.dynamic-header)) */
#site-header.site-header,
.site-header {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: var(--nav-h) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
  /* padding-left = 32px offset logo + 149px largeur logo + 16px gap */
  padding: 0 24px 0 155px !important;
  background: var(--parchment) !important;
  border-bottom: 1px solid var(--border) !important;
  position: relative !important;
  overflow: visible !important;
}
/* Masquer les éléments par défaut du thème parent */
.site-header .site-branding,
.site-header .site-navigation,
.site-header .site-navigation-toggle-holder { display: none !important; }

/* ─── Logo médaillon ─── */
.site-logo {
  position: absolute;
  /* top = bas de la barre d'annonce = haut du header, déborde vers le bas */
  top: var(--announce-h);
  left: 32px;
  z-index: 20;
  text-decoration: none;
  display: block;
}
.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  padding: 14px 16px 22px;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 8px 24px rgba(44,42,38,0.12);
  border: 1px solid var(--border);
  border-top: none;
}
.logo-mark svg {
  height: 80px;
  width: auto;
  display: block;
}

/* ─── Wordmark SEO (invisible, hors flux flex) ─── */
.logo-wordmark {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.logo-wordmark .logo-name,
.logo-wordmark .logo-sub {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Navigation principale ─── */
/* position: absolute centre la nav sur toute la largeur du header,
   indépendamment du padding-left réservé au logo */
#site-header > nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: var(--nav-h);
  display: flex;
  align-items: center;
}

.faf-site-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
  height: var(--nav-h);
}

.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  height: calc(var(--nav-h) - 20px);
  padding: 0 8px;
  margin: 10px 1px;
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  outline: none;
  position: relative;
}
.nav-link:hover,
.nav-item:focus-within > .nav-link,
.nav-item.is-open > .nav-link {
  color: var(--teal-dark);
  background: var(--teal-ghost);
}

.nav-item.current > .nav-link {
  color: var(--ink);
  background: none;
}
.nav-item.current > .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 12px; right: 12px;
  height: 2px;
  background: var(--teal);
  border-radius: 1px 1px 0 0;
}

/* Annule les styles Elementor Kit sur button (background brun + couleur blanche) */
.nav-wrap button.nav-link {
  background-color: transparent !important;
  color: var(--ink-soft) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  padding: 0 8px !important;
  text-transform: uppercase !important;
}
.nav-wrap button.nav-link:hover,
.nav-item.is-open > button.nav-link,
.nav-item:focus-within > button.nav-link {
  background-color: var(--teal-ghost) !important;
  color: var(--teal-dark) !important;
}
.nav-item.current > button.nav-link {
  background-color: transparent !important;
  color: var(--ink) !important;
}

.nav-link .chevron {
  width: 10px; height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.2s var(--ease);
}
.nav-item.is-open .chevron,
.nav-item:focus-within .chevron { transform: rotate(180deg); }

/* ─── Dropdown standard (Accompagnement) ─── */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 500;
  min-width: 260px;
  background: var(--parchment);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(44,42,38,0.13), 0 2px 8px rgba(44,42,38,0.06);
  /* padding-top crée l'espace visuel SANS briser la zone de hover */
  padding: 8px 6px 6px;
}
.nav-item:focus-within .nav-dropdown,
.nav-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  border-left: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 2px;
}
.dropdown-item:last-child { margin-bottom: 0; }
.dropdown-item:hover {
  background: var(--cream);
  border-left-color: var(--teal);
}
.dropdown-item .di-title {
  font-family: var(--nav-font);
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  display: block;
  letter-spacing: 0.02em;
}
.dropdown-item .di-desc {
  font-family: var(--nav-font);
  font-size: 11px;
  color: var(--ink-muted);
  display: block;
  line-height: 1.4;
}
/* Variante avec icône de service (individuel, couple, ados, constellations, écriture) :
   icône à gauche, nom + phrase empilés à droite (icône centrée verticalement, pas sur une ligne à part) */
.dropdown-item.has-ico { flex-direction: row; align-items: center; gap: 12px; }
.dropdown-item.has-ico .di-icon { flex: 0 0 auto; line-height: 0; }
.dropdown-item.has-ico .di-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ─── Mega dropdown (Blog) — pleine largeur de la nav ─── */
/* .has-mega est position:static → le dropdown se positionne sur <nav> */
.nav-item.has-mega {
  position: static;
}
.nav-dropdown.is-mega {
  top: 100%;         /* bas du <nav> = bas de la barre de nav */
  left: 0;
  right: 0;
  width: auto;
  transform: translateY(4px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 24px;
  border-radius: 0 0 16px 16px;
}
.nav-dropdown.is-mega.is-open {
  transform: translateY(0);
}

.mega-col-header {
  font-family: var(--nav-font);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 12px 10px;
  display: block;
}
.mega-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  /* --ink et non --ink-soft : à 12,5 px, #6B6660 sur fond clair se lit mal —
     signalé à l'usage. #2C2A26 passe de 5,4:1 à 14:1 sans alourdir la graisse. */
  color: var(--ink);
  font-family: var(--nav-font);
  font-size: 12.5px; font-weight: 400;
  transition: background 0.15s, color 0.15s;
  gap: 8px;
}
.mega-cat-item:hover { background: var(--teal-ghost); color: var(--teal-dark); }
.mega-cat-item .cat-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal); opacity: 0.5;
  flex-shrink: 0;
}
.mega-cat-item .cat-name { flex: 1; }
/* Spécificité montée à dessein. `.mega-cat-item { color: var(--ink) }` existe bien
   dans cette feuille et --ink vaut #2C2A26 sur toute la chaîne d'ancêtres, mais la
   couleur calculée restait rgb(169,159,154) : quelque chose gagne sans être une
   règle repérable du thème — probablement le Kit Elementor. Plutôt que de courir
   après, on écrit la couleur avec assez de poids pour trancher, et sur les deux
   éléments : le lien ET le libellé, qui peut hériter d'ailleurs. */
.nav-dropdown .mega-cat-item,
.nav-dropdown .mega-cat-item .cat-name { color: var(--ink); }
.nav-dropdown .mega-cat-item:hover,
.nav-dropdown .mega-cat-item:hover .cat-name { color: var(--teal-dark); }
.mega-cat-item .cat-count {
  font-size: 10.5px; color: var(--ink-soft);
  background: var(--cream);
  padding: 1px 7px; border-radius: 20px;
  font-weight: 500;
}

.mega-col-right {
  border-left: 1px solid var(--border-soft);
  padding-left: 24px;
}
.mega-recent-post {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
  margin-bottom: 4px;
}
.mega-recent-post:hover { background: var(--teal-ghost); }
/* ligne [thumb][cat + titre] côte à côte, date en dessous */
.mega-recent-post .rp-top {
  display: flex;
  /* Centré, et non aligné en haut : la vignette fait 48 px quand le bloc
     rubrique + titre en fait une trentaine. Alignés par le haut, l'étiquette
     de rubrique — 9 px en capitales, donc basse dans sa ligne — flottait
     visiblement au-dessus du bord de l'image. */
  align-items: center;
  gap: 10px;
}
.mega-recent-post .rp-thumb {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.mega-recent-post .rp-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mega-recent-post .rp-thumb--placeholder svg {
  width: 48px; height: 48px;
  display: block;
}
.mega-recent-post .rp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mega-recent-post .rp-cat {
  font-family: var(--nav-font);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  /* --teal-dark : à 9 px en capitales, #58AC9F tombait vers 2,5:1 sur fond clair.
     #3d8f82 passe à 4,4:1 et reste dans la même famille de couleur. */
  color: var(--teal-dark);
}
.mega-recent-post .rp-title {
  font-family: var(--nav-font);
  font-size: 13px; font-weight: 400;
  color: var(--ink); line-height: 1.35;
}
/* Titre à gauche, date à droite, alignés sur la PREMIÈRE ligne du titre :
   `baseline` et non `center`, sinon un titre sur deux lignes fait descendre la
   date entre les deux. */
.mega-recent-post .rp-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.mega-recent-post .rp-date {
  font-size: 10px; color: var(--ink-soft);
  flex: 0 0 auto;
  white-space: nowrap;
}

.mega-divider {
  grid-column: 1 / -1;
  height: 1px; background: var(--border-soft);
  margin: 16px 0;
}
.mega-footer {
  grid-column: 1 / -1;
  display: flex; align-items: center;
  justify-content: space-between;
}
.mega-footer-link {
  font-family: var(--nav-font);
  font-size: 11px; color: var(--ink-muted);
  text-decoration: none; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 4px;
  transition: color 0.15s;
}
.mega-footer-link:hover { color: var(--teal-dark); }
.mega-footer-link svg { width: 12px; height: 12px; }

/* ─── Cluster droit ─── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  flex-shrink: 0;
  margin-left: auto;
}
.nav-portal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  font-family: var(--nav-font);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid var(--border);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.nav-portal:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
  background: var(--cream);
}
.nav-portal svg { width: 13px; height: 13px; }


.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--teal);
  color: var(--white) !important;
  font-family: var(--nav-font);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(88,172,159,0.30);
}
.nav-cta:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(88,172,159,0.40);
}
.nav-cta svg { width: 12px; height: 12px; }

/* ─── Shadow au scroll ─── */
.nav-wrap.is-scrolled .site-header {
  background: var(--white) !important;
  box-shadow: 0 2px 20px rgba(44,42,38,0.08) !important;
}

/* ─── Hamburger ─── */
/* Annule aussi les styles Elementor Kit sur ce button */
#hamburger.nav-hamburger {
  background-color: transparent !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  padding: 11px !important;
  font-size: inherit !important;
  min-width: 44px;
  min-height: 44px;
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 11px;
  background: none;
  border: none;
  color: var(--ink);
  margin-left: 4px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
  transform-origin: center;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── Drawer mobile ─── */
.mobile-drawer {
  display: none;               /* fermé : retiré du layout → aucun débordement horizontal (était translateX(100%), hors-écran, non clippable car fixed) */
  position: fixed;
  inset: 0;
  background: var(--parchment);
  z-index: 999;
  padding: 88px 32px 40px;
  overflow-y: auto;
}
.mobile-drawer.is-open { display: block; animation: faf-drawer-in 0.4s cubic-bezier(.22,.61,.36,1); }
@keyframes faf-drawer-in { from { opacity: 0; transform: translateY(-10px) scale(.995); } to { opacity: 1; transform: none; } }
/* entrée en cascade des entrées de menu (feeling plus premium) */
.mobile-drawer.is-open .mobile-nav > li,
.mobile-drawer.is-open .mobile-cta { animation: faf-nav-item 0.5s both cubic-bezier(.22,.61,.36,1); }
.mobile-drawer.is-open .mobile-nav > li:nth-child(1){animation-delay:.06s}
.mobile-drawer.is-open .mobile-nav > li:nth-child(2){animation-delay:.10s}
.mobile-drawer.is-open .mobile-nav > li:nth-child(3){animation-delay:.14s}
.mobile-drawer.is-open .mobile-nav > li:nth-child(4){animation-delay:.18s}
.mobile-drawer.is-open .mobile-nav > li:nth-child(5){animation-delay:.22s}
.mobile-drawer.is-open .mobile-nav > li:nth-child(6){animation-delay:.26s}
.mobile-drawer.is-open .mobile-nav > li:nth-child(7){animation-delay:.30s}
.mobile-drawer.is-open .mobile-nav > li:nth-child(8){animation-delay:.34s}
.mobile-drawer.is-open .mobile-cta{animation-delay:.40s}
@keyframes faf-nav-item { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer.is-open, .mobile-drawer.is-open .mobile-nav > li, .mobile-drawer.is-open .mobile-cta { animation: none !important; }
  .mobile-sub { transition: none !important; }
}

.mobile-nav { list-style: none; margin: 0; padding: 0; }
.mobile-nav > li { border-bottom: 1px solid var(--border-soft); }
.mobile-drawer button.mobile-nav-link,
.mobile-drawer a.mobile-nav-link {
  background-color: transparent !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  padding: 15px 0 !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  font-family: var(--nav-font);
  font-size: 19px; font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  background: none; border: none;
  width: 100%; text-align: left;
}
.mobile-nav-link .m-chevron {
  width: 18px; height: 18px;
  stroke: var(--ink-muted); fill: none;
  stroke-width: 1.5;
  transition: transform 0.25s;
  flex-shrink: 0;
}
.mobile-nav-link.is-open .m-chevron { transform: rotate(180deg); }

/* sous-menu : ouverture douce (max-height + fondu) au lieu d'un display:none instantané */
.mobile-sub {
  max-height: 0; overflow: hidden; opacity: 0; padding: 0; list-style: none;
  transition: max-height 0.42s cubic-bezier(.22,.61,.36,1), opacity 0.3s ease, padding 0.42s;
}
.mobile-sub.is-visible { max-height: 900px; opacity: 1; padding: 2px 0 14px; }
.mobile-sub a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  font-family: var(--nav-font);
  font-size: 15px; color: var(--ink-soft);
  text-decoration: none; transition: color 0.15s;
}
.mobile-sub a:active, .mobile-nav-link:active { color: var(--teal-dark); }
.mobile-sub a:hover { color: var(--teal-dark); }
.mobile-sub .cat-dot {
  width: 5px; height: 5px;
  border-radius: 50%; background: var(--teal);
  opacity: 0.6; flex-shrink: 0;
}
.mobile-cta-wrap { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.mobile-cta {
  display: block; text-align: center;
  padding: 16px; background: var(--teal);
  color: white !important; text-decoration: none;
  border-radius: 12px;
  font-family: var(--nav-font);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.mobile-portal {
  display: block; text-align: center;
  padding: 14px; background: transparent;
  color: var(--ink-soft); text-decoration: none;
  border-radius: 12px; border: 1px solid var(--border);
  font-family: var(--nav-font);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ─── Bascule vers le hamburger ───
   Séparée du traitement mobile ci-dessous, parce qu'elle répond à une contrainte
   de place, pas à un format d'écran.

   La nav est centrée en position absolue sur toute la largeur du header (voir
   `#site-header > nav`) : elle ne participe donc à aucun calcul de flux et ne
   rétrécit jamais. Quand la fenêtre se resserre, elle ne se réorganise pas —
   elle glisse silencieusement sous le logo à gauche puis sous le bouton RDV à
   droite. Mesuré : ses 8 entrées occupent 797 px, le logo en réserve 148 à
   gauche et le bouton 181 à droite, soit ~1206 px pour que rien ne se recouvre.
   En dessous, les dernières entrées passaient sous le bouton — tronquées, sans
   hamburger pour les remplacer puisqu'il n'apparaissait qu'à 900 px.

   Ce seuil est la seule définition de la bascule dans tout le site : aucun JS
   ne la double. Le relever suppose donc de vérifier la largeur réelle de la nav
   si des entrées sont ajoutées au menu. */
@media (max-width: 1200px) {
  .faf-site-nav,
  .nav-portal { display: none !important; }
  .nav-hamburger { display: flex !important; margin-left: 0 !important; position: relative; z-index: 2; grid-column: 3; }
  /* .mobile-drawer reste display:none quand fermé (voir .mobile-drawer.is-open) — évite le débordement horizontal */
  .mobile-drawer { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ─── Breakpoint mobile ─── */
/* Ce qui relève vraiment du petit écran : le logo se réduit et le header passe
   en grille. Entre 901 et 1200 px le header garde son allure de bureau — grand
   logo, bouton RDV complet — avec le seul menu remplacé par le hamburger. */
@media (max-width: 900px) {
  /* La barre d'annonce était masquée sur petit écran, au motif qu'elle mangeait
     de la hauteur. Elle est rétablie : c'est le seul endroit où la prochaine
     séance de groupe se voit sans faire défiler, et le mobile est justement là
     où l'on fait le moins défiler.

     Elle passe sur deux lignes à cette largeur — 35px mesurés jusqu'à 320px de
     large — d'où une hauteur de 42px. La valeur vit dans `--announce-h`, que le
     décalage du corps ET la position du logo lisent déjà : la changer ici
     suffit, rien d'autre à synchroniser.

     `overflow: hidden` est un garde-fou, pas une mise en forme : la hauteur
     étant fixe, un titre de séance beaucoup plus long déborderait sur le header.
     Mieux vaut alors couper que décaler tout l'en-tête. */
  :root { --announce-h: 42px; }
  .nav-announcement {
    font-size: 10.5px;
    letter-spacing: 0.03em;
    line-height: 1.3;
    /* Alignée à gauche, sur le bord du logo (12px). Centrée, une annonce qui
       tient sur deux lignes se lit en escalier : chaque ligne commence à un
       endroit différent. À gauche, l'œil retombe toujours au même point — et
       l'icône marque ce point. */
    justify-content: flex-start;
    text-align: left;
    padding: 4px 12px;
    overflow: hidden;
    transition: height 0.28s var(--ease), padding 0.28s var(--ease), opacity 0.18s linear;
  }
  /* L'appel à l'action se cale au bord droit, la phrase prend ce qui reste et
     passe à la ligne dessous. `min-width: 0` est indispensable : sans lui un
     élément flex refuse de descendre sous la largeur de son contenu, la phrase
     ne se couperait pas et pousserait le lien hors de l'écran. */
  .nav-announcement .faf-annonce-txt { flex: 1 1 auto; min-width: 0; }
  .nav-announcement .faf-annonce-cta { margin-left: auto; padding-left: 10px; }
  /* Le titre sur une ligne, la date sur la suivante. Laissée libre, la coupure
     tombait au milieu de la date et le jour restait orphelin en fin de ligne. */
  .nav-announcement .faf-annonce-titre,
  .nav-announcement .faf-annonce-quand { display: block; }
  .nav-announcement .faf-annonce-quand::before { content: none; }

  /* Elle a dit ce qu'elle avait à dire dès le premier écran : passé le premier
     défilement, elle rend ses 42px au contenu. Le header, lui, reste — c'est la
     navigation. `is-scrolled` est déjà posé sur `.nav-wrap` par le script de
     l'en-tête (il servait à l'ombre portée) : aucun JS de plus.

     Rien à recalculer côté corps : la barre est en `position: fixed`, son
     décalage n'existe qu'en haut du document — endroit qu'on vient justement de
     quitter en défilant. */
  .nav-wrap.is-scrolled .nav-announcement {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
  .nav-wrap.is-scrolled .site-logo { top: 0 !important; }

  .site-logo { left: 12px !important; transition: top 0.28s var(--ease); }
  .logo-mark {
    padding: 5px 10px 10px !important;
    border-radius: 0 0 16px 16px !important;
    height: auto !important;
  }
  .logo-mark svg { height: 42px !important; width: auto !important; }

  /* Header : grid 3 colonnes — [espace logo | centre | hamburger] */
  #site-header.site-header,
  .site-header {
    display: grid !important;
    grid-template-columns: 75px 1fr auto;
    padding: 0 8px !important;
    justify-content: unset !important;
  }

  /* nav-right : colonne centrale, bouton centré dedans */
  .nav-right {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    grid-column: 2;
  }

  /* Bouton RDV — pill compact, texte court */
  .nav-cta {
    display: inline-flex !important;
    padding: 6px 11px !important;
    font-size: 10px !important;
    gap: 0 !important;
    box-shadow: none !important;
    white-space: nowrap;
  }
  .nav-cta svg { display: none !important; }

  /* Drawer : interlignage un peu réduit en mobile (sélecteur spécifique pour l'emporter) */
  .mobile-drawer button.mobile-nav-link,
  .mobile-drawer a.mobile-nav-link { padding: 13px 0 !important; }
  .mobile-sub a { padding: 8px 0; font-size: 15px; }

  /* Drawer CTA — forcer couleur blanche (contre Elementor Kit) */
  .mobile-cta {
    color: var(--white) !important;
    background: var(--teal) !important;
    padding: 13px 16px !important;
  }

}

/* Le pied de page a sa propre feuille : faf-footer.css (grille mobile 2×2,
   réseaux sociaux, habillage boho). Ses règles vivaient ici et là dans
   faf-custom.php, et se contredisaient. */

/* ===== Calendrier de disponibilités — shortcode [faf_availability] =====
   Vit ici et non dans faf-service.css : le shortcode s'utilise sur n'importe
   quelle page (colonne d'article comprise), or faf-service.css n'est chargée
   que sur les pages services. Sans ces règles, la grille s'effondre en une
   suite de chiffres collés. */
/* Calendrier de disponibilités (agenda) — shortcode [faf_availability], mobile-first */
.faf-avail{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center; max-width:820px; margin:0 auto; }
.faf-avail-month{ flex:1 1 300px; max-width:380px; background:#FCF8F1; border:1px solid #E4D1BF; border-radius:22px; padding:22px 20px 26px; box-shadow:0 22px 48px -40px rgba(120,80,45,.5); }
.faf-avail-h{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:23px; color:#95633A; text-align:center; margin-bottom:14px; }
.faf-avail-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.faf-avail-wd{ font-family:'Raleway',sans-serif; font-size:11px; font-weight:600; letter-spacing:.03em; color:#A89A8A; text-align:center; padding-bottom:6px; }
.faf-avail-c{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-family:'Raleway',sans-serif; font-size:14px; color:#B8AEA0; border-radius:50%; text-decoration:none; }
.faf-avail-c.empty{ visibility:hidden; }
.faf-avail-c.past{ color:#DACFBF; }
.faf-avail-c.on{ color:#fff !important; background:#58AC9F; font-weight:600; box-shadow:0 6px 14px -7px rgba(88,172,159,.8); transition:transform .18s, background .18s; }
.faf-avail-c.on:hover{ background:#3d8579; transform:scale(1.1); }
.faf-avail-foot{ display:flex; gap:22px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:26px; font-family:'Raleway',sans-serif; font-size:14px; color:#6E6155; }
.faf-avail-legend{ display:inline-flex; align-items:center; gap:8px; }
.faf-avail-dot{ width:14px; height:14px; border-radius:50%; background:#58AC9F; }
/* ── Distinguer les trois natures de disponibilité ────────────────────────────
   Le balisage prévoyait déjà `.on` (créneaux individuels) et une pastille d'angle
   `.grp-open-mark` / `.grp-private-mark`, mais AUCUNE de ces classes n'avait de
   règle : les trois pastilles de légende sortaient identiques et les marqueurs de
   groupe étaient invisibles. Un même jour peut cumuler les deux — matin en
   individuel, après-midi en constellation — d'où une pastille en angle plutôt
   qu'une couleur de fond, qui ne saurait en montrer qu'une seule.

   Teal = individuel. Clay = groupe. Plein = ouvert à tous, creux = privé : même
   famille de couleur, la forme portant l'idée d'accès restreint. */

/* Jour ne portant QU'une séance de groupe : sans fond, il se confondait avec un
   jour vide. Teinte légère, sans concurrencer le teal des créneaux réservables. */
.faf-avail-c.grp-open-mark:not(.on),
.faf-avail-c.grp-private-mark:not(.on){ background:rgba(179,127,82,.13); color:#95633A; font-weight:600; }

/* Pastille d'angle : lisible aussi bien sur fond crème que sur la pastille teal
   d'un jour cumulé, grâce à l'anneau blanc. */
.faf-avail-c.grp-open-mark,
.faf-avail-c.grp-private-mark{ position:relative; }
.faf-avail-c.grp-open-mark::after,
.faf-avail-c.grp-private-mark::after{
  content:''; position:absolute; top:1px; right:1px; width:8px; height:8px;
  border-radius:50%; box-shadow:0 0 0 1.5px #FCF8F1;
}
.faf-avail-c.grp-open-mark::after{ background:#B37F52; }
.faf-avail-c.grp-private-mark::after{ background:#FCF8F1; border:2px solid #B37F52; }

/* Légende : chaque pastille prend la couleur de ce qu'elle annonce. */
.faf-avail-dot.grp-open{ background:#B37F52; }
.faf-avail-dot.grp-private{ background:#FCF8F1; border:2px solid #B37F52; }

.faf-avail-cta{ font-weight:600; color:#95633A !important; text-decoration:none; border-bottom:1.5px solid #C6A063; padding-bottom:2px; }
.faf-avail-cta:hover{ color:#C0855A !important; }
@media(max-width:600px){ .faf-avail-month{ padding:18px 14px 22px; } .faf-avail-c{ font-size:13px; } .faf-avail-h{ font-size:21px; } }

/* Réseaux sociaux déplacés sous « À propos » : habillage dans faf-footer.css. */

/* ── Contraste des liens de panneau ─────────────────────────────────────────
   Même remède que pour .mega-cat-item : ces liens calculaient à
   rgb(169,159,154) alors que leur règle demandait --ink-muted, sans qu'aucune
   feuille du thème ne l'explique. On réécrit avec le poids du contexte.
   --ink-muted (#A09A94) était de toute façon sous le seuil de lisibilité à
   11 px : les liens de bas de panneau passent à --ink, les descriptions
   d'accompagnement à --ink-soft — secondaires, mais lisibles. */
.nav-dropdown .mega-footer-link { color: var(--ink); }
.nav-dropdown .mega-footer-link:hover { color: var(--teal-dark); }
.nav-dropdown .dropdown-item { color: var(--ink); }
.nav-dropdown .dropdown-item .di-desc { color: var(--ink-soft); }

/* ── Très petits écrans : la barre d'annonce gagne une ligne ────────────────
   Mesuré au caractère près : sous 360px de large, la date ne tient plus sur une
   ligne et l'annonce en réclame trois. Les 42px prévus pour deux la coupaient —
   `overflow:hidden` la coupait proprement, mais coupée quand même.

   Seule `--announce-h` change : le décalage du corps et la position du logo la
   lisent, rien d'autre à synchroniser. */
@media (max-width: 360px) {
  :root { --announce-h: 56px; }
}