/* Carnet de coloriage - the picking page. */

/* Bottom padding clears the sticky bar so the last row is never stuck behind it. */
.cp{max-width:1180px;margin:0 auto;padding:34px 20px 130px}

.cp__head{margin:0 0 30px}
.cp__title{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 10px;line-height:1.12}
.cp__lead{color:var(--col-muted);margin:0 0 22px;max-width:60ch;line-height:1.7}

/* Jump links: 10 universes is too many to scroll past looking for one. */
.cp__jump{display:flex;flex-wrap:wrap;gap:8px}
.cp__jump-link{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  padding:8px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--col-border);background:var(--col-white);
  color:var(--col-heading);font-weight:700;font-size:.86rem;
  transition:border-color .16s var(--ease),background .16s var(--ease)
}
.cp__jump-link:hover,.cp__jump-link:focus{border-color:var(--col-heading);background:var(--col-band);color:var(--col-heading)}
.cp__jump-dot{width:9px;height:9px;border-radius:50%;background:var(--pill);flex:0 0 auto}
.cp__jump-n{color:var(--col-muted);font-weight:700;font-size:.8rem}

.cp__group{margin:0 0 34px;scroll-margin-top:90px}
.cp__group-title{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(1.15rem,2.4vw,1.45rem);margin:0 0 14px
}
.cp__group-dot{width:12px;height:12px;border-radius:50%;background:var(--pill);flex:0 0 auto}
.cp__group-all{
  margin-left:auto;font-family:var(--font-body);font-size:.82rem;font-weight:700;
  color:var(--col-muted);text-decoration:none
}
.cp__group-all:hover,.cp__group-all:focus{color:var(--col-accent-deep)}

.cp__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}

/* The whole card is the control: a separate small button would be a worse
   target for the children this is built for. */
.cp__card{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  background:var(--col-white);border:0;
  border-radius:var(--radius-card);padding:0;overflow:hidden;cursor:pointer;
  font:inherit;text-align:left;
  /* Hello Elementor's reset puts white-space:nowrap on every <button>, which
     kept the titles on one line and pushed them out of the card. */
  white-space:normal;
  /* The selected ring is a box-shadow, not a border: a 2px border read as a
     crude outline, and switching border width on click shifted the card by a
     pixel. An inset ring changes nothing about the box. */
  box-shadow:0 0 0 1px var(--col-border),var(--shadow-card);
  transition:box-shadow .16s var(--ease),transform .16s var(--ease)
}
.cp__card:hover,.cp__card:focus{
  transform:translateY(-3px);background:var(--col-white);
  box-shadow:0 0 0 1px var(--col-heading),var(--shadow-lift)
}
.cp__card[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--col-accent-solid),var(--shadow-card)
}
.cp__card[aria-pressed="true"]:hover,.cp__card[aria-pressed="true"]:focus{
  box-shadow:0 0 0 2px var(--col-accent-solid),var(--shadow-lift)
}

/* Several drawings carry a rectangular frame inside the artwork itself. Letting
   the image sit at 100% put that drawn line right beside the card edge, which
   read as a second, crooked border. A small overscale crops it off. */
.cp__media{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--col-cream)}
.cp__media img{
  /* transform:scale rather than percentage sizes. Percentage margins resolve
     against WIDTH on all four sides and inset + width over-constrain an
     absolutely positioned box, so both crops came out lopsided. A scale is
     symmetric by definition and the parent's overflow:hidden clips it. */
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.12)
}

/* The unselected mark is a white circle sitting on line art that is itself
   white: with only a soft shadow it disappeared into the drawing. A solid ring
   in the heading colour holds it against any artwork. */
.cp__mark{
  position:absolute;top:9px;right:9px;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--col-white);color:var(--col-heading);
  border:2px solid var(--col-heading);
  box-shadow:0 1px 4px rgba(0,0,0,.18)
}
.cp__card[aria-pressed="true"] .cp__mark{
  background:var(--col-accent-solid);color:#fff;border-color:var(--col-accent-solid)
}
.cp__mark-tick{display:none}
.cp__card[aria-pressed="true"] .cp__mark-plus{display:none}
.cp__card[aria-pressed="true"] .cp__mark-tick{display:block}

/* min-height reserves two lines whatever the title does. Without it a one-line
   title and a two-line title put their age and status rows at different heights
   across the same row of cards. */
.cp__name{
  display:block;padding:10px 12px 0;font-family:var(--font-display);
  font-weight:700;font-size:.92rem;line-height:1.3;color:var(--col-heading);
  min-height:calc(2 * 1.3em + 10px)
}
.cp__age{display:block;padding:2px 12px 0;font-size:.76rem;color:var(--col-muted);font-weight:600}
.cp__state{
  display:block;padding:8px 12px 11px;margin-top:auto;
  font-size:.78rem;font-weight:800;color:var(--col-muted)
}
.cp__card[aria-pressed="true"] .cp__state{color:var(--col-accent-deep)}

/* Sticky: the selection is made while scrolling, so the count and the way out
   must stay reachable without scrolling back. */
.cp__bar{
  position:sticky;bottom:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:8px 0 0;padding:14px 18px;
  background:var(--col-white);border:1px solid var(--col-border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-raised-warm)
}
.cp__bar[hidden]{display:none}
.cp__bar-count{margin:0;font-weight:800;color:var(--col-heading)}
.cp__bar-actions{display:flex;gap:10px;flex-wrap:wrap}
.cp__clear{padding:10px 16px;font-size:.88rem}

@media (max-width:1000px){ .cp__grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:820px){  .cp__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){
  .cp{padding:24px 16px 96px}

  /* Each universe becomes a horizontal rail. A 2-column grid meant nine
     drawings pushed the next universe two screens down; a rail keeps every
     universe reachable by scrolling the page and the drawings by swiping.
     No mask on the edge: one on the nav rail earlier in this theme clipped a
     fixed dropdown that was painted from inside it. The partial card at the
     right edge is the affordance instead. */
  .cp__grid{
    display:flex;gap:11px;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    /* scroll-padding, not just padding: scroll-snap-align:start lines a card up
       with the scrollport edge and ignores padding, so the rail silently
       scrolled itself 16px and the first card sat flush against the screen
       instead of on the text margin. */
    scroll-padding-inline:16px;
    /* bleed to the screen edge, keep the first card on the text margin */
    margin-inline:-16px;padding:2px 16px 6px;
    scrollbar-width:none
  }
  .cp__grid::-webkit-scrollbar{display:none}
  .cp__card{flex:0 0 148px;scroll-snap-align:start}

  .cp__name{font-size:.86rem;padding:9px 10px 0}
  .cp__age{padding:2px 10px 0}
  .cp__state{padding:7px 10px 10px}

  /* Stacked full-width buttons made this bar ~190px tall - a quarter of a
     812px screen, permanently covering the grid it is meant to support. One
     compact row instead: count and the way to clear on the left, the single
     action on the right. */
  .cp__bar{
    flex-direction:row;align-items:center;flex-wrap:nowrap;
    gap:10px;padding:9px 10px 9px 14px;border-radius:16px
  }
  /* "2 dessins dans votre carnet" wrapped to five lines once the row stopped
     wrapping, which made the bar taller than the stacked version it replaced.
     The tail is dropped; the count alone says it. */
  .cp__bar-tail{display:none}
  .cp__bar-count{font-size:.88rem;line-height:1.2;white-space:nowrap;flex:0 0 auto}
  /* The count is the part that can wrap; the button must not shrink. */
  .cp__bar-actions{flex:0 0 auto;flex-direction:row;gap:8px;align-items:center}
  .cp__bar-actions .c-btn{width:auto}
  /* Clearing is the rare, undoable action - a quiet text button, not a pill. */
  .cp__clear{
    background:none;border:0;padding:4px 2px;font-size:.78rem;font-weight:700;
    color:var(--col-muted);text-decoration:underline;box-shadow:none
  }
  .cp__clear:hover,.cp__clear:focus{
    background:none;box-shadow:none;transform:none;color:var(--col-accent-deep)
  }
  .cp__bar-actions .c-btn--primary{padding:11px 16px;font-size:.86rem}
}