/* ================================
   STYLES TARIFS - LANDING PAGE
   ================================ */

/* ---------- HERO / OFFRE ---------- */

#top.hero {
    padding-top: clamp(2.5rem, 6vw, 4rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

#top .chip {
    margin-bottom: .8rem;
}

#top h1 {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Ancien prix barré + nouveau prix mis en avant */
#top .old-price {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(180, 0, 0, 0.75);
    color: var(--soft-red-2);
    font-weight: 700;
    font-size: 1.3rem;
    margin-left: .35rem;
    margin-right: .25rem;
}

#top .new-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .9rem;
    border-radius: 999px;
    margin-left: .2rem;
    font-size: 1.2rem;
    font-weight: 700;
    background: #CFF7CF;
    border: 1px solid #7ECF7E;
    color: #1F5E1F;
    box-shadow: 0 6px 20px rgba(62, 171, 81, 0.25);
}

/* Badges sous le hero */
.landing-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.4rem;
}

.landing-badges .badge {
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(76, 73, 212, .16);
    background: rgba(76, 73, 212, .03);
    font-size: .9rem;
    font-weight: 500;
    color: var(--warm-gray);
}

/* ---------- SECTION "LA VÉRITÉ" ---------- */

#verite {
    background: rgba(76, 73, 212, 0.02);
    border-top: 1px solid rgba(76, 73, 212, 0.12);
    border-bottom: 1px solid rgba(76, 73, 212, 0.12);
}

#verite .card {
    text-align: left;
}

.title-bad {
    color: var(--red);
    text-align: left;
    margin-bottom: .75rem;
}

.title-good {
    color: rgb(25, 140, 45);
    text-align: left;
    margin-bottom: .75rem;
}

/* on resserre un peu la liste de la vérité */
#verite .list-bad li,
#verite .list-good li {
    padding-left: 0;
    padding-right: 0;
}

/* ---------- EXEMPLES ---------- */

#exemples .card {
    text-align: left;
}

#exemples .work {
    margin-bottom: .75rem;
}

#exemples .work-caption {
    margin-top: .45rem;
}

#exemples .work img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px; /* optionnel */
}


/* ---------- POURQUOI C'EST POSSIBLE ---------- */

#pourquoi-possible .card p {
    text-align: left;
}

/* ---------- TARIF UNIQUE ---------- */

#tarif-landing {
    background: rgba(76, 73, 212, 0.02);
    border-top: 1px solid rgba(76, 73, 212, 0.12);
}

#tarif-landing .card {
    max-width: 620px;
    margin: 0 auto;
}

#tarif-landing h3 {
    font-size: 2rem;
    margin-bottom: .5rem;
}

#tarif-landing .section-lead {
    margin-bottom: 1.2rem;
}

#tarif-landing .list-good li {
    padding-left: 0;
    padding-right: 0;
}

#tarif-landing .section-lead {
    margin-bottom: 1.2rem;
}

#tarif-landing .list-good {
    margin-top: 1.4rem;
    margin-left: 28%;
}

#tarif-landing h3 {
    font-size: 2.6rem;
    /* augmente ici */
    font-weight: 700;
    color: rgb(25, 140, 45);
}
/* =========================== */
/* SECTION FORMULAIRE          */
/* =========================== */

/* fond violet pleine largeur */
section#inscription {
    background: linear-gradient(135deg, #4C49D4 0%, #6A67E8 40%, #2E2B9F 100%) !important;
    color: #fff;
    padding: clamp(2rem, 5vw, 4rem) 0;
}

/* textes en blanc */
section#inscription h2,
section#inscription p,
section#inscription label {
    color: #fff;
}

/* carte CRÈME à l’intérieur */
section#inscription .card {
    background: rgba(247, 245, 240, 0.96);
    /* même crème que le reste du site */
    border: 1px solid rgba(76, 73, 212, 0.12);
    border-radius: 18px;
    padding: 1.4rem;
    text-align: left;
    box-shadow: var(--shadow-subtle);
}

section#inscription .card h2,
section#inscription .card h3,
section#inscription .card p,
section#inscription .card label {
    color: var(--warm-gray) !important;
}

/* champs du formulaire */
section#inscription .input {
    margin-bottom: 0.3rem;
}

section#inscription input,
section#inscription textarea {
    background: rgba(255, 255, 255, 0.9);
    color: #1F1F1F;
}

section#inscription input::placeholder,
section#inscription textarea::placeholder {
    color: #777;
}

/* messages d’erreur */
#inscription .field-error {
    margin-top: .25rem;
    font-size: .85rem;
    color: var(--soft-red);
    min-height: 1em;
}

/* bordure rouge si erreur */
#inscription .input input.error {
    border: 1px solid var(--soft-red);
}

/* FORCE la mise en page du formulaire d'inscription */
#inscription #landing-form {
    display: block !important;
    /* au cas où il était en flex ou grid */
    gap: 0 !important;
    /* annule tout espace entre les enfants */
}

/* On supprime presque toutes les marges autour des champs */
#inscription #landing-form .input {
    margin: 0 0 0.2rem 0 !important;
    /* marge basse très légère entre les blocs */
    padding: 0 !important;
}

/* On neutralise les marges internes des éléments du bloc */
#inscription #landing-form .input>label,
#inscription #landing-form .input>input,
#inscription #landing-form .input>textarea,
#inscription #landing-form .input>.field-error {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* On réduit aussi le “volume” des erreurs pour qu’elles ne poussent pas tout vers le bas */
#inscription #landing-form .field-error {
    font-size: 0.8rem !important;
    min-height: 0.5em !important;
    margin-top: 0.1rem !important;
}

/* ---------- AVIS SECTION ---------- */

#avis .card p {
    text-align: center;
}

/* masque rectangle pour cacher "Free Google Reviews widget" */
.avis-mask {
    position: relative;
    width: 100%;
    height: 60px;
    /* ajuste si nécessaire */
    background: var(--bg-main);
    /* même couleur que ton fond */
    margin-top: -40px;
    /* chevauche le footer du widget */
    z-index: 10;
    pointer-events: none;
    /* important : ne bloque pas le clic */
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 720px) {
    #top h1 {
        font-size: clamp(1.9rem, 6vw, 2.3rem);
    }

    #top .old-price {
        display: inline-block;
        margin-top: .25rem;
    }

    #top .new-price {
        margin-top: .25rem;
    }

    .landing-badges {
        gap: .4rem;
    }

    .landing-badges .badge {
        font-size: .85rem;
    }

    #verite .card,
    #exemples .card,
    #pourquoi-possible .card,
    #tarif-landing .card,
    #inscription .card {
        text-align: left;
    }
}




/* ===============================
   BUMP OPTIONS — VERSION SIMPLE
   ALIGNÉE ET STABLE
   =============================== */

.bump-option {
    padding: 1.6rem;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: 0.25s ease;
    cursor: pointer;
    text-align: left;
}

.bump-option:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Header = checkbox + titre sur UNE ligne */
.bump-header {
    display: flex;
    align-items: center;
    /* ✔ case alignée verticalement avec le texte */
    gap: 0.6rem;
}

/* Checkbox moderne mais simple */
.bump-check {
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--primary);
    cursor: pointer;
    background: white;
    position: relative;
    transition: 0.2s ease;
}

.bump-check:checked {
    background: var(--primary);
    border-color: var(--primary);
}

/* Checkmark */
.bump-check:checked::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Titre de l’option */
.bump-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--warm-gray);
    line-height: 1;
    /* ✔ garantit que le texte reste sur UNE ligne */
    white-space: nowrap;
    /* ✔ NE PAS PASSER à la ligne */
}

/* Prix juste en dessous */
.bump-price {
    margin-top: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
}

/* Liste des avantages */
.bump-option ul {
    margin-top: 1rem;
    padding-left: 0;
}

/* Highlight si coché */
.bump-option:has(.bump-check:checked) {
    border-color: var(--primary);
    background: rgba(125, 61, 255, 0.05);
    box-shadow: 0 4px 18px rgba(125, 61, 255, 0.18);
}

/* ===============================
   BUMP ROW ALIGNÉ SUR UNE LIGNE
   =============================== */

/* Carte bump */
.bump-option {
    padding: 1.4rem 1.6rem;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: 0.25s ease;
    cursor: pointer;
}

.bump-option:hover {
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06);
}

/* LIGNE PRINCIPALE (checkbox + titre) ---- prix à droite */
.bump-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ✔ aligne case + texte + prix parfaitement */
    width: 100%;
}

/* Colonne gauche = case + titre */
.bump-row .left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* Checkbox stylisée */
.bump-check {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--primary);
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: 0.2s ease;
}

.bump-check:checked {
    background: var(--primary);
    border-color: var(--primary);
}

.bump-check:checked::after {
    content: "";
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Titre */
.bump-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--warm-gray);
    white-space: nowrap;
    /* ✔ reste sur une seule ligne */
}

/* PRIX à droite, aligné verticalement */
.bump-price {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary);
    white-space: nowrap;
}

/* Highlight si bump coché */
.bump-option:has(.bump-check:checked) {
    border-color: var(--primary);
    background: rgba(125, 61, 255, 0.05);
    box-shadow: 0 4px 22px rgba(125, 61, 255, 0.18);
}

/* Responsive : prix passe en dessous */
@media (max-width: 520px) {
    .bump-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .bump-price {
        margin-left: 2rem;
        /* petit alignement sous le texte */
    }
}

@media (max-width: 520px) {
    .bump-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .bump-price {
        margin-left: 2rem;
        /* comme avant si tu l'as gardé */
    }

    /* ✅ fix du texte qui déborde */
    .bump-title {
        white-space: normal;
        /* permet à "Google My Business" de revenir à la ligne */
    }
}


/* Espace entre les bumps et le bouton */
#options-bumps .validation-cta {
    margin-top: 2.4rem;
    /* augmente l’espace */
}

/* Bouton d’abonnement stylé */
#subscribeBtn {
    display: inline-block;
    padding: 1rem 3rem;
    font-size: 1.15rem;
    border-radius: 40px;
    width: auto;
    min-width: 280px;
    /* largeur agréable */
    max-width: 380px;
    text-align: center;
}

/* Centrer le bouton */
.validation-cta {
    text-align: center;
}


/* ANIMATION MOYENNE DU BOUTON "JE M'ABONNE" – ENTRE DEUX */

#subscribeBtn {
    position: relative;
    z-index: 1;
    /* on garde tes padding, font-size, etc. définis plus haut */
    animation: pulseMedium 1.9s ease-in-out infinite;
}

@keyframes pulseMedium {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 73, 212, 0);
    }

    25% {
        transform: scale(1.03);
        box-shadow: 0 0 16px 6px rgba(76, 73, 212, 0.35);
    }

    55% {
        transform: scale(1.055);
        box-shadow: 0 0 24px 10px rgba(76, 73, 212, 0.45);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 73, 212, 0);
    }
}


/* ===============================
   SECTION STRUCTURE DU SITE
   =============================== */

#site-structure {
    margin-top: 2.8rem;
}

#site-structure .site-structure-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.9rem;
}

/* Barre d’adresse style navigateur */
.site-structure-browser {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
    max-width: 460px;
    margin-bottom: 1.3rem;
}

.browser-dots {
    display: flex;
    gap: 0.3rem;
}

.browser-dots span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #FFBD2E;
}

.browser-dots span:nth-child(1) {
    background: #FF5F57;
}

.browser-dots span:nth-child(2) {
    background: #FFBD2E;
}

.browser-dots span:nth-child(3) {
    background: #28C840;
}

.browser-url {
    flex: 1;
    font-size: 0.9rem;
    color: #555;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
}

/* Grand cadre contenant les blocs */
.site-structure-wrapper {
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    border: 1px solid rgba(76, 73, 212, 0.18);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow-subtle);
}

/* Chaque bloc de section */
.structure-block {
    border-radius: 14px;
    padding: 0.7rem 0.9rem;
    border: 1px dashed rgba(76, 73, 212, 0.22);
    background: rgba(246, 248, 255, 0.75);
    margin-bottom: 0.7rem;
}

.structure-block:last-child {
    margin-bottom: 0;
}

.structure-block-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.structure-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

/* Couleurs des petites pastilles */
.color-header {
    background: #2D9CDB;
}

/* bleu */
.color-presentation {
    background: #27AE60;
}

/* vert */
.color-prestations {
    background: #F2C94C;
}

/* jaune */
.color-tarifs {
    background: #9B51E0;
}

/* violet */
.color-avis {
    background: #F2994A;
}

/* orange */
.color-formulaire {
    background: #EB5757;
}

/* rouge */
.color-legal {
    background: #4F4F4F;
}

/* gris foncé */

.structure-block-title {
    font-weight: 600;
    color: var(--warm-gray);
}

/* Liste à puces à l’intérieur de chaque bloc */
.structure-block ul {
    list-style: disc;
    padding-left: 1.2rem;
    margin: 0;
    font-size: 0.95rem;
    color: #444;
}

.structure-block li+li {
    margin-top: 0.1rem;
}

/* Note en dessous */
.site-structure-note {
    margin-top: 0.9rem;
    font-size: 0.95rem;
    color: var(--warm-gray);
}

/* Responsive */
@media (max-width: 640px) {
    .site-structure-browser {
        max-width: 100%;
    }
}


/* Centre parfaitement la barre d'adresse */
.site-structure-browser {
    margin-left: auto;
    margin-right: auto;
}


/* ============================
   PAGE CAMPAGNE ADS
   ============================ */
/* ============================================
   PAGE CAMPAGNE GOOGLE ADS - MENEZIA
   ============================================ */

/* ------- SECTION OFFRES ------- */

#ads-offers {
    padding-top: 1.2rem;
    padding-bottom: 1.4rem;
}

#ads-offers .section-title {
    margin-bottom: 0.6rem;
}


.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.4rem;
    margin-top: 1.2rem;
}

/* Carte offre */
.offer-card {
    text-align: left;
    padding: 1.5rem 1.4rem 1.6rem;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Etiquette en haut de la carte */
.offer-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.04);
    color: var(--warm-gray);
    margin-bottom: 0.2rem;
}

.offer-label-highlight {
    background: rgba(76, 73, 212, 0.08);
    color: var(--primary);
}

.offer-card h3 {
    margin-bottom: 0.15rem;
}

.offer-price {
    margin-bottom: 0.45rem;
}

/* Liste de points résumés */
.offer-points {
    flex: 1;
    margin-top: 0.1rem;
}

.offer-points p {
    margin: 0 0 0.3rem 0;
    font-size: 0.95rem;
}

/* Bouton dans la carte */
.offer-card .offer-btn {
    width: 100%;
    margin-top: 0.6rem;
}

/* Carte sélectionnée (après clic sur l’offre) */
.offer-card.offer-selected {
    border-color: var(--primary);
    box-shadow: 0 10px 32px rgba(76, 73, 212, 0.16);
    background: linear-gradient(135deg, rgba(76, 73, 212, 0.04), rgba(106, 103, 232, 0.03));
}

/* ------- CARTE GARANTIE ------- */

#ads-guarantee {
    margin-top: 1.6rem;
    margin-bottom: 1.4rem;
}

.guarantee-card {
    max-width: 780px;
    margin: 0 auto;
    text-align: left;
    padding: 1.4rem 1.5rem 1.5rem;
    border-radius: 22px;
    border: 1px solid rgba(76, 73, 212, 0.25);
    background: radial-gradient(circle at top left,
            rgba(76, 73, 212, 0.12),
            rgba(255, 255, 255, 0.95));
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* petite étiquette en haut de la garantie */
.guarantee-card::before {
    content: "Garantie Menezia";
    position: absolute;
    top: -0.9rem;
    left: 1.5rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(76, 73, 212, 0.25);
    color: var(--primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.guarantee-card h2 {
    margin-bottom: 0.4rem;
}

.guarantee-card p {
    margin-bottom: 0.25rem;
}

.guarantee-note {
    font-size: 0.95rem;
    color: var(--warm-gray);
}

/* ------- FORMULAIRE ------- */

#ads-form-section {
    margin-top: 1.8rem;
    margin-bottom: 2.4rem;
}

.ads-form-card {
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}

.ads-form-header h2 {
    margin-bottom: 0.3rem;
}

.ads-form-header p {
    margin-bottom: 0.25rem;
}

.selected-offer-info {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: var(--warm-gray);
}

.selected-offer-info span {
    font-weight: 600;
    color: var(--primary);
}

/* Grille des champs */
.ads-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
    margin-top: 1rem;
}

.ads-form-grid .input-full {
    grid-column: 1 / -1;
}

/* Label bloc (Google Ads oui/non) */
.label-block {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

/* Radio inline */
.radio-inline {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.radio-inline label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
}

/* Garantie à cocher */
.guarantee-input {
    margin-top: 0.9rem;
}

.checkbox-guarantee {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.checkbox-guarantee input[type="checkbox"] {
    margin-top: 0.2rem;
}

/* CTA du formulaire */
.form-cta {
    margin-top: 1.2rem;
    text-align: center;
}

.form-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2.6rem;
    border-radius: 999px;
    font-size: 1.03rem;
    font-weight: 600;
    text-align: center;
    width: auto;
    min-width: 250px;
    /* pulsation plus douce */
    animation: pulseSoft 2.4s ease-in-out infinite;
}

.form-cta .small {
    margin-top: 0.5rem;
}

/* Animation pulsation douce du CTA (entre-deux) */
@keyframes pulseSoft {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 73, 212, 0);
    }

    40% {
        transform: scale(1.018);
        box-shadow: 0 0 16px 6px rgba(76, 73, 212, 0.28);
    }

    70% {
        transform: scale(1.025);
        box-shadow: 0 0 20px 8px rgba(76, 73, 212, 0.32);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 73, 212, 0);
    }
}

/* ------- RESPONSIVE ------- */

@media (max-width: 720px) {
    .offers-grid {
        gap: 1.1rem;
    }

    .offer-card {
        padding: 1.3rem 1.1rem 1.4rem;
    }

    .offer-card .offer-btn {
        width: 100%;
    }

    .guarantee-card {
        padding: 1.2rem 1.1rem 1.3rem;
    }

    .guarantee-card::before {
        left: 1.1rem;
    }

    .ads-form-grid {
        grid-template-columns: 1fr;
    }

    #ads-form-section {
        margin-top: 1.4rem;
        margin-bottom: 2rem;
    }
}

/* ============================================
   AJUSTEMENTS DESIGN CAMPAGNE ADS
   (or + espaces + garantie)
   ============================================ */

/* --- Couleur or réutilisable --- */
:root {
    --gold: #c6a664;
}

/* -------- Espaces entre sections (croix oranges) -------- */

/* texte "Sans engagement" plus rapproché de la garantie */
#ads-offers .small.center {
    margin-top: 0.4rem !important;
}

/* rapproche garantie des offres et du formulaire */
#ads-guarantee {
    margin-top: 0.5rem !important;
    margin-bottom: 0.7rem !important;
}

/* rapproche le formulaire de la garantie */
#ads-form-section {
    margin-top: 0.9rem !important;
}

/* -------- Offres : accents dorés & titres -------- */

/* titres des offres avec petit soulignement doré */
#ads-offers .offer-card h3 {
    position: relative;
    display: inline-block;
}

#ads-offers .offer-card h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.3rem;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), #c6a664);
}

/* montants en doré */
#ads-offers .offer-price strong {
    color: var(--gold);
}

/* étiquettes "Niveau / Le plus choisi" plus premium */
#ads-offers .offer-label {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

#ads-offers .offer-label-highlight {
    background: linear-gradient(135deg, rgba(246, 184, 0, 0.14), rgba(76, 73, 212, 0.08));
    border-color: rgba(246, 184, 0, 0.55);
}

/* -------- Carte garantie : or + style différencié -------- */

#ads-guarantee .guarantee-card {
    background: radial-gradient(circle at top left,
            rgba(246, 184, 0, 0.18),
            rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(198, 166, 100, 0.7);
}

/* étiquette "Garantie Menezia" en doré */
#ads-guarantee .guarantee-card::before {
    background: #fff7dd;
    border-color: rgba(198, 166, 100, 0.9);
    color: var(--gold);
}

/* mots importants de la garantie en doré */
#ads-guarantee strong {
    color: var(--gold);
}

/* petite phrase en dessous un peu plus soft */
#ads-guarantee .guarantee-note {
    color: #6b6b6b;
}

/* -------- CTA formulaire : pulsation encore plus soft -------- */

.form-cta .btn-primary {
    animation: pulseSoft 2.8s ease-in-out infinite;
}

@keyframes pulseSoft {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 73, 212, 0);
    }

    45% {
        transform: scale(1.015);
        box-shadow: 0 0 14px 5px rgba(76, 73, 212, 0.24);
    }

    80% {
        transform: scale(1.022);
        box-shadow: 0 0 18px 7px rgba(76, 73, 212, 0.28);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 73, 212, 0);
    }
}

.offer-card .offer-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ============================================
   PAGE TARIFS - INDEX
   ============================================ */

#tarifs-services {
    margin-top: 1.8rem;
    margin-bottom: 2.6rem;
}

/* Grille des cartes */
.tarifs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
    margin-top: 1.6rem;
}

/* Carte service */
.tarif-card {
    padding: 1.6rem 1.4rem 1.8rem;
    border-radius: 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* alternance légère de fond pour rythme visuel */
.tarif-card:nth-child(odd) {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.96),
            rgba(76, 73, 212, 0.02));
}

.tarif-card:nth-child(even) {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.96),
            rgba(198, 166, 100, 0.05));
}

/* Bulle image */
.tarif-img-wrapper {
    margin-bottom: 0.4rem;
}

.tarif-bubble {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 20%,
            rgba(255, 255, 255, 1),
            rgba(76, 73, 212, 0.16));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}

.tarif-bubble img {
    width: 110%;
    height: 110%;
    object-fit: cover;
}

/* Tag au-dessus du titre */
.tarif-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.04);
    color: var(--warm-gray);
    margin-top: 0.1rem;
}

.tarif-tag-highlight {
    background: linear-gradient(135deg,
            rgba(246, 184, 0, 0.20),
            rgba(76, 73, 212, 0.10));
}

/* Titre avec petite barre or dessous */
.tarif-card h3 {
    margin-top: 0.25rem;
    margin-bottom: 0.2rem;
    position: relative;
    display: inline-block;
}

.tarif-card h3::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.32rem;
    width: 48px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), #ffe39b);
}

/* Texte */
.tarif-text {
    margin-top: 0.6rem;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    color: var(--warm-gray);
}

/* Prix */
.tarif-price {
    margin-bottom: 0.7rem;
    font-size: 0.95rem;
}

.tarif-price span {
    color: var(--gold);
    font-weight: 600;
}

/* Bouton */
.tarif-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    text-align: center;
}

/* Responsive */
@media (max-width: 720px) {
    #tarifs-services {
        margin-top: 1.4rem;
    }

    .tarifs-grid {
        gap: 1.2rem;
    }

    .tarif-card {
        padding: 1.4rem 1.2rem 1.6rem;
    }

    .tarif-btn {
        width: 100%;
    }
}