/* ==========================================================================
   VO2 Sport — Gabarit d'article de blog
   Chargé uniquement sur les single posts (voir functions.php).
   Charte reprise du site : Muli, #004D71, #4DA941, #1C1C1C.
   Créé le 27.08.2026 — v1.0.3 (30.08.2026) : colonne 820 px, date de publication
   ========================================================================== */

:root{
  --vo2-brand:#004D71;
  --vo2-accent:#4DA941;
  --vo2-ink:#1C1C1C;
  --vo2-ink-soft:#5B6B75;
  --vo2-rule:#DCE4E9;
  --vo2-alert-bg:#F1F7EF;
  --vo2-measure:820px;
  --vo2-wide:1000px;
}

/* --- Colonne de lecture ------------------------------------------------- */
.single-post main .page-content,
.single-post main .entry-content{
  max-width:var(--vo2-measure);
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
  font-size:20px;
  line-height:1.65;
  color:var(--vo2-ink);
}

/* Titre aligné sur la colonne de texte */
.single-post main h1.entry-title{
  max-width:var(--vo2-measure);
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
  font-size:clamp(32px,4.2vw,50px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin-bottom:28px;
}

/* --- Date de publication (sous le titre) ------------------------------ */
.single-post main .entry-meta{
  max-width:var(--vo2-measure);
  margin:-14px auto 36px;
  padding-left:20px;
  padding-right:20px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--vo2-ink-soft);
}

.single-post main .entry-meta time{
  color:var(--vo2-brand);
}

.single-post main .entry-meta .entry-meta-sep{
  margin:0 .6em;
  color:var(--vo2-rule);
}

/* --- Rythme vertical ---------------------------------------------------- */
.single-post .page-content p{
  margin:0 0 1.6em;
}

.single-post .page-content h2{
  font-size:30px;
  line-height:1.25;
  font-weight:800;
  color:var(--vo2-ink);
  margin:2.2em 0 .6em;
  letter-spacing:-.005em;
  text-wrap:balance;
}

.single-post .page-content h3{
  font-size:23px;
  line-height:1.3;
  font-weight:700;
  color:var(--vo2-ink);
  margin:1.8em 0 .5em;
}

.single-post .page-content h2:first-child,
.single-post .page-content h3:first-child{
  margin-top:0;
}

/* --- Listes ------------------------------------------------------------- */
.single-post .page-content ul,
.single-post .page-content ol{
  margin:0 0 1.6em;
  padding-left:1.4em;
}

.single-post .page-content li{
  margin-bottom:.55em;
  line-height:1.6;
}

/* --- Images : débord contrôlé ------------------------------------------- */
.single-post .page-content img{
  display:block;
  max-width:100%;
  height:auto;
  margin:2.2em auto;
  border-radius:2px;
}

.single-post .page-content figure{
  margin:2.2em 0;
}

.single-post .page-content figcaption{
  font-size:14.5px;
  color:var(--vo2-ink-soft);
  text-align:center;
  margin-top:.8em;
  line-height:1.5;
}

/* Images larges sur grand écran */
@media (min-width:1100px){
  .single-post .page-content > img,
  .single-post .page-content > figure,
  .single-post .page-content > p > img{
    max-width:var(--vo2-wide);
    width:var(--vo2-wide);
    margin-left:calc((var(--vo2-measure) - var(--vo2-wide)) / 2);
    margin-right:calc((var(--vo2-measure) - var(--vo2-wide)) / 2);
  }
}

/* --- Liens -------------------------------------------------------------- */
.single-post .page-content a{
  color:var(--vo2-brand);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}

.single-post .page-content a:hover,
.single-post .page-content a:focus-visible{
  text-decoration-thickness:2px;
}

.single-post .page-content a:focus-visible{
  outline:2px solid var(--vo2-brand);
  outline-offset:2px;
}

/* --- Encadré d'alerte clinique ------------------------------------------
   Usage : <div class="vo2-alert"><strong>Signaux d'alerte</strong> ... </div>
   ------------------------------------------------------------------------ */
.single-post .page-content .vo2-alert{
  background:var(--vo2-alert-bg);
  border-left:3px solid var(--vo2-accent);
  padding:22px 26px;
  margin:2.2em 0;
}

.single-post .page-content .vo2-alert > strong:first-child{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--vo2-accent);
  margin-bottom:.8em;
}

.single-post .page-content .vo2-alert p:last-child,
.single-post .page-content .vo2-alert ul:last-child{
  margin-bottom:0;
}

/* --- Citations ---------------------------------------------------------- */
.single-post .page-content blockquote{
  margin:2.2em 0;
  padding:0 0 0 26px;
  border-left:3px solid var(--vo2-brand);
  font-size:22px;
  line-height:1.5;
  color:var(--vo2-ink);
}

.single-post .page-content blockquote p:last-child{
  margin-bottom:0;
}

/* --- Tableaux : jamais de scroll horizontal sur la page ----------------- */
.single-post .page-content table{
  width:100%;
  border-collapse:collapse;
  margin:2.2em 0;
  font-size:17px;
}

.single-post .page-content th,
.single-post .page-content td{
  padding:12px 16px;
  border-bottom:1px solid var(--vo2-rule);
  text-align:left;
  vertical-align:top;
}

.single-post .page-content thead th{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--vo2-ink-soft);
}

/* --- Sources / étiquettes en fin d'article ------------------------------ */
.single-post .page-content hr{
  border:0;
  border-top:1px solid var(--vo2-rule);
  margin:2.6em 0;
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width:782px){
  .single-post main .page-content,
  .single-post main .entry-content{
    font-size:18px;
    line-height:1.6;
    padding-left:18px;
    padding-right:18px;
  }

  .single-post main h1.entry-title{
    padding-left:18px;
    padding-right:18px;
    margin-bottom:20px;
  }

  .single-post main .entry-meta{
    margin:-8px auto 28px;
    padding-left:18px;
    padding-right:18px;
    font-size:13px;
  }

  .single-post .page-content h2{
    font-size:24px;
    margin-top:1.9em;
  }

  .single-post .page-content h3{
    font-size:20px;
  }

  .single-post .page-content .vo2-alert{
    padding:18px 20px;
  }

  .single-post .page-content blockquote{
    font-size:19px;
    padding-left:20px;
  }
}

/* --- Espace avant le footer -------------------------------------------- */
.single-post main.site-main{
  padding-bottom:90px;
}

.single-post .page-content > *:last-child{
  margin-bottom:0;
}

/* --- Etiquettes (tags) en fin d'article --------------------------------
   Markup reel : .post-tags > span.tag-links > a[rel="tag"] (sans separateur)
   ------------------------------------------------------------------------ */
.single-post .page-content .post-tags{
  max-width:var(--vo2-measure);
  margin:2.8em auto 0;
  padding:1.5em 20px 0;
  border-top:1px solid var(--vo2-rule);
}

.single-post .post-tags .tag-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--vo2-ink-soft);
}

.single-post .post-tags .tag-links a{
  padding:6px 13px;
  background:var(--vo2-alert-bg);
  border:1px solid var(--vo2-rule);
  border-radius:2px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  line-height:1.4;
  color:var(--vo2-brand);
  text-decoration:none;
}

.single-post .post-tags .tag-links a:hover,
.single-post .post-tags .tag-links a:focus-visible{
  background:var(--vo2-brand);
  border-color:var(--vo2-brand);
  color:#fff;
  text-decoration:none;
}

.single-post .post-tags .tag-links a:focus-visible{
  outline:2px solid var(--vo2-brand);
  outline-offset:2px;
}

@media (max-width:782px){
  .single-post main.site-main{
    padding-bottom:56px;
  }

  .single-post .page-content .post-tags{
    padding-left:18px;
    padding-right:18px;
  }
}