/* Cavalotrans — sitewide, migre sur le design Nocturne du 22/09 (meme langage
   visuel que /devis-transport/chat/, voir static/nocturne-styles.css). Les
   noms de classes existants sont conserves (.hero, .card, .btn-amber...) pour
   ne pas toucher aux templates : seules leurs valeurs changent. */
:root{
  --color-bg:#161826; --color-surface:#232532; --color-text:#e9e9ed;
  --color-accent:#9184d9;
  --color-accent-100:#f5f4ff; --color-accent-200:#e7e5fe; --color-accent-300:#d2cefd;
  --color-accent-400:#b5abfc; --color-accent-500:#968ae0; --color-accent-600:#796cbf;
  --color-accent-700:#5d5294; --color-accent-800:#423a6a; --color-accent-900:#2b2741;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px;
  --shadow-sm:0 0 0 1px #3f424d;
  --shadow-md:0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,.55);
  --good:#7fd9a0; --good-bg: color-mix(in srgb, #7fd9a0 15%, transparent);
  /* alias conserves pour ne pas casser d'anciennes references */
  --navy: var(--color-accent-900); --navy-2: var(--color-accent-700); --ink: var(--color-bg);
  --amber: var(--color-accent); --amber-dark: var(--color-accent-600);
  --bg: var(--color-bg); --surface: var(--color-surface); --border: var(--color-divider);
  --text: var(--color-text); --mute: color-mix(in srgb, var(--color-text) 58%, transparent);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:"Inter",-apple-system,sans-serif;
  padding-inline:16px;
}
h1,h2,h3{font-family:"Inter",sans-serif; font-weight:500; letter-spacing:-.015em;}
a{color:var(--color-accent); text-decoration-color: color-mix(in srgb, var(--color-accent) 50%, transparent);}
a:hover{color:var(--color-accent-300);}
.wrap{max-width:1080px; margin:0 auto;}

header.site{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:18px; border-bottom:1px solid var(--color-divider); flex-wrap:wrap; gap:12px;
}
.logo{font-family:"Inter",sans-serif; font-weight:600; font-size:16px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-text); text-decoration:none; display:flex; align-items:center; gap:10px;}
.logo-orb{width:24px; height:24px; border-radius:50%; border:1px solid var(--color-accent); display:grid; place-items:center;
  box-shadow:0 0 14px rgba(145,132,217,.35); flex:none;}
.logo-orb span{width:8px; height:8px; border-radius:50%; background:var(--color-accent); display:block;}
nav.site a{margin-left:18px; font-size:14.5px; font-weight:500; color:var(--color-text); text-decoration:none;}
nav.site a:hover{color:var(--color-accent-300);}

.hero{
  background:linear-gradient(160deg, var(--color-accent-900) 0%, var(--color-bg) 100%);
  border:1px solid var(--color-divider);
  color:var(--color-text); border-radius:var(--radius-lg); padding:46px 32px; margin:28px 0;
}
.hero h1{color:#fff; font-size:clamp(28px,4.2vw,40px); margin:0 0 12px; text-wrap:balance;}
.hero p{font-size:16px; color:color-mix(in srgb, var(--color-text) 80%, transparent); max-width:60ch; line-height:1.55; margin:0 0 22px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-md); font-weight:600;
  text-decoration:none; font-size:14.5px; border:1px solid transparent; cursor:pointer;
  font-family:"Inter",sans-serif; background:transparent;
}
.btn-amber{color:var(--color-accent); border-color:var(--color-accent);}
.btn-amber:hover{background:color-mix(in srgb, var(--color-accent) 12%, transparent);}
.btn-outline{background:transparent; color:var(--color-text); border-color:var(--color-divider); margin-left:10px;}
.btn-outline:hover{border-color:var(--color-accent); color:var(--color-accent-300);}

.two-cols{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:30px 0;}
@media (max-width:680px){.two-cols{grid-template-columns:1fr;}}
.card{background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:26px;}
.card .eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent); font-weight:600;}
.card h2{font-size:21px; margin:8px 0 10px; color:var(--color-text);}
.card p{color:color-mix(in srgb, var(--color-text) 68%, transparent); font-size:14.5px; line-height:1.55;}

section{margin:36px 0;}
section h1{font-size:32px; margin:0 0 6px; color:var(--color-text);}
section h2{font-size:24px; margin-bottom:6px; color:var(--color-text);}
section .lead{color:color-mix(in srgb, var(--color-text) 68%, transparent); font-size:15px; max-width:66ch; margin-bottom:18px;}

.regions-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px;}
.region-chip{
  display:block; background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md);
  padding:12px 14px; text-decoration:none; color:var(--color-text); font-weight:500; font-size:14px;
}
.region-chip:hover{border-color:var(--color-accent); color:var(--color-accent-300);}

form.form{background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:26px; max-width:560px;}
form.form label{display:block; font-size:12px; color:color-mix(in srgb, var(--color-text) 70%, transparent); font-weight:500; margin:14px 0 5px;}
form.form input, form.form textarea, form.form select{
  width:100%; padding:10px 12px; border:1px solid var(--color-divider); border-radius:var(--radius-md);
  font-size:14.5px; font-family:inherit; background:var(--color-bg); color:var(--color-text);
}
form.form input:focus-visible, form.form textarea:focus-visible, form.form select:focus-visible{
  outline:2px solid var(--color-accent); outline-offset:0; border-color:var(--color-accent);
}
form.form textarea{min-height:80px;}
form.form .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
form.form button{margin-top:20px;}
@media (max-width:600px){
  /* Depart/Arrivee (et email/tel) s'empilent — deux champs 1fr 1fr sur
     ~340px utiles rendaient les placeholders illisibles. Date/Chevaux
     restent cote a cote (demande explicite JT 22/09) via .row2-keep. */
  form.form .row2{grid-template-columns:1fr;}
  form.form .row2.row2-keep{grid-template-columns:1fr 1fr; gap:8px;}
}

table{border-collapse:collapse; width:100%; font-size:13.5px;}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--color-divider); color:var(--color-text);}
th{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:color-mix(in srgb, var(--color-text) 60%, transparent);}

.trip-card{background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:12px;}
.trip-card .route{font-weight:600; font-size:16px; color:var(--color-text);}
.trip-card .meta{color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:13px; margin-top:4px;}
.pill{display:inline-block; background:var(--good-bg); color:var(--good); font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:999px;}

.notice{background:var(--good-bg); color:var(--good); border-radius:var(--radius-md); padding:12px 16px; font-size:14px; margin-bottom:18px;}

footer.site{border-top:1px solid var(--color-divider); padding:28px 0 50px; margin-top:50px;
  color:color-mix(in srgb, var(--color-text) 50%, transparent); font-size:12.5px;}
footer.site a{color:color-mix(in srgb, var(--color-text) 55%, transparent);}
footer.site nav a{margin-right:16px;}

.legal h2{font-size:18px; margin-top:26px; color:var(--color-text);}
.legal p, .legal li{color:color-mix(in srgb, var(--color-text) 68%, transparent); font-size:14px; line-height:1.6;}

/* — article longue-forme (23/09, contenu SEO type page pays/international) — */
.seo-article{max-width:860px;}
.seo-article h2{font-size:26px; margin:48px 0 16px;}
.seo-article h3{font-size:19px; margin:28px 0 10px;}
.seo-article p{font-size:14.5px; line-height:1.7; color:color-mix(in srgb, var(--color-text) 82%, transparent);}
.seo-article ul, .seo-article ol{margin:0 0 16px; padding-left:22px; font-size:14.5px; line-height:1.7; color:color-mix(in srgb, var(--color-text) 82%, transparent);}
.seo-article li{margin-bottom:6px;}
.seo-article strong{color:var(--color-text);}
.seo-essentiel{list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; margin:20px 0 28px;}
.seo-essentiel li{background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md); padding:12px 16px;}
.seo-faq-item{border-bottom:1px solid var(--color-divider); padding:16px 0;}
.seo-faq-item h3{margin:0 0 8px; font-size:15.5px;}
.seo-sources{font-size:12.5px;}
.seo-cta{margin:20px 0 8px;}