@charset "utf-8";
/* charte.tero.be — Atelier. Tout passe par les jetons de charte.css : clair/sombre sans retouche.
   Contrôles : bordure #767676 (règle 7), cibles 44 px, focus 2 px encre + halo (sable sur sombre). */
@layer components {
  .atelier { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); margin: var(--s3) 0 var(--s4); }
  @media (min-width: 960px) { .atelier { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; } }
  .atelier__form { display: grid; gap: var(--s3); align-content: start; }
  .atelier__preview { min-width: 0; display: grid; gap: var(--s2); align-content: start; }
  .atelier__preview h3 { margin: var(--s3) 0 .25rem; font-size: 1rem; letter-spacing: .02em; }

  /* ---- Champs ---- */
  .field { display: grid; gap: .35rem; min-width: 0; }
  .field-row { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); align-items: start; }
  .field__label, .fs legend { font-weight: 600; font-size: .9375rem; }
  .control { width: 100%; min-height: 44px; padding: .55rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--r-s); background: var(--bg); color: var(--fg); font-size: 1rem; }
  .control--area { resize: vertical; min-height: 5rem; line-height: 1.5; }
  .control--file { padding: .5rem .6rem; }
  .control--range { padding: 0; border: 0; min-height: 44px; accent-color: var(--accent); }
  .control:disabled { background: var(--bg-alt); color: var(--fg-2); border-style: dashed; cursor: not-allowed; }
  .range-row { display: flex; gap: var(--s2); align-items: center; }
  .range-row output { min-width: 4ch; font-variant-numeric: tabular-nums; font-weight: 600; }
  .hint { font-size: .875rem; color: var(--fg-3); margin: .2rem 0 0; }
  @media (max-width: 480px) { .hint, .checks, .tile__why, .preview-title, .rule p, .av-size figcaption { font-size: 1rem; } }
  .fs { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .5rem; }
  .fs-sub { display: grid; gap: var(--s2); padding: var(--s2); border: 1px dashed var(--border-strong); border-radius: var(--r-m); }
  .fs-sub[hidden] { display: none; }
  /* case à cocher : le contrôle natif couvre toute la ligne (cible 44 px), la case dessinée vit dans l'étiquette */
  .field--check { position: relative; grid-template-columns: 1fr; align-items: center; min-height: 44px; }
  .check-input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 44px; margin: 0; opacity: 0; z-index: 0; }
  .field--check label { position: relative; z-index: 1; min-height: 44px; display: flex; align-items: center; gap: .6rem; cursor: pointer; }
  .field--check label::before { content: ""; flex: 0 0 auto; width: 1.3rem; height: 1.3rem; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg); }
  .check-input:checked + label::before { background: var(--fg); border-color: var(--fg); box-shadow: inset 0 0 0 3px var(--bg); }
  .check-input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bg); border-radius: 4px; }

  /* ---- Tuiles radio ---- */
  .tiles { display: flex; flex-wrap: wrap; gap: .5rem; }
  .tile__box { position: relative; display: grid; gap: .25rem; min-width: 0; max-width: 100%; min-height: 44px; }
  /* le bouton radio natif couvre toute la tuile (cible ≥ 44 px, focus clavier), invisible sous l'étiquette */
  .tile__input { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 44px; min-height: 44px; margin: 0; opacity: 0; z-index: 0; }
  .tile { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--border-strong); border-radius: var(--r-pill); cursor: pointer; font-size: .9375rem; font-weight: 500; background: var(--bg); color: var(--fg); transition: background .15s var(--ease); }
  .tile:hover { background: var(--bg-alt); }
  .tile__why { position: relative; z-index: 1; }
  .tile__swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid var(--border-strong); flex: 0 0 auto; }
  .tile__input:checked + .tile { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .tile__input:checked + .tile .tile__swatch { border-color: var(--bg); }
  .tile__input:focus-visible + .tile { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bg); }
  .tile--off { border-style: dashed; color: var(--fg-2); background: var(--bg-alt); cursor: not-allowed; text-decoration: line-through; }
  .tile__why { font-size: .8125rem; color: var(--fg-2); max-width: 16rem; line-height: 1.4; }

  /* ---- Aperçus ---- */
  .preview-head { display: flex; flex-wrap: wrap; gap: .5rem var(--s2); align-items: center; justify-content: space-between; }
  .preview-title { font-weight: 600; font-size: .9375rem; }
  .sig-frame-wrap { border: 1px solid var(--border); border-radius: var(--r-m); overflow: hidden; background: #fff; min-height: 300px; }
  .sig-frame { display: block; width: 100%; max-width: 100%; height: 300px; border: 0; background: #fff; }
  .sig-frame:focus, .sig-frame:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
  /* espace réservé avant le montage des ateliers : pas de décalage de mise en page au chargement */
  #mount-signature, #mount-avatars, #mount-lockup, #mount-social { min-height: 40rem; }
  .av-stage { display: grid; place-items: center; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-m); background-image: linear-gradient(45deg, var(--bg-alt) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-alt) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-alt) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-alt) 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; }
  .av-main { width: min(256px, 60vw); height: auto; }
  .av-sizes { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-end; padding: var(--s2); border: 1px solid var(--border); border-radius: var(--r-m); }
  .av-size { display: grid; gap: .3rem; justify-items: center; margin: 0; }
  .av-size figcaption { font-size: .8125rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
  .lk-stage { display: grid; place-items: center; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-m); background: #fff; overflow-x: auto; }
  .lk-stage--deep { background: #212121; }
  .lk-img { max-width: 100%; height: auto; }
  .soc-stage { border: 1px solid var(--border); border-radius: var(--r-m); overflow: hidden; background: var(--bg-alt); display: grid; place-items: center; padding: var(--s2); }
  .soc-canvas { display: block; max-width: 100%; height: auto; max-height: 70vh; }

  /* ---- Actions et contrôles ---- */
  .actions { display: flex; flex-wrap: wrap; gap: .5rem; }
  .actions .btn { font-size: .9375rem; }
  .btn.is-blocked { border-style: dashed; opacity: 1; cursor: not-allowed; background: var(--bg-alt); color: var(--fg); }
  .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 5px var(--bg); }
  .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
  .checks__item { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: baseline; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--r-m); font-size: .9375rem; }
  .checks__item--bad { border-color: var(--terra-ink); }
  .checks__label { font-weight: 600; }
  .checks__detail { grid-column: 2; color: var(--fg-2); font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
  .checks .chip { justify-self: start; font-size: .8125rem; }
  .rule { border-left: 3px solid var(--accent); padding: .4rem 0 .4rem 1rem; color: var(--fg-2); }
  .rule__title { font-weight: 700; color: var(--fg); margin: 0 0 .2rem; }
  .rule p { margin: 0; max-width: 70ch; }
  .source { font-size: .875rem; color: var(--fg-3); }
  @media (max-width: 480px) { .source, .checks__detail, .checks__item { font-size: 1rem; } }
}