/* ===== Technipro stylesheet =====
   A roofer in Occitanie, and readers aged 50 to 85. Two constraints decide
   almost everything below:

   - readability first. Body text at 17 px and the lead at 18 px, AAA
     contrast for body text and buttons, buttons 56 px high and no touch
     target under 48 px, nothing under 16 px but two documented 15 px
     exceptions (the label above the number in call buttons, the logo
     tagline) and the map labels, which scale with the map. Normal case
     everywhere but the logo name, no italics. A visitor who squints does not
     call;
   - modern through restraint. Lora 600 for headings, Source Sans 3 for
     everything else, no small label above the headings. Each key element
     sits in one of three wrappers (see "The wrappers" below): a white card
     (14 px radius, 1 px rule, light shadow), a panel (24 px radius) for the
     hero house, a dark tile feature panel for the last call. Everything is
     visible without JavaScript. No scroll animation: what moves is a colour
     change, the map fill, the markers of the roof section, the call bar
     sliding, the arrow nudge and the dialog fading in, all switched off
     under prefers-reduced-motion.

   The home page, top to bottom: the hero, with a drawing of a Toulouse
   house on a panel and the three promises in one card; the six trades as
   cards around a numbered section of a roof; the emergency band in roof
   timber with rows of tile ends (images/tile-pattern.svg), with four cards; six drawn warning signs in
   cards; four numbered steps; the map of the 13 departments and their
   list, each in a card; three roof materials, each topped by a drawn
   sample; the questions in a card; the last call on the dark tile panel;
   a one-band footer. Drawings only, no photos: none was
   provided, and a stock photo presented as a job would mislead. The
   drawings use the colours of the tokens below, plus one zinc grey
   (#8e9aa0), and one 1.75 px ink outline.
   The Occitan cross, gold on gules, is the regional anchor of the hero,
   on the badge of the house's panel.

   The phone number is written in call buttons only: the header, the hero,
   the emergency band, the last call and the mobile call bar.

   Button rule, held everywhere: the call is always the most contrasted solid
   fill of its context (tile on light backgrounds, ochre on dark ones). The
   free quote comes second: a white button with an ink outline. */

/* ============================================================== Fonts === */

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/lora-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================= Tokens === */

/* Contrast ratios (WCAG 2.x) are noted where a pair is used for text. */
:root {
  --paper: #faf7f2; /* ink on it 16.5:1 */
  --stone: #f2ece3; /* ink 15.0, ink-soft 7.7, tile 6.1 */
  --white: #ffffff;
  --ink: #1f1712;
  --ink-soft: #54463b; /* 8.5 on paper, 9.1 on white */
  --tile: #963c17; /* white on it 7.1 (AAA) */
  --tile-dark: #7a3011; /* white on it 9.3, 8.7 on paper */
  --rule: #e4dbce; /* decorative only, never carries information alone */
  --field-border: #7a6656; /* 5.4 on white, meets 1.4.11 */
  --placeholder: #6b5848; /* 6.7 on white */
  --wood: #2b1f17;
  --wood-card: #46321f; /* on-dark 11.2, on-dark-soft 8.6 */
  --night: #1f1712;
  --ochre: #d9a441; /* ink on it 7.9; never on a light background */
  --ochre-bright: #e6b552;
  --ochre-light: #f0d9a8;
  --on-dark: #fbf6ee;
  --on-dark-soft: #e3d8c6;
  --footer-muted: #b9ab98; /* 8.0 on night */
  --map-dept: #e3bc9a;
  --map-neighbour: #efeae2;

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --r-field: 8px;
  --r-btn: 10px;
  --r-card: 14px;
  --r-panel: 24px;
  --shadow-1: 0 1px 2px rgba(31, 23, 18, 0.06);
  --shadow-2: 0 1px 2px rgba(31, 23, 18, 0.06), 0 16px 40px -12px rgba(31, 23, 18, 0.2);
  --shadow-bar: 0 -8px 24px rgba(31, 23, 18, 0.1);

  --section-pad: clamp(48px, 32px + 3vw, 72px);
  /* Two text sizes, no more: 16 px for every text, label and number,
     38 px for the titles (h1, h2), down to 28 px on a phone. */
  --fs-text: 1rem;
  --fs-title: clamp(1.75rem, 1.2rem + 2vw, 2.375rem);
  --header-h: 76px;
}

/* =============================================================== Base === */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Text at 16 px; section and page headings grow up to 38 px. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-text);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Every <img> carries width and height, which reserve its space before it
   loads; height: auto then keeps that ratio at whatever width the layout
   gives it. */
img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--tile-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--ochre);
}

@media (min-width: 900px) and (min-height: 700px) {
  html {
    scroll-padding-top: 96px;
  }
}

@media (max-width: 899px) {
  html {
    scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

.wrap {
  width: 100%;
  max-width: 1264px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 640px) {
  .wrap {
    padding: 0 32px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.nowrap {
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  border-radius: var(--r-btn);
}

.skip-link:focus {
  top: 12px;
}

/* Line icon, colour inherited from the text. */
.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The pictograms of the emergency band, of the steps and of the promises.
   Drawn on a 48-unit grid and shown at 48 px, their 1.75 stroke renders at
   the width of the illustrations' outline (the promises show them at 36 px,
   with the stroke adjusted to match: see .promises). Never at the 22 px of
   .icon: they would turn into smudges. */
.picto {
  width: 48px;
  height: 48px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shield {
  width: 22px;
  height: 26px;
  flex: none;
}

/* ============================================================ Buttons === */

/* One size for every button, wherever it sits: 10 px by 20 px of padding
   and the height of the two-line call button, so that one-line buttons
   beside it match. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 57px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--r-btn);
  font: 700 var(--fs-text)/1.2 var(--sans);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-call {
  background: var(--tile);
  color: var(--white);
}

.btn-call:hover {
  background: var(--tile-dark);
}

.btn-quote {
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.btn-quote:hover {
  background: var(--ink);
  color: var(--paper);
}

/* The light button of secondary actions (dialog, error page). */
.btn-light {
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.btn-light:hover {
  background: var(--stone);
}

.dark .btn-call {
  background: var(--ochre);
  color: var(--ink);
}

.dark .btn-call:hover {
  background: var(--ochre-bright);
}

.dark .btn-light,
.dark .btn-quote {
  background: transparent;
  color: var(--on-dark);
  box-shadow: inset 0 0 0 2px var(--ochre-light);
}

.dark .btn-light:hover,
.dark .btn-quote:hover {
  background: rgba(240, 217, 168, 0.12);
}

/* The two-line call button: the number, large, under its label. It is the
   number that gets read, and copied when calling from a landline. */
.btn-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.btn-label {
  font-size: var(--fs-text);
  font-weight: 600;
}

.btn-number {
  font-size: var(--fs-text);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.btn-short {
  display: none;
}

/* Arrow link: the arrow moves 4 px on hover. */
.link-arrow {
  display: inline-block;
  padding: 12px 0;
  font-weight: 600;
  text-decoration: none;
}

.link-arrow .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: -4px;
  transition: transform 0.15s ease;
}

.link-arrow:hover {
  text-decoration: underline;
}

.link-arrow:hover .icon {
  transform: translateX(4px);
}

/* ============================================================= Header === */

.site-header {
  position: relative;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.15s ease;
}

/* Sticky from 900 px, but not on a short window (200 % zoom on a laptop):
   a sticky header would then eat a third of the screen. */
@media (min-width: 900px) and (min-height: 700px) {
  .site-header {
    position: sticky;
    top: 0;
  }

  .site-header.is-scrolled {
    box-shadow: var(--shadow-1);
  }
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

@media (min-width: 900px) {
  .header-bar {
    min-height: var(--header-h);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--tile);
  text-decoration: none;
  flex: none;
}

.brand-roof {
  width: 36px;
  height: 26px;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--serif);
  font-size: var(--fs-text);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
}

.brand-tagline {
  display: none;
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ink-soft);
}

@media (min-width: 420px) {
  .brand-tagline {
    display: block;
  }
}

@media (min-width: 900px) {
  .brand {
    gap: 12px;
  }

  .brand-roof {
    width: 44px;
    height: 31px;
  }

}

.header-nav {
  display: none;
}

@media (min-width: 1280px) {
  .header-nav {
    display: flex;
    gap: 28px;
  }
}

.header-nav a {
  min-width: 48px;
  font-size: var(--fs-text);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  padding: 12px 0;
}

.header-nav a:hover,
.header-nav a:focus-visible {
  text-decoration: underline 2px var(--tile);
  text-underline-offset: 8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-header-quote {
  display: none;
}

@media (min-width: 900px) {
  .btn-header-quote {
    display: inline-flex;
  }
}

/* Under 900 px the header call button keeps only the number; under 400 px,
   the icon and "Appeler": an icon alone is ambiguous for this audience. */
@media (max-width: 899px) {
  .btn-header .btn-label {
    display: none;
  }

  .btn-header .btn-number {
    font-size: var(--fs-text);
  }
}

@media (max-width: 399px) {
  .btn-header .btn-number {
    display: none;
  }

  .btn-header .btn-short {
    display: block;
  }
}

/* The narrowest phones (320 to 379 px): every gap tightened a little so
   nothing sticks out of the screen. */
@media (max-width: 379px) {
  .header-bar,
  .brand {
    gap: 8px;
  }

  .brand-name {
    letter-spacing: 0.05em;
  }

  .btn-header {
    gap: 6px;
  }
}

/* =============================================================== Hero === */

.hero {
  padding: 32px 0 48px;
}

/* minmax(0, 1fr), not the implicit auto column: the phone number never
   wraps, and an auto column would grow with it past a 320 px screen. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.h1-title {
  display: block;
  font-size: var(--fs-title);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.h1-trades {
  display: block;
  max-width: 34rem;
  margin-top: 20px;
  font-family: var(--sans);
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}

.slash {
  color: var(--tile);
}

.lead {
  max-width: 60ch;
  font-size: var(--fs-text);
  line-height: 1.5;
  color: var(--ink-soft);
}

.hero .lead {
  margin-top: 24px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.hero-actions .btn {
  justify-content: flex-start;
}

@media (min-width: 560px) {
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }

}

/* On a phone the hero is tightened so that, even without JavaScript, both
   buttons clear the call bar in a 390 x 700 first screen. */
@media (max-width: 559px) {
  .h1-trades {
    margin-top: 12px;
  }

  .hero .lead {
    margin-top: 16px;
  }

  .hero-actions {
    margin-top: 24px;
  }
}

/* The three promises read as one guarantee: a card, a rule between them. */
.promises {
  max-width: 34rem;
  margin-top: 32px;
  padding: 4px 20px;
  list-style: none;
  font-size: var(--fs-text);
  font-weight: 600;
}

.promises li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}

.promises li + li {
  border-top: 1px solid var(--rule);
}

/* Each promise has its own pictogram, drawn at 36 px in a 56 px ochre-light
   disc, the colour of the house's arch: an even 10 px ring keeps the corners
   of the drawings off the edge of the disc. The stroke is raised to 2.33
   units so that it still renders at 1.75 px, like the other pictograms at
   48 px: at 1.75 units it would thin to 1.31 px next to 17 px semibold
   text. */
.promises .picto {
  width: 56px;
  height: 56px;
  padding: 10px;
  border-radius: 50%;
  background: var(--ochre-light);
  color: var(--tile);
  stroke-width: 2.333;
}

/* The house, on a white panel, with the badge of the area across its
   lower edge. On a phone it follows the promises, centred and kept small so
   it does not lengthen the page much; from 1024 px it takes the right
   column. The drawing is transparent around its arch: the panel shows
   there, never a second frame. */
.hero-art {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 40px auto 0;
  padding-bottom: 22px;
}

@media (min-width: 560px) {
  .hero-art {
    max-width: 380px;
  }
}

.hero-panel {
  padding: 20px 20px 36px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-2);
}

.hero-panel img {
  display: block;
  width: 100%;
  height: auto;
}

/* The Occitan cross and the area, on a pill that overlaps the panel: real
   text, the shield is decorative. */
.hero-badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 10px 18px;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  font-size: var(--fs-text);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

@media (min-width: 1024px) {
  .hero {
    padding: 56px 0 72px;
  }

  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: center;
  }

  .hero-text {
    grid-column: 1 / span 7;
  }

  .hero-art {
    grid-column: 8 / span 5;
    max-width: 480px;
    margin: 0 0 0 auto;
  }
}

/* =========================================================== Sections === */

.section {
  padding: var(--section-pad) 0;
}

.section-alt {
  background: var(--stone);
}

/* Two paper sections in a row (the hero then the trades) get a hairline
   between them, where a change of background would otherwise mark it. */
.hero + .section {
  border-top: 1px solid var(--rule);
}

/* Every section opens on its heading, centred, with its content below it,
   whatever that content is. */
.section-head {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
}

@media (min-width: 900px) {
  .section-head {
    margin-bottom: 48px;
  }
}

.section-head h2,
.final-call h2 {
  max-width: 22ch;
  margin-inline: auto;
  font-size: var(--fs-title);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.section-head .lead {
  margin: 16px auto 0;
}

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

/* The wrappers. Three containers, no more, so that the page stays calm:
   - card: white, a 1 px rule, the light shadow; it holds one element (a
     trade, a sign, a step, the map, the FAQ). Cards that react to the
     pointer take a tile border, never a bigger shadow;
   - panel: a larger rounded block that sets off a figure (the hero house,
     the roof section);
   - feature panel: dark tile, for the one place where the page asks for a
     decision, the last call.
   The emergency band keeps its wood and gets its own translucent cards. */
.card,
.promises,
.anatomy-figure,
.trade-list li,
.signs li,
.steps li,
.map,
.dept-list,
.roof,
.faq,
.ask-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}

.feature-panel {
  border-radius: var(--r-panel);
  background: var(--tile-dark);
  color: var(--on-dark-soft);
}

/* The closing line of a section: a sentence and its link. */
.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 16px;
  margin-top: 40px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}

/* A heading and its content below it, in a column of reading width
   (thank-you page). */
.split > :last-child {
  max-width: 760px;
  margin-inline: auto;
}

/* ============================================================= Trades === */

/* The roof section on the left and the six trades on the right from
   1024 px, the drawing held in view while the list scrolls past it, so that
   a trade and its marker are always on screen together. Below 1024 px the
   drawing comes first, edge to edge on a phone, where every pixel of width
   makes its digits larger. */
.anatomy {
  display: grid;
  gap: 32px;
}

.anatomy-figure {
  padding: 16px;
}

.anatomy-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* On a phone the card runs edge to edge, without its side borders: every
   pixel of width makes the digits of the markers larger. */
@media (max-width: 639px) {
  .anatomy-figure {
    margin: 0 -20px;
    padding: 12px 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
}

@media (min-width: 1024px) {
  .anatomy {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: start;
  }

  .anatomy-figure {
    grid-column: 1 / span 7;
    position: sticky;
    top: 112px;
  }

  .trade-list {
    grid-column: 8 / span 5;
  }
}

.trade-list {
  counter-reset: trade;
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.trade-list li {
  counter-increment: trade;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
  padding: 16px;
  transition: border-color 0.15s ease;
}

.trade-list li:focus-visible {
  outline-offset: -3px;
}

/* The number, drawn like the marker it matches: white on a tile disc. */
.trade-list li::before {
  content: counter(trade);
  grid-row: span 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tile);
  color: var(--white);
  font: 700 var(--fs-text)/32px var(--sans);
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
  transition: background-color 0.15s ease;
}

.trade-list h3 {
  padding-top: 3px;
  font-size: var(--fs-text);
}

.trade-list p {
  margin-top: 4px;
  font-size: var(--fs-text);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* The markers of the drawing (the roof section inlined in public/index.html,
   #metiers: g.an-marker[data-step] > path.an-leader, circle.an-pin,
   g.an-badge-g > circle.an-badge + digit). Their look goes through custom
   properties, so that the highlight below only has to change values. */
.an-marker {
  --badge: var(--tile);
  --badge-pop: 1;
  --leader: 1.5px;
}

.an-badge {
  fill: var(--badge);
  transition: fill 0.15s ease;
}

.an-leader {
  stroke-width: var(--leader);
}

.an-badge-g {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(calc(var(--badge-zoom) * var(--badge-pop)));
  transition: transform 0.15s ease;
}

/* The digits are 23 units in a 672-unit viewBox and shrink or grow with
   the drawing: the badges are zoomed per drawing width so that the digits
   show at about 16 px, like every other text. Edge to edge under 640 px,
   in a 16 px padded card above, in 7 of 12 columns from 1024 px. */
.an-marker {
  --badge-zoom: 0.72;
}

@media (max-width: 1199px) {
  .an-marker {
    --badge-zoom: 0.85;
  }
}

@media (max-width: 1023px) {
  .an-marker {
    --badge-zoom: 0.55;
  }
}

@media (max-width: 899px) {
  .an-marker {
    --badge-zoom: 0.65;
  }
}

@media (max-width: 799px) {
  .an-marker {
    --badge-zoom: 0.8;
  }
}

@media (max-width: 559px) {
  .an-marker {
    --badge-zoom: 1;
  }
}

@media (max-width: 479px) {
  .an-marker {
    --badge-zoom: 1.15;
  }
}

@media (max-width: 399px) {
  .an-marker {
    --badge-zoom: 1.3;
  }
}

@media (max-width: 359px) {
  .an-marker {
    --badge-zoom: 1.5;
  }
}

/* A trade and its marker light up together. Hovering or focusing a trade
   highlights its marker; hovering a marker highlights its trade. */
.an-marker:hover,
.anatomy:has(li[data-step="1"]:is(:hover, :focus-visible)) .an-marker[data-step="1"],
.anatomy:has(li[data-step="2"]:is(:hover, :focus-visible)) .an-marker[data-step="2"],
.anatomy:has(li[data-step="3"]:is(:hover, :focus-visible)) .an-marker[data-step="3"],
.anatomy:has(li[data-step="4"]:is(:hover, :focus-visible)) .an-marker[data-step="4"],
.anatomy:has(li[data-step="5"]:is(:hover, :focus-visible)) .an-marker[data-step="5"],
.anatomy:has(li[data-step="6"]:is(:hover, :focus-visible)) .an-marker[data-step="6"] {
  --badge: var(--ink);
  --badge-pop: 1.2;
  --leader: 2.5px;
}

.trade-list li:is(:hover, :focus-visible),
.anatomy:has(.an-marker[data-step="1"]:hover) li[data-step="1"],
.anatomy:has(.an-marker[data-step="2"]:hover) li[data-step="2"],
.anatomy:has(.an-marker[data-step="3"]:hover) li[data-step="3"],
.anatomy:has(.an-marker[data-step="4"]:hover) li[data-step="4"],
.anatomy:has(.an-marker[data-step="5"]:hover) li[data-step="5"],
.anatomy:has(.an-marker[data-step="6"]:hover) li[data-step="6"] {
  border-color: var(--tile);
}

.trade-list li:is(:hover, :focus-visible)::before,
.anatomy:has(.an-marker[data-step="1"]:hover) li[data-step="1"]::before,
.anatomy:has(.an-marker[data-step="2"]:hover) li[data-step="2"]::before,
.anatomy:has(.an-marker[data-step="3"]:hover) li[data-step="3"]::before,
.anatomy:has(.an-marker[data-step="4"]:hover) li[data-step="4"]::before,
.anatomy:has(.an-marker[data-step="5"]:hover) li[data-step="5"]::before,
.anatomy:has(.an-marker[data-step="6"]:hover) li[data-step="6"]::before {
  background: var(--ink);
}

/* ========================================================== Emergency === */

/* The wood band, plain, with the hairline rows of tile ends drawn over it:
   a texture felt rather than read, too faint to touch the text contrasts. */
.emergency {
  padding: var(--section-pad) 0;
  background: url("/images/tile-pattern.svg") 0 0 / 64px, var(--wood);
  color: var(--on-dark-soft);
}

.emergency h2 {
  max-width: 22ch;
  margin-inline: auto;
  font-size: var(--fs-title);
  line-height: 1.12;
  color: var(--on-dark);
}

.emergency-text p:last-child {
  max-width: 40em;
  margin: 16px auto 0;
}

/* The heading and its sentence centred, the call under them. */
.emergency-grid {
  display: grid;
  gap: 28px;
  justify-items: center;
  text-align: center;
}

.emergency-actions {
  width: 100%;
  text-align: center;
}

.emergency-actions .btn {
  width: 100%;
  justify-content: flex-start;
}

@media (min-width: 560px) {
  .emergency-actions .btn {
    width: auto;
  }
}

/* What to do while waiting: four pictograms in ochre on the wood. */
.safety {
  margin-top: 40px;
}

.safety h3 {
  color: var(--on-dark);
  text-align: center;
}

.safety-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .safety-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1100px) {
  .safety-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Cards in a lighter wood, which sets them off the band. The pictogram sits in
   an ochre-tinted disc, drawn at 36 px with the stroke raised to render at
   1.75 px, as in the hero promises. */
.safety-list li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
  padding: 20px;
  background: var(--wood-card);
  border: 1px solid rgba(240, 217, 168, 0.18);
  border-radius: var(--r-card);
}

.safety-list .picto {
  grid-row: span 2;
  width: 56px;
  height: 56px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(217, 164, 65, 0.16);
  color: var(--ochre);
  stroke-width: 2.333;
}

.safety-title {
  font-weight: 700;
  line-height: 1.35;
  color: var(--on-dark);
}

.safety-list .safety-title + p {
  margin-top: 6px;
  font-size: var(--fs-text);
  line-height: 1.5;
}

/* ============================================================== Signs === */

/* Six drawings, each with its caption in a card: two columns on a phone,
   three above, under the heading, the closing line under them. The scenes
   run to the card's edges; a rule separates them from the caption (the white ceiling of the
   last one needs it). */
.signs-grid {
  display: grid;
}

.signs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .signs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

.signs li {
  overflow: hidden;
}

.signs img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--rule);
}

.signs figcaption {
  padding: 12px 14px 14px;
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.4;
}

/* ============================================================== Steps === */

/* Four numbered cards: the number on a tile disc, like the trades, and
   the pictogram opposite it; stacked on a phone, two by two from 640 px,
   side by side from 1024 px. The number comes from the <ol> counter, so
   it is part of the list a screen reader announces. */
.steps {
  counter-reset: step;
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 16px;
  padding: 20px;
}

.steps li::before {
  content: counter(step);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tile);
  color: var(--white);
  font: 700 var(--fs-text)/36px var(--sans);
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
}

.steps .picto {
  justify-self: end;
  color: var(--tile);
}

.steps h3,
.steps p {
  grid-column: 1 / -1;
}

.steps h3 {
  margin-top: 4px;
  font-size: var(--fs-text);
}

.steps p {
  margin-top: -6px;
  font-size: var(--fs-text);
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .steps li {
    align-content: start;
  }
}

/* =========================================================== Map area === */

/* The heading above, then the map and the list: one under the other on a
   phone, side by side from 1024 px, the map on the left and the list, in
   one column there (see below), on the right. */
.area-grid {
  display: grid;
  gap: 32px;
}

.area-grid .section-head {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .area-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px 32px;
    align-items: center;
  }

  .area-grid .section-head {
    grid-column: 1 / -1;
  }

  .map {
    grid-column: 1 / span 7;
  }

  .dept-list {
    grid-column: 8 / span 5;
  }
}

/* Two columns read downwards, in the order of the codes, in a card whose
   border closes the last row of each column. */
.dept-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  column-gap: 24px;
  padding: 4px 16px;
  list-style: none;
}

.dept-list li:nth-child(7),
.dept-list li:last-child {
  border-bottom: 0;
}

.dept-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.15s ease;
}

.dept-code {
  flex: none;
  min-width: 2ch;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--tile);
  font-variant-numeric: lining-nums tabular-nums;
}

.dept-name {
  min-width: 0;
  font-weight: 600;
}

@media (max-width: 479px) {
  .dept-list {
    column-gap: 12px;
  }

  .dept-list li {
    gap: 8px;
    padding: 10px 4px;
  }
}

/* In a column narrower than about 240 px, "Pyrénées-Orientales" breaks at
   its hyphen and the "Siège" badge of row 31 drops to a line of its own:
   under 530 px, and beside the map from 1024 px. There, one column, with
   tighter rows. */
@media (max-width: 529px), (min-width: 1024px) {
  .dept-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .dept-list li {
    padding: 8px;
  }

  .dept-list li:nth-child(7) {
    border-bottom: 1px solid var(--rule);
  }
}

.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 10px;
  border: 1.5px solid var(--tile);
  border-radius: 999px;
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.5;
  color: var(--tile);
  vertical-align: 1px;
}

.map {
  max-width: 680px;
  padding: 16px;
  container-type: inline-size;
}

.map-svg {
  width: 100%;
  height: auto;
}

.map-neighbours path {
  fill: var(--map-neighbour);
  stroke: var(--paper);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.map-outline path {
  fill: none;
  stroke: var(--tile);
  stroke-width: 5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map-department {
  fill: var(--map-dept);
  stroke: var(--paper);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  transition: fill 0.15s ease;
}

.map-department:hover {
  fill: var(--tile);
}

/* The labels of the map are in viewBox units, which shrink with the map:
   --map-text is set per map width (container queries below) so that they
   show at about 16 px on screen, like every other text. */
.map-svg {
  --map-text: 16px;
}

.map-code {
  font-family: var(--serif);
  font-size: var(--map-text);
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
  font-variant-numeric: lining-nums tabular-nums;
  pointer-events: none;
  transition: fill 0.15s ease;
}

.map-geo text {
  font-family: var(--serif);
  font-size: var(--map-text);
  font-weight: 500;
  letter-spacing: 0.08em;
  fill: var(--ink-soft);
  text-anchor: middle;
}

.map-hq circle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3px;
}

.map-hq .map-hq-dot {
  fill: var(--ink);
  stroke: none;
}

.map-hq text {
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 6px;
  stroke-linejoin: round;
  pointer-events: none;
}

.map-hq-name {
  font-family: var(--sans);
  font-size: var(--map-text);
  font-weight: 600;
  fill: var(--ink);
}

.map-hq-note {
  font-family: var(--serif);
  font-size: var(--map-text);
  font-weight: 500;
  fill: var(--ink-soft);
}

.map figcaption {
  display: grid;
  gap: 6px;
  margin-top: 0;
  font-size: var(--fs-text);
  color: var(--ink-soft);
}

.map-key {
  display: none;
  margin-top: 12px;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
}

.map-key-dot {
  width: 14px;
  height: 14px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 6px var(--ink);
}

/* The narrower the map, the larger the labels in viewBox units (907 wide):
   16 px on screen is 16 × 907 / the drawing's width, the card's width less
   its padding. */
@container (max-width: 899px) {
  .map-svg {
    --map-text: 18px;
  }
}

@container (max-width: 759px) {
  .map-svg {
    --map-text: 22px;
  }
}

@container (max-width: 639px) {
  .map-svg {
    --map-text: 27px;
  }
}

@container (max-width: 539px) {
  .map-svg {
    --map-text: 31px;
  }
}

@container (max-width: 459px) {
  .map-svg {
    --map-text: 37px;
  }
}

@container (max-width: 399px) {
  .map-svg {
    --map-text: 44px;
  }
}

@container (max-width: 339px) {
  .map-svg {
    --map-text: 52px;
  }
}

@container (max-width: 299px) {
  .map-svg {
    --map-text: 58px;
  }
}

/* On a narrow map, the head office labels give way to the key under the
   map. */
@container (max-width: 599px) {
  .map-hq text {
    display: none;
  }

  .map-key {
    display: inline-flex;
  }
}

/* Under 485 px, the sea and Spain would fall under 16 px on screen: they go,
   the map is read well enough without them. */
@container (max-width: 484px) {
  .map-geo {
    display: none;
  }
}

/* List/map cross-hover rules, generated by scripts/draw-map.mjs. */
/* map:rules:start */
.area:has(.dept-list li[data-code="09"]:hover) .map-department[data-code="09"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="09"]:hover) .map-code[data-code="09"],
.map-svg:has(.map-department[data-code="09"]:hover) .map-code[data-code="09"] { fill: #fff; }
.area:has(.map-department[data-code="09"]:hover) .dept-list li[data-code="09"] { background: var(--stone); }
.area:has(.dept-list li[data-code="11"]:hover) .map-department[data-code="11"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="11"]:hover) .map-code[data-code="11"],
.map-svg:has(.map-department[data-code="11"]:hover) .map-code[data-code="11"] { fill: #fff; }
.area:has(.map-department[data-code="11"]:hover) .dept-list li[data-code="11"] { background: var(--stone); }
.area:has(.dept-list li[data-code="12"]:hover) .map-department[data-code="12"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="12"]:hover) .map-code[data-code="12"],
.map-svg:has(.map-department[data-code="12"]:hover) .map-code[data-code="12"] { fill: #fff; }
.area:has(.map-department[data-code="12"]:hover) .dept-list li[data-code="12"] { background: var(--stone); }
.area:has(.dept-list li[data-code="30"]:hover) .map-department[data-code="30"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="30"]:hover) .map-code[data-code="30"],
.map-svg:has(.map-department[data-code="30"]:hover) .map-code[data-code="30"] { fill: #fff; }
.area:has(.map-department[data-code="30"]:hover) .dept-list li[data-code="30"] { background: var(--stone); }
.area:has(.dept-list li[data-code="31"]:hover) .map-department[data-code="31"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="31"]:hover) .map-code[data-code="31"],
.map-svg:has(.map-department[data-code="31"]:hover) .map-code[data-code="31"] { fill: #fff; }
.area:has(.map-department[data-code="31"]:hover) .dept-list li[data-code="31"] { background: var(--stone); }
.area:has(.dept-list li[data-code="32"]:hover) .map-department[data-code="32"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="32"]:hover) .map-code[data-code="32"],
.map-svg:has(.map-department[data-code="32"]:hover) .map-code[data-code="32"] { fill: #fff; }
.area:has(.map-department[data-code="32"]:hover) .dept-list li[data-code="32"] { background: var(--stone); }
.area:has(.dept-list li[data-code="34"]:hover) .map-department[data-code="34"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="34"]:hover) .map-code[data-code="34"],
.map-svg:has(.map-department[data-code="34"]:hover) .map-code[data-code="34"] { fill: #fff; }
.area:has(.map-department[data-code="34"]:hover) .dept-list li[data-code="34"] { background: var(--stone); }
.area:has(.dept-list li[data-code="46"]:hover) .map-department[data-code="46"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="46"]:hover) .map-code[data-code="46"],
.map-svg:has(.map-department[data-code="46"]:hover) .map-code[data-code="46"] { fill: #fff; }
.area:has(.map-department[data-code="46"]:hover) .dept-list li[data-code="46"] { background: var(--stone); }
.area:has(.dept-list li[data-code="48"]:hover) .map-department[data-code="48"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="48"]:hover) .map-code[data-code="48"],
.map-svg:has(.map-department[data-code="48"]:hover) .map-code[data-code="48"] { fill: #fff; }
.area:has(.map-department[data-code="48"]:hover) .dept-list li[data-code="48"] { background: var(--stone); }
.area:has(.dept-list li[data-code="65"]:hover) .map-department[data-code="65"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="65"]:hover) .map-code[data-code="65"],
.map-svg:has(.map-department[data-code="65"]:hover) .map-code[data-code="65"] { fill: #fff; }
.area:has(.map-department[data-code="65"]:hover) .dept-list li[data-code="65"] { background: var(--stone); }
.area:has(.dept-list li[data-code="66"]:hover) .map-department[data-code="66"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="66"]:hover) .map-code[data-code="66"],
.map-svg:has(.map-department[data-code="66"]:hover) .map-code[data-code="66"] { fill: #fff; }
.area:has(.map-department[data-code="66"]:hover) .dept-list li[data-code="66"] { background: var(--stone); }
.area:has(.dept-list li[data-code="81"]:hover) .map-department[data-code="81"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="81"]:hover) .map-code[data-code="81"],
.map-svg:has(.map-department[data-code="81"]:hover) .map-code[data-code="81"] { fill: #fff; }
.area:has(.map-department[data-code="81"]:hover) .dept-list li[data-code="81"] { background: var(--stone); }
.area:has(.dept-list li[data-code="82"]:hover) .map-department[data-code="82"] { fill: var(--tile); }
.area:has(.dept-list li[data-code="82"]:hover) .map-code[data-code="82"],
.map-svg:has(.map-department[data-code="82"]:hover) .map-code[data-code="82"] { fill: #fff; }
.area:has(.map-department[data-code="82"]:hover) .dept-list li[data-code="82"] { background: var(--stone); }
/* map:rules:end */

/* ============================================================== Roofs === */

/* Three cards, each topped by a drawn sample of the material, full bleed.
   On a phone the sample is cropped to a wider strip, and between 560 and
   900 px it sits beside the text: either way, three cards do not turn into
   a long scroll. */
.roofs {
  display: grid;
  gap: 24px;
  padding: 0;
  list-style: none;
}

.roof {
  overflow: hidden;
}

.roof img {
  display: block;
  width: 100%;
  height: auto;
}

.roof-body {
  padding: 20px 20px 24px;
}

.roof h3 {
  font-size: var(--fs-text);
}

.roof p {
  margin-top: 6px;
  font-size: var(--fs-text);
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 559px) {
  .roof img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }
}

@media (min-width: 560px) and (max-width: 899px) {
  .roof {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .roof img {
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 900px) {
  .roofs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* ========================================================== Questions === */

/* The heading, the answers in one card under it, then a card for any
   other question, in a column of reading width. */
.faq-grid {
  display: grid;
  gap: 16px;
}

.faq-grid .section-head {
  margin-bottom: 8px;
}

.faq-grid > .faq,
.faq-grid > .ask-card {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

.faq {
  padding: 0 24px;
}

.faq details + details {
  border-top: 1px solid var(--rule);
}

.ask-card {
  padding: 20px 24px 12px;
}

.ask-title {
  font-family: var(--serif);
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.25;
}

.ask-card p + p {
  margin-top: 6px;
  font-size: var(--fs-text);
  line-height: 1.5;
  color: var(--ink-soft);
}

.ask-card .link-arrow {
  margin-top: 4px;
}

.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 20px 56px 20px 0;
  font-family: var(--serif);
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* The +/− sign: a thin circle holding two bars; the vertical one folds
   away when the answer is open. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border: 1.5px solid var(--tile);
  border-radius: 50%;
  background: linear-gradient(var(--tile), var(--tile)) center / 16px 2px no-repeat,
    linear-gradient(var(--tile), var(--tile)) center / 2px 16px no-repeat;
}

.faq details[open] summary::after {
  background: linear-gradient(var(--tile), var(--tile)) center / 16px 2px no-repeat;
}

.faq details p {
  max-width: 62ch;
  padding-bottom: 24px;
  color: var(--ink-soft);
}

/* ========================================================== Final call === */

.final-call {
  padding: 0 0 var(--section-pad);
}

/* On the dark tile every text is in on-dark (8.6:1): on-dark-soft would
   fall to 6.6:1 there. */
.final-grid {
  display: grid;
  gap: 32px;
  padding: 32px 24px;
  color: var(--on-dark);
}

/* Under 380 px the panel runs edge to edge, square: inside the side
   margins, its padding would leave the call button narrower than the
   number it writes out. */
@media (max-width: 379px) {
  .final-grid {
    margin: 0 -20px;
    padding: 32px 20px;
    border-radius: 0;
  }
}

.final-call h2 {
  color: var(--on-dark);
}

.final-call .lead,
.final-call .promise-line {
  color: var(--on-dark);
}

.final-call h2 {
  font-size: var(--fs-title);
}

/* The heading centred, the buttons under it. */
.final-grid {
  text-align: center;
}

.final-call .lead {
  max-width: 40em;
  margin: 16px auto 0;
}

.final-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.final-buttons .btn {
  justify-content: flex-start;
}

.promise-line {
  margin-top: 20px;
  font-size: var(--fs-text);
}

@media (min-width: 560px) {
  .final-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .final-grid {
    padding: 56px;
  }
}

/* ============================================================= Footer === */

/* One band: the logo, three links, the copyright. */
.site-footer {
  background: var(--night);
  color: var(--on-dark-soft);
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 40px;
  padding-top: 28px;
  padding-bottom: 28px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
}

.footer-nav a {
  display: inline-block;
  padding: 12px 0;
  color: var(--on-dark-soft);
}

.footer-nav a:hover {
  color: var(--on-dark);
}

.footer-copy {
  font-size: var(--fs-text);
  color: var(--footer-muted);
}

.brand-light {
  color: var(--ochre);
}

.brand-light .brand-name {
  color: var(--on-dark);
}

.brand-light .brand-tagline {
  display: block;
  color: var(--on-dark-soft);
}

/* ======================================================= Mobile call bar === */

/* Fixed under 900 px. The body reserves its height, otherwise it would hide
   the end of the footer. Without JavaScript it is always there; with it, it
   slides away while the hero buttons are on screen (site.entry.js). */
.call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--rule);
  box-shadow: var(--shadow-bar);
  transition: transform 0.2s ease, visibility 0s;
}

.call-bar .btn {
  justify-content: center;
}

.call-bar .btn-number {
  font-size: var(--fs-text);
}

.call-bar.is-away {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

/* On the quote page, the "Devis gratuit" button points to the page being
   read (sync-shell marks it aria-current): the call takes the whole bar. */
.call-bar:has(.btn-quote[aria-current]) {
  grid-template-columns: 1fr;
}

.call-bar .btn-quote[aria-current] {
  display: none;
}

/* Out of the way while typing in a field, and on very short windows. */
body:has(.quote-form :focus) .call-bar {
  display: none;
}

@media (max-width: 899px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 900px), (max-height: 519px) {
  .call-bar {
    display: none;
  }
}

/* ===================================================== Secondary pages === */

.page-hero {
  padding: 40px 0 0;
}

.page-hero-inner > * {
  max-width: 820px;
}

.page-hero-inner {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--ink);
}

@media (min-width: 900px) {
  .page-hero {
    padding-top: 56px;
  }

  .page-hero-inner {
    padding-bottom: 48px;
  }
}

.page-hero h1 {
  font-size: var(--fs-title);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.page-hero .lead {
  margin-top: 16px;
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 28px;
}

/* The no-JS error page reuses .page-hero on a dark background. */
.page-hero.dark {
  padding: 56px 0;
  background: var(--wood);
  color: var(--on-dark-soft);
}

.page-hero.dark h1 {
  color: var(--on-dark);
}

.page-hero.dark .lead {
  color: var(--on-dark-soft);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: -12px 0 8px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-text);
  color: var(--ink-soft);
}

.crumbs li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--tile);
}

.crumbs a {
  display: inline-block;
  padding: 12px 0;
  color: var(--ink-soft);
}

.prose {
  max-width: 68ch;
}

.prose h2 {
  margin: 2em 0 0.6em;
  font-size: var(--fs-title);
  line-height: 1.25;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p + p,
.prose ul + p,
.prose p + ul {
  margin-top: 1em;
}

.prose ul {
  padding-left: 1.3em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose dl {
  margin-top: 0.5em;
  border-top: 1px solid var(--rule);
}

.prose dl > div {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.prose dt {
  font-weight: 700;
}

/* A link alone in a value (the phone number of the legal notice) is a
   target on its own: 48 px of hit area, without moving the row. */
.prose dd > a:only-child {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

@media (min-width: 640px) {
  .prose dl > div {
    display: grid;
    grid-template-columns: 24ch 1fr;
    column-gap: 20px;
  }
}

/* Numbered list in large Lora figures (the thank-you page's next steps). */
.numbered {
  counter-reset: item;
  padding: 0;
  list-style: none;
}

.numbered > li {
  counter-increment: item;
  position: relative;
}

.numbered > li::before {
  content: counter(item);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1;
  color: var(--tile);
  font-variant-numeric: lining-nums tabular-nums;
}

.numbered h3 {
  font-size: var(--fs-text);
}

.numbered p {
  margin-top: 8px;
  color: var(--ink-soft);
}

.process > li {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}

.process > li:first-child {
  border-top-color: var(--ink);
}

.process > li::before {
  grid-row: span 2;
  font-size: var(--fs-title);
}

@media (min-width: 900px) {
  .process > li {
    grid-template-columns: 72px 1fr;
    padding: 28px 0;
  }

}

.next-steps .link-arrow {
  margin-top: 16px;
}

/* ========================================================= Quote page === */

.quote-layout {
  display: grid;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: var(--section-pad);
}

@media (min-width: 1024px) {
  .quote-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: start;
    padding-top: 56px;
  }

  .quote-card {
    grid-column: 1 / span 7;
  }

  .quote-aside {
    grid-column: 9 / span 4;
    position: sticky;
    top: 112px;
  }
}

.quote-card {
  max-width: 720px;
  padding: 24px 20px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
}

@media (min-width: 640px) {
  .quote-card {
    padding: 32px;
  }
}

.quote-card h2 {
  font-size: var(--fs-title);
  line-height: 1.2;
}

.required-note {
  margin-top: 12px;
  font-size: var(--fs-text);
  color: var(--ink-soft);
}

.fields {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

@media (min-width: 520px) {
  .fields {
    grid-template-columns: 1fr 1fr;
  }

  .field-wide {
    grid-column: 1 / -1;
  }
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-text);
  font-weight: 700;
}

.req {
  color: var(--tile);
}

/* At least 16 px in fields: below that, iOS zooms in on tap and the
   visitor loses sight of the page. */
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1.5px solid var(--field-border);
  border-radius: var(--r-field);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-text);
  line-height: 1.4;
}

.field textarea {
  min-height: 112px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--placeholder);
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--tile);
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.field .checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 600;
  cursor: pointer;
}

.checkbox input {
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 4px;
  accent-color: var(--tile);
  cursor: pointer;
}

/* The honeypot: off screen, not display: none, which some bots know to
   skip. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn-submit {
  width: 100%;
  margin-top: 28px;
  justify-content: center;
  font-size: var(--fs-text);
  white-space: normal;
  text-align: center;
}

.btn-submit:disabled {
  cursor: progress;
  opacity: 0.75;
}

.form-status {
  margin-top: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-soft);
}

.form-status:empty {
  display: none;
}

.form-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-text);
  color: var(--ink-soft);
}

.quote-aside h2 {
  font-size: var(--fs-title);
  margin-bottom: 16px;
}

.quote-aside .promises {
  margin-top: 0;
}

/* The page's one phone number, as a call button under the promises. */
.quote-aside-ask {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-weight: 600;
}

.quote-aside-ask + .btn {
  margin-top: 12px;
}

/* ============================================================= Dialog === */

.modal {
  width: min(480px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: transparent;
  color: var(--ink);
}

.modal::backdrop {
  background: rgba(31, 23, 18, 0.6);
}

.modal-card {
  padding: 28px 24px 24px;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
}

.modal[open] .modal-card {
  animation: modal-in 0.3s ease-out;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.modal-title {
  font-size: var(--fs-title);
}

.modal-text {
  margin-top: 10px;
  color: var(--ink-soft);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ============================================================== Print === */

@media print {
  .site-header {
    position: static;
  }

  .call-bar,
  .skip-link {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }

  .emergency,
  .feature-panel,
  .site-footer {
    background: none;
    color: var(--ink);
  }

  /* Cards print as plain outlines: no shadow, no tinted fill. */
  .promises,
  .hero-panel,
  .hero-badge,
  .anatomy-figure,
  .trade-list li,
  .safety-list li,
  .signs li,
  .steps li,
  .map,
  .dept-list,
  .roof,
  .faq,
  .ask-card,
  .feature-panel {
    box-shadow: none !important;
    border: 1px solid var(--rule) !important;
  }

  .emergency h2,
  .emergency h3,
  .emergency p,
  .final-call h2,
  .final-call p,
  .dark .btn-quote,
  .safety-list .picto,
  .site-footer a,
  .brand-light .brand-name,
  .brand-light .brand-tagline,
  .footer-copy {
    color: var(--ink) !important;
  }

  .btn-call,
  .dark .btn-call {
    background: none !important;
    color: var(--ink) !important;
    box-shadow: inset 0 0 0 2px var(--ink);
  }

  /* Same problem for the trade numbers, white on a tile disc: printers drop
     backgrounds by default, and the digit would come out pale or white on
     white. An ink ring keeps them matched with the printed markers. */
  .trade-list li::before,
  .steps li::before {
    background: none !important;
    color: var(--ink) !important;
    box-shadow: inset 0 0 0 2px var(--ink);
  }

  .trade-list li,
  .safety-list li,
  .signs li,
  .steps li,
  .roof {
    break-inside: avoid;
  }
}