html.po-guard-pending body{ visibility:hidden; }
/* =========================================================
   PIERRE-OLIVIER — SACRED CRYSTAL
   Tokens
   Bg      #0A0A0A
   Gold    #C9A54B
   Violet  #40235A
   Blue    #3E6FFF
   Green   #1FA56A
========================================================= */

:root{
  --bg:        #0A0A0A;
  --bg-soft:   #100c14;
  --gold:      #C9A54B;
  --gold-soft: #e3c98a;
  --violet:    #40235A;
  --violet-lt: #6b3f8f;
  --blue:      #3E6FFF;
  --green:     #1FA56A;
  --ink:       #f3eee6;
  --ink-dim:   #b9b0c2;

  /* Valeurs de repli : les pages de service redéfinissent --accent/--accent-soft
     via body[data-accent="terre|feu|ether"]. Sans repli ici, tout .btn--accent
     utilisé sur une page qui ne définit pas data-accent (ex. la page d'accueil)
     se retrouve avec une couleur invalide — bouton invisible (fond transparent,
     texte presque noir sur fond sombre). */
  --accent:      var(--gold);
  --accent-soft: var(--gold-soft);

  --serif:  'Cinzel', serif;
  --garamond: 'Cormorant Garamond', serif;
  --sans:   'Jost', sans-serif;

  --radius: 18px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.link-btn{ color:var(--accent,#7a5cff); text-decoration:underline; padding:0; }
.link-btn:hover{ opacity:.8; }

::selection{ background:var(--gold); color:#1a1a1a; }

:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------------------------------------------------
   THRESHOLD MODAL
--------------------------------------------------------- */
.threshold{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  visibility:visible;
}
.threshold[data-closed="true"]{
  visibility:hidden;
  pointer-events:none;
}
.threshold__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(64,35,90,.55), transparent 60%),
    var(--bg);
  backdrop-filter:blur(2px);
  opacity:0;
  animation:veilIn 1.1s var(--ease) forwards;
}
@keyframes veilIn{ to{ opacity:1; } }

.threshold__panel{
  position:relative;
  z-index:1;
  max-width:480px;
  width:100%;
  padding:48px 38px 40px;
  text-align:center;
  background:linear-gradient(155deg, rgba(64,35,90,.32), rgba(10,10,10,.55));
  border:1px solid rgba(201,165,75,.35);
  border-radius:24px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter:blur(18px) saturate(140%);
  opacity:0;
  transform:translateY(24px) scale(.97);
  animation:panelIn 1s .25s var(--ease) forwards;
}
@keyframes panelIn{ to{ opacity:1; transform:translateY(0) scale(1); } }

.threshold__sigil{ display:flex; justify-content:center; margin-bottom:18px; }
.sigil-svg{ width:84px; height:84px; }
.sigil-ring{ fill:none; stroke:var(--gold); stroke-width:.6; opacity:.55; }
.sigil-ring--outer{ animation:spin 40s linear infinite; transform-origin:50px 50px; }
.sigil-ring--inner{ animation:spin 30s linear infinite reverse; transform-origin:50px 50px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.sigil-tri{ fill:none; stroke:var(--gold-soft); stroke-width:.7; opacity:.85; }
.sigil-core{ fill:var(--gold-soft); filter:drop-shadow(0 0 6px var(--gold)); }

.threshold__eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-soft);
  opacity:.8;
  margin-bottom:6px;
}
.threshold__title{
  font-family:var(--serif);
  font-size:2rem;
  letter-spacing:.06em;
  color:var(--ink);
  margin-bottom:18px;
}
.threshold__text{
  font-family:var(--garamond);
  font-size:1.12rem;
  line-height:1.6;
  color:#ffffff;
  font-weight:600;
  margin-bottom:28px;
}

.threshold__check{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  font-size:.88rem;
  color:#ffffff;
  font-weight:600;
  margin-bottom:26px;
  cursor:pointer;
  user-select:none;
}
.threshold__check input{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}
.threshold__check-box{
  width:20px; height:20px;
  border:1px solid rgba(201,165,75,.5);
  border-radius:5px;
  display:inline-block;
  position:relative;
  flex-shrink:0;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.threshold__check-box::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(45deg, transparent 42%, var(--bg) 42%, var(--bg) 46%, transparent 46%),
    linear-gradient(-45deg, transparent 55%, var(--bg) 55%, var(--bg) 59%, transparent 59%);
  opacity:0;
  transition:opacity .2s;
}
.threshold__check input:checked + .threshold__check-box{
  background:var(--gold);
  border-color:var(--gold);
}
.threshold__check input:checked + .threshold__check-box::after{ opacity:1; }
.threshold__check input:focus-visible + .threshold__check-box{
  outline:2px solid var(--gold-soft);
  outline-offset:2px;
}

.threshold__enter{
  width:100%;
  padding:16px 20px;
  font-family:var(--serif);
  font-size:.86rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bg);
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  border-radius:12px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s;
  box-shadow:0 10px 30px -8px rgba(201,165,75,.45);
}
.threshold__enter:disabled{
  opacity:.35;
  cursor:not-allowed;
  box-shadow:none;
}
.threshold__enter:not(:disabled):hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px -8px rgba(201,165,75,.6);
}

body.threshold-locked{ overflow:hidden; }

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px;
  padding-bottom:18px;
  padding-left:clamp(20px,4vw,56px);
  padding-right:clamp(20px,4vw,56px);
  background:linear-gradient(to bottom, rgba(10,10,10,.96) 0%, rgba(10,10,10,.85) 70%, transparent 100%);
  backdrop-filter:blur(6px);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif);
  font-size:1.05rem;
  letter-spacing:.05em;
}
.brand__mark{ color:var(--gold); font-size:1.1rem; }

.main-nav{
  display:flex; gap:clamp(18px,3vw,38px);
  font-size:.84rem;
  letter-spacing:.03em;
}
.main-nav a{
  position:relative;
  opacity:.85;
  transition:opacity .25s;
  padding:4px 0;
}
.main-nav a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.main-nav a:hover{ opacity:1; }
.main-nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:14px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 22px;
  border-radius:30px;
  font-size:.82rem;
  letter-spacing:.04em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn--ghost{
  border:1px solid rgba(243,238,230,.3);
  color:var(--ink);
}
.btn--ghost:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }
.btn--gold{
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  color:#1a1305;
  font-weight:500;
  box-shadow:0 6px 20px -6px rgba(201,165,75,.5);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -6px rgba(201,165,75,.65); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:26px;
  height:26px;
  padding:9px; /* zone tactile totale ~44px, recommandation Apple/Google pour le tactile */
  box-sizing:content-box;
}
.nav-toggle span{
  display:block; height:1.5px; width:100%;
  background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; top:0; right:0; bottom:0;
  width:min(78vw,320px);
  background:linear-gradient(165deg, rgba(64,35,90,.5), rgba(10,10,10,.95));
  backdrop-filter:blur(20px);
  z-index:99;
  display:flex; flex-direction:column;
  gap:22px;
  padding:100px 34px 40px;
  transform:translateX(100%);
  transition:transform .45s var(--ease);
  border-left:1px solid rgba(201,165,75,.2);
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{ font-size:1.05rem; opacity:.9; }
.mobile-nav hr{ border:none; border-top:1px solid rgba(243,238,230,.15); margin:4px 0; }
.mobile-nav__cta{ color:var(--gold-soft); font-weight:500; }

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000;
}
.hero__bg{
  position:relative;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:78px;
}
.hero__img-wrap{
  position:relative;
  display:inline-block;
  height:100%;
  max-height:calc(100vh - 78px);
  max-width:100%; /* filet de sécurité : ne dépasse jamais la largeur de l'écran */
}
.hero__img{
  display:block;
  width:auto;
  height:100%;
  max-height:calc(100vh - 78px);
  max-width:100%; /* idem — évite tout débordement horizontal si le ratio hauteur/largeur pousse l'image trop large */
  object-fit:contain;
  filter:saturate(1.05);
}
/* Bascule vers l'affichage "pleine largeur" : l'image hero-bg-opt.jpg a un
   ratio de ~1.78 (paysage). En mode desktop (height:100%, width:auto), ça ne
   marche que si l'écran est PLUS large que ce ratio — sinon la largeur
   calculée dépasse l'écran, le filet de sécurité max-width:100% la comprime,
   et l'image se retrouve minuscule dans une bande, flottant dans une grande
   zone noire (le bug "tout petit" sur tablette/mobile).
   On bascule donc dès que l'écran est proportionnellement PLUS ÉTROIT que
   l'image (ratio ≤ 1.6, avec marge de sécurité sous le 1.78 réel), ce qui
   couvre correctement : tous les téléphones (portrait ET paysage), toutes
   les tablettes (portrait ET paysage), pas seulement les écrans ≤820px. */
@media (max-aspect-ratio: 8/5), (max-width:820px){
  .hero{ min-height:auto; }
  .hero__bg{ padding-top:70px; height:auto; }
  .hero__img-wrap{ height:auto; max-height:none; width:100%; }
  .hero__img{ height:auto; width:100%; max-height:none; }
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--bg) 0%, transparent 9%),
    linear-gradient(to bottom, rgba(10,10,10,.85) 0%, transparent 16%),
    linear-gradient(to right, rgba(10,10,10,.9) 0%, transparent 18%),
    linear-gradient(to left, rgba(10,10,10,.9) 0%, transparent 18%);
}
.hero__particles{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:1;
}
.hero__particles span{
  position:absolute;
  bottom:-10px;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--gold-soft);
  opacity:0;
  box-shadow:0 0 6px 1px var(--gold);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ opacity:0; transform:translateY(0) translateX(0); }
  10%{ opacity:.8; }
  90%{ opacity:.5; }
  100%{ opacity:0; transform:translateY(-100vh) translateX(var(--drift,20px)); }
}

.hero__content{
  position:relative; z-index:2;
  text-align:center;
  padding:0 24px 64px;
  max-width:780px;
}
.hero__eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:14px;
  opacity:0;
  animation:riseIn .9s .2s var(--ease) forwards;
}
.hero__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing:.04em;
  line-height:1.05;
  background:linear-gradient(135deg, var(--ink) 30%, var(--gold-soft) 65%, var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:18px;
  opacity:0;
  animation:riseIn 1s .4s var(--ease) forwards;
}
.hero__subtitle{
  font-family:var(--garamond);
  font-style:italic;
  font-size:clamp(1.05rem, 2vw, 1.35rem);
  color:#ffffff;
  font-weight:600;
  line-height:1.55;
  margin-bottom:30px;
  opacity:0;
  animation:riseIn 1s .6s var(--ease) forwards;
}
@keyframes riseIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

.hero__elements{
  display:flex;
  justify-content:center;
  gap:18px;
  opacity:0;
  animation:riseIn 1s .8s var(--ease) forwards;
}
.el{
  width:13px; height:13px;
  border-radius:50%;
  display:inline-block;
  position:relative;
}
.el::after{
  content:'';
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1px solid currentColor;
  opacity:.4;
}
.el--terre{ background:var(--green); color:var(--green); }
.el--eau{ background:var(--blue); color:var(--blue); }
.el--feu{ background:#e8743b; color:#e8743b; }
.el--air{ background:#cfd2da; color:#cfd2da; }
.el--ether{ background:var(--violet-lt); color:var(--violet-lt); }

.hero__scrolldown{
  position:absolute;
  bottom:28px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center;
  gap:8px;
  opacity:.7;
}
.hero__scrolldown span{
  width:1px; height:36px;
  background:linear-gradient(to bottom, var(--gold-soft), transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
.hero__scrolldown em{
  font-style:normal;
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
@keyframes scrollPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

/* ---------------------------------------------------------
   SERVICES
--------------------------------------------------------- */
.services{
  position:relative;
  padding-top:120px;
  padding-bottom:100px;
  padding-left:clamp(20px,5vw,60px);
  padding-right:clamp(20px,5vw,60px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(64,35,90,.25), transparent 55%),
    var(--bg);
}
.services__intro{
  text-align:center;
  max-width:560px;
  margin:0 auto 64px;
}
.services__eyebrow{
  font-family:var(--garamond);
  font-style:italic;
  color:var(--gold-soft);
  font-size:1.05rem;
  margin-bottom:10px;
}
.services__title{
  font-family:var(--serif);
  font-size:clamp(1.7rem,3.4vw,2.3rem);
  letter-spacing:.03em;
}

.services__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  max-width:1180px;
  margin:0 auto;
  align-items:stretch;
}

.service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:42px 32px 36px;
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.service-card--center{
  transform:translateY(-14px);
}
.service-card:hover{
  transform:translateY(-20px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.service-card--center:hover{ transform:translateY(-30px); }

.service-card__glow{
  position:absolute;
  top:-40%; left:50%;
  width:220px; height:220px;
  transform:translateX(-50%);
  border-radius:50%;
  filter:blur(40px);
  opacity:.35;
  pointer-events:none;
  transition:opacity .4s;
}
.service-card--terre .service-card__glow{ background:var(--green); }
.service-card--feu .service-card__glow{ background:#e8743b; }
.service-card--ether .service-card__glow{ background:var(--violet-lt); }
.service-card:hover .service-card__glow{ opacity:.55; }

.service-card--terre{ border-color:rgba(31,165,106,.25); }
.service-card--feu{ border-color:rgba(201,165,75,.35); }
.service-card--ether{ border-color:rgba(107,63,143,.35); }

.service-card__rune{
  font-size:1.8rem;
  position:relative; z-index:1;
}
.service-card h3{
  position:relative; z-index:1;
  font-family:var(--serif);
  font-size:1.18rem;
  letter-spacing:.02em;
  color:var(--ink);
}
.service-card p{
  position:relative; z-index:1;
  font-family:var(--garamond);
  font-size:1.02rem;
  line-height:1.55;
  color:#ffffff;
  font-weight:600;
  flex-grow:1;
}
.service-card__link{
  position:relative; z-index:1;
  font-size:.82rem;
  letter-spacing:.05em;
  color:var(--gold-soft);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.service-card__link i{
  font-style:normal;
  transition:transform .3s var(--ease);
}
.service-card:hover .service-card__link i{ transform:translateX(4px); }

@media (max-width:900px){
  .services__grid{ grid-template-columns:1fr; max-width:480px; }
  .service-card--center{ transform:none; order:-1; }
  .service-card--center:hover{ transform:translateY(-10px); }
}

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.site-footer{
  padding-top:48px;
  padding-bottom:36px;
  padding-left:clamp(20px,5vw,60px);
  padding-right:clamp(20px,5vw,60px);
  text-align:center;
  border-top:1px solid rgba(255,255,255,.06);
}
.site-footer__line{
  font-family:var(--garamond);
  font-style:italic;
  font-size:1.05rem;
  color:var(--gold-soft);
  margin-bottom:20px;
}
.site-footer__bottom{
  display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:center;
  font-size:.78rem;
  color:var(--ink-dim);
}
.site-footer__bottom nav{ display:flex; gap:18px; }
.site-footer__bottom a:hover{ color:var(--gold-soft); }

/* ---------------------------------------------------------
   SERVICE PAGE — shared components
   (used by services-energetiques.html, accompagnement.html)
--------------------------------------------------------- */

/* page accent — set per page via data-accent on <body> */
body[data-accent="terre"]  { --accent: var(--green); --accent-soft:#5fd99c; }
body[data-accent="feu"]    { --accent: #e8743b;       --accent-soft:#f2a06b; }
body[data-accent="ether"]  { --accent: var(--blue);   --accent-soft:#8aa6ff; }

.page-hero{
  position:relative;
  padding-top:160px;
  padding-bottom:90px;
  padding-left:clamp(20px,5vw,60px);
  padding-right:clamp(20px,5vw,60px);
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    var(--bg);
}

/* =========================================================
   HEROES AVEC IMAGES DE COUVERTURE — affichage intégral
   Technique : <img> réelle positionnée en absolu derrière
   le contenu. L'image est visible en entier, sans rognage,
   avec un dégradé superposé pour la lisibilité du texte.
   ========================================================= */

/* Conteneur commun aux 3 pages */
.page-hero--with-image{
  position:relative;
  padding:0;
  background:var(--bg);
  overflow:visible;
}
.page-hero--with-image .page-hero__bg-img{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:0;
}
.page-hero--with-image .page-hero__bg-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.page-hero--with-image .page-hero__text-wrap{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(80px,10vw,140px) clamp(20px,5vw,60px) clamp(40px,6vw,80px);
  text-align:center;
}

/* ---- Soins Énergétiques ---- */
.page-hero--energetique .page-hero__bg-overlay{
  background:linear-gradient(
    to bottom,
    rgba(10,10,10,0.45) 0%,
    rgba(10,10,10,0.15) 35%,
    rgba(10,10,10,0.18) 60%,
    rgba(10,10,10,0.75) 85%,
    rgba(10,10,10,0.95) 100%
  );
}
.page-hero--energetique .page-hero__title{
  color:#fff;
  text-shadow:0 2px 24px rgba(107,63,143,.7), 0 0 60px rgba(201,165,75,.25);
}
.page-hero--energetique .page-hero__lede{ color:#ffffff; font-weight:600; text-shadow:0 1px 12px rgba(0,0,0,.55); }
.page-hero--energetique .page-hero__crumb{ color:rgba(243,238,230,.6); }
.page-hero--energetique .page-hero__crumb a:hover{ color:var(--gold-soft); }
.page-hero--energetique .page-hero__rune{
  border-color:rgba(201,165,75,.6);
  background:rgba(201,165,75,.12);
  box-shadow:0 0 40px rgba(201,165,75,.35), 0 0 80px rgba(107,63,143,.25);
}

/* ---- Accompagnement 1:1 ---- */
.page-hero--accompagnement .page-hero__bg-overlay{
  background:linear-gradient(
    to bottom,
    rgba(10,10,10,0.42) 0%,
    rgba(10,10,10,0.12) 30%,
    rgba(10,10,10,0.18) 60%,
    rgba(10,10,10,0.72) 85%,
    rgba(10,10,10,0.95) 100%
  );
}
.page-hero--accompagnement .page-hero__title{
  color:#fff;
  text-shadow:0 2px 24px rgba(62,111,255,.5), 0 0 60px rgba(201,165,75,.2);
}
.page-hero--accompagnement .page-hero__lede{ color:#ffffff; font-weight:600; text-shadow:0 1px 12px rgba(0,0,0,.55); }
.page-hero--accompagnement .page-hero__crumb{ color:rgba(243,238,230,.6); }
.page-hero--accompagnement .page-hero__crumb a:hover{ color:var(--gold-soft); }
.page-hero--accompagnement .page-hero__rune{
  border-color:rgba(62,111,255,.55);
  background:rgba(62,111,255,.1);
  box-shadow:0 0 40px rgba(62,111,255,.3), 0 0 80px rgba(201,165,75,.15);
}

@media(max-width:600px){
  .page-hero--with-image .page-hero__text-wrap{
    padding:60px 16px 40px;
  }
}
.page-hero__crumb{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:.78rem; letter-spacing:.04em;
  color:var(--ink-dim);
  margin-bottom:22px;
}
.page-hero__crumb a{ opacity:.8; transition:opacity .2s; }
.page-hero__crumb a:hover{ opacity:1; color:var(--gold-soft); }
.page-hero__crumb span{ opacity:.5; }

.page-hero__rune{
  display:inline-flex;
  width:64px; height:64px;
  align-items:center; justify-content:center;
  font-size:1.8rem;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow:0 0 30px -4px color-mix(in srgb, var(--accent) 60%, transparent);
  margin-bottom:22px;
}
.page-hero__title{
  font-family:var(--serif);
  font-size:clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing:.03em;
  margin-bottom:18px;
  color:var(--ink);
}
.page-hero__lede{
  max-width:620px;
  margin:0 auto;
  font-family:var(--garamond);
  font-size:1.2rem;
  line-height:1.65;
  color:#ffffff;
  font-weight:600;
}

/* ---- intro / how it works ---- */
.page-section{
  padding-top:80px;
  padding-bottom:80px;
  padding-left:clamp(20px,5vw,60px);
  padding-right:clamp(20px,5vw,60px);
  max-width:1100px;
  margin:0 auto;
}
.page-section--tight{ max-width:760px; }
.page-section__eyebrow{
  font-family:var(--garamond);
  font-style:italic;
  color:var(--accent-soft);
  font-size:1rem;
  margin-bottom:8px;
  text-align:center;
}
.page-section__title{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.1rem);
  text-align:center;
  margin-bottom:46px;
}

.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:30px;
}
.step{
  text-align:center;
  padding:8px;
}
.step__num{
  font-family:var(--serif);
  font-size:.85rem;
  color:var(--accent-soft);
  letter-spacing:.1em;
  margin-bottom:10px;
}
.step h3{
  font-family:var(--serif);
  font-size:1.08rem;
  margin-bottom:10px;
}
.step p{
  font-family:var(--garamond);
  font-size:1.02rem;
  color:var(--ink-dim);
  line-height:1.55;
}
@media (max-width:760px){
  .steps{ grid-template-columns:1fr; gap:36px; }
}

/* ---- pricing / formulas ---- */
.formulas{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.formula-card{
  position:relative;
  padding:36px 28px;
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.formula-card:hover{
  transform:translateY(-8px);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
}
.formula-card--featured{
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), rgba(255,255,255,.02));
}
.formula-card__badge{
  position:absolute; top:-12px; left:28px;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:20px;
  background:var(--accent);
  color:#0a0a0a;
  font-weight:500;
}
.formula-card h3{
  font-family:var(--serif);
  font-size:1.15rem;
}
.formula-card__meta{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.formula-card__price{
  font-family:var(--serif);
  font-size:1.9rem;
  color:var(--accent-soft);
}
.formula-card__duration{
  font-size:.82rem;
  color:var(--ink-dim);
}
.formula-card p{
  font-family:var(--garamond);
  font-size:1rem;
  color:#ffffff;
  font-weight:600;
  line-height:1.5;
  flex-grow:1;
}
.formula-card__note{
  font-size:.72rem;
  color:var(--ink-dim);
  opacity:.6;
  font-style:italic;
}
.formula-card .btn{ align-self:stretch; text-align:center; margin-top:4px; }

@media (max-width:900px){
  .formulas{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
}

/* ---------------------------------------------------------
   TÉMOIGNAGES
--------------------------------------------------------- */
.testimonials-section{
  padding:80px clamp(20px,5vw,60px) 40px;
  max-width:1100px;
  margin:0 auto;
}
.testimonials-section__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
}
.testimonial-form{
  width:100%;
  max-width:520px;
  margin:32px auto 0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
  text-align:left;
  animation:po-fade-up .5s var(--ease);
}
/* Le sélecteur `.testimonial-form{ display:flex }` ci-dessus est une règle
   d'auteur qui prévaudrait sur la règle [hidden]{display:none} de la feuille
   de style par défaut du navigateur (l'origine "auteur" prime toujours sur
   l'origine "user agent", quelle que soit la spécificité). Sans cette
   surcharge explicite, le formulaire — et donc son bouton — pouvait rester
   visible/mal positionné même masqué via l'attribut hidden, provoquant un
   chevauchement avec le message d'invitation à se connecter. Même correctif
   déjà appliqué ailleurs sur le site (.auth__notice[hidden], etc.). */
.testimonial-form[hidden]{ display:none; }
.testimonial-login-cta{
  margin-top:24px;
  font-family:var(--garamond);
  color:#ffffff;
  font-weight:600;
}
.testimonial-login-cta a{ color:var(--accent-soft); text-decoration:underline; }

/* Garantit que le bouton d'envoi reste entièrement visible et son texte
   parfaitement centré sur tous les appareils (le style visuel — couleurs,
   dégradé, ombre — reste celui de .btn--accent, inchangé). */
.testimonial-form button[type="submit"]{
  width:100%;
  box-sizing:border-box;
  text-align:center;
  white-space:normal;
  word-break:break-word;
  flex-shrink:0;
}

.star-rating{
  display:flex;
  gap:6px;
}
.star-rating__star{
  font-size:1.6rem;
  line-height:1;
  color:rgba(255,255,255,.22);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.star-rating__star:hover{ transform:scale(1.12); }
.star-rating__star--active{ color:var(--accent); }

.testimonials-grid{
  width:100%;
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
  text-align:left;
}
.testimonial-card{
  padding:28px 26px;
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  display:flex;
  flex-direction:column;
  gap:12px;
  animation:po-fade-up .5s var(--ease);
}
.testimonial-card__stars{ display:flex; gap:2px; }
.testimonial-card__star{ color:rgba(255,255,255,.18); font-size:1rem; }
.testimonial-card__star--filled{ color:var(--accent); }
.testimonial-card__text{
  font-family:var(--garamond);
  font-size:1.02rem;
  line-height:1.55;
  color:#ffffff;
  font-weight:600;
  flex-grow:1;
}
.testimonial-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  font-size:.78rem;
  color:var(--ink-dim);
  opacity:.75;
}
.testimonial-card__name{ font-weight:600; color:var(--ink); opacity:1; }

@keyframes po-fade-up{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width:900px){
  .testimonials-grid{ grid-template-columns:1fr; }
}

/* ---- CTA band ---- */
.cta-band{
  margin:40px clamp(20px,5vw,60px) 0;
  padding-top:54px;
  padding-bottom:54px;
  padding-left:clamp(28px,6vw,70px);
  padding-right:clamp(28px,6vw,70px);
  border-radius:28px;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.cta-band h2{
  font-family:var(--serif);
  font-size:clamp(1.5rem,3vw,2rem);
  margin-bottom:14px;
}
.cta-band p{
  font-family:var(--garamond);
  font-size:1.08rem;
  color:#ffffff;
  font-weight:600;
  max-width:480px;
  margin:0 auto 28px;
}
.btn--accent{
  background:linear-gradient(135deg, var(--accent-soft), var(--accent));
  color:#0a0a0a;
  font-weight:500;
  padding:14px 32px;
  box-shadow:0 10px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn--accent:hover{ transform:translateY(-2px); }
.btn--lg{ font-size:.92rem; letter-spacing:.04em; }

/* ---- FAQ ---- */
.faq{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}
.faq-item__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px;
  text-align:left;
  font-family:var(--sans);
  font-size:.98rem;
  font-weight:600;
  color:#ffffff;
}
.faq-item__q i{
  font-style:normal;
  font-size:1.1rem;
  color:var(--accent-soft);
  transition:transform .3s var(--ease);
  flex-shrink:0;
}
.faq-item[data-open="true"] .faq-item__q i{ transform:rotate(45deg); }
.faq-item__a{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
}
.faq-item__a p{
  padding:0 22px 20px;
  font-family:var(--garamond);
  font-size:1rem;
  color:#ffffff;
  font-weight:600;
  line-height:1.6;
}

/* ---------------------------------------------------------
   AUTH PAGES (connexion / inscription / mot de passe oublié)
--------------------------------------------------------- */
.auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:140px 20px 60px;
  position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(64,35,90,.35), transparent 60%),
    var(--bg);
}
.auth__panel{
  width:100%;
  max-width:460px;
  padding:44px 38px;
  border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(201,165,75,.22);
  backdrop-filter:blur(16px);
}
.auth__eyebrow{
  text-align:center;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-soft);
  opacity:.85;
  margin-bottom:10px;
}
.auth__title{
  text-align:center;
  font-family:var(--serif);
  font-size:1.8rem;
  letter-spacing:.03em;
  margin-bottom:8px;
}
.auth__sub{
  text-align:center;
  font-family:var(--garamond);
  font-size:1.02rem;
  color:#ffffff;
  font-weight:600;
  margin-bottom:32px;
}

.field{
  margin-bottom:20px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.field label{
  font-size:.78rem;
  letter-spacing:.04em;
  color:#ffffff;
  font-weight:600;
}

/* Champs de formulaire standard */
.field input{
  width:100%;
  padding:13px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px; /* jamais <16px : sous ce seuil, iOS Safari zoome automatiquement au focus */
  transition:border-color .25s, background .25s;
}

/* =========================================================
   SELECTS — FIX CONTRASTE GLOBAL
   Le fond natif des <select>/<option> est contrôlé par le
   navigateur/OS et ignore souvent les couleurs CSS du parent.
   On force un fond sombre + texte clair sur tous les selects
   pour garantir la lisibilité quelle que soit la plateforme.
   NB : ne s'applique PAS aux checkboxes/radios/autres inputs.
   ========================================================= */
select{
  background-color:#1a1320;
  color:#f3eee6;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b9b0c2' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
}
select option{
  background-color:#1a1320;
  color:#f3eee6;
}
select option:checked{ background-color:#2a1e38; color:#f3eee6; }
select option[value=""]{ color:#b9b0c2; }

.field select{
  width:100%;
  padding:13px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background-color:#1a1320;
  color:#f3eee6;
  font-family:var(--sans);
  font-size:16px; /* jamais <16px : sous ce seuil, iOS Safari zoome automatiquement au focus */
  transition:border-color .25s, background .25s;
}
.field input::placeholder{ color:rgba(243,238,230,.35); }
.field input:focus,
.field select:focus{
  border-color:var(--gold-soft);
  background:rgba(255,255,255,.06);
}
.field input.has-error{ border-color:#e8743b; }

/* Le <textarea> du formulaire de témoignage n'avait aucun style dédié et
   retombait sur l'apparence native du navigateur (fond clair, sans lien
   visuel avec le thème sombre du site) — même traitement que .field input. */
.field textarea{
  width:100%;
  box-sizing:border-box;
  padding:13px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px; /* jamais <16px : sous ce seuil, iOS Safari zoome automatiquement au focus */
  line-height:1.5;
  resize:vertical;
  transition:border-color .25s, background .25s;
}
.field textarea::placeholder{ color:rgba(243,238,230,.35); }
.field textarea:focus{
  border-color:var(--gold-soft);
  background:rgba(255,255,255,.06);
  outline:none;
}

/* Conteneur de montage du Stripe Card Element — même apparence que
   .field input, mais Stripe.js gère lui-même le contenu de l'iframe. */
.field-like-stripe{
  width:100%;
  box-sizing:border-box;
  padding:13px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  transition:border-color .25s, background .25s;
}
.field-like-stripe.StripeElement--focus{
  border-color:var(--gold-soft);
  background:rgba(255,255,255,.06);
}
.field-like-stripe.StripeElement--invalid{ border-color:#e8743b; }
.field__error{
  font-size:.76rem;
  color:#f0a06b;
  min-height:1em;
}
.field--password{ position:relative; }
.field__toggle{
  position:absolute;
  right:14px;
  top:38px;
  font-size:.78rem;
  color:#ffffff;
  font-weight:600;
  letter-spacing:.02em;
}
.field--checkbox{
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  margin-bottom:16px;
}
.field--checkbox input{
  width:auto;
  margin-top:3px;
  accent-color:var(--gold);
}
.field--checkbox label{
  font-size:.86rem;
  color:#ffffff;
  font-weight:600;
  line-height:1.5;
}
.field--checkbox a{ color:var(--gold-soft); }

.auth__submit{
  width:100%;
  padding:15px 20px;
  margin-top:8px;
  border-radius:12px;
  font-family:var(--serif);
  font-size:.86rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bg);
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow:0 10px 30px -8px rgba(201,165,75,.45);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .25s;
}
.auth__submit:hover{ transform:translateY(-2px); }
.auth__submit:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.auth__divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:26px 0;
  color:var(--ink-dim);
  font-size:.78rem;
}
.auth__divider::before,
.auth__divider::after{
  content:'';
  flex:1;
  height:1px;
  background:rgba(255,255,255,.12);
}

.auth__foot{
  text-align:center;
  font-size:.88rem;
  color:var(--ink-dim);
}
.auth__foot a{ color:var(--gold-soft); }
.auth__foot + .auth__foot{ margin-top:8px; }

.auth__notice{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:10px;
  background:rgba(31,165,106,.1);
  border:1px solid rgba(31,165,106,.3);
  font-size:.86rem;
  color:#a8e8c8;
  margin-bottom:22px;
}
.auth__notice[data-tone="error"]{
  background:rgba(232,116,59,.1);
  border-color:rgba(232,116,59,.3);
  color:#f0b894;
}
.auth__notice[hidden]{ display:none; }

/* ---------------------------------------------------------
   CLIENT PROFILE / DASHBOARD
--------------------------------------------------------- */
.account{
  padding-top:130px;
  padding-bottom:80px;
  padding-left:clamp(16px,4vw,40px);
  padding-right:clamp(16px,4vw,40px);
  max-width:1180px;
  margin:0 auto;
}
.account__head{
  display:flex;
  align-items:center;
  gap:22px;
  margin-bottom:44px;
}
.account__avatar{
  width:72px; height:72px;
  border-radius:50%;
  background:linear-gradient(140deg, var(--violet), var(--bg-soft));
  border:1px solid rgba(201,165,75,.35);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-size:1.6rem;
  color:var(--gold-soft);
  flex-shrink:0;
  overflow:hidden;
}
.account__avatar img{ width:100%; height:100%; object-fit:cover; }
.account__name{
  font-family:var(--serif);
  font-size:1.5rem;
  margin-bottom:4px;
}
.account__email{
  font-size:.9rem;
  color:var(--ink-dim);
}

.account__layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:36px;
  align-items:start;
}
.account__nav{
  display:flex;
  flex-direction:column;
  gap:4px;
  position:sticky;
  top:110px;
}
.account__nav button{
  text-align:left;
  padding:12px 16px;
  border-radius:10px;
  font-size:.9rem;
  color:var(--ink-dim);
  transition:background .2s, color .2s;
}
.account__nav button:hover{ background:rgba(255,255,255,.04); color:var(--ink); }
.account__nav button[aria-selected="true"]{
  background:rgba(201,165,75,.12);
  color:var(--gold-soft);
}
.account__nav button.danger{ color:#f0a06b; margin-top:14px; }

.account__panel{ display:none; }
.account__panel[data-active="true"]{ display:block; }

.account-card{
  padding:28px 26px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:22px;
}
.account-card h3{
  font-family:var(--serif);
  font-size:1.1rem;
  margin-bottom:18px;
}

/* ---------- Content Manager : listes dynamiques (Étapes / FAQ) ---------- */
.cm-list-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.cm-list-header h3{ margin-bottom:0; }
.cm-block-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:16px;
}
.cm-block-item{
  display:flex;
  gap:14px;
  padding:16px;
  border-radius:12px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
}
.cm-block-item__order{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex-shrink:0;
  padding-top:2px;
}
.cm-block-item__order button{
  width:26px; height:26px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--ink-dim);
  cursor:pointer;
  font-size:.78rem;
  line-height:1;
}
.cm-block-item__order button:hover:not(:disabled){ color:var(--gold-soft); border-color:var(--gold-soft); }
.cm-block-item__order button:disabled{ opacity:.25; cursor:default; }
.cm-block-item__fields{ flex-grow:1; display:flex; flex-direction:column; gap:10px; }
.cm-block-item__fields input,
.cm-block-item__fields select,
.cm-block-item__fields textarea{
  width:100%;
  padding:10px 13px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background-color:#1a1320;
  color:#f3eee6;
  font-family:var(--sans);
  font-size:.88rem;
}
.cm-block-item__fields select option{ background-color:#1a1320; color:#f3eee6; }
.cm-block-item__remove{
  flex-shrink:0;
  align-self:flex-start;
  background:none;
  border:1px solid rgba(232,116,59,.35);
  color:#f0a06b;
  border-radius:8px;
  width:30px; height:30px;
  cursor:pointer;
  font-size:.85rem;
}
.cm-block-item__remove:hover{ background:rgba(232,116,59,.12); }
.cm-block-empty{
  font-size:.84rem;
  color:var(--ink-dim);
  font-style:italic;
  padding:8px 0;
}

.appt-list{ display:flex; flex-direction:column; gap:12px; }
.appt-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.appt-row__date{
  font-family:var(--serif);
  font-size:.85rem;
  color:var(--gold-soft);
  width:108px;
  flex-shrink:0;
}
.appt-row__info{ flex-grow:1; }
.appt-row__info strong{ display:block; font-size:.94rem; margin-bottom:2px; }
.appt-row__info span{ font-size:.82rem; color:var(--ink-dim); }
.appt-row__confirmation{ display:block; font-size:.76rem; color:var(--ink-dim); margin-top:2px; }
.appt-row__zoom{ display:block; font-size:.82rem; margin-top:4px; }
.appt-row__zoom a{ color:var(--gold-soft); }
.appt-row__status{
  font-size:.72rem;
  padding:5px 12px;
  border-radius:20px;
  letter-spacing:.03em;
  text-transform:uppercase;
  flex-shrink:0;
}
.appt-row__status--confirmed{ background:rgba(31,165,106,.15); color:#5fd99c; }
.appt-row__status--pending{ background:rgba(201,165,75,.15); color:var(--gold-soft); }
.appt-row__status--awaiting_confirmation{ background:rgba(201,165,75,.15); color:var(--gold-soft); }
.appt-row__status--declined{ background:rgba(220,80,80,.15); color:#f08080; }
.appt-row__status--rescheduled{ background:rgba(62,111,255,.15); color:#9db4ff; }
.appt-row__status--cancelled{ background:rgba(232,116,59,.15); color:#f0a06b; }
.appt-row__status--done{ background:rgba(255,255,255,.06); color:var(--ink-dim); }

.appt-row{ flex-wrap:wrap; }
.appt-row__actions{ flex-shrink:0; display:flex; gap:8px; width:100%; justify-content:flex-end; }
.appt-row__cancel-btn{
  font-size:.78rem;
  padding:6px 14px;
  border-radius:20px;
  border:1px solid rgba(232,116,59,.35);
  background:transparent;
  color:#f0a06b;
  cursor:pointer;
  transition:background .15s ease;
}
.appt-row__cancel-btn:hover{ background:rgba(232,116,59,.12); }
.appt-row__cancel-btn:disabled{ opacity:.35; cursor:not-allowed; }

.empty-state{
  text-align:center;
  padding:40px 20px;
  color:#ffffff;
  font-weight:600;
  font-family:var(--garamond);
  font-size:1.02rem;
}

table.account-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
table.account-table th{
  text-align:left;
  padding:10px 12px;
  color:var(--ink-dim);
  font-weight:400;
  font-size:.76rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.1);
}
table.account-table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
table.account-table tr:last-child td{ border-bottom:none; }

.danger-zone{
  padding:22px 24px;
  border-radius:16px;
  border:1px solid rgba(232,116,59,.3);
  background:rgba(232,116,59,.05);
}
.danger-zone h3{ color:#f0a06b; }
.danger-zone p{ font-size:.88rem; color:#ffffff; font-weight:600; margin-bottom:16px; }
.btn--danger{
  background:transparent;
  border:1px solid rgba(232,116,59,.5);
  color:#f0a06b;
  padding:10px 20px;
  border-radius:30px;
  font-size:.84rem;
}
.btn--danger:hover{ background:rgba(232,116,59,.12); }

@media (max-width:820px){
  .account__layout{ grid-template-columns:1fr; }
  .account__nav{
    position:static;
    flex-direction:row;
    overflow-x:auto;
    gap:8px;
    padding-bottom:6px;
  }
  .account__nav button{ white-space:nowrap; }
  .field-row{ grid-template-columns:1fr; }
}

/* confirm dialog (used for delete account) */
.confirm-veil{
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.confirm-veil[hidden]{ display:none; }
.confirm-box{
  max-width:400px;
  width:100%;
  padding:30px 26px;
  border-radius:18px;
  background:var(--bg-soft);
  border:1px solid rgba(232,116,59,.35);
  text-align:center;
}
.confirm-box h3{ font-family:var(--serif); margin-bottom:12px; color:#f0a06b; }
.confirm-box p{ font-size:.9rem; color:#ffffff; font-weight:600; margin-bottom:22px; line-height:1.5; }
.confirm-box__actions{ display:flex; gap:12px; }
.confirm-box__actions button{
  flex:1;
  padding:12px;
  border-radius:10px;
  font-size:.86rem;
}
.confirm-box__cancel{ background:rgba(255,255,255,.06); color:var(--ink); }
.confirm-box__confirm{ background:#e8743b; color:#1a1305; font-weight:500; }

/* ---------------------------------------------------------
   CONTACT PAGE
--------------------------------------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  max-width:1000px;
  margin:0 auto;
  padding-top:150px;
  padding-bottom:90px;
  padding-left:clamp(20px,4vw,40px);
  padding-right:clamp(20px,4vw,40px);
  align-items:start;
}
.contact-info h2{
  font-family:var(--serif);
  font-size:1.9rem;
  margin-bottom:16px;
}
.contact-info p{
  font-family:var(--garamond);
  font-size:1.08rem;
  color:#ffffff;
  font-weight:600;
  line-height:1.65;
  margin-bottom:28px;
}
.contact-detail{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:18px;
  font-size:.92rem;
}
.contact-detail strong{ display:block; margin-bottom:2px; }
.contact-detail span{ color:#ffffff; font-weight:600; }

/* ---------------------------------------------------------
   LEGAL PAGES
--------------------------------------------------------- */
.legal{
  max-width:760px;
  margin:0 auto;
  padding-top:150px;
  padding-bottom:90px;
  padding-left:clamp(20px,4vw,40px);
  padding-right:clamp(20px,4vw,40px);
}
.legal h1{
  font-family:var(--serif);
  font-size:2.1rem;
  margin-bottom:10px;
}
.legal__updated{
  font-size:.82rem;
  color:var(--ink-dim);
  margin-bottom:40px;
}
.legal h2{
  font-family:var(--serif);
  font-size:1.25rem;
  margin:36px 0 14px;
}
.legal p, .legal li{
  font-family:var(--garamond);
  font-size:1.04rem;
  line-height:1.7;
  color:#ffffff;
  font-weight:600;
  margin-bottom:14px;
}
.legal ul{ padding-left:22px; margin-bottom:14px; }

@media (max-width:760px){
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
}

/* ---------------------------------------------------------
   ADMIN PANEL
--------------------------------------------------------- */
.admin-shell{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}
.admin-sidebar{
  background:linear-gradient(165deg, rgba(64,35,90,.28), var(--bg-soft));
  border-right:1px solid rgba(201,165,75,.18);
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.admin-sidebar__brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.04em;
  padding:6px 10px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:18px;
}
.admin-sidebar__brand span:first-child{ color:var(--gold); }
.admin-sidebar__tag{
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-soft);
  opacity:.75;
  padding:0 10px 14px;
}
.admin-nav{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex-grow:1;
}
.admin-nav button{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  padding:11px 12px;
  border-radius:10px;
  font-size:.88rem;
  color:var(--ink-dim);
  transition:background .2s, color .2s;
}
.admin-nav button i{
  font-style:normal;
  font-size:1rem;
  width:20px;
  text-align:center;
  flex-shrink:0;
  opacity:.8;
}
.admin-nav button:hover{ background:rgba(255,255,255,.04); color:var(--ink); }
.admin-nav button[aria-selected="true"]{
  background:rgba(201,165,75,.14);
  color:var(--gold-soft);
}
.admin-sidebar__foot{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:14px;
  margin-top:14px;
}
.admin-sidebar__foot a{
  display:block;
  padding:10px 12px;
  font-size:.84rem;
  color:var(--ink-dim);
  border-radius:10px;
}
.admin-sidebar__foot a:hover{ background:rgba(255,255,255,.04); color:var(--ink); }

.admin-main{
  padding:34px clamp(20px,3vw,48px) 60px;
  max-width:1280px;
  width:100%;
}
.admin-panel{ display:none; }
.admin-panel[data-active="true"]{ display:block; }

.admin-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.admin-header h1{
  font-family:var(--serif);
  font-size:1.7rem;
  letter-spacing:.02em;
}
.admin-header p{
  font-size:.92rem;
  color:#ffffff;
  font-weight:600;
  margin-top:4px;
}

.admin-toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.admin-toolbar input[type="text"],
.admin-toolbar input[type="search"]{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.86rem;
  min-width:220px;
}
.admin-toolbar select{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background-color:#1a1320;
  color:#f3eee6;
  font-family:var(--sans);
  font-size:.86rem;
}
.btn--sm{
  padding:9px 16px;
  font-size:.82rem;
  border-radius:20px;
}

.admin-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
  margin-bottom:28px;
}
.admin-stat{
  padding:20px 22px;
  border-radius:14px;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
}
.admin-stat__value{
  font-family:var(--serif);
  font-size:1.7rem;
  color:var(--gold-soft);
}
.admin-stat__label{
  font-size:.78rem;
  color:var(--ink-dim);
  margin-top:4px;
}

.admin-table-wrap{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
table.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:.86rem;
}
table.admin-table th{
  text-align:left;
  padding:13px 16px;
  background:rgba(255,255,255,.04);
  color:var(--ink-dim);
  font-weight:400;
  font-size:.74rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}
table.admin-table td{
  padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
  vertical-align:middle;
}
table.admin-table tr:last-child td{ border-bottom:none; }
table.admin-table tr:hover td{ background:rgba(255,255,255,.02); }

.badge{
  font-size:.7rem;
  padding:4px 11px;
  border-radius:20px;
  letter-spacing:.03em;
  text-transform:uppercase;
  display:inline-block;
}
.badge--confirmed{ background:rgba(31,165,106,.15); color:#5fd99c; }
.badge--pending{ background:rgba(201,165,75,.15); color:var(--gold-soft); }
.badge--awaiting_confirmation{ background:rgba(201,165,75,.15); color:var(--gold-soft); }
.badge--cancelled{ background:rgba(232,116,59,.15); color:#f0a06b; }
.badge--declined{ background:rgba(220,80,80,.15); color:#f08080; }
.badge--rescheduled{ background:rgba(62,111,255,.15); color:#9db4ff; }
.badge--done, .badge--completed{ background:rgba(255,255,255,.08); color:var(--ink-dim); }
.badge--admin{ background:rgba(107,63,143,.2); color:#c8a6e8; }
.badge--client{ background:rgba(62,111,255,.15); color:#9db4ff; }

.icon-btn{
  width:32px; height:32px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  color:var(--ink-dim);
  transition:background .2s, color .2s;
}
.icon-btn:hover{ background:rgba(255,255,255,.08); color:var(--ink); }
.icon-btn--danger:hover{ background:rgba(232,116,59,.15); color:#f0a06b; }

.admin-row-actions{ display:flex; gap:6px; }

.admin-empty{
  text-align:center;
  padding:50px 20px;
  color:var(--ink-dim);
}

/* Client detail drawer */
.drawer-veil{
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
  display:flex;
  justify-content:flex-end;
}
.drawer-veil[hidden]{ display:none; }
.drawer{
  width:min(440px, 100%);
  height:100%;
  background:var(--bg-soft);
  border-left:1px solid rgba(201,165,75,.25);
  padding:30px 28px;
  overflow-y:auto;
}
.drawer__close{
  float:right;
  font-size:1.3rem;
  color:var(--ink-dim);
  line-height:1;
}
.drawer h2{
  font-family:var(--serif);
  font-size:1.3rem;
  margin-bottom:4px;
}
.drawer__sub{ font-size:.85rem; color:#ffffff; font-weight:600; margin-bottom:24px; }
.drawer__section{ margin-bottom:24px; }
.drawer__section h4{
  font-size:.76rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:10px;
}
.drawer__field{ display:flex; justify-content:space-between; padding:8px 0; font-size:.88rem; border-bottom:1px solid rgba(255,255,255,.05); }
.drawer__field span:first-child{ color:var(--ink-dim); }

/* Calendar grid */
.cal-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.cal-toolbar__nav{ display:flex; align-items:center; gap:10px; }
.cal-toolbar__label{
  font-family:var(--serif);
  font-size:1.15rem;
  min-width:160px;
  text-align:center;
}
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:8px;
}
.cal-dow{
  text-align:center;
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-dim);
  padding-bottom:6px;
}
.cal-day{
  min-height:88px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  padding:8px;
  position:relative;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.cal-day:hover{ border-color:rgba(201,165,75,.35); }
.cal-day:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:2px;
  border-color:var(--gold-soft);
}
.day-appt-chip:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:1px;
}
.cal-day--empty{ background:transparent; border:none; cursor:default; }
.cal-day--empty:hover{ border:none; }
.cal-day--today{ border-color:var(--gold-soft); }
.cal-day--unavailable{ opacity:.35; background:rgba(255,255,255,.01); }
.cal-day__num{ font-size:.8rem; color:var(--ink-dim); }
.cal-day--today .cal-day__num{ color:var(--gold-soft); font-weight:500; }
.cal-day__dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold-soft);
  display:inline-block;
  margin:2px 2px 0 0;
}
.cal-day__count{
  position:absolute;
  bottom:6px; right:8px;
  font-size:.68rem;
  color:var(--gold-soft);
}

.day-appts{
  margin-top:24px;
}
.day-appt-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  margin-bottom:10px;
}
.day-appt-row__time{
  font-family:var(--serif);
  font-size:.85rem;
  color:var(--gold-soft);
  width:60px;
  flex-shrink:0;
}
.day-appt-row__info{ flex-grow:1; }
.day-appt-row__info strong{ display:block; font-size:.92rem; }
.day-appt-row__info span{ font-size:.8rem; color:var(--ink-dim); }

/* ---------- Sous-onglets du Calendrier (Calendrier / Disponibilités) ---------- */
.cal-subtabs{
  display:flex;
  gap:6px;
  margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cal-subtabs button{
  background:none; border:none;
  font-family:var(--sans);
  font-size:.85rem;
  color:var(--ink-dim);
  padding:10px 16px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.cal-subtabs button:hover{ color:var(--ink); }
.cal-subtabs button[aria-selected="true"]{
  color:var(--gold-soft);
  border-bottom-color:var(--gold-soft);
}
.cal-hint{
  font-size:.78rem;
  color:var(--ink-dim);
  margin-bottom:14px;
  font-style:italic;
}

/* ---------- Drag & drop sur les jours du calendrier ---------- */
.cal-day[draggable="true"] .day-appt-chip{ cursor:grab; }
.cal-day--dragover{
  border-color:var(--gold) !important;
  background:rgba(201,165,75,.1) !important;
  box-shadow:0 0 0 1px var(--gold) inset;
}
.day-appt-chip{
  display:block;
  font-size:.66rem;
  padding:2px 5px;
  margin-top:3px;
  border-radius:5px;
  background:rgba(201,165,75,.15);
  color:var(--gold-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:grab;
}
.day-appt-chip--pending{ background:rgba(201,165,75,.12); color:var(--gold-soft); }
.day-appt-chip--confirmed{ background:rgba(31,165,106,.15); color:#5fd99c; }
.day-appt-chip--cancelled{ background:rgba(255,255,255,.05); color:var(--ink-dim); text-decoration:line-through; }
.day-appt-chip--done{ background:rgba(255,255,255,.06); color:var(--ink-dim); }
.day-appt-chip--blocked{ background:rgba(232,116,59,.15); color:#f0a06b; }

/* ---------- Disponibilités : grille horaires hebdomadaires ---------- */
.weekly-hours-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
.weekly-hours-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
}
.weekly-hours-row__day{
  width:90px;
  flex-shrink:0;
  font-size:.85rem;
  padding-top:7px;
  color:var(--ink);
}
.weekly-hours-row__ranges{
  flex-grow:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.weekly-hours-range{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  padding:5px 8px;
}
.weekly-hours-range .po-time-input{
  width:90px;
  font-size:.8rem;
  padding:4px 6px;
}
.weekly-hours-range button{
  background:none; border:none;
  color:var(--ink-dim);
  cursor:pointer;
  font-size:.85rem;
  line-height:1;
}
.weekly-hours-range button:hover{ color:#f0a06b; }
.weekly-hours-row__add{
  background:none;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:8px;
  color:var(--ink-dim);
  font-size:.78rem;
  padding:5px 10px;
  cursor:pointer;
  flex-shrink:0;
  align-self:flex-start;
}
.weekly-hours-row__add:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }
.weekly-hours-row--closed .weekly-hours-row__ranges::before{
  content:'Fermé ce jour-là';
  font-size:.78rem;
  color:var(--ink-dim);
  font-style:italic;
  padding-top:5px;
}

/* ---------- Vacances ---------- */
.vacation-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:8px;
}
.vacation-row__dates{
  font-family:var(--serif);
  font-size:.85rem;
  color:var(--gold-soft);
  flex-shrink:0;
  width:220px;
}
.vacation-row__label{ flex-grow:1; font-size:.85rem; color:#ffffff; font-weight:600; }
.muted-note{ font-size:.8rem; color:#ffffff; font-weight:600; margin-bottom:6px; }

/* ---------- Barre de brouillon (Save / Cancel) ---------- */
.draft-bar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap;
  padding:12px 16px;
  margin-bottom:18px;
  border-radius:10px;
  background:rgba(212,175,107,.1);
  border:1px solid rgba(212,175,107,.35);
  animation:draftBarIn .18s ease-out;
}
.draft-bar__msg{
  font-size:.85rem;
  color:var(--gold-soft);
  font-family:var(--serif);
}
.draft-bar__actions{ display:flex; gap:10px; }
@keyframes draftBarIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- Holidays (jours fériés) ---------- */
.holiday-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:8px;
}
.holiday-row__date{
  font-family:var(--serif);
  font-size:.85rem;
  color:var(--gold-soft);
  flex-shrink:0;
  width:140px;
}
.holiday-row__label{ flex-grow:1; font-size:.85rem; color:#ffffff; font-weight:600; }
.holiday-row__badge{
  font-size:.7rem;
  padding:2px 8px;
  border-radius:20px;
  background:rgba(212,175,107,.15);
  color:var(--gold-soft);
  flex-shrink:0;
}

/* ---------- Checkbox de champ (réutilisable) ---------- */
.field-checkbox{
  display:flex; align-items:center; gap:9px;
  cursor:pointer;
  font-size:.85rem;
  color:var(--ink-dim);
  margin-bottom:10px;
}
.field-checkbox input[type="checkbox"]{ width:auto; margin:0; }

/* ---------- Pause par service / par jour : grille label + input minutes ---------- */
.pause-mini-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:9px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.pause-mini-row:last-child{ border-bottom:none; }
.pause-mini-row__label{ font-size:.82rem; color:#ffffff; font-weight:600; }
.pause-mini-row input[type="number"]{ width:90px; }

.modal-veil{
  position:fixed; inset:0; z-index:350;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-veil[hidden]{ display:none; }
.modal-box{
  width:100%; max-width:440px;
  background:var(--bg-soft);
  border:1px solid rgba(201,165,75,.3);
  border-radius:18px;
  padding:28px 26px;
}
.modal-box h3{ font-family:var(--serif); margin-bottom:18px; }
.modal-box__actions{ display:flex; gap:10px; margin-top:22px; }
.modal-box__actions button{ flex:1; padding:11px; border-radius:10px; font-size:.86rem; }
.modal-box__cancel{ background:rgba(255,255,255,.06); color:var(--ink); }
.modal-box__save{ background:linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#1a1305; font-weight:500; }

@media (max-width:880px){
  .admin-shell{ grid-template-columns:1fr; }
  .admin-sidebar{
    position:static;
    height:auto;
    flex-direction:row;
    overflow-x:auto;
    align-items:center;
    padding:14px 16px;
  }
  .admin-sidebar__brand{ border-bottom:none; padding:0 14px 0 0; margin-bottom:0; border-right:1px solid rgba(255,255,255,.08); }
  .admin-sidebar__tag{ display:none; }
  .admin-nav{ flex-direction:row; }
  .admin-nav button span{ display:none; }
  .admin-sidebar__foot{ border-top:none; border-left:1px solid rgba(255,255,255,.08); margin:0; padding:0 0 0 14px; }
  .cal-grid{ gap:4px; }
  .cal-day{ min-height:60px; padding:5px; }
}

/* ---------------------------------------------------------
   SERVICES MANAGER — editable cards
--------------------------------------------------------- */
.service-edit-card{
  padding:24px 26px;
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
}
.service-edit-card__head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.service-edit-card__rune-preview{
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}
.service-edit-card__head h3{
  font-family:var(--serif);
  font-size:1.1rem;
}
.service-edit-card__head span{
  font-size:.78rem;
  color:var(--ink-dim);
}
.service-edit-card__row{
  display:grid;
  grid-template-columns:90px 90px 1fr;
  gap:14px;
  margin-bottom:16px;
}
.service-edit-card .field{ margin-bottom:0; }
.service-edit-card__save{
  align-self:flex-end;
}
@media (max-width:700px){
  .service-edit-card__row{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------
   MESSENGER
--------------------------------------------------------- */
.messenger-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:0;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  min-height:520px;
}
.messenger-list{
  border-right:1px solid rgba(255,255,255,.08);
  overflow-y:auto;
  max-height:620px;
}
.messenger-list__item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .2s;
}
.messenger-list__item:hover{ background:rgba(255,255,255,.03); }
.messenger-list__item[data-active="true"]{ background:rgba(201,165,75,.1); }
.messenger-list__item-top{ display:flex; justify-content:space-between; align-items:center; }
.messenger-list__name{ font-size:.92rem; font-weight:500; }
.messenger-list__preview{
  font-size:.8rem;
  color:var(--ink-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.messenger-list__unread{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}
.messenger-thread{
  display:flex;
  flex-direction:column;
  height:620px;
}
.messenger-thread__head{
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--serif);
  font-size:1.02rem;
}
.messenger-thread__messages{
  flex-grow:1;
  overflow-y:auto;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.messenger-bubble{
  max-width:72%;
  padding:10px 14px;
  border-radius:14px;
  font-size:.88rem;
  line-height:1.45;
}
.messenger-bubble--in{
  align-self:flex-start;
  background:rgba(255,255,255,.06);
  border-bottom-left-radius:4px;
}
.messenger-bubble--out{
  align-self:flex-end;
  background:linear-gradient(135deg, rgba(201,165,75,.35), rgba(201,165,75,.18));
  border-bottom-right-radius:4px;
}
.messenger-bubble__time{
  display:block;
  font-size:.68rem;
  color:var(--ink-dim);
  margin-top:4px;
}
.messenger-thread__form{
  display:flex;
  gap:10px;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  align-items:center;
}
.messenger-thread__form input[type="text"]{
  flex-grow:1;
  padding:11px 16px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.9rem;
}
.messenger-thread__form button{
  padding:11px 22px;
  border-radius:30px;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  color:#1a1305;
  font-weight:500;
  font-size:.86rem;
}
.messenger-attach-btn{
  flex-shrink:0;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--ink-dim);
  font-size:1.05rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.messenger-attach-btn:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }
.messenger-typing{
  padding:0 20px 10px;
  font-size:.78rem;
  color:var(--ink-dim);
  font-style:italic;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:18px;
}
.messenger-typing__dots{ display:inline-flex; gap:3px; }
.messenger-typing__dots span{
  width:4px; height:4px;
  border-radius:50%;
  background:var(--ink-dim);
  animation:messengerTypingBounce 1.2s infinite ease-in-out;
}
.messenger-typing__dots span:nth-child(2){ animation-delay:.15s; }
.messenger-typing__dots span:nth-child(3){ animation-delay:.3s; }
@keyframes messengerTypingBounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-3px); opacity:1; }
}
.messenger-attachment-preview{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  margin:0 16px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  font-size:.82rem;
}
.messenger-attachment-preview img{
  width:34px; height:34px;
  object-fit:cover;
  border-radius:6px;
}
.messenger-attachment-preview__icon{
  width:34px; height:34px;
  border-radius:6px;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.messenger-attachment-preview__name{
  flex-grow:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.messenger-attachment-preview__remove{
  background:none; border:none;
  color:var(--ink-dim);
  cursor:pointer;
  font-size:.9rem;
}
.messenger-attachment-preview__remove:hover{ color:#f0a06b; }
.messenger-bubble__attachment{
  display:block;
  margin-top:6px;
}
.messenger-bubble__attachment img{
  max-width:100%;
  max-height:220px;
  border-radius:10px;
  display:block;
}
.messenger-bubble__attachment-file{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  font-size:.82rem;
  text-decoration:none;
  color:inherit;
}
.messenger-bubble__attachment-file i{ font-size:1.2rem; }
.messenger-empty-thread{
  flex-grow:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-dim);
  font-size:.9rem;
}
.sidebar-badge{
  background:var(--gold);
  color:#1a1305;
  font-size:.68rem;
  font-weight:600;
  border-radius:10px;
  padding:1px 7px;
  margin-left:auto;
}

@media (max-width:780px){
  .messenger-layout{ grid-template-columns:1fr; }
  .messenger-list{ max-height:220px; border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
  .messenger-thread{ height:440px; }
}

/* ---------------------------------------------------------
   NOTIFICATIONS — toggle switch
--------------------------------------------------------- */
.notif-setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.notif-setting-row:last-child{ border-bottom:none; }
.notif-setting-row__label{ font-size:.92rem; }
.notif-setting-row__desc{ font-size:.78rem; color:#ffffff; font-weight:600; margin-top:2px; }
.toggle-switch{
  position:relative;
  width:46px; height:26px;
  flex-shrink:0;
}
.toggle-switch input{
  position:absolute;
  opacity:0;
  width:100%; height:100%;
  margin:0;
  cursor:pointer;
  z-index:1;
}
.toggle-switch__track{
  position:absolute; inset:0;
  background:rgba(255,255,255,.12);
  border-radius:14px;
  transition:background .25s;
}
.toggle-switch__track::after{
  content:'';
  position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--ink);
  transition:transform .25s var(--ease);
}
.toggle-switch input:checked + .toggle-switch__track{ background:var(--gold); }
.toggle-switch input:checked + .toggle-switch__track::after{ transform:translateX(20px); background:#1a1305; }

.log-row-link{
  color:var(--gold-soft);
  font-size:.82rem;
  cursor:pointer;
}
.log-row-link:hover{ text-decoration:underline; }

/* ---------------------------------------------------------
   SERVICE NAV BUTTONS — boutons au-dessus des cartes d'accueil
--------------------------------------------------------- */
.service-card__col{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
}
.service-nav-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:52px;
  width:100%;
  padding:0 22px;
  border-radius:30px;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  backdrop-filter:blur(14px);
  border:1px solid rgba(201,165,75,.35);
  color:var(--gold-soft);
  font-family:var(--serif);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.06em;
  text-align:center;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.service-nav-btn:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  color:#1a1305;
  box-shadow:0 14px 30px -10px rgba(201,165,75,.55);
}
.service-nav-btn:active{ transform:translateY(-1px); }
.service-nav-btn:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:3px;
}

@media (max-width:900px){
  .service-card__col{ order:0; }
}

/* ---------------------------------------------------------
   HERO PORTAL LINKS — zones cliquables invisibles, superposées
   exactement aux 3 bandeaux de texte déjà présents dans l'image
   du hero. Pas de label visible : c'est l'image elle-même qui
   devient interactive à ces emplacements précis.
--------------------------------------------------------- */
.hero__portal{
  position:absolute;
  z-index:3;
  cursor:pointer;
  /* transparent par défaut : la zone est invisible, seul un focus clavier ou un survol discret la révèle */
  background:transparent;
  border-radius:40px;
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.hero__portal:hover,
.hero__portal:focus-visible{
  background:rgba(255,255,255,.06);
  box-shadow:0 0 24px 2px rgba(255,255,255,.12);
  outline:none;
}
.hero__portal:focus-visible{
  box-shadow:0 0 0 2px rgba(255,255,255,.4), 0 0 24px 4px rgba(255,255,255,.15);
}

.hero__portal--energetiques{ left:19.8%; top:73.2%; width:17.5%; height:5.3%; }
.hero__portal--accompagnement{ left:62.8%; top:73.2%; width:17.5%; height:5.3%; }

/* Connexion / Créer un compte — même comportement que .hero__portal,
   superposées sur les deux dragons (doré à gauche, argenté à droite)
   qui encadrent déjà la scène. Teinte de glow accordée à chaque dragon. */
.hero__portal--connexion:hover,
.hero__portal--connexion:focus-visible{
  background:rgba(227,201,138,.08);
  box-shadow:0 0 24px 2px rgba(227,201,138,.16);
}
.hero__portal--connexion:focus-visible{
  box-shadow:0 0 0 2px rgba(227,201,138,.45), 0 0 24px 4px rgba(227,201,138,.18);
}
.hero__portal--inscription:hover,
.hero__portal--inscription:focus-visible{
  background:rgba(210,225,245,.08);
  box-shadow:0 0 24px 2px rgba(210,225,245,.16);
}
.hero__portal--inscription:focus-visible{
  box-shadow:0 0 0 2px rgba(210,225,245,.45), 0 0 24px 4px rgba(210,225,245,.18);
}

.hero__portal--connexion{ left:2.99%; top:59.1%; width:14.95%; height:26.6%; }
.hero__portal--inscription{ left:82.18%; top:59.1%; width:14.95%; height:26.6%; }

/* ---- Portail Témoignages (couronne au sommet de la scène) ---- */
.hero__portal--crown{
  left:44%; top:8%;
  width:12%; height:9%;
  border-radius:50%;
  padding:0;
}


/* ---------------------------------------------------------
   RESPONSIVE — nav collapse
--------------------------------------------------------- */
@media (max-width:880px){
  .main-nav{ display:none; }
  .header-actions .btn--ghost{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width:480px){
  .header-actions .btn--gold{ display:none; }
}

/* ---------------------------------------------------------
   PARCOURS DE RÉSERVATION — SOINS ÉNERGÉTIQUES & ACCOMPAGNEMENT
   Mini-calendrier client + liste de créneaux disponibles.
   Réutilise .modal-veil / .modal-box / .auth__notice / .cal-grid
   / .cal-dow / .cal-day déjà définis, pour rester cohérent avec
   le calendrier admin.
--------------------------------------------------------- */
.modal-box--booking{ max-width:680px; }

.cal-booking__formula{
  font-size:.86rem;
  color:var(--ink-dim);
  margin-bottom:18px;
}

.cal-booking__layout{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px;
}

.cal-grid--booking{ gap:5px; }
.cal-grid--booking .cal-day{
  min-height:auto;
  aspect-ratio:1;
  padding:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.cal-grid--booking .cal-day__num{ font-size:.82rem; }
.cal-day--has-slots{ border-color:rgba(201,165,75,.3); }
.cal-day--has-slots:hover{ border-color:var(--gold-soft); }
.cal-day--no-slots{ opacity:.3; cursor:default; }
.cal-day--no-slots:hover{ border-color:rgba(255,255,255,.06); }
.cal-day__avail-dot{
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gold-soft);
  margin-top:3px;
}

.cal-booking__slots h4{
  font-family:var(--serif);
  font-size:.96rem;
  margin-bottom:14px;
  color:var(--ink);
}
.cal-booking__slots-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  max-height:280px;
  overflow-y:auto;
}
.cal-slot-btn{
  padding:10px 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:var(--ink);
  font-size:.84rem;
  cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.cal-slot-btn:hover{
  border-color:var(--gold-soft);
  color:var(--gold-soft);
  background:rgba(201,165,75,.08);
}
.cal-slot-btn--confirming{
  border-color:var(--gold);
  background:rgba(201,165,75,.15);
  color:var(--gold-soft);
  cursor:default;
}

@media (max-width:640px){
  .cal-booking__layout{ grid-template-columns:1fr; }
}


/* =========================================================
   PHOTO DE PROFIL — recadreur + avatars
   ========================================================= */
.po-photo-cropper{ max-width:380px; }
.po-photo-cropper__stage{
  display:flex; justify-content:center; align-items:center;
  background:rgba(0,0,0,.3); border-radius:14px; padding:10px;
}
.po-photo-cropper__stage canvas{
  border-radius:50%;
  cursor:grab;
  touch-action:none;
  max-width:100%;
}
.po-photo-cropper__stage canvas:active{ cursor:grabbing; }

.po-avatar{ display:inline-block; vertical-align:middle; }
.po-avatar--initials{ font-weight:600; letter-spacing:.02em; }

.profile-photo-row{
  display:flex; align-items:center; gap:18px; margin-bottom:24px; flex-wrap:wrap;
}
.profile-photo-row__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.profile-photo-row__actions input[type="file"]{ display:none; }

.client-row-avatar{ display:flex; align-items:center; gap:10px; }
.day-appt-row__avatar{ flex-shrink:0; }
.drawer__avatar-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }

/* =========================================================
   CALENDRIER ADMIN — vues Semaine / Jour (TASK_007)
   ========================================================= */
.cal-view-switch{
  display:flex; gap:4px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:3px;
}
.cal-view-switch button{
  border:none; background:transparent; color:var(--ink-dim);
  font-size:.8rem; padding:6px 14px; border-radius:8px;
  cursor:pointer; font-family:var(--sans); transition:background .15s ease, color .15s ease;
}
.cal-view-switch button[aria-selected="true"]{
  background:rgba(201,165,75,.16); color:var(--gold-soft);
}
.cal-view-switch button:hover{ color:var(--ink); }

/* ---- Vue Semaine ---- */
.cal-week{
  display:grid;
  grid-template-columns:52px repeat(7, 1fr);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  overflow:hidden;
}
.cal-week__corner{ background:rgba(255,255,255,.02); }
.cal-week__head{
  text-align:center; padding:10px 4px;
  background:rgba(255,255,255,.03);
  border-left:1px solid rgba(255,255,255,.06);
  cursor:pointer;
}
.cal-week__head:hover{ background:rgba(255,255,255,.05); }
.cal-week__head--today{ background:rgba(201,165,75,.08); }
.cal-week__head--selected{ box-shadow:inset 0 -2px 0 var(--gold); }
.cal-week__head-dow{ font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim); }
.cal-week__head-num{ font-family:var(--serif); font-size:1.05rem; margin-top:2px; }

.cal-week__hours{
  position:relative;
  background:rgba(255,255,255,.01);
}
.cal-week__hour-label{
  position:absolute; left:0; right:6px; text-align:right;
  font-size:.66rem; color:var(--ink-dim); transform:translateY(-50%);
}
.cal-week__col{
  position:relative;
  border-left:1px solid rgba(255,255,255,.06);
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 1px, transparent 1px, transparent var(--cal-hour-h));
}
.cal-week__col--dragover{ background-color:rgba(201,165,75,.06); }

/* ---- Vue Jour ---- */
.cal-day-timeline{
  display:grid;
  grid-template-columns:60px 1fr;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  overflow:hidden;
}
.cal-day-timeline__hours{ position:relative; background:rgba(255,255,255,.02); }
.cal-day-timeline__hour-label{
  position:absolute; left:0; right:8px; text-align:right;
  font-size:.7rem; color:var(--ink-dim); transform:translateY(-50%);
}
.cal-day-timeline__col{
  position:relative;
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent var(--cal-hour-h));
}
.cal-day-timeline__col--dragover{ background-color:rgba(201,165,75,.06); }

/* ---- Blocs de rendez-vous positionnés (semaine + jour) ---- */
.cal-timeline-appt{
  position:absolute;
  left:3px; right:3px;
  border-radius:7px;
  padding:3px 7px;
  font-size:.7rem;
  line-height:1.25;
  overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.cal-timeline-appt strong{ display:block; font-size:.72rem; }
.cal-timeline-appt:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.cal-timeline-appt--pending{ background:rgba(201,165,75,.22); color:var(--gold-soft); }
.cal-timeline-appt--awaiting_confirmation{ background:rgba(201,165,75,.22); color:var(--gold-soft); }
.cal-timeline-appt--confirmed{ background:rgba(31,165,106,.25); color:#bdf2d6; }
.cal-timeline-appt--declined{ background:rgba(220,80,80,.22); color:#f5b8b8; text-decoration:line-through; }
.cal-timeline-appt--rescheduled{ background:rgba(62,111,255,.22); color:#c2d1ff; }
.cal-timeline-appt--cancelled{ background:rgba(255,255,255,.05); color:var(--ink-dim); text-decoration:line-through; }
.cal-timeline-appt--completed, .cal-timeline-appt--done{ background:rgba(255,255,255,.08); color:var(--ink-dim); }
.cal-timeline-appt--blocked{ background:rgba(232,116,59,.22); color:#f6c5a4; }

@media (max-width: 860px) {
  .cal-week{ grid-template-columns:36px repeat(7, minmax(64px,1fr)); overflow-x:auto; }
  .cal-week__head-dow{ font-size:.6rem; }
}

/* ---- Indicateur "heure courante" dans les vues Semaine / Jour ---- */
.cal-now-indicator{
  position:absolute; left:0; right:0; height:2px;
  background:var(--gold);
  z-index:3; pointer-events:none;
}
.cal-now-indicator::before{
  content:''; position:absolute;
  left:-4px; top:-4px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--gold);
}

/* ---- Contenu enrichi des blocs rendez-vous timeline ---- */
.cal-timeline-appt__header{
  display:flex; align-items:center; gap:4px; margin-bottom:1px;
}
.cal-timeline-appt__header strong{ font-size:.68rem; line-height:1; }
.cal-timeline-appt__name{ display:block; font-size:.72rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-timeline-appt__service{ display:block; font-size:.65rem; opacity:.72; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Curseur de la colonne timeline pour signaler le double-clic ---- */
.cal-week__col, .cal-day-timeline__col{ cursor:crosshair; }
.cal-week__col [data-tl-appt], .cal-day-timeline__col [data-tl-appt]{ cursor:pointer; }

/* ---- Portail Pierre-Olivier (figure centrale du hero) ---- */
/* Zone centrée sur la silhouette de l'homme dans l'illustration.
   Ajuster left/top/width/height si l'image est recadrée différemment. */
.hero__portal--pierre{
  left:38%; top:18%;
  width:24%; height:52%;
  border-radius:50% 50% 40% 40%;
  background:transparent;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
  transform-origin:center bottom;
}
.hero__portal--pierre:hover,
.hero__portal--pierre:focus-visible{
  background:radial-gradient(ellipse at 50% 60%, rgba(201,165,75,.10) 0%, transparent 70%);
  box-shadow:0 0 60px 10px rgba(201,165,75,.12), 0 0 120px 20px rgba(201,165,75,.06);
  transform:scale(1.025);
  outline:none;
}
.hero__portal--pierre:focus-visible{
  box-shadow:0 0 0 2px rgba(201,165,75,.5), 0 0 60px 10px rgba(201,165,75,.18);
}

/* ---- Bouton supprimer dans la liste Messenger ---- */
.messenger-delete-conv{
  opacity:0;
  transition:opacity .15s;
  margin-left:auto;
  flex-shrink:0;
}
.messenger-list__item:hover .messenger-delete-conv,
.messenger-list__item:focus-within .messenger-delete-conv{
  opacity:1;
}
.messenger-list__item-top{ display:flex; align-items:center; gap:6px; }

/* ---- Prose Soins Énergétiques / Accompagnement 1:1 ---- */
.se-prose{
  max-width:700px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.se-prose p{
  font-family:var(--garamond);
  font-size:1.12rem;
  line-height:1.85;
  color:#ffffff;
  font-weight:700;
}
.se-prose strong{
  color:#ffffff;
  font-weight:700;
}

/* ---- Liste Accompagnement 1:1 (repli, remplacée par .svc-grid) ---- */
.ac-list{
  list-style:none;
  padding:0; margin:0 auto;
  max-width:700px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ac-list__item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-family:var(--garamond);
  font-size:1.06rem;
  line-height:1.72;
  color:#ffffff;
  font-weight:700;
}
.ac-list__dot{
  flex-shrink:0;
  margin-top:3px;
  font-size:.8rem;
  color:var(--gold-soft);
  opacity:.85;
}

/* =========================================================
   SECTIONS DÉTAILLÉES DE SERVICE
   (Soins Énergétiques / Accompagnement 1:1 — pilotées par
   l'admin via PO_Content.servicePages, voir script.js)
   ========================================================= */

/* Chaque étape admin (.svc-block) respire dans sa propre bande,
   séparée de la précédente par un simple filet — cohérent avec
   les filets déjà utilisés ailleurs sur le site plutôt que
   d'introduire un nouveau motif graphique. */
.svc-block{ position:relative; }
.svc-block:not(:first-child){
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:76px;
}

.svc-block__head{
  text-align:center;
  max-width:720px;
  margin:0 auto 38px;
}
.svc-eyebrow{
  font-family:var(--garamond);
  font-style:italic;
  font-size:1rem;
  color:var(--accent-soft);
  margin-bottom:10px;
}
.svc-heading{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.32;
  margin-bottom:22px;
}

/* Séparateur signature : reprend le rune de la page (🜃 / 🜄), déjà
   affiché dans le hero, pour marquer chaque nouvelle section sans
   introduire un élément graphique déconnecté de l'identité du site. */
.svc-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  max-width:260px;
  margin:0 auto 26px;
}
.svc-divider__line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent));
}
.svc-divider__line:last-child{
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
}
.svc-divider__glyph{
  font-size:1.05rem;
  line-height:1;
  color:var(--accent-soft);
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent));
}

.svc-lead{
  font-family:var(--garamond);
  font-style:italic;
  font-size:1.14rem;
  line-height:1.7;
  color:#ffffff;
  font-weight:600;
  max-width:620px;
  margin:0 auto 34px;
  text-align:center;
}

/* Encadré principal pour les sections en texte suivi */
.svc-card{
  max-width:820px;
  margin:0 auto;
  padding:clamp(28px,4vw,52px);
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
}
.svc-card .se-prose{ max-width:none; }

/* Grille de cartes individuelles pour les sections en liste
   (ex. "À quoi peut servir cet accompagnement ?") */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  max-width:980px;
  margin:0 auto;
}
.svc-grid__card{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:24px 22px;
  border-radius:calc(var(--radius) - 4px);
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.svc-grid__card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
}
.svc-grid__icon{
  flex-shrink:0;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-size:1rem;
  color:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.svc-grid__card p{
  font-family:var(--garamond);
  font-size:1.05rem;
  line-height:1.6;
  color:#ffffff;
  font-weight:700;
}

/* Note de clôture, mise en avant discrètement */
.svc-outro{
  max-width:700px;
  margin:32px auto 0;
  padding-left:18px;
  border-left:2px solid var(--accent);
  font-family:var(--garamond);
  font-style:italic;
  font-size:1.06rem;
  line-height:1.65;
  color:#ffffff;
  font-weight:600;
  text-align:left;
}

@media (max-width:760px){
  .svc-block:not(:first-child){ padding-top:52px; }
  .svc-block__head{ margin-bottom:30px; }
  .svc-card{ padding:26px 22px; }
  .svc-grid{ gap:16px; }
  .svc-grid__card{ padding:20px 18px; }
  .svc-outro{ margin-left:4px; }
}

/* =========================================================
   MÉDIATHÈQUE — grille d'images
   ========================================================= */
.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:14px;
  margin-top:18px;
}
.media-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .2s, transform .2s;
}
.media-card:hover, .media-card:focus-visible{
  border-color:rgba(201,165,75,.4);
  transform:translateY(-2px);
  outline:none;
}
.media-card__thumb{
  width:100%; aspect-ratio:4/3;
  overflow:hidden; background:rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
}
.media-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.media-card__name{
  padding:8px 10px 2px;
  font-size:.78rem; font-weight:500; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.media-card__folder{
  padding:0 10px 8px;
  font-size:.7rem; color:var(--ink-dim);
}

/* =========================================================
   AUTOMATISATIONS — style des cartes
   ========================================================= */
.auto-card{ border-left:3px solid rgba(201,165,75,.3); }
.auto-card.disabled{ opacity:.5; }