/* =========================
   Palette (ta palette claire)
   ========================= */
:root{
  --ink: #2A1F16;
  --ink-soft: #5A4B3E;

  --paper: #FAF5EC;      /* fond global un peu plus clair */
  --paper-alt: #F3D7B8;  /* bande hero */
  --paper-card: #F5EDE2; /* cartes */

  --rose-100: #F3D6D0;
  --rose-200: #E7A9A0;
  --rose-400: #C87B73;
  --rose-600: #B34C45;

  --green: #23493C;      /* pour version bouton vert si tu veux */
  --shadow: rgba(42,31,22,.12);
}

html{ scroll-behavior:smooth; }
*{ box-sizing:border-box; }

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font: 16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Titres avec une touche japonaise */
h1,h2,h3{ font-family:"Noto Serif JP", serif; color:var(--ink); margin:0 0 .6rem; }
h1{ font-size: clamp(2rem, 4vw, 3rem); font-weight:800; }
h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight:700; }
h3{ font-size: 1.15rem; font-weight:700; }

.lead{ color:var(--ink-soft); margin-bottom:1.2rem; }

/* Conteneur centré sans flex */
.wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}

/* =========================
   Header + nav (sans flex)
   ========================= */
header{
  position:sticky; top:0; z-index:10;
  background: linear-gradient(90deg, var(--rose-200), var(--paper-alt));
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border-bottom: 1px solid rgba(179,76,69,.15);
}

header .wrap{ text-align:center; padding: 10px 16px; }

/* Marque à gauche via float, nav centrée via text-align */
.brand{
  float:left;
  font-family:"Noto Serif JP", serif;
  font-weight:800; font-size:1.25rem;
  color:var(--ink); text-decoration:none;
}

/* Nav centrée sans flex */
.main-nav{ display:inline-block; }
.main-nav a{
  display:inline-block;
  margin: 0 .6rem;
  padding:.35rem .5rem;
  color:var(--ink); text-decoration:none; font-weight:600;
  border-radius:8px;
}
.main-nav a:hover{ color:var(--rose-600); background:rgba(255,255,255,.35); }

/* clear float du logo */
header .wrap::after{ content:""; display:block; clear:both; }

/* =========================
   Sections
   ========================= */
.section{ padding: 56px 0; }
.section.alt{ background: linear-gradient(180deg, var(--paper), var(--paper-card)); }

.hero{
  background: var(--paper-alt);
  padding: 64px 0 56px;
  text-align:center;
}

/* =========================
   Cards sans flex (inline-block)
   ========================= */
.cards{ text-align:center; }
.card{
  display:inline-block;            /* pas de flex */
  vertical-align: top;
  width: calc(33.333% - 20px);     /* 3 colonnes */
  min-width: 220px;
  margin: 10px;
  padding: 16px 18px;
  background: var(--paper-card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 10px 24px var(--shadow);
  text-align: left;
}
.card p{ margin: .3rem 0 0; color:var(--ink-soft); }

/* Vignettes projet */
.project .thumb{
  height: 140px;
  margin: -16px -18px 12px;
  border-radius: 14px 14px 0 0;
  background:
    radial-gradient(120px 60px at 30% 35%, var(--rose-100), transparent 60%),
    radial-gradient(120px 60px at 75% 25%, #A8B59F, transparent 60%),
    linear-gradient(180deg, #f6e9dd, #ecd8c7);
}

/* =========================
   Boutons
   ========================= */
.btn{
  display:inline-block;            /* pas de flex */
  background: var(--rose-600);
  color:#fff;
  border-radius: 12px;
  padding:.7rem 1.2rem;
  text-decoration:none;
  font-weight:600;
  box-shadow: 0 12px 24px var(--shadow);
}
.btn:hover{ background: #9d403a; }

.btn.ghost{
  background: transparent;
  color: var(--rose-600);
  border: 2px solid var(--rose-600);
}
.btn.ghost:hover{
  background: var(--rose-600);
  color:#fff;
}

/* =========================
   Footer
   ========================= */
.footer{
  background: linear-gradient(180deg, var(--paper-alt), var(--rose-200));
  text-align:center;
  padding: 22px 0;
  color: var(--ink);
  border-top: 1px solid rgba(179,76,69,.12);
}

/* =========================
   Responsive simple (sans flex)
   ========================= */
@media (max-width: 920px){
  .card{ width: calc(50% - 20px); }   /* 2 colonnes */
}
@media (max-width: 600px){
  .brand{ float:none; display:block; margin-bottom:6px; }
  .card{ width: 100%; }               /* 1 colonne */
  .hero{ padding: 48px 0; }
}