
/* === CHEVAUCHEMENT — desktop uniquement, ajouter la classe "overlap-top" dans Gutenberg === */
@media (min-width: 1025px) {
    .overlap-top {margin-top: -29rem; position: relative; z-index: 2; transition: margin-top 900ms cubic-bezier(0.22, 1, 0.36, 1);}
    .overlap-top.overlap-settled {margin-top: 0;}
    #content-area:has(> .overlap-top) .bandeau-entete {padding-bottom: 15rem; transition: padding-bottom 900ms cubic-bezier(0.22, 1, 0.36, 1);}
    #content-area:has(> .overlap-top.overlap-settled) .bandeau-entete {padding-bottom: 0;}
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    .overlap-top {margin-top: 0 !important; transition: none !important;}
    #content-area:has(> .overlap-top) .bandeau-entete {padding-bottom: 0 !important; transition: none !important;}
}

/* === GRID === */
.container-bloc-contact .contact-grid {display: flex; flex-direction: column; gap: 3rem;}

/* === CARTE ENTITÉ === */
.container-bloc-contact .contact-entity {border-radius: var(--border-radius); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--couleur-background-dark);}

/* === HEADER COLORÉ === */
.container-bloc-contact .contact-entity-header {background-color: var(--couleur-principale); color: #fff; padding: 3rem; display: flex; flex-direction: column; gap: 1rem;}
.container-bloc-contact .contact-entity-header * {color: #fff;}
.container-bloc-contact .contact-entity-nom {font-size: 2.2rem; margin: 0; line-height: 1.2;}
.container-bloc-contact .contact-adresse {font-size: 1.4rem; line-height: 1.6; opacity: .9;}
.container-bloc-contact .contact-adresse p {margin: 0;}
.container-bloc-contact .contact-tel {font-size: 1.6rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .8rem;}
.container-bloc-contact .contact-tel a {color: #fff;}
.container-bloc-contact .contact-social {gap: .8rem; flex-wrap: wrap; margin-top: .5rem;}
.container-bloc-contact .contact-social-link {width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; transition: background 200ms ease, border-color 200ms ease;}

/* === BODY BLANC === */
.container-bloc-contact .contact-entity-body {background: #fff; padding: 3rem; display: flex; flex-direction: column; gap: 2rem; flex: 1;}

/* === HORAIRES === */
.container-bloc-contact .contact-horaires-title {font-weight: 700; font-size: 1.4rem; margin: 0 0 .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--couleur-principale);}
.container-bloc-contact .contact-horaires .row-horaire {display: flex; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--couleur-background-light);}
.container-bloc-contact .contact-horaires .row-horaire:last-child {border-bottom: none;}
.container-bloc-contact .contact-horaires .row-horaire .jour {font-weight: 600; width: 10rem; flex-shrink: 0;}
.container-bloc-contact .contact-horaires .row-horaire .heures {color: var(--couleur-texte);}

/* === NOTE GOOGLE === */
.container-bloc-contact .contact-rating {display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: 1rem 1.2rem; background: var(--couleur-background-light); border-radius: .6rem; font-size: 1.4rem; text-decoration: none; color: var(--couleur-texte);}
.container-bloc-contact .contact-rating-stars {color: #f59e0b; font-size: 1.5rem;}
.container-bloc-contact .contact-rating-value {font-weight: 700;}
.container-bloc-contact .contact-rating-total {color: var(--couleur-texte-light);}
.container-bloc-contact .contact-rating-label {margin-left: auto; color: var(--couleur-principale); font-weight: 600;}

/* === FORMULAIRE — structure CF7 === */
.container-bloc-contact .contact-form {border-top: 2px solid var(--couleur-background-light); padding-top: 2rem;}
.container-bloc-contact .contact-form-title {font-weight: 700; font-size: 1.4rem; margin: 0 0 1.5rem; text-transform: uppercase; letter-spacing: .06em; color: var(--couleur-principale);}
.container-bloc-contact .contact-form .form-row {display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0;}
.container-bloc-contact .contact-form .form-column {flex: 1; min-width: 0;}
.container-bloc-contact .contact-form .form-column p {margin: 0;}
.container-bloc-contact .contact-form p {margin-bottom: .8rem;}
.container-bloc-contact .contact-form span.wpcf7-form-control-wrap {display: block;}

/* Inputs texte / email / tel / textarea */
.container-bloc-contact .contact-form .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {border: 1px solid var(--couleur-secondaire) !important; border-radius: .5rem !important; padding: 1rem 1.2rem !important; width: 100% !important; font-size: 1.4rem; background: #fff; color: var(--couleur-texte); transition: border-color 200ms ease; display: block; box-sizing: border-box;}
.container-bloc-contact .contact-form .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus {border-color: var(--couleur-principale) !important; outline: none;}
.container-bloc-contact .contact-form textarea.wpcf7-form-control {min-height: 12rem; resize: vertical;}

/* Checkbox — corrige le saut au clic */
.container-bloc-contact .contact-form .wpcf7-list-item {display: block; margin: 0;}
.container-bloc-contact .contact-form .wpcf7-list-item label {display: flex; align-items: center; gap: .8rem; cursor: pointer; font-size: 1.4rem; line-height: 1.4;}
.container-bloc-contact .contact-form .wpcf7-list-item input[type="checkbox"] {position: static !important; width: 1.6rem; height: 1.6rem; min-width: 1.6rem; flex-shrink: 0; margin: 0; cursor: pointer; accent-color: var(--couleur-principale); border: none !important; appearance: auto; -webkit-appearance: checkbox;}
.container-bloc-contact .contact-form .wpcf7-list-item label input[type="checkbox"]:checked {position: static !important; background-image: none;}
.container-bloc-contact .contact-form .wpcf7-list-item label input[type="checkbox"]:checked::after {background-image: none;}

/* Bouton submit */
.container-bloc-contact .contact-form input[type="submit"] {background-color: var(--couleur-cta); color: #fff; border: none; padding: 1.2rem 2.5rem; font-size: 1.4rem; font-weight: 600; border-radius: .5rem; cursor: pointer; transition: var(--transition-light); width: 100%; margin-top: .5rem;}

/* === HOVER === */
@media (hover: hover) {
    .container-bloc-contact .contact-social-link:hover {background: rgba(255,255,255,.2); border-color: #fff;}
    .container-bloc-contact .contact-rating:hover .contact-rating-label {text-decoration: underline;}
    .container-bloc-contact .contact-form input[type="submit"]:hover {background-color: var(--couleur-texte);}
}

/* === DESKTOP === */
@media (min-width: 1025px) {
    .container-bloc-contact .contact-grid {flex-direction: row; align-items: stretch;}
    .container-bloc-contact .contact-entity {flex: 1;}
    .container-bloc-contact .contact-entity-nom {font-size: 2.4rem;}
}
