/* =====================================================================
   L'OLIVIER FORGÉ — CSS SECTION : HEADER + MENU MOBILE PLEIN ÉCRAN
   À ajouter à la suite de olf-global.css (CSS personnalisé Elementor).
   Dépend des variables et utilitaires de olf-global.css.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  HEADER — barre fixe, transparente sur le hero, opaque au scroll    */
/* ------------------------------------------------------------------ */
.olf-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .5s ease, box-shadow .5s ease, padding .5s ease;
  background:transparent;
}
.olf-header__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; padding:22px 46px;
  transition:padding .5s ease;
}

/* État « scrollé » : fond clair, ombre légère, barre resserrée.
   La classe .olf-header--solid est ajoutée par olf-global.js. */
.olf-header--solid{
  background:rgba(255,253,249,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--olf-line), 0 8px 30px rgba(33,30,27,.06);
}
.olf-header--solid .olf-header__bar{ padding:14px 46px; }

/* Logo (signature) */
.olf-header__logo{
  font-style:italic; font-size:26px; line-height:1; color:#fff;
  text-decoration:none; letter-spacing:.005em; white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
  transition:color .5s ease, text-shadow .5s ease, font-size .5s ease;
}
.olf-header--solid .olf-header__logo{ color:var(--olf-ink); text-shadow:none; font-size:23px; }

/* Bloc droit : navigation + utilitaires */
.olf-header__right{ display:flex; align-items:center; gap:34px; }

/* Navigation desktop */
.olf-nav{ display:flex; align-items:center; gap:28px; }
.olf-nav a{
  position:relative; font-size:12px; font-weight:300;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:rgba(255,255,255,.92); padding:6px 0;
  transition:color .4s ease;
}
.olf-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--olf-gold); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.olf-nav a:hover{ color:#fff; }
.olf-nav a:hover::after{ transform:scaleX(1); }
.olf-nav a.olf-nav--active::after{ transform:scaleX(1); }
.olf-header--solid .olf-nav a{ color:var(--olf-ink); }
.olf-header--solid .olf-nav a:hover{ color:var(--olf-gold); }

/* Utilitaires (recherche, panier) */
.olf-header__utils{ display:flex; align-items:center; gap:18px; }
.olf-iconbtn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; color:#fff;
  text-decoration:none; transition:color .4s ease, background .4s ease;
}
.olf-iconbtn svg{ width:19px; height:19px; display:block; }
.olf-iconbtn:hover{ color:var(--olf-gold); }
.olf-header--solid .olf-iconbtn{ color:var(--olf-ink); }
.olf-header--solid .olf-iconbtn:hover{ color:var(--olf-gold); }
.olf-cart-count{
  position:absolute; top:2px; right:0;
  min-width:16px; height:16px; padding:0 4px; border-radius:9px;
  background:var(--olf-gold); color:#fff; font-family:'Jost',sans-serif;
  font-size:9px; font-weight:500; line-height:16px; text-align:center;
}

/* Bouton hamburger (caché en desktop) */
.olf-burger{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; margin:0;
  background:transparent; border:0; cursor:pointer;
}
.olf-burger__lines{ position:relative; width:24px; height:14px; }
.olf-burger__lines span{
  position:absolute; left:0; height:1.5px; width:100%;
  background:#fff; transition:background .5s ease;
}
.olf-burger__lines span:nth-child(1){ top:0; }
.olf-burger__lines span:nth-child(2){ top:50%; transform:translateY(-50%); width:70%; }
.olf-burger__lines span:nth-child(3){ bottom:0; }
.olf-header--solid .olf-burger__lines span{ background:var(--olf-ink); }

/* ------------------------------------------------------------------ */
/*  MENU MOBILE — volet plein écran                                    */
/* ------------------------------------------------------------------ */
.olf-mobile{
  position:fixed; inset:0; z-index:1100;
  display:flex; flex-direction:column;
  background:var(--olf-char); color:#fff;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s ease, visibility .5s ease;
}
.olf-mobile.olf-mobile--open{ opacity:1; visibility:visible; pointer-events:auto; }
body.olf-noscroll{ overflow:hidden; }

/* En-tête du volet : logo + fermer */
.olf-mobile__top{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.08);
}
.olf-mobile__logo{ font-style:italic; font-size:21px; color:#fff; text-decoration:none; }
.olf-close{
  display:inline-flex; align-items:center; gap:9px; padding:8px 4px;
  background:transparent; border:0; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.65);
  transition:color .4s ease;
}
.olf-close:hover{ color:#fff; }
.olf-close svg{ width:18px; height:18px; }

/* Corps : liens principaux (grands, aérés) */
.olf-mobile__body{
  flex:1 1 auto; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:34px 30px 26px;
}
.olf-mobile__nav{ display:flex; flex-direction:column; }
.olf-mobile__nav > a,
.olf-mobile__group > .olf-mobile__link{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:34px; font-weight:500; line-height:1.18; color:#fff;
  text-decoration:none; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:color .35s ease, padding-left .4s ease;
}
.olf-mobile__nav > a:hover,
.olf-mobile__group > .olf-mobile__link:hover{ color:var(--olf-gold); padding-left:6px; }

/* Animation d'entrée échelonnée des items */
.olf-mobile__nav > *{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.olf-mobile.olf-mobile--open .olf-mobile__nav > *{ opacity:1; transform:none; }
.olf-mobile.olf-mobile--open .olf-mobile__nav > *:nth-child(1){ transition-delay:.12s; }
.olf-mobile.olf-mobile--open .olf-mobile__nav > *:nth-child(2){ transition-delay:.18s; }
.olf-mobile.olf-mobile--open .olf-mobile__nav > *:nth-child(3){ transition-delay:.24s; }
.olf-mobile.olf-mobile--open .olf-mobile__nav > *:nth-child(4){ transition-delay:.30s; }
.olf-mobile.olf-mobile--open .olf-mobile__nav > *:nth-child(5){ transition-delay:.36s; }
.olf-mobile.olf-mobile--open .olf-mobile__nav > *:nth-child(6){ transition-delay:.42s; }

/* Groupe dépliable (ex. Collections) */
.olf-mobile__group .olf-mobile__link{ width:100%; cursor:pointer; }
.olf-mobile__plus{
  flex:0 0 auto; color:var(--olf-gold); font-size:22px; line-height:1;
  transition:transform .4s ease; font-family:'Jost',sans-serif; font-weight:300;
}
.olf-mobile__group.olf-mobile__group--open .olf-mobile__plus{ transform:rotate(45deg); }
.olf-mobile__sub{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1);
}
.olf-mobile__group--open .olf-mobile__sub{ grid-template-rows:1fr; }
.olf-mobile__sub > div{ overflow:hidden; }
.olf-mobile__sublist{
  display:flex; flex-direction:column; gap:14px;
  padding:18px 0 22px 4px;
}
.olf-mobile__sublist a{
  font-family:'Jost',sans-serif; font-size:15px; font-weight:300;
  letter-spacing:.05em; color:rgba(255,255,255,.72);
  text-decoration:none; transition:color .35s ease;
}
.olf-mobile__sublist a:hover{ color:#fff; }

/* Pied du volet : réseaux sociaux + contact */
.olf-mobile__foot{
  flex:0 0 auto; padding:24px 30px calc(28px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08);
}
.olf-mobile__social{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.olf-social-link{
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; border:1px solid rgba(255,255,255,.14);
  border-radius:2px; text-decoration:none;
  color:rgba(255,255,255,.82); transition:border-color .4s ease, color .4s ease, background .4s ease;
}
.olf-social-link:hover{ border-color:var(--olf-gold); color:#fff; background:rgba(176,141,87,.08); }
.olf-social-link svg{ width:18px; height:18px; flex:0 0 auto; }
.olf-social-link span{
  font-family:'Jost',sans-serif; font-size:13px; font-weight:300; letter-spacing:.04em;
}
.olf-mobile__contact{
  margin-top:22px; font-family:'Jost',sans-serif; font-size:12px; font-weight:300;
  line-height:1.9; letter-spacing:.03em; color:rgba(255,255,255,.5);
}
.olf-mobile__contact a{ color:rgba(255,255,255,.5); text-decoration:none; }
.olf-mobile__contact a:hover{ color:#fff; }

/* ------------------------------------------------------------------ */
/*  RESPONSIVE                                                          */
/* ------------------------------------------------------------------ */
@media (max-width:1024px){
  .olf-header__bar{ padding:18px 28px; }
  .olf-header--solid .olf-header__bar{ padding:12px 28px; }
}

/* Bascule desktop -> mobile : on masque la nav, on montre le hamburger */
@media (max-width:880px){
  .olf-nav{ display:none; }
  .olf-header__utils .olf-iconbtn--search{ display:none; } /* recherche déplacée dans le menu */
  .olf-burger{ display:inline-flex; }
  .olf-header__right{ gap:6px; }
  .olf-header__logo{ font-size:22px; }
  .olf-header--solid .olf-header__logo{ font-size:21px; }
}

@media (max-width:767px){
  .olf-header__bar{ padding:14px 20px; }
  .olf-header--solid .olf-header__bar{ padding:11px 20px; }
  .olf-mobile__nav > a,
  .olf-mobile__group > .olf-mobile__link{ font-size:30px; padding:13px 0; }
  .olf-mobile__body{ padding:26px 24px 22px; }
  .olf-mobile__foot{ padding:22px 24px calc(24px + env(safe-area-inset-bottom)); }
}

/* Très petits écrans : réseaux sur une colonne */
@media (max-width:360px){
  .olf-mobile__social{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .olf-mobile, .olf-mobile__nav > *, .olf-mobile__plus, .olf-mobile__sub{ transition:none !important; }
}