@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/fraunces-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
}

:root{
  --ink:#2E1B12;
  --ink-soft:#6B5544;
  --parchment:#F7EFE2;
  --card:#FFFDF8;
  --hairline:#EAE0CC;
  --pour:#1B8A5A;
  --pour-soft:#DEF3E7;
  --contre:#C2451F;
  --contre-soft:#FBE1D3;
  --neutre:#8A8A82;
  --neutre-soft:#ECEAE4;
  --gold:#D3A02A;
  --radius:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--parchment);
  font-family:'Inter',sans-serif;
  color:var(--ink);
  min-height:100vh;
}
a{color:inherit;}
.home-intro p a,
.article p a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--hairline);
  text-underline-offset:2px;
}
.home-intro p a:hover,
.article p a:hover{text-decoration-color:currentColor;}

.page{
  max-width:640px;
  margin:0 auto;
  padding-bottom:48px;
}
@media (min-width:900px){
  .page{max-width:900px;}
}

/* Site header / nav — fond pleine largeur, contenu aligné avec .page */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--ink);
  color:#fff;
}
.site-header-inner{
  max-width:900px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  row-gap:6px;
  column-gap:16px;
}
.site-header .brand{
  font-family:'Fraunces',serif;
  font-size:16px;
  font-weight:600;
  color:#fff;
  text-decoration:none;
}
.site-nav{
  display:flex;
  gap:16px;
}
.site-nav a{
  color:#fff;
  opacity:0.75;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
}
.site-nav a.active,
.site-nav a:hover{opacity:1;}

/* Hero */
.hero{
  padding:28px 20px 18px;
  border-bottom:1px solid var(--hairline);
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.eyebrow svg{width:16px;height:16px;flex-shrink:0;}
h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:30px;
  line-height:1.15;
  margin:0 0 8px;
  color:var(--ink);
}
@media (min-width:900px){
  h1{font-size:36px;}
}
.meta{
  font-size:13px;
  color:var(--ink-soft);
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.meta span:not(:last-child)::after{content:"·";margin-left:6px;color:var(--hairline);}

/* Context */
details.context{
  margin:16px 20px 0;
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  background:var(--card);
  overflow:hidden;
}
details.context summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
  font-size:14.5px;
}
details.context summary::-webkit-details-marker{display:none;}
details.context summary .chev{
  transition:transform .2s ease;
  color:var(--ink-soft);
}
details.context[open] summary .chev{transform:rotate(180deg);}
.context-body{
  padding:0 16px 16px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
  white-space:pre-wrap;
}

/* Gauge */
.gauge-wrap{
  margin:18px 20px 0;
  padding:14px 16px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--hairline);
}
.gauge-top{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:600;
  margin-bottom:8px;
}
.gauge-top .pour-lbl{color:var(--pour);}
.gauge-top .contre-lbl{color:var(--contre);}
.gauge-bar{
  height:8px;
  border-radius:999px;
  background:var(--neutre-soft);
  overflow:hidden;
  display:flex;
}
.gauge-bar .seg-pour{background:var(--pour);height:100%;transition:width .25s ease;}
.gauge-bar .seg-contre{background:var(--contre);height:100%;transition:width .25s ease;}
.gauge-caption{
  margin-top:9px;
  font-size:11.5px;
  color:var(--ink-soft);
  line-height:1.4;
}

/* Progress (avis exprimés) */
.progress-wrap{
  margin:14px 20px 0;
  padding:12px 16px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--hairline);
}
.progress-wrap .txt{
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.progress-wrap .track{
  height:5px;
  border-radius:999px;
  background:var(--hairline);
  overflow:hidden;
}
.progress-wrap .fill{
  height:100%;
  background:var(--gold);
  width:0%;
  transition:width .25s ease;
}

/* Section headers */
.section-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:26px 20px 10px;
  font-family:'Fraunces',serif;
  font-size:17px;
  font-weight:600;
}
.section-title .dot{
  width:9px;height:9px;border-radius:50%;
}
.section-title.pour .dot{background:var(--pour);}
.section-title.contre .dot{background:var(--contre);}
.section-title small{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:12.5px;
  color:var(--ink-soft);
  margin-left:auto;
}

/* Argument cards */
.cards{padding:0 20px;display:flex;flex-direction:column;gap:12px;}
.cards:empty{display:none;}
@media (min-width:640px){
  .cards{display:grid;grid-template-columns:1fr 1fr;}
}
.arg-card{
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:14px 14px 12px;
  border-left:3px solid var(--hairline);
}
.arg-card.pour{border-left-color:var(--pour);}
.arg-card.contre{border-left-color:var(--contre);}
.arg-head{
  display:flex;
  gap:10px;
  margin-bottom:6px;
}
.arg-num{
  font-family:'Fraunces',serif;
  font-size:13px;
  font-weight:600;
  color:#fff;
  width:20px;height:20px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  margin-top:1px;
}
.arg-card.pour .arg-num{background:var(--pour);}
.arg-card.contre .arg-num{background:var(--contre);}
.arg-title{
  font-weight:600;
  font-size:14.5px;
  line-height:1.35;
}
.arg-text{
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 12px;
  white-space:pre-wrap;
}

/* Segmented control */
.segmented{
  display:flex;
  border-radius:10px;
  background:var(--neutre-soft);
  padding:3px;
  gap:3px;
}
.segmented button{
  flex:1;
  border:none;
  background:transparent;
  padding:8px 4px;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
  border-radius:8px;
  cursor:pointer;
  transition:all .15s ease;
}
.segmented button.active-pour{background:var(--pour);color:#fff;}
.segmented button.active-contre{background:var(--contre);color:#fff;}
.segmented button.active-neutre{background:var(--neutre);color:#fff;}

/* ---------- Accueil ---------- */
.home-intro{padding:28px 20px 4px;}
.home-intro p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}
.quest-grid{
  padding:22px 20px 20px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:640px){
  .quest-grid{grid-template-columns:repeat(auto-fit, minmax(260px,1fr));}
}
.quest-card{
  display:block;
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:18px;
  text-decoration:none;
  color:var(--ink);
}
.quest-card h2{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:19px;
  margin:0 0 8px;
}
.quest-card p{
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.quest-card .quest-meta{
  font-size:12px;
  color:var(--ink-soft);
}
.empty-state{
  text-align:center;
  color:var(--ink-soft);
  font-size:13.5px;
  line-height:1.6;
  padding:40px 20px;
}

/* ---------- Page "À propos" ---------- */
.bio-header{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:flex-start;
  margin-bottom:10px;
}
.bio-photo{
  width:180px;
  height:180px;
  border-radius:var(--radius);
  object-fit:cover;
  border:1px solid var(--hairline);
  flex-shrink:0;
}
.bio-intro{
  flex:1;
  min-width:240px;
  padding-top:4px;
}
.bio-intro h1{margin-bottom:6px;}
.bio-role{
  font-size:14px;
  color:var(--ink-soft);
  margin:0;
  line-height:1.5;
}

/* ---------- Page "Le projet" ---------- */
.article{padding:28px 20px 60px;}
.article h2{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:19px;
  margin:32px 0 10px;
}
.article h2:first-of-type{margin-top:8px;}
.article p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0 0 14px;
}
.article .callout{
  margin-top:10px;
  padding:16px 18px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--hairline);
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-soft);
}
.btn-contact{
  display:inline-block;
  margin-top:8px;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  padding:12px 20px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
}