/* =========================================
   STYLE.CSS - VERSION ÉQUILIBRÉE (PROPRE & NET)
   ========================================= */

/* === RESET & BASE === */
* { margin:0; padding:0; box-sizing:border-box; }

body { 
    font-family: 'Roboto', sans-serif; 
    background-color: #f0f2f5; 
    color: #1a1a1a; 
    line-height: 1.6; 
    font-size: 18px; 
}

/* === NAVIGATION === */
.navbar { 
    background:#fff; height: 60px; 
    border-bottom: 1px solid #ddd; 
    position: sticky; top: 0; z-index: 999;
}
.nav-content {
    max-width: 1000px; margin: 0 auto; display: flex; 
    justify-content: space-between; align-items: center; 
    height: 100%; padding: 0 20px;
}
.logo { font-family:'Merriweather', serif; font-weight:900; color:#d00; font-size:1.1rem; }
.menu-icon { font-size: 1.5rem; }

/* === CONTAINER === */
.main-container { 
    max-width: 700px; margin: 0 auto; 
    background: #fff; min-height: 100vh;
}
@media (min-width: 768px) {
    .main-container { margin: 30px auto; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
    .article-body { padding: 40px 50px !important; }
    .headline { font-size: 2.5rem !important; }
}
.article-body { padding: 20px 20px 40px; }

/* === TYPO === */
.meta-info { font-size: 0.75rem; color: #666; text-transform: uppercase; font-weight: 700; margin-bottom: 15px; }
.headline { font-family: 'Merriweather', serif; font-weight: 900; font-size: 1.9rem; line-height: 1.2; margin-bottom: 15px; color: #111; }
.sub-headline { font-family: 'Roboto', sans-serif; font-size: 1.2rem; color: #444; margin-bottom: 25px; border-left: 4px solid #d00; padding-left: 15px; font-style: italic; }
h3 { font-family: 'Merriweather', serif; font-size: 1.5rem; margin: 35px 0 15px; color: #000; font-weight: 800; }
p { margin-bottom: 20px; }
.first-letter { float: left; font-size: 3.5rem; line-height: 0.8; font-weight: 900; font-family: 'Merriweather', serif; color: #cc0000; margin-right: 8px; margin-bottom: -5px; }

/* === IMAGES === */
img { max-width: 100%; height: auto; }
.content-img { width: 100%; border-radius: 6px; margin-bottom: 10px; }
.featured-figure { margin: 25px 0; }
figcaption { font-size: 0.85rem; color: #777; text-align: center; margin-top: 8px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.small-img-container { text-align: center; margin: 20px 0; }
.small-img-container img { max-width: 300px; display: inline-block; }

/* === AVATARS FIXES (Le plus important pour toi) === */
.avatar-wrapper {
    width: 50px !important;       /* Taille standard avatar */
    height: 50px !important;
    min-width: 50px !important;   /* Bloque la taille pour ne pas écraser */
    margin-right: 15px;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
    flex-shrink: 0;               /* Vital pour les commentaires */
}
.avatar-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
}

/* === BLOC AUTEUR === */
.author-block { 
    display:flex; align-items:center; margin-bottom:25px; 
    background: #f8f9fa; padding: 10px 15px; 
    border-radius: 50px; border: 1px solid #e9ecef;
    width: fit-content;
}
.author-text { font-size: 0.8rem; line-height: 1.3; }
.separator { border:0; border-top:1px solid #eee; margin:25px 0; }

/* === BOXES === */
.highlight-box { background: #fff5f5; padding: 25px; border-radius: 8px; border: 1px solid #ffe0e0; margin: 30px 0; }
.warning-box { background: #fffbe6; padding: 20px; border-radius: 6px; border-left: 4px solid #ffd700; margin: 25px 0; font-size: 0.95rem; }
.cross-list, .check-list { list-style: none; }
.cross-list li, .check-list li { margin-bottom: 10px; font-weight: 500; }

/* === SECTION PRE-QUIZ (Témoignage + Bouton) === */
.pre-quiz-container { 
    text-align: center; 
    margin: 40px 0 20px 0; 
    background: #fff; /* Fond blanc pour détacher */
    padding: 10px;
}

/* Style du Témoignage Robert */
.pre-quiz-testimonial {
    background-color: #f9f9f9;
    border-left: 5px solid #28a745; /* Bordure verte "Validé" */
    padding: 15px;
    margin-bottom: 20px;
    text-align: left;
    border-radius: 4px;
    font-style: italic;
}
.quote-text { margin-bottom: 10px; font-size: 0.95rem; color: #444; }
.quote-author { display: flex; align-items: center; font-style: normal; font-weight: bold; font-size: 0.85rem; color: #333; }
.mini-avatar { width: 50px !important; height: 50px !important; border-radius: 50%; margin-right: 15px; margin-bottom:0; }

/* Phrase de transition */
.pre-quiz-text {
    font-size: 1rem;
    font-weight: 500;
    color: #222;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Bouton Rouge (Adapté pour texte long) */
.red-trigger-btn {
    background-color: #e63946; 
    color: white;
    font-size: 1.1rem; /* Police un peu réduite pour que ça rentre */
    font-weight: 900;
    border: none; 
    padding: 15px 10px; /* Moins de padding sur les côtés pour laisser place au texte */
    border-radius: 12px; /* Moins arrondi pour faire "bloc" */
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
    width: 100%; 
    max-width: 100%;
    line-height: 1.3; /* Lignes resserrées */
    white-space: normal; /* Autorise le texte à aller à la ligne */
}
.red-trigger-btn:hover { background-color: #d62828; transform: scale(1.02); }

/* === LE QUIZ (TAILLE NORMALE/LISIBLE) === */
#quiz-wrapper { margin-top: 20px; }
.quiz-card { 
    background: #f4f9ff; 
    border: 2px solid #007bff; /* Bordure standard */
    border-radius: 12px; 
    padding: 20px;             /* Espacement normal */
    text-align: center;
}
.quiz-header h4 { color: #0056b3; font-weight: 900; margin-bottom: 15px; font-size: 1.3rem; }
.progress-track { background: #dceeff; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 20px; }
#progress-bar { background: #007bff; height: 100%; width: 5%; transition: width 0.3s ease; }

.question-text { 
    font-size: 1.2rem; /* Taille titre standard */
    font-weight: 700; 
    margin-bottom: 20px; 
    line-height:1.3; 
    color: #222;
}
.option-btn { 
    display: block; width: 100%; background: #fff; 
    border: 2px solid #dae1e7; 
    padding: 15px;           /* Hauteur de bouton standard */
    margin-bottom: 10px; 
    border-radius: 8px; 
    text-align: left; 
    font-weight: 600; 
    cursor: pointer; 
    font-size: 1rem;       
    color: #333;
}
.option-btn:hover { border-color: #007bff; background: #007bff; color: #fff; }

/* RESULTAT */
.result-badge { background: #dc3545; color: #fff; padding: 5px 15px; font-weight: bold; border-radius: 50px; font-size: 0.8rem; margin-bottom: 10px; display:inline-block;}
.offer-box { background: #fff; padding: 20px; border-radius: 8px; border: 2px dashed #28a745; margin-top: 20px; }
.cta-button { 
    display: block; background: #28a745; color: #fff; text-decoration: none; 
    padding: 18px; font-weight: 900; font-size: 1.2rem; border-radius: 6px; 
    margin-top: 15px; text-transform: uppercase; box-shadow: 0 4px 0 #1e7e34;
}
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } }
.spinner { width: 40px; height: 40px; border: 4px solid #ddd; border-top: 4px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* === COMMENTAIRES (Alignement Facebook Pro) === */
.comments-section { margin-top: 40px; padding-top: 25px; border-top: 1px solid #eee; }
.comment-row { 
    display: flex; 
    align-items: flex-start; /* Aligne en haut */
    margin-bottom: 20px; 
}
/* .avatar-wrapper gère l'image */

.comment-body { 
    flex: 1; 
    background: #f0f2f5; 
    padding: 12px 15px; 
    border-radius: 18px; 
}
.c-name { font-weight: bold; color: #3b5998; font-size: 0.9rem; display: block; margin-bottom: 2px; }
.c-text { font-size: 0.9rem; margin-bottom: 0; line-height: 1.4; color: #1c1e21; }

footer { background: #222; color: #999; text-align: center; padding: 30px 20px; font-size: 0.8rem; }
footer a { color: #ccc; }