/* =====================================================================
   Guay Beauté — ajustements mobile
   À charger APRÈS style.css et layout.css
   ===================================================================== */

/* --- Hauteurs fixes de certaines sections (ordinateur) ---------------
   Déplacées ici depuis des style="... !important" en ligne dans
   index.html, qu'aucune feuille de style ne pouvait surcharger. */
#pageVideos  .box { height: 440px !important; }
#pageContact .box { height: 370px !important; }
#pageMore    .box { height: 340px !important; }


/* =====================================================================
   MOBILE / PETITES TABLETTES
   ===================================================================== */
@media screen and (max-width: 900px) {

  /* --- Structure générale : la page défile normalement ------------- */
  html, body {
    position: static !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .glob {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }
  .main {
    width: auto !important;
    height: auto !important;
    padding: 0 12px;
  }
  .center { width: auto; }

  /* --- En-tête / logo ---------------------------------------------- */
  header {
    position: relative !important;
    display: block;
    height: auto;
    padding: 14px 12px 6px;
    box-sizing: border-box;
  }
  .logoHolder {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
  }
  .logoHolder img {
    max-width: 260px;
    width: 100%;
    height: auto;
  }

  /* --- Menu ----------------------------------------------------------- */
  #content {
    margin: 0 auto !important;
  }
  .menuHolder {
    position: static !important;
    float: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
  }
  .menu { margin-top: 10px !important; }
  .extraPl { display: none !important; }      /* bande décorative de 700px */
  #menu > li {
    display: flex !important;
    align-items: center;
    height: auto !important;
    margin-bottom: 4px !important;
    background: #202020;
  }
  #menu > li > a {
    flex: 1;
    width: auto !important;
    height: auto !important;
    display: block !important;
  }
  .numHold {
    width: 40px !important;
    flex: 0 0 40px;
    font-size: 16px !important;
    line-height: 38px !important;
  }
  .mText {
    position: relative !important;
    color: #fff !important;
    line-height: 38px !important;
    font-size: 16px !important;
  }
  /* Onglet « splash » retiré du menu (le logo ramène toujours à l'accueil) */
  #menu > li:first-child { display: none !important; }
  /* Copie du texte et fond animé ajoutés par scripts.js pour le survol : inutiles sur mobile */
  #menu .mTextOver,
  #menu .overPl { display: none !important; }
  /* Survol / onglet actif */
  #menu > li > a:hover .mText,
  #menu > li.active .mText { color: #b1005d !important; }

  /* --- Zone de contenu : sections empilées, plus de position absolue  */
  #content > ul {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-top: 12px;
  }
  #content > ul > li {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;        /* surcharge la hauteur calculée par scripts.js */
    overflow: visible !important;
  }
  /* Sections masquées par scripts.js : on les retire du flux */
  #content > ul > li[style*="visibility: hidden"],
  #content > ul > li[style*="visibility:hidden"] {
    display: none !important;
  }
  #pageRep { height: auto !important; }

  /* --- Boîtes de contenu ---------------------------------------------- */
  .box, .box1, .boxBlack, .boxFolio, .boxServices, .boxPrive, .boxAlone {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
    box-sizing: border-box;
  }
  #content #pageVideos .box,
  #content #pageContact .box,
  #content #pageMore .box { height: auto !important; }

  .containerContent, .containerContent2, .containerContent3 {
    padding: 16px 14px 10px !important;
  }
  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  .col1::after { content: ""; display: block; clear: both; }

  /* À propos */
  .h2difer {
    float: none !important;
    width: auto !important;
    font-size: 30px !important;
    line-height: 44px !important;
  }
  .col2 > div { top: 0 !important; margin: 6px 0 16px; }   /* bouton « Boutique GB » */

  /* Services */
  ._fig3 img { max-width: 100%; height: auto; margin: 0 0 10px 0 !important; }
  ._fig3 figcaption { width: 100% !important; margin-top: 0 !important; }

  /* Représentants : iframe Google Sheets */
  #pageRep iframe {
    width: 100% !important;
    height: 480px;
  }

  /* Vidéos */
  .sliderHolder {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }
  #_slider {
    width: 100% !important;
    height: auto !important;
  }
  #_slider > .descr {
    position: static !important;
    height: auto !important;
  }
  #_slider figure { margin-right: 12px; }

  /* Photos */
  .slider {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 600 / 318;
  }
  .slider img { width: 100% !important; height: auto !important; }
  .gallScroll, .viewport, .scrollbar {
    width: 100% !important;
  }
  .viewport { overflow-x: auto !important; }

  /* Contact : carte */
  .google_map {
    width: 100% !important;
    height: 240px !important;
    margin-bottom: 14px !important;
  }
  .google_map iframe {
    width: 100% !important;
    height: 100% !important;
  }

  /* Confidentialité */
  .boxPrive .small { font-size: 12px; line-height: 17px; }

  /* --- Accueil (splash) : les 2 encadrés centrés et empilés --------- */
  #news > div {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    margin: 14px auto !important;
    max-width: 100%;
  }
  #news > div img { max-width: 100%; height: auto; }

  /* --- Pied de page ---------------------------------------------------- */
  footer {
    position: relative !important;
    height: auto !important;
    display: block !important;
    margin-top: 20px;
  }
  .mainFooter {
    margin: 0 !important;
    padding: 10px 12px;
    box-sizing: border-box;
  }
  footer pre {
    float: none !important;
    padding: 0 !important;
    display: block !important;
    white-space: normal !important;
    margin-bottom: 6px;
  }
  footer pre a { float: none !important; }
  .followHolder {
    display: block !important;
    margin: 4px 0 0 !important;
  }
  .followHolder a[style*="margin-left"] { margin-left: 0 !important; }
}