/**
 * Roomstill — feuille de style du site public.
 *
 * D'OÙ VIENNENT CES VALEURS. Elles ne sont pas inventées ici : elles reprennent
 * `app/src/theme.ts`, où la direction a déjà été arrêtée le 30/07 après relevé
 * de vraies marques de déco (hem.com, fermliving.com). Les règles héritées :
 *
 *   1. LA PHOTO EST LE DESIGN. L'interface s'efface devant elle.
 *   2. Pas de carte blanche flottante à ombre douce. Des filets de 1 px.
 *   3. Blanc franc, pas de beige de remplissage.
 *   4. Noir vrai, angles quasi nets.
 *   5. La terre cuite est RARE : un prix, un état actif. Étalée, c'est elle
 *      qui trahissait le « look IA ».
 *
 * Le titrage est en grotesque à graisse lourde et interlettrage serré, PAS en
 * serif à fort contraste : c'est le point qui sépare une direction de studio
 * d'un habillage automatique. La serif reste au logo, qui a été dessiné avec.
 */

/* ── Police auto-hébergée ──────────────────────────────────────────────────
   Servie depuis notre domaine, pas depuis Google Fonts : une requête vers
   fonts.gstatic.com transmet l'adresse IP du visiteur à un tiers, ce qui est
   précisément ce qu'un site français n'a pas à faire sans consentement. */
@font-face {
  font-family: 'Archivo';
  src: url('/polices/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('/polices/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --encre: #0C0C0C;
  --encre-douce: #3A3A38;
  --terre: #C2603C;
  /*
   * ⚠️ LA MÊME TERRE, ASSEZ SOMBRE POUR ÊTRE LUE (25/09).
   *
   * Mesuré par Lighthouse : `--terre` sur blanc donne **4,17**, sous le seuil
   * de 4,5 exigé pour du texte courant. Et elle portait les PRIX, la marque et
   * les libellés d'offre : un prix qu'on lit mal est un prix qu'on ne lit pas.
   *
   * Celle-ci passe 4,5 sur les TROIS fonds du site (blanc, crème, crème
   * sombre), au pire 4,51. `--terre` reste pour les aplats et les traits, où
   * aucun texte n'est en jeu et où la marque doit rester exacte.
   */
  --terre-texte: #AF5134;
  --terre-claire: #F0DDD4;
  --creme: #FAFAF9;
  --creme-sombre: #F0EFEC;
  --surface: #FFFFFF;
  --gris: #6B6B66;
  --filet: #DFDEDA;
  --succes: #2F6B45;

  /* Le tracé du relevé de structure. Assez lumineux pour tenir sur une photo
     sombre comme sur un mur clair, sans devenir un élément décoratif. */
  --trace: rgba(255, 255, 255, 0.92);

  --pas: 4px;
  --r-s: 2px;
  --r-m: 4px;
  --r-l: 6px;

  --largeur: 1200px;
  --marge-page: clamp(20px, 5vw, 56px);
}

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--encre);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--surface);
  padding: 12px 18px;
  z-index: 100;
  text-decoration: none;
}
.saut-contenu:focus { left: 0; }

/* ── Titres ────────────────────────────────────────────────────────────── */

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.06; }
h3 { font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.surtitre {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

.micro {
  margin: 0;
  font-size: 0.82rem;
  color: var(--gris);
  line-height: 1.4;
}
.micro--centre { text-align: center; margin-top: 28px; }
.micro--sous-table { margin-top: 12px; }

.note {
  border-left: 2px solid var(--terre);
  padding-left: 16px;
  color: var(--encre-douce);
}

/* ── Barre de navigation ───────────────────────────────────────────────── */

.barre {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 22px var(--marge-page);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--encre);
  flex: none;
}

.logo-marque { width: 26px; height: 26px; flex: none; }

/* Le mot est dessiné à la serif dans l'identité ; à défaut de charger une
   deuxième famille pour six lettres, on garde la graisse et l'espacement qui
   le rendent reconnaissable. */
.logo-mot {
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.045em;
}
.logo-still { color: var(--terre-texte); }

.barre-liens {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 0.93rem;
}
.barre-liens a {
  text-decoration: none;
  color: var(--encre-douce);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.barre-liens a:hover { border-bottom-color: var(--encre); color: var(--encre); }

.barre-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: none;
}

.lien-discret {
  font-size: 0.93rem;
  text-decoration: none;
  color: var(--encre-douce);
  border-bottom: 1px solid var(--filet);
  padding-bottom: 2px;
}
.lien-discret:hover { border-bottom-color: var(--encre); color: var(--encre); }

/* ── Boutons ───────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: var(--r-m);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bouton-plein {
  background: var(--encre);
  color: var(--surface);
}
.bouton-plein:hover { background: var(--terre); }

.bouton-contour {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
}
.bouton-contour:hover { background: var(--encre); color: var(--surface); }

.bouton-grand {
  padding: 15px 28px;
  font-size: 1.02rem;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 84px) var(--marge-page) clamp(52px, 7vw, 96px);
}

.chapo {
  margin: 26px 0 0;
  font-size: 1.1rem;
  color: var(--encre-douce);
  max-width: 30em;
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.faits {
  display: flex;
  gap: 40px;
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--filet);
}
.faits div { margin: 0; }
.faits dt {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.faits dd {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--gris);
}

.hero-preuve { margin: 0; }

/* Le hero porte une paire PORTRAIT (26/09) : un salon victorien dont la
   preuve tient en hauteur — rosace au plafond, cheminée, bow-window, parquet.
   4/5 garde les quatre. La largeur suit la hauteur d'écran : à pleine colonne
   il ferait 750 px de haut sur un portable et pousserait la légende sous la
   ligne de flottaison. */
.hero-preuve .comparateur--hero {
  aspect-ratio: 4 / 5;
  width: min(100%, 64vh);
  margin-left: auto;
}
.hero-preuve figcaption { width: min(100%, 64vh); margin-left: auto; }

.hero-preuve figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.bascule {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--encre);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--encre);
  padding: 0 0 2px;
  cursor: pointer;
}
.bascule[aria-pressed="true"] { color: var(--terre-texte); border-bottom-color: var(--terre-texte); }

/* ── Le comparateur : la signature de la page ──────────────────────────────
   Deux photos superposées au pixel près. Le volet du dessus est rogné, pas
   déplacé : les deux images restent exactement dans le même cadre, sinon le
   glissement mentirait sur ce qu'il prouve. */

.comparateur {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--creme-sombre);
  aspect-ratio: 4 / 3;
  isolation: isolate;
  touch-action: pan-y;
}

.comparateur-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Le volet est ROGNÉ, jamais rétréci.
   Le réflexe serait de lui donner `width: var(--position)` : l'image du dessus
   se compresserait alors à chaque glissement, et les murs sembleraient bouger.
   Sur ce produit précis, ce serait démontrer l'inverse de ce qu'on affirme.
   `clip-path` laisse l'image occuper le cadre entier et n'en masque qu'une
   partie : les deux photos restent superposées au pixel près. */
.comparateur-volet {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--position, 52%)) 0 0);
}

.calque-structure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
  z-index: 3;
}
.comparateur[data-structure-visible="true"] .calque-structure { opacity: 1; }

/* Le curseur natif porte l'accessibilité (clavier, lecteur d'écran) ; il est
   rendu invisible et la prise dessinée par-dessus suit sa valeur. */
.comparateur-poignee {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.comparateur-poignee::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 100%;
  cursor: ew-resize;
}
.comparateur-poignee::-moz-range-thumb {
  width: 44px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
.comparateur-poignee:focus-visible { outline-offset: -3px; }

.comparateur-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position, 52%);
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 4;
}

.comparateur-prise {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--surface);
  display: block;
}
.comparateur-prise::before,
.comparateur-prise::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
}
.comparateur-prise::before {
  left: 11px;
  transform: translateY(-50%);
  border-right: 6px solid var(--encre);
}
.comparateur-prise::after {
  right: 11px;
  transform: translateY(-50%);
  border-left: 6px solid var(--encre);
}

.comparateur-etiquette {
  position: absolute;
  bottom: 12px;
  z-index: 4;
  padding: 5px 10px;
  border-radius: var(--r-s);
  background: rgba(12, 12, 12, 0.72);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}
.comparateur-etiquette--avant { left: 12px; }
.comparateur-etiquette--apres { right: 12px; }

/* ── Sections ──────────────────────────────────────────────────────────── */

.section {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--marge-page);
}
.section--pale {
  max-width: none;
  background: var(--creme);
  border-block: 1px solid var(--filet);
}
.section--pale > * { max-width: var(--largeur); margin-inline: auto; }

.sous-section {
  margin-top: 18px;
  max-width: 44em;
  color: var(--encre-douce);
}

.deux-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: 44px;
}
.deux-colonnes--inverse .colonne-texte { order: 2; }
.deux-colonnes--inverse .colonne-image { order: 1; }

.colonne-texte p { color: var(--encre-douce); max-width: 34em; }
.colonne-texte .note { color: var(--encre); }

.comparateur--compact { aspect-ratio: 4 / 3; }

/* La galerie porte des paires PORTRAIT (26/09) : centré contre un cadre de
   700 px, le texte flottait au milieu d'un vide. Il s'aligne en haut et
   reste en vue pendant qu'on compare. */
#preuve .deux-colonnes { align-items: start; }
/* Cadre, vignettes et légende partagent le même bord gauche. */
.galerie .comparateur--portrait { margin-inline: 0; }
@media (min-width: 961px) {
  #preuve .colonne-texte { position: sticky; top: 96px; }
}

/* ── La galerie : un comparateur, plusieurs pièces (26/09) ──────────────────
   Pas une grille de cartes : UN cadre, et une rangée de vignettes qui change
   la pièce qu'il montre. Chaque paire garde son format d'origine — rogner la
   pièce haute en 4/3 aurait coupé sa fenêtre, c'est-à-dire la preuve. */

.galerie { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.comparateur--portrait {
  /* La largeur suit la hauteur d'écran : un portrait pleine colonne ferait
     1 000 px de haut sur ordinateur. */
  width: min(100%, 46vh);
  margin-inline: auto;
}

/* Pendant qu'une nouvelle paire charge, l'ancienne pâlit au lieu de
   clignoter en blanc. */
.comparateur .comparateur-image { transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.comparateur[data-chargement] .comparateur-image { opacity: 0.35; }

.galerie-choix {
  /* Retour à la ligne, jamais de défilement horizontal : à la souris, une
     rangée qui défile est une rangée TRONQUÉE (règle du projet, 25/09). */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px;
}

.galerie-piece {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: var(--gris);
  text-align: left;
  cursor: pointer;
}
.galerie-piece img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--r-s);
  outline: 1px solid var(--filet);
  outline-offset: 0;
  transition: outline-color 0.15s ease, opacity 0.15s ease;
  opacity: 0.72;
}
.galerie-piece:hover img { opacity: 1; }
.galerie-piece[aria-pressed="true"] { color: var(--encre); font-weight: 600; }
.galerie-piece[aria-pressed="true"] img {
  opacity: 1;
  outline: 2px solid var(--encre);
  outline-offset: 2px;
}

.galerie-legende {
  margin: 0;
  font-size: 0.92rem;
  color: var(--encre-douce);
  max-width: 34em;
  text-wrap: pretty;
}
.galerie-suite { margin: 0; font-size: 0.92rem; }

/* ── La garantie, sous les offres ────────────────────────────────────────── */
.garantie {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 32px auto 8px;
  max-width: 40em;
  font-weight: 600;
  color: var(--encre);
  text-wrap: balance;
}
/* Une coche dessinée, pas une icône : même geste que les listes d'offres. */
.garantie-marque {
  flex: none;
  position: relative;
  width: 18px;
  height: 1.55em;
}
.garantie-marque::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--terre);
  border-bottom: 2px solid var(--terre);
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .comparateur .comparateur-image,
  .galerie-piece img { transition: none; }
}

/* ── Le tableau de chiffrage ───────────────────────────────────────────── */

.devis {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--surface);
  border: 1px solid var(--filet);
}
.devis-titre {
  caption-side: top;
  text-align: left;
  padding: 16px 18px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  border-bottom: 1px solid var(--filet);
}
.devis th, .devis td { padding: 13px 18px; text-align: left; font-weight: 400; }
.devis tbody tr + tr th, .devis tbody tr + tr td { border-top: 1px solid var(--filet); }
.devis td:nth-child(2) { color: var(--gris); font-variant-numeric: tabular-nums; }
.devis-prix { text-align: right !important; font-variant-numeric: tabular-nums; }
.devis tfoot tr { border-top: 1px solid var(--encre); }
.devis tfoot th, .devis tfoot td { font-weight: 700; }
.devis tfoot .devis-prix { color: var(--terre-texte); }

/* ── Les étapes ────────────────────────────────────────────────────────────
   Numérotées parce que l'ordre porte une information : le budget doit être
   donné AVANT le rendu, sinon il ne fait que le constater. */

.etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}
.etapes li { border-top: 1px solid var(--encre); padding-top: 18px; }
.etape-rang {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--terre-texte);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.etapes h3 { margin-bottom: 8px; }
.etapes p { color: var(--encre-douce); font-size: 0.95rem; margin: 0; }

/* ── Offres ────────────────────────────────────────────────────────────── */

.offres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 48px;
  border: 1px solid var(--filet);
  background: var(--surface);
}

.offre {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  position: relative;
}
.offre + .offre { border-left: 1px solid var(--filet); }
.offre--retenue { background: var(--surface); }
.offre--retenue::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 2px solid var(--encre);
  pointer-events: none;
}

.offre-marque {
  margin: 0 0 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terre-texte);
}
.offre-nom { margin-bottom: 14px; }

.offre-prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
}
.offre-montant {
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.offre-forme { font-size: 0.85rem; color: var(--gris); }

.offre-quoi {
  margin: 0 0 22px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--terre-texte);
}

.offre-liste {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  font-size: 0.92rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
}
.offre-liste li { padding: 11px 0; border-bottom: 1px solid var(--filet); }

.offre .bouton { margin-top: auto; }

/* ── Questions ─────────────────────────────────────────────────────────── */

.questions { margin-top: 44px; max-width: 46em; border-top: 1px solid var(--filet); }

.questions details { border-bottom: 1px solid var(--filet); }

.questions summary {
  padding: 20px 36px 20px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--gris);
  border-bottom: 1.5px solid var(--gris);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.questions details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.questions details p {
  margin: 0;
  padding: 0 36px 24px 0;
  color: var(--encre-douce);
}

/* ── Rappel final ──────────────────────────────────────────────────────── */

.rappel {
  text-align: center;
  padding: clamp(64px, 9vw, 112px) var(--marge-page);
  background: var(--encre);
  color: var(--surface);
}
.rappel h2 { max-width: 16em; margin: 0 auto 32px; text-wrap: balance; }
/* La phrase d'usage, entre la promesse et le bouton : elle dit à qui ça sert
   sans ajouter un argument de plus. */
.rappel-chapo { margin: -16px auto 32px; font-size: 1.1rem; color: rgba(250, 250, 249, 0.78); }
.rappel .bouton-plein { background: var(--surface); color: var(--encre); }
.rappel .bouton-plein:hover { background: var(--terre); color: var(--surface); }
.rappel .micro { margin-top: 14px; color: rgba(250, 250, 249, 0.6); }

/* ── Pied ──────────────────────────────────────────────────────────────── */

.pied {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 36px var(--marge-page);
  font-size: 0.88rem;
}
.pied-marque { display: inline-flex; align-items: center; gap: 9px; }
.pied-liens { display: flex; gap: 24px; margin-left: auto; flex-wrap: wrap; }
.pied-liens a { color: var(--encre-douce); text-decoration: none; }
.pied-liens a:hover { color: var(--encre); text-decoration: underline; }
/*
 * L'EDITEUR. Discret mais lisible : c'est une information qu'on cherche quand
 * on hesite, pas une qu'on lit en passant. Au-dessus du copyright, parce que
 * le copyright n'apprend rien a personne et que celui-ci, si.
 */
.pied-editeur {
  margin: calc(var(--pas) * 3) 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--encre-douce);
  max-width: 62ch;
}
.pied-editeur a { color: var(--terre-texte); }

.pied-mention { margin: 0; color: var(--gris); }
.pied-badge { margin: 0; line-height: 0; }
.pied-badge img { opacity: .7; transition: opacity .2s; }
.pied-badge a:hover img, .pied-badge a:focus-visible img { opacity: 1; }

/* ── Page seule : connexion ────────────────────────────────────────────────
   Une colonne étroite et centrée, une seule action colorée, aucun décor.
   Sur un écran qui ne demande qu'une chose, tout ce qui s'ajoute est du bruit
   entre la personne et son but. */

.page-seule {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px var(--marge-page);
}

.colonne {
  width: 100%;
  max-width: 380px;
}

.colonne-logo {
  display: inline-flex;
  margin-bottom: 40px;
}

.colonne-titre {
  font-size: 1.85rem;
  margin-bottom: 12px;
}

.colonne-chapo {
  color: var(--encre-douce);
  font-size: 0.95rem;
  margin-bottom: 30px;
}

.formulaire { display: block; }

.champ { display: block; margin-bottom: 16px; }

.champ-nom {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 8px;
}

.champ-saisie {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 13px 14px;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--encre);
  border-radius: var(--r-m);
}
.champ-saisie::placeholder { color: #A9A8A2; }
.champ-saisie:focus-visible { outline-offset: 1px; }

/* Un code se relit caractère par caractère : la chasse fixe et l'espacement
   évitent de confondre 0 et O au moment de le recopier. */
.champ-saisie--code {
  font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.champ-saisie[aria-invalid='true'] { border-color: var(--alerte); }

.bouton-large { width: 100%; padding: 14px 20px; }

.aide {
  font-size: 0.82rem;
  color: var(--gris);
  margin: -6px 0 16px;
}

.message {
  margin: 16px 0 0;
  font-size: 0.9rem;
  min-height: 1.4em;
}
.message[data-ton='erreur'] { color: var(--alerte); }
.message[data-ton='succes'] { color: var(--succes); }

.separateur {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0;
  color: var(--gris);
  font-size: 0.8rem;
}
.separateur::before,
.separateur::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--filet);
}

.colonne-pied {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--filet);
  font-size: 0.88rem;
  color: var(--gris);
}
.colonne-pied a { color: var(--encre); }

.bouton[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}

/* ── Adaptation aux écrans étroits ─────────────────────────────────────── */

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-mots { order: 1; }
  .hero-preuve { order: 2; }
  .hero-preuve .comparateur--hero,
  .hero-preuve figcaption { margin-inline: auto; }
  .deux-colonnes,
  .deux-colonnes--inverse { grid-template-columns: minmax(0, 1fr); }
  .deux-colonnes--inverse .colonne-texte,
  .deux-colonnes--inverse .colonne-image { order: initial; }
  .etapes { grid-template-columns: minmax(0, 1fr); }
  .offres { grid-template-columns: minmax(0, 1fr); }
  .offre + .offre { border-left: 0; border-top: 1px solid var(--filet); }
  .barre-liens { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .barre { gap: 16px; }
  .barre-actions { margin-left: auto; gap: 14px; }
  .faits { gap: 26px; }
  .pied { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pied-liens { margin-left: 0; gap: 18px; }
}

/* ── Mouvement réduit ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── [hidden] doit gagner ─────────────────────────────────────────────────
   Piege deja paye une fois : une regle `display:flex` sur un selecteur plus
   specifique reaffiche un element porteur de `hidden`. Les pages legales
   s'appuient dessus pour masquer la langue non retenue ; sans cette regle,
   les deux versions s'affichent l'une sous l'autre. */
[hidden] { display: none !important; }

/* ── Pages de style (générées) ──────────────────────────────────────────────
   Trois cents pages écrites par `outils/generer-pages.mjs`. Elles n'ont pas de
   photo : on n'en possède aucune qui soit à nous, et coller des images de
   banque serait exactement la signature « site IA » que le reste du site évite.
   Ce qu'on montre à la place, ce sont les teintes réelles du moteur — trois
   pastilles qui disent la vérité sur ce que la génération produira.

   Le maillage en bas de page n'est pas décoratif : c'est lui qui fait remonter
   les 300 pages ensemble au lieu d'une par une. D'où des listes denses et
   lisibles plutôt que des cartes, qui auraient tenu six liens au lieu de vingt.
   ────────────────────────────────────────────────────────────────────────── */

.page-style {
  max-width: 68ch;
  margin: 0 auto;
  padding: calc(var(--pas) * 10) var(--marge-page) calc(var(--pas) * 20);
}

/* Le h1 du site monte a 4,4rem : c'est calibre pour le hero d'accueil, ou il
   n'y a que quatre mots. Ici les titres font huit mots et debordent. On garde
   la meme famille, on redescend l'echelle. */
.page-style h1 {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}
.page-style section { margin-top: calc(var(--pas) * 10); }
.page-style section h2 { margin: 0 0 calc(var(--pas) * 3); font-size: 1.15rem; }
.page-style p { line-height: 1.65; }

.fil {
  font-size: 0.85rem;
  color: var(--gris);
  margin-bottom: calc(var(--pas) * 4);
}
.fil a { color: var(--gris); }
.fil a:hover { color: var(--encre); }

/* Les trois teintes du style, dominante en premier. */
.palette {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pas) * 4);
  list-style: none;
  margin: calc(var(--pas) * 4) 0;
  padding: 0;
}
.palette li { display: flex; align-items: center; gap: calc(var(--pas) * 2); }
.palette code { font-size: 0.8rem; color: var(--gris); }
.pastille {
  width: 34px;
  height: 34px;
  border-radius: var(--r-m);
  border: 1px solid var(--filet);
  display: inline-block;
}

/* L'appel à l'action, répété une fois au milieu de page. */
.appel {
  margin: calc(var(--pas) * 10) 0;
  padding: calc(var(--pas) * 6);
  background: var(--creme-sombre);
  border-radius: var(--r-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pas) * 4);
}
.appel-note { font-size: 0.85rem; color: var(--encre-douce); }

/* Le maillage : dense, sans puce, pour tenir vingt liens sans fatiguer. */
.maillage { border-top: 1px solid var(--filet); padding-top: calc(var(--pas) * 6); }
.liens-plats {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pas) * 2) calc(var(--pas) * 4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
}
.liens-plats a { color: var(--encre-douce); }
.liens-plats a:hover { color: var(--terre-texte); }

@media (max-width: 640px) {
  .page-style { padding-top: calc(var(--pas) * 6); }
  .appel { flex-direction: column; align-items: flex-start; }
}

/*
 * Le chiffrage des surfaces sur les pages de style. Un vrai <table>, pas une
 * liste maquillee : c'est le seul contenu chiffre de la page, et c'est ce que
 * les moteurs comme les lecteurs d'ecran lisent comme une donnee. Classe
 * distincte de `.devis`, qui appartient a l'ecran studio et n'a pas le meme
 * gabarit.
 */
.chiffrage {
  width: 100%;
  border-collapse: collapse;
  margin: calc(var(--pas) * 4) 0 calc(var(--pas) * 2);
  font-size: 0.95rem;
}
.chiffrage-legende {
  caption-side: top;
  text-align: left;
  font-size: 0.85rem;
  color: var(--gris);
  padding-bottom: calc(var(--pas) * 2);
}
.chiffrage th,
.chiffrage td {
  text-align: left;
  padding: calc(var(--pas) * 2.5) calc(var(--pas) * 2);
  border-bottom: 1px solid var(--filet);
}
.chiffrage thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gris);
  font-weight: 600;
  border-bottom-width: 2px;
}
.chiffrage tbody th { font-weight: 600; white-space: nowrap; }
.chiffrage .nb { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chiffrage tfoot th,
.chiffrage tfoot td { border-bottom: none; padding-top: calc(var(--pas) * 3); }
.chiffrage-total { font-weight: 700; font-size: 1.05rem; color: var(--terre-texte); }

@media (max-width: 480px) {
  .chiffrage { font-size: 0.88rem; }
  .chiffrage th,
  .chiffrage td { padding: calc(var(--pas) * 2) calc(var(--pas) * 1.5); }
}

/*
 * Le maillage depuis l'accueil. Volontairement sobre et dense : c'est un bloc
 * de navigation, pas une section a vendre. Il vit sous la FAQ, juste avant le
 * rappel final — a l'endroit ou quelqu'un qui n'a pas encore clique cherche
 * autre chose a regarder.
 */
.explorer {
  max-width: var(--largeur, 1120px);
  margin: 0 auto;
  padding: calc(var(--pas) * 14) calc(var(--pas) * 6);
  border-top: 1px solid var(--filet);
}
.explorer h2 { margin-bottom: calc(var(--pas) * 2); }
.explorer-intro {
  color: var(--encre-douce);
  max-width: 62ch;
  margin-bottom: calc(var(--pas) * 6);
}
.explorer .liens-plats { margin-bottom: calc(var(--pas) * 6); }
.explorer-plus {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pas) * 2) calc(var(--pas) * 6);
  font-size: 0.92rem;
}
.explorer-plus a { color: var(--terre-texte); }

/* L'ANNUEL, glisse sous le bouton Pro plutot qu'en 4e carte : `.offres` est
   fige a 3 colonnes, une carte de plus laisserait un orphelin sur une 2e
   ligne. La ligne reste dans un `.offre-prix` pour que le chargeur de tarifs
   la masque ENTIEREMENT si Stripe ne repond pas — il appelle
   `closest('.offre-prix')`, qui renverrait `null` sans cette classe. */
.offre-prix--annuel {
  margin: 14px 0 0;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.85rem;
}
.offre-prix--annuel .offre-montant {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/*
 * L'AGENCE, en BANDE sous la grille plutot qu'en 4e carte (25/09).
 *
 * Deux raisons, et la seconde compte plus que la premiere. `.offres` est fige a
 * trois colonnes (meme contrainte que .offre-prix--annuel juste au-dessus) :
 * une carte de plus laisserait un orphelin sur une deuxieme ligne. Surtout, ce
 * n'est pas le meme acheteur. Une equipe veut un pot de credits commun, un
 * compte et une facture ; un professionnel seul veut un tarif. Une quatrieme
 * colonne identique aux trois autres aurait dit que c'est le meme choix.
 *
 * Elle partage le filet de la grille (`border-top: none`) pour se lire comme
 * une suite, pas comme une offre a part.
 *
 * ⚠️ Le montant reste dans un `.offre-prix` : `script.js` appelle
 * `closest('.offre-prix')` pour masquer la ligne quand la caisse ne repond pas,
 * et renverrait `null` sans cette classe — ce qui casserait le repli des TROIS
 * autres prix au passage.
 */
.agence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--pas) * 3) calc(var(--pas) * 5);
  padding: 26px 28px;
  border: 1px solid var(--filet);
  border-top: none;
  background: var(--creme-sombre);
}
.agence-quoi {
  margin: 0;
  max-width: 40em;
  font-size: 0.95rem;
  color: var(--encre-douce);
}
.agence-nom {
  color: var(--encre);
  font-weight: 700;
}
.agence-droite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pas) * 2) calc(var(--pas) * 4);
}
.agence .offre-prix { margin: 0; }

.offre-annuel-lien {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.offre-annuel-lien:hover { color: var(--terre-texte); }

/* Quatre chiffres n'ont pas besoin de toute la largeur : un champ pleine
   page ferait croire qu'on attend un numéro de carte entier — exactement
   ce qu'on ne demande PAS, et ce qu'il ne faut surtout pas suggérer. */
.champ-saisie--chiffres {
  max-width: 7.5em;
  text-align: center;
}

/* ── La preuve avant/après de la page pro ────────────────────────────────────
   Deux photos côte à côte, jamais une carte : la seule chose à regarder ici
   est la paire, et un cadre autour lui volerait l'attention. Elles se
   superposent sous 720 px — côte à côte sur un téléphone, chaque image tombe
   sous 180 px de large et la démonstration ne se voit plus.
   Aucun JS : la page de démarchage doit tenir partout, scripts coupés compris. */
.preuve-pro {
  margin: 28px 0 8px;
}

.preuve-paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.preuve-volet {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--creme-sombre);
}

.preuve-volet img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* La paire est un portrait 4/5 : cadrée en 4/3, on garde la bande qui
     porte la preuve — le bow-window et la cheminée entière. */
  object-position: 50% 72%;
}

/* L'étiquette est POSÉE sur la photo, pas au-dessus : lue en même temps que
   l'image, elle n'ajoute pas une ligne à parcourir. Fond opaque plutôt que
   translucide — un « Avant » illisible sur un mur clair ne sert à rien. */
.preuve-etiquette {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: var(--r-s);
  background: var(--encre);
  color: var(--creme);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preuve-pro figcaption {
  margin-top: 12px;
  color: var(--encre-douce);
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .preuve-paire { grid-template-columns: 1fr; }
}

/* ── L'étiqueteur gratuit (/etiqueter) ───────────────────────────────────────
   Un outil, pas une page de vente : la zone de dépôt est la seule chose qui
   attire l'œil tant qu'aucune photo n'est là. Pas de carte, pas d'ombre — le
   filet, comme partout ailleurs sur ce site. */
.etq { margin: 32px 0 8px; }

.etq-depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 190px;
  padding: 28px 20px;
  border: 1px dashed var(--filet);
  border-radius: var(--r-m);
  background: var(--creme-sombre);
  cursor: pointer;
  text-align: center;
  transition: border-color 140ms ease-out, background 140ms ease-out;
}
.etq-depot:hover,
.etq-depot:focus-within,
.etq-depot--survol {
  border-color: var(--terre-texte);
  background: var(--surface);
}
.etq-depot-texte { font-weight: 600; color: var(--encre); }
.etq-depot-note { font-size: 14px; color: var(--gris); }

.etq-reglages { margin-top: 24px; }
.etq-etiquette {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 10px;
}

/* Les langues passent à la ligne. Une rangée qui défile horizontalement est une
   rangée tronquée : à la souris, personne ne la fait glisser (leçon du 25/09,
   où quatre types de pièces étaient devenus inatteignables dans l'app). */
.etq-langues { display: flex; flex-wrap: wrap; gap: 8px; }
.etq-langue {
  padding: 9px 14px;
  border: 1px solid var(--filet);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre-douce);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.etq-langue:hover { border-color: var(--encre-douce); }
.etq-langue--actif {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--creme);
}

.etq-sortie { margin-top: 28px; }

/*
 * LA LISTE DU LOT (25/09 soir). L'outil traitait une photo et montrait un grand
 * apercu ; il traite maintenant une annonce entiere, donc quinze a vingt-cinq.
 *
 * Une liste, pas une grille de vignettes : ce qu'un agent verifie, c'est que
 * CHACUNE de ses photos est passee, nom par nom. Une mosaique fait joli et
 * oblige a compter. La vignette reste petite — elle sert a reconnaitre la
 * piece, pas a juger la photo.
 */
.etq-liste {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  overflow: hidden;
}
.etq-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
}
.etq-item + .etq-item { border-top: 1px solid var(--filet); }
.etq-vignette {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--r-s);
  flex: none;
}
.etq-item-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.etq-item-nom {
  font-size: 0.92rem;
  /* Un nom de photo d appareil est long et sans espace : sans cette borne il
     pousse le lien de telechargement hors de la ligne. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.etq-item-etat { font-size: 0.8rem; color: var(--gris); }
.etq-item-lien {
  flex: none;
  font-size: 0.85rem;
  color: var(--terre-texte);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.etq-note { margin-top: 10px; font-size: 14px; color: var(--gris); }

@media (max-width: 480px) {
  .etq-item { gap: 10px; padding: 9px 11px; }
  .etq-vignette { width: 48px; height: 36px; }
}

.etq-erreur {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 1px solid var(--terre);
  color: var(--encre);
  font-size: 15px;
}

.etq-filet { border: 0; border-top: 1px solid var(--filet); margin: 40px 0 24px; }
.etq-suite { color: var(--encre-douce); max-width: 34em; line-height: 1.6; }
.etq-suite .bouton { margin-top: 16px; }

/* ── La page de référence juridique (/photos-ia-loi) ─────────────────────────
   Une citation de loi n'est pas une citation d'auteur : elle se lit comme un
   document, pas comme une accroche. Retrait à gauche et filet fin, rien de
   décoratif — c'est la source qui porte l'autorité, pas la mise en forme. */
.loi-citation {
  margin: 18px 0;
  padding: 2px 0 2px 18px;
  border-left: 1px solid var(--filet);
  color: var(--encre);
  font-style: italic;
  max-width: 34em;
}
.loi-liste {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--encre-douce);
  max-width: 34em;
  line-height: 1.7;
}
.loi-liste li { margin-bottom: 6px; }
/* ⚠️ LE h2 GLOBAL ÉCRASAIT LE TITRE DE CES PAGES (25/09).
   `h2` monte à 2.9rem partout sur le site, parce qu'il y sert de titre de
   section pleine largeur. Dans une colonne de lecture, dont le h1
   (`.colonne-titre`) est fixé à 1.85rem, un h2 plus GROS que le titre inverse
   la hiérarchie : on lit la sous-section avant le sujet. Vu sur
   /photos-ia-loi, mais le défaut valait aussi pour les CGV, la confidentialité
   et les mentions légales. */
.colonne h2 {
  font-size: 1.28rem;
  line-height: 1.32;
  letter-spacing: -0.02em;
  margin-top: 34px;
}
.colonne-texte h2 { margin-top: 34px; }

/* ── Les outils gratuits (26/09) ─────────────────────────────────────────────
   HEIC → JPG, tailles des portails, description d'annonce, filigrane. Même
   grammaire que /etiqueter : un filet, jamais une carte ; la zone de dépôt est
   la seule chose qui attire l'œil tant qu'aucune photo n'est là ; l'état
   actif est noir, la terre ne sert qu'à signaler. */

/* Caché à l'œil, présent pour le clavier et les lecteurs d'écran. Un champ
   fichier en `hidden` sort du parcours au clavier : on ne l'atteint plus. */
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La page outil s'élargit pour l'outil ; la prose garde sa mesure de lecture. */
.page-outil { max-width: 880px; }
.page-outil > .chapo,
.page-outil > section > p,
.page-outil > section > ol,
.page-outil > section > details { max-width: 68ch; }
.outil { margin: calc(var(--pas) * 8) 0 0; }
.outil .etq { margin: 0; }

.etq-depot:focus-within { outline: 2px solid var(--terre); outline-offset: 3px; }

.etq-panneau { display: grid; gap: 16px; margin-top: 20px; }
.etq fieldset { margin: 0; min-width: 0; }
.etq-groupe {
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  padding: 14px 16px 18px;
}
.etq-groupe > legend { padding: 0 6px; margin-left: -6px; }
.etq .etq-groupe--nu { border: 0; padding: 0; margin-bottom: 24px; }
.etq-groupe--nu > legend { padding: 0; margin: 0 0 10px; }

.etq-bascule {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  line-height: 1.4;
}
.etq-bascule input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--encre); flex: none; }

.etq-reglages-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin-top: 14px;
}
.etq-reglages-grille[hidden] { display: none; }
.etq-champ { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; }
.etq-champ--large { grid-column: 1 / -1; }
.etq-champ .etq-etiquette { margin: 0; }
.etq-champ output { color: var(--encre); font-variant-numeric: tabular-nums; letter-spacing: 0; margin-left: 6px; }
.etq-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.etq-petit { padding: 8px 14px; font-size: 0.9rem; }
.etq-petit:focus-within { outline: 2px solid var(--terre); outline-offset: 3px; }
.lien-bouton {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 0.9rem;
  color: var(--encre-douce);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.lien-bouton:hover { color: var(--encre); }
.lien-bouton[hidden] { display: none; }

.etq input[type='range'] { width: 100%; accent-color: var(--encre); margin: 4px 0 0; }

/* Un choix = une puce qui garde son bouton natif : un agent reconnaît une
   case et un bouton radio, il n'a rien à apprendre. */
.etq-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--filet);
  border-radius: var(--r-s);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--encre-douce);
  cursor: pointer;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
.choix input { margin: 0; accent-color: var(--encre); }
.choix:hover { border-color: var(--encre-douce); }
.choix:has(input:checked) { border-color: var(--encre); color: var(--encre); }
.choix:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.choix:has(input:focus-visible) { outline: 2px solid var(--terre); outline-offset: 2px; }
.choix[hidden] { display: none; }

.etq-avis {
  margin: 4px 0 0;
  padding: 10px 12px;
  background: var(--creme-sombre);
  border-radius: var(--r-s);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--encre-douce);
}
.etq-avis[hidden] { display: none; }

.etq-apercu {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 20px;
  border: 1px solid var(--filet);
  border-radius: var(--r-s);
}
.etq-apercu[hidden] { display: none; }

.etq-item--alerte .etq-item-etat { color: var(--terre-texte); }
.etq-item-etat { overflow-wrap: anywhere; }

.outil .champ-saisie { border-color: #8F8E88; padding: 11px 12px; }
.outil .champ-saisie:hover { border-color: var(--encre-douce); }
.outil .champ-saisie:focus { border-color: var(--encre); }
.outil select.champ-saisie { cursor: pointer; }

@media (max-width: 640px) {
  .etq-reglages-grille { grid-template-columns: minmax(0, 1fr); }
}

/* ── Le générateur de description ──────────────────────────────────────── */
.annonce-form { display: grid; gap: 20px; }
.annonce-rangee {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 20px;
}
.annonce-rangee--quatre { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.annonce-surface .etq-ligne { flex-wrap: nowrap; gap: 8px; }
.annonce-surface input { min-width: 0; flex: 1; }
.annonce-surface select { width: auto; flex: none; }
.annonce-nombre[hidden],
#annonce-bloc-meuble[hidden] { display: none; }
.annonce-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.annonce-sortie { margin-top: 36px; scroll-margin-top: 24px; }
.annonce-sortie[hidden] { display: none; }
.annonce-panneau { margin-top: 18px; }
.annonce-bloc { border-top: 1px solid var(--filet); padding: 18px 0 20px; }
.annonce-bloc:first-child { border-top-color: var(--encre); }
.annonce-bloc-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; }
.annonce-bloc h3 { font-size: 1rem; }
.annonce-compte { margin-left: auto; font-size: 0.8rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.annonce-compte--depasse { color: var(--terre-texte); font-weight: 600; }
.annonce-copier {
  padding: 5px 12px;
  border: 1px solid var(--filet);
  border-radius: var(--r-s);
  background: var(--surface);
  font: inherit; font-size: 0.82rem; font-weight: 600;
  color: var(--encre);
  cursor: pointer;
}
.annonce-copier:hover { border-color: var(--encre); }
.annonce-bloc p { max-width: 68ch; line-height: 1.65; color: var(--encre); margin-bottom: 0.9em; }
.annonce-points { margin: 0; padding-left: 20px; line-height: 1.7; }
.annonce-tout { border-top: 1px solid var(--filet); padding-top: 20px; }
.annonce-copier-tout { margin-bottom: 12px; }

/* ── Étape suivante : la preuve, pas un argumentaire ─────────────────────── */
.page-style .etape-suivante {
  margin-top: calc(var(--pas) * 16);
  padding-top: calc(var(--pas) * 7);
  border-top: 1px solid var(--encre);
}
.etape-paire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-width: 520px;
  margin: 0 0 20px;
}
.etape-paire figure { margin: 0; }
.etape-paire img { width: 100%; height: auto; border-radius: var(--r-s); }
.etape-paire figcaption { font-size: 0.8rem; color: var(--gris); margin-top: 6px; }
.appel.appel--nu { background: none; padding: 0; margin: 20px 0 0; }

.chiffrage-source td { font-size: 0.82rem; color: var(--gris); line-height: 1.5; padding-top: 0; }
.chiffrage-source a { color: var(--encre-douce); }

/* ── L'accueil : la liste des outils. Une ligne par outil, filet au-dessus :
   ce sont des portes, pas des produits à comparer côte à côte. ──────────── */
.outils-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 32px;
}
.outils-liste li { border-top: 1px solid var(--encre); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.outils-liste a { font-weight: 700; color: var(--encre); text-decoration: none; }
.outils-liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.outils-liste span { font-size: 0.9rem; color: var(--encre-douce); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .choix, .etq-depot { transition: none; }
}

/* Une section décochée se replie sur sa case : un cadre vide se lit comme un
   chargement raté. */
.etq-groupe:has(> [id$="-reglages"][hidden]) { border-color: transparent; padding-top: 0; padding-bottom: 0; }
.annonce-form fieldset { margin: 0; min-width: 0; }
.annonce-form legend { padding: 0; margin-bottom: 8px; }
.page-style .annonce-bloc { margin-top: 0; }

/* L'aperçu ne doit jamais repousser les réglages hors de l'écran : une photo
   en portrait pleine largeur fait deux écrans de haut. */
.etq-apercu { width: auto; max-width: 100%; max-height: 72vh; }

/* Sur ordinateur, le filigrane se règle À CÔTÉ de ce qu'il produit : réglages
   à gauche, dépôt puis aperçu à droite, qui reste en vue pendant qu'on fait
   glisser un curseur. Relevé chez Pedra (réglages à gauche, résultat à
   droite) ; sans ça, chaque réglage demandait de défiler pour voir l'effet. */
@media (min-width: 960px) {
  .page-outil { max-width: 1120px; }
  .outil #etiqueteur {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas:
      "panneau depot"
      "panneau apercu"
      "sortie sortie"
      "erreur erreur";
    grid-template-rows: auto 1fr;
    gap: 0 32px;
    align-items: start;
  }
  .outil #etiqueteur > .etq-depot { grid-area: depot; }
  .outil #etiqueteur > .etq-panneau { grid-area: panneau; margin-top: 0; }
  .outil #etiqueteur > .etq-apercu { grid-area: apercu; position: sticky; top: 16px; margin-top: 16px; }
  .outil #etiqueteur > .etq-sortie { grid-area: sortie; }
  .outil #etiqueteur > .etq-erreur { grid-area: erreur; }
  .outil #etiqueteur .etq-reglages-grille { grid-template-columns: minmax(0, 1fr); }
}
.annonce-surface .etq-ligne { align-items: stretch; }