.elementor-1676 .elementor-element.elementor-element-7d125ecd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1676 .elementor-element.elementor-element-fc5717f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1676 .elementor-element.elementor-element-ee12ca9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1676 .elementor-element.elementor-element-99e9258{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1676 .elementor-element.elementor-element-ea71842{width:100%;max-width:100%;}.elementor-1676 .elementor-element.elementor-element-ef83405{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1676 .elementor-element.elementor-element-8c5bea2{width:100%;max-width:100%;}.elementor-1676 .elementor-element.elementor-element-28eb17d{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1676 .elementor-element.elementor-element-c43112d{width:100%;max-width:100%;}/* Start custom CSS for html, class: .elementor-element-3f395599 */:root{--cd-blue:#009fe3;--cd-orange:#f95b33;--cd-white:#ffffff;--cd-gray:#f5f7fa;--cd-radius:6px;--cd-yellow:#ffc107;}
/* ===== Hero Section ===== */
.hero-avis{
  position:relative;
  background:linear-gradient(135deg,var(--cd-blue) 0%,#00b3ff 100%);
  padding:5rem 1.5rem 6rem;
  color:var(--cd-white);
  overflow:hidden;
}
/* Discreet illustrative van */
.hero-avis::after{
  content:"";
  position:absolute;
  inset:0;
  background:url('citydrop-van.png') bottom right/contain no-repeat;
  opacity:.08;
  pointer-events:none;
}
.hero-container{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}
.hero-avis h1{
  font-size:2.2rem;
  margin-bottom:1rem;
  font-weight:700;
}
@media(max-width:576px){
  .hero-avis h1{font-size:1.8rem;}
}
.hero-avis .subtitle{
  font-size:1.125rem;
  max-width:650px;
  margin:0 auto 2rem;
  line-height:1.4;
}
/* Rating */
.rating{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  margin-bottom:2.5rem;
}
.stars{
  display:inline-block;
  position:relative;
  width:120px;
  height:24px;
  background:url('stars-outline.svg') repeat-x 0 0/24px 24px;
}
.stars::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:96%; /* 4.8/5 => 96% */
  height:100%;
  background:url('stars-fill.svg') repeat-x 0 0/24px 24px;
}
.score,.reviews-count{
  font-size:1rem;
  font-weight:600;
}
.reviews-count{color:rgba(255,255,255,.85);}
/* CTA */
.cta-primary{
  display:inline-block;
  background:var(--cd-orange);
  color:var(--cd-white);
  padding:.9rem 1.8rem;
  border-radius:var(--cd-radius);
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  transition:opacity .2s,transform .2s;
}
.cta-primary:hover{opacity:.92;transform:translateY(-2px);}
@media(max-width:576px){
  .cta-primary{font-size:.95rem;padding:.8rem 1.6rem;}
}
/* Fade‑in animation */
.js-fade{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.js-fade.in-view{opacity:1;transform:none;}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-28ef3d7 *//* ===== CSS complet du bloc « Avis clients City Drop » ===== */
:root{
  --cd-blue:#009fe3;
  --cd-orange:#f95b33;
  --cd-white:#ffffff;
  --cd-gray:#f5f7fa;
  --cd-radius:6px;
  --cd-yellow:#ffc107;          /* Jaune des portions remplies */
}

/* ----- Section & conteneur ----- */
.reviews{
  background:var(--cd-white);
  padding:4rem 2rem 5rem;
}
.reviews-container{
  max-width:900px;
  margin-inline:auto;
}

/* ----- En-tête (titre + note globale) ----- */
.reviews-header h2{
  text-align:center;
  font-size:1.75rem;
  margin-bottom:1rem;
  color:#222;
}
.rating-overall{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  margin-bottom:1.5rem;
}
/* Étoiles grand format */
.reviews-header .stars{
  width:120px;height:24px;
  background:url('stars-outline.svg') repeat-x 0 0/24px 24px;
  position:relative;
}
.reviews-header .stars::before{
  content:\"\";position:absolute;inset:0;
  width:96%;                                  /* 4,8/5 = 96 % */
  background:url('stars-fill.svg') repeat-x 0 0/24px 24px;
}
.score{font-weight:700;font-size:1.1rem;}
.reviews-count{color:#666;}

/* Liste & lignes */
.rating-breakdown{
  display:grid;
  gap:.3rem;
  margin:0 auto 2.5rem;
  max-width:440px;
  font-size:.875rem;
}
.rating-row{
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* Barre grise = 100 % */
.bar{
  position:relative;
  flex:1;
  height:6px;
  background:var(--cd-gray);
  border-radius:3px;
  overflow:hidden;
}

/* Portion jaune = pourcentage réel (défini en inline-style) */
.bar-fill{
  display:block;
  height:100%;
  background:var(--cd-yellow);
  border-radius:inherit;
}

/* libellé (“5 ★”) et pourcentage à droite */
.label{min-width:45px;}
.percent{min-width:38px;text-align:right;}
/* Largeur de chaque portion (pseudobar) */
.bar--5::before{width:82%;}
.bar--4::before{width:13%;}
.bar--3::before{width:3%;}
.bar--2::before{width:1%;}
.bar--1::before{width:1%;}

/* ----- Grille des avis individuels ----- */
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-bottom:2rem;
}
.review-card{
  background:var(--cd-gray);
  border-radius:var(--cd-radius);
  padding:1.25rem 1.5rem 1.75rem;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
}
.review-header{
  display:flex;
  justify-content:space-between;
  margin-bottom:.5rem;
  font-size:.875rem;
  color:#333;
  font-weight:600;
}
/* Étoiles petit format */
.stars--small{
  width:88px;height:18px;
  margin-bottom:.75rem;
  background:url('stars-outline.svg') repeat-x 0 0/18px 18px;
  position:relative;
}
.stars--small::before{
  content:\"\";position:absolute;inset:0;
  background:url('stars-fill.svg') repeat-x 0 0/18px 18px;
  width:100%;                                  /* par défaut 5/5 */
}
.review-card p{
  font-size:.9rem;
  line-height:1.45;
  color:#444;
}

/* ----- Bouton « Voir plus d’avis » ----- */
.cta-secondary {
    width: 200px;
  display:block;
  margin:0 auto;
  background:var(--cd-blue);
  color:var(--cd-white);
  padding:.7rem 1.4rem;
  font-weight:700;
  border:none;
  border-radius:var(--cd-radius);
  cursor:pointer;
  transition:opacity .2s;
}
.cta-secondary:hover{opacity:.9;background-color:#f95b33;}

/* ----- Utilitaires ----- */
.hidden{display:none;}

/* ----- Responsive ----- */
@media(max-width:768px){
  .reviews-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:576px){
  .rating-breakdown li span:first-child{min-width:45px;}
  .reviews-grid{grid-template-columns:1fr;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-129fc4e */:root{
  --cd-blue:#009fe3;
  --cd-orange:#f95b33;
  --cd-white:#ffffff;
  --cd-gray:#f5f7fa;
  --cd-radius:6px;
}

/* ===== Section ===== */
.reviewss{
  background:var(--cd-gray);
  padding:4rem 2rem;
  position:relative;
  overflow:hidden;              /* masque les slides sortantes */
}
.reviews-container{
  max-width:1100px;
  margin-inline:auto;
  text-align:center;
}

/* ===== Titres ===== */
.reviews h2{
  font-size:1.8rem;
  margin-bottom:2rem;
  color:#222;
}

/* ===== Slider ===== */
.slider-wrapper{overflow:hidden;}
.slider-track{
  display:flex;
  gap:1rem;                     /* espace entre cartes */
  transition:transform .6s ease;
}
.review-card{
  flex:0 0 calc((100% - 2rem)/3);   /* 3 cartes, 2 gaps de 1rem */
  box-sizing:border-box;
  background:var(--cd-white);
  border-radius:var(--cd-radius);
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  padding:1.75rem 1.5rem;
  text-align:left;
  position:relative;
}
.review-card::before{
  content:"“";
  position:absolute;
  top:-25px;
  left:18px;
  font-size:4rem;
  color:var(--cd-blue);
  opacity:.15;
  line-height:1;
}
.stars{
  color:#f4b400;
  font-size:1.1rem;
  margin-bottom:.5rem;
}
.review-card p{
  font-size:.95rem;
  line-height:1.55;
  color:#444;
  margin:0 0 1rem;
}
.review-author{
  font-weight:700;
  color:#222;
  font-size:.9rem;
}

/* ===== Flèches ===== */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  background:var(--cd-blue);
  color:var(--cd-white);
  border:none;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.25rem;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:opacity .2s;
}
.arrow:hover{background-color: #f95b33;}
.arrow:disabled{opacity:.3;cursor:default;}
.arrow-prev{left:1rem;}
.arrow-next{right:1rem;}

/* ===== Responsive ===== */
@media(max-width:991px){                     /* tablette : 1 carte */
  .review-card{flex:0 0 100%;}
}
@media(max-width:576px){                     /* mobile : flèches off */
  .reviews h2{font-size:1.6rem;}
  .arrow{display:none;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ea71842 *//* =====================================================================
   Bloc 3 – Pourquoi réserver avec City Drop ?
   ===================================================================== */

:root{
  --cd-blue:#009fe3;
  --cd-orange:#f95b33;
  --cd-white:#ffffff;
  --cd-gray:#f5f7fa;
  --cd-radius:6px;
}

/* ----- Section & conteneur ----- */
.benefits{
  background:var(--cd-gray);
  padding:4rem 2rem;
}
.benefits-container{
  max-width:1200px;
  margin-inline:auto;
}

/* ----- Titre & intro ----- */
.benefits h2{
  font-size:1.8rem;
  margin-bottom:1rem;
  text-align:center;
  color:#222;
}
.benefits .intro{
  max-width:700px;
  margin:0 auto 3rem;
  font-size:1rem;
  color:#444;
  text-align:center;
}

/* ----- Grille de cartes ----- */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}

/* ----- Carte individuelle ----- */
.benefit-card{
  background:var(--cd-white);
  border-radius:var(--cd-radius);
  padding:2rem 1.5rem 2.5rem;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  text-align:center;
  display:flex;
  flex-direction:column;
  transition:transform .2s,box-shadow .2s;
}
.benefit-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 16px rgba(0,0,0,.08);
}
.benefit-card img{
  width:72px;
  height:72px;
  margin:0 auto 1rem;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.benefit-card h3{
  font-size:1.125rem;
  margin:0 0 .65rem;
  color:var(--cd-blue);
  font-weight:700;
}
.benefit-card p{
  font-size:.95rem;
  line-height:1.45;
  color:#444;
}

/* ----- Responsive ----- */
@media(max-width:992px){
  .benefits-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:576px){
  .benefits h2{font-size:1.6rem;}
  .benefits-grid{grid-template-columns:1fr;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8c5bea2 *//* =====================================================================
   Bloc 4 – Comment ça marche ?
   ===================================================================== */

:root{
  --cd-blue:#009fe3;
  --cd-orange:#f95b33;
  --cd-white:#ffffff;
  --cd-gray:#f5f7fa;
  --cd-radius:6px;
}

/* ----- Section & conteneur ----- */
.how-it-works{
  background:var(--cd-white);
  padding:4rem 2rem 5rem;
}
.hiw-container{
  max-width:1000px;
  margin-inline:auto;
  text-align:center;
}

/* ----- Titre & intro ----- */
.how-it-works h2{
  font-size:1.8rem;
  margin-bottom:1rem;
  text-align:center;
  color:#222;
}
.how-it-works .intro{
  max-width:700px;
  margin:0 auto 3rem;
  font-size:1rem;
  color:#444;
  text-align:center;
}

/* ----- Liste des étapes ----- */
.hiw-steps{
  counter-reset:step;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-bottom:3rem;
  list-style:none;
  padding:0;
}
.hiw-step{
  position:relative;
  background:var(--cd-gray);
  border-radius:var(--cd-radius);
  padding:2.5rem 1.5rem 2.75rem;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  text-align:center;
  display:flex;
  flex-direction:column;
  transition:transform .2s,box-shadow .2s;
}
.hiw-step:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 16px rgba(0,0,0,.08);
}

/* Numéro cerclé */
.step-number{
  width:48px;
  height:48px;
  line-height:48px;
  margin:0 auto 1rem;
  border-radius:50%;
  background:var(--cd-blue);
  color:var(--cd-white);
  font-weight:700;
  font-size:1.25rem;
  display:inline-block;
}

/* Titres & textes */
.hiw-step h3{
  font-size:1.125rem;
  margin:0 0 .65rem;
  color:#222;
}
.hiw-step p{
  font-size:.95rem;
  line-height:1.45;
  color:#444;
}

/* ----- CTA ----- */
.hiw-cta{
  display:inline-block;
  background:var(--cd-orange);
  color:var(--cd-white);
  padding:.9rem 1.9rem;
  border-radius:var(--cd-radius);
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  justify-content: center;
  transition:opacity .2s,transform .2s;
}
.hiw-cta:hover{opacity:.92;transform:translateY(-2px);}

/* ----- Responsive ----- */
@media(max-width:992px){
  .hiw-steps{grid-template-columns:1fr 1fr;}
}
@media(max-width:576px){
  .how-it-works h2{font-size:1.6rem;}
  .hiw-steps{grid-template-columns:1fr;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c43112d *//* =====================================================================
   Bloc 5 – FAQ (accordéon)
   ===================================================================== */

:root{
  --cd-blue:#009fe3;
  --cd-orange:#f95b33;
  --cd-white:#ffffff;
  --cd-gray:#f5f7fa;
  --cd-radius:6px;
}

/* ----- Section & conteneur ----- */
.faq{
  background:var(--cd-gray);
  padding:4rem 2rem 5rem;
}
.faq-container{
  max-width:900px;
  margin-inline:auto;
}

/* ----- Titre & intro ----- */
.faq h2{
  font-size:1.8rem;
  margin-bottom:1rem;
  text-align:center;
  color:#222;
}
.faq .intro{
  max-width:650px;
  margin:0 auto 2.5rem;
  font-size:1rem;
  color:#444;
  text-align:center;
}

/* ----- Liste FAQ ----- */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* ----- Élément <details> ----- */
.faq-item{
  background:var(--cd-white);
  border-radius:var(--cd-radius);
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  overflow:hidden;
  transition:box-shadow .2s;
}
.faq-item[open]{box-shadow:0 8px 16px rgba(0,0,0,.08);}

/* ----- En-tête (summary) ----- */
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  cursor:pointer;
  padding:1rem 1.25rem;
  font-weight:600;
  font-size:1rem;
  color:#222;
  position:relative;
  list-style:none;              /* supprime la flèche native */
}
.faq-item summary::marker{content:\"\";}  /* Firefox */
.faq-item summary::-webkit-details-marker{display:none;} /* WebKit */

/* Icône + rotation */
.faq-item summary::after{
  content:\"➜\";
  font-size:.9rem;
  transform:rotate(90deg);
  transition:transform .2s;
  color:var(--cd-blue);
}
.faq-item[open] summary::after{transform:rotate(-90deg);} /* flèche vers le bas */

/* ----- Contenu ----- */
.faq-item p{
  padding:0 1.25rem 1.25rem;
  font-size:.95rem;
  line-height:1.45;
  color:#444;
}

/* ----- Responsive ----- */
@media(max-width:576px){
  .faq h2{font-size:1.6rem;}
}/* End custom CSS */