/**
 * GVA LEGAL FRAMEWORK - CSS EXTERNE
 * Cartes Flip 3D - Cadre Juridique
 * 3 Styles: Institutionnel, Agri-Modern, Glass
 */

/* ===================================
   VARIABLES
   =================================== */
.gva-legal-framework {
   --agri-green: #2ecc71;
   --agri-dark: #27ae60;
   --agri-dark-blue: #0f172a;
   --bg-light: #f8fafc;
   --text-dark: #1e293b;
   --c-blue: #0ea5e9;
   --c-orange: #f97316;
   --transition-flip: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   SECTION LABEL
   =================================== */
.gva-legal-framework .section-label {
   text-align: center;
   margin: 80px 0 40px;
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 3px;
   font-weight: 800;
   color: #94a3b8;
}

.gva-legal-framework .section-label::after {
   content: "";
   display: block;
   width: 50px;
   height: 3px;
   background: var(--agri-green);
   margin: 15px auto;
}

/* ===================================
   STRUCTURE FLIP CARD
   =================================== */
.gva-legal-framework .flip-card {
   background-color: transparent;
   height: 300px;
   perspective: 1500px;
   cursor: pointer;
   margin-bottom: 20px;
}

.gva-legal-framework .flip-card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   transition: var(--transition-flip);
   transform-style: preserve-3d;
}

.gva-legal-framework .flip-card:hover .flip-card-inner {
   transform: rotateY(180deg);
}

.gva-legal-framework .flip-front,
.gva-legal-framework .flip-back {
   position: absolute;
   width: 100%;
   height: 100%;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   border-radius: 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 20px;
}

.gva-legal-framework .flip-back {
   transform: rotateY(180deg);
}

/* ===================================
   STYLE 1: INSTITUTIONNEL (Orange)
   =================================== */
.gva-legal-framework.style-institutional .flip-front {
   background: white;
   border: 2px solid var(var(--agri-dark-blue));
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.02);
   border: solid 2px var(--agri-dark-blue);
}

.gva-legal-framework.style-institutional .flip-front i {
   color: var(--c-orange);
   font-size: 2.5rem;
   margin-bottom: 15px;
}

.gva-legal-framework.style-institutional .flip-front h5 {
   font-weight: 700;
   color: var(--agri-dark-blue);
   text-align: center;
   font-size: 1rem;
   margin: 0;
}

.gva-legal-framework.style-institutional .flip-back {
   background: var(--agri-dark-blue);
   color: white;
   text-align: center;
}

.gva-legal-framework.style-institutional .flip-back p {
   font-size: 0.875rem;
   line-height: 1.4;
   margin-bottom: 8px;
   color:white;
}

.gva-legal-framework.style-institutional .btn-download {
   background: var(--agri-green) !important;
   color: white;
   border-radius: 50px !important;
   padding: 10px 25px !important;
   text-decoration: none;
   font-weight: 700;
   font-size: 0.8rem;
   transition: all 0.3s ease;
   display: inline-block;
   margin-top: 7px;
}

.gva-legal-framework.style-institutional .btn-download:hover {
   background: var(--agri-dark);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);
}

/* ===================================
   STYLE 2: AGRI-MODERN (Green)
   =================================== */
.gva-legal-framework.style-agri-modern .flip-front {
   background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
   border-bottom: 6px solid var(--agri-green);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.gva-legal-framework.style-agri-modern .flip-front h5 {
   font-weight: 800;
   color: var(--agri-dark-blue);
   font-size: 1rem;
   margin: 0;
   text-align: center;
}

.gva-legal-framework.style-agri-modern .flip-back {
   background: var(--agri-green);
   color: white;
   text-align: center;
}

.gva-legal-framework.style-agri-modern .flip-back p {
   font-size: 0.875rem;
   line-height: 1.6;
   margin-bottom: 20px;
}

.gva-legal-framework.style-agri-modern .btn-download {
   background: white;
   color: var(--agri-dark);
   border-radius: 12px;
   padding: 12px 20px;
   text-decoration: none;
   font-weight: 800;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   display: inline-block;
   transition: all 0.3s ease;
}

.gva-legal-framework.style-agri-modern .btn-download:hover {
   transform: translateY(-2px);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* ===================================
   STYLE 3: GLASS (Blue)
   =================================== */
.gva-legal-framework.style-glass .flip-front {
   background: white;
   border: 1px solid #e2e8f0;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
}

.gva-legal-framework.style-glass .flip-front .icon-circle {
   width: 60px;
   height: 60px;
   background: rgba(14, 165, 233, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--c-blue);
   margin-bottom: 20px;
   font-size: 1.5rem;
}

.gva-legal-framework.style-glass .flip-front h5 {
   font-weight: 700;
   color: var(--text-dark);
   text-align: center;
   font-size: 1rem;
   margin: 0;
}

.gva-legal-framework.style-glass .flip-back {
   background: var(--c-blue);
   color: white;
   text-align: center;
}

.gva-legal-framework.style-glass .flip-back p {
   font-size: 0.875rem;
   line-height: 1.6;
   margin-bottom: 15px;
}

.gva-legal-framework.style-glass .btn-download {
   border: 2px solid white;
   background: transparent;
   color: white;
   padding: 8px 20px;
   border-radius: 50px;
   text-decoration: none;
   font-weight: 600;
   display: inline-block;
   transition: all 0.3s ease;
}

.gva-legal-framework.style-glass .btn-download:hover {
   background: white;
   color: var(--c-blue);
   transform: translateY(-2px);
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 991px) {
   .gva-legal-framework .flip-card {
      height: 280px;
   }
   
   .gva-legal-framework .section-label {
      margin: 60px 0 30px;
      font-size: 0.75rem;
   }
   
   .gva-legal-framework .flip-front,
   .gva-legal-framework .flip-back {
      padding: 25px;
   }
}

@media (max-width: 576px) {
   .gva-legal-framework .flip-card {
      height: 260px;
   }
   
   .gva-legal-framework .flip-front i {
      font-size: 2rem !important;
   }
   
   .gva-legal-framework .flip-front h5 {
      font-size: 0.9rem !important;
   }
   
   .gva-legal-framework .flip-back p {
      font-size: 0.8rem !important;
   }
   
   .gva-legal-framework .btn-download {
      font-size: 0.75rem !important;
      padding: 8px 18px !important;
   }
   
   .gva-legal-framework.style-glass .icon-circle {
      width: 50px;
      height: 50px;
      font-size: 1.2rem;
   }
}

/* ===================================
   SPACING
   =================================== */
.gva-legal-framework {
   padding: 40px 0;
}

.gva-legal-framework .container {
   max-width: 1200px;
}