/* 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;}
html{height:100%;}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:"Inter",-apple-system,sans-serif;
  padding-inline:16px;
  min-height:100%; display:flex; flex-direction:column;
}
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);}
/* Pied de page toujours colle en bas, meme sur une page courte (JT 23/09 :
   "il n'est pas en pied de page" - sans ca, une fiche pays a peu de
   transporteurs laisse le footer flotter au milieu de l'ecran). */
.wrap{max-width:1080px; margin:0 auto; width:100%; flex:1; display:flex; flex-direction:column;}
.wrap > main{flex:1;}

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;}
/* Table qui deborde sur mobile (JT 23/09, mesure : 506px dans un viewport
   390px) : elle devient son propre scroll horizontal au lieu d'etirer
   toute la page. */
@media (max-width:700px){
  table{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;}
}
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:36px 0 40px; 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); text-decoration:none;}
footer.site a:hover{color:var(--color-accent-300);}
footer.site nav a{margin-right:16px;}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:28px;}
.footer-col{display:flex; flex-direction:column; gap:8px;}
.footer-title{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text); font-weight:600; margin-bottom:2px;}
.footer-newsletter{grid-column:span 1;}
.footer-nl-form{display:flex; gap:6px; margin-top:4px;}
.footer-nl-input{flex:1; min-width:0; padding:8px 10px; border:1px solid var(--color-divider); border-radius:var(--radius-md); background:var(--color-bg); color:var(--color-text); font-size:12.5px;}
.footer-nl-btn{padding:8px 14px; font-size:12.5px; white-space:nowrap;}
.footer-nl-msg{margin-top:8px; font-size:12px;}
@media (max-width:700px){
  .footer-grid{grid-template-columns:1fr;}
  .footer-newsletter{grid-column:1;}
}
@media (max-width:480px){
  .footer-nl-form{flex-direction:column;}
  .footer-nl-btn{width:100%;}
}

.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;}

/* — carte du reseau (23/09) : pas une carte geographique precise (aucune
   source SVG externe fiable/licenciee trouvee dans le temps imparti) mais
   une carte-reseau stylisee, positions approximatives, dans l'esprit
   "tableau de bord" deja etabli sur le site. — */
@keyframes euDash { to { stroke-dashoffset: -300; } }
@keyframes euPulse { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.25); } }
@keyframes euFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .eu-link, .eu-hub-ring, .eu-node { animation: none !important; }
}

.eu-map-wrap { position: relative; margin: 24px 0 8px; background: linear-gradient(160deg,#1a1c2b 0%,#14151f 100%); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; }
.eu-map { display: block; width: 100%; height: auto; }
.eu-grid-line { stroke: color-mix(in srgb, var(--color-text) 6%, transparent); stroke-width: 1; pointer-events: none; }
.eu-map circle[fill^="url(#euGlow"] { pointer-events: none; }
.eu-link {
  fill: none; stroke: var(--color-accent); stroke-width: 1.1; opacity: .55;
  stroke-dasharray: 4 5; animation: euDash 14s linear infinite, euFadeIn .6s ease both;
}
.eu-node { animation: euFadeIn .5s ease both; cursor: pointer; pointer-events: bounding-box; }
.eu-node-link { outline: none; }
.eu-node-link:focus-visible .eu-dot { stroke: #fff; stroke-width: 2; }
.eu-dot { fill: var(--color-accent-400); transition: r .15s ease, fill .15s ease; }
.eu-node-link:hover .eu-dot, .eu-node-link:focus-visible .eu-dot { fill: var(--color-accent-200); }
.eu-hub-ring { fill: none; stroke: var(--color-accent-300); stroke-width: 1.5; transform-origin: center; transform-box: fill-box; animation: euPulse 2.6s ease-in-out infinite; }
.eu-label {
  font-size: 9.5px; fill: color-mix(in srgb, var(--color-text) 62%, transparent); text-anchor: middle;
  pointer-events: none; font-family: "Inter", sans-serif;
}
.eu-node-hub .eu-label { fill: var(--color-accent-200); font-weight: 600; }
.eu-node-link:hover .eu-label, .eu-node-link:focus-visible .eu-label { fill: var(--color-text); }
.eu-tooltip {
  position: absolute; top: 0; left: 0; pointer-events: none; background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm); padding: 5px 10px;
  font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .12s ease; box-shadow: var(--shadow-sm);
  z-index: 3;
}
.eu-tooltip.visible { opacity: 1; }
@media (max-width: 560px) { .eu-label { font-size: 8px; } }