/** * mlsign, prototype v5 : la version papier. Fondations. * * Ce fichier vient après charte.css (la nuit, pour l'écran TraceMark) et * charte-papier.css (les rôles papier + la classe .ecran). * * Les partis pris, tenus de bout en bout : * 1. Papier froid identitaire (#EEF2F4, L* 95) : l'aréna en plein jour. Le * blanc pur n'existe que dans les vidéos et dans l'écran TraceMark. * 2. Radius 0, pilule sur les seuls éléments cliquables. * 3. Les vidéos : full-bleed exact (filets encre haut/bas) OU figure cadrée * (filet encre collé au cadre, cartouche mono HORS du cadre). Jamais de * voile, jamais de texte incrusté, fond de chargement nuit. * 4. Le mono est un rôle : données, labels, cartouches. Tabulé, deux encres. * 5. L'écran TraceMark est le seul objet sombre. Il ne touche jamais les * bords, le papier le présente, ses annotations vivent en marge. * * Les sections spécifiques à la structure retenue sont ajoutées après le * jugement, sous la marque « SECTIONS » en fin de fichier. */ /* --------------------------------------------------------------------------- Échelle et rythme --------------------------------------------------------------------------- */ :root { --fs-kicker: clamp(0.7rem, 0.64rem + 0.25vw, 0.8rem); --fs-small: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem); --fs-body: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); --fs-lead: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem); --fs-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2.2rem); --fs-h2: clamp(2.6rem, 1.7rem + 4vw, 5.4rem); --fs-h1: clamp(3.6rem, 2rem + 8.6vw, 10.5rem); --fs-mega: clamp(3.2rem, 1.8rem + 7.2vw, 9rem); --fs-chiffre: clamp(2.4rem, 1.6rem + 4vw, 5rem); --lh-mega: 0.9; --lh-title: 1; --lh-h3: 1.18; --lh-body: 1.68; --ls-kicker: 0.22em; --ls-title: -0.035em; --measure: 62ch; --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem); --section-y: clamp(5rem, 3rem + 9vw, 12rem); --maxw: 1360px; --dur-fast: 200ms; --dur: 320ms; --dur-lent: 900ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); --pilule: 999px; } /* --------------------------------------------------------------------------- Base --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--font-texte); font-weight: var(--wght-texte); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { margin: 0; font-weight: var(--wght-titre); letter-spacing: var(--ls-title); text-wrap: balance; /* Le pendant de `balance` sur les titres : pas de veuve en fin de paragraphe. Le navigateur garde la main sur les coupures, les insécables lui disent seulement où il n'a PAS le droit de couper. */ } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, video, canvas, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--donnee); outline-offset: 3px; } .saut { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.75rem 1rem; background: var(--encre); color: var(--papier); font-size: var(--fs-small); } .saut:focus { left: 0; } /* Le kicker et tous les micro-labels : mono, capitales espacées. */ .kicker { font-family: var(--font-mono); font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--texte-secondaire); } /* Le cartouche de relevé : la légende mono d'une figure, HORS du cadre. Deux encres : la méta en encre secondaire, la valeur en encre pleine. */ .cartouche { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-family: var(--font-mono); font-size: var(--fs-kicker); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-secondaire); font-variant-numeric: tabular-nums; } .cartouche b { font-weight: var(--wght-texte); color: var(--texte); } /* --------------------------------------------------------------------------- Boutons. Seuls objets arrondis. Le principal est un bouton d'encre : sur papier, l'action la plus sûre est la plus noire. --------------------------------------------------------------------------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.6rem; border: var(--hairline) solid var(--encre); border-radius: var(--pilule); background: var(--encre); color: var(--papier); font-size: var(--fs-small); font-weight: var(--wght-titre); letter-spacing: 0.01em; white-space: nowrap; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .bouton:hover { background: var(--fosse); border-color: var(--fosse); } .bouton:active { transform: translateY(1px); } .bouton--fantome { background: transparent; border-color: var(--filet-fort); color: var(--texte); font-weight: var(--wght-texte); } .bouton--fantome:hover { border-color: var(--encre); background: transparent; color: var(--encre); } .bouton--compact { min-height: 40px; padding: 0 1.1rem; } .bouton--grand { min-height: 60px; padding: 0 2.4rem; font-size: var(--fs-body); } /* --------------------------------------------------------------------------- Barre. Une ligne, 64 px, papier dès qu'elle se pose. --------------------------------------------------------------------------- */ .barre { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: var(--gutter); height: 64px; padding: 0 var(--gutter); background: transparent; border-bottom: var(--hairline) solid transparent; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .barre[data-pose] { background: var(--fond); border-bottom-color: var(--bordure); } /* Le logotype est DESSINE, jamais compose : « mlsign » ecrit en Switzer n'est pas la marque. Les neuf SVG vivent dans brand/logo/ du depot. */ .barre__marque { display: inline-flex; align-items: center; transition: opacity var(--dur-fast) var(--ease); } /* Effacée tant que la marque géante du hero est à l'écran (M.initMarque) : deux « mlsign » visibles ensemble font doublon. Opacité + visibility, pas de display : la boîte reste, la nav ne bouge pas, et le lien effacé sort du parcours clavier. */ .barre__marque[data-efface] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease), visibility 0s var(--dur-fast); } .barre__marque img { display: block; height: 1.05rem; width: auto; } .barre__nav { display: flex; gap: 1.75rem; margin-left: auto; font-size: var(--fs-small); color: var(--texte-secondaire); } .barre__nav a { transition: color var(--dur-fast) var(--ease); } .barre__nav a:hover { color: var(--encre); } @media (max-width: 720px) { .barre__nav { display: none; } .bouton--compact { margin-left: auto; } } /* La sticky bar mobile : fine, discrète, apparaît après le hero seulement. +15-25 % documenté sur pages longues (recherche conversion). */ .barrette { position: fixed; inset: auto 0 0 0; z-index: 49; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem var(--gutter); padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)); background: var(--fond); border-top: var(--hairline) solid var(--bordure); transform: translateY(100%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility 0s var(--dur); } .barrette[data-visible] { transform: translateY(0); visibility: visible; transition-delay: 0s; } .barrette__mot { font-size: var(--fs-small); color: var(--texte); } @media (max-width: 720px) { .barrette { display: flex; } } /* --------------------------------------------------------------------------- Les médias : la règle binaire. --------------------------------------------------------------------------- */ /* Mode 1 : le bandeau full-bleed. Bord à bord, filets encre haut et bas comme seule couture avec le papier. 21:9 : on traverse la nuit, on n'y tombe pas. */ .bandeau { position: relative; border-block: var(--hairline) solid var(--encre); background: var(--cadre-media); overflow: hidden; } .bandeau__plan { width: 100%; height: 100%; object-fit: cover; } /* Mode 2 : la figure cadrée. Filet encre collé au cadre, cartouche hors du cadre. La vidéo devient un document. */ .figure { margin: 0; } .figure__cadre { position: relative; border: var(--hairline) solid var(--encre); background: var(--cadre-media); overflow: hidden; } .figure__cadre img, .figure__cadre video { width: 100%; height: 100%; object-fit: cover; } /* Le grain, sur les plans de marcheur seulement. Même recette que la v4 : bruit fin, sauts de translation, fige sous 900 px. */ .bandeau::after, .figure__cadre::after { content: ""; position: absolute; inset: -8%; z-index: 1; pointer-events: none; opacity: 0.19; mix-blend-mode: overlay; background-size: 220px 220px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-0.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); animation: fremissement 900ms steps(1) infinite; } /* Le studio (séquence du sac) reste net : pas de grain sur .figure--studio. */ .figure--studio .figure__cadre::after { content: none; } @keyframes fremissement { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-3%, 2%, 0); } 40% { transform: translate3d(2%, -3%, 0); } 60% { transform: translate3d(-2%, -2%, 0); } 80% { transform: translate3d(3%, 1%, 0); } 100% { transform: translate3d(0, 0, 0); } } @media (max-width: 900px) { .bandeau::after, .figure__cadre::after { animation: none; } } /* --------------------------------------------------------------------------- L'écran TraceMark : l'objet. Les règles génériques ; la mise en page interne vient avec les sections. --------------------------------------------------------------------------- */ .ecran { border: var(--hairline) solid var(--encre); /* le châssis */ } /* La barre de titre de l'écran : inversée, mono, la grammaire d'écran. */ .ecran__barre { display: flex; align-items: center; gap: 1.25rem; padding: 0.85rem 1.5rem; border-bottom: var(--hairline) solid var(--bordure); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--texte); } /* --------------------------------------------------------------------------- Révéler. Une entrée, seize pixels. --------------------------------------------------------------------------- */ .js [data-reveler] { opacity: 0; transform: translateY(16px); } [data-reveler].vu { opacity: 1; transform: none; transition: opacity var(--dur-lent) var(--ease), transform var(--dur-lent) var(--ease); } /* --------------------------------------------------------------------------- Mouvement réduit. Tout s'arrête, rien ne disparaît. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveler] { opacity: 1; transform: none; } } /* =========================================================================== SECTIONS : ajoutées après le jugement des structures. =========================================================================== */ /* --------------------------------------------------------------------------- 1. Hero. Manchette éditoriale : le titre possède le papier, le plan vient dessous, coupé par le pli. Min-height > 100dvh : l'écran ne doit jamais « avoir l'air fini ». --------------------------------------------------------------------------- */ .hero { display: flex; flex-direction: column; min-height: 108dvh; } .hero__manchette { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: calc(64px + clamp(2rem, 1rem + 3vw, 4rem)) var(--gutter) clamp(2rem, 1.5rem + 2vw, 3.5rem); } .hero__titre { margin-top: 1rem; font-size: var(--fs-h1); line-height: var(--lh-mega); color: var(--encre); } .masque { display: block; } /* Le masque n'existe QUE pour l'animation d'entrée : sans JavaScript il n'a rien à cacher, et son `overflow` rognait le titre de 22 % — la descendante du « q » la première. */ .js .masque { overflow: hidden; padding-bottom: 0.06em; } /* Préfixé `.js`, comme [data-reveler] et .a-reveler : sans JavaScript, ce décalage de 100 % combiné à l'`overflow: hidden` du masque efface purement et simplement le titre du hero. Il était le seul des trois motifs à ne pas l'être. */ .js .masque__i { display: block; transform: translateY(100%); } .charge .masque__i { transform: translateY(0); transition: transform 1s var(--ease); } .charge .masque:nth-child(2) .masque__i { transition-delay: 90ms; } .hero__pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); } .hero__sous { max-width: 52ch; font-size: var(--fs-lead); line-height: 1.35; color: var(--texte-secondaire); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; flex: 0 0 auto; } .hero__bandeau { flex: 1; min-height: 46dvh; } @media (max-width: 900px) { .hero__pied { flex-direction: column; align-items: flex-start; } .hero__bandeau { min-height: 40dvh; } } @media (max-width: 480px) { .hero__actions { width: 100%; } .hero__actions .bouton { width: 100%; } } /* --------------------------------------------------------------------------- 2. Le face-à-face. Un filet vertical, deux voix. --------------------------------------------------------------------------- */ .duel { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--gutter); gap: 0; } .duel__cote { padding-right: clamp(1.5rem, 1rem + 3vw, 4rem); } .duel__cote--nous { display: flex; flex-direction: column; justify-content: flex-end; padding-right: 0; padding-left: clamp(1.5rem, 1rem + 3vw, 4rem); border-left: var(--hairline) solid var(--filet-fort); } .duel__titre { font-size: var(--fs-h2); line-height: var(--lh-title); color: var(--texte-secondaire); } .duel__titre--fort { color: var(--encre); } .duel__corps { max-width: 38ch; margin-top: 1.5rem; color: var(--texte-secondaire); } .duel__cote--nous .duel__corps { color: var(--texte); } @media (max-width: 860px) { .duel { grid-template-columns: 1fr; } .duel__cote { padding-right: 0; } .duel__cote--nous { margin-top: 2.5rem; padding: 0 0 0 1.5rem; border-top: 0; border-left: var(--hairline) solid var(--encre); } } /* --------------------------------------------------------------------------- 3. Le matériel. Planche technique : le sac s'ouvre, les cotes tabulées. --------------------------------------------------------------------------- */ .materiel { border-top: var(--hairline) solid var(--bordure); } .materiel__scene { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); min-height: 175vh; /* la course de scroll qui ouvre le sac */ } .materiel__media { position: sticky; top: 0; height: 100dvh; display: flex; align-items: center; } .materiel__media .figure { width: 100%; } .materiel__cadre { aspect-ratio: 16 / 10; } .materiel__canvas { width: 100%; height: 100%; } .materiel__texte { padding: clamp(6rem, 4rem + 8vw, 12rem) 0; } .materiel__titre { font-size: var(--fs-h2); line-height: var(--lh-title); color: var(--encre); } .materiel__corps { max-width: 42ch; margin-top: 1.25rem; color: var(--texte-secondaire); } .cotes { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); } .cote { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-top: var(--hairline) solid var(--filet-fort); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .cote:last-child { border-bottom: var(--hairline) solid var(--filet-fort); } .cote__cle { font-size: var(--fs-kicker); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-secondaire); } .cote__val { font-size: var(--fs-h3); color: var(--encre); } @media (max-width: 900px) { .materiel__scene { display: block; min-height: 0; } .materiel__media { top: 64px; height: auto; z-index: 1; background: var(--fond); padding: 0.75rem 0; } .materiel__texte { padding: 2.5rem 0 4rem; } } /* --------------------------------------------------------------------------- 4. Comment ça marche. Panoramique de paliers : figure + légende numérotée. --------------------------------------------------------------------------- */ .etapes { position: relative; overflow: hidden; border-top: var(--hairline) solid var(--bordure); } .etapes__piste { display: flex; height: 100dvh; } .palier { display: flex; flex-direction: column; flex: 0 0 min(72vw, 1000px); height: 100%; padding: calc(64px + 2rem) clamp(1.5rem, 1rem + 2vw, 3rem) 2rem; border-right: var(--hairline) solid var(--bordure); } .palier--intro { flex: 0 0 min(52vw, 620px); justify-content: center; } .palier__h2 { font-size: var(--fs-h2); line-height: var(--lh-title); color: var(--encre); } .palier__cadre { position: relative; flex: 1; min-height: 0; border: var(--hairline) solid var(--encre); background: var(--cadre-media); overflow: hidden; } .palier__cadre::after { content: ""; position: absolute; inset: -8%; z-index: 1; pointer-events: none; opacity: 0.19; mix-blend-mode: overlay; background-size: 220px 220px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-0.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); animation: fremissement 900ms steps(1) infinite; } .palier__plan { width: 100%; height: 100%; object-fit: cover; } .palier__legende { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding-top: 1.1rem; } .palier__numero { font-family: var(--font-mono); font-size: var(--fs-h3); line-height: 1.1; color: var(--donnee); font-variant-numeric: tabular-nums; } .palier__legende h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--encre); } .palier__legende p:not(.cartouche) { margin-top: 0.4rem; color: var(--texte-secondaire); } .palier__legende .cartouche { margin-top: 0.7rem; } /* LA PILE VERTICALE EST L'ÉTAT PAR DÉFAUT. Elle était conditionnée à `@media (max-width: 900px)` : la piste horizontale se posait donc à toutes les largeurs supérieures, y compris quand RIEN ne la faisait défiler — mouvement réduit (initPanoramique sort avant le tween), GSAP absent, tablette qu'on tourne, ou largeur fractionnaire dans l'intervalle laissé entre `max-width: 900px` et `min-width: 901px`. Les paliers 02 et 03 étaient alors hors du cadre, `overflow: hidden` par-dessus, et sans aucun focusable pour les rattraper au clavier : la section avait l'air complète. Le commutateur est maintenant la classe `pan-actif`, posée par le script du et retirée dès que l'épinglage devient impossible. Le CSS seul, sans JavaScript, rend donc la pile — jamais une piste que personne ne pousse. */ html:not(.pan-actif) .etapes { overflow: visible; } html:not(.pan-actif) .etapes__piste { flex-direction: column; height: auto; } html:not(.pan-actif) .palier { flex: none; height: auto; padding: 2.5rem var(--gutter); border-right: 0; border-bottom: var(--hairline) solid var(--bordure); } html:not(.pan-actif) .palier--intro { padding-top: 4rem; } html:not(.pan-actif) .palier__cadre { aspect-ratio: 4 / 5; flex: none; } html:not(.pan-actif) .palier__cadre::after { animation: none; } /* --------------------------------------------------------------------------- 5. TraceMark. Le rapport-objet et ses marges de cotation. --------------------------------------------------------------------------- */ .tracemark { max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--gutter); } .tracemark__titre { margin-top: 1.25rem; font-size: var(--fs-h2); line-height: var(--lh-title); color: var(--encre); } .tracemark__ligne { max-width: var(--measure); margin-top: 1.25rem; font-size: var(--fs-lead); line-height: 1.4; color: var(--texte-secondaire); } .tracemark__scene { display: grid; grid-template-columns: 1fr clamp(200px, 22%, 280px); gap: 0 2.5rem; margin-top: clamp(3rem, 2rem + 4vw, 5rem); } /* --- L'écran : la grammaire du rapport, palette nuit locale (.ecran). ---- */ .rapport { background: var(--fond); color: var(--texte); } .rapport .ecran__barre { background: var(--surface); color: var(--texte); } .rapport__heure { margin-left: auto; color: var(--donnee-vive); font-variant-numeric: tabular-nums; white-space: nowrap; } .rapport__fleche { color: var(--texte-secondaire); } .rapport__specimen { font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); padding: 0.3rem 0.6rem; border: var(--hairline) solid var(--attente); color: var(--texte); } .rapport__meta { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 0; padding: 1.1rem 1.5rem; border-bottom: var(--hairline) solid var(--bordure); font-family: var(--font-mono); font-size: var(--fs-small); } .rapport__meta dt { color: var(--texte-secondaire); } .rapport__meta dd { margin: 0.25rem 0 0; color: var(--texte); } .rapport__grille { display: grid; grid-template-columns: 1.15fr 1fr; } .rapport__carte { margin: 0; padding: 1.5rem; border-right: var(--hairline) solid var(--bordure); border-bottom: var(--hairline) solid var(--bordure); } .rapport__carte:nth-child(2) { border-right: 0; } .rapport__carte:nth-child(n+3) { border-bottom: 0; } .rapport__carte:last-child { border-right: 0; } .rapport__carte figcaption, .rapport__label { font-family: var(--font-mono); font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--texte-secondaire); } .rapport__note { margin-top: 0.75rem; font-size: var(--fs-small); color: var(--texte-secondaire); } .trace { width: 100%; height: auto; margin-top: 1.25rem; } .trace__fond path { stroke: var(--bordure); stroke-width: 1; fill: none; } .trace__chemin { fill: none; stroke: var(--donnee-vive); stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; } .trace__point { fill: var(--donnee-vive); } .sequences { width: 100%; margin-top: 1.1rem; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-small); font-variant-numeric: tabular-nums; } .sequences th { padding: 0 0 0.6rem; border-bottom: var(--hairline) solid var(--bordure); text-align: left; font-weight: var(--wght-texte); color: var(--texte-secondaire); } .sequences td { padding: 0.65rem 0 0; color: var(--texte); } .sequences tr td:first-child { color: var(--contenu); } .rapport__carte--chiffre { display: flex; flex-direction: column; } .chiffre { margin-top: auto; padding-top: 1.25rem; font-family: var(--font-mono); white-space: nowrap; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -0.02em; color: var(--preuve); font-variant-numeric: tabular-nums; } .chiffre__lien { font-size: 0.4em; color: var(--texte-secondaire); } /* Le séparateur de milliers suisse, resserré. Fragment Mono donne une case pleine à l'apostrophe comme à un chiffre : à cette taille, « 2’400 » se lisait en trois blocs, et le séparateur séparait au lieu de lier. On tire sur les deux bords pour lui rendre une chasse d'apostrophe. Les chiffres gardent leur grille : c'est ce qui aligne les deux bornes de la fourchette. */ .chiffre__mille { margin-inline: -0.19em; } /* --- Les marges : « comment on le sait », posé sur le papier. Le filet de chaque annotation déborde vers l'écran et franchit la frontière. -------- */ .marges { position: relative; } @media (max-width: 900px) { .marges { display: flex; flex-direction: column; gap: 1.25rem; } } .marge { padding-top: 0.75rem; border-top: var(--hairline) solid var(--filet-fort); } @media (min-width: 901px) { .marge { position: absolute; left: 0; right: 0; } } .marge::before { content: ""; position: absolute; top: -1px; left: -2.5rem; width: 2.5rem; border-top: var(--hairline) solid var(--filet-fort); } .marge__cle { font-family: var(--font-mono); font-size: var(--fs-kicker); letter-spacing: 0.08em; text-transform: uppercase; color: var(--donnee); } .marge__val { margin-top: 0.4rem; font-size: var(--fs-small); color: var(--texte-secondaire); } @media (max-width: 900px) { .tracemark__scene { grid-template-columns: 1fr; gap: 2rem 0; } .rapport__grille { grid-template-columns: 1fr; } .rapport__carte { border-right: 0; border-bottom: var(--hairline) solid var(--bordure); } .rapport__carte:last-child { border-bottom: 0; } .rapport .ecran__barre { flex-wrap: wrap; gap: 0.5rem; } .rapport__heure { margin-left: 0; width: 100%; order: 3; } .marges { gap: 1.25rem; } .marge::before { content: none; } } /* --------------------------------------------------------------------------- 6. Honnêteté. Refus à gauche en retrait, garantie à droite en pleine encre. --------------------------------------------------------------------------- */ .promesses { max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--gutter); border-top: var(--hairline) solid var(--bordure); } .promesses__titre { font-size: var(--fs-h2); line-height: var(--lh-title); color: var(--encre); } .paires { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); } .paire { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(2rem, 1rem + 4vw, 6rem); padding: 1.75rem 0; border-top: var(--hairline) solid var(--filet-fort); } .paire:last-child { border-bottom: var(--hairline) solid var(--filet-fort); } .paire__refus { color: var(--texte-secondaire); } .paire__garantie { font-size: var(--fs-lead); line-height: 1.35; font-weight: var(--wght-titre); letter-spacing: var(--ls-title); color: var(--encre); } .promesses__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } @media (max-width: 860px) { .paire { grid-template-columns: 1fr; gap: 0.6rem; } } /* --------------------------------------------------------------------------- 7. À qui ça sert. Grille 2×2 sur filets partagés. --------------------------------------------------------------------------- */ .usages { max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--gutter); } .usages__titre { font-size: var(--fs-h2); line-height: var(--lh-title); color: var(--encre); } .usages__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem); margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); } .usages__grille article { padding: 1.5rem 0 0.5rem; border-top: var(--hairline) solid var(--filet-fort); } .usages__grille h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--encre); } .usages__grille p { max-width: 40ch; margin-top: 0.6rem; color: var(--texte-secondaire); } @media (max-width: 1100px) { .usages__grille { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .usages__grille { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- 8. L'offre. Le pilote et son bordereau. --------------------------------------------------------------------------- */ .offre { border-top: var(--hairline) solid var(--bordure); background: var(--surface); } .offre__scene { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2.5rem, 2rem + 3vw, 5rem); max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--gutter); } .offre__titre { font-size: var(--fs-h2); line-height: var(--lh-title); color: var(--encre); } .offre__corps { max-width: var(--measure); margin-top: 1.5rem; font-size: var(--fs-lead); line-height: 1.4; color: var(--texte); } .inclus { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } .inclus li { padding: 0.9rem 0; border-top: var(--hairline) solid var(--filet-fort); color: var(--texte); } .inclus li:last-child { border-bottom: var(--hairline) solid var(--filet-fort); } .bordereau { align-self: start; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border: var(--hairline) solid var(--filet-fort); background: var(--fond); } .bordereau__etapes { margin-top: 1.5rem; counter-reset: etape; } .bordereau__etapes li { position: relative; counter-increment: etape; padding: 0.9rem 0 0.9rem 2.4rem; border-top: var(--hairline) solid var(--bordure); color: var(--texte); } .bordereau__etapes li::before { content: counter(etape, decimal-leading-zero); position: absolute; left: 0; top: 0.95rem; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--donnee); } .bordereau__pourquoi { margin-top: 1.5rem; padding-top: 1.25rem; border-top: var(--hairline) solid var(--bordure); font-size: var(--fs-small); color: var(--texte-secondaire); } @media (max-width: 900px) { .offre__scene { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- 9. Questions & commande. --------------------------------------------------------------------------- */ .commande { max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--gutter); } .commande__scene { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2.5rem, 2rem + 4vw, 6rem); } .commande__titre { font-size: clamp(2rem, 1.5rem + 2vw, 3.4rem); line-height: var(--lh-title); color: var(--encre); } .pli { border-top: var(--hairline) solid var(--filet-fort); } .pli:first-of-type { margin-top: 1.75rem; } .pli:last-of-type { border-bottom: var(--hairline) solid var(--filet-fort); } .pli summary { position: relative; padding: 1.1rem 2.5rem 1.1rem 0; cursor: pointer; list-style: none; font-weight: var(--wght-titre); color: var(--texte); } .pli summary::-webkit-details-marker { display: none; } .pli summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 1.2rem; color: var(--donnee); transition: transform var(--dur-fast) var(--ease); } .pli[open] summary::after { transform: translateY(-50%) rotate(45deg); } .pli p { max-width: 52ch; padding: 0 0 1.25rem; color: var(--texte-secondaire); } .formulaire { padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); border: var(--hairline) solid var(--filet-fort); background: var(--surface); } .formulaire__titre { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--encre); } .champ { margin-top: 1.4rem; } .champ label { display: block; margin-bottom: 0.45rem; font-size: var(--fs-small); color: var(--texte); } .champ input { width: 100%; min-height: 48px; padding: 0 0.9rem; border: var(--hairline) solid var(--filet-fort); border-radius: 0; background: var(--fond); color: var(--encre); font: inherit; font-size: var(--fs-body); } .champ input:focus-visible { outline: 2px solid var(--donnee); outline-offset: 1px; border-color: var(--donnee); } .formulaire__bouton { width: 100%; margin-top: 1.75rem; } .lien-whatsapp { display: block; margin-top: 1.25rem; padding-top: 1.1rem; border-top: var(--hairline) solid var(--filet-fort); text-align: center; font-size: var(--fs-small); color: var(--texte); } .lien-whatsapp:hover { color: var(--encre); } .formulaire__donnees { margin-top: 0.9rem; font-size: var(--fs-kicker); line-height: 1.55; color: var(--texte-secondaire); max-width: 46ch; } @media (max-width: 900px) { .commande__scene { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- Pied --------------------------------------------------------------------------- */ .pied { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.5rem var(--gutter); max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 2rem + 3vw, 5rem) var(--gutter); border-top: var(--hairline) solid var(--bordure); font-size: var(--fs-small); color: var(--texte-secondaire); } .pied__signature { color: var(--texte); } .pied__liens { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-left: auto; } .pied__liens a { transition: color var(--dur-fast) var(--ease); } .pied__liens a:hover { color: var(--encre); } /* Les paires de l'honnêteté : révélées par leur propre cadence (main.js), même dégradé que data-reveler. */ .js .a-reveler { opacity: 0; transform: translateY(16px); } .a-reveler.vu { opacity: 1; transform: none; transition: opacity var(--dur-lent) var(--ease), transform var(--dur-lent) var(--ease); } @media (prefers-reduced-motion: reduce) { .a-reveler { opacity: 1; transform: none; } } /* Effacement quand le flottant recouvre une commande du texte : la règle est dans M.initFlottants, à TOUTES les largeurs. L'opacité SEULE, jamais un déplacement ni un display : la boîte doit rester mesurable, sinon le test s'annulerait lui-même et le bouton clignoterait à chaque image. */ .wa[data-efface] { opacity: 0; /* `pointer-events` n'arrête que la souris. Sans `visibility`, le flottant effacé restait ATTEIGNABLE AU CLAVIER : le focus s'y posait, l'anneau était à opacité 0 comme le reste, et Entrée ouvrait WhatsApp depuis un bouton invisible. Le lecteur d'écran l'annonçait toujours. `visibility: hidden` ne change pas la boîte : `getBoundingClientRect` rend les mêmes coordonnées, donc le test de recouvrement de M.initFlottants continue de fonctionner à l'identique. C'est la seule mise hors service qui n'auto-annule pas la règle. */ visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease), visibility 0s var(--dur-fast); } .wa { transition: opacity var(--dur-fast) var(--ease); transition-delay: 0s; } /* --- Le formulaire qui part vraiment ------------------------------------- */ /* Piège à robots : hors écran plutôt que display:none, que les remplisseurs automatiques savent reconnaître. Personne au clavier ne l'atteint. */ .pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formulaire__accuse { margin: 0.9rem 0 0; padding: 0.7rem 0.85rem; font-size: var(--fs-small); color: var(--encre); /* Filet complet 1 px, comme partout ailleurs. Pas de barre coloree sur le flanc: la charte n'a qu'un seul filet, et un accent lateral est un tic. */ border: var(--hairline) solid var(--filet-fort); } .formulaire__accuse[data-echec] { border-color: var(--braise-papier); color: var(--braise-papier); } /* --- La ligne directe WhatsApp ------------------------------------------- Carré fixe à zéro radius, comme le reste de la marque. Le mélange est porté par le conteneur (voir le commentaire du balisage) : le groupe entier s'inverse, donc l'icône reste lisible aussi bien sur le papier que sur le bloc nuit du rapport, sans qu'on ait à la repeindre. */ .wa { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 47; mix-blend-mode: difference; } @media (max-width: 720px) { /* Sur mobile la barrette occupe le bas de l'écran : le bouton remonte au-dessus. */ .wa { bottom: calc(64px + env(safe-area-inset-bottom) + 0.75rem); } } .wa__lien { display: grid; place-items: center; width: 48px; height: 48px; /* --projecteur, et non --contenu : sur papier `--contenu` vaut l'encre, et `difference` entre un fond clair et de l'encre rend un clair — le bouton disparaissait (contraste mesuré 1,14:1). Le blanc n'est pas ici une couleur de marque mais le VEHICULE de l'inversion : `difference` avec du blanc retourne exactement le fond, ce qui rend l'icone lisible sur le papier comme sur le bloc nuit. */ color: var(--projecteur); opacity: 0.7; transition: opacity var(--dur) var(--ease); } .wa__lien:hover { opacity: 1; } .wa__lien:focus-visible { outline: 2px solid var(--projecteur); outline-offset: 4px; } /* Au repos, le bouton respire : un double battement toutes les 3,2 s. Au défilement, il saute — la montée décélère, la chute accélère : un vrai saut, pas un rebond élastique. Les deux commencent et finissent à 0,7 d'opacité, la bascule d'une animation à l'autre ne se voit pas. */ @keyframes wa-battement { 0%, 68%, 84%, 100% { opacity: 0.7; } 74%, 90% { opacity: 1; } } @keyframes wa-saut { 0% { transform: translateY(0); opacity: 0.7; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 20% { transform: translateY(-9px); opacity: 1; animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0.4); } 40% { transform: translateY(0); opacity: 0.8; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 52% { transform: translateY(-4px); opacity: 1; animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0.4); } 64%, 100% { transform: translateY(0); opacity: 0.7; } } @media (prefers-reduced-motion: no-preference) { .wa__lien.bat { animation: wa-battement 3.2s infinite; } /* Déclaré après .bat : quand les deux classes sont là, le saut gagne. */ .wa__lien.saute { animation: wa-saut 1.1s infinite; } /* Le pointeur l'a rejoint — on arrête de bouger la cible. */ .wa__lien.bat:hover, .wa__lien.saute:hover { animation: none; } } /* --- Cibles tactiles : 44 px partout ------------------------------------ Mesure avant correction: les liens de la barre et du pied tombaient a 22–25 px de haut, sous le minimum WCAG 2.2 AA (24x24, critere 2.5.8), et les boutons a 40 px. On agrandit la ZONE, jamais le texte: la mise en page ne bouge pas d'un pixel, seule la surface qui accepte le pouce grandit. */ .barre__marque, .barre__nav a, .pied__liens a, .lien-whatsapp { display: inline-flex; align-items: center; min-height: 44px; } /* Les liens de navigation et de pied vivent dans des rangees en flex: le min-height seul les etirerait sans elargir la zone cliquable au-dela du texte. Un peu de marge horizontale negative compense le padding, pour que l'alignement optique reste celui d'Axel. */ .barre__nav a, .pied__liens a { padding-inline: 0.5rem; margin-inline: -0.5rem; } .bouton--compact { min-height: 44px; } /* Le lien WhatsApp du formulaire occupe deja toute la largeur: il lui manquait seulement de la hauteur. */ .lien-whatsapp { justify-content: center; } /* --- Mouvement : trois endroits, pas un de plus --------------------------- La page a deja son moment fort — le rapport qui s'ecrit. Ce qui suit ne cherche pas a en ajouter un deuxieme : ce sont les trois endroits ou une transition manquait et ou son absence se sentait. */ /* 1. L'accuse de reception. C'est la recompense du seul geste que la page demande ; il surgissait sans transition, comme une erreur de rendu. Il arrive maintenant, brievement, par le haut. La classe est posee par devis.js apres le retrait de [hidden] : passer par une classe plutot que par @starting-style garde le comportement identique sur les navigateurs qui ne connaissent pas encore les transitions d'affichage. */ .formulaire__accuse { opacity: 0; transform: translateY(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .formulaire__accuse.est-la { opacity: 1; transform: none; } /* 2. Les replis de la FAQ. `
` s'ouvre d'un coup sec par defaut : quatre reponses qui claquent. `::details-content` et `interpolate-size` permettent d'animer vers `auto` sans JavaScript et sans mesurer de hauteur. La ou ce n'est pas supporte, l'ouverture reste instantanee — exactement le comportement d'aujourd'hui, donc rien ne casse. */ :root { interpolate-size: allow-keywords; } .pli::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--dur) var(--ease), opacity var(--dur) var(--ease), content-visibility var(--dur) allow-discrete; } .pli[open]::details-content { block-size: auto; opacity: 1; } /* 3. Le focus des champs. La bordure sautait d'un etat a l'autre ; elle glisse, sur la duree courte reservee au retour immediat. */ .champ input, .champ textarea { transition: border-color var(--dur-fast) var(--ease); } @media (prefers-reduced-motion: reduce) { .formulaire__accuse { transition: none; opacity: 1; transform: none; } .pli::details-content { transition: none; } .champ input, .champ textarea { transition: none; } } /* Aucune ligne n'est figée dans le balisage : la largeur du site est fluide, un
de mise en page casse le mobile. C'est le CSS qui compose. `text-wrap` s'hérite : on le pose une fois sur la racine plutôt que d'énumérer des sélecteurs. Une liste laisse toujours quelqu'un dehors — ici c'étaient les de la FAQ, les