/* Festy'Box Gourmandises — l'habillage du second univers.
 *
 * Il ne repart pas de zéro : le noir, l'or, les boutons, l'en-tête et le pied
 * de page viennent de style.css, et c'est voulu. Deux chartes graphiques
 * auraient donné deux entreprises, alors qu'il n'y en a qu'une.
 *
 * Ce qui s'ajoute ici, c'est la chaleur : un caramel qui accompagne l'or, des
 * angles plus ronds, des vignettes appétissantes. La même maison, mais la
 * pièce où ça sent bon.
 *
 * ÉCRIT POUR LE TÉLÉPHONE D'ABORD. La plupart des gens arriveront par un lien
 * Facebook ou Instagram, le pouce sur l'écran : les tailles de base sont celles
 * du mobile, et les écrans larges ne font qu'élargir. */

/* La boutique fixe ses couleurs, et ne les emprunte à personne.
 *
 * Les thèmes saisonniers du site changent le fond, le texte et l'accent douze
 * fois dans l'année : crème clair à l'été, presque noir à Halloween. Une
 * boutique n'a pas à changer d'allure au fil des saisons — on doit la
 * reconnaître du premier coup d'œil, et le cahier des charges demande le noir,
 * l'or et le blanc. Ces valeurs sont donc réaffirmées ici, et les pages
 * Gourmandises ne chargent pas theme.js.
 *
 * Les mises en avant saisonnières se feront par des BLOCS qu'on allume et
 * qu'on éteint — une box de Noël, un menu de Pâques — pas en repeignant tout. */
:root{
  --bg:#080808;
  --panel:#111009;
  --panel2:#17140f;
  --line:#3b3020;
  --gold:#d6aa55;
  --gold2:#f2d28c;
  --text:#fff7e8;
  --muted:#b9ac96;
  --gourmand:#e0904a;      /* le caramel : chaleur, pas remplacement de l'or */
  --gourmand-clair:#f3b878;
  --creme:#fdf6ea;
}

/* ---------- l'en-tête du second univers ---------- */

.g-nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.g-nav a{color:var(--muted);font-size:13.5px;font-weight:600;letter-spacing:.03em}
.g-nav a:hover,.g-nav a[aria-current="page"]{color:var(--gourmand-clair)}

/* Sur téléphone, le menu passe sous le logo et défile horizontalement plutôt
   que de se replier sur cinq lignes qui mangeraient l'écran. Les libellés y
   sont plus petits : à la taille de l'ordinateur, deux entrées remplissaient
   la largeur et le reste du menu passait inaperçu. */
@media(max-width:900px){
  .site-header{flex-wrap:wrap;gap:8px;padding:11px 16px}
  .brand img{height:36px}
  .g-nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;gap:15px;padding-bottom:3px;scrollbar-width:none}
  .g-nav::-webkit-scrollbar{display:none}
  .g-nav a{font-size:12.5px;white-space:nowrap}
  .lien-univers{font-size:11.5px;padding:4px 10px}
}

/* ---------- bandeau d'information ---------- */

/* Week-end seulement, retrait sur place, pas de livraison : ces trois phrases
   doivent être lues AVANT de commencer, pas découvertes au paiement. */
.g-bandeau{
  background:linear-gradient(90deg,rgba(224,144,74,.16),rgba(214,170,85,.10));
  border-bottom:1px solid var(--line);
  padding:9px 16px;
  text-align:center;
  font-size:13px;
  color:var(--gold2);
}
.g-bandeau strong{color:var(--gourmand-clair)}

/* ---------- hero ---------- */

.g-hero{
  display:grid;grid-template-columns:1fr;gap:22px;align-items:center;
  padding:34px 0 26px;
}
/* Sur grand écran, le texte et la photo se partagent la largeur — mais
   seulement s'il Y A une photo. Sans elle, la colonne de droite serait un vide
   payé par le texte, réduit de moitié pour rien. */
@media(min-width:900px){ .g-hero.avec-photo{grid-template-columns:1.05fr .95fr;gap:36px} }
.g-hero h1{font-size:clamp(30px,8vw,54px);margin:6px 0 10px;line-height:1.06}
.g-hero p.chapo{color:var(--muted);font-size:15.5px;margin:0 0 18px;max-width:36em}
.g-hero-visuel{
  position:relative;
  border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(150deg,#2a1d10,#120d08);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
}
.g-hero-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-hero-visuel .emoji{font-size:clamp(70px,22vw,140px);filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}

/* La vedette : la Grande Box. Elle doit paraître généreuse et évidente. */
.g-vedette{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(224,144,74,.15),rgba(214,170,85,.07));
  border:1px solid rgba(224,144,74,.4);
  border-radius:18px;padding:16px 18px;margin:6px 0 18px;
}
.g-vedette .titre{font-family:"Playfair Display",Georgia,serif;font-size:21px;margin:0}
.g-vedette .prix{font-size:30px;font-weight:800;color:var(--gourmand-clair);line-height:1}
.g-vedette .detail{color:var(--muted);font-size:13.5px;margin:2px 0 0}

/* ---------- sections ---------- */

.g-section{padding:30px 0}
.g-section > h2{font-size:clamp(22px,5vw,30px);margin:0 0 6px}
.g-section > p.intro{color:var(--muted);margin:0 0 20px;max-width:44em}

.g-categories{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.g-categorie{
  border:1px solid var(--line);background:var(--panel);border-radius:99px;
  padding:9px 16px;color:var(--muted);font-size:13.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
}
.g-categorie[aria-pressed="true"]{border-color:var(--gourmand);color:var(--gourmand-clair);background:rgba(224,144,74,.12)}
.g-categorie.bientot{opacity:.45}

/* ---------- les produits ---------- */

.g-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.g-produit{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s;
}
.g-produit:hover{border-color:var(--gourmand);transform:translateY(-3px)}
.g-produit.vedette{border-color:rgba(224,144,74,.55);box-shadow:0 0 0 1px rgba(224,144,74,.2)}

.g-vignette{aspect-ratio:4/3;position:relative;background:linear-gradient(150deg,#2a1d10,#120d08)}
/* La pastille de secours occupe tout le cadre ; la photo se pose par-dessus et
   se retire d'elle-même si le fichier manque. */
.g-vignette-vide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:56px}
.g-vignette-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-etiquette{
  position:absolute;top:10px;left:10px;background:var(--gourmand);color:#241a08;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;
}
.g-rupture{position:absolute;inset:0;background:rgba(8,8,8,.72);display:flex;align-items:center;justify-content:center;
  color:var(--gold2);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase}

.g-produit .corps{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.g-produit h3{margin:0;font-family:"Playfair Display",Georgia,serif;font-size:19px;letter-spacing:0}
.g-produit .quantite{color:var(--gourmand-clair);font-size:13px;font-weight:700}
.g-produit .desc{color:var(--muted);font-size:13.5px;margin:0;flex:1}
.g-produit .bas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.g-produit .prix{font-size:22px;font-weight:800;color:var(--text)}

.g-allergenes{font-size:11.5px;color:var(--muted);opacity:.85}

/* ---------- boutons ---------- */

.g-btn{
  border:0;border-radius:99px;padding:11px 18px;font-weight:700;font-size:14px;
  background:linear-gradient(120deg,var(--gourmand),var(--gold));color:#241a08;
  transition:transform .15s,filter .15s;
}
.g-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.g-btn:disabled{opacity:.4;transform:none;filter:none;cursor:not-allowed}
.g-btn.fantome{background:transparent;border:1px solid var(--gold);color:var(--gold2)}
.g-btn.large{width:100%;padding:14px;font-size:15.5px}

/* ---------- la personnalisation ---------- */

.g-choix{display:flex;flex-wrap:wrap;gap:8px}
.g-choix button{
  border:1px solid var(--line);background:transparent;border-radius:99px;
  padding:8px 14px;color:var(--muted);font-size:13px;font-weight:600;
}
.g-choix button[aria-pressed="true"]{border-color:var(--gourmand);background:rgba(224,144,74,.16);color:var(--gourmand-clair)}
.g-choix button:disabled{opacity:.35;cursor:not-allowed}
.g-libelle-choix{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--gold2);font-weight:700;margin:0 0 8px}
.g-compte-choix{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}

/* ---------- fenêtre de personnalisation ---------- */

.g-modale{
  position:fixed;inset:0;z-index:60;background:rgba(4,4,4,.78);
  display:flex;align-items:flex-end;justify-content:center;padding:0;
}
.g-modale-boite{
  background:var(--panel2);border:1px solid var(--line);border-radius:20px 20px 0 0;
  width:100%;max-width:520px;max-height:92vh;overflow-y:auto;padding:20px 18px 24px;
}
@media(min-width:640px){
  .g-modale{align-items:center;padding:20px}
  .g-modale-boite{border-radius:20px}
}
.g-modale h3{margin:0 0 2px;font-size:22px}
.g-modale .bloc{margin:18px 0}

/* ---------- panier et créneaux ---------- */

.g-panier-ligne{
  display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);
}
.g-panier-ligne .infos{flex:1;min-width:0}
.g-panier-ligne .nom{font-weight:700;font-size:15px}
.g-panier-ligne .garniture{color:var(--muted);font-size:12.5px}
.g-qte{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.g-qte button{background:transparent;border:0;color:var(--gold2);width:32px;height:32px;font-size:17px;line-height:1}
.g-qte span{min-width:22px;text-align:center;font-weight:700;font-size:14px}

.g-etapes{counter-reset:etape;display:grid;gap:14px}
.g-etape{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;
}
.g-etape > h3{margin:0 0 12px;font-size:17px;display:flex;align-items:center;gap:10px}
.g-etape > h3::before{
  counter-increment:etape;content:counter(etape);
  width:26px;height:26px;flex:0 0 26px;border-radius:99px;
  background:var(--gourmand);color:#241a08;font-size:14px;font-weight:800;
  display:grid;place-items:center;font-family:Inter,sans-serif;
}

.g-jours{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.g-jour{
  border:1px solid var(--line);background:transparent;border-radius:12px;padding:10px 6px;
  color:var(--text);text-align:center;line-height:1.25;
}
.g-jour small{display:block;color:var(--muted);font-size:11px;text-transform:capitalize}
.g-jour b{font-size:17px;font-weight:800}
.g-jour[aria-pressed="true"]{border-color:var(--gourmand);background:rgba(224,144,74,.16)}
.g-jour:disabled{opacity:.28;cursor:not-allowed}

.g-creneaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.g-creneau{
  border:1px solid var(--line);background:transparent;border-radius:10px;padding:11px 4px;
  color:var(--text);font-weight:700;font-size:14px;
}
.g-creneau[aria-pressed="true"]{border-color:var(--gourmand);background:rgba(224,144,74,.16);color:var(--gourmand-clair)}
.g-creneau:disabled{opacity:.26;cursor:not-allowed;text-decoration:line-through}

.g-champ{margin-bottom:12px}
.g-champ label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gold2);font-weight:700;margin-bottom:5px}
.g-champ input,.g-champ textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;color:var(--text);font:inherit;font-size:15px;
}
.g-champ input:focus,.g-champ textarea:focus{outline:0;border-color:var(--gourmand)}
.g-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.g-duo{grid-template-columns:1fr}}

.g-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;font-size:15px}
.g-total strong{font-size:26px;color:var(--gourmand-clair)}

.g-erreur{
  background:rgba(200,80,80,.13);border:1px solid rgba(200,80,80,.45);
  border-radius:12px;padding:11px 14px;color:#f0b4b4;font-size:14px;margin:12px 0;
}
.g-info{
  background:rgba(214,170,85,.08);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;color:var(--muted);font-size:13.5px;
}
.g-vide{text-align:center;color:var(--muted);padding:40px 20px}
.g-vide .emoji{font-size:52px;display:block;margin-bottom:12px}

/* ---------- la passerelle vers l'événementiel ---------- */

.g-passerelle{
  background:linear-gradient(140deg,rgba(214,170,85,.13),rgba(8,8,8,0));
  border:1px solid var(--line);border-radius:22px;padding:26px 20px;margin:34px 0;
}
.g-passerelle h2{margin:6px 0 8px;font-size:clamp(21px,5vw,30px)}
.g-passerelle p{color:var(--muted);max-width:44em;margin:0 0 16px}
.g-passerelle ul{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.g-passerelle li{
  border:1px solid var(--line);border-radius:99px;padding:7px 14px;
  font-size:13px;color:var(--gold2);background:rgba(214,170,85,.06);
}

/* ---------- comment ça marche ---------- */

.g-marche{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.g-marche .pas{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.g-marche .num{
  width:30px;height:30px;border-radius:99px;background:var(--gourmand);color:#241a08;
  font-weight:800;display:grid;place-items:center;margin-bottom:10px;
}
.g-marche h3{margin:0 0 5px;font-size:16px;font-family:Inter,sans-serif;letter-spacing:0}
.g-marche p{margin:0;color:var(--muted);font-size:13.5px}

/* ---------- tableau des allergènes ---------- */

.g-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table.g-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
table.g-table th,table.g-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
table.g-table th{color:var(--gold2);font-size:11px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
table.g-table tr:last-child td{border-bottom:0}
table.g-table td.presents{color:var(--gourmand-clair);font-weight:600}

/* La mention réglementaire d'un colorant. Elle doit se voir sans hurler : on
   n'effraie pas quelqu'un qui achète de la barbe à papa, on l'informe. */
.g-avertissement{
  margin:12px 0 0;padding:10px 12px;
  background:rgba(224,144,74,.12);border:1px solid rgba(224,144,74,.4);
  border-radius:10px;color:var(--gourmand-clair);font-size:12.5px;line-height:1.45;
}
/* Les listes déroulantes de la boutique suivent les champs de saisie : sans
   cela, le navigateur impose sa propre allure, claire et étrangère à la page. */
.g-champ select{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;color:var(--text);font:inherit;font-size:15px;
}
.g-champ select:focus{outline:0;border-color:var(--gourmand)}