/* dam : Dev Application Menu */

@import url("font.css");

/*
:root
{

    --dam-accordeon-border: 1px solid #ddd;
    --dam-accordeon-entete-border-radius: inherit;
    --dam-accordeon-entete-bg-col: #e7f1ff;
    --dam-accordeon-entete-hov-bg-col: #d2e5ff;
    --dam-accordeon-entete-txt-col: #0c63e4;
    --dam-accordeon-entete-bt-col: #0c63e4;
    --dam-accordeon-entete-sign-font-family: var(--da-font-icone-del); 
    --dam-accordeon-entete-sign-ouv: 'u'; /* signe ouvrir : 'u' : v  '\002B' : signe + */
/*  --dam-accordeon-entete-sign-fer: 'v'; /* signe fermer : 'v' : ^  '\2212' : signe - */
/*  --dam-accordeon-corps-bg-col: #ffffff;
}
*/

/********************************************************************************************************************************
                        menu pliable accordéon (ruban horizontal avec un + ou - en fin de ligne)
*********************************************************************************************************************************/
    
    .dam-accordeons .dam-accordeon:first-of-type,
    .dam-accordeons .dam-accordeon:first-of-type .dam-accordeon-entete
    {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .dam-accordeons .dam-accordeon:not(:first-of-type)
    {
        border-top: 0;
    }

    .dam-accordeons .dam-accordeon:last-of-type,
    .dam-accordeons .dam-accordeon:last-of-type .dam-accordeon-entete:not(.active),
    .dam-accordeons .dam-accordeon:last-of-type .dam-accordeon-entete.active + .dam-accordeon-corps
    {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .dam-accordeon
    {
        border: var(--dam-accordeon-border);
    }

    .dam-accordeon .dam-accordeon-entete
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        background-color: var(--dam-accordeon-entete-bg-col);
        color: var(--dam-accordeon-entete-txt-col);
        cursor: pointer;
        padding: 18px;
        /* width: 100%; bug entete depasse la largeur */
        text-align: left;
        outline: none;
        font-size: 15px;
        border-radius: var(--dam-accordeon-entete-border-radius);
        /* transition: 0.4s; */
    }

    .dam-accordeon .dam-accordeon-entete.active, .dam-accordeon-entete:hover
    {
        background-color: var(--dam-accordeon-entete-hov-bg-col);
        border-bottom: var(--dam-accordeon-border);
    }

    .dam-accordeon .dam-accordeon-entete .dam-accordeon-entete-titre
    {
        flex: 1; /* le texte prend toute la place disponible */
        pointer-events: none; /* désactive les événements de souris sur l'élément titre pour gerer le clic sur H3 */
    }

    .dam-accordeon .dam-accordeon-entete:after
    {
        font-family: var(--dam-accordeon-entete-sign-font-family);
        font-size: 20px;
        text-decoration: none;
        font-style: normal;
        color: var(--dam-accordeon-entete-bt-col);
        font-weight: bold;
        float: right;
        margin-left: 5px;

        content: var(--dam-accordeon-entete-sign-ouv); /* signe v */
        transform-origin: 50% 50%;
        transform: rotate(0deg);
        transition-duration: 0.25s;
    }

    /* menu accordeon primaire */
    .dam-accordeon .dam-accordeon-entete.primaire{background-color: var(--dam-accordeon-entete-primaire-bg-col);color: var(--dam-accordeon-entete-primaire-txt-col);}
    .dam-accordeon .dam-accordeon-entete.primaire.active, .dam-accordeon-entete.primaire:hover{background-color: var(--dam-accordeon-entete-primaire-hov-bg-col);}
    .dam-accordeon .dam-accordeon-entete.primaire:after{color: var(--dam-accordeon-entete-primaire-bt-col);}
    /* menu accordeon secondaire */
    .dam-accordeon .dam-accordeon-entete.secondaire{background-color: var(--dam-accordeon-entete-secondaire-bg-col);color: var(--dam-accordeon-entete-secondaire-txt-col);}
    .dam-accordeon .dam-accordeon-entete.secondaire.active, .dam-accordeon-entete.secondaire:hover{background-color: var(--dam-accordeon-entete-secondaire-hov-bg-col);}
    .dam-accordeon .dam-accordeon-entete.secondaire:after{color: var(--dam-accordeon-entete-secondaire-bt-col);}

    /* menu accordeon rouge */
    .dam-accordeon .dam-accordeon-entete.rouge{background-color: var(--dam-accordeon-entete-rouge-bg-col);color: var(--dam-accordeon-entete-rouge-txt-col);}
    .dam-accordeon .dam-accordeon-entete.rouge.active, .dam-accordeon-entete.rouge:hover{background-color: var(--dam-accordeon-entete-rouge-hov-bg-col);}
    .dam-accordeon .dam-accordeon-entete.rouge:after{color: var(--dam-accordeon-entete-rouge-bt-col);}
    /* menu accordeon vert */
    .dam-accordeon .dam-accordeon-entete.vert{background-color: var(--dam-accordeon-entete-vert-bg-col);color: var(--dam-accordeon-entete-vert-txt-col);}
    .dam-accordeon .dam-accordeon-entete.vert.active, .dam-accordeon-entete.vert:hover{background-color: var(--dam-accordeon-entete-vert-hov-bg-col);}
    .dam-accordeon .dam-accordeon-entete.vert:after{color: var(--dam-accordeon-entete-vert-bt-col);}

    /* menu accordeon blanc et rouge */
    .dam-accordeon .dam-accordeon-entete.blanc-rouge{border: 1px solid var(--dam-accordeon-entete-rouge-txt-col); background-color: white;color: var(--dam-accordeon-entete-rouge-txt-col); border-radius: 0px;}
    .dam-accordeon .dam-accordeon-entete.blanc-rouge.active, .dam-accordeon-entete.blanc-rouge:hover{border: 1px solid var(--dam-accordeon-entete-rouge-txt-col); background-color: var(--dam-accordeon-entete-rouge-hov-bg-col);}
    .dam-accordeon .dam-accordeon-entete.blanc-rouge:after{color: var(--dam-accordeon-entete-rouge-bt-col);}

    /* menu accordeon blanc et vert */
    .dam-accordeon .dam-accordeon-entete.blanc-vert{border: 1px solid var(--dam-accordeon-entete-vert-txt-col); background-color: white; color: var(--dam-accordeon-entete-vert-txt-col); border-radius: 0px;}
    .dam-accordeon .dam-accordeon-entete.blanc-vert.active, .dam-accordeon-entete.blanc-vert:hover{border: 1px solid var(--dam-accordeon-entete-vert-txt-col); background-color: var(--dam-accordeon-entete-vert-hov-bg-col);}
    .dam-accordeon .dam-accordeon-entete.blanc-vert:after{color: var(--dam-accordeon-entete-vert-bt-col);}

    .dam-accordeon .dam-accordeon-entete.active:after
    {
        /* content: var(--dam-accordeon-entete-sign-fer); /* on renverse plutôt le signe v pour faire un signe ^ */
        transform-origin: 50% 50%;
        transform: rotate(-180deg);
        transition-duration: 0.25s;
    }

    .dam-accordeon .dam-accordeon-corps
    {
        background-color: var(--dam-accordeon-corps-bg-col);
        padding: 0px;

        display: grid; /* utile pr effet slide height (impossible avec height auto) */
        grid-template-rows: 0fr;
        transition: grid-template-rows 1s, padding 1s;
    }

    .dam-accordeon .dam-accordeon-corps .dam-accordeon-corps-hauteur
    {
        overflow: hidden;
        padding: 0px 5px; /* marge gauche droite pour decalage ligne verte editeur_wysiwyg */
    }

    /* fluide : effet slide immédiat sur le texte */
    .dam-accordeon .dam-accordeon-corps.fluide
    {
        overflow: hidden; 
    }

    .dam-accordeon .dam-accordeon-corps.fluide .dam-accordeon-corps-hauteur
    {
        height: fit-content; /* fluide : effet slide immédiat sur le texte */
    }

    /* si entete active : affiche le corps */
    .dam-accordeon .dam-accordeon-entete.active+.dam-accordeon-corps
    {
        padding: 10px;
        grid-template-rows: 1fr; /* affecte la hauteur totale */
    }


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

                                        menu principal
      (responsive + dropdown 2 niveaux + lien <a> (parent du sous menu) actif)

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

/* menu principal */

#dam-pcpal-logo
{
    display: block;
    text-align: center;
    transition: 0.4s;
}

#dam-pcpal-logo a
{
    padding: 0px;
}

/* masque le label.dam-ico-deroul et le checkbox
(utile en hamburger pour derouler le sous menu tout en gardant le lien du <a> parent) */
.dam-pcpal .dam-ico-deroul,
.dam-pcpal [id^=dam-deroul-pcpal]
{
    display: none;
}

/* menu principal */
.dam-pcpal
{
    background-color: var(--dam-pcpal-bg-col);
    position: relative;
    z-index: 10;
    font-family: var(--dam-pcpal-font-family);
    line-height: 32px;
    margin: 0;
}

.dam-pcpal .dam-contenu
{
    /* annulation marge ul par défaut */
    margin: 0px;
    background-color: var(--dam-pcpal-bg-col);
    position: relative;
    float: right;
    list-style: none;
    padding: 0;
    border: none;
}

/* menu principal inline */
.dam-pcpal ul li
{
    /* display: inline-block; */
    float: left;
    margin: 0;
}

/* rajout d'un "content vide" après le menu principal pour annuler le float à left du ul li */
.dam-pcpal:after
{
    content: "";
    display: table;
    clear: both;
}

.dam-pcpal a
{
    display: block;
    color: var(--dam-pcpal-txt-col);
    text-decoration: none;
    font-weight: normal;
    font-size: var(--dam-pcpal-txt-size);
    margin: 0px 20px;
}

/* on place le <a> et le label.dam-ico-deroul + sur la même ligne */
.dam-pcpal .dam-entete-sous-menu
{
    width: 100%;
    display: inline-flex;
    align-items: baseline;
    justify-content: space-between;
}

/* affecte la fleche basse au <a> du li */
/** 2019 : les :: pour les pseudos elements ne sont pas pris en compte sur les iphones 5C (ios 10.3.3) **/
.dam-pcpal li > .dam-entete-sous-menu > a:after
{
    font-family: icone_del, sans-serif;
    text-transform: none; /* pas de mise en capitale ou majuscule */
    content: 'a'; /* triangle pointe en bas */
    /* espace entre le texte du menu et le triangle : */
    padding: 0px 10px;
}

/* pas de fleche basse sur le a si pas de sous menu : */
.dam-pcpal li > .dam-entete-sous-menu > a:only-child:after
{
    content: '';
}

.dam-pcpal .dam-ico-deroul:after
{
    content: '+';
    cursor: pointer;
    /* necessaire pour pouvoir transformer le content : */
    display: inline-block;
    font-family: icone_del, sans-serif;
    font-size: 10px;/* 0.625em;*/
    /* bascule a la normale le + du label */
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    transition-duration: 1s;
}

.dam-pcpal .dam-ico-deroul.hamburger:after
{
    content: 'b'; /* 3 barres horizontales */
    cursor: pointer;
    /* necessaire pour pouvoir transformer le content : */
    display: inline-block;
    font-family: icone_del, sans-serif;
    font-size: 26px;/*1.625em;*/
    color: var(--dam-pcpal-hamburger-icone-col);
    /* bascule a la normale le hamburger à la fermeture du menu : */
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    transition-duration: 1s;
}

.dam-pcpal .dam-ico-deroul.hamburger:hover:after
{
    color: var(--dam-pcpal-hamburger-icone-hov-col);
}

/* masque les sous menu par defaut : */
.dam-pcpal .dam-sous-contenu
{
    display: none;
    position: absolute;
    background-color: var(--dam-pcpal-bg-col);
    border: var(--dam-pcpal-sous-menu-border);
    border-radius: var(--dam-pcpal-sous-menu-border-radius);
    padding: var(--dam-pcpal-sous-menu-padding);
    list-style: none;
}

/* sous menu */
.dam-pcpal ul ul li
{
    display: list-item;
    position: relative;
    float: none;
    width: var(--dam-pcpal-sous-menu-1-width);
    /** min-width: max-content; pour une largeur automatique (attention au décalage des sous menu) **/
}

.dam-pcpal ul ul ul
{
    border-radius: 8px;
    border: 1px solid #ccc;
    /** décaler sous sous menu à droite : si sortie de l'écran pour des sous sous-menus trop à droite : appliquer le même ajustement que les hints de l'éditeur wysiwyg
    position: relative;
    top: -60px;
    left: 210px; */
}

/* sous sous menu */
.dam-pcpal ul ul ul li
{
    position: relative;
    /** décaler sous sous menu à droite : si sortie de l'écran pour des sous sous-menus trop à droite : appliquer le même ajustement que les hints de l'éditeur wysiwyg
    top: -60px;
    left: 210px;
    */
}

/* affichage du sous menu */
.dam-pcpal .dam-contenu li:hover > .dam-sous-contenu
{
    display: inherit;
}


/*----------------------------------------------------------------------------------------
                                    Media Queries
             (gestion du menu hamburger pour une taille inferieure à 1109px / 1100px)
---------------------------------------------------------------------------------------- */

/* voir fichier personnalisé
@media all and (max-width: 1109px / 1100px) /* ///  doit être = à --dam-pcpal-med-hamb */
/*
{
}
*/

@media all and (max-width: 330px)
{
    .dam-pcpal ul li
    {
        display: block;
        width: 100%;
    }
    
    .dam-pcpal a:hover,
    .dam-pcpal .dam-ico-deroul:hover,
    .dam-pcpal a.menu-select,
    .dam-pcpal a.parent-select:after,
    .dam-pcpal .dam-ico-deroul.parent-select:after /* dans label pour version hamburger */
    {
        color: var(--dam-pcpal-hamburger-txt-hov-col);
    }
}

/********************************************************************************************************************************
                    largeur colonne (12 découpages) pour le menu principal
                changement largeur ecran (small 0-799, medium 800-1199, large 1200-...)
********************************************************************************************************************************/

/* voir fichier personnalisé site ou admin_site */

/* s : .dam-sxx ecran small */
/* m : .dam-mxx ecran medium */
/* l : .dam-lxx ecran large */


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

                                        menu latéral gauche
      (responsive + dropdown 2 niveaux + lien <a> (parent du sous menu) actif)

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

.dam-parent-lateral
{
    display: flex;
    flex-direction: column;

    width: var(--dam-parent-lateral-width);
}

.dam-lateral
{
    display: flow-root;
    background-color: var(--dam-lateral-bg-col);
    padding: 10px;
    overflow: auto;
}

.dam-lateral.sticky
{
    position: sticky;
    /* height: var(--dam-lateral-contenu-sticky-height); /* necessaire pour le sticky si non declaré */
    top: var(--dam-lateral-sticky-top);
}

.dam-lateral .dam-contenu
{
    height: var(--dam-lateral-contenu-sticky-height);

    /* annulation marge ul par défaut */
    margin: 0px;
    padding-left: 2rem;
    list-style: none;
}

.dam-lateral .dam-ico-deroul.hamburger,
[id=dam-deroul-lateral],
.dam-lateral [id^=dam-deroul-lateral]
{
    display: none;
}

/* on place le <a> et le label.dam-ico-deroul + sur la même ligne */
.dam-lateral .dam-entete-sous-menu
{
    width: 100%;
    display: inline-flex;
    align-items: baseline;
    justify-content: space-between;
}

/* masque les sous menu par defaut : */
.dam-lateral .dam-sous-contenu
{
    display: none;
    list-style: none;
    padding-left: 20px;
    padding-right: 5px;
    margin-bottom: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* gestion des icones + et - */
.dam-lateral .dam-ico-deroul
{
    margin-right: 10px;
    color: var(--dam-lateral-txt-col);
}

.dam-lateral .dam-ico-deroul.hamburger:after
{
    content: 'b'; /* 3 barres horizontales */
    cursor: pointer;
    margin: 10px;
    /* necessaire pour pouvoir transformer le content : */
    display: inline-block;
    font-family: icone_del, sans-serif;
    font-size: 26px;/*1.625em;*/
    color: var(--dam-lateral-hamb-txt-col);
    /* bascule a la normale le hamburger à la fermeture du menu : */
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    transition-duration: 1s;
}

.dam-lateral .dam-ico-deroul:after
{
    content: '+';
    cursor: pointer;
    /* necessaire pour pouvoir transformer le content : */
    display: block;
    font-family: icone_del, sans-serif;
    font-size: 10px;
    /* bascule a la normale le + du label */
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    transition-duration: 1s;
}

/* changement du + en - avec animation */
.dam-lateral [id^=dam-deroul-lateral]:checked + [class^=dam-entete-sous-menu]>.dam-ico-deroul:after
{
    content: '-';
    /* necessaire pour pouvoir transformer le content */
    display: inline-block;
    transform: rotate(180deg);
    transition-duration: 1s;
}

.dam-lateral [id^=dam-deroul-lateral]:checked + [class^=dam-entete-sous-menu]+.dam-sous-contenu
{
    display: block;
}

.dam-lateral .dam-sous-contenu li
{
    border-bottom: none;
}

.dam-lateral a
{
    color: var(--dam-lateral-txt-col);
    display: block;
    text-decoration: none;
    font-weight: normal;
    padding: 0.5em 0em;
}

.dam-lateral a.inactif,
.dam-lateral a.inactif:hover
{
    color: var(--dam-lateral-txt-inactif-col);
    cursor: default;
}

.dam-lateral a:hover,
.dam-lateral .dam-ico-deroul:hover,
.dam-lateral a.menu-select,
.dam-lateral .dam-ico-deroul.parent-select:after
{
    color: var(--dam-lateral-hov-txt-select-col);
}

/*----------------------------------------------------------------------------------------
                                    Media Queries
             (gestion du menu hamburger pour une taille inferieure à 1109px / 1100px)
---------------------------------------------------------------------------------------- */

/* voir fichier personnalisé */
/*@media all and (max-width: 1109px / 1100px) /* ///  doit être = à --dam-lateral-med-hamb */
/*
{
}
*/