/*----------------------------
  Portfolio de Catherine Audet
  style.css
----------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/*----------------------------
 * Variables de thème
----------------------------*/
:root {
    /* Fonts */
    --font-primary: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Tailles de texte */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;  /* 14px — descriptions */
    --text-2xl:  2rem;    /* 24px */
    
    /* Tailles de titres */
    --text-h1: 2.25rem;   /* 36px — ton nom */
    --text-h2: 1.75rem;   /* 28px — titre de section */
    --text-h3: 1.25rem;   /* 20px — tagline hero */
    --text-h4: 1.125rem;  /* 18px — titres de cartes projets */
    --text-h5: 0.875rem;  /* 14px — titres groupes compétences */
    
    /* Arrière-plans */
    --color-bg-dark:    #1A1A1A;  /* fond général */
    --color-bg-card:    #242424;  /* cartes */
    --color-bg-surface: #2E2E2E;  /* surfaces, chips, boutons secondaires */

    /* Bordures */
    --bs-border-color: #3A3A3A;

    /* Accent */
    --color-accent:       #5B8DB8;  /* bleu acier — stats, titres compétences */
    --color-accent-dark:  #0D1F2D;  /* fond badges featured */
    --color-accent-light: #A8C8E8;  /* texte sur fond accent-dark */

    /* Texte */
    --color-text-primary:   #F0F0F0;  /* titres, éléments importants */
    --color-text-secondary: #999999;  /* descriptions, labels */
}


/*----------------------------
 * Styles globaux
----------------------------*/
body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
    font-family: var(--font-primary), sans-serif;
    font-size: 1rem;
    line-height: 1.7;
}

h1 {
    font-family: var(--font-primary);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.2;
}

h2 {
    font-family: var(--font-primary);
    font-size: var(--text-h2);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.3;
}

h3 {
    font-family: var(--font-primary);
    font-size: var(--text-h3);
    font-weight: 500;
    color: var(--color-text-primary);
}

h4 {
    font-family: var(--font-primary);
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.06em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.accent-bar {
    height: 4px;
    background-color: var(--color-accent);
    width: 100%;
}

/*----------------------------
 * Menus
----------------------------*/
nav a {
    position: relative;
    color: var(--color-text-secondary);
}

nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

/*----------------------------
 * Typographie
----------------------------*/
.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-2xl {
    font-size: var(--text-2xl);
}

.text-h2 {
    font-size: var(--text-h2);
}

.text-h3 {
    font-size: var(--text-h3);
}

.text-h4 {
    font-size: var(--text-h4);
}

.text-h5 {
    font-size: var(--text-h5);
}

.text-normal {
    font-weight: 400;
}

.font-weight-light {
    font-weight: 300;
}

.font-weight-bold {
    font-weight: 600;
}

/*----------------------------
 * Couleurs de texte
----------------------------*/
.color-text-primary {
    color: var(--color-text-primary);
}

.color-text-secondary {
    color: var(--color-text-secondary);
}

.accent {
    color: var(--color-accent);
}

.accent-dark {
    color: var(--color-accent-dark);
}

.accent-light {
    color: var(--color-accent-light);
}

/*----------------------------
 * Couleurs de fond
----------------------------*/
.bkg-color-text-primary {
    background-color: var(--color-text-primary);
    color: var(--color-bg-dark);
}

.bkg-color-bg-card {
    background-color: var(--color-bg-card);
}

.bkg-color-bg-surface {
    background-color: var(--color-bg-surface);
}

.bkg-color-accent-dark {
    background-color: var(--color-accent-dark);
}

.bkg-color-accent-light {
    background-color: var(--color-accent-light);
}

/*----------------------------
 * Bordures
----------------------------*/
.border-color {
    border-color: var(--bs-border-color);
}

/*----------------------------
 * Chips
----------------------------*/
.chips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.chip {
    padding: 4px 12px;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.chip--mono    { background: var(--color-bg-surface); color: var(--color-text-secondary); border: 1px solid var(--bs-border-color); }
.chip--dotnet  { background: #1A2A1A; color: #9FE1CB; }
.chip--angular { background: #2A1A1A; color: #F0997B; }
.chip--php     { background: #1E1A30; color: #AFA9EC; }
.chip--react   { background: #0D2420; color: #5DCAA5; }
.chip--web     { background: var(--color-bg-surface); color: var(--color-text-secondary); }
.chip--epsi    { background: var(--color-accent-dark); color: var(--color-accent-light); }
.chip--github  { background: #0D2420; color: #5DCAA5; border: 1px solid var(--bs-border-color); }

.chip:hover {
    transform: scale(1.05);
}

/*----------------------------
 * Animations
----------------------------*/
.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-3px);
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease 0s, transform .5s ease 0s;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.stat-item.fade-in,
.project-card.fade-in,
.skill-group.fade-in {
    transition-delay: 0.2s;
}

.contact-cta.fade-in:first-child {
    transition-delay: 0.1s;
}

.contact-cta.fade-in:last-child {
    transition-delay: 0.3s;
}

.btn:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}