/* ==========================================================================
   Cielloo — page d'accueil « showroom » (reprise du modèle Cielloo Showroom).
   Tout est limité à .cl-home pour ne rien changer au reste du site Blocksy.
   ========================================================================== */

.cl-home {
  --cl-bg: #F7F3EC;
  --cl-dark: #1C1814;
  --cl-ink: #1F1B17;
  --cl-secondary: #6F675D;
  --cl-accent: #B38B59;
  --cl-line: rgba(255, 255, 255, .14);
  --cl-line-dark: rgba(28, 24, 20, .12);
  background: var(--cl-bg); color: var(--cl-ink);
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
.cl-home *, .cl-home *::before, .cl-home *::after { box-sizing: border-box; }
.cl-home h1, .cl-home h2, .cl-home h3, .cl-home .cl-display {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500; margin: 0;
  text-wrap: balance; letter-spacing: -.01em; color: inherit;
}
.cl-home em { font-style: italic; color: var(--cl-accent); }
.cl-home p { margin: 0; line-height: 1.7; }
.cl-home a { color: inherit; text-decoration: none; }
.cl-home img { max-width: 100%; }
.cl-wrap { max-width: 1400px; margin: 0 auto; padding-inline: var(--cl-gutter); }
/* Bord du contenu, aligné sur le logo de l'en-tête et sur .cl-wrap (sert dans les blocs pleine largeur) */
.cl-home { --cl-edge: max(var(--cl-gutter), calc((100% - 1400px) / 2 + var(--cl-gutter))); }
.cl-eyebrow { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }

/* ---------- Écran d'introduction ---------- */
#clIntro {
  position: fixed; inset: 0; z-index: 1000; background: #1C1814;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s cubic-bezier(.33, 1, .68, 1);
}
#clIntro.is-out { opacity: 0; pointer-events: none; }
#clIntro .cl-mark {
  font-family: 'Playfair Display', serif; color: #F7F3EC; font-size: 16.5px; letter-spacing: .3em;
  display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity .6s cubic-bezier(.33, 1, .68, 1);
}
#clIntro.is-mark .cl-mark { opacity: 1; }
.no-js #clIntro, html:not(.js) #clIntro { display: none; }
#clIntro .cl-ring {
  width: 34px; height: 34px; border: 1px solid rgba(247, 243, 236, .5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 16.5px;
}
#clIntro img { max-height: 46px; width: auto; filter: brightness(0) invert(1); }

/* ---------- Panneau photo ---------- */
.cl-photo { position: relative; overflow: hidden; background-color: #17150f; }
.cl-photo img.cl-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.cl-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 9, 7, .55) 0%, rgba(10, 9, 7, 0) 40%);
}
.cl-photo .cl-tag {
  position: absolute; left: 24px; bottom: 22px; z-index: 2;
  color: #EDE6D8; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  border-left: 1px solid var(--cl-accent); padding-left: 10px; opacity: .85;
}

/* ---------- Séquence cinématographique (épinglée par GSAP) ---------- */
.cl-scenes { position: relative; height: 100vh; height: 100lvh; overflow: hidden; padding: 0; }
/* Hauteur toujours visible (barre d'adresse du téléphone affichée) : texte et commandes y restent */
.cl-scene-content, .cl-chrome { height: 100vh; height: 100svh; }
.cl-scene {
  position: absolute; inset: 0; opacity: 0; will-change: opacity, transform;
  pointer-events: none; transition: opacity .9s cubic-bezier(.45, 0, .2, 1);
}
.cl-scene.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
.cl-scene .cl-photo { position: absolute; inset: 0; }
/* Chaque scène zoome / pivote différemment : simule un déplacement dans l'espace. */
.cl-scene .cl-photo img.cl-ph { transform: scale(1.16); transform-origin: 50% 50%; }
.cl-scene[data-index="0"] .cl-photo img.cl-ph { transform-origin: 50% 60%; }
.cl-scene[data-index="1"] .cl-photo img.cl-ph { transform-origin: 78% 45%; }
.cl-scene[data-index="2"] .cl-photo img.cl-ph { transform-origin: 50% 40%; }
.cl-scene[data-index="3"] .cl-photo img.cl-ph { transform-origin: 22% 45%; }
.cl-scene[data-index="4"] .cl-photo img.cl-ph { transform-origin: 50% 55%; }
.cl-scene.is-active .cl-photo img.cl-ph { transition: transform 6s cubic-bezier(.16, .6, .15, 1); transform: scale(1.02); }
.cl-scene-content {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: flex-start; color: #F7F3EC;
  /* sous l'en-tête, au-dessus du bouton « Défiler », aligné sur le logo */
  padding: calc(var(--cl-header-h) + 28px) var(--cl-edge) 120px;
  will-change: transform, opacity;
}
@media (max-width: 900px) { .cl-scene-content { justify-content: center; } }

/* Cadre de texte : fond teinté flouté, coins décoratifs dorés */
.cl-scene-card {
  position: relative; max-width: 600px; padding: clamp(26px, 4.2vh, 40px) 44px;
  background: rgba(22, 18, 13, .66); /* sans flou d'arrière-plan : bien plus léger à afficher pendant le défilement */
  border: 1px solid rgba(247, 243, 236, .26); border-radius: var(--cl-r-sm);
  display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 22px);
}
@media (max-width: 700px) { .cl-scene-card { padding: 28px 24px; gap: 16px; } }
.cl-scene-card::before, .cl-scene-card::after { content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none; }
.cl-scene-card::before { top: -1px; left: -1px; border-top: 2px solid var(--cl-accent); border-left: 2px solid var(--cl-accent); border-top-left-radius: var(--cl-r-sm); }
.cl-scene-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cl-accent); border-right: 2px solid var(--cl-accent); border-bottom-right-radius: var(--cl-r-sm); }
.cl-scene-card > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.cl-scene.is-active .cl-scene-card > * { opacity: 1; transform: none; }
.cl-scene.is-active .cl-scene-card .cl-eyebrow { transition-delay: .08s; }
.cl-scene.is-active .cl-scene-card h1, .cl-scene.is-active .cl-scene-card h2 { transition-delay: .16s; }
.cl-scene.is-active .cl-scene-card p { transition-delay: .24s; }
.cl-scene.is-active .cl-scene-card .cl-cta { transition-delay: .32s; }
.cl-scene-card .cl-eyebrow { color: var(--cl-accent); }
.cl-scene-card h1, .cl-scene-card h2 { font-size: clamp(30px, min(4.6vw, 7.4vh), 56px); line-height: 1.12; color: #F7F3EC; }
.cl-scene-card p { max-width: 44ch; color: #D9D2C3; font-size: 17px; line-height: 1.8; }

/* Bouton contour (scènes, produit vedette) */
.cl-cta {
  position: relative; overflow: hidden; isolation: isolate; align-self: flex-start;
  margin-top: 6px; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(247, 243, 236, .5); border-radius: var(--cl-r-sm); padding: 15px 30px; font-size: 13.5px; color: #F7F3EC !important;
  letter-spacing: .12em; text-transform: uppercase; transition: border-color .3s, color .3s, transform .3s;
}
.cl-cta::before {
  content: ''; position: absolute; inset: 0; background: #F7F3EC; z-index: -1;
  transform: translateY(101%); transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.cl-cta:hover { color: var(--cl-dark) !important; border-color: #F7F3EC; transform: translateY(-2px); }
.cl-cta:hover::before { transform: translateY(0); }
/* Variante pleine (produit vedette) : espresso, remplissage doré au survol */
.cl-cta--dark { color: #F7F3EC !important; background: var(--cl-ink); border-color: var(--cl-ink); }
.cl-cta--dark::before { background: var(--cl-accent); }
.cl-cta--dark:hover { color: var(--cl-ink) !important; border-color: var(--cl-accent); box-shadow: 0 14px 28px -16px rgba(28, 24, 20, .55); }
.cl-cta svg { width: 16px; height: 16px; transition: transform .35s var(--cl-ease, ease); }
.cl-cta:hover svg { transform: translateX(4px); }

.cl-chrome { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* Battement bref à chaque changement de scène */
.cl-pulse {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(10, 9, 7, .5) 100%);
}
.cl-pulse.is-active { opacity: 1; transition: opacity .35s ease-out; }
.cl-pulse:not(.is-active) { transition: opacity .9s ease-in; }
.cl-dots { position: absolute; right: var(--cl-edge); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; pointer-events: auto; }
.cl-dots button {
  width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(247, 243, 236, .8);
  background: transparent; cursor: pointer; padding: 0; transition: .3s; min-height: 0;
}
.cl-dots button:hover { border-color: #F7F3EC; }
.cl-dots button.active { background: var(--cl-accent); border-color: var(--cl-accent); transform: scale(1.3); }
.cl-hint {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #F7F3EC; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
  opacity: .95; transition: opacity .4s;
}
button.cl-hint { background: none; border: 0; padding: 0; cursor: pointer; pointer-events: auto; font: inherit; font-size: 12.5px; font-weight: 600; min-height: 0; }
/* Souris : contour arrondi, molette qui descend */
.cl-hint__mouse {
  position: relative; width: 28px; height: 44px; border-radius: 15px;
  border: 2px solid rgba(247, 243, 236, .9); background: rgba(20, 16, 12, .3); box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  transition: border-color .3s, transform .3s;
}
.cl-hint__mouse::before {
  content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 9px; margin-left: -2px; border-radius: var(--cl-r-xs);
  background: #F7F3EC; animation: cl-wheel 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
button.cl-hint:hover .cl-hint__mouse { border-color: var(--cl-accent); transform: translateY(2px); }
button.cl-hint:hover .cl-hint__mouse::before { background: var(--cl-accent); }
@keyframes cl-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 71% { transform: translateY(0); opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cl-hint__mouse::before { animation: none; } }
/* Progression dans la séquence (à côté des points) */
.cl-progress { position: absolute; right: calc(var(--cl-edge) + 5px); top: calc(50% + 62px); width: 1px; height: 60px; background: rgba(247, 243, 236, .25); }
.cl-progress span { display: block; width: 100%; height: 100%; background: var(--cl-accent); transform-origin: top; transform: scaleY(0); }
/* Passer la séquence */
.cl-skip {
  position: absolute; right: var(--cl-edge); bottom: 32px; pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
  color: #F7F3EC !important; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .8;
  padding: 13px 22px; border: 1px solid rgba(247, 243, 236, .5); border-radius: 999px;
  background: rgba(20, 16, 12, .32); transition: opacity .3s, background .3s;
}
.cl-skip:hover { opacity: 1; background: rgba(20, 16, 12, .5); }
.cl-skip svg { width: 13px; height: 13px; }
@media (max-width: 700px) {
  .cl-hint { bottom: 86px; gap: 8px; }
  .cl-hint__mouse { width: 24px; height: 38px; }
  .cl-scene .cl-tag { display: none; }
}
/* Ancres : le titre ne passe pas sous l'en-tête fixe */
/* Étiquette des scènes : même bord et même hauteur que « Passer la visite » */
.cl-scene .cl-photo .cl-tag { left: var(--cl-edge); bottom: calc(100% - 100svh + 46px); }
#cl-rooms, #cl-shop { scroll-margin-top: calc(var(--cl-header-h, 76px) + 24px); }

/* ---------- Sections ---------- */
.cl-section { padding-top: 0; padding-bottom: var(--cl-space); }
.cl-section-head { margin-bottom: 40px; max-width: 640px; }
.cl-section-head .cl-eyebrow { color: var(--cl-accent); }
/* Un seul style de titre de section (univers, produit vedette, rail) */
.cl-section-head h2, .cl-rail-head h2, .cl-spotlight-text h2 { margin-top: 16px; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.15; }
.cl-rooms-intro { padding-top: var(--cl-space); padding-bottom: 0; }

/* ---------- Nos univers (catégories WooCommerce) ---------- */
.cl-rooms {
  --cl-cols: 5; display: grid; grid-template-columns: repeat(var(--cl-cols), 1fr); gap: 14px;
  padding: 0 var(--cl-wide-gutter); margin: 0 auto var(--cl-space); max-width: 1640px;
}
@media (max-width: 1000px) { .cl-rooms { grid-template-columns: repeat(3, 1fr); } }
/* Mobile : cartes qui défilent au doigt, la suivante dépasse pour inviter à glisser */
@media (max-width: 600px) {
  .cl-rooms {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    padding: 0 var(--cl-gutter) 6px; scrollbar-width: none;
  }
  .cl-rooms::-webkit-scrollbar { display: none; }
  .cl-rooms .cl-room { flex: 0 0 74%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .cl-room .cl-label { left: 18px; right: 18px; bottom: 18px; }
  .cl-room .cl-label b { font-size: 24px; }
  .cl-room .cl-label svg { opacity: 1; transform: none; }
}
.cl-room { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--cl-r); background: #E7E0D4; isolation: isolate; }
.cl-room .cl-photo { position: absolute; inset: 0; }
.cl-room .cl-photo::after { background: linear-gradient(0deg, rgba(14, 12, 9, .72) 0%, rgba(14, 12, 9, .25) 38%, rgba(14, 12, 9, 0) 62%); }
.cl-room .cl-photo img.cl-ph { transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.cl-room:hover .cl-photo img.cl-ph { transform: scale(1.06); }
@keyframes cl-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.cl-room .cl-dim { position: absolute; inset: 0; z-index: 1; background: rgba(10, 9, 7, 0); transition: background .6s; }
.cl-room:hover .cl-dim { background: rgba(10, 9, 7, .18); }
.cl-room::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(247, 243, 236, 0); transition: box-shadow .5s; }
.cl-room:hover::before { box-shadow: inset 0 0 0 1px rgba(247, 243, 236, .55); }
.cl-room .cl-label { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 3; color: #F7F3EC; transition: transform .6s cubic-bezier(.22, 1, .36, 1); text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.cl-room:hover .cl-label { transform: translateY(-8px); }
.cl-room .cl-label b { display: block; font-family: 'Playfair Display', serif; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.2; }
.cl-room .cl-label span { font-size: 13.5px; color: #E2D9C7; display: flex; align-items: center; gap: 6px; margin-top: 5px; letter-spacing: .04em; }
.cl-room .cl-label svg { width: 11px; height: 11px; opacity: 0; transform: translateX(-4px); transition: .4s; }
.cl-room:hover .cl-label svg { opacity: 1; transform: translateX(0); }
/* Cartes dévoilées en cascade */
@media (prefers-reduced-motion: no-preference) {
  .js .cl-rooms .cl-room { clip-path: inset(100% 0 0 0 round var(--cl-r)); transition: clip-path 1.3s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .1s); }
  .js .cl-rooms.in .cl-room { clip-path: inset(0 0 0 0 round var(--cl-r)); }
  .js .cl-rooms .cl-room .cl-label { opacity: 0; transform: translateY(14px); transition: opacity .9s ease calc(var(--i, 0) * .1s + .5s), transform 1s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .1s + .5s); }
  .js .cl-rooms.in .cl-room .cl-label { opacity: 1; transform: none; }
  .js .cl-rooms.in .cl-room:hover .cl-label { transform: translateY(-8px); transition-delay: 0s; }
  .js .cl-rooms.cl-reveal { opacity: 1; transform: none; }
}

/* ---------- Produit vedette (fond sable, plus doux) ---------- */
/* Même largeur que la grille des univers juste au-dessus */
.cl-spotlight { background: #EFE7DB; color: var(--cl-ink); width: min(100% - 2 * var(--cl-wide-gutter), 1640px - 2 * var(--cl-wide-gutter)); margin: 0 auto var(--cl-space); border-radius: var(--cl-r); overflow: hidden; }
.cl-spotlight-inner { display: grid; grid-template-columns: .85fr 1.15fr; min-height: clamp(520px, 74vh, 800px); }
@media (max-width: 900px) { .cl-spotlight-inner { grid-template-columns: 1fr; min-height: auto; } }
.cl-spotlight-text { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 90px 72px; }
@media (max-width: 900px) { .cl-spotlight-text { padding: 56px 28px; gap: 16px; } }
.cl-spotlight-text .cl-eyebrow { color: var(--cl-accent); }
.cl-spotlight-text h2 { margin-top: 0; color: var(--cl-ink); }
.cl-spotlight-text p { color: #6B655D; max-width: 38ch; line-height: 1.8; }
.cl-spotlight-price { font-family: 'Playfair Display', serif; font-size: 26px; color: #8C6A3F; }
.cl-spotlight-price del { opacity: .5; font-size: .7em; margin-right: 8px; }
.cl-spotlight-price ins { text-decoration: none; }
.cl-spotlight-text .cl-cta { margin-top: 8px; }
.cl-spotlight-photo { position: relative; min-height: 440px; overflow: hidden; display: block; }
.cl-spotlight-photo::after { background: linear-gradient(0deg, rgba(10, 9, 7, .35) 0%, rgba(10, 9, 7, 0) 35%); }
/* Photos du produit vedette : fondu de l'une à l'autre (flèches, glisser du doigt) */
.cl-spotlight-slides { position: absolute; inset: -8% 0; will-change: transform; }
.cl-spotlight-photo img.cl-ph { opacity: 0; transition: opacity .8s ease, transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.cl-spotlight-photo img.cl-ph.is-active { opacity: 1; }
.cl-spotlight-photo:hover img.cl-ph { transform: scale(1.04); }
.cl-spotlight-photo::after { z-index: 1; }
.cl-spotlight-link { position: absolute; inset: 0; z-index: 2; }
.cl-spotlight-photo .cl-tag { z-index: 3; pointer-events: none; }
.cl-spotlight-count { position: absolute; left: 32px; bottom: 28px; z-index: 3; display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .12em; color: #EDE6D8; }
.cl-spotlight-count b[data-video] { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cl-spotlight-index { color: #fff; font-weight: 600; }
.cl-spotlight-nav {
  position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(247, 243, 236, .9); color: #1C1814; box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  opacity: .9; transition: opacity .3s, transform .4s var(--cl-ease, ease), background .3s;
}
.cl-spotlight-nav svg { width: 18px; height: 18px; }
.cl-spotlight-nav.is-prev { left: 22px; }
.cl-spotlight-nav.is-next { right: 22px; }
.cl-spotlight-nav:hover { opacity: 1; background: #fff; }
.cl-spotlight-nav.is-prev:hover { transform: translateX(-3px); }
.cl-spotlight-nav.is-next:hover { transform: translateX(3px); }
@media (max-width: 700px) {
  .cl-spotlight-nav { width: 40px; height: 40px; margin-top: -20px; }
  .cl-spotlight-nav.is-prev { left: 12px; } .cl-spotlight-nav.is-next { right: 12px; }
}
.cl-spotlight .cl-tag { left: auto; right: 28px; }

/* ---------- Rail produits ---------- */
.cl-rail-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; flex-wrap: wrap; gap: 16px; }
.cl-rail-head .cl-eyebrow { color: var(--cl-accent); }
.cl-rail-nav { display: flex; gap: 10px; }
.cl-rail-nav button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--cl-line-dark); color: var(--cl-ink);
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .25s; padding: 0; min-height: 0;
}
.cl-rail-nav button:hover { background: var(--cl-dark); border-color: var(--cl-dark); color: #F7F3EC; }
.cl-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -ms-overflow-style: none; scrollbar-width: none; }
.cl-rail::-webkit-scrollbar { display: none; }
.cl-card { flex: 0 0 auto; width: 280px; scroll-snap-align: start; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.cl-card:hover { transform: translateY(-6px); }
.cl-card .cl-photo { display: block; aspect-ratio: 4 / 5; border-radius: var(--cl-r); box-shadow: 0 1px 3px rgba(28, 24, 20, .06); transition: box-shadow .5s; }
.cl-card:hover .cl-photo { box-shadow: 0 30px 50px -24px rgba(28, 24, 20, .3); }
.cl-card .cl-quick { border-radius: var(--cl-r-sm) !important; }
@media (prefers-reduced-motion: no-preference) {
  .js .cl-rail .cl-card { opacity: 0; transform: translateY(30px); transition: opacity 1s ease calc(var(--i, 0) * .08s), transform 1.1s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .08s); }
  .js .cl-rail.in .cl-card { opacity: 1; transform: none; }
  .js .cl-rail.in .cl-card:hover { transform: translateY(-6px); transition-delay: 0s; }
  .js .cl-rail.cl-reveal { opacity: 1; transform: none; }
}
.cl-card .cl-photo img.cl-ph { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.cl-card:hover .cl-photo img.cl-ph { transform: scale(1.06); }
.cl-card .cl-quick {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: block;
  background: #F7F3EC; color: #1C1814 !important; text-align: center; padding: 11px; border: 0; border-radius: 0; min-height: 0;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; line-height: 1.4;
  opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s, background .3s;
}
.cl-card:hover .cl-quick, .cl-card .cl-quick:focus-visible { opacity: 1; transform: none; }
.cl-card .cl-quick:hover { background: var(--cl-accent); }
.cl-card .cl-quick.loading { opacity: .7; }
.cl-card .cl-quick.added::after { content: ' ✓'; }
.cl-card a.added_to_cart { display: none; }
.cl-card .cl-meta { margin-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cl-card .cl-meta b { font-family: 'Playfair Display', serif; font-size: 18.5px; font-weight: 500; transition: color .2s; }
.cl-card:hover .cl-meta b { color: var(--cl-accent); }
.cl-card .cl-meta span { font-size: 14.5px; color: var(--cl-secondary); white-space: nowrap; }
.cl-card .cl-meta del { opacity: .6; margin-right: 4px; }
.cl-card .cl-meta ins { text-decoration: none; }

/* ---------- Bandeau de confiance (clair) ---------- */
.cl-trust { background: #EFE7DB; color: var(--cl-ink); border-top: 1px solid rgba(28, 24, 20, .06); }
.cl-trust .cl-wrap { padding-block: 44px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; align-items: center; }
.cl-trust-item { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #6B655D; }
.cl-trust-item b { display: block; color: var(--cl-ink); font-size: 14.5px; font-weight: 600; }
.cl-trust-item svg { width: 22px; height: 22px; color: var(--cl-accent); flex-shrink: 0; }
.cl-trust-quote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 17px; color: var(--cl-ink); max-width: 28ch; }

/* ---------- Apparitions ---------- */
.cl-reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .cl-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
  .js .cl-reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-room .cl-photo img.cl-ph, .cl-card .cl-photo img.cl-ph { animation: none; }
  .cl-scene, .cl-scene .cl-photo img.cl-ph, .cl-scene-card > * { transition: none !important; }
}

/* Le contenu de l'accueil commence sous l'en-tête (pas de marge ajoutée par Blocksy) */
body.cl-is-home .site-main, body.cl-is-home #main { padding-top: 0 !important; margin-top: 0 !important; }

/* ==========================================================================
   Mobile (téléphones)
   ========================================================================== */
@media (max-width: 700px) {
  /* Séquence : texte en bas de l'écran, photo dégagée en haut ; ni points ni « Passer » (le bouton Défiler suffit) */
  .cl-scene-content { align-items: flex-end; padding: calc(var(--cl-header-h) + 16px) var(--cl-gutter) 130px; }
  .cl-scene-card { max-width: none; width: 100%; padding: 24px 22px; gap: 12px; background: rgba(22, 18, 13, .72); }
  .cl-scene-card h1, .cl-scene-card h2 { font-size: clamp(28px, 8.6vw, 34px); }
  .cl-scene-card p { font-size: 15.5px; line-height: 1.6; }
  .cl-scene-card .cl-cta { padding: 13px 22px; }
  .cl-dots, .cl-progress, .cl-skip { display: none; }
  .cl-hint { bottom: 34px; }

  /* Titres de section */
  .cl-section-head, .cl-rail-head { margin-bottom: 28px; }
  .cl-section-head h2, .cl-rail-head h2, .cl-spotlight-text h2 { font-size: 32px; }

  /* Produit vedette : photo d'abord, puis le texte */
  .cl-spotlight-photo { order: -1; min-height: 0; aspect-ratio: 4 / 5; }
  .cl-spotlight-text { padding: 34px 22px 38px; }
  .cl-spotlight-price { font-size: 24px; }

  /* Rail : cartes plus larges qui défilent au doigt, bouton d'ajout toujours visible (pas de survol sur mobile) */
  .cl-rail-nav { display: none; }
  .cl-rail { gap: 12px; margin-inline: calc(-1 * var(--cl-gutter)); padding-inline: var(--cl-gutter); scroll-padding-inline: var(--cl-gutter); }
  .cl-card { width: 72vw; max-width: 300px; }
  .cl-card .cl-quick { opacity: 1; transform: none; left: 10px; right: 10px; bottom: 10px; padding: 12px 8px; }
  .cl-card .cl-meta { flex-direction: column; gap: 2px; }

  /* Bandeau de confiance : 3 engagements alignés, puis la citation */
  .cl-trust .cl-wrap { flex-direction: column; align-items: stretch; gap: 18px; padding-block: 34px; }
  .cl-trust-quote { text-align: center; padding-top: 6px; }
}
@media (hover: none) {
  .cl-card .cl-quick { opacity: 1; transform: none; }
}