.elementor-17684 .elementor-element.elementor-element-44a71c8{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-17684 .elementor-element.elementor-element-e7458f4{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}/* Start custom CSS for text-editor, class: .elementor-element-aabc16f */C'est une excellente initiative ! Pour rendre votre article agréable à lire sur tous les appareils (ordinateurs, tablettes et mobiles), il faut ajouter des Media Queries à votre CSS pour qu'il soit responsive.

Je vais intégrer le CSS précédent dans une structure responsive et apporter quelques ajustements pour une meilleure lecture sur mobile.

Voici le code CSS complet et responsive :

CSS

/* --- 1. CONCEPTS GÉNÉRAUX ET BASE DE LECTURE --- */
body {
    font-family: 'Georgia', serif; 
    line-height: 1.7; 
    color: #333; 
    background-color: #f9f9f9; 
    margin: 0;
    padding: 20px;
}

/* Conteneur principal (Desktop) */
.article-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

/* --- 2. TITRES ET TYPOGRAPHIE --- */
.article-container h2 {
    color: #333;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.8em;
    margin-top: 30px;
    border-left: 5px solid #ffc107; 
    padding-left: 15px;
}

.article-container h3 {
    color: #555;
    font-size: 1.3em;
    margin-top: 25px;
}

.article-container p {
    margin-bottom: 1.2em;
    text-align: justify;
}

.article-container strong {
    color: #cc0000;
}

.article-container hr {
    border: 0;
    height: 1px;
    background-color: #ddd;
    margin: 30px 0;
}

/* Style pour les listes */
.article-container ul {
    list-style-type: none;
    padding-left: 0;
}

.article-container ul li {
    padding-left: 1.5em; 
    position: relative;
    margin-bottom: 8px;
}

.article-container ul li::before {
    content: '✓';
    color: #0056b3; 
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* --- 3. GESTION DU TABLEAU RESPONSIVE --- */

.article-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #f2f2f2;
    border-radius: 5px;
    overflow: hidden; 
    /* Ajout important pour le responsive : le tableau doit pouvoir se déplacer si nécessaire */
    display: block; 
    white-space: nowrap; /* Empêche la coupure du contenu */
    overflow-x: auto; /* Ajoute un scroll horizontal si l'écran est trop petit */
    -webkit-overflow-scrolling: touch; /* Améliore le défilement sur les mobiles */
}

/* Maintien des styles d'en-tête */
.article-container thead tr {
    background-color: #0056b3;
    color: white;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 0.9em;
}

.article-container th, .article-container td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #ddd;
    /* Largeur minimale pour éviter l'écrasement */
    min-width: 120px; 
}

.article-container tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* --- 4. MEDIA QUERIES (ADAPTATION MOBILE) --- */

@media screen and (max-width: 600px) {
    
    /* Le conteneur occupe toute la largeur et supprime les ombres/paddings excessifs */
    .article-container {
        width: 100%;
        padding: 15px 10px; /* Moins de marge autour du contenu */
        box-shadow: none; /* Supprime l'ombre sur les petits écrans */
        border-radius: 0;
    }

    /* Ajustement de la taille du corps de texte pour une meilleure lisibilité */
    body {
        padding: 0;
        font-size: 16px; /* Augmente légèrement la taille de base sur mobile */
    }

    /* Réduction de la taille des titres pour qu'ils tiennent sur une seule ligne */
    .article-container h2 {
        font-size: 1.5em;
        margin-top: 20px;
        padding-left: 10px;
    }
    
    .article-container h3 {
        font-size: 1.2em;
        margin-top: 20px;
    }
    
    .article-container p {
        text-align: left; /* Préférable de ne pas justifier sur mobile pour éviter les grands espaces blancs */
    }
}/* End custom CSS */