/* Toute transparence dorée passe par --gold-rvb, déclaré dans site.css.
   Une valeur écrite en dur ici ne suivrait pas la couleur choisie dans
   « Identité & contact » : le site se repeindrait à moitié. */
/* =====================================================================
   SOUTHLITE EVENT — SECTIONS DE PAGES
   Chargé après site.css. Contient uniquement ce qui est propre à une
   page (accueil pour l'instant ; catalogue/produit/prestation viendront
   aux étapes 2 et 3), pour ne pas gonfler le design system global.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO SLIDER (accueil)
   Hauteur fixe réservée dès le premier rendu : aucun CLS possible.
   --------------------------------------------------------------------- */
/* Lot 3 — `--hero-voile` est écrit en style inline sur la section par
   home.php, d'après le réglage « assombrissement » du back-office.
   La valeur de repli .45 reproduit exactement l'aspect d'avant le lot 3 :
   sans réglage en base, rien ne change à l'écran. */
.hero{position:relative;height:660px;overflow:hidden;background:var(--ink);--hero-voile:.45;}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;}
.hero-slide.is-active{opacity:1;pointer-events:auto;}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Dégradé plus dense à gauche : le texte reste lisible sur toute photo.
   Son opacité suit le réglage : .45 = densité d'origine, 0 = photo nue,
   .80 = photo très assombrie. Les navigateurs ramènent d'eux-mêmes une
   opacité calculée > 1 à 1, donc aucune valeur ne peut casser le rendu. */
.hero-slide::after{content:"";position:absolute;inset:0;
  opacity:calc(var(--hero-voile,.45) / .45);
  background:linear-gradient(90deg,rgba(10,9,8,.94) 0%,rgba(10,9,8,.74) 38%,rgba(10,9,8,.28) 72%,rgba(10,9,8,.42) 100%);}
/* Le dégradé suit le texte : inutile d'assombrir la gauche quand le
   titre est à droite. */
.hero-slide:has(.hero-texte--centre)::after{
  background:linear-gradient(90deg,rgba(10,9,8,.42) 0%,rgba(10,9,8,.86) 50%,rgba(10,9,8,.42) 100%);}
.hero-slide:has(.hero-texte--droite)::after{
  background:linear-gradient(270deg,rgba(10,9,8,.94) 0%,rgba(10,9,8,.74) 38%,rgba(10,9,8,.28) 72%,rgba(10,9,8,.42) 100%);}
.hero-slide-fallback{position:absolute;inset:0;
  background:radial-gradient(90% 70% at 72% 26%, rgba(var(--gold-rvb),.22), transparent 62%),
             linear-gradient(150deg,var(--ink-3),var(--ink) 70%);}
.hero-slide-fallback::before{content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 42px;}

.hero-content{position:relative;z-index:3;height:100%;max-width:var(--max);margin:0 auto;
  padding:0 28px;display:flex;align-items:center;}
/* Position du texte, choisie visuel par visuel dans « Bandeau accueil ».
   `gauche` est le comportement d'origine et reste la valeur par défaut. */
.hero-texte--gauche{justify-content:flex-start;}
.hero-texte--centre{justify-content:center;text-align:center;}
.hero-texte--centre .hero-copy p{margin-left:auto;margin-right:auto;}
.hero-texte--centre .hero-actions{justify-content:center;}
.hero-texte--droite{justify-content:flex-end;text-align:right;}
.hero-texte--droite .hero-copy p{margin-left:auto;}
.hero-texte--droite .hero-actions{justify-content:flex-end;}
/* Filet de sécurité : même avec l'assombrissement à 0, le titre reste
   lisible sur une photo claire. */
.hero-copy{max-width:660px;text-shadow:0 1px 18px rgba(10,9,8,.55);}
.hero-copy h1{font-size:var(--text-3xl);margin-top:18px;}
.hero-copy p{color:#ded4c0;font-size:var(--text-lg);margin-top:22px;max-width:46ch;line-height:1.65;}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}

/* Contrôles : numérotation, barre de progression, flèches */
.hero-bottom{position:absolute;left:0;right:0;bottom:0;z-index:4;
  max-width:var(--max);margin:0 auto;padding:0 28px 32px;
  display:flex;align-items:center;gap:22px;}
.hero-count{font-size:11px;letter-spacing:.2em;color:var(--muted);flex-shrink:0;}
.hero-count b{color:var(--gold-light);font-weight:700;}
.hero-progress{flex:1;height:1px;background:var(--line);position:relative;max-width:320px;}
/* `hidden` doit l'emporter sur le `flex:1` ci-dessus : slider.js retire la
   barre quand le défilement automatique est coupé. */
.hero-progress[hidden]{display:none;}
.hero-progress span{position:absolute;left:0;top:0;height:100%;width:0;background:var(--gold);transition:width .3s linear;}
.hero-arrows{display:flex;gap:10px;margin-left:auto;}
.hero-arrows button{width:44px;height:44px;border:1px solid var(--line);background:rgba(10,9,8,.4);
  color:var(--ivory);border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;transition:border-color var(--t-fast),color var(--t-fast);}
.hero-arrows button:hover{border-color:var(--gold);color:var(--gold-light);}
/* Mention discrète pour une image d'illustration (jamais intrusive). */
.hero-mention{position:absolute;right:28px;bottom:36px;z-index:4;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.7;}

/* ---------------------------------------------------------------------
   INTRO CATALOGUE
   --------------------------------------------------------------------- */
.intro-catalogue{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:end;}
.intro-catalogue h2{font-size:var(--text-2xl);margin-top:16px;}
.intro-catalogue .intro-side{color:var(--muted);font-size:var(--text-base);line-height:1.75;}
.intro-catalogue .intro-side .link-arrow{margin-top:18px;}

/* ---------------------------------------------------------------------
   MOSAÏQUE CATÉGORIES (asymétrique, pas une grille uniforme)
   --------------------------------------------------------------------- */
.mosaique{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.mos-item{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);
  display:block;min-height:250px;}
.mos-item.is-large{grid-column:span 2;grid-row:span 2;min-height:516px;}
.mos-item.is-wide{grid-column:span 2;}
.mos-item .media{position:absolute;inset:0;}
.mos-item .media img{width:100%;height:100%;}
.mos-item:hover .media img{transform:scale(1.05);}
.mos-item::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,.12) 30%,rgba(10,9,8,.88) 100%);}
.mos-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 26px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.mos-index{display:none;}
.mos-info h3{font-size:var(--text-xl);margin-top:0;}
.mos-item.is-large .mos-info h3{font-size:var(--text-2xl);}
.mos-count{font-size:13px;color:var(--muted);margin-top:8px;}
.mos-info svg{color:var(--gold);flex-shrink:0;transition:transform var(--t-fast);}
.mos-item:hover .mos-info svg{transform:translateX(5px);}

/* ---------------------------------------------------------------------
   ON PART DE VOTRE PROJET (section éditoriale par type d'événement)
   --------------------------------------------------------------------- */
.projet{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.projet-head{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:end;margin-bottom:52px;}
.projet-head h2{font-size:var(--text-2xl);margin-top:16px;}
.projet-head p{color:var(--muted);font-size:var(--text-base);line-height:1.75;}
.projet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.projet-item{padding:32px 28px 28px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--ink);display:flex;flex-direction:column;
  transition:background var(--t),border-color var(--t);}
.projet-item:hover{background:var(--ink-3);border-color:var(--line-strong);}
.projet-num{display:none;}
.projet-item h3{font-size:var(--text-lg);margin-top:0;}
.projet-item p{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.65;flex:1;}
.projet-item .link-arrow{margin-top:20px;font-size:13.5px;min-height:auto;}

/* ---------------------------------------------------------------------
   PRODUIT / PACK À LA UNE
   --------------------------------------------------------------------- */
.une{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;}
.une-photo{position:relative;min-height:460px;overflow:hidden;}
.une-photo .media{position:absolute;inset:0;}
.une:hover .une-photo .media img{transform:scale(1.03);}
.une-text{padding:56px 52px;background:var(--ink-2);display:flex;flex-direction:column;justify-content:center;}
.une-text h2{font-size:var(--text-2xl);margin-top:16px;}
.une-text p{color:var(--muted);margin-top:18px;font-size:15px;line-height:1.7;}
.une-prix{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);}
.une-prix .c-prix{font-size:28px;}
.une-text .hero-actions{margin-top:28px;}

/* ---------------------------------------------------------------------
   PACKS
   --------------------------------------------------------------------- */
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.packs-groupe + .packs-groupe{margin-top:52px;}

/* ---------------------------------------------------------------------
   CTA FINAL
   --------------------------------------------------------------------- */
.final{text-align:center;padding-block:clamp(5rem, 10vw, 9rem);position:relative;overflow:hidden;}
.final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 100% at 50% 100%, rgba(var(--gold-rvb),.11), transparent 70%);}
.final > .wrap{position:relative;z-index:2;}
.final h2{font-size:var(--text-3xl);max-width:16ch;margin:18px auto 0;}
.final p{color:var(--muted);margin-top:20px;max-width:54ch;margin-left:auto;margin-right:auto;}
.final .hero-actions{justify-content:center;margin-top:34px;}

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media(max-width:1024px){
  .mosaique{grid-template-columns:repeat(2,1fr);}
  .mos-item.is-large{grid-column:span 2;grid-row:auto;min-height:330px;}
  .mos-item.is-wide{grid-column:span 2;}
  .projet-grid{grid-template-columns:repeat(2,1fr);}
  .projet-item:nth-child(2){border-right:0;}
  .projet-item:nth-child(1),.projet-item:nth-child(2){border-bottom:1px solid var(--line);}
  .packs-grid{grid-template-columns:repeat(2,1fr);}
  .une{grid-template-columns:1fr;}
  .une-photo{min-height:340px;}
  .une-text{padding:40px 34px;}
}
@media(max-width:900px){
  .hero{height:560px;}
  .hero-content{padding:0 20px;}
  .hero-bottom{padding:0 20px 26px;}
  .hero-mention{right:20px;}
  .intro-catalogue,.projet-head{grid-template-columns:1fr;gap:28px;}
}
@media(max-width:560px){
  .hero{height:500px;}
  .hero-copy h1{font-size:clamp(28px,8vw,38px);}
  .hero-copy p{font-size:15px;margin-top:16px;}
  .hero-actions{margin-top:26px;}
  .hero-actions .btn{width:100%;}
  .hero-progress{display:none;}
  .mosaique{grid-template-columns:1fr;}
  .mos-item,.mos-item.is-large,.mos-item.is-wide{grid-column:span 1;min-height:260px;}
  .projet-grid{grid-template-columns:1fr;}
  .projet-item{border-right:0;border-bottom:1px solid var(--line);}
  .projet-item:last-child{border-bottom:0;}
  .packs-grid{grid-template-columns:1fr;}
  .une-text{padding:32px 22px;}
  .final{padding:76px 0;}
  .final .hero-actions .btn{width:100%;}
}

/* =====================================================================
   ÉTAPE 2 — CATALOGUE, CATÉGORIES, FICHE PRODUIT, MA SÉLECTION
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO COMPACT CATALOGUE / CATÉGORIE
   --------------------------------------------------------------------- */
.cat-hero{padding:44px 0 56px;}
.cat-hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;}
.cat-hero-copy h1{font-size:var(--text-3xl);margin:16px 0 20px;}
.cat-hero-count{display:inline-block;margin-top:24px;font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--gold);border:1px solid var(--gold-line);
  border-radius:var(--r-full);padding:8px 18px;}
.cat-hero-photo{position:relative;}
.cat-hero-photo .media{aspect-ratio:3/2;border:1px solid var(--line);border-radius:var(--r-lg);}

.cat-outils{padding:0 0 48px;}
.dispo-bar{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin-bottom:26px;}
.dispo-bar-intro p{color:var(--muted);font-size:15px;margin-top:10px;line-height:1.6;}
.dispo-bar-champs{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.dispo-bar-champs label{margin-bottom:8px;}
.dispo-bar-champs .btn{border:none;cursor:pointer;}

/* Produits indisponibles : lisibles, jamais invisibles, jamais une erreur. */
.c-produit-wrap{display:flex;flex-direction:column;gap:10px;}
.c-produit-wrap.est-complet .c-produit{border-color:var(--line);opacity:.82;}
.c-produit-wrap.est-complet .media img{filter:saturate(.55) brightness(.62);}
.c-produit-wrap.est-complet .c-produit h3,
.c-produit-wrap.est-complet .c-prix{color:var(--muted);}
.c-produit-wrap.est-complet .c-fleche{opacity:.5;}
.c-stock-neutre{background:rgba(164,154,142,.2);color:var(--ivory);}
.c-produit-alt{font-size:13px;padding-left:2px;min-height:auto;}
.bloc-complets{margin-top:clamp(3rem, 5vw, 4rem);padding-top:clamp(2.5rem, 4vw, 3rem);
  border-top:1px solid var(--line);}

/* ---------------------------------------------------------------------
   FICHE PRODUIT
   --------------------------------------------------------------------- */
.pdt{padding:34px 0 clamp(3.5rem, 6vw, 5rem);}
.pdt-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:60px;align-items:start;}
.pdt-galerie .gallery-main{aspect-ratio:4/3;}
.stock-flag-ok{background:rgba(var(--gold-rvb),.16);color:var(--gold-light);}

.pdt-infos h1{font-size:var(--text-2xl);margin:14px 0 0;}
.pdt-chapo{color:var(--muted);font-size:var(--text-lg);margin-top:18px;line-height:1.7;}
.pdt-ref{display:block;margin-top:16px;font-size:13.5px;letter-spacing:0;
  text-transform:none;color:var(--muted);}

.pdt-prix-bloc{margin-top:30px;padding:28px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-lg);}
.pdt-prix{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.pdt-prix .amount{font-family:var(--ff-titre);font-size:clamp(30px,3.2vw,40px);
  font-weight:400;color:var(--gold);line-height:1;}
.pdt-prix .unit{font-size:15px;color:var(--muted);}
.pdt-prix .c-prix-prefix{width:100%;margin-bottom:0;}
.pdt-prix-note{width:100%;font-size:14px;color:var(--muted);margin-top:10px;line-height:1.6;}
.pdt-prix-bloc .price-note{margin-top:12px;}
.qty-row{display:flex;align-items:center;gap:16px;margin-top:24px;}
.qty-label{font-size:14px;letter-spacing:0;text-transform:none;color:var(--muted);}
.pdt-aide{font-size:13.5px;color:var(--muted);margin-top:14px;line-height:1.6;}

.pdt-dispo{margin-top:28px;padding:26px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--ink-2);}
.pdt-dispo-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:16px;}
.pdt-dispo-form label{margin-bottom:8px;}
.pdt-dispo-form .btn{cursor:pointer;}
#dispoResultat{margin-top:16px;font-size:15px;color:var(--muted);min-height:22px;}
#dispoResultat.ok{color:var(--gold);}
#dispoResultat.ko{color:#e0857f;}

/* Spécifications en paires clé/valeur (jamais un tableau) */
.pdt-specs{margin-top:32px;border-top:1px solid var(--line);}
.pdt-spec{display:flex;justify-content:space-between;gap:22px;padding:14px 0;border-bottom:1px solid var(--line);}
.pdt-spec dt{font-size:14.5px;color:var(--muted);}
.pdt-spec dd{font-size:14.5px;font-weight:500;text-align:right;}

.pdt-detail{padding-block:var(--section-y);border-top:1px solid var(--line);}
.pdt-detail-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:58px;align-items:start;}
.pdt-texte{color:var(--muted);font-size:var(--text-base);line-height:1.8;margin-top:20px;
  max-width:var(--content-narrow);}

/* ---------------------------------------------------------------------
   MA SÉLECTION
   --------------------------------------------------------------------- */
.selection{padding:40px 0 90px;}
.selection-liste{display:flex;flex-direction:column;}
.sel-ligne{display:grid;grid-template-columns:120px 1fr auto auto;gap:24px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line);}
.sel-visuel .media{aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r);}
.sel-visuel .media-fallback{padding:12px;}
/* .mf-nom n'est plus écrit dans les vignettes de la sélection : la
   règle qui le dimensionnait ne servait plus à rien. 8px pour la
   marque était de toute façon sous le seuil du lisible. */
.sel-visuel .mf-marque{font-size:10px;margin-top:5px;}
.sel-nom{font-family:var(--ff-titre);font-size:var(--text-lg);font-weight:600;
  letter-spacing:-.01em;line-height:1.3;display:block;}
a.sel-nom:hover{color:var(--gold);}
.sel-tag{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:0;text-transform:none;
  color:var(--gold);border:1px solid var(--line);border-radius:2px;padding:3px 8px;}
.sel-unite{display:block;font-size:13.5px;color:var(--muted);margin-top:8px;}
.sel-retirer{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-full);
  background:none;color:var(--muted);
  border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:color var(--t-fast),border-color var(--t-fast);}
.sel-retirer:hover{color:#e0857f;border-color:rgba(224,101,92,.5);}
.selection-actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;align-items:center;}
.selection-actions[hidden]{display:none;}
.selection-cta{margin-left:auto;}
.selection-vide{border:1px solid var(--line);border-radius:var(--r-lg);padding:64px 44px;text-align:center;
  background:radial-gradient(80% 120% at 50% 0%, rgba(var(--gold-rvb),.09), transparent 62%),var(--ink-2);}
.selection-vide h2{font-size:var(--text-2xl);margin:16px 0 14px;}
.selection-vide p{color:var(--muted);max-width:48ch;margin:0 auto;}
.selection-vide .hero-actions{justify-content:center;margin-top:30px;}

/* ---------------------------------------------------------------------
   RESPONSIVE ÉTAPE 2
   --------------------------------------------------------------------- */
@media(max-width:1024px){
  .pdt-grid{grid-template-columns:1fr;gap:38px;}
  .pdt-detail-grid{grid-template-columns:1fr;gap:32px;}
  .cat-hero-grid{grid-template-columns:1fr;gap:32px;}
  .cat-hero-photo{order:-1;}
}
@media(max-width:900px){
  .dispo-bar{grid-template-columns:1fr;gap:20px;}
  .dispo-bar-champs{width:100%;}
  .dispo-bar-champs > div{flex:1;min-width:140px;}
  .dispo-bar-champs .btn{width:100%;}
  .pdt-dispo-form > div{flex:1;min-width:140px;}
  .pdt-dispo-form .btn{width:100%;}
}
@media(max-width:560px){
  .cat-hero{padding:28px 0 40px;}
  .sel-ligne{grid-template-columns:88px 1fr;grid-template-areas:"visuel infos" "qte retirer";gap:16px;}
  .sel-visuel{grid-area:visuel;}
  .sel-infos{grid-area:infos;}
  .sel-qte{grid-area:qte;}
  .sel-retirer{grid-area:retirer;justify-self:end;}
  .selection-cta{margin-left:0;width:100%;}
  .selection-actions .btn{width:100%;}
  .selection-vide{padding:44px 22px;}
  .pdt-spec{flex-direction:column;gap:5px;}
  .pdt-spec dd{text-align:left;}
  .cta-row .btn{width:100%;flex:none;}
}

/* Période entièrement complète : le bloc devient le contenu principal,
   sans séparateur orphelin en haut de page. */
.bloc-complets.est-seul{margin-top:0;padding-top:0;border-top:0;}

/* ---------------------------------------------------------------------
   ZOOM À LA LOUPE SUR LA PHOTO PRINCIPALE (fiche produit)
   Le grossissement suit le curseur via transform-origin, piloté en JS.
   Désactivé au tactile et si l'utilisateur a demandé moins d'animations.
   --------------------------------------------------------------------- */
.gallery-main.est-zoomable{cursor:zoom-in;}
/* Le grossissement lui-même est défini dans site.css (CSS seul, sans JS).
   Ici on ne fait qu'optimiser le rendu quand le suivi du curseur est actif. */
.gallery-main.est-zoomable > img{will-change:transform;}
.zoom-indice{
  position:absolute;right:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--ivory);background:rgba(10,9,8,.66);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r-full);padding:7px 13px;
  transition:opacity .2s ease;pointer-events:none;
}
.gallery-main:hover .zoom-indice{opacity:0;}

/* Pas de loupe sur écran tactile : le doigt masquerait la zone observée. */
@media (hover:none),(pointer:coarse){
  .gallery-main.est-zoomable{cursor:default;}
  .gallery-main.est-zoomable.is-zoom img{transform:none;}
  .zoom-indice{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .gallery-main.est-zoomable.is-zoom img{transform:none;}
}

/* Quantité saisissable au clavier (fiche produit) */
.qty-select input#qtyValue{
  width:62px;min-height:44px;text-align:center;font-size:14px;font-weight:700;
  background:transparent;border:none;color:var(--ivory);padding:0;
  -moz-appearance:textfield;
}
.qty-select input#qtyValue::-webkit-outer-spin-button,
.qty-select input#qtyValue::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qty-select input#qtyValue:focus{outline:none;background:rgba(var(--gold-rvb),.08);}

/* =====================================================================
   ÉTAPE 3 — PRESTATION, DEVIS, FAQ, PAGES LÉGALES, 404, VILLE
   ===================================================================== */

/* ---------- HERO DE PAGE PRESTATION ---------- */
.presta-hero{height:clamp(520px, 62vh, 640px);}
/* L'image de fond doit remplir le cadre : sans ces règles elle s'affiche à
   sa taille naturelle et paraît écrasée. Le dégradé garantit la lisibilité
   du titre quelle que soit la photo. */
.presta-hero > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
/* Un seul voile, posé sur le bandeau lui-même.
   Il y en avait un second sur .hero-content, qui est limité à 1320px de
   large et centré : son voile s'arrêtait donc au bord du conteneur au
   lieu de couvrir l'écran, dessinant un rectangle sombre nettement
   visible sur les écrans larges. */
.presta-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,9,8,.94) 0%,rgba(10,9,8,.74) 38%,rgba(10,9,8,.30) 72%,rgba(10,9,8,.44) 100%);
}
.presta-hero .hero-content{position:relative;z-index:3;}
.presta-hero .hero-mention{z-index:4;}
.presta-fallback{
  background:
    radial-gradient(60% 55% at 72% 32%, rgba(245,187,92,.26), transparent 62%),
    radial-gradient(38% 34% at 40% 18%, rgba(var(--gold-rvb),.18), transparent 60%),
    linear-gradient(160deg,#1c1710,var(--ink) 72%);
}
.presta-fallback::after{
  content:"";position:absolute;inset:0;opacity:.42;
  background-image:
    radial-gradient(1.6px 1.6px at 22% 28%, var(--gold-light), transparent),
    radial-gradient(1.2px 1.2px at 63% 18%, var(--gold-light), transparent),
    radial-gradient(1.8px 1.8px at 78% 44%, var(--gold), transparent),
    radial-gradient(1.2px 1.2px at 44% 52%, var(--gold-light), transparent),
    radial-gradient(1.4px 1.4px at 88% 22%, var(--gold-light), transparent);
}

/* ---------- FAQ ---------- */
.faq-liste{border-top:1px solid var(--line);max-width:900px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;cursor:pointer;list-style:none;min-height:44px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-q{font-family:var(--ff-titre);font-size:var(--text-lg);font-weight:600;
  letter-spacing:-.01em;line-height:1.35;}
.faq-item summary:hover .faq-q{color:var(--gold);}
.faq-chevron{color:var(--gold);flex-shrink:0;transition:transform var(--t-fast);}
.faq-item[open] .faq-chevron{transform:rotate(180deg);}
.faq-r{padding:0 0 26px;max-width:72ch;}
.faq-r p{color:var(--muted);font-size:var(--text-base);line-height:1.8;}
.faq-mention{
  margin-top:36px;max-width:900px;padding:22px 26px;
  border-left:2px solid var(--gold);background:var(--ink-2);border-radius:0 var(--r) var(--r) 0;
  font-size:14.5px;color:var(--muted);line-height:1.75;
}

/* ---------- PAGE DEVIS ---------- */
.devis-page{padding:40px 0 clamp(4rem, 7vw, 6rem);}
.devis-page h1{font-size:var(--text-2xl);margin:16px 0 20px;}
.devis-contact{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);}
.devis-contact .eyebrow{display:flex;margin-bottom:16px;}
.devis-contact-lien{
  display:inline-flex;align-items:center;min-height:44px;margin-right:24px;
  font-size:15px;color:var(--gold-light);
}
.devis-contact-lien:hover{text-decoration:underline;}
.devis-rgpd{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.55;}
.devis-rgpd a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;}

/* ---------- PAGES LÉGALES ----------
   Lot P7. Les !important ont disparu avec les styles écrits dans les
   balises : ils ne servaient qu'à reprendre la main sur eux. Une page
   qu'on lit par obligation mérite au moins d'être lisible — d'où la
   colonne étroite, l'interligne large et les titres qui se détachent
   sans crier. */
.legal{padding:36px 0 90px;}
.legal-wrap{max-width:var(--content-narrow);}
.legal-titre{font-size:clamp(28px,3.6vw,42px);margin:14px 0 10px;}
.legal-maj{font-size:12.5px;color:var(--faint);margin-bottom:30px;
  letter-spacing:.04em;}
.legal-titre + .legal-corps{margin-top:30px;}

.legal-corps{display:flex;flex-direction:column;gap:34px;color:var(--muted);}
.legal-bloc h2{font-size:15px;letter-spacing:.03em;color:var(--ivory);
  font-family:var(--ff-sans);font-weight:600;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line);}
.legal-bloc p + p{margin-top:12px;}
.legal p,.legal li{font-size:15px;line-height:1.85;}
.legal-liste{margin:12px 0 12px 20px;display:flex;flex-direction:column;gap:7px;}
.legal a{color:var(--gold);text-underline-offset:3px;}
.legal a:hover{text-decoration:underline;}

/* ---------- 404 ---------- */
.page-404{padding:120px 0 110px;text-align:center;position:relative;overflow:hidden;}
.page-404::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 90% at 50% 0%, rgba(var(--gold-rvb),.12), transparent 70%);}
.page-404 > .wrap{position:relative;z-index:2;}
.page-404 h1{font-size:clamp(30px,5vw,58px);margin:16px 0 20px;}
.page-404 p{color:var(--muted);max-width:52ch;margin:0 auto;}
.page-404 .hero-actions{justify-content:center;margin-top:34px;}
.p404-liens{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:44px;padding-top:34px;border-top:1px solid var(--line);}

/* ---------- PAGE VILLE ----------
   Lot P7. Dernière page alignée sur la refonte : elle utilisait encore
   .section-tag, .cat-grid et .btn-ghost, hérités d'avant. */
/* La section de tête partageait .wrap-contenu (1080px) avec des
   sections en .wrap (1320px) : deux bords gauches différents sur la
   même page, visible au premier coup d'œil. Elles partagent maintenant
   .wrap, et c'est le texte qui est bridé, pas le conteneur. */
.ville-tete{padding-bottom:0;}
.ville-titre{font-size:clamp(28px,3.8vw,44px);margin:14px 0 20px;
  max-width:16ch;}
@media(min-width:700px){.ville-titre{max-width:20ch;}}
.ville-tete .lede,.ville-texte{max-width:var(--content-narrow);}
.ville-banniere{margin-top:30px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);}
.ville-banniere img{width:100%;height:auto;display:block;}
.ville-texte{margin-top:30px;color:var(--muted);font-size:var(--text-base);
  line-height:1.8;}
.ville-points{margin-top:32px;}
.ville-actions{margin-top:32px;}
.ville-autres{display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- RESPONSIVE ÉTAPE 3 ---------- */
@media(max-width:900px){
  .presta-hero{height:560px;}
  .faq-item summary{gap:16px;padding:20px 0;}
  .faq-q{font-size:15.5px;}
}
@media(max-width:560px){
  .presta-hero{height:520px;}
  .page-404{padding:80px 0 70px;}
  .page-404 .hero-actions .btn{width:100%;}
  .devis-contact-lien{display:flex;margin-right:0;}
  .faq-mention{padding:18px 20px;}
  .legal h2{font-size:16px!important;}
}

/* =====================================================================
   LOT C — ACCUEIL RECENTRÉ SUR LES ARTIFICES
   ===================================================================== */

/* ---------- BLOC DOMINANT « FEUX D'ARTIFICE » ---------- */
.showcase{
  background:var(--ink-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.showcase::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 70% at 88% 12%, rgba(var(--gold-rvb),.12), transparent 66%);
}
.showcase > .wrap{position:relative;z-index:2;}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.showcase-texte h2{font-size:clamp(30px,4.2vw,50px);margin:16px 0 22px;}
.showcase-texte > p{color:var(--muted);font-size:16px;line-height:1.75;max-width:52ch;}
.showcase-points{list-style:none;margin:28px 0 0;display:flex;flex-direction:column;gap:13px;}
.showcase-points li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:14.5px;color:var(--muted);line-height:1.55;
}
.showcase-points svg{color:var(--gold);flex-shrink:0;margin-top:4px;}
.showcase-texte .hero-actions{margin-top:34px;}
/* Format portrait : les tirs se photographient en hauteur. */
.showcase-photo .media{aspect-ratio:4/5;border:1px solid var(--line);border-radius:2px;}

/* ---------- FORMULES (Show Color Blast) ---------- */
.formules{padding-top:96px;}
.formules .packs-grid{gap:24px;}
/* Trois formules côte à côte, la centrale légèrement mise en avant. */
.formules .c-pack{border-color:rgba(245,187,92,.26);}
.formules .packs-grid > *:nth-child(2) .c-pack,
.formules .c-pack:nth-child(2){border-color:var(--gold);}
.formules .c-pack h3{font-size:24px;}
.formules .c-prix{font-size:26px;}

@media(max-width:1024px){
  .showcase-grid{grid-template-columns:1fr;gap:38px;}
  .showcase-photo{order:-1;max-width:460px;}
  .showcase-photo .media{aspect-ratio:3/2;}
}
@media(max-width:560px){
  .formules{padding-top:68px;}
  .showcase-texte .hero-actions .btn{width:100%;}
}

/* La carte pack entière est cliquable, sans imbriquer de lien dans un lien. */
.c-pack{position:relative;}
.c-pack-lien{position:absolute;inset:0;z-index:1;}
.c-pack-body{position:relative;z-index:2;pointer-events:none;}
.c-pack-body a,.c-pack-body button{pointer-events:auto;}
.pack-contenu{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);}
.add-btn-pack{width:auto;height:auto;border-radius:2px;}

/* ---------------------------------------------------------------------
   PRIX DÉGRESSIF (fiche produit, lot 4)
   Rien de tout ceci n'est rendu quand le produit n'a pas de dégressif.
   --------------------------------------------------------------------- */
.pdt-degressif{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
.pdt-degressif .eyebrow{display:block;margin-bottom:10px;}
.degressif-table{width:100%;border-collapse:collapse;font-size:14.5px;}
.degressif-table th,.degressif-table td{padding:7px 0;text-align:left;font-weight:400;}
.degressif-table th{color:var(--muted);}
.degressif-table td{text-align:right;color:var(--ivory);font-variant-numeric:tabular-nums;}
.degressif-table tr + tr th,.degressif-table tr + tr td{border-top:1px solid var(--line);}

/* Montant total sous le sélecteur de quantité : il suit la saisie. */
.pdt-estimation{
  margin-top:10px;font-size:13.5px;color:var(--gold-light);
  font-variant-numeric:tabular-nums;line-height:1.5;
}

/* ---------------------------------------------------------------------
   AVIS GOOGLE (accueil)
   Le bloc n'existe que si le lien de la fiche est renseigné : il n'y a
   donc jamais de carte vide à styler.
   --------------------------------------------------------------------- */
.avis-google-carte{
  max-width:520px;margin:0 auto;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:40px 32px;background:var(--ink-2);
}

.avis-google-note{display:flex;align-items:baseline;justify-content:center;gap:6px;}
.avis-google-chiffre{
  font-family:var(--ff-titre);font-weight:400;
  font-size:clamp(44px,7vw,64px);line-height:1;color:var(--gold);
}
.avis-google-sur{font-size:15px;color:var(--muted);}

/* Étoiles proportionnelles — la seule mécanique du site.
   Une note de 4,5 doit montrer quatre étoiles et demie, pas cinq.
   Arrondir vers le haut flatte le vendeur et trompe le visiteur ; la
   fiche produit le faisait encore alors que le bloc Google, lui, était
   déjà proportionnel. Les deux écrans disent maintenant la même chose. */
.etoiles,.avis-google-etoiles{
  position:relative;display:inline-block;
  font-size:20px;line-height:1;white-space:nowrap;
}
.avis-google-etoiles{margin-top:14px;}
.etoiles .fond,.avis-google-etoiles .fond{color:rgba(255,255,255,.16);letter-spacing:4px;}
/* La couche dorée est découpée à la largeur exacte de la note. */
.etoiles .remplissage,.avis-google-etoiles .remplissage{
  position:absolute;left:0;top:0;overflow:hidden;
  color:var(--gold);letter-spacing:4px;
}
/* Dans une fiche produit, les étoiles accompagnent une ligne de texte :
   elles suivent sa taille. */
.rating .etoiles{font-size:15px;}
.rating .etoiles .fond,.rating .etoiles .remplissage{letter-spacing:2px;}

.avis-google-compte{margin-top:14px;font-size:14px;color:var(--muted);}

.avis-google-carte .btn{margin-top:28px;}

@media(max-width:600px){
  .avis-google-carte{padding:30px 20px;}
  .avis-google-carte .btn{width:100%;}
}