` posés
directement dans un `.container` — court sur les 1172 px du conteneur, soit
≈ 154 caractères par ligne. L'optimum de lecture admis est de 60 à 75 : on
était à plus du double, et l'œil perdait sa ligne à chaque retour.
C'est la cause du sentiment de texte « mal intercalé ». Le reste — rythme
vertical, veuves, ponctuation — en découle.
Note : la livraison précédente s'était vu reprocher d'avoir touché à la
typographie. Ce bloc le fait délibérément, à la demande. Il ne change ni
la police, ni la famille, ni l'échelle de corps : uniquement la mesure,
l'interligne de lecture et le rythme.
------------------------------------------------------------------------- */
body[data-page]{
--hc-mesure : 68ch; /* corps courant */
--hc-mesure-lead : 38ch; /* chapeau : gros corps, moins de mots */
--hc-mesure-etroit: 54ch; /* colonnes et encarts */
}
/* La mesure, appliquée partout où du texte se lit vraiment */
body[data-page] p,
body[data-page] .body,
body[data-page] li,
body[data-page] blockquote,
body[data-page] .editorial-text,
body[data-page] .pj-copy,
body[data-page] .project-body{
max-width: var(--hc-mesure);
}
/* Les chapeaux sont en gros corps : à mesure égale, ils font des lignes
interminables. On les resserre à proportion. */
body[data-page] .lead,
body[data-page] .ph-sub,
body[data-page] .hero-sub{
max-width : var(--hc-mesure-lead);
line-height: 1.5;
}
/* Colonnes et encarts : la mesure suit le contenant, sans le dépasser */
body[data-page] .sf-b,
body[data-page] .col p,
body[data-page] .grid p,
body[data-page] [class*="-col"] p,
body[data-page] figcaption{
max-width: var(--hc-mesure-etroit);
}
/* Un texte centré doit voir sa mesure centrée aussi, sinon il se décale */
body[data-page] .hc-atelier p,
body[data-page] [style*="text-align:center"] p,
body[data-page] .center p{
margin-inline: auto;
}
/* Titres de héros des pages intérieures.
Mesuré sur savoir-faire.html : 115 px de corps, 436 px de haut sur trois
lignes — le titre descend jusqu'au bord bas du cadre, et la traduction
anglaise, plus longue que le français, y touche. Vérifié identique sans
cette feuille : c'est l'échelle d'origine.
On réserve la démesure à l'accueil (.hero-h1, intact) et on ramène les
pages intérieures à une échelle tenue. C'est aussi la convention des
sites de référence : le grand format sert l'ouverture, pas chaque page. */
body[data-page] .ph-h1,
body[data-page] .ph-full-body h1{
font-size : clamp(38px, 6.2vw, 88px);
line-height: 1.02;
max-width : 19ch;
}
/* Rythme vertical : l'espacement entre paragraphes se déduit de
l'interligne, il ne se choisit pas au hasard. */
body[data-page] p + p{
margin-top: 1.15em;
}
body[data-page] h2 + p,
body[data-page] h3 + p{
margin-top: .85em;
}
body[data-page] p + h2,
body[data-page] p + h3{
margin-top: 2.4em;
}
/* Veuves et orphelines. `pretty` demande au moteur d'éviter qu'un mot seul
termine un paragraphe ; `balance` égalise les lignes d'un titre court.
Les navigateurs qui ne connaissent pas ces valeurs les ignorent. */
body[data-page] p,
body[data-page] li{
text-wrap: pretty;
hyphens : manual;
}
body[data-page] h1,
body[data-page] h2,
body[data-page] h3,
body[data-page] .lead,
body[data-page] .ph-sub,
body[data-page] .hero-sub{
text-wrap: balance;
}
/* Ponctuation suspendue : les guillemets et tirets sortent de la colonne,
le bord gauche du texte redevient droit. C'est un détail de composition,
et c'est exactement ce qui distingue une page tenue d'une page ordinaire. */
body[data-page] p,
body[data-page] blockquote{
hanging-punctuation: first last;
}
/* Chiffres alignés dans le texte courant : sans ça, les dates et les
surfaces sautent au-dessus et au-dessous de la ligne de base. */
body[data-page] p,
body[data-page] li,
body[data-page] td{
font-variant-numeric: oldstyle-nums proportional-nums;
}
body[data-page] .hc-capitale,
body[data-page] time,
body[data-page] .cv912-countdown__value{
font-variant-numeric: lining-nums tabular-nums;
}
/* Le chapeau prend une lettrine filetée — l'entrée dans le texte se voit */
body[data-page] .lead{
position: relative;
padding-left: 22px;
}
body[data-page] .lead::before{
content : "";
position: absolute;
left : 0;
top : .34em;
bottom : .34em;
width : 1px;
background: linear-gradient(180deg,
var(--hc-champagne), var(--hc-veil-38), transparent);
}
@media (max-width: 680px){
body[data-page]{
--hc-mesure : 100%;
--hc-mesure-lead : 100%;
--hc-mesure-etroit: 100%;
}
body[data-page] .lead{ padding-left: 15px }
}
/* ---------------------------------------------------------------------------
7. LISIBILITÉ GARANTIE
Règle unique : tout texte porté par un fond animé (fumée, marbre, vidéo)
reçoit un plancher de contraste. On ne compte pas sur la chance.
------------------------------------------------------------------------- */
/* .hc-lisible retirée : son rôle — poser un scrim sous un bloc de texte
sur média — est tenu par le halo de lecture des héros, qui s'applique
sans qu'on ait à baliser quoi que ce soit. */
/* Texte clair sur nuit : on remonte le corps au-dessus du seuil APCA Lc 60 */
body[data-page] .hc-sur-nuit,
body[data-page] .hc-sur-nuit-secondaire p,
body[data-page] .hc-sur-nuit-secondaire li{
color: oklch(.905 .010 250);
}
body[data-page] .hc-sur-nuit-secondaire{
color: oklch(.782 .014 250);
}
/* Le champagne n'est jamais utilisé pour du corps de texte : trop bas en
contraste sur nuit. Il tient les filets, les capitales et les survols. */
body[data-page] .hc-capitale{
color : var(--hc-champagne-hi);
font-family : var(--font-ui);
font-size : 11px;
letter-spacing: var(--tracking-caps, .24em);
text-transform: uppercase;
}
/* ---------------------------------------------------------------------------
8. BANNIÈRE DE CONSENTEMENT
Visible à l'arrivée, à la hauteur du reste. Elle informe : la mesure
d'audience du site est sans cookie et anonyme, donc elle n'est pas
suspendue au clic. Ce que la bannière gouverne, ce sont les dépôts
optionnels.
------------------------------------------------------------------------- */
/* Barre basse, mince, sur toute la largeur : elle se voit sans rien couvrir.
Une dalle centrée mangeait le décompte de l'accueil. */
body[data-page] .hc-consent{
position : fixed;
z-index : 9600;
left : 0;
right : 0;
bottom : 0;
transform : translateY(100%);
opacity : 0;
display : flex;
flex-wrap : wrap;
align-items: center;
gap : clamp(12px, 2vw, 30px);
padding : 14px clamp(18px, 3.2vw, 54px);
border : 0;
border-top: 1px solid var(--hc-veil-38);
background: color-mix(in oklch, var(--hc-nuit-abysse) 90%, transparent);
-webkit-backdrop-filter: blur(30px) saturate(1.4);
backdrop-filter : blur(30px) saturate(1.4);
box-shadow: 0 -24px 80px oklch(.118 .026 254 / .5);
color : oklch(.905 .010 250);
font-family: var(--font-ui);
transition: transform 1.05s var(--ol-ease), opacity .8s var(--ol-ease);
}
body[data-page] .hc-consent.hc-consent--visible{
transform: none;
opacity : 1;
}
/* le rail de widgets remonte au-dessus de la barre tant qu'elle est là */
body[data-page]:has(.hc-consent--visible){
--hc-rail-base: 96px;
}
/* Le filet d'or en tête : la bannière appartient au site */
body[data-page] .hc-consent::before{
content : "";
position: absolute;
inset : -1px 0 auto 0;
height : 1px;
background: linear-gradient(90deg, transparent,
var(--hc-champagne) 30%, var(--hc-champagne-lo) 50%,
var(--hc-champagne) 70%, transparent);
}
body[data-page] .hc-consent__titre{
flex : 0 0 auto;
font-family : var(--font-ui);
font-size : 10px;
letter-spacing: .26em;
text-transform: uppercase;
color : var(--hc-champagne-hi);
margin : 0;
}
body[data-page] .hc-consent__texte{
flex : 1 1 380px;
min-width : 0;
font-size : 12.5px;
line-height: 1.55;
color : oklch(.812 .012 250);
margin : 0;
}
body[data-page] .hc-consent__texte a{
color : var(--hc-champagne-hi);
text-underline-offset: 3px;
text-decoration-color: var(--hc-veil-60);
}
body[data-page] .hc-consent__actions{
flex : 0 0 auto;
display : flex;
flex-wrap: wrap;
gap : 10px;
align-items: center;
margin-left: auto;
}
body[data-page] .hc-consent__btn{
appearance : none;
cursor : pointer;
white-space : nowrap;
height : 36px;
padding : 0 20px;
border-radius : 999px;
font-family : var(--font-ui);
font-size : 11px;
letter-spacing: .18em;
text-transform: uppercase;
transition : all .45s var(--ol-ease);
}
body[data-page] .hc-consent__btn--oui{
border : 1px solid transparent;
background: linear-gradient(180deg, var(--hc-champagne-hi), var(--hc-champagne));
color : oklch(.148 .030 253);
}
body[data-page] .hc-consent__btn--oui:hover{
background: linear-gradient(180deg, var(--hc-champagne-lo), var(--hc-champagne-hi));
box-shadow: 0 0 26px var(--hc-veil-38);
}
body[data-page] .hc-consent__btn--non{
border : 1px solid var(--hc-veil-38);
background: transparent;
color : oklch(.860 .010 250);
}
body[data-page] .hc-consent__btn--non:hover{
border-color: var(--hc-veil-60);
color : var(--hc-champagne-lo);
}
@media (max-width: 560px){
body[data-page] .hc-consent__actions{ flex-direction: column; align-items: stretch }
body[data-page] .hc-consent__btn{ width: 100% }
}
/* ---------------------------------------------------------------------------
8 bis. CONCIERGERIE — les relances
Le moteur renvoie désormais trois questions voisines. Elles se présentent
comme des cartouches sous la réponse : on prolonge l'échange d'un geste,
au lieu de devoir reformuler.
------------------------------------------------------------------------- */
body[data-page] .ai-sugg{
display : flex;
flex-wrap: wrap;
gap : 7px;
margin : 13px 0 2px;
}
body[data-page] .ai-sugg-btn{
appearance : none;
cursor : pointer;
max-width : 100%;
padding : 7px 13px;
border : 1px solid oklch(.1701 calc(var(--ol-c-body)*.333) var(--ol-h) / .16);
border-radius : 999px;
background : transparent;
color : oklch(.372 .030 252);
font-family : var(--font-ui);
font-size : 12px;
line-height : 1.35;
text-align : left;
transition : border-color .4s var(--ol-ease),
background .4s var(--ol-ease),
color .4s var(--ol-ease);
}
body[data-page] .ai-sugg-btn:hover,
body[data-page] .ai-sugg-btn:focus-visible{
border-color: var(--hc-champagne);
background : color-mix(in oklch, var(--hc-champagne) 11%, transparent);
color : oklch(.262 .028 252);
}
/* ---------------------------------------------------------------------------
9. VIDÉOS — plus de cassure
Plusieurs sources sont en 406×720 ou 270×480. Étirées plein cadre sur un
écran de 1440 px, elles pixellisent. On plafonne l'agrandissement à la
définition native via max-width, on centre, et on adoucit le repli.
Les fichiers à réexporter sont listés dans _outils/VIDEOS_A_REEXPORTER.md.
------------------------------------------------------------------------- */
body[data-page] video{
/* jamais au-delà de sa propre définition, sauf plein-cadre assumé */
image-rendering: auto;
background : var(--hc-nuit-abysse);
}
/* Vidéos d'illustration : cadrées, jamais étirées */
body[data-page] video[data-hc-natif]{
width : 100%;
max-width : calc(var(--hc-w, 1920) * 1px);
height : auto;
margin-inline: auto;
display : block;
}
/* Vidéos de fond plein cadre : on garde le remplissage mais on masque la
perte de définition sous un grain et un léger flou de bord. */
body[data-page] video[data-hc-fond]{
width : 100%;
height : 100%;
object-fit: cover;
}
body[data-page] .hc-video-fond{
position : relative;
overflow : hidden;
isolation: isolate;
}
body[data-page] .hc-video-fond::after{
content : "";
position: absolute;
inset : 0;
z-index : 1;
pointer-events: none;
background-image: var(--hc-grain);
background-size : 240px 240px;
opacity : .07;
mix-blend-mode: overlay;
}
/* Sous-définition marquée : on adoucit très légèrement pour casser l'escalier */
body[data-page] video[data-hc-sousdef]{
filter: blur(.35px) contrast(1.03) saturate(.96);
}
/* ---------------------------------------------------------------------------
10. DÉGRADATIONS
------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
body[data-page] .hc-fumee > *,
body[data-page] .hc-filet::after{ animation: none !important }
body[data-page] .hc-lumiere{ opacity: .22 !important; transform: none !important }
body[data-page] .hc-entre{ opacity: 1 !important; transform: none !important }
body[data-page] .hc-consent{ transition-duration: .01ms }
}
/* Mode économie déjà prévu par le site */
body[data-page].oc-eco .hc-fumee,
body[data-page].oc-eco .hc-lumiere{ display: none }
body[data-page].oc-eco .hc-sculpture::before,
body[data-page].oc-eco .hc-sculpture::after{ display: none }
/* Mobile : on allège les flous, coûteux en composition */
@media (max-width: 680px){
/* hc-f-m2, hc-f-m3 et hc-f-proche ont disparu du DOM avec la refonte de
la fumée : leurs règles mobiles n'avaient plus d'objet. */
}
/* Écrans larges gamut : on laisse le champagne monter */
@media (dynamic-range: high){
body[data-page]{
--hc-champagne-lo: oklch(.928 .058 87);
}
}
@media print{
body[data-page] .hc-fumee,
body[data-page] .hc-lumiere,
body[data-page] .hc-consent{ display: none !important }
}
/* ═══════════════════════════════════════════════════════════════════════════
11. LES TRANSITIONS — état de l'art 2026
Trois griefs traités ici : « le défilement n'est pas fluide », « les
transitions sont basiques », « la palette est invisible ».
Le principe qui gouverne tout ce bloc : seules `transform` et `opacity`
restent sur le fil de composition. Toute autre propriété animée ramène le
calcul de mise en page sur le fil principal — c'est exactement ce qui
produisait les à-coups. Rien ici n'anime autre chose.
═══════════════════════════════════════════════════════════════════════ */
/* ── 11.1 · Transitions de page ─────────────────────────────────────────────
Le passage d'une page à l'autre était un flash blanc. Avec l'API View
Transitions en navigation croisée, il devient un fondu enchaîné continu :
le site cesse d'être une succession de documents pour devenir un lieu.
C'est le gain de tenue le plus important de tout ce fichier, et il tient
en une règle. Les navigateurs qui ne le connaissent pas l'ignorent. */
@view-transition{
navigation: auto;
}
@media (prefers-reduced-motion: no-preference){
::view-transition-old(root){
animation: hcSortie .42s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root){
animation: hcEntree .58s cubic-bezier(.19,1,.22,1) both;
}
@keyframes hcSortie{
from{ opacity: 1; transform: none }
to { opacity: 0; transform: scale(.992) translateY(-8px) }
}
@keyframes hcEntree{
from{ opacity: 0; transform: scale(1.006) translateY(10px) }
to { opacity: 1; transform: none }
}
/* L'en-tête et le rail ne clignotent pas : ils persistent d'une page à
l'autre, comme un décor qui reste en place pendant que la scène change. */
body[data-page] > header#hd{ view-transition-name: hc-entete }
body[data-page] #vg-btn { view-transition-name: hc-visite }
body[data-page] #aiw { view-transition-name: hc-concierge }
::view-transition-group(hc-entete),
::view-transition-group(hc-visite),
::view-transition-group(hc-concierge){
animation-duration: .5s;
animation-timing-function: cubic-bezier(.19,1,.22,1);
}
}
/* ── 11.2 · Révélations pilotées par le défilement ──────────────────────────
Remplace l'IntersectionObserver : l'animation est liée à la position de
défilement elle-même et tourne sur le compositeur. Aucun écouteur, aucun
recalcul sur le fil principal, donc aucun à-coup.
`view()` mesure la traversée de l'élément dans le cadre ; `entry 12%` à
`entry 62%` le fait entrer pendant qu'il monte. */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
body[data-page] .hc-atelier > .container > *,
body[data-page] [data-hc-entre]{
animation: hcMonte 1ms linear both;
animation-timeline: view();
animation-range: entry 10% entry 58%;
}
@keyframes hcMonte{
from{ opacity: 0; transform: translate3d(0, 34px, 0) }
to { opacity: 1; transform: none }
}
/* Le filet d'or se tire à mesure qu'on approche — un trait qui se trace,
pas un trait qui apparaît. */
body[data-page] .hc-filet{
animation: hcTrace 1ms linear both;
animation-timeline: view();
animation-range: entry 14% entry 66%;
transform-origin: left center;
}
@keyframes hcTrace{
from{ transform: scaleX(0); opacity: 0 }
to { transform: scaleX(1); opacity: 1 }
}
/* Parallaxe de fond : la matière dérive plus lentement que le texte.
C'est ce décalage qui donne la profondeur, et il ne coûte qu'un
translate sur le compositeur. */
body[data-page] .ph-bg,
body[data-page] .ph-full-bg{
animation: hcParallaxe 1ms linear both;
animation-timeline: view();
animation-range: cover;
will-change: transform;
}
@keyframes hcParallaxe{
from{ transform: translate3d(0, -4%, 0) scale(1.08) }
to { transform: translate3d(0, 4%, 0) scale(1.08) }
}
}
}
/* Là où les timelines de défilement manquent, le script prend le relais
(classes .hc-entre / .hc-vu, déjà en place). */
/* ── 11.3 · Reflets naturels ────────────────────────────────────────────────
« Des reflets naturels mais qui n'empêchent aucune lecture. »
La règle est mécanique, pas esthétique : tous les reflets sont en
`mix-blend-mode: screen`. Un mode screen ne peut qu'ÉCLAIRCIR — il est
arithmétiquement incapable d'assombrir un pixel. Un reflet posé sur du
texte clair ne peut donc jamais réduire son contraste sur fond sombre.
Et ils sont tous en `pointer-events: none`, derrière le texte. */
/* Le reflet portait une classe .hc-reflet que rien ne posait. Il est
raccroché directement aux surfaces qui le méritent — cartouche du
décompte, pièces de marbre — sans balisage HTML ni classe fantôme. */
body[data-page] .cv912-countdown--hero,
body[data-page] .hc-sculpture{
position : relative;
isolation: isolate;
}
body[data-page] .cv912-countdown--hero::before,
body[data-page] .hc-sculpture::after{
content : "";
position: absolute;
inset : 0;
z-index : 1;
pointer-events: none;
mix-blend-mode: screen;
background: linear-gradient(
calc(108deg + var(--hc-progress) * 26deg),
transparent 34%,
color-mix(in oklch, var(--hc-champagne-lo) 8%, transparent) 44%,
color-mix(in oklch, var(--hc-champagne-lo) 20%, transparent) 50%,
color-mix(in oklch, var(--hc-champagne-lo) 8%, transparent) 56%,
transparent 66%);
}
/* Le reflet glisse au survol, comme la lumière sur une arête polie */
body[data-page] .hc-sculpture::after{
transform : translateX(-14%);
opacity : .7;
transition: transform 1.1s cubic-bezier(.19,1,.22,1),
opacity .7s cubic-bezier(.19,1,.22,1);
}
body[data-page] .hc-sculpture:hover::after{
transform: translateX(14%);
opacity : 1;
}
/* Les surfaces qui méritent un reflet : cartes, médias, cartouches */
body[data-page] .cv912-countdown--hero,
body[data-page] .hc-sculpture{
isolation: isolate;
}
/* ── 11.4 · La palette, rendue visible ──────────────────────────────────────
Le champagne n'existait qu'en voiles de 12 à 38 % : présent dans le code,
invisible à l'écran. On lui donne des surfaces où il porte vraiment,
sans jamais le mettre sous un corps de texte — sur nuit, il n'y atteint
pas le seuil de contraste. Filets, capitales, survols, arêtes. */
/* Filets de section : un trait d'or, pas un gris anonyme */
body[data-page] hr,
body[data-page] .sec + .sec::before{
border: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
color-mix(in oklch, var(--hc-champagne) 42%, transparent) 22%,
var(--hc-champagne) 50%,
color-mix(in oklch, var(--hc-champagne) 42%, transparent) 78%,
transparent);
}
/* Les capitales de rubrique passent au champagne franc */
body[data-page] .ey,
body[data-page] .ph-eyebrow,
body[data-page] .sec-ey,
body[data-page] .hc-capitale{
color: var(--hc-champagne-hi);
}
/* Soulignement des liens éditoriaux : il se tire à l'approche du curseur */
body[data-page] .body a:not(.btn):not(.ncta),
body[data-page] p a:not(.btn):not(.ncta){
position : relative;
color : var(--hc-champagne-lo);
text-decoration: none;
}
body[data-page] .body a:not(.btn):not(.ncta)::after,
body[data-page] p a:not(.btn):not(.ncta)::after{
content : "";
position : absolute;
left: 0; right: 0; bottom: -3px;
height : 1px;
background: var(--hc-champagne);
transform : scaleX(0);
transform-origin: right;
transition: transform .55s cubic-bezier(.19,1,.22,1);
}
body[data-page] .body a:not(.btn):not(.ncta):hover::after,
body[data-page] p a:not(.btn):not(.ncta):hover::after{
transform: scaleX(1);
transform-origin: left;
}
/* Les liens de navigation : l'or se tire sous le libellé */
body[data-page] .nl{
position: relative;
}
body[data-page] .nl::after{
content : "";
position : absolute;
left: 0; right: 0; bottom: -5px;
height : 1px;
background: linear-gradient(90deg, transparent, var(--hc-champagne), transparent);
transform : scaleX(0);
transition: transform .5s cubic-bezier(.19,1,.22,1);
}
body[data-page] .nl:hover::after,
body[data-page] .nl.active::after{ transform: scaleX(1) }
/* Boutons : l'arête d'or se referme au survol */
body[data-page] .btn,
body[data-page] .ncta{
transition: border-color .5s cubic-bezier(.19,1,.22,1),
box-shadow .5s cubic-bezier(.19,1,.22,1),
transform .5s cubic-bezier(.19,1,.22,1);
}
body[data-page] .btn:hover,
body[data-page] .ncta:hover{
border-color: var(--hc-champagne);
box-shadow : 0 0 0 1px color-mix(in oklch, var(--hc-champagne) 32%, transparent),
0 12px 40px oklch(.118 .026 254 / .5);
transform : translateY(-1px);
}
/* ── 11.5 · Fluidité ────────────────────────────────────────────────────────
Ce qui reste du coût par image, réduit là où c'est sans conséquence. */
/* Deux pistes essayées puis ABANDONNÉES après contrôle en capture :
— `content-visibility: auto` sur les sections. Le confinement qu'il
implique neutralise les enfants en position fixe et les modes de fusion
que ces sections contiennent : la page est devenue noire. Le gain de
mise en page ne valait pas ça.
— `scroll-behavior: smooth`. Le site pilote déjà son défilement avec
Lenis ; en ajouter un second par-dessus fait se disputer deux moteurs
d'inertie. C'était une cause d'à-coups, pas un remède.
Le vrai gain de fluidité vient d'ailleurs, et il est acquis : 19 filtres
de flou gaussien supprimés sur 20, dont un de 128 px sur une surface fixe
plein cadre. Un radial-gradient est déjà lisse — l'étalement de ses arrêts
donne la même douceur pour un coût de rastérisation nul. */
/* Les dimensions plein-cadre restent pilotées par leurs composants. Une
ancienne règle globale `height:auto` écrasait les héros et les films sur
mobile ; chaque média conserve désormais sa géométrie déclarée localement. */
/* ── 11.6 · Dégradations ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
body[data-page] .hc-sculpture::after{ transition: none; transform: none }
body[data-page] *{ scroll-behavior: auto !important }
@view-transition{ navigation: none }
}
body[data-page].oc-eco .hc-sculpture::after{ display: none }
/* ── 11.7 · Les couches promues en permanence ───────────────────────────────
`html.lux .rv, html.lux .ol-reveal { will-change: transform,opacity,filter }`
dans olympe-system.css : relevé sur les pages, cela promeut **127 éléments**
en couches de composition, définitivement, et sur les trois propriétés —
`filter` inclus, qui est la plus coûteuse à réserver.
`will-change` est une réservation de mémoire graphique, pas une
optimisation. Posé en permanence sur 127 éléments, il fait exactement
l'inverse de ce qu'on attend de lui : le navigateur promeut de lui-même
ce qui bouge, au moment où ça bouge.
On ne le retire pas complètement — on le limite à ce qui n'a pas encore
joué, et on le relâche dès que c'est fait. */
body[data-page] .rv,
body[data-page] .ol-reveal,
body[data-page] .cv90-reveal{
will-change: auto;
}
body[data-page] .rv:not(.in),
body[data-page] .ol-reveal:not(.in),
body[data-page] .cv90-reveal:not(.cv90-visible){
/* pendant l'attente seulement, et jamais sur `filter` */
will-change: transform, opacity;
filter: none !important;
}
/* Les chiffres de la home restent en deux colonnes sur téléphone, mais chaque
piste doit pouvoir rétrécir : `1fr` seul gardait la largeur intrinsèque des
libellés et ajoutait 24 px de débordement horizontal à 390 px. */
@media (max-width: 720px){
html.lux .lux-figs{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
html.lux .lux-fig{ min-width: 0; padding-inline: clamp(14px, 5vw, 24px) }
}
/* Même principe pour mes propres plans : le rai bouge en permanence et
mérite sa couche ; le grain et la vignette sont fixes et n'en veulent pas. */
body[data-page] .hc-f-grain,
body[data-page] .hc-f-vignette{ will-change: auto }
/* Les glyphes animés — la charge la plus lourde du site, et la plus discrète.
`.oc-glyph .oc-gc { will-change: transform,opacity,filter }` : chaque titre
animé est découpé en un `` PAR CARACTÈRE. Relevé sur about.html :
**241 spans**, chacun réservant en permanence une couche de composition,
`filter` compris — alors que la règle suivante pose justement
`filter: none` sur ces mêmes éléments. On réservait de la mémoire
graphique pour une propriété jamais utilisée, 241 fois par page.
Après l'entrée (`.oc-glyph.in`), plus rien ne bouge : la réservation n'a
plus d'objet.
Premier réglage essayé : réserver seulement pendant l'attente. Mesuré —
les 241 glyphes gardaient quand même la réservation tant qu'ils n'étaient
pas entrés, c'est-à-dire, pour ceux du bas de page, pendant toute la
visite. Aucun gain.
On la retire donc entièrement. Le navigateur promeut de lui-même au
démarrage d'une transition ; c'est précisément ce que `will-change`
anticipe, et anticiper 241 fois coûte plus que ça ne rapporte. */
body[data-page] .oc-glyph .oc-gc{
will-change: auto;
}
/* ══════════════════════════════════════════════════════════════════════════
LES HÉROS — élévation éditoriale
Constat, capture à l'appui : la photographie est posée à 72 % d'opacité
derrière un titre en 88 px. Les deux occupent le même plan et se disputent
le regard — la photo est trop présente pour être une texture, trop noyée
pour être un sujet, et le titre s'y dissout.
Ce n'est pas un problème d'effets manquants. C'est un problème de
hiérarchie. On tranche : la photographie devient une MATIÈRE — sombre,
froide, tenue en arrière — et la typographie devient le sujet.
S'y ajoute l'appareil éditorial qui distingue une page tenue d'une page
ordinaire : un index de section, un filet, une ligne de méta en petites
capitales. Rien de tout cela ne bouge, rien ne coûte à la composition.
══════════════════════════════════════════════════════════════════════ */
/* 1 · La photographie recule et se refroidit */
body[data-page] .ph-bg,
body[data-page] .ph-full-bg,
body[data-page] .hero-vid{
filter: saturate(.62) contrast(1.16) brightness(.52);
}
/* 2 · Un voile minéral la tient définitivement en arrière-plan.
Vertical, donc le titre est couvert sur toute sa largeur — l'ancien voile
était horizontal et laissait la moitié droite des titres à découvert. */
body[data-page] .ph::after,
body[data-page] .ph-full::after{
background:
linear-gradient(180deg,
oklch(.118 .026 254 / .58) 0%,
oklch(.118 .026 254 / .40) 34%,
oklch(.118 .026 254 / .62) 74%,
oklch(.118 .026 254 / .88) 100%),
linear-gradient(96deg,
oklch(.118 .026 254 / .70) 0%,
oklch(.118 .026 254 / .44) 46%,
oklch(.118 .026 254 / .26) 100%) !important;
}
/* Le voile blanc qui éclaircissait le fond sous le texte est neutralisé :
il travaillait contre la lecture. */
body[data-page] .ph::before{ opacity: .18 }
/* 3 · La typographie devient le sujet */
body[data-page] .ph-h1,
body[data-page] .ph-full-body h1{
color : oklch(.985 .004 250);
letter-spacing: -.028em;
text-shadow : 0 1px 40px oklch(.118 .026 254 / .55);
}
/* 4 · L'appareil éditorial — index, filet, méta */
body[data-page] .ph .ey,
body[data-page] .ph-full-body .ey{
position : relative;
display : inline-flex;
align-items : center;
gap : 14px;
color : var(--c-or);
font-family : var(--font-ui);
font-size : 10px;
letter-spacing: .3em;
text-transform: uppercase;
}
/* le filet part de la rubrique et file vers la marge */
body[data-page] .ph .ey::after,
body[data-page] .ph-full-body .ey::after{
content : "";
width : clamp(48px, 7vw, 132px);
height : 1px;
background: linear-gradient(90deg, var(--c-or), transparent);
}
/* 5 · Le chapeau se détache du titre par un filet, pas par un blanc */
body[data-page] .ph-sub{
position : relative;
margin-top : clamp(26px, 3vh, 44px);
padding-top : clamp(22px, 2.6vh, 34px);
color : oklch(.895 .010 250);
}
body[data-page] .ph-sub::before{
content : "";
position : absolute;
top: 0; left: 0;
width : clamp(120px, 16vw, 260px);
height : 1px;
background: linear-gradient(90deg,
color-mix(in oklch, var(--c-or) 70%, transparent), transparent);
}
/* 6 · Un cadre de page discret, comme une planche d'atelier.
Il ne se voit pas, il se sent : c'est ce qui donne le sentiment d'un
document composé plutôt que d'une page qui coule. */
body[data-page] .ph,
body[data-page] .ph-full{
position: relative;
}
body[data-page] .ph > .container,
body[data-page] .ph-full-body{
position: relative;
}
body[data-page] .ph > .container::after{
content : "";
position : absolute;
left : calc(var(--pad) * -1 + 6px);
top : 12%;
bottom : 12%;
width : 1px;
background: linear-gradient(180deg,
transparent,
color-mix(in oklch, var(--c-or) 46%, transparent) 22%,
color-mix(in oklch, var(--c-or) 46%, transparent) 78%,
transparent);
}
@media (max-width: 680px){
body[data-page] .ph > .container::after{ display: none }
body[data-page] .ph .ey::after,
body[data-page] .ph-full-body .ey::after{ width: 40px }
}
/* ── Le rail n'apparaît qu'une fois la lecture engagée ─────────────────────
Mesuré sur savoir-faire.html : #vg-btn recouvrait le chapeau du héros sur
147 × 27 px, .oc-sound-toggle sur 87 × 42 px.
Trois correctifs essayés, chacun écarté pour une raison mesurée :
1. Réserver la hauteur par `padding-bottom` — le rail est en
`position: fixed`, ancré au bas de la FENÊTRE et non de la section.
Le padding a allongé la section de 140 px sans rien déplacer.
2. Déplacer le rail en bas à droite, hors de la colonne de texte — juste
sur savoir-faire.html, faux sur pensee.html où le texte occupe toute
la largeur. Aucun placement fixe ne convient à toutes les mises en page.
3. `animation-timeline: scroll()` — l'animation s'attachait, timeline
résolue, mais l'opacité restait à 1 et je n'ai pas su la vérifier ici.
Retenu : une classe posée par le moteur au-delà de 280 px de défilement.
Vérifiable, universelle, et juste sur le fond — une Maison ouvre sur son
propos, pas sur ses commandes. Le son reste accessible dès l'ouverture
par le bouton du rideau d'intro. */
body[data-page] #vg-btn,
body[data-page] #oc-sound-toggle,
body[data-page] .oc-sound-toggle{
left : var(--hc-rail-x);
right : auto;
top : auto;
z-index: 720;
opacity : 0;
transform : translateY(14px);
pointer-events: none;
transition: opacity .7s var(--ol-ease), transform .7s var(--ol-ease);
}
body[data-page] #vg-btn{
bottom: var(--hc-rail-base);
}
body[data-page] #oc-sound-toggle,
body[data-page] .oc-sound-toggle,
body[data-page] html.lux .oc-sound-toggle{
left : var(--hc-rail-x);
right : auto;
bottom: calc(var(--hc-rail-base) + var(--hc-slot-h) + var(--hc-rail-gap));
}
body[data-page].hc-defile #vg-btn,
body[data-page].hc-defile #oc-sound-toggle,
body[data-page].hc-defile .oc-sound-toggle{
opacity : 1;
transform : none;
pointer-events: auto;
}
/* Sans JavaScript, le rail reste visible : mieux vaut un chevauchement
qu'une commande introuvable. */
html:not(.js) body[data-page] #vg-btn,
html:not(.js) body[data-page] .oc-sound-toggle{
opacity: 1; transform: none; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce){
body[data-page] #vg-btn,
body[data-page] .oc-sound-toggle{ transition: opacity .01ms }
}
/* ══════════════════════════════════════════════════════════════════════════
LA LUMIÈRE AU CURSEUR
Une source ponctuelle qui suit le pointeur, comme une lampe d'atelier
qu'on promène sur la matière.
Deux règles la rendent inoffensive pour la lecture :
— `mix-blend-mode: plus-lighter` ne peut qu'AJOUTER de la lumière. Il est
arithmétiquement incapable d'assombrir un pixel, donc incapable de
réduire le contraste d'un texte clair sur fond sombre ;
— elle est en `pointer-events: none` et derrière le contenu.
Elle ne se déplace que par `translate3d` : compositeur, aucun recalcul.
Elle n'apparaît que sur pointeur fin — sur tactile, il n'y a pas de
curseur à suivre.
══════════════════════════════════════════════════════════════════════ */
@media (pointer: fine) and (prefers-reduced-motion: no-preference){
body[data-page] .hc-led{
position : fixed;
left : 0;
top : 0;
width : 620px;
height : 620px;
margin : -310px 0 0 -310px;
z-index : 3;
pointer-events: none;
opacity : 0;
mix-blend-mode: plus-lighter;
will-change: transform;
transition: opacity .9s var(--ol-ease);
background: radial-gradient(closest-side circle,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 17%, transparent) 0%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 11%, transparent) 16%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 6%, transparent) 34%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 2%, transparent) 58%,
transparent 100%);
}
body[data-page].hc-led-active .hc-led{ opacity: 1 }
/* Le cœur de la source : plus serré, plus chaud. C'est ce petit noyau qui
fait lire l'ensemble comme une lampe et non comme une tache. */
body[data-page] .hc-led::after{
content : "";
position: absolute;
inset : 40%;
border-radius: 50%;
background: radial-gradient(closest-side circle,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 26%, transparent) 0%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 10%, transparent) 45%,
transparent 100%);
}
/* Sur les surfaces polies — marbre, cartouche du décompte, sculptures —
la lampe laisse un reflet plus net, comme sur une arête vernie. */
}
/* ══════════════════════════════════════════════════════════════════════════
LA RESPIRATION DE LA PALETTE
Toutes les minutes, l'accent glisse vers une teinte voisine, s'y tient
quelques secondes, puis revient. Le mouvement est lent à l'aller, net au
retour — on le remarque sans jamais le surprendre en train de bouger.
Les quatre stations sont des matières de la Maison, pas des couleurs
choisies au hasard :
champagne #C9AE7C la station d'origine, l'emblème
bronze #A98552 la colonne, patine chaude
platine #C7C3B4 l'ivoire froid des marbres
or rose #C9A487 la dorure à la feuille sur fond de bol
L'écart de luminance entre les quatre est inférieur à 6 sur 255 : les
contrastes de texte ne bougent pas. C'est une respiration, pas un
clignotement.
`@property` déclare le type de la variable, ce qui permet au moteur de
l'interpoler comme une couleur au lieu de la commuter d'un coup.
══════════════════════════════════════════════════════════════════════ */
@property --hc-lueur{
syntax: '';
inherits: true;
initial-value: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat));
}
@media (prefers-reduced-motion: no-preference){
body[data-page]{
--hc-lueur: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat));
animation: hcRespiration 60s ease-in-out infinite;
}
@keyframes hcRespiration{
/* 52 s sur la station d'origine — l'écart doit rester un événement */
0% { --hc-lueur: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat)) }
22% { --hc-lueur: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat)) }
/* bronze : 4 s de montée, 3 s de tenue, retour net */
26% { --hc-lueur: oklch(.6395 calc(var(--ol-c-pat)*.909) calc(var(--ol-h-pat) + -9.6)) }
31% { --hc-lueur: oklch(.6395 calc(var(--ol-c-pat)*.909) calc(var(--ol-h-pat) + -9.6)) }
34% { --hc-lueur: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat)) }
56% { --hc-lueur: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat)) }
/* platine */
60% { --hc-lueur: oklch(.8162 calc(var(--ol-c-pat)*.236) var(--ol-h-pat)) }
64% { --hc-lueur: oklch(.8162 calc(var(--ol-c-pat)*.236) var(--ol-h-pat)) }
67% { --hc-lueur: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat)) }
86% { --hc-lueur: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat)) }
/* or rose */
90% { --hc-lueur: oklch(.7448 calc(var(--ol-c-pat)*.664) calc(var(--ol-h-pat) + -24.9)) }
93% { --hc-lueur: oklch(.7448 calc(var(--ol-c-pat)*.664) calc(var(--ol-h-pat) + -24.9)) }
96% { --hc-lueur: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat)) }
100% { --hc-lueur: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat)) }
}
/* Ce que la respiration touche : la lampe, les filets, les capitales et
les arêtes. JAMAIS un corps de texte — un texte dont la couleur bouge
pendant la lecture est une faute, pas un effet. */
body[data-page] .hc-filet,
body[data-page] hr,
body[data-page] .ph .ey::after,
body[data-page] .nl::after,
body[data-page] .cv912-countdown--hero::after{
background-image: linear-gradient(90deg,
transparent, var(--hc-lueur) 30%, var(--hc-lueur) 70%, transparent);
}
body[data-page] .ph .ey,
body[data-page] .hc-capitale,
body[data-page] .cv912-countdown__kicker{
color: var(--hc-lueur);
}
}
/* ══════════════════════════════════════════════════════════════════════════
LE SOUFFLE
Toutes les 30 secondes, un courant d'air traverse la page de gauche à
droite. Il met environ 4 secondes à passer ; les 26 autres, il n'existe
pas. On le voit passer sans jamais le voir attendre.
PREMIÈRE VERSION ÉCARTÉE, deux défauts mesurés :
— j'avais posé `animation:` en abrégé sur .hc-filet, .hc-fumee et
.ol-fumee. Or ces éléments portent déjà une animation déclarée en
abrégé ailleurs (hcMonte pour la révélation, hcDissipe pour la
dissipation au défilement) : la dernière déclaration écrase la
précédente. Relevé sur about.html — .hc-filet ne portait que hcMonte,
et .hc-fumee avait tout perdu ;
— `hcSouffleArete` animait `filter: brightness()`. C'est exactement ce
que ce fichier interdit trois sections plus haut : seules `transform`
et `opacity` restent sur le fil de composition.
Version retenue : tout le souffle tient dans UNE couche dédiée et ses
deux pseudo-éléments. Aucune animation posée sur un élément qui en a
déjà une, aucune propriété hors transform/opacity, et en `screen` — donc
incapable d'assombrir quoi que ce soit, donc sans effet sur la lecture.
Ce qui le fait lire comme du vent et non comme un balayage :
le front principal, une traîne décalée de 400 ms qui donne l'épaisseur,
et une crête claire plus rapide que le corps — un souffle réel n'a pas
un front rigide.
══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
body[data-page] .hc-vent{
position : fixed;
inset : -12% -45%;
z-index : 2;
pointer-events: none;
opacity : 0;
mix-blend-mode: screen;
will-change: transform, opacity;
background: linear-gradient(96deg,
transparent 0%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 3%, transparent) 28%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 9%, transparent) 41%,
color-mix(in oklch, oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap)) 12%, transparent) 47%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 10%, transparent) 53%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 3%, transparent) 68%,
transparent 100%);
animation: hcSouffle 30s cubic-bezier(.42,0,.24,1) infinite;
}
/* La traîne : même souffle, 400 ms plus tard et plus large. C'est ce
décalage qui donne l'épaisseur — sans lui, le vent est une barre. */
body[data-page] .hc-vent::before{
content : "";
position: absolute;
inset : 0;
background: linear-gradient(96deg,
transparent 0%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 5%, transparent) 34%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 7%, transparent) 50%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 5%, transparent) 66%,
transparent 100%);
animation: hcSouffleTraine 30s cubic-bezier(.38,0,.28,1) infinite;
}
/* La crête : fine, claire, plus rapide que le corps. C'est elle qu'on
voit passer sur les arêtes et les filets d'or. */
body[data-page] .hc-vent::after{
content : "";
position: absolute;
inset : 0;
background: linear-gradient(96deg,
transparent 46%,
color-mix(in oklch, oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap)) 20%, transparent) 49.4%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 24%, transparent) 50%,
color-mix(in oklch, oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap)) 20%, transparent) 50.6%,
transparent 54%);
animation: hcSouffleCrete 30s cubic-bezier(.3,0,.2,1) infinite;
}
@keyframes hcSouffle{
0% { opacity: 0; transform: translate3d(-56%, 0, 0) skewX(0deg) }
84% { opacity: 0; transform: translate3d(-56%, 0, 0) skewX(0deg) }
87% { opacity: .58; transform: translate3d(-24%, 0, 0) skewX(-1.4deg) }
93% { opacity: .74; transform: translate3d( 16%, 0, 0) skewX(-2.2deg) }
98% { opacity: 0; transform: translate3d( 56%, 0, 0) skewX(-.6deg) }
100% { opacity: 0; transform: translate3d( 56%, 0, 0) skewX(0deg) }
}
@keyframes hcSouffleTraine{
0% { opacity: 0; transform: translate3d(-62%, 0, 0) scaleX(1.3) }
85% { opacity: 0; transform: translate3d(-62%, 0, 0) scaleX(1.3) }
90% { opacity: .70; transform: translate3d(-14%, 0, 0) scaleX(1.5) }
96% { opacity: .30; transform: translate3d( 30%, 0, 0) scaleX(1.4) }
100% { opacity: 0; transform: translate3d( 62%, 0, 0) scaleX(1.3) }
}
@keyframes hcSouffleCrete{
0% { opacity: 0; transform: translate3d(-52%, 0, 0) skewX(-3deg) }
85.5%{opacity: 0; transform: translate3d(-52%, 0, 0) skewX(-3deg) }
88% { opacity: .85; transform: translate3d(-16%, 0, 0) skewX(-3.4deg) }
92% { opacity: .95; transform: translate3d( 20%, 0, 0) skewX(-3.4deg) }
96% { opacity: 0; transform: translate3d( 52%, 0, 0) skewX(-3deg) }
100% { opacity: 0; transform: translate3d( 52%, 0, 0) skewX(-3deg) }
}
}
/* Économie d'énergie : pas de souffle */
body[data-page].oc-eco .hc-vent{ display: none }
/* ══════════════════════════════════════════════════════════════════════════
LE FRAGMENT — sculpté
Constat en capture : la dalle se voyait, mais elle était PLATE. Des filets
parallèles réguliers, l'aspect d'un verre dépoli plutôt que d'un bloc de
carrière. Trois choses manquaient, et aucune n'est un effet de plus :
— l'IRRÉGULARITÉ. Un seul réseau de turbulence produit toujours des
stries régulières. Il en faut deux, à des échelles et des graines
différentes, dont l'un très étiré : c'est leur superposition qui donne
le hasard d'une veine réelle ;
— le RELIEF. Un bloc a des arêtes. Un liseré clair en haut, une ombre
portée en bas, et le regard lit une épaisseur au lieu d'une surface ;
— l'OR. Le Carrare de la Maison porte des filets de dorure. Rares,
jamais réguliers, et c'est leur rareté qui les rend précieux.
══════════════════════════════════════════════════════════════════════ */
body[data-page] .hc-sculpture{
/* le fond de pierre : trois nuages superposés, pas un dégradé linéaire */
background:
radial-gradient(120% 90% at 22% 18%,
oklch(.982 .003 200) 0%, oklch(.958 .004 205) 34%, transparent 70%),
radial-gradient(90% 120% at 82% 74%,
oklch(.944 .006 212) 0%, oklch(.922 .007 214) 40%, transparent 76%),
linear-gradient(158deg,
oklch(.968 .004 206) 0%, oklch(.934 .006 210) 52%, oklch(.906 .008 214) 100%);
box-shadow:
/* l'arête : lumière au sommet, ombre au pied — l'épaisseur du bloc */
inset 0 1px 0 oklch(1 0 0 / .92),
inset 0 -1px 0 oklch(.62 .02 220 / .34),
inset 0 26px 46px -30px oklch(1 0 0 / .7),
inset 0 -30px 54px -34px oklch(.55 .03 224 / .32),
var(--ol-shadow);
}
/* Réseau principal — veines majeures, très étirées */
body[data-page] .hc-sculpture::before{
background-image: var(--hc-veines);
background-size : 760px 760px;
opacity : .46;
mix-blend-mode: multiply;
transform: rotate(-8deg) scale(1.32);
transform-origin: center;
}
/* Réseau secondaire + filets d'or — posé en couche supplémentaire pour que
les deux hasards se croisent au lieu de se superposer. */
body[data-page] .hc-sculpture{
--hc-or-filet: color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 62%, transparent);
}
body[data-page] .hc-atelier .hc-sculpture{
position: relative;
}
body[data-page] .hc-sculpture > .hc-veine2{
position: absolute;
inset : 0;
z-index : 1;
pointer-events: none;
background-image:
/* les filets d'or, rares et fins */
repeating-linear-gradient(69deg,
transparent 0 84px,
var(--hc-or-filet) 84px 84.7px,
transparent 84.7px 210px),
/* le second réseau de veines */
var(--hc-veines-fines);
background-size: auto, 520px 520px;
opacity: .38;
mix-blend-mode: multiply;
transform: rotate(6deg) scale(1.28);
}
/* Le poli passe au-dessus des deux réseaux */
body[data-page] .hc-sculpture::after{
z-index: 2;
}
/* Quand la 3D a fait ses preuves, tout cela s'efface sous elle */
body[data-page] .hc-sculpture--3d > .hc-veine2{ display: none }
/* La dalle CSS ne doit jamais réapparaître sous la sculpture 3D. Ma règle
de sculpture, ajoutée plus bas dans le fichier, écrasait le
`background: none` de .hc-sculpture--3d — la pierre plate revenait
derrière la pièce en volume. Cette règle referme la porte, en dernier. */
body[data-page] .hc-sculpture--3d{
background : none !important;
box-shadow : none !important;
}
body[data-page] .hc-sculpture--3d::before,
body[data-page] .hc-sculpture--3d::after,
body[data-page] .hc-sculpture--3d > .hc-veine2{
display: none !important;
}
/* ══════════════════════════════════════════════════════════════════════════
LE CRISTAL
Un verre taillé n'est pas un panneau flou. Ce qui le distingue, et ce que
la plupart des « glassmorphismes » ratent, tient en trois choses :
— la RÉFRACTION CHROMATIQUE sur les arêtes. Un bord de cristal sépare
légèrement les couleurs, comme un prisme. Sans elle, on a du plastique
dépoli ;
— le BISEAU. Une arête n'est pas un trait : c'est une facette qui reçoit
la lumière d'un côté et l'ombre de l'autre ;
— la CAUSTIQUE. Le verre concentre la lumière en une tache plus claire
qu'elle, décalée par rapport à la source.
DISCIPLINE DE PERFORMANCE — un `backdrop-filter` oblige le compositeur à
relire et rééchantillonner tout ce qui est derrière, à chaque image. Sur
une grande surface c'est le poste le plus cher d'une page. Le cristal est
donc réservé ici à de PETITES surfaces déjà promues en couche : le
cartouche du décompte, la bulle de conciergerie, la barre de consentement,
les cartouches du rail. Jamais une section, jamais un héros.
══════════════════════════════════════════════════════════════════════ */
body[data-page] .hc-cristal,
body[data-page] .cv912-countdown--hero{
position: relative;
isolation: isolate;
}
/* Les instruments sont des surfaces de cristal, mais ils restent ancrés à
la fenêtre. Les passer à `position:relative` les envoyait au pied du
document et rendait la bannière invisible à l'arrivée. */
body[data-page] #aiw,
body[data-page] .hc-consent,
body[data-page] #vg-btn,
body[data-page] .oc-sound-toggle{
position: fixed;
isolation: isolate;
}
/* Le premier choix doit rester seul au premier plan sur les petits écrans :
aucune collision possible avec concierge, son ou visite guidée. */
body[data-page].hc-consent-open :is(#aiw, #vg-btn, .oc-sound-toggle){
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* 1 · Le biseau — une facette claire au sommet, une ombre au pied.
En box-shadow interne : aucun nœud, aucun coût de composition. */
body[data-page] .hc-cristal,
body[data-page] .cv912-countdown--hero,
body[data-page] #vg-btn,
body[data-page] .oc-sound-toggle{
box-shadow:
inset 0 1px 0 oklch(1 0 0 / .34),
inset 0 -1px 0 oklch(.20 .03 250 / .46),
inset 1px 0 0 oklch(1 0 0 / .10),
inset -1px 0 0 oklch(.20 .03 250 / .22),
0 22px 60px oklch(.118 .026 254 / .44);
}
/* 2 · La réfraction chromatique de l'arête.
Deux liserés très fins, décalés en teinte de part et d'autre du champagne :
c'est la séparation des couleurs d'un prisme, réduite à l'essentiel. */
body[data-page] .hc-cristal::before,
body[data-page] .cv912-countdown--hero::before{
content : "";
position: absolute;
inset : -1px;
z-index : -1;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(
calc(112deg + var(--hc-progress) * 30deg),
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 64%, oklch(.72 .10 32)) 0%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 74%, transparent) 26%,
oklch(.94 .02 250 / .5) 48%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 74%, transparent) 70%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 58%, oklch(.66 .11 232))100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box exclude,
linear-gradient(#000 0 0);
mask:
linear-gradient(#000 0 0) content-box exclude,
linear-gradient(#000 0 0);
mask-composite: exclude;
opacity: .72;
}
/* 3 · La caustique — la tache que le verre concentre. Elle suit la lumière
du site, donc elle se déplace quand on descend dans la page. */
body[data-page] .hc-cristal::after,
body[data-page] .cv912-countdown--hero::after{
content : "";
position: absolute;
inset : 0;
z-index : 1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: screen;
background:
radial-gradient(46% 62% at calc(22% + var(--hc-progress) * 44%) 18%,
oklch(1 0 0 / .16) 0%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 10%, transparent) 34%,
transparent 72%),
linear-gradient(
calc(104deg + var(--hc-progress) * 24deg),
transparent 40%,
oklch(1 0 0 / .07) 49%,
transparent 58%);
}
/* 4 · Le flou de fond, dosé. 16 px suffit à lire « verre » ; au-delà on
paie sans que l'œil y gagne. */
body[data-page] .hc-cristal,
body[data-page] .cv912-countdown--hero{
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter : blur(16px) saturate(1.4);
}
/* Sur mobile et en mode économie, le cristal redevient une surface simple :
le backdrop-filter est le premier poste à couper. */
@media (max-width: 680px){
body[data-page] .hc-cristal,
body[data-page] .cv912-countdown--hero{
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: color-mix(in oklch, oklch(.118 .026 254) 88%, transparent);
}
body[data-page] .hc-cristal::before,
body[data-page] .cv912-countdown--hero::before{ opacity: .5 }
}
body[data-page].oc-eco .hc-cristal::before,
body[data-page].oc-eco .hc-cristal::after,
body[data-page].oc-eco .cv912-countdown--hero::before,
body[data-page].oc-eco .cv912-countdown--hero::after{ display: none }
/* ══════════════════════════════════════════════════════════════════════════
LES INTUITIONS
Le guide ne notifie pas : il souffle. Une intuition entre par le bas,
tient onze secondes, et se DISSIPE — elle ne disparaît pas.
La dissipation vient d'un masque qui remonte à travers le cartouche : le
texte s'efface par le bas pendant que l'ensemble s'élève et s'élargit d'un
cheveu. C'est le comportement d'une fumée qui se disperse, et cela ne
coûte que `transform`, `opacity` et `mask-position` — aucune
re-rastérisation.
Elle vit en bas à droite, au-dessus de la conciergerie, jamais sur une
colonne de texte. Elle survit au survol : on peut la lire.
══════════════════════════════════════════════════════════════════════ */
body[data-page] .hc-intuition{
position : fixed;
right : var(--hc-rail-x);
bottom : calc(var(--hc-rail-base) + 54px + 20px);
z-index : 9400;
width : min(330px, calc(100vw - 40px));
padding : 18px 20px 16px;
border : 1px solid color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 30%, transparent);
border-radius: 3px;
background: color-mix(in oklch, oklch(.118 .026 254) 86%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
backdrop-filter : blur(18px) saturate(1.3);
box-shadow:
inset 0 1px 0 oklch(1 0 0 / .16),
0 26px 70px oklch(.118 .026 254 / .58);
color : oklch(.895 .010 250);
font-family: var(--font-l);
opacity : 0;
transform : translate3d(0, 18px, 0);
transition: opacity .85s var(--ol-ease), transform .95s var(--ol-ease);
will-change: transform, opacity;
}
body[data-page] .hc-intuition--la{
opacity : 1;
transform: none;
}
/* Le filet d'or en tête : elle appartient à la Maison */
body[data-page] .hc-intuition::before{
content : "";
position: absolute;
inset : -1px 0 auto 0;
height : 1px;
background: linear-gradient(90deg,
transparent, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 34%, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 66%, transparent);
}
body[data-page] .hc-intuition__t{
margin : 0 0 7px;
font-family : var(--font-s);
font-size : 15px;
line-height : 1.3;
color : var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat)));
letter-spacing: .005em;
max-width : none;
}
body[data-page] .hc-intuition__c{
margin : 0;
font-family: var(--font-b);
font-size : 12.5px;
line-height: 1.62;
color : oklch(.812 .012 250);
max-width : none;
}
body[data-page] .hc-intuition__a{
display : inline-block;
margin-top : 13px;
font-size : 10px;
letter-spacing : .22em;
text-transform : uppercase;
color : var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat)));
text-decoration: none;
border-bottom : 1px solid color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 42%, transparent);
padding-bottom : 2px;
transition : border-color .45s var(--ol-ease);
}
body[data-page] .hc-intuition__a:hover{
border-bottom-color: var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat)));
}
body[data-page] .hc-intuition__x{
position : absolute;
top : 8px;
right : 10px;
width : 24px;
height : 24px;
border : 0;
background : transparent;
color : oklch(.66 .014 250);
font-size : 16px;
line-height: 1;
cursor : pointer;
transition : color .4s var(--ol-ease);
}
body[data-page] .hc-intuition__x:hover{ color: var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) }
/* La dissipation. Le masque part de « tout visible » et remonte jusqu'à
« rien » : le cartouche s'efface par le bas, comme une fumée qui monte. */
body[data-page] .hc-intuition--fumee{
animation: hcDissipation 1.5s cubic-bezier(.3,0,.2,1) forwards;
pointer-events: none;
}
@keyframes hcDissipation{
0%{
opacity : 1;
transform: translate3d(0,0,0) scale(1);
-webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 34%, #000 100%);
mask-image : linear-gradient(0deg, transparent 0%, #000 34%, #000 100%);
-webkit-mask-size : 100% 300%;
mask-size : 100% 300%;
-webkit-mask-position: 0 100%;
mask-position : 0 100%;
}
55%{
opacity : .70;
transform: translate3d(0,-16px,0) scale(1.035);
}
100%{
opacity : 0;
transform: translate3d(0,-42px,0) scale(1.09);
-webkit-mask-position: 0 0%;
mask-position : 0 0%;
}
}
@media (max-width: 820px){
body[data-page] .hc-intuition{
right : 14px;
left : 14px;
width : auto;
bottom: calc(var(--hc-rail-base) + 54px + 16px);
}
}
@media (prefers-reduced-motion: reduce){
body[data-page] .hc-intuition{ transition: opacity .01ms; transform: none }
body[data-page] .hc-intuition--fumee{ animation: none; opacity: 0 }
}
body[data-page].oc-eco .hc-intuition{ display: none }
/* ── V922.1 · Correctifs de cascade validés ───────────────────────────────
Les effets complexes du décompte et du marbre disposent désormais de
surfaces dédiées. Ils ne se disputent plus les mêmes ::before/::after. */
body[data-page] .cv912-countdown--hero.hc-countdown-fx-ready::before,
body[data-page] .cv912-countdown--hero.hc-countdown-fx-ready::after{
content: none !important;
}
body[data-page] .hc-countdown-edge,
body[data-page] .hc-countdown-polish,
body[data-page] .hc-countdown-glow,
body[data-page] .hc-sculpture-polish{
position: absolute;
pointer-events: none;
border-radius: inherit;
}
body[data-page] .hc-countdown-edge{
inset: -1px;
z-index: 2;
padding: 1px;
background: linear-gradient(
calc(112deg + var(--hc-progress) * 30deg),
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 64%, oklch(.72 .10 32)) 0%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 74%, transparent) 26%,
oklch(.94 .02 250 / .5) 48%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 74%, transparent) 70%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 58%, oklch(.66 .11 232)) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
opacity: .76;
}
body[data-page] .hc-countdown-polish{
inset: 0;
z-index: 1;
mix-blend-mode: screen;
background:
radial-gradient(46% 62% at calc(22% + var(--hc-progress) * 44%) 18%,
oklch(1 0 0 / .16) 0%,
color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 10%, transparent) 34%,
transparent 72%),
linear-gradient(calc(104deg + var(--hc-progress) * 24deg),
transparent 40%, oklch(1 0 0 / .07) 49%, transparent 58%);
}
body[data-page] .hc-countdown-glow{
left: 12%;
right: 12%;
bottom: 0;
z-index: 2;
height: 1px;
background: linear-gradient(90deg, transparent,
var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 30%, var(--hc-champagne-lo) 50%,
var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 70%, transparent);
box-shadow: 0 0 18px color-mix(in oklch, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))) 34%, transparent);
opacity: .88;
}
body[data-page] .hc-sculpture-polish{
inset: 0;
z-index: 2;
mix-blend-mode: screen;
background: linear-gradient(
calc(112deg + var(--hc-progress) * 24deg),
transparent 32%, oklch(1 0 0 / .44) 47%,
var(--hc-veil-22) 52%, transparent 68%);
transform: translateX(-10%);
opacity: .82;
transition: transform 1.1s cubic-bezier(.19,1,.22,1), opacity .7s cubic-bezier(.19,1,.22,1);
}
body[data-page] .hc-sculpture:hover > .hc-sculpture-polish{
transform: translateX(10%);
opacity: 1;
}
body[data-page] .hc-sculpture--3d > .hc-sculpture-polish,
body[data-page].oc-eco .hc-sculpture-polish{
display: none !important;
}
/* Le voile des héros reçoit sa géométrie complète en dernier : les filets
génériques de la signature ne peuvent plus le réduire à un pixel. */
body[data-page] .ph::after,
body[data-page] .ph-full::after{
content: "";
position: absolute;
inset: 0 !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: auto !important;
height: auto !important;
z-index: 0;
pointer-events: none;
}
/* L'appareil éditorial cible la classe réellement présente dans les héros. */
body[data-page] .ph .kicker,
body[data-page] .ph-full .kicker{
display: inline-flex;
align-items: center;
gap: 14px;
}
body[data-page] .ph .kicker::after,
body[data-page] .ph-full .kicker::after{
content: "";
width: clamp(42px, 7vw, 94px);
height: 1px;
background: linear-gradient(90deg, var(--hc-lueur, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat))), transparent);
opacity: .72;
}
@media (max-width: 680px){
body[data-page] .hc-countdown-edge{ opacity: .5 }
}
body[data-page].oc-eco .hc-countdown-edge,
body[data-page].oc-eco .hc-countdown-polish,
body[data-page].oc-eco .hc-countdown-glow{
display: none;
}
/* Le classement vidéo ne doit jamais faire rentrer les wrappers de fond
absolus dans le flux flex du héros. C'était la cause du héros coupé en
deux colonnes et du titre repoussé hors écran. */
body[data-page] .hero-vid.hc-video-fond,
body[data-page] .ph-bg.hc-video-fond,
body[data-page] .ph-full-bg.hc-video-fond{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* V922.2 — Les décors lumineux restent contenus dans la scène : ils ne
créent jamais une zone de défilement horizontale sur les petits écrans. */
html.lux,
html.lux body{
overflow-x: hidden;
overflow-x: clip;
}
/* Les cartes d'engagement sont des îlots nuit à l'intérieur d'une section
claire. Elles doivent donc échapper explicitement à la couleur de texte de
la section parente. */
html.lux body[data-page="about"] .sec--creme
:is(.v6-inline-about-28,.v6-inline-about-32,.v6-inline-about-36)
:is(h3,.v6-inline-about-30,.v6-inline-about-34,.v6-inline-about-38){
color: var(--ol-carrara) !important;
-webkit-text-fill-color: var(--ol-carrara) !important;
}
html.lux body[data-page="about"] .sec--creme
:is(.v6-inline-about-28,.v6-inline-about-32,.v6-inline-about-36)
:is(p,.body){
color: oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap) / .82) !important;
-webkit-text-fill-color: currentColor;
}
/* Les trois engagements de La Maison conservent leur respiration en mobile.
La grille desktop en trois colonnes était la dernière source de débordement
réel (le troisième cartouche commençait au-delà du viewport). */
@media (max-width: 768px){
body[data-page="about"] .v6-inline-about-27{
grid-template-columns: minmax(0, 1fr);
}
body[data-page="about"] :is(.v6-inline-about-28,.v6-inline-about-32,.v6-inline-about-36){
min-width: 0;
}
/* Les carnets privés utilisent douze colonnes sur grand écran. En mobile,
chaque film devient un chapitre pleine largeur, sans largeur minimale
héritée des spans asymétriques desktop. */
body[data-page="portfolio"] .v6-inline-portfolio-118{
display: grid;
grid-template-columns: minmax(0, 1fr);
}
body[data-page="portfolio"] .v6-inline-portfolio-118 > .cp-card{
grid-column: 1 / -1 !important;
width: 100%;
min-width: 0;
}
}
/* ======================================================================
V922.3 — STABILITÉ ÉDITORIALE ET IMMERSION 2026
Règles finales, strictement isolées. Aucun pseudo-élément partagé n'est
réutilisé : chaque lumière possède sa propre surface pour éviter les
collisions de cascade qui avaient déstructuré La Maison.
====================================================================== */
/* LA MAISON — restauration intégrale de la composition du fondateur. */
body[data-page="about"] .folco{
position:relative;
padding:clamp(96px,10vw,164px) var(--pad);
overflow:hidden;
}
body[data-page="about"] .folco-grid{
width:min(1280px,100%);
margin-inline:auto;
display:grid !important;
grid-template-columns:minmax(340px,.86fr) minmax(0,1.14fr);
align-items:center;
gap:clamp(56px,8vw,128px);
}
body[data-page="about"] .folco-grid>div{
position:relative;
min-width:0;
}
body[data-page="about"] .folco-grid>div:first-child{
padding-bottom:clamp(58px,5vw,82px);
}
body[data-page="about"] .folco-portrait{
position:relative !important;
inset:auto !important;
width:100% !important;
height:clamp(560px,72svh,820px) !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
filter:none !important;
background:linear-gradient(155deg,oklch(.2066 calc(var(--ol-c-body)*.518) var(--ol-h)),oklch(.2896 calc(var(--ol-c-body)*.815) var(--ol-h)) 58%,oklch(.1349 calc(var(--ol-c-body)*.266) var(--ol-h)));
border:1px solid oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .22);
box-shadow:0 44px 120px rgba(0,0,0,.42);
}
body[data-page="about"] .folco-video,
body[data-page="about"] .folco-silhouette{
position:absolute !important;
inset:0 !important;
display:block;
width:100% !important;
height:100% !important;
}
body[data-page="about"] .folco-video{
z-index:0;
object-fit:cover;
object-position:center 42%;
}
body[data-page="about"] .folco-silhouette{
z-index:1;
display:grid;
place-items:center;
opacity:.16;
pointer-events:none;
}
body[data-page="about"] .folco-silhouette svg{
width:min(54%,360px);
height:auto;
}
body[data-page="about"] .folco-plaque{
left:clamp(16px,2.2vw,30px);
right:clamp(16px,2.2vw,30px);
bottom:clamp(74px,6vw,98px);
top:auto;
z-index:5;
padding:18px 20px;
color:oklch(.2575 calc(var(--ol-c-body)*.484) var(--ol-h));
background:oklch(.981 calc(var(--ol-c-body)*.07) var(--ol-h-pap) / .91);
border:1px solid oklch(.9046 calc(var(--ol-c-body)*.11) var(--ol-h) / .62);
box-shadow:0 22px 60px oklch(.1422 calc(var(--ol-c-body)*.35) var(--ol-h) / .24);
backdrop-filter:blur(16px) saturate(1.1);
}
body[data-page="about"] .folco-plaque-name{
display:block;
color:oklch(.2575 calc(var(--ol-c-body)*.484) var(--ol-h));
font-size:clamp(24px,2.25vw,36px);
line-height:1.05;
margin-bottom:8px;
}
body[data-page="about"] .folco-discretion{
position:absolute;
left:0;
bottom:0;
margin:0;
color:oklch(.9046 calc(var(--ol-c-body)*.11) var(--ol-h) / .76) !important;
font-size:clamp(12px,1vw,15px);
line-height:1.55;
}
body[data-page="about"] .folco-text{
position:relative;
max-width:650px;
padding:clamp(16px,2vw,28px) 0;
color:oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap) / .86);
}
body[data-page="about"] .folco-eyebrow{
display:block;
margin-bottom:22px;
color:var(--ol-opal-soft);
letter-spacing:.38em;
text-transform:uppercase;
}
body[data-page="about"] .folco-name{
margin:0 0 clamp(28px,3vw,44px);
color:var(--ol-carrara);
font-size:clamp(62px,7.4vw,126px);
line-height:.86;
}
body[data-page="about"] .folco-name em{
display:block;
color:var(--ol-platinum);
-webkit-text-fill-color:var(--ol-platinum);
}
body[data-page="about"] .folco-body{
max-width:60ch;
}
body[data-page="about"] .folco-body p{
margin:0 0 1.25em;
color:oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap) / .82) !important;
font-size:clamp(16px,1.18vw,19px);
line-height:1.78;
}
body[data-page="about"] .folco-signature{
display:grid;
gap:4px;
width:max-content;
max-width:100%;
margin-top:38px;
padding-top:18px;
border-top:1px solid oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .32);
color:var(--ol-carrara);
}
body[data-page="about"] .folco-signature small{
color:oklch(.9046 calc(var(--ol-c-body)*.11) var(--ol-h) / .68);
letter-spacing:.16em;
text-transform:uppercase;
}
/* Le film historique complet appartient uniquement à La Maison. L'accueil
utilise désormais une photographie d'atelier et une promesse différente. */
body[data-page="index"] .legacy-media img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
filter:brightness(.78) contrast(1.08) saturate(.72);
transform:scale(1.012);
transition:transform 1.6s var(--ol-ease),filter 1.1s ease;
}
body[data-page="index"] .legacy-film:hover .legacy-media img{
transform:scale(1.035);
filter:brightness(.9) contrast(1.06) saturate(.86);
}
/* INAUGURATION — le Portale del Tempo redevient le monument de la scène. */
body[data-page="inauguration-dubai"] .dxb-hero{
min-height:100svh;
}
body[data-page="inauguration-dubai"] .dxb-hero-in{
position:relative;
z-index:4;
width:min(1280px,calc(100% - 2*var(--pad)));
margin-inline:auto;
padding-bottom:clamp(72px,9vh,116px);
}
body[data-page="inauguration-dubai"] .dxb-monument{
position:absolute;
z-index:2;
top:24%;
right:clamp(20px,5vw,88px);
width:min(43vw,720px);
margin:0;
transform:translateY(-32%);
opacity:.74;
pointer-events:none;
filter:drop-shadow(0 34px 90px rgba(0,0,0,.52));
}
body[data-page="inauguration-dubai"] .dxb-monument img{
position:relative;
z-index:2;
display:block;
width:100%;
height:auto;
filter:brightness(1.22) contrast(1.08) saturate(.72);
}
body[data-page="inauguration-dubai"] .dxb-monument-aura{
position:absolute;
z-index:1;
inset:8% 2% 0;
border-radius:50%;
background:radial-gradient(circle,oklch(.8792 calc(var(--ol-c-body)*.32) var(--ol-h) / .34),oklch(.7318 calc(var(--ol-c-body)*.553) var(--ol-h) / .13) 42%,transparent 72%);
filter:blur(26px);
}
body[data-page="inauguration-dubai"] .dxb-h1,
body[data-page="inauguration-dubai"] .dxb-sub,
body[data-page="inauguration-dubai"] .dxb-date{
max-width:min(760px,62vw);
text-shadow:0 8px 38px oklch(.1356 calc(var(--ol-c-body)*.285) var(--ol-h) / .78);
}
/* Aucun instrument flottant ne masque une composition éditoriale. */
body[data-page="inauguration-dubai"] .cv912-countdown-compact{
display:none !important;
}
html.cv912-scrolled .cv912-countdown-compact{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transform:translate3d(0,-12px,0) !important;
}
body[data-page] .hc-intuition{
display:none !important;
}
/* Les commandes restent disponibles dans la scène d'ouverture, puis se
retirent dès que la lecture commence : aucun cartouche ne recouvre une
photographie, une plaque ou un texte éditorial. */
body[data-page].hc-defile #vg-btn,
body[data-page].hc-defile #oc-sound-toggle,
body[data-page].hc-defile .oc-sound-toggle{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transform:translateY(12px) !important;
}
/* Champ lumineux dédié : une lame froide et son écho chaud parcourent le
document au rythme du défilement, sans jamais intercepter un geste. */
body[data-page] .ol-lightfield{
--ol-light-x:-34vw;
--ol-light-y:8vh;
--ol-light-turn:-11deg;
position:fixed;
z-index:48;
top:0;
left:0;
width:38vw;
height:110vh;
pointer-events:none;
transform:translate3d(var(--ol-light-x),var(--ol-light-y),0) rotate(var(--ol-light-turn));
transform-origin:center;
opacity:.38;
mix-blend-mode:screen;
will-change:transform;
contain:strict;
}
body[data-page] .ol-lightfield__core,
body[data-page] .ol-lightfield__echo{
position:absolute;
inset:0;
display:block;
}
body[data-page] .ol-lightfield__core{
background:linear-gradient(90deg,transparent 18%,oklch(.8792 calc(var(--ol-c-body)*.32) var(--ol-h) / .025) 37%,oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap) / .18) 49.5%,oklch(.8792 calc(var(--ol-c-body)*.32) var(--ol-h) / .055) 56%,transparent 76%);
filter:blur(9px);
}
body[data-page] .ol-lightfield__echo{
inset:12% 12% 8% 28%;
background:radial-gradient(ellipse,oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .11),oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .045) 42%,transparent 74%);
filter:blur(34px);
}
/* Sur les moteurs qui savent lier une animation au défilement, le rai passe
entièrement sur le compositeur. Le JavaScript conserve les mêmes variables
comme repli pour les navigateurs plus anciens. */
@supports (animation-timeline:scroll()){
@media (prefers-reduced-motion:no-preference){
body[data-page] .ol-lightfield{
animation:olLightTraverse 1ms linear both;
animation-timeline:scroll(root block);
}
@keyframes olLightTraverse{
0% {transform:translate3d(-38vw,8vh,0) rotate(-12deg);opacity:.20}
44% {transform:translate3d(24vw,34vh,0) rotate(-2deg);opacity:.42}
72% {transform:translate3d(58vw,18vh,0) rotate(6deg);opacity:.34}
100%{transform:translate3d(92vw,7vh,0) rotate(11deg);opacity:.18}
}
}
}
/* Les transitions inter-documents prennent une direction éditoriale. Une
fiche s'ouvre comme un plan rapproché, un retour respire vers l'arrière et
une rubrique glisse latéralement. Les sélecteurs sont ignorés si le moteur
ne prend pas encore en charge les types de View Transition. */
@media (prefers-reduced-motion:no-preference){
html:active-view-transition-type(ol-detail)::view-transition-old(root){
animation:olDetailOld .38s cubic-bezier(.55,0,.84,.22) both;
}
html:active-view-transition-type(ol-detail)::view-transition-new(root){
animation:olDetailNew .68s cubic-bezier(.16,1,.3,1) both;
}
html:active-view-transition-type(ol-rubrique)::view-transition-old(root){
animation:olSectionOld .34s cubic-bezier(.4,0,.2,1) both;
}
html:active-view-transition-type(ol-rubrique)::view-transition-new(root){
animation:olSectionNew .62s cubic-bezier(.16,1,.3,1) both;
}
html:active-view-transition-type(ol-retour)::view-transition-old(root){
animation:olBackOld .34s cubic-bezier(.4,0,.2,1) both;
}
html:active-view-transition-type(ol-retour)::view-transition-new(root){
animation:olBackNew .58s cubic-bezier(.16,1,.3,1) both;
}
@keyframes olDetailOld{to{opacity:.16;transform:scale(.972);filter:blur(5px) brightness(.72)}}
@keyframes olDetailNew{from{opacity:0;transform:scale(1.026);clip-path:inset(0 0 100% 0);filter:brightness(.76)}to{opacity:1;transform:none;clip-path:inset(0);filter:none}}
@keyframes olSectionOld{to{opacity:.12;transform:translate3d(-2.2vw,0,0);filter:blur(4px)}}
@keyframes olSectionNew{from{opacity:0;transform:translate3d(2.8vw,0,0);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes olBackOld{to{opacity:.10;transform:translate3d(2vw,0,0) scale(1.01);filter:blur(4px)}}
@keyframes olBackNew{from{opacity:0;transform:translate3d(-2.4vw,0,0) scale(.99);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
}
@media (max-width:900px){
body[data-page="about"] .folco{
padding:82px 22px 104px;
}
body[data-page="about"] .folco-grid{
grid-template-columns:minmax(0,1fr);
gap:52px;
}
body[data-page="about"] .folco-grid>div:first-child{
width:min(100%,620px);
margin-inline:auto;
}
body[data-page="about"] .folco-portrait{
height:min(72svh,720px) !important;
min-height:480px !important;
}
body[data-page="about"] .folco-text{
max-width:720px;
margin-inline:auto;
}
body[data-page="inauguration-dubai"] .dxb-monument{
right:-8vw;
width:min(70vw,600px);
opacity:.42;
}
body[data-page="inauguration-dubai"] .dxb-h1,
body[data-page="inauguration-dubai"] .dxb-sub,
body[data-page="inauguration-dubai"] .dxb-date{
max-width:88vw;
}
body[data-page] .ol-lightfield{
width:58vw;
opacity:.24;
}
}
@media (max-width:1180px){
/* Le menu reste entièrement atteignable sur téléphone et en paysage,
même lorsque sa hauteur utile est inférieure à la somme des rubriques. */
body[data-page] .nav{
box-sizing:border-box;
justify-content:flex-start;
gap:12px;
overflow-y:auto;
overscroll-behavior:contain;
padding:max(92px,calc(env(safe-area-inset-top) + 72px)) 24px
max(38px,calc(env(safe-area-inset-bottom) + 24px));
}
body[data-page] .nav .nl{line-height:1.05}
}
@media (max-width:560px){
body[data-page="about"] .folco-portrait{
min-height:430px !important;
height:62svh !important;
}
body[data-page="about"] .folco-plaque{
bottom:74px;
padding:15px 16px;
}
body[data-page="about"] .folco-name{
font-size:clamp(54px,19vw,84px);
}
body[data-page="inauguration-dubai"] .dxb-monument{
top:38%;
right:-20vw;
width:92vw;
opacity:.30;
}
}
@media (prefers-reduced-motion:reduce){
body[data-page] .ol-lightfield{display:none;}
::view-transition-old(root),::view-transition-new(root){animation:none;}
}