/* Polices auto-hébergées : servies par le site, jamais par un tiers.
   Seul le sous-ensemble latin est embarqué — vérifié suffisant pour
   l'intégralité des textes du site, accents et « » compris. */
@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/yeseva-one-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/mulish-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Terre de Bien-Être — v3 « Cocon »
   --------------------------------------------------------------------------
   Rien d'angulaire : des arches, des pastilles, de grands rayons souples et
   des halos chauds. La page est un fond pêche sur lequel flottent des
   panneaux arrondis. Le geste marquant est le nom du salon composé sur une
   courbe, au-dessus de la photo en arche — tout le reste reste calme.
   ========================================================================== */

:root {
  --lait:     #FBF3EE;   /* blanc chaud, presque rosé : les panneaux */
  --peche:    #F7E0D2;   /* pêche pâle : le fond de page */
  --peche-2:  #F1CDB9;   /* pêche soutenue : aplats doux */
  --rose:     #E3A79F;   /* rose poudré */
  --miel:     #DE9A3C;   /* miel : l'accent chaud */
  --prune:    #43213A;   /* prune profonde : le cocon et les titres */
  --prune-2:  #5E3452;
  --texte:    #4A2C42;   /* prune adoucie : le texte courant */
  --texte-2:  #7B5A71;
  --sauge:    #9DB295;   /* le contrepoint végétal */

  --display: 'Yeseva One', Georgia, serif;
  --texte-f: 'Mulish', 'Helvetica Neue', Arial, sans-serif;

  --r-panel: clamp(30px, 4.5vw, 64px);
  --r-soft: 26px;
  --r-arch: 999px 999px 34px 34px;

  --ombre:      0 28px 56px -30px rgba(67, 33, 58, 0.30);
  --ombre-haute: 0 40px 80px -34px rgba(67, 33, 58, 0.38);

  --page: 1180px;
  --gouttiere: clamp(18px, 4vw, 40px);
}

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

html {
  scroll-behavior: smooth;
  /* Le volet du menu mobile est en position fixe sur tout l'écran : même
     fermé, il déborde de la largeur de la barre de défilement et provoque un
     petit glissement horizontal. « clip » le supprime sans créer de
     conteneur de défilement, donc l'en-tête collant continue de fonctionner. */
  overflow-x: hidden;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--texte-f);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--texte);
  background-color: var(--peche);
  /* Des halos très étalés : la lumière d'un lieu clos, pas un dégradé posé
     en décoration. Ils ne bougent pas et ne masquent aucun texte. */
  background-image:
    radial-gradient(1100px 620px at 82% -8%, rgba(222, 154, 60, 0.30), transparent 62%),
    radial-gradient(900px 700px at 2% 30%, rgba(227, 167, 159, 0.36), transparent 60%),
    radial-gradient(1000px 800px at 95% 88%, rgba(157, 178, 149, 0.24), transparent 62%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--miel); color: var(--prune); }
:focus-visible { outline: 2.5px solid var(--prune); outline-offset: 4px; border-radius: 4px; }

.page { max-width: var(--page); margin: 0 auto; padding-inline: var(--gouttiere); }

.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Titres et texte
   -------------------------------------------------------------------------- */
h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--prune);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h3, h4 {
  font-family: var(--texte-f);
  font-weight: 700;
  color: var(--prune);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.1rem); }
h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

.chapo {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.62;
  color: var(--texte-2);
  max-width: 52ch;
}

.prose a {
  color: var(--prune);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--miel);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.prose a:hover { color: var(--miel); }

/* --------------------------------------------------------------------------
   Boutons et liens d'appel
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--texte-f);
  font-size: 1rem;
  font-weight: 700;
  padding: 16px 32px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--prune);
  color: var(--lait);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.34, 1.4, .5, 1), box-shadow 0.25s ease,
              background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover { background: var(--prune-2); transform: translateY(-3px); box-shadow: var(--ombre); }

.btn--doux { background: var(--lait); color: var(--prune); border-color: rgba(67, 33, 58, 0.16); }
.btn--doux:hover { background: var(--lait); border-color: var(--prune); }

.btn--miel { background: var(--miel); color: var(--prune); }
.btn--miel:hover { background: #E9AE58; }

/* Le numéro de téléphone est l'action principale du site : il se lit en
   grand, dans une pastille qui invite à poser le doigt dessus. */
.tel {
  display: inline-flex;
  align-items: center;
  font-family: var(--texte-f);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--prune);
  background: var(--peche-2);
  border-radius: 999px;
  padding: 10px 22px;
  transition: background 0.25s ease, transform 0.25s cubic-bezier(.34, 1.4, .5, 1);
}
.tel:hover { background: var(--miel); transform: translateY(-2px); }
.tel--clair { background: rgba(251, 243, 238, 0.14); color: var(--lait); }
.tel--clair:hover { background: var(--miel); color: var(--prune); }

.lien-doux {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texte-2);
  transition: color 0.2s ease, gap 0.2s ease;
}
.lien-doux::after {
  content: "";
  width: 16px; height: 16px;
  border-radius: 2px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.lien-doux:hover { color: var(--prune); gap: 11px; }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Le verre dépoli vit sur un calque à part : posé sur .entete elle-même,
   backdrop-filter en ferait le bloc conteneur du volet mobile (position
   fixed), qui resterait alors prisonnier de la hauteur de l'en-tête. */
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(247, 224, 210, 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.entete .page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
}
.enseigne { display: flex; align-items: center; gap: 12px; min-width: 0; }
.enseigne > span { min-width: 0; }
.enseigne img { height: 48px; width: auto; flex-shrink: 0; }
.enseigne b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--prune);
  white-space: nowrap;
}
.enseigne i {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--texte-2);
}

.menu { display: flex; align-items: center; gap: 2px; }
.menu a {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 17px;
  border-radius: 999px;
  color: var(--texte-2);
  transition: background 0.22s ease, color 0.22s ease;
}
.menu a:hover { background: rgba(251, 243, 238, 0.75); color: var(--prune); }
.menu a[aria-current="page"] { background: var(--prune); color: var(--lait); }

.bascule { display: none; }

@media (max-width: 960px) {
  .enseigne { position: relative; z-index: 2; }
  .enseigne i { display: none; }

  .bascule {
    display: inline-flex;
    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px; height: 46px;
    padding: 11px;
    border: none;
    border-radius: 999px;
    background: var(--lait);
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--ombre);
  }
  .bascule i {
    display: block;
    height: 2px;
    width: 22px;
    border-radius: 2px;
    background: var(--prune);
    transition: transform 0.3s cubic-bezier(.34, 1.3, .5, 1), opacity 0.2s ease;
  }
  .entete.est-ouvert .bascule i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .entete.est-ouvert .bascule i:nth-child(2) { opacity: 0; }
  .entete.est-ouvert .bascule i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .entete.est-ouvert .enseigne b { color: var(--lait); }

  /* Le volet ne tombe pas à plat : il s'ouvre en s'arrondissant, comme un
     rideau qui se déplie. */
  .menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 96px var(--gouttiere) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--prune);
    border-radius: 0 0 50% 50% / 0 0 14% 14%;
    transform: translateY(-101%);
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(.62, .02, .3, 1),
                border-radius 0.5s cubic-bezier(.62, .02, .3, 1),
                visibility 0s linear 0.5s;
  }
  .entete.est-ouvert .menu {
    transform: translateY(0);
    border-radius: 0;
    visibility: visible;
    transition-delay: 0s, 0s, 0s;
  }
  .menu a {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.9rem;
    padding: 12px 26px;
    color: rgba(251, 243, 238, 0.8);
  }
  .menu a:hover { background: transparent; color: var(--lait); }
  .menu a[aria-current="page"] { background: var(--miel); color: var(--prune); }
  body.est-bloque { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }

@media (max-width: 460px) {
  .enseigne img { height: 38px; }
  .enseigne b { font-size: 1.1rem; }
}

/* --------------------------------------------------------------------------
   Bandes et panneaux
   -------------------------------------------------------------------------- */
.bande { padding-block: clamp(52px, 7vw, 96px); }
.bande--serree { padding-block: clamp(38px, 5vw, 64px); }

.panneau {
  background: var(--lait);
  border-radius: var(--r-panel);
  padding: clamp(32px, 5vw, 68px);
  box-shadow: var(--ombre);
}
.panneau--cocon {
  background: var(--prune);
  color: rgba(251, 243, 238, 0.82);
  box-shadow: var(--ombre-haute);
}
.panneau--cocon h2, .panneau--cocon h3 { color: var(--lait); }

.tete { max-width: 54ch; margin-bottom: clamp(32px, 4vw, 52px); }
.tete h2 { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   L'ouverture — la photo en arche et le nom sur sa courbe
   -------------------------------------------------------------------------- */
.ouverture { padding-block: clamp(34px, 5vw, 68px) clamp(48px, 6vw, 84px); }
.ouverture-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
}
.ouverture h1 { margin-bottom: 22px; }
.ouverture .chapo { margin-bottom: 30px; }
.ouverture-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.arche-bloc { position: relative; isolation: isolate; }
.arche-titre {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -3%;
  overflow: visible;
}
.arche-titre text {
  font-family: var(--display);
  font-size: 36px;
  fill: var(--prune);
  letter-spacing: 0.01em;
}
.arche {
  position: relative;
  border-radius: var(--r-arch);
  overflow: hidden;
  box-shadow: var(--ombre-haute);
  background: var(--peche-2);
}
.arche img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Deux galets de couleur posés derrière l'arche : ils donnent la profondeur
   du cocon sans rien recouvrir. */
.arche-bloc::before,
.arche-bloc::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 58% 42% 47% 53% / 48% 52% 46% 54%;
  filter: blur(2px);
}
.arche-bloc::before {
  width: 46%; aspect-ratio: 1;
  left: -13%; bottom: 4%;
  background: rgba(227, 167, 159, 0.55);
}
.arche-bloc::after {
  width: 34%; aspect-ratio: 1;
  right: -9%; top: 16%;
  background: rgba(157, 178, 149, 0.5);
}

/* L'unique animation non déclenchée du site : l'arche se pose et son nom
   s'écrit, une fois, au chargement. */
.js .arche { opacity: 0; transform: translateY(26px) scale(0.97); }
.js .arche-titre { opacity: 0; }
.js .arche-bloc.est-pose .arche {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 1s cubic-bezier(.2, .7, .3, 1);
}
.js .arche-bloc.est-pose .arche-titre {
  opacity: 1;
  transition: opacity 1s ease 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .js .arche, .js .arche-titre { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .ouverture-grille { grid-template-columns: 1fr; gap: 44px; }
  .arche-bloc { max-width: 420px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   Les praticiennes — posées sur une ondulation
   -------------------------------------------------------------------------- */
.equipe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  align-items: stretch;
}
.fiche {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--lait);
  border-radius: 150px 150px var(--r-soft) var(--r-soft);
  padding: 34px 26px 30px;
  text-align: center;
  align-items: center;
  box-shadow: var(--ombre);
  transition: transform 0.35s cubic-bezier(.34, 1.25, .5, 1), box-shadow 0.35s ease;
}
.fiche:hover { box-shadow: var(--ombre-haute); }

/* L'ondulation : chaque fiche est décalée, aucune n'est alignée sur sa
   voisine. Le décalage disparaît dès que la grille se réduit. */
@media (min-width: 861px) {
  /* Les quatre fiches sont alignées : aucune n'est mise en avant.
     Seul le survol soulève légèrement la fiche pointée. */
  .equipe { align-items: stretch; }
  .equipe > * :where(a) { position: relative; }
  .equipe > :hover { transform: translateY(-8px); }
}


.medaillon {
  width: 92px; height: 92px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 2rem;
  color: var(--prune);
  flex-shrink: 0;
}
.medaillon--rose  { background: radial-gradient(circle at 32% 28%, #F2CFC9, var(--rose)); }
.medaillon--miel  { background: radial-gradient(circle at 32% 28%, #F2CE92, var(--miel)); }
.medaillon--sauge { background: radial-gradient(circle at 32% 28%, #C8D5C2, var(--sauge)); }
.medaillon--peche { background: radial-gradient(circle at 32% 28%, #F8DCCB, var(--peche-2)); }

.fiche-nom { font-family: var(--display); font-size: 1.35rem; color: var(--prune); line-height: 1.2; }
.fiche-role {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--texte-2);
  background: var(--peche);
  border-radius: 999px;
  padding: 5px 14px;
}
.fiche p { font-size: 0.97rem; color: var(--texte-2); margin: 0; }
.fiche .tel { margin-top: 4px; }

@media (max-width: 860px) { .equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) {
  .equipe { grid-template-columns: 1fr; gap: 22px; }
  .fiche { border-radius: 120px 120px var(--r-soft) var(--r-soft); }
}

/* --------------------------------------------------------------------------
   Les soins — arches photographiques
   -------------------------------------------------------------------------- */
.soins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(22px, 3vw, 36px);
}
.soins--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.soin { display: flex; flex-direction: column; }
.soin-vue {
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--peche-2);
  box-shadow: var(--ombre);
  margin-bottom: 20px;
}
.soin-vue img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.2, .7, .3, 1);
}
a.soin:hover .soin-vue img { transform: scale(1.05); }
.soin h3 { margin-bottom: 8px; }
.soin p { font-size: 1rem; color: var(--texte-2); margin-bottom: 16px; }
.soin-pied { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.soin-qui {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--texte-2);
  background: var(--peche);
  border-radius: 999px;
  padding: 6px 15px;
  width: fit-content;
  margin-bottom: 14px;
}
.soin-qui--libre { background: var(--rose); color: var(--prune); }
.soin-tels { display: flex; flex-wrap: wrap; gap: 10px; }
.soin-tels .tel { font-size: 1.05rem; padding: 8px 18px; }

/* Un soin sans photographie garde sa place : un aplat doux et une initiale. */
.soin-vue--nu {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 38% 30%, var(--peche), var(--peche-2));
}
.soin-vue--nu span { font-family: var(--display); font-size: 3.4rem; color: rgba(67, 33, 58, 0.32); }

/* Durée et tarif : une ligne douce sous le titre, le prix en Yeseva. */
.soin-tarif {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: -2px 0 12px;
  color: var(--texte-2);
  font-size: 0.92rem;
  font-weight: 600;
}
.soin-tarif b { font-family: var(--display); font-weight: 400; font-size: 1.3rem; color: var(--prune); }

/* Plusieurs soins réunis sous un même titre : une petite carte des prix. */
.tarifs { list-style: none; margin: 0 0 16px; padding: 0; }
.tarifs li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(67, 33, 58, 0.18);
  font-size: 0.95rem;
  color: var(--texte-2);
}
.tarifs li:last-child { border-bottom: none; }
.tarifs li span:first-child { flex: 1 1 auto; font-weight: 700; color: var(--prune); }
.tarifs b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--prune); }
.groupe .soin-tarif { margin: 6px 0 0; }
.soin .lien-doux { margin: -4px 0 16px; }

/* Les soins en détail : les textes longs, sous les cartes. */
.detail + .detail { margin-top: clamp(34px, 4vw, 52px); padding-top: clamp(34px, 4vw, 52px); border-top: 1px solid rgba(67, 33, 58, 0.12); }
.detail { scroll-margin-top: 110px; }
.detail h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: 6px; }
.detail .soin-tarif { margin-bottom: 18px; }
.detail h4 { margin: 22px 0 8px; }
.detail ul { margin: 0 0 1.1em; padding-left: 1.2em; max-width: 64ch; }
.detail li { margin-bottom: 4px; }
.detail li::marker { color: var(--miel); }
.detail .note { font-size: 0.92rem; font-style: italic; color: var(--texte-2); }
.detail .actions { margin-top: 22px; }
.detail .actions + .actions { margin-top: 10px; }

@media (max-width: 880px) { .soins--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .soins, .soins--trois { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Le cocon — la parole d'Elsa
   -------------------------------------------------------------------------- */
.cocon-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
}
.cocon-portrait { border-radius: var(--r-arch); overflow: hidden; background: var(--prune-2); }
.cocon-portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.citation {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.34;
  color: var(--lait);
  margin: 0 0 20px;
  max-width: 24ch;
}
.citation-source {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--miel);
  margin-bottom: 24px;
}
.panneau--cocon p { color: rgba(251, 243, 238, 0.8); }

@media (max-width: 820px) {
  .cocon-grille { grid-template-columns: 1fr; }
  .cocon-portrait { max-width: 300px; }
}

/* --------------------------------------------------------------------------
   Offrir — les idées, le bon cadeau, les étapes
   -------------------------------------------------------------------------- */
.idees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.idee .soin-vue { position: relative; }
.idee h3 { font-size: 1.12rem; margin-bottom: 4px; }
.idee:hover h3 { color: var(--prune-2); }
.idee-info { font-size: 0.92rem; }
/* le prix, posé comme une étiquette sur la photo */
.idee-prix {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-family: var(--display); font-size: 1.3rem; color: var(--prune);
  background: var(--lait); border-radius: 999px; padding: 6px 18px;
  box-shadow: 0 10px 22px -12px rgba(67, 33, 58, 0.5);
  white-space: nowrap;
}
.idees-suite { margin-top: clamp(26px, 3vw, 38px); color: var(--texte-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.offrir-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.offrir-grille h2 { color: var(--lait); margin-bottom: 26px; }

/* Le bon cadeau illustré : deux cartes empilées, de travers, comme posées
   sur une table. Purement décoratif (aria-hidden). */
.bon-pile { position: relative; padding: 18px 10px 26px; }
.bon-pile::before {
  content: ""; position: absolute; inset: 30px 26px 10px 18px;
  background: var(--rose); border-radius: 30px; transform: rotate(6deg);
}
.bon {
  position: relative; overflow: hidden;
  background: var(--lait); color: var(--prune);
  border-radius: 30px; padding: clamp(24px, 3vw, 34px);
  transform: rotate(-4deg);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.55);
}
.bon::before, .bon::after { content: ""; position: absolute; border-radius: 999px; }
.bon::before { width: 120px; height: 120px; right: -58px; top: -62px; background: var(--miel); }
.bon::after { width: 70px; height: 70px; left: -26px; bottom: -30px; background: var(--peche-2); }
.bon > * { position: relative; }
.panneau--cocon .bon p { color: var(--prune); }   /* le panneau prune éclaircit ses textes : pas sur le bon */
.panneau--cocon .bon .bon-ligne { color: var(--texte-2); }
.panneau--cocon .bon .bon-pied { color: var(--prune-2); }
.bon-tete { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1rem; padding-right: 44px; }
.bon-tete img { width: 38px; height: auto; }
.bon-titre { font-family: var(--display); font-size: clamp(2rem, 3.6vw, 2.7rem); line-height: 1.05; margin: 22px 0 22px; }
.bon-ligne {
  display: flex; align-items: flex-end; gap: 10px; margin: 0 0 14px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-2);
}
.bon-ligne::after { content: ""; flex: 1; border-bottom: 2px dotted rgba(67, 33, 58, 0.3); margin-bottom: 4px; }
.bon-pied { margin: 20px 0 0; font-weight: 700; font-size: 0.95rem; color: var(--prune-2); }

.pas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.pas li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }
.pas-num {
  width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center;
  font-family: var(--display); font-size: 1.45rem; color: var(--prune); background: var(--miel);
}
.pas h3 { color: var(--lait); margin: 4px 0 6px; }
.pas p { margin: 0; }

/* un médaillon peut porter une photo à la place des initiales */
.medaillon--photo { overflow: hidden; padding: 4px; }
.medaillon--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }

@media (max-width: 980px) { .idees { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .offrir-grille { grid-template-columns: 1fr; }
  .bon-pile { max-width: 360px; margin: 0 auto; }
}
@media (max-width: 480px) { .idees { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Le salon — l'équipe mise en scène
   -------------------------------------------------------------------------- */
/* le sommaire en portraits, sous le titre */
.trombi { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 30px; }
.trombi a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--texte-2); }
.trombi img, .trombi .medaillon {
  width: 64px; height: 64px; border-radius: 999px; object-fit: cover;
  border: 3px solid var(--lait); box-shadow: var(--ombre); font-size: 1.3rem;
  transition: transform 0.3s cubic-bezier(.34, 1.4, .5, 1);
}
.trombi a:hover img, .trombi a:hover .medaillon { transform: translateY(-4px); }
.trombi a:hover { color: var(--prune); }

.membres { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); }
.membre {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  scroll-margin-top: 100px;
}
.membre--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); }
.membre--inverse .membre-vue { order: 2; }
.membre-vue {
  position: sticky; top: 110px;
  border-radius: var(--r-arch); overflow: hidden; box-shadow: var(--ombre-haute);
  background: var(--peche-2);
}
.membre-vue img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.membre-vue--sauge, .membre-vue--rose, .membre-vue--miel, .membre-vue--peche { aspect-ratio: 4 / 5; display: grid; place-items: center; }
.membre-vue--sauge { background: radial-gradient(circle at 34% 28%, #DCE5D8, var(--sauge)); }
.membre-vue span { font-family: var(--display); font-size: 4.5rem; color: rgba(67, 33, 58, 0.4); }
.membre-corps h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom: 10px; }
.chute {
  font-family: var(--display); font-size: 1.15rem; line-height: 1.4;
  color: var(--prune); margin-top: 22px;
}
.nom-commercial {
  font-family: var(--display); font-size: 1.05rem; color: var(--miel);
  margin: -4px 0 10px;
}
.membre-corps .role {
  display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--texte-2); background: var(--lait); border-radius: 999px; padding: 5px 14px;
}
.membre-corps > p { color: var(--texte-2); }
.membre-citation {
  font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.35;
  color: var(--prune); margin: 26px 0 22px; padding-left: 22px; border-left: 4px solid var(--miel);
  border-radius: 2px; max-width: 30ch;
}
.pastilles { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles li { font-size: 0.85rem; font-weight: 700; color: var(--prune); background: var(--peche-2); border-radius: 999px; padding: 6px 14px; }
.membre-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }

/* le dépliant : tout le texte reste là, replié */
.depli { margin-top: 22px; }
.depli summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 0.95rem; color: var(--prune);
  background: var(--lait); border-radius: 999px; padding: 10px 20px; box-shadow: var(--ombre);
}
.depli summary::-webkit-details-marker { display: none; }
.depli summary::after {
  content: ""; width: 9px; height: 9px; border: 2px solid currentColor; border-top: 0; border-left: 0;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.25s ease;
}
.depli[open] summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.depli-corps { padding-top: 18px; color: var(--texte-2); }
.depli-corps p { margin-bottom: 1em; }
.depli-corps .groupe:first-child { margin-top: 0; }
.depli--sombre summary { background: rgba(251, 243, 238, 0.12); color: var(--lait); box-shadow: none; }
.depli--sombre .depli-corps { columns: 2 320px; column-gap: 48px; }
.depli--sombre .depli-corps p { break-inside: avoid; }
.panneau--cocon .prose a { color: var(--lait); }

.elsa-nom { color: var(--lait); margin: 0 0 22px; }
/* sa phrase est longue : plus petite que les citations courtes de l'accueil */
#elsa .citation { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.45; max-width: 38ch; }
.frise {
  list-style: none; margin: clamp(34px, 5vw, 52px) 0 clamp(26px, 3vw, 34px); padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; position: relative;
}
.frise::before { content: ""; position: absolute; left: 6px; right: 6px; top: 22px; height: 2px; background: rgba(251, 243, 238, 0.18); }
.frise li { position: relative; display: flex; flex-direction: column; gap: 10px; }
.frise b {
  align-self: flex-start; position: relative;
  font-family: var(--display); font-weight: 400; font-size: 1.05rem; color: var(--prune);
  background: var(--miel); border-radius: 999px; padding: 10px 16px; line-height: 1;
}
.frise li:last-child b { background: var(--rose); }
.frise span { font-size: 0.92rem; line-height: 1.45; color: rgba(251, 243, 238, 0.82); }

@media (max-width: 860px) {
  .membre, .membre--inverse { grid-template-columns: 1fr; }
  .membre--inverse .membre-vue { order: 0; }
  .membre-vue { position: static; max-width: 280px; }
  .frise { grid-template-columns: 1fr; gap: 14px; }
  .frise::before { left: 30px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .frise li { flex-direction: row; align-items: center; gap: 16px; }
}

/* --------------------------------------------------------------------------
   Doula — celle qui accompagne, puis les accompagnements
   -------------------------------------------------------------------------- */
.accompagnante {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); align-items: center;
  background: var(--lait); border-radius: 999px; padding: 22px clamp(26px, 4vw, 52px) 22px 22px;
  box-shadow: var(--ombre);
}
.accompagnante-photo { width: 150px; height: 150px; border-radius: 999px; object-fit: cover; }
.accompagnante-qui { font-size: 0.92rem; color: var(--texte-2); margin: 0 0 10px; }
.accompagnante-qui b { color: var(--prune); }
.accompagnante-mot {
  font-family: var(--display); font-size: clamp(1.25rem, 2.3vw, 1.7rem); line-height: 1.35;
  color: var(--prune); margin: 0 0 14px; max-width: 36ch;
}

.soins--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.accomp .groupe-cadre { margin: 0 0 6px; }
.accomp h3 { font-size: 1.15rem; }
.accomp .tarifs { margin-top: 2px; }
/* colonne étroite : le nom du soin sur sa ligne, durée et prix dessous */
.accomp .tarifs li span:first-child { flex-basis: 100%; }
/* une liste « libellé + prix », sans durée : tout tient sur une ligne */
.accomp .tarifs--duo li span:first-child { flex-basis: auto; }
.accomp .tarifs li span:nth-child(2) { flex: 1; }
/* le bouton de chaque carte : discret au repos, il se remplit au survol */
.accomp-rdv {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.92rem; color: var(--prune);
  border: 2px solid var(--miel); border-radius: 999px; padding: 9px 18px;
  transition: background 0.25s ease, transform 0.25s cubic-bezier(.34, 1.4, .5, 1), box-shadow 0.25s ease;
}
.accomp-rdv svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.accomp-rdv:focus-visible { background: var(--miel); }
/* Toute la carte est la cible : le lien du bouton s'étend sur la colonne
   entière (::after), et la colonne se pose sur un fond en arche au survol. */
.accomp { position: relative; }
.accomp-rdv::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: hover) and (min-width: 601px) {
  .accomp {
    padding: 12px 12px 22px; margin: -12px;
    border-radius: 999px 999px 30px 30px;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.35s cubic-bezier(.34, 1.3, .5, 1);
  }
  .accomp-rdv::after { border-radius: 999px 999px 30px 30px; }
  .accomp:hover, .accomp:focus-within {
    /* rose poudré, la teinte des galets du site : plus chaud que le lait, qui paraissait gris */
    background: rgba(227, 167, 159, 0.32); box-shadow: 0 22px 40px -28px rgba(67, 33, 58, 0.35); transform: translateY(-4px);
  }
  .accomp:hover .accomp-rdv, .accomp:focus-within .accomp-rdv { background: var(--miel); }
  .accomp:hover .soin-vue img { transform: scale(1.04); }
  .accomp:hover h3 { color: var(--prune-2); }
}
/* le soin sans photographie : la feuille du salon sur un halo rose */
.soin-vue--feuille {
  aspect-ratio: 3 / 4; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #F6D9D3, var(--rose));
}
.soin-vue--feuille svg { width: 58%; fill: var(--lait); }

.en-pause {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  margin-top: clamp(34px, 4vw, 52px); padding: 22px 28px;
  border: 2px dashed rgba(67, 33, 58, 0.18); border-radius: var(--r-soft);
}
.en-pause > div { flex: 1 1 320px; }
.en-pause h3 { font-size: 1.05rem; margin-bottom: 4px; }
.en-pause p { margin: 0; color: var(--texte-2); font-size: 0.97rem; }
.en-pause .soin-qui { margin: 0; }

.appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.appel h2 { color: var(--lait); margin-bottom: 10px; }
.appel p { margin: 0; }

@media (max-width: 1000px) { .soins--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .soins--quatre { grid-template-columns: 1fr; }
  .accompagnante { grid-template-columns: 1fr; border-radius: var(--r-panel); text-align: center; justify-items: center; padding: 30px 24px; }
  .accompagnante-photo { width: 120px; height: 120px; }
}
/* une seule colonne : l'arche s'élargit pour ne pas occuper tout l'écran */
@media (max-width: 600px) {
  .soins--quatre .soin-vue img, .soins--quatre .soin-vue--feuille,
  .idees .soin-vue img { aspect-ratio: 5 / 4; }
  .soin-vue--feuille svg { width: 34%; }
  /* un séparateur doux entre les cartes empilées */
  .soins--quatre { gap: 0; }
  .soins--quatre .accomp { padding-bottom: 34px; }
  .soins--quatre .accomp + .accomp { padding-top: 34px; border-top: 2px dashed rgba(67, 33, 58, 0.14); }
  .accomp-rdv { align-self: stretch; justify-content: center; padding: 13px 18px; background: var(--miel); }
}

/* --------------------------------------------------------------------------
   La Trame — repères, idées maîtresses, séance
   -------------------------------------------------------------------------- */
.reperes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.reperes li {
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  background: var(--lait); border-radius: 999px;
  padding: 30px 22px; box-shadow: var(--ombre);
}
.reperes b { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--prune); line-height: 1; }
.reperes span { font-size: 0.88rem; color: var(--texte-2); line-height: 1.35; }

.tete-citation {
  font-family: var(--display); font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.3;
  color: var(--prune); margin: 0 0 clamp(22px, 3vw, 34px); max-width: 30ch;
}
.deux-colonnes { columns: 2 340px; column-gap: clamp(30px, 4vw, 56px); }
.deux-colonnes p { break-inside: avoid; color: var(--texte-2); }

.idees-trame { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.idee-trame { background: var(--lait); border-radius: var(--r-panel); padding: clamp(24px, 3vw, 36px); box-shadow: var(--ombre); }
.idee-trame-vue {
  width: 92px; height: 92px; border-radius: 999px; margin-bottom: 20px;
  background: radial-gradient(circle at 36% 30%, var(--peche), var(--peche-2));
  display: grid; place-items: center;
}
.idee-trame-vue svg { width: 66px; height: 66px; }
.idee-trame-vue .trait { fill: none; stroke: var(--prune); stroke-width: 3; stroke-linecap: round; }
.idee-trame h3 { margin-bottom: 12px; }
.idee-trame p { font-size: 0.99rem; color: var(--texte-2); }
.idee-trame p + p { margin-top: 0.9em; }

.tapis { text-align: center; }
.tapis .citation { margin-inline: auto; max-width: 34ch; }
.tapis .citation-source { margin: 0; }

.sur-titre { margin: clamp(26px, 3vw, 38px) 0 16px; }
.pastilles--large li { font-size: 0.92rem; padding: 9px 18px; background: var(--peche); }

.seance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.seance h2 { color: var(--lait); margin-bottom: 18px; }
.seance-dessin { width: 100%; height: auto; }
.seance-mots text { font-family: var(--texte-f); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; fill: rgba(251, 243, 238, 0.75); }

@media (max-width: 860px) {
  .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idees-trame { grid-template-columns: 1fr; }
  .seance { grid-template-columns: 1fr; }
  .seance-dessin { max-width: 320px; margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   Soins — familles, cartes et accordéon des descriptifs
   -------------------------------------------------------------------------- */
.familles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.familles a {
  font-weight: 700; font-size: 0.95rem; color: var(--prune);
  background: var(--lait); border-radius: 999px; padding: 11px 20px; box-shadow: var(--ombre);
  transition: background 0.25s ease, transform 0.25s cubic-bezier(.34, 1.4, .5, 1);
}
.familles a:hover { background: var(--miel); transform: translateY(-2px); }

.accomp .soin-qui { margin-bottom: 10px; }
.accomp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.accomp .soin-tarif { flex-wrap: wrap; }
.accomp .soin-tarif b { white-space: nowrap; }
.soin-vue--feuille .pictogramme { width: 46%; fill: none; stroke: var(--lait); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; color: var(--lait); }
.accomp-actions .accomp-rdv { margin-top: 0; }
.soin-vue--rose  { background: radial-gradient(circle at 40% 30%, #F6D9D3, var(--rose)); }
.soin-vue--sauge { background: radial-gradient(circle at 40% 30%, #DCE5D8, var(--sauge)); }
.soin-vue--miel  { background: radial-gradient(circle at 40% 30%, #F2CE92, var(--miel)); }
.soin-vue--peche { background: radial-gradient(circle at 40% 30%, var(--peche), var(--peche-2)); }

/* l'accordéon des longs descriptifs */
.depli--soin { border-top: 1px solid rgba(67, 33, 58, 0.12); padding: 6px 0; margin: 0; }
.depli--soin:first-of-type { border-top: none; }
.depli--soin > summary {
  background: none; box-shadow: none; padding: 20px 0; width: 100%;
  font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  justify-content: space-between;
}
.depli--soin > summary::after { margin-left: auto; }
.depli--soin[open] > summary { color: var(--prune-2); }
.depli--soin .depli-corps { padding-bottom: 26px; }
.depli--soin .depli-corps .soin-tarif { margin-bottom: 18px; }

.contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; justify-content: center;
  background: var(--lait); border-radius: 999px; padding: 22px clamp(26px, 4vw, 44px); box-shadow: var(--ombre); }
.contacts-titre { margin: 0; font-weight: 700; color: var(--prune); }
.contacts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 26px; }
.contacts li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 700; color: var(--texte-2); }

@media (max-width: 600px) {
  .familles a { font-size: 0.9rem; padding: 10px 16px; }
  .contacts { border-radius: var(--r-panel); flex-direction: column; text-align: center; }
  .contacts li { flex-direction: column; gap: 4px; }
}

/* --------------------------------------------------------------------------
   Accueil — jalons, venir au salon, bloc à offrir
   -------------------------------------------------------------------------- */
.jalons { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; }
.jalons li {
  font-size: 0.88rem; font-weight: 700; color: var(--texte-2);
  background: var(--lait); border-radius: 999px; padding: 8px 16px;
}

.venir {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
  gap: clamp(26px, 4vw, 56px); align-items: center;
  background: var(--lait); border-radius: var(--r-panel);
  padding: clamp(28px, 4vw, 52px); box-shadow: var(--ombre);
}
.venir-cadre {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texte-2); margin-bottom: 12px;
}
.venir-adresse {
  font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.25;
  color: var(--prune); margin-bottom: 14px;
}
.venir p:last-of-type { color: var(--texte-2); margin: 0; }
.venir-dessin { width: 100%; max-width: 230px; justify-self: center; height: auto; }

.offrir-accueil {
  display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
/* le bon est en lait : le panneau se teinte pour qu'il se détache */
.panneau.offrir-accueil { background: var(--peche-2); }
.offrir-accueil h2 { margin-bottom: 14px; }
.offrir-accueil p { color: var(--texte-2); }
.offrir-accueil .bon-pile::before { background: var(--peche-2); }

@media (max-width: 820px) {
  .venir, .offrir-accueil { grid-template-columns: 1fr; }
  .venir-dessin { max-width: 170px; }
  .offrir-accueil .bon-pile { max-width: 340px; margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   Portraits (le salon)
   -------------------------------------------------------------------------- */
.portrait {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.portrait-vue { border-radius: var(--r-arch); overflow: hidden; box-shadow: var(--ombre); background: var(--peche-2); }
.portrait-vue img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.portrait-role {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--texte-2);
  background: var(--peche);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 14px;
}
.portrait h2 { margin-bottom: 20px; }
.signature {
  border-radius: var(--r-soft);
  background: var(--peche);
  padding: 24px 28px;
  font-family: var(--display);
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--prune);
  margin-top: 28px;
  max-width: 56ch;
}

@media (max-width: 760px) {
  .portrait { grid-template-columns: 1fr; }
  .portrait-vue { max-width: 260px; }
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--prune);
  color: rgba(251, 243, 238, 0.72);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  margin-top: clamp(30px, 5vw, 60px);
  padding-block: clamp(46px, 6vw, 74px) 28px;
}
.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.6fr);
  gap: clamp(30px, 4vw, 52px);
}
.pied h4 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  color: var(--miel);
  margin-bottom: 20px;
}
.pied .enseigne b { color: var(--lait); }
.pied .enseigne i { color: var(--miel); display: block; }
.pied p { color: rgba(251, 243, 238, 0.72); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 14px; }
.pied li b { display: block; font-size: 0.9rem; font-weight: 700; color: var(--lait); margin-bottom: 5px; }
.pied-nav li { margin-bottom: 11px; }
.pied-nav a { font-weight: 600; transition: color 0.2s ease; }
.pied-nav a:hover, .pied-bas a:hover { color: var(--miel); }
.pied-bas {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid rgba(251, 243, 238, 0.16);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(251, 243, 238, 0.5);
}

.pied-adresse { font-family: var(--display); font-size: 1.25rem; color: var(--lait); margin: 20px 0 10px; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 0.9rem; font-weight: 700; }
.pied-liens a { text-decoration: underline; text-decoration-color: rgba(222, 154, 60, 0.6); text-underline-offset: 4px; transition: color 0.2s ease; }
.pied-liens a:hover { color: var(--miel); }

/* Les praticiennes : une ligne chacune, le numéro et l'agenda côte à côte. */
.pied-prat li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 16px; padding: 11px 0; margin: 0;
  border-bottom: 1px solid rgba(251, 243, 238, 0.12);
}
.pied-prat li:last-child { border-bottom: none; }
.pied-prat b { display: block; font-size: 0.95rem; margin: 0; }
.pied-actions { display: flex; align-items: center; gap: 14px; }
.pied-tel { font-size: 1rem; font-weight: 800; color: var(--lait); white-space: nowrap; transition: color 0.2s ease; }
.pied-tel:hover { color: var(--miel); }
.pied-rdv {
  font-size: 0.82rem; font-weight: 700; color: var(--lait);
  border: 1.5px solid rgba(251, 243, 238, 0.35); border-radius: 999px; padding: 5px 13px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pied-rdv:hover { background: var(--miel); color: var(--prune); border-color: var(--miel); }
/* la ligne d'Elsa n'a pas de bouton : un fantôme garde la place pour que
   les cinq numéros restent alignés */
.pied-rdv--vide { visibility: hidden; }
.pied-note { font-size: 0.86rem; margin-top: 16px; }

@media (max-width: 480px) {
  .pied-prat li { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 780px) { .pied-grille { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Une praticienne seule : une pastille allongée plutôt qu'une fiche isolée
   au milieu d'une grille vide.
   -------------------------------------------------------------------------- */
.fiche-solo {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  flex-wrap: wrap;
  background: var(--lait);
  border-radius: 999px;
  padding: 20px clamp(26px, 3vw, 42px) 20px 20px;
  box-shadow: var(--ombre);
}
.fiche-solo .medaillon { width: 84px; height: 84px; font-size: 1.75rem; }
.fiche-solo-corps { flex: 1 1 240px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.fiche-solo .fiche-nom { font-size: 1.4rem; }
.fiche-solo p { font-size: 0.97rem; color: var(--texte-2); margin: 0; }
.fiche-solo-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

@media (max-width: 680px) {
  .fiche-solo { border-radius: var(--r-panel); padding: 26px; }
}

/* ==========================================================================
   Mise à jour de septembre 2026
   Nouveaux contenus transmis par Elsa, réservation en ligne, correctifs
   mobiles mesurés et signature du réalisateur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Téléphone en paysage
   Mesuré : six entrées de menu font 393 px de haut, contre 320 à 390 px de
   hauteur d'écran en paysage. Le volet défile désormais, mais on réduit
   aussi le corps pour qu'il tienne sans défilement sur la plupart des
   téléphones tenus à l'horizontale.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) and (max-height: 540px) {
  .menu { padding-top: 76px; padding-bottom: 28px; gap: 2px; }
  .menu a { font-size: 1.2rem; padding: 7px 20px; }
}

/* Très petits écrans : l'enseigne ne laissait que 4 px de marge à 320 px.
   On réduit le logo et le nom pour reprendre de l'air. */
@media (max-width: 370px) {
  .enseigne img { height: 32px; }
  .enseigne b { font-size: 1rem; }
  .bascule { width: 42px; height: 42px; padding: 10px; }
}

/* --------------------------------------------------------------------------
   Réserver en ligne
   Chaque praticienne tient son propre agenda appt.link. La réservation
   devient l'action principale ; le téléphone reste offert à côté.
   -------------------------------------------------------------------------- */
.rdv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  font-family: var(--texte-f);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--prune);
  background: var(--miel);
  border-radius: 999px;
  padding: 11px 22px;
  text-decoration: none;
  transition: background 0.22s ease, transform 0.22s cubic-bezier(.34, 1.35, .5, 1),
              box-shadow 0.22s ease;
}
.rdv:hover { background: #E9AE58; transform: translateY(-2px); box-shadow: var(--ombre); }
.rdv svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rdv--clair { background: var(--lait); color: var(--prune); }
.rdv--clair:hover { background: var(--miel); }

/* Le couple d'actions d'une praticienne : réserver, puis appeler. */
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions .tel { min-height: 46px; }

/* --------------------------------------------------------------------------
   Présentation d'une praticienne (page « Le salon »)
   -------------------------------------------------------------------------- */
.presentation {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding-top: clamp(30px, 4vw, 48px);
  margin-top: clamp(30px, 4vw, 48px);
  border-top: 1px solid var(--peche-2);
}
.presentation:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.presentation-vue {
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--peche-2);
  box-shadow: var(--ombre);
}
.presentation-vue img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.presentation-vue--initiales {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 3.2rem;
  color: rgba(67, 33, 58, 0.34);
  background: radial-gradient(circle at 36% 30%, var(--peche), var(--peche-2));
}
.presentation h3 { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 400; margin-bottom: 6px; }
.presentation .role {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--texte-2);
  background: var(--peche);
  border-radius: 999px;
  padding: 6px 15px;
  margin-bottom: 18px;
}
.presentation p { color: var(--texte-2); }
.presentation .actions { margin-top: 22px; }
.a-venir { font-style: italic; color: var(--texte-2); }

/* Les rubriques d'une offre (Cloé, Gwenaëlle : elles décrivent leurs soins
   par groupes plutôt qu'en liste). */
.groupe { margin-top: 18px; }
.groupe-cadre {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--miel);
  margin-bottom: 4px;
}
.groupe h4 { font-size: 1.02rem; font-weight: 700; color: var(--prune); margin-bottom: 4px; }
.groupe p { font-size: 1rem; }

@media (max-width: 760px) {
  .presentation { grid-template-columns: 1fr; }
  .presentation-vue { max-width: 200px; }
}

/* --------------------------------------------------------------------------
   Signature du réalisateur, dans le pied de page
   -------------------------------------------------------------------------- */
.credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--texte-f);
  font-size: 0.76rem;
  color: rgba(251, 243, 238, 0.48);
  text-decoration: none;
  transition: color 0.22s ease;
}
.credit img { height: 19px; width: auto; opacity: 0.85; transition: opacity 0.22s ease; }
.credit:hover { color: rgba(251, 243, 238, 0.85); }
.credit:hover img { opacity: 1; }

@media (max-width: 560px) {
  .pied-bas { flex-direction: column; align-items: flex-start; gap: 14px; }
}