/*
 Theme Name: Hello Elementor Child
 Template: hello-elementor
 Text Domain: hello-elementor-child
 Version: 1.3.1
*/





/*
Theme Name: Hello Elementor Child
Version: 1.3.1 - CLEAN (menu piloté par functions.php)
*/

/* === CSS COMPLET DU SITE === */
*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
:root{--tw-shadow:0 0 #0000}
html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; scroll-behavior: smooth;}
body{margin:0;line-height:inherit;font-family:'Inter',sans-serif;color:#333333;background-color:#FAFAFA}
h1,h2,h3,h4,h5,h6,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:inherit}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;background:0 0;padding:0;border:0}
input,select{font-family:inherit;font-size:100%;margin:0;padding:0}
.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
@media (min-width:640px){.container{max-width:640px}}
@media (min-width:768px){.container{max-width:768px}}
@media (min-width:1024px){.container{max-width:1024px}}
@media (min-width:1280px){.container{max-width:1160px}}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
@media (min-width:768px){.md\:text-6xl{font-size:3.75rem;line-height:1}}
@media (min-width:768px){.md\:text-2xl{font-size:1.5rem; line-height:2rem;}}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.leading-tight{line-height:1.25}
.leading-relaxed{line-height:1.625}
.text-center{text-align:center}
.text-left{text-align:left}
.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.w-12{width:3rem}.h-12{height:3rem}.h-16{height:4rem}.h-48{height:12rem}.h-full{height:100%}.min-h-screen{min-height:100vh}
.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.pb-4{padding-bottom:1rem}
.my-2{margin-top:.5rem; margin-bottom:.5rem;}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-16{margin-bottom:4rem}.mt-auto{margin-top:auto}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.pr-4{padding-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}
.space-x-3>:not([hidden])~:not([hidden]){margin-left:.75rem}.space-x-4>:not([hidden])~:not([hidden]){margin-left:1rem}.space-x-8>:not([hidden])~:not([hidden]){margin-left:2rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}
.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-12{gap:3rem}
.flex{display:flex}.hidden{display:none}.grid{display:grid}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.md\:hidden{display:none}.md\:flex{display:flex}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:w-auto{width:auto}.md\:col-span-2{grid-column:span 2/span 2}}
@media (min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:block{display:block}}
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.left-0{left:0}.bottom-6{bottom:1.5rem}.right-6{right:1.5rem}.bottom-8{bottom:2rem}.left-1\/2{left:50%}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}
.bg-white{background-color:#FAFAFA}.bg-white\/95{background-color:rgba(250, 250, 250, .95)}.bg-gray-50{background-color:#F5F5F5}.bg-gray-900{background-color:#212121}.bg-gray-900\/80{background-color:rgba(33, 33, 33, .8)}.bg-black{background-color:#212121}
.text-white{color:#FAFAFA}.text-white\/70{color:rgba(250, 250, 250, .7)}.text-gray-light{color:#E0E0E0}.text-gray-400{color:#BDBDBD}.text-subtitle{color:#616161}.text-gray-700{color:#424242}.text-gray-900{color:#212121}
.text-gold-400{color:#E8D5A1}.text-gold-500{color:#C0A062}.text-gold-600{color:#A98B4F}.bg-gold-500{background-color:#C0A062}.bg-gold-500\/10{background-color:rgba(192,160,98,.1)}.bg-gold-500\/20{background-color:rgba(192,160,98,.2)}.hover\:bg-gold-600:hover{background-color:#A98B4F}.text-gold-contrast{color:#212121}.bg-gradient-gold{background-image:linear-gradient(135deg,#E8D5A1,#C0A062)}
.btn-wa{background-color:#1E5631;color:#FAFAFA}.btn-wa:hover{background-color:#113821}.bg-wa{background-color:#1E5631}
.text-loss{color:#8C2B2B}.text-gain{color:#4A6B4C}.text-red-200{color:#ef9a9a}.text-red-300{color:#e57373}.text-red-400{color:#ef5350}.bg-red-500\/20{background-color:rgba(239,83,80,.2)}.border-red-500\/30{border-color:rgba(239,83,80,.3)}
.text-green-200{color:#a5d6a7}.text-green-300{color:#81c784}.text-green-400{color:#66bb6a}.bg-green-500\/20{background-color:rgba(102,187,106,.2)}.border-green-500\/30{border-color:rgba(102,187,106,.3)}
.border{border-width:1px}.border-t{border-top-width:1px}.border-gray-100{border-color:#EEEEEE}.border-gray-800{border-color:#333333}
.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0/.05);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur);backdrop-filter:var(--tw-backdrop-blur)}
.blur-xl{--tw-blur:blur(24px);filter:var(--tw-blur)}.blur-2xl{--tw-blur:blur(40px);filter:var(--tw-blur)}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.duration-300{transition-duration:.3s}
.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-y-1\/2{--tw-translate-y:-50%}
.hover\:-translate-y-1:hover{--tw-translate-y:-.25rem}
.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}
.transform, .hover\:-translate-y-1:hover, .group:hover .group-hover\:scale-105 { transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.md\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}
.overflow-hidden{overflow:hidden}
.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.from-black\/20{--tw-gradient-from:rgba(0,0,0,.2);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0))}
.to-transparent{--tw-gradient-to:transparent}
.from-gray-900{--tw-gradient-from:#212121;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(33,33,33,0))}
.via-gray-800{--tw-gradient-stops:var(--tw-gradient-from),#313131,var(--tw-gradient-to,rgba(49,49,49,0))}
.to-black{--tw-gradient-to:#000}
.animate-bounce{animation:bounce 1s infinite}
@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}
.object-cover{object-fit:cover}
.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-md{max-width:28rem}
.flex-wrap{flex-wrap:wrap}
.hover\:bg-gray-50:hover{background-color:#F5F5F5}

/* Composants */
.section-title{font-size:2.25rem;line-height:2.5rem;font-weight:700;color:#212121;margin-bottom:1rem}
.section-title.text-white{color:#FAFAFA}
.section-subtitle{font-size:1.25rem;line-height:1.75rem;color:#616161;max-width:48rem;margin-left:auto;margin-right:auto}
.section-subtitle.text-gray-light{color:#E0E0E0}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;transition:all .2s;cursor:pointer;white-space:nowrap;border-radius:.75rem;padding:.75rem 1.25rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.btn:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transform:translateY(-2px)}
.btn-lg{padding:1rem 2rem;font-size:1.125rem}
.btn-gold{background-image:linear-gradient(135deg,#E8D5A1,#C0A062);color:#212121}
.btn-gold:hover{background-image:linear-gradient(135deg,#FDF5E1,#D2B479)}
.btn-outline-gold{border:2px solid #C0A062;color:#A98B4F}
.btn-outline-gold:hover{background-color:#C0A062;color:#212121;border-color:#C0A062}
.btn-dark{background-color:#212121;color:#FAFAFA}
.btn-dark:hover{background-color:#333333}

.nav-link{color:#616161;font-weight:600;transition:color .2s}
.nav-link:hover{color:#C0A062}

.card-feature{background-color:#FAFAFA;border-radius:1rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.07),0 4px 6px -4px rgba(0,0,0,.07);border:1px solid rgba(0,0,0,.05);overflow:hidden;transition:all .3s}
.card-feature:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);transform:translateY(-4px)}
.card-title{font-size:1.25rem;line-height:1.75rem;font-weight:700;color:#212121;margin-bottom:.5rem}
.card-text{color:#616161;line-height:1.625}

.card-price{position:relative;background-color:#FAFAFA;border-radius:1rem;padding:2rem;text-align:center;transition:all .3s;box-shadow:0 10px 15px -3px rgba(0,0,0,.07),0 4px 6px -4px rgba(0,0,0,.07);border:1px solid rgba(0,0,0,.05)}
.card-price:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);transform:translateY(-4px)}
.card-price.popular{box-shadow:0 10px 15px -3px rgba(0,0,0,.07),0 4px 6px -4px rgba(0,0,0,.07),0 0 0 2px #C0A062}
.card-price.popular:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1),0 0 0 2px #C0A062}
.popular-badge{position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(-50%);background-image:linear-gradient(135deg,#E8D5A1,#C0A062);color:#212121;padding:.25rem 1rem;border-radius:9999px;font-size:.875rem;font-weight:500;white-space:nowrap}

.card-stat{background-color:#F5F5F5;border-radius:.75rem;padding:1.5rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);border:1px solid #EEEEEE}

.form-label{display:block;font-size:.875rem;font-weight:500;color:#424242;margin-bottom:.5rem}
.form-input{width:100%;padding:.75rem 1rem;border:1px solid #E0E0E0;border-radius:.5rem;transition:box-shadow .2s;font-size:1rem;background-color:#FAFAFA}
.form-input:focus{outline:0;box-shadow:0 0 0 2px #FAFAFA,0 0 0 4px #C0A062}

/* FAQ */
.faq-answer-wrapper{max-height:0;overflow:hidden;transition:max-height .3s ease-in-out}
.faq-item.open .faq-answer-wrapper{max-height:500px}
.faq-item.open .faq-question-button{background-color:#F5F5F5}
.faq-item.open .faq-question-button i{transform:rotate(45deg)}

/* CTA final */
.card-cta-final{background-color:rgba(192,160,98,.05);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:.75rem;padding:1.5rem;border:1px solid rgba(192,160,98,.1)}
.card-cta-final-icon{width:4rem;height:4rem;background-color:rgba(192,160,98,.2);border-radius:9999px;display:flex;align-items:center;justify-content:center;margin-left:auto;margin-right:auto;margin-bottom:1rem;font-size:1.5rem;color:#E8D5A1}

/* Footer */
.social-link{width:2.5rem;height:2.5rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;transition:background-color .2s;color:#FAFAFA;font-size:1.25rem}
.footer-link{color:#E0E0E0;transition:color .2s}
.footer-link:hover{color:#FAFAFA;text-decoration:underline;text-underline-offset:4px}

/* ====== Style Contact Form 7 sur la page d'accueil ====== */
body.home #reservation .cf7-home-wrapper {
  background-color: #F5F5F5;
  border: 1px solid #EEEEEE;
  border-radius: 1rem;
  padding: 2rem;
}

/* Grille responsive */
body.home #reservation .cf7-home-wrapper form.wpcf7-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  body.home #reservation .cf7-home-wrapper form.wpcf7-form {
    grid-template-columns: 1fr 1fr;
  }
}

/* Paragraphes du formulaire = cellules de grille */
body.home #reservation .cf7-home-wrapper form.wpcf7-form p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Champs */
body.home #reservation .cf7-home-wrapper .wpcf7-form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  background: #FAFAFA;
  font-size: 1rem;
  color: #212121;
  transition: border-color 0.2s, box-shadow 0.2s;
}

body.home #reservation .cf7-home-wrapper .wpcf7-form-control:focus {
  outline: 0;
  border-color: #C0A062;
  box-shadow: 0 0 0 3px rgba(192, 160, 98, 0.3);
}

/* Textarea et messages = pleine largeur */
body.home #reservation .cf7-home-wrapper textarea,
body.home #reservation .cf7-home-wrapper .wpcf7-response-output {
  grid-column: 1 / -1;
}

/* Labels plus lisibles et espacés */
body.home #reservation .cf7-home-wrapper label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 0.4rem;
}

/* Bouton d'envoi */
body.home #reservation .cf7-home-wrapper input[type="submit"] {
  grid-column: 1 / -1;
  justify-self: center;
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  background-image: linear-gradient(135deg, #E8D5A1, #C0A062);
  color: #212121;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  transition: transform .2s, box-shadow .2s, filter .2s;
}

body.home #reservation .cf7-home-wrapper input[type="submit"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

/* Messages d'erreur / validation */
body.home #reservation .cf7-home-wrapper .wpcf7-not-valid-tip {
  color: #B71C1C;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

body.home #reservation .cf7-home-wrapper .wpcf7-response-output {
  margin-top: 1rem;
  background: #fff;
  border: 1px solid #EEE;
  border-radius: 0.5rem;
  padding: 1rem;
  font-weight: 500;
  color: #444;
}

/* Espacement entre le titre, le sous-titre et le formulaire */
body.home #reservation .section-title {
  margin-bottom: 1rem;
}
body.home #reservation .section-subtitle {
  margin-bottom: 2rem;
}


/* ====== CF7 sur la page d'accueil (2 colonnes + styles) ====== */
body.home #reservation .cf7-home-wrapper {
  background-color: #F5F5F5;
  border: 1px solid #EEEEEE;
  border-radius: 1rem;
  padding: 2rem;
}

/* Grille : mobile 1 colonne / ≥768px : 2 colonnes */
body.home #reservation .wpcf7 form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  body.home #reservation .wpcf7 form {
    grid-template-columns: 1fr 1fr;
  }
}

/* Chaque <p> CF7 devient une cellule de grille */
body.home #reservation .wpcf7 form p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Labels plus lisibles et espacés */
body.home #reservation .wpcf7 form label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 0.4rem;
}

/* Champs */
body.home #reservation .wpcf7 form .wpcf7-form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  background: #FAFAFA;
  font-size: 1rem;
  color: #212121;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.home #reservation .wpcf7 form .wpcf7-form-control:focus {
  outline: 0;
  border-color: #C0A062;
  box-shadow: 0 0 0 3px rgba(192, 160, 98, 0.3);
}

/* textarea + messages = pleine largeur */
body.home #reservation .wpcf7 form textarea,
body.home #reservation .wpcf7 form .wpcf7-response-output {
  grid-column: 1 / -1;
}

/* Bouton d'envoi doré */
body.home #reservation .wpcf7 form input[type="submit"] {
  grid-column: 1 / -1;
  justify-self: center;
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  background-image: linear-gradient(135deg, #E8D5A1, #C0A062);
  color: #212121;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
body.home #reservation .wpcf7 form input[type="submit"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

/* Erreurs / états */
body.home #reservation .wpcf7-not-valid-tip {
  color: #B71C1C;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
body.home #reservation .wpcf7-response-output {
  margin-top: 1rem;
  background: #fff;
  border: 1px solid #EEE;
  border-radius: 0.5rem;
  padding: 1rem;
  font-weight: 500;
  color: #444;
}

/* Sous-titre et note centrés / espacements */
body.home #reservation .section-title { margin-bottom: 1rem; }
body.home #reservation .section-subtitle { margin-bottom: 2rem; }
body.home #reservation .cf7-note { text-align: center; }

/* ===== Corrections formulaire CF7 + encart boutons (home) ===== */

/* wrapper formulaire (déjà posé) */
body.home #reservation .cf7-home-wrapper {
  background-color: #F5F5F5;
  border: 1px solid #EEEEEE;
  border-radius: 1rem;
  padding: 2rem;
}

/* grille 1→2 colonnes */
body.home #reservation .wpcf7 form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  body.home #reservation .wpcf7 form { grid-template-columns: 1fr 1fr; }
}

/* cellules */
body.home #reservation .wpcf7 form p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* labels : + d'air */
body.home #reservation .wpcf7 form label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 0.75rem; /* <- + d’espace au-dessus du champ */
}

/* champs */
body.home #reservation .wpcf7 form .wpcf7-form-control {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  background: #FAFAFA;
  font-size: 1rem;
  color: #212121;
  transition: border-color .2s, box-shadow .2s;
}
body.home #reservation .wpcf7 form .wpcf7-form-control:focus {
  outline: 0;
  border-color: #C0A062;
  box-shadow: 0 0 0 3px rgba(192,160,98,.3);
}

/* "Votre message" sur 2 colonnes + label centré */
body.home #reservation .wpcf7 form p:has(textarea) { /* OK sur tous navigateurs modernes */
  grid-column: 1 / -1;
  align-items: center;          /* centre horizontalement le label */
}
body.home #reservation .wpcf7 form p:has(textarea) > label {
  text-align: center;
  margin-bottom: 0.75rem;
  width: 100%;
}
body.home #reservation .wpcf7 form textarea {
  width: 100%;
}

/* message d’aide sous le textarea (si possible mettre la classe cf7-helper dans CF7) */
body.home #reservation .wpcf7 form .cf7-helper {
  grid-column: 1 / -1;
  margin-top: .5rem;
  color: #616161;
  font-size: .9rem;
}

/* Bouton d’envoi doré, centré, unique */
body.home #reservation .wpcf7 form input[type="submit"] {
  grid-column: 1 / -1;
  justify-self: center;
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  background-image: linear-gradient(135deg, #E8D5A1, #C0A062);
  color: #212121;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
body.home #reservation .wpcf7 form input[type="submit"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

/* Note centrée */
body.home #reservation .cf7-note { text-align: center; }

/* Encapsuler les 2 boutons contact (mobile : largeur réduite) */
body.home #reservation .direct-contact { max-width: 420px; margin: 0 auto; }
body.home #reservation .direct-contact .btn { width: 100%; }
@media (min-width: 640px) {
  body.home #reservation .direct-contact .btn { width: auto; }
}

/* ===== Affinages section Réservation (home) ===== */

/* 1) Plus d’espace entre libellé et champ (CF7 met souvent le libellé en texte + un wrap) */
body.home #reservation .wpcf7 form p .wpcf7-form-control-wrap {
  display: block;           /* pour pouvoir pousser vers le bas */
  margin-top: 0.65rem;      /* <<< espace libellé → champ */
}

/* Optionnel : encore un peu d’air entre blocs si besoin
body.home #reservation .wpcf7 form p { margin-bottom: .25rem; } */

/* 2) Centrer le bouton Envoyer (CF7 place le submit dans un <p>) */
body.home #reservation .wpcf7 form p:has(input[type="submit"]) {
  grid-column: 1 / -1;
  text-align: center;
}
body.home #reservation .wpcf7 form input[type="submit"] {
  display: inline-block;
}

/* 3) Note “Confirmation immédiate…” : centrée et pas de doublon */
body.home #reservation .cf7-note { 
  text-align: center; 
  margin-top: .5rem; 
}
body.home #reservation .cf7-note + .cf7-note { 
  display: none;           /* masque un éventuel doublon immédiat */
}

/* 4) (Déjà fait mais je remets au cas où) grille 1→2 colonnes + espacement interne */
body.home #reservation .wpcf7 form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;            /* espace vertical/latéral entre blocs */
}
@media (min-width: 768px) {
  body.home #reservation .wpcf7 form { grid-template-columns: 1fr 1fr; }
}

/* 5) “Votre message” sur 2 colonnes + libellé centré (si pas déjà posé) */
body.home #reservation .wpcf7 form p:has(textarea) {
  grid-column: 1 / -1;
  align-items: center;
}
body.home #reservation .wpcf7 form p:has(textarea) > label {
  text-align: center;
  margin-bottom: 0.75rem;
  width: 100%;
}

/* ====== Réservation (home) – correctifs bouton + doublon note ====== */

/* 1) Bouton Envoyer : largeur raisonnable sur desktop, centré */
body.home #reservation .wpcf7 form p:has(input[type="submit"]) {
  grid-column: 1 / -1;
  text-align: center;
}
body.home #reservation .wpcf7 form input[type="submit"]{
  display:inline-block;
  width:auto;                 /* empêche le 100% hérité */
  min-width:220px;
  max-width:320px;
  padding:.9rem 2rem;
  border-radius:.75rem;
}

/* 2) Supprimer la phrase “Confirmation immédiate…” en double
      (on garde uniquement la première) */
body.home #reservation .cf7-note{
  text-align:center;
  margin-top:.5rem;
}
body.home #reservation .cf7-note ~ .cf7-note{
  display:none !important;    /* masque toutes les suivantes */
}

/* 3) (Rappel) Aération libellé → champ */
body.home #reservation .wpcf7 form p .wpcf7-form-control-wrap{
  display:block;
  margin-top:.65rem;
}

/* 4) Grille du formulaire (1 col. mobile → 2 cols desktop) */
body.home #reservation .wpcf7 form{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media (min-width:768px){
  body.home #reservation .wpcf7 form{ grid-template-columns:1fr 1fr; }
}

/* 5) “Votre message” sur toute la ligne + libellé centré */
body.home #reservation .wpcf7 form p:has(textarea){ grid-column:1 / -1; }
body.home #reservation .wpcf7 form p:has(textarea) > label{
  display:block; text-align:center; margin-bottom:.75rem;
}

/* ====== HOME – Formulaire de réservation (CF7) ====== */

/* Grille: 1 colonne mobile → 2 colonnes desktop */
body.home #reservation .wpcf7 form{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media (min-width:768px){
  body.home #reservation .wpcf7 form{ grid-template-columns:1fr 1fr; }
}

/* Aération des champs (label → champ) */
body.home #reservation .wpcf7 form label{
  display:block;
  font-weight:600;
  color:#212121;
  margin-bottom:.75rem;              /* espace sous le libellé */
}
body.home #reservation .wpcf7 form .wpcf7-form-control-wrap{
  display:block;
}

/* Inputs/textarea look & spacing */
body.home #reservation .wpcf7 form input[type="text"],
body.home #reservation .wpcf7 form input[type="email"],
body.home #reservation .wpcf7 form input[type="tel"],
body.home #reservation .wpcf7 form input[type="date"],
body.home #reservation .wpcf7 form input[type="time"],
body.home #reservation .wpcf7 form textarea,
body.home #reservation .wpcf7 form select{
  width:100%;
  padding:.75rem 1rem;
  border:1px solid #E0E0E0;
  border-radius:.5rem;
  background:#FAFAFA;
  font-size:1rem;
}
body.home #reservation .wpcf7 form textarea{
  min-height:140px;
}

/* “Votre message” sur toute la largeur + libellé centré */
body.home #reservation .wpcf7 form p:has(textarea){ grid-column:1 / -1; }
body.home #reservation .wpcf7 form p:has(textarea) > label{
  text-align:center;
}

/* Bouton Envoyer : centré, largeur raisonnable desktop, style doré */
body.home #reservation .wpcf7 form p:has(input[type="submit"]){ 
  grid-column:1 / -1; 
  text-align:center; 
}
body.home #reservation .wpcf7 form input[type="submit"]{
  display:inline-block;
  width:auto;                /* empêche le 100% */
  min-width:220px;
  max-width:280px;
  padding:.9rem 2rem;
  border-radius:.75rem;
  font-weight:700;
  color:#212121;
  background-image:linear-gradient(135deg,#E8D5A1,#C0A062);
  transition:transform .15s ease, box-shadow .15s ease;
}
body.home #reservation .wpcf7 form input[type="submit"]:hover{
  background-image:linear-gradient(135deg,#FDF5E1,#D2B479);
  transform:translateY(-1px);
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
}

/* Phrase “Confirmation immédiate…” – garder UNE seule version, centrée */
body.home #reservation .cf7-note{
  text-align:center;
  margin-top:.5rem;
}
body.home #reservation .cf7-note ~ .cf7-note{  /* toute duplication éventuelle */
  display:none !important;
}
/* Masquer la version non-centrée héritée du template */
body.home #reservation p.text-subtitle.mt-4:not(.cf7-note){
  display:none !important;
}

/* === PATCH FINAL (home / réservation) === */

/* 1) Bouton Envoyer : forcer largeur raisonnable sur desktop */
body.home #reservation .cf7-home-wrapper input.wpcf7-submit{
  width:auto !important;
  min-width:220px !important;
  max-width:280px !important;
  display:inline-block !important;
}

/* 2) Centrer le <p> contenant le bouton */
body.home #reservation .wpcf7 form p:has(input.wpcf7-submit){
  grid-column:1 / -1;
  text-align:center;
}

/* 3) Aération libellé → champ (au cas où un thème resserre l’espace) */
body.home #reservation .wpcf7 form label{ margin-bottom:0.75rem !important; }
body.home #reservation .wpcf7 form p .wpcf7-form-control-wrap{ margin-top:0.65rem !important; }

/* 4) “Votre message” sur toute la largeur + libellé centré */
body.home #reservation .wpcf7 form p:has(textarea){ grid-column:1 / -1; }
body.home #reservation .wpcf7 form p:has(textarea) > label{ text-align:center; }

/* 5) Supprimer la phrase “Confirmation immédiate…” en doublon
      (on garde UNIQUEMENT celle qui a la classe .cf7-note) */
body.home #reservation .cf7-note{ text-align:center; margin-top:.5rem; }
body.home #reservation .text-subtitle.mt-4:not(.cf7-note),
body.home #reservation .text-subtitle:not(.cf7-note),
body.home #reservation .section-subtitle:not(.cf7-note){
  display:none !important;
}

/* === Fix centrage bouton Envoyer (home / CF7) === */
body.home #reservation .wpcf7 form p:has(input.wpcf7-submit){
  grid-column: 1 / -1;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
}

body.home #reservation .wpcf7 form input.wpcf7-submit{
  display: inline-block;
  width: auto;
  min-width: 220px;
  max-width: 280px;
  margin: 0 auto;                 /* fallback */
}

/* Ajustement équilibré de la hauteur des images des cartes "avantages" */
.adv-img {
  height: 13rem; /* ~208px sur mobile */
}

@media (min-width: 768px) {
  .adv-img {
    height: 15rem; /* ~240px sur ordinateur */
  }
}

/* ——— Section AVANTAGES : version compacte desktop ——— */
@media (min-width: 1024px) {
  /* 1) Photo un peu plus basse (harmonie au scroll) */
  #avantages .adv-img { height: 12rem; } /* ~192px */

  /* 2) Moins d’air dans la carte, tout en restant chic */
  #avantages .card-feature .p-6 { padding: 1rem 1.25rem; }

  /* 3) Titres/texte légèrement réduits */
  #avantages .card-feature .card-title { 
    font-size: 1.125rem;   /* 18px */
    margin-bottom: .35rem; 
  }
  #avantages .card-feature .card-text { 
    font-size: .975rem; 
    line-height: 1.5; 
  }

  /* 4) Icône un peu plus petite */
  #avantages .card-feature .w-12 { width: 2.75rem; height: 2.75rem; }

  /* 5) Espacement entre cartes un peu réduit */
  #avantages .grid { gap: 1.25rem; }

  /* 6) Titre/sous-titre avec un poil moins de marge */
  #avantages .section-title { margin-bottom: .75rem; }
  #avantages .section-subtitle { margin-bottom: 1.25rem; }
}

#accueil video {
  filter: brightness(0.85) contrast(1.1);
  transition: opacity 1s ease-in-out;
}





/* ==== Bloc comparaison premium (section Tarifs) ==== */
.compare-card{
  background: linear-gradient(180deg, rgba(192,160,98,.10), rgba(192,160,98,.06));
  border: 1px solid rgba(192,160,98,.18);
}

/* pastille “Sans/avec taxi moto” */
.pill{
  display:inline-block;
  padding:.35rem .75rem;
  border-radius:9999px;
  font-weight:600;
  font-size:.9rem;
}
.pill-red{ background:rgba(239,83,80,.10); color:#c62828; border:1px solid rgba(239,83,80,.25);}
.pill-green{ background:rgba(102,187,106,.12); color:#2e7d32; border:1px solid rgba(102,187,106,.25);}

/* badge VS */
.vs-badge{
  width:3rem; height:3rem; display:flex; align-items:center; justify-content:center;
  border-radius:9999px; font-weight:700;
  background:#fff; color:#616161; border:1px solid #eee; box-shadow:0 4px 10px rgba(0,0,0,.06);
}

/* listes + icônes */
.list-negative li, .list-positive li{
  position:relative; padding-left:1.75rem; color:#424242; line-height:1.5;
}
.list-negative li:before, .list-positive li:before{
  content:''; position:absolute; left:0; top:.2rem; width:1.1rem; height:1.1rem; border-radius:.35rem;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.75rem;
}
.list-negative li:before{
  content:'✕'; color:#b71c1c; background:rgba(239,83,80,.15);
}
.list-positive li:before{
  content:'✓'; color:#2e7d32; background:rgba(102,187,106,.18);
}

/* petites ombres homogènes */
.compare-box{ box-shadow: 0 6px 14px -6px rgba(0,0,0,.09); }


/* ===== HERO (vidéo) – lisibilité pro ===== */
.hero-wrap{
  position: relative;
  min-height: min(100vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6rem; /* garde l'espace du menu */
  overflow: hidden;
}

/* Vidéo en fond */
.hero-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* Overlay équilibré pour meilleure visibilité de la vidéo */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.40) 0%,   /* plus clair en haut */
    rgba(0, 0, 0, 0.28) 40%,  /* plus léger au milieu */
    rgba(0, 0, 0, 0.30) 100%  /* contraste doux en bas */
  );
  backdrop-filter: blur(1.2px);
}

/* Version mobile : encore plus claire et douce */
@media (max-width: 768px) {
  .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(0, 0, 0, 0.20) 40%,
      rgba(0, 0, 0, 0.25) 100%
    );
    backdrop-filter: blur(0.8px);
  }
}


/* Cartouche texte */
.hero-copy{
  position: relative;
  z-index: 1;
  width: min(1100px, 92vw);
  margin: 0 auto;
  text-align: center;
  color: #FAFAFA;
  /* fond translucide + léger blur pour détacher du flux vidéo */
  background: rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 16px;
  padding: clamp(1rem, 2.5vw, 2rem);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

/* Titre + ombre douce pour le contraste */
.hero-title{
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .2px;
  font-size: clamp(2rem, 6vw, 4.2rem);
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.hero-title .accent{
  color: #E8D5A1;
}

/* Sous-titre */
.hero-sub{
  margin-top: .85rem;
  margin-bottom: 1.25rem;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  color: rgba(250,250,250,.9);
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* Ligne “votre chauffeur…” sous les boutons */
.hero-mini{
  margin-top: .75rem;
  font-size: clamp(.95rem, 2.1vw, 1.1rem);
  color: rgba(250,250,250,.85);
}

/* Espace boutons */
.hero-actions{
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
  margin-top: 1rem;
}

/* Amélioration légère des boutons dans le hero */
.hero-actions .btn{
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.hero-actions .btn:hover{
  transform: translateY(-2px);
}

/* === HERO — Lisibilité & mise en page === */
#accueil {
  position: relative;
}

#accueil::after { /* overlay pour renforcer le contraste sur la vidéo */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative; /* au-dessus de l’overlay */
  max-width: 1100px;
  margin-left: auto; margin-right: auto;
}

.hero-headline {
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;          /* équilibre automatiquement les lignes */
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  letter-spacing: 0.2px;
  margin-bottom: 1rem;
}

.hero-highlight { color: #E8D5A1; }   /* or doré */
.hero-sep { color: #ffffff; opacity: .92; }

.hero-subtitle {
  color: rgba(250,250,250,.92);
  text-wrap: balance;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  font-size: clamp(1.05rem, 1.75vw + .6rem, 1.6rem);
  max-width: 62ch;
  margin: 0 auto 1.25rem auto;
}

.hero-subtitle .break { display:block; }

@media (min-width: 768px){
  .hero-subtitle .break { display: inline; }
}

.hero-cta-row { gap: 1rem; }

@media (min-width: 1024px){
  .hero-headline { font-size: clamp(3rem, 5.2vw, 4.5rem); }
}

/* ===== HERO — lisibilité & équilibre des lignes ===== */
.hero-wrap { position: relative; }
.hero-overlay {
  /* overlay plus lisible par-dessus la vidéo */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,.38) 45%,
    rgba(0,0,0,.60) 100%
  );
}

.hero-copy { position: relative; z-index: 1; }

.hero-title{
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .2px;
  text-wrap: balance;                 /* équilibre auto des lignes (Chrome/Safari/Edge) */
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  margin-bottom: 1rem;
}
.hero-title .accent{ color:#E8D5A1; } /* doré */
.hero-title .sep{ color:#fff; opacity:.92; }

.hero-sub{
  color: rgba(250,250,250,.92);
  text-wrap: balance;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  font-size: clamp(1.05rem, 1.6vw + .6rem, 1.6rem);
  max-width: 62ch;
  margin: 0 auto 1.25rem auto;        /* centré + espace sous-titre */
}
.hero-sub .break{ display:block; }    /* retour à la ligne en mobile */
@media (min-width:768px){
  .hero-sub .break{ display:inline; } /* en desktop on recolle la phrase */
}

/* Espace entre les deux boutons du hero */
.hero-actions{ gap: 1rem; }

/* Optionnel : un poil plus de gras sur le mini-texte si tu veux */
.hero-mini{ opacity:.95; }





/* ===== HERO — Finitions mobile ===== */

/* 1) Un peu plus de contraste vidéo sur petit écran */
@media (max-width: 768px){
  .hero-overlay{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.60) 0%,
      rgba(0,0,0,.48) 45%,
      rgba(0,0,0,.72) 100%
    );
  }
}

/* 2) Carte/flou derrière le texte : plus compacte sur mobile */
@media (max-width: 768px){
  .hero-copy{
    max-width: min(92vw, 680px);
    margin-inline: auto;
    padding: 1rem 1.1rem;
    background: rgba(18,18,18,.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 18px;
  }
}

/* 3) Titre : tailles & retours de ligne plus agréables */
@media (max-width: 768px){
  .hero-title{
    font-size: clamp(1.9rem, 6.4vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: .2px;
    margin-bottom: .75rem;
    text-wrap: balance;
  }
  .hero-title .accent{
    display: block;          /* force un saut propre pour “Vous non plus.” */
    margin-top: .15rem;
  }
}
@media (max-width: 420px){
  .hero-title{ font-size: 1.8rem; line-height: 1.12; }
}
@media (max-width: 360px){
  .hero-title{ font-size: 1.7rem; }
}

/* 4) Sous-titre : moins large, plus lisible */
@media (max-width: 768px){
  .hero-sub{
    font-size: 1.02rem;
    line-height: 1.45;
    max-width: 34ch;         /* colonne de lecture courte */
    margin: .5rem auto 1rem;
    text-wrap: balance;
  }
  .hero-sub .break{ display: block; } /* on garde une vraie césure sur mobile */
}

/* 5) Boutons : compacts, respirent mieux en pile */
@media (max-width: 768px){
  .hero-actions{
    gap: .75rem;
    flex-direction: column;
    align-items: stretch;
  }
  .btn.btn-lg{
    padding: .9rem 1.15rem;
    font-size: 1rem;
    border-radius: .9rem;
  }
}

/* 6) Micro-ajustement du mini-texte */
@media (max-width: 768px){
  .hero-mini{
    font-size: .98rem;
    line-height: 1.4;
    max-width: 36ch;
    margin: .75rem auto 0;
    opacity: .95;
  }
}





/* === HERO — lighten video + overlay, keep text readable === */

/* 1) Soften the global dark overlay */
.hero-overlay{
  /* lighter gradient than before */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.16) 45%,
    rgba(0,0,0,.08) 100%
  ) !important;
}

/* 2) Remove any extra darkening on the video itself */
.hero-media{
  filter: brightness(1) contrast(1.02) saturate(1.04) !important;  /* previously .9 or similar */
}

/* 3) Text panel opacity: a bit less on desktop, a touch more on mobile */
@media (min-width: 1024px){
  .hero-copy{
    background: rgba(0,0,0,.18) !important;  /* was ~.28–.32 */
  }
}
@media (max-width: 1023.98px){
  .hero-copy{
    background: rgba(0,0,0,.26) !important;  /* keep a little stronger on phone for readability */
  }
}

/* 4) Slightly softer text shadow so the video stays visible */
.hero-title,
.hero-sub{
  text-shadow: 0 2px 6px rgba(0,0,0,.30) !important; /* down from .45 */
}



/* === HERO — version plus lumineuse === */

/* 1) Overlay vidéo quasi transparent */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.12) 0%,     /* légère teinte haute */
    rgba(0,0,0,0.10) 45%,
    rgba(0,0,0,0.05) 100%    /* très léger en bas */
  ) !important;
}

/* 2) Vidéo de fond plus claire */
.hero-media {
  filter: brightness(1.32) contrast(1.05) saturate(1.1) !important;
}

/* 3) Fond du bloc texte (flou) : plus subtil */
.hero-copy {
  background: rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 4) Sur mobile : un tout petit peu plus sombre pour garder la lecture nette */
@media (max-width: 768px) {
  .hero-copy {
    background: rgba(0,0,0,0.22) !important;
  }
}



/* Effet fondu pour la vidéo d'accueil */
.hero-media {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.hero-media.is-ready {
  opacity: 1;
}


/* ==== HERO VIDEO – OVERRIDES (mobile d'abord) ==== */

/* Vidéo un peu plus lumineuse partout */
.hero-wrap .hero-media{
  filter: brightness(1.25) contrast(1.06) !important;
}

/* Overlay plus clair et moins flou sur mobile */
.hero-wrap .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.22) 0%,
    rgba(0,0,0,0.16) 40%,
    rgba(0,0,0,0.18) 100%
  ) !important;
  backdrop-filter: blur(0.6px) !important;
}

/* À partir tablette/desktop : un poil plus de contraste pour la lisibilité */
@media (min-width:768px){
  .hero-wrap .hero-overlay{
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.32) 0%,
      rgba(0,0,0,0.24) 40%,
      rgba(0,0,0,0.26) 100%
    ) !important;
    backdrop-filter: blur(1.2px) !important;
  }
}

/* Légère ombre portée pour la lisibilité du titre/sous-titre */
.hero-title, .hero-sub{
  text-shadow: 0 1px 2px rgba(0,0,0,0.22);
}


/* ==== HERO VIDEO — FORCE CLAIR (mobile d'abord) ==== */

/* Vidéo clairement plus lumineuse */
.hero-wrap .hero-media{
  filter: brightness(1.50) contrast(1.05) saturate(1.05) !important;
}

/* Overlay quasi transparent (laisse voir la vidéo) */
.hero-wrap .hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.08) 40%,
    rgba(0,0,0,0.10) 100%
  ) !important;
  backdrop-filter: blur(0.3px) !important; /* flou très léger */
}

/* Desktop/tablette : un tout petit peu plus de contraste pour la lisibilité du texte */
@media (min-width: 768px){
  .hero-wrap .hero-overlay{
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.14) 0%,
      rgba(0,0,0,0.12) 40%,
      rgba(0,0,0,0.14) 100%
    ) !important;
    backdrop-filter: blur(0.6px) !important;
  }
}

/* Légère ombre pour le titre/sous-titre pour rester lisible malgré l’éclaircissement */
.hero-title,
.hero-sub{
  text-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
}






/* ===== Footer : logo identique à celui du header ===== */
.footer-logo img {
  height: 60px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .footer-logo img {
    height: 48px;
  }
}

/* ===== Footer : taille + alignement du logo ===== */
footer .footer-logo{ 
  display:inline-block; 
  /* petit décalage visuel vers la gauche pour aligner avec le header
     (compense la marge "interne" de l'image) */
  transform: translateX(-10px);
}

footer .footer-logo img{
  height: 90px;   /* taille desktop */
  width: auto;
  display: block;
}

/* tablette */
@media (max-width: 1024px){
  footer .footer-logo img{ height: 80px; }
}

/* mobile */
@media (max-width: 768px){
  footer .footer-logo{
    transform: translateX(-6px);
  }
  footer .footer-logo img{ height: 64px; }
}



/* ===== Footer : taille + alignement du logo ===== */
footer .footer-logo{ 
  display:inline-block; 
  /* petit décalage visuel vers la gauche pour aligner avec le header
     (compense la marge "interne" de l'image) */
  transform: translateX(-10px);
}

footer .footer-logo img{
  height: 90px;   /* taille desktop */
  width: auto;
  display: block;
}

/* tablette */
@media (max-width: 1024px){
  footer .footer-logo img{ height: 80px; }
}

/* mobile */
@media (max-width: 768px){
  footer .footer-logo{
    transform: translateX(-6px);
  }
  footer .footer-logo img{ height: 64px; }
}


/* === HERO VIDEO — version finale lumineuse & lisible === */

/* Vidéo claire et nette */
.hero-wrap .hero-media {
  filter: brightness(1.55) contrast(1.05) saturate(1.1) !important;
}

/* Overlay très léger (quasi invisible, juste pour contraste texte) */
.hero-wrap .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.06) 40%,
    rgba(0,0,0,0.10) 100%
  ) !important;
  backdrop-filter: blur(0.2px) !important;
  -webkit-backdrop-filter: blur(0.2px) !important;
}

/* Sur mobile : un poil plus foncé pour lisibilité du texte */
@media (max-width: 768px) {
  .hero-wrap .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.12) 0%,
      rgba(0,0,0,0.10) 40%,
      rgba(0,0,0,0.14) 100%
    ) !important;
    backdrop-filter: blur(0.3px) !important;
  }
}

/* Bloc texte : fond translucide allégé */
.hero-copy {
  background: rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* Texte : ombre douce juste ce qu’il faut */
.hero-title,
.hero-sub {
  text-shadow: 0 2px 6px rgba(0,0,0,0.22) !important;
}


/* === HERO — Fix mobile : retire l'overlay lourd et allège le flou === */
@media (max-width: 768px){
  /* coupe l’overlay supplémentaire posé sur la section */
  #accueil::after{
    background: none !important;
    opacity: 0 !important;
  }

  /* overlay principal très léger et sans blur */
  .hero-wrap .hero-overlay{
    background: linear-gradient(180deg,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.08) 40%,
      rgba(0,0,0,0.12) 100%
    ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* vidéo un peu plus lumineuse pour compenser */
  .hero-wrap .hero-media{
    filter: brightness(1.65) contrast(1.06) saturate(1.12) !important;
  }

  /* carte texte : fond plus léger, blur minimal */
  .hero-copy{
    background: rgba(0,0,0,0.16) !important;
    backdrop-filter: blur(1.5px) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
  }
}


/* === HERO — VERSION MOBILE NETTE & CLAIRE (corrige flou persistant) === */
@media (max-width: 768px) {

  /* Supprime complètement le voile noir global */
  #accueil::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }

  /* Overlay interne quasi invisible, aucun flou */
  .hero-wrap .hero-overlay {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Vidéo lumineuse et nette */
  .hero-wrap .hero-media {
    filter: brightness(1.8) contrast(1.1) saturate(1.1) !important;
  }

  /* Bloc texte sans flou, léger fond pour contraste */
  .hero-copy {
    background: rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* === HERO — VERSION MOBILE ÉQUILIBRÉE (ni trop sombre, ni trop claire) === */
@media (max-width: 768px) {

  /* Supprime le voile noir excessif */
  #accueil::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }

  /* Overlay discret : un léger fondu pour le contraste du texte */
  .hero-wrap .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.20) 40%,
      rgba(0, 0, 0, 0.28) 100%
    ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Vidéo légèrement assombrie mais toujours visible */
  .hero-wrap .hero-media {
    filter: brightness(1.25) contrast(1.08) saturate(1.05) !important;
  }

  /* Bloc texte : léger fond sombre, sans flou */
  .hero-copy {
    background: rgba(0, 0, 0, 0.26) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* === HERO — RESTAURATION DU RENDU D’ORIGINE DE LA VIDÉO === */
.hero-wrap .hero-media {
  filter: brightness(1) contrast(1) saturate(1) !important;
}

/* Overlay quasi invisible (juste un léger dégradé pour lisibilité du texte) */
.hero-wrap .hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.08) 40%,
    rgba(0, 0, 0, 0.12) 100%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Bloc texte : fond à peine perceptible, aucune déformation de la vidéo */
.hero-copy {
  background: rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Supprimer tout overlay noir global */
#accueil::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}


/* === HERO — VERSION FINALE FIDÈLE À LA VIDÉO ORIGINALE === */
.hero-wrap .hero-media {
  filter: brightness(0.9) contrast(1.05) saturate(1.05) !important;
}

.hero-wrap .hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.22) 40%,
    rgba(0, 0, 0, 0.30) 100%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* bloc texte légèrement assombri pour lecture, sans flou */
.hero-copy {
  background: rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* supprimer tout overlay noir global */
#accueil::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}


/* === HERO : ajustement du flou et de la luminosité pour la nouvelle vidéo === */

/* Desktop : rendu cinéma équilibré (inchangé) */
.hero-wrap .hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.32) 40%,
    rgba(0, 0, 0, 0.35) 100%
  );
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.hero-copy {
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(1.2px);
  -webkit-backdrop-filter: blur(1.2px);
  border-radius: 20px;
}

/* Mobile : flou + contraste renforcés pour lisibilité optimale */
@media (max-width: 768px) {
  .hero-wrap .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.45) 40%,
      rgba(0, 0, 0, 0.50) 100%
    );
    backdrop-filter: blur(4.5px);
    -webkit-backdrop-filter: blur(4.5px);
  }

  .hero-copy {
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
}


/* === HERO : correctif mobile forcé (priorité maximale) === */
@media (max-width: 768px) {
  .hero-wrap .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.45) 40%,
      rgba(0, 0, 0, 0.50) 100%
    ) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  .hero-copy {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(3.5px) !important;
    -webkit-backdrop-filter: blur(3.5px) !important;
  }
}

/* === Correction finale : luminosité et flou mobile hero === */
@media (max-width: 768px) {
  #accueil.hero-wrap .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.08) 40%,
      rgba(0, 0, 0, 0.10) 100%
    ) !important;
    backdrop-filter: blur(3.5px) !important;
    -webkit-backdrop-filter: blur(3.5px) !important;
  }

  #accueil.hero-wrap .hero-copy {
    background: rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
}


/* === HERO : texte plus premium === */
.hero-title {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
}

.hero-title .accent {
  color: #C0A062;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(192, 160, 98, 0.4);
}

.hero-sub {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.5;
}


/* === Animation d’apparition élégante === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-copy {
  animation: fadeUp 1.2s ease-out forwards;
}




/* === Effet cinématique doré (au-dessus de la vidéo, sous l'overlay & le texte) === */
.hero-wrap { position: relative; }

/* Assure l'ordre des couches */
.hero-wrap .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                 /* 1 = entre la vidéo (0) et l'overlay (2) */
  pointer-events: none;
  background: linear-gradient(
    to bottom right,
    rgba(192,160,98,0.08),    /* doré subtil */
    rgba(0,0,0,0.12)          /* un voile très léger pour la profondeur */
  );
}

.hero-wrap .hero-overlay { position: absolute; inset: 0; z-index: 2; }
.hero-wrap .hero-copy     { position: relative; z-index: 3; }

/* Option : teinte un poil plus discrète en mobile (facultatif) */
@media (max-width: 768px){
  .hero-wrap::before {
    background: linear-gradient(
      to bottom right,
      rgba(192,160,98,0.06),
      rgba(0,0,0,0.10)
    );
  }
}



.btn-gold {
  box-shadow: 0 4px 12px rgba(192,160,98,0.25);
  transition: all 0.3s ease;
}

.btn-gold:hover {
  box-shadow: 0 6px 20px rgba(192,160,98,0.4);
  transform: translateY(-2px);
}


/* === MOBILE SEULEMENT : voile doré + vignette AU-DESSUS de l'overlay === */
@media (max-width: 768px){

  /* Pile des couches : vidéo (0) → overlay (2) → doré (3) → texte (4) */
  .hero-wrap .hero-media{ z-index:0 !important; }
  .hero-wrap .hero-overlay{ position:absolute; inset:0; z-index:2 !important; }
  .hero-wrap .hero-copy{ position:relative; z-index:4 !important; }

  /* Voile doré visible (mix-blend + opacité) */
  #accueil.hero-wrap::after{
    content:"";
    position:absolute; inset:0;
    z-index:3;                  /* AU-DESSUS de l'overlay */
    pointer-events:none;
    /* dégradé doré doux */
    background:
      linear-gradient(135deg, rgba(192,160,98,.20), rgba(0,0,0,.00));
    mix-blend-mode: soft-light; /* booste la chaleur sans cramer la vidéo */
    opacity:.9;                 /* joue entre .6 et 1 pour doser l'effet */
  }

  /* Vignette légère pour effet ciné (centre lisible, bords plus profonds) */
  #accueil.hero-wrap::before{
    content:"";
    position:absolute; inset:0;
    z-index:3;                  /* même plan que le voile doré */
    pointer-events:none;
    background:
      radial-gradient(80% 60% at 50% 40%,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 55%,
        rgba(0,0,0,.18) 100%);
  }

  /* Carte texte : un tout petit peu plus de contraste, sans assombrir la scène */
  .hero-wrap .hero-copy{
    background: rgba(0,0,0,.18) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
}


/* HOME — Ajustement final : titres légèrement plus hauts */
body.home main > section:not(#accueil){
  padding-top: 2.4rem !important;   /* avant : 3rem */
}

/* Mobile : un cran plus serré */
@media (max-width: 768px){
  body.home main > section:not(#accueil){
    padding-top: 1.6rem !important;  /* avant : 2rem */
  }
}


/* Aération LUXE sous le titre "Réservez votre Taxi Moto Paris en 30 secondes" */
body.home #reservation .section-title {
  margin-bottom: 2rem !important;   /* plus d'air sous le titre */
}

body.home #reservation .section-subtitle {
  margin-bottom: 4rem !important;   /* descend bien le formulaire */
}

/* Mobile : espacement encore plus doux */
@media (max-width: 768px){
  body.home #reservation .section-subtitle {
    margin-bottom: 4.5rem !important;
  }
}


/* Aération LUXE sous le titre "Ne ratez plus jamais rien." */
body.home .card-cta-final h2.section-title {
  margin-bottom: 3.5rem !important;  /* espace plus généreux entre le titre et les 3 cartes */
}

/* Mobile : un peu plus doux */
@media (max-width: 768px){
  body.home .card-cta-final h2.section-title {
    margin-bottom: 4rem !important;
  }
}


/* Aération LUXE : bloc "Ne ratez plus jamais rien." */
body.home section:has(.card-cta-final) .section-title {
  margin-bottom: 3.75rem !important;   /* + d’espace sous le titre */
}

/* Option 2 (couche supplémentaire) : pousse aussi la grille sous le titre */
body.home section:has(.card-cta-final) .grid.my-12 {
  margin-top: 4rem !important;         /* par défaut my-12 = ~3rem, on passe à 4rem */
  margin-bottom: 2.5rem !important;
}

/* Mobile : un poil plus généreux pour respirer */
@media (max-width: 768px){
  body.home section:has(.card-cta-final) .section-title { margin-bottom: 4rem !important; }
  body.home section:has(.card-cta-final) .grid.my-12 { margin-top: 4.25rem !important; }
}


/* === Apparition fluide (fade-in premium) pour tous les titres de section === */
.section-title {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-title.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Bonus : petit effet de glissement plus doux sur mobile */
@media (max-width: 768px) {
  .section-title {
    transform: translateY(20px);
  }
}



/* === Apparition fluide (fade-in premium) pour tous les titres et sous-titres === */
.section-title,
.section-subtitle {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-title.is-visible,
.section-subtitle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sur mobile : mouvement plus doux */
@media (max-width: 768px) {
  .section-title,
  .section-subtitle {
    transform: translateY(20px);
  }
}

/* Tarifs : anime aussi les deux sous-titres sans toucher au HTML */
#tarifs .text-subtitle,
#tarifs .text-gold-600.font-medium{
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
#tarifs .text-subtitle.is-visible,
#tarifs .text-gold-600.font-medium.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px){
  #tarifs .text-subtitle,
  #tarifs .text-gold-600.font-medium{
    transform: translateY(20px);
  }
}


/* ==== FAQ — Fix mobile (questions coupées) ==== */
@media (max-width: 768px){
  /* L'item ne coupe plus le contenu */
  #faq .faq-item{ overflow: visible; }

  /* Le bouton question : autorise les retours de ligne proprement */
  #faq .faq-question-button{
    padding: 1rem .875rem;            /* un peu moins large */
    align-items: flex-start;           /* aligne l'icône en haut si 2 lignes */
    overflow-wrap: anywhere;           /* coupe proprement si très long */
    word-break: break-word;
  }

  /* Le titre dans le bouton : prend toute la place, peut wrap */
  #faq .faq-question-button h3{
    flex: 1 1 auto;                    /* occupe l’espace disponible */
    min-width: 0;                      /* important: autorise le wrap en flex */
    margin: 0;
    font-size: 1rem;                   /* taille mobile */
    line-height: 1.35;                 /* plus d’air entre lignes */
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* L’icône “+” à droite : un peu moins large, décollée du texte */
  #faq .faq-question-button > .flex-shrink-0{
    margin-left: .5rem;
  }
  #faq .faq-question-button i{
    line-height: 1;
    font-size: 1.15rem;                /* légèrement réduit sur mobile */
  }
}



/* ==== Correctif final FAQ mobile : texte coupé à droite ==== */
@media (max-width: 768px){
  #faq .faq-question-button{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    gap: .75rem;                  /* espace entre texte et icône */
  }

  #faq .faq-question-button h3{
    flex: 1 1 0;                  /* prend toute la largeur dispo */
    min-width: 0;                 /* autorise le wrapping complet */
    white-space: normal;          /* force le retour ligne */
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 1rem;
    line-height: 1.4;
  }

  #faq .faq-question-button i{
    flex-shrink: 0;               /* empêche l’icône de compresser le texte */
    margin-left: .5rem;
    font-size: 1.2rem;
  }
}


/* ===== HEADER / NAV – correctif ciblé (structure de ton header.php) ===== */

/* 0) Réglage du conteneur du header : largeur, padding, flex */
#site-header,
.site-header {
  position: relative;
  z-index: 10000;                  /* au-dessus de la vidéo/overlay */
  overflow: visible;               /* rien n'est clippé */
}

.site-header .header-container {
  max-width: 1160px;               /* même grille que le site */
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: visible;               /* important pour les sous-menus */
}

/* 1) Logo : taille cohérente */
.site-header .site-logo {
  height: 56px;
  width: auto;
}

/* 2) Barre de nav desktop */
.desktop-nav { 
  position: relative; 
  overflow: visible;               /* ne coupe pas les drops */
}

/* ul généré par wp_nav_menu(menu_class => "main-menu") */
.desktop-nav .main-menu {
  display: flex;
  align-items: center;
  gap: 22px;                       /* espace régulier entre items */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Les items de premier niveau */
.desktop-nav .main-menu > li {
  position: relative;              /* pour positionner .sub-menu */
  overflow: visible;
}

/* Sous-menus */
.desktop-nav .main-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  margin-top: 10px;
  background: #fff;
  border: 1px solid #EEE;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
  padding: 8px 0;
  white-space: normal;             /* autorise le retour à la ligne */
  overflow: visible;
  z-index: 10001;                  /* par-dessus le hero */
}

/* Évite la sortie d'écran à droite pour les derniers items */
.desktop-nav .main-menu > li:last-child > .sub-menu,
.desktop-nav .main-menu > li:nth-last-child(2) > .sub-menu {
  left: auto;
  right: 0;
}

/* Lien de sous-menu : lisible et pas coupé */
.desktop-nav .main-menu .sub-menu a {
  display: block;
  padding: 10px 14px;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 3) Sécurité : rien dans le hero ne doit passer au-dessus du header */
.hero-wrap,
.hero-overlay,
.hero-copy {
  position: relative;
  z-index: 1;
}



/* ==== HEADER : réalignement logo + menu (fixe le menu trop à droite) ==== */
#site-header .header-container{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important; /* au lieu de space-between */
  gap: clamp(24px, 4vw, 60px) !important; /* espace entre logo et menu */
  overflow: visible !important;
}

#site-header .logo-link{ 
  flex:0 0 auto !important;
  margin-right: clamp(16px, 3vw, 48px) !important;
}

#site-header .desktop-nav{
  flex: 0 1 auto !important;          /* le menu ne prend PAS toute la largeur */
  overflow: visible !important;
}

#site-header .desktop-nav .main-menu{
  display:flex !important;
  justify-content:flex-start !important;  /* items alignés à gauche */
  align-items:center !important;
  gap: clamp(16px, 2.2vw, 28px) !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

/* Le bouton hamburger (mobile) part à droite sans tirer le menu */
#site-header .mobile-menu-btn{ margin-left:auto !important; }

/* Sous-menus non coupés (sécurité) */
#site-header, 
#site-header .desktop-nav .main-menu li{ overflow:visible !important; z-index:10000; }


/* === HERO CLEAN (no Optimole dependency) === */
body.home .site-main::before{ content:none !important; display:none !important; height:0 !important; background:none !important; }
body.home .site-main > *:first-child{ margin-top:0 !important; }

#accueil, .wp-block-cover, section.hero, header.hero, .hero { position:relative !important; min-height:62svh; }
picture.hero-block { position:absolute !important; inset:0 !important; display:block !important; z-index:0 !important; }
picture.hero-block > img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }

#accueil :not(.hero-block) > img, .hero :not(.hero-block) > img { display:none !important; }

#accueil::before, #accueil::after, .hero::before, .hero::after, .wp-block-cover::before, .wp-block-cover::after { background:transparent !important; filter:none !important; backdrop-filter:none !important; opacity:0 !important; }

#accueil video, .hero video, video.hero-media, .hero-media video { display:none !important; opacity:0 !important; visibility:hidden !important; }






.hero::before, .hero::after,
.wp-block-cover::before, .wp-block-cover::after{
  background:transparent !important; filter:none !important; backdrop-filter:none !important; opacity:0 !important;
}

/* 5) Masque toute <video> résiduelle du héros */
#accueil video, .hero video, video.hero-media, .hero-media video{
  display:none !important; opacity:0 !important; visibility:hidden !important;
}

/* ===== Footer — logo net (si besoin) ===== */
footer img[alt*="Taxi Moto Paris"]{
  image-rendering:auto; filter:none !important;
}



/* ===== PATCH HERO CIBLÉ ===== */

/* 1) Le conteneur hero sert d'ancre */
#accueil { position: relative !important; min-height: 68vh; }

/* 2) Notre <picture> doit s'afficher quoi qu'il arrive, en plein écran */
#accueil picture.hero-block{ position:absolute !important; inset:0 !important; display:block !important; z-index:0 !important; opacity:1 !important; visibility:visible !important; }
#accueil picture.hero-block > img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }

/* 3) Supprimer le panneau flouté/obscur au-dessus de l'image (Gutenberg Cover/Group) */
#accueil .wp-block-cover__background,
#accueil .wp-block-cover__image-background,
#accueil .wp-block-cover__video-background,
#accueil .wp-block-cover__foreground { display:none !important; background:transparent !important; filter:none !important; backdrop-filter:none !important; opacity:0 !important; }

#accueil .wp-block-group.has-background,
#accueil .wp-block-cover { background:transparent !important; box-shadow:none !important; }

/* 4) Vignette en double : cacher toute <img> du hero pointant vers les 2 fichiers du hero,
      sauf si elle est DANS notre <picture> */
#accueil img[src*="Taxi-Moto-Paris-PG.jpg"]:not(picture.hero-block img),
#accueil img[data-opt-src*="Taxi-Moto-Paris-PG.jpg"]:not(picture.hero-block img),
#accueil img[src*="Taxi-Moto-Paris-Prestige-Group-2-1.jpeg"]:not(picture.hero-block img),
#accueil img[data-opt-src*="Taxi-Moto-Paris-Prestige-Group-2-1.jpeg"]:not(picture.hero-block img){
  display:none !important;
}

/* 5) Masquer toute <video> résiduelle du hero */
#accueil video{ display:none !important; opacity:0 !important; visibility:hidden !important; }

/* 6) Le texte du hero reste cliquable par-dessus l'image */
#accueil .wp-block-cover__inner-container,
#accueil .hero-copy,
#accueil .wp-block-group{ position:relative !important; z-index:2 !important; }




/* ===== PATCH HERO CIBLÉ (sauvegarde) ===== */
#accueil { position: relative !important; min-height: 68vh; }
#accueil picture.hero-block{ position:absolute !important; inset:0 !important; display:block !important; z-index:0 !important; opacity:1 !important; visibility:visible !important; }
#accueil picture.hero-block > img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
#accueil .wp-block-cover__background,
#accueil .wp-block-cover__image-background,
#accueil .wp-block-cover__video-background,
#accueil .wp-block-cover__foreground { display:none !important; background:transparent !important; filter:none !important; backdrop-filter:none !important; opacity:0 !important; }
#accueil .wp-block-group.has-background,
#accueil .wp-block-cover { background:transparent !important; box-shadow:none !important; }
#accueil img[src*="Taxi-Moto-Paris-PG.jpg"]:not(picture.hero-block img),
#accueil img[data-opt-src*="Taxi-Moto-Paris-PG.jpg"]:not(picture.hero-block img),
#accueil img[src*="Taxi-Moto-Paris-Prestige-Group-2-1.jpeg"]:not(picture.hero-block img),
#accueil img[data-opt-src*="Taxi-Moto-Paris-Prestige-Group-2-1.jpeg"]:not(picture.hero-block img){ display:none !important; }
#accueil video{ display:none !important; opacity:0 !important; visibility:hidden !important; }
#accueil .wp-block-cover__inner-container,
#accueil .hero-copy,
#accueil .wp-block-group{ position:relative !important; z-index:2 !important; }


/* ===== PATCH HERO CIBLÉ (stabilisé) ===== */
#accueil { position: relative !important; min-height: 68vh; }
#accueil picture.hero-block{ position:absolute !important; inset:0 !important; display:block !important; z-index:0 !important; opacity:1 !important; visibility:visible !important; }
#accueil picture.hero-block > img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
#accueil .wp-block-cover__background,
#accueil .wp-block-cover__image-background,
#accueil .wp-block-cover__video-background,
#accueil .wp-block-cover__foreground { display:none !important; background:transparent !important; filter:none !important; backdrop-filter:none !important; opacity:0 !important; }
#accueil .wp-block-group.has-background,
#accueil .wp-block-cover { background:transparent !important; box-shadow:none !important; }
#accueil img[src*="Taxi-Moto-Paris-PG.jpg"]:not(picture.hero-block img),
#accueil img[data-opt-src*="Taxi-Moto-Paris-PG.jpg"]:not(picture.hero-block img),
#accueil img[src*="Taxi-Moto-Paris-Prestige-Group-2-1.jpeg"]:not(picture.hero-block img),
#accueil img[data-opt-src*="Taxi-Moto-Paris-Prestige-Group-2-1.jpeg"]:not(picture.hero-block img){ display:none !important; }
#accueil video{ display:none !important; opacity:0 !important; visibility:hidden !important; }
#accueil .wp-block-cover__inner-container,
#accueil .hero-copy,
#accueil .wp-block-group{ position:relative !important; z-index:2 !important; }


/* ===== TUNE HERO (position + luminosité + lisibilité) ===== */

/* 1) Hauteur du héros : cache la section suivante sur mobile */
@media (max-width: 767px){
  #accueil{
    min-height: 102svh !important;   /* plein écran réel mobile */
    overflow: hidden;                 /* évite d’apercevoir la section suivante */
  }
}
@media (min-width: 768px){
  #accueil{
    min-height: 85vh !important;     /* remonte le bloc sur desktop */
  }
}

/* 2) Centrer verticalement le contenu du héros (le panneau gris) */
#accueil .wp-block-cover__inner-container,
#accueil .wp-block-group{
  min-height: inherit !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;  /* centre le bloc, plus “collé” en bas */
  align-items: center;
  padding: clamp(16px,4vh,32px) clamp(16px,4vw,32px) !important;
}

/* 3) Panneau gris : éclaircir + arrondis + ombre douce */
#accueil .wp-block-group.has-background{
  background: rgba(0,0,0,0.16) !important;   /* avant: trop sombre */
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
}
@media (max-width: 767px){
  #accueil .wp-block-group.has-background{
    background: rgba(0,0,0,0.22) !important;  /* un poil plus soutenu sur mobile */
  }
}

/* 4) Lisibilité du texte dans le héros */
#accueil h1{
  color:#fff !important;
  font-size: clamp(28px,5.2vw,64px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#accueil p{
  color:#F2F5F7 !important;
  line-height: 1.45 !important;
  max-width: 62ch;
  text-shadow: 0 1px 6px rgba(0,0,0,.18);
}

/* 5) Boutons du héros : lisibles et confortables */
#accueil .cta-row{ display:flex; gap:12px; flex-wrap: wrap; }
#accueil .cta-row a,
#accueil .cta-row button{
  padding: 14px 22px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

/* 6) Sécurité : pas d’overlay/filtres qui assombrissent par-dessus */
#accueil .wp-block-cover__background,
#accueil .wp-block-cover__image-background,
#accueil .wp-block-cover__video-background,
#accueil .wp-block-cover__foreground{
  display:none !important; background:transparent !important;
  filter:none !important; backdrop-filter:none !important; opacity:0 !important;
}



/* ==== HERO – Fix desktop position + remove blur/dim on mobile ==== */

/* A) Position & luminosité du panneau (desktop) */
@media (min-width: 992px){
  #accueil{
    min-height: 90vh !important;              /* remonte le bloc sur l'écran */
  }
  /* centre verticalement le panneau dans le hero */
  #accueil .wp-block-cover__inner-container,
  #accueil .wp-block-group{
    min-height: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(16px,3vh,32px) clamp(16px,3vw,32px) !important;
  }
  /* éclaircir réellement le “panneau gris” quelle que soit sa classe */
  #accueil [class*="wp-block-group"].has-background{
    background: rgba(0,0,0,0.10) !important;  /* avant trop sombre */
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.14) !important;
  }
}

/* B) Mobile : pas de flou, pas d'assombrissement */
@media (max-width: 991px){
  #accueil{ min-height: 100svh !important; }

  /* supprime tout blur/assombrissement appliqué par le thème ou Optimole */
  #accueil picture.hero-block,
  #accueil picture.hero-block img,
  #accueil .wp-block-cover__image-background,
  #accueil .wp-block-cover__video-background{
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    image-rendering: auto !important;
  }

  /* placeholders “blur up” (Optimole) -> nette immédiatement */
  #accueil img.optml-blur-up,
  #accueil img[class*="optml"],
  #accueil img[data-opt-lazy-loaded]{
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
  }

  /* supprime les couches d’assombrissement “dim” de Gutenberg */
  #accueil .has-background-dim,
  #accueil .has-background-dim::before,
  #accueil .wp-block-cover__foreground{
    background: transparent !important;
    opacity: 0 !important;
    filter: none !important;
    backdrop-filter: none !important;
  }

  /* panneau un peu plus clair aussi sur mobile */
  #accueil [class*="wp-block-group"].has-background{
    background: rgba(0,0,0,0.14) !important;
  }
}

/* C) Lisibilité texte du hero (mobile + desktop) */
#accueil h1{
  color:#fff !important;
  font-size: clamp(28px,5.2vw,64px) !important;
  line-height: 1.08 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.22);
}
#accueil p{
  color:#F2F5F7 !important;
  line-height: 1.45 !important;
  max-width: 62ch;
  text-shadow: 0 1px 6px rgba(0,0,0,.16);
}



/* === HERO — PATCH FINAL (priorité max) =================================== */

/* 0) Désactive toutes les surcouches/assombrissements du bloc Cover */
#accueil::before,
#accueil::after,
#accueil .wp-block-cover__background,
#accueil .wp-block-cover__foreground,
#accueil .has-background-dim,
#accueil .has-background-dim::before{
  background:none !important;
  opacity:0 !important;
  filter:none !important;
  backdrop-filter:none !important;
}

/* 1) Image du hero : nette (pas de blur/filtres Optimole/Gutenberg) */
#accueil picture.hero-block img,
#accueil .wp-block-cover__image-background,
#accueil .wp-block-cover__video-background{
  filter:none !important;
  -webkit-filter:none !important;
  image-rendering:auto !important;
  opacity:1 !important;
  transform:none !important;
}

/* 1b) Placeholders Optimole “blur-up” -> affichage net immédiat */
#accueil img.optml-blur-up,
#accueil img[class*="optml"],
#accueil img[data-opt-lazy-loaded]{
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 2) Panneau (cartouche) : plus clair, sans flou agressif */
#accueil .wp-block-group.has-background,
#accueil .hero-copy{
  background: rgba(0,0,0,0.16) !important;   /* gris clair transparent */
  backdrop-filter:none !important;           /* retire le blur */
  -webkit-backdrop-filter:none !important;
  border-radius:18px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.14) !important;
}

/* 3) Centrage vertical réel du panneau dans le hero */
#accueil,
#accueil .wp-block-cover{ min-height: 88vh !important; }
#accueil .wp-block-cover__inner-container,
#accueil .wp-block-group{
  min-height:inherit !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(16px,3vh,32px) clamp(16px,3vw,32px) !important;
}

/* 4) Overlay interne (si .hero-overlay existe) ultra léger */
.hero-wrap .hero-overlay{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.08) 40%,
    rgba(0,0,0,0.12) 100%
  ) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 5) Lisibilité du texte sans “cramer” l’image */
#accueil h1{
  color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.25) !important;
}
#accueil p{
  color:#F2F5F7 !important;
  text-shadow:0 1px 6px rgba(0,0,0,.16) !important;
  max-width:62ch;
}

/* ===== MOBILE : rendu net, zéro voile sombre ============================ */
@media (max-width: 768px){

  /* pas d’overlay supplémentaire */
  #accueil::before, #accueil::after{ display:none !important; }

  /* image claire et nette */
  #accueil picture.hero-block img,
  #accueil .wp-block-cover__image-background{
    filter:none !important;
    -webkit-filter:none !important;
    image-rendering:auto !important;
    opacity:1 !important;
  }

  /* panneau un poil plus contrasté mais sans flou */
  #accueil .wp-block-group.has-background,
  #accueil .hero-copy{
    background: rgba(0,0,0,0.20) !important;
  }

  /* occupe tout l’écran pour cacher la section suivante */
  #accueil, #accueil .wp-block-cover{ min-height: 100svh !important; }
}

/* ===== DESKTOP : panneau un peu plus haut/clair (comme la maquette) ===== */
@media (min-width: 1024px){
  #accueil .wp-block-group.has-background,
  #accueil .hero-copy{
    background: rgba(0,0,0,0.12) !important; /* plus clair que mobile */
  }
}



/* === HERO FIX – plein écran net (desktop + mobile) ===================== */

/* A. Aucune marge/padding parasite autour du héro */
body.home #accueil,
body.home .wp-block-cover#accueil {
  margin: 0 !important;
  padding: 0 !important;
}

/* B. Le héro DOIT occuper 100% de l'écran, sans gap */
body.home #accueil {
  position: relative !important;
  height: 100svh !important;    /* plein écran “small viewport” = fiable */
  min-height: 100svh !important;
  /* fallback multi-navigateurs */
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

/* C. Le wrapper interne suit la hauteur du conteneur */
body.home #accueil .wp-block-cover__inner-container,
body.home #accueil .wp-block-group {
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px,3vh,32px) clamp(16px,3vw,32px) !important;
}

/* D. L’image de fond couvre TOUT, sans letterboxing ni recadrage bizarre */
body.home #accueil picture.hero-block {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 0 !important;
}
body.home #accueil picture.hero-block > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  /* tue tout flou/filtre résiduel */
  filter: none !important;
  -webkit-filter: none !important;
  image-rendering: auto !important;
  opacity: 1 !important;
  transform: none !important;
}

/* E. Pas de surcouche sombre/floue au-dessus de l’image */
body.home #accueil::before,
body.home #accueil::after,
body.home #accueil .wp-block-cover__background,
body.home #accueil .wp-block-cover__foreground,
body.home #accueil .has-background-dim,
body.home #accueil .has-background-dim::before {
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* F. “Panneau gris” : plus clair et sans blur agressif */
body.home #accueil .wp-block-group.has-background,
body.home #accueil .hero-copy {
  background: rgba(0,0,0,0.14) !important; /* clair mais lisible */
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* G. Texte lisible sans assombrir la photo */
body.home #accueil h1 { 
  color:#fff !important; 
  text-shadow: 0 2px 8px rgba(0,0,0,.28) !important; 
}
body.home #accueil p { 
  color:#F2F5F7 !important; 
  text-shadow: 0 1px 6px rgba(0,0,0,.16) !important; 
  max-width: 62ch; 
}

/* H. MOBILE — impose le vrai plein écran et retire tout blur */
@media (max-width: 768px){
  body.home #accueil{
    height: calc(var(--vh, 1vh) * 100) !important; /* piloté par JS ci-dessous */
    min-height: calc(var(--vh, 1vh) * 100) !important;
  }

  /* désactive les placeholders/effets Optimole */
  body.home #accueil img.optml-blur-up,
  body.home #accueil img[class*="optml"],
  body.home #accueil img[data-opt-lazy-loaded]{
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
  }

  /* panneau un poil plus dense pour la lecture, sans flou */
  body.home #accueil .wp-block-group.has-background,
  body.home #accueil .hero-copy{
    background: rgba(0,0,0,0.20) !important;
  }
}



/* === HERO MOBILE : supprimer tout flou/assombrissement résiduel === */
@media (max-width: 768px){

  /* 1) Tue tout filtre/blur Optimole sur l'image du héros */
  #accueil picture.hero-block img,
  #accueil img.optml-blur-up,
  #accueil img[class*="optml"],
  #accueil img[data-opt-lazy-loaded]{
    -webkit-filter: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    image-rendering: auto !important;
  }

  /* 2) Assure une image nette et non compressée visuellement */
  #accueil picture.hero-block img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    image-rendering: -webkit-optimize-contrast; /* iOS/WebKit */
  }

  /* 3) Retire tout voile/blur posé par le bloc Cover ou le thème */
  #accueil .wp-block-cover__background,
  #accueil .wp-block-cover__image-background,
  #accueil .wp-block-cover__video-background,
  #accueil .wp-block-cover__foreground{
    background: transparent !important;
    -webkit-filter: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    opacity: 0 !important;
  }

  /* 4) Overlay interne : très léger pour la lisibilité du texte */
  .hero-overlay{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.12) 0%,
      rgba(0,0,0,0.10) 40%,
      rgba(0,0,0,0.14) 100%
    ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 5) Panneau de texte : léger fond, sans flou */
  .hero-copy{
    background: rgba(0,0,0,0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 6) Hauteur pleine et centrage sûr du héros */
  #accueil{
    min-height: 100svh !important;
    overflow: hidden;
  }
  #accueil .wp-block-cover__inner-container,
  #accueil .wp-block-group{
    min-height: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* === MOBILE HERO : image nette, pas de blur ni voile === */
@media (max-width: 768px){
  /* l'image du <picture> en plein écran et sans aucune filtration */
  #accueil picture.hero-block img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    -webkit-filter:none !important;
    filter:none !important;
    opacity:1 !important;
    transform:none !important;
    image-rendering:auto !important;
  }

  /* retire tout overlay/flou résiduels du bloc Cover */
  #accueil .wp-block-cover__background,
  #accueil .wp-block-cover__image-background,
  #accueil .wp-block-cover__video-background,
  #accueil .wp-block-cover__foreground{
    background:transparent !important;
    -webkit-filter:none !important;
    filter:none !important;
    backdrop-filter:none !important;
    opacity:0 !important;
  }

  /* pas de flou derrière le panneau de texte */
  .hero-copy{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(0,0,0,.18) !important; /* léger pour la lisibilité */
  }

  /* assure la pleine hauteur et le centrage */
  #accueil{ min-height:100svh !important; overflow:hidden; }
  #accueil .wp-block-cover__inner-container,
  #accueil .wp-block-group{
    min-height:inherit !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* évite tout lissage dû à une transform sur le conteneur du <picture> */
  #accueil picture.hero-block,
  #accueil picture.hero-block *{
    transform:none !important;
  }
}


/* === HERO MOBILE – image nette, taille réelle, zéro blur === */
@media (max-width: 768px){
  /* 1) Le <picture> du héro a une taille réelle dès le chargement */
  #accueil picture.hero-block{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100svh !important;  /* plein écran mobile réaliste */
    min-height: 100svh !important;
    overflow: hidden !important;
  }
  #accueil picture.hero-block > img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* 2) AUCUN flou / AUCUNE transition */
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    image-rendering: auto !important;
  }

  /* 3) Tue toute classe “blur-up / lazy” résiduelle d’Optimole dans le héros */
  #accueil img.optml-blur-up,
  #accueil img.optml-lazy-image,
  #accueil img[class*="optml"],
  #accueil img[data-opt-lazy-loaded]{
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* 4) Pas d’assombrissement/voiles sur mobile */
  #accueil .wp-block-cover__background,
  #accueil .wp-block-cover__image-background,
  #accueil .wp-block-cover__video-background,
  #accueil .wp-block-cover__foreground{
    display: none !important;
    background: transparent !important;
    filter: none !important;
    backdrop-filter: none !important;
    opacity: 0 !important;
  }
}



/* === HERO — CANONIQUE, PRIORITÉ MAX (desktop + mobile) ================= */

/* Conteneur héro plein écran et sans overlay Gutenberg */
body.home #accueil,
body.home .wp-block-cover#accueil{
  position:relative !important;
  margin:0 !important; padding:0 !important;
  height:100svh !important; min-height:100svh !important;
  height:100dvh !important; min-height:100dvh !important;
  overflow:hidden !important;
}
body.home #accueil::before,
body.home #accueil::after,
body.home #accueil .wp-block-cover__background,
body.home #accueil .wp-block-cover__foreground,
body.home #accueil .has-background-dim,
body.home #accueil .has-background-dim::before{
  background:none !important; opacity:0 !important;
  filter:none !important; backdrop-filter:none !important;
}

/* <picture> du héros : couvre 100% de l’écran, jamais flou */
body.home #accueil picture.hero-block{
  position:absolute !important; inset:0 !important; display:block !important;
  width:100vw !important; height:100svh !important; min-height:100svh !important;
  z-index:0 !important; overflow:hidden !important;
}
body.home #accueil picture.hero-block > img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  object-position:center center !important;
  filter:none !important; -webkit-filter:none !important;
  image-rendering:auto !important;
  opacity:1 !important; transform:none !important; transition:none !important;
}

/* TUE toute vidéo de fond résiduelle */
body.home #accueil video,
body.home .hero video, video.hero-media, .hero-media video{
  display:none !important; opacity:0 !important; visibility:hidden !important;
}

/* Panneau texte : clair, sans blur, au-dessus de l’image */
body.home #accueil .wp-block-cover__inner-container,
body.home #accueil .wp-block-group{
  position:relative !important; z-index:2 !important;
  min-height:100% !important; display:flex !important;
  align-items:center !important; justify-content:center !important;
  padding:clamp(16px,3vh,32px) clamp(16px,3vw,32px) !important;
}
body.home #accueil .wp-block-group.has-background,
body.home #accueil .hero-copy{
  background:rgba(0,0,0,.18) !important;      /* lisible mais pas sombre */
  border-radius:18px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.14) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* Typo lisible sans forcer d’assombrissement global */
body.home #accueil h1{ color:#fff !important; text-shadow:0 2px 8px rgba(0,0,0,.25) !important; }
body.home #accueil p { color:#F2F5F7 !important; text-shadow:0 1px 6px rgba(0,0,0,.16) !important; max-width:62ch; }

/* MOBILE : impose la vraie hauteur de viewport et neutralise tout “blur-up” */
@media (max-width: 768px){
  body.home #accueil{
    height:calc(var(--vh, 1vh) * 100) !important;
    min-height:calc(var(--vh, 1vh) * 100) !important;
  }
  body.home #accueil img.optml-blur-up,
  body.home #accueil img[class*="optml"],
  body.home #accueil img[data-opt-lazy-loaded]{
    filter:none !important; -webkit-filter:none !important; opacity:1 !important;
    transform:none !important; transition:none !important;
  }
}




/* 1) Enlever le 2e voile du hero (double film gris) */
#accueil::after{
  content:none !important;
  background:none !important;
  opacity:0 !important;
  display:none !important;
}

/* 2) Si Optimole laisse un placeholder gris, on coupe ses effets */
#avantages .adv-img img,
#temoignages img {
  opacity: 1 !important;
  filter: none !important;
}

/* Signatures possibles des placeholders Optimole : on neutralise le flou/fond */
img.optml-lazy-image,
img.optml-lazy-image[data-opt-lazy-loaded="true"],
.optml-bg-lazy,
.optml-bg-image {
  background: none !important;
  filter: none !important;
}


/* 🩻 Adoucir et supprimer le double film gris sur le hero mobile */
@media (max-width: 768px) {
  /* On neutralise tout film global ajouté par le thème */
  #accueil::before,
  #accueil::after {
    background: none !important;
    opacity: 0 !important;
  }

  /* On garde UN seul overlay, mais plus léger */
  #accueil .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.06) 40%,
      rgba(0, 0, 0, 0.08) 100%
    ) !important;
    backdrop-filter: blur(1.5px) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
  }

  /* Le bloc texte reste lisible sans rajouter un film trop foncé */
  #accueil .hero-copy {
    background: rgba(0, 0, 0, 0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}



/* === ANTI-FLASH / FILM GRIS SUR LES IMAGES === */

/* On neutralise les fonds et transitions dans les sections Avantages & Témoignages */
#avantages .adv-img,
#temoignages,
#temoignages .card-stat {
  background: transparent !important;
}

/* Les images doivent être visibles tout de suite, sans fade ni filtre */
#avantages .adv-img img,
#temoignages img,
#accueil picture.hero-block img {
  opacity: 1 !important;
  transition: none !important;
  filter: none !important;
}

/* Cibles fréquentes d’Optimole pour les images lazy */
img[data-opt-src],
img[data-opt-lazy-loaded],
img.optml-lazy-image,
img.optml-bg-lazy {
  opacity: 1 !important;
  transition: none !important;
}

/* Placeholder de fond Optimole : on enlève le fond gris */
.optml-bg-lazy,
.optml-bg-lazy::before,
.optml-bg-lazy::after {
  background: transparent !important;
}

/* === HERO MOBILE : SUPPRIMER LE DOUBLE FILM GRIS === */

@media (max-width: 768px) {
  /* On coupe les pseudo-éléments supplémentaires sur le bloc hero */
  #accueil::before,
  #accueil::after,
  .hero-wrap::before,
  .hero-wrap::after {
    content: none !important;
    background: none !important;
    opacity: 0 !important;
  }

  /* On garde un SEUL overlay, plus léger, pour la lisibilité du texte */
  #accueil .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.10) 40%,
      rgba(0,0,0,0.18) 100%
    ) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
}



/* HERO MOBILE CLEAN */
@media (max-width: 767px) {
  .hero-copy {
    max-width: 88%;
    margin: 0 auto;
    text-align: center;
  }

  .hero-title {
    font-size: clamp(2.1rem, 5.4vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: 0.6rem;
  }

  .hero-title .accent {
    display: block;
    margin-top: 0.15rem;
  }

  .hero-sub {
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 0.4rem;
    margin-bottom: 1.1rem;
  }

  .hero-actions .btn {
    font-size: 0.98rem;
  }

  .hero-mini {
    font-size: 0.8rem;
    margin-top: 0.8rem;
  }

  /* petit boost de lisibilité sur mobile sans double film */
  #accueil .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.24) 40%,
      rgba(0, 0, 0, 0.3) 100%
    );
  }
}


/* ===========================
   HERO MOBILE – TYPO & ALIGNEMENT
   =========================== */
@media (max-width: 767px) {
  .hero-copy {
    text-align: left;
    max-width: 22rem;
  }

  .hero-title {
    font-size: 1.6rem;
    line-height: 1.15;
    margin-bottom: 0.75rem;
  }

  .hero-title .accent {
    display: block;
  }

  .hero-sub {
    font-size: 0.95rem;
    line-height: 1.35;
    margin-bottom: 1.1rem;
  }

  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.8rem;
  }

  .hero-actions .btn-lg {
    width: 100%;
    justify-content: center;
  }

  .hero-mini {
    font-size: 0.8rem;
    opacity: 0.9;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
  }

  .hero-mini-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .hero-mini-sep {
    opacity: 0.6;
  }
}

/* ===========================
   CTA PRINCIPAL – BASE
   =========================== */
.btn-main-cta {
  position: relative;
  overflow: hidden;
}

/* ===========================
   ANIMATION 1 – PULSE LENT PREMIUM (RECOMMANDÉE)
   =========================== */
.btn-main-cta.cta-pulse {
  animation: ctaPulse 1.8s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.03); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45); }
  80%  { transform: scale(1); box-shadow: 0 0 0 14px rgba(212, 175, 55, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* ===========================
   ANIMATION 2 – GLOW DORÉ TRÈS LÉGER
   =========================== */
.btn-main-cta.cta-glow {
  animation: ctaGlow 2.4s ease-in-out infinite;
}

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
  50%      { box-shadow: 0 0 16px rgba(212, 175, 55, 0.6); }
}

/* ===========================
   ANIMATION 3 – SHINE DIAGONAL SUBTIL
   =========================== */
.btn-main-cta.cta-shine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 40%,
    transparent 80%
  );
  transform: translateX(-120%);
  pointer-events: none;
}

.btn-main-cta.cta-shine {
  /* déclenche le shine toutes les 3.5s */
  animation: ctaShineTrigger 3.5s infinite;
}

@keyframes ctaShineTrigger {
  0%   { }
  8%   { }
  10%  { transform: translateZ(0); }
  100% { }
}

.btn-main-cta.cta-shine::before {
  animation: ctaShine 3.5s infinite;
}

@keyframes ctaShine {
  0%   { transform: translateX(-120%); }
  12%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* ===========================
   ANIMATION 4 – SHAKE ULTRA LÉGER  (toutes les 15s)
   =========================== */
.btn-main-cta.cta-shake {
  animation: ctaShake 15s ease-in-out infinite;
}

@keyframes ctaShake {
  0%, 93%, 100% { transform: translateX(0); }
  94%          { transform: translateX(-1px); }
  95%          { transform: translateX(2px); }
  96%          { transform: translateX(-2px); }
  97%          { transform: translateX(1px); }
}

/* Si tu veux désactiver toutes les animations sur desktop par sécurité : */
@media (min-width: 1024px) {
  .btn-main-cta {
    animation: none !important;
  }
  .btn-main-cta::before {
    animation: none !important;
  }
}