.thnp-front{
  --thnp-blue:#203f7a;
  --thnp-green:#4dbb74;
  --thnp-orange:#ef8148;
  --thnp-light:#eaf4fb;
  width:100%;
  max-width:1380px;
  margin:0 auto;
  overflow:hidden;
}

/* =========================================================
   V1.6 — CONSTELLATION PLUS COMPACTE ET PLUS ÉDITORIALE
========================================================= */
.thnp-constellation{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:8px;
  row-gap:0;
  padding:8px 18px 24px;
}
.thnp-theme{
  position:relative;
  width:100%;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Les deux colonnes convergent légèrement vers le centre. */
.thnp-theme:nth-of-type(odd){transform:translateX(28px);}
.thnp-theme:nth-of-type(even){transform:translate(-28px,10px);}
/* La seconde rangée remonte pour créer un seul ensemble. */
.thnp-theme:nth-of-type(n+3){margin-top:-42px;}
/* Formation ferme naturellement la composition. */
.thnp-theme:nth-of-type(5){
  grid-column:1 / -1;
  width:50%;
  justify-self:center;
  margin-top:-74px;
  transform:translateX(-55px);
}
.thnp-cluster{
  position:relative;
  width:min(100%,500px);
  height:310px;
}

/* =========================================================
   HEXAGONES
========================================================= */
.thnp-hex{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
  background:#fff;
  filter:drop-shadow(0 5px 10px rgba(32,63,122,.06));
  transition:transform .22s ease,filter .22s ease;
}
.thnp-hex::before{
  content:"";
  position:absolute;
  inset:4px;
  clip-path:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(234,244,251,.90));
}
.thnp-hex:hover{
  filter:drop-shadow(0 10px 18px rgba(32,63,122,.13));
  z-index:9;
}
.thnp-hex-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* =========================================================
   HEXAGONE THÉMATIQUE
========================================================= */
.thnp-hex-title{
  width:210px;
  height:182px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:var(--thnp-theme-color,var(--thnp-blue));
  color:#fff;
  z-index:5;
}
.thnp-hex-title::before{background:var(--thnp-theme-color,var(--thnp-blue));}
.thnp-hex-title:hover{transform:translate(-50%,-50%) scale(1.018);}
.thnp-hex-title .thnp-hex-inner{width:79%;flex-direction:column;}
.thnp-hex-title strong{
  font-size:18px;
  line-height:1.14;
  text-transform:uppercase;
  font-weight:800;
}
.thnp-hex-title span{
  display:block;
  margin-top:8px;
  color:var(--thnp-green);
  font-size:11.5px;
  line-height:1.28;
  font-weight:700;
}

/* =========================================================
   PARTENAIRES — AU CONTACT VISUEL DES ARÊTES
========================================================= */
.thnp-partner-ring{position:absolute;inset:0;}
.thnp-hex-partner{
  width:140px;
  height:121px;
  z-index:2;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#eaf4fb;
  filter:drop-shadow(0 4px 9px rgba(32,63,122,.055));
}
.thnp-hex-partner::before{
  background:linear-gradient(145deg,#f9fcff 0%,#edf6fb 68%,#e5f1f8 100%);
}
.thnp-hex-partner .thnp-hex-inner{width:78%;height:62%;}
.thnp-logo-wrap img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.thnp-no-logo{font-weight:700;color:var(--thnp-blue);font-size:12px;line-height:1.2;}
.thnp-partner-link{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;}
.thnp-hex-partner:hover{transform:translate(-50%,-50%) scale(1.025);}

/* Couronne resserrée : les cellules semblent appartenir au même nid. */
.thnp-cluster[data-count="1"] .thnp-partner-1{left:calc(50% + 158px);top:50%;}

.thnp-cluster[data-count="2"] .thnp-partner-1{left:calc(50% - 124px);top:calc(50% - 88px);}
.thnp-cluster[data-count="2"] .thnp-partner-2{left:calc(50% + 124px);top:calc(50% + 88px);}

.thnp-cluster[data-count="3"] .thnp-partner-1{left:calc(50% - 124px);top:calc(50% - 88px);}
.thnp-cluster[data-count="3"] .thnp-partner-2{left:calc(50% + 158px);top:50%;}
.thnp-cluster[data-count="3"] .thnp-partner-3{left:calc(50% - 124px);top:calc(50% + 88px);}

.thnp-cluster[data-count="4"] .thnp-partner-1{left:calc(50% - 124px);top:calc(50% - 88px);}
.thnp-cluster[data-count="4"] .thnp-partner-2{left:calc(50% + 124px);top:calc(50% - 88px);}
.thnp-cluster[data-count="4"] .thnp-partner-3{left:calc(50% + 124px);top:calc(50% + 88px);}
.thnp-cluster[data-count="4"] .thnp-partner-4{left:calc(50% - 124px);top:calc(50% + 88px);}

.thnp-cluster[data-count="5"] .thnp-partner-1{left:calc(50% - 124px);top:calc(50% - 88px);}
.thnp-cluster[data-count="5"] .thnp-partner-2{left:calc(50% + 124px);top:calc(50% - 88px);}
.thnp-cluster[data-count="5"] .thnp-partner-3{left:calc(50% + 124px);top:calc(50% + 88px);}
.thnp-cluster[data-count="5"] .thnp-partner-4{left:calc(50% - 124px);top:calc(50% + 88px);}
.thnp-cluster[data-count="5"] .thnp-partner-5{left:calc(50% - 158px);top:50%;}

.thnp-cluster[data-count="6"] .thnp-partner-1{left:calc(50% - 124px);top:calc(50% - 88px);}
.thnp-cluster[data-count="6"] .thnp-partner-2{left:calc(50% + 124px);top:calc(50% - 88px);}
.thnp-cluster[data-count="6"] .thnp-partner-3{left:calc(50% + 158px);top:50%;}
.thnp-cluster[data-count="6"] .thnp-partner-4{left:calc(50% + 124px);top:calc(50% + 88px);}
.thnp-cluster[data-count="6"] .thnp-partner-5{left:calc(50% - 124px);top:calc(50% + 88px);}
.thnp-cluster[data-count="6"] .thnp-partner-6{left:calc(50% - 158px);top:50%;}

/* 7/8 : seconde couronne limitée, sans étirer toute la page. */
.thnp-cluster[data-count="7"] .thnp-partner-1,
.thnp-cluster[data-count="8"] .thnp-partner-1{left:calc(50% - 124px);top:calc(50% - 88px);}
.thnp-cluster[data-count="7"] .thnp-partner-2,
.thnp-cluster[data-count="8"] .thnp-partner-2{left:calc(50% + 124px);top:calc(50% - 88px);}
.thnp-cluster[data-count="7"] .thnp-partner-3,
.thnp-cluster[data-count="8"] .thnp-partner-3{left:calc(50% + 158px);top:50%;}
.thnp-cluster[data-count="7"] .thnp-partner-4,
.thnp-cluster[data-count="8"] .thnp-partner-4{left:calc(50% + 124px);top:calc(50% + 88px);}
.thnp-cluster[data-count="7"] .thnp-partner-5,
.thnp-cluster[data-count="8"] .thnp-partner-5{left:calc(50% - 124px);top:calc(50% + 88px);}
.thnp-cluster[data-count="7"] .thnp-partner-6,
.thnp-cluster[data-count="8"] .thnp-partner-6{left:calc(50% - 158px);top:50%;}
.thnp-cluster[data-count="7"] .thnp-partner-7,
.thnp-cluster[data-count="8"] .thnp-partner-7{left:50%;top:18px;}
.thnp-cluster[data-count="8"] .thnp-partner-8{left:50%;top:calc(100% - 18px);}

/* =========================================================
   PETITES ALVÉOLES COLORÉES — LIENS VISUELS, PAS CONFETTIS
========================================================= */
.thnp-cluster-decos{position:absolute;inset:0;pointer-events:none;z-index:1;}
.thnp-mini{
  position:absolute;
  display:block;
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
  opacity:.62;
}
/* Elles sont volontairement proches des cellules, comme des morceaux de nid. */
.thnp-mini-1{
  width:34px;height:29px;left:10%;top:15%;
  background:color-mix(in srgb,var(--thnp-theme-color,var(--thnp-blue)) 16%,white);
}
.thnp-mini-2{
  width:25px;height:22px;right:11%;top:19%;
  background:rgba(77,187,116,.18);
}
.thnp-mini-3{
  width:22px;height:19px;left:13%;bottom:15%;
  background:rgba(239,129,72,.16);
}
.thnp-mini-4{
  width:31px;height:27px;right:13%;bottom:12%;
  background:rgba(32,63,122,.11);
}
.thnp-mini-5{
  width:18px;height:16px;right:4%;top:50%;
  background:color-mix(in srgb,var(--thnp-theme-color,var(--thnp-blue)) 13%,white);
  opacity:.48;
}

/* Décor inter-groupes très léger : juste quelques rappels. */
.thnp-deco{
  position:absolute;
  width:30px;
  height:26px;
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
  background:rgba(32,63,122,.06);
  opacity:.38;
  pointer-events:none;
}
.thnp-deco-a{left:4%;top:4%;}
.thnp-deco-b{right:5%;top:20%;width:24px;height:21px;background:rgba(77,187,116,.10);}
.thnp-deco-c{left:6%;bottom:15%;width:22px;height:19px;background:rgba(239,129,72,.08);}
.thnp-deco-d{right:6%;bottom:6%;width:28px;height:24px;background:rgba(77,187,116,.09);}

/* =========================================================
   TABLETTE
========================================================= */
@media (max-width:1100px){
  .thnp-constellation{grid-template-columns:1fr;padding-top:8px;}
  .thnp-theme,
  .thnp-theme:nth-of-type(odd),
  .thnp-theme:nth-of-type(even),
  .thnp-theme:nth-of-type(n+3),
  .thnp-theme:nth-of-type(5){
    width:100%;
    grid-column:auto;
    transform:none;
    margin-top:-22px;
    min-height:315px;
  }
  .thnp-theme:first-of-type{margin-top:0;}
  .thnp-cluster{width:min(100%,500px);height:310px;}
  .thnp-deco{display:none;}
}

/* =========================================================
   MOBILE — LISIBILITÉ AVANT TOUT
========================================================= */
@media (max-width:767px){
  .thnp-constellation{display:block;padding:8px 0 24px;}
  .thnp-theme,
  .thnp-theme:nth-of-type(odd),
  .thnp-theme:nth-of-type(even),
  .thnp-theme:nth-of-type(n+3),
  .thnp-theme:nth-of-type(5){min-height:0;margin:0 0 28px;transform:none;width:100%;}
  .thnp-cluster{height:auto;display:flex;flex-direction:column;align-items:center;gap:10px;}
  .thnp-cluster-decos,.thnp-deco{display:none;}
  .thnp-hex,.thnp-hex-title,.thnp-hex-partner{
    position:relative;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:min(214px,72vw);
    height:auto;
    aspect-ratio:1.15/1;
    transform:none!important;
  }
  .thnp-hex-title{width:min(244px,78vw);}
  .thnp-partner-ring{
    position:relative;
    inset:auto;
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .thnp-partner-ring .thnp-hex-partner{width:100%;}
  .thnp-hex-title strong{font-size:17px;}
  .thnp-hex-title span{font-size:11.5px;}
}

/* =========================================================
   V1.7 — DISPOSITION MANUELLE DESKTOP
   Les coordonnées sont éditables dans THN Partenaires > Mise en page.
========================================================= */
@media (min-width:1101px){
  .thnp-constellation.is-manual-layout{
    display:block;
    position:relative;
    width:100%;
    height:860px;
    padding:0;
    overflow:visible;
  }
  .thnp-constellation.is-manual-layout .thnp-theme,
  .thnp-constellation.is-manual-layout .thnp-theme:nth-of-type(odd),
  .thnp-constellation.is-manual-layout .thnp-theme:nth-of-type(even),
  .thnp-constellation.is-manual-layout .thnp-theme:nth-of-type(n+3),
  .thnp-constellation.is-manual-layout .thnp-theme:nth-of-type(5){
    position:absolute;
    left:var(--thnp-x);
    top:var(--thnp-y);
    width:500px;
    min-height:0;
    height:310px;
    margin:0;
    transform:translate(-50%,-50%);
    display:block;
  }
  .thnp-constellation.is-manual-layout .thnp-cluster{width:500px;height:310px;}
  .thnp-constellation.is-manual-layout .thnp-hex-partner{
    left:var(--thnp-px)!important;
    top:var(--thnp-py)!important;
  }
}

/* =========================================================
   V1.8 — SCÈNE MANUELLE PROPORTIONNELLE / WYSIWYG
   Toutes les dimensions du mode manuel sont liées à la largeur
   réelle du composant. Le back-office et le front utilisent donc
   exactement le même repère, quelle que soit la largeur disponible.
========================================================= */
@media (min-width:1101px){
  .thnp-front{container-type:inline-size;}
  .thnp-constellation.is-manual-layout{
    height:62.31884058cqw; /* 860 / 1380 */
    min-height:0;
  }
  .thnp-constellation.is-manual-layout .thnp-theme,
  .thnp-constellation.is-manual-layout .thnp-theme:nth-of-type(odd),
  .thnp-constellation.is-manual-layout .thnp-theme:nth-of-type(even),
  .thnp-constellation.is-manual-layout .thnp-theme:nth-of-type(n+3),
  .thnp-constellation.is-manual-layout .thnp-theme:nth-of-type(5){
    width:36.23188406cqw;  /* 500 / 1380 */
    height:22.46376812cqw; /* 310 / 1380 */
  }
  .thnp-constellation.is-manual-layout .thnp-cluster{
    width:36.23188406cqw;
    height:22.46376812cqw;
  }
  .thnp-constellation.is-manual-layout .thnp-hex-title{
    width:15.2173913cqw;   /* 210 / 1380 */
    height:13.1884058cqw;  /* 182 / 1380 */
  }
  .thnp-constellation.is-manual-layout .thnp-hex-title strong{
    font-size:clamp(13px,1.30434783cqw,18px);
  }
  .thnp-constellation.is-manual-layout .thnp-hex-title span{
    font-size:clamp(9px,.83333333cqw,11.5px);
  }
  .thnp-constellation.is-manual-layout .thnp-hex-partner{
    width:10.14492754cqw;  /* 140 / 1380 */
    height:8.76811594cqw;  /* 121 / 1380 */
  }
}


/* =========================================================
   V1.8.3 — MICRO-INTERACTION DES LOGOS CLIQUABLES
   Effet volontairement discret : la cellule s'élève et grossit
   légèrement sans modifier sa position enregistrée.
========================================================= */
.thnp-hex-partner.is-clickable{
  cursor:pointer;
  transform-origin:center center;
  will-change:transform,filter;
}
.thnp-hex-partner.is-clickable .thnp-logo-wrap img{
  transition:transform .24s ease,filter .24s ease;
  transform-origin:center center;
}
.thnp-hex-partner.is-clickable:hover,
.thnp-hex-partner.is-clickable:focus-within{
  transform:translate(-50%,-50%) scale(1.07);
  filter:drop-shadow(0 12px 20px rgba(32,63,122,.18));
  z-index:30;
}
.thnp-hex-partner.is-clickable:hover .thnp-logo-wrap img,
.thnp-hex-partner.is-clickable:focus-within .thnp-logo-wrap img{
  transform:scale(1.045);
  filter:saturate(1.04) contrast(1.03);
}
.thnp-hex-partner.is-clickable .thnp-partner-link:focus-visible{
  outline:3px solid rgba(77,187,116,.75);
  outline-offset:-4px;
  clip-path:inherit;
}

@media (prefers-reduced-motion:reduce){
  .thnp-hex-partner.is-clickable,
  .thnp-hex-partner.is-clickable .thnp-logo-wrap img{
    transition:none;
  }
}

/* En mobile tactile, on évite un zoom persistant après le tap. */
@media (max-width:767px){
  .thnp-hex-partner.is-clickable:hover,
  .thnp-hex-partner.is-clickable:focus-within{
    transform:none!important;
  }
  .thnp-hex-partner.is-clickable:hover .thnp-logo-wrap img,
  .thnp-hex-partner.is-clickable:focus-within .thnp-logo-wrap img{
    transform:none;
  }
}