/* ==========================================================================
   Demande de subvention — design repris du modèle « loan-request »
   (étapes numérotées, pastilles devise, simulateur, récapitulatif,
   bouton d'envoi).

   Transpositions par rapport au modèle :
     - l'accent doré du modèle (#F2C94C) est remplacé par le noir de la charte
       (#000000), comme sur la version d'origine de la page
     - icônes Bootstrap Icons (bi bi-*) -> Font Awesome 6 (fas fa-*),
       la seule bibliothèque chargée sur ce site
     - le tableau d'amortissement du modèle a été retiré : une subvention
       n'est pas remboursable, il n'a donc pas de sens ici
     - le hero du modèle (hero-v2) a été retiré : la page conserve son
       hero d'origine (photo + voile sombre)
   ========================================================================== */

:root {
    --gf-primary: #000000;
    --gf-accent: #000000;
}

/* ==========================================================================
   SECTION DU FORMULAIRE
   ========================================================================== */
.grant-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3rem 0;
}

.grant-container {
    /* Pleine largeur : plus de limite à 1100 px. Le rythme est assuré par
       les marges de .container-fluid (classes Bootstrap px-3 px-md-4). */
    max-width: 100%;
    margin: 0;
}

/* ==========================================================================
   ÉTAPES NUMÉROTÉES
   ========================================================================== */
.loan-group {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.25rem;
}

.loan-group-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}

.loan-group-title h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gf-primary);
}

.step-badge {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--gf-primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Champs */
#grantApplicationForm .form-control,
#grantApplicationForm .form-select {
    border-color: #e3e3e3;
}

#grantApplicationForm .form-control:focus,
#grantApplicationForm .form-select:focus {
    border-color: var(--gf-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12);
}

#grantApplicationForm .form-label {
    font-weight: 600;
    color: #3a3a3a;
    font-size: 0.9rem;
}

/* ==========================================================================
   PASTILLES DEVISE
   ========================================================================== */
.currency-pills {
    /* Grille plutôt que flex : avec quatre devises, on obtient une rangée de
       quatre sur grand écran et deux rangées de deux sur téléphone, sans
       qu'une pastille se retrouve seule sur sa ligne. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.75rem;
}

.currency-pill {
    text-align: center;
    padding: 0.7rem 0.5rem;
    border-radius: 12px;
    border: 2px solid #e9ecef;
    cursor: pointer;
    font-weight: 700;
    background: white;
    color: #555;
    transition: all 0.2s;
    -webkit-user-select: none;
    user-select: none;
}

/* Code de la devise suivi de son symbole, en retrait (rendu camis) */
.currency-pill small {
    font-size: 0.82em;
    font-weight: 600;
    opacity: 0.75;
}

.currency-pill.active {
    border-color: var(--gf-primary);
    background: var(--gf-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.currency-pill:hover:not(.active) {
    border-color: var(--gf-primary);
    color: var(--gf-primary);
    transform: translateY(-2px);
}

/* ==========================================================================
   SIMULATEUR (saisie des valeurs + panneau de résultat)
   ========================================================================== */
.slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    gap: 0.75rem;
}

.slider-label span {
    font-weight: 700;
    color: var(--gf-primary);
    font-size: 0.9rem;
}

.slider-input {
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 0.3rem 0.6rem;
    text-align: right;
    max-width: 140px;
    outline: none;
}

.slider-input:focus {
    border-color: var(--gf-accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

/* Largeur au repos des deux champs courts : un taux tient sur deux
   caractères, une durée sur trois. Ces largeurs sont écrites ici et non en
   style inline sur les champs, car un style inline ne peut pas être surchargé
   par la règle mobile plus bas — qui doit au contraire aligner les trois
   champs du simulateur sur la même largeur. */
#interestRateInput {
    max-width: 90px;
}

#durationInput {
    max-width: 80px;
}

/* ==========================================================================
   CONSENTEMENT
   ========================================================================== */
.loan-consent {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    background: #f6f8f7;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.9rem;
}

.loan-consent .form-check-input {
    margin-top: 0.18rem;
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    border-color: #d4d4d4;
}

.loan-consent .form-check-input:checked {
    background-color: var(--gf-primary);
    border-color: var(--gf-primary);
}

.loan-consent .form-check-label {
    font-size: 0.85rem;
    color: #535353;
}

/* ==========================================================================
   BOUTON D'ENVOI
   ========================================================================== */
.btn-custom {
    background: var(--couleur-boutons) !important;
    color: white !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    width: 100%;
    transition: all 0.2s;
}

.btn-custom:hover:not(:disabled) {
    background: var(--couleur-boutons-fonce) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.btn-custom:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: gf-spin 0.8s linear infinite;
}

@keyframes gf-spin {
    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   RÉCAPITULATIF
   ========================================================================== */
.loan-recap {
    background: linear-gradient(160deg, #000000 0%, #000000 100%);
    color: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.loan-recap-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.loan-recap-head i {
    /* Le récapitulatif a un fond noir : l'accent du formulaire y serait
       invisible (il est passé au noir avec le reste de la charte). L'icône
       reprend donc la couleur du titre, blanc. */
    color: #ffffff;
}

.recap-grid {
    display: grid;
    /* `auto-fit` : la grille s'adapte au nombre de cartes (3 depuis le passage
       à 3 sections) au lieu de réserver 4 colonnes et de laisser ~340 px de
       vide à droite.
       Le minimum de 130 px permet 2 cartes par ligne sur un téléphone — y
       compris les plus étroits (360 px, soit 280 px utiles) : avec 190 px,
       chaque carte occupait toute la largeur et le récapitulatif s'allongeait
       sur 3 rangées. */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
}

.recap-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.9rem;
    text-align: center;
}

.recap-item .label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.3rem;
}

.recap-item .value {
    font-size: 1.05rem;
    font-weight: 700;
    word-break: break-word;
}

.recap-note {
    margin-top: 1rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 767.98px) {
    .loan-group {
        padding: 1.15rem;
    }

    .currency-pill {
        font-size: 0.8rem;
        padding: 0.5rem 0;
    }
}

@media (max-width: 575.98px) {
    .slider-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    /* Les trois champs du simulateur (montant, taux, durée) passent sous leur
       libellé et prennent toute la largeur. Les identifiants sont rappelés
       dans le sélecteur : sans eux, les règles #interestRateInput et
       #durationInput ci-dessus l'emporteraient sur .slider-input et les trois
       champs garderaient des largeurs différentes. */
    .slider-input,
    #interestRateInput,
    #durationInput {
        max-width: 100%;
        width: 100%;
        text-align: left;
    }

    /* Trois cartes dans une grille à deux colonnes laissaient la troisième
       seule sur une demi-largeur, avec un vide à côté. Elle occupe désormais
       toute la ligne. */
    .recap-item:last-child {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Uniformité des champs sur mobile
   ==========================================================================
   card.css supprime la gouttière des colonnes .col-md-6 et .col-lg-4 sous
   768px, mais laisse celle des colonnes .col-12 qui gardent les 8px de
   chaque côté (gouttière Bootstrap). Résultat : les champs qui occupent
   toute la largeur — « Residential Address » (Coordonnées) et « Detailed
   Project Description » (Détails de la demande) — étaient 16px plus étroits
   que les champs voisins. On aligne les .col-12 sur le même padding.

   La règle est limitée aux .loan-group du formulaire pour ne pas toucher
   aux autres pages qui chargent card.css.
   ========================================================================== */
@media (max-width: 768px) {
    .loan-group .row > .col-12 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   Correctifs mobiles
   Extrait du <style> inline qui se trouvait dans le <head> de
   grant-application.php — contenu identique.
   ========================================================================== */
@media (max-width: 768px) {

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .card-body.p-5 {
        padding: 1.25rem !important;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .row.g-4 {
        gap: 1rem !important;
    }
}

/* ==========================================================================
   Champ téléphone international (intl-tel-input)
   Le conteneur .iti généré par le plugin n'occupe pas toute la largeur de la
   colonne : sans cette règle le champ téléphone restait plus court que le
   champ e-mail voisin.
   ========================================================================== */
.iti {
    width: 100%;
}

.iti input[type="tel"].form-control {
    width: 100%;
}

/* Le drapeau + l'indicatif (+33) ne doivent jamais recouvrir la saisie */
.iti--separate-dial-code input[type="tel"].form-control {
    padding-left: 5.5rem;
}

.iti .iti__selected-flag {
    border-radius: 0.375rem 0 0 0.375rem;
    background-color: transparent;
}

.iti .iti__selected-flag:hover {
    background-color: #f5f5f5;
}