/* Note 2026-07-24 : le panneau mobile portait encore trois valeurs de
   l'ancienne palette — le crème #FAF7F2 du panneau, le voile #2D2420 et les
   filets sur l'ancien brun #3A2E2A. Toutes trois avaient disparu du reste du
   site ; elles reprennent les tokens communs (fond global, encre).
   Les fallbacks d'anciennes couleurs (#3A2E2A pour
   --rds-brun, #ef8d9c pour --rds-vieux-rose) ont été retirés des var().
   Ces deux tokens sont toujours définis par style.css, dont ce fichier
   dépend : les fallbacks n'étaient jamais appliqués, mais ils laissaient
   croire à la lecture que l'ancienne palette était encore en vigueur. */
/* ═══════════════════════════════════════════════════════════
   BURGER BUTTON
   Visible dès que la barre desktop ne tient plus (≤ 1279px) — le seuil et son
   calcul vivent dans style.css, qui y masque .nav__links. Les deux règles sont
   SOLIDAIRES : les désaccorder laisserait une largeur sans aucune navigation,
   ou les deux à la fois.
   ═══════════════════════════════════════════════════════════ */
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--rds-brun);
  -webkit-tap-highlight-color: transparent;
}

.nav__burger-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.25s ease;
}

/* Animation 3 barres → X */
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Blanc quand nav transparente sur pages à hero (voir body.rds-nav-hero, style.css) */
body.rds-nav-hero .nav:not(.is-scrolled) .nav__burger { color: #fff; }

@media (max-width: 1279px) {
  .nav__burger { display: flex; }
}


/* ═══════════════════════════════════════════════════════════
   MENU MOBILE — conteneur global (fixed, inset: 0)
   ═══════════════════════════════════════════════════════════ */
/* `overflow: clip` (et non `hidden`) : ce conteneur n'a aucune raison d'être
   défilable — c'est le panneau qui porte son propre `overflow-y: auto`. Avec
   `hidden`, il reste un conteneur de défilement, que le panneau fait déborder
   tant qu'il est à translateX(100%) ; toute mise au focus d'un élément du
   panneau pendant l'animation d'entrée le fait alors défiler et décale le
   voile (voir openMenu() dans assets/js/main.js). `clip` supprime cette
   possibilité à la racine, sans rien changer visuellement. La déclaration
   `hidden` est conservée juste avant, comme repli pour les navigateurs
   antérieurs au socle du thème. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 205;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  visibility: hidden;
}

.mobile-menu.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* Pendant les 0,35 s d'entrée du panneau, ses liens et ses boutons défilent
   sous le doigt : un second appui posé à l'emplacement du burger ne touchait
   pas la même cible selon l'instant (mesuré à 390 px : le voile jusqu'à
   ~81 ms, puis le LIEN LOGO de l'en-tête — qui NAVIGUE vers l'accueil —
   jusqu'à ~248 ms, puis le bouton de fermeture). Un visiteur pressé quittait
   donc la page en appuyant deux fois au même endroit. Tant qu'il coulisse, le
   panneau est transparent au pointeur : l'appui atteint le voile, dessous,
   qui referme le menu — le résultat attendu d'un deuxième appui.
   ⚠️ `pointer-events` ne touche ni le focus clavier, ni l'ordre de tabulation,
   ni l'arbre d'accessibilité : le bouton de fermeture reste focalisé dès
   l'ouverture et activable à la touche. C'est précisément pourquoi la
   neutralisation ne peut pas passer par `inert` ici.
   La classe est retirée sur la fin réelle de la transition — jamais sur un
   délai codé en dur — par openMenu() dans assets/js/main.js. */
.mobile-menu.is-opening .mobile-menu__panel { pointer-events: none; }

/* Fond assombri */
.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #2A1F1A8C;   /* encre à 55 % — était l'ancien #2D2420 */
  opacity: 0;
  transition: opacity 0.35s ease;
  cursor: pointer;
}

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

/* Panneau latéral — coulisse depuis la droite */
.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: min(340px, 90vw);
  height: 100dvh;
  background: var(--rds-fond);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -4px 0 32px #2A1F1A24;   /* encre à 14 % — était l'ancien #2D2420 */
}

.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }


/* ───────────────────────────────────────────
   En-tête panneau : logo + bouton fermer
   ─────────────────────────────────────────── */
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.4rem;
  height: 80px;
  border-bottom: 1px solid #2A1F1A1A;
  flex-shrink: 0;
  background: var(--rds-fond);
}

.mobile-menu__logo-link img {
  height: 36px;
  width: auto;
  display: block;
  filter: none;
}

.mobile-menu__close {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--rds-taupe, #8A7A72);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu__close:hover { color: var(--rds-brun); }


/* ───────────────────────────────────────────
   Liens de navigation
   ─────────────────────────────────────────── */
.mobile-menu__nav {
  padding: 1.8rem 1.4rem 1.2rem;
}

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

.mobile-menu__links > li {
  border-bottom: 1px solid #2A1F1A12;
}

.mobile-menu__links > li:first-child {
  border-top: 1px solid #2A1F1A12;
}

/* Navigation en Lato : élément d'interface, pas un titre (demande cliente). */
.mobile-menu__links a {
  display: block;
  padding: 0.9rem 0;
  font-family: var(--rds-font-body);
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--rds-brun);
  text-decoration: none;
  line-height: 1.2;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.mobile-menu__links a:hover { color: var(--rds-vieux-rose); padding-left: 0.4rem; }

.mobile-menu__links a.active,
.mobile-menu__links .current-menu-item > a,
.mobile-menu__links .current_page_item > a { color: var(--rds-vieux-rose); }

/* Lien Contact — même police que les autres, couleur rose pour le distinguer */
.mobile-menu__links .nav__cta,
.mobile-menu__links .menu-item-contact > a {
  color: var(--rds-vieux-rose);
  background: none;
  padding: 0.9rem 0;
  font-family: var(--rds-font-title);
  font-size: 1.45rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 0;
  display: block;
}

.mobile-menu__links .nav__cta:hover { background: none; color: var(--rds-brun); padding-left: 0.4rem !important; }


/* ───────────────────────────────────────────
   Contact rapide
   ─────────────────────────────────────────── */
.mobile-menu__contact {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.2rem 1.4rem;
  border-top: 1px solid #2A1F1A14;
  margin-top: auto;
}

.mobile-menu__contact-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--rds-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rds-brun);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.mobile-menu__contact-link svg { flex-shrink: 0; }
.mobile-menu__contact-link:hover { color: var(--rds-vieux-rose); }


/* ───────────────────────────────────────────
   Réseaux sociaux
   ─────────────────────────────────────────── */
.mobile-menu__social {
  display: flex;
  gap: 0.65rem;
  padding: 0.8rem 1.4rem 1.8rem;
}

.mobile-menu__social-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #2A1F1A26;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rds-taupe, #8A7A72);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.mobile-menu__social-link:hover {
  background: var(--rds-vieux-rose);
  border-color: var(--rds-vieux-rose);
  color: #fff;
}

.mobile-menu__social-link svg { width: 16px; height: 16px; display: block; }


/* ═══════════════════════════════════════════════════════════
   Plugin Instagram Feed — overrides
   ═══════════════════════════════════════════════════════════ */
.section-instagram__plugin-feed .sbi_header,
.section-instagram__plugin-feed .sbi_follow_btn { display: none !important; }

.section-instagram__plugin-feed #sbi_images {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0.5rem !important;
}

@media (max-width: 900px) {
  .section-instagram__plugin-feed #sbi_images {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .section-instagram__plugin-feed #sbi_images {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Fond hero — porté par .hero directement via background-image */
.hero__bg--gradient { background: none; }

@media (prefers-reduced-motion: reduce) {
  .nav__burger-bar,
  .mobile-menu__overlay,
  .mobile-menu__panel,
  .mobile-menu__links a,
  .mobile-menu__close,
  .mobile-menu__contact-link,
  .mobile-menu__social-link { transition: none; }
}

/* AOS — évite conflits avec hover sur service-card */
.aos-animate .service-card {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}