/* ========================================
   BUTTONS-CTA.CSS
   Auteur                : Renaud
   Création              : 13 novembre 2025
   Dernière modification : 19 novembre 2025
   ======================================== */


.buttons-cta {
    display: inline-block; /* Pour que les boutons se placent côte à côte */
    margin: 0 0.5rem;
    padding: 0.8rem 1.8rem;
    border-radius: 50px;
    background-color: var(--color-cta-box-default); /* Utilise la couleur active pour un bouton percutant */
    color: var(--color-cta-box-text);
    font-weight: bold;
    text-decoration: none;
    font-size: clamp(2rem, 5vw, 2.8rem); /* Min 2rem, Max 2.8rem, s'adapte avec la largeur du viewport */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée */

text-align: center; /* Centrage du texte si le bouton est plus large que son contenu */
white-space: nowrap; /* Empêche le texte de se couper sur plusieurs lignes */
cursor: pointer; /* Indique que l'élément est cliquable */

}

.buttons-cta:visited {
    color: var(--color-cta-box-text);/* Maintient la couleur du texte par défaut */
    text-decoration: none; /* Maintient l'absence de soulignement */
}

.buttons-cta:hover,
.buttons-cta:focus {
    background-color: var(--color-cta-box-hover); /* Couleur légèrement différente au survol/focus */
    color: var(--color-cta-box-text);
    transform: translateY(-2px); /* Léger soulèvement */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); /* Ombre accentuée */
}

.buttons-cta:active {
    background-color: var(--color-cta-box-active); /* Retour à la couleur active */
    color: var(--color-cta-box-text);
    transform: translateY(0); /* Retour à la position initiale */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Ombre réduite pour simuler l'enfoncement */
}


/* ======================================================================================
   Variantes de taille pour les boutons CTA
   Ces classes modificatrices sont à ajouter en plus de .main-cta
   Ex: <a href="#" class="main-cta main-cta--large">Mon Grand CTA</a>
   ======================================================================================= */

/* 
 * CTA de taille S (Small)
 */
.main-cta--small {
    padding: 0.6rem 1.4rem; /* Padding réduit */
    font-size: 0.9rem;     /* Texte plus petit */
    /* Vous pouvez ajuster le border-radius si vous voulez une forme différente */
}

/* 
 * CTA de taille M (Medium - Taille par défaut ou "standard")
 * Nous allons définir ici la taille moyenne. Si vous ne mettez pas de classe de taille,
 * le .main-cta par défaut héritera peut-être d'une autre règle ou sera à définir
 * Si .main-cta est la taille par défaut, on met les règles ici.
 */
.main-cta--medium {
    padding: 0.8rem 1.8rem; /* Votre padding actuel */
    font-size: 1.1rem;     /* Une taille de police fixe, remplace le clamp pour cette variante */
}

/* 
 * CTA de taille L (Large)
 */
.main-cta--large {
    padding: 1.2rem 2.5rem; /* Padding augmenté */
    font-size: clamp(1.2rem, 4vw, 2.2rem); /* Gardons clamp pour la taille large pour qu'il s'adapte, mais avec des limites différentes */
    /* Le 'margin' de 0 0.5rem peut être conservé ou ajusté si besoin pour les grandes tailles */
}


/*
 * Si .main-cta est censé être la taille par défaut (medium), 
 * alors les règles spécifiques de padding/font-size pour le medium 
 * peuvent être placées directement dans .main-cta pour éviter une classe supplémentaire
 * si c'est la taille la plus courante.
 * 
 * Si le CTA dans la section Hero doit être la plus grande taille, 
 * alors vous pourriez lui donner la classe .main-cta--large.
 */