/* ==========================================================================
   Le Café Boutique — Styles de base
   Palette et polices : voir CLAUDE.md (charte graphique officielle du logo)
   ========================================================================== */

:root {
  --color-brown: #633513;      /* marron principal (logo, contours) */
  --color-green: #43AC35;      /* vert accent (feuilles, boutique) */
  --color-cream: #FDFBF7;      /* fond principal, crème chaud */
  --color-text: #3A2410;       /* texte courant, meilleur contraste */

  --color-cream-deep: #F5EEE0;   /* variante crème plus soutenue pour alterner les sections */
  --color-tan: #E3CEBE;          /* fond beige/tan, section Ambiance de la Boutique */
  --color-brown-soft: rgba(99, 53, 19, 0.12);
  --color-brown-soft-2: rgba(99, 53, 19, 0.22);
  --color-green-soft: rgba(67, 172, 53, 0.14);

  --font-title: 'Pacifico', cursive;       /* titres / logo-like */
  --font-subtitle: 'Baloo 2', sans-serif;  /* sous-titres / accroches */
  --font-body: 'Nunito', sans-serif;       /* texte courant */

  --header-height: 76px;
  --section-max-width: 1100px;

  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* "proximity" et non "mandatory" : testé avec mandatory, le scroll reste
     bloqué à #galerie (dernier point d'ancrage) et Avis/Infos/le footer
     deviennent inatteignables, faute de point d'ancrage après eux — un piège
     inhérent à "mandatory" sans point de sortie. "proximity" garde l'effet
     "un scroll = une section" sur les sections ci-dessous (leur hauteur fait
     qu'un scroll classique atterrit déjà tout près du point suivant) sans
     jamais bloquer le scroll libre dans Avis/Infos. */
  scroll-snap-type: y proximity;
}

/* Un scroll = une section, pour le hero et les 4 séquences vidéo/galerie.
   Avis et Infos en sont volontairement exclus (voir content.css) : ce sont
   des contenus plus longs qu'un écran, un snap forcé y casserait la lecture. */
#hero,
#the,
#chaussettes,
#epicerie,
#galerie {
  scroll-snap-align: start;
}

/* Fondu croisé entre ces mêmes sections au scroll-snap (voir
   js/utils/scroll-fade.js — IntersectionObserver, pas de recalcul au
   scroll) : la section active passe à opacity:1, les autres restent
   légèrement estompées plutôt que de disparaître totalement (opacity:0.4,
   pas 0 — un fondu léger, pas une coupure brutale). Même liste de sections
   que scroll-snap-align ci-dessus : Avis et Infos en sont exclus pour la
   même raison (contenus plus longs qu'un écran). will-change pré-promeut
   chaque section en layer composité pour une transition fluide, sans
   ralentir le scroll. */
#hero,
#the,
#chaussettes,
#epicerie,
#galerie {
  opacity: 0.4;
  transition: opacity 0.6s ease-out;
  will-change: opacity;
}

#hero.section--active,
#the.section--active,
#chaussettes.section--active,
#epicerie.section--active,
#galerie.section--active {
  opacity: 1;
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden; /* les sections animées (vidéo/canvas) ne doivent jamais créer de scroll horizontal */
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: normal;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Texte réservé aux lecteurs d'écran (accessibilité, ex : <h1> caché derrière le logo illustré) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- En-tête / navigation ------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(253, 251, 247, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.site-header.is-scrolled {
  background: rgba(253, 251, 247, 0.94);
  border-bottom-color: var(--color-brown-soft);
  box-shadow: 0 4px 20px rgba(99, 53, 19, 0.08);
}

/* Badge réseau "Épiciers de France" : empilé sous le cartouche
   "Itinéraire", toujours en haut à gauche, mais positionné en dehors du
   flux flex du header (position: fixed) — le header garde sa hauteur fixe
   (--header-height) et ses 3 enfants d'origine (badge / toggle / nav),
   inchangés. `left` reprend le même retrait horizontal que le padding du
   header, pour un alignement vertical exact avec le cartouche au-dessus.
   z-index sous le header (100) mais au-dessus du hero, qui n'est pas
   positionné et se peint donc avant de toute façon. */
.site-header__network-badge-wrap {
  position: fixed;
  top: calc(var(--header-height) + 10px);
  left: clamp(16px, 4vw, 48px);
  z-index: 90;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Visible uniquement sur le hero (voir js/utils/scroll-fade.js, qui pilote
   #hero.section--active selon la section réellement visible à l'écran).
   Nécessaire depuis que les panneaux de texte d'Épicerie et Salon de Thé
   (.video-section__panel--left, même coin haut-gauche que ce badge fixe)
   ont un contenu assez long pour que leur titre/eyebrow, centrés
   verticalement dans la section, remontent jusque dans cette zone — le
   badge, fixe à l'écran (pas lié à une section), les recouvrirait sinon
   quelle que soit la section affichée. */
body:not(:has(#hero.section--active)) .site-header__network-badge-wrap {
  opacity: 0;
  pointer-events: none;
}

/* Badge de certification à part entière (pas discret cette fois) : environ
   3x la taille précédente (34-42px), ratio d'origine préservé (width/height
   sur la balise + object-fit: contain en filet de sécurité). */
.site-header__network-badge {
  height: clamp(100px, 14vw, 126px);
  width: auto;
  object-fit: contain;
  display: block;
}

/* En dessous de ce seuil (même breakpoint que le titre mobile du hero,
   voir .hero__mobile-title dans sections.css), le plancher de 100px
   ci-dessus chevauchait "Le Café" — le "vw" ne suffisant plus à faire
   descendre la taille sous ce plancher sur petit écran. On repasse donc à
   une échelle nettement plus modeste, propre au mobile. */
@media (max-width: 640px) {
  .site-header__network-badge-wrap {
    top: calc(var(--header-height) + 6px);
  }

  .site-header__network-badge {
    height: clamp(38px, 11vw, 50px);
  }
}

/* À 360-375px, le badge (même réduit ci-dessus) frôlait le titre "Le Café"
   du hero (constaté à l'audit) — encore un cran plus petit ici, seuil
   dédié plutôt que de toucher au titre (arc SVG calibré au bord de tasse,
   voir .hero__title-wrap dans sections.css — à ne pas déplacer). */
@media (max-width: 375px) {
  .site-header__network-badge {
    height: clamp(30px, 9vw, 38px);
  }
}

/* Regroupe "Itinéraire" et "Produit du moment" (voir index.html) en un
   seul enfant flex du header, pour qu'ils restent côte à côte quel que
   soit le justify-content: space-between du header lui-même. */
/* min-width: 0 + overflow-x: auto (même technique que .site-header__nav
   ci-dessous) : avec 3 badges désormais (dont "Coffrets sur mesure", le
   plus long des trois), leur largeur cumulée peut dépasser l'espace
   disponible sur mobile étroit (ex. 360px) à côté du bouton menu — sans
   ça, flex-shrink:0 sur chaque badge (juste en dessous) les empêcherait
   de rétrécir et pousserait le bouton hors champ, le rendant inutilisable.
   Ici, l'ensemble défile horizontalement plutôt que de déborder. */
.site-header__badges {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site-header__badges::-webkit-scrollbar {
  display: none;
}

/* Cartouche "produit du moment" : seul .site-header__badge-text est
   destiné à changer (texte libre) — la mise en forme autour n'a pas à
   être retouchée pour mettre à jour le contenu affiché. flex-shrink: 0 :
   chaque badge garde sa taille pleine quel que soit l'espace restant
   dans .site-header__badges (qui défile horizontalement si besoin, voir
   plus haut) plutôt que de se comprimer/tronquer. */
.site-header__badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--color-brown);
  white-space: nowrap;
  flex-shrink: 0;
}

.site-header__badge-text {
  font-family: var(--font-subtitle);
  font-weight: 600;
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
  letter-spacing: 0.02em;
  color: var(--color-cream);
}

/* Variante courte du badge "Coffrets sur mesure" (voir index.html) :
   masquée par défaut, prend le relais du texte complet sous 780px (même
   seuil que le reste du site) — "Coffrets sur mesure" est trop large à
   côté des 2 autres badges sur petit écran, "Sur mesure" seul suffit. */
.site-header__badge-text--mobile {
  display: none;
}

@media (max-width: 780px) {
  .site-header__badge-text--desktop {
    display: none;
  }

  .site-header__badge-text--mobile {
    display: inline;
  }
}

@media (max-width: 480px) {
  .site-header__badge {
    padding: 7px 14px;
    min-height: 44px; /* cible tactile : le texte seul + ce padding ne suffisait pas à 44px (mesuré ~32px) */
  }
}

/* Variante agrandie (~1.5x) du même cartouche, utilisée sous la tasse
   dans le hero — même forme/couleur/police, mêmes proportions de
   padding, juste à plus grande échelle (voir .hero__badge-wrap dans
   sections.css pour son positionnement). */
.site-header__badge--hero {
  padding: 14px 30px;
  border: 2px solid #000;
}

.site-header__badge--hero .site-header__badge-text {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--color-green);
}

@media (max-width: 480px) {
  .site-header__badge--hero {
    padding: 11px 21px;
  }
}

.site-header__name {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--color-brown);
  white-space: nowrap;
}

.site-header__name span {
  color: var(--color-green);
}

/* overflow-x: auto (plutôt que de laisser les liens se compresser et leur
   texte passer à la ligne — constaté avec 9 liens + 3 badges sur des
   largeurs desktop moyennes, ex. 1024-1280px) : au-delà du seuil mobile
   (920px, voir media query plus bas où ce comportement est de toute façon
   remplacé par le menu déroulant vertical), le menu défile horizontalement
   au lieu de casser sa mise en page. Scrollbar masquée (esthétique) mais
   navigation clavier/molette/tactile inchangée. */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site-header__nav::-webkit-scrollbar {
  display: none;
}

.site-header__nav a {
  font-family: var(--font-subtitle);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--color-brown);
  position: relative;
  padding: 4px 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--color-green);
  transition: right 0.25s var(--ease-smooth);
}

.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after {
  right: 0;
}

/* min-width/height 44px + flex centrage : la zone cliquable du bouton
   suivait auparavant la taille de son contenu (le trait central du
   burger, 2px de haut), soit ~18px de haut réel — bien en dessous des
   44px recommandés pour une cible tactile, même si les traits ::before/
   ::after dessinent une icône visuellement plus grande autour (ils sont
   positionnés en absolu, donc ne comptent pas dans la taille du bouton). */
.site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  padding: 8px;
}

.site-header__toggle span,
.site-header__toggle span::before,
.site-header__toggle span::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-brown);
  position: relative;
  transition: transform 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
}

.site-header__toggle span::before { position: absolute; top: -7px; }
.site-header__toggle span::after { position: absolute; top: 7px; }

@media (max-width: 920px) {
  .site-header__toggle {
    display: block;
  }

  .site-header__nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-brown-soft);
    box-shadow: 0 12px 24px rgba(99, 53, 19, 0.08);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
  }

  .site-header__nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-header__nav a {
    padding: 14px clamp(16px, 4vw, 48px);
    border-bottom: 1px solid var(--color-brown-soft);
  }

  .site-header.is-open .site-header__toggle span {
    transform: rotate(45deg);
  }
  .site-header.is-open .site-header__toggle span::before {
    transform: translateY(9px) rotate(90deg);
  }
  .site-header.is-open .site-header__toggle span::after {
    opacity: 0;
  }
}

/* --- Pied de page ---------------------------------------------------------- */
.site-footer {
  background: var(--color-brown);
  color: var(--color-cream);
  padding: 48px clamp(16px, 4vw, 48px) 24px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}