/* ==========================================================================
   Les styles d'écran — ce que portaient les blocs <style> des gabarits
   (lot 5 de doc/plans/PLAN-css-tout-dans-le-kit.md, 30/09/2026).

   COMMENT ÇA MARCHE. Chaque bloc <style> d'un gabarit est devenu une section de ce fichier,
   et le gabarit garde à sa place un simple marqueur :
       <meta data-al-screen="clé">                  dans l'en-tête d'une page
       <span data-al-screen="clé" hidden></span>    dans un fragment chargé à la demande
   La section ne s'applique que si le marqueur est dans la page —
       :where(:root:has([data-al-screen="clé"])) { … }
   — exactement comme le bloc <style> ne s'appliquait que lorsque son gabarit était affiché.
   :where() ne pèse rien : chaque règle garde la spécificité qu'elle avait. Les règles sont
   reprises telles quelles, dans leur ordre ; deux gabarits au même CSS partagent une section.

   OÙ ÇA SE CHARGE. En dernier, après les feuilles que la page ajoute elle-même : un bloc
   <style> passait après toutes les feuilles liées. Ordre des sections : pages, gabarits
   (layouts), fragments — celui dans lequel les blocs arrivaient dans le document.

   RIEN NE S'AJOUTE ICI. Un écran retravaillé passe aux composants et aux utilitaires de
   al-kit.css ; sa section et son marqueur disparaissent alors ensemble.
   Hors périmètre, gardés dans leur gabarit : les PDF (wkhtmltopdf), les e-mails et l'export
   d'archive de la messagerie, qui doivent porter leur style eux-mêmes.
   ========================================================================== */

/* L'anneau d'attente de la visionneuse d'annotation (style en ligne de DocumentBundle/Annotation/index) */
@keyframes al-viewer-spin { to { transform: rotate(360deg); } }

/* --- app-project-view-index (page) --------------------------------------------
   src/AppBundle/Resources/views/Project/View/index.html.twig */
:where(:root:has([data-al-screen="app-project-view-index"])) {
    /* ############  */
    /* ### Div ####  */
    /* ############  */
    & .project-header {
        display: inline-flex;
        align-items: baseline;
    }

    & #projectNameWrapper,
    & #projectShortNameWrapper {
        display: inline-flex;
        align-items: baseline;
    }

    & #projectNameWrapper {
        margin-right: 1rem; /* Espace entre les deux blocs */
    }

    & #projectNameWrapper i,
    & #projectShortNameWrapper i {
        margin-left: 0.5rem;
    }

    & #project-name,
    & #project-shortName {
        margin: 0;
        padding: 0;
        line-height: 1;
    }
    & #project-name {
        font-size: 200%;
    }

    & #projectFullAddressWrapper,
    & #projectDescriptionWrapper {
        display: inline-flex;
        align-items: center;
        vertical-align: bottom;
    }

    & #project-description {
        text-align: justify;
        white-space: pre-wrap;
    }
    & #projectDescriptionEditor, & #projectDescriptionWrapper{
        height: 100%;
        min-height: 150px;
    }
    & #project-fullAddress {
        font-size: 150%;
    }

    /* ############  */
    /* ### Bloc ###  */
    /* ############  */
    & .stats > div:first-child,
    & .stats > div:last-child {
        border-right-width: 0;
        border-left-width: 0;
    }

    & .stats .stat-value {
        font-size: 300%;
    }

    /* ############  */
    /* ### Tabs ###  */
    /* ############  */
    & #loadProjectDataTabs .dx-multiview-wrapper {
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    & #loadProjectDataTabs .tab-panel-title {
        font-size: 120%;
        font-weight: 500;
    }

    & #loadProjectDataTabs .dx-multiview-item-content {
        padding: 20px 0 22px;
        min-height: 178px;
        position: relative;
    }

    & #loadProjectDataTabs .right-content {
        top: 15px;
        left: 202px;
    }

    & #loadProjectDataTabs .stats {
        width: 398px;
        border-top: 1px solid rgba(191, 191, 191, 0.25);
    }

    & #loadProjectDataTabs .stats > div {
        padding: 7px 0;
        text-align: left;
        border: 0;
    }

    & #loadProjectDataTabs .stats > div:first-child {
        width: 40%;
    }

    & #loadProjectDataTabs .stats > div:not(:first-child) {
        width: 30%;
    }

    & .dx-tabpanel .dx-tabs .dx-tabs-scrollable {
        display: flex !important;
        width: 100% !important;
    }

    /* Forcer le conteneur nav-container à prendre toute la place et à ne pas replier */
    & .dx-tabpanel .dx-tabs .dx-tabs-nav-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    /* Chaque onglet doit s’étendre également (flex:1) et centrer son contenu */
    & .dx-tabpanel .dx-tabs .dx-tab {
        flex: 1 1 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* ################  */
    /* ### TreeView ###  */
    /* ################  */
    & #treeview .dx-treeview-node.dx-state-selected > .dx-item > .dx-item-content {
        font-weight: 500;
    }

    /* #############  */
    /* ### Image ###  */
    /* #############  */
    & .project-image-container {
        position: relative;
        display: inline-block; /* ou block selon votre mise en page */
        /* Optionnel : définir une largeur si nécessaire */
        /* width: 300px; */
    }

    /* L'image se comporte comme d'habitude */
    & .project-picture {
        display: block;
        width: 100%;
        border: 1px solid rgba(191, 191, 191, 0.25);
        text-align: center;
    }

    /* Overlay recouvrant toute la surface de l'image */
    & .image-overlay {
        position: absolute;
        top: 0; left: 0;
        right: 0; bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);  /* Fond noir translucide */
        opacity: 0;                           /* Par défaut masqué */
        transition: opacity 0.3s ease;        /* Transition pour l'effet de fade */
    }

    /* Afficher l'overlay lors du survol du conteneur */
    & .project-image-container:hover .image-overlay {
        opacity: 1;
    }

    /* Style de l'icône d'édition */
    & .edit-link {
        display: inline-block;
        width: 100%;
        height: 100%;
        text-decoration: none;  /* Supprime le soulignement */
    }

    /* Centrer l'icône dans l'overlay */
    & .image-overlay i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem;  /* Ajustez selon vos besoins */
        color: #fff;
    }

    & .dx-tag-disabled {
        pointer-events: none;
    }
}

/* --- document-document-user-index (page) --------------------------------------
   src/DocumentBundle/Resources/views/DocumentUser/index.html.twig
   src/DocumentBundle/Resources/views/DocumentCompany/index.html.twig */
:where(:root:has([data-al-screen="document-document-user-index"])) {
    & .label {
        font-size: 10px !important;
    }

    /* === Colonnes document (Nom, Type, etc.) === */
    & .doc-column {
        background-color: #f4f4f4;
        font-size: 10px;
    }
    & .doc-column-bold {
        background-color: #f4f4f4;
        font-weight: bold;

    }
    & .cell-missing { background:#fff1f2; }

    & .visa-col-first {
        border-left: 2px solid #999 !important;
    }

    & td.visa-group-header {
        border-left: 2px solid #999 !important;
    }

    & td.visa-group-last {
        border-right: 2px solid #999 !important;
    }

    /* Idem pour les lignes de données */
    & td.visa-column-0 {
        border-left: 2px solid #999 !important;
    }
    & td.visa-column-last {
        border-right: 2px solid #999 !important;
    }

    & .dx-group-row {
        background-color: #F0F4F8 !important;
        color: #666 !important;
    }

    & .dx-group-row .dx-datagrid-group-closed,
    & .dx-group-row .dx-datagrid-group-opened {
        color: white !important;
    }

    & .dx-datagrid-headers .dx-header-row td.hdr-stacked {
        font-size: 12px;
        text-align: center;
    }

    /* wrapper vertical : texte en haut, icônes en bas */
    & .dx-datagrid-headers .dx-header-row td.hdr-stacked .hdrs-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;     /* centre horizontalement */
        justify-content: center; /* centre verticalement ; mets flex-start / flex-end si besoin */
        height: 100%;
        line-height: 1.1;
    }

    /* barre d'icônes */
    & .dx-datagrid-headers .dx-header-row td.hdr-stacked .hdrs-icons {
        display: flex;
        gap: 8px;
        margin-top: 4px;
    }

    /* déplacer/neutraliser le positionnement par défaut des indicateurs */
    & .dx-datagrid-headers .dx-header-row td.hdr-stacked .hdrs-icons .dx-column-indicators {
        float: none !important;
        position: static !important;
        display: flex;
        gap: 8px;
    }

    /* et, par sécurité, remettre les éléments internes au flux */
    & .dx-datagrid-headers .dx-header-row td.hdr-stacked .hdrs-icons .dx-header-filter,
    & .dx-datagrid-headers .dx-header-row td.hdr-stacked .hdrs-icons .dx-sort,
    & .dx-datagrid-headers .dx-header-row td.hdr-stacked .hdrs-icons .dx-sort-indicator {
        position: static !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0;
    }

    /* Toujours visibles, même sans hover */
    & .dx-scrollbar-hoverable { opacity: 1 !important; }

    /* ===== Horizontal ===== */
    & .dx-datagrid .dx-scrollbar-horizontal .dx-scrollable-scroll-content {
        background-color: rgb(24, 104, 108, 0.25) !important;
    }

    & .dx-datagrid .dx-scrollbar-horizontal {
        height: 12px !important;                       /* épaisseur de la barre horizontale */
        background-color: rgb(24, 104, 108, 0.25) !important;
    }
    & .dx-datagrid .dx-scrollbar-horizontal .dx-scrollable-scroll {
        height: 100% !important;                       /* fait “remplir” le thumb la hauteur */
        background-color: rgb(24, 104, 108, 0.50) !important;         /* thumb */
    }

    & .dx-datagrid .dx-scrollbar-hoverable.dx-scrollable-scrollbar-active,
    & .dx-scrollbar-hoverable.dx-state-hover {
        background-color: rgb(24, 104, 108, 0.25) !important;
    }
    & .dx-scrollbar-hoverable.dx-scrollable-scrollbar-active .dx-scrollable-scroll-content {
        background-color: #bfbfbf;
    }

    & #muTabs .dx-tabpanel-container .dx-multiview-item {
        padding: 12px 16px;
        box-sizing: border-box; /* évite de déborder */
    }

    /* Autoriser les retours à la ligne et uniformiser l'espacement global */
    & #documentGridContainer .dx-toolbar .dx-toolbar-items-container {
        flex-wrap: wrap;
        gap: 8px;                /* (violet) espacement horizontal/vertical uniforme */
        overflow: visible;
    }

    /* Groupes label+contrôle (orange & vert) : restent sur une seule ligne */
    & #documentGridContainer .ald-nowrap-group {
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;     /* no-wrap */
    }

    /* Bloc d'actions : boutons “stackables” */
    & #documentGridContainer .ald-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Par défaut: largeur auto, mais avec un minimum confortable */
    & #documentGridContainer .ald-stack .dx-button {
        min-width: 200px;
        flex: 0 0 auto;
    }

    /* Quand la toolbar devient étroite, on bascule chaque bouton à 100% */
    @media (max-width: 1024px) {
        & #documentGridContainer .ald-stack .dx-button {
            flex: 1 1 100%;
        }
    }

    /* Espaces visuels (violet) entre groupes */
    & #documentGridContainer .ald-gap-16 {
        width: 16px;
        height: 1px;
    }

    /* Optionnel: largeur du champ de recherche (placé en 'after') */
    & #documentGridContainer .ald-search .dx-texteditor {
        width: 320px;
    }

    & .visa-badge {
        display:inline-block;
        min-width: 34px;           /* assez large pour VAOB */
        padding: 2px 8px;
        border-radius: 4px;
        color:#fff;
        font-weight:600;
        text-align:center;
        line-height: 1.3;
        margin-right: 8px;
    }

    & .visa-option {               /* rangée dans la liste déroulante */
        display:flex;
        align-items:center;
        gap:8px;
    }

    /* Valeur affichée dans le champ (sélectionné) */
    & .visa-field {
        display:flex;
        align-items:center;
        gap:8px;
    }
}

/* --- report-report-index (page) -----------------------------------------------
   src/ReportBundle/Resources/views/Report/index.html.twig */
:where(:root:has([data-al-screen="report-report-index"])) {
    & .menu-link {
        text-decoration: none;      /* pas de soulignement */
        padding: 10px;          /* un peu de marge interne */
        border-radius: 4px;        /* arrondi des angles */
        transition: background-color 0.2s; /* animation fluide */
    }
    & .menu-link:hover {
        background-color: #fff; /* couleur de fond au survol */
        text-decoration: none;     /* pas de soulignement au survol */
    }

    & .owner-popup .dx-field-item-label {
        width: 40% !important;
        max-width: 40%;
        text-align: right; /* Facultatif : aligne le texte du label à droite */
        margin-right: 8px; /* Espace entre le label et le champ */
    }
    & .owner-popup .dx-field-item-content {
        width: 60% !important;
        max-width: 60%;
    }

    /* Cartes des CR en cours de rédaction — la carte « dossier ».
       Le dessin vient du kit (`al-card`, `al-accent`, `al-btn`, `al-badge`) ; il ne reste
       ici que ce qui appartient à CET écran : trois colonnes, et l'agencement interne
       en-tête / corps / pied. */
    & .editable-reports-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
    & .editable-report-card {
        flex: 0 0 calc(33.333% - 12px);
        min-width: 300px;
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
    }
    /* `overflow: hidden` couperait l'angle du kit : il se pose sur l'en-tête, qui vit
       dans la carte, plutôt que sur la carte elle-même. */
    & .editable-report-card.al-accent::before {
        z-index: 1;
    }
    & .editable-report-card-head {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px 12px;
        background: var(--al-surface-container-low);
        border-bottom: 1px solid var(--al-form-card-border);
    }
    & .editable-report-card-number {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.1;
    }
    & .editable-report-card-context {
        font-size: 12px;
        color: var(--al-on-surface-variant);
        margin-top: 2px;
    }
    & .editable-report-card-body {
        padding: 12px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    & .editable-report-card-people {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        min-width: 0;
    }
    & .editable-report-card-role {
        flex: 0 0 auto;
        width: 96px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--al-form-muted);
    }
    /* Une personne se reconnaît d'abord à sa pastille : deux lettres, pas un trombinoscope. */
    & .editable-report-card-avatar {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        border-radius: var(--al-radius-full);
        background: var(--al-primary);
        color: var(--al-on-primary);
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    & .editable-report-card-avatar.second {
        background: var(--al-surface-container-high);
        color: var(--al-on-surface-variant);
    }
    & .editable-report-card-muted {
        color: var(--al-on-surface-variant);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    & .editable-report-card-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: auto;
        padding: 8px 12px;
        border-top: 1px solid var(--al-form-card-border);
    }
    @media (max-width: 992px) {
        & .editable-report-card {
            flex: 0 0 100%;
        }
    }
}

/* --- volume-file-manager-index (page) -----------------------------------------
   src/VolumeBundle/Resources/views/FileManager/index.html.twig */
:where(:root:has([data-al-screen="volume-file-manager-index"])) {
    & .photo-popup-content {
        text-align: center;
    }

    & .photo-popup-content .photo-popup-image {
        height: 100%;
        max-width: 100%;
    }

    & #fileManagerContainer {
        position: relative;
        height: 85vh;
        display: flex;
        flex-direction: column;
    }

    & .fm-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.75);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    & .fm-overlay i {
        font-size: 2.5rem;
        color: #555;
        margin-bottom: 12px;
    }

    & .fm-overlay span {
        font-size: 1rem;
        color: #333;
        font-weight: 500;
    }

    & .dx-treeview-node > div.dx-item .dx-icon.dx-icon-folder::before{
        content: "\f105" !important;
        color: #fea612;
    }

    & .dx-treeview-node.dx-treeview-node-is-leaf > div.dx-item .dx-icon.dx-icon-folder::before {
        content: "\f105" !important;
        color: #fea612;
    }

    & .dx-filemanager-details-item-is-directory > .dx-icon.dx-icon-folder.dx-filemanager-details-item-thumbnail:before {
        content: "\f028" !important;
        color: #fea612;
    }

    & .dx-treeview-node:has(>div>div.dx-treeview-toggle-item-visibility-opened) > div.dx-item .dx-icon.dx-icon-folder::before {
        content: "\f028" !important;
        color: #fea612;
    }

    & .dx-icon-arrowup:before {
        content: "\f011" !important;
    }

    & #form-container .dx-form-group-content{
        border-top: none;
    }

    & .dx-menu-base .dx-menu-item .dx-menu-item-content .dx-menu-item-text {
        padding-top: 10px;
    }

    & .dx-accordion-item {
        border: 1px solid #ddd !important;
    }

    & .dx-accordion-item-body {
        padding-bottom: 5px !important;
    }
}

/* --- user-two-factor-enable (page) --------------------------------------------
   src/UserBundle/Resources/views/TwoFactor/enable.html.twig */
:where(:root:has([data-al-screen="user-two-factor-enable"])) {
    & .qr-code-container {
        text-align: center;
        padding: 20px;
        background: #f5f5f5;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    & .qr-code-container canvas {
        max-width: 200px;
        height: auto;
    }
    & .secret-key {
        font-family: monospace;
        background: #e0e0e0;
        padding: 10px;
        border-radius: 4px;
        word-break: break-all;
        font-size: 14px;
    }
    & .step-number {
        display: inline-block;
        width: 30px;
        height: 30px;
        background: #23989e;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        margin-right: 10px;
        font-weight: bold;
    }
}

/* --- punch-punch-visit-index (page) -------------------------------------------
   src/PunchBundle/Resources/views/PunchVisit/index.html.twig */
:where(:root:has([data-al-screen="punch-punch-visit-index"])) {
    & .preview-link {
        color: #007bff !important;           /* la couleur du lien */
        text-decoration: none;
        border: 0 !important;
        /* pas de border, pas de padding, c’est du texte inline pur */
    }
    & .preview-link:hover {
        color: #0056b3 !important;
    }

    & .popup-gallery .dx-gallery-item-content {
        display:        flex !important;
        align-items:     flex-start !important; /* colle en haut */
    }

    /* 2) S'assure que l'image occupe 90% de la largeur et pas de margin parasites */
    & .popup-gallery .dx-gallery-item-content img {
        width:       800px !important;
        height:      auto !important;
        max-width:   none  !important; /* si vous aviez fixé un maxWidth en JS */
        max-height:  none  !important;
        margin-left: auto;     /* on contrôle la largeur uniquement */
        margin-right: auto;     /* on contrôle la largeur uniquement */
    }
}

/* --- user-two-factor-backup-codes (page) --------------------------------------
   src/UserBundle/Resources/views/TwoFactor/backup_codes.html.twig */
:where(:root:has([data-al-screen="user-two-factor-backup-codes"])) {
    & .backup-codes-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        max-width: 400px;
        margin: 20px 0;
    }
    & .backup-code {
        background: #f5f5f5;
        padding: 12px;
        font-size: 16px;
        font-family: monospace;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
    @media print {
        & .no-print {
            display: none !important;
        }
        & .backup-codes-container {
            max-width: 100%;
        }
    }
}

/* --- report-report-build (page) -----------------------------------------------
   src/ReportBundle/Resources/views/Report/build.html.twig */
:where(:root:has([data-al-screen="report-report-build"])) {
    & .col-reportElement{
        border-left: 1px solid #CCC;
        border-top: 0;
    }

    @media (max-width: 992px) {
        & .col-reportElement{
            border-left: 0;
            border-top: 1px solid #CCC;
        }
    }
    & .cercle {
        line-height: 26px;
        width: 25px;
        height: 25px;
    }
}

/* --- postit-index (page) ------------------------------------------------------
   src/PostitBundle/Resources/views/index.html.twig */
:where(:root:has([data-al-screen="postit-index"])) {
    & .popup-gallery .dx-gallery-item-content {
        display:        flex !important;
        align-items:     flex-start !important; /* colle en haut */
    }

    /* 2) S'assure que l'image occupe 90% de la largeur et pas de margin parasites */
    & .popup-gallery .dx-gallery-item-content img {
        width:       800px !important;
        height:      auto !important;
        max-width:   none  !important; /* si vous aviez fixé un maxWidth en JS */
        max-height:  none  !important;
        margin-left: auto;     /* on contrôle la largeur uniquement */
        margin-right: auto;     /* on contrôle la largeur uniquement */
    }
}

/* --- user-signature-edit (page) -----------------------------------------------
   src/UserBundle/Resources/views/Signature/edit.html.twig
   src/AppBundle/Resources/views/Project/Image/index.html.twig */
:where(:root:has([data-al-screen="user-signature-edit"])) {
    & canvas {
        width: 100%;
    }
}

/* --- document-admin-document-checker-index (page) -----------------------------
   src/DocumentBundle/Resources/views/Admin/DocumentChecker/index.html.twig */
:where(:root:has([data-al-screen="document-admin-document-checker-index"])) {
    & .qq-uploader {
        min-height: 200px
    }
}

/* --- app-admin-project-view (page) --------------------------------------------
   src/AppBundle/Resources/views/Admin/Project/view.html.twig */
:where(:root:has([data-al-screen="app-admin-project-view"])) {
    & .dx-multiview-item-container {
        padding: 20px;
    }
}

/* --- calendar-index (page) ----------------------------------------------------
   src/CalendarBundle/Resources/views/index.html.twig */
:where(:root:has([data-al-screen="calendar-index"])) {
    & .tab-pane{min-height: 80px;}
}

/* --- layout-front (gabarit) ---------------------------------------------------
   app/Resources/views/front.html.twig */
:where(:root:has([data-al-screen="layout-front"])) {
    & * {box-sizing: border-box;}

    & body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }

    & .header {
        overflow: hidden;
        background-color: var(--ald-bg-menu);
        padding: 20px 10px;
    }

    & .header a {
        color: black;
        text-align: center;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        line-height: 25px;
        border-radius: 4px;
    }

    & .header .logo {
        font-size: 25px;
        font-weight: bold;
        text-align: center;
    }

    & .header-right {
        float: right;
    }

    @media screen and (max-width: 500px) {
        & .header a {
            float: none;
            display: block;
            text-align: left;
        }

        & .header-right {
            float: none;
        }
    }

    & .card {
        margin-top: 50px;
    }

    & .wrapper {
        margin-right: auto; /* 1 */
        margin-left:  auto; /* 1 */
        max-width: 100%; /* 2 */
        height: initial;
        padding-right: 10px; /* 3 */
        padding-left:  10px; /* 3 */
    }

    & .navbar-footer {
        background-color: #212121 !important;
        color: #FFFFFF;
        display: block;
    }

    & h1 {
        font-size: 2.3125rem;
    }
}

/* --- layout-user-space (gabarit) ----------------------------------------------
   app/Resources/views/userSpace.html.twig */
:where(:root:has([data-al-screen="layout-user-space"])) {
    & .navbar-footer {
        background-color: #212121 !important;
        color: #FFFFFF;
        display: block;
        border-radius: 0;
        padding-right: 20px;
    }
}

/* --- layout-project (gabarit) -------------------------------------------------
   app/Resources/views/project.html.twig */
:where(:root:has([data-al-screen="layout-project"])) {
    & .navbar-footer {
        background-color: #212121 !important;
        color: #FFFFFF;
        display: block;
    }
}

/* --- layout-administration (gabarit) ------------------------------------------
   app/Resources/views/administration.html.twig */
:where(:root:has([data-al-screen="layout-administration"])) {
    & .navbar-footer {
        background-color: #212121 !important;
        color: #FFFFFF;
        display: block;
        border-radius: 0;
        padding-right: 20px;
    }
}

/* --- punch-punch-visit-map-view (fragment) ------------------------------------
   src/PunchBundle/Resources/views/PunchVisitMap/view.html.twig */
:where(:root:has([data-al-screen="punch-punch-visit-map-view"])) {
    & .markerClass{
        box-shadow: 2px 2px 2px #666666;
    }

    & .markerClass div{
        margin-top: 5px !important;
    }

    & fieldset {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: block;
        border: none;
        min-width: 0;
        background-color: #fff;
    }
    & fieldset legend {
        margin: 0 0 1.5rem;
        padding: 0;
        width: 100%;
        float: left;
        display: table;
        font-size: 1rem;
        text-transform: uppercase;
        line-height: 140%;
        font-weight: 600;
        color: #333;
    }
    & fieldset legend + * {
        clear: both;
    }
    & body:not(:-moz-handler-blocked) fieldset {
        display: table-cell;
    }
    /* TOGGLE STYLING */
    & .toggle {
        margin: 0 0 1.5rem;
        box-sizing: border-box;
        font-size: 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: stretch;
    }
    & .toggle input {
        width: 0;
        height: 0;
        position: absolute;
        left: -9999px;
    }
    & .toggle input + label {
        margin: 0;
        padding: 0.5rem 1rem;
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        border: solid 1px #ddd;
        background-color: #fff;
        line-height: 140%;
        font-size: 0.8rem;
        font-weight: normal;
        text-align: center;
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
        /* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
        /*flex: 0 0 50%;
         display: flex;
         justify-content: center;
         align-items: center;
        */
        /* ----- */
    }
    & .toggle input + label:first-of-type {
        border-radius: 6px 0 0 6px;
        border-right: none;
    }
    & .toggle input + label:last-of-type {
        border-radius: 0 6px 6px 0;
        border-left: none;
    }
    & .toggle input:hover + label {
        border-color: #213140;
    }
    & .toggle input:checked + label {
        background-color: #23898e;
        color: #fff;
        border-color: #23898e;
        z-index: 1;
    }
    & .toggle input:focus + label {
        outline: dotted 1px #ccc;
        outline-offset: 0.45rem;
    }
    @media (max-width: 800px) {
        & .toggle input + label {
            padding: 0.75rem 0.25rem;
            flex: 0 0 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    /* STYLING FOR THE STATUS HELPER TEXT FOR THE DEMO */
    & .status {
        margin: 0;
        font-size: 1rem;
        font-weight: 400;
    }
    & .status span {
        font-weight: 600;
        color: #b6985a;
    }
    & .status span:first-of-type {
        display: inline;
    }
    & .status span:last-of-type {
        display: none;
    }
    @media (max-width: 800px) {
        & .status span:first-of-type {
            display: none;
        }
        & .status span:last-of-type {
            display: inline;
        }
    }
}

/* --- app-project-content-chapter-title-index (fragment) -----------------------
   src/AppBundle/Resources/views/Project/ContentChapterTitle/index.html.twig */
:where(:root:has([data-al-screen="app-project-content-chapter-title-index"])) {
    /* Ligne de la dxList (chapitre / sous-chapitre) */
    & .ald-list-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
    }

    /* Titre du chapitre */
    & .ald-list-title {
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Zone actions (icônes édition / suppression) */
    & .ald-list-actions {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
    }

    /* Pour que la liste prenne bien toute la largeur dans le bloc */
    & #chapterList .dx-list,
    & #subChapterList .dx-list {
        border: none;
    }

    /* Optionnel : un petit fond alterné est déjà géré par rowAlternationEnabled,
       mais si tu veux renforcer la séparation entre les items : */
    & #chapterList .dx-list-item,
    & #subChapterList .dx-list-item {
        border-bottom: 1px solid #f1f1f1;
    }

    & #chapterList .dx-list-item:last-child,
    & #subChapterList .dx-list-item:last-child {
        border-bottom: none;
    }

    /* Styles communs aux listes disponibles et sélectionnées */
    & #chapterList .dx-list-item,
    & #subChapterList .dx-list-item {
        background: var(--ald-bg);
        border: 1px solid var(--ald-border);
        border-radius: var(--ald-radius);
        margin-bottom: var(--ald-margin);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
        cursor: grab;
    }
    & #chapterList .dx-list-item:active,
    & #subChapterList .dx-list-item:active {
        cursor: grabbing;
    }

    /* Effet au survol pour plus de feedback visuel */
    & #chapterList .dx-list-item:hover,
    & #subChapterList .dx-list-item:hover {
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }

    /* Densité un peu plus compacte */
    & .dx-list-item .dx-list-item-content { padding: 8px 12px; }
}

/* --- document-document-file-naming-index (fragment) ---------------------------
   src/DocumentBundle/Resources/views/DocumentFileNaming/index.html.twig */
:where(:root:has([data-al-screen="document-document-file-naming-index"])) {
    & .previewItem {
        margin-left:12px;
        font-weight:600;
        border: 1px solid var(--ald-border);
        border-radius: var(--ald-radius);
        padding: 10px 20px;
        width: 100%
    }

    /* Styles communs aux listes disponibles et sélectionnées */
    & #listAvailableCompany .dx-list-item,
    & #listSelectedCompany .dx-list-item,
    & #listAvailableUser .dx-list-item,
    & #listSelectedUser .dx-list-item {
        background: var(--ald-bg);
        border: 1px solid var(--ald-border);
        border-radius: var(--ald-radius);
        margin-bottom: var(--ald-margin);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
        cursor: grab;
    }
    & #listAvailableCompany .dx-list-item:active,
    & #listSelectedCompany .dx-list-item:active,
    & #listAvailableUser .dx-list-item:active,
    & #listSelectedUser .dx-list-item:active {
        cursor: grabbing;
    }

    /* Effet au survol pour plus de feedback visuel */
    & #listAvailableCompany .dx-list-item:hover,
    & #listSelectedCompany .dx-list-item:hover,
    & #listAvailableUser .dx-list-item:hover,
    & #listSelectedUser .dx-list-item:hover {
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }

    /* Densité un peu plus compacte */
    & .dx-list-item .dx-list-item-content { padding: 8px 12px; }
}

/* --- user-signature-index (fragment) ------------------------------------------
   src/UserBundle/Resources/views/Signature/index.html.twig */
:where(:root:has([data-al-screen="user-signature-index"])) {
    & .signature-wrapper {
        position: relative;
        width: 400px;
        height: 200px;
        margin: auto;

        margin-bottom: 10px;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    & .signature-pad {
        position: absolute;
        left: 0;
        top: 0;
        width:400px;
        height:200px;
        background-color: white;
        border: 1px solid var(--al-outline-variant, #bfc9c8);
        border-radius: 10px;
    }
    & .signature-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding-top: 8px;
    }
}

/* --- report-report-option-index (fragment) ------------------------------------
   src/ReportBundle/Resources/views/ReportOption/index.html.twig */
:where(:root:has([data-al-screen="report-report-option-index"])) {
    & .ald-field {
        margin-bottom: 25px;
    }

    & .ald-field label {
        font-weight: 600;
        display: block;
        margin-bottom: 8px;
    }

    & .ald-info {
        color: #666;
        font-size: 13px;
    }

    & .ald-actions {
        text-align: right;
        margin-top: 20px;
    }
}

/* --- report-report-access-index (fragment) ------------------------------------
   src/ReportBundle/Resources/views/ReportAccess/index.html.twig */
:where(:root:has([data-al-screen="report-report-access-index"])) {
    & .ald-field label {
        font-weight: 600;
        margin-bottom: 5px;
        display: block;
    }

    & .ald-rights-toolbar {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;
        width: 600px;
    }

    & .ald-approver-sub {
        font-size: 12px;
        color: #777;
    }
}

/* --- app-knp-paginator-custom-twitter-bootstrap-v3-pagination (fragment) ------
   src/AppBundle/Resources/views/KnpPaginator/custom_twitter_bootstrap_v3_pagination.html.twig */
:where(:root:has([data-al-screen="app-knp-paginator-custom-twitter-bootstrap-v3-pagination"])) {
    & .pagination>li>a, & .pagination>li>span {
        color: #1ABB9C
    }

    & .pagination > .active > a {
        background-color: #1ABB9C;
        border-color: #1ABB9C;
        color: white;
    }

    & .pagination>.active>a:hover, & .pagination>.active>span, & .pagination>.active>span:focus, & .pagination>.active>span:hover {
        z-index: 2;
        color: #fff;
        background-color: #1e8287;
        border-color: #1e8287;
        cursor: default;
    }
}

/* --- document-parcel-checker-index (fragment) ---------------------------------
   src/DocumentBundle/Resources/views/ParcelChecker/index.html.twig */
:where(:root:has([data-al-screen="document-parcel-checker-index"])) {
    & #visaConfigToolbar{
        margin-bottom: 10px;
    }
    & #panelParcels {
        height: 600px;
        background-color: white;
        border: 1px solid rgba(0,0,0,.1);
    }

    /* Lot sélectionné (dxList) */
    & #panelParcels .dx-list-item.dx-state-selected {
        background: rgba(0,0,0,.1);   /* léger vert/teal */
    }

    & #panelParcels .dx-list-item.dx-state-focused {
        background: rgba(0,0,0,.1);   /* léger vert/teal */
    }
}

/* --- stored-file-editor-crop (fragment) ---------------------------------------
   src/StoredFileBundle/Resources/views/Editor/crop.html.twig */
:where(:root:has([data-al-screen="stored-file-editor-crop"])) {
    & .al-row {
        justify-content: center;
    }
    & #f_app {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 2%;
    }
}

/* --- budget-market-market-company-lot-content (fragment) ----------------------
   src/BudgetBundle/Resources/views/Market/MarketCompany/lot-content.html.twig
   src/BudgetBundle/Resources/views/Situation/SituationOffice/validation-progress.html.twig
   src/BudgetBundle/Resources/views/Progress/index.html.twig */
:where(:root:has([data-al-screen="budget-market-market-company-lot-content"])) {
    & .row-correction-warning { background-color: rgba(255, 152, 0, 0.1) !important; }
}

/* --- budget-market-market-company-lot-content-2 (fragment) --------------------
   src/BudgetBundle/Resources/views/Market/MarketCompany/lot-content.html.twig */
:where(:root:has([data-al-screen="budget-market-market-company-lot-content-2"])) {
    & .synthese-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.2s; }
    & .synthese-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
    & .card-hover { transition: box-shadow 0.15s; }
    & .card-hover:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    & .marche-sidebar-card { transition: box-shadow 0.15s, border-color 0.15s; cursor: pointer; }
    & .marche-sidebar-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    & .ftm-card-hover { box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.2s; }
    & .ftm-card-hover:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }
}

/* --- volume-access-popup (fenêtre DevExtreme) -----------------------------------
   web/js/custom/DevExtremeObject/Volume/volumeAccessPopup.js — « Gérer les autorisations ». */
:where(:root:has([data-al-screen="volume-access-popup"])) {
    & .al-vacc { display: flex; flex-direction: column; gap: 12px; }
    & .al-vacc-recursive { display: flex; align-items: flex-start; gap: 12px; }
    & .al-vacc-recursive > i { font-size: 20px; margin-top: 2px; }
    & .al-vacc-recursive-body { display: flex; flex-direction: column; gap: 8px; }
    & .al-vacc-recursive-body .ald-callout-title { font-size: 15px; }
    & .al-vacc-recursive-hint { font-size: 13px; }
    & .al-vacc-admin { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--al-form-muted); }
    & .al-vacc-list { display: flex; flex-direction: column; gap: 12px; }
    & .al-vacc-search.al-search { flex: none; max-width: none; }
    & .al-vacc-group .al-att-group-head .al-btn { height: 26px; font-size: 12.5px; }
    & .al-vacc-shortcuts { display: flex; align-items: center; gap: 2px; }
    & .al-vacc-shortcuts-label { font-size: 12px; color: var(--al-form-muted); margin-right: 4px; }
    & .al-vacc-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 14px;
        border-top: 1px solid var(--al-form-card-border);
        background: var(--al-surface-container-lowest);
    }
    & .al-vacc-row.changed { background: color-mix(in srgb, var(--al-primary) 7%, var(--al-surface-container-lowest)); }
    & .al-vacc-identity { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    & .al-vacc-name { font-size: 14px; font-weight: 600; color: var(--al-on-surface); }
    & .al-vacc-detail { font-size: 12px; color: var(--al-form-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .al-vacc-mixed { font-size: 12px; font-weight: 600; color: #E65100; }
    & .al-vacc-seg button { height: 28px; padding: 0 12px; font-size: 12px; }
}

/* --- report-report-diffusion-company-project-parcel-grouped-form (fragment) ---
   src/ReportBundle/Resources/views/ReportDiffusion/CompanyProjectParcel/grouped-form.html.twig */
:where(:root:has([data-al-screen="report-report-diffusion-company-project-parcel-grouped-form"])) {
    & .bootstrap-datetimepicker-widget table.table-condensed tr>td, & .bootstrap-datetimepicker-widget table td>div, & .bootstrap-datetimepicker-widget table th>div{
        border: 0;
    }
    & .table td{
        position:relative;
    }
    & .bootstrap-datetimepicker-widget table.table-condensed {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/* --- punch-dashboard-index (fragment) -----------------------------------------
   src/PunchBundle/Resources/views/Dashboard/index.html.twig
   src/PunchBundle/Resources/views/PunchVisitChart/list.html.twig */
:where(:root:has([data-al-screen="punch-dashboard-index"])) {
    & #f_globalPunchState, & #f_globalParticipation {
        height: 200px;
    }

    & #f_particularPunchState {
        height: 400px;
    }
}

/* --- app-admin-open-ai-log-list (fragment) ------------------------------------
   src/AppBundle/Resources/views/Admin/OpenAI/Log/list.html.twig
   src/AppBundle/Resources/views/Admin/Error/list.html.twig */
:where(:root:has([data-al-screen="app-admin-open-ai-log-list"])) {
    & .scrollable-div {
        width: 100%;
        height: 200px; /* Hauteur fixe */
        overflow-y: auto; /* Ajoute un scroll vertical si le contenu déborde */
        overflow-x: hidden; /* Masque le scroll horizontal */
        border: 1px solid #ccc; /* Optionnel, pour une meilleure visualisation */
        padding: 10px; /* Optionnel, pour un espace intérieur */
    }
}

/* --- stored-file-editor-index-transform (fragment) ----------------------------
   src/StoredFileBundle/Resources/views/Editor/indexTransform.html.twig
   app/Resources/views/editor-markerjs.html.twig */
:where(:root:has([data-al-screen="stored-file-editor-index-transform"])) {
    & #f_app {
        width: 100%;
        min-height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- report-report-diffusion-office-grouped-form (fragment) -------------------
   src/ReportBundle/Resources/views/ReportDiffusion/Office/grouped-form.html.twig */
:where(:root:has([data-al-screen="report-report-diffusion-office-grouped-form"])) {
    & label {
        padding-right: 10px !important;
    }
    & .table .form-check .form-check-sign {
        top: 0;
    }
}

/* --- stored-file-viewer-viewer-object (fragment) ------------------------------
   src/StoredFileBundle/Resources/views/Viewer/viewer-object.html.twig
   src/StoredFileBundle/Resources/views/Viewer/viewer-object-html.html.twig */
:where(:root:has([data-al-screen="stored-file-viewer-viewer-object"])) {
    & #pluginViewer{
        z-index: 2;
        position: relative;
    }
}

/* --- office-office-form-user (fragment) ---------------------------------------
   src/OfficeBundle/Resources/views/Office/form.user.html.twig */
:where(:root:has([data-al-screen="office-office-form-user"])) {
    & select.form-control:not([size]):not([multiple]){
        height: calc(2.4375rem) !important;
        padding-bottom: 5px;
    }
}

/* --- stored-file-viewer-viewer (fragment) -------------------------------------
   src/StoredFileBundle/Resources/views/Viewer/viewer.html.twig */
:where(:root:has([data-al-screen="stored-file-viewer-viewer"])) {
    & #outerContainer {
        margin-top: 40px;
    }
}

/* --- report-report-line-file-add (fragment) -----------------------------------
   src/ReportBundle/Resources/views/ReportLineFile/add.html.twig
   src/ReportBundle/Resources/views/ReportBlockFile/add.html.twig */
:where(:root:has([data-al-screen="report-report-line-file-add"])) {
    & .qq-uploader{
        height: 350px !important;
    }
}

/* --- office-wizard-index-office (fragment) ------------------------------------
   src/OfficeBundle/Resources/views/Wizard/index.office.html.twig
   src/OfficeBundle/Resources/views/Wizard/index.company.html.twig */
:where(:root:has([data-al-screen="office-wizard-index-office"])) {
    & .table-f-summary tr:first-child td {
        border-top: 1px solid #999999 !important;
    }
}

/* --- calendar-add (fragment) --------------------------------------------------
   src/CalendarBundle/Resources/views/add.html.twig */
:where(:root:has([data-al-screen="calendar-add"])) {
    & #f_eventComment .cke_contents {
        height: 100px !important;
    }
}

/* --- budget-situation-situation-company-progress-page (fragment) --------------
   src/BudgetBundle/Resources/views/Situation/SituationCompany/progress-page.html.twig */
:where(:root:has([data-al-screen="budget-situation-situation-company-progress-page"])) {
    /* Surlignage des lignes en correction (visible quand le MOE a demandé une correction) */
    & .row-correction-warning { background-color: rgba(255, 152, 0, 0.12) !important; }
    & .row-correction-warning td { border-left: 3px solid #E65100 !important; }
}

/* --- budget-payment-certificate-payment-certificate-settings-view (fragment) ---
   src/BudgetBundle/Resources/views/PaymentCertificate/PaymentCertificateSettings/view.html.twig */
:where(:root:has([data-al-screen="budget-payment-certificate-payment-certificate-settings-view"])) {
    & table { width: 100%; }
    & .bordered { border: 1px solid #999999 !important; }
    & .text-bold { font-weight: 600; }
}

/* --- budget-market-market-company-single-ftm-section (fragment) ---------------
   src/BudgetBundle/Resources/views/Market/MarketCompany/single-ftm-section.html.twig
   src/BudgetBundle/Resources/views/Market/MarketCompany/ftm-company-tab.html.twig */
:where(:root:has([data-al-screen="budget-market-market-company-single-ftm-section"])) {
    & .ftm-card-hover { box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.2s; }
    & .ftm-card-hover:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }
}

/* --- newsletter-view (fragment) -----------------------------------------------
   src/NewsletterBundle/Resources/views/view.html.twig */
:where(:root:has([data-al-screen="newsletter-view"])) {
    & .newsletter-subscribe { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --- inbox-form (fragment) ----------------------------------------------------
   src/InboxBundle/Resources/views/form.html.twig */
:where(:root:has([data-al-screen="inbox-form"])) {
    & .qq-uploader{ min-height: 350px; max-height: 500px; }
}

/* --- budget-market-market-company-lots-overview (fragment) --------------------
   src/BudgetBundle/Resources/views/Market/MarketCompany/lots-overview.html.twig */
:where(:root:has([data-al-screen="budget-market-market-company-lots-overview"])) {
    & .lot-overview-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; transform: translateY(-2px); }
}

/* --- layout-error (page autonome) ---------------------------------------------
   app/Resources/views/error.html.twig */
:where(:root:has([data-al-screen="layout-error"])) {
    & body {
        background-color: #000000;
    }

    & .background{
        position: relative;
        background-color: #000;
    }

    & .background::before{
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        opacity: 0.6;
        background: url(/images/background.jpg) no-repeat center center;
        background-size: cover;
    }

    & .content{
        position: relative;
        width: 100%;
        height: 900px;
        padding-top: 300px;
    }
    & a {
        color: #23989e;
    }
    & .navbar {
        background-color: #000;
        margin-bottom: 0;
    }
    & .navbar-footer {
        background-color: #000000 !important;
        color: #FFFFFF;
        display: block !important;
        border-radius: 0;
        width:100%;
        position: fixed !important;
        bottom: 0 !important;
    }
    & .fixed-bottom{bottom:0}
    & .float-right{float:right!important}
}

/* --- bim-model, bim-model-svg (page autonome) ----------------------------------
   src/BimBundle/Resources/views/model.html.twig — deux volets sans plan SVG, trois avec */
:where(:root:has([data-al-screen="bim-model"])) {
    & #left > div { height: 50%; }
    & #left > div:last-child { border-bottom: none; }
}
:where(:root:has([data-al-screen="bim-model-svg"])) {
    & #left > div { height: 33%; }
    & #left > div:last-child { height: 34%; padding: 0; border-bottom: none; }
}

/* ==========================================================================
   Les styles que les scripts injectaient (lot 6, 30/09/2026)
   --------------------------------------------------------------------------
   Ces scripts ajoutaient un <style> à l'en-tête la première fois qu'ils dessinaient leur
   écran. Ils y posent maintenant le marqueur de la section (même identifiant qu'avant : leur
   garde « déjà posé ? » n'a pas changé). Même mécanique que plus haut.
   .mu-card n'appartient qu'à la fiche document (js-doc-sheet) : la fenêtre de dépôt en portait une
   seconde définition qu'elle n'utilisait pas et qui redessinait la fiche une fois ouverte ; retirée.
   ========================================================================== */

@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* --- js-doc-sheet (script) --------------------------------------------------
   web/js/custom/DevExtremeObject/Document/Common/sheet.js */
:where(:root:has([data-al-screen="js-doc-sheet"])) {
    & #docSheetPopupContent{background: #e1e6ea !important; padding-top: 5px;}
    & .fa-xl {font-size: 24px!important; margin-block: 6px!important; -webkit-margin-start: 4px!important; margin-inline-start: 4px!important; -webkit-margin-end: 4px!important; margin-inline-end: 4px!important;}
    & .doc-badges{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
    & .doc-info{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
    & .mu-chip{display:inline-block;padding:4px 8px;border-radius:999px;background:#FFFFFF;color:#374151;font-size:12px}
    & .mu-chip-info{display:inline-block;padding:4px 8px;border-radius:999px;background:#0280b8;color:#ffffff;font-size:12px}
    & .mu-card{border:1px solid #e5e7eb;border-radius:10px;padding:12px;background:#fff;margin-bottom:12px}
    & .mu-card h3{margin:0 0 8px;font-size:15px;font-weight:600;color:#374151}
    /* Titres des cartes (Visas, Documents complémentaires, Versions, Chat) : titre de fiche
       du kit (al-sh-title, 16 px / 600), actions alignées à droite sur la même ligne */
    & h2.ds-title, & .mu-card > h2, & .mu-card .visa-panel-header h2{display:flex;align-items:center;gap:8px;min-height:40px;margin:0 0 8px;font-family:var(--al-font-family);font-size:16px;font-weight:600;line-height:1.3;color:var(--al-on-surface)}
    & .mu-card .visa-panel-header h2{margin:0}
    & h2.ds-title > i, & .mu-card > h2 > i, & .mu-card .visa-panel-header h2 > i{font-size:16px}
    /* Nom du fichier : déjà tronqué par truncateWithHint (texte complet en infobulle) ; ne déborde pas */
    & h2.ds-title{min-width:0}
    & .mu-card > h2 #doc-attachments-actions, & .mu-card > h2 .panel-title-actions{float:none!important;margin-left:auto;display:flex;gap:6px}
    & .doc-grid{display:grid;grid-template-columns: 2fr 1fr;gap:16px;align-items:start}
    & .doc-actions-row{display:grid;grid-template-columns: 1fr 1fr 4fr;gap:16px;align-items:start}

    @media (max-width:1200px){
        & .doc-grid{grid-template-columns:1fr}
        & .doc-actions-row{grid-template-columns: 1fr;}
    }

    & .doc-left{ display:grid; grid-template-rows:auto 1fr; gap:12px; min-height:60vh; min-width:0; }
    & .doc-left .doc-viewer-wrap{ height:100% !important; min-height:800px!important; }
    & .doc-viewer-wrap{height: calc(100vh - 170px); border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#f8fafc;}
    & .doc-viewer-toolbar{display:flex;gap:8px;margin-bottom:8px;align-items:center}
    & .doc-versions li{cursor:pointer}
    & .doc-versions li:hover{text-decoration:underline}
    & .skeleton{
        background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
        background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:8px
    }

    & .doc-label-hint{font-size:11px;color:#64748b;display:inline-flex;align-items:center;gap:4px;margin-left:6px}
    & .doc-field-editable .dx-texteditor{background:#f8fff6;}
    & .doc-field-readonly .dx-texteditor{background:#f8fafc;}
    & .prewrap{white-space:pre-wrap;line-height:1.35;}
    & #checkerState {font-size: 24px; font-weight: 600; text-align: center; width: 80%; margin: auto; border: 1px dashed #eaeaea; height: 42px; padding-top: 6px; border-radius: 25px;}
}

/* --- js-mu-staging (script) -------------------------------------------------
   web/js/custom/DevExtremeObject/Document/DocumentCompany/upload.js
   web/js/custom/DevExtremeObject/Document/DocumentUser/upload.js */
:where(:root:has([data-al-screen="js-mu-staging"])) {
    & #muFilter{display:grid;align-items:start;margin:8px 0 12px;}
    & #muGridContainer{margin-top: 10px}
    & .mu-apply-line{margin-top:8px}
    & .mu-apply-line .dx-button{border:1px solid #e5e7eb;border-radius:8px;padding:4px 10px}
    & .mu-footer-fallback{position:sticky;bottom:0;background:linear-gradient(transparent, #fff 18px), #fff;padding:12px 0;text-align:right;border-top:1px solid #e5e7eb;margin-top:8px;}
    & .mu-footer-fallback .dx-button{margin-left:8px;}
}

/* --- js-pdfviewer (script) --------------------------------------------------
   web/js/custom/DevExtremeObject/Document/Common/sheet.js */
:where(:root:has([data-al-screen="js-pdfviewer"])) {
    & .ald-pdfviewer{
      position:relative; width:100%; height:100%; display:flex; flex-direction:column;
      background:#f5f6f7; border:1px solid #e5e7eb; border-radius:8px;
    }
    & .ald-pdf-toolbar{
      display:flex; gap:.5rem; align-items:center; padding:.5rem .75rem;
      border-bottom:1px solid #e5e7eb; background:#fff;
    }
    & .ald-pdf-toolbar button{
      border:1px solid #d1d5db; background:#fff; padding:.25rem .5rem; border-radius:6px; cursor:pointer;
    }
    & .ald-pdf-toolbar .zoom-val{ margin:0 .5rem; min-width:3ch; text-align:center; font-variant-numeric:tabular-nums; }
    & .ald-pdf-scroller{
      flex:1; overflow:auto; padding:1rem; display:flex; flex-direction:column; gap:1rem; align-items:flex-start;
    }
    & .ald-page{ background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.06); border:1px solid #e5e7eb; }
    & .ald-page canvas{ display:block; margin:0 auto; }
}

/* --- js-visa-collapse (script) ----------------------------------------------
   web/js/custom/DevExtremeObject/Document/Common/sheet.js */
:where(:root:has([data-al-screen="js-visa-collapse"])) {
    & .visa-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
    & .visa-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed #e5e7eb;cursor:pointer;flex-wrap:nowrap}
    & .visa-row:first-child{border-top:none}
    & .visa-row:last-child{border-bottom:0}
    & .visa-row--disabled{opacity:.6;cursor:not-allowed}
    & .visa-row-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    & .visa-row-actions{display:flex;gap:6px}
    & .visa-row-actions .dx-button{height:28px}
    & .visa-chip{display:inline-block;padding:2px 8px;border-radius:999px;color:#fff;font-size:12px;white-space:nowrap}
    & .visa-collapse{display:none;margin:8px 0 0 0;padding:8px 12px;border-left:3px solid #e5e7eb;background:#f9fafb;border-radius:6px}
    & .visa-comment{white-space:pre-wrap;color:#374151;font-size:13px}
}

/* --- js-doc-attachments (script) --------------------------------------------
   web/js/custom/DevExtremeObject/Document/Common/sheet.js */
:where(:root:has([data-al-screen="js-doc-attachments"])) {
    & #doc-attachments-list .doc-att-line{
      display:flex; align-items:center; justify-content:space-between;
      padding:8px 0; border-bottom: 1px dashed #e5e7eb; background:#fff;
    }
    & #doc-attachments-list .doc-att-name{
      flex:1; min-width:0; word-break:break-all;
    }
    & #doc-attachments-list .doc-att-actions .dx-button{ margin-left:8px; }
}

/* --- js-doc-panel-title-actions (script) ------------------------------------
   web/js/custom/DevExtremeObject/Document/Common/sheet.js */
:where(:root:has([data-al-screen="js-doc-panel-title-actions"])) {
    & .panel-title-actions { float: right; }
}

/* --- js-history-collapse (script) -------------------------------------------
   web/js/custom/DevExtremeObject/Document/DocumentCompany/grid-company.js
   web/js/custom/DevExtremeObject/Document/DocumentUser/grid-user.js */
:where(:root:has([data-al-screen="js-history-collapse"])) {
    & .modal { z-index: 1510 !important; }
    & .minHeight {min-height: 500px}
}

/* --- js-history (script) ----------------------------------------------------
   web/js/custom/DevExtremeObject/Document/DocumentCompany/grid-company.js
   web/js/custom/DevExtremeObject/Document/DocumentUser/grid-user.js */
:where(:root:has([data-al-screen="js-history"])) {
    & .div-badges{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
    & .chip{display:inline-block;padding:4px 8px;border-radius:999px;background:#e1e6ea;color:#333;font-size:12px;}
}

/* --- js-dashboard-hover (script) --------------------------------------------
   web/js/custom/DevExtremeObject/Finance/Overview/getOverviewPanel.js */
:where(:root:has([data-al-screen="js-dashboard-hover"])) {
    & .dashboard-card-hover { box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.2s; }
    & .dashboard-card-hover:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
}

/* --- js-lot-sheet-dpgf (script) ---------------------------------------------
   web/js/custom/DevExtremeObject/Finance/Market/lotDetailSheet.js */
:where(:root:has([data-al-screen="js-lot-sheet-dpgf"])) {
    & #lotSheetDpgfContent > .al-row,
    & #lotSheetDpgfContent > .al-row > [class*="col-"] {
        margin:0 !important; padding:0 !important; max-width:100% !important; flex:0 0 100% !important;
    }
    & #lotSheetDpgfContent #containerTreeListDpgf { width:100% !important; }
}

/* --- js-dpgf-situation-popup (script) ---------------------------------------
   web/js/custom/DevExtremeObject/Finance/Situation/addDpgfSituationPopup.js */
:where(:root:has([data-al-screen="js-dpgf-situation-popup"])) {
    & .row-correction-warning { background-color: rgba(255, 152, 0, 0.1) !important; }
    & .dx-multiview-item-content { overflow-y: auto; }
}

/* --- user-guide-index -------------------------------------------------------
   src/AppBundle/Resources/views/UserGuide/gallery.html.twig (page « Guides et aide », galerie ;
   cartes du kit de kit-page.css) */
:where(:root:has([data-al-screen="user-guide-index"])) {
    & .user-guide-audience-all { --al-chip-color: var(--al-on-surface-variant); }
    & .user-guide-audience-office { --al-chip-color: var(--al-primary); }
    & .user-guide-audience-company { --al-chip-color: var(--al-warning); }
    /* Couleur de chaque sujet (palette des avatars du kit, hors turquoise et orange des publics) :
       le bandeau de couverture prend la teinte du sujet (fusion « luminosité » sur un fond de la couleur),
       la puce du sujet et le point de la pastille de filtre aussi. */
    & .user-guide-topic-start { --user-guide-topic: #2f5a8a; }
    & .user-guide-topic-documents { --user-guide-topic: #6b4c9a; }
    & .user-guide-topic-site { --user-guide-topic: #8a5a2f; }
    & .user-guide-topic-finance { --user-guide-topic: #2f8a5a; }
    & .user-guide-topic-communication { --user-guide-topic: #9a2f5a; }
    & .user-guide-topic { --al-chip-color: var(--user-guide-topic); }
    & i.user-guide-topic { color: var(--user-guide-topic); }
    & .al-pill i.user-guide-topic { font-size: 8px; }
    & .user-guide-topic .kit-card-cover { background: var(--user-guide-topic); }
    & .user-guide-topic .kit-card-cover > img { mix-blend-mode: luminosity; }
    & .user-guide-topic .kit-card-cover:has(> img) > i { display: none; }   /* l'icône de secours ne transparaît pas */
    /* La couverture garde le 2:1 du bandeau, sans rognage ; téléchargement en bouton icône */
    & .user-guide-gallery-card .kit-card-cover { height: auto; aspect-ratio: 2 / 1; }
    & .user-guide-gallery-card .kit-card-foot > .user-guide-download-icon { flex: none; }
    /* Carte trouvée par son contenu : pages et extrait, mots cherchés surlignés */
    & .user-guide-hit { margin-top: 8px; padding: 8px 10px; border-radius: var(--al-radius-sm);
        background: var(--al-surface-container-low); font-size: 12.5px; }
    & .user-guide-hit-excerpt { margin-top: 2px; color: var(--al-on-surface-variant); line-height: 1.45; }
    & .user-guide-hit mark { padding: 0 1px; border-radius: 2px; background: color-mix(in srgb, var(--al-warning) 30%, transparent); color: inherit; }
}