/* PALETTE GENERIQUE & TYPOGRAPHIE
    Settings-v1.0.0.css */

/* ================================
   FICHIER CSS INDISPENSABLE - LibFusion - v1.0.0
================================= */

:root {
    /* Couleurs Charte graphique client */

    /* Couleurs Primaires Charte */
    --color-primary: #22546f; /* couleur 1 perso via TenantThemeStyle - Platform/EntrepriseManager/Widget */
    --color-text-button: #fff; /* couleur 2 perso via TenantThemeStyle - Platform/EntrepriseManager/Widget.
        Blanc par défaut : s'apparie avec --color-primary (fond foncé par défaut) pour un contraste
        correct (WCAG AA). Un tenant avec un --color-primary clair doit surcharger ThemeCtaTextColor. */
    --color-primary-hover: #2ebaf9; /* couleur 3 perso via TenantThemeStyle - Platform/EntrepriseManager/Widget */

    /*******************  */
    --color-primaryRGB: rgb(224 130 18);
    --shadow-primary: 0 5px 15px rgb(50 106 139 / 30%);
    --color-primary-active: #22546f;
    --color-border-primary: #77A6F7;
    --color-primary-txt: #000;
    --color-CTA-primary: #f9c401;
    --color-CTA-primaryRGB: rgb(255 199 44);
    --color-CTA-primary-hover: #ffd33d;
    --color-CTA-primary-txt: #000;

    /*******************  */

    /*******************  */

    /*******************  */

    /* Couleurs Secondaire Charte */
    --color-CTA-secondary: #7ed957;
    --color-CTA-secondaryRGB: rgb(126 217 87);
    --color-CTA-secondary-hover: #68b948;
    --color-CTA-secondary-txt: #01233f;
    --color-secondary: #268a26;
    --color-secondaryRGB: rgb(224 130 18);

    /*******************  */

    /*******************  */

    /*******************  */

    /* Valeur utilisant nos couleurs de branding */
    --color-bg-main: linear-gradient( 60deg, var(--color-primary) 20%, var(--color-secondary) 90% );
    --color-text-link: var(--color-primary);

    /***************************  */

    /***************************  */

    /***************************  */

    /* Dictionnaire des Couleurs Usuelles */
    --color-accent-light: #d3e3fd;
    --color-text-body: #1a1a1a;
    --color-text-dark: #333;
    --color-text-on-light: #3a0648;
    --color-white: #fff;
    --color-white-break1: #FCFCFC;
    --color-white-break2: #FFFAFA;
    --color-blue-vif: #00A8E8;
    --color-blue-dark: #00008B;
    --color-border-blue: #2A6F97;

    /* Couleurs Fonctionnelles */
    --color-disabled: #ccc;
    --color-success: #41cd01;
    --color-success-hover: #6ee82f;
    --color-success-shadow: rgb(65 205 1 / 30%);
    --color-warning: #ffc711;
    --color-warning-light: lightyellow;
    --color-error: #ee2410;
    --color-error-hover: #f5533c;

    /* Couleurs Background */
    --color-background-light: #edf1fa;
    --color-background-grey: #2d2d2d;
    --color-background-panel: #f9faff;
    --shadow-card-light: 0 2px 10px rgb(0 0 0 / 5%);
    --shadow-card-hover: 0 4px 15px rgb(0 0 0 / 12%);

    /* MODAL */
    --color-backdrop: rgb(0 0 0 / 90%);
    --shadow-modal: 0 4px 12px rgb(0 0 0 / 30%);

    /* AUTRES */
    --color-black: #000;
    --color-info: #2488f5;
    --color-grey-shadow: #444;
    --color-grey: #444;
    --color-grey-hover: #b1b1b1;
    --color-grey-active: #8f8f8f;
    --color-anthracite: #303030;
    --color-blue-light: #E7ECF3;
    --color-blue-clear: #2ebaf9;
    --color-violet: #3a0647;
    --color-green: #26b050;

    /***************************  */

    /***************************  */

    /***************************  */

    /* RADIUS */
    --radius-min: 0.3rem;
    --radius-medium: 0.6rem;
    --radius-normal: 1rem;
    --radius: 1.5rem;
    --radius-double: 3rem;
    --radius-xxl: 4rem;
    --radius-circle: 100%;

    /* Rayon des boutons d'action (CTA) — surchargeable par tenant via ThemeButtonRadius
       (Platform/EnterpriseManager, panel Marque) : "Carré" (0rem), "Légèrement arrondi"
       (0.375rem), "Arrondi prononcé" (0.75rem). Valeur par défaut alignée sur l'apparence
       historique des boutons. */
    --radius-button: var(--radius-normal);

    /***************************  */

    /***************************  */

    /***************************  */

    /* 1. Définir les variables de police (nom) */

    /* * ⚠️ TYPOGRAPHIE : A MODIFIER PAR PROJET
     * La valeur de cette variable définit la font-family utilisée par toutes les classes.
     * La source (@font-face) doit être définie séparément.
     */
    --TypoSize-default: 16px;
    --TypoSize-tablette: 14px;
    --TypoSize-mobile: 12px;

    /* Familles de Polices (À mettre à jour avec les noms réels des @font-face) */

    /* --font-family-base: Arial, sans-serif; */

    /* 🎯 Police de référence du design EntOS — "Space Grotesk" (chargée globalement via le
       <link> Google Fonts dans App.razor, poids 300/400/500/600/700). Reprise du titre marketing
       de SaaSPlanForfait.razor (".pricing-hero-title", jusqu'ici seul endroit à l'utiliser) pour en
       faire la police de base de toute l'application, avec 'Inter' (ancienne base) en repli si
       jamais le Google Font ne charge pas, avant la pile système générique. */
    --font-family-base: 'Space Grotesk', 'Inter', -apple-system, blinkmacsystemfont, "Segoe UI", roboto, arial, sans-serif;
    --font-family-secondary: 'Inter', sans-serif; /* <- Deuxième police/famille */

    /***************************  */

    /***************************  */

    /***************************  */

    /* Structure */
    --height-taskbar: 6rem;
    --height-menu-taskbar: 6rem;
    --master-margin-left: 12rem; /* marge gauche cadre du site */

    /***************************  */

    /***************************  */

    /***************************  */

    /* CLAMP */
    --clamp-2: clamp(1rem, 6vw, 2rem);
    --clamp-3: clamp(1.5rem, 5vw, 3rem);
    --clamp-4: clamp(2rem, 6vw, 4rem);
    --clamp-6: clamp(2rem, 8vw, 6rem);
    --clamp-8: clamp(3rem, 8vw, 8rem);
    --clamp-10: clamp(4rem, 9vw, 10rem);
    --clamp-11: clamp(4rem, 9vw, 11rem);
    --clamp-12: clamp(5rem, 10vw, 12rem);
    --clamp-15: clamp(5rem, 10vw, 15rem);
    --clamp-20: clamp(5rem, 10vw, 25rem);

    /*************  */
    --f-size-title: clamp(1.8rem, 5vw, 2.6rem);
    --f-size-medium: clamp(1.4rem, 4vw, 1.8rem);
    --f-size-small: clamp(1rem, 3vw, 1.4rem);

    /************  */
    --w-min: 300px;
    --w-min-small: 250px;

    /**********  */

    /* Variable pour la bordure principale de l'onglet (cf.page client) */
    --tab-border-color: #ced4da;
    --tab-inactive-bg: #f8f9fa; /* Gris très clair pour les onglets inactifs */
    --tab-active-bg: #fff; /* Blanc pour l'onglet actif */
    --tab-active-color: #007bff; /* Couleur d'accentuation (Bleu) pour le texte actif */

    /* Tokens de cohérence pour cette page — reprennent les couleurs déjà utilisées plus bas
       (succès/danger/accent) pour éviter de les redéfinir en dur à chaque règle. */
    --client-accent: #007bff;
    --client-success: #28a745;
    --client-danger: #dc3545;
    --client-warning: #ffc107;
    --client-muted: #6c757d;
    --client-radius: 6px;

    /* Couleurs d'identité par onglet — reprend #6c5ce7 déjà utilisé ailleurs dans l'app
       (Dashboard.razor, SaaSPlanForfait.razor) pour rester cohérent avec la charte existante. */
    --client-tab-info: var(--client-accent);
    --client-tab-contact: #6c5ce7;
    --client-tab-forfait: var(--client-success);
    --client-tab-domaine: #0891b2;
    --client-tab-factures: #e67e22;
}

/* ======================================================================
   Design system générique "carte de consultation" — cartes (.view-card),
   badges de statut (.status-badge) et lignes label/valeur (.info-row).
   Introduit à l'origine pour /admin (widget "Configuration Entreprise",
   MonEntreprise.razor / SettingCompagny.razor), déplacé ici (au lieu de
   admin.css) car réutilisé ailleurs dans l'app (ex. /espace-client/{Id}) — ce
   n'est pas une déco spécifique au panel admin.
   ====================================================================== */

.view-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.view-card {
    padding: 15px;
    border: 1px solid var(--color-background-light);
    border-radius: var(--radius-normal);
    background-color: var(--color-white);
    box-shadow: var(--shadow-card-light);
    transition: box-shadow 0.2s ease;
    min-width: 0; /* empêche le contenu (ex. clé API longue) de pousser la grille en largeur */
    max-width:400px;
}

    .view-card:hover {
        box-shadow: var(--shadow-card-hover);
    }

    .view-card h2 {
        color: var(--color-primary);
        margin-top: 0;
        font-size: 1.5em;
    }

    .view-card h3 {
        color: var(--color-grey);
        margin-top: 15px;
        font-size: 1.1em;
    }

/* En-tête standard d'une carte de consultation : icône + titre à gauche, éventuel lien
   d'édition (crayon) à droite. Homogénéise les titres entre toutes les cartes. */
.view-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

    .view-card-header h2 {
        margin: 0;
        font-size: 1.25em;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .view-card-header .view-card-edit {
        flex-shrink: 0;
        line-height: 0;
    }

        .view-card-header .view-card-edit img {
            width: 24px;
            height: 24px;
        }

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 5px 0;
    border-bottom: 1px dotted var(--color-background-light);
}

.info-label {
    font-weight: 500;
    color: var(--color-grey);
    flex-shrink: 0;
}

.info-value, .info-value-link {
    color: var(--color-text-dark);
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge de statut générique "pastel" (fond clair + texte saturé), utilisé pour les indicateurs
   métier. Dérivé des couleurs de la charte via color-mix() plutôt que des teintes en dur, pour
   rester aligné si la charte évolue. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-double);
    white-space: nowrap;
}

    .status-badge.success {
        background: color-mix(in srgb, var(--color-success) 18%, white);
        color: color-mix(in srgb, var(--color-success) 65%, black);
    }

    .status-badge.warning {
        background: color-mix(in srgb, var(--color-warning) 25%, white);
        color: color-mix(in srgb, var(--color-warning) 60%, black);
    }

    .status-badge.danger {
        background: color-mix(in srgb, var(--color-error) 15%, white);
        color: color-mix(in srgb, var(--color-error) 55%, black);
    }

    .status-badge.info {
        background: color-mix(in srgb, var(--color-info) 15%, white);
        color: color-mix(in srgb, var(--color-info) 55%, black);
    }

    .status-badge.neutral {
        background: #eef1f4;
        color: var(--color-text-dark);
    }

/* Badge circulaire (pastille numérotée/étape) */
.badge-circle {
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    transition: background-color 0.3s ease;
}

    .badge-circle.active {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

    .badge-circle.inactive {
        background-color: #e0e0e0;
        color: #888;
    }


/* Constructions class de Police */

/* POLICE MAJEUR - font-1 */

.font-1-light {
    font-family: var(--font-family-base);
    font-weight: 200;
}

.font-1-regular {
    font-family: var(--font-family-base);
    font-weight: 400;
}

.font-1-SemiBold {
    font-family: var(--font-family-base);
    font-weight: 600;
}

.font-1-bold {
    font-family: var(--font-family-base);
    font-weight: 700;
}



/* POLICE MINEUR - font-2 */

.font-2-light {
    font-family: var(--font-family-secondary);
    font-weight: 200;
}

.font-2-regular {
    font-family: var(--font-family-secondary);
    font-weight: 400;
}

.font-2-SemiBold {
    font-family: var(--font-family-secondary);
    font-weight: 600;
}

.font-2-bold {
    font-family: var(--font-family-secondary);
    font-weight: 700;
}

/****************************  */

/****************************  */

/****************************  */

/* ================================
            POLICES
================================= */

/* 2. Définir les @font-face (source) */


/* POLICE MAJEUR */

/* Montserrat ExtraLight (200) */
/* @font-face {
    font-family: 'Montserrat'; */ /* Doit correspondre à --font-family-base */

    /* src: url('../font/Montserrat/Montserrat-ExtraLight.woff2') format('woff2'), url('../font/Montserrat/Montserrat-ExtraLight.woff') format('woff'), url('../font/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
} */

/* Montserrat Regular (400) */

/* @font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat/Montserrat-Regular.woff2') format('woff2'), url('../font/Montserrat/Montserrat-Regular.woff') format('woff'), url('../font/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
} */

/* Montserrat Bold (700) */

/* @font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat/Montserrat-Bold.woff2') format('woff2'), url('../font/Montserrat/Montserrat-Bold.woff') format('woff'), url('../font/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
} */

/* POLICE MINEUR */

/* Poppins SemiBold (600) */

/* @font-face {
    font-family: 'Poppins';
    src: url('../font/Poppins/Poppins-SemiBold.woff2') format('woff2'), url('../font/Poppins/Poppins-SemiBold.woff') format('woff'), url('../font/Poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
} */

/* CSS dédié au style commun des composants par phase */

.layout-col {
    width: 100%;
    min-width: 300px;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding:0;
    margin-bottom:2rem;
    flex: 1;
    box-sizing: border-box;

    /* border:solid blue 2px; */
}

/* .layout-col:first-child {
    margin-top: 10rem;
} */


.video-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding:0;
}

.video-player-container {
    /* 1. On donne la priorité à la largeur */
    width: 100%;
    max-width: 450px; /* Pour éviter qu'elle soit géante sur ton 17" */

    /* 2. On laisse la hauteur se calculer TOUTE SEULE via le ratio */
    height: auto;
    aspect-ratio: 9 / 16;

    /* 3. Sécurité pour les petits écrans : elle ne doit pas dépasser la vue */
    max-height: 80vh;
    margin: 0 auto;
    border-radius: 20px;
    border: 4px solid #00A8E8;
    background-color: #000;
    overflow: hidden;
    box-shadow: 0 10px 30px rgb(0 0 0 / 40%);
}

    .video-player-container video {
        width: 100%;
        height: 100%;
        display: block;

        /* 'cover' est souvent mieux pour le mobile (plein écran),
           mais 'contain' est plus sûr pour ne rien rater du texte */
        object-fit: contain;
        border: none;
    }

/* On enlève le contour bleu de sélection au clic */
video:focus {
    outline: none !important;
}

/* BLOQUE LA FONCTION DOWNLOAD / ENREGISTRER POUR LES NAVIGATEUR MOBILE */
.video-thumb-bg {
    /* Empêche toute interaction (clic droit/gauche) */
    pointer-events: none;

    /* Désactive la sélection */
    user-select: none;

    /* Optionnel : évite le "drag and drop" de la vidéo */
    -webkit-user-drag: none;
}