/* Colorier en ligne. Tokens come from tokens.css. */

.a-eyebrow{
  font-family:var(--font-body);font-size:.74rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--col-muted);margin:0 0 8px
}

/* ---------------- picker ---------------- */
.a-pick__title{font-size:clamp(1.7rem,4vw,2.5rem);margin:0 0 8px}
.a-pick__lead{color:var(--col-muted);margin:0 0 24px;max-width:560px}

.a-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.a-chip{
  display:inline-flex;align-items:center;text-decoration:none;
  padding:9px 16px;border-radius:var(--radius-pill);
  border:1px solid var(--col-border);background:var(--col-white);
  color:var(--col-text);font-weight:600;font-size:.9rem;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)
}
.a-chip:hover{border-color:var(--col-heading)}
.a-chip.is-on{background:var(--col-heading);border-color:var(--col-heading);color:#fff}

.a-grid{display:flex;flex-wrap:wrap;gap:14px}
.a-card{
  flex:0 1 calc(25% - 11px);min-width:0;display:flex;flex-direction:column;
  background:var(--col-white);border:1px solid var(--col-border);
  border-radius:var(--radius-card);overflow:hidden;text-decoration:none;
  box-shadow:var(--shadow-card);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)
}
.a-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.a-card__media{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--col-cream)}
.a-card__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Hello's theme.css underlines every link inside .page-content (0,1,1), so
   the class is doubled to win rather than reaching for !important. */
.a-card.a-card,.a-chip.a-chip,.a-back.a-back{text-decoration:none}
.a-card__title{
  display:block;padding:11px 12px 13px;font-family:var(--font-display);
  font-weight:700;font-size:.95rem;color:var(--col-heading);line-height:1.25
}
.a-empty{color:var(--col-muted)}

/* ---------------- workshop ---------------- */
.a-shop__head{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.a-back{
  align-self:flex-start;text-decoration:none;color:var(--col-muted);
  font-weight:600;font-size:.9rem
}
.a-back:hover{color:var(--col-accent-text)}
.a-shop__title{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0}
.a-shop__lead{color:var(--col-muted);margin:6px 0 0;max-width:620px;line-height:1.7}

.a-stage{
  position:relative;background:var(--col-white);
  border:1px solid var(--col-border);border-radius:var(--radius-card);
  padding:14px;box-shadow:var(--shadow-card);
  display:flex;align-items:center;justify-content:center;min-height:220px
}
.a-canvas{
  display:block;max-width:100%;max-height:72vh;height:auto;
  border-radius:8px;cursor:crosshair;touch-action:manipulation
}
.a-canvas.is-busy{cursor:progress}
.a-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  margin:0;color:var(--col-muted);font-weight:600
}
.a-loading[hidden]{display:none}

/* Palette. A grid, not a scrolling rail: a rail hides half the colours on a
   phone and a child cannot look for what is off-screen. 30 swatches divide
   evenly by 10 (desktop) and by 6 (phone), so no row is ever left ragged.
   Squares rather than circles - they tile the grid with no wasted corner, which
   is what makes the whole palette fit above the fold. */
/* White, like .a-stage above it: --col-band is a tan two shades off the page
   background, and the pale swatches (#FFE59A, #FFD4DC, #F5E0C8) disappeared
   into it. The two cards now read as one tool surface. */
.a-pal{
  margin:18px 0 0;padding:16px;
  background:var(--col-white);border:1px solid var(--col-border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card)
}
.a-pal__label{
  margin:0 0 12px;font-family:var(--font-body);font-size:.72rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--col-muted)
}
.a-palette{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}
.a-swatch{
  aspect-ratio:1;width:100%;min-width:0;padding:0;border-radius:12px;cursor:pointer;
  background:var(--sw);border:1px solid rgba(0,0,0,.12);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)
}
.a-swatch:hover{transform:scale(1.07)}
/* Inner white keyline then the ring, so the marker reads on a dark swatch and
   on a pale one alike. */
.a-swatch.is-on{
  box-shadow:inset 0 0 0 3px var(--col-white),0 0 0 3px var(--col-heading)
}

.a-custom{display:inline-flex;align-items:center;gap:13px;margin:15px 0 0;cursor:pointer}
.a-custom__input{
  width:60px;height:40px;flex:0 0 auto;padding:0;cursor:pointer;
  background:none;border:1px solid var(--col-border);border-radius:11px;
  transition:box-shadow .16s var(--ease)
}
.a-custom__input::-webkit-color-swatch-wrapper{padding:3px}
.a-custom__input::-webkit-color-swatch{border:none;border-radius:8px}
.a-custom__input::-moz-color-swatch{border:none;border-radius:8px}
.a-custom.is-on .a-custom__input{box-shadow:0 0 0 3px var(--col-heading)}
.a-custom__text{color:var(--col-muted);font-weight:600;font-size:.95rem}

.a-tools{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:18px 0 0}
.a-btn{
  border:1px solid var(--col-border);background:var(--col-white);color:var(--col-heading);
  font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;
  padding:12px 20px;border-radius:var(--radius-pill);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)
}
.a-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-card)}
.a-btn:disabled{opacity:.45;cursor:default}
.a-btn--main{background:var(--col-accent-solid);border-color:var(--col-accent-solid);color:#fff}
.a-btn--main:hover{background:var(--col-accent-hover)}

.a-hint{margin:16px 0 0;text-align:center;color:var(--col-muted);font-size:.88rem}

/* ---------------- suggestions ---------------- */
.a-more{margin:44px 0 0}
.a-more__title{font-size:clamp(1.3rem,2.8vw,1.75rem);margin:0 0 8px;line-height:1.2}
.a-more__lead{color:var(--col-muted);margin:0 0 20px;max-width:560px}
.a-more__all{margin:18px 0 0}
.a-more__all a{color:var(--col-ink);font-weight:700;text-decoration:none}
.a-more__all a:hover{color:var(--col-accent-text)}

/* The long-form prose and FAQ that close the page come from archive.css, which
   functions.php enqueues here for that reason - including its top margin. */

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .a-card{flex:0 1 calc(33.333% - 10px)}
}
@media (max-width:640px){
  .a-card{flex:0 1 calc(50% - 7px)}
  .a-stage{padding:10px}
  .a-canvas{max-height:62vh}
  .a-pal{padding:13px}
  .a-palette{grid-template-columns:repeat(6,1fr);gap:8px}
  .a-swatch{border-radius:11px}
  .a-more{margin-top:34px}
  .a-tools .a-btn{flex:1 1 calc(50% - 5px);text-align:center;padding:12px 10px}
}

/* ---------------- print: the drawing only ---------------- */
@media print{
  .c-head,.c-foot,.c-drawer,.a-pal,.a-tools,.a-hint,.a-shop__head .a-back,
  .a-shop__lead,.a-more,.ar__long{display:none!important}
  .a-stage{border:0;box-shadow:none;padding:0}
  .a-canvas{max-height:none;width:100%}
  body{background:#fff}
}

/* See the note in chrome.css: Hello's a:hover at (0,1,1) beats these. */
.a-chip:hover,.a-chip:focus,.a-chip:active{color:var(--col-text)}
.a-chip.is-on:hover,.a-chip.is-on:focus,.a-chip.is-on:active{color:#fff}
.a-btn--main:hover,.a-btn--main:focus,.a-btn--main:active{color:#fff}
.a-btn:hover,.a-btn:focus,.a-btn:active{color:var(--col-heading)}
.a-btn--main:hover,.a-btn--main:focus,.a-btn--main:active{color:#fff}
.a-back:hover,.a-back:focus,.a-back:active{color:var(--col-accent-text)}
/* Hello Elementor's reset also styles bare buttons:
   `button:hover{background-color:#c36;color:#fff}` at (0,1,1), which outranks
   every single-class rule here. Any <button> of ours whose hover changed only
   a transform inherited Hello's pink background AND white text - the Imprimer
   button measured 1.85:1, the carnet arrows 1.23:1. Each restates both. */
.a-btn:hover:not(:disabled),.a-btn:focus:not(:disabled){
  background:var(--col-white);color:var(--col-heading)
}
.a-btn--main:hover:not(:disabled),.a-btn--main:focus:not(:disabled){
  background:var(--col-accent-hover);color:#fff
}
.a-swatch:hover,.a-swatch:focus{background:var(--sw)}