/* Blue Edge Travel — M2 site (langage visuel hérité du quiz M1) THÈME COMMUTABLE : SOMBRE PAR DÉFAUT depuis le 10/08/2026, décision d'Edouard (« the prototype look is exactly the brand direction: clean, premium, Costa Rica at night. Visitors who prefer light can switch. Lead with dark. »). Le clair reste accessible au bouton 🌙/☀️ et le choix est mémorisé. Les surfaces passent par --page/--surface/--line/--ink/--muted : un seul attribut data-theme sur bascule tout le site. */ :root{ /* --green-dark assombri de #0F8A6C à #0C755B : il sert au texte des méta-packages, en petit et en majuscules. Il tombait à 3,85 sur le fond sauge (il était déjà juste à 4,31 sur blanc). Là : 5,06. Teinte inchangée, seulement plus profonde. */ --navy:#06222F; --navy2:#0A3145; --blue:#1B8AC4; --green:#17B890; --green-dark:#0C755B; /* --muted assombri de #5B7480 à #546B76 : sur l'ancien fond blanc il passait tout juste (4,94), sur le fond sauge il tombait à 4,41, sous le seuil lisible. Là : 5,0 sur la page et 4,75 sur les surfaces secondaires. */ --sand:#F4F7F8; --ink:#0B2530; --muted:#546B76; --white:#fff; /* Surfaces du thème clair. Fond vert sauge doux plutôt que blanc pur (round 1, point 9) : Edouard le voulait « calm, muted, natural, not vivid », dans la plage #E8F0E9 – #EEF5EE. */ --page:#EDF4EE; --surface:#fff; --surface-alt:#E4EFE6; --line:#D4E3D8; --shadow:0 6px 22px rgba(11,37,48,.07); --shadow-lg:0 16px 34px rgba(11,37,48,.14); } html[data-theme="dark"]{ --page:#0B0D0E; --surface:#141719; --surface-alt:#101314; --line:#262B2E; --ink:#EAF2F4; --muted:#9CB0B8; --sand:#101314; --white:#141719; --shadow:0 6px 22px rgba(0,0,0,.5); --shadow-lg:0 16px 34px rgba(0,0,0,.6); --card-mint:linear-gradient(180deg,#161A1B,#12201C); --card-mint-line:#204A3E; --err-bg:#241413; --err-line:#5A2A22; --navy:#0B0D0E; /* bandeaux de page en sombre */ } /* ajustements de contraste en thème sombre */ html[data-theme="dark"] .pkg-card{box-shadow:var(--shadow)} html[data-theme="dark"] .pkg-card:hover{box-shadow:var(--shadow-lg)} html[data-theme="dark"] .price-card{box-shadow:var(--shadow)} html[data-theme="dark"] .foot{background:#08090A;border-top:1px solid var(--line)} html[data-theme="dark"] .nav{background:rgba(11,13,14,.92);border-bottom:1px solid var(--line)} html[data-theme="dark"] .crc{color:var(--muted)} html[data-theme="dark"] .hero-veil{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(11,13,14,.92))} html[data-theme="dark"] .stops-list{background:var(--surface-alt)} html[data-theme="dark"] .tc-box a{color:#4FD8AC} html[data-theme="dark"] select,html[data-theme="dark"] input,html[data-theme="dark"] textarea{color:var(--ink);color-scheme:dark} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--page);transition:background .25s,color .25s} /* sélecteur de langue : affiche la langue vers laquelle on va, pas celle où l'on est */ .lang-btn{display:flex;align-items:center;justify-content:center;height:34px;padding:0 11px;border-radius:99px; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:12px; font-weight:800;letter-spacing:.06em;text-decoration:none;flex-shrink:0;transition:background .2s} .lang-btn:hover{background:rgba(255,255,255,.24)} /* bouton de bascule de thème */ .theme-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff; width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:flex; align-items:center;justify-content:center;flex-shrink:0;transition:background .2s} .theme-btn:hover{background:rgba(255,255,255,.24)} a{color:inherit} img{max-width:100%} /* nav */ .nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px 22px;background:rgba(6,34,47,.92);backdrop-filter:blur(8px)} .brand img{height:42px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))} .nav-links{display:flex;align-items:center;gap:22px} .nav-links a{color:rgba(255,255,255,.85);text-decoration:none;font-size:13.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase} .nav-links a:hover,.nav-links a.on{color:#fff} .nav-cta{background:linear-gradient(135deg,var(--blue),var(--green));padding:10px 18px;border-radius:99px;color:#fff!important;text-transform:none!important;font-size:14px!important} .nav-burger{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer} @media(max-width:880px){ .nav-burger{display:block} .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;padding:18px;gap:16px} .nav-links.open{display:flex} } /* hero */ .hero,.tour-hero{position:relative;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;min-height:72vh;padding:60px 22px} .tour-hero{min-height:52vh;text-align:left;justify-content:flex-start} .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center} .hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,34,47,.55),rgba(6,34,47,.75))} .hero-inner{position:relative;max-width:820px} .hero h1,.tour-hero h1{font-size:clamp(30px,5.4vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.12;text-shadow:0 2px 18px rgba(0,0,0,.4)} .hero h1 em{font-style:normal;background:linear-gradient(90deg,#7FD8F5,#7FE9CF);-webkit-background-clip:text;background-clip:text;color:transparent} .hero p,.tour-hero p{margin-top:16px;font-size:clamp(15px,2.2vw,19px);color:rgba(255,255,255,.88);line-height:1.6} .hero-ctas{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:13px} .hero-note{margin-top:22px;font-size:13px;color:rgba(255,255,255,.65)} .crumb{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:10px} .crumb a{color:rgba(255,255,255,.9)} .tour-facts{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px} .tour-facts span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:7px 14px;font-size:13.5px;font-weight:600} /* boutons */ .btn{display:inline-block;background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;text-decoration:none; font-weight:700;font-size:16px;padding:15px 30px;border-radius:99px;box-shadow:0 10px 26px rgba(23,184,144,.35);transition:transform .15s} .btn:hover{transform:translateY(-1px)} .btn-light{background:var(--surface);color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.2)} .btn-outline{display:inline-block;border:1.6px solid rgba(255,255,255,.6);color:#fff;text-decoration:none;font-weight:700; font-size:15px;padding:14px 26px;border-radius:99px;background:rgba(255,255,255,.06);transition:background .2s} .btn-outline:hover{background:rgba(255,255,255,.14)} /* strip services */ .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)} .strip-item{background:var(--surface);padding:26px 22px;text-align:center} .strip-item b{display:block;font-size:16px;margin-bottom:4px} .strip-item span{font-size:13.5px;color:var(--muted)} @media(max-width:720px){.strip{grid-template-columns:1fr}} /* sections */ .sec{max-width:1120px;margin:0 auto;padding:64px 22px} .sec.alt{background:var(--sand);max-width:none} .sec.alt>*{max-width:1120px;margin-left:auto;margin-right:auto} .sec h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.01em;text-align:center} .sec-sub{text-align:center;color:var(--muted);font-size:16px;line-height:1.65;max-width:64ch;margin:12px auto 0} .page-head{background:var(--navy);color:#fff;text-align:center;padding:64px 22px 46px} .page-head h1{font-size:clamp(28px,4.5vw,42px);font-weight:800} .page-head p{margin-top:10px;color:rgba(255,255,255,.75);font-size:15.5px} /* packages grid */ .pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;margin-top:34px} .pkg-card{display:block;text-decoration:none;border-radius:18px;overflow:hidden;background:var(--surface); border:1px solid var(--line);box-shadow:0 6px 22px rgba(11,37,48,.07);transition:transform .18s,box-shadow .18s} .pkg-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(11,37,48,.14)} .pkg-photo{height:170px;background-size:cover;background-position:center} .pkg-body{padding:16px 18px 18px} .pkg-meta{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark);font-weight:800} .pkg-body h3{font-size:18px;margin:5px 0 6px;letter-spacing:-.01em} .pkg-body p{font-size:13.5px;color:var(--muted);line-height:1.5;min-height:40px} .pkg-price{margin-top:10px;font-weight:800;font-size:16px} .pkg-price span{font-weight:600;font-size:12.5px;color:var(--muted)} /* tour detail */ .tour-body{padding-top:46px} .tour-cols{display:grid;grid-template-columns:1.2fr .9fr;gap:36px} @media(max-width:840px){.tour-cols{grid-template-columns:1fr}} .tour-body h2{text-align:left;font-size:21px;margin-bottom:10px} .incl{color:var(--ink);font-size:15px;line-height:1.7;background:var(--sand);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:26px} .mini{padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.7} .price-card{background:var(--card-mint,linear-gradient(180deg,#FDFEFF,#F0FBF7));border:1px solid var(--card-mint-line,#BFE9DC);border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(11,37,48,.08);align-self:start} .price-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:12px} .price-table th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:6px 4px;border-bottom:2px solid var(--line)} .price-table td{padding:9px 4px;border-bottom:1px solid var(--line);vertical-align:top} /* Conversion en colóns : était en #93A7AF, soit un contraste de 2,5 sur fond clair — sous le seuil lisible, et pire encore sur le nouveau fond sauge. Passée sur --muted (~4,9). */ .crc{display:block;font-size:11px;color:var(--muted);font-weight:400} .fine{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:16px} /* promesses (repris du prototype design du client) */ .promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:34px} .promise{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)} .promise .tick{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%; background:rgba(23,184,144,.14);color:var(--green);font-weight:800;font-size:14px;margin-bottom:10px} .promise b{display:block;font-size:15.5px;margin-bottom:4px} .promise span:last-child{display:block;font-size:13.5px;color:var(--muted);line-height:1.55} /* policy + legal */ .policy-box{margin-top:40px;background:var(--sand);border:1px solid var(--line);border-radius:16px;padding:22px} .policy-box h3{margin-bottom:10px} .policy-box ul{padding-left:20px;color:var(--muted);font-size:14px;line-height:1.8} .legal{max-width:760px;font-size:15px;line-height:1.75;color:var(--ink)} .legal h3{margin:26px 0 8px} .legal p{margin-bottom:12px} .legal em{color:var(--muted)} /* CTA band */ .cta-band{background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;text-align:center;padding:64px 22px} .cta-band h2{font-size:clamp(24px,3.6vw,34px);font-weight:800} .cta-band p{margin:10px 0 24px;color:rgba(255,255,255,.9)} /* footer */ .foot{background:var(--navy);color:rgba(255,255,255,.8);padding:52px 22px 0} .foot-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;font-size:14px} @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}} .foot b{color:#fff;display:block;margin-bottom:8px} .foot p{margin-bottom:6px;line-height:1.5} .foot a{color:rgba(255,255,255,.8);text-decoration:none} .foot a:hover{color:#fff} .foot .muted{color:rgba(255,255,255,.45);font-size:12.5px} .foot-base{max-width:1120px;margin:26px auto 0;padding:18px 0;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.45)} /* WhatsApp flottant (trust signal spec) */ .wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%; background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.45)}