/* Bouton avec contour uniquement */  
 .button-outline {
   font-size: var(--taille-text-pc);
   border: 2px solid var(--logo-color);
   /* contour blanc */
   border-radius: 6px;
   background: transparent;
   /* pas de couleur de fond */
   color: var(--text-color);
   cursor: pointer;
   transition: all 0.3s;
   font-weight: var(--text-gras);
   width: 100%;
   padding: 10px 10px;
 }

 .button-outline:hover:not(:disabled) {
   background: var(--hover-bg);
   /* léger survol */
 }

 .button-outline:disabled {
   border-color: var(--border-color);
   color: var(--text-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: 2px solid transparent;
   border-top-color: var(--logo-color);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }

 /* Animation rotation */
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
/* Responsive */
@media (max-width: 768px) {
.button-outline {
    font-size: var(--taille-text-mo);
    border: 1px solid var(--logo-color);
    
  }
 
  }