/* netritious.app */
: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 ---------- */
.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; align-items:center; gap:22px; font-size:14.5px;
          color:var(--texte-2); font-weight:500}
.tete nav a:hover{color:var(--accent)}
/* Le selecteur de langue : discret, mais toujours au meme endroit. */
.langue{
  border:1px solid var(--bordure); border-radius:99px; padding:4px 13px;
  font-size:13px; font-weight:600; letter-spacing:.3px;
}
.langue:hover{border-color:var(--accent); color:var(--accent)}
@media (max-width:600px){ .tete nav a:not(.langue){display:none} }

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

/* ---------- fil d'Ariane ---------- */
.fil{font-size:13px; color:var(--texte-3); padding:22px 0 0}
.fil a:hover{color:var(--accent)}
.fil span{opacity:.5; padding:0 7px}

/* ---------- 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 .note{font-size:14.5px; color:var(--texte-3); margin-top:16px}
.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)}
.bouton--gros{font-size:16.5px; padding:16px 32px}
/* Le bouton d'achat d'un livre pas encore en vente. Il doit se lire comme une
   information, jamais comme un bouton casse : pas de curseur d'action. */
.bouton--attente{
  background:transparent; color:var(--texte-3); border:1px dashed var(--bordure);
  cursor:default;
}
.bouton--attente:hover{background:transparent; border-color:var(--bordure);
  color:var(--texte-3); transform:none}

/* ---------- 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 repere de navigation : il doit se lire d'un coup
   d'oeil, comme sur la couverture. Vert assombri de 15 % pour que les
   caracteres noirs s'y detachent 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 : le bandeau d'identite ---------- */
.livre{display:grid; grid-template-columns:300px 1fr; gap:44px; padding:30px 0 24px; align-items:start}
@media (max-width:820px){ .livre{grid-template-columns:1fr; gap:28px} }
.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}

/* Les faits qui decident d'un achat, lisibles sans defiler. */
.reperes{display:flex; flex-wrap:wrap; gap:0; margin:0 0 28px;
         border:1px solid var(--bordure); border-radius:var(--r); overflow:hidden}
.reperes div{flex:1 1 118px; padding:14px 16px; border-right:1px solid var(--bordure)}
.reperes div:last-child{border-right:0}
.reperes .n{font-family:var(--f-dis); font-weight:800; font-size:21px; line-height:1.1}
.reperes .l{font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase;
            color:var(--texte-3); margin-top:5px}

/* ---------- le bloc d'offre ---------- */
/* Present uniquement sur la presentation promotionnelle. La version publique
   du site ne contient aucune de ces classes : ce n'est pas du CSS masque,
   c'est du HTML absent. */
.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 .bandeau{
  display:inline-block; font-family:var(--f-dis); font-weight:700; font-size:11px;
  letter-spacing:2.6px; text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.offre h2{font-size:23px; margin:0 0 10px}
.offre p{color:var(--texte-2); margin:0 0 14px}
/* La limite d'un mois par personne. Elle doit etre vue, pas trouvee. */
.offre .limite{
  display:flex; gap:11px; align-items:flex-start;
  background:rgba(7,213,129,.10); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:13px 16px; margin:18px 0 14px;
  color:var(--texte); font-weight:600; font-size:14.5px; line-height:1.5;
}
.offre .limite::before{content:"!"; font-family:var(--f-dis); font-weight:900;
  color:var(--accent); font-size:17px; line-height:1.3}
.offre .avis{margin:0}
.offre .avis a{color:var(--accent); font-weight:600; border-bottom:1px solid rgba(7,213,129,.4)}
.offre .avis a:hover{color:var(--accent-2); border-bottom-color:var(--accent-2)}

/* ---------- prose : la description du livre ---------- */
.prose{max-width:760px; color:var(--texte-2); font-size:16.5px; line-height:1.72}
.prose b, .prose strong{color:var(--texte); font-weight:650}
.prose i, .prose em{color:var(--texte-2)}
.prose h4{font-family:var(--f-dis); font-weight:700; font-size:17px; color:var(--texte);
          margin:26px 0 8px; letter-spacing:-.3px}
.prose ul, .prose ol{padding-left:22px; margin:12px 0}
.prose li{margin:5px 0}
.prose p{margin:0 0 14px}

/* ---------- le sommaire ---------- */
.sommaire{display:grid; gap:2px; counter-reset:ch}
.sommaire li{
  display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:baseline;
  padding:14px 16px; border-radius:10px; list-style:none;
}
.sommaire li:nth-child(odd){background:rgba(255,255,255,.028)}
.sommaire .n{font-family:var(--f-dis); font-weight:800; font-size:14px; color:var(--accent);
             letter-spacing:.5px}
.sommaire h3{font-family:var(--f-dis); font-weight:600; font-size:16.5px; line-height:1.35;
             margin:0; letter-spacing:-.2px; color:var(--texte)}
.sommaire p{margin:5px 0 0; font-size:13.5px; color:var(--texte-3); line-height:1.5}
@media (max-width:560px){ .sommaire li{grid-template-columns:34px 1fr; gap:10px; padding:12px 10px} }

/* ---------- la fiche technique ---------- */
.fiche{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0;
  border:1px solid var(--bordure); border-radius:var(--r); overflow:hidden;
}
.fiche > div{padding:16px 20px; border-bottom:1px solid var(--bordure);
             border-right:1px solid var(--bordure)}
.fiche dt{font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase;
          color:var(--texte-3); margin:0 0 6px}
.fiche dd{margin:0; font-size:15.5px; color:var(--texte); line-height:1.45}
.fiche dd.long{font-size:15px}

/* ---------- les sujets traites ---------- */
.sujets{display:flex; flex-wrap:wrap; gap:9px; padding:0; margin:0; list-style:none}
.sujets li{
  border:1px solid var(--bordure); border-radius:99px; padding:7px 15px;
  font-size:13.5px; color:var(--texte-2); background:var(--surface);
}

/* ---------- l'appel a l'achat ---------- */
.achat{
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--r);
  padding:32px; display:flex; gap:28px; align-items:center; flex-wrap:wrap;
}
.achat .texte{flex:1 1 300px}
.achat h2{font-size:26px; margin:0 0 8px}
.achat p{color:var(--texte-2); margin:0; font-size:15px}

/* ---------- volume precedent / suivant ---------- */
.suite{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:12px 0 0}
@media (max-width:640px){ .suite{grid-template-columns:1fr} }
.suite a{
  display:grid; grid-template-columns:54px 1fr; gap:14px; align-items:center;
  border:1px solid var(--bordure); border-radius:var(--r); padding:14px;
  transition:border-color .15s ease;
}
.suite a:hover{border-color:var(--accent)}
.suite a.droite{grid-template-columns:1fr 54px; text-align:right}
.suite a.droite > div:first-child{order:0}
.suite .l{font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--texte-3)}
.suite .t{font-family:var(--f-dis); font-weight:600; font-size:14.5px; line-height:1.3;
          margin-top:4px; letter-spacing:-.2px}

/* ---------- page de conditions ---------- */
.legal{max-width:760px; margin:0 auto; padding:0 0 40px}
.legal .version{
  display:inline-block; font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--texte-3); border:1px solid var(--bordure); border-radius:99px;
  padding:6px 14px; margin-bottom:26px;
}
.legal .resume{
  background:rgba(7,213,129,.09); border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; padding:18px 22px; margin:0 0 40px;
  font-size:16.5px; line-height:1.6; color:var(--texte);
}
.legal h2{font-family:var(--f-dis); font-weight:700; font-size:20px; letter-spacing:-.4px;
          margin:38px 0 12px; padding-top:22px; border-top:1px solid var(--bordure)}
.legal h2:first-of-type{border-top:0; padding-top:0}
.legal p{color:var(--texte-2); font-size:15.5px; line-height:1.7; margin:0 0 13px}
.legal p b{color:var(--texte)}

/* ---------- 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 bibliotheque : elles
   apparaissent partout, pas seulement sur la page d'un livre. Tout livre dont
   la couverture n'est pas encore rendue recoit 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);
}
/* height:auto est obligatoire : les attributs width/height du <img> (qui
   reservent la place et evitent que la page sursaute au chargement) sont
   appliques par le navigateur comme un style, et imposeraient sinon une
   hauteur de 2560 px. */
.couv{width:100%; height:auto; 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'etagere 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'etagere se depeuple 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 a gauche, texte a 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;
}