* {
      box-sizing: border-box;
    }

    :root {
      --violet: #4b16e8;
      --rose: #ff1493;
      --jaune: #ffd426;
      --noir: #171820;
      --fond: #f7f4ff;
		--background-purple #382457;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--noir);
     /* background: #3b0a6d;*/
		
    }

    .event-section {
      min-height: auto;
      position: relative;
      background: transparent;
	overflow: visible; 
    }

    .title {
      position: relative;
      z-index: 2;
      text-align: center;
      margin-bottom: clamp(28px, 4vw, 48px);
      color: #fff;
    }

    .title span,
    .title strong {
      display: block;
      text-transform: uppercase;
      font-family: 'Tilt Warp', Arial, sans-serif;
      font-weight: 900;
      letter-spacing: -0.05em;
      line-height: 0.9;
      font-size: clamp(42px, 6vw, 76px);
      color: #efb400;
    }

    .title strong {
      color: #ff1493;
    }

    .title p {
      max-width: 780px;
      margin: 18px auto 0;
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.4;
      font-weight: 600;
    }

    .layout {
      position: relative;
      z-index: 2;
      width: min(100%, 1400px);
      /*margin: 0 auto 50px;*/
		margin: 0 auto 130px;
		
      display: grid;
      grid-template-columns: minmax(320px, 42fr) minmax(36px, 8fr) minmax(0, 50fr);
      align-items: center;
		   background: transparent;
		  overflow: visible;
  padding: clamp(20px, 3vw, 45px);
    }

    .honeycomb-home {
      grid-column: 1;
      justify-self: center;
      align-self: center;
      position: relative;
      isolation: isolate;
	/**/	
		--hex-w: clamp(150px, 16vw, 220px);
  --hex-h: calc(var(--hex-w) * 0.865);
  --snap-x-left: calc(var(--hex-w) * 0.58);
  --snap-x-main: calc(var(--hex-w) * 1.48);
  --snap-y-gap: calc(var(--hex-h) * 0.56);

  width: min(100%, calc(var(--hex-w) * 2.22));
  height: calc(var(--hex-h) * 2.35 + 95px);
		/**/
		/*
      width: min(100%, clamp(300px, 34vw, 500px));
      height: clamp(390px, 42vw, 560px);*/
      overflow: visible;
    }

    .card {
      grid-column: 3;
      width: 100%;
      min-width: 0;
      justify-self: stretch;
      align-self: center;
      overflow: hidden;
      border-radius: 30px;
      background: rgba(38, 38, 38, .92);
      border: 1px solid #e4dff0;
      box-shadow:    0 35px 90px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.12);
		  /*0 30px 80px rgba(27, 12, 64, 0.15);*/
    }
/**/
/* Zone dédiée aux hexagones : elle commence sous le titre */
.hex-zone {
  position: relative;
  width: 100%;
  height: calc(var(--hex-h) * 2.35);
}
/**/
    .hex {
      position: absolute;
		/**/
		  width: var(--hex-w);
  height: var(--hex-h);
		/**/
     /*
       width: clamp(150px, 16vw, 220px);
      height: clamp(130px, 14vw, 190px);
		*/
      padding: 0;
      border: 0;
      cursor: pointer;
      background: transparent;
      display: grid;
      place-items: center;
      text-align: center;
      text-transform: uppercase;
      font-size: clamp(16px, 1.7vw, 25px);
      line-height: 1;
      color: #fff;
      transition: transform 0.28s ease, filter 0.28s ease;
      appearance: none;
      -webkit-appearance: none;
    }

    .hex svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      filter: drop-shadow(0 24px 24px rgba(39, 0, 75, 0.24));
    }

    .hex-fill {
      fill: url(#hexPurpleGradient);
      transition: fill 0.25s ease;
    }

    .hex-stroke {
      fill: none;
      stroke: rgba(255, 255, 255, 0.55);
      stroke-width: 5;
      transition: stroke 0.25s ease;
    }

    .hex-energy {
      fill: none;
      stroke: url(#EnergyGradient);
      stroke-width: 7;
      stroke-linecap: round;
      stroke-dasharray: 80 560;
      stroke-dashoffset: 0;
      opacity: 0;
      filter:
        drop-shadow(0 0 6px rgba(244,166,215,.4))
        drop-shadow(0 0 12px rgba(239,180,0,.35))
        drop-shadow(0 0 18px rgba(107,53,214,.3));
    }

    .hex span {
      position: relative;
      z-index: 999;
      pointer-events: none;
      text-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
      font-family: 'Tilt Warp', Arial, sans-serif !important;
    }

/*   
.hex-main {
      left: 68%;
      top: 50%;
      transform: translate(-50%, -50%) scale(1.16);
      z-index: 10;
    }
*/
.hex-main {
  left: var(--snap-x-main);
  top: 50%;
  transform: translate(-50%, -50%) scale(1.16);
  z-index: 10;
}
/*
 .hex-left {
  left: 15%;
  top: 72%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
    }
*/
.hex-left {
  left: var(--snap-x-left);
  top: calc(50% + var(--snap-y-gap));
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
}
/*
.hex-right {
  left: 15%;
  top: 28%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
}
*/
.hex-right {
  left: var(--snap-x-left);
  top: calc(50% - var(--snap-y-gap));
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
}
    .hex:hover {
      transform: translate(-50%, -50%) scale(1.05);
    }

    .hex.is-active {
      z-index: 10;
      transform: translate(-50%, -50%) scale(1.16);
      color: #25135f;
      filter: drop-shadow(0 18px 18px rgba(255, 212, 38, 0.24));
    }

    .hex.is-active:hover {
      transform: translate(-50%, -50%) scale(1.18);
    }

    .hex.is-active .hex-fill {
      fill: url(#hexYellowGradient);
    }

    .hex.is-active .hex-stroke {
      stroke: url(#EnergyGradient);
      stroke-width: 6;
    }

    .hex.is-active .hex-energy {
      opacity: 1;
      animation:
        EnergyRun 2.4s linear infinite,
        EnergyPulse 1.8s ease-in-out infinite;
    }

    .hex.is-active span {
      text-shadow: none;
    }

    @keyframes EnergyRun {
      from { stroke-dashoffset: 0; }
      to { stroke-dashoffset: -640; }
    }

    @keyframes EnergyPulse {
      0%, 100% { stroke-width: 7; opacity: 0.72; }
      50% { stroke-width: 11; opacity: 1; }
    }

    .visual {
      position: relative;
      width: 100%;
      min-width: 0;
      height: clamp(220px, 24vw, 380px);
      overflow: hidden;
      background: #ddd;
      border-radius: clamp(18px, 2vw, 28px);
    }

.visualmanche {
      position: relative;
      width: 100%;
      min-width: 0;
	text-align:center;
      height: clamp(128px, 24vw, 128px);
      overflow: hidden;
      background: transparent;
      border-radius: clamp(18px, 2vw, 28px);
	margin-bottom: 20px;
	margin-top:15px;
    }

    .visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 45%, rgba(43, 0, 82, 0.28) 100%);
      pointer-events: none;
    }

    .visual img {
      display: block;
      width: 100%;
      max-width: none;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
      transition: opacity 0.18s ease, transform 0.35s ease;
    }

    .visual img.is-changing {
      opacity: 0;
      transform: scale(1.04);
    }

.visual2 {
      position: relative;
      width: 100%;
      min-width: 0;
      height: clamp(220px, 24vw, 380px);
      overflow: hidden;
      background: #ddd;
      border-bottom: 1px solid var(--jaune);
    }

    .visual2::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 45%, rgba(43, 0, 82, 0.28) 100%);
      pointer-events: none;
    }

    .visual2 img {
      display: block;
      width: 100%;
      max-width: none;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
      transition: opacity 0.18s ease, transform 0.35s ease;
    }

    .visual2 img.is-changing {
      opacity: 0;
      transform: scale(1.04);
    }

    .badge {
      position: absolute;
      z-index: 2;
      left: 10px;
      bottom: 24px;
      padding: 12px 18px;
      border-radius: 999px;
      background: var(--jaune);
      color: #25135f;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -0.03em;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    }

    .content {
      padding: clamp(8px, 3vw, 14px);
      color: #fff;
    }

    .label {
      margin: 0 0 0px;
      color: #f4a6d7 ;
      text-transform: uppercase;
      font-weight: 900;
      letter-spacing: -0.03em;
      font-size: 19px;
    }

    .content h2 {
      margin: 0 0 0px;
      color: #efb400;
      text-transform: uppercase;
      font-family: 'Tilt Warp', Arial, sans-serif;
    font-size: clamp(46px, 4vw, 82px);
		line-height: 0.84;
      letter-spacing: -0.05em;
      font-weight: 900;
    }

    .description {
      margin: 0 0 15px;
      color: #fff;
      font-size: clamp(15px, 1.4vw, 18px);
      line-height: 1.35;
      font-weight: 500;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 22px;
    }

    .chips span {
      padding: 9px 13px;
      border-radius: 999px;
      background: #f5f0ff;
      border: 1px solid #e6ddff;
      color: var(--violet);
      font-size: 14px;
      font-weight: 800;
    }

    .cta {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      width: 100%;
      padding: 15px 16px;
      border-radius: 999px;
      color: var(--violet);
      text-decoration: none;
      text-transform: uppercase;
      font-weight: 900;
      font-size: 14px;
      letter-spacing: -0.02em;
      background: #FFFFFF;
      box-shadow: 0 20px 42px rgba(255, 20, 147, 0.20);
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .cta:hover {
      transform: translateY(-4px);
    }

    .cta i {
      display: none;
    }

.titleservice
{
   position: relative;
    z-index: 20;

    width: 100%;
    text-align: center;

	  margin: 0 0 8px;
  text-align: center;

  color: #efb400;
  font-family: 'Tilt Warp', Arial, sans-serif;
  font-size: clamp(26px, 3vw, 46px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.04em;
	
   /* margin-bottom: 80px; /* espace avec les hexagones */

    }
/****************************
 RESPONSIVE
**************************/

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 70px;
	          
  }

  .honeycomb-home,
  .card {
    grid-column: auto;
  }

  .honeycomb-home {
    justify-self: center;
    --hex-w: clamp(145px, 29vw, 220px);
    width: min(100%, calc(var(--hex-w) * 2.22));
    height: calc(var(--hex-h) * 2.35);
  }

  .card {
    width: 100%;
    max-width: 760px;
    justify-self: center;
  }
	
/*	.hex-main{
    left: 200px;
    top: 270px;	
	}
	
	.hex-left{
		left: 100px;
         top: 85px;
	}
	.hex-right{
		left: 300px;
         top: 85px;
	}*/
}

@media (max-width: 580px) {
	.pdb-responsive{ 
		padding-bottom: 50px;
	}
		
    .layout {
        grid-template-columns: 1fr;
        gap: 100px;
		      margin: 0px;

   
	
		
	}
  .event-section {
    padding: 36px 18px;
  }

  .honeycomb-home {
    --hex-w: clamp(128px, 42vw, 155px);
    width: min(100%, calc(var(--hex-w) * 2.22));
    height: calc(var(--hex-h) * 2.35);
  }

  .hex {
    font-size: clamp(15px, 4.5vw, 18px);
  }
}

/* HACHURE*/

.section-hachure {
  min-height: 100vh;
  color: white;

  position: relative;
  overflow: hidden;

  /*background:
    radial-gradient(
      circle at top left,
      rgba(255, 20, 147, .20) 0%,
      transparent 34%
    ),

    radial-gradient(
      circle at top right,
      rgba(255, 180, 0, .22) 0%,
      transparent 36%
    ),

    radial-gradient(
      circle at bottom left,
      rgba(122, 0, 255, .22) 0%,
      transparent 34%
    ),

    linear-gradient(
      135deg,
      #1c0d34 0%,
      #382457 22%,
      #5a1f7d 48%,
      #7a00ff 72%,
      #ff1493 88%,
      #ffb000 100%
    );*/
	background: radial-gradient(circle at top left, rgba(255, 20, 147, .16), transparent 34%), radial-gradient(circle at bottom right, rgba(122, 0, 255, .18), transparent 38%), linear-gradient(180deg, #2d1847 0%, #382457 35%, #432b63 100%);
}

/* VOILE PREMIUM */
.section-hachure::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.08),
      rgba(0,0,0,.18)
    );

  pointer-events: none;
  z-index: 0;
}

/* TEXTURE LUMIERE */
.section-hachure::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255,255,255,.08) 0,
      transparent 2px
    ),

    radial-gradient(
      circle at 80% 40%,
      rgba(255,255,255,.06) 0,
      transparent 2px
    ),

    radial-gradient(
      circle at 60% 80%,
      rgba(255,255,255,.05) 0,
      transparent 2px
    );

  background-size:
    320px 320px,
    420px 420px,
    520px 520px;

  mix-blend-mode: screen;
  opacity: .55;

  pointer-events: none;
  z-index: 0;
}

/* CONTENU */
.section-hachure > * {
  position: relative;
  z-index: 1;
}

/*
    @media (max-width: 900px) {
      .layout {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      .honeycomb-home,
      .card {
        grid-column: auto;
      }

      .honeycomb-home {
        justify-self: center;
        width: clamp(320px, 82vw, 500px);
        height: clamp(300px, 72vw, 430px);
      }

      .card {
        width: 100%;
        max-width: 760px;
        justify-self: center;
      }
    }

    @media (max-width: 580px) {
      .event-section {
        padding: 18px 9px;
      }

      .honeycomb-home {
        width: 340px;
        height: 300px;
      }

      .hex {
        width: 155px;
        height: 135px;
        font-size: 18px;
      }

      .visual {
        height: 260px;
      }

      .content {
        padding: 14px 11px 17px;
      }

      .chips {
        display: none;
      }
    }
*/