/* Bouton avec contour uniquement */  
 .button-outline {
   font-size: 16px;
   border: none;
   /* contour blanc */
   border-radius: 6px;
  background: linear-gradient(135deg, var(--effet-color) 0%, var(--logo-color) 100%);
   /* pas de couleur de fond */
   color: var(--bg-color);
   cursor: pointer;
   transition: all 0.3s;
   font-weight: var(--text-gras);
   width: 100%;
   padding: 18px;
 }

 

 .button-outline:disabled {
   border-color: var(--border-color);
   color: var(--bg-color);
   cursor: not-allowed;
 }
 /* Loader (spinner) */
 .button-outline.loading {
   position: relative;
   pointer-events: none;
   /* empêche les clics */
   opacity: 0.7;
 }

 /* Le cercle qui tourne */
 .button-outline.loading::after {
   content: "";
   position: absolute;
   right: 10px;
   /* position du loader */
   top: 50%;
   width: 16px;
   height: 16px;
   margin-top: -8px;
   border: 5px solid var(--text-color);
   border-top-color: var(--bg-color);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }

 /* Animation rotation */
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
/* Responsive */
@media (max-width: 768px) {

 
  }