/* =========================================================
   MADYGOOD — article.css — une page article (rubrique Actualités), version 4
   Inspirée de dashdigital.studio/insights (demandes d'Anthony, 25 oct. 2026 : « minimaliste, aéré » puis « la colonne de gauche se bloque et celle de droite défile ») :
   le titre dans la moitié droite, une ligne de repères, le chapô, une grande photo ; puis des SECTIONS À DEUX COLONNES : à gauche l'intertitre et un premier paragraphe
   qui restent en place (position: sticky) pendant que la colonne de droite (paragraphes, citations, photos) défile. Pas de sommaire, de listes ni d'encadrés : de l'air.
   Typographie : uniquement les niveaux de typography.css (h1 → IvyPresto fin, h2 → libellé, blockquote, p, .eyebrow, h4, figcaption), plus --fs-stick pour le texte collé à gauche (IvyPresto fin, en grand : c'est lui qui hiérarchise).
   Gabarit : _source/article.template.html ; contenu : _source/articles.py ; rendu : article_parts() dans build.py.
   ========================================================= */
.ar{--navh:64px;--fs-stick:clamp(32px,2.9vw,42px)}                     /* le texte collé à gauche : IvyPresto fin, jamais sous 32 px */

/* ---------- Ouverture : le titre à droite, les repères, le chapô, la photo ---------- */
.ar__hero{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--sp-8);
  padding:calc(var(--navh) + var(--sp-10)) var(--gut) var(--sp-8);
}
.ar__t{
  grid-column:6 / -1;max-width:none;margin:0;
  font-family:var(--font-display);font-weight:var(--w-thin);
  font-size:var(--fs-d2);line-height:var(--lh-d2);letter-spacing:var(--ls-d2);text-transform:none;text-wrap:balance;
}
.ar__nb{white-space:nowrap}
.ar__meta a{border-bottom:1px solid transparent;transition:border-color .2s}
.ar__meta a:hover,.ar__meta a:focus-visible{border-bottom-color:currentColor}
.ar__meta{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);margin:0;max-width:none}
.ar__meta span:nth-child(1){grid-column:1 / span 5}
.ar__meta span:nth-child(2){grid-column:6 / span 5}
.ar__meta span:nth-child(3){grid-column:11 / -1;text-align:right}
.ar__chapo{grid-column:6 / span 5;margin:0}
.ar__lead{margin:0 var(--gut)}
.ar__lead img{display:block;width:100%;height:auto;aspect-ratio:21 / 9;object-fit:cover}

/* ---------- Corps : à gauche le texte qui reste en place, à droite ce qui défile ---------- */
.ar__body{padding:0 var(--gut)}
.ar__s{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start;margin-top:var(--sp-10)}
.ar__l{grid-column:1 / span 5;position:sticky;top:calc(var(--navh) + var(--sp-6))}
.ar__l h2{margin-bottom:var(--sp-4)}
.ar__l p{max-width:15em;margin:0;font-family:var(--font-display);font-weight:var(--w-thin);font-size:var(--fs-stick);line-height:var(--lh-d2);letter-spacing:var(--ls-d2);text-wrap:balance}
.ar__r{grid-column:7 / -1}
.ar__r > * + *{margin-top:var(--sp-5)}
.ar__r strong{font-weight:var(--w-semi)}
.ar__r a{border-bottom:1px solid currentColor}
.ar__r a:hover,.ar__r a:focus-visible{border-bottom-color:transparent}

/* citation d'Anthony : un filet à gauche, l'attribution en petites capitales */
.ar__q{margin:var(--sp-8) 0;padding:var(--sp-2) 0 var(--sp-2) var(--sp-6);border-left:1px solid var(--ink)}
.ar__q cite{display:block;margin-top:var(--sp-5);font-style:normal;color:var(--graphite)}

/* photos : toute la largeur de la colonne de droite, à leurs proportions, sans arrondi */
.ar__r > .ar__fig{margin-top:var(--sp-7);margin-bottom:var(--sp-7)}
.ar__fig img{display:block;width:100%;height:auto}
.ar__fig figcaption{margin-top:var(--sp-3);color:var(--graphite)}

/* fin d'article : une phrase, un bouton, dans la colonne de droite */
.ar__s--fin .ar__r{padding-bottom:var(--sp-2)}
.ar__cq{max-width:none;margin:0 0 var(--sp-6);font-family:var(--font-display);font-weight:var(--w-thin);font-size:var(--fs-quote);line-height:var(--lh-quote);letter-spacing:var(--ls-quote)}
.ar__r a.ar__cb{
  display:inline-flex;align-items:center;gap:14px;height:64px;padding:0 32px;border-bottom:0;
  background-color:var(--red);color:var(--paper-hi);--bc:var(--paper);--bh:var(--ink);
  font-family:var(--font-sans);font-weight:var(--w-semi);font-size:15px;line-height:1;letter-spacing:var(--ls-ui);text-transform:uppercase;white-space:nowrap;
}

/* ---------- Aller plus loin : trois fiches, la photo, le type, le titre ---------- */
.ar__more{margin-top:var(--sp-10);padding:0 var(--gut) var(--sp-10)}
.ar__cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.ar__cards a{display:block}
.ar__cards figure{margin:0 0 var(--sp-4)}
.ar__cards img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover}
.ar__cards .eyebrow{display:block;color:var(--graphite)}
.ar__cards h4{display:inline;margin-top:var(--sp-2);border-bottom:1px solid transparent;transition:border-color .2s}
.ar__cards a:hover h4,.ar__cards a:focus-visible h4{border-bottom-color:currentColor}

/* ---------- Petits écrans : une seule colonne, le texte de gauche n'est plus collé ---------- */
@media (max-width:900px){
  .ar__hero{display:block;padding-top:calc(var(--navh) + var(--sp-9));padding-bottom:var(--sp-7)}
  .ar__meta{display:block;margin-top:var(--sp-7)}
  .ar__meta span{display:block}
  .ar__meta span + span{margin-top:var(--sp-2)}
  .ar__meta span:nth-child(3){text-align:left}
  .ar__chapo{margin-top:var(--sp-6)}
  .ar__lead{margin:0}
  .ar__lead img{aspect-ratio:4 / 3}
  .ar__s{display:block;margin-top:var(--sp-9)}
  .ar__l{position:static;margin-bottom:var(--sp-6)}
  .ar__cards{grid-template-columns:1fr;row-gap:var(--sp-7)}
}

/* =========================================================
   Page Actualités (liste des articles) — build.py : actualites_parts()
   D'après dashdigital.studio/insights/studio-news : un grand titre, une phrase, puis une ligne par article séparée par un filet :
   la photo à gauche (6 colonnes), à droite les repères, le titre en IvyPresto fin, une phrase et un lien.
   ========================================================= */
.ac{--navh:64px}
.ac__hero{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--sp-7);align-items:start;
  padding:calc(var(--navh) + var(--sp-10)) var(--gut) var(--sp-9);
}
.ac__t1{grid-column:1 / -1;margin:0}
.ac__tag{grid-column:1 / span 5;margin:0}
.ac__chapo{grid-column:7 / span 5;margin:0}      /* dans l'axe du texte des lignes */
.ac__body{padding:0 var(--gut)}
.ac__list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.ac__i{border-top:1px solid var(--line)}
.ac__a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start;padding:var(--sp-5) 0 var(--sp-7)}
.ac__f{grid-column:1 / span 6;margin:0}
.ac__f img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover}
.ac__t{grid-column:7 / -1;display:flex;flex-direction:column;align-items:flex-start}
.ac__m{margin:0;color:var(--graphite)}
.ac__h{
  margin:var(--sp-5) 0 0;max-width:15em;border-bottom:1px solid transparent;transition:border-color .2s;
  font-family:var(--font-display);font-weight:var(--w-thin);font-size:var(--fs-d3);line-height:var(--lh-d3);letter-spacing:var(--ls-d3);text-transform:none;text-wrap:balance;
}
.ac__x{max-width:30em;margin:var(--sp-5) 0 0}
.ac__go{margin-top:var(--sp-6)}
.ac__a:hover .ac__h,.ac__a:focus-visible .ac__h{border-bottom-color:currentColor}
.ac .ar__body{margin-top:var(--sp-9);padding-bottom:var(--sp-10)}
.ac .ar__s--fin{margin-top:0}

@media (max-width:900px){
  .ac__hero{display:block;padding-top:calc(var(--navh) + var(--sp-9));padding-bottom:var(--sp-8)}
  .ac__tag{margin-top:var(--sp-7)}
  .ac__chapo{margin-top:var(--sp-5)}
  .ac__a{display:block;padding:var(--sp-5) 0 var(--sp-8)}
  .ac__t{margin-top:var(--sp-5)}
  .ac__h{margin-top:var(--sp-4)}
}