/* thermogramme.fr — feuille de style v3
   Système typographique instrumental : Archivo Expanded en titrage, Archivo en lecture,
   IBM Plex Mono pour les étiquettes et les relevés.
   La rampe thermique est la langue de l'interface : bout froid pour les liens,
   bout chaud pour les appels à l'action. Rien n'est décoratif par hasard. */

:root {
  /* rampe thermique */
  --froid:   #2b2170;
  --indigo:  #3b2e8f;
  --magenta: #a8376f;
  --braise:  #d9663c;
  --ambre:   #e2853a;
  --or:      #f3bb42;

  /* surfaces */
  --nuit:    #0a0f1c;
  --nuit-2:  #121a2b;
  --nuit-3:  #1b2439;
  --bord-n:  #26304a;
  --clair:   #f5f6f8;
  --blanc:   #ffffff;
  --bord:    #dfe2e9;
  --bord-f:  #bcc2d0;

  /* textes */
  --encre:   #131828;
  --attenue: #616a80;
  --sur-nuit:    #e9ebf3;
  --sur-nuit-att:#8d97b0;

  --alerte:   #8f3620;
  --alerte-c: #fbf0ec;

  --display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --texte:   'Archivo', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
  --mesure: 66ch;
  --r: 10px;
}

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

/* lien d'évitement : invisible jusqu'à la tabulation, indispensable au clavier */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--or); color: #241704; padding: .6rem 1.1rem;
  font-weight: 600; text-decoration: none; border-radius: 0 0 var(--r) 0;
}
.evitement:focus { left: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--nuit); }

body {
  margin: 0;
  background: var(--clair);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16.5px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.3rem, 6vw, 4.1rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-top: 2.8rem; }
h3 { font-size: 1.18rem; margin-top: 2rem; letter-spacing: -0.02em; }

p, li { max-width: var(--mesure); }
p { margin: 0 0 1.15em; }
strong { font-weight: 600; }

a { color: var(--indigo); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; border-radius: 2px; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--bord); margin: 2.5rem 0; }

/* étiquette monospace : la voix « relevé d'instrument » */
.eyebrow, .etiquette, .meta-article, .surtitre {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--attenue);
  display: block;
  margin-bottom: .5rem;
}
.eyebrow .idx { color: var(--ambre); margin-right: .7rem; }

.enveloppe { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.75rem); }
.etroit { max-width: 730px; }

/* trait thermique : gradient froid → chaud, utilisé comme filet de section */
.filet {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--froid), var(--magenta), var(--ambre), var(--or));
}

/* ---------- surfaces sombres ---------- */
.nuit {
  background: var(--nuit);
  color: var(--sur-nuit);
  position: relative;
  overflow: hidden;
}
.nuit::after {  /* grain discret */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 3px 3px;
}
.nuit > * { position: relative; z-index: 1; }
.nuit h1, .nuit h2, .nuit h3 { color: #fff; }
.nuit p { color: #b3bcd2; }
.nuit a { color: var(--or); }
.nuit .eyebrow, .nuit .meta-article, .nuit .surtitre { color: var(--sur-nuit-att); }

/* repère de prix indicatif, sur les fiches produit */
.prix-indicatif { margin: .5rem 0 0; }
.prix-indicatif .terme {
  font-family: var(--mono); font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  color: var(--attenue); border-bottom-color: var(--bord-f); cursor: help;
}

/* ---------- en-tête ---------- */
header.site { background: var(--nuit); color: var(--sur-nuit); border-bottom: 1px solid var(--bord-n); }
header.site .enveloppe { display: flex; align-items: center; gap: 2rem; padding-block: .9rem; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff; }
.marque svg { width: 28px; height: 28px; display: block; }
.marque span {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  /* le T ouvre large : on compense optiquement pour aligner sur le bloc du logo */
  margin-left: -.06em;
  color: #ffffff;
}
.marque:hover { text-decoration: none; }
header.site nav { display: flex; gap: 1.6rem; margin-left: auto; }
header.site nav a {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sur-nuit-att); text-decoration: none; padding: .2rem 0;
  border-bottom: 1px solid transparent; white-space: nowrap;
}
header.site nav a:hover, header.site nav a[aria-current] { color: #fff; border-bottom-color: var(--ambre); }

/* bouton hamburger : masqué par défaut, montré sous le point de rupture mobile */
/* bouton hamburger : masqué par défaut, montré sous le point de rupture mobile.
   Zone cliquable volontairement plus grande que le dessin visuel (44px minimum,
   recommandation d'accessibilité tactile), pour ne jamais être raté du pouce. */
.bouton-menu {
  display: none; margin-left: auto; margin-right: -.5rem;
  width: 48px; height: 48px; padding: 0;
  background: none; border: 0; cursor: pointer; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  position: relative; z-index: 5;
}
.bouton-menu span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 1px; pointer-events: none; }
.bouton-menu:active span { background: var(--or); }

/* menu déroulant plein-largeur. Masqué par défaut : l'attribut HTML "hidden" doit rester
   prioritaire sur toute taille d'écran, sinon un simple display:flex ci-dessous suffirait à
   le rendre visible en permanence, y compris sur ordinateur où il ne devrait jamais paraître. */
.menu-mobile {
  display: flex; flex-direction: column; background: var(--nuit-2);
  border-top: 1px solid var(--bord-n);
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile a {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sur-nuit-att); text-decoration: none; padding: .9rem 0;
  border-bottom: 1px solid var(--bord-n);
}
.menu-mobile a:hover, .menu-mobile a[aria-current] { color: #fff; }

/* Cinq entrées de menu ne tiennent plus sur une ligne sous 860 px : le menu déroulant prend le
   relais dès cette largeur (valeur reprise dans termes.js pour la fermeture au redimensionnement). */
@media (max-width: 860px) {
  header.site > .enveloppe > nav { display: none; }
  .bouton-menu { display: flex; }
}
@media (max-width: 640px) {
  .marque svg { width: 34px; height: 34px; }
  .marque span { font-size: 1.28rem; }
}


/* ---------- héros ---------- */
.heros { padding: clamp(2.8rem, 7vw, 5.5rem) 0 0; }
.heros h1 { letter-spacing: -0.045em; max-width: 15ch; }
.heros .grille { display: grid; gap: clamp(2rem, 4vw, 3.2rem); align-items: center; }
@media (min-width: 920px) { .heros .grille { grid-template-columns: 1.04fr .96fr; } }
.chapo { font-size: 1.1rem; line-height: 1.55; }
.heros .chapo { font-size: 1.17rem; }

.actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.7rem; }

/* Bouton principal : la rampe thermique elle-même comme matière du bouton, pas une couleur
   plate posée dessus. Le dégradé se déplace légèrement au survol, comme un point chaud qui
   se propage — écho discret du balayage déjà utilisé sur les visuels du site. */
.bouton {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(100deg, var(--magenta) 0%, var(--braise) 55%, var(--ambre) 100%);
  background-size: 160% 100%; background-position: 0% 0%;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18);
  padding: .72rem 1.4rem; border-radius: 8px; text-decoration: none;
  font-family: var(--texte); font-weight: 600; font-size: .95rem;
  box-shadow: 0 4px 16px -4px rgba(168,55,96,.55);
  transition: background-position .28s ease, box-shadow .2s ease, transform .15s ease;
}
.bouton:hover {
  background-position: 100% 0%; text-decoration: none;
  box-shadow: 0 6px 22px -4px rgba(216,102,60,.6); transform: translateY(-1px);
}
.bouton:active { transform: translateY(0); box-shadow: 0 3px 12px -4px rgba(168,55,96,.55); }
.bouton.fantome {
  background: transparent; background-size: auto; box-shadow: none; text-shadow: none;
  color: var(--sur-nuit); border: 1px solid var(--bord-n); font-weight: 500;
}
.bouton.fantome:hover {
  background: var(--nuit-3); border-color: #3a4766; color: #fff; transform: none;
}
/* la règle .nuit a (0,1,1) prime sur .bouton (0,1,0) : on rétablit explicitement */
.nuit a.bouton, .nuit a.bouton:hover { color: #fff; }
.nuit a.bouton.fantome { color: var(--sur-nuit); }
.nuit a.bouton.fantome:hover { color: #fff; }

figure { margin: 0; }
.cadre-img {
  background: var(--nuit-2); border: 1px solid var(--bord-n);
  border-radius: var(--r); padding: 1.1rem; overflow: hidden;
}
.cadre-img > svg { border-radius: 4px; }
.cadre-img figcaption {
  color: var(--sur-nuit-att); font-size: .84rem; line-height: 1.5;
  margin-top: .9rem; max-width: none;
}

.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  border-top: 1px solid var(--bord-n); margin-top: clamp(2.4rem, 5vw, 4rem);
}
.chiffres div { padding: 1.25rem 1rem 1.6rem; border-right: 1px solid var(--bord-n); }
.chiffres div:last-child { border-right: 0; }
.chiffres b {
  display: block; font-family: var(--display); font-size: 2.1rem; font-weight: 700;
  color: #fff; line-height: 1; letter-spacing: -0.04em; margin-bottom: .35rem;
}
.chiffres span {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sur-nuit-att); line-height: 1.5; display: block;
}

/* Sur mobile, le visuel d'en-tête et le bandeau de chiffres prennent trop de hauteur avant
   d'atteindre le contenu utile : on resserre l'espace sans rien supprimer. */
@media (max-width: 640px) {
  .cadre-img { padding: .75rem; }
  .cadre-img figcaption {
    font-size: .76rem; margin-top: .55rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .chiffres {
    grid-template-columns: repeat(2, 1fr); margin-top: 1.6rem;
    row-gap: .9rem; column-gap: 0;
  }
  .chiffres div { padding: .5rem .3rem .2rem; border-right: 0; }
  .chiffres div:nth-child(odd) { border-right: 1px solid var(--bord-n); }
  .chiffres b { font-size: 1.7rem; margin-bottom: .15rem; }
  .chiffres span { font-size: .62rem; letter-spacing: .05em; line-height: 1.3; }
  .heros { padding-bottom: 1.6rem; }
  .actions {
    flex-wrap: nowrap; gap: .5rem; margin-top: 1.4rem;
  }
  .actions .bouton {
    flex: 1 1 0; justify-content: center;
    padding: .58rem .5rem; font-size: .82rem; gap: .3rem;
  }
}

main { padding-bottom: 4.5rem; }
section.bloc { padding: clamp(2.6rem, 5.5vw, 4.2rem) 0; }
section.bloc.clair { background: var(--blanc); border-block: 1px solid var(--bord); }
section.bloc > .enveloppe > h2:first-of-type,
section.bloc > .enveloppe > .eyebrow + h2 { margin-top: 0; }

/* ---------- cartes ---------- */
.cartes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
.carte {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, border-color .18s ease;
}
section.clair .carte { background: var(--clair); }
.carte:hover { box-shadow: 0 10px 26px rgba(10,15,28,.08); border-color: var(--bord-f); }
.carte .vignette { display: block; background: var(--nuit-2); position: relative; }
.carte .vignette img.thermo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.carte .vignette img {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 1;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
}
.carte .vignette { overflow: hidden; }
.carte .vignette::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--froid), var(--magenta), var(--ambre), var(--or));
}
.carte .corps { padding: 1.1rem 1.25rem 1.4rem; }
.carte h3 { margin: 0 0 .45rem; font-size: 1.08rem; }
.carte h3 a { color: inherit; text-decoration: none; }
.carte h3 a:hover { text-decoration: underline; text-decoration-color: var(--ambre); }
.carte p { font-size: .91rem; color: var(--attenue); margin: 0; max-width: none; line-height: 1.55; }

/* profils */
.profils { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.profils li { border-top: 1px solid var(--bord); max-width: none; }
.profils li:last-child { border-bottom: 1px solid var(--bord); }
.profils a {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center;
  padding: 1.05rem .3rem; text-decoration: none; color: var(--encre);
  transition: background .2s ease, padding-left .22s cubic-bezier(.3,.8,.3,1);
}
.profils a:hover { background: var(--blanc); padding-left: .9rem; }
section.clair .profils a:hover { background: var(--clair); }
.profils .puce {
  width: 10px; height: 34px; border-radius: 3px;
  transition: height .22s cubic-bezier(.3,.8,.3,1), width .22s ease;
}
.profils a:hover .puce { height: 44px; width: 13px; }
.profils .fleche { transition: transform .22s cubic-bezier(.3,.8,.3,1), color .2s ease; }
.profils a:hover .fleche { transform: translateX(4px); }
.tp { font-family: var(--display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.025em; }
.profils .fleche { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--attenue); }
.profils a:hover .fleche { color: var(--ambre); }

/* ---------- infobulles ---------- */
.terme {
  border-bottom: 1px dashed var(--bord-f); cursor: help; color: inherit;
  text-decoration: none;
}
.terme:hover { border-bottom-color: var(--ambre); }
.nuit .terme { border-bottom-color: #4a567a; }
.bulle {
  position: absolute; z-index: 60; max-width: 330px;
  background: var(--nuit); color: var(--sur-nuit); padding: .8rem .95rem;
  border: 1px solid var(--bord-n); border-radius: 8px;
  font-size: .86rem; line-height: 1.5;
  box-shadow: 0 12px 38px rgba(10,15,28,.35);
}
.bulle b {
  color: var(--or); display: block; margin-bottom: .3rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- comparateur ---------- */
.reglages {
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--r); padding: 1.45rem; margin-bottom: 1.7rem;
}
.reglages h2 {
  margin: 0 0 .85rem; font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--attenue);
}
.reglages h2:not(:first-child) { margin-top: 1.6rem; }
.profil-choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.profil-choix button {
  font-family: var(--texte); font-size: .88rem; font-weight: 500;
  padding: .45rem .95rem; border-radius: 999px;
  background: var(--clair); color: var(--encre); border: 1px solid var(--bord);
  cursor: pointer; transition: all .15s ease;
}
.profil-choix button:hover { border-color: var(--ambre); }
.profil-choix button[aria-pressed="true"] {
  background: var(--nuit); color: #fff; border-color: var(--nuit);
}
.curseurs { display: grid; gap: 1rem 1.7rem; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.curseur { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; align-items: center; }
.curseur label { font-size: .85rem; color: var(--attenue); }
.curseur output { font-family: var(--mono); font-size: .8rem; color: var(--encre); }
.curseur input { grid-column: 1 / -1; width: 100%; accent-color: var(--indigo); }
.filtres-grille {
  display: grid; gap: .9rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}
.filtres-grille label { display: grid; gap: .28rem; font-size: .84rem; color: var(--attenue); }
.filtres-grille select {
  font-family: var(--texte); font-size: .88rem; color: var(--encre);
  padding: .4rem .5rem; border: 1px solid var(--bord); border-radius: 6px;
  background: var(--blanc);
}
.filtres-grille select:not([value="tous"]) { border-color: var(--bord); }
.filtres-cases {
  display: grid; gap: .5rem 1.4rem; margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--bord);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.filtres-cases label {
  display: flex; align-items: flex-start; gap: .5rem; font-size: .87rem; cursor: pointer;
}
.filtres-cases input[type="checkbox"] { accent-color: var(--indigo); margin-top: .22rem; flex: none; }
.raz { margin: 1.1rem 0 0; }
.raz button {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  background: none; border: 1px solid var(--bord); border-radius: 999px;
  padding: .35rem .85rem; cursor: pointer; color: var(--attenue);
}
.raz button:hover { border-color: var(--ambre); color: var(--encre); }

.tableau-hote {
  overflow-x: auto; background: var(--blanc);
  border: 1px solid var(--bord); border-radius: var(--r);
}
table.comparateur { border-collapse: collapse; width: 100%; font-size: .89rem; }
table.comparateur th, table.comparateur td {
  padding: .6rem .55rem; text-align: right; border-bottom: 1px solid var(--bord);
}
table.comparateur td { white-space: nowrap; }
table.comparateur th {
  font-family: var(--mono); font-weight: 500; color: var(--attenue);
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  position: sticky; top: 0; background: var(--blanc); z-index: 2;
  border-bottom: 1px solid var(--bord-f);
  white-space: normal; line-height: 1.25; max-width: 5.5em;
}
table.comparateur th:first-child, table.comparateur td:first-child { text-align: left; }
table.comparateur th[data-tri] { cursor: pointer; user-select: none; }
table.comparateur th .terme { cursor: help; border-bottom-style: dotted; }
table.comparateur th .terme:hover { color: var(--encre); border-bottom-color: var(--ambre); }
table.comparateur th[data-tri]:hover { color: var(--encre); }
table.comparateur tbody tr { transition: background .12s ease; }
table.comparateur tbody tr:hover { background: var(--clair); }
table.comparateur tbody td:not(:first-child) { font-family: var(--mono); font-size: .84rem; }
table.comparateur tr.non-publiable td { color: var(--attenue); }
.nom-produit { font-weight: 600; font-family: var(--texte); }
.nom-produit a { color: inherit; text-decoration: none; }
.nom-produit a:hover { text-decoration: underline; text-decoration-color: var(--ambre); }
.sous-nom {
  display: block; font-family: var(--mono); font-size: .69rem; letter-spacing: .06em;
  color: var(--attenue); font-weight: 400; margin-top: .15rem;
}
.cellule-note { display: inline-flex; align-items: center; gap: .4rem; }
.barre-note { width: 34px; height: 6px; background: var(--bord); border-radius: 3px; overflow: hidden; flex: none; }
.barre-note span { display: block; height: 100%; }
.cellule-note.partielle { cursor: help; }
.cellule-note.partielle .valeur-note { color: var(--attenue); }
.note-profil.incomplet { cursor: help; }
.note-profil.incomplet .lib { color: var(--bord-f); }
.sans-note {
  display: inline-block; font-family: var(--mono); font-size: .64rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--attenue); white-space: nowrap;
  border: 1px solid var(--bord); border-radius: 999px;
  padding: .1rem .4rem; cursor: help;
}

/* ---------- fiche produit ---------- */
.entete-fiche { display: grid; gap: 2rem; align-items: start; padding-bottom: 2rem; margin-bottom: 1.8rem; }
@media (min-width: 900px) { .entete-fiche { grid-template-columns: 1.08fr .92fr; } }
.entete-fiche h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.badges li {
  font-family: var(--mono); font-size: .71rem; letter-spacing: .05em;
  padding: .28rem .7rem; border: 1px solid var(--bord-f); border-radius: 999px; max-width: none;
}
.badges li.ok { border-color: #2f7f74; color: #1f6055; background: #e8f4f1; }
.badges li.warn { border-color: #c08a3c; color: #7f5715; background: #fdf4e6; }
.badges li.stop { border-color: var(--alerte); color: var(--alerte); background: var(--alerte-c); }
.notes-profil {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 0 0 1.4rem; border-top: 1px solid var(--bord);
}
.note-profil {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .7rem;
  border-bottom: 1px solid var(--bord); padding: .6rem .2rem; font-size: .87rem;
}
.note-profil .lib { color: var(--attenue); }
.note-profil .val { font-family: var(--display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.04em; }
.confiance { display: flex; align-items: center; gap: .8rem; font-size: .87rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.jauge { width: 140px; height: 6px; background: var(--bord); border-radius: 3px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: linear-gradient(90deg, var(--magenta), var(--ambre)); }

table.specs { border-collapse: collapse; width: 100%; max-width: 880px; font-size: .91rem; margin-bottom: 1.4rem; }
table.specs caption {
  text-align: left; font-family: var(--display); font-size: 1.12rem; font-weight: 600;
  letter-spacing: -0.025em; padding: 1.9rem 0 .6rem;
}
table.specs th, table.specs td { padding: .52rem .7rem; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; }
table.specs th { font-weight: 400; color: var(--attenue); width: 46%; }
table.specs td { background: var(--blanc); font-family: var(--mono); font-size: .85rem; }
.nd { color: var(--attenue); font-style: italic; font-family: var(--texte); }
.na { color: var(--bord-f); font-family: var(--texte); }

.avertissement {
  border-left: 3px solid var(--braise); background: var(--alerte-c);
  padding: .95rem 1.15rem; margin: 1.4rem 0; max-width: var(--mesure);
  border-radius: 0 8px 8px 0;
}
.avertissement p { margin: 0; }
.divulgation {
  border-left: 3px solid var(--indigo); background: #eeedf8;
  padding: .9rem 1.15rem; font-size: .9rem; margin: 0 0 1.9rem;
  max-width: var(--mesure); border-radius: 0 8px 8px 0;
}
.divulgation p { margin: 0; }

ul.sources { list-style: none; padding: 0; font-size: .87rem; }
ul.sources li { border-top: 1px solid var(--bord); padding: .6rem 0; max-width: 880px; }
ul.sources .champ { font-family: var(--mono); font-size: .73rem; letter-spacing: .05em; color: var(--attenue); }

/* ---------- articles ---------- */
.entete-article { padding: clamp(2.4rem, 5.5vw, 4rem) 0 0; }
.entete-article .grille { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
@media (min-width: 920px) { .entete-article .grille { grid-template-columns: 1.05fr .95fr; } }
.entete-article h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.entete-article .chiffres { margin-top: clamp(2rem, 4vw, 3rem); }
.entete-article:not(:has(.chiffres)) { padding-bottom: clamp(2.4rem, 5.5vw, 4rem); }
.entete-article h1 { max-width: 19ch; }

/* Un peu d'air sous le dernier chiffre sur mobile, pour toutes les pages construites avec
   entete() (comparateur, méthodologie, articles) : placé ici, après la règle de base
   .entete-article, pour être sûr de la remplacer dans l'ordre du fichier. */
@media (max-width: 640px) {
  .entete-article { padding-bottom: 1.6rem; }
}

article.texte { padding-top: 2.4rem; }
article.texte > p:first-of-type::first-letter {
  font-family: var(--display); font-weight: 700; font-size: 3.1rem; line-height: .82;
  float: left; margin: .1em .12em 0 0; color: var(--braise);
}
article.texte h2 { font-size: 1.55rem; }
article.texte figure { margin: 2.4rem 0; }
article.texte figure svg { display: block; width: 100%; height: auto; background: var(--nuit-2); border-radius: var(--r); }
article.texte figcaption { font-size: .85rem; color: var(--attenue); margin-top: .7rem; max-width: var(--mesure); line-height: 1.5; }
.exergue {
  font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 600;
  line-height: 1.22; letter-spacing: -0.03em;
  border-left: 3px solid var(--ambre); padding-left: 1.2rem; margin: 2.4rem 0;
  max-width: 40ch;
}
table.donnees { border-collapse: collapse; width: 100%; max-width: 720px; font-size: .88rem; margin: 1.8rem 0; }
table.donnees th, table.donnees td { padding: .52rem .7rem; border-bottom: 1px solid var(--bord); text-align: left; }
table.donnees thead th {
  font-family: var(--mono); color: var(--attenue); font-weight: 500;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
}
table.donnees tbody td { font-family: var(--mono); font-size: .84rem; }
table.donnees tbody td:first-child, table.donnees tbody th { font-family: var(--texte); font-size: .88rem; }
table.donnees td.n { text-align: right; }

footer.site { background: var(--nuit); color: var(--sur-nuit-att); padding: 3rem 0 2rem; font-size: .88rem; }
footer.site a { color: #d6dcec; }
.pied-grille { display: grid; gap: 2.2rem 3rem; }
@media (min-width: 760px) { .pied-grille { grid-template-columns: 1.5fr .8fr 1.2fr; } }
.pied-marque .marque { margin-bottom: .9rem; }
.pied-marque p { color: #7e89a6; font-size: .86rem; line-height: 1.55; max-width: 42ch; margin: 0; }
footer.site .eyebrow { color: #6b7797; margin-bottom: .8rem; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: .5rem; max-width: none; font-size: .88rem; }
footer.site nav a { text-decoration: none; color: #b8c2d8; }
footer.site nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--ambre); }
.pied-engagements li { position: relative; padding-left: 1.15rem; color: #7e89a6; line-height: 1.5; }
.pied-engagements li::before {
  content: "·"; position: absolute; left: .15rem; color: var(--ambre);
  font-family: var(--mono); font-weight: 600;
}
.pied-bas {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid #1d2740;
  font-family: var(--mono); font-size: .71rem; letter-spacing: .07em;
  text-transform: uppercase; color: #5c6884;
}
.note-bas { font-size: .85rem; color: var(--attenue); }
.journal { list-style: none; padding: 0; font-size: .89rem; }
.journal li { border-top: 1px solid var(--bord); padding: .65rem 0; max-width: var(--mesure); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ---------- vie de l'image du héros ---------- */
/* Seule image animée du site. Le capteur rafraîchit : un balayage la traverse et la
   scène respire entre trois relevés. Partout ailleurs, les visuels sont fixes. */

@keyframes balayage {
  0%   { transform: translateX(-34%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(134%); opacity: 0; }
}
.balayage { animation: balayage 5.2s cubic-bezier(.4,0,.5,1) infinite; will-change: transform; }

@keyframes respire {
  0%, 4%    { opacity: 0; }
  10%, 29%  { opacity: 1; }
  36%, 100% { opacity: 0; }
}
.tf { animation: respire 16s ease-in-out infinite; will-change: opacity; }
.tf-b { animation-delay: -10.6s; }
.tf-c { animation-delay: -5.3s; }


@media (prefers-reduced-motion: reduce) {
  .balayage, .tf { animation: none !important; opacity: 0 !important; }
  .tf-base { opacity: 1 !important; }
}


/* ---------- logo : le point chaud se déplace sur les quatre pixels ---------- */
@keyframes px {
  0%, 100% { fill: var(--froid); }
  18%      { fill: var(--indigo); }
  38%      { fill: var(--magenta); }
  58%      { fill: var(--braise); }
  76%      { fill: var(--or); }
  90%      { fill: var(--ambre); }
}
.marque .px  { animation: px 5.6s ease-in-out infinite; }
.marque .px2 { animation-delay: -1.4s; }
.marque .px4 { animation-delay: -2.8s; }
.marque .px3 { animation-delay: -4.2s; }

@media (prefers-reduced-motion: reduce) { .marque .px { animation: none !important; } }


/* ---------- bloc « ce que contient cette base » ---------- */
.grille-methode { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }
@media (min-width: 900px) { .grille-methode { grid-template-columns: .85fr 1.15fr; } }
.grille-methode h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
.deux-listes { display: grid; gap: 1.8rem 2.4rem; }
@media (min-width: 640px) { .deux-listes { grid-template-columns: 1fr 1fr; } }
.deux-listes ul { list-style: none; padding: 0; margin: 0; }
.deux-listes li {
  position: relative; padding-left: 1.5rem; margin-bottom: .7rem;
  font-size: .91rem; line-height: 1.5; color: #b3bcd2; max-width: none;
}
.deux-listes li::before {
  position: absolute; left: 0; top: -.02em;
  font-family: var(--mono); font-size: .95rem; font-weight: 500;
}
.liste-oui li::before { content: "+"; color: var(--or); }
.liste-non li::before { content: "–"; color: #5a6480; }
.nuit .deux-listes .eyebrow { color: #7c88a8; margin-bottom: .9rem; }
.nuit .liste-oui li { color: #cdd5e6; }


/* ---------- légende du comparateur ---------- */
.legende-tableau {
  margin-top: 2.2rem; padding: 1.4rem 1.5rem 1.2rem;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r);
}
.legende-tableau dl {
  display: grid; gap: 1.1rem 2rem; margin: 0 0 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.legende-tableau dl > div {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem; align-items: start;
}
.legende-tableau dt { grid-row: span 2; padding-top: .1rem; }
.legende-tableau dd { margin: 0; font-size: .87rem; line-height: 1.5; color: var(--attenue); }
.legende-tableau dd strong { color: var(--encre); font-weight: 600; display: block; }
.legende-tableau > p {
  margin: 0; padding-top: 1rem; border-top: 1px solid var(--bord);
  font-size: .85rem; color: var(--attenue); max-width: none;
}
.legende-tableau .pt { font-family: var(--mono); color: var(--encre); }


/* ---------- thermogrammes en image ----------
   Les PNG font quelques centaines d'octets et sont agrandis par le navigateur.
   « brut » conserve les pixels carrés, « lisse » laisse le navigateur interpoler :
   la démonstration du héros est donc faite en direct, sous les yeux du lecteur. */
img.thermo { display: block; width: 100%; height: auto; }
img.brut  { image-rendering: pixelated; image-rendering: crisp-edges; }
img.lisse { image-rendering: auto; }

.demo-interp { position: relative; }
.demo-interp > div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.demo-interp > .tf { position: absolute; inset: 0; }
.demo-interp .balayage {
  position: absolute; top: 0; bottom: 0; left: 0; width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  pointer-events: none;
}
.demo-interp .legendes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: .7rem 0 0; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sur-nuit-att);
  max-width: none;
}

.pile { position: relative; padding-bottom: 8%; }
.pile img { border-radius: 4px; }
.pile-0 { opacity: .4; }
.pile-1 { opacity: .68; margin: -78% 0 0 6%; width: 88%; }
.pile-2 { opacity: 1; margin: -78% 0 0 12%; width: 88%; }

.trio-netd .titre {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sur-nuit-att); margin: 0 0 1rem; max-width: none;
}
.trio-netd { background: var(--nuit-2); border-radius: var(--r); padding: 1.3rem; }
.trio-netd .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.trio-netd .trio figure { margin: 0; }
.trio-netd .trio figcaption {
  font-family: var(--mono); font-size: .78rem; color: var(--or);
  margin-top: .5rem; text-align: center;
}
.trio-netd .sous {
  margin: 1rem 0 0; font-size: .82rem; color: #6d7899; max-width: none;
}
article.texte .trio-netd img.thermo { border-radius: 3px; }


/* ---------- liste d'observations (fiche produit) ---------- */
ul.observations { list-style: none; padding: 0; margin: 0 0 1.4rem; max-width: 880px; }
ul.observations li {
  position: relative; padding: .65rem 0 .65rem 1.3rem;
  border-top: 1px solid var(--bord); font-size: .92rem; line-height: 1.55;
  color: var(--attenue); max-width: none;
}
ul.observations li::before {
  content: "·"; position: absolute; left: .1rem; top: .55rem;
  color: var(--bord-f); font-weight: 700; font-size: 1.2rem;
}
ul.observations li strong { color: var(--encre); font-weight: 600; }


/* ---------- assistant de choix ---------- */
/* Réutilise les surfaces du comparateur (.reglages, .filtres-grille, .cellule-note) :
   seules les pastilles de réponse et les cartes de recommandation sont propres à la page. */
.questions fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* filet posé en fond : une bordure de fieldset ferait passer la légende au milieu du trait */
.questions fieldset + fieldset {
  margin-top: 1.5rem; padding-top: 1.3rem;
  background: linear-gradient(var(--bord), var(--bord)) top left / 100% 1px no-repeat;
}
.questions legend { float: left; width: 100%; }
.questions legend + * { clear: both; }
.questions legend {
  padding: 0; margin: 0 0 .8rem; font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--attenue);
}
.pastilles { display: flex; flex-wrap: wrap; gap: .5rem; }
.pastilles label { position: relative; cursor: pointer; }
.pastilles input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.pastilles span {
  display: inline-block; font-size: .88rem; font-weight: 500; line-height: 1.35;
  padding: .5rem .95rem; border-radius: 4px;
  background: var(--clair); color: var(--encre); border: 1px solid var(--bord);
  transition: all .15s ease;
}
.pastilles label:hover span { border-color: var(--ambre); }
.pastilles input:checked + span { background: var(--nuit); color: #fff; border-color: var(--nuit); }
.pastilles input:focus-visible + span { outline: 2px solid var(--ambre); outline-offset: 3px; }
.pastilles input:disabled + span { opacity: .45; cursor: not-allowed; }
.aide-choix { font-size: .85rem; color: var(--attenue); margin: .9rem 0 0; max-width: none; }
.lien-bouton {
  background: none; border: 0; padding: 0; margin-left: .4rem; cursor: pointer;
  font: inherit; color: var(--indigo); text-decoration: underline; text-underline-offset: 3px;
}
.questions .filtres-cases { margin-top: 1rem; padding-top: 1rem; }

.resultats { margin-top: 2.2rem; }
.resultats > h2 { margin-top: 0; }
.resultats h3 { margin: 2.2rem 0 .9rem; }
.recos { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1rem; }
.reco {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r);
  padding: 1.3rem 1.25rem 1.3rem; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.reco::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--froid), var(--magenta), var(--ambre), var(--or));
}
.reco .rang { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--ambre); margin: 0 0 .3rem; }
.reco h3 { margin: 0 0 .2rem; font-size: 1.12rem; }
.reco h3 a { color: inherit; text-decoration: none; }
.reco h3 a:hover { text-decoration: underline; text-decoration-color: var(--ambre); }
.reco .sous-nom { margin: 0 0 .9rem; }
.adequation { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .15rem .8rem; margin: 0 0 .9rem; }
.adequation .valeur {
  grid-row: span 2; font-family: var(--display); font-size: 2.3rem; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
}
.adequation .valeur small { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.adequation .lib { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--attenue); }
.barre-note.large { width: 100%; height: 8px; border-radius: 4px; align-self: end; }
ul.pourquoi { list-style: none; padding: 0; margin: 0; font-size: .88rem; line-height: 1.5; }
ul.pourquoi li { border-top: 1px solid var(--bord); padding: .45rem 0; color: var(--attenue); max-width: none; }
.reco .badges { margin-top: .8rem; }
details.repli {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r);
  padding: .85rem 1.15rem; margin-top: 1rem;
}
details.repli summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
details.repli[open] summary { margin-bottom: .6rem; }
ul.liste-motifs { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
ul.liste-motifs li { border-top: 1px solid var(--bord); padding: .45rem 0; max-width: none; }
ul.liste-motifs .motif { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--attenue); }
ul.liste-motifs b { font-family: var(--mono); font-weight: 500; }
.actions-choix { margin: 1.8rem 0 0; }

/* bloc d'appel sur l'accueil : un panneau d'instrument posé sur la surface claire.
   Les repères d'angle reprennent le viseur d'une caméra ; la bande de couleur de chaque
   touche est celle de l'usage dans la section « Classements ». */
.console {
  position: relative; background: var(--nuit); color: var(--sur-nuit);
  border-radius: 6px; padding: clamp(1.6rem, 3.5vw, 2.8rem);
  display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); align-items: start;
  background-image:
    linear-gradient(var(--or), var(--or)), linear-gradient(var(--or), var(--or)),
    linear-gradient(var(--or), var(--or)), linear-gradient(var(--or), var(--or)),
    linear-gradient(var(--or), var(--or)), linear-gradient(var(--or), var(--or)),
    linear-gradient(var(--or), var(--or)), linear-gradient(var(--or), var(--or));
  background-size: 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px;
  background-position:
    12px 12px, 12px 12px, calc(100% - 12px) 12px, calc(100% - 12px) 12px,
    12px calc(100% - 12px), 12px calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) calc(100% - 12px);
  background-repeat: no-repeat;
}
@media (min-width: 920px) {
  .console { grid-template-columns: .9fr 1.1fr; grid-template-areas: "intro choix" "suite choix"; row-gap: 0; }
  .console-intro { grid-area: intro; } .console-choix { grid-area: choix; } .console-suite { grid-area: suite; }
}
@media (max-width: 640px) { .console { padding-top: 2.4rem; padding-bottom: 2.4rem; } }
.console h2 { color: #fff; margin: 0 0 .9rem; font-size: clamp(1.7rem, 3.2vw, 2.35rem); max-width: 16ch; }
.console-intro p { color: #b3bcd2; max-width: 44ch; margin-bottom: 0; }
.etapes-outil {
  list-style: none; counter-reset: etape; padding: 0; margin: 1.6rem 0 1.8rem;
  border-top: 1px solid var(--bord-n);
}
.etapes-outil li {
  counter-increment: etape; display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--bord-n); font-size: .95rem; color: var(--sur-nuit);
}
.etapes-outil li::before {
  content: counter(etape); font-family: var(--mono); font-size: .8rem; color: var(--ambre);
}
.console-action { margin: 0; }
.bouton.carre { border-radius: 4px; padding: .8rem 1.5rem; }
.nuit a.bouton.carre, .console a.bouton.carre { color: #fff; }

.console-consigne { color: var(--sur-nuit-att); font-size: .9rem; margin: 0 0 1rem; max-width: 52ch; }
.touches {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.touches li { max-width: none; }
.touche {
  --t: var(--ambre);
  position: relative; display: grid; gap: .25rem; align-content: space-between; min-height: 4.4rem; height: 100%;
  padding: .8rem 1rem .8rem 1.35rem; text-decoration: none;
  background: var(--nuit-2); border: 1px solid var(--bord-n); border-radius: 4px;
  transition: border-color .15s ease, background .15s ease;
}
.touche::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--t); border-radius: 4px 0 0 4px; transition: width .15s ease;
}
.touche:hover { border-color: var(--t); background: var(--nuit-3); }
.touche:hover::before { width: 7px; }
.touche:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.touche-nom { color: #fff; font-weight: 600; font-size: .98rem; line-height: 1.3; }
.touche-cond { color: var(--sur-nuit-att); font-family: var(--mono); font-size: .74rem; }
.touche.sans-mesure { border-style: dashed; }
.touche.sans-mesure::before { background: repeating-linear-gradient(180deg, #4a567a 0 6px, transparent 6px 10px); }
.touche.sans-mesure:hover { border-color: #6b7797; }

/* ---------- corrections mobiles ---------- */
@media (max-width: 640px) {
  /* la marge négative du bouton menu dépassait de 8 px à droite et faisait défiler la page */
  .bouton-menu { margin-right: 0; }
  /* les tableaux de données larges défilent dans leur propre cadre, pas la page entière */
  table.donnees { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}