/* =========================================================
   TÉMOIGNAGES — bulles
   ========================================================= */
.testimonials-section{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  max-width:900px;
  margin:50px auto;
  padding:20px;
  text-align:center;
}
.testimonial-bubble{
  width:220px;
  height:220px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:14px;
  font-weight:bold;
  color:#333;
  box-shadow:3px 3px 10px rgba(0,0,0,.2);
  transition:transform .3s;
  padding:15px;
}
.testimonial-bubble:hover{ transform:scale(1.1); }
.testimonial-bubble:nth-child(1){ background-color:#ffcc80; }
.testimonial-bubble:nth-child(2){ background-color:#80deea; }
.testimonial-bubble:nth-child(3){ background-color:#a5d6a7; }
.testimonial-bubble:nth-child(4){ background-color:#f48fb1; }
.testimonial-bubble:nth-child(5){ background-color:#d1c4e9; }
.testimonial-bubble:nth-child(6){ background-color:#ffab91; }
@media (max-width:768px){
  .testimonial-bubble{ width:140px; height:140px; font-size:12px; }
}

/* =========================================================
   BOUTON (PDF / CTA)
   ========================================================= */
.button-container{ text-align:center; padding:20px; }
.animated-button{
  background-color:#ff7043;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  padding:12px 24px;
  border:none;
  border-radius:25px;
  cursor:pointer;
  transition:all .3s ease-in-out;
  box-shadow:0 4px 6px rgba(0,0,0,.2);
  position:relative;
  overflow:hidden;
  text-decoration:none;
  display:inline-block;
}
.animated-button:hover{
  background-color:#ff5722;
  transform:scale(1.1);
  box-shadow:0 6px 10px rgba(0,0,0,.3);
}
.animated-button::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:300%;
  height:300%;
  background:rgba(255,255,255,.3);
  transition:width .4s ease-out, height .4s ease-out, opacity .4s ease-out;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%);
}
.animated-button:active::after{
  width:0;
  height:0;
  opacity:1;
  transition:0s;
}

/* =========================================================
   TÉMOIGNAGES — blockquote + guillemets
   (ajout important : position:relative sur p)
   ========================================================= */
/* --- TÉMOIGNAGES : rendu plus “premium” --- */
/* Rééquilibrage du gras et des couleurs dans les témoignages */

/* Texte principal : plus doux */
#temoignages blockquote p{
  color: #333;
  font-weight: 400;
}

/* Strong dans le texte : plus discret */
#temoignages blockquote p strong{
  color: #ff5f24;     /* on garde l’orange */
  font-weight: 600;   /* au lieu de 800 */
}

/* Auteur : bien lisible mais pas criard */
#temoignages blockquote > strong{
  font-weight: 700;
  color: #111;
}

/* Ligne "Spectacle :" : accent bleu plus sobre */
#temoignages blockquote em{
  color: #2e7be5;
  font-weight: 500;   /* au lieu de 600 */
}

/* Optionnel : encore plus sobre sur mobile */
@media (max-width: 768px){
  #temoignages blockquote p strong{
    font-weight: 500;
  }
}

/* --- Séparation visuelle des témoignages --- */
#temoignages blockquote{
  margin: 20px auto;
  padding: 18px 22px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

/* Fond clair chaud (1, 3, 5…) */
#temoignages blockquote:nth-of-type(odd){
  background: #fff9f3; /* ivoire très léger */
  border-left: 5px solid #ffb347;
}

/* Fond clair froid (2, 4, 6…) */
#temoignages blockquote:nth-of-type(even){
  background: #f3f7ff; /* bleu très pâle */
  border-left: 5px solid #2e7be5;
}

/* =========================================================
   NAV — bouton devis + titres de section
   (fond inchangé)
   ========================================================= */
.nav-devis a{
  background-color:#FFD43B;
  color:#fff;
  padding:8px 16px;
  border-radius:25px;
  font-weight:bold;
  text-transform:none;
  font-size:.95rem;
  box-shadow:0 4px 6px rgba(0,0,0,.2);
}
.nav-devis a:hover{
  background-color:#FFC107;
  transform:scale(1.05);
  transition:.3s;
}

/* Titres de sections dans le menu déroulant */
.nav-section{
  padding:.4em 1em;
  font-size:.7em;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#E8A84A;
  border-bottom:1px solid rgba(107,124,147,.25);
  margin-top:.6em;
  cursor:default;
  text-align:center;       /* <-- centre les titres */
  pointer-events:none;     /* <-- évite les effets hover inutiles */
}

/* =========================================================
   CTA header
   ========================================================= */
.header-cta{
  display:inline-block;
  background-color:#FFD43B;
  color:#fff !important;
  padding:8px 16px;
  border-radius:25px;
  font-weight:bold;
  font-size:.95rem;
  text-decoration:none;
  box-shadow:0 4px 6px rgba(0,0,0,.2);
}
.header-cta:hover{
  background-color:#FFC107;
  transform:scale(1.05);
  transition:.3s;
}
.header-cta-noel {
  background: linear-gradient(135deg, #ff7a3c, #ffd27a);
}
.header-cta-noel:hover {
  background: linear-gradient(135deg, #e6531f, #ffa733);
}

@media (max-width: 640px){
  .header-cta {
    display: block;
    margin: 8px auto;
  }
}

/* =========================================================
   SLOGAN — responsive (fond inchangé)
   ========================================================= */
@media (max-width:540px){
  #header{ padding-top:6px; padding-bottom:8px; }
  #header .intro h1{
    font-size:clamp(1.25rem, 5.2vw, 1.6rem);
    line-height:1.15;
    margin:.2rem 0 .35rem;
  }
  #header .intro p{ margin:.25rem 0; line-height:1.35; }
  .slogan-ann{
    font-family:'Baloo 2','Quicksand',system-ui,sans-serif;
    font-weight:700;
    font-size:clamp(1rem, 3.6vw, 1.15rem);
    line-height:1.2;
    letter-spacing:.2px;
    margin:.35rem auto .55rem;
    color:#ff5f24;
    text-align:center;
    text-shadow:none;
    display:block;
  }
  .slogan-ann span{ color:#2e7be5; font-weight:800; }
  .slogan-ann::before,
  .slogan-ann::after{ display:none; }
}
@media (min-width:800px){
  .slogan-wrap{ display:flex; justify-content:center; }
  .slogan-ann{
    font-family:'Baloo 2','Quicksand',system-ui,sans-serif;
    font-weight:600;
    font-style:italic;
    font-size:1.15rem;
    line-height:1.2;
    letter-spacing:.3px;
    margin:.05rem auto;
    color:#444;
    text-align:center;
    text-shadow:none;
    display:inline-block;
    position:relative;
  }
  .slogan-ann span{ color:#2e7be5; font-weight:700; font-style:normal; }
  .slogan-ann em{ color:#ff5f24; font-style:italic; font-weight:600; }
  .slogan-ann::before,
  .slogan-ann::after{
    content:"✨";
    font-size:1.2em;
    color:#ffb347;
    position:relative;
    top:0;
    opacity:.9;
  }
  .slogan-ann::before{ margin-right:.4em; }
  .slogan-ann::after{ margin-left:.4em; }
}


/* =========================================================
   CARTES (mobile → desktop) — version propre et unique
   ========================================================= */

/* Base (mobile / tablette) */
.mobile-cards{
  display:grid;
  gap:14px;
  max-width:860px;
  margin:0 auto;
  padding:6px 0 14px;
}

.mobile-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

.mobile-card a.card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.mobile-card img{
  width:100%;
  height:auto;         /* mobile: naturel */
  display:block;
}

.mobile-card .card-body{
  padding:12px 14px 16px;
  text-align:center;
}

.mobile-card .card-title{
  font-size:1.05rem;
  font-weight:800;
  margin:4px 0 6px;
}

.mobile-card .card-desc{
  font-size:.95rem;
  line-height:1.35;
  margin:0 0 10px;
  color:#444;
}

.card-cta{
  display:inline-block;
  background-color:#FFD43B;
  color:#fff !important;
  padding:9px 16px;
  border-radius:25px;
  font-weight:bold;
  font-size:.95rem;
  text-decoration:none;
  box-shadow:0 4px 6px rgba(0,0,0,.2);
  transition:.3s;
}
.card-cta:hover{
  background-color:#FFC107;
  transform:scale(1.05);
}

/* =========================================================
   DESKTOP — grille 2/3 + 1/3 puis 3×1/3
   (UN SEUL bloc 1024px : pas de doublons)
   ========================================================= */
@media (min-width:1024px){

  /* Grille robuste */
  .mobile-cards{
    display:grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:18px !important;
    max-width:1280px;
    margin:0 auto;
    padding:8px 0 20px;
  }

  .mobile-cards > article.mobile-card{
    float:none !important;
    width:auto !important;
    margin:0 !important;
  }

  /* Ligne 1 : 2/3 + 1/3 */
  .mobile-cards > article.mobile-card:nth-of-type(1){ grid-column: 1 / span 2; }
  .mobile-cards > article.mobile-card:nth-of-type(2){ grid-column: 3; }

  /* Ligne 2 : 3×1/3 */
  .mobile-cards > article.mobile-card:nth-of-type(3){ grid-column:1; }
  .mobile-cards > article.mobile-card:nth-of-type(4){ grid-column:2; }
  .mobile-cards > article.mobile-card:nth-of-type(5){ grid-column:3; }

  /* Images : on fixe les hauteurs (donc height:auto OUT ici) */
  .mobile-cards > article.mobile-card img{
    width:100%;
    display:block;
    object-fit:cover;
    max-height:none !important;
  }

  /* Alignement bas des photos (ligne 1) */
  .mobile-cards > article.mobile-card:nth-of-type(1) img,
  .mobile-cards > article.mobile-card:nth-of-type(2) img{
    height:300px;
  }

  /* Ligne 2 plus compacte */
  .mobile-cards > article.mobile-card:nth-of-type(n+3) img{
    height:160px;
  }

  /* Recadrage fin */
  .mobile-cards > article.mobile-card:nth-of-type(1) img{ object-position:center 55%; }
  .mobile-cards > article.mobile-card:nth-of-type(2) img{ object-position:center 20%; }

  /* Texte : taille UNIQUE, cohérente (toutes les cartes) */
  .mobile-cards .card-body{
    padding:14px 16px 16px;
    text-align:center;
  }

  .mobile-cards .card-title{
    font-size:1.25rem;
    font-weight:800;
    line-height:1.25;
    margin:2px 0 6px;
    color:#222;
  }

  .mobile-cards .card-desc{
    font-size:1rem;
    line-height:1.5;
    color:#555;
    margin:0 auto 12px;
    max-width:92%;
  }

  /* CTA un poil plus compact sur desktop */
  .mobile-cards .card-cta{
    padding:8px 16px;
    font-size:.95rem;
  }
}

/* =========================================================
   HOVER — effet décollage (desktop)
   ========================================================= */
@media (hover: hover) and (pointer: fine){
  .mobile-card{ transition: transform .25s ease, box-shadow .25s ease; }
  .mobile-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
  }
}

.survey-btn{
  display:block;
  width:100%;
  margin:.35rem 0;
  padding:.7rem 1rem;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:1rem;
  font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.survey-btn:first-of-type{
  background:linear-gradient(135deg,#ffb347,#ff7b2c);
  color:#fff;
}
.survey-btn:last-of-type{
  background:linear-gradient(135deg,#ffe3a5,#ffc86a);
  color:#4b3b26;
}
.survey-btn:hover{
  transform:translateY(-1px);
  opacity:.96;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.video-thumb img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.video-thumb{
  display: inline-block; /* ou block */
  max-width: 480px;      /* optionnel : limite sur desktop */
  width: 100%;
}
/* Hover identique pour la vignette vidéo */
.video-thumb{
  display:inline-block;
  overflow:hidden;      /* empêche le zoom de déborder */
  border-radius:10px;   /* même logique que tes cards */
}

.video-thumb img{
  transition: transform .3s ease, opacity .3s ease;
  will-change: transform;
}

.video-thumb:hover img,
.video-thumb:focus-visible img{
  transform: scale(1.02);
  opacity: .95;
}
.video-thumb:focus-visible{
  outline: 3px solid rgba(46,123,229,.4);
  outline-offset: 4px;
}
.center {
  text-align: center;
}
.socials{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:1em;
}
.quick-reassurance{
  max-width: 1100px;
  margin: 14px auto 18px auto;
  padding: 0 16px;
}

#zones-seo{
  max-width: 1000px;
  margin: 40px auto;
  padding: 10px 20px;
}

#zones-seo p{
  max-width: 900px;
  margin: 0 auto 14px auto;
  line-height: 1.55;
}

.contact-presentation p{
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}