/* ============================================================
   Sandra Wellness — socle graphique commun
   Or antique prélevé sur le logo, crème, beaucoup de blanc.
   ============================================================ */

:root {
  /* marque */
  --or:          #B08F5C;
  --or-fonce:    #8C6F42;
  --or-clair:    #D7C09A;
  --or-voile:    #F2EBDF;

  /* accents par discipline */
  --reiki:       #B08F5C;
  --reiki-voile: #F4ECE0;
  --yoga:        #7E9B8A;
  --yoga-voile:  #EBF1ED;

  /* neutres */
  --creme:       #FAF8F4;
  --creme-2:     #F3EFE8;
  --blanc:       #FFFFFF;
  --encre:       #2B2721;
  --encre-2:     #574F45;
  --encre-3:     #8C8275;
  --trait:       #E6DFD3;

  /* états */
  --succes:      #5B8C6E;
  --alerte:      #C08A3E;
  --erreur:      #B4604F;

  /* typographie */
  --titre:  'Cormorant Garamond', 'Times New Roman', serif;
  --texte:  'Jost', 'Futura', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --script: 'Parisienne', cursive;

  /* mesures */
  --gouttiere: clamp(1.25rem, 5vw, 4rem);
  --max:       1180px;
  --rayon:     3px;
  --rayon-lg:  6px;
  --ombre:     0 1px 2px rgba(43, 39, 33, .04), 0 8px 28px rgba(43, 39, 33, .06);
  --ombre-fort:0 2px 6px rgba(43, 39, 33, .06), 0 18px 48px rgba(43, 39, 33, .10);
  --transition: 220ms cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit l'emporter sur tout display: déclaré ici.
   Sans cette règle, un élément en display:grid resterait visible. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}

/* Cormorant dessine par défaut des chiffres anciens : le 1 ressemble
   à un I. On force les chiffres alignés partout où ils sont lus
   comme des nombres (dates, prix, compteurs). */
h1, h2, h3, h4,
.stat__valeur, .tarif__prix, .prestation__num, .cours__date,
.seance__num, .solde__nombre, .cal__num, .frise__heure, .code-acces {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  color: var(--encre);
}

h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--or-fonce); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--encre); }

img, svg { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--trait);
  margin: 3rem 0;
}

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------------------------- mise en page */
.conteneur {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.etroit { max-width: 720px; }

.section { padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.section--creme { background: var(--creme-2); }
.section--blanc { background: var(--blanc); }

.grille { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ------------------------------------------- éléments de marque */

/* Petit libellé en capitales espacées, au-dessus des titres. */
.surtitre {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1.1rem;
  display: block;
}

/* Le filet or du logo, repris comme séparateur. */
.filet {
  width: 56px;
  height: 1px;
  background: var(--or);
  border: 0;
  margin: 1.6rem 0;
}
.filet--centre { margin-inline: auto; }

.script {
  font-family: var(--script);
  color: var(--or);
  font-size: 1.6em;
  line-height: 1;
}

.plomb {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--encre-2);
  line-height: 1.75;
}

/* ------------------------------------------------------ boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 2.1rem;
  font-family: var(--texte);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--or);
  border-radius: var(--rayon);
  background: var(--or);
  color: var(--blanc);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.bouton:hover {
  background: var(--or-fonce);
  border-color: var(--or-fonce);
  color: var(--blanc);
}
.bouton:active { transform: translateY(1px); }

.bouton--fantome {
  background: transparent;
  color: var(--or-fonce);
}
.bouton--fantome:hover {
  background: var(--or);
  color: var(--blanc);
}

.bouton--discret {
  background: transparent;
  border-color: var(--trait);
  color: var(--encre-2);
}
.bouton--discret:hover {
  background: var(--creme-2);
  border-color: var(--encre-3);
  color: var(--encre);
}

.bouton--petit { padding: .6rem 1.2rem; font-size: .7rem; letter-spacing: .12em; }
.bouton--bloc  { width: 100%; }
.bouton[disabled] { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------- cartes */
.carte {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: box-shadow var(--transition), transform var(--transition);
}
.carte--survol:hover { box-shadow: var(--ombre); transform: translateY(-2px); }

/* --------------------------------------------------- étiquettes */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .7rem;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--creme-2);
  color: var(--encre-2);
  white-space: nowrap;
}
.etiquette--reiki   { background: var(--reiki-voile); color: var(--or-fonce); }
.etiquette--yoga    { background: var(--yoga-voile);  color: #4F6B5B; }
.etiquette--succes  { background: #E8F0EA; color: #3F6B50; }
.etiquette--alerte  { background: #FBF0DE; color: #8A6220; }
.etiquette--erreur  { background: #F8E8E4; color: #8F4535; }
.etiquette--neutre  { background: var(--creme-2); color: var(--encre-3); }

/* ----------------------------------------------- formulaires */
label {
  display: block;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-bottom: .45rem;
}

input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], input[type=time], input[type=datetime-local], input[type=number],
input[type=search], select, textarea {
  width: 100%;
  padding: .8rem 1rem;
  font-family: var(--texte);
  font-size: .95rem;
  font-weight: 300;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(176, 143, 92, .12);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C8275' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.champ { margin-bottom: 1.25rem; }
.champ__aide { font-size: .8rem; color: var(--encre-3); margin-top: .4rem; text-transform: none; letter-spacing: 0; }

.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .champs-2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ alertes */
.alerte {
  padding: .9rem 1.2rem;
  border-radius: var(--rayon);
  border-left: 3px solid var(--or);
  background: var(--or-voile);
  color: var(--encre-2);
  font-size: .92rem;
  margin-bottom: 1.5rem;
}
.alerte--succes { border-color: var(--succes); background: #EDF4EF; }
.alerte--erreur { border-color: var(--erreur); background: #FAEDEA; }

/* ------------------------------------------------------ divers */
.centre { text-align: center; }
.muet   { color: var(--encre-3); }
.petit  { font-size: .85rem; }
.gras   { font-weight: 400; }
.nowrap { white-space: nowrap; }
.pile   { display: flex; flex-direction: column; gap: .5rem; }
.ligne  { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.entre  { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vide   { text-align: center; padding: 3rem 1rem; color: var(--encre-3); }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}