/* Café Delyssa · page d'accueil : hero, index de la carte, avis, bloc VIP */

/* ===== Hero ===== */
.hero {
  position: relative; min-height: min(100svh, 920px);
  display: flex; align-items: center;
  padding: calc(var(--hauteur-nav) + 24px) 0 56px;
  overflow: hidden;
  isolation: isolate; background: var(--noir); /* fond opaque : nécessaire pour que la fusion « screen » de la vidéo se fasse sur le marbre */
}
/* Halo chocolat du médaillon, très discret, derrière la canette */
.hero::before {
  content: ""; position: absolute; right: -10%; top: 50%; width: 80vmin; height: 80vmin; transform: translateY(-50%);
  background: radial-gradient(circle, rgba(81, 47, 24, .55) 0%, rgba(81, 47, 24, .18) 40%, transparent 70%);
  pointer-events: none;
}
/* Fond de marbre noir de la carte VIP, fixe et très discret */
.hero-marbre { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-marbre .pierre, .hero-marbre .veines { position: absolute; inset: 0; background: url("../images/marbre-vip-QxB5gSA.webp") 70% 50% / cover no-repeat; }
.hero-marbre .pierre { filter: brightness(.34) saturate(.8); opacity: .22; }
.hero-marbre .veines { background-image: url("../images/veines-or-3WJ7KR0.webp"); opacity: .045; }
/* Voile de lisibilité : la colonne de texte et le bas du hero restent sur un noir profond */
.hero-marbre::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 9, 6, .94) 0%, rgba(11, 9, 6, .78) 38%, rgba(11, 9, 6, .15) 70%, rgba(11, 9, 6, .35) 100%),
              linear-gradient(0deg, var(--noir) 0%, transparent 22%); }
.hero .conteneur { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; }
.hero h1 { font-size: clamp(38px, 6.2vw, 76px); line-height: 1.02; font-weight: 700; text-transform: uppercase; letter-spacing: -0.015em; margin-top: 22px; }
.hero .accroche { font-size: clamp(19px, 2vw, 24px); color: var(--or-pale); margin-top: 22px; max-width: 30ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.statut { margin-top: 28px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--or-pale); }
.statut i { width: 7px; height: 7px; border-radius: 50%; background: var(--texte-doux); flex: none; }
.statut.ouvert i { background: #8fbf8f; }

/* Scène produit : la vidéo de remplissage de la vraie canette, sur fond noir pur.
   Le mode de fusion « screen » rend ce noir invisible : la canette et le filet se posent
   directement sur le marbre du hero, sans masque ni découpe. */
.scene { --scene-h: clamp(420px, 72vh, 680px); position: relative; display: flex; justify-content: center; align-items: flex-end; height: var(--scene-h); }
/* Boîte à lumière derrière la canette : rectangle vertical très flou, or pâle, qui s'allume à l'arrivée */
.boite-lumiere {
  position: absolute; bottom: 8%; left: 50%; width: 46%; height: 90%; z-index: -1; pointer-events: none;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(240, 210, 137, .30), rgba(240, 210, 137, .08) 55%, transparent 75%);
  filter: blur(18px); opacity: 0; animation: allumage 1.8s ease-out .3s forwards;
}
@keyframes allumage { to { opacity: 1; } }
/* Cadre de la vidéo : la canette en occupe 72 % de la hauteur, le haut sert au filet qui tombe.
   On l'agrandit donc à 128 % de la scène pour que la canette garde sa taille, le filet dépasse vers le haut.
   La hauteur passe par --scene-h et non par un pourcentage : Safari (WebKit) ramène sinon la largeur à 0. */
.canette-video { position: relative; height: calc(var(--scene-h) * 1.28); aspect-ratio: 430 / 1400; }
.canette-video img, .canette-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: screen; /* le noir de la vidéo disparaît sur le fond sombre */
  /* Le filet naît dans l'ombre au lieu d'être coupé net en haut du cadre */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%); mask-image: linear-gradient(to bottom, transparent 0%, #000 20%);
}
/* Par défaut, la canette pleine en image fixe ; la vidéo ne prend le relais que si elle peut vraiment jouer */
.canette-video video { opacity: 0; }
.canette-video.avec-video video { opacity: 1; }
.canette-video.avec-video img { opacity: 0; }
.scene::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 46%; height: 26px; transform: translate(-50%, 50%);
  background: radial-gradient(ellipse, rgba(0,0,0,.85), transparent 70%); z-index: -1;
}
@keyframes texte-entree { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Le texte du hero suit la canette, en cascade courte */
.hero .surtitre, .hero h1, .hero .accroche, .hero .actions, .hero .statut { animation: texte-entree .8s var(--courbe) both; }
.hero .surtitre { animation-delay: .25s; }
.hero h1 { animation-delay: .33s; }
.hero .accroche { animation-delay: .42s; }
.hero .actions { animation-delay: .5s; }
.hero .statut { animation-delay: .58s; }
/* Halo qui respire lentement : opacité seule, sans toucher à la position */
@keyframes respiration { 50% { opacity: .7; } }
.hero::before { animation: respiration 9s ease-in-out infinite; }

@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: calc(var(--hauteur-nav) + 28px); }
  /* Tablette : la canette reste à côté du texte, en plus petit */
  .hero .conteneur { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; }
  .scene { --scene-h: clamp(340px, 56vh, 480px); }
}
/* Téléphone : la canette se place à droite du titre et de l'accroche, les boutons passent dessous sur toute la largeur */
@media (max-width: 600px) {
  .hero { padding-bottom: 40px; }
  .hero .conteneur { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; align-items: start; }
  .hero .conteneur > div:first-child { display: contents; }
  .hero .surtitre { grid-column: 1 / -1; }
  .hero h1, .hero .accroche { grid-column: 1; }
  .hero h1 { font-size: clamp(26px, 8.2vw, 36px); margin-top: 14px; }
  .hero .accroche { font-size: 18px; margin-top: 16px; }
  .scene { --scene-h: clamp(230px, 66vw, 300px); grid-column: 2; grid-row: 2 / span 2; align-self: end; margin-top: 14px; }
  .hero .actions, .hero .statut { grid-column: 1 / -1; }
  .hero .actions { margin-top: 30px; }
  .hero::before { right: -45%; top: 30%; width: 90vmin; height: 90vmin; }
  /* Téléphone : le marbre de l'image est presque noir et réduit ; on l'éclaircit et on allège le voile */
  .hero-marbre .pierre { filter: brightness(1.3) saturate(.8); opacity: .35; }
  .hero-marbre::after { background: linear-gradient(90deg, rgba(11, 9, 6, .8) 0%, rgba(11, 9, 6, .6) 55%, rgba(11, 9, 6, .2) 100%), linear-gradient(0deg, var(--noir) 0%, transparent 30%); }
}

/* ===== Aperçu de la carte : lignes éditoriales numérotées ===== */
.index-carte { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); counter-reset: cat; }
.index-carte li { border-bottom: 1px solid var(--ligne); counter-increment: cat; }
.index-carte a {
  display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 20px;
  padding: 22px 0; color: var(--creme); transition: padding .3s var(--courbe), background .3s;
}
.index-carte a::before { content: counter(cat, decimal-leading-zero); font: 500 13px/1 var(--police-texte); color: var(--or); letter-spacing: .1em; }
.index-carte .nom { font: 600 clamp(18px, 2.4vw, 26px)/1.2 var(--police-titre); }
.index-carte .nom small { display: block; font: 400 13px/1.4 var(--police-texte); color: var(--texte-doux); margin-top: 4px; letter-spacing: 0; }
.index-carte .fourchette { font-size: 14px; color: var(--or-pale); white-space: nowrap; }
.index-carte .fleche { color: var(--or); transition: transform .3s; }
.index-carte a:hover { padding-inline: 12px; background: rgba(191,145,73,.05); }
.index-carte a:hover .fleche { transform: translateX(6px); }
@media (max-width: 640px) {
  .index-carte a { grid-template-columns: 34px 1fr auto; gap: 12px; padding: 18px 0; }
  .index-carte .fourchette { display: none; }
}

/* ===== Avis · concept B « Expérience VIP » =====
 * Le double filet de la carte VIP encadre une seule voix à la fois, sur marbre noir très discret.
 * Défilement manuel uniquement : aucune lecture automatique. */
.avis-vip { position: relative; overflow: hidden; background: var(--noir-pur); border-top: 1px solid var(--ligne); }
.avis-marbre { position: absolute; inset: 0; pointer-events: none; }
.avis-marbre::before { content: ''; position: absolute; inset: 0; background: url("../images/marbre-vip-QxB5gSA.webp") center / cover; opacity: .12; filter: saturate(.8); }
.avis-marbre .veines { position: absolute; inset: 0; background: url("../images/veines-or-3WJ7KR0.webp") center / cover; opacity: .03; }
.avis-marbre::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 40%, rgba(0, 0, 0, .75) 100%); }
.avis-vip .conteneur { position: relative; }
.avis-ecrin {
  position: relative; max-width: 1120px; margin: 0 auto; text-align: center;
  padding: clamp(40px, 7vw, 88px) clamp(20px, 7vw, 96px);
  border: 1px solid rgba(224, 193, 81, .38);
}
/* Second filet intérieur, comme la bordure de la carte VIP */
.avis-ecrin::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(224, 193, 81, .14); pointer-events: none; }
.avis-marque { width: fit-content; margin: 0 auto; font: 800 clamp(11px, 1.2vw, 13px)/1 var(--police-titre); letter-spacing: .42em; text-transform: uppercase; }
.avis-titre { font-size: clamp(22px, 3vw, 32px); margin-top: 18px; text-wrap: balance; }
.avis-titre .accent { color: var(--or-pale); font-weight: 500; }
.avis-filet { display: block; width: 56px; height: 1px; background: var(--filet-vip); opacity: .8; margin: clamp(28px, 4vw, 40px) auto; }
.avis-defilant { display: grid; }
.avis-defilant figure {
  grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .7s ease, transform .7s var(--courbe), visibility 0s .7s;
}
.avis-defilant figure.courant { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.avis-defilant blockquote { margin: 0; }
.avis-defilant p { font: italic 500 clamp(24px, 3.6vw, 40px)/1.22 var(--police-accent); color: var(--creme); max-width: 24ch; margin: 0 auto; text-wrap: balance; }
.guillemets::before { content: '«\00a0'; color: var(--filet-vip); }
.guillemets::after { content: '\00a0»'; color: var(--filet-vip); }
.avis-defilant figcaption { margin-top: 24px; font: 500 11px/1 var(--police-texte); letter-spacing: .32em; text-transform: uppercase; color: var(--filet-vip); }
.avis-commandes { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: clamp(32px, 5vw, 48px); }
.avis-commandes button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(224, 193, 81, .38); background: transparent;
  color: var(--or-pale); cursor: pointer; font-size: 16px; transition: border-color .25s, color .25s;
}
.avis-commandes button:hover { border-color: var(--filet-vip); color: var(--or-clair); }
.avis-reperes { display: flex; gap: 8px; }
.avis-reperes i { width: 22px; height: 2px; background: rgba(224, 193, 81, .22); transition: background .4s, width .4s var(--courbe); }
.avis-reperes i.courant { width: 38px; background: var(--filet-vip); }
.avis-compteur { font: 500 11px/1 var(--police-texte); letter-spacing: .2em; color: var(--texte-doux); white-space: nowrap; }
.avis-pied { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 28px; font-size: 12px; color: var(--texte-doux); }
.avis-pied strong { color: var(--or-pale); font-weight: 500; }
/* Étiquette de maquette : à retirer avec les textes d'exemple */
.avis-demo { padding: 4px 8px; border: 1px solid var(--ligne); font: 500 10px/1 var(--police-texte); letter-spacing: .16em; text-transform: uppercase; }
.avis-pied .lien-fleche { margin-left: 8px; }
@media (max-width: 600px) {
  .avis-ecrin::before { inset: 5px; }
  .avis-commandes { gap: 12px; }
  .avis-reperes i { width: 14px; }
  .avis-reperes i.courant { width: 26px; }
  .avis-pied .lien-fleche { margin-left: 0; flex-basis: 100%; justify-content: center; }
}

/* ===== VIP ===== */
.section-vip { background: var(--noir-pur); position: relative; overflow: hidden; }
.vip-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.vip-texte { color: var(--or-pale); margin-top: 18px; max-width: 42ch; }
.vip-actions { margin-top: 30px; }
.note-vip { font-size: 12px; color: var(--texte-doux); margin-top: 18px; }
@media (max-width: 720px) { .vip-grille { grid-template-columns: 1fr; } .vip-grille .colonne-carte { order: -1; } }

@media (prefers-reduced-motion: reduce) {
  /* Mouvement réduit : tout est visible tout de suite, sans délai d'entrée */
  .hero .surtitre, .hero h1, .hero .accroche, .hero .actions, .hero .statut { animation: none; }
  .boite-lumiere { animation: none; opacity: 1; }
  .avis-defilant figure { transition: none; }
  .hero::before { animation: none; }
}

/* Carte : chaque ligne arrive à son tour (décalage de 90 ms), au lieu d'un seul bloc */
.index-carte li.apparait { transition-delay: calc(var(--i, 0) * 90ms); }

/* Harmonisation des rayons : .avis-ecrin */
.avis-ecrin { border-radius: var(--rayon-section); }