@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap");

:root{
  --noir:#0d0b09; --nuit:#15120e; --carte:#1c1813; --trait:#2e271e; --trait2:#3d3428;
  --or:#c9a24b; --or-clair:#e6c97f; --or-sombre:#8a6d2c;
  --texte:#efe7d8; --doux:#a89b85; --pale:#6f6555;
  --ok:#7fae7a; --alerte:#d9775f;
  --serif:"Cormorant Garamond", Georgia, serif; --sans:"Inter", system-ui, sans-serif;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{background:var(--noir);color:var(--texte);font-family:var(--sans);font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:radial-gradient(1200px 600px at 80% -10%,#2a2114 0%,transparent 60%),var(--noir)}
a{color:var(--or-clair)}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.01em}
h1{font-size:clamp(2rem,4vw,2.8rem);line-height:1.1}
h2{font-size:1.7rem} h3{font-size:1.25rem}
.sur{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--or)}
.doux{color:var(--doux)} .pale{color:var(--pale)} .petit{font-size:.85rem}
.or{color:var(--or)}
.wrap{max-width:1120px;margin:0 auto;padding:28px 22px 80px}

/* boutons & champs */
.btn{appearance:none;border:1px solid var(--or-sombre);background:transparent;color:var(--or-clair);
  font:500 .9rem var(--sans);padding:.7em 1.3em;border-radius:999px;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:.5em;text-decoration:none}
.btn:hover{border-color:var(--or);background:rgba(201,162,75,.08)}
.btn.plein{background:linear-gradient(135deg,var(--or-clair),var(--or));color:#1a140a;border-color:transparent}
.btn.plein:hover{filter:brightness(1.08)}
.btn.rouge{border-color:#6b3a2e;color:var(--alerte)}
.btn.petit{padding:.45em .9em;font-size:.8rem}
.btn:disabled{opacity:.4;cursor:not-allowed}
input,textarea,select{width:100%;background:var(--nuit);border:1px solid var(--trait2);color:var(--texte);
  font:400 .95rem var(--sans);padding:.75em .9em;border-radius:10px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--or)}
label{display:block;font-size:.78rem;color:var(--doux);margin:14px 0 6px;letter-spacing:.04em}
.carte{background:linear-gradient(180deg,var(--carte),var(--nuit));border:1px solid var(--trait);border-radius:var(--r);padding:22px}
.ligne{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.esp{flex:1}
.grille{display:grid;gap:16px}
.badge{display:inline-block;font-size:.7rem;padding:.25em .7em;border-radius:999px;border:1px solid var(--trait2);color:var(--doux)}
.badge.ok{color:var(--ok);border-color:#3c5a39} .badge.or{color:var(--or);border-color:var(--or-sombre)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--carte);border:1px solid var(--or-sombre);
  padding:.8em 1.3em;border-radius:999px;font-size:.9rem;z-index:99;opacity:0;transition:.25s;pointer-events:none}
.toast.vu{opacity:1}
.bandeau-demo{background:#2a2114;border-bottom:1px solid var(--or-sombre);color:var(--or-clair);font-size:.8rem;text-align:center;padding:.5em}

/* en-tête */
.entete{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--trait);max-width:1120px;margin:0 auto}
.logo{font-family:var(--serif);font-size:1.35rem;letter-spacing:.06em}
.logo b{color:var(--or);font-weight:500}
.onglets{display:flex;gap:4px;flex-wrap:wrap}
.onglet{background:none;border:none;color:var(--doux);font:400 .9rem var(--sans);padding:.55em 1em;border-radius:999px;cursor:pointer}
.onglet.actif{color:var(--noir);background:var(--or)}
.onglet:hover:not(.actif){color:var(--texte)}

/* listes */
.item{display:flex;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--trait)}
.item:last-child{border-bottom:none}
.date-bloc{min-width:64px;text-align:center;border:1px solid var(--trait2);border-radius:10px;padding:6px 4px}
.date-bloc .j{font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--or-clair)}
.date-bloc .m{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--doux)}

/* markdown simple */
.md h2{font-size:1.25rem;color:var(--or-clair);margin:22px 0 6px}
.md p,.md li{color:var(--texte);margin:4px 0}
.md ul{padding-left:1.2em}

@media (max-width:720px){ .entete{flex-wrap:wrap} .cache-mobile{display:none} }