@font-face{font-family:"Archivo Narrow";src:url(/assets/fonts/archivo-narrow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url(/assets/fonts/archivo-narrow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url(/assets/fonts/archivo-narrow-700.woff2) format("woff2");font-weight:700 800;font-display:swap}
:root{
  --encre:#14171c;--texte:#2b3038;--doux:#5d6470;--ligne:#e3e1dc;--fond:#faf8f4;--papier:#fff;
  --accent:#d9481c;--accent-fonce:#a8350f;--vert:#1f6f54;
  --titre:"Archivo Narrow","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --corps:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font:17px/1.65 var(--corps)}
a{color:var(--accent-fonce);text-underline-offset:3px}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;border-radius:var(--r);display:block;margin:1.5rem 0}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* en-tête */
header.site{background:var(--encre);color:#fff;position:sticky;top:0;z-index:5}
header.site .bar{display:flex;align-items:center;gap:28px;min-height:62px;flex-wrap:wrap}
.logo{font:800 1.45rem/1 var(--titre);letter-spacing:-.01em;color:#fff;text-decoration:none;text-transform:uppercase}
.logo span{color:var(--logo-accent,var(--accent))}
header.site nav ul{display:flex;gap:4px 20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
header.site nav a{color:#d8dbe0;text-decoration:none;font-size:.93rem;font-weight:600;padding:6px 0;border-bottom:2px solid transparent}
header.site nav a:hover{color:#fff;border-color:var(--accent)}
@media (max-width:760px){
  header.site{position:static}
  header.site .bar{padding:12px 0;gap:10px}
  header.site nav{width:100%;min-width:0}
  header.site nav ul{overflow-x:auto;flex-wrap:nowrap;width:100%;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  header.site nav a{display:inline-block;padding:10px 0}
  header.site nav li{white-space:nowrap}
}

/* fil d'Ariane */
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:26px 0 10px;font-size:.85rem;color:var(--doux)}
.fil li+li::before{content:"/";margin-right:6px;color:#b6b2aa}
.fil a{color:var(--doux)}

/* article */
.article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;padding-bottom:64px}
.article-wrap .fil{grid-column:1/-1}
@media (max-width:980px){.article-wrap{grid-template-columns:1fr;gap:24px}}
.texte{background:var(--papier);border:1px solid var(--ligne);border-radius:14px;padding:44px 52px;min-width:0}
@media (max-width:640px){.texte{padding:26px 18px;border-radius:0;border-left:0;border-right:0;margin:0 -20px}}
.texte h1{font:800 clamp(2rem,4.2vw,2.9rem)/1.08 var(--titre);color:var(--encre);letter-spacing:-.015em;margin:0 0 22px}
.texte h1+p{font-size:1.1rem;color:var(--encre)}
.texte h2{font:700 1.65rem/1.2 var(--titre);color:var(--encre);margin:2.6rem 0 .8rem;padding-top:1.4rem;border-top:3px solid var(--encre)}
.texte h3{font:700 1.2rem/1.3 var(--corps);color:var(--encre);margin:1.8rem 0 .5rem}
.texte p{margin:0 0 1.05rem}
.texte strong{color:var(--encre)}
.texte ul,.texte ol{padding-left:1.3rem;margin:0 0 1.2rem}
.texte li{margin:.3rem 0}
.texte li::marker{color:var(--accent)}
.texte blockquote{margin:1.6rem 0;padding:16px 20px;background:#fdf1ec;border-left:4px solid var(--accent);border-radius:0 var(--r) var(--r) 0}
.texte blockquote p:last-child{margin:0}
.table{overflow-x:auto;margin:1.4rem 0 1.8rem;border:1px solid var(--ligne);border-radius:var(--r)}
.texte table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:520px}
.texte th{background:var(--encre);color:#fff;text-align:left;font-weight:600;padding:10px 12px}
.texte td{padding:10px 12px;border-top:1px solid var(--ligne);vertical-align:top}
.texte tbody tr:nth-child(even) td{background:#fbfaf7}

/* bloc rubrique */
.rubrique{position:sticky;top:86px;background:var(--papier);border:1px solid var(--ligne);border-radius:14px;padding:22px 22px 10px}
@media (max-width:980px){.rubrique{position:static}}
.rubrique .groupe h2{font:700 .78rem/1 var(--corps);text-transform:uppercase;letter-spacing:.08em;color:var(--doux);margin:14px 0 8px}
.rubrique ul{list-style:none;margin:0 0 10px;padding:0}
.rubrique li a{display:block;padding:6px 0;border-bottom:1px solid #f0eee9;color:var(--texte);text-decoration:none;font-size:.93rem;line-height:1.35}
.rubrique li a:hover{color:var(--accent-fonce)}
.rubrique li[aria-current] a{color:var(--accent-fonce);font-weight:700}
.surtitre{font:700 .8rem/1 var(--corps);text-transform:uppercase;letter-spacing:.1em;color:var(--accent-fonce);margin:0 0 6px}

/* accueil */
.une{padding:70px 0 34px;max-width:820px}
.une h1{font:800 clamp(2.3rem,5.4vw,3.8rem)/1.02 var(--titre);color:var(--encre);letter-spacing:-.02em;margin:10px 0 18px}
.chapo{font-size:1.15rem;color:var(--doux);margin:0}
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;padding:20px 0 80px}
@media (max-width:400px){.cartes{grid-template-columns:1fr}}
.carte{background:var(--papier);border:1px solid var(--ligne);border-top:5px solid var(--encre);border-radius:6px 6px 14px 14px;padding:24px 24px 20px;display:flex;flex-direction:column}
.carte:hover{border-top-color:var(--accent)}
.carte h2{font:800 1.55rem/1.1 var(--titre);margin:0 0 8px}
.carte h2 a{color:var(--encre);text-decoration:none}
.carte p{color:var(--doux);font-size:.95rem;margin:0 0 12px}
.carte ul{list-style:none;padding:0;margin:0 0 16px;flex:1}
.carte li a{display:block;padding:7px 0;border-top:1px solid #f0eee9;color:var(--texte);text-decoration:none;font-size:.95rem}
.carte li a:hover{color:var(--accent-fonce)}
.suite{font-weight:700;text-decoration:none}
.suite::after{content:" \2192"}

footer.site{background:var(--encre);color:#aab0b9;padding:36px 0;font-size:.9rem}
footer.site .logo{font-size:1.2rem;margin:0 0 6px}
footer.site ul{list-style:none;padding:0;display:flex;gap:20px;flex-wrap:wrap;margin:14px 0 0}
footer.site a{color:#d8dbe0}

/* sommaire */
.sommaire{background:var(--fond);border:1px solid var(--ligne);border-left:4px solid var(--accent);border-radius:0 var(--r) var(--r) 0;padding:18px 22px 10px;margin:1.8rem 0 2.2rem}
.sommaire .surtitre{margin-bottom:10px}
.sommaire ol{margin:0;padding-left:1.3rem;counter-reset:none}
.sommaire li{margin:.25rem 0 .45rem;line-height:1.4}
.sommaire li::marker{color:var(--accent);font-weight:700}
.sommaire a{color:var(--texte);text-decoration:none;font-size:.97rem}
.sommaire a:hover{color:var(--accent-fonce);text-decoration:underline}
.texte h2[id]{scroll-margin-top:84px}
@media (max-width:760px){.texte h2[id]{scroll-margin-top:16px}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* cibles tactiles confortables sur mobile */
@media (max-width:760px){
  .logo{display:inline-block;padding:8px 0}
  .fil a{display:inline-block;padding:8px 0}
  footer.site a{display:inline-block;padding:10px 0}
  .sommaire a{display:inline-block;padding:5px 0}
  .carte h2 a{display:inline-block;padding:4px 0}
}

/* blog */
.liste-blog{padding:6px 0 10px}
.meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 8px;font-size:.84rem;color:var(--doux)}
.meta .cat{color:var(--accent-fonce);font-weight:700;text-decoration:none}
.meta .cat:hover{text-decoration:underline}
.qui{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--doux);margin-top:auto}
.qui .portrait{width:24px;height:24px}
.extrait{color:var(--doux);font-size:.97rem;line-height:1.55;margin:0 0 14px}
.vignette{display:block;overflow:hidden;border-radius:12px;background:#ece9e2}
.vignette img{margin:0;border-radius:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a.vignette:hover img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){.vignette img{transition:none}a.vignette:hover img{transform:none}}

/* article en vedette */
.vedette{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:center;padding:8px 0 44px;border-bottom:1px solid var(--ligne);margin-bottom:40px}
.vedette .vignette{aspect-ratio:16/9}
.vedette-texte{display:flex;flex-direction:column}
.vedette h2{font:700 clamp(1.7rem,3vw,2.4rem)/1.08 var(--titre);letter-spacing:-.01em;margin:0 0 14px}
.vedette h2 a{color:var(--encre);text-decoration:none}
.vedette h2 a:hover{color:var(--accent-fonce)}
.vedette .extrait{font-size:1.05rem;margin-bottom:18px}
@media (max-width:820px){.vedette{grid-template-columns:1fr;gap:18px;padding-bottom:32px;margin-bottom:32px}}

/* grille */
.billets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 32px;margin:0 0 50px}
@media (max-width:980px){.billets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.billets{grid-template-columns:1fr;gap:36px}}
.billet{display:flex;flex-direction:column}
.billet .vignette{aspect-ratio:4/3;margin-bottom:16px}
.billet h3{font:700 1.38rem/1.15 var(--titre);margin:0 0 10px}
.billet h3 a{color:var(--encre);text-decoration:none}
.billet h3 a:hover{color:var(--accent-fonce)}

/* liste compacte */
.compacte{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--ligne)}
.compacte:first-child{border-top:0;padding-top:0}
.compacte .vignette{aspect-ratio:4/3;border-radius:10px}
.compacte .meta{margin-bottom:4px;font-size:.8rem}
.compacte h3{font:700 1.12rem/1.2 var(--titre);margin:0}
.compacte h3 a{color:var(--encre);text-decoration:none}
.compacte h3 a:hover{color:var(--accent-fonce)}

/* en-tête du blog et des catégories */
.tete-blog{padding:26px 0 0;margin-bottom:34px}
.tete-blog h1{font:700 clamp(2.3rem,5vw,3.4rem)/1.02 var(--titre);color:var(--encre);letter-spacing:-.015em;margin:6px 0 14px}
.tete-blog .chapo{max-width:720px;color:var(--doux);font-size:1.08rem;margin:0}
.tete-blog .chapo p{margin:0}
.onglets{margin-top:28px;border-bottom:1px solid var(--ligne)}
.onglets ul{list-style:none;display:flex;gap:4px 26px;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.onglets ul::-webkit-scrollbar{display:none}
.onglets li{flex:none}
.onglets a{display:block;padding:12px 0 13px;color:var(--doux);text-decoration:none;font-weight:600;font-size:.95rem;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.onglets a:hover{color:var(--encre)}
.onglets a[aria-current]{color:var(--encre);border-bottom-color:var(--accent)}
.a-propos{max-width:760px;margin:10px 0 70px;padding-top:34px;border-top:1px solid var(--ligne);color:var(--doux)}
.a-propos h2{font:700 1.45rem/1.2 var(--titre);color:var(--encre);margin:0 0 12px}

/* accueil : derniers articles */
.derniers{padding:10px 0 50px}
.entete-section{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin-bottom:22px}
.entete-section .surtitre{width:100%;margin:0}
.entete-section h2{font:700 clamp(1.8rem,3vw,2.3rem)/1.05 var(--titre);color:var(--encre);margin:0}
.entete-section .suite{margin-left:auto}
.derniers-grille{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:40px;align-items:start}
.derniers .vedette{grid-template-columns:1fr;gap:18px;padding:0;border:0;margin:0}
.derniers .vedette h2{font-size:clamp(1.5rem,2.4vw,1.9rem)}
@media (max-width:900px){.derniers-grille{grid-template-columns:1fr;gap:26px}}

.pagination ol{list-style:none;display:flex;gap:8px;padding:0;margin:0 0 60px}
.pagination a,.pagination span{display:inline-block;min-width:44px;padding:10px 14px;text-align:center;border:1px solid var(--ligne);border-radius:8px;background:var(--papier);text-decoration:none}
.pagination span{background:var(--encre);color:#fff;border-color:var(--encre)}

/* article de blog */
.billet-complet .surtitre a{color:var(--accent-fonce);text-decoration:none}
.signature{display:flex;align-items:center;gap:12px;margin:-6px 0 22px;font-size:.92rem;color:var(--doux)}
.signature p{margin:0;line-height:1.45}
.signature a{font-weight:700}
.portrait{border-radius:50%;margin:0;flex:none;object-fit:cover}
.une-billet{margin:0 0 26px}
.une-billet img{margin:0;width:100%}
.bio{display:flex;gap:20px;align-items:flex-start;margin:44px 0 0;padding:24px;background:var(--fond);border:1px solid var(--ligne);border-radius:14px}
.bio p{margin:0 0 8px}
.bio .nom{font-weight:700;color:var(--encre)}
@media (max-width:560px){.bio{flex-direction:column}}
.a-lire{padding-top:10px}
.a-lire h2{font:700 1.8rem/1.1 var(--titre);color:var(--encre);margin:0 0 22px}
.profil{display:flex;gap:24px;align-items:center;margin-bottom:10px}
.profil h1{margin:0}
@media (max-width:560px){.profil{flex-direction:column;align-items:flex-start}}
.equipe{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;padding:10px 0 70px}
.membre{background:var(--papier);border:1px solid var(--ligne);border-radius:14px;padding:24px}
.membre h2{font:700 1.4rem/1.1 var(--titre);margin:14px 0 6px}
.membre h2 a{color:var(--encre);text-decoration:none}
.membre p:last-child{color:var(--doux);font-size:.95rem;margin:10px 0 0}
.bio .suite{display:inline-block;padding:10px 0}

/* liste des articles d'une rubrique */
.fiches{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 26px}
@media (max-width:640px){.fiches{grid-template-columns:1fr}}
.texte .fiches li{margin:0}
.texte .fiches li::marker{content:none}
.fiche .vignette{aspect-ratio:16/9;margin-bottom:12px}
.fiche .vignette img{margin:0}
.titre-fiche{display:block;font:700 1.22rem/1.2 var(--titre);color:var(--encre);text-decoration:none;margin-bottom:6px}
.titre-fiche:hover{color:var(--accent-fonce)}
.fiche p{color:var(--doux);font-size:.93rem;margin:0}
.groupe .suite{display:inline-block;margin:4px 0 12px;padding:8px 0;font-size:.9rem}

/* accueil : cartes illustrées et articles les plus lus */
.carte-image{padding-top:0;overflow:hidden}
.carte-image .vignette{display:block;margin:0 -24px 18px;border-radius:0;aspect-ratio:16/9}
.carte-image .vignette img{margin:0;border-radius:0}
.populaires{padding:0 0 30px}
.fiches-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.fiches-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fiches-3{grid-template-columns:1fr}}
.populaires .fiches{list-style:none;padding:0}
.populaires .meta{margin:0 0 4px}