/*
 * XJR-14.com — adaptation mobile V4
 * Desktop is intentionally left alone.
 *
 * V4: the mobile rules are conservative. We do not force every old table
 * into a new layout. Photo galleries get a dedicated 2-column grid so that
 * their thumbnails can use the available phone width.
 */

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

  html, body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    box-sizing: border-box;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* Old centered containers and the main 700/980 px frames. */
  body > div,
  body > center,
  body > div > center {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Only tables used as page frames are forced to fit.
     Individual content tables keep their natural structure unless
     they are explicitly marked as photo galleries. */
  table[width="980"],
  table[width="974"],
  table[width="960"],
  table[width="800"],
  table[width="766"],
  table[width="700"],
  table[width="695"],
  table[width="690"],
  table[width="685"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  td, th {
    min-width: 0 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  /* Images that were given a fixed width in the old HTML. */
  img {
    max-width: 100%;
    height: auto;
  }

  img[width="40"][height="40"] {
    width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
  }

  img[width="313"] {
    width: min(313px, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
  }

  img[width="960"],
  img[width="800"],
  img[width="1075"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---------------- PHOTO GALLERIES ----------------
     The original galleries use 4 or 3 fixed-width cells. On a phone,
     two cells per row gives each photograph much more room while
     preserving the original thumbnail/gallery spirit. */
  table.photo-gallery {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse;
  }

  table.photo-gallery tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100% !important;
    min-width: 0 !important;
  }

  table.photo-gallery td,
  table.photo-gallery th {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    overflow: hidden;
  }

  table.photo-gallery img[height="100"] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Some galleries use width but omit height ordering. */
  table.photo-gallery img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---------------- PILOTES ---------------- */
  .page-pilotes,
  .page-pilotes > center,
  .pilotes-frame,
  .pilotes-banner-wrap,
  .pilotes-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .pilotes-frame {
    height: auto !important;
  }

  .pilotes-list {
    table-layout: fixed !important;
  }

  .pilotes-list .pilote-col {
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    overflow: hidden;
    vertical-align: top;
  }

  .pilotes-list .pilote-col img[height="100"] {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
  }

  /* Avoid a long unbroken filename/URL forcing a cell wider than the phone. */
  a, p, font, b, i {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  a {
    -webkit-tap-highlight-color: rgba(255,255,255,.15);
  }
}