/* ========================================================================== Base — Reset, CSS Variables, Typographie CE FICHIER EST LA FONDATION DE TOUT LE SITE. Il definit les regles de base qui s'appliquent a TOUTES les pages : - Le "reset" CSS pour partir sur une base coherente entre navigateurs - Les "design tokens" (variables CSS) pour centraliser couleurs, tailles, etc. - Les styles de base pour la typographie, les liens, les images - Les utilitaires d'accessibilite CONSEIL : Lis ce fichier en entier avant de toucher aux autres fichiers CSS. Tout le reste du site depend de ce qui est defini ici. ========================================================================== */ /* ========================================================================== 1. CSS RESET ========================================================================== POURQUOI UN RESET ? Chaque navigateur (Chrome, Firefox, Safari...) applique ses propres styles par defaut aux elements HTML. Par exemple, un

n'aura pas exactement la meme marge dans Chrome et dans Firefox. Pour eviter ces differences imprevisibles, on "remet a zero" certains styles. LE SELECTEUR UNIVERSEL * : L'etoile (*) selectionne TOUS les elements HTML de la page, sans exception. *::before ET *::after : Ce sont des "pseudo-elements". Ils permettent de creer du contenu decoratif avant (::before) ou apres (::after) un element, sans ajouter de HTML. On les inclut dans le reset pour qu'ils suivent les memes regles. BOX-SIZING: BORDER-BOX : C'est l'une des regles les plus importantes en CSS moderne. Par defaut (content-box), quand tu dis "width: 300px", le navigateur ajoute le padding et la bordure EN PLUS. Donc un element avec width: 300px + padding: 20px + border: 2px = 344px au total. C'est piege ! Avec border-box, width: 300px = 300px TOTAL, padding et bordure inclus. C'est beaucoup plus intuitif pour construire des mises en page. MARGIN: 0 ET PADDING: 0 : On supprime toutes les marges et espacements par defaut des navigateurs. Comme ca, on repart de zero et on ajoute nous-memes les espacements exactement la ou on en a besoin. C'est un controle total. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ========================================================================== 2. DESIGN TOKENS — Variables CSS (mode clair par defaut) ========================================================================== QU'EST-CE QU'UNE VARIABLE CSS (Custom Property) ? Une variable CSS est une valeur qu'on definit une seule fois et qu'on reutilise partout dans le code. Elle commence toujours par deux tirets : --nom-de-la-variable: valeur; Pour l'utiliser plus tard, on ecrit : var(--nom-de-la-variable) POURQUOI C'EST UTILE ? Imagine que tu veuilles changer la couleur d'accent du site. Sans variable, tu devrais chercher et remplacer cette couleur dans TOUS les fichiers CSS. Avec une variable, tu changes la valeur a UN seul endroit (ici), et le changement se propage automatiquement partout. LE PATTERN "DESIGN TOKENS" : Les "design tokens" sont une methode de conception ou l'on centralise TOUTES les valeurs visuelles (couleurs, tailles, espacements, ombres...) dans un seul endroit. C'est comme un dictionnaire de style pour le site. Avantages : - Coherence : la meme couleur partout, pas de variations accidentelles - Maintenance : un seul endroit a modifier - Lisibilite : --text-primary est plus explicite que #0f172a - Theming : facile de creer un mode sombre en changeant juste les valeurs :root — LE PSEUDO-CLASSE RACINE : :root selectionne l'element racine du document HTML, c'est-a-dire . C'est quasiment la meme chose que d'ecrire "html { ... }", mais avec une specificite CSS plus elevee (priorite plus haute). On place les variables dans :root pour qu'elles soient accessibles PARTOUT dans la page — tous les elements enfants de en heritent. C'est la convention standard pour definir des variables globales en CSS. ========================================================================== */ :root { /* ---------- COULEURS ---------- On organise les couleurs par role, pas par apparence. --bg-primary n'est pas "gris clair" mais "fond principal". Ainsi, si on change de theme, le nom reste logique. */ --bg-primary: #F2F2F2; /* Fond principal de la page */ --bg-secondary: #F9F9F9; /* Fond des sections alternees */ --bg-card: #f1f5f9; /* Fond des cartes (projets, competences...) */ --bg-elevated: #e2e8f0; /* Fond des elements sureleves (hover, etc.) */ --text-primary: #171717; /* Couleur du texte principal (titres, etc.) */ --text-secondary: #616161; /* Couleur du texte secondaire (paragraphes) */ --text-muted: #4F4F4F; /* Couleur du texte discret (legendes, dates) */ --accent: #000000; /* Couleur d'accent — la couleur "signature" du site */ --accent-hover: #0f766e; /* Variante de l'accent au survol (hover) */ --accent-glow: rgba(13, 148, 136, 0.1); /* Lueur autour de l'accent (effet subtil) */ --text-on-accent: #ffffff; /* Texte affiche PAR-DESSUS la couleur d'accent */ --success: #22c55E; /* Couleur de succes (formulaire envoye, etc.) */ --error: #ef4444; /* Couleur d'erreur (champ invalide, etc.) */ --border: rgba(0, 0, 0, 0.08); /* Bordures subtiles — noir a 8% d'opacite */ /* ---------- TYPOGRAPHIE ---------- LA FONCTION clamp() — TYPOGRAPHIE RESPONSIVE : clamp(minimum, ideal, maximum) est une fonction CSS qui permet de creer des tailles FLUIDES qui s'adaptent a l'ecran. Exemple : clamp(2rem, 5vw, 3.5rem) - Minimum : 2rem (32px) — ne descendra jamais en dessous, meme sur mobile - Ideal : 5vw — 5% de la largeur de la fenetre (s'adapte dynamiquement) - Maximum : 3.5rem (56px) — ne depassera jamais, meme sur un ecran 4K C'est BEAUCOUP mieux que d'ecrire des media queries pour chaque taille d'ecran. La taille evolue de facon fluide et continue. REM vs PX — QUELLE UNITE UTILISER ? - px (pixel) : taille fixe, ne change jamais. 16px = toujours 16px. - rem ("root em") : taille RELATIVE a la taille de police de . Par defaut, 1rem = 16px. Mais si l'utilisateur augmente la taille de texte dans ses parametres de navigateur, 1rem s'adapte. On utilise rem pour RESPECTER les preferences d'accessibilite de l'utilisateur. Quelqu'un avec une deficience visuelle peut avoir configure son navigateur pour afficher du texte plus gros. Avec px, on ignore ce reglage. Avec rem, on le respecte. REGLE SIMPLE : utilise rem pour les tailles de texte et les espacements, px pour les bordures fines et les details visuels tres precis. vw (viewport width) : 1vw = 1% de la largeur de la fenetre. Utilise dans clamp() pour creer l'effet de taille fluide. */ --font-main: 'Inter', system-ui, -apple-system, sans-serif; --font-size-h1: clamp(2rem, 5vw, 3.5rem); /* Titre principal : fluide de 32px a 56px */ --font-size-h2: clamp(1.5rem, 3vw, 2.25rem); /* Sous-titre : fluide de 24px a 36px */ --font-size-h3: clamp(1.25rem, 2vw, 1.5rem); /* Titre de section : fluide de 20px a 24px */ --font-size-body: 1rem; /* Texte courant : 16px (taille par defaut du navigateur) */ --font-size-sm: 0.875rem; /* Texte petit : 14px */ --font-size-xs: 0.75rem; /* Texte tres petit : 12px (legendes, badges) */ /* ---------- ESPACEMENT ---------- Le padding des sections utilise aussi clamp() pour etre responsive. Sur mobile : 3rem (48px), sur desktop : jusqu'a 6rem (96px). --container-max limite la largeur du contenu a 1280px pour la lisibilite (les lignes trop longues sont difficiles a lire). */ --section-padding: clamp(3rem, 8vw, 6rem); --container-max: 1280px; /* ---------- TRANSITIONS ---------- LE RACCOURCI "TRANSITION" : Une transition CSS anime le passage d'un etat a un autre (ex: hover). Le format est : duree fonction-de-timing - 200ms / 300ms / 500ms : la duree de l'animation en millisecondes - ease : la courbe d'acceleration (demarre doucement, accelere, ralentit) On definit 3 vitesses pour garder de la coherence : - fast : pour les micro-interactions (hover couleur, opacite) - base : pour les animations standard (ouverture menu, slide) - slow : pour les animations plus dramatiques (apparition de section) Ces variables sont utilisees partout avec : transition: propriete var(--transition-fast); */ --transition-fast: 200ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; /* ---------- BORDURES ET OMBRES ---------- BORDER-RADIUS : Arrondit les coins d'un element. Plus la valeur est grande, plus les coins sont arrondis. - --radius-sm (0.5rem = 8px) : coins legerement arrondis (boutons, badges) - --radius-md (1rem = 16px) : coins moyens (cartes) - --radius-lg (1.5rem = 24px) : coins tres arrondis (modales, sections) BOX-SHADOW : Ajoute une ombre portee sous un element pour creer un effet de profondeur. Format : decalage-X decalage-Y flou propagation couleur --shadow-card : 0 4px 20px rgba(0, 0, 0, 0.08) - 0 : pas de decalage horizontal - 4px : 4px de decalage vers le bas (ombre en dessous) - 20px : 20px de flou (ombre douce et diffuse) - rgba(0,0,0,0.08) : noir a 8% d'opacite (tres subtil) */ --radius-sm: 0.5rem; --radius-md: 1rem; --radius-lg: 1.5rem; --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08); } /* ========================================================================== 3. STYLES DE BASE — HTML et BODY ========================================================================== SCROLL-BEHAVIOR: SMOOTH : Quand l'utilisateur clique sur un lien ancre (ex: href="#contact"), au lieu de "teleporter" la page instantanement, le navigateur fait defiler la page de maniere fluide et animee. C'est bien plus agreable. On l'applique sur car c'est l'element qui gere le defilement. FONT-SIZE: 100% : On s'assure que la taille de base du texte respecte le reglage du navigateur de l'utilisateur (generalement 16px). On ne force PAS une valeur en px ici, car cela ecraserait les preferences d'accessibilite de l'utilisateur. 100% = "utilise la valeur par defaut". ========================================================================== */ html { scroll-behavior: smooth; font-size: 100%; } /* ---------- BODY ---------- font-family: var(--font-main) : On utilise la variable definie plus haut. 'Inter' est la police principale. Si elle n'est pas disponible, le navigateur essaie system-ui (police systeme), puis -apple-system (macOS/iOS), puis n'importe quel sans-serif. C'est une "pile de polices" (font stack) — un systeme de secours. line-height: 1.6 : L'interligne (espacement entre les lignes). 1.6 signifie "1.6 fois la taille de la police". C'est une valeur recommandee pour la lisibilite des paragraphes. Sans unite, elle s'adapte proportionnellement. -webkit-font-smoothing: antialiased ET -moz-osx-font-smoothing: grayscale : LISSAGE DES POLICES (Font Smoothing) : Ces proprietes controlent comment le navigateur dessine les polices a l'ecran, principalement sur macOS. - "antialiased" : utilise un lissage plus fin et plus leger. Le texte parait un peu plus mince et plus net, surtout sur les fonds clairs. - "grayscale" : equivalent Mozilla/Firefox du meme effet. Ce sont des proprietes prefixees (-webkit-, -moz-) car elles ne font pas partie du standard CSS officiel. Elles n'ont pas d'effet sur Windows. overflow-x: hidden : EMPECHER LE DEFILEMENT HORIZONTAL : Certains elements (animations, images, effets decoratifs) peuvent depasser de l'ecran sur le cote. Sans cette regle, une barre de defilement horizontale apparaitrait, ce qui est generalement indesirable. overflow-x: hidden cache tout ce qui depasse a gauche ou a droite. "overflow" = depassement, "x" = axe horizontal. */ body { font-family: var(--font-main); font-size: var(--font-size-body); line-height: 1.6; color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ========================================================================== 4. TYPOGRAPHIE — Titres, paragraphes, liens ========================================================================== */ /* Les titres partagent une interligne plus serree (1.2) que le texte courant (1.6), car les gros caracteres n'ont pas besoin d'autant d'espace entre les lignes pour etre lisibles. font-weight: 700 = gras (bold). L'echelle va de 100 (tres fin) a 900 (extra-gras). */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; color: var(--text-primary); } /* Chaque niveau de titre utilise la variable correspondante. Grace a clamp(), ces tailles sont deja responsives — pas besoin de media queries supplementaires pour les adapter au mobile. */ h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } /* Les paragraphes utilisent la couleur secondaire (plus douce que les titres) pour creer une hierarchie visuelle : les titres attirent l'oeil en premier. */ p { color: var(--text-secondary); line-height: 1.6; } /* ---------- LIENS ---------- text-decoration: none supprime le soulignement par defaut des liens. transition: color var(--transition-fast) : LE RACCOURCI TRANSITION : Quand la couleur du lien change (au hover par exemple), au lieu de changer instantanement, elle fait une transition animee de 200ms. Format : transition: propriete duree fonction-de-timing; - "color" = seule la propriete color sera animee - var(--transition-fast) = "200ms ease" (voir les tokens ci-dessus) */ a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); } /* Au survol de la souris, la couleur change vers --accent-hover. Grace a la transition definie ci-dessus, ce changement est anime. */ a:hover { color: var(--accent-hover); } /* :focus-visible — ACCESSIBILITE AU CLAVIER : Quand un utilisateur navigue avec la touche Tab (au clavier), il a besoin de VOIR quel element est actuellement selectionne (le "focus"). :focus-visible s'active UNIQUEMENT quand le focus vient du clavier, PAS quand on clique a la souris. C'est mieux que :focus tout court, qui afficherait le contour meme au clic (ce qui est visuellement genant). outline : dessine un contour AUTOUR de l'element (contrairement a border qui fait partie de l'element et peut decaler la mise en page). outline-offset : espace entre l'element et le contour (2px d'air). IMPORTANT : ne JAMAIS supprimer les indicateurs de focus sans les remplacer. C'est essentiel pour les personnes qui ne peuvent pas utiliser une souris. */ a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- IMAGES ---------- max-width: 100% : l'image ne depassera jamais de son conteneur. height: auto : la hauteur s'ajuste proportionnellement (pas de deformation). display: block : supprime l'espace fantome sous les images (par defaut, les images sont "inline" et laissent un petit espace en bas a cause de la ligne de base du texte — la "baseline"). */ img { max-width: 100%; height: auto; display: block; } /* On supprime les puces/numeros des listes car on les utilise souvent pour la navigation ou des layouts, pas comme de vraies listes a puces. */ ul, ol { list-style: none; } /* ---------- BOUTONS ---------- On "neutralise" les styles par defaut des boutons pour les re-styler nous-memes. cursor: pointer affiche la main au survol. font-family/size/color: inherit signifie "utilise la meme valeur que l'element parent" — sinon les boutons utilisent une police systeme. */ button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; } /* Meme logique d'accessibilite clavier que pour les liens (voir ci-dessus). */ button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ========================================================================== 5. UTILITAIRE "SCREEN READER ONLY" — Accessibilite ========================================================================== LA CLASSE .u-sr-only (Screen Reader Only) : Cette classe rend un element INVISIBLE visuellement, mais il reste lisible par les lecteurs d'ecran (logiciels utilises par les personnes aveugles ou malvoyantes, comme NVDA, JAWS, ou VoiceOver). POURQUOI NE PAS UTILISER display: none ? Parce que display: none cache l'element COMPLETEMENT — meme pour les lecteurs d'ecran. Or, on veut que le texte soit lu a voix haute mais pas affiche visuellement. LA TECHNIQUE DU "CLIP" : C'est une technique classique d'accessibilite. Voici comment elle fonctionne : position: absolute — Sort l'element du flux normal de la page width: 1px; height: 1px — Reduit l'element a un pixel (quasi invisible) padding: 0; margin: -1px — Supprime tout espacement overflow: hidden — Cache tout ce qui depasse du pixel clip: rect(0, 0, 0, 0) — Decoupe l'element en un rectangle de 0x0 pixel (une vieille methode encore necessaire pour certains navigateurs) white-space: nowrap — Empeche le texte de revenir a la ligne border: 0 — Supprime toute bordure Le resultat : l'element existe dans le DOM (le code HTML), les lecteurs d'ecran le trouvent et le lisent, mais visuellement il est invisible. ========================================================================== */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- VARIANTE FOCUSABLE ---------- .u-sr-only--focusable : meme principe, SAUF que quand l'element recoit le focus (navigation au clavier avec Tab), il redevient visible. Cas d'utilisation : le lien "Aller au contenu principal" (skip link) en haut de page. Il est cache visuellement, mais quand un utilisateur au clavier appuie sur Tab, le lien apparait en haut de l'ecran. C'est une obligation d'accessibilite (WCAG) tres courante. position: fixed; top: 0; left: 0 — Le place en haut a gauche de l'ecran z-index: 10000 — S'assure qu'il s'affiche AU-DESSUS de tout le reste Les autres proprietes (width: auto, clip: auto, etc.) annulent les restrictions de .u-sr-only pour rendre l'element a nouveau visible. */ .u-sr-only--focusable:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; padding: 0.75rem 1.5rem; margin: 0; overflow: visible; clip: auto; white-space: normal; background-color: var(--accent); color: var(--text-on-accent); font-weight: 600; z-index: 10000; }