/* En-tête du site sur les pages autres que l'accueil (HTML : services/enteteSite.js, comportement :
   public/js/entete.js). COPIE FIDÈLE de l'en-tête de l'accueil (benjamin-photo-v4.html, nav.main-nav) :
   mêmes règles, même ordre. Une règle changée là-bas doit l'être ici aussi, sinon
   tests/entete-site.test.js échoue (test anti-écart).
   À charger APRÈS les styles de la page : à égalité, l'en-tête garde son aspect. */

/* Autonome, quelle que soit la page : remise à zéro (l'accueil la fait pour toute la page) et les
   couleurs, la police et le lissage de l'accueil, déclarés par l'en-tête lui-même. */
.main-nav,.main-nav *,.mobile-menu,.mobile-menu *{box-sizing:border-box;margin:0;padding:0}
.main-nav,.mobile-menu{--line:#D1C6B6;--ink:#2C2218;--ink2:#4A3D30;--ink3:#6F6050;--accent:#C47832;--accent2:#B86A20;font-family:'DM Sans',sans-serif;font-weight:300;line-height:normal;-webkit-font-smoothing:auto}

.main-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(240,234,224,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 48px;height:60px;display:flex;align-items:center;justify-content:space-between;transition:background .3s}
.nav-logo{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.nav-logo img{height:36px;width:auto}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink2);font-weight:400;transition:color .3s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-controls{display:flex;gap:4px;align-items:center}
.nav-espace{display:inline-flex;align-items:center;gap:5px;background:transparent;color:var(--accent);
  border:1.5px solid var(--accent);text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 12px;border-radius:99px;margin-right:6px;white-space:nowrap;transition:background .2s,color .2s}
.nav-espace:hover{background:var(--accent);color:#fff}
.nav-espace.on{background:var(--accent);color:#fff}
.nav-espace.on:hover{background:var(--accent2,#B8681F);border-color:var(--accent2,#B8681F)}
@media(max-width:960px){.nav-espace{display:none!important}}
.mm-espace{display:flex;align-items:center;gap:8px;color:var(--accent)!important;font-weight:600}
.nav-insta{display:flex;align-items:center;justify-content:center;color:var(--ink2);padding:6px;margin-right:4px;transition:color .3s,transform .3s;border-radius:6px}
.nav-insta:hover{color:var(--accent);transform:scale(1.1)}
.nav-insta svg{display:block}
.lang-btn{background:none;border:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:400;padding:4px 8px;transition:color .3s;border-bottom:1px solid transparent}
.lang-btn.active{color:var(--ink);border-bottom-color:var(--ink)}
/* Ici FR/EN sont des liens (la page se recharge dans l'autre langue) : sans soulignement de lien. */
a.lang-btn{text-decoration:none}
/* Page en cours : soulignée comme la langue active ; les autres liens ne changent pas. */
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px}
.mobile-menu a[aria-current="page"]:not(.mm-espace){border-bottom:1px solid var(--ink);padding-bottom:4px}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:12px;margin-right:-8px;position:relative;width:44px;height:44px;flex-shrink:0}
.nav-burger span{display:block;width:20px;height:1.5px;background:var(--ink);position:absolute;left:12px;transition:all .3s cubic-bezier(.4,0,.2,1)}
.nav-burger span:nth-child(1){top:15px}
.nav-burger span:nth-child(2){top:21px}
.nav-burger span:nth-child(3){top:27px}
.nav-burger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){top:21px;transform:rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:rgba(240,234,224,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{font-family:'Syne',sans-serif;font-size:24px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--ink);transition:color .3s;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s,color .3s}
.mobile-menu.open a{opacity:1;transform:translateY(0)}
.mobile-menu.open a:nth-child(1){transition-delay:.05s}
.mobile-menu.open a:nth-child(2){transition-delay:.1s}
.mobile-menu.open a:nth-child(3){transition-delay:.15s}
.mobile-menu.open a:nth-child(4){transition-delay:.2s}
.mobile-menu.open a:nth-child(5){transition-delay:.25s}
.mobile-menu a:hover{color:var(--accent)}
@media(max-height:700px){.mobile-menu{gap:18px}}
.lang-btn:focus-visible,.nav-links a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
/* L'en-tête est fixe (60 px) : la place qu'il occupe, réservée en haut de la page. */
.entete-place{display:block;height:60px;flex-shrink:0}

/* Entre 961 et 1180 px : marges et espacements resserrés pour que les 7 liens tiennent sur une ligne. */
@media(min-width:961px) and (max-width:1180px){.main-nav{padding:0 24px}.nav-links{gap:12px}.nav-links a{font-size:11px;letter-spacing:.06em}}
@media(min-width:1181px) and (max-width:1340px){.nav-links{gap:24px}}
/* 960 px et moins : le burger et le menu plein écran remplacent les liens. */
@media(max-width:960px){
  .main-nav{padding:0 24px}
  .nav-links{display:none}
  .nav-burger{display:flex;align-items:center;justify-content:center}
  .mobile-menu{display:flex}
}
/* Cibles tactiles de 44 px. */
@media(max-width:767px){
  .lang-btn{padding:8px 10px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:480px){
  .main-nav{height:56px;padding:0 16px}
  .mobile-menu{top:56px}
  .entete-place{height:56px}
}
/* iOS : la barre du bas ne cache pas Instagram. */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .mobile-menu{padding-bottom:env(safe-area-inset-bottom)}
}
/* L'en-tête est fixe : une ancre (#devis, #art-5...) ou un élément amené à l'écran (scrollIntoView,
   focus au clavier) s'arrête sous lui, pas dessous. */
html{scroll-padding-top:76px}
/* Impression (CGV, mentions légales...) : pas d'en-tête répété sur chaque feuille. En dernier : il
   l'emporte sur l'affichage du menu téléphone (feuille étroite). */
@media print{.main-nav,.mobile-menu,.entete-place{display:none}}