/* ==========================================================================
   responsive.css v22 — Adaptation responsive du site segema.fr
   --------------------------------------------------------------------------
   V21 (2026-04-24): La contrainte CSS V20 sur #sv-container a casse le
                     rendu du widget simpleviewer (photos non visibles).
                     V21 : approche differente — on ne touche plus au CSS
                     pour ce cadre. A la place, galerie.php a ete modifie
                     pour passer une hauteur fixe (600px) au lieu de "80%"
                     dans l'appel simpleviewer.load(). Passe par la propre
                     API du widget, pas de conflit CSS. Impact : les 2
                     pages qui incluent galerie.php (stockage-de-barre et
                     galerie-stockage-barres-tubes) auront le widget a
                     800x600px.
   V20 : contrainte CSS sur #sv-container (cassait le widget). Retiree.
   V19 : retour en arriere sur v14-v18. Mauvaise page.
   V15 : V14 etait trop large (border:0 applique a ~20 pages). Resserre
                     l'upscale via img[src*="a-barre-accueil/"] mais a
                     laisse le cadre epais + cellspacing=12 + heights
                     fixes sur la grille cantilever, d'ou le "cadre trop
                     haut" reporte par l'utilisateur.
   V14 : (retiree en v15 — selecteur trop large qui supprimait des cadres
         sur d'autres pages que la page ciblee).
   V13 : Pages produits type stockage-tiroir-lourd :
                     images 250x250 dans tables 600px upscalees a 310px
                     (+24%) sur PC + alignement vertical haut des cellules
                     pour reduire le cadre blanc autour des photos.
                     (RETIREE en v14 : ciblait la mauvaise page)
   V12 : FIX PC — la regle globale "img/video/iframe/embed/object
                     { max-width:100%; height:auto }" qui cassait les
                     dimensions d'images et de videos embarquees sur PC
                     est deplacee dans @media (max-width:1024px).
                     En plus, <iframe> exclu du "height:auto" (cassait
                     les videos YouTube : preview plus petite, plus de son).
                     + Typographie moderne restauree depuis v11 :
                     pile systeme + body 16px + line-height 1.55.
   V11 : Typographie moderne (tous ecrans) : pile systeme, 16px, 1.55.
   V10 : Hierarchie visuelle des 3 bandes retravaillee :
                     - logo sur fond gris #cccccc
                     - bande 1 (SEO) plus discrete : police 11px (3 lignes)
                     - bande 2 (Groupe/Refs/Contact) tres discrete, gris clair
                     - bande 3 (produits) devient PRIMAIRE : titre en block
                       "solutions de stockage" + 4 produits en avant
   V9 : HOTFIX — forcer tous les descendants des bandes en
                     inline et masquer les <br> heritees du haut.php
                     d'origine (sinon chaque item tombait sur sa ligne et
                     les separateurs "." apparaissaient isoles).
   V8 : Header haut.php scinde en 3 bandes visuelles (logo +
                     Tel/SEO + Groupe-Refs-Contact + Categories produits).
                     Reorganisation DOM par hamburger.js, styles CSS ici.
                     Suppression de la regle universelle * inline de v6.
   V7 : HOTFIX — re-masquer <style>/<script>/<noscript> dans la 1re ligne
        (sinon le code GA/GTM s'affiche en texte).
   V6 : haut.php en flow inline (tout comme un paragraphe);
        menu hamburger en overlay plein ecran; bouton fixed.
   V5 : haut.php compacte (inline-block — n'a pas pris).
   V4 : menu hamburger sur mobile (cf. hamburger.js).
   V3 : compactage vertical des menus sur mobile.
   V2 : linearisation agressive de toutes les tables imbriquees.
   ========================================================================== */

/* ---------- Bouton hamburger (masque par defaut, visible en mobile) ----- */

.segema-hamburger {
  display: none;
}

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

/* PAS de contrainte globale sur les images/videos :
   sur PC, les images et iframes doivent garder leurs dimensions
   d'origine (design desktop legacy). Les contraintes responsives
   sont appliquees UNIQUEMENT dans les media queries mobile/tablette. */

table {
  max-width: 100%;
}

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

/* ---------- Typographie moderne (tous ecrans) -------------------------- */
/* Remplace Times/Arial par une pile systeme moderne, augmente le
   line-height et fixe une base 16px pour le confort de lecture.
   Le !important est necessaire pour surclasser les <font face="...">
   et styles inline herites du HTML Dreamweaver d'origine. */

body,
table,
th,
td,
tr,
p,
div,
span,
a,
li,
ul,
ol,
dl,
dt,
dd,
blockquote,
h1, h2, h3, h4, h5, h6,
input,
textarea,
select,
button,
label,
legend,
fieldset,
font {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body {
  font-size: 16px;
  line-height: 1.55;
  color: #222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p,
li,
td,
th,
dd {
  line-height: 1.55;
}

/* Les titres gardent une interligne plus serree. */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
}

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;
}

/* ---------- PC uniquement (>=1025 px) ----------------------------------- */
/* (La contrainte de hauteur du widget simpleviewer est gerée directement
   dans galerie.php via simpleviewer.load('sv-container', '800', '600', ...)
   — plus fiable qu'une contrainte CSS qui cassait le rendu du widget.) */

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

  body > table {
    width: 100% !important;
    max-width: 100% !important;
  }

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

  /* Images responsives (mobile/tablette uniquement, PC conserve
     les dimensions d'origine du design desktop). */
  img,
  embed,
  object {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Video et iframe : max-width 100% SEULEMENT, on ne touche pas
     a la hauteur (sinon YouTube/videos embarquees cassent). */
  video,
  iframe {
    max-width: 100% !important;
  }
}

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

  /* 0a. BOUTON HAMBURGER : barre fixe en haut de page. */
  .segema-hamburger {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background: #003366;
    color: #fff;
    border: 0;
    border-bottom: 2px solid #002244;
    font-size: 15px;
    font-weight: bold;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
  }

  .segema-hamburger:hover,
  .segema-hamburger:focus {
    background: #00509e;
    outline: none;
  }

  /* Le body gagne un padding-top pour que le contenu ne passe pas sous
     le bouton fixe. */
  body {
    padding-top: 44px !important;
  }

  .segema-hamburger-icon {
    display: inline-block;
    position: relative;
    width: 22px;
    height: 16px;
    flex-shrink: 0;
  }

  .segema-hamburger-icon span {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
  }

  .segema-hamburger-icon span:nth-child(1) { top: 0; }
  .segema-hamburger-icon span:nth-child(2) { top: 7px; }
  .segema-hamburger-icon span:nth-child(3) { top: 14px; }

  /* Etat ouvert : icone en croix. */
  .segema-hamburger.open .segema-hamburger-icon span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }
  .segema-hamburger.open .segema-hamburger-icon span:nth-child(2) {
    opacity: 0;
  }
  .segema-hamburger.open .segema-hamburger-icon span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }

  /* 0b. MENU DE GAUCHE : masque par defaut en mobile. */
  .segema-mobile-menu {
    display: none !important;
  }

  /* 0c. MENU OUVERT : overlay plein ecran sous le bouton. */
  .segema-mobile-menu.segema-mobile-menu-open {
    display: block !important;
    position: fixed !important;
    top: 44px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #ffffff !important;
    z-index: 1000 !important;
    padding: 12px 16px !important;
    border-top: 1px solid #ddd !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /* Liens du menu gauche : blocs tactiles, grands. */
  .segema-mobile-menu.segema-mobile-menu-open a {
    display: block !important;
    padding: 12px 14px !important;
    min-height: 44px;
    line-height: 1.4;
    border-bottom: 1px solid #e5e5e5;
    text-decoration: none;
    text-align: left !important;
    color: #003366;
    font-size: 15px;
  }

  .segema-mobile-menu.segema-mobile-menu-open a:active {
    background: #f0f0f0;
  }

  /* Tight spacing interne au menu ouvert : on efface les blancs residuels. */
  .segema-mobile-menu.segema-mobile-menu-open p,
  .segema-mobile-menu.segema-mobile-menu-open div {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .segema-mobile-menu.segema-mobile-menu-open ul,
  .segema-mobile-menu.segema-mobile-menu-open ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .segema-mobile-menu.segema-mobile-menu-open li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* 0d. Scroll lock du body quand menu ouvert. */
  body.segema-menu-open {
    overflow: hidden !important;
    /* position: fixed retiree : bloquait les taps sur le formulaire contact */
    width: 100% !important;
  }

  /* 1. LINEARISATION TOTALE : toute table devient une pile de blocs. */
  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: 0 !important;
    vertical-align: top !important;
  }

  /* 2. COMPACT : padding tres reduit sur toutes les cellules. */
  th,
  td {
    padding: 2px 4px !important;
    text-align: center !important;
  }

  /* 3. COMPACT : masquer toutes les cellules totalement vides
        (evite les grands vides gris dus aux cellules spacer d'origine). */
  td:empty,
  th:empty {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  /* Exception : cellules du formulaire contact (recaptcha + bouton) */
  form#contact_form td,
  form#contact_form th {
    display: table-cell !important;
    width: auto !important;
  }

  /* 4. COMPACT : collapser les <br> consecutifs (empilements decoratifs). */
  br + br {
    display: none !important;
  }

  /* Tout <br> place directement dans une cellule/div/p, en suite :
     neutraliser comme un simple espace. */
  br {
    line-height: 0.8 !important;
  }

  /* Divs vides : masquer. */
  div:empty {
    display: none !important;
  }

  /* Paragraphes ne contenant que du whitespace ou un nbsp (heuristique :
     cellules/paragraphes sans contenu significatif prennent min-height 0). */
  p {
    min-height: 0 !important;
  }

  /* Blockquote : marges reduites pour compacter. */
  blockquote {
    margin: 4px 0 !important;
    padding: 0 !important;
  }

  /* Listes vides (ul/ol sans li) : masquer. */
  ul:empty,
  ol:empty {
    display: none !important;
  }

  /* CELLULES MAIN (menu + content) : padding zero, leur contenu gere l'espace. */
  body > table > tbody > tr:nth-of-type(2) > th,
  body > table > tbody > tr:nth-of-type(2) > td {
    padding: 0 !important;
  }

  /* 5. COMPACT : marges reduites sur les blocs texte courants. */
  p {
    margin: 4px 0 !important;
    line-height: 1.3 !important;
  }

  ul,
  ol {
    margin: 4px 0 !important;
    padding-left: 20px !important;
  }

  li {
    margin: 1px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
  }

  h1, h2, h3, h4 {
    margin: 6px 0 !important;
    line-height: 1.2 !important;
  }

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

  /* 7. Images : toujours fluides. */
  img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    margin: 2px auto !important;
  }

  /* 8. Permettre au texte long de se couper. */
  body,
  table,
  th,
  td,
  p,
  div,
  span,
  a,
  li {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

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

  /* 10. Flottements annules. */
  [align="right"],
  [align="left"] {
    float: none !important;
  }

  /* 11. HEADER DU HAUT : 3 bandes visuelles (genere par hamburger.js v8).
         Le JS reorganize haut.php en 4 divs (logo + 3 bandes) et
         masque la table d'origine. Cette section stylise les bandes. */

  /* Defensive fallback : meme sans JS, on masque les assets inline
     (style/script GA/GTM) qui sont physiquement dans la 1re ligne. */
  body > table > tbody > tr:first-of-type style,
  body > table > tbody > tr:first-of-type script,
  body > table > tbody > tr:first-of-type noscript,
  body > table > tbody > tr:first-of-type template,
  body > table > tbody > tr:first-of-type head,
  body > table > tbody > tr:first-of-type title,
  body > table > tbody > tr:first-of-type meta,
  body > table > tbody > tr:first-of-type link {
    display: none !important;
  }

  /* Cellule wrapper principale de la 1re ligne : reste block, pas de
     padding (les bandes generees le portent). */
  body > table > tbody > tr:first-of-type > th,
  body > table > tbody > tr:first-of-type > td {
    display: block !important;
    padding: 0 !important;
    background: #ffffff !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }

  /* Chaque bande : bloc plein, padding, wrap naturel. */
  .segema-hdr {
    display: block !important;
    padding: 8px 10px !important;
    text-align: center !important;
    line-height: 1.6 !important;
    font-size: 13px !important;
    color: #222 !important;
    word-wrap: break-word !important;
  }
  .segema-hdr-item {
    display: inline !important;
  }

  /* HOTFIX v9 : le haut.php d'origine contient des <br> et des balises
     block heritees de Dreamweaver. On force tout en inline pour que le
     contenu flue comme une phrase et que les separateurs s'alignent.
     EXCEPTION (v10) : .segema-hdr-title reste en block (titre bande 3). */
  .segema-hdr br {
    display: none !important;
  }
  .segema-hdr p,
  .segema-hdr div:not(.segema-hdr-title),
  .segema-hdr span,
  .segema-hdr strong,
  .segema-hdr b,
  .segema-hdr em,
  .segema-hdr i,
  .segema-hdr a,
  .segema-hdr font,
  .segema-hdr small {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  /* Separer visuellement les items avec un petit espace. */
  .segema-hdr .segema-hdr-item {
    padding: 0 3px !important;
  }

  /* Logo SEGEMA : fond gris (comme sur desktop), centre. */
  .segema-hdr-logo {
    background: #cccccc !important;
    padding: 10px 10px 8px !important;
  }
  .segema-hdr-logo img {
    display: inline-block !important;
    max-width: 160px !important;
    max-height: 48px !important;
    height: auto !important;
    vertical-align: middle !important;
    margin: 0 !important;
  }

  /* Bande 1 : Tel + liens SEO (fond gris clair, police reduite,
     doit tenir sur 3 lignes). */
  .segema-hdr-part1 {
    background: #e8e8e8 !important;
    border-top: 1px solid #d0d0d0 !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    padding: 6px 8px !important;
  }
  .segema-hdr-part1 a {
    color: #333 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .segema-hdr-part1 a:hover {
    text-decoration: underline !important;
  }
  .segema-hdr-part1 strong,
  .segema-hdr-part1 b {
    font-weight: bold !important;
  }

  /* Bande 2 : nav secondaire, DISCRETE (petit fond gris, texte leger). */
  .segema-hdr-part2 {
    background: #f0f0f0 !important;
    color: #666 !important;
    font-weight: normal !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
    border-top: 1px solid #d0d0d0 !important;
    border-bottom: 1px solid #d0d0d0 !important;
  }
  .segema-hdr-part2 a {
    color: #666 !important;
    text-decoration: none !important;
    font-weight: normal !important;
  }
  .segema-hdr-part2 a:hover {
    text-decoration: underline !important;
  }
  .segema-hdr-part2 strong,
  .segema-hdr-part2 b {
    color: #666 !important;
    font-weight: normal !important;
  }

  /* Bande 3 : PRIMAIRE (fond blanc, titre fort + 4 produits en avant). */
  .segema-hdr-part3 {
    background: #ffffff !important;
    padding: 14px 10px 12px !important;
    font-size: 14px !important;
  }
  .segema-hdr-title {
    display: block !important;
    font-weight: bold !important;
    font-size: 17px !important;
    color: #1f1f1f !important;
    text-align: center !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    line-height: 1.2 !important;
  }
  .segema-hdr-part3 a {
    color: #1f4e79 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-weight: bold !important;
  }
  .segema-hdr-part3 a:hover {
    text-decoration: underline !important;
  }
  .segema-hdr-part3 strong,
  .segema-hdr-part3 b {
    font-weight: bold !important;
  }

  /* Images eventuelles dans les bandes (petites icones). */
  .segema-hdr img {
    max-width: 100% !important;
    max-height: 48px !important;
    height: auto !important;
    vertical-align: middle !important;
  }

  /* 12. Typographie mobile : base 16px, interligne 1.55 pour le confort
         de lecture (evite aussi le zoom iOS sur input focus). */
  body,
  table,
  th,
  td,
  p {
    font-size: 16px;
    line-height: 1.55;
  }

  h1, .Style60, .Style78 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  /* 13. 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;
  }
}

/* --- Formulaire contact : override de la linearisation agressive --- */
  /* Les TD du form doivent rester visibles et empiles verticalement */
  form#contact_form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
  }
  form#contact_form table,
  form#contact_form tbody,
  form#contact_form tr,
  form#contact_form td,
  form#contact_form th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  form#contact_form td[align=right],
  form#contact_form th[align=right] {
    padding-top: 10px !important;
    font-weight: bold !important;
  }
  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% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    padding: 8px 6px !important;
    min-height: 44px !important;
  }
  form#contact_form input[type=radio] {
    width: auto !important;
    min-height: auto !important;
    margin-right: 8px !important;
  }
  form#contact_form input[type=submit],
  form#contact_form input.btn {
    display: block !important;
    width: 100% !important;
    min-height: 50px !important;
    font-size: 18px !important;
    margin-top: 12px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    border-radius: 4px !important;
  }
  .g-recaptcha {
    transform: scale(0.85) !important;
    transform-origin: 0 0 !important;
    margin-bottom: -10px !important;
  }

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

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

  th,
  td {
    padding: 1px 3px !important;
  }

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

  body > table:first-of-type img {
    max-width: 48% !important;
  }

  /* Liens du header encore plus compacts. */
  body > table:first-of-type a {
    font-size: 13px !important;
    margin: 0 1px !important;
  }
}