/* Volet Newsletter d'Envoi. Ce fichier s'AJOUTE à style.css, il n'y touche pas :
   tout ce qui est ici est propre à newsletter.html. */

.site-nav a.actif{border-color:var(--orange);}

/* les deux vues du volet, en haut de page */
.vues{margin:0 0 22px;}
.vues .onglet{font-size:12px;padding:8px 16px;}

/* liste des campagnes */
.campagne{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid rgba(174,188,205,.14);cursor:pointer;
}
.campagne:last-child{border-bottom:0;}
.campagne:hover .titre{color:var(--orange);}
.campagne .titre{flex:1;min-width:200px;font-weight:500;}
.campagne .titre small{display:block;font-weight:400;color:var(--on-navy-muted);font-size:12.5px;}
.campagne .quand{color:var(--on-navy-muted);font-size:13px;white-space:nowrap;}

/* campagne envoyée : les champs restent lisibles, mais on voit qu'ils sont figés */
#vueEdition input:disabled,#vueEdition select:disabled,#vueEdition textarea:disabled{
  opacity:.65;cursor:default;
}

/* un bloc d'images dans la composition */
.bloc{
  border:1px solid rgba(174,188,205,.22);border-radius:4px;
  padding:16px 16px 6px;margin-bottom:14px;background:rgba(20,26,35,.18);
}
.bloc-tete{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.bloc-tete .numero{
  font-family:"Dosis",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-navy-muted);
}
.bloc-tete .pousse{margin-left:auto;}
.bloc-tete .btn.mini{padding:4px 10px;}

/* la galerie du bloc : vignettes + zone de dépôt */
.galerie{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px;}
.vignette{
  position:relative;width:118px;height:88px;border-radius:3px;overflow:hidden;
  background:#141a23;border:1px solid rgba(174,188,205,.2);cursor:grab;
}
.vignette img{width:100%;height:100%;object-fit:cover;display:block;}
.vignette .x{
  position:absolute;top:4px;right:4px;width:20px;height:20px;line-height:18px;
  text-align:center;border-radius:50%;background:rgba(20,26,35,.85);
  color:var(--on-navy);font-size:14px;cursor:pointer;
}
.vignette .x:hover{background:var(--orange);color:#fff;}
.vignette.drag{opacity:.35;}
.vignette.survol{outline:2px solid var(--orange);}
.vignette .chargement{
  position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--orange);width:0;
}
.galerie .depot{
  width:118px;height:88px;padding:0;margin:0;display:flex;align-items:center;
  justify-content:center;text-align:center;font-size:12px;line-height:1.3;
}
.galerie .depot .gros{font-size:13px;}
.galerie .depot .petit{font-size:11px;}

/* aperçu du mail : fond clair, comme dans une boîte */
.apercu-cadre{
  background:#f4f1ea;border-radius:4px;padding:0;overflow:auto;
  border:1px solid rgba(174,188,205,.16);
}
.apercu-cadre iframe{
  display:block;border:0;background:#f4f1ea;margin:0 auto;
  width:100%;max-width:720px;height:80vh;transition:max-width .25s var(--ease);
}
.apercu-cadre.mobile iframe{max-width:390px;}

/* chiffres du tableau de bord */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:0 0 18px;}
.chiffre{
  border:1px solid rgba(174,188,205,.18);border-radius:4px;padding:12px 14px;
}
.chiffre b{
  display:block;font-family:"Dosis",sans-serif;font-size:28px;font-weight:700;line-height:1.1;
}
.chiffre.chaud b{color:var(--orange);}
.chiffre span{font-size:12px;color:var(--on-navy-muted);letter-spacing:.06em;text-transform:uppercase;}
.chiffre small{display:block;font-size:11.5px;color:var(--on-navy-muted);margin-top:2px;}

.tableau{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px;}
.tableau th{
  text-align:left;font-family:"Dosis",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy-muted);
  padding:6px 8px 8px;border-bottom:1px solid rgba(174,188,205,.2);
}
.tableau td{padding:7px 8px;border-bottom:1px solid rgba(174,188,205,.1);vertical-align:top;}
.tableau td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.tableau td.muet{color:var(--on-navy-muted);}

/* progression d'un envoi */
.progression{height:6px;border-radius:3px;background:rgba(174,188,205,.18);overflow:hidden;margin:10px 0 6px;}
.progression i{display:block;height:100%;width:0;background:var(--orange);transition:width .3s var(--ease);}

/* contacts */
.contact .cat{
  font-style:normal;font-family:"Dosis",sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange);opacity:.85;
}
.contact.confirme{border-color:var(--orange);}
.contact .oui{color:var(--orange);cursor:pointer;font-weight:500;}
.contact .non{color:var(--on-navy-muted);cursor:pointer;}
.recherche{margin:0 0 12px;}
.recherche input{width:100%;max-width:360px;font-size:14px;padding:8px 10px;}
.import textarea{font-family:ui-monospace,Menlo,monospace;font-size:12px;}
.compte{color:var(--on-navy-muted);font-size:13px;margin:0 0 12px;}

.alerte-douce{
  border:1px solid rgba(236,102,8,.5);border-radius:3px;padding:10px 14px;
  font-size:13.5px;margin:0 0 14px;color:var(--on-navy);
}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px;margin:8px 0 14px;}
.checks label{display:flex;align-items:center;gap:7px;font-size:14px;cursor:pointer;white-space:nowrap;}
.checks label i{font-style:normal;color:var(--on-navy-muted);font-size:12px;}

@media(max-width:620px){
  .apercu-cadre iframe{height:70vh;}
  .vignette,.galerie .depot{width:96px;height:72px;}
}