/* ============================================================================ FICHIER GÉNÉRÉ — NE PAS MODIFIER À LA MAIN. ---------------------------------------------------------------------------- Produit par « npm run pages », qui met bout à bout, dans cet ordre : assets/css/tokens.css assets/css/base.css assets/css/style.css Ces trois fichiers-là restent la vérité : on les édite, on relance npm run pages, et on versionne le résultat. Une feuille au lieu de trois, ce sont deux requêtes bloquantes en moins avant le premier affichage. ============================================================================ */ /* ————— assets/css/tokens.css ————— */ /* ============================================================================ OPAQ — site de NS Production — tokens.css ---------------------------------------------------------------------------- DEUX directions de design, UN seul HTML. Le HTML et le JS sont identiques d'une direction à l'autre : seules ces variables et style.css changent. html[data-theme="planche"] → A « Planche contact » (docs/design-directions.md §4) html[data-theme="salle"] → B « Salle sombre » (docs/design-directions.md §3) Les valeurs des deux palettes et des deux jeux de polices sont RECOPIÉES du document de direction, pas réinventées. Les noms sont des rôles (bg, ink, signal…), jamais des teintes : c'est ce qui permet de permuter les deux habillages sans toucher une ligne de balisage. base.css n'est jamais modifié ; tout passe par ici et par style.css. Aperçu de l'autre direction sans toucher au HTML : index.html?theme=salle ============================================================================ */ /* ============================================================================ LES POLICES, SERVIES PAR CE SITE ---------------------------------------------------------------------------- Aucune requête vers Google : les fichiers sont dans assets/fonts/ et partent du même domaine que la page (docs/securite.md, §RGPD). Ce sont les polices de la direction MONTRÉE, « Salle sombre » ; celles du thème Planche — Newsreader et Schibsted Grotesk — ne sont pas servies : le jour où on montre ce thème-là, il faudra les télécharger dans assets/fonts/ et les déclarer ici, à la suite. TROIS FAMILLES, TROIS RÔLES, ET PAS UNE DE PLUS. Instrument Serif les TITRES (--font-display). Un serif de labeur contemporain, dessiné pour les grands corps : c'est lui qui donne son ton aux trois thèmes de l'accueil et à toutes les têtes de page. Une seule graisse, 400, et son italique — la famille n'en a pas d'autre, et c'est très bien ainsi : un titre de ce corps n'a pas besoin d'être gras. Archivo TOUT LE RESTE : le texte courant, les libellés en capitales, les numéros. Elle est variable, 400 à 700. Poppins 300 UNE PHRASE, et une seule : le slogan de l'ouverture (--font-slogan, dans les invariants plus bas). Ce n'est pas un troisième alphabet de page, c'est la LETTRE DE LA CARTE DE VISITE de Noé — voir le bloc @font-face qui la déclare, et assets/fonts/README.md. JetBrains Mono a QUITTÉ le site. Elle portait les libellés et les numéros, et sa largeur fixe les étirait : à côté d'un titre serif, ce mono-là faisait un troisième alphabet dans la page. Les libellés reviennent donc à Archivo, en capitales espacées de 0.12em, à 12-13 px — c'est la lettre du texte courant, ramassée et espacée, et la page n'a plus que deux voix. Une famille = UN fichier, sauf l'italique du serif, qui est toujours un second dessin. Sous-ensemble LATIN seul — la plage exacte que servait Google. Le site est en français : le latin étendu, le grec, le cyrillique et le vietnamien ne servaient à personne. font-display: swap — le texte s'affiche tout de suite dans la police du système, et bascule à l'arrivée du fichier. Graisses relevées dans base.css et style.css, thème salle, et elles seules : Instrument Serif 400 — et rien d'autre : partout où le socle demandait du 600 ou du 700 sur un titre, style.css le ramène à 400, faute de quoi le navigateur fabriquerait un faux gras. Archivo 400 texte courant et méta · 500 numéros et navigation · 600 libellés capitales, bouton, libellé de champ · 700 mot d'accès Poppins 300, et style.css l'excepte nommément de la règle qui ramène les titres à 400. ============================================================================ */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url('../fonts/archivo-variable.woff2') format('woff2'); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-400.woff2') format('woff2'); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* L'italique est un SECOND DESSIN, pas une inclinaison de la romaine : sans lui, le navigateur pencherait les lettres droites et le résultat se voit. Il n'est PAS préchargé — rien ne l'emploie encore dans la page ; il est là pour que le jour où un mot doit être mis en italique, la fonte existe. */ @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-400-italic.woff2') format('woff2'); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* LA TROISIÈME FONTE, ET ELLE NE SERT QU'À UNE PHRASE : le slogan de l'ouverture de l'accueil. Ce n'est pas un troisième alphabet de page, c'est la LETTRE DE LA MARQUE — celle de la petite phrase imprimée sur la carte de visite de NS Visual, sous le monogramme. Le client a demandé que le site ouvre sur cette phrase-là ; l'écrire dans une autre lettre que sa carte, c'était la citer de travers. Poppins, et pas Montserrat : les deux sont des géométriques à « a » d'un seul étage, mais relevées sur la carte redressée et mises à la longueur de la phrase imprimée, ce sont les proportions de Poppins qui tombent dessus — même hauteur d'x (celle de Montserrat est nettement plus haute et rend la ligne plus grasse à longueur égale), mêmes bols circulaires, même rythme de mots d'un bout de la phrase à l'autre. UNE SEULE FACE, 300. La famille en compte neuf ; le site n'en sert qu'une, parce qu'une seule phrase l'emploie. Le fichier « latin » suffit à cette phrase-là (à et é sont dans U+0000-00FF) ; le latin étendu est déclaré derrière lui pour que le jour où le slogan change, aucune lettre ne manque — son unicode-range fait qu'il n'est JAMAIS téléchargé tant que rien ne l'appelle. Seul le « latin » est préchargé. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins-300.woff2') format('woff2'); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- Invariants : rythme, échelle, espaces (identiques aux deux directions) - */ :root { --lh-display: 1.06; /* LA LETTRE DE LA MARQUE, commune aux deux directions — et c'est voulu : ce n'est pas un choix d'habillage, c'est la lettre de la carte de visite de Noé. Elle ne sert QU'AU SLOGAN de l'ouverture (le h1 de .ecran), seul sur l'image depuis le lot 11 : les titres restent au --font-display de la direction, le texte au --font-text. */ --font-slogan: 'Poppins', system-ui, sans-serif; /* LE VOILE des panneaux de l'accueil — les trois thèmes et le devis. C'est un APLAT posé sur la photo de fond, jamais un dégradé et jamais un filtre : il baisse l'image d'un ton, il ne la retouche pas (la colorimétrie de Noé est sa signature). --voile est son opacité au repos, --voile-survol celle qu'il prend quand le pointeur entre dans le panneau mais pas dans le cadre (style.css, « le cadre qui s'efface »). Les valeurs ci-dessous sont celles d'avant le lot 12 ; la direction Salle les remplace plus bas. */ --voile-teinte: #0A0A0B; --voile: 0.5; --voile-survol: 0.15; --step-1: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); /* h4 */ --step-2: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem); /* h3 */ --step-3: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem); /* h2 de section */ --step-5: clamp(3rem, 2rem + 5vw, 6rem); /* display géant */ --container: 1180px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; --space-7: 6rem; --space-8: 8rem; --section-y: clamp(var(--space-5), 7vw, var(--space-7)); --dur-fast: 0.2s; --color-success: #1E7F4F; --color-error: #B42318; } /* ============================================================================ A — « PLANCHE CONTACT » (design-directions.md §4) Papier neutre, grille dense de vignettes numérotées, filets 1 px, aucune ombre, aucun arrondi. Le signal #B8442A est le feutre de sélection : trois emplois par page au maximum. ============================================================================ */ html[data-theme="planche"] { /* Couleurs — §4, recopiées telles quelles */ --color-bg: #F2F2F1; --color-surface: #FFFFFF; /* La surface des cartes de tarifs.html (lot 16) : sur le papier, il n'y a rien de plus clair que le blanc — c'est la surface elle-même. */ --color-surface-carte: #FFFFFF; /* Le mode papier de tarifs.html (lot 17) : sur le papier, les cartes sont déjà du papier — elles gardent la surface et l'encre de la direction. */ --papier-fond: #FFFFFF; --papier-encre: #141414; --papier-muet: #6E6B66; --papier-filet: rgba(20, 20, 20, 0.15); --papier-champ: #FFFFFF; --color-ink: #141414; --color-muted: #6E6B66; --color-line: rgba(20, 20, 20, 0.16); --color-accent: #141414; --color-accent-ink: #F2F2F1; --color-dark: #141414; --color-dark-ink: #F2F2F1; --color-signal: #B8442A; /* Typographie — §4 */ --font-display: 'Schibsted Grotesk', system-ui, sans-serif; --font-text: 'Newsreader', Georgia, serif; --font-label: 'Schibsted Grotesk', system-ui, sans-serif; /* rôle : libellés */ --tracking-display: -0.015em; --tracking-label: 0.1em; --step-4: clamp(2.75rem, 2rem + 4.2vw, 5.5rem); /* le nom est l'accroche */ --text-base: clamp(1.0625rem, 1rem + 0.3vw, 1.15rem); --lh-text: 1.62; /* Mise en page — §4 */ --gutter: clamp(1.25rem, 4vw, 3.5rem); --radius: 0; --radius-sm: 0; --radius-pill: 0; --shadow: none; --nav-height: 62px; /* Mouvement — §4 : rien sur la grille, une seule transition (la visionneuse) */ --dur: 0.35s; --ease: cubic-bezier(.2, .7, .2, 1); --reveal-y: 0px; --reveal-dur: var(--dur); --reveal-pas: 0s; /* la grille du papier n'apparaît pas : rien à décaler */ /* Rôles propres à la galerie */ --planche-max: 1440px; /* la planche est plus large que le texte */ --planche-pad: var(--gutter); /* elle reste dans la marge de papier */ --planche-gap-x: clamp(0.5rem, 1.6vw, 1.1rem); --planche-gap-y: clamp(1.5rem, 3vw, 2.5rem); --cadre-filet: 1px; /* le filet autour de chaque tirage */ } /* ============================================================================ B — « SALLE SOMBRE » (design-directions.md §3) Noir, aucun cadre et aucun fond autour de l'image, titres en serif, libellés et numéros en Archivo capitales. Fondu 0.4 s à l'entrée, rien d'autre. Aucune lueur, aucun verre dépoli, aucun dégradé, aucune ombre colorée. Seule la bande d'ambiance de l'accueil reste bord à bord : sur du noir elle ne se distingue plus par sa couleur, c'est sa largeur qui la signale. ============================================================================ */ html[data-theme="salle"] { /* Couleurs — §3, recopiées telles quelles, à une exception mesurée près (le gris secondaire, voir ci-dessous). */ --color-bg: #0A0A0B; --color-surface: #141416; /* LA SURFACE DES CARTES DE TARIFS.HTML (lot 16) : un cran au-dessus de --color-surface, dans la même famille de gris, pour que les cartes et la carte du formulaire se détachent du noir de la page sans devenir grises. Le site reste sombre ; ce sont les photos des cartes qui apportent la lumière. Valeur réglée sur captures parmi cinq, de #141416 à #252426 (README, « La page Tarifs »). */ --color-surface-carte: #1C1B1D; /* LE MODE PAPIER DE TARIFS.HTML (lot 17, classe tarifs--papier sur ) : les cartes et la carte du formulaire passent en blanc cassé sur la page sombre. Aucune couleur nouvelle pour la carte et son encre — ce sont l'encre et le fond de la direction, inversés. Deux valeurs seulement s'ajoutent, et toutes deux sont mesurées : --papier-muet le gris secondaire sur le papier : #5E5C59 tient 5,9:1 sur #F2F0EC et 6,7:1 sur le blanc des champs (4,5 exigé) ; --papier-champ le blanc des champs du formulaire. Les filets sont l'encre à 15 %. */ --papier-fond: var(--color-ink); --papier-encre: var(--color-bg); --papier-muet: #5E5C59; --papier-filet: rgba(10, 10, 11, 0.15); --papier-champ: #FFFFFF; --color-ink: #F2F0EC; /* §3 donne #8A8A8F. Mesuré sur le fond réel, il tient à 5,76:1 — au-dessus de la barre — mais les légendes sont en mono de 12 px, capitales et interlettrées : à ce corps-là 5,76 se devine plus qu'il ne se lit. Relevé à 7,61:1, soit moins de la moitié du contraste de l'encre (17,39:1) : le gris reste franchement secondaire, il devient seulement lisible. */ --color-muted: #A0A0A6; --color-line: rgba(242, 240, 236, 0.14); /* PLUS D'ACCENT DE COULEUR — lot 12, demande du client après la présentation du 10 septembre. Le teal sourd #3A6F66 du §3 est retiré du site montré : il tenait trois rôles (le fond d'un bouton plein, l'anneau de focus, le survol d'un lien) et, dans une page où chaque panneau est une photo, il faisait une quatrième couleur qui n'était à personne. Les deux rôles sont repris par l'encre et le fond de la palette : un bouton devient un pavé blanc à texte noir, un anneau de focus devient blanc — plus visible sur du noir que le teal ne l'était — et un survol monte du gris à l'encre. Aucune valeur nouvelle : ce sont --color-ink et --color-bg. La direction A garde SON signal (#B8442A) : elle n'est pas montrée, et on ne mélange pas les deux directions. */ --color-accent: #F2F0EC; --color-accent-ink: #0A0A0B; --color-dark: #000000; --color-dark-ink: #F2F0EC; --color-signal: #F2F0EC; /* Typographie — §3, révisée au lot 8 : le titre passe au SERIF. Le §3 donnait Archivo pour tout, et JetBrains Mono pour la signature des libellés. L'accueil s'ouvre maintenant sur un slogan posé plein cadre : un grotesque de labeur y disait « interface », là où il faut « auteur ». Instrument Serif ne sert QUE les titres ; Archivo garde le texte et reprend les libellés, que le mono étirait. */ --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-text: 'Archivo', system-ui, sans-serif; /* Le rôle est resté « mono » dans les feuilles ; la fonte, elle, ne l'est plus. C'est le même alphabet que le texte, en capitales espacées : ces deux variables ne se distinguent plus que par ce qu'elles nomment. */ --font-mono: 'Archivo', system-ui, sans-serif; --font-label: 'Archivo', system-ui, sans-serif; /* Un serif de titre ne se resserre pas comme un grotesque : à -0.02em ses empattements se touchaient dans les grands corps. */ --tracking-display: -0.01em; --tracking-label: 0.12em; /* Même échelle de titre que sur le papier : le nom est l'accroche dans les deux directions, il n'y a aucune raison qu'il soit plus petit ici. */ --step-4: clamp(2.75rem, 2rem + 4.2vw, 5.5rem); --text-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem); --lh-text: 1.55; /* Mise en page — §3 */ --gutter: clamp(1.25rem, 4vw, 3.5rem); --radius: 0; --radius-sm: 0; --radius-pill: 0; --shadow: none; --nav-height: 76px; /* Mouvement — §3. --dur est la durée des trois fondus de la direction (le mur, la barre, la visionneuse) et ne bouge pas. L'APPARITION D'UNE PIÈCE a la sienne : à 0.4 s et 10 px, le mouvement se devinait plus qu'il ne se voyait, et la page semblait seulement clignoter en défilant. 0.6 s et 16 px, c'est la même sobriété mais elle se lit ; --reveal-pas est l'écart d'une pièce à l'autre DANS UNE MÊME RANGÉE (galerie.js, poseDecalages). */ --dur: 0.4s; --ease: cubic-bezier(.2, .7, .2, 1); --reveal-y: 16px; --reveal-dur: 0.6s; --reveal-pas: 0.06s; /* L'écart entre les trois nœuds d'un THÈME de l'accueil — titre, ligne, cadre. Plus large que celui des pièces d'une rangée (60 ms) : là il s'agissait de désolidariser quatre images de même taille, ici de faire lire trois blocs de poids très différents, dans l'ordre. */ --theme-pas: 0.08s; /* Rôles propres à la galerie. Le mur de la salle est bâti comme celui de la planche — même largeur utile, même marge de page — avec DEUX écarts assumés, décidés parce que ses fonds bleus clairs se perdent sur du noir : l'image doit être plus grande (trois colonnes au lieu de quatre, voir style.css) et le mur plus serré (espacements réduits d'un tiers). */ --planche-max: 1440px; --planche-pad: var(--gutter); --planche-gap-x: clamp(0.35rem, 1.05vw, 0.75rem); --planche-gap-y: clamp(1rem, 2vw, 1.65rem); --cadre-filet: 0px; /* La hauteur de rangée du mur. Au-dessus de 768 px, le mur n'est plus une grille de colonnes mais une suite de RANGÉES JUSTIFIÉES : chaque rangée a une hauteur commune, et la largeur d'une pièce découle de son format (2:3, 3:2, 9:16, 16:9). --mur-h est la hauteur visée ; le nombre de pièces par rangée s'en déduit, et la rangée s'étire ensuite jusqu'aux deux marges. C'est ce qui supprime les trous sous les pièces horizontales. Valeur de départ, pas hauteur imposée : la rangée réelle s'en écarte de ce qu'il faut pour tomber juste. */ --mur-h: 300px; /* LE VOILE MONTE DE 0.5 À 0.72 — lot 12, demande du client. D'un panneau à l'autre les trois photos de fond n'ont pas la même dominante : le sport est presque noir, la mode est une image claire (des stores et une main en pleine lumière), le portrait est un fond de studio franchement bleu. À 0.5, la page changeait donc de couleur à chaque écran — c'est le reproche qui a été fait, « les couleurs sont trop mélangées ». Relevé sur la bande de fond qui dépasse du cadre, à 1440, en luminance sur 255 et en écart des canaux (la couleur) : sport mode portrait voile 0.5 L27 c1 L75 c3 L50 c43 voile 0.65 L23 c1 L55 c2 L38 c30 voile 0.72 L19 c1 L46 c1 L32 c24 ← retenu voile 0.8 L17 c1 L36 c1 L26 c18 0.65 laissait la mode deux fois plus claire que le sport et le portrait encore bleu ; 0.8 éteignait le sport, qui n'était plus qu'un aplat. À 0.72, les trois tombent dans le même ton sombre et on devine encore la photo — le sujet, le cadrage, les masses — mais plus sa couleur. C'est justement ce que rend le survol, qui redescend le voile à 0.15 : la couleur est ce qu'on va CHERCHER, elle n'est plus ce qu'on subit. La teinte, elle, est le fond de page lui-même : un voile d'une autre couleur serait un filtre, et la colorimétrie de Noé est sa signature. */ --voile-teinte: var(--color-bg); --voile: 0.72; } @media (min-width: 1200px) { html[data-theme="salle"] { --mur-h: 360px; } } /* 420 px seulement à partir de 1400. Entre 1200 et 1399, cette hauteur-là ne laissait plus tenir que deux pièces par rangée : la rangée s'étirait alors bien au-delà de la hauteur visée, et le mur perdait son grain. À 360, il en tient trois d'un bout à l'autre du palier. */ @media (min-width: 1400px) { html[data-theme="salle"] { --mur-h: 420px; } } /* ————— assets/css/base.css ————— */ /* ============================================================================ OPAQ — socle v1.0 — base.css ---------------------------------------------------------------------------- Fondations communes à tous les sites : reset, typographie, conteneur, grille, navigation, boutons, cartes, formulaires, apparitions, accessibilité. Ce fichier ne porte AUCUNE décision esthétique : tout passe par tokens.css. Un site ajoute son propre style.css APRÈS (composants métier, sections). ============================================================================ */ /* --- Reset minimal ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-height) + 1rem); } html:focus-within { scroll-behavior: smooth; } body { font-family: var(--font-text); font-size: var(--text-base); line-height: var(--lh-text); color: var(--color-ink); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } /* --- Typographie ---------------------------------------------------------- */ h1, h2, h3, h4, .display { font-family: var(--font-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: 600; text-wrap: balance; } h1, .h1 { font-size: var(--step-4); } h2, .h2 { font-size: var(--step-3); } h3, .h3 { font-size: var(--step-2); } h4, .h4 { font-size: var(--step-1); } .display { font-size: var(--step-5); } p, li { max-width: 65ch; text-wrap: pretty; } .lead { font-size: calc(var(--text-base) * 1.2); color: var(--color-muted); } .muted { color: var(--color-muted); } .label { font-size: 0.78rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); } .label--accent { color: var(--color-accent); } /* --- Conteneur, sections, grilles ---------------------------------------- */ .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } .container--narrow { --container: 800px; } .section { padding-block: var(--section-y); } .section--tight { padding-block: calc(var(--section-y) * 0.6); } .section--dark { background: var(--color-dark); color: var(--color-dark-ink); } .section--dark .muted, .section--dark .label { color: color-mix(in srgb, var(--color-dark-ink) 70%, transparent); } .section__head { margin-bottom: var(--space-5); } .section__head > * + * { margin-top: var(--space-2); } .grid { display: grid; gap: var(--space-4); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); } .split { display: grid; gap: var(--space-5); align-items: center; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split--reverse > :first-child { order: 2; } } .grid > *, .split > * { min-width: 0; } .stack > * + * { margin-top: var(--space-3); } .cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } /* --- Navigation ----------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-height); display: flex; align-items: center; background: color-mix(in srgb, var(--color-bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--dur-fast), background var(--dur-fast); } .nav.is-scrolled { border-bottom-color: var(--color-line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .nav__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; text-decoration: none; letter-spacing: -0.01em; } .nav__brand img { height: 36px; width: auto; } .nav__links { display: flex; gap: var(--space-4); align-items: center; } .nav__links a { text-decoration: none; font-weight: 500; opacity: 0.85; } .nav__links a:hover, .nav__links a[aria-current="page"] { opacity: 1; } .nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .nav__toggle span { display: block; width: 22px; height: 2px; background: currentColor; position: relative; } .nav__toggle span::before, .nav__toggle span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform var(--dur-fast); } .nav__toggle span::before { top: -7px; } .nav__toggle span::after { top: 7px; } @media (max-width: 899px) { .nav__toggle { display: inline-flex; } .nav__links { position: fixed; inset: var(--nav-height) 0 auto 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--gutter) var(--space-5); background: var(--color-bg); border-bottom: 1px solid var(--color-line); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast), transform var(--dur-fast); } .nav.is-open .nav__links { transform: none; opacity: 1; pointer-events: auto; } .nav.is-open .nav__toggle span { background: transparent; } .nav.is-open .nav__toggle span::before { transform: translateY(7px) rotate(45deg); } .nav.is-open .nav__toggle span::after { transform: translateY(-7px) rotate(-45deg); } } /* --- Boutons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.85em 1.6em; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; line-height: 1; background: var(--color-accent); color: var(--color-accent-ink); border: 1px solid var(--color-accent); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast), background var(--dur-fast); } .btn:hover { transform: translateY(-1px); opacity: 0.92; } .btn:active { transform: translateY(0); } .btn--ghost { background: transparent; color: inherit; border-color: var(--color-line); } .btn--ghost:hover { border-color: currentColor; opacity: 1; } .btn--small { padding: 0.6em 1.1em; font-size: 0.9rem; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } /* --- Cartes ----------------------------------------------------------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-4); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .card > * + * { margin-top: var(--space-2); } .card__media { border-radius: calc(var(--radius) - 4px); overflow: hidden; aspect-ratio: 4 / 3; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3); } .card__media img { width: 100%; height: 100%; object-fit: cover; } /* --- Hero ------------------------------------------------------------------- */ .hero { padding-block: clamp(var(--space-6), 12vw, var(--space-8)); } .hero__inner > * + * { margin-top: var(--space-3); } .hero__actions { margin-top: var(--space-4); } .hero--cover { position: relative; min-height: min(88dvh, 820px); display: grid; align-items: end; color: var(--color-dark-ink); isolation: isolate; } .hero--cover img.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero--cover::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.1)); } /* --- Chiffres clés, témoignages, FAQ (composants fréquents) ---------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-4); border-block: 1px solid var(--color-line); padding-block: var(--space-4); } .stat__value { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; font-weight: 600; } .quote { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; font-weight: 400; } .quote__by { margin-top: var(--space-2); font-size: 0.9rem; color: var(--color-muted); } .faq details { border-top: 1px solid var(--color-line); padding: var(--space-2) 0; } .faq details:last-child { border-bottom: 1px solid var(--color-line); } .faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.4rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-weight: 400; } .faq details[open] summary::after { content: '–'; } /* --- Formulaires -------------------------------------------------------------- */ .form { display: grid; gap: var(--space-3); } .form__row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: 0.4rem; } .field label { font-weight: 600; font-size: 0.92rem; } .field input, .field textarea, .field select { width: 100%; padding: 0.8em 1em; border-radius: var(--radius-sm); border: 1px solid var(--color-line); background: var(--color-surface); } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent; } .field textarea { min-height: 8rem; resize: vertical; } .form__hint { font-size: 0.85rem; color: var(--color-muted); } .form__status { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 500; } .form__status--ok { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); } .form__status--error { background: color-mix(in srgb, var(--color-error) 12%, transparent); color: var(--color-error); } .form .btn { justify-self: start; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */ /* --- Pied de page ----------------------------------------------------------------- */ .footer { border-top: 1px solid var(--color-line); padding-block: var(--space-6) var(--space-4); font-size: 0.95rem; } .footer__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .footer__bottom { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); color: var(--color-muted); font-size: 0.85rem; } .footer a { text-decoration: none; } .footer__grid strong, .footer__grid .stack > a { display: block; } .footer__grid .stack > * + * { margin-top: var(--space-1); } .footer a:hover { text-decoration: underline; } /* --- Apparitions au défilement ----------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 0.1s; } .reveal[data-delay="2"] { transition-delay: 0.2s; } .reveal[data-delay="3"] { transition-delay: 0.3s; } .no-js .reveal { opacity: 1; transform: none; } /* --- Accessibilité & utilitaires ----------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -100%; z-index: 100; padding: 0.6em 1em; background: var(--color-ink); color: var(--color-bg); border-radius: var(--radius-sm); } .skip-link:focus { top: 1rem; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .text-center { text-align: center; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } @media print { .nav, .footer, .btn, .skip-link { display: none !important; } body { background: #fff; color: #000; } } /* ————— assets/css/style.css ————— */ /* ============================================================================ OPAQ — site de NS Production — style.css ---------------------------------------------------------------------------- La mise en page. Chargé après tokens.css et base.css. UN SEUL BALISAGE, DEUX RENDUS. Le HTML produit par assets/js/galerie.js est rigoureusement identique dans les deux directions ; ce fichier seul décide de ce qu'on en fait : § A html[data-theme="planche"] — planche contact : mur en lignes, les numéros se suivant de gauche à droite ; photo à sa hauteur naturelle, vidéo dans un cadre 16:9 noir, numéro de vue en tête de légende, les « sélection » en tête de mur et au feutre. § B html[data-theme="salle"] — salle sombre : MÊME mur, MÊME liste de vidéos, MÊMES numéros de vue, sur du noir et en JetBrains Mono ; trois écarts assumés seulement (le mur en rangées justifiées plutôt qu'en colonnes, mur serré d'un tiers, accueil ouvert en plein cadre), signalés « ÉCART » au § B. Les différences de format (2:3, 3:2, 9:16, 16:9) sont portées par les attributs data-type / data-format des pièces. Dans le MUR de la salle, ces formats donnent aussi leur proportion aux cadres : les ratios déclarés sont ceux des fichiers eux-mêmes, si bien qu'aucune image n'est recadrée — le cadre a exactement la forme de la photo qu'il contient. Partout ailleurs, aucune proportion n'est imposée. Aucun filtre sur une photo, nulle part. ============================================================================ */ /* ========================================================================== 0. Ce que le socle propose et que les DEUX directions refusent ========================================================================== */ /* LE DÉFILEMENT DOUX, ET SANS UNE LIGNE DE JAVASCRIPT (la CSP interdirait de toute façon un gestionnaire inline). Le socle ne l'allume que sur html:focus-within, c'est-à-dire une fois que quelque chose a le focus : au premier clic sur une ancre, la page sautait. On l'allume donc sur html, et on l'éteint franchement sous mouvement réduit. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* LE PREMIER THÈME SE POSE EN HAUT DE L'ÉCRAN, sans laisser voir une bande de l'ouverture. Le socle réserve la hauteur de la navigation au-dessus de toute ancre (scroll-padding-top sur html) : c'est juste partout ailleurs, où la barre est opaque et masquerait le haut de la cible. Ici la barre est POSÉE SUR le panneau, exactement comme elle l'est sur l'ouverture — il n'y a rien à réserver. Un scroll-margin négatif de la même valeur annule ce rembourrage : les deux s'additionnent, et leur somme fait zéro. */ #travail { scroll-margin-top: calc(-1 * (var(--nav-height) + 1rem)); } .nav { background: var(--color-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--color-line); /* Le passage à is-scrolled, DANS LES DEUX SENS : sur l'accueil, la barre est posée sur l'image tant que la page n'a pas défilé, puis reprend son fond et son filet. Sans transition, ce fond apparaissait d'un coup au 25e pixel de défilement — un claquement noir en haut de l'écran. 0.35 s, la durée d'un changement d'état qu'on veut voir sans l'attendre. Le socle transitionne « background », un raccourci qui embarque l'image de fond ; ici seule la COULEUR change, on la nomme. */ transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease); } .nav.is-scrolled { border-bottom-color: var(--color-line); } .card, .btn, .card:hover { box-shadow: none; } :focus-visible { outline: 2px solid var(--color-signal); outline-offset: 3px; } [hidden] { display: none !important; } .label { font-family: var(--font-label); } body.est-bloque { overflow: hidden; } /* ========================================================================== 1. Structure commune (elle tient debout dans les deux directions) ========================================================================== */ /* --- Le logo, partout ---------------------------------------------------- */ /* Deux encres posées côte à côte dans le DOM, une seule visible : c'est la direction active qui choisit, pas le JavaScript. Le balisage reste donc rigoureusement le même d'une direction à l'autre. */ .logo-duo { display: block; } html[data-theme="planche"] .logo--sombre { display: none; } html[data-theme="salle"] .logo--clair { display: none; } /* --- Navigation ---------------------------------------------------------- */ .nav__brand { font-family: var(--font-display); text-decoration: none; display: flex; align-items: center; } /* En dessous de 80 px de haut, la baseline « NS PRODUCTION » du logo complet n'est plus lisible : la navigation porte donc le MONOGRAMME seul, servi depuis le dépôt en 384 x 400. Les attributs width/height réservent la place, seule la hauteur est imposée ici — et il faut passer devant la règle `.nav__brand img` du socle, d'où le sélecteur en deux classes. */ .nav__brand .nav__logo { height: 34px; width: auto; } .nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; } /* Les deux réseaux ferment la ligne. Le dessin fait 20 px ; la CIBLE en fait 44, comme le bouton du menu — c'est le minimum tenable au doigt, et il ne se voit pas. Une icône sans adresse reste affichée, à demi-encre : elle dit qu'il y aura là un compte, pas qu'il y en a un (voir lienReseau()). */ .nav__reseaux { display: flex; align-items: center; } .nav__reseau { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; text-decoration: none; } .nav__reseau .icone { display: block; width: 20px; height: 20px; } .nav__reseau[aria-disabled="true"] { opacity: 0.5; cursor: default; } /* --- LES CIBLES, AU DOIGT ------------------------------------------------- 44 px, en hauteur comme en largeur, pour tout ce qui se TOUCHE. Mesuré au lot 8 sur les trois largeurs de téléphone : le monogramme faisait 33 x 34, les liens du tiroir du menu 19 px de haut, ceux du pied 24 — on visait, on ratait, on retombait sur la page qu'on venait de quitter. Ce n'est pas le corps du texte qui grandit : c'est la BOÎTE autour de lui. Le mot garde sa taille, il gagne de l'air au-dessus et au-dessous. Restent en dehors, et c'est volontaire, les liens EN LIGNE DANS UNE PHRASE du bas de pied (« Mentions légales », « Confidentialité », « OPAQ ») : les grossir couperait la ligne en trois blocs, et une cible de 24 px dans un texte suivi est ce que la règle elle-même exempte (WCAG 2.2, 2.5.8). */ .skip-link { display: inline-flex; align-items: center; min-height: 44px; } .nav__brand { min-width: 44px; min-height: 44px; } @media (max-width: 899px) { .nav__links > a { display: flex; align-items: center; min-height: 44px; } } @media (max-width: 699px) { .footer__grid .stack > a, .footer__grid .stack .coord__valeur a { display: flex; align-items: center; min-height: 44px; } } /* --- Écran d'ouverture (accueil) ----------------------------------------- */ /* UN seul départ, et c'est un média. La page ne s'ouvre plus sur trois choses empilées — un titre géant, un logo, puis une bande vidéo — mais sur une image plein cadre que la navigation traverse. AUCUN texte n'est posé dessus : c'est la règle de la direction Salle, et c'est aussi ce qui dispense de tout voile ou dégradé pour rendre un texte lisible. Le nom est dans la navigation, sous la forme du monogramme ; le reste est dans la tête d'une ligne, juste en dessous. La hauteur est 100svh — la hauteur *petite* du viewport, celle qui ne change pas quand la barre d'adresse d'un téléphone se rétracte : sans elle l'écran d'ouverture sursaute au premier défilement. Le plancher de 560 px protège le cas du paysage sur un téléphone. Le média est une IMAGE dans le HTML livré, dans les deux directions. La vidéo est ajoutée par active(), et seulement sur un grand écran : voir assets/js/galerie.js, activeEcran(). */ .ecran { position: relative; display: block; height: 100svh; min-height: 560px; overflow: hidden; background: var(--color-dark); /* La navigation est collante et reste dans le flux : sans cette remontée, l'écran commencerait sous elle et le premier écran ferait 100svh + la hauteur de la navigation. */ margin-top: calc(-1 * var(--nav-height)); } .ecran__media { display: block; width: 100%; height: 100%; } .ecran__img, .ecran__video { width: 100%; height: 100%; object-fit: cover; } /* La vidéo est posée SUR le poster, et ne se montre qu'une fois prête : on ne voit jamais de cadre noir à sa place. Fondu 0.4 s, le seul mouvement de la direction. */ .ecran__video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur) var(--ease); } .ecran__video.est-vue { opacity: 1; } @media (prefers-reduced-motion: reduce) { .ecran__video { transition: none; } } /* Le SLOGAN, posé sur l'image, seul depuis le lot 11 : le bouton « Voir le travail » qui descendait au premier thème est parti à la demande du client. Centré dans l'écran entier : le bloc couvre les 100svh du média, et la navigation lui passe par-dessus sans le pousser. Aucun voile, aucun dégradé sous le texte — la direction les interdit et la photo n'est pas un fond. (Le fondu du bas de l'écran, lot 20, n'est pas sous le texte : il ne couvre que le bas, vers le panneau Sport, et il est dessous.) Ce qui rend le texte lisible sur une zone claire, c'est une OMBRE PORTÉE sur les lettres elles-mêmes, la même réponse que celle de la navigation quand elle est posée sur l'image. */ .ecran__texte { position: absolute; inset: 0; /* AU-DESSUS DE LA VIDÉO, et il faut le dire. La vidéo d'ambiance n'est pas dans le HTML livré : active() la crée après le chargement et l'ajoute à la fin de .ecran — donc APRÈS ce bloc-ci. Deux éléments positionnés sans z-index sont empilés dans l'ordre du document : sans cette ligne, la vidéo recouvrait le slogan dès qu'elle arrivait. Le HTML ne peut pas régler cela — l'ordre y est déjà le bon avant que la vidéo n'existe. 2 et non plus 1 depuis le lot 20 : l'aplat qui fond le bas de l'ouverture vers le panneau Sport (.ecran::after, z-index 1) passe entre la vidéo et le texte, jamais par-dessus le texte. */ z-index: 2; display: grid; place-items: center; } .ecran__inner { display: grid; justify-items: center; gap: var(--space-4); text-align: center; } .ecran__titre { /* LA LETTRE DE LA CARTE DE VISITE, et elle ne sert qu'ici. Poppins 300 : c'est la petite phrase imprimée sous le monogramme NS, et c'est la même phrase. Voir tokens.css, --font-slogan. Le serif de la direction reprend la main partout ailleurs. 300 et pas 400 : sur la carte la phrase est fine, et l'ombre portée ci-dessous suffit à la tenir sur l'image — c'est vérifié sur les captures à 390 et à 1440, poster compris. SON PROPRE CORPS, et plus --step-3/--step-4. L'échelle de titre du site est faite pour un serif à grande hauteur d'x ; une géométrique légère y paraît énorme, et surtout, à 88 px cette phrase-ci tenait sur deux lignes à 1440. Le palier haut (3.4rem, 54,4 px) la met sur UNE ligne à 1440 — 1064 px dans un conteneur de 1180 —, le palier bas (1.8rem, 28,8 px) sur DEUX à 390. Interlettrage 0.02em : relevé sur la carte redressée, où les mots tombent un peu plus à droite que Poppins par défaut. */ font-family: var(--font-slogan); font-weight: 300; font-size: clamp(1.8rem, 1.05rem + 3.2vw, 3.4rem); letter-spacing: 0.02em; /* --lh-display (1.06) est l'interligne d'un serif de titre ; les hampes et les jambages de Poppins sont longs, et deux lignes s'y touchaient. */ line-height: 1.15; color: #FFFFFF; /* DEUX OMBRES, et c'est ce qu'il faut : la courte (1 px, 2 px de diffusion) détache la lettre du pixel qu'elle touche — c'est elle qui la sauve sur un mur clair ; la longue (12 px) creuse un halo sous le mot et l'assoit sur l'image. Une seule des deux laissait toujours un cas illisible. */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.55); } /* --- Les trois thèmes de l'accueil --------------------------------------- */ /* Une section par thème, pleine largeur, sur son image de fond. Le voile est un APLAT et non un dégradé : il baisse la photo, il ne la « fond » pas dans le noir — c'est ce qui permet d'écrire dessus sans que l'image devienne une texture. Son opacité et sa teinte sont dans tokens.css (--voile, --voile-teinte) : c'est là qu'on règle jusqu'où la photo se devine, et c'est là que le lot 12 l'a montée de 0.5 à 0.72 pour que les trois panneaux et le devis lisent dans le même ton. */ .travail { display: block; } /* CHAQUE THÈME EST UN ÉCRAN. 100svh — la hauteur « petite » du viewport, celle qui ne bouge pas quand la barre d'adresse d'un téléphone se rétracte — avec un plancher de 640 px pour le paysage sur téléphone. C'est un minimum et non une hauteur imposée : quand le cadre est plus haut que l'écran (le portrait sur un téléphone), le panneau grandit avec lui au lieu de déborder. Les panneaux se suivent BORD À BORD : plus de trait entre eux, c'est le changement de photo qui dit qu'on a tourné la page. */ .theme { position: relative; isolation: isolate; display: grid; align-items: center; min-height: max(100svh, 640px); padding-block: var(--space-6); overflow: hidden; } .theme__fond { position: absolute; inset: 0; z-index: -1; background: var(--color-dark); } .theme__img { width: 100%; height: 100%; object-fit: cover; } .theme__fond::after { content: ''; position: absolute; inset: 0; /* Un aplat de la couleur de fond, et c'est son OPACITÉ qui porte le réglage : le survol n'a plus alors qu'une valeur à changer. Aucun filter, aucun mix-blend-mode : la colorimétrie de Noé n'est pas retouchée, elle est couverte. */ background: var(--voile-teinte); opacity: var(--voile); } /* LE CADRE EST L'ÉLÉMENT PRINCIPAL DU PANNEAU, et sa largeur le dit : celle du mur (--planche-max, 1440) au lieu de celle d'un texte (--container, 1180), et des marges de 5vw au lieu de la marge de page. À 1440 il occupe 1296 px des 1440, soit neuf dixièmes de l'écran ; la photo de fond n'en est plus que la bordure. Le plancher de 1.25rem garde une marge tenable sous 400 px, où 5vw ne feraient plus que 19 px. */ .theme__inner { width: min(100% - 2 * max(5vw, 1.25rem), var(--planche-max)); margin-inline: auto; } .theme__tete { display: grid; gap: var(--space-2); justify-items: start; } .theme__titre { font-size: var(--step-3); } .theme__ligne { max-width: 48ch; } /* LE CADRE : le seul bloc opaque de la page, et c'est voulu — il détache du fond ce sur quoi on peut cliquer. Une colonne sur un téléphone (la vidéo, puis l'aperçu), deux colonnes égales au-delà. */ .theme__cadre { background: var(--color-surface); border: 1px solid var(--color-line); padding: var(--space-4); display: grid; gap: var(--space-4); align-items: center; } /* L'en-tête tient toute la largeur du cadre, au-dessus des deux colonnes. Sur un téléphone il n'y a qu'une colonne : il est simplement le premier bloc. */ .theme__tete { grid-column: 1 / -1; } /* Les deux colonnes ont la même construction : ce qu'on regarde, puis la barre qui le nomme. C'est ce qui les fait finir ensemble. */ .theme__media, .apercu { min-width: 0; display: grid; grid-template-rows: auto auto; } .theme__media, .apercu { align-content: start; } /* L'APERÇU-BOUTON : quatre vignettes et un libellé, dans un seul lien. Les cadres portent la proportion des fichiers (§ B) et se suivent en 2 x 2, à six pixels l'un de l'autre — l'écart d'une planche-contact, pas d'une grille. Coins droits, comme tout le reste du site. */ .apercu { display: grid; gap: 0; text-decoration: none; color: inherit; } .apercu__mosaique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: start; } /* DEUX COLONNES, ET UNE HORIZONTALE LES PREND TOUTES LES DEUX — la règle du mur sous 768 px, reprise ici telle quelle. C'est le FORMAT de chaque pièce qui dessine, pas un réglage : quatre verticales font une mosaïque 2 x 2, deux verticales suivies d'une horizontale font deux vignettes puis une bande. Le reste — l'écart de six pixels, les coins droits, la proportion du fichier sur chaque cadre — ne change pas d'une forme à l'autre. */ .mosaique__vue[data-format="horizontal"] { grid-column: span 2; } /* « 1+1 » — UNE verticale puis une horizontale (thème 01 depuis le lot 11). La verticale n'a pas de voisine : elle prend les deux colonnes, comme la bande sous elle. Chaque vignette garde la proportion de son fichier, rien n'est recadré. Vaut à toutes les largeurs : empilée sur un téléphone, la verticale est donc aussi large que la façade au-dessus d'elle. */ .theme__cadre[data-apercu="1+1"] .mosaique__vue { grid-column: 1 / -1; } .mosaique__vue { position: relative; display: block; overflow: hidden; } .mosaique__img { width: 100%; height: 100%; object-fit: cover; } /* LA BOUCLE (lot 15). Une vidéo muette qu'active() pose PAR-DESSUS la couverture d'une pièce du cadre Sport — dans la façade (.piece__cadre) ou dans une vignette de l'aperçu (.mosaique__vue), deux hôtes déjà en position relative. Elle remplit exactement son hôte : le fichier a la proportion de la couverture, rien n'est recadré. Invisible tant qu'elle n'est pas prête, elle se révèle en 0.4 s — le fondu de la vidéo d'ouverture, pas un de plus. Elle ne prend aucun pointeur : le clic reste à ce qu'il y a dessous. Le repère de lecture d'une façade (::after du cadre) reste au-dessus d'elle, puisqu'il vient après elle dans le cadre. */ .boucle { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; } .boucle.est-vue { opacity: 1; } @media (prefers-reduced-motion: reduce) { .boucle { transition: none; } } /* LA BARRE, ET SES DEUX EXEMPLAIRES. Le ton du cadre, un filet en tête, un libellé à gauche, un signe à droite — et rien d'autre. Elle ne se distingue du cadre que par ce filet, ce qui est exactement ce qu'on veut : elle appartient à ce qu'elle termine, elle ne lui fait pas concurrence. 48 px de haut : la cible du pouce, et surtout la MÊME hauteur des deux côtés — c'est elle qui met les deux colonnes du cadre à niveau. */ .barre { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3); margin-top: 6px; /* le même écart qu'entre deux vignettes */ background: var(--color-surface); border-top: 1px solid var(--color-line); color: var(--color-ink); } /* Le libellé de gauche ne pousse jamais le signe hors du bandeau : il se coupe. Un titre de vidéo peut être long, la barre ne doit pas grandir. */ .barre__libelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barre__action { flex: none; display: inline-flex; align-items: center; gap: 0.5em; } .barre__signe { flex: none; line-height: 1; transition: transform var(--dur) var(--ease); } /* La barre du média est une commande : elle se donne la main du curseur. */ .theme__barre[role="button"] { cursor: pointer; } @media (min-width: 768px) { .theme__titre { font-size: var(--step-4); } .theme__cadre { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* QUARANTE-CINQ / CINQUANTE-CINQ, et ce n'est pas un goût : c'est le seul couple qui met les deux colonnes à la même hauteur quand l'aperçu est en « 2 + 1 ». Une grande verticale 9:16 large de 0,45 fait 0,80 de haut ; l'aperçu, lui, empile deux vignettes 9:16 de (0,55 − écart)/2 et une bande 16:9 de 0,55, soit 0,798. Mesuré à 1440 : 960 px contre 958,6 — un pixel et demi d'écart sur près d'un mètre de cadre. En « fr » et non en pour cent : les pour cent ignorent l'écart entre colonnes et débordent de sa largeur. */ .theme__cadre[data-apercu="2+1"] { grid-template-columns: 45fr 55fr; } /* Le sens alterne : sur un thème pair, le média passe à droite (order), donc c'est la SECONDE colonne qui doit faire 45. */ .theme:nth-of-type(even) .theme__cadre[data-apercu="2+1"] { grid-template-columns: 55fr 45fr; } /* « 1+1 » — LA FAÇADE VERTICALE EN GRAND (lot 11). D'un côté une façade 9:16 large de a, de l'autre une verticale 9:16 puis une bande 16:9, toutes deux larges de b, six pixels entre elles ; les deux barres en dessous sont jumelles, elles s'annulent. Même hauteur des deux côtés : a × 16/9 = b × 16/9 + 6 + b × 9/16 soit 256 a = 337 b + 864. Avec a + b = S, la largeur utile (le cadre moins son écart de colonnes) : b = S × 256/593 − 864/593 px a = le reste C'est le « 57 / 43 » du dessin, au pixel près : 56,83 / 43,17, moins 1,457 px — sans cette correction, les six pixels entre les deux vignettes laissaient l'aperçu six pixels plus bas que la façade. En calc et non en fr : l'écart de 6 px est une constante, une proportion seule ne peut pas l'absorber. Les pour cent d'une piste de grille se rapportent à la boîte de contenu du cadre, d'où le retrait de l'écart. */ .theme__cadre[data-apercu="1+1"] { grid-template-columns: minmax(0, 1fr) calc((100% - var(--space-4)) * 256 / 593 - 864px / 593); } .theme:nth-of-type(even) .theme__cadre[data-apercu="1+1"] { grid-template-columns: calc((100% - var(--space-4)) * 256 / 593 - 864px / 593) minmax(0, 1fr); } /* LE SENS ALTERNE : la vidéo à gauche pour un thème impair, à droite pour un pair. Rien ne change dans le HTML — les deux colonnes y sont toujours écrites dans le même ordre, seule leur place bascule. Trois sections qui se répètent à l'identique se lisent comme un tableau ; alternées, elles se lisent comme trois pages. */ .theme:nth-of-type(even) .theme__media { order: 2; } } /* « 1+2 » — LA PAYSAGE EN TÊTE, PUIS DEUX VERTICALES (lot 19, thème Sport). Le cadre n'a pas de façade : l'aperçu en est le seul contenu, sous l'en-tête, et il prend toute la largeur à toutes les tailles. Sous 1024 px, rien à ajouter : c'est la mosaïque ordinaire — la paysage prend les deux colonnes, les deux verticales partagent la rangée suivante, donc à la même hauteur l'une que l'autre. */ .theme__cadre[data-apercu="1+2"] { grid-template-columns: minmax(0, 1fr); } /* À PARTIR DE 1024 PX, UNE SEULE RANGÉE, UNE DIMENSION VERROUILLÉE : la hauteur. Les trois cadres gardent la proportion de leur fichier (16:9, 9:16, 9:16) ; pour qu'ils tombent à la même hauteur h, leurs largeurs doivent être dans le rapport 16/9 : 9/16 : 9/16, soit 256 : 81 : 81 — des « fr », qui se partagent la place une fois retirés les deux écarts de 6 px. La rangée entière est donc large de h × 418/144 + 12 px, et h est le plus petit de deux : — ce que permet la LARGEUR du cadre : (largeur − 12 px) × 72/209 ; — ce que permet la HAUTEUR de l'écran : 100svh moins tout ce que le panneau empile autour de la rangée (--rangee-reserve, tokens ci-dessous), pour que l'en-tête, la rangée et le bouton tiennent dans l'écran, sans défiler, à 1440 × 900 comme à 1366 × 768. Quand c'est la hauteur qui décide, la rangée est plus étroite que le cadre : elle se centre, et sa barre (le bouton) la suit, puisqu'elle est de la même largeur que l'aperçu. Un plancher (--rangee-min) empêche un écran très bas de réduire les images à des timbres : le panneau grandit alors, comme il le fait déjà sur téléphone. « 100cqi » est la largeur de contenu du cadre, d'où container-type. */ @media (min-width: 1024px) { .theme__cadre[data-apercu="1+2"] { container-type: inline-size; --rangee-min: 240px; /* 2 × --space-6 (le panneau) + 2 × --space-4 et 2 px de bordure (le cadre) + l'en-tête + --space-4 (l'écart) + la barre et son écart de 6 px. L'en-tête et la barre sont MESURÉS sur la page rendue : 175 px et 59 px à partir de 1366 (l'en-tête ne fait que 161 px à 1024, où le titre est plus petit — la réserve y est donc large de 14 px, ce qui ne coûte que quelques pixels de rangée). Soit 466 px en tout. Un titre ou une ligne réécrits sur deux lignes demanderaient de refaire la mesure. */ --rangee-reserve: calc(2 * var(--space-6) + 2 * var(--space-4) + 2px + 175px + var(--space-4) + 65px); } .theme__cadre[data-apercu="1+2"] .apercu { --rangee-h: max(var(--rangee-min), min((100cqi - 12px) * 72 / 209, 100svh - var(--rangee-reserve))); width: calc(var(--rangee-h) * 209 / 72 + 12px); max-width: 100%; justify-self: center; } .theme__cadre[data-apercu="1+2"] .apercu__mosaique { grid-template-columns: 256fr 81fr 81fr; } .theme__cadre[data-apercu="1+2"] .mosaique__vue[data-format="horizontal"] { grid-column: auto; } } /* --- LE CADRE QUI S'EFFACE, ORDINATEUR SEULEMENT ------------------------ Le panneau est bâti sur une photo, et on ne la voyait plus : le voile d'un côté, le cadre opaque qui couvre neuf dixièmes de la largeur de l'autre. Elle n'était plus un fond, elle était une bordure. Depuis le lot 12 le voile est plus épais encore (0.72) : ce mouvement-ci est donc le SEUL endroit où la couleur des photos de fond se donne, et c'est bien ce qu'on veut. Alors quand le pointeur entre dans le panneau MAIS PAS dans le cadre, le cadre s'efface presque (0.15) et le voile s'allège : la photo se montre en entier, le temps qu'on la regarde. Dès que le pointeur revient sur le cadre — ou qu'un de ses éléments prend le focus au clavier — tout revient. Trois précautions, et elles font tout : — OPACITÉ SEULEMENT. Jamais visibility, jamais pointer-events : à 0.15 le cadre est toujours là, toujours cliquable, et le pointeur qui le traverse le rallume. Un cadre qu'on aurait rendu inerte serait un piège. — ORDINATEUR SEULEMENT, par (hover: hover) and (pointer: fine). Sur un écran tactile, « survoler » n'existe pas : le doigt qui effleure laisserait le cadre effacé derrière lui. — :focus-within pour le clavier, qui ne survole rien : tabuler dans le cadre le rallume, sans quoi on remplirait un cadre invisible. Le voile, lui, demande :has() — c'est la seule façon de dire « le panneau est survolé, mais pas son cadre ». Là où :has() manque, cette règle-là est ignorée et l'autre tient : le cadre s'efface quand même, le voile reste à --voile. C'est un repli, pas une panne. */ @media (hover: hover) and (pointer: fine) { .theme__cadre { transition: opacity 0.45s var(--ease); } .theme:hover .theme__cadre { opacity: 0.15; } .theme .theme__cadre:hover, .theme .theme__cadre:focus-within { opacity: 1; } /* Le voile : c'est son OPACITÉ qui bouge, de --voile (0.72) à --voile-survol (0.15). La couleur ne change pas — seule la quantité de noir posée dessus. C'est ce geste-ci qui rend la photo : au repos les trois panneaux sont dans le même ton, et la couleur de chacun est ce qu'on va chercher. */ .theme__fond::after { transition: opacity 0.45s var(--ease); } .theme:hover:not(:has(.theme__cadre:hover)):not(:has(.theme__cadre:focus-within)) .theme__fond::after { opacity: var(--voile-survol); } /* Mouvement réduit : le même effet, mais sans le fondu. Ce n'est pas une animation d'agrément — c'est ce qui donne accès à l'image. */ @media (prefers-reduced-motion: reduce) { .theme__cadre, .theme__fond::after { transition: none; } } } /* --- Le panneau de devis, qui ferme l'accueil ---------------------------- */ /* Il ferme la page SUR UNE IMAGE, comme les trois thèmes l'ouvrent : même fabrique de fond, même voile plat. Sans image déclarée (accueil.devis_fond), il reste l'aplat de fond de page qu'il était. */ .panneau { position: relative; isolation: isolate; background: var(--color-bg); padding-block: var(--section-y); } .panneau__fond { position: absolute; inset: 0; z-index: -1; background: var(--color-dark); } /* LE VISAGE EN ENTIER. Le panneau est large et bas, la couverture est un 16:9 : « cover » centré coupait le haut du cadre, donc le crâne. La tête occupe le quart supérieur de l'image — on remonte donc le point d'ancrage à 25 %, ce qui fait entrer tout le visage dans la fenêtre visible, à 1440 comme à 390. Aucun recadrage du fichier : c'est le même, regardé plus haut. */ .panneau__img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .panneau__fond::after { content: ''; position: absolute; inset: 0; /* LE MÊME VOILE QUE LES TROIS THÈMES, à la variable près : le devis ferme la page sur une image, il doit fermer dans le ton où les trois ont lu. */ background: var(--voile-teinte); opacity: var(--voile); } .panneau__inner { display: grid; gap: var(--space-3); justify-items: start; } .panneau__titre { font-size: var(--step-3); } .panneau__intro { color: var(--color-muted); max-width: 56ch; } .panneau__bouton { width: 100%; min-height: 48px; margin-top: var(--space-2); } @media (min-width: 700px) { .panneau__bouton { width: auto; } } /* --- Les jonctions entre panneaux (lot 19, refaites au lot 20) ------------ Ouverture → Sport, Sport → Mode, Mode → Portrait, Portrait → devis. Les deux images ne se touchent jamais sur une ligne nette. Le filet tracé au défilement du lot 19 est parti : le fondu suffit. Tout est ici, en CSS — identique sans JavaScript et sous mouvement réduit. LA FORME D'UNE JONCTION, de haut en bas : — l'image du dessus s'éteint vers le noir du voile sur --fondu-long (20svh), selon une courbe douce : onze arrêts sur une « smoothstep » (3t² − 2t³), qui part lentement et arrive lentement — on ne voit ni où le dégradé commence ni où il finit ; — une BANDE PLEINE de la couleur du voile, 2 × --fondu-bande (4svh) : les deux images ne sont jamais visibles au même endroit, même en transparence ; — l'image du dessous s'allume sur --fondu-long, selon la même courbe. En svh et non en vh : la hauteur petite du viewport, qui ne saute pas quand la barre d'adresse d'un téléphone se replie. COMMENT. Sur les fonds des panneaux, un MASQUE sur le bloc du fond (l'image et son voile ensemble), jamais un filtre sur la photo — sa colorimétrie n'est pas touchée, elle est seulement moins couvrante au bord. Ce qui apparaît dessous est le fond de page, la teinte même du voile (tokens.css, --voile-teinte). Une seule image de masque porte le haut ET le bas ; un bord qui ne se fond pas a ses deux longueurs à zéro, et tous ses arrêts tombent au bord. Sur l'OUVERTURE, où il y a une vidéo, pas de masque : un aplat de la couleur du voile posé PAR-DESSUS la vidéo, et c'est sur cet aplat qu'est le masque (voir .ecran::after plus bas). Le slogan est au-dessus de l'aplat, et bien plus haut que lui. */ :root { --fondu-long: 20svh; --fondu-bande: 2svh; } .travail .theme__fond, .travail + .panneau .panneau__fond { --fh: 0px; /* longueur du fondu du haut */ --bh: 0px; /* demi-bande pleine du haut */ --fb: 0px; /* longueur du fondu du bas */ --bb: 0px; /* demi-bande pleine du bas */ --masque-fondu: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--bh), rgba(0, 0, 0, 0.028) calc(var(--bh) + var(--fh) * 0.1), rgba(0, 0, 0, 0.104) calc(var(--bh) + var(--fh) * 0.2), rgba(0, 0, 0, 0.216) calc(var(--bh) + var(--fh) * 0.3), rgba(0, 0, 0, 0.352) calc(var(--bh) + var(--fh) * 0.4), rgba(0, 0, 0, 0.5) calc(var(--bh) + var(--fh) * 0.5), rgba(0, 0, 0, 0.648) calc(var(--bh) + var(--fh) * 0.6), rgba(0, 0, 0, 0.784) calc(var(--bh) + var(--fh) * 0.7), rgba(0, 0, 0, 0.896) calc(var(--bh) + var(--fh) * 0.8), rgba(0, 0, 0, 0.972) calc(var(--bh) + var(--fh) * 0.9), rgba(0, 0, 0, 1) calc(var(--bh) + var(--fh)), rgba(0, 0, 0, 1) calc(100% - var(--bb) - var(--fb)), rgba(0, 0, 0, 0.972) calc(100% - var(--bb) - var(--fb) * 0.9), rgba(0, 0, 0, 0.896) calc(100% - var(--bb) - var(--fb) * 0.8), rgba(0, 0, 0, 0.784) calc(100% - var(--bb) - var(--fb) * 0.7), rgba(0, 0, 0, 0.648) calc(100% - var(--bb) - var(--fb) * 0.6), rgba(0, 0, 0, 0.5) calc(100% - var(--bb) - var(--fb) * 0.5), rgba(0, 0, 0, 0.352) calc(100% - var(--bb) - var(--fb) * 0.4), rgba(0, 0, 0, 0.216) calc(100% - var(--bb) - var(--fb) * 0.3), rgba(0, 0, 0, 0.104) calc(100% - var(--bb) - var(--fb) * 0.2), rgba(0, 0, 0, 0.028) calc(100% - var(--bb) - var(--fb) * 0.1), rgba(0, 0, 0, 0) calc(100% - var(--bb)), rgba(0, 0, 0, 0) 100%); -webkit-mask-image: var(--masque-fondu); mask-image: var(--masque-fondu); } /* Le haut : tout thème qui suit un autre thème, le premier thème s'il suit l'ouverture, et le panneau de devis. */ .travail .theme + .theme .theme__fond, .ecran + .travail .theme:first-child .theme__fond, .travail + .panneau .panneau__fond { --fh: var(--fondu-long); --bh: var(--fondu-bande); } /* Le bas : tout thème suivi d'un thème, et le dernier s'il est suivi du panneau de devis (:has ; sans :has, ce bord-là reste net, rien de cassé). */ .travail .theme:has(+ .theme) .theme__fond, .travail:has(+ .panneau) .theme:last-child .theme__fond { --fb: var(--fondu-long); --bb: var(--fondu-bande); } /* LE BAS DE L'OUVERTURE. Un aplat de la couleur du voile, haut de --fondu-long + --fondu-bande, posé sur le bas de l'écran, AU-DESSUS du poster et de la vidéo (z-index 1) et SOUS le slogan (z-index 2, voir .ecran__texte). La même courbe que les fonds, lue de bas en haut : plein sur la demi-bande, puis transparent au bout du fondu. Aucun filtre, aucun masque sur la vidéo elle-même : le masque est sur l'aplat, qui ne bouge pas. Il ne prend aucun pointeur. */ .ecran::after { content: ''; position: absolute; inset: auto 0 0 0; z-index: 1; height: calc(var(--fondu-long) + var(--fondu-bande)); background: var(--voile-teinte); pointer-events: none; --masque-ouverture: linear-gradient(to top, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) var(--fondu-bande), rgba(0, 0, 0, 0.972) calc(var(--fondu-bande) + var(--fondu-long) * 0.1), rgba(0, 0, 0, 0.896) calc(var(--fondu-bande) + var(--fondu-long) * 0.2), rgba(0, 0, 0, 0.784) calc(var(--fondu-bande) + var(--fondu-long) * 0.3), rgba(0, 0, 0, 0.648) calc(var(--fondu-bande) + var(--fondu-long) * 0.4), rgba(0, 0, 0, 0.5) calc(var(--fondu-bande) + var(--fondu-long) * 0.5), rgba(0, 0, 0, 0.352) calc(var(--fondu-bande) + var(--fondu-long) * 0.6), rgba(0, 0, 0, 0.216) calc(var(--fondu-bande) + var(--fondu-long) * 0.7), rgba(0, 0, 0, 0.104) calc(var(--fondu-bande) + var(--fondu-long) * 0.8), rgba(0, 0, 0, 0.028) calc(var(--fondu-bande) + var(--fondu-long) * 0.9), rgba(0, 0, 0, 0) 100%); -webkit-mask-image: var(--masque-ouverture); mask-image: var(--masque-ouverture); } /* --- Tête de page : nom / titre de page ---------------------------------- */ .tete { padding-block: var(--section-y) 0; } .tete__inner > * + * { margin-top: var(--space-2); } .tete__accroche { font-size: calc(var(--text-base) * 1.25); max-width: 34ch; } .tete__sous { color: var(--color-muted); max-width: 46ch; } /* --- Bloc générique ------------------------------------------------------ */ .bloc { padding-block: var(--section-y); } .bloc__tete { margin-bottom: var(--space-4); } .bloc__tete > * + * { margin-top: var(--space-2); } /* --- Hôte de la planche : c'est lui qui décide « marge » ou « bord à bord » */ .planche-hote { width: min(100% - 2 * var(--planche-pad), var(--planche-max)); margin-inline: auto; } /* --- Filtres ------------------------------------------------------------- */ .filtres { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; } .filtre { font-family: var(--font-label); font-size: 0.76rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); padding: 0.35em 0; border-bottom: 1px solid transparent; } .filtre:hover { color: var(--color-ink); } .filtre[aria-pressed="true"] { color: var(--color-ink); border-bottom-color: var(--color-ink); } .filtres__compte { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); } /* --- Une pièce (photo ou vidéo) ------------------------------------------ */ .piece { margin: 0; min-width: 0; } .piece__ouvrir { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: inherit; color: inherit; } .piece__facade { position: relative; display: block; } .piece__cadre { position: relative; display: block; background: transparent; border: var(--cadre-filet) solid var(--color-line); } /* Par défaut, aucune proportion imposée sur un cadre : l'image garde sa hauteur naturelle et c'est elle qui donne au cadre la sienne. Deux exceptions, toutes deux au § B : — le lecteur YouTube, qui n'a pas d'image pour lui donner sa hauteur et reprend donc le format de sa pièce ; — le MUR de la salle, où le cadre reçoit la proportion déclarée par data-type / data-format. Ce n'est pas un recadrage : ces proportions SONT celles des fichiers (22 photos en 2:3, 2 en 3:2, vidéos en 16:9 ou 9:16), donc l'image remplit son cadre sans qu'un pixel soit coupé. C'est la condition pour que des rangées à hauteur commune tombent juste. Aucun filter, aucun mix-blend-mode, aucune opacité au repos : sa colorimétrie est sa signature. */ .piece__img { width: 100%; height: 100%; object-fit: contain; } /* État « le fichier n'est pas encore sur Cloudinary » : le cadre garde sa place pour que la planche se lise quand même. Disparaît dès que l'image existe. */ .piece__absente { position: absolute; inset: 0; display: none; place-items: center; font-family: var(--font-label); font-size: 0.68rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); } .est-absente > .piece__img { visibility: hidden; } .est-absente > .piece__absente { display: grid; } /* --- La couverture qui lit (façade vidéo, lot 20) ------------------------ Quand la pièce a un identifiant YouTube, la couverture ENTIÈRE est la commande (.piece__lecture : un lien vers YouTube dans le document livré, un bouton une fois active() passé) — on clique n'importe où sur l'image. Au centre, un BOUTON ROND : 64 px sur ordinateur, 56 sur téléphone, un triangle blanc sur un disque noir translucide, aucune couleur d'accent. Commun aux deux directions : le bouton sous l'image, qu'il fallait aller chercher, est parti. Au survol, le disque fonce ; au clavier, un anneau d'encre entoure la couverture. Le disque n'est ni un voile ni du verre dépoli : aucun flou, rien derrière lui n'est retouché. */ .piece__lecture { position: relative; display: block; color: inherit; text-decoration: none; cursor: pointer; } .piece__lecture:focus-visible { outline: 2px solid var(--color-signal); outline-offset: 3px; } .piece__rond { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); pointer-events: none; transition: background-color var(--dur-fast) var(--ease); } .piece__rond::before { content: ''; position: absolute; /* Le triangle est décalé d'un douzième vers la droite : centré sur sa boîte, un triangle paraît trop à gauche — son centre de gravité est au tiers. */ top: 50%; left: 54%; width: 18px; height: 21px; margin: -10.5px 0 0 -9px; background: #FFFFFF; clip-path: polygon(0 0, 100% 50%, 0 100%); } @media (min-width: 768px) { .piece__rond { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .piece__rond::before { width: 20px; height: 24px; margin: -12px 0 0 -10px; } } .piece__lecture:hover .piece__rond, .piece__lecture:focus-visible .piece__rond { background: rgba(0, 0, 0, 0.75); } /* « SUR YOUTUBE ↗ » (lot 25). Trois vidéos ne s'intègrent pas — YouTube l'interdit — : leur couverture ouvre l'onglet YouTube au lieu de poser un lecteur, et elle le dit AVANT le clic, sous le bouton rond. Un libellé du site (Archivo capitale, interlettré), blanc, SANS cartouche ni voile : c'est une ombre portée courte qui le tient sur l'image, la réponse déjà retenue pour la navigation posée sur le poster et pour le triangle de lecture. Il ne prend aucun pointeur : c'est la couverture entière qui est le lien. */ .piece__mention { position: absolute; top: calc(50% + 40px); left: 0; right: 0; text-align: center; font-family: var(--font-label); font-size: 0.72rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); pointer-events: none; } @media (min-width: 768px) { .piece__mention { top: calc(50% + 46px); } } @media (prefers-reduced-motion: reduce) { .piece__rond { transition: none; } } .piece__lecteur { display: block; width: 100%; height: 100%; border: 0; } /* Le repère de lecture : un triangle plein posé en bas à gauche de la couverture. Il n'est pas là pour décorer — sans lui, la page Vidéos se lit comme une page de photos. Il disparaît dès que le lecteur est lancé. L'ombre portée est sur le triangle SEUL (un pseudo-élément) : elle le garde lisible sur une couverture claire. Aucun filtre ne touche l'image. */ .piece--video .piece__cadre::after { content: ''; position: absolute; left: 0.7rem; bottom: 0.7rem; width: 0.7rem; height: 0.85rem; background: #FFFFFF; clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); pointer-events: none; } .piece__facade.est-lue .piece__cadre::after { content: none; } /* Une couverture qui lit a son bouton rond au centre : le petit triangle du coin ferait doublon. Il reste sur les vidéos sans identifiant YouTube. */ .piece__lecture .piece__cadre::after { content: none; } /* --- Légende ------------------------------------------------------------- */ .piece__legende { display: grid; gap: 0.1rem; } .piece__num { font-variant-numeric: tabular-nums; } /* --- Coordonnées (pied de page) ------------------------------------------ */ /* Les lignes de coordonnées de contact.html sont parties avec la page (lot 13) ; reste la valeur, que le pied de page emploie. */ .coord__valeur { font-size: calc(var(--text-base) * 1.05); } /* --- Demande de devis (tarifs) ------------------------------------------- */ /* Le formulaire tient dans la largeur d'un texte et pas dans celle du mur : un champ large de 1180 px ne se remplit pas, il s'arpente. */ .devis { max-width: 46rem; } .devis > * + * { margin-top: var(--space-3); } .devis__intro { color: var(--color-muted); max-width: 56ch; } /* Le libellé d'un champ porte le rôle « label » du site. Le socle donne à « .field label » un corps à lui, plus spécifique que .label ; on lui rend la main. */ .devis .field label.label { font-size: 0.78rem; } /* « (FACULTATIF) », VOISIN DU LIBELLÉ (lot 15). La mention a quitté le