/* ===================================================================
   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: 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;
  }
}

/* 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: 1.1fr 1.1fr 0.8fr;
  gap:32px;
  align-items:start;
}
.welcome-to-car,
.how-it-works,
.top-ho-body-part-rght{
  float:none !important;
  width:auto !important;
}
.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;
}