/**
 * GVA Buttons - CSS Externe
 * 
 * 10 Styles de boutons professionnels
 * 3 Palettes de couleurs (Green, Blue, Orange)
 */

/* ============================================
   VARIABLES DES PALETTES
   ============================================ */
   
/* GREEN PALETTE */
.palette-green {
   --color-main: #85a947;
   --color-dark: #5e7a30;
   --color-light: #aadd55;
   --color-lighter: #f0f7e6;
   --shadow-color: rgba(133, 169, 71, 0.3);
   --c-bleu-dark:--#0f172a;
}

/* BLUE PALETTE */
.palette-blue {
   --color-main: #0f3460;
   --color-dark: #081d36;
   --color-light: #1e5a8e;
   --color-lighter: #e0f2fe;
   --shadow-color: rgba(15, 52, 96, 0.3);
}

/* ORANGE PALETTE */
.palette-orange {
   --color-main: #f59e0b;
   --color-dark: #d97706;
   --color-light: #fbbf24;
   --color-lighter: #fef3c7;
   --shadow-color: rgba(245, 158, 11, 0.3);
}

/* ============================================
   COMMUN
   ============================================ */
.gva-button-wrapper {
   padding: 20px 0;
}

.gva-button-wrapper a {
   text-decoration: none;
   transition: all 0.3s ease;
}

/* ============================================
   STYLE 1 : SPLIT CLASSIC
   Carré blanc avec icône
   ============================================ */
.btn-split {
   background-color: var(--color-main);
   color: white;
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 8px 8px 25px;
   border-radius: 8px;
   font-weight: 700;
   width: 100%;
   max-width: 320px;
   box-shadow: 0 4px 10px var(--shadow-color);
}

.icon-box-split {
   background: white;
   width: 35px;
   height: 35px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-main);
}

.btn-split:hover {
   background-color: var(--color-dark);
   transform: translateY(-3px);
}

.btn-split:hover .icon-box-split {
   color: var(--color-dark);
}

/* ============================================
   STYLE 2 : PILL MODERN
   Bouton rond
   ============================================ */
.btn-pill {
   background-color: var(--color-main);
   color: white;
   padding: 12px 30px;
   border-radius: 50px;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   justify-content: center;
}

.btn-pill:hover {
   box-shadow: 0 10px 20px var(--shadow-color);
   gap: 15px;
}

/* ============================================
   STYLE 3 : OUTLINE INFO
   Fond blanc avec bordure
   ============================================ */
.btn-outline {
   background: white;
   color: var(--color-main);
   border: 2px solid var(--color-main);
   padding: 10px 20px;
   border-radius: 10px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-width: 300px;
}

.meta-outline {
   font-size: 0.7rem;
   color: #999;
   display: block;
   font-weight: 500;
}

.btn-outline:hover {
   background: var(--color-main);
   color: white;
}

.btn-outline:hover .meta-outline {
   color: rgba(255,255,255,0.8);
}

/* ============================================
   STYLE 4 : SWIPE FILL
   Animation de remplissage
   ============================================ */
.btn-swipe {
   position: relative;
   display: inline-block;
   padding: 12px 35px;
   color: var(--color-main);
   border: 2px solid var(--color-main);
   font-weight: 800;
   border-radius: 8px;
   overflow: hidden;
   z-index: 1;
   width: 100%;
   text-align: center;
   max-width: 320px;
}

.btn-swipe::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0%;
   height: 100%;
   background-color: var(--color-main);
   z-index: -1;
   transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-swipe:hover {
   color: white;
}

.btn-swipe:hover::before {
   width: 100%;
}

/* ============================================
   STYLE 5 : 3D PUSH
   Effet relief
   ============================================ */
.btn-3d {
   display: inline-block;
   background-color: var(--color-main);
   color: white;
   font-weight: 800;
   padding: 12px 30px;
   border-radius: 10px;
   box-shadow: 0 6px 0 var(--color-dark);
   position: relative;
   top: 0;
   width: 100%;
   text-align: center;
   max-width: 320px;
}

.btn-3d:active {
   top: 6px;
   box-shadow: 0 0 0 var(--color-dark);
}

/* ============================================
   STYLE 6 : GLOW GRADIENT
   Dégradé lumineux
   ============================================ */
.btn-glow {
   background: linear-gradient(135deg, var(--color-light) 0%, var(--color-main) 100%);
   color: white;
   padding: 12px 25px;
   border-radius: 50px;
   font-weight: 700;
   box-shadow: 0 10px 20px var(--shadow-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: 320px;
}

.btn-glow:hover {
   transform: translateY(-3px);
   filter: brightness(1.1);
}

.icon-glow {
   background: rgba(255,255,255,0.3);
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ============================================
   STYLE 7 : FILE CARD
   Grande carte avec type de fichier
   ============================================ */
.btn-file {
   display: flex;
   align-items: center;
   background: white;
   border-radius: 12px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.05);
   overflow: hidden;
   padding-right: 20px;
   max-width: 400px;
}

.file-type-box {
   background: var(--color-main);
   color: white;
   width: 60px;
   height: 70px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   font-size: 0.8rem;
   margin-right: 15px;
   min-width: 60px;
}
.faq-item-body .file-type-box {
   background: var(--ppp-grey );
}


.btn-file-text {
   color: #0f3460;
   font-weight: 700;
   font-size: 0.95rem;
   line-height: 1.3;
}

.btn-file:hover {
   transform: translateX(5px);
   box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* ============================================
   STYLE 8 : SOFT BADGE
   Minimaliste et doux
   ============================================ */
.btn-badge {
   background: var(--color-lighter);
   color: var(--color-main);
   padding: 10px 20px;
   border-radius: 8px;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   border: 1px solid transparent;
   justify-content: center;
}

.btn-badge:hover {
   background: white;
   border-color: var(--color-main);
}

/* ============================================
   STYLE 9 : LINK ARROW
   Texte avec flèche animée
   ============================================ */
.btn-link {
   color: var(--color-main);
   font-weight: 800;
   text-transform: uppercase;
   font-size: 0.9rem;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   border-bottom: 2px solid transparent;
}

.btn-link:hover {
   gap: 10px;
   border-bottom-color: var(--color-main);
}

/* ============================================
   STYLE 10 : FLOATING ICON
   Cercle flottant
   ============================================ */
.btn-floating {
   display: flex;
   align-items: center;
   background: white;
   padding: 5px 20px 5px 5px;
   border-radius: 50px;
   box-shadow: 0 5px 15px rgba(0,0,0,0.05);
   color: #334155;
   font-weight: 700;
   border: 1px solid #f0f0f0;
   max-width: 280px;
}

.btn-floating-icon {
   width: 40px;
   height: 40px;
   background: var(--color-main);
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 15px;
   transition: 0.3s;
}

.btn-floating:hover {
   box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.btn-floating:hover .btn-floating-icon {
   transform: rotate(90deg);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
   .btn-split,
   .btn-swipe,
   .btn-3d,
   .btn-glow {
      max-width: 100%;
   }
   
   .btn-outline {
      max-width: 100%;
   }
   
   .btn-file {
      max-width: 100%;
   }
   
   .btn-floating {
      max-width: 100%;
   }
}

@media (max-width: 576px) {
   .btn-split {
      padding: 8px 8px 8px 20px;
      font-size: 0.9rem;
   }
   
   .icon-box-split {
      width: 30px;
      height: 30px;
   }
   
   .btn-pill {
      padding: 10px 25px;
      font-size: 0.9rem;
   }
   
   .btn-outline {
      padding: 10px 15px;
      font-size: 0.9rem;
   }
   
   .file-type-box {
      width: 50px;
      height: 60px;
      font-size: 0.7rem;
   }
   
   .btn-file-text {
      font-size: 0.85rem;
   }
}