:root { --menu-space: 0px; --button: #ffdf00; --formation-banner-height: 44px; }
* { box-sizing: border-box; }
html { color: #171717; background: #F5F7FA; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0; }
body { margin: 0; padding-top: var(--menu-space); padding-bottom: calc(var(--formation-banner-height) + env(safe-area-inset-bottom, 0px)); }
.formation-banner { position: fixed; inset: auto 0 0; z-index: 15; background: #a5122c; padding-bottom: env(safe-area-inset-bottom, 0px); }
.formation-banner a { display: flex; align-items: center; justify-content: center; min-height: var(--formation-banner-height); padding: 6px 12px; color: #fff; font-size: 14px; font-weight: bold; line-height: 1.2; text-align: center; }
.formation-banner a:hover { background: #800d22; }
.formation-banner a:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.formation-page { max-width: 800px; }
.formation-page p { font-size: 17px; line-height: 1.65; text-align: justify; hyphens: auto; overflow-wrap: anywhere; }
.formation-page > .back:first-child { margin-left: 56px; }
a { color: #075dc1; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid #075dc1; outline-offset: 4px; }
.site-menu { position: fixed; top: 10px; left: 12px; z-index: 20; }
.site-menu summary { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #171717; box-shadow: 0 2px 8px #0002; cursor: pointer; list-style: none; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary span { font-size: 26px; line-height: 1; }
.site-menu summary:focus-visible { outline: 3px solid #075dc1; outline-offset: 3px; }
.site-menu nav { position: absolute; top: 56px; left: 0; width: 210px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 80px); overflow-y: auto; padding: 6px; border: 1px solid #ddd; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px #0002; }
.site-menu nav a { display: block; padding: 12px 16px; color: #171717; text-decoration: none; font-size: 16px; }
.site-menu nav a:hover { background: #f7f7f7; }
h1, h2, p { margin-top: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 24px; background: var(--button); border-radius: 999px; color: #111; text-decoration: none; font-size: 17px; text-align: center; }
.button:hover { background: #f3d200; }
.home { max-width: 760px; margin: auto; padding: 38px 24px 48px; text-align: center; }
.eyebrow { font-size: 13px; color: #595959; margin-bottom: 10px; }
.home h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 46px; font-weight: normal; margin-bottom: 24px; }
.portrait { display: block; width: 180px; height: 224px; object-fit: cover; border-radius: 6px; margin: 0 auto 26px; }
.home h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; font-weight: normal; line-height: 1.25; margin-bottom: 16px; }
.intro { max-width: 550px; margin: 0 auto 26px; font-size: 17px; line-height: 1.65; color: #484848; }
.home-button { min-width: 238px; min-height: 48px; }
.library-page { height: 100vh; height: 100dvh; overflow: hidden; }
.library { height: 100%; overflow-y: auto; overscroll-behavior-y: contain; }
.book-list { max-width: 1040px; margin: 0 auto; }
/* Hauteur minimale : un tiers de l'espace disponible, réduit de 20 %. */
.book { display: grid; grid-template-columns: 34% minmax(0, 1fr); min-height: max(198.4px, calc((100dvh - var(--menu-space)) * 0.80 / 3)); border-bottom: 1px solid #dedede; }
.book-cover { background: #f7f7f7; display: flex; align-items: center; justify-content: center; padding: 14px; }
.book-cover img { display: block; width: calc(210px * 1718 / 2615); max-width: 100%; height: auto; border: 1px solid #000; }
.cover-stack { position: relative; display: block; width: calc(210px * 1718 / 2615); max-width: 100%; padding-top: 18px; }
.book-cover .cover-stack img { width: 86%; height: auto; }
.cover-back { position: absolute; top: 0; right: 0; }
.cover-front { position: relative; z-index: 1; }
.six-cover-stack { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); row-gap: 16px; width: 240px; max-width: 100%; padding-top: 12px; isolation: isolate; }
.six-cover-stack img, .book-cover .six-cover-stack img { display: block; position: relative; width: 100%; height: auto; border: 1px solid #000; grid-row: 1; }
.six-cover-stack img:nth-child(n+4) { grid-row: 2; }
.six-cover-stack img:nth-child(3n+1) { grid-column: 1 / span 4; z-index: 3; }
.six-cover-stack img:nth-child(3n+2) { grid-column: 4 / span 4; top: -6px; z-index: 2; }
.six-cover-stack img:nth-child(3n) { grid-column: 7 / span 4; top: -12px; z-index: 1; }
.six-cover-detail { width: 360px; justify-self: center; align-self: center; }
.book-info { padding: 18px 26px; display: grid; grid-template-rows: repeat(5, auto); align-content: center; gap: 4px; min-width: 0; }
.book h2 { font-size: 20px; line-height: 1.2; color: #000; margin: 0; }
.edition { font-size: 16px; line-height: 1.35; font-style: italic; color: #000; text-align: center; margin: 0; align-self: center; }
.book .edition { font-size: 17px; }
.book .edition mark, .detail-copy .edition mark { background: #ffff00; color: inherit; }
.edition-description { font-size: 14px; line-height: 1.35; font-style: normal; color: #000; text-align: left; margin: 0; align-self: center; }
.more { font-size: 16px; line-height: 1.3; align-self: center; padding: 0; margin: 0; }
.book .button { width: 100%; min-width: 0; padding: 9px 10px; border: 0; font-family: inherit; font-weight: bold; line-height: 1.3; }
.library-price { width: 100%; margin: 0; text-align: center; font-size: 18px; font-weight: 700; }
.library-availability { max-width: 1040px; margin: 3em auto 0; padding: 0 20px 24px; font-size: 14px; line-height: 1.5; text-align: center; }
.library-actions { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; width: 100%; gap: 10px; }
.library-offer { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.library-offer .button { min-height: 64px; }
.shipping-note { margin: 4px 0 0; font-size: 12px; font-style: italic; line-height: 1.35; text-align: center; }
.library-actions .button:disabled { opacity: 1; cursor: not-allowed; }
.library-actions .button:disabled:hover { background: var(--button); }
.coming-cover { position: relative; width: calc(210px * 1718 / 2615); max-width: 100%; }
.book-cover .coming-cover img { width: 100%; }
.coming-cover-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgb(128 128 128 / 50%); }
.coming-cover-overlay strong { transform: rotate(-35deg); font-size: 28px; color: #c00000; }
.coming-message { margin: 0; color: #c00000; font-weight: bold; font-size: 16px; }
.book-coming-soon .button:disabled, .book-coming-soon .button:disabled:hover { background: #d0d0d0; color: #444; }
.page { max-width: 1040px; margin: auto; padding: 32px 24px 64px; }
.back { display: inline-block; margin-bottom: 32px; }
.page h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 36px; line-height: 1.2; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px 32px; }
.detail-cover { display: block; width: auto; height: auto; max-width: 60%; max-height: 384px; border: 1px solid #000; justify-self: center; align-self: center; }
.detail-copy { align-self: center; }
.integral-gallery-frame { position: relative; width: 100%; min-width: 0; align-self: start; }
.gallery-direction { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #111; box-shadow: 0 1px 6px #0003; font-size: 28px; line-height: 1; pointer-events: none; }
.integral-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; align-items: start; width: 100%; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; align-self: start; }
.integral-gallery > img { display: block; width: 100%; height: auto; border: 1px solid #000; scroll-snap-align: start; scroll-snap-stop: always; }
.collection-overview { width: 100%; aspect-ratio: 2 / 3; display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; }
.collection-overview .six-cover-stack { width: 90%; }
.integral-gallery:focus-visible { outline: 3px solid #075dc1; outline-offset: 3px; }
.other-volume { display: block; margin-top: 12px; text-align: center; }
.volume-navigation { display: grid; grid-template-columns: minmax(0, 60%) minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.volume-navigation .detail-cover { max-width: 100%; }
.volume-navigation a { color: #075dc1; text-decoration: underline; font-size: 14px; line-height: 1.4; text-align: center; }
.volume-navigation-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 60%); }
.volume-navigation-reverse .detail-cover { grid-column: 2; grid-row: 1; }
.volume-navigation-reverse a { grid-column: 1; grid-row: 1; }
.book-description mark { background: #ffff00; color: inherit; }
.page .detail-title { font-size: 30px; margin-bottom: 8px; }
.detail-subtitle { font-size: 16px; font-weight: normal; line-height: 1.4; margin-bottom: 24px; }
.detail-back { margin-top: 28px; margin-bottom: 0; }
.book-isbn { margin: 32px 0 0; }
.detail-copy p, .about p { font-size: 17px; line-height: 1.6; }
.detail-copy .edition { font-size: 17px; line-height: 1.35; text-align: center; margin-bottom: 8px; }
.detail-copy .edition-description { font-size: 18px; line-height: 1.35; }
.detail-copy .integral-description { text-align: center; }
.purchase { grid-column: 1 / -1; text-align: center; }
.purchase .price { margin: 0 0 18px; }
.book-specifications { width: 100%; table-layout: fixed; border-collapse: collapse; border: 0; font-size: 14px; font-style: italic; line-height: 1.4; margin: 0 0 12px; }
.book-specifications td { border: 0; padding: 4px 6px; text-align: center; vertical-align: middle; }
.purchase-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 440px; margin: 0 auto; }
.purchase-actions .button { min-width: 0; min-height: 48px; padding: 10px 12px; border: 0; font-family: inherit; font-size: 16px; font-weight: bold; line-height: 1.3; }
.purchase-actions .button:disabled { opacity: 1; cursor: not-allowed; }
.purchase-actions .button:disabled:hover { background: var(--button); }
.book-description { margin-top: 32px; padding-top: 24px; border-top: 1px solid #ededed; }
.book-description h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; margin-bottom: 20px; }
.book-description p { font-size: 16px; line-height: 1.65; margin-bottom: 16px; text-align: justify; hyphens: auto; }
.book-description p:last-child { margin-bottom: 0; }
.price { font-size: 24px !important; font-weight: bold; margin-top: 28px; }
.about { max-width: 700px; }
.page.about { padding-bottom: 16px; }
.about #contact { padding-bottom: 0; }
.contact-form { display: block; width: 100%; max-width: 640px; height: 1600px; margin: 0 auto; border: 0; }
.page.author-order, .page.newsletter-page { width: 100%; max-width: 688px; padding-top: 12px; padding-bottom: 16px; }
.author-order .back, .newsletter-page .back { display: flex; align-items: center; min-height: 48px; margin: 0 0 12px 56px; line-height: 1.4; }
.newsletter-form { display: block; width: 100%; max-width: 640px; height: 670px; margin: 0 auto; border: 0; }
.author-order-form { display: block; width: 100%; max-width: 640px; height: 1767px; margin: 0 auto; border: 0; }
.about p, .about-journey { text-align: justify; }
.about-journey { padding-left: 24px; font-size: 17px; line-height: 1.6; margin-bottom: 24px; }
.about-journey li + li { margin-top: 8px; }
.about section { padding: 24px 0; scroll-margin-top: 90px; border-top: 1px solid #ededed; }
.about h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 25px; }
@media (max-width: 600px) {
  .formation-banner a { font-size: 13px; }
  .page > .back:first-child { display: flex; align-items: center; min-height: 44px; margin: -12px 0 16px 56px; line-height: 1.4; }
  .page.author-order > .back:first-child, .page.newsletter-page > .back:first-child { margin-top: 0; margin-bottom: 12px; min-height: 48px; }
  .page > p:first-child { margin-left: 56px; min-height: 44px; }
  .about p, .about-journey { hyphens: auto; overflow-wrap: break-word; }
  .book-specifications td { overflow-wrap: break-word; }
  .page.author-order, .page.newsletter-page { padding: 12px 8px 16px; }
  .home { padding: 28px 22px 36px; }
  .home h1 { font-size: 34px; margin-bottom: 22px; }
  .home h2 { font-size: 24px; }
  .portrait { width: 150px; height: 190px; margin-bottom: 24px; }
  .intro { font-size: 16px; line-height: 1.5; }
  .book { grid-template-columns: 40% minmax(0, 1fr); }
  .book-cover { padding: 10px; }
  .book-cover img { width: calc(206px * 1718 / 2615); }
  .coming-cover { width: calc(206px * 1718 / 2615); }
  .cover-stack { width: calc(206px * 1718 / 2615); }
  .book-info { padding: 12px 10px; gap: 4px; }
  .book h2 { font-size: 16px; line-height: 1.2; }
  .edition, .more { font-size: 14px; }
  .book .edition { font-size: 15px; }
  .edition-description { font-size: 12px; }
  .book .button { font-size: 12px; min-height: 44px; padding: 7px 5px; }
  .library-actions { gap: 6px; }
  .page { padding: 24px 20px 48px; }
  .page h1 { font-size: 29px; }
  .detail { grid-template-columns: 1fr; gap: 12px; }
  .detail-cover { width: 50vw; max-width: 100%; height: auto; max-height: none; }
  .integral-gallery-frame { width: 95vw; max-width: none; margin-left: calc((100% - 95vw) / 2); }
  .volume-navigation { grid-template-columns: 50vw minmax(0, 1fr); }
  .volume-navigation-reverse { grid-template-columns: minmax(0, 1fr) 50vw; }
  .page .detail-title { font-size: 20px; }
  .detail-copy .edition { font-size: 15px; }
  .detail-copy .edition-description { font-size: 16px; }
  .purchase-actions { gap: 10px; }
  .purchase-actions .button { font-size: 14px; padding: 10px 8px; }
}
@media (max-width: 360px) {
  .book { min-height: max(224px, calc((100dvh - var(--menu-space)) * 0.80 / 3)); }
}
@media (min-width: 601px) {
  .library-actions { width: 40%; margin-inline: 0; }
  .library-price { width: 40%; justify-self: start; text-align: center; margin-top: 12px; }
  .library-offer .button { min-height: 52px; padding: 6px 8px; font-size: 14px; }
  .detail-integral-split { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
  .detail-integral-split .integral-gallery-frame { grid-column: 1; grid-row: 1 / 3; }
  .detail-integral-split .detail-copy { grid-column: 2; grid-row: 1; align-self: start; text-align: center; }
  .detail-integral-split .purchase { grid-column: 2; grid-row: 2; align-self: start; text-align: center; }
  .detail-integral-split .purchase-actions { width: 100%; margin: 0 auto; gap: 24px; }
  .detail-compact-desktop { grid-template-rows: auto 1fr; }
  .detail-compact-desktop > .detail-cover,
  .detail-compact-desktop > .integral-gallery-frame,
  .detail-compact-desktop > .volume-navigation { grid-column: 1; grid-row: 1 / 3; }
  .detail-compact-desktop .detail-copy { grid-column: 2; grid-row: 1; align-self: start; }
  .detail-compact-desktop .edition { text-align: left; }
  .detail-compact-desktop .purchase { display: contents; }
  .detail-compact-desktop .purchase-summary { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 48px; padding-left: 80px; text-align: left; }
  .detail-compact-desktop .purchase .price { margin: 0; }
  .detail-compact-desktop .purchase-actions { grid-column: 1 / -1; grid-row: 3; justify-self: start; width: calc(100% - 80px); margin: 0 0 0 80px; gap: 24px; }
}
.home-page { height: 100vh; height: 100dvh; overflow: hidden; }
.home-page .home { width: 100%; height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 224px) auto auto auto; align-content: start; justify-items: center; gap: 12px; padding: 64px 24px 20px; }
.home-page .home > * { margin: 0; }
.home-page .home h1 { margin-bottom: 6px; }
.home-page .home h2 { margin-top: 6px; }
.home-page .portrait { width: auto; max-width: 180px; height: 100%; max-height: 224px; min-height: 0; object-fit: contain; align-self: start; }
@media (max-height: 700px) {
  .home-page .home { gap: 8px; padding: 48px 20px 12px; }
  .home-page .home h1 { font-size: 28px; }
  .home-page .home h2 { font-size: 22px; }
  .home-page .intro { font-size: 16px; line-height: 1.4; }
}