/* ============================================================
   LAYOUT - header, burger, menu plein écran, footer
   Structure commune à toutes les pages.
   ============================================================ */

/* ---------- HEADER ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem 3rem;
  color:#fff;
  background:transparent;
  font-family:var(--display);
  transition:color .35s ease;
}
.header::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:#fff;
  transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--ease-out);
}
.header.light{color:#20242e;box-shadow:0 2px 16px rgba(15,20,30,.08);}
.header.light::before{transform:scaleY(1);}
.header.light .sep{background:rgba(32,36,46,.35);}
.header.light .lang .tri-dn{border-bottom-color:#20242e;}
.header-left{display:flex;align-items:center;gap:3rem;margin-left:calc(44px + 3rem);}

/* ---------- BURGER ---------- */
.burger{
  position:fixed;top:1.5rem;left:3rem;z-index:300;
  width:44px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;background:none;border:none;color:#fff;padding:0;
}
.burger .bar{
  display:block;width:44px;height:2px;background:#fff;
  transform-origin:center;
  transition:
    transform .55s var(--ease-out),
    width .55s var(--ease-out),
    background .3s ease;
}
.burger .bar:nth-child(2){width:34px;}
.burger .lbl{
  margin-top:5px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--blair);
  font-weight:300;color:#fff;text-align:center;line-height:1;white-space:nowrap;
  transition:color .3s ease, margin-top .45s var(--ease-out);
}
.burger.dark .bar{background:#20242e;}
.burger.dark .lbl{color:#20242e;}
.burger.open .bar{background:#fff;}
.burger.open .lbl{color:#fff;margin-top:13px;}
.burger.open .bar:nth-child(1){transform:translateY(4.5px) rotate(45deg);}
.burger.open .bar:nth-child(2){width:44px;transform:translateY(-4.5px) rotate(-45deg);}
.burger:hover .bar:nth-child(2){width:44px;}

/* ---------- LOGO & NAV ---------- */
.logo{
  font-family:var(--blair);
  font-size:1.65rem;letter-spacing:.1em;font-weight:500;
  text-transform:uppercase;line-height:1;
}
.nav{display:flex;gap:2.6rem;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--blair);font-weight:300;}
.nav a{opacity:.95;transition:opacity .2s;position:relative;}
.nav a:hover{opacity:.6;}
.header-right{display:flex;align-items:center;gap:2rem;font-size:.85rem;}
.sep{width:1px;height:2.4rem;background:rgba(255,255,255,.35);}
.search-box{display:flex;align-items:center;cursor:pointer;opacity:.95;}
.search-box svg{width:19px;height:19px;}
.search-box:hover{opacity:.6;}
.lang{
  display:flex;align-items:center;gap:.45rem;cursor:pointer;
  letter-spacing:.12em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
}
.lang .tri-dn{
  width:0;height:0;
  border-bottom:8px solid #fff;border-left:8px solid transparent;
}
.search-box{transition:opacity .3s ease, transform .5s var(--ease-out);}

/* ---------- RECHERCHE SITE (morphing depuis la loupe) ---------- */
.nav-search{
  position:absolute;top:50%;right:5rem;transform:translateY(-50%);
  display:flex;align-items:center;gap:1rem;
  width:0;max-width:min(640px, calc(100vw - 8rem));
  overflow:hidden;opacity:0;pointer-events:none;
  transition:width .55s var(--ease-out), opacity .35s ease;
}
.header.search-active .nav-search{
  width:min(640px, calc(100vw - 8rem));opacity:1;pointer-events:auto;
}
.nav-search input{
  flex:1;min-width:0;background:none;border:none;color:inherit;
  font-family:var(--display);font-weight:300;font-size:1.2rem;
  padding:.45rem 0;border-bottom:1px solid currentColor;
}
.nav-search input:focus{outline:none;}
.nav-search input::placeholder{color:currentColor;opacity:.5;}
.nav-search__close{
  flex-shrink:0;background:none;border:none;color:inherit;cursor:pointer;
  font-size:1.6rem;line-height:1;opacity:.7;transition:opacity .2s;
}
.nav-search__close:hover{opacity:1;}
/* Masque la nav pendant la recherche pour libérer la place */
.header.search-active .nav,
.header.search-active .sep,
.header.search-active .lang{
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.header.search-active .search-box{opacity:0;pointer-events:none;}

/* Panneau de résultats - glisse depuis le haut, derrière le header */
.search-results{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(20,23,30,.98);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;font-family:var(--display);
  padding:7.5rem 3rem 3rem;
  max-height:92vh;overflow-y:auto;
  transform:translateY(-105%);
  transition:transform .55s var(--ease-out);
}
body.search-open .search-results{transform:translateY(0);}
.search-results__inner{max-width:1000px;margin:0 auto;}
.search-results__hint{
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
  color:rgba(255,255,255,.5);margin-bottom:2rem;
}
.search-result{
  display:block;padding:1.5rem 0;
  border-top:1px solid rgba(255,255,255,.14);
  transition:padding .3s var(--ease-out);
}
.search-result:hover{padding-left:.8rem;}
.search-result .sr-cat{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
  color:var(--teal-light);margin-bottom:.5rem;display:block;
}
.search-result h4{
  font-size:1.15rem;font-weight:400;color:#fff;line-height:1.4;margin-bottom:.4rem;
}
.search-result p{
  font-size:.85rem;font-weight:300;color:rgba(255,255,255,.55);
  line-height:1.6;max-width:80ch;
}
.search-results__empty{
  padding:1rem 0;color:rgba(255,255,255,.6);font-size:.95rem;
}

/* ---------- MENU PLEIN ECRAN ---------- */
.menu-overlay{
  position:fixed;inset:0;z-index:200;overflow:hidden;
  display:grid;grid-template-columns:38% 1fr;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.menu-overlay.open{
  opacity:1;visibility:visible;
  transition:opacity .45s ease;
}
.menu-visual{
  position:relative;overflow:hidden;
  /* Photo + voile pour la lisibilité du logo. Si l'image manque, le
     navigateur ignore cette couche et le dégradé de repli s'affiche. */
  background-image:
    linear-gradient(180deg, rgba(20,24,34,.5) 0%, rgba(20,24,34,.15) 40%, rgba(20,24,34,.55) 100%),
    url('../img/menu-tours.jpg'),
    linear-gradient(200deg, #8fa0b4 0%, #5c6678 55%, #3a4152 100%);
  background-size:cover, cover, cover;
  background-position:center, center, center;
  background-repeat:no-repeat;
  transform:translateX(-4%);
  transition:transform .6s var(--ease-out);
}
.menu-overlay.open .menu-visual{transform:none;}
.menu-visual-top{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;gap:3rem;
  padding:1.6rem 3rem 1.6rem calc(6rem + 44px);color:#fff;
  font-family:var(--display);
  background:linear-gradient(to bottom, rgba(20,24,34,.35), transparent);
}
.menu-panel{
  position:relative;
  /* min-width:0 : sans cela, un contenu long empêche la colonne de grille
     de rétrécir et fait déborder tout l'écran horizontalement. */
  min-width:0;
  background:var(--sand);color:var(--ink-soft);
  padding:2rem 4.5rem 3rem;
  display:flex;flex-direction:column;
  overflow-y:auto;
  font-family:var(--display);
}
.menu-top-mobile{
  display:none;align-items:center;gap:1.6rem;
  margin:0 0 1.6rem calc(44px + 1.4rem);color:var(--ink-soft);
}
.menu-top-mobile .logo{color:var(--ink-soft);font-size:1.6rem;}
.menu-search{
  display:flex;align-items:center;gap:2rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid rgba(43,49,64,.45);
}
.menu-search .q{
  flex:1;font-size:1.35rem;font-weight:300;color:var(--ink-mid);cursor:text;
}
.menu-search .q strong{font-weight:500;color:var(--ink-soft);}
.menu-search svg{width:20px;height:20px;flex-shrink:0;cursor:pointer;}
.menu-search .lang{color:var(--ink-soft);}
.menu-search .lang .tri-dn{border-bottom-color:var(--ink-soft);}
.menu-main{
  display:flex;flex-direction:column;gap:.4rem;
  margin:auto 0;padding:3rem 0 0;
}
.menu-main a{
  display:inline-block;align-self:flex-start;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem, 4.8vw, 4.4rem);line-height:1.18;
}
/* Les liens portent aussi .reveal (apparition en cascade) : il faut passer
   au-dessus de `.menu-overlay .reveal` pour animer le survol. */
.menu-overlay .menu-main a{
  transition:opacity .5s ease,
             transform .45s var(--ease-out),
             color .3s ease;
}
.menu-overlay.open .menu-main a:hover{
  transform:translateX(16px);color:var(--teal-deep);
}
.menu-sec{
  display:flex;flex-direction:column;gap:1.5rem;
  margin-top:3.5rem;
  font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
}
.menu-sec a{
  display:inline-block;align-self:flex-start;
  transition:transform .4s var(--ease-out), color .3s ease;
}
.menu-sec a:hover{transform:translateX(10px);color:var(--teal-deep);}
.menu-socials{
  display:flex;gap:.8rem;
  align-self:flex-end;margin-top:2.5rem;
}
.menu-socials a{
  width:44px;height:44px;
  border:1px solid #4a4f5c;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.menu-socials a:hover{background:rgba(32,36,46,.07);}
.menu-socials svg{width:18px;height:18px;}

/* Apparition en cascade des éléments du menu */
.menu-overlay .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .5s ease, transform .5s var(--ease-out);
}
.menu-overlay.open .reveal{opacity:1;transform:none;}
.menu-overlay.open .reveal:nth-child(1){transition-delay:.12s;}
.menu-overlay.open .reveal:nth-child(2){transition-delay:.2s;}
.menu-overlay.open .reveal:nth-child(3){transition-delay:.28s;}
.menu-overlay.open .reveal:nth-child(4){transition-delay:.36s;}
.menu-overlay.open .menu-sec.reveal,
.menu-overlay.open .menu-socials.reveal{transition-delay:.45s;}

/* ---------- FOOTER ---------- */
.footer{
  background:#fff;color:#20242e;
  padding:5rem 3rem 2.5rem;
  font-family:var(--display);
}
.footer-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:3rem;flex-wrap:wrap;margin-bottom:4rem;
}
.footer .logo{
  color:#20242e;font-size:1.7rem;letter-spacing:.14em;
  font-weight:600;text-transform:uppercase;
}
.footer-mid{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:3rem;flex-wrap:wrap;
  padding-bottom:3.5rem;border-bottom:1px solid rgba(32,36,46,.25);
}
.footer-nav{
  display:grid;grid-template-columns:repeat(2,minmax(220px,max-content));
  gap:1.5rem 8rem;
  font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
}
.footer-nav a{transition:opacity .2s;}
.footer-nav a:hover{opacity:.55;}
.footer .view-all{margin-top:0;color:#20242e;}
.footer-bottom{
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-top:2rem;font-size:.85rem;font-weight:300;color:#4a4f5c;
}
.footer-bottom nav{display:flex;gap:1.8rem;flex-wrap:wrap;}
.footer-bottom nav a:hover{text-decoration:underline;}
.footer-bottom .copy{color:#8a8f9b;}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .menu-overlay,.menu-overlay .reveal,.menu-visual{transition:none;transform:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .header{padding:1.1rem 1.4rem;}
  /* Le séparateur n'a plus rien à séparer une fois la nav masquée */
  .nav,.header-right .search-box,.header-right .lang,.sep{display:none;}
  .header-left{gap:1.4rem;margin-left:calc(44px + 1.2rem);}
  .logo{font-size:1.25rem;letter-spacing:.08em;}
  .burger{display:flex;top:1rem;left:1.4rem;}
  .burger.open .bar{background:var(--ink-soft);}
  .burger.open .lbl{color:var(--ink-soft);}

  .menu-overlay{grid-template-columns:1fr;}
  .menu-visual{display:none;}
  .menu-panel{padding:1.4rem 1.4rem 2.5rem;}
  .menu-top-mobile{display:flex;margin-left:calc(44px + 1.2rem);}
  .menu-top-mobile .logo{font-size:1.2rem;}
  /* Le libellé de recherche ne doit pas imposer sa largeur au panneau */
  .menu-search{gap:1rem;}
  .menu-search .q{
    font-size:1rem;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .menu-main{padding-top:2rem;gap:.6rem;}
  .menu-main a{font-size:2.2rem;}
  .menu-sec{margin-top:2.5rem;gap:1.2rem;font-size:.85rem;}
  .menu-socials{align-self:flex-start;}

  .footer{padding:3.5rem 1.4rem 2rem;}
  /* La grille à deux colonnes de 220px déborde d'un écran de téléphone */
  .footer-nav{grid-template-columns:1fr;gap:1.1rem;font-size:.85rem;}
  .footer .logo{font-size:1.25rem;}
  .footer-top{gap:2rem;margin-bottom:2.5rem;}
  .footer-mid{padding-bottom:2.5rem;gap:2rem;}
}