/* ============================================
   DYNSEO — CSS Fix pour Pages Tests & Outils
   Version: 1.0.0
   
   Ce fichier corrige UNIQUEMENT le responsive et
   l'harmonisation visuelle. Il ne modifie AUCUN
   élément HTML ni JS existant.
   
   Ciblage : pages sous /nos-outils/, /nos-tests/,
   /our-tools/, /our-tests/, etc. + pages "test*"
   ============================================ */


/* ============================================================
   1. VARIABLES CHARTE DYNSEO
   ============================================================ */
:root {
    --dyn-bleu: #5e5ed7;
    --dyn-bleu2: #5268c9;
    --dyn-violet: #7b5ea7;
    --dyn-vert: #a9e2e4;
    --dyn-vert-fonce: #059669;
    --dyn-jaune: #ffb600;
    --dyn-rose: #e73469;
    --dyn-text: #333;
    --dyn-white: #fff;
    --dyn-radius: 16px;
    --dyn-radius-sm: 10px;
    --dyn-shadow: 0 5px 20px rgba(0,0,0,0.08);
    --dyn-shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
    --dyn-font: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --dyn-font-title: 'Montserrat', 'Poppins', 'Segoe UI', sans-serif;
}


/* ============================================================
   2. FIX GLOBAUX — Empêche le débordement horizontal
   ============================================================ */

/* Toute page ciblée : empêcher overflow-x */
.entry-content,
.et_pb_text_inner,
.post-content,
article .content,
.page-content {
    overflow-x: hidden;
    max-width: 100%;
}

/* Tous les containers inline dans le contenu */
.entry-content .container,
.et_pb_text_inner .container,
.entry-content > div > .container {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   3. TABLEAUX — Responsive scroll horizontal
   ============================================================ */

/* Wrapper automatique pour scroll horizontal */
.entry-content .table-container,
.et_pb_text_inner .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -10px;
    padding: 0 10px;
    max-width: calc(100% + 20px);
}

/* Table elle-même */
.entry-content table,
.et_pb_text_inner table {
    border-collapse: collapse;
    font-size: 0.95em;
}

/* En-têtes de tableau */
.entry-content table th,
.et_pb_text_inner table th {
    font-size: 0.85em;
    padding: 10px 6px;
    white-space: nowrap;
}

/* Cellules */
.entry-content table td,
.et_pb_text_inner table td {
    padding: 8px 6px;
    font-size: 0.9em;
}

/* Selects dans les tableaux (outils type suivi articulatoire) */
.entry-content table .status-select,
.et_pb_text_inner table .status-select,
.entry-content table select,
.et_pb_text_inner table select {
    min-width: 45px;
    height: 32px;
    font-size: 1em;
    padding: 2px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
    background: var(--dyn-white);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
}

/* Inputs dans les en-têtes de tableau */
.entry-content table th input[type="text"],
.et_pb_text_inner table th input[type="text"] {
    width: 60px !important;
    font-size: 0.8em;
    padding: 3px 4px;
}


/* ============================================================
   4. HEADER / BANNER DES PAGES
   ============================================================ */

.entry-content .header,
.entry-content .header-banner,
.et_pb_text_inner .header,
.et_pb_text_inner .header-banner {
    border-radius: var(--dyn-radius);
    padding: 30px 20px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}

.entry-content .header h1,
.entry-content .header-banner h1,
.et_pb_text_inner .header h1,
.et_pb_text_inner .header-banner h1 {
    font-family: var(--dyn-font-title);
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.entry-content .header p,
.entry-content .header-banner p,
.et_pb_text_inner .header p,
.et_pb_text_inner .header-banner p {
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
}


/* ============================================================
   5. BADGES
   ============================================================ */

.entry-content .badge,
.entry-content .question-badge,
.et_pb_text_inner .badge,
.et_pb_text_inner .question-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 700;
}


/* ============================================================
   6. INFO FIELDS / FORMULAIRES
   ============================================================ */

.entry-content .info-section,
.et_pb_text_inner .info-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.entry-content .info-field,
.et_pb_text_inner .info-field {
    padding: 12px;
    border-radius: var(--dyn-radius-sm);
    box-sizing: border-box;
}

.entry-content .info-field input,
.et_pb_text_inner .info-field input {
    width: 100%;
    font-size: 1em;
    border: none;
    background: transparent;
    outline: none;
}


/* ============================================================
   7. LÉGENDES ET SECTIONS D'INFO
   ============================================================ */

.entry-content .legend-box,
.entry-content .legend-items,
.et_pb_text_inner .legend-box,
.et_pb_text_inner .legend-items {
    box-sizing: border-box;
}

.entry-content .legend-items,
.et_pb_text_inner .legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.entry-content .legend-item,
.et_pb_text_inner .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.85em;
    white-space: nowrap;
}


/* ============================================================
   8. GRILLES DE CATÉGORIES / FEATURES (Tests)
   ============================================================ */

.entry-content .categories-grid,
.entry-content .info-row,
.entry-content .apps-grid,
.entry-content .stats-row,
.et_pb_text_inner .categories-grid,
.et_pb_text_inner .info-row,
.et_pb_text_inner .apps-grid,
.et_pb_text_inner .stats-row {
    box-sizing: border-box;
    max-width: 100%;
}

.entry-content .info-chip,
.et_pb_text_inner .info-chip {
    box-sizing: border-box;
}


/* ============================================================
   9. BOUTONS — Cohérence charte DYNSEO
   ============================================================ */

.entry-content .btn,
.entry-content .print-btn,
.entry-content button[class*="btn"],
.et_pb_text_inner .btn,
.et_pb_text_inner .print-btn,
.et_pb_text_inner button[class*="btn"] {
    font-family: var(--dyn-font-title);
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
}


/* ============================================================
   10. GRILLES DE RÉPONSES (Quiz/Tests)
   ============================================================ */

.entry-content .answers-grid,
.et_pb_text_inner .answers-grid {
    box-sizing: border-box;
    max-width: 100%;
}

.entry-content .answer-btn,
.et_pb_text_inner .answer-btn {
    box-sizing: border-box;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}


/* ============================================================
   11. SÉQUENCES VISUELLES (Matrices, suites)
   ============================================================ */

.entry-content .visual-display,
.et_pb_text_inner .visual-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
}

.entry-content .matrix-container,
.et_pb_text_inner .matrix-container {
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
}


/* ============================================================
   12. SECTIONS OBJECTIFS / NOTES (Outils)
   ============================================================ */

.entry-content .objectives-section,
.entry-content .notes-section,
.entry-content .print-section,
.et_pb_text_inner .objectives-section,
.et_pb_text_inner .notes-section,
.et_pb_text_inner .print-section {
    box-sizing: border-box;
    max-width: 100%;
}

.entry-content .notes-area,
.entry-content textarea,
.et_pb_text_inner .notes-area,
.et_pb_text_inner textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--dyn-font);
    font-size: 0.95em;
    border-radius: var(--dyn-radius-sm);
}

.entry-content .objective-item,
.et_pb_text_inner .objective-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.entry-content .objective-input,
.et_pb_text_inner .objective-input {
    flex: 1;
    min-width: 0;
    font-size: 0.95em;
}


/* ============================================================
   13. RÉSULTATS (Tests) — Score, courbe, breakdown
   ============================================================ */

.entry-content .score-wrapper,
.et_pb_text_inner .score-wrapper {
    margin-left: auto;
    margin-right: auto;
}

.entry-content .bell-curve-svg,
.et_pb_text_inner .bell-curve-svg {
    max-width: 100%;
    height: auto;
}

.entry-content .breakdown-item,
.et_pb_text_inner .breakdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.entry-content .breakdown-bar,
.et_pb_text_inner .breakdown-bar {
    min-width: 0;
    flex: 1;
}


/* ============================================================
   14. CTA CARDS (Tests — promo apps DYNSEO)
   ============================================================ */

.entry-content .cta-card,
.et_pb_text_inner .cta-card {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

.entry-content .app-card,
.et_pb_text_inner .app-card {
    box-sizing: border-box;
}


/* ============================================================
   15. FOOTER DES OUTILS
   ============================================================ */

.entry-content .footer,
.et_pb_text_inner .footer {
    border-radius: 0 0 var(--dyn-radius) var(--dyn-radius);
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}


/* ============================================================
   16. QUIZ HEADER (timer, progress)
   ============================================================ */

.entry-content .quiz-header,
.et_pb_text_inner .quiz-header {
    box-sizing: border-box;
    max-width: 100%;
}

.entry-content .progress-bar,
.et_pb_text_inner .progress-bar {
    width: 100%;
    overflow: hidden;
}

.entry-content .question-dots,
.et_pb_text_inner .question-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}


/* ============================================================
   17. IMAGES — Ne jamais dépasser le container
   ============================================================ */

.entry-content img,
.et_pb_text_inner img {
    max-width: 100%;
    height: auto;
}


/* ================================================================
   ================================================================
   18. RESPONSIVE — TABLET (max-width: 768px)
   ================================================================
   ================================================================ */

@media (max-width: 768px) {

    /* ── Layout général ── */
    .entry-content .container,
    .et_pb_text_inner .container {
        padding: 20px 12px;
    }

    /* ── Header ── */
    .entry-content .header,
    .entry-content .header-banner,
    .et_pb_text_inner .header,
    .et_pb_text_inner .header-banner {
        padding: 24px 16px;
        border-radius: 14px;
    }

    .entry-content .header h1,
    .entry-content .header-banner h1,
    .et_pb_text_inner .header h1,
    .et_pb_text_inner .header-banner h1 {
        font-size: 1.4rem;
    }

    /* ── Info section (champs formulaires outils) ── */
    .entry-content .info-section,
    .et_pb_text_inner .info-section {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* ── Info chips (tests) ── */
    .entry-content .info-row,
    .et_pb_text_inner .info-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .entry-content .info-chip,
    .et_pb_text_inner .info-chip {
        flex-direction: column;
        text-align: center;
        padding: 12px 8px;
        gap: 6px;
    }

    .entry-content .info-chip .text,
    .et_pb_text_inner .info-chip .text {
        text-align: center;
    }

    /* ── Categories grid (tests) ── */
    .entry-content .categories-grid,
    .et_pb_text_inner .categories-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* ── Tableau (scroll horizontal) ── */
    .entry-content table,
    .et_pb_text_inner table {
        font-size: 0.85em;
    }

    .entry-content table th,
    .entry-content table td,
    .et_pb_text_inner table th,
    .et_pb_text_inner table td {
        padding: 8px 4px;
    }

    .entry-content table .phoneme-cell,
    .et_pb_text_inner table .phoneme-cell {
        font-size: 0.95em;
        white-space: nowrap;
    }

    .entry-content table .status-select,
    .et_pb_text_inner table .status-select,
    .entry-content table select,
    .et_pb_text_inner table select {
        min-width: 38px;
        height: 30px;
        font-size: 0.9em;
    }

    .entry-content table th input[type="text"],
    .et_pb_text_inner table th input[type="text"] {
        width: 55px !important;
        font-size: 0.75em;
    }

    /* ── Quiz ── */
    .entry-content .quiz-header,
    .et_pb_text_inner .quiz-header {
        flex-direction: column;
        text-align: center;
        padding: 14px 16px;
        gap: 12px;
    }

    .entry-content .question-card,
    .et_pb_text_inner .question-card {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .entry-content .question-text,
    .et_pb_text_inner .question-text {
        font-size: 1.15rem;
    }

    .entry-content .answers-grid,
    .et_pb_text_inner .answers-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .entry-content .answer-btn,
    .et_pb_text_inner .answer-btn {
        padding: 14px 16px;
    }

    /* ── Quiz navigation ── */
    .entry-content .quiz-nav,
    .et_pb_text_inner .quiz-nav {
        flex-direction: column;
        gap: 14px;
    }

    .entry-content .quiz-nav .btn,
    .et_pb_text_inner .quiz-nav .btn {
        width: 100%;
    }

    /* ── Séquences visuelles ── */
    .entry-content .sequence-box,
    .et_pb_text_inner .sequence-box {
        width: 52px;
        height: 52px;
        font-size: 1rem;
        border-radius: 12px;
    }

    .entry-content .matrix-cell,
    .et_pb_text_inner .matrix-cell {
        width: 50px;
        height: 50px;
    }

    .entry-content .matrix-cell svg,
    .et_pb_text_inner .matrix-cell svg {
        width: 28px;
        height: 28px;
    }

    /* ── Résultats ── */
    .entry-content .score-wrapper,
    .et_pb_text_inner .score-wrapper {
        width: 200px;
        height: 200px;
        margin-top: -60px;
    }

    .entry-content .score-value,
    .et_pb_text_inner .score-value {
        font-size: 3.5rem;
    }

    .entry-content .stats-row,
    .et_pb_text_inner .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .entry-content .stat-card .value,
    .et_pb_text_inner .stat-card .value {
        font-size: 1.4rem;
    }

    .entry-content .breakdown-card,
    .et_pb_text_inner .breakdown-card {
        padding: 18px 14px;
    }

    /* ── CTA / Apps ── */
    .entry-content .cta-card,
    .et_pb_text_inner .cta-card {
        padding: 24px 16px;
    }

    .entry-content .apps-grid,
    .et_pb_text_inner .apps-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* ── Actions buttons ── */
    .entry-content .actions-row,
    .et_pb_text_inner .actions-row {
        flex-direction: column;
        gap: 10px;
    }

    .entry-content .actions-row .btn,
    .et_pb_text_inner .actions-row .btn {
        width: 100%;
    }

    /* ── Bouton d'impression (outils) ── */
    .entry-content .print-section,
    .et_pb_text_inner .print-section {
        padding: 16px;
    }

    .entry-content .btn-large,
    .et_pb_text_inner .btn-large {
        padding: 16px 28px;
        font-size: 1rem;
        width: 100%;
        max-width: 300px;
    }

    /* ── Objectifs (outils) ── */
    .entry-content .objectives-section,
    .et_pb_text_inner .objectives-section {
        padding: 16px;
    }

    .entry-content .objective-input,
    .et_pb_text_inner .objective-input {
        font-size: 0.85em;
    }

    /* ── Notes (outils) ── */
    .entry-content .notes-area,
    .et_pb_text_inner .notes-area {
        min-height: 100px;
        font-size: 0.9em;
    }

    /* ── Légende (outils) ── */
    .entry-content .legend-box,
    .et_pb_text_inner .legend-box {
        padding: 14px;
    }

    .entry-content .legend-item,
    .et_pb_text_inner .legend-item {
        padding: 5px 10px;
        font-size: 0.8em;
    }

    .entry-content .legend-circle,
    .et_pb_text_inner .legend-circle {
        width: 22px;
        height: 22px;
        font-size: 0.7em;
    }
}


/* ================================================================
   ================================================================
   19. RESPONSIVE — MOBILE (max-width: 480px)
   ================================================================
   ================================================================ */

@media (max-width: 480px) {

    /* ── Layout ── */
    .entry-content .container,
    .et_pb_text_inner .container {
        padding: 14px 10px;
    }

    /* ── Header ── */
    .entry-content .header,
    .entry-content .header-banner,
    .et_pb_text_inner .header,
    .et_pb_text_inner .header-banner {
        padding: 20px 12px;
        border-radius: 12px;
    }

    .entry-content .header h1,
    .entry-content .header-banner h1,
    .et_pb_text_inner .header h1,
    .et_pb_text_inner .header-banner h1 {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    .entry-content .badge,
    .et_pb_text_inner .badge {
        padding: 5px 10px;
        font-size: 0.75em;
    }

    /* ── Info section (outils) ── */
    .entry-content .info-section,
    .et_pb_text_inner .info-section {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .entry-content .info-field,
    .et_pb_text_inner .info-field {
        padding: 10px;
    }

    /* ── Info chips (tests) ── */
    .entry-content .info-row,
    .et_pb_text_inner .info-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .entry-content .info-chip,
    .et_pb_text_inner .info-chip {
        flex-direction: row;
        text-align: left;
        padding: 12px 14px;
        gap: 12px;
    }

    .entry-content .info-chip .text,
    .et_pb_text_inner .info-chip .text {
        text-align: left;
    }

    .entry-content .info-chip .value,
    .et_pb_text_inner .info-chip .value {
        font-size: 1.1rem;
    }

    /* ── Tableau (outils) ── */
    .entry-content table,
    .et_pb_text_inner table {
        font-size: 0.78em;
    }

    .entry-content table th,
    .entry-content table td,
    .et_pb_text_inner table th,
    .et_pb_text_inner table td {
        padding: 6px 3px;
    }

    .entry-content table .status-select,
    .et_pb_text_inner table .status-select,
    .entry-content table select,
    .et_pb_text_inner table select {
        min-width: 34px;
        height: 28px;
        font-size: 0.85em;
    }

    .entry-content table th input[type="text"],
    .et_pb_text_inner table th input[type="text"] {
        width: 48px !important;
        font-size: 0.7em;
    }

    /* ── Category row dans tableau ── */
    .entry-content .category-row td,
    .et_pb_text_inner .category-row td {
        font-size: 0.8em;
        padding: 8px 4px;
    }

    /* ── Quiz ── */
    .entry-content .quiz-header,
    .et_pb_text_inner .quiz-header {
        padding: 12px;
        border-radius: 14px;
    }

    .entry-content .timer-box,
    .et_pb_text_inner .timer-box {
        padding: 8px 14px;
    }

    .entry-content .timer-value,
    .et_pb_text_inner .timer-value {
        font-size: 1rem;
    }

    .entry-content .question-card,
    .et_pb_text_inner .question-card {
        padding: 16px 12px;
        border-radius: 14px;
    }

    .entry-content .question-text,
    .et_pb_text_inner .question-text {
        font-size: 1rem;
        margin-bottom: 16px;
    }

    .entry-content .question-badge,
    .et_pb_text_inner .question-badge {
        padding: 5px 10px;
        font-size: 0.7em;
    }

    /* ── Réponses ── */
    .entry-content .answer-btn,
    .et_pb_text_inner .answer-btn {
        padding: 12px;
        border-radius: 12px;
        gap: 10px;
    }

    .entry-content .answer-letter,
    .et_pb_text_inner .answer-letter {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
        border-radius: 8px;
    }

    .entry-content .answer-text,
    .et_pb_text_inner .answer-text {
        font-size: 0.9rem;
    }

    /* ── Séquences ── */
    .entry-content .sequence-box,
    .et_pb_text_inner .sequence-box {
        width: 44px;
        height: 44px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    .entry-content .sequence-arrow,
    .et_pb_text_inner .sequence-arrow {
        font-size: 1rem;
    }

    .entry-content .matrix-grid,
    .et_pb_text_inner .matrix-grid {
        gap: 5px;
        padding: 10px;
    }

    .entry-content .matrix-cell,
    .et_pb_text_inner .matrix-cell {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }

    .entry-content .matrix-cell svg,
    .et_pb_text_inner .matrix-cell svg {
        width: 24px;
        height: 24px;
    }

    /* ── Navigation dots ── */
    .entry-content .dot,
    .et_pb_text_inner .dot {
        width: 9px;
        height: 9px;
    }

    .entry-content .quiz-nav .btn,
    .et_pb_text_inner .quiz-nav .btn {
        padding: 12px 16px;
        font-size: 0.9rem;
    }

    /* ── Résultats ── */
    .entry-content .results-header,
    .et_pb_text_inner .results-header {
        padding: 24px 16px;
        border-radius: 16px;
    }

    .entry-content .results-header h1,
    .et_pb_text_inner .results-header h1 {
        font-size: 1.3rem;
    }

    .entry-content .score-wrapper,
    .et_pb_text_inner .score-wrapper {
        width: 170px;
        height: 170px;
        margin-top: -50px;
    }

    .entry-content .score-circle,
    .et_pb_text_inner .score-circle {
        border-width: 4px;
    }

    .entry-content .score-value,
    .et_pb_text_inner .score-value {
        font-size: 2.8rem;
    }

    .entry-content .score-label,
    .et_pb_text_inner .score-label {
        font-size: 0.75rem;
    }

    .entry-content .score-percentile,
    .et_pb_text_inner .score-percentile {
        font-size: 0.8rem;
    }

    .entry-content .result-badge,
    .et_pb_text_inner .result-badge {
        padding: 10px 18px;
        font-size: 0.9rem;
    }

    .entry-content .result-description,
    .et_pb_text_inner .result-description {
        font-size: 0.9rem;
    }

    .entry-content .stat-card,
    .et_pb_text_inner .stat-card {
        padding: 12px;
        border-radius: 14px;
    }

    .entry-content .stat-card .label,
    .et_pb_text_inner .stat-card .label {
        font-size: 0.65rem;
    }

    .entry-content .stat-card .value,
    .et_pb_text_inner .stat-card .value {
        font-size: 1.2rem;
    }

    .entry-content .curve-card,
    .et_pb_text_inner .curve-card {
        padding: 14px 10px;
    }

    /* ── Breakdown ── */
    .entry-content .breakdown-item,
    .et_pb_text_inner .breakdown-item {
        padding: 10px;
        gap: 8px;
    }

    .entry-content .breakdown-icon,
    .et_pb_text_inner .breakdown-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 8px;
    }

    .entry-content .breakdown-info h4,
    .et_pb_text_inner .breakdown-info h4 {
        font-size: 0.8rem;
    }

    .entry-content .breakdown-bar,
    .et_pb_text_inner .breakdown-bar {
        height: 6px;
    }

    .entry-content .breakdown-score,
    .et_pb_text_inner .breakdown-score {
        font-size: 0.9rem;
        min-width: 40px;
    }

    /* ── CTA ── */
    .entry-content .cta-card,
    .et_pb_text_inner .cta-card {
        padding: 20px 14px;
        border-radius: 16px;
    }

    .entry-content .cta-card h3,
    .et_pb_text_inner .cta-card h3 {
        font-size: 1.15rem;
    }

    .entry-content .app-card,
    .et_pb_text_inner .app-card {
        padding: 12px;
        border-radius: 12px;
        gap: 10px;
    }

    .entry-content .app-icon,
    .et_pb_text_inner .app-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        border-radius: 10px;
    }

    /* ── Boutons généraux ── */
    .entry-content .btn,
    .entry-content button[class*="btn"],
    .et_pb_text_inner .btn,
    .et_pb_text_inner button[class*="btn"] {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    /* ── Objectifs (outils) ── */
    .entry-content .objective-checkbox,
    .et_pb_text_inner .objective-checkbox {
        width: 18px;
        height: 18px;
    }

    .entry-content .objective-input,
    .et_pb_text_inner .objective-input {
        font-size: 0.8em;
    }

    /* ── Footer (outils) ── */
    .entry-content .footer,
    .et_pb_text_inner .footer {
        padding: 16px 12px;
    }

    .entry-content .footer h3,
    .et_pb_text_inner .footer h3 {
        font-size: 1rem;
    }

    .entry-content .footer p,
    .et_pb_text_inner .footer p {
        font-size: 0.8em;
    }

    /* ── Loading ── */
    .entry-content .loading-spinner,
    .et_pb_text_inner .loading-spinner {
        width: 50px;
        height: 50px;
    }

    .entry-content .loading-text,
    .et_pb_text_inner .loading-text {
        font-size: 0.95rem;
    }
}


/* ================================================================
   ================================================================
   20. RESPONSIVE — TRÈS PETIT ÉCRAN (max-width: 360px)
   ================================================================
   ================================================================ */

@media (max-width: 360px) {

    .entry-content .header h1,
    .entry-content .header-banner h1,
    .et_pb_text_inner .header h1,
    .et_pb_text_inner .header-banner h1 {
        font-size: 1.05rem;
    }

    .entry-content .sequence-box,
    .et_pb_text_inner .sequence-box {
        width: 38px;
        height: 38px;
        font-size: 0.8rem;
    }

    .entry-content .matrix-cell,
    .et_pb_text_inner .matrix-cell {
        width: 38px;
        height: 38px;
    }

    .entry-content .matrix-cell svg,
    .et_pb_text_inner .matrix-cell svg {
        width: 20px;
        height: 20px;
    }

    .entry-content .score-wrapper,
    .et_pb_text_inner .score-wrapper {
        width: 150px;
        height: 150px;
    }

    .entry-content .score-value,
    .et_pb_text_inner .score-value {
        font-size: 2.4rem;
    }

    .entry-content table,
    .et_pb_text_inner table {
        font-size: 0.72em;
    }

    .entry-content table .status-select,
    .et_pb_text_inner table .status-select,
    .entry-content table select,
    .et_pb_text_inner table select {
        min-width: 30px;
        height: 26px;
        font-size: 0.8em;
    }
}


/* ============================================================
   21. PRINT — Corrections impression
   ============================================================ */

@media print {
    .entry-content .container,
    .et_pb_text_inner .container {
        max-width: 100%;
        box-shadow: none;
    }

    .entry-content .print-btn,
    .entry-content .print-section .btn,
    .et_pb_text_inner .print-btn,
    .et_pb_text_inner .print-section .btn {
        display: none !important;
    }

    .entry-content table .status-select,
    .et_pb_text_inner table .status-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        border: 1px solid #ccc;
    }

    .entry-content .header,
    .entry-content .header-banner,
    .entry-content .footer,
    .et_pb_text_inner .header,
    .et_pb_text_inner .header-banner,
    .et_pb_text_inner .footer {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}