/* La coque du blog : la barre de lecture, l'en-tête collant, le pied, la flèche de retour.
   Couleurs de la landing : nuit #29231d, or #d68f35, crème #f1e7d8. Aucune ombre portée. */
/* le pied descend toujours jusqu'en bas de l'écran : une page courte (la liste, un seul article) laissait une bande crème
   sous lui ; et ce qui dépasse la page (le rebond d'un téléphone) a la couleur de la nuit, pas du papier */
html { background:#29231d; }
body { margin:0; background:#fdf9f1; color:#362b24; font:400 18px/1.8 'Jost',sans-serif; color-scheme:light; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.site-corps { flex:1 0 auto; }

.lecture-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:70; pointer-events:none; }
.lecture-progress i { display:block; height:100%; width:0; background:#d68f35; transition:width .15s linear; }

.site-nav { position:sticky; top:0; z-index:50; background:rgba(41,35,29,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(214,143,53,.12); }
.site-nav-inner { box-sizing:border-box; max-width:840px; margin:0 auto; padding:13px 20px; display:flex; align-items:center; gap:24px; }
.site-brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:#d68f35; font:600 15px/1 'Jost',sans-serif; letter-spacing:.34em; }
.site-brand img { width:34px; height:34px; border-radius:9px; display:block; }   /* le logo de Myriam, comme sur la landing */
.site-links { margin-left:auto; display:flex; align-items:center; gap:22px; }
.site-links a:not(.site-cta) { color:#b5a48f; text-decoration:none; font-size:13px; letter-spacing:.13em; text-transform:uppercase; transition:color .25s; padding:8px 0; }
.site-links a:hover { color:#e9ac52; }
.site-links a[aria-current="page"] { color:#f1e7d8; }
.site-cta { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:44px; padding:10px 22px; border-radius:999px; background:#f1e7d8; color:#29231d !important; font:600 12px/1 'Jost',sans-serif; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; transition:background .25s; }
.site-cta:hover { background:#fff; }
.site-nav a:focus-visible, .site-foot a:focus-visible { outline:2px solid #e9ac52; outline-offset:3px; border-radius:8px; }

.site-foot { margin-top:-1px; background:#29231d; color:#f1e7d8; border-top:1px solid rgba(214,143,53,.10); padding:44px 20px 54px; text-align:center; }
.site-foot .in { max-width:840px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:16px; }
.site-foot .site-brand { font-size:13px; }
/* deux lignes pleines sur ordinateur : la coupure tombe avant « comprendre » (largeur mesurée sur le texte) */
.site-foot p { margin:0; color:#b5a48f; font-size:14px; line-height:1.65; max-width:522px; text-wrap:balance; }
.site-foot .right { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#b5a48f; }
.site-foot .right a { color:#d68f35; text-decoration:none; }
.site-foot .right a:hover { color:#e9ac52; }

/* la flèche de retour en haut : petite, translucide, décalée du bord pour ne pas couvrir les chevrons */
.haut { position:fixed; right:12px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:60; width:44px; height:44px; border-radius:50%; border:1px solid rgba(214,143,53,.5); background:rgba(41,35,29,.62); color:#f1e7d8; font:400 18px/1 'Jost',sans-serif; cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s, transform .3s, border-color .3s, background .3s; }
.haut.on { opacity:1; transform:none; pointer-events:auto; }
.haut:hover { border-color:#e9ac52; background:rgba(41,35,29,.9); }
.haut:focus-visible { outline:2px solid #e9ac52; outline-offset:3px; }

/* l'image absente : un aplat nuit, une arche, l'étiquette — jamais une image inventée */
.hero-placeholder, .card-img[role="img"] { position:relative; overflow:hidden; max-width:100%; box-sizing:border-box; background:radial-gradient(ellipse 60% 70% at 72% 45%, rgba(233,172,82,.20), transparent 62%), linear-gradient(160deg,#3a2d20 0%,#221c17 55%,#181410 100%); }
.hero-placeholder::before, .card-img[role="img"]::before { content:''; position:absolute; right:12%; top:14%; width:min(220px,28%); aspect-ratio:.62; border:1px solid rgba(233,172,82,.45); border-radius:999px 999px 6px 6px; box-shadow:inset 0 0 0 8px rgba(233,172,82,.08); }
.placeholder-tag { position:absolute; right:16px; bottom:16px; padding:6px 10px; border:1px dashed rgba(241,231,216,.6); border-radius:6px; color:#f1e7d8; font:500 11px/1.4 'Jost',sans-serif; letter-spacing:.14em; text-transform:uppercase; }

/* la liste des articles */
.blog-head { background:#29231d; }
.blog-head .in { max-width:840px; margin:0 auto; padding:48px 20px 38px; }
.blog-head h1 { margin:0; color:#e9ac52; font:400 48px/1.12 'Marcellus',serif; letter-spacing:-.02em; }
.blog-gold-line { height:3px; background:linear-gradient(90deg,#624023,#efbc74,#78532d); }
.blog-list { max-width:840px; margin:0 auto; padding:36px 20px 64px; }
.cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.card { background:#fffbf5; border:1px solid #ece1d0; border-radius:16px; overflow:hidden; }
.card > a { display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
.card > a:focus-visible { outline:3px solid #bd701d; outline-offset:4px; border-radius:16px; }
.card-img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.card-img[role="img"]::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,#624023,#efbc74,#78532d); }
.card-body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.card h2 { margin:0 0 10px; color:#765433; font:400 26px/1.3 'Marcellus',serif; letter-spacing:-.01em; }
.card p { margin:0 0 18px; font-size:16px; line-height:1.65; }
.card-meta { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; line-height:1.5; color:#69594c; }
.card-meta .lire { color:#765433; font-weight:500; letter-spacing:.04em; }
.card-etat { margin-left:8px; padding:2px 8px; border:1px solid #cdb995; border-radius:12px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#8d714d; }
.card > a:hover h2 { color:#5e3f22; }
.card > a:hover .lire { text-decoration:underline; text-underline-offset:4px; }

@media (max-width:700px) {
  .site-nav-inner { padding:10px 16px; gap:14px; }
  .site-links { gap:14px; }
  .site-links a:not(.site-cta) { font-size:12px; letter-spacing:.08em; }
  .site-cta { padding:9px 14px; font-size:11px; letter-spacing:.12em; }
  .site-foot { padding:36px 20px 44px; }
  .blog-head .in { padding:32px 20px 26px; }
  .blog-head h1 { font-size:36px; }
  .blog-list { padding:26px 20px 52px; }
}
@media (max-width:359px) { .site-links a[href="/"] { display:none; } }   /* à 320 px la barre débordait de 23 px : la marque mène déjà à l'accueil */
@media print { .site-nav, .site-foot, .lecture-progress, .haut, .placeholder-tag { display:none !important; } }
@media (prefers-reduced-motion:reduce) { .lecture-progress i, .haut, .site-cta, .site-links a { transition:none; } }