/* ============================================================
   EXTRÊME SÉRÉNITÉ — DESIGN SYSTEM GLOBAL
   Référence unique de tokens et composants pour tout le site.
   Toute nouvelle page doit consommer ces classes plutôt que d'en créer de nouvelles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap');

:root{
  --void:#0B0B0A;
  --ink:#EDEAE2;
  --ink-dim:#9A9790;
  --ink-secondary:#BDB9AE;
  --line-dark: rgba(255,255,255,0.14);
  --gold-light:#E8D9A8;
  --gold:#C6A045;
  --gold-deep:#8B6B2A;

  --ivory:#F6F3EC;
  --ivory-deep:#EFEBE0;
  --ivory-ghost:#E6E0D0;
  --ink-d:#1C1B18;
  --ink-d-dim:#7A766C;
  --line-light: rgba(28,27,24,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ font-family:'Jost', sans-serif; background:var(--ivory); color:var(--ink-d); overflow-x:hidden; }
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

/* ---------- Reveal utility (fade-up on scroll) ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity 1s ease, transform 1s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .glow{ animation:none !important; }
}

/* ---------- Header (noir, commun à tout le site) ---------- */
header{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:22px 48px; background:rgba(11,11,10,0.86); backdrop-filter:blur(6px); border-bottom:1px solid var(--line-dark);
  color:var(--ink); }
.brandmark{ font-size:13px; letter-spacing:0.26em; color:var(--ink); }
.brandmark b{ font-weight:500; color:var(--gold-light); }
nav{ display:flex; gap:34px; }
nav a{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-secondary); position:relative; padding-bottom:4px; }
nav a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .35s ease; }
nav a:hover::after, nav a.current::after{ width:100%; }
nav a.current{ color:var(--ink); }
.nav-toggle{ display:none; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); background:none; border:none; cursor:pointer; }
.mobile-menu{ display:none; position:fixed; inset:0; background:var(--void); z-index:30; flex-direction:column; align-items:center; justify-content:center; gap:28px; }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ font-size:20px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); }
.mobile-close{ position:absolute; top:26px; right:30px; background:none; border:none; color:var(--ink); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer; }

/* ---------- Page hero sombre (pages intérieures : Philosophie, Livre, Mon Espace) ---------- */
.page-hero{ background:var(--void); color:var(--ink); text-align:center; padding:100px 32px 90px; }
.page-hero .eyebrow{ font-size:11px; letter-spacing:0.35em; text-transform:uppercase; color:var(--gold); margin-bottom:26px; }
.page-hero h1{ font-size:44px; font-weight:300; line-height:1.3; max-width:720px; margin:0 auto; }
.page-hero p.sub{ max-width:560px; margin:26px auto 0; font-size:17px; font-weight:300; line-height:1.7; color:#DEDAD0; }

/* ---------- Divider (transition noir -> ivoire) ---------- */
.divider{ display:flex; align-items:center; gap:18px; max-width:460px; margin:0 auto; padding:60px 32px; background:var(--void); }
.divider .rule{ flex:1; height:1px; background:var(--line-dark); }
.divider .mono{ font-size:12px; letter-spacing:0.2em; color:var(--gold); }

/* ---------- Sections ivoire ---------- */
.ivory-zone{ background:var(--ivory); color:var(--ink-d); }
.section{ padding:96px 32px; max-width:1180px; margin:0 auto; position:relative; }
.section-narrow{ max-width:640px; }
.eyebrow-d{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:26px; text-align:center; }
/* Quand l'eyebrow est le seul titre visible d'une petite section (pas de H2 séparé) :
   plus de présence, tout en restant identifiable comme la même famille de style. */
.eyebrow-d.as-title{ font-size:21px; letter-spacing:0.08em; margin-bottom:24px; font-weight:400; }

/* Titre d'article (Journal) — remplace les styles en ligne utilisés page par page */
.article-title{ font-size:34px; font-weight:400; line-height:1.35; margin-bottom:40px; color:var(--ink-d); }
@media (max-width:760px){ .article-title{ font-size:26px; margin-bottom:30px; } }

/* ---------- Typographie de lecture (Philosophie, articles, Livre) ---------- */
.prose{ font-size:17px; font-weight:300; line-height:1.85; color:#3A372F; }
.prose p{ margin-bottom:24px; }
.prose h2{ font-size:27px; font-weight:400; margin:52px 0 20px; color:var(--ink-d); line-height:1.3; }
.prose blockquote{ border-left:2px solid var(--gold-deep); padding:4px 0 4px 24px; margin:36px 0; font-size:19px; font-style:italic; font-weight:300; color:var(--ink-d); }

/* ---------- Boutons ---------- */
.btn-outline{ display:inline-block; padding:16px 40px; border:1px solid var(--gold); color:var(--gold-light);
  font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase; border-radius:2px; transition:background .3s ease, color .3s ease; }
.btn-outline:hover{ background:var(--gold); color:var(--void); }
/* Variante pour usage sur fond ivoire (articles, cartes de format, pages intérieures) — évite de répéter des styles en ligne */
.btn-outline-onlight{ display:inline-block; padding:16px 40px; border:1px solid var(--gold-deep); color:var(--gold-deep);
  font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase; border-radius:2px; transition:background .3s ease, color .3s ease; }
.btn-outline-onlight:hover{ background:var(--gold-deep); color:#FBF3E0; }
.btn-solid{ display:inline-block; padding:17px 44px; background:var(--gold-deep); color:#FBF3E0; font-size:12.5px;
  letter-spacing:0.14em; text-transform:uppercase; border-radius:2px; transition:background .3s ease, transform .3s ease; }
.btn-solid:hover{ background:#6E5420; transform:translateY(-2px); }
.free-note{ display:block; margin-top:16px; font-size:12px; letter-spacing:0.08em; color:var(--ink-d-dim); }

/* ---------- Liens texte simples ---------- */
.link-simple{ font-size:13px; letter-spacing:0.08em; color:var(--gold-deep); border-bottom:1px solid var(--gold-deep); padding-bottom:2px; }

/* ---------- Cartes (Journal) ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); }
.card{ background:var(--ivory); padding:36px 28px; transition:background .3s ease; }
.card:hover{ background:var(--ivory-deep); }
.card .tag{ font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:20px; display:block; }
.card h3{ font-size:18px; font-weight:400; line-height:1.4; }
.card .excerpt{ font-size:13.5px; color:var(--ink-d-dim); margin-top:12px; line-height:1.6; }

/* ---------- Badge contenu provisoire ---------- */
.provisional{ display:inline-block; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-deep);
  border:1px solid var(--gold-deep); border-radius:20px; padding:5px 14px; margin-bottom:18px; }
.provisional-block{ background:var(--ivory-deep); border:1px dashed var(--line-light); border-radius:4px; padding:26px 30px; margin:24px 0; }
.provisional-block p{ font-size:14px; color:var(--ink-d-dim); font-style:italic; }

/* ---------- Explore (liens de synthèse) ---------- */
.explore{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center; }
.explore-item h4{ font-size:15px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:12px; position:relative; display:inline-block; }
.explore-item h4::after{ content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--gold-deep); transition:width .3s ease; }
.explore-item:hover h4::after{ width:100%; }
.explore-item p{ font-size:13.5px; color:var(--ink-d-dim); line-height:1.6; }

/* ---------- Photo grand format (grammaire narrative photo 1 / photo 2) ---------- */
.wide-photo{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; overflow:hidden; }
.wide-photo img{ width:100%; display:block; aspect-ratio:16/8.2; object-fit:cover; }

/* ---------- Silence final ---------- */
.silence{ min-height:50vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:60px 32px; background:var(--ivory); }
.silence p{ max-width:560px; font-size:23px; font-weight:300; font-style:italic; line-height:1.6; color:#2E2C26; }

/* ---------- Signature humaine ("Derrière EXTRÊME SÉRÉNITÉ") — discrète, jamais un bloc commercial ---------- */
.signature-section{ max-width:420px; padding-top:50px; padding-bottom:60px; text-align:center; }
.signature-photo-placeholder{ width:64px; height:80px; object-fit:cover; border-radius:4px; margin:0 auto 22px; display:block; }
.signature-text{ font-size:15px; font-weight:300; line-height:1.7; color:#4A473F; margin-bottom:16px; }

/* ---------- Page dédiée "Derrière EXTRÊME SÉRÉNITÉ" ---------- */
.marci-layout{ display:flex; gap:56px; align-items:flex-start; max-width:760px; margin:0 auto; }
.marci-photo-placeholder{ flex:0 0 240px; width:240px; aspect-ratio:4/5; border-radius:4px; object-fit:cover; display:block; }
.marci-text{ flex:1; }
.marci-text p{ margin-bottom:22px; }
@media (max-width:760px){
  .marci-layout{ flex-direction:column; align-items:center; gap:32px; }
  .marci-photo-placeholder{ flex:none; width:200px; }
  .marci-text{ text-align:left; width:100%; }
}

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line-light); padding:36px 48px; display:flex; justify-content:space-between; align-items:center; background:var(--ivory); }
footer .fmark{ font-size:11px; letter-spacing:0.15em; color:var(--ink-d-dim); }
footer .flinks{ display:flex; gap:24px; flex-wrap:wrap; }
footer .flinks a{ font-size:11px; color:var(--ink-d-dim); }
footer .flinks a:hover{ color:var(--ink-d); }

/* ---------- États désactivés — fonctionnalités pas encore construites ---------- */
/* Jamais un lien actif : ni href, ni curseur pointeur, ni transition au survol. */
.cta-disabled{ opacity:0.5; cursor:not-allowed; pointer-events:none; }
.cta-disabled:hover{ background:inherit; color:inherit; transform:none; }
.link-disabled{ opacity:0.45; cursor:not-allowed; pointer-events:none; }
.card-disabled{ opacity:0.45; cursor:not-allowed; pointer-events:none; }
.stub-card{ max-width:480px; margin:0 auto; text-align:center; background:var(--ivory-deep); border-radius:6px; padding:56px 40px; }
.stub-card p{ font-size:15px; color:var(--ink-d-dim); line-height:1.7; margin-top:16px; }

/* ---------- Pages légales ---------- */
.legal .prose h2{ font-size:19px; margin:40px 0 14px; }
.legal .prose{ font-size:15px; }

/* ============ RESPONSIVE ============ */
@media (max-width:760px){
  header{ padding:18px 22px; } nav{ display:none; } .nav-toggle{ display:block; }
  .page-hero{ padding:70px 22px 60px; } .page-hero h1{ font-size:32px; }
  .section{ padding:66px 22px; }
  .cards{ grid-template-columns:1fr; }
  .explore{ grid-template-columns:1fr; gap:34px; }
  .silence p{ font-size:19px; }
  footer{ flex-direction:column; gap:16px; text-align:center; }
  .prose{ font-size:16px; }
  .stub-card{ padding:44px 24px; }
}