/* =====================================================================
   Linutop — Surcouche "chrome" (header / nav / footer)
   Repeint la structure EXISTANTE (DB-driven) aux couleurs de la refonte,
   SANS modifier le markup PHP ni la logique des menus.
   Chargé APRÈS /style.css (et après tokens.css) pour le surcharger.
   Cible uniquement les IDs du chrome + un swap de police + l'élargissement
   du conteneur : n'altère pas la logique du contenu.
   ===================================================================== */

/* --- Police globale : Arial -> Poppins (wordmark en Baloo 2) --------- */
body, td, h1, h2, h3, h4, p, a, li, input, select, textarea, button {
  font-family: var(--font-ui, "Poppins"), Arial, Helvetica, sans-serif;
}

/* --- Élargissement du conteneur (880px -> maquette v3, 1180px) ------- */
/* #logo (absolute left) et #logo_account (absolute right) suivent
   automatiquement puisqu'ils sont positionnés par rapport à ces conteneurs.
   #nav_tabs reste ancré à gauche, inchangé. Le @media (max-width:1000px)
   existant dans style.css continue de s'appliquer en dessous de ce seuil. */
#pagelinutop, #header, #footer_inner {
  width: min(var(--maxw, 1180px), calc(100vw - 32px));
  /* Centrage horizontal : porte par <center> sur les pages du CMS
     legacy (toujours en place cote index_top2.php), mais absent sur
     les pages redessinees (linutop_header.php n'utilise plus <center>,
     retire car il forcait aussi un text-align:center indesirable). */
  margin: 0 auto;
}

/* --- Header : barre blanche épurée ---------------------------------- */
#header {
  background: var(--c-white, #ffffff);
  border-bottom: 1px solid var(--c-line-2, #EDEDED);
  /* style.css (legacy) met overflow:hidden sur #header, ce qui rognait
     le menu deroulant .nav-dropdown (position:absolute, deborde sous
     le header) sur les pages redessinees. */
  overflow: visible;
}
/* Pages redessinees uniquement (classe posee par linutop_header.php) :
   le fond/la bordure du header doivent aller bord a bord, contrairement
   au #header du CMS legacy (largeur contrainte par la regle ci-dessus,
   son contenu etant positionne en absolu directement dans cette boite).
   .nav-wrap reprend la meme contrainte de largeur, mais centree. */
#header.header--full {
  width: 100%;
}
.nav-wrap {
  width: min(var(--maxw, 1180px), calc(100vw - 32px));
  margin: 0 auto;
}

/* --- Navigation : onglets en pilules -------------------------------- */
#nav_tabs li.tab {
  width: auto;
  height: auto;
  background: transparent;
}
#nav_tabs li.tab a,
#nav_tabs li.tab a:link,
#nav_tabs li.tab a:visited,
#nav_tabs li.tab a:hover {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink, #1B1B23);
  padding: 8px 16px;
  margin: 6px 3px;
  border-radius: 999px;
  border-bottom: none;
  background: transparent;
  -webkit-transition: background-color .15s;
  transition: background-color .15s;
}
#nav_tabs li.tab a:hover {
  background: var(--c-cream-2, #FFF7EF);
  border-bottom: none;
  text-decoration: none;
}
/* onglet actif : pilule crème (on retire l'ancienne image de fond) */
#nav_tabs li.tab.current {
  background-image: none;
  background: transparent;
}
#nav_tabs li.tab.current a,
#nav_tabs li.tab.current a:link,
#nav_tabs li.tab.current a:visited {
  background: var(--c-cream, #FCEBD9);
  color: var(--c-ink, #1B1B23);
}

/* --- Footer : fond crème + wordmark géant décoratif ----------------- */
#footer {
  background: var(--c-cream, #FCEBD9);
  color: var(--c-ink, #1B1B23);
  height: auto;
  border-top: none;
  padding: 36px 0 0;
  overflow: hidden;
}
#footer a,
#footer a:link,
#footer a:visited {
  color: var(--c-ink, #1B1B23);
}
#footer a:hover {
  color: var(--c-orange-700, #E8951A);
  text-decoration: none;
}
#footer hr { border-color: var(--c-line, #ECE3D6); }

/* --- Nouveau header (pages redessinees uniquement) -------------------
   Structure flexbox propre (logo / nav / icones), independante de la
   mise en page absolue #nav_tabs/#logo_account herite du CMS legacy
   (toujours utilisee par les pages non redessinees, cf. index_top2.php -
   regles ci-dessus conservees pour elles, ne pas les retirer). */
/* style.css (legacy) met #pagelinutop ET #footer_inner en
   display:inline-block, centres par le <center> du CMS legacy
   (text-align:center sur un ancetre). linutop_header.php/
   linutop_footer.php n'ont plus ce <center> (retire volontairement,
   cf. commentaire plus haut) : sans ancetre text-align:center, une
   boite inline-block s'aligne a gauche par defaut et margin:auto
   (regle ci-dessus) n'a aucun effet sur de l'inline-block. Passe en
   display:block uniquement sur les pages redessinees (identifiees par
   la classe "shop" posee par $linutop_body_class, cf. header.php) pour
   ne pas toucher les pages legacy qui dependent encore du <center>. */
body.shop #pagelinutop,
body.shop #footer_inner {
  display: block;
}
/* style.css (legacy) met aussi overflow:hidden sur #pagelinutop : ca
   decoupait tout element enfant essayant de "deborder" en pleine
   largeur de fenetre (ex. .product-hero, qui s'etend en 100vw) au
   bord de #pagelinutop (~1180px) au lieu du bord de la fenetre -
   laissant filtrer la marge de centrage de #pagelinutop de chaque
   cote. Meme scope que ci-dessus (pages redessinees uniquement). */
body.shop #pagelinutop {
  overflow: visible;
}

.nav-wrap {
  display: flex;
  align-items: center;
  padding: 14px 0;
  gap: 40px;
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo img { display: block; }
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex: 1;
}
.nav-item--dropdown { position: relative; }
.nav-link {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.nav-link:hover,
.nav-link.is-current { color: var(--c-orange-700); text-decoration: none; }
.nav-chevron { color: currentColor; transition: transform .15s; }
.nav-item--dropdown:hover .nav-chevron,
.nav-item--dropdown:focus-within .nav-chevron { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 200px;
  background: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  padding: 8px;
  display: none;
  flex-direction: column;
  z-index: 20;
}
.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown { display: flex; }
.nav-dropdown a {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--c-ink);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--c-cream); text-decoration: none; }
.nav-icons {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.nav-icons a { display: flex; }
@media (max-width: 760px) {
  .nav-links { display: none; }
}

/* le "linutop" géant en bas, comme sur la maquette */
#footer::after {
  content: "linutop";
  display: block;
  text-align: center;
  font-family: var(--font-logo, "Baloo 2"), "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(70px, 15vw, 180px);
  line-height: .8;
  letter-spacing: -2px;
  color: var(--c-orange-soft, #F8BE5C);
  margin-top: 16px;
  padding-bottom: 6px;
  -webkit-user-select: none;
  user-select: none;
}