/* Import de la police IBM Plex Serif */
@import url('assets/css/fonts/IBM_Plex_Serif');

/* variables globales */
:root{
  --bg:#002892;
  --fg:#ffffff;
  --muted:#ebfd00;
  --link:#ebfd00;
  --card:#ffffff;
  --border:#e2e8f0;
  --accent:#ebfd00;
  --radius:14px;
  --maxw:1000px;
  --offset-x:clamp(12px,5vw,72px);
}

/* titre très grand sur la page */
.book-title-big{
  font-family:"IBM Plex Serif", serif;
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.02;
  text-align:center;
  margin:clamp(24px, 6vw, 80px) auto 12px;
  max-width:min(1200px, 92vw);
  font-size:clamp(20px, 10vw, 100px);
}

/* petit espace entre les deux lignes si <br> */
.book-title-big br{
  content:"";
  display:block;
  margin-bottom:.01em;
}

/* reset basique */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family:"IBM Plex Serif", serif;
  font-weight:400;
  line-height:1.6;
  font-size:16px;
}

/* liens */
a{
  color:var(--link);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

/* conteneur générique */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:24px;
}

/* header site */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in srgb, var(--bg) 92%, white);
  border-bottom:1px solid var(--border);
}
.site-header .inner{
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between;
  max-width:var(--maxw);
  margin:0 auto;
  padding:12px 24px;
}
.brand{
  font-weight:800;
  font-size:20px;
  letter-spacing:.2px;
}
.brand small{
  display:block;
  font-weight:500;
  font-size:12px;
  color:var(--muted);
}
.nav{
  display:flex;
  gap:16px;
  align-items:center;
}
.nav a{
  padding:8px 10px;
  border-radius:10px;
}
.nav a[aria-current="page"]{
  background:var(--card);
  border:1px solid var(--border);
  text-decoration:none;
}

/* bloc héro */
.hero{
  padding:12px 24px;
}
.hero h1{
  font-size:clamp(28px,3vw,42px);
  line-height:1.15;
  margin:.4em 0;
}
.hero .authors{
  color:var(--muted);
  margin-top:-10px;
}

/* barre recherche/tri */
.searchbar,
.pv-toolbar{
  margin:18px 0 6px 0;
  display:grid;
  grid-template-columns:1fr 160px;
  gap:12px;
}
.searchbar input[type="search"],
.pv-toolbar input[type="search"]{
  padding:14px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  width:100%;
  box-shadow:0 1px 0 rgba(255, 255, 255, 0.02);
  font-family:"IBM Plex Serif", serif;
}
.searchbar select,
.pv-toolbar select{
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  font-family:"IBM Plex Serif", serif;
}

/* chips de filtres */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 16px 0;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  font-size:13px;
  cursor:pointer;
}
.chip input{
  accent-color:var(--accent);
}

/* listes en cartes */
.list{
  display:grid;
  gap:8px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  display:grid;
  gap:6px;
  transition: box-shadow .15s ease, transform .02s ease;
}
.card:hover{
  box-shadow:0 8px 28px rgba(255, 255, 255, 0.06);
}
.card h3{
  margin:0;
  font-size:18px;
}
.card .meta{
  color:var(--muted);
  font-size:13px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.card .tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.tag{
  font-size:12px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 8px;
  background:#f1f5f9;
  color:#ffffff;
}


.section-title{
  margin:24px 0 8px 0;
  font-size:20px;
}


.pagination,
.pv-pager{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:18px 0;
}
.pagination button,
.pv-pager button{
  border:1px solid var(--border);
  background:var(--card);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-family:"IBM Plex Serif", serif;
}

footer{
  border-top:1px solid var(--border);
  margin-top:24px;
  background:color-mix(in srgb, var(--bg) 92%, white);
}
footer .inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 24px;
  color:var(--muted);
  font-size:14px;
}
.summary{
  color:var(--muted);
}

/* PAGE ARTICLE */
.article header h1{
  font-size:clamp(26px,3vw,38px);
}
.breadcrumbs{
  font-size:14px;
  color:var(--muted);
  margin-bottom:10px;
}
.article .keywords a{
  display:inline-block;
  margin-right:8px;
}
.article .text{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
}
.article .text p{
  margin:0 0 1em 0;
}
.readmore,
.footnotes,
.biography{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-top:12px;
}

/* centrage de l’intro */
body > h1,
.authors,
.pv-summary,
main > p:first-of-type{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  max-width:var(--maxw);
}

/* respiration de l’intro */
body > h1{
  margin-top:clamp(16px,5vw,48px);
  line-height:1.2;
}
.authors{
  margin-top:8px;
}
.pv-summary{
  margin:12px 0 18px;
  color:var(--muted);
}

/* décaler la zone recherche + listes + pagination */
.pv-wrap,
main,
.pv-pager{
  padding-left:var(--offset-x);
}

/* responsive */
@media (max-width:720px){
  .searchbar,
  .pv-toolbar{
    grid-template-columns:1fr;
  }
}
@media (max-width:640px){
  :root{ --offset-x:16px; }
  body > h1{ margin-top:24px; }
}

/* mise en page générale du contenu */
main{
  max-width:var(--maxw);
  margin:32px auto 48px;
  padding:0 24px;
}

/* titres de parties (1., 2., 3.) */
main h2{
  font-size:22px;
  margin:32px 0 12px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.3);
}

/* listes d’articles : GRID au lieu d’une seule colonne */
main ul{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  display:grid;
  gap:10px;
}

/* 2 colonnes à partir de 720px */
@media (min-width:720px){
  main ul{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* 3 colonnes à partir de 1100px */
@media (min-width:1100px){
  main ul{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* chaque <li> devient une petite carte */
main li{
  background:var(--card);
  color:#0f172a;
  border-radius:12px;
  border:1px solid var(--border);
  padding:10px 12px;
}

/* le lien à l’intérieur de la carte */
main li a{
  color:#0f172a;
}