/* START PAGE AVIS */
.avis-hero {padding: 40px 0 70px 0;}
.avis-hero .breadcrumb-metier {margin-bottom: 25px;}
.avis-hero-grid {display: flex; align-items: flex-start; gap: 60px;}
.avis-hero-texte {flex: 1; padding-top: 40px;}
.avis-hero h1 {font-size: 46px !important; line-height: 1.1 !important; padding: 10px 0 0 0;}
.avis-intro {max-width: 480px; margin: 15px 0 0 0; font-size: 17px; color: var(--color-text-gray);}

/* Formulaire Gravity Forms 66 : classes CSS à renseigner sur les champs (avis-etoiles, avis-demi, avis-email, avis-texte). */
.avis-form {flex: 0 0 52%; box-sizing: border-box; background: white; border: solid 1px var(--color-border); border-radius: 14px; padding: 28px 28px 22px 28px; box-shadow: 0 10px 30px rgb(41 41 41 / 6%);}
.avis-form h2 {font-size: 24px; padding: 0 0 10px 0;}
.avis-form .gform_wrapper {margin: 0 !important; max-width: none !important;}
.avis-form .gform_wrapper ul.gform_fields {display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0 !important; padding: 0 !important;}
.avis-form .gform_wrapper ul.gform_fields li.gfield {flex: 0 0 100%; box-sizing: border-box; margin: 18px 0 0 0 !important; padding: 0 !important; max-width: none !important;}
.avis-form .gform_wrapper ul.gform_fields li.gfield.avis-demi {flex: 1 1 calc(50% - 6px);}
.avis-form .gform_wrapper .top_label .gfield_label {display: flex !important; align-items: baseline; gap: 4px; margin: 0 0 8px 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3; color: var(--color-title);}
.avis-form .gform_wrapper .gfield_required {color: #e5484d; margin: 0 !important;}
.avis-form .avis-email .gfield_label:after {content: "(non publiée)"; font-weight: 400; color: var(--color-text-gray);}
.avis-form .gform_wrapper .ginput_container {margin: 0 !important;}
.avis-form .gform_body .gfield input[type=text], .avis-form .gform_body .gfield input[type=email], .avis-form .gform_body .gfield textarea {width: 100% !important; box-sizing: border-box; margin: 0; padding: 10px 12px !important; background: var(--color-bg) !important; border: solid 1px var(--color-border) !important; border-radius: 8px !important; font-size: 16px !important; color: var(--color-title); box-shadow: none !important; transition: .2s;}
.avis-form .gform_body .gfield input[type=text], .avis-form .gform_body .gfield input[type=email] {height: 48px;}
.avis-form .gform_body .gfield textarea {height: 110px !important; min-height: 110px; resize: vertical;}
.avis-form .gform_body .gfield input:focus, .avis-form .gform_body .gfield textarea:focus {background: white !important; border-color: var(--color-primary) !important; outline: none;}
.avis-form .gform_body .gfield input::placeholder, .avis-form .gform_body .gfield textarea::placeholder {color: #9a9aa0;}
.avis-form .ginput_counter {display: none !important;}
.avis-compteur {margin-left: auto; font-size: 13px; font-weight: 400; color: var(--color-text-gray);}
.avis-compteur.limite {color: #e5484d;}

/* Note en étoiles : bouton radio, choix 1 à 5 dans l'ordre. */
.avis-form .avis-etoiles .gfield_radio {display: flex !important; gap: 4px; margin: 0 !important; padding: 0 !important;}
.avis-form .avis-etoiles .gchoice {position: relative; display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important;}
.avis-form .avis-etoiles .gchoice input {position: absolute !important; opacity: 0; width: 1px !important; height: 1px !important; margin: 0 !important;}
.avis-form .avis-etoiles .gchoice label {display: block !important; width: 26px !important; max-width: none !important; height: 26px; margin: 0 !important; padding: 0 !important; overflow: hidden; font-size: 0 !important; cursor: pointer;}
.avis-form .avis-etoiles .gchoice label:before {content: ""; display: block; width: 26px; height: 26px; background: var(--color-border); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.7 6.3.9-4.5 4.4 1 6.3-5.6-3-5.6 3 1-6.3-4.5-4.4 6.3-.9z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.7 6.3.9-4.5 4.4 1 6.3-5.6-3-5.6 3 1-6.3-4.5-4.4 6.3-.9z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s;}
.avis-form .avis-etoiles .gchoice label:hover:before {transform: scale(1.12);}
/* Étoiles pleines jusqu'au choix coché, puis jusqu'à l'étoile survolée. */
.avis-form .avis-etoiles .gfield_radio:has(input:checked) .gchoice label:before, .avis-form .avis-etoiles .gfield_radio.gfield_radio:hover .gchoice label:before {background: var(--color-yellow); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.7 6.3.9-4.5 4.4 1 6.3-5.6-3-5.6 3 1-6.3-4.5-4.4 6.3-.9z' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.7 6.3.9-4.5 4.4 1 6.3-5.6-3-5.6 3 1-6.3-4.5-4.4 6.3-.9z' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");}
.avis-form .avis-etoiles .gchoice:has(input:checked) ~ .gchoice label:before, .avis-form .avis-etoiles .gfield_radio.gfield_radio .gchoice:hover ~ .gchoice label:before {background: var(--color-border); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.7 6.3.9-4.5 4.4 1 6.3-5.6-3-5.6 3 1-6.3-4.5-4.4 6.3-.9z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.7 6.3.9-4.5 4.4 1 6.3-5.6-3-5.6 3 1-6.3-4.5-4.4 6.3-.9z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");}
.avis-form .avis-etoiles .gchoice:has(input:focus-visible) label {outline: solid 2px var(--color-primary); outline-offset: 2px; border-radius: 4px;}

.avis-form .gform_footer {margin: 22px 0 0 0 !important; padding: 0 !important;}
.avis-form .gform_footer .gform_button {display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; margin: 0 !important; padding: 12px 22px 12px 44px !important; background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 18px center / 16px no-repeat !important; border: none !important; border-radius: 10px !important; box-shadow: 0 6px 16px rgb(80 110 247 / 25%); color: white !important; font-size: 16px !important; font-weight: 600; line-height: 1.3 !important; cursor: pointer; transition: .3s;}
.avis-form .gform_footer .gform_button:hover {background-color: #3f5ce6 !important;}
.avis-form .gform_ajax_spinner {margin-left: 10px;}
.avis-form-mention {margin: 18px 0 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-gray);}
.avis-form-mention a {color: inherit; text-decoration: underline;}

/* Messages Gravity Forms */
.avis-form .gform_wrapper .validation_error, .avis-form .gform_wrapper .gform_validation_errors {margin: 15px 0 0 0 !important; padding: 10px 12px !important; background: var(--color-error-bg) !important; border: none !important; border-radius: 8px; color: var(--color-error-title) !important; font-size: 13px !important; text-align: left !important;}
.avis-form .gform_wrapper li.gfield.gfield_error {background: none !important; border: none !important;}
.avis-form .gform_wrapper li.gfield_error input[type=text], .avis-form .gform_wrapper li.gfield_error input[type=email], .avis-form .gform_wrapper li.gfield_error textarea {border-color: #e5484d !important;}
.avis-form .gform_wrapper .validation_message {margin: 6px 0 0 0 !important; padding: 0 !important; font-size: 12px !important; color: #e5484d !important;}
.avis-form .gform_confirmation_message {margin: 15px 0 0 0; padding: 15px; background: var(--color-blue-bg); border-radius: 10px; color: var(--color-title); font-size: 15px;}

/* Liste des avis */
.avis-liste {background: var(--color-bg);}
.avis-liste h2 {font-size: 29px; padding: 4px 0 25px 0;}
.avis-total {font-size: 20px; font-weight: 400; color: var(--color-text-gray);}
.avis-grille {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;}
.avis-carte {box-sizing: border-box; padding: 24px; background: white; border: solid 1px var(--color-border); border-radius: 12px;}
.avis-carte[hidden] {display: none;}
.avis-carte-haut {display: flex; align-items: flex-start; gap: 12px;}
.avis-initiales {display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: white; font-size: 14px; font-weight: 700; letter-spacing: .5px;}
.avis-auteur {flex: 1; min-width: 0;}
.avis-nom {margin: 0 !important; font-size: 17px; font-weight: 700; line-height: 1.3 !important; color: var(--color-title) !important;}
.avis-poste {margin: 2px 0 0 0 !important; font-size: 14px; line-height: 1.3 !important; color: var(--color-text-gray) !important;}
.avis-verifie {display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; padding: 3px 8px; background: #EAF8F0; border: solid 1px #BFE8D0; border-radius: 50px; color: #1F9254; font-size: 12px; font-weight: 600; line-height: 1.2;}
.avis-verifie:before {content: ""; width: 11px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='%231F9254' stroke-width='2.5'/%3E%3Cpath d='M7.5 12.5l3 3 6-6' fill='none' stroke='%231F9254' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;}
.avis-note {display: flex; align-items: center; gap: 8px; margin: 14px 0 0 0 !important; font-size: 13px; line-height: 1 !important; color: var(--color-text-gray) !important;}
/* Le texte « Note : x sur 5 » reste lisible par les lecteurs d'écran. */
.avis-etoiles-note {--note: 5; display: block; width: 90px; height: 16px; overflow: hidden; font-size: 0; background: linear-gradient(90deg, #F5A623 calc(var(--note) * 20%), var(--color-border) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M12 1.5l3.1 6.4 7 1-5.1 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7L1.9 8.9l7-1z'/%3E%3C/svg%3E") left center / 18px 16px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M12 1.5l3.1 6.4 7 1-5.1 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7L1.9 8.9l7-1z'/%3E%3C/svg%3E") left center / 18px 16px repeat-x;}
.avis-etoiles-note[data-note="1"] {--note: 1;}
.avis-etoiles-note[data-note="2"] {--note: 2;}
.avis-etoiles-note[data-note="3"] {--note: 3;}
.avis-etoiles-note[data-note="4"] {--note: 4;}
.avis-texte {margin: 14px 0 0 0 !important; font-size: 16px; line-height: 1.65 !important; color: var(--color-title) !important;}
.avis-plus {display: block; margin: 25px auto 0 auto; padding: 12px 24px; background: white; border: solid 1px var(--color-border); border-radius: 10px; color: var(--color-title); font-size: 16px; font-weight: 600; cursor: pointer; transition: .3s;}
.avis-plus:hover {border-color: var(--color-primary); color: var(--color-primary);}
.avis-plus[hidden] {display: none;}

/* Bloc Trustpilot */
.avis-trustpilot {display: flex; align-items: center; gap: 25px; margin-top: 45px; padding: 22px 28px; background: white; border: solid 1px var(--color-border); border-radius: 12px;}
.avis-tp-logo {padding-right: 25px; border-right: solid 1px var(--color-border);}
.avis-tp-nom {display: flex; align-items: center; gap: 6px; margin: 0 !important; font-size: 20px; font-weight: 700; line-height: 1.2 !important; color: var(--color-title) !important;}
.avis-tp-nom svg {display: block; width: 22px; height: 22px;}
.avis-tp-sous {margin: 5px 0 0 0 !important; font-size: 13px; line-height: 1.2 !important; color: var(--color-text-gray) !important;}
.avis-tp-note p {margin: 8px 0 0 0 !important; font-size: 15px; line-height: 1.3 !important; color: var(--color-title) !important;}
.avis-tp-etoiles {--note: 5; display: flex; gap: 2px;}
/* Chaque case se remplit selon la note : 4,2 donne 4 cases vertes et 20 % de la cinquième. */
.avis-tp-etoiles span {--case: 1; width: 28px; height: 28px; background: linear-gradient(90deg, #00B67A calc((var(--note) - var(--case) + 1) * 100%), #DCDCE6 0); position: relative;}
.avis-tp-etoiles span:nth-child(2) {--case: 2;}
.avis-tp-etoiles span:nth-child(3) {--case: 3;}
.avis-tp-etoiles span:nth-child(4) {--case: 4;}
.avis-tp-etoiles span:nth-child(5) {--case: 5;}
.avis-tp-etoiles span:after {content: ""; position: absolute; inset: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 1.5l2.6 7.9H23l-6.8 4.9 2.6 7.9L12 17.3l-6.8 4.9 2.6-7.9L1 9.4h8.4z'/%3E%3C/svg%3E") center / contain no-repeat;}
.avis-tp-lien {display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #00A06B !important; font-size: 15px; font-weight: 600; text-decoration: none !important;}
.avis-tp-lien svg {display: block; width: 13px; height: 13px; transition: .3s;}
.avis-tp-lien:hover svg {transform: translateX(3px);}

/* CTA */
.avis-cta {padding: 60px 0; background: var(--color-block); text-align: center;}
.avis-cta h2 {font-size: 32px;}
.avis-cta p {margin: 12px 0 25px 0; font-size: 17px; color: var(--color-text);}
.avis-cta .btn1 {display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; box-shadow: 0 6px 16px rgb(80 110 247 / 30%);}
.avis-cta .btn1 svg {display: block; width: 13px; height: 13px;}


@media (max-width: 1022px) {
    .avis-hero-grid {flex-direction: column; gap: 30px;}
    .avis-hero-texte {padding-top: 0;}
    .avis-intro {max-width: none;}
    .avis-form {flex-basis: auto; width: 100%;}
}

@media (max-width: 767px) {
    .avis-hero {padding: 25px 0 50px 0;}
    .avis-hero h1 {font-size: 34px !important;}
    .avis-form {padding: 22px 18px 18px 18px;}
    .avis-form .gform_wrapper ul.gform_fields li.gfield.avis-demi {flex-basis: 100%;}
    .avis-grille {grid-template-columns: minmax(0, 1fr);}
    .avis-trustpilot {flex-wrap: wrap; gap: 18px; padding: 20px;}
    .avis-tp-logo {padding-right: 18px;}
    .avis-tp-lien {margin-left: 0; width: 100%;}
}