/* ============================================================
   MODULE COMMUNICATION — responsive 3 paliers MEDEF54
   ============================================================
   Convention : Mobile < 768 / Laptop 768-1599 / Desktop ≥ 1600
   Règle sacrée : ne rien dégrader au-delà de 1600px
   ============================================================ */

/* --------------------------------------------------------------------------
   DetailCampagne — Layout 2 colonnes (infos | statistiques)
   Mobile-first : empilées. Desktop ≥ 1600px : côte à côte.
   En laptop on empile : la colonne stats a besoin de sa largeur pleine
   pour afficher 4 cartes par ligne sans chevauchement.
   -------------------------------------------------------------------------- */
.campagne-detail-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.campagne-detail-col {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 1600px) {
    .campagne-detail-col {
        flex: 1 1 0;
        min-width: 420px;
    }
}

/* --------------------------------------------------------------------------
   DetailCampagne — Grilles statistiques et taux
   Mobile-first : auto-fit avec seuil minimal compact (130px) permettant
   2 cartes/ligne en smartphone et 4 en laptop dès ~620px de largeur colonne.
   -------------------------------------------------------------------------- */
.campagne-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

@media (min-width: 1600px) {
    .campagne-stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
}

.campagne-taux-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

@media (min-width: 1600px) {
    .campagne-taux-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
}

/* --------------------------------------------------------------------------
   EditCampagne — Layout 3 cards (Destinataires | Template | Envoi)
   Desktop ≥ 1600px : 3 colonnes ratio 35/45/20.
   Laptop 768-1599  : 2 colonnes (Destinataires+Template en haut, Envoi en bas),
                      ou empilement complet si la hauteur le permet mieux.
   Mobile < 768     : empilé.
   -------------------------------------------------------------------------- */
.campagne-edit-layout {
    display: flex;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.campagne-edit-col {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 1600px) {
    .campagne-edit-col--destinataires { flex: 35 1 0; min-width: 300px; }
    .campagne-edit-col--template      { flex: 45 1 0; min-width: 300px; }
    .campagne-edit-col--envoi         { flex: 20 1 0; min-width: 200px; }
}

/* --------------------------------------------------------------------------
   EditTemplate — Grille métadonnées (Nom + Type + Canal + Catégorie)
   Mobile < 768 : 1 colonne
   Laptop       : 2 colonnes
   Desktop      : 4 colonnes
   -------------------------------------------------------------------------- */
.template-metadata-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .template-metadata-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (min-width: 1600px) {
    .template-metadata-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --------------------------------------------------------------------------
   EditTemplate / EditTemplateDocument — Layout éditeur + aperçu
   ≥ 1200px : 2 colonnes côte à côte (éditeur | aperçu)
   < 1200px : 1 colonne empilée
   Seuil abaissé à 1200px car deux éditeurs de 400px+ tiennent
   confortablement dès cette largeur (laptops compris).
   -------------------------------------------------------------------------- */
.template-doc-layout {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: stretch;
}

.template-doc-col {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 1200px) {
    .template-doc-col {
        flex: 1 1 0;
        min-width: 400px;
    }
}

.template-preview-html,
.template-preview-frame {
    width: 100%;
}