/* ============================================================================
   kit.css : les pages de kits, cour d'école, espace public et circulation.

   S'ajoute à accueil.css, dont elle reprend le registre éditorial. N'ajoute
   que ce qui leur est propre : la scène isométrique, les photographies et
   leurs crédits, les fiches de pièces, le sommaire des familles.

   Les vignettes de pièces suivent la règle de la feuille imprimée (charte,
   § « Le cas de la feuille imprimée ») : ce sont des vues du produit, posées
   sur une feuille claire : elles ne basculent pas avec le thème.
   ========================================================================== */

/* --- La scène isométrique -------------------------------------------------- */

/* Une maquette posée sur la table : feuille claire dans les deux thèmes,
   ombre nette, croix de calage de la charte aux coins. Aucune page ne s'en
   sert depuis que les kits sont photographiés, mais les générateurs
   produisent toujours les SVG correspondants : ces règles les attendent. */
.scene { display: block; width: 100%; height: auto; }
.scene .ombre   { fill: var(--shadow-soft); }
.scene .feuille { fill: #fcfbf7; }
.scene .grille  { stroke: #d3cebe; stroke-width: .3; fill: none; }
.scene .cadre   { stroke: #26241f; stroke-width: .7; fill: none; }
.scene-cadre { position: relative; }
.scene-cadre::before, .scene-cadre::after {
  content: "+"; font-family: var(--mono); font-size: 14px; color: var(--acc-hi);
  position: absolute; pointer-events: none;
}
.scene-cadre::before { top: 0; left: 4px; }
.scene-cadre::after  { bottom: 0; right: 4px; }

/* --- Les photographies ----------------------------------------------------- */

/* Une photo est une planche : cadre fin, ombre douce et lointaine, jamais
   d'arrondi. La légende parle en cote. Le carré est la règle, quel que soit
   le cadrage d'origine, ici comme dans la galerie. */
.photo-kit {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--mid);
  box-shadow: 0 26px 50px -28px var(--shadow-deep);
}
figure.pose { margin: 0; }
.legende {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mut); margin-top: 10px;
}

.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
           gap: 12px; }
.galerie figure { margin: 0; min-width: 0; }
/* Toutes les photos au carré, quel que soit le cadrage d'origine. */
.galerie img { display: block; width: 100%; height: auto; aspect-ratio: 1;
               object-fit: cover; border: 1px solid var(--mid); }
.galerie figcaption {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin-top: 8px;
}

/* Le crédit photo : une cote de plus, en retrait d'une valeur. Il suit la
   légende sur sa propre ligne pour qu'on ne les lise pas comme une phrase. */
.credit { display: block; color: var(--faint); margin-top: 3px; }
.legende .credit { color: var(--faint); }
.galerie figcaption .credit { opacity: .8; }

/* --- Le sommaire des familles --------------------------------------------- */

.familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 12px; margin-top: 26px; }
.famille { background: var(--paper); border: 1px solid var(--mid); padding: 14px 16px;
           min-width: 0; }
.famille .n {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
.famille h3 { font-size: 14.5px; font-weight: 700; margin: 6px 0 6px; }
.famille p { font-size: 12.5px; color: var(--mut); margin: 0; line-height: 1.5;
             max-width: none; }

/* --- Les fiches de pièces -------------------------------------------------- */

.groupe { margin-top: 48px; }
.groupe:first-of-type { margin-top: 34px; }
.groupe-titre { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.groupe-titre .num {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--acc-hi); font-variant-numeric: tabular-nums;
}
.groupe-titre h3 { font-size: 17px; font-weight: 800; letter-spacing: .03em;
                   text-transform: uppercase; margin: 0; }
.groupe-titre .compte {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-left: auto;
}
.groupe > .intro { font-size: 13.5px; color: var(--mut); max-width: 62ch;
                   margin: 0 0 18px; }

.pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
          gap: 12px; }
.piece { background: var(--paper); border: 1px solid var(--mid); padding: 12px;
         display: flex; flex-direction: column; min-width: 0; }
.piece:hover { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* La fenêtre d'illustration : une feuille claire quadrillée au pas de 13 px,
   identique dans les deux thèmes. Toutes les pièces y sont à la même échelle :
   un banc y est réellement plus petit qu'un arbre. */
.piece .fen {
  aspect-ratio: 1; display: flex; align-items: flex-end; justify-content: center;
  border: 1px solid var(--hair); margin-bottom: 10px; padding: 10px;
  background-color: #fcfbf7;
  background-image: linear-gradient(#e9e5d8 1px, transparent 1px),
                    linear-gradient(90deg, #e9e5d8 1px, transparent 1px);
  background-size: 13px 13px;
  overflow: hidden;
}
.piece .fen svg { max-width: 100%; max-height: 100%; height: auto; }
.piece h4 { font-size: 13.5px; font-weight: 600; margin: 0; line-height: 1.25; }
.piece .fam {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-top: 3px;
}
.piece .cotes {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  color: var(--mut); font-variant-numeric: tabular-nums; line-height: 1.7;
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--hair);
  max-width: none;
}

/* Les pièces n'apparaissent qu'une fois les rendus injectés : avant cela, la
   fenêtre vide annonce la planche (fond papier riso, cf. charte). */
.pieces-attente .fen { background-color: #f4d9c8; }
.pieces-attente .fen svg { visibility: hidden; }

/* --- Le duo commander / sur-mesure ----------------------------------------- */

.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 12px; }
.offre { background: var(--paper); border: 1px solid var(--ink); padding: 26px;
         box-shadow: 8px 8px 0 var(--shadow-soft); display: flex;
         flex-direction: column; }
.offre h3 { font-size: 16px; font-weight: 800; letter-spacing: .03em;
            text-transform: uppercase; margin: 0 0 10px; }
.offre p { font-size: 13.5px; color: var(--mut); line-height: 1.6; }
.offre .btns { margin-top: auto; padding-top: 18px; }
.offre .detail {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin-top: 12px;
}

/* --- Une photographie qui n'existe pas encore ------------------------------ */

/* Un kit non photographié garde sa place dans la page : cadre au pointillé
   (charte, § 5 : le pointillé signale une case à remplir) sur le papier riso
   #f4d9c8 des vignettes en attente. C'est une feuille imprimée, donc elle ne
   bascule pas avec le thème, et son texte reste à l'encre sombre. La légende
   prévue est écrite dessous, comme une vraie légende : elle dit ce que la
   photo apprendra. */
.photo-attente {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 1; padding: 20px;
  background: #f4d9c8; border: 1px dashed #b9b3a3; color: #26241f;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- Ce que les fiches du kit circulation ajoutent ------------------------- */

/* Les pièces de ce kit sont des signes : leur nom ne dit pas ce qu'elles
   permettent. La fiche porte donc une phrase de rôle, entre l'étiquette de
   matière et les cotes. */
.piece .role { font-size: 12px; color: var(--mut); line-height: 1.45;
               margin: 8px 0 0; max-width: none; }

/* Une pièce qui sort du rang : la réglette de lecture fait 246 px à l'échelle
   commune des vignettes, presque une fois et demie la largeur d'une cellule.
   Elle prend la ligne entière plutôt que d'être réduite au point d'en perdre
   ses graduations. */
.piece.pleine { grid-column: 1 / -1; }
.piece.pleine .fen { aspect-ratio: auto; align-items: center; padding: 18px; }

/* --- Les références sans vignette ------------------------------------------ */

/* Cordons, feutres, calques, films, gommettes : des consommables achetés, sans
   géométrie à rendre. Une liste dit mieux leur nature qu'un catalogue d'images
   vides. Même trame que les étapes de l'accueil : un filet entre les lignes,
   les cotes en mono à droite. */
.liste-pieces {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--hair); border: 1px solid var(--mid);
}
.liste-pieces > li {
  background: var(--paper); padding: 14px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px;
  align-items: baseline;
}
.liste-pieces h4 { font-size: 13.5px; font-weight: 600; margin: 0; }
.liste-pieces .cotes {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  color: var(--mut); font-variant-numeric: tabular-nums; text-align: right;
  white-space: nowrap;
}
.liste-pieces .role { grid-column: 1; font-size: 12.5px; color: var(--mut);
                      line-height: 1.5; margin: 0; max-width: 62ch; }
/* La matière est ici la seule chose qui dise de quoi la pièce est faite : pas
   de vignette pour la montrer. Elle se lit donc en --mut, une valeur plus haute
   que l'étiquette d'une fiche illustrée. */
.liste-pieces .fam {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut); text-align: right;
}
@media (max-width: 560px) {
  .liste-pieces > li { grid-template-columns: minmax(0, 1fr); }
  .liste-pieces .cotes, .liste-pieces .fam { text-align: left; }
}

/* La marque du bandeau ramène à l'accueil, sans prendre l'allure d'un lien. */
a.marque { color: inherit; text-decoration: none; }