/* ==========================================================
   VISUALIZATION 3D — ROYAL PALM (LIGHTER HERO)
   ========================================================== */

:root{
  --rp3d-bg: #0b0907;
  --rp3d-hero1:#EAE3D6;        /* clair sable */
  --rp3d-hero2:#CBBEAA;        /* patine */
  --rp3d-brun:#3D2F1C;

  --rp3d-text:#2b2218;         /* texte foncé sur hero clair */
  --rp3d-muted: rgba(43,34,24,.72);

  --rp3d-darkText: rgba(234,227,214,.92);  /* texte clair sur sections sombres */
  --rp3d-darkMuted: rgba(234,227,214,.72);

  --rp3d-card: rgba(255,255,255,.06);
  --rp3d-border: rgba(203,190,170,.22);
}

/* page */
body.rp3d-page{
  margin: 0;
  overflow-x: hidden;
}

/* ==========================================================
   HERO clair (assorti)
   ========================================================== */
.rp3d-hero{
  min-height: 92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;

  /* ✅ fond BEAUCOUP PLUS CLAIR */
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.85) 0%, rgba(234,227,214,.92) 35%, rgba(203,190,170,.92) 70%, rgba(203,190,170,.75) 100%);
  padding: 56px 0 70px;

  /* pour que le cube ait de la profondeur */
  perspective: 1400px;
  -webkit-perspective: 1400px;
}

/* Scene */
.rp3d-scene{
  width: 360px;
  height: 360px;
  position: relative;
  perspective: 1400px;
  -webkit-perspective: 1400px;
}

/* Cube */
.rp3d-cube{
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.25));
}

/* Faces */
.rp3d-face{
  position:absolute;
  inset:0;
  border: 3px solid rgba(61,47,28,.22);    /* cadre brun léger (pas flashy) */
  border-radius: 18px;
  overflow:hidden;
  background: rgba(0,0,0,.15);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rp3d-face img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Placement (360/2=180) */
.rp3d-front  { transform: translateZ(180px); }
.rp3d-back   { transform: rotateY(180deg) translateZ(180px); }
.rp3d-right  { transform: rotateY(90deg) translateZ(180px); }
.rp3d-left   { transform: rotateY(-90deg) translateZ(180px); }

.rp3d-top{
  transform: rotateX(90deg) translateZ(180px);
  background: rgba(61,47,28,.10);
}
.rp3d-bottom{
  transform: rotateX(-90deg) translateZ(180px);
  background: rgba(61,47,28,.10);
  box-shadow: 0 0 120px rgba(61,47,28,.14);
}

/* Texte hero */
.rp3d-hero-text{
  text-align:center;
  margin-top: 34px;
  padding: 0 20px;
}

.rp3d-hero-text h1{
  margin: 0 0 10px;
  font-size: clamp(26px, 5vw, 52px);
  letter-spacing: .12em;
  color: var(--rp3d-brun);
  text-transform: uppercase;
  font-weight: 900;
}

.rp3d-hero-text p{
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(61,47,28,.70);
}

/* CTA */
.rp3d-hero-cta{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}

.rp3d-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration:none !important;
  font-weight: 900;
  letter-spacing: .04em;
  border: 1px solid transparent;
  transition: transform .16s ease, opacity .16s ease;
}
.rp3d-btn:hover{ transform: translateY(-2px); opacity:.95; }

.rp3d-btn--primary{
  background: var(--rp3d-brun);
  color: #fff;
}
.rp3d-btn--ghost{
  background: transparent;
  color: var(--rp3d-brun);
  border-color: rgba(61,47,28,.28);
}

/* ==========================================================
   Sections sombres (le reste de la page)
   ========================================================== */
.rp3d-section{
  padding: 90px 0;
  background: radial-gradient(circle at 50% 0%, #201a13 0%, var(--rp3d-bg) 55%, #000 100%);
  color: var(--rp3d-darkText);
}
.rp3d-section--dark{
  background: linear-gradient(180deg, rgba(26,20,14,.0), rgba(26,20,14,.95));
}
.rp3d-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.rp3d-title{
  color: #CBBEAA;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  font-size: clamp(22px, 3vw, 34px);
  margin: 0 0 18px;
}
.rp3d-section p{
  color: var(--rp3d-darkMuted);
  line-height: 1.8;
}

/* Grid avantages */
.rp3d-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
}
.rp3d-card{
  background: var(--rp3d-card);
  border: 1px solid var(--rp3d-border);
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}
.rp3d-icon{ font-size: 34px; margin-bottom: 10px; }
.rp3d-card h3{ margin: 0 0 10px; color: rgba(234,227,214,.95); font-weight: 900; }

/* Galerie */
/* TITRE GALERIE */
.rp3d-gallery-title,
#rp3d-gallery h2{
  color: #3A2F23 !important;
}

/* SOUS-TEXTE GALERIE */
.rp3d-gallery-subtitle,
#rp3d-gallery p{
  color: #6B5A45 !important;
}
.rp3d-gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.rp3d-shot{
  position: relative;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(203,190,170,.18);
  box-shadow: 0 16px 44px rgba(0,0,0,.22);
  text-decoration:none !important;
}
.rp3d-shot img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display:block;
  filter: brightness(.86);
}
.rp3d-shot span{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.62);
  color: rgba(234,227,214,.92);
  font-weight: 900;
  font-size: 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Responsive */
@media (max-width: 1100px){
  .rp3d-grid{ grid-template-columns: 1fr; }
  .rp3d-gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  .rp3d-scene{ width: 240px; height: 240px; }
  .rp3d-front  { transform: translateZ(120px); }
  .rp3d-back   { transform: rotateY(180deg) translateZ(120px); }
  .rp3d-right  { transform: rotateY(90deg) translateZ(120px); }
  .rp3d-left   { transform: rotateY(-90deg) translateZ(120px); }
  .rp3d-top    { transform: rotateX(90deg) translateZ(120px); }
  .rp3d-bottom { transform: rotateX(-90deg) translateZ(120px); }
}
@media (max-width: 520px){
  .rp3d-gallery{ grid-template-columns: 1fr; }
  .rp3d-shot img{ height: 240px; }
}
/* ===========================
   CUBE 3D ISOLÉ – INCASSABLE
=========================== */

.cube-isolated{
  position: relative;
  min-height: 100vh;
  background: radial-gradient(circle at center, #f1eadf 0%, #d8ccb8 60%, #c1b29a 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* SCÈNE = AUCUN PARENT AVEC TRANSFORM */
.cube-stage{
  width:360px;
  height:360px;
  perspective:1200px;
  margin-top: -30px;
}

/* LE CUBE */
.cube{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  animation: spinCube 18s linear infinite;
}

/* FACES */
.face{
  position:absolute;
  width:360px;
  height:360px;
  border:4px solid #3d2f1c;
  background:#000;
  overflow:hidden;
  backface-visibility:hidden;
}

.face img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* POSITIONNEMENT 3D */
.front  { transform: translateZ(180px); }
.back   { transform: rotateY(180deg) translateZ(180px); }
.right  { transform: rotateY(90deg) translateZ(180px); }
.left   { transform: rotateY(-90deg) translateZ(180px); }
.top    { transform: rotateX(90deg) translateZ(180px); background:#cbbdaa; }
.bottom { transform: rotateX(-90deg) translateZ(180px); background:#cbbdaa; }

@keyframes spinCube{
  0%   { transform: rotateX(-15deg) rotateY(0deg); }
  100% { transform: rotateX(-15deg) rotateY(360deg); }
}

/* TEXTE */
.cube-text{
  text-align:center;
  margin-top:90px;
}

.cube-text h1{
  font-size:48px;
  letter-spacing:.15em;
  color:#3d2f1c;
  text-transform:uppercase;
}

.cube-text p{
  font-size:13px;
  letter-spacing:.25em;
  opacity:.8;
  margin-bottom:30px;
}

.cube-btn{
  display:inline-block;
  padding:14px 38px;
  border-radius:40px;
  background:#3d2f1c;
  color:white;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.08em;
}

/* MOBILE */
@media(max-width:900px){
  .cube-stage{ width:240px;height:240px; }
  .face{ width:240px;height:240px; }

  .front{ transform:translateZ(120px); }
  .back{ transform:rotateY(180deg) translateZ(120px); }
  .right{ transform:rotateY(90deg) translateZ(120px); }
  .left{ transform:rotateY(-90deg) translateZ(120px); }
  .top{ transform:rotateX(90deg) translateZ(120px); }
  .bottom{ transform:rotateX(-90deg) translateZ(120px); }

  .cube-text h1{ font-size:28px; }
}