:root{
  /* accent maquette (liens bas) */
  --c-accent-link: #ff6a2a;
}

.ct-shortcode{
  width: 100%;
  min-width: 0;
}

#autres_reseaux{
  position: relative;
  overflow: visible;
}

.sit-refs{
  width: 100%;
  min-width: 0;
}

/* =========================
   GRILLE "AUTRES RÉSEAUX"
========================= */
.sit-refs-grid{
  width: 100%;
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
}

.sit-refs-tile{
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 20px 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  transition: box-shadow .3s ease;
}

.sit-refs-tile:hover,.sit-refs-tile.is-active{
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, .10);
}

.sit-refs-tile img{
  display: block;
  width: 100%;
  max-height: 150px;
  object-fit: contain;
  filter: none;
}

.sit-refs-grid--large .sit-refs-tile img{
  max-width: 240px;
}

@media (max-width: 1100px){
  .sit-refs-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .sit-refs-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 460px) {
  .sit-refs-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sit-refs-tile { width: 75%; }
}

/* =========================
   POPUP (général)
========================= */
.sit-refs-popup{
  width: 100%;
  display: none;
  margin-inline: auto;
  overflow: visible;
}

.sit-refs-popup.is-open{
  display: block;
}

.sit-refs-popup__inner{
  width: 100%;
}

.sit-refs-popup__panel{
  position: relative;
  background: var(--sit-bleu);
  border-top-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 28.57px;
  border-bottom-left-radius: 28.57px;
  padding: clamp(40px, 8vw, 115px) clamp(20px, 6vw, 130px) clamp(40px, 8vw, 115px);
  color: var(--sit-blanc);
  z-index: 5;
}

/* close */
.sit-refs-popup__close{
  position: absolute;
  top: clamp(10px, 1.5vw, 28px);
  right: clamp(10px, 1.5vw, 28px);
  z-index: 20;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: clamp(40px, 7vw, 67px);
  height: clamp(40px, 7vw, 67px);

  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;

  font-size: 0;
  line-height: 0;
  transition: transform .3s ease;
}

.sit-refs-popup__close:hover{
  transform: scale(.8);
}

.sit-refs-popup__close-icon{
  display: block;
  width: clamp(40px, 7vw, 67px);
  height: clamp(40px, 7vw, 67px);
}

/* Top layout */
.sit-refs-popup__top{
  display: block;
}

.sit-refs-popup__content{
  display: flow-root;
  width: 100%;
  min-width: 0;
}

.sit-refs-popup__logo-block{
  float: left;
  background: var(--sit-blanc);
  border-top: 4px solid #cad5e9;
  border-top-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 28.57px;
  border-bottom-left-radius: 28.57px;
  width: min(42%, 420px);
  min-width: 220px;
  min-height: clamp(180px, 18vw, 320px);
  display: grid;
  overflow: hidden;
  justify-items: center;
  align-items: center;
  padding: clamp(20px, 3vw, 40px);
  margin: 0 clamp(22px, 3vw, 34px) 16px 0;
}

.sit-refs-popup__logo-block img{
  width: 100%;
  max-width: 75%;
  height: auto;
  object-fit: contain;
  display: block;
}

.sit-refs-popup__title{
  color: var(--sit-vert);
  font-weight: var(--sit-font-bold);
  font-size: clamp(24px, 3vw, 45px);
  line-height: 1.05;
  margin: 0 0 14px;
  letter-spacing: .2px;
}

.sit-refs-popup__text{
  color: var(--sit-blanc);
  font-weight: var(--sit-font-regular);
  font-size: clamp(18px, 2.3vw, 24px);
  line-height: 1.3;
}

.sit-refs-popup__text > *:first-child{
  margin-top: 0;
}

.sit-refs-popup__text > *:last-child{
  margin-bottom: 0;
}

@media (max-width: 660px){
  .sit-refs-popup__logo-block{
    float: none;
    width: 100%;
    min-width: 0;
    min-height: clamp(180px, 26vh, 280px);
    margin: 0 0 24px;
  }
}

/* KPI */
.sit-refs-kpis{
  margin-top: 55px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px){
  .sit-refs-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px){
  .sit-refs-kpis{ grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 25px; gap: 15px;}
}

.sit-refs-kpi{
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  padding: 10px 8px;
}
@media (max-width: 460px){
  .sit-refs-kpi{
    gap: 2px;
  }
}

.sit-refs-kpi__icon{
  width: clamp(55px, 8vw, 90px);
  height: clamp(55px, 8vw, 90px);
  color: var(--sit-vert);
  margin-bottom: clamp(10px, 2vw, 20px);
}

.sit-refs-kpi__icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

.sit-refs-kpi__icon-img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.sit-refs-kpi__label{
  color: var(--sit-blanc);
  font-size: clamp(18px, 2.3vw, 24px);
  font-weight: var(--sit-font-regular);
  line-height: 1.4;
}

.sit-refs-kpi__value{
  color: var(--sit-vert);
  font-size: clamp(20px, 2.1vw, 22px);
  font-weight: var(--sit-font-bold);
  text-transform: uppercase;
}

/* =========================
   COMMUNES : uniquement logos + mini popup au clic
========================= */
.sit-refs-communes{
  margin-top: 60px;
  background: var(--sit-blanc);
  border-top-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 28.57px;
  border-bottom-left-radius: 28.57px;
  padding: clamp(20px, 5vw, 40px) clamp(20px, 5vw, 80px);
  overflow-y: auto;
  overflow-x: hidden; /* anti scroll horizontal */
  max-height: 524px;
}

@media (max-width: 460px){
  .sit-refs-communes{
    margin-top: 45px;
  }
}

.sit-refs-communes::-webkit-scrollbar{ width: 10px; }
.sit-refs-communes::-webkit-scrollbar-track{
  background: transparent;
  margin: 18px 0;
}
.sit-refs-communes::-webkit-scrollbar-thumb{
  background: rgba(6,32,66,.25);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.sit-refs-communes__title{
  text-align: center;
  color: var(--sit-vert);
  font-weight: var(--sit-font-bold);
  letter-spacing: .8px;
  font-size: 22px;
  margin-bottom: 40px;
}

@media (max-width: 460px){
  .sit-refs-communes__title{
    margin-bottom: 25px;
  }
}

.sit-refs-communes__list{
  display: grid;
  gap: 25px;
  overflow: visible;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-items: center;
}

.sit-refs-commune{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  background: none;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  padding: 14px;
  cursor: pointer;
  overflow: visible;
  transition: box-shadow .3s ease;
}

.sit-refs-commune:hover,.sit-refs-commune.is-active{
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, .10);
}

.sit-refs-commune img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sit-refs-commune__name{
  margin: 12px 0 0;
  font-weight: var(--sit-font-bold);
  color: var(--sit-bleu);
  text-align: center;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.1;
}

/* mini popup */
.sit-refs-commune-pop{
  position: absolute;
  bottom: 0;
  left: 100%;

  width: min(365px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  box-sizing: border-box;

  background: var(--sit-bleu);
  border-top-left-radius: 28.57px;
  border-bottom-right-radius: 28.57px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  padding: 20px 30px;
  color: var(--sit-blanc);
  z-index: 20;
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
}

.sit-refs-commune-pop.is-left{
  left: auto;
  right: 100%;
}

/* mobile/tablette : le JS ajoute .is-bottom */
.sit-refs-commune-pop.is-bottom{
  top: calc(100% + 12px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.sit-refs-commune-pop.is-bottom.is-left{
  left: 50%;
  right: auto;
}

.sit-refs-commune-pop__top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.sit-refs-commune-pop__title{
  font-weight: var(--sit-font-heavy);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.1;
  text-transform: uppercase;
  text-align: start;
  overflow-wrap: anywhere;
}

.sit-refs-commune-pop__link{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--sit-blanc);
  text-decoration: none;
  transition: transform .3s ease;
}

.sit-refs-commune-pop__link:hover{
  transform:scale(.9);
}

.sit-refs-commune-pop__link svg{
  width: 22px;
  height: 22px;
}

.sit-refs-commune-pop__list{
  text-align: left;
  margin: 25px 0 0;
  padding-left: 25px;
  display: grid;
  gap: 6px;
  color: rgba(255,255,255,.9);
  font-size: 16px;
}

@media (max-width: 1050px){
  .sit-refs-communes__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px;}
}
@media (max-width: 768px){
  .sit-refs-communes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px;}
}
@media (max-width: 500px){
  .sit-refs-communes__list { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sit-refs-commune img { width: 70%; }
}

/* =========================
   CTA bas popup
========================= */
.sit-refs-popup__bottom{
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 70px;
  row-gap: 30px;
  flex-wrap: wrap;
}

@media (max-width: 460px){
  .sit-refs-popup__bottom{
    margin-top: 47px;
  }
}

.sit-refs-link{
  color: var(--c-accent-link);
  text-align: end;
  font-weight: var(--sit-font-bold);
  text-decoration: none;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 8px;
  transition: color .3s ease;
}

.sit-refs-link:hover{
  color: var(--sit-vert);
  text-decoration: underline;
}

/* bouton "Nous contacter" */
.sit-refs-btn-contact{
  font-size: 20px;
  font-weight: 700;
  padding: 17px 35px;
  border-top-left-radius: 0px;
  border-top-right-radius: 28.57px;
  border-bottom-left-radius: 28.57px;
  border-bottom-right-radius: 0px;
  line-height: 1.2;
  background-color: var(--sit-vert);
  border: 1px solid var(--sit-vert);
  color: var(--sit-blanc);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sit-refs-btn-contact:hover{
  background-color: var(--sit-vert);
  border: 1px solid var(--sit-vert);
  color: var(--sit-bleu-dark);
}

@media (max-width: 460px){
  .sit-refs-btn-contact{
    padding: 15px 25px;
  }
}

/* =========================
   Positionnements des 2 popups
========================= */
.sit-refs-popup--metropolis.is-open.is-metropolis{
  margin-top: -200px;
  max-width: 1320px;
  padding-inline: 20px;
}

.sit-refs-popup--others{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(1320px, 100%);
  padding-inline: 20px;
  z-index: 5;
}