/* das : Dev Application Site */

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

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

    --da-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;

    --da-hauteur-du-footer-px: 243px; /* /// doit correspondre à la hauteur du footer en pixels */
    --da-footer-document-bg-col: var(--da-blanc);
    --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-roboto-sans-serif);
    --da-h2-font-family: var(--da-font-roboto-sans-serif);
    --da-h3-font-family: var(--da-font-roboto-sans-serif);
    --da-h4-font-family: var(--da-font-montserrat-sans-serif);
    --da-h5-font-family: var(--da-font-montserrat-sans-serif);

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

    /* menu principal */
    --dam-pcpal-med-hamb: 1679px; /* /// 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-andalaneug-manuscrite);
    --dam-pcpal-sous-menu-border: 1px solid var(--das-coul-secondaire);
    --dam-pcpal-sous-menu-border-radius: 10px;
    --dam-pcpal-sous-menu-padding: 10px 0px 10px 20px;
    --dam-pcpal-sous-menu-1-bg-col: #fff; /*var(--da-vert-clair-logo-da);/* #f0f0f0; */
    --dam-pcpal-sous-menu-1-width: 410px; /* 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 primaire */
    --dam-accordeon-entete-primaire-bg-col: white;
    --dam-accordeon-entete-primaire-hov-bg-col: #b8e5e5;
    --dam-accordeon-entete-primaire-txt-col: #008080;
    --dam-accordeon-entete-primaire-bt-col: #008080;
    /* menu accordeon secondaire */
    --dam-accordeon-entete-secondaire-bg-col: white;
    --dam-accordeon-entete-secondaire-hov-bg-col: #fed7b0;
    --dam-accordeon-entete-secondaire-txt-col: #ff8c00;
    --dam-accordeon-entete-secondaire-bt-col: #ff8c00;

    /* carte */
    --dac-carte-allongee-bg-col: white;
    --dac-carte-allongee-txt-col: rgb(33, 37, 41);
    --dac-carte-allongee-border: 1px solid rgba(0, 0, 0, 0.175);
    --dac-carte-allongee-border-radius: 0.375rem;
    --dac-carte-width: 460px;
    --dac-carte-height: auto;
    --dac-carte-border-radius: 20px;
    /* defilement carrousel horizontal */
    --dac-carrousel-carte-gap : 8px;
    --dac-carrousel-scrollbar-height: 10px; /* custom scrollbar thickness */
    --dac-carrousel-carte-w: 400px;
    --dac-carrousel-carte-h: 160px;
    --dac-carrousel-carte-w-mobile: 240px;
    --dac-carrousel-carte-h-mobile: 150px;
    /* effet recouvrement fade / zoom / slide */
    --dac-overlay-bg-col: var(--da-bleu-logo-da);
    --dac-overlay-txt-col: white;
    /* effet recouvrement volet */
    --dac-volet-bg-col: var(--da-bleu-logo-da);
    --dac-volet-txt-col: white;
    /* effet retournement flip */
    --dac-carte-flip-width: 320px;/*250px;*/
    --dac-carte-flip-height: 480px;/*300px;*/
    --dac-carte-flip-img-height: 100%;/*200px;*/
    --dac-carte-flip-avant-bg-col: white;
    --dac-carte-flip-avant-txt-col: black;
    --dac-carte-flip-arriere-bg-col: var(--da-bleu-logo-da);
    --dac-carte-flip-arriere-txt-col: white;

    --dad-parent-img-zoom-height: 300px;

    /* diaporama logos client */
    --dad-diap-logos-gap: 40px;
    --dad-diap-logos-vitesse: 40s; /* durée du cycle complet */
    --dad-diap-logo-width: 80px;

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

    /* couleurs du site */
    /* ///! maj dew.css */
    --das-coul-primaire: #008080; /* vert bleu canard */
    --das-coul-primaire-clair: #75b1b1;
    --das-coul-primaire-fonce: #00595a;
    --das-rgb-primaire: 0,128,128; /* vert bleu canard */
    --das-rgb-primaire-fonce: 0, 89, 90;

    --das-coul-secondaire: #ff8c00; /* orange vif */
    --das-coul-secondaire-clair: #fed7b0;
    --das-coul-secondaire-fonce: #070706;
    
    --das-coul-peps: #ff8c00; /* orange doux */
    --das-coul-peps-clair: #fed7b0;
    --das-coul-peps-fonce: #070706;

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

    --das-coul-texte: #36454f; /* bleu gris */
    --das-coul-texte-clair: #cafafa; /* bleu vert clair */
    --das-coul-texte-fonce: #00595a; /* vert fonce */
    /* texte à appliquer sur les fonds */
    --das-coul-primaire-texte: white;
    --das-coul-primaire-clair-texte: var(--das-coul-texte);
    --das-coul-primaire-fonce-texte: white;

    --das-coul-secondaire-texte: white;
    --das-coul-secondaire-clair-texte: var(--das-coul-texte);;
    --das-coul-secondaire-fonce-texte: white;
    
    --das-coul-peps-texte: white;
    --das-coul-peps-clair-texte: var(--das-coul-texte);;
    --das-coul-peps-fonce-texte: white;

    /* blanc ou alternative de blanc */
    --da-white: white;
    --da-blanc: #fcf7f2;


    /* 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-roboto-sans-serif);
    --da-bouton-font-size: 16px;
    --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-erreur-coul:#E10720;
    --da-alerte-msg-erreur-coul-txt:white;
    --da-alerte-msg-erreur-coul-txt-hover:black;
    --da-alerte-msg-succes-coul:#00D7A8;
    --da-alerte-msg-succes-coul-txt:black;
    --da-alerte-msg-succes-coul-txt-hover:white;
    --da-alerte-msg-info-coul:#0B91FF;
    --da-alerte-msg-info-coul-txt:white;
    --da-alerte-msg-info-coul-txt-hover:black;
    --da-alerte-msg-attention-coul:#ff9800;
    --da-alerte-msg-attention-coul-txt:white;
    --da-alerte-msg-attention-coul-txt-hover:black;
}

/********************************************************************************************************************************
                                            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);

    /* hauteur entete + alignement logo & nav */
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* 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(--da-hauteur-du-header-px) + var(--da-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, h2, h3, h4, h5
{
    margin: 0px;
}

h1, .h1
{
    font-family: var(--da-h1-font-family);
    font-size: 3.4rem;
    font-weight: 500;
} 

h2, .h2
{
    font-family: var(--da-h2-font-family);
    font-size: 3.0rem;
    font-weight: 500;
}

h3, .h3
{
    font-family: var(--da-h3-font-family);
    font-size: 2.0rem;
    font-weight: 500;
}

h4, .h4
{
    font-family: var(--da-h4-font-family);
    font-size: 1.6rem;
    font-weight: 500;
}

h5, .h5
{
    font-family: var(--da-h5-font-family);
    font-size: 1.6rem;
    font-weight: 500;
}

strong
{
    font-weight: 700;
}

/* ajustement de la position de l'ancre */
.ancre, [id]
{
    scroll-margin-top: 160px; /* hauteur du menu */
}
.das-ancre-formulaire_contact
{
    scroll-margin-top: 200px; /* 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-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: 50px;
    padding: 15px 30px;
}


[class^=da-bouton],
[class^=da-bouton-plein]:hover
{
    border-radius: 50px;
    border: var(--da-bouton-border);

    padding: 15px 30px
}

[class^=da-bouton-fleche]
{
    border:none;
    background-color: transparent;
}


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

/* s : ecran small */
@media (max-width: 768px)
{
    /* option design flex pour tablette et mobile */
  .tableau_wysiwyg.daew-flex-mobile,
  .tableau_wysiwyg.daew-flex-mobile tbody,
  .tableau_wysiwyg.daew-flex-mobile tr,
  .tableau_wysiwyg.daew-flex-mobile td
  {
    display: block;
    width: 100%;
  }

  .tableau_wysiwyg.daew-flex-mobile tr
  {
    margin-bottom: 2rem;
  }

  .tableau_wysiwyg.daew-flex-mobile td
  {
    text-align: center;
  }

  .tableau_wysiwyg.daew-flex-mobile img
  {
    margin-bottom: 0.5rem;
  }
}

/* m : ecran medium */
@media (max-width: 1200px)
{
  .tableau_wysiwyg.daew-flex-tablette,
  .tableau_wysiwyg.daew-flex-tablette tbody,
  .tableau_wysiwyg.daew-flex-tablette tr,
  .tableau_wysiwyg.daew-flex-tablette td
  {
    display: block;
    width: 100%;
  }

  .tableau_wysiwyg.daew-flex-tablette tr
  {
    margin-bottom: 2rem;
  }

  .tableau_wysiwyg.daew-flex-tablette td
  {
    text-align: center;
  }

  .tableau_wysiwyg.daew-flex-tablette img
  {
    margin-bottom: 0.5rem;
  }
}

.a_wysiwyg
{
    text-decoration: none;
    pointer-events: auto;
}

.a_wysiwyg:link{color: var(--da-text-coul);}
.a_wysiwyg:visited{color: blueviolet;}
.a_wysiwyg:hover{color: red;}
.a_wysiwyg:active{color: orange;}

.a_wysiwyg.da-text-coul-primaire:link,
.a_wysiwyg.da-text-coul-primaire:visited,
.a_wysiwyg.da-text-coul-primaire:hover,
.a_wysiwyg.da-text-coul-primaire:active
{color: var(--das-coul-primaire);}

.a_wysiwyg.da-text-coul-secondaire:link,
.a_wysiwyg.da-text-coul-secondaire:visited,
.a_wysiwyg.da-text-coul-secondaire:hover,
.a_wysiwyg.da-text-coul-secondaire:active
{color: var(--das-coul-secondaire);}

.a_wysiwyg.da-text-coul:link,
.a_wysiwyg.da-text-coul:visited,
.a_wysiwyg.da-text-coul:hover,
.a_wysiwyg.da-text-coul:active
{color: var(--das-coul-texte);}

.a_wysiwyg.da-text-white:link,
.a_wysiwyg.da-text-white:visited,
.a_wysiwyg.da-text-white:hover,
.a_wysiwyg.da-text-white:active
{color: white;}


/********************************************************************************************************************************
                                            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
{
    /*position: absolute; /* debordement hors menu */
    top: 0px;
}
#dam-pcpal-logo a
{
    display: flex;
}
#dam-pcpal-logo a img
{
    width: 90px;
    /* margin-bottom: -10px; */
    transition: all 0.4s;
}

#dam-pcpal-logo .dam-pcpal-logo-texte
{
    position: absolute;
    align-self: center; /* alignement vertical */
    margin-left: 90px; /* alignement horizontal */

    color: var(--das-coul-secondaire);
    font-family: var(--dam-pcpal-logo-font-family);
    font-size: 4.0rem;
    align-items: center;
    transition: all 0.4s;

    display: flex; /* alignement trait sous le texte */

}

/* trait sous le texte */
#dam-pcpal-logo .dam-pcpal-logo-texte::after
{
    content: "";

    position: absolute;
    display: grid;

    justify-self: center;
    margin-top: 50px; /* espace entre texte et trait */
    margin-left: 50px; /* centrage */
    width: 35%; /* largeur du trait */
    height: 2px; /* épaisseur */
    background-color: var(--das-coul-secondaire);
}

.dam-pcpal
{
    padding: 0px;
}

.dam-pcpal.dam-reduction #dam-pcpal-logo a img{width: 60px;}
.dam-pcpal.dam-reduction #dam-pcpal-logo .dam-pcpal-logo-texte{font-size: 4.0rem; margin-top: -5px;}


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

/* ajout d'une puce dans les sous menu du menu principal */
.dam-pcpal ul ul li a::before{content: 'r'; font-family: var(--da-font-icone-del);}


/* 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: 1679px) /* ///  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 à 1679px)
    ---------------------------------------------------------------------------------------- */

    #dam-pcpal-logo
    {
        display: block;
        float: none;
        text-align: center;
        /* width: 100%; pb barre de defilement horizontale */
        padding: 0;
        transition: 0.4s;
    }

    #dam-pcpal-logo .dam-pcpal-logo-texte
    {
        font-size: 4.0rem;
    }

    /* on masque le contenu du menu hamburger par defaut */
    .dam-pcpal .dam-contenu
    {
        display: none;
    }
    
    .dam-pcpal .dam-hamburger-contenu-effet
    {
        display: flex;
        flex-direction: column;
        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; */

        /* largeur auto selon le <li> le plus long */
        width: max-content;
        max-width: 100vw;

        /* panneau caché à droite */
        right: -100%;
        z-index: 200;

        overflow-y: auto;

        background-color: var(--dam-pcpal-bg-col);

        list-style: none;
        margin: 0;
        padding: 0;

        transition: right 0.5s ease; /* 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
    {        
        background-color: var(--dam-pcpal-hamburger-contenu-bg-col);
        padding-bottom: 20px;
        z-index: 200;

        right: 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: auto;
        padding: 5px 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);

        display: inline-block;
        width: auto;
        padding-right: 10px;
    }
    
    /* 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 20px;
    }

    /* 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;}
    }
    */

    /* recouvrement sombre plein écran du main caché par défaut */
    .dam-pcpal-recouvrement-sombre
    {
        position: fixed;
        top: var(--dam-pcpal-hamburger-contenu-top);
        height: var(--dam-pcpal-hamburger-contenu-height);
        left: 0;

        width: 100vw;
        /* height: 100vh; */
        background: rgba(0, 0, 0, 0.45); /* transparence ombrée douce */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease;
        z-index: 150; /* sous le menu, au-dessus du contenu */
    }

    /* quand le menu hamburger est ouvert : recouvrement du main visible */
    .dam-pcpal-recouvrement-sombre.active
    {
        opacity: 1;
        visibility: visible;
    }

    /*----------------------------------------------------------------------------------------
                                    Media Queries
             (gestion du menu hamburger pour une taille inferieure à 1679px)
    ---------------------------------------------------------------------------------------- */
    .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 */
{
    #dam-pcpal-logo a img
    {
        width: 60px;
    }

    #dam-pcpal-logo .dam-pcpal-logo-texte
    {
        margin-left: 60px;
        font-size: 3.0rem;
    }
    .dam-pcpal.dam-reduction #dam-pcpal-logo a img{width: 50px;}
    .dam-pcpal.dam-reduction #dam-pcpal-logo .dam-pcpal-logo-texte{font-size: 3.0rem; margin-top: -15px;}
}

/********************************************************************************************************************************
                    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%}
}