/* Salsabil Hammam & Spa — feuille de style du site public (DA v0.2, maquettes v1). */
/* Polices hébergées localement (licence SIL OFL) */
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Dr Sugiyama'; src: url('../fonts/dr-sugiyama.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --petrole: #002B34;
  --petrole-2: #0B3A44;
  --creme: #EFEBE6;
  --grege: #E4DED7;
  --grege-fonce: #D3C9BD;
  --trame: #E2D9CE;
  --bronze: #9B7554;          /* décor et très grands titres uniquement (contraste 3,5) */
  --bronze-fonce: #7E5C40;    /* boutons, liens, petits titres (contraste AA) */
  --bronze-clair: #C9A27A;    /* accents sur fond pétrole */
  --gris: #55666A;
  --blanc: #FFFFFF;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  --logo: 'Dr Sugiyama', cursive;
  --gouttiere: clamp(20px, 6vw, 120px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--creme); color: var(--petrole); font-family: var(--sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--bronze-fonce); }
a:hover { color: #5F4430; }
:focus-visible { outline: 2px solid var(--bronze-fonce); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: -9999px; top: 0; background: var(--petrole); color: #fff; padding: 12px 16px; z-index: 100; }
.lien-evitement:focus { left: 8px; }

/* Typo */
h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1.05; margin: 0; }
.titre-geant { font-size: clamp(56px, 10.5vw, 150px); letter-spacing: -0.01em; color: var(--bronze); }
.titre-grand { font-size: clamp(44px, 8vw, 120px); color: var(--bronze); }
.titre { font-size: clamp(32px, 4.5vw, 52px); }
.surtitre { display: flex; align-items: center; gap: 16px; font-family: var(--serif); font-size: clamp(14px, 1.4vw, 19px); letter-spacing: .3em; text-transform: uppercase; color: var(--bronze-fonce); margin: 0; }
.surtitre::before { content: ""; width: 48px; height: 1px; background: var(--bronze); flex-shrink: 0; }
.petit { font-size: 14px; color: var(--gris); }
.a-valider { display: inline-block; font-size: 13px; color: var(--gris); border: 1px dashed var(--grege-fonce); padding: 2px 8px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px; background: var(--bronze-fonce); color: var(--blanc); text-decoration: none; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; border: 1px solid var(--bronze-fonce); cursor: pointer; }
.btn:hover { background: #5F4430; color: var(--blanc); }
.btn-contour { background: transparent; color: var(--bronze-fonce); }
.btn-contour:hover { background: var(--bronze-fonce); color: var(--blanc); }
.btn-clair { background: var(--creme); color: var(--petrole); border-color: var(--creme); }
.lien-souligne { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--bronze); padding-bottom: 4px; }

/* En-tête */
.entete { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 24px; height: 88px; padding: 0 var(--gouttiere); color: var(--blanc); }
.entete--plein { position: sticky; background: var(--petrole); }
.entete a { color: var(--blanc); text-decoration: none; }
.logo { display: inline-flex; align-items: center; line-height: 1; }
/* Logo officiel (vectorisé) : prend la couleur du texte, blanc sur pétrole, pétrole sur crème */
.marque { display: block; width: 100%; aspect-ratio: 359 / 101; background: currentColor; -webkit-mask: url('../images/logo-salsabil.png') center / contain no-repeat; mask: url('../images/logo-salsabil.png') center / contain no-repeat; }
.logo .marque { width: 148px; }
.entete--defile .logo .marque { width: 128px; }
.logo--pied .marque { width: 220px; }
.nav { margin-left: auto; display: flex; gap: 28px; font-size: 14px; letter-spacing: .05em; }
.menu-bouton { display: none; margin-left: auto; background: none; border: 0; color: inherit; padding: 10px; cursor: pointer; }
.onglet-reserver { position: fixed; top: 38vh; right: 0; z-index: 20; width: 52px; height: 200px; display: flex; align-items: center; justify-content: center; background: var(--bronze-fonce); color: var(--blanc); text-decoration: none; }
.onglet-reserver span { transform: rotate(90deg); white-space: nowrap; font-size: 13px; font-weight: 500; letter-spacing: .35em; text-transform: uppercase; }
.onglet-reserver:hover { background: #5F4430; color: var(--blanc); }
.barre-mobile { display: none; }

/* Héros */
.heros { position: relative; min-height: 100svh; background: var(--petrole-2); color: var(--blanc); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.heros__media { position: absolute; inset: 0; background: var(--petrole-2) center/cover no-repeat; }
.heros__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 43, 52, .35); }
.heros__logo { position: relative; text-align: center; line-height: 1; }
.heros__logo .marque { width: clamp(280px, 48vw, 680px); margin: 0 auto; filter: drop-shadow(0 2px 18px rgba(0, 20, 25, .35)); }
.heros__decouvrir { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); color: var(--blanc); text-decoration: none; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.heros__decouvrir::after { content: ""; width: 1px; height: 40px; background: var(--blanc); }
.photo-a-venir { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; background: var(--grege-fonce); color: var(--gris); font-size: 13px; letter-spacing: .05em; }
.arche { border-radius: 999px 999px 0 0; overflow: hidden; }
img.photo { display: block; width: 100%; height: auto; object-fit: cover; background: var(--grege-fonce); }

/* Trame éditoriale */
.trame { position: relative; }
.trame::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, transparent calc(25% - 1px), var(--trame) calc(25% - 1px), var(--trame) 25%, transparent 25%, transparent calc(50% - 1px), var(--trame) calc(50% - 1px), var(--trame) 50%, transparent 50%, transparent calc(75% - 1px), var(--trame) calc(75% - 1px), var(--trame) 75%, transparent 75%); }
.trame > * { position: relative; }
.section { padding: clamp(72px, 10vw, 140px) var(--gouttiere) 0; }
.colonne-droite { margin-left: 50%; padding-left: 40px; max-width: 640px; }
.intro__date { margin: 0 0 0 25%; padding-left: 40px; font-size: 15px; letter-spacing: .15em; color: var(--gris); }
.duo-photos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.duo-photos .p1 { grid-column: 1 / span 5; aspect-ratio: 3 / 4; }
.duo-photos .p2 { grid-column: 7 / span 3; aspect-ratio: 3 / 4; margin-top: 18%; }
.bandeau { background: var(--petrole); color: var(--creme); padding: clamp(72px, 10vw, 140px) var(--gouttiere); margin-top: clamp(96px, 12vw, 200px); }
.bandeau h2 { color: var(--bronze-clair); }
.bandeau .surtitre { color: var(--bronze-clair); }
.bandeau .surtitre::before { background: var(--bronze-clair); }
.bandeau a { color: var(--creme); text-decoration: none; }
.bandeau a:hover { text-decoration: underline; }
.rubriques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 64px; }
.rubriques ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.btn-or { border: 1px solid var(--bronze-clair); color: var(--bronze-clair) !important; background: transparent; }
.btn-or:hover { background: var(--bronze-clair); color: var(--petrole) !important; }
.centre { background: var(--grege); padding: clamp(72px, 8vw, 120px) var(--gouttiere); margin-top: clamp(96px, 12vw, 200px); }
.centre ul { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 40px; font-size: 18px; }

/* Cartes de soins */
.grille-soins { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; margin-top: 40px; }
.carte-soin { display: block; color: var(--petrole); text-decoration: none; }
.carte-soin .media { aspect-ratio: 4 / 5; }
.carte-soin h3 { font-size: 28px; margin-top: 18px; }
.carte-soin p { margin: 4px 0 0; color: var(--gris); font-size: 15px; }
.carte-soin:hover h3 { color: var(--bronze-fonce); }
.pastille { display: inline-block; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--bronze-fonce); }

/* Carte des suppléments et des groupes */
.liste-tarifs { list-style: none; margin: 40px 0 0; padding: 0; columns: 2; column-gap: clamp(40px, 6vw, 96px); }
.liste-tarifs li { break-inside: avoid; border-bottom: 1px solid var(--grege-fonce); }
.liste-tarifs a { display: flex; align-items: baseline; gap: 12px; padding: 18px 0; text-decoration: none; color: var(--petrole); }
.liste-tarifs__nom { font-family: var(--serif); font-weight: 300; font-size: 22px; line-height: 1.2; transition: color .3s; }
.liste-tarifs__pointilles { flex: 1; border-bottom: 1px dotted var(--grege-fonce); transform: translateY(-5px); min-width: 20px; }
.liste-tarifs__info { white-space: nowrap; font-size: 15px; color: var(--bronze-fonce); }
.liste-tarifs a:hover .liste-tarifs__nom { color: var(--bronze-fonce); }
/* Fiche soin */
.ja > .ja-fiche, .ja > .ja-cadeau { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
.ja > .ja-cadeau { padding-top: clamp(64px, 8vw, 120px); }
.fiche { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; padding: 140px var(--gouttiere) 0; }
.fiche__media { grid-column: 1 / span 6; aspect-ratio: 4 / 5; }
.fiche__texte { grid-column: 8 / span 5; align-self: center; }
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--grege-fonce); border-bottom: 1px solid var(--grege-fonce); margin: 28px 0; }
.chiffres div { padding: 14px 0; }
.chiffres dt { font-size: 13px; color: var(--gris); }
.chiffres dd { margin: 0; font-family: var(--serif); font-size: 26px; }
.deroule { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: e; }
.deroule li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--grege); counter-increment: e; }
.deroule li::before { content: counter(e); width: 30px; height: 38px; flex-shrink: 0; border-radius: 999px 999px 0 0; background: var(--grege); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-family: var(--serif); }
.deroule .duree { margin-left: auto; color: var(--gris); font-size: 15px; }

/* Tunnel */
.tunnel { max-width: 760px; margin: 0 auto; padding: 140px 20px 120px; }
.etapes-tunnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 0 32px; padding: 0; list-style: none; }
.etapes-tunnel li { height: 3px; background: var(--grege-fonce); }
.etapes-tunnel li.fait { background: var(--bronze-fonce); }
.panneau { background: var(--blanc); padding: clamp(20px, 4vw, 40px); }
.choix { display: grid; gap: 10px; }
.choix label { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--grege-fonce); cursor: pointer; background: var(--blanc); }
.choix input:checked + span, .choix label:has(input:checked) { border-color: var(--bronze-fonce); }
.choix label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--bronze-fonce); }
.choix .prix { margin-left: auto; font-family: var(--serif); font-size: 20px; }
.jours { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 20px; }
.jours a { flex-shrink: 0; min-width: 72px; padding: 10px 8px; text-align: center; border: 1px solid var(--grege-fonce); text-decoration: none; color: var(--petrole); font-size: 14px; line-height: 1.3; }
.jours a.actif { background: var(--petrole); color: var(--blanc); border-color: var(--petrole); }
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.creneaux button { min-height: 52px; border: 1px solid var(--grege-fonce); background: var(--blanc); color: var(--petrole); font: inherit; cursor: pointer; line-height: 1.2; }
.creneaux button:hover { border-color: var(--bronze-fonce); }
.creneaux small { display: block; font-size: 12px; color: var(--bronze-fonce); }
.champ { display: grid; gap: 6px; margin-bottom: 18px; }
.champ label { font-weight: 500; font-size: 15px; }
.champ input, .champ textarea, .champ select { font: inherit; padding: 12px 14px; border: 1px solid var(--grege-fonce); background: var(--blanc); color: var(--petrole); min-height: 48px; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin-bottom: 12px; }
.case input { width: 20px; height: 20px; margin-top: 3px; }
.recap { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; margin: 0 0 24px; }
.recap dt { color: var(--gris); }
.recap dd { margin: 0; text-align: right; }
.alerte { padding: 14px 16px; background: var(--grege); border-left: 3px solid var(--bronze-fonce); margin-bottom: 20px; }
.alerte--erreur { border-left-color: #A3341F; background: #F6E5E1; }
.alerte--test { border-left-color: var(--petrole); }
.code-carte { font-family: ui-monospace, monospace; font-size: clamp(22px, 5vw, 32px); letter-spacing: .1em; padding: 16px; background: var(--creme); text-align: center; }

/* ============ Accueil v2 — structure inspirée de jardinsdufaubourg.com ============ */
.ja { position: relative; z-index: 1; overflow: hidden; background: var(--creme); }
.ja::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, transparent calc(25% - 1px), var(--trame) calc(25% - 1px), var(--trame) 25%, transparent 25%, transparent calc(50% - 1px), var(--trame) calc(50% - 1px), var(--trame) 50%, transparent 50%, transparent calc(75% - 1px), var(--trame) calc(75% - 1px), var(--trame) 75%, transparent 75%); }
.ja > section { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: clamp(80px, 11vw, 170px) var(--gouttiere) 0; }
.ja-geant { font-family: var(--serif); font-weight: 300; font-size: clamp(54px, 9.6vw, 148px); line-height: .95; letter-spacing: -0.015em; color: var(--bronze); position: relative; z-index: 5; pointer-events: none; }
.ja-surh1 { grid-column: 4 / span 9; font-family: var(--sans); font-weight: 400; font-size: 14px; letter-spacing: .25em; text-transform: uppercase; color: var(--gris); margin-bottom: 40px; }
.ja figure { margin: 0; position: relative; z-index: 1; overflow: hidden; background: var(--grege-fonce); will-change: transform; }
.ja-intro__petite { z-index: 3 !important; }
.ja figure img { width: 100%; height: 100%; object-fit: cover; }

/* Intro : titre géant à gauche, grande photo à droite qui passe dessous, petite photo en chevauchement */
.ja-intro__titre { grid-column: 1 / span 9; grid-row: 2; text-transform: uppercase; font-size: clamp(50px, 8.8vw, 136px); }
.ja-intro__grande { grid-column: 7 / span 6; grid-row: 3; margin-top: 24px; aspect-ratio: 5 / 3; }
.ja-intro__petite { grid-column: 5 / span 3; grid-row: 3; align-self: start; margin-top: clamp(200px, 21vw, 380px); aspect-ratio: 4 / 5; z-index: 3; box-shadow: 0 0 0 10px var(--creme); }
.ja-intro__texte { grid-column: 2 / span 3; grid-row: 3; margin-top: 56px; font-size: 16px; }

/* Écrin : arche à gauche, titre qui déborde, paysage en bas à droite */
.ja-ecrin__arche { grid-column: 1 / span 4; grid-row: 1 / span 2; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; }
.ja-ecrin__texte { grid-column: 4 / span 8; grid-row: 1; align-self: end; padding-bottom: 32px; }
.ja-ecrin__texte .ja-geant { margin-left: -6%; margin-bottom: 40px; }
.ja-ecrin__texte .rideau-texte { margin-left: 34%; max-width: 460px; }
.ja-ecrin__texte .surtitre { margin-bottom: 18px; }
.ja-ecrin__paysage { grid-column: 6 / span 7; grid-row: 2; margin-top: 48px; aspect-ratio: 16 / 9; }

/* Bandeau plein écran avec léger parallaxe */
.ja-bande { position: relative; overflow: hidden; height: clamp(380px, 82vh, 860px); margin-top: clamp(80px, 11vw, 170px); background: var(--petrole-2); }
.ja-bande__fond { position: absolute; inset: -16% 0; background: center / cover no-repeat; will-change: transform; }
.ja-bande--basse { height: clamp(320px, 64vh, 680px); }

/* Atmosphère */
.ja-atmo .ja-geant { grid-column: 1 / -1; grid-row: 1; white-space: nowrap; padding-left: 16%; }
.ja-atmo__photo { grid-column: 1 / span 7; grid-row: 2; margin-top: -0.35em; aspect-ratio: 16 / 10; }
.ja-atmo__texte { grid-column: 9 / span 4; grid-row: 2; align-self: center; }
.ja-atmo__texte .surtitre { margin-bottom: 18px; }

/* Carte numérotée (équivalent du bloc « nos chambres ») */
.ja-carte { background: var(--petrole); color: var(--creme); margin-top: clamp(80px, 11vw, 170px); padding: clamp(80px, 10vw, 150px) var(--gouttiere) 0; position: relative; overflow: hidden; }
.ja-carte__titre { font-weight: 300; font-size: clamp(54px, 10vw, 156px); color: rgba(201, 162, 122, .55); text-align: center; line-height: 1; white-space: nowrap; }
.ja-carte__sous { justify-content: center; color: var(--bronze-clair); margin: 24px 0 72px; }
.ja-carte__sous::before { background: var(--bronze-clair); }
.ja-carte__colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(239, 235, 230, .18); margin: 0 calc(var(--gouttiere) * -1); }
.ja-carte__col { position: relative; display: flex; flex-direction: column; min-height: clamp(360px, 46vh, 520px); padding: 48px clamp(20px, 3vw, 48px); color: var(--creme); text-decoration: none; border-left: 1px solid rgba(239, 235, 230, .18); overflow: hidden; }
.ja-carte__col:first-child { border-left: 0; }
.ja-carte__fond { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform 1.2s ease; }
.ja-carte__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 43, 52, .85), rgba(0, 43, 52, .35)); }
.ja-carte__col:hover .ja-carte__fond, .ja-carte__col:focus-visible .ja-carte__fond { opacity: 1; transform: scale(1); }
.ja-carte__num, .ja-carte__nom, .ja-carte__liste { position: relative; }
.ja-carte__num { font-size: 13px; letter-spacing: .2em; color: var(--bronze-clair); }
.ja-carte__nom { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05; margin-top: 18px; }
.ja-carte__liste { margin-top: auto; font-size: 14px; line-height: 1.9; opacity: .75; transition: opacity .4s; }
.ja-carte__col:hover .ja-carte__liste { opacity: 1; }

/* Jardin */
.ja-jardin__texte { grid-column: 2 / span 4; grid-row: 1; padding-top: 12px; }
.ja-jardin__texte .surtitre { margin-bottom: 18px; }
.ja-jardin__titre { grid-column: 6 / span 7; grid-row: 1; text-align: right; }

/* Offrir */
.ja-offrir__photo { grid-column: 1 / span 6; grid-row: 1; aspect-ratio: 4 / 3; }
.ja-offrir__texte { grid-column: 8 / span 5; grid-row: 1; align-self: center; }
.ja-offrir__texte .ja-geant { margin: 0 0 32px 0; }
.ja-offrir__texte .rideau-texte { margin-left: 8%; max-width: 460px; }
.ja-offrir__texte .surtitre { margin-bottom: 18px; }

/* Prestations : listes à tirets */
.ja-presta { padding-bottom: clamp(80px, 10vw, 140px) !important; }
.ja-presta > div:nth-child(1) { grid-column: 2 / span 3; }
.ja-presta > div:nth-child(2) { grid-column: 5 / span 3; }
.ja-presta__photo { grid-column: 9 / span 3; aspect-ratio: 3 / 4; }
.ja-tirets { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.ja-tirets li { display: flex; gap: 14px; align-items: baseline; }
.ja-tirets li::before { content: ""; width: 16px; height: 1px; background: var(--bronze); flex-shrink: 0; transform: translateY(-4px); }
.ja-tirets a { color: inherit; }


/* ============ Animations (reprise des effets de jardinsdufaubourg.com) ============ */
/* Écran d'intro : rideau crème, logo lettre par lettre, puis le rideau part vers la gauche */
.rideau-intro { position: fixed; inset: 0; z-index: 200; background: var(--creme); display: flex; align-items: center; justify-content: center; transition: transform 1s cubic-bezier(.77, 0, .18, 1) .1s; pointer-events: none; }
.rideau-intro__logo { display: flex; flex-direction: column; align-items: center; color: var(--petrole); line-height: 1; }
.rideau-intro__logo .marque { width: clamp(260px, 40vw, 520px); }
/* Le logo s'écrit de gauche à droite, comme à la plume */
.js .rideau-intro__logo .marque { clip-path: inset(0 100% 0 0); animation: logo-plume 1.3s cubic-bezier(.6, .1, .3, 1) .15s forwards; }
@keyframes logo-plume { to { clip-path: inset(0 0 0 0); } }
.lettres > span { display: inline-block; }
.js .rideau-intro .lettres > span:nth-child(odd) { transform: translateY(50px); opacity: 0; animation: intro-impair .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.js .rideau-intro .lettres > span:nth-child(even) { transform: translateY(-50px); opacity: 0; animation: intro-pair .9s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes intro-impair { to { transform: none; opacity: 1; } }
@keyframes intro-pair { to { transform: none; opacity: 1; } }
@keyframes intro-ville { to { opacity: 1; } }
html:not(.intro) .rideau-intro, .charge .rideau-intro { transform: translateX(-100%); }

/* Héros : diaporama (entrée par la droite, sortie vers la gauche), zoom d'arrivée, voile qui s'éclaircit */
.heros { will-change: transform; z-index: 0; }
.ja-bande, .ja-carte { position: relative; z-index: 1; }
.pied { position: relative; z-index: 1; }
.heros__diaporama { position: absolute; inset: 0; overflow: hidden; transform: scale(1.06); transition: transform 1.6s ease-out .3s; }
.charge .heros__diaporama { transform: scale(1); }
.heros__diaporama::after { content: ""; position: absolute; inset: 0; background: #001a20; opacity: .65; transition: opacity 1.2s ease-out .3s; z-index: 2; }
.charge .heros__diaporama::after { opacity: .32; }
.heros__diapo { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; }
.heros__diapo.actif { opacity: 1; z-index: 1; animation: diapo-entree 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.heros__diapo.sort { opacity: 1; z-index: 0; animation: diapo-sortie 1.4s cubic-bezier(.6, 0, .3, 1) both; }
.heros__diapo.actif:first-child:not(.sort) { animation: none; }
@keyframes diapo-entree { from { opacity: 0; transform: translateX(3%); } to { opacity: 1; transform: none; } }
@keyframes diapo-sortie { from { transform: none; } to { transform: translateX(-100%); } }
.heros__logo { z-index: 3; pointer-events: none; }
.js .heros__logo .marque { clip-path: inset(0 100% 0 0); opacity: .2; transition: clip-path 1.6s cubic-bezier(.6, .1, .3, 1) .45s, opacity 1s ease-out .45s; }
.charge .heros__logo .marque { clip-path: inset(0 0 0 0); opacity: 1; }
.js .heros__decouvrir { opacity: 0; transition: opacity 1s ease-out 1.6s; }
.charge .heros__decouvrir { opacity: 1; }
.heros__decouvrir { z-index: 3; }
.heros__decouvrir::after { animation: descendre 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes descendre { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* Survol du héros : un cercle pétrole s'ouvre depuis le centre */
.heros__lien { position: absolute; inset: 0; z-index: 2; overflow: hidden; color: var(--blanc); text-decoration: none; }
.heros__lien::before { content: ""; position: absolute; top: 50%; left: 50%; width: 300vw; height: 300vw; border-radius: 50%; background: var(--petrole); opacity: .45; transform: translate(-50%, -50%) scale(0); transition: transform .8s ease-out; }
.heros__lien:hover::before { transform: translate(-50%, -50%) scale(1); transition: transform 1.2s ease-in; }
.heros__lien span { position: absolute; top: 72%; left: 50%; transform: translate(-50%, -50%); opacity: 0; font-family: var(--serif); font-size: 22px; letter-spacing: .25em; text-transform: uppercase; transition: top .6s ease-out, opacity .6s; }
.heros__lien:hover span { top: 66%; opacity: 1; }
@media (hover: none) { .heros__lien { display: none; } }

/* En-tête : le petit logo glisse depuis la gauche quand on quitte le héros */
.entete--flottant { position: fixed; transition: background .35s, color .35s, height .35s, box-shadow .35s; }
.entete--flottant .logo { transform: translateX(-160px); opacity: 0; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .5s; }
.entete--defile { background: var(--creme); color: var(--petrole); height: 72px; box-shadow: 0 1px 0 var(--grege-fonce); }
.entete--defile .logo { transform: none; opacity: 1; }
.entete--defile a { color: var(--petrole); }

/* Défilement doux : la page est posée dans un bloc fixe que le script fait glisser */
.defilement-doux { scroll-behavior: auto; }
.defilement-doux [data-defilement] { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; }

/* Rideau sur les photos : un panneau crème se retire, la photo se dézoome */
.js .rideau::after { content: ""; position: absolute; inset: -1px; background: var(--creme); transform-origin: right center; transition: transform 1.2s cubic-bezier(.77, 0, .18, 1); z-index: 1; }
.js .rideau--haut::after { transform-origin: center top; }
.js .rideau img { transform: scale(1.18); transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); }
.js .rideau.vu::after { transform: scaleX(0); }
.js .rideau--haut.vu::after { transform: scaleY(0); }
.js .rideau.vu img { transform: scale(1); }

/* Rideau sur les textes (panneau crème qui glisse vers la droite, 1,5 s) */
.js .rideau-texte { position: relative; }
.js .rideau-texte::after { content: ""; position: absolute; inset: -4px; background: var(--creme); transform-origin: right center; transition: transform 1.5s cubic-bezier(.77, 0, .18, 1) var(--delai, .15s); pointer-events: none; }
.js .rideau-texte.vu::after { transform: scaleX(0); }

/* Traits des surtitres qui se dessinent */
.js .surtitre::before { width: 0; transition: width .8s ease-out .3s; }
.js .surtitre.vu::before { width: 48px; }

/* Grands titres : montée ligne par ligne derrière un masque */
.lignes .ligne { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.lignes .ligne > span { display: inline-block; }
.js .lignes .ligne > span { transform: translateY(105%); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.js .lignes.vu .ligne > span { transform: none; }

/* Grands titres qui traversent l'écran au défilement */
[data-traverse] { will-change: transform; }

/* Apparitions simples */
.js .revele { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.js .revele.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rideau-intro { display: none; }
  .js .rideau::after, .js .rideau-texte::after { display: none; }
  .js .rideau img, .js .lignes .ligne > span, .js .revele, .js .heros__logo .marque { transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .heros__diaporama { transform: none; }
}


/* ============ Pages intérieures (même langage que l'accueil) ============ */
.bandeau-page { position: relative; z-index: 0; min-height: clamp(420px, 72vh, 760px); display: flex; align-items: flex-end; overflow: hidden; background: var(--petrole-2); color: var(--blanc); }
.bandeau-page__fond { position: absolute; inset: 0; overflow: hidden; }
.bandeau-page__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 26, 32, .78), rgba(0, 26, 32, .18) 60%, rgba(0, 26, 32, .35)); }
.bandeau-page__contenu { position: relative; z-index: 1; width: 100%; padding: 140px var(--gouttiere) clamp(48px, 7vw, 96px); }
.bandeau-page__titre { font-weight: 300; font-size: clamp(52px, 9vw, 140px); line-height: .95; letter-spacing: -0.015em; margin-top: 20px; }
.bandeau-page--sans-photo { min-height: 0; background: var(--creme); color: var(--petrole); }
.bandeau-page--sans-photo .bandeau-page__contenu { padding-top: 160px; padding-bottom: 32px; }
.bandeau-page--sans-photo .bandeau-page__titre { color: var(--bronze); }
.bandeau-page--sans-photo .surtitre--clair { color: var(--bronze-fonce); }
.bandeau-page--sans-photo .fil, .bandeau-page--sans-photo .fil a { color: var(--gris); }
.surtitre--clair { color: var(--bronze-clair); }
.surtitre--clair::before { background: var(--bronze-clair); }
.fil { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; letter-spacing: .08em; margin-bottom: 28px; color: rgba(255, 255, 255, .75); }
.fil a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.fil--sombre, .fil--sombre a { color: var(--gris); }
.ja-moyen { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5.6vw, 84px); line-height: 1; color: var(--bronze); }

/* Onglets de catégories */
.onglets { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0; margin: 0 var(--gouttiere); border-bottom: 1px solid var(--grege-fonce); }
.onglets a { display: flex; align-items: baseline; gap: 8px; padding: 22px 26px 20px 0; margin-right: 26px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--petrole); position: relative; }
.onglets a small { font-size: 11px; color: var(--bronze); letter-spacing: .1em; }
.onglets a::after { content: ""; position: absolute; left: 0; right: 26px; bottom: -1px; height: 2px; background: var(--bronze-fonce); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.onglets a:hover::after, .onglets a[aria-current]::after { transform: scaleX(1); }

/* Catégorie et cartes de soins */
.ja > .ja-categorie, .ja > .ja-autres { display: block; padding: clamp(64px, 8vw, 120px) var(--gouttiere) 0; }
.ja-categorie__tete { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 8px; }
.ja-categorie__tete p { color: var(--gris); max-width: 460px; justify-self: end; }
.grille-soins { gap: clamp(28px, 3vw, 48px); margin-top: 48px; }
.carte-soin { position: relative; }
.carte-soin figure { margin: 0; position: relative; overflow: hidden; background: var(--grege-fonce); }
.carte-soin figure img { width: 100%; height: 100%; object-fit: cover; }
.js .carte-soin .rideau.vu img, .carte-soin figure img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.carte-soin:hover figure img { transform: scale(1.06) !important; }
.carte-soin h3 { font-weight: 300; font-size: clamp(26px, 2.2vw, 32px); margin-top: 22px; transition: color .3s; }
.carte-soin__voir { display: inline-block; margin-top: 14px; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--bronze-fonce); position: relative; padding-bottom: 4px; }
.carte-soin__voir::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--bronze); transform: scaleX(.3); transform-origin: left; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.carte-soin:hover .carte-soin__voir::after { transform: scaleX(1); }

/* Fiche soin */
.ja > .ja-fiche { padding-top: 140px; align-items: start; }
.ja-fiche .fil { grid-column: 1 / -1; }
.ja-fiche__photo { grid-column: 1 / span 6; aspect-ratio: 4 / 5; position: sticky; top: 110px; }
.ja-fiche__texte { grid-column: 8 / span 5; padding-top: 24px; }
.ja-fiche__titre { font-weight: 300; font-size: clamp(48px, 6.4vw, 96px); line-height: .98; color: var(--bronze); margin: 20px 0 8px; }
.ja-fiche__sous { font-weight: 300; font-size: 30px; margin-top: 48px; }
.ja-fiche__actions { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.defilement-doux .ja-fiche__photo { position: relative; top: 0; }

.bandeau-info { position: relative; z-index: 2; margin: 28px var(--gouttiere) 0; padding: 16px 20px; border-left: 2px solid var(--bronze-fonce); background: var(--grege); font-size: 15px; max-width: 880px; }
/* Deux façons d'acheter un soin */
.options-achat { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.option-achat { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; border: 1px solid var(--bronze-fonce); color: var(--petrole); text-decoration: none; position: relative; overflow: hidden; transition: color .4s; }
.option-achat::before { content: ""; position: absolute; inset: 0; background: var(--bronze-fonce); transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.2, .7, .2, 1); z-index: 0; }
.option-achat > * { position: relative; z-index: 1; }
.option-achat:first-child { background: var(--bronze-fonce); color: var(--blanc); }
.option-achat:hover { color: var(--blanc); }
.option-achat:hover::before { transform: scaleY(1); }
.option-achat__titre { font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.option-achat__texte { font-size: 14px; line-height: 1.5; opacity: .9; }
.ja-fiche__actions { margin-top: 22px; gap: 28px; }
.etapes-bon { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; }
.champ-groupe { border: 0; padding: 0; margin: 0 0 24px; }
.champ-groupe legend { margin-bottom: 14px; }
.choix--ligne { grid-template-columns: 1fr 1fr; }
.js .bloc-offrir[hidden], [data-si-groupe][hidden] { display: none; }
.total-groupe { margin: 10px 0 0; font-size: 15px; }
.total-groupe strong { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.ja-bon .ja-cadeau__visuel { top: 110px; }
@media (max-width: 600px) { .options-achat { grid-template-columns: 1fr; } }
/* Appel à réserver */
.appel { position: relative; z-index: 1; overflow: hidden; margin-top: clamp(96px, 12vw, 180px); min-height: clamp(420px, 70vh, 680px); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--blanc); background: var(--petrole-2); }
.appel__fond { position: absolute; inset: 0; overflow: hidden; }
.appel__fond::after { content: ""; position: absolute; inset: 0; background: rgba(0, 26, 32, .55); }
.appel__contenu { position: relative; z-index: 1; padding: 80px var(--gouttiere); display: flex; flex-direction: column; align-items: center; }
.appel .surtitre { justify-content: center; }
.appel__titre { font-weight: 300; font-size: clamp(46px, 7.5vw, 116px); line-height: .98; margin: 22px 0 40px; }
.appel__boutons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
main:has(> .appel:last-child) + .pied { margin-top: 0; }

/* Pages de contenu */
.ja > .page-contenu { display: block; max-width: 880px; margin: 0 auto; padding: clamp(56px, 7vw, 100px) var(--gouttiere) clamp(80px, 9vw, 140px); }
.page-contenu p { max-width: 680px; }
.page-contenu .surtitre { margin-top: 48px; margin-bottom: 14px; }
.page-contenu .surtitre:first-child { margin-top: 0; }

/* Cartes cadeaux */
.ja > .ja-cadeau { align-items: start; padding-bottom: clamp(80px, 9vw, 140px); }
.ja-cadeau__visuel { grid-column: 1 / span 5; aspect-ratio: 4 / 5; position: sticky; top: 110px; }
.ja-cadeau__formulaire { grid-column: 7 / span 6; }
.ja-cadeau__formulaire .ja-moyen { margin-bottom: 28px; }

@media (max-width: 900px) {
  .ja-categorie__tete { grid-template-columns: 1fr; gap: 16px; }
  .liste-tarifs { columns: 1; }
  .ja-categorie__tete p { justify-self: start; }
  .onglets { overflow-x: auto; flex-wrap: nowrap; margin: 0; padding: 0 var(--gouttiere); }
  .onglets a { white-space: nowrap; }
  .ja > .ja-fiche, .ja > .ja-cadeau { grid-template-columns: 1fr; }
  .ja-fiche > *, .ja-cadeau > * { grid-column: 1 / -1 !important; }
  .ja-fiche__photo, .ja-cadeau__visuel { position: relative; top: 0; width: 86%; }
  .ja > .ja-fiche { padding-top: 104px; }
  .bandeau-page__contenu { padding-top: 120px; }
}

@media (max-width: 900px) {
  .ja::before { background-image: linear-gradient(to right, transparent calc(50% - 1px), var(--trame) calc(50% - 1px), var(--trame) 50%, transparent 50%); }
  .ja > section { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 12px; }
  .ja > section > * { grid-column: 1 / -1 !important; grid-row: auto !important; margin-left: 0 !important; }
  .ja-intro__grande { margin-top: 32px; }
  .ja > section > .ja-intro__petite { width: 58%; margin: -48px 0 0 auto !important; }
  .ja .ja-geant { margin-left: 0 !important; }
  .ja-intro__grande { aspect-ratio: 4 / 3; }
  .ja-intro__texte, .ja-ecrin__texte .rideau-texte, .ja-offrir__texte .rideau-texte { margin-left: 0 !important; }
  .ja-ecrin__arche { width: 80%; }
  .ja-ecrin__texte { margin-top: -0.6em; }
  .ja-atmo__photo { margin-top: 16px; }
  .ja-atmo__texte, .ja-jardin__texte, .ja-offrir__texte { margin-top: 32px; }
  .ja-jardin__titre { text-align: left; order: -1; }
  .ja-carte__colonnes { grid-template-columns: 1fr 1fr; }
  .ja-carte__col { min-height: 260px; border-top: 1px solid rgba(239, 235, 230, .18); }
  .ja-carte__col:nth-child(odd) { border-left: 0; }
  .ja-carte__fond { opacity: .55; transform: none; }
  .ja-presta > div { margin-bottom: 24px; }
  .ja-presta__photo { width: 60%; }
  .entete--defile { height: 64px; }
  .ja-atmo .ja-geant, .ja-carte__titre { white-space: normal; padding-left: 0; }
  .entete--defile .nav.ouvert a { color: var(--creme); }
  .entete--flottant .nav.ouvert { top: 100%; }
}


/* Pied de page */
.pied { background: var(--petrole); color: var(--creme); padding: 96px var(--gouttiere) 48px; margin-top: clamp(96px, 12vw, 200px); }
/* Pas de bande crème orpheline quand la page se termine par la bande grège « Le centre » */
main:has(> .centre:last-child) + .pied { margin-top: 0; }
main:has(> .ja:last-child) + .pied { margin-top: 0; }
.pied__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; font-size: 15px; }
.pied h2 { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .25em; text-transform: uppercase; color: var(--bronze-clair); margin-bottom: 12px; }
.pied a { color: var(--creme); }
.pied__bas { margin-top: 64px; display: flex; flex-wrap: wrap; gap: 24px; font-size: 13px; }
.pied__bas a { color: var(--creme); text-decoration: none; opacity: .85; }

/* Pages de contenu */
.page { max-width: 820px; margin: 0 auto; padding: 140px 20px 0; }
.page h1 { font-size: clamp(40px, 6vw, 72px); color: var(--bronze); margin-bottom: 32px; }
.horaires { display: grid; grid-template-columns: auto 1fr; gap: 6px 32px; }

/* Mobile */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav { display: none; }
  .menu-bouton { display: inline-flex; }
  .nav.ouvert { display: flex; flex-direction: column; position: absolute; top: 88px; left: 0; right: 0; background: var(--petrole); padding: 24px var(--gouttiere); gap: 16px; font-size: 18px; }
  .onglet-reserver { display: none; }
  .barre-mobile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 64px; background: var(--creme); border-top: 1px solid var(--grege-fonce); }
  .barre-mobile a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: var(--petrole); text-decoration: none; }
  .barre-mobile a.principal { background: var(--bronze-fonce); color: var(--blanc); font-size: 13px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
  body { padding-bottom: 64px; }
  .trame::before { background-image: linear-gradient(to right, transparent calc(33.33% - 1px), var(--trame) calc(33.33% - 1px), var(--trame) 33.33%, transparent 33.33%, transparent calc(66.66% - 1px), var(--trame) calc(66.66% - 1px), var(--trame) 66.66%, transparent 66.66%); }
  .colonne-droite { margin-left: 0; padding-left: 0; }
  .intro__date { margin-left: 0; padding-left: 0; }
  .duo-photos .p1 { grid-column: 1 / span 8; }
  .duo-photos .p2 { grid-column: 7 / span 6; margin-top: 40%; }
  .rubriques { grid-template-columns: 1fr; gap: 32px; }
  .centre ul { grid-template-columns: 1fr 1fr; }
  .fiche { grid-template-columns: 1fr; padding-top: 110px; gap: 24px; }
  .fiche__media, .fiche__texte { grid-column: auto; }
  .pied__grille { grid-template-columns: 1fr; }
}

/* ============ Adaptation à toutes les tailles d'écran ============ */
/* Très petits téléphones (≤ 360 px) */
@media (max-width: 360px) {
  :root { --gouttiere: 16px; }
  body { font-size: 15px; }
  .ja-geant, .bandeau-page__titre { font-size: 44px; }
  .ja-intro__titre { font-size: 40px !important; }
  .ja-carte__colonnes { grid-template-columns: 1fr !important; }
  .ja-carte__col { border-left: 0 !important; min-height: 200px; }
  .options-achat { grid-template-columns: 1fr; }
  .btn { padding: 0 20px; letter-spacing: .14em; }
  .onglet-reserver { display: none; }
}

/* Tablettes en portrait (601 – 900 px) : on garde des compositions à deux colonnes */
@media (min-width: 601px) and (max-width: 900px) {
  body { font-size: 17px; }
  .ja > section > p, .ja-intro__texte, .ja-atmo__texte, .ja-jardin__texte, .ja-ecrin__texte .rideau-texte, .ja-offrir__texte .rideau-texte { max-width: 560px; }
  .ja-intro__grande { width: 86%; }
  .ja > section > .ja-intro__petite { width: 44%; margin-top: -120px !important; }
  .ja-ecrin__arche { width: 62% !important; }
  .ja-ecrin__paysage { width: 86%; margin-left: auto !important; }
  .ja-atmo__photo { width: 90%; }
  .ja-offrir__photo { width: 86%; }
  .ja-carte__col { min-height: 300px; }
  .ja-presta { grid-template-columns: 1fr 1fr !important; column-gap: 32px !important; }
  .ja-presta > div { grid-column: auto !important; }
  .ja-presta__photo { grid-column: 1 / -1 !important; width: 50% !important; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .ja-fiche__photo, .ja-cadeau__visuel { width: 70% !important; }
  .grille-soins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bandeau-page { min-height: 56vh; }
}

/* Petits ordinateurs et tablettes en paysage (901 – 1200 px) : on desserre les chevauchements */
@media (min-width: 901px) and (max-width: 1200px) {
  .nav { gap: 20px; font-size: 13px; }
  .ja-intro__titre { grid-column: 1 / span 10; }
  .ja-intro__texte { grid-column: 1 / span 4; }
  .ja-carte__nom { font-size: 30px; }
}

/* Grands écrans (≥ 1600 px) : contenu centré, fonds toujours pleine largeur */
@media (min-width: 1600px) {
  :root { --gouttiere: max(120px, calc((100vw - 1600px) / 2)); }
  body { font-size: 18px; }
  .entete { padding-left: max(48px, calc((100vw - 1760px) / 2)); padding-right: max(48px, calc((100vw - 1760px) / 2)); }
  .ja-carte__colonnes { margin: 0 calc(var(--gouttiere) * -1); padding: 0 var(--gouttiere); }
  .ja-carte__col:first-child { border-left: 1px solid rgba(239, 235, 230, .18); }
  .ja-carte__col:last-child { border-right: 1px solid rgba(239, 235, 230, .18); }
}
@media (min-width: 2200px) {
  body { font-size: 19px; }
  .heros__logo .marque { width: 820px; }
  .ja-geant { font-size: 160px; }
}

/* ============ Téléphones et tablettes : mêmes animations, adaptées ============ */
/* Mêmes effets que sur ordinateur (rideaux, titres ligne par ligne, parallaxes, titres qui
   traversent), mais plus rapides et déclenchés plus tôt pour suivre un défilement au doigt.
   Hauteurs en svh : stables quand la barre d'adresse du navigateur apparaît ou disparaît. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .ja::before { display: none; }
  .js .rideau-texte::after { transition: transform .9s cubic-bezier(.77, 0, .18, 1) .05s; }
  .js .rideau::after { transition-duration: .9s; }
  .js .rideau img { transform: scale(1.12); transition-duration: 1.2s; }
  .js .lignes .ligne > span { transition-duration: .9s; }
  .js .revele { transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .js .surtitre::before { transition-duration: .6s; transition-delay: .15s; }
  .ja-bande { height: clamp(300px, 62vh, 620px); height: clamp(300px, 62svh, 620px); }
  .ja-bande--basse { height: clamp(260px, 50vh, 520px); height: clamp(260px, 50svh, 520px); }
  .ja-bande__fond { inset: -10% 0; }
  [data-traverse], .ja-bande__fond { will-change: transform; }
  /* Photos empilées : aucun chevauchement avec les titres et les textes */
  .ja-ecrin__texte { margin-top: 20px; }
  .ja > section > .ja-intro__petite { margin-top: 16px !important; }
  .ja h2, .ja .ja-geant, .ja .rideau-texte { position: relative; z-index: 2; }
  .ja-atmo .ja-geant { margin-bottom: 14px; }
}

/* ============ Nous contacter ============ */
.ja > .ja-contact { align-items: start; padding-top: clamp(80px, 10vw, 160px); padding-bottom: clamp(80px, 9vw, 140px); scroll-margin-top: 90px; }
.ja-contact__infos { grid-column: 1 / span 5; }
.ja-contact__infos .ja-moyen { margin-bottom: 36px; }
.ja-contact__horaires { display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; margin: 18px 0 16px; font-size: 15px; }
.ja-contact__horaires dt { font-weight: 500; }
.ja-contact__horaires dd { margin: 0; }
.ja-contact__direct { margin-top: 24px; font-size: 15px; line-height: 1.8; }
.ja-contact__direct a { color: var(--bronze-fonce); font-family: var(--serif); font-size: 26px; text-decoration: none; }
.ja-contact__form { grid-column: 7 / span 6; }
.ja-contact__form form { background: var(--blanc); padding: clamp(24px, 3vw, 44px); border: 1px solid var(--grege-fonce); }
.ja-contact__deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.ja-contact__form .btn { width: 100%; margin-top: 8px; }
.ja-contact__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) {
  .ja-contact__form { margin-top: 40px; }
  .ja-contact__deux { grid-template-columns: 1fr; }
  .champ input, .champ textarea, .champ select { font-size: 16px; }
}

/* ============ L'univers du bien-être ============ */
/* Même écriture que les autres sections : grand titre, photo en arche, texte en colonne avec surtitre. */
.ja-univers__titre { grid-column: 1 / span 9; grid-row: 1; position: relative; z-index: 2; }
.ja-univers__photo { grid-column: 8 / span 5; grid-row: 1 / span 2; aspect-ratio: 4 / 5; align-self: start; margin-top: 18%; }
.ja-univers__texte { grid-column: 2 / span 5; grid-row: 2; margin-top: 48px; }
.ja-univers__texte .surtitre { margin-bottom: 18px; }
.ja-univers__texte p:not(.surtitre) { margin: 0 0 16px; }
.ja-univers__texte .lien-souligne { margin-top: 12px; }
@media (max-width: 900px) {
  .ja-univers__titre { padding-left: 0; }
  .ja-univers__photo { width: 86%; margin-top: 28px; justify-self: end; }
  .ja-univers__texte { margin-top: 32px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .ja-univers__photo { width: 62% !important; }
  .ja-univers__texte { max-width: 560px; }
}

/* ============ Tunnel : retour, formule, panier ============ */
.retour { display: inline-block; margin-bottom: 20px; font-size: 14px; color: var(--bronze-fonce); text-decoration: none; letter-spacing: .04em; }
.retour:hover { text-decoration: underline; }
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 16px; }
.formules a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px; border: 1px solid var(--grege-fonce); background: var(--blanc); color: var(--petrole); text-decoration: none; }
.formules a strong { font-family: var(--serif); font-weight: 400; font-size: 20px; }
.formules a.actif { background: var(--petrole); border-color: var(--petrole); color: var(--blanc); }
.panier-lignes { list-style: none; margin: 0; padding: 0; }
.panier-lignes li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--grege-fonce); }
.panier-lignes li > div:first-child { display: grid; gap: 4px; }
.panier-lignes li.indisponible { opacity: .7; }
.panier-lignes .erreur { color: #A3341F; }
.panier-prix { font-family: var(--serif); font-size: 20px; white-space: nowrap; }
.lien-retirer { background: none; border: 0; padding: 6px 0; color: var(--bronze-fonce); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }
.panier-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; font-size: 18px; }
.panier-total strong { font-family: var(--serif); font-size: 28px; font-weight: 400; }
.code-bon { font-family: ui-monospace, monospace; font-size: 16px; letter-spacing: .06em; background: var(--grege); padding: 6px 10px; }
.ajout-panier { margin: 0 0 28px; padding: 18px; border: 1px dashed var(--grege-fonce); }
.ajout-panier .petit { margin-top: 8px; }
.panier-lien { order: 3; position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 8px; color: inherit; }
.panier-lien span { position: absolute; top: 0; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bronze-fonce); color: var(--blanc); font-size: 11px; line-height: 18px; text-align: center; }
.entete .nav { order: 2; }
@media (max-width: 900px) {
  .panier-lien { order: 2; margin-left: auto; }
  .panier-lien ~ .menu-bouton { margin-left: 0; order: 3; }
  .panier-lignes li { grid-template-columns: 1fr auto; }
  .panier-lignes li form { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .panneau .btn { letter-spacing: .08em; padding: 0 14px; width: 100%; }
}

/* Tunnel : suppléments et nombre de personnes (groupes) */
.nb-personnes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.nb-personnes select { min-height: 48px; padding: 0 14px; border: 1px solid var(--grege-fonce); background: var(--blanc); color: var(--petrole); font: inherit; }
.supplements { border: 0; padding: 0; margin: 8px 0 0; }
.supplements legend { margin-bottom: 12px; }
.supplement { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--grege-fonce); background: var(--blanc); margin-top: -1px; cursor: pointer; }
.supplement input { width: 20px; height: 20px; accent-color: var(--petrole); }
.supplement small { display: block; color: var(--texte-doux, #4A5A5E); font-size: 14px; margin-top: 2px; }
.supplement em { font-style: normal; font-family: var(--serif); font-size: 19px; white-space: nowrap; }
.supplement:has(input:checked) { border-color: var(--petrole); box-shadow: inset 3px 0 0 var(--petrole); }
.panier-options { margin: 6px 0 0; padding: 0; list-style: none; font-size: 15px; color: #4A5A5E; }
.panier-garde { font-size: 14px; color: #4A5A5E; }
.avis-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 40px; }
.avis-carte { background: var(--blanc); padding: 28px 26px; border: 1px solid var(--grege-fonce); display: flex; flex-direction: column; gap: 14px; }
.avis-etoiles { color: #B8893B; letter-spacing: 2px; font-size: 18px; }
.avis-carte blockquote { margin: 0; font-size: 17px; line-height: 1.6; }
.avis-carte footer { margin-top: auto; font-size: 14px; color: #4A5A5E; }
.avis-source { margin-top: 22px; font-size: 14px; color: #4A5A5E; }
.rdv-actions { display: grid; gap: 28px; margin-top: 36px; }
.rdv-actions section { min-width: 0; border-top: 1px solid var(--grege-fonce); padding-top: 22px; }
.ja-avis { padding: clamp(70px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); }
.supplements-bloc { margin-top: 4px; border: 1px solid var(--grege-fonce); background: var(--blanc); }
.supplements-bloc summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; position: relative; line-height: 1.45; }
.supplements-bloc summary::-webkit-details-marker { display: none; }
.supplements-bloc summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--bronze-fonce, #7E5C40); }
.supplements-bloc[open] summary::after { content: '−'; }
.supplements-bloc summary strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; }
.supplements-bloc summary span { font-size: 15px; color: #4A5A5E; }
.supplements-bloc .supplements { margin: 0; }
.supplements-bloc .supplement { border-left: 0; border-right: 0; margin-top: 0; border-bottom: 0; }

/* Groupes : paiement partagé */
.groupe-cagnotte__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.groupe-cagnotte__chiffres strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 5vw, 28px); margin-top: 4px; }
.groupe-cagnotte__barre { height: 8px; background: var(--grege); margin-top: 18px; overflow: hidden; }
.groupe-cagnotte__barre span { display: block; height: 100%; background: var(--bronze-fonce, #7E5C40); transition: width .6s ease; }
.montants-rapides { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.montants-rapides button { min-height: 44px; padding: 0 14px; border: 1px solid var(--grege-fonce); background: var(--blanc); color: var(--petrole); font: inherit; cursor: pointer; }
.montants-rapides button:hover, .montants-rapides button:focus-visible { border-color: var(--petrole); }
.qui-paie { border: 0; padding: 0; margin: 20px 0 8px; }
.qui-paie legend { font-weight: 600; margin-bottom: 8px; }
.qui-paie .case { margin-top: 6px; }
.part-organisateur { margin: 6px 0 0 30px; max-width: 260px; }
button.lien-souligne { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }

/* Page « Votre soin » : détail dépliable de chaque soin */
.choix-soin { padding: 16px 18px; }
.choix-soin__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.choix-soin__detail { margin-top: 12px; border-top: 1px solid var(--grege-fonce); }
.choix-soin__detail summary { cursor: pointer; list-style: none; padding: 12px 28px 2px 0; position: relative; font-size: 15px; color: var(--bronze-fonce, #7E5C40); letter-spacing: .04em; }
.choix-soin__detail summary::-webkit-details-marker { display: none; }
.choix-soin__detail summary::after { content: '+'; position: absolute; right: 0; top: 9px; font-size: 22px; line-height: 1; }
.choix-soin__detail[open] summary::after { content: '−'; }
.choix-soin__contenu { padding: 10px 0 4px; max-width: 64ch; }
.choix-soin__contenu p { margin: 0 0 10px; }
.choix-soin__etapes { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: e; }
.choix-soin__etapes li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--grege); counter-increment: e; }
.choix-soin__etapes li span:first-child::before { content: counter(e) ". "; color: var(--bronze-fonce, #7E5C40); }
.date-telephone { border-left: 3px solid var(--bronze-fonce, #7E5C40); }
.pied__texte { margin: 0; }

/* Réservation à plusieurs : y a-t-il un homme ? */
.question-hommes fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.question-hommes legend { padding: 0; }
.question-hommes .choix, [data-hommes] .choix { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Code promo (panier) */
.code-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 0; border-top: 1px solid var(--grege-fonce); }
.code-promo p { margin: 0; }
.code-promo__form { display: grid; gap: 6px; width: 100%; }
.code-promo__form label { font-size: .9rem; }
.code-promo__form > div { display: flex; gap: 10px; }
.code-promo__form input { flex: 1 1 auto; width: auto; min-width: 0; text-transform: uppercase; }
.code-promo__form > div > .btn { flex: 0 0 auto; width: auto; }
.promo-ligne { color: var(--bronze-fonce); }

/* Moyen de paiement (carte / PayPal) */
.moyen-paiement { border: 0; padding: 0; margin: 20px 0 8px; min-width: 0; }
.moyen-paiement legend { padding: 0; margin-bottom: 10px; }
.moyen-paiement .petit { margin: 8px 0 0; }