:root {
  --terre:        #B4532F;   /* terre cuite : accent principal */
  --terre-clair:  #F3E1D6;
  --maquis:       #4B5E3C;   /* vert maquis : accent secondaire */
  --maquis-clair: #E4EADB;
  --fond:         #FBF7F1;   /* crème */
  --surface:      #FFFFFF;
  --texte:        #2A2521;
  --texte-doux:   #6E655D;
  --bordure:      #E7DED2;
  --code-fond:    #F5EFE6;

  --f-titre: "Fraunces", Georgia, serif;
  --f-texte: "Source Sans 3", system-ui, sans-serif;
  --f-code:  "JetBrains Mono", ui-monospace, monospace;

  --rayon: 10px;
  --hauteur-menu: 64px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--hauteur-menu) + 16px); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.6 var(--f-texte);
}
a { color: var(--terre); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Menu fixe ---------- */
.menu {
  position: sticky; top: 0; z-index: 10;
  height: var(--hauteur-menu);
  background: rgba(251, 247, 241, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
}
.menu-int {
  max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 32px;
}
.logo {
  display: flex; align-items: baseline; gap: 8px;
  font: 650 1.3rem/1 var(--f-titre); color: var(--texte); white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo .prompt { font: 600 .95rem var(--f-code); color: var(--terre); }
.logo .et { color: var(--maquis); font-style: italic; font-weight: 500; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--texte-doux); font-weight: 600; font-size: .95rem; }
.nav a:hover, .nav a.actif { color: var(--terre); text-decoration: none; }
.nav a.actif { box-shadow: inset 0 -2px 0 var(--terre); padding-bottom: 4px; }
.burger { display: none; margin-left: auto; background: none; border: 0; font-size: 1.5rem; color: var(--texte); }

/* ---------- Grille 3 colonnes ---------- */
.page {
  max-width: 1320px; margin: 0 auto; padding: 36px 24px 64px;
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 270px; gap: 40px;
  align-items: start;
}
.col-g, .col-d { position: sticky; top: calc(var(--hauteur-menu) + 24px); }

.bloc { margin-bottom: 32px; }
.bloc h2 {
  margin: 0 0 12px; font: 600 .78rem var(--f-texte);
  letter-spacing: .12em; text-transform: uppercase; color: var(--maquis);
}

/* Catégories */
.cats { list-style: none; margin: 0; padding: 0; }
.cats a {
  display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 6px;
  color: var(--texte); font-weight: 600;
}
.cats a:hover { background: var(--terre-clair); text-decoration: none; }
.cats .nb { color: var(--texte-doux); font-weight: 400; font-size: .9rem; }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font: 400 .8rem var(--f-code); padding: 3px 9px; border-radius: 999px;
  background: var(--maquis-clair); color: var(--maquis);
}
.tag:hover { background: var(--maquis); color: #fff; text-decoration: none; }

/* Recherche */
.recherche input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--surface); font: inherit; color: var(--texte);
}
.recherche input:focus { outline: 2px solid var(--terre-clair); border-color: var(--terre); }

/* Archives */
.archives details { border-bottom: 1px solid var(--bordure); }
.archives summary {
  cursor: pointer; list-style: none; padding: 9px 2px;
  display: flex; justify-content: space-between; font-weight: 600;
}
.archives summary::-webkit-details-marker { display: none; }
.archives summary::before { content: "▸"; color: var(--terre); margin-right: 8px; transition: transform .15s; }
.archives details[open] summary::before { transform: rotate(90deg); }
.archives summary span:first-child { flex: 1; }
.archives ul { list-style: none; margin: 0 0 10px; padding: 0 0 0 20px; }
.archives li a { display: flex; justify-content: space-between; padding: 3px 0; color: var(--texte); }
.archives .nb { color: var(--texte-doux); font-weight: 400; font-size: .9rem; }

/* ---------- Articles ---------- */
.intro { margin-bottom: 28px; }
.intro h1 { margin: 0 0 4px; font: 650 2.1rem/1.2 var(--f-titre); }
.intro p { margin: 0; color: var(--texte-doux); }

.carte {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 26px 30px; margin-bottom: 22px;
  transition: border-color .15s, box-shadow .15s;
}
.carte:hover { border-color: #D9C9B8; box-shadow: 0 4px 18px rgba(80, 50, 20, .06); }
.carte.epingle { border-left: 4px solid var(--terre); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .88rem; color: var(--texte-doux); }
.badge-cat { font-weight: 600; color: var(--terre); }
.badge-cat.corse { color: var(--maquis); }
.epingle-label { font: 600 .75rem var(--f-code); color: var(--terre); background: var(--terre-clair); padding: 2px 8px; border-radius: 4px; }
.carte h3 { margin: 8px 0 10px; font: 600 1.45rem/1.3 var(--f-titre); }
.carte h3 a { color: var(--texte); }
.carte h3 a:hover { color: var(--terre); text-decoration: none; }
.carte p { margin: 0 0 14px; }
.carte .pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lire { font-weight: 600; }

/* ---------- Blocs de code (classes Pygments) ---------- */
.highlight {
  position: relative; margin: 0 0 16px; border-radius: 8px;
  background: var(--code-fond); border: 1px solid var(--bordure);
}
.highlight .lang {
  position: absolute; top: 8px; left: 14px;
  font: 600 .7rem var(--f-code); color: var(--texte-doux); text-transform: uppercase; letter-spacing: .08em;
}
.highlight pre {
  margin: 0; padding: 32px 16px 14px; overflow-x: auto;
  font: 400 .88rem/1.6 var(--f-code); color: var(--texte);
}
.copier {
  position: absolute; top: 6px; right: 8px;
  font: 600 .75rem var(--f-texte); padding: 3px 10px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--bordure); background: var(--surface); color: var(--texte-doux);
}
.copier:hover { color: var(--terre); border-color: var(--terre); }
.copier.ok { color: var(--maquis); border-color: var(--maquis); }
/* Palette Pygments assortie */
.highlight .gp { color: var(--terre); font-weight: 600; } /* invite $ */
.highlight .c, .highlight .c1 { color: #8C8378; font-style: italic; }
.highlight .k, .highlight .kn { color: var(--terre); font-weight: 600; }
.highlight .s, .highlight .s1, .highlight .s2 { color: var(--maquis); }
.highlight .nb, .highlight .nf { color: #2F5E7A; }
.highlight .m, .highlight .mi { color: #9A4F8A; }
.highlight .nt { color: #2F5E7A; font-weight: 600; }

/* ---------- Charger plus ---------- */
.plus {
  display: block; margin: 8px auto 0; padding: 11px 28px; cursor: pointer;
  font: 600 .95rem var(--f-texte); color: var(--terre);
  background: transparent; border: 1.5px solid var(--terre); border-radius: 999px;
}
.plus:hover { background: var(--terre); color: #fff; }

/* ---------- Pied de page ---------- */
.pied-site { border-top: 1px solid var(--bordure); padding: 24px; text-align: center; color: var(--texte-doux); font-size: .9rem; }
.pied-site a { color: var(--texte-doux); }
.pied-site a:hover { color: var(--terre); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .page { grid-template-columns: minmax(0, 1fr) 260px; }
  .col-g { grid-column: 2; grid-row: 1; position: static; }
  .col-d { grid-column: 2; position: static; }
  .centre { grid-column: 1; grid-row: 1 / span 2; }
}
@media (max-width: 820px) {
  .nav { display: none; }
  .burger { display: block; }
  .page { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 16px 48px; }
  .centre, .col-g, .col-d { grid-column: 1; grid-row: auto; }
  /* Sur mobile : le contenu d'abord, puis recherche/archives, puis catégories/tags */
  .centre { order: 1; } .col-d { order: 2; margin-top: 24px; } .col-g { order: 3; }
  .carte { padding: 20px; }
  .intro h1 { font-size: 1.7rem; }
}

/* =====================================================================
   Ajouts pour les vrais gabarits
   ===================================================================== */

/* Couleur de badge par catégorie (data-cat = slug) */
.badge-cat[data-cat="vie-en-corse"] { color: var(--maquis); }

/* Menu mobile ouvert par le bouton burger */
@media (max-width: 820px) {
  .nav.ouvert {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: var(--hauteur-menu); left: 0; right: 0;
    background: var(--fond); border-bottom: 1px solid var(--bordure); padding: 8px 16px 16px;
  }
  .nav.ouvert a { padding: 10px 0; border-bottom: 1px solid var(--bordure); }
  .nav.ouvert a.actif { box-shadow: none; color: var(--terre); }
}

/* Pygments : jetons supplémentaires */
.highlight .go  { color: var(--texte-doux); }                  /* sortie de commande */
.highlight .nv, .highlight .vg, .highlight .vi { color: #9A4F8A; }
.highlight .o, .highlight .ow { color: var(--terre); }
.highlight .kc, .highlight .kd, .highlight .kt, .highlight .kr { color: var(--terre); font-weight: 600; }
.highlight .nc, .highlight .nn { color: #2F5E7A; font-weight: 600; }
.highlight .nd { color: var(--maquis); font-weight: 600; }     /* décorateurs */
.highlight .bp { color: #2F5E7A; }
.highlight .se, .highlight .si, .highlight .sd { color: var(--maquis); }
.highlight .na { color: #2F5E7A; }
.highlight .gh, .highlight .gu { color: var(--maquis); font-weight: 600; }
.highlight .gi { color: var(--maquis); background: var(--maquis-clair); }
.highlight .gd { color: var(--terre); background: var(--terre-clair); }
.highlight pre code { font: inherit; background: none; padding: 0; }

/* ---------- Page article ---------- */
.article-entete h1 { margin: 8px 0 12px; font: 650 2.2rem/1.2 var(--f-titre); }
.article-entete .tags { margin-bottom: 24px; }
.image-une { width: 100%; height: auto; border-radius: var(--rayon); margin-bottom: 24px; }

.prose {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 32px 36px;
}
.prose > :first-child { margin-top: 0; }
.prose h2 { font: 600 1.5rem/1.3 var(--f-titre); margin: 2em 0 .6em; }
.prose h3 { font: 600 1.2rem/1.3 var(--f-titre); margin: 1.6em 0 .5em; color: var(--maquis); }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose li { margin-bottom: .3em; }
.prose :not(pre) > code {
  font: .88em var(--f-code); background: var(--code-fond); border: 1px solid var(--bordure);
  padding: 1px 6px; border-radius: 4px;
}
.prose blockquote {
  margin: 0 0 1em; padding: 4px 18px; border-left: 4px solid var(--maquis);
  background: var(--maquis-clair); border-radius: 0 6px 6px 0;
}
.prose table {
  border-collapse: collapse; max-width: 100%; margin: 0 0 1em; font-size: .95rem;
  display: block; overflow-x: auto;   /* défile au lieu d'élargir la page sur mobile */
}
.prose td code { white-space: nowrap; }
.prose { overflow-wrap: break-word; min-width: 0; }
.prose th, .prose td { border: 1px solid var(--bordure); padding: 7px 10px; text-align: left; }
.prose th { background: var(--code-fond); }
.prose img { max-width: 100%; height: auto; border-radius: 6px; }
.prose hr { border: 0; border-top: 1px solid var(--bordure); margin: 2em 0; }
.prose h2 a.ancre, .prose h3 a.ancre { visibility: hidden; margin-left: 6px; color: var(--texte-doux); }
.prose h2:hover a.ancre, .prose h3:hover a.ancre { visibility: visible; }

.voisins { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; }
.voisins a {
  flex: 1; max-width: 48%; padding: 14px 18px; border: 1px solid var(--bordure);
  border-radius: var(--rayon); background: var(--surface); color: var(--texte);
}
.voisins a:hover { border-color: var(--terre); text-decoration: none; }
.voisins small { display: block; color: var(--texte-doux); font-size: .8rem; }
.voisins .recent { text-align: right; margin-left: auto; }

.vide { color: var(--texte-doux); font-style: italic; }

/* Lien d'abonnement au flux */
.lien-flux {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: .88rem; font-weight: 600; color: var(--terre);
}
.lien-flux::before {
  content: ""; width: 12px; height: 12px; border-radius: 2px;
  background: radial-gradient(circle at 25% 75%, var(--terre) 1.6px, transparent 2px),
              radial-gradient(circle at 0 100%, transparent 4px, var(--terre) 4.5px, var(--terre) 6px, transparent 6.5px),
              radial-gradient(circle at 0 100%, transparent 8px, var(--terre) 8.5px, var(--terre) 10px, transparent 10.5px);
}

/* ---------- Formulaire de contact ---------- */
.formulaire { display: grid; gap: 16px; }
.formulaire:hover { box-shadow: none; border-color: var(--bordure); }
.formulaire label { display: block; font-weight: 600; font-size: .92rem; }
.formulaire input, .formulaire textarea {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px;
  border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond);
  font: inherit; color: var(--texte);
}
.formulaire textarea { resize: vertical; }
.formulaire input:focus, .formulaire textarea:focus { outline: 2px solid var(--terre-clair); border-color: var(--terre); background: var(--surface); }
.formulaire .plus { margin: 4px 0 0; justify-self: start; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mention-rgpd { margin: 0; font-size: .85rem; color: var(--texte-doux); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.message-erreur { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; background: #F8E1DC; color: #8E2F20; font-weight: 600; }
.merci h3 { margin: 0 0 8px; font: 600 1.4rem var(--f-titre); color: var(--maquis); }
@media (max-width: 820px) { .deux-colonnes { grid-template-columns: 1fr; } }

@media (max-width: 820px) {
  .prose { padding: 22px 18px; }
  .article-entete h1 { font-size: 1.7rem; }
  .voisins { flex-direction: column; }
  .voisins a { max-width: none; }
}