/* =====================================================
   KEL'ONGLES Studio — Module Marketing
   ===================================================== */
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1.3rem;flex-wrap:wrap}
.tabs a{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;font-size:.9rem;font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.tabs a.on{color:var(--gold-deep);border-bottom-color:var(--gold)}
.tabs a:hover{color:var(--charcoal)}

.mk-banner{display:flex;gap:.9rem;align-items:flex-start;background:#fbf5ea;border:1px solid #f0e4cf;border-radius:14px;padding:1rem 1.1rem;margin-bottom:1.2rem}
.mk-banner>svg{width:22px;height:22px;stroke:var(--gold-deep);fill:none;stroke-width:1.6;flex:none;margin-top:.1rem}
.mk-banner b{display:block;color:var(--charcoal)}
.mk-banner span{font-size:.84rem;color:var(--text-muted)}

.mk-ic{width:38px;height:38px;flex:none;border-radius:10px;background:#f6efdc;color:var(--gold-deep);display:grid;place-items:center}
.mk-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.cp-stats{font-size:.74rem;color:var(--text-muted)}

.seg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.seg-card{background:var(--ivory);border:1px solid var(--line);border-radius:16px;padding:1.2rem;box-shadow:var(--shadow-s);text-align:center;display:flex;flex-direction:column;align-items:center;gap:.15rem}
.seg-ic{width:44px;height:44px;border-radius:12px;background:#fbf3e6;color:var(--gold-deep);display:grid;place-items:center;margin-bottom:.4rem}
.seg-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
.seg-n{font-family:var(--font-display);font-size:2rem;color:var(--charcoal);line-height:1}
.seg-card b{color:var(--charcoal)}
.seg-card small{color:var(--text-muted);font-size:.78rem;margin-bottom:.7rem}
.seg-card .btn{width:100%}
.seg-card .btn[disabled]{opacity:.45;pointer-events:none}

.auto-row{display:flex;align-items:center;gap:.9rem;background:var(--ivory);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;box-shadow:var(--shadow-s)}
.auto-row .trig{display:block;font-size:.72rem;color:var(--gold-deep);margin-top:.2rem}
.switch{position:relative;width:46px;height:26px;border-radius:20px;border:none;background:#e2d6c4;cursor:pointer;flex:none;transition:.2s;padding:0}
.switch span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.switch.on{background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.switch.on span{left:23px}

/* composer */
.sheet:has(.composer){max-width:840px}
.composer{display:grid;grid-template-columns:1fr 300px;gap:1.4rem}
@media(max-width:720px){.composer{grid-template-columns:1fr}}
.comp-form{display:flex;flex-wrap:wrap;gap:.55rem .7rem;align-content:flex-start}
.comp-actions{display:flex;gap:.6rem;width:100%;margin-top:.4rem}
.comp-actions .btn{flex:1}
.tpl-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.tpl-chips button{font-family:var(--font-sans);font-size:.8rem;padding:.4rem .7rem;border:1px solid var(--line);background:var(--white);border-radius:20px;cursor:pointer}
.tpl-chips button:hover,.tpl-chips button.on{border-color:var(--gold);color:var(--gold-deep);background:#fdf7ee}
.comp-preview-lbl{display:flex;align-items:center;gap:.4rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:.6rem}
.comp-preview-lbl svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

/* aperçu e-mail (rendu réel de l'e-mail) */
.mail-preview{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow-s)}
.mp-head{background:var(--cream);padding:.9rem;text-align:center;border-bottom:1px solid var(--line)}
.mp-head img{width:36px;height:36px;object-fit:contain;display:inline-block;vertical-align:middle;border-radius:8px}
.mp-head span{font-family:var(--font-display);font-size:1.05rem;color:var(--rose-deep);margin-left:.4rem;letter-spacing:.04em;vertical-align:middle}
.mp-head em{color:var(--gold-deep);font-style:italic}
.mp-body{padding:1.2rem 1.1rem;text-align:center}
.mp-body h2{font-family:var(--font-display);font-size:1.3rem;color:var(--charcoal);margin-bottom:.5rem}
.mp-body p{font-family:var(--font-serif);font-size:1rem;color:var(--charcoal-soft);line-height:1.5}
.mp-btn{display:inline-block;margin-top:1rem;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--ivory);padding:.55rem 1.3rem;border-radius:24px;font-size:.85rem;font-weight:600}
.mp-ph{color:#c9bba9;font-style:italic;font-family:var(--font-serif)}
.mp-foot{background:var(--cream);padding:.7rem;text-align:center;font-size:.66rem;color:var(--text-muted);border-top:1px solid var(--line)}

/* galerie de modèles */
.tpl-group{margin-bottom:1.6rem}
.tpl-group-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.tpl-group-h h3{font-size:1.05rem;color:var(--charcoal)}
.theme-dot{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.tpl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.tpl-card{background:var(--ivory);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-s);display:flex;flex-direction:column}
.tpl-mini{padding:1rem .9rem;text-align:center;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}
.tpl-mini b{font-family:var(--font-display);font-size:1rem;line-height:1.2}
.tpl-mini i{font-style:normal;font-size:.66rem;font-weight:600;padding:.25rem .7rem;border-radius:16px}
.tpl-meta{padding:.7rem .8rem .1rem;flex:1}
.tpl-meta b{display:block;font-size:.85rem;color:var(--charcoal)}
.tpl-meta small{display:block;color:var(--text-muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-card .btn{margin:.7rem .8rem .8rem}
.auto-h{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin:0 0 .6rem;display:flex;align-items:center;gap:.5rem}

/* catalogue : filtres, priorités, flux */
.chips-filter{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.chips-filter button{font-family:var(--font-sans);font-size:.8rem;font-weight:600;padding:.45rem .8rem;border:1px solid var(--line);background:var(--ivory);border-radius:20px;cursor:pointer;color:var(--charcoal-soft)}
.chips-filter button:hover{border-color:var(--gold)}
.chips-filter button.on{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--ivory);border-color:transparent}
.prio{font-size:.6rem;font-weight:700;padding:.05rem .35rem;border-radius:5px;letter-spacing:.02em}
.prio.p1{background:#e7f0e8;color:var(--ok)}
.prio.p2{background:#fbeee0;color:var(--warn)}
.prio.p3{background:#efe7db;color:var(--text-muted)}
.stream{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.stream.tx{color:#6a86a0}
.stream.mkt{color:var(--rose-deep)}
.auto-row.locked{opacity:.62}
.auto-row .dep{font-style:italic;color:var(--alert)}
.switch:disabled{opacity:.5;cursor:not-allowed}

/* aperçu e-mail avec fond illustré */
.mail-preview.mp-bg{background-size:cover;background-position:center;padding:1.1rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;min-height:360px;justify-content:center;position:relative}
.mail-preview.mp-bg::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.14)}
.mp-b-logo{position:relative;z-index:1}
.mp-b-logo img{width:46px;height:46px;object-fit:contain;border-radius:11px;background:rgba(255,255,255,.75);padding:4px}
.mp-b-card{position:relative;z-index:1;background:rgba(252,248,242,.93);border-radius:14px;padding:1.1rem;text-align:center;max-width:86%;box-shadow:0 12px 34px -14px rgba(80,55,40,.5)}
.mp-b-card h2{font-family:var(--font-display);font-size:1.25rem;margin-bottom:.4rem;line-height:1.2}
.mp-b-card p{font-family:var(--font-serif);font-size:.98rem;color:var(--charcoal-soft);line-height:1.45}
.mp-b-card .mp-btn{margin-top:.9rem}
.mp-b-foot{position:relative;z-index:1;font-size:.62rem;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* sélecteur de fond */
.bg-picker{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.bg-thumb{width:44px;height:58px;border-radius:8px;background-size:cover;background-position:center;cursor:pointer;border:2px solid transparent;box-shadow:var(--shadow-s);transition:.15s}
.bg-thumb:hover{transform:translateY(-1px)}
.bg-thumb.on{border-color:var(--gold)}
.bg-thumb.none{background:var(--cream-deep);display:grid;place-items:center;font-size:.55rem;color:var(--text-muted);text-align:center;line-height:1.1}

/* mini-aperçu galerie avec fond */
.tpl-mini{background-size:cover;background-position:center;position:relative;padding:0;min-height:104px;display:flex;align-items:center;justify-content:center}
.tpl-plate{position:relative;z-index:1;background:rgba(252,248,242,.9);border-radius:9px;padding:.5rem .65rem;text-align:center;max-width:86%;box-shadow:0 6px 16px -8px rgba(80,55,40,.4)}
.tpl-plate b{font-family:var(--font-display);font-size:.92rem;line-height:1.2;display:block;margin-bottom:.3rem}
.tpl-plate i{font-style:normal;font-size:.62rem;font-weight:600;padding:.2rem .55rem;border-radius:14px;display:inline-block}