/* ==========================================================================
   Twibook — feuille de style 2026
   Refonte visuelle : direction "épurée & rassurante".
   Remplace styles.css / mlv.css / mlv-old.css / newversion.css / engine.css
   pour : index.html, hotel/landing-page.phtml, hotel/comparateur-hotels.html,
   location-voiture/comparateur-location-voiture.html
   ========================================================================== */

:root{
  --bg:#F6F7FA;
  --surface:#FFFFFF;
  --border:#E3E6ED;
  --ink:#12141C;
  --ink-soft:#4A4F60;
  --muted:#7A8095;
  --accent:#1656D9;
  --accent-ink:#0C3EA3;
  --accent-soft:#EAF0FE;
  --teal:#0E8F79;
  --teal-soft:#E3F5F1;
  --radius:14px;
  --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(20,23,31,.03);
  --shadow-btn:0 8px 20px -8px rgba(22,86,217,.55);
  --wrap-max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Public Sans',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
h1,h2,h3,h4{
  font-family:'Manrope',system-ui,sans-serif;
  margin:0;
  letter-spacing:-0.01em;
  font-weight:800;
}
p{margin:0;line-height:1.65;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-ink);}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;}
button{font-family:inherit;}

.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 40px;}

/* ---------- buttons & chips ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-sm);font-family:'Manrope',sans-serif;font-weight:700;
  font-size:15px;cursor:pointer;border:none;white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff;padding:14px 26px;box-shadow:var(--shadow-btn);}
.btn-primary:hover{background:var(--accent-ink);color:#fff;}
.btn-ghost{background:transparent;color:var(--ink);padding:10px 16px;border:1px solid var(--border);}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--border);background:#fff;font-size:14px;font-weight:600;color:var(--ink-soft);
}
.chip input{accent-color:var(--accent);margin:0;}
.chip.is-active{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink);}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);}
.eyebrow{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;}

.check-list{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;list-style:none;margin-top:22px;}
.check-list li{font-size:14px;color:var(--ink-soft);font-weight:600;display:flex;align-items:center;gap:7px;}
.check-list svg{flex:none;}

/* ---------- header ---------- */
.tw-header{position:relative;height:84px;display:flex;align-items:center;border-bottom:1px solid var(--border);background:#fff;z-index:50;}
.tw-header .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;}
.tw-logo{display:flex;align-items:center;gap:10px;color:var(--ink);}
.tw-logo span{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;}
.tw-nav{display:flex;align-items:center;gap:36px;list-style:none;}
.tw-nav a{color:var(--ink-soft);font-weight:600;font-size:15px;}
.tw-nav a.is-active{color:var(--accent);font-weight:700;}
.tw-header-tag{font-size:14px;color:var(--muted);font-weight:600;}
.tw-burger{display:none;background:none;border:none;padding:8px;margin:-8px;border-radius:8px;color:var(--ink);cursor:pointer;}
.tw-burger:hover{background:var(--bg);}

/* menu mobile (panneau déroulant sous le header, ouvert/fermé par le bouton .tw-burger) */
.tw-mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 16px 28px -12px rgba(18,20,28,.16);z-index:49;}
.tw-mobile-nav.is-open{display:block;}
.tw-mobile-nav ul{list-style:none;padding:8px 20px 16px;}
.tw-mobile-nav a{display:block;padding:13px 2px;font-weight:600;font-size:15.5px;color:var(--ink);border-bottom:1px solid var(--border);}
.tw-mobile-nav li:last-child a{border-bottom:none;}
.tw-mobile-nav a.is-active{color:var(--accent);}
@media (min-width:901px){.tw-mobile-nav{display:none !important;}}

.breadcrumb{padding-top:18px;font-size:13px;color:var(--muted);}
.breadcrumb a{color:var(--muted);}
.breadcrumb .current{color:var(--ink);}

/* ---------- hero / search ---------- */
.hero{padding:56px 0 44px;}
.hero.is-compact{padding:20px 0 40px;}
.hero-copy{max-width:640px;margin:0 auto;text-align:center;}
.hero-copy.align-left{margin:0;text-align:left;max-width:680px;}
.hero h1{font-size:44px;line-height:1.12;}
.hero.is-compact h1{font-size:36px;}
.hero-copy p{margin-top:16px;font-size:17px;color:var(--ink-soft);}

.search-card{margin-top:36px;padding:8px;}
.search-tabs{display:flex;gap:4px;padding:8px 8px 0;overflow-x:auto;}
.search-tab{padding:12px 20px;border-radius:10px 10px 0 0;font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:8px;}
.search-tab.is-active{background:var(--bg);color:var(--ink);}
.search-panel{background:var(--bg);border-radius:0 10px 10px 10px;padding:22px;}
.search-trip-type{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.search-fields{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:10px;}
.search-fields.fields-3{grid-template-columns:1.3fr 1fr 1fr 1fr auto;}
.search-field{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;}
.search-field .label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;}
.search-field .value{font-size:15px;font-weight:700;margin-top:2px;}
.search-field .value.placeholder{color:var(--muted);}
.search-fields .btn-primary{height:44px;padding:0 28px;}

.search-single{display:flex;gap:8px;max-width:720px;margin:28px auto 0;padding:10px;}
.search-single .field{flex:1;display:flex;align-items:center;gap:10px;padding:8px 16px;}
.search-single .field span{font-size:16px;color:var(--muted);text-align:left;}
.search-hint{margin-top:10px;font-size:12.5px;color:var(--muted);text-align:center;}

/* ---------- widget shell (3rd-party engines) ---------- */
.engine-shell{border:none;background:transparent;}
#searchboxInc{font:12px/1.5 Arial,Helvetica,sans-serif;}

/* ---------- usp cards ---------- */
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.usp-card{padding:26px;}
.usp-card svg{color:var(--accent);}
.usp-card h3{font-size:18px;margin-top:14px;}
.usp-card p{margin-top:8px;color:var(--ink-soft);font-size:14.5px;}

/* ---------- step cards ---------- */
.step-card{padding:26px;}
.step-num{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-family:'Manrope',sans-serif;font-weight:800;}
.step-card h3{font-size:17px;margin-top:14px;}
.step-card p{margin-top:8px;color:var(--ink-soft);font-size:14px;}

/* ---------- photo banner ---------- */
.photo-banner{position:relative;height:220px;overflow:hidden;border:none;}
.photo-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photo-banner .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,20,28,.68) 0%,rgba(18,20,28,.34) 50%,rgba(18,20,28,.02) 78%);}
.photo-banner .content{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;max-width:480px;}
.photo-banner .content .eyebrow{color:#DCE6FE;}
.photo-banner h3{color:#fff;font-size:24px;margin-top:8px;}
.photo-banner p{color:#E7EAF3;margin-top:8px;font-size:14px;}
.photo-banner .btn-primary{margin-top:16px;width:fit-content;}

/* ---------- editorial content ---------- */
.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:56px;}
.content-grid.reverse{grid-template-columns:1fr 1.6fr;}
.content-main h2{font-size:26px;margin-top:34px;}
.content-main h2:first-child{margin-top:0;}
.content-main p{margin-top:12px;color:var(--ink-soft);font-size:15.5px;}
.content-main ul{margin:14px 0 0;padding-left:20px;color:var(--ink-soft);font-size:15.5px;line-height:1.9;}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
.check-grid .item{display:flex;gap:10px;}
.check-grid svg{flex:none;margin-top:2px;color:var(--teal);}
.check-grid p{font-size:14.5px;color:var(--ink-soft);margin:0;}

.aside-stack{display:flex;flex-direction:column;gap:16px;}
.callout{padding:22px;background:var(--accent-soft);border-color:transparent;}
.callout h4{font-size:15px;color:var(--accent-ink);font-weight:800;}
.callout p{margin-top:8px;font-size:14px;color:var(--accent-ink);}
.link-card{padding:22px;}
.link-card h4{font-size:15px;}
.link-card .links{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.link-card a{font-size:14.5px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;}
.link-card a span{color:var(--accent);}

/* ---------- chip / shortcut grids ---------- */
.shortcut-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.shortcut-grid a{padding:16px;display:block;font-weight:700;font-size:14.5px;color:var(--ink);}
.tag-wrap{display:flex;flex-wrap:wrap;gap:10px;}
.tag-wrap span,.tag-wrap a{padding:9px 16px;font-size:13.5px;font-weight:600;display:inline-block;color:var(--ink-soft);}

/* ---------- hotel cards ---------- */
.hotel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.hotel-card{overflow:hidden;}
.hotel-card .photo{background:linear-gradient(135deg,#DCE6FB,#EFF3FC);height:130px;display:flex;align-items:center;justify-content:center;}
.hotel-card .photo img{width:100%;height:100%;object-fit:cover;}
.hotel-card .body{padding:16px;}
.hotel-card .name{font-weight:700;font-size:14.5px;}
.hotel-card .meta{font-size:12.5px;color:var(--muted);margin-top:3px;}
.hotel-card .price-row{margin-top:10px;display:flex;justify-content:space-between;align-items:center;}
.hotel-card .price{font-weight:800;color:var(--accent-ink);}
.hotel-card .price small{font-weight:500;font-size:12px;color:var(--muted);}
.hotel-card .cta{font-size:13px;font-weight:700;}

/* single-hotel gallery (type=location) */
.hotel-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;border-radius:var(--radius);overflow:hidden;height:340px;}
.hotel-gallery img{width:100%;height:100%;object-fit:cover;}
.hotel-gallery img:first-child{grid-row:1 / span 2;}
.fact-list{display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--ink-soft);}
.fact-list .row{display:flex;justify-content:space-between;gap:12px;}
.fact-list strong{color:var(--ink);text-align:right;}

/* ---------- vehicle types ---------- */
.vehicle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px;}
.vehicle-card{padding:22px;}
.vehicle-card svg{color:var(--accent);}
.vehicle-card h4{font-size:15.5px;margin-top:12px;}
.vehicle-card p{margin-top:6px;font-size:13.5px;color:var(--ink-soft);}

/* ---------- partner strip ---------- */
.partner-strip{padding:20px 30px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.partner-strip .label{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.partner-strip .logos{display:flex;gap:40px;flex-wrap:wrap;}
.partner-strip .logos span{font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;color:var(--ink-soft);}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:10px;}
.faq-item{padding:18px 22px;}
.faq-item summary{cursor:pointer;list-style:none;font-weight:700;font-size:15px;display:flex;justify-content:space-between;gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .sign{color:var(--accent);flex:none;}
.faq-item p{margin-top:10px;color:var(--ink-soft);font-size:14px;}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--accent);border-radius:16px;padding:28px 36px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.cta-banner h3{color:#fff;font-size:20px;}
.cta-banner p{color:#DCE6FE;margin-top:6px;font-size:14px;}
.cta-banner .btn-primary{background:#fff;color:var(--accent-ink);}

/* ---------- fil d'Ariane réel, généré par hotel/breadcrumbs.php ----------
   breadcrumbs.php n'est pas modifié : on habille juste ses classes réelles
   (p.ariane > span > a.ariane / span.ariane pour le séparateur "›"). */
.ariane2 p.ariane{margin:0;}
.ariane2 a.ariane{color:var(--muted);font-weight:600;}
.ariane2 a.ariane:hover{color:var(--accent-ink);}
.ariane2 span.ariane{color:var(--muted);}

/* titre injecté par les includes légataires (snippet-locations.php, etc.) */
.newh3{font-size:19px;margin-bottom:14px;}

/* ---------- hôtels à proximité / présence mondiale, injectés par hotel/snippet-locations.php ----------
   snippet-locations.php n'est pas modifié (boucles/données hors périmètre) : on habille
   ses classes réelles — .agencies > .newh3 / ul / .card / .cardcity / .cardcontinent / .agencieslink / .seemore. */
.agencies{display:flex;flex-wrap:wrap;gap:14px;}
.agencies > .newh3{flex:0 0 100%;margin-bottom:2px;}
.agencies > ul{flex:0 0 100%;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;}
.agencies > ul li{font-size:14.5px;}
.agencies > ul a{color:var(--ink-soft);font-weight:600;}
.agencies > ul a:hover{color:var(--accent-ink);}
.agencies .seemore{flex:0 0 100%;}
.agencies .seemore a{color:var(--accent);font-weight:700;font-size:13.5px;}
.agencies .hide-agencies{display:none;}
.agencies.agencies-visible .show-agencies{display:none;}
.agencies.agencies-visible .hide-agencies{display:inline;}

.agencies .card{flex:0 0 100%;max-width:420px;padding:22px;}
.agencies .card span{display:block;color:var(--ink-soft);font-size:14px;line-height:1.7;}
.agencies .card strong{display:block;margin-bottom:6px;}
.agencies .card strong span{font-family:'Manrope',sans-serif;color:var(--ink);font-size:16px;font-weight:800;line-height:1.3;}

.cardcity,.cardcontinent{
  flex:1 1 220px;float:none !important;width:auto !important;height:auto !important;margin:0 !important;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 16px;
}
.cardcity strong a{color:var(--ink);font-weight:700;font-size:14.5px;}
.cardcity span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;}
.agencieslink,.cardcontinent .agencieslink{margin-top:2px;}
.agencieslink a,.cardcontinent a{color:var(--accent-ink);font-weight:700;font-size:14px;}

/* ---------- listes A-Z (hotel/country.php, city.php, location.php) + js/jquery-listnav.js ----------
   Ces 3 includes (requêtes MySQL) ne sont pas modifiés : ils génèrent des <a class="topmlvlinks">
   à plat, affichés dans le conteneur .tag-wrap#my-list déjà présent dans landing-page.phtml.
   jquery-listnav.js insère lui-même la barre de lettres (.listNav > .ln-letters) juste avant
   #my-list : on l'habille ici, et .listNavHide doit rester fonctionnel (masquage réel au clic). */
.topmlvlinks i.ct-icon-location{display:none;} /* ancienne police d'icônes, retirée du design */
#my-list li{list-style:none;}
.listNav{margin-bottom:16px;position:relative;}
.listNavHide {position: absolute;overflow: hidden;clip: rect(0 0 0 0);height: 1px;width: 1px;margin: -1px;padding: 0;border: 0;}
.ln-letters{display:flex;flex-wrap:wrap;gap:6px;}
.ln-letters a{
  display:flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;
  border-radius:8px;background:#fff;border:1px solid var(--border);
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;color:var(--ink-soft);text-decoration:none;
}
.ln-letters a:hover{background:var(--bg);color:var(--ink);}
.ln-letters a.ln-selected{background:var(--accent);border-color:transparent;color:#fff;}
.ln-letters a.ln-disabled{color:var(--border);}
.ln-letter-count{
  position:absolute;background:var(--ink);color:#fff;font-size:11px;font-weight:700;
  border-radius:6px;padding:2px 6px;text-align:center;pointer-events:none;
}
.listNavHide{display:none;}
#my-list .ln-no-match,#my-list .ln-init-hidden{width:100%;color:var(--muted);font-size:13.5px;}
.allmlv{display:none!important;}
.allnumber{display:none!important;}

/* ---------- tabcontent (widget "villes de départ", injecté par tabcontent.php) ----------
   tabcontent.php n'est pas modifié (structure/liens PHP hors périmètre) : on habille
   uniquement les classes réelles qu'il génère —
   .systeme_onglets > .contenu_onglets > .contenu_onglet > ul (avec un h4.newh4 en tête) > li > a.
   Les inline styles float/width du fichier d'origine sont neutralisés en passant les
   colonnes en flexbox, sans toucher au fichier PHP lui-même. */
#tabcontent{padding-bottom:56px;}
#tabcontent > h3{font-size:19px;margin-bottom:16px;}
#tabcontent .systeme_onglets{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:30px 32px;
}
#tabcontent .contenu_onglet{display:flex !important;flex-wrap:wrap;gap:28px;}
#tabcontent .contenu_onglet ul{
  float:none !important;width:auto !important;margin:0 !important;
  flex:1 1 200px;list-style:none;padding:0;
}
#tabcontent .contenu_onglet li{margin-top:9px;font-size:14px;}
#tabcontent .contenu_onglet li:first-child{margin-top:0;}
#tabcontent .contenu_onglet a{color:var(--ink-soft);font-weight:600;text-decoration:none;}
#tabcontent .contenu_onglet a:hover{color:var(--accent-ink);}
#tabcontent .newh4{
  display:block;font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
  margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--border);
}

/* ---------- footer ---------- */
.tw-footer{border-top:1px solid var(--border);background:#fff;padding:40px 0 28px;}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.footer-brand{max-width:280px;}
.footer-brand p{margin-top:12px;font-size:13px;color:var(--muted);}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap;}
.footer-col h4{font-family:'Manrope',sans-serif;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.footer-col .links{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.footer-col a{font-size:14px;color:var(--ink-soft);}
.footer-bottom{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
.tw-footer.is-simple .footer-bottom{margin-top:0;padding-top:0;border-top:none;}

/* ==========================================================================
   Responsive — mobile & tablette
   ========================================================================== */
@media (max-width: 900px){
  .wrap{padding:0 20px;}
  .tw-header{height:64px;}
  .tw-logo span{font-size:19px;}
  .tw-nav,.tw-header-tag{display:none;}
  .tw-burger{display:block;}

  .hero{padding:28px 0 20px;}
  .hero.is-compact{padding:14px 0 22px;}
  .hero-copy,.hero-copy.align-left{text-align:left;max-width:none;}
  .hero h1{font-size:26px;}
  .hero.is-compact h1{font-size:24px;}
  .hero-copy p{font-size:14.5px;}

  .search-card{margin-top:20px;}
  .search-fields,.search-fields.fields-3{grid-template-columns:1fr;}
  .search-fields .btn-primary{width:100%;height:auto;padding:15px;}
  .check-list{justify-content:flex-start;flex-direction:column;gap:8px;margin-top:16px;}

  .usp-grid,.vehicle-grid{grid-template-columns:1fr;}
  .content-grid,.content-grid.reverse{grid-template-columns:1fr;gap:28px;}
  .check-grid{grid-template-columns:1fr;}
  .shortcut-grid{grid-template-columns:1fr;}
  .hotel-grid{grid-template-columns:1fr 1fr;}
  .hotel-gallery{grid-template-columns:1fr 1fr;height:auto;}
  .hotel-gallery img{height:140px;}
  .hotel-gallery img:first-child{grid-row:auto;grid-column:1 / span 2;height:200px;}

  .partner-strip{flex-direction:column;align-items:flex-start;}
  .partner-strip .logos{gap:22px;}

  .cta-banner{flex-direction:column;align-items:flex-start;}

  .footer-top{flex-direction:column;gap:24px;}
  .footer-cols{gap:32px;}
  .footer-bottom{flex-direction:column;gap:6px;}

  #tabcontent .systeme_onglets{padding:20px;}
  #tabcontent .contenu_onglet{gap:20px;}
  #tabcontent .contenu_onglet ul{flex:1 1 100%;}
}

@media (max-width: 640px){
  .hotel-grid{grid-template-columns:1fr;}
}