/*
 * Styles propres à la page "Article" (single.php) uniquement. Le socle
 * commun (nav, hero, cartes ".pcard", proof, newsletter, footer) vit dans
 * assets/css/base.css, chargé avant celui-ci sur toutes les pages.
 */

/* Alignées sur la même colonne centrée à 680px que le corps de l'article (".body .col"). */
.oif-article .crumb{max-width:680px;margin:16px auto 0;padding:0;font-family:Inter,sans-serif;font-size:13px;color:var(--ink-2)}
.oif-article .crumb a{color:var(--ink-2);text-decoration:none}
.oif-article .crumb a:hover{color:var(--terracotta)}

.oif-article .head{max-width:680px;margin:0 auto;padding:20px 0 8px}
.oif-article .tag-pill{
  font-family:'Caveat',cursive;font-size:18px;font-weight:700;color:var(--sage-d);
  background:var(--bg);padding:3px 14px;border-radius:999px;border:1px solid var(--ink);
  transform:rotate(-2deg);display:inline-block;
}
.oif-article h1{font-family:'Fraunces',serif;font-weight:500;font-size:48px;line-height:1.08;letter-spacing:-.02em;margin:16px 0 20px;color:var(--ink)}
.oif-article .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-family:Inter,sans-serif;font-size:13px;color:var(--ink-2)}
.oif-article .meta .upd{font-family:'Caveat',cursive;font-size:16px;color:var(--terracotta);font-weight:700}
.oif-article .exp{
  display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--sage);
  border-radius:999px;padding:5px 14px;font-family:Inter,sans-serif;font-size:12px;font-weight:500;
  color:var(--sage-d);margin-top:14px;
}
.oif-article .exp::before{content:"✓";font-weight:700}

/* ───── Colonne de lecture ───── */
.oif-article .body{display:grid;grid-template-columns:1fr 680px 1fr;padding:8px 48px 8px}
.oif-article .body .col{grid-column:2;min-width:0}
.oif-article .body .col > p{font-size:17px;line-height:1.75;color:var(--ink-2);margin:0 0 22px;text-align:justify;text-justify:inter-word}
.oif-article .body .col > h2{font-family:'Fraunces',serif;font-weight:500;font-size:30px;line-height:1.15;letter-spacing:-.02em;margin:44px 0 16px;color:var(--ink);scroll-margin-top:24px}
.oif-article .body .col > h3{font-family:'Fraunces',serif;font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.01em;margin:30px 0 12px;color:var(--ink)}
.oif-article .body .col p a{color:var(--terracotta-d);text-decoration:none;border-bottom:1.5px solid rgba(193,122,90,.4);transition:.15s}
.oif-article .body .col p a:hover{color:var(--terracotta);border-bottom-color:var(--terracotta)}
.oif-article .body .col ul,.oif-article .body .col ol{font-size:17px;line-height:1.75;color:var(--ink-2);margin:0 0 22px;padding-left:22px}
.oif-article .body .col li{margin-bottom:8px}

/* Tableaux : conteneur défilable (un tableau ne rétrécit jamais sous sa largeur
   de contenu minimale, donc on isole son propre scroll plutôt que de laisser
   déborder toute la page sur mobile). Voir oif_parse_article_content(). */
.oif-article .body .col .table-scroll{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch;border:1px solid var(--ink);border-radius:12px}
.oif-article .body .col .table-scroll table{width:100%;border-collapse:collapse;margin:0;font-size:15px}
.oif-article .body .col .table-scroll th,
.oif-article .body .col .table-scroll td{padding:10px 16px;text-align:left;border-bottom:1px solid #ddd0b4;white-space:nowrap}
.oif-article .body .col .table-scroll thead th{background:var(--paper);font-family:'Fraunces',serif;font-weight:600;color:var(--ink)}
.oif-article .body .col .table-scroll tr:last-child td{border-bottom:0}

/* Citations (blockquote) rédigées dans le corps de l'article, style pull-quote manuscrit. */
.oif-article .body .col blockquote{
  border-left:4px solid var(--terracotta);padding-left:20px;margin:32px 0;
  font-family:'Caveat',cursive;font-size:28px;color:var(--ink);line-height:1.3;
}
.oif-article .body .col blockquote p{font:inherit;color:inherit;margin:0}

/* Images insérées dans le corps de l'article : dimensions naturelles, pas de recadrage forcé. */
.oif-article .body .col img{
  display:block;max-width:100%;height:auto;
  border:1px solid var(--ink);border-radius:12px;margin:28px auto;
}
.oif-article .body .col figure{margin:28px 0}
.oif-article .body .col figure img{margin:0}
.oif-article .body .col figcaption{font-family:Inter,sans-serif;font-size:12.5px;color:var(--ink-2);text-align:center;margin-top:8px}

/* ───── En bref ───── */
.oif-article .brief{background:var(--paper);border:1px solid var(--ink);border-radius:16px;padding:26px 28px 24px;margin:0 0 30px;position:relative;box-shadow:4px 4px 0 var(--ink)}
.oif-article .brief .stamp{position:absolute;top:-16px;left:24px;background:var(--sage);color:#fff;font-family:'Caveat',cursive;font-size:19px;font-weight:700;padding:4px 16px;border-radius:999px;transform:rotate(-2deg);box-shadow:2px 2px 0 var(--ink)}
.oif-article .brief h2{font-family:'Fraunces',serif;font-weight:500;font-size:21px;letter-spacing:-.01em;margin:6px 0 16px;color:var(--ink)}
.oif-article .brief ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.oif-article .brief li{position:relative;padding-left:34px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.oif-article .brief li::before{content:"✓";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-family:Inter,sans-serif;font-size:12px;font-weight:700}
.oif-article .brief li b{color:var(--ink);font-weight:600}

/* ───── Disclaimer YMYL ───── */
.oif-article .disclaimer{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border-radius:12px;padding:16px 18px;margin:0 0 30px;font-family:Inter,sans-serif;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.oif-article .disclaimer .ic{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;font-size:12px;font-weight:700;font-family:'Fraunces',serif}
.oif-article .disclaimer b{color:var(--ink)}

/* ───── Sommaire ───── */
.oif-article .toc{background:var(--bg);border:1px solid var(--ink-2);border-radius:14px;padding:22px 26px;margin:0 0 34px}
.oif-article .toc h4{font-family:Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px}
.oif-article .toc ol{list-style:none;counter-reset:toc;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.oif-article .toc li{counter-increment:toc;font-size:15px;line-height:1.4}
.oif-article .toc li::before{content:counter(toc) ".";font-family:'Caveat',cursive;font-size:19px;font-weight:700;color:var(--terracotta);margin-right:9px}
.oif-article .toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.oif-article .toc a:hover{color:var(--terracotta);border-bottom-color:var(--terracotta)}

/* ───── FAQ ───── */
.oif-article .faq{margin:44px 0 8px;border-top:1.5px dashed var(--ink-2);padding-top:34px}
.oif-article .faq h2{margin-top:0!important}
.oif-article .faq .q{border-bottom:1px solid #ddd0b4;padding:0 0 18px;margin-bottom:18px}
.oif-article .faq .q:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.oif-article .faq .q h3{font-family:'Fraunces',serif;font-weight:600;font-size:18px;margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.oif-article .faq .q h3::before{content:"?";font-family:'Caveat',cursive;font-size:24px;font-weight:700;color:var(--sage-d);flex:none}
.oif-article .faq .q p{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin:0;padding-left:24px;text-align:justify;text-justify:inter-word}

/* ───── Tags ───── */
.oif-article .tags-row{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.oif-article .tags-row a{text-decoration:none}
.oif-article .tags-row span{font-family:Inter,sans-serif;font-size:12px;font-weight:600;color:var(--ink-2);border:1px solid var(--ink-2);border-radius:999px;padding:6px 14px;display:inline-block;transition:.2s}
.oif-article .tags-row a:hover span{color:var(--terracotta);border-color:var(--terracotta)}

/* ───── Bio auteur ───── */
.oif-article .author{
  margin:24px 48px 48px;max-width:680px;margin-left:auto;margin-right:auto;
  background:var(--paper);border:1px solid var(--ink);border-radius:16px;padding:24px;
  display:flex;gap:20px;align-items:center;
}
.oif-article .author .ava{width:60px;height:60px;border-radius:50%;background:var(--terracotta);color:#fff;display:grid;place-items:center;font-family:'Caveat',cursive;font-weight:700;font-size:26px;flex:none}
.oif-article .author b{font-family:'Fraunces',serif;font-size:17px;color:var(--ink)}
.oif-article .author p{margin:6px 0 0;font-size:14px;color:var(--ink-2);line-height:1.5}

/* ───── Articles liés (".lcard") ───── */
/* Même colonne centrée à 680px que le corps de l'article, pour ne pas déborder plus large. */
.oif-article .related{max-width:680px;margin:0 auto;padding:8px 0}
.oif-article .related h3{font-family:'Fraunces',serif;font-weight:500;font-size:28px;margin:0 0 20px;letter-spacing:-.01em;color:var(--ink)}
.oif-article .related .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.oif-article .lcard{position:relative}
.oif-article .lcard .img{
  aspect-ratio:4/3;border-radius:12px;border:1px solid var(--ink);
  background:repeating-linear-gradient(135deg,#dcd0bb 0 10px,#cfc1a8 10px 20px);
  margin-bottom:14px;position:relative;overflow:hidden;transition:.25s;display:block;
}
.oif-article .lcard .img img{width:100%;height:100%;object-fit:cover;display:block}
.oif-article .lcard:hover .img{transform:translateY(-3px);box-shadow:3px 5px 0 var(--ink)}
.oif-article .lcard.sage .img{background:repeating-linear-gradient(135deg,#cfdccb 0 10px,#bccfb6 10px 20px)}
.oif-article .lcard.terracotta .img{background:repeating-linear-gradient(135deg,#e6c9b6 0 10px,#d6b59b 10px 20px)}
.oif-article .lcard .tag{
  position:absolute;top:12px;left:12px;font-family:'Caveat',cursive;font-size:18px;font-weight:700;
  background:var(--bg);padding:2px 12px;border-radius:999px;border:1px solid var(--ink);transform:rotate(-3deg);
}
.oif-article .lcard.terracotta .tag{color:var(--terracotta-d)}
.oif-article .lcard.sage .tag{color:var(--sage-d)}
.oif-article .lcard.brown .tag{color:#8B5A38}
.oif-article .lcard h4{font-family:'Fraunces',serif;font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-.01em;margin:0 0 8px}
.oif-article .lcard h4 a{color:var(--ink);text-decoration:none}
.oif-article .lcard p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0 0 12px}
.oif-article .lcard .by{font-family:Inter,sans-serif;font-size:12px;color:var(--ink-2);display:flex;justify-content:space-between}

/* ───── Responsive ───── */
@media (max-width:1000px){
  .oif-article .crumb{padding:16px 24px 0}
  .oif-article .head{padding:16px 24px 8px}
  .oif-article h1{font-size:36px}
  .oif-article .body{grid-template-columns:1fr;padding:8px 24px}
  .oif-article .body .col{grid-column:1}
  .oif-article .author{margin:24px 24px 40px}
  .oif-article .related{padding:8px 24px}
  .oif-article .related .grid{grid-template-columns:1fr 1fr;gap:20px}
}
@media (max-width:640px){
  .oif-article h1{font-size:28px}
  .oif-article .body .col > h2{font-size:24px}
  .oif-article .author{flex-direction:column;text-align:center}
  .oif-article .related .grid{grid-template-columns:1fr}
}