/* ===================================================================
   Europe Carpooling — Redesign 2026
   Palette : bleu #0483A3 / orange #fd7d00
   Ce fichier surcharge application.css (Theme17) sans le modifier.
   Charge en dernier, apres application.css.
   =================================================================== */

:root{
  --ec-blue:#0483A3;
  --ec-blue-dark:#062f38;
  --ec-navy:#0c3c47;
  --ec-navy-deep:#082b33;
  --ec-orange:#fd7d00;
  --ec-orange-dark:#d96900;
  --ec-bg-soft:#f2f7f8;
  --ec-text:#1a2b30;
  --ec-text-muted:#8a9599;
  --ec-white:#ffffff;
  --ec-radius:12px;
  --ec-shadow:0 4px 16px rgba(8,43,51,0.10);
}

/* -------------------------------------------------------------
   1. Bandeau utilitaire (paiement / langues / reseaux sociaux)
------------------------------------------------------------- */
#top-part{
  background:var(--ec-navy-deep) !important;
}
#top-part .top-part-inner-ho{
  border-bottom:1px solid rgba(255,255,255,0.08);
}
#top-part select.custom-select,
#top-part select.custom-select1{
  background-color:rgba(255,255,255,0.08) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  border-radius:6px;
}

/* -------------------------------------------------------------
   2. Barre logo + navigation principale
------------------------------------------------------------- */
.top-part-inner-ho-bot{
  background:var(--ec-blue) !important;
  padding-top:14px;
  padding-bottom:14px;
}
.top-part-inner-ho-bot .logo img{
  max-height:34px;
  width:auto;
}
.navigation ul.nav{
  display:flex;
  align-items:center;
  gap:6px;
}
.navigation ul.nav li a{
  color:rgba(255,255,255,0.85) !important;
  font-weight:500;
  padding:8px 16px !important;
  border-radius:8px;
  transition:background 0.2s ease, color 0.2s ease;
}
.navigation ul.nav li a:hover,
.navigation ul.nav li a.active{
  background:rgba(255,255,255,0.14) !important;
  color:#fff !important;
}
.login-b a{
  color:#fff !important;
}
.login-b a b{
  font-weight:500;
}

/* -------------------------------------------------------------
   3. Hero + recherche
------------------------------------------------------------- */
#sldier{
  position:relative;
}
#finder{
  position:relative;
}
#finder::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(4,30,38,0.60), rgba(4,30,38,0.78));
  z-index:1;
  pointer-events:none;
}
#finder .container.carpool{
  position:relative;
  z-index:2;
}
.intro h1{
  color:#fff !important;
  font-weight:500 !important;
  text-shadow:none !important;
  letter-spacing:-0.5px;
}
.intro .lead{
  color:rgba(255,255,255,0.85) !important;
  text-shadow:none !important;
}

/* Recherche : transformee en carte blanche arrondie, flottante */
#home_search{
  background:var(--ec-white);
  border-radius:16px;
  padding:14px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.28);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  max-width:820px;
  margin:0 auto;
}
#home_search .Search-ride-from{
  color:var(--ec-text) !important;
  font-size:13px !important;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.4px;
}
#home_search input.from,
#home_search input.to,
#home_search input.datepicker{
  background:var(--ec-bg-soft) !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  padding:12px 14px !important;
  font-size:14px !important;
  transition:border-color 0.2s ease;
}
#home_search input.from:focus,
#home_search input.to:focus,
#home_search input.datepicker:focus{
  border-color:var(--ec-blue) !important;
  outline:none;
}
#home_search .reverse{
  color:var(--ec-text-muted);
  font-size:12px;
  text-transform:uppercase;
}
#home_search .btn-warning{
  background:var(--ec-orange) !important;
  background-image:none !important;
  filter:none !important;
  border:none !important;
  border-radius:10px !important;
  padding:12px 28px !important;
  font-weight:600;
  text-shadow:none !important;
  transition:background 0.2s ease;
}
#home_search .btn-warning:hover{
  background:var(--ec-orange-dark) !important;
}

/* -------------------------------------------------------------
   4. Section "Bienvenue" + stats
------------------------------------------------------------- */
#top-ho-body-part{
  background:var(--ec-white);
  padding:48px 0;
}
.welcome-to-car h3,
.how-it-works h3{
  color:var(--ec-text) !important;
  font-weight:600 !important;
}
.how-it-works h3 span{
  color:var(--ec-orange) !important;
}
.ride-member ul{
  display:flex;
  gap:24px;
}
.ride-member li h4{
  color:var(--ec-blue) !important;
  font-weight:600 !important;
}
.ride-member li h4 span{
  display:block;
  font-size:11px;
  color:var(--ec-text-muted) !important;
  text-transform:uppercase;
  letter-spacing:0.4px;
  font-weight:400 !important;
}

/* -------------------------------------------------------------
   5. Sections de trajets (recents / aeroport / ladies / shopping)
------------------------------------------------------------- */
#latest-airport{
  background:var(--ec-bg-soft);
  padding:32px 0;
}
.latest-rides > p,
.airport-rides > p,
.ladies-rides > p,
.shopping-rides > p{
  font-size:12px !important;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:var(--ec-text-muted) !important;
  font-weight:600;
  margin-bottom:14px !important;
}
.latest-rides > p span{ color:var(--ec-blue) !important; }
.airport-rides > p span{ color:#3fae5c !important; }
.ladies-rides > p span{ color:#8b6fd6 !important; }
.shopping-rides > p span{ color:#e0544c !important; }

/* Cartes de trajet, communes aux 4 categories */
.trip{
  background:var(--ec-white) !important;
  border-radius:var(--ec-radius) !important;
  box-shadow:var(--ec-shadow) !important;
  border:none !important;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
  margin-bottom:10px;
}
.trip:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(8,43,51,0.16) !important;
}
.trip li{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:12px 16px !important;
}
.trip small{
  color:var(--ec-text) !important;
  font-weight:500;
}
.trip small b{
  color:var(--ec-text-muted) !important;
  font-weight:400;
}
.trip span p{
  color:var(--ec-blue) !important;
  font-weight:700 !important;
  font-size:16px !important;
  margin:0;
}

/* Avatars circulaires colores par categorie */
.latest-img, .latest-img2, .ladies-img, .shopping-img2{
  border-radius:50% !important;
  overflow:hidden;
  flex-shrink:0;
  width:44px;
  height:44px;
}
.trip.roundcol .latest-img,
.trip.roundcol .latest-img2{ box-shadow:0 0 0 2px var(--ec-blue); }
.trip.airportcol .latest-img2{ box-shadow:0 0 0 2px #3fae5c; }
.trip.ladiescol .ladies-img{ box-shadow:0 0 0 2px #8b6fd6; }
.trip.shoppingcol .shopping-img2{ box-shadow:0 0 0 2px #e0544c; }
.mem-img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* -------------------------------------------------------------
   6. "Comment ca fonctionne" (join / search / share)
------------------------------------------------------------- */
#featucher{
  background:var(--ec-white);
  padding:48px 0;
}
#featucher .featucher-inner > div{
  text-align:center;
}
#featucher .head-set{
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--ec-text) !important;
  margin-bottom:8px !important;
}
#featucher .head-set b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--ec-blue);
  color:#fff;
  font-size:14px;
  margin-right:8px;
}
#featucher p:not(.head-set){
  color:var(--ec-text-muted) !important;
  font-size:13px;
  line-height:1.6;
}

/* -------------------------------------------------------------
   7. Pied de page
------------------------------------------------------------- */
#footer{
  background:var(--ec-navy) !important;
  padding-top:40px;
}
#footer h5, #footer h6, #footer h2{
  color:#fff !important;
  font-weight:600 !important;
}
#footer h5 span, #footer h6 span{
  color:var(--ec-orange) !important;
}
#footer ul li a{
  color:rgba(255,255,255,0.72) !important;
  transition:color 0.2s ease;
}
#footer ul li a:hover,
#footer ul li a.active{
  color:#fff !important;
}
#footer .newsletter-ho{
  border-radius:8px !important;
  border:none !important;
  padding:10px 12px !important;
}
#footer .newsletter-but{
  background:var(--ec-orange) !important;
  border:none !important;
  border-radius:8px !important;
  color:#fff !important;
  font-weight:600;
  padding:10px 18px !important;
}
.footer-bot-part{
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:16px;
  margin-top:16px;
}
.footer-bot-part p,
.footer-bot-part a{
  color:rgba(255,255,255,0.65) !important;
  font-size:12px;
}
.footer-bot-part a.site-n{
  color:var(--ec-orange) !important;
}

/* -------------------------------------------------------------
   8. Responsive de base (mobile)
------------------------------------------------------------- */
@media (max-width: 991px){
  .top-ho-body-part-inner{
    grid-template-columns:1fr;
  }
  .featucher-inner{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 767px){
  #home_search{
    flex-direction:column;
    align-items:stretch;
  }
  .ride-member ul{
    flex-wrap:wrap;
    gap:14px;
  }
  .navigation ul.nav{
    flex-direction:column;
    align-items:flex-start;
  }
  .top-part-inner-ho-bot{
    flex-wrap:wrap;
  }
  .logo{
    width:auto !important;
  }
  .search-car-top-part #home_search p{
    flex-direction:column;
    align-items:stretch;
  }
  .search-car-top-part input.search-car-find-cla,
  .search-car-top-part input.search-car-find-date,
  .search-car-top-part p a{
    width:100% !important;
    flex:none !important;
  }
  div.join, div.search, div.share,
  .featucher-inner .join, .featucher-inner .search, .featucher-inner .share{
    padding:28px 20px !important;
  }
  #featucher p:not(.head-set){
    max-width:none !important;
  }
}

/* Ajustement : badges circulaires autour des icones de stats */
.ride-member li{
  text-align:center;
}
.ride-member li b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(4,131,163,0.08);
  margin-bottom:8px;
}
.ride-member li b img{
  max-width:32px;
  max-height:32px;
}

/* -------------------------------------------------------------
   9. Nettoyage section "Bienvenue" (grille + cadrage images)
------------------------------------------------------------- */
.top-ho-body-part-inner{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:32px;
  align-items:start;
}
.welcome-to-car,
.how-it-works,
.top-ho-body-part-rght{
  float:none !important;
  width:100% !important;
  margin-top:0 !important;
  box-sizing:border-box;
}
.welcome-to-car img,
.how-it-works img{
  width:100%;
  height:auto;
  border-radius:var(--ec-radius);
  display:block;
  object-fit:cover;
}
.welcome-to-car iframe,
.how-it-works iframe{
  width:100% !important;
  border-radius:var(--ec-radius);
  border:none;
}
.welcome-to-car p,
.how-it-works p{
  color:var(--ec-text-muted) !important;
  font-size:13px;
  line-height:1.6;
  margin-top:10px;
}

/* Bloc stats a droite : cartes verticales alignees */
.top-ho-body-part-rght{
  background:var(--ec-bg-soft);
  border-radius:var(--ec-radius);
  padding:20px;
}
.ride-member ul{
  flex-direction:column;
  gap:16px;
}
.ride-member li{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left !important;
}
.ride-member li b{
  margin-bottom:0 !important;
  flex-shrink:0;
}
.ride-member li h4{
  margin:0;
  font-size:20px !important;
  line-height:1.2;
}
.fb-page, .fb-link{
  margin-top:16px;
  border-radius:var(--ec-radius);
  overflow:hidden;
}

/* -------------------------------------------------------------
   10. Neutralisation des rayures jaune/vert heritees
------------------------------------------------------------- */
.airport-rides .active2,
.ladies-rides .active2,
.shopping-rides .active2,
.latest-rides .active2 {
  background:var(--ec-bg-soft) !important;
}

/* -------------------------------------------------------------
   11. "Comment ca fonctionne" : neutralise les sprites images,
   repose entierement sur le badge numerote deja stylise
------------------------------------------------------------- */
#featucher{
  background:var(--ec-white) !important;
  height:auto !important;
  padding:48px 0 !important;
}
.join, .search, .share{
  background:none !important;
  background-image:none !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 24px !important;
  float:none !important;
}
.featucher-inner{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  max-width:1000px;
}
.join h2, .search h2, .share h2,
.join p, .search p, .share p{
  color:inherit !important;
  text-align:center !important;
  width:auto !important;
  float:none !important;
}

/* -------------------------------------------------------------
   12. Correctif : selecteur manquant pour la rayure "Dernier covoiturage"
------------------------------------------------------------- */
.latest-rides .active {
  background:var(--ec-bg-soft) !important;
}

/* -------------------------------------------------------------
   13. "Comment ca fonctionne" - specificite renforcee (home.css
   utilise les memes classes et pourrait charger apres nous)
------------------------------------------------------------- */
#featucher.featucher, #featucher {
  background:var(--ec-white) !important;
  height:auto !important;
  padding:48px 0 !important;
}
div.join, div.search, div.share,
.featucher-inner .join, .featucher-inner .search, .featucher-inner .share {
  background:none !important;
  background-image:none !important;
  background-color:transparent !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 24px !important;
  float:none !important;
}

/* -------------------------------------------------------------
   14. Peaufinage : bande bleue plein ecran (le conteneur parent
   est limite a 1170px, on etend le fond via pseudo-element)
------------------------------------------------------------- */
.top-part-inner-ho-bot{
  position:relative;
  z-index:1;
}
.top-part-inner-ho-bot::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:var(--ec-blue);
  z-index:-1;
}

/* -------------------------------------------------------------
   15. Peaufinage : centrage et alignement de la recherche
------------------------------------------------------------- */
#home_search{
  justify-content:center;
}
#home_search > *{
  align-self:center;
}
#home_search .Search-ride-from{
  flex-shrink:0;
  margin-right:4px;
}
#home_search input.from,
#home_search input.to{
  height:44px;
  box-sizing:border-box;
}
#home_search input.datepicker{
  height:44px;
  box-sizing:border-box;
}
#home_search .btn-warning{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

/* -------------------------------------------------------------
   16. Peaufinage : overlay hero moins opaque
------------------------------------------------------------- */
#finder::before{
  background:linear-gradient(rgba(4,30,38,0.30), rgba(4,30,38,0.50)) !important;
}

/* -------------------------------------------------------------
   17. Peaufinage : 3 blocs "bienvenue" de meme hauteur, centres
------------------------------------------------------------- */
.top-ho-body-part-inner{
  align-items:stretch;
}
.welcome-to-car,
.how-it-works,
.top-ho-body-part-rght{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--ec-bg-soft);
  border-radius:var(--ec-radius);
  padding:22px;
  box-sizing:border-box;
}
.welcome-to-car h3,
.how-it-works h3{
  text-align:center;
  margin-top:0 !important;
}
.welcome-to-car > div,
.how-it-works p{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.top-ho-body-part-rght{
  background:var(--ec-bg-soft) !important;
}

/* -------------------------------------------------------------
   18. Peaufinage : cartes "Comment ca fonctionne" plus grandes
   et plus professionnelles
------------------------------------------------------------- */
.featucher-inner{
  max-width:1100px;
  margin:0 auto;
}
div.join, div.search, div.share,
.featucher-inner .join, .featucher-inner .search, .featucher-inner .share {
  background:var(--ec-bg-soft) !important;
  border-radius:16px !important;
  padding:36px 28px !important;
  text-align:center;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
div.join:hover, div.search:hover, div.share:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(8,43,51,0.12);
}
#featucher .head-set{
  font-size:19px !important;
  margin-bottom:14px !important;
}
#featucher .head-set b{
  width:44px !important;
  height:44px !important;
  font-size:18px !important;
  margin-right:12px !important;
  background:var(--ec-blue) !important;
  box-shadow:0 4px 12px rgba(4,131,163,0.35);
}
#featucher p:not(.head-set){
  font-size:14px !important;
  line-height:1.7 !important;
  max-width:240px;
  margin:0 auto !important;
}

/* -------------------------------------------------------------
   19. Empeche le debordement horizontal cause par le pseudo-element
   pleine largeur de la bande bleue
------------------------------------------------------------- */
html, body{
  overflow-x:hidden;
}

/* -------------------------------------------------------------
   20. Agrandissement des cartes "Comment ca fonctionne"
------------------------------------------------------------- */
#featucher{
  padding:64px 0 !important;
}
.featucher-inner{
  max-width:1200px !important;
  gap:32px !important;
}
div.join, div.search, div.share,
.featucher-inner .join, .featucher-inner .search, .featucher-inner .share {
  padding:48px 36px !important;
}
#featucher .head-set{
  font-size:22px !important;
  margin-bottom:18px !important;
}
#featucher .head-set b{
  width:52px !important;
  height:52px !important;
  font-size:22px !important;
  margin-right:14px !important;
}
#featucher p:not(.head-set){
  font-size:16px !important;
  line-height:1.75 !important;
  max-width:280px;
}

/* -------------------------------------------------------------
   21. Barre de recherche des pages internes (search-car-top-part)
   Le formulaire partage le meme id "home_search" que le hero
   de l'accueil : on neutralise ici le style "carte flottante"
   et on applique un style propre adapte a ce contexte.
------------------------------------------------------------- */
.search-car-top-part #home_search{
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  display:block !important;
  max-width:none !important;
  margin:0 !important;
}
.search-car-top-part{
  background:var(--ec-navy-deep) !important;
  height:auto !important;
  padding:20px 24px !important;
  border-radius:var(--ec-radius);
}
.search-car-top-part span{
  font-size:15px !important;
  letter-spacing:0.4px;
  margin-bottom:14px !important;
}
.search-car-top-part #home_search p{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.search-car-top-part input.search-car-find-cla,
.search-car-top-part input.search-car-find-date{
  background-color:var(--ec-white) !important;
  border:1px solid transparent !important;
  border-radius:8px !important;
  height:40px;
  box-sizing:border-box;
  color:var(--ec-text) !important;
}
.search-car-top-part p a{
  background:var(--ec-orange) !important;
  border-radius:8px !important;
  height:40px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-weight:600;
  transition:background 0.2s ease;
}
.search-car-top-part p a:hover{
  background:var(--ec-orange-dark) !important;
}

/* -------------------------------------------------------------
   22. Peaufinage : barre de recherche interne, champs proportionnels
   et centrage vertical
------------------------------------------------------------- */
.search-car-top-part{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.search-car-top-part #home_search p{
  width:100%;
}
.search-car-top-part input.search-car-find-cla{
  flex:2 1 0;
  min-width:0;
}
.search-car-top-part input.search-car-find-date{
  flex:1 1 0;
  min-width:0;
}
.search-car-top-part p a{
  flex:0 0 auto;
  padding:0 32px !important;
}

/* -------------------------------------------------------------
   23. Peaufinage : newsletter footer, champ + bouton cote a cote
------------------------------------------------------------- */
#frmnewsletter b{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
#frmnewsletter .newsletter-ho{
  flex:1 1 auto;
  min-width:0;
  width:auto !important;
}
#frmnewsletter .newsletter-but{
  flex:0 0 auto;
  width:auto !important;
  white-space:nowrap;
}

/* -------------------------------------------------------------
   24. Peaufinage : bandeau copyright en bas du footer, meme bleu
------------------------------------------------------------- */
.footer-bot-part{
  background:var(--ec-navy) !important;
}

/* -------------------------------------------------------------
   25. Peaufinage : bandeau copyright centre et pleine largeur
------------------------------------------------------------- */
.footer-bot-part{
  position:relative;
  z-index:1;
  text-align:center !important;
  padding-top:20px !important;
  padding-bottom:20px !important;
}
.footer-bot-part::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:var(--ec-navy);
  z-index:-1;
}
.footer-bot-part p{
  display:inline-block;
  width:auto !important;
}

/* -------------------------------------------------------------
   26. Correctif : le <p> du copyright est en float:left dans le
   CSS legacy, ce qui empeche le centrage - on le neutralise
------------------------------------------------------------- */
.footer-bot-part p{
  float:none !important;
  text-align:center !important;
  width:100% !important;
}

/* -------------------------------------------------------------
   27. Corrections mobile : bannieres CTA / footer2 (bloc "trabling-part")
------------------------------------------------------------- */
@media (max-width: 767px){
  #trabling-part{
    height:auto !important;
    padding:40px 0 !important;
  }
  .trabling-part-inner{
    width:100% !important;
    padding:0 20px !important;
    box-sizing:border-box;
  }
  .trabling-part-inner h2{
    font-size:28px !important;
    padding-top:0 !important;
  }
  .trabling-part-inner p{
    font-size:16px !important;
    line-height:1.5 !important;
  }
  .trabling-part-inner em{
    margin-top:24px !important;
  }
  .trabling-part-inner em a{
    display:inline-block;
    width:auto;
    max-width:90%;
    white-space:normal;
    line-height:1.4;
    font-size:16px !important;
    padding:14px 24px !important;
    box-sizing:border-box;
  }

  /* Footer2 : les 3 colonnes de liens (ul) et le formulaire newsletter
     doivent s'empiler en une seule colonne sur mobile */
  .footer-top-part,
  .footer-top-part ul,
  .footer-top-part .subscribe{
    float:none !important;
    width:100% !important;
    box-sizing:border-box;
  }
  .footer-top-part{
    display:flex;
    flex-direction:column;
    gap:24px;
  }
}

/* -------------------------------------------------------------
   28. Peaufinage : recherche accueil sur une seule ligne (desktop)
------------------------------------------------------------- */
@media (min-width: 768px){
  #home_search{
    flex-wrap:nowrap !important;
    max-width:1100px;
    width:95%;
  }
  #home_search .Search-ride-from{
    white-space:nowrap;
  }
  #home_search input.from,
  #home_search input.to{
    flex:1 1 0;
    min-width:0;
  }
  #home_search input.datepicker{
    flex:0 1 160px;
    min-width:130px;
  }
  #home_search .btn-warning{
    flex:0 0 auto;
    white-space:nowrap;
  }
}

/* -------------------------------------------------------------
   29. Peaufinage : centrage et agrandissement du bloc stats
------------------------------------------------------------- */
.ride-member ul{
  align-items:center;
}
.ride-member li{
  justify-content:center;
}
.ride-member li h4{
  font-size:26px !important;
}
.ride-member li h4 span{
  font-size:13px !important;
}

/* -------------------------------------------------------------
   30. Peaufinage : les lignes stats doivent occuper toute la
   largeur pour que le centrage soit reel
------------------------------------------------------------- */
.ride-member ul{
  width:100%;
}
.ride-member li{
  width:100%;
  box-sizing:border-box;
}

/* -------------------------------------------------------------
   31. Correctif final et prioritaire : centrage reel du bloc stats
   (regle consolidee, placee en dernier pour gagner tout conflit)
------------------------------------------------------------- */
.ride-member ul{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  width:100% !important;
}
.ride-member li{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  text-align:left !important;
  float:none !important;
}

/* -------------------------------------------------------------
   32. Correction : alignement a gauche plutot que centre (demande utilisateur)
------------------------------------------------------------- */
.ride-member ul{
  align-items:flex-start !important;
}
.ride-member li{
  justify-content:flex-start !important;
}

/* -------------------------------------------------------------
   33. Masquer le widget Facebook casse (laisse une ligne vide)
   et grossir encore le bloc stats
------------------------------------------------------------- */
.top-ho-body-part-rght .fb-page,
.top-ho-body-part-rght .fb-link{
  display:none !important;
}
.ride-member li h4{
  font-size:30px !important;
}
.ride-member li h4 span{
  font-size:14px !important;
}
.ride-member li b{
  width:72px !important;
  height:72px !important;
}
.ride-member li b img{
  max-width:36px !important;
  max-height:36px !important;
}

/* -------------------------------------------------------------
   34. Chaque titre de categorie : le mot label et son accent ont
   la meme couleur et la meme taille entre eux (couleur differente
   entre categories conservee)
------------------------------------------------------------- */
.latest-rides > p,
.latest-rides > p span{
  color:var(--ec-blue) !important;
  font-size:24px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
}
.airport-rides > p,
.airport-rides > p span{
  color:#3fae5c !important;
  font-size:24px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
}
.ladies-rides > p,
.ladies-rides > p span{
  color:#8b6fd6 !important;
  font-size:24px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
}
.shopping-rides > p,
.shopping-rides > p span{
  color:#e0544c !important;
  font-size:24px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
}

/* -------------------------------------------------------------
   35. Masquer la carte Europe dans le footer2 (image sombre)
------------------------------------------------------------- */
.footer-top-part .map{
  display:none !important;
}

/* ===================================================================
   FICHE TRAJET DETAILLEE (view-ride_details.tpl)
   =================================================================== */

/* Titre principal "DEPART -> ARRIVEE" */
.top-title h1{
  color:var(--ec-text) !important;
  font-weight:700 !important;
  font-size:32px !important;
  text-align:left;
  padding:24px 0 !important;
}
.top-title h1 span,
.main-inner-page h1 span{
  color:var(--ec-blue) !important;
}

/* Onglets "Details du trajet / Avis" */
.tabs2{
  background:transparent !important;
  border-bottom:2px solid var(--ec-bg-soft) !important;
  display:flex;
  gap:8px;
}
.tabs2 a{
  background:transparent !important;
  color:var(--ec-text-muted) !important;
  font-weight:600;
  padding:12px 20px !important;
  border-radius:8px 8px 0 0;
}
.tabs2 a.active,
.tabs2 a:hover{
  background:var(--ec-blue) !important;
  color:#fff !important;
}

/* Carte principale d'infos (pickup/dropoff/date/heure) */
#geninfo.trip-detail-container{
  background:var(--ec-white);
  border-radius:var(--ec-radius);
  box-shadow:var(--ec-shadow);
  padding:24px;
  margin-top:16px;
}
.trip-detail-data ul{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}
.trip-detail-data ul li{
  background:var(--ec-bg-soft);
  border-radius:10px;
  padding:12px 16px;
  flex:1 1 200px;
  list-style:none;
}
.trip-detail-data ul li strong{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.4px;
  color:var(--ec-text-muted);
  margin-bottom:4px;
}

/* Details du trajet (texte + photo voiture) */
.trip-details{
  margin-top:24px;
}
.trip-details h3{
  color:var(--ec-text) !important;
  font-weight:700 !important;
  font-size:18px !important;
  margin-bottom:12px !important;
}
.details-trip-photo img{
  border-radius:var(--ec-radius);
  max-width:100%;
}
.details-trip-right p{
  color:var(--ec-text-muted) !important;
  line-height:1.6;
}
.user-vehicle{
  background:var(--ec-bg-soft);
  border-radius:var(--ec-radius);
  padding:20px;
  margin-top:16px;
  display:flex;
  gap:20px;
  align-items:center;
}
.user-vehicle ul{
  flex:1;
}
.user-vehicle ul li{
  list-style:none;
  padding:6px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.user-vehicle ul li strong{
  display:inline-block;
  min-width:180px;
  color:var(--ec-text-muted);
  font-weight:600;
}
.user-vehicle img{
  border-radius:12px;
  max-width:220px;
}

/* -------------------------------------------------------------
   Colonne de droite (prix / reservation / conducteur / verifs)
------------------------------------------------------------- */
.right-deta{
  padding-left:8px;
}
#show_link a, #hide_link a{
  color:var(--ec-blue) !important;
  font-weight:600;
}
.trip-price-container{
  background:var(--ec-white);
  border-radius:var(--ec-radius);
  box-shadow:var(--ec-shadow);
  padding:24px;
  margin-top:12px;
}
.big-price-container{
  padding:10px 0;
  border-bottom:1px solid var(--ec-bg-soft);
}
.big-price-container:last-of-type{
  border-bottom:none;
}
.price-green{
  color:var(--ec-orange) !important;
  font-size:28px !important;
  font-weight:700 !important;
}
.price-black{
  color:var(--ec-blue) !important;
  font-size:22px !important;
  font-weight:700 !important;
}
.support_link{
  margin-top:16px;
}
.support_link em{
  display:block;
  font-style:normal;
  color:var(--ec-text-muted);
  font-size:13px;
  margin-bottom:8px;
}
.donateGreenBtn{
  background:var(--ec-orange) !important;
  display:block;
  text-align:center;
  padding:14px !important;
  border-radius:10px !important;
  font-weight:700;
  transition:background 0.2s ease;
}
.donateGreenBtn:hover{
  background:var(--ec-orange-dark) !important;
}
.support_text{
  color:#fff !important;
  text-transform:uppercase;
  letter-spacing:0.4px;
}

/* Bloc conducteur */
.clint-category{
  background:var(--ec-white);
  border-radius:var(--ec-radius);
  box-shadow:var(--ec-shadow);
  padding:20px;
  margin-top:16px;
}
.clint-category li h4{
  background:none !important;
  color:var(--ec-text) !important;
  font-size:13px !important;
  text-transform:uppercase;
  letter-spacing:0.4px;
  padding:0 0 12px 0 !important;
  margin:0 !important;
}
.trip-box-right img{
  border-radius:50%;
  width:56px;
  height:56px;
  object-fit:cover;
  float:left;
  margin-right:14px;
}
.trip-box-right p{
  color:var(--ec-text) !important;
}
.trip-box-right p strong{
  color:var(--ec-blue) !important;
}
.ask-d{
  clear:both;
  margin-top:12px;
}
.ask-d .donateGreenBtn{
  padding:10px !important;
  font-size:13px;
}

/* Bloc verifications */
.clint-category1{
  background:var(--ec-white);
  border-radius:var(--ec-radius);
  box-shadow:var(--ec-shadow);
  padding:20px;
  margin-top:16px;
}
.clint-category1 .cl-heading{
  color:var(--ec-text) !important;
  font-weight:700 !important;
  font-size:14px !important;
  text-transform:uppercase;
  letter-spacing:0.4px;
}
.clint-category1 ul li{
  background:var(--ec-bg-soft) !important;
  border-radius:8px;
  padding:10px 12px !important;
  margin-top:8px;
  list-style:none;
  color:var(--ec-text) !important;
  font-size:13px;
}

/* Bloc activite membre */
.clint-category2{
  background:var(--ec-white);
  border-radius:var(--ec-radius);
  box-shadow:var(--ec-shadow);
  padding:20px;
  margin-top:16px;
}
.clint-category2 h2{
  color:var(--ec-text) !important;
  font-size:14px !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:0.4px;
}
.clint-category2 ul li{
  list-style:none;
  padding:8px 0;
  color:var(--ec-text-muted);
  font-size:13px;
  border-bottom:1px solid rgba(0,0,0,0.05);
}

/* -------------------------------------------------------------
   36. Peaufinage : pavés pickup/dropoff/date moins larges, centres, gras
------------------------------------------------------------- */
.trip-detail-data ul li{
  flex:0 1 220px !important;
  text-align:center !important;
  font-weight:600 !important;
  color:var(--ec-text) !important;
}
.trip-detail-data ul li strong{
  text-align:center !important;
}
.trip-detail-data ul li img{
  display:none;
}

/* -------------------------------------------------------------
   37. Peaufinage : 4 paves pickup/dropoff/date/heure en grille 2x2
   proportionnelle, libelles en bleu (couleur de la marque)
------------------------------------------------------------- */
.trip-detail-data ul{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.trip-detail-data ul li{
  flex:none !important;
  width:auto !important;
}
.trip-detail-data ul li strong{
  color:var(--ec-blue) !important;
  font-size:12px !important;
}

/* -------------------------------------------------------------
   38. Peaufinage : libelle au-dessus de la valeur, tout centre
------------------------------------------------------------- */
.trip-detail-data ul li{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px;
}
.trip-detail-data ul li strong{
  width:100%;
}

/* -------------------------------------------------------------
   39. Peaufinage : libelles pickup/dropoff/date/heure plus grands et gras
------------------------------------------------------------- */
.trip-detail-data ul li strong{
  font-size:15px !important;
  font-weight:700 !important;
}

/* -------------------------------------------------------------
   40. Correction : nos cartes ajoutent du padding sans box-sizing,
   ce qui elargit .left-deta au-dela de 73% et chevauche .right-deta
------------------------------------------------------------- */
.left-deta,
.right-deta,
#geninfo.trip-detail-container,
.user-vehicle,
.trip-price-container,
.clint-category,
.clint-category1,
.clint-category2{
  box-sizing:border-box !important;
}
.left-deta{
  padding-right:24px;
}

/* -------------------------------------------------------------
   41. Uniformisation de la largeur de toutes les cartes de la
   colonne de droite (prix/reservation, conducteur, verifications...)
------------------------------------------------------------- */
.donate,
.trip-price-container,
.clint-category,
.clint-category1,
.clint-category2,
#map{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

/* -------------------------------------------------------------
   42. Peaufinage : bouton "Reserver une place" centre, texte sur
   une seule ligne
------------------------------------------------------------- */
.support_link{
  display:flex;
  justify-content:center;
}
.donateGreenBtn{
  display:inline-block !important;
  width:auto !important;
  white-space:nowrap;
  padding:14px 32px !important;
  float:none !important;
}

/* -------------------------------------------------------------
   43. Correction : texte au-dessus du bouton (pas cote a cote),
   bouton legerement moins large que le pave
------------------------------------------------------------- */
.support_link{
  display:block !important;
  text-align:center;
}
.support_link em{
  display:block;
  margin-bottom:10px;
}
.donateGreenBtn{
  width:92% !important;
  max-width:92%;
}

/* -------------------------------------------------------------
   44. Correctif final : float:left (front/style.css) empechait le
   centrage malgre inline-block + text-align:center du parent
------------------------------------------------------------- */
.donateGreenBtn{
  float:none !important;
}

/* -------------------------------------------------------------
   45. REGLE FINALE ET DEFINITIVE pour le bouton "Reserver une place"
   (consolidation de tous les essais precedents, place en tout
   dernier pour etre certain qu'elle l'emporte)
------------------------------------------------------------- */
a.donateGreenBtn#support_link{
  display:inline-block !important;
  float:none !important;
  width:auto !important;
  max-width:92% !important;
  white-space:nowrap !important;
  margin:0 auto !important;
  padding:14px 32px !important;
}
div.support_link{
  display:block !important;
  text-align:center !important;
  width:100% !important;
}

/* -------------------------------------------------------------
   46. Correction : le span .support_text a sa propre taille de
   police (22px) qui ignorait notre style sur le bouton parent
------------------------------------------------------------- */
.donateGreenBtn .support_text,
.donateGreenBtn span{
  font-size:14px !important;
  line-height:1.3 !important;
}

/* -------------------------------------------------------------
   47. Peaufinage : bouton "Poser une question a [nom]" centre
   et bien dimensionne dans son propre conteneur (.ask-d)
------------------------------------------------------------- */
.ask-d{
  text-align:center !important;
}
.ask-d .donateGreenBtn{
  display:inline-block !important;
  float:none !important;
  width:90% !important;
  box-sizing:border-box !important;
  font-size:12px !important;
  padding:10px 8px !important;
  white-space:normal !important;
}
.ask-d .donateGreenBtn .support_text{
  font-size:12px !important;
  line-height:1.3 !important;
}

/* -------------------------------------------------------------
   48. Correction : specificite renforcee pour gagner face a la
   regle 45 (qui utilise aussi #support_link, meme id duplique
   sur plusieurs boutons de la page)
------------------------------------------------------------- */
.ask-d a.donateGreenBtn#support_link{
  display:inline-block !important;
  float:none !important;
  width:90% !important;
  max-width:90% !important;
  box-sizing:border-box !important;
  font-size:12px !important;
  padding:10px 8px !important;
  white-space:normal !important;
  margin:0 auto !important;
}

/* -------------------------------------------------------------
   49. "CONDUCTEUR"/"CONDUCTRICE" centre et en gras
------------------------------------------------------------- */
.clint-category li h4{
  text-align:center !important;
  font-weight:700 !important;
}

/* -------------------------------------------------------------
   50. Titre centre, photo agrandie, commentaire dans un pave a droite
------------------------------------------------------------- */
.trip-details h3{
  text-align:center !important;
  width:100% !important;
  float:none !important;
}
.trip-details{
  overflow:hidden;
}
.details-trip-photo{
  float:left;
  width:280px;
  margin-right:20px;
  margin-bottom:16px;
}
.details-trip-photo img{
  width:100%;
  height:auto;
  border-radius:var(--ec-radius);
}
.details-trip-right{
  float:left !important;
  width:calc(100% - 300px);
  background:var(--ec-bg-soft);
  border-radius:var(--ec-radius);
  padding:16px;
  box-sizing:border-box;
  margin-bottom:16px;
}
.details-trip-right p{
  font-size:16px !important;
  font-weight:700 !important;
  color:var(--ec-text) !important;
  line-height:1.6 !important;
}
.user-vehicle{
  clear:both;
}

/* -------------------------------------------------------------
   51. Reduction de moitie de la photo (280px -> 140px)
------------------------------------------------------------- */
.details-trip-photo{
  width:140px !important;
}
.details-trip-right{
  width:calc(100% - 160px) !important;
}

/* -------------------------------------------------------------
   52. Fiche trajet - icones preferences sur une seule ligne
       + photo voiture agrandie
-------------------------------------------------------------- */
.user-vehicle ul li:last-child{
  white-space:nowrap;
  overflow-x:auto;
}
.user-vehicle ul li:last-child img{
  width:22px !important;
  height:22px !important;
  margin-right:4px;
  vertical-align:middle;
}
.user-vehicle img{
  max-width:300px;
}

/* -------------------------------------------------------------
   53. Page "Proposer un trajet" (offer-ride) - harmonisation
       (ecrase skyblue.css qui met tout en cyan #09a8ce)
-------------------------------------------------------------- */
.type-of-trip,
.type-of-trip2,
.type-of-trip3{
  border:none !important;
  border-radius:var(--ec-radius) !important;
  box-shadow:var(--ec-shadow);
  overflow:hidden;
  margin-bottom:20px !important;
}
.type-of-trip h2,
.type-of-trip2 h2,
.type-of-trip3 h2{
  background:var(--ec-blue) !important;
  border-radius:var(--ec-radius) var(--ec-radius) 0 0;
}
.tabing{
  border-radius:var(--ec-radius);
  overflow:hidden;
  box-shadow:var(--ec-shadow);
}
.tabing a{
  background:var(--ec-bg-soft) !important;
  color:var(--ec-text) !important;
}
.tabing .active{
  background:var(--ec-blue) !important;
  color:#fff !important;
}
.tabing a:hover{
  background:var(--ec-navy) !important;
  color:#fff !important;
}
.cont-bot-but,
.cont-bot-but1,
.cont-bot-but2{
  background:var(--ec-orange) !important;
  border-radius:6px;
  font-weight:600;
}
.cont-bot-but:hover,
.cont-bot-but1:hover,
.cont-bot-but2:hover{
  background:var(--ec-orange-dark) !important;
}
.location-input,
.location-input1,
.location-input2,
.location-input3{
  border-radius:6px !important;
  border:1px solid #d2d2d2 !important;
}
.location-select{
  border-radius:6px;
}
.offer-seats-right{
  border:none !important;
  border-radius:var(--ec-radius);
  box-shadow:var(--ec-shadow);
  overflow:hidden;
}
.outbdday td,
table.outbdday td{
  background:var(--ec-blue) !important;
}

/* -------------------------------------------------------------
   54. Page Mon compte / Tableau de bord (my-account) - harmonisation
       (corrige le texte invisible: h1 cyan sur fond cyan, ecrase skyblue.css)
-------------------------------------------------------------- */
.dashbord-left-in h1{
  color:#ffffff !important;
  background:var(--ec-blue) !important;
  border-radius:var(--ec-radius) var(--ec-radius) 0 0;
}
.dashbord-left-in{
  border-radius:var(--ec-radius);
  overflow:hidden;
  box-shadow:var(--ec-shadow);
}
.dashbord-left-in ul{
  border:none !important;
}
.tabs-main{
  border-bottom:3px solid var(--ec-blue) !important;
}
.tabs-main ul li a{
  background:var(--ec-bg-soft) !important;
  color:var(--ec-text) !important;
  border-radius:6px 6px 0 0;
  margin-right:3px !important;
}
.tabs-main ul li a:hover,
.tabs-main ul li a.active{
  background:var(--ec-blue) !important;
  color:#fff !important;
}

/* -------------------------------------------------------------
   55. Page Mon compte - texte en gras sur toute la section
       (toutes les pages contenant les onglets .tabs-main :
       tableau de bord, reservations, trajets, messages, alertes,
       evaluations, profil, verifications, mot de passe, notifications)
-------------------------------------------------------------- */
.main-inner-page:has(.tabs-main),
.main-inner-page:has(.tabs-main) *{
  font-weight:600 !important;
}