/* Atletisport — blog et articles
   ---------------------------------------------------------------------------
   Index : une mise en avant pleine largeur puis une grille de cartes.
   Article : colonne de lecture etroite, rail de metadonnees a gauche.
--------------------------------------------------------------------------- */

body.blog{background:var(--creme)}

/* ====================== INDEX : MISE EN AVANT ====================== */
.blog-une{padding:clamp(18px,3vw,34px) 0 clamp(10px,2vw,20px);background:var(--creme)}
/* Deux colonnes, et non un titre en surimpression : les images a la une du
   blog sont des visuels composes, avec un titre deja incruste dedans. Un
   texte pose par-dessus se superposerait au leur. */
.une-carte{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  overflow:hidden;text-decoration:none;
  border-radius:var(--r-cadre);background:var(--noir);
  min-height:clamp(320px,34vw,440px);
}
.une-visuel{position:relative;overflow:hidden;background:#0B0C0E}
.une-visuel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.une-carte:hover .une-visuel img{transform:scale(1.03)}
.une-corps{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,3.6vw,52px);color:#fff;
}
.une-etiquette{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rouge-clair);margin-bottom:14px;
}
.une-corps h1{
  font-size:clamp(26px,3.8vw,46px);font-weight:500;
  letter-spacing:-.032em;line-height:1.1;margin-bottom:14px;
}
.une-corps p{
  font-family:var(--mono);font-size:12px;line-height:1.85;letter-spacing:.03em;
  color:#D7DADE;margin-bottom:20px;
}
.une-lire{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.une-lire svg{width:12px;height:12px;transition:transform .2s}
.une-carte:hover .une-lire svg{transform:translateX(4px)}
@media(max-width:820px){
  .une-carte{grid-template-columns:1fr}
  .une-visuel{aspect-ratio:16/9}
  .une-corps{order:2}
}

/* ====================== INDEX : GRILLE ====================== */
.grille-articles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:clamp(22px,3vw,34px);
}
.article-carte a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.article-visuel{
  aspect-ratio:3/2;overflow:hidden;border-radius:16px;background:var(--gris-200);
  margin-bottom:18px;
}
.article-visuel img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.article-carte a:hover .article-visuel img{transform:scale(1.04)}
.article-corps{display:flex;flex-direction:column;flex:1}
.article-haut{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-bottom:11px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris-500);
}
.article-duree{color:var(--rouge-texte)}
.article-corps time{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris-500);
}
.article-corps h3{
  font-size:19px;font-weight:500;letter-spacing:-.022em;line-height:1.28;
  margin:0 0 10px;
}
.article-carte a:hover h3{color:var(--rouge-texte)}
.article-corps p{color:var(--gris-500);font-size:14.5px;line-height:1.65;flex:1}
.article-corps .lien{
  margin-top:16px;display:flex;align-items:center;gap:7px;width:fit-content;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--rouge-texte);
}
.article-corps .lien svg{width:11px;height:11px;transition:transform .2s}
.article-carte a:hover .lien svg{transform:translateX(3px)}

/* ====================== ARTICLE ====================== */
.article{background:var(--creme);padding-bottom:clamp(50px,7vw,90px)}
.article-tete{
  max-width:820px;margin:0 auto;padding:clamp(30px,5vw,60px) 20px clamp(24px,3vw,36px);
  text-align:center;
}
.article-tete .fil-ariane{
  padding:0;margin-bottom:22px;display:flex;justify-content:center;gap:8px;
}
.article-tete h1{
  font-size:clamp(28px,4.4vw,50px);font-weight:500;
  letter-spacing:-.034em;line-height:1.1;
}
.article-etiquettes{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px;
}
.article-etiquettes span{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rouge-texte);
  border:1px solid rgba(196,15,15,.28);border-radius:100px;padding:7px 14px;
}
.article-couverture{
  max-width:1160px;margin:0 auto clamp(34px,5vw,60px);padding:0 20px;
}
.article-couverture img{
  width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;
  border-radius:var(--r-cadre);background:var(--gris-200);
}

/* Rail de metadonnees a gauche, colonne de lecture a droite. Le rail est
   colle : il accompagne la lecture sur les articles longs. */
.article-corps-grille{
  max-width:1160px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start;
}
.article-meta{position:sticky;top:calc(var(--h-nav) + 44px);display:grid;gap:26px}
.article-meta-titre{
  display:block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris-500);margin-bottom:7px;
}
.article-meta time,
.article-meta p{font-size:15px;font-weight:500;color:var(--noir);margin:0}
.article-meta .btn{margin-top:2px}

/* Colonne de lecture : mesure limitee a environ 72 caracteres, la longueur
   au-dela de laquelle l'oeil perd la ligne suivante. */
.article-texte{max-width:72ch;font-size:17px;line-height:1.75;color:var(--gris-900)}
.article-texte > *:first-child{margin-top:0}
.article-texte h2{
  font-size:clamp(22px,2.6vw,30px);font-weight:500;letter-spacing:-.028em;
  line-height:1.2;margin:clamp(36px,4vw,54px) 0 16px;color:var(--noir);
}
.article-texte h3{
  font-size:clamp(18px,2vw,22px);font-weight:500;letter-spacing:-.02em;
  line-height:1.25;margin:clamp(28px,3vw,40px) 0 13px;color:var(--noir);
}
.article-texte h4{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;margin:30px 0 11px;color:var(--rouge-texte);
}
.article-texte p{margin:0 0 20px}
.article-texte strong{font-weight:600;color:var(--noir)}
.article-texte a{color:var(--rouge-texte);text-decoration:underline;text-underline-offset:3px}
.article-texte ul,
.article-texte ol{margin:0 0 22px;padding-left:22px}
.article-texte li{margin-bottom:9px}
.article-texte li::marker{color:var(--rouge-texte)}
.article-texte img{
  width:100%;height:auto;border-radius:18px;margin:clamp(26px,3vw,38px) 0;
  background:var(--gris-200);
}
.article-texte blockquote{
  margin:clamp(26px,3vw,38px) 0;padding:4px 0 4px 24px;
  border-left:2px solid var(--rouge-texte);
  font-size:19px;line-height:1.6;color:var(--noir);
}
.article-texte hr{
  border:0;border-top:1px solid rgba(14,15,17,.14);
  margin:clamp(32px,4vw,48px) 0;
}
.article-texte table{
  width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px;
}
.article-texte th,
.article-texte td{
  padding:12px 14px;text-align:left;
  border-bottom:1px solid rgba(14,15,17,.12);
}
.article-texte th{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris-500);
}

@media(max-width:860px){
  .article-corps-grille{grid-template-columns:1fr;gap:30px}
  .article-meta{
    position:static;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:20px;padding-bottom:26px;border-bottom:1px solid rgba(14,15,17,.14);
  }
  .article-texte{max-width:none;font-size:16.5px}
}