/* ════════════════════════════════════════════════════════════════════
   NOSKA MEDIA · GÉNÉRATEUR DE SIGNATURE E-MAIL
   S'appuie sur pages.css (nav, tête, corps, pied). Ici : l'outil lui-même,
   formulaire à gauche, aperçu collant à droite.
   ════════════════════════════════════════════════════════════════════ */
.gen{background:var(--cream-2);padding:clamp(32px,4vw,56px) 0 clamp(48px,6vw,80px)}
.gen .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:start}
.gen-form{display:flex;flex-direction:column;gap:12px}
.gen-section{background:#fff;border:1px solid var(--line-l)}
.gen-section>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;font-weight:700;font-size:16px}
.gen-section>summary::-webkit-details-marker{display:none}
.gen-section>summary::after{content:"+";font-family:var(--f-disp);font-size:26px;line-height:.8;color:var(--bord-vif);transition:transform .25s var(--ease)}
.gen-section[open]>summary::after{transform:rotate(45deg)}
.gen-section>summary small{font-weight:500;font-size:13px;color:var(--mute-l);margin-left:auto;margin-right:12px}
.gen-corps{padding:4px 20px 22px;display:grid;gap:14px}
.gen-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gen-champ{display:grid;gap:6px;font-size:14px}
.gen-champ>span{font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--ink-2)}
.gen-champ>span em{font-style:normal;font-weight:400;color:var(--mute-l)}
.gen input[type=text],.gen input[type=url],.gen input[type=email],.gen input[type=tel],.gen select,.gen textarea{
  width:100%;font:inherit;font-size:15px;padding:11px 12px;border:1px solid rgba(11,10,10,.22);background:#fff;color:var(--ink);border-radius:4px;transition:border-color .2s,box-shadow .2s}
.gen input:focus,.gen select:focus,.gen textarea:focus{outline:none;border-color:var(--bord);box-shadow:0 0 0 3px rgba(102,0,0,.12)}
.gen textarea{min-height:72px;resize:vertical}
.gen-ligne{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.gen-ligne-reseau{grid-template-columns:150px 1fr auto}
.gen-x{width:38px;height:42px;border:1px solid rgba(11,10,10,.18);background:#fff;font-size:22px;line-height:1;color:var(--mute-l);cursor:pointer;border-radius:4px}
.gen-x:hover{color:var(--bord-vif);border-color:var(--bord-vif)}
.gen-plus{justify-self:start;background:none;border:0;font:inherit;font-size:14px;font-weight:600;color:var(--bord);cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.gen-plus:hover{color:var(--bord-vif)}
.gen-coche{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.gen-coche input{width:18px;height:18px;accent-color:var(--bord)}
.gen-aide{font-size:13px;color:var(--mute-l);line-height:1.5}

/* Images */
.gen-image{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start}
.gen-depot{position:relative;width:96px;height:96px;border:2px dashed rgba(11,10,10,.25);border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:1.3;color:var(--mute-l);cursor:pointer;overflow:hidden;background:#fafafa;transition:border-color .2s,background .2s}
.gen-depot:hover,.gen-depot.survol{border-color:var(--bord);background:#fff}
.gen-depot input{position:absolute;inset:0;opacity:0;cursor:pointer}
.gen-img-apercu{position:absolute;inset:0;display:none;pointer-events:none;background:#fff}
.gen-img-apercu img{width:100%;height:100%;object-fit:contain}
.a-image .gen-img-apercu{display:block}
.gen-image-cote{display:grid;gap:8px}
.gen-img-msg{font-size:13px;min-height:1em;color:var(--mute-l)}
.gen-img-msg.ok{color:#1d6f3a}.gen-img-msg.ko{color:var(--bord-vif)}
.gen-img-retirer{display:none;justify-self:start;background:none;border:0;font:inherit;font-size:13px;color:var(--bord-vif);cursor:pointer;text-decoration:underline;padding:0}
.a-image .gen-img-retirer{display:inline}
.gen-ligne-inline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px}
.gen-radio{display:flex;align-items:center;gap:6px;cursor:pointer}
.gen-radio input{accent-color:var(--bord)}
.gen input[type=range]{width:140px;accent-color:var(--bord)}

/* Style */
.gen-modeles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gen-modeles button{font:inherit;font-size:13px;font-weight:600;padding:14px 8px 10px;border:1px solid rgba(11,10,10,.18);background:#fff;cursor:pointer;border-radius:6px;display:grid;gap:8px;justify-items:center;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.gen-modeles button:hover{border-color:var(--bord)}
.gen-modeles button.actif{border-color:var(--bord);box-shadow:0 0 0 2px var(--bord);color:var(--bord)}
.gen-modeles svg{width:64px;height:40px;display:block}
.gen-couleur{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gen-couleur input[type=color]{width:46px;height:42px;padding:2px;border:1px solid rgba(11,10,10,.22);border-radius:4px;background:#fff;cursor:pointer}
.gen-couleur input[type=text]{width:120px;font-family:ui-monospace,Menlo,Consolas,monospace;text-transform:lowercase}
.gen-nuances{display:flex;gap:6px;flex-wrap:wrap}
.gen-nuance{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);cursor:pointer;padding:0}
.gen-nuance:hover{transform:scale(1.12)}

/* Aperçu */
.gen-apercu{position:sticky;top:88px;display:grid;gap:12px}
.gen-mail{background:#fff;border:1px solid var(--line-l);box-shadow:0 24px 48px -36px rgba(11,10,10,.4);overflow:hidden}
.gen-mail-tete{padding:14px 22px;border-bottom:1px solid var(--line-l);font-size:13px;color:var(--mute-l);display:grid;gap:3px;background:#fafaf9}
.gen-mail-tete b{color:var(--ink);font-weight:600}
.gen-mail-corps{padding:22px;font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#222;line-height:1.5;overflow-x:auto}
.gen-mail-corps>p{margin:0 0 18px;color:#444}
#apercu{display:inline-block;max-width:100%}
/* L'aperçu doit se comporter comme un client de messagerie, pas comme le site :
   on neutralise ce que pages.css impose aux images et aux boîtes. */
#apercu img{display:inline;max-width:none}
#apercu *{box-sizing:content-box}
#apercu table{border-collapse:collapse}
#apercu-note{margin:0;padding:10px 22px;background:#fff8e6;border-top:1px solid #f1deab;font-size:13px;color:#6b4f00}
.gen-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gen-actions .btn{padding:15px 22px}
.gen-actions .btn:disabled{opacity:.45;cursor:not-allowed}
.gen-actions .btn.ko{background:var(--ink);color:var(--cream)}
.gen-actions .gen-plus{margin-left:auto}
.gen-jauge{font-size:13px;color:var(--bord-vif);min-height:1em}
#zone-code textarea{width:100%;min-height:160px;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:12px;border:1px solid var(--line-l);background:#fff;color:var(--ink);resize:vertical}

/* Guides d'installation */
.guides{background:#fff;border:1px solid var(--line-l)}
.guides-onglets{display:flex;overflow-x:auto;border-bottom:1px solid var(--line-l);scrollbar-width:none}
.guides-onglets::-webkit-scrollbar{display:none}
.guides-onglets button{flex:0 0 auto;font:inherit;font-size:13px;font-weight:600;padding:14px 16px;border:0;border-bottom:3px solid transparent;background:none;cursor:pointer;color:var(--mute-l);white-space:nowrap}
.guides-onglets button[aria-selected=true]{color:var(--bord);border-bottom-color:var(--bord-vif)}
.guides [role=tabpanel]{padding:18px 22px 22px;font-size:15px}
.guides ol{padding-left:22px;display:grid;gap:8px;margin:0 0 12px}
.guides li{line-height:1.55}
.guides p{margin:0 0 10px;line-height:1.55}
.guides .astuce{background:var(--cream);padding:12px 14px;border-left:3px solid var(--bord-vif);font-size:14px}
.guides kbd{font:12px ui-monospace,Menlo,Consolas,monospace;background:var(--cream-2);padding:2px 6px;border-radius:3px;border:1px solid rgba(11,10,10,.15)}

/* Pourquoi nous (bandeau sous l'outil) */
.gen .wrap+.wrap{display:block}
.gen-promesse{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(24px,3vw,40px)}
.gen-promesse div{background:#fff;border:1px solid var(--line-l);padding:18px 20px;font-size:14px;line-height:1.5}
.gen-promesse b{display:block;font-family:var(--f-disp);font-weight:400;font-size:24px;line-height:1;margin-bottom:8px;color:var(--bord)}

/* Barre mobile */
.gen-barre{display:none}

@media (max-width:1000px){
  .gen .wrap{grid-template-columns:1fr}
  .gen-apercu{position:static;order:-1}
  .gen-promesse{grid-template-columns:1fr 1fr}
  .gen-barre{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gut);background:rgba(11,10,10,.94);backdrop-filter:blur(10px);gap:10px;align-items:center;justify-content:center}
  .gen-barre .btn{flex:1;justify-content:center;padding:14px 18px}
  body{padding-bottom:70px}
}
@media (max-width:560px){
  .gen-actions .btn{flex:1 1 100%;justify-content:center}
  .gen-actions .gen-plus{margin:0 auto}
  .gen-2{grid-template-columns:1fr}
  .gen-ligne-reseau{grid-template-columns:1fr}
  .gen-ligne-reseau .gen-x{justify-self:end}
  .gen-modeles{grid-template-columns:1fr 1fr}
  .gen-promesse{grid-template-columns:1fr}
  .gen-mail-corps{padding:16px}
  #apercu{zoom:.82}
}