/* Le prix de mon toit: the home page and the free estimate.
   Colours come from the real roof photo of the site's test: terracotta tiles, the zinc
   gutter, cream render, slate. Loaded on every page of the site (toiture/page_head.html):
   the home page and the free estimate use the .tt classes, every other page takes the
   site's look through the shared classes (last part of this file). */

@font-face {
  font-family: "Archivo Toit";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Toit";
  src: url("fonts/sourcesans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

.tt {
  --tt-ink: #1d262e;
  --tt-slate: #2e3a46;
  --tt-soft: #4f5d68;
  --tt-muted: #5f6b74;
  --tt-zinc-light: #e3e8eb;
  --tt-paper: #f4f0e8;
  --tt-paper-deep: #ebe6dc;
  --tt-card: #ffffff;
  --tt-line: #e2dbcf;
  --tt-tile: #9c3f1c;
  --tt-tile-2: #b04d22;
  --tt-tile-soft: #d98a5f;
  --tt-moss: #4d5a2c;
  --tt-cta: linear-gradient(90deg, var(--tt-tile), var(--tt-tile-2));
  --tt-display: "Archivo Toit", "Arial Narrow", system-ui, sans-serif;
  --tt-body: "Source Sans Toit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--tt-body);
  color: var(--tt-ink);
  font-size: 18px;
  line-height: 1.55;
}
:where(.tt) :is(h1, h2, h3, h4) { font-family: var(--tt-display); margin: 0; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; color: var(--tt-ink); }
:where(.tt) p { margin: 0; }
.tt a { color: var(--tt-slate); }
.tt a:hover { color: var(--tt-tile); }
.tt-wrap { max-width: 1200px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.tt-small { font-size: 0.85rem; color: var(--tt-muted); }
.tt-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tt-tile); }
.tt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: 1.05rem; line-height: 1.2;
  padding: 15px 22px; min-height: 54px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--tt-cta); color: #ffffff; text-decoration: none;
  box-shadow: 0 10px 22px rgba(156, 63, 28, 0.25);
}
.tt .tt-btn, .tt .tt-btn:hover { color: #ffffff; }
.tt .tt-btn:hover { filter: brightness(1.06); }
.tt-btn[disabled] { opacity: 0.6; cursor: wait; }
.tt-btn.light { background: transparent; color: #ffffff; border: 2px solid #ffffff; box-shadow: none; }
.tt a:focus-visible, .tt button:focus-visible, .tt input:focus-visible, .tt select:focus-visible, .tt summary:focus-visible { outline: 3px solid var(--tt-tile-soft); outline-offset: 2px; }

/* Hero: the free tool on the left, a real estimate on the right. */
.tt-hero { padding: 26px 0 64px; }
.tt-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: start; }
.tt-kicker { display: inline-flex; gap: 8px; align-items: center; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tt-moss); }
.tt-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin-top: 12px; }
.tt-lead { font-size: 1.12rem; color: var(--tt-soft); margin-top: 14px; max-width: 560px; }
.tt-form {
  margin-top: 24px; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 18px;
  padding: 24px; box-shadow: 0 18px 40px rgba(29, 38, 46, 0.08);
  display: flex; flex-direction: column; gap: 14px; max-width: 560px;
}
.tt-form label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; color: var(--tt-ink); }
.tt-form .tt-hint { font-weight: 400; color: var(--tt-muted); }
.tt-form input, .tt-form select {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 12px 13px;
  border: 1.5px solid #cfd6da; border-radius: 11px; background: #fbfbfa; color: var(--tt-ink); margin: 0;
}
.tt-form input:focus, .tt-form select:focus { border-color: var(--tt-slate); }
.tt-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.tt-form details { border: 0; padding: 0; margin: 0; background: none; }
.tt-form summary { cursor: pointer; color: var(--tt-soft); font-size: 0.95rem; }
.tt-form details[open] summary { margin-bottom: 10px; }
.tt-form details label + select, .tt-form details select + label { margin-top: 10px; }
.tt-estimate {
  position: relative; background: var(--tt-card); border-radius: 20px; overflow: hidden;
  border: 1px solid var(--tt-line); box-shadow: 0 24px 50px rgba(29, 38, 46, 0.12);
}
.tt-estimate img { display: block; width: 100%; height: auto; }
.tt-badge { position: absolute; top: 14px; left: 14px; background: #ffffff; color: var(--tt-slate); font-weight: 700; font-size: 0.8rem; padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.tt-est-body { padding: 20px 22px 22px; }
.tt-place { font-size: 0.9rem; color: var(--tt-muted); font-weight: 600; }
.tt-big { font-family: var(--tt-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; margin-top: 2px; line-height: 1.15; }
.tt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.tt-fact { background: var(--tt-paper); border-radius: 12px; padding: 11px 13px; }
.tt-fact b { display: block; font-family: var(--tt-display); font-size: 1rem; }
.tt-fact span { font-size: 0.85rem; color: var(--tt-muted); line-height: 1.35; display: block; }
.tt-source { font-size: 0.85rem; color: var(--tt-muted); margin-top: 12px; }

/* Dark band of four true facts. */
.tt-band { background: var(--tt-slate); color: #dfe5e8; padding: 24px 0; }
.tt-band ul { list-style: none; margin: 0 auto; padding: 0 max(18px, env(safe-area-inset-left, 0px)); max-width: 1200px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tt-band li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.35; }
.tt-band svg { flex: 0 0 auto; }
.tt-band strong { color: #ffffff; display: block; font-family: var(--tt-display); }

.tt-sec { padding: 76px 0; }
.tt-sec.alt { background: var(--tt-paper-deep); }
.tt-head { max-width: 740px; }
.tt-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin-top: 8px; }
.tt-head p:not(.tt-eyebrow) { font-size: 1.08rem; color: var(--tt-soft); margin-top: 12px; }

/* What the homeowner writes, and what the roofer receives. */
.tt-ba { display: grid; grid-template-columns: minmax(0, 0.85fr) 56px minmax(0, 1.15fr); margin-top: 36px; align-items: stretch; }
.tt-said { background: #fffaf3; border: 1px dashed #d9cbb6; border-radius: 18px; padding: 22px; }
.tt-said h3, .tt-dossier h3 { font-family: var(--tt-body); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tt-muted); }
.tt-typed { font-size: 1.05rem; margin-top: 10px; }
.tt-thumb { margin-top: 14px; border-radius: 12px; overflow: hidden; }
.tt-thumb img { display: block; width: 100%; height: auto; }
.tt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tt-chip { font-size: 0.85rem; background: #ffffff; border: 1px solid var(--tt-line); border-radius: 999px; padding: 4px 11px; color: var(--tt-soft); }
.tt-arrow { display: flex; align-items: center; justify-content: center; }
.tt-dossier { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 18px; padding: 26px; box-shadow: 0 18px 40px rgba(29, 38, 46, 0.08); position: relative; }
.tt-ai { position: absolute; top: -13px; right: 20px; background: var(--tt-moss); color: #ffffff; font-weight: 700; font-size: 0.8rem; padding: 5px 12px; border-radius: 999px; }
.tt-d-title { font-family: var(--tt-display); font-weight: 800; font-size: 1.35rem; margin-top: 8px; line-height: 1.2; }
.tt-d-text { margin-top: 10px; color: var(--tt-soft); }
.tt-d-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 16px; }
.tt-d-cols h4 { font-size: 1rem; color: var(--tt-slate); margin-bottom: 6px; }
.tt-d-cols ul { margin: 0; padding-left: 18px; color: var(--tt-soft); font-size: 0.95rem; line-height: 1.45; }
.tt-d-cols li { margin-bottom: 6px; }
.tt-d-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tt-line); font-size: 0.88rem; color: var(--tt-muted); }

/* How it works. */
.tt-steps { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tt-step { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 18px; padding: 24px; }
.tt-n { width: 38px; height: 38px; border-radius: 50%; background: var(--tt-slate); color: #ffffff; font-family: var(--tt-display); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tt-step h3 { font-size: 1.25rem; margin-top: 14px; }
.tt-step p { color: var(--tt-soft); margin-top: 8px; font-size: 1rem; }
.tt-note { margin-top: 20px; max-width: 740px; }

/* Published prices. */
.tt-prices { margin-top: 32px; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 18px; overflow-x: auto; }
.tt-prices table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 560px; }
.tt-prices th { text-align: left; font-family: var(--tt-body); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tt-muted); padding: 13px 20px; background: var(--tt-zinc-light); }
.tt-prices td { padding: 13px 20px; border-top: 1px solid var(--tt-line); vertical-align: top; }
.tt-prices td.tt-num { font-family: var(--tt-display); font-weight: 700; white-space: nowrap; }
.tt-prices td.tt-src { font-size: 0.85rem; color: var(--tt-muted); }

/* Trust. */
.tt-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 32px; }
.tt-trust-card { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 18px; padding: 24px; }
.tt-trust-card h3 { font-size: 1.15rem; margin-top: 12px; }
.tt-trust-card p { color: var(--tt-soft); margin-top: 8px; font-size: 1rem; }

/* Roofers. */
.tt-pro { background: var(--tt-ink); color: #dfe5e8; border-radius: 22px; padding: 34px 38px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.tt-pro h2 { color: #ffffff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.tt-pro p { margin-top: 8px; max-width: 640px; }

/* Public pages and FAQ. */
.tt-guides ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tt-guides a { display: inline-block; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 999px; padding: 7px 14px; text-decoration: none; font-size: 0.95rem; }
.tt-faq { max-width: 820px; margin-top: 26px; }
.tt-faq details { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; }
.tt-faq summary { font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.tt-faq details p { margin-top: 10px; color: var(--tt-soft); }

/* The free estimate, on the home page and on public pages. */
.tt-res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; text-align: left; }
.tt-res-card { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 18px; padding: 22px; }
.tt-res-card .tt-big { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.tt-res-sub { font-size: 0.92rem; color: var(--tt-soft); margin-top: 4px; }
.tt-next { background: var(--tt-card); border: 2px solid var(--tt-slate); border-radius: 18px; padding: 22px; }
.tt-next h2 { font-size: 1.4rem; margin-top: 6px; }
.tt-next-intro { color: var(--tt-soft); margin-top: 8px; font-size: 1rem; }
.tt-compare { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.92rem; }
.tt-compare th { text-align: left; font-family: var(--tt-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tt-muted); padding: 8px 6px; border-bottom: 2px solid var(--tt-line); }
.tt-compare td { padding: 9px 6px; border-bottom: 1px solid var(--tt-line); vertical-align: top; color: var(--tt-soft); }
.tt-compare td.tt-full { color: var(--tt-ink); font-weight: 600; }
.tt-next .tt-btn { width: 100%; margin-top: 16px; box-sizing: border-box; }
.tt-three { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 7px; font-size: 0.92rem; color: var(--tt-soft); }
.tt-three li { display: flex; gap: 9px; align-items: flex-start; }
.tt-three svg { flex: 0 0 auto; margin-top: 3px; }
.tt-result-zone { padding-top: 10px; padding-bottom: 40px; }

@media (max-width: 900px) {
  .tt-hero-grid, .tt-ba, .tt-steps, .tt-trust, .tt-res { grid-template-columns: minmax(0, 1fr); }
  .tt-hero-grid { gap: 30px; }
  .tt-band ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .tt-arrow { transform: rotate(90deg); padding: 8px 0; }
  .tt-d-cols { grid-template-columns: minmax(0, 1fr); }
  .tt-sec { padding: 52px 0; }
  .tt-pro { padding: 26px 22px; }
}
@media (max-width: 520px) {
  .tt { font-size: 17px; }
  .tt-hero { padding-top: 8px; }
  .tt-hero h1 { font-size: 2rem; margin-top: 8px; }
  .tt-lead { font-size: 1rem; margin-top: 10px; }
  .tt-form { padding: 16px; gap: 12px; margin-top: 16px; }
  .tt-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }
  .tt-band li { font-size: 0.85rem; gap: 8px; }
  .tt-band svg { width: 22px; height: 22px; }
  .tt-prices table { min-width: 0; }
  .tt-prices thead { display: none; }
  .tt-prices tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-top: 1px solid var(--tt-line); }
  .tt-prices tbody tr:first-child { border-top: 0; }
  .tt-prices td { padding: 0; border: 0; }
  .tt-prices td.tt-num { text-align: right; }
  .tt-prices td.tt-src { grid-column: 1 / -1; }
}

/* Every page of the site: this file is only ever loaded by Le prix de mon toit
   (toiture/page_head.html), so the shared classes take the site's look here. */
body { background: #f4f0e8; font-family: "Source Sans Toit", system-ui, -apple-system, "Segoe UI", sans-serif; color: #1d262e; font-size: 17px; }
h1, h2, h3, .brand, .price, .result-big, .result-title { font-family: "Archivo Toit", system-ui, sans-serif; letter-spacing: -0.015em; }
h1, h2, h3 { color: #1d262e; text-wrap: balance; }
.topbar { max-width: 1200px; padding: 16px max(18px, env(safe-area-inset-left, 0px)); }
.brand { font-weight: 800; font-size: 1.2rem; color: #2e3a46; }
.brand-emoji {
  font-size: 0; width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
  background: url("logo.svg") center / cover no-repeat;
}
.topnav a { color: #4f5d68; font-size: 1rem; }
.footer { max-width: 1200px; color: #5f6b74; }
.wrap { max-width: 680px; }
.card { border: 1px solid #e2dbcf; border-radius: 18px; box-shadow: 0 18px 40px rgba(29, 38, 46, 0.07); }
.badge { background: #2e3a46; color: #ffffff; border-radius: 999px; }
.badge.soft { background: #e3e8eb; color: #2e3a46; }
.btn {
  border-radius: 12px; background: linear-gradient(90deg, #9c3f1c, #b04d22); color: #ffffff;
  box-shadow: 0 10px 22px rgba(156, 63, 28, 0.22);
}
.btn:hover { color: #ffffff; }
.btn.secondary { background: #ffffff; color: #2e3a46; border: 2px solid #cfd6da; box-shadow: none; }
.btn.danger { background: #8a1c1c; }
.link-btn { color: #4f5d68; }
label, legend { color: #1d262e; }
.hint, .muted { color: #5f6b74; }
input[type="text"], input[type="email"], input[type="date"], input[type="time"],
input[type="number"], input[type="url"], input[type="tel"], select, textarea {
  background: #fbfbfa; border: 1.5px solid #cfd6da; border-radius: 11px;
}
input:focus, select:focus, textarea:focus { border-color: #2e3a46; }
.choice { border: 1.5px solid #cfd6da; border-radius: 12px; background: #ffffff; }
.choice:has(input:checked) { border-color: #2e3a46; background: #eef1f3; }
.result-big { background: none; color: #1d262e; -webkit-text-fill-color: currentColor; font-weight: 800; font-size: clamp(2rem, 7vw, 2.8rem); }
.result-title { color: #1d262e; }
.fact { background: #f4f0e8; border-radius: 12px; }
.fact b { font-family: "Archivo Toit", system-ui, sans-serif; }
.cta-box { background: #ffffff; border: 2px solid #2e3a46; border-radius: 16px; }
.cta-box p { font-weight: 400; }
.guide-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #5f6b74; }
.link-list li { border-bottom-color: #e2dbcf; }
.flash-success, .alert-success { background: #e6ead8; color: #33401a; }
.flash, .alert { border-radius: 12px; }
.hero { background: #2e3a46; color: #ffffff; }
.hero h1, .hero h2, .hero p { color: #ffffff; }
@media (max-width: 520px) {
  .wrap > .card .row, .card .row { grid-template-columns: minmax(0, 1fr); }
}
.card .hero-emoji { display: none; }
.link-btn { display: inline-block; margin-top: 12px; }