/* ===== Ça colle ? =====
   Même style que l'accueil du portfolio (portfolio.pissits.com) : classeur coloré, onglets,
   gros titres italiques à ombre décalée, fond pointillé qui glisse. Une couleur par étape. */

:root {
  --paper: #fdf3e3;
  --ink: #17141f;
  --ink-soft: #3d3848;
  --line: 2.5px solid var(--ink);
  --blue: #5cb8ff;
  --yellow: #ffd93d;
  --orange: #ff9a52;
  --pink: #ffa8d9;
  --green: #74e3a6;
  --red: #ff5a5f;
  --violet: #c9a2ff;
  --ok: #1d7a4b; --ok-bg: #d9f7e6;
  --mid: #7a5a00; --mid-bg: #fff1b8;
  --no: #b0203f; --no-bg: #ffe0ea;
  --display: "Archivo", "Arial Black", Impact, sans-serif;
  --body: "Figtree", system-ui, sans-serif;
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background-color: var(--paper); line-height: 1.5; }
a { color: inherit; }
img { max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 99; padding: 8px 14px; background: var(--yellow); border: var(--line); font-weight: 700; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }

/* Points du fond : un tapis qui glisse lentement en diagonale */
body::before, .panel::before {
  content: ""; position: fixed; inset: calc(-1 * var(--dot)); z-index: -1; --dot: 14px;
  background-image: radial-gradient(rgba(23, 20, 31, .13) 1px, transparent 1.4px);
  background-size: var(--dot) var(--dot);
  animation: dots 4s linear infinite; pointer-events: none;
}
.panel::before { position: absolute; z-index: 0; --dot: 12px; background-image: radial-gradient(rgba(23, 20, 31, .2) 1px, transparent 1.5px); animation-duration: 3.4s; }
@keyframes dots { to { transform: translate(var(--dot), var(--dot)); } }

/* ---------- Barre du haut ---------- */
.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  padding: 22px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  max-width: 1240px; margin: 0 auto;
}
.logo { flex-shrink: 0; padding: 5px; border: var(--line); background: #fff; box-shadow: 5px 5px 0 var(--ink); transform: rotate(-2deg); text-decoration: none; }
.logo span { display: block; padding: 6px 16px 4px; border: 1.5px dashed var(--ink); font: italic 900 30px/1 var(--display); letter-spacing: -.02em; text-transform: uppercase; text-shadow: -3px 2px 0 var(--green); }
.top-actions { margin-left: auto; display: flex; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: var(--line); border-radius: 999px; background: #fff; font: italic 900 13px/1 var(--display); text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); }
.pill-safe svg { color: var(--ok); }
.tabs { order: 3; flex-basis: 100%; min-width: 0; display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; padding-right: 16px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  --c: var(--blue); position: relative; flex-shrink: 0;
  padding: 8px 15px 9px; border: var(--line); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: var(--c); color: var(--ink); text-align: left; cursor: pointer;
  transform: translateY(4px); transition: transform .15s ease, padding .15s ease, opacity .15s;
}
.tab:hover:not(:disabled) { transform: translateY(0); }
.tab small { display: block; font: 700 10px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.tab b { display: block; font: italic 900 17px/1.15 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.tab.done small::after { content: " ✓"; }
.tab[aria-selected="true"] { z-index: 2; padding-top: 13px; padding-bottom: 14px; margin-bottom: -2.5px; transform: none; }
.tab:disabled { cursor: not-allowed; opacity: .55; background: repeating-linear-gradient(135deg, var(--c) 0 8px, #fff 8px 11px); }

/* ---------- Panneau coloré de l'étape ---------- */
.panel { --c: var(--blue); --shadow: var(--orange); position: relative; border-top: var(--line); border-bottom: var(--line); overflow: hidden; background-color: var(--c); }
.panel > * { position: relative; z-index: 1; }
.panel-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 32px 48px; align-items: start;
  max-width: 1240px; margin: 0 auto;
  padding: 36px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
}
.main-col { min-width: 0; display: grid; gap: 14px; justify-items: start; }
.main-col > * { margin: 0; }
.label { display: inline-block; padding: 6px 12px; border: 2px solid var(--ink); background: #fff; font: 700 14px/1.2 var(--body); box-shadow: 3px 3px 0 var(--ink); }
.big { font: italic 900 clamp(44px, 8vw, 104px)/.92 var(--display); letter-spacing: -.04em; text-transform: uppercase; text-shadow: -6px 5px 0 var(--shadow); text-wrap: balance; }
.big small { display: block; font-size: .42em; letter-spacing: -.02em; text-shadow: -3px 3px 0 var(--shadow); }
.lede { max-width: 46ch; font: 700 clamp(17px, 2vw, 21px)/1.4 var(--body); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 12px 20px; border: var(--line); border-radius: 4px;
  background: var(--ink); color: #fff; cursor: pointer; text-decoration: none;
  font: italic 900 14px/1 var(--display); text-transform: uppercase;
  box-shadow: 4px 4px 0 #fff; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #fff; }
.btn.light { background: #fff; color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn.light:hover:not(:disabled) { box-shadow: 6px 6px 0 var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn.small { min-height: 38px; padding: 8px 14px; font-size: 12.5px; }
.btn.wide { width: 100%; }
.btn:disabled { cursor: not-allowed; background: rgba(23, 20, 31, .35); box-shadow: none; }
.next-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px !important; }
.hint { font: 600 14px/1.4 var(--body); color: var(--ink-soft); }

.sheet-input {
  width: 100%; min-height: 260px; resize: vertical;
  padding: 16px 18px; border: var(--line); background: #fff; box-shadow: 6px 6px 0 var(--ink);
  font: 500 15px/1.55 var(--body);
}
.sheet-input::placeholder { color: #8a8494; }

/* Encadré à droite */
.box { border: var(--line); background: var(--paper); box-shadow: 7px 7px 0 var(--ink); min-width: 0; }
.box-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: var(--line); background: var(--yellow); font: italic 900 14px/1.2 var(--display); text-transform: uppercase; }
.box-head button { border: 2px solid var(--ink); border-radius: 999px; background: #fff; padding: 6px 12px; font: 700 13px var(--body); cursor: pointer; text-transform: none; box-shadow: 2px 2px 0 var(--ink); }
.box-body { padding: 16px 18px 18px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); display: grid; gap: 12px; }
.box-body p { margin: 0; }
.how { margin: 0; padding: 0; list-style: none; counter-reset: how; display: grid; gap: 10px; }
.how li { counter-increment: how; position: relative; padding-left: 40px; min-height: 28px; }
.how li::before { content: counter(how); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; font: italic 900 14px/1 var(--display); color: var(--ink); }
.how b, .formats b { color: var(--ink); }
.safe { padding: 10px 12px; border: 2px dashed var(--ink); background: #fff; font-weight: 600; }
.formats { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.formats li { display: flex; gap: 10px; align-items: baseline; }
.formats b { min-width: 64px; padding: 2px 8px; border: 2px solid var(--ink); background: #fff; font: italic 900 12px/1.4 var(--display); text-transform: uppercase; text-align: center; }

/* ---------- Étape 2 : fichier ---------- */
.drop {
  width: 100%; display: grid; justify-items: center; gap: 10px; padding: 28px 18px; text-align: center; cursor: pointer;
  border: 3px dashed var(--ink); background: rgba(255, 255, 255, .7); transition: background .15s, transform .15s;
}
.drop b { font: italic 900 22px/1.1 var(--display); text-transform: uppercase; }
.drop:hover, .drop.over { background: #fff; transform: rotate(-.4deg); }
.drop:focus-within { outline: 3px dashed var(--ink); outline-offset: 4px; }
.job, .filecard, .err { width: 100%; border: var(--line); background: #fff; box-shadow: 4px 4px 0 var(--ink); padding: 12px 16px; }
.job { display: grid; gap: 8px; }
.job p { margin: 0; font-weight: 600; }
.jbar { height: 10px; border: 2px solid var(--ink); background: var(--paper); }
.jbar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .3s; }
.err { margin: 0; background: var(--no-bg); color: var(--no); font-weight: 700; }
.filecard { display: flex; align-items: center; gap: 14px; }
.filecard > div { min-width: 0; flex: 1; }
.filecard b { display: block; overflow-wrap: anywhere; }
.filecard small { color: var(--ink-soft); }
.ok-dot { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; background: var(--green); font-weight: 900; }

/* ---------- Zone crème sous le panneau ---------- */
.below {
  --tint: color-mix(in srgb, var(--c) 22%, transparent);
  max-width: 1240px; margin: 0 auto; display: grid; gap: 24px;
  padding: 36px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px));
  background: var(--tint); box-shadow: 0 0 0 100vmax var(--tint); clip-path: inset(0 -100vmax);
}
.section-title { display: inline-block; margin: 0; font: italic 900 24px/1 var(--display); text-transform: uppercase; text-shadow: -3px 2px 0 var(--k, var(--yellow)); }
.check summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; list-style: none; }
.check summary::-webkit-details-marker { display: none; }
.check summary::before { content: "▸"; font-weight: 900; }
.check[open] summary::before { content: "▾"; }
.check[open] { display: grid; gap: 12px; }

/* ---------- Étape 3 : résultat ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 13px; border: 2px solid var(--ink); border-radius: 4px; background: var(--k, #fff); font: italic 900 12.5px/1 var(--display); text-transform: uppercase; box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.chip span { font-style: normal; padding: 1px 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; }
.chip[aria-pressed="true"] { transform: translate(2px, 2px); box-shadow: none; outline: 2.5px solid var(--ink); outline-offset: 2px; }
.prio-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.prio-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 2px solid var(--ink); background: #fff; }
.prio-list li b { color: var(--ink); }
.prio-list li small { grid-column: 1; }
.prio-list .btn { grid-row: 1 / span 2; grid-column: 2; }

.legend { display: flex; flex-wrap: wrap; gap: 10px 24px; font: 600 14px/1.4 var(--body); color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.stamp {
  display: inline-block; flex: none; font: italic 900 12px/1 var(--display); font-style: normal; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
  padding: 5px 9px 4px; border: 3px double currentColor; border-radius: 4px; transform: rotate(-3deg);
}
.stamp::before { margin-right: 5px; }
.stamp.ok { color: var(--ok); background: var(--ok-bg); } .stamp.ok::before { content: "✓"; }
.stamp.mid { color: var(--mid); background: var(--mid-bg); transform: rotate(2deg); } .stamp.mid::before { content: "?"; }
.stamp.no { color: var(--no); background: var(--no-bg); transform: rotate(-1.5deg); } .stamp.no::before { content: "✕"; }

#groups { display: grid; gap: 34px; }
.group { display: grid; gap: 14px; }
.point .stamp, .sug .stamp { justify-self: start; }
.proof { font-style: italic; }
.points { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.point { display: grid; gap: 10px; align-content: start; padding: 16px 18px 18px; border: var(--line); background: #fff; box-shadow: 5px 5px 0 var(--ink); }
.point h3 { margin: 0; font: italic 900 18px/1.15 var(--display); text-transform: uppercase; }
.point p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.point p em { font-style: normal; font-weight: 700; color: var(--ink); }
.point .btn { justify-self: start; margin-top: 4px; }
.notice { padding: 14px 16px; border: var(--line); background: #fff; box-shadow: 4px 4px 0 var(--ink); font-weight: 600; }

/* ---------- Étape 4 : améliorer ---------- */
.promise { max-width: 46ch; padding: 12px 14px; border: 2px dashed var(--ink); background: #fff; font-size: 15px; }
.score-box { justify-items: start; }
.score-box b { font: italic 900 56px/1 var(--display); letter-spacing: -.03em; color: var(--ink); text-shadow: -3px 2px 0 var(--pink); font-variant-numeric: tabular-nums; }
.meter { width: 100%; height: 14px; border: 2px solid var(--ink); background: #fff; }
.meter i { display: block; height: 100%; width: 0; background: var(--green); transition: width .4s; }
.rewrite { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.sugs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.sug { min-width: 0; display: grid; gap: 12px; padding: 16px 18px 18px; border: var(--line); background: #fff; box-shadow: 5px 5px 0 var(--ink); }
.sug.accepted { background: var(--ok-bg); }
.sug.skipped { opacity: .7; }
.sug-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.sug-h h3 { margin: 0; font: italic 900 18px/1.15 var(--display); text-transform: uppercase; }
.sug p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.where { font: 700 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.sentence { font-size: 16px; line-height: 2.1; padding: 10px 12px; border: 2px solid var(--ink); background: var(--paper); }
.sentence .old { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; color: var(--ink-soft); }
.blank { max-width: 100%; padding: 2px 8px; border: 0; border-bottom: 3px solid var(--ink); background: var(--mid-bg); font-weight: 700; }
.blank::placeholder { color: #7d6a2c; font-weight: 500; }
.blank:not(:placeholder-shown) { background: var(--ok-bg); border-bottom-color: var(--ok); }
.ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.sug-a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sug-a small { font-weight: 600; color: var(--ink-soft); }
.preview { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); background: #fff; }
.preview .box-head { background: var(--pink); }
.cvdoc { max-height: 70vh; overflow: auto; gap: 8px; color: var(--ink); }
.cvdoc .name { font: italic 900 20px/1.1 var(--display); text-transform: uppercase; }
.cvdoc .sec { margin-top: 6px; font: italic 900 13px/1 var(--display); text-transform: uppercase; text-shadow: -2px 1px 0 var(--pink); }
ins { text-decoration: none; background: var(--green); padding: 0 3px; }
.preview-foot { margin: 0; padding: 10px 18px 14px; border-top: 2px dashed var(--ink); font-size: 13px; color: var(--ink-soft); }

/* ---------- Pied ---------- */
.foot { border-top: var(--line); background: var(--ink); color: var(--paper); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; max-width: 1240px; margin: 0 auto; padding: 36px max(16px, env(safe-area-inset-right, 0px)) 36px max(16px, env(safe-area-inset-left, 0px)); }
.foot h2 { margin: 0; font: italic 900 clamp(28px, 4vw, 44px)/1 var(--display); text-transform: uppercase; text-shadow: -4px 3px 0 #1d7a4b; }
.foot p { margin: 0; max-width: 52ch; }
.foot small { opacity: .8; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) rotate(-1deg); z-index: 60; padding: 10px 18px; border: var(--line); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font: italic 900 14px/1.2 var(--display); text-transform: uppercase; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .panel-inner, .rewrite { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; }
  .letter, .cvdoc { max-height: none; }
}
@media (max-width: 560px) {
  .logo span { font-size: 22px; padding: 5px 10px 3px; }
  .pill-safe { font-size: 11px; padding: 8px 10px; }
  .tab { padding: 7px 12px 8px; }
  .tab b { font-size: 14px; }
  .big { text-shadow: -4px 3px 0 var(--shadow); overflow-wrap: anywhere; }
  .box { box-shadow: 5px 5px 0 var(--ink); }
  .next-row .btn:not(.ghost) { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  body::before, .panel::before { animation: none; }
  html { scroll-behavior: auto; }
}
.sug, .point, .main-col, .box-body { grid-template-columns: minmax(0, 1fr); }

/* Étape 1 : offre en fichier ou lien collé */
.attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sheet-input.over { outline: 3px dashed var(--ink); outline-offset: 4px; background: #fffbe6; }
.linkhelp { width: 100%; display: grid; gap: 8px; padding: 14px 16px; border: var(--line); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
.linkhelp ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.linkhelp p { margin: 0; }

/* Étape 1 : plusieurs offres, session revenue */
.side { display: grid; gap: 18px; align-content: start; min-width: 0; }
.resume { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; padding: 12px 16px; border: var(--line); background: var(--green); box-shadow: 4px 4px 0 var(--ink); }
#offersbox .box-head { background: var(--blue); }
.offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.offers li { display: flex; gap: 6px; min-width: 0; }
.offers li > button:first-child { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 8px 12px; border: 2px solid var(--ink); background: #fff; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.offers li > button b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offers li.on > button:first-child { background: var(--yellow); }
.offers .score { flex: none; font: italic 900 13px var(--display); }
.offers .del { flex: none; width: 36px; border: 2px solid var(--ink); background: #fff; cursor: pointer; font-weight: 900; }
.offers .del:hover { background: var(--pink); }

/* Étape 3 : étiquettes, mots, robot recruteur */
.point-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tag { font: italic 800 11px/1 var(--display); text-transform: uppercase; padding: 4px 8px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; }
.tag.must { background: var(--red); color: #fff; }
.tag.nice { background: var(--blue); }
.vocab { margin: 0; padding: 8px 10px; border-left: 4px solid var(--blue); background: #eef7ff; font-size: 14px; }
.words, .ats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.words li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.words span[class] { padding: 4px 10px; border: 2px solid var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.w-cv { background: #fff; text-decoration: line-through; text-decoration-color: var(--ink-soft); }
.w-offer { background: var(--blue); }
.ats li { display: grid; gap: 2px; padding: 10px 14px; border: 2px solid var(--ink); background: var(--ok-bg); }
.ats li.ko { background: var(--no-bg); }
.ats li.ok b span { color: var(--ok); }
.ats li.ko b span { color: var(--no); }
.ats li > span:not(.sr-only) { font-size: 14px; color: var(--ink-soft); }

/* Étapes 4 et 5 : export et lettre */
.export { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 2px dashed var(--ink); }
.letter-form { display: grid; gap: 16px; align-content: start; min-width: 0; }
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { font: italic 900 14px/1.2 var(--display); text-transform: uppercase; padding: 0; margin-bottom: 6px; }
.field input, .field textarea, .letteredit { width: 100%; padding: 10px 12px; border: var(--line); background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.field textarea, .letteredit { resize: vertical; }
.strengths { display: grid; gap: 8px; }
.str { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 2px solid var(--ink); background: #fff; cursor: pointer; }
.str:has(input:checked) { background: var(--ok-bg); }
.str input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.str span { display: grid; min-width: 0; }
.str small { color: var(--ink-soft); overflow-wrap: anywhere; }
.below[data-for="5"] .preview .box-head { background: var(--violet); }
.letter { display: grid; gap: 0; max-height: 70vh; overflow: auto; font-size: 15px; }
.letter p { margin: 0 0 2px; }
.letter p.gap { height: 10px; }
mark.miss { background: var(--yellow); padding: 0 3px; border: 1px dashed var(--ink); }
.letteredit { display: block; width: calc(100% - 36px); margin: 14px 18px; min-height: 380px; font-size: 15px; line-height: 1.5; }

/* Pied de page */
.foot-text { display: grid; gap: 10px; }
.keep { display: flex; gap: 10px; align-items: center; font-weight: 700; cursor: pointer; }
.keep input { width: 20px; height: 20px; flex: none; }
.linkbtn { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font-weight: 700; }

/* Impression : seulement le CV ou la lettre */
#printzone { display: none; }
@media print {
  body.printing > *:not(#printzone) { display: none !important; }
  body.printing #printzone { display: block; }
  body.printing { background: #fff; }
  body.printing::before { display: none; }
  @page { margin: 18mm; }
  #printzone { font: 11pt/1.45 var(--body); color: #000; }
  .p-cv .name { font: italic 900 20pt/1.1 var(--display); text-transform: uppercase; margin-bottom: 6pt; }
  .p-cv .sec { margin: 12pt 0 4pt; font: italic 900 11pt/1 var(--display); text-transform: uppercase; border-bottom: 1.5pt solid #000; padding-bottom: 2pt; }
  .p-cv p { margin: 0 0 3pt; }
  .p-cv ins { text-decoration: none; background: none; }
  .p-letter p { margin: 0 0 2pt; }
}
.field .str { font: 500 15px/1.35 var(--body); text-transform: none; margin: 0; }
.str b { font-weight: 800; }
.str small { font-size: 13px; }

/* « Pourquoi ce tampon ? » */
.why { border-top: 2px dashed var(--ink); padding-top: 8px; font-size: 14px; }
.why summary { cursor: pointer; font-weight: 800; }
.why p { margin: 8px 0 0; }
.why mark { background: var(--yellow); padding: 0 2px; }
.over { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.over > span { font-weight: 800; width: 100%; }
.tag.hand { background: var(--violet); }
.skipped { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.skipped li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 2px dashed var(--ink); background: #fff; }
.skipped span { text-decoration: line-through; color: var(--ink-soft); }

/* Étape 1 : aide pour copier une annonce, nettoyage du texte collé */
.cleaned { margin: 0; padding: 10px 14px; border: 2px solid var(--ink); background: var(--green); font-weight: 700; font-size: 14px; }
.copyhelp { border: var(--line); background: #fff; box-shadow: 4px 4px 0 var(--ink); }
.copyhelp summary { padding: 12px 16px; cursor: pointer; font-weight: 800; }
.copyhelp-body { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; padding: 0 16px 16px; align-items: start; }
.copyhelp ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.copyhelp .hint { grid-column: 1 / -1; margin: 0; }
.mini { position: relative; border: 2px solid var(--ink); background: var(--paper); font-size: 11px; line-height: 1.35; }
.mini-bar { display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-bottom: 2px solid var(--ink); background: #fff; }
.mini-bar i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink); }
.mini-bar span { margin-left: 6px; padding: 1px 8px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 10px; color: var(--ink-soft); }
.mini-page { padding: 8px; display: grid; gap: 6px; }
.mini-btn { justify-self: start; padding: 2px 8px; background: var(--ink); color: #fff; font-weight: 800; text-decoration: line-through; opacity: .5; }
.mini .sel { margin: 0; padding: 4px; background: #9fd3ff; outline: 2px dashed var(--ink); }
.mini-junk { color: var(--ink-soft); text-decoration: line-through; }
.mini-keys { position: absolute; right: -8px; bottom: -12px; padding: 3px 8px; border: 2px solid var(--ink); background: var(--yellow); font: italic 900 12px var(--display); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-4deg); }
@media (max-width: 560px) { .copyhelp-body { grid-template-columns: minmax(0, 1fr); } .mini { max-width: 260px; } }
.pill-install { background: var(--green); cursor: pointer; color: var(--ink); }
.pill-lang { text-decoration: none; color: var(--ink); }
.hint-foot { font-size: 14px; opacity: .85; }