/* ==========================================================================
   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;
}

/* 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__title-svg--mobile 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);
  }
}

/* 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é. */
.site-header__badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--color-brown);
  white-space: nowrap;
}

.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);
}

@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);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
}

.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;
}

.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;
  }
}