/* ============================================================================
   SORBETTO — signature & sections (Direction C)
   Pastilles de parfum (disques CSS), hero produit lumineux, MARQUEE défilant,
   blobs flottants. Aucun cornet-fill (A), aucune carte-à-boule-témoin (B).
   ========================================================================== */

/* ----------------------- Grading PHOTO (mood SOBRE) --------------------- */
/* Traitement neutre, légèrement désaturé et chaud, cohérent sur toutes les
   photos. Le sobre ne doit jamais être criard : on baisse la saturation, on
   réchauffe d'un voile crème très ténu, on adoucit le contraste. La photo
   reste une VRAIE image (jamais masquée sans JS). */
.sb-photo { position: relative; overflow: hidden; }
.sb-photo > img,
.sb-photo > picture > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.82) contrast(0.96) brightness(1.02);
}
/* Voile crème ténu posé par-dessus (jamais un voile plein : laisse la photo
   candidate LCP et lisible). Désactivé là où la photo doit rester franche. */
.sb-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(243,237,228,0.10), rgba(243,237,228,0.18));
  mix-blend-mode: multiply;
}
.sb-photo--clean::after { display: none; }

/* ------------------- Boule de parfum (VRAI vecteur) --------------------- */
/* Boule de glace réaliste et brillante, issue du sprite #gi-scoop, recolorée
   par PARFUM via le trio --scoop-fill / --scoop-shade / --scoop-hl. Jamais un
   rond plat de couleur. Le viewBox 120×100 (base à y≈80) "déborde" un peu en
   bas : on monte le svg via la marge négative pour centrer la masse de la boule
   dans son cadre carré (pastilles, satellites…). */
.scoop {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 120 / 96;
  overflow: visible;
  /* léger contact au sol cohérent avec la lumière haut-gauche du sprite */
  filter: drop-shadow(0 6px 10px rgba(58, 46, 51, 0.16));
  /* trio par défaut = fraise (pastel) ; surchargé par .scoop--X ci-dessous */
  --scoop-fill:  var(--p-fraise);
  --scoop-shade: #D17486;
  --scoop-hl:    #FBD3D8;
  --scoop-spec:  #FFFFFF;
}
.scoop use { transform: translateY(2px); }

/* Trios PARFUM réalistes (pastel SORBETTO : chair claire, ombre teintée,
   reflet crémeux). Une boule ressemble à de la glace, pas au logo. */
/* Trios tamisés cohérents avec l'humeur SOBRE : chair adoucie, ombre teintée
   discrète, reflet crémeux. Une boule ressemble à de la glace, jamais criarde. */
.scoop--fraise    { --scoop-fill:#DDA39E; --scoop-shade:#B97A77; --scoop-hl:#F0D4CF; }
.scoop--vanille   { --scoop-fill:#ECDCB4; --scoop-shade:#CBB988; --scoop-hl:#FBF2D9; --scoop-spec:#FFFDF4; }
.scoop--chocolat  { --scoop-fill:#A9876B; --scoop-shade:#73553D; --scoop-hl:#C9AB91; --scoop-spec:#E5CCAE; }
.scoop--pistache  { --scoop-fill:#C3C9A4; --scoop-shade:#959B73; --scoop-hl:#DDE2C5; }
.scoop--caramel   { --scoop-fill:#DCB484; --scoop-shade:#AC8253; --scoop-hl:#EFD6B0; }
.scoop--framboise { --scoop-fill:#D89BA2; --scoop-shade:#B06D78; --scoop-hl:#EFCBD0; }
.scoop--coco      { --scoop-fill:#EDE6D8; --scoop-shade:#CFC5AE; --scoop-hl:#FBF6EC; --scoop-spec:#FFFFFF; --scoop-line:#DBD0BC; }
.scoop--noisette  { --scoop-fill:#CCAC8A; --scoop-shade:#9C7A57; --scoop-hl:#E5D0B7; }
.scoop--myrtille  { --scoop-fill:#B3A9C0; --scoop-shade:#857A98; --scoop-hl:#D6CFE0; }
.scoop--citron    { --scoop-fill:#E9DCA0; --scoop-shade:#C7B871; --scoop-hl:#F6EFC8; }

/* ================================ HERO ================================== */
/* Produit en vedette, lumineux : grande photo ronde + pastilles flottantes
   tout autour. Fond dégradé pastel doux. PAS de mot géant, PAS de split édito. */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 82% -10%, var(--surface-cream), transparent 64%),
    var(--surface-page);
  padding-block: var(--space-12) var(--space-14);
}
.hero__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center;
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}
.hero__copy { text-align: center; }
@media (min-width: 940px) { .hero__copy { text-align: left; } }

.hero__title {
  font-size: var(--fs-h1); margin-top: var(--space-4); letter-spacing: -0.02em;
}
.hero__title .accent { color: var(--accent-text); }
.hero__lead {
  margin-top: var(--space-5); font-size: var(--fs-lead); color: var(--encre-soft);
  max-width: 48ch; margin-inline: auto;
}
@media (min-width: 940px) { .hero__lead { margin-inline: 0; } }
.hero__actions {
  margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: center;
}
@media (min-width: 940px) { .hero__actions { justify-content: flex-start; } }
/* Bloc preuve : 2 groupes (distinction / note Google).
   Mobile : empilés, chacun sur sa ligne, centré, nowrap interne → jamais de
   wrap ragué au milieu d'un groupe. Desktop : alignés sur une ligne avec un
   séparateur vertical discret. */
.hero__proof {
  margin-top: var(--space-8); display: inline-flex; flex-direction: column; align-items: center;
  gap: 0.5rem; font-size: 0.95rem; color: var(--encre-soft);
  background: var(--surface-card); border: 1px solid var(--line);
  padding: 0.7rem 1.2rem; border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
}
.hero__proof-group {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
}
.hero__proof-div { display: none; }
.hero__proof strong { color: var(--encre); }
.hero__proof .badge { font-family: var(--font-display); font-weight: 700; color: var(--accent-text); }
.hero__proof-year { color: var(--encre-faint); }
.hero__proof .stars { color: #F0A93B; letter-spacing: 1px; }
/* 5e étoile à demi : moitié dorée (note 4,4 → ~4 étoiles et demie) */
.hero__proof .stars-half {
  background: linear-gradient(90deg, #F0A93B 50%, var(--line) 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__proof-score { font-family: var(--font-display); font-size: 1.05rem; }
.hero__proof-count { color: var(--encre-faint); font-size: 0.88rem; }

@media (min-width: 620px) {
  .hero__proof {
    flex-direction: row; align-items: center; gap: 0.85rem;
    border-radius: var(--r-pill); padding: 0.6rem 1.2rem;
  }
  .hero__proof-div {
    display: block; align-self: stretch; width: 1px; min-height: 1.4em;
    background: var(--line);
  }
}

/* Scène produit : photo ronde au centre, pastilles satellites flottantes.
   Tous les enfants sont en position:absolute -> on DOIT donner une largeur et
   une hauteur explicites à la scène, sinon elle s'effondre (width/height 0). */
.hero__stage { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin-inline: auto; }
@supports not (aspect-ratio: 1) { .hero__stage { height: 420px; } }
.hero__disc {
  position: absolute; inset: 8%; border-radius: var(--r-pill); overflow: hidden;
  box-shadow: var(--shadow-float);
  background: var(--creme);
  border: 8px solid var(--surface-card);
}
.hero__disc img { width: 100%; height: 100%; object-fit: cover; }
/* Halo sobre : un seul lavis crème-corail très doux, pas d'arc-en-ciel. */
.hero__halo {
  position: absolute; inset: 2%; border-radius: var(--r-pill); z-index: -1;
  background: radial-gradient(circle at 38% 32%, var(--corail-wash), var(--creme) 70%);
  filter: blur(26px); opacity: 0.9;
}
.hero__sat {
  position: absolute; width: 21%;
}
.hero__sat .scoop { filter: drop-shadow(0 12px 18px rgba(58, 46, 51, 0.22)); }
.hero__sat--1 { top: -3%;  left: 2%;   --float-dur: 6.5s; }
.hero__sat--2 { top: 6%;   right: -4%; --float-dur: 8s;   width: 17%; }
.hero__sat--3 { bottom: 2%; left: -4%; --float-dur: 7.2s; width: 18%; }
.hero__sat--4 { bottom: -4%; right: 6%; --float-dur: 9s;  }
@media (max-width: 520px) {
  .hero__stage { max-width: 320px; }
  .hero__sat--2 { right: 0; }
  .hero__sat--3 { left: 0; }
}

/* ====================== MARQUEE (signature ludique) ===================== */
/* Défilé horizontal des parfums en pastilles. Ne casse pas si les goûts
   changent (data-driven dans le DOM). Pause au survol/focus. translateX only.
   Coupé en reduced-motion (devient une rangée statique scrollable). */
.marquee {
  background: var(--surface-cream);
  border-block: 1px solid var(--line);
  padding-block: var(--space-8);
  overflow: hidden;
}
.marquee__viewport { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track {
  display: flex; gap: var(--space-6); width: max-content;
  animation: sb-marquee var(--mq-dur, 56s) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes sb-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; }
}
.no-js .marquee__track { animation: none; }

.mq-pill {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: var(--surface-card); border: 1px solid var(--line);
  padding: 0.6rem 1.3rem 0.6rem 0.6rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft); white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* micro-interaction : la pastille de parfum se rehausse au survol */
.mq-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--corail-soft); }
.mq-pill__scoop { transition: transform 0.3s var(--ease); }
.mq-pill:hover .mq-pill__scoop { transform: scale(1.06); }
.mq-pill__scoop { width: 46px; height: auto; flex: none; }
.mq-pill__name { font-family: var(--font-display); font-weight: 700; color: var(--encre); }
.mq-pill__note { color: var(--encre-faint); font-size: 0.85rem; margin-left: 0.3rem; }

/* ========================= BANDE PHOTO PLEINE LARGEUR =================== */
.band-photo { background: var(--surface-page); }
.band-photo__fig {
  position: relative; margin: 0;
  height: clamp(220px, 38vw, 460px);
  border-block: 1px solid var(--line);
}
.band-photo__fig > picture { display: block; width: 100%; height: 100%; }
.band-photo__fig > picture > img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim bas pour la lisibilité AA de la légende (texte blanc sur photo). */
.band-photo__fig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(28,24,20,0.62) 0%, rgba(28,24,20,0.12) 38%, transparent 64%);
}
.band-photo__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  max-width: var(--container); margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.5rem); color: #fff;
  line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.band-photo__kick {
  display: block; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #F4D2C7; margin-bottom: 0.4rem;
}

/* ============================ PROOF CHIPS =============================== */
.proof { background: var(--surface-page); }
/* Chiffre XXL — pic émotionnel, fait CANONIQUE (631 avis · 4,4★). Filet
   terracotta qui relie l'accroche au bloc de stats. */
.proof__headline {
  text-align: center; margin-bottom: var(--space-10);
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  position: relative; padding-bottom: var(--space-8);
}
.proof__headline::after {
  content: ""; width: 64px; height: 3px; border-radius: var(--r-pill);
  background: var(--accent); position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
}
.proof__big {
  font-family: var(--font-display); font-weight: 700; line-height: 0.95;
  font-size: clamp(3.2rem, 2rem + 7vw, 6.5rem); color: var(--accent-text);
  letter-spacing: -0.02em;
}
.proof__big-sub { font-family: var(--font-body); font-size: var(--fs-lead); color: var(--encre-soft); max-width: 30ch; }
.proof__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
}
@media (min-width: 760px) { .proof__grid { grid-template-columns: repeat(4, 1fr); } }
.proof__item {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--space-6) var(--space-4);
  text-align: center; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 0.4rem; align-items: center;
  min-height: 100%;
}
.proof__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); color: var(--accent-text); line-height: 1; }
.proof__num .ord { font-size: 0.5em; vertical-align: super; }
.proof__num-unit { font-size: 0.5em; color: var(--accent-text); }
.proof__badge {
  display: inline-flex; align-items: center; min-height: 2.8rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 0.78rem + 0.7vw, 1.18rem); line-height: 1.1;
  color: var(--accent-text); text-align: center;
}
.proof__item--distinction { background: var(--corail-soft); }
.proof__item--distinction .proof__badge { color: #7C3324; }
.proof__item--distinction .proof__label { color: var(--encre); }
.proof__label { font-size: 0.9rem; color: var(--encre-soft); line-height: 1.4; }

/* ============================ TOTEM (conviction) ======================== */
.totem { text-align: center; }
.totem__phrase {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.7rem); line-height: 1.25;
  max-width: 22ch; margin: var(--space-4) auto 0; color: var(--encre);
}
/* Mise en valeur sobre : pas de surligneur jaune, un trait d'accent sous le mot. */
.totem__phrase .hl {
  color: var(--accent-text);
  box-shadow: inset 0 -0.12em 0 var(--corail-soft);
}
.totem__sign { margin-top: var(--space-6); color: var(--encre-soft); font-size: 0.98rem; }

/* ========================= PASTILLES (carte parfums) =================== */
.flavors { background: var(--surface-mint); }
.flavors__head {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
  align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-10);
}
.flavors__grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .flavors__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px) { .flavors__grid { grid-template-columns: repeat(4, 1fr); } }

.pastille {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--space-6) var(--space-4) var(--space-4);
  text-align: center; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  min-height: 100%;
}
.pastille:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

/* Carte VEDETTE : le parfum signature occupe 2×2 cases → casse la grille trop
   sage, attire l'œil sans bruit (toujours sobre : crème + 1 filet corail). */
.pastille--feature {
  grid-column: span 2; grid-row: span 2;
  background:
    radial-gradient(420px 300px at 78% -10%, var(--corail-wash), transparent 70%),
    var(--surface-card);
  border-color: var(--corail-soft);
  justify-content: center; gap: 0.7rem;
}
.pastille--feature .pastille__scoop { width: clamp(120px, 24vw, 188px); }
.pastille--feature .pastille__name { font-size: clamp(1.3rem, 1rem + 1.6vw, 1.9rem); min-height: 0; margin-top: 0.2rem; }
.pastille--feature .pastille__note { font-size: 1rem; max-width: 26ch; color: var(--encre-soft); }
.pastille__ribbon {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-accent);
  background: var(--accent); padding: 0.3rem 0.85rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 639px) {
  /* Sur 2 colonnes mobiles, une carte 2×2 occuperait toute la largeur sur
     deux rangées : OK, elle reste belle et lisible. */
  .pastille--feature { grid-row: span 1; }
}
.pastille__scoop { width: 92px; height: auto; margin-bottom: 0.3rem; }
/* la boule se rehausse + tourne à peine au survol → effet vivant mais retenu */
.pastille:hover .pastille__scoop { transform: translateY(-3px) scale(1.05) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) {
  .pastille:hover .pastille__scoop { transform: none; }
}
.pastille__scoop { transition: transform 0.3s var(--ease); }
/* On réserve une hauteur cohérente pour la zone nom : un nom long
   ("Pistache, ricotta & orange") occupe la même hauteur qu'un nom court
   ("Vanille") → tag aligné en bas sur toutes les pastilles, zéro quinconce. */
.pastille__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--encre);
  display: flex; align-items: center; justify-content: center;
  min-height: 2.7em; line-height: 1.25;
}
.pastille__note { font-size: 0.85rem; color: var(--encre-faint); }
.pastille__tag {
  margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text);
  background: var(--corail-wash); padding: 0.25rem 0.7rem; border-radius: var(--r-pill);
}
.flavors__foot { margin-top: var(--space-10); text-align: center; }

/* ============================== CAKES =================================== */
.cakes__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; }
@media (min-width: 880px) { .cakes__grid { grid-template-columns: 1fr 1fr; } }
.cakes__copy { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

/* Photo de GÂTEAU (le produit vendu) — exception assumée aux boules vectorisées :
   sur la page/section gâteaux, on montre le vrai produit. */
.cakes__photo {
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card); border: 8px solid var(--surface-card);
  max-width: 460px; margin-inline: auto;
}
.cakes__photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }

/* ------------------- Composition de boules vectorisées ----------------- */
/* Remplace les photos « gâteau » par une scène propre, sobre : un disque crème
   et trois boules vectorisées posées dessus. Aucune photo moche, signature
   100 % vecteur, cohérente avec l'humeur minimale. */
.scoop-scene {
  position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; margin-inline: auto;
}
@supports not (aspect-ratio: 1) { .scoop-scene { height: 440px; } }
.scoop-scene__disc {
  position: absolute; inset: 6%; border-radius: var(--r-pill);
  background: radial-gradient(circle at 38% 30%, var(--surface-card), var(--creme) 78%);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.scoop-scene__main {
  position: absolute; width: 50%; left: 25%; top: 18%; z-index: 2;
}
.scoop-scene__main .scoop { filter: drop-shadow(0 12px 20px rgba(44,40,36,0.18)); }
.scoop-scene__sat { position: absolute; width: 26%; z-index: 1; }
.scoop-scene__sat .scoop { filter: drop-shadow(0 10px 16px rgba(44,40,36,0.16)); }
.scoop-scene__sat--a { left: 8%;  bottom: 14%; --float-dur: 9s;  }
.scoop-scene__sat--b { right: 6%; bottom: 20%; --float-dur: 10.5s; width: 23%; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.season-pill {
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  background: var(--surface-card); border: 1px solid var(--corail-soft);
  color: var(--accent-text); padding: 0.4rem 0.95rem; border-radius: var(--r-pill);
}

/* ============================== AWARDS ================================= */
.awards__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; }
@media (min-width: 880px) { .awards__grid { grid-template-columns: 0.85fr 1.15fr; } }
.awards__photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); border: 8px solid var(--surface-card); }
.awards__photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.awards__title { font-size: var(--fs-h2); margin-top: var(--space-3); }
.awards__lead { margin-top: var(--space-4); color: var(--encre-soft); font-size: var(--fs-lead); }

.timeline { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.timeline__row {
  display: grid; grid-template-columns: 84px 1fr; gap: var(--space-4); align-items: baseline;
  padding: var(--space-4); background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-soft);
}
.timeline__year { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--accent-text); }
.timeline__txt { color: var(--encre); }
.timeline__txt span { display: block; color: var(--encre-soft); font-size: 0.95rem; margin-top: 0.2rem; }
.ord { font-size: 0.65em; vertical-align: super; }

/* ============================== SHOPS =================================== */
.shops__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-10); }
@media (min-width: 760px) { .shops__grid { grid-template-columns: 1fr 1fr; } }
.shop {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--space-8); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.shop__name { font-family: var(--font-display); font-size: var(--fs-h3); }
.shop__rating { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--encre-soft); }
.shop__rating .stars { color: #F0A93B; }
.shop__row { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--encre-soft); }
.shop__row svg { color: var(--accent-text); flex: none; margin-top: 2px; }
.shop__row b { color: var(--encre); }
.shop__row a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.shop__row a:hover { text-decoration: underline; text-underline-offset: 3px; }
.shop__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: var(--space-2); }

/* ============================== REVIEWS ================================ */
.reviews { background: var(--surface-rose); }
.reviews__head { text-align: center; margin-bottom: var(--space-10); }
.reviews__score .stars { font-size: 1.6rem; color: #F0A93B; }
.reviews__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 760px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }
.review {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--space-6); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: var(--space-3); min-height: 100%;
}
.review__stars { color: #F0A93B; letter-spacing: 1px; }
.review__text { color: var(--encre); font-size: 1.05rem; }
.review__src { margin-top: auto; color: var(--encre-faint); font-size: 0.85rem; font-weight: 600; }

/* ============================ CTA FINAL ================================ */
.cta-final {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(720px 380px at 80% 110%, rgba(192,96,79,0.28), transparent 62%),
    var(--surface-invert);
  color: #F6F1EA;
}
.cta-final__title { font-size: var(--fs-h2); color: #fff; }
.cta-final__lead { margin: var(--space-4) auto 0; max-width: 52ch; color: rgba(255,255,255,0.92); font-size: var(--fs-lead); }
.cta-final__actions { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.cta-final .sk-btn--primary {
  background: #fff; color: var(--accent-hover);
  position: relative; overflow: hidden;
}
.cta-final .sk-btn--primary:hover { background: var(--creme); }
/* CTA spécial : un éclat traverse le bouton au survol */
.cta-final .sk-btn--primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.85) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform 0.6s var(--ease); pointer-events: none;
}
.cta-final .sk-btn--primary:hover::after { transform: translateX(130%); }
@media (prefers-reduced-motion: reduce) {
  .cta-final .sk-btn--primary::after { display: none; }
}
.cta-final__blob {
  position: absolute; border-radius: var(--r-pill); background: rgba(255,255,255,0.12);
  pointer-events: none;
}
.cta-final__blob--1 { width: 180px; height: 180px; top: -60px; left: -40px; }
.cta-final__blob--2 { width: 120px; height: 120px; bottom: -40px; right: 8%; }