/* ============================================================ PORTFOLIO — BENJAMIN CODONER Feuille de style principale. Ce fichier est lu de haut en bas par le navigateur. On commence donc par les VARIABLES : les valeurs de base (couleurs, tailles, espacements) écrites une seule fois, réutilisées partout ensuite. Pourquoi des variables ? Le jour où tu veux changer le doré, tu modifies UNE ligne ici au lieu de chercher la couleur dans quarante endroits du fichier. ============================================================ */ /* ------------------------------------------------------------ :root C'est l'élément tout en haut du document (la balise ). Une variable déclarée ici est visible par TOUT le reste de la page : c'est l'endroit standard pour les réglages globaux. Une variable CSS commence obligatoirement par deux tirets : --nom. On la relit plus loin avec var(--nom). ------------------------------------------------------------ */ :root { /* ---------- Couleurs ---------- Toutes en hexadécimal (#RRGGBB) : rouge, vert, bleu, de 00 à ff. Fond sombre + accent doré, comme décidé. */ /* Le fond général. Ce n'est PAS du noir pur (#000000) : du texte clair sur noir pur vibre et fatigue les yeux. Un gris très foncé est plus doux et met mieux tes photos en valeur — une image posée sur du noir pur se fond dedans, on ne voit plus ses limites. */ --couleur-fond: #121110; /* Une seconde teinte de fond, à peine plus claire, pour détacher un bloc du reste (l'en-tête, le pied de page) sans tracer de bordure. */ --couleur-fond-clair: #1c1a18; /* Le texte courant. Blanc cassé légèrement chaud, pas #ffffff : même raison que pour le fond, on évite le contraste maximal. */ --couleur-texte: #ece7e1; /* Texte secondaire : légendes de photos, date du pied de page. Plus gris = le lecteur comprend tout de suite que c'est moins important. Il reste assez clair pour être lisible (ne descends pas plus bas). */ --couleur-texte-doux: #a29a92; /* L'accent doré. Sert aux liens, au survol, aux petits détails. Une seule couleur d'accent sur tout le site : c'est ce qui fait qu'un site a l'air tenu plutôt que bricolé. */ --couleur-accent: #d9a441; /* La même en plus clair, pour le survol des liens. Le survol doit éclaircir, pas changer de couleur. */ --couleur-accent-clair: #f0bf63; /* Traits de séparation. Très discret : une bordure qui se voit trop découpe la page au lieu de l'organiser. */ --couleur-bordure: #2e2b28; /* ---------- Typographie ---------- Aucune police téléchargée : on utilise celles déjà installées sur la machine du visiteur. C'est instantané et ça ne casse jamais. */ /* Une « pile » de polices : le navigateur essaie la première, et si elle n'existe pas sur l'appareil, il passe à la suivante. system-ui = « la police de l'interface du système », donc Segoe UI sur Windows, San Francisco sur Mac, Roboto sur Android. sans-serif en dernier = filet de sécurité. */ --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Les tailles sont en rem. 1rem = la taille de texte réglée dans le navigateur du visiteur, 16px par défaut. L'intérêt : si quelqu'un a augmenté cette taille parce qu'il voit mal, tout ton site grandit avec. Avec des px, tu écrases son réglage. */ /* Texte secondaire : pied de page, mentions. 16px par défaut. */ --texte-s: 1rem; /* Le corps de texte. 1.1875rem = 19px : dans la fourchette 18-20 px que tu as fixée. C'est la taille la plus importante du site. */ --texte-base: 1.1875rem; /* Les phrases d'accroche de la section d'accueil : 22px. */ --texte-m: 1.375rem; /* Les titres de section (

Travaux, À propos, Contact). clamp() prend trois valeurs : minimum, taille idéale, maximum. La valeur du milieu est en vw — 1vw = 1 % de la largeur de la fenêtre. Donc le titre grandit tout seul avec l'écran, mais jamais en dessous de 1.75rem sur un téléphone ni au-dessus de 2.25rem sur un grand écran. Une seule ligne remplace ici deux ou trois media queries. / --texte-l: clamp(1.75rem, 3vw, 2.25rem); / Ton nom, le

. Même principe, amplitude plus large. / --texte-xl: clamp(2.25rem, 5vw, 3.25rem); / Interlignes = l'espace entre deux lignes d'un même paragraphe. Valeur SANS unité : c'est un multiplicateur de la taille du texte, donc l'interligne s'ajuste automatiquement à chaque taille. 1.6 pour le texte courant : de l'air, l'œil retrouve la ligne suivante. / --interligne-texte: 1.6; / 1.15 pour les titres : un gros texte a besoin de moins d'écart, sinon ses lignes se désolidarisent et on ne lit plus un titre mais deux morceaux de phrase. / --interligne-titre: 1.15; / ---------- Espacements ---------- Une échelle : au lieu de choisir 13px ici et 27px là au feeling, on pioche toujours dans cette liste. C'est ce qui donne un rythme régulier à la page. En rem, pour les mêmes raisons que les textes. / --espace-xs: 0.5rem; / 8px — entre une image et sa légende / --espace-s: 1rem; / 16px — entre deux paragraphes / --espace-m: 1.5rem; / 24px — marges intérieures d'un bloc / --espace-l: 3rem; / 48px — entre un titre et son contenu / --espace-xl: 6rem; / 96px — entre deux sections. Généreux exprès : le vide est ce qui sépare les sections, pas besoin de lignes de séparation. / / ---------- Largeurs ---------- / / Largeur maximale du site. Au-delà, le contenu arrête de s'étirer et reste centré : sur un écran de 27 pouces, une galerie pleine largeur devient impossible à parcourir du regard. / --largeur-max: 72rem; / ≈ 1152px / / Largeur maximale d'un bloc de TEXTE, plus étroite. Règle de typographie : au-delà de 65-75 caractères par ligne, l'œil se perd en revenant à la ligne. 38rem donne à peu près ça. / --largeur-texte: 38rem; / ≈ 608px / / Hauteur de l'en-tête. Ce n'est pas une mesure approximative : on FORCE l'en-tête à faire exactement cette hauteur (plus bas, avec min-height). L'accueil peut alors occuper tout le reste de l'écran au pixel près, avec calc(100svh - cette valeur). Sans ça, la colonne de photos dépasserait par le bas de la hauteur du bandeau, ce qui a toujours l'air d'un accident. / --hauteur-entete: 5.5rem; / ≈ 88px / / ---------- Animation ---------- Durée unique pour toutes les transitions (survol des liens, etc.). La même partout = le site paraît cohérent. 200ms : assez pour qu'on perçoive le mouvement, assez court pour ne pas donner l'impression que le site traîne. On branchera le respect de prefers-reduced-motion plus tard. / --duree-transition: 200ms; / ---------- Une seule ligne qui n'est pas une variable ---------- color-scheme prévient le navigateur : « cette page est sombre ». Il adapte alors ce que TON CSS ne contrôle pas — la barre de défilement, les menus déroulants, la zone au-delà du haut de page quand on tire l'écran sur mobile. Sans elle, tu obtiens une barre de défilement blanche sur un site noir. / color-scheme: dark; } / ============================================================ REMISE À ZÉRO Un navigateur applique ses propres styles avant même que ton CSS n'arrive : des marges autour des titres, une façon de calculer les largeurs. Ces réglages datent des années 90 et ne sont pas les mêmes d'un navigateur à l'autre. On en neutralise deux, les plus gênants. Pas plus : une remise à zéro trop large t'oblige ensuite à tout réécrire à la main. ============================================================ / / ------------------------------------------------------------ Règle 1 — la façon de calculer les largeurs. Le sélecteur * veut dire « tous les éléments ». ::before et ::after visent en plus les deux pseudo-éléments, des boîtes que le CSS peut créer avant et après un élément. Tu n'en utilises aucun pour l'instant ; on les inclut parce que sinon ils échapperaient à la règle le jour où tu en ajoutes un. box-sizing décide de ce que veut dire « largeur ». Par défaut (content-box), une boîte en width: 300px avec 20px de marge intérieure de chaque côté occupe en réalité 340px à l'écran : le navigateur ajoute la marge intérieure PAR-DESSUS les 300px. Résultat : tu demandes 50 % de large, tu obtiens plus que la moitié, et deux blocs côte à côte ne tiennent plus sur la ligne. Avec border-box, width: 300px veut dire 300px à l'écran, marge intérieure et bordure comprises — c'est le contenu qui se rétrécit pour leur faire de la place. C'est ce à quoi on s'attend intuitivement, et c'est ce qui rend les mises en page prévisibles. ------------------------------------------------------------ / , ::before, ::after { box-sizing: border-box; } /* ------------------------------------------------------------ Règle 2 — supprimer les marges par défaut. Le navigateur met de l'espace autour des titres, des paragraphes et des listes tout seul. Le problème n'est pas qu'il y ait de l'espace, c'est que tu ne l'as pas choisi : chaque élément a sa propre valeur, et elles s'additionnent ou se chevauchent selon des règles difficiles à prévoir. On repart de zéro pour replacer ensuite ces espaces nous-mêmes, avec l'échelle --espace-* définie plus haut. On liste les éléments un par un plutôt que d'écrire * { margin: 0 }. Ici la liste correspond exactement à ce qui existe dans ton index.html : si tu ajoutes un

plus tard, pense à l'ajouter ici. ------------------------------------------------------------ / body, h1, h2, p, figure, ul { margin: 0; } / ============================================================ STYLES DE BASE Jusqu'ici on a déclaré des variables et nettoyé les réglages du navigateur — mais aucune variable n'a encore servi. C'est ce bloc qui les branche : après lui, le site est enfin sombre. ============================================================ / / ------------------------------------------------------------ Le corps de la page. Les règles posées sur descendent automatiquement dans tout ce qu'il contient : on écrit la police et la couleur du texte UNE fois ici au lieu de les répéter sur chaque paragraphe. C'est le mécanisme d'héritage du CSS, et c'est pour ça qu'on commence ici. ------------------------------------------------------------ / body { background-color: var(--couleur-fond); color: var(--couleur-texte); font-family: var(--police); font-size: var(--texte-base); line-height: var(--interligne-texte); / Lisse le rendu des polices sur Mac. Sans cette ligne, du texte clair sur fond sombre apparaît plus gras qu'il ne devrait : les lettres "bavent" légèrement. C'est le seul endroit où on en a besoin. / -webkit-font-smoothing: antialiased; / Autorise la coupure d'un mot trop long pour la ligne. Sans elle, ton adresse e-mail est un seul « mot » de 28 caractères qu'aucun navigateur n'a le droit de couper : il la laisse dépasser de l'écran, ce qui crée une barre de défilement horizontale sur toute la page. Un site qui glisse latéralement sur téléphone donne immédiatement une impression de négligence. break-word ne coupe QUE les mots qui ne tiennent pas. Le texte courant n'est pas affecté. / overflow-wrap: break-word; } / ------------------------------------------------------------ Les images. Trois lignes, trois problèmes réglés. Elles valent pour TOUTES les images du site, donc on ne s'en occupera plus ensuite. ------------------------------------------------------------ / img { / Une photo fait souvent 1600px de large. Sur un téléphone de 390px, elle dépasserait de l'écran et créerait une barre de défilement horizontale. max-width: 100% veut dire « jamais plus large que le bloc qui te contient » : l'image se réduit toute seule. / max-width: 100%; / Indispensable en duo avec la ligne du dessus. Ton HTML donne à chaque image un width et un height fixes (1600 × 1067). Si la largeur se réduit mais que la hauteur reste bloquée à 1067, l'image s'écrase. height: auto rend la hauteur libre : elle suit la largeur et les proportions sont conservées. / height: auto; / Une image est par défaut traitée comme une lettre dans une ligne de texte, ce qui laisse sous elle un espace de 3 ou 4px — la place réservée aux jambages des lettres (le pied du p, du g). En bloc, ce fantôme d'espace disparaît. / display: block; } / ------------------------------------------------------------ Les liens. Une seule couleur d'accent sur tout le site. Le survol éclaircit au lieu de changer de teinte : c'est ce qui donne l'impression d'un site tenu plutôt que bricolé. ------------------------------------------------------------ / a { color: var(--couleur-accent); / On garde le soulignement (le supprimer rend les liens difficiles à repérer pour beaucoup de gens), mais on le décale de 3px pour qu'il ne traverse plus le bas des lettres. Plus lisible, tout aussi clair. / text-underline-offset: 3px; / La transition ne s'écrit PAS sur :hover mais ici, sur l'état normal. Écrite ici, elle joue dans les deux sens : à l'arrivée de la souris et à son départ. Sur :hover, le retour serait brutal. / transition: color var(--duree-transition); } a:hover { color: var(--couleur-accent-clair); } / :focus-visible = le contour qui montre où on se trouve quand on navigue à la touche Tabulation. On utilise :focus-visible et non :focus parce que le navigateur réserve alors ce contour au clavier : un clic de souris ne le déclenche pas. On a le confort du clavier sans le contour disgracieux qui apparaît à chaque clic. Ne supprime jamais ce contour sans le remplacer : sans lui, naviguer au clavier revient à chercher son curseur dans le noir. / a:focus-visible { outline: 2px solid var(--couleur-accent-clair); outline-offset: 3px; } / ------------------------------------------------------------ Les titres. On ne règle ici que la taille et l'interligne. Les marges autour d'eux sont posées section par section, avec l'échelle --espace-. ------------------------------------------------------------ / h1, h2 { line-height: var(--interligne-titre); /* Resserre légèrement l'espace entre les lettres. À grande taille, un titre paraît lâche avec l'espacement par défaut, qui est calculé pour du texte courant. Valeur négative minuscule : on la sent, on ne la voit pas. / letter-spacing: -0.01em; } h1 { font-size: var(--texte-xl); / Un blanc pur réservé au nom : c'est le seul élément de la page qui a le droit au contraste maximal, parce qu'il ne se lit pas, il se reconnaît d'un coup d'œil. / font-weight: 600; } h2 { font-size: var(--texte-l); font-weight: 500; } / ------------------------------------------------------------ La largeur du contenu. Trois éléments partagent la même règle : l'en-tête, chaque section et le pied de page. Chacun s'étire jusqu'à --largeur-max puis se centre, et garde toujours une marge sur les côtés. #accueil fera exception (il occupera toute la largeur de l'écran) : on le traitera dans son propre bloc. ------------------------------------------------------------ / header, main > section, footer { max-width: var(--largeur-max); / margin-inline = les marges gauche et droite en une seule propriété. auto des deux côtés = le navigateur partage l'espace restant en deux parts égales, donc le bloc se centre. / margin-inline: auto; / La marge INTÉRIEURE, elle, ne sert pas à centrer : elle empêche le texte de coller au bord de l'écran sur téléphone. Sans elle, les lettres touchent la tranche du téléphone. / padding-inline: var(--espace-m); } / L'espace entre deux sections. Le sélecteur « + » veut dire « la section qui suit immédiatement une autre section » : la toute première n'est donc pas concernée, et on évite un vide en haut de page. C'est ce vide généreux qui sépare les sections — pas des traits. / main > section + section { margin-block-start: var(--espace-xl); } / ------------------------------------------------------------ L'en-tête. Volontairement PAS collant (position: sticky). Un bandeau collant mange 60 à 70px de hauteur en permanence sur téléphone et vient se poser par-dessus tes photos dès qu'on fait défiler. Sur un site de photographe, c'est exactement l'élément qui ne se justifie pas. ------------------------------------------------------------ / header { / flex = ranger les enfants sur une ligne. Ici : le nom, puis la nav. / display: flex; / Les cale sur la même ligne de base visuelle, quelles que soient leurs hauteurs respectives. / align-items: center; / Si la fenêtre devient trop étroite pour tenir les deux côte à côte, la nav passe à la ligne au lieu d'être compressée. / flex-wrap: wrap; gap: var(--espace-s); / On impose la hauteur au lieu de la laisser dépendre du contenu. C'est ce qui permet à l'accueil, juste en dessous, de calculer exactement la hauteur qu'il lui reste. / min-height: var(--hauteur-entete); } / Pousse la navigation vers la droite. Une marge « auto » absorbe tout l'espace disponible : elle agit comme un ressort placé entre le nom et la nav. On préfère ça à justify-content sur le parent, parce que la règle reste vraie même quand l'en-tête ne contient plus qu'un élément. / header nav { margin-inline-start: auto; } header nav ul { / Supprime les puces. Cette liste est une liste pour le SENS (un lecteur d'écran annonce « liste de 3 éléments », ce qui est utile) mais on n'a aucune raison d'en montrer les points. / list-style: none; / Le navigateur décale les listes vers la droite pour laisser la place aux puces qu'on vient de retirer. C'est un padding, pas une margin : la remise à zéro plus haut ne l'a donc pas enlevé. / padding: 0; display: flex; flex-wrap: wrap; gap: var(--espace-xs); } / Des zones cliquables généreuses. Le texte d'un lien fait environ 20px de haut : c'est trop petit pour un doigt, qui vise dans les 44px. Le padding agrandit la zone sensible SANS grossir le texte. inline-block est nécessaire : sur un lien resté en ligne, le padding vertical s'affiche mais n'agrandit pas réellement la zone cliquable. / header nav a { display: inline-block; padding: var(--espace-xs) var(--espace-s); / La nav est une commande, pas du texte à lire : le soulignement permanent l'alourdit. On le rend au survol et au focus, pour que le lien reste identifiable au moment où on le vise. / text-decoration: none; } header nav a:hover, header nav a:focus-visible { text-decoration: underline; } / ============================================================ L'ACCUEIL L'écran coupé en deux : le texte à gauche, la colonne de photos qui défile à droite. ============================================================ / / ------------------------------------------------------------ La section elle-même. ------------------------------------------------------------ / #accueil { / Les deux premières lignes ANNULENT la règle de largeur écrite plus haut pour header / section / footer. L'accueil est la seule section qui va d'un bord à l'autre de l'écran : sans ça, la colonne de photos s'arrêterait à 1152px et flotterait au milieu du vide. / max-width: none; padding-inline: 0; / La hauteur restante sous l'en-tête, exactement (voir --hauteur-entete). height et NON min-height : c'est important. Une hauteur minimale n'est qu'un plancher, la section reste libre de grandir. Or la colonne de droite contient une piste de près de 19 000px : la rangée s'étirait donc sur 19 000px, et le texte de gauche, centré verticalement dans cette rangée, se retrouvait très loin sous l'écran. Une hauteur ferme referme le piège. svh et non vh : sur téléphone, 100vh vaut la hauteur de l'écran SANS la barre d'adresse. Comme celle-ci est visible à l'arrivée, 100vh dépasse de l'écran et le bas de la page est coupé. svh (small viewport height) prend la hauteur la plus petite, celle où la barre est affichée : rien ne dépasse jamais. / height: calc(100svh - var(--hauteur-entete)); display: grid; / Deux colonnes. L'unité fr partage l'espace disponible : avec 1.15fr et 1fr, la colonne de texte reçoit 15% de plus que celle des photos. Le texte a besoin de respirer, la colonne d'images gagne à rester étroite — une photo trop large dans un bandeau vertical, on n'en voit plus le sujet. / grid-template-columns: 1.15fr 1fr; / Une seule rangée, qui vaut exactement la hauteur de la section. Sans cette ligne, la rangée serait dimensionnée « au contenu » et reprendrait la hauteur de la piste malgré le height ci-dessus. / grid-template-rows: 100%; / Les deux colonnes font toute la hauteur de la rangée. C'est ce qui donne à la colonne de photos sa pleine hauteur ; le texte, lui, sera recentré individuellement juste en dessous. / align-items: stretch; / Indispensable : la piste de photos est bien plus haute que l'écran. Sans cette ligne, elle dépasserait et créerait une immense barre de défilement. C'est ce qui transforme la colonne en fenêtre. / overflow: hidden; } / ------------------------------------------------------------ Colonne de gauche : le texte. ------------------------------------------------------------ / .accueil-texte { / Recentre verticalement CE bloc seul, sans toucher à la colonne voisine qui doit rester étirée. / align-self: center; / La marge intérieure que la section n'a plus. clamp() l'adapte à la largeur de l'écran : jamais moins de 24px (le texte ne colle pas au bord), jamais plus de 96px (au-delà, on pousse le texte trop loin du centre). Entre les deux, elle suit la fenêtre. / padding-inline: clamp(var(--espace-m), 5vw, var(--espace-xl)); } .accueil-texte h1 { margin-block-end: var(--espace-m); } / La phrase qui te qualifie : plus grande, en pleine couleur. / .accroche { font-size: var(--texte-m); max-width: var(--largeur-texte); } / La phrase qui te distingue : taille normale, gris plus doux. La hiérarchie se lit d'un coup d'œil, sans avoir à lire les mots. / .accueil-precision { margin-block-start: var(--espace-s); color: var(--couleur-texte-doux); max-width: var(--largeur-texte); } / ------------------------------------------------------------ Colonne de droite : le carrousel. La « fenêtre » à travers laquelle on voit défiler la piste. ------------------------------------------------------------ / .carrousel { overflow: hidden; / Sécurité du même ordre que le grid-template-rows plus haut. Un élément de grille refuse par défaut de devenir plus petit que son contenu ; avec une piste de 19 000px, ça suffirait à rouvrir le piège. min-height: 0 lève cette protection, ici indésirable. / min-height: 0; / Un masque en dégradé. mask-image ne peint pas une couleur : il décide de ce qui est VISIBLE. Le noir garde, le transparent efface. Ici : effacé en haut, opaque du 12% au 88%, effacé en bas. Les photos entrent et sortent donc en fondu au lieu d'être tranchées net par le bord. Sans lui, on verrait clairement une image coupée en deux en haut et en bas de la colonne. La ligne -webkit- est la même règle pour Safari, qui a besoin du préfixe. On écrit toujours la version préfixée AVANT la normale. / -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); } / ------------------------------------------------------------ La piste : le ruban qui contient les deux copies de la liste. C'est elle qu'on déplace, pas les images. ------------------------------------------------------------ / .carrousel-piste { animation: defilement-carrousel 50s linear infinite; } / On déplace la piste vers le haut de la MOITIÉ de sa propre hauteur. Comme elle contient exactement deux copies identiques, la moitié vaut exactement une copie : à la fin de l'animation, la seconde copie occupe pile la position qu'occupait la première au départ. Le retour brutal à zéro est donc invisible. linear et non ease : une accélération au départ et un freinage à l'arrivée se verraient à chaque tour. Un défilement continu doit être d'une régularité parfaite. 50s pour un tour complet, volontairement lent. C'est ce qui sépare un portfolio d'un bandeau publicitaire. / @keyframes defilement-carrousel { from { transform: translateY(0); } to { transform: translateY(-50%); } } / ------------------------------------------------------------ Les deux listes. Aucun espacement entre les photos : elles se touchent et forment un ruban continu. C'est un choix esthétique, mais il a un effet de bord très utile — sans espace, il n'y a pas d'espace à compter faux. Si tu veux remettre de l'air entre les images un jour, retiens ceci : il faudra une margin-block-end sur CHAQUE image, la dernière comprise, et surtout pas un gap. Douze images séparées par gap, ça fait onze espaces et non douze : la piste mesurerait alors une demi-espace de moins que le double d'une copie, translateY(-50%) ne tomberait plus juste, et l'image sursauterait à chaque tour. display: flex garde la liste à l'abri d'un autre piège du même genre : dans un bloc normal, la marge de la dernière image s'échapperait hors de la liste (fusion des marges) et fausserait la hauteur. Un conteneur flex ne fusionne jamais les marges de ses enfants. ------------------------------------------------------------ / .carrousel-liste { list-style: none; padding: 0; display: flex; flex-direction: column; } .carrousel-liste img { width: 100%; } / Le lien enveloppe l'image : en bloc, il épouse exactement ses dimensions. En ligne, il laisserait dépasser quelques pixels. / .carrousel-liste a { display: block; } / Le contour de focus est dessiné VERS L'INTÉRIEUR (offset négatif). Avec l'offset positif habituel, il serait tracé en dehors de l'image et le overflow: hidden de la colonne le couperait : on ne verrait plus où on se trouve au clavier. / .carrousel-liste a:focus-visible { outline: 2px solid var(--couleur-accent-clair); outline-offset: -4px; } / ------------------------------------------------------------ Mettre le défilement en pause. Une animation qui démarre seule et ne s'arrête jamais doit pouvoir être stoppée — c'est une règle d'accessibilité, pas un confort. :hover couvre la souris. :focus-within veut dire « un élément situé à l'intérieur a le focus » : il couvre le clavier, et c'est pour ça que les images du carrousel sont des liens. Sans eux, la touche Tab n'entrerait jamais dans la colonne et un utilisateur au clavier n'aurait aucun moyen d'arrêter le mouvement. animation-play-state met en pause SUR PLACE, sans revenir au début. ------------------------------------------------------------ / .carrousel:hover .carrousel-piste, .carrousel:focus-within .carrousel-piste { animation-play-state: paused; } / ------------------------------------------------------------ Mouvement réduit. Certaines personnes règlent leur système sur « réduire les animations » : troubles vestibulaires, migraines, épilepsie. Ce réglage n'est pas une préférence esthétique, c'est un besoin médical. Le navigateur nous le transmet, on le respecte. On ne se contente pas d'arrêter l'animation : on rend la colonne défilable à la main, et on supprime la copie décorative — sinon la personne verrait ses six photos deux fois de suite en faisant défiler, ce qui n'aurait aucun sens. ------------------------------------------------------------ / @media (prefers-reduced-motion: reduce) { .carrousel-piste { animation: none; } .carrousel-liste[aria-hidden="true"] { display: none; } .carrousel { overflow-y: auto; } } / ------------------------------------------------------------ L'accueil sur téléphone. Deux colonnes ne tiennent pas sur 390px de large : le texte serait écrasé et les photos réduites à une bande inutilisable. On change donc de principe plutôt que de rétrécir : le carrousel quitte la grille, passe DERRIÈRE le texte en occupant tout l'écran, et un voile sombre s'intercale entre les deux pour que le nom reste lisible. 45rem ≈ 720px. On ne raisonne pas en « taille de téléphone » mais en largeur à partir de laquelle la mise en page cesse de fonctionner : c'est la seule mesure qui ne se périme pas avec les nouveaux appareils. ------------------------------------------------------------ / @media (max-width: 45rem) { #accueil { / Une seule colonne : il ne reste que le texte dans la grille, puisque le carrousel va en sortir. / grid-template-columns: 1fr; / Indispensable : un élément en position: absolute se cale sur son ancêtre positionné le plus proche. Sans cette ligne, le carrousel se calerait sur la page entière au lieu de la section. / position: relative; / On repasse de height à min-height, et c'est sans danger ici : le carrousel sort de la grille (position: absolute), il ne peut donc plus étirer la rangée comme il le faisait sur grand écran. L'intérêt : si la navigation venait à passer sur deux lignes sur un écran très étroit, l'en-tête grandirait et une hauteur figée rognerait le bas de la section. Avec min-height, la mise en page cède proprement au lieu de casser. / height: auto; min-height: calc(100svh - var(--hauteur-entete)); } / On resserre la navigation. Les trois liens mesurent 328px à eux seuls : sur un écran de 390px il manque 2px pour les tenir sur une ligne, et la nav passe sur deux lignes — ce qui fait grandir l'en-tête et pousse l'accueil sous la ligne de flottaison. On réduit la marge HORIZONTALE seulement. La marge verticale, elle, ne bouge pas : c'est elle qui donne au doigt une cible confortable, et c'est sur téléphone qu'elle compte le plus. / header nav a { padding-inline: var(--espace-xs); } header nav ul { gap: 0; } .carrousel { / inset: 0 est l'écriture courte de haut/droite/bas/gauche à zéro : l'élément s'étire jusqu'aux quatre bords de la section. / position: absolute; inset: 0; z-index: 0; } / Le voile. ::before fabrique une boîte qui n'existe pas dans le HTML — c'est exactement l'usage prévu : un élément purement décoratif n'a rien à faire dans le contenu. content: "" est obligatoire, même vide : sans lui le pseudo-élément n'est pas créé du tout. 0.71, c'est LE nombre à régler si le texte te paraît trop ou trop peu lisible. Plus haut, le voile s'épaissit et tes photos disparaissent ; plus bas, on les voit mieux mais le nom commence à se battre avec elles. Ne descends pas sous 0.63. C'est le seuil calculé pour le pire cas imaginable — une photo entièrement blanche derrière le texte : le contraste y tombe pile sur le minimum exigé de 4.5:1. Au-dessus de 0.63 tu es tranquille quelles que soient tes images. / #accueil::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: rgba(18, 17, 16, 0.71); } / Le texte repasse au-dessus du voile. position: relative sans décalage peut sembler inutile, mais il est nécessaire : z-index n'a aucun effet sur un élément non positionné. C'est la ligne qui rend la suivante opérante. / .accueil-texte { position: relative; z-index: 2; / Le texte occupe maintenant toute la largeur : on lui rend une marge intérieure normale plutôt que celle, généreuse, prévue pour la colonne de gauche. */ padding-inline: var(--espace-m); } }