@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
    
    --main-color: #D30707;
    --main-dark-color: #B60000;
    --main-light-color: #F22525;
    --rgb-main-color: 212, 7, 7;

    --second-color: #1C8DD4;
    --second-dark-color: #006FB6;
    --second-light-color: #3AABF2;
    --rgb-second-color: 28, 141, 212;

    --third-color: #EAC435;
    --third-dark-color: #B6B300;
    --third-light-color: #F2EFFF;
    --rgb-third-color: 234, 196, 53;

    --footer-bg-color: #001021;
    --bg-color: #FFF;
    --dark-text-color: #626262;
    --light-text-color: #f2f2f2;
    --grey-text-color: #8390A2;

    /* Utilitaires */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-800: #1e293b;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body,
p,
span:not(.fas):not(.far):not(.fab),
div,
h1,
h2,
h3,
h4,
h5,
h6,
a,
td,
th,
li,
label,
input,
button,
select,
textarea {
    font-family: 'DM Sans', sans-serif !important;
}

.fas,
.far,
.fab,
.fal,
.fa {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
}


/* Styles sur les titres */
.title .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(211,7,7,0.08);
    border: 1px solid rgba(211,7,7,0.2);
    border-radius: 25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--second-color);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.title .badge-dot {
    width: 7px;
    height: 7px;
    background: var(--second-color);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.title h2 {
    font-size: 28px;
    font-weight: 700;
    color: #111;
    margin-top: 16px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

#typing {
  border-right: 3px solid #000;
}

.cursor-blink {
  animation: blink 0.7s infinite;
}

@keyframes blink {
  50% { border-color: transparent; }
}