/* Structure commune à toutes les pages : en-tête, navigation (panneau latéral sous 992 px),
   pied de page, retour en haut. Comportements dans js/nav.js. */

.lien-evitement {
  position: absolute;
  top: -100px;
  left: var(--espace-s);
  z-index: 2000;
  padding: var(--espace-xs) var(--espace-s);
  background-color: var(--vert);
  color: var(--ivoire);
}

.lien-evitement:focus {
  top: var(--espace-s);
}

/* Aperçu GitHub Pages uniquement (variable APERCU=1 au build) */
.badge-apercu {
  position: fixed;
  left: var(--espace-s);
  bottom: var(--espace-s);
  z-index: 2000;
  padding: 0.3em 0.9em;
  background-color: #8b1e1e;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* --- En-tête --- */

.entete {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--ivoire);
  border-bottom: 1px solid var(--filet);
  transition: box-shadow var(--transition);
}

.entete.is-scrolled {
  box-shadow: 0 6px 24px -12px rgb(47 42 36 / 35%);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
  height: var(--hauteur-entete);
}

.entete__marque {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--encre);
  text-decoration: none;
}

.entete__marque img {
  width: 48px;
  border: 1px solid var(--or-clair);
}

.entete__nom {
  font-family: var(--police-titre);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
}

.entete__nom small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--police-capitales);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-fonce);
}

/* --- Navigation --- */

.navigation__liens a {
  font-family: var(--police-capitales);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
}

.navigation__liens a:hover,
.navigation__liens a[aria-current="page"] {
  color: var(--vert);
}

.navigation__contact a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--encre-douce);
  text-decoration: none;
}

/* Bouton menu (trois traits → croix) */
.entete__burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.entete__burger-barres,
.entete__burger-barres::before,
.entete__burger-barres::after {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: var(--encre);
  transition: transform var(--transition), background-color var(--transition);
}

.entete__burger-barres {
  position: relative;
}

.entete__burger-barres::before,
.entete__burger-barres::after {
  content: "";
  position: absolute;
  left: 0;
}

.entete__burger-barres::before {
  top: -7px;
}

.entete__burger-barres::after {
  top: 7px;
}

.entete__burger[aria-expanded="true"] .entete__burger-barres {
  background-color: transparent;
}

.entete__burger[aria-expanded="true"] .entete__burger-barres::before {
  transform: translateY(7px) rotate(45deg);
}

.entete__burger[aria-expanded="true"] .entete__burger-barres::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* Fond assombri derrière le panneau mobile */
.voile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: rgb(47 42 36 / 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.voile-menu.is-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 992px) {
  .navigation__liens {
    display: flex;
    gap: clamp(1rem, 2.2vw, 2.2rem);
  }

  .navigation__liens a {
    position: relative;
    padding-block: 0.4rem;
  }

  /* Filet doré sous le lien survolé ou actif */
  .navigation__liens a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--or);
    transform: scaleX(0);
    transition: transform var(--transition);
  }

  .navigation__liens a:hover::after,
  .navigation__liens a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .navigation__contact {
    display: none;
  }
}

@media (max-width: 991px) {
  .entete__burger {
    display: flex;
    position: relative;
    z-index: 1002;
  }

  .navigation {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: min(86vw, 360px);
    height: 100dvh;
    padding: calc(var(--hauteur-entete) + var(--espace-m)) var(--espace-l) var(--espace-l);
    background-color: var(--papier);
    border-left: 1px solid var(--or-clair);
    transform: translateX(100%);
    visibility: hidden;
    /* À la fermeture, masqué seulement après le glissement */
    transition: transform 0.35s ease, visibility 0s linear 0.35s;
  }

  /* À l'ouverture, visible tout de suite : le premier lien peut recevoir le focus */
  .navigation.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.35s ease, visibility 0s;
  }

  .navigation__liens li + li {
    border-top: 1px solid var(--filet);
  }

  .navigation__liens a {
    display: block;
    padding-block: 0.9rem;
    font-size: 0.9rem;
  }

  .navigation__contact {
    display: grid;
    gap: var(--espace-s);
    padding-top: var(--espace-m);
    border-top: 1px solid var(--or);
    font-size: 0.95rem;
  }
}

@media (max-width: 420px) {
  .entete__nom {
    font-size: 1.35rem;
  }

  .entete__marque img {
    width: 40px;
  }
}

/* --- Pied de page --- */

.pied {
  background-color: var(--vert);
  color: rgb(248 244 236 / 85%);
  font-size: 0.95rem;
}

.pied .frise {
  background-color: var(--ivoire);
  height: 12px;
}

.pied a {
  color: var(--ivoire);
  text-decoration: none;
}

.pied a:hover {
  color: var(--or-clair);
}

.pied__grille {
  display: grid;
  gap: var(--espace-l);
  padding-block: var(--espace-xl) var(--espace-l);
}

.pied__marque img {
  width: 56px;
  margin-bottom: var(--espace-s);
  border: 1px solid var(--or-clair);
}

.pied__nom {
  margin-bottom: var(--espace-xs);
  font-family: var(--police-titre);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--ivoire);
}

.pied__titre {
  margin-bottom: var(--espace-s);
  font-family: var(--police-capitales);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-clair);
}

.pied__liste {
  display: grid;
  gap: 0.6rem;
}

.pied__liste a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-s);
  padding-block: var(--espace-m);
  border-top: 1px solid rgb(220 200 156 / 30%);
  font-size: 0.85rem;
}

.pied__bas ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-m);
}

@media (min-width: 768px) {
  .pied__grille {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* Lien « Gérer les cookies » : un bouton qui a l'apparence des liens du pied */
.pied__lien-bouton {
  color: var(--ivoire);
  text-decoration: none;
}

.pied__lien-bouton:hover {
  color: var(--or-clair);
}

/* --- Bandeau de consentement aux cookies (js/consent.js) --- */

.consentement {
  position: fixed;
  left: var(--espace-s);
  right: var(--espace-s);
  bottom: var(--espace-s);
  z-index: 1050;
  max-width: 460px;
  padding: var(--espace-m);
  background-color: var(--papier);
  border: 1px solid var(--or);
  box-shadow: var(--ombre);
  font-size: 0.95rem;
}

.consentement__titre {
  margin-bottom: var(--espace-xs);
  font-size: 1.5rem;
}

.consentement p {
  color: var(--encre-douce);
}

.consentement__choix {
  margin-top: var(--espace-s);
}

/* Les deux choix ont exactement le même poids visuel */
.consentement__choix .bouton {
  flex: 1;
}

/* --- Retour en haut (visible après défilement) --- */

.retour-haut {
  position: fixed;
  right: var(--espace-m);
  bottom: var(--espace-m);
  z-index: 900;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background-color: var(--papier);
  border: 1px solid var(--or);
  color: var(--or-fonce);
  box-shadow: var(--ombre);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), background-color var(--transition), color var(--transition);
}

.retour-haut.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.retour-haut:hover {
  background-color: var(--or-fonce);
  color: var(--papier);
}