/* Le Salon d'Océane — d'après la charte de l'affiche (img/references/affiche-rendez-vous.jpg) :
   papier crème, rose poudré en coups de pinceau, brun rosé pour les icônes, script + serif fin. */

@font-face { font-family: "Parisienne"; src: url("fonts/parisienne.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --encre: #2b2422;
  --texte: #3d3532;
  --gris: #7c706b;
  --papier: #f7f0ea;
  --papier-fonce: #f1e6df;
  --rose: #ecd3cf;
  --rose-clair: #f3e1dd;
  --brun-rose: #b48479;
  --brun-rose-fonce: #96665b;
  --script: "Parisienne", cursive;
  --serif: "Cormorant", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --max: 66rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--texte);
  background: var(--papier);
  background-image: radial-gradient(ellipse at 20% 0%, #fbf6f2 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, var(--papier-fonce) 0%, transparent 50%);
  line-height: 1.65;
  overflow-x: clip;
  position: relative;
}

a { color: var(--brun-rose-fonce); }
strong { font-weight: 600; color: var(--encre); }

.preprod {
  margin: 0;
  padding: .45rem 1rem;
  background: var(--encre);
  color: #f3e6e0;
  font-size: .8rem;
  text-align: center;
}

/* ---------- Ornements (feuillages et cœurs au trait) ---------- */
.ornement {
  position: absolute;
  width: 7rem;
  fill: none;
  stroke: var(--brun-rose);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
  pointer-events: none;
}
.ornement .coeur { stroke-width: 3; }
.ornement--haut-gauche { top: 3.5rem; left: 0; }
.ornement--haut-droit { top: 4.5rem; right: 1.5rem; width: 3.5rem; transform: rotate(14deg); }
.ornement--bas-droit { bottom: 1rem; right: 0; }
.ornement--bas-gauche { bottom: 4rem; left: 1.5rem; width: 3.5rem; transform: rotate(-16deg); }

/* ---------- Coup de pinceau rose derrière les titres ---------- */
.trait {
  position: relative;
  display: inline-block;
  padding: .05em .35em;
  z-index: 0;
}
.trait::before {
  content: "";
  position: absolute;
  inset: 18% -4% 8% -3%;
  background: var(--rose);
  border-radius: 46% 54% 50% 48% / 60% 42% 58% 40%;
  transform: rotate(-1.2deg);
  z-index: -1;
}

/* ---------- En-tête et marque ---------- */
.entete {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1rem 1rem;
  text-align: center;
}

.marque { display: inline-block; text-decoration: none; color: var(--encre); }
.marque__nom { display: block; line-height: 1; }
.marque__serif { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.4rem); letter-spacing: .01em; }
.marque__script { font-family: var(--script); font-size: clamp(2.8rem, 8vw, 4.6rem); color: var(--encre); margin-left: .05em; }
.marque__coeur { display: block; margin: .15rem 0 .1rem; font-size: .9rem; color: var(--encre); }
.marque__sous {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--texte);
  padding: 0 .6rem;
  position: relative;
}
.marque__sous i { font-style: normal; margin: 0 .3em; }
.marque__sous::before, .marque__sous::after {
  content: ""; position: absolute; top: 50%; width: 2rem; height: 1px; background: var(--encre);
}
.marque__sous::before { right: 100%; }
.marque__sous::after { left: 100%; }

/* ---------- Barre de navigation fixée ---------- */
.barre {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .55rem 1.25rem;
  background: rgba(247, 240, 234, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rose);
}
.barre__marque { text-decoration: none; color: var(--encre); line-height: 1; white-space: nowrap; }
.barre__marque .marque__serif { font-size: 1.25rem; }
.barre__marque .marque__script { font-size: 1.7rem; }
.barre__nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.barre__nav a { color: var(--encre); text-decoration: none; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.barre__nav a:hover { color: var(--brun-rose-fonce); }
.barre__nav .barre__rdv {
  font-family: var(--sans); font-size: .85rem; font-weight: 500;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--brun-rose); color: #fff;
}
.barre__nav .barre__rdv:hover { background: var(--brun-rose-fonce); color: #fff; }
.barre__bouton {
  display: none; margin-left: auto;
  width: 2.6rem; height: 2.6rem; padding: .55rem;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.barre__bouton span:not(.visuellement-cache) { display: block; height: 2px; background: var(--encre); border-radius: 2px; transition: transform .25s, opacity .25s; }
.barre__bouton[aria-expanded="true"] span:nth-child(1) { transform: translateY(.55rem) rotate(45deg); }
.barre__bouton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.barre__bouton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.55rem) rotate(-45deg); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  background: var(--brun-rose);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  box-shadow: 0 6px 18px -8px rgba(150, 102, 91, .6);
}
.bouton:hover { background: var(--brun-rose-fonce); }
.bouton--clair { background: transparent; color: var(--brun-rose-fonce); border: 1.5px solid var(--brun-rose); box-shadow: none; }
.bouton--clair:hover { background: var(--rose-clair); }
.bouton__icone { font-size: 1.1em; }
.lien { font-weight: 500; }
[data-statut="ouvert"] { color: #3d7a4c; }
[data-statut="ferme"] { color: var(--gris); }

/* ---------- Accueil ---------- */
.accueil {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem 1rem 2rem;
  text-align: center;
}
.accueil__titre {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 4.8rem);
  line-height: 1.15;
  color: var(--encre);
}
.accueil__sous {
  margin: .4rem 0 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--texte);
}
.accueil__texte { max-width: 38rem; margin: 0 auto 1rem; font-size: 1.05rem; }
.accueil__preuve { margin: 0 0 1.6rem; font-size: .95rem; color: var(--texte); }
.etoiles { color: var(--brun-rose); letter-spacing: .1em; margin-right: .3rem; }
.accueil__actions { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 0 0 2.5rem; }
.accueil__portrait { margin: 0 auto; width: min(22rem, 100%); }
.accueil__portrait img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border-radius: 1rem; box-shadow: 0 18px 36px -22px rgba(43, 36, 34, .6); }
.accueil__portrait figcaption { margin-top: .6rem; font-family: var(--serif); font-style: italic; color: var(--gris); }
.galerie img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .9rem; }
.citation { margin: 1.5rem 0 2rem; padding: 1.4rem 1.6rem; max-width: 44rem; background: var(--rose-clair); border-radius: 1.2rem 2rem 1.4rem 2.2rem / 2rem 1.2rem 2.2rem 1.3rem; }
.citation p { margin: 0 0 .6rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; }
.citation footer { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brun-rose-fonce); }
.pied__logo { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; }
.accueil__photo {
  aspect-ratio: 16 / 7;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--rose-clair), var(--rose));
  color: var(--brun-rose-fonce);
  border-radius: 1rem;
  font-family: var(--serif); font-style: italic; font-size: 1.2rem;
}

/* ---------- Sections ---------- */
.bloc { max-width: var(--max); margin: 0 auto; padding: 3rem 1rem; }
.bloc h2 {
  margin: 0 0 .6rem;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  line-height: 1.2;
  color: var(--encre);
}
.bloc h1 { margin: 0 0 1rem; font-family: var(--script); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--encre); }
.bloc .sous { font-family: var(--serif); font-size: 1.5rem; margin: 1.8rem 0 .4rem; }
.bloc h3 {
  margin: 0 0 .6rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: .02em;
  display: flex; align-items: center; gap: .6rem;
}
.puce {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--brun-rose); color: #fff;
  font-family: var(--sans); font-size: .95rem;
}
.bloc__note { color: var(--gris); font-size: .9rem; margin: 0 0 1.5rem; }
.bloc__texte { max-width: 40rem; }

.colonnes--trois { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem 3rem; align-items: start; }
.carte { padding: 1.4rem 1.5rem; background: #fcf8f5; border-radius: 1rem; box-shadow: 0 10px 30px -22px rgba(43, 36, 34, .5); }

table { border-collapse: collapse; width: 100%; }
th, td { padding: .55rem 0; border-bottom: 1px dashed var(--rose); text-align: left; vertical-align: top; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
th { font-weight: 400; }
.liste { margin: 0; padding: 0; list-style: none; }
.liste li { padding: .45rem 0; border-bottom: 1px dashed var(--rose); }
.liste li:last-child { border-bottom: 0; }
.liste--repères li strong { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); font-weight: 500; }
.carte--large { margin-top: 1.5rem; }
.carte__texte { margin: 0 0 .6rem; }
.liste--deux { columns: 2; column-gap: 2rem; }
@media (max-width: 40rem) { .liste--deux { columns: 1; } }
.faq { margin: 0; max-width: 44rem; }
.faq__item { padding: 1rem 0; border-bottom: 1px dashed var(--rose); }
.faq dt { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; margin: 0 0 .3rem; }
.faq dd { margin: 0; }
.tarifs th small { display: block; color: var(--gris); font-size: .8rem; }
.tarifs td { text-align: right; white-space: nowrap; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; }
.horaires th { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; width: 7rem; }
tr.aujourdhui th, tr.aujourdhui td { color: var(--brun-rose-fonce); font-weight: 600; }

/* Encart façon affiche : bandeau rose, icône ronde brun rosé */
.encart {
  display: flex; gap: 1rem; align-items: flex-start;
  margin: 2rem 0 0;
  padding: 1.1rem 1.3rem 1.1rem 1rem;
  background: var(--rose-clair);
  border-radius: 1.2rem 2rem 1.4rem 2.2rem / 2rem 1.2rem 2.2rem 1.3rem;
}
.encart p { margin: 0; font-size: .95rem; }
.encart--calme { background: transparent; padding-left: 0; margin-top: 0; }
.encart__icone {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brun-rose); color: #fff; font-weight: 700; font-size: 1.3rem;
}
.encart__icone--trait { background: transparent; color: var(--brun-rose); border: 2px solid var(--brun-rose); font-size: 1.1rem; }

.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.galerie__vide {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  padding: 1rem;
  background: var(--rose-clair);
  color: var(--brun-rose-fonce);
  text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  border-radius: .9rem;
}
.plan { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: .9rem; filter: sepia(.25) saturate(.8); }

address { font-style: normal; }
.contact p { margin: 0 0 1rem; }

/* ---------- Pied ---------- */
.pied { max-width: var(--max); margin: 1rem auto 0; padding: 2.5rem 1rem 4rem; text-align: center; }
.script { font-family: var(--script); font-size: 2.4rem; color: var(--encre); }
.script--petit { font-size: 1.5rem; }
.pied__merci { margin: 0 0 1rem; font-size: 1rem; }
.pied__merci .coeur { color: var(--brun-rose); font-size: 1.3rem; }
.pied__signature { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 0 1rem; }
.filet { width: 3rem; height: 1px; background: var(--encre); }
.pied__legal { margin: 0; color: var(--gris); font-size: .85rem; }

@media (max-width: 48rem) {
  .barre { gap: .5rem; }
  .barre__bouton { display: flex; }
  .barre__nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); border-bottom: 1px solid var(--rose);
    box-shadow: 0 18px 30px -20px rgba(43, 36, 34, .5);
  }
  .barre__nav.ouvert { display: flex; }
  .barre__nav a { padding: .85rem 1.25rem; border-top: 1px dashed var(--rose); font-size: 1.3rem; }
  .barre__nav .barre__rdv { margin: .9rem 1.25rem 1.1rem; text-align: center; border-radius: 999px; }
}
@media (max-width: 40rem) {
  .ornement--haut-gauche, .ornement--bas-droit { width: 4.5rem; opacity: .55; }
  .ornement--haut-droit, .ornement--bas-gauche { display: none; }
  .marque__sous::before, .marque__sous::after { width: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* ============================================================
   Mouvement (html.anime seulement, absent si prefers-reduced-motion)
   ============================================================ */

/* Arrivée : le coup de pinceau se peint, puis le titre et le reste */
html.anime .accueil__titre .trait::before { transform: rotate(-1.2deg) scaleX(0); transform-origin: left center; animation: peindre 1.1s cubic-bezier(.2,.7,.2,1) .2s forwards; }
html.anime .accueil__titre .trait { color: transparent; animation: encrer .6s ease 1s forwards; }
@keyframes encrer { to { color: var(--encre); } }
html.anime .accueil__sous, html.anime .accueil__texte, html.anime .accueil__actions, html.anime .accueil__portrait { opacity: 0; animation: paraitre .8s ease 1.1s forwards; }
html.anime .accueil__portrait { animation-delay: 1.3s; }
@keyframes peindre { to { transform: rotate(-1.2deg) scaleX(1); } }
.accueil__pinceau { position: absolute; top: 60%; left: 0; width: 6rem; height: 2.4rem; opacity: 0; fill: none; stroke: var(--brun-rose-fonce); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: translate(-92%, -78%); rotate: -22deg; z-index: 1; pointer-events: none; }
html.anime .accueil__pinceau { animation: peindre-pinceau 1.1s cubic-bezier(.2,.7,.2,1) .2s forwards; }
@keyframes peindre-pinceau { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 100% { left: 100%; opacity: 1; } }
html.anime .accueil__pinceau { animation: peindre-pinceau 1.1s cubic-bezier(.2,.7,.2,1) .2s forwards, paraitre-inverse .4s ease 1.3s forwards; }
@keyframes paraitre-inverse { to { opacity: 0; } }
@keyframes paraitre { to { opacity: 1; } }

/* Cœur de la marque qui bat, feuillages sous le souffle du sèche-cheveux */
html.anime .marque__coeur { display: block; animation: battre 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes battre { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.25); } 24% { transform: scale(1); } 36% { transform: scale(1.18); } 48% { transform: scale(1); } }
html.anime .ornement--haut-gauche, html.anime .ornement--bas-droit { animation: souffle 5s ease-in-out infinite; transform-origin: 10% 95%; }
html.anime .ornement--bas-droit { transform-origin: 90% 5%; animation-delay: -2.5s; }
html.anime .ornement--haut-droit, html.anime .ornement--bas-gauche { animation: frissonner 4s ease-in-out infinite; }
@keyframes souffle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg) translateX(3px); } }
@keyframes frissonner { 0%, 100% { transform: rotate(14deg) scale(1); } 50% { transform: rotate(10deg) scale(1.06); } }
html.anime .ornement--bas-gauche { animation-name: frissonner-g; }
@keyframes frissonner-g { 0%, 100% { transform: rotate(-16deg) scale(1); } 50% { transform: rotate(-12deg) scale(1.06); } }

/* En tête de chaque section, un outil du salon passe (type choisi par script.js) */
.coupe { position: relative; height: 2.8rem; margin: 0 0 1rem; overflow: clip; }
.coupe__ligne { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--brun-rose); opacity: .55; }
.coupe__trait { position: absolute; left: 0; top: 50%; width: 0; border-top: 2px solid var(--brun-rose); }
.coupe .outil { position: absolute; top: 50%; left: 0; width: 4.6rem; height: 2.3rem; transform: translate(-30%, -50%); opacity: 0; fill: none; stroke: var(--brun-rose-fonce); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.coupe .lame { transform-box: view-box; transform-origin: 30px 16px; }
.coupe .meche { position: absolute; top: 50%; width: 1.1rem; height: 1.6rem; opacity: 0; fill: none; stroke: var(--brun-rose); stroke-width: 2; stroke-linecap: round; }
.coupe .brins { position: absolute; left: 0; top: 50%; width: 100%; height: 1.75rem; transform: translateY(-50%); fill: none; stroke: var(--brun-rose); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.coupe .brins--ondules { clip-path: inset(0 0 0 0); }
.coupe .brins--droits { clip-path: inset(0 100% 0 0); }
.coupe__trace { position: absolute; left: 0; top: 50%; height: .8rem; width: 0; transform: translateY(-50%) rotate(-.4deg); background: var(--rose); border-radius: 46% 54% 50% 48% / 60% 42% 58% 40%; }
.coupe--seche .outil { width: 4.2rem; height: 2.6rem; transform: translate(0, -50%); }
.coupe--seche .air { opacity: 0; }

/* Ciseaux : la ligne pointillée devient pleine, les mèches tombent */
html.anime .bloc--ciseaux.vu .coupe__trait { animation: couper 1.6s linear forwards; }
html.anime .bloc--ciseaux.vu .outil { animation: glisser 1.6s linear forwards; }
html.anime .bloc--ciseaux.vu .lame--a { animation: claquer-a .32s ease-in-out 5; }
html.anime .bloc--ciseaux.vu .lame--b { animation: claquer-b .32s ease-in-out 5; }
html.anime .bloc--ciseaux.vu .meche { animation: tomber 1.4s ease-in forwards; }
@keyframes couper { to { width: 100%; } }
@keyframes glisser { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes claquer-a { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(0deg); } }
@keyframes claquer-b { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(0deg); } }
@keyframes tomber { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: .9; } 100% { opacity: 0; transform: translateY(5rem) rotate(40deg); } }

/* Peigne, fer à lisser, tondeuse : derrière l'outil, les mèches sont démêlées, lissées ou rasées */
html.anime .bloc--peigne.vu .outil, html.anime .bloc--lisseur.vu .outil, html.anime .bloc--tondeuse.vu .outil { animation: glisser 1.8s linear forwards; }
html.anime .bloc--peigne.vu .brins--droits, html.anime .bloc--lisseur.vu .brins--droits, html.anime .bloc--tondeuse.vu .brins--droits { animation: reveler 1.8s linear forwards; }
html.anime .bloc--peigne.vu .brins--ondules, html.anime .bloc--lisseur.vu .brins--ondules, html.anime .bloc--tondeuse.vu .brins--ondules { animation: effacer 1.8s linear forwards; }
.coupe--tondeuse .brins { stroke-width: 1.3; }
.coupe--tondeuse .outil { width: 5.6rem; height: 2.5rem; transform: translate(-30%, -56%); }
.coupe--peigne .outil { width: 5.6rem; height: 2.8rem; rotate: -12deg; transform: translate(-35%, -58%); }
.coupe--lisseur .outil { width: 6rem; height: 2.7rem; transform: translate(-25%, -50%); }
.coupe--pinceau .outil { width: 5.6rem; height: 2.2rem; rotate: -16deg; transform: translate(-25%, -78%); }
.coupe--ciseaux .outil { width: 5rem; height: 2.5rem; }
html.anime .bloc--tondeuse.vu .outil { animation-name: glisser-tondeuse; }
@keyframes glisser-tondeuse { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } 10%, 30%, 50%, 70%, 90% { transform: translate(-30%, -57%); } 20%, 40%, 60%, 80% { transform: translate(-30%, -55%); } }
html.anime .bloc--peigne.vu .outil { animation-name: glisser-peigne; }
@keyframes reveler { to { clip-path: inset(0 0 0 0); } }
@keyframes effacer { to { clip-path: inset(0 0 0 100%); } }
@keyframes glisser-peigne { 0% { left: 0; opacity: 0; transform: translate(-35%, -58%); } 6% { opacity: 1; } 25%, 75% { transform: translate(-35%, -54%); } 50% { transform: translate(-35%, -60%); } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; transform: translate(-35%, -58%); } }

/* Pinceau de coloration : il peint une bande rose */
html.anime .bloc--pinceau.vu .outil { animation: glisser 1.6s linear forwards; }
html.anime .bloc--pinceau.vu .coupe__trace { animation: couper 1.6s linear forwards; }

/* Sèche-cheveux : il souffle, le contenu arrive poussé par l'air */
html.anime .bloc--seche.vu .outil { animation: paraitre .4s ease forwards, vibrer .12s linear 12 .3s; }
html.anime .bloc--seche.vu .air { animation: souffler .5s ease-out 4 .3s; }
@keyframes vibrer { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(1px, -52%); } }
@keyframes souffler { 0% { opacity: 0; transform: translateX(-4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(10px); } }
html.anime .bloc--seche.vu > :not(.coupe) { animation-name: pousser; }
@keyframes pousser { 0% { opacity: 0; transform: translateX(-2.5rem); } 100% { opacity: 1; transform: none; } }

/* Le contenu de la section se déplie une fois coupé */
html.anime .bloc > :not(.coupe) { opacity: 0; transform: translateY(14px); }
html.anime .bloc.vu > :not(.coupe) { animation: deplier .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: .9s; }
html.anime .bloc.vu > :nth-child(3) { animation-delay: 1.05s; }
html.anime .bloc.vu > :nth-child(4) { animation-delay: 1.2s; }
html.anime .bloc.vu > :nth-child(n+5) { animation-delay: 1.35s; }
@keyframes deplier { to { opacity: 1; transform: none; } }
/* Sans script (ou avant qu'il n'ait parlé) : tout visible */
html.anime:not(.pret) .bloc > :not(.coupe) { opacity: 1; transform: none; }

/* Bulles de shampoing derrière les prestations */
.bloc--bulles { position: relative; }
.bulles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bloc--bulles > :not(.bulles) { position: relative; z-index: 1; }
.bulle { position: absolute; bottom: -4rem; border-radius: 50%; border: 1.5px solid var(--brun-rose); opacity: 0; }
.bulle::after { content: ""; position: absolute; top: 18%; left: 22%; width: 22%; height: 14%; border-radius: 50%; background: #fff; opacity: .8; }
html.anime .bulle { animation: monter linear infinite; }
@keyframes monter { 0% { transform: translateY(0) translateX(0); opacity: 0; } 8% { opacity: .5; } 50% { transform: translateY(-50vh) translateX(1.2rem); } 92% { opacity: .35; } 100% { transform: translateY(-110vh) translateX(-.6rem); opacity: 0; } }