:root{
    --bg:#faf9f5; --panel:#fffdf7; --band:#f3f1e9; --txt:#141413; --muted:#6b6960;
    --soft:#9b988d; --accent:#d97757; --accent-d:#c8633f;
    --blue:#6a9bcc; --green:#788c5d; --amber:#e0a23f; --line:#e7e3d8;
    --serif:'Fraunces',Georgia,'Times New Roman',serif;
    --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    --shadow:0 1px 2px rgba(20,20,19,.04), 0 12px 30px rgba(20,20,19,.06);
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--txt); font-family:var(--sans); font-size:17px;
    line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
  h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.02em; line-height:1.08;
    font-optical-sizing:auto;}
  em.hl{font-style:italic; color:var(--accent);}

  /* ===== nav ===== */
  .nav{position:sticky; top:0; z-index:50; background:rgba(250,249,245,.82);
    backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid transparent; transition:border-color .25s;}
  .nav.scrolled{border-bottom-color:var(--line);}
  .nav-in{display:flex; align-items:center; justify-content:space-between; height:64px;}
  .brand{font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:-.2px; color:var(--txt);}
  .cgw{font-weight:700; font-style:normal;}
  .cgw i{font-style:normal; font-weight:700;}
  .cgw i:nth-child(1){color:var(--accent);} .cgw i:nth-child(2){color:var(--blue);}
  .cgw i:nth-child(3){color:var(--green);} .cgw i:nth-child(4){color:var(--amber);}
  .cgw i:nth-child(5){color:var(--accent);}
  .nav-right{display:flex; align-items:center; gap:12px;}
  .lang{appearance:none; -webkit-appearance:none; background:transparent; border:0; color:var(--muted);
    font-family:var(--sans); font-weight:600; font-size:14px; cursor:pointer; padding:6px 4px;}
  .lang:hover{color:var(--txt);}

  /* ===== buttons ===== */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; border:0;
    font-family:var(--sans); font-weight:600; font-size:15px; border-radius:999px; padding:12px 24px;
    transition:transform .08s ease, background .18s, box-shadow .18s, border-color .18s; white-space:nowrap;}
  .btn:active{transform:scale(.97);}
  .btn-primary{background:var(--accent); color:#fff;}
  .btn-primary:hover{background:var(--accent-d);}
  .btn-ghost{background:transparent; color:var(--txt); border:1px solid var(--line);}
  .btn-ghost:hover{background:var(--panel); border-color:var(--soft);}
  .btn-lg{padding:15px 30px; font-size:16.5px;}
  .btn svg{width:18px; height:18px;}

  /* ===== hero ===== */
  .hero{position:relative; overflow:hidden;}
  .hero-in{max-width:760px; margin:0 auto; padding:92px 24px 78px; text-align:center;
    display:flex; flex-direction:column; align-items:center; position:relative; z-index:2;}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:22px;}
  .eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);}
  h1{font-size:clamp(42px, 6.6vw, 70px);}
  .hero-sub{font-size:clamp(17px, 2.3vw, 21px); color:var(--muted); max-width:580px; margin:22px auto 0;}
  .hero-cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:32px;}
  .hero-note{margin-top:18px; font-size:13.5px; color:var(--soft);}
  /* doodles décoratifs du héro */
  .hero-doodle{position:absolute; z-index:1; opacity:.92; pointer-events:none; user-select:none;}
  .hero-doodle img{width:100%; height:auto;}
  .hd-yoga{width:104px; left:5%; bottom:54px; transform:rotate(-6deg);}
  .hd-flower{width:134px; right:4%; bottom:40px; transform:rotate(5deg);}
  .hd-aster{width:60px; right:16%; top:70px; opacity:.8;}
  .hd-point{width:62px; left:15%; top:96px; opacity:.8; transform:rotate(-8deg);}
  @media (max-width:920px){ .hero-doodle{display:none;} }
  /* slider de persos célèbres dans le héro : N&B -> couleur au survol */
  .hero-slider{margin:36px auto 0; max-width:780px; width:100%; overflow:hidden; position:relative; z-index:2;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
  .hero-slider-track{display:flex; align-items:flex-end; gap:38px; width:max-content; animation:cgslide 36s linear infinite;}
  .hero-slider:hover .hero-slider-track{animation-play-state:paused;}
  .hero-slider img{height:86px; width:auto; flex:0 0 auto; cursor:pointer;
    filter:grayscale(1); transition:filter .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); transform-origin:center bottom;}
  .hero-slider img:hover{filter:grayscale(0); transform:scale(1.16);}
  @keyframes cgslide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .hero-slider-track{animation:none;} }
  @media (hover:none){ .hero-slider img{filter:none;} }
  @media (max-width:680px){ .hero-slider img{height:66px;} .hero-slider-track{gap:28px;} }

  /* ===== bandeau de confiance ===== */
  .trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel);}
  .trust-in{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px; padding:20px 24px;
    font-size:14px; color:var(--muted); font-weight:500;}
  .trust b{color:var(--txt); font-weight:600;}
  .trust span{display:inline-flex; align-items:center; gap:9px;}
  .trust svg{width:17px; height:17px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

  /* ===== sections ===== */
  section{padding:88px 0;}
  .sec-head{max-width:640px; margin:0 auto 48px; text-align:center;}
  .sec-head .eyebrow{margin-bottom:16px;}
  h2{font-size:clamp(30px, 4.2vw, 44px);}
  .sec-head p{margin-top:16px; color:var(--muted); font-size:clamp(16px,2vw,19px);}

  /* ===== hub catégories ===== */
  .univers{background:linear-gradient(180deg, var(--bg), var(--panel));}
  .ugrid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px 14px; max-width:860px; margin:0 auto;}
  @media (max-width:680px){ .ugrid{grid-template-columns:repeat(2,1fr); gap:24px 10px;} }
  /* pas de box : l'image transparente vit directement sur le fond, N&B -> couleur au survol */
  .ucard{background:none; border:0; border-radius:0; padding:10px 6px;
    display:flex; flex-direction:column; align-items:center; text-align:center; transition:transform .16s ease;}
  .ucard:hover{transform:translateY(-5px);}
  .ucard-art{height:124px; display:grid; place-items:center; margin-bottom:12px;}
  .ucard-art img{max-height:112px; max-width:90%; width:auto; border-radius:12px;
    filter:grayscale(1); transition:filter .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); transform-origin:center bottom;}
  .ucard:hover .ucard-art img{filter:grayscale(0); transform:scale(1.15);}
  @media (hover:none){ .ucard-art img{filter:none;} }
  .ucard-name{font-family:var(--sans); font-weight:600; font-size:16.5px;}
  .ucard-sub{display:none;}
  .ucard-go{margin-top:14px; font-size:13.5px; font-weight:600; color:var(--accent);
    display:inline-flex; align-items:center; gap:6px;}
  .ucard-go svg{width:15px; height:15px; transition:transform .16s;}
  .ucard:hover .ucard-go svg{transform:translateX(3px);}

  /* ===== comment ça marche ===== */
  .how{background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
  .step{text-align:center; display:flex; flex-direction:column; align-items:center;}
  .step-art{height:104px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:18px;}
  .step-art img{max-height:104px; width:auto;}
  .step-n{font-family:var(--serif); font-weight:600; font-size:18px; color:var(--accent);
    display:flex; align-items:center; gap:8px; margin-bottom:6px;}
  .step-n::before{content:""; width:22px; height:1.5px; background:var(--accent); opacity:.5;}
  .step h3{font-family:var(--sans); font-weight:600; font-size:18px; margin-bottom:6px;}
  .step p{color:var(--muted); font-size:15px; max-width:280px;}

  /* ===== démo live ===== */
  .demo-split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .demo-text h2{margin-bottom:18px;}
  .demo-text p{color:var(--muted); font-size:17px; margin-bottom:14px;}
  .demo-text .btn{margin-top:12px;}
  .demo-card{justify-self:center; background:var(--panel); border:1px solid var(--line); border-radius:22px;
    padding:28px; width:min(380px,92vw); box-shadow:var(--shadow); display:flex; flex-direction:column;
    align-items:center; gap:18px; user-select:none; -webkit-user-select:none; position:relative;}
  .demo-cv{width:min(210px,56vw); height:auto; aspect-ratio:1/1; display:block; filter:grayscale(1); transition:filter .35s ease;}
  .demo-card:hover .demo-cv{filter:grayscale(0);}
  .demo-bars{display:flex; flex-direction:column; gap:9px; width:100%;}
  .canvas-frame{position:relative;}
  .demo-bars canvas{width:100%; height:30px; border-radius:8px; touch-action:none; cursor:pointer; display:block;}
  .cursor-ring{position:absolute; width:16px; height:42px; border:3px solid #fff; border-radius:8px; top:50%;
    box-shadow:0 0 0 1.5px rgba(20,20,19,.5), inset 0 0 0 1.5px rgba(20,20,19,.5);
    pointer-events:none; transform:translate(-50%,-50%);}
  .pipette-stage{position:relative;}
  #pipWrap{display:none!important; position:absolute; left:0; top:0; width:34px; height:34px; z-index:3; pointer-events:none;
    transition:left .6s cubic-bezier(.3,1.3,.4,1), top .6s cubic-bezier(.3,1.3,.4,1);
    filter:drop-shadow(0 3px 6px rgba(20,20,19,.3));}
  #pipWrap svg{width:100%; height:100%; overflow:visible; animation:pipBob 2.6s ease-in-out infinite; color:var(--accent);}
  #pipWrap svg path[fill="#fff"]{fill:#fff; stroke:#141413; stroke-width:1;}
  #pipWrap svg.dip{animation:pipDip .42s ease-out;}
  @keyframes pipBob{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-4px) rotate(-3deg);}}
  @keyframes pipDip{0%{transform:translateY(0);} 40%{transform:translateY(7px) rotate(-14deg);} 100%{transform:translateY(0);}}
  .demo-hint{font-size:12.5px; color:var(--soft); text-align:center;}
  @media (prefers-reduced-motion: reduce){ #pipWrap{transition:none;} #pipWrap svg{animation:none;} }

  /* ===== faq ===== */
  .faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}
  .faq details{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
  .faq summary{list-style:none; cursor:pointer; padding:18px 22px; font-weight:600; font-size:16.5px;
    display:flex; justify-content:space-between; align-items:center; gap:14px;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+"; font-size:26px; font-weight:300; line-height:1; color:var(--accent);}
  .faq details[open] summary::after{content:"\00d7";}
  .faq .a{padding:0 22px 20px; color:var(--muted); font-size:15.5px; line-height:1.6;}

  /* ===== cta final ===== */
  .final{text-align:center;}
  .final-card{background:var(--panel); border:1px solid var(--line); border-radius:26px;
    padding:64px 32px; box-shadow:var(--shadow); position:relative; overflow:hidden;}
  .final-card .hd-final{position:absolute; width:88px; opacity:.85; pointer-events:none;}
  .final h2{margin-bottom:10px;}
  .final p{color:var(--muted); margin-bottom:28px;}

  /* ===== footer ===== */
  footer{border-top:1px solid var(--line); background:var(--panel); padding:46px 24px 54px; text-align:center;}
  .foot-mark{width:38px; margin:0 auto 18px; opacity:.7;}
  footer .legal{color:var(--soft); font-size:12.5px; line-height:1.7; max-width:680px; margin:0 auto;}
  footer .langs{margin-top:16px; font-size:13.5px; color:var(--muted);}
  footer .langs a{color:var(--muted);} footer .langs a:hover{color:var(--txt); text-decoration:underline;}

  /* ===== responsive ===== */
  @media (max-width:860px){
    .demo-split{grid-template-columns:1fr; gap:40px; text-align:center;}
    .demo-text .hero-cta, .demo-text{display:flex; flex-direction:column; align-items:center;}
  }
  @media (max-width:680px){
    section{padding:62px 0;}
    .steps{grid-template-columns:1fr; gap:38px;}
    .hero-in{padding:64px 22px 58px;}
    .final-card{padding:48px 22px;}
  }

  /* ===== héro catégorie (pages spoke) ===== */
  .hero-fig{width:188px; height:188px; border-radius:50%; display:grid; place-items:center; margin:0 auto 30px;
    background:#f1efe8; border:1px solid var(--line);}
  .hero-fig img{max-width:120px; max-height:120px; width:auto;
    filter:grayscale(1) drop-shadow(0 8px 18px rgba(20,20,19,.14)); transition:filter .35s ease;}
  .hero-fig:hover img{filter:grayscale(0) drop-shadow(0 8px 18px rgba(20,20,19,.14));}
  @media (hover:none){ .demo-cv, .hero-fig img{filter:grayscale(0);} }
  @media (max-width:680px){ .hero-fig{width:148px; height:148px;} .hero-fig img{max-width:92px; max-height:92px;} }