/* ═══ BASE ═══════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --gold: #D4AF37;
    --gold-light: #F2D280;
    --gold-dim: #A68A3D;
    --ink: #050505;
    --ink2: #0A0A0A;
    --ink3: #121212;
    --cream: #FDFBF7;
    --soft: #1E1C18;
    --glass: rgba(10, 10, 10, 0.7);
    --border: rgba(212, 175, 55, 0.15);
}
html { scroll-behavior: smooth; }
body { 
    background: var(--ink); 
    color: var(--cream); 
    font-family: 'DM Sans', sans-serif; 
    overflow-x: hidden; 
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a, button { cursor: pointer; }

/* ═══ CURSOR (Optionnel, conservé pour l'esthétique actuelle) ════ */
.cursor { position: fixed; pointer-events: none; z-index: 9999; mix-blend-mode: difference; }
#cd { width: 8px; height: 8px; background: var(--cream); border-radius: 50%; transform: translate(-50%,-50%); position: absolute; }
#cr { width: 36px; height: 36px; border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 50%; transform: translate(-50%,-50%); transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1), height 0.3s cubic-bezier(0.23, 1, 0.32, 1); position: absolute; }

/* ═══ PAGE SYSTEM ════════════════════════════════════ */
#page-landing{transition:opacity .6s ease,transform .6s ease}
#page-landing.exit{opacity:0;transform:scale(1.02);pointer-events:none}
.page-quiz{position:fixed;inset:0;z-index:200;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .5s ease;overflow-y:auto}
.page-quiz.enter{opacity:1;pointer-events:all}

/* ═══ WIPE ═══════════════════════════════════════════ */
#wipe{position:fixed;inset:0;z-index:500;background:var(--ink2);transform:scaleY(0);transform-origin:bottom;pointer-events:none}
#wipe.down{animation:wipeDown .45s cubic-bezier(.76,0,.24,1) forwards}
#wipe.up{animation:wipeUp .45s cubic-bezier(.76,0,.24,1) forwards}
@keyframes wipeDown{to{transform:scaleY(1)}}
@keyframes wipeUp{from{transform:scaleY(1);transform-origin:top}to{transform:scaleY(0);transform-origin:top}}

/* ═══ NAV ════════════════════════════════════════════ */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    padding: 1.5rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border);
    transition: all 0.4s ease;
}
.nav-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    letter-spacing: 0.3em;
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 300;
    text-decoration: none;
}
.nav-links { display: flex; gap: 3rem; list-style: none; }
.nav-links a {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(253, 251, 247, 0.5);
    text-decoration: none;
    transition: color 0.3s ease;
}
.nav-links a:hover { color: var(--gold); }
.nav-cta {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.7rem 1.8rem;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-cta:hover { background: var(--gold); color: var(--ink); box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); }
.nav-back { display: none; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(245,240,232,0.4); background: none; border: none; font-family: 'DM Sans', sans-serif; align-items: center; gap: 0.5rem; transition: color 0.3s; }
.nav-back:hover { color: var(--gold); }
.nav-bread { display: none; align-items: center; gap: 0.6rem; font-size: 0.7rem; letter-spacing: 0.08em; color: rgba(245,240,232,0.3); }
.nav-bread .sep { color: rgba(245,240,232,0.15); }
.nav-bread .cur { color: var(--gold); }

/* ═══ HERO ═══════════════════════════════════════════ */
section.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4rem;
    position: relative;
    overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hcirc { position: absolute; border-radius: 50%; border: 1px solid rgba(212, 175, 55, 0.05); }
.hcirc:nth-child(1) { width: 800px; height: 800px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: rot 80s linear infinite; }
.hcirc:nth-child(2) { width: 1100px; height: 1100px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: rot 110s linear infinite reverse; }
.hcirc:nth-child(3) { width: 1400px; height: 1400px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: rot 140s linear infinite; }

/* Blob effect */
.hero-bg::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 70%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    filter: blur(60px);
    animation: float 15s ease-in-out infinite alternate;
}

@keyframes rot { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes float { from { transform: translate(0, 0); } to { transform: translate(-30px, 40px); } }

.hvline { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.1) 30%, rgba(212, 175, 55, 0.1) 70%, transparent); left: 15%; }

.hero-content { position: relative; z-index: 2; max-width: 1200px; }
.hero-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fup 0.8s 0.3s forwards;
}
.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(4rem, 10vw, 9rem);
    line-height: 0.85;
    font-weight: 300;
    margin-bottom: 3rem;
}
.hero-title .line { overflow: hidden; display: block; margin-bottom: -1rem; }
.word { display: inline-block; opacity: 0; transform: translateY(110%); animation: sup 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.w1 { animation-delay: 0.3s; }
.w2 { animation-delay: 0.45s; }
.w3 { animation-delay: 0.6s; font-style: italic; color: var(--gold); text-shadow: 0 0 40px rgba(212, 175, 55, 0.15); }

.hero-sub {
    max-width: 520px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(253, 251, 247, 0.5);
    font-weight: 300;
    opacity: 0;
    transform: translateY(20px);
    animation: fup 0.8s 0.9s forwards;
    margin-bottom: 4rem;
}
.hero-actions { display: flex; gap: 2rem; align-items: center; opacity: 0; transform: translateY(20px); animation: fup 0.8s 1.1s forwards; }

.btn-primary {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1.2rem 3rem;
    background: var(--gold);
    color: var(--ink);
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15);
}
.btn-primary:hover {
    background: var(--gold-light);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.25);
}
.btn-ghost {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1.2rem 2rem;
    background: transparent;
    color: rgba(253, 251, 247, 0.6);
    border: none;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}
.btn-ghost:hover { color: var(--gold); transform: translateX(5px); }

.hero-scroll {
    position: absolute;
    bottom: 4rem;
    left: 4rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(253, 251, 247, 0.3);
    opacity: 0;
    animation: fup 0.8s 1.4s forwards;
    z-index: 2;
    cursor: pointer;
    transition: color 0.3s ease;
}
.hero-scroll:hover { color: var(--gold); }
.scroll-line { width: 60px; height: 1px; background: rgba(253, 251, 247, 0.15); }

.hero-float {
    position: absolute;
    right: 4rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 2;
    opacity: 0;
    animation: fin 1.5s 1.6s forwards;
}
.float-tag { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(253, 251, 247, 0.4); text-align: right; margin-bottom: 0.5rem; }
.float-item {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: rgba(212, 175, 55, 0.8);
    text-align: right;
    font-style: italic;
    transition: color 0.3s ease;
}
.float-item:hover { color: var(--gold); }
@keyframes sup{to{opacity:1;transform:translateY(0)}}
@keyframes fup{to{opacity:1;transform:translateY(0)}}
@keyframes fin{to{opacity:1}}

/* ═══ LANDING SECTIONS ═══════════════════════════════ */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}
.stat {
    padding: 5rem 3rem;
    text-align: center;
    background: var(--ink2);
    transition: background 0.4s ease;
}
.stat:hover { background: var(--ink3); }
.stat-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4.5rem;
    font-weight: 300;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 1rem;
}
.stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(253, 251, 247, 0.4);
}

section.ikigai {
    padding: 12rem 4rem 6rem 4rem;
    position: relative;
    background: var(--ink);
}
.section-label {
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 2rem;
}
.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1;
    margin-bottom: 2.5rem;
}
.section-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(253, 251, 247, 0.5);
    max-width: 600px;
    font-weight: 300;
}
.iki-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 6rem;
}
.iki-card {
    padding: 4rem 3rem;
    background: var(--ink2);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.iki-card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-8px);
    background: var(--ink3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.iki-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 70%);
}
.iki-card:hover::before { opacity: 1; }
.iki-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 5rem;
    font-weight: 300;
    color: rgba(212, 175, 55, 0.1);
    line-height: 1;
    margin-bottom: 1.5rem;
}
.iki-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--cream);
}
.iki-card-sub {
    font-size: 1rem;
    color: rgba(253, 251, 247, 0.4);
    line-height: 1.8;
    font-weight: 300;
}
.iki-tag {
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.5rem 1.2rem;
    border: 1px solid;
    margin-top: 2rem;
    border-radius: 2px;
}
.tag-pink { border-color: rgba(212, 83, 126, 0.4); color: rgba(212, 83, 126, 0.8); }
.tag-teal { border-color: rgba(29, 158, 117, 0.4); color: rgba(29, 158, 117, 0.8); }
.tag-amber { border-color: rgba(212, 175, 55, 0.4); color: rgba(212, 175, 55, 0.8); }
.tag-purple { border-color: rgba(127, 119, 221, 0.4); color: rgba(127, 119, 221, 0.8); }

section.how { padding: 12rem 4rem; background: var(--ink2); }
.how-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 10rem; align-items: start; }
.how-steps { display: flex; flex-direction: column; }
.how-step {
    display: flex;
    gap: 3rem;
    padding: 3rem 0;
    border-bottom: 1px solid var(--border);
    transition: all 0.4s ease;
}
.how-step:hover { border-color: rgba(212, 175, 55, 0.3); padding-left: 1rem; }
.how-step-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: var(--gold);
    opacity: 0.6;
    flex-shrink: 0;
    width: 2.5rem;
    padding-top: 0.4rem;
}
.how-step-content h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0.8rem;
}
.how-step-content p {
    font-size: 1rem;
    color: rgba(253, 251, 247, 0.4);
    line-height: 1.7;
    font-weight: 300;
}
.how-visual { position: sticky; top: 10rem; }
.how-diagram { width: 100%; aspect-ratio: 1; filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.1)); }
.diag-svg { width: 100%; height: 100%; }

section.quote-sec {
    padding: 2rem 4rem 12rem 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--ink);
}
.qbg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
}
.qmark {
    font-family: 'Cormorant Garamond', serif;
    font-size: 10rem;
    line-height: 0.5;
    color: rgba(212, 175, 55, 0.1);
    display: block;
    margin-bottom: 3rem;
}
.qtxt {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 300;
    line-height: 1.4;
    max-width: 900px;
    margin: 0 auto 3rem;
    font-style: italic;
    color: rgba(253, 251, 247, 0.9);
    position: relative;
    z-index: 1;
}
.qattr {
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold-dim);
    position: relative;
    z-index: 1;
}

section.testimonials { padding: 12rem 4rem; background: var(--ink2); }
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 6rem; }
.test-card {
    padding: 3.5rem 2.5rem;
    background: var(--ink3);
    border: 1px solid var(--border);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.test-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.test-stars { display: flex; gap: 5px; margin-bottom: 2rem; }
.star {
    width: 12px;
    height: 12px;
    background: var(--gold);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.test-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    line-height: 1.7;
    color: rgba(253, 251, 247, 0.7);
    font-style: italic;
    margin-bottom: 2.5rem;
    font-weight: 300;
}
.test-author { font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream); font-weight: 500; }
.test-role { font-size: 0.75rem; color: var(--gold-dim); margin-top: 0.4rem; }
section.cta-sec {
    padding: 15rem 4rem;
    background: var(--ink);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border);
}
.cta-lines { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; }
.cta-line { position: absolute; height: 1px; background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.2), transparent); }
.cta-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 300;
    line-height: 1;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}
.cta-title em { font-style: italic; color: var(--gold); }
.cta-sub {
    font-size: 1.1rem;
    color: rgba(253, 251, 247, 0.5);
    margin-bottom: 4rem;
    font-weight: 300;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
    position: relative;
    z-index: 1;
}
.cta-group { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; position: relative; z-index: 1; }
.cta-note { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(253, 251, 247, 0.25); position: relative; z-index: 1; }

.btn-xl {
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1.4rem 4rem;
    background: var(--gold);
    color: var(--ink);
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.2);
}
.btn-xl:hover { background: var(--gold-light); transform: translateY(-5px); box-shadow: 0 20px 50px rgba(212, 175, 55, 0.3); }

footer {
    padding: 5rem 4rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ink2);
}
.footer-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    letter-spacing: 0.3em;
    color: var(--gold-dim);
    text-transform: uppercase;
    font-weight: 300;
}
.footer-links { display: flex; gap: 3rem; }
.footer-links a {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(253, 251, 247, 0.3);
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: 0.8rem; color: rgba(253, 251, 247, 0.8); letter-spacing: 0.1em; }
.footer-copy a { transition: color 0.3s ease; }
.footer-copy a:hover { color: var(--gold) !important; }

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══ QUIZ LAYOUT ════════════════════════════════════ */
/* Accent par cercle */
.cq-01{--acc:#C9A96E;--acc-r:201;--acc-g:169;--acc-b:110}
.cq-02{--acc:#D4537E;--acc-r:212;--acc-g:83;--acc-b:126}
.cq-03{--acc:#1D9E75;--acc-r:29;--acc-g:158;--acc-b:117}
.cq-04{--acc:#7F77DD;--acc-r:127;--acc-g:119;--acc-b:221}

/* ═══ SYNTHÈSE FINALE ════════════════════════════════ */
#page-synthesis{position:fixed;inset:0;z-index:200;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .5s ease;overflow-y:auto}
#page-synthesis.enter{opacity:1;pointer-events:all}
.syn-wrap{min-height:100vh;padding:8rem 5rem 6rem;max-width:1100px;margin:0 auto}
.syn-eyebrow{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;opacity:0;animation:fup .7s .2s forwards}
.syn-hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(3rem,6vw,5.5rem);font-weight:300;line-height:1;margin-bottom:1.5rem;opacity:0;animation:fup .8s .35s forwards}
.syn-hero-title em{font-style:italic;color:var(--gold)}
.syn-hero-sub{font-size:.95rem;color:rgba(245,240,232,.45);font-weight:300;line-height:1.7;max-width:520px;margin-bottom:4rem;opacity:0;animation:fup .8s .5s forwards}

/* Bande 4 cercles */
.syn-circles-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(245,240,232,.06);border:1px solid rgba(245,240,232,.06);margin-bottom:5rem;opacity:0;animation:fup .7s .65s forwards}
.syn-circle-cell{padding:1.25rem 1.5rem;background:var(--ink2)}
.syn-circle-num{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.2);margin-bottom:.35rem}
.syn-circle-name{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:400;color:rgba(245,240,232,.7);line-height:1.25}
.syn-circle-tag{display:inline-block;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .6rem;border:1px solid;margin-top:.5rem}
.ct-gold{border-color:rgba(201,169,110,.4);color:rgba(201,169,110,.6)}
.ct-pink{border-color:rgba(212,83,126,.4);color:rgba(212,83,126,.6)}
.ct-teal{border-color:rgba(29,158,117,.4);color:rgba(29,158,117,.6)}
.ct-purple{border-color:rgba(127,119,221,.4);color:rgba(127,119,221,.6)}

/* Section titre */
.syn-section-lbl{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,240,232,.25);margin-bottom:.75rem}
.syn-section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:300;line-height:1.2;margin-bottom:3rem;color:var(--cream)}

/* Cards projets */
.syn-projects{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:5rem}
.syn-project{background:var(--ink2);border:1px solid rgba(245,240,232,.07);padding:2.5rem;position:relative;overflow:hidden;transition:border-color .4s,transform .3s;cursor:default}
.syn-project::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;background:radial-gradient(circle at 0% 0%,rgba(201,169,110,.04),transparent 65%)}
.syn-project:hover{border-color:rgba(201,169,110,.2);transform:translateY(-3px)}
.syn-project:hover::before{opacity:1}
.syn-proj-idx{font-family:'Cormorant Garamond',serif;font-size:3.5rem;font-weight:300;color:rgba(201,169,110,.08);line-height:1;position:absolute;top:1.5rem;right:2rem}
.syn-proj-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}
.syn-proj-tag{font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .6rem;border:1px solid}
.syn-proj-title{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:400;color:var(--cream);line-height:1.2;margin-bottom:.75rem}
.syn-proj-desc{font-size:.85rem;color:rgba(245,240,232,.5);line-height:1.65;font-weight:300;margin-bottom:1.5rem}
.syn-proj-why{font-size:.78rem;color:rgba(245,240,232,.3);line-height:1.55;padding-top:1.25rem;border-top:1px solid rgba(245,240,232,.06);font-style:italic}
.syn-proj-model{display:inline-flex;align-items:center;gap:.5rem;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(201,169,110,.5);margin-top:1rem}
.syn-proj-model-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.4}

/* Insight global */
.syn-insight{border:1px solid rgba(201,169,110,.15);padding:2.5rem 3rem;margin-bottom:5rem;position:relative}
.syn-insight::before{content:'"';font-family:'Cormorant Garamond',serif;font-size:6rem;line-height:.5;color:rgba(201,169,110,.1);position:absolute;top:2rem;left:2rem}
.syn-insight-text{font-family:'Cormorant Garamond',serif;font-size:clamp(1.2rem,2vw,1.6rem);font-weight:300;line-height:1.5;color:rgba(245,240,232,.8);font-style:italic;padding-left:2rem}

/* CTA final */
.syn-cta{text-align:center;padding:4rem 0 2rem;border-top:1px solid rgba(245,240,232,.06)}
.syn-cta-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.5rem);font-weight:300;margin-bottom:1rem;color:var(--cream)}
.syn-cta-sub{font-size:.88rem;color:rgba(245,240,232,.35);margin-bottom:2.5rem;font-weight:300;line-height:1.7}
.syn-cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-syn-restart{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;background:transparent;border:1px solid rgba(245,240,232,.2);color:rgba(245,240,232,.5);font-family:'DM Sans',sans-serif;padding:.85rem 2rem;transition:border-color .2s,color .2s}
.btn-syn-restart:hover{border-color:rgba(245,240,232,.4);color:rgba(245,240,232,.8)}
.btn-syn-save{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;background:var(--gold);border:none;color:var(--ink);font-family:'DM Sans',sans-serif;font-weight:500;padding:.85rem 2rem;transition:opacity .2s,transform .2s}
.btn-syn-save:hover{opacity:.85;transform:translateY(-1px)}

/* Loading synthèse */
.syn-loading{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;padding:4rem}
.syn-loading-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.5rem);font-weight:300;color:rgba(245,240,232,.7);text-align:center;line-height:1.2}
.syn-loading-sub{font-size:.82rem;color:rgba(245,240,232,.3);text-align:center;font-weight:300;max-width:400px;line-height:1.7}
.syn-loading-steps{display:flex;flex-direction:column;gap:.6rem;width:320px}
.syn-loading-step{display:flex;align-items:center;gap:.75rem;font-size:.75rem;color:rgba(245,240,232,.25);letter-spacing:.05em;transition:color .5s}
.syn-loading-step.active{color:rgba(245,240,232,.6)}
.syn-loading-step.done{color:rgba(201,169,110,.5)}
.syn-step-dot{width:6px;height:6px;border-radius:50%;background:rgba(245,240,232,.1);flex-shrink:0;transition:background .5s}
.syn-loading-step.active .syn-step-dot{background:var(--gold);box-shadow:0 0 8px rgba(201,169,110,.4);animation:pulse .8s ease-in-out infinite alternate}
.syn-loading-step.done .syn-step-dot{background:rgba(201,169,110,.4)}
@keyframes pulse{from{opacity:.5}to{opacity:1}}

/* Anim entrée cards projets */
.syn-project{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease,border-color .4s,box-shadow .4s}
.syn-project.visible{opacity:1;transform:translateY(0)}

@media(max-width:900px){
  .syn-wrap{padding:5rem 1.5rem 4rem}
  .syn-projects{grid-template-columns:1fr}
  .syn-circles-band{grid-template-columns:1fr 1fr}
}
.quiz-wrap{min-height:100vh;display:grid;grid-template-columns:280px 1fr;background:var(--ink)}
.quiz-sidebar{padding:7rem 2.5rem 3rem;border-right:1px solid rgba(245,240,232,.05);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;background:var(--ink2);overflow:hidden}
.sb-brand{font-family:'Cormorant Garamond',serif;font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc,var(--gold));font-weight:300;margin-bottom:.5rem}
.sb-circles{display:flex;gap:.4rem;margin-bottom:2.5rem;flex-wrap:wrap}
.sb-pill{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .65rem;border:1px solid rgba(245,240,232,.1);color:rgba(245,240,232,.2);font-family:'DM Sans',sans-serif;background:transparent;transition:all .3s}
.sb-pill.done{border-color:rgba(245,240,232,.25);color:rgba(245,240,232,.4)}
.sb-pill.active{border-color:var(--acc,var(--gold));color:var(--acc,var(--gold))}
.sb-chap-lbl{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.25);margin-bottom:.6rem}
.sb-chap-title{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:400;color:rgba(245,240,232,.9);line-height:1.3}
.sb-chap-sub{font-size:.75rem;color:rgba(245,240,232,.3);margin-top:.4rem;line-height:1.5;font-weight:300;margin-bottom:2rem}
.qdots{display:flex;flex-direction:column;gap:.3rem}
.qdot-row{display:flex;align-items:center;gap:.7rem;padding:.28rem 0}
.qdot{width:5px;height:5px;border-radius:50%;border:1px solid rgba(245,240,232,.12);flex-shrink:0;transition:all .3s}
.qdot.done{background:rgba(245,240,232,.2);border-color:rgba(245,240,232,.2)}
.qdot.active{background:var(--acc,var(--gold));border-color:var(--acc,var(--gold));box-shadow:0 0 7px rgba(var(--acc-r,201),var(--acc-g,169),var(--acc-b,110),.35)}
.qdot-row span{font-size:.67rem;color:rgba(245,240,232,.22);letter-spacing:.04em;transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.qdot-row.is-active span{color:rgba(245,240,232,.65)}
.qdot-row.is-done span{color:rgba(245,240,232,.32)}
.sb-bot{margin-top:auto;padding-top:1.5rem;border-top:1px solid rgba(245,240,232,.04)}
.sb-prog-lbl{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,240,232,.18);margin-bottom:.6rem}
.sb-prog-bar{height:2px;background:rgba(245,240,232,.05);border-radius:1px}
.sb-prog-fill{height:100%;background:var(--acc,var(--gold));border-radius:1px;transition:width .5s cubic-bezier(.16,1,.3,1)}

/* Main */
.quiz-main{padding:7rem 5rem 5rem;display:flex;flex-direction:column;max-width:760px}
.q-num{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(var(--acc-r,201),var(--acc-g,169),var(--acc-b,110),.45);margin-bottom:1.2rem}
.q-text{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,3vw,2.5rem);font-weight:300;line-height:1.25;margin-bottom:.65rem;color:var(--cream)}
.q-sub{font-size:.88rem;color:rgba(245,240,232,.38);line-height:1.65;margin-bottom:2.25rem;font-weight:300;max-width:540px}

/* Options liste */
.q-opts{display:flex;flex-direction:column;gap:.65rem;margin-bottom:2.25rem}
.qopt{background:transparent;border:1px solid rgba(245,240,232,.09);border-radius:1px;padding:.95rem 1.4rem;font-size:.88rem;color:rgba(245,240,232,.6);font-family:'DM Sans',sans-serif;font-weight:300;text-align:left;line-height:1.5;transition:border-color .2s,color .2s,background .2s;position:relative;overflow:hidden}
.qopt::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc,var(--gold));transition:width .22s cubic-bezier(.16,1,.3,1)}
.qopt:hover{border-color:rgba(var(--acc-r,201),var(--acc-g,169),var(--acc-b,110),.3);color:rgba(245,240,232,.88)}
.qopt.sel{border-color:rgba(var(--acc-r,201),var(--acc-g,169),var(--acc-b,110),.4);color:var(--cream);background:rgba(var(--acc-r,201),var(--acc-g,169),var(--acc-b,110),.07)}
.qopt.sel::before{width:3px}
.ql{display:inline-block;width:1.4rem;font-size:.6rem;letter-spacing:.1em;color:rgba(245,240,232,.18);font-weight:500;transition:color .2s}
.qopt.sel .ql{color:var(--acc,var(--gold))}

/* Grid cartes */
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:2.25rem}
.qcard{background:transparent;border:1px solid rgba(245,240,232,.09);border-radius:1px;padding:1.1rem;display:flex;gap:.8rem;align-items:flex-start;text-align:left;font-family:'DM Sans',sans-serif;transition:border-color .2s,background .2s;position:relative;overflow:hidden}
.qcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc,var(--gold));transition:width .22s}
.qcard:hover{border-color:rgba(var(--acc-r,201),var(--acc-g,169),var(--acc-b,110),.28)}
.qcard.sel{border-color:rgba(var(--acc-r,201),var(--acc-g,169),var(--acc-b,110),.4);background:rgba(var(--acc-r,201),var(--acc-g,169),var(--acc-b,110),.07)}
.qcard.sel::before{width:3px}
.qc-icon{width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(245,240,232,.04)}
.qc-title{font-size:.82rem;font-weight:500;color:rgba(245,240,232,.75);line-height:1.3}
.qc-sub{font-size:.68rem;color:rgba(245,240,232,.27);margin-top:.2rem;line-height:1.35}
.qcard.sel .qc-title{color:var(--cream)}

/* Textarea */
.qtx{width:100%;background:transparent;border:1px solid rgba(245,240,232,.09);border-radius:1px;padding:1.1rem 1.4rem;font-size:.88rem;color:var(--cream);font-family:'DM Sans',sans-serif;font-weight:300;line-height:1.65;resize:vertical;min-height:110px;outline:none;transition:border-color .2s;margin-bottom:2.25rem}
.qtx:focus{border-color:rgba(var(--acc-r,201),var(--acc-g,169),var(--acc-b,110),.4)}
.qtx::placeholder{color:rgba(245,240,232,.18)}

/* Slider */
.q-slider-wrap{margin-bottom:.75rem}
input[type=range].qslider{width:100%;accent-color:var(--acc,var(--gold))}
.qs-labels{display:flex;justify-content:space-between;font-size:.68rem;color:rgba(245,240,232,.22);margin-top:.4rem}
.qs-val{text-align:center;font-size:.78rem;color:rgba(245,240,232,.45);margin-top:.5rem;margin-bottom:1rem;font-style:italic;min-height:1.1rem}

/* Nav bas */
.q-nav{display:flex;justify-content:space-between;align-items:center;padding-top:1.25rem;border-top:1px solid rgba(245,240,232,.05);margin-top:.5rem}
.q-prev{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:none;border:none;color:rgba(245,240,232,.28);font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:.45rem;transition:color .2s;padding:.4rem 0}
.q-prev:hover{color:rgba(245,240,232,.65)}
.q-prev:disabled{opacity:.15;pointer-events:none}
.q-next{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:var(--acc,var(--gold));border:none;color:var(--ink);font-family:'DM Sans',sans-serif;font-weight:500;padding:.75rem 1.8rem;display:flex;align-items:center;gap:.45rem;transition:opacity .2s,transform .2s}
.q-next:hover{opacity:.85;transform:translateY(-1px)}

/* Question animation */
.q-block{animation:qin .38s cubic-bezier(.16,1,.3,1) both}
@keyframes qin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.q-summary{animation:qin .45s .06s both}

/* Résumé & résultat */
.sum-grid{display:flex;flex-direction:column;gap:.65rem;margin-bottom:2.25rem}
.sum-item{padding:1.1rem 1.4rem;border:1px solid rgba(245,240,232,.07)}
.sum-q{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,240,232,.22);margin-bottom:.4rem}
.sum-a{font-size:.86rem;color:rgba(245,240,232,.72);line-height:1.5;font-weight:300}
.btn-go{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;background:var(--acc,var(--gold));border:none;color:var(--ink);font-family:'DM Sans',sans-serif;font-weight:500;padding:1rem 2.5rem;transition:opacity .2s,transform .2s;width:100%}
.btn-go:hover{opacity:.85;transform:translateY(-2px)}
.result-box{border:1px solid rgba(var(--acc-r,201),var(--acc-g,169),var(--acc-b,110),.2);padding:2rem 2.5rem;margin-bottom:2.5rem;line-height:1.8;font-size:.88rem;color:rgba(245,240,232,.78);font-weight:300}
.result-box p{margin-bottom:.75rem}
.result-box strong{color:var(--cream);font-weight:500}
.result-box h3{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:400;color:var(--cream);margin:1.4rem 0 .35rem}

/* Loading skeleton */
.skel-line{height:2px;background:rgba(245,240,232,.06);border-radius:1px;overflow:hidden;margin-bottom:.5rem}
.skel-fill{height:100%;background:var(--acc,var(--gold));border-radius:1px;animation:skel 1.4s ease-in-out infinite alternate}
@keyframes skel{from{transform:translateX(-100%)}to{transform:translateX(200%)}}

/* ═══ RESPONSIVE ════════════════════════════════════ */
@media(max-width:900px){
  nav{padding:1.5rem 2rem}
  .nav-links{display:none}
  section.hero,section.ikigai,section.how,section.quote-sec,section.testimonials,section.cta-sec{padding-left:2rem;padding-right:2rem}
  .iki-grid,.how-inner,.test-grid{grid-template-columns:1fr}
  .how-inner{gap:3rem}.how-visual,.hero-float{display:none}
  .stats-row{grid-template-columns:1fr}
  footer{flex-direction:column;gap:1rem;text-align:center;padding:2rem}
  .footer-links{justify-content:center}
  .quiz-wrap{grid-template-columns:1fr}
  .quiz-sidebar{display:none}
  .quiz-main{padding:5rem 1.5rem 3rem}
  .q-grid{grid-template-columns:1fr}
}