/* ─── TOKENS ─────────────────────────────────────── */
:root {
  --bg:       #FAF8F5;
  --bg2:      #F5F0EE;
  --ink:      #1E1C18;
  --ink-l:    #6A6560;
  --ink-ll:   #9A9590;
  --green:    #EBA596;
  --green-l:  #F2C2B8;
  --green-xl: rgba(235,165,150,.1);
  --amber:    #C8A46A;
  --amber-xl: rgba(200,164,106,.1);
  --rose:     #EBA596;
  --rose-l:   #F2C2B8;
  --rose-d:   #C4735F;
  --rose-xl:  rgba(235,165,150,.1);
  --r:        16px;
  --max:      1100px;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--bg); color:var(--ink); font-family:'Cambria',Georgia,serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { text-decoration:none; }

/* ─── TYPOGRAPHY ─────────────────────────────────── */
.eyebrow {
  font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--green);
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
  font-family:'Gliker',sans-serif;
}
.eyebrow::before { content:''; width:22px; height:1.5px; background:var(--green); }

/* H1 — Gliker 44px Bold */
h1 {
  font-family:'Gliker',sans-serif;
  font-size:44px;
  line-height:1.5; letter-spacing:-.01em; font-weight:700;
}
/* H2 — Gliker 32px SemiBold */
h2 {
  font-family:'Gliker',sans-serif;
  font-size:32px;
  line-height:1.5; letter-spacing:-.01em; font-weight:600;
}
/* H3 — Amaranth 24px Medium */
h3 {
  font-family:'Amaranth',sans-serif;
  font-size:24px;
  line-height:1.5; font-weight:400;
}
/* H4 — Amaranth 20px Medium */
h4 {
  font-family:'Amaranth',sans-serif;
  font-size:20px;
  line-height:1.5; font-weight:400;
}

h1 em { font-style:italic; color:var(--green); }
h2 em { font-style:italic; color:var(--green); }

/* Body text — Cambria 16px Regular, line-height 1.15 */
p, li, a, span, div {
  font-family:'Cambria',Georgia,serif;
  line-height:1.15;
}

/* Cambria large — 18px */
.cambria-large { font-size:18px; font-family:'Cambria',Georgia,serif; line-height:1.15; }
/* Cambria — 16px */
.cambria-body { font-size:16px; font-family:'Cambria',Georgia,serif; line-height:1.15; }
/* Cambria small — 14px */
.cambria-small { font-size:14px; font-family:'Cambria',Georgia,serif; }

.sec-sub {
  font-size:16px; color:var(--ink-l); line-height:1.15;
  max-width:480px; font-family:'Cambria',Georgia,serif;
}

/* ─── GRID / CONTAINERS ──────────────────────────── */
.container { max-width:var(--max); margin:0 auto; padding:0 5vw; }
section { position:relative; z-index:1; }

/* ─── BACKGROUND RIBBONS (fixed) ─────────────────── */
.ribbons { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.ribbons svg { width:100%; height:100%; }

/* ─── BUTTONS ────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--green); color:var(--ink);
  padding:14px 32px; border-radius:8px;
  font-family:'Cambria',Georgia,serif; font-size:16px; font-weight:700; letter-spacing:.02em;
  transition:background .2s, transform .15s, box-shadow .2s;
  box-shadow:0 4px 20px rgba(235,165,150,.35);
  line-height:1.15;
}
.btn-primary:hover { background:#C4735F; color:#fff; transform:translateY(-2px); box-shadow:0 8px 32px rgba(235,165,150,.45); }
.btn-primary svg { width:15px; height:15px; flex-shrink:0; }

.btn-outline {
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; color:var(--ink);
  padding:14px 28px; border-radius:8px;
  font-family:'Cambria',Georgia,serif; font-size:16px; font-weight:600;
  border:1.5px solid rgba(30,28,24,.15);
  transition:all .2s;
  line-height:1.15;
}
.btn-outline:hover { border-color:var(--rose-d); color:var(--rose-d); transform:translateY(-2px); }

.btn-outline {
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; color:var(--ink);
  padding:14px 28px; border-radius:8px;
  font-family:'Cambria',Georgia,serif; font-size:16px; font-weight:600;
  border:1.5px solid rgba(30,28,24,.15);
  transition:all .2s;
  line-height:1.15;
}
.btn-outline:hover { border-color:var(--green); color:var(--green); transform:translateY(-2px); }

/* ─── HEADER ─────────────────────────────────────── */
header {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:68px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5vw;
  background:rgba(250,248,245,.94); backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(235,165,150,.1);
}
.hd-logo { display:flex; align-items:center; gap:8px; }
.hd-logo-img {
  height:40px;
  width:40px;
  object-fit:contain;
  mix-blend-mode:multiply;
  flex-shrink:0;
}
.hd-logo-word {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
  line-height:1;
  white-space:nowrap;
}
.hd-right { display:flex; align-items:center; gap:14px; }
.hd-links { display:flex; align-items:center; gap:22px; list-style:none; }
.hd-links a { font-size:14px; font-weight:500; color:var(--ink-l); letter-spacing:.03em; transition:color .2s; font-family:'Cambria',Georgia,serif; line-height:1.15; }
.hd-links a:hover { color:var(--ink); }
.hd-cta {
  background:var(--green); color:var(--ink);
  padding:9px 22px; border-radius:7px;
  font-family:'Cambria',Georgia,serif; font-size:14px; font-weight:700; letter-spacing:.02em;
  transition:background .2s, transform .15s;
  line-height:1.15;
}
.hd-cta:hover { background:#C4735F; color:#fff; transform:translateY(-1px); }
.hd-burger {
  width:38px; height:38px; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:7px; transition:background .15s;
  display:none; /* desktop only for now */
}

/* ─── HERO ───────────────────────────────────────── */
#hero {
  padding: 140px 7vw 80px;
  background: #FAF8F5;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.hero-grid {
  max-width: 1240px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 52%; gap: 40px; align-items: center;
}
.hero-left { display:flex; flex-direction:column; align-items:flex-start; }

.hero-h1 {
  font-family: 'Gliker', sans-serif;
  font-size: clamp(60px, 8vw, 108px);
  font-weight: 700; line-height: 1.0; letter-spacing: -0.03em;
  color: #1c1917; margin: 0 0 32px 0;
}
.hero-h1 em {
  font-style: italic; color: #eea092;
  font-family: 'Amaranth', sans-serif; font-weight: 400;
}
.hero-desc {
  font-family: 'Cambria', Georgia, serif;
  font-size: clamp(16px, 1.4vw, 20px); color: #746f6b;
  line-height: 1.65; max-width: 480px; margin: 0 0 28px 0;
}
.hero-badges { display:flex; flex-wrap:wrap; gap:6px 20px; margin:0 0 36px 0; align-items:center; }
.hero-badge {
  font-family: 'Cambria', Georgia, serif; font-size: 14px; color: #9a9590;
  display:flex; align-items:center; gap:8px;
}
.hero-badge::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background: #eea092; flex-shrink:0;
}
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.hero-btn-primary {
  display:inline-flex; align-items:center; gap:9px;
  background: #efa195; color: #1c1917;
  padding: 0 36px; height: 62px; border-radius: 10px;
  font-family: 'Cambria', Georgia, serif; font-size:15px; font-weight:600; letter-spacing:.01em;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 22px rgba(239,161,149,.32); white-space:nowrap;
}
.hero-btn-primary:hover { background:#e08875; transform:translateY(-2px); box-shadow:0 8px 32px rgba(239,161,149,.44); }
.hero-btn-primary svg { width:15px; height:15px; flex-shrink:0; }
.hero-btn-secondary {
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; color:#1c1917;
  padding:0 30px; height:62px; border-radius:10px;
  font-family:'Cambria',Georgia,serif; font-size:15px; font-weight:500;
  border:1.5px solid rgba(30,28,24,.18); transition:all .2s; white-space:nowrap;
}
.hero-btn-secondary:hover { border-color:#eea092; color:#c4735f; transform:translateY(-2px); }
.hero-note {
  display:flex; align-items:center; gap:7px;
  font-family:'Cambria',Georgia,serif; font-size:13px; color:#b5b0ab;
}
.hero-note svg { width:13px; height:13px; stroke:#eea092; fill:none; flex-shrink:0; }
.hero-right { display:flex; align-items:center; justify-content:center; position:relative; }
.hero-laptop-wrap {
  position:relative; width:100%;
  opacity:0; animation:heroImgIn 1s .5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes heroImgIn {
  from { opacity:0; transform:translateY(18px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.hero-laptop-wrap img {
  width:100%; height:auto; display:block;
  filter: drop-shadow(0 28px 52px rgba(30,28,24,.15));
  mix-blend-mode: multiply;
}
@media (max-width:860px) {
  #hero { padding:120px 5vw 60px; min-height:auto; align-items:flex-start; overflow:visible; }
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .hero-h1 { font-size:clamp(46px,11vw,64px); }
  .hero-right { max-width:520px; margin:0 auto; overflow:visible; }
}
@media (max-width:480px) {
  .hero-btns { flex-direction:column; align-items:stretch; }
  .hero-btn-primary, .hero-btn-secondary { justify-content:center; width:100%; }
}
/* legacy hero classes hide */
.hero-proof,.hero-intro,.hero-sub,.hero-mockup,.hero-proofs,.hero-ctas,.hero-reassurance { display:none!important; }

/* ─── MARQUEE ────────────────────────────────────── */
.marquee-wrap {
  background:var(--rose-d); padding:11px 0; overflow:hidden;
  position:relative; z-index:1;
}
.mq { display:flex; white-space:nowrap; animation:mq 28s linear infinite; }
.mq span { font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.62); padding:0 28px; }
.mq .sep { color:rgba(255,255,255,.28); padding:0 2px; font-size:.4rem; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─── PROBLEM SECTION ───────────────────────────── */
#problem {
  padding:110px 5vw 80px;
  background:var(--bg);
}

.problem-head { text-align:center; max-width:720px; margin:0 auto 64px; }
.problem-head .eyebrow { justify-content:center; }
.problem-head .eyebrow::before { display:none; }
.problem-head p { font-size:.97rem; color:var(--ink-l); line-height:1.8; margin-top:18px; }
.problem-title {
  font-family:'Amaranth',sans-serif !important;
  font-size:clamp(40px, 5.5vw, 68px) !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  letter-spacing:-0.01em !important;
  color:#1c1917 !important;
  margin:0 0 8px 0 !important;
}
.problem-title em {
  font-style:italic;
  color:var(--green);
  font-family:'Amaranth',sans-serif;
}

.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:var(--max); margin:0 auto 48px; }

.pain-card {
  background:#fff; border-radius:var(--r); border:1px solid rgba(30,28,24,.07);
  padding:30px 26px; box-shadow:0 4px 20px rgba(30,28,24,.05);
  transition:transform .25s, box-shadow .25s;
  opacity:0; transform:translateY(20px);
}
.pain-card.vis { opacity:1; transform:translateY(0); transition:opacity .55s ease, transform .55s ease, box-shadow .25s; }
.pain-card:hover { transform:translateY(-4px)!important; box-shadow:0 12px 36px rgba(30,28,24,.1); }
.pain-quote {
  font-family:'Amaranth',sans-serif; font-size:18px; font-style:italic;
  color:var(--ink); line-height:1.5; margin-bottom:16px;
}
.pain-quote::before { content:'\00AB\00A0'; color:var(--green); font-size:1.1rem; margin-right:2px; letter-spacing:0; }
.pain-quote::after { content:'\00A0\00BB'; color:var(--green); font-size:1.1rem; margin-left:2px; }
.pain-body { font-size:14px; color:var(--ink-l); line-height:1.15; font-family:'Cambria',Georgia,serif; }

.pain-conclusion {
  text-align:center; max-width:560px; margin:0 auto;
  padding:36px; background:var(--green-xl); border-radius:14px;
  border:1px solid rgba(235,165,150,.18);
  display:flex; align-items:center; justify-content:center;
}
.pain-conclusion p { font-size:16px; color:var(--ink-l); line-height:1.15; font-family:'Cambria',Georgia,serif; }
.pain-conclusion strong { color:var(--ink); display:block; margin-top:8px; font-size:18px; font-family:'Cambria',Georgia,serif; }
.pain-conclusion-strong {
  font-family:'Amaranth',sans-serif !important;
  font-size:clamp(18px,2.2vw,24px) !important;
  font-weight:700 !important;
  color:var(--ink) !important;
  line-height:1.3 !important;
}
.problem-closing {
  text-align:center;
  max-width:640px;
  margin:40px auto 0;
  font-size:clamp(17px,2vw,22px);
  color:var(--ink-l);
  line-height:1.5;
  font-family:'Amaranth',sans-serif;
  font-style:italic;
  padding:0 20px;
}

/* ─── IMPACT BANNER ─────────────────────────────── */
#impact {
  padding:100px 5vw;
  background:var(--ink);
  overflow:hidden; position:relative;
}
#impact::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(235,165,150,.28) 0%,transparent 70%);
}
#impact::after {
  content:''; position:absolute; bottom:-80px; left:-80px;
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(200,164,106,.2) 0%,transparent 70%);
}
.impact-inner {
  max-width:800px; margin:0 auto; text-align:center; position:relative; z-index:1;
}
.impact-eyebrow { color:var(--green-l); }
.impact-eyebrow::before { background:var(--green-l); }
.impact-num {
  font-family:'Gliker',sans-serif;
  font-size:clamp(3rem,8vw,7rem);
  font-weight:800; color:#FAF8F5;
  line-height:1; margin:20px 0 16px;
}
.impact-num em { color:var(--amber); font-style:italic; }
.impact-text { font-size:18px; color:rgba(250,248,245,.55); line-height:1.15; max-width:540px; margin:0 auto; font-family:'Cambria',Georgia,serif; }

/* ─── OCTUS / MEDIA SECTION ─────────────────────── */
#octus {
  padding:80px 5vw 80px;
  background:var(--bg);
  position:relative;
}



/* ── section header (centré) ── */
.octus-header {
  text-align:center;
  max-width:700px;
  margin:0 auto 52px;
}
.octus-header h2 {
  font-family:'Gliker',sans-serif;
  font-size:clamp(32px, 4.5vw, 56px);
  font-weight:700;
  color:var(--ink);
  line-height:1.15;
  margin:0;
}
.octus-header h2 em {
  font-style:italic;
  color:var(--green);
  font-family:'Amaranth',sans-serif;
}

/* ── grande carte sombre centrale ── */
.octus-big-card {
  max-width:1080px;
  margin:0 auto;
  background:linear-gradient(150deg,#5E6F4E 0%,#6E7F5C 55%,#5E6F4E 100%);
  border-radius:28px;
  overflow:visible;
  position:relative;
  padding:52px 52px 52px 52px;
  box-shadow:0 32px 80px rgba(30,28,24,.32), 0 8px 24px rgba(30,28,24,.18);
}
.octus-big-card::before {
  content:''; pointer-events:none;
  position:absolute; top:-80px; right:-40px;
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(235,165,150,.18) 0%,transparent 68%);
}
.octus-big-card::after {
  content:''; pointer-events:none;
  position:absolute; bottom:-60px; left:60px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(196,115,95,.12) 0%,transparent 68%);
}

/* ── layout intérieur 2 colonnes ── */
.octus-cols {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:56px;
  align-items:center;
  position:relative; z-index:1;
}

/* ── colonne gauche : mascotte ── */
.octus-col-left {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.octus-mascot-frame {
  width:100%;
  max-width:300px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(235,165,150,.14);
  border-radius:24px;
  padding:32px 24px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  position:relative;
  overflow:visible;
}
.octus-mascot-frame::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(235,165,150,.3), transparent);
}
.octus-mascot-img {
  width:220px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));
  position:relative; z-index:1;
}
.octus-mascot-label {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(235,165,150,.55);
}
.octus-poem-dark {
  width:100%;
  max-width:300px;
  padding:24px 24px 24px 20px;
  border-left:2px solid rgba(235,165,150,.35);
  background:rgba(255,255,255,.03);
  border-radius:0 12px 12px 0;
}
.octus-poem-dark p {
  font-family:'Amaranth',sans-serif;
  font-size:15px;
  font-style:italic;
  color:rgba(250,248,245,.65);
  line-height:1.65;
  margin:0;
}
.octus-poem-dark p em {
  font-style:normal;
  font-weight:700;
  color:var(--green);
}

/* ── colonne droite : contenu ── */
.octus-col-right {
  display:flex;
  flex-direction:column;
  gap:28px;
}
.octus-col-tag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(235,165,150,.14);
  border:1px solid rgba(235,165,150,.2);
  color:var(--green-l);
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:20px;
  width:fit-content;
}
.octus-col-tag-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}
.octus-col-title {
  font-family:'Amaranth',sans-serif;
  font-size:clamp(26px, 3.2vw, 38px);
  font-weight:700;
  color:#FAF8F5;
  line-height:1.25;
  margin:0;
}
.octus-col-title em {
  font-style:italic;
  color:var(--green);
}
.octus-col-body {
  font-family:'Cambria',Georgia,serif;
  font-size:16px;
  color:rgba(250,248,245,.58);
  line-height:1.75;
  margin:0;
}
.octus-divider {
  width:40px; height:1px;
  background:rgba(235,165,150,.25);
}
.octus-status {
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(235,165,150,.15);
  border-radius:14px;
  padding:16px 20px;
}
.octus-status-dot {
  width:40px; height:40px; border-radius:50%;
  background:var(--green);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 0 0 8px rgba(235,165,150,.14);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100%{box-shadow:0 0 0 8px rgba(235,165,150,.14)}
  50%{box-shadow:0 0 0 15px rgba(235,165,150,.07)}
}
.octus-status-dot svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; }
.octus-status-text strong {
  display:block;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.88rem;
  font-weight:700;
  color:rgba(250,248,245,.92);
  letter-spacing:.01em;
}
.octus-status-text span {
  font-family:'Cambria',Georgia,serif;
  font-size:.78rem;
  color:rgba(250,248,245,.42);
}

/* ── responsive ── */
@media(max-width:768px){
  .octus-big-card { padding:32px 24px; border-radius:20px; }
  .octus-cols { grid-template-columns:1fr; gap:36px; }
  .octus-col-left { order:1; }
  .octus-col-right { order:2; }
  .octus-mascot-img { width:180px; }
  .octus-header { margin-bottom:36px; }
}

/* ─── SOLUTION SECTION ──────────────────────────── */
#solution {
  padding:100px 5vw 80px;
  background:var(--bg2);
}

.solution-head { text-align:center; max-width:640px; margin:0 auto 64px; }
.solution-head .eyebrow { justify-content:center; }
.solution-head .eyebrow::before { display:none; }
.solution-head p { margin-top:16px; font-size:.97rem; color:var(--ink-l); line-height:1.8; }

.sol-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:var(--max); margin:0 auto 48px; }
.sol-card {
  background:#fff; border-radius:var(--r); border:1px solid rgba(30,28,24,.07);
  padding:32px 28px; box-shadow:0 4px 18px rgba(30,28,24,.05);
  transition:transform .25s, box-shadow .25s;
  opacity:0; transform:translateY(20px);
}
.sol-card.vis { opacity:1; transform:translateY(0); transition:opacity .55s ease, transform .55s ease, box-shadow .25s; }
.sol-card:hover { transform:translateY(-4px)!important; box-shadow:0 14px 40px rgba(30,28,24,.1); }
.sol-icon {
  width:48px; height:48px; border-radius:12px; background:var(--green-xl);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.sol-icon svg { width:22px; height:22px; stroke:var(--green); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sol-card h3 { font-family:'Amaranth',sans-serif; font-size:24px; font-weight:400; color:var(--ink); margin-bottom:10px; line-height:1.5; }
.sol-card p { font-size:.84rem; color:var(--ink-l); line-height:1.75; }

.sol-footer {
  text-align:center; max-width:520px; margin:0 auto;
  padding:32px;
}
.sol-footer p { font-size:clamp(17px,2vw,22px); color:var(--ink-l); line-height:1.8; font-family:'Amaranth',sans-serif; font-style:italic; }
.sol-footer strong { display:block; margin-top:10px; color:var(--ink); font-family:'Cambria',Georgia,serif; font-style:normal; font-size:clamp(17px,2vw,22px); }

/* ─── HOW IT WORKS ──────────────────────────────── */
#how {
  padding:100px 5vw 100px;
  background:var(--bg);
}
.how-head { text-align:center; max-width:600px; margin:0 auto 72px; }
.how-head .eyebrow { justify-content:center; }
.how-head .eyebrow::before { display:none; }
.how-head p { margin-top:16px; font-size:.97rem; color:var(--ink-l); line-height:1.8; }

.timeline { max-width:700px; margin:0 auto; }
.tl-item {
  display:grid; grid-template-columns:64px 1fr; gap:28px; position:relative;
  padding-bottom:52px;
  opacity:0; transform:translateX(-20px);
}
.tl-item.vis { opacity:1; transform:translateX(0); transition:opacity .6s ease, transform .6s ease; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before {
  content:''; position:absolute; left:31px; top:64px; bottom:0;
  width:2px; background:linear-gradient(to bottom,rgba(235,165,150,.28),rgba(235,165,150,.06));
}
.tl-item:last-child::before { display:none; }
.tl-num {
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:var(--green); display:flex; align-items:center; justify-content:center;
  font-family:'Gliker',sans-serif; font-size:1.3rem; font-weight:700; color:#fff;
  box-shadow:0 6px 20px rgba(235,165,150,.35);
  position:relative; z-index:1;
}
.tl-body { padding-top:12px; }
.tl-body h3 { font-family:'Amaranth',sans-serif; font-size:24px; font-weight:400; color:var(--ink); margin-bottom:10px; line-height:1.5; }
.tl-body p { font-size:.88rem; color:var(--ink-l); line-height:1.8; }
.tl-body ul { margin-top:10px; list-style:none; display:flex; flex-direction:column; gap:5px; }
.tl-body ul li { font-size:.83rem; color:var(--ink-l); padding-left:16px; position:relative; }
.tl-body ul li::before { content:''; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--green); }

.how-cta { text-align:center; margin-top:60px; }
.how-cta p { font-size:.84rem; color:var(--ink-ll); margin-top:12px; }

/* ─── BENEFITS ──────────────────────────────────── */
#benefits {
  padding:110px 5vw 100px;
  background:var(--bg2);
}
.benefits-head { max-width:var(--max); margin:0 auto 56px; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.benefits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:var(--max); margin:0 auto 48px; }
.benefit-card {
  background:#fff; border-radius:var(--r); border:1px solid rgba(30,28,24,.07);
  padding:30px 24px; box-shadow:0 4px 16px rgba(30,28,24,.05);
  opacity:0; transform:translateY(20px);
}
.benefit-card.vis { opacity:1; transform:translateY(0); transition:opacity .55s ease, transform .55s ease; }
.benefit-icon { width:46px; height:46px; border-radius:11px; background:var(--green-xl); border:1px solid rgba(235,165,150,.2); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.benefit-icon svg { width:22px; height:22px; stroke:var(--rose-d); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.benefit-card h3 { font-family:'Amaranth',sans-serif; font-size:24px; font-weight:400; color:var(--ink); margin-bottom:9px; line-height:1.5; }
.benefit-card p { font-size:.82rem; color:var(--ink-l); line-height:1.75; }

.benefits-closer {
  text-align:center; max-width:560px; margin:0 auto;
  background:var(--rose-d); border-radius:14px; padding:36px 40px;
}
.benefits-closer p { font-size:1rem; color:rgba(250,248,245,.8); line-height:1.8; }
.benefits-closer strong { display:block; color:#fff; font-size:1.1rem; margin-top:8px; font-family:'Amaranth',sans-serif; font-style:italic; }

/* ─── FOR WHO ────────────────────────────────────── */
#forwhom {
  padding:110px 5vw 100px;
  background:var(--bg);
}
.forwhom-inner { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.forwhom-list { margin-top:32px; display:flex; flex-direction:column; gap:16px; }
.forwhom-item {
  display:flex; align-items:flex-start; gap:16px;
  background:#fff; border:1px solid rgba(30,28,24,.07);
  border-radius:12px; padding:20px 22px;
  box-shadow:0 3px 14px rgba(30,28,24,.05);
  opacity:0; transform:translateX(-16px);
}
.forwhom-item.vis { opacity:1; transform:translateX(0); transition:opacity .55s ease, transform .55s ease; }
.forwhom-check {
  width:28px; height:28px; border-radius:50%; background:var(--green-xl);
  border:1.5px solid rgba(235,165,150,.22); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  margin-top:2px;
}
.forwhom-check svg { width:13px; height:13px; stroke:var(--green); fill:none; stroke-width:2.5; }
.forwhom-item p { font-size:16px; color:var(--ink-l); line-height:1.15; font-family:'Cambria',Georgia,serif; }
.forwhom-item p strong { color:var(--ink); display:block; margin-bottom:4px; font-size:.92rem; }

.forwhom-tags { margin-top:40px; }
.forwhom-tags h4 { font-family:'Cambria',Georgia,serif; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-ll); margin-bottom:14px; }
.tags-row { display:flex; flex-wrap:wrap; gap:9px; }
.tag-pill {
  background:var(--green-xl); color:var(--green);
  font-size:.74rem; font-weight:600; letter-spacing:.04em;
  padding:6px 14px; border-radius:20px; border:1px solid rgba(235,165,150,.2);
}
.forwhom-closer {
  margin-top:32px; padding:24px; background:var(--amber-xl);
  border-radius:12px; border-left:3px solid var(--amber);
}
.forwhom-closer p { font-size:.9rem; color:var(--ink); line-height:1.75; font-family:'Amaranth',sans-serif; font-style:italic; }

/* ─── SECURITY ──────────────────────────────────── */
#security {
  padding:110px 5vw 100px;
  background:#6E7F5C;
}
.sec-security-head { text-align:center; max-width:580px; margin:0 auto 64px; }
.sec-security-head .eyebrow { color:var(--green-l); justify-content:center; }
.sec-security-head .eyebrow::before { background:var(--green-l); display:none; }
.sec-security-head h2 { color:#FAF8F5; }
.sec-security-head h2 em { color:var(--amber); }
.sec-security-head p { color:rgba(250,248,245,.55); margin-top:16px; font-size:.97rem; line-height:1.8; }

.trust-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; max-width:520px; margin:0 auto 48px; }
.trust-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r); padding:30px 26px;
  transition:border-color .25s, background .25s;
  opacity:0; transform:translateY(20px);
}
.trust-card.vis { opacity:1; transform:translateY(0); transition:opacity .55s ease, transform .55s ease, border-color .25s; }
.trust-card:hover { border-color:rgba(235,165,150,.4); background:rgba(235,165,150,.08); }
.trust-icon { width:44px; height:44px; border-radius:10px; background:rgba(235,165,150,.22); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.trust-icon svg { width:20px; height:20px; stroke:var(--green-l); fill:none; stroke-width:1.7; }
.trust-card h3 { font-family:'Amaranth',sans-serif; font-size:24px; font-weight:400; color:#FAF8F5; margin-bottom:10px; line-height:1.5; }
.trust-card p { font-size:.82rem; color:rgba(250,248,245,.48); line-height:1.75; }

.security-closer { text-align:center; max-width:460px; margin:0 auto; }
.security-closer p { font-size:1rem; color:rgba(250,248,245,.55); line-height:1.8; }
.security-closer strong { color:#FAF8F5; }

/* ─── PRICING ────────────────────────────────────── */
#pricing {
  padding:110px 5vw 100px;
  background:var(--bg);
}
.pricing-head { text-align:center; max-width:580px; margin:0 auto 64px; }
.pricing-head .eyebrow { justify-content:center; }
.pricing-head .eyebrow::before { display:none; }
.pricing-head p { margin-top:16px; font-size:.97rem; color:var(--ink-l); line-height:1.8; }

.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:960px; margin:0 auto; }
.pricing-card {
  background:#fff; border:1.5px solid rgba(30,28,24,.1);
  border-radius:20px; padding:38px 30px;
  position:relative; transition:transform .25s, box-shadow .25s, border-color .25s;
}
.pricing-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(30,28,24,.1); }
.pricing-card.featured { border-color:var(--green); box-shadow:0 8px 40px rgba(235,165,150,.18); }
.pricing-badge {
  position:absolute; top:-13px; left:28px;
  background:var(--green); color:#fff;
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 14px; border-radius:20px;
}
.pricing-name { font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-ll); margin-bottom:20px; }
.pricing-price { font-family:'Gliker',sans-serif; font-size:3rem; font-weight:800; color:var(--ink); line-height:1; margin-bottom:4px; }
.pricing-price sup { font-family:'Cambria',Georgia,serif; font-size:1.1rem; font-weight:400; vertical-align:super; }
.pricing-period { font-size:.74rem; color:var(--ink-ll); margin-bottom:32px; }
.pricing-desc { font-size:.84rem; color:var(--ink-l); line-height:1.7; margin-bottom:28px; padding-bottom:28px; border-bottom:1px solid rgba(30,28,24,.07); }
.pricing-features { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:32px; }
.pricing-features li { font-size:.83rem; color:var(--ink-l); display:flex; align-items:flex-start; gap:10px; line-height:1.5; }
.pricing-features li::before {
  content:''; width:17px; height:17px; border-radius:50%; flex-shrink:0; margin-top:2px;
  background:var(--green-xl); border:1.5px solid rgba(235,165,150,.35);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%234A6040' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:17px;
}
.pricing-cta {
  display:block; text-align:center; padding:13px;
  border-radius:9px; font-family:'Cambria',Georgia,serif; font-size:.86rem; font-weight:600;
  border:1.5px solid rgba(30,28,24,.15); color:var(--ink);
  transition:all .2s;
}
.pricing-cta:hover, .pricing-card.featured .pricing-cta { background:var(--green); color:#fff; border-color:var(--green); }

.pricing-tbd {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; min-height:200px;
}
.pricing-tbd-badge {
  background:var(--amber-xl); color:var(--amber); border:1px solid rgba(200,164,106,.25);
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; border-radius:20px;
}
.pricing-tbd p { font-size:.84rem; color:var(--ink-ll); text-align:center; line-height:1.6; }

/* ─── FAQ ────────────────────────────────────────── */
#faq {
  padding:110px 5vw 100px;
  background:var(--bg2);
}
.faq-head { text-align:center; max-width:580px; margin:0 auto 60px; }
.faq-head .eyebrow { justify-content:center; }
.faq-head .eyebrow::before { display:none; }

.faq-list { max-width:760px; margin:0 auto; }
.faq-item {
  border-bottom:1px solid rgba(30,28,24,.1);
}
.faq-item:first-child { border-top:1px solid rgba(30,28,24,.1); }
.faq-btn {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 4px;
  font-family:'Amaranth',sans-serif; font-size:18px; font-weight:400;
  color:var(--ink); text-align:left; gap:20px;
  transition:color .2s;
}
.faq-btn:hover { color:var(--green); }
.faq-chev {
  width:28px; height:28px; border-radius:50%; border:1.5px solid rgba(30,28,24,.15);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:transform .3s, background .2s, border-color .2s;
}
.faq-chev svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.5; transition:transform .3s; }
.faq-item.open .faq-btn { color:var(--green); }
.faq-item.open .faq-chev { background:var(--green); border-color:var(--green); }
.faq-item.open .faq-chev svg { stroke:#fff; transform:rotate(180deg); }
.faq-body {
  overflow:hidden; max-height:0;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
}

.faq-body-inner {
  padding:0 4px 24px;
  font-size:16px; color:var(--ink-l); line-height:1.15;
  font-family:'Cambria',Georgia,serif;
}

/* ─── FINAL CTA ─────────────────────────────────── */
#final-cta {
  padding:120px 5vw 110px;
  background:var(--rose-d);
  overflow:hidden; position:relative; text-align:center;
}
#final-cta::before {
  content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.07) 0%,transparent 70%);
}
.fcta-inner { max-width:660px; margin:0 auto; position:relative; z-index:1; }
.fcta-inner h2 { color:#FAF8F5; font-size:32px; }
.fcta-inner h2 em { color:var(--amber); }
.fcta-sub { color:rgba(250,248,245,.7); font-size:16px; line-height:1.15; margin-top:20px; margin-bottom:40px; font-family:'Cambria',Georgia,serif; }
.fcta-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:#FAF8F5; color:var(--ink);
  padding:16px 40px; border-radius:9px;
  font-family:'Cambria',Georgia,serif; font-size:.95rem; font-weight:700;
  transition:background .2s, transform .15s, box-shadow .2s;
  box-shadow:0 8px 32px rgba(30,28,24,.2);
}
.fcta-btn:hover { background:#fff; transform:translateY(-3px); box-shadow:0 14px 44px rgba(30,28,24,.28); }
.fcta-btn svg { width:16px; height:16px; flex-shrink:0; }
.fcta-reassure {
  margin-top:20px; font-size:.76rem; color:rgba(250,248,245,.5);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.fcta-reassure svg { width:13px; height:13px; stroke:rgba(250,248,245,.5); fill:none; }

/* ─── FOOTER ─────────────────────────────────────── */
footer {
  background:var(--ink); padding:60px 5vw 0;
  position:relative; z-index:1;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; padding-bottom:48px; }
.footer-brand img { height:36px; margin-bottom:14px; filter:brightness(0) invert(1) opacity(.7); }
.footer-brand p { font-size:.8rem; color:rgba(250,248,245,.38); line-height:1.75; max-width:260px; margin-top:10px; }
footer h4 { font-family:'Amaranth',sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(250,248,245,.32); margin-bottom:18px; }
footer ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
footer ul a { font-size:.8rem; color:rgba(250,248,245,.48); transition:color .2s; }
footer ul a:hover { color:rgba(250,248,245,.85); }
.footer-bot {
  border-top:1px solid rgba(255,255,255,.06); padding:20px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-bot span { font-size:.7rem; color:rgba(250,248,245,.28); }
.footer-dots { display:flex; gap:6px; }
.footer-dots i { width:7px; height:7px; border-radius:50%; display:block; }


/* ─── OCTUS IMAGE HERO ───────────────────────────── */
.octus-right {
  display:flex; flex-direction:column; gap:28px; align-items:center;
}
.octus-img-hero {
  width:100%; max-width:340px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
}
.octus-img-hero img {
  width:100%; height:auto; object-fit:contain;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.3));
  border-radius:16px;
}

/* ─── BRICOLAGE GROTESQUE for section eyebrows ───── */
.eyebrow-bg {
  font-family:'Bricolage Grotesque',sans-serif !important;
  font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--green);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}


/* ─── ANIMATIONS ─────────────────────────────────── */
@keyframes riseUpHero {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
.h-anim { opacity:0; }
.h-anim-1 { animation:riseUpHero .7s .1s forwards; }
.h-anim-2 { animation:riseUpHero .75s .25s forwards; }
.h-anim-3 { animation:riseUpHero .75s .4s forwards; }
.h-anim-4 { animation:riseUpHero .75s .55s forwards; }
.h-anim-5 { animation:riseUpHero .75s .68s forwards; }

@media (max-width:700px) {
  .hd-logo-word { font-size:15px; }
}

/* ════════════════════════════════════════════════════════════
   AMÉLIORATIONS — lisibilité, images & responsive (PROCESS'US)
   ════════════════════════════════════════════════════════════ */

/* 1. IMAGES — fond détouré : on supprime le mix-blend multiply
   qui assombrissait les visuels, et on soigne le rendu. */
.hero-laptop-wrap img,
.hd-logo-img,
.octus-mascot-img,
.octus-img-hero img,
.footer-brand img { mix-blend-mode: normal !important; }

.hero-laptop-wrap img {
  filter: drop-shadow(0 30px 60px rgba(30,28,24,.20)) !important;
}
.octus-mascot-img {
  filter: drop-shadow(0 24px 44px rgba(0,0,0,.35)) !important;
}

/* 2. LISIBILITÉ — paragraphes plus aérés (1.15 était trop serré) */
p, li, .cambria-body, .cambria-large, .sec-sub,
.hero-desc, .pain-body, .faq-body-inner,
.octus-col-body, .pricing-desc, .pain-conclusion p {
  line-height: 1.65;
}
h1, h2 { line-height: 1.18; }

/* 3. FORWHOM — mise en page (markup ".forwhom-centered") */
.forwhom-centered { max-width: var(--max); margin: 0 auto; text-align: center; }
.forwhom-centered .eyebrow-bg { justify-content: center; }
.forwhom-centered .forwhom-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  text-align: left; margin-top: 8px;
}
.forwhom-item { height: 100%; }

/* ════════════ RESPONSIVE ════════════ */

/* ≤1024px — tablette */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
  }

/* ≤860px — petite tablette / grand mobile */
@media (max-width: 860px) {
  .pain-grid { grid-template-columns: 1fr 1fr; }
  .sol-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; max-width: 460px; }
  .benefits-head { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .forwhom-centered .forwhom-list { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hd-links { gap: 14px; }
  .hd-links a { font-size: 13px; }
}

/* ≤680px — mobile */
@media (max-width: 680px) {
  section { padding-left: 6vw !important; padding-right: 6vw !important; }
  #hero, #problem, #octus, #solution, #how, #benefits,
  #forwhom, #security, #pricing, #faq, #final-cta {
    padding-top: 84px; padding-bottom: 64px;
  }
  #hero { padding-top: 110px; }
  .pain-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: left; }
  /* nav : on masque les liens (pas de menu burger) au profit du logo */
  .hd-links { display: none; }
  .problem-title { font-size: clamp(30px, 8vw, 44px) !important; }
  .fcta-inner h2 { font-size: 24px; }
  .octus-poem-dark, .octus-mascot-frame { max-width: 100%; }
  .benefits-closer { padding: 28px 22px; }
  .pain-conclusion { padding: 26px 22px; }
}

/* ≤420px — très petit écran */
@media (max-width: 420px) {
  .hero-h1 { font-size: clamp(38px, 13vw, 52px); }
  .impact-num { font-size: clamp(2.4rem, 14vw, 4rem); }
  .tl-item { grid-template-columns: 48px 1fr; gap: 18px; }
  .tl-num { width: 48px; height: 48px; font-size: 1.05rem; }
  .tl-item::before { left: 23px; top: 48px; }
}

/* Sécurité débordements horizontaux */
html, body { max-width: 100%; }
img, svg { max-width: 100%; }

/* 4. PRICING — styles pour le markup (pricing-amount / block) */
.pricing-price-block { display: flex; align-items: baseline; gap: 8px; margin-bottom: 24px; }
.pricing-amount {
  font-family: 'Gliker', sans-serif; font-size: 2.8rem; font-weight: 800;
  color: var(--ink); line-height: 1;
}
.pricing-card .pricing-period { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════
   ANIMATIONS LUDIQUES & INTERACTIVES
   ════════════════════════════════════════════════════════════ */

/* ── 1. FLOAT (flottement léger) ── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(1deg); }
  50% { transform: translateY(-4px) rotate(-0.5deg); }
  75% { transform: translateY(-12px) rotate(0.5deg); }
}
.anim-float { animation: float 5s ease-in-out infinite; }

/* ── 2. BOUNCE IN (rebond à l'entrée) ── */
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3) translateY(40px); }
  50% { opacity: 1; transform: scale(1.05) translateY(-4px); }
  70% { transform: scale(0.96) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.anim-bounce { opacity: 0; }
.anim-bounce.vis { animation: bounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ── 3. POP IN (scale + rebond plus soft) ── */
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.08); }
  80% { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}
.anim-pop { opacity: 0; }
.anim-pop.vis { animation: popIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ── 4. SLIDE & FADE variants ── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
.anim-slide-up { opacity: 0; }
.anim-slide-up.vis { animation: slideUp 0.6s ease-out forwards; }
.anim-slide-left { opacity: 0; }
.anim-slide-left.vis { animation: slideLeft 0.6s ease-out forwards; }
.anim-slide-right { opacity: 0; }
.anim-slide-right.vis { animation: slideRight 0.6s ease-out forwards; }

/* ── 5. WIGGLE (secousse au hover) ── */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-3deg); }
}
.anim-wiggle:hover { animation: wiggle 0.5s ease-in-out; }

/* ── 6. SPIN SLOW (rotation icônes) ── */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.anim-spin-slow { animation: spinSlow 12s linear infinite; }
.anim-spin-hover:hover { animation: spinSlow 0.8s ease-in-out; }

/* ── 7. GLOW PULSE (pulsation de lueur) ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(235,165,150,0.4); }
  50% { box-shadow: 0 0 20px 8px rgba(235,165,150,0.15); }
}
.anim-glow { animation: glowPulse 2.5s ease-in-out infinite; }

/* ── 8. SHIMMER BORDER (bordure brillante animée) ── */
@keyframes shimmerBorder {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.shimmer-border {
  position: relative;
  z-index: 1;
}
.shimmer-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, var(--green), var(--amber), var(--green-l), var(--green));
  background-size: 200% 100%;
  animation: shimmerBorder 3s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

/* ── 9. 3D TILT hover (cards) ── */
.tilt-card {
  transition: transform 0.15s ease-out, box-shadow 0.25s;
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* ── 10. PARTICULES flottantes ── */
@keyframes particle {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}
@keyframes particleSway {
  0%, 100% { margin-left: 0; }
  50% { margin-left: 30px; }
}
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.25;
  animation: particle linear infinite, particleSway 3s ease-in-out infinite alternate;
}

/* ── 11. MARQUEE plus rapide / lent au hover ── */
.mq:hover { animation-play-state: paused; }

/* ── 12. BADGE bounce au hover ── */
.hero-badge, .tag-pill {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}
.hero-badge:hover, .tag-pill:hover {
  transform: scale(1.08) translateY(-2px);
}
.tag-pill:hover {
  background: rgba(235,165,150,0.2);
}

/* ── 13. FAQ icon bounce on open ── */
.faq-item.open .faq-chev {
  animation: bounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 14. BUTTON magnetic / jelly effect ── */
.jelly-btn {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}
.jelly-btn:hover {
  transform: scale(1.04) translateY(-2px);
}
.jelly-btn:active {
  transform: scale(0.97);
}

/* ── 15. Octus mascot breathing glow ── */
@keyframes breatheGlow {
  0%, 100% { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.35)) drop-shadow(0 0 0px rgba(235,165,150,0)); }
  50% { filter: drop-shadow(0 24px 48px rgba(0,0,0,0.4)) drop-shadow(0 0 30px rgba(235,165,150,0.15)); }
}
.octus-mascot-img {
  animation: float 6s ease-in-out infinite, breatheGlow 4s ease-in-out infinite;
}

/* ── 16. RIPPLE effect container ── */
.ripple-wrap {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(235,165,150,0.25);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── 17. Stagger delays utilities ── */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }

/* ── 18. Compteur price roll ── */
@keyframes priceRoll {
  0% { transform: translateY(60%); opacity: 0; filter: blur(4px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
.price-roll { display: inline-block; animation: priceRoll 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* ── 19. Trust card glow hover ── */
.trust-card:hover .trust-icon {
  animation: wiggle 0.5s ease-in-out;
  background: rgba(235,165,150,0.35);
}

/* ── 20. Timeline number pulse on scroll ── */
.tl-num.vis {
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── 21. Forwhom check draw ── */
@keyframes checkDraw {
  from { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 0; }
}
.forwhom-check svg {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}
.forwhom-item.vis .forwhom-check svg {
  animation: checkDraw 0.4s ease-out 0.3s forwards;
}

/* ── 22. Gradient text shimmer ── */
@keyframes textShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.text-shimmer {
  background: linear-gradient(90deg, var(--ink) 0%, var(--green) 25%, var(--amber) 50%, var(--green) 75%, var(--ink) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 5s linear infinite;
}

/* ── 23. Scroll-triggered parallax helper ── */
.parallax-slow { will-change: transform; }

/* ── 24. Solution card icon bounce ── */
.sol-card:hover .sol-icon {
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: rgba(235,165,150,0.18);
}

/* ── 25. Benefit card icon spin ── */
.benefit-card:hover .benefit-icon {
  animation: spinSlow 0.7s ease-in-out;
  background: rgba(235,165,150,0.18);
}

/* ── 26. Pain card quote accent ── */
.pain-card:hover .pain-quote::before,
.pain-card:hover .pain-quote::after {
  animation: wiggle 0.4s ease-in-out;
}

/* ── 27. CTA glow ring ── */
.fcta-btn {
  position: relative;
  overflow: visible;
}
.fcta-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 13px;
  border: 2px solid rgba(250,248,245,0.15);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s, transform 0.3s;
}
.fcta-btn:hover::after {
  opacity: 1;
  transform: scale(1);
  animation: glowPulse 2s ease-in-out infinite;
}

/* ── 28. Logo (flottement supprimé) ── */
.hd-logo-img {
  transition: transform 0.3s ease;
}
.hd-logo:hover .hd-logo-img {
  transform: scale(1.06) rotate(-2deg);
}

/* ── 29. Smooth image reveal ── */
@keyframes imgReveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.img-reveal {
  animation: imgReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* ── 30. Ribbons subtle parallax ready ── */
.ribbons svg path {
  transition: transform 0.1s linear;
}

/* ── 31. Enhanced pain conclusion ── */
.pain-conclusion {
  transition: transform 0.3s, box-shadow 0.3s;
}
.pain-conclusion:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 8px 30px rgba(235,165,150,0.15);
}

/* ── 32. Octus big card tilt on hover ── */
.octus-big-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
  transform-style: preserve-3d;
}
.octus-big-card:hover {
  transform: translateY(-4px) rotateX(1deg) rotateY(-1deg);
  box-shadow: 0 40px 90px rgba(30,28,24,0.38), 0 12px 30px rgba(30,28,24,0.22);
}

/* ── 33. Hero laptop hover float ── */
.hero-laptop-wrap {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-laptop-wrap:hover {
  transform: translateY(-8px) scale(1.02);
}

/* ── 34. Tag pills stagger entrance ── */
@keyframes tagPop {
  0% { opacity: 0; transform: scale(0.5) translateY(10px); }
  70% { transform: scale(1.1) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.tag-pill {
  opacity: 0;
}
.tag-pill.vis {
  animation: tagPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── 35. Security closer glow ── */
.security-closer {
  transition: transform 0.3s;
}
.security-closer:hover {
  transform: scale(1.02);
}

/* ── 36. Footer link underline slide ── */
footer ul a {
  position: relative;
}
footer ul a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(250,248,245,0.6);
  transition: width 0.3s ease;
}
footer ul a:hover::after {
  width: 100%;
}

/* ── 37. Pricing featured badge bounce ── */
.pricing-badge {
  animation: float 3s ease-in-out infinite;
}

/* ── 38. Counter blur-in ── */
@keyframes counterBlur {
  0% { filter: blur(8px); opacity: 0; transform: translateY(10px); }
  100% { filter: blur(0); opacity: 1; transform: translateY(0); }
}
.counter-blur {
  animation: counterBlur 0.6s ease-out forwards;
}

/* ── 39. Smooth scroll-enhanced header shadow ── */
header {
  transition: box-shadow 0.3s, background 0.3s;
}
header.scrolled {
  box-shadow: 0 4px 30px rgba(30,28,24,0.08);
  background: rgba(250,248,245,0.98);
}

/* ── 40. Rotating gradient for featured card ── */
@keyframes rotateGradient {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.pricing-card.featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: conic-gradient(from var(--angle), var(--green), var(--amber), var(--green-l), var(--green));
  animation: rotateGradient 4s linear infinite;
  z-index: -1;
  opacity: 0.6;
}
.pricing-card.featured {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px;
}
.pricing-card.featured:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 60px rgba(235,165,150,0.25);
}

.anim-bounce.vis, .anim-pop.vis, .anim-slide-up.vis, .anim-slide-left.vis, .anim-slide-right.vis {
  transition: none !important;
}

/* ── 41. Cartes plus dynamiques (hover enrichi) ── */
.pain-card, .sol-card, .benefit-card, .trust-card, .pricing-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease, border-color 0.3s ease;
  position: relative;
}

/* Lueur de bordure animée au survol (couleurs du site) */
.pain-card::after, .sol-card::after, .benefit-card::after, .pricing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--green), var(--amber), var(--green-l));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.pain-card:hover::after, .sol-card:hover::after,
.benefit-card:hover::after, .pricing-card:hover::after {
  opacity: 0.9;
}

/* Soulèvement + léger zoom plus marqué */
.pain-card:hover, .sol-card:hover, .benefit-card:hover {
  transform: translateY(-10px) scale(1.025) !important;
  box-shadow: 0 22px 50px rgba(30,28,24,.14), 0 0 0 1px rgba(235,165,150,.12);
}
.trust-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 44px rgba(0,0,0,.28);
}
.pricing-card:hover {
  transform: translateY(-12px) scale(1.03);
}

/* Icônes des cartes : rebond/animation dynamique */
@keyframes iconJump {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-8px) scale(1.18) rotate(-8deg); }
  70%  { transform: translateY(0) scale(0.95) rotate(4deg); }
  100% { transform: translateY(0) scale(1); }
}
.sol-card:hover .sol-icon,
.benefit-card:hover .benefit-icon,
.trust-card:hover .trust-icon {
  animation: iconJump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reflet lumineux qui balaie la carte au survol */
.pain-card, .sol-card, .benefit-card, .pricing-card { overflow: hidden; }
.pain-card .card-shine, .sol-card .card-shine,
.benefit-card .card-shine, .pricing-card .card-shine { display: none; }
.pain-card::before, .sol-card::before, .benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(110deg, transparent, rgba(235,165,150,.18), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}
.pain-card:hover::before, .sol-card:hover::before, .benefit-card:hover::before {
  left: 130%;
}

/* ── Responsive touch devices ── */
@media (hover: none) {
  .tilt-card:hover { transform: none !important; }
  .octus-big-card:hover { transform: none !important; }
  .hero-laptop-wrap:hover { transform: none !important; }
}


/* ═══════════════════════════════════════════════════
   INTRO FLASH — ÉCRAN DE CHARGEMENT CINÉMATIQUE
═══════════════════════════════════════════════════ */
#intro-flash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #fff;
  pointer-events: all;
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
#intro-flash.hide {
  opacity: 0; transform: scale(1.04);
  pointer-events: none;
}
.flash-logo-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  animation: flashLogoIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes flashLogoIn {
  from { opacity:0; transform: translateY(22px) scale(.94); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.flash-logo-img {
  width: 64px; height: 64px; object-fit: contain;
  animation: flashLogoPulse 1.6s ease-in-out infinite;
}
@keyframes flashLogoPulse {
  0%,100% { filter: drop-shadow(0 0 0px rgba(196,115,95,0)); }
  50%      { filter: drop-shadow(0 0 20px rgba(196,115,95,.45)); }
}
.flash-brand {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: .08em;
  color: #1E1C18;
  animation: flashLogoIn .7s .1s cubic-bezier(.22,1,.36,1) both;
}
.flash-tagline {
  font-family: 'Amaranth', sans-serif;
  font-size: 14px; font-style: italic; color: #9a9590;
  animation: flashLogoIn .7s .2s cubic-bezier(.22,1,.36,1) both;
}
.flash-bar-wrap {
  width: 180px; height: 2px; background: rgba(30,28,24,.08);
  border-radius: 2px; overflow: hidden; margin-top: 32px;
  animation: flashLogoIn .5s .3s both;
}
.flash-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #EBA596, #C4735F);
  border-radius: 2px;
  animation: flashBarFill 1.1s .35s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes flashBarFill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ── Flash blanc final ── */
.flash-white {
  position: absolute; inset: 0; background: #fff;
  opacity: 0; pointer-events: none;
  animation: flashWhite .3s 1.35s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes flashWhite {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════
   SOL-CARDS — ENRICHIES
═══════════════════════════════════════════════════ */

/* Base enrichie */
.sol-card {
  display: flex; flex-direction: column; gap: 0;
  overflow: hidden;
}
.sol-card-visual {
  width: 100%; height: 140px;
  border-radius: 12px; margin-bottom: 22px;
  position: relative; overflow: hidden;
  background: var(--green-xl);
  border: 1px solid rgba(235,165,150,.18);
  flex-shrink: 0;
}

/* ── CARD 1 : Dépôt de documents — upload animé ── */
.sol-upload-zone {
  position: absolute; inset: 12px;
  border: 2px dashed rgba(235,165,150,.45);
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  transition: border-color .3s;
}
.sol-card:hover .sol-upload-zone { border-color: rgba(196,115,95,.7); }
.sol-upload-icon {
  width: 36px; height: 36px;
  animation: uploadBounce 2.2s ease-in-out infinite;
}
@keyframes uploadBounce {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-8px); }
  60%     { transform: translateY(-4px); }
}
.sol-upload-icon svg { width: 100%; height: 100%; stroke: var(--rose-d); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.sol-file-list {
  display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 0 16px;
}
.sol-file-item {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.75); border-radius: 6px;
  padding: 5px 10px;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 11px; color: #6A6560;
  opacity: 0;
  animation: fileSlideIn .5s forwards;
}
.sol-file-item:nth-child(1) { animation-delay: .2s; }
.sol-file-item:nth-child(2) { animation-delay: .5s; }
.sol-file-item:nth-child(3) { animation-delay: .8s; }
@keyframes fileSlideIn {
  from { opacity:0; transform: translateX(-12px); }
  to   { opacity:1; transform: translateX(0); }
}
.sol-file-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.sol-file-bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--rose-d), var(--amber));
  transform-origin: left;
  animation: barGrow .6s forwards;
}
.sol-file-item:nth-child(1) .sol-file-bar { animation-delay: .4s; }
.sol-file-item:nth-child(2) .sol-file-bar { animation-delay: .7s; }
.sol-file-item:nth-child(3) .sol-file-bar { animation-delay: 1s; }
@keyframes barGrow {
  from { transform: scaleX(0); opacity:0; }
  to   { transform: scaleX(1); opacity:1; }
}

/* ── CARD 2 : Audio — onde sonore ── */
.sol-audio-wrap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.sol-audio-mic {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--rose-d); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(196,115,95,.45);
  animation: micPulse 1.8s ease-in-out infinite;
  z-index: 2;
}
.sol-audio-mic svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }
@keyframes micPulse {
  0%   { box-shadow: 0 0 0 0 rgba(196,115,95,.45); }
  70%  { box-shadow: 0 0 0 16px rgba(196,115,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,115,95,0); }
}
.sol-wave {
  display: flex; align-items: center; gap: 3px; height: 36px;
}
.sol-wave-bar {
  width: 3px; border-radius: 2px;
  background: linear-gradient(to top, var(--rose-d), var(--amber));
  animation: waveAnim 1s ease-in-out infinite alternate;
}
.sol-wave-bar:nth-child(1)  { animation-delay: 0s;    --h: 12px; }
.sol-wave-bar:nth-child(2)  { animation-delay: .08s;  --h: 22px; }
.sol-wave-bar:nth-child(3)  { animation-delay: .16s;  --h: 30px; }
.sol-wave-bar:nth-child(4)  { animation-delay: .24s;  --h: 18px; }
.sol-wave-bar:nth-child(5)  { animation-delay: .32s;  --h: 34px; }
.sol-wave-bar:nth-child(6)  { animation-delay: .40s;  --h: 24px; }
.sol-wave-bar:nth-child(7)  { animation-delay: .48s;  --h: 28px; }
.sol-wave-bar:nth-child(8)  { animation-delay: .56s;  --h: 16px; }
.sol-wave-bar:nth-child(9)  { animation-delay: .64s;  --h: 32px; }
.sol-wave-bar:nth-child(10) { animation-delay: .72s;  --h: 20px; }
.sol-wave-bar:nth-child(11) { animation-delay: .80s;  --h: 14px; }
.sol-wave-bar:nth-child(12) { animation-delay: .88s;  --h: 26px; }
@keyframes waveAnim {
  from { height: 4px; }
  to   { height: var(--h, 20px); }
}
.sol-audio-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose-d); opacity: .7;
}

/* ── CARD 3 : Interview Octus — bulles de chat ── */
.sol-chat-wrap {
  position: absolute; inset: 10px;
  display: flex; flex-direction: column; gap: 7px; justify-content: center; padding: 0 4px;
  overflow: hidden;
}
.sol-bubble {
  max-width: 80%; padding: 7px 12px; border-radius: 12px;
  font-family: 'Cambria', Georgia, serif; font-size: 11px; line-height: 1.4;
  opacity: 0;
  animation: bubbleIn .4s forwards;
}
.sol-bubble.octus {
  background: rgba(110,127,92,.18); border-radius: 12px 12px 12px 3px;
  color: #3d4a30; align-self: flex-start;
}
.sol-bubble.user {
  background: rgba(196,115,95,.14); border-radius: 12px 12px 3px 12px;
  color: var(--rose-d); align-self: flex-end;
}
.sol-bubble:nth-child(1) { animation-delay: .3s; }
.sol-bubble:nth-child(2) { animation-delay: .9s; }
.sol-bubble:nth-child(3) { animation-delay: 1.5s; }
@keyframes bubbleIn {
  from { opacity:0; transform: translateY(8px) scale(.95); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.sol-bubble-cursor {
  display: inline-block; width: 6px; height: 12px;
  background: var(--rose-d); border-radius: 1px; margin-left: 3px;
  animation: cursorBlink .7s step-end infinite;
  vertical-align: middle;
}
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── CARD 4 : FLOW — nœuds connectés ── */
.sol-flow-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.sol-flow-svg {
  width: 100%; height: 100%;
  overflow: visible;
}
.flow-node {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sol-card:hover .flow-node { transform: scale(1.08); }
.flow-line {
  stroke: rgba(235,165,150,.35); stroke-width: 1.5;
  stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: drawLine 1s forwards;
}
.flow-line:nth-child(1) { animation-delay: .2s; }
.flow-line:nth-child(2) { animation-delay: .5s; }
.flow-line:nth-child(3) { animation-delay: .8s; }
.flow-line:nth-child(4) { animation-delay: 1.1s; }
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
.flow-node-circle {
  fill: #fff; stroke: var(--rose-d); stroke-width: 1.5;
  filter: drop-shadow(0 2px 6px rgba(196,115,95,.2));
  animation: nodeAppear .4s forwards; opacity: 0;
}
.flow-node-circle.center {
  fill: var(--rose-d); stroke: none;
  filter: drop-shadow(0 4px 12px rgba(196,115,95,.4));
}
.flow-node:nth-child(2) .flow-node-circle { animation-delay: .3s; }
.flow-node:nth-child(3) .flow-node-circle { animation-delay: .6s; }
.flow-node:nth-child(4) .flow-node-circle { animation-delay: .9s; }
.flow-node:nth-child(5) .flow-node-circle { animation-delay: 1.2s; }
.flow-node:nth-child(6) .flow-node-circle { animation-delay: 1.5s; }
@keyframes nodeAppear {
  from { opacity:0; transform: scale(0); }
  to   { opacity:1; transform: scale(1); }
}
.flow-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 9px; fill: #6A6560; text-anchor: middle;
  font-weight: 600; letter-spacing: .04em;
}

/* Sol card stats badge */
.sol-stat {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-xl); border: 1px solid rgba(235,165,150,.2);
  border-radius: 20px; padding: 5px 12px; margin-top: 14px;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 11px;
  color: var(--rose-d); font-weight: 600; align-self: flex-start;
}
.sol-stat::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose-d); flex-shrink: 0;
  animation: statDot 1.4s ease-in-out infinite;
}
@keyframes statDot {
  0%,100% { opacity:1; transform: scale(1); }
  50%     { opacity:.4; transform: scale(.7); }
}


/* ═══════════════════════════════════════════════
   PAIN-CARDS — enrichies
═══════════════════════════════════════════════ */
.pain-card { flex-direction: column; gap: 0; }

.pain-visual {
  width: 100%; height: 56px;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; position: relative;
}
/* Compteur de répétitions animé */
.pain-repeat-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(196,115,95,.1); border: 1px solid rgba(196,115,95,.2);
  border-radius: 20px; padding: 5px 12px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px; font-weight: 700; color: var(--rose-d);
  white-space: nowrap;
}
.pain-repeat-num {
  font-size: 15px; font-weight: 800; color: var(--rose-d);
  animation: countUp 2s ease-out forwards;
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Jauge / barre de tension */
.pain-tension-bar {
  flex: 1; height: 5px; background: rgba(196,115,95,.1);
  border-radius: 3px; overflow: hidden;
}
.pain-tension-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--rose-d));
  border-radius: 3px; transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s .4s cubic-bezier(.22,1,.36,1);
}
.pain-card.vis .pain-tension-fill { transform: scaleX(1); }

/* Avatars silhouettes */
.pain-avatars {
  display: flex; align-items: center;
}
.pain-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff;
  background: var(--rose-d);
  margin-left: -6px; display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 9px;
  font-weight: 700; color: #fff;
  opacity: 0; animation: avatarPop .3s forwards;
}
.pain-avatar:nth-child(1) { background: #EBA596; animation-delay: .3s; margin-left: 0; }
.pain-avatar:nth-child(2) { background: #C4735F; animation-delay: .45s; }
.pain-avatar:nth-child(3) { background: #C8A46A; animation-delay: .6s; }
.pain-avatar:nth-child(4) { background: #8A9679; animation-delay: .75s; }
@keyframes avatarPop {
  from { opacity:0; transform: scale(0) translateX(8px); }
  to   { opacity:1; transform: scale(1) translateX(0); }
}

/* Icone d'alerte animée */
.pain-alert-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(196,115,95,.12); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  animation: alertPulse 2s ease-in-out infinite;
}
.pain-alert-icon svg { width: 14px; height: 14px; stroke: var(--rose-d); fill: none; stroke-width: 2; }
@keyframes alertPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(196,115,95,.3); }
  50%     { box-shadow: 0 0 0 8px rgba(196,115,95,0); }
}

/* Tick animé */
.pain-tick {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(196,115,95,.1); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pain-tick svg {
  width: 13px; height: 13px; stroke: var(--rose-d); fill: none;
  stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 20; stroke-dashoffset: 20;
  animation: tickDraw .5s .5s forwards;
}
@keyframes tickDraw { to { stroke-dashoffset: 0; } }

/* ═══════════════════════════════════════════════
   BENEFIT-CARDS — enrichies
═══════════════════════════════════════════════ */
.benefit-visual {
  width: 100%; height: 80px;
  border-radius: 10px;
  margin-bottom: 18px;
  position: relative; overflow: hidden;
  background: var(--green-xl);
  border: 1px solid rgba(235,165,150,.15);
  display: flex; align-items: center; justify-content: center;
}

/* Bénéfice 1 : graphe de rétention du savoir */
.benefit-graph {
  display: flex; align-items: flex-end; gap: 6px;
  height: 52px; padding: 0 16px;
}
.benefit-bar {
  border-radius: 3px 3px 0 0;
  transform-origin: bottom; transform: scaleY(0);
  animation: barRise .6s forwards cubic-bezier(.34,1.56,.64,1);
}
.benefit-bar:nth-child(1) { width:12px; height:24px; background:rgba(196,115,95,.3); animation-delay:.2s; }
.benefit-bar:nth-child(2) { width:12px; height:36px; background:rgba(196,115,95,.5); animation-delay:.35s; }
.benefit-bar:nth-child(3) { width:12px; height:18px; background:rgba(196,115,95,.3); animation-delay:.5s; }
.benefit-bar:nth-child(4) { width:12px; height:44px; background:var(--rose-d); animation-delay:.65s; }
.benefit-bar:nth-child(5) { width:12px; height:52px; background:var(--rose-d); animation-delay:.8s; box-shadow:0 0 8px rgba(196,115,95,.4); }
@keyframes barRise { from{transform:scaleY(0)} to{transform:scaleY(1)} }
.benefit-graph-label {
  position:absolute; top:8px; right:12px;
  font-family:'Bricolage Grotesque',sans-serif; font-size:10px; font-weight:700;
  color:var(--rose-d); letter-spacing:.04em;
}

/* Bénéfice 2 : questions barrées (les questions disparaissent) */
.benefit-questions {
  display: flex; flex-direction: column; gap: 5px; padding: 0 14px; width: 100%;
}
.benefit-question-item {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Cambria', Georgia, serif; font-size: 10px; color: #9a9590;
  opacity: 0; animation: qFadeIn .4s forwards;
  white-space: nowrap;
}
.benefit-question-item:nth-child(1) { animation-delay: .2s; }
.benefit-question-item:nth-child(2) { animation-delay: .5s; }
.benefit-question-item:nth-child(3) { animation-delay: .8s; }
@keyframes qFadeIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
.benefit-q-text { position: relative; }
.benefit-q-text::after {
  content:''; position:absolute; left:0; top:50%; height:1.5px;
  background:var(--rose-d); width:0%;
  animation: strikeThrough .4s forwards;
}
.benefit-question-item:nth-child(1) .benefit-q-text::after { animation-delay: .7s; }
.benefit-question-item:nth-child(2) .benefit-q-text::after { animation-delay: 1s; }
.benefit-question-item:nth-child(3) .benefit-q-text::after { animation-delay: 1.3s; }
@keyframes strikeThrough { to { width: 100%; } }
.benefit-q-check {
  width:14px;height:14px;border-radius:50%;
  background:var(--rose-d); flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0; animation:checkAppear .2s forwards;
}
.benefit-question-item:nth-child(1) .benefit-q-check { animation-delay:.9s; }
.benefit-question-item:nth-child(2) .benefit-q-check { animation-delay:1.2s; }
.benefit-question-item:nth-child(3) .benefit-q-check { animation-delay:1.5s; }
@keyframes checkAppear { to{opacity:1;transform:scale(1)} from{opacity:0;transform:scale(0)} }
.benefit-q-check svg { width:8px;height:8px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round; }

/* Bénéfice 3 : courbe de progression */
.benefit-progress-wrap {
  padding: 0 14px; width: 100%; display: flex; flex-direction: column; gap: 6px;
}
.benefit-progress-row {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 9px;
  color: #9a9590; font-weight: 600; letter-spacing: .04em;
}
.benefit-progress-track {
  flex:1; height:4px; background:rgba(235,165,150,.12); border-radius:2px; overflow:hidden;
}
.benefit-progress-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--rose-d),var(--amber));
  transform:scaleX(0); transform-origin:left;
  animation:progFill .8s forwards cubic-bezier(.22,1,.36,1);
}
.benefit-progress-row:nth-child(1) .benefit-progress-fill { animation-delay:.2s; --w:0.35; }
.benefit-progress-row:nth-child(2) .benefit-progress-fill { animation-delay:.45s; --w:0.6; }
.benefit-progress-row:nth-child(3) .benefit-progress-fill { animation-delay:.7s; --w:0.9; }
@keyframes progFill { to { transform: scaleX(var(--w,1)); } }
.benefit-progress-pct {
  font-family:'Bricolage Grotesque',sans-serif; font-size:9px;
  font-weight:700; color:var(--rose-d); min-width:24px; text-align:right;
}

/* ═══════════════════════════════════════════════
   TRUST-CARDS (security) — enrichies
═══════════════════════════════════════════════ */
.trust-visual {
  width:100%; margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
/* Shield animé */
.trust-shield-anim {
  position:relative; flex-shrink:0;
}
.trust-shield-ring {
  position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(235,165,150,.2);
  animation:shieldRingPulse 2.4s ease-in-out infinite;
}
@keyframes shieldRingPulse {
  0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.15);opacity:1}
}
/* Status chips */
.trust-status-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:20px;
  font-family:'Bricolage Grotesque',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.04em;
}
.trust-status-chip.green {
  background:rgba(110,127,92,.18); color:#5a7048;
  border:1px solid rgba(110,127,92,.3);
}
.trust-status-chip.blue {
  background:rgba(200,164,106,.12); color:#8a6f35;
  border:1px solid rgba(200,164,106,.25);
}
.trust-status-chip::before {
  content:''; width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;
  animation:chipDot 1.8s ease-in-out infinite;
}
@keyframes chipDot { 0%,100%{opacity:1}50%{opacity:.3} }

/* France map mini */
.trust-server-dots {
  display:flex; gap:5px; align-items:center; flex-wrap:wrap;
}
.trust-server-dot {
  width:8px;height:8px;border-radius:50%;
  background:rgba(110,127,92,.5);
  animation:serverBlink 2s ease-in-out infinite;
}
.trust-server-dot:nth-child(1){animation-delay:0s}
.trust-server-dot:nth-child(2){animation-delay:.3s}
.trust-server-dot:nth-child(3){animation-delay:.6s}
@keyframes serverBlink { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.85)} }

/* Verrou animé */
.trust-lock-anim svg {
  stroke:rgba(235,165,150,.7); fill:none; stroke-width:1.5; stroke-linecap:round;
  animation:lockShake .5s 1s ease-in-out;
}
@keyframes lockShake {
  0%,100%{transform:rotate(0)} 25%{transform:rotate(-5deg)} 75%{transform:rotate(5deg)}
}

/* ═══════════════════════════════════════════════
   FORWHOM-ITEMS — enrichies
═══════════════════════════════════════════════ */
.forwhom-tag-mini {
  display:inline-flex; align-items:center; gap:4px;
  margin-top:8px;
  background:rgba(235,165,150,.08); border:1px solid rgba(235,165,150,.18);
  border-radius:12px; padding:3px 9px;
  font-family:'Bricolage Grotesque',sans-serif; font-size:10px; font-weight:600;
  color:var(--rose-d); letter-spacing:.03em;
}

/* ═══════════════════════════════════════════════
   TIMELINE-ITEMS — enrichies
═══════════════════════════════════════════════ */
.tl-visual {
  margin-top:12px;
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
}
.tl-chip {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(235,165,150,.08); border:1px solid rgba(235,165,150,.18);
  border-radius:20px; padding:4px 10px;
  font-family:'Bricolage Grotesque',sans-serif; font-size:10px; font-weight:600;
  color:#8A9679; letter-spacing:.03em;
  opacity:0; transform:scale(.85);
  transition:opacity .3s, transform .3s;
}
.tl-item.vis .tl-chip { opacity:1; transform:scale(1); }
.tl-item.vis .tl-chip:nth-child(1){transition-delay:.3s}
.tl-item.vis .tl-chip:nth-child(2){transition-delay:.45s}
.tl-item.vis .tl-chip:nth-child(3){transition-delay:.6s}
.tl-chip::before {
  content:''; width:5px;height:5px;border-radius:50%;
  background:var(--rose-d); flex-shrink:0;
}

/* Arrow connector badge */
.tl-connector {
  display:flex; align-items:center; gap:6px; margin-top:8px;
  font-family:'Bricolage Grotesque',sans-serif; font-size:10px;
  color:var(--ink-ll);
}
.tl-connector-arrow {
  width:28px; height:2px; background:linear-gradient(90deg,var(--rose-d),var(--amber));
  border-radius:1px; position:relative;
}
.tl-connector-arrow::after {
  content:''; position:absolute; right:-1px; top:-3px;
  border-left:6px solid var(--amber); border-top:4px solid transparent; border-bottom:4px solid transparent;
}

/* ═══════════════════════════════════════════════
   PRICING-CARDS — enrichies
═══════════════════════════════════════════════ */
.pricing-visual {
  width:100%; margin-bottom:20px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.pricing-user-dots {
  display:flex; align-items:center;
}
.pricing-user-dot {
  width:22px; height:22px; border-radius:50%;
  border:2px solid #fff; display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-size:8px; font-weight:700; color:#fff;
  margin-left:-5px; opacity:0; animation:uDotIn .3s forwards;
}
.pricing-user-dot:first-child{margin-left:0}
.pricing-user-dot:nth-child(1){background:#EBA596;animation-delay:.2s}
.pricing-user-dot:nth-child(2){background:#C4735F;animation-delay:.3s}
.pricing-user-dot:nth-child(3){background:#C8A46A;animation-delay:.4s}
@keyframes uDotIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.pricing-capacity {
  font-family:'Bricolage Grotesque',sans-serif; font-size:10px;
  font-weight:600; color:var(--ink-ll);
}
.pricing-usage-bar {
  width:100%; height:4px; background:rgba(30,28,24,.06); border-radius:2px; overflow:hidden;
}
.pricing-usage-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--rose-d),var(--amber));
  transform:scaleX(0); transform-origin:left;
  animation:usageFill .9s .4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes usageFill{to{transform:scaleX(var(--usage,.3))}}


/* ═══════════════════════════════════════════════
   PRICING — VARIANTES COULEUR PAR CARTE
═══════════════════════════════════════════════ */
/* Standard 100€ — VERT */
.pricing-card.tone-green::before {
  background: conic-gradient(from var(--angle), #6E7F5C, #A8B89A, #fff, #6E7F5C);
}
.pricing-card.tone-green::after {
  background: linear-gradient(135deg, #6E7F5C, #A8B89A, #fff);
}
.pricing-card.tone-green:hover { box-shadow: 0 20px 50px rgba(110,127,92,.22); }
.pricing-card.tone-green .pricing-cta:hover { background: #6E7F5C; border-color: #6E7F5C; color:#fff; }

/* Premium 160€ — ROSE renforcé (déjà featured) */
.pricing-card.tone-rose::before {
  background: conic-gradient(from var(--angle), var(--rose-d), var(--amber), var(--rose-l), var(--rose-d));
}
.pricing-card.tone-rose::after {
  background: linear-gradient(135deg, var(--rose-d), var(--amber), var(--rose-l));
}
.pricing-card.tone-rose { border-color: var(--rose-d) !important; box-shadow: 0 8px 40px rgba(196,115,95,.22) !important; }
.pricing-card.tone-rose:hover { box-shadow: 0 24px 60px rgba(196,115,95,.3) !important; }
.pricing-card.tone-rose .pricing-cta { background: var(--rose-d) !important; border-color: var(--rose-d) !important; color:#fff !important; }
.pricing-card.tone-rose .pricing-badge { background: var(--rose-d); }

/* Réseau 190€ — MARRON / ambre foncé */
.pricing-card.tone-brown::before {
  background: conic-gradient(from var(--angle), #8B5A2B, var(--amber), #C8A46A, #8B5A2B);
}
.pricing-card.tone-brown::after {
  background: linear-gradient(135deg, #8B5A2B, var(--amber), #C8A46A);
}
.pricing-card.tone-brown:hover { box-shadow: 0 20px 50px rgba(139,90,43,.22); }
.pricing-card.tone-brown .pricing-cta:hover { background: #8B5A2B; border-color: #8B5A2B; color:#fff; }

/* ═══════════════════════════════════════════════
   HERO — SLOGAN AU-DESSUS DU TITRE
═══════════════════════════════════════════════ */
.hero-slogan {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Amaranth', sans-serif; font-style: italic;
  font-size: 15px; color: var(--rose-d);
  letter-spacing: .02em;
  margin-bottom: 18px;
  opacity: 0; animation: slogFadeIn .7s .15s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-slogan::before {
  content: ''; width: 22px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--rose-d));
}
@keyframes slogFadeIn {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════
   HERO BUTTON — TEXTE BLANC
═══════════════════════════════════════════════ */
.hero-btn-primary {
  color: #fff !important;
}
.hero-btn-primary svg {
  stroke: #fff !important;
}


/* ═══════════════════════════════════════════════
   PRICING — FONDS TEINTÉS PAR CARTE (pleine couleur)
═══════════════════════════════════════════════ */
.pricing-card.tone-green {
  background: #EAEEE4;
}
.pricing-card.tone-rose {
  background: #FBEAE4 !important;
}
.pricing-card.tone-brown {
  background: #F3E8D8;
}
/* Texte adapté sur fond teinté */
.pricing-card.tone-green .pricing-features li,
.pricing-card.tone-rose .pricing-features li,
.pricing-card.tone-brown .pricing-features li,
.pricing-card.tone-green .pricing-desc,
.pricing-card.tone-rose .pricing-desc,
.pricing-card.tone-brown .pricing-desc {
  color: var(--ink-l);
}


/* ═══════════════════════════════════════════════
   SOL-CARD — HEADER (icone + titre) en haut
═══════════════════════════════════════════════ */
.sol-card-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.sol-card-header .sol-icon { margin: 0; }
.sol-card-header h3 { margin: 0; }


/* ═══════════════════════════════════════════════
   BENEFIT-CARD — HEADER (icone + titre) en haut
═══════════════════════════════════════════════ */
.benefit-card-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.benefit-card-header .benefit-icon { margin: 0; }
.benefit-card-header h3 { margin: 0; }

/* ═══════════════════════════════════════════════
   TRUST-CARD — HEADER (icone + titre) en haut
═══════════════════════════════════════════════ */
.trust-card-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.trust-card-header .trust-icon { margin: 0; }
.trust-card-header h3 { margin: 0; }

/* ═══════════════════════════════════════════════
   TRUST-CARD — CONTRASTE AMÉLIORÉ (fond sombre)
═══════════════════════════════════════════════ */
.trust-status-chip.green {
  background: rgba(110,127,92,.35);
  color: #fff;
  border: 1px solid rgba(168,184,154,.4);
}
.trust-status-chip.blue {
  background: rgba(200,164,106,.28);
  color: #fff;
  border: 1px solid rgba(232,210,168,.4);
}
.trust-server-dots span {
  color: rgba(255,255,255,.75) !important;
}


/* ═══════════════════════════════════════════════
   NAVIGATION COMPLÈTE — DESKTOP + MOBILE
═══════════════════════════════════════════════ */
.hd-links a.active { color: var(--rose-d) !important; }

/* Bouton burger (mobile) */
.hd-burger {
  display: none;
  width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid rgba(30,28,24,.1);
  background: #fff;
  align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.hd-burger:hover { border-color: var(--rose-d); }
.hd-burger svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; }
.hd-burger .icon-close { display: none; }
.hd-burger.open .icon-menu { display: none; }
.hd-burger.open .icon-close { display: block; }

/* Menu mobile déroulant */
.hd-mobile-menu {
  position: fixed; top: 68px; left: 0; right: 0; z-index: 199;
  background: rgba(250,248,245,.98); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(235,165,150,.12);
  box-shadow: 0 12px 30px rgba(30,28,24,.08);
  display: flex; flex-direction: column; padding: 8px 5vw 18px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s cubic-bezier(.22,1,.36,1), opacity .25s;
}
.hd-mobile-menu.open { max-height: 480px; opacity: 1; }
.hd-mobile-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 4px;
  font-family: 'Cambria', Georgia, serif; font-size: 15px; font-weight: 500;
  color: var(--ink-l); border-bottom: 1px solid rgba(30,28,24,.05);
  transition: color .2s, padding-left .2s;
}
.hd-mobile-menu a:last-child { border-bottom: none; }
.hd-mobile-menu a:hover, .hd-mobile-menu a:active { color: var(--rose-d); padding-left: 8px; }
.hd-mobile-menu a span.nm-arrow { font-size: 13px; opacity: .4; }

@media (max-width: 880px) {
  .hd-burger { display: flex; }
}
@media (min-width: 881px) {
  .hd-mobile-menu { display: none; }
}


/* ═══════════════════════════════════════════════
   SCROLL OFFSET — éviter que le header fixe cache le haut des sections
═══════════════════════════════════════════════ */
#problem, #solution, #how, #benefits, #forwhom, #security, #pricing, #faq, #octus, #final-cta {
  scroll-margin-top: 84px;
}


/* ═══════════════════════════════════════════════
   FOOTER — LIEN LINKEDIN
═══════════════════════════════════════════════ */
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(196,115,95,.1);
  border: 1px solid rgba(196,115,95,.2);
  margin-top: 16px;
  transition: background .25s, transform .25s, border-color .25s;
}
.footer-social:hover {
  background: var(--rose-d);
  border-color: var(--rose-d);
  transform: translateY(-3px) scale(1.06);
}
.footer-social svg {
  width: 18px; height: 18px;
  fill: var(--rose-d);
  transition: fill .25s;
}
.footer-social:hover svg { fill: #fff; }




/* ═══════════════════════════════════════════════
   CRÉDIT DÉVELOPPEUR — NEXT STEP DIGITAL
═══════════════════════════════════════════════ */
.dev-credit {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 5vw;
  background: var(--ink);
  position: relative; z-index: 1;
}
.dev-credit-li {
  position: absolute; left: 5vw; top: 50%;
  transform: translateY(-50%);
}
.dev-credit-li:hover {
  transform: translateY(-50%) scale(1.06);
}
.dev-credit a.dev-credit-link {
  display: inline-flex; align-items: center;
  transition: opacity .2s;
}
.dev-credit a.dev-credit-link:hover { opacity: .8; }
.dev-credit-logo {
  height: 72px; width: auto; object-fit: contain;
  transition: transform .25s;
  filter: brightness(0) invert(1);
  opacity: .85;
}
.dev-credit a.dev-credit-link:hover .dev-credit-logo { transform: scale(1.05); opacity: 1; }
.dev-credit-li {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.08);
  transition: background .25s, transform .25s;
}
.dev-credit-li:hover { background: #0A66C2; transform: translateY(-2px) scale(1.06); }
.dev-credit-li svg { width: 17px; height: 17px; fill: rgba(255,255,255,.7); transition: fill .25s; }
.dev-credit-li:hover svg { fill: #fff; }




/* ═══════════════════════════════════════════════
   HERO — "l'invisible" : dissolution lettre par lettre
   Visible 2.5s -> disparition g->d -> pause -> réapparition d->g -> visible 2.5s
   Cycle total : 9.0s
═══════════════════════════════════════════════ */
.invisible-word { display: inline-block; white-space: nowrap; }
.invisible-letter {
  display: inline-block;
  animation: 9.00s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .invisible-letter { animation: none !important; }
}

@keyframes letterCycle0 {
  0.000% { opacity: 1; filter: blur(0px); }
  27.778% { opacity: 1; filter: blur(0px); }
  30.202% { opacity: 0.04; filter: blur(4px); }
  70.707% { opacity: 0.04; filter: blur(4px); }
  72.222% { opacity: 1; filter: blur(0px); }
  100.000% { opacity: 1; filter: blur(0px); }
}
.invisible-letter:nth-child(1) { animation-name: letterCycle0; }

@keyframes letterCycle1 {
  0.000% { opacity: 1; filter: blur(0px); }
  27.778% { opacity: 1; filter: blur(0px); }
  29.293% { opacity: 1; filter: blur(0px); }
  31.717% { opacity: 0.04; filter: blur(4px); }
  69.192% { opacity: 0.04; filter: blur(4px); }
  71.616% { opacity: 1; filter: blur(0px); }
  100.000% { opacity: 1; filter: blur(0px); }
}
.invisible-letter:nth-child(2) { animation-name: letterCycle1; }

@keyframes letterCycle2 {
  0.000% { opacity: 1; filter: blur(0px); }
  27.778% { opacity: 1; filter: blur(0px); }
  30.808% { opacity: 1; filter: blur(0px); }
  33.232% { opacity: 0.04; filter: blur(4px); }
  67.677% { opacity: 0.04; filter: blur(4px); }
  70.101% { opacity: 1; filter: blur(0px); }
  100.000% { opacity: 1; filter: blur(0px); }
}
.invisible-letter:nth-child(3) { animation-name: letterCycle2; }

@keyframes letterCycle3 {
  0.000% { opacity: 1; filter: blur(0px); }
  27.778% { opacity: 1; filter: blur(0px); }
  32.323% { opacity: 1; filter: blur(0px); }
  34.747% { opacity: 0.04; filter: blur(4px); }
  66.162% { opacity: 0.04; filter: blur(4px); }
  68.586% { opacity: 1; filter: blur(0px); }
  100.000% { opacity: 1; filter: blur(0px); }
}
.invisible-letter:nth-child(4) { animation-name: letterCycle3; }

@keyframes letterCycle4 {
  0.000% { opacity: 1; filter: blur(0px); }
  27.778% { opacity: 1; filter: blur(0px); }
  33.838% { opacity: 1; filter: blur(0px); }
  36.263% { opacity: 0.04; filter: blur(4px); }
  64.646% { opacity: 0.04; filter: blur(4px); }
  67.071% { opacity: 1; filter: blur(0px); }
  100.000% { opacity: 1; filter: blur(0px); }
}
.invisible-letter:nth-child(5) { animation-name: letterCycle4; }

@keyframes letterCycle5 {
  0.000% { opacity: 1; filter: blur(0px); }
  27.778% { opacity: 1; filter: blur(0px); }
  35.354% { opacity: 1; filter: blur(0px); }
  37.778% { opacity: 0.04; filter: blur(4px); }
  63.131% { opacity: 0.04; filter: blur(4px); }
  65.556% { opacity: 1; filter: blur(0px); }
  100.000% { opacity: 1; filter: blur(0px); }
}
.invisible-letter:nth-child(6) { animation-name: letterCycle5; }

@keyframes letterCycle6 {
  0.000% { opacity: 1; filter: blur(0px); }
  27.778% { opacity: 1; filter: blur(0px); }
  36.869% { opacity: 1; filter: blur(0px); }
  39.293% { opacity: 0.04; filter: blur(4px); }
  61.616% { opacity: 0.04; filter: blur(4px); }
  64.040% { opacity: 1; filter: blur(0px); }
  100.000% { opacity: 1; filter: blur(0px); }
}
.invisible-letter:nth-child(7) { animation-name: letterCycle6; }

@keyframes letterCycle7 {
  0.000% { opacity: 1; filter: blur(0px); }
  27.778% { opacity: 1; filter: blur(0px); }
  38.384% { opacity: 1; filter: blur(0px); }
  40.808% { opacity: 0.04; filter: blur(4px); }
  60.101% { opacity: 0.04; filter: blur(4px); }
  62.525% { opacity: 1; filter: blur(0px); }
  100.000% { opacity: 1; filter: blur(0px); }
}
.invisible-letter:nth-child(8) { animation-name: letterCycle7; }

@keyframes letterCycle8 {
  0.000% { opacity: 1; filter: blur(0px); }
  27.778% { opacity: 1; filter: blur(0px); }
  39.899% { opacity: 1; filter: blur(0px); }
  42.323% { opacity: 0.04; filter: blur(4px); }
  58.586% { opacity: 0.04; filter: blur(4px); }
  61.010% { opacity: 1; filter: blur(0px); }
  100.000% { opacity: 1; filter: blur(0px); }
}
.invisible-letter:nth-child(9) { animation-name: letterCycle8; }

@keyframes letterCycle9 {
  0.000% { opacity: 1; filter: blur(0px); }
  27.778% { opacity: 1; filter: blur(0px); }
  41.414% { opacity: 1; filter: blur(0px); }
  43.838% { opacity: 0.04; filter: blur(4px); }
  57.071% { opacity: 0.04; filter: blur(4px); }
  59.495% { opacity: 1; filter: blur(0px); }
  100.000% { opacity: 1; filter: blur(0px); }
}
.invisible-letter:nth-child(10) { animation-name: letterCycle9; }

@keyframes letterCycle10 {
  0.000% { opacity: 1; filter: blur(0px); }
  27.778% { opacity: 1; filter: blur(0px); }
  42.929% { opacity: 1; filter: blur(0px); }
  44.444% { opacity: 0.04; filter: blur(4px); }
  55.556% { opacity: 0.04; filter: blur(4px); }
  57.980% { opacity: 1; filter: blur(0px); }
  100.000% { opacity: 1; filter: blur(0px); }
}
.invisible-letter:nth-child(11) { animation-name: letterCycle10; }


/* ═══════════════════════════════════════════════
   PATCH CIBLÉ — HEADER NAV + SECTION SÉCURITÉ
═══════════════════════════════════════════════ */

/* 1. Police des liens de navigation du header → Amaranth */
.hd-links a {
  font-family: 'Amaranth', sans-serif;
}

/* 2. Titre #security : "Votre savoir-faire reste" en blanc cassé,
      écrase .problem-title { color:#1c1917 !important; } */
#security .sec-security-head h2.problem-title {
  color: #FAF8F5 !important;
}
#security .sec-security-head h2.problem-title em {
  color: var(--amber) !important;
}

/* 3. Trust-cards : fond blanc au lieu de semi-transparent */
#security .trust-card {
  background: #FFFFFF;
  border: 1px solid rgba(110,127,92,.12);
  box-shadow: 0 6px 24px rgba(30,28,24,.08);
}
#security .trust-card:hover {
  border-color: rgba(110,127,92,.25);
  box-shadow: 0 10px 32px rgba(30,28,24,.12);
}

/* 4. Textes des trust-cards : couleurs foncées pour lisibilité sur blanc */
#security .trust-card h3 {
  color: #1E1C18;
}
#security .trust-card p {
  color: #6A6560;
}
#security .trust-card .trust-server-dots span {
  color: #9A9590 !important;
}

/* Icônes : fond clair adapté au fond blanc */
#security .trust-icon {
  background: rgba(235,165,150,.12);
}
#security .trust-icon svg {
  stroke: var(--rose-d);
}
#security .trust-lock-anim svg {
  stroke: var(--rose-d) !important;
}
#security .trust-shield-anim svg {
  stroke: var(--rose-d) !important;
}

/* Chips de statut : adaptés sur fond blanc (au lieu de blanc-sur-blanc) */
#security .trust-status-chip.green {
  background: rgba(110,127,92,.12);
  color: #5a7048;
  border: 1px solid rgba(110,127,92,.22);
}
#security .trust-status-chip.blue {
  background: rgba(200,164,106,.14);
  color: #8a6f35;
  border: 1px solid rgba(200,164,106,.28);
}


/* ═══════════════════════════════════════════════
   PATCH CIBLÉ #2 — Bénéfices / Sécurité / Tarifs / Final / Footer
═══════════════════════════════════════════════ */

/* 1a. Bénéfices : retirer tout trait décoratif résiduel + centrer le bloc d'intro */
.benefits-head .eyebrow-bg::before,
.benefits-head .eyebrow-bg::after,
.benefits-head .eyebrow::before,
.benefits-head .eyebrow::after {
  content: none !important;
  display: none !important;
}
.benefits-head {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0 !important;
}
.benefits-head > div {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}
.benefits-head .sec-sub {
  max-width: 640px;
  margin: 18px auto 0 !important;
  text-align: center !important;
}

/* 1b. Sécurité : "chez vous" en rose pâle (spécificité > .problem-title !important) */
#security .sec-security-head h2.problem-title {
  color: #FAF8F5 !important;
}
#security .sec-security-head h2.problem-title em {
  color: #F2C2B8 !important;
}

/* 2. Tarifs — badges (.pricing-name) plus grands, centrés */
.pricing-card .pricing-name {
  font-size: 0.92rem !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-ll);
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto 22px !important;
}

/* 3. Final CTA — phrase principale en Amaranth */
#final-cta .fcta-inner h2 {
  font-family: 'Amaranth', sans-serif;
}

/* Final CTA — description en deux lignes centrées */
#final-cta .fcta-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
#final-cta .fcta-sub .fcta-line2 {
  display: block;
}

/* 5. Footer — phrase plus lisible */
footer > .footer-grid .footer-tagline,
footer p.footer-claim {
  color: #FFFFFF !important;
  font-size: 16px !important;
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════
   PATCH CIBLÉ #3 — Octus / Pour qui / Tarifs / Bénéfices / Comment ça marche
═══════════════════════════════════════════════ */

/* 1. Octus : retirer traits décoratifs autour de "RENCONTREZ OCTUS" */
.octus-header .eyebrow::before,
.octus-header .eyebrow::after,
.octus-header .eyebrow-bg::before,
.octus-header .eyebrow-bg::after {
  content: none !important;
  display: none !important;
}
.octus-header .eyebrow {
  justify-content: center;
}

/* 2. Pour qui : retirer traits décoratifs autour de "POUR QUI ?" */
#forwhom .eyebrow::before,
#forwhom .eyebrow::after,
#forwhom .eyebrow-bg::before,
#forwhom .eyebrow-bg::after {
  content: none !important;
  display: none !important;
}
#forwhom .eyebrow {
  justify-content: center;
}

/* 3a. Tarifs — titre forcé sur deux lignes exactement (desktop) */
.pricing-head h2.problem-title {
  white-space: normal;
}
.pricing-head h2.problem-title > *:first-child,
.pricing-head h2.problem-title {
  display: block;
}
@media (min-width: 641px) {
  .pricing-head h2.problem-title {
    font-size: clamp(36px, 4.6vw, 60px) !important;
  }
  .pricing-head {
    max-width: 680px;
  }
  .pricing-head h2.problem-title br {
    display: block;
  }
}

/* 3b. Tarifs — supprimer l'animation autour de Premium, garder un rendu rose statique */
.pricing-card.featured::before {
  animation: none !important;
  background: var(--rose-d) !important;
  opacity: 0.18 !important;
}
.pricing-card.tone-rose.featured {
  border: 1px solid var(--rose-d) !important;
}

/* 3c. Tarifs — couleur des montants de prix */
.pricing-card.tone-green .pricing-amount { color: #6E7F5C; }
.pricing-card.tone-rose  .pricing-amount { color: #DA8373; }
.pricing-card.tone-brown .pricing-amount { color: #4A3F35; }

/* 3d. Tarifs — titres des offres : plus grands, centrés, Amaranth, colorés */
.pricing-card .pricing-name {
  font-family: 'Amaranth', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none !important;
}
.pricing-card.tone-green .pricing-name { color: #6E7F5C !important; }
.pricing-card.tone-rose  .pricing-name { color: #DA8373 !important; }
.pricing-card.tone-brown .pricing-name { color: #4A3F35 !important; }

/* 4. Bénéfices — encadré final en Amaranth, plus grand */
.benefits-closer p {
  font-family: 'Amaranth', sans-serif;
  font-size: 1.25rem;
  line-height: 1.6;
}

/* 5. Comment ça marche — couleur des ronds numérotés */
#how .tl-item:nth-of-type(1) .tl-num,
#how .tl-item:nth-child(1) .tl-num {
  background: #6E7F5C !important;
}
#how .tl-item:nth-of-type(2) .tl-num,
#how .tl-item:nth-child(2) .tl-num {
  background: #DA8373 !important;
}
#how .tl-item:nth-of-type(3) .tl-num,
#how .tl-item:nth-child(3) .tl-num {
  background: #4A3F35 !important;
}
#how .tl-num {
  color: #FFFFFF !important;
}



/* ═══════════════════════════════════════════════
   OCTUS — NOUVELLE COMPOSITION ASYMÉTRIQUE
   Mascotte géante hors-cadre + cartes empilées
═══════════════════════════════════════════════ */

#octus {
  background: linear-gradient(160deg, var(--bg) 0%, #F1ECE6 100%);
  position: relative;
  overflow: visible;
}

/* ── Intro courte sous le titre ── */
.octus-intro {
  font-family: 'Cambria', Georgia, serif;
  font-size: 16px; line-height: 1.7;
  color: var(--ink-l);
  max-width: 520px; margin: 18px auto 0;
}

/* ── SCÈNE : grille asymétrique mascotte / cartes ── */
.octus-stage {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0 24px;
  align-items: start;
  position: relative;
}

/* ── Zone mascotte : géante, hors-cadre ── */
.octus-mascot-zone {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 20px;
}
.octus-mascot-halo {
  position: absolute;
  top: 38%; left: 50%;
  width: 360px; height: 360px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218,131,115,.30) 0%, rgba(110,127,92,.12) 50%, transparent 75%);
  filter: blur(30px);
  z-index: 0;
  animation: octusHaloPulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes octusHaloPulse {
  0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}
.octus-mascot-zone .octus-mascot-img {
  position: relative; z-index: 1;
  width: 100%;
  max-width: 480px;
  margin: -10px -60px -10px 0;
  filter: drop-shadow(0 30px 50px rgba(74,63,53,.22)) !important;
}
.octus-mascot-label {
  position: relative; z-index: 1;
  margin-top: 4px;
  color: var(--ink-ll) !important;
}

/* ── Colonne de cartes empilées ── */
.octus-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 12px;
}

/* ── Carte de base (fond clair, ombre douce) ── */
.octus-card {
  background: #FFFFFF;
  border: 1px solid rgba(74,63,53,.06);
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 10px 32px rgba(74,63,53,.06);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.octus-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(74,63,53,.10);
}

/* Carte principale : un peu plus grande, légère teinte */
.octus-card-main {
  background: linear-gradient(155deg, #FFFFFF 0%, #FBF4F1 100%);
  border-color: rgba(218,131,115,.14);
}

/* Tag "Intelligence artificielle" — adapté fond clair */
.octus-col-tag {
  background: rgba(218,131,115,.10) !important;
  border-color: rgba(218,131,115,.22) !important;
  color: #B5614F !important;
}
.octus-col-tag-dot {
  background: #DA8373 !important;
}

/* Titre carte principale — texte foncé sur fond clair */
.octus-card-main .octus-col-title {
  color: var(--ink) !important;
  font-size: clamp(22px, 2.6vw, 30px);
}
.octus-card-main .octus-col-title em {
  color: #6E7F5C !important;
}
.octus-card-main .octus-col-body {
  color: var(--ink-l) !important;
}

/* Carte poème — fond légèrement vert olive très pâle, citation élégante */
.octus-card-poem {
  background: rgba(110,127,92,.06);
  border-left: 3px solid #6E7F5C;
  border-radius: 4px 18px 18px 4px;
  border-top: 1px solid rgba(110,127,92,.08);
  border-right: 1px solid rgba(110,127,92,.08);
  border-bottom: 1px solid rgba(110,127,92,.08);
}
.octus-card-poem p {
  font-family: 'Amaranth', sans-serif;
  font-size: 15px; font-style: italic;
  color: var(--ink-l);
  line-height: 1.7; margin: 0;
}
.octus-card-poem p em {
  font-style: normal; font-weight: 700;
  color: #6E7F5C;
}

/* ── Micro-cartes "Il observe / Il structure / Il transmet" ── */
.octus-roles {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.octus-role-card {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(74,63,53,.08);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .82rem; font-weight: 600;
  color: var(--ink-l);
  box-shadow: 0 4px 14px rgba(74,63,53,.05);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.octus-role-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(74,63,53,.10);
  border-color: rgba(218,131,115,.25);
}
.octus-role-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.octus-role-dot-1 { background: #6E7F5C; }
.octus-role-dot-2 { background: #DA8373; }
.octus-role-dot-3 { background: #4A3F35; }

/* Carte conclusion + status — fond brun profond très doux */
.octus-card-status {
  background: linear-gradient(155deg, #4A3F35 0%, #3C322A 100%);
  border: none;
}
.octus-card-status .octus-col-body-strong {
  color: rgba(250,248,245,.85) !important;
  margin-bottom: 18px;
}
.octus-card-status .octus-status {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(218,131,115,.18) !important;
}
.octus-card-status .octus-status-dot {
  background: #DA8373 !important;
  box-shadow: 0 0 0 8px rgba(218,131,115,.16) !important;
}

/* ── Responsive ── */
@media (max-width: 880px) {
  .octus-stage {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .octus-mascot-zone {
    order: -1;
  }
  .octus-mascot-zone .octus-mascot-img {
    max-width: 280px;
    margin: 0 auto;
  }
  .octus-mascot-halo {
    width: 260px; height: 260px;
  }
  .octus-card { padding: 22px 20px; }
  .octus-roles { justify-content: center; }
}


/* ═══════════════════════════════════════════════
   OCTUS — PATCH FOND VERT CLAIR #ACC2A3
═══════════════════════════════════════════════ */

/* 1. Fond de section */
#octus {
  background: #ACC2A3 !important;
}

/* 5. Titre "La structure de votre" en blanc, "raisonnement." garde son accent */
.octus-header h2.problem-title {
  color: #FFFFFF !important;
}
.octus-header h2.problem-title em {
  color: var(--green) !important;
}

/* 6. Description sous le titre en blanc */
.octus-header .octus-intro {
  color: #FFFFFF !important;
  max-width: 560px;
}

/* 2 & 3. "OCUS" — nom unique, grand, Amaranth, blanc lumineux */
.octus-name-big {
  display: block;
  font-family: 'Amaranth', sans-serif !important;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  text-shadow: 0 4px 24px rgba(255,255,255,.35);
  margin-top: 14px;
}

/* 4. Carte poème / citation — fond blanc, contraste avec le vert */
.octus-card-poem {
  background: #FFFFFF !important;
  border-left: 4px solid #6E7F5C !important;
  border-top: 1px solid rgba(74,63,53,.06) !important;
  border-right: 1px solid rgba(74,63,53,.06) !important;
  border-bottom: 1px solid rgba(74,63,53,.06) !important;
  box-shadow: 0 12px 36px rgba(74,63,53,.12);
}
.octus-card-poem p {
  color: var(--ink) !important;
}
.octus-card-poem p em {
  color: #6E7F5C !important;
}

/* Halo mascotte adapté au fond vert clair */
.octus-mascot-halo {
  background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(110,127,92,.10) 50%, transparent 75%) !important;
}


/* ═══════════════════════════════════════════════
   OCTUS — PATCH FOND #849C75 / NOM OCTUS / AURA / ROSES FONCÉS
═══════════════════════════════════════════════ */

/* 1. Fond de section */
#octus {
  background: #849C75 !important;
}

/* 5. Accents roses du titre — version plus soutenue sur fond vert */
.octus-header h2.problem-title em {
  color: #C4735F !important;
}

/* ── Nouvelle image Octus : fond JPEG sombre détaché avec cadre arrondi + ombre douce ── */
.octus-mascot-zone .octus-mascot-img {
  border-radius: 28px;
  filter: drop-shadow(0 24px 48px rgba(30,28,24,.35)) !important;
  max-width: 420px;
  margin: 0;
}

/* ── 4. Aura / forme ronde derrière Octus, mouvement inverse ── */
.octus-mascot-zone {
  position: relative;
}
.octus-aura {
  position: absolute;
  top: 46%; left: 50%;
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,115,95,.35) 0%, rgba(255,255,255,.18) 45%, transparent 75%);
  filter: blur(28px);
  z-index: 0;
  animation: octusAuraDrift 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes octusAuraDrift {
  0%, 100% { transform: translate(-50%, -50%) translateY(14px) scale(1); opacity: .75; }
  50%      { transform: translate(-50%, -50%) translateY(-14px) scale(1.06); opacity: 1; }
}
/* Octus flotte vers le haut quand l'aura descend, et inversement (déphasage) */
.octus-mascot-zone .octus-mascot-img {
  animation: octusFloatInverse 7s ease-in-out infinite !important;
}
@keyframes octusFloatInverse {
  0%, 100% { transform: translateY(-12px); }
  50%      { transform: translateY(12px); }
}

/* Halo existant désactivé (remplacé par l'aura) */
.octus-mascot-halo { display: none; }

@media (prefers-reduced-motion: reduce) {
  .octus-aura, .octus-mascot-zone .octus-mascot-img {
    animation: none !important;
  }
}

@media (max-width: 880px) {
  .octus-aura { width: 280px; height: 280px; }
  .octus-mascot-zone .octus-mascot-img { max-width: 280px; }
}


/* ═══════════════════════════════════════════════
   ACCENT #C97867 — "chez vous" (sécurité) / "raisonnement" (Octus)
═══════════════════════════════════════════════ */
#security .sec-security-head h2.problem-title em.accent-security {
  color: #C97867 !important;
}
#octus .octus-header h2.problem-title em.accent-octus {
  color: #C97867 !important;
}


/* ═══════════════════════════════════════════════
   TITRES #security ET #octus — entièrement en blanc cassé
═══════════════════════════════════════════════ */
#security .sec-security-head h2.problem-title,
#security .sec-security-head h2.problem-title em,
#security .sec-security-head h2.problem-title em.accent-security,
#octus .octus-header h2.problem-title,
#octus .octus-header h2.problem-title em,
#octus .octus-header h2.problem-title em.accent-octus {
  color: #FAF8F5 !important;
  font-style: italic;
}


/* ═══════════════════════════════════════════════
   PATCH CIBLÉ #6 — Final CTA / Tarifs / Bénéfices
═══════════════════════════════════════════════ */

/* 1. Final CTA — mot "structure" en marron foncé */
#final-cta .fcta-inner h2 em.accent-brown {
  color: #4A3F35 !important;
  font-style: normal;
}

/* 2a. Tarifs — centrer le bloc prix (montant + période) */
.pricing-card .pricing-price-block {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.pricing-card .pricing-period {
  text-align: center;
}

/* 2b. Tarifs — supprimer toute animation autour de Premium */
.pricing-card.featured .pricing-badge {
  animation: none !important;
}

/* 3. Bénéfices — encadré final en blanc pur */
.benefits-closer p {
  color: #FFFFFF !important;
}


/* ═══════════════════════════════════════════════
   PATCH CIBLÉ #7 — Tarifs (majuscules + tailles) / Footer nav horizontale
═══════════════════════════════════════════════ */

/* 1a. Tarifs — noms d'offres en majuscules, plus grands, centrés, Amaranth */
.pricing-card .pricing-name {
  text-transform: uppercase !important;
  font-size: 1.4rem !important;
}

/* 1b. Tarifs — prix agrandis */
.pricing-card .pricing-amount {
  font-size: 3.4rem !important;
}

/* 2. Footer — navigation horizontale, flex-wrap */
footer ul.footer-nav-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
}


/* ═══════════════════════════════════════════════
   PATCH CIBLÉ #8 — Footer nav ruban / slogan / sécurité 3 cartes
═══════════════════════════════════════════════ */

/* 1. Footer — ruban horizontal aligné à gauche */
footer ul.footer-nav-list {
  justify-content: flex-start;
}

/* 2. Footer — slogan plus visible, Amaranth, blanc */
footer p.footer-claim {
  font-family: 'Amaranth', sans-serif !important;
  font-size: 20px !important;
  color: #FFFFFF !important;
  line-height: 1.5 !important;
}

/* 3. Sécurité — les 3 cartes sur une ligne en desktop */
#security .trust-grid {
  max-width: 1000px;
}


/* ═══════════════════════════════════════════════
   PATCH IMAGES — Header titre / Flash / Icônes solutions / Hero / Octus
═══════════════════════════════════════════════ */

/* 1. Header — image PROCESS'US à la place du texte */
.hd-logo-title-img {
  height: 22px;
  width: auto;
  object-fit: contain;
}

/* 1b. Flash intro — image PROCESS'US à la place du texte */
.flash-brand-img {
  height: 18px;
  width: auto;
  object-fit: contain;
  animation: flashLogoIn .7s .1s cubic-bezier(.22,1,.36,1) both;
}

/* 2. Icônes solutions — images remplissent le conteneur .sol-icon */
.sol-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 3. Hero — agrandir l'image "Interface PROCESS'US" (desktop uniquement) */
@media (min-width: 861px) {
  .hero-grid {
    grid-template-columns: 1fr 60% !important;
  }
  .hero-right {
    max-width: none !important;
  }
}

/* 4. Octus — agrandir la mascotte */
.octus-mascot-zone .octus-mascot-img {
  max-width: 520px !important;
}
@media (max-width: 880px) {
  .octus-mascot-zone .octus-mascot-img {
    max-width: 340px !important;
  }
}


/* ═══════════════════════════════════════════════
   PATCH #2 — Logo header / Octus aura+grid / Footer h4
═══════════════════════════════════════════════ */

/* 1. Logo PROCESS'US (texte) — même hauteur que le logo octopus à côté */
.hd-logo-title-img {
  height: 22px !important;
}

/* 2a. Octus — retirer le fond/aura derrière la mascotte */
.octus-aura {
  display: none !important;
}

/* 2b. Octus — agrandir la zone réservée à la mascotte dans le grid (desktop) */
@media (min-width: 881px) {
  .octus-stage {
    grid-template-columns: 1.3fr 0.7fr !important;
  }
}

/* 3. Footer — 3 colonnes parfaitement centrées, équilibrées */
.footer-grid {
  grid-template-columns: 1.4fr 1fr 1fr !important;
  text-align: center;
  justify-items: center;
}
.footer-grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.footer-grid > div h4 {
  text-align: center;
  width: 100%;
}
.footer-grid .footer-brand {
  align-items: center;
}
.footer-grid .footer-brand p.footer-claim {
  text-align: center;
  margin-inline: auto;
}
.footer-grid > div:nth-child(2) ul.footer-nav-list {
  justify-content: center !important;
  text-align: center;
}
.footer-grid > div:nth-child(3) ul {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 4. Footer — liste de navigation verticale et centrée (rendu pro) */
.footer-grid > div:nth-child(2) ul.footer-nav-list {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: center !important;
}

@media (max-width: 680px) {
  .footer-grid,
  .footer-grid > div {
    text-align: center !important;
    align-items: center !important;
  }
}

/* ─── SOL-CARD CTA hint ─────────────────────────────── */
.sol-card {
  cursor: pointer;
  position: relative;
}
.sol-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: 'Amaranth', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--rose-d);
  letter-spacing: .04em;
}
.sol-card-cta svg {
  width: 16px; height: 16px;
  transition: transform .2s;
}
.sol-card:hover .sol-card-cta svg { transform: translateX(4px); }

/* ─── CARD PREVIEW / DETAIL wrappers ────────────────── */
.sol-card-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: opacity .3s ease, transform .3s ease;
}
.sol-card-detail {
  display: none;
  opacity: 0;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ─── SOL-GRID IN-GRID EXPANSION ───────────────────── */
.sol-grid {
  position: relative; /* anchor for absolute expanded card */
}

/* ── Keyframes : chaque card part vers son coin avec rotation et impulsion ── */
@keyframes card-exit-tl {
  0%   { transform: scale(1)    rotate(0deg);   opacity: 1; }
  12%  { transform: scale(1.07) rotate(-4deg);  opacity: 1; }
  100% { transform: translate(-140%, -140%) rotate(-22deg) scale(0.6); opacity: 0; }
}
@keyframes card-exit-tr {
  0%   { transform: scale(1)    rotate(0deg);  opacity: 1; }
  12%  { transform: scale(1.07) rotate(4deg);  opacity: 1; }
  100% { transform: translate(140%, -140%) rotate(22deg) scale(0.6); opacity: 0; }
}
@keyframes card-exit-bl {
  0%   { transform: scale(1)    rotate(0deg);   opacity: 1; }
  12%  { transform: scale(1.07) rotate(4deg);   opacity: 1; }
  100% { transform: translate(-140%, 140%) rotate(18deg) scale(0.6); opacity: 0; }
}
@keyframes card-exit-br {
  0%   { transform: scale(1)    rotate(0deg);   opacity: 1; }
  12%  { transform: scale(1.07) rotate(-4deg);  opacity: 1; }
  100% { transform: translate(140%, 140%) rotate(-18deg) scale(0.6); opacity: 0; }
}

/* Cards qui s'envolent — stagger léger pour que chaque départ soit perceptible */
.sol-grid.has-expanded .sol-card:not(.sol-card--expanded) {
  pointer-events: none !important;
  animation-duration: 2.4s !important;
  animation-timing-function: cubic-bezier(.4,0,.6,1) !important;
  animation-fill-mode: both !important;
}
.sol-grid.has-expanded .sol-card:nth-child(1):not(.sol-card--expanded) {
  animation-name: card-exit-tl !important;
  animation-delay: 0s !important;
}
.sol-grid.has-expanded .sol-card:nth-child(2):not(.sol-card--expanded) {
  animation-name: card-exit-tr !important;
  animation-delay: .08s !important;
}
.sol-grid.has-expanded .sol-card:nth-child(3):not(.sol-card--expanded) {
  animation-name: card-exit-bl !important;
  animation-delay: .16s !important;
}
.sol-grid.has-expanded .sol-card:nth-child(4):not(.sol-card--expanded) {
  animation-name: card-exit-br !important;
  animation-delay: .24s !important;
}

/* The expanded card — 75% of grid area, centered */
.sol-card--expanded {
  position: absolute !important;
  inset: 6% 12% !important;   /* ~75% width, ~88% height */
  z-index: 10;
  border-radius: 20px;
  overflow: hidden;
  transform: none !important;
  transition: none !important;
  box-shadow: 0 24px 64px rgba(30,28,24,.18), 0 0 0 1px rgba(235,165,150,.2);
  animation: sol-expand-in 1.1s cubic-bezier(.22,.9,.36,1) both;
}
@keyframes sol-expand-in {
  from { opacity: 0; transform: scale(.9) !important; }
  to   { opacity: 1; transform: scale(1)  !important; }
}

.sol-card--expanded .sol-card-preview { display: none; }

.sol-card--expanded .sol-card-detail {
  display: flex;
  flex-direction: column;
  opacity: 1;
  height: 100%;
  padding: 22px 28px 24px;
  animation: sol-detail-in .7s .5s ease both;
}
@keyframes sol-detail-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Back button */
.sol-card-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid rgba(235,165,150,.4);
  border-radius: 8px;
  padding: 6px 14px;
  font-family: 'Amaranth', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-l);
  cursor: pointer;
  margin-bottom: 16px;
  align-self: flex-start;
  flex-shrink: 0;
  transition: border-color .18s, color .18s, background .18s;
}
.sol-card-back svg { width: 14px; height: 14px; }
.sol-card-back:hover { border-color: var(--rose-d); color: var(--rose-d); background: var(--rose-xl); }

/* Title block — centered */
.sol-detail-title-block {
  text-align: center;
  margin-bottom: 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sol-detail-icon {
  width: 96px;
  height: 96px;
}
.sol-detail-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sol-detail-title-block h3 {
  font-size: 20px;
  margin: 0;
  color: var(--ink);
}
.sol-detail-desc {
  font-size: .82rem;
  color: var(--ink-l);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}

/* Video — fills remaining space */
.sol-detail-video-wrap {
  flex: 1;
  min-height: 0;       /* allow flex shrink */
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(235,165,150,.22);
  display: flex;
  align-items: stretch;
}
.sol-detail-video-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(135deg, #F0EBE8 0%, #E5DDD9 100%);
  cursor: pointer;
  transition: background .2s;
}
.sol-detail-video-placeholder:hover { background: linear-gradient(135deg, #E5DDD9 0%, #D8CFC9 100%); }
.sol-detail-play-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--rose-d);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 28px rgba(196,115,95,.45);
  transition: transform .2s, box-shadow .2s;
}
.sol-detail-video-placeholder:hover .sol-detail-play-btn {
  transform: scale(1.1);
  box-shadow: 0 14px 36px rgba(196,115,95,.55);
}
.sol-detail-play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
.sol-detail-video-label {
  font-family: 'Amaranth', sans-serif;
  font-size: 12px;
  color: var(--ink-ll);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sol-detail-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  border-radius: 12px;
}

/* ── Mobile : card étendue en position fixed sous la topbar ── */
@media (max-width: 680px) {
  .sol-card--expanded {
    position: fixed !important;
    inset: auto !important;
    top: var(--header-h, 68px) !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 16px;
    z-index: 999;
    overflow: clip !important; /* clip = pas de scroll ici mais sticky fonctionne */
    display: flex !important;
    flex-direction: column !important;
  }

  /* Contenu scrollable */
  .sol-card--expanded .sol-card-detail {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 18px;
  }

  /* Bouton Retour toujours visible en haut */
  .sol-card--expanded .sol-card-back {
    position: sticky !important;
    top: 0 !important;
    z-index: 2;
    background: var(--bg);
    padding: 10px 14px 8px;
    margin-bottom: 8px;
    align-self: stretch !important;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(235,165,150,.15);
  }

  .sol-detail-title-block {
    gap: 6px;
    margin-bottom: 10px;
  }

  .sol-detail-icon {
    width: 52px;
    height: 52px;
  }

  .sol-detail-title-block h3 { font-size: 15px; }
  .sol-detail-desc { font-size: .78rem; }

  .sol-detail-video-wrap {
    flex: none;
    height: 190px;
    margin-top: 12px;
    aspect-ratio: unset;
  }
}
/* ─── END SOL EXPANSION ──────────────────────────────── */

/* ─── PERFORMANCE — GPU acceleration ────────────────── */
.sol-card,
.sol-card-preview,
.sol-card-detail,
.pain-card,
.benefit-card,
.trust-card,
.pricing-card,
.tl-item,
.forwhom-item,
.hero-particle,
.octus-mascot-img,
.flash-bar {
  will-change: transform, opacity;
}
/* Libère will-change une fois les animations terminées */
.sol-card.vis,
.pain-card.vis,
.benefit-card.vis,
.trust-card.vis,
.pricing-card.vis {
  will-change: auto;
}
/* Sauf les cards sol qui restent potentiellement animables */
.sol-card.vis {
  will-change: transform, opacity;
}
/* Contenu statique — pas de will-change inutile */
.sol-detail-video-wrap,
.sol-detail-title-block,
footer,
header {
  will-change: auto;
}
/* ─── FIN PERFORMANCE ────────────────────────────────── */