/* ==========================================================================
   STYLE.CSS v2 - MIVA PROTOCOL - OPTIMIZED FOR CONVERSION & UX
   Palette: Oxford Blue #002147 | Teal #008080 | Action Red #e63946
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body { 
    font-family: 'Roboto', sans-serif; 
    background-color: #f4f7f9; 
    color: #222; 
    line-height: 1.75; 
    font-size: 18px; /* Légèrement réduit pour meilleure lisibilité */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.navbar { 
    background: #002147; 
    color: white; 
    padding: 16px 0; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    border-bottom: 3px solid #008080;
    box-shadow: 0 2px 10px rgba(0, 33, 71, 0.15);
}

.nav-content { 
    max-width: 1100px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 20px; 
}

.logo { 
    font-family: 'Merriweather', serif; 
    font-weight: 900; 
    letter-spacing: 1px; 
    font-size: 1.25rem; 
}

.nav-links { 
    font-size: 0.7rem; 
    font-weight: 700; 
    opacity: 0.7; 
    word-spacing: 8px; 
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

.nav-links:hover {
    opacity: 1;
}

/* Advertorial Disclosure */
.advertorial-disclosure {
    background: #f8f9fa;
    text-align: center;
    padding: 8px 15px;
    border-bottom: 1px solid #e9ecef;
}

.advertorial-disclosure span {
    font-size: 0.7rem;
    font-weight: 700;
    color: #666;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ==========================================================================
   CONTAINER & ARTICLE
   ========================================================================== */

.main-container { 
    max-width: 800px; 
    margin: 0 auto; 
    background: #fff; 
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.08); 
}

.article-body { 
    padding: 50px 70px; 
}

/* Fix scroll offset pour navbar sticky */
#quiz-wrapper, #final-result { 
    scroll-margin-top: 100px; 
}

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */

.meta-info { 
    font-size: 0.8rem; 
    color: #008080; 
    text-transform: uppercase; 
    font-weight: 700; 
    margin-bottom: 25px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 10px; 
    display: block; 
}

.headline { 
    font-family: 'Merriweather', serif; 
    font-weight: 900; 
    font-size: 2.6rem; 
    line-height: 1.2; 
    margin-bottom: 25px; 
    color: #002147; 
}

.author-line { 
    font-size: 0.95rem; 
    color: #555; 
    font-style: italic; 
    margin-bottom: 35px; 
}

.first-letter { 
    float: left; 
    font-size: 4.5rem; 
    line-height: 0.75; 
    font-weight: 900; 
    font-family: 'Merriweather', serif; 
    color: #002147; 
    margin-right: 12px; 
    margin-top: 12px; 
}

p { 
    margin-bottom: 22px; 
    color: #333; 
}

h3 { 
    font-family: 'Merriweather', serif; 
    font-size: 1.7rem; 
    margin: 45px 0 20px; 
    color: #002147; 
    border-left: 5px solid #008080; 
    padding-left: 15px; 
}

/* ==========================================================================
   IMAGES & FIGURES
   ========================================================================== */

.featured-figure { 
    margin: 40px 0; 
}

.content-img { 
    width: 100%; 
    border-radius: 8px; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-img:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

figcaption { 
    font-size: 0.85rem; 
    color: #666; 
    text-align: center; 
    margin-top: 12px; 
    background: #f9f9f9; 
    padding: 12px 15px; 
    border-radius: 6px;
    border-left: 3px solid #008080;
}

/* ==========================================================================
   AUTHOR BIO BLOCK
   ========================================================================== */

.author-bio-block { 
    display: flex; 
    align-items: center; 
    background: linear-gradient(135deg, #fdfdfd 0%, #f8fafb 100%);
    padding: 25px; 
    border: 1px solid #e8eef2; 
    border-radius: 12px; 
    margin-bottom: 30px; 
    gap: 20px;
    transition: box-shadow 0.3s ease;
}

.author-bio-block:hover {
    box-shadow: 0 5px 20px rgba(0, 128, 128, 0.1);
}

.author-bio-block .avatar-wrapper { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    overflow: hidden; 
    flex-shrink: 0; 
    border: 3px solid #008080;
    box-shadow: 0 4px 15px rgba(0, 128, 128, 0.2);
}

.author-bio-block .avatar-wrapper img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.author-bio-block p { 
    margin-bottom: 0; 
    font-size: 0.95rem; 
}

/* ==========================================================================
   BOXES & LISTS
   ========================================================================== */

.highlight-box { 
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    padding: 30px; 
    border-radius: 15px; 
    border: 1px solid #cce3ff; 
    margin: 40px 0;
    border-left: 5px solid #008080;
}

.cross-list, .check-list, .article-list { 
    list-style: none; 
    margin-top: 20px; 
}

.article-list li { 
    margin-bottom: 15px; 
    font-style: italic; 
    color: #444; 
    position: relative; 
    padding-left: 25px; 
}

.article-list li::before { 
    content: "•"; 
    color: #008080; 
    position: absolute; 
    left: 0; 
    font-weight: bold; 
    font-size: 1.4rem; 
}

.check-list li { 
    margin-bottom: 12px; 
    font-weight: 600; 
    color: #002147; 
    font-size: 1.02rem; 
}

.cross-list li {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed #ddd;
}

.cross-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.assessment-pre-sell { 
    background: #fff; 
    padding: 30px; 
    border: 2px solid #008080; 
    border-radius: 15px; 
    margin: 40px 0;
    box-shadow: 0 5px 25px rgba(0, 128, 128, 0.1);
}

.check-list-simple { 
    list-style: none; 
    margin: 20px 0; 
    padding-left: 0; 
}

.check-list-simple li { 
    margin-bottom: 15px; 
    color: #222; 
    font-weight: 500; 
    font-size: 1.05rem; 
    border-bottom: 1px solid #f0f0f0; 
    padding-bottom: 12px; 
}

/* ==========================================================================
   PRE-QUIZ CONTAINER
   ========================================================================== */

.pre-quiz-container { 
    text-align: center; 
    margin: 40px 0; 
    background: linear-gradient(135deg, #f9fbfd 0%, #f0f4f8 100%);
    padding: 40px; 
    border-radius: 20px; 
    border: 1px solid #e1e8f0; 
}

.pre-quiz-testimonial { 
    background: white; 
    padding: 25px; 
    border-radius: 15px; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06); 
    margin-bottom: 25px; 
    text-align: left;
    border-left: 4px solid #008080;
}

.quote-text { 
    font-style: italic; 
    font-size: 1.05rem; 
    color: #444; 
    margin-bottom: 15px; 
    display: block;
    line-height: 1.6;
}

.quote-author {
    display: flex;
    align-items: center;
}

/* Avatar Sarah K (mini) */
.mini-avatar { 
    width: 50px !important; 
    height: 50px !important; 
    border-radius: 50%; 
    vertical-align: middle; 
    margin-right: 12px; 
    object-fit: cover; 
    border: 2px solid #008080;
    flex-shrink: 0;
    display: inline-block;
}

/* ==========================================================================
   BOUTONS CTA - ROUGE (CONVERSION OPTIMIZED)
   ========================================================================== */

.red-trigger-btn { 
    background: linear-gradient(135deg, #e63946 0%, #d62839 100%);
    color: white !important; 
    font-size: 1.3rem; 
    font-weight: 800; 
    border: none; 
    padding: 20px 25px; 
    border-radius: 12px; 
    cursor: pointer; 
    width: 100%; 
    box-shadow: 0 6px 0 #b71c2a, 0 8px 25px rgba(230, 57, 70, 0.35); 
    transition: all 0.2s ease;
    line-height: 1.35;
    text-transform: uppercase;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    overflow: hidden;
}

.red-trigger-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #b71c2a, 0 12px 35px rgba(230, 57, 70, 0.45);
}

.red-trigger-btn:active {
    transform: translateY(2px);
    box-shadow: 0 4px 0 #b71c2a, 0 6px 20px rgba(230, 57, 70, 0.3);
}

/* Animation Pulse */
.pulse { 
    animation: pulse-red 2s infinite; 
}

@keyframes pulse-red { 
    0% { box-shadow: 0 6px 0 #b71c2a, 0 0 0 0 rgba(230, 57, 70, 0.5); } 
    70% { box-shadow: 0 6px 0 #b71c2a, 0 0 0 18px rgba(230, 57, 70, 0); } 
    100% { box-shadow: 0 6px 0 #b71c2a, 0 0 0 0 rgba(230, 57, 70, 0); } 
}

/* ==========================================================================
   QUIZ CARD
   ========================================================================== */

.quiz-card { 
    background: #fff; 
    border: 3px solid #002147; 
    border-radius: 20px; 
    padding: 40px; 
    margin-top: 40px;
    box-shadow: 0 10px 40px rgba(0, 33, 71, 0.1);
}

.quiz-header h4 {
    color: #002147;
    font-family: 'Merriweather', serif;
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.progress-track { 
    background: #e9ecef; 
    height: 10px; 
    border-radius: 5px; 
    margin: 18px 0; 
    overflow: hidden; 
}

#progress-bar { 
    background: linear-gradient(90deg, #008080 0%, #00a3a3 100%);
    height: 100%; 
    width: 0%; 
    transition: width 0.4s ease;
    border-radius: 5px;
}

.option-btn { 
    display: block; 
    width: 100%; 
    background: #f8f9fa; 
    border: 2px solid #e9ecef; 
    padding: 16px 18px; 
    margin-bottom: 12px; 
    border-radius: 10px; 
    text-align: left; 
    font-weight: 600; 
    font-size: 1.02rem; 
    cursor: pointer; 
    transition: all 0.25s ease; 
    -webkit-appearance: none; 
    appearance: none;
    line-height: 1.45;
}

.option-btn:hover { 
    border-color: #008080; 
    background: linear-gradient(135deg, #f0fafa 0%, #e6f7f7 100%);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 128, 128, 0.15);
}

/* ==========================================================================
   RESULTATS DU QUIZ
   ========================================================================== */

.result-badge { 
    background: linear-gradient(135deg, #ffcc00 0%, #ffdd44 100%);
    color: #000; 
    padding: 10px 20px; 
    font-weight: 800; 
    border-radius: 6px; 
    display: inline-block; 
    margin-bottom: 15px; 
    font-size: 0.95rem;
    box-shadow: 0 3px 10px rgba(255, 204, 0, 0.3);
}

.status-label { 
    font-weight: 700; 
    color: #d00; 
    margin-bottom: 30px; 
    font-size: 1.15rem; 
    text-transform: uppercase; 
}

.result-section { 
    text-align: left; 
    margin-bottom: 28px; 
    border-bottom: 1px dotted #ddd; 
    padding-bottom: 20px; 
}

.result-section:last-of-type {
    border-bottom: none;
}

.result-section strong { 
    display: block; 
    font-size: 1.25rem; 
    color: #002147; 
    margin-bottom: 10px; 
    font-family: 'Merriweather', serif; 
}

.result-section p { 
    font-size: 1rem; 
    margin-bottom: 0; 
    line-height: 1.65; 
    color: #444; 
}

/* CTA BUTTON FINAL - ROUGE (identique au premier pour cohérence) */
.cta-button { 
    display: block; 
    background: linear-gradient(135deg, #e63946 0%, #d62839 100%) !important;
    color: white !important; 
    text-decoration: none; 
    padding: 22px 25px; 
    font-weight: 800; 
    font-size: 1.35rem; 
    border-radius: 12px; 
    margin-top: 25px; 
    text-align: center; 
    box-shadow: 0 6px 0 #b71c2a, 0 8px 25px rgba(230, 57, 70, 0.35);
    transition: all 0.2s ease;
    -webkit-appearance: none; 
    appearance: none;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #b71c2a, 0 12px 35px rgba(230, 57, 70, 0.45);
}

.cta-button:active {
    transform: translateY(2px);
    box-shadow: 0 4px 0 #b71c2a, 0 6px 20px rgba(230, 57, 70, 0.3);
}

.offer-box {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px dashed #e9ecef;
}

.guarantee {
    font-size: 0.9rem;
    color: #666;
    margin-top: 15px;
    font-style: italic;
}

/* ==========================================================================
   TÉMOIGNAGES BAS DE PAGE
   ========================================================================== */

.bottom-testimonials { 
    margin-top: 60px; 
    background: linear-gradient(135deg, #fdfdfd 0%, #f8fafb 100%);
    padding: 40px; 
    border-radius: 15px; 
    border: 1px solid #eee; 
}

.bottom-testimonials h3 {
    text-align: center;
    border-left: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 35px;
}

.story-item { 
    margin-bottom: 30px; 
    background: #fff; 
    padding: 25px; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); 
    border-left: 5px solid #002147;
    transition: all 0.3s ease;
}

.story-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-left-color: #008080;
}

.story-item:last-child {
    margin-bottom: 0;
}

.story-header { 
    display: flex; 
    align-items: center; 
    margin-bottom: 15px; 
    gap: 15px; 
}

.testimonial-avatar { 
    width: 55px !important; 
    height: 55px !important; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 3px solid #008080; 
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 128, 128, 0.2);
}

.story-item strong { 
    color: #002147; 
    font-size: 1.05rem; 
}

.story-item p { 
    font-size: 1rem; 
    line-height: 1.65; 
    font-style: italic; 
    color: #555; 
    margin-bottom: 0; 
}

/* ==========================================================================
   FINAL MESSAGE
   ========================================================================== */

.final-message {
    margin-top: 50px;
    padding: 40px;
    background: linear-gradient(135deg, #002147 0%, #003366 100%);
    border-radius: 15px;
    text-align: center;
}

.final-message h3 {
    color: white;
    border-left: none;
    padding-left: 0;
    margin-top: 0;
    text-align: center;
}

.final-message p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05rem;
}

.final-message .red-trigger-btn {
    margin-top: 25px;
}

/* ==========================================================================
   LOADING & ANIMATIONS
   ========================================================================== */

.spinner { 
    width: 50px; 
    height: 50px; 
    border: 5px solid #f3f3f3; 
    border-top: 5px solid #008080; 
    border-radius: 50%; 
    animation: spin 0.8s linear infinite; 
    margin: 25px auto; 
}

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

#analyzing-screen {
    text-align: center;
    padding: 20px 0;
}

#analyzing-screen h5 {
    color: #002147;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

#status-updates p {
    animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer { 
    background: #002147; 
    color: #999; 
    text-align: center; 
    padding: 50px 30px; 
    font-size: 0.85rem; 
}

footer p {
    color: #999;
    margin-bottom: 10px;
}

.disclaimer { 
    margin: 20px 0; 
    line-height: 1.6; 
    font-size: 0.78rem;
    color: #777;
}

.footer-links {
    margin-top: 20px;
    font-size: 0.8rem;
}

.footer-links a {
    color: #008080;
    text-decoration: none;
}

/* ==========================================================================
   SEPARATORS
   ========================================================================== */

.separator,
.section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ddd, transparent);
    margin: 40px 0;
}

/* FIX : Strong dans les résultats du quiz */
.result-section p strong,
#final-result p strong {
    color: #333;
    font-size: inherit;
    font-weight: 700;
    display: inline;
}

/* PHASES BOX - 3 phases MIVA */
.phases-box {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    padding: 25px 30px;
    border-radius: 15px;
    border: 1px solid #cce3ff;
    border-left: 5px solid #008080;
    margin: 30px 0;
}

.phase-item {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #c5d9e8;
}

.phase-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.phase-title {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    color: #002147;
    margin-bottom: 8px;
}

.phase-item p {
    margin-bottom: 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #444;
}

/* ASSESSMENT BOX - Section pré-quiz optimisée */
.assessment-box {
    background: linear-gradient(135deg, #002147 0%, #003366 100%);
    padding: 40px 35px;
    border-radius: 20px;
    margin: 50px 0;
    color: white;
}

.assessment-header {
    text-align: center;
    margin-bottom: 25px;
}

.assessment-badge {
    display: inline-block;
    background: #008080;
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 20px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.assessment-box h3 {
    color: white;
    border-left: none;
    padding-left: 0;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.3;
}

.assessment-box p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.assessment-box p strong {
    color: white;
}

.why-take {
    margin-top: 25px;
    margin-bottom: 15px !important;
}

.assessment-benefits {
    margin: 25px 0;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px 18px;
    border-radius: 10px;
    border-left: 4px solid #008080;
}

.benefit-item:last-child {
    margin-bottom: 0;
}

.benefit-icon {
    color: #00d4aa;
    font-size: 1.3rem;
    font-weight: 700;
    flex-shrink: 0;
}

.benefit-item div {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    line-height: 1.5;
}

.benefit-item strong {
    color: white;
    display: block;
    margin-bottom: 3px;
}

.assessment-cta {
    text-align: center;
    margin-top: 30px;
}

.cta-arrow {
    font-size: 2.5rem;
    margin-bottom: 10px;
    animation: bounce 1.5s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ==========================================================================
   POPUPS - Privacy, Terms, Contact
   ========================================================================== */

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    backdrop-filter: blur(3px);
}

.popup-overlay.active {
    display: block;
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    width: 90%;
    max-width: 550px;
    max-height: 80vh;
    border-radius: 15px;
    z-index: 2001;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.popup.active {
    display: block;
    animation: popupIn 0.3s ease;
}

@keyframes popupIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: #002147;
    color: white;
}

.popup-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: white;
    border-left: none;
    padding-left: 0;
}

.popup-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.popup-close:hover {
    opacity: 1;
}

.popup-content {
    padding: 25px;
    max-height: 60vh;
    overflow-y: auto;
}

.popup-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #444;
}

.popup-content p:last-child {
    margin-bottom: 0;
}

.popup-content a {
    color: #008080;
    text-decoration: none;
}

.popup-content a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   MOBILE RESPONSIVE - TOUT REGROUPÉ (max-width: 600px)
   ========================================================================== */

@media (max-width: 600px) {
    
    /* Base */
    body {
        font-size: 16px;
        line-height: 1.7;
    }
    
    /* Navbar */
    .nav-links { display: none; }
    .nav-content { justify-content: center; }
    .navbar { padding: 14px 0; }
    
    /* Article */
    .article-body { padding: 25px 18px; }
    
    /* Titre principal */
    .headline { 
        font-size: 1.55rem; 
        line-height: 1.3; 
        margin-bottom: 20px;
    }
    
    /* First letter */
    .first-letter { 
        font-size: 3.2rem; 
        margin-right: 8px; 
        margin-top: 8px; 
    }
    
    /* H3 titres de section */
    h3 {
        font-size: 1.3rem;
        margin: 30px 0 15px;
        padding-left: 12px;
    }
    
    /* Paragraphes */
    p {
        margin-bottom: 18px;
    }
    
    /* Highlight box */
    .highlight-box {
        padding: 20px 15px;
        margin: 30px 0;
    }
    
    /* Author bio block */
    .author-bio-block {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
        gap: 15px;
    }
    
    .author-bio-block .avatar-wrapper {
        width: 70px;
        height: 70px;
    }
    
    /* Pre-quiz container */
    .pre-quiz-container { 
        padding: 25px 15px;
        margin: 30px 0;
    }
    
    .pre-quiz-testimonial {
        padding: 18px 15px;
    }
    
    .quote-text {
        font-size: 0.98rem;
    }
    
    /* Bouton rouge CTA */
    .red-trigger-btn { 
        font-size: 1rem; 
        padding: 18px 15px; 
        line-height: 1.4;
        border-radius: 10px;
    }
    
    /* Assessment pre-sell */
    .assessment-pre-sell {
        padding: 20px 15px;
    }
    
    .check-list-simple li {
        font-size: 0.98rem;
    }
    
    /* Quiz card */
    .quiz-card { 
        padding: 20px 15px;
        margin-top: 30px;
    }
    
    .quiz-header h4 {
        font-size: 1.1rem;
    }
    
    /* Question text */
    .question-text { 
        font-size: 1.05rem !important; 
        margin-bottom: 18px !important; 
        line-height: 1.45 !important;
    }
    
    /* Options du quiz - Compact pour tout voir */
    .option-btn { 
        padding: 13px 12px; 
        font-size: 0.92rem; 
        line-height: 1.4;
        margin-bottom: 10px;
    }
    
    .option-btn:hover {
        transform: translateX(3px);
    }
    
    /* Progress bar */
    .progress-track { 
        margin: 12px 0;
        height: 8px;
    }
    
    /* Résultats */
    .result-badge { 
        font-size: 0.82rem; 
        padding: 8px 14px; 
    }
    
    .status-label {
        font-size: 1rem;
    }
    
    .result-section strong { 
        font-size: 1.1rem; 
    }
    
    .result-section p { 
        font-size: 0.95rem; 
    }
    
    #final-result h5 { 
        font-size: 1.15rem !important; 
    }
    
    .cta-button {
        font-size: 1.1rem;
        padding: 18px 15px;
    }
    
    /* Témoignages bas */
    .bottom-testimonials {
        padding: 25px 15px;
        margin-top: 40px;
    }
    
    .bottom-testimonials h3 {
        font-size: 1.25rem;
        margin-bottom: 25px;
    }
    
    .story-item {
        padding: 18px 15px;
        margin-bottom: 20px;
    }
    
    .story-item p {
        font-size: 0.95rem;
    }
    
    .testimonial-avatar {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Final message */
    .final-message {
        padding: 30px 20px;
        margin-top: 40px;
    }
    
    .final-message h3 {
        font-size: 1.2rem;
    }
    
    .final-message p {
        font-size: 0.95rem;
    }
    
    /* Footer */
    footer {
        padding: 35px 20px;
    }
    
    /* Figures */
    figcaption {
        font-size: 0.8rem;
        padding: 10px 12px;
    }
    
    /* Phases box mobile */
    .phases-box {
        padding: 20px 15px;
    }

    .phase-title {
    font-size: 0.98rem;
    }

    .phase-item p {
    font-size: 0.92rem;
    }
    
    /* Assessment box mobile */
.assessment-box {
    padding: 30px 20px;
    margin: 40px 0;
}

.assessment-box h3 {
    font-size: 1.3rem;
}

.assessment-badge {
    font-size: 0.75rem;
}

.benefit-item {
    padding: 12px 14px;
    gap: 12px;
}

.benefit-item div {
    font-size: 0.92rem;
}

.cta-arrow {
    font-size: 2rem;
}
}

/* ==========================================================================
   TABLET (601px - 900px)
   ========================================================================== */

@media (min-width: 601px) and (max-width: 900px) {
    .article-body {
        padding: 40px 40px;
    }
    
    .headline {
        font-size: 2.2rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
}