/* ══════════════════════════════════════════════════════════════════════════
   ATHENORA — Éclairages : la liste (une de journal, sans image) et la page d'un article.
   Tout le reste (bandes, bandeau d'entête, boutons, pied de page) vient de site.css.

   La liste est composée comme une une : l'article de tête en grand (seul titre en Butler — le
   « moment » de la page), deux brèves à côté, puis des rangées d'articles simples et larges ;
   des filets séparent les articles, comme les colonnes d'un journal. Titres courants en Poppins.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ Bandeau : les trois temps de la section Éclairages de l'accueil ══ */
.lignes-titre{display:flex;flex-direction:column;gap:.06em}
.lignes-titre .ligne{display:block}
.lignes-titre .contour{color:transparent;-webkit-text-stroke:1.2px var(--ciel)}
.lignes-titre .accent{color:var(--or)}

/* ══ Liste ══ */
.liste .inner{align-items:stretch;text-align:left;padding-top:96px}

/* le choix de la rubrique : une liste déroulante discrète, à droite */
.filtre{display:flex;justify-content:flex-end;align-items:center;gap:16px}
.filtre-choix{position:relative;display:inline-block}
.filtre-choix select{appearance:none;-webkit-appearance:none;min-width:300px;padding:10px 40px 10px 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;font:inherit;font-size:14px;font-weight:400;letter-spacing:.06em;color:var(--ink);cursor:pointer}
.filtre-choix::after{content:"";position:absolute;right:8px;top:50%;width:7px;height:7px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:translateY(-75%) rotate(45deg);pointer-events:none}
.filtre-choix select:focus-visible{outline:2px solid var(--acc);outline-offset:6px}
.filtre-ok{padding:9px 18px;border:1px solid var(--ink);background:transparent;font:inherit;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer}

/* la une : trois colonnes ; chaque article sous un filet, un filet vertical entre les colonnes */
.journal{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:56px;margin-top:40px}
.case{position:relative;border-top:1px solid var(--line);padding:30px 0 60px;min-width:0}
.case-une{border-top:2px solid var(--ink)}
/* place de chaque article, calculée par App\Support\CompositionUne ; filet vertical à gauche des articles
   qui ne commencent pas en première colonne */
@media (min-width:1024px){
  .case{grid-column:var(--col) / span var(--span);grid-row:var(--row) / span var(--rows)}
  .case.suite::before{content:"";position:absolute;left:-28px;top:30px;bottom:60px;width:1px;background:var(--line)}
}


.vide{margin-top:64px;text-align:center;display:flex;flex-direction:column;align-items:center}

/* pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:40px;font-size:14px;letter-spacing:.06em;color:var(--body)}
.pagination ul{display:flex;gap:6px}
.pg-num,.pg-etc{display:grid;place-items:center;min-width:42px;height:42px;border:1px solid transparent;transition:border-color .35s,color .35s}
a.pg-num:hover{border-color:var(--acc);color:var(--ink)}
.pg-num[aria-current]{border-color:var(--ink);color:var(--ink);font-weight:500}
.pg-fleche{text-transform:uppercase;font-size:12px;letter-spacing:.24em}
.pg-fleche[aria-disabled]{opacity:.35}

/* ══ Article ══ */
/* le corps : titre de l'article (le h1 de la page), date, texte, signature (logo et rubrique) */
.article-titre{font-family:var(--serif);font-weight:800;font-size:clamp(30px,3vw,44px);line-height:1.2;color:var(--ink);text-wrap:balance}
.article-date{margin-top:18px}
.article-date + *{margin-top:36px}
.article-signature{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:14px}
.article .inner{text-align:left;align-items:stretch}
.article-grille{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:80px;align-items:start}
.article-grille.sans-visuel{grid-template-columns:minmax(0,1fr)}
.article-visuel{position:sticky;top:140px;border:1px solid var(--line);background:rgba(5,8,46,.05)}
.article-visuel img{display:block;width:100%;height:auto}
.article-corps{max-width:40em}
.article-avis{margin-bottom:32px;padding:14px 18px;border-left:2px solid var(--acc);font-size:15px;color:var(--body);background:rgba(5,8,46,.04)}

/* le texte de l'article (HTML de l'éditeur) */
.article-texte{font-size:18px;line-height:1.75;color:var(--body)}
.article-texte > :first-child{margin-top:0}
.article-texte p,.article-texte ul,.article-texte ol,.article-texte blockquote{margin:0 0 1.1em}
.article-texte h2,.article-texte h3{font-family:var(--serif);font-weight:800;color:var(--ink);line-height:1.3;margin:1.6em 0 .6em}
.article-texte h2{font-size:28px}
.article-texte h3{font-size:22px}
.article-texte strong,.article-texte b{font-weight:500;color:var(--ink)}
.article-texte a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-texte a:hover{color:var(--acc)}
.article-texte ul,.article-texte ol{padding-left:1.4em}
.article-texte ul{list-style:none}
.article-texte ul li{position:relative}
.article-texte ul li::before{content:"";position:absolute;left:-1.1em;top:.85em;width:6px;height:1px;background:var(--acc)}
.article-texte ol{list-style:decimal}
.article-texte li + li{margin-top:.35em}
.article-texte blockquote{padding-left:22px;border-left:2px solid var(--acc);font-family:var(--serif);font-weight:800;font-size:22px;line-height:1.45;color:var(--ink)}

.article-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:48px}
.article-retour{display:inline-block;margin-top:64px;font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--acc)}
.article-retour:hover{color:var(--ink)}

/* fin de page : les articles de la même rubrique, sur fond nuit, en trois colonnes sous filet */
.page-eclairages .fin .inner{padding-bottom:110px}
.connexes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 56px;width:100%;margin-top:56px;text-align:left}
.connexes > li{border-top:1px solid var(--line);padding:30px 0 20px}

@media (max-width:1023px){
  .journal{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .case-une,.case-large{grid-column:span 2}
  .connexes{grid-template-columns:1fr;gap:0}
  .article-grille{grid-template-columns:1fr;gap:56px}
  .article-visuel{position:static;width:min(380px,100%);margin:0 auto}
  .article-corps{max-width:none}
}
@media (max-width:767px){
  .liste .inner{padding-top:72px}
  .filtre{justify-content:stretch}
  .filtre-choix,.filtre-choix select{width:100%;min-width:0}
  /* une seule colonne : la une d'ouverture en tête et en grand, tous les autres articles à la même taille */
  .journal{grid-template-columns:minmax(0,1fr)}
  .case-une,.case-large{grid-column:auto}
  .case{padding:26px 0 44px}
  .case-ouverture{order:-1}
  .case-ouverture .carte-extrait{column-count:1;font-size:16px}
  .case:not(.case-ouverture){border-top:1px solid var(--line)}
  .case:not(.case-ouverture) .carte-titre{margin-top:14px;max-width:none;font-family:inherit;font-weight:500;font-size:19px;line-height:1.35}
  .case:not(.case-ouverture) .carte-extrait{margin-top:14px;columns:auto;font-size:15.5px;line-height:1.65;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
  .article-texte{font-size:17px}
  .pagination{gap:14px;flex-wrap:wrap}
  .pg-fleche{font-size:0;letter-spacing:0}
  .pg-fleche span{font-size:18px}
}