/* ============================================================
   Annonces m2m — design system, feuille principale (main.css)

   Règle A2 : TOUTE valeur visuelle vient de tokens.css (var()).
   Aucune valeur magique dans ce fichier.

   Cette feuille est servie par le Worker en `/main.css` (R2) ; sa source
   est ce fichier. `/tokens.css` porte les variables : elle est chargée
   AVANT celle-ci.

   CLASSES PUBLIQUES ET LEUR RÔLE
   ────────────────────────────────────────────────────────────────────
   Le vocabulaire de classes du site est celui de ce fichier, et rien
   d'autre. Une classe utilisée par une page sans règle ici ne sera jamais
   stylée : le banc `tests/design-complet.test.mjs` (dépôt Worker) pose la
   question à chaque classe de `pages_statiques.ts` et `recherche_gabarit.ts`,
   et vérifie que le CSS reste valide.

   Structure de page
     .conteneur, .entete-page, .page-legal-section, .page-legale — cadrage et largeur de lecture
     .heros, .heros-sous-titre — bloc d'accueil et son chapô
     .ds-section, .ds-doc, .ds-demo, .ds-filet, .ds-rangee, .ds-champs, .ds-double, .ds-liste-cartes, .ds-pied — page « design system » (/systeme)

   Chrome de site
     .entete-site, .entete-site-ligne — bandeau de site collant
     .entete-logo, .entete-logo-m2m, .entete-logo-suite — logo
     .entete-nav, .entete-nav-machine — navigation principale et lien machine
     .entete-recherche, .entete-recherche-input — recherche du bandeau
     .pied-page, .pied-page-colonnes, .pied-page-col, .pied-page-bas — pied de page
     .nav-social — rangée de liens vers la communauté

   Boutons, puces, étiquettes
     .btn, .btn--primaire, .btn--secondaire, .btn--ghost, .btn--desactive, .btn--s, .btn--m, .btn--l — boutons : taille et couleur
     .chip, .chip--active — filtre sous forme de puce
     .badge, .badge--etat, .badge--garantie, .badge--facture, .badge--demo, .badge--agent, .badge--occasion, .badge--partenaire, .badge--affilie, .badge--info-nature — étiquettes d'état et d'origine
     .cc-bandeau, .cc-bandeau-texte, .cc-oui, .cc-non — bandeau de consentement (RGPD), son texte et ses deux boutons
     .bandeau-demo, .bandeau-demo-tag — bandeau « démo » permanent

   Champs de formulaire
     .champ, .champ-label, .champ-obligatoire, .champ-input, .champ-select, .champ-erreur, .champ-choix — un champ et ses sous-éléments

   Catalogue et cartes
     .grille-annonces — grille du catalogue (2 à 5 colonnes)
     .carte, .carte--grille, .carte--liste, .carte-visuel, .carte-img, .carte-sans-photo, .carte-placeholder, .carte-badges, .carte-corps, .carte-titre, .carte-meta, .carte-separateur, .carte-prix, .carte-lien — une annonce en grille ou en liste
     .cat-bloc, .cat-bloc-entete, .cat-tuiles, .cat-tuile, .cat-tuile-nom, .cat-tuile-compte — catalogue par catégorie
     .cat-intro, .cat-stats — texte d'introduction d'une catégorie
     .annonces-m2m, .annonces-m2m-note, .compteur-annonces-m2m — bloc « annonces réservables »
     .offres, .offre — offres d'affiliation (accueil et /offres)
     .vedettes-plus — lien « voir plus »

   Fiche d'une annonce
     .annonce-disposition, .annonce-meta, .annonce-description, .annonce-photo, .annonce-laterale, .annonce-achat, .annonce-prix, .annonce-infos, .annonce-cta, .annonce-cta-note, .annonce-marge — mise en page de l'annonce
     .galerie, .galerie-principale, .galerie-vignettes, .galerie-vignette, .galerie-legende — photos de l'annonce
     .tableau-specs, .tableau-specs-legende — caractéristiques
     .encart-vendeur, .encart-vendeur-titre, .encart-vendeur-nom, .encart-vendeur-ventes, .encart-vendeur-agent, .encart-vendeur-rang, .encart-vendeur-mandat — qui vend
     .rail-messages, .rail-message, .rail-message-type, .rail-message-texte, .rail-message--question, .rail-message--reponse, .rail-message--offre, .rail-message--refus, .rail-message--accord — fil de négociation
     .rail-meta, .rail-meta-ligne, .rail-meta-ts — horodatage et nature d'un message
     .bloc-machine, .bloc-machine-liste, .bloc-machine-code, .bloc-machine-lien — bloc destiné aux agents
     .fil-ariane — fil d'Ariane
     .facade-bandeau — bandeau de transparence des offres partenaires

   Recherche
     .barre-recherche, .barre-recherche-input, .barre-recherche-suggestions — champ de recherche
     .panneau-filtres, .panneau-filtres-groupe, .panneau-filtres-chips, .panneau-filtres-prix — filtres
     .recherche-disposition, .recherche-outils — colonnes et barre d'outils
     .bascule-vue, .bascule-tri, .compteur-resultats — vue, tri et compteur
     .pagination, .pagination-lien, .pagination-courante — pagination

   États
     .etat, .etat--vide, .etat--erreur, .etat-titre, .etat-detail, .etat-actions — état vide ou en erreur
     .etat-404, .etat-404-code — page 404
     .squelette, .squelette-visuel, .squelette-ligne — chargement en cours
     .sr-only — texte réservé aux lecteurs d'écran

   Communauté, guides, messages
     .social-post — post de la communauté
     .guide-releve — encart « relevé de prix » d'un guide
     .bandeau — message court d'information ou d'erreur (lien expiré, incomplet)
     .succes — message court de confirmation
     .meta — texte secondaire : compteur, consigne, lien de retour
     .note-legal — note encadrée de bas de page légale
     .bareme-classement — liste des signaux pondérés du classement
     .etapes-liste, .etape, .etape-numero — parcours en trois étapes
     .infobulle, .infobulle-terme, .infobulle-corps — infobulle
     .lien-discret — lien discret

   MAQUETTE V2 (2026-10-24) — coquille (`htmlPage`) et accueil (`pageAccueil`) :
     .marquee .marquee-piste .marquee-groupe .marquee-texte .marquee-sep
     .entete .entete-interieur .logo .logo-deux .nav .nav-lien .nav-lien--deposer
     .saut-contenu .enveloppe .sprite
     .hero .hero-interieur .hero-titre .hero-ligne .hero-ligne--accent
     .hero-ligne--signature .hero-meta .hero-meta-liste .hero-meta-item
     .hero-meta-valeur .hero-meta-libelle .badge-annee .badge-annee-texte
     .recherche .recherche-bloc .recherche-label .recherche-ligne
     .recherche-champ .recherche-bouton .recherche-aide
     .categories .categories-grille .categorie .categorie-icone .categorie-texte
     .categorie-nom .categorie-compte .categorie-fleche
     .section-offres .offres-grille .carte-offre .carte-offre--grande
     .offre-visuel .offre-tag .offre-corps .offre-titre .offre-prix
     .offre-meta .offre-lieu .offre-date .offre-glyph .offre-lien
     .chiffres .chiffres-grille .chiffre .chiffre-valeur .chiffre-libelle
     .pourquoi .pourquoi-grille .pourquoi-bloc .pourquoi-numero
     .pourquoi-titre .pourquoi-texte
     .cta .cta-panneau .cta-titre .cta-texte .cta-lien
     .pied .pied-colonnes .pied-colonne .pied-marque .pied-texte
     .pied-titre .pied-liste .pied-lien .pied-bas
     .sur-titre .titre-section
     .auth .auth-grille .auth-formulaire .auth-panneau .auth-arguments
     .recherche-filtres .recherche-resultats
   ────────────────────────────────────────────────────────────────────
   ============================================================ */

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

html {
  font-size: 100%;
}

body {
  margin: var(--espacement-0);
  font-family: var(--police-texte);
  font-size: var(--texte-base);
  line-height: var(--interligne-coulant);
  color: var(--couleur-texte);
  background: var(--couleur-fond);
}

/* L'attribut `hidden` doit primer sur un `display` posé en style inline.
   Bandeau de consentement : sans cette règle, `style="display:flex"`
   neutralise `hidden` — le bandeau reste affiché en permanence et
   `bandeau.hidden = true` ne le ferme jamais (constat Eddie 2026-10-22). */
[hidden] {
  display: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin: var(--espacement-0) var(--espacement-0) var(--espacement-3);
  color: var(--couleur-encre);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-serre);
}

/* Échelle de titres — une seule pour tout le site (tokens.css).
   Les variantes (héro, carte, pied de page) sont déclarées plus bas :
   elles se décalent d'un cran, jamais d'une taille inventée sur place. */
h1 { font-size: var(--titre-page); }
h2 { font-size: var(--titre-section); }
h3 { font-size: var(--titre-sous-section); }
h4 { font-size: var(--titre-detail); }

p {
  margin: var(--espacement-0) var(--espacement-0) var(--espacement-3);
}

a {
  color: var(--accent-600);
}

a:hover {
  color: var(--accent-700);
}

:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 2px;
}

/* ---------- Structure de page ---------- */

.conteneur {
  max-width: var(--largeur-conteneur);
  margin-inline: auto;
  padding-inline: var(--espacement-4);
}

.entete-page {
  padding: var(--espacement-6) var(--espacement-0) var(--espacement-4);
}

.entete-page p {
  color: var(--couleur-texte-2);
  max-width: 60ch;
}

/* ---------- Grille d'annonces (A3 : 2 → 5 colonnes) ---------- */

.grille-annonces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacement-3);
  padding-block-end: var(--espacement-7);
}

/* Valeurs littérales des breakpoints = tokens --bp-* (var() illisible en @media) */
@media (min-width: 768px) {
  .grille-annonces {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espacement-4);
  }
}

@media (min-width: 1024px) {
  .grille-annonces {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .grille-annonces {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- Carte d'annonce ---------- */

.carte {
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-1);
  padding: var(--espacement-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--espacement-2);
  transition: box-shadow var(--duree-transition) ease,
              border-color var(--duree-transition) ease;
}

.carte:hover {
  border-color: var(--couleur-bordure-forte);
  box-shadow: var(--ombre-2);
}

.carte h2 {
  font-size: var(--texte-s);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-normal);
  margin: var(--espacement-0);
}

.carte-visuel {
  aspect-ratio: 4 / 3;
  border-radius: var(--rayon-s);
  background: linear-gradient(135deg, var(--neutre-150), var(--neutre-300));
  color: var(--couleur-texte-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--texte-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--espacement-2);
  overflow: hidden; /* S3 : l'image réelle ne déborde jamais du cadre */
}

/* S3 (2026-08-29) : photo réelle de l'annonce dans la carte */
.carte-visuel .carte-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carte-visuel .carte-sans-photo {
  text-transform: uppercase;
}

.carte-prix {
  margin: var(--espacement-0);
  font-size: var(--texte-xl);
  font-weight: var(--graisse-tres-forte);
  line-height: var(--interligne-serre);
  color: var(--couleur-prix);
}

.carte-placeholder {
  min-width: var(--espacement-0);
}

/* ============================================================
   B1 — Primitives du design system
   ============================================================ */

/* ---------- Bouton ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacement-2);
  font-family: var(--police-texte);
  font-weight: var(--graisse-forte);
  border: var(--espacement-1) solid transparent;
  border-radius: var(--rayon-m);
  cursor: pointer;
  transition: background-color var(--duree-transition) ease,
              border-color var(--duree-transition) ease,
              color var(--duree-transition) ease;
}

.btn--s { padding: var(--espacement-2) var(--espacement-4); font-size: var(--texte-s); min-height: 24px; }
.btn--m { padding: var(--espacement-2) var(--espacement-4); font-size: var(--texte-base); }
.btn--l { padding: var(--espacement-3) var(--espacement-5); font-size: var(--texte-m); }

.btn--primaire {
  background: var(--accent-600);
  color: var(--neutre-0);
}
.btn--primaire:hover {
  background: var(--accent-700);
}

.btn--secondaire {
  background: var(--couleur-surface);
  border-color: var(--couleur-bordure-forte);
  color: var(--couleur-encre);
}
.btn--secondaire:hover {
  border-color: var(--accent-600);
  color: var(--accent-600);
}

.btn--ghost {
  background: transparent;
  color: var(--accent-600);
}
.btn--ghost:hover {
  background: var(--accent-100);
}

.btn--desactive,
.btn--desactive:hover {
  background: var(--neutre-200);
  border-color: var(--neutre-200);
  color: var(--neutre-500);
  cursor: not-allowed;
}

/* ---------- Badge ---------- */

.badge {
  display: inline-block;
  padding: var(--espacement-1) var(--espacement-2);
  border-radius: var(--rayon-s);
  font-size: var(--texte-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--espacement-1);
  white-space: nowrap;
}

.badge--etat     { background: var(--couleur-surface-2); color: var(--couleur-texte); }
.badge--garantie { background: var(--succes-100); color: var(--succes-600); }
.badge--facture  { background: var(--info-100); color: var(--info-600); }
.badge--demo     { background: var(--alerte-100); color: var(--alerte-600); }
.badge--agent    { background: var(--couleur-surface-machine); color: var(--couleur-texte-machine); }

/* A58-F1 — badge d'origine du catalogue : le visiteur (ou l'agent) doit
   toujours savoir s'il regarde une annonce m2m réservable ou une offre de
   marchand non réservable. Couleurs distinctes, contraste AA vérifié. */
.badge--occasion   { background: var(--info-100); color: var(--info-600); }
.badge--partenaire { background: var(--alerte-100); color: var(--alerte-600); }
/* --couleur-texte-2 (neutre-500) sur neutre-100 ne donne que 4,43:1, sous le
   seuil AA de 4,5:1 pour un texte non gras : on prend --couleur-texte
   (neutre-700 #454b57 sur neutre-100 #f4f5f6), mesuré 8,03:1. */
.badge--affilie    { background: var(--couleur-surface-2); color: var(--couleur-texte); font-weight: var(--graisse-normale); }

/* Les badges d'origine partagent une ligne, sans casser la grille des cartes. */
.carte-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-1);
  margin-bottom: var(--espacement-1);
}

/* Bandeau de transparence des offres partenaires (A58-F1, MIN-1 de la revue du
   14/09/2026) : la règle vivait dans le CSS de la façade, donc la page catégorie
   et l'accueil — qui affichent désormais les mêmes offres — ne la recevaient
   pas. Couleurs prises aux jetons AA du design system. */
.facade-bandeau {
  background: var(--alerte-100);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
  padding: var(--espacement-3) var(--espacement-4);
  margin-block: var(--espacement-4);
  font-size: var(--texte-s);
}

.facade-bandeau b {
  color: var(--alerte-600);
}

/* ME1 (20/10/2026) — introduction éditoriale des pages catégorie : texte
   rédigé unique (150-250 mots, mesuré sur le catalogue réel) + chiffres du
   jour injectés au rendu. Style volontairement discret : c'est un texte de
   lecture et de référencement, pas une mise en avant commerciale. */
.cat-intro {
  border-left: var(--espacement-1) solid var(--couleur-bordure-forte);
  padding: var(--espacement-1) var(--espacement-3);
  margin-block: var(--espacement-0) var(--espacement-4);
  max-width: 72ch;
}

.cat-intro p {
  font-size: var(--texte-s);
  line-height: 1.6;
}

.cat-intro .cat-stats {
  font-weight: var(--graisse-forte);
}

/* ---------- Champs ---------- */

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-1);
}

.champ-label {
  font-size: var(--texte-s);
  font-weight: var(--graisse-forte);
  color: var(--couleur-encre);
}

.champ-obligatoire { color: var(--accent-600); }

.champ-input {
  inline-size: 100%;
  min-width: var(--espacement-0);
  padding: var(--espacement-2) var(--espacement-3);
  font-family: var(--police-texte);
  font-size: var(--texte-base);
  color: var(--couleur-encre);
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure-forte);
  border-radius: var(--rayon-s);
}

.champ-input:hover { border-color: var(--neutre-400); }

.champ-select { min-width: var(--espacement-8); }

.champ-erreur {
  margin: var(--espacement-0);
  font-size: var(--texte-s);
  color: var(--accent-700);
}

.champ-choix {
  display: flex;
  align-items: center;
  gap: var(--espacement-2);
  font-size: var(--texte-s);
  color: var(--couleur-texte);
  cursor: pointer;
}

/* ---------- Chip ---------- */

.chip {
  padding: var(--espacement-1) var(--espacement-3);
  font-size: var(--texte-s);
  font-weight: var(--graisse-moyenne);
  color: var(--couleur-texte);
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure-forte);
  border-radius: var(--rayon-plein);
  cursor: pointer;
  transition: background-color var(--duree-transition) ease,
              border-color var(--duree-transition) ease,
              color var(--duree-transition) ease;
}

.chip:hover {
  border-color: var(--accent-600);
  color: var(--accent-600);
}

.chip--active,
.chip--active:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: var(--neutre-0);
}

/* ---------- Infobulle ---------- */

.infobulle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--espacement-1);
  cursor: help;
}

.infobulle-terme {
  text-decoration: underline dotted var(--neutre-400);
  text-underline-offset: var(--espacement-1);
}

.infobulle::after {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--texte-l);
  block-size: var(--texte-l);
  border-radius: var(--rayon-plein);
  background: var(--couleur-surface-machine);
  color: var(--couleur-texte-machine);
  font-size: var(--texte-xs);
  font-weight: var(--graisse-forte);
}

.infobulle-corps {
  position: absolute;
  inset-block-start: calc(100% + var(--espacement-2));
  inset-inline-start: var(--espacement-0);
  z-index: 10;
  max-width: var(--espacement-8);
  padding: var(--espacement-2) var(--espacement-3);
  border-radius: var(--rayon-s);
  background: var(--neutre-900);
  color: var(--neutre-0);
  font-size: var(--texte-s);
  line-height: var(--interligne-normal);
  opacity: var(--espacement-0);
  visibility: hidden;
  transition: opacity var(--duree-transition) ease;
}

.infobulle:hover .infobulle-corps,
.infobulle:focus .infobulle-corps,
.infobulle:focus-within .infobulle-corps {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   B2 — Composants marketplace
   ============================================================ */

/* ---------- Carte d'annonce ---------- */

.carte--grille {
  height: 100%;
}

.carte--liste {
  display: grid;
  grid-template-columns: var(--espacement-9) 1fr;
  gap: var(--espacement-3);
  align-items: start;
}

.carte--liste .carte-visuel {
  aspect-ratio: 1 / 1;
}

.carte-corps {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-2);
  align-items: flex-start;
}

.carte-titre {
  margin: var(--espacement-0);
  font-size: var(--texte-base);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-normal);
  color: var(--couleur-encre);
}

.carte-meta {
  display: flex;
  gap: var(--espacement-2);
  margin: var(--espacement-0);
  font-size: var(--texte-s);
  color: var(--couleur-texte-2);
}

.carte-separateur { color: var(--neutre-400); }

/* ---------- Barre de recherche ---------- */

.barre-recherche {
  display: flex;
  gap: var(--espacement-2);
}

.barre-recherche-input {
  flex: 1;
  min-width: var(--espacement-0);
  padding: var(--espacement-2) var(--espacement-4);
  font-family: var(--police-texte);
  font-size: var(--texte-m);
  color: var(--couleur-encre);
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure-forte);
  border-radius: var(--rayon-plein);
}

.barre-recherche-input:hover { border-color: var(--neutre-400); }

.barre-recherche-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-2) var(--espacement-4);
  margin: var(--espacement-2) var(--espacement-0) var(--espacement-0);
  padding: var(--espacement-0);
  list-style: none;
  font-size: var(--texte-s);
  color: var(--couleur-texte-2);
}

/* ---------- Panneau de filtres ---------- */

.panneau-filtres {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-4);
  padding: var(--espacement-4);
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
}

.panneau-filtres-groupe {
  margin: var(--espacement-0);
  padding: var(--espacement-0);
  border: none;
}

.panneau-filtres-groupe legend {
  margin-block-end: var(--espacement-2);
  font-size: var(--texte-s);
  font-weight: var(--graisse-forte);
  color: var(--couleur-encre);
  padding: var(--espacement-0);
}

.panneau-filtres-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-2);
}

.panneau-filtres-prix {
  display: flex;
  gap: var(--espacement-3);
  align-items: end;
}

.panneau-filtres-prix .champ {
  flex: 1;
  min-width: var(--espacement-0);
}

/* ---------- Galerie ---------- */

.galerie {
  margin: var(--espacement-0);
}

.galerie-principale {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--rayon-m);
  background: linear-gradient(135deg, var(--neutre-150), var(--neutre-300));
  color: var(--couleur-texte-2);
  font-size: var(--texte-2xl);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--espacement-2);
}

.galerie-legende {
  margin: var(--espacement-2) var(--espacement-0);
  font-size: var(--texte-s);
  color: var(--couleur-texte-2);
}

.galerie-vignettes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--espacement-2);
}

.galerie-vignette {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-s);
  background: var(--couleur-surface-2);
  color: var(--couleur-texte-2);
  font-size: var(--texte-s);
  cursor: pointer;
}

.galerie-vignette:hover {
  border-color: var(--accent-600);
  color: var(--accent-600);
}

/* ---------- Tableau de specs ---------- */

.tableau-specs {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--texte-s);
}

.tableau-specs-legende {
  margin-block-end: var(--espacement-2);
  text-align: start;
  font-weight: var(--graisse-forte);
  color: var(--couleur-encre);
}

.tableau-specs th,
.tableau-specs td {
  padding: var(--espacement-2) var(--espacement-3);
  border-block-end: var(--espacement-1) solid var(--couleur-bordure);
  text-align: start;
}

.tableau-specs th {
  inline-size: 40%;
  color: var(--couleur-texte-2);
  font-weight: var(--graisse-moyenne);
}

.tableau-specs td { color: var(--couleur-encre); }

/* ---------- Encart vendeur ---------- */

.encart-vendeur {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-2);
  padding: var(--espacement-4);
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
}

.encart-vendeur-titre {
  margin: var(--espacement-0);
  font-size: var(--texte-s);
  color: var(--couleur-texte-2);
  text-transform: uppercase;
  letter-spacing: var(--espacement-2);
}

.encart-vendeur-nom {
  margin: var(--espacement-0);
  font-size: var(--texte-l);
  font-weight: var(--graisse-forte);
  color: var(--couleur-encre);
}

.encart-vendeur-ventes {
  margin: var(--espacement-0);
  font-size: var(--texte-s);
  color: var(--couleur-texte-2);
}

.encart-vendeur-agent {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-2);
  padding: var(--espacement-3);
  border-radius: var(--rayon-s);
  background: var(--couleur-surface-machine);
  font-size: var(--texte-s);
  color: var(--couleur-texte-machine);
}

.encart-vendeur-agent p { margin: var(--espacement-0); }

.encart-vendeur-rang {
  display: flex;
  align-items: center;
  gap: var(--espacement-2);
}

.encart-vendeur-mandat {
  color: var(--couleur-texte-machine);
  font-weight: var(--graisse-forte);
}

/* ---------- Rail de messages ---------- */

.rail-messages {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-2);
  margin: var(--espacement-0);
  padding: var(--espacement-0);
  list-style: none;
}

.rail-message {
  max-width: 70ch;
  padding: var(--espacement-3) var(--espacement-4);
  border-radius: var(--rayon-m);
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure);
}

.rail-message-type {
  display: block;
  font-size: var(--texte-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--espacement-1);
  text-transform: uppercase;
}

.rail-message-texte {
  margin: var(--espacement-1) var(--espacement-0) var(--espacement-0);
  font-size: var(--texte-base);
}

.rail-message--question { border-inline-start: var(--espacement-3) solid var(--info-600); }
.rail-message--question .rail-message-type { color: var(--info-600); }

.rail-message--reponse { border-inline-start: var(--espacement-3) solid var(--succes-600); }
.rail-message--reponse .rail-message-type { color: var(--succes-600); }

.rail-message--offre { border-inline-start: var(--espacement-3) solid var(--accent-600); }
.rail-message--offre .rail-message-type { color: var(--accent-600); }

.rail-message--refus { border-inline-start: var(--espacement-3) solid var(--alerte-600); }
.rail-message--refus .rail-message-type { color: var(--alerte-600); }

.rail-message--accord {
  background: var(--succes-100);
  border-color: var(--succes-600);
}
.rail-message--accord .rail-message-type { color: var(--succes-600); }

/* ---------- Pagination ---------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espacement-2);
  padding-block: var(--espacement-4);
}

.pagination-lien {
  padding: var(--espacement-1) var(--espacement-3);
  border: var(--espacement-1) solid var(--couleur-bordure-forte);
  border-radius: var(--rayon-s);
  font-size: var(--texte-s);
  color: var(--couleur-texte);
  text-decoration: none;
}

.pagination-lien:hover {
  border-color: var(--accent-600);
  color: var(--accent-600);
}

.pagination-courante {
  padding: var(--espacement-1) var(--espacement-3);
  border-radius: var(--rayon-s);
  background: var(--accent-600);
  color: var(--neutre-0);
  font-size: var(--texte-s);
  font-weight: var(--graisse-forte);
}

/* ============================================================
   B3 — États et squelettes
   ============================================================ */

/* ---------- Bandeau DÉMO permanent ---------- */

.bandeau-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacement-2);
  margin: var(--espacement-0);
  padding: var(--espacement-2) var(--espacement-4);
  background: var(--neutre-900);
  color: var(--neutre-0);
  font-size: var(--texte-s);
  text-align: center;
}

.bandeau-demo-tag {
  padding: var(--espacement-1) var(--espacement-2);
  border-radius: var(--rayon-s);
  background: var(--accent-600);
  font-size: var(--texte-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--espacement-1);
}

/* ---------- État vide / erreur ---------- */

.etat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacement-2);
  padding: var(--espacement-7) var(--espacement-4);
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
  text-align: center;
}

/* État VIDE : « il n'y a rien ici » n'est pas une erreur. Le trait
   discontinu et le fond neutre le disent sans dramatiser. */
.etat--vide {
  border-style: dashed;
  border-color: var(--couleur-bordure-forte);
  background: var(--couleur-surface-2);
}

/* État D'ERREUR : trait plein, fond d'alerte, texte lisible dessus
   (--couleur-texte sur --alerte-100). */
.etat--erreur {
  border-style: solid;
  border-color: var(--alerte-600);
  background: var(--alerte-100);
}

.etat-titre {
  margin: var(--espacement-0);
  font-size: var(--texte-l);
  font-weight: var(--graisse-forte);
  color: var(--couleur-encre);
}

.etat-detail {
  margin: var(--espacement-0);
  color: var(--couleur-texte);
}

.etat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espacement-3);
  margin-block-start: var(--espacement-2);
}

.lien-discret {
  font-size: var(--texte-s);
  color: var(--couleur-texte-2);
}

/* Texte visible uniquement par les lecteurs d'écran */
.sr-only {
  position: absolute;
  inline-size: var(--espacement-1);
  block-size: var(--espacement-1);
  padding: var(--espacement-0);
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: var(--espacement-0);
}

/* ---------- Squelettes (chargement CSS pur) ---------- */

.squelette {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-2);
}

.squelette-visuel,
.squelette-ligne {
  border-radius: var(--rayon-s);
  background: linear-gradient(
    90deg,
    var(--neutre-100) 25%,
    var(--neutre-150) 50%,
    var(--neutre-100) 75%
  );
  background-size: 200% 100%;
  animation: squelette-pulse var(--duree-transition) ease-in-out infinite alternate;
}

.squelette-visuel {
  aspect-ratio: 4 / 3;
}

.squelette-ligne {
  block-size: var(--texte-l);
}

@keyframes squelette-pulse {
  from { background-position: 0% 0%; }
  to   { background-position: -100% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .squelette-visuel,
  .squelette-ligne {
    animation: none;
  }
}

/* ============================================================
   B4 — Galerie vivante (/systeme)
   ============================================================ */

.ds-section {
  margin-block-end: var(--espacement-7);
  padding-block-end: var(--espacement-5);
  border-block-end: var(--espacement-1) solid var(--couleur-bordure);
}

.ds-section h2 {
  font-size: var(--titre-section);
}

.ds-doc {
  max-width: 70ch;
  color: var(--couleur-texte-2);
  font-size: var(--texte-s);
}

.ds-demo {
  margin-block-start: var(--espacement-4);
}

.ds-filet {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-4);
}

.ds-rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacement-3);
}

.ds-champs {
  max-width: 60ch;
}

.ds-liste-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--espacement-9), 320px));
  gap: var(--espacement-4);
}

.ds-double {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--espacement-4);
}

.ds-pied {
  padding-block: var(--espacement-6);
  color: var(--couleur-texte-2);
  font-size: var(--texte-s);
}

/* ============================================================
   D1/D4 — Chrome de site (header sticky, pied de page)
   ============================================================ */

.entete-site {
  position: sticky;
  inset-block-start: var(--espacement-0);
  z-index: 50;
  background: var(--neutre-900);
  color: var(--neutre-0);
  box-shadow: var(--ombre-1);
}

.entete-site-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacement-3);
  padding-block: var(--espacement-2);
}

.entete-logo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--espacement-1);
  font-weight: var(--graisse-tres-forte);
  font-size: var(--texte-m);
  color: var(--neutre-0);
  text-decoration: none;
}

.entete-logo-m2m { color: var(--neutre-0); }
/* Sur fond sombre, l'accent clair (accent-600 n'atteint pas 4.5:1 sur encre) */
.entete-logo-suite { color: var(--accent-100); }

.entete-recherche {
  display: flex;
  flex: 1;
  gap: var(--espacement-2);
  min-width: min(240px, 100%);
}

.entete-recherche-input {
  flex: 1;
  min-width: var(--espacement-0);
  padding: var(--espacement-1) var(--espacement-3);
  border: none;
  border-radius: var(--rayon-plein);
  font-size: var(--texte-s);
  color: var(--couleur-encre);
  background: var(--neutre-0);
}

.entete-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacement-3);
  font-size: var(--texte-s);
}

.entete-nav a {
  color: var(--neutre-0);
  text-decoration: none;
  opacity: 0.85;
}

.entete-nav a:hover { opacity: 1; text-decoration: underline; }

.entete-nav-machine {
  padding: var(--espacement-1) var(--espacement-2);
  border-radius: var(--rayon-s);
  background: var(--couleur-surface-machine);
  color: var(--couleur-texte-machine) !important;
  font-weight: var(--graisse-forte);
}

.pied-page {
  margin-block-start: var(--espacement-7);
  background: var(--neutre-900);
  color: var(--neutre-0);
  font-size: var(--texte-s);
}

.pied-page-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--espacement-5);
  padding-block: var(--espacement-6) var(--espacement-4);
}

.pied-page-col {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-2);
}

.pied-page-col h2 { font-size: var(--texte-m); margin: var(--espacement-0); }
.pied-page-col h3 {
  font-size: var(--texte-xs);
  text-transform: uppercase;
  letter-spacing: var(--espacement-1);
  color: var(--neutre-400);
  margin: var(--espacement-0);
}
.pied-page-col a { color: var(--neutre-0); opacity: 0.8; text-decoration: none; }
.pied-page-col a:hover { opacity: 1; text-decoration: underline; }
.pied-page-col p { color: var(--neutre-400); margin: var(--espacement-0); }

.pied-page-bas {
  border-top: var(--espacement-1) solid var(--neutre-800);
  padding-block: var(--espacement-3);
}
.pied-page-bas p { margin: var(--espacement-0); color: var(--neutre-400); font-size: var(--texte-xs); }

/* ============================================================
   D1 — Accueil (héro, catégories, étapes)
   ============================================================ */

.heros {
  padding-block: var(--espacement-7) var(--espacement-5);
}

.heros h1 {
  font-size: var(--texte-4xl);
  max-width: 24ch;
}

.heros-sous-titre {
  max-width: 60ch;
  font-size: var(--texte-m);
  color: var(--couleur-texte-2);
}

.cat-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--espacement-3);
  margin-block-end: var(--espacement-7);
}

/* A58-F1 (round 9) — mise en avant des annonces m2m sur l'accueil : le seul
   contenu réservable, qui n'entrait ni dans les blocs (classés au volume) ni
   dans les tuiles. Texte en --couleur-texte (neutre-700, 8,03:1 sur neutre-100)
   et non --couleur-texte-2 (4,43:1, sous le seuil AA). */
.annonces-m2m {
  margin-block: var(--espacement-6);
  padding: var(--espacement-4);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
  background: var(--couleur-surface-2);
}

.annonces-m2m-note {
  font-size: var(--texte-s);
  color: var(--couleur-texte);
  margin-block: var(--espacement-2);
  max-width: 70ch;
}

.compteur-annonces-m2m {
  font-size: var(--texte-s);
  color: var(--couleur-texte);
}

/* A58-F1 — catalogue de l'accueil classé par catégorie : un bloc par
   catégorie, les deux origines dans la même grille. */
.cat-bloc {
  margin-block: var(--espacement-6);
}

.cat-bloc-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacement-2);
  border-block-end: var(--espacement-1) solid var(--couleur-bordure);
  padding-block-end: var(--espacement-2);
  margin-block-end: var(--espacement-3);
}

.cat-bloc-entete h3 {
  margin: 0;
  font-size: var(--titre-sous-section);
}

.cat-tuile {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-1);
  padding: var(--espacement-4);
  background: linear-gradient(135deg, var(--couleur-surface), var(--couleur-surface-2));
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
  text-decoration: none;
  transition: border-color var(--duree-transition) ease,
              box-shadow var(--duree-transition) ease;
}

.cat-tuile:hover {
  border-color: var(--accent-600);
  box-shadow: var(--ombre-2);
}

.cat-tuile-nom {
  font-weight: var(--graisse-forte);
  color: var(--couleur-encre);
}

.cat-tuile-compte {
  font-size: var(--texte-xs);
  color: var(--couleur-texte-2);
}

.carte-lien { text-decoration: none; display: block; height: 100%; }

.vedettes-plus {
  margin-block-start: var(--espacement-4);
  font-weight: var(--graisse-forte);
}

.etapes-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espacement-4);
  margin: var(--espacement-0);
  padding: var(--espacement-0);
  list-style: none;
}

.etape {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-2);
  padding: var(--espacement-4);
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
}

.etape-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--espacement-6);
  block-size: var(--espacement-6);
  border-radius: var(--rayon-plein);
  background: var(--accent-600);
  color: var(--neutre-0);
  font-weight: var(--graisse-tres-forte);
}

.etape h3 { margin: var(--espacement-0); font-size: var(--titre-detail); }
.etape p { margin: var(--espacement-0); font-size: var(--texte-s); color: var(--couleur-texte-2); }

/* ============================================================
   D2 — Recherche (disposition filtres / résultats)
   ============================================================ */

.recherche-disposition {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--espacement-5);
  align-items: start;
}

.recherche-outils {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacement-3);
  margin-block-end: var(--espacement-4);
}

.bascule-vue,
.bascule-tri {
  display: flex;
  gap: var(--espacement-1);
}

.bascule-vue a,
.bascule-tri a {
  padding: var(--espacement-1) var(--espacement-3);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-plein);
  font-size: var(--texte-s);
  color: var(--couleur-texte);
  text-decoration: none;
}

.bascule-vue a:hover,
.bascule-tri a:hover {
  border-color: var(--accent-600);
  color: var(--accent-600);
}

.bascule-vue a[aria-current="page"],
.bascule-tri a[aria-current="page"] {
  background: var(--neutre-900);
  border-color: var(--neutre-900);
  color: var(--neutre-0);
}

.compteur-resultats { color: var(--couleur-texte-2); }

@media (max-width: 899px) {
  .recherche-disposition {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   D3 — Page annonce
   ============================================================ */

.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-2);
  padding-block: var(--espacement-3);
  font-size: var(--texte-s);
  color: var(--couleur-texte-2);
}

.fil-ariane a { color: var(--couleur-texte-2); }

.annonce-disposition {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--espacement-6);
  align-items: start;
}

@media (max-width: 899px) {
  .annonce-disposition {
    grid-template-columns: 1fr;
  }
}

.annonce-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-2);
  color: var(--couleur-texte-2);
  font-size: var(--texte-s);
}

.annonce-description {
  max-width: 70ch;
}

.annonce-laterale {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-4);
  position: sticky;
  inset-block-start: calc(var(--espacement-9));
}

.annonce-achat {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-3);
  padding: var(--espacement-4);
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
}

.annonce-prix {
  margin: var(--espacement-0);
  font-size: var(--texte-3xl);
  font-weight: var(--graisse-tres-forte);
  color: var(--couleur-prix);
  line-height: var(--interligne-serre);
}

.annonce-infos {
  margin: var(--espacement-0);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-2);
  font-size: var(--texte-s);
  color: var(--couleur-texte-2);
}

.annonce-cta { text-decoration: none; text-align: center; }

.annonce-cta-note {
  margin: var(--espacement-0);
  font-size: var(--texte-xs);
  color: var(--couleur-texte-2);
  text-align: center;
}

.annonce-marge {
  margin: var(--espacement-0);
  font-size: var(--texte-s);
  color: var(--couleur-texte-machine);
  background: var(--couleur-surface-machine);
  padding: var(--espacement-2) var(--espacement-3);
  border-radius: var(--rayon-s);
}

.bloc-machine {
  padding: var(--espacement-4);
  border: var(--espacement-1) dashed var(--couleur-bordure-forte);
  border-radius: var(--rayon-m);
  background: var(--couleur-surface-machine);
  font-size: var(--texte-s);
}

.bloc-machine h2 {
  margin: var(--espacement-0) var(--espacement-0) var(--espacement-2);
  font-size: var(--texte-xs);
  text-transform: uppercase;
  letter-spacing: var(--espacement-2);
  color: var(--couleur-texte-machine);
}

.bloc-machine-liste {
  margin: var(--espacement-0);
  display: flex;
  flex-direction: column;
  gap: var(--espacement-2);
}

.bloc-machine-liste div {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-1);
}

.bloc-machine-liste dt {
  font-weight: var(--graisse-forte);
  color: var(--couleur-texte-machine);
}

.bloc-machine-liste dd {
  margin: var(--espacement-0);
  color: var(--couleur-texte);
}

.bloc-machine-code {
  font-family: var(--police-mono);
  font-size: var(--texte-xs);
  word-break: break-all;
}

.bloc-machine-lien {
  margin-block-start: var(--espacement-2);
  display: inline-block;
  color: var(--couleur-texte-machine);
  font-weight: var(--graisse-forte);
}

/* ============================================================
   D4 — Pages légales et 404
   ============================================================ */

.page-legal-section {
  max-width: 75ch;
  margin-block-end: var(--espacement-section);
}

/* Le titre de section suit l'échelle globale (h2 = 28 px partout). L'écart
   entre deux sections est porté par la marge de la section, pas par le
   titre : l'espacement ne dépend plus du contenu. */
.page-legal-section h2 {
  margin-block-start: var(--espacement-0);
  font-size: var(--titre-section);
}

.page-legal-section h3 {
  font-size: var(--titre-sous-section);
}

.page-legal-section li {
  margin-block-end: var(--espacement-1);
}

/* La 404 n'est pas un « état vide » : elle garde la boîte neutre, trait
   plein — le trait discontinu reste réservé à « il n'y a rien à montrer ». */
.etat-404 {
  margin-block: var(--espacement-7);
  border-style: solid;
  background: var(--couleur-surface);
}

.rail-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--espacement-2); }
.rail-meta-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacement-2); }
.badge--info-nature { background: var(--info-100); color: var(--info-600); }
.rail-meta-ts { font-size: var(--texte-xs); color: var(--couleur-texte-2); }
.annonce-photo { inline-size: 100%; block-size: auto; object-fit: cover; border-radius: var(--rayon-s); }
.galerie-principale .annonce-photo { border-radius: var(--rayon-m); }
.galerie-vignettes .annonce-photo { inline-size: 100%; }
.etat-404-code {
  margin: var(--espacement-0);
  font-size: var(--texte-5xl);
  font-weight: var(--graisse-tres-forte);
  color: var(--neutre-300);
  line-height: 1;
}

/* ============================================================
   E12 — Compléments : classes rendues par le Worker
   ============================================================
   Ces classes sont portées par les pages que le Worker sert lui-même
   (pages statiques, gabarit de recherche, pages de la communauté).
   Aucune n'avait de règle : le navigateur les laissait nues. Toutes les
   valeurs viennent de tokens.css — aucune valeur magique. */

   /* ---------- Bandeau de consentement (RGPD) ---------- */

/* Le bandeau est posé par le Worker (src/index.ts, BANDEAU_ANALYTICS) et par
   le gabarit de recherche (src/recherche_gabarit.ts). Il ne porte plus aucun
   style en ligne : sa mise en page et sa teinte sont ici. */
.cc-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espacement-3);
  margin-block: var(--espacement-0);
  padding: var(--espacement-3) var(--espacement-4);
  background: var(--couleur-surface-machine);
  border: var(--espacement-0);
  border-block-end: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--espacement-0);
  color: var(--couleur-texte);
  font-size: var(--texte-s);
  text-align: center;
}

/* Le texte du bandeau : il occupe la place disponible et reste centré.
   C'est cette règle qui remplace le `style="flex:1 1 360px"` du Worker. */
.cc-bandeau-texte {
  flex: 1 1 360px;
  text-align: center;
}

/* Les deux boutons du bandeau et des pages de consentement. `:where()` garde
   une spécificité nulle : quand le bouton porte aussi `btn btn--m`, c'est la
   classe de design system qui l'emporte ; seul, il reste habillé. */
:where(.cc-oui, .cc-non) {
  font-family: var(--police-texte);
  font-weight: var(--graisse-forte);
  cursor: pointer;
  padding: var(--espacement-2) var(--espacement-4);
  border: var(--espacement-1) solid transparent;
  border-radius: var(--rayon-m);
  font-size: var(--texte-s);
  transition: background-color var(--duree-transition) ease,
              border-color var(--duree-transition) ease,
              color var(--duree-transition) ease;
}

:where(.cc-oui) {
  background: var(--accent-600);
  color: var(--neutre-0);
}

:where(.cc-oui:hover) {
  background: var(--accent-700);
}

:where(.cc-non) {
  background: var(--couleur-surface);
  border-color: var(--couleur-bordure-forte);
  color: var(--couleur-encre);
}

:where(.cc-non:hover) {
  border-color: var(--accent-600);
  color: var(--accent-600);
}

   /* ---------- Notes et textes secondaires ---------- */

/* Note de bas de page légale : encadré discret, distinct du corps du texte.
   --couleur-texte et non --couleur-texte-2 : sur --couleur-surface-2, le
   gris secondaire ne ferait que 4,43:1, sous le seuil AA. */
.note-legal {
  margin-block: var(--espacement-4);
  padding: var(--espacement-3) var(--espacement-4);
  background: var(--couleur-surface-2);
  border-inline-start: var(--espacement-1) solid var(--couleur-bordure-forte);
  border-radius: var(--rayon-s);
  color: var(--couleur-texte);
  font-size: var(--texte-s);
}

/* Texte secondaire : compteur, consigne, lien de retour. */
.meta {
  margin-block: var(--espacement-0) var(--espacement-3);
  max-width: 70ch;
  color: var(--couleur-texte-2);
  font-size: var(--texte-s);
}

   /* ---------- Barème de classement (/transparence-ia) ---------- */

/* Une ligne par signal pondéré : le filet sépare les lignes, la puce
   disparaît. Le barème doit se lire comme un relevé, pas comme un texte. */
.bareme-classement {
  margin-block: var(--espacement-4);
  padding: var(--espacement-0);
  list-style: none;
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
  overflow: hidden;
}

.bareme-classement li {
  margin: var(--espacement-0);
  padding: var(--espacement-3) var(--espacement-4);
  border-block-end: var(--espacement-1) solid var(--couleur-bordure);
  color: var(--couleur-texte);
  font-size: var(--texte-s);
}

.bareme-classement li:last-child {
  border-block-end: var(--espacement-0);
}

.bareme-classement strong {
  color: var(--couleur-encre);
}

   /* ---------- Messages courts (pages de la communauté) ---------- */

/* Message d'information : lien de validation incomplet, expiré, déjà
   utilisé. Encadré d'alerte discret — pas un état d'écran plein. */
.bandeau {
  margin-block: var(--espacement-3) var(--espacement-4);
  padding: var(--espacement-3) var(--espacement-4);
  background: var(--alerte-100);
  border: var(--espacement-1) solid var(--couleur-bordure-forte);
  border-radius: var(--rayon-m);
  color: var(--couleur-texte);
  font-size: var(--texte-s);
}

/* Message de confirmation. */
.succes {
  margin-block: var(--espacement-3) var(--espacement-4);
  padding: var(--espacement-3) var(--espacement-4);
  background: var(--succes-100);
  border: var(--espacement-1) solid var(--succes-600);
  border-radius: var(--rayon-m);
  color: var(--couleur-texte);
  font-size: var(--texte-s);
}

   /* ---------- Offres d'affiliation (accueil, /offres) ---------- */

.offres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--espacement-4);
  margin-block: var(--espacement-4);
}

.offre {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-2);
  padding: var(--espacement-3);
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
}

.offre h3 {
  margin: var(--espacement-0);
  font-size: var(--titre-detail);
  line-height: var(--interligne-normal);
}

.offre p {
  margin: var(--espacement-0);
  color: var(--couleur-texte-2);
  font-size: var(--texte-s);
}

.offre img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  border-radius: var(--rayon-s);
}

   /* ---------- Communauté (posts, navigation) ---------- */

.social-post {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-2);
  margin-block-end: var(--espacement-3);
  padding: var(--espacement-3) var(--espacement-4);
  background: var(--couleur-surface);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
}

.social-post p {
  margin: var(--espacement-0);
}

.nav-social {
  margin-block-end: var(--espacement-5);
  padding-block: var(--espacement-2);
  border-block-end: var(--espacement-1) solid var(--couleur-bordure);
  color: var(--couleur-texte-2);
  font-size: var(--texte-s);
}

   /* ---------- Guides (relevé de prix) ---------- */

.guide-releve {
  margin-block: var(--espacement-5);
  padding: var(--espacement-4);
  background: var(--couleur-surface-machine);
  border: var(--espacement-1) solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
  color: var(--couleur-texte);
  font-size: var(--texte-s);
}

.guide-releve ul {
  margin-block: var(--espacement-2) var(--espacement-3);
  padding-inline-start: var(--espacement-5);
}

.guide-releve p {
  margin-block: var(--espacement-0);
}

   /* ---------- Enveloppe d'une page légale ---------- */

/* La largeur de lecture est portée par `.page-legal-section` ; l'enveloppe
   n'apporte que l'espace du bas de page. */
.page-legale {
  padding-block-end: var(--espacement-7);
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--black);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--orange);
  color: var(--black);
  padding: .8rem 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  border-radius: var(--rayon-s);
}
.saut-contenu:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.enveloppe { width: min(1440px, 100% - clamp(1.5rem, 5vw, 5rem)); margin-inline: auto; }

.sur-titre {
  font-family: var(--sans);
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--gray-strong);
  margin: 0 0 1rem;
}

.titre-section {
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: -.04em;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: .88;
  margin: 0 0 clamp(1.8rem, 4vw, 3rem);
  max-width: 18ch;
}

/* ---------------------------------------------------------------- marquee */
.marquee {
  background: var(--black);
  color: var(--cream);
  overflow: hidden;
  white-space: nowrap;
  padding: .6rem 0;
}
.marquee-piste { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee-groupe { display: flex; align-items: center; }
.marquee-texte {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(.95rem, 1.6vw, 1.35rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  padding-right: 2.5rem;
}
.marquee-sep { color: var(--orange); padding-right: 2.5rem; font-weight: 900; }
.marquee:hover .marquee-piste,
.marquee:focus-within .marquee-piste { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ----------------------------------------------------------------- header */
.entete {
  background: var(--off-white);
  position: sticky;
  top: 0;
  z-index: 30;
}
.entete-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  flex-wrap: wrap;
}
.logo {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -.06em;
  text-decoration: none;
  line-height: 1;
}
.logo-deux { color: var(--orange); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); flex-wrap: wrap; }
.nav-lien {
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  text-decoration: none;
  padding: .45rem 0;
  transition: color .12s ease;
}
.nav-lien:hover { color: var(--orange); }
.nav-lien--deposer {
  background: var(--black);
  color: var(--cream);
  padding: .7rem 1.1rem;
  border-radius: var(--rayon-s);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nav-lien--deposer:hover {
  background: var(--orange);
  color: var(--black);
  transform: translateY(-3px);
  box-shadow: var(--ombre-douce);
}

/* ------------------------------------------------------------------- hero */
.hero { background: var(--cream); padding: clamp(3.5rem, 8vw, 7rem) 0; }
.hero-interieur {
  display: grid;
  grid-template-columns: minmax(130px, .26fr) minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.hero-texte { min-width: 0; }
.hero-titre {
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: -.04em;
  font-size: clamp(2.8rem, 8.5vw, 7.5rem);
  line-height: .82;
  margin: 0;
}
.hero-ligne { display: block; }
.hero-ligne--accent { color: var(--orange); font-style: italic; }
.hero-ligne--signature {
  font-family: var(--sans);
  font-size: .16em;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 1.6em;
  display: inline-block;
}
.hero-ligne--signature::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 6px;
  background: var(--orange);
  margin-bottom: 1.2em;
}

.hero-meta { display: block; }
.hero-meta-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; text-align: left; }
.hero-meta-item { display: grid; gap: .1rem; }
.hero-meta-valeur {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: -.04em;
  line-height: 1;
}
.hero-meta-libelle {
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gray-strong);
}

.badge-annee {
  width: clamp(88px, 11vw, 136px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--orange);
  color: var(--black);
  display: grid;
  place-items: center;
  animation: rotation 22s linear infinite;
}
.badge-annee-texte {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  letter-spacing: -.03em;
}
@keyframes rotation { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- recherche */
.recherche { background: var(--off-white); padding: clamp(3.5rem, 8vw, 7rem) 0; }
.recherche-bloc {
  position: relative;
  background: var(--cream);
  border-radius: var(--rayon);
  padding: clamp(2.6rem, 5vw, 3.6rem) clamp(1rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem);
}
.recherche-label {
  position: absolute;
  top: -1rem;
  left: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--orange);
  color: var(--black);
  border-radius: var(--rayon-s);
  padding: .25rem .8rem;
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: 1.2;
}
.recherche-ligne { display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap; }
.recherche-champ {
  flex: 1 1 22rem;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid var(--black);
  background: transparent;
  padding: .35rem 0;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.7rem, 4.5vw, 3.2rem);
  letter-spacing: -.03em;
  color: var(--black);
  border-radius: var(--rayon-s);
}
.recherche-champ::placeholder { color: var(--gray-strong); }
.recherche-champ:focus { outline: none; border-bottom-color: var(--orange); }
.recherche-bouton {
  flex: 0 0 auto;
  background: var(--black);
  color: var(--cream);
  border: 0;
  border-radius: var(--rayon-s);
  padding: 1rem 1.8rem;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.recherche-bouton:hover { transform: translateY(-3px); box-shadow: var(--ombre-douce); }
.recherche-aide { margin: 1.2rem 0 0; font-size: .85rem; color: var(--gray-strong); }

/* ------------------------------------------------------------- categories */
.categories { background: var(--cream); padding: clamp(3.5rem, 8vw, 7rem) 0; }
.categories-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
}
.categorie {
  background: var(--white);
  border-radius: var(--rayon);
  text-decoration: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.categorie:hover {
  background: var(--orange-pale);
  transform: translateY(-3px);
  box-shadow: var(--ombre-douce);
}
.categorie:hover .categorie-nom { color: var(--orange); }
.categorie:hover .categorie-compte { color: var(--gray-strong); }
.categorie-icone { width: clamp(34px, 3.4vw, 46px); height: clamp(34px, 3.4vw, 46px); }
.categorie-icone svg { width: 100%; height: 100%; fill: none; stroke: var(--black); stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.categorie-texte { display: grid; gap: .15rem; min-width: 0; }
.categorie-nom {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  letter-spacing: -.02em;
  line-height: 1.05;
  text-transform: capitalize;
  transition: color .12s ease;
}
.categorie-compte {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray-strong);
}
.categorie-fleche {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
}

/* ----------------------------------------------------------------- offres */
.section-offres { background: var(--off-white); padding: clamp(3.5rem, 8vw, 7rem) 0; }
.offres-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: stretch;
}
.carte-offre {
  background: var(--white);
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.carte-offre:hover { transform: translateY(-3px); box-shadow: var(--ombre-douce); }
.carte-offre--grande { grid-column: span 2; grid-row: span 2; }
.offre-visuel {
  position: relative;
  background: linear-gradient(135deg, var(--cream) 0%, var(--border) 100%);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.carte-offre--grande .offre-visuel { aspect-ratio: 16 / 9; }
.offre-visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, var(--voile) 0 2px, transparent 2px 9px);
}
.offre-glyph { width: 22%; min-width: 54px; opacity: .3; position: relative; z-index: 1; }
.offre-glyph svg { width: 100%; height: auto; fill: none; stroke: var(--black); stroke-width: 1.4; }
.offre-tag {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;
  background: var(--orange);
  color: var(--black);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .35rem .7rem;
  border-radius: var(--rayon-s);
}
.offre-corps { padding: clamp(.9rem, 1.8vw, 1.3rem); display: grid; gap: .5rem; align-content: start; flex: 1; }
.offre-titre {
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.12;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.carte-offre--grande .offre-titre { font-size: clamp(1.5rem, 3.2vw, 2.6rem); -webkit-line-clamp: 3; }
.offre-prix {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  letter-spacing: -.03em;
  margin: 0;
  line-height: 1;
}
.carte-offre--grande .offre-prix { font-size: clamp(2rem, 3.6vw, 3rem); color: var(--orange); }
.offre-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray-strong);
}
.offre-lieu, .offre-date { white-space: nowrap; }
.offre-lien { text-decoration: none; }
.offre-lien:hover .offre-titre { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* --------------------------------------------------------------- chiffres */
.chiffres { background: var(--black); color: var(--cream); padding: clamp(3.5rem, 8vw, 7rem) 0; }
.chiffres .sur-titre { color: var(--cream); }
.chiffres-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.chiffre { display: grid; gap: .1rem; align-content: start; }
.chiffre-valeur {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--orange);
  display: block;
}
.chiffre-libelle {
  display: block;
  margin-top: .5rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--cream);
}

/* --------------------------------------------------------------- pourquoi */
.pourquoi { background: var(--cream); padding: clamp(3.5rem, 8vw, 7rem) 0; }
.pourquoi-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.pourquoi-bloc {
  position: relative;
  background: var(--white);
  border-radius: var(--rayon);
  padding: clamp(2.6rem, 3.4vw, 3.2rem) clamp(1.2rem, 2.2vw, 1.8rem) clamp(1.4rem, 2.4vw, 2rem);
}
.pourquoi-numero {
  position: absolute;
  top: -1.5rem;
  left: 1.5rem;
  background: var(--orange);
  color: var(--black);
  border-radius: var(--rayon-s);
  font-family: var(--serif);
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1;
  padding: .28rem .6rem;
}
.pourquoi-titre {
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: -.025em;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.06;
  margin: 0 0 .8rem;
}
.pourquoi-texte { margin: 0; font-size: .95rem; color: var(--gray-strong); }

/* -------------------------------------------------------------------- CTA */
.cta { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.cta-panneau {
  background: var(--orange);
  border-radius: var(--rayon);
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 5rem);
  text-align: center;
}
.cta-titre {
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: -.04em;
  font-size: clamp(2.6rem, 9vw, 7rem);
  line-height: .86;
  margin: 0;
  color: var(--black);
}
.cta-texte { margin: 1.2rem auto 0; max-width: 46ch; font-size: 1rem; font-weight: 600; color: var(--black); }
.cta-lien {
  display: inline-block;
  margin-top: 1.8rem;
  background: var(--black);
  color: var(--cream);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 1.1rem 2.2rem;
  border-radius: var(--rayon-s);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta-lien:hover { transform: translateY(-3px); box-shadow: var(--ombre-douce); }

/* ----------------------------------------------------------------- footer */
.pied { background: var(--black); color: var(--cream); padding: clamp(3.5rem, 8vw, 7rem) 0 1.5rem; }
.pied-colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gouttiere); }
.pied-colonne { min-width: 0; }
.pied-titre {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 1rem;
}
.pied-marque { font-size: 2.4rem; margin-bottom: .6rem; }
.pied-texte { margin: 0 0 1.2rem; font-size: .88rem; color: var(--gray); max-width: 32ch; }
.pied-liste { list-style: none; margin: 0; padding: 0; }
.pied-lien {
  display: block;
  text-decoration: none;
  font-size: .9rem;
  padding: .28rem 0;
  color: var(--cream);
  transition: color .12s ease;
}
.pied-lien:hover { color: var(--orange); }
.pied-bas {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--gray);
}
.pied-bas a { color: var(--cream); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .offres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-offre--grande { grid-column: span 2; grid-row: span 1; }
  .pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-interieur { grid-template-columns: 1fr; }
  .hero-texte { order: -1; }
  .hero-meta-liste { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; text-align: left; }
  .categories-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pourquoi-grille { grid-template-columns: 1fr; }
  .entete-interieur { justify-content: space-between; }
}
@media (max-width: 560px) {
  .categories-grille { grid-template-columns: 1fr; }
  .offres-grille { grid-template-columns: 1fr; }
  .carte-offre--grande { grid-column: span 1; }
  .chiffres-grille { grid-template-columns: 1fr; }
  .pied-colonnes { grid-template-columns: 1fr; }
  .nav { gap: .9rem; }
  .nav-lien { font-size: .74rem; }
}

/* ------------------------------------------------- mouvement reduit (AA) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-piste { animation: none; }
  .marquee-groupe[aria-hidden="true"] { display: none; }
  .badge-annee { animation: none; }
  .categorie, .carte-offre, .recherche-bouton, .cta-lien, .nav-lien--deposer { transition: none; }
  .recherche-bouton:hover, .cta-lien:hover, .nav-lien--deposer:hover { transform: none; }
  .carte-offre:hover, .categorie:hover { transform: none; }
}

/* =====================================================================
   Inventaire — classes de la maquette v2 (2026-10-24)
   badge-annee badge-annee-texte carte-offre carte-offre--grande categorie
   categorie-compte categorie-fleche categorie-icone categorie-nom categorie-texte
   categories categories-grille chiffre chiffre-libelle chiffre-valeur chiffres
   chiffres-grille cta cta-lien cta-panneau cta-texte cta-titre entete
   entete-interieur enveloppe hero hero-interieur hero-ligne hero-ligne--accent
   hero-ligne--signature hero-meta hero-meta-item hero-meta-libelle hero-meta-liste
   hero-meta-valeur hero-titre logo logo-deux marquee marquee-groupe marquee-piste
   marquee-sep marquee-texte nav nav-lien nav-lien--deposer offre-corps offre-date
   offre-glyph offre-lien offre-lieu offre-meta offre-prix offre-tag offre-titre
   offre-visuel offres-grille pied pied-bas pied-colonne pied-colonnes pied-lien
   pied-liste pied-marque pied-texte pied-titre pourquoi pourquoi-bloc pourquoi-grille
   pourquoi-numero pourquoi-texte pourquoi-titre recherche recherche-aide recherche-bloc
   recherche-bouton recherche-champ recherche-label recherche-ligne saut-contenu
   section-offres sprite sur-titre titre-section
   ===================================================================== */

/* Sprite et icônes SVG : les symboles sont des traits, jamais des aplats.
   Sans cela, `<use>` d'un rect sans fill se remplit en noir massif. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.categorie-icone svg, .offre-visuel svg {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.categorie-icone svg { width: 40px; height: 40px; }
.offre-visuel svg { width: 96px; height: 96px; margin: auto; }

/* Formulaires des pages statiques (veilles, signalement) : les contrôles
   natifs n'ont pas de classe, on les style par element dans `main`. */
main form label { display: block; font-weight: 600; margin: .8rem 0 .3rem; }
main form input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
main form select, main form textarea {
  font: inherit; padding: .6rem .8rem; border: 1px solid var(--border);
  border-radius: var(--rayon-s); background: var(--white); color: var(--black);
  max-width: 100%;
}
main form button[type=submit], main form input[type=submit] {
  font: inherit; font-weight: 700; padding: .7rem 1.4rem; border: 0;
  border-radius: var(--rayon-s); background: var(--black); color: var(--cream);
  cursor: pointer; margin-top: .8rem;
}
/* Pied sans colonnes : pas de vide noir sur les pages transactionnelles. */
.pied { padding: 2rem 0; }
.pied-bas { padding: 0; border: 0; justify-content: space-between; gap: 1rem; }

/* Pages d'authentification : de l'air, et un panneau editorial a cote du
   formulaire. Le formulaire ne colle plus ni le header ni le pied. */
.auth { padding: clamp(3rem, 7vw, 6rem) 0; }
.auth-grille {
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.auth-formulaire { background: var(--white); border-radius: var(--rayon); padding: clamp(1.5rem, 3vw, 2.5rem); }
.auth-panneau { padding-top: .5rem; }
.auth-panneau .titre-section { margin: .4rem 0 1.2rem; }
.auth-arguments { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem; }
.auth-arguments li { padding-left: 1.6rem; position: relative; color: var(--gray-strong); }
.auth-arguments li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; background: var(--orange); border-radius: 2px;
}
.auth-arguments b { color: var(--black); display: block; margin-bottom: .15rem; }
@media (max-width: 900px) {
  .auth-grille { grid-template-columns: 1fr; }
  .auth-panneau { order: -1; padding-bottom: 1rem; }
}

/* Petits ecrans : les titres serif massifs debordaient a 390 px. */
@media (max-width: 600px) {
  .titre-section { font-size: clamp(1.7rem, 9vw, 2.4rem); }
  .hero-titre { font-size: clamp(2.2rem, 11vw, 3rem); }
  .auth-panneau .titre-section { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .auth { padding: 2rem 0 3rem; }
}
@media (max-width: 900px) {
  .auth-panneau { min-width: 0; }
  .auth-arguments li { overflow-wrap: anywhere; }
  .auth-formulaire { min-width: 0; }
}

/* Recherche mobile : la grille `280px 1fr` ne pouvait pas retrecir, ses
   colonnes gardaient `min-width: auto` (min-content 591 px) et debordaient de
   228 px a 375 px de large. Mesure du 24/10 sur 30 telephones. */
.recherche-disposition { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
.recherche-disposition > * { min-width: 0; }
.recherche-filtres, .recherche-resultats, .recherche-outils { min-width: 0; }
@media (max-width: 899px) {
  .recherche-disposition { grid-template-columns: minmax(0, 1fr); }
}

/* Filtres de recherche : le fieldset garde `min-width: min-content` (551 px)
   et les puces ne se replient pas. Sans cela, la page deborde de 228 px. */
.recherche-filtres, .recherche-resultats, .recherche-outils,
.panneau-filtres, .panneau-filtres-groupe, .panneau-filtres-chips { min-width: 0; }
.panneau-filtres-groupe { border: 0; padding: 0; margin: 0; }
.panneau-filtres-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { max-width: 100%; overflow-wrap: anywhere; }

/* Cartes de resultats : les badges s'alignaient sans se replier (315 px). */
.carte-badges { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 100%; }
.badge { max-width: 100%; white-space: normal; }
.panneau-filtres label { min-width: 0; max-width: 100%; display: block; }
.panneau-filtres input, .panneau-filtres select { max-width: 100%; box-sizing: border-box; }