/* ------------------------------------------------------------------
   Couche responsive - posee le 31/08/2026
   Ne s'applique QU'EN DESSOUS de 1024px : l'affichage bureau (#page a
   1000px) n'est jamais touche. Premiere passe volontairement prudente :
   on rend la charpente fluide, sans masquer ni restructurer le contenu.
   Numero de version manuel dans header.tpl, a incrementer a chaque
   modification de ce fichier.
   ------------------------------------------------------------------ */

@media (max-width: 1023px) {

  html, body { -webkit-text-size-adjust: 100%; }

  /* charpente : de largeurs fixes a largeurs fluides */
  #page, #header, #columns, #footer {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #left_column, #center_column, #right_column {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #center_column {
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  /* rien ne doit deborder de son cadre */
  img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto;
  }

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

  input, select, textarea {
    max-width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  body { font-size: 15px; line-height: 1.5; }
}

/* ------------------------------------------------------------------
   Section 2 - elements de modules figes en largeur, releves au
   navigateur a 375px le 31/08/2026.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {

  /* menu principal (pm_advancedtopmenu) : conteneur interne fige a 1000px,
     seul vrai debordement de la page */
  #adtm_menu_inner,
  #adtm_menu ul#adtm_menu_tab,
  #adtm_menu .adtm_menu_tab {
    width: auto !important;
    max-width: 100% !important;
  }

  /* diaporama (pm_adsandslideshow) : diapositives de 730px, deja
     decoupees par leur cadre, on borne le cadre lui-meme */
  #PM_AdsAndSlideshow,
  .PM_AdsAndSlideshow,
  div[id^="PM_AdsAndSlideshowWrapper"] {
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------------
   Section 3 - blocs d en-tete places en absolu pour un gabarit de
   1000px. Mesures au navigateur a 375px le 31/08/2026 :
     #search_block_top      left 703 -> entierement hors ecran
     #blockmyaccountdeluxe  left 338, droite 508 -> coupe
     #callback              left 750 -> entierement hors ecran
   On les remet simplement dans le flux.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {

  #search_block_top,
  #blockmyaccountdeluxe,
  #callback {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 6px 0 !important;
  }

  #search_block_top input[type="text"] {
    max-width: 60% !important;
  }
}

/* ------------------------------------------------------------------
   Section 4 - pied de page et bandeau cookies, figes autour de 980px.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {

  #footercustom_links,
  #footercustom_editor,
  #footer table,
  #footer td {
    width: auto !important;
    max-width: 100% !important;
  }

  #footer table { table-layout: auto !important; }

  #cookieNotice,
  #cookieNoticeContent {
    max-width: 100vw !important;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------------
   Section 5 - la banniere de l en-tete.
   #header porte logo-new.jpg en IMAGE DE FOND (1000x230), avec
   height:230px en dur : la regle "img { max-width:100% }" ne l atteint
   donc pas, et la banniere etait simplement rognee a droite.
   On la met a l echelle et on reserve sa hauteur par un padding en
   pourcentage : 230/1000 = 23%.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {

  #header {
    height: auto !important;
    min-height: 0 !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    padding-top: 23% !important;
  }

  /* diaporama : surcouches et puces de navigation calees sur 730px */
  .PM_AdsAndSlideshowWrap,
  .PM_AdsAndSlideshowBgColor,
  .PM_AdsAndSlideshowBgHTML,
  .adss_controls,
  ol.controls {
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------------
   Section 6 - badge de rappel telephonique, qui chevauchait le menu.

   ESSAI ECARTE le 31/08/2026 : borner les images du carrousel
   (a[class^="rollover"] img avec height:auto) fait DISPARAITRE les
   vignettes video - le module leur impose une hauteur calculee en
   script. Les diapositives de 730px restent donc plus larges que
   l ecran sur telephone ; elles sont decoupees par leur cadre et ne
   font pas deborder la page. A ne pas retenter sans revoir le module.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  #callback {
    clear: both !important;
    display: block !important;
  }
}

/* ------------------------------------------------------------------
   Section 7 - LE MENU. Signale par Olivier le 31/08/2026.

   Cause exacte, mesuree au navigateur a 375px : `ul#menu` est en
   `position: absolute`, donc HORS DU FLUX. Ses 8 entrees passent sur
   deux lignes (64px), mais le conteneur #adtm_menu reste a 2px de haut
   et ne les contient pas : le menu chevauchait le contenu suivant.
   Invisible sur bureau, ou tout tient sur une seule ligne.

   Correctif : remettre le ul dans le flux et lui faire contenir ses
   `li` flottants via `display: flow-root` (pas `overflow: hidden`, qui
   decouperait les sous-menus deployes).
   Mesure apres correctif : menu 2px -> 66px, le contenu suivant
   descend de 288 a 352, zero debordement horizontal.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {

  #adtm_menu,
  #adtm_menu_inner {
    height: auto !important;
    min-height: 0 !important;
  }

  #adtm_menu ul#menu {
    position: static !important;
    height: auto !important;
    display: flow-root;
  }
}

/* ------------------------------------------------------------------
   Section 8 - MENU BURGER, demande par Olivier le 31/08/2026.

   LA VRAIE CAUSE du menu casse sur telephone, invisible en emulation
   parce que je n avais jamais TAPE sur une entree :
     #adtm_menu ul#menu li div.adtm_sub { position:absolute; left:-9999px }
     #adtm_menu ul#menu :hover div.adtm_sub { left:0 }
     .li-niveau1 .adtm_sub { width:992px }
   Sur un ecran tactile, le premier appui declenche le :hover. Un panneau
   de 992px surgissait donc a gauche et recouvrait toute la page.

   Reponse : sous 1024px, la barre horizontale est remplacee par un
   bouton et une liste verticale, et les sous-menus au survol sont
   neutralises. Les 8 entrees de premier niveau ont toutes un lien
   reel : rien ne devient inaccessible.
   ------------------------------------------------------------------ */

#pc-burger { display: none; }

@media (max-width: 1023px) {

  /* le bouton */
  #pc-burger {
    display: block;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-top: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
    background: #f2f2f2;
    color: #333;
    font: bold 16px/1 Arial, Helvetica, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  #pc-burger .pc-burger-trait {
    display: inline-block;
    width: 24px;
    height: 3px;
    margin: 0 12px 14px 0;
    background: #333;
    box-shadow: 0 7px 0 #333, 0 14px 0 #333;
    vertical-align: middle;
  }
  #pc-burger .pc-burger-texte { vertical-align: middle; }

  /* la liste, repliee par defaut */
  #adtm_menu ul#menu { display: none !important; }
  #adtm_menu.pc-ouvert ul#menu {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
  }

  /* une entree par ligne, cible tactile confortable */
  #adtm_menu ul#menu > li.li-niveau1 {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #adtm_menu ul#menu > li.li-niveau1 > a {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 14px 16px !important;
    line-height: 1.3 !important;
    border-width: 0 0 1px 0 !important;
  }

  /* LE POINT CRITIQUE : plus aucun panneau de 992px au survol */
  #adtm_menu .adtm_sub {
    display: none !important;
  }
}

/* Section 8 bis - le flottement etait sur le LIEN, pas sur le li.
   Sans cela les entrees se remettaient en grille a l ouverture. */
@media (max-width: 1023px) {

  #adtm_menu ul#menu > li.li-niveau1 > a,
  #adtm_menu ul#menu > li.li-niveau1 > a.a-niveau1 {
    float: none !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #adtm_menu ul#menu > li.li-niveau1 > a span {
    display: inline !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    background-image: none !important;
  }

  #adtm_menu ul#menu > li.li-niveau1 {
    border-bottom: 1px solid #e0e0e0 !important;
  }
}

/* ------------------------------------------------------------------
   Section 9 - retours d Olivier sur telephone reel, 31/08/2026.
   1. bandeau resserre : la recherche disparait
   2. champ blanc et bouton "Rechercher" supprimes (mobile seulement)
   3. "Mon compte" a droite, sur la ligne du burger, sans son libelle
   4. plus de decalage lateral au glissement
   5. blocs de diaporama vides replies
   ------------------------------------------------------------------ */

/* --- 5. blocs vides : hors requete media, ils sont vides partout --- */
div[id^="PM_AdsAndSlideshow_"].pc-bloc-vide {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 1023px) {

  /* --- 2. la recherche n a pas sa place sur telephone --- */
  #search_block_top { display: none !important; }

  /* --- 4. l image de fond enneigee fait 740px de large et depasse
         l ecran : c est elle qui laissait glisser la page vers la
         gauche. Purement decorative, on la retire sur mobile. --- */
  img.vegas-background,
  .vegas-loading,
  #vegas-overlay { display: none !important; }
  html, body { overflow-x: hidden !important; }

  /* --- 1 + 3. la barre burger + compte, sous la banniere --- */
  #header {
    text-align: left !important;
    padding-bottom: 0 !important;
  }
  #header:after {
    content: "";
    display: table;
    clear: both;
  }

  #pc-burger {
    float: left !important;
    width: auto !important;
    border-right: 1px solid #d5d5d5;
  }

  #blockmyaccountdeluxe {
    position: static !important;
    float: right !important;
    width: auto !important;
    max-width: 45% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f2f2f2 !important;
    border-top: 1px solid #d5d5d5 !important;
    border-bottom: 1px solid #d5d5d5 !important;
    border-left: 1px solid #d5d5d5 !important;
  }
  #blockmyaccountdeluxe table { width: auto !important; margin: 0 !important; }

  /* le libelle "Mon compte" ne sert a rien a cote de l icone */
  #blockmyaccountdeluxe td.account_title { display: none !important; }

  /* l icone seule, dimensionnee pour le doigt */
  #blockmyaccountdeluxe td.account_unlog,
  #blockmyaccountdeluxe td.account_log {
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 28px auto !important;
  }
}

/* Section 9 bis - fond uniforme sur la barre burger + compte.
   #header porte "background: #222" : sous la banniere, la zone
   restait noire entre les deux boutons. */
@media (max-width: 1023px) {
  #header { background-color: #f2f2f2 !important; }
  #blockmyaccountdeluxe td.account_unlog,
  #blockmyaccountdeluxe td.account_log { background-color: #f2f2f2 !important; }
}

/* Section 9 ter - la pastille sombre du bouton compte.
   #blockmyaccountdeluxe_account porte bg_account_pt.png, un fond
   dessine pour le bouton bureau AVEC son libelle. Le libelle retire,
   il ne restait qu un aplat noir de 170x70 a droite de l icone. */
@media (max-width: 1023px) {
  #blockmyaccountdeluxe_account,
  #blockmyaccountdeluxe_panier {
    background-image: none !important;
    background-color: transparent !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #blockmyaccountdeluxe { width: auto !important; }
}

/* Section 9 quater - fiche produit : la bande de vignettes fait 403px
   pour un ecran de 375. On borne le CADRE, jamais les images
   elles-memes : leur imposer une hauteur les fait disparaitre
   (voir section 6). */
@media (max-width: 1023px) {
  #views_block,
  #thumbs_list,
  #thumbs_list_frame {
    max-width: 100% !important;
  }
  #thumbs_list { overflow: hidden !important; }
}

/* ------------------------------------------------------------------
   Section 10 - suite des retours d Olivier, 31/08/2026.
   - le compte client n a plus lieu d etre : le site ne vend plus
   - la description produit debordait
   - les surcouches du diaporama et leurs images doivent se plier
     a la largeur de l ecran
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {

  /* --- compte client supprime : le site est en mode catalogue --- */
  #blockmyaccountdeluxe { display: none !important; }
  #pc-burger { border-right: 0; }

  /* --- description produit : elle debordait de 20px --- */
  #center_column .rte,
  #center_column .rte *,
  #more_info_sheets,
  #more_info_sheets * {
    max-width: 100% !important;
    word-wrap: break-word;
  }
  #center_column .rte table,
  #more_info_sheets table {
    display: block !important;
    overflow-x: auto !important;
    width: auto !important;
  }

  /* --- surcouches du diaporama : cadre et images a la largeur
         de l ecran. On ne touche PAS a leur hauteur : l imposer
         fait disparaitre les vignettes (voir section 6). --- */
  div[id^="PM_AdsAndSlideshowWrap_"],
  div[id^="PM_AdsAndSlideshowBgColor_"],
  div[id^="PM_AdsAndSlideshowBgHTML_"] {
    max-width: 100% !important;
  }
  div[id^="PM_AdsAndSlideshowBgHTML_"] img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Section 10 bis - le selecteur Google Traduction depassait de 176px
   sur la fiche produit. On borne le cadre ; le script de Google gere
   son contenu tout seul. */
@media (max-width: 1023px) {
  .goog-te-gadget,
  .goog-te-gadget-simple,
  #google_translate_element,
  [id^="\:0\."] {
    max-width: 100% !important;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .goog-te-gadget-simple > span { white-space: normal !important; }
}

/* ------------------------------------------------------------------
   Section 11 - compte client retire PARTOUT, bureau compris.
   Demande d Olivier le 31/08/2026 : le site est en mode catalogue,
   il ne vend plus, un espace client n a plus d objet.
   Hors requete media, volontairement.
   ------------------------------------------------------------------ */
#blockmyaccountdeluxe { display: none !important; }

/* ------------------------------------------------------------------
   Section 12 - LE CARROUSEL. Signale par Olivier : "les images
   s affichent brievement, depassent l ecran, puis disparaissent".

   Cause : le module s appuie sur SudoSlider, qui fige la largeur des
   diapositives AU CHARGEMENT d apres un conteneur de 730px. Sur un
   ecran de 375, les diapositives debordent, puis l animation les
   emporte hors champ.

   Sous 1024px on abandonne l animation et on empile les diapositives
   a la verticale, chacune sur toute la largeur : tout le contenu
   reste visible, et c est reellement responsive. Les fleches et
   puces de navigation n ont alors plus d objet.

   Tout est en CSS a dessein : la requete media s annule d elle-meme
   au-dessus de 1024px, l affichage bureau retrouve donc SudoSlider
   intact. Seule la hauteur du bloc passe par le script, le module
   l ecrivant avec un selecteur d IDENTIFIANT que le CSS ne peut pas
   surcharger.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {

  ul.PM_AdsAndSlideshow {
    position: static !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  ul.PM_AdsAndSlideshow > li {
    position: static !important;
    float: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }

  ul.PM_AdsAndSlideshow > li img,
  ul.PM_AdsAndSlideshow > li a img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  ul.PM_AdsAndSlideshow > li a {
    display: block !important;
    width: auto !important;
  }

  /* fleches et puces : sans animation, elles n ont plus de role */
  .PM_AdsAndSlideshowWrap .adss_controls,
  .adss_controls,
  .PM_AdsAndSlideshowWrap .adss_prev,
  .PM_AdsAndSlideshowWrap .adss_next {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   Section 13 - la visionneuse d images des pages CMS.
   Signale par Olivier : "dans les CMS, les images s ouvrent en pop up
   qui debordent de l ecran sur mobile".

   Le module customezoombox (Zoombox) dimensionne sa fenetre sur la
   TAILLE NATURELLE de l image : un schema de 1200px de large sort donc
   de l ecran sur un telephone. On borne le conteneur et l image a la
   largeur et a la hauteur visibles.

   Le script de Zoombox ecrit ses dimensions en style EN LIGNE ; on
   surcharge donc en !important, ce qui suffit ici (ses selecteurs sont
   des identifiants, mais nous ciblons les memes identifiants).
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {

  #zoombox_contener,
  #zoombox_relative,
  #zoombox_content {
    max-width: 96vw !important;
    max-height: 88vh !important;
    width: auto !important;
    height: auto !important;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  #zoombox_contener {
    left: 2vw !important;
    right: 2vw !important;
    margin-left: 0 !important;
    overflow: auto !important;
  }

  #zoombox_content img,
  #zoombox_relative img {
    max-width: 100% !important;
    max-height: 84vh !important;
    width: auto !important;
    height: auto !important;
  }

  #zoombox_content iframe {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* la croix de fermeture doit rester atteignable au doigt */
  #zoombox_close,
  .zoombox_close {
    width: 44px !important;
    height: 44px !important;
    background-position: center center !important;
  }

  #zoombox_infos,
  #zoombox_title { max-width: 96vw !important; }
}