/* ════════════════════════════════════════════════
   FACTEUR F — feuille globale
   Charger APRÈS les styles existants, sur les 8 pages.
   ════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:wght@400;500;600&display=swap');

:root {
  /* couleur — 6 valeurs + 1 variante */
  --paper:#FAF6F0;   /* fond par défaut, 80 % du site */
  --sand:#EFE6DA;    /* bande de section alternée */
  --rule:#DCCFBE;    /* filets, séparateurs, gros chiffres */
  --ink:#17130F;     /* texte, bouton primaire, bande forte */
  --accent:#6E2C36;  /* accent UNIQUE : liens, surtitres, hover */
  --accent-bright:#D9A3AE; /* uniquement sur fond encre */
  --muted:#6B6058;   /* texte secondaire, légendes */

  /* typographie */
  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Instrument Sans', system-ui, sans-serif;
  --fs-display:clamp(38px, 9vw, 116px);
  --fs-h2:clamp(34px, 5vw, 60px);
  --fs-h3:26px;
  --fs-body:17px;

  /* espace */
  --pad-x:clamp(20px, 6vw, 40px);
  --section-y:clamp(56px, 12vw, 104px);
  --measure:34em;
  --wrap:1180px;
  --tap:48px;
}

/* Le levier le plus puissant du lot : coins vifs, aucune ombre.
   Les arrondis + ombres douces sont ce qui fait « template gratuit ». */
*, *::before, *::after {
  box-sizing:border-box;
  border-radius:0 !important;
  box-shadow:none !important;
}

body {
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body);
  line-height:1.65; text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}

/* ── grille ─────────────────────────────────── */
.wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x); }
section { padding-block:var(--section-y); }
section + section { border-top:1px solid var(--rule); }

/* ── typographie ────────────────────────────── */
h1, h2, h3, h4, blockquote {
  font-family:var(--serif); font-weight:400;
  letter-spacing:-.015em; text-wrap:balance;
}
h1 { font-size:var(--fs-display); line-height:.94; margin:0 0 .3em; max-width:16ch; }
h2 { font-size:var(--fs-h2);      line-height:1.05; margin:0 0 .5em; max-width:26ch; }
h3 { font-size:var(--fs-h3);      line-height:1.15; margin:0 0 .4em; }
h1 em, h2 em, h1 .hl { font-style:italic; color:var(--accent); }

p, li { max-width:var(--measure); }
p { margin:0 0 1.1em; }
strong { font-weight:600; }

/* surtitre — la classe la plus utile du site.
   Les kickers actuels sont typographiés comme des titres : écart ×3 minimum. */
.eyebrow {
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px; max-width:none;
}

.lede { font-size:20px; line-height:1.55; max-width:56ch; color:#3D352E; }

blockquote {
  font-size:clamp(24px, 3.6vw, 40px); line-height:1.25;
  max-width:30ch; margin:var(--section-y) 0;
  padding:0; border:0; color:var(--ink);
}

/* ── liens & boutons — TROIS traitements, pas cinq ── */
a { color:var(--accent); text-decoration:none;
    border-bottom:1px solid color-mix(in oklab, var(--accent) 30%, transparent); }
a:hover { color:var(--ink); border-bottom-color:var(--ink); }

.btn, .btn-2 {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:15px; font-weight:500;
  min-height:var(--tap); padding:14px 26px;
  border:1px solid var(--ink); border-bottom-width:1px;
  transition:background .18s ease, color .18s ease;
}
.btn   { background:var(--ink); color:var(--paper); }         /* primaire — UN par écran */
.btn:hover { background:var(--accent); border-color:var(--accent); color:var(--paper); }
.btn-2 { background:transparent; color:var(--ink); }          /* secondaire */
.btn-2:hover { background:var(--ink); color:var(--paper); }

.link-3 { /* tertiaire — remplace les 3e et 4e boutons qui encombrent l'accueil */
  color:var(--accent); font-size:15px; font-weight:500;
  border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  padding-bottom:3px; display:inline-block; min-height:24px;
}
.link-3:hover { color:var(--ink); border-bottom-color:var(--ink); }

.actions { display:flex; flex-wrap:wrap; gap:20px 28px; align-items:center; }

/* ── bandes : max 2 fonds + 1 encre par page ── */
.band-sand { background:var(--sand); }
.band-ink  { background:var(--ink); color:var(--paper); }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink blockquote { color:var(--paper); }
.band-ink p, .band-ink .lede { color:#B8A894; }
.band-ink .eyebrow { color:var(--accent-bright); }
.band-ink a { color:#E8DFD3; border-bottom-color:rgba(232,223,211,.4); }
.band-ink .btn { background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* ── bandeau pilier (remplace la carte arrondie) ── */
.pilier {
  display:grid; grid-template-columns:auto 1fr auto; gap:22px;
  align-items:baseline; padding:26px 0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--rule);
  border-left:0; border-right:0; background:none;
}
.pilier:hover { background:#F2EAE0; }
.pilier .num  { font-family:var(--serif); font-size:34px; line-height:1; color:#C9B79E; }
.pilier .name { font-family:var(--serif); font-size:34px; line-height:1.05; }
.pilier .sub  { font-size:14px; color:var(--muted); }
.pilier .arrow{ font-size:18px; color:var(--accent); }

/* ── fiche produit — UN seul gabarit pour les 6 ── */
.produit {
  border-top:1px solid var(--ink); padding:28px 0 30px;
  display:grid; gap:10px; align-content:start;
}
.produit .meta { font-size:10px; letter-spacing:.16em; text-transform:uppercase;
                 color:var(--accent); }
.produit h3 { margin:0; }
.produit p  { margin:0; font-size:15.5px; color:#3D352E; }

/* ── carte produit — variante "card" : fond sand + bordure rule, partout où une carte apparaît ── */
.produit-card.produit {
  border-top:0; background:var(--sand); border:1px solid var(--rule);
  padding:1.8rem 1.9rem; display:flex; flex-direction:column; gap:10px;
}

/* grille asymétrique — un bloc large, deux étroits (double page de magazine) */
.grid-edito { display:grid; gap:2px 40px; grid-template-columns:1.6fr 1fr 1fr; }
@media (max-width:900px){ .grid-edito { grid-template-columns:1fr; } }

/* ── liste numérotée éditoriale ─────────────── */
.steps { list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li {
  max-width:none; counter-increment:s;
  display:grid; grid-template-columns:60px 1fr; gap:20px;
  padding:26px 0; border-top:1px solid var(--rule);
}
.steps li::before {
  content:counter(s, decimal-leading-zero);
  font-family:var(--serif); font-size:30px; line-height:1; color:#C9B79E;
}
.steps li p { max-width:var(--measure); }

/* ── navigation ─────────────────────────────── */
nav a { border-bottom:0; color:var(--ink); font-size:14px; }
nav a:hover, nav a[aria-current="page"] { color:var(--accent); }
@media (max-width:640px) {
  nav a { min-height:var(--tap); display:inline-flex; align-items:center; }
}

/* ── top bar (refonte sept. 2026) ────────────── */
#topbar {
  background:var(--ink); color:var(--paper); text-align:center;
  font-size:0.85rem; line-height:1.5; padding:0.6rem 1rem;
}
#topbar a { color:var(--accent-bright, var(--accent)); font-weight:700; text-decoration:none; white-space:nowrap; margin-left:0.4em; }
#topbar a:hover { text-decoration:underline; }
@media (max-width:480px) {
  #topbar { font-size:0.78rem; padding:0.55rem 0.75rem; }
}
@media (max-width:768px) {
  nav ul#nav-menu li a { min-height:48px; display:flex; align-items:center; width:100%; }
  nav .nav-toggle { min-width:48px; min-height:48px; display:flex; align-items:center; justify-content:center; }
}

/* ── formulaire ─────────────────────────────── */
input, button, textarea, select { font:inherit; }
input[type="email"], input[type="text"] {
  width:100%; max-width:420px; min-height:var(--tap); padding:13px 16px;
  background:var(--paper); border:1px solid var(--ink); color:var(--ink);
}
input:focus-visible, a:focus-visible, button:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
.field-help { font-size:13px; color:var(--muted); margin-top:6px; }

/* ── images ─────────────────────────────────── */
img { max-width:100%; height:auto; display:block; }
img.portrait { border-radius:50% !important; } /* seule exception aux angles vifs */

/* ── mobile ─────────────────────────────────── */
@media (max-width:640px) {
  body { font-size:17px; line-height:1.7; }
  h1, h2 { max-width:none; }
  .pilier { grid-template-columns:auto 1fr; }
  .pilier .arrow { display:none; }
  .steps li { grid-template-columns:44px 1fr; gap:14px; }
  .actions { flex-direction:column; align-items:flex-start; gap:16px; }
  blockquote { font-size:26px; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
}

/* ── nav : bouton « Réserver un appel » (étape 1 refonte, sept. 2026) ── */
nav ul#nav-menu li a.nav-cta {
  display:inline-block; background:var(--ink); color:var(--paper);
  padding:0.65rem 1.2rem; border-radius:2px; font-size:0.82rem; font-weight:600;
  letter-spacing:0.03em; text-transform:none; white-space:nowrap; width:auto;
}
nav ul#nav-menu li a.nav-cta:hover { background:var(--accent); color:var(--paper); }
@media (max-width:768px) {
  nav ul#nav-menu li a.nav-cta { display:flex; justify-content:center; width:100%; }
}
body { margin:0; }
nav ul#nav-menu { padding-left:0; }