/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */ /* Polices auto-hébergées. Elles étaient chargées par @import DANS ce fichier : le navigateur devait télécharger et parser 42 Ko de CSS avant de découvrir l'URL de Google Fonts, soit quatre allers-retours en série dont deux vers une origine tierce. En local, la chaîne tombe à deux, et aucune adresse IP de visiteur ne part chez Google (RGPD). Les deux faces latines du premier écran sont préchargées depuis le de chaque page. */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400-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; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400-latin.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: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-500-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-500-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; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-500-latin.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: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-700-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-700-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; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-700-latin.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: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-condensed-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-condensed-400-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; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-condensed-400-latin.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: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-condensed-600-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-condensed-600-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; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-condensed-600-latin.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; } :root { --nav-h: 64px; --color-bg: #f2f2f3; --color-surface: #e9e9ea; --color-text: #1d1f20; --color-accent: #5980a6; --color-accent-2: #728fab; --color-divider: color-mix(in srgb, #1d1f20 16%, transparent); /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the same step of any role matches the others in visual value. */ --color-neutral-100: #f5f5f8; --color-neutral-200: #e7e7ea; --color-neutral-300: #d4d4d7; --color-neutral-400: #b7b7ba; --color-neutral-500: #98989b; --color-neutral-600: #7a7a7d; --color-neutral-700: #5d5d60; --color-neutral-800: #424244; --color-neutral-900: #2b2b2d; --color-accent-100: #eef6ff; --color-accent-200: #d6ebff; --color-accent-300: #b5d9fd; --color-accent-400: #94bce3; --color-accent-500: #749dc4; --color-accent-600: #597ea3; --color-accent-700: #416180; --color-accent-800: #2c455d; --color-accent-900: #1d2d3d; --color-accent-2-100: #eef6ff; --color-accent-2-200: #d6ebff; --color-accent-2-300: #bdd8f2; --color-accent-2-400: #9ebbd8; --color-accent-2-500: #7e9cb8; --color-accent-2-600: #627d98; --color-accent-2-700: #486077; --color-accent-2-800: #314457; --color-accent-2-900: #1f2d3a; /* Mesure de lecture des guides — 36rem = 576px, soit ~68 signes du corps de texte à 16px. En `rem` et non en `ch` : `ch` se calcule sur la police de CHAQUE élément, si bien que le cartouche à 12px et le filet à 15px tombaient 64 à 116px en deçà de la colonne qu'ils devaient border. `rem` donne la même valeur partout et suit le réglage de taille du navigateur. */ /* Largeur utile des pages et gouttière latérale. Le contenu tenait dans 1200 px : sur un écran de 2240 px cela laissait 1185 px de blanc, soit 53 % de la fenêtre vide. Ces deux valeurs sont solidaires — la nav aligne son sigle sur elles (voir .nav padding-inline). */ --largeur-page: 1440px; --gouttiere: clamp(18px, 4vw, 64px); /* Mesure de lecture des guides : 40rem = 640 px, soit environ 73 signes par ligne à 16 px. On reste sous le plafond de lisibilité (75) tout en récupérant 64 px de vide mort dans la colonne de texte. */ --mesure-article: 42rem; --font-heading: "Barlow Condensed", system-ui, sans-serif; --font-heading-weight: 600; --font-body: "Barlow", system-ui, sans-serif; --space-1: 3.4px; --space-2: 6.8px; --space-3: 10.2px; --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; /* Elevation — derived from the ground: soft ink-tinted shadows on a light theme, a hairline edge + ambient darkness on a dark one. */ --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent); } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); } .blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; } /* The overlay image treatments (halftone, duotone) clip their overlay (overflow:hidden); a blueprint wrapper draws its registration marks outside the box, so when both classes share a wrapper the frame must win. */ .blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; } .blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; } .blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; } .blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; } .blueprint > .corner.tl { top: -6px; left: -6px; } .blueprint > .corner.tr { top: -6px; right: -6px; } .blueprint > .corner.bl { bottom: -6px; left: -6px; } .blueprint > .corner.br { bottom: -6px; right: -6px; } /* ── Blueprint timeline: a vertical rail with a + registration cross at each point ── */ .bp-timeline { list-style: none; margin: 0; padding: 0; position: relative; } .bp-timeline::before { content: ""; position: absolute; left: 12px; top: 12px; bottom: 12px; width: 1px; background: var(--color-divider); } /* Scroll-progress fill: the rail fills accent-blue as the section scrolls in. JS sets --p (0 → 1) on scroll; the blue line grows from the top. */ .bp-timeline.scroll-fill::after { content: ""; position: absolute; left: 12px; top: 12px; bottom: 12px; width: 1px; background: var(--color-accent); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .12s ease-out; } .bp-point { position: relative; display: grid; grid-template-columns: 26px minmax(52px, 82px) 1fr; gap: clamp(14px, 3vw, 36px); padding: clamp(22px, 3.4vw, 34px) 0; border-top: 1px solid var(--color-divider); } .bp-timeline > .bp-point:first-child { border-top: 0; } .bp-timeline > .bp-point:last-child { border-bottom: 1px solid var(--color-divider); } .bp-cross { position: relative; width: 26px; height: 24px; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .bp-cross::before, .bp-cross::after { content: ""; position: absolute; background: currentColor; } .bp-cross::before { left: 12px; top: 6px; width: 1px; height: 12px; } .bp-cross::after { left: 6px; top: 11px; width: 13px; height: 1px; } .bp-n { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(34px, 5vw, 54px); line-height: .9; color: var(--color-accent); font-feature-settings: 'tnum' 1; } .bp-body h2, .bp-body h3 { font-size: clamp(20px, 2.4vw, 28px); text-transform: uppercase; margin: 0 0 9px; } .bp-body p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); margin: 0; max-width: 64ch; } .bp-meta { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-neutral-700); } .bp-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--color-accent-700); text-decoration: none; } .bp-link:hover { color: var(--color-accent-800); } @media (max-width: 560px) { .bp-point { grid-template-columns: 26px 1fr; } .bp-n { display: none; } } /* More breathing room between points so the blue fill is clearly legible while scrolling */ .bp-timeline.scroll-fill .bp-point { padding-block: clamp(42px, 7vw, 78px); } /* Entrance — the text is already in place; only the blueprint line-work (rail, separators, registration crosses) draws itself in, live, over ~2s. The vertical rail descends at a steady pace and each separator/cross branches off as it passes. Triggered by JS (.drawn) once the intro loader has cleared. */ .bp-timeline.draw::before { transform: scaleY(0); transform-origin: top; } .bp-timeline.draw > .bp-point { border-top-color: transparent; } .bp-timeline.draw > .bp-point:last-child { border-bottom-color: transparent; } .bp-timeline.draw > .bp-point:not(:first-child)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--color-divider); transform: scaleX(0); transform-origin: left; } .bp-timeline.draw .bp-cross { opacity: 0; } .bp-timeline.draw.drawn::before { animation: bpRailDraw 2s linear forwards; } .bp-timeline.draw.drawn > .bp-point:not(:first-child)::before { animation: bpSepDraw .5s ease-out calc(var(--pi, 0) * .38s) forwards; } .bp-timeline.draw.drawn .bp-cross { animation: bpCrossIn .4s ease calc(var(--pi, 0) * .38s + .05s) forwards; } @keyframes bpRailDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes bpSepDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes bpCrossIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bp-timeline.draw::before { transform: none; } .bp-timeline.draw > .bp-point:not(:first-child)::before { transform: none; } .bp-timeline.draw .bp-cross { opacity: 1; } .bp-timeline.draw > .bp-point:not(:first-child) { border-top-color: var(--color-divider); } .bp-timeline.draw > .bp-point:last-child { border-bottom-color: var(--color-divider); } } .duotone{position:relative;overflow:hidden} .duotone::after{content:"";position:absolute;inset:0;pointer-events:none; background:var(--color-accent);mix-blend-mode:color} /* ══════════════════════════════════════════════════════════════════════════ Components — built with the tokens above. Plain CSS on plain HTML: no JavaScript, no build step. Each class is documented in readme.md and demonstrated in foundations/ and components/. ══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } /* Les cadres blueprint posent leurs marques de repère 6 px HORS de la boîte (.corner, top/left/right: -6px). Sur un écran étroit, la marque de droite dépasse le bord et créerait une barre de défilement horizontale de quelques pixels — visible sur toutes les pages. `clip` supprime ce débordement sans créer de conteneur de défilement : `position: sticky` continue de marcher (ce que `overflow: hidden` casserait, notamment pour le sommaire des guides). */ html, body { overflow-x: clip; } body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } /* Tailles fluides : les valeurs hautes sont celles d'avant, la borne basse évite qu'un titre non surchargé déborde sur un téléphone de 320 px. */ h1 { font-size: clamp(30px, 7.4vw, 42px); } h2 { font-size: clamp(25px, 5.6vw, 32px); } h3 { font-size: clamp(21px, 4.4vw, 25px); } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 13px; } h6 { letter-spacing: 0.08em; text-transform: uppercase; } /* Un mot long (URL, référence, nom composé) ne doit jamais élargir sa colonne. */ h1, h2, h3, h4, h5, h6, p, li, dd, dt, th, td, blockquote, figcaption, .lead { overflow-wrap: break-word; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-underline-offset: 3px; } /* `height: auto` : sans lui, `max-width: 100%` écrase une image qui porte des attributs width/height et la déforme dès que la colonne rétrécit. */ img { display: block; max-width: 100%; height: auto; } figure { margin: 0; } figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); } .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* — rules — */ .hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); } /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px — the pair sits side by side in sign-up rows */ background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn svg { display: block; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--color-accent); color: var(--color-bg); } .btn-primary:hover { background: var(--color-accent-600); } .btn-primary:active { background: var(--color-accent-700); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-block { width: 100%; margin-top: var(--space-2); } /* — forms — */ .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } textarea.input { min-height: 90px; resize: vertical; } .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); } .radio:hover .dot { border-color: var(--color-accent); } .radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); } .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; } .seg { display: inline-flex; overflow: hidden; max-width: 100%; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .seg-opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; min-height: 40px; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } /* Sur un téléphone, quatre segments côte à côte écrasent les libellés (« Mise en service » sur trois lignes de deux lettres). On passe à deux colonnes pleine largeur, et on redistribue les filets en conséquence. */ @media (max-width: 560px) { .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .seg-opt { min-height: 44px; text-align: center; } .seg-opt + .seg-opt { border-left: 0; } .seg-opt:nth-child(even) { border-left: 1px solid var(--color-divider); } .seg-opt:nth-child(n + 3) { border-top: 1px solid var(--color-divider); } } .seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); } .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* — cards — */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); } .card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; } .card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } /* — navigation (fixed overlay; identical on every page) — */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: var(--space-4); padding-block: 0; /* Même gouttière que le contenu des pages (`max-width: var(--largeur-page)` + `var(--gouttiere)`) : sans cela le sigle ne tombait sur l'axe du

à aucune largeur, et l'écart changeait même de sens — 6 px à droite du titre sur téléphone, 45 px à sa gauche sur grand écran. */ padding-inline: max(var(--gouttiere), calc((100% - var(--largeur-page)) / 2 + var(--gouttiere))); border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, color .35s ease; } .nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; display: inline-flex; align-items: center; gap: 9px; /* La barre fait 64 px de haut et centre son contenu : ce padding agrandit la cible du lien d'accueil (30 → 44 px) sans toucher à la hauteur de la barre. */ padding-block: 7px; } .nav-brand .brand-mark { height: 30px; width: auto; display: block; } .nav a { color: inherit; text-decoration: none; font-size: 14px; } .nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); } .nav-links { display: flex; align-items: center; gap: var(--space-4); } /* Cible tactile : le texte seul ne fait que 22 px de haut, insuffisant au doigt sur les tablettes qui gardent la barre horizontale (761 → 900 px). Le padding vertical n'ajoute aucune largeur et ne change donc pas le point de bascule. */ .nav-links > a:not(.btn) { padding-block: 10px; } .nav.solid { background: var(--color-bg); border-bottom-color: var(--color-divider); } /* Transparent variant while the nav overlays the hero video (home page) */ .nav.over { color: #fff; } .nav.over .nav-brand, .nav.over a { color: #fff; } .nav.over a[aria-current='page'] { color: #fff; } .nav.over a:hover { color: rgba(255,255,255,.72); } .nav.over a.btn-primary { color: var(--color-bg); } .nav.over .brand-mark { filter: brightness(0) invert(1); } .nav.over::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(16,20,24,.55), rgba(16,20,24,0)); } .nav-burger { display: none; align-items: center; justify-content: center; margin-left: auto; width: 44px; height: 44px; padding: 0; margin-right: -10px; /* recadre l'icône sur la marge de la page malgré la cible élargie */ background: none; border: 0; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-burger svg { width: 24px; height: 24px; display: block; } .nav-burger .i-close { display: none; } .nav-burger[aria-expanded="true"] .i-menu { display: none; } .nav-burger[aria-expanded="true"] .i-close { display: block; } @media (max-width: 760px) { .nav-burger { display: inline-flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); box-shadow: var(--shadow-md); padding: 6px 0; display: none; /* Le menu ne doit jamais dépasser sous le bas de l'écran : en paysage sur téléphone, les 6 entrées mesurent plus que la hauteur disponible. */ max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; } .nav-links.open { display: flex; } .nav-links > a:not(.btn) { padding: 13px clamp(20px, 6vw, 32px); } .nav-links a { color: var(--color-text); font-size: 15px; } .nav.over .nav-links a { color: var(--color-text); } .nav-links a.btn { margin: 8px clamp(20px, 6vw, 32px) 6px; justify-content: center; min-height: 46px; } .nav.over .nav-links a.btn-primary { color: var(--color-bg); } } /* — intro loader: the brand mark draws itself (mountain, then wave), then reveals the page — */ .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--color-bg); cursor: pointer; transition: opacity .5s ease, visibility .5s ease; } .intro.done { opacity: 0; visibility: hidden; } .intro-mark { width: min(180px, 42vw); height: auto; overflow: visible; } .intro-mark path { fill: none; stroke: var(--color-accent-900); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; } .intro-mark .mtn { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawIn .8s cubic-bezier(.65,0,.35,1) .12s forwards; } .intro-mark .wave { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawIn .48s cubic-bezier(.5,0,.3,1) .82s forwards; } @keyframes drawIn { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .intro { display: none; } } /* — tables — */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } /* — dialog — */ .dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); } .dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); } .dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; } .dialog-body { font-size: 14px; opacity: 0.85; } .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); } /* — blueprint frame: components are wireframe objects (see .blueprint and .corner above) — square, transparent, hairline-bordered — */ .card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; } .card, .dialog { background: transparent; border: 1px solid var(--color-divider); } .btn { border: 1px solid var(--color-divider); } .btn-primary { border-color: var(--color-accent); } .btn-ghost { border-color: transparent; } /* ── Site footer — deep steel field, type reversed to paper ──────────────── */ .site-footer { background: var(--color-accent-900); color: rgba(255,255,255,.72); } .site-footer .footer-inner { max-width: var(--largeur-page); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gouttiere) clamp(28px, 3vw, 36px); display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); } .site-footer .footer-col { display: flex; flex-direction: column; } .site-footer .footer-logo { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; letter-spacing: .05em; color: #fff; text-decoration: none; } .site-footer p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; max-width: 42ch; color: rgba(255,255,255,.68); } .site-footer .footer-contact { color: rgba(255,255,255,.85); font-feature-settings: 'tnum' 1; } .site-footer .footer-h { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 16px; } .site-footer a { color: rgba(255,255,255,.75); text-decoration: none; font-size: 14px; transition: color .2s ease; } .site-footer a:hover { color: #fff; } /* Le padding vertical porte la cible de 22 px à 40 px sans écarter les entrées : l'espacement visuel reste celui d'avant (11 px), il est simplement cliquable. */ .site-footer nav.footer-col a { margin-bottom: 3px; padding-block: 9px; } .site-footer .footer-social { display: flex; flex-wrap: wrap; gap: 12px; } .site-footer .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.82); transition: background .2s ease, border-color .2s ease, color .2s ease; } .site-footer .footer-social a svg { width: 19px; height: 19px; fill: currentColor; display: block; } .site-footer .footer-social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff; } .site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); } .site-footer .footer-bottom-inner { max-width: var(--largeur-page); margin: 0 auto; padding: 18px var(--gouttiere); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; /* `center`, et non `baseline` : les liens de droite portent un padding vertical (cible tactile) qui décale la ligne de base d'un inline-block. Centrés, les deux textes retombent sur la même ligne optique. */ align-items: center; font-size: 12px; color: rgba(255,255,255,.5); } .site-footer .footer-bottom-inner a { font-size: 12px; color: rgba(255,255,255,.6); display: inline-block; padding-block: 6px; } @media (max-width: 860px) { /* Trois colonnes tiennent mal sous 860 px : la première (texte + contact) se retrouve à ~230 px. On passe à deux colonnes — mais la colonne de marque, bien plus haute que les autres, doit prendre toute la largeur : sinon « Suivez-nous » retombe sous elle et ouvre un vide de ~180 px. */ .site-footer .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px clamp(24px, 4vw, 44px); } .site-footer .footer-inner > .footer-col:first-child { grid-column: 1 / -1; } } @media (max-width: 560px) { .site-footer .footer-inner { grid-template-columns: 1fr; gap: 32px; } .site-footer .footer-bottom-inner { justify-content: flex-start; } } /* ══════════════════════════════════════════════════════════════════════════ Guides — long-form editorial pages drawn on the same blueprint grid. Shared by Guides.html and every guide-*.html article. ══════════════════════════════════════════════════════════════════════ */ /* Un guide est une colonne de texte : il ne peut pas prendre les 1440 px des pages à grilles sans casser la mesure de lecture. 1280 px cadre la paire « texte + sommaire » sans laisser de vide mort dans la colonne. */ .article-wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gouttiere); } /* — masthead — */ .article-head { padding: clamp(40px, 6vw, 72px) 0 0; } .article-kicker { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-700); margin-bottom: 12px; } .article-head hr { height: 1px; border: 0; background: var(--color-divider); margin: 0 0 24px; } .article-head h1 { font-size: clamp(34px, 4.4vw, 58px); text-transform: uppercase; margin: 0 0 0 -0.052em; max-width: 21ch; } .article-lead { font-size: 17px; line-height: 1.55; max-width: 62ch; margin: 24px 0 0; color: var(--color-neutral-800); } .article-meta { display: flex; flex-wrap: wrap; gap: 7px 26px; margin: 28px 0 0; padding: 13px 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-neutral-700); font-feature-settings: 'tnum' 1; } /* — two-column reading layout: body + sticky contents rail — */ .article-grid { display: grid; /* La piste de texte est bornée à la mesure et le sommaire à 340 px : `space-between` verse tout le surplus dans l'écart entre les deux colonnes. Auparavant la piste valait `1fr`, le corps s'arrêtait à la mesure, et la différence — jusqu'à 316 px — restait en blanc à droite du texte. */ grid-template-columns: minmax(0, var(--mesure-article)) minmax(272px, 340px); justify-content: space-between; gap: clamp(30px, 4vw, 64px); align-items: start; padding: clamp(34px, 5vw, 52px) 0 0; } @media (max-width: 980px) { /* `1fr` vaut `minmax(auto, 1fr)` : la piste se dilate alors jusqu'à la largeur min-content de son contenu. Les tableaux des guides portent `min-width: 480px` (voir .table-scroll), ce minimum remontait jusqu'ici et élargissait toute la colonne à 480–570 px — soit 180 à 270 px de texte hors écran sur chaque téléphone. `minmax(0, 1fr)` coupe la remontée. */ .article-grid { grid-template-columns: minmax(0, 1fr); } /* Le sommaire suit l'article dans le DOM ; empilé tel quel il atterrirait après 2 000 mots, là où il ne sert plus à rien. */ .toc { order: -1; } /* En une seule colonne, le filet et le cartouche du chapeau couraient sur toute la largeur de la page alors que le texte s'arrête à la mesure : jusqu'à 291 px de trait dans le vide au-dessus de rien. Au-delà de 980 px ce débord n'en est pas un — c'est le sommaire qui occupe la place. */ .article-head hr, .article-meta { max-width: var(--mesure-article); } } .toc { position: sticky; top: calc(var(--nav-h) + 22px); padding: 22px; min-width: 0; } @media (max-width: 980px) { .toc { position: static; padding: 18px 20px; } } .toc .toc-h { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-700); margin-bottom: 14px; } .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .toc li { counter-increment: toc; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .toc li:first-child { border-top: 0; } .toc a { display: grid; grid-template-columns: 26px 1fr; gap: 9px; padding: 9px 0; font-size: 13.5px; line-height: 1.35; color: var(--color-neutral-800); text-decoration: none; } .toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-heading); font-weight: var(--font-heading-weight); color: var(--color-accent); font-feature-settings: 'tnum' 1; } .toc a:hover { color: var(--color-accent-800); } /* — body typography — */ /* `min-width: 0` : second verrou contre la remontée du min-content décrite au-dessus. Il protège la colonne même si un jour elle n'est plus dans une piste `minmax(0, …)` (flex, autre gabarit) ou si un contenu large est ajouté. */ .article-body { max-width: var(--mesure-article); min-width: 0; } .article-body > section { scroll-margin-top: calc(var(--nav-h) + 20px); } .article-body h2 { font-size: clamp(25px, 2.9vw, 34px); text-transform: uppercase; margin: 52px 0 14px; padding-top: 22px; border-top: 1px solid var(--color-divider); } .article-body > section:first-child h2 { margin-top: 0; } .article-body h3 { font-size: clamp(19px, 2.1vw, 22px); text-transform: uppercase; margin: 32px 0 10px; } .article-body p { font-size: 17px; line-height: 1.68; color: var(--color-neutral-800); margin: 0 0 16px; } .article-body strong { font-weight: 700; color: var(--color-text); } .article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 20px; } .article-body li { font-size: 17px; line-height: 1.62; color: var(--color-neutral-800); margin-bottom: 9px; } .article-body li::marker { color: var(--color-accent); } /* — figures : photos de chantier et schémas techniques — */ .article-body figure { margin: 30px 0; } .article-body figure img { width: 100%; height: auto; display: block; } .article-body figure figcaption { font-size: 12.5px; line-height: 1.45; margin-top: 10px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); color: var(--color-neutral-700); } /* Cadre blueprint autour d'une figure : mêmes marques de repère que les autres blocs */ .fig-frame { position: relative; border: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-accent) 4%, transparent); } .fig-frame > svg { display: block; width: 100%; height: auto; } /* Langage graphique des schémas — identique aux plans de Produits.html */ .schema { fill: none; } .schema .ln { stroke: var(--color-accent-700); stroke-width: 1; } .schema .ln-strong { stroke: var(--color-accent-800); stroke-width: 1.5; } .schema .ln-dash { stroke: var(--color-accent-500); stroke-width: 1.25; stroke-dasharray: 4 3; } .schema .box { fill: var(--color-accent-200); stroke: var(--color-accent-800); stroke-width: 1.5; } .schema .box-empty { fill: none; stroke: var(--color-accent-800); stroke-width: 1.5; } .schema .lbl { font-family: var(--font-heading); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; fill: var(--color-neutral-700); stroke: none; } .schema .lbl-n { font-family: var(--font-heading); font-size: 13px; fill: var(--color-accent-700); stroke: none; font-feature-settings: 'tnum' 1; } .article-body .table { margin: 8px 0 22px; } .article-body .table td { font-size: 14.5px; vertical-align: top; } /* Un tableau à 3-4 colonnes n'est pas lisible sous ~480 px : on le laisse à sa largeur et c'est le cadre qui défile latéralement, pas la page. */ .table-scroll { overflow-x: auto; max-width: 100%; margin: 8px 0 22px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .table-scroll .table { margin: 0; min-width: 480px; } /* Ombre de défilement : elle n'apparaît que du côté où il reste du tableau à voir, et disparaît en bout de course. Les deux dégradés opaques sont en `local` (ils suivent le contenu et masquent l'ombre aux extrémités), les deux ombres en `scroll` (fixées au cadre). Aucun élément ni script ajouté. */ .table-scroll { background: linear-gradient(to right, var(--color-bg), transparent) left center / 22px 100% no-repeat local, linear-gradient(to left, var(--color-bg), transparent) right center / 22px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--color-text) 16%, transparent), transparent) left center / 11px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--color-text) 16%, transparent), transparent) right center / 11px 100% no-repeat scroll; } /* — “L’essentiel” answer block: the passage AI engines and snippets lift — */ .keybox { padding: 24px 26px; margin: 0 0 34px; background: color-mix(in srgb, var(--color-accent) 6%, transparent); } .keybox .keybox-h { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 12px; } .keybox p { font-size: 16px; line-height: 1.62; margin: 0 0 12px; color: var(--color-neutral-900); } .keybox p:last-child, .keybox ul:last-child { margin-bottom: 0; } .keybox ul { margin: 0; padding-left: 19px; } .keybox li { font-size: 15px; line-height: 1.55; margin-bottom: 7px; } /* — inline callout: field note from the installers — */ .callout { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 18px 20px; margin: 26px 0; border-left: 2px solid var(--color-accent); background: color-mix(in srgb, var(--color-text) 3.5%, transparent); } .callout .bp-cross { margin-top: -2px; } .callout p { font-size: 15px; line-height: 1.6; margin: 0; } .callout p + p { margin-top: 10px; } .callout .callout-h { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 6px; } /* — FAQ: real headings + prose so crawlers and LLMs read the answers — */ .faq-item { padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); } .faq-item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); } .faq-item h3 { font-size: 19px; text-transform: none; letter-spacing: -0.005em; margin: 0 0 8px; } .faq-item p { margin: 0 0 10px; } .faq-item p:last-child { margin-bottom: 0; } /* — byline / expertise signal — */ .author-box { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: baseline; padding: 20px 22px; margin: 44px 0 0; } .author-box .author-h { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; text-transform: uppercase; } .author-box p { font-size: 14px; line-height: 1.6; color: var(--color-neutral-800); margin: 0; flex: 1 1 260px; } /* — end-of-article conversion block — */ .guide-cta { padding: clamp(26px, 4vw, 38px); margin: 44px 0 0; } .guide-cta h2 { font-size: clamp(24px, 3vw, 32px); text-transform: uppercase; margin: 0 0 10px; max-width: 24ch; border: 0; padding: 0; } .guide-cta p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); margin: 0 0 20px; max-width: 54ch; } .guide-cta .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .guide-cta .btn { min-height: 46px; padding-inline: 26px; font-size: 15px; } /* — guide cards: hub index and “à lire aussi” — */ /* Nombre de colonnes choisi, pas subi. `auto-fit` tombait à 2 colonnes entre 667 et 1000 px : avec trois guides, le troisième restait seul en demi-largeur et ouvrait un trou de 300 à 350 px juste avant le bloc d'appel. En deux colonnes, une dernière fiche esseulée (nombre impair) prend toute la largeur — la règle vaut pour 3 comme pour 5 fiches. En trois colonnes, les trois guides actuels remplissent exactement la rangée. */ .guide-grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 36px); } @media (min-width: 560px) { .guide-grid { grid-template-columns: 1fr 1fr; } .guide-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (min-width: 1000px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } .guide-grid > :last-child:nth-child(odd) { grid-column: auto; } } .guide-card { display: flex; flex-direction: column; gap: 11px; padding: 24px; text-decoration: none; color: inherit; transition: background .2s ease; } .guide-card:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } .guide-card .guide-n { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 34px; line-height: .9; color: var(--color-accent); font-feature-settings: 'tnum' 1; } .guide-card h3 { font-size: 21px; text-transform: uppercase; margin: 0; } .guide-card p { font-size: 14px; line-height: 1.55; color: var(--color-neutral-800); margin: 0; } .guide-card .guide-meta { margin-top: auto; padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--color-neutral-700); } /* ══════════════════════════════════════════════════════════════════════════ Adaptation aux petits écrans — règles transversales Les correctifs de gabarit (pistes de grille, largeurs minimales) sont posés au plus près de la règle concernée, plus haut. Ne restent ici que les points qui valent pour tout le site. ══════════════════════════════════════════════════════════════════════ */ /* — cibles tactiles — */ /* WCAG 2.5.8 demande 24 px, les recommandations Apple et Android 44 dp. Un bouton .btn nu mesure 34 px : on le remonte, mais seulement sur un pointeur grossier, pour ne pas épaissir l'interface à la souris. */ @media (pointer: coarse) { .btn { min-height: 44px; } .btn-icon { width: 44px; height: 44px; } .radio { min-height: 40px; } .bp-link, .article-body > p > a, .toc a { padding-block: 4px; } } /* Un curseur de 20 px de haut se rate au doigt. */ input[type="range"] { min-height: 34px; } /* — le fond du menu mobile ne doit pas défiler sous le menu ouvert — */ /* Le conteneur de défilement est , pas : poser `overflow: hidden` sur le seul ne bloque rien (vérifié — la page continuait de défiler derrière le menu). `overflow-y` seulement, pour ne pas écraser le `overflow-x: clip` posé plus haut. */ html.nav-open, body.nav-open { overflow-y: hidden; } /* — pied de page : la ligne de contact ne doit pas casser un numéro — */ .site-footer .footer-contact { white-space: nowrap; } /* — cadres blueprint : marques de repère resserrées sur très petit écran — */ /* À 320 px, 6 px de débordement de chaque côté mangent 4 % de la largeur utile. */ @media (max-width: 400px) { .blueprint > .corner { width: 9px; height: 9px; } .blueprint > .corner::before { left: 4px; } .blueprint > .corner::after { top: 4px; } .blueprint > .corner.tl { top: -5px; left: -5px; } .blueprint > .corner.tr { top: -5px; right: -5px; } .blueprint > .corner.bl { bottom: -5px; left: -5px; } .blueprint > .corner.br { bottom: -5px; right: -5px; } } /* — guides : respiration sur mobile — */ @media (max-width: 560px) { .keybox { padding: 20px; } .callout { padding: 16px; grid-template-columns: 20px 1fr; gap: 10px; } .author-box { padding: 18px; } .article-body h2 { margin-top: 38px; } /* Une ancre visée depuis le sommaire doit s'arrêter sous la barre fixe. */ .article-body > section { scroll-margin-top: calc(var(--nav-h) + 12px); } } /* — fiche produit : le filet de droite doublait le cadre en colonne unique — */ @media (max-width: 560px) { .fiche-cell { border-right: 0; } } /* — mouvement réduit : neutralise aussi le tracé du sommaire et la barre — */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Étiquette d'un groupe de champs : un