/* =====================================================
   CONSEIL SNDGK — Nuance du bandeau d'en-tête

   Problème corrigé : premium-themes.css donne au bandeau la couleur exacte
   du fond de page — rgba(244,241,234,.7) sur une page #F4F1EA en thème clair.
   Seul un filet noir à 7 % les séparait : le bandeau ne se lisait pas comme
   une barre, il se confondait avec la page.

   Correction : --bg-2, le ton secondaire que la palette définit déjà. Il se
   détache du fond de page ET des sections blanches, dans les trois ambiances :
     clair     #ECE8DF  sur page #F4F1EA  et sections #FFFFFF
     sombre    #0E0F12  sur page #0A0A0B
     charcoal  #1B1B22  sur page #15151A

   Fichier AUTONOME : ne modifie ni premium.css ni premium-themes.css.

   SPÉCIFICITÉ — le point délicat. premium-themes.css cible
   `[data-theme="light"] .site-header`, soit (0,2,0). Un simple `.site-header`
   (0,1,0) perdrait malgré un chargement plus tardif : l'ordre ne départage
   que des règles de spécificité ÉGALE. D'où le doublon de sélecteurs
   ci-dessous — `[data-theme] .site-header` égale leur spécificité et gagne
   par l'ordre, tandis que `.site-header` seul couvre le thème sombre, qui
   ne porte aucun attribut. Aucun !important n'est nécessaire.
===================================================== */

.site-header,
.site-header.scrolled,
[data-theme] .site-header,
[data-theme] .site-header.scrolled {
  background: var(--bg-2);
  border-bottom-color: var(--line);
}

/* Le flou n'a plus d'objet sur un fond opaque : il coûtait un calcul de
   compositing à chaque défilement sans rien apporter à l'écran. */
.site-header,
[data-theme] .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* =====================================================
   Seuil du menu burger reculé de 900 à 1080 px

   premium.css bascule en menu burger sous 900 px. Or à 6 entrées, la barre
   ne redevient confortable qu'au-delà de ~1080 px :

     901 – 1010 px   marge 0     « Nos réalisations » et « À propos » sur 2 lignes
     1024 px         marge 7 px  le logo touche « Accueil », « Contact » touche « FR »
     1100 px         marge 42 px correct
     1280 px         marge 124 px

   1024 px est la largeur d'un iPad en paysage : ce n'est pas un cas marginal.

   Les règles ci-dessous ne couvrent QUE la bande 901–1080 px, celle que
   premium.css laisse à découvert. En dessous de 901 px, ses propres règles
   continuent de s'appliquer, inchangées — on n'écrase rien qui fonctionne.
   Les valeurs sont recopiées à l'identique de premium.css et
   premium-themes.css pour qu'aucune rupture visuelle n'apparaisse au seuil.
===================================================== */

@media (min-width: 901px) and (max-width: 1080px) {
  .burger { display: flex; }

  .main-nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(80vw, 340px); height: 100vh;
    background: rgba(8, 8, 10, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 0.5rem;
    padding: 2rem 2.4rem; font-size: 1.5rem;
    transform: translateX(100%); transition: transform 0.45s var(--ease);
    z-index: 155;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a { font-family: 'Space Grotesk', sans-serif; padding: 0.6rem 0; }

  /* Le panneau suit l'ambiance, comme sous 900 px. */
  [data-theme="light"] .main-nav { background: rgba(248, 245, 238, 0.98); }

  .nav-tools .nav-cta { display: none; }
}