/* =========================================================
   JE PENSE DONC JE SUIS — design (thème enfant Astra)
   À placer dans : astra-child/assets/theme.css
   ========================================================= */

/* ---------- 1. Jetons de couleur & polices ---------- */
:root{
  --bg:#090E22;              /* bleu nuit foncé */
  --bg-2:#0F1631;
  --bg-3:#15203F;
  --nav-bg:rgba(9,14,34,.88);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);
  --txt:#E8ECF6;
  --txt-soft:#99A2BC;
  --txt-faint:#5C6684;
  --orange:#FF7A33;          /* orange dominant */
  --orange-dim:#B5602B;
  --think:#34DCDC;           /* cyan */
  --glow:255,122,51;
  --dot:rgba(255,255,255,.04);
  --maxw:1200px;
}
html.light{
  --bg:#EFE6D4;              /* beige papier */
  --bg-2:#FAF4E7;
  --bg-3:#F3EAD9;
  --nav-bg:rgba(239,230,212,.9);
  --line:rgba(45,33,12,.15);
  --line-2:rgba(45,33,12,.08);
  --txt:#2B2412;
  --txt-soft:#6C6048;
  --txt-faint:#9A8E76;
  --orange:#D9590C;
  --orange-dim:#E6B98C;
  --think:#0E8F9C;
  --glow:217,89,12;
  --dot:rgba(45,33,12,.05);
}

/* ---------- 2. Base : applique le fond et la typo à tout le site ---------- */
body{
  background:#090E22 !important;
  color:var(--txt);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:22px 22px;background-position:-1px -1px;
  transition:background-color .3s,color .3s;
}
.jpdjs a{color:inherit;text-decoration:none;}
.jpdjs .wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px;}

/* ---------- 3. Petits éléments réutilisables ---------- */
.jpdjs .label{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);}
.jpdjs .meta{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--txt-faint);letter-spacing:.02em;}
.jpdjs .px{display:inline-block;width:7px;height:7px;background:var(--orange);margin-right:9px;
  vertical-align:middle;box-shadow:0 0 8px rgba(var(--glow),.5);}
.jpdjs .caret{display:inline-block;width:.55em;height:1em;background:var(--orange);
  margin-left:4px;transform:translateY(2px);animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

/* logo simple : pixel orange + coin cyan */
.mark{display:inline-flex;line-height:0;}
.mark svg{display:block;}
.mark .o{fill:var(--orange);}
.mark .c{fill:var(--think);}

/* bouton thème (sombre/clair) */
.theme{display:inline-flex;align-items:center;gap:7px;font-family:"JetBrains Mono",monospace;
  font-size:11.5px;letter-spacing:.04em;color:var(--txt-soft);background:none;cursor:pointer;
  border:1px solid var(--line);padding:7px 11px;transition:color .2s,border-color .2s;}
.theme:hover{color:var(--txt);border-color:var(--orange);}
.theme svg{display:block;}

/* bouton orange */
.jpdjs .btn{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:#2A1206;background:var(--orange);padding:8px 16px;transition:box-shadow .2s,filter .2s;}
.jpdjs .btn:hover{box-shadow:0 0 24px rgba(var(--glow),.5);filter:brightness(1.08);}

/* ---------- 4. HERO ---------- */
.hero{padding:74px 0 60px;}
.hero-inner{display:grid;grid-template-columns:1.45fr .85fr;gap:54px;align-items:center;}
.hero .ttl{font-family:"Bricolage Grotesque";font-weight:700;
  font-size:clamp(40px,6vw,78px);line-height:.97;letter-spacing:-.035em;margin:16px 0 24px;}
.hero .ttl .o{color:var(--orange);}
.hero .lead{font-size:19px;line-height:1.55;color:var(--txt-soft);max-width:30em;}
.hero .lead b{color:var(--txt);font-weight:600;}

.pixwrap{aspect-ratio:1;background:var(--bg-2);border:1px solid var(--line);padding:18px;position:relative;}
.pixwrap .tag{position:absolute;top:10px;left:14px;font-family:"JetBrains Mono",monospace;
  font-size:10px;color:var(--txt-faint);letter-spacing:.1em;z-index:1;}
#pixels{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;width:100%;height:100%;}
#pixels div{width:100%;aspect-ratio:1;}
@keyframes tw{0%,100%{opacity:var(--o);}50%{opacity:calc(var(--o) * .15);}}

/* ---------- 5. MENU RUBRIQUES (barre centrée, collante) ---------- */
nav.rubriques{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
nav.rubriques .wrap{display:flex;justify-content:center;flex-wrap:wrap;}
nav.rubriques a{font-family:"JetBrains Mono",monospace;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-soft);padding:15px 24px;position:relative;transition:color .2s;}
nav.rubriques a:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;
  transform:translateY(-50%);height:13px;width:1px;background:var(--line);}
nav.rubriques a:hover{color:var(--orange);}
nav.rubriques a.apropos{color:var(--txt-faint);}

/* ---------- 6. À LA UNE ---------- */
.alaune{padding:50px 0 10px;}
.feat{position:relative;border:1px solid var(--line);background:var(--bg-2);
  padding:34px 38px 34px 40px;display:grid;grid-template-columns:1fr 200px;gap:34px;align-items:center;}
.feat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);}
.feat h2{font-family:"Bricolage Grotesque";font-weight:700;font-size:clamp(26px,3.4vw,40px);
  line-height:1.05;letter-spacing:-.025em;margin:12px 0 14px;}
.feat h2 a{background-image:linear-gradient(var(--orange),var(--orange));background-size:0 2px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .4s ease;}
.feat h2 a:hover{background-size:100% 2px;}
.feat p{font-size:16.5px;color:var(--txt-soft);line-height:1.5;max-width:40em;}
.feat .side{text-align:right;}
.read{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--orange);
  display:inline-flex;align-items:center;gap:8px;}
.read .arr{transition:transform .25s;}
.read:hover .arr{transform:translateX(5px);}

/* ---------- 7. SECTIONS / DERNIERS ARTICLES ---------- */
.section{padding:50px 0;}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;}
.sec-head h2{font-family:"Bricolage Grotesque";font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt);display:flex;align-items:center;}
.sec-head a{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--orange);}
.sec-head a:hover{text-decoration:underline;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.card{background:var(--bg-2);border:1px solid var(--line-2);padding:24px;position:relative;
  transition:border-color .25s,transform .25s,box-shadow .25s;}
.card::after{content:"";position:absolute;top:10px;right:10px;width:6px;height:6px;
  background:var(--orange);opacity:0;transition:opacity .25s;box-shadow:0 0 10px var(--orange);}
.card:hover{border-color:rgba(var(--glow),.5);transform:translateY(-3px);
  box-shadow:0 14px 40px -18px rgba(var(--glow),.4);}
.card:hover::after{opacity:1;}
.card .label{font-size:10.5px;margin-bottom:14px;display:block;}
.card h3{font-family:"Bricolage Grotesque";font-weight:600;font-size:21px;line-height:1.15;
  letter-spacing:-.015em;margin-bottom:11px;}
.card p{font-size:14.5px;color:var(--txt-soft);line-height:1.5;margin-bottom:16px;}

/* ---------- 8. MODULES / EXPLORER PAR THÈME ---------- */
.modules{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.modules .wrap{padding:52px 34px;}
.modules .top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;}
.modules .top h2{font-family:"Bricolage Grotesque";font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;}
.modules .top p{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--txt-faint);}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px;}
.mod{border:1px solid var(--line-2);background:var(--bg-3);padding:22px;transition:border-color .25s,background .25s;}
.mod .idx{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--txt-faint);letter-spacing:.06em;}
.mod h3{font-family:"Bricolage Grotesque";font-weight:700;font-size:25px;letter-spacing:-.02em;margin:14px 0 8px;}
.mod p{font-size:13.5px;color:var(--txt-soft);line-height:1.45;min-height:3em;}
.mod .go{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--orange);margin-top:14px;
  display:inline-flex;gap:7px;}
.mod .go .a{transition:transform .25s;}
.mod:hover{border-color:rgba(var(--glow),.45);}
.mod:hover .go .a{transform:translateX(4px);}

/* ---------- 9. PREMISSE / TERMINAL ---------- */
.premise{padding:70px 0;}
.premise .box{border:1px solid var(--line);background:var(--bg-2);max-width:840px;margin:0 auto;}
.premise .bar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line-2);
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--txt-faint);}
.premise .bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block;}
.premise .bar i:first-child{background:var(--think);}
.premise .body{padding:34px 36px 40px;}
.premise .body .prompt{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--orange);margin-bottom:14px;}
.premise blockquote{font-family:"Bricolage Grotesque";font-weight:500;
  font-size:clamp(22px,3vw,32px);line-height:1.28;letter-spacing:-.02em;}
.premise blockquote .hl{color:var(--orange);}
.premise .who{margin-top:24px;font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--txt-faint);}
.premise .who a{color:var(--txt);border-bottom:1px solid var(--orange);}
.premise .who a:hover{color:var(--orange);}

/* ---------- 10. NEWSLETTER ---------- */
.news{border-top:1px solid var(--line);}
.news .wrap{padding:46px 34px;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;}
.news .t{font-family:"Bricolage Grotesque";font-weight:600;font-size:23px;letter-spacing:-.02em;max-width:16em;}
.news .t span{color:var(--orange);}
.news form{display:flex;gap:10px;flex:1;min-width:280px;max-width:430px;}
.news input{flex:1;background:var(--bg-2);border:1px solid var(--line);color:var(--txt);
  padding:12px 15px;font-family:"JetBrains Mono",monospace;font-size:13px;outline:none;}
.news input::placeholder{color:var(--txt-faint);}
.news input:focus{border-color:var(--orange);}
.news button{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;background:var(--orange);
  color:#2A1206;border:0;padding:12px 20px;cursor:pointer;transition:filter .2s;}
.news button:hover{filter:brightness(1.08);}

/* ---------- 11. RESPONSIVE ---------- */
@media(max-width:880px){
  .hero-inner{grid-template-columns:1fr;gap:34px;}
  .pixwrap{max-width:300px;}
  .feat{grid-template-columns:1fr;gap:20px;}
  .feat .side{text-align:left;}
  .cards{grid-template-columns:1fr;}
  .mgrid{grid-template-columns:1fr 1fr;}
  .news .wrap{flex-direction:column;align-items:flex-start;}
  .theme span{display:none;}
  nav.rubriques a{padding:13px 16px;}
}