/* ------------------------------------------------------------------
   SHEMS — couche de profondeur (3D CSS)
   Ajoutée par-dessus shems.css : relief, ombres douces, perspective,
   apparitions en profondeur, inclinaison des cartes, objets flottants.
   Tout repose sur transform / opacity (fluide sur mobile).
   Simplifié sur écrans tactiles, désactivé si « réduire les animations ».
   ------------------------------------------------------------------ */
:root {
  --d-persp: 1100px;
  --sh-1: 0 1px 1px rgba(20, 20, 19, .04), 0 2px 6px -2px rgba(20, 20, 19, .08);
  --sh-2: 0 1px 1px rgba(20, 20, 19, .04), 0 12px 28px -14px rgba(20, 20, 19, .22), 0 30px 60px -36px rgba(20, 20, 19, .20);
  --sh-3: 0 2px 2px rgba(20, 20, 19, .04), 0 22px 40px -18px rgba(20, 20, 19, .28), 0 50px 90px -40px rgba(20, 20, 19, .26);
  --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 1px rgba(20, 20, 19, .18), 0 8px 18px -8px rgba(20, 20, 19, .45);
  --btn-sh-h: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 3px rgba(20, 20, 19, .14), 0 18px 30px -12px rgba(20, 20, 19, .45);
  --btn-sh-a: inset 0 2px 6px rgba(0, 0, 0, .35), 0 1px 1px rgba(20, 20, 19, .10);
  --ghost-sh: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 1px rgba(20, 20, 19, .06), 0 8px 18px -12px rgba(20, 20, 19, .30);
  --ghost-sh-h: 0 2px 3px rgba(20, 20, 19, .10), 0 18px 30px -14px rgba(20, 20, 19, .40);
  --sphere-a: #FDFCF9; --sphere-b: #E4E1D9; --sphere-c: #B9B4A8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sh-1: 0 1px 1px rgba(0, 0, 0, .3), 0 2px 6px -2px rgba(0, 0, 0, .4);
    --sh-2: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 28px -14px rgba(0, 0, 0, .6), 0 30px 60px -36px rgba(0, 0, 0, .6);
    --sh-3: 0 2px 2px rgba(0, 0, 0, .3), 0 22px 40px -18px rgba(0, 0, 0, .7), 0 50px 90px -40px rgba(0, 0, 0, .7);
    --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .4), 0 8px 18px -8px rgba(0, 0, 0, .7);
    --btn-sh-h: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 3px rgba(0, 0, 0, .4), 0 18px 30px -12px rgba(0, 0, 0, .8);
    --btn-sh-a: inset 0 2px 6px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .4);
    --ghost-sh: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 1px rgba(0, 0, 0, .4), 0 8px 18px -12px rgba(0, 0, 0, .7);
    --ghost-sh-h: 0 2px 3px rgba(0, 0, 0, .4), 0 18px 30px -14px rgba(0, 0, 0, .8);
    --sphere-a: #4A4843; --sphere-b: #262522; --sphere-c: #121211;
  }
}
:root[data-theme="dark"] {
  --sh-1: 0 1px 1px rgba(0, 0, 0, .3), 0 2px 6px -2px rgba(0, 0, 0, .4);
  --sh-2: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 28px -14px rgba(0, 0, 0, .6), 0 30px 60px -36px rgba(0, 0, 0, .6);
  --sh-3: 0 2px 2px rgba(0, 0, 0, .3), 0 22px 40px -18px rgba(0, 0, 0, .7), 0 50px 90px -40px rgba(0, 0, 0, .7);
  --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .4), 0 8px 18px -8px rgba(0, 0, 0, .7);
  --btn-sh-h: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 3px rgba(0, 0, 0, .4), 0 18px 30px -12px rgba(0, 0, 0, .8);
  --btn-sh-a: inset 0 2px 6px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .4);
  --ghost-sh: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 1px rgba(0, 0, 0, .4), 0 8px 18px -12px rgba(0, 0, 0, .7);
  --ghost-sh-h: 0 2px 3px rgba(0, 0, 0, .4), 0 18px 30px -14px rgba(0, 0, 0, .8);
  --sphere-a: #4A4843; --sphere-b: #262522; --sphere-c: #121211;
}

/* ---------- Transitions entre pages ---------- */
[data-view].active { animation: d-viewIn .7s var(--ease) backwards; transform-origin: 50% 0; }
@keyframes d-viewIn {
  from { opacity: 0; transform: perspective(1400px) translate3d(0, 26px, -60px) rotateX(4deg); }
  to { opacity: 1; transform: none; }
}

/* ---------- Boutons en relief ---------- */
.btn {
  box-shadow: var(--btn-sh);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn:hover { transform: perspective(600px) translate3d(0, -3px, 14px); box-shadow: var(--btn-sh-h); }
.btn:active { transform: perspective(600px) translate3d(0, 1px, -6px) scale(.985); box-shadow: var(--btn-sh-a); transition-duration: .08s; }
.btn.ghost { box-shadow: var(--ghost-sh); background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%); }
.btn.ghost:hover { box-shadow: var(--ghost-sh-h); background-image: none; }
.btn.ghost:active { box-shadow: var(--btn-sh-a); }
.btn.brass { background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%); }
.band .btn.ghost { background-image: none; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .6); }
.btn[disabled], .btn[aria-disabled="true"] { box-shadow: none; transform: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.ghost { background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%); } }
:root[data-theme="dark"] .btn.ghost { background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%); }

.chip, .icon-btn, .rv-opt span { box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .2s, color .2s, border-color .2s; }
button.chip:hover, .icon-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
button.chip:active, .icon-btn:active { transform: translateY(1px); box-shadow: none; }
.site-header.scrolled { box-shadow: 0 12px 30px -24px rgba(20, 20, 19, .35); }

/* ---------- Titres : léger relief ---------- */
.final .big { text-shadow: 0 20px 40px rgba(20, 20, 19, .10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .final .big { text-shadow: 0 22px 34px rgba(0, 0, 0, .5); } }
:root[data-theme="dark"] .final .big { text-shadow: 0 22px 34px rgba(0, 0, 0, .5); }

/* ---------- Cartes et surfaces ---------- */
.rv-card, .form-box, .admin-panel, .rv-empty, .rv-panel .form-box { box-shadow: var(--sh-2); }
.rv-card { animation-fill-mode: backwards; }
.rv-card.d-pre, .rv-card.d-in { animation: none; }
.pcard .im { box-shadow: var(--sh-2); transition: box-shadow .5s var(--ease); }
.preview { box-shadow: var(--sh-3); }
.preview.fade-up { animation-fill-mode: backwards; }
.steps li h3, .perks h3 { transition: transform .5s var(--ease); }
.steps li:hover h3, .perks div:hover h3 { transform: translateX(4px); }

/* Inclinaison 3D au survol (activée par depth.js sur souris uniquement) */
.d-tilt {
  transform: perspective(var(--d-persp)) translate3d(0, var(--py, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
  transform-style: preserve-3d;
  transition: transform .7s var(--ease), box-shadow .5s var(--ease), border-color .25s;
  will-change: transform;
}
.d-tilt.d-move { transition: transform .14s linear, box-shadow .5s var(--ease), border-color .25s; }
.d-tilt.d-hot { --tz: 12px; }
.rv-card.d-tilt:hover { transform: perspective(var(--d-persp)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(12px); box-shadow: var(--sh-3); }
.pcard.d-tilt .meta { transform: translateZ(18px); transition: transform .5s var(--ease); }
.pcard.d-hot .im { box-shadow: var(--sh-3); }
.preview.d-hot { box-shadow: var(--sh-3), 0 0 0 1px rgba(20, 20, 19, .04); }

/* ---------- Apparitions en profondeur ---------- */
.rv { transition: opacity .9s var(--ease), transform .9s var(--ease); transform-origin: 50% 100%; }
.rv.pre { opacity: 0; transform: perspective(1200px) translate3d(0, 34px, -40px) rotateX(8deg); }
.d-pre { opacity: 0; transform: perspective(1200px) translate3d(0, 40px, -60px) rotateX(10deg); }
.d-in { transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d-i, 0) * 70ms); }
.pcard.d-pre img { transform: scale(1.12); }
.pcard.d-in img { transition: transform 1.4s var(--ease); transition-delay: calc(var(--d-i, 0) * 70ms); }

/* ---------- Objets sculpturaux flottants (accueil) ---------- */
.hero { position: relative; isolation: isolate; }
.hero > .wrap { position: relative; z-index: 1; }
.hero .preview { z-index: 1; }
.d-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.d-p { position: absolute; transform: translate3d(calc(var(--mx, 0) * var(--d) * 22px), calc(var(--my, 0) * var(--d) * 16px + var(--sy, 0px) * var(--d) * -0.18), 0); will-change: transform; }
.d-p > i { display: block; animation: d-float var(--t, 9s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
@keyframes d-float { from { transform: translate3d(0, -7px, 0) rotate(-2deg); } to { transform: translate3d(0, 9px, 0) rotate(2deg); } }
.d-sphere { width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--sphere-a) 0%, var(--sphere-b) 46%, var(--sphere-c) 100%); box-shadow: inset -10px -14px 30px rgba(20, 20, 19, .10), 0 30px 50px -26px rgba(20, 20, 19, .35); }
.d-ring { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--brass); opacity: .75; transform-style: preserve-3d; }
.d-ring-w { perspective: 600px; }
.d-ring-w > i { animation-name: d-ring; }
@keyframes d-ring { from { transform: rotateX(68deg) rotateZ(0deg) translateY(-4px); } to { transform: rotateX(72deg) rotateZ(40deg) translateY(6px); } }
.d-slab { width: 100%; aspect-ratio: 1.6; background: linear-gradient(135deg, var(--surface), var(--line)); border: 1px solid var(--line); border-radius: 2px; transform: rotateX(58deg) rotateZ(-32deg); box-shadow: 0 40px 50px -30px rgba(20, 20, 19, .35); }
.d-slab-w { perspective: 700px; }
.d-slab-w > i { animation-name: d-slab; }
@keyframes d-slab { from { transform: rotateX(58deg) rotateZ(-32deg) translateZ(0); } to { transform: rotateX(56deg) rotateZ(-26deg) translateZ(14px); } }

.d-s1 { --d: .7; width: 54px; left: 41%; top: 9%; --t: 8s; }
.d-r1 { --d: .9; width: 104px; left: calc(41% - 25px); top: calc(9% - 25px); --t: 11s; }
.d-s2 { --d: 1.1; width: 170px; left: calc(52% - 112px); bottom: 3%; --t: 10s; --dl: -3s; }
.d-sl { --d: .5; width: 120px; right: 1%; top: 2%; --t: 12s; --dl: -5s; }
@media (max-width: 900px) {
  .d-s1 { left: auto; right: 22px; top: 70px; width: 40px; }
  .d-r1 { left: auto; right: 4px; top: 52px; width: 76px; }
  .d-s2, .d-sl { display: none; }
}

/* ---------- Écrans tactiles : version allégée ---------- */
@media (hover: none), (pointer: coarse) {
  .btn:hover { transform: none; box-shadow: var(--btn-sh); }
  .btn.ghost:hover { box-shadow: var(--ghost-sh); }
  .rv-card:hover, .rv-card.d-tilt:hover { transform: none; }
  .d-pre { transform: translate3d(0, 26px, 0); }
  .rv.pre { transform: translate3d(0, 24px, 0); }
}

/* ---------- Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-view].active { animation: none; }
  .btn, .btn:hover, .btn:active, button.chip:hover, .icon-btn:hover { transform: none; transition: background-color .2s, color .2s; }
  .rv, .rv.pre, .d-pre, .d-in { opacity: 1; transform: none; transition: none; }
  .pcard.d-pre img { transform: none; }
  .d-tilt, .d-tilt:hover, .rv-card.d-tilt:hover { transform: none; transition: none; }
  .d-p { transform: none; }
  .d-p > i { animation: none; }
}

/* ---------- Bloc image de l'accueil : forme organique (univers du logo) ---------- */
.hero .preview {
  --org: 42% 30% 24% 34% / 30% 24% 20% 26%;
  --org-h: 36% 36% 28% 30% / 27% 29% 23% 25%;
  border-radius: var(--org);
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* découpe nette sous Safari */
  box-shadow:
    0 2px 4px rgba(23, 21, 21, .05),
    0 22px 44px -22px rgba(23, 21, 21, .30),
    0 46px 90px -46px rgba(101, 29, 50, .40);
  transition: border-radius .9s var(--ease), box-shadow .6s var(--ease), transform .7s var(--ease);
}
/* Volume « gonflé » : reflet doux en haut, ombre intérieure bordeaux en bas */
.hero .preview::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 55% at 30% -6%, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 58%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 -30px 60px -28px rgba(101, 29, 50, .26),
    inset -14px 0 40px -30px rgba(23, 21, 21, .20);
  transition: opacity .6s var(--ease);
}
.hero .preview .cap { left: 13%; right: 11%; bottom: 7%; }
.hero .preview:hover, .hero .preview:focus-visible {
  border-radius: var(--org-h);
  box-shadow:
    0 3px 6px rgba(23, 21, 21, .06),
    0 30px 56px -24px rgba(23, 21, 21, .34),
    0 64px 110px -50px rgba(101, 29, 50, .48);
}
.hero .preview.d-hot { --tz: 16px; }
.hero .preview:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }
:root[data-theme="dark"] .hero .preview {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -22px rgba(0, 0, 0, .7), 0 50px 100px -40px rgba(101, 29, 50, .65);
}
:root[data-theme="dark"] .hero .preview:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35), 0 32px 60px -24px rgba(0, 0, 0, .75), 0 70px 120px -44px rgba(101, 29, 50, .8);
}
@media (max-width: 860px) {
  .hero .preview { --org: 34% 26% 22% 28% / 30% 26% 24% 28%; --org-h: var(--org); }
  .hero .preview .cap { left: 8%; right: 7%; bottom: 8%; }
}
@media (hover: none), (pointer: coarse) { .hero .preview:hover { border-radius: var(--org); } }
@media (prefers-reduced-motion: reduce) { .hero .preview, .hero .preview:hover { transition: none; border-radius: var(--org); } }
@media (max-width: 560px) {
  .hero .preview .cap { gap: 6px; }
  .hero .preview .cap b { white-space: nowrap; padding: 7px 10px; font-size: 10px; letter-spacing: .04em; }
}