/* Mon-Compte_2026_05_12_04h54.css - Design Premium Glassmorphism */
.page_width_wrapper.account_content_wrapper {}

canvas#electric-canvas {
    z-index: 0;
}

/* ============================================================
   Header Premium — Maquette V2
   ============================================================ */
.account_premium_header {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 0;
    min-height: 180px;
}

.header_background_layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.header_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 15, 30, 0.85), rgba(10, 15, 30, 0.7));
    z-index: 1;
}

.header_content {
    position: relative;
    z-index: 2;
    padding: 2rem 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.header_content .profile_text_info {
    max-width: 600px;
}

.profile_name {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
}

.profile_name strong {
    font-weight: 700;
    color: var(--accent_cyan);
}

.header_content .profile_meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

.header_quick_stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.quick_stat_item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius);
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: all var(--transition-speed);
    min-width: 160px;
    flex: 1;
}

.quick_stat_item:hover {
    background: rgba(0, 210, 211, 0.08);
    border-color: rgba(0, 210, 211, 0.2);
}

.quick_stat_item>.material-symbols-outlined {
    font-size: 1.75rem;
    color: var(--cyan-accent);
    opacity: 0.7;
}

.stat_content {
    display: flex;
    flex-direction: column;
}

.stat_label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.stat_value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

@media (max-width: 600px) {
    .header_quick_stats {
        flex-direction: column;
    }

    .quick_stat_item {
        min-width: auto;
    }

    .header_content {
        padding: 1.5rem 1rem;
    }
}

/* override supprimé — margin-top maintenant dans la grille ci-dessous */
.account_page_wrapper {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
}

@media (max-width: 900px) {
    .account_page_wrapper {
        grid-template-columns: 1fr;
    }
}

/* Sidebar Navigation */
.account_sidebar {
    position: sticky;
    top: 2rem;
    height: fit-content;
}

.nav_card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* .nav_item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    color: var(--slate-400);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.nav_item:hover,
.nav_item.active {
    background: rgba(34, 211, 238, 0.1);
    color: var(--cyan-accent);
}

.nav_item.active {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.2);
}
 */
/* .nav_item .material-symbols-outlined {
    font-size: 1.25rem;
} */

/* Main Content Sections — Grille 2 colonnes Desktop */
.account_content {
    display: grid;
    grid-template-columns: 1fr 440px;
    grid-template-areas:
        "dashboard dashboard"
        "profile   phones"
        "sectors   irve"
        "sectors   review"
        "billing   billing"
        "invoices  invoices";
    gap: 1.5rem;
    margin-top: 2em;
}

@media (max-width: 1100px) {
    .account_content {
        grid-template-columns: 1fr;
        grid-template-areas:
            "dashboard"
            "profile"
            "phones"
            "sectors"
            "irve"
            "review"
            "billing"
            "invoices";
    }
}

#section_dashboard {
    grid-area: dashboard;
}

#section_profile {
    grid-area: profile;
}

#section_phones {
    grid-area: phones;
}

#section_sectors {
    grid-area: sectors;
}

section#section_sectors div#sectors_summary_panel {
    padding: 0;
}

div#sectors_summary_panel .sectors_text_col {
    padding: 0 2em;
    padding-bottom: 2em;
}

#section_irve {
    grid-area: irve;
}

#section_affiliate_review {
    grid-area: review;
}

#section_billing {
    grid-area: billing;
}

#section_invoices {
    grid-area: invoices;
}

@media (max-width: 900px) {
    .account_content {
        grid-template-columns: 1fr;
        grid-template-areas:
            "dashboard"
            "profile"
            "phones"
            "sectors"
            "irve"
            "review"
            "billing"
            "invoices";
    }
}

.section_card {
    position: relative;
    padding: 2rem;
    border-radius: 24px;
    min-width: 100%;
}

.section_title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.section_title h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    color: white;
}

.section_title .material-symbols-outlined {
    color: var(--cyan-accent);
}

/* Dashboard Widgets */
.dashboard_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    justify-content: space-around;
    padding: 1em;
}

.widget_card {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.widget_icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan-accent);
}

.widget_data .label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    margin-bottom: 0.25rem;
}

.widget_data .value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

/* Form Styles */
.form_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 40em;
}

@media (max-width: 600px) {
    .form_grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .edit_media_header.billing_edit_header {
        float: unset;
        display: block;
        margin: auto;
        width: 100%;
        padding: 1em !important;
        margin: 0 !important;
    }
}

.account_page_wrapper .input_group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account_page_wrapper .input_group label {
    font-size: 0.85rem;
    color: var(--slate-400);
    font-weight: 500;
}

.account_page_wrapper .input_wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.account_page_wrapper .input_wrapper:focus-within {
    border-color: var(--cyan-accent);
    background: rgba(255, 255, 255, 0.05);
}

.account_page_wrapper .input_wrapper input {
    width: 100%;
    background: transparent;
    border: none;
    color: white;
    font-size: 1rem;
    outline: none;
}

.account_page_wrapper .input_wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* Action Buttons */
.bt_save {
    background: var(--cyan-accent);
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    width: fit-content;
    margin-top: 1rem;
}

.bt_save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(34, 211, 238, 0.3);
}

.bt_save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Security Section */
.security_actions {
    display: flex;
    gap: 1.5rem;
}

.bt_secondary_action {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bt_secondary_action:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Mes Secteurs Badges */
.sectors_badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.sector_badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: var(--cyan-accent);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
}

.sector_badge.edit_tag {
    cursor: pointer;
    transition: all 0.2s ease;
}

.sector_badge.edit_tag:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.sector_badge.edit_tag .material-symbols-outlined {
    font-size: 1rem;
}


/* ── Classes sémantiques (nettoyage inline) ── */

/* Page non connectée */
.conteneur-non-connecte {
    padding: 10vh 0;
    text-align: center;
}

/* Section sans padding (dashboard) */
.section-sans-padding {
    padding: 0;
}

div#section_dashboard {
    padding: 1em;
    backdrop-filter: blur(6px);
}

/* Widget cliquable */
.widget-cliquable {
    cursor: pointer;
}

/* Icône widget dorée */
.widget-icone-doree {
    color: #fbbf24;
}

/* Icône widget cyan */
.widget-icone-cyan {
    color: var(--cyan-accent);
}

/* CTA link dans widget */
.cta-lien-widget {
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cta-lien-cyan {
    color: var(--cyan-accent);
}

.cta-lien-doree {
    color: #fbbf24;
}

.cta-lien-widget .material-symbols-outlined {
    font-size: 0.9rem;
}

/* Section title avec espace entre */
.titre-section-espace {
    justify-content: space-between;
}

/* Groupe titre intérieur */
.groupe-titre-interieur {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Bouton toggle édition — Crayon fixe en haut à droite */
.btn-toggle-edition {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 8px 12px;
    font-size: 0.8rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0;
    width: 42px;
    height: 42px;
    justify-content: flex-start;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 10;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.05);
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    color: white;
    border: none;
}

.btn-toggle-edition:hover {
    width: 110px;
    gap: 8px;
    justify-content: flex-start;
    padding-left: 12px;
    background: #21294af0 !important;
    /* color: var(--slate-900); */
    border-color: var(--cyan-accent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: #000 0 0 1em;
}

.btn-toggle-edition .label {
    opacity: 0;
    display: inline-block;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.btn-toggle-edition:hover .label {
    opacity: 1;
}

.btn-toggle-edition.active {
    /* background: rgba(239, 68, 68, 0.2); */
    /* border-color: rgba(239, 68, 68, 0.4); */
    /* color: #ef4444; */
}

.btn-toggle-edition.active .material-symbols-outlined {
    /* color: #ef4444; */
}

.btn-toggle-edition.active:hover {
    background: #ef4444;
    color: white;
}

.btn-toggle-edition.active:hover .material-symbols-outlined {
    color: white;
}

.btn-toggle-edition .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--cyan-accent);
    /* Icône toujours visible en Cyan */
}

.btn-toggle-edition:hover .material-symbols-outlined {
    /* color: var(--slate-900); */
}

/* Panneau résumé Identifiants — 2 colonnes Desktop */
.profile_summary_flex {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    margin-top: 1rem;
}

.profile_avatar_side {
    flex-shrink: 0;
    width: 140px;
}

.profile_info_side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 600px) {
    .profile_summary_flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }

    .profile_info_side {
        width: 100%;
        align-items: center;
    }
}

/* Bloc sécurité */
.bloc-securite {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1rem;
}

/* Bouton secondaire arrondi */
.btn-arrondi {
    margin: 0;
    border-radius: 50px;
    font-size: 0.85rem;
    padding: 6px 16px;
}

/* Icône bouton inline */
.icone-bouton-inline {
    font-size: 1.1rem;
}

/* Panneau édition (partie visible hors display:none) */
.panneau-edition-marge {
    margin-top: 1rem;
    padding-top: 1rem;
}

/* Champ pleine largeur */
.champ-pleine-largeur {
    grid-column: 1 / -1;
}

/* Actions formulaire */
.actions-formulaire {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
}

.actions-formulaire-simple {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
    gap: 1rem;
}

.groupe-boutons {
    display: flex;
    gap: 1rem;
}

/* Bouton annuler arrondi */
.btn-annuler-arrondi {
    border-radius: 50px;
}

/* Bouton save sans marge */
.btn-save-compact {
    margin: 0;
    border-radius: 50px;
}

/* Détails résumé */
.details-resume {
    font-size: 0.8rem;
    opacity: 0.5;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.8rem;
}

/* Texte info sous-section */
.texte-info-section {
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.texte-info-section-petit {
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Ajout département / numéro inline */
.ligne-ajout-inline {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.champ-flex {
    flex: 1;
}

.btn-ajout-compact {
    margin: 0;
    min-width: auto;
    padding: 12px 20px;
}

/* Erreur champ */
.erreur-champ {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* Tags édition flex */
.tags-edition-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Aucun secteur / numéro */
.message-vide-centre {
    text-align: center;
    padding: 1rem;
}

.icone-vide {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.3;
}

/* Badge numéro téléphone */
.badge-telephone {
    background: var(--slate-800);
    border: 1px solid var(--white-10);
    margin: 2px;
}

.badge-telephone .material-symbols-outlined {
    font-size: 1rem;
    color: var(--cyan-accent);
    vertical-align: middle;
}

/* Texte explicatif résumé */
.texte-explicatif-resume {
    margin-bottom: 1rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.texte-departements-label {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Certifications IRVE */
.liste-certifications {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.form-checkbox-inline {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.champ-autre-certif {
    margin-top: 0.5rem;
}

/* Utility classes */
.highlight {
    color: var(--cyan-accent);
}

.text_orange {
    color: #fbbf24;
}

.text_slate {
    color: var(--slate-400);
    max-width: 28em;
}

/* PREMIUM HEADER ------------------------------------------------------------- */
.account_premium_header {
    position: relative;
    height: 380px;
    margin: 2rem auto;
    border-radius: 2rem;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 1780px;
    /* Aligné avec page_width_wrapper max-width si besoin */
    width: 90%;
    max-width: calc(1200px - 2em);
    margin: 0 auto;
    justify-content: center;
    margin-top: 2em;
}

.header_content_wrapper {
    width: 100%;
    position: relative;
    z-index: 2;
}

.header_content_centered {
    /* display: flex; */
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    gap: 2rem;
}

.header_background_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 80%;
    transition: opacity 1s ease-in-out;
    filter: brightness(0.4) blur(1px);
    z-index: 0;
}

.bright_mode .header_background_layer {
    filter: brightness(1.2);
}

.header_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bg-base) 0%, rgba(15, 23, 42, 0.6) 50%, transparent 100%);
    z-index: 1;
}

.bright_mode .header_overlay {
    background: linear-gradient(to top, #3a749273 0%, rgb(49 60 90 / 91%) 50%, #9cc3d700 100%);
}

.header_content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 0 2rem;
}

.profile_text_info {
    color: white;
    flex: 1;
    max-width: 36em;
    padding: 1.6em 0;
}

.profile_name {
    font-size: 3rem;
    font-weight: 900;
    margin: 0 0 0.75rem 0;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.02em;
}

.profile_meta {
    display: flex;
    gap: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    max-width: 600px;
    line-height: 1.4;
}

.header_quick_stats {
    display: flex;
    gap: 1.25rem;
}

.quick_stat_item {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 240px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.quick_stat_item:hover {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--cyan-accent);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 210, 211, 0.2);
}

.stat_icon_box {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat_icon_box .material-symbols-outlined {
    font-size: 1.75rem;
    color: white;
}

.stat-icone-cyan .material-symbols-outlined {
    color: var(--cyan-accent);
}

.stat-icone-doree .material-symbols-outlined {
    color: #fbbf24;
}

.stat_content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat_label {
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.stat_value {
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
}

.header_cta_btn {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--cyan-accent);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.quick_stat_item:hover .header_cta_btn {
    opacity: 1;
}

.header_cta_btn .material-symbols-outlined {
    font-size: 0.9rem;
}

/* RESPONSIVE HEADER */
@media (max-width: 1200px) {
    .header_content_centered {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }

    .header_quick_stats {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 1rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .header_quick_stats::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 800px) {
    .account_premium_header {
        height: auto;
        min-height: 400px;
        padding: 4rem 0 2rem 0;
        width: 95%;
        margin: 1rem auto;
    }

    .profile_name {
        font-size: 1.8rem;
    }

    .quick_stat_item {
        min-width: 180px;
    }
}

@media (max-width: 450px) {
    .profile_name {
        font-size: 1.5rem;
    }

    .profile_meta {
        font-size: 0.85rem;
    }

    .quick_stat_item {
        min-width: 100%;
        padding: 1rem;
    }
}

/* Soutien pour écrans très étroits (350px) */
@media (max-width: 360px) {
    .account_premium_header {
        padding: 3rem 0 1.5rem 0;
    }

    .profile_name {
        font-size: 1.3rem;
    }

    .stat_value {
        font-size: 1.1rem;
    }

    .section_card {
        padding: 1rem;
    }

    .nav_card {
        padding: 0.5rem;
    }
}

/* AVATAR TRIGGER IN MENU --------------------------------------------------- */
.user_avatar_trigger {
    /* width: 32px; */
    /* height: 32px; */
    /* border-radius: 8px; */
    /* object-fit: cover; */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
}

/* 
.user_avatar_min {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    margin-right: 1rem;
    border: 2px solid var(--cyan-accent);
}

.user_info_header {
    display: flex;
    align-items: center;
}

.user_info_text {
    display: flex;
    flex-direction: column;
} */

/* ============================================================
   AVATAR CONTAINER — Cercle photo de profil cliquable
   ============================================================ */
.avatar_container_inline {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(34, 211, 238, 0.3);
    cursor: pointer;
    transition: border-color var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar_container_inline:hover {
    border-color: var(--cyan-accent);
}

.avatar_container_inline img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar_container_inline .material-symbols-outlined#main_avatar_icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Overlay camera / upload au survol */
.avatar_edit_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-speed);
    border-radius: inherit;
}

.avatar_container_inline:hover .avatar_edit_overlay,
.logo_container_inline:hover .avatar_edit_overlay {
    opacity: 1;
}

.avatar_edit_overlay .material-symbols-outlined {
    font-size: 1.5rem;
    color: white;
}

/* Spinner rotation pour le feedback upload */
.rotating {
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   LOGO DANS LE RÉSUMÉ FACTURATION
   ============================================================ */

/* Colonne droite du résumé billing (logo + carte vérification) */
.billing_col_right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

/* Bloc logo entreprise */
.billing_logo_block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem;
    background: rgb(255 255 255 / 0%);
    border: 1px solid rgb(255 255 255 / 0%);
    border-radius: var(--border-radius);
    width: 100%;
    min-height: 120px;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease;
}

div#logo_trigger:hover {}

.billing_logo_block:hover {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-color: var(--cyan-accent);
    background: rgba(255, 255, 255, 0.05);
}

.billing_logo_block img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    border-radius: 6px;
    display: inline-block;
}

.billing_logo_block .material-symbols-outlined#main_logo_icon {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.2);
}

.billing_logo_label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ============================================================
   UPLOAD AVATAR & LOGO — Zones cliquables identifiables
   ============================================================ */

/* Wrapper centré vertical : cercle + label */
.avatar_upload_wrapper {
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 1rem;
    text-align: center;
    float: left;
    margin-right: 1em;
}

/* Label sous la zone d'upload */
.avatar_upload_label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.02em;
    transition: color var(--transition-speed);
}

.avatar_upload_wrapper:hover .avatar_upload_label,
.logo_upload_wrapper:hover .avatar_upload_label {
    color: var(--cyan-accent);
}

/* Texte label sous l'icône logo (compact) */
.billing_logo_block .avatar_upload_label {
    font-size: 0.65rem;
    white-space: nowrap;
}

/* section_title_right : logo + bouton Modifier alignés */
.section_title_right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ============================================================
   MAQUETTE V2 — Composants spécifiques
   ============================================================ */

/* — Card-inputs style sombre (Identifiants) — */
.card_input_display {
    /* background: rgba(15, 23, 42, 0.6); */
    /* border: 1px solid rgba(255, 255, 255, 0.06); */
    border-radius: var(--border-radius);
    /* padding: 0.6rem 1rem 0.75rem; */
    /* margin-bottom: 0.75rem; */
}

.card_input_display .card_input_label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.15rem;
}

.card_input_display .card_input_value {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* — Section Secteurs : layout Plein Écran (Carte sur toute la hauteur) — */
#section_sectors.sectors_full_height_map {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

#section_sectors.sectors_full_height_map .section_title {
    padding: 2rem 2.5rem 0.5rem;
    position: relative;
    z-index: 5;
    max-width: 50%;
}

#section_sectors.sectors_full_height_map .editable_summary,
#section_sectors.sectors_full_height_map .editable_form {
    padding: 0 2.5rem 2.5rem;
    position: relative;
    z-index: 5;
    max-width: 50%;
    margin-top: 0;
    flex: 1;
}

#section_sectors.sectors_full_height_map .sectors_map_col {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
    border-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 23, 42, 0.9);
}

#sectors_gmap {
    width: 100%;
    height: 100%;
}

.signal_couverture {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cyan-accent);
    font-weight: 700;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 50px;
    z-index: 3;
}

.signal_couverture::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan-accent);
    box-shadow: 0 0 8px var(--cyan-accent);
    animation: pulse_signal 2s ease-in-out infinite;
}

@keyframes pulse_signal {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 6px var(--cyan-accent);
    }

    50% {
        opacity: 0.5;
        box-shadow: 0 0 12px var(--cyan-accent);
    }
}

@media (max-width: 900px) {
    #section_sectors.sectors_full_height_map {
        min-height: auto;
    }

    #section_sectors.sectors_full_height_map .section_title,
    #section_sectors.sectors_full_height_map .editable_summary,
    #section_sectors.sectors_full_height_map .editable_form {
        max-width: 100%;
        padding: 1.5rem;
    }

    #section_sectors.sectors_full_height_map .editable_form {
        padding-top: 0;
    }

    #section_sectors.sectors_full_height_map .sectors_map_col {
        position: relative;
        width: 100%;
        height: 300px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .signal_couverture {
        bottom: 1rem;
        right: 1rem;
        font-size: 0.6rem;
        padding: 0.5rem 1rem;
    }
}

/* — Badge IRVE circulaire — */
.irve_badge_visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0 0.5rem;
    gap: 0.75rem;
}

.irve_circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 210, 211, 0.15), rgba(0, 210, 211, 0.05));
    border: 2px solid var(--cyan-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 25px rgba(0, 210, 211, 0.15);
}

.irve_circle .material-symbols-outlined {
    font-size: 2.5rem;
    color: var(--cyan-accent);
}

.irve_circle_badge {
    position: absolute;
    bottom: -6px;
    background: var(--cyan-accent);
    color: #FFF;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    border-radius: 4px;
}

.irve_certif_name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

.irve_certif_secondary {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.irve_accredite_badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cyan-accent);
    border: 1px solid var(--cyan-accent);
    border-radius: 4px;
    padding: 3px 10px;
    margin-top: 0.25rem;
}

/* — Status de Vérification (Facturation) — */
.billing_summary_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.billing_details_col {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.billing_details_col .billing_detail_row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.85rem;
    max-width: 20em;
}

.billing_detail_row .detail_label {
    color: rgba(255, 255, 255, 0.5);
}

.billing_detail_row .detail_value {
    color: var(--text-primary);
    font-weight: 500;
}

.verification_status_card {
    background: rgba(0, 210, 211, 0.05);
    border: 1px solid rgba(0, 210, 211, 0.15);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.verification_status_card .material-symbols-outlined {
    font-size: 2rem;
    color: var(--cyan-accent);
}

.verification_status_card h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.verification_status_card p {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .billing_summary_grid {
        grid-template-columns: 1fr;
    }
}

/* — Numéros d'appels : badges empilés style maquette — */
.phone_badge_stacked {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.phone_badge_stacked .sector_badge.badge-telephone {
    width: 100%;
    justify-content: flex-start;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    border-radius: var(--border-radius);
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.bright_mode .phone_badge_stacked .sector_badge.badge-telephone {
    background: #cfdce2;
}

/* — Profil Utilisateur : Layout & Flexibilité — */
.profile_summary_flex {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    padding: 1.5rem;
}

.profile_avatar_side {
    flex-shrink: 0;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.profile_info_side {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    min-width: 0;
    /* Important pour le débordement dans flex */
}

.card_input_display {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.card_input_label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.card_input_value {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.text_ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.info_msg_glass {
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
    line-height: 1.4;
}

div#email_change_warning {
    color: var(--couleur_3);
}

.avatar_upload_label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.5rem;
}

@media (max-width: 1100px) {
    .profile_summary_flex {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 1rem;
    }

    .profile_info_side {
        width: 100%;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .security_block {
        display: flex;
        justify-content: center;
    }
}

.avatar_container_inline {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 3px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.avatar_container_inline:hover {
    border-color: var(--cyan-accent);
}

.avatar_container_inline img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar_container_inline .material-symbols-outlined {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.3);
}

.avatar_container_inline .avatar_edit_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-speed);
    border-radius: 50%;
}

.avatar_container_inline:hover .avatar_edit_overlay {
    opacity: 1;
}

.avatar_container_inline .avatar_edit_overlay .material-symbols-outlined {
    font-size: 1.5rem;
    color: #fff;
}

/* — Logo inline (section Facturation) — */
.section_title_right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo_container_inline {
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-speed);
}

.logo_container_inline:hover {
    border-color: var(--cyan-accent);
}

.logo_container_inline img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo_container_inline .material-symbols-outlined {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.3);
}

.logo_container_inline .avatar_edit_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-speed);
}

.logo_container_inline:hover .avatar_edit_overlay {
    opacity: 1;
}

.logo_container_inline .avatar_edit_overlay .material-symbols-outlined {
    font-size: 1rem;
    color: #fff;
}

/* Alerte impayé sur les stats rapides */
.btn_stat_alerte {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    font-weight: 800 !important;
    animation: pulse_alerte 2s infinite;
    border-radius: 1em;
    text-align: center;
    display: inline-block;
}

@keyframes pulse_alerte {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* EDIT MEDIA HEADERS (Forms) */
.edit_media_header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-direction: column;
}

.edit_media_header.billing_edit_header {
    float: right;
    max-width: 20em;
    padding: 2em;
    margin: 0 0 1em 1em;
    border-radius: 1em;
    background-color: #06b6d40a;
}

.edit_media_text {
    flex: 1;
}

.edit_logo_compact {
    max-width: 250px;
    margin: 0 !important;
    height: 140px !important;
}

.billing_edit_header {
    margin-bottom: 2.5rem;
}

@media (max-width: 600px) {
    .edit_media_header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0rem;
    }
}


/* ===================================================================
   BRIGHT MODE — Mon-Compte Optimisations & Contrastes WCAG
   =================================================================== */

html.bright_mode .section_card {
    background: var(--surface_card);
    border: 1px solid var(--border_subtle);
    box-shadow: var(--box-shadow-card);
}

html.bright_mode .section_title h2 {
    color: var(--text_heading);
}

html.bright_mode .widget_card {
    background: var(--surface_card);
    border: 1px solid var(--border_subtle);
    box-shadow: var(--box-shadow-card);
}

html.bright_mode .widget_icon {
    background: rgba(8, 145, 178, 0.08);
}

html.bright_mode .widget_data .label {
    color: var(--text_muted);
}

html.bright_mode .widget_data .value {
    color: var(--text_heading);
}

html.bright_mode .nav_card {
    background: var(--surface_card);
    border: 1px solid var(--border_subtle);
    box-shadow: var(--box-shadow-card);
}

/* html.bright_mode .nav_item
{
    color: var(--text_secondary);
}

html.bright_mode .nav_item:hover,
html.bright_mode .nav_item.active
{
    background: rgba(8, 145, 178, 0.08);
    color: var(--cyan-accent);
}
 */
html.bright_mode .account_page_wrapper .input_wrapper {
    background: var(--surface_input);
    border: 1px solid var(--border_subtle);
}

html.bright_mode .account_page_wrapper .input_wrapper input {
    color: var(--text_primary);
}

html.bright_mode .account_page_wrapper .input_wrapper input::placeholder {
    color: var(--text_muted);
}

html.bright_mode .account_page_wrapper .input_group label {
    color: var(--text_secondary);
}

html.bright_mode .quick_stat_item {
    background: var(--surface_card);
    border: 1px solid var(--border_subtle);
    box-shadow: var(--box-shadow-card);
}

html.bright_mode .stat_label {
    color: var(--text_muted);
}

html.bright_mode .stat_value {
    color: var(--text_heading);
}

html.bright_mode .profile_name {
    color: white;
}

html.bright_mode .btn-toggle-edition {
    background: var(--surface_card);
    border: 1px solid var(--border_subtle);
    color: var(--text_primary);
    box-shadow: var(--box-shadow-card);
}

html.bright_mode .btn-toggle-edition:hover {
    background: var(--surface_card_hover) !important;
    box-shadow: var(--box-shadow-card-hover);
}

html.bright_mode .badge-telephone {
    background: var(--surface_card);
    border: 1px solid var(--border_subtle);
    color: var(--text_primary);
}

html.bright_mode .bt_secondary_action {
    background: var(--surface_card);
    border: 1px solid var(--border_subtle);
    color: var(--text_primary);
}

html.bright_mode .bt_secondary_action:hover {
    background: var(--surface_card_hover);
    border-color: var(--cyan-accent);
}

html.bright_mode .edit_media_header.billing_edit_header {
    background-color: var(--surface_card);
    border: 1px solid var(--border_subtle);
}

html.bright_mode .details-resume {
    border-top: 1px solid var(--border_subtle);
    color: var(--text_muted);
}

html.bright_mode .bloc-securite {
    border-top: 1px solid var(--border_subtle);
}

html.bright_mode #section_sectors.sectors_full_height_map .sectors_map_col {
    border-left: 1px solid var(--border_subtle);
    background: #f1f5f9;
}

html.bright_mode .signal_couverture {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(8, 145, 178, 0.35);
    color: var(--mbr-cyan);
    box-shadow: var(--box-shadow-card);
}

/* ==========================================================================
   SECTION IRVE & SECTION AVIS AFFILIÉ (CARTES SÉPARÉES)
   ========================================================================== */
#section_irve {
    /* Carte dédiée exclusivement aux accréditations IRVE */
}

#section_affiliate_review {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 1.75rem;
}

#section_affiliate_review .irve_avis_cta_block {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    height: 100%;
    justify-content: space-between;
}

#section_affiliate_review .irve_avis_cta_head {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}

#section_affiliate_review .irve_avis_icon_wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f59e0b;
}

#section_affiliate_review .irve_avis_icon_wrap .material-symbols-outlined {
    font-size: 1.6rem;
}

#section_affiliate_review .irve_avis_texts {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

#section_affiliate_review .irve_avis_title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--white, #f1f5f9);
    line-height: 1.25;
}

#section_affiliate_review .irve_avis_desc {
    font-size: 0.82rem;
    color: var(--text-muted, #94a3b8);
    line-height: 1.45;
    margin: 0;
}

#section_affiliate_review .btn_irve_avis_cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    transition: all 0.22s ease;
    box-sizing: border-box;
}

#section_affiliate_review .btn_irve_avis_cta span,
#section_affiliate_review .btn_irve_avis_cta .material-symbols-outlined {
    color: #ffffff;
}

#section_affiliate_review .btn_irve_avis_cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
    filter: brightness(1.1);
    color: #ffffff;
}

/* Bright Mode Adaptations */
html.bright_mode #section_affiliate_review,
.bright_mode #section_affiliate_review {
    background: var(--surface_card, #ffffff);
    border-color: var(--border_subtle, #cbd5e1);
    box-shadow: var(--box-shadow-card, 0 4px 14px rgba(15, 23, 42, 0.06));
}

html.bright_mode #section_affiliate_review .irve_avis_title,
.bright_mode #section_affiliate_review .irve_avis_title {
    color: #0f172a;
}

html.bright_mode #section_affiliate_review .irve_avis_desc,
.bright_mode #section_affiliate_review .irve_avis_desc {
    color: #475569;
}

/* ============================================================
   Bandeau Inspection Administrateur
   ============================================================ */
.admin_inspect_banner_wrapper {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.admin_user_inspect_banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-radius: var(--border-radius);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: var(--text-primary);
}

.admin_inspect_left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin_inspect_left .icon_inspect {
    font-size: 1.6rem;
    color: #f59e0b;
}

.admin_inspect_text {
    font-size: 0.92rem;
    line-height: 1.4;
}

.bt_exit_inspect_admin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all var(--transition-speed);
}

.bt_exit_inspect_admin:hover {
    background: rgba(239, 68, 68, 0.28);
    transform: translateY(-1px);
}

/* ============================================================
   Section Mes Factures & Justificatifs (#section_invoices)
   ============================================================ */
#section_invoices
{
    position: relative;
    overflow: hidden;
    padding: 0;
    transition: all var(--transition-speed);
}

.invoices_accordion_header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-speed), border-color var(--transition-speed);
}

.invoices_accordion_header:hover
{
    background: rgba(255, 255, 255, 0.03);
}

.invoices_header_left
{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.invoices_header_left .header_icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 210, 211, 0.12);
    border: 1px solid rgba(0, 210, 211, 0.25);
    color: var(--cyan-accent);
    font-size: 1.6rem;
    flex-shrink: 0;
}

.invoices_title_group
{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.invoices_title
{
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.invoices_subtitle
{
    font-size: 0.85rem;
    color: var(--slate-400);
}

.invoices_header_right
{
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.invoices_toggle_indicator
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    transition: all var(--transition-speed);
}

.invoices_accordion_header:hover .invoices_toggle_indicator
{
    background: rgba(0, 210, 211, 0.15);
    border-color: var(--cyan-accent);
    color: var(--cyan-accent);
}

.invoices_toggle_chevron
{
    font-size: 1.5rem;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.invoices_toggle_chevron.is_open
{
    transform: rotate(180deg);
}

.invoices_accordion_content
{
    padding: 0 2rem 2rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.invoices_jaxx_container
{
    width: 100%;
    margin-top: 1.25rem;
}

.invoices_jaxx_container .jx_table_wrapper
{
    width: 100%;
}

@media (max-width: 900px)
{
    .invoices_accordion_header
    {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
        gap: 1rem;
    }

    .invoices_header_right
    {
        width: 100%;
        justify-content: space-between;
    }

    .invoices_accordion_content
    {
        padding: 0 1.25rem 1.25rem 1.25rem;
    }
}


.badge_invoices_count {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(0, 210, 211, 0.12);
    border: 1px solid rgba(0, 210, 211, 0.3);
    color: var(--cyan-accent);
    font-size: 0.85rem;
    font-weight: 700;
}

.badge_invoices_total {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.badge_invoices_total strong {
    color: var(--cyan-accent);
    font-weight: 700;
}

.invoices_table_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 15, 29, 0.4);
    margin-top: 1rem;
}

.invoices_table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
    text-align: left;
}

.invoices_table th {
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-400);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700;
}

.invoices_table td {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

tr.invoice_row {
    transition: background var(--transition-speed);
}

tr.invoice_row:hover {
    background: rgba(0, 210, 211, 0.04);
}

/* Colonnes Facture */
.inv_ref_group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.inv_ref_group .icon_inv {
    color: var(--cyan-accent);
    font-size: 1.3rem;
    opacity: 0.85;
}

.inv_ref_code {
    font-family: var(--font-mono, monospace);
    font-weight: 800;
    color: var(--text-primary);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.badge_invoice_test {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.inv_date_main {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.inv_date_time {
    display: block;
    font-size: 0.78rem;
    color: var(--slate-400);
    margin-top: 2px;
}

.inv_main_desc {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.inv_sub_mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--slate-400);
    margin-top: 4px;
}

.inv_sub_mode .icone_pay_mini {
    font-size: 0.95rem;
    opacity: 0.7;
}

.col_inv_amount {
    white-space: nowrap;
}

.inv_amount_val {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--cyan-accent);
}

.inv_amount_tax {
    font-size: 0.75rem;
    color: var(--slate-400);
    margin-left: 3px;
    font-weight: 600;
}

.badge_invoice_status.status_paid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge_invoice_status.status_paid .material-symbols-outlined {
    font-size: 1rem;
}

/* Actions Factures */
.invoice_actions_flex {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn_inv_action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all var(--transition-speed);
    cursor: pointer;
    box-sizing: border-box;
}

.btn_inv_download {
    background: linear-gradient(135deg, rgba(0, 210, 211, 0.22), rgba(14, 165, 233, 0.22));
    border: 1px solid rgba(0, 210, 211, 0.45);
    color: #ffffff;
}

.btn_inv_download span:last-child {
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

.btn_inv_download:hover {
    background: linear-gradient(135deg, rgba(0, 210, 211, 0.35), rgba(14, 165, 233, 0.35));
    border-color: var(--cyan-accent);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 210, 211, 0.25);
}

.btn_inv_view,
.btn_inv_details,
.btn_inv_doli {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    padding: 6px 9px;
}

.btn_inv_view:hover,
.btn_inv_details:hover,
.btn_inv_doli:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
}

.btn_inv_doli {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
}

.btn_inv_doli:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #ffffff;
}

/* État vide */
.empty_inv_box {
    padding: 3.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.icone-vide-factures {
    font-size: 3.2rem;
    color: var(--slate-500);
    opacity: 0.4;
    margin-bottom: 0.25rem;
}

.empty_inv_box h4 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-primary);
    font-weight: 700;
}

.empty_inv_box p {
    margin: 0;
    font-size: 0.9rem;
    max-width: 520px;
    line-height: 1.5;
}

/* Note de bas de section */
.invoices_footer_note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 1rem;
    margin-top: 1.25rem;
    font-size: 0.82rem;
    color: var(--slate-400);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.invoices_footer_note .icon_note {
    color: var(--cyan-accent);
    font-size: 1.15rem;
    opacity: 0.85;
}

/* ============================================================
   Bright Mode pour Mes Factures
   ============================================================ */
html.bright_mode .invoices_accordion_header:hover,
.bright_mode .invoices_accordion_header:hover
{
    background: rgba(0, 0, 0, 0.02);
}

html.bright_mode .invoices_accordion_content,
.bright_mode .invoices_accordion_content
{
    border-top-color: rgba(0, 0, 0, 0.06);
}

html.bright_mode .invoices_toggle_indicator,
.bright_mode .invoices_toggle_indicator
{
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #334155;
}

html.bright_mode .invoices_accordion_header:hover .invoices_toggle_indicator,
.bright_mode .invoices_accordion_header:hover .invoices_toggle_indicator
{
    background: rgba(2, 132, 199, 0.1);
    border-color: #0284c7;
    color: #0284c7;
}

html.bright_mode .invoices_table_wrapper,
.bright_mode .invoices_table_wrapper {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

html.bright_mode .invoices_table th,
.bright_mode .invoices_table th {
    background: #f8fafc;
    border-color: rgba(0, 0, 0, 0.08);
    color: #475569;
}

html.bright_mode .invoices_table td,
.bright_mode .invoices_table td {
    border-color: rgba(0, 0, 0, 0.06);
}

html.bright_mode tr.invoice_row:hover,
.bright_mode tr.invoice_row:hover {
    background: rgba(2, 132, 199, 0.04);
}

html.bright_mode .badge_invoices_total,
.bright_mode .badge_invoices_total {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #0f172a;
}

html.bright_mode .btn_inv_view,
html.bright_mode .btn_inv_details,
.bright_mode .btn_inv_view,
.bright_mode .btn_inv_details {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

html.bright_mode .btn_inv_view:hover,
html.bright_mode .btn_inv_details:hover,
.bright_mode .btn_inv_view:hover,
.bright_mode .btn_inv_details:hover {
    background: #e2e8f0;
    color: #0f172a;
}

html.bright_mode .btn_inv_download,
.bright_mode .btn_inv_download {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    border-color: #0284c7;
    color: #ffffff;
}

html.bright_mode .btn_inv_download:hover,
.bright_mode .btn_inv_download:hover {
    background: linear-gradient(135deg, #0369a1, #075985);
    color: #ffffff;
}

html.bright_mode .invoices_footer_note,
.bright_mode .invoices_footer_note {
    border-color: rgba(0, 0, 0, 0.08);
    color: #64748b;
}

html.bright_mode .admin_user_inspect_banner,
.bright_mode .admin_user_inspect_banner {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* ==========================================================================
   BADGES DE CONCURRENCE SUR LES SECTEURS (DEMANDE N° 978)
   ========================================================================== */
.sector_badge_wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 4px;
}

.badge_concurrence {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.badge_concurrence .material-symbols-outlined {
    font-size: 0.95rem;
}

/* Cas 1 : Seul sur le secteur (Vert LIVE lumineux) */
.badge_concurrence.seul {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

/* Cas 2 : Moins de 4 installateurs (Cyan opportunité) */
.badge_concurrence.opportunite {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: #06b6d4;
}

/* Badge d'en-tête global à côté du titre Mes Secteurs */
.badge_concurrence_entete {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.75rem;
    vertical-align: middle;
}

/* ==========================================================================
   22/10/2026 00:44 (Claude, Dialogue MBR n° 990, n° 992 et n° 993 de JaxX) :
   CONCURRENCE DU SECTEUR, un seul badge en bas à gauche de la carte Mes Secteurs
   (liste des départements à moins de 4 autres installateurs au-dessus), verre fumé,
   thème clair / sombre, puis remise en ordre du bloc Mes Secteurs — A VALIDER PAR JaxX
   Les classes .badge_concurrence* ci-dessus (Antigravity, 00:25) ne sont plus utilisées.
   ========================================================================== */

/* Règle sortie du gabarit (ancienne balise <style> de la vue) */
#sectors_edit_tags:empty
{
    display: none !important;
}

/* Zone superposée à la carte, en bas à gauche */
.zone_concurrence_secteur
{
    /* 22/10/2026 01:00 (Claude, n° 1001) : plus superposée à la carte, placée en bas de la colonne gauche
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 3;
    */
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    /* max-width: calc(100% - 3rem); 22/10/2026 01:00 (Claude, n° 1001) */
    max-width: 100%;
}

.zone_concurrence_secteur:empty
{
    display: none;
}

/* Liste discrète des départements à moins de 4 autres installateurs (n° 993) */
.liste_concurrence_departements
{
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    color: #e2e8f0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)) , rgba(15, 23, 42, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.liste_concurrence_departements .code_departement
{
    color: var(--cyan-accent);
    font-weight: 800;
}

/* Badge principal : vrai lien vers la MarketPlace filtrée sur Mes secteurs (n° 992) */
.badge_concurrence_secteur
{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.badge_concurrence_secteur:hover,
.badge_concurrence_secteur:focus-visible
{
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.badge_concurrence_secteur .material-symbols-outlined
{
    font-size: 1.05rem;
}

/* Seul sur vos secteurs : vert du badge LIVE */
.badge_concurrence_secteur.est_seul
{
    color: #4ade80;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.22), rgba(255, 255, 255, 0)) , rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(74, 222, 128, 0.45);
}

/* 1 à 3 autres installateurs : badge standard cyan */
.badge_concurrence_secteur.peu_de_concurrents
{
    color: var(--cyan-accent);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(255, 255, 255, 0)) , rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(34, 211, 238, 0.4);
}

/* Thème clair */
html.bright_mode .liste_concurrence_departements
{
    color: var(--text_primary);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--border_subtle);
    box-shadow: var(--box-shadow-card);
}

html.bright_mode .liste_concurrence_departements .code_departement
{
    color: var(--mbr-cyan);
}

html.bright_mode .badge_concurrence_secteur
{
    box-shadow: var(--box-shadow-card);
}

html.bright_mode .badge_concurrence_secteur.est_seul
{
    color: #15803d;
    background: #dcfce7;
    border: 1px solid rgba(21, 128, 61, 0.35);
}

html.bright_mode .badge_concurrence_secteur.peu_de_concurrents
{
    color: var(--mbr-cyan);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(8, 145, 178, 0.35);
}

/* Repli opaque : navigateur sans backdrop-filter ou visiteur qui demande moins de transparence */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
    .liste_concurrence_departements,
    .badge_concurrence_secteur.est_seul,
    .badge_concurrence_secteur.peu_de_concurrents
    {
        background: #0f172a;
    }
}

@media (prefers-reduced-transparency: reduce)
{
    .liste_concurrence_departements,
    .badge_concurrence_secteur.est_seul,
    .badge_concurrence_secteur.peu_de_concurrents
    {
        background: #0f172a;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    html.bright_mode .liste_concurrence_departements,
    html.bright_mode .badge_concurrence_secteur.peu_de_concurrents
    {
        background: #ffffff;
    }

    html.bright_mode .badge_concurrence_secteur.est_seul
    {
        background: #dcfce7;
    }
}

/* 22/10/2026 00:54 (Claude, Dialogue MBR n° 997 de JaxX) : bulle du nombre d'installateurs (vous compris) dans
   chaque gélule, du vert (1, seul) au bleu (4+), lien discret et légende — A VALIDER PAR JaxX */
.bulle_concurrence
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.35rem;
    margin-left: 0.15rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    border: 1px solid transparent;
}

.bulle_concurrence.niveau_1
{
    color: #052e16;
    background: #4ade80;
}

.bulle_concurrence.niveau_2
{
    color: #042f2e;
    background: #2dd4bf;
}

.bulle_concurrence.niveau_3
{
    color: #083344;
    background: #22d3ee;
}

.bulle_concurrence.niveau_4
{
    color: #ffffff;
    background: #3b82f6;
}

html.bright_mode .bulle_concurrence.niveau_1
{
    color: #15803d;
    background: #dcfce7;
    border-color: rgba(21, 128, 61, 0.35);
}

html.bright_mode .bulle_concurrence.niveau_2
{
    color: #0f766e;
    background: #ccfbf1;
    border-color: rgba(15, 118, 110, 0.35);
}

html.bright_mode .bulle_concurrence.niveau_3
{
    color: #0e7490;
    background: #cffafe;
    border-color: rgba(14, 116, 144, 0.35);
}

html.bright_mode .bulle_concurrence.niveau_4
{
    color: #1d4ed8;
    background: #dbeafe;
    border-color: rgba(29, 78, 216, 0.35);
}

.legende_bulle_concurrence
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.4;
}

.legende_bulle_concurrence .bulle_concurrence
{
    flex: 0 0 auto;
    margin-left: 0;
}

/* Légende masquée tant qu'aucune gélule n'a de bulle */
#summary_sectors_badges:not(:has(.bulle_concurrence)) + .legende_bulle_concurrence
{
    display: none;
}

/* 22/10/2026 01:00 (Claude, Dialogue MBR n° 1001 de JaxX) : bloc légende + badge en bas de la colonne gauche de
   Mes Secteurs, séparé des gélules par un filet ; marges des gélules avec bulle — A VALIDER PAR JaxX */
.bloc_concurrence_secteur
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

html.bright_mode .bloc_concurrence_secteur
{
    border-top: 1px solid var(--border_subtle);
}

#summary_sectors_badges:not(:has(.bulle_concurrence)) + .bloc_concurrence_secteur .legende_bulle_concurrence
{
    display: none;
}

.bloc_concurrence_secteur:not(:has(.bulle_concurrence, .badge_concurrence_secteur))
{
    display: none;
}

.legende_bulle_concurrence
{
    align-items: flex-start;
}

.legende_bulle_concurrence .bulle_concurrence
{
    margin-top: 0.05rem;
}

/* Gélule avec bulle : bulle détachée du texte, marge droite réduite pour garder la gélule équilibrée */
#summary_sectors_badges .sector_badge:has(.bulle_concurrence)
{
    padding: 4px 5px 4px 14px;
    gap: 0;
}

#summary_sectors_badges .sector_badge .bulle_concurrence
{
    margin-left: 0.45rem;
}

/* Badge dans la colonne : jamais plus large que la colonne, texte qui passe à la ligne au besoin */
.bloc_concurrence_secteur .badge_concurrence_secteur
{
    max-width: 100%;
    white-space: normal;
}

/* 4 installateurs ou plus partout : lien discret vers la MarketPlace, sans mention de concurrence */
.badge_concurrence_secteur.lien_discret
{
    color: #e2e8f0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) , rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-weight: 600;
}

html.bright_mode .badge_concurrence_secteur.lien_discret
{
    color: var(--text_primary);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--border_subtle);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
    .badge_concurrence_secteur.lien_discret
    {
        background: #0f172a;
    }
}

@media (prefers-reduced-transparency: reduce)
{
    .badge_concurrence_secteur.lien_discret
    {
        background: #0f172a;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    html.bright_mode .badge_concurrence_secteur.lien_discret
    {
        background: #ffffff;
    }
}

/* Le signal de couverture passe en haut à gauche de la carte pour laisser le bas au badge */
/* 22/10/2026 01:00 (Claude, Dialogue MBR n° 1001) : le badge quitte la carte, le signal de couverture retrouve sa place
   d'origine (en bas à droite) ; règle mise en commentaire — A VALIDER PAR JaxX
#section_sectors.sectors_full_height_map .signal_couverture
{
    top: 1.5rem;
    left: 1.5rem;
    right: auto;
    bottom: auto;
}
*/

/* Remise en ordre du bloc Mes Secteurs (n° 990) : une seule marge intérieure, espacements réguliers */
#section_sectors.sectors_full_height_map .section_title
{
    margin-bottom: 1rem;
}

div#sectors_summary_panel .sectors_text_col
{
    /* padding: 0; 22/10/2026 01:00 (Claude, n° 1001 « Attention au padding ») : le panneau résumé a padding 0
       (règle à deux id plus haut), cette colonne porte donc seule la marge, alignée sur celle du titre (2.5rem) */
    padding: 0 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 22/10/2026 06:28 (Claude MONSTERJaxX #4, Dialogue MBR n° 1155 / 1156 de JaxX) : sur ordinateur, la légende des bulles
   et le badge de concurrence passent en bas du bloc Mes Secteurs : le résumé et sa colonne prennent toute la hauteur
   de la section et le bloc concurrence est poussé en bas. Tablette et téléphone inchangés — A VALIDER PAR JaxX */
@media (min-width: 901px)
{
    #section_sectors.sectors_full_height_map #sectors_summary_panel
    {
        display: flex;
        flex-direction: column;
    }

    #section_sectors.sectors_full_height_map #sectors_summary_panel .sectors_text_col
    {
        flex: 1 1 auto;
    }

    #section_sectors.sectors_full_height_map .bloc_concurrence_secteur
    {
        margin-top: auto;
    }
}

#section_sectors .sectors_text_col .sectors_badges
{
    margin-top: 0;
}

#section_sectors .sectors_text_col .message-vide-centre
{
    text-align: left;
    padding: 0;
}

#sectors_edit_panel.panneau-edition-marge
{
    margin-top: 0;
    padding-top: 0;
}

#sectors_edit_panel .form_grid
{
    gap: 1.25rem;
}

#sectors_edit_panel .input_group label
{
    display: block;
    margin-bottom: 0.5rem;
}

#sectors_edit_panel .tags-edition-flex
{
    margin-top: 0;
}

#sectors_edit_panel .erreur-champ
{
    margin-top: 0.5rem;
}

#sectors_edit_panel .actions-formulaire-simple
{
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

html.bright_mode #sectors_edit_panel .actions-formulaire-simple
{
    border-top: 1px solid var(--border_subtle);
}

@media (max-width: 900px)
{
    /* 22/10/2026 01:00 (Claude, n° 1001) : badge plus sur la carte, signal de couverture à sa place d'origine
    .zone_concurrence_secteur
    {
        left: 1rem;
        bottom: 1rem;
        max-width: calc(100% - 2rem);
    }

    #section_sectors.sectors_full_height_map .signal_couverture
    {
        top: 1rem;
        left: 1rem;
    }
    */

    /* 22/10/2026 01:00 (Claude, n° 1001) : même marge que le titre en tablette et mobile (1.5rem) */
    div#sectors_summary_panel .sectors_text_col
    {
        padding: 0 1.5rem 1.5rem;
    }
}

@media (max-width: 450px)
{
    .badge_concurrence_secteur
    {
        font-size: 0.75rem;
        padding: 0.5rem 0.85rem;
    }

    #sectors_edit_panel .ligne-ajout-inline
    {
        flex-wrap: wrap;
    }

    #sectors_edit_panel .ligne-ajout-inline .champ-flex
    {
        flex: 1 1 100%;
    }

    #sectors_edit_panel .ligne-ajout-inline .btn-ajout-compact,
    #sectors_edit_panel .actions-formulaire-simple button
    {
        flex: 1 1 auto;
        justify-content: center;
    }
}