drupal-reha/web/themes/custom/reha/scss/pages/_page-mon-espace-de-travail.scss

%hoveryellow{
    :hover{
        background-color: $yellow-puca;
    }
}


.page-mon-espace-de-travail{
    .layout-content{
        padding-bottom: 3rem;
        #block-reha-titredepage{
            text-align: center;
        }
        width: 80%;
        margin-left: 8%;
        .field--type-file{
            background-color: transparent;
            border: none;
            
        }
        .js-form-type-textfield{
            flex-direction: row;
            label{margin-right: 1rem;}
            align-content: center;
        
        }
    }
    .description{
        font-style: italic;
        text-transform: none;
    }

    .paragraph-top{
        .paragraph-type{
            display: none;
        }
    }
    summary{
        text-transform: none;
        font-weight: 800;
        font-size: 1.2rem;
    }

    #edit-field-dossier-de-pilotage-wrapper,
    #edit-field-dossier-evenement-wrapper{
        border-top: solid 1px black;
        margin-top: 2rem;
        h4{
            margin: 0;
            margin-top: 2rem;
            padding-left: 0;
        }
        #field-dossier-values--2{
            padding-left: 4rem;
            // border-left: solid black 1px;
        }
        .field-multiple-drag{
            border-left: solid black 1px;

        }
    }
    #edit-field-dossier-de-pilotage-0-subform-field-fichiers-table{
        display: none;
    }

    .paragraph-type--dossier{
        background-color: white;
        h4{
            display: none;
        }
    }

    // .js-form-type-textfield{
    //     label{
    //         font-weight: 800;
    //         font-size: 1.2rem;
    //        &:after{
    //             content: " :";
    //         }
    //     }
    // }

    //////////////// bulles d'infos ////////////////
        /* On cache le texte mais on le garde accessible */
        .description {
            position: relative;
            display: inline-block;
            color: transparent;        /* rend le texte invisible */
            font-size: 0;              /* supprime l'espace du texte */
        }
        
        /* On crée l’icône "i" */
        .description::before {
            content: "i";
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border-radius: 50%;
            background-color: #333;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
            font-family: Arial, sans-serif;
        }
        
        /* Tooltip : on réaffiche le vrai texte stocké */
        .description::after {
            content: attr(data-text); /* On va injecter le texte via un attribut */
            visibility: hidden;
            opacity: 0;
            width: 250px;
            background-color: #333;
            color: #fff;
            text-align: left;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            top: 120%;
            left: 50%;
            transform: translateX(-50%);
            transition: opacity 0.3s;
            font-size: 13px;
            line-height: 1.4;
            pointer-events: none;
        }
        
        /* Affichage au survol */
        .description:hover::after {
            visibility: visible;
            opacity: 1;
        }
    
    //////////////// bulles d'infos ////////////////    
    

    .js-form-type-managed-file{
        label{
            &:after{
                content: " :";
            }
        }
    }
    .paragraphs-add-wrapper{
        text-transform: uppercase;
        font-size: 0.9rem;
        font-weight: 400;
    
        @media (max-width:891px) {
            font-size: 1rem;
            }
            p{margin: 0;
            padding: 0.3rem;}
        :hover{
            background-color: $yellow-puca;
        }
    }
}

// #edit-field-dossier-de-pilotage-wrapper
.field--name-field-dossier-de-pilotage h4{
    ::after{
        content: "";
        border-top: solid 1px black;
    }
}