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

/* --------------------------------------------------------------------------
   Pages diagnostic/traitement batch (GeocodageAdresses, EnrichissementSirene,
   ImportYellow, ImportDonneesReference, etc.)
   Conteneur principal : max-width conditionnel à 1600px (desktop).
   En laptop on occupe toute la largeur pour éviter l'effet "colonne flottante".
   -------------------------------------------------------------------------- */
.admin-batch-container {
    width: 100%;
}

@media (min-width: 1600px) {
    .admin-batch-container {
        max-width: 1600px;
    }
}

/* --------------------------------------------------------------------------
   Grille KPI progression (4 cartes %traités / synchronisés / non-trouvés / erreurs).
   Mobile : 2 colonnes (minmax 140px pour labels courts)
   Laptop : auto-fit, peut varier entre 2 et 4 colonnes selon largeur card
   Desktop : 4 colonnes fixes
   -------------------------------------------------------------------------- */
.admin-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

@media (min-width: 1600px) {
    .admin-progress-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* --------------------------------------------------------------------------
   Tranches TypeAdhesion — ligne éditable (Effectif min / max / Montant / Action)
   Mobile < 768 : empilée en 1 colonne (labels/champs sur la même largeur)
   Laptop+      : 3 colonnes égales + bouton supprimer
   -------------------------------------------------------------------------- */
.admin-tranches-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
}

@media (min-width: 768px) {
    .admin-tranches-grid {
        grid-template-columns: 1fr 1fr 1fr auto;
    }
}

/* Page Organisation : blocs de logos (bannière, carré, favicon) */
.organisation-logos {
    align-items: start;
}

.organisation-logo-bloc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.organisation-logo-apercu {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px dashed var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-2);
}

.organisation-logo-apercu img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
}

[data-bs-theme="dark"] .organisation-logo-apercu img {
    background: white;
    border-radius: 6px;
    padding: 4px 8px;
}

/* Assistant « Initialiser une organisation » (ticket #96) : page hors du layout principal */
.initialisation {
    min-height: 100vh;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-family: var(--body-font);
}

.initialisation-entete {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.initialisation-contenu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* Enfant d'un FluentStack vertical, qui n'étire pas : sans largeur, « Suivant » colle à « Précédent ». */
.initialisation-navigation {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.initialisation-discret {
    color: var(--neutral-foreground-hint);
}

.initialisation-etat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.initialisation-recapitulatif {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 20px;
    margin: 0;
}

.initialisation-recapitulatif dt {
    font-weight: 600;
}

.initialisation-recapitulatif dd {
    margin: 0;
}

.initialisation-controles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.initialisation-controles li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.initialisation-email-test {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.initialisation-email-test > div {
    flex: 1;
    min-width: 240px;
    max-width: 480px;
}

@media (max-width: 767.98px) {
    /* Cinq libellés ne tiennent pas côte à côte : seul celui de l'étape en cours reste. */
    .initialisation .workflow-step-label:not(.active) {
        display: none;
    }

    .initialisation-recapitulatif {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .initialisation-recapitulatif dd {
        margin-bottom: 8px;
    }
}

/* --------------------------------------------------------------------------
   Organisation — carte « Apparence » : choix de la couleur principale et aperçu.
   L'aperçu redéfinit --marque sur lui-même ; .portee-marque (app.css) y recalcule l'échelle.
   -------------------------------------------------------------------------- */
.couleur-marque-saisie {
    display: flex;
    align-items: flex-end;
    gap: var(--espace-4);
    flex-wrap: wrap;
}

.couleur-marque-nuancier {
    width: 44px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--rayon-s);
    background: none;
    cursor: pointer;
}

.couleur-marque-suggestions {
    display: flex;
    gap: var(--espace-2);
    flex-wrap: wrap;
    padding-bottom: var(--espace-1);
}

.couleur-marque-pastille {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--neutral-layer-card-container);
    border-radius: 50%;
    outline: 1px solid var(--neutral-stroke-rest);
    cursor: pointer;
    transition: transform var(--duree-rapide) var(--courbe-entree);
}

.couleur-marque-pastille:hover {
    transform: scale(1.1);
}

.couleur-marque-pastille:focus-visible,
.couleur-marque-pastille.selectionnee {
    outline: 2px solid var(--neutral-foreground-rest);
    outline-offset: 1px;
}

.apercu-marque {
    max-width: 520px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--rayon-l);
    overflow: hidden;
}

.apercu-marque-bandeau {
    padding: var(--espace-2) var(--espace-4);
    background: var(--marque-500);
    color: var(--bandeau-texte);
    font-weight: var(--graisse-forte);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apercu-marque-corps {
    display: flex;
    align-items: center;
    gap: var(--espace-4);
    flex-wrap: wrap;
    padding: var(--espace-3) var(--espace-4);
    background: #fff;
    color: #1B2430;
}

.apercu-marque-bouton {
    padding: var(--espace-1) var(--espace-3);
    border-radius: var(--rayon-s);
    background: var(--marque-500);
    color: #fff;
}

.apercu-marque-lien {
    color: var(--marque-500);
    text-decoration: underline;
}

.apercu-marque-selection {
    padding: var(--espace-1) var(--espace-3);
    border-radius: var(--rayon-s);
    background: var(--marque-100);
    color: var(--marque-700);
}