/* =========================================================================
   BODEZIA — PAGE D'ACCUEIL
   -------------------------------------------------------------------------
   Réécriture complète. Le HTML n'a pas changé : tous les sélecteurs sont
   identiques à la version précédente, aucune classe n'a été ajoutée ni
   supprimée.

   Ce qui change
     - Une échelle de 6 tailles au lieu de 16 valeurs dispersées
     - Des gris conformes AA (4,5:1 minimum) au lieu de 2,8:1
     - Un rythme vertical unique pour les 4 sections
     - Une seule largeur de conteneur pour étapes / bénéfices / CTA final
     - Les règles FAQ passent enfin devant le thème

   Ce qui ne change pas
     - Le violet de marque #7441d4 et le dégradé du CTA final
     - Toute la partie HERO et le formulaire de devis, repris tels quels
       en fin de fichier (ils sont affinés par responsive-mobile.css)

   ATTENTION : responsive-mobile.css est chargé APRÈS ce fichier et
   surcharge volontairement le hero et la carte de devis sous 992px.
   ========================================================================= */


/* =========================================================================
   TOKENS
   ========================================================================= */

:root {

    /* Échelle typographique — 6 paliers, base 16px */
    --home-fs-eyebrow: 0.75rem;    /* 12px — sur-titres en capitales */
    --home-fs-small: 0.875rem;     /* 14px — mentions secondaires     */
    --home-fs-body: 0.9375rem;     /* 15px — texte courant            */
    --home-fs-lead: 1rem;          /* 16px — chapô sous les titres    */
    --home-fs-title: 1.0625rem;    /* 17px — titres de cartes         */
    --home-fs-heading: 1.75rem;    /* 28px — titres de section        */

    /* Couleurs de texte — toutes vérifiées à 4,5:1 minimum */
    --home-c-heading: #2b3034;     /* 12,9:1 sur blanc */
    --home-c-body: #5c6670;        /*  5,8:1 sur blanc */
    --home-c-accent: #7441d4;      /*  6,0:1 sur blanc */
    --home-c-accent-dark: #6737c7;

    /* Surfaces */
    --home-c-surface: #fafbfc;
    --home-c-surface-alt: #f7f8fb;
    --home-c-surface-accent: #f3eefd;
    --home-c-border: #e6e9ee;

    /* Rythme vertical des sections */
    --home-section-padding: 72px;

    /* Largeur commune étapes / bénéfices / CTA final */
    --home-container: 1180px;
}


/* =========================================================================
   COMMUN
   ========================================================================= */

.home-process-section .container,
.home-benefits-section .container,
.home-final-cta .container {
    max-width: var(--home-container);
}

.home-section-heading {
    max-width: 700px;
    margin: 0 auto 40px;
}

.home-section-eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color: var(--home-c-accent);

    font-size: var(--home-fs-eyebrow);
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-section-heading h2,
.home-benefits-intro h2 {
    margin: 0;

    color: var(--home-c-heading);

    font-size: var(--home-fs-heading);
    font-weight: 600;

    line-height: 1.25;
    letter-spacing: -0.01em;
}

.home-section-heading p,
.home-benefits-intro > p {
    margin: 12px 0 0;

    color: var(--home-c-body);

    font-size: var(--home-fs-lead);
    line-height: 1.6;
}


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

.home-process-section {
    padding: var(--home-section-padding) 0;

    background: #fff;
}

.home-process-grid {
    display: grid;

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

    gap: 20px;
}

.home-process-item {
    position: relative;

    padding: 26px 24px;

    background: var(--home-c-surface);

    border: 1px solid var(--home-c-border);
    border-radius: 16px;
}

/* Le numéro devient lisible : il indique une étape, il doit se voir */
.home-process-number {
    position: absolute;

    top: 18px;
    right: 20px;

    color: var(--home-c-accent);

    font-size: var(--home-fs-eyebrow);
    font-weight: 700;

    letter-spacing: 0.04em;
}

.home-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin-bottom: 20px;

    color: var(--home-c-accent);

    background: var(--home-c-surface-accent);

    border-radius: 12px;

    font-size: 1.125rem;
}

.home-process-item h3 {
    margin: 0 0 8px;

    color: var(--home-c-heading);

    font-size: var(--home-fs-title);
    font-weight: 600;

    line-height: 1.35;
}

.home-process-item p {
    margin: 0;

    color: var(--home-c-body);

    font-size: var(--home-fs-body);
    line-height: 1.6;
}

.home-process-action {
    margin-top: 34px;
}

.home-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 12px 24px;

    color: #fff;

    background: var(--home-c-accent);

    border-radius: 999px;

    font-size: var(--home-fs-body);
    font-weight: 600;
}

.home-primary-action:hover,
.home-primary-action:focus {
    color: #fff;

    background: var(--home-c-accent-dark);
}


/* =========================================================================
   POURQUOI BODEZIA
   ========================================================================= */

.home-benefits-section {
    padding: var(--home-section-padding) 0;

    background: var(--home-c-surface-alt);
}

.home-benefits-intro {
    max-width: 460px;
}

.home-benefits-highlight {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 26px;
    padding: 16px;

    background: #fff;

    border: 1px solid #e9e2f5;
    border-radius: 14px;
}

.home-benefits-highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    color: var(--home-c-accent);

    background: var(--home-c-surface-accent);

    border-radius: 10px;
}

.home-benefits-highlight span {
    display: block;

    color: var(--home-c-body);

    font-size: var(--home-fs-eyebrow);
    font-weight: 600;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-benefits-highlight strong {
    display: block;

    margin-top: 3px;

    color: var(--home-c-heading);

    font-size: var(--home-fs-body);
    font-weight: 600;
}

.home-benefits-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.home-benefit-card {
    display: flex;

    gap: 14px;

    padding: 20px;

    background: #fff;

    border: 1px solid var(--home-c-border);
    border-radius: 14px;
}

.home-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    color: var(--home-c-accent);

    background: var(--home-c-surface-accent);

    border-radius: 10px;
}

.home-benefit-card h3 {
    margin: 0 0 6px;

    color: var(--home-c-heading);

    font-size: var(--home-fs-title);
    font-weight: 600;

    line-height: 1.35;
}

.home-benefit-card p {
    margin: 0;

    color: var(--home-c-body);

    font-size: var(--home-fs-body);
    line-height: 1.6;
}


/* =========================================================================
   FAQ
   Le thème gagnait sur ces règles : la question ouverte s'affichait en
   violet plein et les questions fermées en gris. On reprend la main.
   ========================================================================= */

.home-faq-section {
    padding: var(--home-section-padding) 0;

    background: #fff;
}

.home-faq-wrapper {
    max-width: 900px;

    margin: 0 auto;
}

.home-faq-accordion {
    overflow: hidden;

    border: 1px solid var(--home-c-border);
    border-radius: 14px;
}

.home-faq-accordion .accordion-item {
    background: #fff;

    border: 0;
    border-bottom: 1px solid var(--home-c-border);
    border-radius: 0;
}

.home-faq-accordion .accordion-item:last-child {
    border-bottom: 0;
}

.home-faq-accordion .accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    min-height: 56px;
    padding: 16px 20px;

    color: var(--home-c-heading) !important;

    background: #fff !important;

    border-radius: 0;
    box-shadow: none !important;

    font-size: var(--home-fs-body);
    font-weight: 600;

    line-height: 1.4;
    text-align: left;
}

.home-faq-accordion .accordion-button:not(.collapsed) {
    color: var(--home-c-accent) !important;

    background: #f7f3ff !important;
}

.home-faq-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--home-c-accent);
    outline-offset: -2px;
}

/* Le thème plaçait le chevron en absolu à gauche : il chevauchait le
   texte dès que le padding gauche changeait. On le remet dans le flux,
   poussé à droite par margin-left auto. */

.home-faq-accordion .accordion-button::after {
    position: static !important;

    order: 2;
    flex: 0 0 auto;

    width: 1.1rem;
    height: 1.1rem;

    margin: 0 0 0 auto !important;

    background-size: 1.1rem;
    background-position: center;
    background-repeat: no-repeat;
}

.home-faq-accordion .accordion-button:not(.collapsed)::after {
    filter: none;
}

.home-faq-accordion .accordion-body {
    padding: 0 20px 18px;

    color: var(--home-c-body);

    font-size: var(--home-fs-body);
    line-height: 1.65;
}

.home-faq-more {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 44px;

    color: var(--home-c-accent);

    font-size: var(--home-fs-body);
    font-weight: 600;

    text-decoration: none;
}

.home-faq-more:hover {
    color: var(--home-c-accent-dark);

    text-decoration: underline;
}


/* =========================================================================
   CTA FINAL
   ========================================================================= */

.home-final-cta {
    padding: 0 0 var(--home-section-padding);

    background: var(--home-c-surface-alt);
}

.home-final-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;

    padding: 34px 38px;

    color: #fff;

    background:
            linear-gradient(
                    135deg,
                    #5830b6,
                    #7441d4
            );

    border-radius: 18px;

    box-shadow:
            0 14px 34px rgba(81, 48, 148, 0.18);
}

.home-final-cta-eyebrow {
    display: block;

    margin-bottom: 8px;

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

    font-size: var(--home-fs-eyebrow);
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-final-cta-card h2 {
    margin: 0;

    color: #fff;

    font-size: 1.5rem;
    font-weight: 600;

    line-height: 1.3;
}

.home-final-cta-card p {
    margin: 9px 0 0;

    color: rgba(255, 255, 255, 0.85);

    font-size: var(--home-fs-body);
    line-height: 1.55;
}

.home-final-cta-actions {
    display: flex;
    align-items: center;

    gap: 12px;

    flex: 0 0 auto;
}

.home-final-cta-primary,
.home-final-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 12px 22px;

    border-radius: 999px;

    font-size: var(--home-fs-body);
    font-weight: 600;

    white-space: nowrap;
}

.home-final-cta-primary {
    color: var(--home-c-accent);

    background: #fff;

    border: 1px solid #fff;
}

.home-final-cta-primary:hover {
    color: var(--home-c-accent-dark);

    background: #fafafa;
}

.home-final-cta-secondary {
    color: #fff;

    background: transparent;

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

.home-final-cta-secondary:hover {
    color: #fff;

    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
}


/* =========================================================================
   TABLETTE  (< 992px)
   ========================================================================= */

@media (max-width: 991.98px) {

    :root {
        --home-section-padding: 56px;
    }

    .home-process-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .home-benefits-grid {
        margin-top: 12px;
    }

    .home-benefits-intro {
        max-width: none;
    }
}


/* =========================================================================
   MOBILE  (< 576px)
   Le texte courant NE descend PAS sous 15px : c'est le plancher de
   lisibilité. Ce sont les titres et les espacements qui se réduisent.
   ========================================================================= */

@media (max-width: 575.98px) {

    :root {
        --home-section-padding: 48px;
        --home-fs-heading: 1.5rem;   /* 24px */
        --home-fs-lead: 0.9375rem;   /* 15px */
    }

    .home-process-grid,
    .home-benefits-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .home-section-heading {
        margin-bottom: 28px;
    }

    .home-process-item {
        padding: 22px 20px;
    }

    .home-process-number {
        top: 16px;
        right: 18px;
    }

    .home-process-icon {
        width: 42px;
        height: 42px;

        margin-bottom: 16px;
    }

    .home-process-action {
        margin-top: 26px;
    }

    .home-primary-action {
        width: 100%;
    }

    .home-benefits-highlight {
        margin-top: 22px;
    }

    .home-faq-accordion .accordion-button {
        padding: 14px 16px;
    }

    .home-faq-accordion .accordion-body {
        padding: 0 16px 16px;
    }

    .home-final-cta-card {
        align-items: stretch;
        flex-direction: column;

        gap: 22px;

        padding: 26px 22px;
    }

    .home-final-cta-card h2 {
        font-size: 1.3rem;
    }

    .home-final-cta-actions {
        align-items: stretch;
        flex-direction: column;

        gap: 10px;
    }
}


/* =========================================================================
   GRANDS ÉCRANS  (>= 1600px)
   Un seul palier au-dessus, appliqué aux tokens : rien à surcharger
   élément par élément.
   ========================================================================= */

@media (min-width: 1600px) {

    :root {
        --home-fs-body: 1rem;        /* 16px */
        --home-fs-lead: 1.0625rem;   /* 17px */
        --home-fs-title: 1.125rem;   /* 18px */
        --home-fs-heading: 2rem;     /* 32px */
        --home-fs-eyebrow: 0.8125rem;/* 13px */
        --home-container: 1380px;
    }

    .home-faq-wrapper {
        max-width: 980px;
    }

    .home-final-cta-card h2 {
        font-size: 1.75rem;
    }
}


/* =========================================================================
   HERO TRANSFERT — repris à l'identique
   Ces règles sont affinées par responsive-mobile.css sous 992px.
   ========================================================================= */

.home-transfer-hero {
    min-height: 760px;
}

.home-hero-copy {
    max-width: 670px;
}

.home-hero-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 18px;
    padding: 7px 13px;

    color: rgba(255, 255, 255, 0.95);

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

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;

    font-size: 0.74rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero-title {
    margin: 0;

    color: #fff;

    font-size: clamp(2.8rem, 3.4vw, 4.35rem);
    font-weight: 400;

    line-height: 1.12;
    letter-spacing: -0.025em;
}

.home-hero-country-line {
    display: block;

    margin: 5px 0;

    color: #fff;
}

.home-hero-country-line strong {
    font-weight: 700;
}

.home-hero-description {
    max-width: 620px;

    margin: 22px 0 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 1rem;
    line-height: 1.65;
}

.home-hero-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 22px;

    margin-top: 26px;
}

.home-hero-trust span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

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

    font-size: 0.85rem;
    font-weight: 500;
}

.home-hero-trust i {
    color: #fff;

    font-size: 0.9rem;
}

@media (min-width: 1600px) {

    .home-transfer-hero {
        min-height: 780px;
    }

    .home-hero-copy {
        max-width: 740px;
    }

    .home-hero-title {
        font-size: 4.4rem;
    }

    .home-hero-description {
        font-size: 1.05rem;
    }

    .home-hero-trust span {
        font-size: 0.9rem;
    }
}

@media (max-width: 991.98px) {

    .home-transfer-hero {
        min-height: auto;

        padding: 65px 0;
    }

    .home-hero-copy {
        max-width: 650px;

        margin: 0 auto;
    }

    .home-hero-title {
        font-size: clamp(2.3rem, 7vw, 3.4rem);
    }

    .home-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .home-hero-trust {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {

    .home-transfer-hero {
        padding: 48px 0;
    }

    .home-hero-eyebrow {
        margin-bottom: 14px;

        font-size: 0.65rem;
    }

    .home-hero-title {
        font-size: 2.15rem;
    }

    .home-hero-description {
        margin-top: 16px;

        font-size: 0.9rem;
    }

    .home-hero-trust {
        gap: 10px 16px;

        margin-top: 20px;
        margin-bottom: 28px;
    }

    .home-hero-trust span {
        font-size: 0.76rem;
    }
}


/* =========================================================================
   CARTE DE DEVIS ET VOLET RECHARGE — repris à l'identique
   ========================================================================= */

#myTabContent {
    padding: 26px !important;

    border-radius: 20px !important;

    box-shadow:
            0 22px 50px rgba(15, 23, 42, 0.18),
            0 4px 14px rgba(15, 23, 42, 0.08);
}

#request-money {
    margin: 0;
}

/* Le formulaire de recharge utilise désormais le même composant que le
   formulaire de devis (.money-transfer-card / .mt-exchange), défini dans
   responsive-mobile.css. Aucune règle portant un id ne doit subsister
   ici : elle gagnerait sur le composant partagé. */

#form-send-tip-top {
    margin: 0;
}