/* ------------------------------------------------------------
   Pista Studio · Profondeur (v1)
   Couche ajoutée par-dessus style.css: plans, élévation, 3D.
   Le site reste noir sur blanc; la profondeur vient de la lumière,
   des ombres et du mouvement, jamais de la couleur.
   ------------------------------------------------------------ */
:root {
  --papier: #fbfaf7;
  --ombre-1: 0 1px 1px rgba(10, 10, 10, 0.03), 0 2px 6px rgba(10, 10, 10, 0.04);
  --ombre-2: 0 1px 2px rgba(10, 10, 10, 0.04), 0 10px 28px -10px rgba(10, 10, 10, 0.16);
  --ombre-3: 0 2px 6px rgba(10, 10, 10, 0.05), 0 34px 70px -28px rgba(10, 10, 10, 0.38), 0 14px 28px -18px rgba(10, 10, 10, 0.2);
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gris-moyen: #62625e; /* lisibilité: texte secondaire un cran plus foncé */
}
body.nuit {
  --papier: #1b1b1a;
  --ombre-1: 0 1px 1px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --ombre-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px -10px rgba(0, 0, 0, 0.7);
  --ombre-3: 0 2px 6px rgba(0, 0, 0, 0.5), 0 36px 70px -26px rgba(0, 0, 0, 0.9);
  --gris-moyen: #a5a49e;
}

/* ---------- En-tête: verre dépoli qui prend de la hauteur au défilement ---------- */
.site-header { transition: box-shadow 0.35s var(--courbe), background-color 0.35s ease; }
.site-header.prof-defile { box-shadow: 0 10px 30px -18px rgba(10, 10, 10, 0.35); border-bottom-color: transparent; }
body.nuit .site-header.prof-defile { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.9); }

/* ---------- Boutons: un relief discret, une pression au clic ---------- */
.btn { transition: transform 0.25s var(--courbe), box-shadow 0.25s var(--courbe), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn-primary { box-shadow: 0 6px 16px -8px rgba(10, 10, 10, 0.55); }
.btn-primary:hover, .btn-secondary:hover, .btn-creme:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 12px 24px -10px rgba(10, 10, 10, 0.5); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }
body.nuit .btn-primary { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.9); }

/* ---------- Cartes en relief: plans qui se détachent du fond ---------- */
.expertises { border: none; gap: 1.25rem; }
.expertise, .expertise + .expertise {
  background: var(--papier); border: 1px solid var(--filet); border-left: 1px solid var(--filet);
  padding: 2.25rem 2rem; box-shadow: var(--ombre-1);
}
.specs { border: none; gap: 1rem; }
.spec, .spec:last-child { background: var(--papier); border: 1px solid var(--filet); box-shadow: var(--ombre-1); }
.forfait, .carte-cat, .marche-item, .work-item { background: var(--papier); box-shadow: var(--ombre-1); }
.expertise, .spec, .forfait, .carte-cat, .psm-carte, .svc-row, .work-item {
  transition: transform 0.5s var(--courbe), box-shadow 0.5s var(--courbe), border-color 0.3s ease, padding-left 0.4s var(--courbe);
}
.expertise:hover, .spec:hover, .forfait:hover, .carte-cat:hover, .work-item:hover { box-shadow: var(--ombre-3); border-color: transparent; }
@media (max-width: 860px) { .expertises, .specs { gap: 0.75rem; } }

/* Les leviers (Services, Technique): chaque rangée devient un plan qui se soulève */
.svc-row { background: transparent; border-radius: 2px; }
.svc-row:hover { background: var(--papier); box-shadow: var(--ombre-3); border-bottom-color: transparent; padding-left: clamp(1.25rem, 3vw, 2.25rem); }
.svc-row .svc-ghost { transition: transform 0.6s var(--courbe), -webkit-text-stroke-color 0.4s ease; }
.svc-row:hover .svc-ghost { transform: translateY(-50%) translateX(-2rem) scale(1.04); }

/* ---------- 3D: inclinaison au pointeur, reflet et éléments en avant-plan ---------- */
.prof-3d { transform-style: preserve-3d; will-change: transform; }
.prof-3d > * { transform: translateZ(0); }
.prof-3d .prof-avant { transform: translateZ(36px); transition: transform 0.5s var(--courbe); }
.prof-reflet {
  position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit;
  background: radial-gradient(520px circle at var(--rx, 50%) var(--ry, 0%), rgba(255, 255, 255, 0.55), transparent 42%);
  opacity: 0; transition: opacity 0.4s ease; mix-blend-mode: soft-light;
}
.prof-3d:hover .prof-reflet { opacity: 1; }
body.nuit .prof-reflet { background: radial-gradient(520px circle at var(--rx, 50%) var(--ry, 0%), rgba(255, 255, 255, 0.12), transparent 42%); mix-blend-mode: normal; }

/* ---------- Apparition: les blocs arrivent de la profondeur ---------- */
html.js-ok .reveal { transform: perspective(1200px) translate3d(0, 34px, -60px) rotateX(5deg); transform-origin: 50% 100%; transition: opacity 0.9s ease, transform 1s var(--courbe); }
html.js-ok .reveal.visible { transform: none; }

/* ---------- Héros intérieurs: une piste en perspective qui file vers l'horizon ---------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -4%; bottom: -2%; width: 66%; height: 190%;
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(10, 10, 10, 0.16) 79px 80px),
    repeating-linear-gradient(0deg, transparent 0 55px, rgba(10, 10, 10, 0.1) 55px 56px);
  transform: perspective(560px) rotateX(55deg) rotateZ(-12deg) translateY(var(--prof-y, 0px));
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 55% 78%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 62% 60% at 55% 78%, #000 25%, transparent 75%);
}
.page-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: 21%; top: 58%; width: 9px; height: 9px; border-radius: 50%; background: var(--rouge);
  box-shadow: 0 0 0 6px rgba(224, 35, 26, 0.12), 0 0 34px 6px rgba(224, 35, 26, 0.35);
  transform: translateY(calc(var(--prof-y, 0px) * -0.6));
  animation: prof-pouls 3.2s ease-in-out infinite;
}
@keyframes prof-pouls { 50% { box-shadow: 0 0 0 12px rgba(224, 35, 26, 0.06), 0 0 46px 10px rgba(224, 35, 26, 0.22); } }
body.nuit .page-hero::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(244, 243, 238, 0.14) 79px 80px),
    repeating-linear-gradient(0deg, transparent 0 55px, rgba(244, 243, 238, 0.08) 55px 56px);
}
@media (max-width: 760px) { .page-hero::before { width: 120%; right: -40%; opacity: 0.6; } .page-hero::after { right: 10%; top: 20%; } }
.page-hero h1 { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
body.nuit .page-hero h1 { text-shadow: none; }

/* ---------- Héros d'accueil: la piste en 3D ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.prof-scene { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 62%; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.prof-scene.pret { opacity: 1; }
.prof-scene canvas { width: 100% !important; height: 100% !important; display: block; }
.prof-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--creme) 0%, transparent 28%), linear-gradient(to top, var(--creme) 0%, transparent 22%); }
@media (max-width: 900px) { .prof-scene { width: 100%; opacity: 0; } .prof-scene.pret { opacity: 0.45; } .prof-scene::after { background: linear-gradient(to right, var(--creme) 0%, rgba(244,243,238,0.5) 60%, transparent 100%), linear-gradient(to top, var(--creme) 0%, transparent 30%); } }
body.nuit .prof-scene::after { background: linear-gradient(to right, var(--creme) 0%, transparent 28%), linear-gradient(to top, var(--creme) 0%, transparent 22%); }

/* ---------- Panneaux noirs: lumière d'ambiance et grain ---------- */
.panel-noir, .track-panel { position: relative; isolation: isolate; }
.panel-noir::before, .track-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 90% at 85% 0%, rgba(224, 35, 26, 0.16), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(244, 243, 238, 0.06), transparent 65%);
}
.panel-noir::after, .track-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.panel-noir > .container, .track-panel > .container { position: relative; z-index: 1; }
.track-svg, .track-dot { z-index: 1; }

/* ---------- Photos: la bande d'accueil flotte au-dessus de la page ---------- */
.bande-cadre { box-shadow: var(--ombre-3); }
.psm-escale .psm-media, .psm-journee-media .psm-media, .psm-location { box-shadow: var(--ombre-3); }

/* ---------- Rouge: le panneau d'appel prend du volume ---------- */
.panel-rouge { position: relative; isolation: isolate; overflow: hidden; }
.panel-rouge::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%), radial-gradient(60% 90% at 0% 100%, rgba(0, 0, 0, 0.22), transparent 60%); }

/* ---------- Barre de progression de lecture ---------- */
.prof-progres { position: fixed; z-index: 120; top: 0; left: 0; height: 2px; width: 100%; background: var(--rouge); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html.js-ok .reveal { transform: none; }
  .page-hero::after { animation: none; }
  .prof-3d, .prof-3d .prof-avant { transform: none !important; }
  .prof-scene { display: none; }
}
@media print { .prof-scene, .prof-progres, .page-hero::before, .page-hero::after { display: none; } }

/* ------------------------------------------------------------
   Photos v1 · SEM, Services, Tarifs, Accueil
   ------------------------------------------------------------ */
/* SEM: la bande reprend le composant de l'accueil, sans <picture> */
.bande-photo--sem { padding-top: 0; }
@media (max-width: 700px) {
  .bande-photo--sem .bande-cadre img { position: relative; display: block; height: clamp(240px, 70vw, 420px); }
}

/* Services: certaines rangées s'ouvrent sur une photo */
.svc-row--photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.svc-row--photo .svc-ghost { right: auto; left: 46%; }
.svc-photo { position: relative; z-index: 1; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: #0a0a0a; box-shadow: var(--ombre-2); transition: box-shadow 0.5s var(--courbe); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.2s var(--courbe); }
.svc-row--photo:hover .svc-photo { box-shadow: var(--ombre-3); }
.svc-row--photo:hover .svc-photo img { transform: scale(1); }
.svc-photo::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--courbe); }
.svc-row--photo:hover .svc-photo::after { transform: scaleX(1); }
@media (max-width: 760px) {
  .svc-row--photo { grid-template-columns: 1fr; gap: 1.5rem; }
  .svc-row--photo .svc-ghost { left: auto; right: 0; top: 30%; }
  .svc-photo { aspect-ratio: 16 / 10; }
}

/* Tarifs: la règle repose sur une barre de feux, comme une ligne d'arrivée */
.panel-feux { background: #000; overflow: hidden; min-height: clamp(460px, 54vw, 760px); }
.panel-feux::before { z-index: 1; background: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0, 0, 0, 0) 48%); }
.panel-feux .panel-feux-img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; object-fit: cover; object-position: 50% 64%; z-index: 0; transform: scale(1.06); transform-origin: 50% 70%; transition: transform 2.4s var(--courbe); }
.panel-feux.visible .panel-feux-img { transform: scale(1); }
.panel-feux > .container { z-index: 2; }
@media (max-width: 700px) { .panel-feux { min-height: 540px; } .panel-feux .panel-feux-img { height: 64%; } }

/* Accueil: « vos ventes » en deux colonnes, texte et photo */
.duo-photo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.duo-figure { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: #0a0a0a; box-shadow: var(--ombre-3); }
.duo-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 62%; display: block; transform: scale(1.08); transition: transform 1.6s var(--courbe); }
.reveal.visible .duo-figure img { transform: scale(1); }
.duo-figure::after { content: ""; position: absolute; right: 1.25rem; bottom: 1.25rem; width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 6px rgba(224, 35, 26, 0.18), 0 0 30px 6px rgba(224, 35, 26, 0.45); }
@media (max-width: 900px) {
  .duo-photo { grid-template-columns: 1fr; }
  .duo-figure { aspect-ratio: 16 / 11; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-photo img, .duo-figure img, .panel-feux .panel-feux-img { transform: none !important; transition: none; }
}