/* --- RESET ZENDESK DEFAULT INTERFACE --- */

/* On cache le header et le footer natifs de Zendesk */
.header, footer, .footer, .sub-nav, .breadcrumbs {
    display: none !important;
}

/* On force le container principal à prendre 100% de la largeur */
.container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* On retire les marges du body de Zendesk */
body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #F9FBFD; /* Votre variable --nuage */
}

main {
    padding-bottom: 0 !important;
}

/* On s'assure que le contenu ne flotte pas au milieu */
.container-inner {
    max-width: 100% !important;
    padding: 0 !important;
}
/* --- LE CODE DU DERNIER RECOURS (ANTI-ZENDESK WYSIWYG) --- */

/* On force la figure et le tableau à faire 100% de large quoi qu'il arrive */
figure[class*="wysiwyg-table"], 
figure[class*="wysiwyg-table"] table,
table.wysiwyg-table {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    height: auto !important;
}

/* On force la ligne (tr) et le corps (tbody) à devenir un flexbox */
figure[class*="wysiwyg-table"] tbody, 
figure[class*="wysiwyg-table"] tr {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* C'est ça qui fait passer à la ligne sur mobile */
    width: 100% !important;
    height: auto !important;
}

/* On détruit le style="width: 169.5px;" que Zendesk a injecté dans le HTML */
figure[class*="wysiwyg-table"] td {
    display: block !important;
    width: auto !important; /* Écrase les pixels fixes */
    max-width: 100% !important;
    min-width: 130px !important; /* Taille minimale d'une image avant de sauter à la ligne */
    flex: 1 1 0% !important; /* Force une répartition égale */
    box-sizing: border-box !important;
    padding: 5px !important;
}

/* On s'assure que les images s'adaptent à la largeur de la case */
figure[class*="wysiwyg-table"] td img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}
/* --- RENDRE TOUTES LES VIDÉOS ET IFRAMES RESPONSIVES --- */

/* 1. On cible le conteneur de l'article pour appliquer une sécurité globale */
.article-body, 
.article-container, 
.article, 
[class*="message_kit"] {
    max-width: 100% !important;
    overflow-x: hidden !important; /* Coupe tout ce qui veut déborder de l'écran */
}

/* 2. On force les iframes (YouTube) à s'adapter à la largeur de l'écran */
.article-body iframe,
.article-container iframe,
.article iframe,
iframe[src*="youtube"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; /* Force le format vidéo sans déformer */
}

/* 3. Sécurité pour les listes et textes importés */
.article-body ul, 
.article-body ol, 
.article-body p {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important; /* Force les longs liens à aller à la ligne */
}