/* ── Pilot Asia — le blog · feuille de style commune ─────────────────────────
   Charte reprise des fiches pratiques : marine / or / jade / crème.
   HTML pur, aucun framework — la vitesse est un critère de référencement. */
:root{
  --marine:#0A1B2C; --gold:#C8922A; --gold-l:#DFA83B; --jade:#1B6B5A;
  --cream:#F7F4EF; --white:#fff; --text:#1C2A35; --border:#E6E0D6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#C9C3BA;color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.65;
}
.card{max-width:680px;margin:0 auto;background:var(--cream);min-height:100vh}

/* ── En-tête ── */
header.blog{
  background:
    radial-gradient(circle at 80% 20%, rgba(23,167,143,.32) 0%, transparent 52%),
    radial-gradient(circle at 10% 90%, rgba(200,146,42,.26) 0%, transparent 46%),
    linear-gradient(155deg,#08182A 0%,#12314D 60%,#0D3A3A 100%);
  color:#fff;padding:34px 26px 30px;
}
.eyebrow{font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold-l);font-weight:800}
.eyebrow a{color:var(--gold-l);text-decoration:none}
header.blog h1{font-size:31px;line-height:1.14;font-weight:800;margin:11px 0 0}
header.blog h1 span{color:var(--gold-l);display:block}
header.blog .sub{margin-top:14px;font-size:14.5px;color:#C9D6E0;line-height:1.7}

/* ── Fil d'Ariane ── */
nav.crumbs{padding:14px 26px 0;font-size:12.5px;color:#8A8378}
nav.crumbs a{color:var(--jade);text-decoration:none;font-weight:700}
nav.crumbs span{color:#B3AA9C;margin:0 5px}

/* ── Listes d'articles ── */
.list{padding:22px 22px 6px;display:flex;flex-direction:column;gap:14px}
a.post{
  display:block;text-decoration:none;background:var(--white);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:0 10px 24px -22px rgba(20,30,40,.55);
  transition:transform .12s ease, box-shadow .12s ease;
}
a.post:hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(20,30,40,.6)}
a.post .cover{display:block;width:100%;height:auto;background:#EDE7DC}
a.post .body{padding:16px 18px 18px}
a.post .cat{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);font-weight:800}
a.post h2{font-size:18.5px;font-weight:800;color:var(--marine);line-height:1.35;margin-top:7px}
a.post p{font-size:13.5px;color:#5E6D78;margin-top:8px;line-height:1.6}
a.post .meta{font-size:12px;color:#9A9182;margin-top:10px}

/* ── Rubriques / catégories ── */
.cats{padding:8px 22px 4px;display:flex;flex-wrap:wrap;gap:8px}
.cats .h{width:100%;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#8A8378;font-weight:800;margin-bottom:2px}
.chip{display:inline-block;font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:99px;
  background:var(--white);border:1px solid var(--border);color:var(--marine);text-decoration:none}
a.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip.soon{color:#A79D8E;background:#F1EDE6;border-style:dashed}
.chip.on{background:var(--marine);color:#fff;border-color:var(--marine)}

/* ── Page article ── */
article{padding:0 0 8px}
article .cover-wrap{background:#EDE7DC;line-height:0}
article .cover-wrap svg,article .cover-wrap img{width:100%;height:auto;display:block}
article .head{padding:22px 26px 0}
article .cat{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);font-weight:800}
article h1{font-size:27px;line-height:1.2;font-weight:800;color:var(--marine);margin-top:9px}
article .meta{font-size:12.5px;color:#9A9182;margin-top:12px;padding-bottom:6px}
article .meta b{color:#6B6355}
article .prose{padding:10px 26px 0}
article .prose p{font-size:15.5px;margin:14px 0;color:var(--text)}
article .prose h2{font-size:20px;font-weight:800;color:var(--marine);margin:30px 0 4px;line-height:1.3}
article .prose a{color:var(--jade);font-weight:700}
article .prose ul{margin:14px 0 14px 22px}
article .prose li{font-size:15px;margin:7px 0}
/* ── Une image dans le corps de l'article ── */
article .prose figure{margin:22px 0}
article .prose figure img{
  width:100%;height:auto;display:block;
  background:#EDE7DC;border:1px solid var(--border);border-radius:14px;
}
article .prose figcaption{
  margin-top:8px;font-size:12.5px;line-height:1.55;color:#8A8378;
}

/* Encadrés éditoriaux */
.box{border-radius:14px;padding:16px 18px;margin:20px 0;font-size:14.5px;line-height:1.65}
.box .bt{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;margin-bottom:7px}
.box.rumeur{background:#FDF3DC;border:1px solid #EFDCAE;color:#6B5312}
.box.rumeur .bt{color:#A87B14}
.box.fait{background:#E9F4F0;border:1px solid #CBE3DA;color:#174F43}
.box.fait .bt{color:var(--jade)}
.box.attention{background:#FFF4EC;border:1px solid #F2DCC8;color:#7A4A18}
.box.attention .bt{color:#B0691F}

/* Tags */
.tags{padding:14px 26px 0;display:flex;flex-wrap:wrap;gap:7px}
.tags .chip{font-size:11.5px;padding:5px 11px}

/* Sources */
.sources{margin:26px 26px 0;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.sources .bt{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:#8A8378;font-weight:800}
.sources ul{list-style:none;margin-top:9px}
.sources li{font-size:13px;margin:7px 0;line-height:1.5;overflow-wrap:anywhere}
.sources a{color:var(--jade);font-weight:700;text-decoration:none}
.sources .note{font-size:12px;color:#9A9182;margin-top:9px}

/* ── Encart application ── */
.app{margin:26px 22px 0;background:var(--marine);border-radius:18px;padding:24px 22px;text-align:center;color:#D9E4EC}
.app .k{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-l);font-weight:800}
.app h2{font-size:21px;color:#fff;font-weight:800;margin-top:10px;line-height:1.35}
.app p{font-size:13.5px;margin-top:11px;color:#AEC2D0;line-height:1.7}
.app .cta{display:inline-block;margin-top:16px;background:var(--gold);color:#2A1B02;
  padding:14px 26px;border-radius:13px;font-size:16px;font-weight:800;text-decoration:none;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.7)}
.app .pdf{display:block;margin-top:14px;font-size:13px;color:#9FB3C2}
.app .pdf a{color:var(--gold-l);font-weight:700}

/* ── Sécurité d'affichage (leçon Studio du 09/08) ── */
[hidden]{display:none !important}

/* ── En-tête : rangée avec retour vers l'app ── */
.eyebrow-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
a.backapp{color:#C9D6E0;font-size:12.5px;font-weight:700;text-decoration:none;
  border:1px solid rgba(201,214,224,.35);border-radius:99px;padding:6px 13px;white-space:nowrap}
a.backapp:hover{color:#fff;border-color:#DFA83B}

/* ── Sélecteur de langue ── */
.hdr-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.langs{display:flex;gap:4px}
.langs a{font-size:11px;font-weight:800;color:#C9D6E0;text-decoration:none;padding:5px 8px;border-radius:8px;letter-spacing:.5px}
.langs a.on{background:rgba(223,168,59,.22);color:#DFA83B}
.langs a:hover{color:#fff}

/* ── Partage ── */
.share{padding:18px 26px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.share .lb{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:#8A8378;font-weight:800;margin-right:2px}
.share .sh{display:inline-block;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:99px;
  background:var(--white);border:1px solid var(--border);color:var(--marine);text-decoration:none;
  cursor:pointer;font-family:inherit}
.share .sh:hover{border-color:var(--gold);color:var(--gold)}

/* ── Pied de page ── */
footer.blog{background:var(--marine);color:#7D93A3;text-align:center;
  padding:22px 26px 30px;font-size:11.5px;line-height:1.8;margin-top:24px}
footer.blog a{color:#9FB3C2}

@media (max-width:520px){
  header.blog{padding:28px 20px 26px} header.blog h1{font-size:25px}
  article h1{font-size:22.5px}
  article .head,article .prose{padding-left:20px;padding-right:20px}
  .sources{margin-left:20px;margin-right:20px}
  .tags{padding-left:20px;padding-right:20px}
  .list{padding:18px 16px 4px}
  .app{margin-left:16px;margin-right:16px}
  nav.crumbs{padding-left:20px;padding-right:20px}
}