/* Demo de reservation spa (NETAL CREATION)
   Ambiance : sable, vert sauge, or doux. Les valeurs ci-dessous sont les
   memes que dans js/config.js, qui les ecrase au chargement : changer les
   couleurs dans config.js suffit.
   Titres en EB Garamond : Cormorant Garamond dessinait l'accent de « ê »
   tres haut et detache (titre « bien-etre »), corrige le 21/10/2026. */
:root {
  --sable: #F7F2E9;
  --sable-fonce: #EDE5D6;
  --sauge: #5F7D68;
  --sauge-foncee: #4A6453;
  --sauge-claire: #C9D6CC;
  --or: #C9A96E;
  --or-pale: #F1E6CF;
  --encre: #2B332E;
  --encre-douce: #6B7570;
  --blanc: #FFFFFF;
  --rouge: #9A3B33;
  --titres: "EB Garamond", "Times New Roman", Georgia, serif;
  --texte: "Jost", "Helvetica Neue", Arial, sans-serif;
  --rayon: 18px;
  --ombre: 0 10px 30px rgba(43, 51, 46, .08);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--texte); color: var(--encre); background: var(--sable); line-height: 1.6; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titres); font-weight: 600; margin: 0 0 .4em; line-height: 1.1; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.4rem, 8vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2:focus { outline: none; }
h3 { font-size: 1.35rem; }
h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .18em; margin: 0 0 .7em; color: var(--sauge); font-weight: 600; }
p { margin: 0 0 1em; overflow-wrap: anywhere; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
.conteneur { width: min(100% - 32px, 1120px); margin-inline: auto; }
.conteneur--etroit { width: min(100% - 32px, 720px); margin-inline: auto; }
.surtitre { font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: .22em; color: var(--or); margin-bottom: .9em; }
.section { padding: 56px 0; }
.section--blanc { background: var(--blanc); }
.section__tete { margin-bottom: 28px; }
.section__tete h2 { margin-bottom: .2em; }
.lien { font-weight: 500; letter-spacing: .03em; border-bottom: 1px solid currentColor; padding-bottom: 2px; color: var(--sauge); cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; }
.lien:hover { color: var(--sauge-foncee); }
.doux { color: var(--encre-douce); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 26px; border-radius: 999px; font-weight: 500; font-size: .94rem; letter-spacing: .03em; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; text-align: center; }
.bouton--plein { background: var(--sauge); color: var(--blanc); border-color: var(--sauge); }
.bouton--plein:hover { background: var(--sauge-foncee); border-color: var(--sauge-foncee); }
.bouton--contour { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton--contour:hover { background: var(--encre); color: var(--blanc); }
.bouton--petit { padding: 9px 18px; font-size: .84rem; }
.bouton--whatsapp { background: #25D366; border-color: #25D366; color: var(--blanc); font-size: 1rem; padding: 15px 26px; }
.bouton--whatsapp:hover { background: #1DA851; border-color: #1DA851; }
.bouton--large { width: 100%; }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.bouton[disabled]:hover { background: var(--sauge); border-color: var(--sauge); }
.bouton--contour[disabled]:hover { background: transparent; color: var(--encre); }

/* Bandeau, en-tete, pied */
.bandeau { background: var(--encre); color: var(--sable); text-align: center; font-size: .76rem; line-height: 1.4; letter-spacing: .05em; padding: 8px 16px; }
.entete { position: sticky; top: 0; z-index: 20; background: rgba(247, 242, 233, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sable-fonce); }
.entete__ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.marque { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marque strong { display: block; font-family: var(--titres); font-size: 1.35rem; line-height: 1.25; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marque small { display: block; font-size: .72rem; color: var(--encre-douce); letter-spacing: .06em; }
.marque__picto svg { width: 30px; height: 30px; color: var(--or); }
.nav { display: flex; align-items: center; gap: 18px; font-size: .9rem; flex-shrink: 0; }
.nav a[aria-current="page"]:not(.bouton) { color: var(--sauge); border-bottom: 1.5px solid var(--sauge); }
.pied { background: var(--encre); color: var(--sable); padding: 48px 0 24px; margin-top: 40px; }
.pied__grille { display: grid; gap: 28px; grid-template-columns: 1fr; }
.pied__marque { font-family: var(--titres); font-size: 1.7rem; margin-bottom: .2em; }
.pied h4 { color: var(--or); }
.pied a { border-bottom: 1px solid rgba(247, 242, 233, .4); }
.pied__bas { border-top: 1px solid rgba(247, 242, 233, .15); margin-top: 32px; padding-top: 18px; font-size: .8rem; color: rgba(247, 242, 233, .75); }
.pied__demo { margin: 0; }

/* Pictogrammes */
.picto { display: inline-flex; color: var(--sauge); }
.picto svg { width: 40px; height: 40px; }

/* Heros de l'accueil : degrade sable -> sauge pale, formes douces */
.hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 20% 10%, var(--or-pale) 0, transparent 50%), radial-gradient(ellipse at 90% 90%, var(--sauge-claire) 0, transparent 55%), var(--sable); }
.hero::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: var(--sauge-claire); opacity: .45; right: -140px; top: -120px; }
.hero__grille { display: grid; gap: 28px; padding: 56px 0 64px; align-items: center; position: relative; }
.hero__intro { font-size: 1.08rem; max-width: 34em; color: var(--encre-douce); }
.hero__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero__visuel { display: flex; justify-content: center; }
.hero__rond { width: min(62vw, 300px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, var(--blanc), var(--sauge-claire)); display: grid; place-items: center; box-shadow: var(--ombre); position: relative; }
.hero__rond::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid var(--or); opacity: .6; }
.hero__picto svg { width: 46%; height: 46%; min-width: 120px; min-height: 120px; color: var(--sauge); stroke-width: 1.1; }

/* Categories de l'accueil */
.categories { display: grid; gap: 18px; grid-template-columns: 1fr; }
.carte-categorie { background: var(--blanc); border-radius: var(--rayon); padding: 26px 22px; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.carte-categorie__picto { width: 64px; height: 64px; border-radius: 50%; background: var(--or-pale); display: grid; place-items: center; margin-bottom: 16px; }
.carte-categorie__picto svg { width: 34px; height: 34px; }
.carte-categorie h3 { margin-bottom: .2em; }
.soins-liste { list-style: none; padding: 0; margin: 8px 0 18px; border-top: 1px solid var(--sable-fonce); }
.soins-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--sable-fonce); font-size: .93rem; }
.soins-liste__nom { flex: 1 1 auto; }
.soins-liste__detail { color: var(--encre-douce); white-space: nowrap; margin-left: auto; }
.carte-categorie .lien { align-self: flex-start; margin-top: auto; font-size: .9rem; }
.mention-prix { font-size: .82rem; color: var(--encre-douce); margin-top: 18px; }

/* Comment ca marche */
.etapes-liste { list-style: none; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
.etapes-liste li { display: flex; gap: 14px; align-items: flex-start; }
.etape-num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--sauge); color: var(--blanc); display: grid; place-items: center; font-family: var(--titres); font-size: 1.2rem; font-weight: 600; }

/* Infos pratiques */
.infos { display: grid; gap: 22px; grid-template-columns: 1fr; }
.info { background: var(--blanc); border-radius: var(--rayon); padding: 22px; }
.info p { margin: 0; }

/* Carte Google Maps */
.carte { margin-top: 22px; }
.carte iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: var(--rayon); box-shadow: var(--ombre); background: var(--sable-fonce); }
.carte__legende { font-size: .86rem; color: var(--encre-douce); margin: 10px 0 0; }

/* Page de reservation */
.reserver { padding: 36px 0 56px; }
.reserver h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
.etapes { list-style: none; padding: 0; margin: 24px 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.etape__bouton { width: 100%; background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: var(--encre-douce); }
.etape__bouton[disabled] { cursor: default; }
.etape__num { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--sable-fonce); background: var(--blanc); display: grid; place-items: center; font-size: .9rem; font-weight: 600; }
.etape__titre { font-size: .72rem; letter-spacing: .04em; text-align: center; line-height: 1.2; }
.etape--active .etape__num { background: var(--sauge); border-color: var(--sauge); color: var(--blanc); }
.etape--active .etape__bouton { color: var(--encre); font-weight: 500; }
.etape--faite .etape__num { background: var(--or-pale); border-color: var(--or); color: var(--sauge-foncee); }
.panneau { background: var(--blanc); border-radius: var(--rayon); padding: 24px 18px 20px; box-shadow: var(--ombre); }
.panneau .surtitre { margin-bottom: .4em; }
.panneau h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.panneau__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.panneau__nav .bouton:only-child { margin-left: auto; }
.choix-actuel { font-size: .86rem; color: var(--sauge-foncee); background: var(--or-pale); border-radius: 10px; padding: 8px 12px; margin-bottom: 18px; }

.onglets-cadre { position: relative; margin: 0 -18px 16px; }
.onglets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; padding-inline: 18px; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
/* Voile degrade a droite : montre que la rangee continue et se fait defiler */
.onglets-cadre::after { content: ""; position: absolute; top: 0; right: 0; bottom: 6px; width: 56px; pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--blanc) 85%); }
.onglet { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--sable-fonce); background: var(--sable); cursor: pointer; font-size: .86rem; white-space: nowrap; }
.onglet__picto svg { width: 20px; height: 20px; }
.onglet--actif { background: var(--sauge); border-color: var(--sauge); color: var(--blanc); }
.onglet--actif .picto { color: var(--blanc); }

.cartes-soins { display: grid; gap: 10px; grid-template-columns: 1fr; }
.carte-soin { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 14px; border-radius: 14px; border: 1.5px solid var(--sable-fonce); background: var(--blanc); cursor: pointer; transition: border-color .15s, background .15s; }
.carte-soin:hover { border-color: var(--sauge-claire); background: var(--sable); }
.carte-soin--choisi { border-color: var(--sauge); background: var(--sable); }
.carte-soin__coche { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--sable-fonce); display: grid; place-items: center; color: transparent; margin-top: 2px; }
.carte-soin--choisi .carte-soin__coche { background: var(--sauge); border-color: var(--sauge); color: var(--blanc); }
.carte-soin__corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.carte-soin__desc { font-size: .86rem; color: var(--encre-douce); }
.carte-soin__detail { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.pastille { font-size: .78rem; background: var(--or-pale); color: var(--sauge-foncee); border-radius: 999px; padding: 2px 10px; }
.carte-soin__prix { font-weight: 600; white-space: nowrap; }

.jours { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.jour { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 14px; border: 1.5px solid var(--sable-fonce); background: var(--blanc); cursor: pointer; line-height: 1.2; }
.jour:hover { border-color: var(--sauge-claire); background: var(--sable); }
.jour__semaine { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); }
.jour__num { font-family: var(--titres); font-size: 1.6rem; font-weight: 600; margin: 2px 0; }
.jour__mois { font-size: .72rem; color: var(--encre-douce); }
.jour--choisi { background: var(--sauge); border-color: var(--sauge); color: var(--blanc); }
.jour--choisi .jour__semaine, .jour--choisi .jour__mois { color: var(--blanc); }
.jour--ferme { opacity: .45; cursor: not-allowed; background: var(--sable); }
.jour--ferme:hover { border-color: var(--sable-fonce); }

.heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.heure { padding: 11px 6px; border-radius: 12px; border: 1.5px solid var(--sable-fonce); background: var(--blanc); cursor: pointer; font-size: .95rem; white-space: nowrap; }
.heure:hover { border-color: var(--sauge-claire); background: var(--sable); }
.heure--choisi { background: var(--sauge); border-color: var(--sauge); color: var(--blanc); }

.champ { margin-bottom: 16px; }
.champ label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 6px; }
.champ input, .champ textarea { width: 100%; font: inherit; color: inherit; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--sable-fonce); background: var(--sable); }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--sauge); outline-offset: 1px; border-color: var(--sauge); }
.champ textarea { resize: vertical; min-height: 84px; }

.recap { background: var(--or-pale); border-radius: var(--rayon); padding: 22px 18px; margin-top: 18px; }
.recap h3 { margin-bottom: .6em; }
.recap dl { margin: 0; }
.recap__ligne { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(43, 51, 46, .1); }
.recap dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-douce); padding-top: 2px; }
.recap dd { margin: 0; font-weight: 500; overflow-wrap: break-word; }
.envoi { margin-top: 18px; }
.note-envoi { font-size: .86rem; color: var(--encre-douce); text-align: center; margin: 12px 0 0; }

/* Page des tests : simple et lisible */
.tests { max-width: 860px; margin: 24px auto; padding: 0 16px; }

@media (min-width: 640px) {
  .conteneur { width: min(100% - 48px, 1120px); }
  .conteneur--etroit { width: min(100% - 48px, 720px); }
  .categories { grid-template-columns: repeat(2, 1fr); }
  .infos { grid-template-columns: repeat(3, 1fr); }
  .etapes-liste { grid-template-columns: repeat(3, 1fr); }
  .pied__grille { grid-template-columns: repeat(3, 1fr); }
  .panneau { padding: 32px 28px 26px; }
  .onglets-cadre { margin: 0 0 18px; }
  .onglets-cadre::after { display: none; }
  .onglets { padding-inline: 0; flex-wrap: wrap; overflow: visible; }
  .etape__titre { font-size: .8rem; }
  .marque strong { font-size: 1.5rem; }
}
@media (min-width: 960px) {
  .hero__grille { grid-template-columns: 1.1fr .9fr; padding: 88px 0 96px; gap: 48px; }
  .hero__rond { width: 360px; }
  .categories { grid-template-columns: repeat(4, 1fr); }
  .section { padding: 72px 0; }
  .carte iframe { height: 380px; }
  .nav { gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}