/* Prevent horizontal scroll on all pages */
html {
    overflow-x: hidden;
}

body {
    max-width: 100vw;
    width: 100%;
    overflow-x: clip; /* Use clip instead of hidden to allow sticky positioning */
}

/* Ensure all direct children of body don't overflow */
body > * {
    max-width: 100vw;
    box-sizing: border-box;
}

:root {
    /* Couleurs du logo SNC */
    --snc-red: #D71C26;
    --snc-red-dark: #B01720;
    --snc-red-light: #F28C8E;

    --snc-yellow: #F5D021;
    --snc-yellow-dark: #E6C01C;
    --snc-yellow-light: #FFF2B2;
    

    --snc-green: #2E7D32;
    --snc-green-dark: #245E27;
    --snc-green-light: #A5D6A7;

    --snc-white: #FFFFFF;

    --snc-light: #ecf0f1;
    --snc-white: #ffffff;
    --snc-dark: #2c3e50;
    --snc-gray: #333333;
    
    --snc-gradient-red: linear-gradient(135deg, #d71c26 0%, #e74c3c 100%);

    --form-primary-color: #e11f12cc;
    --form-primary-hover: #e11f12cc;
    --form-secondary-color: #f3f4f6;
    --form-accent-color: #f59e0b;
    --form-text-color: #1f2937;
    --form-light-text: #6b7280;
    --form-success-color: #10b981;
    --form-error-color: #ef4444;
    --form-border-radius: 8px;
    --form-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --form-transition: all 0.3s ease;

}

/* Bordures gauche simples */
.border-left-snc-red {
    border-left-color: var(--snc-red) !important;
}

.border-left-snc-blue {
    border-left-color: var(--snc-blue) !important;
}

.border-left-snc-yellow {
    border-left-color: var(--snc-yellow) !important;
}

.border-left-snc-green {
    border-left-color: var(--snc-green) !important;
}

.border-left-snc-purple {
    border-left-color: var(--snc-purple) !important;
}

/* ============================================
   CLASSES DE COULEURS DE TEXTE SNC
   ============================================ */

/* Couleurs SNC de base */
.text-red {
    color: var(--snc-red) !important;
}

.text-blue {
    color: var(--snc-blue) !important;
}

.text-yellow {
    color: var(--snc-yellow) !important;
}

.text-green {
    color: var(--snc-green) !important;
}

.text-purple {
    color: var(--snc-purple) !important;
}

/* Alias pour yellow (yellow) */
.text-yellow {
    color: var(--snc-yellow) !important;
}

.text-yellow {
    color: var(--snc-yellow) !important;
}

/* ============================================
   VARIATIONS D'OPACITÉ POUR LES TEXTES
   ============================================ */

/* Texte avec opacité */
.text-red-90 {
    color: rgba(215, 28, 38, 0.9) !important;
}

.text-red-75 {
    color: rgba(215, 28, 38, 0.75) !important;
}

.text-red-50 {
    color: rgba(215, 28, 38, 0.5) !important;
}

.text-red-25 {
    color: rgba(215, 28, 38, 0.25) !important;
}

.text-red-10 {
    color: rgba(215, 28, 38, 0.1) !important;
}

.text-blue-90 {
    color: rgba(0, 86, 179, 0.9) !important;
}

.text-blue-75 {
    color: rgba(0, 86, 179, 0.75) !important;
}

.text-blue-50 {
    color: rgba(0, 86, 179, 0.5) !important;
}

.text-blue-25 {
    color: rgba(0, 86, 179, 0.25) !important;
}

.text-blue-10 {
    color: rgba(0, 86, 179, 0.1) !important;
}

.text-yellow-90 {
    color: rgba(255, 193, 7, 0.9) !important;
}

.text-yellow-75 {
    color: rgba(255, 193, 7, 0.75) !important;
}

.text-yellow-50 {
    color: rgba(255, 193, 7, 0.5) !important;
}

.text-yellow-25 {
    color: rgba(255, 193, 7, 0.25) !important;
}

.text-yellow-10 {
    color: rgba(255, 193, 7, 0.1) !important;
}

.text-green-90 {
    color: rgba(25, 135, 84, 0.9) !important;
}

.text-green-75 {
    color: rgba(25, 135, 84, 0.75) !important;
}

.text-green-50 {
    color: rgba(25, 135, 84, 0.5) !important;
}

.text-green-25 {
    color: rgba(25, 135, 84, 0.25) !important;
}

.text-green-10 {
    color: rgba(25, 135, 84, 0.1) !important;
}

.text-purple-90 {
    color: rgba(111, 66, 193, 0.9) !important;
}

.text-purple-75 {
    color: rgba(111, 66, 193, 0.75) !important;
}

.text-purple-50 {
    color: rgba(111, 66, 193, 0.5) !important;
}

.text-purple-25 {
    color: rgba(111, 66, 193, 0.25) !important;
}

.text-purple-10 {
    color: rgba(111, 66, 193, 0.1) !important;
}

/* ============================================
   CLASSES POUR LES GRADIENTS DE TEXTE
   ============================================ */

/* Gradients de texte */
.text-gradient-red-blue {
    background: linear-gradient(90deg, var(--snc-red), var(--snc-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-yellow-green {
    background: linear-gradient(90deg, var(--snc-yellow), var(--snc-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-primary {
    background: linear-gradient(90deg, var(--snc-red), var(--snc-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   CLASSES POUR LES OMBRES DE TEXTE
   ============================================ */

/* Ombres de texte colorées */
.text-shadow-red {
    text-shadow: 0 2px 4px rgba(215, 28, 38, 0.3);
}

.text-shadow-blue {
    text-shadow: 0 2px 4px rgba(0, 86, 179, 0.3);
}

.text-shadow-yellow {
    text-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
}

.text-shadow-green {
    text-shadow: 0 2px 4px rgba(25, 135, 84, 0.3);
}

.text-shadow-purple {
    text-shadow: 0 2px 4px rgba(111, 66, 193, 0.3);
}

/* ============================================
   CLASSES POUR LES SURVOLS (HOVER)
   ============================================ */

/* Effets au survol */
.hover-text-red:hover {
    color: var(--snc-red) !important;
}

.hover-text-blue:hover {
    color: var(--snc-blue) !important;
}

.hover-text-yellow:hover {
    color: var(--snc-yellow) !important;
}

.hover-text-green:hover {
    color: var(--snc-green) !important;
}

.hover-text-purple:hover {
    color: var(--snc-purple) !important;
}

/* Transition douce pour les survols */
.text-transition {
    transition: color 0.3s ease;
}

/* ============================================
   CLASSES POUR LIENS
   ============================================ */

/* Liens colorés */
.link-snc-red {
    color: var(--snc-red);
    text-decoration: none;
}

.link-snc-red:hover {
    color: #b51e2a; /* Version plus sombre */
    text-decoration: underline;
}

.link-snc-blue {
    color: var(--snc-blue);
    text-decoration: none;
}

.link-snc-blue:hover {
    color: #004494; /* Version plus sombre */
    text-decoration: underline;
}

.link-snc-yellow {
    color: var(--snc-yellow);
    text-decoration: none;
}

.link-snc-yellow:hover {
    color: #d9a406; /* Version plus sombre */
    text-decoration: underline;
}

/* ============================================
   CLASSES UTILITAIRES SUPPLÉMENTAIRES
   ============================================ */

/* Classes pour les états actifs */
.active.text-red,
.text-red.active {
    color: var(--snc-red) !important;
    font-weight: bold;
}

.active.text-blue,
.text-blue.active {
    color: var(--snc-blue) !important;
    font-weight: bold;
}

/* Classes pour la visibilité */
.text-red-light {
    color: #f8d7da !important; /* Version claire */
}

.text-blue-light {
    color: #cfe2ff !important; /* Version claire */
}

.text-yellow-light {
    color: #fff3cd !important; /* Version claire */
}

.text-green-light {
    color: #d1e7dd !important; /* Version claire */
}

.text-purple-light {
    color: #e2d9f3 !important; /* Version claire */
}

/* Text color utilities */



.text {
    color: #2E7D32;
}

/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-xl-square {
    width: 66px;
    height: 66px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn.btn-primary {
    color: var(--snc-white);
    border: none;
    background: var(--snc-red);
}

.btn.btn-primary:hover {
    background: var(--snc-red-dark);
    color: var(--snc-white);
}

.btn.btn-light {
    color: var(--snc-red);
    border: none;
}

.btn.btn-light:hover {
    color: var(--snc-white);
    background: var(--snc-red);
}

.btn.btn-dark {
    color: var(--snc-white);
    border: none;
}

.btn.btn-dark:hover {
    color: var(--snc-red);
    background: var(--snc-yellow-light);
}
/*** Button End ***/