/* =========================================================
   1. RESET MODERNE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible {
  outline: 2px solid #5a4a20;
  outline-offset: 2px;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
input, select, textarea { font: inherit; }
:focus { outline: none; }

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   2. VARIABLES (palette + fonts + spacings + breakpoints)
   ========================================================= */
:root {
  /* Neutres */
  --noir:       #0e0e0e;
  --noir-soft:  #2a2a2a;
  --gris-text:  #6b6b6b;
  --gris-line:  #e8e8e8;
  --blanc:      #fafafa;
  --creme:      #f4f1ec;
  --accent:     #b8924c; /* or laiton */
  --accent-text: #5a4a20; /* or foncé pour texte sur fond clair · WCAG AA 4.5:1+ */

  /* Fonts */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif;

  /* Échelle typographique fluide */
  --font-h1:      clamp(2.375rem, 5.2vw, 4rem);      /* 38 → 64 */
  --font-h2:      clamp(1.75rem, 3vw, 2.625rem);     /* 28 → 42 */
  --font-h2-poet: clamp(1.375rem, 2.2vw, 1.875rem);  /* 22 → 30 italic */
  --font-h3:      clamp(1.3125rem, 2vw, 1.625rem);   /* 21 → 26 */
  --font-lead:    clamp(1.0625rem, 1.4vw, 1.1875rem);/* 17 → 19 */
  --font-body:    1.0625rem;                         /* 17 */
  --font-small:   0.875rem;                          /* 14 */
  --font-mini:    0.75rem;                           /* 12 */
  --font-step-num: clamp(2.5rem, 4.4vw, 3.5rem);     /* 40 → 56 numéro 01-04 */

  /* Spacings */
  --space-xs:   0.5rem;   /* 8  */
  --space-sm:   1rem;     /* 16 */
  --space-md:   2rem;     /* 32 */
  --space-lg:   4rem;     /* 64 */
  --space-xl:   6rem;     /* 96 */
  --space-2xl:  8rem;     /* 128 */

  /* Easing */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   3. BASE
   ========================================================= */
html, body {
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--sans);
  font-size: var(--font-body);
  line-height: 1.6;
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--noir);
}

h1 {
  font-size: var(--font-h1);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--font-h2);
  line-height: 1.15;
}

h2.poetic {
  font-style: italic;
  font-size: var(--font-h2-poet);
  font-weight: 400;
  line-height: 1.3;
  color: var(--noir-soft);
}

h3 {
  font-size: var(--font-h3);
  line-height: 1.25;
}

p {
  font-size: var(--font-body);
  line-height: 1.6;
  color: var(--noir);
}

p.lead { font-size: var(--font-lead); line-height: 1.55; }
p.muted { color: var(--gris-text); }

.overline {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--font-mini);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-text);
}

/* =========================================================
   4. LAYOUT HELPERS
   ========================================================= */
.container,
.container-narrow,
.container-tight {
  width: 100%;
  margin-inline: auto;
  padding-inline: 24px;
}
.container        { max-width: 1180px; }
.container-narrow { max-width: 880px;  }
.container-tight  { max-width: 680px;  }

@media (min-width: 768px) {
  .container, .container-narrow, .container-tight { padding-inline: 32px; }
}

section {
  padding-block: var(--space-lg);
}

@media (min-width: 1025px) {
  section { padding-block: var(--space-xl); }
}

/* =========================================================
   5. COMPONENTS
   ========================================================= */
/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 28px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--noir);
  background: transparent;
  color: var(--noir);
  cursor: pointer;
  transition: background-color 200ms var(--ease),
              color 200ms var(--ease),
              border-color 200ms var(--ease),
              transform 200ms var(--ease);
}
.btn-primary { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--noir); }

.btn-secondary { background: transparent; color: var(--noir); border-color: var(--noir); }
.btn-secondary:hover,
.btn-secondary:focus-visible { background: var(--noir); color: var(--blanc); }

.btn-on-dark { color: var(--blanc); border-color: var(--blanc); }
.btn-on-dark.btn-primary { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.btn-on-dark.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--noir); }
.btn-on-dark.btn-secondary { background: transparent; color: var(--blanc); border-color: var(--blanc); }
.btn-on-dark.btn-secondary:hover { background: var(--blanc); color: var(--noir); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--space-md);
}

/* Lien sobre */
.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--noir);
  font-weight: 500;
  font-size: var(--font-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.link:hover, .link:focus-visible { color: var(--accent-text); border-bottom-color: var(--accent-text); }
.link.on-dark { color: var(--blanc); }
.link.on-dark:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); }

/* Signature commerciale */
.signature {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--font-lead);
  line-height: 1.4;
  color: var(--noir);
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  margin-block: var(--space-md);
}
.signature.on-dark { color: var(--creme); }

/* Card */
.card {
  background: var(--blanc);
  padding: var(--space-md);
  border: 1px solid var(--gris-line);
  transition: border-color 200ms var(--ease);
}
.card:hover { border-color: var(--accent-text); }

/* Step number */
.step-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--font-step-num);
  line-height: 1;
  color: var(--accent-text);
  letter-spacing: -0.01em;
}

/* Placeholder visuel (image absente) */
.ph {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #d8cfc2 0%, #b9ad99 100%);
  position: relative;
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: var(--font-small);
  font-weight: 500;
  color: rgba(14,14,14,0.55);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
}
.ph-bw {
  background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
}
.ph-bw::after { color: rgba(250,250,250,0.55); }

/* Image réelle dans .ph (remplace le placeholder gradient) */
.ph.has-img {
  position: relative;
  background: var(--gris-line); /* fallback si l'image ne charge pas */
}
.ph.has-img::after {
  display: none; /* masque le label data-label quand img présente */
}
.ph.has-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ph.has-img.ph-bw img {
  filter: grayscale(1) contrast(1.05);
}

.ph-1-1 { aspect-ratio: 1 / 1; }
.ph-4-3 { aspect-ratio: 4 / 3; }
.ph-3-4 { aspect-ratio: 3 / 4; }
.ph-3-2 { aspect-ratio: 3 / 2; }

/* Bandeau */
.bandeau {
  background: var(--noir);
  color: var(--creme);
  text-align: center;
  padding: 14px 16px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--font-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bandeau .sep { color: var(--accent-text); margin-inline: 10px; }

/* =========================================================
   6. SECTIONS
   ========================================================= */



/* HEADER · 2 étages (utility + main nav) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-line);
}

/* Étage 1 · utilitaire */
.header-utility {
  background: var(--creme);
  border-bottom: 1px solid var(--gris-line);
  height: 36px;
  display: none;
}
@media (min-width: 768px) {
  .header-utility { display: block; }
}
.header-utility-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}
.utility-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.utility-search label {
  position: absolute;
  width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.utility-search .icon {
  flex: 0 0 auto;
  color: var(--gris-text);
}
.utility-search input[type="search"] {
  width: 100%;
  max-width: 240px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--noir);
  padding: 4px 0;
  transition: border-color 200ms var(--ease);
}
.utility-search input[type="search"]::placeholder {
  color: var(--gris-text);
  font-weight: 400;
}
.utility-search input[type="search"]:focus {
  border-bottom-color: var(--accent-text);
}
.utility-zone {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-text);
  flex: 1 1 auto;
  text-align: center;
}
.utility-zone .sep {
  color: var(--accent-text);
  margin-inline: 8px;
}
.utility-actions {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}
.utility-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--noir);
  transition: color 200ms var(--ease);
}
.utility-link:hover,
.utility-link:focus-visible {
  color: var(--accent-text);
}
.utility-link svg {
  flex: 0 0 auto;
}

/* Étage 2 · nav principale */
.header-main {
  background: var(--blanc);
  padding-block: 14px;
}
.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--noir); flex-shrink: 0; }
.brand-logo {
  display: block;
  height: 32px;
  width: auto;
  flex: 0 0 auto;
}
.brand-tagline {
  display: none;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-text);
  border-left: 1px solid var(--gris-line);
  padding-left: 14px;
  line-height: 1.3;
  max-width: 140px;
}
@media (min-width: 1100px) { .brand-tagline { display: inline-block; } }
.primary-nav {
  display: none;
  gap: 28px;
}
@media (min-width: 1100px) { .primary-nav { display: inline-flex; } }
.primary-nav a {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--noir);
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--accent-text);
  border-bottom-color: var(--accent-text);
}
.btn-compact {
  min-height: 40px;
  padding: 10px 18px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-actions .btn-secondary.btn-compact {
  display: none;
}
@media (min-width: 1025px) {
  .header-actions .btn-secondary.btn-compact {
    display: inline-flex;
  }
}
.menu-burger {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--noir);
  background: transparent;
  cursor: pointer;
}
.menu-burger span,
.menu-burger span::before,
.menu-burger span::after {
  content: '';
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--noir);
  position: relative;
}
.menu-burger span::before { top: -6px; position: absolute; left: 0; width: 18px; }
.menu-burger span::after  { top: 6px;  position: absolute; left: 0; width: 18px; }
@media (min-width: 1025px) {
  .menu-burger { display: none; }
}