@media (max-width: 768px) {
  .banniere-confiance {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .banniere-confiance .wp-block-cover__image-background {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .banniere-confiance .wp-block-cover__inner-container {
    position: absolute !important;
    inset: 0 !important;
  }
}

@media (max-width: 768px) {

  /* Empêche toute la page de s'élargir */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

 
  .footer-mobile .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px 9px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-mobile .wp-block-navigation-item {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-mobile .wp-block-navigation-item__content {
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    padding: 2px 0 !important;
    white-space: nowrap !important;
  }

  .footer-mobile .wp-block-social-links {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 9px auto 0 !important;
    padding: 0 !important;
  }

  .footer-mobile .wp-social-link {
    font-size: 16px !important;
  }
}
	 
	 
	/* Page Prestations - Mobile */
@media (max-width:768px){

.page-id-20 p,
.page-id-20 li,
.page-id-20 a,
.page-id-20 summary{
    font-size:11px !important;
    line-height:1.35 !important;
}

.page-id-20 h1{
    font-size:24px !important;
}

.page-id-20 h2{
    font-size:20px !important;
}

.page-id-20 h3{
    font-size:17px !important;
}

.page-id-20 .wp-block-button__link{
    font-size:12px !important;
    padding:10px 18px !important;
}

}
	 
	 
	 
	 
	 /* ===== Formulaire de contact - Mobile ===== */
@media (max-width:768px){

/* Titre */
.wp-block-heading,
.wpcf7 h2,
.wpcf7 h3{
    font-size:24px !important;
    line-height:1.2 !important;
    margin-bottom:16px !important;
}

/* Libellés */
.wpcf7 label{
    font-size:13px !important;
    font-weight:600 !important;
}

/* Champs */
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea{
    font-size:12px !important;
    padding:10px 12px !important;
    min-height:44px !important;
    margin-bottom:10px !important;
}

/* Liste déroulante */
.wpcf7 select{
    font-size:12px !important;
}

/* Zone de texte */
.wpcf7 textarea{
    min-height:120px !important;
}

/* Bouton */
.wpcf7 input[type="submit"]{
    font-size:13px !important;
    padding:12px 20px !important;
}

/* Espacement général */
.wpcf7 p{
    margin-bottom:12px !important;
}

}
	 
	 
	 /* Accueil (ID 17) - Mobile uniquement */
@media (max-width:768px){

.page-id-17 p,
.page-id-17 li,
.page-id-17 a,
.page-id-17 label,
.page-id-17 summary{
    font-size:11px !important;
    line-height:1.35 !important;
}

.page-id-17 h1{
    font-size:24px !important;
}

.page-id-17 h2{
    font-size:20px !important;
}

.page-id-17 h3{
    font-size:17px !important;
}

.page-id-17 .wp-block-button__link,
.page-id-17 button{
    font-size:12px !important;
}

}
	 @media (max-width:768px){

body.page-id-17 h1{
    font-size:20px !important;
}

body.page-id-17 h2{
    font-size:18px !important;
}

body.page-id-17 h3{
    font-size:16px !important;
}

body.page-id-17 p,
body.page-id-17 li{
    font-size:12px !important;
    line-height:1.4 !important;
}

body.page-id-17 .wp-block-button__link{
    font-size:13px !important;
}

}
	 @media (max-width: 768px) {

  body.page-id-17 .wp-block-columns h1,
  body.page-id-17 .wp-block-columns h2,
  body.page-id-17 .wp-block-columns h3 {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  body.page-id-17 .wp-block-columns p,
  body.page-id-17 .wp-block-columns li {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body.page-id-17 .wp-block-columns .wp-block-button__link {
    font-size: 11px !important;
    padding: 8px 12px !important;
  }
}
	 
	 /* Page ID 21 - Mobile uniquement */
@media (max-width:768px){

body.page-id-21 h1{
    font-size:24px !important;
    line-height:1.2 !important;
}

body.page-id-21 h2{
    font-size:20px !important;
    line-height:1.2 !important;
}

body.page-id-21 h3{
    font-size:17px !important;
    line-height:1.2 !important;
}

body.page-id-21 p,
body.page-id-21 li,
body.page-id-21 a,
body.page-id-21 label,
body.page-id-21 summary{
    font-size:12px !important;
    line-height:1.4 !important;
}

body.page-id-21 .wp-block-button__link,
body.page-id-21 button{
    font-size:13px !important;
}

}
	 
	 
/* ==================================================
   PAGE ID 20 — BLOC FICHIER MODERNE
================================================== */

body.page-id-20 .wp-block-file {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 25px !important;

    width: min(100%, 850px) !important;
    margin: 25px auto !important;
    padding: 22px 25px !important;

    box-sizing: border-box !important;

    background: rgba(255, 248, 240, 0.88) !important;
    border: 1px solid rgba(152, 105, 72, 0.28) !important;
    border-radius: 18px !important;

    box-shadow:
        0 10px 30px rgba(70, 40, 20, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Nom du fichier : Tarif 2026 */
body.page-id-20
.wp-block-file > a:not(.wp-block-file__button) {
    flex: 1 1 auto !important;

    margin: 0 !important;

    color: #4b2e20 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;

    text-decoration: none !important;
    text-align: left !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
}

body.page-id-20
.wp-block-file > a:not(.wp-block-file__button):hover {
    color: #9a6947 !important;
}

/* Bouton Télécharger */
body.page-id-20 .wp-block-file__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 210px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 15px 25px !important;

    box-sizing: border-box !important;

    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        #c69a76 0%,
        #aa7652 100%
    ) !important;

    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;

    box-shadow:
        0 8px 20px rgba(104, 64, 38, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-align: center !important;

    white-space: nowrap !important;
    overflow: visible !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

/* Icône de téléchargement */
body.page-id-20 .wp-block-file__button::before {
    content: "↓";
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;

    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

/* Effet au survol */
body.page-id-20 .wp-block-file__button:hover {
    color: #ffffff !important;
    filter: brightness(1.08);
    transform: translateY(-2px);

    box-shadow:
        0 12px 26px rgba(104, 64, 38, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ==================================================
   TABLETTE
================================================== */

@media screen and (max-width: 900px) {
    body.page-id-20 .wp-block-file {
        width: calc(100% - 30px) !important;
        gap: 18px !important;
        padding: 18px !important;
    }

    body.page-id-20
    .wp-block-file > a:not(.wp-block-file__button) {
        font-size: 19px !important;
    }

    body.page-id-20 .wp-block-file__button {
        min-width: 175px !important;
        min-height: 52px !important;
        padding: 13px 18px !important;
        font-size: 15px !important;
    }
}

/* ==================================================
   MOBILE
================================================== */

@media screen and (max-width: 600px) {
    body.page-id-20 .wp-block-file {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: calc(100% - 24px) !important;
        gap: 15px !important;

        margin: 18px auto !important;
        padding: 16px !important;

        border-radius: 14px !important;
    }

    /* Nom du fichier centré */
    body.page-id-20
    .wp-block-file > a:not(.wp-block-file__button) {
        width: 100% !important;

        color: #4b2e20 !important;
        font-size: 17px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    /* Bouton pleine largeur */
    body.page-id-20 .wp-block-file__button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;

        padding: 12px 15px !important;

        color: #ffffff !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    body.page-id-20 .wp-block-file__button::before {
        width: 22px;
        height: 22px;
        font-size: 14px;
    }
}


/* ==================================================
   MOBILE — IMAGE PLUS GRANDE
================================================== */

@media screen and (max-width: 768px) {

    figure.image-anaelle,
    .wp-block-image.image-anaelle {
        width: 95% !important;
        max-width: 520px !important;

        height: auto !important;

        margin: 15px auto !important;
        padding: 0 !important;
    }

    figure.image-anaelle img,
    .wp-block-image.image-anaelle img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;

        margin: 0 auto !important;
    }
}

/* ==================================================
   SECTION BEAUTÉ — MOBILE UNIQUEMENT
   Image plus grande sans être coupée
================================================== */

@media (max-width: 768px) {

    .section-beaute-mobile .wp-block-image {
        width: 100% !important;
        max-width: 180px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        flex-shrink: 1 !important;

        overflow: visible !important;
    }

    .section-beaute-mobile .wp-block-image img {
        display: block !important;

        width: 100% !important;
        max-width: 180px !important;
        height: auto !important;

        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;

        margin: 0 auto !important;
        padding: 0 !important;

        border-radius: 50% !important;
    }

}
@media (max-width: 768px) {

    /* TITRE */
    .atelier-beaute-mobile h1,
    .atelier-beaute-mobile h2,
    .atelier-beaute-mobile h3,
    .atelier-beaute-mobile h4 {
        font-size: 20px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    /* TEXTE EN PETIT BLOC CENTRAL */
    .atelier-beaute-mobile p,
    .atelier-beaute-mobile .wp-block-paragraph {
        width: 34% !important;
        max-width: 34% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 11px !important;
        line-height: 1.2 !important;

        text-align: center !important;
    }

    /* IMAGES PLUS PETITES */
    .atelier-beaute-mobile img {
        width: 95px !important;
        height: 95px !important;
        max-width: 95px !important;

        object-fit: cover !important;
        border-radius: 50% !important;
    }

}

/* ==========================================
   BOUTON CONTACT ANAELLE
========================================== */

.bouton-contact-anaelle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 15px 30px;

    background: linear-gradient(135deg, #b6784f, #8f5735);
    color: #ffffff !important;

    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.3px;

    text-align: center !important;
    text-decoration: none !important;

    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 18px;

    box-shadow:
        0 8px 20px rgba(92, 51, 27, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.18);

    transition: all 0.25s ease;
}

.bouton-contact-anaelle:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #c18459, #995e39);

    box-shadow:
        0 12px 26px rgba(92, 51, 27, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.20);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .bouton-contact-anaelle {
        display: flex !important;

        width: fit-content !important;
        max-width: 90% !important;

        margin: 16px auto !important;

        padding: 13px 24px !important;

        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;

        border-radius: 16px !important;
    }

}
/* CONTENEUR DU BOUTON */
.contact-anaelle-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* BOUTON */
.bouton-contact-anaelle {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;

    padding: 14px 28px !important;

    background: linear-gradient(135deg, #bc8058, #8f5838) !important;
    color: white !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;

    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.35) !important;

    box-shadow: 0 7px 18px rgba(80,45,25,0.25) !important;
}

/* MOBILE */
@media (max-width: 768px) {

    .contact-anaelle-wrapper {
        width: 100% !important;
        justify-content: center !important;
        margin: 15px auto !important;
    }

    .bouton-contact-anaelle {
        width: auto !important;
        margin: 0 auto !important;

        padding: 12px 22px !important;

        font-size: 13px !important;
        line-height: 1.2 !important;
    }
}



/* ==========================================
   BOUTON PREMIUM ANAELLE BEAUTY
========================================== */

.anaelle-site-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 24px auto;
}

.anaelle-site-button {
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 220px;
    padding: 16px 34px;

    background:
        linear-gradient(
            135deg,
            #5c3424 0%,
            #8a5334 45%,
            #6a3d29 100%
        );

    color: #f8e6bd !important;

    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.8px;

    text-align: center;
    text-decoration: none !important;

    border: 1px solid #caa45f;
    border-radius: 16px;

    box-shadow:
        0 10px 25px rgba(65, 32, 18, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* Petit éclat doré */
.anaelle-site-button::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 224, 160, 0.28),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.55s ease;
}


/* Texte au-dessus de l'effet */
.anaelle-site-button span {
    position: relative;
    z-index: 2;
}


/* SURVOL PC */
.anaelle-site-button:hover {
    transform: translateY(-3px) scale(1.02);

    border-color: #e1c27c;

    box-shadow:
        0 14px 30px rgba(65, 32, 18, 0.34),
        0 0 18px rgba(202, 164, 95, 0.18);

    color: #fff4d5 !important;
}

.anaelle-site-button:hover::before {
    left: 150%;
}


/* MOBILE */
@media (max-width: 768px) {

    .anaelle-site-wrapper {
        margin: 18px auto;
        padding: 0 15px;
    }

    .anaelle-site-button {
        min-width: 190px;

        padding: 13px 25px;

        font-size: 14px;
        letter-spacing: 0.5px;

        border-radius: 14px;
    }

}
/* ==========================================
   DESCRIPTION DU SITE
   ÉLÉGANTE / ITALIQUE / VISIBLE
========================================== */

.wp-block-site-tagline {
    margin: 0 !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-style: italic !important;
    font-weight: 600 !important;

    font-size: 34px !important;
    line-height: 1.05 !important;

    letter-spacing: 0.4px !important;

    color: #7a4a2c !important;

    text-align: center !important;

    white-space: nowrap !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,0.55),
        0 3px 10px rgba(90,55,30,0.12);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .wp-block-site-tagline {
        font-size: 22px !important;
        line-height: 1 !important;

        letter-spacing: 0.15px !important;

        white-space: nowrap !important;

        overflow: visible !important;
    }
}
@media (max-width: 768px) {

    .wp-block-site-tagline {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding: 0 6px !important;

        font-family: Georgia, "Times New Roman", serif !important;
        font-style: italic !important;
        font-weight: 600 !important;

        font-size: 13px !important;
        line-height: 1 !important;

        letter-spacing: 0 !important;

        color: #7a4a2c !important;

        text-align: center !important;

        white-space: nowrap !important;
        overflow: visible !important;
    }
}
/* ==========================================
   MENU MOBILE — PREMIUM MARRON / DORÉ
   VOLET COMPLET + TOUS LES ONGLETS
========================================== */

@media (max-width: 768px) {

    /* ======================================
       VOLET OUVERT
    ====================================== */

    .wp-block-navigation__responsive-container.is-menu-open {
        background:
            radial-gradient(
                circle at top,
                rgba(255, 246, 222, 0.95) 0%,
                rgba(231, 201, 150, 0.94) 38%,
                rgba(187, 137, 92, 0.96) 100%
            ) !important;

        padding: 22px !important;

        border-left: 1px solid rgba(255,255,255,0.45) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.55),
            0 0 35px rgba(83, 48, 27, 0.16) !important;

        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }


    /* ======================================
       CONTENEUR DES ONGLETS
    ====================================== */

    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {

        gap: 7px !important;

        width: 100% !important;
    }


    /* ======================================
       CHAQUE ONGLET
    ====================================== */

    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        padding: 9px 12px !important;

        box-sizing: border-box !important;

        color: #563723 !important;

        /* POLICE PLUS PETITE */
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;

        letter-spacing: 0.25px !important;

        text-align: center !important;
        text-decoration: none !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.40),
                rgba(247,229,196,0.30)
            ) !important;

        border:
            1px solid rgba(255,255,255,0.48) !important;

        border-radius: 11px !important;

        box-shadow:
            0 3px 9px rgba(86, 50, 26, 0.08),
            inset 0 1px 0 rgba(255,255,255,0.38) !important;

        transition:
            transform 0.20s ease,
            background 0.20s ease,
            box-shadow 0.20s ease !important;
    }


    /* ======================================
       ONGLET ACTIF
    ====================================== */

    .wp-block-navigation__responsive-container.is-menu-open
    .current-menu-item > .wp-block-navigation-item__content,

    .wp-block-navigation__responsive-container.is-menu-open
    .current_page_item > .wp-block-navigation-item__content {

        background:
            linear-gradient(
                135deg,
                rgba(255, 245, 211, 0.95),
                rgba(216, 171, 99, 0.92)
            ) !important;

        color: #472b1b !important;

        border-color:
            rgba(255, 244, 214, 0.85) !important;

        box-shadow:
            0 4px 12px rgba(95, 55, 28, 0.13),
            inset 0 1px 0 rgba(255,255,255,0.65) !important;
    }


    /* ======================================
       CROIX DE FERMETURE
    ====================================== */

    .wp-block-navigation__responsive-container-close {

        color: #563723 !important;

        background:
            linear-gradient(
                135deg,
                rgba(248, 225, 181, 0.95),
                rgba(199, 145, 86, 0.95)
            ) !important;

        padding: 5px !important;

        border-radius: 9px !important;

        border:
            1px solid rgba(255,255,255,0.52) !important;

        box-shadow:
            0 3px 9px rgba(85, 50, 28, 0.12) !important;
    }


    /* CROIX PLUS PETITE */
    .wp-block-navigation__responsive-container-close svg {

        width: 19px !important;
        height: 19px !important;
    }


    /* ======================================
       BOUTON BURGER
    ====================================== */

    .wp-block-navigation__responsive-container-open {

        color: #563723 !important;

        background:
            linear-gradient(
                135deg,
                #f0d7a6,
                #c58b55
            ) !important;

        padding: 5px !important;

        border-radius: 9px !important;

        border:
            1px solid rgba(255,255,255,0.58) !important;

        box-shadow:
            0 3px 10px rgba(85, 50, 28, 0.12),
            inset 0 1px 0 rgba(255,255,255,0.35) !important;
    }


    /* BURGER PLUS FIN */
    .wp-block-navigation__responsive-container-open svg {

        width: 20px !important;
        height: 20px !important;
    }
}
/* ==========================================
   MENU PC — PREMIUM MARRON / DORÉ
========================================== */

@media (min-width: 769px) {

    /* BARRE DU MENU */
    .wp-block-navigation {
        background:
            linear-gradient(
                135deg,
                rgba(244, 226, 189, 0.96) 0%,
                rgba(218, 181, 122, 0.96) 50%,
                rgba(180, 126, 82, 0.96) 100%
            ) !important;

        padding: 7px 10px !important;

        border:
            1px solid rgba(255,255,255,0.55) !important;

        border-radius: 18px !important;

        box-shadow:
            0 7px 20px rgba(86, 50, 27, 0.12),
            inset 0 1px 0 rgba(255,255,255,0.45) !important;

        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }


    /* ESPACE ENTRE LES ONGLETS */
    .wp-block-navigation__container {
        gap: 5px !important;
    }


    /* CHAQUE ONGLET */
    .wp-block-navigation-item__content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 8px 13px !important;

        color: #563723 !important;

        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;

        letter-spacing: 0.25px !important;

        text-decoration: none !important;

        border-radius: 11px !important;

        transition:
            transform 0.2s ease,
            background 0.2s ease,
            color 0.2s ease,
            box-shadow 0.2s ease !important;
    }


    /* SURVOL */
    .wp-block-navigation-item__content:hover {
        color: #4b2d1c !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.48),
                rgba(241,214,167,0.45)
            ) !important;

        transform: translateY(-1px) !important;

        box-shadow:
            0 4px 10px rgba(86, 50, 26, 0.10),
            inset 0 1px 0 rgba(255,255,255,0.48) !important;
    }


    /* PAGE ACTIVE */
    .current-menu-item > .wp-block-navigation-item__content,
    .current_page_item > .wp-block-navigation-item__content {
        background:
            linear-gradient(
                135deg,
                #fff2c8,
                #d7aa62
            ) !important;

        color: #472b1b !important;

        box-shadow:
            0 4px 11px rgba(95, 55, 28, 0.14),
            inset 0 1px 0 rgba(255,255,255,0.65) !important;
    }


    /* SOUS-MENU PC */
    .wp-block-navigation__submenu-container {
        background:
            linear-gradient(
                160deg,
                #f3dfb7,
                #d4a96d
            ) !important;

        padding: 7px !important;

        border:
            1px solid rgba(255,255,255,0.55) !important;

        border-radius: 13px !important;

        box-shadow:
            0 10px 25px rgba(83, 48, 27, 0.16) !important;
    }


    /* LIENS DU SOUS-MENU */
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
        min-width: 170px !important;

        padding: 9px 12px !important;

        font-size: 12px !important;

        border-radius: 9px !important;
    }
}
/* ==========================================
   SECTION BEAUTÉ — PC
   RÉDUCTION IMAGE DE 15 %
========================================== */

@media (min-width: 769px) {

    .section-beaute-mobile img {
        width: 85% !important;
        height: auto !important;
    }

}

/* ==========================================
   BOUTON WHATSAPP — PRENDRE RDV
   DESIGN + PULSATION + SCINTILLEMENT PERMANENT
========================================== */

.whatsapp-rdv-wrapper {
    width: 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    margin: 20px auto !important;
}


/* BOUTON */
.whatsapp-rdv {
    position: relative !important;
    overflow: hidden !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    padding: 13px 24px !important;

    background:
        linear-gradient(
            135deg,
            #2bd66f 0%,
            #18b956 55%,
            #109443 100%
        ) !important;

    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    line-height: 1.1 !important;

    letter-spacing: 0.3px !important;

    text-align: center !important;
    text-decoration: none !important;

    border:
        1px solid rgba(255,255,255,0.65) !important;

    border-radius: 16px !important;

    box-shadow:
        0 8px 22px rgba(20,145,70,0.28),
        inset 0 1px 0 rgba(255,255,255,0.30) !important;

    animation:
        whatsappPulse 1.6s ease-in-out infinite !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* ==========================================
   LOGO WHATSAPP
========================================== */

.whatsapp-rdv-icon {
    width: 22px !important;
    height: 22px !important;

    flex-shrink: 0 !important;

    position: relative !important;
    z-index: 2 !important;
}


/* TEXTE AU-DESSUS DU REFLET */
.whatsapp-rdv span {
    position: relative !important;
    z-index: 2 !important;
}


/* ==========================================
   SCINTILLEMENT PERMANENT
========================================== */

.whatsapp-rdv::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: -60%;

    width: 45% !important;
    height: 100% !important;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,0.12) 25%,
            rgba(255,255,255,0.65) 50%,
            rgba(255,255,255,0.12) 75%,
            transparent 100%
        ) !important;

    transform: skewX(-20deg) !important;

    pointer-events: none !important;

    z-index: 1 !important;

    animation:
        whatsappShineContinuous 1.2s linear infinite !important;
}


/* REFLET QUI TRAVERSE LE BOUTON EN CONTINU */
@keyframes whatsappShineContinuous {

    0% {
        left: -60%;
    }

    100% {
        left: 130%;
    }
}


/* ==========================================
   PULSATION VERTE
========================================== */

@keyframes whatsappPulse {

    0%,
    100% {
        box-shadow:
            0 8px 20px rgba(20,145,70,0.22),
            0 0 0 0 rgba(37,211,102,0.42),
            inset 0 1px 0 rgba(255,255,255,0.30);
    }

    50% {
        box-shadow:
            0 10px 26px rgba(20,145,70,0.34),
            0 0 0 9px rgba(37,211,102,0),
            inset 0 1px 0 rgba(255,255,255,0.30);
    }
}


/* ==========================================
   SURVOL PC
========================================== */

.whatsapp-rdv:hover {
    transform:
        translateY(-2px)
        scale(1.03) !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #32df78 0%,
            #1fc560 55%,
            #109943 100%
        ) !important;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .whatsapp-rdv-wrapper {
        margin: 15px auto !important;
    }

    .whatsapp-rdv {
        padding:
            10px 18px !important;

        gap: 7px !important;

        font-size: 13px !important;

        border-radius: 13px !important;
    }

    .whatsapp-rdv-icon {
        width: 19px !important;
        height: 19px !important;
    }

}
/* ==================================================
   BOUTON RÉSERVATION
   MARRON / DORÉ — FORME CAPSULE
================================================== */

/* CONTENEUR */
.reservation-btn-wrap {
    width: 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    margin: 20px auto !important;
}


/* ==================================================
   BOUTON
================================================== */

.reservation-btn {
    position: relative !important;
    overflow: hidden !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 165px !important;

    padding: 12px 28px !important;

    /* MARRON / DORÉ */
    background: linear-gradient(
        135deg,
        #5b3521 0%,
        #81502e 45%,
        #bd8948 75%,
        #704229 100%
    ) !important;

    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    letter-spacing: 0.6px !important;

    text-align: center !important;
    text-decoration: none !important;

    /* FORME CAPSULE */
    border-radius: 999px !important;

    border: 1px solid #dfb86c !important;

    box-shadow:
        0 6px 18px rgba(78, 43, 22, 0.28),
        0 0 10px rgba(218, 174, 88, 0.20),
        inset 0 1px 0 rgba(255,255,255,0.30) !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* ==================================================
   SCINTILLEMENT
================================================== */

.reservation-btn::before {
    content: "" !important;

    position: absolute !important;

    top: -30% !important;
    left: -70% !important;

    width: 45% !important;
    height: 160% !important;

    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,0.10) 25%,
        rgba(255,240,185,0.90) 50%,
        rgba(255,255,255,0.10) 75%,
        transparent 100%
    ) !important;

    transform: skewX(-20deg) !important;

    pointer-events: none !important;

    animation: reservation-scintille 1.2s linear infinite !important;
}


/* ANIMATION */
@keyframes reservation-scintille {

    0% {
        left: -70%;
    }

    100% {
        left: 140%;
    }
}


/* ==================================================
   SURVOL PC
================================================== */

.reservation-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;

    color: #ffffff !important;

    box-shadow:
        0 9px 22px rgba(78,43,22,0.32),
        0 0 16px rgba(218,174,88,0.32) !important;
}


/* ==================================================
   VERSION MOBILE
================================================== */

@media (max-width: 768px) {

    .reservation-btn-wrap {
        margin: 15px auto !important;
    }

    .reservation-btn {
        min-width: 140px !important;

        padding: 9px 19px !important;

        font-size: 12px !important;

        /* GARDE LA FORME CAPSULE */
        border-radius: 999px !important;
    }
}




/* ==========================================
   IMAGE — SCINTILLEMENT PERMANENT
========================================== */

.image-scintillante {
    position: relative !important;
    overflow: hidden !important;
}

/* L'image elle-même */
.image-scintillante img {
    position: relative !important;
    z-index: 1 !important;

    animation: imageGlow 1.8s ease-in-out infinite !important;
}


/* REFLET LUMINEUX QUI TRAVERSE */
.image-scintillante::after {
    content: "" !important;

    position: absolute !important;

    top: -25% !important;
    left: -70% !important;

    width: 45% !important;
    height: 150% !important;

    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,0.05) 25%,
        rgba(255,255,255,0.75) 50%,
        rgba(255,255,255,0.05) 75%,
        transparent 100%
    ) !important;

    transform: skewX(-20deg) !important;

    z-index: 2 !important;

    pointer-events: none !important;

    animation: imageShine 1.5s linear infinite !important;
}


/* REFLET QUI TRAVERSE EN PERMANENCE */
@keyframes imageShine {

    0% {
        left: -70%;
    }

    100% {
        left: 140%;
    }
}


/* PETITE PULSATION LUMINEUSE */
@keyframes imageGlow {

    0%,
    100% {
        filter:
            brightness(1)
            drop-shadow(0 0 0 rgba(255,255,255,0));
    }

    50% {
        filter:
            brightness(1.12)
            drop-shadow(0 0 7px rgba(255,255,255,0.35));
    }
}


/* ==========================================
   APPARITION DU TEXTE AU CHARGEMENT
========================================== */

.texte-apparition {
    opacity: 0;
    transform: translateY(25px);
    filter: blur(6px);

    animation: apparitionTexte 1.8s ease forwards;
    animation-delay: 0.4s;
}

@keyframes apparitionTexte {

    0% {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
/* ==========================================
   COLONNES IMAGES — APPARITION ÉLÉGANTE
========================================== */

.colonnes-images-animees .wp-block-column {
    opacity: 0;
    transform: translateY(25px) scale(0.96);

    animation: apparitionColonneImage 1.2s ease forwards;
}


/* COLONNE 1 */
.colonnes-images-animees .wp-block-column:nth-child(1) {
    animation-delay: 0.2s;
}


/* COLONNE 2 */
.colonnes-images-animees .wp-block-column:nth-child(2) {
    animation-delay: 0.5s;
}


/* COLONNE 3 */
.colonnes-images-animees .wp-block-column:nth-child(3) {
    animation-delay: 0.8s;
}


/* COLONNE 4 */
.colonnes-images-animees .wp-block-column:nth-child(4) {
    animation-delay: 1.1s;
}


/* ANIMATION */
@keyframes apparitionColonneImage {

    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.96);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


/* PETIT EFFET AU SURVOL SUR PC */
@media (min-width: 769px) {

    .colonnes-images-animees img {
        transition:
            transform 0.35s ease,
            box-shadow 0.35s ease !important;
    }

    .colonnes-images-animees img:hover {
        transform: scale(1.035);

        box-shadow:
            0 10px 25px rgba(100, 60, 35, 0.18);
    }
}
/* ==========================================
   IMAGE — SCINTILLEMENT DOUX PERMANENT
========================================== */

.image-scintillante {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.image-scintillante img {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;

    animation:
        scintillementImageGlow 1.8s ease-in-out infinite !important;
}


/* REFLET PLUS DISCRET */
.image-scintillante::after {
    content: "" !important;

    position: absolute !important;

    top: -30% !important;
    left: -70% !important;

    width: 42% !important;
    height: 160% !important;

    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,0.03) 25%,
        rgba(255,245,220,0.28) 42%,
        rgba(255,255,255,0.62) 50%,
        rgba(255,235,195,0.25) 58%,
        rgba(255,255,255,0.03) 75%,
        transparent 100%
    ) !important;

    transform: skewX(-20deg) !important;

    z-index: 3 !important;

    pointer-events: none !important;

    animation:
        scintillementImagePassage 1.4s linear infinite !important;
}


/* PASSAGE DU REFLET */
@keyframes scintillementImagePassage {

    0% {
        left: -70%;
    }

    100% {
        left: 140%;
    }
}


/* LÉGÈRE PULSATION */
@keyframes scintillementImageGlow {

    0%,
    100% {
        filter:
            brightness(1)
            drop-shadow(0 0 0 rgba(255,220,160,0));
    }

    50% {
        filter:
            brightness(1.10)
            drop-shadow(0 0 5px rgba(255,220,160,0.28));
    }
}

/* CONTENEUR QUI DÉFILE */
.avis-ligne-mobile .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    width: 100% !important;
    gap: 20px !important;
    scroll-behavior: smooth;
}


/* PC : 3 AVIS VISIBLES */
@media (min-width: 769px) {

    .avis-ligne-mobile .wp-block-column {
        flex: 0 0 calc((100% - 40px) / 3) !important;
        min-width: calc((100% - 40px) / 3) !important;
        max-width: calc((100% - 40px) / 3) !important;
        box-sizing: border-box !important;
    }

}


/* MOBILE : 1 AVIS VISIBLE */
@media (max-width: 768px) {

    /* ARRIÈRE-PLAN ROSE TRÈS CLAIR / DORÉ */
    .avis-ligne-mobile {
        background: linear-gradient(
            135deg,
            rgba(255, 249, 246, 0.98) 0%,
            rgba(250, 235, 224, 0.88) 48%,
            rgba(245, 226, 200, 0.72) 72%,
            rgba(255, 248, 242, 0.98) 100%
        ) !important;
    }


    .avis-ligne-mobile .wp-block-column {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* UNIQUEMENT LE TEXTE DE L'AVIS */
    .avis-ligne-mobile .wp-block-column p,
    .avis-ligne-mobile .wp-block-column .wp-block-paragraph {

        font-size: 10px !important;
        line-height: 1.3 !important;

        display: block !important;

        width: calc(100vw - 30px) !important;
        max-width: calc(100vw - 30px) !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }

}


/* ==================================================
   POPUP OFFRE EXCLUSIVE — PAGE 20
================================================== */

body.page-id-20 .anaelle-popup-overlay {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(45, 31, 25, 0.45);
    backdrop-filter: blur(5px);

    z-index: 999999;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}


/* POPUP VISIBLE */
body.page-id-20 .anaelle-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* ==================================================
   FENÊTRE
================================================== */

body.page-id-20 .anaelle-popup {
    position: relative;

    width: 100%;
    max-width: 520px;

    padding: 48px 42px 40px;

    text-align: center;

    background:
        radial-gradient(
            circle at top,
            rgba(255, 252, 245, 0.98) 0%,
            rgba(246, 231, 211, 0.97) 48%,
            rgba(226, 199, 164, 0.96) 100%
        );

    border: 1px solid rgba(175, 133, 76, 0.45);
    border-radius: 24px;

    box-shadow:
        0 25px 70px rgba(63, 39, 25, 0.30),
        inset 0 0 30px rgba(255, 255, 255, 0.45);

    transform: translateY(25px) scale(0.96);

    transition: transform 0.45s ease;

    overflow: hidden;
}


/* ANIMATION D'ENTRÉE */
body.page-id-20 .anaelle-popup-overlay.active .anaelle-popup {
    transform: translateY(0) scale(1);
}


/* ==================================================
   PETITE DÉCORATION DORÉE
================================================== */

body.page-id-20 .anaelle-popup::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 150px;
    height: 4px;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        transparent,
        #c6a267,
        #e1c48d,
        #c6a267,
        transparent
    );

    border-radius: 20px;
}


/* ==================================================
   TITRE
================================================== */

body.page-id-20 .anaelle-popup-title {
    margin: 0 0 18px;

    font-size: 28px;
    line-height: 1.15;

    font-weight: 600;
    letter-spacing: 1.4px;

    color: #79563c;
}


/* ==================================================
   RÉDUCTION 10 %
================================================== */

body.page-id-20 .anaelle-popup-reduction {
    display: inline-block;

    margin-bottom: 22px;

    font-size: 42px;
    line-height: 1;

    font-weight: 700;

    color: #a47a40;

    text-shadow:
        0 1px 0 rgba(255,255,255,0.8);
}


/* ==================================================
   TEXTE
================================================== */

body.page-id-20 .anaelle-popup-text {
    max-width: 410px;

    margin: 0 auto 25px;

    font-size: 17px;
    line-height: 1.55;

    color: #5f493b;
}


body.page-id-20 .anaelle-popup-text strong {
    color: #8c643f;
    font-weight: 600;
}


/* ==================================================
   BOUTON
================================================== */

body.page-id-20 .anaelle-popup-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;

    padding: 13px 28px;

    border: 1px solid rgba(149, 108, 56, 0.45);
    border-radius: 50px;

    background: linear-gradient(
        135deg,
        #b88a50 0%,
        #d1ad73 50%,
        #ad7c45 100%
    );

    color: #ffffff !important;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none !important;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(121, 86, 55, 0.22);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


body.page-id-20 .anaelle-popup-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(121, 86, 55, 0.30);
}


/* ==================================================
   CROIX FERMETURE
================================================== */

body.page-id-20 .anaelle-popup-close {
    position: absolute;

    top: 14px;
    right: 16px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,0.48);

    color: #76543d;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


body.page-id-20 .anaelle-popup-close:hover {
    background: rgba(255,255,255,0.75);
    transform: rotate(90deg);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

    body.page-id-20 .anaelle-popup-overlay {
        padding: 16px;
    }

    body.page-id-20 .anaelle-popup {
        max-width: 92%;

        padding: 42px 22px 30px;

        border-radius: 20px;
    }

    body.page-id-20 .anaelle-popup-title {
        font-size: 21px;
        letter-spacing: 1px;
    }

    body.page-id-20 .anaelle-popup-reduction {
        font-size: 36px;
        margin-bottom: 18px;
    }

    body.page-id-20 .anaelle-popup-text {
        font-size: 14px;
        line-height: 1.5;

        margin-bottom: 22px;
    }

    body.page-id-20 .anaelle-popup-button {
        min-width: 170px;

        padding: 12px 24px;

        font-size: 14px;
    }

}

/* ==================================================
   DIAPORAMA ÉLÉGANT
   Fondu + zoom léger + transition douce
================================================== */

.diapo-elegante {
    position: relative;
    overflow: hidden !important;
}


/* IMAGES */
.diapo-elegante img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        opacity 1s ease,
        transform 5s ease,
        filter 1s ease !important;

    transform: scale(1.02);
}


/* ==================================================
   SLIDE ACTIVE
   Compatible avec plusieurs sliders WordPress
================================================== */

.diapo-elegante .swiper-slide-active img,
.diapo-elegante .slick-active img,
.diapo-elegante .splide__slide.is-active img,
.diapo-elegante .is-active img,
.diapo-elegante .active img {

    opacity: 1 !important;

    transform: scale(1.08);

    filter: blur(0);
}


/* ==================================================
   SLIDES NON ACTIVES
================================================== */

.diapo-elegante .swiper-slide:not(.swiper-slide-active) img,
.diapo-elegante .slick-slide:not(.slick-active) img,
.diapo-elegante .splide__slide:not(.is-active) img {

    opacity: 0.25;

    transform: scale(1.02);

    filter: blur(2px);
}


/* ==================================================
   PETIT EFFET LUMINEUX TRÈS DISCRET
================================================== */

.diapo-elegante::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 245, 225, 0.12) 50%,
        transparent 65%
    );

    opacity: 0;

    animation: reflet-diapo 6s ease-in-out infinite;
}


@keyframes reflet-diapo {

    0%,
    75% {
        opacity: 0;
        transform: translateX(-25%);
    }

    85% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateX(25%);
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

    .diapo-elegante img {
        transition:
            opacity 0.8s ease,
            transform 4s ease,
            filter 0.8s ease !important;
    }

    .diapo-elegante .swiper-slide-active img,
    .diapo-elegante .slick-active img,
    .diapo-elegante .splide__slide.is-active img,
    .diapo-elegante .is-active img,
    .diapo-elegante .active img {

        transform: scale(1.05);
    }

}



/* ==================================================
   CARTE CADEAU ANAËLLE BEAUTY
================================================== */

.anaelle-carte-cadeau {
    width: 100%;
    max-width: 780px;

    margin: 40px auto;
    padding: 48px;

    box-sizing: border-box;

    color: #604a3d;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255,255,255,0.95) 0%,
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #fffaf6 0%,
            #f8ebe2 43%,
            #ead4b8 100%
        );

    border: 1px solid rgba(177,133,81,0.25);
    border-radius: 28px;

    box-shadow:
        0 22px 60px rgba(85,57,39,0.12);
}


/* ==================================================
   EN-TÊTE
================================================== */

.cadeau-entete {
    margin-bottom: 32px;
    text-align: center;
}


.cadeau-mini-titre {
    margin-bottom: 8px;

    color: #a47b50;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;
}


.cadeau-entete h2 {
    margin: 0 0 10px;

    color: #72523e;

    font-size: 34px;
    line-height: 1.2;
}


.cadeau-entete p {
    max-width: 530px;

    margin: 0 auto;

    color: #8d7667;

    font-size: 14px;
    line-height: 1.55;
}


/* ==================================================
   PROGRESSION
================================================== */

.cadeau-progression {
    margin-bottom: 38px;
}


.cadeau-barre {
    width: 100%;
    height: 5px;

    overflow: hidden;

    background: rgba(171,126,76,0.15);

    border-radius: 20px;
}


.cadeau-barre-active {
    width: 20%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #a9794c,
            #d4af77
        );

    border-radius: 20px;

    transition: width 0.4s ease;
}


.cadeau-numero-etape {
    margin-top: 8px;

    color: #9c8879;

    font-size: 11px;

    text-align: right;
}


/* ==================================================
   ÉTAPES
================================================== */

.cadeau-etape {
    display: none !important;
}


.cadeau-etape.active {
    display: block !important;

    animation:
        apparition-cadeau 0.35s ease;
}


@keyframes apparition-cadeau {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.cadeau-etape h3 {
    margin: 0 0 7px;

    color: #70513e;

    font-size: 25px;

    text-align: center;
}


.cadeau-sous-titre {
    margin: 0 0 28px;

    color: #927d6e;

    font-size: 14px;

    text-align: center;
}


/* ==================================================
   MONTANTS
================================================== */

.cadeau-montants {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}


.cadeau-montant {
    min-height: 60px;

    padding: 12px;

    border:
        1px solid rgba(166,122,73,0.3);

    border-radius: 15px;

    background:
        rgba(255,255,255,0.60);

    color: #765744;

    font-size: 17px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.25s ease;
}


.cadeau-montant:hover {
    transform: translateY(-2px);

    background:
        rgba(255,255,255,0.92);

    border-color: #b98c59;
}


.cadeau-montant.selected {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a97a4d,
            #d2ad76
        );

    border-color: transparent;

    box-shadow:
        0 8px 20px rgba(119,78,43,0.18);
}


/* ==================================================
   AUTRE MONTANT
================================================== */

.cadeau-autre-montant {
    display: none;

    max-width: 280px;

    margin: 25px auto 0;

    text-align: center;
}


.cadeau-autre-montant.visible {
    display: block;
}


.cadeau-autre-montant label {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;
    font-weight: 600;
}


.cadeau-champ-euro {
    position: relative;
}


.cadeau-champ-euro input {
    width: 100%;

    padding:
        14px 40px 14px 15px;

    box-sizing: border-box;

    text-align: center;
}


.cadeau-champ-euro span {
    position: absolute;

    top: 50%;
    right: 15px;

    transform: translateY(-50%);

    color: #8c745f;
}


.cadeau-autre-montant small {
    display: block;

    margin-top: 6px;

    color: #9a887a;

    font-size: 11px;
}


/* ==================================================
   CHAMPS
================================================== */

.cadeau-champs {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
}


.cadeau-champ label {
    display: block;

    margin-bottom: 7px;

    color: #715747;

    font-size: 13px;
    font-weight: 600;
}


.cadeau-champ input,
.cadeau-champ textarea,
.cadeau-champ-euro input {

    width: 100%;

    box-sizing: border-box;

    border:
        1px solid rgba(158,120,86,0.28);

    border-radius: 12px;

    outline: none;

    background:
        rgba(255,255,255,0.72);

    color: #554238;

    font-size: 15px;

    transition: 0.25s ease;
}


.cadeau-champ input {
    padding: 14px 15px;
}


.cadeau-champ textarea {
    min-height: 145px;

    padding: 15px;

    resize: vertical;

    line-height: 1.5;
}


.cadeau-champ input:focus,
.cadeau-champ textarea:focus,
.cadeau-champ-euro input:focus {

    border-color: #bc9162;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(188,145,98,0.12);
}


/* ==================================================
   MESSAGE
================================================== */

.cadeau-compteur {
    margin-top: 6px;

    color: #9b887a;

    font-size: 11px;

    text-align: right;
}


.cadeau-information {
    margin-top: 22px;

    padding: 16px 18px;

    border-left: 3px solid #c39a6a;

    border-radius: 10px;

    background:
        rgba(255,255,255,0.48);
}


.cadeau-information strong {
    color: #725441;
}


.cadeau-information p {
    margin: 5px 0 0;

    color: #887367;

    font-size: 12px;
    line-height: 1.5;
}


/* ==================================================
   NAVIGATION
================================================== */

.cadeau-navigation {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 35px;
}


.cadeau-navigation.droite {
    justify-content: flex-end;
}


.cadeau-suivant,
.cadeau-retour {

    padding: 13px 25px;

    border-radius: 50px;

    font-size: 14px;

    cursor: pointer;

    transition: 0.25s ease;
}


.cadeau-suivant {
    border: none;

    background:
        linear-gradient(
            135deg,
            #795a45,
            #9b765b
        );

    color: #ffffff;
}


.cadeau-retour {
    border:
        1px solid rgba(132,96,68,0.25);

    background: transparent;

    color: #765b49;
}


.cadeau-suivant:hover,
.cadeau-retour:hover {
    transform: translateY(-2px);
}


/* ==================================================
   ERREURS
================================================== */

.cadeau-erreur {
    margin-top: 12px;

    color: #9e514c;

    font-size: 12px;

    text-align: center;
}


/* ==================================================
   RÉCAP
================================================== */

.cadeau-recap {
    margin-bottom: 25px;

    padding: 20px;

    background:
        rgba(255,255,255,0.58);

    border:
        1px solid rgba(165,124,82,0.12);

    border-radius: 16px;
}


.cadeau-recap-ligne {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 11px 0;

    border-bottom:
        1px solid rgba(140,106,76,0.12);
}


.cadeau-recap-ligne:last-child {
    border-bottom: none;
}


.cadeau-recap-ligne span {
    color: #907c6f;
}


.cadeau-recap-ligne strong {
    color: #674c3d;

    text-align: right;
}


/* ==================================================
   CONDITIONS
================================================== */

.cadeau-conditions {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 22px 0;

    cursor: pointer;
}


.cadeau-conditions input {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin-top: 2px;

    accent-color: #b18457;
}


.cadeau-conditions span {
    color: #725f54;

    font-size: 12px;
    line-height: 1.5;
}


/* ==================================================
   PAIEMENT
================================================== */

.cadeau-payer {
    width: 100%;

    padding: 17px 24px;

    border: none;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #a77749 0%,
            #d2ac73 50%,
            #9e6d40 100%
        );

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 10px 26px rgba(105,70,39,0.20);

    transition: 0.25s ease;
}


.cadeau-payer:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(105,70,39,0.28);
}


.cadeau-paiement-securise {
    margin-top: 10px;

    color: #927f71;

    font-size: 11px;

    text-align: center;
}


.retour-final {
    justify-content: center;

    margin-top: 18px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

    .anaelle-carte-cadeau {
        margin: 20px auto;

        padding: 28px 17px;

        border-radius: 20px;
    }


    .cadeau-entete h2 {
        font-size: 26px;
    }


    .cadeau-etape h3 {
        font-size: 21px;
    }


    .cadeau-sous-titre {
        font-size: 13px;
    }


    .cadeau-montants {
        grid-template-columns:
            1fr 1fr;

        gap: 9px;
    }


    .cadeau-montant {
        min-height: 55px;

        font-size: 15px;
    }


    .cadeau-champs {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .cadeau-navigation {
        gap: 10px;

        margin-top: 27px;
    }


    .cadeau-suivant,
    .cadeau-retour {
        padding: 12px 17px;

        font-size: 12px;
    }


    .cadeau-recap-ligne {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }


    .cadeau-recap-ligne strong {
        text-align: left;
    }

}



/* ==================================================
   CARTE CADEAU ANAËLLE BEAUTY
   FORMAT 16/9 + FLIP PC / MOBILE
================================================== */

.carte-cadeau-flip {
    position: relative;

    width: 90% !important;
    max-width: 820px !important;

    aspect-ratio: 16 / 9 !important;

    margin: 30px auto;

    perspective: 1800px;

    cursor: pointer;

    touch-action: manipulation;
}


/* ==================================================
   CONTENEUR 3D
================================================== */

.carte-cadeau-inner {
    position: relative;

    width: 100% !important;
    height: 100% !important;

    transform: rotateY(0deg);

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    transition:
        transform 0.9s cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        );
}


/* ==================================================
   PC : RETOURNEMENT AU SURVOL
================================================== */

@media (min-width: 769px) and (hover: hover) {

    .carte-cadeau-flip:hover .carte-cadeau-inner {
        transform: rotateY(180deg);
    }

}


/* ==================================================
   MOBILE : RETOURNEMENT AU TOUCHER
================================================== */

@media (max-width: 768px) {

    .carte-cadeau-flip.is-flipped .carte-cadeau-inner {
        transform: rotateY(180deg) !important;
    }

}


/* ==================================================
   RECTO + VERSO
================================================== */

.carte-cadeau-face {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    border-radius: 18px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* ==================================================
   RECTO
================================================== */

.carte-cadeau-recto {
    transform: rotateY(0deg);

    background: #f7eee8;
}


.carte-cadeau-recto img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
}


/* ==================================================
   INDICATION RECTO
================================================== */

.carte-indication {
    position: absolute;

    left: 50%;
    bottom: 15px;

    transform: translateX(-50%);

    z-index: 5;

    padding: 7px 17px;

    border: 1px solid rgba(182, 135, 80, 0.40);

    border-radius: 50px;

    background: rgba(255, 249, 245, 0.90);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    color: #825d40;

    font-size: 11px;

    letter-spacing: 0.5px;

    white-space: nowrap;

    pointer-events: none;
}


/* ==================================================
   VERSO
================================================== */

.carte-cadeau-verso {
    transform: rotateY(180deg);

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 30px 45px !important;

    text-align: center !important;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255,255,255,0.95) 0%,
            transparent 35%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(211,167,111,0.20) 0%,
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #fffaf7 0%,
            #f9ebe3 38%,
            #efd9c6 68%,
            #e5c39d 100%
        );
}


/* CADRE DORÉ */

.carte-cadeau-verso::before {
    content: "";

    position: absolute;

    inset: 13px;

    border: 1px solid rgba(174,125,68,0.45);

    border-radius: 11px;

    pointer-events: none;

    z-index: 1;
}


/* ==================================================
   CONTENU DU VERSO
================================================== */

.verso-contenu {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 680px;

    margin: auto;

    text-align: center;
}


/* ==================================================
   PETIT TITRE
================================================== */

.verso-petit-titre {
    margin: 0 0 8px !important;

    padding: 0 !important;

    color: #a57850;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: 3px;
}


/* ==================================================
   ORNEMENT
================================================== */

.verso-ornement {
    margin: 0 0 6px !important;

    padding: 0 !important;

    color: #c29962;

    font-size: 20px;

    line-height: 1;
}


/* ==================================================
   TITRE
================================================== */

.carte-cadeau-verso h2 {
    margin: 0 0 14px !important;

    padding: 0 !important;

    color: #73523d !important;

    font-size: 30px !important;

    font-weight: 500 !important;

    line-height: 1.15 !important;

    text-align: center !important;
}


/* ==================================================
   MESSAGE PRINCIPAL
================================================== */

.verso-message {
    display: block !important;

    max-width: 580px;

    margin: 0 auto 15px !important;

    padding: 0 !important;

    color: #644a3b !important;

    font-size: 19px !important;

    line-height: 1.4 !important;

    font-style: italic;

    text-align: center !important;
}


/* ==================================================
   SÉPARATEUR
================================================== */

.verso-trait {
    position: relative;

    width: 42%;
    height: 1px;

    margin: 14px auto !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(178,130,72,0.55),
            transparent
        );
}


.verso-trait span {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    padding: 0 9px;

    background: #f3dfcd;

    color: #b58755;

    font-size: 14px;

    line-height: 1;
}


/* ==================================================
   TEXTE SECONDAIRE
================================================== */

.verso-secondaire {
    display: block !important;

    max-width: 500px;

    margin: 0 auto 14px !important;

    padding: 0 !important;

    color: #8a7060 !important;

    font-size: 12px !important;

    line-height: 1.45 !important;

    text-align: center !important;
}


/* ==================================================
   SIGNATURE
================================================== */

.verso-signature {
    margin: 0 !important;

    padding: 0 !important;

    color: #9c714b;

    font-size: 16px;

    line-height: 1.2;

    font-style: italic;
}


/* ==================================================
   REFLET VERSO
================================================== */

.carte-cadeau-verso::after {
    content: "";

    position: absolute;

    top: -60%;
    left: -40%;

    width: 25%;
    height: 220%;

    transform: rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.18),
            rgba(255,248,230,0.28),
            transparent
        );

    animation: reflet-carte-verso 6s ease-in-out infinite;

    pointer-events: none;

    z-index: 2;
}


@keyframes reflet-carte-verso {

    0%,
    30% {
        left: -40%;
        opacity: 0;
    }

    45% {
        opacity: 0.7;
    }

    70% {
        left: 120%;
        opacity: 0;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}


/* ==================================================
   MOBILE
   VERSION COMPACTE 16/9
================================================== */

@media (max-width: 768px) {

    .carte-cadeau-flip {
        width: 94% !important;
        max-width: 94% !important;

        aspect-ratio: 16 / 9 !important;

        margin: 16px auto !important;

        perspective: 1200px;
    }


    .carte-cadeau-inner {
        transition:
            transform 0.75s cubic-bezier(
                0.22,
                0.61,
                0.36,
                1
            ) !important;
    }


    .carte-cadeau-face {
        border-radius: 12px !important;
    }


    /* ==============================
       RECTO MOBILE
    ============================== */

    .carte-indication {
        bottom: 7px;

        padding: 4px 10px;

        font-size: 7px;

        letter-spacing: 0.3px;
    }


    /* ==============================
       VERSO MOBILE
    ============================== */

    .carte-cadeau-verso {
        padding:
            10px
            22px !important;

        align-items: center !important;

        justify-content: center !important;
    }


    .carte-cadeau-verso::before {
        inset: 7px;

        border-radius: 8px;
    }


    /* CONTENU */

    .verso-contenu {
        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        width: 100%;

        max-width: 100%;

        height: auto;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* ANAËLLE BEAUTY */

    .verso-petit-titre {
        margin: 0 0 3px !important;

        font-size: 6.5px !important;

        line-height: 1 !important;

        letter-spacing: 1.8px !important;
    }


    /* ÉTOILE */

    .verso-ornement {
        margin: 1px 0 3px !important;

        font-size: 10px !important;

        line-height: 1 !important;
    }


    /* FAITES PLAISIR */

    .carte-cadeau-verso h2 {
        margin: 0 0 5px !important;

        padding: 0 !important;

        font-size: 17px !important;

        line-height: 1.05 !important;
    }


    /* MESSAGE PRINCIPAL */

    .verso-message {
        width: 94% !important;

        max-width: 94% !important;

        margin: 0 auto 5px !important;

        padding: 0 !important;

        font-size: 10px !important;

        line-height: 1.25 !important;

        text-align: center !important;
    }


    /* TRAIT + COEUR */

    .verso-trait {
        width: 40% !important;

        height: 1px;

        margin:
            4px
            auto
            6px !important;
    }


    .verso-trait span {
        padding: 0 6px;

        font-size: 10px;

        line-height: 1;

        background: #f3dfcd;
    }


    /* TEXTE SECONDAIRE */

    .verso-secondaire {
        width: 90% !important;

        max-width: 90% !important;

        margin:
            0
            auto
            5px !important;

        padding: 0 !important;

        font-size: 7.5px !important;

        line-height: 1.2 !important;

        text-align: center !important;
    }


    /* SIGNATURE */

    .verso-signature {
        margin: 0 !important;

        padding: 0 !important;

        font-size: 10px !important;

        line-height: 1 !important;
    }

}


/* ==================================================
   TRÈS PETITS MOBILES
================================================== */

@media (max-width: 390px) {

    .carte-cadeau-verso {
        padding:
            8px
            18px !important;
    }


    .verso-petit-titre {
        font-size: 6px !important;
    }


    .verso-ornement {
        font-size: 9px !important;
    }


    .carte-cadeau-verso h2 {
        font-size: 15px !important;
    }


    .verso-message {
        font-size: 9px !important;
    }


    .verso-secondaire {
        font-size: 7px !important;
    }


    .verso-signature {
        font-size: 9px !important;
    }

}







/* =====================================================
ANAËLLE BEAUTY
SIMULATEUR DE VERNIS
MOBILE UNIQUEMENT
===================================================== */

#ab-nail-simulator {
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    padding: 15px;
    box-sizing: border-box;
    font-family: inherit;
}


/* =====================================================
MESSAGE PC - SIMULATEUR MOBILE UNIQUEMENT
===================================================== */

#ab-nail-simulator .ab-mobile-only-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 720px;

    margin: 20px auto;

    padding: 50px 35px;

    box-sizing: border-box;

    text-align: center;

    background:
        radial-gradient(
            circle at top,
            rgba(255, 245, 245, 0.98),
            rgba(255, 255, 255, 0.98)
        );

    border:
        1px solid rgba(183, 137, 131, 0.20);

    border-radius: 30px;

    box-shadow:
        0 22px 65px rgba(80, 30, 40, 0.13);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* ICONE TELEPHONE */

#ab-nail-simulator .ab-mobile-only-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin: 0 auto 22px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #c99e98,
            #af7772
        );

    color: #ffffff;

    font-size: 34px;

    box-shadow:
        0 12px 30px rgba(120, 65, 70, 0.22);
}


/* TITRE MESSAGE PC */

#ab-nail-simulator .ab-mobile-only-message strong {
    display: block;

    margin: 0 0 13px;

    color: #6b4847;

    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -0.4px;
}


/* TEXTE MESSAGE PC */

#ab-nail-simulator .ab-mobile-only-message p {
    max-width: 540px;

    margin: 0;

    color: #765f5e;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.7;

    opacity: 0.88;
}


/* PETIT TEXTE DECORATIF */

#ab-nail-simulator .ab-mobile-only-message::before {
    content: "ANAËLLE BEAUTY";

    display: block;

    margin-bottom: 15px;

    color: #a47a76;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;
}


/* =====================================================
PC : CACHER COMPLETEMENT LE SIMULATEUR
===================================================== */

@media (min-width: 601px) {

    #ab-nail-simulator > .ab-nail-card {
        display: none !important;
    }

}


/* =====================================================
CARTE PRINCIPALE
===================================================== */

#ab-nail-simulator .ab-nail-card {
    width: 100%;

    padding: 35px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.98),
            rgba(250,242,242,0.98)
        );

    border:
        1px solid rgba(175, 125, 130, 0.18);

    border-radius: 28px;

    box-shadow:
        0 20px 60px rgba(80, 30, 40, 0.10);
}


/* =====================================================
TITRES
===================================================== */

#ab-nail-simulator .ab-nail-header {
    text-align: center;
    margin-bottom: 28px;
}


#ab-nail-simulator .ab-mini-title {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 600;

    opacity: 0.55;
}


#ab-nail-simulator h2 {
    margin: 0 0 10px 0;

    font-size: clamp(27px, 5vw, 42px);

    line-height: 1.1;
}


#ab-nail-simulator .ab-nail-header p {
    margin: 0 auto;

    max-width: 520px;

    font-size: 15px;

    line-height: 1.6;

    opacity: 0.72;
}


/* =====================================================
UPLOAD PHOTO
===================================================== */

#ab-nail-simulator .ab-photo-zone {
    text-align: center;

    margin: 25px 0;
}


#ab-hand-photo {
    display: none !important;
}


#ab-nail-simulator .ab-photo-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 0 28px;

    background: #b78983;

    color: #ffffff;

    border-radius: 999px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(120,65,70,0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


#ab-nail-simulator .ab-photo-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 32px rgba(120,65,70,0.28);
}


#ab-nail-simulator .ab-photo-icon {
    margin-right: 7px;
}


/* =====================================================
STATUT
===================================================== */

#ab-status {
    min-height: 20px;

    margin-top: 14px;

    font-size: 13px;

    opacity: 0.65;
}


/* =====================================================
IMAGE / CANVAS
===================================================== */

#ab-canvas-wrapper {
    position: relative;

    width: 100%;

    margin: 25px auto;

    overflow: hidden;

    border-radius: 22px;

    background: #eee;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.12);
}


#ab-hand-canvas {
    display: block;

    width: 100%;

    height: auto;

    max-height: 75vh;

    object-fit: contain;

    image-rendering: auto !important;

    border-radius: 22px;
}


/* =====================================================
CONTROLES
===================================================== */

#ab-simulator-controls {
    margin-top: 32px;

    text-align: center;
}


#ab-simulator-controls h3 {
    margin-bottom: 20px;

    font-size: 20px;
}


/* =====================================================
PALETTE
===================================================== */

#ab-color-palette {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin: 0 auto 18px auto;
}


#ab-color-palette .ab-color {
    position: relative;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 4px solid #ffffff;

    border-radius: 50%;

    background: var(--color);

    cursor: pointer;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.15);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#ab-color-palette .ab-color:hover {
    transform: scale(1.10);
}


#ab-color-palette .ab-color.active {
    transform: scale(1.15);

    box-shadow:
        0 0 0 2px #9c7370,
        0 6px 15px rgba(0,0,0,0.18);
}


#ab-nail-simulator .ab-selected-color {
    margin: 16px 0 28px 0;

    font-size: 14px;
}


/* =====================================================
REGLAGES
===================================================== */

#ab-nail-simulator .ab-adjustments {
    display: grid;

    grid-template-columns:
        minmax(220px, 420px) !important;

    justify-content: center !important;

    gap: 18px;

    max-width: 700px;

    margin: 0 auto 30px auto;

    padding: 22px;

    background:
        rgba(255,255,255,0.65);

    border-radius: 20px;

    border:
        1px solid rgba(130,80,85,0.10);
}


#ab-nail-simulator .ab-setting {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


#ab-nail-simulator .ab-setting label {
    font-size: 12px;

    font-weight: 600;

    opacity: 0.75;
}


#ab-nail-simulator input[type="range"] {
    width: 100%;

    accent-color: #b78983;
}


/* ANCIENS REGLAGES */

#ab-nail-simulator .ab-setting:has(#ab-size),
#ab-nail-simulator .ab-setting:has(#ab-position) {
    display: none !important;
}


/* =====================================================
BOUTONS
===================================================== */

#ab-nail-simulator .ab-actions {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}


#ab-nail-simulator button {
    font-family: inherit;
}


#ab-nail-simulator .ab-main-btn,
#ab-nail-simulator .ab-secondary-btn {
    min-height: 48px;

    padding: 0 22px;

    border-radius: 999px;

    cursor: pointer;

    font-size: 14px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#ab-nail-simulator .ab-main-btn {
    border: none;

    background: #b78983;

    color: white;

    font-weight: 600;

    box-shadow:
        0 8px 22px rgba(120,65,70,0.20);
}


#ab-nail-simulator .ab-secondary-btn {
    border:
        1px solid rgba(120,65,70,0.22);

    background: white;

    color: #5c4545;
}


#ab-nail-simulator .ab-main-btn:hover,
#ab-nail-simulator .ab-secondary-btn:hover {
    transform: translateY(-2px);
}


/* =====================================================
ELEMENTS HIDDEN
===================================================== */

#ab-nail-simulator [hidden] {
    display: none !important;
}


/* =====================================================
MOBILE
===================================================== */

@media (max-width: 600px) {


    /* CACHE LE MESSAGE PC */

    #ab-nail-simulator .ab-mobile-only-message {
        display: none !important;
    }


    /* AFFICHE LE SIMULATEUR */

    #ab-nail-simulator > .ab-nail-card {
        display: block !important;
    }


    #ab-nail-simulator {
        padding: 8px;

        margin: 20px auto;
    }


    #ab-nail-simulator .ab-nail-card {
        padding: 22px 13px;

        border-radius: 22px;
    }


    /* BOUTON PHOTO */

    #ab-nail-simulator .ab-photo-button {
        display: flex;

        width: 100%;

        min-height: 56px;

        box-sizing: border-box;

        padding: 0 18px;
    }


    /* PALETTE */

    #ab-color-palette {
        gap: 10px;
    }


    #ab-color-palette .ab-color {
        width: 42px;

        height: 42px;
    }


    /* REGLAGES */

    #ab-nail-simulator .ab-adjustments {
        grid-template-columns:
            1fr !important;

        gap: 18px;

        padding: 18px;
    }


    /* ACTIONS */

    #ab-nail-simulator .ab-actions {
        flex-direction: column;
    }


    #ab-nail-simulator .ab-main-btn,
    #ab-nail-simulator .ab-secondary-btn {
        width: 100%;
    }

}
/* ==========================================================
   ANAËLLE BEAUTY
   POPUP SIMULATEUR
========================================================== */

#ab-simulator-popup {
    position: fixed;
    inset: 0;
    z-index: 9999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    box-sizing: border-box;

    background: rgba(35, 22, 24, 0.48);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


/* POPUP VISIBLE */

#ab-simulator-popup.ab-popup-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ==========================================================
   CARTE
========================================================== */

#ab-simulator-popup .ab-popup-card {
    position: relative;

    width: min(92vw, 470px);

    padding: 42px 32px 34px;

    box-sizing: border-box;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99),
            rgba(250, 240, 241, 0.99)
        );

    border:
        1px solid rgba(183, 137, 131, 0.22);

    border-radius: 28px;

    box-shadow:
        0 25px 80px rgba(62, 32, 36, 0.25);

    transform:
        translateY(20px)
        scale(0.96);

    transition:
        transform 0.4s cubic-bezier(.2, .8, .2, 1);
}


#ab-simulator-popup.ab-popup-visible .ab-popup-card {
    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   ICONE
========================================================== */

#ab-simulator-popup .ab-popup-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin:
        0
        auto
        18px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(203, 161, 155, 0.20),
            rgba(183, 137, 131, 0.10)
        );

    font-size: 29px;
}


/* ==========================================================
   PETIT TITRE
========================================================== */

#ab-simulator-popup .ab-popup-mini-title {
    display: block;

    margin-bottom: 12px;

    color: #9f7470;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* ==========================================================
   TITRE
========================================================== */

#ab-simulator-popup .ab-popup-card h2 {
    margin:
        0
        0
        15px;

    color: #493536;

    font-size:
        clamp(
            27px,
            6vw,
            38px
        );

    line-height: 1.12;
}


/* ==========================================================
   TEXTE
========================================================== */

#ab-simulator-popup .ab-popup-card p {
    max-width: 360px;

    margin:
        0
        auto
        27px;

    color: #725d5e;

    font-size: 15px;

    line-height: 1.6;
}


/* ==========================================================
   BOUTON PRINCIPAL
========================================================== */

#ab-simulator-popup .ab-popup-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding:
        0
        30px;

    border: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #bd908a,
            #a9716c
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 28px
        rgba(117, 63, 68, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#ab-simulator-popup .ab-popup-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 34px
        rgba(117, 63, 68, 0.32);
}


/* ==========================================================
   CROIX
========================================================== */

#ab-simulator-popup .ab-popup-close {
    position: absolute;

    top: 14px;
    right: 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(
            183,
            137,
            131,
            0.10
        );

    color: #785f60;

    font-family: inherit;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


#ab-simulator-popup .ab-popup-close:hover {
    background:
        rgba(
            183,
            137,
            131,
            0.18
        );

    transform:
        rotate(5deg);
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    #ab-simulator-popup {
        padding: 14px;
    }


    #ab-simulator-popup .ab-popup-card {
        width: 100%;

        padding:
            38px
            20px
            28px;

        border-radius: 23px;
    }


    #ab-simulator-popup .ab-popup-card h2 {
        font-size: 29px;
    }


    #ab-simulator-popup .ab-popup-card p {
        font-size: 14px;
    }


    #ab-simulator-popup .ab-popup-button {
        width: 100%;

        box-sizing: border-box;
    }

}




/* ==========================================================
   ANAËLLE BEAUTY
   CALCUL TARIF PRESTATION A DOMICILE
========================================================== */

#ab-home-pricing {
    width: 100%;
    max-width: 850px;

    margin: 35px auto;

    padding: 15px;

    box-sizing: border-box;

    font-family: inherit;
}


/* ==========================================================
   CARTE
========================================================== */

#ab-home-pricing .ab-price-card {
    width: 100%;

    padding: 42px 38px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.98),
            rgba(250,242,242,0.98)
        );

    border:
        1px solid rgba(175,125,130,0.18);

    border-radius: 30px;

    box-shadow:
        0 20px 60px
        rgba(80,30,40,0.10);
}


/* ==========================================================
   HEADER
========================================================== */

#ab-home-pricing .ab-price-header {
    max-width: 620px;

    margin:
        0
        auto
        32px;

    text-align: center;
}


#ab-home-pricing .ab-price-kicker {
    display: block;

    margin-bottom: 10px;

    color: #9f7470;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 4px;
}


#ab-home-pricing .ab-price-header h2 {
    margin:
        0
        0
        13px;

    color: #6b4847;

    font-size:
        clamp(
            29px,
            5vw,
            43px
        );

    line-height: 1.1;

    font-weight: 600;
}


#ab-home-pricing .ab-price-header p {
    max-width: 560px;

    margin:
        0
        auto;

    color: #725d5e;

    font-size: 15px;

    line-height: 1.65;
}


/* ==========================================================
   FORMULAIRE
========================================================== */

#ab-home-pricing .ab-distance-form {
    max-width: 680px;

    margin: 0 auto;
}


#ab-home-pricing .ab-distance-form label {
    display: block;

    margin:
        0
        0
        9px;

    color: #60494a;

    font-size: 13px;

    font-weight: 700;
}


#ab-home-pricing .ab-address-row {
    display: flex;

    align-items: stretch;

    gap: 10px;
}


/* INPUT */

#ab-home-pricing #ab-client-address {
    flex: 1;

    min-width: 0;

    height: 56px;

    padding:
        0
        20px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(130,80,85,0.20);

    border-radius: 999px;

    outline: none;

    background: #ffffff;

    color: #4e3d3e;

    font-family: inherit;

    font-size: 15px;

    box-shadow:
        inset 0 1px 3px
        rgba(80,30,40,0.03);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


#ab-home-pricing #ab-client-address:focus {
    border-color: #b78983;

    box-shadow:
        0 0 0 4px
        rgba(183,137,131,0.12);
}


#ab-home-pricing
#ab-client-address::placeholder {
    color: #a99a9a;
}


/* BOUTON */

#ab-home-pricing #ab-calculate-price {
    min-height: 56px;

    padding:
        0
        25px;

    border: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #bd908a,
            #a9716c
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 9px 25px
        rgba(117,63,68,0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


#ab-home-pricing
#ab-calculate-price:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px
        rgba(117,63,68,0.27);
}


#ab-home-pricing
#ab-calculate-price:disabled {
    opacity: 0.6;

    cursor: wait;

    transform: none;
}


/* ==========================================================
   STATUS
========================================================== */

#ab-home-pricing .ab-distance-status {
    min-height: 20px;

    max-width: 680px;

    margin:
        13px
        auto
        0;

    color: #80696a;

    text-align: center;

    font-size: 13px;
}


/* ==========================================================
   RESULTAT
========================================================== */

#ab-home-pricing .ab-price-result {
    max-width: 560px;

    margin:
        27px
        auto
        0;

    padding:
        28px
        25px;

    box-sizing: border-box;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(183,137,131,0.12),
            rgba(255,255,255,0.82)
        );

    border:
        1px solid
        rgba(183,137,131,0.20);

    border-radius: 24px;

    animation:
        abResultAppear
        0.45s
        ease;
}


#ab-home-pricing .ab-result-mini {
    display: block;

    margin-bottom: 5px;

    color: #98706d;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;
}


#ab-home-pricing .ab-result-price {
    margin-bottom: 7px;

    color: #9c6561;

    font-size:
        clamp(
            43px,
            8vw,
            61px
        );

    font-weight: 700;

    line-height: 1;
}


#ab-home-pricing .ab-result-distance {
    color: #5f4a4b;

    font-size: 15px;

    font-weight: 600;
}


#ab-home-pricing .ab-result-address {
    max-width: 450px;

    margin:
        8px
        auto
        0;

    color: #837071;

    font-size: 12px;

    line-height: 1.5;
}


#ab-home-pricing .ab-result-included {
    display: inline-block;

    margin:
        15px
        0
        0;

    padding:
        7px
        14px;

    border-radius: 999px;

    background: #ffffff;

    color: #8f6865;

    font-size: 12px;

    font-weight: 700;
}


/* ==========================================================
   HORS ZONE
========================================================== */

#ab-home-pricing .ab-outside-result {
    max-width: 560px;

    margin:
        27px
        auto
        0;

    padding:
        28px
        25px;

    box-sizing: border-box;

    text-align: center;

    background:
        rgba(255,255,255,0.78);

    border:
        1px solid
        rgba(183,137,131,0.20);

    border-radius: 24px;
}


#ab-home-pricing .ab-outside-icon {
    margin-bottom: 10px;

    font-size: 30px;
}


#ab-home-pricing .ab-outside-result strong {
    display: block;

    margin-bottom: 8px;

    color: #6b4847;

    font-size: 20px;
}


#ab-home-pricing .ab-outside-result p {
    max-width: 430px;

    margin:
        0
        auto;

    color: #786364;

    font-size: 14px;

    line-height: 1.6;
}


/* ==========================================================
   TABLE TARIFS
========================================================== */

#ab-home-pricing .ab-price-table {
    max-width: 560px;

    margin:
        35px
        auto
        0;

    overflow: hidden;

    background:
        rgba(255,255,255,0.68);

    border:
        1px solid
        rgba(130,80,85,0.10);

    border-radius: 22px;
}


#ab-home-pricing .ab-price-table-title {
    padding:
        18px
        20px;

    color: #6b4d4d;

    font-size: 15px;

    font-weight: 700;

    text-align: center;

    border-bottom:
        1px solid
        rgba(130,80,85,0.10);
}


#ab-home-pricing .ab-price-line {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        14px
        20px;

    color: #6b5758;

    font-size: 14px;

    border-bottom:
        1px solid
        rgba(130,80,85,0.07);
}


#ab-home-pricing
.ab-price-line:last-child {
    border-bottom: none;
}


#ab-home-pricing .ab-price-line strong {
    color: #a36e69;

    font-size: 16px;
}


/* ==========================================================
   NOTE
========================================================== */

#ab-home-pricing .ab-price-note {
    max-width: 560px;

    margin:
        15px
        auto
        0;

    text-align: center;

    color: #8f7c7d;

    font-size: 11px;

    line-height: 1.5;
}


/* ==========================================================
   HIDDEN
========================================================== */

#ab-home-pricing [hidden] {
    display: none !important;
}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes abResultAppear {

    from {
        opacity: 0;

        transform:
            translateY(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    #ab-home-pricing {
        padding: 8px;

        margin:
            20px
            auto;
    }


    #ab-home-pricing .ab-price-card {
        padding:
            30px
            16px;

        border-radius: 24px;
    }


    #ab-home-pricing .ab-price-header {
        margin-bottom: 25px;
    }


    #ab-home-pricing .ab-price-header h2 {
        font-size: 31px;
    }


    #ab-home-pricing .ab-address-row {
        flex-direction: column;
    }


    #ab-home-pricing #ab-client-address {
        width: 100%;
    }


    #ab-home-pricing #ab-calculate-price {
        width: 100%;
    }


    #ab-home-pricing .ab-price-result,
    #ab-home-pricing .ab-outside-result {
        padding:
            24px
            15px;
    }


    #ab-home-pricing .ab-price-line {
        padding:
            13px
            16px;
    }

}
/* ==========================================================
   ANAËLLE BEAUTY
   BOUTON WHATSAPP
========================================================== */

#ab-home-pricing .whatsapp-rdv-button {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 13px !important;

    min-height: 62px;

    margin: 22px auto 0;

    padding: 10px 28px;

    box-sizing: border-box;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #25D366,
            #1DAF55
        ) !important;

    color: #ffffff !important;

    text-decoration: none !important;

    font-family: inherit;

    box-shadow:
        0 10px 30px
        rgba(37, 211, 102, 0.25);

    animation:
        abWhatsappPulse
        2.8s
        ease-in-out
        infinite;
}


/* ==========================================================
   LOGO WHATSAPP
========================================================== */

#ab-home-pricing
.whatsapp-rdv-button
.whatsapp-rdv-icon {

    display: block !important;

    width: 31px !important;
    height: 31px !important;

    min-width: 31px !important;

    flex:
        0
        0
        31px !important;

    color: #ffffff !important;
}


/* ==========================================================
   BLOC TEXTE

   GRID = UNE LIGNE PAR ELEMENT
========================================================== */

#ab-home-pricing
.whatsapp-rdv-button
.whatsapp-rdv-text {

    display: grid !important;

    grid-template-columns:
        1fr !important;

    grid-template-rows:
        auto
        auto !important;

    align-items: center !important;

    justify-items: start !important;

    row-gap: 3px !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #ffffff !important;

    text-align: left !important;

    white-space: normal !important;

    line-height: 1 !important;
}


/* ==========================================================
   LIGNE 1 : PRENDRE RDV
========================================================== */

#ab-home-pricing
.whatsapp-rdv-button
.whatsapp-rdv-text
.whatsapp-rdv-line-1 {

    display: block !important;

    grid-column:
        1 !important;

    grid-row:
        1 !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #ffffff !important;

    font-size: 16px !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;

    white-space: nowrap !important;
}


/* ==========================================================
   LIGNE 2 : WHATSAPP
========================================================== */

#ab-home-pricing
.whatsapp-rdv-button
.whatsapp-rdv-text
.whatsapp-rdv-line-2 {

    display: block !important;

    grid-column:
        1 !important;

    grid-row:
        2 !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color:
        rgba(
            255,
            255,
            255,
            0.86
        ) !important;

    font-size: 11px !important;

    font-weight: 500 !important;

    line-height: 1.15 !important;

    white-space: nowrap !important;
}


/* ==========================================================
   SURVOL
========================================================== */

#ab-home-pricing
.whatsapp-rdv-button:hover {

    color: #ffffff !important;

    text-decoration: none !important;

    transform:
        translateY(-2px)
        scale(1.02);

    box-shadow:
        0 15px 38px
        rgba(37, 211, 102, 0.35);
}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes abWhatsappPulse {

    0%,
    100% {

        transform:
            scale(1);

        box-shadow:
            0 10px 28px
            rgba(37, 211, 102, 0.22);
    }


    50% {

        transform:
            scale(1.025);

        box-shadow:
            0 14px 38px
            rgba(37, 211, 102, 0.38);
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    #ab-home-pricing
    .whatsapp-rdv-button {

        display: flex !important;

        width: 100% !important;

        min-height: 68px !important;

        padding:
            10px
            20px !important;

        border-radius: 17px !important;

        gap: 14px !important;
    }


    #ab-home-pricing
    .whatsapp-rdv-button
    .whatsapp-rdv-icon {

        width: 32px !important;
        height: 32px !important;

        min-width: 32px !important;

        flex:
            0
            0
            32px !important;
    }


    #ab-home-pricing
    .whatsapp-rdv-button
    .whatsapp-rdv-text {

        display: grid !important;

        grid-template-columns:
            1fr !important;

        grid-template-rows:
            auto
            auto !important;

        row-gap:
            4px !important;

        flex:
            none !important;

        text-align:
            left !important;

        white-space:
            normal !important;
    }


    #ab-home-pricing
    .whatsapp-rdv-button
    .whatsapp-rdv-line-1 {

        display:
            block !important;

        grid-row:
            1 !important;

        font-size:
            16px !important;
    }


    #ab-home-pricing
    .whatsapp-rdv-button
    .whatsapp-rdv-line-2 {

        display:
            block !important;

        grid-row:
            2 !important;

        font-size:
            11px !important;
    }

}

/* ==========================================================
   ANAËLLE BEAUTY
   IMAGE TARIF EN SURBRILLANCE
========================================================== */

.tarif-surbrillance {
    position: relative;
    display: block;
    overflow: hidden;

    border-radius: 22px;

    transform: translateZ(0);

    animation:
        tarif-pulse 3s ease-in-out infinite;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* IMAGE */

.tarif-surbrillance img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 22px;

    transition:
        transform 0.4s ease;
}


/* ==========================================================
   HALO / PULSATION
========================================================== */

@keyframes tarif-pulse {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 8px 25px rgba(183, 137, 131, 0.15);
    }

    50% {
        transform: scale(1.025);

        box-shadow:
            0 15px 42px rgba(183, 137, 131, 0.38),
            0 0 25px rgba(183, 137, 131, 0.16);
    }

}


/* ==========================================================
   REFLET QUI PASSE SUR L'IMAGE
========================================================== */

.tarif-surbrillance::after {
    content: "";

    position: absolute;

    top: -40%;
    left: -60%;

    width: 35%;
    height: 180%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.50),
            transparent
        );

    transform:
        rotate(20deg);

    animation:
        tarif-reflet 4.5s ease-in-out infinite;
}


@keyframes tarif-reflet {

    0%,
    55% {
        left: -60%;
        opacity: 0;
    }

    65% {
        opacity: 1;
    }

    85% {
        left: 130%;
        opacity: 0.8;
    }

    100% {
        left: 130%;
        opacity: 0;
    }

}


/* ==========================================================
   SURVOL PC
========================================================== */

.tarif-surbrillance:hover {
    transform: scale(1.035);

    box-shadow:
        0 18px 50px rgba(183, 137, 131, 0.42);
}


.tarif-surbrillance:hover img {
    transform: scale(1.015);
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .tarif-surbrillance {
        border-radius: 18px;

        animation-duration: 3.5s;
    }


    .tarif-surbrillance img {
        border-radius: 18px;
    }

}


/* ==========================================================
   ANAËLLE BEAUTY
   FORMULAIRE PRESTATION
========================================================== */

#ab-contact-form {
    width: 100%;
    max-width: 850px;

    margin: 35px auto;

    padding: 15px;

    box-sizing: border-box;

    font-family: inherit;
}


/* ==========================================================
   CARTE
========================================================== */

#ab-contact-form .ab-form-card {
    width: 100%;

    padding: 42px 38px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.99),
            rgba(250,242,242,0.98)
        );

    border:
        1px solid rgba(175,125,130,0.18);

    border-radius: 30px;

    box-shadow:
        0 20px 60px
        rgba(80,30,40,0.10);
}


/* ==========================================================
   HEADER
========================================================== */

#ab-contact-form .ab-form-header {
    max-width: 600px;

    margin:
        0
        auto
        35px;

    text-align: center;
}


#ab-contact-form .ab-form-kicker {
    display: block;

    margin-bottom: 10px;

    color: #9f7470;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 4px;
}


#ab-contact-form .ab-form-header h2 {
    margin:
        0
        0
        13px;

    color: #674849;

    font-size:
        clamp(
            30px,
            5vw,
            43px
        );

    line-height: 1.1;

    font-weight: 600;
}


#ab-contact-form .ab-form-header p {
    max-width: 530px;

    margin: 0 auto;

    color: #786263;

    font-size: 15px;

    line-height: 1.65;
}


/* ==========================================================
   GRID
========================================================== */

#ab-contact-form .ab-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


/* ==========================================================
   CHAMPS
========================================================== */

#ab-contact-form .ab-form-field {
    margin-bottom: 22px;
}


#ab-contact-form .ab-form-field label,
#ab-contact-form .ab-client-type legend {
    display: block;

    margin-bottom: 8px;

    padding: 0;

    color: #61494a;

    font-size: 13px;

    font-weight: 700;
}


#ab-contact-form .ab-form-field label span,
#ab-contact-form .ab-client-type legend span {
    color: #b78983;
}


/* ==========================================================
   INPUT
========================================================== */

#ab-contact-form input[type="text"],
#ab-contact-form input[type="email"],
#ab-contact-form input[type="tel"],
#ab-contact-form select,
#ab-contact-form textarea {
    width: 100%;

    box-sizing: border-box;

    border:
        1px solid
        rgba(130,80,85,0.18);

    outline: none;

    background: #ffffff;

    color: #4e3d3e;

    font-family: inherit;

    font-size: 15px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


#ab-contact-form input[type="text"],
#ab-contact-form input[type="email"],
#ab-contact-form input[type="tel"],
#ab-contact-form select {
    height: 56px;

    padding:
        0
        18px;

    border-radius: 16px;
}


#ab-contact-form textarea {
    min-height: 155px;

    padding:
        16px
        18px;

    border-radius: 18px;

    line-height: 1.6;

    resize: vertical;
}


/* FOCUS */

#ab-contact-form input:focus,
#ab-contact-form select:focus,
#ab-contact-form textarea:focus {
    border-color: #b78983;

    box-shadow:
        0 0 0 4px
        rgba(183,137,131,0.11);

    background: #ffffff;
}


/* PLACEHOLDER */

#ab-contact-form input::placeholder,
#ab-contact-form textarea::placeholder {
    color: #aaa0a0;

    opacity: 1;
}


/* ==========================================================
   SELECT
========================================================== */

#ab-contact-form .ab-select-wrapper {
    position: relative;
}


#ab-contact-form select {
    appearance: none;
    -webkit-appearance: none;

    padding-right: 45px;

    cursor: pointer;
}


#ab-contact-form .ab-select-wrapper::after {
    content: "⌄";

    position: absolute;

    top: 50%;
    right: 18px;

    transform:
        translateY(-55%);

    color: #a57773;

    font-size: 20px;

    pointer-events: none;
}


/* ==========================================================
   TYPE DE CLIENT
========================================================== */

#ab-contact-form .ab-client-type {
    margin:
        0
        0
        23px;

    padding: 0;

    border: 0;
}


#ab-contact-form .ab-client-options {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px;
}


#ab-contact-form .ab-client-option {
    display: block;

    margin: 0;

    cursor: pointer;
}


#ab-contact-form .ab-client-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


#ab-contact-form .ab-client-box {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 58px;

    padding:
        8px
        16px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(130,80,85,0.16);

    border-radius: 17px;

    background:
        rgba(255,255,255,0.78);

    color: #634d4e;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#ab-contact-form .ab-client-option:hover .ab-client-box {
    transform:
        translateY(-1px);

    border-color:
        rgba(183,137,131,0.45);
}


#ab-contact-form
.ab-client-option
input:checked
+
.ab-client-box {
    background:
        linear-gradient(
            145deg,
            rgba(183,137,131,0.17),
            rgba(255,255,255,0.95)
        );

    border-color: #b78983;

    box-shadow:
        0 6px 18px
        rgba(120,65,70,0.10);
}


#ab-contact-form .ab-client-icon {
    font-size: 20px;
}


#ab-contact-form .ab-client-label {
    font-size: 14px;

    font-weight: 700;
}


/* ==========================================================
   PROMO
========================================================== */

#ab-contact-form .ab-promo-section {
    margin-bottom: 3px;

    padding:
        20px
        20px
        0;

    background:
        rgba(183,137,131,0.065);

    border:
        1px dashed
        rgba(183,137,131,0.28);

    border-radius: 20px;
}


#ab-contact-form .ab-promo-row {
    display: flex;

    gap: 10px;
}


#ab-contact-form #ab-promo-code {
    flex: 1;

    text-transform: uppercase;
}


#ab-contact-form .ab-promo-button {
    min-height: 56px;

    padding:
        0
        23px;

    border: 0;

    border-radius: 16px;

    background: #6f5657;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


#ab-contact-form .ab-promo-button:hover {
    transform:
        translateY(-1px);

    background: #5e4748;
}


#ab-contact-form .ab-promo-status {
    min-height: 20px;

    margin-top: 8px;

    font-size: 12px;

    line-height: 1.4;
}


#ab-contact-form .ab-promo-status.ab-promo-success {
    color: #39804f;

    font-weight: 700;
}


#ab-contact-form .ab-promo-status.ab-promo-error {
    color: #a24f50;
}


/* ==========================================================
   MESSAGE
========================================================== */

#ab-contact-form .ab-message-footer {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin-top: 7px;

    color: #9a8889;

    font-size: 10px;
}


/* ==========================================================
   SUBMIT
========================================================== */

#ab-contact-form .ab-form-submit {
    margin-top: 7px;

    text-align: center;
}


#ab-contact-form #ab-form-submit-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 13px;

    min-height: 58px;

    padding:
        0
        31px;

    border: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #bd908a,
            #9f6d69
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 28px
        rgba(117,63,68,0.23);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#ab-contact-form #ab-form-submit-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(117,63,68,0.30);
}


#ab-contact-form .ab-submit-arrow {
    font-size: 20px;

    transition:
        transform 0.2s ease;
}


#ab-contact-form
#ab-form-submit-button:hover
.ab-submit-arrow {
    transform:
        translateX(3px);
}


/* ==========================================================
   STATUS FORMULAIRE
========================================================== */

#ab-contact-form .ab-form-status {
    min-height: 20px;

    margin-top: 15px;

    text-align: center;

    font-size: 13px;

    line-height: 1.5;
}


#ab-contact-form .ab-form-required {
    margin:
        12px
        0
        0;

    text-align: center;

    color: #9b898a;

    font-size: 10px;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    #ab-contact-form {
        margin:
            15px
            auto;

        padding: 6px;
    }


    #ab-contact-form .ab-form-card {
        padding:
            28px
            14px;

        border-radius: 23px;
    }


    #ab-contact-form .ab-form-header {
        margin-bottom: 27px;
    }


    #ab-contact-form .ab-form-kicker {
        font-size: 10px;

        letter-spacing: 3px;
    }


    #ab-contact-form .ab-form-header h2 {
        font-size: 30px;
    }


    #ab-contact-form .ab-form-header p {
        font-size: 14px;

        line-height: 1.55;
    }


    /* UNE COLONNE */

    #ab-contact-form .ab-form-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    /* INPUT PLUS CONFORTABLE */

    #ab-contact-form input[type="text"],
    #ab-contact-form input[type="email"],
    #ab-contact-form input[type="tel"],
    #ab-contact-form select {
        height: 56px;

        font-size: 16px;
    }


    #ab-contact-form textarea {
        font-size: 16px;
    }


    /* PARTICULIER / PRO */

    #ab-contact-form .ab-client-options {
        grid-template-columns: 1fr;

        gap: 9px;
    }


    /* PROMO */

    #ab-contact-form .ab-promo-section {
        padding:
            16px
            12px
            0;

        border-radius: 18px;
    }


    #ab-contact-form .ab-promo-row {
        flex-direction: column;
    }


    #ab-contact-form .ab-promo-button {
        width: 100%;
    }


    /* TEXTE COMPTEUR */

    #ab-contact-form .ab-message-footer {
        align-items: flex-end;

        font-size: 9px;
    }


    #ab-contact-form .ab-message-footer span:first-child {
        max-width: 70%;
    }


    /* BOUTON PLEINE LARGEUR */

    #ab-contact-form #ab-form-submit-button {
        width: 100%;

        min-height: 59px;

        border-radius: 17px;
    }

}

/* ==========================================================
   ANAËLLE BEAUTY
   SONDAGE MARRON / OR
========================================================== */

#ab-gold-poll {
    width: 100%;
    max-width: 620px;

    margin: 24px auto;

    padding: 6px;

    box-sizing: border-box;

    font-family: inherit;
}


/* ==========================================================
   CARTE
========================================================== */

#ab-gold-poll .ab-gold-poll-card {
    position: relative;

    overflow: hidden;

    padding: 27px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #fffdf9 0%,
            #faf4e9 100%
        );

    border:
        1px solid
        rgba(183,138,74,0.25);

    border-radius: 25px;

    box-shadow:
        0 16px 45px
        rgba(91,61,39,0.12);
}


/* DECOR DORE */

#ab-gold-poll .ab-gold-poll-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -110px;
    right: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,106,0.22),
            rgba(212,175,106,0)
        );

    pointer-events: none;
}


/* ==========================================================
   HEADER
========================================================== */

#ab-gold-poll .ab-gold-poll-header {
    position: relative;

    text-align: center;

    margin-bottom: 20px;
}


#ab-gold-poll .ab-gold-poll-kicker {
    display: block;

    margin-bottom: 7px;

    color: #b78a4a;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 3.5px;
}


#ab-gold-poll .ab-gold-poll-header h3 {
    max-width: 450px;

    margin:
        0
        auto
        7px;

    color: #654631;

    font-size: 21px;

    font-weight: 650;

    line-height: 1.25;
}


#ab-gold-poll .ab-gold-poll-header p {
    margin: 0;

    color: #907862;

    font-size: 11px;

    line-height: 1.5;
}


/* ==========================================================
   OPTIONS
========================================================== */

#ab-gold-poll .ab-gold-poll-options {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 9px;
}


#ab-gold-poll .ab-gold-poll-option {
    position: relative;

    display: block;

    cursor: pointer;
}


#ab-gold-poll .ab-gold-poll-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* ==========================================================
   CARTE OPTION
========================================================== */

#ab-gold-poll .ab-gold-option-card {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 110px;

    padding:
        13px
        8px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.96),
            rgba(250,245,236,0.96)
        );

    border:
        1px solid
        rgba(126,85,52,0.12);

    border-radius: 18px;

    text-align: center;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


/* HOVER */

#ab-gold-poll
.ab-gold-poll-option:hover
.ab-gold-option-card {

    transform:
        translateY(-3px);

    border-color:
        rgba(183,138,74,0.55);

    box-shadow:
        0 9px 22px
        rgba(91,61,39,0.10);
}


/* ==========================================================
   ICONE
========================================================== */

#ab-gold-poll .ab-gold-option-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 8px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #d6b776,
            #b78a4a
        );

    color: #ffffff;

    font-size: 17px;

    box-shadow:
        0 5px 14px
        rgba(183,138,74,0.22);
}


/* ==========================================================
   TEXTE OPTION
========================================================== */

#ab-gold-poll .ab-gold-option-text {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


#ab-gold-poll .ab-gold-option-text strong {
    color: #644631;

    font-size: 12px;

    font-weight: 700;
}


#ab-gold-poll .ab-gold-option-text small {
    color: #9d8873;

    font-size: 9px;
}


/* ==========================================================
   CHECK
========================================================== */

#ab-gold-poll .ab-gold-check {
    position: absolute;

    top: 8px;
    right: 8px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #d2ae65,
            #a97937
        );

    color: #ffffff;

    font-size: 10px;

    opacity: 0;

    transform:
        scale(0.4);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


/* ==========================================================
   SELECTION
========================================================== */

#ab-gold-poll
.ab-gold-poll-option
input:checked
+
.ab-gold-option-card {

    transform:
        translateY(-3px);

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #f5e7c9
        );

    border-color: #b78a4a;

    box-shadow:
        0 0 0 2px
        rgba(212,175,106,0.15),
        0 9px 25px
        rgba(91,61,39,0.12);
}


#ab-gold-poll
.ab-gold-poll-option
input:checked
+
.ab-gold-option-card
.ab-gold-check {

    opacity: 1;

    transform:
        scale(1);
}


/* ==========================================================
   BOUTON VALIDER
========================================================== */

#ab-gold-poll .ab-gold-poll-submit {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    min-height: 48px;

    margin:
        18px
        auto
        0;

    padding:
        0
        25px;

    border: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #7b5236 0%,
            #9e6f3f 45%,
            #c09a55 100%
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 9px 24px
        rgba(91,61,39,0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


#ab-gold-poll .ab-gold-poll-submit:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px
        rgba(91,61,39,0.30);
}


#ab-gold-poll .ab-gold-poll-submit:disabled {
    opacity: 0.55;

    cursor: wait;

    transform: none;
}


#ab-gold-poll .ab-gold-submit-arrow {
    font-size: 18px;
}


/* ==========================================================
   STATUS
========================================================== */

#ab-gold-poll .ab-gold-poll-status {
    min-height: 18px;

    margin-top: 11px;

    text-align: center;

    color: #795b43;

    font-size: 10px;

    line-height: 1.5;
}


/* ==========================================================
   RESULTATS
========================================================== */

#ab-gold-poll .ab-gold-poll-results {
    margin-top: 20px;

    padding:
        18px
        17px
        4px;

    background:
        rgba(255,255,255,0.55);

    border:
        1px solid
        rgba(183,138,74,0.14);

    border-radius: 18px;

    animation:
        abGoldResultsAppear
        0.4s
        ease;
}


#ab-gold-poll .ab-gold-results-title {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;

    color: #684a34;

    font-size: 11px;

    font-weight: 700;
}


#ab-gold-poll .ab-gold-results-title strong {
    padding:
        5px
        10px;

    border-radius: 999px;

    background:
        linear-gradient(
            145deg,
            #f3e2ba,
            #ead09c
        );

    color: #72502e;

    font-size: 9px;
}


/* ==========================================================
   RESULTAT
========================================================== */

#ab-gold-poll .ab-gold-result {
    margin-bottom: 13px;
}


#ab-gold-poll .ab-gold-result-head {
    display: flex;

    justify-content: space-between;

    margin-bottom: 5px;

    color: #745842;

    font-size: 10px;
}


#ab-gold-poll .ab-gold-result-head strong {
    color: #a37534;
}


/* ==========================================================
   BARRES
========================================================== */

#ab-gold-poll .ab-gold-bar {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(126,85,52,0.10);
}


#ab-gold-poll .ab-gold-bar-fill {
    display: block;

    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #8b603e,
            #b88b48,
            #d2af68
        );

    transition:
        width
        0.8s
        cubic-bezier(.2,.8,.2,1);
}


#ab-gold-poll .ab-gold-result small {
    display: block;

    margin-top: 4px;

    color: #a18c78;

    font-size: 8px;
}


/* ==========================================================
   HIDDEN
========================================================== */

#ab-gold-poll [hidden] {
    display: none !important;
}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes abGoldResultsAppear {

    from {
        opacity: 0;

        transform:
            translateY(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    #ab-gold-poll {
        margin:
            14px
            auto;

        padding: 4px;
    }


    #ab-gold-poll .ab-gold-poll-card {
        padding:
            21px
            13px;

        border-radius: 20px;
    }


    #ab-gold-poll .ab-gold-poll-header h3 {
        max-width: 310px;

        font-size: 18px;
    }


    #ab-gold-poll .ab-gold-poll-options {
        grid-template-columns: 1fr;

        gap: 7px;
    }


    #ab-gold-poll .ab-gold-option-card {
        flex-direction: row;

        justify-content: flex-start;

        min-height: 61px;

        padding:
            8px
            40px
            8px
            11px;

        text-align: left;
    }


    #ab-gold-poll .ab-gold-option-icon {
        flex:
            0
            0
            38px;

        margin:
            0
            11px
            0
            0;
    }


    #ab-gold-poll .ab-gold-poll-submit {
        width: 100%;

        min-height: 50px;

        border-radius: 15px;
    }

}
/* ==========================================================
   ANAËLLE BEAUTY
   SONDAGE - VERSION MOBILE COMPACTE
========================================================== */

@media (max-width: 650px) {

    /* CONTENEUR GLOBAL */

    #ab-gold-poll {
        width: 100% !important;

        max-width: 390px !important;

        margin:
            8px
            auto !important;

        padding:
            2px !important;
    }


    /* CARTE PRINCIPALE */

    #ab-gold-poll .ab-gold-poll-card {
        padding:
            15px
            10px !important;

        border-radius:
            16px !important;

        box-shadow:
            0 8px 22px
            rgba(91,61,39,0.10) !important;
    }


    /* ==================================================
       HEADER
    ================================================== */

    #ab-gold-poll .ab-gold-poll-header {
        margin-bottom:
            12px !important;
    }


    #ab-gold-poll .ab-gold-poll-kicker {
        margin-bottom:
            4px !important;

        font-size:
            7px !important;

        letter-spacing:
            2.2px !important;
    }


    #ab-gold-poll .ab-gold-poll-header h3 {
        max-width:
            280px !important;

        margin:
            0
            auto
            4px !important;

        font-size:
            15px !important;

        line-height:
            1.2 !important;
    }


    #ab-gold-poll .ab-gold-poll-header p {
        font-size:
            9px !important;

        line-height:
            1.3 !important;
    }


    /* ==================================================
       OPTIONS
    ================================================== */

    #ab-gold-poll .ab-gold-poll-options {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            5px !important;
    }


    /* PETITE CARTE OPTION */

    #ab-gold-poll .ab-gold-option-card {
        min-height:
            48px !important;

        padding:
            5px
            34px
            5px
            8px !important;

        border-radius:
            12px !important;

        flex-direction:
            row !important;

        justify-content:
            flex-start !important;

        text-align:
            left !important;
    }


    /* ICONE */

    #ab-gold-poll .ab-gold-option-icon {
        width:
            29px !important;

        height:
            29px !important;

        min-width:
            29px !important;

        flex:
            0
            0
            29px !important;

        margin:
            0
            8px
            0
            0 !important;

        font-size:
            13px !important;
    }


    /* TEXTE */

    #ab-gold-poll .ab-gold-option-text {
        gap:
            0 !important;
    }


    #ab-gold-poll .ab-gold-option-text strong {
        font-size:
            10px !important;

        line-height:
            1.15 !important;
    }


    #ab-gold-poll .ab-gold-option-text small {
        margin-top:
            2px !important;

        font-size:
            8px !important;

        line-height:
            1.1 !important;
    }


    /* CHECK */

    #ab-gold-poll .ab-gold-check {
        top:
            50% !important;

        right:
            8px !important;

        width:
            16px !important;

        height:
            16px !important;

        font-size:
            8px !important;

        transform:
            translateY(-50%)
            scale(0.4) !important;
    }


    #ab-gold-poll
    .ab-gold-poll-option
    input:checked
    +
    .ab-gold-option-card
    .ab-gold-check {

        opacity:
            1 !important;

        transform:
            translateY(-50%)
            scale(1) !important;
    }


    /* ==================================================
       BOUTON VALIDER
    ================================================== */

    #ab-gold-poll .ab-gold-poll-submit {
        width:
            auto !important;

        min-width:
            170px !important;

        min-height:
            39px !important;

        margin:
            11px
            auto
            0 !important;

        padding:
            0
            17px !important;

        border-radius:
            999px !important;

        gap:
            7px !important;

        font-size:
            10px !important;
    }


    #ab-gold-poll .ab-gold-submit-arrow {
        font-size:
            14px !important;
    }


    /* ==================================================
       MESSAGE DE VALIDATION
    ================================================== */

    #ab-gold-poll .ab-gold-poll-status {
        min-height:
            13px !important;

        margin-top:
            6px !important;

        font-size:
            8px !important;

        line-height:
            1.25 !important;
    }


    /* ==================================================
       RESULTATS
    ================================================== */

    #ab-gold-poll .ab-gold-poll-results {
        margin-top:
            10px !important;

        padding:
            11px
            10px
            2px !important;

        border-radius:
            13px !important;
    }


    #ab-gold-poll .ab-gold-results-title {
        margin-bottom:
            9px !important;

        font-size:
            9px !important;
    }


    #ab-gold-poll .ab-gold-results-title strong {
        padding:
            3px
            7px !important;

        font-size:
            7px !important;
    }


    /* RESULTATS INDIVIDUELS */

    #ab-gold-poll .ab-gold-result {
        margin-bottom:
            8px !important;
    }


    #ab-gold-poll .ab-gold-result-head {
        margin-bottom:
            3px !important;

        font-size:
            8px !important;
    }


    #ab-gold-poll .ab-gold-result-head strong {
        font-size:
            8px !important;
    }


    /* BARRES */

    #ab-gold-poll .ab-gold-bar {
        height:
            4px !important;
    }


    #ab-gold-poll .ab-gold-result small {
        margin-top:
            2px !important;

        font-size:
            7px !important;
    }

}
/* ==========================================================
   ANAËLLE BEAUTY
   FORMULAIRE CONTACT
   VERSION MOBILE COMPACTE
========================================================== */

@media (max-width: 650px) {

    /* ==================================================
       CONTENEUR GENERAL
    ================================================== */

    #ab-contact-form {
        width: 100% !important;

        max-width: 100% !important;

        margin:
            8px
            auto !important;

        padding:
            3px !important;

        box-sizing: border-box !important;
    }


    /* ==================================================
       CARTE PRINCIPALE
    ================================================== */

    #ab-contact-form .ab-form-card {
        padding:
            18px
            11px !important;

        border-radius:
            18px !important;

        box-shadow:
            0 9px 25px
            rgba(80,30,40,0.08) !important;
    }


    /* ==================================================
       HEADER
    ================================================== */

    #ab-contact-form .ab-form-header {
        max-width:
            320px !important;

        margin:
            0
            auto
            18px !important;
    }


    #ab-contact-form .ab-form-kicker {
        margin-bottom:
            5px !important;

        font-size:
            8px !important;

        letter-spacing:
            2.5px !important;
    }


    #ab-contact-form .ab-form-header h2 {
        margin:
            0
            0
            6px !important;

        font-size:
            24px !important;

        line-height:
            1.1 !important;
    }


    #ab-contact-form .ab-form-header p {
        max-width:
            290px !important;

        font-size:
            11px !important;

        line-height:
            1.4 !important;
    }


    /* ==================================================
       GRID
    ================================================== */

    #ab-contact-form .ab-form-grid {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            0 !important;
    }


    /* ==================================================
       ESPACE ENTRE LES CHAMPS
    ================================================== */

    #ab-contact-form .ab-form-field {
        margin-bottom:
            13px !important;
    }


    /* ==================================================
       LABELS
    ================================================== */

    #ab-contact-form .ab-form-field label,
    #ab-contact-form .ab-client-type legend {
        margin-bottom:
            5px !important;

        font-size:
            10px !important;

        line-height:
            1.2 !important;
    }


    /* ==================================================
       INPUT / SELECT
    ================================================== */

    #ab-contact-form input[type="text"],
    #ab-contact-form input[type="email"],
    #ab-contact-form input[type="tel"],
    #ab-contact-form select {
        width:
            100% !important;

        height:
            45px !important;

        min-height:
            45px !important;

        padding:
            0
            12px !important;

        border-radius:
            12px !important;

        font-size:
            14px !important;

        line-height:
            45px !important;
    }


    /* ==================================================
       SELECT
    ================================================== */

    #ab-contact-form select {
        padding-right:
            35px !important;
    }


    #ab-contact-form .ab-select-wrapper::after {
        right:
            13px !important;

        font-size:
            16px !important;
    }


    /* ==================================================
       TEXTAREA
    ================================================== */

    #ab-contact-form textarea {
        min-height:
            105px !important;

        height:
            105px !important;

        padding:
            11px
            12px !important;

        border-radius:
            13px !important;

        font-size:
            14px !important;

        line-height:
            1.4 !important;

        resize:
            vertical !important;
    }


    /* ==================================================
       PARTICULIER / PROFESSIONNEL
    ================================================== */

    #ab-contact-form .ab-client-type {
        margin:
            0
            0
            14px !important;
    }


    #ab-contact-form .ab-client-options {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            6px !important;
    }


    #ab-contact-form .ab-client-box {
        min-height:
            43px !important;

        padding:
            5px
            8px !important;

        border-radius:
            12px !important;

        gap:
            5px !important;
    }


    #ab-contact-form .ab-client-icon {
        font-size:
            14px !important;
    }


    #ab-contact-form .ab-client-label {
        font-size:
            10px !important;
    }


    /* ==================================================
       CODE PROMO
    ================================================== */

    #ab-contact-form .ab-promo-section {
        margin:
            0
            0
            13px !important;

        padding:
            11px
            9px
            2px !important;

        border-radius:
            13px !important;
    }


    #ab-contact-form .ab-promo-row {
        display: flex !important;

        flex-direction:
            row !important;

        gap:
            6px !important;
    }


    #ab-contact-form #ab-promo-code {
        flex:
            1 !important;

        min-width:
            0 !important;

        height:
            43px !important;
    }


    #ab-contact-form .ab-promo-button {
        width:
            auto !important;

        min-width:
            83px !important;

        min-height:
            43px !important;

        height:
            43px !important;

        padding:
            0
            11px !important;

        border-radius:
            11px !important;

        font-size:
            10px !important;
    }


    #ab-contact-form .ab-promo-status {
        min-height:
            14px !important;

        margin-top:
            5px !important;

        font-size:
            9px !important;

        line-height:
            1.25 !important;
    }


    /* ==================================================
       MESSAGE / COMPTEUR
    ================================================== */

    #ab-contact-form .ab-message-footer {
        margin-top:
            4px !important;

        gap:
            8px !important;

        font-size:
            8px !important;

        line-height:
            1.2 !important;
    }


    #ab-contact-form .ab-message-footer span:first-child {
        max-width:
            72% !important;
    }


    #ab-contact-form #ab-message-counter {
        white-space:
            nowrap !important;
    }


    /* ==================================================
       BOUTON ENVOYER
    ================================================== */

    #ab-contact-form .ab-form-submit {
        margin-top:
            3px !important;
    }


    #ab-contact-form #ab-form-submit-button {
        width:
            100% !important;

        min-height:
            46px !important;

        height:
            46px !important;

        padding:
            0
            17px !important;

        border-radius:
            13px !important;

        gap:
            8px !important;

        font-size:
            11px !important;
    }


    #ab-contact-form .ab-submit-arrow {
        font-size:
            15px !important;
    }


    /* ==================================================
       MESSAGE FINAL
    ================================================== */

    #ab-contact-form .ab-form-status {
        min-height:
            14px !important;

        margin-top:
            8px !important;

        font-size:
            9px !important;

        line-height:
            1.3 !important;
    }


    /* ==================================================
       CHAMPS OBLIGATOIRES
    ================================================== */

    #ab-contact-form .ab-form-required {
        margin:
            7px
            0
            0 !important;

        font-size:
            8px !important;
    }

}

/* ==========================================================
   ANAËLLE BEAUTY
   ARRIERE-PLAN MES REALISATIONS
   MARRON / BEIGE / OR
========================================================== */

.realisations-fond {
    position: relative !important;
    isolation: isolate !important;

    width: 100% !important;

    padding: 50px 30px !important;
    margin: 25px 0 !important;

    box-sizing: border-box !important;

    border-radius: 28px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            135deg,
            #5f402d 0%,
            #8a6548 25%,
            #c8a66b 52%,
            #e8d7b8 76%,
            #f7f0e5 100%
        ) !important;

    border:
        1px solid
        rgba(199, 160, 89, 0.55) !important;

    box-shadow:
        0 20px 50px
        rgba(66, 42, 26, 0.20) !important;
}


/* ==========================================================
   HALO DORE
========================================================== */

.realisations-fond::before {
    content: "" !important;

    position: absolute !important;

    top: -150px !important;
    right: -130px !important;

    width: 380px !important;
    height: 380px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(255, 220, 145, 0.60) 0%,
            rgba(210, 166, 88, 0.25) 38%,
            transparent 72%
        ) !important;

    z-index: -1 !important;

    pointer-events: none !important;
}


/* ==========================================================
   HALO MARRON
========================================================== */

.realisations-fond::after {
    content: "" !important;

    position: absolute !important;

    bottom: -180px !important;
    left: -150px !important;

    width: 420px !important;
    height: 420px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(77, 47, 29, 0.35) 0%,
            rgba(77, 47, 29, 0.12) 45%,
            transparent 72%
        ) !important;

    z-index: -1 !important;

    pointer-events: none !important;
}


/* ==========================================================
   CONTENU AU-DESSUS DU FOND
========================================================== */

.realisations-fond > * {
    position: relative !important;

    z-index: 2 !important;
}


/* ==========================================================
   SI WORDPRESS APPLIQUE UN FOND SUR LES BLOCS INTERNES
========================================================== */

.realisations-fond > .wp-block-group,
.realisations-fond > .wp-block-columns,
.realisations-fond > .wp-block-gallery {
    background-color: transparent !important;
}


/* ==========================================================
   TITRE
========================================================== */

.realisations-fond h2 {
    color: #fff7e8 !important;

    text-shadow:
        0 2px 8px
        rgba(53, 32, 20, 0.30) !important;
}


/* ==========================================================
   TEXTE
========================================================== */

.realisations-fond p {
    color: #fffaf1 !important;
}


/* ==========================================================
   IMAGES
========================================================== */

.realisations-fond img {
    border-radius: 13px !important;

    box-shadow:
        0 8px 22px
        rgba(50, 30, 19, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


@media (min-width: 651px) {

    .realisations-fond img:hover {
        transform:
            translateY(-3px)
            scale(1.012);

        box-shadow:
            0 13px 28px
            rgba(50, 30, 19, 0.28);
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    .realisations-fond {
        padding:
            25px
            10px !important;

        margin:
            10px
            3px !important;

        border-radius:
            19px !important;

        background:
            linear-gradient(
                145deg,
                #694830 0%,
                #a17a50 42%,
                #d2b47a 72%,
                #f2e5ce 100%
            ) !important;
    }


    .realisations-fond::before {
        width: 230px !important;
        height: 230px !important;

        top: -100px !important;
        right: -90px !important;
    }


    .realisations-fond::after {
        width: 250px !important;
        height: 250px !important;

        bottom: -120px !important;
        left: -100px !important;
    }


    .realisations-fond h2 {
        font-size: 24px !important;
    }


    .realisations-fond p {
        font-size: 11px !important;

        line-height: 1.45 !important;
    }

}