/* ========================================================================== Layout — Containers, Grid, Sections, Spacing ========================================================================== */ /* * LE PATTERN « CONTAINER » * ======================== * Le « container » est un patron de mise en page incontournable en CSS. * Son rôle : empêcher le contenu de s'étirer d'un bord à l'autre de l'écran * sur les grands moniteurs, tout en le gardant centré horizontalement. * * Comment ça marche, étape par étape : * * 1. width: 100% * → Le conteneur prend toute la largeur disponible de son parent. * Sur un petit écran, il occupera donc 100 % de l'écran. * * 2. max-width: var(--container-max) * → On fixe une largeur maximale (définie dans une variable CSS, * par exemple 1200px). Même sur un écran 4K de 3840px de large, * le conteneur ne dépassera jamais cette valeur. * * 3. margin-inline: auto * → C'est la technique classique pour centrer un bloc horizontalement. * « margin-inline » est une propriété logique (voir plus bas) qui cible * les marges gauche et droite. La valeur « auto » distribue l'espace * restant de façon égale des deux côtés → le bloc est centré. * * 4. padding-inline: 1rem * → « padding-inline » est une propriété logique CSS qui applique un * rembourrage (padding) sur l'axe horizontal (gauche et droite en * français/anglais, mais droite et gauche en arabe par exemple). * Les propriétés logiques s'adaptent automatiquement au sens de * lecture de la langue (LTR ou RTL). Ici on met 1rem (16px par défaut) * pour que le texte ne touche jamais les bords de l'écran sur mobile. */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 1rem; } /* * LES SECTIONS * ============ * Une section représente un grand bloc de contenu (À propos, Projets, etc.). * * padding-block: var(--section-padding) * → Propriété logique qui applique un rembourrage vertical (haut et bas). * On utilise une variable CSS (--section-padding) pour pouvoir changer * l'espacement de toutes les sections d'un coup depuis un seul endroit * (le fichier de variables/tokens). C'est le principe DRY : * « Don't Repeat Yourself » — ne pas se répéter. */ .section { padding-block: var(--section-padding); } /* * MODIFICATEUR BEM : .section--alt * ================================ * BEM signifie Block-Element-Modifier. C'est une convention de nommage : * - Bloc : .section (le composant principal) * - Element : .section__title (un sous-élément du bloc, avec __) * - Modifier: .section--alt (une variante du bloc, avec --) * * Ici, « --alt » (pour « alternative ») donne un fond différent à la section, * ce qui crée une alternance visuelle entre les sections claires et sombres. * On utilise la variable --bg-secondary pour rester cohérent avec le thème. */ .section--alt { background-color: var(--bg-secondary); } /* * TITRE DE SECTION * ================ * text-align: center → Centre le texte horizontalement. * margin-bottom: 3rem → Espace sous le titre avant le contenu qui suit. * position: relative → Nécessaire pour que le pseudo-élément ::after * (voir ci-dessous) se positionne par rapport au titre. */ .section__title { text-align: center; margin-bottom: 3rem; position: relative; } /* * PSEUDO-ÉLÉMENT ::after POUR TRAIT DÉCORATIF * =========================================== * Les pseudo-éléments ::before et ::after permettent de créer du contenu * visuel sans ajouter de HTML supplémentaire. Ils sont très utilisés pour * des décorations purement esthétiques. * * content: '' → Obligatoire pour que le pseudo-élément apparaisse. * Ici on met une chaîne vide car on ne veut pas de texte. * display: block → Par défaut un pseudo-élément est inline ; on le passe * en bloc pour pouvoir lui donner largeur et hauteur. * width: 60px → Largeur du trait décoratif. * height: 3px → Épaisseur du trait. * background-color → Couleur d'accentuation du thème (variable CSS). * margin: 0.75rem auto 0 * → 0.75rem en haut (espace entre le titre et le trait), * auto à gauche et à droite (centre le trait), * 0 en bas. * border-radius: 2px → Arrondit légèrement les extrémités du trait. * * Résultat : un petit trait coloré centré sous chaque titre de section. */ .section__title::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--accent); margin: 0.75rem auto 0; border-radius: 2px; } /* * UTILITAIRES CSS GRID * ==================== * CSS Grid est un système de mise en page en deux dimensions (lignes ET colonnes). * C'est l'outil idéal pour créer des grilles de cartes, des galeries, etc. * * display: grid → Active le mode grille sur le conteneur. * Tous ses enfants directs deviennent des « grid items ». * * gap: 1.5rem → Espacement uniforme entre toutes les cellules de la grille, * aussi bien horizontalement que verticalement. * Avant, il fallait utiliser des marges sur chaque enfant — * « gap » simplifie énormément le travail. */ .grid { display: grid; gap: 1.5rem; } /* * .grid--2 et .grid--3 : VARIANTES DE COLONNES * ============================================= * grid-template-columns: repeat(2, 1fr) * → Crée 2 colonnes de taille égale. * « repeat(2, 1fr) » est un raccourci pour « 1fr 1fr ». * L'unité « fr » (fraction) distribue l'espace disponible de façon * proportionnelle. « 1fr 1fr » = chaque colonne prend 1 part sur 2, * donc 50 % chacune. * * grid-template-columns: repeat(3, 1fr) * → Même principe avec 3 colonnes (≈ 33,3 % chacune). * * On cumule ces classes avec .grid :
donne * une grille à 3 colonnes avec le gap déjà défini. */ .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } /* * LA SECTION HERO (écran d'accueil plein écran) * ============================================== * Le « hero » est la grande bannière que l'on voit en premier en arrivant * sur le site. Elle occupe toute la hauteur de l'écran. * * min-height: 100vh → La hauteur minimale est de 100 % du viewport (la * fenêtre visible du navigateur). « vh » = viewport height. * On utilise min-height plutôt que height pour que le * contenu puisse grandir si nécessaire. * * display: flex → Active Flexbox (voir plus bas pour les détails). * align-items: center → Centre les enfants verticalement. * justify-content: center → Centre les enfants horizontalement. * → Combinés, ces trois propriétés créent un centrage parfait dans les * deux axes — une technique très courante avec Flexbox. * * padding-top: 5rem → Compense la hauteur de la barre de navigation fixe * pour que le contenu ne passe pas dessous. * * position: relative → Crée un « contexte de positionnement » (stacking context). * Les enfants avec position: absolute se placeront par * rapport à cet élément, pas par rapport à la page entière. * * overflow: hidden → Cache tout contenu qui dépasse du hero (par exemple * si le canvas d'arrière-plan déborde légèrement). */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-top: 5rem; position: relative; overflow: hidden; } /* * CANVAS DE FOND DU HERO — POSITIONNEMENT ABSOLU * =============================================== * Le canvas (élément ) affiche une animation en arrière-plan du hero. * * position: absolute → Sort l'élément du flux normal du document. * Il se positionne par rapport au premier parent ayant * position: relative (ici, .hero). * * inset: 0 → Raccourci pour top: 0; right: 0; bottom: 0; left: 0. * L'élément s'étire pour couvrir tout son parent positionné. * C'est la technique moderne pour créer un overlay plein écran. * * width: 100%; height: 100% → Assure la couverture complète, nécessaire * pour certains navigateurs avec . * * z-index: 0 → Le Z-INDEX contrôle l'ordre d'empilement des éléments. * Plus le chiffre est élevé, plus l'élément est « devant ». * Ici, z-index: 0 place le canvas à l'arrière-plan, * derrière le contenu du hero qui a z-index: 1 (voir plus bas). * Note : z-index ne fonctionne que sur des éléments positionnés * (relative, absolute, fixed, sticky). */ #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* * CONTENEUR INTÉRIEUR DU HERO — FLEXBOX EN DÉTAIL * ================================================ * Flexbox (display: flex) est un système de mise en page en UNE dimension * (soit une ligne, soit une colonne). Il est idéal pour aligner des éléments * côte à côte ou les centrer. * * display: flex → Active Flexbox. Les enfants directs deviennent des * « flex items » et se placent par défaut en ligne (row). * * flex-direction: row → Disposition horizontale (c'est la valeur par défaut, * mais on l'écrit ici pour la clarté). Les autres * valeurs possibles : column, row-reverse, column-reverse. * * align-items: center → Centre les enfants sur l'axe transversal * (vertical quand flex-direction est row). * * gap: 3rem → Espace de 3rem entre chaque flex item. * Bien plus propre que d'ajouter des marges sur chaque enfant. * * position: relative → Crée un contexte de positionnement local. * z-index: 1 → Place ce conteneur DEVANT le canvas (qui a z-index: 0). * C'est ainsi que le texte apparaît par-dessus l'animation. */ .hero__container { display: flex; flex-direction: row; align-items: center; gap: 3rem; position: relative; z-index: 1; } /* * GRILLE DU PARCOURS * ================== * grid-template-columns: 1fr 1fr → Deux colonnes égales. * C'est la même chose que repeat(2, 1fr), mais écrit de façon explicite. * gap: 3rem → Espacement généreux entre les colonnes et les lignes. */ .parcours__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } /* * GRILLE DE CONTACT * ================= * grid-template-columns: 2fr 1fr → Deux colonnes de tailles INÉGALES. * La première colonne (le formulaire) prend 2 parts de l'espace, * la seconde (les infos de contact) prend 1 part. * Ratio : la première fait le double de la seconde (≈ 66 % vs ≈ 33 %). */ .contact__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; } /* * FOOTER (pied de page) * ===================== * padding-block: 2rem → Rembourrage vertical (haut et bas) via propriété logique. * background-color: var(--bg-secondary) → Fond alternatif pour démarquer * visuellement le footer du contenu. * border-top: 1px solid var(--border) → Fine ligne horizontale en haut du * footer pour le séparer de la section * précédente. La couleur vient d'une * variable CSS pour rester cohérent avec * le thème (clair/sombre). */ .footer { padding-block: 2rem; background-color: var(--bg-secondary); border-top: 1px solid var(--border); } /* * CONTENEUR DU FOOTER — FLEXBOX pour espacer les éléments * ======================================================= * display: flex → Les enfants (copyright, liens sociaux) se placent en ligne. * * justify-content: space-between → Pousse le premier enfant à gauche et le * dernier à droite, avec tout l'espace libre * entre eux. C'est la technique classique pour * un footer avec copyright à gauche et liens * à droite. * * align-items: center → Centre verticalement tous les enfants entre eux. */ .footer__container { display: flex; justify-content: space-between; align-items: center; } /* * TEXTE DU COPYRIGHT * ================== * font-size: var(--font-size-sm) → Taille de police réduite (variable CSS). * color: var(--text-muted) → Couleur atténuée pour ne pas attirer l'attention. */ .footer__copyright { font-size: var(--font-size-sm); color: var(--text-muted); } /* * LIENS SOCIAUX DU FOOTER — Flexbox avec gap * =========================================== * display: flex → Aligne les icônes/liens côte à côte. * gap: 1.5rem → Espacement régulier entre chaque lien social. */ .footer__socials { display: flex; gap: 1.5rem; } /* * STYLE DES LIENS DU FOOTER * ========================= * transition: color var(--transition-fast) → Animation fluide du changement * de couleur au survol. La durée est stockée dans une variable CSS. * Sans transition, le changement serait instantané et brutal. */ .footer__link { font-size: var(--font-size-sm); color: var(--text-secondary); transition: color var(--transition-fast); } /* * ÉTAT :hover (survol) DU LIEN * → On change la couleur vers la teinte d'accentuation pour signaler * visuellement que l'élément est cliquable/interactif. */ .footer__link:hover { color: var(--accent); } /* * CRÉDIT FOOTER (lien « Made by Since09 » par exemple) * Même logique de transition et de hover que les autres liens. */ .footer__credit { color: var(--text-muted); transition: color var(--transition-fast); } .footer__credit:hover { color: var(--accent); } /* ---------- Scroll to Top ---------- */ /* * BOUTON « RETOUR EN HAUT » — position: fixed et animation * ========================================================= * Ce bouton flottant apparaît quand l'utilisateur a scrollé vers le bas, * et le ramène en haut de la page au clic. * * position: fixed → L'élément est fixé par rapport à la FENÊTRE du navigateur, * pas par rapport à la page. Il reste visible même quand * l'utilisateur scrolle. C'est différent de : * - static (par défaut, dans le flux normal) * - relative (décalé par rapport à sa position normale) * - absolute (positionné par rapport au parent positionné) * - sticky (hybride entre relative et fixed) * * bottom: 2rem; right: 2rem → Positionné à 2rem du bas et de la droite * de la fenêtre. * * width: 44px; height: 44px → Taille minimale recommandée par les normes * d'accessibilité pour une cible tactile (WCAG). * * display: flex; align-items: center; justify-content: center * → Centre l'icône (flèche) à l'intérieur du bouton rond. * * border: none → Supprime la bordure par défaut des