/* ====== Fab Off-canvas Header (namespaced) ====== */
#fab-header{
  --h:170px; 
  --gap:16px; 
  --b:1px; 
  --w:320px; 
  --shadow: 0 10px 30px rgba(0,0,0,.25);

  /* Couleurs */
  --bg: #0e0000c4;   /* ta couleur (inclut transparence) */
  --red: var(--wp--preset--color--accent-2, #d83721);    /* texte, logo, liens */

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}



#fab-header .fab-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--h);
  max-width:1440px;
  margin:0 auto;
  padding: 8px 32px;
}

#fab-header .fab-logo {
  display: flex;
  align-items: center;
}

#fab-header .fab-logo img {
  max-height: 150px;   /* ajuste à la hauteur de ton header */
  width: auto;
  display: block;
}

/* Desktop nav (≥729px) */
#fab-header .fab-primary-desktop{ display:block; }
#fab-header .fab-primary-desktop__list{
    display:flex;
    gap: 16px;
    list-style:none;
    margin:0;
    padding: 16px 32px;
    background: var(--bg);
    border-radius: 64px;
}
#fab-header .fab-primary-desktop__list a{ 
  padding:8px 16px; 
  color: var(--red);
}
#fab-header .fab-primary-desktop__list a:hover,
#fab-header .fab-primary-desktop__list a:focus{ 
}

/* Burger (mobile) */
#fab-header .fab-nav-toggle{
  display: none; 
  align-items: center; 
  gap: 8px; 
  padding: 8px 16px;
  border: none; 
  border-radius: 8px;
  cursor: pointer;
}
#fab-header .fab-nav-toggle:focus{ outline:2px solid var(--red); outline-offset:2px; }
#fab-header .fab-nav-toggle__label{ 
	color: var(--red); 
	font-size: 1.25rem;
    font-family: var(--wp--preset--font-family--sofia-sans-condensed);
    text-transform: uppercase;
}
#fab-header .fab-nav-toggle__icon svg{ fill: var(--red); }

/* Backdrop : même couleur que le fond demandé */
#fab-header .fab-backdrop{
  position: fixed; 
  inset: 0; 
  background: var(--bg); 
  opacity: 0; 
  pointer-events: none;
  transition: opacity .25s ease;
}
#fab-header .fab-backdrop.is-open{ opacity: 1; pointer-events: auto; }

/* Off-canvas panel : même fond */
/* Off-canvas fermé : non cliquable, non focusable, et visuellement masqué */
#fab-header .fab-offcanvas{
  position: fixed; 
  top: 0; 
  right: 0; 
  height: 100dvh; 
  width: min(88vw, var(--w));
  background: #ffffffd9;
  box-shadow: var(--shadow);
  transform: translateX(100%); 
  transition: transform .28s ease, opacity .28s ease;
  display: flex; 
  flex-direction: column;
  opacity: 0;
  pointer-events: none;      /* <- évite toute interaction quand fermé */
  will-change: transform;    /* perf */
}
#fab-header .fab-offcanvas.is-open{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

#fab-header .fab-offcanvas__header{
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  height: 100px;
  padding: 8px 32px; 
  border-bottom: var(--b) solid var(--red);
}
#fab-header .fab-offcanvas__title{ font-size: 1.25rem; margin:0; color: var(--red); padding-left: 24px;}
#fab-header .fab-offcanvas__close{
  border: var(--b) solid var(--red);
  border-radius: 8px; 
  padding: 8px; 
  cursor: pointer; 
  color: var(--red);
}
#fab-header .fab-offcanvas__close svg { fill: var(--red); }

#fab-header .fab-offcanvas__nav { padding: 8px 32px; overflow:auto; }
#fab-header .fab-offcanvas__list { list-style:none; margin:0; padding: 8px 0; }
#fab-header .fab-offcanvas__list li { padding: 16px 0; }
#fab-header .fab-offcanvas__list li + li { border-top: var(--b) solid rgba(255,255,255,.12); }
#fab-header .fab-offcanvas__list a { color: var(--red); font-size: x-large; }
#fab-header .fab-offcanvas__list a:hover,
#fab-header .fab-offcanvas__list a:focus{ 
  text-decoration: none;
}

/* No scroll when open */
body.fab-no-scroll{ overflow:hidden; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #fab-header .fab-backdrop{ transition: none; }
  #fab-header .fab-offcanvas{ transition: none; }
}

/* Mobile < 728px */
@media (max-width:1024px){
	#fab-header .fab-primary-desktop{ display:none; }
	#fab-header .fab-nav-toggle{ display:inline-flex; }
	#fab-header{ --h:100px; }
	#fab-header .fab-logo img {	height: 80px; }
}