@charset "utf-8"; /* Couleurs & Décors — feuille unique des quatre pages. Le site est quasi neutre : blanc d'atelier et gris plâtre. L'accent n'est pas dans cette feuille, il est posé à l'usage par le dispositif « la teinte qui suit » (--accent, écrite sur par le script). */ :root { --blanc: #f7f5f1; --blanc-pur: #fcfbf9; --platre: #e9e5dd; --platre-gris: #dad5cb; --platre-fonce: #b9b3a6; --encre: #22211e; --encre-douce: #56534c; /* accent par défaut — terre d'ombre. Le script la remplace en continu. */ --accent: #5f4e33; --accent-doux: rgba(95, 78, 51, 0.16); --t-geant: clamp(3.4rem, 9.5vw, 9rem); --t-titre: clamp(2.5rem, 5.4vw, 4.8rem); --t-section: clamp(1.9rem, 3.2vw, 2.9rem); --t-sous: clamp(1.25rem, 1.8vw, 1.6rem); --t-corps: clamp(1rem, 0.95rem + 0.28vw, 1.12rem); --t-petit: 0.92rem; --t-menu: 0.76rem; --e1: 0.5rem; --e2: 1rem; --e3: 1.75rem; --e4: 3rem; --e5: 5rem; --e6: 8rem; --e7: 12rem; --utile: min(1280px, 100% - 2 * var(--e4)); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--blanc); color: var(--encre); font-family: 'Hind', 'Trebuchet MS', sans-serif; font-size: var(--t-corps); font-weight: 400; line-height: 1.68; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3, p, ul, ol, figure { margin: 0; } ul { list-style: none; padding: 0; } a { color: inherit; } ::selection { background: var(--accent-doux); } /* ══ En-tête ══════════════════════════════════════════════════════ */ .entete { position: relative; z-index: 6; width: var(--utile); margin: 0 auto; padding: var(--e3) 0 var(--e2); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e2) var(--e3); border-bottom: 1px solid var(--platre-gris); } .marque { font-family: 'Darker Grotesque', 'Trebuchet MS', sans-serif; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.015em; text-decoration: none; text-transform: uppercase; line-height: 1; } .marque-amp { display: inline-block; margin: 0 0.2em; color: var(--accent); font-weight: 600; transition: color 0.5s linear; } .nav { display: flex; flex-wrap: wrap; gap: var(--e3); font-size: var(--t-menu); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .nav a { padding-bottom: 0.25em; border-bottom: 2px solid transparent; color: var(--encre-douce); text-decoration: none; transition: color 0.25s ease, border-color 0.5s linear; } .nav a:hover, .nav a:focus-visible { color: var(--encre); border-bottom-color: var(--accent); } .nav .nav-actif { color: var(--encre); border-bottom-color: var(--accent); } /* ══ Grille et bandes ═════════════════════════════════════════════ */ .page { display: block; } .bande { padding: var(--e6) 0; } .bande-claire { background: var(--platre); } .bande-pleine { padding: var(--e5) 0 var(--e6); } .grille { width: var(--utile); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e3); align-items: start; } /* ══ Typographie de contenu ═══════════════════════════════════════ */ .sur-titre { display: block; margin-bottom: var(--e2); color: var(--encre-douce); font-size: var(--t-menu); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .geant, .titre, .titre-section { font-family: 'Darker Grotesque', 'Trebuchet MS', sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 0.88; text-wrap: balance; overflow-wrap: break-word; } .geant { font-size: var(--t-geant); } .titre { font-size: var(--t-titre); } .titre-section { font-size: var(--t-section); line-height: 0.95; } .chapeau { font-size: var(--t-sous); font-weight: 300; line-height: 1.42; color: var(--encre-douce); } .texte + .texte { margin-top: var(--e2); } /* un titre ne colle jamais au texte qui le suit : les display sont posés en line-height 0.88, ils n'ont aucune respiration propre. */ .geant + .texte, .geant + .chapeau, .titre + .texte, .titre + .chapeau, .titre-section + .texte, .titre-section + .chapeau, .titre-section + .mesure, .chapeau + .texte { margin-top: var(--e2); } .accentue { color: var(--accent); transition: color 0.5s linear; } .legende { margin-top: var(--e2); color: var(--encre-douce); font-size: var(--t-petit); line-height: 1.5; } .filet { height: 1px; border: 0; margin: 0; background: var(--platre-gris); } .filet-fort { height: 3px; border: 0; margin: 0; background: var(--accent); transition: background-color 0.5s linear; } .lien-fort { color: var(--accent); font-weight: 500; text-decoration: none; border-bottom: 2px solid var(--accent-doux); transition: color 0.5s linear, border-color 0.5s linear; } .lien-fort:hover, .lien-fort:focus-visible { border-bottom-color: var(--accent); } /* ══ Listes ═══════════════════════════════════════════════════════ */ .puces { margin-top: var(--e2); } .puces li { position: relative; padding-left: var(--e3); margin-top: var(--e2); color: var(--encre-douce); } .puces li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 14px; height: 2px; background: var(--accent); transition: background-color 0.5s linear; } /* fiche technique — clé / valeur alignées sur un filet */ .liste-tech { margin-top: var(--e3); border-top: 1px solid var(--platre-gris); } .liste-tech div { display: grid; grid-template-columns: minmax(7.5rem, 34%) 1fr; gap: var(--e2); padding: 0.7rem 0; border-bottom: 1px solid var(--platre-gris); } .liste-tech-cle { font-size: var(--t-petit); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--encre-douce); line-height: 1.55; } .liste-tech-val { font-size: var(--t-petit); line-height: 1.55; } /* mesure — un chiffre display et son mot */ .mesure { display: flex; align-items: baseline; gap: var(--e2); } .mesure-nombre { font-family: 'Darker Grotesque', 'Trebuchet MS', sans-serif; font-size: clamp(3rem, 6vw, 5.2rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.04em; color: var(--accent); transition: color 0.5s linear; } .mesure-mot { font-size: var(--t-petit); color: var(--encre-douce); line-height: 1.35; } /* ══ Chantiers et étapes ══════════════════════════════════════════ */ .chantier { padding-top: var(--e4); border-top: 3px solid var(--platre-gris); } .chantier-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e2); margin-bottom: var(--e2); } .etape { position: relative; padding-top: var(--e2); } .etape-num { display: block; font-family: 'Darker Grotesque', 'Trebuchet MS', sans-serif; font-size: 2.6rem; font-weight: 800; line-height: 0.8; letter-spacing: -0.03em; color: var(--platre-fonce); margin-bottom: var(--e1); } /* ══ Visuels ══════════════════════════════════════════════════════ */ .cadre { position: relative; overflow: hidden; background: var(--platre-gris); } .cadre .vis { width: 100%; height: 100%; object-fit: cover; } .cadre-large { aspect-ratio: 16 / 9; } .cadre-haut { aspect-ratio: 3 / 4; } /* ══ Pied ═════════════════════════════════════════════════════════ */ .pied { padding: var(--e5) 0 var(--e4); background: var(--platre); } .pied-filet { grid-column: 1 / -1; margin-bottom: var(--e3); } .pied-bloc { font-size: var(--t-petit); line-height: 1.7; color: var(--encre-douce); } .pied-bloc strong { display: block; margin-bottom: var(--e1); color: var(--encre); font-size: var(--t-menu); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .pied-bloc a { color: var(--encre-douce); text-decoration: none; border-bottom: 1px solid var(--platre-fonce); } .pied-bloc a:hover { color: var(--encre); } /* ══ LE DISPOSITIF — « la teinte qui suit » ═══════════════════════ Un disque de couleur accroché au curseur, en retard sur lui. Sa teinte est celle de la section survolée. Il n'a aucune position fixe : il n'existe que là où la main travaille. */ .disque { position: fixed; left: 0; top: 0; z-index: 4; width: 168px; height: 168px; margin: -84px 0 0 -84px; border-radius: 50%; pointer-events: none; opacity: 0; /* la position est interpolée par le script, image par image : aucune transition CSS sur transform, elle se battrait avec l'interpolation. */ transform: translate3d(var(--sx, 50vw), var(--sy, 50vh), 0); transition: opacity 0.4s ease; mix-blend-mode: multiply; } html.js .disque { opacity: 1; } /* le grossissement au clic vit sur le noyau : lui peut transitionner */ .disque-noyau { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--accent) 46%, transparent) 0%, color-mix(in srgb, var(--accent) 26%, transparent) 52%, transparent 72%); transform: scale(1); transition: background 0.5s linear, transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1); } .teinte-mot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); white-space: nowrap; opacity: 0; transition: opacity 0.25s ease; } html.teinte-fixee .disque-noyau { transform: scale(1.3); } html.teinte-fixee .teinte-mot { opacity: 1; } /* le disque est une réaction au curseur : sans curseur, il n'a pas lieu d'être */ @media (hover: none) { .disque { display: none; } } @media (prefers-reduced-motion: reduce) { .disque { display: none; } .marque-amp, .accentue, .filet-fort, .lien-fort, .mesure-nombre, .nav a, .puces li::before, .disque-noyau { transition: none; } } /* ══ Révélations — états fermés ═══════════════════════════════════ Ils ne vivent que sous html.js ET en mouvement non réduit : sans script, la page est entièrement lisible. Aucun clip-path ici : un élément clippé ne compte pas comme visible et ne se révélerait jamais. */ @media (prefers-reduced-motion: no-preference) { html.js .monte { opacity: 0; transform: translateY(26px); transition: opacity 0.72s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1); } html.js .monte.posee { opacity: 1; transform: none; } html.js .couche { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } html.js .couche.appliquee { opacity: 1; transform: none; } /* la couche qui se pose : le clip-path ne vit que sur l'enfant, jamais observé */ html.js .couche .vis { clip-path: inset(0 100% 0 0); transition: clip-path 1.15s cubic-bezier(0.62, 0.02, 0.2, 1) 0.08s; } html.js .couche.appliquee .vis { clip-path: inset(0 0 0 0); } } /* ══ Placements — l'asymétrie est déclarée en ligne sur chaque bloc ══ */ @media (max-width: 900px) { :root { --utile: min(1280px, 100% - 2 * var(--e3)); } .bande { padding: var(--e5) 0; } .bande-pleine { padding: var(--e4) 0 var(--e5); } .grille > * { grid-column: 1 / -1 !important; grid-row: auto !important; } .liste-tech div { grid-template-columns: 1fr; gap: 0.15rem; } } @media (max-width: 560px) { .entete { flex-direction: column; align-items: flex-start; gap: var(--e2); } .nav { gap: var(--e2); } }