/* FlyHome24 — feuille de style partagée par toutes les pages */
  :root{
    /* Fond sombre premium */
    --paper:rgba(255,255,255,.06);        /* surface carte translucide */
    --paper-dim:rgba(255,255,255,.10);    /* surface carte plus marquée */
    --ink:#F4FFFD;                        /* texte principal clair */
    --ink-soft:#D0D7D8;                   /* texte secondaire */
    --line:rgba(255,255,255,.08);         /* bordures fines */
    --beam:#68F2D5;                       /* accent turquoise */
    --beam-deep:#68F2D5;
    --beam-ink:#052220;                   /* texte sur turquoise */
    --road:#041011;
    --go:#68F2D5;
    --go-soft:rgba(104,242,213,.16);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:'Inter',system-ui,sans-serif;
    background:
      radial-gradient(circle at 20% 8%, rgba(104,242,213,.38), transparent 34%),
      radial-gradient(circle at 82% 18%, rgba(141,220,255,.28), transparent 32%),
      radial-gradient(circle at 50% 100%, rgba(104,242,213,.14), transparent 40%),
      linear-gradient(135deg, #0a2a2c, #12403f 55%, #0c2c2e);
    background-attachment:fixed;
    color:var(--ink);
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100vh;
    margin:0;
  }
  .device{
    width:100%;
    max-width:480px;
    min-height:100vh;
    background:transparent;
    overflow:hidden;
    position:relative;
    display:flex;
    flex-direction:column;
  }
  .statusbar{display:none}

  .screens{flex:1;position:relative;overflow:hidden}
  .screen{
    position:absolute;inset:0;
    display:flex;flex-direction:column;
    background:transparent;
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.65,0,.35,1), visibility 0s linear .45s;
    overflow-y:auto;
    /* RÈGLE ANTI-SUPERPOSITION : par défaut un écran non actif est
       masqué à la lecture et non cliquable. Seul .active le réactive.
       La visibilité ne se coupe qu'APRÈS l'animation (délai .45s) pour
       garder les transitions fluides sans jamais superposer deux pages. */
    visibility:hidden;
    pointer-events:none;
    z-index:0;
  }
  .screen.active{transform:translateX(0);visibility:visible;pointer-events:auto;z-index:2;transition:transform .45s cubic-bezier(.65,0,.35,1), visibility 0s}
  .screen.left{transform:translateX(-100%);visibility:visible;pointer-events:none;z-index:1;transition:transform .45s cubic-bezier(.65,0,.35,1), visibility 0s linear .45s}

  .topline{display:flex;align-items:center;justify-content:space-between;padding:calc(40px + env(safe-area-inset-top,0px)) 22px 14px}
  .brand{display:flex;align-items:center}
  .brand .logo-mark{height:clamp(34px,3.4vw,46px);width:auto;display:block;overflow:visible}
  .iconbtn{width:38px;height:38px;border-radius:12px;background:var(--paper);border:1.5px solid var(--line);display:grid;place-items:center;font-size:16px;color:var(--ink)}

  .topline-right{display:flex;align-items:center;gap:8px;position:relative}
  .lang-btn{height:34px;padding:0 10px;border-radius:11px;background:var(--paper);border:1.5px solid var(--line);display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink)}
  .lang-btn .flag{font-size:14px;line-height:1}

  .lang-menu{
    position:absolute;top:42px;right:48px;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;
    padding:6px;display:none;flex-direction:column;gap:2px;min-width:128px;box-shadow:0 14px 28px rgba(0,0,0,.14);z-index:60;
  }
  .lang-menu.open{display:flex}
  .lang-opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink)}
  .lang-opt:hover{background:var(--paper-dim)}
  .lang-opt.on{background:var(--beam);color:var(--beam-ink)}
  .lang-opt .flag{font-size:15px}

  /* --- Menu déroulant (en-tête de l'accueil) --- */
  .acct-btn{cursor:pointer;padding:0;font-family:inherit;appearance:none;-webkit-appearance:none;position:relative}
  .acct-btn .burger line{transition:transform .25s ease,opacity .2s ease;transform-box:fill-box;transform-origin:center}
  .acct-btn.open .burger .b1{transform:translateY(5px) rotate(45deg)}
  .acct-btn.open .burger .b2{opacity:0}
  .acct-btn.open .burger .b3{transform:translateY(-5px) rotate(-45deg)}
  .acct-btn:focus-visible,.acct-item:focus-visible,.voyage-back:focus-visible,.voyage-new:focus-visible,.voyage-send:focus-visible{outline:2px solid var(--beam);outline-offset:2px}
  .acct-menu{position:absolute;top:46px;right:0;z-index:70;min-width:236px;padding:8px;border-radius:18px;
    background:rgba(12,44,46,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1.5px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);
    display:flex;flex-direction:column;gap:2px;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.98);transform-origin:top right;
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
  .acct-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .18s ease,transform .18s ease,visibility 0s}
  .acct-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:none;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:600;text-align:left}
  .acct-item:hover,.acct-item:active{background:rgba(255,255,255,.07)}
  .acct-ic{width:38px;height:38px;border-radius:12px;background:var(--paper);border:1.5px solid var(--line);display:grid;place-items:center;flex:0 0 auto}
  .acct-label{flex:1}
  .acct-pill{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--beam);color:var(--beam-ink);font-size:11.5px;font-weight:800;align-items:center;justify-content:center;font-family:'Space Grotesk'}

  /* --- FlyHome Voyage (interface de chat) --- */
  body[data-screen="s7"] .dots{display:none}
  body[data-screen="s7"] .device{height:100vh;height:100dvh;min-height:0}
  #s7{overflow:hidden;padding-bottom:0}
  .voyage-head{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 12px;border-bottom:1px solid var(--line)}
  .voyage-back,.voyage-new{width:38px;height:38px;border-radius:12px;background:var(--paper);border:1.5px solid var(--line);display:grid;place-items:center;color:var(--ink);cursor:pointer;padding:0;font-family:inherit;font-size:16px;flex:0 0 auto}
  .voyage-title{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
  .voyage-title b{font-family:'Space Grotesk';font-size:16px;display:block;line-height:1.2}
  .voyage-title .sub{font-size:12px;color:var(--ink-soft);display:block}
  .voyage-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px 8px}
  .voyage-inner{max-width:820px;margin:0 auto;width:100%;display:flex;flex-direction:column;min-height:100%}
  .voyage-welcome{margin:auto 0;text-align:center;padding:12px 0 24px}
  .voyage-hero-ic{width:72px;height:72px;margin:0 auto 14px;border-radius:22px;background:var(--go-soft);border:1.5px solid rgba(104,242,213,.3);display:grid;place-items:center}
  .voyage-welcome h2{font-family:'Space Grotesk';font-size:24px;letter-spacing:-.4px;margin-bottom:6px}
  .voyage-welcome p{font-size:14px;color:var(--ink-soft);line-height:1.5;max-width:420px;margin:0 auto}
  .voyage-sugg{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px;text-align:left}
  .voyage-sugg button{padding:13px 15px;border-radius:14px;background:var(--paper);border:1.5px solid var(--line);color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;line-height:1.35;transition:background .2s,border-color .2s}
  .voyage-sugg button:hover{background:var(--paper-dim);border-color:rgba(104,242,213,.35)}
  .vmsg{display:flex;gap:10px;margin-bottom:16px;animation:vmsgIn .25s ease}
  .vmsg.user{justify-content:flex-end}
  .vmsg .vbubble{max-width:82%;padding:11px 15px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
  .vmsg.user .vbubble{background:var(--beam);color:var(--beam-ink);border-radius:18px 18px 4px 18px;font-weight:500}
  .vmsg.bot .vavatar{width:32px;height:32px;border-radius:10px;background:var(--paper);border:1.5px solid var(--line);display:grid;place-items:center;flex:0 0 auto}
  .vmsg.bot .vbubble{background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:4px 18px 18px 18px}
  .vtyping{display:inline-flex;gap:5px;align-items:center;height:22px}
  .vtyping i{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);animation:vdot 1.2s infinite ease-in-out}
  .vtyping i:nth-child(2){animation-delay:.15s}
  .vtyping i:nth-child(3){animation-delay:.3s}
  @keyframes vdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
  @keyframes vmsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .voyage-composer{flex:0 0 auto;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .voyage-composer-inner{max-width:820px;margin:0 auto}
  .voyage-field{display:flex;align-items:flex-end;gap:8px;background:var(--paper);border:1.5px solid var(--line);border-radius:22px;padding:6px 6px 6px 16px;transition:border-color .2s}
  .voyage-field:focus-within{border-color:var(--beam)}
  .voyage-field textarea{flex:1;background:transparent;border:none;outline:none;resize:none;color:var(--ink);font-family:inherit;font-size:16px;line-height:1.45;max-height:140px;padding:9px 0;min-height:24px}
  .voyage-field textarea::placeholder{color:var(--ink-soft);opacity:.7}
  .voyage-send{width:40px;height:40px;border-radius:50%;background:var(--beam);color:var(--beam-ink);border:none;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:opacity .2s,transform .15s}
  .voyage-send:disabled{opacity:.35;cursor:default}
  .voyage-send:not(:disabled):active{transform:scale(.94)}
  .voyage-note{text-align:center;font-size:11.5px;color:var(--ink-soft);margin-top:8px}
  @media (min-width:768px){ .voyage-sugg{grid-template-columns:repeat(3,1fr)} }
  @media (min-width:1024px){ #s7{height:100vh;height:100dvh} }

  /* logo animation */
  #logo-fly{ animation:flyTextIn .5s cubic-bezier(.3,.7,.3,1) .2s both; }
  #logo-home-text{ animation:flyTextIn .5s cubic-bezier(.3,.7,.3,1) .38s both; }
  #logo-24{ animation:flyTextIn .5s cubic-bezier(.3,.7,.3,1) .56s both; }
  #logo-plane-icon{ animation:planeIconIn .6s cubic-bezier(.3,.7,.3,1) .72s both; }

  @keyframes planeIconIn{
    from{opacity:0;transform:translate(120px,24px) rotate(-15deg) scale(0.4)}
    100%{opacity:1;transform:translate(136px,12px) rotate(-15deg) scale(1.05)}
  }
    100%{opacity:1;transform:translate(133px,14px) rotate(0deg) scale(0.85)}
  }
  @keyframes flyTextIn{
    from{opacity:0;transform:translateY(6px)}
    70%{opacity:1}
    100%{opacity:1;transform:translateY(0)}
  }

  .post-row{margin:34px 22px 0;display:flex;gap:12px}
  .home-driver-note{margin:22px 22px 4px;font-size:clamp(13px,1vw,14.5px);font-weight:500;line-height:1.55;color:var(--ink-soft)}
  .post-btn{
    flex:1;padding:20px 16px;border-radius:20px;border:1.5px solid var(--line);background:var(--paper);
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;cursor:pointer;
  }
  .post-btn .pb-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:19px}
  .post-btn.drive .pb-ic{background:var(--beam);color:var(--beam-ink)}
  .post-btn.pass .pb-ic{background:var(--beam);color:var(--beam-ink)}
  .post-btn b{font-size:15.5px;font-weight:700}
  .post-btn span{font-size:12.5px;color:var(--ink-soft)}

  .eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
  .back{display:flex;align-items:center;gap:10px;padding:calc(24px + env(safe-area-inset-top,0px)) 22px 4px;cursor:pointer}
  .back .arrow{width:34px;height:34px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;background:var(--paper)}
  button, .tap{font-family:inherit;border:none;cursor:pointer}

  /* En-tête de marque réutilisable (logo + slogan) sur les pages secondaires */
  .page-brand{padding:calc(40px + env(safe-area-inset-top,0px)) 22px 0;display:flex;flex-direction:column;align-items:flex-start}
  .page-brand .logo-mark{height:clamp(34px,3.4vw,46px);width:auto;display:block;overflow:visible}
  .page-brand .page-slogan{font-family:'Space Grotesk';margin:32px 0 8px;letter-spacing:-.6px;line-height:1.12}
  .page-brand .page-slogan .s-line1{font-size:clamp(22px,2.4vw,30px);font-weight:700;color:var(--ink)}
  .page-brand .page-slogan .s-line2{display:block;margin-top:6px;font-size:clamp(19px,2vw,26px);font-weight:600;letter-spacing:-.4px;line-height:1.2;color:var(--beam)}

  /* SCREEN 1 */
  #s1 .hero{padding:18px 22px 8px;text-align:left;display:flex;flex-direction:column;align-items:flex-start}
  #s1 h1{font-family:'Space Grotesk';font-size:clamp(23.1px,6.09vw,32.9px);line-height:1.16;letter-spacing:-.5px;font-weight:700;margin:10px 0 0}
  #s1 h1 .h1-line1{color:var(--ink)}
  #s1 h1 .h1-line2{color:var(--beam);display:inline-block;margin-top:16px}
  .hero-subtitle{font-size:clamp(13px,1vw,14.5px);font-weight:500;line-height:1.45;letter-spacing:-.1px;color:var(--ink);margin:22px 22px 0;max-width:640px}
  .home-desc-text{margin:32px 22px 4px;font-size:clamp(13px,1vw,14.5px);font-weight:400;line-height:1.55;color:var(--ink-soft)}
  #s1 .sub{color:var(--ink-soft);font-size:14.5px;line-height:1.5;max-width:280px;margin-bottom:22px;text-align:center}

  .route-card{
    margin:0 22px;padding:18px;border-radius:22px;
    background:var(--road);color:#fff;position:relative;overflow:hidden;
  }
  .route-card svg{position:absolute;right:-10px;top:-10px;width:160px;opacity:.5}
  .route-card .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.15);color:var(--beam);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;margin-bottom:14px}
  .route-card .cities{font-family:'Space Grotesk';font-size:20px;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:6px}
  .route-card .cities .seg{color:var(--beam)}
  .route-card .meta{font-size:13px;color:#cfcac2}

  .field{
    margin:18px 22px 0;padding:16px 18px;border-radius:18px;
    background:var(--paper);border:1.5px solid var(--line);
    display:flex;align-items:center;gap:12px;
  }
  .field .ic{font-size:18px}
  .field input{flex:1;border:none;background:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);outline:none}
  .field input::placeholder{color:#6d8b86;font-weight:500}

  .map-preview{
    margin:10px 22px 0;height:108px;border-radius:18px;background:var(--paper-dim);
    border:1.5px solid var(--line);position:relative;overflow:hidden;cursor:pointer;
  }
  .map-preview svg{position:absolute;inset:0;width:100%;height:100%}
  .map-preview-pin{position:absolute;font-size:10.5px;font-weight:700;background:var(--paper);border:1px solid var(--line);padding:4px 8px;border-radius:8px}
  .map-preview-pin.a{left:12px;top:10px}
  .map-preview-pin.b{right:12px;bottom:10px;color:var(--go)}
  .map-preview-badge{position:absolute;left:12px;bottom:10px;font-size:10.5px;font-weight:700;color:var(--beam-ink);background:var(--beam);padding:4px 9px;border-radius:8px}

  .cta-main{
    margin:26px 22px 0;padding:17px;border-radius:18px;
    background:var(--beam);color:var(--beam-ink);font-weight:700;font-size:15.5px;
    text-align:center;box-shadow:0 14px 26px rgba(94,234,212,.45);
    display:flex;align-items:center;justify-content:center;gap:8px;
  }

  .section-label{margin:28px 22px 12px;display:flex;align-items:baseline;justify-content:space-between}
  .section-label h2{font-family:'Space Grotesk';font-size:17px;font-weight:600}
  .section-label span{font-size:12.5px;color:var(--ink-soft)}

  .switch-row{margin:0 22px;display:flex;gap:8px;padding:4px;background:var(--paper-dim);border-radius:14px}
  .pub-section-title{font-family:'Space Grotesk';font-size:clamp(21px,2.2vw,28px);font-weight:700;color:var(--go);margin:10px 22px 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  #pub-section-passenger{margin-top:28px}
  .switch-row .opt{flex:1;text-align:center;padding:10px 0;border-radius:11px;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
  .switch-row .opt.on{background:var(--beam);color:var(--beam-ink)}

  .driver-strip{margin:14px 22px 22px;padding:15px;border-radius:18px;border:1.5px solid var(--line);background:var(--paper);display:flex;gap:13px;align-items:center}
  .driver-strip .avatar{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#68f2d5,#8ddcff);flex:0 0 auto;display:grid;place-items:center;font-size:17px}
  .driver-strip .who{flex:1;min-width:0}
  .driver-strip .who b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .driver-strip .who span{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .driver-strip .when{font-size:12px;font-weight:700;color:var(--go);background:var(--go-soft);padding:5px 9px;border-radius:8px;flex:0 0 auto;white-space:nowrap;text-align:right;line-height:1.35}

  /* SCREEN 2 */
  #s2 h1{font-family:'Space Grotesk';font-size:23px;letter-spacing:-.5px;padding:4px 22px 2px}
  #s2 .sub{padding:0 22px;color:var(--ink-soft);font-size:13.5px;margin-bottom:16px}

  .map-strip{
    margin:0 22px;height:148px;border-radius:20px;background:var(--paper-dim);
    border:1px solid var(--line);position:relative;overflow:hidden;
  }
  .map-strip svg{position:absolute;inset:0;width:100%;height:100%}
  .map-pin{position:absolute;font-size:11px;font-weight:700;background:var(--paper);border:1px solid var(--line);padding:4px 8px;border-radius:8px}
  .map-pin.a{left:14px;top:14px}
  .map-pin.b{right:14px;bottom:14px;color:var(--go)}

  .results-head{display:flex;align-items:center;justify-content:space-between;margin:18px 22px 10px}
  .results-head h2{font-family:'Space Grotesk';font-size:15px;font-weight:600}
  .results-head .count{font-size:12.5px;color:var(--ink-soft)}

  .ride-card{
    margin:0 22px 12px;padding:16px;border-radius:20px;border:1px solid var(--line);background:var(--paper);
    display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:border-color .2s, box-shadow .2s;
  }
  .ride-card:active{transform:scale(.99)}
  .ride-card.featured{border:1.5px solid var(--beam);box-shadow:0 12px 24px rgba(0,0,0,.3)}
  .rc-top{display:flex;align-items:center;justify-content:space-between}
  .rc-route{font-family:'Space Grotesk';font-size:15px;font-weight:600}
  .rc-price{font-family:'Space Grotesk';font-size:18px;font-weight:700;color:var(--go);text-align:right}
  .rc-price-sub{font-size:11px;font-weight:500;color:var(--ink-soft);margin-top:1px}
  .rc-meta{display:flex;gap:14px;font-size:12.5px;color:var(--ink-soft)}
  .rc-meta b{color:var(--ink)}
  .rc-band{height:6px;border-radius:99px;background:linear-gradient(90deg, var(--beam) 0%, var(--beam) var(--fit,70%), var(--paper-dim) var(--fit,70%));position:relative}
  .rc-fit{font-size:11px;color:var(--ink-soft);display:flex;justify-content:space-between}

  /* SCREEN 3 */
  #s3 .confirm-top{padding:18px 22px 6px;text-align:left}
  #s3 .check{width:52px;height:52px;border-radius:16px;background:var(--go-soft);display:grid;place-items:center;font-size:24px;margin-bottom:14px}
  #s3 h1{font-family:'Space Grotesk';font-size:25px;letter-spacing:-.5px;margin-bottom:5px}
  #s3 .sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:18px}

  .ticket{
    margin:0 22px;background:var(--paper);color:var(--ink);border:1.5px solid var(--line);border-radius:22px;padding:20px;position:relative;backdrop-filter:blur(6px);
  }
  .ticket .row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
  .ticket .row b{font-family:'Space Grotesk';font-size:16px;flex:1;min-width:0}
  .ticket .row span{font-size:12px;color:var(--ink-soft);flex:0 0 auto}
  .trail{position:relative;padding:6px 0 6px 18px;margin:10px 0 16px}
  .trail:before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(0deg,var(--ink) 0 4px,transparent 4px 8px)}
  .trail .pt{position:relative;margin-bottom:18px}
  .trail .pt:last-child{margin-bottom:0}
  .trail .pt:before{content:"";position:absolute;left:-18px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--beam);box-shadow:0 0 0 4px rgba(0,0,0,.12)}
  .trail .pt.end:before{background:var(--go);box-shadow:0 0 0 4px rgba(0,0,0,.12)}
  .trail .pt b{display:block;font-size:14px;font-family:'Space Grotesk'}
  .trail .pt span{font-size:11.5px;color:var(--ink-soft)}
  .ticket-divider{border-top:1.5px dashed var(--line);margin:6px 0 16px;position:relative}
  .ticket-divider:before, .ticket-divider:after{content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:#08272a}
  .ticket-divider:before{left:-32px}
  .ticket-divider:after{right:-32px}
  .ticket .total{display:flex;align-items:baseline;justify-content:space-between}
  .ticket .total span{font-size:12.5px;color:var(--ink-soft)}
  .ticket .total b{font-family:'Space Grotesk';font-size:26px;color:var(--beam-deep)}

  .driver-card{margin:18px 22px 0;padding:15px;border-radius:18px;border:1px solid var(--line);display:flex;align-items:center;gap:12px}
  .driver-card .avatar{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#68f2d5,#8ddcff);display:grid;place-items:center;font-size:19px}
  .driver-card .who b{display:block;font-size:14.5px}
  .driver-card .who span{font-size:12px;color:var(--ink-soft)}
  .driver-card .msg{margin-left:auto;width:38px;height:38px;border-radius:12px;background:var(--paper-dim);display:grid;place-items:center;font-size:15px}

  .confirm-cta{margin:20px 22px 22px;padding:17px;border-radius:18px;background:var(--beam);color:var(--beam-ink);font-weight:700;font-size:15px;text-align:center}

  /* SCREEN 4 */
  #s4 h1{font-family:'Space Grotesk';font-size:23px;letter-spacing:-.5px;padding:18px 22px 2px}
  #s4 .sub{padding:0 22px;color:var(--ink-soft);font-size:13.5px;margin-bottom:18px}

  .role-switch{margin:0 22px 22px;display:flex;gap:8px;padding:4px;background:var(--paper);border:1.5px solid var(--line);border-radius:14px}
  .role-switch .ropt{flex:1;text-align:center;padding:11px 0;border-radius:11px;font-size:13.5px;font-weight:700;color:var(--ink-soft);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
  .role-switch .ropt.on{background:var(--beam);color:var(--beam-ink)}

  .form-block{margin:0 22px 16px}
  .form-block.gap-top{margin-top:40px}
  .form-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;display:block}
  .form-row{display:flex;gap:10px}
  .form-input{
    flex:1;padding:14px 16px;border-radius:15px;border:1.5px solid var(--line);background:var(--paper);
    display:flex;align-items:center;gap:10px;margin-bottom:10px;
  }
  .form-input .ic{font-size:16px}
  .form-input input, .form-input select{flex:1;border:none;background:none;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);outline:none;width:100%}
  .form-input select option, .canton-select option{background:#0a2528;color:#f4fffd}
  .form-input input::placeholder{color:#6d8b86;font-weight:500}

  .stepper{display:flex;align-items:center;justify-content:space-between;padding:6px 4px}
  .stepper .sbtn{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);font-size:17px;font-weight:700;display:grid;place-items:center;cursor:pointer}
  .stepper .sval{font-family:'Space Grotesk';font-size:16px;font-weight:700}

  .flex-tags{display:flex;gap:8px;flex-wrap:wrap}
  .flex-tag{padding:9px 14px;border-radius:12px;border:1.5px solid var(--line);font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer}
  .flex-tag.on{border-color:var(--beam-deep);background:var(--beam);color:var(--beam-ink)}
  .price-card{background:color-mix(in srgb,var(--beam) 12%,transparent);border:1.5px solid var(--beam);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
  .price-card-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink-soft)}
  .price-card-row b{font-size:17px;font-weight:700;color:var(--ink)}
  .price-card-total{padding-top:8px;border-top:1px solid color-mix(in srgb,var(--beam) 40%,transparent)}
  .price-card-total b{font-size:20px;color:var(--beam-deep)}
  .price-card-note{font-size:11px;color:var(--ink-soft);text-align:center;margin-top:2px}
  .canton-select{flex:1;border:none;background:transparent;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);outline:none;cursor:pointer}
  .canton-select option{background:#0a2528;color:#f4fffd}

  .post-preview{
    margin:4px 22px 18px;padding:16px;border-radius:18px;background:var(--paper-dim);border:1px dashed var(--line);
  }
  .post-preview .pp-label{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
  .post-preview .pp-route{font-family:'Space Grotesk';font-size:15px;font-weight:600;margin-bottom:4px}
  .post-preview .pp-meta{font-size:12.5px;color:var(--ink-soft)}

  .publish-cta{margin:6px 22px 22px;padding:17px;border-radius:18px;background:var(--beam);color:var(--beam-ink);font-weight:700;font-size:15.5px;text-align:center;cursor:pointer;box-shadow:0 14px 26px rgba(94,234,212,.45)}
  /* Espace en bas de chaque page (footer) */
  .page-bottom-space{height:64px;flex:0 0 auto}
  #s4-results-wrap .ride-card{margin-left:22px;margin-right:22px}

  .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:40;pointer-events:none}
  .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25)}
  .dots i.on{background:var(--beam);width:16px;border-radius:4px}


  .concept{
    margin:34px 22px 28px;padding:6px 0 0;
    background:transparent;border:none;
  }
  .concept h2{font-family:'Space Grotesk';font-size:21px;font-weight:700;letter-spacing:-.4px;color:var(--ink);margin-bottom:12px}
  .concept p{font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
  .concept-intro{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin-bottom:20px}
  .steps{display:flex;flex-direction:column;gap:14px}
  .step-card{
    display:flex;gap:14px;align-items:flex-start;
    padding:16px;border-radius:18px;
    background:var(--paper);border:1px solid var(--line);
    backdrop-filter:blur(8px);position:relative;overflow:hidden;
  }
  .step-card:before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:linear-gradient(180deg,var(--beam),transparent);
  }
  .step-ic{
    flex:0 0 auto;width:46px;height:46px;border-radius:14px;
    background:var(--go-soft);display:grid;place-items:center;font-size:22px;
    border:1px solid rgba(104,242,213,.25);
  }
  .step-body{flex:1}
  .step-num{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--beam);margin-bottom:3px}
  .step-body h3{font-family:'Space Grotesk';font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:4px}
  .step-body p{font-size:13px;line-height:1.5;color:var(--ink-soft)}

  /* AUTH MODAL */
  .modal-overlay{
    position:absolute;inset:0;background:rgba(17,17,17,.55);z-index:200;
    display:none;align-items:flex-end;justify-content:center;
    padding:0;border-radius:37px;
  }
  .modal-overlay.open{display:flex}
  .modal-sheet{
    width:100%;background:linear-gradient(160deg,#0a2528,#061a1c);border-radius:28px 28px 0 0;border-top:1px solid rgba(104,242,213,.2);
    padding:26px 24px 30px;position:relative;max-height:85%;overflow-y:auto;
    animation:sheetUp .35s cubic-bezier(.65,0,.35,1);
  }
  @keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
  .modal-handle{width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 18px}
  .modal-close{position:absolute;top:20px;right:20px;width:32px;height:32px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);display:grid;place-items:center;font-size:14px;cursor:pointer}
  .modal-title{font-family:'Space Grotesk';font-size:22px;font-weight:700;letter-spacing:-.5px;margin-bottom:6px}
  .modal-sub{font-size:13.5px;color:var(--ink-soft);margin-bottom:22px}

  /* --- Confirmation de rencontre : accordéon discret au-dessus de la saisie --- */
  .meet-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;margin-top:10px;border-radius:13px;background:var(--paper);border:1px solid var(--line);cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-soft);transition:background .2s,color .2s}
  .meet-bar:hover{background:var(--paper-dim);color:var(--ink)}
  .meet-bar .meet-chevron{font-size:10px;transition:transform .25s;opacity:.7}
  .meet-bar.open .meet-chevron{transform:rotate(180deg)}
  .meet-panel{margin-top:10px;border-radius:15px;padding:20px 18px;background:var(--paper);border:1px solid var(--line);text-align:center;animation:meetPanelIn .25s ease}
  @keyframes meetPanelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  .meet-panel .meet-head{font-family:'Space Grotesk';font-weight:700;font-size:15px;color:var(--ink);margin-bottom:10px;text-align:center}
  .meet-panel .meet-text{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:18px;text-align:center}
  .meet-panel .meet-actions{display:flex;flex-direction:column;gap:9px;align-items:center}
  .meet-panel .meet-btn{width:100%;max-width:300px;text-align:center;padding:12px 14px;border-radius:12px;background:var(--beam);color:var(--beam-ink);font-weight:700;font-size:13px;cursor:pointer;border:none;font-family:inherit;transition:opacity .2s}
  .meet-panel .meet-btn.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
  .meet-panel .meet-btn.ghost:hover{color:var(--ink);background:var(--paper-dim)}
  .meet-panel .meet-btn:disabled,.meet-panel .meet-btn.done{opacity:.5;cursor:default;pointer-events:none}
  .meet-panel .meet-waiting{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:14px;line-height:1.6}
  /* Message système dans le chat (distinct des bulles classiques) */
  .chat-system{align-self:center;max-width:90%;text-align:center;font-size:12px;color:var(--ink-soft);background:var(--paper-dim);border:1px dashed var(--line);padding:8px 14px;border-radius:12px;line-height:1.45}

  .auth-choice{display:flex;flex-direction:column;gap:12px}
  .auth-choice-btn{padding:17px;border-radius:16px;font-weight:700;font-size:15px;text-align:center;cursor:pointer}
  .auth-choice-btn.primary{background:var(--beam);color:var(--beam-ink);box-shadow:0 14px 26px rgba(94,234,212,.4)}
  .auth-choice-btn.secondary{background:rgba(255,255,255,.06);color:var(--ink);border:1.5px solid var(--line)}

  .auth-form{display:flex;flex-direction:column;gap:12px}
  .auth-error{font-size:12.5px;color:#ff7b7b;display:none;margin-top:-4px}
  .auth-error.show{display:block}
  .auth-submit{margin-top:6px;padding:17px;border-radius:16px;background:var(--beam);color:var(--beam-ink);font-weight:700;font-size:15px;text-align:center;cursor:pointer;box-shadow:0 14px 26px rgba(94,234,212,.4)}
  .auth-switch{text-align:center;margin-top:16px;font-size:13px;color:var(--ink-soft)}
  .auth-switch b{color:var(--ink);cursor:pointer;text-decoration:underline}
  .auth-back{display:flex;align-items:center;gap:8px;margin-bottom:16px;cursor:pointer}
  .auth-back .arrow{width:30px;height:30px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;font-size:14px}
  #auth-step-done .check{width:52px;height:52px;border-radius:16px;background:var(--go-soft);display:grid;place-items:center;font-size:24px}
  @keyframes matchPop{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}}
  .pay-opt{padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .15s}
  .pay-opt.on{border-color:var(--beam);background:var(--go-soft)}
  /* ============================================================
   * RESPONSIVE — TABLETTE & DESKTOP
   * ------------------------------------------------------------
   * Le rendu mobile (ci-dessus) reste inchangé sous 768px.
   * Au-delà, on élargit le conteneur et on réorganise les
   * composants pour exploiter l'espace horizontal, sans toucher
   * à l'identité visuelle (couleurs, cartes, turquoise, arrondis).
   * ============================================================ */

  /* ---- TABLETTE (≥ 768px) : conteneur plus large, grilles à 2 colonnes ---- */
  @media (min-width: 768px){
    .device{ max-width: 720px; }

    /* Boutons "proposer / chercher" côte à côte, plus généreux */
    .post-row{ gap:16px; }
    .post-btn{ padding:22px 20px; }

    /* Les 3 étapes du concept sur une grille */
    .steps{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

    /* Publications sur 2 colonnes */
    #pub-list-driver, #pub-list-passenger, #home-pub-list{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
    #pub-list-driver > div, #pub-list-passenger > div, #home-pub-list > div{ margin-left:22px; margin-right:22px; }
  }

  /* ---- DESKTOP (≥ 1024px) : vraie disposition web ---- */
  @media (min-width: 1024px){
    /* CORRECTION DÉFILEMENT : sur desktop, le scroll se fait au niveau
       de la page. On libère la hauteur verrouillée et on retire les
       overflow:hidden qui coupaient le bas des formulaires/pages. */
    html, body{ height:auto; min-height:100vh; overflow-y:auto; }
    body{ padding:0; align-items:flex-start; }

    /* Conteneur large et centré, avec une hauteur naturelle (scroll de page) */
    .device{
      max-width: 1120px;
      width: 100%;
      min-height: 100vh;
      height: auto;
      overflow: visible;   /* ne coupe plus le contenu qui dépasse */
      margin: 0 auto;
      padding: 0 32px;
    }

    /* On sort du paradigme "écrans qui glissent" : chaque écran actif
       occupe le flux normal, centré, sans position absolue.
       (Le JS continue de fonctionner : seul .active est affiché.) */
    .screens{ overflow: visible; }
    .screen{
      position: static;
      inset: auto;
      transform: none !important;
      transition: opacity .25s ease;
      visibility: visible;
      pointer-events: auto;
      min-height: auto;
      overflow-y: visible;
      display: none;
      opacity: 0;
      padding-bottom: 60px;
    }
    .screen.active{
      display: flex;
      opacity: 1;
      transform: none !important;
    }
    .screen.left{ display: none; }
    .dots{ display:none; } /* indicateur mobile inutile sur desktop */

    /* --- Barre de marque / navigation en pleine largeur --- */
    .topline{ max-width: 100%; padding:40px 8px 10px; }
    .page-brand{ padding:40px 8px 0; }
    .back{ padding:24px 8px 4px; }

    /* --- ACCUEIL : hero large --- */
    #s1 .hero{ padding:24px 8px 8px; max-width:720px; align-self:center; width:100%; align-items:stretch; text-align:center; }
    #s1 h1{ max-width:720px; font-size:clamp(30.1px,2.835vw,42.7px); }
    .hero-subtitle{ align-self:center; width:100%; max-width:680px; margin-left:0; margin-right:0; text-align:center; }
    .home-desc-text{ align-self:center; width:100%; max-width:680px; margin-left:0; margin-right:0; text-align:center; }

    /* Boutons d'action plus larges mais bornés */
    .post-row{ padding-left:8px; padding-right:8px; max-width:720px; align-self:center; width:100%; margin-left:0; margin-right:0; }
    .home-driver-note{ align-self:center; width:100%; max-width:680px; margin-left:0; margin-right:0; text-align:center; }
    .post-btn{ padding:26px 22px; }
    .post-btn b{ font-size:17px; }

    /* Titres de section alignés sur la grille large */
    .section-label{ padding-left:8px; padding-right:8px; max-width:1100px; }
    .concept{ margin-left:8px; margin-right:8px; }

    /* Concept : 3 colonnes égales */
    .steps{ grid-template-columns:repeat(3,1fr); gap:18px; }

    /* Publications : grille responsive de cartes */
    #pub-list-driver, #pub-list-passenger, #home-pub-list{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
      gap:16px;
      padding:0 8px;
      max-width:1100px;
    }
    #pub-list-driver > div, #pub-list-passenger > div, #home-pub-list > div{ margin:0 !important; }

    /* Textes des cartes agrandis proportionnellement sur desktop */
    .driver-strip{ padding:18px; }
    .driver-strip .avatar{ width:clamp(42px,3vw,52px); height:clamp(42px,3vw,52px); font-size:clamp(17px,1.5vw,21px); }
    .driver-strip .who b{ font-size:clamp(14px,1.15vw,17px); }
    .driver-strip .who span{ font-size:clamp(12.5px,1vw,15px); }
    .driver-strip .when{ font-size:clamp(12px,1vw,14px); padding:7px 11px; }
    .section-label b, .section-label > b{ font-size:clamp(16px,1.4vw,20px); }

    /* Filtres (Conducteurs / Passagers) : largeur bornée, alignés à gauche */
    .switch-row{ max-width:420px; margin-left:8px; margin-right:8px; }

    /* --- FORMULAIRES (publier / chercher) : 2 colonnes --- */
    #s4 .switch-row{ max-width:420px; }
    #driver-fields, #passenger-fields{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:0 24px;
      max-width:820px;
      padding-left:8px;
      padding-right:8px;
    }
    .form-block{ margin-left:0; margin-right:0; }
    .form-block.gap-top{ margin-top:16px; }
    /* Le bouton de publication et les zones pleines restent sur toute la largeur */
    .publish-cta{ grid-column:1 / -1; margin-left:0; margin-right:0; max-width:400px; }
    #s4-form-error{ grid-column:1 / -1; }
    .post-preview{ grid-column:1 / -1; }

    /* --- RÉSERVATION (s3) : contenu centré et borné --- */
    #s3 .confirm-top, #s3 .ticket, #s3 .driver-card,
    #s3 .confirm-cta, #s3 .pax-row, #s3 .price-row{
      max-width:640px; margin-left:auto; margin-right:auto;
      width:calc(100% - 16px);
    }

    /* --- Sections génériques bornées pour ne pas s'étirer à l'excès --- */
    #s1 .section-label, #s1 .concept{ max-width:1100px; }

    /* Accueil centré sur ordinateur : titre de section, cartes de publications, concept */
    #s1 .section-label{ justify-content:center; gap:16px; }
    #home-pub-list{ display:flex; flex-wrap:wrap; justify-content:center; align-self:center; width:100%; }
    #home-pub-list > *{ flex:0 0 350px; min-width:0; max-width:100%; }
    #s1 .concept{ align-self:center; width:calc(100% - 16px); }
    #s1 .concept h2, #s1 .concept .concept-intro{ text-align:center; }
  }

  /* ---- GRAND DESKTOP (≥ 1440px) : on garde des marges confortables ---- */
  @media (min-width: 1440px){
    .device{ max-width: 1200px; }
  }

  /* ---- MODALES : plus larges sur desktop mais toujours bornées ---- */
  @media (min-width: 1024px){
    /* Fenêtres centrées sur l'ÉCRAN visible (et non sur la page entière, qui est longue et défile sur ordinateur) */
    .modal-overlay{ position:fixed; inset:0; align-items:center; border-radius:0; }
    .modal-sheet{
      max-width: 460px;
      margin: 0 auto;
      border-radius: 24px;
    }
  }

  /* ============================================================
   * MULTIPAGE : liens et transitions entre pages
   * ============================================================ */
  /* Les éléments de navigation sont maintenant de vrais liens <a> : on garde exactement l'apparence d'avant */
  a.post-btn, a.back, a.acct-item, a.voyage-back, a.brand-link{ text-decoration:none; }
  a.post-btn, a.back, a.brand-link{ color:inherit; }
  a.acct-item:visited{ color:var(--ink); }
  a.brand-link{ display:block; line-height:0; }
  .section-label a{ text-decoration:none; }

  /* Arrivée sur une page : léger fondu (ne laisse aucun effet une fois terminé) */
  .screens{ animation:fhPageIn .38s ease backwards; }
  @keyframes fhPageIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

  /* Départ vers une autre page : fondu de sortie */
  body.fh-leaving .screens{ opacity:0; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease; }

  /* Barre de progression en haut de l'écran */
  #fh-loader{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9999; pointer-events:none; opacity:0;
    background:linear-gradient(90deg,var(--beam),#8DDCFF); box-shadow:0 0 10px rgba(104,242,213,.7); }
  body.fh-leaving #fh-loader{ opacity:1; width:82%; transition:width 1.6s cubic-bezier(.1,.7,.2,1), opacity .15s; }

  /* Indicateur de chargement : n'apparaît que si la page met plus d'une demi-seconde */
  #fh-overlay{ position:fixed; inset:0; z-index:9998; display:grid; place-items:center; pointer-events:none; opacity:0;
    background:rgba(10,42,44,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:opacity .25s ease; }
  body.fh-slow #fh-overlay{ opacity:1; pointer-events:auto; }
  .fh-spin{ width:46px; height:46px; border-radius:50%; border:3px solid rgba(255,255,255,.15); border-top-color:var(--beam); animation:fhSpin .8s linear infinite; }
  @keyframes fhSpin{ to{ transform:rotate(360deg); } }

  /* ============================================================
   * En-tête commun : sélecteur de langue + menu (👤 / FlyHome Voyage) sur toutes les pages
   * Même alignement que sur l'accueil : centré sur la hauteur du logo.
   * ============================================================ */
  .page-brand{ position:relative; }
  .page-brand > .topline-right{ position:absolute; right:22px;
    top:calc(40px + env(safe-area-inset-top,0px) + (clamp(34px,3.4vw,46px) - 38px) / 2); }

  /* ============================================================
   * Pied de page commun (navigation du site)
   * ============================================================ */
  .site-footer{ margin:44px 22px 0; padding:22px 0 calc(6px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); text-align:center; flex:0 0 auto; }
  .site-footer nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-bottom:12px; }
  .site-footer a{ color:var(--ink-soft); font-size:13px; font-weight:600; text-decoration:none; }
  .site-footer a:hover, .site-footer a[aria-current="page"]{ color:var(--go); }
  .site-footer small{ display:block; font-size:11.5px; color:var(--ink-soft); opacity:.7; }
  /* Liens juridiques : discrets, sur une ligne séparée, lisibles sur mobile */
  .site-footer .legal-links{ margin:-2px 0 12px; gap:6px 16px; }
  .site-footer .legal-links a{ font-size:11.5px; font-weight:500; opacity:.8; }
  .site-footer .legal-links a:hover, .site-footer .legal-links a[aria-current="page"]{ opacity:1; }
  .site-footer a{ padding:4px 2px; }
  @media (min-width:1024px){
    .page-brand > .topline-right{ right:8px; }
    .site-footer{ align-self:center; width:calc(100% - 16px); max-width:1100px; margin-left:0; margin-right:0; }
  }

  @media (prefers-reduced-motion: reduce){
    .screens{ animation:none; }
    body.fh-leaving .screens{ transition:none; transform:none; }
    .fh-spin{ animation-duration:2s; }
  }


/* Correctif global : menu des langues opaque et lisible sur toutes les pages */
.lang-menu{background:#0c2c2e!important;border-color:rgba(104,242,213,.28)!important;box-shadow:0 16px 42px rgba(0,0,0,.48)!important;isolation:isolate;z-index:999!important}
.lang-opt{background:#0c2c2e;color:#F4FFFD}
.lang-opt:hover{background:#174648}
.lang-opt.on{background:#68F2D5;color:#052220}

/* Accueil : description lisible et centrée sur téléphone */
@media (max-width: 767px){
  #s1 .home-desc-text { text-align:center; }
}

/* ============================================================
 * Pages juridiques (conditions, confidentialité, mentions légales)
 * ============================================================ */
.legal-wrap{ width:100%; max-width:820px; margin:0 auto; padding:6px 22px 8px; box-sizing:border-box; }
.legal-lang[hidden]{ display:none; }
.legal-wrap h1{ font-family:'Space Grotesk',sans-serif; font-size:26px; letter-spacing:-.5px; margin:14px 0 6px; color:var(--ink); }
.legal-wrap h2{ font-family:'Space Grotesk',sans-serif; font-size:16.5px; margin:26px 0 8px; color:var(--go); }
.legal-wrap p, .legal-wrap li{ font-size:14px; line-height:1.65; color:var(--ink-soft); }
.legal-wrap p{ margin:0 0 10px; }
.legal-wrap ul, .legal-wrap ol{ margin:0 0 12px; padding-left:20px; }
.legal-wrap li{ margin-bottom:6px; }
.legal-wrap b{ color:var(--ink); font-weight:700; }
.legal-wrap a{ color:var(--go); text-decoration:underline; text-underline-offset:2px; }
.legal-wrap .legal-meta{ font-size:12px; opacity:.75; margin-bottom:6px; }

/* ============================================================
 * Téléphone : jamais de défilement latéral (seulement vers le haut / le bas)
 * Cause constatée : un texte long sans espace (nom, véhicule, numéro de vol…) élargissait l'écran, et
 * `.screen{overflow-y:auto}` rend aussi l'axe horizontal défilable.
 * ============================================================ */
.screen{ overflow-wrap:anywhere; }
.who, .driver-card .who{ min-width:0; }
@media (max-width: 1023px){
  html, body{ overflow-x:hidden; overscroll-behavior-x:none; touch-action:pan-y pinch-zoom; }
  .screen{ overflow-x:hidden; }
}