/* PEAU « The Labrador Stockroom » : rhabillage du squelette grille-annuaire, direction 15 « La Vitrine de
   Quincaillerie » traduite au Labrador des plaines (research/brief-creation.md). Préfixe qc-.
   Matières : kraft (fond), planche de bois clair (fiches), encre de tampon, bleu d'imprimerie (planches, liens),
   rouge des cotes, laiton d'étiquette, eau froide d'un slough, ficelle (filets).
   RÈGLE NÉGATIVE : le rouge de référence ne fait jamais un fond ni un texte courant, cotes et marque seulement ;
   aucune photo sur fond blanc détouré, ce n'est pas une boutique. Aucune ressource externe. */
:root {
  --kraft: #e8e0d2; --planche: #f4efe6; --ombre: #d9cfbd;
  --encre: #241f1a; --encre-douce: #5c534a;
  --bleu-imprimerie: #2c4a7c; --bleu-sombre: #1f3559;
  --rouge-reference: #a83224; --laiton: #b08d57; --eau-froide: #5b7d8c; --filet: #cfc4b2;
  /* couple typographique propre à ce site (aucun des 5 derniers du journal) : capitales condensées de catalogue + vieux style */
  --titre-police: "Franklin Gothic Medium", "Arial Narrow", "Helvetica Neue Condensed", "Avenir Next Condensed", sans-serif;
  --texte-police: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --chiffre-police: Menlo, "Courier New", monospace;
  --travee: 74rem; --mesure: 64ch; --pas-grille: 17rem; --rythme: 1.5rem;
  --trait: 1px solid var(--filet); --double: 3px double var(--bleu-imprimerie);
  --ratio-planche: 16 / 9; --ratio-carte: 4 / 3; --ratio-reference: 1 / 1;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kraft); color: var(--encre); font-family: var(--texte-police); font-size: clamp(1rem, .98rem + .15vw, 1.0625rem); line-height: 1.62; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--titre-police); line-height: 1.1; margin: 0 0 .5em; font-weight: 600; letter-spacing: .01em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); }
h3 { font-size: 1.05rem; }
p, ul, ol, dl, table, figure { margin: 0 0 var(--rythme); }
a { color: var(--bleu-imprimerie); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--bleu-sombre); }
:focus-visible { outline: 2px solid var(--bleu-imprimerie); outline-offset: 2px; }
.qc-travee { width: min(100% - 2rem, var(--travee)); margin-inline: auto; }
.qc-acces-direct { position: absolute; left: -9999px; top: 0; background: var(--encre); color: var(--planche); padding: .6rem 1rem; z-index: 20; }
.qc-acces-direct:focus { left: .5rem; top: .5rem; }
/* SIGNATURE A : la cote rouge en gouttière, une étiquette de quincaillerie percée d'un oeillet, reliée par un filet vertical */
.qc-cote { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--chiffre-police); font-size: .78rem; color: var(--rouge-reference); letter-spacing: .04em; border-left: 2px solid var(--rouge-reference); padding-left: .4rem; line-height: 1.2; }
.qc-cote::before { content: ''; width: .38rem; height: .38rem; border: 1.5px solid var(--rouge-reference); border-radius: 50%; flex: none; }
/* SIGNATURE B : la planche, entête capitales bleu sur filet double */
.qc-rayon__tete { border-top: var(--double); padding-top: .6rem; margin-bottom: var(--rythme); display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.qc-rayon__tete h2 { margin: 0; text-transform: uppercase; letter-spacing: .1em; color: var(--bleu-imprimerie); font-size: clamp(.95rem, .9rem + .3vw, 1.15rem); }
.qc-rayon__tete h2 a { color: inherit; text-decoration: none; }
.qc-rayon__tete h2 a:hover { text-decoration: underline; }
.qc-rayon__decompte { font-family: var(--chiffre-police); font-size: .75rem; color: var(--encre-douce); }
.qc-rayon__phrase { flex-basis: 100%; margin: .1rem 0 0; color: var(--encre-douce); max-width: var(--mesure); }
/* SIGNATURE C : l'usage en italique sous chaque référence */
.qc-entree__usage { font-style: italic; color: var(--encre-douce); font-size: .95rem; margin: 0 0 .45rem; }
.qc-entree__usage--fiche { font-size: 1.12rem; max-width: var(--mesure); }
/* fronton */
.qc-fronton { background: var(--planche); border-bottom: var(--trait); box-shadow: inset 0 3px 0 var(--rouge-reference); }
.qc-fronton__interieur { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; padding: 1.2rem 0 .9rem; }
.qc-enseigne { font-family: var(--titre-police); font-size: 1.25rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre); text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; }
.qc-enseigne__marque { font-family: var(--chiffre-police); font-size: .8rem; color: var(--rouge-reference); border: 1.5px solid var(--rouge-reference); padding: .15rem .35rem; letter-spacing: .1em; }
.qc-devise { margin: 0; color: var(--encre-douce); font-size: .88rem; border-left: var(--trait); padding-left: 1rem; }
.qc-parcours { margin-left: auto; }
.qc-parcours ul { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.qc-parcours__lien { color: var(--encre-douce); text-decoration: none; font-family: var(--titre-police); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: .4rem; align-items: baseline; }
.qc-parcours__cote { font-family: var(--chiffre-police); color: var(--rouge-reference); font-size: .7rem; }
.qc-parcours__lien:hover, .qc-parcours__lien[aria-current] { color: var(--bleu-imprimerie); }
.qc-parcours__lien[aria-current] { box-shadow: inset 0 -2px 0 var(--bleu-imprimerie); }
.qc-parcours__lien--desk { color: var(--laiton); }
@media (max-width: 44rem) { .qc-devise { border-left: 0; padding-left: 0; flex-basis: 100%; } .qc-parcours { margin-left: 0; flex-basis: 100%; } }
/* préambule : texte étroit + héros ; bilan mono */
.qc-preambule { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; padding: calc(var(--rythme) * 1.6) 0 var(--rythme); }
.qc-preambule--etagere { grid-template-columns: 1fr; }
.qc-preambule h1 { max-width: 20ch; text-transform: uppercase; letter-spacing: .06em; color: var(--bleu-imprimerie); }
.qc-preambule__intro { max-width: var(--mesure); color: var(--encre); font-size: 1.05rem; }
.qc-preambule__vitrine { margin: 0; aspect-ratio: var(--ratio-carte); overflow: hidden; border: var(--trait); background: var(--ombre); }
.qc-preambule__vitrine img { width: 100%; height: 100%; object-fit: cover; }
.qc-preambule__vitrine figcaption, .qc-planche-image figcaption { font-size: .8rem; color: var(--encre-douce); padding: .4rem .2rem; background: var(--planche); }
/* les légendes : texte courant en Charter ; seule la cote garde la mono */
.qc-entree__legende { font-size: .72rem; color: var(--encre-douce); padding: .2rem .5rem; background: var(--planche); border-top: var(--trait); }
@media (max-width: 52rem) { .qc-preambule { grid-template-columns: 1fr; } }
.qc-bilan { display: flex; flex-wrap: wrap; list-style: none; margin: var(--rythme) 0 0; padding: 0; border: var(--trait); background: var(--planche); }
.qc-bilan__poste { flex: 1 1 7rem; padding: .7rem 1rem; border-right: var(--trait); }
.qc-bilan__poste:last-child { border-right: 0; }
.qc-bilan__chiffre { display: block; font-family: var(--chiffre-police); font-size: 1.3rem; color: var(--laiton); }
.qc-bilan__libelle { display: block; font-family: var(--titre-police); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce); }
/* IDÉE INATTENDUE : la bande des saisons, fond planche qui déborde des marges */
.qc-saisons { background: var(--planche) repeating-linear-gradient(0deg, transparent 0 31px, rgba(36, 31, 26, .05) 31px 32px); border-top: var(--double); border-bottom: var(--trait); padding: 1.2rem 0 1rem; margin: var(--rythme) 0; }
.qc-saisons__titre { text-transform: uppercase; letter-spacing: .1em; color: var(--bleu-imprimerie); font-size: .95rem; margin-bottom: .8rem; }
.qc-saisons__grille { display: grid; gap: .25rem; }
.qc-saisons__ligne { display: grid; grid-template-columns: 9rem repeat(12, minmax(0, 1fr)); gap: .25rem; align-items: center; }
.qc-saisons__etiquette { font-family: var(--titre-police); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre); text-decoration: none; }
.qc-saisons__mois { font-family: var(--chiffre-police); font-size: .7rem; text-align: center; color: var(--encre-douce); }
.qc-saisons__mois--courant { color: var(--rouge-reference); font-weight: 700; }
.qc-saisons__case { height: 1rem; border: 1px solid var(--filet); background: var(--kraft); }
.qc-saisons__case--pleine { background: var(--bleu-imprimerie); border-color: var(--bleu-imprimerie); }
.qc-saisons__case--field { background: var(--eau-froide); border-color: var(--eau-froide); }
.qc-saisons__case--care { background: var(--laiton); border-color: var(--laiton); }
.qc-saisons__case--training { background: var(--bleu-imprimerie); }
.qc-saisons__case--health { background: var(--encre-douce); border-color: var(--encre-douce); }
.qc-saisons__note { font-size: .82rem; color: var(--encre-douce); margin: .7rem 0 0; }
@media (max-width: 44rem) { .qc-saisons__ligne { grid-template-columns: 5.5rem repeat(12, minmax(0, 1fr)); } .qc-saisons__etiquette { font-size: .6rem; } }
/* rayons : casier (grille dense) et registre (liste à filets) */
.qc-rayon { padding: var(--rythme) 0 calc(var(--rythme) * 1.3); }
.qc-casier { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--pas-grille), 1fr)); gap: 1rem; }
.qc-entree { background: var(--planche); border: var(--trait); display: flex; flex-direction: column; padding-bottom: .8rem; }
.qc-entree__vignette { margin: 0; aspect-ratio: var(--ratio-carte); overflow: hidden; background: var(--ombre); border-bottom: var(--trait); }
.qc-entree__vignette img { width: 100%; height: 100%; object-fit: cover; }
.qc-entree__planche { padding: .7rem .9rem 0; }
.qc-entree__cote { display: flex; gap: .6rem; align-items: center; margin: 0 0 .4rem; }
.qc-mention { font-family: var(--titre-police); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-imprimerie); text-decoration: none; border-bottom: 1px solid transparent; }
.qc-mention:hover { border-bottom-color: var(--bleu-imprimerie); }
.qc-mention--field { color: var(--eau-froide); }
.qc-mention--care { color: var(--laiton); }
.qc-mention--health { color: var(--encre-douce); }
.qc-entree__intitule { margin: 0 0 .3rem; font-size: 1.02rem; }
.qc-entree__intitule a { color: var(--encre); text-decoration: none; }
.qc-entree__intitule a:hover { color: var(--bleu-imprimerie); text-decoration: underline; }
.qc-entree__datation { font-family: var(--chiffre-police); font-size: .72rem; color: var(--encre-douce); margin: 0; }
.qc-registre { display: flex; flex-direction: column; }
.qc-entree--registre { flex-direction: row; gap: 1rem; border: 0; border-top: var(--trait); background: transparent; padding: .8rem 0; }
.qc-entree--registre .qc-entree__vignette { flex: 0 0 8.75rem; aspect-ratio: var(--ratio-reference); border: var(--trait); }
.qc-entree--registre .qc-entree__planche { padding: 0; }
.qc-entree__renvoi { text-align: right; margin: .6rem 0 0; }
.qc-renvoi { font-family: var(--titre-police); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.qc-planche .qc-rayon__tete .qc-cote { align-self: center; }
/* onglets (rubrique) */
.qc-onglets { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--rythme) 0; }
.qc-onglet { padding: .35rem .8rem; border: var(--trait); text-decoration: none; font-family: var(--titre-police); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: var(--planche); color: var(--encre); display: inline-flex; gap: .5rem; }
.qc-onglet__cote { font-family: var(--chiffre-police); color: var(--rouge-reference); }
.qc-onglet--courant { background: var(--laiton); border-color: var(--laiton); color: var(--planche); }
.qc-onglet--courant .qc-onglet__cote { color: var(--planche); }
/* remontée */
.qc-remontee ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 1rem 0 0; font-family: var(--titre-police); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); }
.qc-remontee li + li::before { content: "/"; margin-right: .4rem; color: var(--filet); }
/* fiche */
.qc-entete-fiche { padding: var(--rythme) 0 .4rem; }
.qc-entete-fiche h1 { max-width: 28ch; }
.qc-datation { font-family: var(--chiffre-police); font-size: .78rem; color: var(--encre-douce); }
.qc-planche-image { aspect-ratio: var(--ratio-planche); overflow: hidden; border: var(--trait); background: var(--ombre); margin-bottom: var(--rythme); }
.qc-planche-image img { width: 100%; height: 100%; object-fit: cover; }
.qc-planche-image figcaption .qc-cote { margin-right: .5rem; }
.qc-duo { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 2.5rem; align-items: start; padding-bottom: var(--rythme); }
@media (max-width: 62rem) { .qc-duo { grid-template-columns: 1fr; } }
.qc-corps { max-width: var(--mesure); }
.qc-corps h2 { margin-top: calc(var(--rythme) * 1.5); border-top: var(--double); padding-top: .7rem; text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; color: var(--bleu-imprimerie); }
/* la lettrine est bleue : le rouge reste aux cotes et à la marque (règle négative) */
.qc-corps > p:first-of-type::first-letter { font-family: var(--titre-police); font-size: 3.1em; float: left; line-height: .82; padding: .08em .12em 0 0; color: var(--bleu-imprimerie); }
.qc-corps table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.qc-corps th, .qc-corps td { border-bottom: var(--trait); padding: .4rem .5rem; text-align: left; vertical-align: top; }
.qc-corps td { font-size: .92rem; }
.qc-corps blockquote { margin: 0 0 var(--rythme); padding: .2rem 1rem; border-left: 3px double var(--bleu-imprimerie); color: var(--encre-douce); }
.qc-corps ul, .qc-corps ol { padding-left: 1.3rem; }
.qc-releve { position: sticky; top: 1rem; background: var(--planche); border: var(--trait); padding: 1rem; font-size: .9rem; }
.qc-releve h2 { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--bleu-imprimerie); margin: 0 0 .5rem; border-top: var(--double); padding-top: .5rem; }
.qc-releve h2:first-child { border-top: 0; padding-top: 0; }
.qc-releve ol, .qc-releve ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.qc-releve__sommaire { font-size: .9rem; }
.qc-releve__sommaire li::marker { font-family: var(--chiffre-police); font-size: .78rem; color: var(--laiton); }
.qc-releve__sommaire li { margin-bottom: .35rem; }
.qc-releve__sommaire a { text-decoration: none; font-family: var(--texte-police); font-size: .9rem; }
.qc-releve__etiquette { display: grid; gap: .3rem; margin: 0 0 1rem; }
.qc-releve__etiquette div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: var(--trait); padding-bottom: .2rem; }
.qc-releve__etiquette dt { font-family: var(--titre-police); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce); }
.qc-releve__etiquette dd { margin: 0; font-family: var(--chiffre-police); font-size: .8rem; }
.qc-releve__sources { font-size: .85rem; }
/* ailleurs : les autres étagères (liens réseau depuis les données) */
.qc-ailleurs { border-top: 0; }
.qc-ailleurs__liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .8rem 1.4rem; }
.qc-ailleurs__item { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; border-top: var(--trait); padding-top: .6rem; font-size: .95rem; }
.qc-ailleurs__item p { margin: 0; }
/* encart de méthode */
.qc-encart { background: var(--planche) repeating-linear-gradient(0deg, transparent 0 31px, rgba(36, 31, 26, .05) 31px 32px); border: var(--trait); padding: 1rem 1.2rem; margin: var(--rythme) auto; max-width: min(100% - 2rem, 46rem); }
.qc-encart h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; color: var(--bleu-imprimerie); margin-top: .4rem; }
/* le pied qui prouve : papier ligné de registre */
.qc-pied { margin-top: calc(var(--rythme) * 2); background: var(--planche) repeating-linear-gradient(0deg, transparent 0 31px, rgba(36, 31, 26, .05) 31px 32px); border-top: var(--double); font-size: .9rem; }
.qc-pied__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; padding: 2rem 0 1rem; }
.qc-pied__colonne--large { grid-column: span 2; }
@media (max-width: 44rem) { .qc-pied__colonne--large { grid-column: span 1; } }
.qc-pied h2 { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--bleu-imprimerie); }
.qc-pied ul { list-style: none; padding: 0; margin: 0; }
.qc-pied li { margin-bottom: .35rem; }
.qc-pied__note { color: var(--encre-douce); font-size: .85rem; }
.qc-pied__refus { border-left: 2px solid var(--rouge-reference); padding-left: .6rem; color: var(--encre); }
.qc-pied__ligne { padding: .8rem 0 1.5rem; border-top: var(--trait); color: var(--encre-douce); font-family: var(--titre-police); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
@media print { .qc-fronton, .qc-pied, .qc-releve, .qc-saisons { display: none; } }