/* ==========================================================================
   Studio by Ju — finitions communes (version 2)
   Vrai logo, photos responsives, sections partagées par toutes les pages.
   ========================================================================== */
picture { display: contents; }

/* Logo officiel (PNG transparent) : blanc sur fond sombre, noir sur fond clair */
.logo--image { display: inline-flex; align-items: center; height: 46px; }
.logo--image img { height: 100%; width: auto; display: block; }
.logo__fonce { display: none !important; }
.theme-creme .logo__clair, .sur-clair .entete:not(.est-defile) .logo__clair, .sur-clair .entete.est-defile .logo__clair { display: none !important; }
.theme-creme .logo__fonce, .sur-clair .entete:not(.est-defile) .logo__fonce, .sur-clair .entete.est-defile .logo__fonce { display: block !important; }
@media (max-width: 760px) { .logo--image { height: 38px; } }

.pied__logo { width: min(240px, 60vw); height: auto; display: block; }
.pied__devise { font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem); margin: 60px 0 26px; color: var(--creme); }

/* Photos dans les cartes */
.creation__media { position: absolute; inset: 0; }
.creation__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.creation:hover .creation__media img { transform: scale(1.03); }

/* Textes et petites notes */
.note-bas { color: var(--texte-doux); font-size: .9rem; margin-top: 26px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.histoire p { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); max-width: 44ch; }
.histoire blockquote { margin: 36px 0 0; padding: 0; }
.histoire blockquote p { font-family: var(--f-display); font-style: italic; font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); line-height: 1.2; }
.histoire blockquote footer, .signature { font-family: var(--f-main); font-size: 1.8rem; color: #b04a5f; }
.contact-adresse { font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem); }
.photo-cadre figcaption { font-size: .78rem; color: var(--texte-doux); margin-top: 8px; }
.photo-cadre { overflow: visible; box-shadow: none; aspect-ratio: auto; }
.photo-cadre img { border-radius: var(--rayon); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Section sombre au milieu d'une page claire */
.section--sombre { background: var(--choco-900); color: var(--creme); --texte: var(--creme); --texte-doux: #d9c3ad; --trait: rgba(247,236,223,.14); --surface: var(--choco-800); }

/* Liste de tarifs compacte (pages soins) */
.soins--compact { margin: 0; }

/* Le lieu : deux photos côte à côte */
.lieu { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(14px, 2vw, 24px); align-items: stretch; }
.lieu__photo { margin: 0; border-radius: var(--rayon); overflow: hidden; position: relative; min-height: 0; }
.lieu__photo--salon { aspect-ratio: 1600 / 1771; }
.lieu__photo--pieds { aspect-ratio: 1200 / 1771; }
.lieu__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lieu__photo--pieds img { object-position: 50% 40%; }
@media (max-width: 760px) { .lieu { grid-template-columns: 1fr; } .lieu__photo--pieds { aspect-ratio: 4 / 5; } }

/* Appel à réserver */
.appel__texte { color: var(--texte-doux); margin: 18px auto 0; max-width: 42ch; }
.appel h2 { max-width: 16ch; margin-inline: auto; }

/* Lien « Voir les tarifs » */
.lien-tarifs { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .04em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.lien-tarifs .fleche { transition: transform .5s var(--ease); }
.lien-tarifs:hover .fleche { transform: translateX(4px); }
@media (max-width: 760px) {
  .galerie--accueil .creation__legende small { display: none; }
  .galerie--accueil .creation__legende strong { font-size: 1.05rem; }
}

/* ------------------------------------------------------------------
   Onglet « Le peeling, c'est quoi ? » et son panneau
   ------------------------------------------------------------------ */
.onglet-info { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .88rem; font-weight: 600; letter-spacing: .02em; padding: 10px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; transition: background-color .4s, color .4s; }
.onglet-info span { color: #b04a5f; }
.onglet-info:hover, .onglet-info:focus-visible { background: #b04a5f; border-color: #b04a5f; color: #fff; }
.onglet-info:hover span, .onglet-info:focus-visible span { color: #fff; }
.categorie__tete .onglet-info { margin-top: 14px; }
.scene__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

.tiroir { border: 0; padding: 0; margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(620px, 100%); max-width: 100%; background: var(--creme); color: var(--choco-900); box-shadow: -40px 0 120px -40px rgba(0,0,0,.6); --texte-doux: #5e4031; --trait: rgba(34,18,12,.14); }
.tiroir::backdrop { background: rgba(22,11,7,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tiroir[open] { animation: tiroir-entre .6s var(--ease) both; }
@keyframes tiroir-entre { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.tiroir__boite { padding: clamp(28px, 5vw, 56px); padding-top: 70px; position: relative; overflow-y: auto; height: 100%; }
.tiroir__fermer { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(34,18,12,.25); background: transparent; color: inherit; font-size: 1rem; cursor: pointer; }
.tiroir h2 { margin: 12px 0 22px; }
.tiroir h2 em { color: #b04a5f; }
.tiroir__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.tiroir__actions .btn { --b-bg: var(--choco-900); --b-fg: var(--creme); }
.tiroir__actions .btn--contour { --b-bg: transparent; --b-fg: var(--choco-900); border-color: rgba(34,18,12,.3); }
.peeling-info { font-size: 1rem; line-height: 1.6; }
.peeling-info p { margin: 0 0 14px; max-width: 58ch; }
.peeling-info__chapeau { font-family: var(--f-display); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.35; }
.peeling-info h3 { font-size: 1.35rem; margin: 26px 0 10px; }
.peeling-info__etapes { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.peeling-info__etapes li::marker { color: #b04a5f; font-family: var(--f-display); font-style: italic; }
.peeling-info__prix { display: grid; gap: 6px; margin: 24px 0 14px; padding: 16px 18px; border-radius: 16px; background: #fffaf3; border: 1px solid rgba(34,18,12,.1); font-size: .95rem; }
.peeling-info__prix small { color: #5e4031; }
.peeling-info__note { font-size: .86rem; color: #5e4031; }
.peeling-info--page { max-width: 62ch; }
.theme-creme .peeling-info__prix { background: var(--surface); }

/* Cartes de l'équipe avec photo */
.membre--photo { min-height: 500px; }
.membre--photo .membre__portrait img { object-position: 50% 22%; }
.membre--photo::after { background: linear-gradient(to top, var(--surface) 22%, color-mix(in srgb, var(--surface) 70%, transparent) 38%, transparent 62%); }

/* Photo du peeling (page Visage et panneau) */
.peeling-visuel { margin: 26px 0 0; border-radius: 999px 999px 22px 22px; overflow: hidden; max-width: 340px; aspect-ratio: 3 / 4; }
.peeling-visuel img, .tiroir__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.tiroir__visuel { margin: 0 0 24px; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; }

/* Head Spa : deux photos verticales côte à côte */
.lieu--headspa { grid-template-columns: 1fr 1fr; }
.lieu--headspa .lieu__photo { aspect-ratio: 3 / 4; }

/* ------------------------------------------------------------------
   Audit avant publication (octobre 2026)
   ------------------------------------------------------------------ */
/* Haut des pages intérieures : le texte d'accroche est visible tout de suite (meilleur LCP), il glisse seulement. */
.js .page-hero [data-reveal] { opacity: 1; }
/* Pied de page : zones tactiles plus grandes sur mobile */
@media (max-width: 860px) {
  .pied ul { gap: 2px; }
  .pied ul a { display: inline-block; padding: 9px 0; }
}
/* Petits libellés : jamais sous 12 px (lisibilité) */
body .scene__petit { font-size: max(12px, .74rem); }
body .indice, body .creation__legende small { font-size: max(12px, .72rem); }
/* Contrastes (WCAG AA) : surtitres et citations selon le fond */
.histoire-accueil .surtitre, .recap .surtitre, .lieu-accueil .surtitre, .tiroir .surtitre { color: #9a4a1b; }
.histoire-accueil .signature { color: #9c3a50; }
.theme-creme .section--sombre .surtitre { color: var(--or); }
.section--sombre .membre__citation { color: #f2b6c0; }
/* Accueil mobile : « Faites défiler » à gauche pour laisser la place au bouton « Réserver » */
@media (max-width: 860px) {
  .accueil .indice, .js .accueil .indice[data-plage] { left: var(--gouttiere, 16px); transform: none; letter-spacing: .22em; }
}