/* ================================================================
   V3 — styles propres a la page d'accueil (introduction aux bulles,
   hero, cartes de service, section humaine).
   WHY: extrait du bloc <style> en ligne de la page d'accueil. La CSP de
   production impose `style-src-elem 'self'` : un <style> inline est bloque,
   et la page serait publiee sans aucun de ces styles.
   Context: audit 2026-08-28 (Lea)
   ================================================================ */
/* WHY: le premier ecran se FIGE pendant que le defilement joue l'animation.
   La section fournit une piste de defilement (250vh) ; la scene, collante,
   reste plein ecran. Le geste pilote donc les bulles avant de faire monter
   la page — le texte reste lisible tout du long, puis s'eleve.
   Context: demande Sebastien 2026-08-28 */
/* 175svh et non 250 : Sebastien trouvait le geste trop long — trop de
   defilement mort avant que le texte ne bouge. */
.intro-bulles{position:relative;height:175svh;}
.intro-bulles__scene{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;}
/* WHY: z-index 3 — le nom, le slogan et l'appel a l'action passent DEVANT
   les bulles. Elles restent visibles tout autour et derriere, sans jamais
   traverser un mot. Context: demande Sebastien 2026-08-28 */
.intro-bulles__texte{position:relative;top:4.5vh;z-index:3;max-width:44rem;padding:0 1.8rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  animation:intro-texte 1.1s .25s both;}
.intro-bulles__texte p{margin:0;}
.intro-bulles__nom{font-family:var(--font-serif);font-size:clamp(1.15rem,2.2vw,1.45rem);
  color:var(--text-dark);letter-spacing:.015em;}
.intro-bulles__phrase{position:relative;z-index:5;margin-top:0;font-family:var(--font-serif);font-weight:600;
  font-size:clamp(2.1rem,4.8vw,3.5rem);line-height:1.28;color:var(--text-dark);letter-spacing:-.005em;
  text-wrap:balance;}
.intro-bulles__phrase span{display:block;}
.intro-bulles__phrase .ligne-2{font-style:italic;}
.intro-bulles__ligne{margin-top:2.1rem;font-size:clamp(1.02rem,1.9vw,1.16rem);line-height:1.8;
  color:#3E3648;max-width:28rem;}
.intro-bulles__cta{margin-top:7.5rem;display:inline-flex;flex-direction:column;align-items:center;gap:.45rem;
  text-decoration:none;transition:gap .25s var(--v2-ease);}
.intro-bulles__cta:hover{gap:.7rem;}
.intro-bulles__cta-1{font-size:.52rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:#9A93A3;}
/* Le nom en bas de casse et en gris pale : present, jamais insistant. */
.intro-bulles__cta-2{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:500;
  letter-spacing:.02em;color:#8B8494;font-family:var(--font-serif);}
.intro-bulles__cta-2 svg{width:12px;height:12px;}
.intro-bulles__cta:hover .intro-bulles__cta-2{color:#6E6678;}
@keyframes intro-texte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.intro-bulles__champ{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s var(--v2-ease);}
.intro-bulles__champ--arriere{z-index:1;}
/* WHY: quelques bulles passent DEVANT — tres translucides, elles effleurent
   le nom et l'appel a l'action mais jamais le slogan (z-index 5).
   Context: demande Sebastien 2026-08-28 */
.intro-bulles__champ--avant{z-index:4;}
.intro-bulles__champ--avant .bulle{opacity:.4;}
.intro-bulles__champ.nee{opacity:1;}
/* Trois couches par bulle : la position (repoussee par la souris, JS),
   la derive (translation lente, CSS), la rotation sur elle-meme (CSS).
   Chaque couche a son transform : aucune ne se bat avec les autres. */
.bulle-pos{position:absolute;will-change:transform;}
.bulle-derive{width:100%;height:100%;}
.bulle{display:block;width:100%;mix-blend-mode:multiply;opacity:.93;}
.rot-h-lent{animation:tourne-h 74s linear infinite;}
.rot-a-lent{animation:tourne-a 88s linear infinite;}
.rot-h-vif{animation:tourne-h 46s linear infinite;}
.rot-a-vif{animation:tourne-a 52s linear infinite;}
.rot-h-flip{animation:tourne-h-flip 58s linear infinite;}
.rot-a-flip{animation:tourne-a-flip 66s linear infinite;}
@keyframes tourne-h{to{transform:rotate(360deg)}}
@keyframes tourne-a{to{transform:rotate(-360deg)}}
@keyframes tourne-h-flip{from{transform:scaleX(-1) rotate(0)}to{transform:scaleX(-1) rotate(360deg)}}
@keyframes tourne-a-flip{from{transform:scaleX(-1) rotate(0)}to{transform:scaleX(-1) rotate(-360deg)}}
.ombre{position:absolute;background:radial-gradient(ellipse at center,rgba(62,54,72,.16),transparent 68%);
  filter:blur(5px);border-radius:50%;}
.bulle-pos--7{width:clamp(70px,9vw,104px);top:19%;right:28%;}
.bulle-pos--8{width:clamp(112px,16vw,168px);bottom:6%;right:14%;}
.bulle-pos--1{width:clamp(190px,32vw,320px);top:4%;left:-6%;}
.bulle-derive--7{animation:derive-3 7.5s ease-in-out -2s infinite alternate;}
.bulle-derive--8{animation:derive-5 10s ease-in-out -8s infinite alternate;}
.bulle-derive--1{animation:derive-1 10.5s ease-in-out -6s infinite alternate;}
.bulle-pos--2{width:clamp(105px,15vw,160px);top:27%;right:3%;}
.bulle-derive--2{animation:derive-2 8.5s ease-in-out -3s infinite alternate;}
.bulle-pos--3{width:clamp(76px,10vw,112px);top:12%;left:24%;}
.bulle-derive--3{animation:derive-3 7s ease-in-out -9s infinite alternate;}
.bulle-pos--4{width:clamp(160px,25vw,250px);bottom:3%;right:6%;}
.bulle-derive--4{animation:derive-4 12s ease-in-out -12s infinite alternate;}
.bulle-pos--5{width:clamp(88px,12vw,124px);top:41%;left:44%;}
.bulle-derive--5{animation:derive-5 8s ease-in-out -5s infinite alternate;}
.bulle-pos--6{width:clamp(120px,18vw,186px);bottom:24%;left:-7%;}
.bulle-derive--6{animation:derive-6 9.5s ease-in-out -14s infinite alternate;}
@keyframes derive-1{from{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(46px,30px,0) scale(1.06)}to{transform:translate3d(-18px,54px,0) scale(.97)}}
@keyframes derive-2{from{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-38px,26px,0) scale(.94)}to{transform:translate3d(24px,-30px,0) scale(1.05)}}
@keyframes derive-3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(30px,-38px,0) scale(1.12)}}
@keyframes derive-4{from{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-44px,-30px,0) scale(1.07)}to{transform:translate3d(20px,-56px,0) scale(.95)}}
@keyframes derive-5{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(36px,24px,0) scale(1.08)}}
@keyframes derive-6{from{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(28px,40px,0) scale(.94)}to{transform:translate3d(-34px,12px,0) scale(1.05)}}
.ombre--1{width:clamp(160px,28vw,270px);height:clamp(30px,5vw,50px);bottom:5%;left:2%;animation:ombre-1 21s ease-in-out -6s infinite alternate;}
.ombre--4{width:clamp(140px,21vw,210px);height:clamp(26px,4vw,40px);bottom:3.5%;right:-1%;animation:ombre-4 24s ease-in-out -12s infinite alternate;}
.ombre--6{width:clamp(100px,15vw,160px);height:clamp(20px,3vw,32px);bottom:4.5%;right:24%;animation:ombre-6 19s ease-in-out -14s infinite alternate;}
@keyframes ombre-1{from{transform:translateX(0) scale(1);opacity:.9}50%{transform:translateX(46px) scale(1.08)}to{transform:translateX(-18px) scale(.94);opacity:.7}}
@keyframes ombre-4{from{transform:translateX(0) scale(1);opacity:.85}50%{transform:translateX(-44px) scale(1.1)}to{transform:translateX(20px) scale(.9);opacity:.65}}
@keyframes ombre-6{from{transform:translateX(0) scale(1);opacity:.8}50%{transform:translateX(28px) scale(.92)}to{transform:translateX(-34px) scale(1.06);opacity:.65}}
/* Bouton flottant bas droite + son menu (memes cartes que le popup) */
@media (prefers-reduced-motion:reduce){
  .bulle,.ombre,.bulle-derive{animation:none}
  .intro-bulles__texte{animation:none}
}
/* --- HERO : ornements remplaces par des bulles fixes, plus discretes --- */
/* WHY: la branche de feuillage et l'etoile alourdissaient le hero ; le blob
   lavande plein coupait net. On garde la meme famille visuelle que l'intro.
   Context: demande Sebastien 2026-08-28 */
.v2-hero__media::before{display:none;}
/* WHY: une seule bulle signature pres du portrait — posee en bas a gauche,
   un peu DEVANT l'image, avec sa petite ombre au sol. Une seule suffit :
   c'est un bijou, pas un motif. Context: demande Sebastien 2026-08-28 */
.hero-bulles{position:absolute;inset:-8% -12%;z-index:2;pointer-events:none;}
/* WHY: la bulle du portrait n'est pas la d'emblee — elle entre par la
   gauche, petite, grandit et vient se poser a sa place quand le portrait
   arrive a l'ecran. Puis elle reste accrochee.
   Context: demande Sebastien 2026-08-28 */
.hero-bulle--une{position:absolute;width:36%;left:-3%;bottom:1%;
  mix-blend-mode:multiply;opacity:0;
  transform:translate(-64px,18px) rotate(-6deg) scale(.42);
  transition:opacity 1.1s var(--v2-ease),transform 1.25s cubic-bezier(.19,.86,.3,1);}
.hero-bulle-ombre{position:absolute;left:0;bottom:-2.5%;width:28%;height:6%;
  background:radial-gradient(ellipse at center,rgba(62,54,72,.22),transparent 66%);
  filter:blur(5px);border-radius:50%;opacity:0;
  transition:opacity 1.1s .25s var(--v2-ease);}
.hero-bulles.posee .hero-bulle--une{opacity:.9;transform:translate(0,0) rotate(10deg) scale(1);}
.hero-bulles.posee .hero-bulle-ombre{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .hero-bulle--une,.hero-bulle-ombre{transition:none;}
  .hero-bulle--une{opacity:.9;transform:rotate(10deg);}
  .hero-bulle-ombre{opacity:1;}
}
/* Forme du portrait plus irreguliere, et son bord gauche se fond dans l'ivoire */
.v2-hero__blob{
  border-radius:62% 38% 47% 53% / 45% 63% 37% 55%;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 34%);
  mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 34%);
}
/* WHY: la bande des trois reperes est retiree — ses trois textes existaient
   deja ailleurs, presque mot pour mot (voir le message de session). Les
   portes reprennent l'air qu'elle occupait avant la section humaine.
   Context: demande Sebastien 2026-08-28 */
.v2-portes{padding-bottom:6rem;}
/* --- SECTION HUMAINE : badge sur la photo, bord fondu, globe glissant --- */
.v2-humaine__media{position:relative;}
/* WHY: la photo fond dans l'ivoire sur son pourtour, comme le portrait du
   haut de page — plus de bord net. Context: demande Sebastien 2026-08-28 */
.v2-humaine__media > img:first-of-type{
  -webkit-mask-image:radial-gradient(115% 115% at 50% 45%,#000 52%,rgba(0,0,0,.4) 76%,transparent 97%);
  mask-image:radial-gradient(115% 115% at 50% 45%,#000 52%,rgba(0,0,0,.4) 76%,transparent 97%);
}
/* Le globe arrive en glissant quand la section entre a l'ecran, puis reste. */


@media (prefers-reduced-motion:reduce){
  .humaine-globe{transition:none;opacity:1;transform:none;}
}
/* --- CARTES DE SERVICE : visuel plein cadre, carte depliable --- */
/* WHY: la carte fermee est dense — grand embleme, titre, un tag, une rangee
   « Decouvrir ». Un clic N'IMPORTE OU l'ouvre : le detail (liste des
   services) apparait avec deux choix, la page complete ou le rendez-vous.
   Le visage est volontairement COUPE par le cadre ; la dent reste entiere.
   Context: maquette Sebastien 2026-08-28 */
/* WHY: le verre ne vient pas d'un flou d'arriere-plan — il n'y a rien a
   flouter derriere un fond plat. Il vient d'une bordure en degrade, de deux
   filets de lumiere internes et d'un balayage speculaire en diagonale.
   Context: demande Sebastien + audit Lea 2026-08-28 */
.carte-soin{position:relative;border:1px solid transparent;border-radius:26px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,253,249,.92),rgba(248,242,233,.82)) padding-box,
    linear-gradient(140deg,rgba(255,255,255,.95),rgba(184,151,90,.42) 38%,rgba(255,255,255,.85) 62%,rgba(184,151,90,.28)) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(255,255,255,.45) inset,
    0 18px 48px rgba(45,34,53,.07);
  transition:box-shadow .3s var(--v2-ease),transform .3s var(--v2-ease);}
.carte-soin::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(128deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.10) 26%,rgba(255,255,255,0) 46%);}
.carte-soin--esth{
  background:linear-gradient(165deg,rgba(246,243,250,.94),rgba(236,230,243,.86)) padding-box,
    linear-gradient(140deg,rgba(255,255,255,.95),rgba(139,108,174,.42) 38%,rgba(255,255,255,.85) 62%,rgba(139,108,174,.28)) border-box;}
.carte-soin:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -1px 0 rgba(255,255,255,.5) inset,
    0 26px 60px rgba(45,34,53,.11);}
.carte-soin__tete{display:block;width:100%;position:relative;min-height:300px;padding:0;overflow:hidden;
  background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;color:inherit;}
.carte-soin__visuel{position:absolute;pointer-events:none;}
/* WHY: visage en miroir — les cheveux touchent le bord de la carte, le profil
   regarde vers l'interieur. Si un ecran etroit rogne le visuel, c'est la
   chevelure qui est coupee, jamais le nez. Context: Sebastien 2026-08-28 */
/* WHY: DECISIONS.md 2026-04-09 exige un poids visuel STRICTEMENT egal entre
   les deux portes. Le visage est une illustration figurative detaillee, la
   dent un objet abstrait : a surface egale le visage pese plus lourd. On
   equilibre par la surface (48 % -> 44 %) et par l'ombre, que seule la dent
   portait. Context: audit Lea 2026-08-28 */
.carte-soin--esth .carte-soin__visuel{top:0;right:-5%;width:44%;transform:scaleX(-1);
  filter:drop-shadow(0 14px 26px rgba(62,54,72,.13));}
.carte-soin--dent .carte-soin__visuel{top:6%;right:4%;width:52%;filter:drop-shadow(0 14px 26px rgba(62,54,72,.14));}
.carte-soin__titrage{position:relative;display:block;padding:2.4rem 46% 0 2.2rem;}
.carte-soin__titrage h2{margin:0;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;}
.carte-soin__tag{display:block;margin-top:.8rem;font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--v2-gold-text);}
.carte-soin--esth .carte-soin__tag{color:#6B4E8E;}
/* WHY: le voile descendait vers un blanc plus clair que la carte elle-meme
   (#F8F2E9), ce qui dessinait une bande pale en travers du bas. Il faut la
   couleur REELLE du bas de carte. Context: audit Lea 2026-08-28 */
.carte-soin__tete::after{content:'';position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(180deg,rgba(248,242,233,0),#F8F2E9 82%);pointer-events:none;}
.carte-soin--esth .carte-soin__tete::after{background:linear-gradient(180deg,rgba(236,230,243,0),#ECE6F3 82%);}
.carte-soin__pied{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;
  justify-content:space-between;padding:1rem 2.2rem;border-top:1px solid rgba(184,151,90,.18);
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dark);}
.carte-soin__pied svg{width:16px;height:16px;transition:transform .3s var(--v2-ease);}
.carte-soin__tete[aria-expanded="true"] .carte-soin__pied svg{transform:rotate(180deg);}
/* Ouverture douce : la rangee de grille passe de 0fr a 1fr */
.carte-soin__plus{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--v2-ease);}
.carte-soin.ouverte .carte-soin__plus{grid-template-rows:1fr;}
.carte-soin__plus-inner{overflow:hidden;padding:0 2.2rem;display:flex;flex-direction:column;gap:.9rem;}
.carte-soin.ouverte .carte-soin__plus-inner{padding:1.4rem 2.2rem 1.8rem;}
.carte-soin__actions{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin-top:.9rem;}
/* La liste des services garde le style des anciennes cartes */
.carte-soin__plus-inner ul{list-style:none;margin:.1rem 0 .3rem;padding:0;
  display:flex;flex-direction:column;gap:.38rem;}
.carte-soin__plus-inner li{display:flex;align-items:center;gap:.6rem;
  font-size:.85rem;color:var(--text-body);}
.carte-soin__plus-inner li svg{width:15px;height:15px;flex-shrink:0;color:var(--gold);}
.carte-soin--esth .carte-soin__plus-inner li svg{color:#8B6CAE;}
@media (max-width:640px){
  .carte-soin__tete{min-height:250px;}
  .carte-soin--esth .carte-soin__visuel{top:0;right:-10%;width:55%;transform:scaleX(-1);}
  .carte-soin--dent .carte-soin__visuel{top:8%;right:-2%;width:60%;}
  .carte-soin__titrage{padding:1.9rem 48% 0 1.5rem;}
  .carte-soin__pied,.carte-soin__plus-inner{padding-left:1.5rem;padding-right:1.5rem;}
}
/* Boutons « verre » des cartes : contour fin, fond translucide */
.v2-btn--verre{background:rgba(255,255,255,.55);color:var(--text-dark);
  border:1px solid rgba(184,151,90,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.v2-btn--verre:hover{background:rgba(255,255,255,.8);transform:translateY(-2px);}
.v2-btn--verre-esth{border-color:rgba(139,108,174,.5);}
/* Titre du hero en une seule couleur — la page est deja assez douce */
.v2-hero__title em{color:inherit;}
/* Section humaine : tag lilas doux, globe pres de l'en-tete, badge en haut de photo */
.v2-humaine__head{position:relative;}
.v2-humaine__head .v2-eyebrow--rose{background:rgba(184,169,204,.24);color:#6B4E8E;}
.v2-humaine__head .humaine-globe{position:absolute;right:4%;top:-18%;width:clamp(96px,12vw,150px);}
@media (max-width:900px){.v2-humaine__head .humaine-globe{right:-2%;top:auto;bottom:-30%;width:88px;}}
.v2-humaine__media .v2-katty__badge{top:5%;bottom:auto;left:6%;}
.humaine-globe{opacity:0;transform:translate(38px,14px) rotate(4deg);
  filter:drop-shadow(0 10px 18px rgba(62,54,72,.18));
  transition:opacity 1s var(--v2-ease),transform 1.25s cubic-bezier(.19,.86,.3,1);}
.v2-humaine.globe-pose .humaine-globe{opacity:1;transform:none;}
/* Invitation en texte du hero de l'accueil */
.hero-invite{margin:0;font-size:.95rem;line-height:1.8;color:var(--text-body);max-width:27rem;}
.hero-invite__lien{display:inline-flex;align-items:center;gap:.45rem;margin-left:.15rem;
  padding:0;background:none;border:none;cursor:pointer;font-family:var(--font-sans);
  font-size:.8rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--v2-gold-text);transition:gap .25s var(--v2-ease);}
.hero-invite__lien:hover{gap:.75rem;}
.hero-invite__lien svg{width:15px;height:15px;}
/* --- SECTION HUMAINE : editoriale, sans cadre ni pastille --- */
.humaine-ligne{margin:-.35rem 0 .3rem!important;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}
.v2-humaine__text{gap:1.05rem;}
/* Le declencheur : trois points, rien d'autre */
.humaine-suite{display:flex;flex-direction:column;align-items:flex-start;width:100%;}
.humaine-points{display:inline-flex;align-items:center;gap:.38rem;margin-top:.4rem;
  padding:.5rem .1rem;background:none;border:none;cursor:pointer;}
.humaine-points span{width:5px;height:5px;border-radius:50%;background:var(--v2-gold-text);
  opacity:.55;transition:opacity .3s var(--v2-ease),transform .3s var(--v2-ease);}
.humaine-points:hover span{opacity:1;}
.humaine-points:hover span:nth-child(2){transform:translateY(-2px);}
.humaine-points[aria-expanded="true"] span{opacity:.3;transform:scale(.8);}
/* La suite se deplie dans la continuite du texte : hauteur + opacite */
.humaine-suite__contenu{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .55s var(--v2-ease),opacity .45s var(--v2-ease);}
.humaine-suite__contenu[hidden]{display:grid;}
.humaine-suite__contenu.ouverte{grid-template-rows:1fr;opacity:1;}
.humaine-suite__contenu > *{overflow:hidden;}
.humaine-suite__contenu p{margin:0 0 1.05rem;line-height:1.85;color:var(--text-body);}
.humaine-suite__contenu.ouverte{padding-top:.5rem;}
.humaine-invite{color:var(--text-dark)!important;}
.humaine-cta{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.4rem;
  padding:0;background:none;border:none;cursor:pointer;font-family:var(--font-sans);
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v2-gold-text);transition:gap .25s var(--v2-ease);}
.humaine-cta:hover{gap:.8rem;}
.humaine-cta svg{width:14px;height:14px;}
/* Le globe accompagne le titre au lieu d'y etre colle */
.v2-humaine__head .humaine-globe{right:1%;top:-6%;width:clamp(84px,10vw,124px);opacity:.92;}
@media (max-width:900px){.v2-humaine__head .humaine-globe{right:2%;top:-14%;width:78px;}}
/* Un filet mauve delimite la carte de Dre Katty, sans barrer l'ecran */
.humaine-filet{width:min(70%,760px);height:1px;margin:2.6rem auto 3rem;border:none;
  background:linear-gradient(90deg,transparent,rgba(139,108,174,.55),transparent);}