/* ═══════════════════════════════════════════════════════════════════════ SCROLER — Mobilier commun aux pages intérieures ─────────────────────────────────────────────────────────────────────── Principe : les pages intérieures ne sont pas des documents, ce sont des stations dans LA MÊME PIÈCE que celle de la page d'accueil. Un seul sol nocturne du haut en bas, éclairé à l'orange, dans lequel le contenu se matérialise sur des dalles de verre. Il n'y a donc PAS d'alternance clair/sombre : c'est elle qui donnait à la page son air de brochure d'agence. La respiration vient du matériau (verre plus ou moins dense) et de la lumière, pas du fond. ═══════════════════════════════════════════════════════════════════════ */ :root { --scr-header: 66px; /* Version toujours numerique : --scr-header passe a `auto` sur mobile, ce qui casserait les calc() du sommaire et des ancres. */ --scr-header-px: 66px; /* Densités de verre, du plus discret au plus affirmé */ --scr-verre-1: rgba(242,239,234,.055); --scr-verre-2: rgba(242,239,234,.085); --scr-bord: rgba(242,239,234,.17); --scr-bord-vif:rgba(233,78,26,.52); } html { background: var(--scr-night); } /* Le fond est porté par (plus haut) et NON par : un fond sur passerait devant le canvas en z-index négatif et le masquerait. */ body.scr-nuit { background: transparent; color: var(--scr-on-night); } /* ═══ Matière — grain et lumière ═══════════════════════════════════════ Deux voiles fixes portés par les pseudo-éléments du body, donc sans toucher au HTML. Le halo (::before) réchauffe le haut de page ; le grain (::after, feTurbulence en data-URI, ≈.028 d'opacité) passe au-dessus de tout et fait basculer le noir d'« écran éteint » à « pellicule ». Les deux sont inertes au pointeur et coupés en impression et en couleurs forcées. */ body.scr-nuit::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 120% 60% at 50% -12%, rgba(233,78,26,.05) 0%, transparent 65%); } body.scr-nuit::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* ═══ La salle — décor de fond, fixe derrière tout ═════════════════════ */ .scr-salle { position: fixed; inset: 0; /* z-index négatif plutôt que de repositionner tous les enfants de body : la règle `.scr-nuit > *` qui servait à ça écrasait le position:sticky de l'en-tête, qui cessait donc de se coller en haut. Le décor se glisse entre le fond de et le contenu de . */ z-index: -1; width: 100%; height: 100%; pointer-events: none; } /* Voile qui assombrit le décor derrière les zones de lecture dense */ .scr-voile { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 120% 80% at 50% 50%, rgba(23,18,15,.86) 0%, rgba(23,18,15,.55) 60%, transparent 100%); } /* ═══ Barre de progression ═════════════════════════════════════════════ */ .scr-progress { position: fixed; top: 0; left: 0; z-index: 60; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--scr-orange-d), var(--scr-orange)); pointer-events: none; } /* Animation pilotée par le défilement, sans une ligne de JavaScript. Là où ce n'est pas supporté, la barre reste simplement invisible. */ @supports (animation-timeline: scroll()) { .scr-progress { animation: scrProgress linear forwards; animation-timeline: scroll(root block); } @keyframes scrProgress { to { transform: scaleX(1); } } } /* ═══ En-tête ══════════════════════════════════════════════════════════ */ .scr-head { position: sticky; top: 0; z-index: 50; height: var(--scr-header); display: flex; align-items: center; gap: 24px; padding-inline: var(--scr-gutter); background: rgba(23,18,15,.72); border-bottom: 1px solid rgba(242,239,234,.08); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); color: var(--scr-on-night); } .scr-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; font-weight: 300; font-size: 19px; letter-spacing: .06em; flex: 0 0 auto; } .scr-logo img { width: 21px; height: 21px; } .scr-logo b { font-weight: 300; } .scr-logo:hover b { color: var(--scr-orange); } .scr-head nav { margin-left: auto; display: flex; align-items: center; gap: 4px; } .scr-head nav a { padding: 9px 14px; border-radius: 999px; font-family: var(--scr-mono); font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; text-decoration: none; color: rgba(242,239,234,.74); white-space: nowrap; transition: color .25s ease, background-color .25s ease; } .scr-head nav a:hover { color: var(--scr-paper); background: rgba(242,239,234,.08); } .scr-head nav a[aria-current="page"] { color: var(--scr-orange); } .scr-head nav a.scr-head__cta { border: 1.5px solid var(--scr-orange); color: var(--scr-paper); } .scr-head nav a.scr-head__cta:hover { background: var(--scr-orange-d); border-color: var(--scr-orange-d); } @media (max-width: 860px) { :root { --scr-header: auto; } .scr-head { flex-direction: column; align-items: stretch; gap: 0; height: auto; padding-block: 12px 0; } /* Fondu au bord droit : l indice qu on peut faire defiler la nav. Le padding final de 44 px fait qu en fin de course le CTA sort entierement de la zone fondue — rien ne semble tronque. */ .scr-head nav { margin-left: 0; overflow-x: auto; padding-bottom: 10px; padding-inline-end: 44px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); } .scr-head nav::-webkit-scrollbar { display: none; } } /* ═══ Sections ═════════════════════════════════════════════════════════ */ /* overflow-x: clip — le bassin de lumiere de __head (inset -16%) deborde du bord droit et rendait la page pannable de 36 px sur mobile. clip et non hidden : aucun conteneur de defilement cree, sticky intact. */ .scr-section { position: relative; padding-block: clamp(76px, 11vw, 168px); overflow-x: clip; } .scr-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; font-family: var(--scr-mono); font-weight: 500; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--scr-orange); } .scr-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55; } .scr-eyebrow--center { justify-content: center; } /* Les titres de section : grands, fins, serrés. C'est la typographie qui porte la page, pas les encadrés. */ .scr-section h2 { margin: 0 0 20px; /* Calibre pour que les titres longs de la page tiennent en DEUX lignes a pleine largeur. Au-dela, ils se hachaient en trois ou quatre. */ font-size: clamp(24px, 3.4vw, 46px); font-weight: 200; line-height: 1.1; letter-spacing: -.018em; color: var(--scr-paper); text-wrap: balance; } .scr-section h2 em { font-style: normal; color: var(--scr-orange); } /* Le chapo est bride a 75ch : a pleine largeur il depassait 95 caracteres par ligne et l oeil perdait le retour a la ligne. La lecon reste la meme qu avec l ancienne bride a 58ch : on mesure LE CHAPO, jamais le conteneur ni le h2 — c est la bride sur __head qui etranglait les titres a 668 px sur une page large de 1180. */ .scr-lede { max-width: 75ch; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.75; color: var(--scr-on-night-soft); } /* Pas de max-width ici (voir ci-dessus) — et un leger bassin de lumiere derriere chaque tete de section : la lecture commence toujours dans une zone eclairee. */ .scr-section__head { position: relative; margin-bottom: clamp(44px, 5.5vw, 78px); } .scr-section__head::before { content: ""; position: absolute; inset: -14% -16%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 72% 85% at 26% 32%, rgba(233,78,26,.055) 0%, transparent 70%); } /* ═══ Boutons ══════════════════════════════════════════════════════════ */ .scr-nuit .scr-btn { color: var(--scr-on-night); border-color: currentColor; } .scr-nuit .scr-btn--accent { color: var(--scr-orange); } .scr-nuit .scr-btn:hover { background: var(--scr-orange-d); border-color: var(--scr-orange-d); color: #fff; } /* ═══ Révélation au défilement ═════════════════════════════════════════ */ .js .scr-reveal { opacity: 0; transform: translateY(22px); } .js .scr-reveal.is-in { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s var(--scr-ease); } .js .scr-reveal.is-in:nth-child(2) { transition-delay: .08s; } .js .scr-reveal.is-in:nth-child(3) { transition-delay: .16s; } .js .scr-reveal.is-in:nth-child(4) { transition-delay: .24s; } .js .scr-reveal.is-in:nth-child(5) { transition-delay: .32s; } .js .scr-reveal.is-in:nth-child(6) { transition-delay: .40s; } /* ═══ Pied de page ═════════════════════════════════════════════════════ */ .scr-foot { position: relative; background: rgba(0,0,0,.62); border-top: 1px solid var(--scr-bord); color: var(--scr-on-night-soft); padding-block: clamp(54px, 6vw, 84px) 30px; font-size: 15px; } .scr-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; } @media (max-width: 760px) { .scr-foot__grid { grid-template-columns: 1fr; } } .scr-foot h2 { margin: 0 0 14px; font-family: var(--scr-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,239,234,.60); } .scr-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .scr-foot ul a { display: inline-block; padding-block: 2px; } .scr-foot a { color: var(--scr-on-night-soft); text-decoration: none; } .scr-foot a:not(.scr-logo):hover { color: var(--scr-orange); text-decoration: underline; } .scr-foot__baseline { max-width: 34ch; line-height: 1.6; } .scr-foot .scr-logo { margin-bottom: 14px; } .scr-foot__bottom { margin-top: clamp(34px, 4vw, 54px); padding-top: 22px; border-top: 1px solid rgba(242,239,234,.12); display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-family: var(--scr-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,239,234,.60); } .scr-foot__bottom a { color: inherit; } /* ═══ Préférences système ══════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .js .scr-reveal { opacity: 1; transform: none; } .scr-progress { animation: none; transform: scaleX(0); } } @media (forced-colors: active) { .scr-salle, .scr-voile, .scr-progress { display: none; } body.scr-nuit::before, body.scr-nuit::after, .scr-section__head::before { display: none; } .scr-head { border-bottom: 1px solid CanvasText; } } @media print { html, body.scr-nuit { background: #fff; color: #000; } .scr-salle, .scr-voile, .scr-progress, .scr-head, .scr-sommaire { display: none; } body.scr-nuit::before, body.scr-nuit::after, .scr-section__head::before { display: none; } .scr-section { padding-block: 18pt; } /* Chaque famille de texte doit être citée : une couleur posée sur le conteneur n est pas héritée par un enfant qui a la sienne. */ .scr-section h2, .scr-lede, .scr-foot, .scr-foot h2, .scr-foot a, .scr-foot ul a, .scr-foot__bottom, .scr-foot__bottom a, .scr-foot .scr-logo, .scr-foot__baseline, .scr-eyebrow { color: #000; } .scr-foot { background: #fff; } } /* ═══════════════════════════════════════════════════════════════════════ SOMMAIRE COLLANT ─────────────────────────────────────────────────────────────────────── La page couvre trois activités distinctes (sites, visibilité, outils) réparties sur onze sections. Ce bandeau les rend atteignables d'un clic et indique en permanence où l'on se trouve. Il est placé APRÈS le hero dans le document : il n'apparaît donc qu'une fois celui-ci dépassé, sans ajouter de barre au premier écran. ═══════════════════════════════════════════════════════════════════════ */ .scr-sommaire { position: sticky; top: var(--scr-header-px, 66px); z-index: 40; border-block: 1px solid var(--scr-bord); background: rgba(11,10,10,.80); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); } .scr-sommaire__piste { position: relative; display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; list-style: none; margin: 0; padding: 0; } .scr-sommaire__piste::-webkit-scrollbar { display: none; } .scr-sommaire a { display: flex; align-items: center; gap: 9px; padding: 15px 16px; white-space: nowrap; text-decoration: none; font-family: var(--scr-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: rgba(242,239,234,.62); transition: color .3s ease; } .scr-sommaire a:hover { color: var(--scr-paper); } .scr-sommaire a[aria-current="true"] { color: var(--scr-orange); } /* Les trois activités portent un numéro ; le reste est secondaire. */ .scr-sommaire__num { font-size: 9.5px; letter-spacing: .1em; color: var(--scr-orange); opacity: .8; } .scr-sommaire li:not(.scr-sommaire--pilier) a { color: rgba(242,239,234,.56); } .scr-sommaire li:not(.scr-sommaire--pilier) a:hover { color: rgba(242,239,234,.86); } .scr-sommaire li:not(.scr-sommaire--pilier) a[aria-current="true"] { color: var(--scr-orange); } /* Séparateur entre les trois piliers et le reste */ .scr-sommaire__coupe { flex: 0 0 auto; align-self: center; width: 1px; height: 16px; margin-inline: 10px; background: var(--scr-bord); } /* Le curseur qui glisse d'une entrée à l'autre. Position et largeur posées par le JS ; seul `transform` est animé, donc composité. */ .scr-sommaire__glisseur { position: absolute; left: 0; bottom: 0; height: 2px; width: 1px; background: var(--scr-orange); box-shadow: 0 0 12px rgba(233,78,26,.9); transform: translateX(var(--x, 0)) scaleX(var(--w, 0)); transform-origin: 0 50%; transition: transform .45s var(--scr-ease); pointer-events: none; opacity: 0; } .scr-sommaire.is-actif .scr-sommaire__glisseur { opacity: 1; } /* Sous 860 px l'en-tête fait deux rangées : empiler un second bandeau collant mangerait le peu de hauteur disponible. Il défile alors normalement avec la page. */ @media (max-width: 860px) { .scr-sommaire { position: static; } .scr-sommaire a { padding: 13px 13px; font-size: 11px; } } /* Les ancres ne doivent pas se retrouver sous les deux bandeaux. */ :target, .scr-section[id] { scroll-margin-top: calc(var(--scr-barres-px, 116px) + 14px); } @media (prefers-reduced-motion: reduce) { .scr-sommaire__glisseur { transition: none; } } @media (forced-colors: active) { .scr-sommaire__glisseur { display: none; } .scr-sommaire a[aria-current="true"] { text-decoration: underline; } } @media print { .scr-sommaire { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ MICRO-INTERACTIONS PARTAGÉES ─────────────────────────────────────────────────────────────────────── Les variables --mx/--my, --rx/--ry et --gx/--gy sont posées par micro.js. Sans JavaScript elles valent leur repli et rien ne bouge. ═══════════════════════════════════════════════════════════════════════ */ /* Bouton magnétique : il se décale vers le curseur, jamais plus de 7 px. */ [data-magnetique] { transform: translate(var(--mx, 0), var(--my, 0)); transition: transform .45s var(--scr-ease), background-color .28s ease, color .28s ease, border-color .28s ease; } [data-magnetique]:active { transition-duration: .1s; } /* Lueur qui suit le curseur à l'intérieur d'un bloc. */ .scr-lueur { position: relative; isolation: isolate; } .scr-lueur::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(233,78,26,.16), transparent 70%); transition: opacity .4s ease; } .scr-lueur:hover::after { opacity: 1; } /* Soulignement qui se dessine sous les liens de texte. */ .scr-souligne { position: relative; text-decoration: none; background-image: linear-gradient(var(--scr-orange), var(--scr-orange)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size .45s var(--scr-ease), color .3s ease; } .scr-souligne:hover { background-size: 100% 1px; color: var(--scr-paper); } @media (prefers-reduced-motion: reduce) { [data-magnetique] { transform: none; transition: none; } .scr-lueur::after { display: none; } .scr-souligne { transition: none; } } @media (forced-colors: active) { [data-magnetique] { transform: none; } .scr-lueur::after { display: none; } }