/* das : Dev Application Site */

@import url("del_fonctions_generiques/20230223_1100/font.css");

:root
{
    --da-body-bg-col: white;
    --da-body-font-family: var(--da-font-martel-sans-serif);
    --da-body-txt-col: rgb(68, 68, 68);
    --da-body-font-size: 1.6rem;

    --hauteur-du-header-px: 113px; /* /// doit correspondre à la hauteur du header en pixels */
    --da-header-document-bg-col: white;
    --da-header-document-font-family: var(--da-font-roboto-sans-serif);
    --da-header-document-txt-col: rgb(255, 255, 255);
    --da-header-document-font-size: 1.6rem;
    --da-header-document-sticky-top: 0px;

    --hauteur-du-footer-px: 243px; /* /// doit correspondre à la hauteur du footer en pixels */
    --da-footer-document-bg-col: white;
    --da-footer-document-font-family: var(--da-font-roboto-sans-serif);
    --da-footer-document-txt-col: white;
    --da-footer-document-font-size: 1.4rem;

    --da-h1-font-family: var(--da-font-aire-exterior-sans-serif); /* var(--da-font-postit-manuscrite);*/
    --da-h2-font-family: var(--da-font-aire-exterior-sans-serif);
    --da-h3-font-family: var(--da-font-martel-sans-serif);
    --da-h4-font-family: var(--da-font-poppins-sans-serif);
    --da-h5-font-family: var(--da-font-poppins-sans-serif);

    --da-fond-alternatif-clair-bg-col: white;
    --da-fond-alternatif-fonce-bg-col: #e9e9e9;

    /* menu principal */
    --dam-pcpal-med-hamb: 1100; /* /// var de réf non utilisée (med=media) pour mettre à jour le @media correspondant */
    --dam-pcpal-bg-col: white;
    --dam-pcpal-font-family: var(--da-font-roboto-sans-serif);
    --dam-pcpal-logo-font-family: var(--da-font-roboto-sans-serif);
    --dam-pcpal-sous-menu-1-bg-col: #fff; /*var(--da-vert-clair-logo-da);/* #f0f0f0; */
    --dam-pcpal-sous-menu-1-width: 340px; /* largeur sous menu principal */
    --dam-pcpal-sous-menu-2-bg-col: #fff; /*var(--da-vert-tres-clair-logo-da); /*#e9e6e6; */
    --dam-pcpal-txt-col: var(--das-coul-primaire);
    --dam-pcpal-txt-size: 18px;
    --dam-pcpal-txt-hov-col: var(--das-coul-secondaire);
    --dam-pcpal-txt-hov-bg-col: white;
    /* menu principal hamburger */
    --dam-pcpal-hamburger-icone-col: var(--das-coul-primaire);
    --dam-pcpal-hamburger-icone-hov-col: var(--das-coul-secondaire);
    --dam-pcpal-hamburger-icones-deroulantes-col: var(--das-coul-primaire);
    --dam-pcpal-hamburger-icones-deroulantes-hov-col: var(--das-coul-secondaire);
    --dam-pcpal-hamburger-contenu-bg-col: #fdfdfd;
    --dam-pcpal-hamburger-contenu-top: 0px; /* (valeur estimé 47px) calcul sous js */
    --dam-pcpal-hamburger-contenu-top-marg-nav: 1; /* (marge reelle entre dam-pcpal et hamb-contenu utile pour calcul du hamb-cont-top) */
    --dam-pcpal-hamburger-contenu-height: 0px;  /* (valeur estimé 400px) calcul sous js */
    --dam-pcpal-hamburger-contenu-ul-hov-bg-col: #f3f3f3;
    --dam-pcpal-hamburger-contenu-ul-ul-hov-bg-col: #e3e3e3;
    --dam-pcpal-hamburger-contenu-ul-ul-ul-hov-bg-col: #d3d3d3;
    --dam-pcpal-hamburger-txt-col: var(--das-coul-primaire);
    --dam-pcpal-hamburger-txt-hov-col: var(--das-coul-secondaire);

    --dam-accordeon-border: 0px; /* 1px solid #ddd; */
    --dam-accordeon-entete-border-radius: 4px;
    --dam-accordeon-entete-bg-col: #e7f1ff;
    --dam-accordeon-entete-hov-bg-col: #F1F7FF;
    --dam-accordeon-entete-txt-col: var(--da-bleu-logo-da);
    --dam-accordeon-entete-bt-col: var(--da-bleu-logo-da);
    --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 accordeon rouge */
    --dam-accordeon-entete-rouge-bg-col: #ffaeb7;
    --dam-accordeon-entete-rouge-hov-bg-col: #FFCAD0;
    --dam-accordeon-entete-rouge-txt-col: #E10720;
    --dam-accordeon-entete-rouge-bt-col: #E10720;
    /* menu accordeon vert */
    --dam-accordeon-entete-vert-bg-col: #aef1e3;
    --dam-accordeon-entete-vert-hov-bg-col: #D5FBF3;
    --dam-accordeon-entete-vert-txt-col: #37A089;
    --dam-accordeon-entete-vert-bt-col: #37A089;
    
    --dad-parent-img-zoom-height: 300px;

    /* form */
    --das-form-theme-coul: var(--das-coul-primaire);

    /* couleurs du site */
    /* ///! maj dew.css */
    --das-coul-primaire: #2765B0; /* bleu logo */
    --das-coul-primaire-clair: #5A8FCC;
    --das-coul-primaire-fonce: #1a4a7a;
    --das-rgb-primaire: 39,101,176; /* bleu logo */
    --das-rgb-primaire-fonce: 26, 74, 122;

    --das-coul-secondaire: #a07b7b; /* rose marron */
    --das-coul-secondaire-clair: #D8B9B9;
    --das-coul-secondaire-fonce: #6A4F4F;
    
    --das-coul-peps: #ff8c42; /* orange doux */
    --das-coul-peps-clair: #FFC9A6;
    --das-coul-peps-fonce: #CC6F34;

    --das-col-revenir-en-haut: var(--das-coul-primaire);

    /* bleu */
    --da-bleu-tres-fonce-logo-da: #294861;
    --da-bleu-fonce-logo-da: #3D6A8F;
    --da-bleu-logo-da: #0F0CD5;
    --da-bleu-clair-logo-da: #B0C9DD;
    /* bleu vif */
    --da-bleu-vif-fonce-logo-da: #0070CC;
    --da-bleu-vif-logo-da: #0B91FF;
    --da-bleu-vif-clair-logo-da: #8ECDFF;

    /* vert */
    --da-vert-tres-fonce-logo-da: #236758;
    --da-vert-fonce-logo-da: #37A089;
    --da-vert-logo-da: #5BC7B0;
    --da-vert-clair-logo-da: #aef1e3;
    --da-vert-tres-clair-logo-da: #D5FBF3;
    /* vert vif */
    --da-vert-vif-logo-da:#00D7A8;

    /* rouge */
    --da-rouge-logo-da:#E10720;
    --da-rouge-clair-logo-da:#ffaeb7;
    --da-rouge:#f44336;
    --da-bordeaux:#A03737;

    /* violet */
    --da-violet: #8737A0;

    /* orange */
    --da-orange: #ff9800;
    --da-orange-marron: #A07737;

    /* gris */
    --da-gris-clair:#f2f2f2;

    --da-bouton-border: 2px solid;
    --da-bouton-font-family: var(--da-font-poppins-sans-serif);
    --da-bouton-font-size: 14px;
    --da-bouton-font-weight: normal;
    --da-bouton-gris-coul:#777777;
    --da-bouton-base-coul:white;
    --da-bouton-bleu-coul:var(--das-coul-primaire);
    --da-bouton-vert-coul:var(--da-vert-fonce-logo-da);
    --da-bouton-rouge-coul:var(--da-rouge-logo-da);
    --da-bouton-bordeaux-coul:var(--da-bordeaux);
    --da-bouton-violet-coul:var(--da-violet);
    --da-bouton-orange-coul:var(--da-orange-marron);

    --da-notif-badge-bg-col: red;
    --da-notif-badge-col: var(--da-vert-vif-logo-da);

    --da-alerte-msg-font-family:var(--da-font-open-sans-serif);
    --da-alerte-msg-rouge-coul:#E10720;
    --da-alerte-msg-vert-coul:#00D7A8;
    --da-alerte-msg-bleu-coul:#0B91FF;
    --da-alerte-msg-orange-coul:#ff9800; 
}

/********************************************************************************************************************************
                                            elements html
********************************************************************************************************************************/


html
{
    box-sizing:border-box;
    font-size: 62.5%; /* 62.5% -> 1.4rem = 14px */
    scroll-behavior:smooth; /* defilement doux pour l'acces aux ancres href='#' */
}

body
{
    background-color: var(--da-body-bg-col);
    font-family: var(--da-body-font-family);
    color: var(--da-body-txt-col);
    font-size: var(--da-body-font-size);
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

*,*:before,*:after
{
    box-sizing:inherit
}

.header-document
{
    background-color: var(--da-header-document-bg-col);
    font-family: var(--da-header-document-font-family);
    color: var(--da-header-document-txt-col);
    font-size: var(--da-header-document-font-size);

    /* reste fixe au niveau du top paramétré lors du défilement du scroll */
    position: sticky;
    top: var(--da-header-document-sticky-top);
    z-index: 5;
}

.main-document
{
    position: relative; /* positionné entre header et footer du document */
}

main[role="main"]
{
    min-height: calc(100vh - (var(--hauteur-du-header-px) + var(--hauteur-du-footer-px))); /* elargit la hauteur du main pour que footer reste en bas de l'écran */
    box-sizing: border-box; /* inclut le padding dans le calcul de la hauteur */
}

h1
{
    font-family: var(--da-h1-font-family);
    font-size: 2.8rem;
    font-weight: 500;
    margin: 0px;
} 

h2
{
    font-family: var(--da-h2-font-family);
    font-size: 2.0rem;
    font-weight: 500;
    margin: 0px;
}

h3
{
    font-family: var(--da-h3-font-family);
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0px;
}

h4
{
    font-family: var(--da-h4-font-family);
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0px;
}

h5
{
    font-family: var(--da-h5-font-family);
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0px;
}

strong
{
    font-weight: 700;
}

/* ajustement de la position de l'ancre */
.ancre, [id]
{
    scroll-margin-top: 130px; /* hauteur du menu */
}
.das-ancre-transport
{
    scroll-margin-top: 200px; /* hauteur du menu */
}
.das-ancre-devis
{
    scroll-margin-top: 130px; /* hauteur du menu */
}
.das-ancre-info-legales
{
    scroll-margin-top: 130px; /* hauteur du menu */
}

.footer-document-marge
{
    background-color: var(--da-body-bg-col);
    padding: 30px;
    margin-bottom: -10px; /* permet de recouvrir le fond des angles arrondis */
    z-index: -1;
}
.footer-document
{
    background-color: var(--da-footer-document-bg-col);
    font-family: var(--da-footer-document-font-family);
    color: var(--da-footer-document-txt-col);
    font-size: var(--da-footer-document-font-size);
}

.das-font-abel
{
    font-family: var(--da-font-abel-sans-serif);
}


.das-convoi-exceptionnel
{
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: black;
    background-color: #f2ce12;
    border: 2px solid black;
    border-radius: 5px;
    text-align: center;
    /*text-transform: uppercase;*/
    box-shadow: 0 0 0 5px #f2ce12; /* débordement */
    margin: 20px; /* espace pour les vis */
}
/* vis aux angles */
.das-convoi-exceptionnel::before,
.das-convoi-exceptionnel::after
{
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #f2ce12;
    border-radius: 50%;
    border: 1px solid black;
}
/* positionnement des vis */
.das-convoi-exceptionnel::before {top: 20px;left: 5px;}
.das-convoi-exceptionnel::after {top: 20px;right: 5px;}
.das-convoi-exceptionnel .vis-bottom-left,
.das-convoi-exceptionnel .vis-bottom-right
{
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #f2ce12;
    border-radius: 50%;
    border: 1px solid black;
    bottom: 5px;
}
.das-convoi-exceptionnel .vis-bottom-left {left: 5px;}
.das-convoi-exceptionnel .vis-bottom-right {right: 5px;}


.das-light-grey-blue,.das-hover-light-grey-blue:hover{color:#000!important;background-color:#548AB6!important}

.das-bord-ombre-bleu-13lt{box-shadow: -13px -13px 0px -10px rgba(15,12,213,1);}
.das-bord-ombre-bleu-13lb{box-shadow: -13px 13px 0px -10px rgba(15,12,213,1);}
.das-bord-ombre-bleu-13rt{box-shadow: 13px -13px 0px -10px rgba(15,12,213,1);}
.das-bord-ombre-bleu-13rb{box-shadow: 13px 13px 0px -10px rgba(15,12,213,1);}

.das-bord-ombre-noir-13lt{box-shadow: -13px -13px 0px -10px rgba(0,0,0,1);}
.das-bord-ombre-noir-13lb{box-shadow: -13px 13px 0px -10px rgba(0,0,0,1);}
.das-bord-ombre-noir-13rt{box-shadow: 13px -13px 0px -10px rgba(0,0,0,1);}
.das-bord-ombre-noir-13rb{box-shadow: 13px 13px 0px -10px rgba(0,0,0,1);}


/********************************************************************************************************************************
                                            class bouton
********************************************************************************************************************************/

[class^=da-bouton].das-bouton-site,
[class^=da-bouton-plein]:hover.das-bouton-site
{
    /*font-size: 1.8rem; à préciser dans les contexte_affichage_donnees->() */
    border-radius: 10px;
    padding: 10px 30px;
}

/********************************************************************************************************************************
                                            class affectée via editeur wysiwyg
********************************************************************************************************************************/

.a_wysiwyg
{
    text-decoration: none;
}
.a_wysiwyg:link{color: blue;}
.a_wysiwyg:visited{color: blueviolet;}
.a_wysiwyg:hover{color: red;}
.a_wysiwyg:active{color: orange;}


/********************************************************************************************************************************
                                            personnalisation
********************************************************************************************************************************/

.da-fond-alternatif-clair
{
    background-color: var(--da-fond-alternatif-clair-bg-col);
}

.da-fond-alternatif-fonce
{
    background-color: var(--da-fond-alternatif-fonce-bg-col);
}

/********************************************************************************************************************************
                                        menu principal
********************************************************************************************************************************/

#dam-pcpal-logo a img
{
    width: 120px;
    position: absolute; /* debordement hors menu */
    top: 0px;

    /* margin-bottom: -10px; */
    transition: all 0.4s;
}

#dam-pcpal-logo .dam-bycrane
{
    display: block;
    color: var(--da-bleu-logo-da);
    font-family: var(--dam-pcpal-logo-font-family);
    font-size: 2.8rem;
    text-align: center;
    transition: all 0.4s;
}

#dam-pcpal-logo .dam-lev-transp-mat
{
    color: var(--da-vert-logo-da);
    font-family: var(--dam-pcpal-logo-font-family);
    font-size: 2.0rem;
    text-align: center;
    transition: 0.4s;
}

.dam-pcpal
{
    padding: 0px;
}

.dam-pcpal.dam-reduction #dam-pcpal-logo a img{width: 60px;}
.dam-pcpal.dam-reduction #dam-pcpal-logo .dam-bycrane{font-size: 2.0rem; margin-top: -5px;}
.dam-pcpal.dam-reduction #dam-pcpal-logo .dam-lev-transp-mat{font-size: 1.4rem; margin-top: -10px;}


.dam-pcpal ul li a
{
    text-transform: uppercase;
    transition: border 0.2s ease; /* transition pour la bordure du menu selectionné */
}

/* survol menu principal */
.dam-pcpal a:hover,
.dam-pcpal a.parent-select:after
{
    color: var(--dam-pcpal-txt-hov-col);
}

.dam-pcpal .dam-ico-deroul:hover,
.dam-pcpal .dam-ico-deroul.parent-select:after /* dans label pour version hamburger */
{
    color: var(--dam-pcpal-hamburger-icone-hov-col);
}

/* background survol menu principal */
.dam-pcpal ul li:hover
{
    background-color: var(--dam-pcpal-txt-hov-bg-col);
    border-radius: 50px;    
    border-color: var(--dam-pcpal-txt-hov-col);
}

/* menu selectionné */
.dam-pcpal a.menu-select
{
    color: var(--dam-pcpal-txt-hov-col);
    border-bottom: 2px solid #fff; /* Légère bordure sous le texte pour le différencier */
}

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

    :root
    {
        --da-contenu-marg-left: -70px; /* - var(--dam-lateral-hamb-width); */        
        --da-contenu-marg-top: var(--dam-lateral-hamb-width);

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

        --dad-parent-img-zoom-height: 200px;
    }

    /* ajustement de la position de l'ancre */
    .ancre
    {
        scroll-margin-top: 60px; /* hauteur du menu */
    }

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

    #dam-pcpal-logo
    {
        display: block;
        float: none;
        text-align: center;
        width: 100%;
        padding: 0;
        transition: 0.4s;
    }

    #dam-pcpal-logo .dam-bycrane
    {
        font-size: 2.4rem;
    }

    #dam-pcpal-logo .dam-lev-transp-mat
    {
        font-size: 1.6rem;
    }

    /* on masque le contenu du menu hamburger par defaut */
    .dam-pcpal .dam-contenu
    {
        display: none;
    }
    
    .dam-pcpal .dam-hamburger-contenu-effet
    {
        display: block;
        position: fixed;
        top: var(--dam-pcpal-hamburger-contenu-top); /* hauteur menu calculé sous js; */
        height: var(--dam-pcpal-hamburger-contenu-height); /* hauteur windows - top calculé sous js; */
        width: 100%;
        z-index: 200;
        overflow-y: auto;
        background-color: var(--dam-pcpal-bg-col);
        list-style: none;
        margin: 0px;
        padding: 0;
        
        left: 100%;
        transition: left 0.5s; /* si transition avec transform : pb affchg furtif lors du win.resize */
    }
    /* modification affichage du menu si clic sur hamburger : affect class via fct js */
    .dam-pcpal .dam-hamburger-contenu-effet.dam-hamburger-contenu
    {        
        display: block;
        background-color: var(--dam-pcpal-hamburger-contenu-bg-col);
        padding-bottom: 20px;
        z-index: 200;

        left: 0;
    }

    /* modification affichage du sous menu si clic sur + : affect class via fct js */
    .dam-pcpal .dam-hamburger-sous-contenu
    {
        display: block;
        position: relative;
        border-radius: 8px;
        height: auto;
        opacity: 1;
        transform: scaleY(1);
        list-style: none;
        padding: 0px;
    }

    /* niveau 1 */
    .dam-pcpal ul ul.dam-hamburger-sous-contenu
    {
        background-color: var(--dam-pcpal-sous-menu-1-bg-col);
        /* border: 1px solid #ccc; */
    }

    /* niveau 2 */
    .dam-pcpal ul ul ul.dam-hamburger-sous-contenu
    {
        background-color: var(--dam-pcpal-sous-menu-2-bg-col);
        border: none;
    }

    /* menu hamburger : changement des li en largeur 100% */
    .dam-pcpal ul li, .dam-pcpal ul ul li
    {
        width: 100%;
        padding: 10px;
        /* border-bottom: 1px solid #ccc; */
    }

    .dam-pcpal ul li:hover,
    .dam-pcpal ul li:hover > ul
    {
        background-color: var(--dam-pcpal-hamburger-contenu-ul-hov-bg-col);
    }
    .dam-pcpal ul ul li:hover,
    .dam-pcpal ul ul li:hover > ul
    {
        background-color: var(--dam-pcpal-hamburger-contenu-ul-ul-hov-bg-col);
    }
    .dam-pcpal ul ul ul li:hover,
    .dam-pcpal ul ul ul li:hover > ul    
    {
        background-color: var(--dam-pcpal-hamburger-contenu-ul-ul-ul-hov-bg-col);
    }

    .dam-pcpal ul ul li:last-child, .dam-pcpal ul ul ul li:last-child
    {
        border-bottom: none; /* supprime la derniere separation des li */
    }

    /* on ne masque pas le a qui servira pour le lien parent sous menu */
    /* par contre on masque la fleche du a (pour ne garder que le + du label) */
    .dam-pcpal li > .dam-entete-sous-menu > a:after
    {
        content: '';
    }


    /* mise en forme des icones hamburger, + et - */
    .dam-pcpal .dam-ico-deroul
    {
        display: block;
        font-size: 21px;
        color: var(--dam-pcpal-hamburger-icones-deroulantes-col);
        padding: 0px 20px;
    }

    .dam-pcpal ul li a
    {
        font-weight: 400;
        text-transform: uppercase;
        color: var(--dam-pcpal-hamburger-txt-col);
    }
    
    /* couleur plus clair/foncé x1 pour le sous menu */
    .dam-pcpal ul ul a
    {
        color: var(--dam-pcpal-hamburger-txt-col);
        font-size: 16px;
        font-weight: 300;
        text-transform: uppercase;
        padding: 10px 10px 10px 40px;
    }

    /* couleur plus clair/foncé x2 pour le 2eme niveau sous menu */
    .dam-pcpal ul ul ul a
    {
        color: var(--dam-pcpal-hamburger-txt-col);
        font-size: 16px;
        font-weight: 300;
        text-transform: uppercase;
        padding: 10px 10px 10px 60px;
    }

    /* survol menu principal hamburger */
    .dam-pcpal a:hover,
    .dam-pcpal a.menu-select,
    .dam-pcpal a.parent-select:after
    {
        background-color: inherit;
        border:none; /* annule la bordure du menu selectionné */
        color: var(--dam-pcpal-hamburger-txt-hov-col);
    }

    .dam-pcpal ul li:hover
    {
        border-radius: 0px;
    }

    /* masque les sous menus par defaut */
    .dam-pcpal ul ul .dam-sous-contenu
    {
        display: block;
        float: none;
        opacity: 0;
        color: var(--dam-pcpal-hamburger-txt-col);
        height: 0;
        overflow: hidden;

        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.26s ease;
    }

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

    /* changement du hamburger en x avec animation */
    .dam-pcpal [id^=dam-deroul-pcpal]:checked + .dam-ico-deroul.hamburger:after
    {
        content: 'c'; /* croix */
        /* necessaire pour pouvoir transformer le content */
        display: inline-block;
        transform-origin: 50% 50%;
        transform: rotate(180deg);
        transition-duration: 1s;
    }

    /* affichage animé du sous menu lors du clic sur hamburger ou +
    .dag-col [id^=dam-deroul]:checked ~ ul
    {
        /// traité sous js pour gérer la desactivation du style a au profit de b
        /// .a{position:absolute;} .b{position:relative;}
    }
    */

    /*----------------------------------------------------------------------------------------
                                    Media Queries
             (gestion du menu hamburger pour une taille inferieure à 1100px)
    ---------------------------------------------------------------------------------------- */
    .dam-parent-lateral
    {
        width: var(--dam-parent-lateral-width);
    }

    .dam-lateral
    {
        z-index: 4; /* bascule le menu hamburger lateral sur le contenu du corps (limite à 4 pour da-pcpal-hamb-contenu-effet)*/
    }

    .dam-lateral .dam-contenu
    {
        display: none;
    }

    .dam-lateral .dam-hamburger-contenu
    {
        display: block;
        /*transition: display 0.5s; /* effet de glissement slide */

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

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


    /* modification affichage du sous menu si clic sur + : affect class via fct js */
    .dam-lateral .dam-hamburger-sous-contenu
    {
        display: block;
        list-style: none;
        padding-left: 20px;
        margin-bottom: 5px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }

    .dam-lateral .dam-ico-deroul.hamburger
    {
        display: flow-root;
    }

    /* changement du hamburger en x avec animation */
    .dam-lateral [id^=dam-deroul-lateral]:checked + .dam-ico-deroul.hamburger:after
    {
        content: 'c'; /* croix */
        /* necessaire pour pouvoir transformer le content */
        display: inline-block;
        transform-origin: 50% 50%;
        transform: rotate(180deg);
        transition-duration: 1s;
    }

    .dam-lateral [id^=dam-deroul-lateral]:checked + .dam-lateral
    {
        display: flow-root;
    }

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

    /* reduit la hauteur d'image sur mobile */
    .dad-parent-img-zoom
    {
        height: var(--dad-parent-img-zoom-height);
    }

    .dad-img-txt-size-14-mobile{font-size: 1.4rem;}
    .dad-img-txt-size-16-mobile{font-size: 1.6rem;}
    .dad-img-txt-size-18-mobile{font-size: 1.8rem;}
    .dad-img-txt-size-22-mobile{font-size: 2.2rem;}
    .dad-img-txt-size-24-mobile{font-size: 2.4rem;}
    .dad-img-txt-size-26-mobile{font-size: 2.6rem;}
    .dad-img-txt-size-28-mobile{font-size: 2.8rem;}

    .da-text-size-14-mobile{font-size: 1.4rem;}
    .da-text-size-15-mobile{font-size: 1.5rem;}
    .da-text-size-16-mobile{font-size: 1.6rem;}
    .da-text-size-18-mobile{font-size: 1.8rem;}
    .da-text-size-20-mobile{font-size: 2.0rem;}
    .da-text-size-22-mobile{font-size: 2.2rem;}
    .da-text-size-24-mobile{font-size: 2.4rem;}
    .da-text-size-26-mobile{font-size: 2.6rem;}
    .da-text-size-28-mobile{font-size: 2.8rem;}
    .da-text-size-38-mobile{font-size: 3.8rem;}
    .da-text-size-xxx-large-mobile{font-size: xxx-large;}
    .da-text-size-60vw-mobile{font-size: 6.0vw;}/* % de la fenetre */
    .da-text-size-80vw-mobile{font-size: 8.0vw;}/* % de la fenetre */
    .da-text-size-90vw-mobile{font-size: 9.0vw;}/* % de la fenetre */
}


@media all and (max-width: 400px) /* personnalisation pour les petites résolutions de smartphones */
{
    /* on conserve le debordement sur mobile
    #dam-pcpal-logo a img
    {
        width: 60px;
    }*/

    #dam-pcpal-logo .dam-bycrane
    {
        font-size: 2.0rem;
    }

    #dam-pcpal-logo .dam-lev-transp-mat
    {
        font-size: 1.4rem;
    }
}

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

/* s : ecran small */
.dam-s1{width: 8.33%}
.dam-s2{width: 16.66%}
.dam-s3{width: 25%}
.dam-s4{width: 33.33%}
.dam-s5{width: 41.66%}
.dam-s6{width: 50%}
.dam-s7{width: 58.33%}
.dam-s8{width: 66.66%}
.dam-s9{width: 75%}
.dam-s10{width: 83.33%}
.dam-s11{width: 91.66%}
.dam-s12{width: 100%}

/* m : ecran medium : design_menu équivalent à --dam-pcpal-med-hamb */
@media (min-width: 1101px)
{
    .dam-m1{width: 8.33%}
    .dam-m2{width: 16.66%}
    .dam-m3{width: 25%}
    .dam-m4{width: 33.33%}
    .dam-m5{width: 41.66%}
    .dam-m6{width: 50%}
    .dam-m7{width: 58.33%}
    .dam-m8{width: 66.66%}
    .dam-m9{width: 75%}
    .dam-m10{width: 83.33%}
    .dam-m11{width: 91.66%}
    .dam-m12{width: 100%}
}

/* l : ecran large */
@media (min-width: 1400px)
{
    .dam-l1{width: 8.33%}
    .dam-l2{width: 16.66%}
    .dam-l3{width: 25%}
    .dam-l4{width: 33.33%}
    .dam-l5{width: 41.66%}
    .dam-l6{width: 50%}
    .dam-l7{width: 58.33%}
    .dam-l8{width: 66.66%}
    .dam-l9{width: 75%}
    .dam-l10{width: 83.33%}
    .dam-l11{width: 91.66%}
    .dam-l12{width: 100%}
}