/* ============================================================
   EBEN & OR — styles propres à chaque section de la page.
   Chaque bloc est scopé par l'id de sa <section> pour pouvoir
   cohabiter sur une seule page (les maquettes source vivaient
   chacune isolée dans sa propre iframe).
   ============================================================ */

/* ============ 01 · HERO — Direction C ============ */
#hero{ position:relative; width:100%; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:var(--noir); }

#hero .layer{ position:absolute; inset:0; }
#hero .layer img{ width:100%; height:100%; object-fit:cover; display:block; }

/* copeaux : fond très peu opaque, le plus présent à gauche, s'efface vers la droite */
#hero .bg-copeaux{ opacity:.48;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 32%, rgba(0,0,0,.45) 60%, transparent 80%);
          mask-image:linear-gradient(90deg, #000 0%, #000 32%, rgba(0,0,0,.45) 60%, transparent 80%); }
#hero .bg-copeaux img{ object-position:38% 50%; filter:saturate(.6) brightness(.68) contrast(1.06); }

/* feuille d'or : à droite, apparaît depuis le centre et s'affirme vers le bord droit */
#hero .bg-or{
  -webkit-mask-image:linear-gradient(90deg, transparent 20%, rgba(0,0,0,.35) 46%, rgba(0,0,0,.8) 66%, #000 88%);
          mask-image:linear-gradient(90deg, transparent 20%, rgba(0,0,0,.35) 46%, rgba(0,0,0,.8) 66%, #000 88%); }
#hero .bg-or img{ object-position:70% 50%; filter:saturate(1.06) brightness(.9) contrast(1.03); }

/* halo chaud qui émane de l'or, côté droit */
#hero .warm{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 88% at 84% 46%, rgba(201,164,92,.20), rgba(198,162,83,.06) 42%, transparent 66%); }

/* voile sombre : garde la gauche lisible, laisse respirer l'or à droite */
#hero .scrim-blend{ position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(8,7,5,.6) 0%, rgba(8,7,5,.46) 28%,
    rgba(8,7,5,.28) 52%, rgba(8,7,5,.08) 78%, rgba(8,7,5,.28) 100%); }
#hero .scrim-bottom{ position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,7,5,.9) 0%, transparent 44%); }
#hero .scrim-vig{ position:absolute; inset:0; box-shadow:inset 0 0 240px 40px rgba(0,0,0,.55); }

#hero .hero-content{
  position:absolute; left:0; bottom:0;
  padding:0 clamp(22px,4vw,56px) clamp(46px,6.5vh,78px);
  max-width:760px; z-index:10;
}
#hero .nav-links a{ white-space:nowrap; }
#hero .nav-cta{ white-space:nowrap; }
#hero .hero-content .eyebrow{ margin-bottom:30px; }

#hero .display{ font-size:clamp(32px,4.4vw,62px); line-height:1.07; }

#hero .rule-wrap{ position:relative; margin:30px 0 26px; }
#hero .rule-wrap .halo{ width:150px; height:150px; left:-66px; top:calc(50% - 75px); }
#hero .rule-wrap .node{
  position:absolute; left:-2px; top:calc(50% - 2px);
  width:4px; height:4px; border-radius:50%; background:var(--or-bright);
  box-shadow:0 0 8px 2px rgba(240,214,149,.7); opacity:0; transition:opacity 1s ease .4s;
}
#hero .lit .rule-wrap .node{ opacity:1; }

#hero .signature{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(16px,1.5vw,21px); color:var(--paper-soft);
  margin:0 0 38px; max-width:33ch; line-height:1.45;
}

#hero .cta-row{ display:flex; align-items:center; gap:clamp(18px,2.6vw,34px); flex-wrap:wrap; }

/* étiquette matière discrète, côté or */
#hero .or-tag{ position:absolute; right:clamp(22px,4vw,56px); top:clamp(96px,15vh,132px); z-index:10;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); display:flex; align-items:center; gap:9px; text-shadow:0 2px 12px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7);
  opacity:0; transition:opacity 1.4s ease .8s; }
#hero.lit .or-tag{ opacity:.85; }
#hero .or-tag .sw{ width:8px; height:8px; border-radius:50%; background:var(--or-bright); box-shadow:0 0 8px rgba(240,214,149,.8); }

#hero .scroll-cue{
  position:absolute; right:clamp(22px,4vw,56px); bottom:clamp(40px,6vh,64px);
  z-index:10; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--paper-faint); writing-mode:vertical-rl;
}
#hero .scroll-cue .ln{ width:1px; height:54px; background:linear-gradient(var(--paper-faint),transparent); }

@media (max-width:720px){
  #hero .nav .logo{ font-size:16px; letter-spacing:.34em; }
  #hero .hero-content{ padding-bottom:40px; max-width:none; }
  #hero .hero-content .eyebrow{ margin-bottom:16px; font-size:10px; letter-spacing:.24em; }
  #hero .display{ font-size:clamp(24px,6.4vw,33px); line-height:1.1; }
  #hero .rule-wrap{ margin:18px 0 16px; }
  #hero .signature{ margin-bottom:22px; font-size:15px; }
  #hero .cta-row{ gap:16px; }
  #hero .cta{ width:100%; justify-content:center; padding:15px 24px; }
  #hero .cta .lbl{ white-space:normal; text-align:center; }
  #hero .scroll-cue{ display:none; }
  #hero .or-tag{ display:none; }
  /* sur mobile : l'or remonte en bandeau chaud, les copeaux restent en fond ténu mais visible en haut */
  #hero .bg-or{ -webkit-mask-image:linear-gradient(180deg, transparent 8%, rgba(0,0,0,.5) 34%, #000 70%);
                  mask-image:linear-gradient(180deg, transparent 8%, rgba(0,0,0,.5) 34%, #000 70%); }
  #hero .bg-or img{ object-position:50% 60%; }
  #hero .bg-copeaux{ opacity:.4;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 44%, transparent 68%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 44%, transparent 68%); }
  #hero .warm{ background:radial-gradient(80% 44% at 50% 88%, rgba(201,164,92,.22), transparent 62%); }
  #hero .scrim-blend{ background:linear-gradient(0deg, rgba(8,7,5,.6) 8%, rgba(8,7,5,.4) 52%, rgba(8,7,5,.42) 100%); }
}

/* ============ 02 · MANIFESTE — Direction A ============ */
#sec-02{ display:flex; align-items:center; justify-content:center; }
#sec-02::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 320px 60px rgba(0,0,0,.6);
  background:radial-gradient(60% 50% at 50% 42%, rgba(198,162,83,.06), transparent 70%); }
#sec-02 .wrap{ position:relative; z-index:2; max-width:860px; padding:0 40px; text-align:center; }
#sec-02 .sec-eyebrow{ justify-content:center; margin-bottom:46px; }
#sec-02 .statement{ font-size:clamp(32px,4.6vw,62px); margin-bottom:40px; }
#sec-02 .lede{ font-size:clamp(16px,1.5vw,21px); max-width:50ch; margin:0 auto 44px; }
#sec-02 .filet{ position:relative; width:200px; height:1px; margin:0 auto 30px; }
#sec-02 .filet .hair-rule{ transform-origin:center; width:200px; }
#sec-02 .filet .mhalo{ width:160px; height:160px; left:20px; top:-80px; }
#sec-02 .quote{ font-size:clamp(18px,1.8vw,25px); }

@media (max-width:720px){
  #sec-02 .wrap{ padding:0 24px; }
  #sec-02 .sec-eyebrow{ margin-bottom:30px; font-size:10px; }
  #sec-02 .statement{ font-size:clamp(26px,7.4vw,34px); margin-bottom:28px; }
  #sec-02 .lede{ font-size:16px; margin-bottom:32px; }
  #sec-02 .filet{ width:140px; margin-bottom:24px; }
  #sec-02 .filet .hair-rule{ width:140px; }
  #sec-02 .quote{ font-size:19px; }
}

/* ============ 03 · L'ARTISAN — Direction A ============ */
#sec-03 .media{ position:absolute; inset:0; }
#sec-03 .media img{ width:100%; height:100%; object-fit:cover; object-position:72% 28%;
  filter:grayscale(.7) sepia(.18) brightness(.7) contrast(1.06); }
#sec-03 .scrim{ position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(8,7,5,.96) 0%, rgba(8,7,5,.86) 30%, rgba(8,7,5,.5) 60%, rgba(8,7,5,.22) 100%); }
#sec-03 .scrim-b{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,7,5,.85), transparent 45%); }
#sec-03 .content{ position:absolute; left:0; bottom:0; z-index:3; max-width:680px;
  padding:0 clamp(26px,4.4vw,64px) clamp(54px,8vh,90px); }
#sec-03 .sec-eyebrow{ margin-bottom:26px; }
#sec-03 .sec-title{ font-size:clamp(40px,5.4vw,80px); margin-bottom:26px; }
#sec-03 .rule-h{ position:relative; height:1px; width:160px; margin:0 0 26px; }
#sec-03 .rule-h .hair-rule{ width:160px; }
#sec-03 .rule-h .mhalo{ width:130px; height:130px; left:-50px; top:-65px; }
#sec-03 .lede{ font-size:clamp(16px,1.4vw,20px); max-width:42ch; margin-bottom:30px; }
#sec-03 .mono-tag{ letter-spacing:.14em; }

@media (max-width:720px){
  #sec-03 .media img{ object-position:64% 22%; filter:grayscale(.7) sepia(.18) brightness(.55) contrast(1.06); }
  #sec-03 .scrim{ background:linear-gradient(0deg, rgba(8,7,5,.95) 8%, rgba(8,7,5,.5) 62%, rgba(8,7,5,.4) 100%); }
  #sec-03 .content{ padding:0 24px 44px; max-width:none; }
  #sec-03 .sec-title{ font-size:clamp(38px,12vw,52px); margin-bottom:20px; }
  #sec-03 .lede{ font-size:16px; margin-bottom:24px; }
}

/* ============ 04 · LES MATIÈRES — Direction A ============ */
#sec-04 .strips{ position:absolute; inset:0; display:flex; }
#sec-04 .strips .pane{ flex:1; }
#sec-04 .strips .pane img{ filter:saturate(.82) brightness(.74) contrast(1.04); transition:filter 1.2s ease; }
#sec-04 .strips .pane:nth-child(2) img{ filter:saturate(.7) brightness(.62) contrast(1.05); }
#sec-04 .strips .pane .tag{ position:absolute; top:18px; left:16px; z-index:3; }
#sec-04 .strips .pane + .pane{ border-left:1px solid rgba(0,0,0,.35); }
#sec-04 .scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(8deg, rgba(8,7,5,.95) 0%, rgba(8,7,5,.7) 28%, rgba(8,7,5,.15) 58%, rgba(8,7,5,.32) 100%); }
#sec-04 .mhalo{ position:absolute; width:30%; height:34%; left:6%; top:30%; }
#sec-04 .content{ position:absolute; left:0; bottom:0; z-index:4; max-width:720px;
  padding:0 clamp(26px,4.4vw,64px) clamp(48px,7vh,82px); }
#sec-04 .sec-eyebrow{ margin-bottom:24px; }
#sec-04 .sec-title{ font-size:clamp(34px,4.6vw,66px); margin-bottom:26px; }
#sec-04 .rule-h{ position:relative; height:1px; width:150px; margin:0 0 26px; }
#sec-04 .rule-h .hair-rule{ width:150px; }
#sec-04 .quote{ font-size:clamp(17px,1.6vw,23px); max-width:40ch; }

@media (max-width:720px){
  #sec-04{ display:flex; flex-direction:column; }
  #sec-04 .strips{ position:relative; inset:auto; height:42vh; }
  #sec-04 .strips .pane .tag{ display:none; }
  #sec-04 .mhalo{ display:none; }
  #sec-04 .scrim{ position:absolute; inset:auto; left:0; right:0; bottom:0; height:42vh;
    background:linear-gradient(0deg, rgba(8,7,5,.6), transparent 60%); }
  #sec-04 .content{ position:relative; padding:30px 24px 36px; max-width:none; }
  #sec-04 .sec-title{ font-size:clamp(30px,8.4vw,40px); margin-bottom:20px; }
  #sec-04 .rule-h{ margin-bottom:22px; }
  #sec-04 .quote{ font-size:18px; }
}

/* ============ 05 · LES INSTITUTIONS (B2B) ============ */
#sec-05{ overflow:hidden; }
#sec-05 .banner{ display:grid; grid-template-columns:1.04fr .96fr; align-items:stretch; }
#sec-05 .banner .txt{ padding:clamp(72px,11vh,150px) clamp(26px,5vw,90px); position:relative; z-index:2; }
#sec-05 .banner .ghost-num{ top:-26px; left:clamp(20px,4vw,72px); font-size:clamp(150px,20vw,300px); }
#sec-05 .banner .sec-eyebrow{ margin-bottom:30px; position:relative; }
#sec-05 .banner h2{ font-size:clamp(40px,5vw,76px); margin-bottom:30px; position:relative; }
#sec-05 .banner .lede{ font-size:clamp(16px,1.4vw,19px); margin-bottom:34px; }
#sec-05 .banner .pull{ font-size:clamp(17px,1.6vw,22px); }
#sec-05 .banner .media{ position:relative; overflow:hidden; min-height:520px; }
#sec-05 .banner .media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  filter:saturate(.8) brightness(.74) contrast(1.04); }
#sec-05 .banner .media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--noir) 0%, rgba(20,17,12,.4) 16%, transparent 42%); }
#sec-05 .banner .media .gframe{ inset:clamp(20px,2vw,40px); }
#sec-05 .banner .media .cap{ position:absolute; left:clamp(28px,3vw,46px); bottom:clamp(26px,3vw,44px); z-index:5; }

#sec-05 .tri-wrap{ padding-top:0; }
#sec-05 .tri-head{ margin-bottom:clamp(30px,4vh,52px); }
#sec-05 .tri-head .sec-eyebrow{ margin-bottom:18px; }
#sec-05 .tri-head h3{ font-family:var(--cormorant); font-weight:400; font-size:clamp(24px,2.6vw,38px);
  color:var(--paper); margin:0; max-width:18ch; line-height:1.12; }
#sec-05 .tri-head h3 em{ font-family:var(--serif); font-style:italic; color:var(--or-bright); font-weight:400; }

#sec-05 .proof .sec-eyebrow{ margin-bottom:22px; }
#sec-05 .proof .lede{ font-size:clamp(16px,1.35vw,19px); margin-bottom:40px; }
#sec-05 .proof .gages{ margin-bottom:clamp(40px,5vh,60px); }

@media (max-width:1000px){
  #sec-05 .banner{ grid-template-columns:1fr; }
  #sec-05 .banner .media{ order:-1; min-height:0; height:360px; }
  #sec-05 .banner .media::after{ background:linear-gradient(0deg, var(--noir) 2%, transparent 50%); }
  #sec-05 .banner .txt{ padding-top:clamp(34px,5vh,54px); }
  #sec-05 .banner .ghost-num{ font-size:120px; top:-6px; }
}

/* ============ 06 · LES PRESCRIPTEURS ============ */
#sec-06{ overflow:hidden; }
#sec-06 .banner{ display:grid; grid-template-columns:.92fr 1.08fr; align-items:stretch; }
#sec-06 .banner .media{ position:relative; overflow:hidden; min-height:540px; }
#sec-06 .banner .media img{ width:100%; height:100%; object-fit:cover; object-position:60% 50%;
  position:absolute; inset:0; filter:contrast(1.08) brightness(.92); }
#sec-06 .banner .media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(270deg, var(--noir) 0%, rgba(20,17,12,.35) 18%, transparent 44%); }
#sec-06 .banner .media .cap{ position:absolute; left:clamp(28px,3vw,46px); bottom:clamp(26px,3vw,44px); z-index:5; }
#sec-06 .banner .txt{ padding:clamp(72px,11vh,150px) clamp(26px,5vw,90px); position:relative; }
#sec-06 .banner .ghost-num{ top:-26px; right:clamp(20px,4vw,60px); font-size:clamp(150px,20vw,300px); }
#sec-06 .banner .sec-eyebrow{ margin-bottom:30px; }
#sec-06 .banner h2{ font-size:clamp(38px,4.7vw,72px); margin-bottom:30px; }
#sec-06 .banner .lede{ font-size:clamp(16px,1.4vw,19px); margin-bottom:34px; }
#sec-06 .banner .pull{ font-size:clamp(17px,1.6vw,22px); }

#sec-06 .voies-head{ margin-bottom:clamp(28px,4vh,48px); text-align:center; }
#sec-06 .voies-head .sec-eyebrow{ justify-content:center; }

#sec-06 .garantie{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,4vw,68px); align-items:center; }
#sec-06 .garantie .gm{ position:relative; overflow:hidden; aspect-ratio:3/4; }
#sec-06 .garantie .gm img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.08) brightness(.9); }
#sec-06 .garantie .gm .gframe{ inset:16px; }
#sec-06 .garantie .sec-eyebrow{ margin-bottom:22px; }
#sec-06 .garantie .lede{ font-size:clamp(16px,1.35vw,19px); margin-bottom:30px; }
#sec-06 .closing{ text-align:center; padding-top:clamp(40px,6vh,70px); }
#sec-06 .closing q{ font-family:var(--cormorant); font-style:italic; font-weight:500;
  font-size:clamp(22px,3vw,40px); color:var(--paper); line-height:1.32; quotes:none; text-wrap:balance; }
#sec-06 .closing q em{ font-family:var(--serif); font-style:italic; color:var(--or-bright); font-weight:400; }

@media (max-width:1000px){
  #sec-06 .banner{ grid-template-columns:1fr; }
  #sec-06 .banner .media{ min-height:0; height:360px; }
  #sec-06 .banner .media::after{ background:linear-gradient(0deg, var(--noir) 2%, transparent 50%); }
  #sec-06 .banner .ghost-num{ font-size:120px; }
  #sec-06 .garantie{ grid-template-columns:1fr; }
  #sec-06 .garantie .gm{ max-width:340px; aspect-ratio:4/3; }
}

/* ============ 07 · LES RÉALISATIONS ============ */
#sec-07{ overflow:hidden; }
#sec-07 .rea-head{ position:relative; margin-bottom:clamp(34px,5vh,60px); }
#sec-07 .rea-head .ghost-num{ top:-40px; right:0; font-size:clamp(120px,15vw,220px); }
#sec-07 .rea-head .sec-eyebrow{ margin-bottom:22px; }
#sec-07 .rea-head h2{ font-size:clamp(38px,4.8vw,72px); margin-bottom:24px; position:relative; }
#sec-07 .rea-head .lede{ font-size:clamp(16px,1.4vw,19px); max-width:52ch; }
#sec-07 .rea-foot{ margin-top:clamp(34px,5vh,52px); display:flex; justify-content:center; }
#sec-07 .see-all{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); text-decoration:none; display:inline-flex; align-items:center; gap:12px;
  border:1px solid var(--hair); padding:15px 28px; transition:border-color .5s ease, color .5s ease, gap .4s ease; }
#sec-07 .see-all:hover{ border-color:var(--or); color:var(--or-bright); }
#sec-07 .see-all .ar{ color:var(--or); }

/* ============ 08 · TÉMOIGNAGES ============ */
#sec-08{ overflow:hidden; }
#sec-08 .tem-head{ text-align:center; position:relative; margin-bottom:clamp(50px,8vh,96px); }
#sec-08 .tem-head .ghost-num{ top:-46px; left:50%; transform:translateX(-50%); font-size:clamp(120px,15vw,210px); }
#sec-08 .tem-head .sec-eyebrow{ justify-content:center; margin-bottom:22px; position:relative; }
#sec-08 .tem-head h2{ font-size:clamp(36px,4.6vw,68px); position:relative; }
#sec-08 .tem-sep{ width:40px; height:1px; background:var(--hair); margin:0 auto; }
#sec-08 .glow-c{ left:50%; top:30%; transform:translateX(-50%); width:560px; height:420px; }

/* ============ 09 · CONVERSION FINALE ============ */
#sec-09{ overflow:hidden; }
#sec-09 .portes-head{ text-align:center; margin-bottom:clamp(34px,5vh,56px); position:relative; }
#sec-09 .portes-head .sec-eyebrow{ justify-content:center; margin-bottom:22px; }
#sec-09 .portes-head h2{ font-size:clamp(34px,4.4vw,64px); margin-bottom:22px; }
#sec-09 .portes-head .lede{ font-size:clamp(16px,1.35vw,18.5px); max-width:46ch; margin:0 auto; }
#sec-09 .signature-line{ text-align:center; margin-top:clamp(40px,6vh,64px); }
#sec-09 .signature-line p{ font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(18px,1.9vw,26px); color:var(--or-bright); margin:0; text-wrap:balance; }

#sec-09 .cal-section{ position:relative; }
#sec-09 .cal-head{ text-align:center; margin-bottom:clamp(34px,5vh,52px); position:relative; }
#sec-09 .cal-head .sec-eyebrow{ justify-content:center; margin-bottom:22px; }
#sec-09 .cal-head h2{ font-size:clamp(32px,4vw,56px); margin-bottom:22px; }
#sec-09 .cal-head .lede{ font-size:clamp(16px,1.35vw,18.5px); max-width:48ch; margin:0 auto; }
#sec-09 .cal-aside h3{ font-family:var(--cormorant); font-weight:500; font-size:clamp(22px,2vw,28px);
  color:var(--paper); margin:0 0 14px; line-height:1.2; }
#sec-09 .cal-aside .lede{ font-size:16px; }