/* Amedi Legal — site vitrine. Clean modern dark (Linear / Vercel) :
   charbon profond, beaucoup d'air, Inter net, un seul accent chaud (argile). */

:root{
  --bg:#0a0a0c; --bg-2:#0e0e11; --panel:#121216; --panel-2:#141418;
  --ink:#ededf0; --ink-2:#b7b7c0; --muted:#82828d; --faint:#5a5a63;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --accent:#e0916f; --accent-2:#f0a884; --accent-deep:#cc785c; --accent-soft:rgba(224,145,111,.12);
  --shell:1080px; --r:14px; --ease:cubic-bezier(.22,.6,.25,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:"Inter",system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;}
.shell{max-width:var(--shell); margin:0 auto; padding:0 28px;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent-soft); color:#fff;}

html:not(.lang-ar) [data-ar]{display:none !important;}
html.lang-ar [data-fr]{display:none !important;}
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic","Tajawal","Geeza Pro",system-ui,sans-serif; line-height:1.85;}
/* l'arabe respire : interlignes plus généreux, pas d'interlettrage latin,
   et les libellés "mono" passent en sans arabe lisible. */
html[dir="rtl"] .kicker{font-family:"IBM Plex Sans Arabic",sans-serif; letter-spacing:0; font-size:.8rem;}
html[dir="rtl"] .lede{line-height:1.95;}
html[dir="rtl"] .nav-links a,html[dir="rtl"] .card p,html[dir="rtl"] .sect-sub,html[dir="rtl"] .pill,html[dir="rtl"] .trust,html[dir="rtl"] .mail{font-family:"IBM Plex Sans Arabic",sans-serif;}
html[dir="rtl"] .pill,html[dir="rtl"] .card-cap{letter-spacing:0;}
html[dir="rtl"] .spec-body,html[dir="rtl"] .spec-row .k{font-family:"IBM Plex Sans Arabic",sans-serif; letter-spacing:0;}
html[dir="rtl"] .spec-row .k{font-size:.7rem;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:10px; cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:600; letter-spacing:-.01em;
  padding:12px 20px; border:1px solid transparent; transition:.22s var(--ease); white-space:nowrap;}
.btn.sm{padding:9px 16px; font-size:.88rem;}
.btn-primary{position:relative; overflow:hidden; color:#1a0f0a; background:var(--accent); border-color:var(--accent);}
.btn-primary::after{content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-18deg);}
.btn-primary:hover::after{animation:shine .85s var(--ease);}
@keyframes shine{to{left:140%;}}
.btn-primary:hover{background:var(--accent-2); border-color:var(--accent-2); transform:translateY(-1px);}
.mag{will-change:transform;}
.btn-ghost{color:var(--ink); background:rgba(255,255,255,.04); border-color:var(--line-2);}
.btn-ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25);}
.btn .arr{transition:transform .22s var(--ease);} .btn:hover .arr{transform:translateX(3px);}
html[dir="rtl"] .btn .arr{transform:scaleX(-1);} html[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px);}

.dot{width:9px; height:9px; border-radius:50%; background:var(--accent); display:inline-block; flex:none;}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:40; transition:.25s;
  background:rgba(10,10,12,.6); backdrop-filter:blur(14px); border-bottom:1px solid transparent;}
.nav.scrolled{border-color:var(--line); background:rgba(10,10,12,.85);}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:66px;}
.brand{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:1.06rem; letter-spacing:-.02em; color:#fff;}
.brand b{color:var(--accent-2); font-weight:600;}
.brand-mark{flex:none; display:block;}
.wm .brand-mark{vertical-align:middle; margin-inline-end:8px;}
.nav-links{display:flex; gap:28px;}
.nav-links a{position:relative; font-size:.91rem; color:var(--muted); transition:.18s;}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px;
  background:var(--accent); border-radius:2px; transition:right .26s var(--ease);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{right:0;}
.nav-right{display:flex; align-items:center; gap:14px;}
.lang{display:inline-flex; gap:2px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:9px; padding:3px;}
.lang button{border:0; background:none; cursor:pointer; font:inherit; font-size:.8rem; color:var(--muted); padding:5px 10px; border-radius:6px; transition:.18s;}
.lang button.on{color:#1a0f0a; background:var(--accent);}
@media(max-width:760px){ .nav-links{display:none;} .nav-right .btn{display:none;} }

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:118px 0 96px;}
.hero-glow{position:absolute; top:-180px; left:50%; transform:translateX(-50%); width:900px; height:520px;
  background:radial-gradient(closest-side, rgba(224,145,111,.16), transparent 72%); pointer-events:none; filter:blur(8px);}
.hero-in{position:relative; z-index:2; max-width:820px;}
.hero-glow{animation:breathe 7s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.75; transform:translateX(-50%) scale(1);}50%{opacity:1; transform:translateX(-50%) scale(1.08);}}
/* entrée échelonnée du hero (active seulement si le JS d'anim tourne) */
html.anim-on .rise{opacity:0; transform:translateY(18px); animation:rise .8s var(--ease) forwards; animation-delay:var(--d,0s);}
@keyframes rise{to{opacity:1; transform:none;}}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:.82rem; font-weight:500; color:var(--ink-2);
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:40px; padding:6px 14px;}
.eyebrow .live{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(224,145,111,.5); animation:ping 2.4s var(--ease) infinite;}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(224,145,111,.5)}70%,100%{box-shadow:0 0 0 7px rgba(224,145,111,0)}}
.hero h1{margin:28px 0 0; font-weight:600; font-size:clamp(2.6rem,6vw,4.2rem); line-height:1.06; letter-spacing:-.035em; color:#fff; max-width:16ch;}
.hero h1 .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em;}
.hero h1 .wi{display:inline-block;}
html[dir="rtl"] .hero h1{line-height:1.5; letter-spacing:0; font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:600; max-width:24ch;}
.accent{color:var(--accent-2); font-family:"Newsreader",serif; font-style:italic; font-weight:400;}
html[dir="rtl"] .accent{font-family:"Amiri",serif; font-style:normal;}
.lede{margin-top:26px; font-size:1.18rem; color:var(--ink-2); max-width:54ch; line-height:1.6;}
.hero-cta{margin-top:34px; display:flex; gap:12px; flex-wrap:wrap;}
.trust{margin-top:46px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:.9rem; color:var(--muted);}
.trust .sep{width:4px; height:4px; border-radius:50%; background:var(--faint);}

/* ---------- stats band ---------- */
.stats-wrap{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2);}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:46px 28px;}
.stat{text-align:center; position:relative;}
.stat:not(:last-child)::after{content:""; position:absolute; right:-12px; top:14%; height:72%; width:1px; background:var(--line);}
html[dir="rtl"] .stat:not(:last-child)::after{right:auto; left:-12px;}
.stat-n{display:block; font-size:clamp(2.1rem,4.6vw,3.1rem); font-weight:700; letter-spacing:-.04em; color:#fff;
  font-variant-numeric:tabular-nums;}
.stat-l{display:block; margin-top:8px; font-size:.92rem; color:var(--muted);}
@media(max-width:680px){ .stats{grid-template-columns:1fr; gap:30px;} .stat:not(:last-child)::after{display:none;} }

/* ---------- sections ---------- */
.sect{padding:104px 0;}
.sect.tight{padding-top:20px;}
.sect-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.kicker{display:inline-block; font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-2); margin-bottom:16px;}
h2{font-weight:600; font-size:clamp(1.9rem,3.8vw,2.7rem); line-height:1.1; letter-spacing:-.03em; color:#fff;}
html[dir="rtl"] h2{line-height:1.45; letter-spacing:0; font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:600;}
.sect-sub{margin-top:16px; color:var(--muted); font-size:1.06rem; line-height:1.6;}

/* ---------- feature cards ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:30px 26px 28px; transition:.25s var(--ease);}
.card:hover{border-color:var(--line-2); background:var(--panel-2); transform:translateY(-3px);}
.card-no{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--accent-soft); color:var(--accent-2); font-family:"JetBrains Mono",monospace; font-size:.82rem; font-weight:500;}
.card h3{margin:20px 0 10px; font-size:1.3rem; font-weight:600; letter-spacing:-.02em; color:#fff;}
html[dir="rtl"] .card h3{font-family:"IBM Plex Sans Arabic",sans-serif; letter-spacing:0; line-height:1.5;}
.card p{color:var(--muted); font-size:1rem; line-height:1.62;}
.card-cap{display:block; margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:.84rem; color:var(--ink-2);}
.card-cap::before{content:"→ "; color:var(--accent);}
html[dir="rtl"] .card-cap::before{content:"← ";}

/* ---------- specimen ---------- */
.specimen-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.specimen-copy h2{margin-top:12px;} .specimen-copy .sect-sub{max-width:42ch;}
.pills{margin-top:24px; display:flex; gap:10px; flex-wrap:wrap;}
.pill{font-size:.82rem; color:var(--muted); border:1px solid var(--line); border-radius:40px; padding:7px 15px; background:rgba(255,255,255,.02);}
.pill b{color:var(--ink); font-weight:600;}
.specimen{background:linear-gradient(180deg,var(--panel),#0c0c0f); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);}
.spec-bar{display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02);}
.spec-bar .tdot{width:11px; height:11px; border-radius:50%; background:#2a2a30;}
.spec-bar .tdot:nth-child(1){background:#39393f;} .spec-name{margin-left:10px; font-family:"JetBrains Mono",monospace; font-size:.74rem; color:var(--faint); letter-spacing:.04em;}
html[dir="rtl"] .spec-name{margin-left:0; margin-right:10px;}
.redact{background:#2a2a30; color:#2a2a30; border-radius:2px; padding:0 4px;}
.spec-cursor{margin-left:auto; width:8px; height:15px; background:var(--accent); border-radius:1px; animation:caret 1.1s steps(1) infinite;}
html[dir="rtl"] .spec-cursor{margin-left:0; margin-right:auto;}
@keyframes caret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.spec-body{padding:18px 20px; font-family:"JetBrains Mono",monospace; font-size:.8rem;}
/* lignes révélées une à une quand la carte entre dans le champ */
.spec-row{transition:opacity .3s var(--ease), transform .3s var(--ease);}
/* effet "génération" : pendant le typage, les lignes pas encore atteintes
   restent cachées ; chacune apparaît quand la machine à écrire l'atteint. */
.specimen.generating .spec-row{opacity:0; transform:translateY(5px);}
.specimen.generating .spec-row.shown{opacity:1; transform:none;}
/* caret de frappe (style "génération en cours") */
.tcaret{display:inline-block; width:.55ch; height:1.05em; margin-left:1px; vertical-align:-.16em;
  background:var(--accent-2); border-radius:1px; animation:caret .9s steps(1) infinite;}
.spec-row{display:flex; flex-direction:column; gap:3px; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.06);}
.spec-row:last-child{border-bottom:0;}
.spec-row .k{font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);}
.spec-row .v{color:var(--ink-2);}
.spec-row .hot{color:var(--accent-2);}

/* ---------- why ---------- */
.why-grid{display:grid; grid-template-columns:.5fr 1fr; gap:56px; align-items:start;}
.why-side{position:sticky; top:96px;}
.why-msg .msg p{font-family:"Newsreader",serif; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.56; color:var(--ink); margin-bottom:20px;}
.why-msg .msg p:last-child{margin-bottom:0;}
.why-msg .msg b{color:var(--accent-2); font-weight:600;}
html[dir="rtl"] .why-msg .msg p{font-family:"Amiri",serif; line-height:2.05; font-size:clamp(1.3rem,2.2vw,1.6rem);}
html[dir="rtl"] .why-msg .msg b{font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:600;}
.sign{margin-top:26px; display:flex; align-items:center; gap:13px;}
.sign .av{width:44px; height:44px; border-radius:50%; background:var(--accent); color:#1a0f0a; display:grid; place-items:center; font-weight:700;}
.sign .who{font-weight:600; color:#fff;} .sign .role{font-size:.86rem; color:var(--muted);}
.sign .who a{color:var(--accent-2); border-bottom:1px solid var(--accent-deep); transition:.2s;}
.sign .who a:hover{color:var(--accent); border-color:var(--accent);}
.by-lab a{color:var(--accent-2); transition:.2s;}
.by-lab a:hover{color:var(--accent);}

/* ---------- cta ---------- */
.cta{position:relative; text-align:center; border:1px solid var(--line-2); border-radius:22px; padding:64px 28px; overflow:hidden;
  background:radial-gradient(700px 280px at 50% -10%, rgba(224,145,111,.14), transparent 70%), var(--bg-2);}
.cta h2{margin-top:12px;} .cta .sect-sub{max-width:46ch; margin-left:auto; margin-right:auto;}
.demo{margin:30px auto 0; max-width:560px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.demo input{flex:1 1 190px; background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:10px; color:#fff; font:inherit; font-size:.98rem; padding:13px 15px; transition:.18s;}
.demo input::placeholder{color:var(--faint);}
.demo input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.demo .btn{flex:0 0 auto;}
.demo-msg{margin-top:14px; font-family:"JetBrains Mono",monospace; font-size:.82rem; color:var(--accent-2);}
.mail{margin-top:22px; font-size:.92rem; color:var(--muted);}
.mail a{color:var(--accent-2); border-bottom:1px solid rgba(224,145,111,.4); padding-bottom:1px;}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line); padding:44px 0 60px;}
.ft-in{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.wm{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:1.16rem; color:#fff;}
.wm b{color:var(--accent-2);}
.motto{margin-top:10px; font-family:"Newsreader",serif; font-style:italic; color:var(--muted);}
html[dir="rtl"] .motto{font-family:"Amiri",serif; font-style:normal;}
.ft-meta{display:flex; flex-direction:column; gap:6px; text-align:right; font-size:.82rem; color:var(--faint);}
html[dir="rtl"] .ft-meta{text-align:left;}

/* ---------- reveal ---------- */
.reveal{transition:opacity .7s var(--ease), transform .7s var(--ease);}
html.anim-on .reveal:not(.in){opacity:0; transform:translateY(16px);}
.reveal.in{opacity:1; transform:none;}

@media(max-width:860px){
  .grid{grid-template-columns:1fr;}
  .specimen-grid,.why-grid{grid-template-columns:1fr; gap:32px;}
  .why-side{position:static;}
  .hero{padding:84px 0 70px;}
  .sect{padding:72px 0;}
  .ft-in{flex-direction:column; align-items:flex-start;} .ft-meta{text-align:left;}
}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1 !important; transform:none !important;} .eyebrow .live{animation:none;} }
