/* ==========================================================================
   responsive.css v2 — Adaptation responsive du site segema.fr
   --------------------------------------------------------------------------
   V2 (2026-04-24) : linearisation agressive sur mobile. Toutes les tables
   (y compris imbriquees) deviennent des blocs verticaux pleine largeur.
   Les largeurs fixes (attribut width="..."), le positionnement absolu et
   les flottements sont neutralises en dessous de 768 px.
   ========================================================================== */

/* ---------- Regles globales (tous ecrans) ------------------------------- */

img,
video,
iframe,
embed,
object {
  max-width: 100% !important;
  height: auto !important;
}

table {
  max-width: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

form#contact_form {
  width: 100% !important;
  max-width: 800px;
  box-sizing: border-box;
}

form#contact_form input[type="text"],
form#contact_form input[type="email"],
form#contact_form textarea,
form#contact_form select {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- Tablette (<=1024 px) ---------------------------------------- */
@media screen and (max-width: 1024px) {

  /* Layout racine en pleine largeur. */
  body > table {
    width: 100% !important;
    max-width: 100% !important;
  }

  body > table > tbody > tr > th,
  body > table > tbody > tr > td {
    padding: 6px 4px;
  }
}

/* ---------- Mobile (<=768 px) ------------------------------------------ */
@media screen and (max-width: 768px) {

  /* 1. LINEARISATION TOTALE : toute table (y compris imbriquee) devient
        une pile verticale de blocs pleine largeur. */
  table,
  tbody,
  thead,
  tfoot,
  tr,
  th,
  td,
  col,
  colgroup {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    position: static !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    vertical-align: top !important;
  }

  th,
  td {
    padding: 6px 4px !important;
    text-align: center !important;
  }

  /* 2. Neutraliser tous les attributs width="" et height="" inline. */
  [width] {
    width: auto !important;
    max-width: 100% !important;
  }

  [height] {
    height: auto !important;
  }

  /* 3. Images : forcer le redimensionnement meme avec width="263" etc. */
  img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
  }

  /* 4. Autoriser le wrap sur textes longs (evite le debordement). */
  body,
  table,
  th,
  td,
  p,
  div,
  span,
  a,
  li {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* 5. Annuler tout positionnement absolu/fixed venu d'un style inline. */
  [style*="position:absolute"],
  [style*="position: absolute"],
  [style*="position:fixed"],
  [style*="position: fixed"] {
    position: static !important;
  }

  /* 6. Annuler les flottements. */
  [align="right"],
  [align="left"] {
    text-align: inherit;
    float: none !important;
  }

  /* 7. Liens de navigation (header) : un peu d'espace autour pour etre
        cliquables au doigt. */
  body > table:first-of-type a,
  body > table > tbody > tr > th a {
    display: inline-block;
    margin: 4px 6px;
    padding: 4px 2px;
  }

  /* 8. Typographie mobile. */
  body,
  table,
  th,
  td,
  p {
    font-size: 14px;
    line-height: 1.45;
  }

  h1, h2, .Style60, .Style78 {
    font-size: 18px !important;
    line-height: 1.3;
  }

  h2 {
    font-size: 16px !important;
  }

  /* 9. Formulaires : inputs larges. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* ---------- Petit mobile (<=480 px) ------------------------------------- */
@media screen and (max-width: 480px) {

  body,
  table,
  th,
  td,
  p {
    font-size: 13px;
  }

  th,
  td {
    padding: 4px 2px !important;
  }

  blockquote {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }

  /* Le logo et les grandes images : tenir dans la largeur ecran. */
  img[src*="logo"],
  img[width="263"],
  img[width="248"],
  img[width="235"] {
    max-width: 80% !important;
    display: block;
    margin: 0 auto;
  }
}