/* =====================================================
   Ferme de Basseilles — Header retenu (V4 desktop + V3 mobile)
   Port WordPress du prototype variant-final.html (ENG-53 / ENG-107).

   Différences avec le prototype, volontaires :
   - toutes les règles sont scopées sous `.fdb` (le prototype utilisait des
     sélecteurs nus : .btn, .logo, .icon, .topbar… qui entreraient en collision
     avec le thème et Elementor) ;
   - les variables sont préfixées --fdb-* et déclarées sur `.fdb`, pas sur :root ;
   - le reset global `* { margin: 0; padding: 0 }` est remplacé par un reset scopé ;
   - `body { overflow-x: hidden }` n'est PAS repris (voir README, § Sticky).
   ===================================================== */

.fdb {
  --fdb-green: #678D73;
  --fdb-green-dark: #56795F;
  --fdb-green-deep: #43604C;
  --fdb-yellow: #D3C774;
  --fdb-yellow-dark: #C4B65E;
  --fdb-cream: #FAF8F2;
  --fdb-ink: #2E3830;
  --fdb-muted: #6C756E;
  --fdb-white: #FFFFFF;
  --fdb-shadow: 0 8px 30px rgba(46, 56, 48, 0.12);
  --fdb-font: 'Montserrat', system-ui, -apple-system, sans-serif;

  font-family: var(--fdb-font);
  color: var(--fdb-ink);
  line-height: 1.6;
}

/* ---- reset scopé (remplace le `* { margin: 0; padding: 0 }` du prototype) ---- */
.fdb, .fdb *, .fdb *::before, .fdb *::after { box-sizing: border-box; }

.fdb ul, .fdb li, .fdb p, .fdb button, .fdb figure { margin: 0; padding: 0; }
.fdb ul { list-style: none; }
.fdb li::before, .fdb li::marker { content: none; }

/* `!important` assumé : les thèmes et Elementor soulignent les liens de contenu
   avec des sélecteurs plus spécifiques que `.fdb a` (constaté en staging — tous
   les liens du header ressortaient soulignés). Le seul soulignement voulu dans
   ce composant est celui du survol des coordonnées, réaffirmé juste après. */
.fdb a { color: inherit; text-decoration: none !important; }
.fdb img { max-width: 100%; display: block; height: auto; }
.fdb button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

.fdb .icon {
  width: 1em; height: 1em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: -0.125em;
}

/* =========================
   Barre supérieure (contact / actions / langue / réseaux)
   ========================= */
.fdb .topbar {
  background: var(--fdb-green);
  color: var(--fdb-white);
  font-size: 0.8rem;
  font-weight: 500;
}

.fdb .topbar-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0.45rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.fdb .topbar-contact {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.fdb .topbar-contact a,
.fdb .topbar-contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  opacity: 0.95;
  transition: opacity 0.2s;
}

.fdb .topbar-contact a:hover { opacity: 1; text-decoration: underline !important; }

.fdb .topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

/* sélecteur de langue */
.fdb .lang { position: relative; }

.fdb .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--fdb-white);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
}

.fdb .lang-btn:hover { background: rgba(255, 255, 255, 0.12); }

.fdb .lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--fdb-white);
  color: var(--fdb-ink);
  border-radius: 8px;
  box-shadow: var(--fdb-shadow);
  padding: 0.35rem;
  min-width: 120px;
  display: none;
  z-index: 60;
}

.fdb .lang.open .lang-menu { display: block; }

.fdb .lang-menu a {
  display: block;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.fdb .lang-menu a:hover { background: var(--fdb-cream); color: var(--fdb-green-dark); }

/* réseaux sociaux */
.fdb .socials {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.fdb .socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  transition: background 0.2s;
}

.fdb .socials a:hover { background: rgba(255, 255, 255, 0.15); }
.fdb .socials .icon { width: 1.05rem; height: 1.05rem; }

/* pastilles « Bon cadeau » / « Ma réservation » */
.fdb .topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fdb .topbar-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.fdb .topbar-pill:hover { background: var(--fdb-white); color: var(--fdb-green-dark); }

.fdb .topbar-pill.pill-yellow {
  background: var(--fdb-yellow);
  border-color: var(--fdb-yellow);
  color: var(--fdb-ink);
}

.fdb .topbar-pill.pill-yellow:hover {
  background: var(--fdb-yellow-dark);
  border-color: var(--fdb-yellow-dark);
}

/* =========================
   Navbar
   ========================= */
.fdb .navbar {
  background: var(--fdb-white);
  border-bottom: 1px solid rgba(103, 141, 115, 0.18);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 14px rgba(46, 56, 48, 0.06);
}

.fdb .nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.fdb .logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.fdb .logo img {
  width: 86px; height: 86px;
  border-radius: 50%;
}

/* liens de navigation */
.fdb .nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.fdb .nav-links > li { position: relative; }

.fdb .nav-links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.fdb .nav-links > li > a:hover,
.fdb .nav-links > li > a.active {
  color: var(--fdb-green-dark);
  background: rgba(103, 141, 115, 0.1);
}

.fdb .nav-links > li > a.active { color: var(--fdb-yellow-dark); background: none; }

/* sous-menu (Nos Logements) */
.fdb .submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--fdb-white);
  border-radius: 10px;
  box-shadow: var(--fdb-shadow);
  padding: 0.4rem;
  min-width: 220px;
  display: none;
  z-index: 60;
}

.fdb .has-submenu.open .submenu { display: block; }

@media (hover: hover) {
  .fdb .has-submenu:hover .submenu { display: block; }

  /* Pont de survol. Le sous-menu s'ouvre 8px sous le lien parent : sans ce pont,
     le curseur traverse une zone morte en descendant, le :hover se perd et le
     menu se referme avant d'être atteignable (signalé en recette). La bande
     n'existe que pendant le survol — hors survol elle intercepterait les clics
     sur le contenu situé juste sous le header. */
  .fdb .nav-links > li.has-submenu:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
  }
}

.fdb .submenu a {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
}

.fdb .submenu a:hover { background: var(--fdb-cream); color: var(--fdb-green-dark); }

/* =========================
   Boutons
   ========================= */
.fdb .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}

.fdb .btn:active { transform: scale(0.97); }

.fdb .btn-solid {
  background: var(--fdb-green);
  color: var(--fdb-white);
  border-color: var(--fdb-green);
}

.fdb .btn-solid:hover { background: var(--fdb-green-dark); border-color: var(--fdb-green-dark); }

.fdb .btn-yellow {
  background: var(--fdb-yellow);
  color: var(--fdb-ink);
  border-color: var(--fdb-yellow);
}

.fdb .btn-yellow:hover { background: var(--fdb-yellow-dark); border-color: var(--fdb-yellow-dark); }

.fdb .btn-outline {
  background: transparent;
  color: var(--fdb-green-dark);
  border-color: var(--fdb-green);
}

.fdb .btn-outline:hover { background: rgba(103, 141, 115, 0.1); }

/* =========================
   Burger + tiroir mobile
   ========================= */
.fdb .nav-mobile-cta { display: none; }
.fdb .nav-mobile-gift { display: none; }

.fdb .burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 8px;
  color: var(--fdb-green-dark);
}

.fdb .burger:hover { background: rgba(103, 141, 115, 0.1); }
.fdb .burger .icon { width: 1.6rem; height: 1.6rem; }

/* Le tiroir et son overlay portent eux-mêmes la classe .fdb : le JS les déplace
   dans <body> au chargement (un ancêtre Elementor avec `transform` casserait
   sinon leur `position: fixed`). Les sélecteurs restent donc valides.

   z-index très élevés, volontairement : le header vit à l'intérieur des
   conteneurs Elementor, qui créent leurs propres contextes d'empilement (souvent
   z-index: 99 sur les en-têtes). Depuis <body>, le tiroir ne se compare pas aux
   valeurs internes du header mais à celles de ces conteneurs — d'où des valeurs
   qui laissent de la marge. Constaté en recette : le header passait devant le
   tiroir ouvert. */
.fdb.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(46, 56, 48, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 999998;
}

body.fdb-drawer-open .fdb.drawer-overlay { opacity: 1; pointer-events: auto; }

.fdb.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw);
  background: var(--fdb-white);
  z-index: 999999;
  transform: translateX(105%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

body.fdb-drawer-open .fdb.drawer { transform: translateX(0); }

.fdb .drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(103, 141, 115, 0.15);
}

.fdb .drawer-head img { width: 52px; height: 52px; border-radius: 50%; }

.fdb .drawer-close {
  width: 2.4rem; height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--fdb-ink);
}

.fdb .drawer-close:hover { background: var(--fdb-cream); }
.fdb .drawer-close .icon { width: 1.4rem; height: 1.4rem; }

.fdb .drawer-actions {
  display: grid;
  gap: 0.55rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(103, 141, 115, 0.15);
}

.fdb .drawer-actions .btn { width: 100%; padding: 0.75rem 1rem; }

.fdb .drawer-nav { padding: 0.75rem 0.75rem 1rem; }

.fdb .drawer-nav > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.6rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 8px;
}

.fdb .drawer-nav > li > a:hover { background: var(--fdb-cream); color: var(--fdb-green-dark); }

.fdb .drawer-sub {
  display: none;
  padding-left: 1rem;
}

.fdb .drawer-nav li.open .drawer-sub { display: block; }

.fdb .drawer-sub a {
  display: block;
  padding: 0.5rem 0.6rem;
  font-size: 0.87rem;
  color: var(--fdb-muted);
  border-radius: 8px;
}

.fdb .drawer-sub a:hover { background: var(--fdb-cream); color: var(--fdb-green-dark); }

.fdb .drawer-foot {
  margin-top: auto;
  padding: 1.1rem 1.25rem 1.5rem;
  border-top: 1px solid rgba(103, 141, 115, 0.15);
  font-size: 0.82rem;
  color: var(--fdb-muted);
  display: grid;
  gap: 0.5rem;
}

.fdb .drawer-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.fdb .drawer-foot a:hover { color: var(--fdb-green-dark); }

.fdb .drawer-foot .socials { color: var(--fdb-green-dark); margin-top: 0.25rem; }
.fdb .drawer-foot .socials a:hover { background: var(--fdb-cream); }

/* =====================================================
   Header retenu — mise en page (ex-`body.vf`)
   Réf. Linear ENG-53 / ENG-107 (Charles / Julien)
   ===================================================== */

/* réseaux sociaux de la barre verte un peu plus grands */
.fdb .topbar .socials a { width: 2rem; height: 2rem; }
.fdb .topbar .socials .icon { width: 1.25rem; height: 1.25rem; }

/* ENG-107 (Charles) : sur ordinateur, « Bon cadeau » et « Ma réservation » sont
   décalés d'1 cm vers la gauche (isolés du sélecteur de langue et des réseaux)
   et espacés l'un de l'autre pour mieux sauter aux yeux. */
@media (min-width: 721px) {
  .fdb .topbar-actions {
    gap: 0.9rem;
    margin-right: 1cm;
  }
  .fdb .topbar-pill { padding: 0.34rem 0.9rem; font-size: 0.8rem; }
}

/* --- Desktop : container centré (max-width 1360px) + changements Charles :
   Réserver tout à gauche, LOGO PARFAITEMENT CENTRÉ, 3 menus de chaque côté.
   Grille 3 colonnes « 1fr auto 1fr » → la colonne centrale (logo) tombe pile au
   centre du container quel que soit le contenu des côtés → logo centré à l'écran.
   Réserver est ancré à gauche en absolu pour ne pas décaler ce centrage. --- */
.fdb .nav-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.fdb .nav-side {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

/* ENG-107 (Charles) : « occuper tout l'espace en centrant mieux » → les 3 menus de
   chaque côté ne se collent plus au logo, ils sont centrés dans leur demi-colonne.
   Côté gauche, le centrage se fait dans l'espace restant après la place réservée
   au bouton Réserver → plus de gros trou entre « Réserver » et « Accueil ». */
.fdb .nav-side.left { justify-content: center; }
.fdb .nav-side.right { justify-content: center; }

/* « Réserver » ancré tout à gauche, sorti du flux → n'influence pas le centrage du logo.
   ENG-107 : bouton agrandi (c'est le CTA principal du site). */
.fdb .nav-side.left .btn-solid {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  padding: 0.75rem 1.6rem;
  font-size: 1rem;
  border-radius: 999px;
}

.fdb .nav-side.left .btn-solid .icon { width: 1.2rem; height: 1.2rem; }

/* on réserve la place du bouton Réserver dans la colonne de gauche pour que les
   menus ne passent pas dessous (bouton plus large → réserve plus grande) */
.fdb .nav-side.left { padding-left: 11.5rem; }

.fdb .logo { justify-self: center; flex-shrink: 0; }

/* ENG-107 : liens de navigation plus grands et un peu plus espacés */
.fdb .nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.fdb .nav-links > li > a {
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
}

/* léger dégradé sur les menus quand la fenêtre se resserre */
@media (max-width: 1360px) {
  .fdb .nav-links > li > a { padding: 0.55rem 0.7rem; font-size: 0.92rem; }
  .fdb .nav-side.left .btn-solid { padding: 0.65rem 1.25rem; font-size: 0.92rem; }
  .fdb .nav-side.left { padding-left: 10rem; }
}

@media (max-width: 1240px) {
  .fdb .nav-links > li > a { padding: 0.5rem 0.5rem; font-size: 0.85rem; }
  .fdb .nav-links { gap: 0.15rem; }
  .fdb .nav-side.left .btn-solid { padding: 0.6rem 1rem; font-size: 0.85rem; }
  .fdb .nav-side.left { padding-left: 8.75rem; }
}

/* le libellé « Bon cadeau » n'apparaît pas sur ordinateur (pastille dans la topbar) */
.fdb .gift-label { display: none; }

/* --- Mobile (< 1080px) : bascule sur la variante 3 ---
   TOUT sur une seule ligne : logo (gauche) + Réserver + Bon cadeau + burger (droite).
   « Réserver » et « Bon cadeau » restent écrits ; dégradation progressive si la place manque. */
@media (max-width: 1080px) {
  .fdb .nav-inner {
    display: flex;
    flex-wrap: nowrap;               /* jamais de retour à la ligne */
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;                 /* mobile : plein écran, pas de container 1360px */
    overflow: hidden;                /* filet de sécurité anti-débordement (mobile only) */
    justify-content: flex-start;     /* annule le justify-content:center du desktop */
  }

  .fdb .nav-side { display: none; }  /* menus desktop cachés → burger */

  .fdb .logo {
    flex-shrink: 0;
    margin-right: auto;              /* logo à gauche, pousse le reste à droite */
    position: static;
  }

  .fdb .nav-mobile-cta,
  .fdb .nav-mobile-gift {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.7rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .fdb .nav-mobile-gift .gift-label { display: inline; }
  .fdb .nav-mobile-cta .icon,
  .fdb .nav-mobile-gift .icon { width: 1.05rem; height: 1.05rem; }

  .fdb .burger { display: inline-flex; flex-shrink: 0; margin-left: 0.1rem; }
}

@media (max-width: 720px) {
  .fdb .topbar-inner { padding: 0.4rem 0.9rem; }
  .fdb .nav-inner { padding: 0.55rem 0.9rem; gap: 0.75rem; }
  .fdb .logo img { width: 64px; height: 64px; }

  /* pastilles retirées sur téléphone (les actions vivent dans le tiroir) */
  .fdb .topbar-actions { display: none; }

  /* Charles (ENG-53) : les réseaux sociaux RESTENT sur la barre verte en mobile */
}

/* Petits/moyens mobiles : on garde « Réserver » et « Bon cadeau » écrits, MÊME police,
   jusqu'à 320px. On resserre uniquement les espacements (gap/paddings/logo). */
@media (max-width: 620px) {
  .fdb .nav-inner { padding: 0.5rem 0.5rem; gap: 0.25rem; }
  .fdb .logo img { width: 70px; height: 70px; }

  .fdb .nav-mobile-cta,
  .fdb .nav-mobile-gift {
    gap: 0.3rem;
    padding: 0.5rem 0.6rem;
    /* font-size inchangée (0.7rem) → texte lisible identique jusqu'à 320px */
  }
  .fdb .burger { width: 2.2rem; height: 2.2rem; }

  /* barre verte compacte : on retire l'email et l'adresse, on garde tél + langue + réseaux */
  .fdb .topbar-inner { padding: 0.4rem 0.5rem; gap: 0.4rem; }
  .fdb .topbar-contact .topbar-mail,
  .fdb .topbar-contact .topbar-address { display: none; }
}

/* ≤ 500px : le logo rétrécit, mais on GARDE `margin-right: auto` (hérité du bloc
   1080px) pour que le groupe Réserver/Bon cadeau/burger reste plaqué à droite.
   Le prototype le remplaçait ici par une marge fixe « pour récupérer de la
   largeur » : c'était inutile (une marge auto vaut 0 dès qu'il n'y a plus
   d'espace libre) et ça tassait tout le groupe contre le logo. */
@media (max-width: 500px) {
  .fdb .logo img { width: 60px; height: 60px; }
  .fdb .nav-inner { gap: 0.3rem; padding: 0.5rem 0.5rem; }
  .fdb .nav-mobile-cta,
  .fdb .nav-mobile-gift { padding: 0.48rem 0.55rem; gap: 0.28rem; }
  .fdb .burger { width: 2.1rem; height: 2.1rem; margin-left: 0; }
}

/* ≤ 400px : logo encore un cran plus petit + espacements minimaux */
@media (max-width: 400px) {
  .fdb .nav-inner { padding: 0.5rem 0.4rem; gap: 0.22rem; }
  .fdb .logo img { width: 52px; height: 52px; }

  .fdb .nav-mobile-cta,
  .fdb .nav-mobile-gift { gap: 0.25rem; padding: 0.46rem 0.45rem; }
  .fdb .nav-mobile-cta .icon,
  .fdb .nav-mobile-gift .icon { width: 0.95rem; height: 0.95rem; }
  .fdb .burger { width: 2.1rem; height: 2.1rem; }

  /* barre verte resserrée, réseaux conservés */
  .fdb .topbar-inner { padding: 0.4rem 0.45rem; gap: 0.3rem; }
  .fdb .topbar-contact a { font-size: 0.74rem; }
  .fdb .topbar .socials { gap: 0.1rem; }
  .fdb .topbar .socials a { width: 1.7rem; height: 1.7rem; }
  .fdb .topbar .socials .icon { width: 1.05rem; height: 1.05rem; }
}

/* La barre d'admin WP décale le sticky de 32px (46px sur petit écran). */
body.admin-bar .fdb .navbar { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .fdb .navbar { top: 46px; }
}