/* 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 nocturne (23/09) : copie du .ct-header du wizard (devis-conversation.css)
   pour que TOUTES les pages qui etendent base.html portent le meme header que la home.
   Ne pas re-diverger : toute modif du header doit se faire ICI ET dans devis-conversation.css. */
.ct-header{
  position:relative; z-index:2; display:flex; align-items:center; gap:16px;
  padding:18px 0; max-width:1080px; width:100%; margin:0 auto; box-sizing:border-box;
  border-bottom:1px solid var(--color-divider);
}
.ct-brand{display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none; color:inherit;}
.ct-brand-orb{width:26px; height:26px; border-radius:50%; object-fit:cover; box-shadow:0 0 18px rgba(145,132,217,.35); flex:none;}
.ct-brand-name{font-family:"Inter",sans-serif; font-weight:500; font-size:15px; letter-spacing:.22em; text-transform:uppercase; color:var(--color-text);}
.ct-nav{display:flex; gap:16px; align-items:center; margin-right:22px;}
.ct-nav a{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px; color:color-mix(in srgb, var(--color-text) 78%, transparent); text-decoration:none;}
.ct-nav a:hover{color:var(--color-accent-300); background:color-mix(in srgb, var(--color-accent) 12%, transparent);}
.ct-nav-ico{width:19px; height:19px;}
.ct-lang-select{position:relative;}
.ct-lang-current{display:flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; border:1px solid var(--color-divider); background:transparent; cursor:pointer; font:inherit;}
.ct-lang-current:hover{border-color:var(--color-accent-700);}
.ct-flag{display:inline-flex; align-items:center; line-height:1;}
.ct-flag svg{border-radius:2px; display:block;}
.ct-lang-caret{font-size:9px; color:color-mix(in srgb, var(--color-text) 55%, transparent);}
.ct-lang-menu{position:absolute; top:calc(100% + 8px); right:0; z-index:20; list-style:none; margin:0; padding:6px;
  min-width:150px; background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md); box-shadow:var(--shadow-md);}
.ct-lang-menu li{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius-sm); font-size:13.5px; cursor:pointer; color:var(--color-text);}
.ct-lang-menu li:hover, .ct-lang-menu li.active{background:color-mix(in srgb, var(--color-accent) 16%, transparent); color:var(--color-accent-200);}
.ct-langs{display:flex; gap:6px; align-items:center;}
.ct-hidden{display:none !important;}
@media (max-width:760px){
  .ct-header{padding:10px 0; gap:6px;}
  .ct-brand{margin-right:auto; gap:6px;}
  .ct-brand-name{font-size:11.5px; letter-spacing:.06em;}
  .ct-nav{gap:4px; margin-right:4px;}
  .ct-nav a{width:28px; height:28px; font-size:12px; white-space:nowrap;}
  .ct-nav-ico{width:16px; height:16px;}
  .ct-nav-secondary{display:none;}
  .ct-langs{gap:4px;}
  .ct-lang-current{padding:3px 6px; gap:4px;}
}

/* — popup capture email "porte" (23/09, demande JT) : bloque les 2 premieres
   tentatives de navigation depuis /pays/, laisse passer a la 3e. Compteur en
   sessionStorage, remis a zero a chaque nouvel onglet/visite — voulu. */
.ct-gate-backdrop{position:fixed; inset:0; background:rgba(10,10,16,.72); backdrop-filter:blur(2px); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;}
.ct-gate{position:relative; background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:28px; max-width:400px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.ct-gate-close{position:absolute; top:10px; right:12px; background:none; border:none; color:color-mix(in srgb, var(--color-text) 55%, transparent); font-size:22px; line-height:1; cursor:pointer; padding:6px;}
.ct-gate-close:hover{color:var(--color-text);}
.ct-gate h3{margin:0 0 8px; font-size:19px; color:var(--color-text);}
.ct-gate p{margin:0 0 16px; font-size:13.5px; color:color-mix(in srgb, var(--color-text) 72%, transparent); line-height:1.5;}
.ct-gate-form{display:flex; flex-direction:column; gap:10px;}
.ct-gate-form input[type="email"]{padding:11px 12px; border:1px solid var(--color-divider); border-radius:var(--radius-md); background:var(--color-bg); color:var(--color-text); font-size:14px; font-family:inherit;}
.ct-gate-msg{font-size:12.5px; min-height:16px;}

/* — cartes pays enrichies /pays/ (23/09, demande JT) — */
.pays-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin-top:22px;}
.pays-card{background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:18px; text-decoration:none; display:flex; flex-direction:column; gap:12px; transition:border-color .15s, transform .15s;}
.pays-card:hover{border-color:var(--color-accent-700); transform:translateY(-2px);}
.pays-card-head{display:flex; align-items:center; gap:12px;}
.pays-card-flag{width:32px; height:22px; flex:none; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px var(--color-divider);}
.pays-card-flag svg{width:100%; height:100%; display:block;}
.pays-card-headtext{display:flex; flex-direction:column; gap:2px; min-width:0;}
.pays-card-name{font-weight:600; font-size:15px; color:var(--color-text);}
.pays-card-sub{font-size:11px; color:color-mix(in srgb, var(--color-text) 55%, transparent);}
.pays-card-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px 10px; font-size:12px; padding-top:10px; border-top:1px solid var(--color-divider);}
.pays-card-stat b{display:block; font-size:15px; color:var(--color-accent-300); font-weight:600;}
.pays-card-stat span{color:color-mix(in srgb, var(--color-text) 60%, transparent);}
.pays-card-note{font-size:10.5px; color:color-mix(in srgb, var(--color-text) 42%, transparent); margin-top:2px;}

/* — moyenne generale prix/km (demande JT 23/09), /pays/ et home — */
.pays-moyenne{display:flex; align-items:center; gap:18px; background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:16px 20px; margin:18px 0 8px; flex-wrap:wrap;}
.pays-moyenne-chiffre{font-family:"Inter",sans-serif; font-weight:700; font-size:30px; color:var(--color-accent-300); flex:none;}
.pays-moyenne-chiffre span{font-size:14px; font-weight:500; color:color-mix(in srgb, var(--color-text) 60%, transparent);}
.pays-moyenne-texte{font-size:12px; line-height:1.5; color:color-mix(in srgb, var(--color-text) 68%, transparent); max-width:56ch;}

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