/** * Décryptage — couche « signature » (effet whaou). * * Se superpose à base.css + components.css. Transforme la une fidèle en une * véritable « première page » vivante : folio, bandeau d'indices à sparklines, * hero dramatisé (duotone + révélation mot à mot + parallaxe + tampon), * grille à filets de journal, fil numéroté, texture papier, micro-animations. * * @package Decryptage */ :root { --up: #2f6b3a; /* hausse (marchés) — vert profond */ --down: #9b2226; /* baisse — rouge brique */ --desk: #ffffff; /* surface sous la feuille — défaut blanc (réglable en admin) */ --sheet-max: 1320px; /* largeur de la « feuille » de journal */ --img-grain: 0.22; /* intensité du grain OPTIONNEL sur les images */ } /* ====================================================================== La « feuille » de journal ---------------------------------------------------------------------- Le fond N'A PAS de grain. Le site est une page de journal posée sur une surface : feuille ivoire cernée d'un filet (« le bord »), ombre douce, détachée d'un fond neutre plus sombre. ====================================================================== */ body { background: var(--desk); } /* La « scène » centre la feuille et porte les pages déchirées du dessous. Un petit margin à TOUTES les tailles → un bord visible même sur mobile. */ .lj-stage { --lift-x: 0px; --lift-y: 0px; /* parallaxe douce (souris) */ position: relative; max-width: var(--sheet-max); margin: clamp(8px, 1.6vw, 42px) auto; } .lj-site { position: relative; z-index: 2; background: var(--paper); box-shadow: 0 1px 2px rgba(22,20,13,0.12), 0 24px 46px -18px rgba(22,20,13,0.36), 0 80px 130px -52px rgba(22,20,13,0.58), /* ombre portée plus dramatique */ inset 0 0 140px rgba(96,78,44,0.055); /* bords légèrement vieillis (jauni) */ } /* Grain de papier optionnel, posé sur la feuille, DERRIÈRE le texte (z-index -1). Réglé par --paper-grain-opacity (0 = désactivé) via l'admin Couleurs. */ .lj-site::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg)'/%3E%3C/svg%3E"); background-size: 200px 200px; mix-blend-mode: multiply; opacity: var(--paper-grain-opacity, 0); } /* Pages du dessous, aux bords déchirés (filtre de déplacement) : épaisseur réelle. */ .lj-paper-back { position: absolute; inset: 0; pointer-events: none; filter: url(#lj-deckle); transition: transform 0.55s var(--ease); } /* Repli Safari (feDisplacementMap mal géré) : pages aux bords nets, le mouvement reste. */ .lj-no-deckle .lj-paper-back { filter: none; border-radius: 2px; } .lj-paper-back--a { z-index: 1; background: var(--paper-2); transform: translate(calc(6px + var(--lift-x)), calc(7px + var(--lift-y))) rotate(var(--rot-a, 0.12deg)); box-shadow: 0 12px 24px -14px rgba(22,20,13,0.40); } .lj-paper-back--b { z-index: 0; background: var(--paper-3); transform: translate(calc(12px + var(--lift-x) * 1.8), calc(13px + var(--lift-y) * 1.8)) rotate(var(--rot-b, 0.28deg)); box-shadow: 0 16px 30px -16px rgba(22,20,13,0.34); } /* Appareils tactiles (smartphone/tablette) : on fige le cadre. Les pages du dessous (filtre + ombres + transform) vibraient pendant le défilement iOS → on les retire. La feuille conserve son ombre et son bord ; rien ne bouge. */ @media (pointer: coarse) { .lj-paper-back { display: none; } } /* Coin bas-droite qui se soulève — détail « vrai papier ». */ .lj-site::after { content: ""; position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; z-index: 3; pointer-events: none; background: linear-gradient(315deg, transparent 0 45%, rgba(22,20,13,0.16) 46%, var(--paper-3) 48%, var(--paper) 64%, var(--paper-2) 100%); border-top-left-radius: 9px; box-shadow: -5px -5px 9px -3px rgba(22,20,13,0.18); } /* ====================================================================== Grain LÉGER optionnel sur les images (au même titre que N&B / Sépia). Posé par une classe .lj-grain (réglable en admin), jamais en dur. ====================================================================== */ .lj-img.lj-grain::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; mix-blend-mode: overlay; opacity: var(--img-grain); } /* ====================================================================== Folio (haut de une) : Vol. · N° · date · édition ====================================================================== */ .lj-folio { border-bottom: 1px solid var(--rule); } .lj-folio-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: 34px; font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } .lj-folio-inner > :first-child { justify-self: start; } .lj-folio-inner > :last-child { justify-self: end; text-align: right; } .lj-folio b { color: var(--ink); font-weight: 700; } .lj-folio-center { justify-self: center; text-align: center; font-family: var(--font-sans); font-style: normal; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.66rem; color: var(--ink); } /* Manchette monumentale + filets latéraux + ornement */ .lj-masthead-brand { position: relative; } .lj-masthead-title { letter-spacing: -0.02em; } .lj-masthead-rule { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.5rem; } .lj-masthead-rule::before, .lj-masthead-rule::after { content: ""; height: 1px; width: clamp(40px, 12vw, 150px); background: var(--rule-strong); } .lj-masthead-star { font-size: 0.8rem; color: var(--accent); } /* ====================================================================== Bandeau d'indices (signature « intelligence éco ») ====================================================================== */ .lj-indices { border-bottom: 1px solid var(--rule-strong); background: color-mix(in srgb, var(--paper) 60%, var(--paper-2)); overflow: hidden; } .lj-indices-inner { display: flex; align-items: stretch; } .lj-indices-label { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1rem; background: var(--ink); color: var(--paper); font-family: var(--font-sans); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; } .lj-indices-track { flex: 1; overflow: hidden; } .lj-indices-list { display: flex; align-items: center; gap: 2.4rem; white-space: nowrap; height: 46px; padding-left: 1.6rem; will-change: transform; animation: lj-marquee 44s linear infinite; } .lj-indices:hover .lj-indices-list { animation-play-state: paused; } .lj-index { flex: none; display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-sans); font-size: 0.82rem; text-decoration: none; padding: 4px 2px; white-space: nowrap; transition: opacity var(--dur-fast) var(--ease); } .lj-index:hover { opacity: 1; } .lj-index:hover .lj-index-name { color: var(--accent); } .lj-index-name { font-weight: 700; letter-spacing: 0.04em; color: var(--ink); } .lj-index-val { font-variant-numeric: tabular-nums; color: var(--ink-soft); } .lj-index .spark { flex: 0 0 66px; width: 66px; height: 22px; display: block; opacity: 0.95; } .lj-index-chg { font-variant-numeric: tabular-nums; font-weight: 700; display: inline-flex; align-items: center; gap: 0.2rem; } .lj-index.up .lj-index-chg, .lj-index.up .spark { color: var(--up); stroke: var(--up); } .lj-index.down .lj-index-chg, .lj-index.down .spark { color: var(--down); stroke: var(--down); } .lj-index .spark polyline { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; } /* ====================================================================== HERO dramatisé ====================================================================== */ .lj-hero--wow { min-height: clamp(460px, 32vw + 260px, 760px); } .lj-hero--wow .lj-hero-media img { filter: var(--img-filter-bw) brightness(0.98); transform: scale(1.06); transition: transform 1.4s var(--ease); } .lj-hero--wow.is-sepia .lj-hero-media img { filter: var(--img-filter-sepia) brightness(0.98); } /* (Retirés : tampon circulaire et grand chiffre fantôme — jugés « trop fantaisie ».) */ /* Titre : révélation mot à mot (clip vertical) */ .lj-hero--wow .lj-hero-title { font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.4rem); line-height: 1.0; letter-spacing: -0.02em; } .lj-w { display: inline-block; overflow: hidden; vertical-align: top; } .lj-w-i { display: inline-block; transform: translateY(112%); transition: transform 0.85s var(--ease); } .lj-reveal.is-in .lj-w-i, .lj-hero.is-in .lj-w-i { transform: none; } /* Kicker avec filet qui se trace */ .lj-hero-kicker { display: inline-flex; align-items: center; gap: 0.8rem; } .lj-drawline { display: inline-block; height: 1px; width: clamp(40px, 8vw, 90px); background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.2s; } .is-in .lj-drawline { transform: scaleX(1); } /* ====================================================================== Grille « première page » : filets verticaux + label vertical ====================================================================== */ @media (min-width: 980px) { .lj-layout--paper.lj-sidebar-right .lj-sidebar { border-left: 1px solid var(--rule-strong); padding-left: var(--gap); } .lj-layout--paper.lj-sidebar-left .lj-sidebar { border-right: 1px solid var(--rule-strong); padding-right: var(--gap); } } /* Séparateurs verticaux dans les grilles de cartes */ @media (min-width: 940px) { .lj-grid--ruled { position: relative; } .lj-grid--ruled .lj-card { padding-right: var(--gap); border-right: 1px solid var(--rule); } .lj-grid--ruled.lj-cols-3 .lj-card:nth-child(3n), .lj-grid--ruled .lj-card:last-child { border-right: 0; padding-right: 0; } } /* (Retirés : numéros 01/02/03 sur les listes, label de rubrique vertical et point « live » pulsant — pour un rendu plus sobre, plus « journal ».) */ /* ====================================================================== Compteurs / stats éditoriales ====================================================================== */ .lj-stat { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1rem + 3vw, 3.4rem); color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .lj-stat-label { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 0.4rem; } /* Bandeau de statistiques (3 chiffres clés) */ .lj-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: var(--space) 0; border-top: 3px double var(--rule-strong); border-bottom: 3px double var(--rule-strong); text-align: center; } .lj-stats > div { position: relative; } .lj-stats > div + div::before { content: ""; position: absolute; left: calc(var(--gap) / -2); top: 10%; bottom: 10%; width: 1px; background: var(--rule); } /* Drop cap renforcée pour le chapô vedette */ .lj-featured-excerpt.lj-dropcap::first-letter { float: left; font-family: var(--font-display); font-weight: 800; font-size: 3.4em; line-height: 0.72; padding: 0.05em 0.1em 0 0; color: var(--ink); } /* ====================================================================== En-tête réduit au défilement : on masque le folio, le bandeau marchés et l'ornement (le masquage du ticker au scroll sera une option d'admin). ====================================================================== */ .lj-header.is-stuck .lj-folio, .lj-header.is-stuck .lj-indices, .lj-header.is-stuck .lj-masthead-rule, .lj-header.is-stuck .lj-search-panel { display: none; } /* ====================================================================== Logo ie24 — logotype central, professionnel, sans cercle ni filets. « ie » en Didone grasse + « 24 » dans la même famille en maigre : un contraste de graisse qui fait l'identité, kerning serré. ====================================================================== */ .lj-logo { display: inline-flex; align-items: center; color: var(--ink); height: clamp(3rem, 1.5rem + 3.8vw, 5rem); } .lj-logo:hover { color: var(--ink); } .lj-logo-svg { height: 100%; width: auto; display: block; fill: currentColor; } .lj-logo-svg .lj-logo-dot { fill: var(--accent); } .lj-logo:hover .lj-logo-svg .lj-logo-dot { fill: var(--accent-ink); } /* ====================================================================== Petit écran (≤ 860px, là où la nav passe en menu burger) — en-tête « une » optimisé pour smartphone et tablette. Esprit journal conservé : folio centré qui se replie proprement, nameplate parfaitement centrée (le slogan passe sur sa propre ligne pour ne plus décentrer le logo), et icônes alignées sur la nameplate, pas dans le vide. ====================================================================== */ @media (max-width: 860px) { /* Folio : masqué sur petit écran. Vol., n° et mention d'édition sont des ornements de première page ; sur un téléphone ils repoussent la manchette et le premier titre sous la ligne de flottaison, sans rien apporter. (Les règles de repli sont conservées ci-dessous : il suffit de retirer « display:none » pour retrouver le folio replié.) */ .lj-folio { display: none; } .lj-folio-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.1rem 0.6rem; min-height: 0; padding-block: 0.35rem; letter-spacing: 0.1em; font-size: 0.62rem; } .lj-folio-inner > :first-child, .lj-folio-inner > :last-child { justify-self: auto; text-align: center; } .lj-folio-center { letter-spacing: 0.12em; } /* Manchette en 2 rangées : rangée 1 = burger · nameplate centrée · icônes ; rangée 2 = slogan pleine largeur centré. Le brand passe en display:contents pour que le logo et le slogan deviennent de vrais éléments de la grille → logo parfaitement centré, slogan qui ne décentre plus rien. */ .lj-masthead-inner { grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 0.5rem; row-gap: 0.4rem; padding-block: 0.6rem 0.75rem; } .lj-masthead-left { grid-column: 1; grid-row: 1; } .lj-masthead-right { grid-column: 3; grid-row: 1; } .lj-masthead-brand { display: contents; } .lj-masthead-brand > a, .lj-masthead-brand > .lj-logo { grid-column: 2; grid-row: 1; justify-self: center; } .lj-masthead-brand .lj-logo { height: clamp(2.45rem, 1.5rem + 3.6vw, 3.7rem); } .lj-masthead-brand img.custom-logo { max-height: 3.7rem; height: auto; width: auto; } .lj-masthead-tagline { grid-column: 1 / -1; grid-row: 2; margin: 0; text-align: center; font-size: clamp(0.64rem, 0.55rem + 0.4vw, 0.78rem); letter-spacing: 0.16em; line-height: 1.3; } /* Boutons-icônes un peu plus compacts pour respirer sur petit écran. */ .lj-masthead-side .lj-iconbtn { width: 40px; height: 40px; } } @media (max-width: 400px) { .lj-masthead-side .lj-iconbtn { width: 38px; height: 38px; } }