:root {
  --ink: #17231f;
  --muted: #64716c;
  --paper: #f6f3ec;
  --surface: #fffdf8;
  --accent: #176b56;
  --accent-dark: #0f4d3d;
  --warm: #d89b5b;
  --line: #d9ded9;
  --shadow: 0 24px 70px rgba(23, 35, 31, .12);
  --wide: 74rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 18rem; background: var(--paper); color: var(--ink); line-height: 1.65; }
a { color: var(--accent-dark); }
a:hover { color: var(--accent); }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: 1rem; transform: translateY(-180%); padding: .7rem 1rem; border-radius: .45rem; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.skip-link:focus { transform: none; }

.site-header,
.site-footer,
.page-shell { width: min(calc(100% - 2rem), var(--wide)); margin-inline: auto; }

.site-header { position: relative; z-index: 5; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); font-weight: 850; letter-spacing: -.025em; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 1.8rem; aspect-ratio: 1; border-radius: 50% 50% 50% .3rem; background: linear-gradient(145deg, var(--accent), var(--warm)); transform: rotate(-8deg); box-shadow: inset 0 0 0 5px rgba(255,255,255,.38); }
.menu-toggle { display: none; margin-left: auto; border: 1px solid var(--line); border-radius: 99rem; padding: .55rem .85rem; background: var(--surface); color: var(--ink); font: inherit; font-weight: 750; cursor: pointer; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.site-nav li { position: relative; }
.site-nav a { display: block; padding: .55rem .75rem; border-radius: .45rem; color: var(--ink); font-size: .94rem; font-weight: 680; text-decoration: none; }
.site-nav a:hover,
.site-nav a:focus-visible { background: rgba(23, 107, 86, .09); color: var(--accent-dark); }
.site-nav ul ul { position: absolute; top: calc(100% + .4rem); left: 0; display: none; min-width: 13rem; padding: .45rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); box-shadow: 0 16px 38px rgba(23,35,31,.14); }
.site-nav li:hover > ul,
.site-nav li:focus-within > ul { display: block; }

.minimal-header { padding-block: .85rem; border-bottom-style: dashed; }
.minimal-header .brand { font-family: Georgia, serif; font-weight: 700; }
.hero-header { flex-wrap: wrap; overflow: hidden; padding-bottom: clamp(3.5rem, 8vw, 7rem); }
.hero-header::after { position: absolute; z-index: -1; right: 3%; bottom: 8%; width: clamp(8rem, 20vw, 15rem); aspect-ratio: 1; border: 1px solid rgba(23,107,86,.28); border-radius: 50%; box-shadow: 0 0 0 2.2rem rgba(23,107,86,.04), 0 0 0 4.4rem rgba(216,155,91,.04); content: ""; }
.hero-copy { flex-basis: 100%; padding-top: clamp(2.5rem, 8vw, 7rem); }
.hero-title { max-width: 13ch; margin: .25rem 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem, 8vw, 6.8rem); font-weight: 500; letter-spacing: -.055em; line-height: .96; }
.hero-line { display: block; width: min(9rem, 32vw); height: .3rem; margin-top: 1.5rem; border-radius: 1rem; background: linear-gradient(90deg, var(--accent), var(--warm)); }

.page-shell { min-height: 55vh; padding: clamp(4rem, 9vw, 8rem) 0; }
.page-heading { max-width: 52rem; margin-bottom: 2.2rem; }
.page-heading h1 { margin: .2rem 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.5rem, 7vw, 5.7rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.eyebrow { margin: 0; color: var(--accent); font-size: .78rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.page-intro { max-width: 42rem; margin: 1.25rem 0 0; color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.35rem); }
.page-content { max-width: 50rem; font-size: 1.08rem; overflow-wrap: anywhere; }
.content-card { padding: clamp(1.4rem, 4vw, 2.5rem); border-left: .3rem solid var(--warm); border-radius: 0 .8rem .8rem 0; background: rgba(255,253,248,.72); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3rem, 7vw, 6rem); }
.feature-grid article { position: relative; min-height: 13rem; padding: 1.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.feature-grid article > span { position: absolute; right: 1rem; top: .3rem; color: rgba(23,107,86,.12); font-family: Georgia, serif; font-size: 4.5rem; line-height: 1; }
.feature-grid h2 { position: relative; margin: 4rem 0 .4rem; font-size: 1.15rem; }
.feature-grid p { position: relative; margin: 0; color: var(--muted); }

.site-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 2.5rem 0; border-top: 1px solid var(--line); color: var(--muted); }
.footer-brand { color: var(--ink); font-size: 1.12rem; font-weight: 850; text-decoration: none; }
.site-footer p { max-width: 24rem; margin: .35rem 0 0; }
.footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; font-size: .88rem; }
.site-footer.compact { align-items: center; padding-block: 1.35rem; font-size: .88rem; }

/* Le layout boxed met tout le site dans une carte centrale, sans asset supplémentaire. */
.layout-boxed { padding: clamp(.7rem, 3vw, 2.5rem); background: linear-gradient(145deg, #dce8e2, #eee4d6); }
.site-frame { max-width: 78rem; min-height: calc(100vh - clamp(1.4rem, 6vw, 5rem)); margin-inline: auto; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: clamp(.8rem, 2vw, 1.5rem); background: var(--surface); box-shadow: var(--shadow); }
.layout-boxed .site-header,
.layout-boxed .site-footer,
.layout-boxed .page-shell { width: min(calc(100% - clamp(2rem, 8vw, 7rem)), 66rem); }
.layout-boxed .feature-grid article { background: var(--paper); }

/* Le layout editorial place l’identité sur un rail et le contenu dans une grande colonne. */
.editorial-shell { display: grid; grid-template-columns: minmax(17rem, 28rem) minmax(0, 1fr); min-height: 75vh; }
.editorial-rail { padding: clamp(1.5rem, 4vw, 4rem); background: var(--ink); color: var(--surface); }
.editorial-rail .site-header { position: sticky; top: 2rem; display: block; width: 100%; padding: 0; border: 0; }
.editorial-rail .brand { color: var(--surface); font-size: 1.2rem; }
.editorial-rail .site-nav { margin: clamp(3rem, 8vh, 6rem) 0 0; }
.editorial-rail .site-nav ul { display: block; }
.editorial-rail .site-nav li + li { margin-top: .35rem; }
.editorial-rail .site-nav a { color: #e9f0ed; }
.editorial-rail .site-nav a:hover,
.editorial-rail .site-nav a:focus-visible { background: rgba(255,255,255,.1); color: #fff; }
.editorial-rail .site-nav ul ul { position: static; display: block; min-width: 0; margin-left: 1rem; padding: .2rem 0; border: 0; background: transparent; box-shadow: none; }
.layout-editorial #contenu { min-width: 0; background: var(--surface); }
.layout-editorial .page-shell { width: min(calc(100% - clamp(2rem, 10vw, 9rem)), 58rem); }
.layout-editorial .site-footer { width: 100%; padding-inline: clamp(1rem, 5vw, 5rem); background: var(--paper); }
.layout-editorial .hero-header::after { display: none; }
.layout-editorial .hero-copy { padding-top: clamp(3rem, 8vh, 6rem); }
.layout-editorial .hero-title { font-size: clamp(2.4rem, 5vw, 5rem); }

a:focus-visible,
button:focus-visible { outline: 3px solid var(--warm); outline-offset: 3px; }

@media (max-width: 58rem) {
  .editorial-shell { grid-template-columns: 1fr; }
  .editorial-rail { padding: 0 1rem; }
  .editorial-rail .site-header { position: relative; top: auto; display: flex; width: min(100%, var(--wide)); padding: 1.2rem 0; }
  .editorial-rail .site-nav { margin: 0 0 0 auto; }
  .editorial-rail .site-nav ul { display: flex; }
  .editorial-rail .site-nav ul ul { position: absolute; display: none; margin: 0; padding: .45rem; background: var(--ink); }
  .editorial-rail .site-nav li:hover > ul,
  .editorial-rail .site-nav li:focus-within > ul { display: block; }
}

@media (max-width: 42rem) {
  .site-header { flex-wrap: wrap; }
  .menu-toggle { display: block; }
  .site-nav { flex-basis: 100%; margin: 0; }
  .site-nav ul,
  .editorial-rail .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav ul ul,
  .editorial-rail .site-nav ul ul { position: static; display: block; margin-left: .8rem; padding: .15rem 0 .15rem .6rem; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  .is-collapsible .site-nav { display: none; }
  .is-collapsible .site-nav.is-open { display: block; }
  .hero-header { padding-bottom: 3.5rem; }
  .hero-copy { padding-top: 2.5rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article { min-height: 10.5rem; }
  .site-footer,
  .site-footer.compact { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .footer-meta { align-items: flex-start; }
  .layout-boxed { padding: .45rem; }
  .site-frame { border-radius: .8rem; }
  .layout-boxed .site-header,
  .layout-boxed .site-footer,
  .layout-boxed .page-shell { width: calc(100% - 2rem); }
  .editorial-rail .site-nav { flex-basis: 100%; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}