/*
 * Modèles d'e-mail : liste « Mes modèles », éditeur, import, mise en page de l'étape 3.
 * Couleurs : uniquement les jetons de app.css (clair et sombre). Seules exceptions : le « volet de lecture » de l'aperçu
 * (gris clair / bleu nuit fixes, ce sont les fonds d'une messagerie simulée) et le cadre de l'e-mail (fond blanc fixe).
 */
.tpl-page { max-width: 1020px; margin: 0 auto; padding: 26px 18px 40px; }
.tpl-page--wide { max-width: 1280px; }
.tpl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tpl-head .m-s { margin-bottom: 8px; max-width: 60ch; }
.tpl-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl-crumbs { margin-bottom: 10px; font-size: 13px; }
.tpl-crumbs a { display: inline-flex; align-items: center; gap: 6px; }
.tpl-h2 { font-size: 15px; font-weight: 600; margin: 22px 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpl-h3 { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.tpl-empty { font-size: 13px; }
.tpl-loading { margin: 0; min-height: 0; font-size: 12px; color: var(--sub); }

/* Grille de cartes : colonnes fixes (la vignette est une réduction à l'échelle du vrai rendu) */
.tpl-grid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, 256px); gap: 14px; justify-content: start; }
.tpl-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; width: 256px; max-width: 100%; }
.tpl-card.is-default { border-color: var(--acc); }
.tpl-thumb { position: relative; height: 240px; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line); }
.tpl-thumb-frame { position: absolute; top: 0; left: 0; width: 640px; height: 600px; border: 0; transform: scale(.4); transform-origin: top left; pointer-events: none; }
.tpl-thumb-empty { display: grid; place-items: center; height: 100%; font-size: 12px; color: var(--sub); }
.tpl-body { padding: 10px 12px 12px; display: grid; gap: 8px; min-width: 0; }
.tpl-name { font-size: 14px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.tpl-desc { margin: 0; }
.tpl-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--acc-strong); color: var(--on-acc); white-space: nowrap; }
.tpl-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tpl-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tpl-rename { display: grid; gap: 6px; }
.tpl-rename label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--sub); }
.tpl-confirm { border: 1px solid var(--warn); border-radius: 9px; padding: 10px; display: grid; gap: 6px; background: var(--card); }
.tpl-confirm-title { margin: 0; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.tpl-confirm .hint { margin: 0; }
.tpl-examples .hint { margin-top: 0; }

/* Rapport d'import */
.tpl-report { border: 1px solid var(--line); border-left: 4px solid var(--acc); border-radius: 10px; background: var(--card); padding: 4px 14px 12px; margin: 12px 0; }
.tpl-report .tpl-h2 { margin-top: 10px; }
.tpl-report-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; font-size: 13px; }
.tpl-report ul { margin: 0; padding-left: 18px; }
.tpl-report li + li { margin-top: 3px; }

/* ------------------------------------------------------------------ Éditeur */
.ed-grid { display: grid; grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); gap: 18px; align-items: start; }
.ed-side, .ed-preview { min-width: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.ed-side > *, .ed-preview > * { min-width: 0; }
.ed-preview { position: sticky; top: 12px; }
@media (max-width: 960px) { .ed-grid { grid-template-columns: minmax(0, 1fr); } .ed-preview { position: static; } }
.ed-card { padding: 14px; }
.ed-h2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--sub); margin: 0 0 10px; }
.ed-fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.ed-fieldset legend.lab { padding: 0; margin-bottom: 6px; }
.ed-layouts { flex-direction: column; }
.ed-layouts label { text-align: left; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
.ed-layouts label:last-child { border-bottom: 0; }
.ed-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ed-color { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ed-color input[type="color"] { width: 44px; height: 38px; padding: 2px; flex: none; border: 1px solid var(--ctl); border-radius: 8px; background: var(--card); cursor: pointer; }
.ed-color label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; margin: 0; }
.ed-color label small { display: block; font-size: 11.5px; font-weight: 400; color: var(--sub); }
.ed-file-label { display: block; font-size: 13px; font-weight: 500; margin: 6px 0; }
.ed-logo-current { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.ed-logo-current .hint { color: #4b5563; margin: 0; }
.ed-logo-img { max-width: 120px; height: auto; display: block; }
.ed-logo input[type="file"] { font-size: 12.5px; padding: 6px 8px; }
.ed-local { border-left: 3px solid var(--warn); padding-left: 8px; }
.ed-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ed-check input { width: 16px; height: 16px; accent-color: var(--acc-strong); }

/* Blocs */
.blocks { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.blk { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.blk:focus-within { border-color: var(--acc); }
.blk-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.blk-title { margin: 0; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.blk-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--acc-strong); font-size: 11px; font-weight: 600; flex: none; }
.blk-tools { display: flex; gap: 4px; flex: none; }
.blk-btn { width: 34px; height: 34px; border: 1px solid var(--ctl); background: var(--card); color: var(--ink); }
.blk-btn:hover { border-color: var(--acc); color: var(--acc-strong); background: var(--tint); }
.blk-btn[disabled] { opacity: .55; cursor: not-allowed; }
.blk-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.blk-del:hover { color: var(--warn); }
.blk .field { margin-bottom: 8px; }
.blk textarea { min-height: 70px; }
.blk .hint { margin: 0; }
.ed-add { display: flex; gap: 6px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -2px 0 8px; }
.chips-lab { font-size: 12px; color: var(--sub); }
.chip-btn { font: 500 12px var(--font); padding: 4px 10px; border-radius: 99px; border: 1px solid var(--ctl); background: var(--card); color: var(--ink); cursor: pointer; }
.chip-btn:hover { border-color: var(--acc); color: var(--acc-strong); background: var(--tint); }
.chip-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Mise en page : espacements, alignements, côte à côte */
.ed-mini { margin: 0 0 10px; }
.ed .seg { flex-wrap: wrap; }
.ed .seg label { min-width: 0; }
.seg--align label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg--align svg { flex: none; }
.seg--space label { flex: 1 1 auto; padding: 8px 8px; font-size: 12.5px; white-space: nowrap; }
.split-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.split-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 92px; padding: 8px 10px; border: 1px solid var(--ctl); border-radius: 9px; background: var(--card); color: var(--ink); font: 500 12.5px var(--font); text-transform: none; letter-spacing: 0; cursor: pointer; margin: 0; }
.split-opt input { position: absolute; opacity: 0; pointer-events: none; }
.split-opt:hover { border-color: var(--acc); background: var(--tint); }
.split-opt:has(input:checked) { border-color: var(--acc); background: var(--tint); box-shadow: 0 0 0 1px var(--acc); }
.split-opt:has(input:focus-visible), .split-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.split-btn[disabled] { opacity: .55; cursor: not-allowed; }
.split-thumb { display: flex; gap: 3px; width: 56px; height: 26px; }
.split-thumb i { display: block; border-radius: 3px; background: var(--acc-strong); }
.split-lab { font-size: 12px; }
.ed-sidebyside { margin-top: 14px; }
.cols { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin-bottom: 4px; }
.col-box { border: 1px dashed var(--ctl); border-radius: 10px; padding: 8px; display: grid; gap: 8px; min-width: 0; }
.col-title { font-size: 12.5px; font-weight: 600; margin: 0; }
.col-count { font-weight: 400; color: var(--sub); }
.blocks--col { margin: 0; }
.blk--child { background: var(--card); padding: 8px 10px; }
.blk--child .blk-title { font-size: 12.5px; }
.blk--child:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.col-empty { margin: 0; padding: 6px 2px; }
.send-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ed-add--col { margin-top: 2px; }

/* Vérifications */
.chk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chk { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; font-size: 13px; border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 9px; padding: 8px 10px; background: var(--card); }
.chk--ok { border-left-color: var(--ok); }
.chk-ic { flex: none; color: var(--warn); display: inline-flex; margin-top: 2px; }
.chk--ok .chk-ic { color: var(--ok); }
.chk-msg { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.chk-fix { flex: none; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--ctl); }

/* Aperçu */
.ed-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ed-bar .seg { flex: 1 1 220px; }
.ed-stage { min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow-x: auto; background: #f3f4f6; }
.ed-stage--dark { background: #0f172a; }
.ed-frame { display: block; margin: 0 auto; border: 0; width: min(100%, 680px); min-height: 420px; background: transparent; color-scheme: light; }
.ed-frame--desktop { width: 680px; max-width: none; }
.ed-frame--mobile { width: min(100%, 380px); }
.ed-stage-empty { margin: 0; padding: 20px 6px; color: #374151; }
.ed-stage--dark .ed-stage-empty { color: #cbd5e1; }

/* Barre d'actions collante */
.ed-foot { position: sticky; bottom: 0; z-index: 4; margin-top: 14px; padding: 10px 0; background: var(--bg); border-top: 1px solid var(--line); display: grid; gap: 8px; }
.ed-messages .alert { margin: 0; }
.ed-messages ul { margin: 4px 0 0; padding-left: 18px; }
.ed-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ----------------------------------------------------------- Import d'un modèle */
.imp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.imp-card { display: grid; gap: 12px; }
.imp-card h2 { font-size: 15px; font-weight: 600; margin: 0; }
.imp-card p { margin: 0; font-size: 13px; }
.imp-card .field { margin: 0; }
.imp-paste { min-height: 96px; max-height: 180px; overflow: auto; padding: 9px 11px; border: 1px dashed var(--ctl); border-radius: 9px; background: var(--card); color: var(--ink); font-size: 13px; cursor: text; }
.imp-paste:empty::before { content: "Cliquez ici, puis collez votre e-mail (Ctrl/Cmd+V)"; color: var(--sub); }
.imp-paste:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; border-style: solid; }
.imp-card input[type="file"] { font-size: 12.5px; padding: 6px 8px; }
.imp-note { border-left: 3px solid var(--acc); padding-left: 8px; color: var(--ink); }
.imp-card .copy-status { min-height: 1.2em; }

/* ------------------------------------------------- Mise en page à l'étape 3 */
.layout-pick { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 12px; }
.layout-pick .field { margin: 0; flex: 1 1 240px; }
.layout-pick-links { display: flex; gap: 12px; font-size: 12.5px; flex-wrap: wrap; align-items: center; padding-bottom: 8px; }
.mail-stage { padding: 12px; background: #f3f4f6; border-top: 1px solid var(--line); overflow-x: auto; }
.mail-frame { display: block; margin: 0 auto; border: 0; width: min(100%, 680px); min-height: 360px; background: transparent; color-scheme: light; }
.layout-help, .layout-note { font-size: 12px; color: var(--sub); margin: 0 0 12px; }
.layout-note { border-left: 3px solid var(--warn); padding-left: 8px; }

/* Lien « Mes modèles » du menu utilisateur */
.user-link { border-bottom: 1px solid var(--line); }
.imp-card .hint.is-error { color: var(--warn); }