/*
|--------------------------------------------------------------------------
| Styles propres au projet
|--------------------------------------------------------------------------
|
| Chargé après findox.css. Toute personnalisation va ici : findox.css reste
| intact, ce qui permet de le remplacer lors d'une mise à jour du template
| sans perdre le travail.
|
| Sommaire
|   1. Sélecteur de langue
|   2. Widget WhatsApp
|   3. Formulaire de demande de prêt
|   4. Page de confirmation
|
*/

/* ==========================================================================
   1. Sélecteur de langue
   ========================================================================== */

.language-switcher {
    position: relative;
    margin-left: 20px;
    flex-shrink: 0;
}

.language-switcher__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease;
}

.language-switcher__toggle:hover,
.language-switcher__toggle[aria-expanded="true"] {
    border-color: var(--findox-base, #006654);
}

/*
 * Drapeaux du sélecteur de langue
 * ---------------------------------------------------------------------------
 * Les drapeaux ne sont pas des images : ce sont des emoji « indicateurs
 * régionaux » (🇫🇷, 🇩🇰…) écrits dans includes/i18n.php.
 *
 * macOS et Android savent les dessiner, mais Windows — de loin le premier
 * système des visiteurs — n'embarque aucune police de drapeaux : Chrome et
 * Edge affichent alors deux lettres dans un cadre (« FR », « DK ») au lieu du
 * drapeau. D'où l'impression que « les images ne s'affichent plus » en ligne
 * alors que tout est correct en local.
 *
 * La police ci-dessous ne contient que les drapeaux : tout autre caractère
 * retombe sur la police suivante de la liste. Elle est hébergée sur le site,
 * sans dépendance à un CDN externe.
 */
@font-face {
    font-family: 'Twemoji Country Flags';
    src: url('../fonts/TwemojiCountryFlags.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+1F1E6-1F1FF;   /* indicateurs régionaux uniquement */
}

.language-switcher__flag {
    font-family: 'Twemoji Country Flags', 'Apple Color Emoji',
                 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-size: 16px;
    line-height: 1;
}

.language-switcher__caret {
    font-size: 8px;
    transition: transform .3s ease;
}

.language-switcher__toggle[aria-expanded="true"] .language-switcher__caret {
    transform: rotate(180deg);
}

.language-switcher__list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 999;
    min-width: 190px;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 8px 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.language-switcher__list.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-switcher__list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 15px;
    color: #23262c;
    transition: background-color .2s ease, color .2s ease;
}

.language-switcher__list li a:hover {
    background: #f4f6fb;
}

.language-switcher__list li.is-active a {
    font-weight: 700;
    color: var(--findox-base, #006654);
}

/* Sur mobile le menu déroulant s'ancre à droite pour ne pas déborder. */
@media (max-width: 767px) {
    .language-switcher {
        margin-left: 10px;
    }

    .language-switcher__toggle {
        padding: 7px 9px;
    }

    .language-switcher__code {
        display: none;
    }

    .language-switcher__list {
        right: -10px;
    }
}

/* ==========================================================================
   2. Widget WhatsApp
   ========================================================================== */

.whatsapp-widget {
    position: fixed;
    left: 30px;
    bottom: 30px;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
    background-color: #25d366;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    transition: transform .3s ease, background-color .3s ease;
}

.whatsapp-widget:hover {
    background-color: #1da851;
    color: #fff;
    transform: translateY(-3px);
}

.whatsapp-widget i {
    font-size: 34px;
}

@media (max-width: 575px) {
    .whatsapp-widget {
        left: 16px;
        bottom: 16px;
        padding: 10px;
    }

    .whatsapp-widget i {
        font-size: 26px;
    }

    .whatsapp-widget__label {
        display: none;
    }
}

/* ==========================================================================
   3. Formulaire de demande de prêt
   ========================================================================== */

.apply-form__intro {
    margin-bottom: 40px;
}

.apply-form__intro-title {
    margin-bottom: 12px;
}

.apply-form__required-note {
    font-size: 14px;
    opacity: .75;
}

.apply-form__step {
    margin-bottom: 40px;
    padding: 30px;
    background: #fff;
    border: 1px solid #e7ebf3;
    border-radius: 12px;
}

.apply-form__step-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 20px;
}

.apply-form__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: var(--findox-base, #006654);
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.apply-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.apply-form__field--full {
    grid-column: 1 / -1;
}

/* Montant + devise doivent rester sur la même ligne, quelle que soit la
   largeur : la devise se contente de son contenu, le montant prend le reste. */
.apply-form__amount-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
}

/* Adresse + code postal + pays sur une même ligne. L'adresse est le champ
   long, le code postal le plus court. */
.apply-form__address-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr;
    gap: 20px;
}

.apply-form__label {
    display: block;
    margin-bottom: 7px;
    font-size: 15px;
    font-weight: 600;
}

.apply-form__required {
    color: #e2352f;
}

.apply-form__hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    opacity: .7;
}

.apply-form__control input[type="text"],
.apply-form__control input[type="email"],
.apply-form__control input[type="tel"],
.apply-form__control input[type="number"],
.apply-form__control input[type="date"],
.apply-form__control select,
.apply-form__control textarea {
    width: 100%;
    height: 46px;
    padding: 0 15px;
    background: #f4f6fb;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 15px;
    color: #23262c;
    outline: none;
    transition: border-color .3s ease, background-color .3s ease;
}

.apply-form__control textarea {
    height: 105px;
    padding: 12px 15px;
    resize: vertical;
}

.apply-form__control input:focus,
.apply-form__control select:focus,
.apply-form__control textarea:focus {
    background: #fff;
    border-color: var(--findox-base, #006654);
}

/* Champ en erreur : le liseré rouge double le message texte, il ne le
   remplace pas — la couleur seule n'est pas perceptible par tous. */
.apply-form__control.has-error input,
.apply-form__control.has-error select,
.apply-form__control.has-error textarea {
    border-color: #e2352f;
    background: #fdf3f3;
}

.apply-form__error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #e2352f;
}

.apply-form__summary {
    margin-bottom: 32px;
    padding: 20px 24px;
    background: #fdf3f3;
    border-left: 4px solid #e2352f;
    border-radius: 8px;
}

.apply-form__summary-title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #e2352f;
}

.apply-form__summary ul {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
}

/* Blocs conditionnels : masqués tant que la réponse déclenchante n'est pas
   sélectionnée. L'attribut hidden est piloté par apply-form.js. */
.apply-form__conditional[hidden] {
    display: none;
}

.apply-form__conditional {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 22px 24px;
    background: #f4f6fb;
    border-radius: 10px;
}

.apply-form__conditional-legend {
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 700;
}

.apply-form__notice {
    grid-column: 1 / -1;
    padding: 18px 22px;
    background: #eef3ff;
    border-left: 4px solid var(--findox-base, #006654);
    border-radius: 8px;
    font-size: 14px;
}

.apply-form__notice p {
    margin-bottom: 8px;
}

.apply-form__notice p:last-child {
    margin-bottom: 0;
}

.apply-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.apply-form__consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--findox-base, #006654);
    cursor: pointer;
}

.apply-form__consent label {
    font-size: 15px;
    line-height: 1.6;
    cursor: pointer;
}

/* Piège à robots : invisible à l'écran mais rempli par les scripts
   automatisés, qui remplissent tous les champs qu'ils trouvent. */
.apply-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 991px) {
    /* Sous cette largeur, trois champs sur une ligne deviennent illisibles :
       l'adresse passe seule au-dessus, code postal et pays se partagent
       la ligne suivante. */
    .apply-form__address-row {
        grid-template-columns: 1fr 1.2fr;
        gap: 16px;
    }

    .apply-form__address-row > :first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .apply-form__grid {
        grid-template-columns: 1fr;
    }

    .apply-form__step {
        padding: 20px 16px;
    }

    .apply-form__amount-row {
        grid-template-columns: 1fr 100px;
    }

    .apply-form__address-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   3 bis. Bannière de titre des sous-pages
   ==========================================================================
   findox.css réserve 255px/186px de remplissage, calibrés pour un site
   vitrine. Sur des pages utilitaires (formulaire, confirmation) cela repousse
   le contenu bien trop bas : on resserre à toutes les tailles d'écran.
   ========================================================================== */

.page-header {
    padding-top: 175px;
    padding-bottom: 110px;
}

@media (max-width: 1199px) {
    .page-header {
        padding-top: 150px;
        padding-bottom: 90px;
    }
}

@media (max-width: 767px) {
    .page-header {
        padding-top: 140px;
        padding-bottom: 75px;
    }
}

/* ==========================================================================
   3 ter. Témoignages
   ========================================================================== */

.testimonials-carousel {
    margin-top: 50px;
}

.testimonial-card {
    height: 100%;
    padding: 34px 30px;
    background: #fff;
    border: 1px solid #e7ebf3;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .04);
}

.testimonial-card__stars {
    margin-bottom: 18px;
    color: #f5a623;
    font-size: 14px;
    letter-spacing: 2px;
}

.testimonial-card__text {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.8;
    font-style: italic;
}

.testimonial-card__author {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eef1f6;
}

.testimonial-card__name {
    display: block;
    font-weight: 700;
}

.testimonial-card__role {
    display: block;
    font-size: 14px;
    opacity: .7;
}

/* Sans hauteur imposée, les cartes d'un carrousel Owl s'alignent sur leur
   propre contenu et produisent des colonnes de hauteurs inégales. */
.testimonials-carousel .owl-stage {
    display: flex;
}

.testimonials-carousel .owl-item {
    display: flex;
    height: auto;
}

.testimonials-carousel .owl-item .item {
    display: flex;
    width: 100%;
}

/* ==========================================================================
   4. Page de confirmation
   ========================================================================== */

.confirm-box {
    max-width: 720px;
    margin: 0 auto;
    padding: 50px 45px;
    background: #fff;
    border: 1px solid #e7ebf3;
    border-radius: 16px;
    box-shadow: 0 12px 50px rgba(0, 0, 0, .06);
    text-align: center;
}

.confirm-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin-bottom: 28px;
    background: #e8f7ee;
    border-radius: 50%;
    color: #1da851;
    font-size: 42px;
}

.confirm-box__icon--denied {
    background: #fdf3f3;
    color: #e2352f;
}

.confirm-box__title {
    margin-bottom: 16px;
    font-size: 32px;
}

.confirm-box__lead {
    margin-bottom: 18px;
    font-size: 18px;
    font-weight: 600;
}

.confirm-box__text {
    margin-bottom: 16px;
}

.confirm-box__reference {
    margin: 30px 0;
    padding: 22px;
    background: #f4f6fb;
    border-radius: 10px;
}

.confirm-box__reference-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
}

.confirm-box__reference-value {
    display: block;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--findox-base, #006654);
    word-break: break-all;
}

.confirm-box__keepref {
    font-size: 14px;
    opacity: .75;
}

.confirm-box__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

@media (max-width: 575px) {
    .confirm-box {
        padding: 36px 22px;
    }

    .confirm-box__title {
        font-size: 25px;
    }

    .confirm-box__actions .findox-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   5. Pages légales
   ========================================================================== */

.legal-content h3 {
    margin-top: 40px;
    margin-bottom: 14px;
    font-size: 21px;
}

.legal-content h3:first-child {
    margin-top: 0;
}

.legal-content p,
.legal-content li {
    line-height: 1.85;
}

.legal-content ul {
    margin: 0 0 18px;
    padding-left: 22px;
}

.legal-content li {
    margin-bottom: 8px;
    list-style: disc;
}

/* Avertissement réglementaire : il doit rester lisible et distinct du reste
   du texte, c'est une mention obligatoire et non un paragraphe ordinaire. */
.legal-content__warning {
    margin: 26px 0;
    padding: 18px 22px;
    background: #fff8e6;
    border-left: 4px solid #f5a623;
    border-radius: 8px;
    font-weight: 600;
}

/* Paragraphe d'accroche du bandeau principal : absent du template d'origine,
   dont le titre occupait seul la colonne. */
.hero-one__text {
    max-width: 620px;
    margin: 22px 0 0;
    font-size: 17px;
    line-height: 1.75;
}

@media (max-width: 767px) {
    .hero-one__text {
        font-size: 15px;
    }
}

/* ==========================================================================
   6. Boutons — réduction homogène
   ==========================================================================
   findox.css dimensionne les boutons pour un site vitrine très aéré. Sur un
   site de courtage, où les appels à l'action sont nombreux et rapprochés,
   cette taille devient envahissante. On resserre ici plutôt que dans
   findox.css, qui reste remplaçable lors d'une mise à jour du template.
   ========================================================================== */

.findox-btn {
    gap: 14px;
    padding: 6px 6px 6px 24px;
}

.findox-btn__text {
    font-size: 14px;
}

/* Seule la pastille ronde est réduite.
   .findox-btn__icon ne doit PAS être redimensionné : ce n'est pas l'icône
   mais la fenêtre de masquage (overflow: hidden) dans laquelle les deux <i>
   glissent au survol, positionnés en absolu à bottom:0/left:0 et
   left:-15px/bottom:-15px. L'agrandir décale l'icône visible vers le coin
   inférieur gauche au lieu de la laisser centrée dans la pastille. */
.findox-btn__icon-box {
    width: 30px;
    height: 30px;
}

/* line-height à 1 : sans cela le glyphe hérite d'un interligne supérieur à
   sa propre hauteur et se retrouve décalé vers le bas dans sa fenêtre. */
.findox-btn__icon i {
    line-height: 1;
}

/* Bouton du header : encore un cran plus compact, il cohabite avec le menu
   et le sélecteur de langue sur une seule ligne. */
.main-header__btn.findox-btn {
    padding: 5px 5px 5px 20px;
    gap: 12px;
}

.main-header__btn .findox-btn__text {
    font-size: 13px;
}

.main-header__btn .findox-btn__icon-box {
    width: 27px;
    height: 27px;
}

@media (max-width: 767px) {
    .findox-btn {
        padding: 5px 5px 5px 18px;
        gap: 10px;
    }

    .findox-btn__text {
        font-size: 13px;
    }

    .findox-btn__icon-box {
        width: 27px;
        height: 27px;
    }
}

/* ==========================================================================
   7. Pied de page — lisibilité des colonnes
   ==========================================================================
   Les libellés du menu sont longs (« Qui sommes-nous ? », « Protection des
   données »). Dans des colonnes étroites ils se coupaient sur trois lignes.
   Les colonnes passent à 3/3/3/3 et l'on empêche les coupures internes.
   ========================================================================== */

.footer-widget__links li {
    margin-bottom: 12px;
    line-height: 1.5;
}

.footer-widget__links li a {
    display: inline-block;
    /* Le libellé peut passer à la ligne entre deux mots, mais jamais au
       milieu d'un mot : c'est ce qui produisait « Qui / sommes- / nous ? ». */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.footer-widget__title {
    margin-bottom: 22px;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .footer-widget__title {
        white-space: normal;
    }
}

/* ==========================================================================
   8. En-tête — équilibre et hauteur
   ========================================================================== */

/* --- Top Bar : rééquilibrage gauche / droite -----------------------------
   findox.css place les deux blocs en space-between. La colonne de droite
   (pages + réseaux sociaux) s'étalait plus que nécessaire et comprimait les
   coordonnées à gauche. On laisse désormais la colonne gauche absorber
   l'espace disponible, la droite se limitant à son contenu. */

.topbar__inner {
    gap: 20px;
}

.topbar__info {
    flex: 1 1 auto;
    min-width: 0;
}

.topbar__right {
    flex: 0 0 auto;
    gap: 16px;
}

.topbar__pages {
    gap: 16px;
}

/* Les libellés de la barre supérieure ne doivent pas se couper en deux
   lignes : ils feraient grandir la hauteur de la barre. */
.topbar__pages li a,
.topbar__info li {
    white-space: nowrap;
}

/* --- Hauteur générale ----------------------------------------------------
   La hauteur de l'en-tête vient du remplissage vertical des entrées de menu
   (48px de haut et de bas dans findox.css). On resserre légèrement, sans
   toucher à l'alignement vertical qui reste géré par flexbox. */

.topbar {
    padding: 8px 0;
}

.main-menu .main-menu__list > li {
    padding-top: 34px;
    padding-bottom: 34px;
}

@media (max-width: 1199px) {
    .main-menu .main-menu__list > li {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}

/* Sous 992px le menu passe en version mobile : la hauteur de l'en-tête n'est
   plus dictée par les entrées de menu mais par le logo et les boutons. On
   borne alors le remplissage du bloc plutôt que celui du menu. */
@media (max-width: 991px) {
    .main-header__inner {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* Le logo suit la réduction pour rester proportionné. */
.main-header__logo img {
    max-width: 190px;
}

@media (max-width: 991px) {
    .main-header__logo img {
        max-width: 165px;
    }
}