/* =========================================================================
   UN MONDE À CROQUER — style.css
   =========================================================================

   GUIDE RAPIDE — comment modifier ce fichier toi-même
   -------------------------------------------------------------------------
   Ce fichier contrôle TOUTES les couleurs, tailles et mises en page du
   site. Pas besoin de tout comprendre : voici les 3 choses à savoir.

   1. LES COULEURS SONT CENTRALISÉES tout en haut, dans le bloc ":root"
      (juste en dessous de ce texte). Change une couleur UNE SEULE FOIS
      là-bas, et elle se met à jour PARTOUT sur le site automatiquement
      (boutons, titres, fonds...). Ne cherche pas les couleurs ailleurs
      dans le fichier — tu verras des noms comme "var(--maroon)", ça veut
      dire "va chercher la couleur --maroon définie tout en haut".

   2. LES TAILLES RESPONSIVES utilisent souvent une formule du type :
         clamp(300px, 50vw, 600px)
      Ça veut dire : "jamais plus petit que 300px, jamais plus grand que
      600px, et entre les deux ça s'ajuste selon la largeur de l'écran
      (50vw = 50% de la largeur de la fenêtre)".
      → Pour AGRANDIR un élément : augmente les 3 valeurs (ex: 300→380,
        600→720).
      → Pour un élément à TAILLE FIXE (pas responsive) : remplace tout
        par une seule valeur, ex: "width: 400px;"

   3. CHAQUE SECTION DU SITE a son bloc, annoncé par un commentaire
      comme celui-ci :
         /* -----------------------------------------------------------
            Nom de la section
            ----------------------------------------------------------- */
      Cherche (Ctrl+F) le nom de la section que tu veux modifier
      (ex: "Header", "Hero", "Footer", "Nos biscuits").

   Astuce générale : après une modification, sauvegarde le fichier et
   recharge la page dans ton navigateur pour voir le résultat avant de
   l'envoyer sur GitHub.
   ========================================================================= */


/* =========================================================================
   POLICES — ne pas modifier cette section (sauf si tu changes de police)
   Ces blocs "chargent" les 3 polices officielles de la marque depuis le
   dossier fonts/. Elles sont ensuite utilisées via les variables
   --font-display, --font-subtitle et --font-body définies plus bas.
   ========================================================================= */
@font-face {
  font-family: "Mavericks";
  src: url("../fonts/MavericksRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("../fonts/Recoleta-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/BrandonGrotesque-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/BrandonGrotesque-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/BrandonGrotesque-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* =========================================================================
   TOKENS — LES RÉGLAGES PRINCIPAUX DU SITE
   C'est ICI que tu changes une couleur, une police ou un arrondi pour
   tout le site en une seule fois.
   ========================================================================= */
:root {
  /* ---- COULEURS -------------------------------------------------------
     Format hexadécimal (#RRGGBB). Change la valeur après le ":" pour
     changer la couleur PARTOUT où elle est utilisée sur le site.
     Un site comme https://htmlcolorcodes.com/fr/ permet de choisir une
     couleur visuellement et de récupérer son code hexadécimal. */
  --cream: #EDE8D5;          /* fond principal du site (couleur de marque "Sablé clair") */
  --cream-deep: #E1DBC1;     /* fond légèrement plus foncé, pour alterner les sections */
  --white: #FFFDF8;          /* blanc cassé, utilisé pour les cartes de biscuits */
  --maroon: #9C3031;         /* rouge principal de la marque — titres, boutons */
  --maroon-dark: #7C1A21;    /* = couleur "Bourgogne" — survol des boutons, texte foncé */
  --ink: #3B2418;            /* couleur du texte courant (paragraphes) */
  --terracotta: #9C3031;     /* alias du rouge principal, utilisé pour les boutons/accents */
  --terracotta-dark: #7C1A21;/* version foncée du rouge, au survol de la souris */
  --sable: #D8996E;          /* couleur secondaire "Sablé" — utilisée en petites touches décoratives */
  --bourgogne: #7C1A21;      /* couleur secondaire "Bourgogne" — texte des étiquettes, focus clavier */

  /* ---- POLICES ----------------------------------------------------------
     3 polices officielles. Si tu veux qu'un texte utilise une police
     différente, change plutôt "font-family: var(--font-XXX)" à l'endroit
     concerné plus bas dans le fichier — ne touche pas ces lignes-ci sauf
     si tu changes carrément de police pour tout le site. */
  --font-display: "Mavericks", Georgia, serif;                  /* GRANDS TITRES (h1, h2) */
  --font-subtitle: "Recoleta", Georgia, serif;                  /* SOUS-TITRES (h3 : noms de biscuits, noms de commerces...) */
  --font-body: "Brandon Grotesque", -apple-system, sans-serif;  /* TEXTE COURANT (paragraphes, menu, boutons, étiquettes) */

  /* ---- FORMES ET ESPACEMENTS --------------------------------------------
     --radius-X contrôle l'arrondi des coins (plus le chiffre est grand,
     plus c'est arrondi). --shadow-soft est l'ombre douce utilisée sous
     les boutons et les cartes. --section-pad est l'espace vertical
     au-dessus et en dessous de chaque grande section du site. */
  --radius-s: 10px;   /* petit arrondi (boutons "outline", messages d'accessibilité) */
  --radius-m: 20px;   /* arrondi moyen (cartes biscuits, image de la carte) */
  --radius-l: 32px;   /* grand arrondi (actuellement peu utilisé, réservé) */
  --shadow-soft: 0 12px 30px -12px rgba(74, 29, 34, 0.25); /* ombre douce (boutons, cartes) */
  --section-pad: clamp(56px, 9vw, 110px); /* espace vertical entre les sections — augmente pour plus d'air */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth; /* défilement en douceur quand on clique un lien du menu */
  overflow-x: hidden;      /* sécurité anti-débordement horizontal sur téléphone — ne pas retirer */
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* Titres principaux (balises <h1> et <h2> dans le HTML) */
h1, h2 {
  font-family: var(--font-display);
  color: var(--maroon);   /* couleur du texte des grands titres */
  margin: 0;
  line-height: 1.08;
}

/* Sous-titres (balises <h3> : noms de biscuits, noms de commerces...) */
h3 {
  font-family: var(--font-subtitle);
  color: var(--maroon);
  margin: 0;
  line-height: 1.15;
}

/* Petit texte en majuscules au-dessus des titres de section (ex: "EN ESTRIE") */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.14em;   /* espacement entre les lettres */
  text-transform: uppercase;
  font-size: 0.78rem;       /* taille du texte — augmente pour l'agrandir */
  color: var(--bourgogne);
}

.accent { color: var(--terracotta); } /* classe utilitaire pour mettre un mot en rouge dans une phrase */

/* Largeur maximale du contenu, centré, avec marge sur les côtés */
.container {
  width: 100%;
  max-width: 1180px;  /* largeur max du contenu sur grand écran — augmente pour un site plus large */
  margin: 0 auto;
  padding: 0 24px;    /* marge de sécurité sur les côtés (petits écrans) */
}

/* ---- BOUTONS --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;        /* taille du texte du bouton */
  padding: 15px 30px;     /* hauteur/largeur du bouton — augmente pour un bouton plus gros */
  border-radius: 999px;   /* 999px = complètement arrondi ("pilule") */
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary {
  background: var(--terracotta);  /* couleur de fond du bouton principal */
  color: var(--white);            /* couleur du texte */
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--terracotta-dark); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.btn-outline:hover { background: var(--terracotta); color: var(--white); }

/* -------------------------------------------------------------------------
   Skip link / accessibilité clavier — lien invisible utilisé par les
   lecteurs d'écran, tu peux ignorer ce bloc.
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--maroon);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-s);
  z-index: 999;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

:focus-visible {
  outline: 3px solid var(--bourgogne); /* contour visible quand on navigue au clavier (Tab) */
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   HEADER — bandeau du haut avec le logo et le menu
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;   /* reste collé en haut de l'écran quand on défile */
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* logo à gauche, menu à droite */
  padding: 12px 24px;              /* hauteur du bandeau (14px × 1,3 = header 30% plus haut) — augmente pour un header encore plus haut */
  background: var(--maroon);       /* fond rouge du header */
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Taille du logo dans le header */
.site-header .brand img {
  height: 55px;    /* ← CHANGE CETTE VALEUR pour agrandir/rétrécir le logo du header (46px × 1,3 = +30%) */
  width: auto;     /* la largeur s'ajuste automatiquement, ne pas toucher */
  object-fit: contain;
}

.site-nav {
  display: flex;
  gap: 28px;          /* espace entre les liens du menu */
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 1.3rem;   /* taille du texte des liens du menu */
  color: var(--cream);  /* texte clair pour rester lisible sur le fond rouge du header */
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.site-nav a:hover { border-color: var(--cream); }

/* Bouton "hamburger" (3 lignes) affiché uniquement sur mobile */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  margin: 5px 0;
  background: var(--cream);  /* clair pour rester visible sur le fond rouge du header */
  border-radius: 3px;
}

/* -------------------------------------------------------------------------
   HERO — grande bannière d'accueil avec le logo principal
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;    /* remplit toute la hauteur de l'écran */
  min-height: 100svh;   /* version plus fiable sur mobile (tient compte de la barre d'adresse) — les navigateurs qui ne la connaissent pas gardent la ligne du dessus */ 
     
  padding: clamp(50px, 8vw, 90px) 24px; /* espace au-dessus/en dessous du contenu */
  text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 60%, var(--cream-deep) 100%); /* visible seulement si aucune photo de fond n'est choisie dans site-config.js */
}

/* Photo de fond plein écran. object-fit: cover = la photo remplit tout
   l'espace disponible sans jamais se déformer, en rognant si besoin —
   elle reste "pleine grandeur" quelle que soit la taille de la fenêtre
   ou le zoom du texte, car elle est positionnée en pourcentages (inset:0)
   et non liée à la taille du texte. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* remplit tout l'écran sans déformer la photo */
  object-position: center; /* centre la photo dans le cadre */
}

/* Léger voile crème par-dessus la photo, pour que le logo et le bouton
   restent bien lisibles peu importe la photo choisie. Retire ce bloc
   (ou baisse les chiffres après la virgule dans rgba, entre 0 et 1)
   si tu préfères une photo plus franche, sans voile. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(237,232,213,0.25) 0%, rgba(237,232,213,0.6) 100%);
}

/* Si aucune photo de fond n'est choisie dans site-config.js (valeur
   "aucune"), la couche .hero-bg reste vide/cachée — voir js/main.js */
.hero-bg.is-empty { display: none; }

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1025px;  /* largeur max du bloc central du hero — augmente si tu agrandis le logo */
  margin: 0 auto;
}

/* Conteneur du logo principal (grande image du haut) */
.hero-mascot {
  transform: translateY(-70px); 
  transition: transform 0.3s ease;
   
   width: clamp(250px, 80vw, 1100px); /* ← CHANGE CES 3 VALEURS pour agrandir/rétrécir le logo principal
                                        (minimum, taille selon l'écran, maximum) — valeurs actuelles = +25% */
  max-width: 100%;                  /* sécurité anti-débordement sur petits téléphones — ne pas retirer */
  margin: 0 auto 28px;              /* dernier chiffre = espace en dessous du logo */
}

.hero-mascot img {
  width: 100%;
  height: auto;
}

/* Texte invisible à l'écran mais lu par les lecteurs d'écran (SEO/accessibilité) — ne pas supprimer */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Rangée des 4 icônes rondes (amour / artisanal / sans gluten / végan) sous le logo */
.hero-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;               /* TOUJOURS sur une seule ligne, même sur petit écran (les icônes rétrécissent plutôt que de passer à la ligne) */
  gap: clamp(8px, 3vw, 40px);      /* espace entre les icônes */
  list-style: none;
  margin: 0 0 32px;               /* dernier chiffre = espace en dessous de la rangée d'icônes */
  padding: 0;
   transform: translateY(-100px); 
  transition: transform 0.3s ease;
}

.hero-icons img {
  width: clamp(48px, 15vw, 150px);   /* ← CHANGE CES 3 VALEURS pour agrandir/rétrécir les icônes */
  height: clamp(48px, 15vw, 150px);  /*   (garde les mêmes valeurs sur width et height pour rester rond) */
  object-fit: contain;
}

/* -------------------------------------------------------------------------
   BANDEAU DÉFILANT — photos qui défilent en boucle sous le hero
   ------------------------------------------------------------------------- */
.bandeau {
  position: relative;
  overflow: hidden;
  background: var(--maroon);       /* couleur visible derrière/autour des photos */
  padding: clamp(28px, 4vw, 44px) 0; /* respiration verticale au-dessus/en dessous des photos */
}

/* Dégradés sur les bords gauche/droite du bandeau — fondent les photos
   dans le fond au lieu de les couper à angle vif, plus soigné */
.bandeau::before,
.bandeau::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(30px, 6vw, 90px);
  z-index: 2;
  pointer-events: none;
}
.bandeau::before { left: 0;  background: linear-gradient(90deg, var(--maroon) 0%, rgba(156,48,49,0) 100%); }
.bandeau::after  { right: 0; background: linear-gradient(270deg, var(--maroon) 0%, rgba(156,48,49,0) 100%); }

.bandeau-track {
  display: flex;
  gap: 18px;               /* espace entre les photos — avant elles étaient collées, d'où l'effet "basique" */
  width: max-content;
  will-change: transform;  /* indique au navigateur d'optimiser cet élément pour l'animation (plus fluide) */
  /* Le défilement est piloté par js/main.js (fonction startBandeauAnimation),
     pas par une animation CSS — c'est ce qui corrige le bug où le bandeau
     restait figé sur certains téléphones/tablettes. Rien à modifier ici :
     pour changer la vitesse, va dans js/main.js → PIXELS_PER_SECOND. */
}

.bandeau-item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 340px);   /* taille de chaque photo dans le bandeau */
  height: clamp(160px, 20vw, 240px);
  border-radius: var(--radius-m);     /* coins arrondis — avant les photos étaient carrées et collées */
  overflow: hidden;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.45); /* ombre qui donne du relief à chaque photo */
}

.bandeau-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* remplit le cadre en rognant si besoin, sans déformer la photo */
  cursor: zoom-in;     /* indique que la photo est cliquable (voir js/main.js → lightbox) */
  transition: transform 0.5s ease, filter 0.3s ease;
}
.bandeau-item:hover img { transform: scale(1.07); filter: brightness(1.05); }

/* -------------------------------------------------------------------------
   Réglages génériques appliqués à toutes les sections du site
   ------------------------------------------------------------------------- */
section { padding: var(--section-pad) 0; } /* espace vertical entre chaque grande section */

.section-head {
  text-align: center;
  max-width: 620px;                       /* largeur max du texte d'intro de chaque section */
  margin: 0 auto clamp(30px, 5vw, 52px);
}

.section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);  /* taille des titres de section ("Nos biscuits", etc.) */
  margin: 8px 0 12px;
}

.section-head p {
  font-size: 1.05rem;
  color: var(--maroon-dark);
  opacity: 0.85;
}

/* -------------------------------------------------------------------------
   NOS BISCUITS — carrousel de cartes
   Pour changer le CONTENU (nom, photo, description, étiquettes) : modifie
   plutôt le fichier js/cookies-data.js, pas ce fichier-ci.
   ------------------------------------------------------------------------- */
.cookies-section { background: var(--white); } /* fond de la section (blanc cassé) */

.carousel { position: relative; }

/* Dégradés sur les bords gauche/droite pour suggérer qu'il y a d'autres
   biscuits à découvrir en faisant défiler — effet "vitrine" plus soigné */
.carousel::before,
.carousel::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 32px;
  width: clamp(24px, 4vw, 64px);
  z-index: 2;
  pointer-events: none;  /* laisse passer les clics à travers le dégradé */
}
.carousel::before {
  left: 0;
  background: linear-gradient(90deg, var(--white) 0%, rgba(255,253,248,0) 100%);
}
.carousel::after {
  right: 0;
  background: linear-gradient(270deg, var(--white) 0%, rgba(255,253,248,0) 100%);
}

.carousel-track {
  display: flex;
  gap: 22px;                    /* espace horizontal entre les cartes */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 6px 18px;
  scroll-padding: 6px;
  scrollbar-width: none;        /* cache la barre de défilement (Firefox) — navigation via les flèches */
}

.carousel-track::-webkit-scrollbar { display: none; } /* cache la barre de défilement (Chrome/Safari) */

/* Carte individuelle d'un biscuit */
.cookie-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: clamp(200px, 20vw, 240px);  /* ← taille d'une carte biscuit (largeur) */
  background: var(--cream);          /* fond de la carte */
  border-radius: var(--radius-m);    /* arrondi des coins de la carte */
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  border: 1px solid transparent;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.cookie-card:hover {
  transform: translateY(-8px);              /* effet de soulèvement au survol */
  box-shadow: 0 20px 34px -14px rgba(74,29,34,0.35);
  border-color: var(--sable);
}

/* Photo ronde du biscuit, en haut de la carte */
.cookie-card .cookie-photo {
  width: 100%;
  aspect-ratio: 1 / 1;   /* garde toujours un cercle parfait */
  border-radius: 50%;    /* 50% = complètement rond. Mets une petite valeur (ex: 16px) pour un carré arrondi */
  overflow: hidden;
  margin: 0 auto 16px;
  border: 3px solid var(--white);
  box-shadow: 0 6px 16px rgba(74,29,34,0.15);
}

.cookie-card .cookie-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;   /* indique que la photo est cliquable (voir js/main.js → lightbox) */
  transition: transform 0.4s ease;
}
.cookie-card:hover .cookie-photo img { transform: scale(1.06); } /* léger zoom sur la photo au survol */

.cookie-card h3 {
  font-size: 1.2rem;   /* taille du nom du biscuit */
  margin-bottom: 6px;
}

.cookie-card p.desc {
  font-size: 0.9rem;   /* taille de la description */
  color: var(--maroon-dark);
  opacity: 0.85;
  min-height: 40px;
}

.cookie-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Étiquettes "Végan" / "Sans produits laitiers" */
.tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--bourgogne);
  color: var(--bourgogne);
  background: rgba(216, 153, 110, 0.16);  /* fond très pâle de l'étiquette (couleur "sable" transparente) */
}

/* Étiquette "Sans gluten" — couleur différente des autres étiquettes */
.tag.gluten { border-color: var(--terracotta); color: var(--terracotta-dark); background: rgba(156,48,49,0.08); }

.carousel-arrows {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

/* Boutons flèches ‹ › pour faire défiler les biscuits */
.carousel-arrow {
  width: 48px;    /* taille des boutons flèches (rond) */
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--maroon);       /* fond plein (plus visible qu'un simple contour) */
  color: var(--white);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -6px rgba(74,29,34,0.45);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.carousel-arrow:hover { background: var(--terracotta-dark); transform: translateY(-2px); }

/* État désactivé quand on est déjà tout au début ou tout à la fin du
   carrousel — géré automatiquement par js/main.js, ne pas modifier ici */
.carousel-arrow:disabled {
  background: var(--cream-deep);
  color: var(--maroon);
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
  transform: none;
}

/* -------------------------------------------------------------------------
   OÙ NOUS TROUVER — carte + liste des points de vente
   Pour changer le CONTENU (nom, adresse, ville des commerces) : modifie
   plutôt le fichier js/points-de-vente-data.js, pas ce fichier-ci.
   ------------------------------------------------------------------------- */
.map-section { background: var(--cream-deep); } /* fond de la section (crème plus foncé) */

.map-layout {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;  /* colonne liste / colonne carte */
  gap: 40px;         /* espace entre la liste et l'image de la carte */
  align-items: start;
}

.pdv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;   /* espace vertical entre chaque commerce dans la liste */
}

.pdv-list li {
  background: var(--white);
  border-radius: var(--radius-s);
  padding: 14px 16px;
  box-shadow: 0 6px 16px rgba(74,29,34,0.08);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pdv-pin {
  color: var(--terracotta);  /* couleur de l'icône 📍 */
  font-size: 1.1rem;
  line-height: 1.3;
  flex-shrink: 0;
}

.pdv-info strong {
  display: block;
  color: var(--maroon);
  font-family: var(--font-subtitle);
  font-size: 1.05rem;    /* taille du nom du commerce */
}

.pdv-info .pdv-ville {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bourgogne);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pdv-info .pdv-adresse,
.pdv-info .pdv-tel {
  font-size: 0.88rem;
  opacity: 0.85;
  margin-top: 2px;
}

.pdv-info a.pdv-site {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--terracotta);
  text-decoration: none;
}
.pdv-info a.pdv-site:hover { text-decoration: underline; }

.map-image {
  border-radius: var(--radius-m);  /* arrondi des coins de l'image de la carte */
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* Sur petit écran (mobile/tablette) : la liste passe au-dessus de la carte au lieu d'être à côté */
@media (max-width: 860px) {
  .map-layout { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   AUSSI DISPONIBLES — grille des 5 cartes (marchés, festivals...)
   ------------------------------------------------------------------------- */
.disponibles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* nombre de colonnes automatique selon la largeur */
  gap: 24px;   /* espace entre les cartes */
}

.disponible-card {
  text-align: center;
  padding: 20px 14px;
}

/* Petit cercle avec l'emoji au-dessus de chaque carte */
.disponible-icon {
  width: 58px;    /* taille du cercle — change cette valeur ET celle du dessous ensemble */
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--sable);  /* anneau de couleur "sable" autour du cercle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;   /* taille de l'emoji à l'intérieur */
  box-shadow: 0 8px 18px rgba(74,29,34,0.1);
}

.disponible-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.disponible-card p {
  font-size: 0.88rem;
  opacity: 0.8;
  margin: 0;
}

/* -------------------------------------------------------------------------
   FOOTER — bas de page (logo, coordonnées, réseaux sociaux)
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--maroon);  /* couleur de fond du footer */
  color: var(--cream);        /* couleur du texte par défaut dans le footer */
  padding: 56px 0 26px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;  /* largeur relative : colonne logo / colonne contact */
  gap: 40px;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;   /* espace entre le logo et la rangée d'icônes */
}

/* Taille du logo dans le footer */
.footer-brand img.footer-logo {
  width: clamp(150px, 16vw, 190px);  /* ← CHANGE CES 3 VALEURS pour agrandir/rétrécir le logo du footer */
  height: auto;
}

/* Rangée des 3 petites icônes (amour / artisanal / sans gluten) en crème dans le footer */
.footer-icons {
  display: flex;
  flex-wrap: nowrap;  /* TOUJOURS sur une seule ligne, même sur petit écran */
  gap: 10px;   /* espace entre les icônes */
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-icons img {
  width: clamp(38px, 9vw, 54px);    /* ← CHANGE CES VALEURS pour agrandir/rétrécir les icônes du footer */
  height: clamp(38px, 9vw, 54px);
  object-fit: contain;
}

.footer-contact h4 {
  font-family: var(--font-subtitle);
  color: var(--cream);
  font-size: 1.05rem;
  margin: 0 0 14px;
}

.footer-contact ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;         /* espace entre chaque ligne de coordonnées */
  font-size: 0.94rem;
}

.footer-contact a {
  text-decoration: none;
  color: var(--cream);
  opacity: 0.92;
}
.footer-contact a:hover { opacity: 1; text-decoration: underline; }

/* Petits cercles Facebook / Instagram */
.social-links {
  display: flex;
  gap: 14px;
}

.social-links a {
  width: 40px;   /* taille des cercles Facebook/Instagram */
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(247,240,223,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--cream);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.social-links a:hover { background: var(--terracotta); border-color: var(--terracotta); }

.footer-bottom {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid rgba(247,240,223,0.18);
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Sur mobile : les 2 colonnes du footer s'empilent au lieu d'être côte à côte */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* -------------------------------------------------------------------------
   RESPONSIVE — menu mobile (moins de 780px de large)
   ------------------------------------------------------------------------- */
@media (max-width: 780px) {
  .nav-toggle { display: block; }  /* affiche le bouton "hamburger" */

  .site-nav {
    position: fixed;
    top: 80px;           /* doit correspondre à la hauteur du header — recalcule si tu changes le padding/logo du header */
    right: 0;
    left: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    max-height: 0;      /* menu fermé par défaut */
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-bottom: 1px solid rgba(107,42,49,0.12);
  }

  .site-nav a {
    color: var(--maroon);  /* le menu déplié a un fond crème, donc texte foncé ici (contrairement au header rouge) */
  }

  .site-nav.is-open {
    max-height: 320px;  /* hauteur du menu déplié — augmente si tu ajoutes des liens */
    padding: 10px 0;
  }

  .site-nav a {
    width: 100%;
    text-align: center;
    padding: 14px 0;
  }
}

/* -------------------------------------------------------------------------
   ANIMATION D'APPARITION — les blocs apparaissent en fondu au défilement
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;  /* 0.6s = durée de l'apparition */
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; } /* désactivé pour les personnes sensibles au mouvement */
}

/* -------------------------------------------------------------------------
   VISIONNEUSE PLEIN ÉCRAN (lightbox) — ouverte au clic sur une photo de
   biscuit ou du bandeau défilant. Logique d'ouverture/fermeture dans
   js/main.js (fonctions openLightbox / closeLightbox), rien à faire ici.
   ------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;                       /* couvre tout l'écran */
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 6vw, 64px);
  background: rgba(20, 10, 8, 0.9);  /* fond sombre derrière la photo agrandie */
  cursor: zoom-out;               /* indique qu'un clic referme la photo */
  animation: lightbox-fade 0.25s ease;
}

.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-m);   /* arrondi de la photo agrandie */
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6);
}

.lightbox-close {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 46px;      /* taille du bouton de fermeture (rond) */
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: var(--cream);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* Empêche la page de défiler derrière la photo agrandie pendant qu'elle est ouverte */
body.lightbox-open { overflow: hidden; }

@keyframes lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
}