/* style.css - Oxford Digital School v3 */ /* --- 1. Variables et Styles Généraux --- */ /* Ce bloc définit des variables CSS personnalisées. Elles commencent par `--` et sont utilisées pour stocker des valeurs réutilisables comme les couleurs, les dégradés et les ombres. Cela rend le code plus facile à maintenir et à modifier : un changement de valeur ici se répercutera sur tous les endroits où cette variable est utilisée. Exemple : `--primary-dark-blue` stocke la couleur `#003366`. */ :root { --primary-dark-blue: #003366; --primary-medium-blue: #004c99; --primary-bright-blue: #0066cc; --accent-blue: #0078ff; --accent-cyan: #00bfff; --text-dark: #1a1a1a; --text-light: #ffffff; --bg-light: #f9fbff; --bg-light-gradient: linear-gradient(135deg, #e9f1ff, #f9fbff); --shadow-light: rgba(0, 0, 0, 0.05); --shadow-medium: rgba(0, 0, 0, 0.1); } /* Définit le comportement de défilement de la page (scroll). `scroll-behavior: smooth;` assure que le défilement vers les ancres (liens internes) se fera de manière fluide et non abrupte. */ html { scroll-behavior: smooth; } /* Styles de base appliqués à tout le corps de la page (). - `margin: 0;`: Supprime la marge par défaut que les navigateurs ajoutent au corps. - `font-family`: Définit la police de caractères principale. "Poppins" est privilégiée, sinon "Segoe UI", puis une police sans empattement générique. - `background: var(--bg-light);`: Applique la couleur de fond claire définie dans nos variables CSS. - `color: var(--text-dark);`: Définit la couleur de texte foncée par défaut pour tous les éléments du corps. */ body { margin: 0; font-family: "Poppins", "Segoe UI", sans-serif; background: var(--bg-light); color: var(--text-dark); } /* La classe `.container` est utilisée pour centrer le contenu principal des sections et lui donner une largeur maximale, tout en ajoutant un rembourrage horizontal. - `max-width: 1200px;`: Le contenu de ce conteneur ne dépassera jamais 1200 pixels de large. - `margin: 0 auto;`: Centre le bloc horizontalement sur la page. - `padding: 0 1.5rem;`: Ajoute un rembourrage de 1.5rem (environ 24px) sur les côtés gauche et droit, et pas de rembourrage en haut et en bas. */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* --- 2. Header & Navigation --- */ /* Styles de l'en-tête de la page (
). - `position: sticky; top: 0;`: L'en-tête restera en haut de la fenêtre de défilement lorsqu'il atteint le bord supérieur (fixé en haut). - `background: rgba(255, 255, 255, 0.85);`: Un fond blanc semi-transparent (0.85 d'opacité). - `backdrop-filter: blur(10px);`: Applique un effet de flou aux éléments situés *derrière* l'en-tête, donnant un effet "verre dépoli" moderne. - `box-shadow: 0 2px 10px var(--shadow-light);`: Ajoute une ombre légère en bas de l'en-tête pour le détacher du contenu. - `z-index: 1000;`: Assure que l'en-tête reste au-dessus des autres contenus lors du défilement. - `padding: 1rem 1.5rem;`: Ajoute un rembourrage interne à l'en-tête. */ header { position: sticky; top: 0; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); box-shadow: 0 2px 10px var(--shadow-light); z-index: 1000; padding: 1rem 1.5rem; } /* Conteneur Flexbox pour les éléments de navigation (logo et menu) à l'intérieur de l'en-tête. - `display: flex;`: Utilise Flexbox pour organiser les éléments. - `justify-content: space-between;`: Espace les éléments de manière égale, poussant le logo à gauche et le menu à droite. - `align-items: center;`: Centre verticalement les éléments enfants (logo et navigation) dans le conteneur. - `max-width: 1400px; margin: 0 auto;`: Centre le conteneur `nav-container` lui-même et limite sa largeur. */ .nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; } /* Styles du lien du logo (qui contient l'image et le texte "University of Oxford"). - `display: flex; align-items: center;`: Rend le logo un conteneur Flexbox pour aligner l'image et le texte horizontalement et verticalement. - `text-decoration: none;`: Supprime le soulignement par défaut des liens. - `color: var(--primary-dark-blue);`: Définit la couleur du texte du logo. - `font-size: 1.5rem; font-weight: 600;`: Définit la taille et le poids de la police pour le texte du logo. */ .logo { display: flex; align-items: center; text-decoration: none; color: var(--primary-dark-blue); font-size: 1.5rem; font-weight: 600; } /* Styles pour l'image à l'intérieur du logo. - `height: 100px;`: Définit une hauteur fixe pour l'image du logo. - `margin-right: 0.75rem;`: Ajoute un petit espace à droite de l'image pour la séparer du texte du logo. */ .logo img { height: 100px; margin-right: 0.75rem; } /* Styles de la navigation principale (