/* Articles family (spec « Articles — list and article pages »; CP-07, DIR-08, LY-05): the list and
   category pages (« À la une » and ruled rows) and the article page (centred reading column). Ported
   from the prototype (public/assets/articles.css, ddf9b78). WordPress adaptations are marked « WP: ».
   Automatic block spacing is off theme-wide, so every margin here is the prototype's own. */

/* WP: the prototype's .wrap (side margins 32 / 20 / 16 px = the gutter preset). */
.articles-list, .article-wrap { width: min(var(--container-max), calc(100% - 2 * var(--wp--preset--spacing--gutter))); margin-inline: auto; }
.site-main.articles { margin-block-start: 0; }
.articles a { color: inherit; text-decoration: none; }
.lea-part { display: contents; }

/* The brand dots (inc/dots.php). */
.articles .lea-dots, .article-canvas .lea-dots { --dots-size: 8px; }
/* WP: the list label is one editable paragraph; its dots are drawn before it (theme.css). */
.articles-label { --dots-size: 8px; }

.articles-meta, .articles-label, .article-meta, .article-label { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.articles-label, .article-label { letter-spacing: .16em; }
.articles-meta { display: block; }

/* List and category pages */
.articles-list { padding: var(--page-top) 0 var(--within-gap); }
.articles-intro { display: grid; gap: 22px; }
.articles-intro > * { margin: 0; }
.articles-intro h1 { margin: 0; font-size: 72px; line-height: 1.02; letter-spacing: -.01em; }
.articles-intro__lead { max-width: 640px; margin: 0; font-size: 21px; line-height: 1.5; }

.articles-filters { margin-top: var(--within-gap); }
.articles-filters ul { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; padding: 0; list-style: none; }
.articles-filters a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 2px solid transparent; font-size: 17px; font-weight: 500; white-space: nowrap; }
.articles-filters a:hover { border-bottom-color: var(--color-border); }
.articles-filters a[aria-current="page"] { border-bottom-color: var(--color-accent); }

/* WP: « À la une » is a query loop over the same main query as the rows below, showing its first
   article on the first page only; the rows loop leaves that article out there. */
.articles-lead-query { margin-top: var(--heading-gap); padding-top: var(--heading-gap); border-top: 1px solid var(--color-accent); }
body.paged .articles-lead-query, .articles-lead-query:not(:has(li)) { display: none; }
.articles-une-list { margin: 0; padding: 0; list-style: none; }
.articles-une-list > li:not(:first-child) { display: none; }
.articles-une-list > li { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.articles-une-list > li:not(:has(.articles-une__image)) { grid-template-columns: minmax(0, 820px); }
.articles-une-list > li > * { margin: 0; }
.articles-une__image img { max-height: 460px; }
.articles-une__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.articles-une__text > * { margin: 0; }
.articles-une__title { margin: 0; font-size: 54px; line-height: 1.05; letter-spacing: -.01em; }
.articles-une__excerpt, .articles-une__excerpt p { margin: 0; font-size: 20px; line-height: 1.5; }
.articles-une__more, .articles-row__more { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--color-accent); font-size: 17px; font-weight: 500; white-space: nowrap; }
.articles-une__more:hover, .articles-row__more:hover { color: var(--color-accent); }
.articles-une__title a:hover, .articles-row__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }

.articles-rows { margin: var(--within-gap) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--color-accent); }
/* WP: on the first page the rows loop starts after the lead (its first article is the lead). */
body:not(.paged) .articles-rows-query .articles-rows > li:first-child { display: none; }
body:not(.paged) .articles-rows-query .articles-rows:not(:has(> li:nth-child(2))) { display: none; }
.articles-rows-query .articles-rows { margin-top: var(--within-gap); }
body.paged .articles-rows-query .articles-rows { margin-top: var(--heading-gap); }
.articles-row, .articles-rows-query .articles-rows > li { border-top: 1px solid var(--color-accent); }
.articles-row a { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 40px; align-items: center; padding: 28px 0; }
.articles-row--text a { grid-template-columns: minmax(0, 1fr) auto; }
/* WP: a query loop row is the <li> itself (thumbnail, text, « Lire → »). */
.articles-rows-query .articles-rows > li { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 40px; align-items: center; margin: 0; padding: 28px 0; }
.articles-rows-query .articles-rows > li > * { margin: 0; }
.articles-rows-query .articles-rows > li:not(:has(.articles-row__thumb)):not(.category-presse) { grid-template-columns: minmax(0, 1fr) auto; }
.articles-rows-query .articles-rows > li.category-presse:not(:has(.articles-row__thumb))::before { content: "«"; font-family: var(--font-body); font-size: 64px; line-height: 1; color: var(--color-accent); }
.articles-row__thumb img { max-height: 140px; }
/* Article pictures in the lists (client feedback round 2): whole, never cropped, in their own
   proportions, at most the size of their place, with the book mock-up's turn and shadow (as the
   article pictures in the homepage « À la une »). The turn makes a picture look about 16 % wider
   than it is, so it takes at most 84 % of its place: a wide picture stays clear of the text next to
   it (client feedback 3, « Réveillez le Bishnoï »). */
:is(.articles-une__image, .articles-row__thumb), :is(.articles-une__image, .articles-row__thumb) > a { display: flex; align-items: center; justify-content: center; }
:is(.articles-une__image, .articles-row__thumb) > a { width: 100%; height: 100%; }
:is(.articles-une__image, .articles-row__thumb) img { display: block; width: auto; height: auto; max-width: 84%; object-fit: contain; border-radius: 1px 3px 3px 1px; transform: perspective(1100px) rotateY(-16deg); transform-origin: left center; box-shadow: 20px 22px 32px -16px rgba(0, 0, 0, .42), 3px 3px 7px rgba(0, 0, 0, .14); }
.articles-row__thumb img { box-shadow: 10px 12px 18px -10px rgba(0, 0, 0, .42), 2px 2px 5px rgba(0, 0, 0, .14); }
.articles-row__quote { font-family: var(--font-body); font-size: 64px; line-height: 1; color: var(--color-accent); }
.articles-row__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.articles-row__text > * { margin: 0; }
.articles-row__title { margin: 0; font-size: 32px; line-height: 1.12; letter-spacing: 0; text-wrap: pretty; }
.articles-row--press .articles-row__title, .category-presse .articles-row__title { font-style: italic; }
.articles-row__excerpt, .articles-row__excerpt p { margin: 0; font-size: 18px; line-height: 1.5; }
.articles-row__more { justify-self: end; }

/* WP: « Plus d’articles » is the query's next-page link, as the prototype's Bronze button. */
.articles-next { display: flex; justify-content: center; margin: var(--heading-gap) 0 0; }
.articles-next .wp-block-query-pagination-next { display: inline-flex; align-items: center; min-height: 50px; padding: .6rem 1.5rem; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-text) !important; font-size: var(--wp--preset--font-size--button); font-weight: 700; }
.articles-next .wp-block-query-pagination-next:hover { background: var(--color-text); }
.articles-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--color-accent); }
.articles-empty p { margin: 0; font-size: 20px; }

/* Article page: one centred reading column (about 720 px, 65 characters, LY-05). */
.article-breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: var(--page-top) 0 0; list-style: none; font-size: 15px; color: var(--color-text-muted); }
.article-breadcrumb li + li::before { content: "/"; margin: 0 .5em; }
.article-breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; }
.article-breadcrumb a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }

.article-head, .article-text, .article-practical, .article-share { width: min(var(--reading-width), calc(100% - 40px)); margin-inline: auto; }
.article-head { display: grid; gap: 22px; padding-top: 64px; }
.article-head > * { margin: 0; }
.article-head h1 { margin: 0; font-size: 72px; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.article-intro { margin: 0; font-size: 24px; line-height: 1.45; }

/* Slightly wider than the text, never full bleed, no overlay; never cropped and never enlarged. */
.article-figure { width: min(1040px, calc(100% - 64px)); margin: 56px auto 0; }
.article-figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 720px; margin-inline: auto; }

/* WP: the article text is the post content; paragraphs keep the prototype's spacing, and the
   blocks an editor may add (headings, lists, quotes, images) get the same reading rhythm. */
.article-text { padding-top: 64px; font-size: 20px; line-height: 1.7; }
.article-text > * { max-width: 65ch; margin: 0 0 28px; }
/* WP: the post content block does not let the last margin collapse into the next section as the
   prototype's plain <div> does; without it the spacing is the same. */
.article-text > :last-child { margin-bottom: 0; }
.article-text > :is(h2, h3, h4) { margin: 56px 0 20px; line-height: 1.15; }
.article-text > h2 { font-size: 40px; }
.article-text > h3 { font-size: 30px; }
.article-text > :is(ul, ol) { padding-left: 1.2em; }
.article-text > :is(figure, .wp-block-image) { max-width: 100%; }
.article-text img { max-width: 100%; height: auto; }
.article-text a:not(.wp-element-button) { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: .2em; }
/* A link the post leads into (« Lire l’article », « Inscription en ligne »…). */
.article-text > .article-link { margin-top: -8px; }
.article-text > .article-link a { text-decoration: none; }
/* Pull quote (the post's quotes): centred, DM Serif italic, the brand dots above (mask from inc/dots.php); no box. */
.article-text > .wp-block-quote { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: none; margin: 44px 0 72px; padding: 0; border: 0; text-align: center; }
.article-text > .wp-block-quote::before { content: ""; width: calc(var(--dots-size) * 4.005); height: var(--dots-size); background: var(--color-accent); -webkit-mask: var(--lea-dots-shape) center / contain no-repeat; mask: var(--lea-dots-shape) center / contain no-repeat; }
.article-text > .wp-block-quote { --dots-size: 9px; }
.article-text > .wp-block-quote p { margin: 0; font-family: var(--font-body); font-size: 36px; font-style: normal; line-height: 1.25; text-wrap: balance; }
.article-text > .wp-block-quote cite { font-size: 15px; font-style: normal; font-weight: 500; letter-spacing: .04em; }

.article-practical { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 28px; padding: 28px 0; border-top: 1px solid var(--color-accent); border-bottom: 1px solid var(--color-accent); }
.article-practical > * { margin: 0; }
.article-practical dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 24px; margin: 0; font-size: 18px; line-height: 1.45; }
.article-practical dt { font-weight: 600; }
.article-practical dd { margin: 0; }
.article-practical__past { margin: 0; font-size: 16px; color: var(--color-text-muted); }

.article-end { display: flex; justify-content: center; margin: 56px 0 0; }
.article-end .lea-dots { --dots-size: 10px; }

.article-share { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 48px; font-size: 16px; }
.article-share__label { font-weight: 600; }
.article-share a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--color-accent); }
.article-share a:hover { color: var(--color-accent); }

.article-related { padding: var(--chapter-gap) 0 var(--within-gap); }
.article-related h2 { margin: 0 0 var(--heading-gap); font-size: 44px; line-height: 1.1; }
.articles-rows--compact { margin-top: 0; }
.articles-rows--compact .articles-row a { grid-template-columns: 160px minmax(0, 1fr) auto; gap: 28px; padding: 22px 0; }
.articles-rows--compact .articles-row--text a { grid-template-columns: minmax(0, 1fr) auto; }
.articles-rows--compact .articles-row__thumb img { max-height: 100px; }
.articles-rows--compact .articles-row__quote { font-size: 52px; }
.articles-rows--compact .articles-row__title { font-size: 28px; line-height: 1.15; }
.articles-rows--compact .articles-row__excerpt { display: none; }

/* Tablets */
@media (max-width: 1100px) {
  .articles-intro h1, .article-head h1 { font-size: 60px; }
  .articles-une-list > li { gap: 40px; }
  .articles-une__title { font-size: 44px; }
  .articles-une__image img { max-height: 380px; }
  .articles-row a, .articles-rows-query .articles-rows > li { grid-template-columns: 180px minmax(0, 1fr) auto; gap: 28px; }
  .articles-row__thumb img { max-height: 115px; }
  .articles-row__title { font-size: 28px; }
}

/* Phones (below 768 px) */
@media (max-width: 767px) {
  .articles-intro { gap: 16px; }
  .articles-intro h1 { font-size: 40px; line-height: 1.05; }
  .articles-intro__lead { font-size: 18px; }

  /* One horizontally scrollable row of text links, pulled to the screen edges. */
  .articles-filters { margin: var(--within-gap) calc(50% - 50vw) 0; }
  .articles-filters ul { flex-wrap: nowrap; gap: 24px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
  .articles-filters ul::-webkit-scrollbar { display: none; }
  .articles-filters a { font-size: 16px; }

  .articles-une-list > li { grid-template-columns: 1fr; gap: 20px; }
  .articles-une__image img { max-height: 300px; }
  .articles-une__text { gap: 12px; }
  .articles-une__title { font-size: 32px; line-height: 1.1; }
  .articles-une__excerpt, .articles-une__excerpt p { font-size: 17px; }

  .articles-row a, .articles-rows--compact .articles-row a, .articles-rows-query .articles-rows > li { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 16px; align-items: start; padding: 20px 0; }
  .articles-row--text a, .articles-rows--compact .articles-row--text a, .articles-rows-query .articles-rows > li:not(:has(.articles-row__thumb)):not(.category-presse) { grid-template-columns: minmax(0, 1fr); }
  .articles-row__thumb img, .articles-rows--compact .articles-row__thumb img { max-height: 64px; }
  .articles-row__quote, .articles-rows--compact .articles-row__quote, .articles-rows-query .articles-rows > li.category-presse:not(:has(.articles-row__thumb))::before { font-size: 44px; line-height: .9; }
  .articles-row__title, .articles-rows--compact .articles-row__title { font-size: 22px; line-height: 1.15; }
  .articles-row__excerpt, .articles-row__excerpt p { font-size: 16px; }
  .articles-row__more { grid-column: -2 / -1; justify-self: start; min-height: 32px; font-size: 16px; }

  .article-breadcrumb ol { font-size: 14px; }
  .article-head, .article-text, .article-practical, .article-share, .article-wrap { width: calc(100% - 40px); }
  .article-head { gap: 16px; padding-top: 32px; }
  .article-head h1 { font-size: 40px; line-height: 1.05; }
  .article-intro { font-size: 20px; }
  .article-figure { width: 100%; margin-top: 36px; }
  .article-figure img { max-height: none; }
  .article-text { padding-top: 40px; }
  .article-text > * { margin-bottom: 22px; }
  .article-text > .wp-block-quote { margin: 32px 0 48px; }
  .article-text > .wp-block-quote p { font-size: 28px; }
  .article-practical dl { grid-template-columns: 1fr; gap: 2px; font-size: 17px; }
  .article-practical dd + dt { margin-top: 10px; }
  .article-related h2 { font-size: 32px; }
}
@media (max-width: 700px) { .articles-filters ul { padding: 0 16px; } }