@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   CARAVELLI OLYMPE — ÉCLAT V923.2
   Étalonnage lumière. Feuille d'harmonisation, chargée EN DERNIER.

   Le site a été repris couche par couche : chaque main a ajouté sa lumière.
   Relevé à 1440 px sur les douze pages, on trouve la même intention rendue
   de six façons différentes — 86 filtres littéraux pour quatre étalonnages
   nommés, 94 ombres pour trois profondeurs utiles, le bronze à 29 opacités,
   et jusqu'à neuf décors lumineux permanents empilés sur une seule page.

   Cette feuille n'ajoute rien. Elle RETRANCHE, puis rattache ce qui reste
   à un jeu de jetons unique. Une valeur changée ici se propage au site.

   PÉRIMÈTRE — on ne touche QUE la lumière : opacités, filtres, ombres,
   voiles, mélanges, grain. Aucune police, aucun corps, aucun interlettrage :
   le plancher typographique est le travail d'une autre main.
   luxury-branch/ (bordeaux et or) est hors périmètre et n'est jamais visé.

   ══════════════════════════════════════════════════════════════════════════
   SOMMAIRE
   0. Les jetons
   1. Les décors lumineux permanents — on en éteint quatre sur huit
   2. Le grain — une seule valeur
   3. L'étalonnage des médias — quatre grades nommés, plus de littéraux
   4. Les voiles de héros — un seuil de contraste, pas un goût
   5. Les ombres — posée, flottante, suspendue
   6. Les filets bronze — deux valeurs
   7. Les halos de survol — une seule dose
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   0. LES JETONS
   Huit valeurs. Tout le reste y fait référence. C'est la seule façon
   d'obtenir de la constance : le luxe se lit là, pas dans l'accumulation.
   ══════════════════════════════════════════════════════════════════════════ */

:root{

  /* — Voile de héros —————————————————————————————————————————————————
     Un voile de héros n'est pas une humeur, c'est une garantie de lecture :
     4,5:1 sur le texte courant, 3:1 sur le grand titre. Le relevé montrait
     des voiles de .18 à .88 — donc des héros à 15:1 (trois fois trop sombres,
     la photo est noyée) et un héros à 3,4:1 (illisible). Une seule recette,
     trois doses de la même famille selon la clarté du média dessous. */
  --eclat-voile-hero:      .78;   /* flanc d'attaque, côté texte  */
  --eclat-voile-hero-creux:.30;   /* respiration centrale : la photo existe */
  --eclat-voile-hero-pied: .66;   /* assise basse, longue et douce */
  --eclat-voile-teinte:    2,11,24;  /* bleu nuit dégradé — jamais du noir pur */

  /* — Ombres ————————————————————————————————————————————————————————
     Trois profondeurs, et rien d'autre. Charte : profondes et basses.
     Décalage vertical franc, diffusion longue, étalement négatif pour que
     l'ombre reste SOUS l'objet au lieu de l'auréoler. Jamais de halo gris. */
  --eclat-ombre-posee:     0 1px 2px oklch(.2161 calc(var(--ol-c-body)*.637) var(--ol-h) / .05),
                           0 10px 26px -14px oklch(.2161 calc(var(--ol-c-body)*.637) var(--ol-h) / .30);
  --eclat-ombre-flottante: 0 4px 10px -6px oklch(.1422 calc(var(--ol-c-body)*.35) var(--ol-h) / .28),
                           0 26px 64px -30px oklch(.1422 calc(var(--ol-c-body)*.35) var(--ol-h) / .52);
  --eclat-ombre-suspendue: 0 8px 20px -12px rgba(0,0,0,.34),
                           0 62px 140px -62px rgba(0,0,0,.80);

  /* — Filets bronze ——————————————————————————————————————————————————
     rgba(201,174,124,…) traînait à .06 .08 .09 .10 .11 .12 .13 .15 .16 .17
     .18 .20 .22 .26 .28 .30 .32 .34 .35 .40 .50 .52 .60 .90 et 1.0.
     Deux suffisent : un filet qu'on devine, un filet qu'on lit.
     Charte : « filets d'un cheveu », jamais une bordure franche. */
  --eclat-filet:      oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .20);
  --eclat-filet-fort: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .52);

  /* — Grain ——————————————————————————————————————————————————————————
     Le grain n'est pas un effet : c'est le dither qui empêche le dégradé
     bleu nuit de montrer ses marches en 8 bits. Une seule valeur. */
  --eclat-grain: .026;

  /* — Halo de survol ————————————————————————————————————————————————
     Une dose unique. Un objet survolé se soulève et s'ourle de bronze ;
     il ne s'allume pas. */
  --eclat-halo: 0 0 0 1px var(--eclat-filet),
                0 26px 64px -30px oklch(.1422 calc(var(--ol-c-body)*.35) var(--ol-h) / .52),
                0 0 46px -18px oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .30);
}


/* ══════════════════════════════════════════════════════════════════════════
   1. LES DÉCORS LUMINEUX PERMANENTS
   ──────────────────────────────────────────────────────────────────────────
   RELEVÉ (1440 px, couches réellement peintes, opacité calculée) :

     index               8  lightfield .20 · hc-lumiere .58 · grain .026
                            · cv90-ambient .72 · ol-atmosphere .70
                            · oc-scrim 1 · ol-fumee .94 · canvas WebGL .96
     about               7  · portfolio 7 · pensee 7 · savoir-faire 7
     contact             7  · chantiers-prives 7 · dubai-bureaux 7
     services            7  · fondation 7 · projets/tuscany 7
     inauguration-dubai  9  (+ #ol-atmosphere-dubai + canvas)

   Le désaccord n'est pas seulement entre les pages : il est DANS chaque page.
   Quatre doublons structurels, présents partout :

     · deux balayages de lumière au défilement  — .ol-lightfield + .hc-lumiere
     · deux lueurs qui suivent le curseur       — .cv90-ambient + .hc-led
     · deux lavis plein écran opposés           — #ol-atmosphere + .oc-scrim
     · deux systèmes de fumée sur le même héros — .ol-fumee + canvas WebGL

   On garde à chaque fois celui qui coûte le moins et qui sert le mieux.
   Résultat : 8→4 sur l'accueil, 7→4 partout, 9→5 sur Dubaï.
   ══════════════════════════════════════════════════════════════════════════ */

/* — 1.1 Un seul balayage de lumière ————————————————————————————————————
   .ol-lightfield et .hc-lumiere font exactement la même chose : une lame
   claire en mélange « screen » qui traverse la page au défilement. Deux
   râteaux superposés ne donnent pas deux fois plus de lumière, ils donnent
   une lumière sale — les deux gradients se croisent et le rai perd son bord.
   On garde .hc-lumiere : elle suit le vrai progrès de défilement et porte
   déjà le champagne de la charte. .ol-lightfield s'éteint. */
body[data-page] .ol-lightfield{ display:none; }

/* .hc-lumiere passait de .58 (repos) à .25 (bas de page) sans raison lisible.
   Une dose unique, calée sur le halo : présente, jamais un projecteur. */
body[data-page].hc-prete .hc-lumiere{ opacity:.30; }

/* — 1.2 Une seule lueur au curseur ——————————————————————————————————————
   .cv90-ambient est posée à z-index 4, DEVANT le contenu, à .72 d'opacité en
   mélange normal, et son ::before se repeint à chaque mouvement de souris
   (--cv90-pointer-x/y). C'est la couche la plus chère du site, et elle fait
   double emploi avec .hc-led, qui est la même idée à z-index 3 en
   « plus-lighter », plus chaude, et qui ne s'allume qu'au survol.
   Son ::after (une trame à rgba(255,255,255,.018)) est sous le seuil de
   perception : il coûte une passe de composition pour rien.
   On éteint .cv90-ambient, on garde .hc-led. */
body[data-page] .cv90-ambient{ display:none; }

/* — 1.3 Un seul lavis plein écran ———————————————————————————————————————
   #ol-atmosphere (z-1, « screen », .70, dérive animée de 32 s) et .oc-scrim
   (z-3, statique) se contredisent : le premier RELÈVE les noirs par le haut,
   le second les REPOSE par les bords. Empilés, ils s'annulent au centre et
   laissent une frange laiteuse en haut d'écran — c'est ce qui faisait
   remonter le fond des héros de rgb(4,26,51) à rgb(13,26,40).
   .oc-scrim est statique et travaille POUR la lecture : on le garde.
   #ol-atmosphere s'éteint — et le contraste des titres y gagne. */
body[data-page] #ol-atmosphere{ display:none; }

/* Dubaï cumulait un second champ atmosphérique par-dessus le premier.
   Le canvas du héros suffit à porter l'air de la page. */
body[data-page="inauguration-dubai"] #ol-atmosphere-dubai{ display:none; }

/* — 1.4 Un seul système de fumée sur l'accueil ————————————————————————————
   Le héros d'accueil porte DEUX fumées superposées : le canvas WebGL
   #oc-intro-smoke (.96, « screen ») et la fumée CSS .ol-fumee — huit couches
   dont quatre masses animées en blur(46px) plein écran, plus un rai, plus un
   plan proche en soft-light. Quatre flous gaussiens de 46 px recalculés à
   chaque image sur toute la fenêtre : c'est, de loin, la dépense la plus
   lourde du site, et elle est invisible sous le canvas qui la recouvre.
   On éteint les couches animées et on GARDE la vignette : elle ne s'anime
   pas, elle assombrit les bords et c'est elle qui tient le titre. */
body[data-page="index"] .ol-fumee-lointain,
body[data-page="index"] .ol-fumee-masse,
body[data-page="index"] .ol-fumee-proche,
body[data-page="index"] .ol-fumee-rai,
body[data-page="index"] .ol-fumee-grain{ display:none; }

/* La vignette reprend à son compte la densité que les masses apportaient,
   pour que le héros ne s'éclaircisse pas d'un cheveu. */
body[data-page="index"] .ol-fumee{ opacity:1; }

/* — 1.5 Ce qui reste —————————————————————————————————————————————————————
   .oc-scrim (statique) · .hc-fumee ou le canvas (une fumée par page)
   · .hc-lumiere (un balayage) · .oc-grain (le dither) · .hc-led (au curseur)
   · .hc-vent (bourrasque, opacité 0 au repos).
   .hc-vent gardait une promotion de couche permanente pour une animation
   qui ne joue qu'au passage : on la rend au navigateur quand elle dort. */
body[data-page] .hc-vent{ will-change:auto; }
body[data-page].hc-vent-actif .hc-vent{ will-change:transform,opacity; }


/* ══════════════════════════════════════════════════════════════════════════
   2. LE GRAIN — une seule valeur
   ──────────────────────────────────────────────────────────────────────────
   Relevé : .oc-grain à .026, .ol-fumee-grain à .022 puis .017 selon la
   feuille, et le ::after de .dxb-hero détourné en grain à .07 — soit près de
   trois fois la dose du reste du site sur la seule page dubai-bureaux.
   Un seul grain, une seule dose, à l'échelle du document.
   ══════════════════════════════════════════════════════════════════════════ */

body[data-page] .oc-grain{
  opacity: var(--eclat-grain);
  mix-blend-mode: soft-light;   /* le grain module, il ne dépose pas de gris */
}

/* Les grains locaux font double emploi avec le grain de document, qui couvre
   déjà toute la fenêtre. Deux trames superposées ne dithèrent pas mieux :
   elles moirent. */
body[data-page="dubai-bureaux"] .dxb-hero::after{ opacity: var(--eclat-grain); }


/* ══════════════════════════════════════════════════════════════════════════
   3. L'ÉTALONNAGE DES MÉDIAS
   ──────────────────────────────────────────────────────────────────────────
   Le site déclare quatre étalonnages nommés — --olympe-grade-media, -stone,
   -air, -3d — puis 86 règles posent un filter: littéral qui les contredit :
   saturate(.88) contrast(1.08) brightness(.94) sepia(.025), et 78 variantes
   qui ne diffèrent que d'un centième. Personne ne voit un centième de
   saturation ; tout le monde voit qu'une photo n'a pas la même couleur d'une
   page à l'autre.

   Pire : les grades se MULTIPLIENT. `.hero-vid video` est étalonné, et son
   parent `.hero-vid` l'est aussi — brightness(.66) sous brightness(.52), soit
   .34 réel. C'est ce double étalonnage qui rendait les héros incomparables.

   Règle : le grade se pose sur la FEUILLE (l'img, la video), une fois.
   Le conteneur ne grade plus — il ne fait que porter.
   ══════════════════════════════════════════════════════════════════════════ */

/* — 3.1 Le conteneur ne grade plus ————————————————————————————————————————
   Ces règles empilaient un second étalonnage sur toute la boîte du héros,
   médias ET habillage compris. On le retire : la densité du héros est
   désormais l'affaire du voile (§4), qui est mesurable, pas d'un filtre
   qui s'ignore lui-même. */
body[data-page] .ph-bg,
body[data-page] .ph-full-bg,
body[data-page] .hero-vid,
body[data-page] [data-fumee-v923] > :is(.ph-bg,.ph-full-bg){ filter:none; }

/* — 3.2 GRADE MEDIA — la matière courante : projets, vignettes, portraits.
   La photographie du site, celle qu'on regarde de près. */
body[data-page] :is(
  .proj-iw img, .pj-iw img, .pj-card img, .pj-hero-img img,
  .dxb-ph img, .dub-hero img, .dxb-media img,
  .sc-live-fig img, .sc-live-fig video,
  .folco-portrait img, .folco-video, .folco-silhouette,
  .cf-img img, .ba img, a.rv img,
  .merci-bg img, .legacy-media img, .legacy-media video,
  .cp-media img, .cp-media video, .lux-matiere img
){ filter: var(--olympe-grade-media); }

/* — 3.3 GRADE STONE — la pierre, le plâtre, le marbre : matières minérales.
   Un rien plus chaud et plus contrasté : la pierre a du grain, pas du gris. */
body[data-page] :is(
  .olympe-matter-strip img,
  .oc-portale-sculpture,
  .hc-sculpture img
){ filter: var(--olympe-grade-stone); }

/* — 3.4 GRADE AIR — les fonds de héros et les plans larges.
   Plus froid, désaturé : c'est de l'air, pas un sujet. */
body[data-page] :is(
  .hero-vid video, .hero-vid > video, #hero-vid,
  .ph-bg img, .ph-full-bg img,
  .dxb-hero-bg img, .dxb-hero video,
  .cine-bg, .pensee-video, .pensee-cine video,
  .event-film video
){ filter: var(--olympe-grade-air); }

/* — 3.5 GRADE 3D — RETIRÉ, ET C'EST UNE CORRECTION —————————————————————————
   Cette règle posait `var(--olympe-grade-3d)` sur les quatre surfaces de
   synthèse — #oc-marble, #oc-intro-smoke, .oc-smoke, .oc-frag-host — au nom
   de l'harmonisation. C'était une erreur, et elle se voyait.

   Contrairement aux photographies, ces quatre surfaces ne partagent aucune
   matière : chacune portait dans la feuille livrée un réglage pensé pour
   elle, et le grade unique les écrasait tous les quatre :

     .oc-frag-host        brightness(.82) contrast(1.12) saturate(.66)
     html.lux #oc-marble  contrast(1.1) saturate(.86) brightness(.78)
     #oc-intro-smoke      contrast(1.12) saturate(.74)
     .oc-smoke            blur(34px)  ← un FLOU, pas un étalonnage

   Le fragment de Carrare en est l'exemple le plus net : réglé à .82 de
   luminosité et .66 de saturation, c'est un bloc de marbre sombre derrière
   le titre. Repassé à .955 et .90 par le grade, il devenait un aplat blanc
   qui montait par-dessus « Un fragment de Carrare » et le rendait
   illisible. Et sur `.oc-smoke`, remplacer un `blur(34px)` par une
   colorimétrie supprimait purement le flou.

   Une image de synthèse n'est pas une photographie à ramener dans une
   palette : c'est un rendu dont le réglage fait partie du rendu. On laisse
   donc chacune des quatre à son étalonnage d'origine. La variable
   `--olympe-grade-3d` reste déclarée par le site, simplement plus employée
   ici — NE PAS réintroduire de règle groupée sur ces sélecteurs. */

/* — 3.6 Le survol relève, il ne réétalonne pas ————————————————————————————
   Onze variantes de « grade au survol » traînaient dans les feuilles. Un
   survol ne change pas la colorimétrie d'une image : il l'ouvre d'un cran.
   Une seule dose, exprimée en plus du grade, pour toutes les familles. */
body[data-page] :is(
  .proj-iw, .proj-sl, .pj-card, .dxb-ph, .sc-live-fig, .fig,
  .olympe-matter-strip figure, .legacy-film, .cp-card, a.rv,
  .lux-matiere figure
):hover :is(img,video){
  filter: var(--olympe-grade-media) brightness(1.06) saturate(1.04);
}

/* Les partis pris volontaires restent : un noir et blanc assumé n'est pas un
   étalonnage qui a dérivé, c'est une intention. On les laisse — mais on les
   rattache au grade pour qu'ils vieillissent avec le reste du site. */
body[data-page="about"] .folco-video,
body[data-page] .legacy-media video{
  filter: var(--olympe-grade-media) grayscale(1);
}


/* ══════════════════════════════════════════════════════════════════════════
   4. LES VOILES DE HÉROS
   ──────────────────────────────────────────────────────────────────────────
   MESURE AVANT (1440 px, pixel réellement peint sous le texte : image
   décodée + filtres appliqués + voiles + décors composés, pas la couleur
   déclarée) — contraste titre / texte courant :

     index 15,1 / 9,2    about 14,7 / 11,0   portfolio 15,3 / 11,4
     pensee 10,0 / 8,4   savoir-faire 15,0 / 11,1   contact 15,5 / 11,3
     chantiers 9,2 / 8,9 inauguration-dubai 12,9 / 7,4
     services 15,5 / 11,5  fondation 14,8 / 9,0   tuscany 15,8 / 11,8
     dubai-bureaux  2,8–4,6 / 3,4     ← ÉCHEC

   Deux constats opposés :
   · onze héros sont à 15:1 là où 4,5:1 est requis. Le voile ne protège plus
     la lecture, il efface la photographie qu'on a payée.
   · un héros passe sous le seuil. Sur dubai-bureaux, la règle qui posait le
     voile (.dxb-hero::after) a été écrasée par une reprise ultérieure qui
     l'a remplacée par une trame de grain à .07 ; et le ::before y ajoute un
     rai clair à .42 qui ÉCLAIRE le fond sous le titre. Le titre blanc tombe
     donc sur un sable à rgb(163,137,107) : 3,4:1. C'est le seul vrai défaut
     de lisibilité du site, et il était invisible dans les feuilles.

   RÈGLE RETENUE — un voile de héros est une garantie, pas un goût :
   flanc dense côté texte, creux central où la photo respire, assise basse.
   Une seule recette, pilotée par --eclat-voile-hero.
   ══════════════════════════════════════════════════════════════════════════ */

/* — 4.1 La recette unique ————————————————————————————————————————————————
   Deux passes : un dégradé latéral (le texte est à gauche, la photo au
   centre) et une assise verticale longue. Bleu nuit, jamais du noir : la
   charte interdit la bordure franche comme le gris mort. */
body[data-page] :is(
  .hero-veil, .ph-full-veil, .pensee-cine-veil, .cine-veil,
  .dxb-hero-veil, .event-film-veil
){
  background:
    linear-gradient(90deg,
      rgba(var(--eclat-voile-teinte), var(--eclat-voile-hero)) 0%,
      rgba(var(--eclat-voile-teinte), var(--eclat-voile-hero-creux)) 52%,
      rgba(var(--eclat-voile-teinte), calc(var(--eclat-voile-hero) * .82)) 100%),
    linear-gradient(0deg,
      rgba(var(--eclat-voile-teinte), var(--eclat-voile-hero-pied)) 0%,
      rgba(var(--eclat-voile-teinte), 0) 62%);
}

/* Les héros `.ph` posent leur voile en ::after. Même recette, même jeton :
   c'est tout l'objet de l'exercice.
   !important — la règle d'origine en use sur ce sélecteur (inset et
   dimensions y sont forcés) ; on reste au même niveau d'insistance. */
body[data-page] .ph::after,
body[data-page] .ph-full::after{
  background-image:
    linear-gradient(90deg,
      rgba(var(--eclat-voile-teinte), var(--eclat-voile-hero)) 0%,
      rgba(var(--eclat-voile-teinte), var(--eclat-voile-hero-creux)) 52%,
      rgba(var(--eclat-voile-teinte), calc(var(--eclat-voile-hero) * .82)) 100%),
    linear-gradient(0deg,
      rgba(var(--eclat-voile-teinte), var(--eclat-voile-hero-pied)) 0%,
      rgba(var(--eclat-voile-teinte), 0) 62%) !important;
}

/* — 4.2 dubai-bureaux : le voile manquant ————————————————————————————————
   On rend au héros le voile qu'une reprise lui avait pris. Le ::after était
   devenu du grain (traité au §2) ; on remet la garantie de lecture sur le
   ::before, qui portait jusqu'ici un rai clair travaillant contre le texte. */
body[data-page="dubai-bureaux"] .dxb-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  /* Ce rai était animé en boucle (opacité pilotée par keyframes) et flouté à
     5 px. Une animation l'emporte sur une déclaration d'auteur : on coupe
     l'animation plutôt que d'insister avec !important. */
  animation:none;
  filter:none;
  opacity:1;
  background:
    linear-gradient(90deg,
      rgba(var(--eclat-voile-teinte), var(--eclat-voile-hero)) 0%,
      rgba(var(--eclat-voile-teinte), var(--eclat-voile-hero-creux)) 58%,
      rgba(var(--eclat-voile-teinte), calc(var(--eclat-voile-hero) * .82)) 100%),
    linear-gradient(0deg,
      rgba(var(--eclat-voile-teinte), var(--eclat-voile-hero-pied)) 0%,
      rgba(var(--eclat-voile-teinte), 0) 62%);
}
/* Le contenu du héros repasse devant son propre voile. */
body[data-page="dubai-bureaux"] .dxb-hero > :is(.container,.dxb-hero-in){
  position:relative;
  z-index:2;
}

/* — 4.3 Le lavis de bas de page ——————————————————————————————————————————
   .oc-scrim est le seul lavis conservé (§1.3). Il tenait deux rôles à la
   fois : assombrir les bords ET éclaircir le haut par un radial clair qui
   luttait contre les titres. On lui laisse l'assise, on lui retire la lueur. */
body[data-page] .oc-scrim{
  background:
    linear-gradient(180deg,
      rgba(var(--eclat-voile-teinte),.30),
      rgba(var(--eclat-voile-teinte),.04) 34%,
      rgba(var(--eclat-voile-teinte),.28) 100%);
}


/* ══════════════════════════════════════════════════════════════════════════
   5. LES OMBRES — trois profondeurs
   ──────────────────────────────────────────────────────────────────────────
   Relevé : 94 règles, 105 valeurs distinctes, de 0 12px 32px rgba(6,16,28,.1)
   à 0 70px 160px -60px rgba(0,0,0,.9). Entre les deux, tous les intermédiaires
   possibles — la profondeur ne voulait donc plus rien dire.

   Trois hauteurs suffisent à raconter un plan :
     POSÉE      l'objet touche la page   — champs, boutons, petits blocs
     FLOTTANTE  l'objet est décollé      — cartes, médias encadrés, panneaux
     SUSPENDUE  l'objet est au-dessus    — grands médias, modales, cinéma
   ══════════════════════════════════════════════════════════════════════════ */

/* — 5.1 Posée ————————————————————————————————————————————————————————————— */
body[data-page] :is(
  .btn, .btn-l, .btn-n, .btn-o, .ncta, .lb,
  .est-opt, .est-res, .dxb-fact, .dxb-rsvp,
  input, textarea, select
){ box-shadow: var(--eclat-ombre-posee); }

/* — 5.2 Flottante ————————————————————————————————————————————————————————— */
body[data-page] :is(
  .dbloc, .sf-item, .int-block, .est, .regards-item, .fig,
  .folco-plaque, .cine-frame, .proj-iw, .pj-card, .pj-iw,
  .dxb-ph, .dxb-media, .sc-live-fig, .cp-media, .event-sheet,
  .dubai-band, .property-card, .destination-card
){ box-shadow: var(--eclat-ombre-flottante); }

/* — 5.3 Suspendue ————————————————————————————————————————————————————————— */
body[data-page] :is(
  .legacy-media, .lux-matiere figure, .folco-portrait,
  .pensee-cine .pensee-video, .pensee-cine video,
  .contact-form, .oc-consent, .hc-consent, .clb-home-portal,
  .cp-article > .cp-media, .ai-pn
){ box-shadow: var(--eclat-ombre-suspendue); }

/* — 5.4 Ce qui ne porte pas d'ombre —————————————————————————————————————
   L'en-tête flotte au-dessus de la page sans jamais s'en détacher : une
   ombre y trahirait une barre. Elle reste plate. */
body[data-page] .hd{ box-shadow:none; }


/* ══════════════════════════════════════════════════════════════════════════
   6. LES FILETS BRONZE — deux valeurs
   ──────────────────────────────────────────────────────────────────────────
   Le bronze #C9AE7C apparaissait à 29 opacités différentes. Un filet est
   soit un détail qu'on devine, soit un trait qu'on lit. Il n'y a pas de
   troisième cas. Charte : un cheveu, jamais une bordure franche.
   ══════════════════════════════════════════════════════════════════════════ */

/* — 6.1 Filet discret : séparations, ourlets, cadres au repos ——————————— */
body[data-page] :is(
  .fig, .dbloc, .sf-item, .int-block, .est, .regards-item,
  .cine-frame, .dxb-fact, .folco-plaque, .est-opt, .est-res
){ border-color: var(--eclat-filet); }

body[data-page] :is(hr, .sec + .sec::before){
  background: linear-gradient(90deg,
    transparent,
    var(--eclat-filet) 22%,
    var(--eclat-filet-fort) 50%,
    var(--eclat-filet) 78%,
    transparent);
}

/* — 6.2 Filet accentué : ce qui appelle le geste ——————————————————————— */
body[data-page] :is(.ncta, .btn-o, .lb):is(:hover, :focus-visible),
body[data-page] :is(input, textarea, select):focus,
body[data-page] :is(input, textarea, select):focus-visible{
  border-color: var(--eclat-filet-fort);
}

/* La cerne de focus était à .12 sur trois épaisseurs différentes : sous le
   seuil visible, donc inutilisable au clavier. Une seule cerne, lisible. */
body[data-page] :is(input, textarea, select):focus-visible{
  box-shadow: var(--eclat-ombre-posee),
              0 0 0 3px oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .28);
  outline: none;
}

/* Les jauges de progression : un trait de bronze, à la dose accentuée. */
body[data-page] :is(#pb, #cv-progress, .cv90-progress__fill){
  box-shadow: 0 0 14px -2px var(--eclat-filet-fort);
}


/* ══════════════════════════════════════════════════════════════════════════
   7. LES HALOS DE SURVOL — une seule dose
   ──────────────────────────────────────────────────────────────────────────
   Le survol se disait de onze manières : 0 8px 40px rgba(6,16,28,.13),
   0 48px 120px rgba(4,26,51,.25), 0 0 26px …, 0 60px 130px -50px …
   Un objet survolé fait UNE chose : il monte d'un cran et s'ourle de bronze.
   ══════════════════════════════════════════════════════════════════════════ */

body[data-page] :is(
  .btn, .btn-l, .btn-n, .btn-o, .ncta,
  .fig, .dbloc, .sf-item, .int-block, .est, .regards-item,
  .est-opt, .dxb-fact, .dxb-ph, .sc-live-fig, .proj-iw,
  .pj-card, .event-sheet, .cp-card, .property-card, .destination-card,
  .cv912-countdown-compact, #inv-med
):is(:hover, :focus-visible){
  box-shadow: var(--eclat-halo);
}

/* Les grands médias suspendus gardent leur hauteur au survol : ils sont déjà
   au-dessus de la page, les relever encore casserait l'échelle. Ils reçoivent
   l'ourlet bronze, pas la montée. */
body[data-page] :is(
  .legacy-media, .lux-matiere figure, .folco-portrait, .cp-article > .cp-media
):hover{
  box-shadow: var(--eclat-ombre-suspendue),
              0 0 0 1px var(--eclat-filet);
}


/* ══════════════════════════════════════════════════════════════════════════
   8. ÉCONOMIE ET ACCESSIBILITÉ
   Les décors éteints le restent ; ceux qu'on garde savent se taire.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){
  /* !important — la règle d'origine en use sur .hc-lumiere ; on s'aligne. */
  body[data-page] .hc-lumiere{ opacity:.18 !important; }
  body[data-page] .hc-led,
  body[data-page] .hc-vent{ display:none; }
}

/* Le mode économie du site : il ne reste que ce qui sert la lecture —
   le lavis d'assise et le grain qui empêche les bandes. */
html.oc-eco body[data-page] :is(.hc-lumiere, .hc-led, .hc-vent, .hc-fumee){
  display:none;
}


/* ══════════════════════════════════════════════════════════════════════════
   8. LE FILET DE TÊTE — la dernière teinte hors palette

   Relevé : `html::before` pose un filet fixe de 2 px en haut de CHAQUE page,
   en `z-index:10000`, donc au-dessus de tout. Sa teinte médiane est un
   turquoise `rgb(152,213,211)` — une couleur qui n'appartient à aucun des
   jetons de la Maison. C'est le seul reste visible d'une palette antérieure ;
   il signait discrètement les 51 pages d'un accent qui n'est pas le nôtre.

   On garde le filet — il tient lieu de liseré de tête et donne son assise à
   la barre de navigation — mais on le ramène au bronze et au platine.
   La mécanique d'origine (dégradé sur 60 % de la largeur, sans répétition)
   est conservée à l'identique : seules les teintes changent.
   ══════════════════════════════════════════════════════════════════════════ */

html::before{
  background:
    linear-gradient(90deg,
      transparent 0%,
      oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .55) 14%,
      oklch(.9046 calc(var(--ol-c-body)*.11) var(--ol-h) / .78) 32%,
      oklch(.9393 calc(var(--ol-c-pat)*.289) var(--ol-h-pat) / .92) 48%,
      oklch(.9046 calc(var(--ol-c-body)*.11) var(--ol-h) / .78) 64%,
      oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .55) 80%,
      transparent 94%) no-repeat,
    linear-gradient(90deg, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .12), oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .12));
  background-size: 60% 100%;
}

/* Au repos — même règle que le système, teintes corrigées. */
@media (prefers-reduced-motion: reduce){
  html::before{
    animation: none;
    background: linear-gradient(90deg,
      oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .20),
      oklch(.9046 calc(var(--ol-c-body)*.11) var(--ol-h) / .34),
      oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .20));
    background-size: 100% 100%;
    background-position: 0 0;
  }
}