/* ==========================================================================
   écrans · mise en page propre à chaque étape (body[data-screen])
   ========================================================================== */

/* ---------------------------------------------------------------- 01 dépôt */

.depot { flex: 1; display: flex; flex-direction: column; gap: 36px; padding-top: var(--s-10); padding-bottom: var(--s-8); }
.depot__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-7); flex-wrap: wrap; }
.depot__lede { max-width: 360px; font-size: var(--fs-md); line-height: 1.45; }
.dropzone.is-opening > :not(.fan) { opacity: 0; transition: opacity var(--dur-fast); }

/* ---------------------------------------------------------------- 02 lecture */

.lecture { padding: 28px var(--gutter); display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--line); }
.lecture__head { display: flex; align-items: baseline; gap: var(--s-4); }
.lecture__head span { margin-left: auto; }
.progress { height: 2px; background: rgba(8, 8, 8, .12); position: relative; }
.progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink); transition: width 120ms linear; }
.lecture .thumbs { gap: 8px; }
.lecture .thumb__cap { font-size: 9px; }
.lecture__cal { display: flex; align-items: center; gap: var(--s-4); padding: 14px 18px; animation: rise var(--dur) var(--ease) both; }
.lecture__cal > div:nth-child(2) { flex: 1; }
.lecture__cal-icon { width: 54px; height: 72px; flex: none; border: 1.5px solid var(--ink); border-radius: 2px; padding: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-content: start; }
.lecture__cal-icon i { height: 3px; border-radius: 2px; background: #c9c9c9; }
.lecture__done { display: flex; align-items: center; gap: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--ink); animation: rise var(--dur) var(--ease) both; }
.lecture__done p { flex: 1; max-width: 560px; }
.lecture__feed { padding: 28px var(--gutter); background: var(--paper-2); display: flex; flex-direction: column; gap: 12px; }
.lecture__feed-head { display: flex; justify-content: space-between; align-items: baseline; }
.lecture__feed ol { display: flex; flex-direction: column; gap: 12px; }
.lecture__wait { text-align: center; animation: pulse 1.4s ease infinite; }

/* ---------------------------------------------------------------- 04 saison */

.saison { padding: 28px var(--gutter); gap: 22px; }
.saison__head { display: flex; align-items: flex-end; gap: var(--s-6); flex-wrap: wrap; }
.saison__totals { margin-top: var(--s-2); }
.saison__tools { margin-left: auto; display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.saison__month { display: flex; align-items: baseline; gap: var(--s-3); padding-top: var(--s-3); margin-bottom: 18px; }
.saison__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.saison__months { margin-top: 28px; }
.saison__months li { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.saison__months .h3 { width: 120px; }
.saison__months .btn { margin-left: auto; }
.saison__months .pastille { align-self: center; }
#view-frise { display: flex; flex-direction: column; gap: 22px; }
#view-frise[hidden] { display: none; }
.frise { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.frise .saison__month { padding-top: 0; margin: 0; }
.frise__more { padding-top: 6px; border-top: 1px solid var(--line); }
@media (max-width: 1200px) { .saison__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- 05 relecture */

.relecture__source { flex: 1 1 560px; min-width: 0; background: var(--grey); padding: 24px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.relecture__source-head { display: flex; width: 100%; max-width: 520px; justify-content: space-between; gap: 12px; }
.relecture__source .blk { outline-color: transparent; }
.relecture__source .blk.is-hl { outline-color: var(--f-ink); }
.relecture__form { flex: 999 1 560px; min-width: 0; padding: 24px var(--gutter); display: flex; flex-direction: column; gap: var(--s-4); }
.relecture__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.relecture__nav { margin-left: auto; display: flex; gap: 8px; }
.relecture__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.field--wide, .relecture__trio { grid-column: 1 / -1; }
.relecture__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.relecture__grid .reps.input { padding: 8px; }
.field.is-hot .reps.input, .field:focus-within .reps.input { padding: 7px; }
.relecture__alert { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-lg); border: 1.5px solid var(--action); background: var(--action-tint); }
.relecture__alert-actions { display: flex; gap: 8px; }
.relecture__visuel { display: flex; gap: var(--s-4); padding-top: 14px; border-top: 1px solid var(--line); }
.crop { position: relative; width: 240px; height: 135px; flex: none; border-radius: var(--r-sm); overflow: hidden; }
.crop .ph { position: absolute; inset: 0; }
.crop__frame { position: absolute; top: 10%; bottom: 10%; width: 76%; border: 2px solid var(--paper); outline: 1px solid var(--ink); cursor: ew-resize; touch-action: none; border-radius: 0; }
.relecture__visuel-side { display: flex; flex-direction: column; gap: 8px; }
.relecture__visuel-side legend { margin-bottom: 8px; }
.visuels { display: flex; gap: 8px; }
.visuels__opt { cursor: pointer; }
.visuels__opt input { position: absolute; opacity: 0; }
.visuels__opt .ph { width: 56px; height: 40px; border-radius: 3px; padding: 0; }
.visuels__opt input:checked + .ph { outline: 2px solid var(--ink); outline-offset: 2px; }
.visuels__opt input:focus-visible + .ph { box-shadow: var(--focus-ring); }
.relecture__foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ink); }
.relecture__kbd { margin-left: auto; }

/* ---------------------------------------------------------------- 06 export */

.export { flex: 1; display: flex; flex-wrap: wrap; gap: var(--s-10); padding-top: 44px; padding-bottom: 44px; }
.export__main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.export__title { font-size: 96px; line-height: .95; }
.export__time { display: flex; gap: var(--s-8); align-items: flex-end; flex-wrap: wrap; }
.export__before { font-size: 48px; color: rgba(8, 8, 8, .45); text-decoration: line-through; text-decoration-thickness: 2px; }
.export__after { font-size: 72px; }
.export__cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.guide__step { border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--paper-2); animation: guide 6s infinite; }
.guide__step:nth-child(2) { animation-delay: 2s; }
.guide__step:nth-child(3) { animation-delay: 4s; }
@keyframes guide { 0%, 30% { border-color: var(--ink); background: var(--paper); } 34%, 100% { border-color: var(--line); background: var(--paper-2); } }
.export__side { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-6); }
.recap { margin: 6px 0 0; }
.recap div { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.recap div:last-child { border-bottom: 1px solid var(--line); }
.recap dd { margin: 0; font-size: 18px; }
.export__cdp { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.export__cdp-who { display: flex; gap: 12px; align-items: center; }
.export__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; flex: none; }

/* ======================================================================= 03 matching */

.mt-head { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; padding: 22px var(--gutter) 18px; background: var(--paper-3); }
.mt-head__sub { margin-top: 4px; }
.temps { margin-left: auto; }
body[data-screen="matching"] .mt-head + .split { background: var(--paper-3); }

/* temps 1-2 */
.mt__stage { padding: 30px var(--gutter) 40px; display: flex; justify-content: center; align-items: flex-start; background: var(--paper-3); }
.mt__page-wrap { position: relative; padding: 0 170px; }
.mt__page-wrap .pg { overflow: visible; user-select: none; }
.mt__infos { margin-top: 24px; }
.mt .blk { cursor: pointer; }
.mt .blk.is-selected { outline: 2.5px solid var(--ink); outline-offset: 4px; }
.mt .blk[data-state="vide"] { outline-color: rgba(8, 8, 8, .35); }
.mt__page-wrap.is-barre .blk { cursor: not-allowed; }
.mt__page-wrap.is-lasso .pg { cursor: crosshair; }
.mt__lasso-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.is-lasso .mt__lasso-layer { pointer-events: auto; }
.mt__lasso-path { fill: rgba(236, 229, 216, .35); stroke: #5c5040; stroke-width: 2; stroke-dasharray: 6 4; stroke-linecap: round; stroke-linejoin: round; animation: ants .8s linear infinite; }
@keyframes ants { to { stroke-dashoffset: -20; } }
.blk--lasso { outline-offset: 2px; }
.mt__pop { position: absolute; left: calc(100% + 48px); z-index: 8; width: 220px; padding: 12px; display: flex; flex-direction: column; gap: 8px; border-color: var(--ink); }
.mt__pick {
  appearance: none; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: var(--r-md); border: 1.5px solid var(--f-ink); background: var(--f-bg); color: var(--f-ink);
  font-size: 13px; font-weight: 500; text-align: left;
}
.mt__pick + .mt__pick { background: var(--paper); }
.mt__pick .kbd { margin-left: auto; }
.mt__pick-other { font-size: 13px; padding: 7px 10px; }

.mt__rail { padding: 20px 28px; display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--line); background: var(--paper); }
.mt__count { display: flex; align-items: baseline; gap: 10px; }
.mt__count .num { font-size: 44px; letter-spacing: -.03em; }
.mt__tools { display: flex; gap: 8px; flex-wrap: wrap; }
.mt__tools .kbd { height: 18px; }
.mt__tools .btn[aria-pressed="true"] .kbd { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, .5); }
.mt__tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
.mt__rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: var(--s-3) 0 var(--s-4); position: sticky; bottom: 0; background: var(--paper); box-shadow: 0 -1px 0 var(--line); }
.mt__rail-foot .btn--ghost { align-self: flex-start; }
.mt__need { min-height: 1.4em; }

/* temps 3 */
.mt-q { flex: 1; display: flex; flex-wrap: wrap; gap: var(--s-8); padding: 28px var(--gutter) 40px; }
.mt-q__ref { flex: 0 1 220px; display: flex; flex-direction: column; gap: 8px; }
.mt-q__mini { width: 220px; padding: 12px; gap: 5px; }
.mt-q__mini .blk { outline-color: transparent; }
.mt-q__mini .blk.is-hl { outline-color: var(--f-ink); outline-offset: 2px; }
.mt-q__mini .pg__lines i { height: 3px; margin-bottom: 3px; }
.mt-q__card { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.mt-q__progress { display: flex; align-items: center; gap: 10px; }
.mt-q__dots { display: flex; gap: 4px; }
.mt-q__dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(8, 8, 8, .2); transition: width var(--dur) var(--ease); }
.mt-q__dots i.is-done { background: var(--ink); }
.mt-q__dots i.is-on { background: var(--ink); width: 22px; }
.mt-q__text { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1.08; letter-spacing: -.025em; max-width: 640px; }
.mt-q__choices { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.mt-q__choices legend { margin-bottom: 10px; }
.choice {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 22px;
  border-radius: 12px; border: 1.5px solid var(--ink); background: var(--paper);
  font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast);
}
.choice small { font-family: var(--font-text); font-size: 12px; margin-left: auto; opacity: .75; }
.choice__box { width: 24px; height: 24px; border-radius: 5px; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.choice[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 3px 0 rgba(8, 8, 8, .25); }
.choice[aria-pressed="true"] .choice__box { background: var(--paper); color: var(--ink); border-color: var(--paper); animation: stamp 320ms var(--ease-pop) both; }
.choice--new { border-style: dashed; color: var(--ink-muted); }
.choice--new .choice__box { border-style: dashed; }
.mt-q__new { display: flex; gap: 8px; max-width: 560px; }
.mt-q__actions { display: flex; gap: 14px; align-items: center; margin-top: auto; }
.mt-q__recap { padding-top: 12px; display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; }
.mt-q__recap:empty { display: none; }
.mt-q__preview { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mt-q__preview-head { display: flex; justify-content: space-between; align-items: center; }
.mt-q__live { display: inline-flex; align-items: center; gap: 6px; }
.mt-q__live .dot { background: var(--ok); animation: pulse 1.6s infinite; }
.browser { border: 1px solid var(--line); border-radius: 12px; background: var(--grey); padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.browser__bar { display: flex; gap: 5px; align-items: center; }
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #d1d1d1; }
.browser__bar span { margin-left: 8px; flex: 1; height: 8px; border-radius: 4px; background: #e1e1e1; }
/* la carte agenda imite le site du client : typo neutre, pas celle de l'outil */
.agenda-card { background: var(--paper); border-radius: var(--r-sm); overflow: hidden; font-family: Arial, Helvetica, sans-serif; }
.agenda-card .ph { aspect-ratio: 16 / 9; }
.agenda-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.agenda-card__tags { display: flex; gap: 6px; min-height: 22px; }
.agenda-card__tags span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border: 1px solid var(--ink); }
.agenda-card__title { font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.agenda-card__sub { font-size: 16px; }
.agenda-card__when { font-size: 13px; color: #444; margin-top: 4px; }
.agenda-card__infos { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #333; }
.agenda-card__infos:empty { display: none; }
.pill { padding: 3px 8px; border-radius: var(--r-pill); background: #eee; }

/* temps 4 */
.mt-p { flex: 1; padding: 0 var(--gutter) 32px; display: flex; flex-direction: column; gap: 16px; }
.mt-p__counters { margin-top: 4px; }
.mt-p__counters .num { font-size: 72px; }
.mt-p__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 8px; }
.pth { position: relative; aspect-ratio: 1 / 1.41; border: 1px solid #d1d1d1; border-radius: 2px; background: var(--paper); padding: 5px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; transition: border-color var(--dur) var(--ease); transition-delay: var(--d, 0ms); }
.pth .b { display: block; border-radius: 1px; background: var(--f-bg); opacity: 0; transform: scale(.4); transition: opacity 240ms var(--ease), transform 320ms var(--ease-pop); transition-delay: var(--d, 0ms); }
.pth .b[data-field="visuel"] { border: 1px solid #333; }
.pth__row { display: flex; gap: 3px; }
.pth.is-lit { border-color: var(--ink); }
.pth.is-lit .b { opacity: 1; transform: none; }
.pth--diff { background: #f1f1f1; border: 1px dashed rgba(8, 8, 8, .4); }
.pth .g { display: block; background: #dcdcdc; border-radius: 1px; }
.pth__badge { position: absolute; left: 4px; right: 4px; bottom: 4px; font-size: 8.5px; line-height: 1.15; font-weight: 500; background: var(--paper); border: 1px solid rgba(8, 8, 8, .3); border-radius: 3px; padding: 2px 4px; color: var(--ink-muted); }
.pth__n { position: absolute; top: 3px; right: 4px; font-size: 8px; color: var(--ink-soft); }
.mt-p__legend { display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap; }
.mt-p__legend > span { display: inline-flex; gap: 8px; align-items: center; }
.mt-p__key { width: 14px; height: 18px; border: 1.5px solid var(--ink); border-radius: 2px; }
.mt-p__key--diff { border: 1px dashed rgba(8, 8, 8, .5); background: #f1f1f1; }
.mt-p__status { margin-left: auto; color: var(--ink); }
.mt-p__done { display: flex; gap: var(--s-6); flex-wrap: wrap; align-items: stretch; }
.mt-p__second { flex: 1 1 420px; padding: 18px; display: flex; flex-direction: column; gap: 10px; border-color: var(--ink); }
.mt-p__second-actions { display: flex; gap: 14px; align-items: center; }
.mt-p__end { flex: 1 1 360px; display: flex; flex-direction: column; gap: 12px; justify-content: flex-end; align-items: flex-start; }

@media (max-width: 1300px) {
  .mt__page-wrap { padding: 0 150px; }
  .mt-p__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

body[data-screen="matching"] .toast { left: calc(50% - var(--rail-w) / 2); }