/* Shell styles ported from the prototype's site.css (carstenvaneken-debug/lediteur-a-part, ddf9b78):
   base details theme.json cannot express, the header, the logo lockup, links, buttons, focus and the
   footer. Uses the prototype token names from tokens.css (the bridge); the few translucent values
   (header background, footer rule) are the prototype's own rgba() values, kept as they are. */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; color: inherit; }
h2, h3 { text-wrap: balance; }
/* Headings never break inside a word (owner review 1): with JavaScript, assets/js/heading-fit.js
   scales a heading down instead; without it, the usual wrapping stays as a safety net. */
.lea-fit :is(h1, h2, h3, h4, h5, h6, .batch-author-tile > span:last-child, .batch-other-authors__list > a > span:last-child, .author-caption, .toc-name) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* h6: small caps (theme.json cannot set font-variant). */
h6 { font-variant-caps: small-caps; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

/* Links (CP-04 text link): Noir, a thin Bronze line under the text, Bronze on hover. The prototype
   draws the line as a 1px border; an underline keeps it on every line of wrapped text. */
a:where(:not(.wp-element-button)) {
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.eyebrow { display: block; margin-bottom: 1rem; font-size: var(--wp--preset--font-size--eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.body-large { font-size: var(--wp--preset--font-size--large); font-weight: 500; line-height: 1.53; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--color-accent); font-weight: 500; text-decoration: none; }
.text-link:hover { color: var(--color-accent); }
.wp-block-read-more.text-link { display: inline-flex; width: fit-content; }

/* Button (CP-04, CL-05): fully rounded Bronze, white Barlow Bold 700 at 19px, ending in →. */
.wp-element-button, .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button__link.is-added::after { content: "✓"; }
.wp-element-button:disabled, .wp-element-button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

/* Header */
.site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
}
/* backdrop-filter makes the header the containing block of the fixed mobile menu, which would then
   be clipped to the header bar: off while the menu is open. */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) { backdrop-filter: none; }
.site-header__bar { height: 82px; }
.site-header .nav { height: 100%; gap: 28px; align-items: center; }
.brand { flex: none; width: 172px; color: var(--color-text); font-size: 1.34rem; text-decoration: none; }
.site-header .menu { align-self: center; align-items: center; margin-left: auto; font-weight: 500; }
.site-header .menu .wp-block-navigation__container { gap: 24px; }
.site-header .menu .wp-block-navigation-item__content { position: relative; padding: .4rem 0; text-decoration: none; white-space: nowrap; }
.site-header .menu .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--color-accent); transition: right var(--duration-fast); }
.site-header .menu .wp-block-navigation-item__content:hover { color: var(--color-text); }
.site-header .menu .wp-block-navigation-item__content:hover::after,
.site-header .menu .current-menu-item > .wp-block-navigation-item__content::after { right: 0; }
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close { align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: var(--wp--preset--font-size--medium); }
.utilities { display: flex; align-self: center; flex: none; align-items: center; gap: 12px; margin-left: 12px; }
.cart-button { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--color-text); border-radius: var(--radius-pill); color: var(--color-text); font-weight: 400; text-decoration: none; }
.cart-button:hover { color: var(--color-text); }
.cart-icon { width: 19px; height: 19px; flex: none; }

/* Logo (BR-03): the charter's drawn mark (inc/logo.php), sized by the font size of where it sits so the
   header, footer and style guide keep their scale. 2.526em tall keeps the dots at the .347em of the
   client reference (6 October 2026). Charter page 8: 2 cm / 60 px minimum. Scale it whole. */
.logo-mark { display: block; width: auto; height: 2.526em; aspect-ratio: 317.78 / 212.68; overflow: visible; }

/* Sections built from patterns (.lea-section) keep the prototype's own rhythm (site.css): no top margin
   on headings and paragraphs, links without underline except .text-link and buttons. (WordPress's
   block gap is off in theme.json, so element margins work as in the prototype.) */
:root :where(.lea-section) :where(h1, h2, h3, h4, h5, h6, p) { margin-top: 0; }
:root :where(.lea-section) a:where(:not(.text-link, .wp-element-button)) { font-weight: inherit; text-decoration: none; }
/* Charter (page 13): Barlow Light to SemiBold. Bold text stops at SemiBold; the one exception is white
   text on Bronze (buttons, the « ajouté au panier » banner), kept Bold for contrast (owner, 12 October 2026). */
:where(strong, b) { font-weight: 600; }
/* WooCommerce notices, on every page (owner review 1). WooCommerce's own colours are replaced: no
   green, red, yellow or blue (CL-09); no icon. WooCommerce sets some values with !important.
   - Success (« … a été ajouté à votre panier. Voir le panier »): a Bronze band, white Barlow Bold at
     19 px, the size rule CL-05 sets for white on Bronze; the link white and underlined.
   - Error: white, a 2 px Noir frame, « Erreur : » in front (the word says what it is, CL-09).
   - Information: white, a thin Bronze line on the left. */
:root .wc-block-components-notice-banner { align-items: center; gap: 12px; margin: 0 0 24px; padding: 16px 22px !important; border: 0; border-radius: 0; background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.45; }
.wc-block-components-notice-banner > svg { display: none; }
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding: 0; }
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward { order: 2; float: none; min-height: 0; color: inherit !important; font-size: inherit; font-weight: inherit; opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:hover { text-decoration-thickness: 2px; }
.wc-block-components-notice-banner > .wc-block-components-button { color: inherit !important; opacity: 1; }
.wc-block-components-notice-banner > .wc-block-components-button svg { fill: currentColor; }
:root .wc-block-components-notice-banner.is-success { background: var(--color-accent); color: var(--color-accent-text); font-size: 19px; font-weight: 700; }
:root .wc-block-components-notice-banner.is-error { border: 2px solid var(--color-text); background: var(--color-surface); }
.wc-block-components-notice-banner.is-error > .wc-block-components-notice-banner__content::before { content: "Erreur : "; font-weight: 600; }
.wc-block-components-notice-banner.is-error > .wc-block-components-notice-banner__content { display: block; }
:root .wc-block-components-notice-banner:is(.is-info, .is-warning, .is-default) { padding-left: 18px !important; border-left: 3px solid var(--color-accent); background: var(--color-surface); }
.wc-block-components-notice-banner :focus-visible { outline-color: currentColor; }
/* WooCommerce moves focus to a new notice so it is read out; the notice itself is not a control. */
.wc-block-components-notice-banner:focus { outline: none; }

/* WooCommerce's notices container in product lists takes no room until it shows a notice. */
.lea-section .wc-block-components-notices:not(:has(.wc-block-components-notice-banner)) { display: none; }

/* Hover effects (owner review 1): subtle and the same everywhere; no movement with reduced motion.
   - Book covers, in every book card (catalogue, collections, homepage, author pages, « Dans la même
     collection », the empty cart): the cover grows slightly from its foot while the card is hovered or
     its cover link has the keyboard focus.
   - Portraits: the homepage authors picker's look (a 3 px Bronze ring, 10 % larger) is shared with
     « D'autres voix à part » on author pages. The picker shows it on the selected author (hover,
     focus, click); the author page on hover and focus. */
:is(.batch-cover, .book-cover) img { transform-origin: 50% 100%; transition: transform var(--duration-base) var(--ease-standard); }
.author-photo, .batch-other-authors__list .batch-portrait { border: 0; box-shadow: 0 0 0 1px var(--color-faint); transition: transform 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard); }
.author-pick[aria-pressed="true"] .author-photo,
.batch-other-authors__list > a:is(:hover, :focus-visible) .batch-portrait { box-shadow: 0 0 0 3px var(--color-accent); transform: scale(1.1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wc-block-product:hover :is(.batch-cover, .book-cover) img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.batch-cover, .book-cover) a:focus-visible img { transform: scale(1.04); }
}

/* Book mock-up (client feedback round 1, G4): the flat cover shown as a book, slightly turned, with a
   spine shade, a soft light and a shadow. Always the same look, whatever cover is uploaded: the
   client only uploads the flat cover. Used on the homepage's « Dernières parutions » and « À la une »;
   the article pictures in « À la une » get the same turn and shadow (no spine), whole and uncropped.
   The cover keeps its own proportions (no box, so nothing is cut off or letterboxed). */
:is(.books-grid .book-cover, .une-book .une-media--cover, .une-viewport .une-media:not(.une-media--cover)) a { position: relative; display: block; transform: perspective(1100px) rotateY(-16deg); transform-origin: left center; border-radius: 1px 3px 3px 1px; box-shadow: 20px 22px 32px -16px rgba(0, 0, 0, .42), 3px 3px 7px rgba(0, 0, 0, .14); transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
:is(.books-grid .book-cover, .une-book .une-media--cover) a::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 7%; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .22) 45%, rgba(0, 0, 0, .1)); pointer-events: none; }
:is(.books-grid .book-cover, .une-book .une-media--cover, .une-viewport .une-media:not(.une-media--cover)) a::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%); pointer-events: none; }
/* « Dernières parutions »: sized like « À la une »'s cover (which shows correctly): a fixed height, the
   width following the cover's own proportions. Heights in books-grid.css. */
.books-grid .book-cover a { width: fit-content; height: 100%; }
.books-grid .book-cover img { display: block; width: auto !important; height: 100% !important; max-width: none !important; object-fit: contain; border-radius: inherit; }
.une-book .une-media--cover img { border-radius: inherit; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.books-grid, .une-book) .wc-block-product:hover :is(.book-cover, .une-media) img { transform: none; }
  :is(.books-grid .wc-block-product:hover .book-cover, .une-book .une-media--cover:hover, .une-viewport .une-media:not(.une-media--cover):hover) a { transform: perspective(1100px) rotateY(-8deg) translateY(-4px); box-shadow: 24px 28px 36px -16px rgba(0, 0, 0, .38), 3px 3px 7px rgba(0, 0, 0, .12); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.books-grid .book-cover, .une-book .une-media--cover) a { transition: none; }
}

/* Brand dots (inc/dots.php): the logo's disc, eclipse and ring, one flat colour per group: Bronze on
   white and on Noir (default), Noir on Bronze and on Sable (.lea-dots--noir, or --dots-color set by the
   parent). --dots-size is the diameter of one dot; the group is 4.005 times as long. Sizes only apply
   in HTML: inside another SVG the dots carry their own x, y, width and height. */
.lea-dots { --dots-size: 9px; flex: none; fill: var(--dots-color, var(--color-accent)); overflow: visible; }
.lea-dots:where(:not([width])) { display: inline-block; width: calc(var(--dots-size) * 4.005); height: var(--dots-size); vertical-align: middle; }
.lea-dots--noir { --dots-color: var(--color-text); }
.lea-dots--vertical:where(:not([width])) { width: var(--dots-size); height: calc(var(--dots-size) * 4.005); }
/* Labels that are plain editable text: the same dots as a mask (--lea-dots-shape, inc/dots.php); on Bronze
   and on Sable the box sets --dots-color: var(--color-text). */
.batch-label::before, .articles-label::before, .une .une-head::before { content: ""; flex: none; width: calc(var(--dots-size, 9px) * 4.005); height: var(--dots-size, 9px); background: var(--dots-color, var(--color-accent)); -webkit-mask: var(--lea-dots-shape) center / contain no-repeat; mask: var(--lea-dots-shape) center / contain no-repeat; }

/* Footer (Texture Bronze, DIR-07, CL-07; client feedback round 2): the client's texture in its own
   colours (no veil), its light glow along the bottom. White text on the dark part; the bottom line sits
   on the glow, so it is Noir (white there would be unreadable). A thin eclipse ring (the logo's eclipse dot) shows at the right
   edge on wide screens. The texture sits on the part's own group so the site editor shows it too. */
.site-header, .site-footer { margin-block-start: 0; }
.lea-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 88px 26px;
  background-color: var(--color-surface-inverse);
  background-image: url("../images/texture-bronze.webp");
  background-size: 100% 100%; /* The whole texture, dark top to glow, whatever the footer's shape: a soft gradient stretches without showing it. */
  background-position: center;
  color: var(--color-text-inverse);
}
.lea-footer:has(> .footer-grid)::before { content: ""; position: absolute; z-index: 0; top: 50%; right: -230px; width: 300px; height: 300px; border: 1.5px solid rgba(255, 226, 190, .28); border-left-color: rgba(255, 232, 200, .9); border-radius: 50%; box-shadow: -10px 0 26px -12px rgba(255, 196, 132, .75), inset 10px 0 22px -14px rgba(255, 196, 132, .6); transform: translateY(-58%); pointer-events: none; }
.lea-footer > * { position: relative; z-index: 1; }
.lea-footer p { margin: 0; }
.lea-footer a { color: var(--color-text-inverse); font-weight: inherit; text-decoration: none; }
.lea-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.lea-footer :focus-visible { outline-color: var(--color-focus); }
.footer-grid { display: grid; grid-template-columns: 1fr .75fr 1.25fr; gap: 4rem; }
.footer-grid > * + *, .footer-col > * + * { margin-block-start: 0; }
.footer-brand { display: flex; flex-direction: column; align-items: center; justify-self: center; }
.footer-col .lea-logo { font-size: var(--wp--preset--font-size--x-large); }
.footer-brand::after { content: ""; width: 34px; height: 1px; margin-top: 1.4rem; background: var(--color-accent); }
.lea-footer .footer-col > p.footer-title { margin-bottom: 1.1rem; font-weight: 600; }
.lea-footer .footer-col > p.footer-title::after { content: ""; display: block; width: 34px; height: 1px; margin-top: .7rem; background: var(--color-accent); }
.footer-links { display: grid; gap: .55rem; }
.footer-links > * { margin: 0; }
.footer-invite { padding-left: 4rem; border-left: 1px solid rgba(255, 255, 255, .3); }
.lea-footer .footer-invite__title { max-width: 16em; margin-bottom: .8rem; font-size: clamp(1.35rem, 1.9vw, 1.6rem); font-weight: 600; line-height: 1.2; }
.lea-footer .footer-invite__text { max-width: 30em; margin-bottom: 1.4rem; line-height: 1.5; }
.footer-invite__button { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1.3rem; border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--radius-pill); font-weight: 500; }
.lea-footer .footer-invite__button:hover { background: var(--color-text-inverse); color: var(--color-text); text-decoration: none; }
.footer-social { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; margin-left: -10px; }
.footer-social > * { margin: 0; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.footer-social svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.footer-social svg .is-filled { fill: currentColor; stroke: none; }
.lea-footer .copyright { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 4.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(0, 0, 0, .28); color: var(--color-text); font-size: var(--wp--preset--font-size--small); }
.lea-footer .copyright > * { margin: 0; }
.lea-footer .copyright a { color: var(--color-text); }
.legal-links { display: flex; flex-wrap: wrap; }
.legal-links a::before { content: "·"; margin: 0 .5em; }
.legal-links a:first-child::before { content: none; }
@media (max-width: 1279px) {
  .lea-footer:has(> .footer-grid)::before { display: none; }
}
/* Tablets and phones: the footer is taller than wide, so the texture fills its lower 320 px only and
   its dark top colour continues above; the glow is a band under the text, which stays white (the
   bottom line included). */
@media (max-width: 1023px) {
  .lea-footer { padding-bottom: 150px; background-color: #22100b; background-image: linear-gradient(#22100b, rgba(34, 16, 11, 0) 140px), url("../images/texture-bronze.webp"); background-size: 100% 320px; background-position: center bottom; background-repeat: no-repeat; }
  .lea-footer .copyright, .lea-footer .copyright a { color: var(--color-text-inverse); }
  .lea-footer .copyright { border-top-color: rgba(255, 255, 255, .3); }
}
/* Tablets: the logo and « Explorer » side by side, the invitation below them. */
@media (min-width: 701px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .footer-invite { grid-column: 1 / -1; padding-left: 0; padding-top: 2.5rem; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .3); }
}

/* The prototype's menu switches to the « Menu » toggle below 900px (WordPress's own breakpoint is
   600px); with « Histoires collectives » in the menu, seven items fit on one line from 1024px only. */
@media (min-width: 600px) and (max-width: 1023px) {
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

@media (max-width: 767px) {
  h1, h2, h3 { line-height: 1.2; }
  .body-large { line-height: 1.58; overflow-wrap: break-word; }
  .brand { width: auto; flex: 1 1 auto; font-size: 1.18rem; }
  .cart-button { white-space: nowrap; gap: .2rem; padding: .35rem .55rem; }
  .cart-label { display: none; }
}

@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: 3rem; }
  .footer-brand { align-items: flex-start; justify-self: start; }
  .footer-invite { padding-left: 0; padding-top: 2.5rem; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .3); }
  .lea-footer .copyright { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .legal-links { flex-direction: column; gap: .15rem; }
  .legal-links a { display: inline-flex; align-items: center; min-height: 32px; }
  .legal-links a::before { content: none; }
}

@media (max-width: 600px) {
  .site-header__bar { height: 72px; }
}

@media (max-width: 360px) {
  .site-header .nav { gap: 8px; }
  .brand { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Style guide pattern (checks only). */
.style-guide .sg-label { margin-top: var(--within-gap); padding-top: .8rem; border-top: 1px solid var(--color-accent); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.style-guide .sg-chip { height: 96px; border: 1px solid var(--color-border); }
.style-guide .sg-meta { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--wp--preset--font-size--small); font-weight: 400; letter-spacing: 0; }
.style-guide .sg-size { margin: .4rem 0; line-height: 1.15; }

.style-guide .sg-space p { margin: 0; white-space: nowrap; }
.style-guide .sg-logo { position: relative; z-index: 0; padding: 48px 56px; font-size: 3rem; }
.style-guide .sg-logo--white { border: 1px solid var(--color-border); }