/* ====================================================================
 *  style.css — Catalogue Dentelle Rebelle · Design System
 *  Direction « Le Registre » — d'après le handoff design du 25/08/2026
 *
 *  CONTRAINTES DURES (ne pas « améliorer ») :
 *    - Aucun effet : pas d'ombre, pas de dégradé, pas de transition,
 *      pas d'animation, PAS D'ÉTAT DE SURVOL. border-radius: 0 partout.
 *    - a:hover est volontairement identique à a. Conserver.
 *    - :focus-visible est en revanche obligatoire (contour d'accent).
 *    - Aucune valeur en dur dans les règles : tout passe par un token.
 *    - Aucune parenté visuelle avec Le Morimont.
 *
 *  Sections :
 *    1. Fonts (auto-hébergées)     6. Grille et bandes
 *    2. Tokens                     7. Filtres et recherche
 *    3. Reset                      8. Grille d'articles
 *    4. Typographie                9. Fiche article
 *    5. Liens et focus            10. Pied de page + états
 * ==================================================================== */


/* ═══════════════════════════════════════════════════════════════════
 *  1. FONTS — auto-hébergées (RGPD : pas d'appel à fonts.gstatic.com,
 *     l'audience principale est suisse alémanique et allemande).
 *     5 graisses × 2 sous-jeux. Le navigateur ne télécharge que ce
 *     dont il a besoin grâce à unicode-range.
 * ═══════════════════════════════════════════════════════════════════ */

/* — latin-ext — */
@font-face {
  font-family: 'Zilla Slab';
  src: url('/fonts/zilla-slab-300-latin-ext.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304-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;
}
@font-face {
  font-family: 'Zilla Slab';
  src: url('/fonts/zilla-slab-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304-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;
}
@font-face {
  font-family: 'Zilla Slab';
  src: url('/fonts/zilla-slab-400-italic-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304-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;
}
@font-face {
  font-family: 'Zilla Slab';
  src: url('/fonts/zilla-slab-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304-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;
}
@font-face {
  font-family: 'Zilla Slab';
  src: url('/fonts/zilla-slab-600-latin-ext.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304-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;
}

/* — latin — */
@font-face {
  font-family: 'Zilla Slab';
  src: url('/fonts/zilla-slab-300-latin.woff2') format('woff2');
  font-weight: 300; font-style: normal; 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: 'Zilla Slab';
  src: url('/fonts/zilla-slab-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; 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: 'Zilla Slab';
  src: url('/fonts/zilla-slab-400-italic-latin.woff2') format('woff2');
  font-weight: 400; font-style: italic; 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: 'Zilla Slab';
  src: url('/fonts/zilla-slab-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; 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: 'Zilla Slab';
  src: url('/fonts/zilla-slab-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; 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;
}


/* ═══════════════════════════════════════════════════════════════════
 *  2. TOKENS
 *  Valeurs définitives du handoff. Ne pas modifier sans arbitrage.
 * ═══════════════════════════════════════════════════════════════════ */
:root {
  /* — Couleurs — */
  --noir:            #141311;   /* texte courant, titres */
  --encre-douce:     #6b5f4e;   /* libellés et légendes en italique */
  --accent:          #b4703f;   /* terracotta doux — repli sans OKLCH */
  --beige:           #fdfaf4;   /* fond de page (crème) */
  --beige-bande:     #f5ece0;   /* fond des bandes alternées */
  --beige-reserve:   #efe4d3;   /* réserves photographiques */
  --filet-couleur:   #cdbfa6;   /* tous les filets de structure */
  --blanc:           #fffdf8;

  /* — Épaisseurs de filet — */
  --filet:           1px;   /* filet de structure, couleur --filet-couleur */
  --filet-gras:      1px;   /* filet d'articulation, couleur --accent */

  /* — Échelle typographique (9 échelons) — */
  --t-1: 0.75rem;
  --t-2: 0.8125rem;
  --t-3: 0.9375rem;
  --t-4: 1.0625rem;                              /* CORPS DE TEXTE — non fluide */
  --t-5: 1.3125rem;
  --t-6: 1.625rem;
  --t-7: clamp(1.625rem, 2.6vw, 2.125rem);
  --t-8: clamp(1.875rem, 3.4vw, 2.75rem);
  --t-9: clamp(2.25rem, 4.6vw, 4.25rem);

  /* — Interlignes et interlettrages — */
  --ligne-titre:        1.1;
  --ligne-corps:        1.5;
  --ligne-serree:       1.25;
  --interlettre-titre: -0.015em;   /* le seul interlettrage du projet */

  /* — Échelle d'espacement — */
  --e-1: 0.375rem;
  --e-2: 0.75rem;
  --e-3: 1.25rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4.5rem;

  /* — Grille et mesure — */
  --gouttiere:          clamp(0.75rem, 1.2vw, 1.5rem);
  --marge:              clamp(1.25rem, 2.6vw, 2.5rem);
  --mesure:             30rem;
  --nav-min:            9rem;
  --liste-min:          13rem;
  --colonnes-texte:     2;
  --colonne-texte-min:  18rem;

  /* — Ratios des réserves photographiques — */
  --r-3-2:  3/2;
  --r-4-5:  4/5;
  --r-1-1:  1/1;
  --r-16-9: 16/9;
  --r-2-3:  2/3;
  --r-5-4:  5/4;

  /* — Ajouts propres au catalogue —
   * Le handoff ne couvre pas une grille de fiches produit : ces deux
   * tokens sont l'extension minimale nécessaire, dans le même esprit
   * (plancher arithmétique, pas de requête de média). */
  --vignette-min:  13rem;    /* plancher d'une vignette dans la grille */
  --photo-min:     16rem;    /* plancher d'une photo sur une fiche */
  --r-vignette:    var(--r-5-4);
}

/* Accent en OKLCH quand le navigateur sait le faire (handoff § Fallback). */
@supports (color: oklch(0 0 0)) {
  :root { --accent: oklch(0.62 0.13 48); }
}


/* ═══════════════════════════════════════════════════════════════════
 *  3. RESET
 * ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--beige);
}

body {
  color: var(--noir);
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 400;
  font-size: var(--t-4);
  line-height: var(--ligne-corps);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
p   { text-wrap: pretty; }

/* Aucun arrondi décoratif nulle part. Contrainte dure du projet. */
* { border-radius: 0; }


/* ═══════════════════════════════════════════════════════════════════
 *  4. TYPOGRAPHIE
 *  L'italique ne sert qu'aux libellés et à la numérotation — c'est un
 *  ton de voix éditorial, jamais un ornement.
 * ═══════════════════════════════════════════════════════════════════ */
h1, h2, h3 {
  margin: 0;
  font-weight: 400;
  line-height: var(--ligne-titre);
  letter-spacing: var(--interlettre-titre);
}

/* Césure obligatoire sur l'allemand : les mots composés longs
 * (Hochzeitsdekoration) débordent sinon. */
[lang="de"] h1, [lang="de"] h2, [lang="de"] h3, [lang="de"] p { hyphens: auto; }

/* Le titre de page peut casser dans toutes les langues. */
.titre-page { font-size: var(--t-9); font-weight: 300; hyphens: auto; }

/* Libellé italique de bande — « Le parti pris », « Périmètre »… */
.libelle {
  font-size: var(--t-5);
  font-style: italic;
  font-weight: 400;
  letter-spacing: normal;
}

/* Numéro de bande, dans la marge. Corps 26 px : « large text » au sens
 * WCAG, seuil 3:1 — l'accent (4,0:1 sur beige) est donc conforme ici,
 * et NULLE PART AILLEURS sur du texte. */
.numero {
  margin: 0;
  font-size: var(--t-6);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
}

.legende {
  font-size: var(--t-2);
  font-style: italic;
  color: var(--encre-douce);
}

.secondaire { font-size: var(--t-3); }
.mesure     { max-width: var(--mesure); }


/* ═══════════════════════════════════════════════════════════════════
 *  5. LIENS ET FOCUS
 *  Sans affordance au survol, le lien doit être identifiable AU REPOS.
 * ═══════════════════════════════════════════════════════════════════ */
a {
  color: var(--noir);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Volontairement identique à l'état de repos — ne pas « améliorer ».
 * Ce doublon documente le choix pour le prochain développeur. */
a:hover { color: var(--noir); }

/* Obligatoire pour l'accessibilité clavier. Contour, jamais d'ombre. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sans-filet { text-decoration-line: none; }

/* Saut au contenu — visible seulement au focus clavier. */
.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blanc);
  color: var(--noir);
  padding: var(--e-2) var(--e-3);
  border: var(--filet) solid var(--filet-couleur);
  z-index: 2;
}
.saut:focus { left: var(--marge); }


/* ═══════════════════════════════════════════════════════════════════
 *  6. GRILLE ET BANDES
 *  Douze colonnes. Les largeurs ne sont pas écrites dans le balisage :
 *  ce sont des tokens --sp-1 … --sp-9. Deux paliers seulement, et ils
 *  ne réassignent QUE des propriétés personnalisées.
 * ═══════════════════════════════════════════════════════════════════ */
[data-grille] {
  --colonnes: 12;
  --sp-1: 1; --sp-2: 2; --sp-3: 3; --sp-4: 4; --sp-5: 5;
  --sp-6: 6; --sp-7: 7; --sp-8: 8; --sp-9: 9;
}
@media (max-width: 900px) {
  [data-grille] {
    --colonnes: 6;
    --sp-4: 3; --sp-5: 6; --sp-6: 6; --sp-7: 6; --sp-8: 6; --sp-9: 6;
  }
}
@media (max-width: 560px) {
  [data-grille] {
    --colonnes: 3;
    --sp-1: 3; --sp-2: 3; --sp-3: 3; --sp-4: 3; --sp-5: 3;
    --sp-6: 3; --sp-7: 3; --sp-8: 3; --sp-9: 3;

    /* Les bandes passent en pleine largeur, mais PAS la grille d'articles :
     * une seule vignette par écran imposerait un défilement interminable
     * sur 122 articles, alors que 75 % des visites sont mobiles. On abaisse
     * le plancher pour obtenir deux colonnes — c'est bien une réassignation
     * de token, pas une règle de mise en page dupliquée. */
    --vignette-min: 9rem;

    /* La fiche, elle, fait l'inverse : une photo par ligne, en pleine
     * largeur. C'est la page où l'on vient regarder l'objet — la montrer
     * en demi-écran n'aurait aucun sens. */
    --photo-min: 100%;
  }
}

/* minmax(0, 1fr) est nécessaire : sans lui un mot composé allemand
 * long fait déborder sa colonne. */
.bande {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  gap: 0 var(--gouttiere);
  padding: var(--e-5) var(--marge);
  border-bottom: var(--filet) solid var(--filet-couleur);
}

.bande--teintee   { background: var(--beige-bande); }
.bande--aeree     { gap: var(--e-3) var(--gouttiere); }
.bande--galerie   { gap: var(--e-4) var(--gouttiere); }

/* Les deux seules règles d'articulation d'une page. */
.bande--articulee {
  border-top: var(--filet-gras) solid var(--accent);
  border-bottom: var(--filet-gras) solid var(--accent);
}

/* Largeurs, en token. */
.sp-1 { grid-column: span var(--sp-1); }
.sp-2 { grid-column: span var(--sp-2); }
.sp-3 { grid-column: span var(--sp-3); }
.sp-4 { grid-column: span var(--sp-4); }
.sp-5 { grid-column: span var(--sp-5); }
.sp-6 { grid-column: span var(--sp-6); }
.sp-7 { grid-column: span var(--sp-7); }
.sp-8 { grid-column: span var(--sp-8); }
.sp-9 { grid-column: span var(--sp-9); }
.sp-plein { grid-column: 1 / -1; }

.filet-gauche { border-left: var(--filet) solid var(--filet-couleur); padding-left: var(--gouttiere); }

/* — En-tête ─────────────────────────────────────────────────────── */
.entete {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  gap: 0 var(--gouttiere);
  padding: var(--e-3) var(--marge);
  align-items: end;
  border-bottom: var(--filet-gras) solid var(--accent);
}

.marque {
  font-size: var(--t-6);
  font-weight: 500;
  line-height: var(--ligne-titre);
  letter-spacing: var(--interlettre-titre);
  text-decoration-line: none;
}

/* Repli sans requête de média : plancher arithmétique. */
.nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--nav-min), 1fr));
  gap: var(--e-1) var(--gouttiere);
  font-size: var(--t-3);
}
.nav [aria-current="page"] { font-weight: 600; text-decoration-line: none; }

/* — Colonne éditoriale ──────────────────────────────────────────── */
.texte-colonnes {
  column-count: var(--colonnes-texte);
  column-width: var(--colonne-texte-min);
  column-gap: var(--gouttiere);
  column-rule: var(--filet) solid var(--filet-couleur);
}
.texte-colonnes p { margin: 0 0 var(--e-3); font-size: var(--t-4); }
.texte-colonnes p:last-child { margin-bottom: 0; }

/* La guirlande du handoff a été retirée le 01/10/2026 : le motif orange ne
 * correspond pas à l'identité de la marque, qui n'est pas arrêtée. Aucun
 * symbole ne la remplace — le handoff lui-même note que le logo joint est
 * « une exploration, pas un logo validé ». Les pages tiennent par leur
 * typographie et leur grille, ce qui est le parti pris du projet.
 * L'accent reste employé pour les numéros de bande et les filets. */

/* — Règles d'accès : trois publics, trois conditions —
 * Reprise du bloc <dl> filété du handoff. Chaque rangée porte son propre
 * filet continu, qui traverse toute la largeur SANS interruption dans la
 * gouttière : d'où un <div> par rangée, et non des <dt>/<dd> posés
 * directement dans la grille de bande. */
.regles {
  margin: var(--e-4) 0 0;
  display: flex;
  flex-direction: column;
}

.regles > div {
  border-top: var(--filet) solid var(--filet-couleur);
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  gap: 0 var(--gouttiere);
  padding: var(--e-3) 0;
}

.regles > div:last-child {
  border-bottom: var(--filet) solid var(--filet-couleur);
}

/* Le seul endroit du site qui garde une graisse : la condition doit rester
 * lisible d'un coup d'œil, c'est ce que le visiteur vient chercher. */
.regles dt {
  grid-column: span var(--sp-5);
  font-size: var(--t-5);
  font-weight: 500;
  line-height: var(--ligne-serree);
}

.regles dd {
  grid-column: span var(--sp-7);
  margin: 0;
  font-size: var(--t-3);
}


/* ═══════════════════════════════════════════════════════════════════
 *  7. FILTRES ET RECHERCHE
 *  Fonctionne sans JavaScript (soumission serveur), puis JS filtre en
 *  direct sans aller-retour réseau. Aucun état de survol.
 * ═══════════════════════════════════════════════════════════════════ */
.filtres {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.recherche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--liste-min), 1fr));
  gap: var(--e-2) var(--gouttiere);
  align-items: end;
}

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

.champ label {
  font-size: var(--t-2);
  font-style: italic;
  color: var(--encre-douce);
}

.champ input {
  font-family: inherit;
  font-size: var(--t-4);
  color: var(--noir);
  background: var(--blanc);
  border: var(--filet) solid var(--filet-couleur);
  padding: var(--e-2);
  width: 100%;
}

/* Bouton = lien souligné, jamais un bouton plein. Contrainte du projet. */
.bouton-lien {
  font-family: inherit;
  font-size: var(--t-4);
  color: var(--noir);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-align: left;
}

/* Liste de catégories : plancher arithmétique, pas de média. */
.categories {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--liste-min), 1fr));
  gap: 0 var(--gouttiere);
  font-size: var(--t-3);
}

.categories li {
  border-top: var(--filet) solid var(--filet-couleur);
  padding: var(--e-1) 0;
}

/* La catégorie active est soulignée en accent sur 2 px, pas encadrée —
 * même traitement que la langue active dans le handoff. */
.categories [aria-current="true"] {
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

.compte {
  font-size: var(--t-2);
  font-style: italic;
  color: var(--encre-douce);
}


/* ═══════════════════════════════════════════════════════════════════
 *  8. GRILLE D'ARTICLES
 *  Plancher arithmétique : le nombre de colonnes découle de la largeur
 *  disponible, sans requête de média.
 * ═══════════════════════════════════════════════════════════════════ */
.articles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--vignette-min), 1fr));
  gap: var(--e-4) var(--gouttiere);
}

.article { margin: 0; display: flex; flex-direction: column; }

/* Le cadre tient la grille : c'est l'aspect-ratio, pas l'image. */
/* height: auto est INDISPENSABLE, pas décoratif : les images portent des
 * attributs width/height (dimensions explicites, exigées par la spec § 3
 * et bonnes pour le CLS). Ces attributs posent une hauteur en pixels qui
 * l'emporte sur aspect-ratio — sans height:auto, une vignette s'affiche à
 * la hauteur native du fichier, soit plus de mille pixels. Même chose sur
 * .photo ci-dessous. */
.vignette {
  aspect-ratio: var(--r-vignette);
  background: var(--beige-reserve);
  border: var(--filet) solid var(--filet-couleur);
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* — Générique pour un article sans photo —
 * Un aplat beige nu se lit comme une image cassée. On dessine à la place
 * une constellation de l'étoile de la marque, dont la composition dérive
 * du slug (voir generique() dans catalogue.js) : deux articles voisins
 * dans la grille n'ont pas le même dessin, et l'ensemble ne ressemble pas
 * à une erreur d'affichage. Aucune couleur nouvelle, aucun effet. */
.reserve {
  position: relative;
  overflow: hidden;
  display: block;
}

.reserve svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.reserve-mention {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--e-2);
  text-align: center;
  font-size: var(--t-2);
  font-style: italic;
  color: var(--encre-douce);
}

/* La légende se colle au cadre : pas de bord haut. */
.article figcaption {
  border: var(--filet) solid var(--filet-couleur);
  border-top: none;
  padding: var(--e-2);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  flex: 1;
}

.article-nom { font-size: var(--t-3); line-height: var(--ligne-serree); }

/* Catégorie et nombre de photos sur une même ligne : une seule ligne de
 * métadonnée par carte, séparée par un point médian. Le compte n'apparaît
 * qu'à partir de deux photos (voir mentionPhotos dans catalogue.js). */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-1);
  font-size: var(--t-2);
  font-style: italic;
  color: var(--encre-douce);
}

.article-cat { font-size: inherit; }

.article-photos::before {
  content: "·";
  margin-right: var(--e-1);
}

/* Si l'article n'a pas de catégorie, pas de point médian orphelin. */
.article-meta > .article-photos:first-child::before { content: none; }

/* Masqué par le filtre client. Aucune transition. */
[hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
 *  9. FICHE ARTICLE
 * ═══════════════════════════════════════════════════════════════════ */
.galerie {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--photo-min), 1fr));
  gap: var(--e-4) var(--gouttiere);
}

.galerie figure { margin: 0; display: flex; flex-direction: column; }

.photo {
  aspect-ratio: var(--r-3-2);
  background: var(--beige-reserve);
  border: var(--filet) solid var(--filet-couleur);
  width: 100%;
  height: auto;          /* voir la note sur .vignette */
  object-fit: cover;
}

.description p { margin: 0 0 var(--e-3); }
.description p:last-child { margin-bottom: 0; }

/* Retour au catalogue — traitement d'appel à l'action du handoff : un mot
 * en corps 26, graisse 300, souligné d'un filet d'accent de 2 px. Jamais un
 * bouton plein, jamais d'icône à la place du mot. */
.retour {
  display: inline-block;
  font-size: var(--t-6);
  font-weight: 300;
  line-height: var(--ligne-serree);
  border-bottom: 2px solid var(--accent);
  padding-bottom: var(--e-1);
}


/* ═══════════════════════════════════════════════════════════════════
 *  10. PIED DE PAGE + ÉTATS
 * ═══════════════════════════════════════════════════════════════════ */
.pied {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  gap: var(--e-3) var(--gouttiere);
  padding: var(--e-5) var(--marge);
}

.pied-mention {
  grid-column: 1 / -1;
  border-top: var(--filet) solid var(--filet-couleur);
  padding-top: var(--e-2);
  font-size: var(--t-2);
  font-style: italic;
  color: var(--encre-douce);
}

/* Bandeau hors-ligne — injecté par le service worker. Pas d'animation. */
.hors-ligne {
  padding: var(--e-2) var(--marge);
  background: var(--beige-bande);
  border-bottom: var(--filet) solid var(--filet-couleur);
  font-size: var(--t-3);
  font-style: italic;
  color: var(--encre-douce);
}

/* Message « aucun résultat » du filtre client. */
.vide {
  grid-column: 1 / -1;
  font-size: var(--t-3);
  font-style: italic;
  color: var(--encre-douce);
}

@media print {
  .entete, .filtres, .hors-ligne, .saut { display: none; }
  body { background: #fff; }
  .bande { border-bottom: var(--filet) solid var(--filet-couleur); padding: var(--e-3) 0; }
}