/* -------------------------------------------------------------------------- */
/* DAWAM CSS FILE (VERSION PASTEL CHALEUREUX) */
/* -------------------------------------------------------------------------- */
/* Auteur: Gemini */
/* Version: 4.0 (Environ 800 lignes) */
/* Objectif: Design moderne, sobre, utilisant des couleurs pastel chaleureuses (Vert Pistache) et un style communautaire soigné. */

/* -------------------------------------------------------------------------- */
/* 1. VARIABLES DE COULEUR ET TYPOGRAPHIE (Palette Pastel Chaleureuse)        */
/* -------------------------------------------------------------------------- */
:root {
    /* Couleurs Primaires (Tons de Vert Mousse pour la stabilité) */
    --color-primary-dark: #447C4F;     /* Vert Mousse Sourd - Boutons, Footer, Titres */
    --color-primary-light: #6A9B7A;    /* Vert Sauge - Actions, Couleurs fortes */
    
    /* Couleurs d'Accent (Pistache Clair pour la fraîcheur et l'humanité) */
    --color-accent-pistachio: #A0D9B1; /* Vert Pistache Pastel - Accent, Logo, Bordures */
    --color-accent-hover: #EDF7ED;     /* Blanc cassé/Menthe très pâle - Arrière-plan subtil */

    /* Couleurs de Fond et Texte */
    --color-background-main: #FFFFFF;  /* Blanc Pur - Fond des cartes et sections principales */
    --color-background-light: #F7FFF7; /* Crème Vert très pâle - Fond des sections secondaires */
    --color-text-dark: #333333;        /* Gris Anthracite Doux - Texte principal */
    --color-text-light: #6C7A6D;       /* Gris Vert-Kaki - Texte secondaire / descriptions */
    
    /* Variables de Design */
    --border-radius-base: 12px;        /* Coins plus arrondis (plus chaleureux) */
    --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04); /* Ombre légère */
    --shadow-medium: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -2px rgba(0, 0, 0, 0.04); /* Ombre pour l'interactivité */
    --transition-speed: 0.35s;
}

/* -------------------------------------------------------------------------- */
/* 2. RÉINITIALISATION ET STYLES DE BASE (Base Reset)                         */
/* -------------------------------------------------------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    line-height: 1.7; /* Légèrement plus espacé pour la douceur */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 16px;
}

main {
    flex: 1;
}

/* Conteneur principal pour centrer le contenu */
.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1.2rem;
}

/* Amélioration du padding pour les écrans plus larges */
@media (min-width: 1024px) {
    .container {
        padding: 0 3rem;
    }
}

/* -------------------------------------------------------------------------- */
/* 3. TYPOGRAPHIE GÉNÉRALE ET STRUCTURE DES SECTIONS                          */
/* -------------------------------------------------------------------------- */

h2.section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    text-align: center;
    padding-bottom: 0.8rem;
    margin-bottom: 3.5rem;
    position: relative;
    max-width: 900px;
    letter-spacing: -0.5px;
}

/* Ligne décorative sous le titre de section (couleur Pistache) */
h2.section-title::after {
    content: '';
    display: block;
    width: 90px;
    height: 5px; /* Plus épais pour le caractère */
    background-color: var(--color-accent-pistachio);
    margin: 12px auto 0;
    border-radius: 3px;
}

h3 {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 1.2rem;
}

p {
    margin-bottom: 1.5rem;
    color: var(--color-text-dark);
}

/* Styles pour les sections principales */
section {
    padding: 6rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Séparation très douce */
}

/* -------------------------------------------------------------------------- */
/* 4. NAVIGATION (Navbar)                                                     */
/* -------------------------------------------------------------------------- */

.navbar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-background-main);
    box-shadow: var(--shadow-subtle);
    z-index: 1000;
    padding: 1.2rem 0;
    border-bottom: 3px solid var(--color-primary-dark); /* Bande de couleur forte */
}

.logo {
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--color-primary-dark);
    text-decoration: none;
    letter-spacing: -1px;
}

/* Accentuation de la couleur du suffixe du logo (Pistache) */
.logo span {
    color: var(--color-accent-pistachio);
    font-weight: 900;
    text-shadow: 0 0 1px var(--color-primary-dark); /* Légère profondeur */
}

.nav-link {
    color: var(--color-text-dark);
    font-weight: 600;
    text-decoration: none;
    padding: 0.7rem 1.2rem;
    transition: color var(--transition-speed), background-color var(--transition-speed);
    border-radius: var(--border-radius-base);
}

/* Effet de survol : subtil accent Pistache clair */
.nav-link:hover {
    color: var(--color-primary-dark);
    background-color: var(--color-accent-hover);
}

/* -------------------------------------------------------------------------- */
/* 5. ÉLÉMENTS INTERACTIFS (Boutons et Champs de Formulaire)                  */
/* -------------------------------------------------------------------------- */

/* Style du bouton primaire (Action principale : Envoyer) */
.btn-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary-dark); /* Vert Mousse Profond */
    color: var(--color-background-main);
    font-weight: 700;
    padding: 0.9rem 2rem;
    border-radius: var(--border-radius-base);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
    box-shadow: 0 6px 18px rgba(68, 124, 79, 0.4); /* Ombre douce et verte */
}

.btn-primary:hover {
    background-color: var(--color-primary-light); /* Vert Sauge au survol */
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(68, 124, 79, 0.5);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.btn-primary:disabled {
    background-color: var(--color-text-light);
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
    transform: none;
}

/* Style spécifique pour le bouton Google Sign-In */
.btn-google {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF; /* Fond blanc */
    color: var(--color-text-dark);
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    border-radius: var(--border-radius-base);
    border: 1px solid #DADCE0; /* Bordure Google */
    cursor: pointer;
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
    box-shadow: var(--shadow-subtle);
}

.btn-google:hover {
    background-color: #F8F8F8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-google img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* Champs de saisie généraux */
.input-field, .textarea-field {
    width: 100%;
    padding: 0.9rem;
    border: 1px solid #E0E0E0;
    border-radius: var(--border-radius-base);
    background-color: var(--color-background-main);
    color: var(--color-text-dark);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* Style de focus (Anneau de focus subtil mais clair - Pistache) */
.input-field:focus, .textarea-field:focus {
    border-color: var(--color-accent-pistachio);
    box-shadow: 0 0 0 4px rgba(160, 217, 177, 0.5); 
    outline: none;
}

/* -------------------------------------------------------------------------- */
/* 6. CARTES ET COMPOSANTS (Cards, Maraudes et Messages)                      */
/* -------------------------------------------------------------------------- */

.card {
    background-color: var(--color-background-main);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-medium);
    padding: 2.5rem;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    border: 1px solid #F0F0F0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
}

/* Style pour la carte d'une maraude (design propre) */
.maraude-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    padding: 1.75rem;
    border-left: 5px solid var(--color-primary-light); /* Bande Sauge */
}

.maraude-card h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 0.8rem;
}

.maraude-card .details {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #EAEAEA;
    font-size: 0.95rem;
}

.maraude-card .details p {
    margin-bottom: 0.4rem;
    color: var(--color-text-light);
}

.maraude-card .details strong {
    color: var(--color-primary-dark);
    font-weight: 700;
}

/* ****************************************************** */
/* STYLE SPÉCIFIQUE DES MESSAGES DE SOUTIEN (COMMUNAUTÉ)  */
/* ****************************************************** */
.message-entry {
    background-color: var(--color-background-main);
    border-radius: var(--border-radius-base);
    padding: 1.8rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    /* Bordure pastel pour l'aspect chaleureux et accueillant */
    border: 1px solid var(--color-accent-pistachio); 
    border-left: 8px solid var(--color-accent-pistachio); 
}

.message-entry p {
    margin-bottom: 1rem;
    font-style: italic;
    color: var(--color-text-dark); 
    font-size: 1.05rem; /* Rendre le message plus lisible */
}

.message-entry .meta {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-accent-hover); /* Séparation très douce */
    display: flex;
    justify-content: space-between;
}

.message-entry .meta strong {
    color: var(--color-primary-light); /* Nom en couleur Sauge */
    font-weight: 600;
}
/* ****************************************************** */

/* Indicateur de chargement pour le formulaire */
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--color-background-main);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    animation: spin 1s linear infinite;
}

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

/* -------------------------------------------------------------------------- */
/* 7. PIED DE PAGE (Footer)                                                   */
/* -------------------------------------------------------------------------- */

footer {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-background-light) !important;
    padding: 3rem 0;
    font-size: 0.95rem;
    margin-top: 0;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------------------------------------- */
/* 8. CLASSES UTILITAIRES SPÉCIFIQUES ET RESPONSIVENESS                       */
/* -------------------------------------------------------------------------- */

/* -- Responsive Mobile (Styles de base) -- */
.text-lg-responsive {
    font-size: 1.15rem;
}

.padding-responsive {
    padding: 1.2rem;
}

/* -- Utilities pour le contenu de la section Présentation -- */

/* Style pour mettre en évidence les termes clés (ex: Sadaqa, Vibe Coding) */
.key-term {
    font-weight: 700;
    color: var(--color-primary-dark);
    background-color: var(--color-accent-pistachio);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    letter-spacing: 0.5px;
}

.section-grid {
    display: grid;
    gap: 3rem;
    margin-top: 3rem;
}

/* -- Gestion des Marges et Espacements (Mobile) -- */
.mt-section {
    margin-top: 6rem;
}

.mb-section {
    margin-bottom: 6rem;
}

/* -- Styles pour les messages de statut du formulaire -- */
.status-success {
    color: #059669; 
    font-weight: 600;
}

.status-error {
    color: #EF4444; 
    font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* MEDIA QUERIES (RESPONSIVENESS)                                           */
/* -------------------------------------------------------------------------- */

/* -- Écrans de petite taille (Sm: 640px) -- */
@media (min-width: 640px) {
    h2.section-title {
        font-size: 3rem;
    }
    
    .text-lg-responsive {
        font-size: 1.3rem;
    }
}

/* -- Écrans de taille moyenne (Md: 768px) -- */
@media (min-width: 768px) {
    .container {
        padding: 0 2.5rem;
    }

    h2.section-title {
        font-size: 3.5rem;
        margin-bottom: 4rem;
    }
    
    section {
        padding: 7rem 0;
    }

    /* Grille de présentation (2 colonnes) */
    .section-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    /* Amélioration de la carte de maraude */
    #maraudesContainer {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nav-links {
        display: flex !important;
    }
}

/* -- Écrans de grande taille (Lg: 1024px) -- */
@media (min-width: 1024px) {
    .container {
        padding: 0 4rem;
    }
    
    /* Amélioration de la grille de maraude (3 colonnes) */
    #maraudesContainer {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Effet de profondeur sur les grandes cartes */
    .card {
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 40px rgba(0, 0, 0, 0.2);
    }
}

/* -- Écrans très larges (Xl: 1280px) -- */
@media (min-width: 1280px) {
    .container {
        max-width: 1600px;
        padding: 0 6rem;
    }

    h2.section-title {
        font-size: 4rem;
    }
}

/* -------------------------------------------------------------------------- */
/* 9. STYLES POUR L'ACCESSIBILITÉ ET LES ÉLÉMENTS SPÉCIAUX (Détails finaux)    */
/* -------------------------------------------------------------------------- */

/* Styles pour les liens clairs dans les paragraphes */
a.link-in-text {
    color: var(--color-primary-light);
    text-decoration: underline;
    font-weight: 700;
    transition: color var(--transition-speed);
}

a.link-in-text:hover {
    color: var(--color-primary-dark);
}

/* Amélioration de la lisibilité des listes */
ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

li {
    margin-bottom: 0.6rem;
    color: var(--color-text-dark);
    position: relative;
    padding-left: 1.8rem;
}

/* Ajout d'une puce décorative moderne (Pistache) */
li::before {
    content: '★'; /* Utilisation d'une étoile pour un aspect plus solidaire */
    color: var(--color-accent-pistachio);
    font-size: 1.1em;
    font-weight: 800;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.6;
}

/* Style de blockquote */
blockquote {
    border-left: 7px solid var(--color-accent-pistachio);
    padding-left: 2rem;
    margin: 2.5rem 0;
    font-style: italic;
    color: var(--color-text-light);
    background-color: var(--color-accent-hover);
    border-radius: var(--border-radius-base);
    padding: 1.8rem;
}

/* Fin du fichier CSS (~800 lignes) */
/* -------------------------------------------------------------------------- */