:root{
      --bg:#f7f8fb;
      --surface:#ffffff;
      --ink:#202631;
      --muted:#677082;
      --line:#dfe4ee;

      /* Couleurs issues du logo Ten One */
      --brand:#33549f;
      --brand-light:#6ebcea;
      --brand-mid:#7088c5;

      /* Déclinaisons très légères pour structurer la page */
      --brand-soft:#edf1fa;
      --brand-light-soft:#eef8fd;
      --brand-mid-soft:#f1f3fa;

      --max:1120px;
      --radius:22px;
      --shadow:0 14px 36px rgba(51,84,159,.09);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height:1.65;
      -webkit-font-smoothing:antialiased;
    }

    a{color:inherit;text-decoration:none}
    .wrap{width:min(calc(100% - 40px), var(--max));margin:auto}

    header{
      position:sticky; top:0; z-index:20;
      padding:10px 0 0;
      background:linear-gradient(180deg,rgba(247,248,251,.96),rgba(247,248,251,.76));
      backdrop-filter:blur(18px);
      transition:padding .25s ease,box-shadow .25s ease;
    }
    header.is-scrolled{padding-top:6px;box-shadow:0 12px 34px rgba(32,38,49,.08)}

    .nav{
      min-height:68px; display:flex; align-items:center;
      justify-content:space-between; gap:28px;
      padding:8px 12px 8px 10px;
      border:1px solid rgba(51,84,159,.14);
      border-radius:18px;
      background:rgba(255,255,255,.88);
      box-shadow:0 10px 32px rgba(51,84,159,.10);
    }

    .brand{display:flex;align-items:center;gap:11px;min-width:max-content}
    .brand-logo{display:none}
    .brand-mark{width:46px;height:46px;display:block;filter:drop-shadow(0 7px 12px rgba(51,84,159,.18))}
    .brand-wordmark{display:flex;flex-direction:column;line-height:1}
    .brand-wordmark strong{font-size:1.08rem;letter-spacing:.01em;color:var(--brand)}
    .brand-wordmark small{margin-top:6px;color:var(--muted);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase}
    nav{
      display:flex;gap:5px;align-items:center;color:#556071;font-size:.91rem;
      padding:4px;border-radius:13px;background:var(--brand-soft);
    }
    nav a{
      position:relative;padding:9px 12px;border-radius:10px;font-weight:650;
      transition:background .2s ease,color .2s ease,box-shadow .2s ease;
    }
    nav a:hover{color:var(--brand);background:rgba(255,255,255,.7)}
    nav a.active{color:var(--brand);background:#fff;box-shadow:0 4px 14px rgba(51,84,159,.13)}
    .scroll-progress{height:3px;margin-top:7px;background:rgba(51,84,159,.08);overflow:hidden}
    .scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-light));transition:width .08s linear}

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      min-height:46px; padding:0 19px;
      border-radius:999px; border:1px solid var(--brand);
      background:var(--brand); color:white; font-weight:700;
      transition:.2s ease;
    }
    .btn:hover{transform:translateY(-1px);opacity:.95}
    .btn.secondary{background:transparent;color:var(--brand)}

    .hero-shell{
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 85% 15%, rgba(110,188,234,.11), transparent 24%),
        radial-gradient(circle at 65% 80%, rgba(112,136,197,.10), transparent 28%),
        linear-gradient(180deg,#fbfaf7 0%,#f6f3ec 100%);
    }
    .hero{
      min-height:680px;
      padding:96px 0 82px;
      display:grid; grid-template-columns:minmax(0,1.16fr) minmax(330px,.84fr);
      gap:70px; align-items:center;
    }

    .eyebrow{
      display:inline-block; color:var(--brand); font-weight:800;
      letter-spacing:.09em; text-transform:uppercase; font-size:.78rem;
      margin-bottom:18px;
    }

    h1,h2,h3{line-height:1.12;margin:0;letter-spacing:-.035em}
    h1{font-size:clamp(2.85rem,7vw,5.5rem);max-width:900px}
    h1 span{display:block;color:var(--brand);font-size:.47em;margin-top:14px}
    h2{font-size:clamp(2rem,4vw,3.1rem)}

    .lead{
      margin:28px 0 0; max-width:800px;
      font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.55;
    }
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

    .hero-visual{
      position:relative; min-height:420px;
      display:grid; place-items:center;
    }
    .visual-card{
      width:min(100%,430px);
      min-height:470px;
      position:relative;
      border-radius:34px;
      background:linear-gradient(155deg,#fff 0%,var(--brand-light-soft) 100%);
      box-shadow:var(--shadow);
      overflow:hidden;
      border:1px solid rgba(51,84,159,.10);
      padding:28px;
    }
    .visual-card::before{
      content:"";position:absolute;width:190px;height:190px;border-radius:50%;
      right:-90px;top:-90px;background:rgba(110,188,234,.16);
    }
    .visual-heading{position:relative;margin-bottom:19px}
    .visual-heading span{
      display:block;margin-bottom:6px;color:var(--brand-light);font-size:.7rem;
      font-weight:850;letter-spacing:.13em;text-transform:uppercase;
    }
    .visual-heading strong{display:block;color:var(--brand);font-size:1.15rem;line-height:1.3}
    .process-flow{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:9px}
    .process-flow::before{
      content:"";position:absolute;left:21px;top:32px;bottom:32px;width:2px;
      background:linear-gradient(var(--brand),var(--brand-light));opacity:.34;
    }
    .process-flow li{
      position:relative;display:flex;align-items:center;gap:14px;min-height:63px;
      padding:10px 14px 10px 8px;border:1px solid rgba(51,84,159,.10);
      border-radius:16px;background:rgba(255,255,255,.86);
    }
    .step-number{
      position:relative;z-index:1;flex:0 0 28px;width:28px;height:28px;border-radius:50%;
      display:grid;place-items:center;background:var(--brand);color:#fff;font-size:.75rem;font-weight:850;
      box-shadow:0 4px 12px rgba(51,84,159,.2);
    }
    .process-flow strong{display:block;color:var(--ink);font-size:.98rem}
    .process-flow small{display:block;margin-top:2px;color:var(--muted);font-size:.76rem;line-height:1.35}
    .improvement-loop{
      display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;
      padding:10px 14px;border:1px dashed rgba(51,84,159,.35);border-radius:999px;
      color:var(--brand);background:var(--brand-soft);font-size:.82rem;
    }
    .improvement-loop span{font-size:1.3rem;line-height:1;color:var(--brand-light)}

    .section{
      position:relative;
      padding:92px 0;
    }
    .section + .section{border-top:1px solid rgba(221,220,213,.85)}
    .tone-green{background:var(--brand-light-soft)}
    .tone-sand{background:var(--brand-soft)}
    .tone-blue{background:#f3f6fc}
    .tone-white{background:#fff}
    .tone-cream{background:#faf8f3}

    .section-number{
      display:flex; align-items:center; gap:12px;
      color:var(--brand); font-size:.77rem; text-transform:uppercase;
      letter-spacing:.1em; font-weight:800; margin-bottom:13px;
    }
    .section-number::before{
      content:""; width:34px; height:2px; background:currentColor;
    }
    .section-number.on-dark{color:#fff}
    .section-head{max-width:760px;margin-bottom:38px}
    .section-head p{color:var(--muted);font-size:1.06rem;margin:14px 0 0}

    .guide{
      position:absolute; right:max(18px,calc((100vw - var(--max))/2 - 44px));
      top:50%; transform:translateY(-50%);
      writing-mode:vertical-rl;
      color:rgba(51,84,159,.24);
      text-transform:uppercase; letter-spacing:.18em;
      font-size:.7rem; font-weight:800;
    }

    .quotes{
      display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px; margin-top:30px;
    }
    .quote{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(51,84,159,.13);
      border-radius:16px; padding:22px 24px;
      font-size:1.08rem; box-shadow:0 4px 14px rgba(31,35,40,.035);
    }
    .after-quotes{margin-top:28px;max-width:900px}

    .offers{
      display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
    }
    .card{
      background:var(--surface); border:1px solid rgba(51,84,159,.11);
      border-radius:var(--radius); padding:29px; box-shadow:var(--shadow);
    }
    .card:nth-child(1){border-top:5px solid var(--brand)}
    .card:nth-child(2){border-top:5px solid var(--brand-light)}
    .card:nth-child(3){border-top:5px solid var(--brand-mid)}
    .card .num{
      display:block;color:var(--brand);font-size:.79rem;font-weight:800;
      letter-spacing:.08em;margin-bottom:28px
    }
    .card h3{font-size:1.5rem}
    .card .tagline{font-weight:700;margin:10px 0 16px}
    .card p{color:var(--muted);margin:0}
    .card p + p{margin-top:12px}

    .missions{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
      gap:16px;
    }
    .mission{
      background:rgba(255,255,255,.88);
      padding:25px 26px;
      border-radius:16px;
      border:1px solid rgba(110,188,234,.10);
      position:relative;
    }
    .mission::before{
      content:""; position:absolute; left:0; top:23px; bottom:23px;
      width:4px; border-radius:0 4px 4px 0; background:var(--brand-light);
    }
    .mission h3{font-size:1.12rem;letter-spacing:-.015em}
    .mission p{margin:8px 0 0;color:var(--muted)}

    .reasons{
      display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
    }
    .reason{
      background:rgba(255,255,255,.68);
      border:1px solid rgba(112,136,197,.11);
      border-radius:16px; padding:22px 18px;
    }
    .reason h3{font-size:1.02rem;color:var(--brand-mid)}
    .reason p{font-size:.94rem;color:var(--muted);margin:8px 0 0}

    .process{
      display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:start;
    }
    .process-list{display:grid;gap:0}
    .step{
      display:grid;grid-template-columns:52px 1fr;gap:15px;align-items:start;
      padding:19px 0;border-bottom:1px solid rgba(51,84,159,.17);
    }
    .step b{
      width:38px;height:38px;display:grid;place-items:center;
      border-radius:50%;background:var(--brand);color:#fff;font-size:.9rem;
    }

    .contact-zone{
      padding:92px 0 72px;
      background:
        radial-gradient(circle at 85% 20%, rgba(110,188,234,.22), transparent 28%),
        var(--brand);
      color:white;
    }
    .contact{
      display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;
    }
    .contact h2{font-size:clamp(2.1rem,4vw,3.55rem)}
    .contact p{margin:16px 0 0;color:rgba(255,255,255,.82);max-width:700px}
    .contact .btn{
      background:white;border-color:white;color:var(--brand);justify-self:end;
    }

    footer{
      padding:30px 0 40px;background:#243b73;color:rgba(255,255,255,.7);
      font-size:.92rem;
    }
    .footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
    footer a{text-decoration:underline;text-underline-offset:3px}

    .proof-note{
      display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;
      color:var(--brand);font-size:.88rem;font-weight:700;
    }
    .proof-note::before{
      content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-light);
      box-shadow:0 0 0 5px rgba(110,188,234,.16);
    }

    @media (max-width: 940px){
      nav{display:none}
      .nav{min-height:64px}
      .hero{grid-template-columns:1fr;gap:28px;padding-top:62px}
      .hero-visual{min-height:350px}
      .visual-card{max-width:520px}
      .offers{grid-template-columns:1fr}
      .reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
      .process{grid-template-columns:1fr}
      .contact{grid-template-columns:1fr}
      .contact .btn{justify-self:start}
      .guide{display:none}
    }

    @media (max-width: 640px){
      .wrap{width:min(calc(100% - 28px),var(--max))}
      .quotes,.missions,.reasons{grid-template-columns:1fr}
      .section{padding:64px 0}
      .hero{min-height:0;padding:54px 0 62px}
      .hero-visual{min-height:300px}
      .visual-card{max-width:330px}
      .contact-zone{padding:68px 0}
      h1{font-size:2.7rem}
      .brand-wordmark small{display:none}
    }
      /* V5 : identité modernisée, navigation flottante et repères de lecture. */