/* ==========================================================================
   The Circle — site vitrine
   Design de référence : design/MINUIT.dc.html (maquette MINUIT)
   Tokens : packages/shared/src/theme.ts
   ========================================================================== */

:root{
  --bg:#0A0A09;
  --bg-shell:#100F0E;
  --ink:#F2F0EC;
  --ink-soft:#EDEBE6;
  --white:#FFFFFF;
  --body:#B4AFA7;
  --dim:#8A857D;
  --muted:#77726B;
  --faint:#6B675F;
  --ghost:#5C5852;
  --dot:#4A4741;
  --on-ink:#0A0A09;
  --hairline:rgba(242,240,236,.08);
  --b-soft:rgba(242,240,236,.10);
  --b-line:rgba(242,240,236,.12);
  --b-control:rgba(242,240,236,.14);
  --b-edge:rgba(242,240,236,.16);
  --b-input:rgba(242,240,236,.20);
  --b-button:rgba(242,240,236,.22);
  --b-strong:rgba(242,240,236,.35);
  --b-focus:rgba(242,240,236,.50);
  --hatch:repeating-linear-gradient(135deg,#131211 0 10px,#181716 10px 20px);
  --serif:'Bodoni Moda',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--white)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font-family:inherit}
::-webkit-scrollbar{width:0;height:0}
::selection{background:var(--ink);color:var(--on-ink)}

/* ---- Keyframes (reprises de la maquette) ---- */
@keyframes scrIn{from{opacity:0;transform:translateY(10px) scale(.992)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pulseRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
@keyframes sweep{0%{transform:translateY(-100%)}100%{transform:translateY(220%)}}

/* ---- Primitives ---- */
.kicker{
  display:block;
  font:400 9px/1 var(--mono);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--dim);
}
.dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--dot);flex:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;padding:0 34px;border-radius:100px;
  font:600 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,border-color .2s,color .2s;
  white-space:nowrap;
}
.btn-solid{background:var(--ink);color:var(--on-ink)}
.btn-solid:hover{background:var(--white);color:var(--on-ink)}
.btn-ghost{border:1px solid var(--b-button);color:var(--ink);background:none}
.btn-ghost:hover{border-color:var(--b-focus);color:var(--white)}

.section{padding:96px 26px;border-top:1px solid var(--hairline)}
.section-head{margin-bottom:54px}
.section-title{
  margin:16px 0 0;
  font:400 clamp(38px,7vw,58px)/1.04 var(--serif);
  letter-spacing:-.01em;color:var(--ink);
}
.section-sub{
  margin:18px 0 0;max-width:400px;
  font:300 15px/1.6 var(--sans);color:var(--body);
  text-wrap:pretty;
}

/* ---- Reveal on scroll (discret) ---- */
.reveal{opacity:0}
.reveal.is-visible{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1}
  .reveal.is-visible,.hero-main,.hero-bottom,.hero-top{animation:none !important}
  .phone-media-sweep,.burn-dot i{animation:none !important;display:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   SÉLECTEUR DE LANGUE
   ========================================================================== */
.lang{
  display:flex;align-items:center;gap:2px;flex:none;flex-wrap:wrap;
  justify-content:flex-end;
}
.lang-btn{
  padding:6px 7px;border-radius:3px;
  font:400 10px/1 var(--mono);letter-spacing:.14em;
  color:var(--faint);
  transition:color .2s,background .2s;
}
.lang-btn[lang="zh"]{letter-spacing:.02em}
.lang-btn:hover{color:var(--ink)}
.lang-btn[aria-current="true"]{color:var(--ink);background:var(--b-soft)}
@media (min-width:760px){
  .lang{gap:4px}
  .lang-btn{padding:6px 8px;font-size:11px}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(28px,5vh,54px) 26px clamp(30px,5vh,48px);
  overflow:hidden;
}
.hero-scanlines{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(242,240,236,.05) 0 1px,transparent 1px 4px);
}
.hero-glow{
  position:absolute;left:-10%;right:-10%;top:0;height:38%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(242,240,236,.1),transparent 70%);
}
.hero-top{
  position:relative;padding-top:16px;animation:fadeIn 1s both;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.hero-kicker{
  font:400 9px/1 var(--mono);
  letter-spacing:.28em;text-transform:uppercase;color:var(--dim);
}
.hero-main{position:relative;animation:rise .7s .1s both cubic-bezier(.2,.8,.2,1)}
.wordmark{
  margin:0;
  font:400 clamp(88px,24vw,196px)/.82 var(--serif);
  letter-spacing:-.02em;color:var(--ink);
}
.hero-rule{margin-top:clamp(22px,3vh,34px);width:44px;height:1px;background:var(--ink)}
.hero-baseline{
  margin:22px 0 0;max-width:290px;
  font:300 15.5px/1.55 var(--sans);color:var(--body);
  text-wrap:pretty;
}
.hero-bottom{
  position:relative;
  display:flex;flex-direction:column;gap:22px;
  animation:rise .7s .25s both cubic-bezier(.2,.8,.2,1);
}
.burn{display:flex;align-items:center;gap:10px}
.burn-dot{position:relative;display:block;width:6px;height:6px;flex:none}
.burn-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ink)}
.burn-dot i{position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--b-strong);animation:pulseRing 2.4s ease-out infinite}
.burn-label{
  font:500 11px/1 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.burn-label .js-countdown{color:var(--ink);font-variant-numeric:tabular-nums}
.hero .btn{align-self:flex-start;padding:0 40px}

@media (min-width:760px){
  .hero{padding-left:8vw;padding-right:8vw}
  .hero-bottom{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}
  .hero-baseline{max-width:340px;font-size:17px}
  .burn-label{font-size:12px}
}

/* ==========================================================================
   SECTIONS — largeur éditoriale
   ========================================================================== */
@media (min-width:760px){
  .section{padding:130px 8vw}
}
.principles-grid,.feature-list,.section-head,.invite-inner{max-width:1060px;margin-left:auto;margin-right:auto}
.section-head{max-width:1060px}

/* ==========================================================================
   PRINCIPES
   ========================================================================== */
.principles-grid{display:grid;grid-template-columns:1fr;gap:0}
.principle{
  padding:34px 0;
  border-top:1px solid var(--hairline);
}
.principle-kicker{color:var(--dim);letter-spacing:.24em}
.principle-title{
  margin:16px 0 0;
  font:400 clamp(30px,5vw,42px)/1.04 var(--serif);
  letter-spacing:-.01em;color:var(--ink);
}
.principle-body{
  margin:16px 0 0;max-width:340px;
  font:300 15px/1.6 var(--sans);color:var(--body);
  text-wrap:pretty;
}
@media (min-width:860px){
  .principles-grid{grid-template-columns:repeat(3,1fr);gap:44px}
  .principle{padding:40px 0 0}
}

/* ==========================================================================
   FONCTIONNALITÉS — liste éditoriale (façon forums)
   ========================================================================== */
.feature-list{display:flex;flex-direction:column}
.feature{
  padding:22px 0 26px;
  border-top:1px solid rgba(242,240,236,.07);
  transition:background .25s;
}
.feature-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.feature-cat,.feature-when{
  font:400 8.5px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.pill-hot{
  padding:3px 7px;border-radius:100px;background:var(--ink);color:var(--on-ink);
  font:600 7.5px/1 var(--mono);letter-spacing:.14em;
}
.feature-title{
  margin:10px 0 0;
  font:400 clamp(21px,3.2vw,27px)/1.28 var(--serif);
  color:var(--ink-soft);text-wrap:pretty;letter-spacing:.005em;
}
.feature-body{
  margin:10px 0 0;max-width:520px;
  font:300 13.5px/1.65 var(--sans);color:var(--dim);
  text-wrap:pretty;
}
@media (min-width:760px){
  .feature{display:grid;grid-template-columns:220px 1fr;column-gap:40px;padding:28px 0 32px}
  .feature-meta{align-content:start;align-items:center}
  .feature-title{margin-top:0}
}

/* ==========================================================================
   APERÇU TÉLÉPHONE
   ========================================================================== */
.preview{overflow:hidden}
.phone-wrap{display:flex;justify-content:center;padding-top:10px}
.phone{
  position:relative;
  width:min(340px,88vw);
  border-radius:60px;padding:6px;
  background:linear-gradient(160deg,#3A3833,#161514 40%,#2B2A26);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(242,240,236,.06);
}
.phone-screen{
  position:relative;width:100%;
  border-radius:54px;overflow:hidden;background:var(--bg);
  padding-bottom:34px;
}
.phone-status{
  position:absolute;top:0;left:0;right:0;height:48px;z-index:4;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;pointer-events:none;
}
.phone-clock{font:500 12px/1 var(--mono);letter-spacing:.02em;color:var(--ink)}
.phone-status-right{display:flex;align-items:center;gap:6px}
.phone-signal{display:flex;align-items:flex-end;gap:2px;height:10px}
.phone-signal i{display:block;width:3px;background:var(--ink);border-radius:1px}
.phone-signal i.off{background:var(--b-strong)}
.phone-batt{display:block;width:22px;height:11px;border:1px solid rgba(242,240,236,.5);border-radius:3px;padding:1.5px}
.phone-batt i{display:block;width:70%;height:100%;background:var(--ink);border-radius:1.5px}
.phone-notch{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:96px;height:26px;border-radius:15px;background:#000;z-index:5;
}
.phone-header{
  padding:56px 20px 8px;
  display:flex;align-items:flex-end;justify-content:space-between;
}
.phone-wordmark{font:400 21px/1 var(--serif);letter-spacing:.02em;color:var(--ink)}
.phone-burn{margin-top:5px;display:flex;align-items:center;gap:6px}
.phone-burn i{display:block;width:4px;height:4px;border-radius:50%;background:var(--ink)}
.phone-burn span{font:500 8px/1 var(--mono);letter-spacing:.16em;color:var(--dim)}
.phone-burn .js-countdown{color:var(--dim);font-variant-numeric:tabular-nums}
.phone-icn{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--b-control);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.phone-rooms{display:flex;gap:8px;overflow:hidden;padding:8px 20px 14px}
.phone-room{flex:none;width:60px;display:flex;flex-direction:column;align-items:center;gap:6px}
.phone-room-card{
  width:54px;height:72px;border-radius:2px;border:1px solid var(--b-line);
  background:repeating-linear-gradient(135deg,#131211 0 8px,#181716 8px 16px);
  position:relative;
}
.phone-room:first-child .phone-room-card{border-color:var(--b-strong)}
.phone-room-tag{
  position:absolute;top:5px;right:5px;display:flex;align-items:center;gap:3px;
  padding:2px 5px;border-radius:100px;background:var(--ink);color:var(--on-ink);
  font:500 5.5px/1 var(--mono);letter-spacing:.1em;
}
.phone-room-tag i{display:block;width:3px;height:3px;border-radius:50%;background:var(--on-ink)}
.phone-room-name{font:500 8.5px/1.2 var(--sans);color:var(--body)}
.phone-post{padding:0}
.phone-post-head{display:flex;align-items:center;justify-content:space-between;padding:2px 20px 10px}
.phone-author{display:flex;align-items:center;gap:9px}
.phone-avatar{
  display:block;width:32px;height:32px;border-radius:50%;flex:none;
  border:1px solid var(--b-edge);
  background:repeating-linear-gradient(135deg,#131211 0 6px,#191817 6px 12px);
}
.phone-author-name{display:block;font:500 12px/1.2 var(--sans);letter-spacing:.01em;color:var(--ink)}
.phone-author-meta{display:block;margin-top:3px;font:400 7.5px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.phone-exp{
  display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:100px;
  border:1px solid var(--b-line);
  font:500 7.5px/1 var(--mono);letter-spacing:.12em;color:var(--body);
}
.phone-exp i{display:block;width:4px;height:4px;border-radius:50%;background:var(--ink)}
.phone-media{
  position:relative;height:280px;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  background:var(--hatch);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.phone-media-slot{font:400 8px/1 var(--mono);letter-spacing:.2em;color:var(--faint)}
.phone-media-sweep{
  position:absolute;left:0;right:0;height:40%;
  background:linear-gradient(180deg,transparent,rgba(242,240,236,.07),transparent);
  animation:sweep 3.4s linear infinite;
}
.phone-media-track{position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--b-control)}
.phone-media-track i{display:block;height:1px;width:38%;background:var(--ink)}
.phone-cap{
  margin:14px 20px 0;
  font:400 16px/1.4 var(--serif);letter-spacing:.005em;color:var(--ink-soft);
  text-wrap:pretty;
}
.phone-actions{display:flex;align-items:center;gap:8px;padding:14px 20px 0}
.phone-keep{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;
  border-radius:100px;border:1px solid var(--b-control);color:var(--body);
  font:600 8.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
}
.phone-comments{
  display:inline-flex;align-items:center;height:32px;padding:0 14px;
  border-radius:100px;border:1px solid var(--b-control);color:var(--body);
  font:600 8.5px/1 var(--sans);letter-spacing:.14em;
}
@media (min-width:900px){
  .preview{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:60px}
  .preview .section-head{margin-bottom:0}
  .phone-wrap{padding-top:0}
}

/* ==========================================================================
   INVITATION
   ========================================================================== */
.invite-inner{max-width:560px}
.invite-form{
  margin-top:44px;
  display:flex;flex-direction:column;gap:26px;
}
.invite-field{display:flex;flex-direction:column;gap:9px;flex:1}
.invite-label{
  font:400 8.5px/1 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.invite-input{
  height:52px;width:100%;
  background:none;border:0;border-bottom:1px solid var(--b-input);
  color:var(--ink);
  font:500 clamp(24px,7vw,30px)/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;
  outline:none;padding:0;border-radius:0;
  transition:border-color .2s;
}
.invite-input::placeholder{color:var(--ghost);text-transform:none}
.invite-input:focus{border-color:var(--ink)}
.invite-form .btn{align-self:flex-start;padding:0 44px}
.invite-result{
  margin:26px 0 0;
  font:400 21px/1.3 var(--serif);color:var(--ink-soft);
  animation:rise .5s cubic-bezier(.2,.8,.2,1) both;
}
.invite-result[hidden]{display:none}
.invite-note{
  margin-top:44px;
  display:flex;gap:10px;align-items:flex-start;
  padding:16px;border:1px solid var(--b-soft);border-radius:2px;
}
.invite-note i{display:block;width:6px;height:6px;background:var(--ink);border-radius:50%;margin-top:5px;flex:none}
.invite-note p{margin:0;font:300 12.5px/1.6 var(--sans);color:var(--dim)}
@media (min-width:640px){
  .invite-form{flex-direction:row;align-items:flex-end;gap:22px}
  .invite-form .btn{flex:none}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  border-top:1px solid var(--hairline);
  padding:64px 26px 46px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;background:var(--bg-shell);
}
.footer-mark{font:400 26px/1 var(--serif);letter-spacing:.02em;color:var(--ink)}
.footer-line{font:400 8.5px/1.7 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.footer-legal{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:4px;
}
.footer-legal a{
  font:400 9px/1.7 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  transition:color .2s;
}
.footer-legal a:hover{color:var(--ink)}
.footer-legal span{color:var(--ghost);font-size:9px}
.footer-wink{margin-top:8px;font:300 11.5px/1.65 var(--sans);color:var(--ghost);font-style:italic}

/* ==========================================================================
   BANDEAU COOKIES (ePrivacy) — informatif, aucun traceur tiers
   ========================================================================== */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:14px 22px;flex-wrap:wrap;
  padding:14px clamp(18px,5vw,40px);
  background:rgba(16,15,14,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--b-line);
  animation:rise .5s cubic-bezier(.2,.8,.2,1) both;
}
.cookie[hidden]{display:none}
.cookie-text{
  margin:0;flex:1 1 300px;max-width:640px;
  font:400 11px/1.55 var(--mono);letter-spacing:.03em;color:var(--body);
}
.cookie-actions{display:flex;align-items:center;gap:18px;flex:none}
.cookie-link{
  font:400 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--b-strong);
  transition:color .2s;
}
.cookie-link:hover{color:var(--ink)}
.cookie-btn{
  height:38px;padding:0 22px;border-radius:100px;
  border:1px solid var(--b-button);color:var(--ink);background:none;
  font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,border-color .2s,color .2s;
}
.cookie-btn:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.cookie{animation:none}}
[dir="rtl"] .cookie-text,[dir="rtl"] .cookie-link{letter-spacing:normal}


/* ============ Le fondateur ============ */
.founder-grid{display:grid;gap:36px;max-width:1040px;margin:0 auto;padding:0 24px;align-items:center}
.founder-photo{margin:0}
.founder-photo img{display:block;width:100%;max-width:420px;border-radius:2px;border:1px solid rgba(242,240,236,.12);filter:grayscale(1) contrast(1.04)}
.founder-body{max-width:52ch}
.founder-quote{margin:26px 0 0;padding:22px 20px;border:1px solid rgba(242,240,236,.1);border-radius:2px;font:400 22px/1.3 'Bodoni Moda',serif;color:#EDEBE6;text-align:center}
@media(min-width:840px){.founder-grid{grid-template-columns:minmax(280px,420px) 1fr;gap:56px}}


/* ==========================================================================
   RTL — arabe (dir="rtl")
   Le contenu passe en lecture droite→gauche ; les digits du compte à rebours
   restent neutres. On neutralise le letter-spacing sur les libellés (l'espacement
   casse les ligatures cursives de l'arabe) et on rétablit un alignement fluide.
   ========================================================================== */
[dir="rtl"] body{text-align:right}
[dir="rtl"] .wordmark,
[dir="rtl"] .footer-mark,
[dir="rtl"] .phone-wordmark,
[dir="rtl"] .invite-input{direction:ltr;text-align:left}
[dir="rtl"] .founder-quote{text-align:center}

/* Libellés : pas d'espacement de lettres en arabe (ligatures) */
[dir="rtl"] .kicker,
[dir="rtl"] .hero-kicker,
[dir="rtl"] .burn-label,
[dir="rtl"] .feature-cat,
[dir="rtl"] .feature-when,
[dir="rtl"] .pill-hot,
[dir="rtl"] .invite-label,
[dir="rtl"] .principle-kicker,
[dir="rtl"] .phone-author-meta,
[dir="rtl"] .phone-burn span,
[dir="rtl"] .phone-keep,
[dir="rtl"] .btn{letter-spacing:normal}

/* Le compte à rebours et le bloc « brûle » gardent l'ordre logique */
[dir="rtl"] .burn-label .js-countdown,
[dir="rtl"] .phone-burn .js-countdown{direction:ltr;unicode-bidi:isolate}

/* Le sélecteur de langue reste aligné au bord opposé, la garde en LTR (codes latins) */
[dir="rtl"] .lang{direction:ltr}