/* ==================================================
   RESET & VARIABLES
================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --cream:#f3efe7; --cream-dark:#e7e0d4; --black:#171614; --black-soft:#292723;
    --terracotta:#c75c3b; --terracotta-dark:#a9472c; --text:#201e1b; --muted:#777269;
    --line:rgba(32,30,27,.16); --serif:"Playfair Display",Georgia,serif;
    --sans:"DM Sans",Arial,sans-serif; --max-width:1240px;
}
html { scroll-behavior:smooth; }
body { background:var(--cream); color:var(--text); font-family:var(--sans); overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

/* ==================================================
   PARTICULES
================================================== */
#particles-js { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; background:transparent; }
.header, main, .footer { position:relative; z-index:2; }

/* ==================================================
   CTA FLOTTANT
================================================== */
.floating-offers {
    position:fixed; top:0; left:0; z-index:150;
    width:min(205px,calc(100vw - 20px)); min-height:52px;
    display:flex; align-items:center; gap:10px; padding:10px 13px;
    border-radius:100px; background:var(--black); color:white;
    border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 35px rgba(23,22,20,.18);
    will-change:transform; cursor:pointer; user-select:none;
    transition:background .3s ease,box-shadow .3s ease;
}
/* Disparition du CTA après clic */
.floating-offers-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.7) !important;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.floating-offers:hover { background:var(--terracotta); box-shadow:0 18px 45px rgba(23,22,20,.24); }
.floating-offers-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--terracotta); }
.floating-offers-text { flex:1; font-size:.66rem; font-weight:700; letter-spacing:.06em; }
.floating-offers-arrow { font-size:1.05rem; }

/* ==================================================
   HEADER
================================================== */
.header { position:fixed; top:0; left:0; right:0; height:85px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; z-index:100; background:rgba(243,239,231,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(32,30,27,.08); }
.logo { display:inline-flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.55rem; font-weight:700; letter-spacing:-.05em; transition:transform .3s ease; }
.logo:hover { transform:translateY(-2px); }
.logo img { width:32px; height:32px; object-fit:contain; display:block; }
.logo-text { display:inline-flex; align-items:baseline; }
.logo-text > span { color:var(--terracotta); font-family:var(--sans); font-weight:700; }
.nav { display:flex; gap:32px; font-size:.78rem; color:var(--muted); }
.nav a { position:relative; transition:color .25s ease; }
.nav a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--terracotta); transition:width .3s ease; }
.nav a:hover { color:var(--text); }
.nav a:hover::after { width:100%; }
.header-cta { display:inline-flex; align-items:center; gap:12px; background:var(--black); color:white; padding:12px 18px; border-radius:100px; font-size:.72rem; transition:transform .25s ease,background .25s ease; }
.header-cta:hover { transform:translateY(-2px); background:var(--terracotta); }
.menu-toggle { display:none; width:45px; height:45px; border:1px solid var(--line); border-radius:50%; background:rgba(243,239,231,.75); cursor:pointer; }
.menu-toggle span { display:block; width:18px; height:1px; background:var(--text); margin:4px auto; transition:transform .3s ease,opacity .3s ease; }

/* ==================================================
   COMMON
================================================== */
.section { max-width:var(--max-width); margin:auto; padding:150px 5vw; }
.eyebrow { color:var(--terracotta); font-size:.67rem; font-weight:700; letter-spacing:.17em; margin-bottom:24px; }
h1,h2,h3 { font-weight:500; }
em { font-family:var(--serif); font-style:italic; font-weight:500; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:15px 22px; border-radius:100px; font-size:.78rem; font-weight:600; transition:transform .3s ease,background .3s ease,color .3s ease; }
.button:hover { transform:translateY(-3px); }
.button-dark { background:var(--black); color:white; }
.button-dark:hover { background:var(--terracotta); }
.button-outline { border:1px solid var(--black); color:var(--black); }
.button-outline:hover { background:var(--black); color:white; }

/* ==================================================
   HERO
================================================== */
.hero { max-width:var(--max-width); min-height:100vh; margin:auto; padding:160px 5vw 100px; display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; }
.hero-main h1 { font-family:var(--sans); font-size:clamp(4rem,7.5vw,8rem); line-height:.88; letter-spacing:-.075em; }
.hero-main h1 em { color:var(--terracotta); }
.hero-description { max-width:510px; color:var(--muted); font-size:.98rem; line-height:1.75; margin:38px 0; }
.hero-actions { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.text-link { font-size:.78rem; display:inline-flex; gap:10px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:5px; }
.hero-art { position:relative; min-height:560px; display:flex; align-items:center; justify-content:center; transition:transform .2s ease-out; }
.art-circle { width:min(470px,80vw); aspect-ratio:1; border-radius:50%; background:var(--terracotta); display:flex; align-items:center; justify-content:center; transform:rotate(-8deg); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.hero-art:hover .art-circle { transform:rotate(0deg) scale(1.03); }
.art-inner { width:72%; aspect-ratio:1; border-radius:50%; background:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px solid rgba(32,30,27,.15); }
.art-inner span { font-size:.65rem; letter-spacing:.2em; color:var(--muted); }
.art-inner strong { font-family:var(--serif); font-size:clamp(2.2rem,4vw,4rem); line-height:.9; margin:12px 0; font-weight:600; letter-spacing:-.06em; }
.art-label { position:absolute; bottom:45px; left:10px; font-size:.63rem; letter-spacing:.14em; color:var(--muted); transform:rotate(-90deg); transform-origin:left center; }
.art-number { position:absolute; top:35px; right:20px; font-family:var(--serif); font-size:1.5rem; color:var(--terracotta); }

/* ==================================================
   MARQUEE
================================================== */
.marquee { position:relative; z-index:3; overflow:hidden; background:var(--black); color:var(--cream); border-top:1px solid var(--black); border-bottom:1px solid var(--black); }
.marquee-track { display:flex; align-items:center; width:max-content; padding:18px 0; animation:marquee 28s linear infinite; }
.marquee span { font-size:.75rem; font-weight:600; letter-spacing:.14em; margin:0 25px; }
.marquee i { color:var(--terracotta); font-style:normal; font-size:.8rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ==================================================
   INTRO / SERVICES
================================================== */
.intro { display:grid; grid-template-columns:.25fr 1fr; gap:80px; align-items:start; }
.intro-number { font-family:var(--serif); color:var(--terracotta); font-size:1.5rem; }
.intro-content { max-width:850px; }
.intro-content h2 { font-size:clamp(3rem,5.5vw,6rem); line-height:.95; letter-spacing:-.07em; max-width:900px; }
.intro-content h2 em { color:var(--terracotta); }
.intro-content > p:last-child { max-width:570px; color:var(--muted); line-height:1.75; margin-top:40px; }
.section-top { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:80px; }
.section-top h2 { font-size:clamp(3rem,5vw,5.5rem); line-height:.9; letter-spacing:-.07em; max-width:700px; }
.section-top h2 em { color:var(--terracotta); }
.section-note { max-width:300px; color:var(--muted); font-size:.78rem; line-height:1.7; }
.services-list { border-top:1px solid var(--line); }
.service { display:grid; grid-template-columns:70px 1fr 1fr 40px; gap:30px; align-items:center; padding:35px 0; border-bottom:1px solid var(--line); transition:background .3s ease,padding .3s ease; }
.service:hover { background:rgba(199,92,59,.06); padding-left:20px; padding-right:20px; }
.service-index { color:var(--terracotta); font-size:.7rem; font-weight:700; }
.service-title h3 { font-family:var(--serif); font-size:clamp(1.8rem,3vw,3rem); letter-spacing:-.04em; }
.service-description p { color:var(--muted); line-height:1.65; font-size:.82rem; max-width:450px; }
.service-arrow { font-size:1.3rem; transition:transform .3s ease; }
.service:hover .service-arrow { transform:translate(4px,-4px); color:var(--terracotta); }

/* ==================================================
   OFFRES / APERÇUS
================================================== */
.offers-section { max-width:1350px; }
.demo-showcase { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start; }
.demo-card { position:relative; background:#e9e3d9; border:1px solid var(--line); padding:18px; transition:transform .4s ease,box-shadow .4s ease; }
.demo-card:hover { transform:translateY(-7px); box-shadow:0 25px 50px rgba(32,30,27,.12); }
.demo-card-featured { background:var(--black); color:var(--cream); border-color:var(--black); transform:translateY(-18px); }
.demo-card-featured:hover { transform:translateY(-25px); }
.demo-featured-label { position:absolute; top:0; left:0; right:0; z-index:5; padding:9px; text-align:center; background:var(--terracotta); color:white; font-size:.58rem; letter-spacing:.14em; font-weight:700; }
.offer-preview { position:relative; display:block; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:18px; background:var(--cream-dark); border:1px solid rgba(32,30,27,.12); isolation:isolate; cursor:pointer; }
.offer-preview img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease; }
.offer-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02) 30%,rgba(0,0,0,.58) 100%); opacity:0; transition:opacity .4s ease; pointer-events:none; }
.preview-overlay { position:absolute; left:18px; right:18px; bottom:18px; display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-radius:100px; background:rgba(243,239,231,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--black); font-size:.68rem; font-weight:700; letter-spacing:.05em; opacity:0; transform:translateY(12px); transition:opacity .4s ease,transform .4s ease; }
.preview-overlay strong { color:var(--terracotta); font-size:1rem; }
.offer-preview:hover img { transform:scale(1.06); }
.offer-preview:hover::after { opacity:1; }
.offer-preview:hover .preview-overlay { opacity:1; transform:translateY(0); }
.demo-card-content { padding:28px 12px 12px; }
.demo-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.demo-card-content h3 { font-family:var(--serif); font-size:2.5rem; letter-spacing:-.05em; }
.demo-price { display:flex; align-items:baseline; gap:6px; margin:28px 0 10px; font-size:clamp(2rem,3.5vw,3.3rem); font-weight:600; letter-spacing:-.07em; }
.demo-price span { font-size:.62rem; color:var(--muted); letter-spacing:0; }
.demo-card-featured .demo-price span { color:#999; }
.demo-card-content > p { min-height:45px; max-width:280px; color:var(--muted); font-size:.78rem; line-height:1.5; }
.demo-card-featured .demo-card-content > p { color:#aaa; }
.demo-card-content ul { list-style:none; border-top:1px solid var(--line); margin-top:22px; padding-top:15px; }
.demo-card-content li { position:relative; padding:5px 0 5px 17px; font-size:.72rem; color:#5e5951; }
.demo-card-content li::before { content:"—"; position:absolute; left:0; color:var(--terracotta); }
.demo-card-featured .demo-card-content li { color:#c1bdb5; }
.demo-card .offer-button { margin-top:25px; }
.offer-number { display:block; color:var(--terracotta); font-size:.7rem; margin-bottom:10px; }
.offer-tag { font-size:.55rem; letter-spacing:.12em; border:1px solid currentColor; padding:7px 9px; opacity:.55; }
.offer-button { display:flex; align-items:center; justify-content:space-between; padding:14px 17px; border:1px solid currentColor; border-radius:100px; font-size:.72rem; transition:background .25s ease,color .25s ease,border-color .25s ease; }
.offer-button:hover { background:var(--terracotta); color:white; border-color:var(--terracotta); }
.offer-note { color:var(--muted); font-size:.68rem; margin-top:25px; }

/* ==================================================
   PROCESS / FAQ / CONTACT / FOOTER
================================================== */
.process-section { display:grid; grid-template-columns:.75fr 1.25fr; gap:120px; align-items:start; }
.process-intro h2 { font-size:clamp(3rem,5vw,5.5rem); line-height:.9; letter-spacing:-.07em; }
.process-intro h2 em { color:var(--terracotta); }
.process-intro > p:last-child { color:var(--muted); max-width:380px; line-height:1.7; margin-top:35px; font-size:.85rem; }
.process-list { border-top:1px solid var(--line); }
.process-step { display:grid; grid-template-columns:70px 1fr; gap:25px; padding:32px 0; border-bottom:1px solid var(--line); }
.process-step > span { color:var(--terracotta); font-size:.7rem; font-weight:700; }
.process-step h3 { font-family:var(--serif); font-size:1.8rem; margin-bottom:8px; }
.process-step p { color:var(--muted); font-size:.82rem; line-height:1.7; max-width:520px; }
.faq-list { border-top:1px solid var(--line); margin-top:60px; }
.faq { border-bottom:1px solid var(--line); padding:26px 0; }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:30px; font-family:var(--serif); font-size:1.35rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary span { color:var(--terracotta); font-family:var(--sans); font-size:1.3rem; transition:transform .3s ease; }
.faq[open] summary span { transform:rotate(45deg); }
.faq p { max-width:700px; color:var(--muted); line-height:1.7; font-size:.82rem; padding-top:18px; }
.contact-section { position:relative; z-index:3; background:var(--terracotta); color:white; padding:150px 5vw; text-align:center; overflow:hidden; }
.contact-inner { max-width:900px; margin:auto; }
.contact-section .eyebrow { color:rgba(255,255,255,.65); }
.contact-section h2 { font-size:clamp(3.5rem,7vw,7rem); line-height:.9; letter-spacing:-.07em; }
.contact-section h2 em { color:var(--cream); }
.contact-section > .contact-inner > p:not(.eyebrow) { max-width:550px; margin:35px auto; color:rgba(255,255,255,.75); line-height:1.7; }
.contact-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.contact-section .button-dark { background:var(--black); }
.contact-section .button-outline { border-color:rgba(255,255,255,.5); color:white; }
.contact-section .button-outline:hover { background:white; color:var(--black); }
.footer { max-width:var(--max-width); margin:auto; padding:45px 5vw; display:grid; grid-template-columns:1fr auto 1fr; gap:30px; align-items:end; }
.footer-brand strong { font-family:var(--serif); font-size:1.4rem; }
.footer-brand strong span { color:var(--terracotta); }
.footer-brand p { color:var(--muted); font-size:.7rem; margin-top:7px; }
.footer-links { display:flex; gap:22px; font-size:.72rem; color:var(--muted); }
.footer-links a:hover { color:var(--terracotta); }
.copyright { text-align:right; color:var(--muted); font-size:.68rem; }

/* ==================================================
   REVEAL
================================================== */
.reveal { opacity:0; transform:translateY(45px); transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay { transition-delay:.18s; }

/* ==================================================
   RESPONSIVE
================================================== */
@media (max-width:900px) {
    .nav,.header-cta { display:none; }
    .menu-toggle { display:block; }
    .nav.mobile-open { display:flex; position:fixed; inset:0; background:rgba(243,239,231,.97); backdrop-filter:blur(18px); flex-direction:column; align-items:center; justify-content:center; gap:28px; font-size:1.3rem; z-index:101; }
    .menu-toggle.active { position:relative; z-index:102; }
    .menu-toggle.active span:first-child { transform:rotate(45deg) translate(3px,3px); }
    .menu-toggle.active span:last-child { transform:rotate(-45deg) translate(3px,-3px); }
    .hero { grid-template-columns:1fr; gap:40px; padding-top:130px; }
    .hero-art { min-height:450px; }
    .intro { grid-template-columns:1fr; gap:25px; }
    .services-list .service { grid-template-columns:50px 1fr 45px; }
    .service-description { display:none; }
    .demo-showcase { grid-template-columns:1fr; max-width:600px; margin:auto; }
    .demo-card-featured { transform:none; order:-1; }
    .demo-card-featured:hover { transform:translateY(-7px); }
    .process-section { grid-template-columns:1fr; gap:70px; }
    .footer { grid-template-columns:1fr; gap:25px; }
    .copyright { text-align:left; }
}
@media (max-width:550px) {
    .floating-offers { width:min(185px,calc(100vw - 20px)); min-height:48px; padding:9px 12px; }
    .floating-offers-text { font-size:.61rem; }
    .logo { gap:8px; font-size:1.35rem; }
    .logo img { width:28px; height:28px; }
    .section { padding-top:100px; padding-bottom:100px; }
    .header { height:72px; padding:0 6vw; }
    .hero { padding-left:6vw; padding-right:6vw; padding-top:110px; min-height:auto; }
    .hero-main h1 { font-size:clamp(3.2rem,15vw,4.5rem); }
    .hero-description { font-size:.88rem; margin:30px 0; }
    .hero-actions { gap:18px; }
    .hero-art { min-height:350px; }
    .art-circle { width:300px; }
    .art-label { font-size:.5rem; }
    .art-number { top:20px; right:5px; }
    .section-top { display:block; }
    .section-top h2 { font-size:clamp(2.8rem,13vw,4rem); }
    .section-note { margin-top:25px; }
    .service { gap:15px !important; padding:28px 0; }
    .service:hover { padding-left:10px; padding-right:10px; }
    .service-title h3 { font-size:1.7rem; }
    .demo-card { padding:13px; }
    .offer-preview { aspect-ratio:16/11; border-radius:15px; }
    .preview-overlay { opacity:1; transform:none; left:10px; right:10px; bottom:10px; }
    .demo-card-content { padding:24px 9px 10px; }
    .demo-card-content h3 { font-size:2.2rem; }
    .contact-section { padding:110px 6vw; }
    .contact-section h2 { font-size:clamp(3rem,14vw,5rem); }
    .footer { padding-left:6vw; padding-right:6vw; }
    .footer-links { flex-wrap:wrap; }
    .faq summary { font-size:1.1rem; gap:15px; }
    #particles-js { opacity:.9; }
}

@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .floating-offers { transform:translate3d(20px,100px,0) !important; }
}