/* ============================================================
   LA-FEUILLE-POSÉE.CSS — Page projet La Feuille Posée (CBD)
   Thème sombre + accent vert lime Grafitiks (base.css).
   Bordures 2px. Mise en page packagings non-standard.
   ============================================================ */

/* ── HERO ───────────────────────────────────────────────────── */
#hero {
  position: relative;
  height: clamp(560px, 80vh, 720px);
  margin-top: 99px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 78% center;
  scale: 1; transition: scale 9s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: scale, translate;
}
#hero.loaded .hero-bg img { scale: 1.08; }
.hero-bg::after {
  content: none; /* dégradé hero retiré */
}
.hero-content {
  position: absolute; inset: 0; z-index: 1;
  max-width: var(--content-max); margin: 0 auto;
  padding: clamp(48px,7vh,84px) var(--content-pad) 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 16px;
}
.hero-name { display: flex; flex-direction: column; line-height: 1.02; }
.hero-line1 { display: flex; align-items: center; gap: 12px; }
.hero-name span, .hero-line1 > span {
  font-family: var(--font-main); font-weight: 700;
  font-size: clamp(46px, 5.3vw, 75px); color: var(--white);
  letter-spacing: 0.005em; display: block; overflow: hidden;
}
.hero-name span em, .hero-line1 > span em {
  display: block; font-style: normal; transform: translateY(110%);
  transition: transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
#hero.loaded .hero-name span em, #hero.loaded .hero-line1 > span em { transform: translateY(0); }
#hero.loaded .hero-name > span:nth-child(2) em { transition-delay: 0.12s; }
#hero.loaded .hero-name > span:nth-child(3) em { transition-delay: 0.24s; }
.hero-spark {
  color: var(--accent); display: inline-flex; flex-shrink: 0; margin-top: 0;
  opacity: 0; animation: sparkPulse 3s ease-in-out infinite;
  transition: opacity 0.6s var(--transition) 0.3s;
}
#hero.loaded .hero-spark { opacity: 0.95; }
@keyframes sparkPulse { 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.35) rotate(15deg)} }
.hero-desc {
  font-size: 16px; font-weight: 500; color: var(--gray); line-height: 1.7; max-width: 440px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.7s var(--transition) 0.45s, transform 0.7s var(--transition) 0.45s;
}
#hero.loaded .hero-desc { opacity: 1; transform: translateY(0); }

/* ── COLONNE TEXTE + FEATURES (Défi / Approche) ─────────────── */
.split-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 56px; row-gap: 0;
}
.split-grid .section-label { grid-column: 1; grid-row: 1; }
.split-grid .section-title { grid-column: 1; grid-row: 2; align-self: start; }
.split-grid .section-desc  { grid-column: 1; grid-row: 3; align-self: start; padding-top: 6px; max-width: 320px; }
.feat-row {
  grid-column: 2; grid-row: 1 / 4;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  align-self: center;
}
.feat-desc { max-width: 160px; }
.feat {
  display: flex; flex-direction: column; gap: 12px;
}
.feat-icon { width: 34px; height: 34px; color: var(--accent); }
.feat-icon img { width: 100%; height: 100%; object-fit: contain; }
.feat-num { font-size: 16px; font-weight: 500; color: var(--accent); }
.feat-title { font-size: 14.2px; font-weight: 700; color: var(--white); letter-spacing: 0.04em; }
.feat-desc { font-size: 13px; color: var(--gray); line-height: 1.55; }

/* ── SECTION 03 — IDENTITÉ VISUELLE ─────────────────────────── */
.identite-top {
  display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start;
  margin-top: 8px;
}
.identite-text .section-title { margin-bottom: 16px; }
.identite-logo { display: flex; align-items: center; justify-content: center; }
.identite-logo img { width: 100%; height: auto; }
.transmet-label { font-size: 16px; font-weight: 500; color: var(--accent); margin: 56px 0 20px; }
.transmet-row {
  display: flex;
  background: #111110;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.transmet {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 26px 22px;
  border-right: 1px solid var(--border);
}
.transmet:last-child { border-right: none; }
.transmet-icon { width: 38px; height: 38px; flex-shrink: 0; color: var(--accent); }
.transmet-icon img { width: 100%; height: 100%; object-fit: contain; }
.transmet-text { display: flex; flex-direction: column; gap: 5px; }
.transmet-title { font-size: 13.5px; font-weight: 700; color: var(--white); letter-spacing: 0.04em; }
.transmet-desc { font-size: 12px; color: var(--gray); line-height: 1.5; }

/* ── PACKAGINGS — communs ───────────────────────────────────── */
.pack-pill {
  display: inline-flex; align-items: center; align-self: flex-start;
  border: 2px solid var(--accent);
  font-size: 12px; letter-spacing: 0.07em;
  padding: 8px 18px; border-radius: var(--radius-pill);
  margin-bottom: 28px; gap: 4px;
}
.pill-accent { color: var(--accent); font-weight: 700; }
.pill-light  { color: var(--white);  font-weight: 400; }
.pack-block { margin-top: 40px; }
.pack-mini { display: flex; flex-direction: column; gap: 10px; }
.pack-mini-icon { width: 30px; height: 30px; color: var(--accent); }
.pack-mini-icon img { width: 100%; height: 100%; object-fit: contain; }
.pack-mini-title { font-size: 13.8px; font-weight: 700; color: var(--white); letter-spacing: 0.03em; }
.pack-mini-desc { font-size: 12px; color: var(--gray); line-height: 1.45; }

/* sous-titres de colonnes (LES ILLUSTRATIONS / DU CROQUIS / LE RÉSULTAT) */
.pack-col-title { font-size: 16px; font-weight: 500; color: var(--accent); margin-bottom: 18px; }
.pack-result-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.pack-result-item .chk {
  flex-shrink: 0; width: 22px; height: 22px; border: 1.5px solid var(--accent);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.pack-result-item .chk svg { width: 11px; height: 11px; color: var(--accent); }
.pack-result-item p { font-size: 13px; color: var(--gray); line-height: 1.45; }

/* ── SECTION 04a — GRAINES ──────────────────────────────────── */
/* Nouveau layout 2 colonnes depuis le haut : texte gauche, mockups droite */
.pack-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.pack-left { display: flex; flex-direction: column; }
.pack-left .section-label { margin-bottom: 8px; }
.pack-left .section-title { margin-bottom: 20px; }
.pack-left .pack-pill { margin-bottom: 20px; }
.pack-left .section-desc { margin-bottom: 32px; }
/* ── Mockups graines — animation perspective + float ── */
.graines-mockups {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  perspective: 900px;
}
/* Annule les transitions base [data-anim] sur le conteneur */
.graines-mockups[data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Wrapper externe : simple conteneur de flux, JAMAIS de clip → la carte peut
   flotter/pivoter librement sans qu'aucun bord ne la coupe */
.card-clip {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
/* Wrapper interne : porte les transforms (rotate, scale, float) ET le reflet.
   overflow:hidden ici clippe le reflet aux coins arrondis de la carte tout en
   suivant ses mouvements (le clip bouge avec la carte, donc rien n'est coupé) */
.card-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity;
}
/* Image naturelle — hauteur auto, pas de crop */
.card-wrap img {
  width: 100%; height: auto; display: block;
}

/* Reflet retiré : le balayage blanc débordait sur le fond noir autour des
   packagings (marges transparentes des mockups). Plus aucun reflet. */

/* États initiaux sur le card-wrap */
.card-wrap:nth-child(1) { transform: translateY(60px) rotate(-6deg) scale(0.88); }
.card-wrap:nth-child(2) { transform: translateY(80px) rotate(5deg) scale(0.88); }

/* Animations sur card-wrap : la carte flotte entièrement, overflow:hidden ne coupe rien */
.graines-mockups.is-visible .card-wrap:nth-child(1) {
  animation: cardEntry1 1s cubic-bezier(0.16,1,0.3,1) 0.2s forwards,
             cardFloat1 5s ease-in-out 1.2s infinite;
}
.graines-mockups.is-visible .card-wrap:nth-child(2) {
  animation: cardEntry2 1s cubic-bezier(0.16,1,0.3,1) 0.4s forwards,
             cardFloat2 5s ease-in-out 1.4s infinite;
}
@keyframes cardEntry1 {
  from { opacity: 0; transform: translateY(60px) rotate(-6deg) scale(0.88); }
  to   { opacity: 1; transform: rotate(-2deg) translateY(0) scale(1); }
}
@keyframes cardEntry2 {
  from { opacity: 0; transform: translateY(80px) rotate(5deg) scale(0.88); }
  to   { opacity: 1; transform: rotate(1.5deg) translateY(0) scale(1); }
}
@keyframes cardFloat1 {
  0%,100% { transform: rotate(-2deg) translateY(0); }
  50%     { transform: rotate(-1deg) translateY(-14px); }
}
@keyframes cardFloat2 {
  0%,100% { transform: rotate(1.5deg) translateY(0); }
  50%     { transform: rotate(2.5deg) translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .card-wrap { opacity: 1; transform: none; }
  .graines-mockups.is-visible .card-wrap { animation: none; }
  .card-wrap::after { display: none; }
}
.graines-minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pack-block { margin-top: 88px; }
/* Vidéos entre les sous-sections packaging — pleine largeur de la page
   (full-bleed : sort du max-width/padding de la section), même marge verticale
   que .pack-block. overflow-x:hidden sur html/body → pas de scroll horizontal. */
.pack-video {
  margin-top: 88px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.pack-video video {
  display: block; width: 100%;
  /* Desktop : hauteur recadrée d'environ un tiers (crop haut/bas, centré) —
     la vidéo n'est pas redimensionnée, object-fit:cover recadre seulement. */
  aspect-ratio: 8 / 3;
  object-fit: cover;
  object-position: center;
  background: #000;
}

/* ── Illustrations : grille fixe des 12 vignettes, puis rangée croquis/résultat ── */
.illus-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 20px; margin-bottom: 48px;
}
/* Réutilise le style .illus-cs-item (coins arrondis, hover, overlay zoom) mais
   en cellule de grille : on annule le width flex du carousel et on force le carré. */
.illus-thumbs .illus-cs-item { width: auto; aspect-ratio: 1 !important; border-color: var(--border); }
/* Croquis (gauche) + résultat (droite) sous la grille, dans un encadré */
.illus-sr {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: start;
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 36px 40px;
}
/* ── (styles carousel .illus-cs-* conservés ci-dessous, réutilisés par la grille) ── */
.illus-cs-wrap {
  position: relative;
  overflow: hidden;
}
.illus-cs-track {
  display: flex;
  gap: 12px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.illus-cs-item {
  flex: 0 0 auto;
  width: calc(33.333% - 8px); /* fallback avant JS — écrasé par style inline */
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: border-color 0.18s ease;
}
.illus-cs-item:hover { border-color: var(--accent); }
.illus-cs-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.illus-cs-item:hover img { transform: scale(1.06); }
.illus-cs-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.18s ease;
  display: flex; align-items: center; justify-content: center;
}
.illus-cs-item:hover .illus-cs-overlay { background: rgba(0,0,0,0.42); }
.illus-cs-zoom {
  opacity: 0; color: white;
  transform: scale(0.7);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.illus-cs-zoom svg { width: 24px; height: 24px; }
.illus-cs-item:hover .illus-cs-zoom { opacity: 1; transform: scale(1); }
/* Contrôles */
.illus-cs-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; margin-top: 16px;
}
.illus-cs-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--gray); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  padding: 0;
}
.illus-cs-btn:hover { border-color: var(--accent); background: var(--accent); transform: scale(1.08); }
.illus-cs-btn svg { width: 12px; height: 12px; color: var(--gray); transition: color 0.2s; }
.illus-cs-btn:hover svg { color: var(--bg); }
.illus-cs-dots { display: flex; gap: 10px; align-items: center; }
.illus-cs-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray); cursor: pointer; border: none;
  transition: background 0.25s, transform 0.25s;
}
.illus-cs-dot.active { background: var(--accent); transform: scale(1.2); }

/* Croquis → flèche */
.croquis-imgs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-bottom: 16px; }
.croquis-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid var(--border); }
.croquis-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.18);
  flex-shrink: 0; color: var(--white);
}
.croquis-arrow svg { width: 13px; height: 13px; }

/* Lightbox */
.illus-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
}
.illus-lb-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.88);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.illus-lb-img-wrap {
  position: relative; z-index: 1;
  max-width: 86vw; max-height: 78vh;
  display: flex; align-items: center; justify-content: center;
}
.illus-lb-img {
  max-width: 100%; max-height: 78vh;
  border-radius: 12px; display: block; object-fit: contain;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
}
/* Bouton fermer */
.illus-lb-close {
  position: fixed; top: 20px; right: 24px; z-index: 10;
  background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);
  color: var(--white); width: 36px; height: 36px; border-radius: 50%;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.illus-lb-close:hover { background: rgba(255,255,255,0.2); }
/* Flèches précédent / suivant */
.illus-lb-arrow {
  position: fixed; top: 50%; z-index: 10;
  transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.25);
  color: var(--white); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, color 0.2s;
}
.illus-lb-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); transform: translateY(-50%) scale(1.08); }
.illus-lb-arrow svg { width: 15px; height: 15px; }
.illus-lb-prev { left: 24px; }
.illus-lb-next { right: 24px; }
/* Dots */
.illus-lb-dots {
  position: relative; z-index: 1;
  display: flex; gap: 8px; align-items: center;
}
.illus-lb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.35); border: none; cursor: pointer;
  transition: background 0.2s, transform 0.2s; padding: 0;
}
.illus-lb-dot.active { background: var(--white); transform: scale(1.3); }
.croquis-desc { font-size: 13px; color: var(--gray); line-height: 1.5; }

/* ── SECTION 04b — BONBONS ──────────────────────────────────── */
.bonbons-intro {
  display: grid; grid-template-columns: 210px 1fr 1fr; gap: 36px; align-items: center;
  margin-top: 8px;
}
/* Images à droite : s'étirent sur toute la hauteur de la bouteille */
.bonbons-illus { align-self: stretch; }
.bonbons-features { display: flex; flex-direction: column; gap: 12px; }
.bonbons-feature { display: flex; gap: 14px; align-items: flex-start; }
/* Colonne gauche bonbons : texte compact pour tenir dans la hauteur de la bouteille */
.bonbons-features .section-desc { font-size: 13px; line-height: 1.5; }
.bonbons-features .pack-mini-title { font-size: 12.5px; }
.bonbons-features .pack-mini-desc  { font-size: 11px; }
/* Icônes bonbons — les SVG ont déjà leur propre cercle */
.bonbons-feature .pack-mini-icon {
  width: 34px; height: 34px; flex-shrink: 0;
}
.bonbons-jar { display: flex; align-items: center; }
.bonbons-jar img { width: 100%; height: auto; }
.bonbons-illus {
  display: flex; flex-direction: column; gap: 14px;
  justify-content: center;
}
.bonbons-illus-item {
  overflow: hidden;
  border-radius: var(--radius-md); cursor: pointer; position: relative;
  aspect-ratio: 16 / 8;
  transition: transform 0.3s ease;
}
.bonbons-illus-item:nth-child(1) {
  border: 2px solid rgba(185, 50, 255, 0.7);
  box-shadow: 0 0 22px rgba(185, 50, 255, 0.22);
}
.bonbons-illus-item:nth-child(2) {
  border: 2px solid rgba(255, 140, 30, 0.7);
  box-shadow: 0 0 22px rgba(255, 140, 30, 0.22);
}
.bonbons-illus-item:hover { transform: scale(1.02); }
.bonbons-illus-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bonbons-bottom { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; margin-top: 44px; align-items: start; border: 2px solid var(--border); border-radius: 20px; padding: 36px 40px; }
/* 2 paires de croquis côte à côte */
.croquis-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; }
.croquis-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }

/* ── SECTION 04c — POCHETTE ─────────────────────────────────── */
.pochette-intro { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: stretch; margin-top: 8px; }
/* Colonne gauche : pill + texte + tagline + features, espacement aéré */
.pochette-intro > :first-child {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 32px;
}
.pochette-intro > :first-child .pack-pill { margin-bottom: 0; }
.pochette-tagline { font-size: 17px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; margin: 0; }
.pochette-features { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
/* Feature pochette : icône compacte en haut, titre centré (2 lignes max) */
.pochette-feat { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pochette-feat-icon { width: 36px; height: 36px; }
.pochette-feat-icon img { width: 100%; height: 100%; object-fit: contain; }
.pochette-feat .pack-mini-title { font-size: 11.5px; line-height: 1.35; }
.pochette-img { border-radius: var(--radius-md); overflow: hidden; max-width: 720px; justify-self: end; }
.pochette-img img { width: 100%; height: auto; display: block; }

/* ── SECTION 04d — visuels finaux ───────────────────────────── */
/* Les images remplissent la largeur proportionnellement à leur ratio (petit gap fixe).
   flex-grow ∝ ratio + aspect-ratio = ratio image → toutes à hauteur égale,
   le texte gauche est centré verticalement sur cette hauteur. */
.finals { display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: center; margin-top: 84px; }
.finals-bullets { display: flex; flex-direction: column; gap: 22px; }
.finals-bullet { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--gray); line-height: 1.5; }
.finals-bullet .plus { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.finals-imgs { display: flex; gap: 14px; align-items: flex-start; }
.finals-img-item {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md); cursor: pointer;
  border: 2px solid var(--border);
  flex: 0 1 0; min-width: 0;
  transition: border-color 0.18s ease;
}
.finals-img-item:hover { border-color: var(--accent); }
/* flex-grow proportionnel au ratio largeur/hauteur de chaque image → hauteurs égales */
.finals-img-item:nth-child(1) { flex-grow: 1;    aspect-ratio: 700 / 700; }
.finals-img-item:nth-child(2) { flex-grow: 0.74; aspect-ratio: 673 / 909; }
.finals-img-item:nth-child(3) { flex-grow: 1;    aspect-ratio: 700 / 700; }
.finals-img-item:nth-child(4) { flex-grow: 0.501; aspect-ratio: 579 / 1155; }
.finals-img-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.finals-img-item:hover img { transform: scale(1.04); }
.finals-img-item .illus-zoom {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.42)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='9' cy='9' r='6' stroke='white' stroke-width='1.5'/%3E%3Cline x1='13.5' y1='13.5' x2='19' y2='19' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='7' y1='9' x2='11' y2='9' stroke='white' stroke-width='1'/%3E%3Cline x1='9' y1='7' x2='9' y2='11' stroke='white' stroke-width='1'/%3E%3C/svg%3E")
    center / 22px no-repeat;
  opacity: 0; transition: opacity 0.18s ease; color: var(--white);
  width: 42px; height: 42px; border-radius: 50%;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.finals-img-item:hover .illus-zoom { opacity: 1; }

/* ── SECTION 05 — RÉSULTATS ─────────────────────────────────── */
.results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; }
.result-stat { display: flex; flex-direction: column; gap: 8px; }
.result-num { font-size: 44px; font-weight: 700; color: var(--accent); line-height: 1; }
.result-label { font-size: 12px; color: var(--gray); line-height: 1.5; letter-spacing: 0.02em; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLETTE (≤ 1024px)
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Tablette + mobile : vidéo en 16:9 complet (recadrage réservé au desktop) */
  .pack-video video { aspect-ratio: 16 / 9; }
  .split-grid { grid-template-columns: 260px 1fr; column-gap: 40px; }
  .feat-row { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .identite-top { grid-template-columns: 1fr; gap: 32px; }
  .transmet-row { flex-wrap: wrap; }
  .transmet { flex: 1 1 calc(50% - 2px); border-right: none; border-bottom: 1px solid var(--border); }
  .pack-layout, .bonbons-intro, .bonbons-bottom, .pochette-intro, .finals { grid-template-columns: 1fr; gap: 32px; }
  .bonbons-intro { grid-template-columns: 1fr 1fr; }
  .illus-grid-3 { grid-template-columns: 1fr; gap: 32px; }
  .finals-imgs { grid-template-columns: repeat(4, 1fr); }
  .results-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* (ancien carousel scroll-snap supprimé — remplacé par illus-cs-*) */

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Vidéos : plein largeur conservé, marge haut/bas divisée par 2 */
  .pack-video { margin-top: 44px; }
  .pack-video + .pack-block { margin-top: 44px; }

  /* ── Hero : image décalée gauche (fleur à droite), dégradé fort sur la gauche ── */
  #hero { height: auto; min-height: 74svh; margin-top: 72px; }
  .hero-content { padding: 56px var(--content-pad) 48px; }
  .hero-name span, .hero-line1 > span { font-size: clamp(38px, 13vw, 56px); }
  .hero-desc { font-size: 14px; max-width: 30ch; }
  .hero-bg img { object-position: 35% center; }
  .hero-bg::after {
    content: '';
    background:
      linear-gradient(90deg, rgba(13,13,12,0.97) 0%, rgba(13,13,12,0.88) 35%, rgba(13,13,12,0.45) 62%, transparent 82%),
      linear-gradient(0deg, rgba(13,13,12,0.7) 0%, transparent 35%),
      linear-gradient(180deg, rgba(13,13,12,0.55) 0%, transparent 16%);
  }

  /* ── Sections texte / split ── */
  .split-grid { display: flex; flex-direction: column; gap: 0; }
  .split-grid .section-desc { padding-top: 0; margin-bottom: 24px; max-width: 100%; }

  /* ── Feat-row : 2 colonnes, sauf approche (1 par ligne, sans carte) ── */
  .feat-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  #approche .feat-row { grid-template-columns: 1fr; gap: 18px; }

  /* ── Style carte ── feat / pack-mini / bonbons-feature ── */
  .feat,
  .pack-mini,
  .bonbons-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 12px;
    background: #111110;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px 18px;
    min-height: 250px;
  }
  /* bonbons-feature : supprime le wrapper div pour aligner comme pack-mini */
  .bonbons-feature > div { display: contents; }

  /* Pochette : un seul conteneur, lignes icône + titre (style transmet) */
  .pochette-features {
    display: flex !important;
    flex-direction: column !important;
    background: #111110;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    gap: 0;
  }
  .pochette-feat {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 16px !important;
    height: 88px !important;
    min-height: unset !important;
    padding: 0 22px !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .pochette-feat:last-child { border-bottom: none !important; }
  .pochette-feat-icon { width: 36px !important; height: 36px !important; flex-shrink: 0; }
  .pochette-feat .pack-mini-title {
    min-height: unset !important;
    margin: 0 !important;
    display: block !important;
    text-align: left !important;
    font-size: 13.5px;
  }
  /* Défi + pack-mini graines + bonbons features : contenu centré */
  #defi .feat,
  .graines-minis .pack-mini,
  .bonbons-features .bonbons-feature { justify-content: center; }


  /* Titres bonbons : centré, sans hauteur forcée */
  .bonbons-feature .pack-mini-title { display: block; text-align: center; }

  /* Approche : num + titre sur la même ligne, desc pleine largeur en dessous */
  #approche .feat {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 14px;
    background: none !important; border: none !important; border-radius: 0 !important;
    padding: 0 !important; min-height: unset !important;
    text-align: left !important;
    border-top: 1px solid var(--border); padding-top: 18px !important;
  }
  #approche .feat-num   { flex-shrink: 0; font-size: 15px; align-self: center; }
  #approche .feat-title { flex-shrink: 0; align-self: center; text-align: left; }
  #approche .feat-desc  { flex: 0 0 100%; margin-top: 8px; max-width: 100%; text-align: left; }
  .feat-icon, .pack-mini-icon, .pochette-feat-icon { width: 34px; height: 34px; }
  .bonbons-feature .pack-mini-icon { width: 34px; height: 34px; }

  /* ── Identité : transmet garde son style horizontal ── */
  .transmet { flex: 1 1 100%; border-right: none; }

  /* ── Graines : mockups entre texte descriptif et minis via display:contents ── */
  .pack-layout { display: flex; flex-direction: column; gap: 20px; }
  .pack-left    { display: contents; }
  .pack-layout .section-label { order: 1; margin-bottom: 0; }
  .pack-layout .section-title { order: 2; margin-bottom: 0; }
  .pack-layout .pack-pill     { order: 3; margin-bottom: 0; }
  .pack-layout .section-desc  { order: 4; margin-bottom: 0; }
  .graines-mockups            { order: 5; }
  .graines-minis              { order: 6; grid-template-columns: 1fr 1fr; gap: 14px; }
  /* Graines mockups : clip + float activé — reflet désactivé sur mobile */
  .card-clip { overflow: hidden; padding-top: 20px; transform: translateZ(0); }
  .card-wrap::after { display: none; }
  .card-wrap { overflow: hidden; }
  .graines-mockups.is-visible .card-wrap:nth-child(1) {
    animation: cardEntry1 1s cubic-bezier(0.16,1,0.3,1) 0.2s forwards,
               cardFloat1 5s ease-in-out 1.2s infinite;
  }
  .graines-mockups.is-visible .card-wrap:nth-child(2) {
    animation: cardEntry2 1s cubic-bezier(0.16,1,0.3,1) 0.4s forwards,
               cardFloat2 5s ease-in-out 1.4s infinite;
  }

  /* ── Bonbons : image bocal en premier + features en grille de cartes ── */
  .bonbons-intro   { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
  .bonbons-jar     { order: -1; }
  .bonbons-features{ order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .bonbons-illus   { order: 2; }
  .bonbons-features .section-desc {
    grid-column: 1 / -1;
    background: none; border: none; border-radius: 0; padding: 0; min-height: unset;
    text-align: left; align-items: flex-start;
  }

  /* ── Croquis bonbons : 1 paire par ligne, pleine largeur ── */
  .croquis-pairs { grid-template-columns: 1fr; gap: 28px; }

  /* (Pochette : voir bloc unique plus haut — liste verticale lignes égales) */

  /* ── Visuels finaux : 2x2, rangée basse plus haute pour le téléphone ── */
  .finals-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .finals-img-item { flex: unset !important; aspect-ratio: 4/5 !important; }
  .finals-img-item:nth-child(3) { aspect-ratio: 3/4 !important; }
  .finals-img-item:nth-child(4) { aspect-ratio: 3/4 !important; }
  .finals-img-item:nth-child(4) img { object-fit: cover; object-position: center; }

  /* ── Résultats ── */
  .results-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .result-num { font-size: 34px; }

  /* ── Illustrations : grille 2 colonnes, puis croquis/résultat empilés ── */
  .illus-thumbs { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 32px; }
  .illus-sr { grid-template-columns: 1fr; gap: 28px; padding: 22px 18px; border-radius: 16px; }
  .bonbons-bottom { padding: 22px 18px; border-radius: 16px; }
  .pack-col-title { margin-bottom: 14px; font-size: 14px; }

  /* Flèches lightbox plus compactes / rapprochées sur mobile */
  .illus-lb-arrow { width: 40px; height: 40px; }
  .illus-lb-prev { left: 10px; }
  .illus-lb-next { right: 10px; }
}