/* Menu (nav) partagé — mêmes tailles/couleurs que les fiches produit. Une seule source pour tout le site. */

/* Marge latérale commune à tout le site : 300px (comme avant) tant que l'écran est assez large ; elle se resserre
   (24px mini) sur les écrans plus étroits, le contenu gardant sa largeur et les grilles se réorganisant.
   Au-delà de 2560px, TOUT le site est plafonné et centré (body), comme le héro — plus de blocs pleine largeur. */
:root { --edg-gutter: max(24px, min(300px, calc((min(100vw, 2560px) - 1320px) / 2))); }
body { max-width: 2560px; margin-left: auto; margin-right: auto; }

/* ESSAI LOCAL UNIQUEMENT — licence Nort à confirmer avant toute mise en ligne */
@font-face { font-family: 'Nort Test'; src: url('/fonts/nort-test/fonnts.com-Nort_Bold_Italic.otf') format('opentype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Nort Test'; src: url('/fonts/nort-test/fonnts.com-Nort_Italic.otf') format('opentype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Nort Test'; src: url('/fonts/nort-test/fonnts.com-Nort_Bold.otf') format('opentype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Nort Test'; src: url('/fonts/nort-test/fonnts.com-Nort.otf') format('opentype'); font-weight: 400; font-style: normal; }
.nav-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; }
.nav-logo img { transition: filter .35s ease; }
.nav-logo-center { position: absolute; left: 50%; top: calc(50% + 10px); transform: translate(-50%, -50%); transition: opacity .35s ease, visibility .35s ease; }
/* Page à fond clair dès le haut (option data-nav-light sur #site-nav) : icône, libellé et logo en noir, logo toujours visible en haut de page */
.nav.nav-light { color: #1d1d1f !important; }
.nav.nav-light #mobile-menu-btn .icon-menu, .nav.nav-light #mobile-menu-btn .icon-close { stroke: #1d1d1f; }
.nav.nav-light .mobile-menu-label { color: #1d1d1f; }
.nav.nav-light .nav-logo-center img { filter: none !important; }
.nav.nav-scrolled #mobile-menu-btn .icon-menu { stroke: #1d1d1f; }
.nav.nav-scrolled #mobile-menu-btn .icon-close { stroke: #1d1d1f; }
.nav.nav-scrolled .mobile-menu-label { color: #1d1d1f; }
.nav.nav-scrolled .nav-logo-center,
.nav.nav-any-scroll .nav-logo-center { opacity: 0 !important; visibility: hidden; transition: none; }
/* Le menu (logo + bouton) disparaît dès qu'on commence à scroller, et revient en haut de page */
.nav-inner { transition: opacity .3s ease, visibility .3s ease; }
.nav.nav-any-scroll .nav-inner { opacity: 0; visibility: hidden; pointer-events: none; }
#mobile-menu-btn { display: flex; align-items: center; justify-content: center; gap: .6rem; background: none; border: none; cursor: pointer; width: auto; height: 40px; padding: 0; position: relative; top: 10px; z-index: 201; color: #fff; transition: color .35s ease; }
#mobile-menu-btn .icon-close { display: none; }
#mobile-menu-btn.open .icon-menu { display: none; }
#mobile-menu-btn.open .icon-close { display: block; }
#mobile-menu-btn.open { opacity: 0; visibility: hidden; pointer-events: none; }
.mobile-menu-label { color: inherit; font-size: .9rem; font-weight: 400; }

.nav-center { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: row; align-items: stretch; max-height: 0; overflow: hidden; z-index: 200; }
.nav-center.open { max-height: 100vh; overflow: hidden; }
.menu-pane-left { width: 620px; flex-shrink: 0; position: relative; background: #fff; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior-y: contain; }
#menu-close-mobile { display: flex; position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: none; cursor: pointer; color: #1d1d1f; }
.menu-gray-back-mobile { display: none; align-items: center; gap: .4rem; background: none; border: none; cursor: pointer; font-size: .9rem; font-weight: 600; color: #1d1d1f; padding: 1.25rem 1.25rem 0; }
.menu-pane-logo { display: flex; justify-content: center; padding: 2.5rem 0 1rem; }
.menu-pane-logo img { height: 45px; width: auto; filter: brightness(0); }
.menu-pane-gray { width: 620px; flex-shrink: 0; position: relative; background: #f1f1f4; overflow: hidden; }
.menu-pane-right { flex: 1; flex-shrink: 0; position: relative; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); background: rgba(0,0,0,.25); }
#menu-close-right { position: absolute; top: 2rem; left: 2rem; z-index: 1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: none; cursor: pointer; }
.menu-list-simple { list-style: none; margin: 0; padding: 44px 70px 2.5rem 70px; display: flex; flex: 1; flex-direction: column; justify-content: flex-start; gap: .25rem; }
.menu-section-title { font-size: 1.25rem; font-weight: 600; color: #1d1d1f; padding: .5rem 1rem; margin-top: .25rem; }
.menu-section-title-blue { color: #178bff; }
.menu-section-title-spaced { margin-top: 1.5rem; }
.menu-simple-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .7rem 1rem; font-size: 1.1rem; font-weight: 300; color: #1d1d1f; text-decoration: none; border-radius: 8px; transition: background .2s; white-space: nowrap; }
.menu-simple-item::after { content: ''; width: 7px; height: 7px; flex-shrink: 0; margin-left: .75rem; border-right: 2px solid #1d1d1f; border-bottom: 2px solid #1d1d1f; transform: rotate(-45deg); }
.menu-simple-item-noarrow::after { display: none; }
.menu-simple-item:hover, .menu-simple-item.active { background-color: #f1f1f4; }
.menu-simple-item.active:hover { background-color: #dcdce0; }
.menu-top-link { margin-top: .25rem; }
.menu-top-link a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .7rem 1rem; font-size: 1.1rem; font-weight: 700; color: #1d1d1f; text-decoration: none; border-radius: 8px; transition: background .2s; white-space: nowrap; }
.menu-top-link a:hover { background-color: #f1f1f4; }
.menu-top-link a::after { content: ''; width: 7px; height: 7px; flex-shrink: 0; margin-left: .75rem; border-right: 2px solid #1d1d1f; border-bottom: 2px solid #1d1d1f; transform: rotate(-45deg); }

.menu-photo-group { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 360px; height: 216px; box-sizing: border-box; padding: 1.75rem; background: transparent; border-radius: 20px; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .3s ease, background .2s ease, box-shadow .2s ease; }
.menu-photo-group img { max-width: 100%; max-height: 100%; object-fit: contain; }
.menu-photo-group.active { opacity: 1; }
.menu-pane-gray:hover .menu-photo-group.active { background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.15); }
.menu-photo-list { position: absolute; inset: 0; box-sizing: border-box; padding: 144px 2rem 2rem; overflow-y: auto; display: none; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1rem; opacity: 0; transition: opacity .3s ease; }
.menu-photo-list.active { display: flex; opacity: 1; }
.menu-product-list-view { display: flex; flex-direction: column; gap: 1rem; }
.menu-product-card { display: flex; align-items: center; gap: 1.25rem; padding: .75rem; border-radius: 16px; transition: background .2s ease, box-shadow .2s ease; text-decoration: none; cursor: pointer; }
.menu-product-card:hover { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.menu-product-card img { width: 105.19px; height: 105.19px; object-fit: contain; flex-shrink: 0; }
.menu-product-card img[src*="legrand-greenup"] { transform: scale(1.2); }
.menu-product-info { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.menu-product-title { font-size: 1.265rem; font-weight: 700; color: #1d1d1f; }
.menu-product-group-title { font-size: 1.3rem; font-weight: 700; color: #1d1d1f; text-align: center; width: 100%; letter-spacing: .05em; padding: 0 .75rem; }
.menu-product-group-title-spaced { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #d2d2d7; width: 100%; text-align: center; }
.menu-product-badge { background: #fff; color: #1d1d1f; padding: .3rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* Menu simplifié (pour l'instant) : on masque les colonnes photo/preview, on garde tout le HTML/JS pour pouvoir les réactiver facilement plus tard. */
@media (min-width: 901px) {
  .menu-pane-gray, .menu-pane-right { display: none; }
}

@media (max-width: 900px) {
  .nav { padding: 0 1.25rem !important; height: 70px !important; }
  .nav-logo-center img { height: 33.264px !important; }
  .menu-pane-logo img { height: 33.264px !important; margin-top: 10px; }
  .mobile-menu-label { display: none; }
  .nav-center { top: 0; flex-direction: column; background: #fff; }
  .menu-pane-left { width: 100%; height: 100%; }
  .menu-pane-gray { width: 100%; min-height: 340px; }
  .menu-pane-right { display: none; }
  #menu-close-mobile { display: flex; }
  .menu-list-simple { padding: 2.25rem 1.25rem .6rem; gap: 0; }
  .menu-pane-logo { height: 70px; padding: 0; align-items: center; }
  .menu-simple-item { padding: .4rem 1rem !important; font-size: 1.12rem !important; }
  .menu-top-link a { padding: .4rem 1rem !important; font-size: 1.12rem !important; }
  .menu-section-title { font-size: 1.14rem !important; padding: .3rem 1rem !important; margin-top: .1rem !important; }
  .menu-section-title-spaced { margin-top: .75rem !important; }
  .menu-photo-list { position: static; padding: 1.5rem 1.25rem 2rem; }
  .nav-center:not(.mobile-photos) .menu-pane-gray { display: none; }
  .nav-center.mobile-photos .menu-pane-left { display: none; }
  .menu-gray-back-mobile { display: flex !important; }
}

/* Bandeau fondu sous le menu (pages sans photo en héro) — une seule source pour tout le site.
   Dégradé gris resserré sur le haut + voile gris foncé qui s'estompe jusqu'en bas.
   La couleur de fin s'adapte à la section suivante via --site-hero-end (défaut #f1f1f4). */
.site-hero-wrap { position: relative; width: 100%; max-width: 2560px; left: 50%; transform: translateX(-50%); height: 150px; overflow: hidden; z-index: 0; background: linear-gradient(180deg, #7a7a7f 0px, #818186 15px, #8f8f94 30px, #a3a3a8 48px, #bbbbbf 68px, #d3d3d7 88px, #e6e6e9 108px, var(--site-hero-end, #f1f1f4) 137px, var(--site-hero-end, #f1f1f4) 100%); }
.site-hero-smoke { position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(32,32,36,.38) 0%, rgba(32,32,36,.345) 10%, rgba(32,32,36,.305) 20%, rgba(32,32,36,.255) 30%, rgba(32,32,36,.2) 40%, rgba(32,32,36,.145) 50%, rgba(32,32,36,.097) 60%, rgba(32,32,36,.055) 70%, rgba(32,32,36,.028) 80%, rgba(32,32,36,.01) 90%, rgba(32,32,36,0) 100%); }

/* Garde-fou mobile : la page ne peut jamais être plus large que l'écran (pas de glissement gauche/droite).
   html → viewport en overflow-x:hidden ; body en clip (ne crée pas de conteneur de scroll : le sticky continue de marcher). */
@media (max-width: 900px) {
  html { overflow-x: hidden; }
  body { overflow-x: clip; }
  /* Zoom bloqué : l'iPhone ignore user-scalable=no, on limite donc les gestes au défilement (pas de pincement ni double-tap zoom) */
  html { touch-action: pan-x pan-y; }
  /* iPhone zoome tout seul sur un champ si son texte fait moins de 16px : tous les champs à 16px sur mobile */
  input, select, textarea { font-size: 16px !important; }
}