/* Construction Maison Écologique : thème « chaux, terre, paille ».
   Newsreader (titres et texte), Lexend Exa (capitales larges), Archivo réservé aux schémas SVG. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/typo/newsreader-romain.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url("/typo/newsreader-italique.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Lexend Exa";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/typo/lexend-exa.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Archivo Plan";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("/typo/archivo-largeur.woff2") format("woff2-variations");
}

:root {
  --chaux: #f1ece2;
  --chaux-2: #e7e0d2;
  --papier: #faf7f1;
  --ombre: #221b16;
  --ombre-2: #33281f;
  --texte: #2a211b;
  --gris: #5f5349;
  --argile: #9b4326;
  --argile-fonce: #7e351d;
  --paille: #e4c47e;
  --chaux-sur-ombre: #e9e2d4;
  --trait: rgba(42, 33, 27, 0.18);
  --trait-fort: rgba(42, 33, 27, 0.55);
  --trait-clair: rgba(241, 236, 226, 0.22);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --large: "Lexend Exa", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(1rem, 4vw, 4rem);
  --max: 82rem;
  --lecture: 44rem;
  /* Noms hérités, encore lus par le formulaire de contact et le comparateur */
  --s-nuit: var(--ombre);
  --s-titre: var(--serif);
  --s-paille-fonce: var(--argile);
  --s-primary: var(--argile);
  --s-strong: var(--argile-fonce);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--chaux);
  color: var(--texte);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  font-kerning: normal;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--argile-fonce); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--argile); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--argile); outline-offset: 3px; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 340;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: manual;
  color: var(--texte);
}
::selection { background: var(--paille); color: var(--ombre); }

.saut-dl {
  position: absolute; left: -999px; top: 0.5rem; z-index: 30;
  background: var(--papier); color: var(--ombre); padding: 0.5rem 0.9rem;
}
.saut-dl:focus { left: 0.75rem; }

.conteneur-dl { width: min(100% - 2 * var(--pad), var(--max)); margin-inline: auto; }

/* Petites capitales larges : rubriques, dates, repères */
.etiquette-dl, .pastilles-dl, .numero-dl {
  font-family: var(--large); font-weight: 400; font-size: 0.7rem; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.etiquette-dl { color: var(--gris); }
.pastilles-dl { color: var(--argile-fonce); }
.numero-dl { color: var(--argile); }

/* En-tête */
.en-tete-dl { background: var(--ombre); color: var(--chaux); position: relative; z-index: 5; }
.haut-cadre-dl {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  min-height: 5.25rem; padding-block: 0.8rem;
}
.signe-dl { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--chaux); flex: none; }
.signe-dl:hover { color: var(--chaux); }
.pastille-dl { width: 2.1rem; height: auto; flex: none; color: var(--chaux); }
.pastille-dl .isolant-marque-dl, .marque-bas-dl .isolant-marque-dl { stroke: var(--paille); }
.raison-dl {
  font-family: var(--large); font-weight: 400; font-size: 0.72rem; line-height: 1.45;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.raison-dl > span { display: block; }
.sommaire-dl ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.3rem 1.7rem; }
.sommaire-dl a {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 400; letter-spacing: 0;
  color: var(--chaux-sur-ombre); text-decoration: none; padding-block: 0.35rem;
  border-bottom: 1px solid transparent; white-space: nowrap;
}
.sommaire-dl a:hover, .sommaire-dl a[aria-current="page"] { color: #fff; border-bottom-color: var(--paille); }
/* Contact : bouton, texte blanc sur argile, plus fort que la couleur des liens du menu */
.sommaire-dl li:last-child a.contact-menu-dl {
  color: #fff; background: var(--argile); border: 1px solid var(--argile);
  font-family: var(--large); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.7rem 1.1rem; display: inline-block; line-height: 1.2;
}
.sommaire-dl li:last-child a.contact-menu-dl:hover,
.sommaire-dl li:last-child a.contact-menu-dl[aria-current="page"] { background: var(--argile-fonce); border-color: var(--paille); color: #fff; }
.ouvrir-menu-dl {
  display: none; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.5rem 0.9rem;
  background: transparent; color: var(--chaux); border: 1px solid var(--trait-clair); border-radius: 0;
  font-family: var(--large); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}
.traits-menu-dl { width: 16px; height: 9px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; position: relative; }
.traits-menu-dl::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid currentColor; }
.ouvrir-menu-dl[aria-expanded="true"] .traits-menu-dl { border-color: transparent; }
.ouvrir-menu-dl[aria-expanded="true"] .traits-menu-dl::after { border-top-color: currentColor; }

.contenu-principal-dl { display: block; }

/* Boutons et liens fléchés */
.boutons-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.bouton-dl {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.85rem 1.35rem;
  font-family: var(--large); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; background: var(--argile); color: #fff; border: 1px solid var(--argile);
  transition: background 0.2s ease, color 0.2s ease;
}
.bouton-dl:hover { background: var(--argile-fonce); color: #fff; }
.bouton-dl.creux-dl { background: transparent; color: var(--argile-fonce); }
.bouton-dl.creux-dl:hover { background: var(--argile); color: #fff; }
.bouton-dl.clair-dl { background: var(--chaux); border-color: var(--chaux); color: var(--ombre); }
.bouton-dl.clair-dl:hover { background: #fff; color: var(--ombre); }
.lien-fleche-dl, .archives-dl {
  font-family: var(--large); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--argile-fonce); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.2rem;
  white-space: nowrap;
}
.lien-fleche-dl::after { content: " →"; letter-spacing: 0; }
.lien-fleche-dl:hover { color: var(--argile); border-bottom-width: 2px; }

/* Accueil : ouverture plein cadre */
.chapeau-une-dl {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--ombre); color: var(--chaux);
  min-height: clamp(34rem, calc(100vh - 5.25rem), 54rem);
  display: flex;
}
.fond-une-dl {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 38%;
  filter: sepia(0.28) saturate(0.78) contrast(1.06) brightness(0.86);
}
.voile-une-dl {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(34, 27, 22, 0.72) 0%, rgba(34, 27, 22, 0.1) 30%, rgba(34, 27, 22, 0.28) 55%, rgba(34, 27, 22, 0.94) 100%);
}
.ouverture-grille-dl {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
}
.haut-une-dl { margin: 0; }
.haut-une-dl .etiquette-dl { color: var(--chaux); }
.titre-ouverture-dl { margin: auto 0 0; color: var(--chaux); font-weight: 300; }
.avant-geant-dl {
  display: block; font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 3.1rem); line-height: 1.05; margin-bottom: clamp(0.4rem, 1vw, 1rem);
}
.geant-dl {
  display: block; font-style: normal; font-family: var(--large); font-weight: 250;
  text-transform: uppercase; white-space: nowrap; letter-spacing: -0.02em;
  font-size: min(8.9vw, 8.1rem); line-height: 0.92; color: var(--chaux);
}
.pied-une-dl {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.6rem 2rem;
  border-top: 1px solid var(--trait-clair); padding-top: 1rem;
}
.credit-une-dl { margin: 0; font-size: 0.85rem; color: var(--chaux-sur-ombre); }
.credit-une-dl a, .encart-photo-dl figcaption a { color: inherit; }
.vers-bas-dl {
  font-family: var(--large); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--chaux); text-decoration: none; border-bottom: 1px solid var(--paille); padding-bottom: 0.2rem;
}
.vers-bas-dl::after { content: " ↓"; letter-spacing: 0; }
.vers-bas-dl:hover { color: var(--paille); }

/* Accueil : texte d'ouverture et coupe de mur */
.intro-une-dl { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }
.intro-grille-dl { display: grid; gap: 3rem; align-items: center; }
.chapo-dl {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1.28;
  letter-spacing: -0.01em; margin: 0 0 2.2rem; max-width: 36ch;
}
.coupe-cadre-dl { margin: 0; background: var(--papier); border: 1px solid var(--trait); padding: clamp(1rem, 2.5vw, 2rem); }
.coupe-dl { width: 100%; max-width: 34rem; margin-inline: auto; }
.coupe-dl text { font-family: "Archivo Plan", Arial, sans-serif; font-stretch: 85%; }
.couche-dl { opacity: 0; transform: translateX(-14px); animation: poser-dl 0.6s ease forwards; }
.couche-dl:nth-of-type(2) { animation-delay: 0.15s; }
.couche-dl:nth-of-type(3) { animation-delay: 0.3s; }
.couche-dl:nth-of-type(4) { animation-delay: 0.45s; }
.couche-dl:nth-of-type(5) { animation-delay: 0.6s; }
.couche-dl:nth-of-type(6) { animation-delay: 0.75s; }
.couche-dl:nth-of-type(7) { animation-delay: 0.9s; }
.repere-dl { opacity: 0; animation: apparaitre-dl 0.5s ease 1.2s forwards; }
.fleche-flux-dl { stroke-dasharray: 6 5; animation: flux-dl 1.6s linear infinite; }
@keyframes poser-dl { to { opacity: 1; transform: none; } }
@keyframes apparaitre-dl { to { opacity: 1; } }
@keyframes flux-dl { to { stroke-dashoffset: -22; } }

.chiffres-dl { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--trait-fort); }
.chiffres-dl > div { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem 1rem 0 0; }
.chiffres-dl > div + div { border-left: 1px solid var(--trait); padding-left: clamp(0.8rem, 2vw, 1.6rem); }
.nombre-dl { font-family: var(--serif); font-weight: 250; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; color: var(--texte); letter-spacing: -0.03em; }

/* Titres de parties */
.partie-dl { margin-top: clamp(4rem, 8vw, 7rem); }
.tete-partie-dl {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  border-top: 1px solid var(--trait-fort); padding-top: 1rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.tete-partie-dl h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); flex: 1 1 auto; }
.tete-partie-dl .lien-fleche-dl { margin-left: auto; }
.tete-partie-dl p { margin: 0.2rem 0 0; color: var(--gris); flex-basis: 100%; }

/* Fiches */
.damier-dl { display: grid; gap: clamp(2rem, 3vw, 2.6rem) clamp(1.25rem, 2.5vw, 2.25rem); grid-template-columns: 1fr; }
.fiche-dl { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.fiche-dl .vignette-dl { aspect-ratio: 3 / 2; background: var(--chaux-2); overflow: hidden; }
.fiche-dl .vignette-dl img, .fiche-dl .vignette-dl svg { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.2,1), filter 0.4s ease; }
.fiche-dl:hover .vignette-dl img { transform: scale(1.035); }
.plaque-dl {
  width: 100%; height: 100%; min-height: 8rem; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 0.6rem;
  background: var(--ombre); color: var(--chaux);
}
.plaque-dl span { font-family: var(--large); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paille); }
.plaque-dl strong { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.08; color: var(--chaux); overflow-wrap: anywhere; }
.fiche-dl .corps-fiche-dl { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--trait); padding-top: 0.9rem; }
.intitule-fiche-dl { font-size: clamp(1.3rem, 1.7vw, 1.5rem); font-weight: 380; line-height: 1.15; margin: 0; }
.intitule-fiche-dl a { color: var(--texte); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.35s ease; }
.intitule-fiche-dl a::after { content: ""; position: absolute; inset: 0; }
.fiche-dl:hover .intitule-fiche-dl a { color: var(--argile-fonce); background-size: 100% 1px; }
.details-dl { font-family: var(--large); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); margin: 0; line-height: 1.7; }
.apercu-dl { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--gris); }

/* À la une */
.a-la-une-dl { display: grid; gap: 2rem; }
.a-la-une-dl .grande-dl .intitule-fiche-dl { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 320; line-height: 1.06; }
.a-la-une-dl .grande-dl .vignette-dl { aspect-ratio: 4 / 3; }
.titre-une-dl { margin: 0; }

/* Accueil : encart comparateur, aplat argile et photo */
.encart-outil-dl { margin-top: clamp(4rem, 8vw, 7rem); display: grid; background: var(--argile-fonce); color: #fff; }
.encart-texte-dl { padding: clamp(2.5rem, 6vw, 5.5rem) var(--pad); display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.encart-texte-dl .etiquette-dl { color: #fff; margin: 0; }
.encart-texte-dl h2 { color: #fff; margin: 0; font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 300; line-height: 1.02; max-width: 14ch; }
.encart-texte-dl p:not(.etiquette-dl) { margin: 0 0 0.6rem; max-width: 34rem; color: #fff; }
.encart-photo-dl { margin: 0; position: relative; background: var(--ombre); min-height: 16rem; }
.encart-photo-dl img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; filter: sepia(0.18) saturate(0.85); }
.encart-photo-dl figcaption {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 0.6rem var(--pad) 0.7rem 1rem;
  background: rgba(34, 27, 22, 0.86); color: var(--chaux-sur-ombre); font-size: 0.8rem;
}

/* Accueil : blocs par catégorie */
.theme-dl { display: grid; gap: 2rem; border-top: 1px solid var(--trait-fort); padding-top: 1.4rem; }
.tete-theme-dl { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.tete-theme-dl h2 { margin: 0; font-size: clamp(2.1rem, 3.8vw, 3.2rem); font-weight: 320; }
.tete-theme-dl h2 a { color: inherit; text-decoration: none; }
.tete-theme-dl h2 a:hover { color: var(--argile-fonce); }
.tete-theme-dl p { margin: 0; color: var(--gris); max-width: 30rem; }

/* Accueil : derniers dossiers */
.enchainement-dl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.enchainement-dl li { display: grid; grid-template-columns: 1fr; gap: 0.3rem 2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--trait); align-items: baseline; position: relative; }
.enchainement-dl a { font-family: var(--serif); font-weight: 360; font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.18; text-decoration: none; color: var(--texte); }
.enchainement-dl a::after { content: ""; position: absolute; inset: 0; }
.enchainement-dl li:hover a { color: var(--argile-fonce); }
.cat-ligne-dl { color: var(--argile-fonce); }

/* Fil d'Ariane */
.ariane-dl { font-family: var(--large); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); margin: 0 0 1.6rem; }
.ariane-dl ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ariane-dl li + li::before { content: "/"; margin-right: 0.35rem; }
.ariane-dl a { color: inherit; }

/* Pages de catégorie : aplat sombre et photo */
.tete-rubrique-dl { display: grid; background: var(--ombre); color: var(--chaux); }
.tete-rubrique-texte-dl { padding: clamp(2rem, 5vw, 4.5rem) var(--pad) clamp(2.5rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: flex-end; }
.tete-rubrique-texte-dl .ariane-dl { color: var(--chaux-sur-ombre); margin-bottom: auto; padding-bottom: 2.5rem; }
.tete-rubrique-texte-dl .etiquette-dl { color: var(--chaux-sur-ombre); margin: 0 0 1.6rem; }
.tete-rubrique-texte-dl .numero-dl { color: var(--paille); margin-right: 0.6rem; }
.tete-rubrique-dl h1 { color: var(--chaux); margin: 0 0 1.2rem; font-size: clamp(2.6rem, 5.6vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.accroche-rubrique-dl { margin: 0; max-width: 34rem; font-size: 1.2rem; color: var(--chaux-sur-ombre); }
.tete-rubrique-visuel-dl { position: relative; min-height: 15rem; overflow: hidden; }
.tete-rubrique-visuel-dl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; filter: sepia(0.3) saturate(0.75) brightness(0.9); }
.tete-rubrique-visuel-dl.sans-photo-dl { background: var(--argile-fonce); display: grid; place-items: center; }
.marque-rubrique-dl { width: clamp(6rem, 14vw, 11rem); color: var(--chaux); opacity: 0.9; }
.marque-rubrique-dl .isolant-marque-dl { stroke: var(--paille); }
.autres-rubriques-dl { margin-top: clamp(4rem, 8vw, 6rem); display: flex; flex-direction: column; border-top: 1px solid var(--trait-fort); }
.autres-rubriques-dl a {
  display: flex; align-items: baseline; gap: 1.2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--trait);
  font-family: var(--serif); font-weight: 320; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.1; color: var(--texte); text-decoration: none;
}
.autres-rubriques-dl a::after { content: "→"; margin-left: auto; font-size: 0.7em; color: var(--argile); transition: transform 0.25s ease; }
.autres-rubriques-dl a:hover { color: var(--argile-fonce); }
.autres-rubriques-dl a:hover::after { transform: translateX(0.3rem); }
.autres-rubriques-dl .numero-dl { min-width: 2.2rem; }
.feuilles-dl { display: flex; gap: 1.2rem; justify-content: center; align-items: center; margin-top: 3rem; font-family: var(--large); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.attente-dl { color: var(--gris); font-style: italic; font-size: 1.3rem; }

/* Article */
.lecture-dl { padding-top: clamp(2rem, 4vw, 3.5rem); }
.colonne-lecture-dl { width: min(100% - 2 * var(--pad), var(--lecture)); margin-inline: auto; }
.haut-billet-dl { padding-bottom: 0.4rem; }
.lien-categorie-dl { color: var(--argile-fonce); text-decoration: none; border-bottom: 1px solid currentColor; }
.haut-billet-dl h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight: 300; line-height: 1.03; letter-spacing: -0.02em; margin: 1.1rem 0 1.2rem; }
.haut-billet-dl .chapeau-billet-dl { font-size: clamp(1.2rem, 1.8vw, 1.38rem); line-height: 1.45; font-weight: 340; margin: 0 0 1.6rem; color: var(--texte); }
.haut-billet-dl .details-dl { display: flex; flex-wrap: wrap; gap: 0.2rem 0; border-block: 1px solid var(--trait); padding-block: 0.8rem; }
.haut-billet-dl .details-dl span + span::before { content: "·"; margin-inline: 0.6rem; }
.illustration-dl { width: min(100% - 2 * var(--pad), 64rem); margin: clamp(2rem, 4vw, 3rem) auto 0; }
.illustration-dl img, .illustration-dl svg { width: 100%; background: var(--papier); }
.illustration-dl figcaption { font-size: 0.88rem; color: var(--gris); margin: 0.7rem auto 0; max-width: var(--lecture); line-height: 1.5; }
.corps-billet-dl { display: block; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.table-matieres-dl { margin: 0 0 2.5rem; padding: 1.2rem 0; border-block: 1px solid var(--trait); }
.table-matieres-dl > p { margin: 0 0 0.7rem; font-family: var(--large); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.table-matieres-dl ol { margin: 0; padding-left: 1.4rem; font-size: 1.02rem; }
.table-matieres-dl li { margin-bottom: 0.35rem; }
.table-matieres-dl li::marker { font-family: var(--large); font-size: 0.7rem; color: var(--argile); }
.table-matieres-dl a { text-decoration: none; color: var(--texte); }
.table-matieres-dl a:hover { color: var(--argile-fonce); text-decoration: underline; }

.prose-dl { counter-reset: partie-dl; }
.prose-dl > * + * { margin-top: 1.1em; }
.prose-dl p, .prose-dl ul, .prose-dl ol { margin-bottom: 0; }
.prose-dl h2 { font-size: clamp(1.75rem, 3vw, 2.3rem); font-weight: 340; margin: 3rem 0 0.8rem; scroll-margin-top: 1.5rem; }
.prose-dl h2::before {
  counter-increment: partie-dl; content: counter(partie-dl, decimal-leading-zero);
  display: block; margin-bottom: 0.8rem; padding-top: 1rem; border-top: 1px solid var(--trait);
  font-family: var(--large); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--argile);
}
.prose-dl h3 { font-size: 1.4rem; font-weight: 420; margin: 2rem 0 0.5rem; scroll-margin-top: 1.5rem; }
.prose-dl blockquote { margin: 2rem 0; padding: 0.2rem 0 0.2rem 1.4rem; border-left: 2px solid var(--argile); font-size: 1.22rem; font-style: italic; }
.prose-dl blockquote p { margin: 0; }
.prose-dl table { width: 100%; border-collapse: collapse; font-size: 0.98rem; display: block; overflow-x: auto; font-variant-numeric: tabular-nums; }
.prose-dl th, .prose-dl td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.prose-dl th { font-family: var(--large); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--trait-fort); }
.prose-dl li + li { margin-top: 0.4rem; }
.prose-dl li::marker { color: var(--argile); }
.prose-dl strong { font-weight: 600; color: var(--texte); }
.prose-dl code { font-size: 0.9em; background: var(--chaux-2); padding: 0.05em 0.3em; }
.prose-dl img, .prose-dl svg { margin-block: 1.5rem; }
.prose-dl iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }

.renvoi-outil-dl {
  margin: 2.5rem 0 0; padding: 1.2rem 1.3rem; background: var(--papier); border-left: 2px solid var(--argile);
  display: flex; gap: 1rem; align-items: center;
}
.renvoi-outil-dl svg { width: 2.6rem; flex: none; }
.renvoi-outil-dl p { margin: 0; font-size: 1rem; }

.sources-dl { margin-top: 3rem; font-size: 0.95rem; border-top: 1px solid var(--trait-fort); padding-top: 1.2rem; }
.sources-dl h2 { font-family: var(--large); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.9rem; color: var(--gris); }
.sources-dl ol { padding-left: 1.3rem; margin: 0; }
.sources-dl li + li { margin-top: 0.4rem; }
.signature-dl { display: flex; align-items: center; gap: 0.9rem; margin-top: 2rem; font-size: 1.05rem; font-style: italic; color: var(--texte); }
.marque-signature-dl { width: 2.2rem; flex: none; color: var(--ombre); }
.marque-signature-dl .isolant-marque-dl { stroke: var(--argile); }

.bande-lire-dl { margin-top: clamp(4rem, 8vw, 6rem); background: var(--chaux-2); padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.a-lire-dl .tete-partie-dl h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

/* Comparateur */
.comparateur-dl { background: var(--papier); border: 1px solid var(--trait); padding: clamp(1.2rem, 3vw, 2rem); margin-top: 2rem; }
.reglages-dl { display: grid; gap: 1.2rem; }
.reglages-dl fieldset { border: 0; padding: 0; margin: 0; }
.reglages-dl legend, .reglages-dl label { font-family: var(--large); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.choix-mode-dl { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.choix-mode-dl label { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--trait-fort); padding: 0.5rem 0.8rem; cursor: pointer; }
.choix-mode-dl input:checked + span { color: var(--argile-fonce); }
.choix-mode-dl label:has(input:checked) { border-color: var(--argile); background: var(--chaux); }
.champ-dl { display: flex; flex-direction: column; gap: 0.4rem; }
.champ-dl input[type="number"], .champ-dl select {
  font: inherit; font-size: 1.1rem; padding: 0.5rem 0.65rem; border: 1px solid #7a6c60;
  background: #fff; color: var(--texte); max-width: 16rem; border-radius: 0;
}
.champ-dl input[type="range"] { accent-color: var(--argile); max-width: 24rem; }
.seuils-dl { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seuils-dl button {
  font-family: var(--large); font-size: 0.66rem; letter-spacing: 0.08em; padding: 0.5rem 0.7rem; border-radius: 0;
  border: 1px solid var(--trait-fort); background: var(--chaux); color: var(--texte); cursor: pointer; min-height: 40px;
}
.seuils-dl button:hover, .seuils-dl button[aria-pressed="true"] { border-color: var(--argile); background: var(--argile); color: #fff; }
.resultats-dl { margin-top: 1.8rem; }
.resultats-dl > p { color: var(--gris); margin: 0 0 0.9rem; font-size: 1rem; }
.ligne-isolant-dl { display: grid; grid-template-columns: 1fr; gap: 0.3rem 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--trait); align-items: center; }
.ligne-isolant-dl .nom-dl { font-weight: 500; font-size: 1.05rem; line-height: 1.25; }
.ligne-isolant-dl .nom-dl small { display: block; font-family: var(--large); font-weight: 400; color: var(--gris); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.2rem; }
.piste-dl { position: relative; height: 1rem; background: var(--chaux-2); }
.barre-dl { position: absolute; top: 0; bottom: 0; left: 0; background: var(--argile); transition: width 0.5s cubic-bezier(.2,.8,.2,1); }
.barre-dl.plage-dl { background: rgba(155, 67, 38, 0.3); }
.barre-dl.famille-mineral { background: #6f7f8f; }
.barre-dl.famille-synthetique { background: #8a6f9e; }
.barre-dl.plage-dl.famille-mineral { background: rgba(111, 127, 143, 0.3); }
.barre-dl.plage-dl.famille-synthetique { background: rgba(138, 111, 158, 0.3); }
.repere-seuil-dl { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ombre); }
.valeur-dl { font-size: 1rem; font-variant-numeric: tabular-nums; }
.legende-outil-dl { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.92rem; color: var(--gris); margin-top: 1rem; }
.legende-outil-dl i { display: inline-block; width: 0.9rem; height: 0.6rem; vertical-align: middle; margin-right: 0.35rem; }
.lambda-perso-dl { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--trait); }

/* Pages simples (à propos, plan, crédits, mentions, 404) */
.page-simple-dl { width: min(100% - 2 * var(--pad), var(--lecture)); margin-inline: auto; padding-top: clamp(2rem, 4vw, 3.5rem); }
.page-simple-dl h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 300; line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 1.5rem; }
.page-simple-dl > p .bouton-dl { margin: 0.4rem 0.6rem 0.4rem 0; }
.plan-dl ul { padding-left: 1.2rem; }
.plan-dl h2 { font-size: 1.8rem; margin: 2.5rem 0 0.8rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.credits-dl li { margin-bottom: 0.9rem; }
.titre-bas-dl { font-family: var(--large); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1rem; }

/* Comparateur et pages qui gardent l'ancienne mise en page d'article */
.conteneur-dl > .ariane-dl:first-child { padding-top: clamp(1.75rem, 3.5vw, 3rem); }
.conteneur-dl > .haut-billet-dl { max-width: 50rem; }
.conteneur-dl > .corps-billet-dl .prose-dl { max-width: var(--lecture); }
.conteneur-dl > .a-lire-dl { margin-top: clamp(3rem, 6vw, 5rem); background: var(--chaux-2); padding: clamp(1.5rem, 3vw, 2.5rem); }

/* Contact */
.page-contact-dl { display: grid; }
.contact-texte-dl { background: var(--ombre); color: var(--chaux); padding: clamp(2rem, 5vw, 4.5rem) var(--pad); }
.contact-texte-dl .ariane-dl { color: var(--chaux-sur-ombre); margin-bottom: 2.5rem; }
.contact-texte-dl .etiquette-dl { color: var(--chaux-sur-ombre); margin: 0 0 1.6rem; }
.contact-texte-dl h1 { color: var(--chaux); font-size: clamp(2.6rem, 5.6vw, 4.8rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; margin: 0 0 2rem; }
.contact-texte-dl p { max-width: 34rem; color: var(--chaux-sur-ombre); }
.contact-courriel-dl { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-style: italic; }
.contact-courriel-dl a { color: var(--paille); overflow-wrap: anywhere; }
.contact-courriel-dl a:hover { color: #fff; }
.contact-formulaire-dl { padding: clamp(2rem, 5vw, 4.5rem) var(--pad); background: var(--papier); }
.contact-formulaire-dl #contact-form { margin: 0; max-width: 36rem; }
.contact-formulaire-dl #contact-form > label:not(.consent-contact) { font-family: var(--large); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 1.4rem 0 0.5rem; }
.contact-formulaire-dl #contact-form > label:first-child { margin-top: 0; }
.contact-formulaire-dl #contact-form input:not([type=checkbox]), .contact-formulaire-dl #contact-form textarea {
  border: 0; border-bottom: 1px solid #7a6c60; background: transparent; color: var(--texte); padding: 0.6rem 0; font-size: 1.15rem; border-radius: 0;
}
.contact-formulaire-dl #contact-form textarea { border: 1px solid #7a6c60; padding: 0.7rem; background: #fff; }
.contact-formulaire-dl #contact-form input:not([type=checkbox]):focus, .contact-formulaire-dl #contact-form textarea:focus { outline: 2px solid var(--argile); outline-offset: 2px; }
.contact-formulaire-dl #contact-form .consent-contact { font-size: 0.98rem; line-height: 1.4; margin: 1.6rem 0; }
.contact-formulaire-dl #contact-form .consent-contact input { accent-color: var(--argile); }
.contact-formulaire-dl #contact-form button {
  background: var(--argile); color: #fff; border-radius: 0; min-height: 50px; padding: 0.85rem 1.8rem;
  font-family: var(--large); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.contact-formulaire-dl #contact-form button:hover { background: var(--argile-fonce); }
.contact-formulaire-dl #contact-status { margin-top: 1rem; font-size: 1.05rem; }

/* Pied de page */
.socle-dl { background: var(--ombre); color: var(--chaux-sur-ombre); margin-top: clamp(4rem, 8vw, 7rem); padding-block: clamp(3rem, 6vw, 5rem) 1.5rem; font-size: 1rem; overflow: hidden; }
.bande-lire-dl + .socle-dl { margin-top: 0; }
.socle-dl a { color: var(--chaux); }
.socle-dl a:hover { color: var(--paille); }
.bas-int-dl { display: grid; gap: 2.4rem; }
.colonne-bas-dl p { margin: 0 0 0.8rem; max-width: 30rem; }
.colonne-bas-dl ul { list-style: none; padding: 0; margin: 0; }
.colonne-bas-dl li + li { margin-top: 0.45rem; }
.socle-dl .titre-bas-dl { color: var(--paille); }
.marque-bas-dl { width: 2.6rem; color: var(--chaux); margin-bottom: 1.2rem; }
.devise-bas-dl { font-size: 1.45rem; font-style: italic; font-weight: 300; line-height: 1.25; color: var(--chaux); }
.nom-geant-dl {
  margin: clamp(3rem, 6vw, 5rem) 0 0; font-family: var(--large); font-weight: 200; text-transform: uppercase;
  font-size: min(7.05vw, 6.4rem); line-height: 0.95; letter-spacing: -0.02em; white-space: nowrap; color: var(--paille);
}
.legal-dl { border-top: 1px solid var(--trait-clair); margin-top: 1.4rem; padding-top: 1.1rem; font-size: 0.86rem; color: var(--chaux-sur-ombre); }

@media (min-width: 40rem) {
  .damier-dl, .damier-dl.deux-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enchainement-dl li { grid-template-columns: 11rem minmax(0, 1fr) auto; }
}
@media (min-width: 56rem) {
  .intro-grille-dl { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
  .damier-dl.trois-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-la-une-dl { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2.6rem; }
  .a-la-une-dl .grande-dl { grid-row: span 3; }
  .a-la-une-dl .fiche-dl:not(.grande-dl) { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
  .a-la-une-dl .fiche-dl:not(.grande-dl) .vignette-dl { aspect-ratio: 4 / 3; }
  .a-la-une-dl .fiche-dl:not(.grande-dl) .corps-fiche-dl { border-top: 0; padding-top: 0; }
  .a-la-une-dl .fiche-dl:not(.grande-dl) + .fiche-dl:not(.grande-dl) { border-top: 1px solid var(--trait); padding-top: 2rem; }
  .encart-outil-dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .encart-texte-dl, .contact-texte-dl { padding-left: max(var(--pad), calc((100vw - var(--max)) / 2)); }
  .theme-dl { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); }
  .tete-theme-dl { position: sticky; top: 2rem; align-self: start; }
  .tete-rubrique-dl { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 30rem; }
  .tete-rubrique-texte-dl { padding-left: max(var(--pad), calc((100vw - var(--max)) / 2)); }
  .bas-int-dl { grid-template-columns: 1.5fr 1fr 1fr; }
  .reglages-dl { grid-template-columns: 1fr 1fr; }
  .ligne-isolant-dl { grid-template-columns: 14rem 1fr 8rem; }
  .page-contact-dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 40rem; }
}

/* Menu : en dessous de 72rem, le menu se replie derrière le bouton */
@media (max-width: 71.99rem) {
  .haut-cadre-dl { flex-wrap: wrap; min-height: 4.5rem; }
  .signe-dl { flex: 1; min-width: 0; }
  .ouvrir-menu-dl { display: inline-flex; }
  .sommaire-dl { display: none; width: 100%; }
  .sommaire-dl.menu-ouvert-dl { display: block; border-top: 1px solid var(--trait-clair); }
  .sommaire-dl ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0 1rem; }
  .sommaire-dl a { display: block; padding: 0.85rem 0; font-size: 1.35rem; font-weight: 300; border-bottom: 1px solid var(--trait-clair); white-space: normal; }
  .sommaire-dl li:last-child a.contact-menu-dl { margin-top: 1.2rem; text-align: center; padding: 1rem; }
}
@media (min-width: 72rem) {
  .table-matieres-dl { position: fixed; top: 50%; right: 1.4rem; transform: translateY(-50%); border: 0; padding: 0; margin: 0; z-index: 10; }
  .table-matieres-dl > p { display: none; }
  .table-matieres-dl ol { list-style: none; margin: 0; padding: 0; }
  .table-matieres-dl li { margin: 0; }
  .table-matieres-dl a { position: relative; display: block; width: 26px; height: 5px; margin: 13px 0 13px auto; background: var(--ombre); opacity: 0.75; transition: width 0.2s ease, background 0.2s ease, opacity 0.2s ease; }
  .table-matieres-dl a:hover, .table-matieres-dl a:focus-visible { width: 38px; background: var(--argile); opacity: 1; }
  .table-matieres-dl a span {
    display: none; position: absolute; width: 18rem; right: calc(100% + 1rem); top: 50%; transform: translateY(-50%);
    padding: 0.8rem 1rem; background: #fff; box-shadow: 0 10px 30px rgba(34, 27, 22, 0.18); border-left: 2px solid var(--argile);
    color: var(--texte); font-size: 1rem; line-height: 1.35; white-space: normal;
  }
  .table-matieres-dl a:hover span, .table-matieres-dl a:focus span { display: block; }
}
@media (max-width: 30rem) {
  body { font-size: 1.08rem; }
  .raison-dl { font-size: 0.62rem; letter-spacing: 0.12em; }
  .chiffres-dl > div { padding-right: 0.4rem; }
  .chiffres-dl .etiquette-dl { font-size: 0.6rem; letter-spacing: 0.08em; }
  .tete-partie-dl .lien-fleche-dl { margin-left: 0; }
  .lien-fleche-dl { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .couche-dl, .repere-dl { opacity: 1; transform: none; }
}

@media print {
  .en-tete-dl, .socle-dl, .table-matieres-dl, .bande-lire-dl, .encart-outil-dl { display: none; }
}
.contenu-principal-dl:has(> .page-contact-dl:last-child) + .socle-dl { margin-top: 0; }
.contenu-principal-dl:has(> .bande-lire-dl:last-child) + .socle-dl { margin-top: 0; }
.insecable-dl { white-space: nowrap; }
.en-tete-dl :focus-visible, .chapeau-une-dl :focus-visible, .socle-dl :focus-visible, .tete-rubrique-dl :focus-visible, .contact-texte-dl :focus-visible, .encart-outil-dl :focus-visible { outline-color: var(--paille); }
@media (max-width: 71.99rem) { .sommaire-dl li:last-child a.contact-menu-dl { display: block; } }