/* ═══════════════════════════════════════════════
   IMAGES VIVANTES — Océan de Saveurs
   Flottement doux · gâteaux réels · ingrédients · ambiance boutique
   ═══════════════════════════════════════════════ */

/* ── ANIMATIONS DE FLOTTEMENT DOUX ──────────────
   3 phases légèrement décalées pour que chaque
   élément flotte à son propre rythme               */
@keyframes floatA {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  33%     { transform: translateY(-6px) rotate(0.5deg); }
  66%     { transform: translateY(-3px) rotate(-0.25deg); }
}
@keyframes floatB {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  40%     { transform: translateY(-8px) rotate(-0.75deg); }
  70%     { transform: translateY(-2px) rotate(0.4deg); }
}
@keyframes floatC {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  25%     { transform: translateY(-4px) rotate(0.6deg); }
  60%     { transform: translateY(-9px) rotate(-0.4deg); }
}
@keyframes ivPhotoSwap {
  0%   { opacity:1; transform:translate(-50%,-50%) scale(1); }
  50%  { opacity:0; transform:translate(-50%,-54%) scale(0.95); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes ringSpin {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes stripScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.iv-float-a { animation: floatA 8s ease-in-out infinite; }
.iv-float-b { animation: floatB 10s ease-in-out infinite; }
.iv-float-c { animation: floatC 12s ease-in-out infinite; }

/* ── HERO SHOWCASE ────────────────────────────── */
.iv-hero-showcase {
  position: relative;
  width: 340px;
  height: 340px;
  flex-shrink: 0;
}

/* Anneaux décoratifs tournants */
.iv-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 2px solid rgba(42,157,200,0.25);
  pointer-events: none;
}
.iv-ring-outer {
  width: 320px; height: 320px;
  border-style: dashed;
  animation: ringSpin 24s linear infinite;
}
.iv-ring-inner {
  width: 240px; height: 240px;
  border-color: rgba(42,157,200,0.15);
  animation: ringSpin 18s linear infinite reverse;
}

/* Photo principale circulaire */
.iv-hero-main-photo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 6px solid rgba(234,244,251,0.95);
  box-shadow:
    0 0 0 12px rgba(42,157,200,0.15),
    0 20px 50px rgba(13,43,62,0.22);
  z-index: 2;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.iv-hero-main-photo:hover {
  box-shadow:
    0 0 0 16px rgba(42,157,200,0.25),
    0 28px 64px rgba(13,43,62,0.28);
}
.iv-hero-main-photo.iv-photo-swap {
  animation: ivPhotoSwap 0.4s ease both;
}

/* Mini vignettes ingrédients */
.iv-mini {
  position: absolute;
  width: 68px; height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(234,244,251,0.95);
  box-shadow: 0 6px 20px rgba(13,43,62,0.18);
  cursor: pointer;
  z-index: 3;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.iv-mini:hover {
  box-shadow: 0 10px 32px rgba(42,157,200,0.45);
  border-color: rgba(42,157,200,0.7);
}
.iv-mini-1 { top: 6%;   left: 4%; }
.iv-mini-2 { bottom: 6%; left: 2%; }
.iv-mini-3 { top: 8%;   right: 2%; }

/* ── DÉCO FLOTTANTE DANS LE HERO BG ─────────────
   Textures ingrédients en arrière-plan, très discrètes */
.iv-deco-float {
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.07;
  filter: blur(1px);
}
.iv-deco-1 { width: 220px; height: 220px; bottom: -40px; right: 10%; }
.iv-deco-2 { width: 140px; height: 140px; top: 30%;  left: 45%; }
.iv-deco-3 { width: 180px; height: 180px; top: -30px; left: 52%; opacity: 0.05; }

/* ── CARTES GÂTEAUX SIGNATURE ─────────────────── */
.iv-card-img-wrap {
  overflow: hidden;
  line-height: 0;
  border-radius: 0;
}
.iv-card-photo {
  width: 100%;
  height: 195px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
}
.cake-card:hover .iv-card-photo {
  transform: scale(1.06);
}

/* ── SECTION "POURQUOI NOUS" : photo ambiance ─── */
.iv-why-wrap {
  position: relative;
  display: inline-block;
}
.iv-why-photo {
  width: 360px;
  height: 430px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(42,157,200,0.2),
    0 20px 56px rgba(13,43,62,0.18);
  display: block;
  transition: box-shadow 0.4s ease;
}
.iv-why-wrap:hover .iv-why-photo {
  box-shadow:
    0 0 0 1px rgba(42,157,200,0.35),
    0 28px 70px rgba(13,43,62,0.24);
}
/* Cadre doré décoratif décalé */
.iv-why-wrap::before {
  content: '';
  position: absolute;
  inset: -10px -10px 10px 10px;
  border: 2px solid rgba(42,157,200,0.28);
  border-radius: 28px;
  pointer-events: none;
  transition: inset 0.4s ease;
}
.iv-why-wrap:hover::before { inset: -14px -14px 14px 14px; }
.iv-why-badge {
  position: absolute;
  bottom: 1.5rem;
  left: -1.5rem;
  background: var(--chocolate, #071929);
  color: rgba(232,194,122,0.95);
  font-family: 'Playfair Display', serif;
  font-size: 0.82rem;
  padding: 0.55rem 1.1rem;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(13,43,62,0.25);
  z-index: 3;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* ── ARRIÈRE-PLAN TÉMOIGNAGES ────────────────── */
.iv-testi-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.iv-testi-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px) brightness(0.07) saturate(0.2);
  transform: scale(1.06);
}
.iv-testi-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(234,244,251,0.96);
}

/* ── BANDE DÉFILANTE ─────────────────────────── */
.iv-strip {
  overflow: hidden;
  padding: 2rem 0;
  background: var(--chocolate, #071929);
  position: relative;
}
.iv-strip::before, .iv-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.iv-strip::before { left: 0;  background: linear-gradient(to right, #071929, transparent); }
.iv-strip::after  { right: 0; background: linear-gradient(to left,  #071929, transparent); }

.iv-strip-track {
  display: flex;
  gap: 0.85rem;
  width: max-content;
  animation: stripScroll 32s linear infinite;
}
.iv-strip-track:hover { animation-play-state: paused; }

.iv-strip-item {
  width: 155px;
  height: 108px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(42,157,200,0.2);
  transition: transform 0.35s ease, border-color 0.3s, box-shadow 0.3s;
  cursor: pointer;
}
.iv-strip-item:hover {
  transform: scale(1.07) translateY(-5px);
  border-color: rgba(42,157,200,0.7);
  box-shadow: 0 10px 28px rgba(42,157,200,0.35);
}

/* ── PAGE HEADER (inner pages) ───────────────── */
.iv-page-header-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.iv-page-header-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.22) saturate(0.5);
  animation: floatA 14s ease-in-out infinite;
  transform-origin: center;
}

/* ── CARTES PRODUITS (commande.html) ─────────── */
.iv-product-img-wrap {
  overflow: hidden;
  line-height: 0;
}
.iv-product-photo {
  width: 100%;
  height: 175px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
}
.product-card:hover .iv-product-photo {
  transform: scale(1.08);
}

/* Déco arrière-plan cart sidebar */
.iv-cart-deco-bg {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 130px;
  height: 130px;
  z-index: 0;
  pointer-events: none;
}
.iv-cart-deco-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.06;
  filter: blur(2px);
}

/* ── SÉLECTION GÂTEAUX (personnaliser.html) ──── */
.iv-sel-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(42,157,200,0.2);
  flex-shrink: 0;
  transition: transform 0.4s ease, border-color 0.3s;
}
.cake-sel-card:hover .iv-sel-photo {
  transform: scale(1.12) rotate(4deg);
  border-color: rgba(42,157,200,0.6);
}

/* Arrière-plan décoratif page personnaliser */
.iv-perso-bg {
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  z-index: 0;
  pointer-events: none;
}
.iv-perso-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.05;
  filter: blur(4px);
  animation: floatB 12s ease-in-out infinite;
}

/* ── SERVICE CLIENT ───────────────────────────── */
.iv-sc-banner-photo {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 18px;
  margin-bottom: 2rem;
  display: block;
  box-shadow: 0 12px 36px rgba(13,43,62,0.14);
  animation: floatA 10s ease-in-out infinite;
}

.iv-contact-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.iv-contact-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.iv-contact-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(234,244,251,0.88);
  transition: background 0.35s ease;
}

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 900px) {
  .iv-hero-showcase { width: 280px; height: 280px; }
  .iv-hero-main-photo { width: 180px; height: 180px; }
  .iv-ring-outer { width: 260px; height: 260px; }
  .iv-ring-inner { width: 200px; height: 200px; }
  .iv-mini { width: 54px; height: 54px; }
  .iv-why-photo { width: 100%; height: 280px; }
  .iv-why-badge { left: 0; }
}
@media (max-width: 600px) {
  .iv-hero-showcase { width: 240px; height: 240px; }
  .iv-hero-main-photo { width: 150px; height: 150px; }
}