:root {
  --encre: #1c2023;
  --texte: #33393d;
  --discret: #5f676c;
  --trait: #e3e1dc;
  --fond: #ffffff;
  --doux: #f4f3f0;
  --jaune: #f0b323;
  --jaune-fonce: #8a6100;
  --largeur: 70rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3 { color: var(--encre); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.6em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); font-weight: 750; margin-top: 1.8rem; }
p, ul, ol { margin: 0 0 1em; }
a { color: var(--encre); text-decoration-color: var(--jaune); text-decoration-thickness: 0.14em; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--encre); }
:focus-visible { outline: 3px solid var(--jaune-fonce); outline-offset: 2px; }
strong, b { color: var(--encre); }

.evitement { position: absolute; left: -999px; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--fond); padding: 0.5rem 1rem; }

/* En-tête */
.bandeau {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.7rem max(1rem, calc((100% - var(--largeur)) / 2));
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
}
.marque { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--encre); text-decoration: none; font-size: 1.05rem; white-space: nowrap; margin: 0; }
.marque b { font-weight: 800; }
.marque__logo { width: 2rem; height: 2rem; color: var(--encre); }
.marque__logo path:last-child { color: var(--jaune); fill: var(--jaune); }
.menu-large { display: none; gap: 1.1rem; margin-left: auto; font-size: 0.95rem; }
.menu-large a { text-decoration: none; color: var(--texte); padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.menu-large a:hover, .menu-large a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--jaune); }
.bandeau > .bouton { display: none; }
.menu-mobile { margin-left: auto; position: relative; }
.menu-mobile summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--encre); padding: 0.45rem 0.9rem; border: 1.5px solid var(--encre); border-radius: 0.35rem; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile nav { position: absolute; right: 0; top: calc(100% + 0.5rem); display: grid; min-width: 14rem; background: var(--fond); border: 1.5px solid var(--encre); border-radius: 0.35rem; padding: 0.4rem 0; }
.menu-mobile nav a { padding: 0.6rem 1rem; text-decoration: none; }
.menu-mobile nav a[aria-current="page"] { font-weight: 700; }
@media (min-width: 62rem) {
  .menu-large { display: flex; }
  .bandeau > .bouton { display: inline-block; }
  .menu-mobile { display: none; }
}

/* Boutons et liens */
.bouton {
  display: inline-block; background: var(--jaune); color: var(--encre);
  font-weight: 750; text-decoration: none; padding: 0.8rem 1.35rem; border: 0; border-radius: 0.35rem;
  font-family: inherit; font-size: 1rem; cursor: pointer; line-height: 1.2;
}
.bouton:hover { background: #ffc53d; }
.bouton--petit { padding: 0.55rem 1rem; font-size: 0.92rem; }
.lien-fort { font-weight: 700; white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.4rem; }
.lien-fort::after { content: " →"; }

main > * { padding-inline: max(1rem, calc((100% - var(--largeur)) / 2)); }

/* Accueil */
.accroche { display: grid; gap: 2rem; padding-block: 2.5rem 3rem; align-items: center; }
.chapeau { font-size: 1.15rem; color: var(--texte); max-width: 40rem; }
.accroche__schema { margin: 0; background: var(--doux); border-radius: 0.5rem; padding: 1.25rem 1rem 0.75rem; }
.accroche__schema figcaption { font-size: 0.88rem; color: var(--discret); margin-top: 0.4rem; }
@media (min-width: 56rem) { .accroche { grid-template-columns: 1.1fr 1fr; } }

.couches { width: 100%; height: auto; display: block; }
.c-finition { fill: #3b3f42; }
.c-granule { fill: #ffffff; }
.c-souscouche { fill: #5a5f62; }
.c-panneau { fill: #c9b994; }
.c-isolant { fill: #f2dfa4; }
.c-trait { stroke: #d1b660; stroke-width: 1.4; }
.c-vapeur { fill: #7d858a; }
.c-pontage rect { fill: #c79a62; }
.c-solive rect { fill: #a87b44; }
.c-etiquettes path { stroke: var(--discret); stroke-width: 1; fill: none; }
.c-etiquettes text { font: 15px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; fill: var(--encre); }

.bloc { padding-block: 1rem 1.5rem; }
.bloc--deux { display: grid; gap: 0 3rem; }
@media (min-width: 48rem) { .bloc--deux { grid-template-columns: 1fr 1fr; } }
.duo { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .duo { grid-template-columns: 1fr 1fr; } }
.carte {
  display: grid; gap: 0.35rem; padding: 1.25rem 1.35rem; text-decoration: none; color: var(--texte);
  border: 1px solid var(--trait); border-top: 4px solid var(--encre);
}
.carte:hover { border-top-color: var(--jaune); }
.carte__titre { font-weight: 800; font-size: 1.15rem; color: var(--encre); }

.secteurs { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.secteurs li { display: grid; gap: 0.1rem; padding: 0.9rem 1rem; background: var(--doux); border-radius: 0.4rem; }
.secteurs span { color: var(--discret); font-size: 0.95rem; }
@media (min-width: 48rem) { .secteurs { grid-template-columns: repeat(3, 1fr); } }

/* Pages */
.page { padding-block: 1.75rem 1rem; }
.page__tete { max-width: 46rem; }
.page__corps { max-width: 46rem; }
.page--etroite .page__corps { padding-block: 1rem 2rem; }
.fil { font-size: 0.9rem; color: var(--discret); margin-bottom: 1rem; }
.surtitre { display: block; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; color: var(--jaune-fonce); margin-bottom: 0.4rem; }
.liste-controle { padding-left: 1.2rem; }
.liste-controle li { margin-bottom: 0.6rem; }
.revision { font-size: 0.88rem; color: var(--discret); margin-top: 2rem; }

.tableau-prix { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.2rem; font-size: 0.98rem; }
.tableau-prix caption { text-align: left; color: var(--discret); font-size: 0.9rem; padding-bottom: 0.4rem; }
.tableau-prix th, .tableau-prix td { text-align: left; padding: 0.65rem 0.6rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau-prix thead th { border-bottom: 2px solid var(--encre); font-size: 0.9rem; }
.tableau-prix tbody th { font-weight: 600; }

.questions { max-width: 46rem; padding-block: 0.5rem 1.5rem; }
.questions details { border-bottom: 1px solid var(--trait); }
.questions summary { cursor: pointer; font-weight: 700; color: var(--encre); padding: 0.9rem 0; }
.questions details p { margin-top: 0; }

.suite { padding-block: 1rem 2rem; }
.suite ul { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
@media (min-width: 48rem) { .suite ul { grid-template-columns: repeat(3, 1fr); } }
.suite li { display: grid; gap: 0.3rem; border-top: 2px solid var(--encre); padding-top: 0.75rem; }
.suite li a { font-weight: 750; }
.suite li span { font-size: 0.93rem; color: var(--discret); }

/* Formulaire */
main > .demande { background: var(--encre); color: #e9ecee; padding: 2.5rem max(1.25rem, calc((100% - var(--largeur)) / 2)); display: grid; gap: 1.5rem; }
.demande h2 { color: #fff; margin-top: 0; }
.demande a { color: #fff; }
@media (min-width: 56rem) { .demande { grid-template-columns: 1fr 1.6fr; } }
.demande__form { display: grid; gap: 0.9rem 1rem; }
@media (min-width: 36rem) { .demande__form { grid-template-columns: 1fr 1fr; } }
.demande__form label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.95rem; color: #fff; }
.demande__form input, .demande__form select, .demande__form textarea {
  font: inherit; font-weight: 400; color: var(--encre); background: #fff;
  border: 1px solid #b9c0c4; border-radius: 0.3rem; padding: 0.65rem 0.7rem; width: 100%;
}
.demande__large { grid-column: 1 / -1; }
.demande__piege { position: absolute; left: -9999px; }
.demande__form .bouton { justify-self: start; }
.demande__note { font-size: 0.88rem; color: #c3cacd; margin: 0; }

/* Pied */
.pied { border-top: 1px solid var(--trait); padding: 2rem max(1rem, calc((100% - var(--largeur)) / 2)) 1.5rem; font-size: 0.95rem; }
.pied__grille { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.pied li { margin-bottom: 0.35rem; }
.pied__titre { font-weight: 800; color: var(--encre); margin-bottom: 0.5rem; }
.marque--pied { margin-bottom: 0.6rem; }
.pied__avis { font-size: 0.85rem; color: var(--discret); max-width: 52rem; margin-top: 1.5rem; }
.pied__bas { font-size: 0.85rem; margin: 0; }