/* 10/09/2024 Affichage 1 marque Page CETALOGUE */
/* Tuile cliquable (applique la classe au LIEN) */
a.brand-card{
  position: relative;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;

  /* bordure carrée, rien au repos */
  border: 10px solid transparent;
  box-shadow: none;

  transition: border-color .25s, box-shadow .25s, transform .25s;
}

a.brand-card img{
  display:block;
  width:100%;
  height:auto;
  transition: transform .25s;
  z-index:0;
}

/* Effets au survol */
a.brand-card:hover{
  border-color: #fff8e8;                        /* cadre ivoire */
  box-shadow: 0 12px 28px rgba(0,0,0,.32);      /* ombre seulement au hover */
  transform: translateY(-1px);
}
a.brand-card:hover img{
  transform: scale(1.04);                       /* zoom doux */
}

/* Voile sépia + vignette (comme la capture) */
a.brand-card::after{
  content:"";
  position:absolute; inset:0;
  /* vignette + couche sépia */
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.18) 78%,
      rgba(0,0,0,.28) 100%
    ),
    linear-gradient(
      rgba(90, 60, 30, .60),
      rgba(90, 60, 30, .60)
    );
  mix-blend-mode: multiply;                     /* enrichit le rendu */
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
  z-index:1;
}
a.brand-card:hover::after{ opacity:1; }

/* Icône diaphragme centrée (ton fichier) */
a.brand-card::before{
  content:"";
  position:absolute; inset:0;
  background: url("/images/headers/diaph.png") center/78px no-repeat;
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
  z-index:2;
}
a.brand-card:hover::before{ opacity:1; }


/* ===== Bande pleine largeur (fond) + contenu limité ===== */
/* Scope page (facultatif) : remplace .has-hero par ton body/itemid si besoin */
.has-hero #row_ID1757602073455{
  /* pleine largeur pour le FOND */
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;

  /* l’image de fond est réglée dans PBCK (cover/center/fixed/scroll) */
  background-position: center;
  background-size: cover;

  padding: 4rem 0; /* hauteur de la bande */
}

/* --------- CONTENU LIMITÉ (~1200px) --------- */
/* on cible plusieurs wrappers possibles de PBCK pour être sûr */
.has-hero #row_ID1757602073455 > .inner,
.has-hero #row_ID1757602073455 .innercontent,
.has-hero #row_ID1757602073455 .pbck_inner,
.has-hero #row_ID1757602073455 .sp-page-builder-container{
  width: 100%;
  max-width: 1200px;       /* <-- c’est ça qui retient tes colonnes */
  margin-left:  auto;
  margin-right: auto;
  /* un peu d’air latéral si tu veux */
  /* padding-left: 16px;
     padding-right:16px; */
}

/* s’assurer que le contenu passe au-dessus d’un éventuel overlay */
.has-hero #row_ID1757602073455 > *{ position: relative; z-index: 1; }


/* 1) La “case” de chaque vignette */
.pbck_slide_thumb{
  display:flex !important;          /* centre sans toucher au slider */
  align-items:center !important;    /* centrage vertical */
  justify-content:center !important;/* centrage horizontal */
  overflow:hidden;
  line-height:0;                    /* évite l’espace de baseline */
}

/* 2) L’image à l’intérieur de la case */
.pbck_slide_thumb img{
  display:block;
  max-height:100% !important;
  max-width:100% !important;
  height:auto !important;
  width:auto !important;
  object-fit:contain !important;    /* on garde l’image entière */
  object-position:center !important;
}

/* 3) Si la vignette est cliquable (<a> autour de l'image) */
.pbck_slide_thumb > a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100%; height:100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">
.accordeon-clear .ui-accordion-content ul { list-style: disc; margin-left: 1.2rem; }
.accordeon-clear .ui-accordion-content li { margin: .15rem 0; }

/* 1) Cacher toute légende/titre autour des vignettes du carrousel "Publicités" */
.pub-car figcaption,
.pub-car .ck-caption,
.pub-car .ck-slide-caption,
.pub-car [class*="caption"]{
  display: none !important;
}

/* 2) Cacher la navigation locale (flèches / points) pour ce carrousel */
.pub-car .ck-arrows,
.pub-car .ck-prev,
.pub-car .ck-next,
.pub-car .ck-dots,
.pub-car .ck-dot,
.pub-car [class*="prev"],
.pub-car [class*="next"],
.pub-car [class*="arrow"],
.pub-car [class*="dot"],
.pub-car [id*="prev"],
.pub-car [id*="next"],
/* compat frameworks courants si l’addon en utilise un */
.pub-car .slick-prev,
.pub-car .slick-next,
.pub-car .slick-dots,
.pub-car .owl-prev,
.pub-car .owl-next,
.pub-car .owl-dots,
.pub-car .swiper-button-prev,
.pub-car .swiper-button-next,
.pub-car .swiper-pagination {
  display: none !important;
}

/* Cette galerie seulement : l'ancre #gal-cap-below est juste avant */
.cktype[data-type="code"]:has(#gal-cap-below) + .cktype[data-type="gallery"] figure{margin:0}
.cktype[data-type="code"]:has(#gal-cap-below) + .cktype[data-type="gallery"] img{display:block}

/* Met la légende (caption) SOUS l'image, visible */
.cktype[data-type="code"]:has(#gal-cap-below) + .cktype[data-type="gallery"] figcaption,
.cktype[data-type="code"]:has(#gal-cap-below) + .cktype[data-type="gallery"] .ck-caption,
.cktype[data-type="code"]:has(#gal-cap-below) + .cktype[data-type="gallery"] .pbck_image_caption{
  position:static!important;background:transparent!important;opacity:1!important;visibility:visible!important;
  transform:none!important;height:auto!important;padding:6px 0 0!important;color:#000;display:block!important;text-align:left;
}

/* Ne garder que le Titre : on masque tout ce qui ressemble à "description" */
.cktype[data-type="code"]:has(#gal-cap-below) + .cktype[data-type="gallery"] [class*="desc"]{
  display:none!important;
}

/* ------------------------------------ */