/* ============================================================
   PHONOMAKER — PAGE STUDIO
   Feuille de style dédiée (chargée uniquement sur la page Studio)
   Palette canonique : #CF3417 / #1B4082 / #6BB0C5
   ============================================================ */

/* ---------- POLICES ---------- */
@font-face {
  font-family: "Impact";
  src: url("./fonts/Impact.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
.pm-studio {
  --pm-ink:        #1F2221;
  --pm-paper:      #F0E7D2;
  --pm-orange:     #CF3417;
  --pm-blue:       #1B4082;
  --pm-cyan:       #6BB0C5;
  --pm-ink-80:     #3D403F;
  --pm-ink-60:     #6B6E6D;
  --pm-ink-40:     #9A9C9B;
  --pm-ink-20:     #C9CACA;
  --pm-orange-tint:#F7DDD6;
  --pm-font-display: "Impact", "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --pm-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pm-font-script:  "Caveat", "Highest Praise", "Bradley Hand", cursive;
  --pm-font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  background: #F0E7D2;
  color: var(--pm-ink);
  font-family: var(--pm-font-body);
  overflow-x: clip; /* clip (et non hidden) : coupe le débordement horizontal SANS casser position:sticky */
}
.pm-studio ::selection { background: var(--pm-orange); color: #F0E7D2; }

/* ---------- UTILITAIRES ---------- */
.pm-studio .pm-container { max-width: 1240px; margin: 0 auto; }
.pm-studio .pm-eyebrow  { font: 700 11px/1 var(--pm-font-body); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- CORRECTIF DIVI ----------
   Divi applique globalement `h1..h6 { color:#333; padding-bottom:10px }`
   qui écrase les titres de la page (gris sur fond sombre, etc.).
   On rend la couleur héritée du contexte et on neutralise le padding.
   (Le dequeue Divi côté functions.php reste recommandé — voir LISEZ-MOI —
   ceci est un filet de sécurité haute-spécificité.)              */
.pm-studio h1, .pm-studio h2, .pm-studio h3,
.pm-studio h4, .pm-studio h5, .pm-studio h6 {
  color: inherit;
  padding-bottom: 0;
}

/* ---------- ANIMATIONS ---------- */
@keyframes stBlob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px,-30px) scale(1.12); } }
@keyframes stMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes stRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.pm-studio .reveal { opacity: 0; }
.pm-studio .reveal.is-in { animation: stRise .7s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  .pm-studio .reveal { opacity: 1; }
  .pm-studio .reveal.is-in { animation: none; }
  .pm-studio .stmarq-track { animation: none; }
}

/* ---------- HERO — cluster photo (grosse régie + accent) ---------- */
.pm-studio .hero-photo-cluster { position: relative; margin-left: clamp(0px, 3vw, 48px); }
.pm-studio .hero-photo-main { position: relative; transform: rotate(-1.4deg); }
.pm-studio .hero-photo-main .img { aspect-ratio: 3/2; background-size: cover; background-position: center; border: 2px solid #F0E7D2; box-shadow: 16px 16px 0 0 var(--pm-orange); }

/* Boucle vidéo du hero : même cadre que la photo (poster affiché tant que la vidéo n'est pas là) */
.pm-studio .hero-video {
  display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover;
  background: var(--pm-ink);
  border: 2px solid #F0E7D2; box-shadow: 16px 16px 0 0 var(--pm-orange);
}

.pm-studio .hero-photo-accent { position: absolute; left: -12px; bottom: -52px; width: 190px; transform: rotate(3deg); z-index: 3; }
.pm-studio .hero-photo-accent .img { aspect-ratio: 3/4; background-size: cover; background-position: center; border: 2px solid #F0E7D2; box-shadow: 8px 8px 0 0 var(--pm-ink); }
.pm-studio .hero-tag { position: absolute; bottom: -16px; right: -6px; font-family: var(--pm-font-script); font-size: 30px; color: #F0E7D2; background: var(--pm-orange); padding: 2px 14px; transform: rotate(-3deg); z-index: 4; }

/* ============================================================
   SECTION VIDÉO — « Visite le studio » (lecture à la demande)
   ============================================================ */
.pm-studio .st-film { position: relative; max-width: 960px; margin: 0 auto; border: 2px solid #F0E7D2; box-shadow: 14px 14px 0 0 var(--pm-orange); background: #000; }
.pm-studio .st-film-video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.pm-studio .st-film-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(26,24,21,.32); border: 0; cursor: pointer; padding: 0;
  transition: background .25s ease;
}
.pm-studio .st-film-play:hover { background: rgba(26,24,21,.16); }
.pm-studio .st-film-play-btn {
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pm-orange); color: #F0E7D2; border: 2px solid #F0E7D2;
  box-shadow: 5px 5px 0 0 #F0E7D2; transition: transform .15s cubic-bezier(.22,.61,.36,1), box-shadow .15s;
}
.pm-studio .st-film-play-btn svg { width: 32px; height: 32px; margin-left: 4px; }
.pm-studio .st-film-play:hover .st-film-play-btn { transform: translate(3px,3px); box-shadow: 2px 2px 0 0 #F0E7D2; }
.pm-studio .st-film-play-label {
  font: 700 12px/1 var(--pm-font-body); text-transform: uppercase; letter-spacing: .12em;
  color: #F0E7D2; background: var(--pm-ink); padding: 9px 14px; border: 1.5px solid #F0E7D2;
}
.pm-studio .st-film.is-playing .st-film-play { display: none; }
@media (max-width: 620px) {
  .pm-studio .st-film-play-btn { width: 64px; height: 64px; }
  .pm-studio .st-film-play-btn svg { width: 24px; height: 24px; }
}

/* ---------- Icônes dans les onglets équipements ---------- */
.pm-studio .eq-tab { display: inline-flex; align-items: center; gap: 9px; }
.pm-studio .eq-tab img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.pm-studio .eq-tab.is-active img { filter: none; }

/* ---------- GRILLES ---------- */
.pm-studio .hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.pm-studio .svc-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pm-studio .tar-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.pm-studio .eq-grid   { display: grid; grid-template-columns: .92fr 1.08fr; gap: 44px; align-items: start; }
.pm-studio .snav-scroll { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-studio .stmarq-track { display: flex; gap: 42px; align-items: center; white-space: nowrap; animation: stMarq 26s linear infinite; will-change: transform; }
.pm-studio section[id] { scroll-margin-top: 130px; }

/* ---------- DOT RAIL (desktop) — points seuls, libellé au survol ----------
   Caché tant qu'on est sur le hero ; apparaît une fois passé dessous.
   Points seuls → ne chevauche plus le texte ni les photos.          */
.pm-studio .dotrail {
  position: fixed; left: 20px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 16px;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.pm-studio .dotrail.is-visible { opacity: 1; pointer-events: auto; }
.pm-studio .dotrail button { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 0; position: relative; }
.pm-studio .dotrail .dr-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--pm-ink-40); background: transparent; flex: none; transition: all .2s; }
.pm-studio .dotrail .dr-label {
  font: 600 10px/1 var(--pm-font-body); text-transform: uppercase; letter-spacing: .1em;
  color: var(--pm-ink); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-6px); transition: all .2s;
  background: rgba(240,231,210,.95); padding: 5px 9px; border: 1px solid var(--pm-ink-20);
}
.pm-studio .dotrail button:hover .dr-label { opacity: 1; transform: translateX(0); }
.pm-studio .dotrail button.is-active .dr-dot { border-color: var(--pm-orange); background: var(--pm-orange); transform: scale(1.15); }
/* Teinte des points quand le rail se trouve devant une section sombre */
.pm-studio .dotrail.on-dark .dr-dot { border-color: rgba(240,231,210,.5); }
.pm-studio .dotrail.on-dark button.is-active .dr-dot { border-color: var(--pm-orange); background: var(--pm-orange); }

/* ---------- SOUS-NAV (scroll-spy) ---------- */
.pm-studio .snav-link { flex: none; font: 700 12px/1 var(--pm-font-body); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; padding: 10px 12px; color: var(--pm-ink); border-bottom: 3px solid transparent; }
.pm-studio .snav-link.is-active { color: var(--pm-orange); border-bottom-color: var(--pm-orange); }

/* ---------- ONGLETS ÉQUIPEMENTS ---------- */
.pm-studio .eq-tab { flex: none; font: 700 12px/1 var(--pm-font-body); text-transform: uppercase; letter-spacing: .08em; padding: 13px 18px; cursor: pointer; border: 1.5px solid #F0E7D2; border-bottom: 0; background: transparent; color: #F0E7D2; }
.pm-studio .eq-tab.is-active { background: #F0E7D2; color: var(--pm-ink); box-shadow: 4px 4px 0 0 var(--pm-orange); }
.pm-studio .eq-panel { display: none; }
.pm-studio .eq-panel.is-active { display: grid; }
.pm-studio .eq-cols { column-count: 2; column-gap: 34px; }

/* ---------- HOVERS (neobrutalist push) ---------- */
.pm-studio .st-card:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 0 var(--pm-orange) !important; }
.pm-studio .st-push-paper:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 #F0E7D2 !important; }
.pm-studio .st-push-paper-lg:hover { transform: translate(3px,3px); box-shadow: 1px 1px 0 0 #F0E7D2 !important; }
.pm-studio .st-invert:hover { background: #F0E7D2 !important; color: var(--pm-orange) !important; }

/* ---------- RETOUR HAUT DE PAGE (adaptatif) ---------- */
.pm-studio #studioTop {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  width: 52px; height: 52px; border: 1.5px solid currentColor;
  background: var(--pm-ink); color: #F0E7D2;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 3px 3px 0 0 var(--pm-orange);
  transition: transform .15s, box-shadow .15s, opacity .25s, background .25s, color .25s;
  opacity: 0; pointer-events: none;
}
.pm-studio #studioTop.is-visible { opacity: 1; pointer-events: auto; }
.pm-studio #studioTop.on-dark { background: #F0E7D2; color: var(--pm-ink); }
.pm-studio #studioTop:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--pm-orange); }

/* ---------- CURSEUR CUSTOM — SUPPRIMÉ (v19) ----------
   On force le curseur système partout, y compris si un reliquat de
   markup/JS réapparaissait. */
html, html * { cursor: auto; }
.pm-studio #studioCursor { display: none !important; }

/* ============================================================
   HEADER — géré par pm-global-header.css (commun à toutes les pages).
   On conserve ici uniquement le positionnement de la sous-nav Studio
   qui se cale juste sous le header fixe (hauteur 64px).
   ============================================================ */
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }

.pm-studio .st-sticky-subnav { top: 64px; }

/* ---------- FOOTER — hovers ---------- */
.pm-studio .st-footer a:hover { color: #F0E7D2 !important; opacity: 1; }
.pm-studio .st-ig .ig-tile { aspect-ratio: 1/1; background: rgba(26,24,21,.04); border: 1px solid rgba(26,24,21,.08); display: flex; align-items: center; justify-content: center; color: rgba(26,24,21,.25); transition: all .3s ease; }
.pm-studio .st-ig .ig-tile:hover { background: rgba(207,52,23,.1); border-color: rgba(207,52,23,.5); color: var(--pm-orange); transform: scale(1.02); }

/* ---------- BARRE ADMIN WORDPRESS ----------
   Le header global (.pm-global-header) gère son propre top:32/46px
   via pm-global-header.css. On corrige ici uniquement la sous-nav Studio. */
body.admin-bar .pm-studio .st-sticky-subnav { top: 96px; }
@media screen and (max-width: 782px) {
  body.admin-bar .pm-studio .st-sticky-subnav { top: 110px; }
}

/* ============================================================
   CARROUSEL « Tu peux dormir sur place »
   scroll-snap tactile + flèches + points, desktop et mobile
   ============================================================ */
.pm-studio .st-carousel { position: relative; width: 100%; border: 2px solid var(--pm-ink); box-shadow: 12px 12px 0 0 var(--pm-blue); overflow: hidden; }
.pm-studio .st-carousel-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pm-studio .st-carousel-track::-webkit-scrollbar { display: none; }
.pm-studio .st-slide { flex: 0 0 100%; scroll-snap-align: start; }
.pm-studio .st-slide .img { aspect-ratio: 4/3; background-size: cover; background-position: center; display: block; }

.pm-studio .st-car-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--pm-ink); color: #F0E7D2; border: 1.5px solid #F0E7D2;
  cursor: pointer; z-index: 3; transition: opacity .2s, transform .12s, background .2s;
}
.pm-studio .st-car-arrow svg { width: 20px; height: 20px; }
.pm-studio .st-car-arrow:hover { background: var(--pm-orange); }
.pm-studio .st-car-prev { left: 10px; }
.pm-studio .st-car-next { right: 10px; }
.pm-studio .st-car-arrow[disabled] { opacity: 0; pointer-events: none; }

.pm-studio .st-car-dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.pm-studio .st-car-dots button {
  width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid var(--pm-ink); background: transparent; transition: all .2s;
}
.pm-studio .st-car-dots button.is-active { background: var(--pm-orange); border-color: var(--pm-orange); transform: scale(1.2); }

@media (max-width: 1023px) {
  .pm-studio .st-sleep-media { max-width: 100%; margin: 0 auto; }
  .pm-studio .st-car-arrow { width: 38px; height: 38px; }
}
.pm-studio .st-sleep-media { width: 100%; }

/* ============================================================
   CTA « Réserver le studio » dans chaque section de service
   ============================================================ */
.pm-studio .svc-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font: 700 12px/1 var(--pm-font-body); text-transform: uppercase; letter-spacing: .1em;
  padding: 15px 24px; text-decoration: none;
  transition: transform .15s cubic-bezier(.22,.61,.36,1), box-shadow .15s;
}
/* sur fond clair : bouton sombre, ombre orange */
.pm-studio .svc-cta.on-light { background: var(--pm-ink); color: #F0E7D2; border: 1.5px solid var(--pm-ink); box-shadow: 4px 4px 0 0 var(--pm-orange); }
.pm-studio .svc-cta.on-light:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--pm-orange); }
/* sur fond sombre : bouton crème, ombre orange */
.pm-studio .svc-cta.on-dark { background: #F0E7D2; color: var(--pm-ink); border: 1.5px solid #F0E7D2; box-shadow: 4px 4px 0 0 var(--pm-orange); }
.pm-studio .svc-cta.on-dark:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--pm-orange); }

/* ============================================================
   Indicateur de défilement horizontal (mobile)
   → flèche + dégradé sur la droite des barres d'onglets scrollables
   ============================================================ */
.pm-studio .st-scroller { position: relative; }
.pm-studio .st-scroller::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 52px;
  pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 3;
}
.pm-studio .st-scroller.has-more::after { opacity: 1; }
/* dégradé crème pour la sous-nav (fond clair) */
.pm-studio .st-sticky-subnav .st-scroller::after { background: linear-gradient(90deg, rgba(240,231,210,0), rgba(240,231,210,.95) 70%); }
/* dégradé sombre pour les onglets équipements (fond sombre) */
.pm-studio .eq-scroller::after { background: linear-gradient(90deg, rgba(31,34,33,0), rgba(31,34,33,.95) 70%); }
.pm-studio .st-scroller-arrow {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: none;
  align-items: center; justify-content: center; z-index: 4; pointer-events: none;
  animation: stNudge 1.4s ease-in-out infinite;
}
.pm-studio .st-scroller.has-more .st-scroller-arrow { display: inline-flex; }
.pm-studio .st-sticky-subnav .st-scroller-arrow { background: var(--pm-orange); color: #F0E7D2; }
.pm-studio .eq-scroller .st-scroller-arrow { background: var(--pm-orange); color: #F0E7D2; }
.pm-studio .st-scroller-arrow svg { width: 14px; height: 14px; }
@keyframes stNudge { 0%,100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(3px); } }
/* les flèches ne servent qu'au tactile / petit écran */
@media (min-width: 1024px) { .pm-studio .st-scroller::after, .pm-studio .st-scroller-arrow { display: none !important; } }

/* ============================================================
   BURGER MOBILE + OVERLAY — gérés par pm-global-header.css
   (aucun style spécifique Studio nécessaire ici)
   ============================================================ */

/* ---------- RESPONSIVE (Studio uniquement) ---------- */
@media (max-width: 1023px) {
  .pm-studio .dotrail { display: none; }
  .pm-studio .hero-grid,
  .pm-studio .svc-grid,
  .pm-studio .eq-grid { grid-template-columns: 1fr; gap: 40px; }
  .pm-studio .hero-photo-accent { left: 0; bottom: -40px; width: 150px; }
  .pm-studio .hero-photo-cluster { margin-left: 0; }
  .pm-studio .tar-grid { grid-template-columns: 1fr 1fr; }
  .pm-studio .snav-scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pm-studio .snav-scroll::-webkit-scrollbar { display: none; }
  .pm-studio .eq-cols { column-count: 1; }
  /* Footer (commun) */
  .pm-studio .st-footer-cols { grid-template-columns: 1fr 1fr; }
  .pm-studio .st-ig > div:last-child { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 620px) {
  .pm-studio .tar-grid { grid-template-columns: 1fr; }
  .pm-studio .st-footer-cols { grid-template-columns: 1fr; }
  .pm-studio .st-footer-legal { flex-direction: column; gap: 12px; align-items: flex-start; }
  .pm-studio .st-footer-legal > div { flex-wrap: wrap; }
}