:root{
  --blue:#1c4cff; --blue-dark:#0e1530; --orange:#ff7a28; --grey:#f5f7fb; --text:#101321; --white:#fff;
  --radius:18px; --shadow:0 8px 28px rgba(28,76,255,.09); --ring:0 0 0 3px rgba(28,76,255,.18);
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--grey);color:var(--text);font-family:'Inter',system-ui,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

header{display:flex;justify-content:center;align-items:center;padding:28px 12px 16px}
.logo-box{display:flex;align-items:center;gap:14px}
.logo{background:var(--blue);border-radius:14px;width:44px;height:44px;display:grid;place-items:center;box-shadow:var(--shadow)}
.logo svg{width:22px;height:22px;fill:#fff}
.brand{font-weight:700;font-size:1.8rem;color:var(--blue-dark);letter-spacing:-.3px}

main{display:grid;gap:18px;max-width:1180px;margin:0 auto;padding:0 12px 36px}
@media(min-width:980px){ main{grid-template-columns:1.1fr .9fr} }

.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.hero-top{background:linear-gradient(135deg,#0e1530 0%, #213068 100%);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 22px;text-align:center;margin-bottom:16px}
.hero-top h1{margin:0 0 6px 0}
.hero-top p{margin:0;color:#d8e0ff}

.stepper{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.chip{padding:8px 12px;border-radius:999px;background:#eef1ff;color:#334;border:1px solid #d1d8ed;font-weight:700;font-size:.92rem;opacity:.65}
.chip.active{opacity:1;background:#e7ecff;color:#192647;border-color:#c9d4ff}

.progress{height:6px;border-radius:999px;background:#e7ecff;overflow:hidden;margin:4px 0 14px}
.progress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--blue));transition:width .4s ease}

label{display:block;font-weight:600;margin:6px 0}
input,select,button{width:100%;padding:12px 14px;border-radius:12px;border:1.2px solid #d1d8ed;background:#f8fbff;color:#101321;font-size:1rem;outline:none}
input:focus,select:focus{border-color:var(--blue);box-shadow:var(--ring)}
button{cursor:pointer;background:var(--orange);color:#fff;border:none;font-weight:700;border-radius:12px;box-shadow:0 6px 16px rgba(255,122,40,.15);transition:transform .06s ease,opacity .2s}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0)}
button[disabled]{opacity:.6;cursor:not-allowed}
button.secondary{background:#f7f7f9;color:#1f2743;border:1.2px solid #c7d0ea}
button.ghost{background:transparent;border:1.2px dashed #c7d0ea;color:#1f2743}
.btn-outline{background:transparent;border:1.4px solid #c7d0ea;color:#0e1530}

.row{display:grid;gap:12px}
@media(min-width:720px){ .row-2{grid-template-columns:1fr 1fr} .row-3{grid-template-columns:repeat(3,1fr)} }

.list{display:grid;gap:14px}
@media(min-width:800px){ .list{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .list{grid-template-columns:repeat(3,1fr)} }

.item{background:#f4f7ff;border:1px solid #dfe6ff;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.item h4{margin:2px 0 4px 0;font-size:1.05rem;color:#0e1530}

/* ==== Ticket cards (transport) ==== */
.list-tickets{ grid-template-columns: repeat( auto-fill, minmax(280px, 1fr) ); }
.ticket{
  position:relative; background:#fff; border:1px solid #e6ebff; border-radius:16px; padding:14px; 
  box-shadow: var(--shadow); display:flex; flex-direction:column; gap:10px; overflow:hidden;
}
.ticket:before, .ticket:after{
  content:""; position:absolute; top:50%; transform:translateY(-50%); width:18px; height:18px; background:var(--grey);
  border-radius:50%; border:1px solid #e6ebff;
}
.ticket:before{ left:-9px } .ticket:after{ right:-9px }
.ticket-head{ display:flex; align-items:center; gap:10px }
.ticket-logo{ width:60px; height:24px; object-fit:contain; filter: contrast(1.1) saturate(1.05) }
.ticket-title{ font-weight:800; color:#0e1530; margin:0 }
.ticket-meta{ display:flex; gap:8px; flex-wrap:wrap; color:#51639c; font-size:.92rem }
.ticket-route{ display:flex; justify-content:space-between; align-items:center; gap:10px; background:#f8faff; border:1px dashed #d9e3ff; border-radius:12px; padding:10px 12px; }
.route-city{ font-weight:800; font-size:1.05rem; color:#0e1530 }
.route-time{ font-weight:700; color:#192647 }
.ticket-barcode{ height:28px; background: repeating-linear-gradient(90deg,#0e1530 0 2px, transparent 2px 4px); opacity:.18; border-radius:6px }
.ticket-cta{ display:flex; justify-content:space-between; align-items:center; gap:10px }
.ticket-price{ font-weight:900; font-size:1.1rem; color:#0e1530 }
.ticket.flight{ border-left:6px solid #1c4cff1a }
.ticket.train{ border-left:6px solid #16a34a1a }
.ticket.bus{ border-left:6px solid #f59e0b1a }

/* Icône/Logo par type de transport */
.icon-transport{
  display:inline-grid;
  place-items:center;
  width:32px; height:28px;
  font-size:18px;
  border-radius:8px;
  background:#eef5ff;
  border:1px solid #d9e4ff;
}

.ticket.train .icon-transport{
  background:#e9fbef;
  border-color:#c8eed6;
}

/* Si jamais une <img> vide est rendue, on l'efface côté train */
.ticket.train .ticket-logo{ display:none; }

.ticket.flight .icon-transport { background:#eef5ff; border:1px solid #d9e4ff; }
.ticket.train  .icon-transport { background:#e9fbef; border:1px solid #c8eed6; }
.ticket.bus    .icon-transport { background:#fff6e6; border:1px solid #ffe2b3; }
.ticket.ferry  .icon-transport { background:#eaf7ff; border:1px solid #cde9ff; }




.transport-section { display: grid; gap: 10px; }
.transport-section + .transport-section { margin-top: 12px; }
.transport-section .section-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 4px 2px; border-bottom: 1px dashed #e1e7ff;
}
.transport-section .section-head h4{
  margin:0; font-size:1.05rem; color:#0e1530; font-weight:800;
}





/* ==== Hotel cards ==== */
.list.hotels { 
  display:grid; 
  gap:14px; 
  grid-template-columns: repeat( auto-fill, minmax(240px, 1fr) );
}
.item.hotel{
  display:flex; 
  flex-direction:column; 
  gap:10px;
  background:#f7f9ff;
  border:1px solid #e2e8ff;
  border-radius:16px;
  padding:12px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-height: 340px;
}
.item.hotel:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(28,76,255,.10);
  border-color:#d3dcff;
}
.hotel-img{
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius:12px;
  overflow:hidden;
  background:#eef2ff;
  border:1px solid #e3e8ff;
}
.hotel-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hotel-img.skeleton{
  background:linear-gradient(90deg,#eef2ff 20%,#f5f7ff 40%,#eef2ff 60%);
  background-size:200% 100%;
  animation:skeleton 1.2s ease-in-out infinite;
}
.hotel-body{ display:flex; flex-direction:column; gap:6px; flex:1; }
.hotel-title{
  margin:0;
  font-size: .98rem;
  font-weight: 700;
  color:#0e1530;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hotel-stars{ color:#192647; opacity:.8; font-size:.9rem; }
.hotel-price{ font-weight:800; font-size:1.05rem; color:#111; }
.hotel-unit{ color:#6d7899; font-weight:500; }
.hotel-cta{
  margin-top:auto;
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  background:var(--orange);
  color:#fff;
  border:none;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(255,122,40,.18);
}
.hotel-cta:hover{ transform: translateY(-1px); }
.hotel-cta:active{ transform: translateY(0); }
@media (max-width: 640px){ .list.hotels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px){ .list.hotels { grid-template-columns: 1fr; } }

.meta{display:flex;gap:10px;flex-wrap:wrap;color:#51639c;font-size:.9rem}
.price{font-weight:800;color:#111;font-size:1.1rem}
.hidden{display:none}.muted{color:#6d7899}.center{display:grid;place-items:center;min-height:60px}

.recap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;position:sticky;top:16px;align-self:start}
.recap h3{margin:6px 0 12px 0;color:var(--blue-dark)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-size:.85rem}
.badge.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.badge.warn{background:#fffbeb;color:#8a5706;border:1px solid #fcd34d}
.badge.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

.hero{position:relative;height:260px;border-radius:18px;overflow:hidden;background:#0f172a;background-size:cover;background-position:center}
.hero.loading{ background-image:linear-gradient(90deg,#1f2937 25%,#2a3343 37%,#1f2937 63%); background-size:400% 100%; animation:shimmer 1.2s infinite }
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

.hero-overlay{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); color:#fff}
.hero-title{font-size:22px; font-weight:700; letter-spacing:.3px; text-shadow:0 2px 14px rgba(0,0,0,.45)}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.chips .chip{font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.14); backdrop-filter: blur(4px); white-space:nowrap; border:1px solid rgba(255,255,255,.25); color:#fff}

.moodboard{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
.mood-tile{height:90px; border-radius:12px; background:#0f172a; background-size:cover; background-position:center}
.mood-tile.loading{ background-image:linear-gradient(90deg,#1f2937 25%,#2a3343 37%,#1f2937 63%); background-size:400% 100%; animation:shimmer 1.2s infinite}

.dest-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* Sections 8 & 9 */
.section-shell{ grid-column:1 / -1; width:100%; max-width:1180px; margin:38px auto 0 auto; background:#fff; border-radius:24px; box-shadow:0 6px 24px rgba(28,76,255,.09); padding:36px }
@media (max-width: 900px) { .section-shell{ padding:18px 2vw 32px 2vw; max-width:98vw } }

#step-9 img {object-fit: cover; max-height: 420px; width:100%}
@media(max-width: 600px) { #step-9 h2 { font-size: 1.8rem } #step-9 p { font-size: 1rem } #step-9 a { width: 100%; text-align: center } }
#step-9 { animation: fadeInUp 0.8s ease }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: translateY(0) } }

/* Booking tabs */
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{flex:1}

/* Loader & skeletons */
.loader{display:flex;align-items:center;gap:10px;justify-content:center;padding:18px 12px}
.spinner{width:18px;height:18px;border:3px solid #e5e7eb;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{border-radius:14px;background:linear-gradient(90deg,#eef2ff 20%,#f5f7ff 40%,#eef2ff 60%);background-size:200% 100%;animation:skeleton 1.2s ease-in-out infinite}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-card{min-height:120px;border:1px solid #e3e8ff}

/* Toast */
.toast{position:fixed;right:16px;bottom:16px;background:#0e1530;color:#fff;padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);transition:.3s}
.toast.show{opacity:1;transform:translateY(0)}

/* Chips compacts */
.transport-checkboxes,.activities-checkboxes{ display:flex; flex-wrap:wrap; gap:5px; }
.transport-checkboxes .chip,.activities-checkboxes .chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; background:#f3f6ff; border:1px solid #d6def6;
  font-weight:600; font-size:.95rem; line-height:1; width:auto; white-space:nowrap; margin:0;
}
.transport-checkboxes .chip:hover,.activities-checkboxes .chip:hover{ border-color:#c1cdf4; }
.transport-checkboxes .chip.active,.activities-checkboxes .chip.active{
  background:#e7ecff; color:#192647; border-color:#c9d4ff; box-shadow: var(--ring);
}
@media (max-width:520px){
  .transport-checkboxes .chip,.activities-checkboxes .chip{ padding:7px 12px; font-size:.9rem; gap:6px; }
}

/* Footer */
.footer { background: var(--blue-dark); color: var(--white); padding: 28px 18px 16px; margin-top: 40px; }
/* après (grid = 3 colonnes : 1fr auto 1fr) */
.footer-container{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
}
.footer-brand {
  display: flex;
  align-items: center;   /* centre verticalement icône + texte */
  gap: 8px;              /* petit espace entre icône et texte */
}
.footer-brand img,
.footer-brand svg {
  display: block;        /* enlève le petit décalage baseline */
}

.footer-brand{ 
  justify-self: start;
  font-weight: 700;
  font-size: 1.2rem; 
}
.footer-nav{ justify-self: center; }
.footer-legal{ justify-self: end; }

/* empile proprement sur mobile */
@media (max-width: 700px){
  .footer-container{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
  }
  .footer-brand, .footer-legal{ justify-self: center; }
}
.footer-brand .logo { background: var(--blue); border-radius: 10px; width: 34px; height: 34px; display: grid; place-items: center; }
.footer-brand svg { width: 18px; height: 18px; fill: #fff; }
.footer-nav, .footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-nav a, .footer-legal a { color: #d8e0ff; font-size: 0.95rem; transition: color 0.2s; }
.footer-nav a:hover, .footer-legal a:hover { color: var(--orange); }
.footer-copy { text-align: center; margin-top: 18px; font-size: 0.85rem; color: #aab3d6; }

/* Recap (Step 6) */
.recap-wrap{ background:#fff; border:1px solid #e6ebff; border-radius:18px; padding:18px; box-shadow:var(--shadow); }
.recap-head{ display:flex; align-items:center; gap:10px; font-weight:800; color:#0e1530; margin:0 0 6px; }
.recap-sub{ color:#6d7899; margin:0 0 14px; font-size:.95rem }
.recap-grid{ display:grid; grid-template-columns: 1fr auto; gap:8px 14px; padding:12px; background:#f8faff; border:1px solid #e6ebff; border-radius:14px; }
.recap-grid .k{ color:#192647; font-weight:700 }
.recap-grid .v{ color:#0e1530 }
.recap-sep{ height:1px; background:linear-gradient(90deg,#e9eeff, transparent); margin:14px 0 }
.badge-soft{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:.9rem;
  background:#eef5ff; border:1px solid #d5e2ff; color:#1b2b5c;
}
.total-box{ margin-top:14px; padding:14px; border-radius:14px; background: #fff6ef; border:1px solid #ffd8b8; }
.total-row{ display:flex; justify-content:space-between; font-weight:800; font-size:1.1rem; }
.total-note{ color:#8a5706; font-size:.92rem; margin-top:6px }
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.cta-row .btn-outline{ flex:1 1 220px }
.cta-row .btn-primary{ flex:1 1 220px }
.btn-primary{
  background:var(--orange); color:#fff; border:none; font-weight:800;
  padding:14px 16px; border-radius:12px; box-shadow:0 10px 20px rgba(255,122,40,.18);
}
.btn-primary:hover{ transform:translateY(-1px) }
.btn-primary:active{ transform:translateY(0) }

#recap-voyage{ box-shadow: none; }


/* Partner cards (reservation step) */
.partner-cards{ display:grid; gap:14px; grid-template-columns: repeat( auto-fill, minmax(280px, 1fr) ); }
.partner-card{
  background:#fff; border:1px solid #e6ebff; border-radius:18px; padding:16px;
  box-shadow: var(--shadow);
}
.partner-card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.partner-card h4{ margin:0; font-size:1.05rem; color:#0e1530; }
.partner-card-cta{ margin-top:12px; display:flex; justify-content:flex-end; }
.partner-card .btn-primary{ text-align:center; }


/* --- WOW UI Uplift for Reservation Cards --- */

:root{
  --wow-grad-1: linear-gradient(135deg, #eef3ff 0%, #fafcff 100%);
  --wow-grad-cta: linear-gradient(135deg, #ff944d 0%, #ff6a00 100%);
  --wow-ink: #0e1530;
  --wow-ink-soft: #5a6480;
  --glass: rgba(255,255,255,0.7);
  --glass-stroke: rgba(2,22,80,0.08);
}

.section-card{
  background: var(--wow-grad-1);
  position: relative;
  overflow: hidden;
}

.section-card::before{
  content:"";
  position:absolute; inset:-80px -40px auto auto;
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(122,146,255,0.18), transparent);
  filter: blur(2px);
  pointer-events:none;
}

/* Grid of partner cards */
.partner-cards{ 
  display:grid; 
  gap:18px; 
  grid-template-columns: repeat( auto-fill, minmax(320px, 1fr) ); 
  margin-top: 4px;
}

/* Ticket style card */
.partner-card{
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  border-radius: 22px;
  padding: 16px 16px 14px 16px;
  box-shadow: 0 10px 24px rgba(9, 20, 60, 0.08);
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.partner-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(9, 20, 60, 0.12);
  border-color: rgba(2,22,80,0.12);
}

/* Perforated sides using mask */
.partner-card::before, .partner-card::after{
  content:"";
  position:absolute; top:14px; bottom:14px; width:10px;
  background:
    radial-gradient(circle at center, transparent 4px, var(--wow-grad-1) 4.5px) 0 8px/10px 18px repeat-y;
  opacity:.85;
  pointer-events:none;
}
.partner-card::before{ left:-5px; }
.partner-card::after{ right:-5px; }

.partner-card-head{ 
  display:flex; justify-content:space-between; align-items:center; gap:10px; 
  margin-bottom:12px; 
}
.partner-card h4{ margin:0; font-size:1.1rem; color:var(--wow-ink); letter-spacing:.2px; }

.badge-soft{
  font-size:.75rem; color:#2f3a66; background:#eaf0ff;
  border:1px solid #d9e4ff; padding:6px 10px; border-radius:999px;
}

/* Two-column recap */
.recap-grid{ 
  display:grid; grid-template-columns: 110px 1fr; gap:8px 12px; 
  background: rgba(255,255,255,.6);
  border: 1px dashed rgba(14,21,48,.12);
  padding: 12px; border-radius: 14px;
}
.recap-grid .k{ color:var(--wow-ink-soft); font-weight:600; }
.recap-grid .v{ color:var(--wow-ink); }

.price-accent{ font-weight:800; font-size:1.05rem; }

/* CTA */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px; font-weight:700;
  background: var(--wow-grad-cta);
  color:#fff !important; border:none;
  box-shadow: 0 8px 18px rgba(255,106,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover{ 
  transform: translateY(-1px); 
  box-shadow: 0 12px 28px rgba(255,106,0,.32);
  filter: brightness(1.03);
}

/* Align CTA to right */
.partner-card-cta{ margin-top:14px; display:flex; justify-content:flex-end; }

/* Header polish */
.section-title{
  display:flex; align-items:center; gap:10px; justify-content:center;
}
.section-title .emoji{ font-size:1.35rem; }
.section-title h2{ margin:0; }

/* Responsive tweaks */
@media (max-width: 760px){
  .recap-grid{ grid-template-columns: 1fr; }
  .partner-card::before, .partner-card::after{ display:none; }
}


/* ==== Global page "wow" uplift (non-breaking) ==== */

/* Soft grid background */
body{
  background:
    radial-gradient(1200px 600px at 50% -100px, rgba(116,137,255,0.08), transparent 65%),
    linear-gradient(180deg, #f7faff 0%, #f9fbff 30%, #fefeff 100%);
}

body::before{
  content:"";
  position: fixed; inset:0;
  background-image:
    linear-gradient(rgba(14,21,48,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,21,48,0.04) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  mask-image: radial-gradient(800px 400px at 50% 0%, rgba(0,0,0,.5), transparent 70%);
  pointer-events:none;
}

/* Container width & card padding */
.container, .section-card{
  max-width: 1100px;
  margin-left:auto; margin-right:auto;
}
.section-card{
  padding: 28px 28px 24px;
  border-radius: 28px;
  box-shadow: 0 18px 60px rgba(9,20,60,0.10);
}

/* Title polish */
.section-title{
  margin-bottom: 16px;
}
.section-title h2{
  font-weight: 800;
  letter-spacing: .2px;
  position: relative;
}
.section-title h2::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width: 120px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #a9b6ff, #ffb080);
  opacity:.6;
}

/* Partner cards: equal height, CTA pinned bottom */
.partner-card{
  display:flex; flex-direction:column;
  min-height: 270px;
}
.partner-card-cta{ margin-top:auto; }

/* Action row spacing (below cards) */
.action-row, .controls-row{ margin-top: 18px; }

/* Toned text input if any appears on this step */
.section-card input[type="text"]{
  background: #f6f8ff;
  border: 1px solid #e2e8ff;
  height: 40px;
}

/* Footer breathing */
.site-footer{ padding-top: 28px; }


/* =====================
   1Click1Trip — Modern Reservation UI
   ===================== */
:root{
  --ink:#0A2540;
  --ink-soft:#5a6480;
  --muted:#9aa4b2;
  --card:#ffffff;
  --navy:#0A2540;
  --accent:#FF6600;
  --accent-2:#FF5A2F;
  --glass: rgba(255,255,255,0.68);
  --glass-stroke: rgba(10,37,64,0.08);
  --shadow-lg: 0 20px 60px rgba(9,20,60,0.12);
  --shadow-md: 0 10px 28px rgba(9,20,60,0.10);
}

html,body{ height:100%; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 50% -250px, rgba(255,188,130,0.18), transparent 65%),
    radial-gradient(1200px 700px at 80% 120%, rgba(140,170,255,0.22), transparent 55%),
    linear-gradient(180deg, #fbf7f3 0%, #f7faff 40%, #f9fbff 100%);
  overflow-x:hidden;
}

/* dotted flight path pattern */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(10,37,64,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,37,64,0.04) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  mask-image: radial-gradient(900px 600px at 50% 0%, rgba(0,0,0,.5), transparent 70%);
}

/* Container / card */
.container, .section-card{ max-width:1100px; margin:0 auto; }
.section-card{
  margin-top:28px;
  background: var(--glass);
  border:1px solid var(--glass-stroke);
  border-radius:28px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  padding: 28px;
}

/* Title */
.section-title{ display:flex; align-items:center; gap:10px; justify-content:center; margin-top:18px; }
.section-title .emoji{ font-size:1.35rem; }
.section-title h2{
  margin:0; font-weight:800; letter-spacing:.2px;
  font-size: clamp(28px, 3.8vw, 48px);
  position:relative;
}
.section-title h2::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-12px; width: 160px; height:4px; border-radius:4px;
  background: linear-gradient(90deg, #7aa2ff, #ff9f6a);
  opacity:.7;
}

/* Cards grid */
.partner-cards{
  display:grid; gap:22px;
  grid-template-columns: repeat( auto-fit, minmax(320px, 1fr) );
  margin-top:22px;
}
.partner-card{
  position:relative; display:flex; flex-direction:column; min-height:280px;
  background:#fffffff2; border:1px solid #e9eefc; border-radius:22px; padding:16px;
  box-shadow: var(--shadow-md);
}
.partner-card .badge-soft{
  font-size:.75rem; color:#2f3a66; background:#eaf0ff;
  border:1px solid #d9e4ff; padding:6px 10px; border-radius:999px;
}
.partner-card h4{ margin:0; font-size:1.05rem; color:var(--ink); }

.recap-grid{
  display:grid; grid-template-columns: 120px 1fr; gap:10px 12px;
  background:#fff; border:1px dashed rgba(14,21,48,.12); padding:12px; border-radius:14px;
  margin-top:8px;
}
.recap-grid .k{ color:var(--ink-soft); font-weight:600; }
.recap-grid .v{ color:var(--ink); }

.partner-card-cta{ margin-top:auto; display:flex; justify-content:center; }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px; font-weight:700;
  background: linear-gradient(135deg, #ff944d, #ff6a00);
  color:#fff !important; border:none;
  box-shadow: 0 10px 30px rgba(255,106,0,.28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); filter:brightness(1.03); box-shadow:0 14px 38px rgba(255,106,0,.36); }

/* Price accent */
.price-accent{ font-weight:800; font-size:1.05rem; background: linear-gradient(135deg, #ff944d, #ff6a00); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Footer */
.site-footer{ background:var(--navy); color:#fff; }
.site-footer a{ color:#e7ecff; }

/* Inputs (if present) */
.section-card input[type="text"]{
  background: #f6f8ff; border: 1px solid #e2e8ff; height: 44px; border-radius:12px; padding:0 12px;
}

/* Responsive */
@media (max-width:760px){
  .recap-grid{ grid-template-columns:1fr; }
}


/* Uniform secondary button */
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px; font-weight:600;
  background:#fff; color:var(--ink); border:1px solid #d1d7e5;
  transition:all .2s ease;
}
.btn-secondary:hover{ background:#f5f7ff; }


/* Uniformize all action buttons under action row */
.action-row button, .controls-row button{
  flex:1;
  min-height:48px;
  font-size:15px;
}


/* Action row layout + sizing */
.action-row{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:24px;
}
.btn-wide{ min-width: 260px; height: 44px; }






/* === Activities (WeGoTrip) grid & cards === */
.activities-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat( auto-fill, minmax(260px, 1fr) );
}
.activity-card{
  background:#fff;
  border:3px solid #e6ebff;
  border-radius:16px;
  padding:12px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.activity-card.selected{
   border-color:#a7f3d0;
   box-shadow: 0 10px 24px rgba(16,185,129,.18);
}
.activity-cta .btn-outline{ flex:1 }
.activity-cta .btn-primary{ flex:1 }

.activity-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(28,76,255,.10);
  border-color:#d3dcff;
}
.activity-img{
  position:relative;
  aspect-ratio: 4 / 3;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  background:#eef2ff;
  border:1px solid #e3e8ff;
}
.activity-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.activity-img.skeleton{
  background:linear-gradient(90deg,#eef2ff 20%,#f5f7ff 40%,#eef2ff 60%);
  background-size:200% 100%;
  animation:skeleton 1.2s ease-in-out infinite;
}
.activity-provider{
  position:absolute;
  right:8px; bottom:8px;
  height:24px; width:auto;
  background:#fff;
  border:1px solid #e3e8ff;
  border-radius:8px;
  padding:4px 6px;
  box-shadow:0 6px 16px rgba(16,24,40,.12);
}
.activity-title{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:#0e1530;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.activity-meta{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  color:#51639c; font-size:.92rem;
}
.activity-cta{ margin-top:auto; display:flex; justify-content:space-between; gap:8px }
.activity-cta .btn-primary{
  padding:12px 14px; border-radius:12px; font-weight:800;
}

/* petit badge prix réutilisé */
.price-accent{ font-weight:900; color:#0e1530; }



/* === Stage Loader (plane orbiting earth) === */
.card{ position: relative; } /* ensure absolute children position correctly */

.stage-loader{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(245,247,251,.95));
  backdrop-filter: blur(2px);
  z-index: 50;
}
.stage-loader.hidden{ display:none; }
.loader-inner{ display:flex; flex-direction:column; align-items:center; gap:16px }

/* Orbit animation */
.orbit{
  position:relative; width:128px; height:128px;
  border-radius:50%;
  border:2px dashed rgba(28,76,255,.28);
  animation: orbit-spin 2.2s linear infinite;
}
.earth{
  position:absolute; inset:0; margin:auto;
  width:46px; height:46px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #75c8ff 0%, #1c4cff 70%);
  box-shadow: 0 6px 18px rgba(28,76,255,.25) inset, 0 8px 24px rgba(16,24,48,.12);
}
.plane{
  position:absolute; top:50%; left:50%;
  width:26px; height:26px;
  transform: rotate(0deg) translate(58px) rotate(0deg);
  transform-origin: center;
  background: none;
}
/* Draw a tiny airplane with pure CSS (triangle + fuselage) */
.plane::before, .plane::after{
  content:""; position:absolute; inset:0;
}
.plane::before{
  width: 0; height: 0;
  border-left: 13px solid #0e1530;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  top:6px; left:6px;
  transform: rotate(10deg);
  filter: drop-shadow(0 1px 2px rgba(14,21,48,.25));
}
.plane::after{
  width: 14px; height: 3px; background:#0e1530;
  top: 11px; left: 2px;
  border-radius:2px;
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

.loader-text{
  font-weight:800; color:#0e1530; letter-spacing:.2px;
}



/* margin navigation buttons */

.marg-nav-button{
  margin-top: 20px;
}


/* style suggestion ville de départ */


.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #d1d8ed;
  border-radius: 10px;
  margin-top: 4px;
  list-style: none;
  padding: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  display: none;
  z-index: 1000;
}
.suggestions-list li {
  padding: 10px;
  cursor: pointer;
  font-size: 0.95rem;
}
.suggestions-list li:hover {
  background: #f5f7fb;
}


/* === SIM Advice Cards === */
.sim-card{
  position:relative;
  background: var(--glass, rgba(255,255,255,.75));
  border: 1px solid var(--glass-stroke, rgba(2,22,80,.08));
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(9,20,60,.08);
  backdrop-filter: blur(6px);
  padding: 14px 16px 16px;
  display:flex; flex-direction:column; gap:10px;
}

.sim-card.ok   { border-left: 6px solid rgba(16,185,129,.25); }   /* vert doux */
.sim-card.warn { border-left: 6px solid rgba(245,158,11,.28); }   /* amber */
.sim-card.need { border-left: 6px solid rgba(28,76,255,.22); }    /* bleu */

.sim-head{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  border-bottom: 1px dashed #e1e7ff; padding-bottom: 8px;
}
.sim-title-wrap{ flex:1; min-width:0; }
.sim-title{ margin:0; font-size:1.08rem; color: var(--wow-ink, #0e1530); font-weight:800; }
.sim-sub{ margin:2px 0 0; color:#5a6480; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.sim-icon{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:12px;
  background:#eef5ff; border:1px solid #d9e4ff; font-size:18px;
}
.sim-card.ok   .sim-icon{ background:#e9fbef; border-color:#c8eed6; }
.sim-card.warn .sim-icon{ background:#fff6e6; border-color:#ffe2b3; }

.sim-body{ display:flex; flex-direction:column; gap:10px; }

.sim-bullets{
  margin:0; padding-left:18px; color:#51639c; font-size:.95rem;
}
.sim-bullets li{ margin:2px 0; }

@media (max-width:760px){
  .sim-sub{ white-space:normal; }
}




.reservation-hero{
  display:flex; flex-direction:column; gap:8px; margin-bottom:14px;
  background:linear-gradient(135deg,#0e1530, #213068); color:#fff;
  border-radius:20px; padding:18px 16px; box-shadow:var(--shadow);
}
.reservation-hero__title{ display:flex; align-items:center; gap:10px }
.reservation-hero__title .emoji{ font-size:26px }
.reservation-hero__title h2{ margin:0; letter-spacing:.2px }
.reservation-hero__sub{ margin:0; color:#d8e0ff }
.trust-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px }
.pay-badge{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:#fff; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.9rem;
  backdrop-filter: blur(4px);
}


.partner-card{
  position:relative; background:rgba(255,255,255,.7);
  border:1px solid rgba(2,22,80,.08); border-radius:22px; padding:16px;
  box-shadow:0 10px 24px rgba(9,20,60,.08); backdrop-filter: blur(6px);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.partner-card:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(9,20,60,.13) }
.partner-card .section-badge{
  background:#eef5ff; border:1px solid #d9e4ff; color:#0e1530;
  padding:6px 10px; border-radius:999px; font-weight:800; font-size:.9rem;
}
.partner-card .grid{
  display:grid; grid-template-columns:1fr auto; gap:8px 12px; background:#f8faff;
  border:1px dashed #dbe3ff; border-radius:14px; padding:10px 12px; margin-top:10px;
}
.partner-card .k{ color:#1b2b5c; font-weight:700 }
.partner-card .v{ color:#0e1530 }
.partner-card .cta-wrap{ display:flex; justify-content:flex-end; margin-top:12px }
.partner-card .btn-primary{ min-width:220px }


.sticky-cta{
  position:sticky; bottom:12px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.85);
  border:1px solid rgba(2,22,80,.08); backdrop-filter: blur(6px); box-shadow: var(--shadow);
  margin-top:16px;
}
.sticky-cta__price{ display:flex; align-items:baseline; gap:10px }
.sticky-cta__price span{ color:#5a6480; font-weight:600 }
.sticky-cta__price strong{ font-size:1.25rem; letter-spacing:.2px; color:#0e1530 }
.sticky-cta__actions{ display:flex; gap:8px; flex-wrap:wrap }
.glow{ box-shadow:0 0 0 0 rgba(255,122,40,.35); animation:pulse 1.8s ease infinite }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,122,40,.35) } 70%{ box-shadow:0 0 0 16px rgba(255,122,40,0) } 100%{ box-shadow:0 0 0 0 rgba(255,122,40,0) } }




/* Légère animation de survol sur tous les boutons primaires */
.btn-primary{ transition: transform .06s ease, box-shadow .2s ease }
.btn-primary:hover{ transform: translateY(-1px); box-shadow:0 14px 28px rgba(255,122,40,.22) }

/* Titres de blocs */
.section-head h4{ letter-spacing:.2px }
.section-badge{ box-shadow:0 4px 12px rgba(28,76,255,.08) }

/* Mieux séparer les deux cartes */
.partner-cards{ gap:22px }

/* Petites icônes dans les lignes k/v */
.recap-grid .k::before{
  content:"•"; color:#c7d0ea; margin-right:8px; font-weight:900;
}



html{
  height: auto; 
}



/* Input multiselect Styles 
.transport-checkboxes .chip,
.activities-checkboxes .chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:#f8fbff;
  border:1.5px solid #d6def6;
  font-weight:600;
  font-size:.95rem;
  transition: all .25s ease;
  cursor:pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.transport-checkboxes .chip:hover,
.activities-checkboxes .chip:hover {
  background:#f0f4ff;
  border-color:#b9c6f3;
  box-shadow: 0 3px 8px rgba(28,76,255,.10);
}

.transport-checkboxes .chip.active,
.activities-checkboxes .chip.active {
  background:linear-gradient(135deg,#1c4cff,#3f68ff);
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 12px rgba(28,76,255,.25);
}*/



/* CSS FOR MULTISELECT */


.choices__inner {
  border-radius: 12px !important;
  padding: 7px 14px !important;
  border: 1.5px solid #d1d8ed !important;
  background: #f8fbff !important;
}

.choices__list--dropdown {
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(28,76,255,0.12) !important;
}

.flatpickr-calendar {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(28,76,255,0.15);
}

/* Hover sur les options du menu déroulant */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #ff7a28 !important; /* ton orange */
  color: #fff !important;               /* texte blanc pour le contraste */
}


/* === Flatpickr custom DA 1Click1Trip for CALENDAR=== */

.flatpickr-calendar {
  font-family: 'Inter', sans-serif;
  border-radius: 16px;
  border: none;
  box-shadow: 0 12px 32px rgba(14, 21, 48, 0.2);
  background: #fff;
  overflow: hidden;
}

/* Header (mois / année) */
.flatpickr-months {
  background: #0e1530;
  color: #fff;
  padding: 10px 0;
}
.flatpickr-current-month {
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff !important; /* <-- force le mois en blanc */

}
.flatpickr-current-month input.cur-year {
  color: #fff !important;
}
.flatpickr-prev-month svg, 
.flatpickr-next-month svg {
  fill: #fff !important;
}

/* Jours de la semaine */
.flatpickr-weekdays {
  background: #f5f7fb;
  padding: 4px 0;
}
.flatpickr-weekday {
  font-weight: 600;
  font-size: .85rem;
  color: #0e1530;
}

/* Jours */
.flatpickr-day {
  border-radius: 10px;
  font-weight: 500;
  color: #101321;
  transition: all .2s ease;
}
.flatpickr-day:hover {
  background: #ff7a28;
  color: #fff;
}

/* Aujourd'hui */
.flatpickr-day.today {
  border: 1.5px solid #ff7a28;
  color: #ff7a28;
}

/* Jour sélectionné */
.flatpickr-day.selected {
  background: #ff7a28;
  color: #fff;
  font-weight: 700;
}

/* Jours inactifs (hors mois) */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #c0c6d9 !important;
  background: transparent !important;
}










/* ---- Input visible créé par Flatpickr (altInput) ---- */
.flatpickr-alt {
  width: 100%;
  padding: 12px 42px 12px 14px;
  border-radius: 12px;
  border: 1.2px solid #d1d8ed;
  background: #f8fbff
    url("data:image/svg+xml,%3Csvg fill='none' stroke='%231c4cff' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 7V3m8 4V3m-9 8h10m-12 8h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'%3E%3C/path%3E%3C/svg%3E")
    no-repeat right 12px center / 18px auto;
  color: #101321 !important;
  font-size: 1rem;
  font-weight: 500;
  outline: none;
  transition: all .2s ease;
}
.flatpickr-alt:focus {
  border-color: var(--blue);
  box-shadow: var(--ring);
}


/* Sur mobile, Flatpickr peut injecter un input natif .flatpickr-input.flatpickr-mobile.
   On le laisse mais on garde la cohérence visuelle */
.flatpickr-input.flatpickr-mobile {
  width: 100%;
  padding: 12px 42px 12px 14px;
  border-radius: 12px;
  border: 1.2px solid #d1d8ed;
  background: #f8fbff;
  font-size: 1rem;
}

/* (Déjà appliqué précédemment) Thème du calendrier cohérent DA */
.flatpickr-calendar { border-radius:16px; border:none; box-shadow:0 12px 32px rgba(14,21,48,.2); }
.flatpickr-months { background:#0e1530; color:#fff; padding:10px 0; }
.flatpickr-current-month, .flatpickr-current-month input.cur-year { color:#fff !important; font-weight:700; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill:#fff !important; }
.flatpickr-weekdays { background:#f5f7fb; }
.flatpickr-weekday { font-weight:600; font-size:.85rem; color:#0e1530; }
.flatpickr-day { border-radius:10px; font-weight:500; color:#101321; transition:all .2s ease; }
.flatpickr-day:hover { background:#ff7a28; color:#fff; }
.flatpickr-day.today { border:1.5px solid #ff7a28; color:#ff7a28; }
.flatpickr-day.selected { background:#ff7a28; color:#fff; font-weight:700; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color:#c0c6d9 !important; background:transparent !important; }




.choices__item{
    background: #f8fbff;
    padding: 0px 0px;
    color: #101321;
    font-size: 1rem;
}