/* Kpak — feuille de style unique. Mobile d'abord. */
:root{
  --ink:#15120f; --ink-2:#3b352e; --muted:#6b6459; --line:#e6e0d6; --paper:#fbfaf7; --card:#fff; --sand:#f3eee5;
  --accent:#e4421b; --accent-d:#b8330f;
  --c-cv:#e4421b; --c-lettres:#2457c5; --c-concours:#0d7650; --c-pays:#a86200; --c-ia:#15120f;
  --head:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.62 var(--body)}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);line-height:1.12;letter-spacing:-.015em;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Barre de lecture */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:20}
.progress span{display:block;height:100%;width:0;background:var(--accent)}

/* En-tête */
.top{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:15}
.top-row{display:flex;align-items:center;gap:16px;height:60px}
.logo{font:800 30px/1 var(--head);text-decoration:none;letter-spacing:-.05em}
.logo span{color:var(--accent)}
.logo-sm{font-size:26px}
.top-tag{margin:0;color:var(--muted);font-size:14px;display:none}
.lang{margin-left:auto;font:600 13px/1 var(--head);text-decoration:none;border:1.5px solid var(--ink);border-radius:99px;padding:7px 12px}
.lang:hover{background:var(--ink);color:#fff}
.nav{border-top:1px solid var(--line);background:var(--card)}
.nav-row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-row::-webkit-scrollbar{display:none}
.nav a{flex:none;font:600 14px/1 var(--head);text-decoration:none;padding:13px 10px;border-bottom:3px solid transparent;white-space:nowrap}
.nav a:hover{border-color:var(--ink)}
.n-cv:hover{border-color:var(--c-cv)!important}.n-lettres:hover{border-color:var(--c-lettres)!important}
.n-concours:hover{border-color:var(--c-concours)!important}.n-pays:hover{border-color:var(--c-pays)!important}

/* Étiquettes de rubrique */
.tag{display:inline-block;font:600 12px/1 var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.t-cv{color:var(--c-cv)}.t-lettres{color:var(--c-lettres)}.t-concours{color:var(--c-concours)}.t-pays{color:var(--c-pays)}.t-ia{color:var(--c-ia)}
.dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:10px;vertical-align:2px}
.d-cv{background:var(--c-cv)}.d-lettres{background:var(--c-lettres)}.d-concours{background:var(--c-concours)}.d-pays{background:var(--c-pays)}.d-ia{background:var(--c-ia)}

/* Visuels générés (pas d'images à charger) */
.cover{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:16/9;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px}
.cover-l{aspect-ratio:2/1;padding:22px}
.c-cv{background-color:var(--c-cv)}.c-lettres{background-color:var(--c-lettres)}.c-concours{background-color:var(--c-concours)}.c-pays{background-color:var(--c-pays)}.c-ia{background-color:var(--c-ia)}
.cover-k{font:600 11px/1 var(--head);text-transform:uppercase;letter-spacing:.1em;opacity:.85;position:relative}
.cover-w{font:800 22px/1.05 var(--head);letter-spacing:-.03em;margin-top:6px;position:relative;max-width:85%}
.cover-l .cover-w{font-size:clamp(28px,6vw,52px)}
.cover::before{content:"";position:absolute;inset:0;opacity:.22}
.p-stripes::before{background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 18px)}
.p-dots::before{background:radial-gradient(#fff 1.6px,transparent 1.8px) 0 0/16px 16px}
.p-grid::before{background:linear-gradient(#fff 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,#fff 1px,transparent 1px) 0 0/22px 22px}
.p-waves::before{background:radial-gradient(circle at 100% 50%,transparent 20%,#fff 21%,#fff 24%,transparent 25%) 0 0/28px 28px}
.p-diag::before{background:repeating-linear-gradient(135deg,#fff 0 2px,transparent 2px 14px)}
.cover::after{content:"";position:absolute;right:-30px;top:-30px;width:42%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14)}

/* Images de couverture */
.cover-img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--r);background:var(--sand)}
.card .cover-img{border-radius:0;transition:transform .3s}
.card:hover .cover-img{transform:scale(1.03)}
.card-link{overflow:hidden}
.card-row .cover-img{height:100%;min-height:96px;aspect-ratio:auto;object-position:left center}
.post .wrap-narrow > .cover-img{margin-top:4px}

/* Cartes */
.grid{display:grid;gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .15s}
.card:hover{transform:translateY(-2px)}
.card-link{text-decoration:none;display:block;height:100%}
.card .cover{border-radius:0}
.card-body{padding:14px 16px 18px}
.card h3{font-size:19px;margin:8px 0 6px}
.card p{margin:0;color:var(--muted);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.card-row .card-link{display:grid;grid-template-columns:110px 1fr}
.card-row .cover{aspect-ratio:auto;height:100%;min-height:96px;padding:10px}
.card-row .cover-w{font-size:14px}
.card-row .cover-k{display:none}
.card-row .card-body{padding:10px 14px}
.card-row h3{font-size:16px;margin:6px 0 0}
.card-row p{display:none}

/* Accueil */
.hero{display:grid;gap:22px;padding-top:24px}
.feat{text-decoration:none;display:block}
.feat h1{font-size:clamp(28px,5vw,44px);margin:12px 0 10px}
.feat p{color:var(--ink-2);margin:0;font-size:18px}
.feat:hover h1{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.feat > div:last-child{padding-top:14px}
.feat-side{display:grid;gap:14px}
.split{display:grid;gap:22px;margin:40px auto 10px;padding-top:28px;border-top:3px solid var(--ink)}
.sec-t{font-size:24px;margin-bottom:12px}
.intro p{color:var(--ink-2);margin:0 0 16px}
.search input{width:100%;font:16px var(--body);padding:13px 14px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card)}
.popular ol{list-style:none;margin:0;padding:0;counter-reset:p}
.popular li{counter-increment:p;border-top:1px solid var(--line)}
.popular a{display:grid;grid-template-columns:38px 1fr;gap:2px 8px;padding:12px 0;text-decoration:none;font:600 16px/1.3 var(--head)}
.popular a::before{content:counter(p);grid-row:span 2;font:800 30px/1 var(--head);color:var(--accent)}
.popular a:hover{text-decoration:underline}
.popular .tag{font-size:11px}
.cat-sec{margin:44px 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);margin-bottom:18px}
.sec-head a{font:600 14px var(--head)}
.cat-head{padding:34px 16px 10px}
.cat-head h1{font-size:clamp(30px,6vw,48px);margin:10px 0}
.cat-head p{color:var(--ink-2);max-width:680px;margin:0 0 18px}
.all{margin:26px auto 60px}
.empty{color:var(--muted)}

/* Article */
.post-head{padding-top:28px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:16px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 6px}
.post-head h1{font-size:clamp(30px,6.4vw,50px);margin:10px 0 14px}
.chapo{font-size:20px;line-height:1.5;color:var(--ink-2);margin:0 0 16px}
.byline{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 22px}
.share{margin-left:auto;font:600 13px var(--head);background:none;border:1.5px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer;color:var(--ink)}
.share:hover{border-color:var(--ink)}
.post-grid{display:grid;gap:24px;margin-top:30px}
.toc details{background:var(--sand);border-radius:var(--r);padding:14px 16px}
.toc summary{font:600 15px var(--head);cursor:pointer}
.toc ol{margin:10px 0 0;padding-left:20px;font-size:15px}
.toc li{margin:6px 0}
.toc a{text-decoration:none}.toc a:hover{text-decoration:underline}
.prose{max-width:720px;min-width:0}
.prose h2{font-size:27px;margin:38px 0 12px;scroll-margin-top:120px}
.prose h3{font-size:20px;margin:26px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose li{margin:6px 0}
.prose a{color:var(--accent-d);text-decoration-thickness:1.5px;text-underline-offset:2px}
.prose strong{font-weight:650}
.prose blockquote,.prose .example{margin:20px 0;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:16px}
.prose .example p:last-child{margin:0}
.prose .example-t{font:600 12px var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}

/* Tableaux */
.compare{margin:28px 0}
.compare figcaption{font:800 18px var(--head);margin-bottom:10px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font:600 13px var(--head);text-transform:uppercase;letter-spacing:.04em;background:var(--sand)}
tbody th{font-weight:650}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.note{font-size:14px;color:var(--muted);margin:8px 0 0}

/* Encadré « Pour aller plus loin » : éditorial, pas publicitaire */
.analogy{margin:38px 0;padding:22px 22px 18px;border-top:3px solid var(--ink);background:var(--sand);border-radius:0 0 var(--r) var(--r)}
.analogy-k{font:600 12px var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px!important}
.prose .analogy-t{font-size:22px;margin:0 0 10px}
.analogy p{margin:0 0 12px}
.analogy-cta{margin:4px 0 0!important;font-size:15px}
.analogy-cta a{font:600 16px var(--head);color:var(--ink)!important}
.analogy-cta span{color:var(--muted)}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font:600 17px/1.35 var(--head);cursor:pointer;list-style:none;padding-right:28px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:-2px;font-size:22px;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details div{padding-top:8px;color:var(--ink-2)}
.transp{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:30px!important}
.related{margin:50px auto 60px;border-top:3px solid var(--ink);padding-top:22px}

/* Pied de page */
.foot{background:var(--ink);color:#d9d2c6;margin-top:60px;padding:40px 0 20px;font-size:15px}
.foot a{color:#fff;text-decoration:none;display:block;margin:6px 0}
.foot a:hover{text-decoration:underline}
.foot .logo{display:inline-block;margin:0}
.foot h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.foot-grid{display:grid;gap:26px}
.foot-legal{border-top:1px solid #3b352e;margin-top:28px;padding-top:16px;font-size:13px;color:#a39b8e}
.foot-legal p{margin:4px 0}

/* Bandeau de langue */
.lang-hint{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;background:var(--ink);color:#fff;border-radius:10px;padding:12px 14px;display:flex;gap:10px;align-items:center;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.lang-hint a{color:#fff;font-weight:650}
.lang-hint button{margin-left:auto;background:none;border:0;color:#fff;font-size:20px;cursor:pointer}

@media (min-width:700px){
  .top-tag{display:block}
  .g3{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:2fr 1fr 1fr}
}
@media (min-width:1000px){
  .hero{grid-template-columns:1.7fr 1fr;align-items:start}
  .split{grid-template-columns:1.5fr 1fr;gap:60px}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .post-grid{grid-template-columns:240px 1fr;gap:48px;max-width:1060px}
  .toc{position:sticky;top:130px;align-self:start}
  .lang-hint{left:auto;max-width:420px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.top,.nav,.foot,.toc,.related,.share,.progress{display:none}}