:root{
  --bg:#f7f3ec;
  --bg-elevated:#ffffff;
  --text:#14141f;
  --text-muted:#6b7080;
  --border:rgba(20,20,31,0.10);
  --orange:#ff7a35;
  --red:#e5384b;
  --green:#1f9d5c;
  --font-display:'Unbounded', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100%;
}

body{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  text-align:center;
}

a{ color:inherit; }

/* --- Nav --- */
.nav{
  width:100%;
  max-width:40rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 6vw 0;
}
.nav-logo{
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.02em;
  color:var(--text);
  text-decoration:none;
}
.nav-links{
  display:flex;
  gap:1.3rem;
}
.nav-links a{
  font-size:0.82rem;
  color:var(--text-muted);
  text-decoration:none;
  transition:color 0.15s ease;
}
.nav-links a:hover{ color:var(--orange); }

/* --- Page wrap --- */
.wrap{
  width:100%;
  max-width:30rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:6vh 6vw 8vh;
}

.eyebrow{
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.16em;
  color:var(--text-muted);
  text-transform:uppercase;
}

/* --- Signature mark: hexagon / cube --- */
.mark{ width:8rem; height:auto; margin:1.8rem 0 1.4rem; }
.mark .hex{ fill:none; stroke:url(#hexGrad); stroke-width:2.5; }
.mark .face-top{ fill:#ffb37a; }
.mark .face-left{ fill:#ff6b35; }
.mark .face-right{ fill:#c22b3d; }
@media (prefers-reduced-motion: no-preference){
  .mark .hex, .mark .face-top, .mark .face-left, .mark .face-right{
    opacity:0; animation:fadein 0.7s 0s ease-out forwards;
  }
  .mark .face-top{ animation-delay:0.15s; }
  .mark .face-left{ animation-delay:0.3s; }
  .mark .face-right{ animation-delay:0.45s; }
}
@keyframes fadein{ to{ opacity:1; } }

h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.5rem, 5vw, 2rem);
  line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--text);
}

.lede{
  margin-top:0.9rem;
  color:var(--text-muted);
  font-size:0.98rem;
  line-height:1.55;
  max-width:26rem;
}

/* --- Sections --- */
.section{
  width:100%;
  margin-top:3.6rem;
}
.section-eyebrow{
  font-weight:600;
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange);
}
.section-title{
  margin-top:0.5rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.2rem;
  color:var(--text);
}
.section-sub{
  margin-top:0.5rem;
  font-size:0.9rem;
  line-height:1.55;
  color:var(--text-muted);
}

/* --- Chips (Comprendre, à venir) --- */
.chip-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.6rem;
  margin-top:1.2rem;
}
.chip{
  padding:0.5rem 1rem;
  border:1px dashed var(--border);
  border-radius:999px;
  font-size:0.8rem;
  color:var(--text-muted);
}

/* --- Origin teaser --- */
.origin-teaser{
  width:100%;
  margin-top:1.2rem;
  padding:1.3rem 1.3rem;
  border:1px solid rgba(31,157,92,0.25);
  border-radius:1rem;
  background:#f2f8f4;
}
.origin-teaser .title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.02rem;
  color:var(--text);
}
.origin-teaser .sub{
  margin-top:0.5rem;
  font-size:0.85rem;
  line-height:1.55;
  color:var(--text-muted);
}
.origin-teaser .note{
  display:block;
  margin-top:0.8rem;
  font-size:0.78rem;
  font-weight:600;
  color:var(--green);
}

/* --- Divider --- */
.divider{
  width:100%;
  display:flex;
  align-items:center;
  gap:0.9rem;
  margin-top:0.5rem;
  color:var(--text-muted);
  font-size:0.8rem;
  letter-spacing:0.04em;
}
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--border); }

/* --- Link cards --- */
.links{ width:100%; display:flex; flex-direction:column; gap:0.75rem; margin-top:1.6rem; }
.link-card{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  width:100%;
  padding:1rem 1.2rem;
  border:1px solid var(--border);
  border-radius:0.9rem;
  background:var(--bg-elevated);
  text-decoration:none;
  color:var(--text);
  text-align:left;
  transition:border-color 0.15s ease, transform 0.15s ease;
}
.link-card:hover{ border-color:var(--orange); transform:translateX(2px); }
.link-card:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

.link-card.featured{
  flex-direction:column;
  align-items:stretch;
  padding:1.3rem 1.3rem 1.2rem;
  border-color:rgba(255,122,53,0.35);
  background:#fff6ee;
}
.link-card.featured:hover{ border-color:var(--orange); transform:translateX(0); }

.card-top{ display:flex; align-items:center; justify-content:space-between; }
.kicker{ font-weight:600; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--orange); }
.tagline{ display:block; margin-top:0.5rem; font-family:var(--font-display); font-weight:500; font-size:1.05rem; line-height:1.35; color:var(--text); }

.checklist{ display:flex; flex-wrap:wrap; gap:0.4rem 1.1rem; margin-top:0.85rem; }
.check{ display:inline-flex; align-items:center; gap:0.35rem; font-size:0.8rem; color:var(--text); }
.check-mark{ color:var(--green); font-weight:700; }

.card-desc{ display:block; margin-top:0.9rem; font-size:0.85rem; line-height:1.6; color:var(--text-muted); }

.link-card .label{ font-family:var(--font-display); font-weight:500; font-size:0.98rem; }
.link-card .desc{ display:block; margin-top:0.3rem; font-size:0.82rem; line-height:1.55; color:var(--text-muted); }
.link-card .arrow{ flex-shrink:0; margin-left:1rem; margin-top:0.15rem; color:var(--text-muted); font-size:1.1rem; transition:transform 0.15s ease, color 0.15s ease; }
.link-card:hover .arrow{ transform:translateX(3px); color:var(--orange); }

/* --- Secondary button (Archives) --- */
.btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin-top:1rem;
  padding:0.65rem 1.2rem;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:0.85rem;
  font-weight:600;
  color:var(--text);
  text-decoration:none;
  transition:border-color 0.15s ease;
}
.btn-secondary:hover{ border-color:var(--orange); }
.btn-secondary svg{ width:0.9rem; height:0.9rem; }

/* --- Footer --- */
footer{
  margin-top:3.5rem;
  padding-top:2rem;
  border-top:1px solid var(--border);
  width:100%;
  font-size:0.8rem;
  color:var(--text-muted);
  line-height:1.6;
}
footer .brand-line{ color:var(--text); font-weight:600; }
footer .legal-links{ margin-top:0.9rem; font-size:0.76rem; }
footer .legal-links a{ text-decoration:none; color:var(--text-muted); }
footer .legal-links a:hover{ color:var(--orange); }
footer .disclaimer{ margin-top:0.9rem; font-size:0.74rem; opacity:0.85; }
footer .copyright{ margin-top:1.2rem; font-size:0.72rem; opacity:0.6; }

/* --- Legal / utility pages --- */
.legal{ max-width:34rem; text-align:left; padding:8vh 6vw; }
.legal h1{ font-family:var(--font-display); font-size:1.5rem; margin-bottom:1.3rem; }
.legal h2{ font-family:var(--font-display); font-size:1rem; margin-top:1.8rem; margin-bottom:0.5rem; }
.legal p{ font-size:0.9rem; line-height:1.7; color:var(--text); margin-bottom:0.8rem; }
.legal a{ color:var(--orange); }
.legal .back{ display:inline-block; margin-top:2.2rem; font-size:0.85rem; color:var(--text-muted); text-decoration:none; }
.legal .back:hover{ color:var(--orange); }

/* --- 404 --- */
.notfound{ text-align:center; padding-top:14vh; }