/* ===== Feuille de style principale : les variables sont regroupées ici, en tête de fichier ===== */
:root {                                   /* Sélecteur racine : variables disponibles partout */
  --couleur-fond: #faf8f5;                /* Couleur de fond de la page */
  --couleur-texte: #2b2b2b;               /* Couleur du texte courant */
  --couleur-principale: #8a3b2f;          /* Couleur d'accent (liens, boutons) */
  --couleur-bandeau: #ffffff;             /* Fond des bandeaux haut et bas */
  --couleur-bouton-texte: #ffffff;        /* Texte des boutons pleins (fond coloré) : blanc */
  --couleur-icone-fond: #ffffff;          /* Fond des icônes ajouter/retirer du panier */
  --couleur-icone-texte: #000000;         /* Couleur du symbole des icônes panier */
  --couleur-prix: #8a3b2f;                /* Couleur du prix affiché */
  --couleur-voile: rgba(0,0,0,.85);       /* Voile sombre derrière les images agrandies */
  --couleur-avis-fond: #fff3cd;           /* Fond du bandeau d'avis (session expirée) */
  --couleur-avis-texte: #5c4400;          /* Texte du bandeau d'avis */
  --couleur-menu-haut: #ffffff;           /* Boutons du menu : couleur du haut du dégradé */
  --couleur-menu-bas: #e6e0d8;            /* Boutons du menu : couleur du bas du dégradé */
  --couleur-menu-texte: #2b2b2b;          /* Boutons du menu : couleur du texte */
  --couleur-menu-bordure: #cfc7bc;        /* Boutons du menu : fine bordure */
  --couleur-menu-tranche: #bdb4a8;        /* Boutons du menu : « épaisseur » (tranche) du bouton en 3D */
  --ombre-menu: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 0 var(--couleur-menu-tranche), 0 6px 10px rgba(0,0,0,.2); /* Bouton au repos : reflet, tranche, ombre portée */
  --ombre-menu-survol: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 0 var(--couleur-menu-tranche), 0 9px 14px rgba(0,0,0,.25); /* Bouton survolé : plus haut */
  --ombre-menu-actif: inset 0 2px 5px rgba(0,0,0,.3), 0 1px 0 var(--couleur-menu-tranche); /* Bouton enfoncé : creusé */
  --couleur-burger: #000000;              /* Icône du bouton burger (fond transparent) : noir */
  --couleur-bordure: #e3ddd5;             /* Couleur des filets et bordures */
  --police: system-ui, "Segoe UI", sans-serif; /* Police de caractères */
  --taille-base: 1rem;                    /* Taille de texte de base */
  --hauteur-haut: 72px;                   /* Hauteur du bandeau supérieur */
  --hauteur-bas: 44px;                    /* Hauteur du bandeau inférieur */
  --rayon: 8px;                           /* Arrondi des coins */
  --ombre: 0 2px 10px rgba(0,0,0,.12);    /* Ombre légère des bandeaux et cartes */
  --ombre-forte: 0 8px 28px rgba(0,0,0,.25); /* Ombre forte (survol, zoom) */
  --duree-fondu: .4s;                     /* Durée du fondu des pages asynchrones */
  --espace: 1rem;                         /* Espacement standard */
  --largeur-max: 1100px;                  /* Largeur maximale du contenu */
}
* { box-sizing: border-box; }             /* Les largeurs incluent marges internes et bordures */
html { scroll-behavior: smooth; }         /* Défilement doux vers les ancres */
body { margin: 0; font: var(--taille-base)/1.6 var(--police); background: var(--couleur-fond); color: var(--couleur-texte); } /* Base de la page */
a { color: var(--couleur-principale); }   /* Couleur des liens */

header#haut, footer#bas {                 /* Les deux bandeaux */
  position: fixed; left: 0; right: 0;     /* Fixés et étirés sur toute la largeur */
  background: var(--couleur-bandeau); box-shadow: var(--ombre); /* Fond et ombre */
  display: flex; align-items: center; justify-content: space-between; /* Alignement en ligne */
  padding: 0 var(--espace); z-index: 10;  /* Marges internes et priorité d'affichage */
}
header#haut { top: 0; height: var(--hauteur-haut); }   /* Bandeau supérieur collé en haut */
footer#bas { bottom: 0; height: var(--hauteur-bas); font-size: .9rem; gap: var(--espace); } /* Bandeau inférieur collé en bas */
footer#bas a { margin-left: var(--espace); } /* Espace entre les liens du pied */
.logo { font-weight: 700; font-size: 1.2rem; text-decoration: none; } /* Logo texte */
.logo img { height: 40px; display: block; } /* Logo image */
nav#nav { display: flex; align-items: center; gap: var(--espace); } /* Navigation en ligne ; l'espace entre le menu, Panier et le compte vient d'ici */
.menu { display: flex; gap: var(--espace); list-style: none; margin: 0; padding: 0; } /* Liste du menu (plus de marge à droite : gérée par le gap de nav#nav) */
nav a {                                   /* Entrées du menu et liens Panier/Compte : boutons en relief */
  display: inline-block; text-decoration: none; font-weight: 600; /* Bloc en ligne, sans soulignement */
  color: var(--couleur-menu-texte); padding: .45rem .9rem; border-radius: var(--rayon); /* Texte, marges internes, coins arrondis */
  background: linear-gradient(to bottom, var(--couleur-menu-haut), var(--couleur-menu-bas)); /* Dégradé = effet de volume */
  border: 1px solid var(--couleur-menu-bordure); box-shadow: var(--ombre-menu); /* Bordure fine + relief */
  text-shadow: 0 1px 0 rgba(255,255,255,.7); /* Léger relief du texte */
  transition: transform .12s, box-shadow .12s; /* Animation douce survol/clic */
}
nav a:hover { transform: translateY(-1px); box-shadow: var(--ombre-menu-survol); } /* Survol : le bouton se soulève */
nav a:active { transform: translateY(2px); box-shadow: var(--ombre-menu-actif); } /* Clic : le bouton s'enfonce */
nav a:focus-visible { outline: 2px solid var(--couleur-principale); outline-offset: 2px; } /* Navigation au clavier */
#burger { display: none; background: none; color: var(--couleur-burger); border: 0; font-size: 1.6rem; cursor: pointer; } /* Burger caché sur grand écran */

main#principal {
  scrollbar-gutter: stable;                 /* Réserve la place de la barre : pas de décalage quand elle disparaît */                          /* Zone scrollable entre les bandeaux */
  position: fixed; top: var(--hauteur-haut); bottom: var(--hauteur-bas); left: 0; right: 0; /* Occupe l'espace libre */
  overflow-y: auto; scroll-behavior: smooth; /* Défilement vertical doux */
}
main section { max-width: var(--largeur-max); margin: 0 auto; padding: calc(var(--espace) * 3) var(--espace); } /* Sections centrées */
#async { position: fixed; top: var(--hauteur-haut); bottom: var(--hauteur-bas); left: 0; right: 0; overscroll-behavior: contain; z-index: 5; background: var(--couleur-fond); padding: var(--espace); overflow-y: auto; opacity: 0; transition: opacity var(--duree-fondu); } /* Calque FIXE entre les bandeaux, indépendant du défilement du site : il ne le modifie jamais. Calque des pages asynchrones, invisible au départ */
body.async-ouvert main#principal { overflow-y: hidden; scrollbar-gutter: stable; } /* Site figé dessous (sa position de défilement est conservée) */
#async.visible { opacity: 1; }            /* Fondu entrant */
#async[hidden] { display: none; }         /* Respecte l'attribut hidden */
.fermer-async { float: right; }           /* Bouton de fermeture de la page asynchrone */
.boite { max-width: 480px; margin: 2rem auto; padding: var(--espace); background: var(--couleur-bandeau); border-radius: var(--rayon); box-shadow: var(--ombre); } /* Boîte de formulaire */
.boite label { display: block; margin-bottom: .6rem; } /* Un champ par ligne */
.boite input { display: block; width: 100%; padding: .5rem; } /* Champs pleine largeur */
.erreur { color: #b00020; }               /* Message d'erreur */
button { background: var(--couleur-principale); color: var(--couleur-bouton-texte); border: 0; padding: .45rem .9rem; border-radius: var(--rayon); cursor: pointer; } /* Boutons */

.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--espace); } /* Barre de filtres */
.filtre, .pg { background: var(--couleur-bandeau); color: var(--couleur-texte); border: 1px solid var(--couleur-bordure); } /* Boutons de filtre inactifs */
.filtre.actif, .pg.actif { background: var(--couleur-principale); color: var(--couleur-bouton-texte); } /* Bouton actif */
.grille { display: grid; grid-template-columns: repeat(var(--colonnes, 3), 1fr); gap: var(--espace); } /* Grille : colonnes pilotées par PHP */
.carte { position: relative; cursor: zoom-in; margin: 0; background: var(--couleur-bandeau); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; transition: box-shadow .2s; } /* Carte image */
.carte:hover { box-shadow: var(--ombre-forte); } /* Survol */
.carte img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } /* Image uniforme */
.carte figcaption { padding: .5rem var(--espace); } /* Légende */
.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: var(--espace); } /* Pagination */

.diapo { text-align: center; }            /* Diaporama centré */
.diapo-rang { display: flex; align-items: center; justify-content: center; gap: var(--espace); } /* Flèches + image */
.diapo-img { max-width: min(70vw, 700px); max-height: 50vh; border-radius: var(--rayon); box-shadow: var(--ombre); cursor: zoom-in; } /* Image du diaporama */
.fleche { font-size: 1.4rem; background: var(--couleur-bandeau); color: var(--couleur-principale); box-shadow: var(--ombre); } /* Flèches */
#zoom { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; } /* Fond sombre du zoom */
#zoom[hidden] { display: none; }          /* Respecte hidden */
#zoom img { max-width: 94vw; max-height: 94vh; box-shadow: var(--ombre-forte); } /* Image agrandie */

@media (max-width: 720px) {               /* Petits écrans */
  #burger { display: block; }             /* Affiche le burger */
  nav#nav { display: none; position: absolute; top: var(--hauteur-haut); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--couleur-bandeau); box-shadow: var(--ombre); padding: var(--espace); } /* Menu déroulant masqué */
  nav#nav.ouvert { display: flex; gap: .8rem; } /* Menu ouvert : boutons espacés */       /* Menu visible quand ouvert */
  .menu { flex-direction: column; gap: .8rem; margin: 0; } /* Entrées empilées */
  nav a { display: block; text-align: center; } /* Boutons pleine largeur en mode burger */ /* Entrées empilées */
  .grille { grid-template-columns: repeat(2, 1fr); } /* 2 colonnes sur mobile */
}

.carte .prix, .fiche-prix { color: var(--couleur-prix); font-weight: 700; } /* Prix en couleur d'accent */
.icone-panier { background: var(--couleur-icone-fond); color: var(--couleur-icone-texte); box-shadow: var(--ombre); font-size: 1.1rem; padding: .3rem .5rem; } /* Icône panier (ajout/retrait) */
.carte .icone-panier { position: absolute; top: .5rem; right: .5rem; } /* Placée en haut à droite de la carte */
.icone-panier[data-etat="retrait"] { outline: 2px solid var(--couleur-principale); } /* Contour quand l'article est déjà dans le panier */
.icone-panier[hidden] { display: none; } /* Respecte l'attribut hidden malgré le display du bouton */
#fiche { position: fixed; inset: 0; z-index: 20; background: var(--couleur-voile); display: flex; align-items: center; justify-content: center; padding: var(--espace); } /* Fond sombre de la fiche */
#fiche[hidden] { display: none; } /* Respecte hidden */
.fiche-contenu { position: relative; background: var(--couleur-bandeau); border-radius: var(--rayon); box-shadow: var(--ombre-forte); padding: var(--espace); max-width: min(94vw, 760px); max-height: 94vh; overflow-y: auto; text-align: center; } /* Boîte de la fiche */
.fiche-img { max-width: 100%; max-height: 55vh; border-radius: var(--rayon); } /* Image agrandie */
.fiche-fermer { position: absolute; top: .5rem; right: .5rem; } /* Bouton de fermeture */
.fiche-titre { margin: 0 2rem var(--espace); } /* Titre au-dessus, avec place pour le bouton */
#avis { position: fixed; top: var(--hauteur-haut); left: 0; right: 0; z-index: 9; background: var(--couleur-avis-fond); color: var(--couleur-avis-texte); padding: .6rem var(--espace); text-align: center; box-shadow: var(--ombre); } /* Bandeau d'avis sous l'en-tête */
#avis[hidden] { display: none; } /* Respecte hidden */
#avis a { color: inherit; font-weight: 700; } /* Lien « Se reconnecter » */
.avis-fermer { background: none; color: inherit; padding: 0 .4rem; margin-left: .6rem; } /* Croix de fermeture de l'avis */