/* Les Soins en Couleurs — parcours de réservation — v1.2 du 22/09/2026
   Variables préfixées --r- et règles limitées à .rsv-app : aucune interférence avec styles.css / premium*.css */
.rsv-app{
  --r-pin:#21392b; --r-pin-doux:#35553f; --r-or:#a9843c; --r-or-clair:#e4cf9c;
  --r-sable:#f2eadb; --r-papier:#fbf8f2; --r-encre:#1f2a23; --r-gris-texte:#56605a;
  --r-trait:#d9ccb2; --r-alerte:#9b2c1f;
  --r-titre:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --r-texte:Jost,"Avenir Next","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Ruban chromatique : sept couleurs, ni blanc, ni noir, ni gris */
  --r-c1:#c0392b; --r-c2:#d9762b; --r-c3:#d8b12a; --r-c4:#4f8a4a; --r-c5:#2f6fa3; --r-c6:#3f3f8f; --r-c7:#7b4a9b;
}
*{box-sizing:border-box}
.rsv-app{background:var(--r-papier);color:var(--r-encre);font:1.0625rem/1.6 var(--r-texte)}
.rsv-app a{color:var(--r-pin)}
.rsv-app :focus-visible{outline:3px solid var(--r-or);outline-offset:2px}
.rsv-app [hidden]{display:none!important}


.rsv-cadre{max-width:46rem;margin:0 auto;padding:clamp(1.5rem,5vw,3rem) clamp(1rem,4vw,1.5rem) 3rem}
.rsv-intro h1{font:500 clamp(2.2rem,6vw,3.1rem)/1.05 var(--r-titre);color:var(--r-pin);margin:0 0 .6rem;letter-spacing:-.01em}
.rsv-intro p{margin:0 0 1.8rem;color:var(--r-gris-texte);max-width:36rem}

/* Ruban des étapes : chaque étape franchie prend sa couleur */
.rsv-etapes{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:0 0 2rem;padding:0;counter-reset:e}
.rsv-etapes li{position:relative;padding-top:12px;font-size:.8rem;color:var(--r-gris-texte);counter-increment:e}
.rsv-etapes li::before{content:"";position:absolute;inset:0 0 auto;height:6px;border-radius:3px;background:var(--r-trait);transition:background .4s}
.rsv-etapes li[data-fait]::before,.rsv-etapes li[aria-current]::before{background:var(--r-teinte)}
.rsv-etapes li[aria-current]{color:var(--r-pin);font-weight:600}
.rsv-etapes li:nth-child(1){--r-teinte:linear-gradient(90deg,var(--r-c1),var(--r-c2))}
.rsv-etapes li:nth-child(2){--r-teinte:linear-gradient(90deg,var(--r-c2),var(--r-c3))}
.rsv-etapes li:nth-child(3){--r-teinte:linear-gradient(90deg,var(--r-c3),var(--r-c4))}
.rsv-etapes li:nth-child(4){--r-teinte:linear-gradient(90deg,var(--r-c4),var(--r-c5),var(--r-c6))}
.rsv-etapes li:nth-child(5){--r-teinte:linear-gradient(90deg,var(--r-c6),var(--r-c7))}
@media (max-width:30rem){.rsv-etapes li span{display:none}.rsv-etapes li[aria-current] span{display:inline;white-space:nowrap}}

.rsv-panneau h2{font:500 1.9rem/1.15 var(--r-titre);color:var(--r-pin);margin:0 0 .4rem}
.rsv-rappel{margin:0 0 1.2rem;color:var(--r-gris-texte)}
.rsv-rappel strong{color:var(--r-encre);font-weight:600}
.rsv-attente{color:var(--r-gris-texte)}

/* Étape 1 — soins */
.rsv-soins{display:grid;gap:.6rem;margin-top:1rem}
.rsv-soin{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:baseline;width:100%;text-align:left;padding:1rem 1.1rem;background:#fff;border:1px solid var(--r-trait);border-left:4px solid var(--r-pin-doux);border-radius:6px;font:inherit;color:inherit;cursor:pointer}
.rsv-soin:hover{border-color:var(--r-or)}
.rsv-soin b{font:600 1.3rem/1.2 var(--r-titre);color:var(--r-pin)}
.rsv-soin .prix{font-weight:600;color:var(--r-pin);white-space:nowrap}
.rsv-soin .meta{grid-column:1/-1;font-size:.9rem;color:var(--r-gris-texte)}
.rsv-soin.evenement{border-left-color:var(--r-or);background:linear-gradient(90deg,#fff8e6,#fff 60%)}
.rsv-soin .badge{grid-column:1/-1;justify-self:start;font-size:.78rem;font-weight:600;color:#6d5320;background:var(--r-or-clair);padding:.1rem .55rem;border-radius:999px}

/* Étape 2 — calendrier */
.rsv-calendrier{background:#fff;border:1px solid var(--r-trait);border-radius:8px;padding:1rem}
.rsv-mois{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.rsv-mois p{margin:0;font:600 1.35rem var(--r-titre);color:var(--r-pin)}
.rsv-fleche{width:2.6rem;height:2.6rem;border:1px solid var(--r-trait);border-radius:50%;background:var(--r-papier);font-size:1.4rem;line-height:1;color:var(--r-pin);cursor:pointer}
.rsv-fleche:disabled{opacity:.3;cursor:default}
.rsv-grille-tete,.rsv-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.rsv-grille-tete span{text-align:center;font-size:.78rem;color:var(--r-gris-texte);padding:.2rem 0}
.rsv-jour{aspect-ratio:1;min-height:2.6rem;border:0;border-radius:6px;background:transparent;font:inherit;color:#a59f94;cursor:default}
.rsv-jour.libre{background:var(--r-sable);color:var(--r-pin);font-weight:600;cursor:pointer}
.rsv-jour.libre:hover{background:var(--r-or-clair)}
.rsv-jour.evenement{background:var(--r-or-clair);box-shadow:inset 0 0 0 2px var(--r-or)}
.rsv-jour.choisi{background:var(--r-pin);color:var(--r-sable)}

/* Étape 3 — heures */
.rsv-heures{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:.5rem}
.rsv-heures h3{grid-column:1/-1;margin:.8rem 0 0;font:600 1rem var(--r-texte);color:var(--r-gris-texte)}
.rsv-heure{padding:.75rem 0;border:1px solid var(--r-trait);border-radius:6px;background:#fff;font:600 1rem var(--r-texte);color:var(--r-pin);cursor:pointer}
.rsv-heure:hover{border-color:var(--r-or);background:#fffaf0}

/* Étape 4 — formulaire */
.rsv-champs{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem;margin-bottom:1rem}
@media (max-width:34rem){.rsv-champs{grid-template-columns:1fr}}
.rsv-champs label{display:grid;gap:.3rem;font-size:.92rem;font-weight:500}
.rsv-champs small{font-weight:400;color:var(--r-gris-texte)}
.rsv-large{grid-column:1/-1}
.rsv-champs input,.rsv-champs textarea{width:100%;padding:.75rem .8rem;border:1px solid var(--r-trait);border-radius:6px;background:#fff;font:inherit;color:var(--r-encre)}
.rsv-champs input:focus,.rsv-champs textarea:focus{border-color:var(--r-pin-doux);outline:2px solid var(--r-or-clair)}
.rsv-champs [aria-invalid="true"]{border-color:var(--r-alerte)}
.rsv-piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.rsv-case{display:flex;gap:.6rem;align-items:flex-start;margin:.6rem 0;font-size:.92rem}
.rsv-case input{margin-top:.3rem;width:1.1rem;height:1.1rem;accent-color:var(--r-pin)}
.rsv-erreur{color:var(--r-alerte);font-weight:500;margin:.8rem 0}

/* Récapitulatif */
.rsv-recap{display:grid;grid-template-columns:max-content 1fr;gap:.55rem 1.2rem;margin:1rem 0;padding:1.2rem;background:#fff;border:1px solid var(--r-trait);border-radius:8px}
.rsv-recap dt{color:var(--r-gris-texte)}
.rsv-recap dd{margin:0;font-weight:500}
@media (max-width:30rem){.rsv-recap{grid-template-columns:1fr;gap:.1rem}.rsv-recap dd{margin-bottom:.5rem}}

.rsv-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.4rem}
.rsv-bouton{display:inline-block;padding:.9rem 1.6rem;border:0;border-radius:999px;background:var(--r-pin);color:var(--r-sable);font:600 1rem var(--r-texte);text-decoration:none;cursor:pointer}
.rsv-bouton:hover{background:var(--r-pin-doux)}
.rsv-bouton:disabled{opacity:.6;cursor:wait}
.rsv-lien{border:0;background:none;padding:.4rem 0;font:inherit;color:var(--r-pin);text-decoration:underline;cursor:pointer}

.rsv-annonce{margin:0 0 1.2rem;padding:.9rem 1rem;background:#fff8e6;border:1px solid var(--r-or-clair);border-radius:6px}
.rsv-succes h2{color:var(--r-pin)}
.rsv-aide{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--r-trait);font-size:.92rem;color:var(--r-gris-texte)}
.rsv-mention{font-size:.82rem}
.rsv-noscript{max-width:46rem;margin:1rem auto;padding:1rem;background:#fff8e6}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Neutralisation des marges génériques du site à l'intérieur du parcours */
.rsv-app section.rsv-panneau,.rsv-app section.rsv-intro{padding:0;margin:0;min-height:0;background:none}
.rsv-app .rsv-etapes{margin:0 0 1.6rem}
.rsv-app h1,.rsv-app h2{text-align:left}
.rsv-app h2:focus{outline:none}
.rsv-app .rsv-aide{margin-top:2.5rem}