/* ============================================================
   LES ROBOTS SUR LE DIVAN — lesrobotssurledivan.com
   Feuille de style unique — NO AI · NO VFX · NO 3D
   ============================================================ */

:root{
  --noir:#1C1916;        /* fond principal — noir chaud */
  --noir-2:#242019;
  --papier:#EDE4D3;      /* texte principal */
  --kraft:#C9A97C;
  --kraft-sombre:#8A6F49;
  --moutarde:#D9A21B;    /* BiB-Lo */
  --gris:#8F8F8A;        /* GRub */
  --rouge:#C4502F;
  --trait:rgba(237,228,211,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--noir);
  color:var(--papier);
  font-family:'Space Grotesk',sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--moutarde)}

.wrap{max-width:1060px;margin:0 auto;padding:0 22px}

/* ---------- Rideaux d'ouverture (0/1) ---------- */
.rideau{
  position:fixed;top:0;height:100vh;width:51vw;z-index:999;
  background:var(--noir-2);
  color:rgba(201,169,124,.35);
  font-family:'Courier Prime',monospace;font-size:15px;line-height:1.9;
  overflow:hidden;white-space:break-spaces;word-break:break-all;
  padding:8px;user-select:none;pointer-events:none;
}
.rideau.g{left:0;border-right:2px solid var(--kraft-sombre);animation:ouvreG 1.1s .25s cubic-bezier(.7,0,.3,1) forwards}
.rideau.d{right:0;border-left:2px solid var(--kraft-sombre);animation:ouvreD 1.1s .75s cubic-bezier(.7,0,.3,1) forwards}
@keyframes ouvreG{to{transform:translateX(-101%)}}
@keyframes ouvreD{to{transform:translateX(101%)}}
@media (prefers-reduced-motion: reduce){.rideau{display:none}}

/* ---------- Navigation ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(28,25,22,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--trait);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.marque{font-family:'Archivo Black',sans-serif;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--papier);text-decoration:none}
.marque span{color:var(--moutarde)}
nav.principale{display:flex;gap:26px}
nav.principale a{
  color:var(--papier);text-decoration:none;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  font-family:'Courier Prime',monospace;
}
nav.principale a:hover{color:var(--moutarde)}
@media(max-width:640px){nav.principale{gap:16px}nav.principale a{font-size:12px}}

/* ---------- Hero ---------- */
.hero{padding:110px 0 90px;text-align:center;position:relative}
.hero .manifeste{
  font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:.32em;
  color:var(--rouge);text-transform:uppercase;margin-bottom:26px;
}
.hero h1{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(38px,8vw,84px);line-height:.98;text-transform:uppercase;
  margin-bottom:30px;
}
.hero h1 em{font-style:normal;color:var(--moutarde)}
.hero .pitch{font-size:clamp(17px,2.4vw,21px);color:var(--kraft);max-width:560px;margin:0 auto 42px}
.hero .devise{
  font-family:'Permanent Marker',cursive;color:var(--papier);opacity:.85;
  font-size:clamp(16px,2.4vw,20px);transform:rotate(-1deg);margin-top:52px;
}

.btn{
  display:inline-block;background:var(--moutarde);color:var(--noir);
  font-family:'Archivo Black',sans-serif;font-size:15px;text-transform:uppercase;letter-spacing:.05em;
  padding:16px 34px;text-decoration:none;border:2px solid var(--moutarde);
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--kraft-sombre)}
.btn.ghost{background:transparent;color:var(--papier);border-color:var(--kraft-sombre);margin-left:14px}
.btn.ghost:hover{border-color:var(--moutarde);color:var(--moutarde)}
@media(max-width:520px){.btn.ghost{margin-left:0;margin-top:12px}}

/* ---------- Sections ---------- */
section.bloc{padding:90px 0;border-top:1px solid var(--trait)}
.sur-titre{
  font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--kraft-sombre);margin-bottom:14px;
}
h2.titre{
  font-family:'Archivo Black',sans-serif;font-size:clamp(26px,4.6vw,42px);
  text-transform:uppercase;line-height:1.05;margin-bottom:22px;
}
.intro{color:var(--kraft);max-width:640px;margin-bottom:44px}

/* ---------- Robots ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--trait)}
@media(max-width:700px){.duo{grid-template-columns:1fr}}
.fiche{background:var(--noir-2);padding:44px 34px}
.fiche .nom{font-family:'Archivo Black',sans-serif;font-size:30px;text-transform:uppercase;margin-bottom:6px}
.fiche.bib .nom{color:var(--moutarde)}
.fiche.grb .nom{color:var(--gris)}
.fiche .role{font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--kraft-sombre);margin-bottom:18px}
.fiche p{font-size:15.5px;color:var(--papier);opacity:.9;margin-bottom:12px}
.fiche .tic{
  display:inline-block;font-family:'Courier Prime',monospace;font-weight:700;
  border:1.5px solid var(--kraft-sombre);padding:5px 12px;font-size:14px;margin-top:8px;
}

/* ---------- Shorts ---------- */
.grille-shorts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:820px){.grille-shorts{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
.short{background:var(--noir-2);border:1px solid var(--trait)}
.short .cadre{
  aspect-ratio:9/16;background:var(--noir);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.short .cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.short .attente{
  font-family:'Courier Prime',monospace;font-size:13px;color:var(--kraft-sombre);
  text-align:center;padding:20px;letter-spacing:.1em;
}
.short .infos{padding:18px 18px 22px}
.short .num{font-family:'Courier Prime',monospace;font-size:12px;color:var(--kraft-sombre);letter-spacing:.2em}
.short h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16.5px;margin-top:6px;line-height:1.35}

/* ---------- Bonus / email ---------- */
.bonus-boite{
  background:var(--papier);color:var(--noir);
  padding:64px 40px;text-align:center;position:relative;
}
.bonus-boite::before{
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:130px;height:26px;background:rgba(201,169,124,.6);border:1px dashed rgba(42,37,33,.25);
}
.bonus-boite h2{font-family:'Archivo Black',sans-serif;font-size:clamp(24px,4vw,36px);text-transform:uppercase;margin-bottom:14px}
.bonus-boite p{max-width:520px;margin:0 auto 10px;font-size:16px}
.bonus-boite .petit{font-size:13px;color:var(--kraft-sombre);font-family:'Courier Prime',monospace}
form.email{display:flex;gap:12px;justify-content:center;margin:30px auto 14px;max-width:520px;flex-wrap:wrap}
form.email input[type=email]{
  flex:1;min-width:240px;padding:15px 16px;font-size:16px;
  font-family:'Space Grotesk',sans-serif;border:2px solid var(--noir);background:#fff;color:var(--noir);
}
form.email button{
  background:var(--noir);color:var(--papier);border:2px solid var(--noir);
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:14px;
  padding:15px 26px;cursor:pointer;letter-spacing:.05em;
}
form.email button:hover{background:var(--rouge);border-color:var(--rouge)}

/* ---------- Manifeste ---------- */
.manif-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--trait);margin-top:10px}
@media(max-width:700px){.manif-liste{grid-template-columns:1fr}}
.manif-item{background:var(--noir-2);padding:34px 28px}
.manif-item .no{font-family:'Archivo Black',sans-serif;font-size:22px;color:var(--rouge);text-transform:uppercase;margin-bottom:10px}
.manif-item p{font-size:15px;opacity:.88}

/* ---------- Pied ---------- */
footer.site{border-top:1px solid var(--trait);padding:54px 0 40px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.f-col .t{font-family:'Courier Prime',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--kraft-sombre);margin-bottom:12px}
.f-col a{display:block;color:var(--papier);text-decoration:none;font-size:14.5px;margin-bottom:8px;opacity:.85}
.f-col a:hover{color:var(--moutarde);opacity:1}
.f-fin{width:100%;margin-top:34px;padding-top:22px;border-top:1px solid var(--trait);
  font-family:'Courier Prime',monospace;font-size:12px;color:var(--kraft-sombre);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

/* ---------- Pages internes ---------- */
.page-tete{padding:90px 0 40px}
.page-tete h1{font-family:'Archivo Black',sans-serif;font-size:clamp(30px,5.5vw,52px);text-transform:uppercase;line-height:1.02}
.prose{max-width:760px;padding-bottom:90px}
.prose h2{font-family:'Archivo Black',sans-serif;font-size:21px;text-transform:uppercase;margin:36px 0 12px;color:var(--moutarde)}
.prose p, .prose li{font-size:15.5px;opacity:.92;margin-bottom:10px}
.prose ul{padding-left:20px}

.carte-sys{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:13px;
  background:var(--noir-2);border:1.5px solid var(--kraft-sombre);color:var(--moutarde);
  display:inline-block;padding:4px 12px;letter-spacing:.08em;
}

/* Grille bonus */
.grille-bonus{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:34px}
.b-item{background:var(--noir-2);border:1px solid var(--trait);padding:30px 24px}
.b-item h3{font-family:'Archivo Black',sans-serif;font-size:16px;text-transform:uppercase;margin:10px 0 8px}
.b-item p{font-size:14px;opacity:.85}
.b-item.verrou{opacity:.55}