/* accueil.css, propre à la page d'accueil. */

/* --- Hero, direction « Bleu encre » -------------------------------------
   Le premier écran est un grand aplat bleu nuit. Les disques du fond sont
   deux bleus de la gamme, jamais un dégradé. Le jaune n'y sert qu'au mot mis
   en avant et au bouton principal : c'est ce qui le rend visible. */
.hero {
  position: relative;
  background: var(--bleu-nuit);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; right: 3%; top: 44%; translate: 0 -50%;
  width: min(46vw, 540px); aspect-ratio: 1; border-radius: 50%;
  background: var(--bleu); opacity: .55;
}
.hero::after {
  content: "";
  position: absolute; left: -120px; bottom: -180px;
  width: min(340px, 75vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--bleu-vif); opacity: .3;
}
.hero > .wrap { position: relative; z-index: 1; }

.hero .eyebrow { background: rgba(255, 255, 255, .15); color: #fff; }

.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 960px) { .hero-grille { grid-template-columns: 1fr; } }

.hero h1 {
  font-size: var(--t-affiche);
  line-height: .98; letter-spacing: -.038em;
  max-width: 12ch; margin-bottom: var(--e3);
  color: #fff;
}
/* Sur fond sombre, le mot mis en avant passe au jaune : la terre cuite y
   serait à la fois illisible et hors gamme. */
.hero h1 .surligne { color: var(--jaune); }

.hero-accroche {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.6; color: #B9C9EA;
  max-width: 44ch; margin-bottom: var(--e4);
}
.hero-boutons { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (max-width: 420px) { .hero-boutons .btn { flex: 1 1 100%; } }

/* Le bouton fantôme du hero est sur fond sombre : il lui faut un contour
   clair, sinon il disparaît. */
.hero-boutons .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.hero-boutons .btn-ghost:hover { background: #fff; color: var(--bleu-nuit); border-color: #fff; }

/* La pile de couvertures */
.rayon-livres { display: flex; align-items: flex-end; justify-content: center; }
.rayon-livres img {
  width: clamp(88px, 16vw, 168px);
  aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 12px; background: var(--blanc);
  box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .6);
  animation: pose-livre .75s cubic-bezier(.2, .8, .3, 1) backwards;
  animation-delay: calc(var(--i) * 95ms + 120ms);
  transition: transform var(--transition);
}
.rayon-livres img:nth-child(1) { rotate: -9deg; margin-right: -24px; z-index: 1; }
.rayon-livres img:nth-child(2) { rotate: -3deg; margin-right: -20px; z-index: 2; }
.rayon-livres img:nth-child(3) { rotate: 0deg;  margin-right: -20px; z-index: 4; transform: translateY(-22px); }
.rayon-livres img:nth-child(4) { rotate: 4deg;  margin-right: -24px; z-index: 3; }
.rayon-livres img:nth-child(5) { rotate: 9deg;  z-index: 2; }
.rayon-livres img:hover { transform: translateY(-16px); z-index: 9; }
.rayon-livres img:nth-child(3):hover { transform: translateY(-38px); }

@media (max-width: 480px) {
  .rayon-livres img { width: clamp(64px, 19vw, 96px); }
  .rayon-livres img:nth-child(1) { margin-right: -14px; }
  .rayon-livres img:nth-child(2), .rayon-livres img:nth-child(4) { margin-right: -12px; }
  .rayon-livres img:nth-child(3) { margin-right: -12px; }
}
@keyframes pose-livre { from { opacity: 0; transform: translateY(38px); } }
@media (prefers-reduced-motion: reduce) { .rayon-livres img { animation: none; } }

.rayon-legende {
  text-align: center; margin-top: var(--e4);
  font-size: var(--t-mini); font-weight: 600; color: #8FA6CE;
}

/* --- Bande de chiffres --------------------------------------------------- */
.bande-chiffres { background: var(--encre); color: #fff; }
.bande-chiffres div { border-color: rgba(255, 255, 255, .12); }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .chiffres { grid-template-columns: 1fr; } }
.chiffres div { padding: var(--e4) var(--e3); border-right: 1px solid rgba(255, 255, 255, .14); }
.chiffres div:last-child { border-right: 0; }
@media (max-width: 640px) {
  .chiffres div { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
}
.chiffres strong {
  display: block;
  font-family: var(--font-titre);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: var(--jaune); margin-bottom: .5rem;
}
.chiffres span { font-size: var(--t-mini); font-weight: 600; color: #9FB5DC; }

/* --- Repères ------------------------------------------------------------- */
.reperes { background: var(--papier); }
.reperes-grille {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--e3); padding-block: var(--e5);
}
@media (max-width: 860px) { .reperes-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .reperes-grille { grid-template-columns: 1fr; } }
.repere { display: flex; gap: .9rem; align-items: flex-start; }
.repere svg {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 9px;
  border-radius: 50%; background: var(--bleu-voile); color: var(--bleu-fonce);
}
.repere h3 {
  font-family: var(--font-corps); font-size: .98rem; font-weight: 700;
  letter-spacing: 0; line-height: 1.3; margin: .4rem 0 .25rem;
}
.repere p { font-size: var(--t-mini); color: var(--encre-tenue); margin: 0; }

/* --- Niveaux ------------------------------------------------------------- */
.grille-niveaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
@media (max-width: 900px) { .grille-niveaux { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* --- Onglets des nouveautés ---------------------------------------------- */
.onglets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--e5); }
.onglet {
  appearance: none; border: 1px solid var(--ligne); background: var(--blanc);
  font-family: var(--font-corps); font-size: .9rem; font-weight: 700;
  color: var(--encre-douce);
  padding: .7rem 1.4rem; border-radius: var(--r-rond); cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.onglet:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
.onglet[aria-selected="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }

/* --- Collections --------------------------------------------------------- */
.bande-collections {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e2);
}
.puce-collection {
  display: block; padding: var(--e3);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r);
  text-decoration: none; color: #fff;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.puce-collection:hover { background: rgba(255, 255, 255, .07); border-color: var(--jaune); transform: translateY(-4px); }
.puce-collection strong {
  display: block; font-family: var(--font-titre);
  font-size: 1.3rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1;
  margin-bottom: .5rem;
}
.puce-collection span { font-size: var(--t-mini); color: #9FB5DC; }
.puce-collection:hover span { color: var(--jaune); }

/* --- Pour qui ------------------------------------------------------------ */
.public-grille {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 860px) { .public-grille { grid-template-columns: 1fr; } }
.public-liste { list-style: none; padding: 0; margin: var(--e3) 0 0; }
.public-liste li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: .8rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--ligne);
}
.public-liste li:first-child { border-top: 1px solid var(--ligne); }
.public-liste svg {
  width: 24px; height: 24px; padding: 5px; border-radius: 50%;
  background: var(--jaune); color: var(--encre); margin-top: 2px;
}
.public-liste strong { display: block; margin-bottom: .15rem; }
.public-liste span { font-size: var(--t-petit); color: var(--encre-douce); }

.mosaique { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.mosaique img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 12px; box-shadow: var(--ombre-livre);
}
.mosaique img:nth-child(2), .mosaique img:nth-child(5) { transform: translateY(24px); }

/* --- Services ------------------------------------------------------------ */
.grille-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
@media (max-width: 760px) { .grille-services { grid-template-columns: 1fr; } }
.service {
  background: var(--blanc); border: 1px solid var(--ligne);
  border-radius: var(--r-grand); padding: var(--e4);
  transition: transform var(--transition), box-shadow var(--transition);
}
.service:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); }
.service-icone {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; background: var(--bleu-voile); color: var(--bleu-fonce);
  margin-bottom: var(--e3);
  transition: background var(--transition), color var(--transition);
}
.service:hover .service-icone { background: var(--jaune); color: var(--encre); }
.service-icone svg { width: 24px; height: 24px; }
.service h3 { margin-bottom: .5rem; }
.service p { font-size: var(--t-petit); color: var(--encre-douce); margin: 0; }