@charset "iso-8859-1";
/* =========================================================
   responsive.css - Adaptation mobile pour epocalc.net
   ========================================================= */

@media screen and (max-width: 768px) {

  /* === A. PAGE : verrouillage largeur === */
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  body { text-align: left !important; background-color: #333 !important; }
  div#body, #WhiteBox {
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* === B. COIN === */
  div#coin { display: none !important; }

  /* === C. BANDEAU === */
  div#bandeau {
    width: 100% !important;
    height: auto !important;
    min-height: 30px;
    padding: 0;
    box-sizing: border-box;
  }
  div#bandeau br:first-child { display: none !important; }
  div#bandeau table { width: 100% !important; }
  div#bandeau td { width: auto !important; }
  div#bandeau img { max-width: 180px; height: auto !important; }

  /* === D. MENU === */
  div#menu {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    position: sticky; top: 0; z-index: 100;
    background: #666 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }
  /* Cacher l'ancien menu sur mobile, garder le nav mobile-menu */
  div#menu > p:not(.Style5), div#menu form,
  div#menu br, div[id^="BtnMenuContainer"] { display: none !important; }
  div#menu > div > ul, div#menu > div > script,
  div#menu > div > div, div#menu > div > p {display: none !important; }
  /* Drapeaux FR/EN a gauche du menu, empiles verticalement */
  div#menu > p.Style5 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    padding: 4px 6px !important;
    margin: 0 !important;
    background: #666 !important;
    flex-shrink: 0 !important;
    order: -1 !important;
  }
  div#menu > div:has(#mobile-menu) {
    display: block !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    margin: 0 !important; padding: 0 !important;
  }
  div#menu > div:first-of-type:not(:has(#mobile-menu)) {
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important; padding: 0 !important;
    flex: 1 1 0% !important;
  }
  div#menu > div:not(:first-of-type) {
    display: none !important;
    min-width: 0 !important;
  }

  /* === D2. NOUVEAU MENU MOBILE (HTML pur, zero JS) === */
  #mobile-menu {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    width: 100% !important;
    background: #666 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #mobile-menu > a, #mobile-menu > details > summary {
    display: block !important;
    padding: 14px 4px !important;
    color: #fff !important;
    font-family: Verdana, sans-serif !important;
    font-size: 13px !important;
    text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-right: 1px solid #888 !important;
    border-top: 1px solid #888 !important;
    border-bottom: 1px solid #888 !important;
    box-sizing: border-box !important;
    cursor: pointer;
    list-style: none;
  }
  #mobile-menu > details {
    margin: 0 !important;
    padding: 0 !important;
  }
  #mobile-menu > details > summary {
    position: relative;
  }
  #mobile-menu > details > summary::after {
    content: " \25BE";
    font-size: 10px;
  }
  #mobile-menu > details[open] > summary {
    background: #555 !important;
  }
  #mobile-menu > details[open] > summary::after {
    content: " \25B4";
  }
  /* Sous-menu ouvert : barre en dessous du menu */
  #mobile-menu > details > a {
    display: none;
  }
  #mobile-menu > details[open] > a {
    display: block !important;
    padding: 10px 14px !important;
    color: #fff !important;
    font-family: Verdana, sans-serif !important;
    font-size: 12px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: #555 !important;
    border-top: 1px solid #777 !important;
  }
  #mobile-menu > details[open] {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
  #mobile-menu > details[open] > summary {
    width: 100% !important;
    border-right: none !important;
  }
  ul#cbindex3ebul_table a, ul.cbindex3ebul_menulist a {
    display: block !important; padding: 14px 4px !important;
    color: #fff !important; font-family: Verdana, sans-serif !important;
    font-size: 13px !important; text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap !important; border-right: 1px solid #888 !important;
    min-height: auto !important;
  }
  ul#cbindex3ebul_table a:hover { background: #555 !important; }
  ul#cbindex3ebul_table li:nth-child(1) a::after { content: "Accueil"; }
  ul#cbindex3ebul_table li:nth-child(2) a::after { content: "Collection"; }
  ul#cbindex3ebul_table li:nth-child(3) a::after { content: "Retro"; }
  ul#cbindex3ebul_table li:nth-child(4) a::after { content: "Liens"; }
  ul#cbindex3ebul_table li:nth-child(5) a::after { content: "Jeux"; }
  ul#cbindex3ebul_table li:nth-child(6) a::after { content: "Images"; }
  ul#cbindex3ebul_table li:nth-child(7) a::after { content: "Divers"; }
  ul#cbindex3ebul_table li:nth-child(8) a::after { content: "Contact"; }
  ul#cbindex3ebul_table li:last-child a { border-right: none !important; }

  /* Menu EN */
  ul#cbindex_e_3ebul_table, ul.cbindex_e_3ebul_menulist {
    width: 100% !important; height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    margin: 0 !important; padding: 0 !important;
    list-style: none !important; background: #666;
  }
  ul#cbindex_e_3ebul_table li { display: block !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }
  ul#cbindex_e_3ebul_table li:nth-child(n+5) { border-top: 1px solid #888 !important; }
  ul#cbindex_e_3ebul_table li.spaced_li { margin: 0 !important; }
  ul#cbindex_e_3ebul_table img { display: none !important; }
  ul#cbindex_e_3ebul_table a {
    display: block !important; padding: 14px 4px !important;
    color: #fff !important; font-family: Verdana, sans-serif !important;
    font-size: 13px !important; text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap !important; border-right: 1px solid #888 !important;
    min-height: auto !important;
  }
  ul#cbindex_e_3ebul_table a:hover { background: #555 !important; }
  ul#cbindex_e_3ebul_table li:nth-child(1) a::after { content: "Home"; }
  ul#cbindex_e_3ebul_table li:nth-child(2) a::after { content: "Collection"; }
  ul#cbindex_e_3ebul_table li:nth-child(3) a::after { content: "Retro"; }
  ul#cbindex_e_3ebul_table li:nth-child(4) a::after { content: "Links"; }
  ul#cbindex_e_3ebul_table li:nth-child(5) a::after { content: "Games"; }
  ul#cbindex_e_3ebul_table li:nth-child(6) a::after { content: "Images"; }
  ul#cbindex_e_3ebul_table li:nth-child(7) a::after { content: "Contact"; }
  ul#cbindex_e_3ebul_table li:last-child a { border-right: none !important; }

  /* === E. CONTENU === */
  div#contenu {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    flex: 1 !important;
  }

  /* Tous les div dans contenu : 100% largeur */
  div#contenu div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Aligner le contenu a gauche sur mobile */
  div#contenu div[align="center"],
  div#contenu td[align="center"],
  div#contenu p[align="center"] {
    text-align: left !important;
  }

  div#contenu td {
    text-align: left !important;
  }

  div#contenu table[align="center"] {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* === F. PIED DE PAGE === */
  div#piedpage {
    clear: both; width: 100% !important;
    height: auto !important; min-height: 0 !important;
    padding: 4px !important; box-sizing: border-box;
  }

  /* === F0. FORMULAIRE FILTRES CASIO === */
  div#contenu table[width="460"]:has(.calc-1l) {
    table-layout: fixed !important;
  }
  td.calc-1l, td.calc-0 {
    font-size: 11px !important;
    padding: 1px 2px !important;
  }
  td.calc-1l[width="130"], td.calc-0[width="130"] {
    width: 55px !important;
  }
  td.calc-0[width="100"] {
    width: 65px !important;
  }
  td.calc-1l div[style], td.calc-0 div[style] {
    margin-left: 0 !important;
  }
  td.calc-1l span, td.calc-0 span,
  td.calc-1l div, td.calc-0 div,
  td.calc-1l .Style4, td.calc-0 .Style4,
  td.calc-1l .Style6, td.calc-0 .Style6 {
    font-size: 11px !important;
  }
  td.calc-1l select, td.calc-0 select {
    width: 50px !important;
    font-size: 11px !important;
  }
  td.calc-1l input[type="checkbox"], td.calc-0 input[type="checkbox"] {
    width: 10px !important;
    height: 10px !important;
    margin: 1px !important;
  }
  td.calc-0 img[src*="nix"], td.calc-0 img[src*="gdt"],
  td.calc-0 img[src*="led"], td.calc-0 img[src*="vfd"],
  td.calc-0 img[src*="ylcd"], td.calc-0 img[src*="lcd"],
  td.calc-0 img[src*="elcd"], td.calc-0 img[src*="prt"] {
    width: 20px !important;
    height: 8px !important;
  }

  /* === F05b. TABLES COLLECTION FICHES (4 colonnes: Model/Year/Picture/Description) === */
  div#contenu table[width="723"],
  div#contenu table[width="743"] {
    table-layout: fixed !important;
    width: 100% !important;
  }
  div#contenu table[width="723"] td:nth-child(1),
  div#contenu table[width="743"] td:nth-child(1) {
    width: 40px !important;
  }
  div#contenu table[width="723"] td:nth-child(2),
  div#contenu table[width="743"] td:nth-child(2) {
    width: 30px !important;
  }
  div#contenu table[width="723"] td:nth-child(3),
  div#contenu table[width="743"] td:nth-child(3) {
    width: 120px !important;
  }
  div#contenu table[width="723"] td:nth-child(3) img,
  div#contenu table[width="743"] td:nth-child(3) img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  div#contenu table[width="723"] td:nth-child(4),
  div#contenu table[width="743"] td:nth-child(4) {
    width: auto !important;
    font-size: 11px !important;
  }
  div#contenu table[width="723"] td,
  div#contenu table[width="743"] td {
    vertical-align: middle !important;
    font-size: 10px !important;
    padding: 2px !important;
    line-height: 1.2 !important;
  }
  div#contenu table[width="723"] td *,
  div#contenu table[width="743"] td * {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  div#contenu table[width="723"] td ul,
  div#contenu table[width="743"] td ul {
    margin: 2px 0 !important;
    padding-left: 12px !important;
  }
  div#contenu table[width="723"] td li,
  div#contenu table[width="743"] td li {
    margin: 0 !important;
  }

  /* === F05c. TABLE INDEX POCKETS (4 col: logo/links/models/count) === */
  div#contenu table[width="532"] {
    table-layout: fixed !important;
    width: 100% !important;
  }
  div#contenu table[width="532"] td:nth-child(2) {
    width: 30px !important;
  }
  div#contenu table[width="532"] td:nth-child(4) {
    width: 25px !important;
  }

  /* === F05b. TABLE STATS CALCS (mes_calcs_01) === */
  div#contenu table[style*="table-layout:fixed"] td.Style6 {
    padding: 1px 2px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    font-size: 9px !important;
  }
  div#contenu table[style*="table-layout:fixed"] td.Style6 a {
    font-size: 9px !important;
  }

  /* === F06. TABLE MARQUES COLLECTION (cellules .un) === */
  div#contenu table:has(.un) td {
    font-size: 10px !important;
    padding: 3px 1px !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    height: auto !important;
    min-height: 30px !important;
  }

  /* === F1. ONGLETS MARQUES (design.css) === */
  #onglets {
    position: relative !important;
    left: auto !important;
    margin-left: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding: 2px !important;
    box-sizing: border-box !important;
  }
  #onglets li {
    float: none !important;
    flex-shrink: 0 !important;
    font-size: 10px !important;
    height: auto !important;
    margin: 1px !important;
  }
  #onglets a {
    padding: 2px 4px !important;
    font-size: 10px !important;
  }
  #menu-o {
    padding-bottom: 0 !important;
  }

  /* === F2. ALIGNEMENT GAUCHE CONTENU === */
  body,
  div#contenu,
  div#contenu div,
  div#contenu p,
  div#contenu td,
  div#contenu span,
  div#contenu section {
    text-align: left !important;
  }
  div#contenu table {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  div#contenu td[nowrap] {
    white-space: normal !important;
  }

  /* === G. TABLES DE LAYOUT (toutes) === */
  div#contenu table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  div#contenu td, div#contenu th {
    width: auto !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    padding: 2px 4px !important;
  }
  /* table.calc : garder les largeurs d'origine */
  div#contenu table.calc td,
  div#contenu table.calc th {
    width: revert !important;
  }

  /* Colonnes separateurs ":" */
  div#contenu td[width="5"],
  div#contenu td[width="10"] {
    width: 10px !important;
    min-width: 10px !important;
    max-width: 10px !important;
    padding: 2px 0 !important;
  }

  /* Tables de fiches (label:150 / ":" / valeur:550) */
  div#contenu td[width="150"] {
    width: 1% !important;
    white-space: nowrap !important;
  }

  div#contenu td[width="550"] {
    width: auto !important;
    max-width: 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* === H. TABLES DE DONNEES (scrollables) === */
  /* Ciblees par : classes de cellules (tableBiblio*, calc-*) ou largeur >500 */
  div#contenu table:has(.tableBiblioTitre),
  div#contenu table:has(.tableBiblioDesc1),
  div#contenu table:has(.tableTitre),
  div#contenu table:has(.tableDesc),
  div#contenu table:has(.tablePocketTitre),
  div#contenu table:has(.tablePocketDesc),
  div#contenu table:has(.calc-h),
  div#contenu table:has(.calc-m),
  div#contenu table.sofT {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    table-layout: auto !important;
  }

  /* Le contenu interne garde son rendu table */
  div#contenu table:has(.tableBiblioTitre) tbody,
  div#contenu table:has(.tableBiblioDesc1) tbody,
  div#contenu table:has(.tableTitre) tbody,
  div#contenu table:has(.tableDesc) tbody,
  div#contenu table:has(.tablePocketTitre) tbody,
  div#contenu table:has(.tablePocketDesc) tbody,
  div#contenu table:has(.calc-h) tbody,
  div#contenu table.sofT tbody {
    display: table !important;
    min-width: 600px !important;
  }

  /* Colonne Info (derniere colonne) : largeur fixe sur "Info" */
  div#contenu table[width="728"] td:last-child,
  div#contenu table[width="741"] td:last-child {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    white-space: nowrap !important;
    padding: 2px !important;
  }
  div#contenu table[width="728"] td[colspan],
  div#contenu table[width="741"] td[colspan] {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Table synthétiseurs (comp_music) : colonne annees fixe */
  div#contenu table[width="422"] {
    width: 100% !important;
    table-layout: fixed !important;
  }
  div#contenu table[width="422"] td:first-child {
    width: 3em !important;
    white-space: nowrap !important;
  }
  div#contenu table[width="422"] td:last-child {
    width: auto !important;
    word-wrap: break-word !important;
  }

  /* Table alphabetique (A-Z) : adaptee a l'ecran */
  div#contenu table.calc > tbody > tr > td[width="20"] {
    width: auto !important;
    padding: 1px !important;
    font-size: 10px !important;
  }
  div#contenu table.calc > tbody > tr > td[width="20"] span,
  div#contenu table.calc > tbody > tr > td[width="20"] a {
    font-size: 10px !important;
  }

  /* Cellules des tables de donnees : taille reduite + naturelle */
  .tableBiblioTitre, .tableBiblioDesc1, .tableBiblioDesc2,
  .tableTitre, .tableDesc, .tableMarque, .tableAnnee,
  .tablePocketTitre, .tablePocketDesc, .tablePocketPict,
  .calc-h, .calc-l, .calc-l2, .calc-m, .calc-r, .calc-s, .calc-s2, .calc-c {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    font-size: 11px !important;
    padding: 2px 4px !important;
  }
  .calc-h span, .calc-l span, .calc-l2 span, .calc-m span,
  .calc-r span, .calc-s span, .calc-s2 span, .calc-c span,
  .calc-h div, .calc-l div, .calc-l2 div, .calc-m div,
  .calc-r div, .calc-s div, .calc-s2 div, .calc-c div {
    font-size: 11px !important;
  }

  /* Images dans les tables de donnees : taille naturelle */
  div#contenu table:has(.tableBiblioDesc1) img,
  div#contenu table:has(.calc-h) img,
  div#contenu table.calc img {
    max-width: none !important;
  }

  /* === H2. TABLES STATS (non scrollables, adaptees a l'ecran) === */
  div#contenu table.stat,
  div#contenu table.calc.stat {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    overflow-x: visible !important;
  }
  div#contenu table.stat tbody,
  div#contenu table.calc.stat tbody {
    display: table-row-group !important;
    min-width: 0 !important;
  }
  div#contenu table.stat td,
  div#contenu table.calc.stat td {
    width: auto !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    font-size: 11px !important;
    padding: 2px 4px !important;
  }
  div#contenu table.stat span,
  div#contenu table.stat .Style5,
  div#contenu table.stat .Style5 div {
    font-size: 11px !important;
  }

  /* === H3. TABLES NON SCROLLABLES (.no-scroll) === */
  div#contenu table.no-scroll {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    overflow-x: visible !important;
  }
  div#contenu table.no-scroll tbody {
    display: table-row-group !important;
    min-width: 0 !important;
  }
  div#contenu table.no-scroll td {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 10px !important;
    padding: 10px 4px !important;
    height: auto !important;
    vertical-align: middle !important;
  }
  /* Tables d'index (sommaire) : compactes, no-scroll */
  div#contenu table.no-scroll td[height="15"] {
    padding: 1px 3px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  div#contenu table.no-scroll td[height="15"] div,
  div#contenu table.no-scroll td[height="15"] a {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  div#contenu table.no-scroll td[width="300"] {
    width: 90px !important;
  }
  div#contenu table.no-scroll td[width="200"] {
    width: 70px !important;
  }
  div#contenu table.no-scroll td[width="120"] {
    width: 55px !important;
  }
  div#contenu table.no-scroll td[width="80"] {
    width: 35px !important;
  }
  div#contenu table.no-scroll .tablePocketPict td img {
    display: block !important;
    width: unset !important;
    height: unset !important;
    max-height: 300px !important;
    max-width: 90vw !important;
    margin: 5px auto !important;
  }
  /* comp_books: colonne Photo = 94px pour images 90px */
  div#contenu table.no-scroll tr.tableBiblioTitre td:first-child {
    width: 94px !important;
  }
  div#contenu table.no-scroll tr.tableBiblioTitre td:nth-child(3) {
    width: 8px !important;
  }
  div#contenu table.no-scroll tr.tableBiblioTitre td:nth-child(4) {
    width: 30px !important;
  }
  /* comp_books: uniformiser font-size 10px dans toutes les cellules */
  div#contenu table.no-scroll td *,
  div#contenu table.no-scroll td {
    font-size: 10px !important;
  }
  div#contenu table.no-scroll td[width="220"] {
    width: 90px !important;
  }
  div#contenu table.no-scroll td[width="500"] {
    width: auto !important;
  }
  /* Images centrees dans les tables no-scroll */
  div#contenu table.no-scroll td[align="center"] {
    text-align: center !important;
  }
  div#contenu table.no-scroll td[colspan] {
    text-align: center !important;
  }
  /* Photos produit (cellules colspan) : centrees en bloc */
  div#contenu table.no-scroll td[colspan] img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
  }
  /* En-tetes fiches : centrage vertical force via flexbox */
  div#contenu table.no-scroll tr.tablePocketTitre td,
  div#contenu table:has(.tablePocketTitre) tr.tablePocketTitre td {
    display: table-cell !important;
    vertical-align: middle !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }
  /* Logos en-tete : restent inline pour ne pas agrandir la cellule */
  div#contenu table.no-scroll tr.tablePocketTitre td img,
  div#contenu table:has(.tablePocketTitre) tr.tablePocketTitre td img {
    display: inline !important;
    vertical-align: middle !important;
  }

  /* === H5. TABLE class="calc" (listes PHP) === */
  div#contenu div.table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    width: 100% !important;
    overflow-y: visible !important;
  }
  div#contenu table.calc {
    display: table !important;
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  div#contenu table.calc td {
    font-size: 11px !important;
    padding: 2px 4px !important;
    white-space: nowrap !important;
  }
  div#contenu table.calc td *,
  div#contenu table.calc div {
    font-size: 11px !important;
  }
  /* Images dans table.calc */
  div#contenu table.calc img {
    max-width: 75px !important;
    height: auto !important;
  }

  /* === I. IMAGES === */
  div#contenu img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Supprimer les marges excessives sur mobile */
  .Style6m, .Style5m {
    margin-left: 5px !important;
    text-align: left !important;
  }

  div#contenu [style*="margin-left"] {
    margin-left: 0 !important;
  }

  div#contenu [style*="margin-right"] {
    margin-right: 0 !important;
  }

  /* Tables de navigation (2 colonnes : icone + texte) */
  /* Premiere colonne : icone centree, largeur fixe */
  div#contenu table[width="460"] td:first-child {
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    text-align: center !important;
  }

  /* Icones uniformes 30px dans la premiere colonne */
  div#contenu table[width="460"] td:first-child img {
    width: 30px !important;
    height: auto !important;
  }

  /* Deuxieme colonne (texte) : prend le reste */
  div#contenu td[width="380"],
  div#contenu td[width="400"] {
    width: auto !important;
  }

  /* Masquer les images spacer (vide.gif) sur mobile */
  div#contenu img[src*="vide.gif"] {
    display: none !important;
  }

  /* === J. TYPOGRAPHIE === */
  .Style1 { font-size: 22px !important; }
  .Style2, .Style3 { font-size: 14px !important; }
  .Style4, .Style6, .Style6l, .Style6m { font-size: 12px !important; }
  .Style5, .Style5m, .Style12 { font-size: 14px !important; }
  .Style7 { font-size: 20px !important; }
  .Style8 { font-size: 12px !important; }
  .Style10 { font-size: 16px !important; }
  .tableBiblioDesc1, .tableBiblioDesc2 { font-size: 12px !important; }
  .tablePocketDesc { font-size: 12px !important; line-height: 18px !important; }
  .tableTitre, .tablePocketTitre, .tableBiblioTitre { font-size: 12px !important; }

  /* === K. LIENS === */
  div#contenu a { min-height: 28px; display: inline-block; }

  /* === L. SOUS-MENUS === */
  .ebul_cbindex3, .ebul_cbindex_e_3 {
    position: static !important; width: 100% !important; border: none !important;
  }
}

/* === MENU HORIZONTAL (desktop + mobile) === */

/* Cacher l'ancien menu vertical sur toutes les resolutions */
div#menu > div > ul,
div#menu > div > script,
div#menu > div > div:not(:has(#mobile-menu)),
div#menu form,
div[id^="BtnMenuContainer"] {
  display: none !important;
}

/* Menu : barre horizontale en haut */
div#menu {
  float: none !important;
  width: 100% !important;
  background: #666 !important;
  overflow: visible !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  border-top: 2px solid #fff !important;
}

/* Drapeaux a gauche du menu */
div#menu > p.Style5 {
  display: flex !important;
  gap: 6px;
  padding: 8px 10px !important;
  margin: 0 !important;
  order: -1 !important;
}

/* Cacher les images de l'ancien menu */
div#menu ul img { display: none !important; }

/* Le div conteneur du mobile-menu doit etre transparent au flex */
div#menu > div:has(#mobile-menu) {
  display: contents !important;
}

/* Afficher le mobile-menu sur desktop */
#mobile-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#mobile-menu > a,
#mobile-menu > details > summary {
  display: block !important;
  padding: 10px 16px !important;
  color: #fff !important;
  font-family: Verdana, sans-serif !important;
  font-size: 13px !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer;
  list-style: none;
}
#mobile-menu > a:hover,
#mobile-menu > details > summary:hover {
  background: rgb(231,57,57) !important;
}
#mobile-menu > details > summary::after {
  content: " \25BE";
  font-size: 10px;
}
#mobile-menu > details[open] > summary::after {
  content: " \25B4";
}
#mobile-menu > details > a {
  display: none;
}
#mobile-menu > details[open] > summary {
  background: #555 !important;
}
#mobile-menu > details[open] > a {
  display: block !important;
  padding: 8px 16px !important;
  color: #fff !important;
  font-family: Verdana, sans-serif !important;
  font-size: 12px !important;
  text-decoration: none !important;
  background: #555 !important;
  border-top: 1px solid #777 !important;
}
#mobile-menu > details[open] > a:hover {
  background: rgb(231,57,57) !important;
}

/* Centrer le layout desktop sans le menu vertical */
div#body,
div#body #WhiteBox,
#WhiteBox {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  height: auto !important;
}
div#contenu {
  border-left: 1px solid #fff !important;
  border-right: 1px solid #fff !important;
}
div#coin {
  display: none !important;
}
div#bandeau {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
div#menu {
  margin: 0 auto !important;
  border-left: 1px solid #fff !important;
  border-right: 1px solid #fff !important;
  box-sizing: border-box !important;
}
div#contenu {
  float: none !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
/* Centrer toutes les tables de contenu */
div#contenu table {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* En-tetes des fiches produit : centrage vertical du texte */
div#contenu table.no-scroll tr.tablePocketTitre td {
  vertical-align: middle !important;
}
div#piedpage {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  clear: both !important;
  border-top: 2px solid #fff !important;
}

/* === MOBILE OVERRIDES (doit etre APRES les regles desktop) === */
@media screen and (max-width: 768px) {
  /* Menu : flex row avec drapeaux a gauche, menu-grid a droite */
  div#menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    border-left: none !important;
    border-right: none !important;
  }
  /* Drapeaux : colonne a gauche, hauteur = 1ere ligne seulement */
  div#menu > p.Style5 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    padding: 4px 8px !important;
    margin: 0 !important;
    background: #666 !important;
    flex-shrink: 0 !important;
    order: -1 !important;
    align-self: stretch !important;
    border-right: 1px solid #aaa !important;
    box-sizing: border-box !important;
  }
  /* Wrapper div : prend tout l'espace restant */
  div#menu > div:has(#mobile-menu) {
    display: block !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Mobile-menu : grille 4 colonnes */
  #mobile-menu {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    width: 100% !important;
    background: #666 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #mobile-menu > a,
  #mobile-menu > details > summary {
    padding: 8px 4px !important;
    border-right: 1px solid #888 !important;
    border-bottom: 1px solid #888 !important;
    box-sizing: border-box !important;
  }
  /* Premiere ligne (4 premiers items) : bordure top aussi */
  #mobile-menu > :nth-child(-n+4) > summary,
  #mobile-menu > a:nth-child(-n+4) {
    border-top: 1px solid #888 !important;
  }
  /* Sous-menu ouvert : pleine largeur, sous-liens en ligne */
  #mobile-menu > details[open] {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  #mobile-menu > details[open] > summary {
    width: 100% !important;
    border-right: none !important;
    border-bottom: none !important;
    background: #555 !important;
  }
  #mobile-menu > details[open] > a {
    display: block !important;
    padding: 8px 14px !important;
    color: #fff !important;
    font-family: Verdana, sans-serif !important;
    font-size: 12px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: #555 !important;
    border-top: 1px solid #777 !important;
  }
  #mobile-menu > details[open] > a:hover {
    background: rgb(231,57,57) !important;
  }
  /* Tables dans contenu : alignees a gauche sur mobile */
  div#contenu table {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}