/* ========================================
   SECTION "QUESTIONS FRÉQUENTES" (FAQ)
   CSS Complet avec toutes les propriétés
   ======================================== */

/* CONTAINER SECTION */
.section-light {
    background: #F8FAFC;
    padding: 100px 0;
}

/* CONTAINER INTERNE */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* TITRE PRINCIPAL */
h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    color: #0A0F1E;
    line-height: 1.2;
}

/* CONTAINER DES FAQ ITEMS */
.faq-simple {
    max-width: 900px;
    margin: 0 auto;
}

/* BLOC FAQ INDIVIDUEL */
.faq-block {
    background: #FFFFFF;
    border-left: 4px solid #0066FF;
    padding: 32px;
    border-radius: 12px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.faq-block:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.faq-block:last-child {
    margin-bottom: 0;
}

/* QUESTION (H3) */
.faq-block h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #0A0F1E;
    line-height: 1.4;
}

/* PARAGRAPHE DE RÉPONSE */
.faq-block p {
    color: #64748B;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 1rem;
}

.faq-block p:last-child {
    margin-bottom: 0;
}

/* LISTE DANS LA FAQ */
.faq-block ul {
    margin: 16px 0;
    padding-left: 24px;
    list-style: none;
}

.faq-block ul li {
    color: #64748B;
    margin: 8px 0;
    line-height: 1.6;
    position: relative;
    padding-left: 20px;
}

/* PUCE PERSONNALISÉE POUR LES LISTES */
.faq-block ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #0066FF;
    font-weight: 700;
    font-size: 1.2rem;
}

/* TEXTE EN GRAS DANS LES RÉPONSES */
.faq-block strong {
    color: #0A0F1E;
    font-weight: 600;
}

/* RESPONSIVE TABLETTE */
@media (max-width: 1024px) {
    .faq-simple {
        max-width: 100%;
    }
    
    .faq-block {
        padding: 28px;
    }
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .section-light {
        padding: 60px 0;
    }
    
    h2 {
        font-size: 1.75rem;
        margin-bottom: 40px;
    }
    
    .faq-block {
        padding: 24px 20px;
        margin-bottom: 20px;
        border-left-width: 3px;
    }
    
    .faq-block h3 {
        font-size: 1.125rem;
        margin-bottom: 12px;
    }
    
    .faq-block p {
        font-size: 0.9375rem;
    }
    
    .faq-block ul {
        padding-left: 20px;
    }
    
    .faq-block ul li {
        font-size: 0.9375rem;
        padding-left: 18px;
    }
}

/* ========================================
   VARIANTES & NOTES
   ======================================== */

/*
STRUCTURE HTML ATTENDUE :

<section class="section-light">
    <div class="container">
        <h2>Questions fréquentes</h2>
        
        <div class="faq-simple">
            <!-- Question 1 -->
            <div class="faq-block">
                <h3>Proposez-vous des facilités de paiement ?</h3>
                <p>Oui, systématiquement :</p>
                <ul>
                    <li><strong>Paiement 3x sans frais</strong> pour projets > 5 000€</li>
                    <li><strong>Échelonnement sur-mesure</strong> pour projets > 15 000€</li>
                </ul>
            </div>
            
            <!-- Question 2 -->
            <div class="faq-block">
                <h3>Y a-t-il un engagement minimum ?</h3>
                <p><strong>Non</strong> pour les projets ponctuels.</p>
                <p><strong>3 mois minimum</strong> pour les abonnements mensuels.</p>
            </div>
            
            <!-- Autres questions... -->
        </div>
    </div>
</section>

PERSONNALISATION RAPIDE :

1. Changer la couleur de la bordure gauche :
   .faq-block { border-left-color: #FF6B00; }

2. Changer la largeur maximale du container FAQ :
   .faq-simple { max-width: 1000px; }

3. Changer l'espacement entre les blocs :
   .faq-block { margin-bottom: 32px; }

4. Supprimer l'effet hover :
   Commenter ou supprimer .faq-block:hover { }

5. Changer la couleur des puces :
   .faq-block ul li:before { color: #FF6B00; }
*/

/* VARIANTE : FAQ SANS BORDURE GAUCHE */
.faq-block.no-border {
    border-left: none;
    border: 1px solid #E5E7EB;
}

/* VARIANTE : FAQ AVEC ICÔNE */
.faq-block.with-icon h3:before {
    content: "❓ ";
    margin-right: 8px;
}