/* =====================================================================
   vivatech.aixcellence.academy — Éditorial ivoire (premium)
   Polices auto-hébergées dans ./fonts/ (RGPD : aucun CDN Google).
   ===================================================================== */
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fraunces-400.woff2") format("woff2"); }
@font-face{ font-family:"Fraunces"; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fraunces-400-italic.woff2") format("woff2"); }
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fraunces-600.woff2") format("woff2"); }
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fraunces-700.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/inter-400.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/inter-500.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/plex-mono-400.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/plex-mono-500.woff2") format("woff2"); }

:root{
  --bg:#F4EFE6;          /* ivoire */
  --paper:#FBF8F1;       /* papier carte */
  --ink:#14130F;         /* encre */
  --ink-soft:#2B2924;
  --mute:#6E685D;        /* gris chaud */
  --rule:rgba(20,19,16,.14);
  --rule-soft:rgba(20,19,16,.08);
  --brass:#8C6F3F;       /* laiton */
  --brass-deep:#6E5630;
  --brass-soft:#C9A876;
  --navy:#1C2A3A;

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
*{margin:0; padding:0; box-sizing:border-box}
html{ color-scheme:light; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans); color:var(--ink);
  background:
    radial-gradient(140% 90% at 50% -20%, #FBF7EE 0%, rgba(251,247,238,0) 50%),
    var(--bg);
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:48px 22px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1, "liga" 1;
}

/* Carte — esprit "fine press" : papier, filet, ombre douce */
.card{
  position:relative;
  width:100%; max-width:600px;
  background:linear-gradient(180deg, var(--paper), #FAF6EE);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:clamp(30px, 5.2vw, 56px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 18px 50px -28px rgba(40,30,15,.45),
    0 4px 14px -10px rgba(40,30,15,.25);
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both;
}
/* double filet décoratif en haut */
.card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--brass-soft), var(--brass) 50%, var(--brass-soft));
  border-radius:4px 4px 0 0; opacity:.85;
}

/* Topbar / wordmark */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding-bottom:22px; margin-bottom:30px;
  border-bottom:1px solid var(--rule-soft);
}
.seal{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--brass); color:var(--brass-deep);
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:14px; letter-spacing:.02em;
}
.brand{ font-family:var(--serif); font-weight:600; font-size:16px; letter-spacing:-.01em; color:var(--ink); }
.brand em{ font-style:italic; font-weight:400; color:var(--brass-deep); }
.edition{
  margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute);
}

/* Eyebrow */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-deep); display:flex; align-items:center; gap:11px;
}
.eyebrow .tick{ width:18px; height:1px; background:var(--brass); flex:none; }

/* Hero */
.hero{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(34px, 6.4vw, 56px); line-height:1.04; letter-spacing:-.022em;
  margin:20px 0 0; color:var(--ink); text-wrap:balance;
}
.hero em{ font-style:italic; font-weight:400; color:var(--brass-deep); }
.lede{
  font-size:16px; color:var(--ink-soft); line-height:1.62; margin:22px 0 0; max-width:48ch;
}

/* Proof points (positionnement B2B / crédibilité) */
.proof{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 20px; margin:24px 0 0; }
.proof li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute); display:flex; align-items:center; gap:9px; white-space:nowrap;
}
.proof li::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--brass); flex:none; }

/* Person */
.rule{ height:1px; background:var(--rule); margin:34px 0 24px; }
.who-name{ font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:-.01em; }
.who-meta{ font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--mute); margin-top:7px; }

/* Actions */
.actions{ margin-top:28px; display:flex; flex-direction:column; gap:11px; }
.btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; padding:0 22px; border-radius:11px; text-decoration:none; cursor:pointer;
  font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:.005em;
  border:1px solid transparent;
  transition:transform .14s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:active{ transform:translateY(1px) scale(.995); }
.btn-primary{
  background:var(--ink); color:var(--bg); font-weight:600;
  box-shadow:0 10px 22px -14px rgba(20,19,15,.8);
}
.btn-primary:hover{ background:#000; box-shadow:0 14px 26px -14px rgba(20,19,15,.9); }
.btn-primary .arrow{ transition:transform .18s ease; }
.btn-primary:hover .arrow{ transform:translateX(4px); }
.row{ display:flex; gap:11px; }
.btn-ghost{
  flex:1; min-height:52px; background:transparent; color:var(--ink);
  border-color:var(--rule); font-size:14px; font-weight:500;
}
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass-deep); background:rgba(140,111,63,.05); }
.btn .ext{ font-size:13px; opacity:.55; transition:transform .18s ease, opacity .2s ease; }
.btn:hover .ext{ transform:translate(2px,-2px); opacity:.9; }

/* Manifesto : un seul bouton + sélecteur de langue discret */
.manifesto-btn{ width:100%; }
.lang{ display:flex; align-items:center; justify-content:center; gap:13px; margin-top:11px; }
.lang-opt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); text-decoration:none; padding-bottom:3px; position:relative;
  transition:color .2s ease;
}
.lang-opt:hover{ color:var(--brass-deep); }
.lang-opt.is-active{ color:var(--ink); }
.lang-opt.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--brass); }
.lang-opt:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:4px; }
.lang-sep{ width:1px; height:11px; background:var(--rule); }

/* Footer */
.foot{ margin-top:30px; padding-top:24px; border-top:1px solid var(--rule-soft); }
.foot-link{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--mute); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.foot-link:hover{ color:var(--brass-deep); border-color:var(--brass-soft); }
.sign{
  display:block; margin-top:18px;
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:19px;
  color:var(--brass-deep); letter-spacing:-.01em;
}
.caret{ display:inline-block; width:2px; height:1em; background:var(--brass);
  vertical-align:-2px; margin-left:3px; animation:blink 1.15s step-end infinite; }

/* Accessibilité / motion */
.btn:focus-visible, .foot-link:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:6px; }
@keyframes rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@keyframes blink{ 50%{opacity:0} }
@media (prefers-reduced-motion:reduce){
  .card{ animation:none } .btn,.arrow{ transition:none } .caret{ animation:none }
}
@media (max-width:380px){ .row{ flex-direction:column } .edition{ display:none } }