/* ==========================================================================
   Manuels scolaires de mathematiques Mathovore — boutique
   Charte de mathovore.fr/maths-escape-game.html : fond blanc, en-tete bleu
   clair, badges de niveau en degrade avec reflet, cartes a image haute.
   Feuille partagee avec les pages de caisse mathovore.fr/livres/ (cache 10 ans :
   monter ?v= dans build.py ET dans BOUTIQUES['mathovore']['css']).
   ========================================================================== */

:root {
  --encre: #1e293b;
  --texte: #2d3748;
  --doux: #475569;
  --pale: #64748b;
  --bleu: #3b82f6;
  --bleu-fonce: #1e40af;
  --bleu-nuit: #1d4ed8;
  --ciel: #e0f2fe;
  --neige: #f8fafc;
  --bord: #e2e8f0;
  --vert: #16a34a;
  --rouge: #dc2626;
  --or: #f59e0b;
  --paypal: #ffc439;
  --paypal-fonce: #f2ae0e;
  --c1: #3b82f6;
  --c2: #2563eb;
  --ombre: 0 4px 20px rgba(0, 0, 0, .08);
  --ombre-forte: 0 15px 40px rgba(59, 130, 246, .28);
  --police: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--police); background: #fff; color: var(--texte); line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--bleu-nuit); }
strong { color: var(--encre); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.largeur { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.etroit { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* Couleur de chaque niveau (les memes noms de classe que la caisse). */
.t-rose      { --c1: #f43f5e; --c2: #e11d48; }  /* CP  */
.t-rouge     { --c1: #f97316; --c2: #ea580c; }  /* CE1 */
.t-ambre     { --c1: #eab308; --c2: #ca8a04; }  /* CE2 */
.t-lime      { --c1: #22c55e; --c2: #16a34a; }  /* CM1 */
.t-cyan      { --c1: #06b6d4; --c2: #0891b2; }  /* CM2 */
.t-vert      { --c1: #6366f1; --c2: #4f46e5; }  /* 6e  */
.t-bleu      { --c1: #14b8a6; --c2: #0d9488; }  /* 5e  */
.t-orange    { --c1: #3b82f6; --c2: #2563eb; }  /* 4e  */
.t-violet    { --c1: #8b5cf6; --c2: #7c3aed; }  /* 3e  */
.t-turquoise { --c1: #f59e0b; --c2: #d97706; }  /* 2de */
.t-indigo    { --c1: #ef4444; --c2: #dc2626; }  /* 1re */
.t-fuchsia   { --c1: #ec4899; --c2: #db2777; }  /* Tle */

/* --- Bandeau et menu du site (defilent avec la page) --------------------- */
.mv-logo-bandeau { display: block; width: 100%; margin: 0; padding: 0; line-height: 0; }
.mv-logo-bandeau img { display: block; width: 100%; height: auto; }
.mv-menu {
  position: static; display: flex; flex-wrap: wrap; margin: 0; padding: 0 0 0 16px;
  background: linear-gradient(180deg, #2563eb, #0d9488, #7c3aed, #ea580c, #db2777, #dc2626, #16a34a, #0891b2) left / 16px 100% no-repeat, #2563eb;
}
.mv-menu a {
  flex: 1 1 0; display: block; margin: 0; padding: 20px 17px; border-radius: 0;
  background: var(--mvm); color: #fff; text-align: center; text-decoration: none;
  font-weight: 700; font-size: .98rem; letter-spacing: .01em; white-space: nowrap;
  transition: background-color .18s;
}
.mv-menu a:hover, .mv-menu a:focus-visible { background: var(--mvh); }
.mv-menu .google-auto-placed { display: none !important; }
@media (max-width: 900px) {
  .mv-menu { padding-left: 0; background: #2563eb; }
  .mv-menu a { flex: 1 1 25%; padding: 13px 8px; font-size: .9rem; }
}
@media (max-width: 480px) { .mv-menu a { flex-basis: 50%; } }

/* --- En-tete ------------------------------------------------------------- */
.entete-boutique {
  position: relative; padding: 46px 20px 58px; text-align: center; overflow: hidden;
  background: linear-gradient(135deg, var(--neige) 0%, var(--ciel) 100%);
}
.entete-boutique::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 30%, rgba(59, 130, 246, .12), transparent 50%),
    radial-gradient(circle at 82% 70%, rgba(147, 197, 253, .18), transparent 60%);
}
.entete-boutique > * { position: relative; z-index: 1; }
.surtitre {
  display: inline-block; margin: 0 0 14px; padding: 6px 16px; border-radius: 99px;
  background: #fff; border: 2px solid #bfdbfe; color: var(--bleu-nuit);
  font-weight: 800; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase;
}
.entete-boutique h1 {
  margin: 0 auto 16px; max-width: 980px; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; line-height: 1.12;
  background: linear-gradient(135deg, #1e40af, #3b82f6, #60a5fa);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.sous-titre { margin: 0 auto; max-width: 760px; font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--pale); }

.pile {
  display: flex; justify-content: center; align-items: flex-end; margin: 34px auto 0; max-width: 1000px;
  perspective: 900px;
}
.pile a { flex: 0 1 132px; margin: 0 -14px; transition: transform .35s cubic-bezier(.175, .885, .32, 1.275); }
.pile a:nth-child(1) { transform: rotate(-9deg) translateY(18px); }
.pile a:nth-child(2) { transform: rotate(-6deg) translateY(8px); }
.pile a:nth-child(3) { transform: rotate(-3deg) translateY(2px); }
.pile a:nth-child(4) { transform: rotate(0deg) translateY(-4px); z-index: 2; }
.pile a:nth-child(5) { transform: rotate(3deg) translateY(2px); }
.pile a:nth-child(6) { transform: rotate(6deg) translateY(8px); }
.pile a:nth-child(7) { transform: rotate(9deg) translateY(18px); }
.pile a:hover { transform: translateY(-22px) scale(1.08) !important; z-index: 3; }
.pile img { display: block; width: 100%; border-radius: 10px; box-shadow: 0 18px 34px -14px rgba(15, 23, 42, .55); }
@media (max-width: 700px) { .pile a:nth-child(n+6) { display: none; } .pile a { flex-basis: 96px; margin: 0 -10px; } }

/* --- Chiffres et encadre ------------------------------------------------- */
.chiffres-cles { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin: 46px 0 40px; }
.chiffre {
  text-align: center; padding: 22px 30px; min-width: 170px; border-radius: 20px;
  background: linear-gradient(135deg, var(--neige), var(--ciel)); border: 1px solid var(--ciel);
}
.chiffre b {
  display: block; font-size: 2.3rem; font-weight: 900; line-height: 1.1;
  background: linear-gradient(135deg, #1e40af, #3b82f6); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.chiffre span { font-size: .94rem; font-weight: 600; color: var(--pale); }

.encadre-info {
  margin: 0 0 40px; padding: 24px 30px; border-radius: 15px; border-left: 4px solid var(--bleu);
  background: linear-gradient(135deg, var(--neige), var(--ciel));
}
.encadre-info h2 { margin: 0 0 8px; font-size: 1.2rem; color: var(--bleu-fonce); }
.encadre-info p { margin: 0; color: var(--doux); }

.acces-niveaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 56px; }
.acces-niveaux a {
  padding: 9px 18px; border-radius: 25px; border: 2px solid var(--bord); background: #fff;
  color: var(--doux); font-weight: 700; font-size: .93rem; text-decoration: none; transition: all .25s;
}
.acces-niveaux a:hover { background: linear-gradient(135deg, var(--c1), var(--c2)); border-color: var(--c2); color: #fff; transform: translateY(-2px); }
.acces-niveaux .groupe { flex-basis: 100%; text-align: center; margin: 6px 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pale); }

/* --- Etapes scolaires (cycles) ------------------------------------------- */
.etape-scolaire { margin: 0 0 30px; padding-top: 10px; scroll-margin-top: 12px; }
.etape-scolaire > h2 { margin: 0 0 6px; text-align: center; font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 900; color: var(--encre); }
.etape-scolaire > .intro-etape { margin: 0 auto 44px; max-width: 760px; text-align: center; color: var(--pale); font-size: 1.04rem; }

/* --- Niveau --------------------------------------------------------------- */
.niveau { margin: 0 0 70px; scroll-margin-top: 12px; }
.tete-niveau { text-align: center; margin: 0 0 30px; }
.badge-niveau {
  display: inline-flex; align-items: center; gap: 14px; padding: 16px 36px; border-radius: 50px;
  color: #fff; font-weight: 800; font-size: 1.3rem; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 8px 30px color-mix(in srgb, var(--c1) 40%, transparent);
}
.badge-niveau::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  animation: reflet 3s infinite;
}
@keyframes reflet { 0% { left: -100%; } 50%, 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .badge-niveau::before { animation: none; } }
.badge-niveau .icone { font-size: 1.6rem; }
.badge-niveau h2 { margin: 0; font-size: inherit; font-weight: inherit; }
.badge-niveau .compte { padding: 4px 13px; border-radius: 20px; background: rgba(255, 255, 255, .25); font-size: .82rem; }
.lignes { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 14px; }
.lignes i { height: 2px; width: 100px; border-radius: 2px; background: linear-gradient(to right, transparent, var(--c1), transparent); }
.lignes b { color: var(--c1); letter-spacing: 2px; }

.corps-niveau { display: grid; gap: 28px; align-items: start; }
@media (min-width: 980px) { .corps-niveau { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } }
.presentation {
  padding: 24px 26px; border-radius: 20px; background: #fff; border: 2px solid color-mix(in srgb, var(--c1) 22%, #fff);
  box-shadow: var(--ombre);
}
.presentation p { margin: 0 0 14px; color: var(--doux); }
.presentation h3 { margin: 0 0 10px; font-size: 1.02rem; color: var(--c2); }
.notions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.notions li {
  padding: 4px 12px; border-radius: 99px; font-size: .8rem; font-weight: 700;
  background: color-mix(in srgb, var(--c1) 12%, #fff); color: color-mix(in srgb, var(--c2) 85%, #000);
}
.ajout-paire {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 25px; cursor: pointer;
  border: 2px solid var(--c1); background: #fff; color: var(--c2); font: inherit; font-weight: 800; font-size: .9rem;
  transition: all .25s;
}
.ajout-paire:hover, .ajout-paire.complet { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; }

.duo { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .duo { grid-template-columns: 1fr; } }
.fiche-livre {
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: var(--ombre); transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), box-shadow .3s;
  outline: 3px solid transparent; outline-offset: -3px;
}
.fiche-livre:hover { transform: translateY(-8px); box-shadow: var(--ombre-forte); }
.fiche-livre.choisi { outline-color: var(--c1); }
.vignette { position: relative; display: block; padding: 0; border: 0; background: #f1f5f9; cursor: zoom-in; overflow: hidden; }
.vignette img { display: block; width: 100%; height: auto; aspect-ratio: 941 / 1672; object-fit: cover; transition: transform .5s; }
@media (min-width: 980px) { .vignette img { height: 420px; aspect-ratio: auto; object-position: top center; } }
.fiche-livre:hover .vignette img { transform: scale(1.06); }
.vignette .etiquette-type {
  position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 14px; z-index: 2;
  background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.nom-livre {
  display: block; margin: -6px 10px 0; padding: 12px 12px 8px; border-radius: 12px 12px 0 0; position: relative; z-index: 2;
  background: linear-gradient(135deg, #1e40af, #3b82f6); color: #fff; text-align: center; font-size: 1rem; font-weight: 800; line-height: 1.3;
}
.details-livre {
  display: block; margin: 0 10px; padding: 8px 12px 10px; border-radius: 0 0 12px 12px; text-align: center;
  background: linear-gradient(135deg, #dbeafe, #eff6ff); color: var(--bleu-fonce); font-size: .82rem; font-weight: 700;
}
.fiche-texte { padding: 14px 16px 0; font-size: .9rem; color: var(--doux); }
.fiche-texte p { margin: 0 0 10px; }
.table-matieres { margin: 0 0 8px; font-size: .86rem; }
.table-matieres summary { cursor: pointer; font-weight: 800; color: var(--c2); list-style: none; }
.table-matieres summary::-webkit-details-marker { display: none; }
.table-matieres summary::before { content: '📖 '; }
.table-matieres ol { margin: 8px 0 0; padding-left: 20px; }
.table-matieres li { margin-bottom: 2px; }
.pied-fiche { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 16px 16px; }
.tarif { font-size: 1.35rem; font-weight: 900; color: var(--encre); }
.bouton-cartable {
  margin-left: auto; padding: 10px 15px; border-radius: 25px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; font: inherit; font-weight: 800; font-size: .88rem;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c1) 40%, transparent); transition: transform .2s;
}
.bouton-cartable:hover { transform: translateY(-2px); }
.bouton-cartable[aria-pressed="true"] { background: #fff; color: var(--c2); box-shadow: inset 0 0 0 2px var(--c1); }

/* --- Cartable (panier) ---------------------------------------------------- */
.ouvrir-cartable {
  position: fixed; right: 18px; bottom: 80px; z-index: 700; display: none; align-items: center; gap: 10px;
  padding: 13px 20px; border: 0; border-radius: 99px; cursor: pointer; font: inherit; font-weight: 800;
  background: linear-gradient(135deg, #1e40af, #3b82f6); color: #fff; box-shadow: 0 10px 28px rgba(30, 64, 175, .45);
}
.ouvrir-cartable.visible { display: inline-flex; animation: rebond .5s; }
@keyframes rebond { 0% { transform: scale(.7); } 70% { transform: scale(1.08); } 100% { transform: none; } }
.ouvrir-cartable b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 99px; background: var(--paypal); color: #111; font-size: .8rem; }
.cartable {
  border: 0; padding: 0; margin: 0 0 0 auto; width: min(420px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  background: #fff; box-shadow: -20px 0 50px rgba(15, 23, 42, .25);
}
.cartable::backdrop { background: rgba(15, 23, 42, .45); }
.cartable-interieur { display: flex; flex-direction: column; height: 100%; }
.cartable-tete { display: flex; align-items: center; gap: 10px; padding: 20px 22px; background: linear-gradient(135deg, var(--neige), var(--ciel)); }
.cartable-tete h2 { margin: 0; font-size: 1.25rem; color: var(--bleu-fonce); }
.fermer { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: #fff; font-size: 1.1rem; font-weight: 800; box-shadow: var(--ombre); }
.cartable-liste { flex: 1; overflow-y: auto; margin: 0; padding: 10px 22px; list-style: none; }
.cartable-liste li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bord); }
.cartable-liste img { width: 44px; border-radius: 5px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
.cartable-liste b { display: block; font-size: .92rem; line-height: 1.3; color: var(--encre); }
.cartable-liste span { font-size: .8rem; color: var(--pale); }
.cartable-liste button { border: 0; background: none; cursor: pointer; color: var(--pale); font-size: 1.05rem; padding: 6px; border-radius: 8px; }
.cartable-liste button:hover { background: #fee2e2; color: var(--rouge); }
.cartable-vide { padding: 30px 22px; text-align: center; color: var(--pale); }
.cartable-pied { padding: 18px 22px 22px; border-top: 1px solid var(--bord); }
.cartable-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; font-weight: 700; }
.cartable-total b { font-size: 1.7rem; color: var(--encre); }
.payer {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--paypal); color: #111; font: inherit; font-size: 1.02rem; font-weight: 800; transition: background .15s;
}
.payer:hover { background: var(--paypal-fonce); }
.payer:disabled { background: var(--bord); color: var(--pale); cursor: not-allowed; }
.rassurance { margin: 12px 0 0; padding: 0; list-style: none; font-size: .82rem; color: var(--doux); }
.rassurance li { margin-bottom: 4px; }
.rassurance li::before { content: '✔ '; color: var(--vert); font-weight: 800; }

/* --- Sections de fond ------------------------------------------------------ */
.bloc { padding: 56px 0; }
.bloc-bleu { background: linear-gradient(135deg, var(--neige), var(--ciel)); }
.bloc h2.titre-bloc { margin: 0 0 10px; text-align: center; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 900; color: var(--encre); }
.bloc .chapo-bloc { margin: 0 auto 34px; max-width: 760px; text-align: center; color: var(--pale); }
.grille-atouts { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.atout { padding: 24px; border-radius: 20px; background: #fff; box-shadow: var(--ombre); }
.atout .picto { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 0 14px; border-radius: 16px; font-size: 1.6rem; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.atout h3 { margin: 0 0 8px; font-size: 1.08rem; color: var(--encre); }
.atout p { margin: 0; font-size: .94rem; color: var(--doux); }

.frise { position: relative; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .frise { grid-template-columns: repeat(4, 1fr); } }
.frise li { padding: 22px; border-radius: 18px; background: #fff; border-top: 6px solid var(--c1); box-shadow: var(--ombre); }
.frise b { display: block; margin: 0 0 4px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c2); }
.frise h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--encre); }
.frise p { margin: 0; font-size: .92rem; color: var(--doux); }

.etapes-achat { counter-reset: e; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .etapes-achat { grid-template-columns: repeat(3, 1fr); } }
.etapes-achat li { position: relative; padding: 26px 22px 22px 22px; border-radius: 18px; background: #fff; box-shadow: var(--ombre); counter-increment: e; }
.etapes-achat li::before {
  content: counter(e); position: absolute; top: -16px; left: 22px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: linear-gradient(135deg, #1e40af, #3b82f6); color: #fff; font-weight: 900;
}
.etapes-achat h3 { margin: 6px 0 6px; font-size: 1.05rem; }
.etapes-achat p { margin: 0; font-size: .93rem; color: var(--doux); }

.questions { max-width: 900px; margin: 0 auto; }
.questions details { margin: 0 0 12px; border-radius: 14px; background: #fff; border: 2px solid var(--bord); overflow: hidden; transition: border-color .2s; }
.questions details[open] { border-color: #bfdbfe; }
.questions summary { display: flex; gap: 14px; justify-content: space-between; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 800; color: var(--encre); }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ciel); color: var(--bleu-nuit); font-weight: 900; }
.questions details[open] summary::after { content: '−'; }
.questions .reponse { padding: 0 20px 16px; color: var(--doux); }
.questions .reponse p { margin: 0 0 8px; }

.avis-retour { max-width: 900px; margin: 22px auto 0; padding: 12px 18px; border-radius: 12px; background: #fef3c7; color: #92400e; font-weight: 700; text-align: center; }
.avis-retour[hidden] { display: none; }

/* Visionneuse */
.visionneuse { border: 0; padding: 0; background: transparent; max-width: min(92vw, 500px); }
.visionneuse::backdrop { background: rgba(15, 23, 42, .75); }
.visionneuse img { display: block; width: 100%; max-height: 88vh; object-fit: contain; border-radius: 12px; }
.visionneuse button { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: #fff; font-weight: 800; }

/* --- Pied ----------------------------------------------------------------- */
.pied-boutique { padding: 40px 20px; text-align: center; background: linear-gradient(135deg, var(--neige), var(--ciel)); border-top: 2px solid var(--ciel); color: var(--pale); font-size: .92rem; }
.pied-boutique nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 12px; }
.pied-boutique a { color: var(--bleu); font-weight: 700; text-decoration: none; }
.pied-boutique a:hover { color: var(--bleu-fonce); }
.pied-boutique p { margin: 4px 0; }

#haut-de-page{position:fixed;right:18px;bottom:18px;z-index:800;width:48px;height:48px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;background:#1D4ED8;color:#fff;box-shadow:0 6px 20px rgba(15,23,42,.30);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .22s,transform .22s}
#haut-de-page[hidden]{display:none}
#haut-de-page.visible{opacity:1;transform:none;pointer-events:auto}
#haut-de-page svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   Pages de caisse (mathovore.fr/livres/)
   ========================================================================== */
.page-caisse { min-height: 50vh; background: linear-gradient(180deg, var(--neige), #fff 320px); }
.caisse { max-width: 1100px; margin: 0 auto; padding: 44px 20px 30px; }
.contenu-etroit { max-width: 720px; margin-left: auto; margin-right: auto; }
.carte-caisse { position: relative; padding: clamp(22px, 4vw, 34px); border-radius: 20px; background: #fff; box-shadow: var(--ombre); border-top: 6px solid var(--bleu); }
.carte-caisse h1, .caisse-entete h1 { margin: 8px 0 12px; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 900; line-height: 1.15; color: var(--bleu-fonce); }
.carte-caisse p { color: var(--doux); }
.etiquette { display: inline-block; padding: 5px 14px; border-radius: 99px; background: #dbeafe; color: var(--bleu-nuit); font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.etiquette-ok { background: #dcfce7; color: #15803d; }
.etiquette-alerte { background: #fee2e2; color: #b91c1c; }
.caisse-entete { text-align: center; margin: 0 0 30px; }
.chapeau-caisse { margin: 0 auto; max-width: 640px; color: var(--doux); }
.bouton-principal, .bouton-secondaire, .bouton-lien { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 25px; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: .95rem; text-decoration: none; }
.bouton-principal { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .35); }
.bouton-principal:hover { color: #fff; filter: brightness(1.07); }
.bouton-secondaire { margin-top: 8px; background: #fff; color: var(--doux); border: 2px solid var(--bord); }
.bouton-secondaire:hover { border-color: var(--bleu); color: var(--bleu-nuit); }
.bouton-lien { background: none; color: var(--bleu-nuit); padding: 8px 0; }
.bibliotheque { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.livre-achete { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; padding: 18px; border-radius: 20px; background: #fff; box-shadow: var(--ombre); border-left: 6px solid var(--c1); }
.livre-achete img { width: 100%; border-radius: 8px; box-shadow: 0 10px 22px -12px rgba(15, 23, 42, .6); }
.livre-achete h2 { margin: 6px 0 2px; font-size: 1.05rem; line-height: 1.3; color: var(--encre); }
.livre-achete p { margin: 0 0 12px; font-size: .88rem; color: var(--doux); }
.livre-achete .bouton-principal { width: 100%; padding: 11px 14px; }
.pastille-niveau { display: inline-block; padding: 3px 11px; border-radius: 99px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; font-size: .74rem; font-weight: 800; }
.petit { font-size: .82rem; color: var(--pale); }
.cartouche-caisse { margin-top: 30px; padding: 24px; border-radius: 15px; border-left: 4px solid var(--bleu); background: linear-gradient(135deg, var(--neige), var(--ciel)); }
.cartouche-caisse h2 { margin: 0 0 10px; font-size: 1.12rem; color: var(--bleu-fonce); }
.cartouche-caisse ul { margin: 0 0 14px; padding-left: 20px; color: var(--doux); font-size: .94rem; }
.message { margin: 14px 0; padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: .95rem; }
.message-ok { background: #dcfce7; color: #166534; }
.message-alerte { background: #fee2e2; color: #991b1b; }
.formulaire-code { display: grid; gap: 10px; margin: 18px 0 8px; max-width: 380px; }
.formulaire-code label { font-weight: 800; font-size: .92rem; }
.formulaire-code input { font: inherit; font-size: 1.2rem; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--bord); }
.formulaire-code input[name="code"] { letter-spacing: .35em; font-weight: 900; text-align: center; }
.formulaire-code input:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px #dbeafe; }
.pied { padding: 30px 20px; text-align: center; background: linear-gradient(135deg, var(--neige), var(--ciel)); border-top: 2px solid var(--ciel); color: var(--pale); font-size: .88rem; }
.pied .pied-bas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.pied a { color: var(--bleu); font-weight: 700; }