@charset "UTF-8"; /* ══════════════════════════════════════════════════════════════════════════ CARAVELLI — OLYMPE · EDITION DU 7 AOUT 2026 Inauguration de Dubai. Mise en scene du jour. ── CE QUE CETTE FEUILLE N'EST PAS ──────────────────────────────────────── Elle ne repeint rien. La reteinte du site est faite ailleurs et pour de bon : les 2 280 couleurs du site ont ete reecrites en parametrique, et CSS/olympe-palette-2026.css tient les onze nombres qui les commandent. Ici, il n'y a que des composants qui n'existaient pas — la scene d'entree, le bandeau, l'axe Florence-Dubai — et leur retrait automatique. ── LES DEUX ETATS, DANS LE MEME MARQUAGE ───────────────────────────────── Le HTML porte les deux versions cote a cote. `data-jour` en choisit une : html[data-jour="j"] le 7 aout, fuseau de Dubai — l'edition complete (aucun attribut) avant le 7 ET a partir du 8 aout Rien n'est ajoute ni supprime par JavaScript apres coup : c'est du CSS, donc c'est decide avant le premier pixel. Le 8 aout au matin il n'y a ni trou, ni composant vide, ni deploiement a faire. C'etait la condition. ── MESURE ──────────────────────────────────────────────────────────────── Aucun confetti, aucun compte a rebours, aucun or sature. La chroma de l'or est deja descendue de 45 % dans la palette du jour ; ce qui porte la ceremonie ici, c'est la lenteur (18 s pour une lumiere rasante), le vide autour du chiffre, et une pastille qui respire a 4,5 s le cycle. Un jour d'inauguration, ce qui doit accelerer, c'est le coeur du visiteur, pas l'ecran. Sous prefers-reduced-motion : tout est deja en place, rien ne bouge. ══════════════════════════════════════════════════════════════════════════ */ /* ══ 0 · VISIBILITE DES DEUX ETATS ════════════════════════════════════════ */ /* Trois etats, ecrits cote a cote dans le marquage. Le defaut — celui qu'on obtient sans JavaScript, ou avant le 7 — est l'etat « avant » : le site tel qu'il etait. C'est volontaire : si quoi que ce soit echoue, on retombe sur le site permanent, jamais sur une page a moitie evenementielle. */ .jj-scene, .jj-bandeau, [data-jj-etat="j"], [data-jj-etat="apres"] { display: none; } /* Le mode d'affichage est porte PAR LA REGLE QUI MONTRE, pas par le bloc de mise en forme plus bas : `html[data-jour="j"] .jj-scene` est plus specifique que `.jj-scene`, donc c'est elle qui tranche. Une premiere version disait `display:block` ici et `display:grid`/`flex` plus bas — le plus bas perdait, et la scene restait affichee le 8 aout. Verifie au navigateur. */ html[data-jour="j"] .jj-scene { display: grid; } html[data-jour="j"] .jj-bandeau { display: flex; } html[data-jour="j"] [data-jj-etat="j"]{ display: revert; } html[data-jour="j"] [data-jj-etat="avant"]{ display: none; } /* La bande d'annonce de l'accueil est posee en absolu sur : avec la scene devant elle, les deux se superposeraient. Le 7 aout la scene dit deja tout ce qu'elle disait, en mieux — on la retire pour la journee, et uniquement sur les pages qui portent une scene. */ html[data-jour="j"] .jj-scene ~ .dubai-band{ display: none; } /* L'indicateur « DEFILER » est fixe en bas de fenetre : mesure au navigateur, il tombe en travers du chiffre 200+ pendant toute la hauteur de la scene. On ne le supprime pas — il redevient utile des qu'on a quitte la scene — on le retient juste le temps qu'elle passe. `animation-timeline` n'etant pas acquis partout, c'est le JavaScript du jour qui pose `data-jj-scene` sur tant que la scene occupe l'ecran. */ html[data-jour="j"][data-jj-scene] .cv90-scroll-cue{ opacity: 0; transition: opacity .5s var(--jj-lent); pointer-events: none; } /* ══ 1 · LE BANDEAU ═══════════════════════════════════════════════════════ Fixe, donc il ne deplace aucune mise en page existante : le 8 aout, son retrait ne laisse pas un pixel de decalage. Il tient sur une ligne et il se tait sur mobile en portrait etroit (il redit ce que la scene dit deja). */ .jj-bandeau{ position: fixed; /* Proprietes physiques, et non logiques : sur ce site, `inset-inline` ne dimensionnait pas le conteneur souple — mesure au navigateur, bandeau large de 24 px. `left/right/top` ne laissent aucune place au doute. */ top: 0; left: 0; right: 0; width: auto; z-index: 100002; /* au-dessus du rideau d'entree (100000) : la journee est annoncee des la premiere seconde, avant meme que le rideau ne se leve. */ align-items: center; justify-content: center; gap: clamp(10px, 2.2vw, 26px); min-block-size: 34px; padding: 7px clamp(12px, 4vw, 40px); background: color-mix(in oklch, var(--jj-abysse) 82%, transparent); backdrop-filter: blur(14px) saturate(1.06); border-block-end: 1px solid var(--jj-filet); color: var(--jj-marbre); font-family: var(--font-ui); font-size: clamp(9.5px, 1.05vw, 11.5px); letter-spacing: .17em; text-transform: uppercase; line-height: 1; pointer-events: none; } .jj-bandeau > *{ pointer-events: auto; } /* La lumiere qui passe sous le bandeau : 22 s, une seule fois toutes les 22 s, et elle ne depasse jamais 6 % d'opacite. On doit pouvoir la manquer. */ .jj-bandeau::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 34%, color-mix(in oklch, var(--jj-or-pale) 30%, transparent) 48%, transparent 62%); opacity: .06; transform: translate3d(-40%, 0, 0); animation: jjRasante 22s linear infinite; pointer-events: none; } .jj-bandeau-sep{ opacity: .34; } .jj-bandeau-lieu{ color: var(--jj-or-pale); } .jj-bandeau em{ font-style: normal; color: var(--jj-or-pale); } /* Le site descend de la hauteur du bandeau — sur html, pas sur body, pour ne pas perturber les positions collantes de l'en-tete. */ html[data-jour="j"]{ scroll-padding-block-start: 48px; } html[data-jour="j"] body{ padding-block-start: 38px; } /* Correctif constate au navigateur (about.html et toutes les pages Maison, 7 et 8 aout) : l'en-tete de la Branche (.site-header) est bien fixe en haut de fenetre (position:fixed, luxury-branch/assets/css/main.css) — pour lui, le padding du ne fait rien, et il a besoin de ce top:34px pour descendre sous le bandeau. Mais l'en-tete de la Maison (.hd, header#hd) n'est PAS fixe : une regle plus specifique du site (body[data-page] > header, olympe-system.css) le repasse en position:relative sur toutes les pages Maison. Sur un element relatif et dans le flux, `body{padding- block-start:34px}` ci-dessus a DEJA pousse tout le corps de page — en-tete compris — de 34 px : lui appliquer un second decalage top:34px ne le pousse pas plus bas dans la mise en page (l'offset relatif ne deplace pas les elements suivants), il le fait simplement deborder de 34 px SUR le contenu qui commence juste apres (mesure : "Entrer en relation" et le selecteur de langue passaient derriere le bandeau d'inauguration sur about.html). Consequence : la Maison ne recoit pas ce second decalage, la Branche seule le recoit. */ html[data-jour="j"] .site-header{ top: 38px; } @media (max-width: 560px){ .jj-bandeau{ font-size: 9px; letter-spacing: .12em; gap: 8px; } /* Le lieu tombe — la scene le dit deux lignes plus bas. Son separateur tombe avec lui : un point median orphelin en bout de bandeau, c'est le genre de detail qu'on ne voit qu'une fois, et qu'on ne peut plus ne pas voir ensuite. `:last-of-type` ne convenait pas : le dernier du bandeau est le lieu lui-meme, pas son separateur. On vise donc celui qui INTRODUIT le lieu — ce que `:has(+ ...)` dit exactement, et qui reste juste si l'ordre des elements change un jour. */ .jj-bandeau-lieu, .jj-bandeau-sep:has(+ .jj-bandeau-lieu){ display: none; } } /* ══ 2 · LA PASTILLE DE STATUT ════════════════════════════════════════════ Vivante, et c'est tout ce qu'on lui demande. Le point respire ; le mot ne bouge pas. Un statut qui clignote est une alarme, pas une presence. */ .jj-statut{ display: inline-flex; align-items: center; gap: .62em; white-space: nowrap; } .jj-statut::before{ content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--jj-nacre); box-shadow: 0 0 0 0 color-mix(in oklch, var(--jj-nacre) 58%, transparent); animation: jjRespire 4.5s var(--jj-lent) infinite; } @keyframes jjRespire{ 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--jj-nacre) 52%, transparent); opacity: .78; } 50% { box-shadow: 0 0 0 5px color-mix(in oklch, var(--jj-nacre) 0%, transparent); opacity: 1; } } @keyframes jjRasante{ from { transform: translate3d(-45%, 0, 0); } to { transform: translate3d( 45%, 0, 0); } } /* ══ 3 · LA SCENE D'ENTREE ════════════════════════════════════════════════ */ .jj-scene{ position: relative; isolation: isolate; min-block-size: 100svh; place-items: center; /* le `display:grid` est pose par la regle du jour */ padding: clamp(72px, 12vh, 140px) clamp(20px, 6vw, 96px) clamp(48px, 9vh, 96px); background: var(--jj-abysse); color: var(--jj-marbre); overflow: clip; --jj-px: 0; /* position du pointeur, -1 a 1, posee par JS */ --jj-py: 0; } /* 3.1 — Le marbre. Trois voiles seulement : une veine longue, une clarte centrale, un grain. Le marbre de Carrare n'a pas de dessin fort ; ce qu'on cherche, c'est la facon dont il retient la lumiere, pas ses nervures. */ .jj-marbre{ position: absolute; inset: -8%; z-index: -2; background: radial-gradient(120% 78% at 50% 8%, color-mix(in oklch, var(--jj-platine) 15%, transparent) 0%, transparent 58%), radial-gradient(90% 60% at 18% 92%, color-mix(in oklch, var(--jj-olympe) 62%, transparent) 0%, transparent 62%), linear-gradient(178deg, var(--jj-encre) 0%, var(--jj-abysse) 62%, var(--jj-abysse) 100%); transform: translate3d(calc(var(--jj-px) * 9px), calc(var(--jj-py) * 7px), 0); transition: transform 1.4s var(--jj-lent); will-change: transform; } /* 3.2 — La lumiere rasante. 18 s pour traverser. Elle ne revient pas en arriere : elle repart du bord. C'est ce qui la fait lire comme une lumiere de lieu et non comme une animation de page. */ .jj-rasante{ position: absolute; inset: -20% -60%; z-index: -1; background: linear-gradient(104deg, transparent 30%, color-mix(in oklch, var(--jj-platine) 26%, transparent) 44%, color-mix(in oklch, var(--jj-marbre) 15%, transparent) 50%, color-mix(in oklch, var(--jj-or-pale) 14%, transparent) 56%, transparent 70%); opacity: .5; filter: blur(28px); animation: jjRasanteLongue 18s cubic-bezier(.5,0,.5,1) infinite; pointer-events: none; } @keyframes jjRasanteLongue{ 0% { transform: translate3d(-58%, -6%, 0) rotate(-1.5deg); opacity: 0; } 18% { opacity: .5; } 82% { opacity: .5; } 100% { transform: translate3d( 58%, 6%, 0) rotate(-1.5deg); opacity: 0; } } /* 3.3 — Le contenu */ .jj-corps{ position: relative; z-index: 1; inline-size: min(1180px, 100%); display: grid; justify-items: center; text-align: center; gap: clamp(20px, 3.4vh, 40px); } .jj-sur{ font-family: var(--font-ui); font-size: clamp(9.5px, 1.15vw, 12px); letter-spacing: .38em; text-transform: uppercase; color: var(--jj-or-pale); display: inline-flex; align-items: center; gap: 1.1em; } .jj-sur::before, .jj-sur::after{ content: ""; inline-size: clamp(22px, 5vw, 64px); block-size: 1px; background: linear-gradient(90deg, transparent, var(--jj-filet), transparent); } /* 3.4 — « Aujourd'hui », revele mot a mot. Le mot monte de sous une ligne de coupe. C'est la seule entree du site qui se permet un clip : ailleurs on fond, ici on leve un rideau. */ .jj-titre{ font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 7.4vw, 104px); line-height: .96; letter-spacing: -.012em; margin: 0; color: var(--jj-marbre); } .jj-mot{ display: inline-block; overflow: clip; vertical-align: bottom; padding-block-end: .08em; margin-block-end: -.08em; } .jj-mot > span{ display: inline-block; transform: translate3d(0, 108%, 0); animation: jjLever 1.5s var(--jj-ceremonie) forwards; animation-delay: calc(var(--i, 0) * 165ms + 220ms); } @keyframes jjLever{ from{ transform: translate3d(0, 108%, 0); } to { transform: translate3d(0, 0, 0); } } .jj-titre .jj-jour{ display: block; font-size: .42em; letter-spacing: .3em; text-transform: uppercase; font-family: var(--font-ui); color: var(--jj-or-pale); margin-block-start: .5em; } /* 3.5 — Le chiffre. Sculptural veut dire : il arrive de plus loin que le reste, il est plus lent que le reste, et il s'arrete net. Pas de rebond. */ .jj-chiffre{ display: grid; justify-items: center; gap: .1em; margin-block: clamp(4px, 1.4vh, 18px); } .jj-chiffre b{ display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(84px, 21vw, 268px); line-height: .84; letter-spacing: -.035em; background: linear-gradient(168deg, var(--jj-marbre) 4%, var(--jj-platine) 34%, var(--jj-argent) 58%, var(--jj-or-pale) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translate3d(0, 5%, 0) scale(1.055); filter: blur(11px); animation: jjSculpte 2.35s var(--jj-ceremonie) 480ms forwards; } @keyframes jjSculpte{ from{ opacity: 0; transform: translate3d(0, 5%, 0) scale(1.055); filter: blur(11px); } 60% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } } .jj-chiffre small{ font-family: var(--font-ui); font-size: clamp(9.5px, 1.15vw, 12.5px); letter-spacing: .34em; text-transform: uppercase; color: var(--jj-argent); opacity: 0; animation: jjParait 1.2s var(--jj-lent) 1750ms forwards; } .jj-lignes{ margin: 0; max-inline-size: 46ch; font-family: var(--font-editorial); font-size: clamp(15px, 1.55vw, 20.5px); line-height: 1.66; color: color-mix(in oklch, var(--jj-marbre) 82%, transparent); } .jj-lignes span{ display: block; opacity: 0; animation: jjParait 1.15s var(--jj-lent) forwards; animation-delay: calc(1250ms + var(--i, 0) * 210ms); } .jj-lignes .jj-forte{ color: var(--jj-marbre); font-style: italic; } @keyframes jjParait{ from{ opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } } /* 3.6 — L'axe Florence 1948 → Dubai 2026. Le trait se tire d'abord, la lumiere le parcourt ensuite. Deux dates, une ligne : c'est tout le propos de la journee, et il tient en une regle. */ .jj-axe{ display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: clamp(12px, 2.4vw, 28px); inline-size: min(760px, 100%); font-family: var(--font-ui); font-size: clamp(9.5px, 1.1vw, 12px); letter-spacing: .26em; text-transform: uppercase; color: var(--jj-argent); opacity: 0; animation: jjParait 1.3s var(--jj-lent) 2150ms forwards; } .jj-axe b{ font-weight: 500; color: var(--jj-marbre); } .jj-axe-fil{ position: relative; block-size: 1px; background: var(--jj-filet); transform: scaleX(0); transform-origin: 0 50%; animation: jjTire 1.8s var(--jj-ceremonie) 2300ms forwards; } .jj-axe-fil::after{ content: ""; position: absolute; inset-block: -1px; inline-size: 26%; background: linear-gradient(90deg, transparent, var(--jj-or-pale), transparent); opacity: 0; animation: jjParcourt 5.2s var(--jj-lent) 4100ms infinite; } @keyframes jjTire{ to{ transform: scaleX(1); } } @keyframes jjParcourt{ 0% { inset-inline-start: -26%; opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { inset-inline-start: 100%; opacity: 0; } } /* 3.7 — L'appel */ .jj-cta{ display: inline-flex; align-items: center; gap: .85em; padding: 1.05em 2.3em; border: 1px solid var(--jj-filet); border-radius: 2px; font-family: var(--font-ui); font-size: clamp(10.5px, 1.15vw, 12.5px); letter-spacing: .22em; text-transform: uppercase; color: var(--jj-marbre); background: color-mix(in oklch, var(--jj-marbre) 4%, transparent); text-decoration: none; opacity: 0; animation: jjParait 1.2s var(--jj-lent) 2500ms forwards; transition: border-color .6s var(--jj-lent), background-color .6s var(--jj-lent), color .6s var(--jj-lent); } .jj-cta:hover, .jj-cta:focus-visible{ border-color: color-mix(in oklch, var(--jj-or-pale) 62%, transparent); background: color-mix(in oklch, var(--jj-or-pale) 9%, transparent); color: var(--jj-or-pale); } .jj-cta::after{ content: ""; inline-size: 15px; block-size: 1px; background: currentColor; transition: inline-size .6s var(--jj-lent); } .jj-cta:hover::after{ inline-size: 26px; } .jj-statuts{ display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2.6vw, 34px); font-family: var(--font-ui); font-size: clamp(9.5px, 1.05vw, 11.5px); letter-spacing: .2em; text-transform: uppercase; color: var(--jj-argent); opacity: 0; animation: jjParait 1.2s var(--jj-lent) 2350ms forwards; } /* ══ 4 · RETOUR DU 8 AOUT ═════════════════════════════════════════════════ Aucun etat visuel residuel : le script ne pose plus d'attribut, donc le site permanent reprend sa geometrie et sa palette exactes. */ /* ══ 5 · MOBILE ═══════════════════════════════════════════════════════════ */ @media (max-width: 760px){ .jj-scene{ min-block-size: 100svh; padding-inline: 22px; } .jj-axe{ grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center; } .jj-axe-fil{ inline-size: 120px; } .jj-rasante{ filter: blur(20px); } /* un blur de 28 px coute cher ici */ .jj-marbre{ transform: none; } /* pas de pointeur : pas de calcul */ } /* Le pointeur ne compte que la ou il existe vraiment. */ @media (hover: none){ .jj-marbre{ transform: none; transition: none; } } /* ══ 6 · MOUVEMENT REDUIT ═════════════════════════════════════════════════ Meme scene, meme hierarchie, meme lecture. Elle est simplement deja arrivee. Rien n'est masque a qui demande moins de mouvement. */ @media (prefers-reduced-motion: reduce){ .jj-mot > span, .jj-chiffre b, .jj-chiffre small, .jj-lignes span, .jj-axe, .jj-cta, .jj-statuts{ animation: none !important; opacity: 1; transform: none; filter: none; } .jj-axe-fil{ animation: none; transform: scaleX(1); } .jj-axe-fil::after, .jj-rasante, .jj-bandeau::after{ animation: none; } .jj-rasante{ opacity: .34; } .jj-statut::before{ animation: none; opacity: .9; } .jj-marbre{ transform: none; transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ V9.2.5.0 — NOCTURNE SOLAIRE Direction du 7 aout 2026 : encre indigo, albatre, or ancien, rubis sombre. Cette section remplace visuellement la premiere composition sans modifier le marquage partage entre les six pages d'entree. Le 8 aout, `data-jour` n'est plus pose : aucune de ces regles ne s'applique. ══════════════════════════════════════════════════════════════════════════ */ html[data-jour="j"]{ color-scheme: dark; background: var(--jj-abysse); } /* Le bandeau n'est plus une barre informative posee sur le site : il devient le premier filet de la composition, avec un rubis presque imperceptible. */ html[data-jour="j"] .jj-bandeau{ min-block-size: 38px; padding-block: 8px; background: linear-gradient(90deg, color-mix(in oklch, var(--jj-rubis-noir) 76%, transparent), color-mix(in oklch, var(--jj-abysse) 94%, transparent) 34%, color-mix(in oklch, var(--jj-abysse) 92%, transparent) 68%, color-mix(in oklch, var(--jj-rubis-noir) 58%, transparent)); border-block-end-color: color-mix(in oklch, var(--jj-laiton) 42%, transparent); box-shadow: 0 12px 44px color-mix(in oklch, var(--jj-abysse) 48%, transparent); backdrop-filter: blur(20px) saturate(1.18); } html[data-jour="j"] .jj-bandeau::before{ content:""; position:absolute; inset-block:0; inset-inline-start:clamp(12px, 4vw, 56px); inline-size:1px; background:linear-gradient(var(--jj-rubis), transparent 80%); opacity:.72; } html[data-jour="j"] .jj-bandeau em{ color:var(--jj-or-pale); font-weight:600; } html[data-jour="j"] .jj-bandeau-lieu{ color:color-mix(in oklch, var(--jj-marbre) 82%, var(--jj-or-pale)); } html[data-jour="j"] .jj-statut::before{ background:var(--jj-rubis); box-shadow:0 0 0 0 color-mix(in oklch, var(--jj-rubis) 50%, transparent), 0 0 18px color-mix(in oklch, var(--jj-rubis) 34%, transparent); } /* La scene devient une affiche architecturale plein ecran : grille, date monumentale fantome, surface sombre et une seule ouverture lumineuse. */ html[data-jour="j"] .jj-scene{ min-block-size:calc(100svh - 38px); padding: clamp(92px, 12vh, 154px) clamp(24px, 6.8vw, 110px) clamp(54px, 8vh, 96px); background: radial-gradient(90% 80% at 84% 12%, color-mix(in oklch, var(--jj-rubis-noir) 72%, transparent), transparent 58%), linear-gradient(155deg, color-mix(in oklch, var(--jj-encre) 76%, var(--jj-abysse)) 0%, var(--jj-abysse) 58%, color-mix(in oklch, var(--jj-rubis-noir) 46%, var(--jj-abysse)) 100%); border-block:1px solid color-mix(in oklch, var(--jj-laiton) 18%, transparent); } html[data-jour="j"] .jj-scene::before{ content:"07"; position:absolute; z-index:-1; inset-block-start:clamp(-112px, -8vw, -40px); inset-inline-end:clamp(-38px, -1.8vw, -8px); font-family:var(--font-display); font-size:clamp(250px, 39vw, 630px); font-weight:400; line-height:.78; letter-spacing:-.08em; color:transparent; -webkit-text-stroke:1px color-mix(in oklch, var(--jj-marbre) 10%, transparent); opacity:.56; transform:translate3d(calc(var(--jj-px) * -5px), calc(var(--jj-py) * -4px), 0); pointer-events:none; } html[data-jour="j"] .jj-scene::after{ content:"08 / 2026"; position:absolute; z-index:1; inset-inline-end:clamp(24px, 6.8vw, 110px); inset-block-end:clamp(19px, 2.8vh, 34px); font-family:var(--font-ui); font-size:clamp(8.5px, .75vw, 10.5px); font-weight:500; letter-spacing:.42em; color:color-mix(in oklch, var(--jj-or-pale) 72%, transparent); writing-mode:vertical-rl; text-orientation:mixed; pointer-events:none; } html[data-jour="j"] .jj-marbre{ inset:-5%; background: linear-gradient(118deg, transparent 0 34%, color-mix(in oklch, var(--jj-marbre) 4%, transparent) 34.15%, transparent 34.35% 100%), linear-gradient(72deg, transparent 0 70%, color-mix(in oklch, var(--jj-rubis) 7%, transparent) 70.12%, transparent 70.34% 100%), radial-gradient(72% 92% at 86% 18%, color-mix(in oklch, var(--jj-laiton) 12%, transparent), transparent 53%), radial-gradient(82% 70% at 8% 94%, color-mix(in oklch, var(--jj-olympe) 72%, transparent), transparent 62%), linear-gradient(168deg, color-mix(in oklch, var(--jj-encre) 82%, var(--jj-abysse)) 0%, var(--jj-abysse) 64%, color-mix(in oklch, var(--jj-rubis-noir) 34%, var(--jj-abysse)) 100%); transform:translate3d(calc(var(--jj-px) * 7px), calc(var(--jj-py) * 5px), 0) scale(1.015); } html[data-jour="j"] .jj-marbre::after{ content:""; position:absolute; inset:0; opacity:.19; background-image:url('/assets/olympe/textures/olympe-film-grain.png'); background-size:420px 420px; mix-blend-mode:soft-light; pointer-events:none; } html[data-jour="j"] .jj-rasante{ inset:-28% -66%; background: linear-gradient(103deg, transparent 32%, color-mix(in oklch, var(--jj-rubis) 7%, transparent) 42%, color-mix(in oklch, var(--jj-laiton) 20%, transparent) 49%, color-mix(in oklch, var(--jj-marbre) 18%, transparent) 52%, color-mix(in oklch, var(--jj-or-pale) 10%, transparent) 56%, transparent 69%); opacity:.58; filter:blur(34px); animation-duration:23s; } /* Composition editoriale 12 colonnes, proche d'une couverture de revue : le message occupe la gauche, le nombre devient une piece architecturale. */ html[data-jour="j"] .jj-corps{ inline-size:min(1320px, 100%); min-block-size:min(760px, calc(100svh - 220px)); display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); grid-template-rows:auto auto minmax(120px, 1fr) auto auto; align-items:end; justify-items:stretch; gap:clamp(18px, 2.8vw, 42px) clamp(12px, 2.1vw, 32px); text-align:start; } html[data-jour="j"] .jj-corps::before{ content:""; position:absolute; inset:clamp(-24px, -2vw, -12px); border:1px solid color-mix(in oklch, var(--jj-marbre) 7%, transparent); border-inline-start-color:color-mix(in oklch, var(--jj-rubis) 34%, transparent); pointer-events:none; } html[data-jour="j"] .jj-sur{ grid-column:1 / 7; grid-row:1; justify-self:start; align-self:start; letter-spacing:.44em; color:color-mix(in oklch, var(--jj-or-pale) 92%, var(--jj-marbre)); } html[data-jour="j"] .jj-sur::before{ inline-size:clamp(44px, 7vw, 92px); background:linear-gradient(90deg, var(--jj-rubis), var(--jj-filet)); } html[data-jour="j"] .jj-sur::after{display:none;} html[data-jour="j"] .jj-titre{ grid-column:1 / 8; grid-row:2; justify-self:start; align-self:end; max-inline-size:8.6ch; font-size:clamp(66px, 10.6vw, 166px); line-height:.78; letter-spacing:-.045em; color:var(--jj-marbre); text-wrap:balance; } html[data-jour="j"] .jj-titre .jj-jour{ display:inline-flex; align-items:center; gap:.85em; margin-block-start:.72em; padding:.48em .74em .44em; border:1px solid color-mix(in oklch, var(--jj-laiton) 42%, transparent); background:color-mix(in oklch, var(--jj-rubis-noir) 34%, transparent); font-size:.16em; line-height:1; letter-spacing:.42em; color:var(--jj-or-pale); } html[data-jour="j"] .jj-titre .jj-jour::before{ content:""; inline-size:6px; block-size:6px; border-radius:50%; background:var(--jj-rubis); box-shadow:0 0 18px color-mix(in oklch, var(--jj-rubis) 48%, transparent); } html[data-jour="j"] .jj-chiffre{ grid-column:8 / 13; grid-row:1 / 4; align-self:center; justify-self:end; justify-items:end; gap:.3em; margin:0; text-align:end; transform:translateY(clamp(8px, 2vh, 24px)); } html[data-jour="j"] .jj-chiffre b{ font-size:clamp(132px, 21vw, 344px); line-height:.73; letter-spacing:-.07em; background: linear-gradient(148deg, var(--jj-marbre) 0%, color-mix(in oklch, var(--jj-or-pale) 94%, var(--jj-marbre)) 28%, var(--jj-laiton) 56%, color-mix(in oklch, var(--jj-rubis) 42%, var(--jj-laiton)) 86%, var(--jj-or-pale) 100%); -webkit-background-clip:text; background-clip:text; text-shadow:0 28px 80px color-mix(in oklch, var(--jj-rubis-noir) 58%, transparent); } html[data-jour="j"] .jj-chiffre small{ padding-inline-end:.35em; color:color-mix(in oklch, var(--jj-marbre) 72%, var(--jj-or-pale)); } html[data-jour="j"] .jj-lignes{ grid-column:1 / 7; grid-row:3; align-self:start; max-inline-size:52ch; padding-inline-start:clamp(16px, 2vw, 28px); border-inline-start:1px solid color-mix(in oklch, var(--jj-rubis) 58%, transparent); font-size:clamp(15px, 1.35vw, 20px); line-height:1.62; color:color-mix(in oklch, var(--jj-marbre) 76%, transparent); } html[data-jour="j"] .jj-lignes span + span{margin-block-start:.18em;} html[data-jour="j"] .jj-lignes .jj-forte{ color:var(--jj-or-pale); font-style:normal; } html[data-jour="j"] .jj-statuts{ grid-column:8 / 13; grid-row:4; justify-self:end; justify-content:flex-end; align-self:center; margin:0; gap:clamp(16px, 2.4vw, 36px); color:color-mix(in oklch, var(--jj-marbre) 62%, transparent); } html[data-jour="j"] .jj-statuts .jj-statut{ padding-block:.55em; border-block-end:1px solid color-mix(in oklch, var(--jj-laiton) 24%, transparent); } html[data-jour="j"] .jj-axe{ grid-column:1 / 13; grid-row:5; inline-size:100%; align-self:end; color:color-mix(in oklch, var(--jj-marbre) 56%, transparent); } html[data-jour="j"] .jj-axe b:first-child{color:var(--jj-marbre);} html[data-jour="j"] .jj-axe b:last-child{color:var(--jj-or-pale);} html[data-jour="j"] .jj-axe-fil{ background:linear-gradient(90deg, color-mix(in oklch, var(--jj-rubis) 58%, transparent), var(--jj-filet) 34%, color-mix(in oklch, var(--jj-or-pale) 56%, transparent)); } html[data-jour="j"] .jj-cta{ grid-column:1 / 5; grid-row:4; justify-self:start; align-self:center; min-inline-size:min(100%, 280px); justify-content:space-between; border-color:color-mix(in oklch, var(--jj-laiton) 48%, transparent); border-radius:0; padding:1.18em 1.45em; background: linear-gradient(90deg, color-mix(in oklch, var(--jj-rubis-noir) 50%, transparent), color-mix(in oklch, var(--jj-marbre) 3%, transparent)); } html[data-jour="j"] .jj-cta:hover, html[data-jour="j"] .jj-cta:focus-visible{ border-color:var(--jj-or-pale); background:color-mix(in oklch, var(--jj-laiton) 16%, var(--jj-rubis-noir)); color:var(--jj-marbre); } /* Le reste du site recoit une profondeur de matiere le 7 uniquement. Les couleurs elles-memes viennent de la palette parametrique, pas de ce voile. */ html[data-jour="j"] body::after{ content:""; position:fixed; inset:0; z-index:99998; pointer-events:none; opacity:.032; background-image:url('/assets/olympe/textures/olympe-film-grain.png'); background-size:460px 460px; mix-blend-mode:multiply; } @media (max-width:980px){ html[data-jour="j"] .jj-corps{ min-block-size:auto; grid-template-columns:repeat(8, minmax(0, 1fr)); grid-template-rows:auto; } html[data-jour="j"] .jj-sur{grid-column:1 / 6; grid-row:1;} html[data-jour="j"] .jj-titre{grid-column:1 / 6; grid-row:2; font-size:clamp(62px, 12vw, 118px);} html[data-jour="j"] .jj-chiffre{grid-column:5 / 9; grid-row:1 / 4;} html[data-jour="j"] .jj-chiffre b{font-size:clamp(116px, 25vw, 250px);} html[data-jour="j"] .jj-lignes{grid-column:1 / 6; grid-row:3;} html[data-jour="j"] .jj-cta{grid-column:1 / 5; grid-row:4;} html[data-jour="j"] .jj-statuts{grid-column:5 / 9; grid-row:4;} html[data-jour="j"] .jj-axe{grid-column:1 / 9; grid-row:5;} } @media (max-width:760px){ html[data-jour="j"] .jj-bandeau{ min-block-size:36px; justify-content:flex-start; overflow:hidden; white-space:nowrap; } html[data-jour="j"] .jj-scene{ min-block-size:calc(100svh - 36px); padding:88px 22px 48px; } html[data-jour="j"] .jj-scene::before{ inset-block-start:40px; inset-inline-end:-20px; font-size:clamp(190px, 68vw, 320px); opacity:.38; } html[data-jour="j"] .jj-scene::after{ display:none; } html[data-jour="j"] .jj-corps{ display:flex; min-block-size:auto; flex-direction:column; align-items:stretch; gap:clamp(18px, 3.2vh, 28px); text-align:start; } html[data-jour="j"] .jj-corps::before{inset:-14px;} html[data-jour="j"] .jj-sur{order:1;} html[data-jour="j"] .jj-titre{ order:2; max-inline-size:none; font-size:clamp(58px, 18vw, 92px); line-height:.82; } html[data-jour="j"] .jj-titre .jj-jour{font-size:.18em;} html[data-jour="j"] .jj-chiffre{ order:3; align-self:flex-end; justify-items:end; transform:none; } html[data-jour="j"] .jj-chiffre b{ font-size:clamp(126px, 48vw, 230px); } html[data-jour="j"] .jj-lignes{order:4; max-inline-size:100%;} html[data-jour="j"] .jj-statuts{ order:6; align-self:stretch; justify-content:flex-start; justify-self:auto; } html[data-jour="j"] .jj-axe{ order:7; grid-template-columns:auto 1fr auto; justify-items:stretch; text-align:start; gap:10px; } html[data-jour="j"] .jj-axe-fil{inline-size:auto;} html[data-jour="j"] .jj-cta{ order:5; align-self:stretch; min-inline-size:0; } } @media (max-width:430px){ html[data-jour="j"] .jj-bandeau .jj-bandeau-sep:nth-of-type(2), html[data-jour="j"] .jj-bandeau .jj-bandeau-lieu{display:none;} html[data-jour="j"] .jj-statuts{display:grid; gap:8px;} html[data-jour="j"] .jj-axe{ grid-template-columns:1fr; justify-items:start; } html[data-jour="j"] .jj-axe-fil{inline-size:100%;} } @media (prefers-reduced-motion:reduce){ html[data-jour="j"] .jj-scene::before{transform:none;} }