/* ════════════════════════════════════════════════════════════════════
   OREOL RESOURCES — système typographique et de mise en page.
   Principe directeur : le luxe naît du CONTRASTE, pas de l'ornement.
   Sept niveaux, avec des écarts francs, et un niveau micro en capitales
   très espacées qui sert de contrepoint aux grandes tailles.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --obs:#14131A; --obs2:#0E0D13; --obs3:#1C1B24;
  --gold:#D4AF37; --golds:#9A7B1F; --lgold:#E8D7A1; --gold-pale:#F3E6BE;
  --cream:#F4F1EA; --grey:#8D8A97; --grey2:#635F6E;
  --line:rgba(212,175,55,.16); --line2:rgba(255,255,255,.07);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Outfit','Segoe UI',Helvetica,Arial,sans-serif;
  --nav:78px;

  /* échelle : rapport ~1,45 entre chaque niveau */
  --fs-display:clamp(3.1rem,8.6vw,7.4rem);
  --fs-h1:clamp(2.3rem,5.4vw,4.4rem);
  --fs-h2:clamp(1.75rem,3.6vw,3rem);
  --fs-h3:clamp(1.22rem,1.9vw,1.62rem);
  --fs-lead:clamp(1.04rem,1.35vw,1.24rem);
  --fs-body:1rem;
  --fs-micro:.6rem;

  --mes-large:1240px;   /* mesures : trois largeurs, pour créer du rythme */
  --mes-moyen:940px;
  --mes-etroit:660px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--obs2);color:var(--cream);font-family:var(--sans);
  font-size:var(--fs-body);line-height:1.72;font-weight:300;letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}

/* ── Titres : le serif porte tout le caractère ── */
h1,h2,h3{font-family:var(--serif);margin:0;font-optical-sizing:auto}
h1{font-size:var(--fs-h1);line-height:1.03;font-weight:400;letter-spacing:-.028em;
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0}
h2{font-size:var(--fs-h2);line-height:1.09;font-weight:400;letter-spacing:-.022em;
  font-variation-settings:'opsz' 110,'SOFT' 0,'WONK' 0}
h3{font-size:var(--fs-h3);line-height:1.28;font-weight:500;letter-spacing:-.012em;
  font-variation-settings:'opsz' 48,'SOFT' 0,'WONK' 0}
.display{font-family:var(--serif);font-weight:400;font-size:var(--fs-display);
  line-height:.95;letter-spacing:-.038em;margin:0;font-optical-sizing:auto;
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0}
p{margin:0 0 1.15rem}

/* ── Niveau micro : capitales étroites, très espacées ── */
.eyebrow,.kicker,.snum,.stat small,.spec dt,.leader__role,.tag,.fwrap h2,.qlegend{
  font-family:var(--sans);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.38em;text-transform:uppercase;line-height:1.6}
.kicker{color:var(--grey);margin:0 0 2.4rem}
.home-hero .kicker{margin:0 auto 2.4rem}
.snum{color:var(--grey2);letter-spacing:.36em;margin:0}

/* ── Accroche : plus grande, plus claire, mesure courte ── */
.lead{font-size:var(--fs-lead);line-height:1.74;color:var(--grey);
  max-width:52ch;font-weight:300;letter-spacing:-.006em}
.lead b{color:var(--lgold);font-weight:400}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#14141C;
  padding:.7rem 1.2rem;border-radius:0 0 8px 0;font-size:.85rem;text-decoration:none}
.skip:focus{left:0}

/* ════════════════════════ NAVIGATION ════════════════════════ */
nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav);display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(1.4rem,5vw,3.4rem);
  background:rgba(14,13,19,.9);border-bottom:1px solid transparent;transition:border-color .5s}
nav.scrolled{border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.brand img{width:36px;height:36px}
.brand span{font-family:var(--serif);letter-spacing:.26em;font-size:1rem;font-weight:500;
  font-variation-settings:'opsz' 24,'SOFT' 0,'WONK' 0}
.brand em{color:var(--gold);font-style:normal}
.navlinks{display:flex;align-items:center;gap:2.1rem;list-style:none;margin:0;padding:0}
.navlinks a{text-decoration:none;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  color:var(--cream);opacity:.7;padding:.4rem 0;border-bottom:1px solid transparent;transition:.35s}
.navlinks a:hover,.navlinks a[aria-current="page"]{opacity:1;border-bottom-color:var(--gold)}
.lang{display:flex;gap:.4rem;align-items:center;font-size:.7rem;letter-spacing:.14em;
  border:1px solid var(--line);border-radius:999px;padding:.3rem .78rem}
.lang a{text-decoration:none;opacity:.5}
.lang a[aria-current="true"]{opacity:1;color:var(--gold);font-weight:600}
.burger{display:none;background:none;border:0;color:var(--cream);font-size:1.45rem;cursor:pointer;padding:.2rem .4rem}
@media(max-width:980px){
  .burger{display:block}
  .navlinks{position:fixed;inset:var(--nav) 0 auto;flex-direction:column;align-items:flex-start;
    gap:0;background:rgba(10,9,14,.99);padding:1rem clamp(1.4rem,5vw,3.4rem) 1.8rem;
    border-bottom:1px solid var(--line);transform:translateY(-135%);
    transition:transform .42s cubic-bezier(.2,.7,.2,1)}
  .navlinks.open{transform:translateY(0)}
  .navlinks li{width:100%;border-bottom:1px solid var(--line2)}
  .navlinks a{display:block;padding:1.05rem 0;font-size:.9rem;letter-spacing:.16em}
}

/* ════════════════════════ RYTHME DES SECTIONS ════════════════════════
   Trois mesures alternées plutôt qu'une largeur unique : c'est ce qui
   distingue une mise en page composée d'un empilement de blocs. */
main{padding-top:var(--nav)}
section{padding:clamp(6.5rem,13vw,13rem) clamp(1.6rem,6vw,4.5rem);
  max-width:var(--mes-large);margin:0 auto}
section.etroit{max-width:var(--mes-etroit)}
section.moyen{max-width:var(--mes-moyen)}
section.serre{padding-top:clamp(2rem,4vw,3.6rem)}
.rule{width:56px;height:1px;background:var(--gold);opacity:.55;margin:2rem 0}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);
  max-width:var(--mes-large);margin:0 auto}

/* ── En-tête de section : numéro fantôme dans la marge ── */
.shead{position:relative;display:grid;grid-template-columns:minmax(90px,140px) 1fr;
  gap:clamp(1.4rem,4vw,3.4rem);align-items:start;margin-bottom:clamp(2.4rem,5vw,4rem)}
.shead .snum{padding-top:.7em}
.shead h2{max-width:17ch}
@media(max-width:720px){.shead{grid-template-columns:1fr;gap:.9rem}.shead .snum{padding-top:0}}
.shead .ghost{position:absolute;right:0;top:-.42em;font-family:var(--serif);font-weight:400;
  font-size:clamp(4.5rem,13vw,11rem);line-height:1;color:var(--gold);opacity:.045;
  font-variation-settings:'opsz' 144;letter-spacing:-.04em;
  pointer-events:none;user-select:none}
@media(max-width:720px){.shead .ghost{display:none}}

/* ════════════════════════ BANDEAUX ════════════════════════ */
.phero{position:relative;padding:clamp(6rem,11vw,11rem) clamp(1.6rem,6vw,4.5rem) clamp(4rem,8vw,7rem);
  max-width:var(--mes-large);margin:0 auto;border-bottom:1px solid var(--line)}
.phero h1{max-width:16ch}
.phero .lead{margin-top:2rem}
.home-hero{position:relative;overflow:hidden;
  min-height:calc(100vh - var(--nav));min-height:calc(100svh - var(--nav));
  display:flex;flex-direction:column;place-content:center;text-align:center;align-items:center;
  padding:clamp(3rem,8vh,5rem) clamp(1.6rem,6vw,3.4rem);border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 8%,#241F2C 0%,#151320 42%,#0E0D13 78%)}
.home-hero .display{max-width:13ch;margin:0 auto}
.home-hero .lead{margin:2.8rem auto 0;max-width:48ch;text-align:center;
  color:#DCD8E3}   /* éclaircie : elle repose sur le filigrane coloré, 4,95:1 au pire cas */
.home-hero .kicker{color:#C9C4D4}

/* ════════════════════════ BOUTONS ════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;border-radius:999px;
  padding:1.05rem 2.4rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;transition:.7s cubic-bezier(.16,.8,.2,1);border:1px solid transparent}
.btn--gold{background:linear-gradient(135deg,#E3C558 0%,#D4AF37 45%,#A87E1B 100%);color:#14131A}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(212,175,55,.55)}
.btn--ghost{border-color:var(--line);color:var(--cream)}
.btn--ghost:hover{border-color:rgba(212,175,55,.6);transform:translateY(-2px)}
.btnrow{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.6rem}
.home-hero .btnrow{justify-content:center}

/* ════════════════════════ BANDE DE RÉASSURANCE ════════════════════════ */
.trustbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:4.2rem;
  font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-pale);opacity:.62;font-weight:400}
.trustbar i{color:var(--gold);font-style:normal;opacity:.45}
@media(max-width:640px){.trustbar{letter-spacing:.14em;gap:.45rem;margin-top:2.4rem}}

/* ════════════════════════ CHIFFRES ════════════════════════
   Bande horizontale à filets, chiffres en serif de très grande taille,
   libellés en micro-capitales. Le contraste fait tout le travail. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-top:1px solid var(--line)}
.stat{padding:3.4rem 2rem 3.2rem;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);position:relative}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(2.8rem,5.4vw,4.4rem);color:var(--gold);line-height:.9;letter-spacing:-.035em;
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;font-variant-numeric:lining-nums}
.stat b span[style]{font-size:.34em!important;letter-spacing:.02em}
.stat small{display:block;color:var(--grey2);margin-top:1.3rem}
.stat span.l{display:block;font-size:.86rem;color:var(--grey);margin-top:.9rem;
  line-height:1.55;font-weight:300;max-width:34ch}
@media(max-width:720px){
  .stat{border-right:0;padding:2rem 0 1.8rem}
  .stat:last-child{border-bottom:0}
}


/* ════════════════════════ BANDES PLEINE LARGEUR ════════════════════════
   Une image qui traverse toute la fenêtre casse le rythme des sections et
   donne au parcours sa respiration. Voile obsidienne pour que le texte
   éventuel reste lisible et que l'image ne prenne jamais le pas. */
.band{position:relative;width:100%;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.88) contrast(1.05) brightness(.94)}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,19,.55) 0%,rgba(14,13,19,.15) 40%,
    rgba(14,13,19,.15) 60%,rgba(14,13,19,.75) 100%)}
.band--h{aspect-ratio:1800/760}
.band--tall{aspect-ratio:1800/860}
.band--wide{aspect-ratio:1800/700}
.band__cap{position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:clamp(1.6rem,4vw,3.2rem) clamp(1.6rem,6vw,4.5rem);
  max-width:var(--mes-large);margin:0 auto}
.band__cap p{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.1rem,2.1vw,1.7rem);line-height:1.35;color:var(--lgold);
  max-width:30ch;letter-spacing:-.015em;
  font-variation-settings:'opsz' 96,'SOFT' 0,'WONK' 0;
  text-shadow:0 2px 24px rgba(0,0,0,.7)}
@media(max-width:640px){
  .band--h,.band--tall,.band--wide{aspect-ratio:4/3}
}

/* ════════════════════ FILIGRANE DU BANDEAU D'ACCUEIL ═══════════════════
   Traitée en monochrome doré et fondue en luminosité, l'image cesse d'être
   une photographie pour devenir une trame : elle donne de la matière au
   fond sans jamais concurrencer le titre. */
.home-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:.46}
/* Aucun mode de fusion : « luminosité » ne retient que les valeurs de gris et
   supprime toute couleur. En fusion normale, l'or et les lumières de Dubaï
   conservent leur teinte d'origine ; seule l'opacité les fait reculer. */
.home-hero__bg img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) brightness(1.04)}
/* Le voile s'ouvre au centre et ne se referme qu'aux bords : le filigrane
   respire derrière le titre sans jamais en gêner la lecture. */
.home-hero__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(14,13,19,.06) 0%,
    rgba(14,13,19,.42) 58%,rgba(14,13,19,.88) 100%)}
@media(max-width:640px){.home-hero__bg{opacity:.36}}

/* ════════════════════════ CARTES ════════════════════════ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(1.6rem,3vw,2.8rem)}
.card{background:var(--obs);border:1px solid var(--line2);border-radius:2px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;
  transition:border-color .9s,transform .9s cubic-bezier(.16,.8,.2,1)}
.card::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .9s}
.card:hover{transform:translateY(-6px);border-color:var(--line)}
.card:hover::before{opacity:.7}
.card__img{aspect-ratio:4/5;overflow:hidden;background:var(--obs3)}
.card__img img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.06);transition:transform 2s cubic-bezier(.16,.8,.2,1)}
.card:hover .card__img img{transform:scale(1.045)}
.card__body{padding:2.8rem 2.6rem 3rem;flex:1;display:flex;flex-direction:column}
.card__body h3{margin:1.2rem 0 .9rem}
.tag{display:inline-block;color:var(--grey);border:1px solid var(--line2);
  border-radius:999px;padding:.36rem .95rem;align-self:flex-start;letter-spacing:.22em}
.tag--soon{color:var(--grey2);border-color:var(--line2)}
.card p{color:var(--grey);font-size:.95rem;font-weight:300}
.more{margin-top:auto;padding-top:2rem;color:var(--lgold);font-size:var(--fs-micro);
  letter-spacing:.24em;text-transform:uppercase}

/* ════════════════════════ LISTES À PUCES LOSANGE ════════════════════════ */
.ticks{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:0}
.ticks li{position:relative;padding:1.5rem 0 1.5rem 2.2rem;color:var(--grey);
  font-size:1rem;font-weight:300;border-bottom:1px solid var(--line2);line-height:1.6}
.ticks li:first-child{border-top:1px solid var(--line2)}
.ticks li::before{content:"";position:absolute;left:0;top:2em;width:6px;height:6px;
  border:1px solid var(--gold);transform:rotate(45deg)}
.ticks b{color:var(--lgold);font-weight:400}

/* ════════════════════════ FICHE DE SPÉCIFICATIONS ════════════════════════
   Composée comme une fiche d'horlogerie : le libellé en micro-capitales
   surmonte la valeur en grand corps serif. Grille à filets, pas de liste.
   L'œil lit d'abord les valeurs, les libellés ne servent qu'à les qualifier. */
.spec{margin:3.4rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line2)}
.spec>div{padding:2.4rem 2.4rem 2.7rem;border-bottom:1px solid var(--line2);
  border-right:1px solid var(--line2);transition:background .8s}
.spec>div:hover{background:rgba(212,175,55,.028)}
.spec dt{color:var(--grey2);margin:0 0 1.1rem;display:block}
.spec dd{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.08rem,1.4vw,1.32rem);line-height:1.4;color:var(--cream);
  letter-spacing:-.014em;font-variation-settings:'opsz' 48,'SOFT' 0,'WONK' 0}
.spec dd b{color:var(--gold);font-weight:500}
.spec dd .sub{display:block;font-family:var(--sans);font-size:.83rem;
  font-weight:400;color:var(--grey2);margin-top:.7rem;line-height:1.55;letter-spacing:0}
@media(max-width:680px){
  .spec{grid-template-columns:1fr;border-left:0}
  .spec>div{padding:1.5rem 0 1.7rem;border-right:0}
}

/* ════════════════════════ FRISE DU CORRIDOR ════════════════════════ */
.steps{list-style:none;margin:3rem 0 2rem;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));border-top:1px solid var(--line)}
.steps li{padding:1.9rem 1.4rem 2.1rem;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line2);transition:background .8s}
.steps li:hover{background:rgba(212,175,55,.035)}
.steps b{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:400;
  font-variation-settings:'opsz' 72,'SOFT' 0,'WONK' 0;
  color:var(--gold);letter-spacing:.02em;margin-bottom:.55rem;line-height:1}
.steps span{font-size:.86rem;line-height:1.45;color:var(--grey);font-weight:300}
@media(max-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}

/* ════════════════════════ CITATION DÉTACHÉE ════════════════════════ */
.pull{font-family:var(--serif);font-style:italic;font-weight:300;
  font-variation-settings:'opsz' 110,'SOFT' 0,'WONK' 0;font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.28;color:var(--lgold);letter-spacing:-.022em;max-width:21ch;
  margin:clamp(3.5rem,7vw,6rem) 0;padding-left:clamp(1.6rem,3vw,2.6rem);
  border-left:1px solid rgba(212,175,55,.5)}

/* ════════════════════════ DIRECTION ════════════════════════ */
.leaders{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,300px));
  gap:2.2rem;margin-top:3rem}
.leader{background:var(--obs);border:1px solid var(--line2);border-radius:2px;overflow:hidden;
  transition:border-color .9s,transform .9s cubic-bezier(.16,.8,.2,1)}
.leader:hover{border-color:var(--line);transform:translateY(-5px)}
.leader__frame{aspect-ratio:4/5;background:var(--obs3);display:flex;align-items:center;
  justify-content:center;border-bottom:1px solid var(--line2);position:relative}
.leader__frame img{width:100%;height:100%;object-fit:cover;object-position:center 14%;
  position:relative;z-index:1;filter:saturate(.9) contrast(1.04)}
.leader__ini{position:absolute;z-index:0;font-family:var(--serif);font-size:3.2rem;
  font-weight:400;color:var(--golds);letter-spacing:.12em}
.leader__body{padding:1.9rem 1.8rem 2.1rem}
.leader__name{font-family:var(--serif);font-size:1.46rem;font-weight:500;margin:0;letter-spacing:-.01em}
.leader__role{color:var(--grey2);margin:.9rem 0 0}
.leader__note{color:var(--grey);font-size:.92rem;margin:1.4rem 0 0;line-height:1.65;font-weight:300}

/* ════════════════════════ FORMULAIRE ════════════════════════ */
.qform{max-width:var(--mes-moyen);margin-top:3rem}
.qsteps{display:flex;gap:.6rem;margin-bottom:2.6rem}
.qsteps div{flex:1;height:2px;background:var(--line2);transition:background .8s}
.qsteps div.on{background:var(--gold)}
.qpane{display:none}.qpane.on{display:block}
.qlegend{color:var(--grey2);margin-bottom:2.4rem}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-bottom:1.4rem}
.qform label{display:block;font-size:var(--fs-micro);letter-spacing:.24em;
  text-transform:uppercase;color:var(--grey2)}
.qform input,.qform select,.qform textarea{width:100%;margin-top:.7rem;padding:.95rem 0;
  background:transparent;border:0;border-bottom:1px solid var(--line2);border-radius:0;
  color:var(--cream);font-family:inherit;font-size:1.02rem;font-weight:300;
  letter-spacing:normal;text-transform:none;transition:border-color .7s}
.qform input:focus,.qform select:focus,.qform textarea:focus{
  outline:0;border-bottom-color:var(--gold)}
.qform textarea{min-height:120px;resize:vertical}
.qchoice{display:grid;gap:0;border-top:1px solid var(--line2)}
.qchoice button{text-align:left;background:none;border:0;border-bottom:1px solid var(--line2);
  padding:1.5rem 1rem 1.5rem 0;color:var(--cream);font-family:var(--serif);
  font-size:1.4rem;font-weight:400;cursor:pointer;transition:.7s cubic-bezier(.16,.8,.2,1);position:relative}
.qchoice button:hover,.qchoice button.sel{color:var(--gold);padding-left:1.1rem}
.qchoice button.sel{border-bottom-color:var(--gold)}
.qchoice em{display:block;font-style:normal;color:var(--grey);font-size:.88rem;
  font-family:var(--sans);font-weight:300;margin-top:.4rem;letter-spacing:normal}
.qnav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:2.4rem}
.qmsg{margin-top:1.4rem;font-size:.94rem;min-height:1.2em}
.qmsg[data-ok="1"]{color:#7BC49A}.qmsg[data-ok="0"]{color:#E5928B}
.qsla{color:var(--grey2);font-size:.82rem;max-width:32ch;margin:0;font-weight:300}
.qtrap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media(max-width:640px){
  .qrow{grid-template-columns:1fr;gap:1.1rem}
  .qform input,.qform select,.qform textarea{font-size:16px}
  .qchoice button{font-size:1.15rem}
}

/* ════════════════════════ PIED DE PAGE ════════════════════════ */
footer{border-top:1px solid var(--line);padding:4.5rem clamp(1.4rem,5vw,3.4rem) 3rem;background:var(--obs)}
.fwrap{max-width:var(--mes-large);margin:0 auto;display:grid;
  grid-template-columns:1.6fr 1fr 1fr;gap:3.2rem}
.fwrap h2{color:var(--grey2);margin:0 0 1.4rem;font-family:var(--sans)}
.fwrap ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.fwrap a{text-decoration:none;color:var(--grey);font-size:.9rem;font-weight:300;transition:color .6s}
.fwrap a:hover{color:var(--gold)}
.fbrand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.fbrand img{width:32px;height:32px}
.fnote{color:var(--grey2);font-size:.88rem;max-width:36ch;font-weight:300;line-height:1.7}
.fbottom{max-width:var(--mes-large);margin:3.4rem auto 0;padding-top:1.8rem;
  border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;color:var(--grey2);font-size:.78rem;font-weight:300}
@media(max-width:860px){.fwrap{grid-template-columns:1fr;gap:2.4rem}}

/* ════════════════════════ RÉVÉLATION ════════════════════════ */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity 1.15s cubic-bezier(.16,.8,.2,1),transform 1.15s cubic-bezier(.16,.8,.2,1)}
.rv.on{opacity:1;transform:none}
.home-hero .rv,.phero .rv{opacity:0;animation:entree .95s cubic-bezier(.2,.7,.2,1) forwards}
.home-hero .rv:nth-child(2),.phero .rv:nth-child(1){animation-delay:.06s}
.home-hero .rv:nth-child(3),.phero .rv:nth-child(2){animation-delay:.2s}
.home-hero .rv:nth-child(4),.phero .rv:nth-child(3){animation-delay:.34s}
.home-hero .rv:nth-child(5),.phero .rv:nth-child(4){animation-delay:.48s}
.home-hero .rv:nth-child(6){animation-delay:.62s}
@keyframes entree{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ════════════ Halo doré respirant ════════════ */
.home-hero::before{content:"";position:absolute;left:50%;top:44%;z-index:0;pointer-events:none;
  width:min(78vw,720px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.15),rgba(212,175,55,0) 66%);
  animation:orHalo 10s ease-in-out infinite alternate}
@keyframes orHalo{from{opacity:.45;transform:translate(-50%,-50%) scale(.92)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* ════════════ Reflet traversant les écritures dorées ════════════ */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .shimmer{--or-base:var(--gold);
    /* Le reflet culmine sur un or pâle et chaud, jamais sur du blanc pur :
       le blanc arrache la teinte et donne un effet clinquant. */
    background-image:linear-gradient(100deg,
      var(--or-base) 0%,var(--or-base) 43%,#F2DFA4 47.5%,#F8ECC6 50%,#F2DFA4 52.5%,
      var(--or-base) 57%,var(--or-base) 100%);
    background-size:200% 100%;background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:orBalayage 8s linear infinite}
  .display .shimmer{--or-base:var(--lgold);animation-duration:9.5s}
  .kicker.shimmer{animation-duration:11s}
  .stat b .shimmer{animation-duration:8.5s}
}
@keyframes orBalayage{from{background-position:0 0}to{background-position:-200% 0}}

/* Les chiffres ne prennent leur valeur qu'à l'arrivée à l'écran :
   le décompte se déclenche une seule fois, puis l'élément est relâché. */
.stat b [data-count]{font-variant-numeric:tabular-nums lining-nums}

/* ════════════ Poussière d'or, en CSS pur ════════════ */
.orpluie{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orpluie i{position:absolute;bottom:-8px;display:block;border-radius:50%;
  background:radial-gradient(circle,#F6E7B4 0%,var(--gold) 45%,rgba(212,175,55,0) 72%);
  animation-name:orMonte,orScintille;animation-timing-function:linear,ease-in-out;
  animation-iteration-count:infinite,infinite;animation-direction:normal,alternate;
  will-change:transform}
@keyframes orMonte{from{transform:translate3d(0,0,0)}to{transform:translate3d(18px,-104vh,0)}}
@keyframes orScintille{from{opacity:.10}to{opacity:.92}}
.home-hero>*:not(.orpluie):not(.home-hero__bg){position:relative;z-index:1}
@media(max-width:640px){.orpluie i{box-shadow:none}}

@media(prefers-reduced-motion:reduce){
  .orpluie,.home-hero::before{display:none}
  .rv,.home-hero .rv,.phero .rv{opacity:1;transform:none;animation:none;transition:none}
  .shimmer{animation:none;background-image:none;
    -webkit-text-fill-color:var(--gold);color:var(--gold)}
}