/* Reset : supprime les marges et paddings par défaut et définit le modèle de boîte */
* { 
    margin: 0;           /* Supprime toutes les marges */
    padding: 0;          /* Supprime tous les espacements internes */
    box-sizing: border-box; /* Inclut les paddings et bordures dans la taille totale des éléments */
}

/* Corps de la page */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Police moderne et compatible */
    background: #111;   /* Fond sombre de la page */
    color: #eee;        /* Couleur du texte principale */
    line-height: 1.6;   /* Hauteur de ligne pour lisibilité */
}

/* Navigation */
nav {
    display: flex;                 /* Utilise Flexbox pour aligner les éléments */
    justify-content: space-between; /* Espace entre logo et liens */
    align-items: center;           /* Centre verticalement les éléments */
    padding: 15px 40px;            /* Espacement interne du nav */
    background: #1a1a1a;           /* Fond sombre */
    position: sticky;              /* Reste visible en scrollant */
    top: 0;                         /* Position en haut de la page */
    z-index: 1000;                  /* Priorité au-dessus des autres éléments */
}

/* Logo dans la navigation */
nav .logo {
    font-size: 1.5em;      /* Taille du texte du logo */
    font-weight: bold;      /* Texte en gras */
    color: #4da6ff;        /* Couleur bleue */
}

/* Liens de navigation */
nav .nav-links a {
    margin-left: 20px;        /* Espace entre les liens */
    text-decoration: none;    /* Supprime le soulignement */
    color: #eee;              /* Couleur texte blanche */
    font-weight: 500;         /* Poids moyen */
    transition: color 0.3s;   /* Animation lors du survol */
}
nav .nav-links a:hover {
    color: #4da6ff;           /* Change la couleur au survol */
}

/* Section Hero (bannière principale) */
.hero {
    text-align: center;       /* Centre le texte */
    padding: 80px 20px;       /* Espacement interne */
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); /* Dégradé de fond */
}
.hero h1 {
    font-size: 2.5em;         /* Taille du titre principal */
    margin-bottom: 10px;      /* Espace sous le titre */
}
.hero p {
    margin-bottom: 20px;      /* Espace sous le texte */
    font-size: 1.2em;         /* Taille du texte secondaire */
    color: #ccc;               /* Couleur gris clair */
}

/* Blocs de contenu */
.block {
    padding: 60px 40px;        /* Espacement interne du bloc */
    border-bottom: 1px solid #222; /* Ligne de séparation */
}
.block h2 {
    margin-bottom: 15px;       /* Espace sous le titre secondaire */
    color: #4da6ff;            /* Couleur bleu */
}
.block p {
    margin-bottom: 20px;       /* Espace sous le paragraphe */
    color: #bbb;               /* Couleur gris */
}

/* Cartes */
.card-grid {
    display: grid;             /* Utilise une grille pour les cartes */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Colonnes adaptatives */
    gap: 20px;                 /* Espace entre les cartes */
}
.card {
    background: #1a1a1a;       /* Fond sombre pour chaque carte */
    padding: 20px;             /* Espacement interne */
    border-radius: 15px;       /* Coins arrondis */
    box-shadow: 0 4px 10px rgba(0,0,0,0.4); /* Ombre portée */
    transition: transform 0.3s; /* Animation lors du survol */
}
.card:hover {
    transform: translateY(-5px); /* Légère translation vers le haut au survol */
}
.card h3 {
    margin-bottom: 10px;       /* Espace sous le titre de la carte */
    color: #fff;               /* Couleur blanche */
}
.card p {
    color: #ccc;               /* Couleur texte gris clair */
}
.card-img {
    background: #333;          /* Fond gris pour l'image */
    height: 150px;             /* Hauteur fixe */
    border-radius: 10px;       /* Coins arrondis */
    margin-bottom: 15px;       /* Espace sous l'image */
}

/* Listes */
.list ul {
    list-style: none;          /* Supprime les puces */
}
.list li {
    padding: 8px 0;            /* Espacement vertical des éléments */
    border-bottom: 1px solid #333; /* Ligne de séparation */
}

/* Boutons */
.btn {
    display: inline-block;     /* Pour gérer padding et dimensions */
    padding: 10px 18px;        /* Espacement interne */
    background: #4da6ff;       /* Fond bleu */
    color: white;              /* Texte blanc */
    border-radius: 25px;       /* Coins arrondis */
    text-decoration: none;     /* Supprime le soulignement */
    font-weight: 500;          /* Poids moyen */
    transition: background 0.3s; /* Animation au survol */
}
.btn:hover {
    background: #3385cc;        /* Fond bleu plus foncé au survol */
}
.btn.big {
    padding: 14px 24px;         /* Bouton plus grand */
    font-size: 1.1em;           /* Texte plus grand */
}

/* Newsletter */
.newsletter form {
    margin-top: 20px;           /* Espace au-dessus du formulaire */
    display: flex;              /* Flex pour aligner input et bouton */
    gap: 10px;                  /* Espace entre les éléments */
    justify-content: center;    /* Centre horizontalement */
}
.newsletter input {
    padding: 10px;             /* Espacement interne */
    border: none;              /* Supprime la bordure par défaut */
    border-radius: 20px;       /* Coins arrondis */
    flex: 1;                   /* Input prend tout l'espace disponible */
}
.newsletter button {
    border: none;              /* Supprime la bordure */
    cursor: pointer;           /* Curseur main au survol */
}

/* Footer (pied de page) */
footer {
    text-align: center;        /* Centre le texte */
    padding: 20px;             /* Espacement interne */
    background: #1a1a1a;       /* Fond sombre */
    color: #888;               /* Texte gris */
}