/* netritious.app — structure reprise de pierrevinet.com,
   palette et typographie reprises des couvertures de l'encyclopedie. */
:root{
  --ink-0:#05100D; --ink-1:#0A1F1A; --ink-2:#102A23;
  --surface:rgba(255,255,255,.04); --bordure:rgba(255,255,255,.10);
  --texte:#F2F7F5; --texte-2:#A9C4BA; --texte-3:#6E8B82;
  --accent:#07D581; --accent-2:#32FFC7;
  --f-dis:'Outfit',system-ui,sans-serif; --f:'Inter',system-ui,sans-serif;
  --max:1120px; --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:
    radial-gradient(120% 60% at 50% -10%, #12352C 0%, var(--ink-0) 60%),
    var(--ink-0);
  background-attachment:fixed;
  color:var(--texte); font-family:var(--f); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---------- en-tete translucide, comme pierrevinet.com ---------- */
.tete{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px max(24px,calc((100vw - var(--max))/2));
  background:rgba(5,16,13,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bordure);
}
.marque{font-family:var(--f-dis); font-weight:700; font-size:25px; letter-spacing:-1px}
.marque span{color:var(--accent)}
.tete nav{display:flex; gap:26px; font-size:14.5px; color:var(--texte-2); font-weight:500}
.tete nav a:hover{color:var(--accent)}

main{max-width:var(--max); margin:0 auto; padding:0 24px}

/* ---------- heros ---------- */
.hero{padding:96px 0 72px; text-align:center}
.hero .bandeau{
  display:inline-block; font-family:var(--f-dis); font-weight:700; font-size:12.5px;
  letter-spacing:3.4px; text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(7,213,129,.35); border-radius:99px; padding:7px 16px; margin-bottom:26px;
}
.hero h1{
  font-family:var(--f-dis); font-weight:800; font-size:clamp(38px,6.2vw,68px);
  line-height:1.04; letter-spacing:-2px; margin:0 0 20px;
}
.hero p{max-width:640px; margin:0 auto; color:var(--texte-2); font-size:18px}
.hero .actions{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap}

.bouton{
  display:inline-block; font-family:var(--f-dis); font-weight:700; font-size:15px;
  padding:13px 26px; border-radius:11px; background:var(--accent); color:#04150F;
  border:1px solid var(--accent); transition:transform .15s ease, background .15s ease;
}
.bouton:hover{background:var(--accent-2); border-color:var(--accent-2); transform:translateY(-1px)}
.bouton--fant{background:transparent; color:var(--texte); border-color:var(--bordure)}
.bouton--fant:hover{background:var(--surface); border-color:var(--accent); color:var(--accent)}

/* ---------- sections ---------- */
section{padding:56px 0}
h2{font-family:var(--f-dis); font-weight:800; font-size:clamp(26px,3.4vw,38px);
   letter-spacing:-1px; margin:0 0 10px}
.chapo{color:var(--texte-2); max-width:640px; margin:0 0 34px}

.grille{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.carte{
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--r);
  padding:22px; transition:border-color .15s ease, transform .15s ease;
}
a.carte:hover{border-color:var(--accent); transform:translateY(-2px)}
/* Le code du livre est un repère de navigation : il doit se lire d'un coup
   d'œil, comme sur la couverture. Vert assombri de 15 % pour que les
   caractères noirs s'y détachent nettement. */
.code{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-dis); font-weight:900; font-size:16px; line-height:1;
  letter-spacing:.4px; min-width:44px; height:30px; padding:0 11px;
  border-radius:9px; margin-bottom:11px;
  background:color-mix(in srgb, var(--c, var(--accent)) 85%, #02120C);
  color:#02120C;
}
.code--coll{font-size:12.5px; letter-spacing:1.2px; height:26px; min-width:0; padding:0 12px}
.carte h3{font-family:var(--f-dis); font-weight:700; font-size:18.5px; line-height:1.25;
          margin:0 0 7px; letter-spacing:-.4px}
.carte p{color:var(--texte-2); font-size:14px; margin:0; line-height:1.55}
.carte .faits{color:var(--texte-3); font-size:12.5px; margin-top:12px}

/* ---------- page d'un livre ---------- */
.livre{display:grid; grid-template-columns:300px 1fr; gap:44px; padding:64px 0 24px; align-items:start}
@media (max-width:820px){ .livre{grid-template-columns:1fr} }
.livre img.couv{width:100%; border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.55)}
.livre .coll{font-size:12px; letter-spacing:2.6px; text-transform:uppercase; color:var(--accent); font-weight:600}
.livre h1{font-family:var(--f-dis); font-weight:800; font-size:clamp(30px,4.4vw,46px);
          line-height:1.08; letter-spacing:-1.4px; margin:12px 0 10px}
.livre .st{color:var(--texte-2); font-size:18px; margin:0 0 26px}

.offre{
  background:linear-gradient(135deg, rgba(7,213,129,.13), rgba(7,213,129,.03));
  border:1px solid rgba(7,213,129,.32); border-radius:var(--r); padding:26px; margin:6px 0 30px;
}
.offre h2{font-size:23px; margin:0 0 8px}
.offre p{color:var(--texte-2); margin:0 0 16px}
.offre .avis{font-size:13.5px; color:var(--texte-3); margin:16px 0 0; line-height:1.55}

.tableau{width:100%; border-collapse:collapse; font-size:14.5px; margin-top:8px}
.tableau td{padding:9px 0; border-bottom:1px solid var(--bordure); color:var(--texte-2)}
.tableau td:first-child{color:var(--texte-3); width:160px}

/* ---------- redirection ---------- */
.redir{min-height:72vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 24px}
.redir .boite{max-width:430px}
.redir .rond{
  width:52px; height:52px; margin:0 auto 22px; border-radius:50%;
  border:3px solid rgba(7,213,129,.25); border-top-color:var(--accent);
  animation:tourne 1s linear infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}


/* ---------- couvertures ----------
   Les couvertures sont le meilleur argument de vente de la bibliothèque : elles
   apparaissent partout, pas seulement sur la page d'un livre. Tout livre dont
   la couverture n'est pas encore rendue reçoit un substitut lisible, pour que
   la grille ne se troue pas pendant la production. */
.couv, .couv-vide{
  aspect-ratio:1600/2560; border-radius:8px; display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.5); background:var(--ink-1);
}
.couv{width:100%; object-fit:cover}
.couv-vide{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-dis); font-weight:800; font-size:20px; letter-spacing:1px;
  color:rgba(255,255,255,.28); border:1px solid var(--bordure);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.25));
}

/* --- l'étagère du haut de page --- */
.etagere{
  display:flex; justify-content:center; align-items:flex-end; gap:0;
  margin:10px 0 52px; padding:0; perspective:1400px;
}
.etagere a{
  width:186px; flex:none; margin:0 -13px;
  transition:transform .22s ease;
}
.etagere a:nth-child(odd){transform:translateY(12px) rotate(-2deg)}
.etagere a:nth-child(even){transform:translateY(-8px) rotate(2deg)}
.etagere a:hover{transform:translateY(-18px) rotate(0deg) scale(1.07); z-index:5; position:relative}
/* L'étagère se dépeuple avant de rapetisser : mieux vaut quatre couvertures
   lisibles que sept illisibles. */
@media (max-width:1180px){ .etagere a:nth-child(n+7){display:none} .etagere a{width:168px} }
@media (max-width:980px){  .etagere a:nth-child(n+6){display:none} .etagere a{width:152px} }
@media (max-width:760px){  .etagere a:nth-child(n+5){display:none} .etagere a{width:128px} }
@media (max-width:520px){  .etagere a:nth-child(n+4){display:none} .etagere a{width:112px} }

/* --- carte de livre : couverture à gauche, texte à droite --- */
a.carte-livre{
  display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start;
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--r);
  padding:16px; transition:border-color .15s ease, transform .15s ease;
}
a.carte-livre:hover{border-color:var(--accent); transform:translateY(-2px)}
a.carte-livre h3{font-family:var(--f-dis); font-weight:700; font-size:16.5px;
  line-height:1.25; margin:0 0 6px; letter-spacing:-.3px}
a.carte-livre p{color:var(--texte-2); font-size:13px; margin:0; line-height:1.5}
a.carte-livre .faits{color:var(--texte-3); font-size:12px; margin-top:9px}

/* --- carte de collection : une couverture en vedette --- */
a.carte-coll{display:grid; grid-template-columns:78px 1fr; gap:15px; align-items:center}

/* --- bandeau de collection dans l'index --- */
.coll-tete{display:flex; align-items:flex-end; gap:20px; margin:0 0 24px; flex-wrap:wrap}
.coll-tete .vignette{width:86px; flex:none}
.coll-tete .texte{flex:1; min-width:260px}
.coll-tete h2{margin:0 0 6px}

/* ---------- pied ---------- */
.pied{border-top:1px solid var(--bordure); margin-top:72px; background:rgba(5,16,13,.6)}
.pied-grille{
  max-width:var(--max); margin:0 auto; padding:46px 24px 30px;
  display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.pied h4{font-family:var(--f-dis); font-size:13px; letter-spacing:1.8px; text-transform:uppercase;
         color:var(--texte-3); margin:0 0 12px; font-weight:600}
.pied a{display:block; color:var(--texte-2); font-size:14.5px; padding:3px 0}
.pied a:hover{color:var(--accent)}
.marque--pied{font-size:21px; margin-bottom:8px}
.fin{color:var(--texte-3); font-size:14px; margin:0; line-height:1.6}
.pied-bas{
  max-width:var(--max); margin:0 auto; padding:16px 24px 34px;
  border-top:1px solid var(--bordure); display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; color:var(--texte-3); font-size:12.5px;
}