/* style-commun.css : styles partages par toutes les pages HappyCrea */

:root{
    --bg: #07070c;
    --bg-soft: #0d0d16;
    --violet: #7b5cf0;
    --violet-deep: #5a3fd6;
    --lavender: #b8a0f0;
    --cyan: #00d4ff;
    --ink: #f2f0fb;
    --muted: #8b89a3;
    --card-line: rgba(184,160,240,0.14);
    --glass: rgba(7,7,12,0.6);
  }

/* ---------- Mode clair ---------- */
  :root[data-theme="light"]{
    --bg: #FAF9FF;
    --bg-soft: #F1EEFB;
    --violet: #6b46e0;
    --violet-deep: #4f32c4;
    --lavender: #9c3fc7;
    --cyan: #006d85;
    --ink: #201830;
    --muted: #6b6280;
    --card-line: rgba(90,63,214,0.16);
    --glass: rgba(255,255,255,0.72);
  }

  html, body, nav, .dock-item, .back-btn, #l-widget-panel, #mobile-menu{
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  }

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

html{ scroll-behavior:smooth; }

body{
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    overflow-x:hidden;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34"><g fill="%23B8A0F0"><ellipse cx="17" cy="21" rx="9" ry="7.5"/><ellipse cx="8" cy="10" rx="3.4" ry="4.2"/><ellipse cx="15.5" cy="6" rx="3.2" ry="4"/><ellipse cx="22" cy="7" rx="3.2" ry="4"/><ellipse cx="27.5" cy="12.5" rx="3" ry="3.8"/></g></svg>') 17 21, auto;
  }

a, button, .service-card, .cta-btn{
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 34 34"><g fill="%2300D4FF"><ellipse cx="17" cy="21" rx="9" ry="7.5"/><ellipse cx="8" cy="10" rx="3.4" ry="4.2"/><ellipse cx="15.5" cy="6" rx="3.2" ry="4"/><ellipse cx="22" cy="7" rx="3.2" ry="4"/><ellipse cx="27.5" cy="12.5" rx="3" ry="3.8"/></g></svg>') 17 21, pointer;
  }

/* ---------- Scroll progress "bande passante" ---------- */
  #progress-bar{
    position:fixed;
    top:0; left:0;
    height:3px;
    width:0%;
    background: linear-gradient(90deg, var(--violet), var(--cyan), var(--lavender));
    background-size: 200% 100%;
    z-index:9999;
    box-shadow: 0 0 12px var(--cyan), 0 0 4px var(--violet);
    transition: width 0.08s linear;
  }

/* ---------- Paw print trail on scroll ---------- */
  .paw-trail{
    position:fixed;
    width:16px; height:16px;
    pointer-events:none;
    z-index:9998;
    opacity:0;
    background: radial-gradient(circle, var(--lavender) 0%, transparent 70%);
    border-radius:50%;
    filter: blur(0.5px);
  }

/* ---------- Background ambient glow ---------- */
  .ambient{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 900px 600px at 15% -10%, rgba(123,92,240,0.28), transparent 60%),
      radial-gradient(ellipse 700px 500px at 90% 10%, rgba(0,212,255,0.16), transparent 60%),
      radial-gradient(ellipse 800px 700px at 50% 100%, rgba(184,160,240,0.10), transparent 60%);
  }

nav{
    position:fixed; top:0; left:0; right:0;
    z-index:100;
    display:flex; justify-content:space-between; align-items:center;
    padding: 22px 6%;
    backdrop-filter: blur(14px);
    background: var(--glass);
    border-bottom: 1px solid var(--card-line);
  }

.logo-wrap{ display:flex; align-items:center; gap:10px; }

.logo-text{
    font-family:'Space Grotesk'; font-weight:700; font-size:19px;
    letter-spacing:-0.02em;
  }

.logo-text span{ color: var(--lavender); font-weight:500; }

/* ---------- Floating contact dock ---------- */
  .contact-dock{
    position:fixed;
    right: 26px; bottom: 26px;
    z-index: 500;
    display:flex; flex-direction:column; gap:14px;
    perspective: 600px;
  }

.dock-item{
    width:54px; height:54px;
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    background: var(--glass);
    border: 1px solid var(--card-line);
    backdrop-filter: blur(10px);
    text-decoration:none;
    position:relative;
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(.2,.9,.3,1.3), border-color 0.35s, box-shadow 0.35s;
  }

.dock-item svg{ width:24px; height:24px; position:relative; z-index:2; transition: transform 0.35s; }

.dock-item::before{
    content:'';
    position:absolute; inset:0; border-radius:16px;
    background: linear-gradient(135deg, rgba(123,92,240,0.35), rgba(0,212,255,0.25));
    opacity:0; transition: opacity 0.35s;
  }

.dock-item:hover{
    transform: rotateY(18deg) rotateX(8deg) translateZ(6px) scale(1.08);
    border-color: rgba(0,212,255,0.55);
    box-shadow: 0 10px 30px rgba(123,92,240,0.45), 0 0 20px rgba(0,212,255,0.25);
  }

.dock-item:hover::before{ opacity:1; }

.dock-item:hover svg{ transform: scale(1.1); }

.dock-item .dock-label{
    position:absolute; right:66px; top:50%; transform: translateY(-50%) translateX(6px);
    background: var(--bg-soft); border:1px solid var(--card-line);
    padding:7px 13px; border-radius:8px;
    font-family:'JetBrains Mono'; font-size:11.5px; color:var(--ink);
    white-space:nowrap;
    opacity:0; pointer-events:none;
    transition: opacity 0.3s, transform 0.3s;
  }

.dock-item:hover .dock-label{ opacity:1; transform: translateY(-50%) translateX(0); }

.dock-item.wa{ color:#25D366; }

.dock-item.mail{ color: var(--cyan); }

.dock-item.ig{ color: var(--lavender); }

.dock-item.tt{ color: var(--ink); }

.dock-item.pin{ color:#E60023; }

.nav-links{ display:flex; gap:36px; list-style:none; }

.nav-links a{
    color: var(--muted); text-decoration:none; font-size:14.5px;
    font-weight:500; letter-spacing:0.02em;
    transition: color 0.25s;
    position:relative;
  }

.nav-links a::after{
    content:''; position:absolute; bottom:-6px; left:0; width:0; height:1px;
    background: var(--cyan); transition: width 0.3s;
  }

/* ---------- Bascule mode clair / sombre ---------- */
  .nav-theme-item{ display:flex; align-items:center; }

  #theme-toggle, #theme-toggle-mobile{
    background: none;
    border: 1px solid var(--card-line);
    border-radius: 50%;
    width: 34px; height: 34px;
    display:flex; align-items:center; justify-content:center;
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.25s, transform 0.25s;
  }

  #theme-toggle:hover, #theme-toggle-mobile:hover{
    border-color: var(--cyan);
    transform: scale(1.08);
  }

  #theme-toggle-mobile{ margin-top: 6px; }

/* ---------- Bloc promo Diagnostic IA ---------- */
  .diag-promo{
    max-width: 720px; margin: 60px auto 0; padding: 40px 42px;
    background: var(--bg-soft); border: 1px solid var(--card-line); border-radius: 24px;
    position: relative; overflow:hidden;
  }
  .diag-promo::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background: radial-gradient(ellipse 500px 300px at 90% -10%, rgba(0,212,255,0.12), transparent 60%);
  }
  .diag-promo > *{ position:relative; z-index:1; }
  @media (max-width:600px){ .diag-promo{ padding:30px 24px; } }

  .diag-promo-eyebrow{
    font-family:'JetBrains Mono'; font-size:12.5px; font-weight:600; letter-spacing:0.04em;
    text-transform:uppercase; color: var(--lavender); margin-bottom:18px; max-width:480px;
  }
  .diag-promo h2{
    font-family:'Space Grotesk'; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight:700;
    line-height:1.25; margin-bottom:14px;
  }
  .diag-promo h2 .highlight{ color: var(--cyan); }
  .diag-promo-lead{ color: var(--muted); line-height:1.6; max-width:520px; margin-bottom:26px; }

  .diag-promo-list{ list-style:none; margin-bottom:30px; }
  .diag-promo-list li{
    display:flex; align-items:flex-start; gap:10px; margin-bottom:12px;
    font-size:0.95rem; color: var(--ink); line-height:1.5;
  }
  .diag-promo-list li::before{ content:'✓'; color: var(--cyan); font-weight:700; flex-shrink:0; }

  .diag-promo-btn{ display:inline-block; }
  .diag-promo-note{
    font-size:0.82rem; color: var(--muted); font-style:italic; margin-top:16px; max-width:480px;
  }

.nav-links a:hover{ color: var(--ink); }

.nav-links a:hover::after{ width:100%; }

section{ position:relative; z-index:1; }

/* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding: 140px 6% 100px;
    position:relative;
    overflow:hidden;
  }

  .hero-3d{
    flex-direction:row; text-align:left; justify-content:space-between; gap:40px;
  }

  #hero3d-wrap{
    position:absolute; top:0; left:0; right:0; bottom:0;
    width:100%; height:100%; z-index:0;
    pointer-events:none;
  }

  #hero3d{ width:100%; height:100%; display:block; }

  .hero-content{ position:relative; z-index:1; max-width:640px; }

  @media (max-width: 900px){
    .hero-3d{ flex-direction:column; text-align:center; }
    .hero-content{ max-width:100%; text-align:center; }
    #hero3d-wrap{ opacity:0.5; }
  }

  .hero-3d{
    background: radial-gradient(circle at 72% 45%, rgba(123,92,240,0.22), transparent 55%),
                radial-gradient(circle at 85% 30%, rgba(0,212,255,0.14), transparent 50%);
  }

#constellation{
    position:absolute; inset:0;
    z-index:0;
    opacity:0.65;
  }

.hero > *:not(#constellation):not(#hero3d-wrap){ position:relative; z-index:1; }

.eyebrow{
    font-family:'JetBrains Mono'; font-size:12.5px; letter-spacing:0.22em;
    color: var(--cyan); text-transform:uppercase;
    margin-bottom:26px;
    display:flex; align-items:center; gap:10px;
    opacity:0; animation: fadeUp 0.8s ease forwards 0.1s;
  }

.eyebrow::before{
    content:''; width:6px; height:6px; border-radius:50%;
    background: var(--cyan); box-shadow:0 0 10px var(--cyan);
    display:inline-block;
  }

.hero h1{
    font-family:'Space Grotesk'; font-weight:700;
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    line-height:1.04; letter-spacing:-0.03em;
    max-width: 900px;
  }

.hero h1 .word{ display:inline-block; overflow:hidden; vertical-align:top; margin-right:0.22em; }

.hero h1 .word span{
    display:inline-block;
    opacity:0; transform: translateY(110%) rotate(4deg);
    animation: wordUp 0.85s cubic-bezier(.2,.8,.2,1) forwards;
  }

@keyframes wordUp{
    to{ opacity:1; transform: translateY(0) rotate(0deg); }
  }

.hero h1 .grad{
    background: linear-gradient(100deg, var(--lavender), var(--cyan) 40%, var(--violet), var(--cyan));
    background-size: 300% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation: gradShift 6s ease-in-out infinite;
  }

#rotatingWord{
    display:inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

#rotatingWord.word-out{
    opacity:0; transform: translateY(14px);
  }

@keyframes gradShift{
    0%,100%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
  }

.hero h1 .glow-underline{
    position:relative;
  }

.hero h1 .glow-underline::after{
    content:'';
    position:absolute; left:0; right:0; bottom:-6px; height:3px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity:0;
    animation: underlineSweep 3.2s ease-in-out 1.6s infinite;
  }

@keyframes underlineSweep{
    0%{ opacity:0; transform: scaleX(0.2); }
    40%{ opacity:0.9; transform: scaleX(1); }
    70%{ opacity:0; }
    100%{ opacity:0; }
  }

/* ---------- Buttons: shine + magnetic feel ---------- */
  .cta-btn{
    font-family:'Space Grotesk'; font-weight:600; font-size:15px;
    padding: 15px 32px; border-radius:100px; text-decoration:none;
    display:inline-flex; align-items:center; gap:8px;
    transition: transform 0.25s, box-shadow 0.25s;
    position:relative; overflow:hidden;
    isolation:isolate;
  }

.cta-btn::before{
    content:'';
    position:absolute; top:0; left:-60%; width:40%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    z-index:1;
  }

.cta-btn:hover::before{ left:130%; }

.cta-btn .arrow{ display:inline-block; transition: transform 0.3s; }

.cta-btn:hover .arrow{ transform: translateX(5px); }

.hero p.sub{
    max-width:560px; margin: 30px auto 0;
    font-size: 1.12rem; line-height:1.65; color: var(--muted);
    opacity:0; animation: fadeUp 0.9s ease forwards 0.85s;
  }

.hero-ctas{
    display:flex; gap:18px; margin-top:44px; flex-wrap:wrap; justify-content:center;
    opacity:0; animation: fadeUp 0.9s ease forwards 1s;
  }

.cta-btn{
    font-family:'Space Grotesk'; font-weight:600; font-size:15px;
    padding: 15px 32px; border-radius:100px; text-decoration:none;
    display:inline-flex; align-items:center; gap:8px;
    transition: transform 0.25s, box-shadow 0.25s;
  }

.cta-primary{
    background: linear-gradient(120deg, var(--violet), var(--violet-deep));
    color:#fff;
    box-shadow: 0 0 0 1px rgba(184,160,240,0.3), 0 8px 30px rgba(123,92,240,0.35);
  }

.cta-primary:hover{ transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(184,160,240,0.5), 0 14px 40px rgba(123,92,240,0.5); }

.cta-secondary{
    background: transparent; color: var(--ink);
    border: 1px solid var(--card-line);
  }

.cta-secondary:hover{ border-color: var(--cyan); background: rgba(0,212,255,0.06); transform: translateY(-3px); }

@keyframes fadeUp{
    from{ opacity:0; transform: translateY(22px); }
    to{ opacity:1; transform: translateY(0); }
  }

/* Floating mascot corner accent */
  .mascot-float{
    position:absolute; width:130px; opacity:0.9;
    filter: drop-shadow(0 0 30px rgba(123,92,240,0.35));
    animation: float 6s ease-in-out infinite;
  }

@keyframes float{
    0%,100%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-16px) rotate(2deg); }
  }

/* ---------- Section shell ---------- */
  .section-inner{ max-width:1160px; margin:0 auto; padding: 130px 6%; }

.section-head{ text-align:center; max-width:640px; margin: 0 auto 64px; }

.section-head .eyebrow{ justify-content:center; animation:none; opacity:1; }

.section-head h2{
    font-family:'Space Grotesk'; font-weight:700;
    font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing:-0.02em;
    margin-top:16px;
  }

.section-head p{ color:var(--muted); margin-top:18px; line-height:1.6; font-size:1.02rem; }

/* ---------- Services ---------- */
  .services-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:26px;
  }

.service-card{
    position:relative;
    background: var(--bg-soft);
    border: 1px solid var(--card-line);
    border-radius: 18px;
    padding: 38px 30px;
    overflow:hidden;
    cursor:pointer;
    transition: transform 0.35s ease, border-color 0.35s, grid-row 0.4s;
  }

.service-card .card-more{
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition: max-height 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.4s, margin-top 0.4s;
  }

.service-card.open .card-more{
    max-height:220px;
    opacity:1;
    margin-top:18px;
  }

.expand-hint{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:18px;
    font-family:'JetBrains Mono'; font-size:11px; letter-spacing:0.06em;
    color: var(--cyan); text-transform:uppercase;
  }

.expand-hint .plus{
    display:inline-block; transition: transform 0.4s;
    font-size:14px;
  }

.service-card.open .expand-hint .plus{ transform: rotate(135deg); }

.service-card.open .expand-hint .label::after{ content: 'Réduire'; }

.service-card:not(.open) .expand-hint .label::after{ content: 'En savoir plus'; }

.service-card::before{
    content:'';
    position:absolute; inset:-1px;
    border-radius:18px;
    background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(0,212,255,0.16), transparent 70%);
    opacity:0; transition: opacity 0.35s;
    pointer-events:none;
  }

.service-card:hover::before{ opacity:1; }

.service-card:hover{ transform: translateY(-6px); border-color: rgba(0,212,255,0.35); }

.service-card.flagship{
    border-color: rgba(123,92,240,0.45);
    background: linear-gradient(160deg, rgba(123,92,240,0.10), var(--bg-soft) 60%);
  }

.flagship-tag{
    font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:0.14em;
    color: var(--lavender); text-transform:uppercase;
    background: rgba(123,92,240,0.14);
    display:inline-block; padding:5px 12px; border-radius:100px;
    margin-bottom:18px;
  }

.service-icon{
    width:46px; height:46px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(123,92,240,0.22), rgba(0,212,255,0.14));
    margin-bottom:22px; font-size:20px;
  }

.service-card h3{
    font-family:'Space Grotesk'; font-size:1.28rem; font-weight:600; margin-bottom:12px;
  }

.service-card p{ color:var(--muted); font-size:0.96rem; line-height:1.6; }

.quote-note{
    text-align:center; margin-top:40px; color:var(--muted);
    font-family:'JetBrains Mono'; font-size:13px; letter-spacing:0.03em;
  }

/* ---------- Testimonials ---------- */
  .testi-wrap{
    display:grid; grid-template-columns: 1fr 1fr; gap:26px;
  }

.testi-card{
    background: var(--bg-soft);
    border:1px solid var(--card-line);
    border-radius:18px;
    padding:34px;
  }

.testi-card .stars{ color: var(--cyan); font-size:14px; letter-spacing:3px; margin-bottom:16px; }

.testi-card p.quote{ font-size:1rem; line-height:1.7; color: var(--ink); margin-bottom:20px; }

.testi-who{ display:flex; align-items:center; gap:12px; }

.testi-avatar{
    width:40px; height:40px; border-radius:50%;
    background: linear-gradient(135deg, var(--violet), var(--cyan));
  }

.testi-name{ font-weight:600; font-size:0.92rem; }

.testi-role{ color:var(--muted); font-size:0.82rem; }

.coming-soon{
    grid-column: 1 / -1;
    text-align:center;
    border: 1px dashed var(--card-line);
    border-radius:18px; padding:44px;
    color: var(--muted);
    position:relative;
  }

.coming-soon img{
    width:64px; margin-bottom:16px; filter: drop-shadow(0 0 20px rgba(184,160,240,0.3));
  }

.coming-soon strong{ color: var(--ink); display:block; margin-bottom:8px; font-family:'Space Grotesk'; }

/* ---------- Contact ---------- */
  .contact-shell{
    background: linear-gradient(160deg, rgba(123,92,240,0.10), var(--bg-soft));
    border:1px solid var(--card-line);
    border-radius:24px;
    padding:60px;
    display:grid; grid-template-columns: 1fr 1fr; gap:50px;
    align-items:center;
  }

.contact-shell h2{
    font-family:'Space Grotesk'; font-size:2rem; font-weight:700; letter-spacing:-0.02em;
    line-height:1.2; margin-bottom:18px;
  }

.contact-shell p{ color:var(--muted); line-height:1.6; margin-bottom:26px; }

.contact-form{ display:flex; flex-direction:column; gap:14px; }

.contact-form input, .contact-form textarea{
    background: rgba(255,255,255,0.03);
    border:1px solid var(--card-line);
    border-radius:10px;
    padding:14px 16px;
    color: var(--ink);
    font-family:'Inter'; font-size:0.94rem;
    outline:none;
    transition: border-color 0.25s;
  }

.contact-form input:focus, .contact-form textarea:focus{ border-color: var(--cyan); }

.contact-form textarea{ resize:vertical; min-height:100px; }

.contact-form button{
    font-family:'Space Grotesk'; font-weight:600; font-size:15px;
    padding:15px; border-radius:10px; border:none;
    background: linear-gradient(120deg, var(--violet), var(--violet-deep));
    color:#fff; margin-top:6px;
    transition: transform 0.2s, box-shadow 0.2s;
  }

.contact-form button:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(123,92,240,0.4); }

/* ---------- Mood check widget ---------- */
  .mood-widget{
    max-width:480px; margin: 0 auto;
    background: var(--bg-soft);
    border:1px solid var(--card-line);
    border-radius:20px;
    padding:30px 34px;
    text-align:center;
  }

.mood-widget p.ask{
    font-family:'Space Grotesk'; font-size:1.05rem; font-weight:600; margin-bottom:20px;
  }

.mood-options{ display:flex; justify-content:center; gap:14px; }

.mood-btn{
    width:52px; height:52px; border-radius:50%;
    background: rgba(255,255,255,0.03);
    border:1px solid var(--card-line);
    font-size:24px;
    display:flex; align-items:center; justify-content:center;
    transition: transform 0.3s, border-color 0.3s, background 0.3s;
  }

.mood-btn:hover{ transform: translateY(-5px) scale(1.1); border-color: var(--cyan); }

.mood-btn.picked{ border-color: var(--violet); background: rgba(123,92,240,0.18); transform: scale(1.12); }

.mood-response{
    margin-top:18px; color: var(--muted); font-size:0.9rem; min-height:20px;
    opacity:0; transition: opacity 0.4s;
  }

.mood-response.show{ opacity:1; }

footer{
    text-align:center; padding: 50px 6%; color: var(--muted);
    font-size:0.85rem; border-top:1px solid var(--card-line);
  }

footer .logo-text{ margin-bottom:10px; display:block; }

/* ---------- Boot screen (intro) ---------- */
  #boot-screen{
    position:fixed; inset:0; z-index:99999;
    background: var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:22px;
    transition: opacity 0.6s ease, visibility 0.6s;
  }

#boot-screen.hide{ opacity:0; visibility:hidden; pointer-events:none; }

.boot-logo{
    width:90px; opacity:0.95;
    filter: drop-shadow(0 0 26px rgba(123,92,240,0.6));
    animation: bootPulse 1.6s ease-in-out infinite;
  }

@keyframes bootPulse{
    0%,100%{ transform: scale(1); filter: drop-shadow(0 0 26px rgba(123,92,240,0.6)); }
    50%{ transform: scale(1.06); filter: drop-shadow(0 0 40px rgba(0,212,255,0.7)); }
  }

.boot-bar{
    width:220px; height:2px; background: rgba(255,255,255,0.08);
    border-radius:2px; overflow:hidden;
  }

.boot-bar::after{
    content:''; display:block; height:100%; width:0%;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    animation: bootLoad 1.6s ease forwards;
  }

@keyframes bootLoad{ to{ width:100%; } }

.boot-text{
    font-family:'JetBrains Mono'; font-size:11px; letter-spacing:0.25em;
    color: var(--muted); text-transform:uppercase;
  }

/* ---------- Scanline overlay (futuristic texture) ---------- */
  .scanlines{
    position:fixed; inset:0; z-index:9997; pointer-events:none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 3px
    );
    mix-blend-mode: overlay;
    opacity:0.5;
  }

/* ---------- Mascots ---------- */
  .mascot-corner{
    position:absolute;
    width:120px;
    filter: drop-shadow(0 0 26px rgba(123,92,240,0.4));
    animation: float 6s ease-in-out infinite;
    z-index:1;
  }

.mascot-corner.left{ left:2%; bottom:6%; }

.mascot-corner.right{ right:3%; top:18%; width:100px; animation-delay:1s; }

@media (max-width: 900px){
    .mascot-corner{ display:none; }
  }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline: 2px solid var(--cyan); outline-offset:3px;
  }

@media (max-width: 900px){
    .services-grid{ grid-template-columns:1fr; }
    .testi-wrap{ grid-template-columns:1fr; }
    .contact-shell{ grid-template-columns:1fr; padding:36px; }
    .nav-links{ display:none; }
  }

@media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }

/* ---------- Mobile menu ---------- */
  #hamburger-btn{
    display:none;
    position:fixed; top:24px; right:6%;
    background:none; border:none; cursor:pointer;
    width:34px; height:34px;
    flex-direction:column; justify-content:center; align-items:center; gap:5px;
    z-index:200;
  }

#hamburger-btn span{
    width:22px; height:2px; background: var(--ink); border-radius:2px; transition: all 0.3s;
  }

#hamburger-btn.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }

#hamburger-btn.open span:nth-child(2){ opacity:0; }

#hamburger-btn.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

#mobile-menu{
    display:none;
    position:fixed; top:0; right:0; bottom:0; width:76%; max-width:300px;
    background: var(--bg-soft); border-left:1px solid var(--card-line);
    z-index:150; padding: 100px 30px 30px;
    transform: translateX(100%); transition: transform 0.35s ease;
  }

#mobile-menu.open{ display:block; transform: translateX(0); }

#mobile-menu ul{ list-style:none; display:flex; flex-direction:column; gap:26px; }

#mobile-menu a{ color: var(--ink); text-decoration:none; font-family:'Space Grotesk'; font-size:1.1rem; }

#mobile-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:140;
  }

#mobile-overlay.open{ display:block; }

/* ---------- Back button ---------- */
  .back-btn{
    position:fixed; top:96px; left:6%; z-index:90;
    display:inline-flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono'; font-size:12px; color: var(--muted);
    text-decoration:none; padding:8px 14px; border-radius:100px;
    border:1px solid var(--card-line); background: var(--glass); backdrop-filter: blur(8px);
    transition: color 0.25s, border-color 0.25s;
  }

.back-btn:hover{ color: var(--cyan); border-color: rgba(0,212,255,0.4); }

@media (max-width: 900px){
    .nav-links{ display:none; }
    #hamburger-btn{ display:flex; }
    .back-btn{ top:88px; }
  }

/* ---------- Touch device cursor fix ---------- */
  @media (pointer: coarse){
    body, a, button, .service-card, .cta-btn{ cursor:auto !important; }
  }

/* ---------- L Assistant widget ---------- */
  #l-widget-trigger{
    position:fixed; left:26px; bottom:26px; z-index:500;
    width:60px; height:60px; border-radius:50%;
    background: linear-gradient(135deg, var(--violet), var(--cyan));
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:none;
    box-shadow: 0 8px 24px rgba(123,92,240,0.5);
    transition: transform 0.3s;
    padding:0;
    overflow:hidden;
  }

#l-widget-trigger:hover{ transform: scale(1.08); }

#l-widget-trigger img{ width:100%; height:100%; object-fit:cover; }

#l-widget-trigger .l-pulse{
    position:absolute; inset:0; border-radius:50%;
    border:2px solid var(--cyan); opacity:0.7;
    animation: lPulse 2.4s ease-out infinite;
  }

@keyframes lPulse{
    0%{ transform: scale(1); opacity:0.7; }
    100%{ transform: scale(1.5); opacity:0; }
  }

#l-widget-panel{
    position:fixed; left:26px; bottom:100px; z-index:501;
    width:330px; max-height:460px;
    background: var(--bg-soft);
    border:1px solid var(--card-line);
    border-radius:20px;
    display:none;
    flex-direction:column;
    overflow:hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    backdrop-filter: blur(14px);
  }

#l-widget-panel.open{ display:flex; animation: stepIn 0.35s ease; }

.l-header{
    display:flex; align-items:center; gap:12px;
    padding:16px 18px;
    border-bottom:1px solid var(--card-line);
    background: linear-gradient(120deg, rgba(123,92,240,0.14), rgba(0,212,255,0.08));
  }

.l-header img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }

.l-header .l-name{ font-family:'Space Grotesk'; font-weight:600; font-size:0.94rem; }

.l-header .l-status{ font-family:'JetBrains Mono'; font-size:10px; color:var(--cyan); letter-spacing:0.05em; }

.l-close{ margin-left:auto; background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; }

.l-messages{
    flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px;
    max-height:260px;
  }

.l-msg{ max-width:85%; font-size:0.86rem; line-height:1.5; padding:10px 14px; border-radius:14px; }

.l-msg.bot{ background: rgba(255,255,255,0.05); align-self:flex-start; border-bottom-left-radius:4px; }

.l-msg.user{ background: rgba(123,92,240,0.25); align-self:flex-end; border-bottom-right-radius:4px; }

.l-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; }

.l-chip{
    font-size:0.76rem; border:1px solid var(--card-line); border-radius:100px;
    padding:7px 13px; cursor:pointer; color:var(--muted); transition: all 0.2s;
  }

.l-chip:hover{ border-color: var(--cyan); color:var(--ink); }

.l-input-row{
    display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--card-line);
  }

.l-input-row input{
    flex:1; background: rgba(255,255,255,0.04); border:1px solid var(--card-line);
    border-radius:10px; padding:10px 12px; color:var(--ink); font-size:0.85rem; outline:none;
  }

.l-input-row input:focus{ border-color: var(--cyan); }

.l-input-row button{
    background: linear-gradient(120deg, var(--violet), var(--violet-deep));
    border:none; border-radius:10px; padding:0 16px; color:#fff; cursor:pointer; font-size:0.85rem;
  }

@media (max-width: 480px){
    #l-widget-panel{ width: calc(100vw - 40px); left:20px; }
  }

/* ---------- Bandeau de consentement cookies ---------- */
#cookie-banner{
    position: fixed; left:20px; right:20px; bottom:20px; z-index:9999;
    max-width: 720px; margin: 0 auto;
    background: var(--bg-soft); border:1px solid var(--card-line); border-radius:16px;
    padding: 20px 24px;
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  }

#cookie-banner p{ flex:1; min-width:220px; color:var(--muted); font-size:0.86rem; line-height:1.5; margin:0; }

#cookie-banner p a{ color:var(--cyan); }

.cookie-banner-actions{ display:flex; gap:10px; flex-shrink:0; }

.cookie-banner-actions button{
    font-family:'Inter'; font-size:0.85rem; font-weight:600; cursor:pointer;
    padding:9px 18px; border-radius:100px; border:1px solid var(--card-line);
    background:transparent; color:var(--ink);
  }

#cookie-accept{
    background: linear-gradient(120deg, var(--violet), var(--violet-deep)) !important;
    border:none !important; color:#fff !important;
  }

@media (max-width: 560px){
    #cookie-banner{ left:12px; right:12px; bottom:12px; padding:18px; }
    .cookie-banner-actions{ width:100%; }
    .cookie-banner-actions button{ flex:1; }
  }

/* ---------- Passages surprise de L et Coki ---------- */
.mascot-wander{
    position: fixed; z-index: 500; pointer-events:none;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
  }

.mascot-wander.walk{
    bottom: 18px; left: -120px; width: 64px;
    animation: mascotWalk 9s linear forwards;
  }

@keyframes mascotWalk{
    0%{ left:-120px; transform: scaleX(1); }
    48%{ transform: scaleX(1); }
    50%{ transform: scaleX(-1); }
    100%{ left: 100vw; transform: scaleX(-1); }
  }

.mascot-wander.fly{
    top: 90px; left: -120px; width: 58px;
    animation: mascotFly 8s ease-in-out forwards;
  }

@keyframes mascotFly{
    0%{ left:-120px; top:90px; }
    25%{ top:60px; }
    50%{ top:110px; }
    75%{ top:70px; }
    100%{ left:100vw; top:90px; }
  }

.mascot-wander.peek{
    bottom: -90px; right: 26px; width: 76px;
    animation: mascotPeek 4.5s ease-in-out forwards;
  }

@keyframes mascotPeek{
    0%{ bottom:-90px; }
    18%{ bottom:-8px; }
    82%{ bottom:-8px; }
    100%{ bottom:-90px; }
  }

@media (max-width: 600px){
    .mascot-wander.walk, .mascot-wander.fly{ width:48px; }
    .mascot-wander.peek{ width:58px; }
  }

/* ---------- Bannière promo à compte à rebours ---------- */
#promo-banner{
    position: relative; margin-top: 104px; z-index: 90;
    background: linear-gradient(90deg, var(--cyan), #0090b0);
    color:#07070c; text-align:center;
    padding: 10px 16px;
    font-family:'Inter'; font-size: 0.86rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  }

#promo-banner a{ color:#07070c; text-decoration:underline; }

#promo-banner .promo-timer{
    font-family:'JetBrains Mono'; background: rgba(7,7,12,0.18);
    padding: 3px 10px; border-radius:100px; font-size:0.82rem; letter-spacing:0.03em;
  }

@media (max-width: 560px){
    #promo-banner{ font-size:0.78rem; padding:9px 10px; margin-top:100px; }
  }
/* ---------- Newsletter (inscription Brevo) ---------- */
.newsletter-widget{
  max-width:420px; margin: 20px auto 0;
  text-align:center;
}
.newsletter-widget p.lead{
  font-size:0.86rem; color: var(--muted); margin-bottom:14px;
}
.newsletter-form{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.newsletter-form input[type="email"]{
  flex:1; min-width:200px;
  background: rgba(255,255,255,0.04);
  border:1px solid var(--card-line);
  border-radius:100px;
  padding: 11px 18px;
  color: var(--ink);
  font-family:'Inter', sans-serif; font-size:0.88rem;
  outline:none;
}
.newsletter-form input[type="email"]:focus{ border-color: var(--cyan); }
.newsletter-form button{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.86rem;
  padding: 11px 22px; border-radius:100px; border:none;
  background: linear-gradient(120deg, var(--violet), var(--violet-deep));
  color:#fff; cursor:pointer; white-space:nowrap;
  transition: transform 0.2s;
}
.newsletter-form button:hover{ transform: translateY(-2px); }
.newsletter-form button:disabled{ opacity:0.6; cursor:not-allowed; transform:none; }
.newsletter-msg{ margin-top:10px; font-size:0.82rem; min-height:16px; }
.newsletter-msg:empty{ display:none; }
.newsletter-msg.success,
.newsletter-msg.error{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:100px;
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.86rem;
  animation: newsletter-pop 0.35s ease;
}
.newsletter-msg.success{
  color:#0a3b34;
  background: linear-gradient(120deg, var(--cyan), #6ee7b7);
}
.newsletter-msg.success::before{
  content:"✓";
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:#0a3b34; color:var(--cyan);
  font-size:0.72rem; font-weight:700;
}
.newsletter-msg.error{
  color:#fff;
  background: rgba(248,113,113,0.15);
  border:1px solid #f87171;
}
.newsletter-msg.error::before{
  content:"!";
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:#f87171; color:#fff;
  font-size:0.72rem; font-weight:700;
}
@keyframes newsletter-pop{
  from{ opacity:0; transform: translateY(-4px) scale(0.96); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.newsletter-section{
  max-width:640px; margin: 0 auto 70px;
  background: var(--bg-soft);
  border: 1px solid var(--card-line);
  border-radius:18px;
  padding: 40px 34px;
}
.newsletter-section h3{
  font-family:'Space Grotesk', sans-serif; font-size:1.25rem; margin-bottom:8px; color: var(--ink);
}