/* Au Beau Bouleau — monde « plan d'atelier ». Fond papier froid, encre
   graphite pour les titres et les filets, un seul accent ambre machine
   réservé aux repères (traits de cote, points, chevrons) — jamais au texte.
   Newsreader/serif pour les titres, Karla/sans pour le texte. Tout en
   oklch() : supporté par tous les navigateurs modernes, pas de build step. */

:root {
  --color-bg: oklch(0.972 0.004 240);
  --color-bg-card: oklch(0.988 0.003 240);
  --color-bg-callout: oklch(0.95 0.005 240);
  --color-ink: oklch(0.23 0.012 255);
  --color-text: oklch(0.24 0.012 255);
  --color-text-body: oklch(0.34 0.012 255);
  --color-text-muted: oklch(0.45 0.012 255);
  --color-text-mutedmore: oklch(0.5 0.015 255);
  --color-text-faint: oklch(0.52 0.014 255);

  --color-accent: oklch(0.46 0.095 62);
  --color-accent-hover: oklch(0.36 0.08 60);
  --color-accent-strong: oklch(0.44 0.09 60);
  --color-accent-btn: oklch(0.26 0.014 255);
  --color-accent-btn-hover: oklch(0.18 0.012 255);
  --color-on-accent: oklch(0.98 0.003 240);

  --color-mark: oklch(0.72 0.15 68);

  --color-border: oklch(0.9 0.005 250);
  --color-border-strong: oklch(0.81 0.008 250);
  --color-border-btn: oklch(0.79 0.008 250);
  --color-border-field: oklch(0.6 0.013 250); /* ≥3:1 sur le fond papier — bords de champs et bouton outline */

  --map-ink: oklch(0.34 0.01 255);
  --map-terrain: oklch(0.56 0.015 250);
  --map-river-rhone: oklch(0.68 0.075 232);
  --map-river-drome: oklch(0.7 0.07 228);
  --map-region: oklch(0.58 0.09 235);

  --color-error: oklch(0.5 0.16 29);
  --color-ok: oklch(0.45 0.1 145);

  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container-max: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-hover); }
input, textarea, button, select { font: inherit; color: inherit; }
/* opacity: 1 neutralise le 0.54 par défaut de Firefox sur ::placeholder,
   qui sinon fait passer le texte indicatif sous le seuil de contraste AA. */
::placeholder { color: var(--color-text-faint); opacity: 1; }

/* Focus clavier visible sur tous les éléments interactifs */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.btn:focus-visible { outline-offset: 3px; }
.btn--primary:focus-visible { outline-color: var(--color-mark); }

@media (prefers-reduced-motion: reduce) {
  .chev { transition: none; }
}

/* Lien d'évitement */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--color-accent-btn); color: var(--color-on-accent);
  padding: 10px 16px; border-radius: 3px; text-decoration: none; font-size: 14px;
  transition: top 120ms ease;
}
.skip-link:focus { top: 12px; }
.skip-link:hover, .skip-link:focus { color: var(--color-on-accent); }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

.page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0 0;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.brand-name { font-family: var(--font-serif); font-size: 23px; font-weight: 500; letter-spacing: -0.01em; }
a.brand-name { color: var(--color-text); text-decoration: none; }
a.brand-name:hover { color: var(--color-accent); }
.brand-place { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-mutedmore); }

.site-nav { display: flex; gap: 8px 26px; font-size: 14.5px; color: var(--color-text-muted); flex-wrap: wrap; }
.site-nav a { display: inline-block; padding: 7px 0; text-decoration: none; color: inherit; }
.site-nav a:hover { color: var(--color-accent); }

/* ---------- Section shell ---------- */

.section { padding: 76px 0; }
.section--border { border-top: 1px solid var(--color-border); }
section[id] { scroll-margin-top: 48px; }
.section-title { margin: 0 0 30px; font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }

/* En-tête de section : le titre (et parfois un chapô) sur toute la largeur,
   jamais isolé dans une colonne de grille. */
.section-head { margin-bottom: 46px; max-width: 62ch; }
.section-head .section-title { margin: 0; }
.section-head .section-title + .lead,
.section-head .section-title + .section-intro { margin: 16px 0 0; }

.subhead { margin: 0 0 22px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.subhead--serif { font-family: var(--font-serif); font-weight: 400; font-size: 26px; letter-spacing: normal; text-transform: none; color: var(--color-text); }

.split { display: grid; gap: 56px; align-items: start; }
.split--narrow-left { grid-template-columns: 0.85fr 1.15fr; }
.split--wide-left { grid-template-columns: 1.35fr 1fr; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--contact { grid-template-columns: 0.8fr 1.2fr; }

.prose { display: grid; gap: 22px; font-size: 17px; line-height: 1.7; color: var(--color-text-body); max-width: 60ch; }
.prose p { margin: 0; }

.lead { margin: 0 0 20px; font-size: 18.5px; line-height: 1.65; max-width: 46ch; color: var(--color-text-body); }
/* chapô de #zone : même taille de texte que .prose */
.lead--section { max-width: 60ch; font-size: 17px; line-height: 1.7; }

/* ---------- Hero ---------- */

.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 92px 0 76px; }
.hero h1 { margin: 0 0 26px; font-family: var(--font-serif); font-weight: 400; font-size: 58px; line-height: 1.08; letter-spacing: -0.02em; text-wrap: pretty; }
.hero-figure { margin: 0; }
.hero-figure img { width: 100%; height: 500px; object-fit: cover; border-radius: 3px; }

figcaption { margin-top: 12px; font-size: 13px; color: var(--color-text-mutedmore); }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.btn { display: inline-block; text-decoration: none; padding: 15px 26px; border-radius: 3px; font-size: 15.5px; cursor: pointer; border: 1px solid transparent; }
.btn--primary { background: var(--color-accent-btn); color: var(--color-on-accent); font-weight: 500; }
.btn--primary:hover { background: var(--color-accent-btn-hover); color: var(--color-on-accent); }
.btn--outline { border-color: var(--color-border-field); color: var(--color-text-body); background: transparent; }
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-text); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Atelier ---------- */

.figure-wide { margin: 52px 0 0; }
.figure-wide img { width: 100%; height: 420px; object-fit: cover; border-radius: 3px; }
#atelier .figure-wide img { height: 384px; object-position: center 38%; }

/* Repères de l'atelier : pleine largeur (comme la photo), sans filet de séparation */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
.stat-icon { display: block; width: 24px; height: 24px; margin-bottom: 12px; color: var(--color-accent-strong); }
/* stat-title est un <h3> (voir index.html) : font-weight 400 pour garder le rendu */
.stat-title { margin: 0 0 5px; font-family: var(--font-serif); font-weight: 400; font-size: 25px; line-height: 1.2; }
.stat-desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--color-text-mutedmore); }

/* ---------- Services ---------- */

.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--color-border); }
.service-card { background: var(--color-bg-card); padding: 24px; }
.service-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 8px; }
.service-head svg { flex: none; margin-top: 3px; color: var(--color-accent-strong); }
/* service-name est un <h4> (voir index.html) : font-weight 400 pour garder le rendu */
.service-name { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.2; }
.service-desc { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }

.callout { background: var(--color-bg-callout); padding: 30px; border-radius: 3px; }
.callout p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.65; color: var(--color-text-body); }
.callout p:last-of-type { margin-bottom: 20px; }

.dot-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; font-size: 16px; color: var(--color-text-body); }
.dot-list li { display: flex; gap: 11px; align-items: baseline; }
.dot-list li::before { content: ""; width: 5px; height: 5px; background: var(--color-accent); border-radius: 50%; flex: none; transform: translateY(-3px); }

/* ---------- Réalisations ---------- */

.section-intro { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-text-muted); }
/* chapô Réalisations : une seule ligne pleine largeur (repli naturel sur écran étroit) */
#realisations .section-head { max-width: none; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: 300px; object-fit: cover; border-radius: 3px; }
.gallery figcaption { font-size: 14px; line-height: 1.5; margin-top: 11px; }
.gallery-wide { grid-column: span 2; }
.gallery-wide img { height: 380px; }
.gallery figure:nth-child(5) img { height: 380px; }

/* ---------- Zone d'intervention ---------- */

.map-figure { margin: 0; }
.map-svg { width: 100%; height: auto; aspect-ratio: 520 / 420; }
.map-river { fill: none; stroke-linecap: round; }
.map-river--rhone { stroke: var(--map-river-rhone); stroke-width: 5; }
.map-river--drome { stroke: var(--map-river-drome); stroke-width: 2.6; }
.map-road { fill: none; stroke: var(--map-ink); stroke-width: 1.6; stroke-linecap: round; }
.map-relief { fill: none; stroke: var(--map-terrain); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.map-town { fill: var(--color-bg); stroke: var(--color-accent); stroke-width: 1.4; }
.map-town--main { fill: var(--color-mark); stroke: var(--color-ink); }
.map-label { font-family: var(--font-serif); font-size: 17.5px; fill: var(--color-text); }
.map-label--center { text-anchor: middle; }
.map-label--main { font-size: 21px; }
.map-label--tiny { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--color-text-faint); text-anchor: start; }
.map-region { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--map-region); }
.map-relief-label { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--map-terrain); }
.map-relief-label--center { text-anchor: middle; }
.map-highway { font-size: 13px; letter-spacing: 0.14em; fill: var(--map-ink); }

.callout--steps { padding: 34px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.step-num { font-family: var(--font-serif); font-size: 20px; color: var(--color-accent); }
.steps span:last-child { font-size: 16px; line-height: 1.6; color: var(--color-text-body); }

/* ---------- FAQ ---------- */

/* FAQ : bloc centré sur la page */
#faq .section-head { max-width: 820px; margin-inline: auto; }
.faq-list { border-top: 1px solid var(--color-border-strong); padding-top: 8px; max-width: 820px; margin-inline: auto; }
.faq-list details { border-bottom: 1px solid var(--color-border); }
.faq-list summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--font-serif); font-size: 21px; line-height: 1.3; color: var(--color-text);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list p { margin: 0 0 22px; padding-right: 40px; max-width: 78ch; font-size: 16.5px; line-height: 1.7; color: var(--color-text-body); text-wrap: pretty; }

.chev { flex: none; width: 13px; height: 13px; margin-top: 8px; position: relative; transition: transform 180ms ease; }
.chev::before, .chev::after { content: ""; position: absolute; background: var(--color-accent-strong); }
.chev::before { left: 0; top: 6px; width: 13px; height: 1.4px; }
.chev::after { left: 6px; top: 0; width: 1.4px; height: 13px; }
details[open] .chev { transform: rotate(45deg); }

/* ---------- Contact ---------- */

.contact-info { display: grid; gap: 16px; font-size: 17px; line-height: 1.5; }
.contact-label { margin: 0 0 3px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-mutedmore); }
.contact-value { display: inline-block; padding: 3px 0; font-size: 21px; text-decoration: none; }
.contact-value--small { font-size: 17px; }
.contact-address { margin: 0; padding: 0; color: var(--color-text-body); }

.contact-form {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  padding: 32px; border-radius: 3px; display: grid; gap: 20px;
}
.contact-form label {
  display: grid; gap: 7px; font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted);
}
.label-text { display: inline; }
.label-hint {
  margin-left: 4px; font-size: 12px; letter-spacing: normal; text-transform: none;
  font-style: italic; color: var(--color-text-muted);
}
.label-hint--req { font-style: normal; color: var(--color-accent); }
.field-error {
  font-size: 13px; letter-spacing: normal; text-transform: none; line-height: 1.45;
  color: var(--color-error);
}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] { border-color: var(--color-error); }
.hp-field {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form input, .contact-form select {
  border: none; border-bottom: 1px solid var(--color-border-field); background: transparent;
  padding: 9px 0; font-size: 16.5px; letter-spacing: normal; text-transform: none; outline: none;
}
.contact-form input:focus, .contact-form select:focus { border-bottom-color: var(--color-accent); }
.contact-form textarea {
  border: 1px solid var(--color-border-field); background: transparent; padding: 12px;
  font-size: 16.5px; line-height: 1.55; letter-spacing: normal; text-transform: none; outline: none;
  resize: vertical; border-radius: 3px;
}
.contact-form textarea:focus { border-color: var(--color-accent); }
.form-footer { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-status { font-size: 14px; color: var(--color-text-muted); }
.form-status--error { color: var(--color-error); }
.form-status--ok { color: var(--color-ok); }
.form-status:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 2px; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 26px 0 44px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--color-text-mutedmore);
}
.site-footer a { display: inline-block; padding: 5px 0; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a[aria-current="page"] { color: var(--color-text); text-decoration: underline; }
.footer-links { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.footer-sep { color: var(--color-border-btn); }

/* ---------- Pages légales ---------- */

.legal { max-width: 70ch; margin: 0 auto; padding: 64px 0 32px; }
.legal .back-link { display: inline-block; margin-bottom: 30px; padding: 4px 0; font-size: 14px; }
.legal h1 { margin: 0 0 36px; }
.legal h2 {
  font-family: var(--font-serif); font-weight: 400; font-size: 21px; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--color-text); margin: 40px 0 12px;
}
.legal p { margin: 0 0 15px; max-width: 66ch; font-size: 16px; line-height: 1.72; color: var(--color-text-body); }
.legal address { font-style: normal; line-height: 1.75; color: var(--color-text-body); margin: 0 0 15px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 56px 0 48px; }
  .hero h1 { font-size: 42px; }
  .hero-figure img { height: 380px; }
  .split--narrow-left,
  .split--wide-left,
  .split--even,
  .split--contact { grid-template-columns: 1fr; gap: 40px; }
  .stat-row { gap: 30px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery-wide { grid-column: span 2; }
  /* 2 colonnes : la 3e photo (pergola) restait seule sur sa ligne. On la
     renvoie en fin de galerie pour que la grange vienne combler ce trou
     (grange en 4e position visuelle). Ordre HTML et desktop inchangés. */
  .gallery figure:nth-child(3) { order: 1; }
}

@media (max-width: 640px) {
  .site-header { padding-top: 22px; }
  .site-nav { gap: 4px 20px; font-size: 14px; }
  .section { padding: 52px 0; }
  .section-title { font-size: 30px; }
  .section-head { margin-bottom: 34px; }
  .hero h1 { font-size: 34px; }
  .hero-figure img { height: 300px; }
  .figure-wide img, #atelier .figure-wide img { height: 260px; }
  .gallery img, .gallery-wide img, .gallery figure:nth-child(5) img { height: 240px; }
  .lead { font-size: 17px; }
  .service-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-wide { grid-column: span 1; }
  .gallery figure:nth-child(3) { order: 0; } /* 1 colonne : plus de trou, on garde l'ordre HTML */
  .form-row { grid-template-columns: 1fr; }
  .legal { padding-top: 44px; }
  .site-footer { flex-direction: column; gap: 10px; }
}