:root{
    /* Palette Zone Travel — noir / rouge / blanc */
    --ink:#141414;
    --ink-2:#232323;
    --red:#e30613;
    --red-dark:#c10510;
    --red-soft:#fdecec;
    --bg:#f5f6f8;
    --bg-grad-1:#f0f1f4;
    --bg-grad-2:#fafbfc;
    --card:#ffffff;
    --text:#161a20;
    --text-soft:#606874;
    --line:#e6e8ee;
    --ring:rgba(227,6,19,.16);
    --shadow-sm:0 2px 8px rgba(20,20,20,.06);
    --shadow-md:0 12px 34px rgba(20,20,20,.10);
    --shadow-lg:0 24px 60px rgba(20,20,20,.16);
    --radius:20px;
    --radius-sm:14px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    color:var(--text);
    background:
      radial-gradient(1100px 520px at 82% -12%, #fdeceb 0%, transparent 58%),
      radial-gradient(820px 460px at -8% 6%, #eef0f4 0%, transparent 55%),
      linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2));
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
  }

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    backdrop-filter:saturate(1.4) blur(10px);
    background:rgba(255,255,255,.82);
    border-bottom:1px solid var(--line);
  }
  .nav{
    max-width:1080px;margin:0 auto;padding:14px 24px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;cursor:pointer}

  /* ---- Logo recréé : z O(ne) avec cercle rouge "TRAVEL" ---- */
  .logo{display:inline-flex;align-items:center;font-family:'Nunito',sans-serif;font-weight:900;color:var(--ink);user-select:none;line-height:1}
  .logo .l-z,.logo .l-ne{font-size:2.15rem;letter-spacing:-.02em;position:relative;z-index:1}
  .logo .l-z{margin-right:-.02em}
  .logo .l-ne{margin-left:-.03em}
  .logo .l-o{
    position:relative;z-index:2;width:1.34em;height:1.34em;font-size:1.55rem;flex:none;
    background:var(--red);border-radius:50%;
    display:grid;place-items:center;box-shadow:0 3px 10px rgba(227,6,19,.28);
  }
  .logo .l-o span{
    color:#fff;font-style:italic;font-weight:900;font-size:.24em;letter-spacing:.02em;
    transform:translateY(1px);
  }
  .brand-sub{font-weight:600;font-size:.7rem;color:var(--text-soft);letter-spacing:.14em;text-transform:uppercase;padding-left:2px;border-left:2px solid var(--red);margin-left:4px;padding-left:10px}
  @media(max-width:600px){.brand-sub{display:none}.logo .l-z,.logo .l-ne{font-size:1.85rem}}

  .nav-contact{font-size:.85rem;color:var(--text-soft);font-weight:700;text-decoration:none;display:flex;align-items:center;gap:7px}
  .nav-contact:hover{color:var(--red)}
  @media(max-width:600px){.nav-contact span{display:none}}

  /* ---------- Layout ---------- */
  main{max-width:1080px;margin:0 auto;padding:40px 24px 80px}
  .hero{text-align:center;max-width:680px;margin:0 auto 8px}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--red-soft);color:var(--red-dark);
    font-weight:800;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
    padding:7px 14px;border-radius:999px;margin-bottom:18px;
  }
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--red)}
  h1{font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.03em;line-height:1.1;font-weight:800}
  h1 b{color:var(--red);font-weight:800}
  .hero p{color:var(--text-soft);font-size:1.05rem;margin-top:14px}

  /* ---------- Stepper ---------- */
  .stepper{display:flex;align-items:center;justify-content:center;gap:0;margin:34px auto 30px;max-width:520px}
  .step{display:flex;align-items:center;gap:10px;color:var(--text-soft);font-weight:700;font-size:.9rem}
  .step .num{
    width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
    font-size:.85rem;font-weight:800;background:#fff;border:2px solid var(--line);color:var(--text-soft);transition:.3s;
  }
  .step.active .num{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 0 0 5px rgba(20,20,20,.08)}
  .step.done .num{background:var(--red);border-color:var(--red);color:#fff}
  .step.active{color:var(--ink)}
  .step-line{flex:1;height:2px;background:var(--line);margin:0 12px;min-width:24px;border-radius:2px;transition:.3s}
  .step-line.done{background:var(--red)}
  .step-label{white-space:nowrap}
  @media(max-width:560px){.step-label{display:none}.step-line{margin:0 8px}}

  /* ---------- Panels ---------- */
  .panel{display:none;animation:fade .45s ease both}
  .panel.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .panel-head{text-align:center;margin-bottom:26px}
  .panel-head h2{font-size:1.5rem;letter-spacing:-.02em;font-weight:800}
  .panel-head p{color:var(--text-soft);margin-top:6px}

  /* ---------- Choice cards ---------- */
  .cards{display:grid;gap:20px;grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}
  #dest-cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));max-width:900px}
  @media(max-width:640px){.cards{grid-template-columns:1fr;max-width:420px}#dest-cards{grid-template-columns:1fr;max-width:420px}}

  .choice{
    position:relative;text-align:left;cursor:pointer;
    background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
    padding:26px;box-shadow:var(--shadow-sm);
    transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;
    display:flex;flex-direction:column;gap:14px;font-family:inherit;width:100%;overflow:hidden;
  }
  .choice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .28s}
  .choice:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#d8dbe3}
  .choice:hover::before{transform:scaleY(1)}
  .choice:focus-visible{outline:none;border-color:var(--red);box-shadow:0 0 0 4px var(--ring)}
  .choice .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:1.7rem;line-height:1}
  .choice.long .ic{background:var(--red)}
  .choice h3{font-size:1.22rem;letter-spacing:-.02em;font-weight:800}
  .choice .desc{color:var(--text-soft);font-size:.92rem}
  .choice .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
  .tag{font-size:.78rem;font-weight:700;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 11px;display:inline-flex;align-items:center;gap:6px}
  .choice .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--red);font-weight:800;font-size:.92rem}
  .choice .go svg{transition:transform .25s}
  .choice:hover .go svg{transform:translateX(4px)}

  .flag{font-size:2rem;line-height:1;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line)}
  .choice .meta{font-size:.82rem;color:var(--text-soft);display:flex;align-items:center;gap:6px;font-weight:700}

  /* ---------- Calendly step ---------- */
  .booking-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:900px;margin:0 auto 18px}
  .selection-pill{display:inline-flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 16px;box-shadow:var(--shadow-sm);font-weight:800}
  .selection-pill .flag-sm{font-size:1.3rem}
  .selection-pill .chip{background:var(--ink);color:#fff;font-size:.76rem;font-weight:700;padding:5px 11px;border-radius:999px}
  .cal-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;max-width:900px;margin:0 auto;min-height:660px;position:relative}
  .cal-loader{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-soft);gap:14px;text-align:center}
  .spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--red);animation:spin 1s linear infinite;margin:0 auto}
  @keyframes spin{to{transform:rotate(360deg)}}
  .calendly-inline-widget{min-width:320px;height:700px}

  /* ---------- Back button ---------- */
  .back{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px 9px 13px;font-family:inherit;font-weight:700;font-size:.9rem;color:var(--text-soft);box-shadow:var(--shadow-sm);transition:.2s}
  .back:hover{color:var(--red);border-color:#e7bcbf;transform:translateX(-3px)}
  .back-row{max-width:900px;margin:0 auto 22px;display:flex}

  /* ---------- Trust ---------- */
  .trust{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;margin:56px auto 0;max-width:760px}
  .trust-item{display:flex;align-items:center;gap:10px;color:var(--text-soft);font-size:.9rem;font-weight:700}
  .trust-item svg{color:var(--red);flex:none}
  footer{text-align:center;color:var(--text-soft);font-size:.82rem;padding:30px 24px 10px}
  footer a{color:var(--red);text-decoration:none;font-weight:700}

  /* ---------- Ajouts Symfony : barre droite + sélecteur de langue ---------- */
  .nav-right{display:flex;align-items:center;gap:16px}
  .lang-switch{display:inline-flex;align-items:center;gap:4px}
  .lang-switch a{font-weight:800;font-size:.82rem;color:var(--text-soft);padding:5px 9px;border-radius:9px;text-decoration:none;line-height:1;transition:.2s}
  .lang-switch a:hover{color:var(--ink);background:var(--bg)}
  .lang-switch a.active{color:#fff;background:var(--ink)}
  @media(max-width:600px){.nav-right{gap:10px}}