/* ═══════════════════════════════════════════════════════════════════ alexisdelpy.site — feuille de style commune aux cinq pages SYSTÈME · Toute valeur de la direction artistique est une variable du bloc 01 : couleurs, tailles, graisses et interlignages du texte, espacements, mesures de lecture, icônes, formats d'image, rayons, ombres, durées, profondeurs. Les règles ne font qu'y renvoyer. · Restent écrits en dur, volontairement : - les points de rupture des @media, qui n'acceptent pas de variable. Ils sont en em, et la largeur du contenu (--wrap) en rem : si le visiteur grossit le texte dans les réglages de son navigateur, la page prend la mise en page d'un écran plus étroit au lieu de déborder. Réglage par défaut : 1 em = 16 px. « Dès N px » s'écrit N / 16 em ; « jusqu'à N px », (N + 0,98) / 16 em, soit 0,02 px sous le seuil suivant : aucune largeur ne tombe entre deux règles quand le texte est agrandi. dès 35em 560 · 35.0625em 561 · 40em 640 · 47.5625em 761 48em 768 · 51.25em 820 · 53.75em 860 · 56.25em 900 72.5em 1 160 px jusqu'à 14.99875em 239 · 23.43625em 374 · 26.31125em 420 30.06125em 480 · 34.99875em 559 · 35.06125em 560 39.99875em 639 · 47.56125em 760 · 51.24875em 819 53.74875em 859 · 74.99875em 1 199 px hauteur jusqu'à 31.31125em 500 px ; - le dessin de la ligne (section 18), du parcours (section 09) et de la marque, calés au pixel ; - les filets de 1 px ; - les dimensions propres à un seul composant (pastille de lecture, QR code, couvertures, panneau de la page 404…) ; - les ajustements optiques en em et les techniques d'accessibilité. · Espacement : échelle de 8 pas (--s1 à --s8). · Texte : une échelle de 9 tailles de rapport 1,25 (--t-xs à --t-5xl), que les tailles fluides relient deux à deux (--t-titre-page…). Seul « Santé », dans le haut de page, en sort. · Un seul axe : tout s’aligne sur le bord gauche du .wrap. · Deux filets : --line pour le contour des petites commandes (contraste 3,35:1 sur blanc, exigé par WCAG 1.4.11), --rule pour les cartes et les séparateurs. SEULES VALEURS RÉPÉTÉES HORS D'ICI La balise des cinq pages HTML reprend --blanc (#FFFFFF), et le QR code images/qr-coordonnees.svg porte ses deux couleurs. Ni l'une ni l'autre ne lit les variables CSS : si la palette change, il faut les refaire. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ 00 · POLICES Hébergées localement : Google Fonts transfère l'adresse IP des visiteurs vers les États-Unis, et coûte deux connexions tierces. Une seule famille, Manrope, du texte courant (400) aux titres (800) : deux linéales géométriques voisines ne faisaient pas deux voix. Sous-ensemble latin uniquement, 70 Ko pour les cinq fichiers. ═══════════════════════════════════════════════════════════ */ @font-face{ font-family:"Manrope"; src:url("fonts/manrope-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Manrope"; src:url("fonts/manrope-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Manrope"; src:url("fonts/manrope-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Manrope"; src:url("fonts/manrope-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Manrope"; src:url("fonts/manrope-800.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ═══════════════════════════════════════════════════════════ 01 · JETONS Direction « Sarcelle bloc » : fond clair, le bleu-vert des tenues de bloc opératoire. Le haut de page et la visionneuse (sections 05 et 16), sur fond sarcelle foncé, redéfinissent leurs jetons à partir du thème sombre (--sombre-*). Deux couleurs, deux sens. Le sarcelle est la santé : c’est la ligne principale du site, celle des liens et des boutons. L’ambre est le sport : la seconde ligne, qui rejoint la première. Il ne sert qu’aux tracés, aux pastilles et aux étiquettes du sport. ═══════════════════════════════════════════════════════════ */ :root{ /* — Triplets RVB, pour composer les opacités sans dupliquer la palette. Virgules obligatoires : la syntaxe rgb(var(--x) / a) perd son alpha dans plusieurs moteurs et peint la couleur pleine. — */ --bg-rgb: 255, 255, 255; --accent-rgb: 19, 138, 132; --text-rgb: 23, 40, 42; --voile-rgb: 7, 42, 41; /* voile du haut de page et de la visionneuse */ --sombre-accent-rgb: 142, 216, 207; /* --sombre-accent */ /* — Blanc : la seule fois où il est écrit, les surfaces y renvoient — */ --blanc: #FFFFFF; /* — Sport — */ --sport: #C27F00; /* tracés et pastilles : 3,3:1 sur blanc, 3,06:1 sur --bg-alt */ --sport-texte: #8A5A00; /* étiquettes : 5,9:1 sur blanc, 5,5:1 sur --bg-alt */ --sport-clair: #F2C14E; /* sur fond sarcelle foncé : 8,9:1 */ /* — Papier millimétré sous la ligne — */ --grille: rgba(var(--accent-rgb), .055); --grille-forte: rgba(var(--accent-rgb), .1); /* — Panneau d’orientation (page 404) : texte blanc sur sarcelle — */ --panneau-filet: rgba(var(--bg-rgb), .3); --panneau-survol: rgba(var(--bg-rgb), .1); /* — Surfaces — */ --bg: var(--blanc); --bg-alt: #F1F7F6; --surface: var(--blanc); /* — Filets — */ --line: #7A918E; /* composants : 3,35:1 sur --bg, 3,1:1 sur --bg-alt */ --rule: #DCE8E6; /* séparateurs décoratifs */ /* — Accent — */ --accent: #0B5F5C; /* texte, liens, boutons : 7,5:1 sur blanc */ --accent-soft: #08474A; /* survol : plus foncé, le contraste monte */ --accent-vif: #138A84; /* traits, puces, icônes : 4,2:1, jamais pour du texte */ --accent-wash: rgba(var(--accent-rgb), .10); --on-accent: var(--blanc); /* — Haut de page, si l'image ne charge pas — */ --hero-a: var(--voile); --hero-b: #0F3D3B; --hero-c: #072221; /* — Voile sarcelle du haut de page et de la visionneuse. Les paliers des dégradés sont mesurés : contraste du texte vérifié sur seize images de la vidéo, ciel clair compris. — */ --voile: rgb(var(--voile-rgb)); --voile-bouton: rgba(var(--voile-rgb), .72); --voile-visionneuse: rgba(var(--voile-rgb), .94); --voile-degrade: linear-gradient(180deg, rgba(var(--voile-rgb), .76) 0%, rgba(var(--voile-rgb), .84) 56%, rgba(var(--voile-rgb), .9) 100%); /* téléphone et tablette */ --voile-degrade-moyen: linear-gradient(90deg, rgba(var(--voile-rgb), .93) 0%, rgba(var(--voile-rgb), .9) 46%, rgba(var(--voile-rgb), .7) 66%, rgba(var(--voile-rgb), .42) 100%); /* 900 à 1 199 px */ --voile-degrade-large: linear-gradient(90deg, rgba(var(--voile-rgb), .93) 0%, rgba(var(--voile-rgb), .87) 36%, rgba(var(--voile-rgb), .55) 62%, rgba(var(--voile-rgb), .3) 100%); /* 1 200 px et plus */ /* — Thème sombre : repris tel quel par le haut de page et la visionneuse — */ --sombre-texte: var(--blanc); --sombre-texte-doux: #D3E6E3; --sombre-texte-pale: #A9C4C0; /* visionneuse : 6,5:1 sur --sombre-surface */ --sombre-accent: #8ED8CF; --sombre-accent-doux: #C2EDE7; --sombre-accent-voile: rgba(var(--sombre-accent-rgb), .16); --sombre-encre: var(--hero-c); /* texte des boutons clairs */ --sombre-filet: rgba(var(--bg-rgb), .55); --sombre-surface: var(--hero-b); /* — Pastilles posées sur une image ou sur la page — */ --pastille-fond: rgba(var(--bg-rgb), .72); /* lecture des vidéos */ --pastille-filet: rgba(var(--text-rgb), .42); --flottant-fond: rgba(var(--bg-rgb), .9); /* bouton Haut de page */ /* — Texte — */ --text: #17282A; --text-muted: #44585A; /* 7,5:1 sur blanc */ --text-dim: #5C7072; /* 5,2:1 sur blanc, 4,8:1 sur --bg-alt */ /* — Polices — */ --display: "Manrope", "Segoe UI", system-ui, sans-serif; --body: var(--display); /* — Échelle de texte : rapport 1,25 à partir du texte courant (17 px). Aucune taille hors de l'échelle ; un clamp() relie deux crans. — */ --t-xs: .8125rem; /* 13 · dates, mentions */ --t-sm: .9375rem; /* 15 · légendes, boutons, texte secondaire */ --t-md: 1.0625rem; /* 17 · texte courant */ --t-lg: 1.3125rem; /* 21 · titres de carte, accroches */ --t-xl: 1.6875rem; /* 27 · phrase phare, titres de colonne */ --t-2xl: 2.0625rem; /* 33 · titres de section de Projets */ --t-3xl: 2.625rem; /* 42 · titres de section */ --t-4xl: 3.25rem; /* 52 · « & sport » */ --t-5xl: 4.0625rem; /* 65 · titres de page */ /* — Tailles fluides : chacune passe d'un cran de l'échelle à un autre — */ --t-sante: clamp(3.7rem, 11vw, 7rem); /* seule taille hors échelle */ --t-sport: clamp(var(--t-2xl), 5.4vw, var(--t-4xl)); --t-titre-page: clamp(var(--t-3xl), 6.5vw, var(--t-5xl)); --t-titre-section: clamp(var(--t-xl), 3.8vw, var(--t-3xl)); --t-titre-famille: clamp(var(--t-xl), 3vw, var(--t-2xl)); --t-titre-colonne: clamp(var(--t-lg), 2.9vw, var(--t-xl)); --t-phare: clamp(var(--t-lg), 2.4vw, var(--t-xl)); --t-etape: clamp(var(--t-2xl), 3.6vw, var(--t-3xl)); --t-coordonnee: clamp(var(--t-md), 2.3vw, var(--t-lg)); /* — Graisses : une par fichier de police — */ --fw-normal: 400; --fw-moyen: 500; --fw-semi: 600; --fw-gras: 700; --fw-extra: 800; /* — Interlignages — */ --lh-affiche: .98; /* « Santé » */ --lh-chiffre: 1; /* chiffres de la ligne */ --lh-titre: 1.08; --lh-titre-court: 1.3; /* titres de carte, intertitres, phrase phare */ --lh-ui: 1.4; /* étiquettes, coches, légendes courtes */ --lh-legende: 1.5; /* textes de la ligne */ --lh-texte: 1.6; /* cartes, listes, preuves, accroches */ --lh-lecture: 1.68; /* texte courant */ /* — Approche des lettres et espace entre les mots — */ --ls-affiche: -.03em; --ls-grand: -.02em; --ls-moyen: -.01em; --ls-titre: -.005em; --ls-capitales: .12em; --ws-texte: .05em; /* l'espace de Manrope (0,2 em) serre les mots */ --ws-titre: .1em; --soulignement-ecart: 3px; /* — Échelle d'espacement — */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --gouttiere: 1.25rem; /* marge latérale minimale du contenu */ --hero-marge: clamp(var(--s8), 10vw, 7rem); /* — Mesures de lecture — */ --mesure: 64ch; --mesure-accroche: 46ch; --mesure-phare: 32ch; /* — Formes — */ --wrap: 70rem; /* 1 120 px */ --wrap-sm: 47.5rem; /* 760 px */ --gap: clamp(4rem, 7vw, 6rem); /* 96 px à 1 366 px */ --radius: 4px; --radius-pill: 999px; --radius-rond: 50%; --touch: 44px; /* cible tactile minimale */ --bouton: 52px; /* hauteur des boutons .btn, en pixels entiers */ --check-colonne: 14rem; /* qualités de « Pourquoi le soin » */ --vignette-liste: 8rem; /* vignettes en liste, sur téléphone */ --portrait: 20rem; /* portrait de l'accueil, sur ordinateur */ --portrait-liste: 9rem; /* le même, sur téléphone, à côté de sa légende */ --avatar: clamp(3.5rem, 7vw, 4.5rem); /* portrait rond de la page Contact, 56 à 72 px */ /* — Icônes et points — */ --icone-s: 16px; --icone-m: 18px; --icone-l: 20px; --icone-xl: 22px; --pastille: 9px; /* point de terrain : sommaire, cartes, preuves */ --point-fleche: 8px; /* bout des flèches de lien */ --repere: 12px; /* points du parcours, jonction de la ligne, « Vous êtes ici » */ --trait: 3px; /* trait de couleur : intertitres, page en cours dans le menu */ /* — Formats d'image — */ --format-video: 16 / 9; --format-affiche: 3 / 4; --format-portrait: 4 / 5; /* — Ombres et flous — */ --ombre: 0 12px 28px -14px rgba(var(--text-rgb), .28); /* survol des cartes */ --ombre-menu: 0 18px 24px -18px rgba(var(--text-rgb), .35); /* menu du téléphone */ --ombre-feuille: 0 0 0 1px rgba(var(--text-rgb), .14), 0 6px 12px -8px rgba(var(--text-rgb), .45); /* couvertures des écrits */ --flou: 4px; --flou-fort: 8px; /* — Focus — */ --focus-largeur: 2px; --focus-ecart: 3px; /* — Mouvement — */ --duree: .2s; --duree-lente: .3s; --ease: var(--duree) ease; --ease-slow: var(--duree-lente) ease; /* zoom des vignettes, fondus */ --courbe-trace: cubic-bezier(.45, 0, .25, 1); /* tracé de la ligne */ --appui: translateY(1px); --levee: translateY(-2px); /* — Profondeur — */ --z-haut: 40; --z-sommaire: 45; --z-entete: 50; --z-evitement: 100; /* — Impression : palette claire, appliquée uniquement en @media print — */ --p-bg: var(--blanc); --p-ink: #000; --p-body: #222; --p-mute: #444; } /* Téléphone très étroit (moins de 375 px) : vignettes en liste et portrait un peu plus petits. À 320 px, le texte voisin n'avait que 120 px de large et s'étirait sur une dizaine de lignes. */ @media (max-width:23.43625em){ :root{ --vignette-liste:6.5rem; --portrait-liste:7rem; } } *,*::before,*::after{ box-sizing:border-box; } /* Un élément masqué par l'attribut hidden le reste, même si une règle du site lui donne un display (affiches retirées, boutons Copier, vidéo) */ [hidden]{ display:none !important; } html{ scroll-padding-top:5.5rem; -webkit-text-size-adjust:100%; } /* Défilement doux seulement après un clic sur un lien de la page. À l'arrivée sur une ancre (projets.html#ligue), le saut est immédiat : un défilement doux pendant le chargement s'arrêtait trop haut, sous le sommaire collant. */ html:focus-within{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:var(--t-md); line-height:var(--lh-lecture); /* L'espace de Manrope (0,2 em) serre les mots du texte courant */ word-spacing:var(--ws-texte); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; height:auto; display:block; } video{ max-width:100%; display:block; } ::selection{ background:var(--accent); color:var(--on-accent); } :focus-visible{ outline:var(--focus-largeur) solid var(--accent-soft); outline-offset:var(--focus-ecart); } /* Survol et focus clavier donnent les mêmes effets, en plus de ce contour. Le survol est réservé aux appareils qui ont un vrai pointeur, sous @media (hover:hover) : sur un téléphone, le tap le déclenchait et le laissait collé à l'élément touché. */ /* Visible des lecteurs d'écran seulement — jamais display:none, qui le retirerait aussi de l'arbre d'accessibilité */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* Garde sur une ligne ce qui ne doit pas se couper, comme « 2024-2025 ». Le trait d'union insécable n'existe pas dans les polices du site. En bloc en ligne plutôt qu'en nowrap : le mot passe entier à la ligne suivante, et ne se coupe à son trait d'union que s'il est à lui seul plus large que la colonne (texte très agrandi, écran très étroit), au lieu de déborder. */ .insecable{ display:inline-block; } @media (prefers-reduced-motion: reduce){ html, html:focus-within{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } .wrap{ width:min(100% - 2 * var(--gouttiere), var(--wrap)); margin-inline:auto; } .skip{ position:absolute; left:-9999px; top:0; z-index:var(--z-evitement); background:var(--accent); color:var(--on-accent); padding:var(--s3) var(--s5); font-weight:var(--fw-semi); font-size:var(--t-sm); } .skip:focus{ left:0; } /* ═══════════════════════════════════════════════════════════ 02 · TYPOGRAPHIE ═══════════════════════════════════════════════════════════ */ h1,h2,h3,h4{ font-family:var(--display); font-weight:var(--fw-extra); line-height:var(--lh-titre); letter-spacing:var(--ls-titre); margin:0; text-wrap:balance; } .section-title{ font-size:var(--t-titre-section); margin-bottom:var(--s5); } /* La marque : la ligne du sport rejoint celle de la santé, puis toutes deux continuent ensemble. Elle signe le haut de page (.hero__marque, écrite en clair dans la page), que la ligne développe plus bas, et le logo (#marque, version compacte aux traits plus épais). Nulle part ailleurs : répétée sous chaque titre, une signature devient une puce. Les couleurs passent par des variables, héritées jusque dans le symbole : dans le haut de page, la marque prend d’elle-même ses teintes claires. */ .stroke{ display:block; overflow:visible; } .hero__marque path, #marque path{ fill:none; stroke-linecap:round; } .hero__marque .trait__sante{ stroke:var(--accent-vif); stroke-width:2.5; } .hero__marque .trait__sport{ stroke:var(--sport); stroke-width:2.5; } .hero__marque .trait__tronc{ stroke:var(--accent-vif); stroke-width:4; } /* À l'arrivée, la marque du haut de page se trace une fois : les deux brins partent ensemble, se rejoignent, puis le tronc continue. C'est le geste de la ligne, plus bas, en petit. Mouvement réduit : elle est là d'emblée (les tracés font 1 de long, grâce à pathLength). */ @media (prefers-reduced-motion: no-preference){ .hero__marque path{ stroke-dasharray:1 2; animation:trace .6s var(--courbe-trace) .25s both; } .hero__marque .trait__tronc{ animation-duration:.45s; animation-delay:.85s; } } @keyframes trace{ from{ stroke-dashoffset:1.05; } to{ stroke-dashoffset:0; } } #marque .marque__sante{ stroke:var(--accent-vif); stroke-width:3; } #marque .marque__sport{ stroke:var(--sport); stroke-width:3; } #marque .marque__tronc{ stroke:var(--accent-vif); stroke-width:5; } .lede{ font-size:var(--t-md); color:var(--text-muted); max-width:var(--mesure); margin:0 0 var(--s4); } .lede:last-child{ margin-bottom:0; } .lede--lead{ font-size:var(--t-lg); line-height:var(--lh-texte); color:var(--text); } /* La phrase qui dit pourquoi : elle se lit comme un titre, pas comme une note */ .lede--phare{ font-family:var(--display); font-weight:var(--fw-gras); font-size:var(--t-phare); line-height:var(--lh-titre-court); letter-spacing:var(--ls-moyen); color:var(--text); max-width:var(--mesure-phare); margin-block:var(--s6); } .section-intro{ margin-top:var(--s6); } /* Le sprite SVG ne doit rien occuper dans le flux */ .sprite{ position:absolute; width:0; height:0; overflow:hidden; } /* Soulignement des liens de navigation. Posé sous la ligne de base plutôt qu'au bord de la cible de 44 px, où il flotterait trop loin du texte. */ .nav a:not(.nav-cta)::after, .footer__nav a::after, .to-top::after{ content:""; position:absolute; left:0; right:0; bottom:calc(50% - .62em); height:1px; background:transparent; transition:background var(--ease); } .nav a:not(.nav-cta):focus-visible::after, .footer__nav a:focus-visible::after, .to-top:focus-visible::after{ background:var(--accent); } @media (hover:hover){ .nav a:not(.nav-cta):hover::after, .footer__nav a:hover::after, .to-top:hover::after{ background:var(--accent); } } /* Intertitre : c'est un vrai

, précédé d'un trait de la couleur de son terrain (sarcelle par défaut, ambre pour le sport). Il annonce une grille entière : il doit se lire comme un titre, pas comme une légende. */ .subhead{ display:flex; align-items:flex-start; gap:var(--s3); font-family:var(--display); font-size:var(--t-lg); font-weight:var(--fw-gras); line-height:var(--lh-titre-court); color:var(--text); margin:0 0 var(--s5); } .subhead::before{ content:""; flex:none; width:18px; height:var(--trait); /* Au milieu de la première ligne, même quand le titre en compte deux */ margin-top:calc(.65em - var(--trait) / 2); background:var(--marque, var(--accent-vif)); } /* ═══════════════════════════════════════════════════════════ 04 · EN-TÊTE ═══════════════════════════════════════════════════════════ */ /* Opaque : translucide et flouté, il prenait la teinte de la vidéo sombre (#F0F2F2) puis redevenait blanc, et clignotait au défilement */ .site-header{ position:sticky; top:0; z-index:var(--z-entete); background:var(--bg); border-bottom:1px solid transparent; transition:border-color var(--ease); } .site-header.is-stuck{ border-bottom-color:var(--rule); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding:var(--s3) 0; } .logo{ display:inline-flex; align-items:center; gap:var(--s3); min-height:var(--touch); text-decoration:none; color:var(--text); } /* Le logo est la marque elle-même, en version compacte : deux brins de 3 px qui se rejoignent, puis un tronc de 5 px */ .logo__marque{ display:block; flex:none; width:48px; height:20px; overflow:visible; position:relative; top:2px; } /* le tronc, plus lourd, tirait la marque vers le haut */ /* Manrope en petite taille : un peu d'air entre les mots, sinon « Alexis Delpy » ou « IUT de Lens » paraissent soudés */ h3, h4, .logo__nom{ word-spacing:var(--ws-titre); } /* Le nom en clair à côté du monogramme : « AD » seul ne se lit pas */ .logo__nom{ font-family:var(--display); font-weight:var(--fw-extra); font-size:var(--t-md); letter-spacing:var(--ls-moyen); white-space:nowrap; } .nav{ display:flex; align-items:center; gap:var(--s6); } /* Filet de sécurité : si le texte grossit sans que les points de rupture suivent (feuille de style de l'utilisateur, zoom du texte seul), le menu passe sous le nom au lieu de faire défiler la page en largeur */ @media (min-width:47.5625em){ .site-header .wrap, .nav{ flex-wrap:wrap; } } /* Cible de 44 px, avec un soulignement posé près du texte */ .nav a{ position:relative; display:inline-flex; align-items:center; min-height:var(--touch); font-size:var(--t-sm); font-weight:var(--fw-moyen); color:var(--text); text-decoration:none; transition:color var(--ease); } .nav a:not(.nav-cta):focus-visible{ color:var(--accent-soft); } @media (hover:hover){ .nav a:not(.nav-cta):hover{ color:var(--accent-soft); } } /* Deux tailles de bouton sur le site : 52 px (.btn) et 44 px pour les commandes compactes (en-tête, Copier, sommaire), toujours en 600 */ .nav .nav-cta{ font-weight:var(--fw-semi); border:1px solid var(--accent); border-radius:var(--radius); padding-inline:var(--s4); color:var(--accent); transition:background var(--ease), color var(--ease); } .nav .nav-cta:focus-visible{ background:var(--accent-wash); color:var(--accent-soft); } @media (hover:hover){ .nav .nav-cta:hover{ background:var(--accent-wash); color:var(--accent-soft); } } /* Page en cours : le lien reste allumé et souligné. La couleur ne suffit pas (WCAG 1.4.1) : il faut aussi une forme, ici le soulignement */ .nav a[aria-current="page"]:not(.nav-cta){ color:var(--accent-soft); } .nav a[aria-current="page"]:not(.nav-cta)::after{ background:var(--accent); } .nav .nav-cta[aria-current="page"]{ background:var(--accent-wash); color:var(--accent-soft); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--soulignement-ecart); } .burger{ display:none; background:none; border:0; cursor:pointer; width:var(--touch); height:var(--touch); margin-right:calc(var(--s2) * -1); place-items:center; color:var(--text); } /* Menu ouvert : l'icône devient une croix */ .burger__fermer{ display:none; } .burger[aria-expanded="true"] .burger__ouvrir{ display:none; } .burger[aria-expanded="true"] .burger__fermer{ display:block; } @media (max-width:47.56125em){ .burger{ display:grid; } .nav{ position:absolute; inset:100% 0 auto 0; display:none; flex-direction:column; align-items:stretch; gap:0; background:var(--bg-alt); border-bottom:1px solid var(--rule); box-shadow:var(--ombre-menu); padding:var(--s1) var(--s5) var(--s5); } .nav.is-open{ display:flex; } .nav a{ min-height:var(--bouton); border-bottom:1px solid var(--rule); } .nav a:not(.nav-cta)::after{ display:none; } /* Sans soulignement dans le menu, la page en cours garde une forme : un trait vertical au bord du panneau, comme celui des intertitres */ .nav a[aria-current="page"]:not(.nav-cta)::after{ display:block; top:0; bottom:0; left:calc(var(--s5) * -1); right:auto; width:var(--trait); height:auto; background:var(--accent); } .nav .nav-cta{ margin-top:var(--s4); justify-content:center; border-bottom:1px solid var(--accent); } } /* ═══════════════════════════════════════════════════════════ 05 · HERO ═══════════════════════════════════════════════════════════ */ /* L'arrivée : le haut de page et la bande « En pratique » remplissent ensemble le premier écran, sous l'en-tête (--haut-entete, mesurée par script.js). L'image prend toute la place que la bande lui laisse, et la bande se lit au bas de l'écran. Jamais plus de 60rem : sur un très grand écran, la suite de la page se devine dessous. Le contenu passe avant : s'il est plus haut que l'écran, le haut de page grandit et la bande suit. */ .arrivee{ display:flex; flex-direction:column; min-height:min(calc(100vh - var(--haut-entete, 69px)), 60rem); min-height:min(calc(100svh - var(--haut-entete, 69px)), 60rem); } .arrivee > .hero{ flex:1 0 auto; } .hero{ /* Le haut de page reste sombre, sous un voile sarcelle : il redéfinit ses jetons pour que tout ce qui s'y trouve passe en clair. */ --text: var(--sombre-texte); --text-muted: var(--sombre-texte-doux); --accent: var(--sombre-accent); --accent-soft: var(--sombre-accent-doux); --accent-vif: var(--sombre-accent); --accent-wash: var(--sombre-accent-voile); --on-accent: var(--sombre-encre); --line: var(--sombre-filet); --sport: var(--sport-clair); color:var(--text); position:relative; display:grid; place-items:center; text-align:left; overflow:hidden; /* Des marges qui suivent la hauteur de l'écran : sur un écran peu haut (portable de 1 366 × 768, 657 px visibles), le contenu se resserre pour que la bande « En pratique » se lise dès l'arrivée. Les navigateurs sans svh gardent la ligne du dessus. */ padding-block:var(--s7); padding-block:clamp(var(--s5), 3.5svh, var(--hero-marge)); } .hero__media{ position:absolute; inset:0; overflow:hidden; background: url("images/hero-poster.jpg") 50% 5% / cover no-repeat, linear-gradient(125deg, var(--hero-a), var(--hero-b) 46%, var(--hero-c)); /* L'image fixe en AVIF (16 Ko) ou en WebP (20 Ko) quand le navigateur les lit, au lieu du JPEG (43 Ko), gardé pour les autres */ background-image: image-set(url("images/hero-poster.avif") type("image/avif"), url("images/hero-poster.webp") type("image/webp"), url("images/hero-poster.jpg") type("image/jpeg")), linear-gradient(125deg, var(--hero-a), var(--hero-b) 46%, var(--hero-c)); } .hero__media video{ width:100%; height:100%; object-fit:cover; object-position:50% 5%; display:block; } /* Le voile garantit la lisibilité du titre quelle que soit l'image */ .hero__veil{ position:absolute; inset:0; background:var(--voile-degrade); } /* Sur grand écran, le texte tient la gauche et l'image glisse vers la droite : la personne filmée reste visible, tournée vers le texte. Le voile s'éclaircit à mesure qu'on s'éloigne du texte. */ @media (min-width:56.25em){ .hero__media{ inset:0 -24% 0 0; } .hero__veil{ background:var(--voile-degrade-large); } } /* Écran moyen : le texte occupe plus de largeur, la zone sombre le suit (mesuré sur seize images de la vidéo, ciel clair compris) */ @media (min-width:56.25em) and (max-width:74.99875em){ .hero__veil{ background:var(--voile-degrade-moyen); } } /* Mouvement réduit : le script ne charge pas la vidéo, l'image fixe reste */ @media (prefers-reduced-motion: reduce){ .hero__media video{ display:none; } } .hero__inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; } /* Mécanisme de pause exigé par WCAG 2.2.2 */ .hero__toggle{ position:absolute; z-index:2; right:var(--s5); bottom:var(--s5); display:grid; place-items:center; width:var(--touch); height:var(--touch); background:var(--voile-bouton); border:1px solid var(--line); border-radius:var(--radius-rond); color:var(--text); cursor:pointer; transition:color var(--ease), border-color var(--ease), background var(--ease), transform var(--ease); } /* Survol et focus colorent le bouton ; seul le clic l'enfonce */ @media (hover:hover){ .hero__toggle:hover{ color:var(--accent); border-color:var(--accent); } } .hero__toggle:active{ transform:var(--appui); } .hero__toggle svg{ width:var(--icone-m); height:var(--icone-m); } /* Le contour de focus, clair, passe sur la vidéo là où le voile s'éclaircit : un halo sombre sous lui le garde lisible sur les images claires (WCAG 1.4.11) */ .hero__toggle:focus-visible{ color:var(--accent); border-color:var(--accent); box-shadow:0 0 0 calc(var(--focus-ecart) + var(--focus-largeur) * 2) var(--voile); } /* Sans vidéo affichée, le bouton n'a plus d'objet */ @media (prefers-reduced-motion: reduce){ .hero__toggle{ display:none; } } .hero h1{ margin:0; } /* La hiérarchie dit la priorité : la santé en très grand, le sport à sa suite */ .hero__word{ display:block; font-size:var(--t-sante); line-height:var(--lh-affiche); letter-spacing:var(--ls-affiche); } .hero__word--second{ font-size:var(--t-sport); font-weight:var(--fw-gras); letter-spacing:var(--ls-grand); color:var(--text-muted); margin-top:.12em; } /* Écran peu haut : les intervalles du haut de page se resserrent aussi (3 % de la hauteur visible, 24 px au plus), pour que la bande « En pratique » se lise dès l'arrivée sur un portable de 1 366 × 768 */ .hero__marque{ width:172px; height:24px; margin-top:var(--s5); margin-top:min(var(--s5), 3svh); } .hero__sub{ margin:var(--s5) 0 0; margin-top:min(var(--s5), 3svh); max-width:var(--mesure-accroche); text-wrap:balance; /* quatre lignes de même longueur, pas de fin de phrase isolée */ font-size:var(--t-lg); line-height:var(--lh-lecture); color:var(--text-muted); } .contact__actions{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); } /* Les postes cherchés, sous la phrase : leur intitulé en blanc et en gras, chacun précédé du point de son terrain (sarcelle pour l'hôpital, ambre pour le sport). C'est ce qu'on lit juste après le titre. Chaque intitulé passe entier à la ligne suivante. */ .hero__postes{ margin-top:var(--s5); margin-top:min(var(--s5), 3svh); max-width:40rem; } .hero__postes-titre{ margin:0 0 var(--s2); font-size:var(--t-sm); font-weight:var(--fw-semi); line-height:var(--lh-ui); color:var(--text-muted); } .hero__postes ul{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); list-style:none; margin:0; padding:0; } .hero__postes li{ display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--t-md); font-weight:var(--fw-gras); line-height:var(--lh-ui); color:var(--text); } .hero__postes li::before{ content:""; flex:none; width:var(--pastille); height:var(--pastille); border-radius:var(--radius-rond); background:var(--point, var(--accent-vif)); } .hero__poste--sport{ --point:var(--sport); } .hero__postes-note{ margin:var(--s2) 0 0; font-size:var(--t-sm); line-height:var(--lh-ui); color:var(--text-muted); } /* ── En pratique : la bande juste sous l'image ── Le haut de page ne dit qu'une chose, les postes cherchés. Les conditions et les deux boutons ont leur bande, sur fond clair, alignés sur le même bord gauche ; quand la largeur le permet (dès 1 150 px environ), tout tient sur une ligne et les boutons tiennent la droite. */ .pratique{ background:var(--bg-alt); border-bottom:1px solid var(--rule); padding-block:var(--s5); padding-block:min(var(--s5), 2.5svh); /* plus mince sur un écran peu haut */ } .pratique__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4) var(--s6); } /* Les trois informations, chacune avec son icône, à la taille du texte des boutons : « Disponible immédiatement » en tête, en gras, avec son point, les deux autres en texte secondaire. Chacune passe entière à la ligne suivante ; son texte ne se coupe que s'il est à lui seul plus large que l'écran (texte très agrandi). */ .pratique__infos{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s5); list-style:none; margin:0; padding:0; } .pratique__infos li{ display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--t-sm); font-weight:var(--fw-moyen); line-height:var(--lh-ui); color:var(--text-muted); } .pratique__infos .pratique__statut{ font-weight:var(--fw-gras); color:var(--text); } .pratique__infos svg{ flex:none; width:var(--icone-m); height:var(--icone-m); fill:none; stroke:var(--accent-vif); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Le point du statut, de la taille d'un repère de la ligne, dans une case de la largeur des icônes : les trois textes partent du même bord. À l'arrivée, il bat trois fois, comme « aujourd'hui » sur la ligne, puis se tait. */ .pouls{ flex:none; display:grid; place-items:center; width:var(--icone-m); height:var(--icone-m); } .pouls::before{ content:""; width:var(--repere); height:var(--repere); border-radius:var(--radius-rond); background:var(--accent-vif); } @media (prefers-reduced-motion: no-preference){ .pouls::before{ animation:pouls 1.4s ease-out 1.4s 3; } } @keyframes pouls{ from{ box-shadow:0 0 0 0 rgba(var(--accent-rgb), .45); } to{ box-shadow:0 0 0 14px rgba(var(--accent-rgb), 0); } } .pratique__actions{ display:flex; flex-wrap:wrap; gap:var(--s3); } /* Sur téléphone, la vidéo n'est jamais chargée (voir script.js), donc aucun bouton pause à loger. Le haut de page épouse son contenu, sans remplir l'écran : la bande « En pratique » suit au plus près, ses trois informations empilées, ses boutons sur toute la largeur. */ @media (max-width:35.06125em){ .arrivee{ min-height:0; } .hero{ padding-block:var(--s6); padding-block:clamp(var(--s5), 4svh, var(--s7)); } .hero__sub{ margin-top:var(--s5); font-size:var(--t-md); line-height:var(--lh-texte); } .pratique__infos{ flex-direction:column; align-items:flex-start; gap:var(--s2); } .pratique__actions{ flex:1 1 100%; } /* Boutons pleine largeur : plus d'escalier de formes de largeurs différentes */ .pratique__actions .btn, .contact__actions .btn, .secondary .btn{ flex:1 1 100%; } } /* ═══════════════════════════════════════════════════════════ 07 · BOUTONS Deux variantes. Au survol, seul le fond change : la couleur du texte reste stable, ce qui garantit le contraste. ═══════════════════════════════════════════════════════════ */ .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--bouton); font-family:var(--body); font-size:var(--t-sm); font-weight:var(--fw-semi); padding:0 var(--s6); border-radius:var(--radius); text-decoration:none; border:1px solid var(--accent); transition:background var(--ease), border-color var(--ease), transform var(--ease); } .btn--solid{ background:var(--accent); color:var(--on-accent); } .btn--ghost{ background:transparent; color:var(--accent); } .btn--solid:focus-visible{ background:var(--accent-soft); border-color:var(--accent-soft); } .btn--ghost:focus-visible{ background:var(--accent-wash); } @media (hover:hover){ .btn--solid:hover{ background:var(--accent-soft); border-color:var(--accent-soft); } .btn--ghost:hover{ background:var(--accent-wash); } } .btn:active{ transform:var(--appui); } /* ═══════════════════════════════════════════════════════════ 08 · CARTE Un seul modèle pour tout bloc cliquable ou encadré : projets, vignettes vidéo, affiches, documents. Même bordure, même rayon, même survol. La carte de coordonnées (section 13) reprend la même bordure et le même rayon. Bordure claire (--rule) : le titre de la carte suffit à l'identifier comme lien, le WCAG n'exige pas de contraste pour son contour. Le filet foncé (--line) reste aux commandes : boutons, Copier, sommaire, réseaux. Au survol comme au focus clavier, la carte se soulève et sa bordure passe au sarcelle. ═══════════════════════════════════════════════════════════ */ .project, .video, .shot, .doc{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); text-decoration:none; color:inherit; transition:border-color var(--ease), background var(--ease), transform var(--ease), box-shadow var(--ease); } .project:focus-visible, .shot:focus-visible, .doc:focus-visible{ border-color:var(--accent); transform:var(--levee); box-shadow:var(--ombre); } @media (hover:hover){ .project:hover, .video:hover, .shot:hover, .doc:hover{ border-color:var(--accent); transform:var(--levee); box-shadow:var(--ombre); } } .project:active, .video:active, .shot:active, .doc:active{ transform:translateY(0); } /* ═══════════════════════════════════════════════════════════ 09 · SECTIONS ═══════════════════════════════════════════════════════════ */ .section{ padding-block:var(--gap); } /* Sous le titre d'une page intérieure, qui a déjà sa marge et son filet */ .page-head + .section{ padding-top:var(--s7); } .section--alt, .family--alt{ background:var(--bg-alt); border-block:1px solid var(--rule); } /* — Présentation — */ /* Le visage, puis la vie en dehors du travail. Sur téléphone, le portrait et cette ligne se tiennent côte à côte sous le texte, comme une carte de visite ; sur ordinateur, le portrait occupe la colonne de droite. */ .about{ display:grid; gap:var(--s6) var(--s5); grid-template-columns:minmax(0, var(--portrait-liste)) minmax(0, 1fr); grid-template-areas:"texte texte" "photo hors"; align-items:center; } .about__text{ grid-area:texte; } .about__text .lede:first-of-type{ margin-top:var(--s6); } .about__photo{ grid-area:photo; width:100%; aspect-ratio:var(--format-portrait); object-fit:cover; border-radius:var(--radius); } .about__hors{ grid-area:hors; } .about__hors h3{ font-size:var(--t-md); font-weight:var(--fw-gras); line-height:var(--lh-titre-court); } .about__hors p{ margin:var(--s2) 0 0; max-width:var(--mesure); font-size:var(--t-sm); line-height:var(--lh-texte); color:var(--text-muted); } @media (min-width:56.25em){ .about{ grid-template-columns:minmax(0, 1fr) var(--portrait); grid-template-areas:"texte photo" "hors photo"; column-gap:var(--s8); align-items:start; } } /* Sans portrait (voir script.js), le texte et la ligne personnelle reprennent toute la largeur */ .about.about--solo{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"texte" "hors"; } /* — Deux colonnes — */ .duo{ display:grid; gap:var(--s7); } @media (min-width:56.25em){ .duo{ grid-template-columns:repeat(2,1fr); gap:var(--s8); } .duo--split{ gap:0; } .duo--split > div:first-child{ padding-right:var(--s7); } /* Le filet s'estompe sur son dernier tiers : sans cela il prolonge le vide laissé par la colonne la plus courte. */ .duo--split > div:last-child{ padding-left:var(--s7); background:linear-gradient(to bottom, var(--rule) 0%, var(--rule) 68%, transparent 100%) left / 1px 100% no-repeat; } } /* Le titre « Parcours », puis deux colonnes titrées d'un cran en dessous */ .section-title + .duo{ margin-top:var(--s6); } .duo__titre{ font-size:var(--t-titre-colonne); margin-bottom:var(--s5); } .family--sport{ --marque:var(--sport); } /* Autres réalisations : ni l'hôpital ni la Ligue, le trait reste gris */ #autres{ --marque:var(--line); } /* — Pourquoi le soin : pour chaque qualité, la preuve la plus forte, précédée de son terrain (point sarcelle pour l'hôpital, ambre pour la Ligue), et une seconde quand elle vaut la première. Sur ordinateur, la qualité à gauche, les preuves à droite, l'une sous l'autre. — */ .checklist{ list-style:none; margin:var(--s6) 0 0; padding:0; border-top:1px solid var(--rule); } .check{ display:grid; gap:var(--s2); padding:var(--s5) 0; border-bottom:1px solid var(--rule); } .check h3{ font-size:var(--t-lg); font-weight:var(--fw-gras); line-height:var(--lh-titre-court); } .check p{ margin:0; font-size:var(--t-md); line-height:var(--lh-texte); color:var(--text-muted); } .check__terrain{ display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s1); font-size:var(--t-sm); font-weight:var(--fw-semi); line-height:var(--lh-ui); color:var(--text); } .check__terrain::before{ content:""; flex:none; width:var(--pastille); height:var(--pastille); border-radius:var(--radius-rond); background:var(--point, var(--accent-vif)); } .check__preuve--sport{ --point:var(--sport); } .check__preuve + .check__preuve{ margin-top:var(--s3); } .checklist__suite{ display:flex; flex-wrap:wrap; gap:0 var(--s6); margin:var(--s4) 0 0; } @media (min-width:56.25em){ .checklist{ margin-top:var(--s7); } .check{ grid-template-columns:minmax(0, var(--check-colonne)) minmax(0, 1fr); column-gap:var(--s6); } .check__preuve{ grid-column:2; max-width:var(--mesure); } /* Les liens partent du bord des preuves */ .checklist__suite{ padding-left:calc(var(--check-colonne) + var(--s6)); } } .projects{ display:grid; gap:var(--s5); margin-top:var(--s6); } .project__body p:last-child, .work p{ margin:0; font-size:var(--t-sm); line-height:var(--lh-texte); color:var(--text-muted); } .work p{ margin:0 var(--s5) var(--s5); } .socials{ display:flex; flex-wrap:wrap; gap:var(--s2); margin:0; padding:0; list-style:none; } /* — Projets — */ @media (min-width:51.25em){ .projects{ grid-template-columns:repeat(3,1fr); } } .project{ display:flex; flex-direction:column; overflow:hidden; } /* 16:9 : les vignettes YouTube de 480 et 640 px sont des 4:3 à bandes noires ; à ce format, le rognage tombe exactement sur les bandes */ .project img{ width:100%; aspect-ratio:var(--format-video); object-fit:cover; } .project__body{ padding:var(--s5); } /* Tablette : une vignette pleine largeur faisait 728 × 410 px. La carte passe en ligne, vignette à gauche, posée en retrait comme les couvertures des écrits : le blanc sous la vignette devient une marge, pas un trou. Placée après les règles de base, qui l'emporteraient sinon à spécificité égale. Écran seulement : une page A4 tombe dans cette plage de largeurs, et l'impression garde ses trois colonnes. */ @media screen and (min-width:35em) and (max-width:51.24875em){ .project{ flex-direction:row; } .project img{ width:38%; flex:none; align-self:flex-start; margin:var(--s5) 0 var(--s5) var(--s5); border-radius:var(--radius); } .project__body{ flex:1; min-width:0; } } .project__field{ display:flex; align-items:center; gap:var(--s2); font-family:var(--body); font-size:var(--t-sm); font-weight:var(--fw-semi); color:var(--text-dim); margin:0 0 var(--s2); } .project__field::before{ content:""; flex:none; width:var(--pastille); height:var(--pastille); border-radius:var(--radius-rond); background:var(--point, var(--line)); } /* La couleur du terrain est portée par le point : le sarcelle en texte est réservé à ce qui se clique */ .project--sante .project__field{ --point:var(--accent-vif); } .project--sport .project__field{ --point:var(--sport); } .project h3{ font-size:var(--t-lg); font-weight:var(--fw-gras); margin-bottom:var(--s2); display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); } .project h3::after{ color:var(--accent); } .projects + .suite{ margin-top:var(--s6); } /* — Parcours — */ .entries{ position:relative; margin:var(--s6) 0 0; padding:0 0 0 var(--s6); list-style:none; } /* La ligne du parcours, et un point par étape : sarcelle pour l'hôpital, ambre pour le sport, gris pour le reste, cerclé pour ce qui vient */ .entry{ position:relative; padding-bottom:var(--s5); margin-bottom:var(--s5); border-bottom:1px solid var(--rule); } /* Le segment de ligne qui mène au point suivant : il traverse la marge et s'arrête au dernier point, sans dépasser */ .entry:not(:last-child)::after{ content:""; position:absolute; left:calc(var(--s6) * -1 + 5px); top:calc(.3rem + 12px); bottom:calc((var(--s5) + .3rem + 1px) * -1); width:2px; background:var(--rule); } .entry::before{ content:""; position:absolute; left:calc(var(--s6) * -1); top:.3rem; box-sizing:border-box; width:var(--repere); height:var(--repere); border-radius:var(--radius-rond); background:var(--point, var(--line)); box-shadow:0 0 0 4px var(--bg); } .entry--sante{ --point:var(--accent-vif); } .entry--sport{ --point:var(--sport); } .entry--avenir::before{ background:var(--bg); border:3px solid var(--accent); } .entry:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; } .entry h4{ font-size:var(--t-md); font-weight:var(--fw-gras); } .entry .when{ display:block; font-family:var(--body); font-size:var(--t-xs); font-weight:var(--fw-moyen); font-variant-numeric:tabular-nums; color:var(--text-dim); margin-top:var(--s1); } .entry p{ margin:var(--s2) 0 0; font-size:var(--t-sm); line-height:var(--lh-texte); color:var(--text-muted); } /* — Contact — */ .contact .coordonnees{ margin-top:var(--s6); } /* Accueil : le titre, l'accroche et les boutons à gauche, la carte à droite */ @media (min-width:56.25em){ #contact .contact{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); column-gap:var(--s8); align-items:start; } #contact .contact > *{ grid-column:1; } /* Dans une grille, les marges ne fusionnent plus : celle du titre suffit */ #contact .contact > .section-intro{ margin-top:var(--s2); } #contact .contact .coordonnees{ grid-column:2; grid-row:1 / span 5; margin-top:0; } } /* ═══════════════════════════════════════════════════════════ 10 · PIED DE PAGE ═══════════════════════════════════════════════════════════ */ .site-footer{ background:var(--bg); border-top:1px solid var(--rule); padding-block:var(--s7) var(--s5); } .footer__top{ display:grid; gap:var(--s6); } @media (min-width:51.25em){ .footer__top{ grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s7); } } .footer__brand{ display:flex; align-items:center; gap:var(--s4); } .footer__brand .mark{ display:block; width:60px; height:25px; flex:none; overflow:visible; position:relative; top:2px; } .footer__mail{ display:inline-flex; align-items:center; min-height:var(--touch); font-size:var(--t-md); font-weight:var(--fw-moyen); color:var(--text); text-decoration:none; border-bottom:1px solid var(--accent); word-break:break-word; transition:color var(--ease); } .footer__mail:focus-visible{ color:var(--accent-soft); } @media (hover:hover){ .footer__mail:hover{ color:var(--accent-soft); } } .footer__nav ul{ display:flex; flex-wrap:wrap; gap:0 var(--s5); margin:0; padding:0; list-style:none; } @media (min-width:51.25em){ .footer__nav ul{ justify-content:center; } } .footer__nav a{ position:relative; display:inline-flex; align-items:center; min-height:var(--touch); font-size:var(--t-sm); color:var(--text-muted); text-decoration:none; transition:color var(--ease); } /* Survol et focus après :visited, sans quoi une page déjà vue ne changeait plus de couleur au survol */ .footer__nav a:visited{ color:var(--text-dim); } .footer__nav a:focus-visible{ color:var(--accent-soft); } @media (hover:hover){ .footer__nav a:hover{ color:var(--accent-soft); } } .socials a{ display:grid; place-items:center; width:var(--touch); height:var(--touch); border:1px solid var(--line); border-radius:var(--radius); color:var(--text-muted); transition:color var(--ease), border-color var(--ease), transform var(--ease); } /* Survol et focus colorent le bouton ; seul le clic l'enfonce */ .socials a:focus-visible{ color:var(--accent); border-color:var(--accent); } @media (hover:hover){ .socials a:hover{ color:var(--accent); border-color:var(--accent); } } .socials a:active{ transform:var(--appui); } .socials svg{ width:var(--icone-m); height:var(--icone-m); } .footer__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s3) var(--s5); margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--rule); font-size:var(--t-sm); color:var(--text-dim); } .footer__bar p{ margin:0; } .to-top{ position:relative; display:inline-flex; align-items:center; min-height:var(--touch); color:var(--text-muted); text-decoration:none; transition:color var(--ease); } .to-top:focus-visible{ color:var(--accent-soft); } @media (hover:hover){ .to-top:hover{ color:var(--accent-soft); } } .to-top__fleche{ width:var(--icone-s); height:var(--icone-s); margin-left:var(--s2); fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } /* ═══════════════════════════════════════════════════════════ 11 · IMPRESSION ═══════════════════════════════════════════════════════════ */ @media print{ .site-header,.hero__toggle,.pratique__actions,.contact__actions,.socials,.skip,.burger,.hero__media,.footer__nav,.to-top{ display:none !important; } body{ background:var(--p-bg); color:var(--p-ink); font-size:11pt; } .hero{ min-height:0; padding-block:var(--s4); --text:var(--p-ink); --text-muted:var(--p-body); --accent:var(--p-ink); --accent-soft:var(--p-ink); --line:var(--p-mute); color:var(--p-ink); /* La marque reprend ses couleurs du fond clair */ --accent-vif:inherit; --sport:inherit; } .hero__word{ color:var(--p-ink) !important; } .arrivee{ display:block; min-height:0; } .pratique{ background:none; border-bottom:0; padding-block:0 var(--s4); } /* La marque s'imprime entière, même si l'impression part pendant son tracé */ .hero__marque path{ animation:none !important; stroke-dasharray:none !important; } .pratique__infos li{ color:var(--p-body) !important; } .subhead,.entry .when,.project__field,.check__terrain{ color:var(--p-mute) !important; } .lede,.entry p,.check p,.hero__sub,.points li{ color:var(--p-body) !important; } .section{ padding-block:var(--s5); } .entry,.check,.etape,.project,.coordonnees,.practical > div,.points li{ break-inside:avoid; } .section-title,.subhead,.duo__titre{ break-after:avoid; } /* Les trois pièces de l'accueil restent côte à côte : en pleine largeur, chaque vignette prenait une page */ .projects{ grid-template-columns:repeat(3, 1fr); } a{ color:var(--p-ink); } } /* ═══════════════════════════════════════════════════════════ 12 · PAGE INTÉRIEURE ═══════════════════════════════════════════════════════════ */ /* Aligné à gauche comme tout le site, et nettement plus grand que les titres de section qui le suivent */ .page-head{ padding-block:var(--s7) var(--s6); border-bottom:1px solid var(--rule); } .page-head h1{ font-size:var(--t-titre-page); letter-spacing:var(--ls-grand); } /* Page Contact : le visage de la personne à contacter, à gauche du titre. Quand le titre ne tient plus à côté (téléphones étroits), il passe dessous. */ .page-head__qui{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s5); } .page-head__photo{ flex:none; width:var(--avatar); height:var(--avatar); object-fit:cover; object-position:50% 20%; border-radius:var(--radius-rond); } .page-head .lede{ margin:var(--s5) 0 0; text-wrap:balance; } /* Les colonnes étroites (titres de page, contact, mentions) gardent leur largeur de lecture, mais partent du même bord gauche que le logo */ .wrap--sm{ max-width:none; } .wrap--sm > *{ max-width:var(--wrap-sm); } /* ═══════════════════════════════════════════════════════════ 13 · COORDONNÉES Une seule carte de visite : e-mail, téléphone et LinkedIn en lignes séparées par un filet. Chaque ligne est un lien, et le bouton « Copier » se tient à côté de ce qu'il copie. Sur ordinateur, un QR code ajoute mes coordonnées au téléphone du visiteur. Il apparaît avec le menu complet (761 px) ; en dessous, il laisse place au lien « Enregistrer mes coordonnées ». ═══════════════════════════════════════════════════════════ */ .coordonnees{ display:grid; grid-template-columns:minmax(0, 1fr); /* jamais plus large que la carte */ background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; text-align:left; } @media (min-width:47.5625em){ .coordonnees{ grid-template-columns:minmax(0, 1fr) auto; } } /* Les lignes se partagent la hauteur de la carte, QR code compris */ .coordonnees__liste{ display:flex; flex-direction:column; list-style:none; margin:0; padding:0; } .coord{ flex:1; display:flex; align-items:center; } .coord + .coord{ border-top:1px solid var(--rule); } /* Toute la ligne est cliquable, sauf le bouton « Copier » */ .coord__lien{ flex:1; min-width:0; display:flex; align-items:center; gap:var(--s4); min-height:88px; padding:var(--s4) var(--s5); color:inherit; text-decoration:none; } /* La carte rogne ce qui dépasse : le contour de focus passe à l'intérieur */ .coord__lien:focus-visible{ outline-offset:calc(var(--focus-ecart) * -1); } /* Une icône nue, sans disque teinté : le motif des kits d'interface */ .coord__icone{ flex:none; display:grid; place-items:center; color:var(--text-dim); transition:color var(--ease); } .coord__icone svg{ width:var(--icone-l); height:var(--icone-l); } .coord__texte{ min-width:0; } .coord__label{ display:block; font-family:var(--body); font-size:var(--t-sm); font-weight:var(--fw-moyen); color:var(--text-dim); margin-bottom:var(--s1); } .coord__valeur{ display:block; overflow-wrap:anywhere; /* l'adresse e-mail se coupe plutôt que de pousser le bouton hors de la carte */ font-family:var(--display); font-weight:var(--fw-semi); font-size:var(--t-coordonnee); line-height:var(--lh-titre-court); color:var(--text); transition:color var(--ease); } .coord__externe{ flex:none; margin-left:auto; width:var(--icone-l); height:var(--icone-l); color:var(--text-dim); transition:color var(--ease), transform var(--ease); } /* Survol et focus : l'icône, la valeur et la flèche passent au sarcelle */ .coord__lien:focus-visible .coord__icone{ color:var(--accent); } .coord__lien:focus-visible .coord__valeur{ color:var(--accent-soft); } .coord__lien:focus-visible .coord__externe{ color:var(--accent-soft); transform:translate(2px, -2px); } @media (hover:hover){ .coord__lien:hover .coord__icone{ color:var(--accent); } .coord__lien:hover .coord__valeur{ color:var(--accent-soft); } .coord__lien:hover .coord__externe{ color:var(--accent-soft); transform:translate(2px, -2px); } } /* Bouton « Copier ». Il affiche « Copié » le temps de la confirmation. Masqué par l'attribut hidden tant que le script n'a pas vérifié que la copie est possible. */ .coord__copier{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-width:var(--touch); min-height:var(--touch); margin-right:var(--s5); padding:0 var(--s4); background:transparent; border:1px solid var(--line); border-radius:var(--radius); font-family:var(--body); font-size:var(--t-sm); font-weight:var(--fw-semi); color:var(--accent); cursor:pointer; transition:background var(--ease), border-color var(--ease), color var(--ease); } /* Même largeur pour « Copier » et « Copié » : le bouton ne bouge pas */ @media (min-width:35.0625em){ .coord__copier{ min-width:6.75rem; } } .coord__copier:focus-visible{ background:var(--accent-wash); border-color:var(--accent); } @media (hover:hover){ .coord__copier:hover{ background:var(--accent-wash); border-color:var(--accent); } } .coord__copier:active{ transform:var(--appui); } .coord__copier svg{ flex:none; width:var(--icone-s); height:var(--icone-s); } .coord__copier-ok, .coord__copier-fait{ display:none; } .coord__copier[data-done="1"]{ border-color:var(--accent); color:var(--accent-soft); } .coord__copier[data-done="1"] .coord__copier-icone, .coord__copier[data-done="1"] .coord__copier-texte{ display:none; } .coord__copier[data-done="1"] .coord__copier-ok{ display:block; } .coord__copier[data-done="1"] .coord__copier-fait{ display:inline; } /* Moins de 240 px de large (téléphone réglé en très grand texte, qui agrandit toute la page) : le bouton passe sous l'adresse, aligné sur le texte, au lieu de sortir de la carte ; la flèche ↗ de LinkedIn, décorative, laisse sa place au texte */ @media (max-width:14.99875em){ .coord{ flex-wrap:wrap; } .coord__lien{ flex-basis:100%; padding-inline:var(--s4); gap:var(--s3); } .coord__copier{ margin:0 0 var(--s4) calc(var(--s4) + var(--icone-l) + var(--s3)); } .coord__externe{ display:none; } } /* Fiche contact : QR code, consigne et lien vers le fichier .vcf */ .coordonnees__fiche{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s3); text-align:center; border-top:1px solid var(--rule); } .coordonnees__qr, .coordonnees__consigne{ display:none; } .coordonnees__vcf{ display:flex; align-items:center; justify-content:center; gap:var(--s2); width:100%; min-height:56px; font-size:var(--t-sm); font-weight:var(--fw-moyen); color:var(--accent); text-decoration:none; transition:color var(--ease), background var(--ease); } .coordonnees__vcf svg{ flex:none; width:var(--icone-m); height:var(--icone-m); } .coordonnees__vcf:focus-visible{ color:var(--accent-soft); background:var(--accent-wash); outline-offset:calc(var(--focus-ecart) * -1); } @media (hover:hover){ .coordonnees__vcf:hover{ color:var(--accent-soft); background:var(--accent-wash); } } @media (min-width:47.5625em){ .coordonnees__fiche{ width:14rem; gap:var(--s2); padding:var(--s5) var(--s4); border-top:0; border-left:1px solid var(--rule); background:var(--bg-alt); } .coordonnees__qr{ display:block; width:128px; height:128px; margin-bottom:var(--s1); border-radius:var(--radius); } .coordonnees__consigne{ display:block; margin:0; font-size:var(--t-xs); line-height:var(--lh-ui); color:var(--text-muted); } /* Sur ordinateur, le QR code suffit : le lien vers la fiche reste réservé au téléphone */ .coordonnees__vcf{ display:none; } /* Accueil : pas de QR code, la carte se limite à ses trois lignes */ .coordonnees--sans-qr{ grid-template-columns:minmax(0, 1fr); } .coordonnees--sans-qr .coordonnees__fiche{ display:none; } } /* Téléphone : la ligne se resserre et le bouton se réduit à son icône, pour laisser la place à l'adresse */ @media (max-width:35.06125em){ .coord__lien{ gap:var(--s3); padding:var(--s4); min-height:80px; } .coord__copier{ padding:0; margin-right:var(--s3); } .coord__copier .coord__copier-texte, .coord__copier[data-done="1"] .coord__copier-fait{ display:none; } } /* Sur téléphone, l'adresse LinkedIn se réduit à l'identifiant */ @media (max-width:30.06125em){ .coord__prefixe{ display:none; } } /* Sur papier, ni bouton ni lien de téléchargement : le QR code reste, il se scanne aussi bien imprimé */ @media print{ .coord__copier, .coord__externe, .coordonnees__vcf{ display:none !important; } } /* Renseignements pratiques */ .practical-title{ margin-top:var(--s7); } .practical{ margin:var(--s6) 0 0; border-top:1px solid var(--rule); } .practical > div{ display:grid; gap:var(--s1) var(--s5); padding:var(--s4) 0; border-bottom:1px solid var(--rule); } @media (min-width:35em){ .practical > div{ grid-template-columns:12rem 1fr; align-items:baseline; } } .practical dt{ font-family:var(--body); font-size:var(--t-sm); font-weight:var(--fw-semi); color:var(--text-dim); } /* Une seule graisse pour toutes les valeurs */ .practical dd{ margin:0; font-size:var(--t-md); font-weight:var(--fw-moyen); line-height:var(--lh-texte); color:var(--text); } .practical dd small{ display:block; margin-top:var(--s1); font-size:var(--t-sm); font-weight:var(--fw-normal); color:var(--text-muted); } .secondary{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7); } .practical + .secondary{ margin-top:var(--s7); } /* ═══════════════════════════════════════════════════════════ 14 · DOCUMENT LÉGAL ═══════════════════════════════════════════════════════════ */ .legal-doc{ counter-reset:sec; } .legal-doc section{ padding-block:var(--s6); border-bottom:1px solid var(--rule); } .legal-doc section:first-of-type{ padding-top:0; } .legal-doc section:last-of-type{ border-bottom:0; } .legal-doc h2{ counter-increment:sec; font-size:var(--t-lg); margin-bottom:var(--s4); display:flex; gap:var(--s3); align-items:baseline; } .legal-doc h2::before{ content:counter(sec, decimal-leading-zero); font-family:var(--body); font-size:var(--t-xs); font-weight:var(--fw-semi); letter-spacing:var(--ls-capitales); color:var(--text-dim); } .legal-doc > *{ max-width:var(--mesure); } .legal-doc p{ margin:0 0 var(--s4); font-size:var(--t-md); line-height:var(--lh-lecture); color:var(--text-muted); } .legal-doc p:last-child{ margin-bottom:0; } .legal-doc strong{ color:var(--text); font-weight:var(--fw-semi); } .legal-doc a{ color:var(--accent); text-underline-offset:var(--soulignement-ecart); transition:color var(--ease); } .legal-doc a:visited{ color:var(--accent-soft); } .legal-doc a:focus-visible{ color:var(--accent-soft); } @media (hover:hover){ .legal-doc a:hover{ color:var(--accent-soft); } } .legal-doc .updated{ margin-top:var(--s7); font-size:var(--t-sm); color:var(--text-dim); } /* ═══════════════════════════════════════════════════════════ 15 · PAGE PROJETS ═══════════════════════════════════════════════════════════ */ .family{ padding-block:var(--gap); } /* Première section sous le sommaire : moins d'air, pour qu'une image apparaisse dès le premier écran */ .toc + .family{ padding-top:var(--s7); } /* Sous le titre de page (65 px), les titres de famille descendent d'un cran */ .family .section-title{ font-size:var(--t-titre-famille); } .family__intro{ margin-top:var(--s5); } /* Vidéos, affiches et documents suivent la même règle : des cartes rangées en lignes et en colonnes, séparées partout par le même écart. */ .works, .gallery, .docs{ display:grid; gap:var(--s5); } .works, .docs{ margin-top:var(--s7); } /* Un intertitre annonce la grille qui le suit : il s'en rapproche, et s'éloigne de ce qui précède. */ .family .subhead{ margin-top:var(--s8); } .subhead + .gallery, .subhead + .works, .subhead + .points{ margin-top:0; } /* Deux colonnes dès 640 px, comme les documents : sur tablette, les vidéos ne s'empilent plus en grand format à côté d'affiches rangées par deux. */ @media (min-width:40em){ .works{ grid-template-columns:repeat(2,1fr); } } /* Chaque vidéo est une carte, comme les affiches et les documents */ .work{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; transition:border-color var(--ease), box-shadow var(--ease); } .work:has(.video:focus-visible){ border-color:var(--accent); box-shadow:var(--ombre); } @media (hover:hover){ .work:has(.video:hover){ border-color:var(--accent); box-shadow:var(--ombre); } } /* La vidéo vedette de l'hôpital occupe toute une ligne, au-dessus des deux grandes cartes ; les quatre autres tournages suivent en petites cartes. Ciblée par son id : « :first-child » prenait aussi la première petite carte. */ #anesthesie{ grid-column:1 / -1; } #anesthesie p{ max-width:var(--mesure); } /* Les trois capsules N'JOY partagent une carte, sur toute une rangée */ .work--large{ grid-column:1 / -1; } .work--large .clips{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px; background:var(--line); } @media (max-width:39.99875em){ .work--large .clips{ grid-template-columns:minmax(0, 1fr); } } .work--large p{ max-width:var(--mesure); } /* Petites cartes, pour le moins pertinent : quatre par rangée sur ordinateur, deux sur tablette. Sur téléphone, la vignette passe à gauche du titre, comme dans une liste de lecture ; une fois lancée, la vidéo reprend toute la largeur de la carte. */ @media (min-width:56.25em){ .works--compact{ grid-template-columns:repeat(4, minmax(0, 1fr)); } } /* Leurs titres sont des

: ils dépendent de l'intertitre

qui les annonce */ .works--compact .work h4{ font-size:var(--t-md); margin:var(--s4) var(--s4) var(--s1); } .works--compact .work p{ margin:0 var(--s4) var(--s4); } .works--compact .video__play span{ width:var(--touch); height:var(--touch); } .works--compact .video__play svg{ width:var(--icone-s); height:var(--icone-s); } @media (max-width:39.99875em){ .works--compact{ gap:var(--s3); } .works--compact .work{ display:grid; grid-template-columns:var(--vignette-liste) minmax(0, 1fr); grid-template-rows:auto 1fr; align-items:start; column-gap:var(--s3); } .works--compact .clips{ grid-row:1 / span 2; } .works--compact .work h4{ margin:var(--s3) var(--s3) var(--s1) 0; } .works--compact .work p{ margin:0 var(--s3) var(--s3) 0; } .works--compact .work:has(iframe){ display:flex; flex-direction:column; align-items:stretch; } .works--compact .work:has(iframe) h4{ margin:var(--s3) var(--s3) var(--s1); } .works--compact .work:has(iframe) p{ margin:0 var(--s3) var(--s3); } } .work :is(h3, h4){ font-size:var(--t-lg); font-weight:var(--fw-gras); margin:var(--s5) var(--s5) var(--s2); } /* Vignette vidéo : l'iframe n'est chargée qu'au clic */ .clips{ display:grid; } /* Dans la carte, la vignette perd son propre cadre et ne se soulève plus */ .work .video{ border:0; border-radius:0; } .work .video:active{ transform:none; } @media (hover:hover){ .work .video:hover{ transform:none; } } /* La carte rogne ce qui dépasse : le focus se dessine dans la vignette, sur le calque de la pastille, au-dessus de l'image. Un seul trait sarcelle s'y perdait (sous 3:1 sur la plupart des vignettes) : deux traits, sarcelle foncé au bord et blanc dedans, dont l'un fait toujours au moins 3,2:1 (WCAG 1.4.11, technique C40). Le contour, devenu transparent, reste pour le mode contraste élevé de Windows, qui lui rend une couleur. */ .work .video:focus-visible{ outline-color:transparent; outline-offset:calc(var(--focus-ecart) * -1); } .work .video:focus-visible .video__play{ box-shadow:inset 0 0 0 var(--focus-largeur) var(--accent-soft), inset 0 0 0 calc(var(--focus-largeur) * 2) var(--blanc); } .video{ position:relative; display:block; width:100%; padding:0; aspect-ratio:var(--format-video); overflow:hidden; cursor:pointer; /* Vignette pas encore chargée, ou bloquée : fond sarcelle foncé, le bouton de lecture reste visible */ background:var(--hero-b); } .video img{ width:100%; height:100%; object-fit:cover; transition:opacity var(--ease), transform var(--ease-slow); } .video:focus-visible img{ opacity:.78; transform:scale(1.02); } @media (hover:hover){ .video:hover img{ opacity:.78; transform:scale(1.02); } } .video__play{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; } .video__play span{ display:grid; place-items:center; width:58px; height:58px; border-radius:var(--radius-rond); background:var(--pastille-fond); border:1px solid var(--pastille-filet); backdrop-filter:blur(var(--flou)); transition:background var(--ease), border-color var(--ease); } .video__play svg{ width:var(--icone-l); height:var(--icone-l); color:var(--text); margin-left:3px; transition:color var(--ease); } /* Au clavier comme à la souris, la pastille passe en sarcelle */ .video:focus-visible .video__play span{ background:var(--accent); border-color:var(--accent); } .video:focus-visible .video__play svg{ color:var(--on-accent); } @media (hover:hover){ .video:hover .video__play span{ background:var(--accent); border-color:var(--accent); } .video:hover .video__play svg{ color:var(--on-accent); } } .clips iframe{ width:100%; aspect-ratio:var(--format-video); display:block; border:0; } /* ═══════════════════════════════════════════════════════════ 16 · GALERIES ET DOCUMENTS ═══════════════════════════════════════════════════════════ */ @media (min-width:35em){ .gallery{ grid-template-columns:repeat(2,1fr); } } @media (min-width:48em){ .gallery{ grid-template-columns:repeat(3,1fr); } } .shot{ display:flex; flex-direction:column; overflow:hidden; } /* est en ligne : il doit reprendre le comportement de l'image */ .shot picture{ display:flex; align-items:center; background:var(--bg-alt); border-bottom:1px solid var(--rule); } /* Les affiches partagent le même cadre 3:4, mais restent entières : une affiche est une composition, on ne la coupe pas. Les formats 4:5 et A4 gardent une fine marge neutre. */ .shot img{ width:100%; height:auto; aspect-ratio:var(--format-affiche); object-fit:contain; background:var(--bg-alt); } .shot__body{ padding:var(--s5); } /* Titres de cartes : un interlignage plus ouvert que celui des grands titres, et le même écart avant le texte pour les vidéos, les affiches et les documents */ .work :is(h3, h4), .shot h4, .doc h3{ line-height:var(--lh-titre-court); text-wrap:pretty; } .shot h4{ margin:0 0 var(--s2); font-size:var(--t-lg); font-weight:var(--fw-gras); } /* Affiches réduites : trois par rangée sur tablette, quatre sur ordinateur, alignées sur les petites cartes vidéo au-dessus */ .gallery--compact .shot h4{ font-size:var(--t-md); } @media (min-width:35em){ .gallery--compact{ grid-template-columns:repeat(3, minmax(0, 1fr)); } } @media (min-width:56.25em){ .gallery--compact{ grid-template-columns:repeat(4, minmax(0, 1fr)); } } /* Sur téléphone, une affiche en pleine largeur occupait tout un écran : elle passe en vignette, à gauche de son titre, comme dans une liste. Un toucher l'ouvre en grand dans la visionneuse. */ @media (max-width:34.99875em){ .gallery{ gap:var(--s3); } .gallery .shot{ display:grid; grid-template-columns:var(--vignette-liste) minmax(0, 1fr); align-items:start; } .gallery .shot picture{ align-self:stretch; border-bottom:0; border-right:1px solid var(--rule); } .gallery .shot__body{ padding:var(--s3) var(--s4); } .gallery .shot h4{ font-size:var(--t-md); } } .shot p, .doc p{ margin:0; font-size:var(--t-sm); line-height:var(--lh-texte); color:var(--text-muted); } @media (min-width:40em){ .docs{ grid-template-columns:repeat(2,1fr); } } .doc{ display:flex; gap:var(--s4); padding:var(--s5); } .doc picture{ flex:none; display:block; align-self:flex-start; } /* Le texte occupe toute la hauteur : l'étiquette « PDF » se cale en bas, à la même hauteur d'une carte à l'autre */ .doc > div{ display:flex; flex-direction:column; align-items:flex-start; } /* Une couverture blanche sur une carte blanche perdait ses bords : un filet et une ombre légère la détachent, comme une feuille posée */ .doc img{ flex:none; width:82px; aspect-ratio:var(--format-affiche); object-fit:cover; border-radius:var(--radius); box-shadow:var(--ombre-feuille); } .doc h3{ margin:0 0 var(--s2); font-size:var(--t-lg); font-weight:var(--fw-gras); } /* Le livre blanc, en vedette : toute la rangée, une couverture plus grande */ .doc--vedette{ grid-column:1 / -1; } @media (min-width:40em){ .doc--vedette img{ width:120px; } } .doc--vedette p{ max-width:var(--mesure); } .doc .tag{ display:inline-block; margin-top:auto; padding-top:var(--s2); font-size:var(--t-sm); font-weight:var(--fw-semi); color:var(--accent); } /* Sur une même ligne, les cartes partagent leurs rangées : les titres commencent à la même hauteur, les textes aussi, et les cartes ont la même hauteur. Sans sous-grille, chaque carte garde sa propre mise en page. */ @supports (grid-template-rows: subgrid){ /* Vidéos : vignette, titre, texte */ @media (min-width:40em){ .work{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; } } /* Affiches : image, titre, texte. Le bloc de texte s'efface pour que le titre et la description prennent chacun leur rangée. */ @media (min-width:35em){ .shot{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; } .shot__body{ display:contents; } .shot h4{ padding:var(--s5) var(--s5) 0; } .shot p{ padding:0 var(--s5) var(--s5); } .gallery--compact .shot h4{ padding:var(--s4) var(--s4) 0; } .gallery--compact .shot p{ padding:0 var(--s4) var(--s4); } } /* Documents : couverture à gauche ; titre, texte et étiquette à droite */ @media (min-width:40em){ .doc{ display:grid; grid-template-columns:auto 1fr; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; column-gap:var(--s4); align-items:start; } .doc picture{ grid-column:1; grid-row:1 / -1; } .doc > div{ display:contents; } .doc h3, .doc p, .doc .tag{ grid-column:2; } .doc .tag{ align-self:end; justify-self:start; margin-top:0; } } } /* Liste à puces : ce qui ne tient pas dans une vignette. Deux colonnes sur ordinateur, rangées ligne à ligne. Le tiret prend la couleur du terrain. */ .points{ list-style:none; margin:var(--s5) 0 0; padding:0; max-width:var(--mesure); display:grid; gap:var(--s4); } .points li{ position:relative; padding-left:var(--s5); font-size:var(--t-sm); line-height:var(--lh-texte); color:var(--text-muted); } .points li::before{ content:""; position:absolute; left:0; top:.72em; width:9px; height:2px; background:var(--puce, var(--accent-vif)); } @media (min-width:56.25em){ .points--deux{ max-width:none; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--s7); } } .family--sport{ --puce:var(--sport); } .points a{ color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--soulignement-ecart); transition:color var(--ease); } .points a:focus-visible{ color:var(--accent-soft); } @media (hover:hover){ .points a:hover{ color:var(--accent-soft); } } /* Visionneuse */ /* Explicite : sans cette règle, certains moteurs de rendu laissent le dialogue fermé occuper le flux. */ dialog.lightbox:not([open]){ display:none; } dialog.lightbox{ /* Les affiches se regardent mieux sur fond sombre : la visionneuse garde un voile sarcelle foncé et ses propres jetons. */ --text: var(--sombre-texte); --text-muted: var(--sombre-texte-doux); --text-dim: var(--sombre-texte-pale); --surface: var(--sombre-surface); --line: var(--sombre-filet); --accent: var(--sombre-accent); --accent-soft: var(--sombre-accent-doux); border:0; padding:0; background:transparent; max-width:min(94vw, var(--wrap)); max-height:94vh; overflow:visible; } dialog.lightbox::backdrop{ background:var(--voile-visionneuse); backdrop-filter:blur(var(--flou)); } dialog.lightbox img{ max-width:100%; max-height:80vh; width:auto; height:auto; border-radius:var(--radius); margin-inline:auto; } /* Posé dans le dialogue : au-dessus, il tombait hors de l'écran à toutes les hauteurs de viewport courantes. */ dialog.lightbox .close{ position:absolute; z-index:1; top:var(--s3); right:var(--s3); min-height:var(--touch); padding-inline:var(--s4); /* Fond opaque : translucide, la bordure tombait à 1,8:1 sur une affiche claire */ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; color:var(--text); font-size:var(--t-sm); font-family:var(--body); display:flex; align-items:center; gap:var(--s2); transition:color var(--ease), border-color var(--ease); } dialog.lightbox .close:focus-visible{ color:var(--accent); border-color:var(--accent); } @media (hover:hover){ dialog.lightbox .close:hover{ color:var(--accent); border-color:var(--accent); } } dialog.lightbox .close:active{ transform:var(--appui); } /* ═══════════════════════════════════════════════════════════ 17 · LIENS VERS LES PREUVES ═══════════════════════════════════════════════════════════ */ .lien-fleche{ display:inline-block; padding-block:var(--s3); /* cible de 44 px, même sur deux lignes */ font-size:var(--t-sm); font-weight:var(--fw-semi); color:var(--accent); text-decoration:none; transition:color var(--ease); } /* Au focus, le lien s'élargit de la longueur gagnée par sa flèche (voir plus bas), sans rien pousser : le contour l'englobe tout entière */ .lien-fleche:focus-visible{ color:var(--accent-soft); padding-right:8px; margin-right:-8px; } @media (hover:hover){ .lien-fleche:hover{ color:var(--accent-soft); } } /* La flèche des liens : une petite ligne qui mène à un point, comme le tracé d'un plan. Au survol et au focus, elle s'allonge de 8 px vers sa destination. Une marge négative d'autant lui garde sa place dans la ligne : le texte ne repasse jamais à la ligne (il le faisait sur téléphone, de 320 à 414 px). Les deux propriétés s'animent ensemble. */ .project h3::after{ content:""; flex:none; align-self:center; width:20px; height:var(--point-fleche); background: radial-gradient(circle closest-side, currentColor 90%, transparent) right center / var(--point-fleche) var(--point-fleche) no-repeat, linear-gradient(currentColor, currentColor) left center / calc(100% - 4px) 2px no-repeat; transition:width var(--ease), margin-right var(--ease); } .project:focus-visible h3::after{ width:28px; margin-right:-8px; } @media (hover:hover){ .project:hover h3::after{ width:28px; margin-right:-8px; } } /* Dans un lien, la flèche est un morceau de texte (des espaces insécables peints en arrière-plan) : elle reste collée au dernier mot, même quand le lien passe sur deux lignes */ .lien-fleche::after{ content:"\00a0\00a0\00a0\00a0\00a0\00a0"; margin-left:var(--s2); padding-right:0; margin-right:0; background: radial-gradient(circle closest-side, currentColor 90%, transparent) right center / var(--point-fleche) var(--point-fleche) no-repeat, linear-gradient(currentColor, currentColor) left center / calc(100% - 4px) 2px no-repeat; transition:padding-right var(--ease), margin-right var(--ease); } .lien-fleche:focus-visible::after{ padding-right:8px; margin-right:-8px; } @media (hover:hover){ .lien-fleche:hover::after{ padding-right:8px; margin-right:-8px; } } .suite{ margin:var(--s5) 0 0; } .entry .lien-fleche{ padding-block:var(--s1); margin-top:var(--s1); } /* ═══════════════════════════════════════════════════════════ 18 · LA LIGNE La signature du site, sous le haut de page. La ligne de l’hôpital (sarcelle) et celle du sport (ambre) se rejoignent, puis mènent au soin : le tronc commun s’épaissit, l’avenir est en pointillés. Ordinateur : un SVG étiré en largeur trace les lignes à épaisseur constante (non-scaling-stroke), et les étapes se posent dessus, à hauteur fixe. Téléphone : la ligne descend le long des étapes, tracée en CSS, la santé à gauche et le sport qui la rejoint. ═══════════════════════════════════════════════════════════ */ .ligne{ padding-block:var(--s7); border-bottom:1px solid var(--rule); /* Papier millimétré, comme un tracé de surveillance : un carreau fin tous les 24 px, un plus marqué tous les 120 px */ background: linear-gradient(var(--grille-forte) 1px, transparent 1px) 19px 78px / 120px 120px, linear-gradient(90deg, var(--grille-forte) 1px, transparent 1px) 19px 78px / 120px 120px, linear-gradient(var(--grille) 1px, transparent 1px) 19px 6px / 24px 24px, linear-gradient(90deg, var(--grille) 1px, transparent 1px) 19px 6px / 24px 24px, var(--bg); } /* La grille est calée sur le contenu : une ligne verticale forte passe par le bord gauche du .wrap (là où partent les deux voies), et les voies de la santé (y = 198) et du sport (y = 318) suivent deux lignes fortes */ @media (min-width:72.5em){ .ligne{ background-position:calc(50% - 35rem + 59px) 78px, calc(50% - 35rem + 59px) 78px, calc(50% - 35rem + 11px) 6px, calc(50% - 35rem + 11px) 6px; } } /* Téléphone : une ligne verticale fine suit l'axe des rails */ @media (max-width:53.74875em){ .ligne{ background-position:27px 78px, 27px 78px, 27px 6px, 27px 6px; } } .ligne__schema{ position:relative; } .ligne__traces, .ligne__jonction{ display:none; } .ligne__etapes{ list-style:none; margin:0; padding:0; } .etape{ position:relative; } /* — Étiquettes : le chiffre, puis ce qu’il mesure — */ .etape__tete{ display:flex; align-items:baseline; gap:.28em; font-family:var(--display); font-weight:var(--fw-extra); font-size:var(--t-etape); line-height:var(--lh-chiffre); letter-spacing:var(--ls-grand); font-variant-numeric:tabular-nums; color:var(--text); } .etape__unite{ font-size:var(--t-lg); font-weight:var(--fw-gras); letter-spacing:0; } .etape--sante .etape__tete, .etape--cap .etape__tete{ color:var(--accent); } .etape--sport .etape__tete{ color:var(--sport-texte); } /* Le présent est la seule étape qui appelle une action : il n'est plus le plus petit élément du schéma */ .etape--aujourdhui .etape__tete{ font-size:var(--t-xl); letter-spacing:var(--ls-moyen); } .etape__texte{ display:block; margin-top:var(--s2); font-size:var(--t-sm); line-height:var(--lh-legende); color:var(--text-muted); text-wrap:balance; } .etape--aujourdhui .etape__texte{ font-size:var(--t-md); color:var(--text); } /* — Points d’étape — */ .etape::before{ content:""; position:absolute; z-index:1; box-sizing:border-box; width:16px; height:16px; border-radius:var(--radius-rond); background:var(--bg); border:3px solid var(--point, var(--accent-vif)); } .etape--sport{ --point:var(--sport); } /* Aujourd’hui : un point plein, cerclé, comme « Vous êtes ici » sur un plan */ .etape--aujourdhui::before{ width:22px; height:22px; background:var(--accent); border:4px solid var(--bg); box-shadow:0 0 0 3px var(--accent); } .etape--cap::before{ --point:var(--accent); width:22px; height:22px; border-width:4px; } /* ── Ordinateur : les deux lignes côte à côte, de gauche à droite ── */ @media (min-width:53.75em){ .ligne__schema{ height:380px; } .ligne__traces{ display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible; } /* Épaisseur constante malgré l'étirement : attribut vector-effect sur chaque tracé */ .ligne__traces path{ fill:none; stroke-linecap:round; } .ligne__sante{ stroke:var(--accent-vif); stroke-width:3; } .ligne__sport{ stroke:var(--sport); stroke-width:3; } .ligne__tronc{ stroke:var(--accent); stroke-width:6; } .ligne__avenir{ stroke:var(--accent); stroke-width:6; stroke-dasharray:0 13; } /* Là où le sport rejoint la santé */ .ligne__jonction{ display:block; position:absolute; left:60%; top:150px; width:var(--repere); height:var(--repere); margin:calc(var(--repere) / -2) 0 0 calc(var(--repere) / -2); border-radius:var(--radius-rond); background:var(--accent); } .etape{ position:absolute; } /* Chaque texte se tient à distance de sa ligne ; son point se pose dessus */ .etape--sante{ left:0; bottom:calc(100% - 150px + 22px); width:min(40%, 27rem); } .etape--sante::before{ left:-8px; bottom:-30px; } .etape--sport{ left:0; top:calc(270px + 22px); width:min(40%, 27rem); } .etape--sport::before{ left:-8px; top:-30px; } .etape--aujourdhui{ left:76%; top:calc(150px + 26px); width:24%; } .etape--aujourdhui::before{ left:-11px; top:-37px; } .etape--cap{ right:0; bottom:calc(100% - 150px + 26px); width:22%; text-align:right; } .etape--cap .etape__tete{ justify-content:flex-end; } .etape--cap::before{ right:-11px; bottom:-37px; } } /* ── Téléphone et tablette : la ligne descend le long des étapes ── La santé court à gauche (axe à 8 px), le sport la rejoint par un coude, puis le tronc commun s’épaissit jusqu’à aujourd’hui. */ @media (max-width:53.74875em){ .etape{ padding:0 0 var(--s6) 3.5rem; } .etape:last-child{ padding-bottom:0; } .etape::before{ left:0; top:.5rem; } .etape--sante{ background:linear-gradient(var(--accent-vif), var(--accent-vif)) 6.5px 1rem / 3px calc(100% - 1rem) no-repeat; } .etape--sport{ background:linear-gradient(var(--accent-vif), var(--accent-vif)) 6.5px 0 / 3px 100% no-repeat; } .etape--sport::before{ left:23px; } .etape--sport::after{ content:""; position:absolute; left:8px; top:1.5rem; bottom:0; width:24.5px; border-right:3px solid var(--sport); border-bottom:3px solid var(--sport); border-bottom-right-radius:18px; } /* Tronc plein jusqu’au point d’aujourd’hui, pointillés ensuite */ .etape--aujourdhui{ background: linear-gradient(var(--accent), var(--accent)) 5.5px 0 / 5px 1.2rem no-repeat, radial-gradient(circle, var(--accent) 2.6px, transparent 3.1px) 5px 1.2rem / 6px 13px repeat-y; } .etape--aujourdhui::before{ left:-3px; top:.15rem; } .etape--cap::before{ left:-3px; top:.4rem; } } /* ── Le tracé, une seule fois, à l’entrée dans l’écran ── script.js pose .ligne--attente, puis .ligne--tracee. Sans script, ou si le mouvement est réduit, aucune de ces classes : tout est visible. */ @media (min-width:53.75em){ .ligne--attente .ligne__traces{ clip-path:inset(0 100% 0 0); } .ligne--attente.ligne--tracee .ligne__traces{ clip-path:inset(0 0 0 0); transition:clip-path 1.7s var(--courbe-trace) .15s; } .ligne--attente .etape, .ligne--attente .ligne__jonction{ opacity:0; } .ligne--attente.ligne--tracee .etape, .ligne--attente.ligne--tracee .ligne__jonction{ opacity:1; transition:opacity .45s ease var(--apparition, 0s); } .ligne__jonction{ --apparition:1.05s; } .etape--aujourdhui{ --apparition:1.3s; } .etape--cap{ --apparition:1.75s; } } @media (max-width:53.74875em){ /* Le cadre déborde de 40 px : l'onde du point d'aujourd'hui n'est pas rognée */ .ligne--attente .etape{ clip-path:inset(-40px -40px 100% -40px); } .ligne--attente.ligne--tracee .etape{ clip-path:inset(-40px -40px -40px -40px); transition:clip-path .55s var(--courbe-trace) var(--apparition, 0s); } .etape--sport{ --apparition:.45s; } .etape--aujourdhui{ --apparition:.95s; } .etape--cap{ --apparition:1.4s; } } /* Arrivée au point d’aujourd’hui : trois ondes, puis plus rien */ @keyframes ici{ from{ box-shadow:0 0 0 3px var(--accent), 0 0 0 3px rgba(var(--accent-rgb), .5); } to{ box-shadow:0 0 0 3px var(--accent), 0 0 0 20px rgba(var(--accent-rgb), 0); } } .ligne--tracee .etape--aujourdhui::before{ animation:ici 1.4s ease-out 2.1s 3; } /* ═══════════════════════════════════════════════════════════ 19 · SOMMAIRE DE LA PAGE PROJETS Collé sous l'en-tête, dont script.js mesure la hauteur. ═══════════════════════════════════════════════════════════ */ /* L'en-tête, le sommaire (61 px) et un peu d'air au-dessus de la cible */ :root:has(.toc){ scroll-padding-top:calc(var(--haut-entete, 69px) + var(--s8)); } .toc{ position:sticky; top:var(--haut-entete, 69px); z-index:var(--z-sommaire); background:var(--bg); border-bottom:1px solid var(--rule); } .toc ul{ position:relative; display:flex; gap:var(--s2); margin:0; padding:var(--s2) 0; list-style:none; overflow-x:auto; scrollbar-width:none; } .toc ul::-webkit-scrollbar{ display:none; } .toc a{ display:inline-flex; align-items:center; min-height:var(--touch); padding:0 var(--s4); border:1px solid var(--line); border-radius:var(--radius-pill); font-size:var(--t-sm); font-weight:var(--fw-moyen); white-space:nowrap; color:var(--text-muted); text-decoration:none; transition:color var(--ease), border-color var(--ease), background var(--ease); } @media (max-width:30.06125em){ .toc a{ padding:0 var(--s3); } } .toc a:focus-visible{ color:var(--text); border-color:var(--accent); } @media (hover:hover){ .toc a:hover{ color:var(--text); border-color:var(--accent); } } /* Une pastille de la couleur du terrain devant chaque section */ .toc a::before{ content:""; flex:none; width:var(--pastille); height:var(--pastille); margin-right:var(--s2); border-radius:var(--radius-rond); background:var(--point, var(--line)); } .toc a[href="#ghsc"]{ --point:var(--accent-vif); } .toc a[href="#ligue"]{ --point:var(--sport); } /* La section en cours : pastille pleine. Après les règles de couleur des terrains, pour que sa pastille prenne la couleur du texte. */ .toc a.est-actif{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); --point:currentColor; } .toc a.est-actif[href="#ligue"]{ --point:var(--sport-clair); } /* Sur un téléphone étroit, les quatre pastilles tiennent sans défiler : la couleur du terrain s'efface, le nom suffit */ @media (max-width:26.31125em){ .toc ul{ gap:var(--s1); } .toc a{ padding:0 .625rem; } .toc a::before{ display:none; } } /* Écran bas, comme un téléphone tenu à l'horizontale : l'en-tête ne suit plus le défilement. Avec le sommaire, les deux barres couvraient un tiers de l'écran. */ @media (max-height:31.31125em){ .site-header{ position:relative; } html{ scroll-padding-top:var(--s4); } :root:has(.toc){ scroll-padding-top:var(--s8); } .toc{ top:0; } } /* ═══════════════════════════════════════════════════════════ 20 · VISIONNEUSE : NAVIGATION ENTRE LES IMAGES ═══════════════════════════════════════════════════════════ */ .lb-figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--s3); } .lb-img.lb-entree{ animation:lb-fondu var(--ease-slow); } @keyframes lb-fondu{ from{ opacity:0; } to{ opacity:1; } } /* Fond opaque, de la teinte du voile : la légende reste lisible, et son contraste se mesure, quel que soit ce que le voile laisse deviner */ .lb-legende{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:var(--s1) var(--s3); padding:var(--s1) var(--s3); background:var(--voile); border-radius:var(--radius); font-size:var(--t-sm); text-align:center; color:var(--text-muted); } .lb-titre{ font-weight:var(--fw-semi); color:var(--text); } .lb-compteur{ color:var(--text-dim); font-variant-numeric:tabular-nums; } .lb-nav{ position:absolute; z-index:1; top:calc(50% - 2.6rem); display:grid; place-items:center; width:var(--touch); height:var(--touch); border-radius:var(--radius-rond); /* Fond opaque, comme le bouton Fermer : lisible sur une affiche claire */ background:var(--surface); border:1px solid var(--line); color:var(--text); cursor:pointer; transition:color var(--ease), border-color var(--ease); } .lb-nav:focus-visible{ color:var(--accent); border-color:var(--accent); } @media (hover:hover){ .lb-nav:hover{ color:var(--accent); border-color:var(--accent); } } .lb-nav:active{ transform:var(--appui); } .lb-nav svg{ width:var(--icone-l); height:var(--icone-l); } .lb-nav--prec{ left:var(--s3); } .lb-nav--suiv{ right:var(--s3); } /* Sur grand écran, les flèches sortent de l'image pour ne rien masquer */ @media (min-width:56.25em){ .lb-nav--prec{ left:calc((var(--touch) + var(--s4)) * -1); } .lb-nav--suiv{ right:calc((var(--touch) + var(--s4)) * -1); } } /* ═══════════════════════════════════════════════════════════ 22 · PANNEAU D’ORIENTATION (page 404) Comme dans les couloirs d’un hôpital : fond sarcelle, une direction par ligne, la flèche dans un carré blanc. ═══════════════════════════════════════════════════════════ */ .panneau{ max-width:30rem; background:var(--accent); color:var(--on-accent); border-radius:var(--radius); overflow:hidden; } .panneau__ici{ display:flex; align-items:center; gap:var(--s3); margin:0; padding:var(--s4) var(--s5); font-size:var(--t-sm); font-weight:var(--fw-moyen); border-bottom:1px solid var(--panneau-filet); } /* Le point « Vous êtes ici » des plans d’orientation */ .panneau__ici::before{ content:""; flex:none; width:var(--repere); height:var(--repere); border-radius:var(--radius-rond); background:var(--on-accent); box-shadow:0 0 0 4px var(--panneau-filet); } .panneau ul{ list-style:none; margin:0; padding:0; } .panneau li + li{ border-top:1px solid var(--panneau-filet); } .panneau a{ display:flex; align-items:center; gap:var(--s4); min-height:68px; padding:var(--s3) var(--s5); font-family:var(--display); font-weight:var(--fw-gras); font-size:var(--t-lg); color:var(--on-accent); text-decoration:none; transition:background var(--ease); } @media (hover:hover){ .panneau a:hover{ background:var(--panneau-survol); } } /* Sur le sarcelle, le contour de focus passe au blanc, à l'intérieur de la ligne */ .panneau a:focus-visible{ background:var(--panneau-survol); outline:var(--focus-largeur) solid var(--on-accent); outline-offset:calc(var(--focus-ecart) * -2); } .panneau__fleche{ flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius); background:var(--on-accent); color:var(--accent); } .panneau__fleche svg{ width:var(--icone-xl); height:var(--icone-xl); fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } /* Moins de 240 px de large : la flèche passe au-dessus de sa direction, et un mot trop long se coupe plutôt que de sortir du panneau */ @media (max-width:14.99875em){ .panneau__ici{ padding-inline:var(--s4); } .panneau a{ flex-direction:column; align-items:flex-start; gap:var(--s2); padding:var(--s4); overflow-wrap:anywhere; hyphens:auto; } } /* ═══════════════════════════════════════════════════════════ 23 · RETOUR EN HAUT, AVEC PROGRESSION DE LECTURE ═══════════════════════════════════════════════════════════ */ .haut{ position:fixed; right:var(--s5); bottom:var(--s5); z-index:var(--z-haut); display:grid; place-items:center; width:var(--bouton); height:var(--bouton); border-radius:var(--radius-rond); background:var(--flottant-fond); box-shadow:var(--ombre); backdrop-filter:blur(var(--flou-fort)); -webkit-backdrop-filter:blur(var(--flou-fort)); color:var(--text); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity var(--ease-slow), visibility var(--ease-slow), transform var(--ease-slow), color var(--ease); } .haut.est-visible{ opacity:1; visibility:visible; transform:none; } .haut:focus-visible{ color:var(--accent-soft); } @media (hover:hover){ .haut:hover{ color:var(--accent-soft); } } .haut__anneau{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); } .haut__piste{ fill:none; stroke:var(--line); stroke-width:2; } .haut__progres{ fill:none; stroke:var(--accent-vif); stroke-width:2.5; /* 138,23 = circonférence du cercle de rayon 22 */ stroke-dasharray:138.23; stroke-dashoffset:calc(138.23 * (1 - var(--progres, 0))); } .haut__fleche{ position:relative; width:var(--icone-l); height:var(--icone-l); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Sous 760 px, le bouton recouvrait la fin des lignes : le pied de page a déjà son lien « Haut de page » */ @media (max-width:47.56125em){ .haut{ display:none; } } /* ═══════════════════════════════════════════════════════════ 24 · FONDU ENTRE LES PAGES Navigateurs récents seulement : les autres changent de page comme avant. L'en-tête reste immobile pendant le fondu. ═══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference){ @view-transition{ navigation:auto; } } ::view-transition-old(root), ::view-transition-new(root){ animation-duration:var(--duree-lente); } .site-header{ view-transition-name:entete; } /* ═══════════════════════════════════════════════════════════ 25 · IMPRESSION DES ÉLÉMENTS INTERACTIFS ═══════════════════════════════════════════════════════════ */ @media print{ .toc,.haut,.lien-fleche,.lb-nav{ display:none !important; } /* La ligne s’imprime entière, même si elle n’a pas encore été tracée */ .ligne{ background:none; } .ligne--attente .etape, .ligne--attente .ligne__traces, .ligne--attente .ligne__jonction{ opacity:1 !important; clip-path:none !important; } .etape__tete{ color:var(--p-ink) !important; } .etape__texte{ color:var(--p-body) !important; } }