/* ==========================================================================
   L'Administrateur : feuille de style principale
   Référence : guide-design.html (racine du projet)
   ========================================================================== */

/* ---------- Polices (auto-hébergées, aucune requête vers un tiers) ---------- */
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
/* Palette « haussmannienne » : pierre de taille, fer forgé, vert Wallace, laiton, zinc des toits */
:root {
  /* Couleurs de marque */
  --ink: #26302B;            /* Fer forgé : texte principal (jamais de noir pur) */
  --stone: #F4F0E7;          /* Pierre de taille : fond de page (jamais de blanc pur) */
  --stone-light: #FBF9F4;    /* Pierre claire : cartes, champs de formulaire */
  --stone-deep: #E8E1D2;     /* Pierre ombrée : sections alternées */
  --green: #1F4434;          /* Vert Wallace : boutons, sections sombres, couleur d'action */
  --green-dark: #172E24;     /* Vert profond : pied de page */
  --leaf: #2D6A4B;           /* Vert feuille : liens, focus, coches */
  --sage: #AEE2C1;           /* Sauge (couleur historique) : accent sur fond vert */
  --sage-tint: #E4F1E7;      /* Sauge pâle : encadrés */
  --brass: #B08A4E;          /* Laiton : détails décoratifs uniquement, jamais pour du texte */
  --zinc: #525E66;           /* Zinc : texte secondaire */
  --line: #D9D1C1;           /* Joints de pierre : filets et bordures */
  --on-dark: #E6EDE8;        /* Texte sur fond vert */
  --on-dark-muted: #C3D3C9;  /* Texte secondaire sur fond vert */
  --white: #FFFFFF;

  /* Typographie */
  --font-display: "EB Garamond", "Garamond", "Times New Roman", serif;
  --font-text: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-small: 0.9375rem;     /* 15 px */
  --fs-body: 1.125rem;       /* 18 px */
  --fs-lead: 1.3125rem;      /* 21 px */
  --fs-h4: 1.25rem;
  --fs-h3: 1.75rem;
  --fs-h2: clamp(2.125rem, 1.6rem + 2vw, 3rem);
  --fs-h1: clamp(2.625rem, 1.8rem + 3.6vw, 4.5rem);

  /* Espacements (échelle de 8) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  /* Forme signature : reprise du logo (deux coins très arrondis, deux coins vifs) */
  --shape-lg: 3rem 0.375rem 3rem 0.375rem;
  --shape-md: 1.5rem 0.25rem 1.5rem 0.25rem;
  --shape-sm: 0.875rem 0.1875rem 0.875rem 0.1875rem;

  --measure: 40rem;
  --wrap: 74rem;
  --gutter: 1rem;
  --focus: 3px solid var(--leaf);
}
@media (min-width: 48em) { :root { --gutter: 2rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
main:focus { outline: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: var(--fs-h4); font-weight: 650; margin: 0 0 var(--space-1); line-height: 1.3; }
p, ul, ol, dl, address, table { margin: 0 0 var(--space-2); }
p { text-wrap: pretty; }
address { font-style: normal; }
strong { font-weight: 650; }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 2px; }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); max-width: 36em; }
.muted { color: var(--zinc); }
.small { font-size: var(--fs-small); }

.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;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -10rem; z-index: 100;
  background: var(--green); color: var(--white); padding: 0.75rem 1.25rem; border-radius: var(--shape-sm);
}
.skip-link:focus { top: 0.75rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.5rem;
  font: 600 1.0625rem/1.2 var(--font-text);
  text-decoration: none; border: 2px solid transparent; border-radius: var(--shape-sm);
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--green); color: var(--white); }
.btn--primary:hover { background: var(--green-dark); }
.btn--secondary { background: transparent; color: var(--green); border-color: currentColor; }
.btn--secondary:hover { background: var(--stone-deep); }
.btn--light { background: var(--sage); color: var(--green-dark); }
.btn--light:hover { background: var(--stone-light); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn--ghost-light:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ---------- En-tête ---------- */
.topbar { background: var(--green-dark); color: var(--on-dark); font-size: var(--fs-small); }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: 2.5rem; }
.topbar__note { margin: 0; display: none; }
.topbar__links { display: flex; gap: var(--space-3); margin: 0 0 0 auto; padding: 0; list-style: none; }
.topbar a { color: var(--white); text-decoration: none; display: inline-block; padding-block: 0.4rem; }
.topbar a:hover { text-decoration: underline; }
.topbar :focus-visible { outline-color: var(--sage); }
@media (min-width: 48em) { .topbar__note { display: block; } }

.site-header { background: var(--stone); border-bottom: 1px solid var(--line); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 0.875rem; flex-wrap: wrap; }
.brand { text-decoration: none; flex-shrink: 0; }

.brand img { width: 4.25rem; height: 4.25rem; }
@media (min-width: 48em) { .brand img { width: 5.25rem; height: 5.25rem; } }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.1rem; }
.main-nav a:not(.btn) {
  display: inline-block; padding-block: 0.5rem; color: var(--ink); text-decoration: none; font-weight: 500;
  border-bottom: 2px solid transparent;
}
.main-nav a:not(.btn):hover { border-bottom-color: var(--brass); }
.main-nav a[aria-current="page"]:not(.btn) { border-bottom-color: var(--green); color: var(--green); }
.main-nav__cta { margin-left: 0.5rem; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.5rem 0.9rem;
  background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--shape-sm);
  font: 600 1rem var(--font-text); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative; transition: transform .2s;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Menu mobile : seulement si JavaScript est actif (sinon le menu reste visible) */
@media (max-width: 74.99em) {
  .js .nav-toggle { display: inline-flex; }
  .js .main-nav { display: none; width: 100%; }
  .js .main-nav.is-open { display: block; }
  .js .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--space-1) var(--space-2); }
  .js .main-nav li { border-top: 1px solid var(--line); }
  .js .main-nav a:not(.btn) { display: block; padding-block: 0.85rem; border-bottom: 0; }
  .js .main-nav a[aria-current="page"]:not(.btn) { box-shadow: inset 4px 0 0 var(--green); padding-left: 0.85rem; }
  .js .main-nav__cta { margin: var(--space-2) 0 0; border-top: 0 !important; }
  .js .main-nav__cta .btn { width: 100%; }
}
@media (min-width: 75em) { .nav-toggle { display: none !important; } .main-nav a:not(.btn) { font-size: 1.0625rem; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-6); }
.section--tint { background: var(--sage-tint); }
.section--stone { background: var(--stone-deep); }
.section--ink { background: var(--green); color: var(--on-dark); }
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--ink a:not(.btn) { color: var(--sage); }
.section--ink :focus-visible { outline-color: var(--sage); }
.section__head { max-width: 44rem; margin-bottom: var(--space-5); }
.section__head p { color: var(--zinc); font-size: var(--fs-lead); line-height: 1.5; }
.section--ink .section__head p { color: var(--on-dark-muted); }
@media (min-width: 48em) { .section { padding-block: var(--space-7); } }

/* ---------- Accueil : héro photographique ---------- */
.hero { position: relative; isolation: isolate; background: var(--green-dark); color: var(--on-dark); padding-block: var(--space-6); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23,46,36,.90) 0%, rgba(23,46,36,.82) 100%);
}
.hero__grid { display: grid; gap: var(--space-5); align-items: center; }
.hero h1 { color: var(--white); max-width: 14ch; }
.hero .lead { color: var(--on-dark); }
.hero :focus-visible { outline-color: var(--sage); }
.hero__contact { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--on-dark-muted); }
.hero__contact a { color: var(--white); font-weight: 600; }
@media (min-width: 60em) {
  .hero { padding-block: var(--space-7); min-height: 38rem; display: flex; align-items: center; }
  .hero > .wrap { width: 100%; }
  .hero::before { background: linear-gradient(90deg, rgba(23,46,36,.94) 0%, rgba(23,46,36,.86) 50%, rgba(23,46,36,.45) 100%); }
  .hero__grid { grid-template-columns: 1.35fr 1fr; gap: var(--space-6); }
}

/* Portrait signature */
.portrait { margin: 0; max-width: 18rem; }
.portrait__frame {
  position: relative; border-radius: var(--shape-lg); overflow: hidden; background: var(--stone-deep);
  aspect-ratio: 1; box-shadow: 1.25rem 1.25rem 0 0 var(--brass);
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait figcaption { margin-top: var(--space-4); font-size: var(--fs-small); line-height: 1.45; }
.portrait figcaption strong { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: inherit; }
.hero .portrait { justify-self: center; }
.hero .portrait figcaption strong { color: var(--white); }
.hero .portrait figcaption { background: rgba(23,46,36,.92); color: var(--on-dark); padding: 0.75rem 1rem; border-radius: var(--shape-sm); }
@media (min-width: 60em) { .hero .portrait { justify-self: end; } }

/* ---------- Engagements (liste à filets) ---------- */
.pledges { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pledges li { padding-block: var(--space-4); border-top: 1px solid var(--line); display: grid; gap: var(--space-1); }
.pledges h3 { margin: 0; }
.pledges p { margin: 0; color: var(--zinc); max-width: 36em; }
@media (min-width: 48em) {
  .pledges { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}

/* ---------- Services ---------- */
.services { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.service {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); background: var(--stone-light); border-radius: var(--shape-md); border: 1px solid var(--line);
}
.service--main { background: var(--green); color: var(--on-dark); border-color: var(--green); }
.service--main h3 { color: var(--white); }
.service--main a { color: var(--sage); }
.service--main :focus-visible { outline-color: var(--sage); }
.service h3 { margin: 0; }
.service ul { padding-left: 1.1rem; margin: 0; }
.service p { margin: 0; }
.service__link { margin-top: auto; padding-top: var(--space-2); font-weight: 600; }
@media (min-width: 60em) {
  .services { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ---------- Étapes (vraie séquence) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--space-2); align-items: start; }
.steps > li::before {
  content: counter(step);
  font: 600 2.75rem/1 var(--font-display); color: var(--green);
  border-top: 2px solid var(--green); padding-top: 0.5rem;
}
.steps h3 { font-size: 1.5rem; margin: 0.5rem 0 0.5rem; }
.steps p { margin: 0; color: var(--zinc); }
.section--ink .steps > li::before { color: var(--sage); border-color: var(--sage); }
.section--ink .steps p { color: var(--on-dark-muted); }
@media (min-width: 60em) { .steps--row { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

/* ---------- Témoignages ---------- */
.quotes { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.quote { margin: 0; padding: var(--space-4); background: var(--stone-light); border-radius: var(--shape-md); border-left: 4px solid var(--brass); }
.quote blockquote { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; font-weight: 500; }
.quote figcaption { font-size: var(--fs-small); color: var(--zinc); }
@media (min-width: 60em) { .quotes { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Zone d'intervention ---------- */
.zone { display: grid; gap: var(--space-4); }
.zone__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.zone__list li { padding: 0.35rem 0.9rem; background: var(--stone-light); border: 1px solid var(--line); border-radius: var(--shape-sm); font-size: var(--fs-small); }
@media (min-width: 60em) { .zone { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

/* ---------- Bandeau d'appel (photo de toits végétalisés sous un voile vert) ---------- */
.cta-band { position: relative; isolation: isolate; background: var(--green); color: var(--white); padding-block: var(--space-6); overflow: hidden; }
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(31,68,52,.9); }
.cta-band__inner { display: grid; gap: var(--space-3); align-items: center; }
.cta-band h2 { color: var(--white); margin: 0; max-width: 20ch; }
.cta-band p { margin: 0; color: var(--on-dark); }
.cta-band :focus-visible { outline-color: var(--sage); }
@media (min-width: 60em) { .cta-band__inner { grid-template-columns: 1.3fr 1fr; gap: var(--space-6); } }

/* Zone d'intervention avec photo */
.zone__media { margin: 0; border-radius: var(--shape-lg); overflow: hidden; aspect-ratio: 3 / 2; }
.zone__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- En-tête de page intérieure ---------- */
.page-head { padding-block: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); background: var(--stone); }
.page-head h1 { max-width: 20ch; margin-top: var(--space-3); }
.page-head .lead { color: var(--zinc); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; font-size: var(--fs-small); color: var(--zinc); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.35rem; color: var(--line); }
.breadcrumb a { color: var(--zinc); }
.breadcrumb [aria-current] { color: var(--ink); }

.page-head--image .page-head__grid { display: grid; gap: var(--space-4); align-items: center; }
.page-head__media { margin: 0; border-radius: var(--shape-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 1rem 1rem 0 0 var(--sage-tint); }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 60em) { .page-head--image .page-head__grid { grid-template-columns: 1.3fr 1fr; gap: var(--space-6); } }

/* Mise en page à deux colonnes : contenu + encadré */
.layout-aside { display: grid; gap: var(--space-5); }
@media (min-width: 60em) { .layout-aside { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-6); align-items: start; } }
.aside-card { padding: var(--space-4); background: var(--sage-tint); border-radius: var(--shape-md); }
.aside-card h2 { font-size: 1.75rem; }
.aside-card .btn { width: 100%; margin-top: var(--space-1); }
@media (min-width: 60em) { .aside-card { position: sticky; top: var(--space-3); } }

/* ---------- Texte éditorial ---------- */
.prose h2 { font-size: 2.125rem; margin-top: var(--space-5); }
.prose h3 { font-size: 1.5rem; margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.prose li::marker { color: var(--green); }
.prose > :first-child { margin-top: 0; }
.prose blockquote { margin: var(--space-4) 0; padding-left: var(--space-3); border-left: 3px solid var(--brass); font-family: var(--font-display); font-size: 1.5rem; line-height: 1.35; }
.check-list { list-style: none; padding: 0 !important; }
.check-list li { position: relative; padding-left: 1.75rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 0.9rem; height: 0.5rem;
  border-left: 2px solid var(--leaf); border-bottom: 2px solid var(--leaf); transform: rotate(-45deg);
}

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; margin-bottom: var(--space-3); }
table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
caption { text-align: left; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; padding-bottom: var(--space-2); }
th, td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: var(--fs-small); color: var(--zinc); font-weight: 600; border-bottom: 2px solid var(--ink); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }

/* ---------- FAQ ---------- */
.faq-group + .faq-group { margin-top: var(--space-5); }
.faq-group h2 { font-size: 2rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-weight: 600; font-size: 1.1875rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.5rem; top: 1.45rem; width: 0.6rem; height: 0.6rem;
  border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.faq details > div { padding: 0 0 var(--space-3); max-width: var(--measure); }

/* ---------- Guides ---------- */
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.guide-list li { border-top: 1px solid var(--line); padding-block: var(--space-4); }
.guide-list h2, .guide-list h3 { font-size: 1.875rem; margin-bottom: var(--space-1); }
.guide-list h2 a, .guide-list h3 a { color: var(--ink); text-decoration: none; }
.guide-list h2 a:hover, .guide-list h3 a:hover { color: var(--green); text-decoration: underline; }
.guide-list p { margin: 0; color: var(--zinc); max-width: 42em; }
.guide-list time { display: block; font-size: var(--fs-small); color: var(--zinc); margin-top: var(--space-1); }
@media (min-width: 60em) { .guide-list--grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-6); } }

.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--fs-small); color: var(--zinc); }
.article-meta img { width: 3rem; height: 3rem; border-radius: var(--shape-sm); object-fit: cover; }
.summary-box { padding: var(--space-3) var(--space-4); background: var(--stone-deep); border-radius: var(--shape-md); margin-bottom: var(--space-4); }
.summary-box p { margin: 0; }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: var(--space-3); max-width: 38rem; }
.field { display: grid; gap: 0.4rem; }
.field label, .field legend { font-weight: 600; }
.field .hint { font-size: var(--fs-small); color: var(--zinc); margin: 0; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--stone-light);
  border: 2px solid #7A827D; border-radius: 0.375rem; padding: 0.7rem 0.85rem; min-height: 3rem; width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--focus); outline-offset: 1px; border-color: var(--green); }
.field [aria-invalid="true"] { border-color: #B3261E; }
.field__error { color: #B3261E; font-weight: 600; font-size: var(--fs-small); margin: 0; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.75rem; }
.field--check input { width: 1.4rem; height: 1.4rem; min-height: 0; margin-top: 0.2rem; accent-color: var(--green); }
.field--check label { font-weight: 400; }
.form fieldset { border: 0; padding: 0; margin: 0; }
.radio-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.4rem; }
.radio-row label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 400; min-height: 2.75rem; }
.radio-row input { width: 1.25rem; height: 1.25rem; accent-color: var(--green); }
.req { color: #B3261E; }
.form-status { padding: var(--space-2) var(--space-3); border-radius: var(--shape-sm); font-weight: 600; }
.form-status:empty { display: none; }
.form-status--error { background: #FBEAE9; color: #8C1D18; }
.form-status--ok { background: var(--sage-tint); color: var(--leaf); }
.hp { position: absolute; left: -9999px; }

.contact-cards { display: grid; gap: var(--space-3); }
.contact-card { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--shape-md); background: var(--stone-light); }
.contact-card h2 { font-size: 1.5rem; margin-bottom: var(--space-1); }
.contact-card p { margin: 0; }
.contact-card a { font-weight: 600; font-size: 1.1875rem; }

/* ---------- Élément à compléter (visible tant qu'il n'est pas renseigné) ---------- */
.todo {
  display: inline; background: #FFF4CC; color: #5C4600; outline: 1px dashed #A07C00; outline-offset: 1px;
  padding: 0 0.25rem; border-radius: 2px; font-family: var(--font-text); font-size: 0.95em; font-style: normal;
}
.todo-block { padding: var(--space-2) var(--space-3); background: #FFF4CC; color: #5C4600; border: 1px dashed #A07C00; border-radius: var(--shape-sm); font-size: var(--fs-small); }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--green-dark); color: var(--on-dark-muted); padding-block: var(--space-6) var(--space-4); font-size: 1rem; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--sage); }
.site-footer__grid { display: grid; gap: var(--space-4); }
.site-footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.site-footer__grid ul a { display: inline-block; padding-block: 0.15rem; }
.site-footer__logo { width: 7.5rem; height: auto; margin-bottom: var(--space-2); }
.site-footer__id p { max-width: 22rem; }
.site-footer__title { font: 600 1rem var(--font-text); color: var(--sage); margin-bottom: var(--space-2); }
.site-footer__hours { margin-top: var(--space-1); }
.site-footer__legal { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid #2E4A3D; font-size: 0.875rem; }
.site-footer__legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; }
.site-footer__legal a { text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer .todo { background: #FFF4CC; }
@media (min-width: 48em) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- Utilitaires ---------- */
.stack > * + * { margin-top: var(--space-3); }
.two-col { display: grid; gap: var(--space-5); }
@media (min-width: 60em) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--space-4) !important; }

/* ---------- Préférences utilisateur ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .btn, .service, .aside-card { border: 2px solid CanvasText; }
  .portrait__frame { box-shadow: none; }
}
@media print {
  .topbar, .main-nav, .nav-toggle, .cta-band, .site-footer nav { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .hero, .section--ink { background: #fff; color: #000; }
  .hero::before, .hero__bg, .cta-band__bg { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}