/* =========================================================
   DERMOPUR – feuille de style (palette grain de sable, typographie éditoriale)
   Les couleurs du site sont réglées juste en dessous.
   ========================================================= */
:root {
  /* Palette « grain de sable » : épurée, moderne, élégante */
  --cacao: #4a3830;          /* couleur principale : logo, titres, boutons */
  --cacao-fonce: #2e2420;    /* bandeau du haut, pied de page, survols */
  --taupe: #6e5e50;          /* petits titres en capitales (lisible sur fond clair) */
  --nude: #b9927f;           /* filets fins et touches de couleur */
  --nude-clair: #dcc3b6;     /* petits textes sur fond cacao */
  --pierre: #e8dfd3;         /* bandes de fond (pierre claire) */
  --or: #c9a96e;             /* doré : détails sur fond foncé (comme la carte de visite) */
  --or-profond: #b08d57;     /* doré plus profond : détails sur fond clair */
  --or-texte: #7a6145;       /* doré lisible sur fond clair (étoiles) */
  --creme: #f2ece4;          /* fond général (sable) */
  --ivoire: #f8f4ee;         /* fond des cartes (lin) */
  --poudre: #e8dfd3;         /* fond des bandes */
  --filet: #ddd2c4;          /* lignes fines */
  --encre: #2a221e;          /* texte principal (espresso) */
  --encre-douce: #5e534c;    /* texte secondaire */
  --erreur: #a3182b;
  --ombre: 0 24px 60px rgba(46, 36, 32, .07);
  --rayon: 2px;
  --titres: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --texte: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  /* grain discret, façon papier d'art */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.75;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cacao); text-underline-offset: 3px; }
a:hover { color: var(--cacao-fonce); }
:focus-visible { outline: 3px solid var(--cacao); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--titres); color: var(--cacao); line-height: 1.2; font-weight: 500; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); margin: 0 0 .5em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin: 0 0 .6em; }
h3 { font-size: 1.3rem; margin: 1.4em 0 .4em; }
p { margin: 0 0 1em; }

.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.conteneur { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
.etroit { width: min(780px, 100% - 2.5rem); margin-inline: auto; }
[hidden] { display: none !important; }
.cache { position: absolute !important; left: -9999px !important; }
.centre { text-align: center; }

.lien-evitement { position: absolute; left: -9999px; top: 0; background: var(--cacao); color: #fff; padding: .6em 1em; z-index: 100; }
.lien-evitement:focus { left: 1rem; top: 1rem; color: #fff; }

/* ---------- Logo en lettres espacées ---------- */
.logo { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--cacao); line-height: 1; }
.logo__nom { font-family: var(--titres); font-weight: 500; font-size: 1.45rem; letter-spacing: .42em; margin-right: -.42em; }
.logo__sous { font-family: var(--texte); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; margin-top: .5em; color: var(--taupe); margin-right: -.2em; white-space: nowrap; }
.logo:hover { color: var(--cacao-fonce); }
.logo__slogan { font-family: var(--titres); font-style: italic; font-size: .82rem; letter-spacing: .03em; margin-top: .45em; color: var(--taupe); white-space: nowrap; }
.pied .logo__slogan { color: #f3e6e8; font-size: .95rem; }
.pied .logo__sous { margin-top: .6em; }
@media (max-width: 380px) {
  .logo__nom { font-size: 1.1rem; letter-spacing: .26em; margin-right: -.26em; }
  .logo__sous { font-size: .5rem; letter-spacing: .12em; margin-right: -.12em; }
  .entete__inner { gap: .5rem; }
  .entete .menu-bouton { padding: .55em .6em; letter-spacing: .06em; }
}

/* ---------- Petits titres et filets ---------- */
.surtitre { display: block; font-family: var(--texte); font-weight: 500; letter-spacing: .28em; text-transform: uppercase; font-size: .78rem; color: var(--taupe); margin-bottom: .9rem; }
.filet { display: block; width: 56px; height: 1px; background: var(--cacao); margin: 1.2rem 0 1.6rem; border: 0; }
.centre .filet { margin-inline: auto; }
.intro { font-size: 1.15rem; color: var(--encre-douce); max-width: 44em; }
.centre .intro { margin-inline: auto; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: .75em 1.6em;
  border: 1px solid var(--cacao); border-radius: var(--rayon);
  background: transparent; color: var(--cacao);
  font: 500 .9rem/1.2 var(--texte); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.bouton:hover { background: var(--cacao); color: #fff; }
.bouton--plein { background: var(--cacao); color: #fff; }
.bouton--plein:hover { background: var(--cacao-fonce); border-color: var(--cacao-fonce); color: #fff; }
.bouton--grand { min-height: 60px; font-size: .95rem; padding: .85em 2em; }
.bouton--clair { border-color: #fff; color: #fff; }
.bouton--clair:hover { background: #fff; color: var(--cacao); }
.bouton--blanc { background: #fff; border-color: #fff; color: var(--cacao); }
.bouton--blanc:hover { background: var(--creme); color: var(--cacao-fonce); }
.boutons { display: flex; flex-wrap: wrap; gap: .8rem; }
.centre .boutons, .boutons--centre { justify-content: center; }

/* ---------- Barre du haut ---------- */
.barre-haut { background: var(--cacao-fonce); color: #fff; font-size: .85rem; }
.barre-haut__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1.2rem; padding: .3rem 0; }
.barre-haut a { color: #fff; text-decoration: none; display: inline-flex; gap: .45em; align-items: center; min-height: 40px; letter-spacing: .04em; }
.barre-haut a:hover { text-decoration: underline; }
.barre-haut__contacts { display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; }
@media (max-width: 699px) { .barre-haut__contacts a:not(:first-child) span { display: none; } .barre-haut__contacts { gap: 0 1.1rem; } }
.barre-haut__adresse { display: none; letter-spacing: .04em; }
@media (min-width: 700px) { .barre-haut__adresse { display: inline; } }

/* ---------- En-tête et menu ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 252, 248, .97); border-bottom: 1px solid var(--filet); }
.entete__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 84px; }
.menu-bouton {
  display: inline-flex; align-items: center; gap: .5em;
  background: transparent; color: var(--cacao); border: 1px solid var(--cacao); border-radius: var(--rayon);
  padding: .55em 1em; min-height: 48px; font: 500 .85rem var(--texte); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.menu { display: none; }
.menu.ouvert { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--ivoire); border-bottom: 1px solid var(--filet); box-shadow: var(--ombre); padding: .5rem 1.25rem 1.25rem; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li a { display: block; padding: .85em .3em; font-size: 1.05rem; color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--filet); }
.menu li a[aria-current="page"] { color: var(--cacao); font-weight: 600; }
.menu__rdv { margin-top: 1rem; width: 100%; }
@media (min-width: 1260px) {
  .menu-bouton { display: none; }
  .menu, .menu.ouvert { display: flex; align-items: center; gap: 1.2rem; position: static; background: none; border: 0; box-shadow: none; padding: 0; }
  .menu ul { display: flex; gap: .2rem; }
  .menu li a { border: 0; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; padding: .6em .7em; white-space: nowrap; border-bottom: 1px solid transparent; }
  .menu li a:hover { color: var(--cacao); border-bottom-color: var(--filet); }
  .menu li a[aria-current="page"] { border-bottom-color: var(--cacao); font-weight: 500; }
  .menu__rdv { margin: 0; width: auto; min-height: 48px; white-space: nowrap; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--ivoire { background: var(--ivoire); }
.section--poudre { background: var(--poudre); }
.en-tete-page { background: var(--ivoire); padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--filet); text-align: center; }
.en-tete-page h1 { margin-bottom: .3em; }
.en-tete-page .intro { margin: 0 auto; }

/* ---------- Accueil ---------- */
.accueil { background: var(--ivoire); border-bottom: 1px solid var(--filet); }
.accueil__grille { display: grid; gap: 2.5rem; align-items: center; padding: clamp(3rem, 8vw, 6rem) 0; }
.accueil h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); }
.accueil h1 em { font-style: italic; color: var(--taupe); }
.accueil__texte .intro { font-size: 1.2rem; }
.accueil__photo { aspect-ratio: 4 / 5; max-height: 600px; outline: 1px solid var(--filet); outline-offset: 14px; margin: 14px; }
.reperes { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; gap: .55rem; }
.reperes li { display: flex; gap: .7em; align-items: center; }
.reperes .ic { color: var(--cacao); }
@media (min-width: 900px) { .accueil__grille { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }

.deux-colonnes { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .deux-colonnes { grid-template-columns: 1fr 1fr; gap: 5rem; } .deux-colonnes--inverse > :first-child { order: 2; } }
.photo-cadre { aspect-ratio: 4 / 5; max-width: 460px; margin: 14px auto; width: calc(100% - 28px); outline: 1px solid var(--filet); outline-offset: 14px; }
.signature { font-family: var(--titres); font-style: italic; font-size: 1.35rem; color: var(--cacao); margin-top: 1.5rem; }

/* Engagements (hygiène) */
.engagements { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1px; background: var(--filet); border: 1px solid var(--filet); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.engagements li { background: var(--ivoire); padding: 1.8rem 1.6rem; }
.engagements strong { display: block; font-family: var(--titres); font-weight: 500; font-size: 1.2rem; color: var(--cacao); margin-bottom: .4rem; }
.engagements p { margin: 0; color: var(--encre-douce); }

/* Cartes des prestations */
.cartes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 2.5rem; }
.carte { background: var(--ivoire); border: 1px solid var(--filet); display: flex; flex-direction: column; transition: box-shadow .25s; }
.carte:hover { box-shadow: var(--ombre); }
.carte__photo { aspect-ratio: 4 / 3; }
.carte__corps { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.carte__categorie { margin: 0 0 .3rem; font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); }
.carte h3 { margin: 0 0 .4em; font-size: 1.3rem; }
.carte__infos { color: var(--encre-douce); flex: 1; }
.carte__lien { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: .1em; }

/* Étapes numérotées */
.etapes { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: etape; }
.etapes li { background: var(--ivoire); border: 1px solid var(--filet); padding: 1.8rem 1.6rem; counter-increment: etape; }
.etapes li::before { content: "0" counter(etape); display: block; font: 500 1.9rem var(--titres); color: var(--cacao); margin-bottom: .6rem; }
.etapes h3 { margin-top: 0; }
.etapes p { margin: 0; color: var(--encre-douce); }

/* Bandeau d'appel */
.appel { background: var(--cacao); color: #fff; text-align: center; }
.appel h2, .appel p { color: #fff; }
.appel .surtitre { color: #e9cfd3; }
.appel .filet { background: #fff; }

/* ---------- Photos (cadre « Photo à venir » si la photo n'est pas encore là) ---------- */
.photo { position: relative; background: var(--poudre); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.photo--absente img { display: none; }
.photo--absente::after { content: "Photo à venir"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--titres); font-style: italic; font-size: 1.1rem; color: var(--taupe); }

/* ---------- Page Prestations ---------- */
.tableau-defile { overflow-x: auto; border: 1px solid var(--filet); background: var(--ivoire); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .95rem 1.3rem; text-align: left; border-top: 1px solid var(--filet); }
thead th { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--taupe); border-top: 0; }
td.prix { font-family: var(--titres); font-size: 1.15rem; color: var(--cacao); white-space: nowrap; text-align: right; }
th[scope="row"] { font-weight: 400; }
th[scope="row"] a { color: var(--encre); text-decoration: none; }
th[scope="row"] a:hover { color: var(--cacao); text-decoration: underline; }
.tarifs__groupe th { background: var(--poudre); font-family: var(--titres); font-weight: 500; font-size: 1.1rem; color: var(--cacao); padding-block: .7rem; }
#tableau-tarifs td:nth-child(2) { color: var(--encre-douce); white-space: nowrap; }
@media (max-width: 520px) { th, td { padding: .8rem .8rem; } }

.categorie-titre { margin: 4rem 0 1.5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--filet); }
.prestation { display: grid; background: var(--ivoire); border: 1px solid var(--filet); margin-bottom: 2rem; scroll-margin-top: 110px; }
.prestation__photo { aspect-ratio: 4 / 3; }
.prestation__texte { padding: 1.6rem 1.5rem 1.8rem; }
.prestation h3 { margin: 0 0 .2em; font-size: clamp(1.35rem, 3vw, 1.7rem); }
@media (min-width: 900px) {
  .prestation { grid-template-columns: 2fr 3fr; }
  .prestation__photo { aspect-ratio: auto; min-height: 100%; }
  .prestation__texte { padding: 2.4rem 2.6rem; }
}
.infos { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; padding: 0; margin: .8rem 0 1.2rem; }
.infos li { display: inline-flex; align-items: center; gap: .5em; color: var(--encre-douce); }
.infos .ic { color: var(--cacao); }
.bon-a-savoir { background: var(--creme); border-left: 2px solid var(--cacao); padding: .9em 1.1em; font-size: .95rem; }

.liste-soin { list-style: none; padding: 0; margin: 0 0 1em; }
.liste-soin li { position: relative; padding-left: 1.8em; margin-bottom: .6em; }
.liste-soin li::before { content: ""; position: absolute; left: .2em; top: .75em; width: .6em; height: 1px; background: var(--cacao); }

/* ---------- Encadrés ---------- */
.encadre { background: var(--ivoire); border: 1px solid var(--filet); padding: 1.6rem 1.8rem; }
.encadre h2, .encadre h3 { margin-top: 0; }
.encadre--info { border-color: var(--cacao); }
.encadre--attention { background: #fbf3f0; border: 1px solid var(--cacao); margin: 1rem 0; padding: 1.1rem 1.3rem; }
.avertissement { display: flex; gap: 1rem; align-items: flex-start; }
.avertissement .ic { color: var(--cacao); width: 1.8rem; height: 1.8rem; }

/* Chronologie de la cicatrisation */
.chrono { list-style: none; padding: 0; margin: 2rem 0 0; border-left: 1px solid var(--cacao); }
.chrono li { position: relative; padding: 0 0 1.8rem 1.8rem; }
.chrono li::before { content: ""; position: absolute; left: -6px; top: .55em; width: 11px; height: 11px; border-radius: 50%; background: var(--creme); border: 1px solid var(--cacao); }
.chrono strong { display: block; font-family: var(--titres); font-weight: 500; font-size: 1.2rem; color: var(--cacao); }
.chrono p { margin: .2rem 0 0; }

.grille-conseils { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: 2rem; }
.grille-conseils .encadre h3 { font-size: 1.25rem; }
.grille-conseils .encadre p:last-child, .grille-conseils .encadre ul:last-child { margin-bottom: 0; }

/* ---------- Contact ---------- */
.moyens { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 2rem 0 0; }
.moyen { display: flex; gap: 1rem; align-items: center; background: var(--ivoire); border: 1px solid var(--filet); padding: 1.1rem 1.2rem; color: var(--encre); text-decoration: none; transition: border-color .25s; }
.moyen:hover { border-color: var(--cacao); color: var(--encre); }
.moyen__icone { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--cacao); color: var(--cacao); flex: none; }
.moyen__icone .ic { width: 22px; height: 22px; }
.moyen strong { display: block; font-weight: 500; }
.moyen span { color: var(--encre-douce); font-size: .95rem; word-break: break-word; }

.grille-contact { display: grid; gap: 3rem; }
@media (min-width: 950px) { .grille-contact { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.horaires { width: 100%; }
.horaires th, .horaires td { padding: .55rem 0; border-top: 1px solid var(--filet); }
.horaires th { font-weight: 400; }
.horaires td { text-align: right; }
.carte-plan { border: 1px solid var(--filet); margin-top: 1rem; }
.carte-plan iframe { display: block; width: 100%; height: 320px; border: 0; }

.formulaire { background: var(--ivoire); border: 1px solid var(--filet); padding: clamp(1.3rem, 4vw, 2.4rem); scroll-margin-top: 100px; }
.champ { margin-bottom: 1.2rem; }
.champ label { display: block; font-weight: 500; margin-bottom: .35rem; }
.champ .aide { display: block; font-weight: 400; color: var(--encre-douce); font-size: .92rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 54px; padding: .7rem .9rem;
  border: 1px solid #b9a69a; border-radius: var(--rayon); background: #fff;
  font: 1rem var(--texte); color: var(--encre);
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--cacao); outline: 2px solid var(--cacao); outline-offset: 0; }
.champs-duo { display: grid; gap: 0 1rem; }
@media (min-width: 600px) { .champs-duo { grid-template-columns: 1fr 1fr; } }
.case { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400 !important; }
.case input { width: 24px; height: 24px; min-height: 0; margin-top: .2em; flex: none; accent-color: var(--cacao); }
.obligatoire { color: var(--erreur); }
.creneau-choisi { display: none; }
.creneau-choisi.visible { display: block; margin-bottom: 1.5rem; }

.form-erreur { background: #fdeef0; border: 1px solid var(--erreur); padding: .9rem 1.1rem; margin: 0 0 1rem; color: #5e0d18; }
.form-erreur a { color: #5e0d18; }
.form-erreur--info { background: #fbf3f0; border-color: var(--cacao); color: var(--encre); }
.champ--erreur input:not([type=checkbox]) { border-color: var(--erreur); background: #fff8f8; }
.champ--erreur .case { outline: 2px solid var(--erreur); outline-offset: 4px; }
.ou-separateur { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; color: var(--encre-douce); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; }
.ou-separateur::before, .ou-separateur::after { content: ""; flex: 1; height: 1px; background: var(--filet); }

/* ---------- Réservation : prestation, puis heure, puis coordonnées ---------- */
.etape-titre { display: flex; align-items: center; gap: .9rem; font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 1.2rem; }
.etape-numero { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cacao); color: var(--cacao); font: 500 1.15rem var(--titres); }
.etape-aide { color: var(--encre-douce); }
.choix-groupe { margin-bottom: 1.4rem; }
.choix-groupe__titre { font-family: var(--texte); font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; color: var(--taupe); margin: 0 0 .6rem; }
.durees { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.duree { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .1rem 1rem; padding: 1rem 1.2rem; min-height: 80px; text-align: left; background: var(--ivoire); border: 1px solid var(--filet); border-radius: var(--rayon); color: var(--encre); cursor: pointer; font: 1rem var(--texte); transition: border-color .2s, background .2s; }
.duree:hover { border-color: var(--cacao); }
.duree__temps { font-weight: 500; line-height: 1.35; }
.duree__prix { font-family: var(--titres); font-size: 1.25rem; color: var(--cacao); white-space: nowrap; }
.duree__sous { grid-column: 1 / -1; font-size: .9rem; color: var(--encre-douce); }
.duree[aria-pressed="true"] { background: var(--cacao); border-color: var(--cacao); color: #fff; }
.duree[aria-pressed="true"] .duree__prix, .duree[aria-pressed="true"] .duree__sous { color: #fff; }
.etape-creneau { margin-top: 3rem; scroll-margin-top: 110px; }
.semaine { margin-top: 2.5rem; }
.semaine__titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: .3rem; }
.semaine__titre h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.semaine__badge { border: 1px solid var(--cacao); color: var(--cacao); border-radius: 999px; padding: .1em .9em; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.semaine__resume { color: var(--encre-douce); margin-bottom: 1.2rem; }
.jour-ligne { display: grid; gap: .5rem 1.5rem; padding: 1rem 1.2rem; background: var(--ivoire); border: 1px solid var(--filet); margin-bottom: .6rem; }
@media (min-width: 800px) { .jour-ligne { grid-template-columns: 170px 1fr; align-items: start; } }
.jour-ligne--vide { background: transparent; padding-block: .6rem; }
.jour-ligne__nom { margin: 0; font-size: 1.15rem; }
.jour-ligne__nom span { display: block; font-family: var(--texte); font-size: .9rem; color: var(--encre-douce); }
.jour-ligne__info { margin: 0; color: var(--encre-douce); font-style: italic; align-self: center; }
.heures { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.heure { display: inline-grid; place-items: center; min-width: 76px; min-height: 48px; padding: .3rem .6rem; border: 1px solid var(--cacao); border-radius: var(--rayon); background: #fff; color: var(--cacao); font-weight: 500; text-decoration: none; }
.heure:hover, .heure:focus-visible { background: var(--cacao); color: #fff; }
.heure--choisie, .heure--choisie:hover { background: var(--cacao); color: #fff; box-shadow: 0 0 0 3px var(--poudre), 0 0 0 4px var(--cacao); }
#rendez-vous, #formulaire { scroll-margin-top: 100px; }

/* ---------- Avis ---------- */
.cartes--avis { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.cartes--avis .avis { flex: 0 1 100%; }
@media (min-width: 700px) { .cartes--avis .avis { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (min-width: 1000px) { .cartes--avis .avis { flex-basis: calc((100% - 3rem) / 3); } }
.avis { margin: 0; background: var(--ivoire); border: 1px solid var(--filet); padding: 1.8rem; display: flex; flex-direction: column; }
.avis__etoiles { color: var(--cacao); font-size: 1.2rem; letter-spacing: .2em; margin: 0 0 .6rem; }
.avis blockquote { margin: 0 0 1rem; font-family: var(--titres); font-style: italic; font-size: 1.1rem; flex: 1; white-space: pre-line; }
.avis figcaption { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); }

/* ---------- Pied de page ---------- */
.pied { background: var(--cacao-fonce); color: #f3e6e8; padding: 4rem 0 1rem; }
.pied a { color: #fff; }
.pied h2 { color: #fff; font-family: var(--texte); font-size: .8rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 1rem; }
.pied__grille { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .5rem; }
.pied li a { display: inline-flex; gap: .55em; align-items: center; text-decoration: none; }
.pied li a:hover { text-decoration: underline; }
.pied .logo { color: #fff; margin-bottom: 1.2rem; align-items: flex-start; }
.pied .logo__sous { color: #e9cfd3; }
.pied__mention { border-top: 1px solid rgba(243, 230, 232, .25); margin-top: 3rem; padding-top: 1.3rem; font-size: .9rem; }

/* ---------- Boutons fixes en bas sur téléphone ---------- */
.actions-mobiles { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ivoire); border-top: 1px solid var(--filet); box-shadow: 0 -6px 18px rgba(62, 9, 19, .1); padding-bottom: env(safe-area-inset-bottom); }
.actions-mobiles a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 68px; color: var(--cacao); text-decoration: none; font-weight: 500; font-size: .78rem; letter-spacing: .04em; }
.actions-mobiles a .ic { width: 24px; height: 24px; }
.actions-mobiles a.appeler, .actions-mobiles a.rdv { background: var(--cacao); color: #fff; }
.actions-mobiles a.rdv { background: var(--cacao-fonce); }
body { padding-bottom: 76px; }
@media (min-width: 900px) { .actions-mobiles { display: none; } body { padding-bottom: 0; } }

/* Texte des mentions légales */
.texte-legal h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.texte-legal h2:first-child { margin-top: 0; }
.a-completer { background: #fbf3f0; border: 1px dashed var(--cacao); padding: 0 .3em; font-style: italic; }

/* =========================================================
   Palette bordeaux · matcha · or : mise en valeur des visages
   ========================================================= */
.bouton--plein:hover { background: var(--cacao-fonce); border-color: var(--cacao-fonce); color: #fff; }
.bouton:hover { background: var(--cacao); color: #fff; }
.menu li a:hover { color: var(--taupe); }
.menu li a[aria-current="page"] { border-bottom-color: var(--nude); }
.filet { background: var(--nude); height: 1px; }
.barre-haut a:hover { color: var(--nude-clair); text-decoration: none; }

/* Grande photo de l'accueil et portrait : sans cadre */
.accueil__photo, .photo-cadre { outline: 0; box-shadow: none; margin: 0; }
.photo-cadre { margin: 0 auto; width: 100%; }

/* Bande bordeaux : les visages ressortent sur le velours */
.section--vin { background: var(--cacao); color: #f4efe6; }
.section--vin h2 { color: #fff; }
.section--vin .surtitre { color: var(--nude-clair); }
.section--vin .intro { color: #eadfe0; }
.section--vin .filet { background: var(--or); }
.section--vin .bouton { border-color: var(--nude-clair); color: #fff; }
.section--vin .bouton:hover { background: #fff; border-color: #fff; color: var(--cacao); }
.section--vin .carte { border: 0; }
.carte__photo { aspect-ratio: 4 / 5; }
.carte__photo img { object-position: center 40%; }
.carte__categorie { color: var(--taupe); font-weight: 500; }
.carte__infos { color: var(--encre-douce); }

/* Fiches des soins : photo verticale encadrée de matcha */
.prestation__photo { aspect-ratio: 4 / 5; }
.prestation { border-top: 2px solid var(--nude); }
@media (min-width: 900px) { .prestation__photo { aspect-ratio: auto; min-height: 420px; } }
.categorie-titre { border-bottom: 1px solid var(--nude); }
.bon-a-savoir { border-left: 2px solid var(--nude); background: var(--pierre); }
.infos .ic, .reperes .ic { color: var(--taupe); }
.tarifs__groupe th { background: var(--pierre); }

/* Étapes, engagements, chronologie */
.etapes li::before { color: var(--taupe); }
.etapes li, .engagements li { border-top: 2px solid var(--nude); }
.chrono { border-left-color: var(--nude); }
.chrono li::before { border-color: var(--cacao); background: var(--nude); }

/* Réservation */
.duree:hover { border-color: var(--nude); }
.duree[aria-pressed="true"] .duree__prix { color: var(--nude-clair); }
.etape-numero { background: var(--cacao); color: #fff; border-color: var(--cacao); }
.heure:hover, .heure:focus-visible { background: var(--cacao); color: #fff; }
.heure--choisie, .heure--choisie:hover { box-shadow: 0 0 0 3px var(--creme), 0 0 0 5px var(--nude); }
.semaine__badge { border-color: var(--taupe); color: var(--taupe); }

/* Avis */
.avis { border-top: 2px solid var(--nude); }
.avis__etoiles { color: var(--or-texte); }

/* Bandeau d'appel et pied de page */
.appel .surtitre { color: var(--nude-clair); }
.appel .filet { background: var(--or); }
.appel .bouton--clair:hover { background: #fff; border-color: #fff; color: var(--cacao); }
.pied h2 { color: var(--nude-clair); }
.pied .logo__slogan { color: var(--nude-clair); }
.pied .logo__sous { color: #eadfe0; }
.encadre--info { border-color: var(--filet); border-top: 2px solid var(--nude); }
.encadre--attention { background: #fbf3f0; border-color: var(--cacao); }
.moyen:hover { border-color: var(--nude); }
.moyen__icone { border-color: var(--nude); color: var(--cacao); background: transparent; }
.actions-mobiles a.rdv { background: var(--cacao-fonce); color: #fff; }
@media (min-width: 900px) { .prestation--sans-photo { grid-template-columns: 1fr; } }
.appel .filet { margin-inline: auto; }

/* =========================================================
   REFONTE ÉDITORIALE : épuré, moderne, élégant
   Titres Cormorant Garamond fins, texte Montserrat aéré,
   grands espaces blancs, grain discret « papier d'art ».
   ========================================================= */

/* ---- Textures : grain sur tous les fonds ---- */
body { background-color: var(--creme); background-image: var(--grain); }
.section--ivoire, .en-tete-page, .accueil, .entete, .carte, .prestation, .formulaire, .avis, .encadre, .etapes li, .engagements li, .moyen, .jour-ligne, .duree, .tableau-defile {
  background-color: var(--ivoire); background-image: var(--grain);
}
/* transitions douces en dégradé de sable entre les bandes */
.section--poudre { background-color: var(--pierre); background-image: var(--grain), linear-gradient(180deg, var(--creme) 0%, var(--pierre) 22%, var(--pierre) 78%, var(--creme) 100%); }
.section--vin, .appel { background-color: var(--cacao); background-image: var(--grain), linear-gradient(160deg, #57443a 0%, var(--cacao) 45%, #3c2d27 100%); }
.pied, .barre-haut { background-color: var(--cacao-fonce); background-image: var(--grain); }
.accueil { background-image: var(--grain), linear-gradient(180deg, var(--ivoire) 0%, var(--creme) 100%); border-bottom: 0; }
.en-tete-page { background-image: var(--grain), linear-gradient(180deg, var(--ivoire) 0%, var(--creme) 100%); border-bottom: 0; }

/* ---- Typographie éditoriale ---- */
body { font-family: var(--texte); font-weight: 400; font-size: .95rem; line-height: 1.95; letter-spacing: .025em; color: var(--encre); }
h1, h2, h3 { font-family: var(--titres); font-weight: 300; color: var(--cacao); letter-spacing: .005em; line-height: 1.08; }
h1 { font-size: clamp(2.7rem, 7vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
h3 { font-size: clamp(1.45rem, 2.6vw, 1.75rem); font-weight: 400; }
.accueil h1 { font-size: clamp(3rem, 7.5vw, 5.2rem); }
.accueil h1 em, .signature { font-style: italic; font-weight: 300; color: var(--taupe); }
.intro { font-size: 1.02rem; line-height: 2; color: var(--encre-douce); font-weight: 300; letter-spacing: .03em; }
.surtitre, .carte__categorie, .choix-groupe__titre, .semaine__badge, thead th, .avis figcaption, .pied h2 {
  font-family: var(--texte); font-weight: 500; font-size: .68rem; letter-spacing: .42em; text-transform: uppercase; color: var(--taupe);
}
.section--vin .surtitre, .appel .surtitre, .pied h2 { color: var(--nude-clair); }
.bouton { font-family: var(--texte); font-weight: 500; font-size: .74rem; letter-spacing: .3em; padding: .95em 2.2em; min-height: 56px; border-radius: var(--rayon); }
.bouton--grand { font-size: .78rem; padding: 1.05em 2.6em; }
.menu li a { font-family: var(--texte); }
@media (min-width: 1260px) { .menu li a { font-size: .7rem; letter-spacing: .28em; font-weight: 500; } }
.barre-haut { font-size: .74rem; letter-spacing: .12em; }
.logo__nom { font-family: var(--titres); font-weight: 400; font-size: 1.75rem; letter-spacing: .5em; margin-right: -.5em; color: var(--cacao); }
.logo__slogan { font-family: var(--titres); font-weight: 400; font-size: .98rem; letter-spacing: .04em; color: var(--taupe); }
.pied .logo__nom { color: var(--ivoire); }
@media (max-width: 380px) { .logo__nom { font-size: 1.3rem; letter-spacing: .34em; margin-right: -.34em; } .logo__slogan { font-size: .82rem; } }
.carte h3, .prestation h3 { font-weight: 400; }
.duree__temps { font-weight: 400; letter-spacing: .02em; }
.duree__prix, td.prix { font-family: var(--titres); font-weight: 500; font-size: 1.35rem; }
.avis blockquote { font-family: var(--titres); font-weight: 400; font-size: 1.3rem; line-height: 1.55; }
.engagements strong, .chrono strong { font-family: var(--titres); font-weight: 400; font-size: 1.45rem; }
.etapes li::before { font-family: var(--titres); font-weight: 300; font-size: 2.6rem; color: var(--nude); }
.champ label { font-weight: 500; letter-spacing: .04em; }
.champ input, .champ select, .champ textarea { font-family: var(--texte); border: 1px solid var(--filet); background: #fffdfa; border-radius: var(--rayon); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--cacao); outline: 1px solid var(--cacao); }

/* ---- Espaces blancs ---- */
.section { padding: clamp(5rem, 11vw, 9rem) 0; }
.en-tete-page { padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
.accueil__grille { padding: clamp(4.5rem, 10vw, 8.5rem) 0; gap: clamp(3rem, 6vw, 6rem); }
.conteneur { width: min(1180px, 100% - 3rem); }
.etroit { width: min(720px, 100% - 3rem); }
.centre .intro, .intro { max-width: 38em; }
.filet { width: 44px; height: 1px; background: var(--nude); margin: 1.8rem 0 2.2rem; }
.centre .filet { margin-inline: auto; }
.cartes { gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 3.5rem; }
.carte__corps { padding: 2rem 2rem 2.2rem; }
.prestation { margin-bottom: 3rem; border: 0; box-shadow: var(--ombre); }
.prestation__texte { padding: 2.2rem 1.8rem 2.4rem; }
@media (min-width: 900px) { .prestation__texte { padding: 3.4rem 3.6rem; } }
.categorie-titre { margin: 5.5rem 0 2rem; border-bottom: 1px solid var(--filet); padding-bottom: .9rem; }
.etapes, .engagements { margin-top: 3.5rem; }
.etapes li, .engagements li { padding: 2.4rem 2rem; }
.reperes { margin-top: 3rem; gap: .8rem; }
.grille-contact { gap: clamp(3rem, 6vw, 5rem); }
.formulaire { padding: clamp(1.6rem, 4vw, 3rem); }

/* ---- Lignes, cadres et cartes : tout en finesse ---- */
.carte, .avis, .encadre, .moyen, .jour-ligne, .duree, .etapes li, .engagements li, .tableau-defile, .formulaire { border: 1px solid rgba(110, 94, 80, .14); box-shadow: none; }
.carte:hover, .moyen:hover, .duree:hover { box-shadow: var(--ombre); border-color: rgba(110, 94, 80, .28); }
.etapes li, .engagements li, .avis, .prestation { border-top: 1px solid var(--nude); }
.engagements { background: transparent; border: 0; gap: 1.5rem; }
.bon-a-savoir { background: rgba(232, 223, 211, .55); border-left: 1px solid var(--nude); }
.tarifs__groupe th { background: rgba(232, 223, 211, .6); font-family: var(--titres); font-weight: 400; font-size: 1.3rem; color: var(--cacao); letter-spacing: .01em; text-transform: none; }
th, td { border-top: 1px solid var(--filet); }
.encadre--info { border-top: 1px solid var(--nude); }
.encadre--attention { background: rgba(232, 223, 211, .5); border: 1px solid rgba(74, 56, 48, .35); }
.etape-numero { background: transparent; color: var(--cacao); border: 1px solid var(--nude); font-family: var(--titres); font-weight: 400; font-size: 1.3rem; }
.duree[aria-pressed="true"] { background: var(--cacao); border-color: var(--cacao); color: var(--ivoire); }
.duree[aria-pressed="true"] .duree__prix, .duree[aria-pressed="true"] .duree__sous { color: var(--nude-clair); }
.heure { border: 1px solid rgba(74, 56, 48, .4); background: #fffdfa; color: var(--cacao); font-weight: 500; letter-spacing: .06em; }
.heure:hover, .heure:focus-visible, .heure--choisie, .heure--choisie:hover { background: var(--cacao); color: var(--ivoire); }
.heure--choisie, .heure--choisie:hover { box-shadow: 0 0 0 3px var(--creme), 0 0 0 4px var(--nude); }
.moyen__icone { border: 1px solid var(--nude); color: var(--cacao); background: transparent; }
.infos .ic, .reperes .ic { color: var(--nude); }
.avis__etoiles { color: var(--or-texte); letter-spacing: .3em; font-size: 1rem; }

/* ---- Bandes foncées (cacao) ---- */
.section--vin h2, .appel h2 { color: var(--ivoire); }
.section--vin .intro, .appel p { color: #e9ddd3; }
.section--vin .filet, .appel .filet { background: var(--or); }
.section--vin .carte { border: 0; }
.section--vin .bouton, .appel .bouton--clair { border-color: rgba(220, 195, 182, .7); color: var(--ivoire); }
.section--vin .bouton:hover, .appel .bouton--clair:hover { background: var(--ivoire); border-color: var(--ivoire); color: var(--cacao); }
.appel .bouton--blanc { background: var(--ivoire); border-color: var(--ivoire); color: var(--cacao); }
.bouton--plein:hover { background: var(--cacao-fonce); border-color: var(--cacao-fonce); color: var(--ivoire); }
.pied { color: #eadfd6; }
.pied .logo__slogan { color: var(--nude-clair); }
.actions-mobiles { background-color: var(--ivoire); background-image: var(--grain); }
.actions-mobiles a { font-weight: 500; letter-spacing: .08em; }
.actions-mobiles a.appeler { background: var(--cacao); color: var(--ivoire); }
.actions-mobiles a.rdv { background: var(--cacao-fonce); color: var(--ivoire); }

/* ---- Ajustements d'en-tête (logo et menu) ---- */
.logo__nom { font-size: 1.35rem; letter-spacing: .4em; margin-right: -.4em; }
.logo__slogan { font-size: .85rem; }
@media (min-width: 768px) { .logo__nom { font-size: 1.75rem; letter-spacing: .5em; margin-right: -.5em; } .logo__slogan { font-size: .98rem; } }
@media (max-width: 380px) { .logo__nom { font-size: 1.15rem; letter-spacing: .3em; margin-right: -.3em; } .logo__slogan { font-size: .76rem; } }
.entete .menu-bouton { font-family: var(--texte); font-size: .7rem; letter-spacing: .2em; padding: .55em .9em; border-color: rgba(74, 56, 48, .5); }
@media (max-width: 380px) { .entete .menu-bouton { letter-spacing: .08em; padding: .55em .6em; } }
@media (min-width: 1260px) {
  .menu, .menu.ouvert { gap: .8rem; }
  .menu li a { letter-spacing: .2em; padding: .6em .55em; }
  .menu__rdv { padding: .85em 1.5em; letter-spacing: .22em; }
}

/* ---- Tarifs : tableau entièrement visible, sans défilement latéral ---- */
.tableau-defile { overflow: visible; }
#tableau-tarifs { table-layout: auto; width: 100%; }
#tableau-tarifs th, #tableau-tarifs td { padding: 1rem 1.2rem; }
#tableau-tarifs th[scope="row"] { word-break: normal; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 600px) {
  #tableau-tarifs thead { display: none; }
  #tableau-tarifs tbody tr:not(.tarifs__groupe) { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: .9rem .9rem; border-top: 1px solid var(--filet); }
  #tableau-tarifs tbody tr:not(.tarifs__groupe) th, #tableau-tarifs tbody tr:not(.tarifs__groupe) td { border: 0; padding: 0; background: none; }
  #tableau-tarifs tbody tr:not(.tarifs__groupe) th { grid-column: 1; grid-row: 1; font-size: .95rem; line-height: 1.45; padding-right: .8rem; }
  #tableau-tarifs tbody tr:not(.tarifs__groupe) td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: .78rem; letter-spacing: .08em; color: var(--taupe); white-space: normal; width: auto; margin-top: .15rem; }
  #tableau-tarifs tbody tr:not(.tarifs__groupe) td.prix { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.2rem; width: auto; }
  .tarifs__groupe th { font-size: 1.2rem; padding: .7rem .9rem; display: block; }
  .tarifs__groupe { display: block; }
}

/* ---- Accueil sans photo : texte centré et aéré ---- */
.accueil__grille { grid-template-columns: 1fr !important; justify-items: center; text-align: center; max-width: 820px; }
.accueil .boutons, .accueil .reperes { justify-content: center; }
.accueil .reperes { justify-items: center; }
.accueil .reperes li { justify-content: center; text-align: left; }
.accueil .intro { margin-inline: auto; }

/* ---- « Qui suis-je ? » : petite photo ronde à côté du texte ---- */
.qui-suis-je { display: grid; gap: 2.5rem; align-items: start; justify-items: center; }
.portrait-petit { width: 190px; height: 190px; border-radius: 50%; overflow: hidden; border: 1px solid var(--nude); padding: 6px; background: var(--ivoire); flex: none; }
.portrait-petit img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
@media (min-width: 900px) { .qui-suis-je { grid-template-columns: 220px 1fr; gap: 4.5rem; justify-items: start; } .portrait-petit { width: 210px; height: 210px; margin-top: 2.6rem; } }

/* =========================================================
   INTERACTIONS : étoiles, survols doux, accordéons, avant / après
   ========================================================= */

/* ---- Étoiles des avis en jaune ---- */
.avis__etoiles { color: #f5b301; letter-spacing: .28em; font-size: 1.15rem; }

/* ---- Survols très doux ---- */
a { transition: color .6s ease; }
.bouton { transition: background-color .7s ease, color .7s ease, border-color .7s ease, box-shadow .7s ease; }
.menu li a, .carte__lien, .moyen, .heure, .duree, .heure--choisie { transition: color .6s ease, border-color .6s ease, background-color .6s ease, box-shadow .6s ease; }
.carte__photo img, .prestation__photo img, .portrait-petit img { transition: transform 1.6s cubic-bezier(.22, .61, .36, 1); }
.carte:hover .carte__photo img, .prestation:hover .prestation__photo img, .portrait-petit:hover img { transform: scale(1.01); }

/* ---- Accordéons (questions / réponses) ---- */
.accordeons { border-top: 1px solid var(--filet); max-width: 860px; margin: 3.5rem auto 0; }
.etroit .accordeons { margin-top: 0; }
.accordeon { border-bottom: 1px solid var(--filet); }
.accordeon summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.8rem .2rem; }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary:focus-visible { outline: 1px solid var(--cacao); outline-offset: 4px; }
.accordeon__titre { font-family: var(--titres); font-weight: 400; font-size: clamp(1.4rem, 2.8vw, 1.9rem); line-height: 1.2; color: var(--cacao); transition: color .6s ease; }
.accordeon summary:hover .accordeon__titre { color: var(--taupe); }
.accordeon__num { font-family: var(--titres); font-weight: 300; color: var(--nude); margin-right: 1.3rem; }
.accordeon__signe { position: relative; width: 22px; height: 22px; flex: none; }
.accordeon__signe::before, .accordeon__signe::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--cacao); transition: transform .6s ease; }
.accordeon__signe::before { width: 22px; height: 1px; margin: -.5px 0 0 -11px; }
.accordeon__signe::after { width: 1px; height: 22px; margin: -11px 0 0 -.5px; }
.accordeon[open] .accordeon__signe::after { transform: rotate(90deg); }
.accordeon__contenu { overflow: hidden; }
.accordeon__corps { padding: 0 .2rem 2.4rem; max-width: 46em; }
.accordeon__corps > :first-child { margin-top: 0; }
.accordeon__corps h3 { margin-top: 1.8rem; font-size: 1.45rem; }
.accordeon__corps .chrono { margin-top: .5rem; }
.accordeon__corps .liste-soin { margin-bottom: 0; }

/* ---- Curseur avant / après (cartes et fiches des soins) ---- */
.aa-cadre { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 3); background: var(--pierre); border: 1px solid rgba(110, 94, 80, .14); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.aa-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.aa-avant { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.aa-poignee { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 0; pointer-events: none; }
.aa-poignee::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 14px rgba(46, 36, 32, .25); }
.aa-bouton { position: absolute; top: 50%; left: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; border-radius: 50%; background: rgba(248, 244, 238, .95); color: var(--cacao); border: 1px solid rgba(74, 56, 48, .3); box-shadow: 0 8px 28px rgba(46, 36, 32, .2); transition: transform .5s ease; }
.aa-cadre:hover .aa-bouton { transform: scale(1.06); }
.aa-bouton svg { width: 24px; height: 24px; }
.aa-etiquette { position: absolute; bottom: 1rem; padding: .6em 1.1em; font: 500 .62rem/1 var(--texte); letter-spacing: .34em; text-transform: uppercase; color: #fff; background: rgba(46, 36, 32, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
.aa-etiquette--avant { left: 1rem; }
.aa-etiquette--apres { right: 1rem; }
.aa-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.aa-cadre:focus-within { outline: 1px solid var(--cacao); outline-offset: 5px; }

/* ---- Menu : six onglets ---- */
@media (min-width: 1260px) and (max-width: 1379px) {
  .menu li a { letter-spacing: .12em; padding: .6em .4em; font-size: .66rem; }
  .menu, .menu.ouvert { gap: .5rem; }
  .menu__rdv { letter-spacing: .16em; padding: .85em 1.1em; }
}
@media (prefers-reduced-motion: reduce) { .carte__photo img, .prestation__photo img, .portrait-petit img { transition: none; } .carte:hover .carte__photo img, .prestation:hover .prestation__photo img, .portrait-petit:hover img { transform: none; } }

/* ---- Curseur dans les cartes et les fiches : mêmes proportions que les photos ---- */
.carte__photo, .carte__photo.aa-cadre { aspect-ratio: 5 / 4; }
.carte__photo.aa-cadre { border: 0; }
.prestation__photo.aa-cadre { aspect-ratio: 4 / 5; border: 0; }
@media (min-width: 900px) { .prestation__photo.aa-cadre { aspect-ratio: auto; min-height: 420px; } }
.carte__photo.aa-cadre .aa-bouton { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.carte__photo.aa-cadre .aa-bouton svg { width: 20px; height: 20px; }
.carte__photo.aa-cadre .aa-etiquette { bottom: .8rem; font-size: .55rem; padding: .55em .9em; letter-spacing: .28em; }
.carte__photo.aa-cadre .aa-etiquette--avant { left: .8rem; }
.carte__photo.aa-cadre .aa-etiquette--apres { right: .8rem; }
.carte:hover .aa-cadre img, .prestation:hover .aa-cadre img { transform: none; }
/* numéros du déroulement : chiffres simples (1, 2, 3, 4) */
.accordeon__num { font-variant-numeric: lining-nums; font-feature-settings: "lnum"; }

/* ---- Fiches avec curseur : grand curseur pleine largeur, photos entières ---- */
.prestation--curseur .prestation__photo.aa-cadre { aspect-ratio: 4 / 3; min-height: 0; }
@media (min-width: 900px) {
  .prestation--curseur { grid-template-columns: 1fr; }
  .prestation--curseur .prestation__photo.aa-cadre { aspect-ratio: auto; height: clamp(340px, 46vw, 560px); }
  .prestation--curseur .prestation__texte { padding: 3rem 3.6rem 3.4rem; }
}

/* =========================================================
   TOUCHES DORÉES (reprises de la carte de visite)
   Filet à losange, double cadre fin, monogramme, liserés
   ========================================================= */

/* ---- Filet ornemental : trait, losange, trait ---- */
.filet, .section--vin .filet, .appel .filet {
  --fo: var(--or-profond);
  position: relative; display: block; width: 116px; height: 9px; border: 0;
  background:
    linear-gradient(var(--fo), var(--fo)) left center / 48px 1px no-repeat,
    linear-gradient(var(--fo), var(--fo)) right center / 48px 1px no-repeat;
}
.section--vin .filet, .appel .filet { --fo: var(--or); }
.filet::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--fo); transform: translate(-50%, -50%) rotate(45deg); }
.centre .filet, .appel .filet { margin-inline: auto; }

/* ---- Double cadre doré sur les bandes foncées ---- */
.section--vin, .appel { position: relative; }
.section--vin::before, .section--vin::after, .appel::before, .appel::after { content: ""; position: absolute; pointer-events: none; }
.section--vin::before, .appel::before { inset: clamp(10px, 1.5vw, 22px); border: 1px solid var(--or); opacity: .8; }
.section--vin::after, .appel::after { inset: calc(clamp(10px, 1.5vw, 22px) + 5px); border: 1px solid var(--or); opacity: .4; }

/* ---- Liserés dorés ---- */
.barre-haut { border-bottom: 1px solid var(--or); }
.pied { border-top: 1px solid var(--or); }
.menu li a[aria-current="page"] { border-bottom-color: var(--or-profond); }
.etape-numero { border-color: var(--or-profond); }
.portrait-petit { border-color: var(--or-profond); }
.etapes li, .engagements li, .avis, .prestation, .encadre--info { border-top-color: var(--or-profond); }
.bon-a-savoir { border-left-color: var(--or-profond); }
.categorie-titre { border-bottom-color: var(--or-profond); }

/* ---- Monogramme « D » doré dans un cercle (pied de page) ---- */
.monogramme-ligne { display: flex; justify-content: center; margin: 0 0 2rem; }
.monogramme { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--or); border-radius: 50%; font-family: var(--titres); font-weight: 400; font-size: 2.1rem; line-height: 1; color: var(--or); padding-bottom: .12em; }