/* ============================================================
   EBEN & OR — système de marque
   Sombre profond · or en accent rare · Fraunces + IBM Plex Mono
   « Le murmure, pas le feu d'artifice. »
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --noir:        #0c0b09;   /* base écrin, chaud */
  --noir-2:      #14120d;   /* panneau */
  --noir-3:      #1c1913;   /* surface relevée */
  --paper:       #ece4d4;   /* texte chaud sur sombre */
  --paper-soft:  rgba(236,228,212,.62);
  --paper-faint: rgba(236,228,212,.34);
  --or:          #b9883a;   /* or chaud, accent */
  --or-bright:   #ecc67e;   /* éclat LED */
  --or-deep:     #8a6e34;
  --hair:        rgba(198,162,83,.34);

  --serif: "Fraunces", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--noir);
  color:var(--paper);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* grain de matière, très discret */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- eyebrow / labels mono ---------- */
.eyebrow{
  font-family:var(--mono); font-weight:400;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--or); margin:0;
}
.eyebrow .dot{ color:var(--paper-faint); margin:0 .55em; }

/* ---------- titre ---------- */
.display{
  font-family:var(--serif); font-weight:300;
  letter-spacing:-.012em; line-height:1.04;
  color:var(--paper); margin:0;
  text-wrap:balance;
}
.display em{
  font-style:italic; font-weight:300;
  color:var(--or-bright);
}

/* ---------- filet doré « LED » ---------- */
.hair-rule{
  position:relative; height:1px; width:var(--rule-w,120px);
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,var(--or-bright),var(--or) 60%,transparent);
  box-shadow:0 0 10px rgba(240,214,149,0);
  transition:transform 1.5s cubic-bezier(.22,1,.36,1) .35s,
             box-shadow 1.5s ease .35s;
}
.lit .hair-rule{ transform:scaleX(1); box-shadow:0 0 12px rgba(240,214,149,.55); }

/* halo sur un détail d'or */
.halo{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(240,214,149,.42) 0%, rgba(198,162,83,.16) 35%, transparent 70%);
  filter:blur(6px); opacity:0;
  transition:opacity 1.8s ease .6s;
}
.lit .halo{ opacity:1; }

/* ---------- CTA ---------- */
.cta{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--mono); font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--noir); background:var(--or);
  border:1px solid var(--or); border-radius:0;
  padding:17px 30px; cursor:pointer; text-decoration:none;
  position:relative; overflow:hidden;
  transition:background .5s ease, color .5s ease, box-shadow .5s ease;
}
.cta .lbl{ white-space:nowrap; }
.cta .arrow{ transition:transform .45s cubic-bezier(.22,1,.36,1); }
.cta:hover{ box-shadow:0 0 26px rgba(240,214,149,.4); background:var(--or-bright); border-color:var(--or-bright); }
.cta:hover .arrow{ transform:translateX(5px); }

/* CTA contour (nav / variante) */
.cta-ghost{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--paper); background:transparent;
  border:1px solid var(--hair); padding:11px 18px; cursor:pointer;
  text-decoration:none; transition:border-color .5s ease, color .5s ease;
}
.cta-ghost:hover{ border-color:var(--or); color:var(--or-bright); }

/* lien prescripteur */
.presc{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--paper-soft); text-decoration:none;
  border-bottom:1px solid var(--paper-faint); padding-bottom:3px;
  transition:color .45s ease, border-color .45s ease;
}
.presc:hover{ color:var(--or-bright); border-color:var(--or); }
.presc .ar{ font-size:13px; }

/* ---------- NAV ---------- */
.nav{
  position:absolute; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px clamp(22px,4vw,56px);
}
.nav .logo{
  font-family:var(--serif); font-weight:400; font-size:20px;
  letter-spacing:.42em; color:var(--paper); text-transform:uppercase;
  text-indent:.42em;
}
.nav .logo b{ color:var(--or); font-weight:400; }
.nav-right{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.nav-links{ display:flex; gap:clamp(16px,2vw,30px); }
.nav-links a{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper-soft); text-decoration:none;
  transition:color .4s ease;
}
.nav-links a:hover{ color:var(--paper); }

/* sélecteur FR/EN */
.lang{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  border:1px solid var(--hair); border-radius:999px; overflow:hidden;
}
.lang button{
  font:inherit; letter-spacing:inherit; background:transparent; border:0;
  color:var(--paper-faint); padding:6px 11px; cursor:pointer;
  transition:color .4s ease, background .4s ease;
}
.lang button.on{ color:var(--noir); background:var(--or); }

@media (max-width:860px){
  .nav-links{ display:none; }
}

/* sous 480px, le bouton fantôme de la nav déborde à côté du logo + FR/EN ;
   le CTA principal du hero (dimensionné pour mobile) suffit. */
@media (max-width:480px){
  .nav-cta{ display:none; }
}

/* respect réduction de mouvement */
@media (prefers-reduced-motion:reduce){
  .hair-rule{ transition:none; transform:scaleX(1); }
  .halo{ transition:none; opacity:1; }
}