/* Surcouche responsive DGS (17.08.2026, consolidée). Inactive au-dessus de 820px. */
@media (max-width: 820px) {
  * { box-sizing: border-box; }
  html, body { overflow-x: hidden; }
  body { text-align: left; }

  /* conteneurs YUI: pleine largeur */
  #doc, #doc2, #doc3, #doc4, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5, .yui-t6, .yui-t7 {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
  }
  #yui-main { float: none !important; margin: 0 !important; width: 100% !important; }
  #yui-main .yui-b { margin: 0 !important; }
  .yui-b, #right_col { float: none !important; width: auto !important; }
  .yui-g .yui-u, .yui-g div.first, .yui-gc .yui-u, .yui-gc div.first {
    float: none !important; width: 100% !important; margin-left: 0 !important;
  }

  /* logo du fond attenue (voile a 50%) */
  #doc2 { background: rgba(254,247,243,0.5); }

  /* entete: banniere reduite, menu statique et aere */
  #hd { height: auto !important; min-height: 0 !important; background-size: cover; }
  #main_menu {
    position: static !important; top: auto !important; left: auto !important;
    padding: 10px 12px !important; line-height: 2.2 !important; font-size: 15px !important;
  }
  #main_menu li { float: none !important; display: inline-block; margin: 0 6px 4px 0; }
  #main_menu li a { margin-right: 1.2em; }

  /* contenu */
  #bd { padding: 1em 12px !important; min-height: 0 !important; }
  #bd p, #bd div { text-align: left !important; word-wrap: break-word; }
  img, canvas { max-width: 100% !important; height: auto !important; }
  #bd canvas, #bd img.instant, #main_content img[style] {
    float: none !important; display: block; margin: 0 auto 1em !important; padding: 0 !important; max-width: 92% !important;
  }
  table { display: block; overflow-x: auto; max-width: 100%; }
  #ft { padding: 1em 12px; }
}
@media (max-width: 820px) {
  /* le logo du fond occupe le coin haut-gauche: on decale le menu */
  #main_menu { padding-left: 104px !important; min-height: 84px; }
}
@media (max-width: 820px) {
  /* menu en pastilles, lisible sur le fond */
  #main_menu { line-height: 1 !important; padding: 10px 8px 8px 104px !important; }
  #main_menu li { margin: 0 !important; }
  #main_menu li a {
    display: inline-block; margin: 0 6px 8px 0 !important;
    padding: 7px 13px; background: rgba(255,255,255,0.92);
    border: 1px solid #d8d2cf; border-radius: 999px;
    color: #222 !important; font-size: 14px; white-space: nowrap;
  }
  #main_menu li a:hover, #main_menu li a.active {
    background: #E60F0F; color: #fff !important; border-color: #E60F0F;
  }
}