/* ═══════════════════════════════════════════════════════════════════════════
   STUDIO PULSE — site.css  ·  V3 (refinement : header compact, grilles & cards)
   Démo métier GridCore.lu · Personal trainer / coaching privé · Luxembourg
   Préfixe : .sp-  ·  Typo : Sora (titres) + Inter (corps)  ·  Accents : or + teal
   ───────────────────────────────────────────────────────────────────────────
   THÈMES : composants → tokens sémantiques (--sp-bg, --sp-text, --sp-surface…).
   Chaque <section> porte .sp-theme-dark / .sp-theme-light / .sp-theme-light-warm.
   ALIGNEMENT : conteneur unique .sp-wrap (1160px) · rythme vertical régulier ·
   grilles repeat(N,minmax(0,1fr)) · cards flex à hauteur égale.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Base (palette + structure) ────────────────────────────────────────── */
:root{
  --sp-display:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --sp-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Conteneur & rythme */
  --sp-maxw:1160px;
  --sp-gutter:20px;
  --sp-radius-sm:12px; --sp-radius:16px; --sp-radius-lg:22px; --sp-radius-xl:30px;
  --sp-ease:cubic-bezier(.16,1,.3,1);

  /* Header compact */
  --sp-demobar-h:30px; --sp-nav-h:58px; --sp-nav-h-stuck:50px;
  --sp-header-offset:calc(var(--sp-demobar-h) + var(--sp-nav-h)); /* 90px */

  /* Accents GridCore */
  --sp-gold:#d6aa57; --sp-gold-soft:#ebc778; --sp-gold-deep:#b1812f;
  --sp-gold-grad:linear-gradient(135deg,#f1cf86,#d6aa57 60%,#bd8e3c);
  --sp-on-gold:#211603;
  --sp-teal:#2cb7b1; --sp-teal-soft:#62d2cc; --sp-teal-deep:#0f6f6a;

  /* Palette sombre */
  --sp-bg-dark:#07111a; --sp-bg-dark-2:#0c1824;
  --sp-surface-dark:#101c29; --sp-surface-dark-2:#142232;
  --sp-text-on-dark:#eef4f8;
  --sp-text-soft-on-dark:rgba(238,244,248,.72);
  --sp-text-faint-on-dark:rgba(238,244,248,.48);
  --sp-line-on-dark:rgba(238,244,248,.12);
  --sp-line-on-dark-strong:rgba(238,244,248,.22);

  /* Palette claire */
  --sp-bg-light:#f4f0e8; --sp-bg-light-2:#ece6dc;
  --sp-surface-light:#fffdf8; --sp-surface-light-2:#f7f2ea;
  --sp-text-on-light:#0f1720;
  --sp-text-soft-on-light:#44505d;
  --sp-text-faint-on-light:#7c8794;
  --sp-line-on-light:rgba(15,23,32,.12);
  --sp-line-on-light-strong:rgba(15,23,32,.22);

  /* Ombres */
  --sp-shadow-dark:0 30px 70px -40px rgba(0,0,0,.7);
  --sp-shadow-dark-soft:0 20px 48px -32px rgba(0,0,0,.55);
  --sp-shadow-light:0 24px 56px -34px rgba(43,38,26,.22);
  --sp-shadow-light-soft:0 14px 38px -26px rgba(43,38,26,.14);
}

/* ── 2. Thèmes sémantiques ─────────────────────────────────────────────────── */
.sp-theme-dark{
  --sp-bg:var(--sp-bg-dark); --sp-bg-2:var(--sp-bg-dark-2);
  --sp-surface:var(--sp-surface-dark); --sp-surface-2:var(--sp-surface-dark-2);
  --sp-text:var(--sp-text-on-dark); --sp-text-soft:var(--sp-text-soft-on-dark); --sp-text-faint:var(--sp-text-faint-on-dark);
  --sp-line:var(--sp-line-on-dark); --sp-line-strong:var(--sp-line-on-dark-strong);
  --sp-shadow:var(--sp-shadow-dark); --sp-shadow-soft:var(--sp-shadow-dark-soft);
  --sp-accent:var(--sp-gold-soft); --sp-accent-2:var(--sp-teal-soft); --sp-eyebrow:var(--sp-teal-soft);
  --sp-card-grad:linear-gradient(170deg,rgba(20,34,50,.72),rgba(12,24,36,.62));
  --sp-card-grad-2:linear-gradient(170deg,rgba(38,33,20,.5),rgba(12,24,36,.6));
  --sp-input-bg:rgba(7,17,26,.55); --sp-chip-bg:rgba(238,244,248,.05);
  --sp-ico-gold-bg:radial-gradient(120% 120% at 30% 20%,rgba(214,170,87,.22),rgba(214,170,87,.05));
  --sp-ico-teal-bg:radial-gradient(120% 120% at 30% 20%,rgba(44,183,177,.22),rgba(44,183,177,.05));
  color-scheme:dark;
}
.sp-theme-light{
  --sp-bg:var(--sp-bg-light); --sp-bg-2:var(--sp-bg-light-2);
  --sp-surface:var(--sp-surface-light); --sp-surface-2:var(--sp-surface-light-2);
  --sp-text:var(--sp-text-on-light); --sp-text-soft:var(--sp-text-soft-on-light); --sp-text-faint:var(--sp-text-faint-on-light);
  --sp-line:var(--sp-line-on-light); --sp-line-strong:var(--sp-line-on-light-strong);
  --sp-shadow:var(--sp-shadow-light); --sp-shadow-soft:var(--sp-shadow-light-soft);
  --sp-accent:var(--sp-gold-deep); --sp-accent-2:var(--sp-teal-deep); --sp-eyebrow:var(--sp-teal-deep);
  --sp-card-grad:linear-gradient(170deg,var(--sp-surface-light),var(--sp-surface-light-2));
  --sp-card-grad-2:linear-gradient(170deg,#fdf6e9,#f5ecdb);
  --sp-input-bg:var(--sp-surface-light); --sp-chip-bg:rgba(15,23,32,.04);
  --sp-ico-gold-bg:radial-gradient(120% 120% at 30% 20%,rgba(214,170,87,.2),rgba(214,170,87,.07));
  --sp-ico-teal-bg:radial-gradient(120% 120% at 30% 20%,rgba(44,183,177,.18),rgba(44,183,177,.06));
  color-scheme:light;
}
.sp-theme-light-warm{
  --sp-bg:var(--sp-bg-light-2); --sp-bg-2:#e4dccd;
  --sp-surface:var(--sp-surface-light); --sp-surface-2:#f2ebdf;
  --sp-text:var(--sp-text-on-light); --sp-text-soft:var(--sp-text-soft-on-light); --sp-text-faint:var(--sp-text-faint-on-light);
  --sp-line:var(--sp-line-on-light); --sp-line-strong:var(--sp-line-on-light-strong);
  --sp-shadow:var(--sp-shadow-light); --sp-shadow-soft:var(--sp-shadow-light-soft);
  --sp-accent:var(--sp-gold-deep); --sp-accent-2:var(--sp-teal-deep); --sp-eyebrow:var(--sp-teal-deep);
  --sp-card-grad:linear-gradient(170deg,var(--sp-surface-light),#f3ecdf);
  --sp-card-grad-2:linear-gradient(170deg,#fdf6e9,#f5ecdb);
  --sp-input-bg:var(--sp-surface-light); --sp-chip-bg:rgba(15,23,32,.04);
  --sp-ico-gold-bg:radial-gradient(120% 120% at 30% 20%,rgba(214,170,87,.2),rgba(214,170,87,.07));
  --sp-ico-teal-bg:radial-gradient(120% 120% at 30% 20%,rgba(44,183,177,.18),rgba(44,183,177,.06));
  color-scheme:light;
}

/* ── 3. Reset & base ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;font-family:var(--sp-body);
  font-size:clamp(1rem,.96rem + .3vw,1.06rem);line-height:1.65;
  color:var(--sp-text-on-dark);background:var(--sp-bg-dark);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
ul{margin:0;padding:0;list-style:none}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sp-teal);outline-offset:3px;border-radius:8px}
::selection{background:rgba(214,170,87,.3);color:#fff}
[id]{scroll-margin-top:calc(var(--sp-header-offset) + 12px)}

/* ── 4. Typo ───────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--sp-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0;color:var(--sp-text)}
h1{font-size:clamp(2.7rem,1.7rem + 4.4vw,5rem);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:clamp(1.95rem,1.45rem + 2.2vw,3rem);letter-spacing:-.03em;text-wrap:balance}
h3{font-size:clamp(1.16rem,1.04rem + .48vw,1.4rem);font-weight:600}
p{margin:0}

/* ── 5. Conteneur & sections (rythme unifié) ───────────────────────────────── */
.sp-wrap{width:min(100% - calc(var(--sp-gutter) * 2),var(--sp-maxw));margin-inline:auto}
.sp-section{position:relative;padding:clamp(60px,7.6vw,108px) 0;background:var(--sp-bg);color:var(--sp-text)}
.sp-section--tight{padding:clamp(48px,5.6vw,76px) 0}
.sp-head{margin-bottom:clamp(30px,3.6vw,44px)}
.sp-head--center{text-align:center;max-width:760px;margin-inline:auto}
.sp-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--sp-display);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sp-eyebrow);margin-bottom:16px}
.sp-eyebrow::before{content:"";width:26px;height:1.5px;background:linear-gradient(90deg,currentColor,transparent)}
.sp-head--center .sp-eyebrow::before{display:none}
.sp-lead{margin-top:16px;color:var(--sp-text-soft);font-size:clamp(1.02rem,.98rem + .38vw,1.2rem);max-width:62ch}
.sp-head--center .sp-lead{margin-inline:auto}
.sp-accent{color:var(--sp-accent)}
.sp-accent-2{color:var(--sp-accent-2)}

/* ── 6. Boutons ────────────────────────────────────────────────────────────── */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;font-family:var(--sp-body);font-weight:600;font-size:.95rem;white-space:nowrap;border:1px solid transparent;transition:transform .25s var(--sp-ease),box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease}
.sp-btn svg{width:18px;height:18px;flex:none}
.sp-btn--primary{color:var(--sp-on-gold);background:var(--sp-gold-grad);box-shadow:0 14px 30px -14px rgba(214,170,87,.6),inset 0 1px 0 rgba(255,255,255,.42)}
.sp-btn--primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(214,170,87,.72),inset 0 1px 0 rgba(255,255,255,.48)}
.sp-btn--ghost{color:var(--sp-text);border-color:var(--sp-line-strong);background:transparent}
.sp-btn--ghost:hover{transform:translateY(-2px);border-color:var(--sp-accent);color:var(--sp-accent)}
.sp-btn--glass{color:var(--sp-text-on-dark);border-color:rgba(238,244,248,.18);background:rgba(238,244,248,.07);backdrop-filter:blur(10px)}
.sp-btn--glass:hover{transform:translateY(-2px);border-color:var(--sp-teal-soft);background:rgba(238,244,248,.11)}
.sp-btn--teal{color:#03201f;background:linear-gradient(135deg,var(--sp-teal-soft),var(--sp-teal));box-shadow:0 14px 30px -16px rgba(44,183,177,.6)}
.sp-btn--teal:hover{transform:translateY(-2px)}
.sp-btn--lg{min-height:54px;padding-inline:28px;font-size:1.01rem}
.sp-btn--sm{min-height:42px;padding-inline:18px;font-size:.9rem}
.sp-btn--block{width:100%}
.sp-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--sp-accent);font-size:.95rem}
.sp-link svg{width:17px;height:17px;transition:transform .25s var(--sp-ease)}
.sp-link:hover svg{transform:translateX(4px)}

/* ── 7. Cards & icônes (hauteur égale) ─────────────────────────────────────── */
.sp-card{
  position:relative;display:flex;flex-direction:column;height:100%;
  border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);
  background:var(--sp-card-grad);box-shadow:var(--sp-shadow-soft);
  padding:clamp(22px,2.6vw,28px);
  transition:transform .3s var(--sp-ease),border-color .3s ease,box-shadow .3s ease;
}
.sp-card:hover{transform:translateY(-4px);border-color:var(--sp-line-strong);box-shadow:var(--sp-shadow)}
.sp-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:13px;margin-bottom:16px;color:var(--sp-accent);background:var(--sp-ico-gold-bg);border:1px solid rgba(214,170,87,.3)}
.sp-ico--teal{color:var(--sp-accent-2);background:var(--sp-ico-teal-bg);border-color:rgba(44,183,177,.32)}
.sp-ico svg{width:23px;height:23px}
.sp-card h3{margin-bottom:8px;color:var(--sp-text)}
.sp-card p{color:var(--sp-text-soft);font-size:.96rem}

/* ── 8. Reveal au scroll ───────────────────────────────────────────────────── */
.sp-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--sp-ease),transform .7s var(--sp-ease)}
.sp-reveal.is-in{opacity:1;transform:none}
.sp-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s var(--sp-ease),transform .6s var(--sp-ease)}
.sp-stagger.is-in>*{opacity:1;transform:none}
.sp-stagger.is-in>*:nth-child(1){transition-delay:0ms}
.sp-stagger.is-in>*:nth-child(2){transition-delay:70ms}
.sp-stagger.is-in>*:nth-child(3){transition-delay:140ms}
.sp-stagger.is-in>*:nth-child(4){transition-delay:210ms}
.sp-stagger.is-in>*:nth-child(5){transition-delay:280ms}
.sp-stagger.is-in>*:nth-child(6){transition-delay:350ms}

/* ── 9. Barre démo GridCore ────────────────────────────────────────────────── */
.sp-db{position:fixed;top:0;left:0;right:0;z-index:300;min-height:var(--sp-demobar-h);display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,20px);padding:0 14px;background:linear-gradient(90deg,#060d15,#0e1c2a 50%,#060d15);border-bottom:1px solid rgba(214,170,87,.26);color:var(--sp-text-soft-on-dark);font-size:11px;white-space:nowrap;overflow:hidden}
.sp-db-txt b{color:var(--sp-gold-soft);font-weight:600}
.sp-db-cta{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:2px 11px;border-radius:999px;background:var(--sp-gold-grad);color:var(--sp-on-gold);font-weight:600;font-size:11px;transition:transform .22s var(--sp-ease),box-shadow .22s ease}
.sp-db-cta svg{width:13px;height:13px}
.sp-db-cta:hover{transform:translateY(-1px);box-shadow:0 9px 18px -8px rgba(214,170,87,.6)}

/* ── 10. Header (compact, tendu) ───────────────────────────────────────────── */
.sp-header{position:fixed;top:var(--sp-demobar-h);left:0;right:0;z-index:220;height:var(--sp-nav-h);display:flex;align-items:center;background:rgba(7,17,26,.5);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid transparent;transition:height .3s var(--sp-ease),background .3s ease,border-color .3s ease,box-shadow .3s ease}
.sp-header.is-stuck{height:var(--sp-nav-h-stuck);background:rgba(7,17,26,.82);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:rgba(255,255,255,.08);box-shadow:0 10px 30px -24px rgba(0,0,0,.9)}
.sp-header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.sp-logo{grid-column:1;display:inline-flex;align-items:center;gap:8px}
.sp-logo svg{width:30px;height:30px;transition:width .3s var(--sp-ease),height .3s var(--sp-ease)}
.sp-header.is-stuck .sp-logo svg{width:28px;height:28px}
.sp-logo-txt{display:flex;flex-direction:column;line-height:1.05}
.sp-logo-txt b{font-family:var(--sp-display);font-weight:700;font-size:15px;line-height:1;letter-spacing:-.01em;color:var(--sp-text-on-dark)}
.sp-logo-txt span{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-text-faint-on-dark);margin-top:2px}
.sp-menu{display:none;grid-column:2;justify-self:center}
.sp-menu ul{display:flex;align-items:center;gap:18px}
.sp-menu a{font-family:var(--sp-display);font-weight:500;font-size:13px;color:var(--sp-text-soft-on-dark);position:relative;padding:6px 0;transition:color .22s ease}
.sp-menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--sp-gold);border-radius:2px;transition:right .28s var(--sp-ease)}
.sp-menu a:hover,.sp-menu a.is-active{color:var(--sp-text-on-dark)}
.sp-menu a:hover::after,.sp-menu a.is-active::after{right:0}
.sp-menu a.is-active::after{background:var(--sp-teal)}
.sp-nav-cta{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.sp-header-btn{display:none;min-height:38px;padding-inline:16px;font-size:13px}
.sp-lang{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--sp-line-on-dark);background:rgba(238,244,248,.03)}
.sp-lang a,.sp-lang span{padding:4px 9px;border-radius:999px;font-size:.72rem;font-weight:600;color:var(--sp-text-faint-on-dark);line-height:1}
.sp-lang span{opacity:.4;cursor:default}
.sp-lang a[aria-current="page"]{background:var(--sp-gold-grad);color:var(--sp-on-gold)}
.sp-nav-cta .sp-lang{display:none}
.sp-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;border-radius:11px;border:1px solid var(--sp-line-on-dark-strong);background:rgba(238,244,248,.04)}
.sp-burger span{display:block;width:18px;height:2px;margin-inline:auto;background:var(--sp-text-on-dark);border-radius:2px;transition:transform .3s var(--sp-ease),opacity .2s ease}
.sp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sp-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.sp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu mobile */
.sp-scrim{position:fixed;inset:0;z-index:230;background:rgba(4,9,14,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.sp-scrim[hidden]{display:none}
.sp-scrim.is-open{opacity:1}
.sp-mobile{position:fixed;top:0;right:0;z-index:240;width:min(86vw,360px);height:100svh;padding:calc(var(--sp-demobar-h) + 22px) 26px 30px;display:flex;flex-direction:column;gap:4px;background:linear-gradient(180deg,#0e1b27,#070f17);border-left:1px solid var(--sp-line-on-dark-strong);box-shadow:-30px 0 80px -40px rgba(0,0,0,.9);transform:translateX(102%);transition:transform .36s var(--sp-ease);overflow-y:auto}
.sp-mobile.is-open{transform:none}
.sp-mobile a:not(.sp-btn){padding:13px 4px;font-family:var(--sp-display);font-weight:500;font-size:1.05rem;color:var(--sp-text-on-dark);border-bottom:1px solid var(--sp-line-on-dark)}
.sp-mobile a:not(.sp-btn):hover{color:var(--sp-gold-soft)}
.sp-mobile .sp-btn{margin-top:18px}
.sp-mobile-foot{margin-top:auto;padding-top:20px;font-size:.82rem;color:var(--sp-text-faint-on-dark)}

/* ── 11. Hero (présence renforcée) ─────────────────────────────────────────── */
.sp-hero{position:relative;overflow:hidden;padding:calc(var(--sp-header-offset) + clamp(34px,5.5vw,64px)) 0 clamp(54px,7vw,92px);background:radial-gradient(1000px 680px at 80% -6%,rgba(214,170,87,.16),transparent 58%),radial-gradient(820px 640px at 4% 18%,rgba(44,183,177,.13),transparent 56%),linear-gradient(180deg,#081320,#07111a 60%,#0a1622);color:var(--sp-text-on-dark)}
.sp-hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4.5vw,54px);align-items:center}
.sp-hero h1{margin-top:18px;color:var(--sp-text-on-dark);font-size:clamp(2.55rem,1.5rem + 3.4vw,4.4rem)}
.sp-hero h1 em{display:block;font-style:normal;color:var(--sp-gold-soft);white-space:nowrap}
.sp-hero-lead{margin-top:22px;color:var(--sp-text-soft-on-dark);font-size:clamp(1.05rem,1rem + .5vw,1.26rem);max-width:50ch}
.sp-hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.sp-hero-badges{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.sp-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:.82rem;font-weight:500;color:var(--sp-text-soft-on-dark);border:1px solid var(--sp-line-on-dark);background:rgba(238,244,248,.04)}
.sp-badge svg{width:15px;height:15px;color:var(--sp-teal-soft)}
.sp-hero-proof{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px 28px;padding-top:24px;border-top:1px solid var(--sp-line-on-dark)}
.sp-proof-item{display:flex;flex-direction:column;line-height:1.2}
.sp-proof-item b{font-family:var(--sp-display);font-weight:700;font-size:1.04rem;color:var(--sp-text-on-dark)}
.sp-proof-item span{font-size:.77rem;letter-spacing:.03em;color:var(--sp-text-faint-on-dark);margin-top:3px}
.sp-hero-figure{position:relative}
.sp-hero-card{position:relative;border-radius:var(--sp-radius-xl);overflow:hidden;border:1px solid var(--sp-line-on-dark-strong);box-shadow:var(--sp-shadow-dark);background:linear-gradient(160deg,#142232,#081320);aspect-ratio:4/5}
.sp-hero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(152deg,rgba(214,170,87,.16),transparent 40%),linear-gradient(to top,rgba(6,13,20,.74),transparent 50%);pointer-events:none}
.sp-floats{position:absolute;inset:0;z-index:2;pointer-events:none}
.sp-float{position:absolute;display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:14px;background:rgba(8,15,23,.8);backdrop-filter:blur(10px);border:1px solid var(--sp-line-on-dark-strong);box-shadow:var(--sp-shadow-dark-soft)}
.sp-float-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(214,170,87,.16);color:var(--sp-gold-soft);flex:none}
.sp-float.is-teal .sp-float-ic{background:rgba(44,183,177,.16);color:var(--sp-teal-soft)}
.sp-float-ic svg{width:18px;height:18px}
.sp-float-txt{display:flex;flex-direction:column;line-height:1.15}
.sp-float-txt b{font-family:var(--sp-display);font-weight:700;font-size:.94rem;color:var(--sp-text-on-dark)}
.sp-float-txt small{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sp-text-soft-on-dark);margin-top:2px}
.sp-float--tl{top:18px;left:-14px}
.sp-float--ml{top:50%;right:-16px;transform:translateY(-50%)}
.sp-float--br{bottom:20px;left:-14px}

/* ── 12. Grilles (alignées, hauteur égale) ─────────────────────────────────── */
.sp-grid-2,.sp-grid-3,.sp-trust-grid,.sp-steps,.sp-prog-mini-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch}

/* ── 13. Méthode (étapes) ──────────────────────────────────────────────────── */
.sp-step{position:relative}
.sp-step .sp-step-num{font-family:var(--sp-display);font-weight:700;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;margin-bottom:14px;color:var(--sp-on-gold);background:var(--sp-gold-grad);box-shadow:0 12px 24px -14px rgba(214,170,87,.55)}

/* ── 14. Programmes ────────────────────────────────────────────────────────── */
.sp-prog-feature{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;padding:0;border:1px solid var(--sp-line-strong);border-radius:var(--sp-radius-xl);background:var(--sp-card-grad-2);box-shadow:var(--sp-shadow);margin-bottom:18px}
.sp-prog-feature-body{padding:clamp(26px,3.2vw,38px);display:flex;flex-direction:column}
.sp-prog-feature-media{position:relative;min-height:260px;overflow:hidden}
.sp-prog-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-prog-feature-media::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(7,17,26,.92),rgba(7,17,26,.12) 36%,transparent 62%);pointer-events:none}
.sp-prog-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:var(--sp-display);font-size:.67rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sp-accent-2);margin-bottom:13px}
.sp-prog-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sp-prog-feature-body h3{font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem);color:var(--sp-text)}
.sp-prog-feature-body>p{margin-top:11px;color:var(--sp-text-soft);font-size:1rem;max-width:48ch}
.sp-prog-meta{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px 0;border-top:1px solid var(--sp-line);border-bottom:1px solid var(--sp-line)}
.sp-prog-meta div{display:flex;flex-direction:column;gap:4px;min-width:0}
.sp-prog-meta dt{font-family:var(--sp-display);font-size:.63rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--sp-text-faint)}
.sp-prog-meta dd{margin:0;font-size:.88rem;font-weight:500;color:var(--sp-text)}
.sp-prog-feature-foot{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.sp-prog-feature-foot .sp-price{margin-right:auto}
.sp-prog-mini{padding:0;overflow:hidden}
.sp-prog-mini-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.sp-prog-mini-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-prog-mini-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,17,26,.5),transparent 60%);pointer-events:none}
/* carte « Coaching online » : atténuer les textes/UI artificiels du laptop */
.sp-prog-mini-media--screen img{filter:brightness(.8) saturate(.94) blur(.5px);object-position:center 42%;transform:scale(1.04)}
.sp-prog-mini-media--screen::after{background:linear-gradient(to top,rgba(7,17,26,.6),rgba(7,17,26,.16) 55%,rgba(7,17,26,.34))}
.sp-prog-mini-body{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;flex:1}
.sp-prog-list{margin:16px 0 0;display:grid;gap:10px}
.sp-prog-list li{display:flex;gap:11px;align-items:flex-start;font-size:.91rem;color:var(--sp-text-soft)}
.sp-prog-list svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--sp-accent-2)}
.sp-prog-foot{margin-top:auto;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--sp-line)}
.sp-price{display:flex;flex-direction:column;line-height:1.1}
.sp-price b{font-family:var(--sp-display);font-weight:700;font-size:1.04rem;color:var(--sp-text)}
.sp-price span{font-size:.69rem;letter-spacing:.07em;text-transform:uppercase;color:var(--sp-text-faint);margin-top:3px}

/* ── 15. Sections split (image / texte) ────────────────────────────────────── */
.sp-split{display:grid;grid-template-columns:1fr;gap:clamp(30px,4.5vw,56px);align-items:start}
.sp-split--rev .sp-split-media{order:-1}
.sp-figure{position:relative;border-radius:var(--sp-radius-xl);overflow:hidden;border:1px solid var(--sp-line-strong);box-shadow:var(--sp-shadow)}
.sp-figure img{width:100%;height:100%;object-fit:cover;display:block}
.sp-figure--tall{aspect-ratio:4/5}
.sp-figure--wide{aspect-ratio:5/4}
/* coaching-1-1 : cadrage prudent (vers le haut) + voile pour adoucir le close-up */
.sp-figure--soft img{object-position:center 20%}
.sp-figure--soft::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,13,20,.5),transparent 52%),linear-gradient(120deg,rgba(6,13,20,.28),transparent 45%);pointer-events:none}
.sp-figure-cap{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(8,15,23,.76);backdrop-filter:blur(8px);border:1px solid rgba(238,244,248,.18);color:var(--sp-text-on-dark);font-size:.8rem;font-weight:500}
.sp-figure-cap svg{width:15px;height:15px;color:var(--sp-teal-soft)}
.sp-timeline{display:grid;gap:12px;margin-top:28px}
.sp-tl{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:18px 20px;border-radius:var(--sp-radius);border:1px solid var(--sp-line);background:var(--sp-surface);box-shadow:var(--sp-shadow-soft);transition:border-color .3s ease,transform .3s ease}
.sp-tl:hover{border-color:var(--sp-accent-2);transform:translateX(4px)}
.sp-tl-num{font-family:var(--sp-display);font-weight:700;font-size:1rem;color:var(--sp-accent-2);padding-top:2px}
.sp-tl h3{font-size:1.08rem;margin-bottom:4px;color:var(--sp-text)}
.sp-tl p{color:var(--sp-text-soft);font-size:.92rem}
.sp-checklist{margin-top:24px;display:grid;gap:13px}
.sp-checklist li{display:flex;gap:13px;align-items:flex-start;color:var(--sp-text-soft);font-size:1rem}
.sp-checklist .sp-chk{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:999px;background:var(--sp-ico-teal-bg);border:1px solid rgba(44,183,177,.34);color:var(--sp-accent-2)}
.sp-checklist .sp-chk svg{width:15px;height:15px}

/* ── 16. Zone d'intervention ───────────────────────────────────────────────── */
.sp-zone{border:1px solid var(--sp-line);border-radius:var(--sp-radius-xl);padding:clamp(28px,3.6vw,44px);background:var(--sp-card-grad);box-shadow:var(--sp-shadow-soft)}
.sp-zone-list{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.sp-zone-list li{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--sp-line);background:var(--sp-chip-bg);font-size:.88rem;color:var(--sp-text-soft)}
.sp-zone-list li svg{width:14px;height:14px;color:var(--sp-accent)}
.sp-note{margin-top:20px;font-size:.88rem;color:var(--sp-text-faint);font-style:italic}

/* ── 17. Formulaire / contact (split équilibré) ────────────────────────────── */
.sp-contact{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,44px);align-items:start}
.sp-form{border:1px solid var(--sp-line);border-radius:var(--sp-radius-xl);padding:clamp(24px,3.2vw,38px);background:var(--sp-surface);box-shadow:var(--sp-shadow)}
.sp-field{margin-bottom:16px}
.sp-field--row{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:0}
.sp-field label{display:block;font-family:var(--sp-display);font-weight:500;font-size:.82rem;color:var(--sp-text);margin-bottom:8px}
.sp-field .req{color:var(--sp-accent)}
.sp-input,.sp-select,.sp-textarea{width:100%;min-height:50px;padding:12px 15px;border-radius:13px;border:1px solid var(--sp-line-strong);background:var(--sp-input-bg);color:var(--sp-text);transition:border-color .22s ease,box-shadow .22s ease}
.sp-textarea{min-height:120px;resize:vertical}
.sp-input::placeholder,.sp-textarea::placeholder{color:var(--sp-text-faint)}
.sp-input:focus,.sp-select:focus,.sp-textarea:focus{outline:none;border-color:var(--sp-teal);box-shadow:0 0 0 3px rgba(44,183,177,.18)}
.sp-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%232cb7b1' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:42px}
.sp-form-note{margin-top:6px;font-size:.82rem;color:var(--sp-text-faint)}
.sp-form-result{margin-top:16px;padding:14px 16px;border-radius:13px;border:1px solid rgba(44,183,177,.4);background:rgba(44,183,177,.1);color:var(--sp-teal-deep);font-size:.92rem;font-weight:500}
.sp-form-result:empty{display:none}
.sp-form-alt{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px}
.sp-contact-aside{display:flex;flex-direction:column;gap:16px}
.sp-info-card{display:flex;flex-direction:column;border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);padding:22px;background:var(--sp-card-grad);box-shadow:var(--sp-shadow-soft)}
.sp-info-card h3{font-size:1.04rem;margin-bottom:10px;color:var(--sp-text)}
.sp-info-row{display:flex;align-items:flex-start;gap:12px;padding:7px 0;color:var(--sp-text-soft);font-size:.92rem}
.sp-info-row svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--sp-accent)}

/* ── 18. FAQ ───────────────────────────────────────────────────────────────── */
.sp-faq{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.sp-faq-item{border:1px solid var(--sp-line);border-radius:var(--sp-radius);background:var(--sp-surface);box-shadow:var(--sp-shadow-soft);overflow:hidden;transition:border-color .25s ease}
.sp-faq-item.is-open{border-color:rgba(214,170,87,.4)}
.sp-faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;padding:18px 22px;font-family:var(--sp-display);font-weight:600;font-size:1rem;color:var(--sp-text)}
.sp-faq-q .sp-faq-ico{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--sp-line-strong);color:var(--sp-accent);transition:transform .3s var(--sp-ease),background .3s ease}
.sp-faq-q .sp-faq-ico svg{width:15px;height:15px}
.sp-faq-item.is-open .sp-faq-ico{transform:rotate(45deg);background:var(--sp-ico-gold-bg)}
.sp-faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--sp-ease)}
.sp-faq-a p{padding:0 22px 19px;color:var(--sp-text-soft);font-size:.95rem}

/* ── 19. CTA final ─────────────────────────────────────────────────────────── */
.sp-cta-final{position:relative;border-radius:var(--sp-radius-xl);overflow:hidden;padding:clamp(42px,5.5vw,72px) clamp(26px,4.5vw,56px);text-align:center;border:1px solid rgba(214,170,87,.32);background:linear-gradient(150deg,#15212f,#0a1622 60%,#0e1a14)}
.sp-cta-final::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(214,170,87,.26),transparent 64%);top:-260px;right:-120px;filter:blur(28px);pointer-events:none}
.sp-cta-final::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(44,183,177,.2),transparent 64%);bottom:-250px;left:-120px;filter:blur(28px);pointer-events:none}
.sp-cta-final>*{position:relative;z-index:1}
.sp-cta-final h2{color:var(--sp-text-on-dark)}
.sp-cta-final .sp-lead{margin-inline:auto;color:var(--sp-text-soft-on-dark);max-width:54ch}
.sp-cta-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:13px;justify-content:center}

/* ── 20. Footer ────────────────────────────────────────────────────────────── */
.sp-footer{padding:clamp(52px,6.5vw,80px) 0 34px;background:linear-gradient(180deg,#081320,#060d15);color:var(--sp-text-on-dark);border-top:1px solid var(--sp-line-on-dark)}
.sp-footer-grid{display:grid;grid-template-columns:1fr;gap:34px}
.sp-footer-brand .sp-logo{margin-bottom:14px}
.sp-footer-brand p{color:var(--sp-text-soft-on-dark);font-size:.91rem;max-width:34ch}
.sp-footer-col h4{font-family:var(--sp-display);font-size:.73rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--sp-text-faint-on-dark);margin-bottom:15px}
.sp-footer-col ul{display:grid;gap:10px}
.sp-footer-col a,.sp-footer-col li{color:var(--sp-text-soft-on-dark);font-size:.91rem}
.sp-footer-col a:hover{color:var(--sp-gold-soft)}
.sp-footer-bottom{margin-top:clamp(34px,4.5vw,52px);padding-top:24px;border-top:1px solid var(--sp-line-on-dark);display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.sp-footer-bottom p{font-size:.84rem;color:var(--sp-text-faint-on-dark);max-width:62ch}
.sp-footer-bottom a{color:var(--sp-gold-soft);font-weight:500}
.sp-footer-legal{display:flex;flex-wrap:wrap;gap:18px;font-size:.82rem}
.sp-footer-legal a{color:var(--sp-text-faint-on-dark)}
.sp-footer-legal a:hover{color:var(--sp-text-soft-on-dark)}

/* ── 21. Toast ─────────────────────────────────────────────────────────────── */
.sp-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:400;padding:13px 20px;border-radius:999px;background:rgba(6,13,20,.95);border:1px solid rgba(214,170,87,.42);color:var(--sp-text-on-dark);font-size:.9rem;font-weight:500;box-shadow:var(--sp-shadow-dark);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s var(--sp-ease)}
.sp-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 22. Responsive ────────────────────────────────────────────────────────── */
@media (min-width:600px){
  .sp-trust-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-field--row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-prog-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .sp-db-txt .sp-db-sub{display:inline}
  .sp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:960px){
  .sp-menu{display:block}
  .sp-nav-cta .sp-lang{display:inline-flex}
  .sp-burger{display:none}
  .sp-header-btn{display:inline-flex}
  .sp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp-hero-grid{grid-template-columns:1.05fr .95fr;align-items:stretch}
  .sp-hero-figure{height:100%}
  .sp-hero-card{aspect-ratio:auto;height:100%;min-height:560px}
  .sp-split{grid-template-columns:1fr 1fr}
  .sp-split--media-lg{grid-template-columns:.92fr 1.08fr}
  .sp-prog-feature{grid-template-columns:1.12fr .88fr}
  .sp-prog-feature-media{min-height:100%}
  .sp-contact{grid-template-columns:1.24fr .76fr}
  .sp-footer-grid{grid-template-columns:1.7fr 1fr 1fr 1.2fr}
  .sp-timeline{margin-top:0}
}
@media (min-width:1100px){
  .sp-trust-grid,.sp-grid-3,.sp-prog-mini-grid{gap:22px}
}
@media (max-width:767px){
  :root{--sp-demobar-h:28px;--sp-nav-h:54px}
  .sp-db{font-size:10px}
  .sp-logo-txt b{font-size:14px}
  .sp-logo-txt span{font-size:7.5px}
  .sp-db-txt .sp-db-sub{display:none}
  .sp-float--tl{left:6px}
  .sp-float--br{left:6px}
  .sp-float--ml{right:4px}
}
@media (max-width:380px){
  .sp-db-cta span:not([aria-hidden]){display:none}
}

/* ── 23. Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .sp-reveal,.sp-stagger>*{opacity:1 !important;transform:none !important}
}