/* --- 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 */
}



/* Page "Envoyer une demande" */
.container:has(#new-request-form) {
  padding: 40px 24px 80px;
}

.container:has(#new-request-form) > h1,
#main-content:has(#new-request-form) {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

.container:has(#new-request-form) > h1 {
  margin-top: 32px;
  margin-bottom: 32px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

#new-request-form [data-garden-id="forms.input_label"] {
  font-weight: 400;
  color: #555;
}

#new-request-form [data-garden-id="forms.input_hint"] {
  font-size: 13px;
  color: #777;
}

/* Tablette et mobile */
@media (max-width: 768px) {
  .container:has(#new-request-form) > h1,
  #main-content:has(#new-request-form) {
    margin-left: 16px;
    margin-right: 16px;
  }

  .container:has(#new-request-form) > h1 {
    margin-top: 24px;
    margin-bottom: 24px;
    font-size: 26px;
  }

  #main-content:has(#new-request-form) {
    margin-bottom: 100px;
  }

  /* Évite le zoom automatique d'iPhone quand on touche un champ */
  #new-request-form input,
  #new-request-form textarea,
  #new-request-form select {
    font-size: 16px;
  }
}

/* Petits téléphones */
@media (max-width: 400px) {
  .container:has(#new-request-form) > h1 {
    font-size: 22px;
  }
}