/* =========================================================
   BOUTON TÉLÉCHARGER
   ========================================================= */

.telecharger-btn {
  font-family: "amie", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: black;
  background-color: whitesmoke;
  border: 1.5px solid black;
  padding: 6px 12px;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}

.telecharger-btn:hover {
  background-color: #e0e0e0;
}

/* =========================================================
   BLOC PRODUIT
   ========================================================= */

.produit {
  display: flex;
  padding-left: 35px;
      padding-bottom: 35px;
  padding-top: 30px;  /*bizarre*/
  box-sizing: border-box;
  gap: 20px;
  align-items: flex-start;
  background-color: whitesmoke;
  height: auto;
}

/* Image principale */
.produit-image {
  width: 280px;
  height: auto;
  display: block;
  background-color: whitesmoke;
}

/* Texte */
.produit-texte {
  font-family: "amie";
  font-size: 15px;
  flex: 1;
  background-color: transparent;
}

@media (max-width: 700px) {
  .produit {
    flex-direction: column;
  }

  .produit-image {
    width: 100%;
    max-width: 280px;
  }
}

/* =========================================================
   MINIATURES – COMPORTEMENT NORMAL (>1100px)
   ========================================================= */

.miniatures {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(28px, 1fr);
  gap: 6px;
  margin-bottom: 20px;
  overflow: visible;
}

.miniatures img {
  width: 100%;
  height: auto;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.miniatures img:hover {
  box-shadow: 0 0 14px rgba(255, 0, 150, 0.9);
  transform: translateY(-2px);
}

/* =========================================================
   MINIATURES – < 1100px
   14 miniatures
   ligne 1 : 9
   ligne 2 : 5 (centrées)
   ========================================================= */

@media (max-width: 1250px) {

  .miniatures {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 6px;
    margin-bottom: 10px;
    padding-top: 15px;
    padding-left: 3px;
    padding-bottom: 15px;
    overflow: hidden;
  }

  /* 2e ligne : colonnes 3 à 7 */
  .miniatures img:nth-child(10) { grid-column: 3; grid-row: 2; }
  .miniatures img:nth-child(11) { grid-column: 4; grid-row: 2; }
  .miniatures img:nth-child(12) { grid-column: 5; grid-row: 2; }
  .miniatures img:nth-child(13) { grid-column: 6; grid-row: 2; }
  .miniatures img:nth-child(14) { grid-column: 7; grid-row: 2; }

  /* sécurité */
  .miniatures img:nth-child(n+15) {
    display: none;
  }
}

/* =========================================================
   WRAP PUBLICATION
   ========================================================= */

.wrap-publication {
  display: flex;
  flex-direction: column;
  width: 65.5%;
  font-size: 15px;
  height: 100vh;
  text-align: left;
  background-color: whitesmoke;
  min-height: 0;
  padding-right: 15px;
  box-sizing: border-box;
    overflow-y: auto;   /* ← SCROLL ICI */
}

.spacer-wrap-publication {
  width: 100%;
  font-size: 15px;
  height: 120px;
  background-color: whitesmoke;
  min-height: 0;
}

/* =========================================================
   RESPONSIVE GLOBAL PUBLICATIONS
   ========================================================= */

@media (max-width: 700px) {

  .page-index {
    display: flex;
    flex-direction: row;
  }

  .wrap-publication {
    flex: 1 1 100% !important;
    width: auto !important;
    max-width: 100%;
    padding-right: 20px;
    padding-left: 20px !important;
    padding-bottom: 20px;
    padding-top: 120px !important;
    box-sizing: border-box;
  }

  .page-index > :not(.wrap-publication):not(.top-bar-forum):not(.top-top-bar-marge){
    display: none !important;
  }

  .top-bar-forum {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    flex-wrap: nowrap;
  }

  .spacer-col-forum,
  .spacer-top-col-explicative {
    display: none;
  }

  .col-menu1 {
    flex: 1 1 auto;
    width: auto;
    text-align: right;
    padding-right: 20px;
    box-sizing: border-box;
  }
}

@media (max-width: 700px) {

  .page-index {
    display: block !important;
  }

  .wrap-publication {
    width: 100% !important;
    max-width: 100%;
  }

    .produit{
      padding-top: 10px;
    }

.produit-image {
  width: 100%;
  max-width: 200px;   /* ajuste ici la taille */
  height: auto;
  display: block;
  background-color: whitesmoke;
}
  .produit-texte {
  font-family: "amie";
  font-size: 15px;
  flex: 1;
  background-color: whitesmoke;
}
}

@media (max-width: 500px) {
  .produit-texte {
  font-family: "amie";
  font-size: 15px;
  padding-right: 0px !important;
  flex: 1;
  background-color: whitesmoke;
}

.wrap-publication {
    flex: 1 1 100% !important;
    width: auto !important;
    max-width: 100%;
    padding-right: 10px !important;
    padding-left: 10px !important;
    padding-bottom: 20px;
    box-sizing: border-box;
  }
}


@media (max-width: 700px) {
/* TOP BAR toujours lisible et au-dessus du scroll */
.top-bar-forum{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: whitesmoke !important; /* enlève la transparence */
}

/* Le contenu ne passe pas sous la top bar */
.wrap-publication{
  padding-top: 0px !important;  /* hauteur de ta top bar */
}

/* Le spacer devient inutile en mobile (sinon double décalage) */
.spacer-wrap-publication{
  display: none;
}}

@media (max-width: 700px) {
  .produit {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* =========================================================
   CACHER SCROLL
   ========================================================= */


.wrap-publication {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* Edge / IE */
}

.wrap-publication::-webkit-scrollbar {
  display: none;                /* Chrome / Safari */
}



/* =========================================
   PUBLICATIONS — SCROLL DANS .wrap-publication
   (surcharge styleforum.css)
   ========================================= */

/* 1) On fige la page (pas de scroll sur body) */
html, body{
  height: 100% !important;
}

body{
  overflow: hidden !important;  /* le scroll se fait dans .wrap-publication */
  margin: 0 !important;
}

/* 2) Top bar : fixe en haut (si ce n'est pas déjà le cas) */
.top-top-bar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* 3) Espace réservé sous la top bar (ta barre fait 120px) */
.top-top-bar-marge{
  height: 120px !important;
}

/* 4) LE conteneur qui scrolle */
.wrap-publication{
  height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important; /* iOS */
  min-height: 0 !important; /* important si parents en flex */
}

/* 5) (Optionnel) barre de scroll invisible, mais scroll OK */
.wrap-publication{
  scrollbar-width: none !important;     /* Firefox */
  -ms-overflow-style: none !important;  /* IE/Edge legacy */
}
.wrap-publication::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}


.page-index,
.produit,
.col-gauche,
.col-droite{
  min-width: 0 !important;
}

/* =========================================
   FIX VISIBILITÉ MENU/LOGO + SCROLL WRAP
   ========================================= */

/* 1) La top bar doit toujours être au-dessus */
.top-top-bar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100000 !important;   /* très haut pour passer devant tout */
  background: whitesmoke !important; /* évite transparence */
}

/* 2) Surtout ne pas la faire couper par un parent */
.page-index{
  overflow: visible !important;
}

/* 3) On empêche le scroll sur body (scroll dans wrap) */
html, body{
  height: 100% !important;
}
body{
  overflow: hidden !important;
  margin: 0 !important;
}

/* 4) Le conteneur qui scrolle : commence sous la top bar */
.wrap-publication{
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* IMPORTANT : on “pousse” le contenu sous la barre */
  padding-top: 120px !important;     /* hauteur de ta top bar */
  box-sizing: border-box !important;

  -webkit-overflow-scrolling: touch !important;
}

/* 5) Ton div marge devient inutile : on peut le neutraliser 
.top-top-bar-marge{
  height: 0 !important;
}*/


@media (max-width: 950px) {

  .produit{
    flex-direction: column !important;
    align-items: flex-start;
  }

  /* image en haut */
  .produit-image{
    width: 50%;
    max-width: 280px;   /* garde ta taille visuelle */
  }

  /* texte + miniatures prennent toute la largeur */
  .produit-texte{
    width: 100%;
    padding-right: 20px;
    box-sizing: border-box;
  }

}
@media (max-width: 950px) and (min-width: 701px) {

  /* on enlève les paddings parasites */
  .wrap-publication{
    padding-right: 0px !important; /* même valeur que .col-menu1 */
  }

  .produit{
    padding-left: 35px !important;
    padding-right: 20px !important;
  }

  .produit-texte{
    padding-right: 0 !important;
  }

}

/* =========================================
   PUBLICATIONS uniquement (<500px)
   empêcher le double offset top-bar
   ========================================= */

@media (max-width: 500px){

  /* On neutralise le padding-top hérité de stylebase
     UNIQUEMENT sur la page publications */
  .page-index:has(.wrap-publication){
    padding-top: 0 !important;
  }

  /* L’offset correct reste ici */
  .wrap-publication{
    padding-top: 130px !important;
  }
}

/* PUBLICATIONS (>700px) : top bar opaque (comme les autres pages) */
@media (min-width: 701px) {
  .top-bar-forum{
    background-color: whitesmoke !important;
  }

  /* Le tiers droit était transparent dans styleforum.css */
  .top-bar-forum .spacer-top-col-explicative{
    background-color: whitesmoke !important;
  }
}