/**
 * GVA CLIMATE INFOGRAPHIC - CSS EXTERNE
 * 4 Styles: Swirl, Wheel, Cards, Petal
 */

/* ===================================
   VARIABLES
   =================================== */
.gva-climate-infographic {
   --green-dark: #1b4332;
   --green-main: #2d6a4f;
   --green-leaf: #40916c;
   --green-mid: #74c69d;
   --green-light: #b7e4c7;
   --text-dark: #081c15;
   --line-color: #cbd5e1;
}

/* ===================================
   HEADER COMMUN
   =================================== */
.header-section {
   text-align: center;
   margin: 60px 0;
   padding: 0 20px;
}

.header-section h2 {
   font-weight: 700;
   color: var(--green-main);
   font-size: 1.8rem;
   max-width: 800px;
   margin: 0 auto;
   line-height: 1.4;
}

/* ===================================
   STYLE 1: SWIRL
   =================================== */
.swirl-container {
   position: relative;
   width: 100%;
   max-width: 1100px;
   height: 700px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

.center-identity {
   position: absolute;
   width: 250px;
   height: 250px;
   background: #fff;
   border-radius: 50%;
   z-index: 10;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-shadow: 0 15px 45px rgba(0,0,0,0.08);
   border: 1px solid #eee;
   text-align: center;
   padding: 20px;
}

.center-identity .logo-img {
   width: 140px;
   margin-bottom: 10px;
}

.center-identity .year {
   font-weight: 800;
   font-size: 1.2rem;
   color: #333;
}

.swirl-svg {
   position: absolute;
   width: 700px;
   height: 700px;
   z-index: 1;
   transform: rotate(-15deg);
}

.petal {
   transition: all 0.4s ease;
   cursor: pointer;
   filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
}

.petal:hover {
   transform: scale(1.05);
   filter: drop-shadow(0 10px 25px rgba(0,0,0,0.2));
   opacity: 0.9;
}

.measure-label {
   position: absolute;
   width: 280px;
   z-index: 20;
   opacity: 0;
   transform: translateY(20px);
   animation: fadeInReveal 1s forwards;
}

.label-content {
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   padding: 15px 20px;
   border-radius: 12px;
   border-left: 4px solid var(--green-main);
   box-shadow: 0 10px 30px rgba(0,0,0,0.05);
   font-size: 0.95rem;
   font-weight: 600;
   line-height: 1.5;
   transition: 0.3s;
}

.measure-label:hover .label-content {
   background: white;
   transform: translateX(5px);
   border-left-color: var(--green-dark);
}

.pos-top-right { top: -10%; animation-delay: 0.4s; }
.pos-mid-right { top: 13%; right: 0%; animation-delay: 0.8s; }
.pos-bot-right { bottom: 29%; right: -4%; animation-delay: 1.2s; }
.pos-bot-left { bottom: 16%; left: 0%; animation-delay: 1.6s; }
.pos-top-left { top: 28%; left: -5%; animation-delay: 2s; }

/* ===================================
   STYLE 2: WHEEL
   =================================== */
.infographic-wrapper {
   position: relative;
   width: 550px;
   height: 550px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
}

#wheel-svg {
   width: 100%;
   height: 100%;
   transform: rotate(-90deg);
}

.segment {
   cursor: pointer;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   stroke: #fff;
   stroke-width: 2;
}

.segment:hover {
   opacity: 0.85;
   transform: scale(1.02);
   transform-origin: center;
}

.center-circle {
   position: absolute;
   width: 320px;
   height: 320px;
   background: #fff;
   border-radius: 50%;
   z-index: 10;
   box-shadow: 0 20px 60px rgba(0,0,0,0.12);
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 40px;
   box-sizing: border-box;
   pointer-events: none;
}

#content-display {
   transition: opacity 0.3s ease;
}

.measure-text {
   font-size: 1.05rem;
   font-weight: 700;
   line-height: 1.6;
   color: var(--text-dark);
   margin: 0;
}

.default-logo-box {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.logo-ada {
   width: 150px;
   margin-bottom: 10px;
}

.logo-year {
   font-weight: 800;
   font-size: 1.2rem;
   color: #444;
}

.icon-overlay {
   position: absolute;
   z-index: 5;
   color: white;
   font-size: 1.8rem;
   pointer-events: none;
   text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.i1 { top: 24%; left: 80%; }
.i2 { top: 70%; left: 81%; }
.i3 { top: 84%; left: 34%; }
.i4 { top: 46%; left: 9%; }
.i5 { top: 10%; left: 34%; }

/* ===================================
   STYLE 3: CARDS
   =================================== */
.infographic-container {
   position: relative;
   max-width: 1100px;
   height: 700px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

.center-node {
   position: relative;
   z-index: 10;
   background: white;
   padding: 30px;
   border-radius: 50%;
   text-align: center;
   width: 200px;
   height: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 0 10px #f8fafc;
}

.center-node img {
   width: 130px;
   margin-bottom: 10px;
}

.center-node span {
   font-weight: 800;
   color: #334155;
   font-size: 1.1rem;
}

.info-card {
   position: absolute;
   width: 280px;
   background: white;
   padding: 25px;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.05);
   z-index: 5;
   transition: all 0.3s ease;
   border: 1px solid #f1f5f9;
}

.info-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(21, 128, 61, 0.1);
   border-color: #15803d;
}

.icon-box-geo {
   width: 45px;
   height: 45px;
   background: #f0fdf4;
   color: #15803d;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   margin-bottom: 15px;
}

.info-card p {
   font-size: 0.95rem;
   font-weight: 600;
   line-height: 1.5;
   margin: 0;
   color: #334155;
}

.pos-tl { top: 5%; left: 5%; }
.pos-tr { top: 5%; right: 5%; }
.pos-bl { bottom: 5%; left: 5%; }
.pos-br { bottom: 5%; right: 25%; }
.pos-mr { top: 40%; right: 0; }

.svg-connectors {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 1;
}

.line {
   stroke: var(--line-color);
   stroke-width: 2;
   stroke-dasharray: 6;
   fill: none;
   transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

/* ===================================
   STYLE 4: PETAL
   =================================== */
.infographic-master {
   position: relative;
   width: 1100px;
   height: 700px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

.logo-hub {
   position: absolute;
   z-index: 50;
   width: 220px;
   height: 220px;
   background: white;
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-shadow: 0 15px 40px rgba(0,0,0,0.1);
   border: 10px solid white;
}

.logo-hub img {
   width: 140px;
}

.logo-hub .year {
   font-weight: 800;
   color: #334155;
   margin-top: 5px;
}

.base-svg {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.connector-line {
   fill: none;
   stroke: var(--line-color);
   stroke-width: 1.5;
   stroke-dasharray: 4;
}

.item-card {
   position: absolute;
   width: 280px;
   background: white;
   padding: 18px 22px;
   border-radius: 14px;
   box-shadow: 0 10px 25px rgba(0,0,0,0.05);
   border-left: 5px solid var(--green-main);
   z-index: 100;
   transition: all 0.3s ease;
}

.item-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 35px rgba(0,0,0,0.1);
   border-left-color: var(--green-dark);
}

.item-card p {
   margin: 0;
   font-size: 0.9rem;
   font-weight: 600;
   line-height: 1.5;
   color: var(--text-dark);
}

.card-1 { top: 15%; right: 5%; border-left-color: var(--green-light); }
.card-2 { top: 48%; right: 0%; border-left-color: var(--green-mid); }
.card-3 { bottom: 8%; right: 15%; border-left-color: var(--green-leaf); }
.card-4 { bottom: 8%; left: 5%; border-left-color: var(--green-dark); }
.card-5 { top: 20%; left: 0%; border-left-color: var(--green-main); }

/* ===================================
   ANIMATIONS
   =================================== */
@keyframes fadeInReveal {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 991px) {
   .swirl-container,
   .infographic-container,
   .infographic-master {
      height: auto;
      flex-direction: column;
      padding: 20px;
   }
   
   .swirl-svg,
   .center-identity,
   .center-node,
   .logo-hub,
   .svg-connectors,
   .base-svg {
      display: none;
   }
   
   .measure-label,
   .info-card,
   .item-card {
      position: static;
      width: 100%;
      margin-bottom: 20px;
      opacity: 1;
      transform: none;
   }
   
   .label-content {
      border-left: 8px solid var(--green-main);
   }
   
   .infographic-wrapper {
      width: 350px;
      height: 350px;
   }
   
   .center-circle {
      width: 210px;
      height: 210px;
      padding: 20px;
   }
   
   .measure-text {
      font-size: 0.8rem;
   }
   
   .icon-overlay {
      font-size: 1.2rem;
   }
   
   .logo-ada {
      width: 80px;
   }
}

@media (max-width: 600px) {
   .header-section h2 {
      font-size: 1.3rem;
   }
}