/* =====================================================
   FLOW CORE — FRONTEND BRANDING
   ===================================================== */

:root {
    --flow-primary: #2271b1;
    --flow-secondary: #f6f7f7;
}

/*
 * Liens / éléments interactifs Flow.
 */
.flow-core-portal a:not(.button):not(.flow-button),
.flow-portal a:not(.button):not(.flow-button) {
    color: var(--flow-primary);
}

/*
 * Boutons principaux.
 */
.flow-core-portal .button-primary,
.flow-core-portal .flow-button--primary,
.flow-portal .button-primary,
.flow-portal .flow-button--primary {
    border-color: var(--flow-primary) !important;
    background: var(--flow-primary) !important;
}

/*
 * Navigation active.
 */
.flow-core-portal [aria-current="page"],
.flow-core-portal .is-active,
.flow-core-portal .active,
.flow-portal [aria-current="page"],
.flow-portal .is-active,
.flow-portal .active {
    color: var(--flow-primary);
}

/*
 * Accent sous l'onglet actif.
 */
.flow-core-portal [aria-current="page"]::after,
.flow-core-portal .is-active::after,
.flow-portal [aria-current="page"]::after,
.flow-portal .is-active::after {
    background: var(--flow-primary);
}

/*
 * Eyebrows / petits titres actuellement violets.
 */
.flow-core-portal [class*="eyebrow"],
.flow-core-portal [class*="kicker"],
.flow-core-portal [class*="section-label"],
.flow-portal [class*="eyebrow"],
.flow-portal [class*="kicker"],
.flow-portal [class*="section-label"] {
    color: var(--flow-primary) !important;
}

/*
 * Icônes et éléments d'accent.
 */
.flow-core-portal [class*="accent"],
.flow-portal [class*="accent"] {
    color: var(--flow-primary);
}

/*
 * Logo de marque injecté.
 */
.flow-core-frontend-brand-logo {
    display: block;
    width: auto;
    max-width: 42px;
    max-height: 42px;
    object-fit: contain;
}

/*
 * Container logo si on remplace l'icône existante.
 */
.flow-core-frontend-brand-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/*
 * Nom de plateforme.
 */
.flow-core-frontend-brand-name {
    color: inherit;
    font: inherit;
    font-weight: inherit;
}

/*
 * On conserve une lisibilité correcte même avec
 * une couleur secondaire claire.
 */
.flow-core-brand-surface {
    background:
        color-mix(
            in srgb,
            var(--flow-secondary) 70%,
            white
        );
}

/* =====================================================
   FLOW CORE — FRONTEND BRANDING V2
   Harmonisation portail avec le branding configuré
   ===================================================== */

/*
 * Navigation principale
 */
.flow-core-portal nav a,
.flow-portal nav a {
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.flow-core-portal nav a:hover,
.flow-portal nav a:hover {
    color: var(--flow-primary) !important;
}

.flow-core-portal nav a[aria-current="page"],
.flow-core-portal nav a.is-active,
.flow-portal nav a[aria-current="page"],
.flow-portal nav a.is-active {
    color: var(--flow-primary) !important;

    background:
        color-mix(
            in srgb,
            var(--flow-primary) 10%,
            white
        ) !important;
}

/*
 * Badges / pastilles / icônes
 */
.flow-core-portal [class*="badge"],
.flow-core-portal [class*="pill"],
.flow-portal [class*="badge"],
.flow-portal [class*="pill"] {
    --flow-badge-accent:
        var(--flow-primary);
}

.flow-core-portal [class*="icon"],
.flow-portal [class*="icon"] {
    border-color:
        color-mix(
            in srgb,
            var(--flow-primary) 20%,
            transparent
        );
}

/*
 * Cartes de chiffres / KPI
 */
.flow-core-portal [class*="stat"] [class*="icon"],
.flow-core-portal [class*="metric"] [class*="icon"],
.flow-portal [class*="stat"] [class*="icon"],
.flow-portal [class*="metric"] [class*="icon"] {
    color: var(--flow-primary) !important;

    background:
        color-mix(
            in srgb,
            var(--flow-primary) 10%,
            white
        ) !important;
}

/*
 * CTA et actions
 */
.flow-core-portal button:not(.button-link),
.flow-core-portal .button,
.flow-core-portal [class*="button"],
.flow-portal button:not(.button-link),
.flow-portal .button,
.flow-portal [class*="button"] {
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.flow-core-portal .button-primary,
.flow-core-portal [class*="button"][class*="primary"],
.flow-portal .button-primary,
.flow-portal [class*="button"][class*="primary"] {
    color: #fff !important;
    border-color: var(--flow-primary) !important;
    background: var(--flow-primary) !important;
}

.flow-core-portal .button-primary:hover,
.flow-core-portal [class*="button"][class*="primary"]:hover,
.flow-portal .button-primary:hover,
.flow-portal [class*="button"][class*="primary"]:hover {
    filter: brightness(.94);
}

/*
 * Hero / surfaces décoratives
 */
.flow-core-portal [class*="hero"],
.flow-portal [class*="hero"] {
    --flow-hero-primary:
        var(--flow-primary);

    --flow-hero-secondary:
        var(--flow-secondary);
}

.flow-core-portal [class*="hero"]::before,
.flow-core-portal [class*="hero"]::after,
.flow-portal [class*="hero"]::before,
.flow-portal [class*="hero"]::after {
    border-color:
        color-mix(
            in srgb,
            var(--flow-primary) 16%,
            transparent
        );
}

/*
 * Inputs
 */
.flow-core-portal input:focus,
.flow-core-portal select:focus,
.flow-core-portal textarea:focus,
.flow-portal input:focus,
.flow-portal select:focus,
.flow-portal textarea:focus {
    border-color: var(--flow-primary) !important;

    box-shadow:
        0 0 0 1px
        var(--flow-primary) !important;
}

/*
 * Liens texte
 */
.flow-core-portal a:hover,
.flow-portal a:hover {
    color:
        color-mix(
            in srgb,
            var(--flow-primary) 85%,
            black
        );
}

/*
 * Accent générique pour les classes historiques
 * violettes / indigo du portail.
 */
.flow-core-portal .text-primary,
.flow-core-portal .color-primary,
.flow-core-portal .is-primary,
.flow-portal .text-primary,
.flow-portal .color-primary,
.flow-portal .is-primary {
    color: var(--flow-primary) !important;
}

.flow-core-portal .bg-primary,
.flow-portal .bg-primary {
    background: var(--flow-primary) !important;
}

.flow-core-portal .border-primary,
.flow-portal .border-primary {
    border-color: var(--flow-primary) !important;
}

/* =====================================================
   FLOW CORE — FRONT UX V3
   Header / logo / identité
   ===================================================== */

/*
 * Le logo importé peut être très horizontal.
 * On réserve donc une zone large mais basse,
 * sans jamais le forcer dans un carré.
 */
.flow-core-frontend-brand-logo-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 150px !important;

    height: 42px !important;
    min-height: 42px !important;

    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
}

.flow-core-frontend-brand-logo {
    display: block !important;

    width: auto !important;
    max-width: 145px !important;

    height: auto !important;
    max-height: 38px !important;

    object-fit: contain !important;
    object-position: left center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
}

/*
 * Si l'ancien pictogramme Flow possède encore
 * un conteneur carré, on le neutralise.
 */
.flow-core-frontend-brand-logo-wrap svg,
.flow-core-frontend-brand-logo-wrap .dashicons,
.flow-core-frontend-brand-logo-wrap > span:not(
    .flow-core-frontend-brand-name
) {
    display: none !important;
}

/*
 * Bloc de marque :
 * logo + nom bien regroupés.
 */
.flow-core-frontend-brand-block {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;

    min-width: 0 !important;

    text-decoration: none !important;
}

/*
 * Nom de plateforme.
 */
.flow-core-frontend-brand-name {
    display: block !important;

    max-width: 220px !important;

    overflow: hidden !important;

    color: var(--flow-primary) !important;

    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/*
 * Header / barre de navigation du portail.
 *
 * On donne de l'espace à la marque sans pousser
 * les éléments de navigation n'importe où.
 */
.flow-core-portal header,
.flow-core-portal nav,
.flow-portal header,
.flow-portal nav {
    box-sizing: border-box;
}

.flow-core-portal [class*="header"],
.flow-core-portal [class*="nav"],
.flow-portal [class*="header"],
.flow-portal [class*="nav"] {
    min-width: 0;
}

/*
 * Le premier bloc de la navigation qui contient
 * la marque ne doit pas s'écraser.
 */
.flow-core-portal .flow-core-frontend-brand-block,
.flow-portal .flow-core-frontend-brand-block {
    flex: 0 1 auto !important;
}

/*
 * Navigation plus compacte et plus lisible.
 */
.flow-core-portal nav a,
.flow-portal nav a {
    white-space: nowrap;
}

/*
 * Sur écran moyen :
 * logo légèrement plus petit.
 */
@media (max-width: 1180px) {
    .flow-core-frontend-brand-logo-wrap {
        max-width: 125px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .flow-core-frontend-brand-logo {
        max-width: 120px !important;
        max-height: 34px !important;
    }

    .flow-core-frontend-brand-name {
        max-width: 170px !important;
        font-size: 15px !important;
    }
}

/*
 * Tablette :
 * on laisse le logo mais on masque éventuellement
 * le nom pour préserver la navigation.
 */
@media (max-width: 900px) {
    .flow-core-frontend-brand-logo-wrap {
        max-width: 105px !important;
    }

    .flow-core-frontend-brand-logo {
        max-width: 100px !important;
        max-height: 32px !important;
    }

    .flow-core-frontend-brand-name {
        display: none !important;
    }

    .flow-core-frontend-brand-block {
        gap: 0 !important;
    }
}

/*
 * Mobile :
 * logo compact et sans déformation.
 */
@media (max-width: 600px) {
    .flow-core-frontend-brand-logo-wrap {
        max-width: 88px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .flow-core-frontend-brand-logo {
        max-width: 84px !important;
        max-height: 30px !important;
    }
}


/* QUALISECU — AUTH LOGO BRIDGE V2.6 */

.flow-auth-card {
    --flow-auth-logo: none;
}

/* QUALISECU — AUTH LOGO BRIDGE V2.6 END */