/* Jetons de barre, alignés sur design-system.css.
   Les valeurs précédentes (#222, #030202, rgb(111,52,52), #7e7373) étaient
   hors palette et écrasaient la charte, d'où les gris sales du menu. */
:root {
  --bg-navbar-default: color-mix(in srgb, var(--ink-900) 84%, transparent);
  --bg-navbar-dark:    color-mix(in srgb, var(--brand-800) 88%, transparent);
  --bg-navbar-light:   color-mix(in srgb, var(--ink-0) 82%, transparent);
  --bg-navbar-admin:   color-mix(in srgb, var(--brand-900) 90%, transparent);
  --bg-header-default: var(--bg-navbar-default);
  --bg-navbar-hover:   color-mix(in srgb, var(--ink-0) 14%, transparent);

  --text-navbar-light: var(--ink-900);
  --text-navbar-dark:  var(--ink-0);
  --dropdown:          var(--brand-800);
}



.logo {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #a19b9b;
  border: 2px solid #7F1734;
    transition: transform 0.25s ease;
  

}
 .logo img {
  width: 130%;
  height: 120%;
  object-fit: cover;
 }

 
.logo:hover {
  transform: scale(1.05);
}
/* navbar standard */
.navbar-default {
  background: var(--bg-header-default);
    --text-navbar: #e3d3d3;
  }
/* navbar standard */
.navbar-admin {
  background: var(--bg-navbar-admin);
    --text-navbar: #bdb4b4;

}

 
.nav-inner {
    flex-direction: row-reverse;

  height: 50px;
  display: flex;
  align-items: center;
     gap: 0.2rem; /* espace entre logo et menu */
}




.navbar-admin .nav-menu a {
  color: whitesmoke;
  padding: 2px 4px;
   font-weight: 500;
  text-decoration: none;
  border-radius: 8px; /* coins arrondis */
  transition: background 0.3s ease;
}
 
.navbar-admin  .nav-menu .dropdown-content {
  background: var(--bg-navbar-admin) !important;
  border-radius: 8px;
 }

.navbar-admin .hamburger span {
  background: #222 !important;
}
/* ==========================
   Navbar
========================== */

.d-none {
  display: none !important;
}
 
 
.navbar-default {
  background: var(--bg-navbar-default);
  --text-navbar: #ffffff;

  

}/* ==========================
   Navbar light pages – hover arrondi
========================== */
.navbar-light {

   color: #fff;
  border-radius: 12px;       /* coins arrondis */
  margin: 6px;    /* laisse l’espace autour pour voir l’arrondi */
}
.navbar-light .nav-menu {
  background: var(--bg-navbar-light) !important;
  border-radius: 12px;
  color: var(--text-navbar-light);
}

.navbar-light .nav-menu a {
  color: #222 !important;
  border-radius: 8px;                 /* coins arrondis pour hover */
  transition: background 0.3s ease, color 0.3s ease;
}

/* Hover avec fond arrondi */
.navbar-light .nav-menu a:hover {
  background: rgba(0,0,0,0.05);       /* léger fond gris sur hover */
}

/* Trait actif remplacé par hover arrondi */
.navbar-light .nav-menu a.active {
  background: rgba(0,0,0,0.1);
}

/* Dropdown light */
.navbar-light .nav-menu .dropdown-content {
  background: #ffffff !important;
  border-radius: 8px;
 }

.navbar-light .hamburger span {
  background: #222 !important;
}

/* ==========================
   Navbar dark avec coins arrondis
========================== */
.navbar-dark-rounded {
   color: #fff;
  border-radius: 12px;       /* coins arrondis */
  margin: 6px;    /* laisse l’espace autour pour voir l’arrondi */
 }

/* Menu mobile dark arrondi */
.navbar-dark-rounded .nav-menu {
  background: var(--bg-navbar-dark) !important;
  border-radius: 12px;
  color: #fff;
}

.navbar-dark-rounded .nav-menu a {
  color: #fff;
  border-radius: 8px;
  transition: background 0.3s ease, color 0.3s ease;
}
/* Liens hover */
.navbar-dark-rounded .nav-menu a:hover {
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  transition: background 0.3s ease;
}

/* Dropdown */
.navbar-dark-rounded .nav-menu .dropdown-content {
  background: var(--dropdown) !important;
  border-radius: 8px;
 }

/* Hamburger */
.navbar-dark-rounded .hamburger span {
  background: #fff !important;
}
 

.nav-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cart-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #e74c3c;
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Hamburger */
.hamburger {
  width: 28px;
  height: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  transition: all .3s ease;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.badge {
  background: #1e90ff;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  margin-left: 6px;
}
/* Menu mobile */
.nav-menu {
    max-width: auto;

  position: absolute;
  top: 64px;
  left: 0;
  width: 80%;
  display: none;
  flex-direction: column;
  padding: 0.6rem 0;
  list-style: none;
  z-index: 998;
    margin-left: 0.6rem;

}

.nav-menu.show { display: flex; }

.nav-menu a {
   font-weight: 500;
  text-decoration: none;
  border-radius: 8px; /* coins arrondis */
  transition: background 0.3s ease;
}

/* Hover effect */
.nav-menu a:hover {
  background: var(--hover-bg);
}

/* Dropdown */
.nav-menu .dropdown {
  position: relative;
}

 
.nav-menu .dropdown .dropdown-content {
  position: absolute;
  top: 100%;           /* juste en dessous de l'onglet */
  left: 0;             /* aligné au bord gauche du parent */
  display: none;
  flex-direction: column;
  background: inherit;
  border-radius: 8px;
   padding: 0.5rem 0;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 999;
  overflow: hidden;   /* empêche le contenu de dépasser */
}

/* Ouverture au clic.
   initNavbar() pose la classe .show sur le <li>, mais la règle correspondante
   ne vivait que dans style.css, feuille jamais chargée : display:none
   l'emportait et le menu ne s'ouvrait qu'au survol — donc jamais au doigt sur
   mobile, où la règle :hover est en plus enfermée dans un media query. */
.nav-menu .dropdown.show .dropdown-content {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  left: 0;
  right: auto;
}

/* Alignement et padding des liens */
.nav-menu .dropdown .dropdown-content a {
  white-space: nowrap; /* texte sur une seule ligne */
  padding: 0.5rem 1rem; /* padding uniforme */
  margin: 0;
  display: block;
  width: 100%;         /* s'étend sur toute la largeur du dropdown */
  box-sizing: border-box;
}


.site-footer.navbar-light {
  background: var(--bg-navbar-light);
  color: var(--text-navbar-light);
}

.site-footer.navbar-dark-rounded {
  background: var(--bg-navbar-dark);
  color: white;
}

.site-footer.navbar-default {
  background: var(--bg-navbar-default);
  color: white;
}

.site-footer.navbar-admin {
  background: var(--bg-navbar-admin);
  color: white;
}
/* Hover desktop */
@media(min-width: 1101px) {
  .nav-menu {
    position: static;
    display: flex !important;
    flex-direction: row;
    gap: 1rem;
    background: inherit;
     padding:  0 10px;
    margin: 0;
    justify-content: space-between;
    
  }

.nav-menu .dropdown:hover .dropdown-content {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    right: auto;      /* empêche le positionnement bizarre */
    left: 0;          /* bien aligné avec l'onglet */
  }

  /* Hamburger desktop masqué */
  #hamburger {
    display: none !important;
  }
}

@media(max-width: 1100px) {
  #hamburger {
    display: flex; /* hamburger visible */
  }
  .nav-menu {
    flex-direction: column;
    display: none; /* toggle via JS */
    padding:  0;
  margin: 0; }
}

/* ==========================================================================
   BARRE UNIFIÉE — navbar et pied de page
   --------------------------------------------------------------------------
   Ces règles closent le fichier et font donc autorité sur les variantes
   déclarées plus haut, qui divergeaient : .navbar-default était définie deux
   fois avec deux fonds différents, .navbar-dark-rounded n'avait aucun fond
   (seul le .nav-menu en portait un), et le pied de page avait ses propres
   règles. Les deux barres consomment désormais le même couple de jetons.
   ========================================================================== */

.navbar-default,        .site-footer.navbar-default        { --bar-bg: var(--bg-navbar-default); --bar-fg: var(--ink-0); }
.navbar-dark-rounded,   .site-footer.navbar-dark-rounded   { --bar-bg: var(--bg-navbar-dark);    --bar-fg: var(--ink-0); }
.navbar-light,          .site-footer.navbar-light          { --bar-bg: var(--bg-navbar-light);   --bar-fg: var(--text-navbar-light); }
.navbar-admin,          .site-footer.navbar-admin          { --bar-bg: var(--bg-navbar-admin);   --bar-fg: var(--ink-0); }

.navbar,
.site-footer {
  background: var(--bar-bg, var(--bg-navbar-default));
  color: var(--bar-fg, var(--ink-0));

  width: calc(100% - 2 * var(--space-2));
  max-width: var(--max-width);
  margin-inline: auto;
  margin-block: var(--space-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);

  /* Le flou d'arrière-plan rend le texte lisible même par-dessus une photo. */
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);

  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

/* La barre reste accessible sur les pages longues (catalogue, panier). */
.navbar {
  position: sticky;
  top: var(--space-2);
  z-index: var(--z-navbar);
}

/* Contenu centré sur la même colonne que le reste du site. */
.navbar .nav-inner {
  flex-direction: row;
  justify-content: space-between;
  gap: var(--space-4);
  height: auto;
  min-height: 60px;
  width: 100%;
  padding-inline: var(--space-4);
}

.site-footer {
  font-size: var(--text-xs);
  opacity: 1;
  padding-block: var(--space-4);
}

.site-footer .footer-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* --- Liens : même traitement dans les deux barres ------------------------- */
.navbar .nav-menu a {
  color: var(--bar-fg);
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.navbar .nav-menu a:hover,
.navbar .nav-menu a:focus-visible {
  background: var(--bg-navbar-hover);
  color: var(--bar-fg);
}

.navbar-light .nav-menu a:hover { background: color-mix(in srgb, var(--ink-900) 8%, transparent); }

/* Le menu déroulant hérite du fond de la barre plutôt que d'un brun isolé. */
.navbar .nav-menu .dropdown-content {
  background: var(--bar-bg);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  min-width: 10rem;
}

@media (min-width: 1101px) {
  .navbar .nav-menu {
    justify-content: flex-end;
    gap: var(--space-1);
    padding: 0;
  }
}

@media (max-width: 1100px) {
  .navbar .nav-menu {
    background: var(--bar-bg);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    width: calc(100% - var(--space-4));
    left: var(--space-2);
    margin-left: 0;
    top: 68px;
    padding: var(--space-2);
  }
  .navbar .nav-inner { min-height: 56px; }
}

/* ==========================================================================
   NAVBAR — mise en forme professionnelle
   --------------------------------------------------------------------------
   Trois zones : marque à gauche, navigation au centre, actions à droite.
   Les seize liens d'origine tenaient sur une seule ligne sans hiérarchie ;
   l'administration est regroupée en un onglet, le panier et le téléphone
   sortent du menu pour rester atteignables en permanence.
   ========================================================================== */

.navbar .nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 68px;
}

/* --- Marque --------------------------------------------------------------- */
.navbar .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  color: var(--bar-fg);
  text-decoration: none;
}

.navbar .brand .logo {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bar-fg) 22%, transparent);
  transition: transform var(--duration-base) var(--ease-out);
}

.navbar .brand:hover .logo { transform: scale(1.06); }


/* --- Navigation ----------------------------------------------------------- */
.navbar .nav-menu {
  flex: 1;
  justify-content: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar .nav-menu a {
  position: relative;
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  color: color-mix(in srgb, var(--bar-fg) 82%, transparent);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.navbar .nav-menu a:hover { color: var(--bar-fg); background: var(--bg-navbar-hover); }

/* Onglet de la page courante : fond léger + repère coloré */
.navbar .nav-menu a.active {
  color: var(--bar-fg);
  background: var(--bg-navbar-hover);
  font-weight: 600;
}

.navbar .nav-menu a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 16px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--metal-300);
  transform: translateX(-50%);
}

/* Chevron des menus déroulants */
.navbar .nav-menu .dropbtn { padding-right: 1.6rem; }
.navbar .nav-menu .dropbtn::before {
  content: "";
  position: absolute;
  right: 0.7rem;
  top: 50%;
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out);
}
.navbar .nav-menu .dropdown.show .dropbtn::before { transform: translateY(-30%) rotate(-135deg); }

.navbar .nav-menu .dropdown-content { padding: var(--space-2); gap: 2px; }
.navbar .nav-menu .dropdown-content a { padding: 0.5rem 0.8rem; border-radius: var(--radius-sm); }

/* --- Actions permanentes -------------------------------------------------- */
.navbar .nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: auto;
}

.navbar .nav-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--bar-fg);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.navbar .nav-cart:hover,
.navbar .nav-cart.active { background: var(--bg-navbar-hover); }
.navbar .nav-cart svg { width: 21px; height: 21px; }

.navbar .nav-cart .badge {
  position: absolute;
  top: 1px; right: 0;
  min-width: 18px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
  color: var(--ink-0);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Bouton d'appel : action principale d'un site de dépannage */
.navbar .nav-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--brand-600);
  color: var(--ink-0);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.navbar .nav-phone:hover {
  background: var(--brand-500);
  color: var(--ink-0);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.navbar .nav-phone svg { width: 16px; height: 16px; }

/* --- Hamburger ------------------------------------------------------------ */
.navbar .hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}
.navbar .hamburger span {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--bar-fg);
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
.navbar .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar .hamburger.active span:nth-child(2) { opacity: 0; }
.navbar .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Adaptation ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .navbar .nav-menu a { padding-inline: 0.6rem; }
}

@media (max-width: 900px) {
  .navbar .nav-phone span { display: none; }
  .navbar .nav-phone { padding: 0.6rem; border-radius: 50%; }
  .navbar .nav-phone svg { width: 18px; height: 18px; }
}

@media (max-width: 1100px) {
  .navbar .hamburger { display: flex; }

  .navbar .nav-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    width: auto;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: var(--space-3);
  }
  .navbar .nav-menu a { padding: 0.7rem 0.9rem; border-radius: var(--radius-md); }
  .navbar .nav-menu a.active::after { display: none; }

  /* Sous-menu déplié en place plutôt qu'en flottant */
  .navbar .nav-menu .dropdown-content {
    position: static;
    box-shadow: none;
    background: color-mix(in srgb, var(--ink-0) 8%, transparent);
    margin-top: 2px;
  }
}

/* L'ouverture se fait au clic, jamais au survol.
   initNavbar() pose max-height:0 en ligne sur chaque .dropdown-content et ne
   le lève qu'au clic. La règle :hover héritée passait donc display:flex sur
   une boîte de hauteur nulle : un menu ouvert mais vide. Un seul mode
   d'interaction vaut aussi mieux sur écran tactile, où :hover n'existe pas. */
.navbar .nav-menu .dropdown:hover .dropdown-content { display: none; }
.navbar .nav-menu .dropdown.show  .dropdown-content { display: flex; }

/* ==========================================================================
   PIED DE PAGE
   --------------------------------------------------------------------------
   Il partage le traitement de barre flottante et les jetons --bar-bg /
   --bar-fg de la navbar, mais s'organise en quatre colonnes. L'ancienne
   version alignait tout sur une ligne en 0.7rem, avec des tirets de
   séparation restés collés aux valeurs (« 00067-- », « Lormont- ») et un
   téléphone non cliquable.
   ========================================================================== */

.site-footer {
  margin-top: var(--space-7);
  padding-block: var(--space-6) var(--space-4);
  font-size: var(--text-sm);
  text-align: left;
}

.site-footer .footer-inner {
  display: block;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.site-footer .footer-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  grid-template-columns: 1.8fr 1fr 1.3fr;
  padding-bottom: var(--space-5);
}

/* --- Colonne marque -------------------------------------------------------- */
.site-footer .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--bar-fg);
  font-family: var(--font-display);
  font-size: var(--text-base);
  text-decoration: none;
  line-height: 1.15;
}
.site-footer .footer-logo img { border-radius: 50%; object-fit: cover; }

.site-footer .footer-brand p {
  margin: 0 0 var(--space-4);
  max-width: 34ch;
  color: color-mix(in srgb, var(--bar-fg) 72%, transparent);
  font-size: var(--text-sm);
}

.site-footer .footer-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--brand-600);
  color: var(--ink-0);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.site-footer .footer-cta:hover {
  background: var(--brand-500);
  color: var(--ink-0);
  transform: translateY(-1px);
}

/* --- Colonnes de liens ----------------------------------------------------- */
.site-footer .footer-col h3 {
  margin: 0 0 var(--space-3);
  color: var(--bar-fg);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.site-footer .footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer a,
.site-footer address a {
  color: color-mix(in srgb, var(--bar-fg) 78%, transparent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.site-footer .footer-col a:hover,
.site-footer address a:hover { color: var(--bar-fg); text-decoration: underline; }

.site-footer address {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-style: normal;
  line-height: var(--leading-snug);
}

.site-footer .footer-devis {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid color-mix(in srgb, var(--bar-fg) 34%, transparent);
  border-radius: var(--radius-pill);
  color: var(--bar-fg);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.site-footer .footer-devis:hover {
  background: color-mix(in srgb, var(--bar-fg) 12%, transparent);
  text-decoration: none;
}

/* --- Mentions légales ------------------------------------------------------ */
.site-footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--bar-fg) 16%, transparent);
  color: color-mix(in srgb, var(--bar-fg) 60%, transparent);
  font-size: var(--text-xs);
}

/* --- Adaptation ------------------------------------------------------------ */
@media (max-width: 980px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .site-footer .footer-legal { flex-direction: column; gap: var(--space-1); }
}

/* ==========================================================================
   CORRECTIFS
   ========================================================================== */

/* --- Menus déroulants qui mordaient sur la barre --------------------------
   .dropdown-content est positionné en top:100% de son <li>. Ce <li> ne fait
   que la hauteur du lien (~36 px) alors que la barre en fait 68 : le menu
   s'ouvrait donc à mi-hauteur, par-dessus la navbar. En étirant les <li> sur
   toute la hauteur de la barre, top:100% tombe juste en dessous. */
.navbar .nav-menu { align-items: stretch; }

.navbar .nav-menu > li {
  display: flex;
  align-items: center;
}

.navbar .nav-menu .dropdown { position: relative; }

.navbar .nav-menu .dropdown-content {
  top: calc(100% + var(--space-2));
  flex-direction: column;
  align-items: stretch;
}

/* --- Pied de page : hauteur resserrée -------------------------------------
   Quatre colonnes généreusement espacées occupaient presque un écran. */
.site-footer {
  margin-top: var(--space-5);
  padding-block: var(--space-5) var(--space-3);
}

.site-footer .footer-grid {
  gap: var(--space-4) var(--space-5);
  padding-bottom: var(--space-4);
}

.site-footer .footer-logo { margin-bottom: var(--space-2); }

.site-footer .footer-brand p {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.site-footer .footer-cta { padding: 0.45rem 1rem; font-size: var(--text-sm); }

.site-footer .footer-col h3 { margin-bottom: var(--space-2); }
.site-footer .footer-col ul { gap: 0.3rem; font-size: var(--text-xs); }
.site-footer address { gap: 0.3rem; margin-bottom: var(--space-3); font-size: var(--text-xs); }
.site-footer .footer-devis { padding: 0.35rem 0.85rem; font-size: var(--text-xs); }
.site-footer .footer-legal { padding-top: var(--space-3); }

@media (max-width: 620px) {
  .site-footer .footer-grid { gap: var(--space-4); }
}

/* Pour que top:100% du <li> tombe au bas de la barre, la chaîne complète doit
   s'étirer : .nav-inner -> .nav-menu -> <li>. La marque et les actions se
   recentrent individuellement. */
.navbar .nav-inner { align-items: stretch; }
.navbar .brand,
.navbar .nav-actions { align-self: center; }

@media (max-width: 1100px) {
  /* En tiroir, le menu est détaché du flux : pas d'étirement à propager. */
  .navbar .nav-inner { align-items: center; }
}

/* Zone d'intervention : une seule ligne discrète au-dessus des mentions
   légales, plutôt qu'une quatrième colonne. Les communes restent visibles
   pour le référencement local sans peser sur la hauteur du pied de page. */
.site-footer .footer-zone {
  margin: 0 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--bar-fg) 16%, transparent);
  color: color-mix(in srgb, var(--bar-fg) 62%, transparent);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  max-width: none;
}

.site-footer .footer-zone-label {
  margin-right: var(--space-2);
  color: var(--bar-fg);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Le filet des mentions légales ferait doublon juste en dessous. */
.site-footer .footer-legal { border-top: none; padding-top: 0; }

/* ==========================================================================
   LOGOTYPE
   --------------------------------------------------------------------------
   Le fichier est un logotype : un texte noir fin plus une clé, sur fond
   transparent. Il était forcé dans un cercle de 42 px en object-fit:cover,
   donc rogné, minuscule, et posé en noir sur une barre sombre.
   Trois corrections : plus de rognage circulaire, une plaque claire pour
   porter le texte sombre, et une hauteur qui rend le nom lisible.
   ========================================================================== */

.navbar .brand .logo {
  width: auto;
  height: 40px;
  min-width: 0;
  min-height: 0;
  max-width: 150px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  /* Plaque claire : sans elle, un logotype noir sur barre sombre est illisible. */
  background: var(--ink-0);
  box-shadow: none;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.navbar .brand:hover .logo {
  transform: none;
  box-shadow: var(--shadow-md);
}

/* Sur la variante claire, la plaque se fondrait dans la barre : un filet la détache. */
.navbar-light .brand .logo { box-shadow: inset 0 0 0 1px var(--border-default); }

.site-footer .footer-logo img {
  width: auto;
  height: 36px;
  max-width: 140px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--ink-0);
  object-fit: contain;
}

@media (max-width: 620px) {
  .navbar .brand .logo { height: 34px; max-width: 128px; }
}


/* Filet de sécurité : un élément flex ne descend pas sous la largeur de son
   contenu tant qu'il garde min-width:auto. Sans ces règles, un menu trop long
   repousse les actions hors du cadre au lieu de se comprimer. */
.navbar .nav-menu { min-width: 0; }
.navbar .nav-actions { flex: 0 0 auto; }

/* Le panier était devenu une icône muette : sans le mot « Panier », l'onglet
   ne se repère plus. Libellé affiché tant qu'il y a la place, icône seule
   au-delà, où le badge suffit à l'identifier. */
.navbar .nav-cart {
  width: auto;
  height: 40px;
  gap: var(--space-2);
  grid-auto-flow: column;
  padding: 0 0.85rem;
  border-radius: var(--radius-pill);
}

.navbar .nav-cart-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* Le badge quitte le coin de l'icône pour se poser après le mot. */
.navbar .nav-cart .badge {
  position: static;
  min-width: 20px;
  line-height: 20px;
}

@media (max-width: 900px) {
  .navbar .nav-cart-label { display: none; }
  .navbar .nav-cart { width: 40px; padding: 0; border-radius: 50%; }
  .navbar .nav-cart .badge { position: absolute; top: 1px; right: 0; min-width: 18px; line-height: 18px; }
}