/* ---------- Le Mag « Décollage » (/blog/) ---------- */

/* rubriques : une couleur chacune */
.bl-rub { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--pp-ink); font-weight: 800; font-size: 13px; letter-spacing: .02em; text-decoration: none; color: var(--pp-ink); background: #fff; }
.bl-rub[data-r="radar-ia"] { background: var(--pp-blue); color: #fff; }
.bl-rub[data-r="ia-au-boulot"] { background: var(--pp-mint); }
.bl-rub[data-r="visible-a-30-km"] { background: var(--pp-yellow); }
.bl-rub[data-r="pub-qui-rapporte"] { background: var(--pp-orange); color: #fff; }
.bl-rub[data-r="combien-ca-coute"] { background: var(--pp-cream); }

/* hub */
.bl-hub { padding: calc(var(--pp-header-h) + clamp(24px, 4vw, 50px)) 0 clamp(54px, 7vw, 90px); background: var(--pp-yellow-soft); color: var(--pp-ink); border-bottom: 3px solid var(--pp-ink); position: relative; overflow: hidden; }
.bl-hub h1 { font-size: clamp(54px, 9vw, 130px); font-weight: 900; font-style: italic; letter-spacing: -.05em; line-height: .9; margin: 18px 0 10px; color: var(--pp-ink); text-shadow: 7px 7px 0 var(--pp-orange); }
.bl-hub h1 small { display: block; font-size: clamp(18px, 2vw, 24px); font-style: normal; letter-spacing: 0; color: var(--pp-ink); text-shadow: none; margin-top: 18px; font-weight: 700; }
.bl-hub .lead { color: var(--pp-ink); }
.bl-hub__plane { position: absolute; right: 6%; top: 22%; width: clamp(90px, 12vw, 170px); rotate: -12deg; }
.bl-rubs { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }

.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bl-card { display: flex; flex-direction: column; background: #fff; border: 3px solid var(--pp-ink); border-radius: 20px; overflow: hidden; color: var(--pp-ink); text-decoration: none; box-shadow: 6px 6px 0 var(--pp-ink); transition: transform .2s ease, box-shadow .2s ease; }
.bl-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--pp-ink); }
.bl-card__img { aspect-ratio: 16 / 9; background: var(--pp-cream); border-bottom: 3px solid var(--pp-ink); overflow: hidden; }
.bl-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.bl-card:hover .bl-card__img img { transform: scale(1.04); }
.bl-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bl-card h2, .bl-card h3 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.bl-card p { margin: 0; color: var(--pp-ink-2); font-size: 15px; line-height: 1.55; }
.bl-card__meta { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--pp-ink-3); }
.bl-card--big { grid-column: 1 / -1; flex-direction: row; }
.bl-card--big .bl-card__img { flex: 1.2; aspect-ratio: auto; min-height: 320px; border-bottom: 0; border-right: 3px solid var(--pp-ink); }
.bl-card--big .bl-card__body { flex: 1; padding: clamp(22px, 3vw, 38px); justify-content: center; }
.bl-card--big h2 { font-size: clamp(24px, 2.6vw, 34px); }
.bl-soon { border: 3px dashed var(--pp-ink); border-radius: 20px; padding: 22px; background: var(--pp-cream); display: flex; flex-direction: column; gap: 8px; }
.bl-soon b { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--pp-orange); }
.bl-soon span { font-weight: 800; font-size: 17px; line-height: 1.3; }

/* article */
.bl-art-hero { padding: calc(var(--pp-header-h) + clamp(20px, 3vw, 40px)) 0 0; background: var(--pp-yellow-soft); }
.bl-art-hero__in { max-width: 920px; margin: 0 auto; padding: 0 24px; }
.bl-art-hero h1 { font-size: clamp(32px, 4.6vw, 60px); font-weight: 900; line-height: 1.04; letter-spacing: -.035em; margin: 16px 0 18px; }
.bl-art-hero h1 em { font-style: italic; background: linear-gradient(transparent 62%, var(--pp-yellow) 62%); }
.bl-by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; font-weight: 600; color: var(--pp-ink-2); margin-bottom: 28px; }
.bl-by__av { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pp-ink); color: var(--pp-yellow); font-weight: 900; font-size: 15px; border: 2px solid var(--pp-ink); }
.bl-by strong { color: var(--pp-ink); }
.bl-cover { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; top: 40px; margin-top: -10px; }
.bl-cover img { width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; object-position: center 45%; display: block; border-radius: 22px; border: 3px solid var(--pp-ink); box-shadow: 10px 10px 0 var(--pp-ink); }

.bl-wrap { max-width: 1180px; margin: 0 auto; padding: 90px 24px 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.bl-prose { max-width: 720px; font-size: 18px; line-height: 1.8; color: var(--pp-ink-2); }
.bl-prose > p:first-child { font-size: 21px; line-height: 1.65; color: var(--pp-ink); font-weight: 500; }
.bl-prose h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; font-weight: 900; letter-spacing: -.03em; color: var(--pp-ink); margin: 56px 0 16px; scroll-margin-top: calc(var(--pp-header-h) + 16px); }
.bl-prose h3 { font-size: 21px; font-weight: 800; color: var(--pp-ink); margin: 32px 0 8px; }
.bl-prose a { color: var(--pp-ink); font-weight: 700; text-decoration-color: var(--pp-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bl-prose ul, .bl-prose ol { padding-left: 22px; }
.bl-prose li { margin: 6px 0; }
.bl-prose li::marker { color: var(--pp-orange); font-weight: 800; }
.bl-prose strong { color: var(--pp-ink); }
.bl-prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 24px 0; font-size: 16px; border: 2.5px solid var(--pp-ink); border-radius: 16px; overflow: hidden; }
.bl-prose th { background: var(--pp-ink); color: #fff; text-align: left; padding: 12px 14px; font-weight: 800; }
.bl-prose td { padding: 12px 14px; border-top: 1.5px solid var(--pp-line); vertical-align: top; line-height: 1.5; }
.bl-prose tr:nth-child(even) td { background: var(--pp-cream); }

.bl-box { margin: 32px 0; padding: 22px 24px; border-radius: 18px; border: 3px solid var(--pp-ink); background: #fff; box-shadow: 6px 6px 0 var(--pp-ink); font-size: 17px; line-height: 1.65; color: var(--pp-ink); }
.bl-box > b:first-child { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; color: var(--pp-orange); }
.bl-box--key { background: var(--pp-yellow); box-shadow: 6px 6px 0 var(--pp-ink); }
.bl-box--key > b:first-child { color: var(--pp-ink); }
.bl-box--ex { background: #EAF1FF; }
.bl-box--geste { background: var(--pp-mint); }
.bl-box--geste > b:first-child { color: var(--pp-ink); }
.bl-box p { margin: 0 0 10px; } .bl-box p:last-child { margin: 0; }
.bl-box ol, .bl-box ul { margin: 6px 0 0; }

.bl-cta { margin: 48px 0 0; padding: clamp(24px, 3vw, 34px); border-radius: 22px; background: var(--pp-ink); color: #fff; display: grid; gap: 14px; }
.bl-cta h2 { color: var(--pp-yellow); margin: 0; font-size: clamp(24px, 2.6vw, 32px); }
.bl-cta p { color: rgba(255,255,255,.82); margin: 0; font-size: 17px; }
.bl-cta .btn { justify-self: start; }
.bl-related { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bl-related a { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 2px solid var(--pp-ink); border-radius: 14px; background: #fff; color: var(--pp-ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.bl-related a:hover { background: var(--pp-yellow); }

/* accueil */
.mag__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.mag__more { margin-top: 30px; }

@media (max-width: 1000px) {
  .bl-wrap { grid-template-columns: minmax(0, 1fr); }
  .bl-wrap .mt-toc { position: static; }
  .bl-grid, .mag__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-card--big { flex-direction: column; }
  .bl-card--big .bl-card__img { min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 3px solid var(--pp-ink); }
}
@media (max-width: 640px) {
  .bl-grid, .mag__grid { grid-template-columns: 1fr; }
  .bl-prose { font-size: 17px; }
  .bl-prose > p:first-child { font-size: 19px; }
  .bl-prose table { font-size: 14px; display: block; overflow-x: auto; }
  .bl-cover { top: 24px; }
  .bl-cover img { box-shadow: 6px 6px 0 var(--pp-ink); }
  .bl-wrap { padding-top: 60px; }
  .bl-hub__plane { display: none; }
}

/* capture d'écran réelle dans un article */
.bl-fig { margin: 28px 0; }
.bl-fig img { width: 100%; height: auto; display: block; border-radius: 16px; border: 3px solid var(--pp-ink); box-shadow: 8px 8px 0 var(--pp-blue); background: #fff; }
.bl-fig figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--pp-ink-3); font-weight: 600; }

/* bannière d'article : bandeau horizontal, un peu moins étiré sur téléphone */
@media (max-width: 640px) { .bl-cover img { aspect-ratio: 2 / 1; } }