/* Site vitrine — une seule feuille, aucune dépendance, aucun traceur. */
:root {
  --fond: #f7f5f0;
  --carte: #ffffff;
  --encre: #1c1b19;
  --encre-2: #4a4741;
  --encre-3: #8a857c;
  --trait: #e4dfd5;
  --accent: #2f5d50;
  --accent-doux: #e3ece8;
  --a-remplir: #b4441f;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #141311; --carte: #1d1b18; --encre: #f1ede4; --encre-2: #c9c3b7;
    --encre-3: #8f897d; --trait: #2e2b26; --accent: #8cc4b2; --accent-doux: #1f2c28;
    --a-remplir: #f0896a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 1rem/1.65 var(--sans);
}
a { color: var(--accent); }
.page { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }

/* Champs que Benjamin doit remplir : impossibles à rater. */
.a-remplir {
  color: var(--a-remplir); font-weight: 600;
  border-bottom: 1px dashed currentColor;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.entete {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 0; border-bottom: 1px solid var(--trait);
}
.marque { font: 600 1.25rem/1 var(--serif); color: var(--encre); text-decoration: none; white-space: nowrap; }
.entete nav a { margin-left: 1.25rem; color: var(--encre-2); text-decoration: none; font-size: .9375rem; }
.entete nav a:hover { color: var(--accent); }

/* ── Ouverture ───────────────────────────────────────────────────────── */
.ouverture { padding: 4.5rem 0 3.5rem; max-width: 44rem; }
.ouverture h1 {
  font: 600 clamp(2rem, 5vw, 3.1rem)/1.12 var(--serif);
  letter-spacing: -.02em; margin: 0 0 1.25rem;
}
.ouverture p { font-size: 1.1875rem; color: var(--encre-2); margin: 0; }

/* ── Sections ────────────────────────────────────────────────────────── */
section { padding: 3rem 0; border-top: 1px solid var(--trait); }
section h2 {
  font: 600 1.6rem/1.2 var(--serif); margin: 0 0 .5rem; letter-spacing: -.01em;
}
.chapo { color: var(--encre-2); margin: 0 0 2rem; max-width: 40rem; }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.carte {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
  padding: 1.5rem;
}
.carte h3 { font: 600 1.125rem/1.3 var(--sans); margin: 0 0 .5rem; }
.carte p { margin: 0; color: var(--encre-2); font-size: .9688rem; }
.pictogramme {
  width: 2.5rem; height: 2.5rem; border-radius: 10px; margin-bottom: 1rem;
  background: var(--accent-doux); color: var(--accent);
  display: grid; place-items: center;
}
.pictogramme svg { width: 1.35rem; height: 1.35rem; }

/* ── Projets ─────────────────────────────────────────────────────────── */
.projet {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.25rem; align-items: start;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
  padding: 1.5rem; margin-bottom: 1rem;
}
.projet img { width: 4.5rem; height: 4.5rem; }
.projet h3 { margin: 0 0 .25rem; font: 600 1.25rem/1.3 var(--serif); }
.projet .etat {
  display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  padding: .15rem .55rem; border-radius: 999px; margin-left: .5rem; vertical-align: 2px;
  background: var(--accent-doux); color: var(--accent);
}
.projet p { margin: .5rem 0 0; color: var(--encre-2); }
.projet .note { font-size: .875rem; color: var(--encre-3); }
.projet-vide { grid-template-columns: 1fr; border-style: dashed; background: transparent; }

/* ── Engagements ─────────────────────────────────────────────────────── */
.engagements { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.engagements li { padding-left: 1.6rem; position: relative; color: var(--encre-2); }
.engagements li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: .65rem; height: .65rem;
  border-radius: 50%; background: var(--accent);
}
.engagements b { color: var(--encre); }

/* ── Contact et pied ─────────────────────────────────────────────────── */
.contact p { margin: 0 0 .5rem; }
.pied {
  border-top: 1px solid var(--trait); padding: 2rem 0 3rem; margin-top: 1rem;
  color: var(--encre-3); font-size: .875rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
.pied a { color: var(--encre-3); }

/* ── Mentions légales ────────────────────────────────────────────────── */
.legal { max-width: 46rem; padding: 3rem 0; }
.legal h1 { font: 600 2rem/1.2 var(--serif); margin: 0 0 2rem; }
.legal h2 { font: 600 1.15rem/1.3 var(--sans); margin: 2rem 0 .5rem; }
.legal p, .legal li { color: var(--encre-2); }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0; }
.legal dt { color: var(--encre-3); }
.legal dd { margin: 0; }

@media (max-width: 40rem) {
  /* Le nom d'abord, le menu dessous sur une seule ligne. */
  .entete { flex-direction: column; align-items: flex-start; gap: .65rem; }
  .entete nav a { margin-left: 0; margin-right: 1.1rem; }
  .ouverture { padding: 3rem 0 2.5rem; }
  .projet { grid-template-columns: 3.25rem 1fr; padding: 1.25rem; }
  .projet img { width: 3.25rem; height: 3.25rem; }
  .projet-vide { grid-template-columns: 1fr; }  /* pas de logo : pas de colonne pour lui */
  .legal dl { grid-template-columns: 1fr; }
  .legal dt { margin-top: .5rem; }
}

/* « EI » : obligatoire après le nom d'un entrepreneur individuel depuis 2022. */
.ei { font: 600 .7rem/1 var(--sans); letter-spacing: .06em; color: var(--encre-3);
  border: 1px solid var(--trait); border-radius: 4px; padding: .15rem .3rem; vertical-align: 3px; }