/* ==========================================================================
   Listes de produits composees : mix Focus + Lookbook (issue #70)
   --------------------------------------------------------------------------
   Reprise de la maquette validee avec le client
   (static.morve.us/patrigeon-mix-focus-lookbook-m4x7t2.html). Cinq blocs :
   focus, bande lookbook, duo, respiration en trois vignettes, respiration en
   quatre carres. Le HTML est engendre par src/compose.ts.

   Cette feuille est chargee par les pages de familles et par l'apercu de
   composition de l'administration : elle ne suppose donc rien d'autre que les
   jetons de couleur de site.css, redeclares ici en repli pour l'admin.
   ========================================================================== */

/* Ligne de tete d'une liste : « 50 références · 10 marques · toutes sur devis ». */
.catalog-sub {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris, #8a8a8a); margin: -1.4rem 0 clamp(2rem, 4vw, 3rem);
}

.compo {
  --co-gap: clamp(1.2rem, 2.4vw, 2rem);
  --co-filet: rgba(255, 255, 255, .12);
  --co-encre-2: #b0b0aa;
  display: grid;
  gap: clamp(2.2rem, 4.5vw, 3.6rem);
}

.compo img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.compo h3 { font-size: 1rem; font-weight: 500; line-height: 1.25; }
.compo .co-ds { display: block; font-size: .82rem; color: #9a9a94; font-weight: 300; }
.compo .co-mk {
  display: block; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gris, #8a8a8a); transition: color .3s;
}

/* ---------- focus : une grande image 3:2 et un pave de texte ---------- */
.co-focus {
  display: grid; grid-template-columns: 1.4fr 1fr; align-items: center;
  gap: clamp(1.6rem, 3.5vw, 3.4rem);
}
.co-focus.rev { grid-template-columns: 1fr 1.4fr; }
.co-focus.rev .co-ph { order: 2; }
.co-focus .co-ph { display: block; overflow: hidden; background: var(--noir-2, #1d1d1b); }
.co-focus:hover img { transform: scale(1.04); }
.co-focus .co-tx { display: block; }
.co-focus .co-k {
  display: block; font-size: .64rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--or, #ffce44); margin-bottom: .9rem;
}
.co-focus h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.12; }
.co-focus .co-ds { font-size: 1rem; color: var(--co-encre-2); margin-top: .7rem; max-width: 38ch; }
.co-focus .co-mk { margin-top: 1.1rem; }
.co-focus .co-cta {
  display: inline-block; margin-top: 1.5rem; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; border-bottom: 1px solid var(--or, #ffce44); padding-bottom: .25rem;
}
.co-focus:hover .co-cta { color: var(--or, #ffce44); }

/* ---------- bande lookbook : grande image 4:3 et deux vignettes ---------- */
.co-band { display: grid; grid-template-columns: 1.62fr 1fr; gap: var(--co-gap); }
.co-band.rev { grid-template-columns: 1fr 1.62fr; }
.co-band.rev .co-hero { order: 2; }
.co-side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--co-gap); min-height: 0; }
.co-side .co-tile { min-height: 0; }

.co-tile { position: relative; display: block; overflow: hidden; background: var(--noir-2, #1d1d1b); }
.co-tile img { height: 100%; }
.co-hero img { aspect-ratio: 4 / 3; height: auto; }
.co-tile:hover img { transform: scale(1.05); }
.co-cap {
  position: absolute; inset: auto 0 0 0; padding: 2.6rem 1.3rem 1.1rem;
  background: linear-gradient(to top, rgba(10, 10, 9, .92), rgba(10, 10, 9, .55) 45%, transparent);
}
.co-cap .co-mk { color: var(--or, #ffce44); margin-bottom: .45rem; }
.co-hero .co-cap h3 { font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
.co-cap .co-ds { color: #c6c6c0; line-height: 1.3; margin-top: .15rem; }

/* ---------- duo pleine largeur ---------- */
.co-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--co-gap); }
.co-duo img { aspect-ratio: 3 / 2; height: auto; }

/* ---------- respirations en grille ---------- */
.co-grid { display: grid; gap: var(--co-gap); }
.co-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.co-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.co-cell { display: block; }
.co-cell .co-ph { display: block; overflow: hidden; background: var(--noir-2, #1d1d1b); }
.co-cell:hover img { transform: scale(1.05); }
.co-cell h3 { margin-top: .8rem; }
.co-cell .co-mk { margin-top: .3rem; }
.co-cell:hover .co-mk { color: var(--or, #ffce44); }

/* ---------- passage en petit ecran ----------
   La bande et le focus se deplient, et l'inversion est neutralisee : empilee,
   elle mettrait le texte avant l'image sans que rien ne le justifie. */
@media (max-width: 900px) {
  .co-grid.c4, .co-grid.c3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .co-focus, .co-focus.rev, .co-band, .co-band.rev, .co-duo { grid-template-columns: 1fr; }
  .co-focus.rev .co-ph, .co-band.rev .co-hero { order: 0; }
  .co-side .co-tile img { aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 520px) {
  .co-grid.c4, .co-grid.c3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Ecran d'administration « Composition des listes » (issue #70)
   --------------------------------------------------------------------------
   Cette feuille est chargee par /adminpatrigeon/composition, en plus de
   admin.css : l'apercu doit s'afficher exactement comme sur le site, sur le
   meme fond, avec les memes blocs.
   ========================================================================== */

/* Marquage en masse : toutes les photos de la liste d'un coup d'oeil. */
.co-pick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .9rem;
}
.co-pick-item {
  display: block; position: relative; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); padding: .5rem; border-radius: 3px;
  transition: border-color .2s, background .2s;
}
.co-pick-item:has(input:checked) { border-color: #ffce44; background: rgba(255, 206, 68, .07); }
.co-pick-item input { position: absolute; top: .8rem; left: .8rem; z-index: 2; width: 18px; height: 18px; }
.co-pick-ph {
  display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #1d1d1b;
  font-size: .7rem; color: #8a8a8a; display: grid; place-items: center;
}
.co-pick-ph img { width: 100%; height: 100%; object-fit: cover; }
.co-pick-nm { display: block; font-size: .82rem; margin-top: .5rem; line-height: 1.3; }
.co-pick-mk {
  display: block; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: #8a8a8a;
}

/* Lecture de la composition tiree, et barre de la graine. */
.co-seed-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.co-seed-bar .spacer { flex: 1; }
.co-seed-bar form.inline { display: inline; }
.co-seed { font-size: .74rem; letter-spacing: .1em; color: #8a8a8a; font-variant-numeric: tabular-nums; }
.co-seq { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; padding: 0; }
.co-seq li {
  font-size: .68rem; letter-spacing: .06em; color: #b0b0aa;
  border: 1px solid rgba(255, 255, 255, .12); padding: .3rem .6rem; border-radius: 999px;
}
.co-seq li b { color: #ffce44; font-weight: 500; margin-right: .35rem; font-variant-numeric: tabular-nums; }

/* L'apercu rejoue le fond du site : sur le gris de l'admin, les degrades des
   legendes ne diraient pas la verite. */
.co-apercu {
  background: #141412; color: #fff; padding: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .12);
}
.co-apercu h3 { color: #fff; }