/* =========================================================================
   Idées de Génie — article.css (chargé uniquement sur les articles)
   Lecture confortable, colonne étroite, typographie éditoriale.
   ========================================================================= */

.article-hero{padding-block:clamp(1.4rem,3vw,2.4rem) 0}
.article-hero .crumb{margin-bottom:1.4rem}
.article-hero__kicker{margin-bottom:.8rem}
.article-hero h1{font-size:clamp(2rem,5vw,3.4rem);max-width:18ch;margin:0 0 .7rem}
.article-hero__lede{font-size:1.15rem;color:var(--txt-2);max-width:58ch;margin:0 0 1.2rem}
.article-hero__meta{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;font-family:var(--sans);
  font-size:.85rem;color:var(--txt-2);padding-bottom:1.6rem;border-bottom:1px solid var(--ligne)}
.article-hero__meta .by{color:var(--encre);font-weight:600}

.article-cover{margin:2rem 0;border-radius:var(--r);overflow:hidden}
.article-cover img{width:100%;height:auto}
.article-cover figcaption{font-family:var(--sans);font-size:.78rem;color:var(--txt-2);padding:.7rem .2rem 0}

/* Corps de lecture */
.prose{max-width:720px;margin-inline:auto;font-size:1.12rem;line-height:1.75}
.prose>p:first-of-type::first-letter{font-family:var(--serif);font-weight:900;float:left;
  font-size:3.4rem;line-height:.82;padding:.35rem .5rem 0 0;color:var(--cobalt)}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);margin:2.4rem 0 .8rem}
.prose h3{font-size:1.25rem;font-weight:600;margin:1.8rem 0 .6rem}
.prose a{color:var(--cobalt);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.prose a:hover{color:var(--cobalt-d)}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1.2rem}
.prose li{margin:.4rem 0}
.prose blockquote{margin:1.8rem 0;padding:.4rem 0 .4rem 1.4rem;border-left:3px solid var(--cobalt);
  font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--encre)}
.prose img{border-radius:var(--r-sm);margin:1.6rem 0}
.prose figure{margin:1.6rem 0}
.prose figcaption{font-family:var(--sans);font-size:.78rem;color:var(--txt-2);margin-top:.5rem}

/* Encadré « En bref » (answer-first, GEO) */
.tldr{max-width:720px;margin:0 auto 2rem;background:var(--papier-2);border-left:3px solid var(--cobalt);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1.3rem 1.5rem}
.tldr p{margin:0}
.tldr .kicker{margin-bottom:.5rem}

/* Bloc auteur / partage */
.byline{display:flex;align-items:center;gap:.8rem;max-width:720px;margin:2.5rem auto 0;
  padding-top:1.5rem;border-top:1px solid var(--ligne);font-family:var(--sans);font-size:.9rem;color:var(--txt-2)}
.byline__ava{width:44px;height:44px;border-radius:999px;background:var(--cobalt);color:#fff;
  display:grid;place-items:center;font-weight:700;font-family:var(--serif)}

/* À lire aussi — cartes COMPACTES & modernes.
   NB : la grille est (re)définie ici car `home.css` (qui porte `.grid-art`) n'est PAS chargé
   sur la page article -> sans ça les cartes s'empilaient en pleine largeur (images géantes). */
.related{margin-top:clamp(3rem,6vw,4.5rem)}
.related .grid-art{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.2vw,1.6rem)}
.related .card-art{gap:.55rem}
.related .card-art__media{aspect-ratio:16/10}
.related .card-art__cat{font-size:.68rem}
.related .card-art__title{font-size:1.02rem;line-height:1.24;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.related .card-art__excerpt{display:none}
@media (max-width:820px){
  .related .grid-art{grid-template-columns:1fr 1fr;gap:1.1rem}
}
@media (max-width:560px){
  .related .grid-art{grid-template-columns:1fr;gap:1rem}
  .related .card-art__media{aspect-ratio:16/9;max-height:210px}
  .related .card-art__title{font-size:1.05rem}
}

/* Embed vidéo « façade » (l'iframe YouTube-nocookie ne se charge qu'au clic) */
.ig-embed-wrap{margin:2rem 0}
.ig-embed-wrap figcaption{font-family:var(--sans);font-size:.78rem;color:var(--txt-2);margin-top:.5rem}
.ig-embed{position:relative;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;background:var(--papier-2)}
.ig-embed img{width:100%;height:100%;object-fit:cover;display:block}
.ig-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ig-embed::after{content:"";position:absolute;inset:0;background:rgba(20,21,25,.28);transition:background .25s;z-index:1}
.ig-embed:hover::after{background:rgba(20,21,25,.14)}
.ig-embed__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:999px;
  background:rgba(255,255,255,.94);display:grid;place-items:center;z-index:2;transition:transform .2s var(--ease)}
.ig-embed:hover .ig-embed__play{transform:translate(-50%,-50%) scale(1.07)}
.ig-embed__play span{width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--cobalt);margin-left:4px}

/* Maillage interne « À explorer aussi » */
.ig-links{max-width:720px;margin:2.2rem auto 0}
.ig-links .kicker{margin-bottom:.6rem}
.ig-links ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}
.ig-links a{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.85rem;padding:.5rem .95rem;
  border:1.5px solid var(--ligne-2);border-radius:999px;color:var(--encre);transition:border-color .2s,color .2s}
.ig-links a:hover{border-color:var(--cobalt);color:var(--cobalt)}

/* Page 404 (centrée) */
.err-hero{text-align:center;padding-block:clamp(3rem,7vw,5rem)}
.err-hero .kicker{justify-content:center}
.err-hero h1{max-width:none}
.err-hero .article-hero__lede{margin-inline:auto}