/* Menu du site : bouton carré à trois barres et panneau qui glisse depuis la droite (menu-site.html, menu-site.js).
   Autonome : ne dépend d'aucune règle de la page qui l'accueille, sauf des polices déjà chargées. */
.menu-bouton {
  display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: rgba(11,9,8,.35); border: 1px solid rgba(239,230,214,.55); color: #efe6d6;
  transition: border-color .3s, color .3s, background .3s;
}
.menu-bouton:hover, .menu-bouton:focus-visible { border-color: #fad49b; color: #fad49b; }
.menu-bouton span { display: block; width: 20px; height: 1.5px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }

/* Raccourcis du haut, à gauche du bouton du menu : la boutique et la sélection (avec son nombre de tapis). */
.raccourcis { display: flex; align-items: center; gap: 10px; }
.raccourcis__boutique { padding: 0 8px; color: #efe6d6; font-size: 15px; letter-spacing: .05em; text-decoration: none; text-shadow: 0 1px 12px rgba(11,9,8,.6); transition: color .3s; }
.raccourcis__boutique:hover, .raccourcis__boutique:focus-visible { color: #fad49b; }
.raccourcis__panier {
  position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px;
  background: rgba(11,9,8,.35); border: 1px solid rgba(239,230,214,.55); color: #efe6d6; transition: border-color .3s, color .3s;
}
.raccourcis__panier:hover, .raccourcis__panier:focus-visible { border-color: #fad49b; color: #fad49b; }
.raccourcis__panier svg { width: 18px; height: 18px; }
.raccourcis__compte {
  position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center; background: #fad49b; color: #0b0908; font: 500 11px/1 "Jost", system-ui, sans-serif;
}
.raccourcis__compte[hidden] { display: none; }

.menu-site { position: fixed; inset: 0; z-index: 200; font-family: "Jost", "Futura", system-ui, sans-serif; }
.menu-site__voile { position: absolute; inset: 0; background: rgba(11,9,8,.55); opacity: 0; transition: opacity .35s; }
.menu-site__panneau {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); overflow-y: auto;
  display: flex; flex-direction: column; gap: 28px; padding: 76px 40px 40px;
  background: #14110f; border-left: 1px solid rgba(239,230,214,.14); color: #efe6d6;
  transform: translateX(100%); transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.menu-site.ouvert .menu-site__voile { opacity: 1; }
.menu-site.ouvert .menu-site__panneau { transform: none; }
.menu-site__fermer {
  position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; cursor: pointer;
  background: none; border: 1px solid rgba(239,230,214,.35); color: #efe6d6; font-size: 26px; line-height: 1;
}
.menu-site__fermer:hover, .menu-site__fermer:focus-visible { border-color: #fad49b; color: #fad49b; }
.menu-site ul { list-style: none; margin: 0; padding: 0; }
.menu-site a { color: inherit; text-decoration: none; transition: color .3s; }
.menu-site a:hover, .menu-site a:focus-visible { color: #fad49b; }
.menu-site__principal { display: grid; gap: 6px; font: 500 clamp(26px, 2vw, 34px)/1.15 "Barlow", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; }
.menu-site__principal a { color: #fad49b; }
.menu-site__principal a:hover, .menu-site__principal a:focus-visible { color: #efe6d6; }
.menu-site__titre { margin: 0 0 -14px; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: #b9ae9c; }
.menu-site__metiers { display: grid; gap: 4px; font-size: 17px; }
.menu-site__contact { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(239,230,214,.14); font-size: 15px; color: #b9ae9c; }
.menu-site__devis { padding: .95em 1.2em; background: #fad49b; color: #0b0908 !important; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.menu-site__devis:hover, .menu-site__devis:focus-visible { background: #efe6d6; }

@media (prefers-reduced-motion: reduce) {
  .menu-site__voile, .menu-site__panneau { transition: none; }
}