/* =========================================================
   Mayhana — carte des soins en 3D (dépliant trois volets)
   Couleurs, polices et mise en page reprises de la carte imprimée.
   Toutes les dimensions intérieures sont en em : la carte se met à l'échelle comme un objet.
   ========================================================= */

@font-face { font-family: "Pagella"; src: url("../fonts/pagella.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Pagella"; src: url("../fonts/pagella-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-light.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  --c-vert: #0f3d33;
  --c-vert-2: #0c3229;
  --c-creme: #f6f1e7;
  --c-or: #c8a25e;
  --c-encre: #1d2925;
  --c-gris: #5d6b64;
  --c-texte: #f3ecdd;
  --c-papier: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Scène ---------- */
.carte3d {
  --ph: min(46rem, 84vh, calc(88vw / 0.4715));
  --pw: calc(var(--ph) * 0.4715);
  --rx-base: 7deg;
  --ry-base: -10deg;
  --vis: 1;
  position: relative;
}
.carte3d[data-state="1"] { --rx-base: 3deg; --ry-base: 2deg; --vis: 2; }
.carte3d[data-state="2"] { --rx-base: 0deg; --ry-base: 0deg; --vis: 3; }
.carte3d[data-state="3"] { --flip: 180deg; --ry-base: 10deg; }

.carte3d__scene {
  position: relative;
  height: calc(var(--ph) + 4.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2600px;
  perspective-origin: 50% 35%;
  overflow-x: clip;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.carte3d[data-state="0"] .carte3d__scene,
.carte3d[data-state="1"] .carte3d__scene,
.carte3d[data-state="3"] .carte3d__scene { cursor: pointer; }

.carte3d__tilt {
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx-base) + var(--rx, 0deg))) rotateY(calc(var(--ry-base) + var(--ry, 0deg)));
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.carte3d__objet {
  display: flex;
  transform-style: preserve-3d;
  transform: translateX(var(--shift, 0px)) rotateY(var(--flip, 0deg));
  transition: transform 1s cubic-bezier(0.65, 0.05, 0.25, 1);
}
.pli {
  flex: none;
  position: relative;
  width: var(--pw);
  height: var(--ph);
  transform-style: preserve-3d;
  transform: translateZ(0px) rotateY(0deg);
  transition: transform 0.95s cubic-bezier(0.65, 0.05, 0.25, 1);
}
.pli--couverture { transform-origin: 100% 50%; }
.pli--rabat { transform-origin: 0% 50%; }
.carte3d[data-state="0"] .pli--couverture,
.carte3d[data-state="3"] .pli--couverture { transform: translateZ(3px) rotateY(180deg); }
.carte3d:not([data-state="2"]) .pli--rabat { transform: translateZ(1.5px) rotateY(-180deg); }

.carte3d__ombre {
  position: absolute;
  left: 50%;
  bottom: 0.4rem;
  width: calc(var(--pw) * var(--vis) * 1.04);
  height: 3rem;
  transform: translateX(calc(-50% + var(--shift, 0px)));
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  filter: blur(4px);
  transition: width 1s cubic-bezier(0.65, 0.05, 0.25, 1), transform 1s cubic-bezier(0.65, 0.05, 0.25, 1);
  pointer-events: none;
}

/* ---------- Faces (communes à la scène et à l'aperçu) ---------- */
.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-family: "Poppins", "Jost", Arial, sans-serif;
  font-size: calc(var(--pw) / 23 * var(--fit, 1));
  line-height: 1.35;
  font-weight: 300;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.face--arriere { transform: rotateY(180deg); }
.face::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--c-papier);
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.face--verte { background: var(--c-vert); color: var(--c-texte); padding: 1.7em 1.75em 1.4em; }
.face--claire { background: var(--c-creme); color: var(--c-encre); }
.face--claire::before { opacity: 0.12; mix-blend-mode: multiply; }
.face--couv { background: var(--c-vert); padding: 1.15em; }
.face h3, .face p { margin: 0; }

/* Ombres des plis, visibles carte ouverte */
.face--pli-droit::after, .face--pli-deux::after, .face--pli-gauche::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.face--pli-droit::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 8%); }
.face--pli-deux::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 6%), linear-gradient(to left, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 7%); }
.face--pli-gauche::after { background: linear-gradient(to right, rgba(60, 40, 10, 0.2), rgba(60, 40, 10, 0) 8%); }

/* Rubriques (volets verts) */
.rubrique + .rubrique { margin-top: 1.15em; }
.rubrique__titre {
  font-family: "Pagella", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 400;
  font-size: 1.9em;
  line-height: 1.1;
  text-align: center;
  color: var(--c-creme);
  margin-bottom: 0.28em;
}
.ornement {
  display: block;
  width: 8.2em;
  height: 0.95em;
  margin: 0 auto 0.85em;
  background:
    url("../img/ornement.svg") center / 0.95em 0.95em no-repeat,
    linear-gradient(var(--c-or), var(--c-or)) left center / 40% 1px no-repeat,
    linear-gradient(var(--c-or), var(--c-or)) right center / 40% 1px no-repeat;
}
.tarifs { list-style: none; margin: 0; padding: 0; }
.tarifs li {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.33em 0 0.28em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.8em;
}
.tarifs__nom { flex: 1; min-width: 0; }
.tarifs__duree {
  font-family: "Pagella", Georgia, serif;
  font-style: italic;
  color: var(--c-or);
  white-space: nowrap;
  font-size: 0.98em;
}
.prix { white-space: nowrap; font-weight: 400; text-align: right; min-width: 3.4em; font-variant-numeric: lining-nums; }
.prix small { font-size: 0.62em; letter-spacing: 0.08em; color: var(--c-or); margin-left: 0.3em; font-weight: 400; }
.prix__des, .prix__devis { font-family: "Pagella", Georgia, serif; font-style: italic; color: var(--c-or); font-weight: 400; }
.prix__des { font-size: 0.95em; }

/* Page claire (hammam, massages) */
.face--claire .face__contenu { padding: 1.6em 0 1.2em; }
.bandeau {
  background: var(--c-vert);
  color: var(--c-creme);
  font-family: "Pagella", Georgia, serif;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.32em 0 0.28em 0.4em;
  margin-bottom: 0.75em;
}
.rubrique--claire + .rubrique--claire, .encadre + .rubrique--claire { margin-top: 1.2em; }
.rubrique--claire .tarifs { padding: 0 1.75em; }
.rubrique--claire .tarifs li { flex-wrap: wrap; border-bottom-color: rgba(15, 61, 51, 0.13); color: var(--c-encre); }
.rubrique--signature .tarifs li { padding: 0.45em 0 0.5em; }
.rubrique--signature .tarifs__nom { font-family: "Pagella", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.32em; line-height: 1.15; color: #17221e; }
.rubrique--signature .tarifs__duree { font-size: 0.92em; }
.tarifs__desc { flex-basis: 100%; font-size: 0.84em; line-height: 1.45; color: var(--c-gris); margin-top: 0.15em; padding-right: 3em; }
.encadre { margin: 1.1em 1.75em 0; border: 1px solid var(--c-or); padding: 0.9em 1em 1em; text-align: center; }
.encadre .ornement { margin-bottom: 0.5em; }
.encadre__titre { font-family: "Pagella", Georgia, serif; font-style: italic; font-size: 1.12em; color: var(--c-vert); }
.encadre__site { font-size: 0.66em; letter-spacing: 0.28em; text-transform: uppercase; color: #9a7a3c; margin-top: 0.3em !important; }
.mention { font-family: "Pagella", Georgia, serif; font-style: italic; font-size: 0.7em; text-align: center; color: #8b846f; margin: 1.3em 1.75em 0 !important; }

/* Couverture */
.couv { height: 100%; }
.couv__cadre {
  height: 100%;
  border: 1px solid rgba(200, 162, 94, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4.2em 1.4em 2em;
}
.couv__sur { font-size: 0.64em; letter-spacing: 0.42em; padding-left: 0.42em; text-transform: uppercase; color: var(--c-or); font-weight: 400; }
.logo-carte { display: block; }
.logo-carte img { display: block; width: 100%; height: auto; }
.couv .logo-carte { width: 74%; margin-top: 4.4em; }
.couv__titre { font-family: "Pagella", Georgia, serif; font-style: italic; font-size: 1.8em; color: var(--c-creme); margin-top: auto !important; }
.couv__filet { display: block; width: 3.2em; height: 1px; background: var(--c-or); margin-top: 0.85em; }
.couv__annee { font-size: 0.62em; letter-spacing: 0.42em; padding-left: 0.42em; color: var(--c-or); margin: 0.95em 0 14.5em !important; font-weight: 400; }

/* Dos : bienvenue et coordonnées */
.dos { height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 2.6em; }
.dos .logo-carte { width: 50%; }
.dos__arche {
  margin-top: auto;
  width: calc(100% - 2.2em);
  height: 59%;
  border: 1px solid var(--c-or);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  padding: 0.5em 0.5em 0;
}
.dos__arche-int {
  height: 100%;
  background: var(--c-vert);
  border-radius: 999px 999px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 5.2em 1.3em 1.6em;
  color: var(--c-creme);
}
.dos__nom { font-family: "Pagella", Georgia, serif; text-transform: uppercase; letter-spacing: 0.32em; padding-left: 0.32em; font-size: 1.4em; line-height: 1.1; }
.dos__sous { font-family: "Pagella", Georgia, serif; font-style: italic; color: var(--c-or); font-size: 0.8em; margin: 0.1em 0 0.75em !important; }
.dos__texte { font-family: "Pagella", Georgia, serif; font-style: italic; font-size: 0.96em; line-height: 1.5; }
.dos__infos { margin-top: auto; font-size: 0.66em; line-height: 1.85; color: rgba(246, 241, 231, 0.88); }
.dos__infos-titre { letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-or); font-size: 0.86em; margin-bottom: 0.2em !important; }

/* ---------- Commandes ---------- */
.carte3d [hidden] { display: none !important; }
.carte3d__commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; margin-top: 0.5rem; }
.carte3d__etapes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.carte3d__etapes button, .carte3d__fleche {
  font: 400 0.9375rem/1.2 var(--f-texte, "Jost", Arial, sans-serif);
  color: var(--sur-sombre, #efe4cc);
  background: transparent;
  border: 1px solid rgba(200, 164, 93, 0.45);
  border-radius: 999px;
  min-height: 2.6rem;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.carte3d__etapes button:hover, .carte3d__fleche:hover { border-color: var(--or, #c8a45d); color: var(--or-clair, #e8d5a0); }
.carte3d__etapes button[aria-pressed="true"] { background: var(--degrade-or, #c8a45d); color: var(--ebene, #1c1612); border-color: transparent; }
.carte3d__pager { display: flex; align-items: center; gap: 0.75rem; }
.carte3d__fleche { width: 2.6rem; padding: 0; font-size: 1.25rem; }
.carte3d__fleche:disabled { opacity: 0.35; cursor: default; }
.carte3d__position { color: var(--sur-sombre-2, #bdac8b); font-size: 0.875rem; min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.carte3d__aide { flex-basis: 100%; text-align: center; color: var(--sur-sombre-2, #bdac8b); font-size: 0.875rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .carte3d__tilt, .carte3d__objet, .pli, .carte3d__ombre { transition-duration: 0.01ms !important; }
}

/* Téléphone : un volet à la fois, en pleine largeur et plus haut, pour lire sans zoomer */
@media (max-width: 600px) {
  .carte3d { --pw: 88vw; --ph: calc(88vw * 2.3); --ry-base: -6deg; }
  .carte3d .face { font-size: calc(var(--pw) / 21 * var(--fit, 1)); }
  .carte3d__etapes button { padding: 0.45rem 0.85rem; }
}

/* ---------- Aperçu (accueil) ---------- */
.carte-apercu {
  --pw: min(16.5rem, 64vw);
  display: block;
  width: var(--pw);
  margin-inline: auto;
  perspective: 1500px;
  text-decoration: none;
  position: relative;
}
.carte-apercu::after {
  content: "";
  position: absolute;
  left: 8%;
  right: -4%;
  bottom: -1.6rem;
  height: 2.4rem;
  background: radial-gradient(closest-side, rgba(40, 28, 10, 0.4), rgba(40, 28, 10, 0));
  filter: blur(3px);
  z-index: -1;
}
.carte-apercu__objet {
  position: relative;
  width: var(--pw);
  aspect-ratio: 0.4715;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-22deg) rotateZ(1.5deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.carte-apercu:hover .carte-apercu__objet, .carte-apercu:focus-visible .carte-apercu__objet { transform: rotateX(5deg) rotateY(-10deg) rotateZ(0.5deg) translateY(-0.4rem); }
.carte-apercu__objet .face--couv { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.carte-apercu__tranche { position: absolute; inset: 0; background: var(--c-vert-2); transform: translateZ(-3px) translateX(2px); box-shadow: 1px 0 0 rgba(200, 162, 94, 0.35); }
.carte-apercu__tranche--2 { transform: translateZ(-6px) translateX(4px); background: #0a2a23; }
@media (prefers-reduced-motion: reduce) { .carte-apercu__objet { transition: none; } }