/* ==========================================================================
   L'espace beauté by Amandine — feuille de styles
   Palette : beige lin / rose poudré. Titres : Marcellus. Texte : Hanken Grotesk.
   ========================================================================== */

/* DÉBUT POLICES -------------------------------------------------------------
   Polices hébergées sur le site (dossier fonts/), aucune connexion à Google.
   Titres : Cormorant Garamond. Texte : Jost.
   Fichiers attendus : voir fonts/LISEZ-MOI-polices.txt. Pour chaque graisse,
   le navigateur prend le premier fichier présent dans la liste. S'il n'y en a
   aucun, le site s'affiche avec les polices de secours (Garamond, Georgia…). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/CormorantGaramond-Regular.woff2") format("woff2"),
       url("../fonts/CormorantGaramond-Regular.ttf") format("truetype"),
       url("../fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/CormorantGaramond-Medium.woff2") format("woff2"),
       url("../fonts/CormorantGaramond-Medium.ttf") format("truetype"),
       url("../fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/CormorantGaramond-SemiBold.woff2") format("woff2"),
       url("../fonts/CormorantGaramond-SemiBold.ttf") format("truetype"),
       url("../fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/CormorantGaramond-Italic.woff2") format("woff2"),
       url("../fonts/CormorantGaramond-Italic.ttf") format("truetype"),
       url("../fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Jost-Regular.woff2") format("woff2"),
       url("../fonts/Jost-Regular.ttf") format("truetype"),
       url("../fonts/Jost-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Jost-Medium.woff2") format("woff2"),
       url("../fonts/Jost-Medium.ttf") format("truetype"),
       url("../fonts/Jost-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Jost-SemiBold.woff2") format("woff2"),
       url("../fonts/Jost-SemiBold.ttf") format("truetype"),
       url("../fonts/Jost-VariableFont_wght.ttf") format("truetype");
}
/* FIN POLICES ------------------------------------------------------------- */

:root {
  --blanc: #FFFFFF;          /* fond de l'en-tête, autour du logo */
  --lin: #F1E7DB;            /* fond de page, beige */
  --sable: #E0CFBC;          /* filets, bordures */
  --sable-fonce: #C9B39C;    /* pointillés, bordures de champs */
  --creme: #FBF6EF;          /* « papier » de la carte, texte sur fond sombre */
  --poudre: #E5C2BA;         /* rose poudré */
  --poudre-clair: #F2DCD5;   /* rose poudré, survols et fonds doux */
  --rose: #8C4B52;           /* bois de rose : boutons, liens */
  --rose-fonce: #6F3840;
  --cacao: #3A2B28;          /* texte */
  --cacao-doux: #6B5650;     /* texte secondaire */
  --erreur: #9B2C35;

  --display: "Cormorant Garamond", Garamond, "EB Garamond", Baskerville, "Baskerville Old Face", Georgia, serif;
  --texte: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--lin);
  color: var(--cacao);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
picture { display: contents; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

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

a { color: var(--rose); text-underline-offset: 0.18em; }
a:hover { color: var(--rose-fonce); }

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

.conteneur { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--cacao);
  color: var(--creme);
  border-radius: 0.5rem;
}
.lien-evitement:focus { top: 1rem; color: var(--creme); }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.65rem 1.5rem;
  border: 1.5px solid var(--rose);
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bouton-plein { background: var(--rose); color: var(--creme); }
.bouton-plein:hover { background: var(--rose-fonce); border-color: var(--rose-fonce); color: var(--creme); }
.bouton-contour { background: transparent; color: var(--rose-fonce); }
.bouton-contour:hover { background: var(--rose); color: var(--creme); }

/* ---------- En-tête ---------- */

.entete { background: var(--blanc); border-bottom: 1px solid var(--sable); }

.entete-interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 0.9rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cacao);
  text-decoration: none;
}
.marque:hover { color: var(--cacao); }
.marque img { flex: none; width: 3rem; height: auto; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque-nom { font-family: var(--display); font-size: 1.4rem; }
.marque-sous { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--rose); }

.menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.menu-lien {
  padding-block: 0.35rem;
  border-bottom: 1.5px solid transparent;
  color: var(--cacao);
  text-decoration: none;
}
.menu-lien:hover { border-bottom-color: var(--poudre); color: var(--cacao); }
.menu-lien[aria-current="page"] { border-bottom-color: var(--rose); }

.menu-bouton {
  display: none;
  min-height: 2.75rem;
  padding: 0.4rem 1.1rem;
  border: 1.5px solid var(--cacao);
  border-radius: 999px;
  background: transparent;
  color: var(--cacao);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 56rem) {
  .js .menu-bouton { display: inline-flex; align-items: center; }
  .menu {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0.5rem;
  }
  .js .menu { display: none; }
  .js .menu.ouvert { display: flex; }
  .menu-lien { padding-block: 0.8rem; border-bottom: 1px solid var(--sable); }
  .menu-lien[aria-current="page"] { border-bottom-color: var(--rose); }
  .menu .bouton { margin-top: 1rem; }
}

/* Très petits téléphones : logo, nom et bouton Menu tiennent sur une ligne. */
@media (max-width: 24rem) {
  .entete-interieur { column-gap: 0.75rem; }
  .marque { gap: 0.5rem; }
  .marque img { width: 2.4rem; }
  .marque-nom { font-size: 1.2rem; }
  .menu-bouton { padding-inline: 0.9rem; }
}

/* ---------- Accueil : hero ---------- */

.hero { position: relative; z-index: 1; }

.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-top: clamp(3rem, 6vw, 5rem);
}

.hero-texte { padding-bottom: clamp(1rem, 4vw, 3rem); }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); letter-spacing: -0.01em; }
.hero-intro {
  max-width: 33rem;
  margin: 1.5rem 0 0;
  font-size: 1.2rem;
  color: var(--cacao-doux);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

/* Photo du salon : en arche, elle déborde sur la bande rose de la présentation. */
.hero-photo {
  width: min(100%, 27rem);
  margin: 0 0 -5rem auto;
}
.hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14rem 14rem 0.75rem 0.75rem;
  box-shadow: 0 22px 40px -18px rgba(88, 52, 46, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: hero-photo-pose 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes hero-photo-pose {
    from { opacity: 0; transform: translateY(1.25rem); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 48rem) {
  .hero-grille { grid-template-columns: 1fr; gap: 2rem; }
  .hero-texte { padding-bottom: 0; }
  .hero-photo { width: 100%; margin: 0 0 -3.5rem; }
  .hero-photo img { aspect-ratio: 4 / 3.4; border-radius: 9rem 9rem 0.75rem 0.75rem; }
}

/* ---------- Accueil : présentation ---------- */

.presentation {
  background: var(--poudre);
  padding-block: clamp(7.5rem, 11vw, 10rem) clamp(4rem, 8vw, 6.5rem);
}
.presentation a { color: var(--rose-fonce); }

.presentation-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.presentation h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.presentation-texte { max-width: 36rem; font-size: 1.125rem; }


@media (max-width: 48rem) {
  .presentation-grille { grid-template-columns: 1fr; }
}

/* ---------- Blocs génériques ---------- */

.bloc { padding-block: clamp(4rem, 8vw, 6.5rem); }
.bloc-titre { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 2rem; }
.bloc-doux { background: var(--poudre-clair); }

/* ---------- Accueil : les trois activités ---------- */

.activites { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--sable); }

.activite-lien {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 0.5rem 2.5rem;
  align-items: baseline;
  padding: 1.75rem 0.25rem;
  border-top: 1px solid var(--sable);
  color: var(--cacao);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.activite-lien:hover { background: var(--creme); color: var(--cacao); }
.activite-lien h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.activite-lien p { margin: 0; color: var(--cacao-doux); }
.activite-suite { color: var(--rose); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; white-space: nowrap; }

@media (max-width: 48rem) {
  .activite-lien { grid-template-columns: 1fr; padding-block: 1.4rem; }
}

/* ---------- Accueil : avis clientes ---------- */

.avis .bloc-titre { margin-bottom: 0.5rem; }
.avis-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0.75rem 0 0.35rem; }
.avis-note-chiffre { font-family: var(--display); font-size: 2rem; line-height: 1; }
.avis-note .avis-etoiles { margin: 0; font-size: 1.3rem; }
.avis-note-total { color: var(--cacao-doux); }
.avis-intro { margin-bottom: 2rem; color: var(--cacao-doux); }
/* Colonnes « mur » : les avis de longueurs différentes s'emboîtent sans trous. */
.avis-liste { list-style: none; margin: 0 0 2rem; padding: 0; columns: 3 18rem; column-gap: 1.25rem; }
.avis-carte {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  padding: 1.5rem 1.5rem 1.35rem;
  background: var(--creme);
  border: 1px solid var(--sable);
  border-radius: 0.75rem;
}
.avis-etoiles { display: block; margin-bottom: 0.75rem; color: var(--rose); font-size: 1.1rem; letter-spacing: 0.15em; line-height: 1; }
.avis-carte blockquote { margin: 0; }
.avis-carte blockquote p { margin: 0; }
.avis-auteur { margin: 1rem 0 0; font-family: var(--display); font-size: 1.15rem; }

/* ---------- La carte (aperçu et page complète) ---------- */

.papier {
  background: var(--creme);
  border: 1px solid var(--sable);
  border-radius: 0.5rem;
  outline: 1px solid var(--sable);
  outline-offset: -0.6rem;
  padding: clamp(1.75rem, 4vw, 3.5rem);
}

.apercu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
}
.apercu h3 { font-size: 1.5rem; padding-bottom: 0.5rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--sable); }
.apercu ul { list-style: none; margin: 0; padding: 0; }
.apercu li { display: flex; align-items: baseline; gap: 0.5rem; padding-block: 0.3rem; }
.apercu-fin { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; }
.apercu-fin p { margin: 0; color: var(--cacao-doux); }

@media (max-width: 60rem) { .apercu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .apercu { grid-template-columns: 1fr; } }

.points {
  flex: 1;
  min-width: 1.25rem;
  border-bottom: 1.5px dotted var(--sable-fonce);
  transform: translateY(-0.28em);
}
.prix { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Page La carte */

.page-tete { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 2.75rem); }
.page-tete h1 { font-size: clamp(2.4rem, 5.5vw, 4.1rem); }
.chapeau { max-width: 40rem; margin: 1.25rem 0 0; font-size: 1.2rem; color: var(--cacao-doux); }

.paiement {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0.7rem 1.1rem;
  border-radius: 0.6rem;
  background: var(--poudre-clair);
}

.carte-grille {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.sommaire { position: sticky; top: 1.5rem; }
.sommaire ul { list-style: none; margin: 0; padding: 0; }
.sommaire a {
  display: block;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--sable);
  color: var(--cacao);
  font-family: var(--display);
  font-size: 1.2rem;
  text-decoration: none;
}
.sommaire a:hover { color: var(--rose); }
.sommaire-fleche { display: none; }
.sommaire-defile { position: relative; }
.sommaire a.actif { color: var(--rose-fonce); }

@media (max-width: 56rem) {
  .carte-grille { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  /* Catégories en pastilles qui défilent horizontalement */
  .sommaire {
    top: 0;
    z-index: 5;
    margin-inline: -1.25rem;
    min-width: 0;
    padding: 0.65rem 0;
    background: var(--lin);
    border-bottom: 1px solid var(--sable);
  }
  .sommaire-defile {
    overflow-x: auto;
    padding-inline: 1.25rem;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .sommaire-defile::-webkit-scrollbar { display: none; }
  .sommaire ul { display: flex; gap: 0.5rem; width: max-content; }
  .sommaire a {
    padding: 0.3rem 1rem;
    border: 1px solid var(--sable-fonce);
    border-radius: 999px;
    background: var(--creme);
    white-space: nowrap;
    font-size: 1.1rem;
  }
  .sommaire a.actif { background: var(--rose); border-color: var(--rose); color: var(--creme); }

  /* Bords estompés : signalent qu'il reste des catégories hors de l'écran */
  .sommaire.suite-droite .sommaire-defile {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4.5rem), transparent calc(100% - 0.5rem));
            mask-image: linear-gradient(to right, #000 calc(100% - 4.5rem), transparent calc(100% - 0.5rem));
  }
  .sommaire.suite-gauche .sommaire-defile {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 4.5rem), transparent calc(100% - 0.5rem));
            mask-image: linear-gradient(to left, #000 calc(100% - 4.5rem), transparent calc(100% - 0.5rem));
  }
  .sommaire.suite-droite.suite-gauche .sommaire-defile {
    -webkit-mask-image: linear-gradient(to right, transparent 0.5rem, #000 4.5rem, #000 calc(100% - 4.5rem), transparent calc(100% - 0.5rem));
            mask-image: linear-gradient(to right, transparent 0.5rem, #000 4.5rem, #000 calc(100% - 4.5rem), transparent calc(100% - 0.5rem));
  }

  /* Flèches rondes : montrent le sens du défilement, et défilent au toucher */
  .sommaire-fleche {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: -1.125rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--rose);
    color: var(--creme);
    box-shadow: 0 4px 12px -4px rgba(88, 52, 46, 0.6);
    cursor: pointer;
  }
  .sommaire-fleche svg { width: 1rem; height: 1rem; }
  .sommaire-fleche.droite { right: 0.6rem; }
  .sommaire-fleche.gauche { left: 0.6rem; }
  .sommaire.suite-droite .sommaire-fleche.droite,
  .sommaire.suite-gauche .sommaire-fleche.gauche { display: grid; }
}

.categorie { scroll-margin-top: 4.5rem; }
.categorie + .categorie { margin-top: 3rem; }
.categorie h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  padding-bottom: 0.6rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--sable);
}

.lignes { list-style: none; margin: 0; padding: 0; }

.ligne-zone {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  column-gap: 0.9rem;
  align-items: start;
  padding: 0.65rem 0.6rem;
  margin-inline: -0.6rem;
  border-radius: 0.6rem;
}
label.ligne-zone { cursor: pointer; }
label.ligne-zone:hover { background: var(--poudre-clair); }
.ligne-zone:has(input:checked) { background: var(--poudre-clair); }

.ligne-zone input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.12rem 0 0;
  border: 1.5px solid var(--rose);
  border-radius: 50%;
  background: var(--creme) center / 62% no-repeat;
  cursor: pointer;
}
.ligne-zone input:checked {
  background-color: var(--rose);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23FBF6EF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ligne-tete { display: flex; align-items: baseline; gap: 0.6rem; }
.ligne-desc { display: block; font-size: 0.95rem; color: var(--cacao-doux); }

.carte-note { margin-top: 2.5rem; color: var(--cacao-doux); font-size: 0.95rem; }

/* Barre de sélection */

.selection {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  padding: 0.85rem 0 calc(0.85rem + env(safe-area-inset-bottom, 0px));
  background: var(--cacao);
  color: var(--creme);
}
.selection[hidden] { display: none; }
.selection-interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
}
.selection-total { margin: 0; }
.selection-total strong { font-family: var(--display); font-size: 1.5rem; font-weight: 400; }
.selection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.selection .bouton-plein { background: var(--poudre); border-color: var(--poudre); color: var(--cacao); }
.selection .bouton-plein:hover { background: var(--creme); border-color: var(--creme); color: var(--cacao); }
.selection-effacer {
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--creme);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.selection :focus-visible { outline-color: var(--creme); }
body.avec-selection { padding-bottom: 6.5rem; }

@media (max-width: 38rem) {
  .papier { padding: 1.4rem 1.1rem; outline-offset: -0.35rem; }
  .selection { padding-top: 0.65rem; }
  .selection-interieur { gap: 0.5rem 1rem; }
  .selection-actions { display: contents; }
  .selection-total { flex: 1; line-height: 1.3; }
  .selection-effacer { white-space: nowrap; }
  .selection .bouton { flex-basis: 100%; min-height: 2.75rem; }
  body.avec-selection { padding-bottom: 8rem; }
}

/* ---------- Pages de contenu (cours de maquillage, mentions) ---------- */

.contenu-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}
.contenu-texte { max-width: 38rem; font-size: 1.125rem; }
.contenu-texte h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 2.25rem 0 0.75rem; }
.contenu-texte ul { margin: 0 0 1em; padding-left: 1.2rem; }
.contenu-texte li { margin-bottom: 0.5rem; }
.contenu-texte li::marker { color: var(--rose); }

.encart { background: var(--poudre); border-radius: 0.75rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
.encart h2 { font-size: 1.6rem; margin-bottom: 0.75rem; }
.encart a { color: var(--rose-fonce); }
.encart .bouton-plein { color: var(--creme); margin-top: 0.75rem; }
.encart-tel { font-family: var(--display); font-size: 2rem; line-height: 1.2; }
.encart-tel a { text-decoration: none; }

@media (max-width: 52rem) { .contenu-grille { grid-template-columns: 1fr; } }

.icone {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.5em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  vertical-align: -0.25em;
  display: inline-block;
}
.icone .icone-point { fill: currentColor; stroke: none; }

/* ---------- Cours de maquillage ---------- */

.surtitre {
  margin-bottom: 0.75rem;
  color: var(--rose);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cours-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: stretch;
}
.cours {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--creme);
  border: 1px solid var(--sable);
  border-radius: 0.75rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.cours-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  width: 100%;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--sable);
}
.cours h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.cours-prix { margin: 0; font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--rose-fonce); }
.cours-duree { margin: 0.6rem 0 1rem; color: var(--cacao-doux); font-weight: 600; }
.cours ul { margin: 0 0 1.75rem; padding-left: 1.2rem; }
.cours li { margin-bottom: 0.4rem; }
.cours li::marker { color: var(--rose); }
.cours .bouton { margin-top: auto; }

.cours-fin { padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 6.5rem); }
.cours-encart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.cours-encart p { max-width: 34rem; }
.cours-encart-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cours-encart .bouton-plein { margin-top: 0; }
.cours-encart .bouton-contour { color: var(--rose-fonce); }
.cours-encart .bouton-contour:hover { color: var(--creme); }

.legal { max-width: 44rem; padding-bottom: clamp(4rem, 8vw, 6.5rem); }
.legal h2 { font-size: 1.6rem; margin: 2.5rem 0 0.75rem; }
.legal ul { padding-left: 1.2rem; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.5rem; margin: 0; }
.legal dt { color: var(--cacao-doux); }
.legal dd { margin: 0; }
@media (max-width: 36rem) {
  .legal dl { grid-template-columns: 1fr; gap: 0; }
  .legal dd { margin-bottom: 0.6rem; }
}

/* ---------- Rendez-vous (bas de l'accueil) ---------- */

.rdv-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.rdv-tel { display: inline-block; margin: 0.25rem 0 1.25rem; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; color: var(--rose-fonce); text-decoration: none; }
.rdv-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.rdv-infos { margin: 0; }
.rdv-infos dt { margin-top: 1.25rem; color: var(--cacao-doux); font-size: 0.95rem; }
.rdv-infos dt:first-child { margin-top: 0; }
.rdv-infos dd { margin: 0; font-size: 1.125rem; }
.rdv-infos a { color: var(--rose-fonce); }

.horaires { border-collapse: collapse; margin: 0.15rem 0 0.4rem; }
.horaires th, .horaires td { padding: 0.1rem 0; text-align: left; vertical-align: baseline; }
.horaires th { padding-right: 1.75rem; font-weight: 400; }
.horaires-ferme { color: var(--cacao-doux); }

@media (max-width: 48rem) { .rdv-grille { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */

.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}
@media (max-width: 52rem) { .contact-grille { grid-template-columns: 1fr; } }

.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.champ { display: flex; flex-direction: column; gap: 0.35rem; }
.champ-large { grid-column: 1 / -1; }
.champ label { font-weight: 600; }
.champ .facultatif { font-weight: 400; color: var(--cacao-doux); }
.champ input, .champ textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--sable-fonce);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--cacao);
  font: inherit;
}
.champ textarea { min-height: 11rem; resize: vertical; }
.champ input:focus-visible, .champ textarea:focus-visible { outline-offset: 1px; border-color: var(--rose); }
.champ [aria-invalid="true"] { border-color: var(--erreur); }
.champ-erreur { color: var(--erreur); font-size: 0.95rem; }
.champ-erreur:empty { display: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-note { grid-column: 1 / -1; margin: 0; font-size: 0.95rem; color: var(--cacao-doux); }
.formulaire-envoi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.formulaire-etat { grid-column: 1 / -1; margin: 0; padding: 0.9rem 1.1rem; border-radius: 0.6rem; background: var(--poudre-clair); }
.formulaire-etat:empty { display: none; }
.formulaire-etat.erreur { background: #F6DADA; color: var(--erreur); }
@media (max-width: 36rem) { .formulaire { grid-template-columns: 1fr; } }

.recap { grid-column: 1 / -1; padding: 1.1rem 1.25rem; border-radius: 0.6rem; background: var(--poudre-clair); }
.recap[hidden] { display: none; }
.recap h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.recap ul { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.recap li { display: flex; align-items: baseline; gap: 0.5rem; padding-block: 0.15rem; }
.recap-total { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--poudre); font-weight: 600; }
.recap-actions { font-size: 0.95rem; }
.recap-actions a, .recap-actions .selection-effacer { color: var(--rose-fonce); }
.recap-actions .selection-effacer { padding: 0; }

/* ---------- Pied de page ---------- */

.pied { background: var(--cacao); color: var(--creme); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.pied a { color: var(--creme); }
.pied a:hover { color: var(--poudre); }
.pied :focus-visible { outline-color: var(--creme); }
.pied-grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
.pied-logo { width: 3.5rem; height: auto; margin-bottom: 1rem; }
.pied-nom { font-family: var(--display); font-size: 1.6rem; line-height: 1.2; margin-bottom: 0.5rem; }
.pied p { margin: 0 0 0.35rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.4rem; }
.pied-bas { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(251, 246, 239, 0.22); font-size: 0.9rem; color: #D9C8BC; }
@media (max-width: 48rem) { .pied-grille { grid-template-columns: 1fr; } }

/* ---------- Page 404 ---------- */

.introuvable { padding-block: clamp(4rem, 12vw, 9rem); text-align: left; }
.introuvable h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1rem; }
.introuvable .hero-actions { margin-top: 1.75rem; }

/* ---------- Bandeau d'annonce ---------- */

.annonce { background: var(--rose-fonce); color: var(--creme); font-size: 0.95rem; }
.annonce-interieur { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding-block: 0.5rem; }
.annonce p { margin: 0; text-align: center; }
.annonce a { color: var(--creme); font-weight: 600; white-space: nowrap; }
.annonce a:hover { color: var(--poudre-clair); }
.annonce :focus-visible { outline-color: var(--creme); }
.annonce-fermer {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--creme);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.annonce-fermer:hover { background: rgba(251, 246, 239, 0.15); }

/* ---------- Bons cadeaux ---------- */

.cadeau-grille .bloc-titre { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: 1.5rem; }
.etapes { list-style: none; counter-reset: etape; margin: 0 0 1.75rem; padding: 0; }
.etapes li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 1.4rem 3.4rem;
  min-height: 2.4rem;
}
.etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -0.15rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--poudre);
  color: var(--rose-fonce);
  font-family: var(--display);
  font-size: 1.25rem;
}
.etapes li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 2.4rem;
  bottom: 0.15rem;
  width: 1px;
  background: var(--sable-fonce);
}
.etapes strong { display: block; font-weight: 600; }
.cadeau-note { color: var(--cacao-doux); font-size: 0.95rem; }

.choix-offre { margin: 0; padding: 0; border: 0; min-width: 0; }
.choix-offre legend { padding: 0; margin-bottom: 0.5rem; font-weight: 600; }
.choix {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--sable-fonce);
  border-radius: 0.6rem;
  background: #fff;
  cursor: pointer;
}
.choix + .choix { margin-top: 0.5rem; }
.choix:has(input:checked) { border-color: var(--rose); background: var(--poudre-clair); }
.choix input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--rose); }
.formulaire-sous-titre { grid-column: 1 / -1; margin: 0.75rem 0 -0.25rem; padding-top: 1rem; border-top: 1px solid var(--sable); font-family: var(--display); font-size: 1.3rem; }
[hidden].champ { display: none; }

/* ---------- Questions fréquentes ---------- */

.faq-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}
@media (max-width: 52rem) { .faq-grille { grid-template-columns: 1fr; } }
.faq-encart { position: sticky; top: 1.5rem; }
.faq { border-top: 1px solid var(--sable); }
.faq-item { border-bottom: 1px solid var(--sable); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0.25rem;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.35rem;
  border-right: 1.5px solid var(--rose);
  border-bottom: 1.5px solid var(--rose);
  transform: translateY(-0.2rem) rotate(45deg);
}
.faq-item[open] summary::after { transform: translateY(0.15rem) rotate(-135deg); }
.faq-item summary:hover { color: var(--rose-fonce); }
.faq-reponse { padding: 0 0.25rem 1.4rem; max-width: 42rem; color: var(--cacao-doux); }
.faq-reponse a { color: var(--rose-fonce); }

.lien-faq { margin: 0 0 1.75rem; color: var(--cacao-doux); }


/* ---------- Style « institut » ---------------------------------------------
   Cormorant Garamond a de petites lettres basses : font-size-adjust lui donne
   une taille visuelle équivalente aux polices de secours, sans changer les
   tailles réglées plus haut (navigateurs récents ; ailleurs, simple écart). */
h1, h2, h3,
.marque-nom,
.marque-sous,
.avis-note-chiffre,
.avis-auteur,
.sommaire a,
.selection-total strong,
.encart-tel,
.cours-prix,
.rdv-tel,
.pied-nom,
.etapes li::before,
.formulaire-sous-titre,
.faq-item summary {
  font-size-adjust: 0.45;
}

/* Menu, boutons et petits intitulés : capitales espacées, typiques des instituts */
.menu-lien {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bouton {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.surtitre { font-weight: 500; letter-spacing: 0.2em; }
.annonce { letter-spacing: 0.02em; }
.marque-nom { letter-spacing: 0.01em; }
.prix, .champ label, .recap-total, .cours-duree, .etapes strong, .choix-offre legend { font-weight: 500; }
.menu-bouton { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 56rem) {
  .menu-lien { font-size: 0.9rem; }
}

/* ==========================================================================
   Effets visuels légers
   Uniquement des propriétés peu coûteuses (opacité, transformation, ombres
   au survol). Tout est désactivé si le visiteur demande moins d'animations.
   ========================================================================== */

/* Halo rose poudré derrière la photo du salon */
.hero-photo { position: relative; }
.hero-photo::before {
  content: "";
  position: absolute;
  inset: -12% -18% 4% -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(229, 194, 186, 0.75), rgba(229, 194, 186, 0));
  pointer-events: none;
}
.hero { isolation: isolate; overflow-x: clip; }

/* Petit ornement sous les titres de section */
.bloc-titre::after,
.page-tete h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 0.9rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rose), var(--poudre));
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {

  /* Arrivée du texte d'accueil, en cascade */
  .hero-texte > * { animation: eba-monte 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-texte > :nth-child(2) { animation-delay: 0.12s; }
  .hero-texte > :nth-child(3) { animation-delay: 0.24s; }
  .hero-texte > :nth-child(4) { animation-delay: 0.36s; }
  .page-tete > * { animation: eba-monte 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .page-tete > :nth-child(2) { animation-delay: 0.1s; }
  .page-tete > :nth-child(3) { animation-delay: 0.2s; }

  @keyframes eba-monte {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: none; }
  }

  /* Le halo respire très lentement */
  .hero-photo::before { animation: eba-halo 9s ease-in-out infinite alternate; }
  @keyframes eba-halo {
    from { transform: scale(0.94); opacity: 0.75; }
    to { transform: scale(1.06); opacity: 1; }
  }

  /* Apparition au défilement (classe ajoutée par js/main.js) */
  .js .revele {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--delai, 0s);
  }
  .js .revele.visible { opacity: 1; transform: none; }
  .js .bloc-titre.revele::after { transform: scaleX(0); transition: transform 0.8s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .bloc-titre.revele.visible::after { transform: none; }
  .page-tete h1::after { animation: eba-trait 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes eba-trait { from { transform: scaleX(0); } to { transform: none; } }

  /* Boutons : léger soulèvement et reflet au survol */
  .bouton {
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                transform 0.2s ease, box-shadow 0.2s ease;
  }
  .bouton:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(111, 56, 64, 0.7); }
  .bouton:active { transform: translateY(0); box-shadow: none; }
  .bouton-plein::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
  }
  .bouton-plein:hover::after { transform: translateX(120%); transition: transform 0.7s ease; }

  /* Menu (écran large) : soulignement qui s'ouvre depuis le centre */
}
@media (prefers-reduced-motion: no-preference) and (min-width: 56.01rem) {
  .menu-lien { position: relative; border-bottom-color: transparent !important; }
  .menu-lien::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.5px;
    height: 1.5px;
    background: var(--poudre);
    transform: scaleX(0);
    transition: transform 0.25s ease;
  }
  .menu-lien:hover::after { transform: none; }
  .menu-lien[aria-current="page"]::after { transform: none; background: var(--rose); }
}
@media (prefers-reduced-motion: no-preference) {

  /* Logo : petite rotation au survol */
  .marque img, .marque svg { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .marque:hover img, .marque:hover svg { transform: rotate(30deg); }

  /* Cartes d'avis et de cours : soulèvement au survol */
  .avis-carte, .cours {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .avis-carte:hover, .cours:hover {
    transform: translateY(-4px);
    border-color: var(--poudre);
    box-shadow: 0 18px 30px -22px rgba(88, 52, 46, 0.55);
  }

  /* Accueil : la flèche glisse vers la droite */
  .activite-lien h3 { transition: transform 0.3s ease; }
  .activite-lien:hover h3 { transform: translateX(0.5rem); }
  .activite-suite::after { content: "→"; display: inline-block; margin-left: 0.35rem; transition: transform 0.25s ease; }
  .activite-lien:hover .activite-suite::after { transform: translateX(0.3rem); }

  /* La carte : la case cochée « pulse » une fois, la ligne se colore en douceur */
  .ligne-zone { transition: background-color 0.2s ease; }
  .ligne-zone input { transition: background-color 0.2s ease, transform 0.2s ease; }
  .ligne-zone input:checked { animation: eba-coche 0.35s ease; }
  @keyframes eba-coche {
    0% { transform: scale(0.7); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
  }

  /* Questions fréquentes : la réponse apparaît en douceur, la flèche pivote */
  .faq-item summary::after { transition: transform 0.25s ease; }
  .faq-item[open] .faq-reponse { animation: eba-monte 0.35s ease both; }

  /* Bandeau d'annonce : descend à l'ouverture de la page */
  .annonce { animation: eba-annonce 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes eba-annonce { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

  /* Carte : la flèche des catégories « appelle » le geste à la première visite */
  .sommaire-fleche.indice { animation: eba-indice 0.9s ease-in-out 3; }
  @keyframes eba-indice {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(0.3rem); }
  }

  /* Barre de sélection : glisse depuis le bas */
  .selection:not([hidden]) { animation: eba-barre 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes eba-barre { from { transform: translateY(100%); } to { transform: none; } }

  /* Photo du salon : très léger zoom au survol */
  .hero-photo img { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.8s ease; }
  .hero-photo:hover img { transform: scale(1.015); box-shadow: 0 30px 50px -20px rgba(88, 52, 46, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Petites classes utilitaires (remplacent les styles en ligne) ---------- */
.u-mb-2 { margin-bottom: 2rem !important; }
.u-pt-0 { padding-top: 0 !important; }
.u-mt-075 { margin-top: 0.75rem !important; }
.u-mt-0 { margin-top: 0 !important; }