/* ==========================================================================
   Projéta - Gabarit
   --------------------------------------------------------------------------
   Barre du haut, sections, filets, pied de page, logo.
   ========================================================================== */

/* --- Logo (masque teinté par background) ---------------------------------- */

.logo {
  display: block;
  background: var(--ink);
  -webkit-mask: var(--logo) left center / contain no-repeat;
  mask: var(--logo) left center / contain no-repeat;
}
.logo--paper { background: var(--paper); }

/* --- Barre du haut ----------------------------------------------------------- */

.barre {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 14px var(--section-pad-x);
  background: var(--ink);
  color: var(--paper);
  /* Région persistante pendant les View Transitions : la barre (et le
     panier qu'elle contient) ne participe pas au fondu des pages. */
  view-transition-name: barre;
}

/* Le logo est un SVG inline (fill: currentColor) dans le lien -
   au survol il passe au jaune et se penche, façon tampon posé vite. */
.barre__marque { display: block; color: var(--paper); }
.barre__marque svg {
  display: block;
  width: 112px;
  height: 41px;
  transform: translateY(-8%);
  fill: currentColor;
  transition: transform .15s, color .15s;
}
.barre__marque:hover svg {
  color: var(--jaune);
  transform: translateY(-8%) rotate(-2.5deg);
}

.barre__nav {
  display: flex;
  column-gap: 18px;
  row-gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
  font: 700 11px var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Sur fond noir le texte reste papier - la couleur attitrée de chaque
   page ne sert qu'en soulignement (posée en --accent-nav par le header). */
.barre__nav a {
  text-decoration: none;
  opacity: .85;
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
}
.barre__nav a:hover,
.barre__nav a[aria-current="page"] {
  opacity: 1;
  border-bottom-color: var(--accent-nav, var(--jaune));
}

/* Badge panier (Snipcart) - à droite du Shop, compte d'articles inclus */
.barre__panier {
  font: 700 11px var(--font-mono);
  letter-spacing: .04em;
  background: var(--jaune);
  color: var(--ink);
  border: 0;
  border-radius: var(--rayon-pill);
  padding: 6px 12px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Barre resserrée : logo à gauche et panier à droite sur la première
   rangée, la nav passe en dessous (pleine largeur, une seule ligne qui
   défile). On bascule dès que les trois éléments ne tiennent plus sur
   une ligne (~800px) - sans ça, le panier (dernier élément) s'enroulerait
   seul sous le logo. La barre est déjà un flex qui wrappe : on ne fait que
   pousser le panier à droite et envoyer la nav à la ligne. */
@media (max-width: 820px) {
  .barre { position: static; }
  .barre__panier { margin-left: auto; }
  .barre__nav {
    order: 1;             /* après le panier : à la ligne suivante */
    flex-basis: 100%;
    margin-left: 0;
  }
  .barre__nav::-webkit-scrollbar { display: none; }
}

/* --- Contenu de page --------------------------------------------------------------
   Le <main> occupe au moins la fenêtre moins la barre : le pied de page
   n'apparaît que sous le pli, sans JS. */

.contenu {
  display: block;
  min-height: calc(100svh - var(--barre-h));
}

/* --- Sections ------------------------------------------------------------------ */

.filet { height: 4px; background: var(--ink); }

/* Filet automatique : deux sections qui se suivent dans le contenu sont
   toujours séparées d'un trait noir - pas de <div class="filet"> à poser
   à la main, le système vaut pour toutes les pages. */
.contenu > .section + .section,
.contenu > .hero + .section { border-top: 4px solid var(--ink); }

/* Deux papiers seulement : --paper et --paper-alt. L'alternance de fonds
   se joue entre ces deux teintes (et le noir --ink pour les nuits) -
   jamais de papier lavé à l'encre de la page. */
.section { padding: var(--section-pad-y) var(--section-pad-x); }
/* .section--alt, */
.section:nth-child(even) { background: var(--paper-alt); }

/* Conteneur centré */
.boite { max-width: var(--largeur-site); margin: 0 auto; }
.boite--etroite { max-width: 720px; margin: 0 auto; }

/* En-tête de section : numéro mono + titre en surimpression */
.titre-section {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 30px;
}
.titre-section__num { font: 700 13px var(--font-mono); color: var(--accent, var(--bleu)); }

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

.pied {
  background: var(--ink);
  color: var(--paper);
  padding: 52px var(--section-pad-x);
  /* Région persistante pendant les View Transitions (comme la barre) */
  view-transition-name: pied;
}

.pied__boite {
  max-width: var(--largeur-site);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}

.pied .logo { width: 170px; height: 62px; }

.pied__coordonnees {
  font: 400 12px var(--font-mono);
  opacity: .85;
  margin-top: 12px;
  line-height: 1.6;
}
.pied__coordonnees a { text-decoration: none; }
.pied__coordonnees a:hover { color: var(--jaune); }

/* Mêmes codes que le menu du haut : soulignement à l'encre attitrée */
.pied__nav {
  display: flex;
  gap: 12px 26px;
  flex-wrap: wrap;
  font: 700 11px var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pied__nav a {
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
}
.pied__nav a:hover { border-bottom-color: var(--accent-nav, var(--jaune)); }
.pied__nav .pied__prevente { color: var(--jaune); }

.pied__legal {
  max-width: var(--largeur-site);
  margin: 34px auto 0;
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
  font: 400 10px var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}
.pied__legal a { text-decoration: none; }
.pied__legal a:hover { color: var(--jaune); }