/* « À la une » strip (MX-02). Ported from the prototype homepage (scripts/templates/home.html, ddf9b78).
   WordPress markup: the slides are the <li> items of the query loops inside .une-viewport (the loops
   and their lists are flattened with display: contents); assets/js/une.js adds .une-slide and turns
   the row into a crossfading carousel from 768 px. Press quotes are « quote » posts (.format-quote). */
.une { width: min(1000px, calc(100% - 64px)); margin: 0 auto; padding-top: 8px; }
.une .une-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
/* The brand dots before the heading: theme.css (.une-head::before). */
.une-viewport { display: flex; gap: 16px; padding-top: 24px; border-top: 1px solid var(--color-accent); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.une-viewport::-webkit-scrollbar { display: none; }
.une-viewport .une-query, .une-viewport .wp-block-post-template, .une-viewport .wc-block-product-template { display: contents; }
.une-viewport li { flex: 0 0 86%; display: grid; grid-template-columns: 1fr; gap: 16px; align-content: start; scroll-snap-align: start; margin: 0; list-style: none; }
.une-viewport li > * { margin: 0; }
/* WP: each slide holds its absolutely positioned children (WordPress's visually hidden « Lire » text),
   which otherwise escape the scrolling row and widen the page on phones (owner review 1). */
.une-viewport li { position: relative; }
.une-viewport .wc-block-product-template.is-flex-container.is-flex-container > li { width: auto; }
.une .une-media { height: 190px; margin: 0; background: var(--color-surface-alt); }
.une .une-media a, .une .une-media img { display: block; width: 100%; height: 100%; }
.une .une-media img { object-fit: cover; }
/* Article pictures (client feedback round 1): whole, never cropped, in their own proportions, at most
   the slide's picture height, with the book mock-up's turn and shadow (theme.css). */
.une .une-media:not(.une-media--cover) { display: flex; align-items: center; justify-content: center; background: none; }
.une .une-media:not(.une-media--cover) a { display: inline-block; width: auto; height: auto; max-width: 100%; }
.une .une-media:not(.une-media--cover) img { width: auto; height: auto; max-width: 100%; max-height: 190px; object-fit: contain; }
/* Covers keep their native ratio and are never cropped. The book (link, with the turn and shadow from
   theme.css) is exactly as wide as the cover: before, it stretched to the slide's width on phones and
   showed an empty shadowed box beside the cover (client feedback round 2). The picture's height is in
   pixels so the browser can work out that width from the cover's proportions. */
.une .une-media--cover { --une-cover-h: 222px; width: auto; height: var(--une-cover-h); background: none; }
.une .une-media--cover a { width: fit-content; height: auto; }
.une .une-media--cover img { width: auto; height: var(--une-cover-h); max-width: none; object-fit: contain; }
.une-text > * { margin-top: 0; }
.une .une-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0 0 10px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; line-height: 1.55; text-transform: uppercase; }
.une .une-meta::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--color-accent); }
.une .une-meta > * { margin: 0; }
.une .une-meta > * + *::before { content: "·"; margin: 0 .3em; }
.une .une-meta a, .une-byline a { color: inherit; font-weight: inherit; text-decoration: none; }
.une .une-title { margin: 0 0 12px; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.08; }
.une .une-excerpt { max-width: 42ch; margin: 0 0 18px; font-weight: 500; }
.une .une-excerpt p { margin: 0; }
.une .une-byline { margin: 0 0 4px; font-weight: 500; }
.une .une-price, .une .une-source { margin: 0 0 18px; }
.une .une-source { color: var(--color-text-muted); }
.une .une-source:empty { display: none; }
.une .une-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; }
/* A book: « En savoir plus » under « Acheter » (client feedback round 1). */
.une .une-book .une-actions { flex-direction: column; align-items: flex-start; }
.une .une-actions .wp-element-button { min-height: 48px; }
.une .une-actions .wp-block-button { margin: 0; }
/* Press quote (« quote » post): text only, the excerpt is the quote, the source is the bound meta. */
.une-viewport .format-quote .une-media, .une-viewport .format-quote .une-kind, .une-viewport .format-quote .une-title { display: none; }
.une-viewport .format-quote .une-excerpt { max-width: none; margin: 0 0 12px; font-weight: 400; }
.une-viewport .format-quote .une-excerpt p { font-family: var(--font-body); font-size: clamp(1.7rem, 3.6vw, 2.85rem); font-style: normal; line-height: 1.15; text-wrap: balance; }
.une-viewport .format-quote .une-excerpt p::before { content: "«\00a0"; }
.une-viewport .format-quote .une-excerpt p::after { content: "\00a0»"; }
.une-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.une-controls[hidden] { display: none; }
.une-pager { display: flex; margin-left: -14px; }
.une-pager button, .une-nav button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.une-pager span { width: 11px; height: 11px; border: 1.5px solid var(--color-text); border-radius: 50%; transition: background var(--duration-fast), border-color var(--duration-fast); }
.une-pager button[aria-current="true"] span { background: var(--color-accent); border-color: var(--color-accent); }
.une-nav { display: flex; align-items: center; gap: 4px; margin-right: -8px; }
.une-nav button { gap: 8px; padding: 0 8px; font-size: .92rem; font-weight: 500; }
.une-nav svg { width: 16px; height: 16px; }
.une-nav svg rect, .une-nav svg [data-une-play-icon] { fill: currentColor; }
.une-arrow path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.une-nav svg [hidden] { display: none; }
.une-pause:hover, .une-arrow:hover { color: var(--color-accent); }
/* Phones: manual swipe only (no rotation), so no Pause button or arrows. */
.une:not(.is-carousel) .une-nav { display: none; }
@media (min-width: 768px) {
  .une-viewport li { flex-basis: 70%; }
  /* Carousel: one slide at a time, image left (5/11) and text right (6/11), fixed height, crossfade. */
  .une.is-carousel .une-viewport { position: relative; display: block; height: 380px; padding-top: 0; overflow: hidden; }
  .une.is-carousel .une-slide { position: absolute; inset: 0; grid-template-columns: 5fr 6fr; gap: 48px; align-items: center; padding-top: 30px; opacity: 0; visibility: hidden; transition: opacity 700ms ease, visibility 700ms ease; }
  .une.is-carousel .une-slide.is-active { opacity: 1; visibility: visible; }
  .une.is-carousel .une-slide.format-quote { grid-template-columns: minmax(0, 760px); }
  .une.is-carousel .une-media { height: 320px; }
  .une.is-carousel .une-media--cover { --une-cover-h: 320px; justify-self: center; }
  .une.is-carousel .une-media:not(.une-media--cover) img { max-height: 320px; }
}
@media (max-width: 900px) {
  .une { width: calc(100% - 40px); }
}
@media (max-width: 700px) {
  .une { width: calc(100% - 32px); }
}


/* Preserve complete editorial images without inherited mock-up transforms or stretched ratios. */
.une .une-media:not(.une-media--cover) a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.une .une-media:not(.une-media--cover) img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transform: none; box-shadow: none; }

.une .une-media:not(.une-media--cover) a,
.une .une-media:not(.une-media--cover):hover a { transform: none; box-shadow: none; }
.une .une-media:not(.une-media--cover) a::before,
.une .une-media:not(.une-media--cover) a::after { content: none; }