/* home.css — styles de la landing StelarWork (extrait de index.html, partagé EN/FR) */

  :root{
    --bg:#ECEFF3;
    --bg-2:#F6F8FA;
    --ink:#0C1B2A;
    --ink-2:#51606E;
    --ink-3:#8A97A3;
    --line:rgba(12,27,42,0.12);
    --accent:#4B45B8;
    --serif:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --sans:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    --shell:1180px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.62;
    font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden; touch-action:pan-y;
  }
  ::selection{ background:var(--accent); color:#fff; }
  a{ color:inherit; }
  img,svg{ display:block; max-width:100%; }
  h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:600; letter-spacing:-0.02em; }

  .shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 30px; }

  .eyebrow{
    font-family:var(--mono); font-size:0.71rem; font-weight:500;
    letter-spacing:0.2em; text-transform:uppercase; color:var(--accent);
    display:inline-flex; align-items:center; gap:11px;
  }
  .eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); opacity:.55; }

  /* ---------- Header ---------- */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:60;
    border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease;
  }
  .site-header.scrolled{
    background:rgba(236,239,243,0.82);
    -webkit-backdrop-filter:saturate(160%) blur(12px);
    backdrop-filter:saturate(160%) blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; height:74px; }
  .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);
    font-family:var(--serif); font-weight:600; font-size:1.18rem; letter-spacing:-0.01em; }
  .brand img{ width:27px; height:27px; flex:0 0 auto; }
  .nav-links{ display:flex; align-items:center; gap:34px; }
  .nav-links a{ text-decoration:none; color:var(--ink-2); font-weight:500; font-size:0.95rem; transition:color .2s; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-cta{ display:flex; align-items:center; gap:18px; }

  /* ---------- Buttons ---------- */
  .btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);
    font-weight:600; font-size:0.95rem; line-height:1; padding:13px 21px; border-radius:9px;
    text-decoration:none; border:1px solid transparent; cursor:pointer;
    transition:background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease; }
  .btn .ar{ transition:transform .25s ease; }
  .btn:hover .ar{ transform:translateX(3px); }
  .btn-primary{ background:var(--ink); color:#fff; }
  .btn-primary:hover{ background:var(--accent); transform:translateY(-1px); }
  .btn-lg{ padding:16px 26px; font-size:1rem; border-radius:11px; }
  .link{ display:inline-flex; align-items:center; gap:8px; text-decoration:none;
    color:var(--ink); font-weight:600; font-size:0.97rem; }
  .link .ar{ transition:transform .25s ease; color:var(--accent); }
  .link:hover .ar{ transform:translateX(4px); }

  /* ---------- Hero ---------- */
  .hero{ padding:128px 0 18px; overflow-x:clip; }
  .hero-grid{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:46px; align-items:center; }
  .hero h1{
    font-size:clamp(2.7rem, 5.6vw, 4.7rem); line-height:1.0; margin:20px 0 0;
    font-weight:600;
  }
  .hero h1 .soft{ color:var(--ink-2); font-weight:500; }
  .hero .lede{ margin:26px 0 0; max-width:34rem; font-size:1.12rem; color:var(--ink-2); line-height:1.6; }
  .hero .actions{ display:flex; align-items:center; gap:22px; margin-top:34px; flex-wrap:wrap; }
  .hero-globe{ position:relative; width:100%; max-width:600px; margin-left:auto; }
  @media (min-width:961px){
    /* Globe agrandi qui déborde ~15 % hors de l'écran à droite (cf. maquette).
       Le translateX est porté par .earth-stage (et non .hero-globe, dont le transform
       est piloté par l'animation .reveal). min-width:0 empêche le globe d'élargir sa
       colonne de grille et de rétrécir le texte. */
    /* La colonne du globe se cale sur sa largeur (520px) ; le titre garde ~550px
       pour rester sur 2 lignes. Le globe déborde ~15 % hors écran via translateX. */
    .hero-globe{ width:min(520px, 42vw); max-width:none; justify-self:end; }
    .hero-globe .earth-stage{
      transform:translateX(calc(max(0px, (100vw - 1180px) / 2) + 30px)) translateX(12%) scale(1.55); }
  }
  /* ---- Globe terrestre réaliste + orbite ---- */
  /* Texture NASA "Blue Marble" (domaine public) auto-hébergée dans /assets. */
  .earth-stage{ --earth-tex:url('/assets/earth-blue-marble.jpg');
    position:relative; width:100%; aspect-ratio:1 / 1; }
  .earth{ position:absolute; left:50%; top:50%; width:86%; height:86%;
    transform:translate(-50%,-50%); border-radius:50%; overflow:hidden; background:#0a1b33;
    box-shadow:0 0 0 1px rgba(12,27,42,0.35), 0 22px 60px rgba(12,27,42,0.18), 0 0 70px rgba(75,69,184,0.12); }
  .earth__map{ position:absolute; inset:0; border-radius:50%;
    background-image:var(--earth-tex); background-repeat:repeat-x; background-size:200% 100%;
    animation:earth-spin 40s linear infinite; }
  .earth__shade{ position:absolute; inset:0; border-radius:50%; pointer-events:none;
    background:
      radial-gradient(circle at 30% 27%, rgba(255,255,255,0.32), rgba(255,255,255,0) 42%),
      radial-gradient(circle at 72% 76%, rgba(2,6,18,0.55), rgba(2,6,18,0) 68%); }
  .earth__atmo{ position:absolute; inset:0; border-radius:50%; pointer-events:none;
    box-shadow:inset 0 0 24px rgba(130,170,255,0.35); }
  @keyframes earth-spin{ from{ background-position-x:0; } to{ background-position-x:-200%; } }
  .orbit{ position:absolute; inset:3%; pointer-events:none; }
  .orbit__ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(12,27,42,0.42); }
  .orbit__spin{ position:absolute; inset:0; animation:orbit-rot 16s linear infinite; }
  .orbit__dot{ position:absolute; top:0; left:50%; width:4.4%; aspect-ratio:1 / 1;
    transform:translate(-50%,-50%); border-radius:50%; background:#0C1B2A;
    box-shadow:0 0 0 5px rgba(12,27,42,0.10), 0 2px 9px rgba(12,27,42,0.4); }
  @keyframes orbit-rot{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    .earth__map, .orbit__spin{ animation:none; }
  }

  .value-row{ display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line); margin-top:54px; }
  .value-item{ padding:22px 28px; border-left:1px solid var(--line); }
  .value-item:first-child{ border-left:none; padding-left:0; }
  .value-item .k{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--accent); }
  .value-item .v{ margin-top:9px; color:var(--ink); font-weight:500; font-size:0.99rem; line-height:1.45; }

  /* ---------- Generic section ---------- */
  .section{ padding:clamp(64px, 8.5vw, 116px) 0; scroll-margin-top:84px; }
  .rule{ height:1px; background:var(--line); }
  .section-head .eyebrow{ margin-bottom:18px; }
  .section-head h2{ font-size:clamp(1.95rem, 3.5vw, 3.05rem); line-height:1.06; max-width:20ch; }
  .section-head .sub{ margin-top:18px; max-width:46rem; color:var(--ink-2); font-size:1.08rem; }

  /* ---------- Le constat ---------- */
  .constat-grid{ display:grid; grid-template-columns:1fr 0.92fr; gap:56px; margin-top:52px; align-items:start; }
  .constat-grid p.body{ font-size:1.12rem; color:var(--ink-2); max-width:40rem; }
  .constat-grid p.body b{ color:var(--ink); font-weight:600; }
  .friction{ border-top:1px solid var(--line); }
  .friction .row{ display:grid; grid-template-columns:118px 1fr; gap:20px;
    padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline; }
  .friction .row .cat{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--accent); padding-top:3px; }
  .friction .row .txt{ color:var(--ink); font-size:1rem; line-height:1.45; }

  .pull{ margin:clamp(54px,7vw,86px) 0 0; max-width:30ch; }
  .pull q{ quotes:none; font-family:var(--serif); font-weight:500;
    font-size:clamp(1.7rem, 3.4vw, 2.7rem); line-height:1.18; color:var(--ink);
    letter-spacing:-0.01em; display:block; }
  .pull q .hl{ color:var(--accent); }
  .pull .src{ margin-top:22px; font-size:1.05rem; color:var(--ink-2); max-width:34ch; }

  /* ---------- Fonctionnement ---------- */
  .chain{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:58px; }
  .node{ position:relative; border-top:1px solid var(--line); padding-top:30px; text-align:center; }
  .node::before{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%);
    width:13px; height:13px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); }
  .node.hub{ border-top-color:var(--accent); }
  .node.hub::before{ width:0; height:0; border:none; }
  .hub-pill{ position:absolute; top:-19px; left:50%; transform:translateX(-50%);
    background:var(--ink); color:#fff; font-family:var(--mono); font-size:0.7rem;
    letter-spacing:0.12em; padding:9px 16px; border-radius:8px; white-space:nowrap; }
  .node .lbl{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--ink); }
  .node.hub .lbl{ visibility:hidden; } /* spacing keeper under pill */
  .node .desc{ margin-top:8px; color:var(--ink-2); font-size:0.96rem; line-height:1.45; padding:0 8px; }
  .node.hub .desc{ color:var(--ink); }

  .steps{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:64px; gap:0; }
  .step{ position:relative; border-top:1px solid var(--line); padding:28px 26px 0 0; }
  .step::before{ content:""; position:absolute; top:-7px; left:0;
    width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); }
  .step .num{ font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--ink-3); letter-spacing:0.04em; }
  .step h3{ margin:10px 0 0; font-size:1.16rem; }
  .step p{ margin:9px 0 0; color:var(--ink-2); font-size:0.96rem; line-height:1.5; }

  /* ---------- Conformité ---------- */
  .pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:14px;
    overflow:hidden; margin-top:54px; }
  .pillar{ background:var(--bg-2); padding:30px 26px; }
  .pillar .k{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.15em;
    text-transform:uppercase; color:var(--accent); }
  .pillar h3{ margin:14px 0 0; font-size:1.22rem; }
  .pillar p{ margin:10px 0 0; color:var(--ink-2); font-size:0.96rem; line-height:1.55; }

  .promise{ display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;
    margin-top:34px; background:var(--bg-2); border:1px solid var(--line);
    border-left:3px solid var(--accent); border-radius:14px; padding:32px 36px; }
  .promise .k{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--accent); white-space:nowrap; }
  .promise p{ margin:0; font-family:var(--serif); font-weight:500;
    font-size:clamp(1.2rem,2.1vw,1.5rem); line-height:1.32; color:var(--ink); letter-spacing:-0.01em; }

  /* ---------- Tarif ---------- */
  .price-grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:48px; align-items:center; margin-top:54px; }
  .price-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:18px; padding:38px 40px; }
  .price-card .k{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--accent); }
  .price-card .price-from{ margin-top:18px; color:var(--ink-2); font-size:1rem; line-height:1; }
  .price-num{ font-family:var(--serif); font-weight:700; line-height:0.86;
    font-size:clamp(4.4rem, 11vw, 7.6rem); letter-spacing:-0.04em; color:var(--ink); margin:6px 0 4px; }
  .price-num .pct{ font-size:0.42em; font-weight:600; color:var(--accent); vertical-align:0.5em; margin-left:2px; }
  .price-card .unit{ color:var(--ink-2); font-size:1.02rem; }
  .incl{ list-style:none; margin:26px 0 0; padding:24px 0 0; border-top:1px solid var(--line); }
  .incl li{ display:flex; gap:12px; align-items:flex-start; padding:7px 0; color:var(--ink); font-size:0.99rem; }
  .incl li::before{ content:""; flex:0 0 auto; width:7px; height:7px; margin-top:8px;
    border-radius:2px; background:var(--accent); transform:rotate(45deg); }
  .price-side .fr{ font-family:var(--serif); font-weight:500;
    font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.22; letter-spacing:-0.01em; color:var(--ink); }
  .price-side .fr em{ font-style:normal; color:var(--accent); }
  .price-side .note{ margin-top:22px; color:var(--ink-2); max-width:36rem; font-size:1.04rem; }
  .price-side .actions{ margin-top:30px; }

  /* ---------- Contact ---------- */
  .contact{ text-align:center; }
  .contact .inner{ max-width:760px; margin:0 auto; }
  .contact h2{ font-size:clamp(2.3rem, 5vw, 4rem); line-height:1.02; letter-spacing:-0.025em; margin:0; }
  .contact .sub{ margin:24px auto 0; max-width:40rem; color:var(--ink-2); font-size:1.12rem; }
  .contact .actions{ margin-top:38px; display:flex; justify-content:center; }
  .route-note{ margin-top:44px; font-family:var(--mono); font-size:0.74rem;
    letter-spacing:0.1em; color:var(--ink-3); display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .route-note .a{ color:var(--accent); }

  /* ---------- FAQ ---------- */
  .faq{ margin-top:46px; border-top:1px solid var(--line); }
  .faq details{ border-bottom:1px solid var(--line); }
  .faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between;
    gap:28px; align-items:baseline; padding:24px 0; font-family:var(--serif); font-weight:500;
    font-size:clamp(1.08rem,1.7vw,1.34rem); line-height:1.3; color:var(--ink); letter-spacing:-0.01em; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::marker{ content:""; }
  .faq summary .sign{ flex:0 0 auto; font-family:var(--mono); font-size:1.3rem;
    color:var(--accent); line-height:1; transition:transform .28s ease; }
  .faq details[open] summary .sign{ transform:rotate(45deg); }
  .faq .ans{ padding:0 44px 26px 0; margin:0; color:var(--ink-2); font-size:1.02rem; line-height:1.62; max-width:62ch; }
  .faq .ans b{ color:var(--ink); font-weight:600; }

  /* ---------- Contact form ---------- */
  .cform{ max-width:680px; margin:36px auto 0; text-align:left; }
  .cform-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field{ display:flex; flex-direction:column; gap:7px; }
  .field.full{ grid-column:1 / -1; }
  .field label{ font-size:0.82rem; font-weight:600; color:var(--ink-2); }
  .field label .req{ color:var(--accent); }
  .field input, .field textarea{
    font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--bg-2);
    border:1px solid var(--line); border-radius:10px; padding:12px 14px; width:100%;
    transition:border-color .2s ease, background .2s ease; }
  .field textarea{ min-height:96px; resize:vertical; }
  .field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); background:#fff; }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .consent{ display:flex; gap:11px; align-items:flex-start; margin-top:16px; font-size:0.9rem; color:var(--ink-2); line-height:1.5; }
  .consent input{ margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--accent); }
  .consent a{ color:var(--accent); }
  .cform-foot{ display:flex; align-items:center; gap:20px; margin-top:22px; flex-wrap:wrap; }
  .cform-status{ font-size:0.95rem; }
  .cform-status.ok{ color:#1f7a4d; font-weight:600; }
  .cform-status.err{ color:#b3261e; font-weight:600; }
  .cform button[disabled]{ opacity:.55; cursor:default; }
  .cform-alt{ margin-top:18px; font-size:0.9rem; color:var(--ink-3); }
  .cform-alt a{ color:var(--accent); text-decoration:none; }
  @media (max-width:620px){ .cform-grid{ grid-template-columns:1fr; } }

  /* ---------- Footer ---------- */
  .site-footer{ border-top:1px solid var(--line); padding:56px 0 40px; }
  .foot-top{ display:flex; justify-content:space-between; gap:40px; align-items:flex-start; flex-wrap:wrap; }
  .foot-brand{ display:flex; align-items:center; gap:11px; font-family:var(--serif);
    font-weight:600; font-size:1.18rem; }
  .foot-brand img{ width:26px; height:26px; }
  .foot-tag{ margin-top:14px; color:var(--ink-2); max-width:30ch; font-size:0.98rem; }
  .foot-right{ text-align:right; }
  .foot-chain{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; color:var(--ink-2); }
  .foot-chain .a{ color:var(--accent); }
  .foot-links{ display:flex; gap:24px; justify-content:flex-end; margin-top:16px; }
  .foot-links a{ text-decoration:none; color:var(--ink-2); font-size:0.92rem; font-weight:500; }
  .foot-links a:hover{ color:var(--ink); }
  .foot-bottom{ display:flex; justify-content:space-between; gap:20px 28px; flex-wrap:wrap;
    align-items:center; margin-top:44px; padding-top:24px; border-top:1px solid var(--line);
    color:var(--ink-3); font-size:0.86rem; }
  .foot-legal{ display:flex; gap:22px; }
  .foot-legal a{ text-decoration:none; color:var(--ink-3); }
  .foot-legal a:hover{ color:var(--ink); }

  /* ---------- Reveal ---------- */
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }

  /* ---------- Responsive ---------- */
  @media (max-width:960px){
    .hero-grid{ grid-template-columns:1fr; gap:18px; }
    .hero-globe{ order:2; max-width:520px; margin:6px auto 0; }
    .constat-grid{ grid-template-columns:1fr; gap:40px; }
    .price-grid{ grid-template-columns:1fr; gap:36px; }
    .pillars{ grid-template-columns:repeat(2,1fr); }
  }
  /* ---------- Hamburger / Mobile nav ---------- */
  .ham-btn{
    display:none; background:none; border:none; cursor:pointer;
    padding:8px; margin-left:auto; color:var(--ink);
    flex-direction:column; justify-content:center; gap:5px;
  }
  .ham-btn span{ display:block; width:22px; height:2px; background:currentColor;
    border-radius:2px; transition:transform .25s, opacity .25s; }
  .ham-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .ham-btn.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
  .ham-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mob-menu{
    display:none; position:fixed; top:74px; left:0; right:0; z-index:59;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:8px 18px 24px; flex-direction:column;
    box-shadow:0 12px 32px rgba(12,27,42,0.10);
  }
  .mob-menu.open{ display:flex; }
  .mob-menu nav{ display:flex; flex-direction:column; }
  .mob-menu nav a{
    padding:14px 0; color:var(--ink); text-decoration:none;
    font-weight:500; font-size:1.05rem; border-bottom:1px solid var(--line);
    transition:color .2s;
  }
  .mob-menu nav a:last-child{ border-bottom:none; }
  .mob-menu nav a:hover{ color:var(--accent); }
  .mob-menu .mob-cta{ margin-top:18px; }
  .mob-menu .mob-cta .btn{ width:100%; justify-content:center; }

  @media (max-width:760px){
    body{ font-size:16px; }
    .nav-links{ display:none; }
    .nav-cta{ display:none; }
    .ham-btn{ display:flex; }
    /* en-tête compact */
    .site-header .shell{ padding-left:18px; padding-right:18px; }
    .hero{ padding-top:112px; }
    .hero-globe{ max-width:360px; }
    .value-row{ grid-template-columns:1fr; }
    .value-item{ border-left:none; border-top:1px solid var(--line); padding:18px 0; }
    .value-item:first-child{ border-top:none; padding-top:6px; }

    /* chain -> vertical */
    .chain{ grid-template-columns:1fr; }
    .node{ border-top:none; border-left:1px solid var(--line); text-align:left;
      padding:0 0 30px 30px; }
    .node:last-child{ padding-bottom:0; }
    .node::before{ top:2px; left:-7px; transform:none; }
    .node.hub{ border-top:none; border-left-color:var(--accent); }
    .node.hub .lbl{ display:none; }
    .hub-pill{ position:relative; top:0; left:0; transform:none; display:inline-block; }
    .node .desc{ padding:0; }

    /* steps -> vertical */
    .steps{ grid-template-columns:1fr; }
    .step{ border-top:none; border-left:1px solid var(--line); padding:0 0 28px 30px; }
    .step:last-child{ padding-bottom:0; }
    .step::before{ top:2px; left:-7px; }

    .promise{ grid-template-columns:1fr; gap:14px; }
    .foot-top{ flex-direction:column; }
    .foot-right{ text-align:left; }
    .foot-links{ justify-content:flex-start; }
    .foot-chain .seg{ display:block; }
  }
  @media (max-width:520px){
    .pillars{ grid-template-columns:1fr; }
  }

  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .btn,.link .ar,.btn .ar{ transition:none; }
  }