/* da : Dev Application */

/*
:root
{

}
*/


/********************************************************************************************************************************
                                        affichage d'une image
********************************************************************************************************************************/

.da-cover
{
    object-fit: cover;
}

.da-contain
{
    object-fit: contain;
}

/********************************************************************************************************************************
                                        affichage d'une etiquette
                                    (mots clés billet de blog ou actu)
********************************************************************************************************************************/

.da-etiquette-bandeau,
.desj-etiquette-liste
{
    display: inline-block;
    background-color: var(--das-coul-secondaire-clair);
    border-radius: 5px;
    padding: 10px;
    margin: 5px;
    text-transform: capitalize;
    text-decoration: none;
    font-size: 1.4rem;
    color: var(--das-coul-texte);
}

.desj-etiquette-liste
{
    cursor: pointer;
}

.da-etiquette-carte
{
    display: inline-block;
    background-color: var(--das-coul-secondaire-clair);
    border-radius: 5px;
    padding: 4px 10px;
    margin: 3px;
    text-transform: capitalize;
    text-decoration: none;
    font-size: 1.2rem;
    color: var(--das-coul-texte);
}

/********************************************************************************************************************************
                                        affichage d'une info bulle
********************************************************************************************************************************/

/* bouton ou texte qui affichera l'info bulle lors d'un survol */
.da-info-bulle-ref
{
    position: relative;
}

/* texte de l'info bulle */
.da-info-bulle-ref + .da-info-bulle-texte
{
    visibility: hidden;
    
    position: absolute;
    z-index: 1;
    /* la largeur de l'info bulle ne doit pas dépasser le parent */
    width: fit-content;
    
    border-radius: 3px;
    padding: 3px 5px;
}


.da-info-bulle-ref:hover + .da-info-bulle-texte
{
    visibility: visible;
}

/********************************************************************************************************************************
                                        bouton rectangulaire ou bouton-rond
        - bouton rectangulaire cadre ou "plein"
        - action (bleu) / validation (vert) / danger (rouge) / gris par defaut
        class="da-bouton plein vert"
        class="da-bouton rouge"
********************************************************************************************************************************/

/* bouton sans couleur */
/* valable aussi pour da-bouton-rond */
[class^=da-bouton],
[class^=da-bouton-plein]:hover
{
    display: inline-block;
    border-radius: 3px;
    border: var(--da-bouton-border);
    /*margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 2px;
    margin-right: 2px; à préciser dans les contexte_affichage_donnees->() */
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 14px;
    padding-right: 14px;
    text-align: center;
    text-decoration: none;
    font-family: var(--da-bouton-font-family);
    /*font-size: var(--da-bouton-font-size); à préciser dans les contexte_affichage_donnees->() */
    font-weight: var(--da-bouton-font-weight);
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;

    border-color: var(--da-bouton-gris-coul);
    background-color: var(--da-bouton-base-coul);
    color: var(--da-bouton-gris-coul);
}

.da-bouton:hover,
.da-bouton-plein
{
    background-color: var(--da-bouton-gris-coul);
    color: var(--da-bouton-base-coul);
}


.da-bouton-primaire-blanc,.da-bouton-plein-primaire-blanc:hover{border-color: var(--das-coul-primaire);background-color: var(--da-bouton-base-coul);color: var(--das-coul-primaire);}
.da-bouton-primaire-blanc:hover,.da-bouton-plein-primaire-blanc{border-color: white;background-color: var(--das-coul-primaire);color: white;}

.da-bouton-secondaire-blanc,.da-bouton-plein-secondaire-blanc:hover{border-color: var(--das-coul-secondaire);background-color: var(--da-bouton-base-coul);color: var(--das-coul-secondaire);}
.da-bouton-secondaire-blanc:hover,.da-bouton-plein-secondaire-blanc{border-color: white;background-color: var(--das-coul-secondaire);color: white;}

/* bouton fleche primaire (survol foncé ou blanc) */
.da-bouton-fleche-primaire{color: var(--das-coul-primaire);font-size: 1.1em;display: flex;align-items: center;gap: 8px;width: fit-content; /* limiter la largeur au contenu du bouton */text-decoration: none;position: relative;transition: color 0.3s ease;}
.da-bouton-fleche-primaire::after{content: "➔";font-size: 1.2em;padding-left: 10px; transition: transform 0.3s ease, opacity 0.3s ease;opacity: 0.7;}
.da-bouton-fleche-primaire:hover{color: var(--das-coul-texte);}
.da-bouton-fleche-primaire:hover::after{transform: translateX(6px);opacity: 1;}

.da-bouton-fleche-primaire-blanc{color: var(--das-coul-primaire);font-size: 1.1em;display: flex;align-items: center;gap: 8px;width: fit-content; /* limiter la largeur au contenu du bouton */text-decoration: none;position: relative;transition: color 0.3s ease;}
.da-bouton-fleche-primaire-blanc::after{content: "➔";font-size: 1.2em;transition: transform 0.3s ease, opacity 0.3s ease;opacity: 0.7;}
.da-bouton-fleche-primaire-blanc:hover{color: white;}
.da-bouton-fleche-primaire-blanc:hover::after{transform: translateX(6px);opacity: 1;}

/* bouton fleche secondaire (survol foncé ou blanc) */
.da-bouton-fleche-secondaire{color: var(--das-coul-secondaire);font-size: 1.1em;display: flex;align-items: center;gap: 8px;width: fit-content; /* limiter la largeur au contenu du bouton */text-decoration: none;position: relative;transition: color 0.3s ease;}
.da-bouton-fleche-secondaire::after{content: "➔";font-size: 1.2em;transition: transform 0.3s ease, opacity 0.3s ease;opacity: 0.7;}
.da-bouton-fleche-secondaire:hover{color: var(--das-coul-texte);}
.da-bouton-fleche-secondaire:hover::after{transform: translateX(6px);opacity: 1;}

.da-bouton-fleche-secondaire-blanc{color: var(--das-coul-secondaire);font-size: 1.1em;display: flex;align-items: center;gap: 8px;width: fit-content; /* limiter la largeur au contenu du bouton */text-decoration: none;position: relative;transition: color 0.3s ease;}
.da-bouton-fleche-secondaire-blanc::after{content: "➔";font-size: 1.2em;transition: transform 0.3s ease, opacity 0.3s ease;opacity: 0.7;}
.da-bouton-fleche-secondaire-blanc:hover{color: white;}
.da-bouton-fleche-secondaire-blanc:hover::after{transform: translateX(6px);opacity: 1;}

/* bouton fleche blanche (survol primaire clair ou secondaire clair) */
.da-bouton-fleche-blanc-primaire{color: white;font-size: 1.1em;display: flex;align-items: center;gap: 8px;width: fit-content; /* limiter la largeur au contenu du bouton */text-decoration: none;position: relative;transition: color 0.3s ease;}
.da-bouton-fleche-blanc-primaire::after{content: "➔";font-size: 1.2em;transition: transform 0.3s ease, opacity 0.3s ease;opacity: 0.7;}
.da-bouton-fleche-blanc-primaire:hover{color: var(--das-coul-primaire-clair);}
.da-bouton-fleche-blanc-primaire:hover::after{transform: translateX(6px);opacity: 1;}

.da-bouton-fleche-blanc-secondaire{color: white;font-size: 1.1em;display: flex;align-items: center;gap: 8px;width: fit-content; /* limiter la largeur au contenu du bouton */text-decoration: none;position: relative;transition: color 0.3s ease;}
.da-bouton-fleche-blanc-secondaire::after{content: "➔";font-size: 1.2em;transition: transform 0.3s ease, opacity 0.3s ease;opacity: 0.7;}
.da-bouton-fleche-blanc-secondaire:hover{color: var(--das-coul-secondaire-clair);}
.da-bouton-fleche-blanc-secondaire:hover::after{transform: translateX(6px);opacity: 1;}

[class^=da-bouton-fleche].da-retour::after{content: none !important;display: none !important;}
[class^=da-bouton-fleche].da-retour::before{content: "➔"; transform: scaleX(-1); font-size: 1.2em; transition: transform 0.3s ease, opacity 0.3s ease;opacity: 0.7;}
[class^=da-bouton-fleche].da-retour:hover::before{transform: scaleX(-1) translateX(6px); opacity: 1;}


.da-bouton-bleu,.da-bouton-plein-bleu:hover{border-color: var(--da-bouton-bleu-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-bleu-coul);}
.da-bouton-bleu:hover,.da-bouton-plein-bleu{border-color: var(--da-bouton-bleu-coul);background-color: var(--da-bouton-bleu-coul);color: var(--da-bouton-base-coul);}
.da-bouton-vert,.da-bouton-plein-vert:hover{border-color: var(--da-bouton-vert-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-vert-coul);}
.da-bouton-vert:hover,.da-bouton-plein-vert{border-color: var(--da-bouton-vert-coul);background-color: var(--da-bouton-vert-coul);color: var(--da-bouton-base-coul);}
.da-bouton-vert-vif,.da-bouton-plein-vert-vif:hover{border-color: var(--da-bouton-vert-vif-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-vert-vif-coul);}
.da-bouton-vert-vif:hover,.da-bouton-plein-vert-vif{border-color: var(--da-bouton-vert-vif-coul);background-color: var(--da-bouton-vert-vif-coul);color: var(--da-bouton-base-coul);}
.da-bouton-rouge,.da-bouton-plein-rouge:hover{border-color: var(--da-bouton-rouge-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-rouge-coul);}
.da-bouton-rouge:hover,.da-bouton-plein-rouge{border-color: var(--da-bouton-rouge-coul);background-color: var(--da-bouton-rouge-coul);color: var(--da-bouton-base-coul);}
.da-bouton-bordeaux,.da-bouton-plein-bordeaux:hover{border-color: var(--da-bouton-bordeaux-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-bordeaux-coul);}
.da-bouton-bordeaux:hover,.da-bouton-plein-bordeaux{border-color: var(--da-bouton-bordeaux-coul);background-color: var(--da-bouton-bordeaux-coul);color: var(--da-bouton-base-coul);}
.da-bouton-violet,.da-bouton-plein-violet:hover{border-color: var(--da-bouton-violet-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-violet-coul);}
.da-bouton-violet:hover,.da-bouton-plein-violet{border-color: var(--da-bouton-violet-coul);background-color: var(--da-bouton-violet-coul);color: var(--da-bouton-base-coul);}
.da-bouton-orange,.da-bouton-plein-orange:hover{border-color: var(--da-bouton-orange-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-orange-coul);}
.da-bouton-orange:hover,.da-bouton-plein-orange{border-color: var(--da-bouton-orange-coul);background-color: var(--da-bouton-orange-coul);color: var(--da-bouton-base-coul);}
.da-bouton-noir-blanc,.da-bouton-plein-noir-blanc:hover{border-color: black;background-color: var(--da-bouton-base-coul);color: black;}
.da-bouton-noir-blanc:hover,.da-bouton-plein-noir-blanc{border-color: white;background-color: black;color: white;}

.da-bouton-blanc-noir,.da-bouton-plein-blanc-noir:hover{border-color: white;background-color: black;color: white;}
.da-bouton-blanc-noir:hover,.da-bouton-plein-blanc-noir{border-color: black;background-color: white;color: black;}

.da-bouton-blanc-noir-primaire,.da-bouton-plein-blanc-noir-primaire:hover{border-color: black;background-color: var(--das-coul-primaire);color: white;}
.da-bouton-blanc-noir-primaire:hover,.da-bouton-plein-blanc-noir-primaire{border-color: black;background-color: white;color: black;}

.da-bouton-amber-grey,.da-bouton-plein-amber-grey:hover{border-color: #ffc107;background-color: var(--da-bouton-base-coul);color: #ffc107;}
.da-bouton-amber-grey:hover,.da-bouton-plein-amber-grey{border-color: grey;background-color: #ffc107;color: black;}
.da-bouton-amber-rouge,.da-bouton-plein-amber-rouge:hover{border-color: var(--da-bouton-rouge-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-rouge-coul);}
.da-bouton-amber-rouge:hover,.da-bouton-plein-amber-rouge{border-color: var(--da-bouton-rouge-coul);background-color: #ffc107;color: black;}
.da-bouton-amber-vert,.da-bouton-plein-amber-vert:hover{border-color: var(--da-bouton-vert-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-vert-coul);}
.da-bouton-amber-vert:hover,.da-bouton-plein-amber-vert{border-color: var(--da-bouton-vert-coul);background-color: #ffc107;color: black;}
.da-bouton-amber-bleu,.da-bouton-plein-amber-bleu:hover{border-color: var(--da-bouton-bleu-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-bleu-coul);}
.da-bouton-amber-bleu:hover,.da-bouton-plein-amber-bleu{border-color: var(--da-bouton-bleu-coul);background-color: #ffc107;color: black;}

.da-bouton-plein-bleu-blanc:hover{border-color: var(--da-bouton-bleu-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-bleu-coul);}
.da-bouton-plein-bleu-blanc{border-color: var(--da-bouton-base-coul);background-color: var(--da-bouton-bleu-coul);color: var(--da-bouton-base-coul);}
.da-bouton-plein-bleu-blanc-noir:hover{border-color: var(--da-bouton-bleu-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-bleu-coul);}
.da-bouton-plein-bleu-blanc-noir{border-color: black;background-color: var(--da-bouton-bleu-coul);color: var(--da-bouton-base-coul);}

.da-bouton-blanc-rouge,.da-bouton-plein-blanc-rouge:hover{border-color: var(--da-bouton-rouge-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-rouge-coul);}
.da-bouton-blanc-rouge:hover,.da-bouton-plein-blanc-rouge{border-color: #fff;background-color: var(--da-bouton-rouge-coul);color: #fff;}
.da-bouton-blanc-vert,.da-bouton-plein-blanc-vert:hover{border-color: var(--da-bouton-vert-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-vert-coul);}
.da-bouton-blanc-vert:hover,.da-bouton-plein-blanc-vert{border-color: #fff;background-color: var(--da-bouton-vert-coul);color: #fff;}
.da-bouton-blanc-bleu,.da-bouton-plein-blanc-bleu:hover{border-color: var(--da-bouton-bleu-coul);background-color: var(--da-bouton-base-coul);color: var(--da-bouton-bleu-coul);}
.da-bouton-blanc-bleu:hover,.da-bouton-plein-blanc-bleu{border-color: var(--das-coul-secondaire);background-color: var(--da-bouton-bleu-coul);color: #fff;}

/* bouton rond du type + (ajout) x (suppression) */
.da-bouton-rond
{

    display: flex; /* centrage du signe dans le rond */
    justify-content: center; /* alignement horizontal */
    align-items: center; /* aligement vertical */
    vertical-align: middle;
    
    white-space: nowrap;
    overflow: hidden;

    font-family: Arial;
    font-size: 2em;
    font-weight: normal;
    text-decoration: none;
    text-align: center;

    cursor: pointer;
    user-select: none; /* selection du texte interdite */
    -webkit-user-select: none; /* safari */
    transition-duration: 0.4s;

    padding: 4px 14px;
    margin: 4px 2px;

    border: none;
    border-radius: 50%;
    height: 80%;/* rond parfait dans 80% de son contenant */
    aspect-ratio: 1/1; /* (width = height) */
}

/********************************************************************************************************************************
                                        petit bouton notification
********************************************************************************************************************************/


/* petit bouton rond en haut à droite d'un div */
.da-notification
{
    position: relative;
    display: inline-block;
}
.da-notification .da-badge
{
    font-family: Arial;
    font-size: 1.8rem;
    line-height: normal;

    position: absolute;
    top: -2px;
    right: -2px;
    padding: 0px 5.25px;
    border-radius: 50%;

    background-color: var(--da-notif-badge-bg-col);;
    color: var(--da-notif-badge-col);

    cursor: pointer;
    user-select: none; /* selection du texte interdite */
    -webkit-user-select: none; /* safari */
}

.da-notification .da-badge:hover
{
    color: white;
}


/********************************************************************************************************************************
                                        message d'alerte avec croix pour fermeture
                                        4 couleurs : erreur, succes, info, attention
********************************************************************************************************************************/

.da-alerte-msg
{
    padding: 15px;
    font-family: var(--da-alerte-msg-font-family);
    font-size: 0.9em;
    opacity: 1;
    transition: opacity 0.6s;
    border-radius: 4px;
    margin-bottom: 15px;
}

.da-alerte-msg.erreur,
.da-alerte-msg.erreur .da-alerte-msg-fermeture
{background-color: var(--da-alerte-msg-erreur-coul); color: var(--da-alerte-msg-erreur-coul-txt);}
.da-alerte-msg.erreur .da-alerte-msg-fermeture:hover{color: var(--da-alerte-msg-erreur-coul-txt-hover);}

.da-alerte-msg.succes,
.da-alerte-msg.succes .da-alerte-msg-fermeture
{background-color: var(--da-alerte-msg-succes-coul); color: var(--da-alerte-msg-succes-coul-txt);}
.da-alerte-msg.succes .da-alerte-msg-fermeture:hover{color: var(--da-alerte-msg-succes-coul-txt-hover);}
    
.da-alerte-msg.info,
.da-alerte-msg.info .da-alerte-msg-fermeture
{background-color: var(--da-alerte-msg-info-coul); color: var(--da-alerte-msg-info-coul-txt);}
.da-alerte-msg.info .da-alerte-msg-fermeture:hover{color: var(--da-alerte-msg-info-coul-txt-hover);}

.da-alerte-msg.attention,
.da-alerte-msg.attention .da-alerte-msg-fermeture
{background-color: var(--da-alerte-msg-attention-coul); color: var(--da-alerte-msg-attention-coul-txt);}
.da-alerte-msg.attention .da-alerte-msg-fermeture:hover{color: var(--da-alerte-msg-attention-coul-txt-hover);}

.da-alerte-msg-fermeture
{
    margin-left: 15px;
    font-weight: 500;
    float: right;
    font-size: 2.2rem;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/********************************************************************************************************************************
                        bordure (cercle)
********************************************************************************************************************************/

.da-cercle{border-radius:50%;}

.da-bord-arrondi-4{border-radius: 4px;}
.da-bord-arrondi-6{border-radius: 6px;}
.da-bord-arrondi-10{border-radius: 10px;}.da-bord-arrondi-lt10{border-radius: 10px 0px 0px 0px;}.da-bord-arrondi-tr10{border-radius: 0px 10px 0px 0px;}.da-bord-arrondi-rb10{border-radius: 0px 0px 10px 0px;}.da-bord-arrondi-lb10{border-radius: 0px 0px 0px 10px;}.da-bord-arrondi-t10{border-radius: 10px 10px 0px 0px;}.da-bord-arrondi-lbtr10{border-radius: 0px 10px 0px 10px;}.da-bord-arrondi-ltrb10{border-radius: 10px 0px 10px 0px;}
.da-bord-arrondi-15{border-radius: 15px;}.da-bord-arrondi-lt15{border-radius: 15px 0px 0px 0px;}.da-bord-arrondi-tr15{border-radius: 0px 15px 0px 0px;}.da-bord-arrondi-rb15{border-radius: 0px 0px 15px 0px;}.da-bord-arrondi-lb15{border-radius: 0px 0px 0px 15px;}.da-bord-arrondi-t15{border-radius: 15px 15px 0px 0px;}.da-bord-arrondi-lbtr15{border-radius: 0px 15px 0px 15px;}.da-bord-arrondi-ltrb15{border-radius: 15px 0px 15px 0px;}
.da-bord-arrondi-20{border-radius: 20px;}.da-bord-arrondi-lt20{border-radius: 20px 0px 0px 0px;}.da-bord-arrondi-tr20{border-radius: 0px 20px 0px 0px;}.da-bord-arrondi-rb20{border-radius: 0px 0px 20px 0px;}.da-bord-arrondi-lb20{border-radius: 0px 0px 0px 20px;}.da-bord-arrondi-t20{border-radius: 20px 20px 0px 0px;}.da-bord-arrondi-lbtr20{border-radius: 0px 20px 0px 20px;}.da-bord-arrondi-ltrb20{border-radius: 20px 0px 20px 0px;}
.da-bord-arrondi-25{border-radius: 25px;}.da-bord-arrondi-lt25{border-radius: 25px 0px 0px 0px;}.da-bord-arrondi-tr25{border-radius: 0px 25px 0px 0px;}.da-bord-arrondi-rb25{border-radius: 0px 0px 25px 0px;}.da-bord-arrondi-lb25{border-radius: 0px 0px 0px 25px;}.da-bord-arrondi-t25{border-radius: 25px 25px 0px 0px;}.da-bord-arrondi-lbtr25{border-radius: 0px 25px 0px 25px;}.da-bord-arrondi-ltrb25{border-radius: 25px 0px 25px 0px;}
.da-bord-arrondi-30{border-radius: 30px;}.da-bord-arrondi-lt30{border-radius: 30px 0px 0px 0px;}.da-bord-arrondi-tr30{border-radius: 0px 30px 0px 0px;}.da-bord-arrondi-rb30{border-radius: 0px 0px 30px 0px;}.da-bord-arrondi-lb30{border-radius: 0px 0px 0px 30px;}.da-bord-arrondi-t30{border-radius: 30px 30px 0px 0px;}.da-bord-arrondi-lbtr30{border-radius: 0px 30px 0px 30px;}.da-bord-arrondi-ltrb30{border-radius: 30px 0px 30px 0px;}
.da-bord-arrondi-50{border-radius: 50px;}.da-bord-arrondi-lt50{border-radius: 50px 0px 0px 0px;}.da-bord-arrondi-tr50{border-radius: 0px 50px 0px 0px;}.da-bord-arrondi-rb50{border-radius: 0px 0px 50px 0px;}.da-bord-arrondi-lb50{border-radius: 0px 0px 0px 50px;}.da-bord-arrondi-t50{border-radius: 50px 50px 0px 0px;}.da-bord-arrondi-lbtr50{border-radius: 0px 50px 0px 50px;}.da-bord-arrondi-ltrb50{border-radius: 50px 0px 50px 0px;}
.da-bord-arrondi-200{border-radius: 200px;}.da-bord-arrondi-lt200{border-radius: 200px 0px 0px 0px;}.da-bord-arrondi-tr200{border-radius: 0px 200px 0px 0px;}.da-bord-arrondi-rb200{border-radius: 0px 0px 200px 0px;}.da-bord-arrondi-lb200{border-radius: 0px 0px 0px 200px;}.da-bord-arrondi-t200{border-radius: 200px 200px 0px 0px;}.da-bord-arrondi-lbtr200{border-radius: 0px 200px 0px 200px;}.da-bord-arrondi-ltrb200{border-radius: 200px 0px 200px 0px;}
.da-bord-arrondi-10pc{border-radius: 10%;}.da-bord-arrondi-lt10pc{border-radius: 10% 0px 0px 0px;}.da-bord-arrondi-tr10pc{border-radius: 0px 10% 0px 0px;}.da-bord-arrondi-rb10pc{border-radius: 0px 0px 10% 0px;}.da-bord-arrondi-lb10pc{border-radius: 0px 0px 0px 10%;}.da-bord-arrondi-t10pc{border-radius: 10% 10% 0px 0px;}.da-bord-arrondi-lbtr10pc{border-radius: 0px 10% 0px 10%;}.da-bord-arrondi-ltrb10pc{border-radius: 10% 0px 10% 0px;}

.da-bord-1-s-grey{border: 1px solid grey;}
.da-bord-1-s-crimson{border: 1px solid crimson;}
.da-bord-2-s{border: 2px solid;}
.da-bord-2-s-crimson{border: 2px solid crimson;}

.da-bord-1-s-white-5{border: 1px solid var(--da-white);border-radius: 5px;}
.da-bord-1-s-white-15{border: 1px solid var(--da-white);border-radius: 15px;}
.da-bord-3-s-white-5{border: 3px solid var(--da-white);border-radius: 5px;}

.da-bord-3-s-grey-5{border: 3px solid grey;border-radius: 5px;}

.da-bord-b-1-s-grey{border-bottom: 1px solid grey;}
.da-bord-b-2-s-grey{border-bottom: 2px solid grey;}

.da-bord-ombre-leger{box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1);}
.da-bord-ombre{box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.2);}
.da-bord-ombre-forte{box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5);}
.da-bord-ombre-tres-forte{box-shadow: -40px 30px 10px -10px rgba(0,0,0,0.4);}
.da-bord-ombre-tres-forte-r{box-shadow: 60px 30px 10px -10px rgba(0,0,0,0.4);}

/********************************************************************************************************************************
                                            etat / positionnement / top / left
********************************************************************************************************************************/


.da-block
{
    display: block;
}

.da-masque
{
    display: none;
}

.da-inline-block
{
    display: inline-block;
}

/* a utiliser avec les da-justify-content- */
.da-flex
{
    display: flex;
}

.da-flex-auto
{
    display: flex;
    flex: auto; /* centrage et largeur auto */
    flex-basis: min-content; /* adapte une largeur commune aux éléments à partir du plus étroit */
    padding: 25px; /* ecarte les elements entre eux */
}

.da-flex.da-column, .da-flex-auto.da-column{flex-direction: column;}

.da-flex-column-reverse
{
    display: flex;
    flex-direction: column-reverse;
}

.da-fix
{
    position: fixed;
    z-index: 10; /* necessaire pour eviter que la diapo relative "mes competences" passe par dessus le menu pcpal */
}

/* position relative */
.da-relative
{
    position: relative;
}

/* position fixe par rapport à un parent relatif */
.da-absolute
{
    position: absolute;
}


.da-top-150 {top: -150px}
.da-top-50 {top: -50px}
.da-top-20 {top: -20px}
.da-top-10 {top: -10px}
.da-top10 {top: 10px}
.da-top20 {top: 20px}
.da-top30 {top: 30px}
.da-top40 {top: 40px}
.da-top60 {top: 60px}
.da-top90 {top: 90px}
.da-top130 {top: 130px}
.da-left-50 {left: -50px}
.da-left-20 {left: -20px}
.da-left-10 {left: -10px}
.da-left10 {left: 10px}
.da-left20 {left: 20px}
.da-left30 {left: 30px}
.da-left40 {left: 40px}
.da-left45 {left: 45px}
.da-left60 {left: 60px}



/********************************************************************************************************************************
                            liste
********************************************************************************************************************************/

li.da-style-none
{
    list-style: none;
}

/********************************************************************************************************************************
                            glisser déposer
********************************************************************************************************************************/

/* glisser deposer : element parent */

/*
.da-glidep-par
{
    //
}
*/

/* glisser deposer : element deplacable */
.da-glidep-depl
{
    list-style: none;
    cursor: move;
}

/* glisser deposer : element deplacable */
/* personnalisation par site
.da-glidep-depl.survol
{
    border: 3px dotted; /* #666; *//*
}
*/


/********************************************************************************************************************************
                            opacité
********************************************************************************************************************************/

.da-op-30
{
    opacity: 0.3;
}

.da-op-60
{
    opacity: 0.6;
}

.da-op-80
{
    opacity: 0.8;
}

.da-op-none
{
    opacity: 1;
}

/********************************************************************************************************************************
                        séparateur horizontal design
********************************************************************************************************************************/

.da-separateur-arrondi-haut
{
  position: relative;
  height: 80px;
  overflow: hidden;
}

.da-separateur-arrondi-haut::before
{
  content: "";
  position: absolute;
  left: 50%;
  top: 150%;
  width: 100%;
  height: 200%;
  background-color: var(--das-coul-primaire-clair);
  border-radius: 50%;
  transform: translateX(-50%) translateY(-75%);
}
.da-separateur-arrondi-haut.coul-secondaire-clair::before{background-color: var(--das-coul-secondaire-clair);}
.da-separateur-arrondi-haut.blanc::before{background-color: var(--da-blanc);}

.da-separateur-arrondi-bas
{
  position: relative;
  height: 120px;
  background: var(--da-blanc); /* fond blanc ou blanc alternatif */
  overflow: hidden;
}

.da-separateur-arrondi-bas::before
{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 120%;
  height: 200%;
  background-color: var(--das-coul-primaire-clair); /* orange clair */
  border-radius: 50%;
  transform: translateX(-50%) translateY(-75%);
}
.da-separateur-arrondi-bas.coul-secondaire-clair::before{background-color: var(--das-coul-secondaire-clair);}

/*************************************/
/* séparateur ligne haute + ligne brisée basse triangle asymétrique */
.da-separateur-h-vague
{
    position: relative;
    height: 150px;
    background: var(--das-coul-primaire-clair);
}
.da-separateur-h-vague::before
{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: #fff;
    border-radius: 100% 50%;
    transform: scaleX(2);
}

/*************************************/
/* séparateur ligne triangle horizontal haut gauche + triangle horizontal bas droit */
.da-separateur-h-triangle-double
{
    position: relative;
    width: 100%;
    height: 150px;
    background-color: var(--das-coul-primaire-clair);
    color: var(--da-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.da-separateur-h-triangle-double::after
{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--da-white);
    transform: skewY(357deg);
    transform-origin: 50%;
}

/*************************************/
.da-separateur-h-courbes /* ko */
{
    position: relative;
    width: 100%;
    height: 150px;
    background-color: var(--das-coul-primaire-clair);
    color: var(--da-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.da-separateur-h-courbes::before
{
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, var(--das-coul-primaire-clair) 50%, transparent 50%);
    border-radius: 50% 50% 0 0;
    transform: translateY(-50%);
}
.da-separateur-h-courbes::after
{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, var(--das-coul-primaire-clair) 50%, transparent 50%);
    border-radius: 0 0 50% 50%;
    transform: translateY(50%);
}

/*************************************/
.da-separateur-h-tilde-haut
{
    position: relative;
    width: 100%;
    height: 150px;
    background-color: var(--da-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.da-separateur-h-tilde-haut::after
{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: var(--das-coul-primaire-clair);
    /*clip-path: path("M 0,100 Q 150,50 300,100 T 600,100 T 900,100 T 1200,100 T 1500,100 T 1800,100 L 1800,150 L 0,150 Z");*/
    /*clip-path: path("M0,80 Q150,20 300,80 Q450,140 600,80 Q750,20 900,80 Q1050,140 1200,80 Q1350,20 1500,80 Q1650,140 1800,80 L1800,150 L0,150 Z");*/
    /*clip-path: path("M0,80 C200,140 400,20 600,80 S1000,140 1200,80 S1600,20 1800,80 L1800,150 L0,150 Z");*/
    clip-path: path("M0,80 Q200,100 400,80 Q600,60 800,80 Q1000,100 1200,80 Q1400,60 1600,80 Q1800,100 1800,80 L1800,150 L0,150 Z");
}
.da-separateur-h-tilde-bas
{
    position: relative;
    width: 100%;
    height: 150px;
    background-color:var(--das-coul-primaire-clair);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.da-separateur-h-tilde-bas::after
{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: var(--da-white);
    /*clip-path: path("M 0,100 Q 150,50 300,100 T 600,100 T 900,100 T 1200,100 T 1500,100 T 1800,100 L 1800,150 L 0,150 Z");*/
    /*clip-path: path("M0,80 Q150,20 300,80 Q450,140 600,80 Q750,20 900,80 Q1050,140 1200,80 Q1350,20 1500,80 Q1650,140 1800,80 L1800,150 L0,150 Z");*/
    /*clip-path: path("M0,80 C200,140 400,20 600,80 S1000,140 1200,80 S1600,20 1800,80 L1800,150 L0,150 Z");*/
    clip-path: path("M0,80 Q200,100 400,80 Q600,60 800,80 Q1000,100 1200,80 Q1400,60 1600,80 Q1800,100 1800,80 L1800,150 L0,150 Z");
}

/*************************************/
/* mise en avant du texte */
.da-separateur-h-text
{
    position: relative;
    z-index: 1;
}


/* séparateur incliné vers la droite */
.da-separateur-h-incline-droit
{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: linear-gradient(to left bottom, #fff 49%, #548AB6 50%);
}

/* séparateur incliné vers la gauche */
.da-separateur-h-incline-gauche
{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: linear-gradient(to right bottom, #548AB6 49%, #fff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);
}

/* séparateur incliné texte */
/* manque de précision sur l'aspect responsive
.da-separateur-h-incline-texte
{
  width:60%;
  padding:5% 3% 0% 3%;
}
*/

.da-separateur-h-incline-texte-droit
{
  background:#548AB6;
  color:#fff;
}

.da-separateur-h-incline-texte-gauche
{
  background:#fff;
  color:#548AB6;
}

.da-separateur-h-incline-texte-droit .da-bouton
{
    border-color: var(--da-bouton-base-coul); background-color: #3D6A8F; color: var(--da-bouton-base-coul);
    font-size: 1.6rem;
    width: 80%;
    margin: 20px 10% 20px 10%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.da-separateur-h-incline-texte-droit .da-bouton:hover,
.da-separateur-h-incline-texte-gauche .da-bouton
{
    border-color: #3D6A8F; background-color: var(--da-bouton-base-coul); color: #3D6A8F;
    font-size: 1.6rem;
    width: 80%;
    margin: 20px 10% 20px 10%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.da-separateur-h-incline-texte-gauche .da-bouton:hover
{
    border-color: #3D6A8F; background-color: #3D6A8F; color: var(--da-bouton-base-coul);
}

/* inclinaison vers la droite ou la gauche : multi couleur pour le texte et les boutons */
.da-separateur .multi-couleur:nth-of-type(1) .da-separateur-h-incline-texte{background: #548AB6; color:#fff;}
.da-separateur .multi-couleur:nth-of-type(2) .da-separateur-h-incline-texte{background: #5BC7B0; color:#fff;}
.da-separateur .multi-couleur:nth-of-type(3) .da-separateur-h-incline-texte{background: #E10720; color:#fff;}
.da-separateur .multi-couleur:nth-of-type(4) .da-separateur-h-incline-texte{background: #3e6f6b; color:#fff;}
.da-separateur .multi-couleur:nth-of-type(5) .da-separateur-h-incline-texte{background: #b19f63; color:#fff;}
.da-separateur .multi-couleur:nth-of-type(1) .da-separateur-h-incline-texte .da-bouton{border-color: var(--da-bouton-base-coul); background-color: #355D7D; color: var(--da-bouton-base-coul);}
.da-separateur .multi-couleur:nth-of-type(2) .da-separateur-h-incline-texte .da-bouton{border-color: var(--da-bouton-base-coul); background-color: #2D8572; color: var(--da-bouton-base-coul);}
.da-separateur .multi-couleur:nth-of-type(3) .da-separateur-h-incline-texte .da-bouton{border-color: var(--da-bouton-base-coul); background-color: #AD0519; color: var(--da-bouton-base-coul);}
.da-separateur .multi-couleur:nth-of-type(4) .da-separateur-h-incline-texte .da-bouton{border-color: var(--da-bouton-base-coul); background-color: #2E524F; color: var(--da-bouton-base-coul);}
.da-separateur .multi-couleur:nth-of-type(5) .da-separateur-h-incline-texte .da-bouton{border-color: var(--da-bouton-base-coul); background-color: #77693B; color: var(--da-bouton-base-coul);}
.da-separateur .multi-couleur:nth-of-type(1) .da-separateur-h-incline-texte .da-bouton:hover{border-color: var(--da-bouton-base-coul); background-color: var(--da-bouton-base-coul); color: #355D7D;}
.da-separateur .multi-couleur:nth-of-type(2) .da-separateur-h-incline-texte .da-bouton:hover{border-color: var(--da-bouton-base-coul); background-color: var(--da-bouton-base-coul); color: #2D8572;}
.da-separateur .multi-couleur:nth-of-type(3) .da-separateur-h-incline-texte .da-bouton:hover{border-color: var(--da-bouton-base-coul); background-color: var(--da-bouton-base-coul); color: #AD0519;}
.da-separateur .multi-couleur:nth-of-type(4) .da-separateur-h-incline-texte .da-bouton:hover{border-color: var(--da-bouton-base-coul); background-color: var(--da-bouton-base-coul); color: #2E524F;}
.da-separateur .multi-couleur:nth-of-type(5) .da-separateur-h-incline-texte .da-bouton:hover{border-color: var(--da-bouton-base-coul); background-color: var(--da-bouton-base-coul); color: #77693B;}
/* inclinaison vers la droite : multi couleur */
.da-separateur .multi-couleur:nth-of-type(1) .da-separateur-h-incline-droit{background: linear-gradient(to left bottom, #ffffff 49%, #548AB6 50%);}
.da-separateur .multi-couleur:nth-of-type(2) .da-separateur-h-incline-droit{background: linear-gradient(to left bottom, #548AB6 49%, #5BC7B0 50%);}
.da-separateur .multi-couleur:nth-of-type(3) .da-separateur-h-incline-droit{background: linear-gradient(to left bottom, #5BC7B0 49%, #E10720 50%);}
.da-separateur .multi-couleur:nth-of-type(4) .da-separateur-h-incline-droit{background: linear-gradient(to left bottom, #E10720 49%, #3e6f6b 50%);}
.da-separateur .multi-couleur:nth-of-type(5) .da-separateur-h-incline-droit{background: linear-gradient(to left bottom, #3e6f6b 49%, #b19f63 50%);}
.da-separateur .multi-couleur:nth-of-type(1) .da-separateur-h-incline-texte-droit{background: #548AB6; color:#fff;}
.da-separateur .multi-couleur:nth-of-type(2) .da-separateur-h-incline-texte-droit{background: #5BC7B0; color:#fff;}
.da-separateur .multi-couleur:nth-of-type(3) .da-separateur-h-incline-texte-droit{background: #E10720; color:#fff;}
.da-separateur .multi-couleur:nth-of-type(4) .da-separateur-h-incline-texte-droit{background: #3e6f6b; color:#fff;}
.da-separateur .multi-couleur:nth-of-type(5) .da-separateur-h-incline-texte-droit{background: #b19f63; color:#fff;}
/* inclinaison vers la gauche : multi couleur */
.da-separateur .multi-couleur:nth-of-type(1) .da-separateur-h-incline-gauche{background: linear-gradient(to right bottom, #548AB6 49%, #5BC7B0 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);}
.da-separateur .multi-couleur:nth-of-type(2) .da-separateur-h-incline-gauche{background: linear-gradient(to right bottom, #548AB6 49%, #5BC7B0 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);}
.da-separateur .multi-couleur:nth-of-type(3) .da-separateur-h-incline-gauche{background: linear-gradient(to right bottom, #5BC7B0 49%, #E10720 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);}
.da-separateur .multi-couleur:nth-of-type(4) .da-separateur-h-incline-gauche{background: linear-gradient(to right bottom, #5BC7B0 49%, #E10720 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);}
.da-separateur .multi-couleur:nth-of-type(5) .da-separateur-h-incline-gauche{background: linear-gradient(to right bottom, #E10720 49%, #ffffff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);}
.da-separateur .multi-couleur:nth-of-type(1) .da-separateur-h-incline-texte-gauche{background: #fff; color: #548AB6;}
.da-separateur .multi-couleur:nth-of-type(2) .da-separateur-h-incline-texte-gauche{background: #fff; color: #5BC7B0;}
.da-separateur .multi-couleur:nth-of-type(3) .da-separateur-h-incline-texte-gauche{background: #fff; color: #E10720;}
.da-separateur .multi-couleur:nth-of-type(4) .da-separateur-h-incline-texte-gauche{background: #fff; color: #3e6f6b;}
.da-separateur .multi-couleur:nth-of-type(5) .da-separateur-h-incline-texte-gauche{background: #fff; color: #b19f63;}

/********************************************************************************************************************************
                        alignement left center right justify (div / texte)
********************************************************************************************************************************/

/* centrage d'un parent avec position libre pour l'enfant */
.da-center-parent{text-align: center;}
.da-left-enfant{display: inline-block;text-align: left;}
.da-center-enfant{display: inline-block;text-align: center;}
.da-right-enfant{display: inline-block;text-align: right;}
.da-justify-enfant{display: inline-block;text-align: justify;}

.da-align-content-center
{
    align-content: center;
}

.da-justify-items-center
{
    justify-items: center;
}

/* centrage d'un parent par rapport à un enfant (attention au différence de largeur qui influence le centrage) */
.da-center-fit-content
{
    width: fit-content;
    margin: auto;
}

/* alignement horizontal des div */
.da-center
{
    display: inline-block;
    width: auto;
}

.da-float-l{float: left;}
.da-float-n{float: none;}
.da-float-r{float: right;}

.da-nowrap{white-space: nowrap;}

.da-text-left{text-align: left;}
.da-text-center{text-align: center;}
.da-text-right{text-align: right;}
.da-text-justify{text-align: justify;}

.da-v-al-t{vertical-align: top;}
.da-v-al-m{vertical-align: middle;}
.da-v-al-b{vertical-align: bottom;}

/********************************************************************************************************************************
                        alignement à utiliser avec da-flex
********************************************************************************************************************************/

.da-justify-content-start{justify-content: flex-start;}
.da-justify-content-end{justify-content: flex-end;} /* bug overflow */

/* attention bug avec overflow */
.da-justify-content-center{justify-content: center;}

/* solution : .item:first-child{margin-left:auto;} et .item:last-child{margin-right:auto;} */
.da-justify-content-center-overflow{overflow-x: auto;}
.da-justify-content-center-overflow > *:first-child{margin-left: auto;}
.da-justify-content-center-overflow > *:last-child{margin-right: auto;}

/* alignement vertical pour les elements flex */
.da-align-items-center
{
    align-items: center;
}

/* retour à la ligne automatique des enfants flex */
/* (à associer avec da-justify-content-xxx ) */
.da-flex-wrap
{
    flex-wrap: wrap;
}

.da-overflow
{
    overflow: auto;
}

.da-overflow-hidden
{
    overflow: hidden; /* masque les sorties de champ : pas de scroll bar */
}

.da-overflow-x-hidden
{
    overflow-x: hidden; /* masque les sorties de champ : pas de scroll bar */
}

/********************************************************************************************************************************
                                        marge (5px / 7px / 20px)
********************************************************************************************************************************/

.da-mg-auto{margin: auto;}.da-mgl-auto{margin-left: auto;}.da-mgt-auto{margin-top: auto;}.da-mgr-auto{margin-right: auto;}.da-mgb-auto{margin-bottom: auto;}.da-mglt-auto{margin-left: auto;margin-top: auto;}.da-mgtb-auto{margin-top: auto;margin-bottom: auto;}.da-mglr-auto{margin-left: auto;margin-right: auto;}

.da-mg-332{margin: -332px;}.da-mgl-332{margin-left: -332px;}.da-mgt-332{margin-top: -332px;}.da-mgr-332{margin-right: -332px;}.da-mgb-332{margin-bottom: -332px;}.da-mglt-332{margin-left: -332px;margin-top: -332px;}.da-mgtb-332{margin-top: -332px;margin-bottom: -332px;}.da-mglr-332{margin-left: -332px;margin-right: -332px;}
.da-mg-150{margin: -150px;}.da-mgl-150{margin-left: -150px;}.da-mgt-150{margin-top: -150px;}.da-mgr-150{margin-right: -150px;}.da-mgb-150{margin-bottom: -150px;}.da-mglt-150{margin-left: -150px;margin-top: -150px;}.da-mgtb-150{margin-top: -150px;margin-bottom: -150px;}.da-mglr-150{margin-left: -150px;margin-right: -150px;}
.da-mg-110{margin: -110px;}.da-mgl-110{margin-left: -110px;}.da-mgt-110{margin-top: -110px;}.da-mgr-110{margin-right: -110px;}.da-mgb-110{margin-bottom: -110px;}.da-mglt-110{margin-left: -110px;margin-top: -110px;}.da-mgtb-110{margin-top: -110px;margin-bottom: -110px;}.da-mglr-110{margin-left: -110px;margin-right: -110px;}
.da-mg-100{margin: -100px;}.da-mgl-100{margin-left: -100px;}.da-mgt-100{margin-top: -100px;}.da-mgr-100{margin-right: -100px;}.da-mgb-100{margin-bottom: -100px;}.da-mglt-100{margin-left: -100px;margin-top: -100px;}.da-mgtb-100{margin-top: -100px;margin-bottom: -100px;}.da-mglr-100{margin-left: -100px;margin-right: -100px;}

.da-mg-90{margin: -90px;}.da-mgl-90{margin-left: -90px;}.da-mgt-90{margin-top: -90px;}.da-mgr-90{margin-right: -90px;}.da-mgb-90{margin-bottom: -90px;}.da-mglt-90{margin-left: -90px;margin-top: -90px;}.da-mgtb-90{margin-top: -90px;margin-bottom: -90px;}.da-mglr-90{margin-left: -90px;margin-right: -90px;}
.da-mg-40{margin: -40px;}.da-mgl-40{margin-left: -40px;}.da-mgt-40{margin-top: -40px;}.da-mgr-40{margin-right: -40px;}.da-mgb-40{margin-bottom: -40px;}.da-mglt-40{margin-left: -40px;margin-top: -40px;}.da-mgtb-40{margin-top: -40px;margin-bottom: -40px;}.da-mglr-40{margin-left: -40px;margin-right: -40px;}
.da-mg-20{margin: -20px;}.da-mgl-20{margin-left: -20px;}.da-mgt-20{margin-top: -20px;}.da-mgr-20{margin-right: -20px;}.da-mgb-20{margin-bottom: -20px;}.da-mglt-20{margin-left: -20px;margin-top: -20px;}.da-mgtb-20{margin-top: -20px;margin-bottom: -20px;}.da-mglr-20{margin-left: -20px;margin-right: -20px;}
.da-mg-10{margin: -10px;}.da-mgl-10{margin-left: -10px;}.da-mgt-10{margin-top: -10px;}.da-mgr-10{margin-right: -10px;}.da-mgb-10{margin-bottom: -10px;}.da-mglt-10{margin-left: -10px;margin-top: -10px;}.da-mgtb-10{margin-top: -10px;margin-bottom: -10px;}.da-mglr-10{margin-left: -10px;margin-right: -10px;}
.da-mg-7{margin: -7px;}.da-mgl-7{margin-left: -7px;}.da-mgt-7{margin-top: -7px;}.da-mgr-7{margin-right: -7px;}.da-mgb-7{margin-bottom: -7px;}.da-mglt-7{margin-left: -7px;margin-top: -7px;}.da-mgtb-7{margin-top: -7px;margin-bottom: -7px;}.da-mglr-7{margin-left: -7px;margin-right: -7px;}

.da-mg-1{margin: -1px;}.da-mgl-1{margin-left: -1px;}.da-mgt-1{margin-top: -1px;}.da-mgr-1{margin-right: -1px;}.da-mgb-1{margin-bottom: -1px;}.da-mglt-1{margin-left: -1px;margin-top: -1px;}.da-mgtb-1{margin-top: -1px;margin-bottom: -1px;}.da-mglr-1{margin-left: -1px;margin-right: -1px;}

.da-mg0{margin: 0px;}.da-mgl0{margin-left: 0px;}.da-mgt0{margin-top: 0px;}.da-mgr0{margin-right: 0px;}.da-mgb0{margin-bottom: 0px;}.da-mglt0{margin-left: 0px;margin-top: 0px;}.da-mgtb0{margin-top: 0px;margin-bottom: 0px;}.da-mglr0{margin-left: 0px;margin-right: 0px;}

.da-mg5{margin: 5px;}.da-mgl5{margin-left: 5px;}.da-mgt5{margin-top: 5px;}.da-mgr5{margin-right: 5px;}.da-mgb5{margin-bottom: 5px;}.da-mglt5{margin-left: 5px;margin-top: 5px;}.da-mgtb5{margin-top: 5px;margin-bottom: 5px;}.da-mglr5{margin-left: 5px;margin-right: 5px;}
.da-mg7{margin: 7px;}.da-mgl7{margin-left: 7px;}.da-mgt7{margin-top: 7px;}.da-mgr7{margin-right: 7px;}.da-mgb7{margin-bottom: 7px;}.da-mglt7{margin-left: 7px;margin-top: 7px;}.da-mgtb7{margin-top: 7px;margin-bottom: 7px;}.da-mglr7{margin-left: 7px;margin-right: 7px;}

.da-mg10{margin: 10px;}.da-mgl10{margin-left: 10px;}.da-mgt10{margin-top: 10px;}.da-mgr10{margin-right: 10px;}.da-mgb10{margin-bottom: 10px;}.da-mglt10{margin-left: 10px;margin-top: 10px;}.da-mgtb10{margin-top: 10px;margin-bottom: 10px;}.da-mglr10{margin-left: 10px;margin-right: 10px;}
.da-mg15{margin: 15px;}.da-mgl15{margin-left: 15px;}.da-mgt15{margin-top: 15px;}.da-mgr15{margin-right: 15px;}.da-mgb15{margin-bottom: 15px;}.da-mglt15{margin-left: 15px;margin-top: 15px;}.da-mgtb15{margin-top: 15px;margin-bottom: 15px;}.da-mglr15{margin-left: 15px;margin-right: 15px;}
.da-mg20{margin: 20px;}.da-mgl20{margin-left: 20px;}.da-mgt20{margin-top: 20px;}.da-mgr20{margin-right: 20px;}.da-mgb20{margin-bottom: 20px;}.da-mglt20{margin-left: 20px;margin-top: 20px;}.da-mgtb20{margin-top: 20px;margin-bottom: 20px;}.da-mglr20{margin-left: 20px;margin-right: 20px;}
.da-mg25{margin: 25px;}.da-mgl25{margin-left: 25px;}.da-mgt25{margin-top: 25px;}.da-mgr25{margin-right: 25px;}.da-mgb25{margin-bottom: 25px;}.da-mglt25{margin-left: 25px;margin-top: 25px;}.da-mgtb25{margin-top: 25px;margin-bottom: 25px;}.da-mglr25{margin-left: 25px;margin-right: 25px;}
.da-mg30{margin: 30px;}.da-mgl30{margin-left: 30px;}.da-mgt30{margin-top: 30px;}.da-mgr30{margin-right: 30px;}.da-mgb30{margin-bottom: 30px;}.da-mglt30{margin-left: 30px;margin-top: 30px;}.da-mgtb30{margin-top: 30px;margin-bottom: 30px;}.da-mglr30{margin-left: 30px;margin-right: 30px;}
.da-mg40{margin: 40px;}.da-mgl40{margin-left: 40px;}.da-mgt40{margin-top: 40px;}.da-mgr40{margin-right: 40px;}.da-mgb40{margin-bottom: 40px;}.da-mglt40{margin-left: 40px;margin-top: 40px;}.da-mgtb40{margin-top: 40px;margin-bottom: 40px;}.da-mglr40{margin-left: 40px;margin-right: 40px;}
.da-mg65{margin: 65px;}.da-mgl65{margin-left: 65px;}.da-mgt65{margin-top: 65px;}.da-mgr65{margin-right: 65px;}.da-mgb65{margin-bottom: 65px;}.da-mglt65{margin-left: 65px;margin-top: 65px;}.da-mgtb65{margin-top: 65px;margin-bottom: 65px;}.da-mglr65{margin-left: 65px;margin-right: 65px;}
.da-mg80{margin: 80px;}.da-mgl80{margin-left: 80px;}.da-mgt80{margin-top: 80px;}.da-mgr80{margin-right: 80px;}.da-mgb80{margin-bottom: 80px;}.da-mglt80{margin-left: 80px;margin-top: 80px;}.da-mgtb80{margin-top: 80px;margin-bottom: 80px;}.da-mglr80{margin-left: 80px;margin-right: 80px;}

.da-mg110{margin: 110px;}.da-mgl110{margin-left: 110px;}.da-mgt110{margin-top: 110px;}.da-mgr110{margin-right: 110px;}.da-mgb110{margin-bottom: 110px;}.da-mglt110{margin-left: 110px;margin-top: 110px;}.da-mgtb110{margin-top: 110px;margin-bottom: 110px;}.da-mglr110{margin-left: 110px;margin-right: 110px;}
.da-mg130{margin: 130px;}.da-mgl130{margin-left: 130px;}.da-mgt130{margin-top: 130px;}.da-mgr130{margin-right: 130px;}.da-mgb130{margin-bottom: 130px;}.da-mglt130{margin-left: 130px;margin-top: 130px;}.da-mgtb130{margin-top: 130px;margin-bottom: 130px;}.da-mglr130{margin-left: 130px;margin-right: 130px;}

.da-mg-3pc{margin: -3%;}.da-mgl-3pc{margin-left: -3%;}.da-mgt-3pc{margin-top: -3%;}.da-mgr-3pc{margin-right: -3%;}.da-mgb-3pc{margin-bottom: -3%;}.da-mglt-3pc{margin-left: -3%;margin-top: -3%;}.da-mgtb-3pc{margin-top: -3%;margin-bottom: -3%;}.da-mglr-3pc{margin-left: -3%;margin-right: -3%;}
.da-mg-10pc{margin: -10%;}.da-mgl-10pc{margin-left: -10%;}.da-mgt-10pc{margin-top: -10%;}.da-mgr-10pc{margin-right: -10%;}.da-mgb-10pc{margin-bottom: -10%;}.da-mglt-10pc{margin-left: -10%;margin-top: -10%;}.da-mgtb-10pc{margin-top: -10%;margin-bottom: -10%;}.da-mglr-10pc{margin-left: -10%;margin-right: -10%;}
.da-mg3pc{margin: 3%;}.da-mgl3pc{margin-left: 3%;}.da-mgt3pc{margin-top: 3%;}.da-mgr3pc{margin-right: 3%;}.da-mgb3pc{margin-bottom: 3%;}.da-mglt3pc{margin-left: 3%;margin-top: 3%;}.da-mgtb3pc{margin-top: 3%;margin-bottom: 3%;}.da-mglr3pc{margin-left: 3%;margin-right: 3%;}
.da-mg10pc{margin: 10%;}.da-mgl10pc{margin-left: 10%;}.da-mgt10pc{margin-top: 10%;}.da-mgr10pc{margin-right: 10%;}.da-mgb10pc{margin-bottom: 10%;}.da-mglt10pc{margin-left: 10%;margin-top: 10%;}.da-mgtb10pc{margin-top: 10%;margin-bottom: 10%;}.da-mglr10pc{margin-left: 10%;margin-right: 10%;}

/********************************************************************************************************************************
                                        padding (5px / 7px / 15px)
********************************************************************************************************************************/

.da-pd0{padding: 0px;}.da-pdl0{padding-left: 0px;}.da-pdt0{padding-top: 0px;}.da-pdr0{padding-right: 0px;}.da-pdb0{padding-bottom: 0px;}.da-pdlt0{padding-left: 0px;padding-top: 0px;}.da-pdtb0{padding-top: 0px;padding-bottom: 0px;}.da-pdlr0{padding-left: 0px;padding-right: 0px;}

.da-pd2{padding: 2px;}.da-pdl2{padding-left: 2px;}.da-pdt2{padding-top: 2px;}.da-pdr2{padding-right: 2px;}.da-pdb2{padding-bottom: 2px;}.da-pdlt2{padding-left: 2px;padding-top: 2px;}.da-pdtb2{padding-top: 2px;padding-bottom: 2px;}.da-pdlr2{padding-left: 2px;padding-right: 2px;}
.da-pd3{padding: 3px;}.da-pdl3{padding-left: 3px;}.da-pdt3{padding-top: 3px;}.da-pdr3{padding-right: 3px;}.da-pdb3{padding-bottom: 3px;}.da-pdlt3{padding-left: 3px;padding-top: 3px;}.da-pdtb3{padding-top: 3px;padding-bottom: 3px;}.da-pdlr3{padding-left: 3px;padding-right: 3px;}
.da-pd5{padding: 5px;}.da-pdl5{padding-left: 5px;}.da-pdt5{padding-top: 5px;}.da-pdr5{padding-right: 5px;}.da-pdb5{padding-bottom: 5px;}.da-pdlt5{padding-left: 5px;padding-top: 5px;}.da-pdtb5{padding-top: 5px;padding-bottom: 5px;}.da-pdlr5{padding-left: 5px;padding-right: 5px;}
.da-pd7{padding: 7px;}.da-pdl7{padding-left: 7px;}.da-pdt7{padding-top: 7px;}.da-pdr7{padding-right: 7px;}.da-pdb7{padding-bottom: 7px;}.da-pdlt7{padding-left: 7px;padding-top: 7px;}.da-pdtb7{padding-top: 7px;padding-bottom: 7px;}.da-pdlr7{padding-left: 7px;padding-right: 7px;}
.da-pd8{padding: 8px;}.da-pdl8{padding-left: 8px;}.da-pdt8{padding-top: 8px;}.da-pdr8{padding-right: 8px;}.da-pdb8{padding-bottom: 8px;}.da-pdlt8{padding-left: 8px;padding-top: 8px;}.da-pdtb8{padding-top: 8px;padding-bottom: 8px;}.da-pdlr8{padding-left: 8px;padding-right: 8px;}

.da-pd10{padding: 10px;}.da-pdl10{padding-left: 10px;}.da-pdt10{padding-top: 10px;}.da-pdr10{padding-right: 10px;}.da-pdb10{padding-bottom: 10px;}.da-pdlt10{padding-left: 10px;padding-top: 10px;}.da-pdtb10{padding-top: 10px;padding-bottom: 10px;}.da-pdlr10{padding-left: 10px;padding-right: 10px;}
.da-pd15{padding: 15px;}.da-pdl15{padding-left: 15px;}.da-pdt15{padding-top: 15px;}.da-pdr15{padding-right: 15px;}.da-pdb15{padding-bottom: 15px;}.da-pdlt15{padding-left: 15px;padding-top: 15px;}.da-pdtb15{padding-top: 15px;padding-bottom: 15px;}.da-pdlr15{padding-left: 15px;padding-right: 15px;}
.da-pd20{padding: 20px;}.da-pdl20{padding-left: 20px;}.da-pdt20{padding-top: 20px;}.da-pdr20{padding-right: 20px;}.da-pdb20{padding-bottom: 20px;}.da-pdlt20{padding-left: 20px;padding-top: 20px;}.da-pdtb20{padding-top: 20px;padding-bottom: 20px;}.da-pdlr20{padding-left: 20px;padding-right: 20px;}
.da-pd25{padding: 25px;}.da-pdl25{padding-left: 25px;}.da-pdt25{padding-top: 25px;}.da-pdr25{padding-right: 25px;}.da-pdb25{padding-bottom: 25px;}.da-pdlt25{padding-left: 25px;padding-top: 25px;}.da-pdtb25{padding-top: 25px;padding-bottom: 25px;}.da-pdlr25{padding-left: 25px;padding-right: 25px;}
.da-pd30{padding: 30px;}.da-pdl30{padding-left: 30px;}.da-pdt30{padding-top: 30px;}.da-pdr30{padding-right: 30px;}.da-pdb30{padding-bottom: 30px;}.da-pdlt30{padding-left: 30px;padding-top: 30px;}.da-pdtb30{padding-top: 30px;padding-bottom: 30px;}.da-pdlr30{padding-left: 30px;padding-right: 30px;}
.da-pd40{padding: 40px;}.da-pdl40{padding-left: 40px;}.da-pdt40{padding-top: 40px;}.da-pdr40{padding-right: 40px;}.da-pdb40{padding-bottom: 40px;}.da-pdlt40{padding-left: 40px;padding-top: 40px;}.da-pdtb40{padding-top: 40px;padding-bottom: 40px;}.da-pdlr40{padding-left: 40px;padding-right: 40px;}
.da-pd60{padding: 60px;}.da-pdl60{padding-left: 60px;}.da-pdt60{padding-top: 60px;}.da-pdr60{padding-right: 60px;}.da-pdb60{padding-bottom: 60px;}.da-pdlt60{padding-left: 60px;padding-top: 60px;}.da-pdtb60{padding-top: 60px;padding-bottom: 60px;}.da-pdlr60{padding-left: 60px;padding-right: 60px;}
.da-pd90{padding: 90px;}.da-pdl90{padding-left: 90px;}.da-pdt90{padding-top: 90px;}.da-pdr90{padding-right: 90px;}.da-pdb90{padding-bottom: 90px;}.da-pdlt90{padding-left: 90px;padding-top: 90px;}.da-pdtb90{padding-top: 90px;padding-bottom: 90px;}.da-pdlr90{padding-left: 90px;padding-right: 90px;}

.da-pd120{padding: 120px;}.da-pdl120{padding-left: 120px;}.da-pdt120{padding-top: 120px;}.da-pdr120{padding-right: 120px;}.da-pdb120{padding-bottom: 120px;}.da-pdlt120{padding-left: 120px;padding-top: 120px;}.da-pdtb120{padding-top: 120px;padding-bottom: 120px;}.da-pdlr120{padding-left: 120px;padding-right: 120px;}
.da-pd160{padding: 160px;}.da-pdl160{padding-left: 160px;}.da-pdt160{padding-top: 160px;}.da-pdr160{padding-right: 160px;}.da-pdb160{padding-bottom: 160px;}.da-pdlt160{padding-left: 160px;padding-top: 160px;}.da-pdtb160{padding-top: 160px;padding-bottom: 160px;}.da-pdlr160{padding-left: 160px;padding-right: 160px;}

.da-pd1pc{padding: 1%;}.da-pdl1pc{padding-left: 1%;}.da-pdt1pc{padding-top: 1%;}.da-pdr1pc{padding-right: 1%;}.da-pdb1pc{padding-bottom: 1%;}.da-pdlt1pc{padding-left: 1%;padding-top: 1%;}.da-pdtb1pc{padding-top: 1%;padding-bottom: 1%;}.da-pdlr1pc{padding-left: 1%;padding-right: 1%;}
.da-pd2pc{padding: 2%;}.da-pdl2pc{padding-left: 2%;}.da-pdt2pc{padding-top: 2%;}.da-pdr2pc{padding-right: 2%;}.da-pdb2pc{padding-bottom: 2%;}.da-pdlt2pc{padding-left: 2%;padding-top: 2%;}.da-pdtb2pc{padding-top: 2%;padding-bottom: 2%;}.da-pdlr2pc{padding-left: 2%;padding-right: 2%;}
.da-pd3pc{padding: 3%;}.da-pdl3pc{padding-left: 3%;}.da-pdt3pc{padding-top: 3%;}.da-pdr3pc{padding-right: 3%;}.da-pdb3pc{padding-bottom: 3%;}.da-pdlt3pc{padding-left: 3%;padding-top: 3%;}.da-pdtb3pc{padding-top: 3%;padding-bottom: 3%;}.da-pdlr3pc{padding-left: 3%;padding-right: 3%;}
.da-pd5pc{padding: 5%;}.da-pdl5pc{padding-left: 5%;}.da-pdt5pc{padding-top: 5%;}.da-pdr5pc{padding-right: 5%;}.da-pdb5pc{padding-bottom: 5%;}.da-pdlt5pc{padding-left: 5%;padding-top: 5%;}.da-pdtb5pc{padding-top: 5%;padding-bottom: 5%;}.da-pdlr5pc{padding-left: 5%;padding-right: 5%;}
.da-pd7pc{padding: 7%;}.da-pdl7pc{padding-left: 7%;}.da-pdt7pc{padding-top: 7%;}.da-pdr7pc{padding-right: 7%;}.da-pdb7pc{padding-bottom: 7%;}.da-pdlt7pc{padding-left: 7%;padding-top: 7%;}.da-pdtb7pc{padding-top: 7%;padding-bottom: 7%;}.da-pdlr7pc{padding-left: 7%;padding-right: 7%;}
.da-pd8pc{padding: 8%;}.da-pdl8pc{padding-left: 8%;}.da-pdt8pc{padding-top: 8%;}.da-pdr8pc{padding-right: 8%;}.da-pdb8pc{padding-bottom: 8%;}.da-pdlt8pc{padding-left: 8%;padding-top: 8%;}.da-pdtb8pc{padding-top: 8%;padding-bottom: 8%;}.da-pdlr8pc{padding-left: 8%;padding-right: 8%;}

/********************************************************************************************************************************
                        largeur element (en px)
                        hauteur element (en px)
********************************************************************************************************************************/

.da-w-min-255{min-width: 255px;}
.da-w-min-350{min-width: 350px;}

.da-w-max-55pc{max-width: 55%;}
.da-w-max-65pc{max-width: 65%;}
.da-w-max-75pc{max-width: 75%;}
.da-w-max-85pc{max-width: 85%;}
.da-w-max-95pc{max-width: 95%;}
.da-w-max-100pc{max-width: 100%;}

.da-h-max-600{max-height: 600px;}
.da-h-max-60vh{max-height: 60vh;} /* % fenetre */
.da-h-max-100vh{max-height: 100vh;} /* % fenetre */

.da-w-20pc{width: 20%;}
.da-w-65pc{width: 65%;}
.da-w-75pc{width: 75%;}
.da-w-85pc{width: 85%;}
.da-w-95pc{width: 95%;}
.da-w-100pc{width: 100%;}

.da-w-300{width: 300px;}
.da-w-400{width: 400px;}
.da-w-450{width: 450px;}

.da-h-auto{height: auto;}
.da-h-60{height: 60px;}
.da-h-76{height: 76px;}
.da-h-100{height: 100px;}
.da-h-200{height: 200px;}
.da-h-300{height: 300px;}
.da-h-320{height: 320px;}
.da-h-350{height: 350px;}
.da-h-400{height: 400px;}
.da-h-450{height: 450px;}
.da-h-800{height: 800px;}
.da-h-100vh{height: 100vh;} /* % fenetre */


/********************************************************************************************************************************
                        largeur colonne (12 découpages)
                        hauteur colonne (12 découpages)
********************************************************************************************************************************/

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

.da-h-s1{height: 8.33%}
.da-h-s2{height: 16.66%}
.da-h-s3{height: 25%}
.da-h-s4{height: 33.33%}
.da-h-s5{height: 41.66%}
.da-h-s6{height: 50%}
.da-h-s7{height: 58.33%}
.da-h-s8{height: 66.66%}
.da-h-s9{height: 75%}
.da-h-s10{height: 83.33%}
.da-h-s11{height: 91.66%}
.da-h-s12{height: 100%}

/* m : ecran medium */
@media (min-width: 768px)
{
    .da-m0{width: 0%}
    .da-m1{width: 8.33%}
    .da-m2{width: 16.66%}
    .da-m3{width: 25%}
    .da-m4{width: 33.33%}
    .da-m5{width: 41.66%}
    .da-m6{width: 50%}
    .da-m7{width: 58.33%}
    .da-m8{width: 66.66%}
    .da-m9{width: 75%}
    .da-m10{width: 83.33%}
    .da-m11{width: 91.66%}
    .da-m12{width: 100%}

    .da-h-m1{height: 8.33%}
    .da-h-m2{height: 16.66%}
    .da-h-m3{height: 25%}
    .da-h-m4{height: 33.33%}
    .da-h-m5{height: 41.66%}
    .da-h-m6{height: 50%}
    .da-h-m7{height: 58.33%}
    .da-h-m8{height: 66.66%}
    .da-h-m9{height: 75%}
    .da-h-m10{height: 83.33%}
    .da-h-m11{height: 91.66%}
    .da-h-m12{height: 100%}
}

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

    .da-h-l1{height: 8.33%}
    .da-h-l2{height: 16.66%}
    .da-h-l3{height: 25%}
    .da-h-l4{height: 33.33%}
    .da-h-l5{height: 41.66%}
    .da-h-l6{height: 50%}
    .da-h-l7{height: 58.33%}
    .da-h-l8{height: 66.66%}
    .da-h-l9{height: 75%}
    .da-h-l10{height: 83.33%}
    .da-h-l11{height: 91.66%}
    .da-h-l12{height: 100%}
}



/********************************************************************************************************************************
                        souris (pointer / move / attente)
********************************************************************************************************************************/

.da-souris
{
    cursor: default;
}

.da-souris-pointer
{
    cursor: pointer;
    pointer-events: auto;
}

.da-souris-move
{
    cursor: move;
}

.da-souris-attente
{
    cursor: progress;
}

/********************************************************************************************************************************
                        gras / italique / souligné du texte
********************************************************************************************************************************/

.da-text-weight-300{font-weight: 300;}
.da-text-weight-400{font-weight: 400;}
.da-text-weight-500{font-weight: 500;}
.da-text-weight-bold{font-weight: bold;}

.da-text-italic{font-style: italic;}

.da-text-underline{text-decoration: underline;}

/********************************************************************************************************************************
                        taille du texte
********************************************************************************************************************************/

.da-text-size-12{font-size: 1.2rem;}
.da-text-size-14{font-size: 1.4rem;}
.da-text-size-15{font-size: 1.5rem;}
.da-text-size-16{font-size: 1.6rem;}
.da-text-size-18{font-size: 1.8rem;}
.da-text-size-20{font-size: 2.0rem;}
.da-text-size-22{font-size: 2.2rem;}
.da-text-size-24{font-size: 2.4rem;}
.da-text-size-26{font-size: 2.6rem;}
.da-text-size-28{font-size: 2.8rem;}
.da-text-size-30{font-size: 3.0rem;}
.da-text-size-40{font-size: 4.0rem;}
.da-text-size-60{font-size: 6.0rem;}
.da-text-size-xxx-large{font-size: xxx-large;}
.da-text-size-30vw{font-size: 3.0vw;}/* % de la fenetre */
.da-text-size-40vw{font-size: 4.0vw;}/* % de la fenetre */
.da-text-size-50vw{font-size: 5.0vw;}/* % de la fenetre */
.da-text-size-60vw{font-size: 6.0vw;}/* % de la fenetre */
.da-text-size-80vw{font-size: 8.0vw;}/* % de la fenetre */

/********************************************************************************************************************************
                        interligne du texte
********************************************************************************************************************************/

.da-text-interligne-22{line-height: 2.2rem;}
.da-text-interligne-32{line-height: 3.2rem;}
.da-text-interligne-34{line-height: 3.4rem;}
.da-text-interligne-36{line-height: 3.6rem;}

/********************************************************************************************************************************
                        style du texte
********************************************************************************************************************************/

.da-text-no-deco{text-decoration: none;}

/* texte en lettres transparentes sur cadre blanc au dessus d'une image */
.da-text-transparent{background-color: white; padding: 20px; color: black; mix-blend-mode: screen; border-radius: 4px;}

/* position ltrb + black white primaire + transparence */
.da-text-shadow-lb333b3{text-shadow: -0.03em 0.03em 0.03em rgba(0,0,0,0.3);}
.da-text-shadow-lb444w4{text-shadow: -0.04em 0.04em 0.04em rgba(255,255,255,0.4);}
.da-text-shadow-lb558b1{text-shadow: -0.05em 0.05em 0.08em rgba(0,0,0,0.1);}
.da-text-shadow-lb550p{text-shadow: -0.05em 0.05em 0em rgba(var(--das-rgb-primaire),1);}

/********************************************************************************************************************************
                        couleurs et couleurs hover (background / texte / bordure)
********************************************************************************************************************************/
/* couleur background */
.da-vert-editeur,.da-hover-vert-editeur:hover{color:#000;background-color:var(--da-vert-vif-logo-da)}
.da-vert-logo-da,.da-hover-vert-logo-da:hover{color:#fff;background-color:var(--da-vert-logo-da)}
.da-bleu-logo-da,.da-hover-bleu-logo-da:hover{color:#fff;background-color:var(--da-bleu-logo-da)}
.da-rouge-logo-da,.da-hover-rouge-logo-da:hover{color:#fff;background-color:var(--da-rouge-logo-da)}

.da-coul-primaire,.da-hover-coul-primaire:hover{color:var(--das-coul-primaire-texte);background-color:var(--das-coul-primaire)}
.da-coul-primaire-clair,.da-hover-coul-primaire-clair:hover{color:var(--das-coul-primaire-clair-texte);background-color:var(--das-coul-primaire-clair)}
.da-coul-primaire-fonce,.da-hover-coul-primaire-fonce:hover{color:var(--das-coul-primaire-fonce-texte);background-color:var(--das-coul-primaire-fonce)}
.da-coul-secondaire,.da-hover-coul-secondaire:hover{color:var(--das-coul-secondaire-texte);background-color:var(--das-coul-secondaire)}
.da-coul-secondaire-clair,.da-hover-coul-secondaire-clair:hover{color:var(--das-coul-secondaire-clair-texte);background-color:var(--das-coul-secondaire-clair)}
.da-coul-secondaire-fonce,.da-hover-coul-secondaire-fonce:hover{color:var(--das-coul-secondaire-fonce-texte);background-color:var(--das-coul-secondaire-fonce)}
.da-coul-peps,.da-hover-coul-peps:hover{color:var(--das-coul-peps-texte);background-color:var(--das-coul-peps)}
.da-coul-peps-clair,.da-hover-coul-peps-clair:hover{color:var(--das-coul-peps-clair-texte);background-color:var(--das-coul-peps-clair)}
.da-coul-peps-fonce,.da-hover-coul-peps-fonce:hover{color:var(--das-coul-peps-fonce-texte);background-color:var(--das-coul-peps-fonce)}

.da-amber,.da-hover-amber:hover{color:var(--da-body-txt-col);background-color:#ffc107}
.da-aqua,.da-hover-aqua:hover{color:var(--da-body-txt-col);background-color:#00ffff}
.da-blue,.da-hover-blue:hover{color:#fff;background-color:#2196F3}
.da-brown,.da-hover-brown:hover{color:#fff;background-color:#795548}
.da-crimson,.da-hover-crimson:hover{color:#fff;background-color:#ed143d}
.da-cyan,.da-hover-cyan:hover{color:var(--da-body-txt-col);background-color:#00bcd4}
.da-blue-grey,.da-hover-blue-grey:hover,.da-blue-gray,.da-hover-blue-gray:hover{color:#fff;background-color:#607d8b}
.da-green,.da-hover-green:hover{color:#fff;background-color:#4CAF50}
.da-indigo,.da-hover-indigo:hover{color:#fff;background-color:#3f51b5}
.da-khaki,.da-hover-khaki:hover{color:var(--da-body-txt-col);background-color:#f0e68c}
.da-lime,.da-hover-lime:hover{color:var(--da-body-txt-col);background-color:#cddc39}
.da-orange,.da-hover-orange:hover{color:var(--da-body-txt-col);background-color:#ff9800}
.da-deep-orange,.da-hover-deep-orange:hover{color:#fff;background-color:#ff5722}
.da-pink,.da-hover-pink:hover{color:#fff;background-color:#e91e63}
.da-purple,.da-hover-purple:hover{color:#fff;background-color:#9c27b0}
.da-deep-purple,.da-hover-deep-purple:hover{color:#fff;background-color:#673ab7}
.da-red,.da-hover-red:hover{color:#fff;background-color:#f44336}
.da-antique-white,.da-hover-sand:hover{color:var(--da-body-txt-col);background-color:#faebd7}
.da-sand,.da-hover-sand:hover{color:var(--da-body-txt-col);background-color:#fdf5e6}
.da-teal,.da-hover-teal:hover{color:#fff;background-color:#009688}
.da-yellow,.da-hover-yellow:hover{color:var(--da-body-txt-col);background-color:#ffeb3b}
.da-gold,.da-hover-gold:hover{color:var(--da-body-txt-col);background-color:#ffd700}
.da-white,.da-hover-white:hover{color:var(--da-body-txt-col);background-color:var(--da-white);}
.da-blanc,.da-hover-blanc:hover{color:var(--da-body-txt-col);background-color:var(--da-blanc);}
.da-black,.da-hover-black:hover{color:#fff;background-color:var(--da-body-txt-col)}
.da-grey,.da-hover-grey:hover,.da-gray,.da-hover-gray:hover{color:var(--da-body-txt-col);background-color:#9e9e9e}
.da-dark-grey,.da-hover-dark-grey:hover,.da-dark-gray,.da-hover-dark-gray:hover{color:#fff;background-color:#616161}
.da-dark-cyan,.da-hover-dark-cyan:hover,.da-dark-cyan,.da-hover-dark-cyan:hover{color:#fff;background-color:#008b8b}
.da-pale-red,.da-hover-pale-red:hover{color:var(--da-body-txt-col);background-color:#ffdddd}
.da-pale-green,.da-hover-pale-green:hover{color:var(--da-body-txt-col);background-color:#ddffdd}
.da-pale-yellow,.da-hover-pale-yellow:hover{color:var(--da-body-txt-col);background-color:#ffffcc}
.da-pale-blue,.da-hover-pale-blue:hover{color:var(--da-body-txt-col);background-color:#ddffff}
.da-alice-blue,.da-hover-alice-blue:hover{color:var(--da-body-txt-col);background-color:#f0f8ff}
.da-cadet-blue,.da-hover-cadet-blue:hover{color:#fff;background-color:#5f9ea0}
.da-royal-blue,.da-hover-royal-blue:hover{color:#fff;background-color:#4169e1}

.da-light-blue,.da-hover-light-blue:hover{color:var(--da-body-txt-col);background-color:#87CEEB}
.da-light-purple,.da-hover-light-purple:hover{color:var(--da-body-txt-col);background-color:#bd65cc}
.da-light-green,.da-hover-light-green:hover{color:var(--da-body-txt-col);background-color:#8bc34a}
.da-light-orange,.da-hover-light-orange:hover{color:var(--da-body-txt-col);background-color:#ffcb7e}
.da-light-yellow,.da-hover-light-yellow:hover{color:var(--da-body-txt-col);background-color:#fdf398}
.da-light-red,.da-hover-light-red:hover{color:var(--da-body-txt-col);background-color:#ff958d}
.da-light-grey,.da-hover-light-grey:hover,.da-light-gray,.da-hover-light-gray:hover{color:var(--da-body-txt-col);background-color:#f1f1f1}

/* eclaircir la couleur parent pour rendre l'enfant plus clair */
.da-light10{background-color: rgba(255, 255, 255, 0.1);}
.da-light20{background-color: rgba(255, 255, 255, 0.2);}
.da-light30{background-color: rgba(255, 255, 255, 0.3);}
.da-light40{background-color: rgba(255, 255, 255, 0.4);}
.da-light50{background-color: rgba(255, 255, 255, 0.5);}

/* assombrir la couleur parent pour rendre l'enfant plus foncé */
.da-shadow75{background-color: rgba(0, 0, 0, 0.75);}
.da-shadow60{background-color: rgba(0, 0, 0, 0.6);}
.da-shadow50{background-color: rgba(0, 0, 0, 0.5);}
.da-shadow40{background-color: rgba(0, 0, 0, 0.4);}
.da-shadow30{background-color: rgba(0, 0, 0, 0.3);}
.da-shadow20{background-color: rgba(0, 0, 0, 0.2);}
.da-shadow10{background-color: rgba(0, 0, 0, 0.1);}

/* couleur texte */

.da-text-coul{color: var(--das-coul-texte);}
.da-text-coul-clair{color: var(--das-coul-texte-clair);}
.da-text-coul-fonce{color: var(--das-coul-texte-fonce);}
.da-text-coul-primaire{color: var(--das-coul-primaire);}
.da-text-coul-primaire-clair{color: var(--das-coul-primaire-clair);}
.da-text-coul-primaire-fonce{color: var(--das-coul-primaire-fonce);}
.da-text-coul-secondaire{color: var(--das-coul-secondaire);}
.da-text-coul-secondaire-clair{color: var(--das-coul-secondaire-clair);}
.da-text-coul-secondaire-fonce{color: var(--das-coul-secondaire-fonce);}
.da-text-coul-peps{color: var(--das-coul-peps);}
.da-text-coul-peps-clair{color: var(--das-coul-peps-clair);}
.da-text-coul-peps-fonce{color: var(--das-coul-peps-fonce);}

.da-text-logo-bleu{color:#548AB6;}
.da-text-logo-rouge{color:#E10720;}
.da-text-logo-vert{color:#5BC7B0;}
.da-text-logo-bleu-clair{color:#B0C9DD;}
.da-text-logo-rouge-clair{color:#ffaeb7;}
.da-text-logo-vert-clair{color:#aef1e3;}

.da-text-amber,.da-hover-text-amber:hover{color:#ffc107}
.da-text-aqua,.da-hover-text-aqua:hover{color:#00ffff}
.da-text-blue,.da-hover-text-blue:hover{color:#2196F3}
.da-text-light-blue,.da-hover-text-light-blue:hover{color:#87CEEB}
.da-text-brown,.da-hover-text-brown:hover{color:#795548}
.da-text-cyan,.da-hover-text-cyan:hover{color:#00bcd4}
.da-text-blue-grey,.da-hover-text-blue-grey:hover,.da-text-blue-gray,.da-hover-text-blue-gray:hover{color:#607d8b}
.da-text-green,.da-hover-text-green:hover{color:#4CAF50}
.da-text-light-green,.da-hover-text-light-green:hover{color:#8bc34a}
.da-text-indigo,.da-hover-text-indigo:hover{color:#3f51b5}
.da-text-khaki,.da-hover-text-khaki:hover{color:#b4aa50}
.da-text-lime,.da-hover-text-lime:hover{color:#cddc39}
.da-text-orange,.da-hover-text-orange:hover{color:#ff9800}
.da-text-deep-orange,.da-hover-text-deep-orange:hover{color:#ff5722}
.da-text-pink,.da-hover-text-pink:hover{color:#e91e63}
.da-text-purple,.da-hover-text-purple:hover{color:#9c27b0}
.da-text-deep-purple,.da-hover-text-deep-purple:hover{color:#673ab7}
.da-text-red,.da-hover-text-red:hover{color:#f44336}
.da-text-sand,.da-hover-text-sand:hover{color:#fdf5e6}
.da-text-teal,.da-hover-text-teal:hover{color:#009688}
.da-text-yellow,.da-hover-text-yellow:hover{color:#d2be0e}
.da-text-white,.da-hover-text-white:hover{color:#fff}
.da-text-black,.da-hover-text-black:hover{color:#000}
.da-text-grey,.da-hover-text-grey:hover,.da-text-gray,.da-hover-text-gray:hover{color:#757575}
.da-text-light-grey,.da-hover-text-light-grey:hover,.da-text-light-gray,.da-hover-text-light-gray:hover{color:#f1f1f1}
.da-text-dark-grey,.da-hover-text-dark-grey:hover,.da-text-dark-gray,.da-hover-text-dark-gray:hover{color:#3a3a3a}

/* couleur bordure */
.da-border-primaire,.da-hover-border-primaire:hover{border-color:var(--das-coul-primaire)}
.da-border-primaire-clair,.da-hover-border-primaire-clair:hover{border-color:var(--das-coul-primaire-clair)}
.da-border-primaire-fonce,.da-hover-border-primaire-fonce:hover{border-color:var(--das-coul-primaire-fonce)}
.da-border-secondaire,.da-hover-border-secondaire:hover{border-color:var(--das-coul-secondaire)}
.da-border-secondaire-clair,.da-hover-border-secondaire-clair:hover{border-color:var(--das-coul-secondaire-clair)}
.da-border-secondaire-fonce,.da-hover-border-secondaire-fonce:hover{border-color:var(--das-coul-secondaire-fonce)}
.da-border-peps,.da-hover-border-peps:hover{border-color:var(--das-coul-peps)}
.da-border-peps-clair,.da-hover-border-peps-clair:hover{border-color:var(--das-coul-peps-clair)}
.da-border-peps-fonce,.da-hover-border-peps-fonce:hover{border-color:var(--das-coul-peps-fonce)}

.da-border-amber,.da-hover-border-amber:hover{border-color:#ffc107}
.da-border-aqua,.da-hover-border-aqua:hover{border-color:#00ffff}
.da-border-blue,.da-hover-border-blue:hover{border-color:#2196F3}
.da-border-light-blue,.da-hover-border-light-blue:hover{border-color:#87CEEB}
.da-border-brown,.da-hover-border-brown:hover{border-color:#795548}
.da-border-cyan,.da-hover-border-cyan:hover{border-color:#00bcd4}
.da-border-blue-grey,.da-hover-border-blue-grey:hover,.da-border-blue-gray,.da-hover-border-blue-gray:hover{border-color:#607d8b}
.da-border-green,.da-hover-border-green:hover{border-color:#4CAF50}
.da-border-light-green,.da-hover-border-light-green:hover{border-color:#8bc34a}
.da-border-indigo,.da-hover-border-indigo:hover{border-color:#3f51b5}
.da-border-khaki,.da-hover-border-khaki:hover{border-color:#f0e68c}
.da-border-lime,.da-hover-border-lime:hover{border-color:#cddc39}
.da-border-orange,.da-hover-border-orange:hover{border-color:#ff9800}
.da-border-deep-orange,.da-hover-border-deep-orange:hover{border-color:#ff5722}
.da-border-pink,.da-hover-border-pink:hover{border-color:#e91e63}
.da-border-purple,.da-hover-border-purple:hover{border-color:#9c27b0}
.da-border-deep-purple,.da-hover-border-deep-purple:hover{border-color:#673ab7}
.da-border-red,.da-hover-border-red:hover{border-color:#f44336}
.da-border-sand,.da-hover-border-sand:hover{border-color:#fdf5e6}
.da-border-teal,.da-hover-border-teal:hover{border-color:#009688}
.da-border-yellow,.da-hover-border-yellow:hover{border-color:#ffeb3b}
.da-border-white,.da-hover-border-white:hover{border-color:#fff}
.da-border-black,.da-hover-border-black:hover{border-color:#000}
.da-border-grey,.da-hover-border-grey:hover,.da-border-gray,.da-hover-border-gray:hover{border-color:#9e9e9e}
.da-border-light-grey,.da-hover-border-light-grey:hover,.da-border-light-gray,.da-hover-border-light-gray:hover{border-color:#f1f1f1}
.da-border-dark-grey,.da-hover-border-dark-grey:hover,.da-border-dark-gray,.da-hover-border-dark-gray:hover{border-color:#616161}
.da-border-pale-red,.da-hover-border-pale-red:hover{border-color:#ffe7e7}
.da-border-pale-green,.da-hover-border-pale-green:hover{border-color:#e7ffe7}
.da-border-pale-yellow,.da-hover-border-pale-yellow:hover{border-color:#ffffcc}
.da-border-pale-blue,.da-hover-border-pale-blue:hover{border-color:#e7ffff}