/* ============================= */
/* HELPUS.CSS - Styles spécifiques page Help Us */
/* Version réorganisée avec unités fixes - SANS CONFLITS */
/* ============================= */

/* ============================= */
/* 1. BACKGROUND ET STRUCTURE GÉNÉRALE */
/* ============================= */

body {
   background-size: cover !important;
   background-position: center !important;
   background-attachment: fixed !important;
   background-repeat: no-repeat !important;
   min-height: 100vh !important;
}

body::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh; /* Ne couvre que la moitié haute de la page */
   background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0));
   z-index: -999;
}

/* ============================= */
/* 2. SECTION HERO */
/* ============================= */

.helpus-hero {
   padding: 7rem 0 0 0;
   text-align: center;
   color: white;
   position: relative;
   overflow: hidden;
}

.helpus-hero-content {
   position: relative;
   z-index: 2;
   max-width: 50rem;
   margin: 0 auto;
   padding: 0 1.25rem;
}

.helpus-hero h1 {
   font-size: clamp(2.5rem, 5vw, 4rem);
   font-weight: 500;
   margin-bottom: 1.25rem;
   text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.9);
}

.helpus-hero p {
   font-size: clamp(1.1rem, 2.5vw, 1.4rem);
   margin-bottom: 2rem; /* Ajout d'espace après le sous-titre */
   opacity: 0.95;
   text-shadow: 0.0625rem 0.125rem 0.375rem rgba(0, 0, 0, 0.8);
   line-height: 1.6;
}

/* ============================= */
/* 3. SECTION DONATION PRINCIPALE */
/* ============================= */

.donation-section {
   background: transparent;
   padding: 1.5rem 0;
   min-height: 100vh;
}

.donation-container {
   max-width: 62.5rem;
   margin: 0 auto;
   padding: 0 1.25rem;
}

/* ============================= */
/* 4. CARTE DONATION PRINCIPALE - RESPONSIVE AMÉLIORÉ */
/* ============================= */

.donation-card {
   background: white;
   border-radius: 1.5625rem;
   padding: 3.125rem;
   box-shadow: 0 1.25rem 3.75rem rgba(0,0,0,0.1);
   border: 0.0625rem solid #f0f0f0;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3.75rem;
   align-items: flex-start;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
}

/* ============================= */
/* 5. SECTION PACKAGES (GAUCHE) */
/* ============================= */

.donation-packages {
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.packages-header {
   text-align: center;
   margin-bottom: 1.25rem;
}

.packages-header h2 {
   font-size: 1.8rem;
   font-weight: 500;
   color: #2c3e50;
   margin-bottom: 0.625rem;
}

.packages-header p {
   color: #666;
   font-size: 1rem;
   margin: 0;
}

.package-display {
   position: relative;
   min-height: 18.75rem;
   flex: 1;
}

.package-item {
   background: white;
   border: 0.125rem solid #e2e8f0;
   border-radius: 1.25rem;
   overflow: hidden;
   transition: all 0.4s ease;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   opacity: 0;
   transform: translateY(1.25rem);
   box-shadow: 0 0.9375rem 2.5rem rgba(0,0,0,0.08);
}

.package-item:hover {
   border-color: #cbd5e0;
   transform: translateY(-0.1875rem);
   box-shadow: 0 0.9375rem 2.1875rem rgba(0,0,0,0.12);
}

.package-item.active {
   opacity: 1;
   transform: translateY(0);
   position: relative;
}

/* ============================= */
/* 6. HEADER PACKAGE */
/* ============================= */

.package-header {
   background: #191919;
   padding: 1.25rem 1.5625rem;
   text-align: center;
}

.package-name {
   color: white;
   font-size: 1.1rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 0.03125rem;
}

.package-amount {
   color: #f9d849;
   font-size: 2.2rem;
   font-weight: 800;
   margin: 0;
}

/* ============================= */
/* 7. CORPS PACKAGE */
/* ============================= */

.package-body {
   padding: 1.875rem 1.5625rem;
}

.package-description {
   padding: 0.125rem 0 0.75rem 0;
   margin: 0 0 1.5625rem 0;
   border-bottom: 0.125rem solid #7f9b4d;
   font-weight: 600;
   color: #2c3e50;
   text-transform: uppercase;
   letter-spacing: 0.03125rem;
   font-size: 0.9rem;
   text-align: center;
   line-height: 1.4;
}

.package-benefits {
   list-style: none;
   padding: 0;
   margin: 0;
}

.package-benefits li {
   padding: 0.5rem 0;
   font-size: 1rem;
   color: #555;
   position: relative;
   padding-left: 1.875rem;
   line-height: 1.5;
}

.package-benefits li::before {
   color: #333;
   position: absolute;
   left: 0;
   font-weight: 900;
   font-size: 0.875rem;
   top: 0.5rem;
   font-family: "Font Awesome 6 Free";
}

/* Icônes Font Awesome */
.whatsapp-benefit::before { content: "\f4ad"; }
.video-benefit::before { content: "\f3cd"; }
.poster-benefit::before { content: "\f03e"; }
.report-benefit::before { content: "\f15c"; }
.sponsor-benefit::before { content: "\f559"; }
.souvenir-benefit::before { content: "\f06b"; }

/* ============================= */
/* 8. FORMULAIRE DONATION (DROITE) */
/* ============================= */

.donation-form-container {
   position: relative;
   min-width: 0;
}

.donation-header {
   text-align: center;
   margin-bottom: 1.875rem;
}

.donation-header h2 {
   font-size: 1.8rem;
   font-weight: 500;
   color: #2c3e50;
   margin-bottom: 0.625rem;
}

.security-badge {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   color: #7f9b4d;
   font-size: 0.9rem;
   margin-bottom: 1.875rem;
}

.security-badge i {
   color: #7f9b4d;
}

/* ============================= */
/* 9. MONTANTS PRÉDÉFINIS */
/* ============================= */

.preset-amounts {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0.625rem;
   margin-bottom: 1.5625rem;
}

.amount-btn {
   padding: 0.9375rem;
   border: 0.125rem solid #e9ecef;
   border-radius: 0.625rem;
   background: white;
   color: #333;
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
   min-width: 0;
}

.amount-btn:hover {
   border-color: #7f9b4d;
   background: #f8faf5;
}

.amount-btn.active {
   border-color: #7f9b4d;
   background: #7f9b4d;
   color: white;
}

/* ============================= */
/* 10. MONTANT PERSONNALISÉ */
/* ============================= */

.custom-amount {
   display: flex;
   gap: 0.625rem;
   margin-bottom: 1.875rem;
}

.custom-amount input {
   flex: 1;
   padding: 0.9375rem;
   border: 0.125rem solid #e9ecef;
   border-radius: 0.625rem;
   font-size: 1rem;
   transition: border-color 0.3s ease;
   min-width: 0;
}

.custom-amount input:focus {
   outline: none;
   border-color: #7f9b4d;
}

.currency-select {
   padding: 0.9375rem;
   border: 0.125rem solid #e9ecef;
   border-radius: 0.625rem;
   font-size: 1rem;
   background: white;
   cursor: pointer;
   transition: border-color 0.3s ease;
   min-width: 60px;
}

.currency-select:focus {
   outline: none;
   border-color: #7f9b4d;
}

/* ============================= */
/* 11. BOUTON DONATION */
/* ============================= */

.donate-btn {
   background: #7f9b4d;
   color: white;
   padding: 1.125rem 1.875rem;
   border: none;
   border-radius: 3.125rem;
   font-size: 1.1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.625rem;
   width: 100%;
   margin-bottom: 1.25rem;
}

.donate-btn:hover {
   background: #6d8540;
   transform: translateY(-0.125rem);
   box-shadow: 0 0.5rem 1.5625rem rgba(127, 155, 77, 0.3);
}

/* ============================= */
/* 12. MÉTHODES DE PAIEMENT */
/* ============================= */

.payment-methods {
   text-align: center;
   color: #666;
   font-size: 0.9rem;
   line-height: 1.4;
}

/* ============================= */
/* 13. RESPONSIVE DESIGN AMÉLIORÉ */
/* ============================= */

@media (max-width: 64rem) {
   .donation-card {
       gap: 2.5rem;
       padding: 2.5rem;
   }
}

@media (max-width: 56rem) {
   .donation-card {
       gap: 2rem;
       padding: 2rem;
   }
   
   .package-body {
       padding: 1.5rem;
   }
   
   .packages-header h2,
   .donation-header h2 {
       font-size: 1.6rem;
   }
}

@media (max-width: 48rem) {
    body {
        background-attachment: scroll !important;
    }
    
    body::before {
        position: absolute !important;
    }

    .donation-card {
        display: flex;              /* ← AJOUTEZ */
        flex-direction: column;     /* ← AJOUTEZ */
        gap: 2.5rem;
        padding: 1.875rem;
        margin: 0 auto;
        max-width: 100%;
    }
    
    /* Forcer l'ordre correct sur mobile */
    .donation-section {
        order: 1;    /* Section "Faire un Don" en premier */
    }
    
    .packages-section {
        order: 2;    /* Section des packages en deuxième */
    }

    .preset-amounts {
        grid-template-columns: repeat(3, 1fr);
    }

    .package-body {
        padding: 1.25rem 1.5625rem;
    }

    .package-benefits li {
        font-size: 0.9rem;
        padding: 0.375rem 0;
        padding-left: 1.5625rem;
        line-height: 1.4;
    }

    .package-benefits li::before {
        font-size: 0.8rem;
        top: 0.375rem;
    }

    .donate-btn {
        padding: 0.9375rem;
        font-size: 1rem;
        margin-bottom: 0.9375rem;
    }

    .payment-methods {
        font-size: 0.8rem;
        margin-top: 0.625rem;
    }

    .package-header {
        padding: 0.9375rem 1.125rem;
    }

    .package-name {
        font-size: 0.95rem;
        margin-bottom: 0.3125rem;
    }

    .package-amount {
        font-size: 1.8rem;
    }

    .package-description {
        padding: 0.0625rem 0 0.5rem 0;
        margin: 0 0 1.125rem 0;
        font-size: 0.8rem;
        letter-spacing: 0.0125rem;
        line-height: 1.2;
    }
}

@media (max-width: 30rem) {
   .donation-card {
       padding: 1.25rem 0.9375rem;
       gap: 1.25rem;
       border-radius: 1rem;
   }

   .packages-header h2,
   .donation-header h2 {
       font-size: 1.3rem;
   }

   .package-body {
       padding: 1.25rem 0.9375rem;
   }

   .package-benefits li {
       font-size: 0.85rem;
       padding: 0.3125rem 0;
       padding-left: 1.5625rem;
       line-height: 1.4;
   }

   .package-benefits li::before {
       font-size: 0.75rem;
       top: 0.3125rem;
   }

   .donate-btn {
       padding: 0.9375rem;
       font-size: 1rem;
       margin-bottom: 0.9375rem;
   }

   .payment-methods {
       font-size: 0.8rem;
       margin-top: 0.625rem;
   }

   .package-header {
       padding: 0.9375rem 1.125rem;
   }

   .package-name {
       font-size: 0.95rem;
       margin-bottom: 0.3125rem;
   }

   .package-amount {
       font-size: 1.8rem;
   }

   .package-description {
       padding: 0.0625rem 0 0.5rem 0;
       margin: 0 0 1.125rem 0;
       font-size: 0.8rem;
       letter-spacing: 0.0125rem;
       line-height: 1.2;
   }

   .preset-amounts {
       grid-template-columns: repeat(3, 1fr);
   }
   
   .amount-btn {
       padding: 0.75rem 0.5rem;
       font-size: 0.8rem;
   }
   
   .custom-amount input,
   .currency-select {
       padding: 0.75rem;
       font-size: 0.9rem;
   }
}

.bank-transfer-link {
    color: #7f9b4d;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: block;
}

.bank-transfer-link:hover {
    color: #6d8540;
}

.bank-details {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.bank-info h4 {
    color: #7f9b4d;
    margin-bottom: 0.5rem;
}

.iban-info {
    background: white;
    padding: 0.75rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    font-family: monospace;
}

.bank-note {
    color: #666;
    font-style: italic;
    margin: 0;
}

/* ============================= */
/* 14. MODAL DE DONATION - VERSION COMPACTE */
/* ============================= */

.donation-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;
   display: none;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.donation-modal.active {
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 1;
}

.modal-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(0.3125rem);
}

.modal-content {
   position: relative;
   background: white;
   border-radius: 1.25rem;
   width: 90%;
   max-width: 31.25rem;
   max-height: 90vh;
   overflow-y: auto;
   overflow-x: hidden;
   box-shadow: 0 1.5625rem 3.125rem rgba(0, 0, 0, 0.3);
   transform: translateY(1.25rem);
   transition: transform 0.3s ease;
}

.donation-modal.active .modal-content {
   transform: translateY(0);
}

.modal-header {
   padding: 1.5625rem 1.875rem 1.25rem;
   border-bottom: 0.0625rem solid #e9ecef;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.modal-header h3 {
   margin: 0;
   font-size: 1.5rem;
   font-weight: 600;
   color: #2c3e50;
}

.modal-close {
   background: none;
   border: none;
   font-size: 1.5rem;
   color: #666;
   cursor: pointer;
   padding: 0.3125rem;
   border-radius: 50%;
   width: 2.1875rem;
   height: 2.1875rem;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}

.modal-close:hover {
   color: #333;
   background: #f8f9fa;
}

.modal-body {
   padding: 1.25rem 1.875rem 1.5rem;
   box-sizing: border-box;
}

.donation-summary {
   background: #191919;
   border-radius: 0.75rem;
   padding: 1rem;
   margin-bottom: 1.25rem;
   border: none;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.amount-display {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.625rem;
}

.amount-label {
   font-weight: 500;
   color: white;
}

.amount-value {
   font-size: 1.3rem;
   font-weight: 700;
   color: #f9d849;
}

.package-display-mini {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.package-label {
   font-weight: 500;
   color: white;
   font-size: 0.9rem;
}

.package-name-mini {
   font-weight: 600;
   color: white;
   text-transform: uppercase;
   font-size: 0.9rem;
   letter-spacing: 0.03125rem;
}

.donation-form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.form-group {
   display: flex;
   flex-direction: column;
}

.form-group label {
   font-weight: 600;
   color: #2c3e50;
   margin-bottom: 0.25rem;
   font-size: 0.95rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.optional-inline {
   font-weight: 400;
   color: #666;
   font-size: 0.85rem;
   font-style: italic;
}

.optional-label {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
}

.optional-note {
   font-size: 0.8rem;
   color: #666;
   font-weight: 400;
   font-style: italic;
   line-height: 1.3;
}

.whatsapp-note {
   font-size: 0.85rem;
   color: #7f9b4d;
   font-weight: 500;
   line-height: 1.4;
   margin-top: 0.25rem;
   padding: 0.5rem;
   background: #f0f8f0;
   border-radius: 0.5rem;
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
}

.whatsapp-note i {
   color: #7f9b4d;
   margin-top: 0.1rem;
   flex-shrink: 0;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
   padding: 0.75rem 0.9375rem;
   border: 0.125rem solid #e9ecef;
   border-radius: 0.5rem;
   font-size: 1rem;
   transition: border-color 0.3s ease;
   font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
   outline: none;
   border-color: #7f9b4d;
   box-shadow: 0 0 0 0.1875rem rgba(127, 155, 77, 0.1);
}

.form-group textarea {
   resize: vertical;
   min-height: 4.375rem;
}

.checkbox-container {
   display: none;
}

.checkbox-label {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   cursor: pointer;
   line-height: 1.4;
   font-size: 0.9rem;
}

.checkbox-label input[type="checkbox"] {
   display: none;
}

.checkmark {
   width: 1.125rem;
   height: 1.125rem;
   border: 0.125rem solid #e9ecef;
   border-radius: 0.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   flex-shrink: 0;
   margin-top: 0.125rem;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
   background: #7f9b4d;
   border-color: #7f9b4d;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
   content: '✓';
   color: white;
   font-size: 0.75rem;
   font-weight: 700;
}

.consent-text {
   color: #555;
   line-height: 1.4;
}

.form-actions {
   display: flex;
   gap: 0.75rem;
   margin-top: 0.75rem;
}

.btn-cancel,
.btn-proceed {
   padding: 0.75rem 1.5rem;
   border: none;
   border-radius: 0.5rem;
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   flex: 1;
}

.btn-cancel {
   background: #f8f9fa;
   color: #666;
   border: 0.125rem solid #e9ecef;
}

.btn-cancel:hover {
   background: #e9ecef;
   color: #555;
}

.btn-proceed {
   background: #7f9b4d;
   color: white;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   min-width: 10rem;
   justify-content: center;
}

.btn-proceed:hover {
   background: #6d8540;
   transform: translateY(-0.0625rem);
   box-shadow: 0 0.25rem 0.9375rem rgba(127, 155, 77, 0.3);
}

.btn-proceed:disabled {
   background: #ccc;
   cursor: not-allowed;
   transform: none;
   box-shadow: none;
}

@media (max-width: 48rem) {
   .modal-content {
       width: 95%;
       max-height: 95vh;
       margin: 1rem;
   }
   
   .modal-header,
   .modal-body {
       padding: 1.25rem;
   }
   
   .donation-summary {
       padding: 0.9375rem;
   }
   
   .amount-display,
   .package-display-mini {
       flex-direction: column;
       align-items: flex-start;
       gap: 0.3125rem;
   }
   
   .form-actions {
       flex-direction: column;
   }
   
   .btn-cancel,
   .btn-proceed {
       width: 100%;
       justify-content: center;
   }
   
   .optional-note {
       font-size: 0.75rem;
   }
   
   .whatsapp-note {
       font-size: 0.8rem;
       padding: 0.625rem;
   }
}

@media (max-width: 30rem) {
   .modal-content {
       width: 98%;
       margin: 0.625rem;
   }
   
   .modal-header,
   .modal-body {
       padding: 0.9375rem;
   }
   
   .consent-text {
       font-size: 0.8rem;
   }
   
   .checkbox-label {
       gap: 0.625rem;
   }
   
   .checkmark {
       width: 1rem;
       height: 1rem;
   }
   
   .whatsapp-note {
       font-size: 0.75rem;
       padding: 0.5rem;
   }
}

/* ============================= */
/* MODAL MOBILE FIX V3 - Compact avec espacement réduit */
/* REMPLACEZ la section précédente par celle-ci */
/* ============================= */

/* Fix spécial pour Safari mobile et autres navigateurs mobiles */
@media (max-width: 48rem) {
   .donation-modal {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       height: 100vh;
       height: 100dvh;
   }
   
   .donation-modal.active {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 1vh 0;
   }
   
   .modal-content {
       width: 94vw;
       max-width: 420px;
       max-height: 85vh;
       max-height: 85dvh;
       overflow-y: auto;
       overflow-x: hidden;
       -webkit-overflow-scrolling: touch;
       position: relative;
       background: white;
       border-radius: 1rem;
       box-shadow: 0 1.5625rem 3.125rem rgba(0, 0, 0, 0.3);
   }
   
   .modal-header {
       /* Header plus compact */
       padding: 0.875rem 1.25rem 0.75rem;
       border-bottom: 1px solid #e9ecef;
       flex-shrink: 0;
   }
   
   .modal-header h3 {
       font-size: 1.25rem;
       margin: 0;
   }
   
   .modal-close {
       width: 2rem;
       height: 2rem;
       font-size: 1.25rem;
   }
   
   .modal-body {
       /* Corps plus compact */
       padding: 0.875rem 1.25rem 1.125rem;
       flex: 1;
       min-height: 0;
   }
   
   .donation-summary {
       /* Résumé plus compact */
       padding: 0.625rem 0.75rem;
       margin-bottom: 0.75rem;
       border-radius: 0.5rem;
   }
   
   /* COMPACT: Amount et Currency sur la même ligne */
   .amount-display {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 0.375rem; /* Réduit l'espacement */
   }
   
   .amount-label {
       font-weight: 500;
       color: white;
       font-size: 0.875rem;
   }
   
   .amount-value {
       font-size: 1.125rem; /* Légèrement plus petit */
       font-weight: 700;
       color: #f9d849;
   }
   
   /* COMPACT: Level et Package sur la même ligne */
   .package-display-mini {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 0; /* Supprime l'espacement en bas */
   }
   
   .package-label {
       font-weight: 500;
       color: white;
       font-size: 0.875rem;
   }
   
   .package-name-mini {
       font-weight: 600;
       color: white;
       text-transform: uppercase;
       font-size: 0.875rem;
       letter-spacing: 0.03125rem;
   }
   
   .donation-form {
       display: flex;
       flex-direction: column;
       gap: 0.625rem; /* RÉDUIT: de 1rem à 0.625rem */
   }
   
   .form-group {
       display: flex;
       flex-direction: column;
       margin-bottom: 0; /* SUPPRIME les marges en bas */
   }
   
   .form-group label {
       font-size: 0.9rem;
       margin-bottom: 0.375rem; /* RÉDUIT: de 0.5rem à 0.375rem */
       font-weight: 600;
       color: #2c3e50;
   }
   
   .form-group input {
       padding: 0.75rem; /* RÉDUIT: de 0.875rem à 0.75rem */
       font-size: 0.95rem;
       border: 2px solid #e9ecef;
       border-radius: 0.5rem;
       transition: border-color 0.3s ease;
   }
   
   .form-group input:focus {
       outline: none;
       border-color: #7f9b4d;
       box-shadow: 0 0 0 3px rgba(127, 155, 77, 0.1);
   }
   
   .whatsapp-note {
       font-size: 0.8rem;
       padding: 0.5rem; /* RÉDUIT */
       margin-top: 0.25rem; /* RÉDUIT */
       background: #f0f8f0;
       border-radius: 0.5rem;
       display: flex;
       align-items: flex-start;
       gap: 0.5rem;
       line-height: 1.3;
   }
   
   .whatsapp-note i {
       color: #7f9b4d;
       margin-top: 0.1rem;
       flex-shrink: 0;
   }
   
   .form-actions {
       /* Boutons compacts et visibles */
       margin-top: 0.875rem; /* RÉDUIT */
       gap: 0.625rem; /* RÉDUIT */
       flex-direction: column;
   }
   
   /* MOBILE: Cache le bouton Cancel (X button suffit) */
   .btn-cancel {
       display: none;
   }
   
   .btn-proceed {
       padding: 0.875rem 1rem; /* RÉDUIT mais reste cliquable */
       font-size: 0.95rem;
       width: 100%;
       min-height: 44px; /* Taille tactile minimum */
       border: none;
       border-radius: 0.5rem;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
       background: #7f9b4d;
       color: white;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
   }
   
   .btn-proceed:hover {
       background: #6d8540;
   }
}

/* Fix pour très petits écrans */
@media (max-width: 30rem) {
   .modal-content {
       width: 96vw;
       max-height: 82vh;
       max-height: 82dvh;
   }
   
   .modal-header {
       padding: 0.75rem 1rem 0.625rem;
   }
   
   .modal-header h3 {
       font-size: 1.125rem;
   }
   
   .modal-body {
       padding: 0.75rem 1rem 1rem;
   }
   
   .donation-summary {
       padding: 0.5rem 0.625rem;
       margin-bottom: 0.625rem;
   }
   
   .donation-form {
       gap: 0.5rem; /* Encore plus compact */
   }
   
   .form-group label {
       font-size: 0.875rem;
       margin-bottom: 0.25rem;
   }
   
   .form-group input {
       padding: 0.6875rem;
       font-size: 0.9rem;
   }
   
   .whatsapp-note {
       font-size: 0.75rem;
       padding: 0.4375rem;
   }
   
   .form-actions {
       margin-top: 0.75rem;
       gap: 0.5rem;
   }
   
   /* MOBILE: Cache le bouton Cancel sur petits écrans aussi */
   .btn-cancel {
       display: none;
   }
   
   .btn-proceed {
       padding: 0.8125rem 0.875rem;
       font-size: 0.9rem;
       min-height: 42px;
       width: 100%;
       border: none;
       border-radius: 0.5rem;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
       background: #7f9b4d;
       color: white;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
   }
}

/* Fix pour Safari iOS avec support dvh */
@supports (height: 100dvh) {
   @media (max-width: 48rem) {
       .donation-modal {
           height: 100dvh;
       }
       
       .modal-content {
           max-height: 85dvh;
       }
   }
   
   @media (max-width: 30rem) {
       .modal-content {
           max-height: 82dvh;
       }
   }
}

/* Fix pour écrans courts (iPhone en paysage) */
@media (max-width: 48rem) and (max-height: 600px) {
   .modal-content {
       max-height: 78vh;
       max-height: 78dvh;
   }
   
   .modal-header {
       padding: 0.625rem 1rem 0.5rem;
   }
   
   .modal-body {
       padding: 0.625rem 1rem 0.875rem;
   }
   
   .donation-summary {
       padding: 0.4375rem 0.5625rem;
       margin-bottom: 0.5rem;
   }
   
   .donation-form {
       gap: 0.4375rem;
   }
   
   .form-group label {
       margin-bottom: 0.25rem;
   }
   
   .whatsapp-note {
       font-size: 0.75rem;
       padding: 0.375rem;
       margin-top: 0.1875rem;
   }
   
   .form-actions {
       margin-top: 0.625rem;
   }
   
   /* MOBILE: Cache le bouton Cancel en paysage aussi */
   .btn-cancel {
       display: none;
   }
   
   .btn-proceed {
       width: 100%;
       border: none;
       border-radius: 0.5rem;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
       background: #7f9b4d;
       color: white;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.75rem 0.875rem;
       font-size: 0.9rem;
       min-height: 40px;
   }
}