/* components.css, les pièces du site public.

   Les primitives partagées avec l'administration (boutons, champs de
   formulaire, lien fléché) vivent dans base.css : les deux gabarits chargent
   base.css, un seul charge celui-ci.

   Ici :
   barre d'information, navigation, tiroir mobile, boutons, carte d'ouvrage,
   accordéon, formulaires, pied de page. */

/* ==========================================================================
   1. Barre d'information
   ========================================================================== */
.topbar {
  background: var(--bleu-nuit);
  color: #B9C9EA;
  font-size: var(--t-mini);
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); min-height: 40px;
}
.tb-info { margin: 0; }
.tb-liens { display: flex; gap: var(--e3); }
.tb-liens a { color: #DCE7FA; text-decoration: none; }
.tb-liens a:hover { color: var(--jaune); }
@media (max-width: 780px) { .tb-liens { display: none; } }

/* ==========================================================================
   2. Navigation
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--papier);
  border-bottom: 1px solid var(--ligne);
  transition: box-shadow var(--transition);
}
.nav.collee { box-shadow: 0 10px 26px -22px rgba(23, 35, 59, .6); }
.nav .wrap { display: flex; align-items: center; gap: var(--e2); min-height: 82px; }
@media (max-width: 420px) { .nav .wrap { gap: .6rem; min-height: 68px; } }

.brand { flex: 0 0 auto; display: block; }
.brand-logo { height: 46px; width: auto; max-width: 46vw; object-fit: contain; }

.nav-links { display: flex; align-items: center; gap: clamp(.2rem, 1vw, .6rem); margin-left: auto; }
.nav-links { list-style: none; margin: 0 auto 0 0; padding: 0; margin-left: auto; }
.nav-links > li { margin: 0; }
.nav-links a, .a-menu > .declencheur {
  display: inline-flex; align-items: center;
  padding: .6rem 1rem;
  border-radius: var(--r-rond);
  font-size: .95rem; font-weight: 600;
  color: var(--encre); text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.nav-links a:hover,
.a-menu > .declencheur:hover,
.a-menu:hover > .declencheur,
.nav-links a.current,
.nav-links .declencheur.current {
  background: var(--bleu-voile); color: var(--bleu-fonce);
}
.a-menu > .declencheur {
  font-family: var(--font-corps);
  border: 0; cursor: pointer; gap: .4rem;
}
.a-menu .chevron { width: 11px; height: 11px; opacity: .55; }
.a-menu:hover .chevron { transform: rotate(180deg); }
.chevron { transition: transform var(--transition); }
@media (max-width: 1080px) { .nav-links { display: none; } }

/* Mega-menu */
.a-menu { position: relative; }
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  translate: -50% 6px;
  width: min(860px, 92vw);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-grand);
  box-shadow: 0 30px 60px -30px rgba(23, 35, 59, .45);
  padding: var(--e4);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), translate var(--transition), visibility var(--transition);
}
.a-menu:hover > .mega, .a-menu:focus-within > .mega { opacity: 1; visibility: visible; translate: -50% 0; }
.mega h5 {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--bleu); margin: 0 0 var(--e2);
}
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li { margin: 0; }
.mega a {
  display: block; padding: .55rem .8rem; margin-left: -.8rem;
  border-radius: var(--r-petit);
  font-size: .96rem; font-weight: 600;
  color: var(--encre); text-decoration: none;
}
.mega a:hover { background: var(--bleu-voile); color: var(--bleu-fonce); }
.mega a small { display: block; font-size: var(--t-mini); font-weight: 400; color: var(--encre-tenue); }

/* Actions de droite */
.nav-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex: 0 0 auto; }
.nav-icone {
  position: relative;
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; flex: 0 0 auto;
  border: 1px solid var(--ligne); border-radius: 50%;
  background: var(--papier); color: var(--encre);
  text-decoration: none; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.nav-icone:hover { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.nav-icone svg { width: 19px; height: 19px; }
.pastille-panier[hidden] { display: none; }   /* sans cette ligne, le display:grid
                                                  ci-dessous l'emporte sur hidden et
                                                  la pastille « 0 » reste visible */
.pastille-panier {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-rond);
  background: var(--bleu-nuit); color: #fff;
  font-size: var(--t-micro); font-weight: 700; line-height: 1;
}
.nav-cta {
  display: inline-flex; align-items: center;
  padding: .8rem 1.3rem;
  border-radius: var(--r-rond);
  background: var(--bleu); color: #fff;
  font-size: .9rem; font-weight: 700; text-decoration: none;
  transition: background var(--transition);
}
.nav-cta:hover { background: var(--bleu-fonce); }
@media (max-width: 620px) { .nav-actions .nav-cta { display: none; } }

/* Bouton hamburger */
.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--ligne); border-radius: 50%;
  background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.burger span { display: block; width: 17px; height: 2px; background: var(--encre); border-radius: 2px; }
@media (max-width: 1080px) { .burger { display: flex; } }

/* ==========================================================================
   3. Tiroir mobile
   Le tiroir et son voile sont enfants directs de <body> : imbriqués dans la
   barre collante, ils resteraient prisonniers de son contexte d'empilement.
   ========================================================================== */
.nav-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(23, 35, 59, .55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.nav-overlay.ouvert { opacity: 1; visibility: visible; }

.mobile-menu {
  position: fixed; inset: 0 0 0 auto; z-index: 100;
  width: min(410px, 89vw);
  background: var(--papier);
  translate: 100% 0;
  transition: translate var(--transition);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu.ouvert { translate: 0 0; }
.mobile-menu__tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--ligne);
}
.mobile-menu__tete img { height: 40px; width: auto; }
.mobile-menu__close {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--ligne); border-radius: 50%;
  background: none; color: var(--encre); cursor: pointer;
}
.mobile-menu__links { padding: var(--e3); display: flex; flex-direction: column; }
.mobile-menu__links a {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--font-titre);
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.025em;
  color: var(--encre); text-decoration: none;
}
.mobile-menu__links a.sous {
  font-family: var(--font-corps); font-size: 1rem; font-weight: 600;
  letter-spacing: 0; padding-left: var(--e2); color: var(--encre-douce);
}
.mobile-menu__links a.current { color: var(--bleu-fonce); }
.mobile-menu__links .nav-cta {
  justify-content: center; border-bottom: 0;
  margin-top: var(--e3); color: #fff; font-family: var(--font-corps); font-size: .95rem;
}

/* ==========================================================================
   4. La carte d'ouvrage
   La tranche colorée à gauche encode le niveau scolaire : c'est de
   l'information, pas de la décoration.
   ========================================================================== */
.grille-livres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: var(--e5) var(--e3);
}
@media (max-width: 560px) {
  .grille-livres { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e4) var(--e2); }
  .livre-titre { font-size: .98rem; }
  .livre-resume { display: none; }
}

.livre { display: flex; flex-direction: column; }
.livre-lien { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }

.livre-visuel {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--papier-creux);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--ombre-livre);
  transition: transform var(--transition), box-shadow var(--transition);
}
.livre-visuel img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.livre-visuel::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; z-index: 2;
  background: var(--tranche, var(--bleu));
}
.livre-lien:hover .livre-visuel,
.livre-lien:focus-visible .livre-visuel {
  transform: translateY(-7px);
  box-shadow: var(--ombre-livre-levee);
}

/* Couverture absente : composée en typographie, jamais une image inventée. */
.livre-sans-couverture {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.5rem 1.2rem 1.2rem 1.6rem;
  background: var(--encre); color: #fff;
}
.livre-sans-couverture .lsc-titre {
  font-family: var(--font-titre); font-size: 1.15rem; font-weight: 700;
  line-height: 1.1; letter-spacing: -.025em;
}
.livre-sans-couverture .lsc-marque {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .18em; color: var(--jaune);
}

.pastille-promo {
  position: absolute; top: .7rem; right: .7rem; z-index: 3;
  background: var(--jaune); color: var(--encre);
  font-size: var(--t-micro); font-weight: 700;
  padding: .35rem .6rem; border-radius: var(--r-rond);
}

.livre-corps { display: block; flex: 1; padding-top: var(--e2); }
.livre-niveau {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tranche, var(--bleu));
  margin-bottom: .45rem;
}
.livre-niveau::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tranche, var(--bleu));
}
.livre-titre {
  display: block;
  font-family: var(--font-titre);
  font-size: 1.08rem; font-weight: 700;
  line-height: 1.2; letter-spacing: -.02em;
  margin: 0 0 .4rem;
}
.livre-lien:hover .livre-titre { color: var(--bleu-fonce); }
.livre-resume {
  font-size: var(--t-petit); color: var(--encre-douce); margin: 0 0 .6rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.livre-prix {
  display: flex; align-items: baseline; gap: .5rem;
  font-family: var(--font-titre); font-size: 1.25rem; font-weight: 700;
}
.livre-prix del { color: var(--encre-tenue); font-size: .95rem; font-weight: 500; }
.livre-prix .sur-demande {
  font-family: var(--font-corps); font-size: var(--t-mini); font-weight: 500; color: var(--encre-tenue);
}
.livre-action { margin-top: .85rem; align-self: flex-start; }
.livre-action.ajoute { background: var(--bleu); border-color: var(--bleu); color: #fff; }

/* ==========================================================================
   5. Carte de niveau
   ========================================================================== */
.carte-niveau {
  display: block;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-grand);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-niveau:hover {
  transform: translateY(-6px);
  border-color: var(--accent, var(--bleu));
  box-shadow: var(--ombre-carte);
}
.carte-niveau-image {
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--papier-creux);
  overflow: hidden;
}
.carte-niveau-image .pile { display: flex; gap: .6rem; padding: 1.4rem; }
.carte-niveau-image .pile img {
  width: 76px; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 8px; box-shadow: var(--ombre-livre);
  transition: transform var(--transition);
}
.carte-niveau-image .pile img:nth-child(1) { rotate: -6deg; }
.carte-niveau-image .pile img:nth-child(3) { rotate: 6deg; }
.carte-niveau:hover .pile img:nth-child(1) { transform: translate(-7px, -4px); }
.carte-niveau:hover .pile img:nth-child(3) { transform: translate(7px, -4px); }
.carte-niveau-corps { display: block; padding: var(--e3); border-top: 4px solid var(--accent, var(--bleu)); }
.carte-niveau-corps h3 { margin-bottom: .5rem; }
.carte-niveau:hover .carte-niveau-corps h3 { color: var(--bleu-fonce); }
.carte-niveau-corps p { font-size: var(--t-petit); color: var(--encre-douce); margin-bottom: .9rem; }
.carte-niveau-meta {
  display: block;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-tenue);
}

/* ==========================================================================
   6. Bandeau de page et fil d'Ariane
   ========================================================================== */
.bandeau {
  position: relative;
  background: var(--papier-creux);
  padding-block: var(--e5) var(--e6);
  overflow: hidden;
}
.bandeau::after {
  content: "";
  position: absolute; right: -110px; top: -110px;
  width: min(330px, 60vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--jaune); opacity: .38;
}
.page-epn .bandeau::after, .page-equipe .bandeau::after,
.page-services .bandeau::after, .page-faq .bandeau::after,
.page-contact .bandeau::after { display: none; }
.bandeau > .wrap { position: relative; z-index: 1; }
.bandeau h1 { font-size: var(--t-affiche); max-width: 15ch; margin-bottom: var(--e3); }
.bandeau p { color: var(--encre-douce); max-width: 54ch; margin: 0; font-size: 1.1rem; }

.fil {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  list-style: none; margin: 0 0 var(--e4); padding: 0;
  font-size: var(--t-mini); font-weight: 600; color: var(--encre-tenue);
}
.fil li { margin: 0; }
.fil a { color: var(--bleu-fonce); text-decoration: none; }
.fil a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   7. Accordéon
   ========================================================================== */
.accordeon { border-top: 1px solid var(--ligne); }
.accordeon-item { border-bottom: 1px solid var(--ligne); }
.accordeon-bouton {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: 1.5rem 0;
  background: none; border: 0;
  font-family: var(--font-titre);
  font-size: clamp(1.08rem, 1.6vw, 1.3rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25;
  color: var(--encre); text-align: left; cursor: pointer;
}
.accordeon-bouton:hover { color: var(--bleu-fonce); }
.accordeon-signe {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bleu-voile); color: var(--bleu-fonce);
  transition: background var(--transition), color var(--transition), rotate var(--transition);
}
.accordeon-bouton[aria-expanded="true"] .accordeon-signe { background: var(--jaune); color: var(--encre); rotate: 45deg; }
.accordeon-signe svg { width: 12px; height: 12px; }
.accordeon-panneau { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transition); }
.accordeon-panneau > div { overflow: hidden; }
.accordeon-item.ouvert .accordeon-panneau { grid-template-rows: 1fr; }
.accordeon-panneau p { padding-bottom: 1.5rem; color: var(--encre-douce); max-width: 62ch; }

/* ==========================================================================
   8. Appel à l'action de fin de page
   ========================================================================== */
.appel {
  position: relative; overflow: hidden;
  background: var(--bleu); color: #fff;
  border-radius: var(--r-grand);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: 1.5fr auto;
  gap: var(--e4); align-items: center;
}
.appel::before {
  content: "";
  position: absolute; right: -70px; bottom: -120px;
  width: min(300px, 70vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--jaune); opacity: .22;
}
.appel > * { position: relative; z-index: 1; }
@media (max-width: 800px) { .appel { grid-template-columns: 1fr; } }
.appel h2 { color: #fff; margin-bottom: .7rem; }
.appel p { color: rgba(255, 255, 255, .86); margin: 0; }
.appel-boutons { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ==========================================================================
   9. Notification d'ajout au panier
   ========================================================================== */
.notif-panier {
  position: fixed; right: var(--e2); bottom: var(--e2); z-index: 120;
  max-width: min(400px, calc(100vw - 2rem));
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.notif-panier.visible { opacity: 1; visibility: visible; transform: none; }
.notif-corps {
  display: flex; align-items: center; gap: .9rem;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-left: 5px solid var(--bleu);
  border-radius: var(--r);
  box-shadow: 0 20px 40px -20px rgba(23, 35, 59, .45);
  padding: .9rem 1rem;
}
.notif-corps svg { width: 20px; height: 20px; color: var(--bleu); flex: 0 0 auto; }
.notif-corps strong { display: block; font-size: var(--t-petit); }
.notif-corps span { font-size: var(--t-mini); color: var(--encre-tenue); }

/* ==========================================================================
   10. Pied de page
   ========================================================================== */
.foot {
  position: relative; overflow: hidden;
  background: var(--bleu-nuit); color: #B9C9EA;
  padding-block: var(--e6) var(--e3);
}
.foot::before {
  content: "";
  position: absolute; left: -140px; bottom: -160px;
  width: min(380px, 80vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--bleu-vif); opacity: .3;
}
.foot > .wrap { position: relative; z-index: 1; }
.foot-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr;
  gap: var(--e4);
  padding-bottom: var(--e5);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
@media (max-width: 940px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot .brand-logo { margin-bottom: var(--e3); }
.foot p { font-size: var(--t-petit); color: #9FB5DC; }
.foot h4 {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--jaune); margin: 0 0 var(--e2);
}
.foot-h4-2 { margin-top: var(--e4) !important; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .55rem; }
.foot a { color: #B9C9EA; text-decoration: none; font-size: var(--t-petit); }
.foot a:hover { color: #fff; }
.foot address { font-style: normal; font-size: var(--t-petit); line-height: 1.9; }

.reseaux { display: flex; gap: .55rem; margin-top: var(--e3); }
.reseaux a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.reseaux a:hover { background: var(--jaune); border-color: var(--jaune); color: var(--encre); }
.reseaux svg { width: 16px; height: 16px; }

.infolettre { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--e2); }
.infolettre .btn { flex: 0 0 auto; }
.infolettre input {
  flex: 1 1 10rem; min-width: 0; font: inherit; font-size: var(--t-petit);
  padding: .8rem 1rem;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-rond);
  background: rgba(255, 255, 255, .06); color: #fff;
}
.infolettre input::placeholder { color: #8FA6CE; }
.infolettre .formulaire-reponse { flex: 1 0 100%; }

.moyens-pied { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: var(--e3) 0 0; padding: 0; }
.moyens-pied li {
  margin: 0;
  font-size: var(--t-micro); font-weight: 700;
  padding: .3rem .65rem;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-rond);
  color: #B9C9EA;
}

.foot-bottom {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3);
  align-items: center; justify-content: space-between;
  padding-top: var(--e3);
  font-size: var(--t-mini);
}
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: var(--e3); }


/* ==========================================================================
   11. Tiroir de recherche
   Un simple formulaire GET vers la librairie : une fois déplié, il fonctionne
   sans JavaScript.
   ========================================================================== */
.tiroir-recherche {
  border-top: 1px solid var(--ligne);
  background: var(--papier-creux);
  padding-block: var(--e3);
}
.tiroir-recherche[hidden] { display: none; }
.tiroir-recherche form { display: flex; gap: .6rem; }
.tiroir-recherche input {
  flex: 1; font: inherit; font-size: 1.1rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--ligne); border-radius: var(--r-rond);
  background: var(--blanc);
}
.tiroir-recherche input:focus { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-voile); }

.recherche-mobile { margin-bottom: var(--e3); }
.recherche-mobile input {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--ligne); border-radius: var(--r-rond);
  background: var(--blanc);
}

/* Groupes dépliables du tiroir mobile */
.mobile-groupe { border-bottom: 1px solid var(--ligne); }
.sous-declencheur {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1.05rem 0;
  font-family: var(--font-titre);
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.025em;
  color: var(--encre); background: none; border: 0; cursor: pointer; text-align: left;
}
.sous-declencheur[aria-expanded="true"] svg { transform: rotate(180deg); }
.sous-declencheur svg { transition: transform var(--transition); }
.sous-menu { display: flex; flex-direction: column; padding-bottom: .8rem; }
.sous-menu[hidden] { display: none; }

/* Accès à l'administration, discret mais trouvable, dans le bas du pied. */
.foot-bottom .lien-admin {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--jaune);
}
.foot-bottom .lien-admin::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--jaune);
}