:root
{
/* icones */
/* sans serif */
--da-font-open-sans-serif: "Open Sans", Arial, sans-serif;
}
/* les indispensables */
.da-font-open{font-family: var(--da-font-open-sans-serif);}
/********************************************************************************************************************************
Open Sans
(sans serif, ronde et douce, droite et ramassée)
ideal texte
********************************************************************************************************************************/
@font-face{font-family: 'Open Sans'; font-style: normal; font-weight: normal; src: url('../../polices/indispensables/open_sans/OpenSans-Regular.ttf') format('truetype');}
@font-face{font-family: 'Open Sans'; font-style: italic; font-weight: normal; src: url('../../polices/indispensables/open_sans/OpenSans-Italic.ttf') format('truetype');}
@font-face{font-family: 'Open Sans'; font-style: normal; font-weight: bold; src: url('../../polices/indispensables/open_sans/OpenSans-ExtraBold.ttf') format('truetype');}
@font-face{font-family: 'Open Sans'; font-style: italic; font-weight: bold; src: url('../../polices/indispensables/open_sans/OpenSans-SemiboldItalic.ttf') format('truetype');}
@font-face{font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('../../polices/indispensables/open_sans/OpenSans-Light.ttf') format('truetype');}
@font-face{font-family: 'Open Sans'; font-style: normal; font-weight: 500; src: url('../../polices/indispensables/open_sans/OpenSans-Semibold.ttf') format('truetype');}
@font-face{font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../../polices/indispensables/open_sans/OpenSans-Bold.ttf') format('truetype');}
:root
{
/* icones */
--da-font-icone-del: "icone_del", sans-serif;
/* sans serif */
}
/* les indispensables */
.da-font-icone-del{font-family: var(--da-font-icone-del);}
/********************************************************************************************************************************
icone_del
(icone menu hamburger, triangle menu accordeon, puce de liste...)
********************************************************************************************************************************/
@font-face{font-family: 'icone_del'; font-style: normal; font-weight: normal; src: url('../../polices/indispensables/icone_del/1.0.0/icone_del.otf') format('opentype');}
:root
{
/* manuscrite */
--da-font-feltful-manuscrite: "feltful", Arial, sans-serif;
}
/* les specifiques */
.da-font-feltful{font-family: var(--da-font-feltful-manuscrite);}
/********************************************************************************************************************************
feltful
(police manuscrite oblique façon veleda)
ideal citation - notation
********************************************************************************************************************************/
@font-face{font-family: 'feltful'; font-style: normal; font-weight: normal; src: url('../../polices/specifiques/feltful/feltful_regular.otf') format('opentype');}
:root
{
/* sans serif */
--da-font-louisgeorgecafe-sans-serif: "Louis George Cafe", Arial, sans-serif;
}
/* les specifiques */
.da-font-louisgeorgecafe{font-family: var(--da-font-louisgeorgecafe-sans-serif);}
/********************************************************************************************************************************
Louis George Cafe
(sans serif, ronde et douce, fine, serrée, variantes)
ideal texte / titre / navigation
********************************************************************************************************************************/
@font-face{font-family: 'Louis George Cafe'; font-style:normal; font-weight:300; src:url('../../polices/specifiques/louis-george-cafe/Louis-George-Cafe_Light.ttf') format('truetype');}
@font-face{font-family: 'Louis George Cafe'; font-style:italic; font-weight:300; src:url('../../polices/specifiques/louis-george-cafe/Louis-George-Cafe_Light-Italic.ttf') format('truetype');}
@font-face{font-family: 'Louis George Cafe'; font-style:normal; font-weight:400; src:url('../../polices/specifiques/louis-george-cafe/Louis-George-Cafe.ttf') format('truetype');}
@font-face{font-family: 'Louis George Cafe'; font-style:italic; font-weight:400; src:url('../../polices/specifiques/louis-george-cafe/Louis-George-Cafe_Italic.ttf') format('truetype');}
@font-face{font-family: 'Louis George Cafe'; font-style:normal; font-weight:700; src:url('../../polices/specifiques/louis-george-cafe/Louis-George-Cafe_Bold.ttf') format('truetype');}
@font-face{font-family: 'Louis George Cafe'; font-style:italic; font-weight:700; src:url('../../polices/specifiques/louis-george-cafe/Louis-George-Cafe_Bold-Italic.ttf') format('truetype');}
:root
{
/* sans serif */
--da-font-opendyslexic-sans-serif: "OpenDyslexic", Arial, sans-serif;
}
.da-font-opendyslexic{font-family: var(--da-font-opendyslexic-sans-serif);}
/********************************************************************************************************************************
OpenDyslexic
(sans serif, déformée, grasse à la base, dyslexique, variantes)
ideal titre
********************************************************************************************************************************/
@font-face{font-family: 'OpenDyslexic'; font-style:normal; font-weight:400; src:url('../../polices/specifiques/opendyslexic/OpenDyslexic-Regular.otf') format('opentype');}
@font-face{font-family: 'OpenDyslexic'; font-style:italic; font-weight:400; src:url('../../polices/specifiques/opendyslexic/OpenDyslexic-Italic.otf') format('opentype');}
@font-face{font-family: 'OpenDyslexic'; font-style:normal; font-weight:700; src:url('../../polices/specifiques/opendyslexic/OpenDyslexic-Bold.otf') format('opentype');}
@font-face{font-family: 'OpenDyslexic'; font-style:italic; font-weight:700; src:url('../../polices/specifiques/opendyslexic/OpenDyslexic-BoldItalic.otf') format('opentype');}
/* daa : Dev Application Animation */
/********************************************************************************************************************************
glissement vers la gauche : slide left selon scroll
JS NECESSAIRE pour animation au moment du scroll !
********************************************************************************************************************************/
/* UTILISATION D'UN PARENT OBLIGATOIRE :
conteneur parent pour limiter le débordement et
eviter la barre de défilement horizontale */
/* Cible N'IMPORTE QUEL ÉLÉMENT qui a un PETIT enfant direct avec la classe parent */
*:has(> .daa-scroll-glissement-vers-gauche-parent)
{
position: relative;
overflow: hidden;
}
.daa-scroll-glissement-vers-gauche-parent
{
position: relative;
/* overflow: hidden; : on masque plutot de grand parent pour élargir les limites du contenu qui glisse */
}
.daa-scroll-glissement-vers-gauche
{
opacity: 0;
transform: translate3d(30px, 0, 0); /* ne pas mettre 100% sinon js ne détecte pas qu'il est à l'écran pour le passer à visible */
transition: transform 1s ease-out, opacity 1s ease-out;
backface-visibility: hidden;
}
.daa-scroll-glissement-vers-gauche.daa-visible
{
/* display: initial; // à tester */
opacity: 1;
transform: translateX(0);
}
/*
.daa-glissement-vers-gauche
{
animation: daa-glissement-vers-gauche-param 0.5s forwards;
}
@keyframes daa-glissement-vers-gauche-param
{
from {transform: translateX(30%);}
to {transform: translateX(0);}
}
*/
/********************************************************************************************************************************
glissement vers la droite : slide right selon scroll
JS NECESSAIRE pour animation au moment du scroll !
********************************************************************************************************************************/
.daa-scroll-glissement-vers-droite
{
opacity: 0;
transform: translate3d(-30px, 0, 0); /* ne pas mettre 100% sinon js ne détecte pas qu'il est à l'écran pour le passer à visible */
transition: transform 1s ease-out, opacity 1s ease-out;
backface-visibility: hidden;
}
.daa-scroll-glissement-vers-droite.daa-visible
{
opacity: 1;
transform: translateX(0);
}
/*
.daa-glissement-vers-droite
{
animation: daa-glissement-vers-droite-param 0.5s forwards;
}
@keyframes daa-glissement-vers-droite-param
{
from {transform: translateX(0);}
to {transform: translateX(30%);}
}
*/
/********************************************************************************************************************************
glissement vers le haut : slide top selon scroll
JS NECESSAIRE pour animation au moment du scroll !
********************************************************************************************************************************/
/* trop pixel size trop flou baveux */
/*
.daa-scroll-glissement-vers-haut
{
opacity: 0;
transform: translateY(20px); /* les % font des bavouilles sur la font du texte *//*
transition: transform 1s ease-out, opacity 1s ease-out;
will-change: transform, opacity;
}
*/
.daa-scroll-glissement-vers-haut
{
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: transform 1s ease-out, opacity 1s ease-out;
backface-visibility: hidden;
}
.daa-scroll-glissement-vers-haut.daa-visible
{
opacity: 1;
transform: translateY(0);
}
/********************************************************************************************************************************
glissement vers le bas : slide bottom selon scroll
JS NECESSAIRE pour animation au moment du scroll !
********************************************************************************************************************************/
.daa-scroll-glissement-vers-bas
{
opacity: 0;
transform: translate3d(0, -30px, 0); /* accélération GPU */
transition: transform 1s ease-out, opacity 1s ease-out;
backface-visibility: hidden; /* empêche les artefacts */
/*transform-style: preserve-3d; /* texte flou baveux : ne maintient pas une qualité visuelle */
}
.daa-scroll-glissement-vers-bas.daa-visible
{
opacity: 1;
transform: translateY(0);
}
/********************************************************************************************************************************
apparition fondue : fade in
JS NECESSAIRE pour animation au moment du scroll !
********************************************************************************************************************************/
.daa-scroll-apparition-fondue
{
opacity: 0;
transition: opacity 2s ease-in;
will-change: opacity;
}
.daa-scroll-apparition-fondue.daa-visible
{
opacity: 1;
}
/********************************************************************************************************************************
vagues mouvantes svg
********************************************************************************************************************************/
.daa-vagues-mouvantes
{
display: block;
width: 100%;
height: 60px;
max-height: 60px;
margin: -60px 0px 0px 0px;
z-index:5;
float:left;
}
.daa-vagues-mouvantes .daa-parallaxe1 > use {animation: daa-vagues-mouvantes-param1 10s linear infinite; &:nth-child(1) {animation-delay: -2s;}}
.daa-vagues-mouvantes .daa-parallaxe2 > use {animation: daa-vagues-mouvantes-param2 8s linear infinite; &:nth-child(1) {animation-delay: -2s;}}
.daa-vagues-mouvantes .daa-parallaxe3 > use {animation: daa-vagues-mouvantes-param3 6s linear infinite; &:nth-child(1) {animation-delay: -2s;}}
.daa-vagues-mouvantes .daa-parallaxe4 > use {animation: daa-vagues-mouvantes-param4 4s linear infinite; &:nth-child(1) {animation-delay: -2s;}}
@keyframes daa-vagues-mouvantes-param1 { 0% {transform: translate(85px, 0%);} 100% {transform: translate(-90px, 0%);}}
@keyframes daa-vagues-mouvantes-param2 { 0% {transform: translate(-90px, 0%);} 100% {transform: translate(85px, 0%);}}
@keyframes daa-vagues-mouvantes-param3 { 0% {transform: translate(85px, 0%);} 100% {transform: translate(-90px, 0%);}}
@keyframes daa-vagues-mouvantes-param4 { 0% {transform: translate(-90px, 0%);} 100% {transform: translate(85px, 0%);}}
/********************************************************************************************************************************
element oscillant
(ex : img stylo qui oscille au dessus d'une carte de visite)
********************************************************************************************************************************/
.daa-oscillation-parent
{
position: relative;
}
.daa-oscillation
{
/* width: 250px; à ajuster si besoin */
position: absolute; /* la position fixe exacte sera précisé via top et left */
animation: daa-oscillation-param 8s infinite;
transform-origin: center;
}
@keyframes daa-oscillation-param
{
0%, 100% {transform: rotate(0deg);}
22% {transform: rotate(0deg);}
24% {transform: rotate(-10deg);}
26% {transform: rotate(10deg);}
28% {transform: rotate(-10deg);}
30% {transform: rotate(10deg);}
32% {transform: rotate(-10deg);}
34% {transform: rotate(10deg);}
38%, 95% {transform: rotate(0deg);}
}
/********************************************************************************************************************************
element en rotation
(ex : img qui tourne sur elle meme)
********************************************************************************************************************************/
.daa-rotation
{
animation: daa-rotation-param 12s linear infinite;
transform-origin: center;
will-change: transform;
}
/* rotation lente */
@keyframes daa-rotation-param
{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/********************************************************************************************************************************
element rebondissant
(ex : img point de localisation qui rebondit sur une carte)
********************************************************************************************************************************/
.daa-rebondissement-parent
{
position: relative;
}
.daa-rebondissement
{
position: absolute; /* la position fixe exacte sera précisé via top et left */
animation: daa-rebondissement-param 8s ease infinite;
}
@keyframes daa-rebondissement-param
{
0%, 100% {transform: translateY(0);}
10% {transform: translateY(-300px);}
12% {transform: translateY(0px);}
14% {transform: translateY(-200px);}
16% {transform: translateY(0px);}
18% {transform: translateY(-100px);}
20% {transform: translateY(0px);}
22% {transform: translateY(-50px);}
24% {transform: translateY(0px);}
}
/********************************************************************************************************************************
image de décoration en fond
********************************************************************************************************************************/
.daa-decoration-parent
{
position: relative;
/*overflow: hidden; /* à affecter à la section parent */
z-index: 2; /* on monte d'un cran pour baisser d'un cran l'image */
}
.daa-decoration-img
{
position: absolute;
pointer-events: none;
z-index: 1;
}
/* option : désactive la déco sur mobile */
@media (max-width: 768px)
{
.daa-decoration-img.daa-no-mobile { display: none; }
}
/* option : désactive la déco sur tablette */
@media (max-width: 1200px)
{
.daa-decoration-img.daa-no-tablette { display: none; }
}
/********************************************************************************************************************************
bouton "revenir en haut" (scroll to top)
(js : desa-clic-rev-ht )
********************************************************************************************************************************/
#daa-revenir-en-haut
{
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
color:#fff!important;
background-color:var(--das-col-revenir-en-haut)!important;
border: 2px solid white;
outline: none;
cursor: pointer;
padding: 6px 8px;
border-radius: 50%;
}
#daa-revenir-en-haut::after
{
font-family: var(--da-font-icone-del);
content: 'v'; /* signe : ^ */
}
/* dac : Dev Application Carte */
/*******************************************************************************************************************************
carte allongee horizontalement (corps)
(mise en page : contour arrondi sans ombre)
********************************************************************************************************************************/
.dac-carte-allongee
{
position: relative;
display: flex;
flex-direction: column;
margin: 10px;
min-width: 0;
word-wrap: break-word;
background-color: var(--dac-carte-allongee-bg-col);
background-clip: border-box;
border: var(--dac-carte-allongee-border);
border-radius: var(--dac-carte-allongee-border-radius);
}
.dac-carte-allongee .dac-corps
{
flex: 1 1 auto;
padding: 1rem 1rem;
color: var(--dac-carte-allongee-txt-col);
}
/*******************************************************************************************************************************
carte profil (img + corps)
(mise en page : contour arrondi avec ombre)
********************************************************************************************************************************/
.dac-carte
{
position: relative;
display: flex;
flex-flow: column;
z-index:inherit; /* utile pour afficher des images de déco en fond */
max-width: var(--dac-carte-width);
max-height: var(--dac-carte-height);
border-radius: var(--dac-carte-border-radius);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.dac-carte.dac-moyenne-centre
{
text-align: center;
justify-self: center;
max-width: 650px;
}
.dac-carte.dac-moyenne
{
justify-self: center;
max-width: 650px;
}
.dac-carte.dac-grande
{
max-width: none;
}
.dac-carte.dac-no-box-shadow
{
box-shadow: none;
}
.dac-carte.dac-no-border
{
border: none;
}
.dac-carte [class*=da-bouton-contour],
.dac-carte [class*=da-bouton-plein],
.dac-carte [class*=da-bouton-lien],
.dac-carte [class*=da-bouton-rond]
{
pointer-events: auto;
}
/* necessaire pour les cartes qui se retournent
prevoir d'ajouter une class : .dac-carte.dac-verso
.dac-carte > *
{
/* ignore le clic et touchstart (hover mobile) sur les enfants pour qu'il soit traité par le parent *//*
pointer-events: none;
}
*/
/* pour les dispositifs non tactile qui gère le hover */
@media (hover: hover)
{
.dac-carte:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}
}
/* alternative ecran tactile */
@media (hover: none)
{
.dac-carte.da-hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}
}
.dac-carte-contenant
{
/* pour ajustement corps / header / main / footer */
display: flex;
flex-flow: column;
height: 100%;
border-radius: var(--dac-carte-border-radius);
overflow: hidden;
}
/* ---- gestion image à droite ou à gauche ------ */
/* @media personnalisé dans site pour gérer la bascule verticale column sur mobile */
.dac-carte-contenant.dac-img-gauche /* img-pos1 */
{
flex-flow: row;
}
/* @media personnalisé dans site pour gérer la bascule verticale column sur mobile */
.dac-carte-contenant.dac-img-droite /* img-pos5 */
{
flex-flow: row;
}
.dac-parent-img.dac-img-gauche,
.dac-parent-img.dac-img-droite
{
display: flex;
flex-shrink: 0;
max-width: 50%;
}
.dac-parent-img.dac-img-gauche img,
.dac-parent-img.dac-img-droite img
{
width: 100%;
height: 100%;
object-fit:cover;
display: block;
}
/* ---------------------------------------------- */
.dac-carte .dac-corps
{
margin-block: auto;
/* padding: 2px 16px; à personnaliser dans les fonctions d'appel stratégique contexte_affichage_donnees->() */
border-radius: 0 0 var(--dac-carte-border-radius) var(--dac-carte-border-radius);
}
.dac-carte header
{
margin-bottom: auto;
border-radius: var(--dac-carte-border-radius) var(--dac-carte-border-radius) 0 0;
}
.dac-carte main
{
margin: auto;
}
.dac-carte footer
{
margin-top: auto;
border-radius: 0 0 var(--dac-carte-border-radius) var(--dac-carte-border-radius);
}
/*******************************************************************************************************************************
carte profil defilement horizontal (effet carrousel)
(mise en page :
div dac-carrousel-conteneur
article dac-carrousel-carte
div dac-carrousel-nav
button dac-carrousel-nav-prec
button dac-carrousel-nav-suiv)
********************************************************************************************************************************/
/* conteneur visible */
.dac-carrousel-conteneur
{
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* smooth momentum on iOS */
scroll-behavior: smooth;
/* affichage en ligne via flexbox */
display: flex;
gap: var(--dac-carrousel-carte-gap);
align-items: stretch;
justify-content: center; /* centré par défaut (si pas d'overflow) */
/* désactive la sélection de texte lors du glissement */
user-select: none;
-webkit-user-select: none;
touch-action: pan-y; /* autorise les gestes natifs verticaux (gestion js des gestes horizontaux) */
}
/* utilisé quand le contenu dépasse : aligner au début pour un scrolling "normal" */
.dac-carrousel-conteneur.active-defilement
{
justify-content: flex-start;
}
.dac-carrousel-carte
{
display: flex;
flex-direction: column;
flex: 0 0 auto; /* empêche la carte de se réduire, force largeur fixe */
width: var(--dac-carrousel-carte-w);
/* height: var(--dac-carrousel-carte-h); */
}
/* Small screens - responsive */
@media (max-width: 520px)
{
:root
{
--dac-carrousel-carte-w: var(--dac-carrousel-carte-w-mobile);
/* --dac-carrousel-carte-h: var(--dac-carrousel-carte-h-mobile); */
}
}
/* snap (agréable à l'usage) */
.dac-carrousel-conteneur { scroll-snap-type: x mandatory; }
.dac-carrousel-carte { scroll-snap-align: center; }
/* design barre de défilement (WebKit Chrome, Edge, Safari) */
.dac-carrousel-conteneur::-webkit-scrollbar
{
height: var(--dac-carrousel-scrollbar-height);
}
.dac-carrousel-conteneur::-webkit-scrollbar-track
{
background: transparent;
}
.dac-carrousel-conteneur::-webkit-scrollbar-thumb
{
background: linear-gradient(90deg, var(--das-coul-1-clair), var(--das-coul-1));
border-radius: 999px;
min-width: 40px;
border: 2px solid rgba(255,255,255,0.0);
}
.dac-carrousel-conteneur.coul-2::-webkit-scrollbar-thumb
{
background: linear-gradient(90deg, var(--das-coul-2-clair), var(--das-coul-2));
}
/* firefox */
.dac-carrousel-conteneur
{
scrollbar-width: thin;
scrollbar-color: var(--das-coul-1-clair) transparent;
}
.dac-carrousel-conteneur.coul-2
{
scrollbar-color: var(--das-coul-2-clair) transparent;
}
/* Buttons (facultatif) */
.dac-carrousel-nav
{
display:none;
gap:40px;
margin-top:10px;
justify-content: center;
}
/* utilisé quand le contenu dépasse : affiche / masque les boutons de navigation */
.dac-carrousel-nav.active
{
display:flex;
}
.dac-carrousel-nav button
{
font-family: var(--da-font-icone-del);
color: var(--das-coul-1-clair);
padding:10px 12px;
border-radius:50px;
border: none;
background:#fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
cursor: pointer;
}
.dac-carrousel-nav.coul-2 button
{
color: var(--das-coul-2);
}
/*******************************************************************************************************************************
carte profil effet overlay (img + corps front + corps overlay texte central)
(mise en page : dac-carte + recouvrement fade / slide / zoom)
********************************************************************************************************************************/
.dac-carte .dac-overlay
{
position: absolute;
background-color: var(--dac-overlay-bg-col);
width: 100%;
border-radius: var(--dac-carte-border-radius);
}
.dac-carte .dac-overlay-corps
{
position: absolute;
width: 100%;
padding: 10px;
text-align: center;
color: var(--dac-overlay-fade-txt-col);;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/************************************************
effet overlay fade
(corps recouvrement progressif)
*************************************************/
.dac-carte .dac-overlay.dac-fade
{
height: 100%;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
}
/* pour les dispositifs non tactile qui gère le hover */
@media (hover: hover)
{
.dac-carte:hover .dac-overlay.dac-fade
{
opacity: 1;
}
}
/* alternative ecran tactile */
@media (hover: none)
{
.dac-carte.da-hover .dac-overlay.dac-fade
{
opacity: 1;
}
}
/************************************************
effet overlay zoom
(corps recouvrement zoom progressif)
*************************************************/
.dac-carte .dac-overlay.dac-zoom
{
height: 100%;
overflow: hidden;
bottom: 0;
left: 0;
right: 0;
transform: scale(0);
transition: .3s ease;
}
/* pour les dispositifs non tactile qui gère le hover */
@media (hover: hover)
{
.dac-carte:hover .dac-overlay.dac-zoom
{
transform: scale(1);
}
}
/* alternative ecran tactile */
@media (hover: none)
{
.dac-carte.da-hover .dac-overlay.dac-zoom
{
transform: scale(1);
}
}
/************************************************
effet overlay slide top
(corps recouvrement par glissement haut)
*************************************************/
.dac-carte .dac-overlay.dac-slide-top
{
height:0;
overflow: hidden;
bottom: 100%;
left: 0;
right: 0;
transition: .5s ease;
}
/* pour les dispositifs non tactile qui gère le hover */
@media (hover: hover)
{
.dac-carte:hover .dac-overlay.dac-slide-top
{
bottom: 0;
height: 100%;
}
}
/* alternative ecran tactile */
@media (hover: none)
{
.dac-carte.da-hover .dac-overlay.dac-slide-top
{
bottom: 0;
height: 100%;
}
}
/************************************************
effet overlay slide bottom
(corps recouvrement par glissement bas)
*************************************************/
.dac-carte .dac-overlay.dac-slide-bottom
{
height: 0;
overflow: hidden;
bottom: 0;
left: 0;
right: 0;
transition: .5s ease;
}
/* pour les dispositifs non tactile qui gère le hover */
@media (hover: hover)
{
.dac-carte:hover .dac-overlay.dac-slide-bottom
{
height: 100%;
}
}
/* alternative ecran tactile */
@media (hover: none)
{
.dac-carte.da-hover .dac-overlay.dac-slide-bottom
{
height: 100%;
}
}
/************************************************
effet overlay slide right
(corps recouvrement par glissement droit)
! limite du design sur du texte trop grand !
solution : .dac-volet droit
*************************************************/
.dac-carte .dac-overlay.dac-slide-right
{
width: 0;
height: 100%;
overflow: hidden;
bottom: 0;
left: 100%;
right: 0;
transition: .5s ease;
}
/* pour les dispositifs non tactile qui gère le hover */
@media (hover: hover)
{
.dac-carte:hover .dac-overlay.dac-slide-right
{
width: 100%;
left: 0;
}
}
/* alternative ecran tactile */
@media (hover: none)
{
.dac-carte.da-hover .dac-overlay.dac-slide-right
{
width: 100%;
left: 0;
}
}
/************************************************
effet overlay slide left
(corps recouvrement par glissement gche)
! limite du design sur du texte trop grand !
solution : .dac-volet gauche
*************************************************/
.dac-carte .dac-overlay.dac-slide-left
{
width: 0;
height: 100%;
overflow: hidden;
bottom: 0;
left: 0;
right: 0;
transition: .5s ease;
}
/* pour les dispositifs non tactile qui gère le hover */
@media (hover: hover)
{
.dac-carte:hover .dac-overlay.dac-slide-left
{
width: 100%;
}
}
/* alternative ecran tactile */
@media (hover: none)
{
.dac-carte.da-hover .dac-overlay.dac-slide-left
{
width: 100%;
}
}
/*******************************************************************************************************************************
carte profil effet volet (img + corps front + corps effet volet texte central)
(mise en page : dac-carte + recouvrement type volet droit ou gauche)
********************************************************************************************************************************/
.dac-carte .dac-volet
{
position: absolute;
background-color: var(--dac-volet-bg-col);
top: 0;
overflow:hidden;
/* recouvrement */
width: 70%; /* ou 100% */
height: 100%;
border-radius: var(--dac-carte-border-radius);
/* effet */
transition: .5s;
}
/* affecte la transition au corps de la carte */
/* (img + corps ou header + main + footer) */
.dac-carte .dac-volet-decale-droit > *,
.dac-carte .dac-volet-decale-gauche > *
{
transition: 0.5s;
}
/* pour les dispositifs non tactile qui gère le hover */
@media (hover: hover)
{
.dac-carte:hover .dac-volet-decale-droit > *
{
opacity: .5;
transform: translateX(30%);/*100%*/
}
.dac-carte:hover .dac-volet-decale-gauche > *
{
opacity: .5;
transform: translateX(-30%);/*100%*/
}
.dac-carte:hover .dac-volet.gauche,
.dac-carte:hover .dac-volet.droit
{
transform: perspective(2000px) rotateY(0deg);
}
}
/* alternative ecran tactile */
@media (hover: none)
{
.dac-carte.da-hover .dac-volet-decale-droit > *
{
opacity: .5;
transform: translateX(30%);/*100%*/
}
.dac-carte.da-hover .dac-volet-decale-gauche > *
{
opacity: .5;
transform: translateX(-30%);/*100%*/
}
.dac-carte.da-hover .dac-volet.gauche,
.dac-carte.da-hover .dac-volet.droit
{
transform: perspective(2000px) rotateY(0deg);
}
}
/* personnalisation largeur volet */
.dac-carte .dac-volet.droit.dac-volet-w100,
.dac-carte .dac-volet.gauche.dac-volet-w100
{
width: 100%;
left: 0;
}
.dac-carte .dac-volet-corps
{
position: absolute;
padding:20px;
/* centrage horizontal et vertical */
text-align:center;
color: var(--dac-volet-fade-txt-col);;
top: 50%;
transform: translateY(-50%);
transition: 0.5s;
}
/************************************************
effet volet droit
(corps recouvrement par pivotement droit)
*************************************************/
.dac-carte .dac-volet.droit
{
left: 30%; /* depart du recouvrement width 70% */
transform-origin: right;
transform: perspective(2000px) rotateY(90deg);
}
/************************************************
effet volet gauche
(corps recouvrement par pivotement gauche)
*************************************************/
.dac-carte .dac-volet.gauche
{
left: 0;
transform-origin: left;
transform: perspective(2000px) rotateY(-90deg);
}
/*******************************************************************************************************************************
carte profil effet flip (img + corps avant + corps arriere)
(mise en page : contour arrondi avec ombre + flip effet 3D)
********************************************************************************************************************************/
/* parent necessaire pour la rotation 3D */
.dac-carte-flip
{
width: var(--dac-carte-flip-width);
height: var(--dac-carte-flip-height);
perspective: 1000px; /* effet rotation 3D */
}
.dac-carte-flip > *
{
/* ignore le clic et touchstart (hover mobile) sur les enfants pour qu'il soit traité par le parent */
pointer-events: none;
}
/* absent si aucune donnée à afficher au dos de la carte */
.dac-carte-flip-retournement
{
position: relative; /* positionnement necessaire pour face avant et arriere */
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
/* pour les dispositifs non tactile qui gère le hover */
@media (hover: hover)
{
.dac-carte-flip:hover .dac-carte-flip-retournement
{
transform: rotateY(180deg);
}
.dac-carte-flip-avant:hover
{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
}
/* alternative ecran tactile */
@media (hover: none)
{
.dac-carte-flip.da-hover .dac-carte-flip-retournement
{
transform: rotateY(180deg);
}
}
.dac-carte-flip-avant, .dac-carte-flip-arriere
{
position: absolute;
width: 100%;
border-radius: var(--dac-carte-border-radius);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
overflow: hidden;
backface-visibility: hidden;
}
.dac-carte-flip-avant
{
/* pour ajustement corps / header / main / footer */
display: flex;
flex-flow: column;
height: 100%;
background-color: var(--dac-carte-flip-avant-bg-col);
color: var(--dac-carte-flip-avant-txt-col);
}
.dac-carte-flip-img
{
width: 100%;
height: var(--dac-carte-flip-img-height);
border-radius: var(--dac-carte-border-radius) var(--dac-carte-border-radius) 0 0;
object-fit: cover; /* conservation proportion */
}
.dac-carte-flip .dac-corps
{
margin-block: auto;
padding: 2px 16px;
border-radius: 0 0 var(--dac-carte-border-radius) var(--dac-carte-border-radius);
}
.dac-carte-flip header
{
margin-bottom: auto;
border-radius: var(--dac-carte-border-radius) var(--dac-carte-border-radius) 0 0;
}
.dac-carte-flip main
{
margin: auto;
}
.dac-carte-flip footer
{
margin-top: auto;
border-radius: 0 0 var(--dac-carte-border-radius) var(--dac-carte-border-radius);
}
.dac-carte-flip-arriere
{
height: 100%;
padding: 10px;
background-color: var(--dac-carte-flip-arriere-bg-col);
color: var(--dac-carte-flip-arriere-txt-col);
text-align: center;
overflow: hidden;
transform: rotateY(180deg);
}
/* dag : Dev Application Grille */
/********************************************************************************************************************************
padding enfants d'un conteneur
********************************************************************************************************************************/
.dag-cont:after,.dag-cont:before
/*.dag-panel:after,.dag-panel:before,
.dag-clear:after,.dag-clear:before,.dag-bar:before,.dag-bar:after*/
{
content:"";
display:table;
clear:both;
}
.dag-cont
/*.w3-panel*/
{
padding:0.01em 16px;
}
/********************************************************************************************************************************
grille responsive lignes et colonnes
- gestion padding enfants des lignes
- gestion hauteur max-content
- repartition largeur de l'écran sur 12 colonnes (col) pour smartphone (s : small) / tablette (m : medium) / ordinateur (l : large)
- centrage vertical d'une colonne
********************************************************************************************************************************/
.dag-lig:after,.dag-lig:before,
[class*="dag-lig-pd-"]:after,[class*="dag-lig-pd-"]:before
{
content:"";
display:table;
clear:both;
}
/**************** gestion padding enfants des lignes *********************/
.dag-lig-pd-5,.dag-lig-pd-5>.dag-col{padding:5px}
.dag-lig-pd-l5,.dag-lig-pd-l5>.dag-col{padding-left:5px}
.dag-lig-pd-t5,.dag-lig-pd-t5>.dag-col{padding-top:5px}
.dag-lig-pd-r5,.dag-lig-pd-r5>.dag-col{padding-right:5px}
.dag-lig-pd-b5,.dag-lig-pd-b5>.dag-col{padding-bottom:5px}
.dag-lig-pd-lt5,.dag-lig-pd-lt5>.dag-col{padding-left: 5px; padding-top: 5px;}
.dag-lig-pd-tb5,.dag-lig-pd-tb5>.dag-col{padding-top: 5px; padding-bottom: 5px;}
.dag-lig-pd-lr5,.dag-lig-pd-lr5>.dag-col{padding-left: 5px; padding-right: 5px;}
.dag-lig-pd-8,.dag-lig-pd-8>.dag-col{padding:8px}
.dag-lig-pd-l8,.dag-lig-pd-l8>.dag-col{padding-left:8px}
.dag-lig-pd-t8,.dag-lig-pd-t8>.dag-col{padding-top:8px}
.dag-lig-pd-r8,.dag-lig-pd-r8>.dag-col{padding-right:8px}
.dag-lig-pd-b8,.dag-lig-pd-b8>.dag-col{padding-bottom:8px}
.dag-lig-pd-lt8,.dag-lig-pd-lt8>.dag-col{padding-left: 8px; padding-top: 8px;}
.dag-lig-pd-tb8,.dag-lig-pd-tb8>.dag-col{padding-top: 8px; padding-bottom: 8px;}
.dag-lig-pd-lr8,.dag-lig-pd-lr8>.dag-col{padding-left: 8px; padding-right: 8px;}
.dag-lig-pd-15,.dag-lig-pd-15>.dag-col{padding:15px}
.dag-lig-pd-l15,.dag-lig-pd-l15>.dag-col{padding-left:15px}
.dag-lig-pd-t15,.dag-lig-pd-t15>.dag-col{padding-top:15px}
.dag-lig-pd-r15,.dag-lig-pd-r15>.dag-col{padding-right:15px}
.dag-lig-pd-b15,.dag-lig-pd-b15>.dag-col{padding-bottom:15px}
.dag-lig-pd-lt15,.dag-lig-pd-lt15>.dag-col{padding-left: 15px; padding-top: 15px;}
.dag-lig-pd-tb15,.dag-lig-pd-tb15>.dag-col{padding-top: 15px; padding-bottom: 15px;}
.dag-lig-pd-lr15,.dag-lig-pd-lr15>.dag-col{padding-left: 15px; padding-right: 15px;}
.dag-lig-pd-20,.dag-lig-pd-20>.dag-col{padding:20px}
.dag-lig-pd-l20,.dag-lig-pd-l20>.dag-col{padding-left:20px}
.dag-lig-pd-t20,.dag-lig-pd-t20>.dag-col{padding-top:20px}
.dag-lig-pd-r20,.dag-lig-pd-r20>.dag-col{padding-right:20px}
.dag-lig-pd-b20,.dag-lig-pd-b20>.dag-col{padding-bottom:20px}
.dag-lig-pd-lt20,.dag-lig-pd-lt20>.dag-col{padding-left: 20px; padding-top: 20px;}
.dag-lig-pd-tb20,.dag-lig-pd-tb20>.dag-col{padding-top: 20px; padding-bottom: 20px;}
.dag-lig-pd-lr20,.dag-lig-pd-lr20>.dag-col{padding-left: 20px; padding-right: 20px;}
.dag-lig-pd-45,.dag-lig-pd-45>.dag-col{padding:45px}
.dag-lig-pd-l45,.dag-lig-pd-l45>.dag-col{padding-left:45px}
.dag-lig-pd-t45,.dag-lig-pd-t45>.dag-col{padding-top:45px}
.dag-lig-pd-r45,.dag-lig-pd-r45>.dag-col{padding-right:45px}
.dag-lig-pd-b45,.dag-lig-pd-b45>.dag-col{padding-bottom:45px}
.dag-lig-pd-lt45,.dag-lig-pd-lt45>.dag-col{padding-left: 45px; padding-top: 45px;}
.dag-lig-pd-tb45,.dag-lig-pd-tb45>.dag-col{padding-top: 45px; padding-bottom: 45px;}
.dag-lig-pd-lr45,.dag-lig-pd-lr45>.dag-col{padding-left: 45px; padding-right: 45px;}
/**************** gestion largeur max ****************************/
[class*="dag-lig"].v-max
{
width: 100%;
}
/**************** gestion hauteur max-content ****************************/
[class*="dag-lig"].h-max
{
display: flex;
flex-wrap: wrap;
}
/**************** repartition largeur de l'écran ****************************/
/* rajouter da-s1 da-m4 da-l3 pour adapter width */
.dag-col
{
float:left;
width:100%;
}
/**************** centrage vertical horizontal ****************************/
/* vertical top center bottom pour *TOUTES* les colonnes */
[class*="dag-lig"].h-max.v-t {align-items: baseline;}
[class*="dag-lig"].h-max.v-c {align-items: center;}
[class*="dag-lig"].h-max.v-b {align-items: end;}
[class*="dag-lig"].h-max.v-max {align-items: stretch;}
/* horizontal ecartement pour *TOUTES* les colonnes */
[class*="dag-lig"] .h-evenly {display: flex;justify-content: space-evenly;}
/* vertical top center bottom pour *UNE* colonne */
[class*="dag-lig"].h-max .dag-col.v-t {align-self: baseline}
[class*="dag-lig"].h-max .dag-col.v-c {align-self: center;}
[class*="dag-lig"].h-max .dag-col.v-b {align-self: end;}
/* horizontal left center right pour *UNE* colonne */
/* utiliser da-float-r ou da-mg-auto */
/* horizontal left center right des *ENFANTS UNE* colonne */
[class*="dag-lig"] .dag-col.h-l {display: flex;justify-content: left;}
[class*="dag-lig"] .dag-col.h-c {display: flex;justify-content: center;}
[class*="dag-lig"] .dag-col.h-r {display: flex;justify-content: right;}
/* horizontal ecartement pour des *ENFANTS UNE* colonne */
[class*="dag-lig"] .dag-col.h-evenly {display: flex;justify-content: space-evenly;}
/********************************************************************************************************************************
vignettes 2 par 2
********************************************************************************************************************************/
.dag-vignettes-2-par-2
{
display: flex;
flex-wrap: wrap;
padding: 150px;
}
.dag-vignettes-2-par-2 > [class*="dag-ordre-"]
{
width: 50%;
display: flex;
align-items: center;
justify-content: center;
height: 300px;
text-align: center;
padding: 10px;
}
/* avec vignette */
.dag-vignettes-2-par-2 > .dag-ordre-1,
.dag-vignettes-2-par-2 > .dag-ordre-4,
.dag-vignettes-2-par-2 > .dag-ordre-5
{
font-size: 4.2rem;
border-radius: 50px;
}
/* sans vignette */
.dag-vignettes-2-par-2 > .dag-ordre-2,
.dag-vignettes-2-par-2 > .dag-ordre-3,
.dag-vignettes-2-par-2 > .dag-ordre-6
{
font-size: 2.4rem;
padding: 20px;
}
/* couleur vignette */
.dag-vignettes-2-par-2.dag-dark-cyan.dag-cadet-blue
{
background-color: darkcyan;
color: white;
}
.dag-vignettes-2-par-2.dag-dark-cyan.dag-cadet-blue > .dag-ordre-1,
.dag-vignettes-2-par-2.dag-dark-cyan.dag-cadet-blue > .dag-ordre-4,
.dag-vignettes-2-par-2.dag-dark-cyan.dag-cadet-blue > .dag-ordre-5
{
background-color: cadetblue;
color: white;
}
/* format mobile */
@media (max-width: 767px)
{
.dag-vignettes-2-par-2
{
flex-direction: column;
padding: 20px;
}
.dag-vignettes-2-par-2 > [class*="dag-ordre-"]
{
width: 100%;
}
/* inversion de l'ordre pour des vignettes alternatives */
.dag-vignettes-2-par-2 > .dag-ordre-1 { order: 1;}
.dag-vignettes-2-par-2 > .dag-ordre-2 { order: 2;}
.dag-vignettes-2-par-2 > .dag-ordre-3 { order: 4;}
.dag-vignettes-2-par-2 > .dag-ordre-4 { order: 3;}
.dag-vignettes-2-par-2 > .dag-ordre-5 { order: 5;}
.dag-vignettes-2-par-2 > .dag-ordre-6 { order: 6;}
[class*="dag-lig"].h-max .mob-col-rev
{
flex-direction: column-reverse;
}
}
/* format tablette */
@media (min-width: 768px) and (max-width: 1200px)
{
.dag-vignettes-2-par-2
{
padding: 30px;
}
}
/********************************************************************************************************************************
DISPOSITION DE GRILLE
/********************************************************************************************************************************
dag-mini-galerie de 5 images
ordi tablette mobile
1 1 2 3 5 5 2 3 2
1 1 4 4 5 5 4 4 3
1 5 4
1
5
/********************************************************************************************************************************
dag-galerie-3col
galerie de x images sur 3 colonnes
image "portrait" : 1 colonne
image "paysage2" : 2 colonnes
image "paysage3" : 3 colonnes
/********************************************************************************************************************************
dag-visuel-titre-texte
ordi tablette mobile
111 222222222 11 22222222 2
111 333333333 11 33333333 1
3
********************************************************************************************************************************/
.dag-mini-galerie
{
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto auto;
grid-template-areas:
"item1 item1 item2 item3 item5 item5"
"item1 item1 item4 item4 item5 item5";
gap: 10px; /* espace entre les elements cases */
max-width: 100%; /* contraint la largeur de la grille */
box-sizing: border-box;
margin: 0 auto; /* centre la galerie */
}
.dag-mini-galerie .dag-item
{
background: lightgray;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
border: 3px solid white;
position: relative;
}
.dag-mini-galerie .dag-item img
{
width: 100%; /* l'image occupe toute la largeur de la cellule */
height: 100%; /* l'image occupe toute la hauteur de la cellule */
object-fit: cover; /* conservation des proportions sans déformation mais en rognant */
display: block;
}
.dag-mini-galerie .dag-item.item1 {grid-area: item1;}
.dag-mini-galerie .dag-item.item2 {grid-area: item2;}
.dag-mini-galerie .dag-item.item3 {grid-area: item3;}
.dag-mini-galerie .dag-item.item4 {grid-area: item4;}
.dag-mini-galerie .dag-item.item5 {grid-area: item5;}
/******************************/
.dag-galerie-3col
{
display: grid;
grid-template-columns: repeat(3, 1fr); /* trois colonnes max */
grid-auto-rows: auto; /* ajustement de la hauteur selon le contenu */
gap: 20px; /* espacement entre les photos */
}
.dag-galerie-3col img
{
width: 100%;
height: 100%;
object-fit: cover; /* ajustement de l'image */
border: 2px solid white; /* cadre blanc */
}
.dag-galerie-3col img.paysage2
{
grid-column: span 2; /* les images en paysage occupent 2 colonnes */
}
.dag-galerie-3col img.paysage3
{
grid-column: span 3; /* les images en paysage occupent 3 colonnes */
}
/******************************/
.dag-galerie-4col
{
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 colonnes max */
grid-auto-rows: auto; /* ajustement de la hauteur selon le contenu */
gap: 40px; /* espacement entre les photos */
}
.dag-galerie-4col img
{
width: 100%;
object-fit: cover; /* ajustement de l'image */
aspect-ratio: 3/3;
border: 2px solid white; /* cadre blanc */
}
/******************************/
.dag-visuel-titre-texte
{
display: grid;
/*grid-template-columns: max-content auto; /* Colonnes adaptées à leur contenu */
/*grid-template-rows: auto auto auto; /* Lignes adaptées à leur contenu */
grid-template-areas:
"item1 item2"
"item1 item3"
"item1 .";
}
.dag-visuel-titre-texte .dag-item.item3.dag-sticky {position: sticky; top:0%;}
/******************************/
.dag-item.item1 {grid-area: item1;}
.dag-item.item2 {grid-area: item2;}
.dag-item.item3 {grid-area: item3;}
.dag-item.item4 {grid-area: item4;}
.dag-item.item5 {grid-area: item5;}
/******************************/
/* format mobile */
@media (max-width: 767px)
{
.dag-mini-galerie
{
grid-template-columns: 1fr;
grid-template-columns: 1fr; /* 1 colonne sur mobile */
grid-template-areas:
"item2"
"item3"
"item4"
"item1"
"item5";
}
.dag-visuel-titre-texte
{
grid-template-areas:
"item2"
"item1"
"item3";
}
.dag-visuel-titre-texte .dag-item.item2.dag-sticky {position: sticky; top:0%;}
.dag-galerie-3col img,
.dag-galerie-3col img.paysage2
{
grid-column: span 3; /* les images occupent les 3 colonnes pour le format mobile */
}
.dag-galerie-4col
{
grid-template-columns: repeat(1, 1fr); /* 1 colonne max pour le format mobile */
}
}
/* format tablette */
@media (min-width: 768px) and (max-width: 1200px)
{
.dag-mini-galerie
{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto auto;
grid-template-areas:
"item2 item3"
"item4 item4"
"item1 item5";
}
.dag-visuel-titre-texte
{
grid-template-areas:
"item1 item2"
"item1 item3"
"item1 .";
}
}
/********************************************************************************************************************************
tableau
********************************************************************************************************************************/
.dag-tab:before,.dag-tab:after
{
content:"";
display:table;
clear:both;
}
.dag-tab
{
display:table;
width:100%;
}
.dag-tab-cel
{
display:table-cell;
}
/* dad : Dev Application Diapo */
:root
{
--dad-img-txt-titre-txt-col: #4c4c4c;
--dad-galgestmed-bg-col: none;
--dad-galgestmed-vign-bd-col: #ddd;
--dad-galgestmed-vign-hv-sh-col: #00D7A880; /* var(--da-vert-vif-logo-da)80; /*008cba80;*/
--dad-galgestmed-cont-bg-col: white;
--dad-galgestmed-cont-diap-bord-col: #cccccc;
--dad-galgestmed-cont-diap-hv-bord-col: var(--da-vert-vif-logo-da);
--dad-galgestmed-num-txt-col: black;
--dad-galgestmed-prec-suiv-txt-col: #cccccc;
--dad-galgestmed-prec-suiv-hv-bg-col: #cccccc;
--dad-galgestmed-prec-suiv-hv-txt-col: var(--da-vert-vif-logo-da);
--dad-galgestmed-bt-ferm-txt-col: #cccccc;
--dad-galgestmed-bt-ferm-hv-txt-col: black;
--dad-diapmodal-fd-bg-col: #cccccc;
--dad-diapmodal-fd-bg-col-op: #ccccccE6;
--dad-diapmodal-ferm-txt-col: white;
--dad-diapmodal-ferm-hv-txt-col: black;
--dad-diapmodal-leg-txt-col: black;
--dad-diapmodal-prec-suiv-txt-col: white;
--dad-diapmodal-prec-suiv-hv-bg-col: black;
}
/*******************************************************************************************************************************
image
(mise en page)
********************************************************************************************************************************/
.dad-w100-h800px-cov{width: 100%;height: 800px;object-fit: cover;}
/****************************************************/
/* creation effet defilement parallaxe */
/* (besoin de js : data-desd-paral-vit = "0.3") */
/****************************************************/
.dad-parent-img-parallax
{
position: relative;
/* height: calculé via hauteur img dans strategie; */
height: 30vh;/* l'image apparait sur 30% de l'écran */
width: 100%;
overflow: hidden;
}
[class*="dad-img-parallax"]
{
width: 100%;
/* height: 100%; plein ecran si en commentaire */
object-fit: contain; /* cover */
/* width: 100vmax; effet zoom */
z-index: -1;
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, 0);
pointer-events: none;
opacity: 0;
}
[class*="dad-img-parallax"].active
{
opacity: 1;
}
/****************************************************/
/* creation effet zoom */
/****************************************************/
.dad-parent-img-zoom
{
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
height: var(--dad-parent-img-zoom-height);
}
[class*="dad-img-zoom"]
{
width: 100%;
object-fit: cover;
}
/* vitesse : 1 virgule 2 */
.dad-zoom-1v2{animation: zoom-1v2 60000ms infinite;}
@keyframes zoom-1v2{50%{transform: scale(1.2);}}
/* vitesse : 2 virgule 2 */
.dad-zoom-2v2{animation: zoom-2v2 60000ms infinite;}
@keyframes zoom-2v2{50%{transform: scale(2.2);}}
/***************************************/
/*******************************************************************************************************************************
texte sur image
(mise en page)
********************************************************************************************************************************/
/* à placer dans le div parent pour permettre la superposition du texte sur l'image */
.dad-img-txt-suppst
{
position: relative;
}
/* positionne texte sur une image zoom ou parallaxe */
.dad-img-txt-lt{position: absolute;left: 16px;top: 8px;}
.dad-img-txt-tr{position: absolute;top: 8px;right: 16px;}
.dad-img-txt-rb{position: absolute;right: 16px;bottom: 8px;}
.dad-img-txt-bl{position: absolute;bottom: 8px;left: 16px;}
.dad-img-txt-cent-haut{position: absolute;left: 50%;top: 25%;transform: translate(-50%, -50%);}
/* attention : margin auto ne fct pas sur effet zoom/parallaxe (aucun centrage) */
.dad-img-txt-cent{position: absolute; text-align: center; /* les marges de 50% sont trop importantes : left: 50%;top: 50%;transform: translate(-50%, -50%); */}
.dad-img-txt-cent-bas{position: absolute;left: 50%;top: 75%;transform: translate(-50%, -50%);}
/* voir css personnalisé /*
@media all and (max-width: 1109px / 1100px) /* /// doit être = à --dam-pcpal-med-hamb */
/*
{
.dad-img-txt-size-28-mobile{font-size: 2.8rem;}
}
*/
/*******************************************************************************************************************************
diaporama automatique et manuel (images fondues)
js pour la selection manuelle des images à afficher
********************************************************************************************************************************/
.dad-diaporama-auto-manuel
{
position: relative;
width: 100%; /* pleine largeur */
height: 800px; /* à régler */
max-height: 80vh; /* le diapo ne doit pas dépasser le bas de la fenêtre */
margin: auto;
overflow: hidden;
}
/* images superposées */
.dad-diaporama-auto-manuel .dad-diapo
{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 2s ease-in-out;/* opacity 1.5s ease-in-out;*/
}
.dad-position-l{object-position: left;}
.dad-position-c{object-position: center;}
.dad-position-r{object-position: right;}
.dad-position-t{object-position: top;}
.dad-position-b{object-position: bottom;}
.dad-position-lt{object-position: left top;}
.dad-position-lc{object-position: left center;}
.dad-position-lb{object-position: left bottom;}
.dad-position-rt{object-position: right top;}
.dad-position-rc{object-position: right center;}
.dad-position-rb{object-position: right bottom;}
/* l'image active devient visible */
.dad-diaporama-auto-manuel .dad-diapo.afficher
{
opacity: 1;
}
.dad-diaporama-auto-manuel .dad-texte-diapo
{
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%;
text-align: center;
color: white;
opacity: 0;
transition: opacity 2s ease-in-out;/* opacity 1.5s ease-in-out;*/
}
/* Le texte devient visible en même temps que l'image */
.dad-diaporama-auto-manuel .dad-diapo.afficher + .dad-texte-diapo
{
opacity: 1;
}
/* points de navigation */
.dad-diaporama-auto-manuel .dad-points
{
text-align: center;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.dad-diaporama-auto-manuel .dad-point
{
display: inline-block;
width: 12px;
height: 12px;
margin: 5px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
}
/* point actif */
.dad-diaporama-auto-manuel .dad-point.active
{
background-color: white;
}
/*******************************************************************************************************************************
galerie gestion médias (images ou videos ds back office)
vignettes + grille contenant l'image selectionnée et le formulaire associé
********************************************************************************************************************************/
.dad-galgestmed
{
background-color: var(--dad-galgestmed-bg-col);
}
/* le bouton "ajouter" et les vignettes */
.dad-galgestmed-ajout, .dad-galgestmed-vign
{
opacity: 0.6; /* effet de transparence */
cursor: pointer;
vertical-align: middle;
width: 100%;
min-height: fit-content; /* différence de 4px résolu entre vign>img et vign>bt-ajout !?!! */
aspect-ratio: 1/1;
/* contour */
border: 1px solid var(--dad-galgestmed-vign-bd-col);
border-radius: 4px;
padding: 5px;
}
.dad-galgestmed-ajout:hover,
.dad-galgestmed-vign.active, .dad-galgestmed-vign:hover
{
box-shadow: 0 0 2px 1px var(--dad-galgestmed-vign-hv-sh-col); /* effet relief */
opacity: 1;
}
/* vignette ajout */
.dad-galgestmed-ajout
{
display: flex; /* centrage des enfants de cette vignette */
justify-content: center; /* alignement horizontal */
align-items: center; /* aligement vertical */
}
.dad-galgestmed-ajout>div
{
pointer-events: none; /* ignore le clic pour qu'il soit traité par le parent */
}
/* glisser deposer : element parent */
/*
.dad-glidep-par
{}
*/
/* glisser deposer : element deplacable */
.dad-glidep-depl.survol
{
border: 2px dashed var(--dad-galgestmed-vign-bd-col);
}
/* les images des vignettes */
.dad-galgestmed-vign>img
{
/*opacity: 0.6; /* effet de transparence */
object-fit: contain; /* respect proportion img */
width: 100%;
aspect-ratio: inherit; /* pour garder l'effet carré */
pointer-events: none; /* ignore le clic pour qu'il soit traité par le parent */
}
.dad-galgestmed .da-notification .da-badge
{
display: none;
}
.dad-galgestmed-vign>img.active, .dad-galgestmed-vign>img:hover
{
opacity: 1;
}
/* conteneur contenant la diapo et les infos associées */
.dad-galgestmed-cont
{
/* effet relief ombré arrondi */
background-color: var(--dad-galgestmed-cont-bg-col);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 10px;
padding: 5px;
}
/* position du conteneur de la diapo (necessaire pour la position des 1/6 prec. suiv.) */
.dad-galgestmed-cont-diapos
{
position: relative;
border: solid var(--dad-galgestmed-cont-diap-bord-col);
border-radius: 5px;
}
.dad-galgestmed-cont-diapos:hover
{
border: solid var(--dad-galgestmed-cont-diap-hv-bord-col);
}
/* masque les diapos par défaut */
.dad-galgestmed-diapos, .dad-galgestmed-modele-infos, .dad-galgestmed-infos
{
display: none;
}
/* le div correspond à dad-diapomodal facultatif */
.dad-galgestmed-diapos>img,
.dad-galgestmed-diapos>div>img
{
object-fit: contain; /* respect proportion img */
width: 100%;
aspect-ratio: 1/1; /* pour garder l'effet carré */
pointer-events: none; /* ignore le clic pour qu'il soit traité par le parent */
}
/* numéro / nombres médias (2/5 etc) */
.dad-galgestmed-num
{
color: var(--dad-galgestmed-num-txt-col);
font-family: Arial;
font-size: 14px;
padding: 8px 12px;
position: absolute;
top: 0;
cursor: default;
user-select: none; /* selection du texte interdite */
-webkit-user-select: none; /* safari */
}
/* boutons précédent et suivant */
.dad-galgestmed-prec,
.dad-galgestmed-suiv
{
text-decoration: none;
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
color: var(--dad-galgestmed-prec-suiv-txt-col);
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none; /* selection du texte interdite */
-webkit-user-select: none; /* safari */
}
.dad-galgestmed-suiv
{
right: 0; /* position du bouton suivant à droite */
border-radius: 3px 0 0 3px;
}
.dad-galgestmed-prec:hover,
.dad-galgestmed-suiv:hover
{
background-color: var(--dad-galgestmed-prec-suiv-hv-bg-col);
color: var(--dad-galgestmed-prec-suiv-hv-txt-col);
opacity: 0.8; /* au survol : couleur noir transparent */
}
/* conteneur pour les infos */
.dad-galgestmed-cont-infos
{
padding: 20px;
}
/* bouton de fermeture dans conteneur-infos (masque diapo + info) */
.dad-galfestmed-bt-ferm
{
top: 10px;
text-align: right;
color: var(--dad-galgestmed-bt-ferm-txt-col);
font-family: Arial;
font-size: 35px;
cursor: pointer;
}
.dad-galfestmed-bt-ferm:hover
{
color: var(--dad-galgestmed-bt-ferm-hv-txt-col);
}
/********************************************************************************************************************************
diapos modales
affichage taille réelle de la diapo plein écran fond sombre avec croix pour fermeture
********************************************************************************************************************************/
/* groupe qui encadre tous les diapmodal (utile pour nav. prec / suiv)
.dad-diapmodal-grp
{
}
*/
/* diapo modalisable */
.dad-diapmodal
{
cursor: pointer;
transition: 0.3s;
}
.dad-diapmodal:hover
{
opacity: 0.7;
}
/* fond modal (background) */
.dad-diapmodal-fd
{
display: none;
position: fixed; /* rester en place */
z-index: 100; /* mise au 1er plan */
padding-top: 100px; /* emplacement de la boite */
left: 0;
top: 0;
width: 100%; /* pleine largeur */
height: 100%; /* pleine hauteur */
overflow: auto; /* active le scroll si image trop grande */
background-color: var(--dad-diapmodal-fd-bg-col); /* background de repli : la diapo ne sera pas transparente ! */
background-color: var(--dad-diapmodal-fd-bg-col-op); /* opacité légère */
}
/* bouton de fermeture */
.dad-diapmodal-ferm
{
position: absolute;
top: 15px;
right: 35px;
color: var(--dad-diapmodal-ferm-txt-col);
font-family: Arial;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.dad-diapmodal-ferm:hover,
.dad-diapmodal-ferm:focus
{
color: var(--dad-diapmodal-ferm-hv-txt-col);
opacity: 0.8; /* au survol : couleur noir transparent */
text-decoration: none;
cursor: pointer;
}
/* contenu modal (diapo et leg) */
.dad-diapmodal-cont
{
/* centrage vertical et horizontal */
position: fixed; /* position fixe quelque soit le scroll */
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}
.dad-diapmodal-diapo, .dad-diapmodal-leg
{
text-align: center;
/* ajout d'une animation */
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom
{
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom
{
from {transform:scale(0)}
to {transform:scale(1)}
}
.dad-diapmodal-diapo>img
{
pointer-events: none; /* ignore le clic pour qu'il soit traité par le parent */
}
/* legende de la diapo modale */
.dad-diapmodal-leg
{
font-family: Arial;
font-size: large;
color: var(--dad-diapmodal-leg-txt-col);
padding: 10px 0;
cursor: default;
user-select: none; /* selection du texte interdite */
-webkit-user-select: none; /* safari */
}
/* boutons précédent et suivant */
.dad-diapmodal-prec,
.dad-diapmodal-suiv
{
position: fixed;
top: 50%;
text-decoration: none;
padding: 16px;
color: var(--dad-diapmodal-prec-suiv-txt-col);
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
cursor: pointer;
user-select: none; /* selection du texte interdite */
-webkit-user-select: none; /* safari */
}
.dad-diapmodal-suiv
{
/* float: right; /* à droite de la colonne */
right: 0; /* à droite de la colonne */
border-radius: 3px 0 0 3px; /* inverse arrondies */
}
.dad-diapmodal-prec:hover,
.dad-diapmodal-suiv:hover
{
background-color: var(--dad-diapmodal-prec-suiv-hv-bg-col);
opacity: 0.8; /* au survol : couleur noir transparent */
}
/********************************************************************************************************************************
diapos logos client
defilement automatique et en boucle. centrage si nb logos insuffisant
taille / gap / vitesse (parametrable dans site > --dad-diap-)
********************************************************************************************************************************/
.dad-diap-logos-parent
{
position: relative;
overflow: hidden;
/* max-width: 1000px; création d'une marge sur ordi */
background: white;
padding: 20px 20px;
margin: 0px 20px;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
/* options */
/* -large : largeur d'écran */
.dad-diap-logos-parent.dad-large{width: 90%;}
/* -hover : sans cadre ombre */
.dad-diap-logos-parent.dad-no-box-shadow{box-shadow: none;}
/* -bord-coul-1-clair : cadre coloré */
.dad-diap-logos-parent.dad-bord-coul-1{border: 2px solid var(--das-coul-1);}
.dad-diap-logos-parent.dad-bord-coul-1-clair{border: 2px solid var(--das-coul-1-clair);}
.dad-diap-logos-parent.dad-bord-coul-2{border: 2px solid var(--das-coul-2);}
.dad-diap-logos-parent.dad-bord-coul-2-clair{border: 2px solid var(--das-coul-2-clair);}
/* ligne de logos */
.dad-diap-logos,
.dad-diap-logos-taille-manuelle
{
display: flex;
align-items: center;
gap: var(--dad-diap-logos-gap);
width: max-content;
animation: scroll var(--dad-diap-logos-vitesse) linear infinite;
}
/* logos */
.dad-diap-logos img
{
width: var(--dad-diap-logo-width);
height: auto;
object-fit: contain;
/* filter: grayscale(100%) brightness(0.9); mise en gris */
transition: filter 0.3s;
}
.dad-diap-logos-taille-manuelle img
{
/* gestion de la taille via les styles img_taille_largeur / hauteur */
object-fit: contain;
/* filter: grayscale(100%) brightness(0.9); mise en gris */
transition: filter 0.3s;
}
.dad-diap-logos img:hover,
.dad-diap-logos-taille-manuelle img:hover
{
filter: none;
}
/* animation continue gauche->droite */
@keyframes scroll
{
from {transform: translateX(0);}
to {transform: translateX(-50%);}
}
/* centrage automatique si peu de logos */
.dad-diap-logos-parent.centrage-auto .dad-diap-logos,
.dad-diap-logos-parent.centrage-auto .dad-diap-logos-taille-manuelle
{
animation: none;
justify-self: center;
transform: none;
}
@media (max-width: 600px)
{
:root { --dad-diap-logos-gap: 40px; --dad-diap-logo-width: 80px; }
}
/* dae : Dev Application Effet */
/********************************************************************************************************************************
habillage de photos
(à intégrer dans le conteneur de l'image)
(l'image doit être en display block)
********************************************************************************************************************************/
/* dégradé radial pour un effet lumineux */
.dae-degrade-radial-lumineux
{
background: radial-gradient(circle, var(--das-coul-1), var(--das-coul-1-fonce));
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
display: inline-block; /* pour que le conteneur s'adapte à la taille de l'image */
}
/* dégradé linéaire avec transparence */
.dae-degrade-lineaire-transparent
{
background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.75) 100%);
background-blend-mode: overlay;
}
/* motif géométrique en arrière plan */
.dae-motif-geometrique
{
background-color: var(--das-coul-1);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
background-size: 20px 20px;
padding: 20px;
border-radius: 10px;
display: inline-block;
}
/* effet de bordure floue */
.dae-bordure-floue
{
background-color: var(--das-coul-1);
padding: 20px;
border-radius: 15px;
box-shadow: 0 0 20px 10px rgba(var(--das-rgb-1), 0.5);
display: inline-block;
}
/* effet vague (svg en arrière plan) */
.dae-vague
{
background-color: var(--das-coul-1);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: bottom;
padding: 20px;
border-radius: 15px;
display: inline-block;
}
/* effet de texture papier */
.dae-texture-papier
{
background-color: var(--das-coul-1);
background-image: url('../../donnees/images/textures/paper.png');
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
display: inline-block;
}
.dae-texture-diagmonds-light
{
background-color: var(--das-coul-1);
background-image: url('../../donnees/images/textures/diagmonds-light.png');
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
display: inline-block;
}
/* ombre portée avec effet 3D */
.dae-ombre-3d
{
background-color: var(--das-coul-1);
padding: 20px;
border-radius: 15px;
box-shadow: 10px 10px 0px rgba(var(--das-rgb-1-fonce), 0.8);
display: inline-block;
}
/* ombre et arrondi pour vignette */
.dae-ombre-carte
{
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
/* desactivation dans le GRAND parent de la barre de défilement si sortie du cadre */
/* *:has(> .dae-forme-arrondi) */
.dae-forme-arrondi-grand-parent
{
position: relative;
overflow: hidden;
}
.dae-forme-arrondi
{
position: relative;
display: inline-block;
}
.dae-forme-arrondi.dae-tr::before
{
content: "";
position: absolute;
top: -20px;
right: -20px;
width: 120px;
height: 120px;
background-color: var(--das-coul-1);
border-radius: 50%; /* rond */
z-index: -1; /* derrière l'image */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* ombre portée */
}
/* desactivation dans le GRAND parent de la barre de défilement si sortie du cadre */
/* *:has(> .dae-rectangle-arrondi) */
.dae-rectangle-arrondi-grand-parent
{
position: relative;
overflow: hidden;
}
.dae-rectangle-arrondi
{
position: relative;
display: inline-block;
}
.dae-rectangle-arrondi.dae-lt::before
{
content: "";
position: absolute;
left: -5%;
top: -5%;
width: 90%;
height: 90%;
border-radius: 30px; /* rond */
}
.dae-rectangle-arrondi.dae-tr::before
{
content: "";
position: absolute;
top: -5%;
right: -5%;
width: 90%;
height: 90%;
border-radius: 30px; /* rond */
}
.dae-rectangle-arrondi.dae-rb::before
{
content: "";
position: absolute;
bottom: -5%;
right: -5%;
width: 90%;
height: 90%;
border-radius: 30px; /* rond */
}
.dae-rectangle-arrondi.dae-lb::before
{
content: "";
position: absolute;
bottom: -5%;
left: -5%;
width: 90%;
height: 90%;
border-radius: 30px; /* rond */
}
.dae-rectangle-arrondi img
{
position: relative;
z-index: 1; /* place l'image devant l'ombre */
}
.dae-rectangle-arrondi.dae-coul-1::before{background-color: var(--das-coul-1);}
.dae-rectangle-arrondi.dae-coul-1-clair::before{background-color: var(--das-coul-1-clair);}
.dae-rectangle-arrondi.dae-coul-2::before{background-color: var(--das-coul-2);}
.dae-rectangle-arrondi.dae-coul-2-clair::before{background-color: var(--das-coul-2-clair);}
.dae-rectangle-arrondi.dae-coul-3::before{background-color: var(--das-coul-3);}
.dae-rectangle-arrondi.dae-ombre::before{box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* ombre portée */}
/********************************************************************************************************************************
pivoter le texte
(rotation)
********************************************************************************************************************************/
/* desactive pour son parent la barre de defilement */
*:has(> [class*=dae-rotation-]),
.dae-rotation-parent
{
position: relative;
overflow: hidden;
}
.dae-rotation-10
{
display: inline-block;
transform: rotate(-10deg); /* rotation antihoraire */
}
/* daf : Dev Application Form */
:root
{
--daf-form-bg-col: var(--das-coul-blanc);/*var(--da-gris-clair);*/
--daf-form-border-col: #ccc;
--daf-form-font-family: var(--da-font-open-sans-serif);
--daf-form-font-size: 14px;
--daf-form-font-weight: 400;
--daf-form-msg-aide-coul: #E10720;
--daf-form-checkbox-font-family: var(--da-font-icone-del);
--daf-form-checkbox-font-size: 14px;
--daf-form-checkbox-col: var(--das-form-theme-coul);
--daf-form-input-focus-col: var(--das-form-theme-coul);
}
/********************************************************************************************************************************
formulaire (message d'aide + label + compo)
(checkbox, select, textarea, input (text, pwd, number))
********************************************************************************************************************************/
.daf-form
{
background-color: var(--daf-form-bg-col);
font-family: var(--daf-form-font-family);
font-size: var(--daf-form-font-size);
font-weight: var(--daf-form-font-weight);
}
.daf-form .daf-msg-aide.erreur input,
.daf-form .daf-msg-aide.erreur textarea
{
border-color: var(--daf-form-msg-aide-coul);
}
.daf-form .daf-msg-aide.erreur .daf-txt-aide
{
color: var(--daf-form-msg-aide-coul);
padding-left: 5px;
}
.daf-form input[type=text],
.daf-form input[type=date],
.daf-form input[type=password],
.daf-form input[type=number],
.daf-form input[type=file],
.daf-form textarea,
.daf-form select
{
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
display: inline-block;
border: 1px solid var(--daf-form-border-col);
border-radius: 4px;
box-sizing: border-box;
}
.daf-form input[type=text],
.daf-form input[type=password],
.daf-form input[type=number],
.daf-form input[type=file],
.daf-form textarea,
.daf-form select
{
width: 100%;
}
.daf-form input[type=text]:focus-visible,
.daf-form input[type=date]:focus-visible,
.daf-form input[type=password]:focus-visible,
.daf-form input[type=number]:focus-visible,
.daf-form input[type=file]:focus-visible,
.daf-form textarea:focus-visible,
.daf-form select:focus-visible
{
outline-color: var(--daf-form-input-focus-col);
}
.daf-form textarea
{
resize: vertical;
}
.daf-form input[type=checkbox]
{
appearance: none;
height: 23px;
width: 23px;
padding: 2px 0px 0px 1px; /* centrage check */
background: #fff;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
border: 1px solid var(--daf-form-border-col);
border-radius: 4px;
}
.daf-form input[type=checkbox].daf-enligne
{
margin-top: 10px;
margin-right: 0px;
margin-bottom: -6px;
margin-left: 0px;
}
.daf-form input[type=checkbox].daf-check-enligne
{
margin-top: -20px;
}
.daf-form input[type=checkbox]:checked
{
position: relative;
}
.daf-form input[type=checkbox]:checked:before
{
content: '3'; /* check */
display: block;
position: absolute;
font-family: var(--daf-form-checkbox-font-family);
font-size: var(--daf-form-checkbox-font-size);
color: var(--daf-form-checkbox-col);
text-align: center;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 2px;
}
.daf-form .desactive
{
background-color: #f0f0f0;
color: #aaa;
pointer-events: none; /* desactive l'interaction avec l'input */
}
label[for=input_phone],
input#input_phone
{
display: none;
}
/* dam : Dev Application Menu */
/*
:root
{
--dam-accordeon-border: 1px solid #ddd;
--dam-accordeon-entete-border-radius: inherit;
--dam-accordeon-entete-bg-col: #e7f1ff;
--dam-accordeon-entete-hov-bg-col: #d2e5ff;
--dam-accordeon-entete-txt-col: #0c63e4;
--dam-accordeon-entete-bt-col: #0c63e4;
--dam-accordeon-entete-sign-font-family: var(--da-font-icone-del);
--dam-accordeon-entete-sign-ouv: 'u'; /* signe ouvrir : 'u' : v '\002B' : signe + */
/* --dam-accordeon-entete-sign-fer: 'v'; /* signe fermer : 'v' : ^ '\2212' : signe - */
/* --dam-accordeon-corps-bg-col: #ffffff;
}
*/
/********************************************************************************************************************************
menu pliable accordéon (ruban horizontal avec un + ou - en fin de ligne)
*********************************************************************************************************************************/
.dam-accordeons .dam-accordeon:first-of-type,
.dam-accordeons .dam-accordeon:first-of-type .dam-accordeon-entete
{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.dam-accordeons .dam-accordeon:not(:first-of-type)
{
border-top: 0;
}
.dam-accordeons .dam-accordeon:last-of-type,
.dam-accordeons .dam-accordeon:last-of-type .dam-accordeon-entete:not(.active),
.dam-accordeons .dam-accordeon:last-of-type .dam-accordeon-entete.active + .dam-accordeon-corps
{
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.dam-accordeon
{
border: var(--dam-accordeon-border);
}
.dam-accordeon .dam-accordeon-entete
{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background-color: var(--dam-accordeon-entete-bg-col);
color: var(--dam-accordeon-entete-txt-col);
cursor: pointer;
padding: 18px;
/* width: 100%; bug entete depasse la largeur */
text-align: left;
outline: none;
font-size: 15px;
border-radius: var(--dam-accordeon-entete-border-radius);
/* transition: 0.4s; */
}
.dam-accordeon .dam-accordeon-entete.active, .dam-accordeon-entete:hover
{
background-color: var(--dam-accordeon-entete-hov-bg-col);
border-bottom: var(--dam-accordeon-border);
}
.dam-accordeon .dam-accordeon-entete .dam-accordeon-entete-titre
{
flex: 1; /* le texte prend toute la place disponible */
pointer-events: none; /* désactive les événements de souris sur l'élément titre pour gerer le clic sur H3 */
}
.dam-accordeon .dam-accordeon-entete:after
{
font-family: var(--dam-accordeon-entete-sign-font-family);
font-size: 20px;
text-decoration: none;
font-style: normal;
color: var(--dam-accordeon-entete-bt-col);
font-weight: bold;
float: right;
margin-left: 5px;
content: var(--dam-accordeon-entete-sign-ouv); /* signe v */
transform-origin: 50% 50%;
transform: rotate(0deg);
transition-duration: 0.25s;
}
/* menu accordeon primaire */
.dam-accordeon .dam-accordeon-entete.primaire{background-color: var(--dam-accordeon-entete-primaire-bg-col);color: var(--dam-accordeon-entete-primaire-txt-col);}
.dam-accordeon .dam-accordeon-entete.primaire.active, .dam-accordeon-entete.primaire:hover{background-color: var(--dam-accordeon-entete-primaire-hov-bg-col);}
.dam-accordeon .dam-accordeon-entete.primaire:after{color: var(--dam-accordeon-entete-primaire-bt-col);}
/* menu accordeon secondaire */
.dam-accordeon .dam-accordeon-entete.secondaire{background-color: var(--dam-accordeon-entete-secondaire-bg-col);color: var(--dam-accordeon-entete-secondaire-txt-col);}
.dam-accordeon .dam-accordeon-entete.secondaire.active, .dam-accordeon-entete.secondaire:hover{background-color: var(--dam-accordeon-entete-secondaire-hov-bg-col);}
.dam-accordeon .dam-accordeon-entete.secondaire:after{color: var(--dam-accordeon-entete-secondaire-bt-col);}
/* menu accordeon rouge */
.dam-accordeon .dam-accordeon-entete.rouge{background-color: var(--dam-accordeon-entete-rouge-bg-col);color: var(--dam-accordeon-entete-rouge-txt-col);}
.dam-accordeon .dam-accordeon-entete.rouge.active, .dam-accordeon-entete.rouge:hover{background-color: var(--dam-accordeon-entete-rouge-hov-bg-col);}
.dam-accordeon .dam-accordeon-entete.rouge:after{color: var(--dam-accordeon-entete-rouge-bt-col);}
/* menu accordeon vert */
.dam-accordeon .dam-accordeon-entete.vert{background-color: var(--dam-accordeon-entete-vert-bg-col);color: var(--dam-accordeon-entete-vert-txt-col);}
.dam-accordeon .dam-accordeon-entete.vert.active, .dam-accordeon-entete.vert:hover{background-color: var(--dam-accordeon-entete-vert-hov-bg-col);}
.dam-accordeon .dam-accordeon-entete.vert:after{color: var(--dam-accordeon-entete-vert-bt-col);}
/* menu accordeon blanc et rouge */
.dam-accordeon .dam-accordeon-entete.blanc-rouge{border: 1px solid var(--dam-accordeon-entete-rouge-txt-col); background-color: white;color: var(--dam-accordeon-entete-rouge-txt-col); border-radius: 0px;}
.dam-accordeon .dam-accordeon-entete.blanc-rouge.active, .dam-accordeon-entete.blanc-rouge:hover{border: 1px solid var(--dam-accordeon-entete-rouge-txt-col); background-color: var(--dam-accordeon-entete-rouge-hov-bg-col);}
.dam-accordeon .dam-accordeon-entete.blanc-rouge:after{color: var(--dam-accordeon-entete-rouge-bt-col);}
/* menu accordeon blanc et vert */
.dam-accordeon .dam-accordeon-entete.blanc-vert{border: 1px solid var(--dam-accordeon-entete-vert-txt-col); background-color: white; color: var(--dam-accordeon-entete-vert-txt-col); border-radius: 0px;}
.dam-accordeon .dam-accordeon-entete.blanc-vert.active, .dam-accordeon-entete.blanc-vert:hover{border: 1px solid var(--dam-accordeon-entete-vert-txt-col); background-color: var(--dam-accordeon-entete-vert-hov-bg-col);}
.dam-accordeon .dam-accordeon-entete.blanc-vert:after{color: var(--dam-accordeon-entete-vert-bt-col);}
.dam-accordeon .dam-accordeon-entete.active:after
{
content: var(--dam-accordeon-entete-sign-fer); /* on renverse plutôt le signe v pour faire un signe ^ */
transform-origin: 50% 50%;
transform: rotate(-180deg);
transition-duration: 0.25s;
}
/* Version compacte - une seule règle */
.dam-accordeon .dam-accordeon-entete.dam-accordeon-icone-gauche
{
flex-direction: row-reverse;
justify-content: flex-end;
gap: 10px;
}
.dam-accordeon .dam-accordeon-entete.dam-accordeon-icone-gauche:after
{
margin-left: 0;
margin-right: 5px;
float: none;
}
.dam-accordeon .dam-accordeon-corps
{
background-color: var(--dam-accordeon-corps-bg-col);
padding: 0px;
display: grid; /* utile pr effet slide height (impossible avec height auto) */
grid-template-rows: 0fr;
transition: grid-template-rows 1s, padding 1s;
}
.dam-accordeon .dam-accordeon-corps .dam-accordeon-corps-hauteur
{
overflow: hidden;
padding: 0px 5px; /* marge gauche droite pour decalage ligne verte editeur_wysiwyg */
}
/* fluide : effet slide immédiat sur le texte */
.dam-accordeon .dam-accordeon-corps.fluide
{
overflow: hidden;
}
.dam-accordeon .dam-accordeon-corps.fluide .dam-accordeon-corps-hauteur
{
height: fit-content; /* fluide : effet slide immédiat sur le texte */
}
/* si entete active : affiche le corps */
.dam-accordeon .dam-accordeon-entete.active+.dam-accordeon-corps
{
padding: 10px;
grid-template-rows: 1fr; /* affecte la hauteur totale */
}
/********************************************************************************************************************************
menu principal
(responsive + dropdown 2 niveaux + lien (parent du sous menu) actif)
********************************************************************************************************************************/
/* menu principal */
#dam-pcpal-logo
{
display: block;
text-align: center;
transition: 0.4s;
}
#dam-pcpal-logo a
{
padding: 0px;
}
/* masque le label.dam-ico-deroul et le checkbox
(utile en hamburger pour derouler le sous menu tout en gardant le lien du parent) */
.dam-pcpal .dam-ico-deroul,
.dam-pcpal [id^=dam-deroul-pcpal]
{
display: none;
}
/* menu principal */
.dam-pcpal
{
background-color: var(--dam-pcpal-bg-col);
position: relative;
z-index: 10;
font-family: var(--dam-pcpal-font-family);
line-height: 32px;
margin: 0;
}
.dam-pcpal .dam-contenu
{
/* annulation marge ul par défaut */
margin: 0px;
background-color: var(--dam-pcpal-bg-col);
position: relative;
float: right;
list-style: none;
padding: 0;
border: none;
}
/* menu principal inline */
.dam-pcpal ul li
{
/* display: inline-block; */
float: left;
margin: 0;
}
/* rajout d'un "content vide" après le menu principal pour annuler le float à left du ul li */
.dam-pcpal:after
{
content: "";
display: table;
clear: both;
}
.dam-pcpal a
{
display: block;
color: var(--dam-pcpal-txt-col);
text-decoration: none;
font-weight: normal;
font-size: var(--dam-pcpal-txt-size);
margin: 0px 20px;
}
/* on place le et le label.dam-ico-deroul + sur la même ligne */
.dam-pcpal .dam-entete-sous-menu
{
width: 100%;
display: inline-flex;
align-items: baseline;
justify-content: space-between;
}
/* affecte la fleche basse au du li */
/** 2019 : les :: pour les pseudos elements ne sont pas pris en compte sur les iphones 5C (ios 10.3.3) **/
.dam-pcpal li > .dam-entete-sous-menu > a:after
{
font-family: icone_del, sans-serif;
text-transform: none; /* pas de mise en capitale ou majuscule */
content: 'a'; /* triangle pointe en bas */
/* espace entre le texte du menu et le triangle : */
padding: 0px 10px;
}
/* pas de fleche basse sur le a si pas de sous menu : */
.dam-pcpal li > .dam-entete-sous-menu > a:only-child:after
{
content: '';
}
.dam-pcpal .dam-ico-deroul:after
{
content: '+';
cursor: pointer;
/* necessaire pour pouvoir transformer le content : */
display: inline-block;
font-family: icone_del, sans-serif;
font-size: 10px;/* 0.625em;*/
/* bascule a la normale le + du label */
transform-origin: 50% 50%;
transform: rotate(0deg);
transition-duration: 1s;
}
.dam-pcpal .dam-ico-deroul.hamburger:after
{
content: 'b'; /* 3 barres horizontales */
cursor: pointer;
/* necessaire pour pouvoir transformer le content : */
display: inline-block;
font-family: icone_del, sans-serif;
font-size: 26px;/*1.625em;*/
color: var(--dam-pcpal-hamburger-icone-col);
/* bascule a la normale le hamburger à la fermeture du menu : */
transform-origin: 50% 50%;
transform: rotate(0deg);
transition-duration: 1s;
}
.dam-pcpal .dam-ico-deroul.hamburger:hover:after
{
color: var(--dam-pcpal-hamburger-icone-hov-col);
}
/* masque les sous menu par defaut : */
.dam-pcpal .dam-sous-contenu
{
display: none;
position: absolute;
background-color: var(--dam-pcpal-bg-col);
border: var(--dam-pcpal-sous-menu-border);
border-radius: var(--dam-pcpal-sous-menu-border-radius);
padding: var(--dam-pcpal-sous-menu-padding);
list-style: none;
}
/* sous menu */
.dam-pcpal ul ul li
{
display: list-item;
position: relative;
float: none;
width: var(--dam-pcpal-sous-menu-1-width);
/** min-width: max-content; pour une largeur automatique (attention au décalage des sous menu) **/
}
.dam-pcpal ul ul ul
{
border-radius: 8px;
border: 1px solid #ccc;
/** décaler sous sous menu à droite : si sortie de l'écran pour des sous sous-menus trop à droite : appliquer le même ajustement que les hints de l'éditeur wysiwyg
position: relative;
top: -60px;
left: 210px; */
}
/* sous sous menu */
.dam-pcpal ul ul ul li
{
position: relative;
/** décaler sous sous menu à droite : si sortie de l'écran pour des sous sous-menus trop à droite : appliquer le même ajustement que les hints de l'éditeur wysiwyg
top: -60px;
left: 210px;
*/
}
/* affichage du sous menu */
.dam-pcpal .dam-contenu li:hover > .dam-sous-contenu
{
display: inherit;
}
/*----------------------------------------------------------------------------------------
Media Queries
(gestion du menu hamburger pour une taille inferieure à 1109px / 1100px)
---------------------------------------------------------------------------------------- */
/* voir fichier personnalisé
@media all and (max-width: 1109px / 1100px) /* /// doit être = à --dam-pcpal-med-hamb */
/*
{
}
*/
@media all and (max-width: 330px)
{
.dam-pcpal ul li
{
display: block;
width: 100%;
}
.dam-pcpal a:hover,
.dam-pcpal .dam-ico-deroul:hover,
.dam-pcpal a.menu-select,
.dam-pcpal a.parent-select:after,
.dam-pcpal .dam-ico-deroul.parent-select:after /* dans label pour version hamburger */
{
color: var(--dam-pcpal-hamburger-txt-hov-col);
}
}
/********************************************************************************************************************************
largeur colonne (12 découpages) pour le menu principal
changement largeur ecran (small 0-799, medium 800-1199, large 1200-...)
********************************************************************************************************************************/
/* voir fichier personnalisé site ou admin_site */
/* s : .dam-sxx ecran small */
/* m : .dam-mxx ecran medium */
/* l : .dam-lxx ecran large */
/********************************************************************************************************************************
menu latéral gauche
(responsive + dropdown 2 niveaux + lien (parent du sous menu) actif)
********************************************************************************************************************************/
.dam-parent-lateral
{
display: flex;
flex-direction: column;
width: var(--dam-parent-lateral-width);
}
.dam-lateral
{
display: flow-root;
background-color: var(--dam-lateral-bg-col);
padding: 10px;
overflow: auto;
}
.dam-lateral.sticky
{
position: sticky;
/* height: var(--dam-lateral-contenu-sticky-height); /* necessaire pour le sticky si non declaré */
top: var(--dam-lateral-sticky-top);
}
.dam-lateral .dam-contenu
{
height: var(--dam-lateral-contenu-sticky-height);
/* annulation marge ul par défaut */
margin: 0px;
padding-left: 2rem;
list-style: none;
}
.dam-lateral .dam-ico-deroul.hamburger,
[id=dam-deroul-lateral],
.dam-lateral [id^=dam-deroul-lateral]
{
display: none;
}
/* on place le et le label.dam-ico-deroul + sur la même ligne */
.dam-lateral .dam-entete-sous-menu
{
width: 100%;
display: inline-flex;
align-items: baseline;
justify-content: space-between;
}
/* masque les sous menu par defaut : */
.dam-lateral .dam-sous-contenu
{
display: none;
list-style: none;
padding-left: 20px;
padding-right: 5px;
margin-bottom: 5px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
/* gestion des icones + et - */
.dam-lateral .dam-ico-deroul
{
margin-right: 10px;
color: var(--dam-lateral-txt-col);
}
.dam-lateral .dam-ico-deroul.hamburger:after
{
content: 'b'; /* 3 barres horizontales */
cursor: pointer;
margin: 10px;
/* necessaire pour pouvoir transformer le content : */
display: inline-block;
font-family: icone_del, sans-serif;
font-size: 26px;/*1.625em;*/
color: var(--dam-lateral-hamb-txt-col);
/* bascule a la normale le hamburger à la fermeture du menu : */
transform-origin: 50% 50%;
transform: rotate(0deg);
transition-duration: 1s;
}
.dam-lateral .dam-ico-deroul:after
{
content: '+';
cursor: pointer;
/* necessaire pour pouvoir transformer le content : */
display: block;
font-family: icone_del, sans-serif;
font-size: 10px;
/* bascule a la normale le + du label */
transform-origin: 50% 50%;
transform: rotate(0deg);
transition-duration: 1s;
}
/* changement du + en - avec animation */
.dam-lateral [id^=dam-deroul-lateral]:checked + [class^=dam-entete-sous-menu]>.dam-ico-deroul:after
{
content: '-';
/* necessaire pour pouvoir transformer le content */
display: inline-block;
transform: rotate(180deg);
transition-duration: 1s;
}
.dam-lateral [id^=dam-deroul-lateral]:checked + [class^=dam-entete-sous-menu]+.dam-sous-contenu
{
display: block;
}
.dam-lateral .dam-sous-contenu li
{
border-bottom: none;
}
.dam-lateral a
{
color: var(--dam-lateral-txt-col);
display: block;
text-decoration: none;
font-weight: normal;
padding: 0.5em 0em;
}
.dam-lateral a.inactif,
.dam-lateral a.inactif:hover
{
color: var(--dam-lateral-txt-inactif-col);
cursor: default;
}
.dam-lateral a:hover,
.dam-lateral .dam-ico-deroul:hover,
.dam-lateral a.menu-select,
.dam-lateral .dam-ico-deroul.parent-select:after
{
color: var(--dam-lateral-hov-txt-select-col);
}
/*----------------------------------------------------------------------------------------
Media Queries
(gestion du menu hamburger pour une taille inferieure à 1109px / 1100px)
---------------------------------------------------------------------------------------- */
/* voir fichier personnalisé */
/*@media all and (max-width: 1109px / 1100px) /* /// doit être = à --dam-lateral-med-hamb */
/*
{
}
*/
/* dat : Dev Application Tableau */
:root
{
--dat-tab-font-family: var(--da-font-open-sans-serif);
--dat-tab-font-weight: 500;
--dat-tab-border: 1px solid #ddd;
--dat-tab-tr-hov-bg-col: #f5f5f5;
--dat-tab-tr-zebre-bg-col: #fff; /* #fafafa;*/ /* ligne zebree */
--dat-tab-lab-actif-txt-col: var(--da-vert-logo-da);
}
/********************************************************************************************************************************
tableau
********************************************************************************************************************************/
.dat-parent-tab
{
overflow-x: auto; /* barre de defilement si texte > largeur col */
}
.dat-tab
{
table-layout: auto; /* largeur auto des colonnes (sinon appliqué un class="da-s12" à chaque | ) */
border-collapse: collapse; /* jointure des bordures des colonnes */
width:100%;
caption-side: bottom; /* titre du tableau sous le tableau */
font-family: var(--dat-tab-font-family);
font-size: 0.9em;
}
.dat-tab thead, .dat-tab thead tr, .dat-tab thead th,
.dat-tab tbody, .dat-tab tbody tr, .dat-tab tbody td,
.dat-tab tfoot
{
border-color: inherit;
border-style: solid;
border-width: 0px;
}
.dat-tab thead tr:hover,
.dat-tab tbody tr:hover,
.dat-tab tbody tr:nth-child(even):hover /* ligne zebree */
{
background-color: var(--dat-tab-tr-hov-bg-col);
}
.dat-tab thead th
{
font-weight: var(--dat-tab-font-weight);
}
.dat-tab thead th,
.dat-tab tbody td
{
padding: 8px;
text-align: left;
border-bottom: var(--dat-tab-border);
white-space: pre-line; /* retour à la ligne pour les intentions */
}
.dat-tab thead th.center,
.dat-tab tbody td.center
{
text-align: center;
}
.dat-tab thead th.right,
.dat-tab tbody td.right
{
text-align: right;
}
.dat-tab tbody td.dat-tiret
{
border-style: dashed;
}
.dat-tab tbody tr:nth-child(even)
{
background-color: var(--dat-tab-tr-zebre-bg-col);
}
.dat-tab .label.actif
{
color: var(--dat-tab-lab-actif-txt-col);
}
/********************************************************************************************************************************
referencement moteur de recherche
********************************************************************************************************************************/
.dat-ref-metas
{
max-width: 600px;
font-size: 14px;
font-family: Arial, sans-serif;
}
.dat-ref-meta-favicon
{
display: flex;
align-items: center;
}
.dat-ref-meta-favicon-cadre
{
background-color: #f1f3f4;
border: 1px solid #ecedef;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
height: 26px;
width: 26px;
margin-right: 12px;
flex-shrink: 0;
vertical-align: middle;
float: left;
}
.dat-ref-meta-nom-site
{
color: #202124;
font-family: "Open sans",Arial, Helvetica, sans-serif;
font-weight: 500;
}
.dat-ref-meta-lien
{
color: #4d5156;
line-height: 20px;
font-weight: normal;
}
.dat-ref-meta-titre
{
color: #1a0dab;
font-size: 20px;
font-weight: 400;
line-height: 26px;
margin-bottom: 3px;
padding-top: 5px;
}
.dat-ref-meta-description
{
color: #4d5156;
line-height: 22px;
}
/* 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-2-clair);
border-radius: 5px;
padding: 10px;
margin: 5px;
text-transform: capitalize;
text-decoration: none;
font-size: 1.4rem;
color: var(--das-text-coul);
}
.desj-etiquette-liste
{
cursor: pointer;
}
.da-etiquette-carte
{
display: inline-block;
background-color: var(--das-coul-2-clair);
border-radius: 5px;
padding: 4px 10px;
margin: 3px;
text-transform: capitalize;
text-decoration: none;
font-size: 1.2rem;
color: var(--das-text-coul);
}
/********************************************************************************************************************************
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-contour-1"
class="da-bouton-plein-1-white"
class="da-bouton-lien-1"
********************************************************************************************************************************/
/* bouton sans couleur */
/* valable aussi pour da-bouton-rond */
.da-bouton,
[class*=da-bouton-old],
[class*=da-bouton-contour],
[class*=da-bouton-plein],
[class*=da-bouton-lien],
[class*=da-bouton-rond]
{
display: inline-block;
border-radius: 3px;
border: var(--das-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;
background-color: var(--da-bouton-base-coul);
border-color: var(--da-bouton-gris-coul);
color: var(--da-bouton-gris-coul);
}
/* base commune pour l'icone avant ou apres le texte du bouton */
/* charger le compo icone et le compo icone-avant ou -apres */
[class*=da-bouton-contour]::before,
[class*=da-bouton-plein]::before,
[class*=da-bouton-lien]::before,
[class*=da-bouton-rond]::before,
[class*=da-bouton-contour]::after,
[class*=da-bouton-plein]::after,
[class*=da-bouton-lien]::after,
[class*=da-bouton-rond]::after
{
content: "";
display: inline-block;
align-items: center;
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
transition: transform 0.25s ease;
}
[class*=da-bouton-contour]:hover::before,
[class*=da-bouton-plein]:hover::before,
[class*=da-bouton-lien]:hover::before,
[class*=da-bouton-contour]:hover::after,
[class*=da-bouton-plein]:hover::after,
[class*=da-bouton-lien]:hover::after
{
transform: translateX(4px);
}
[class*=da-bouton-contour]
{
background-color: transparent;
border-color: var(--da-bouton-gris-coul);
color: var(--da-bouton-gris-coul);
}
.da-bouton-contour:hover
{
background-color: var(--da-bouton-base-coul);
border-color: var(--da-bouton-gris-coul);
color: var(--da-bouton-gris-coul);
}
.da-bouton-plein,
.da-bouton-rond
{
background-color: var(--da-bouton-gris-coul);
border-color: var(--da-bouton-base-coul);
color: var(--da-bouton-base-coul);
}
.da-bouton-plein:hover,
.da-bouton-rond:hover
{
background-color: var(--da-bouton-base-coul);
border-color: var(--da-bouton-gris-coul);
color: var(--da-bouton-gris-coul);
}
[class*=da-bouton-lien]
{
background-color: transparent;
border: none;
color: var(--da-bouton-gris-coul);
}
[class*=da-bouton-lien]:hover
{
color: var(--das-text-coul);
}
[class*=da-bouton-rond]
{
border-radius: 50%;
height: 80%;/* rond parfait dans 80% de son contenant */
aspect-ratio: 1/1; /* (width = height) */
}
/* fond transparent et contour couleur */
.da-bouton-contour-1{border-color: var(--das-coul-1);color: var(--das-coul-1);}
.da-bouton-contour-2{border-color: var(--das-coul-2);color: var(--das-coul-2);}
.da-bouton-contour-1-clair{border-color: var(--das-coul-1-clair);color: var(--das-coul-1-clair);}
.da-bouton-contour-2-clair{border-color: var(--das-coul-2-clair);color: var(--das-coul-2-clair);}
.da-bouton-contour-1:hover{background-color: var(--das-coul-1);border-color: var(--da-bouton-base-coul);color: var(--da-bouton-base-coul);}
.da-bouton-contour-2:hover{background-color: var(--das-coul-2);border-color: var(--da-bouton-base-coul);color: var(--da-bouton-base-coul);}
.da-bouton-contour-1-clair:hover{background-color: var(--das-coul-1-clair);border-color: var(--da-bouton-base-coul);color: var(--da-bouton-base-coul);}
.da-bouton-contour-2-clair:hover{background-color: var(--das-coul-2-clair);border-color: var(--da-bouton-base-coul);color: var(--da-bouton-base-coul);}
/* fond couleur et contour blanc */
.da-bouton-plein-1-blanc{background-color: var(--das-coul-1);border-color: var(--das-coul-blanc);color: var(--das-coul-blanc);}
.da-bouton-plein-2-blanc{background-color: var(--das-coul-2);border-color: var(--das-coul-blanc);color: var(--das-coul-blanc);}
.da-bouton-plein-1-blanc:hover{background-color: var(--das-coul-blanc);border-color: var(--das-coul-1);color: var(--das-coul-1);}
.da-bouton-plein-2-blanc:hover{background-color: var(--das-coul-blanc);border-color: var(--das-coul-2);color: var(--das-coul-2);}
/* fond couleur et contour white */
.da-bouton-plein-1-white{background-color: var(--das-coul-1);border-color: white;color: white;}
.da-bouton-plein-2-white{background-color: var(--das-coul-2);border-color: white;color: white;}
.da-bouton-plein-1-white:hover{background-color: white;border-color: var(--das-coul-1);color: var(--das-coul-1);}
.da-bouton-plein-2-white:hover{background-color: white;border-color: var(--das-coul-2);color: var(--das-coul-2);}
/* fond blanc et contour couleur */
.da-bouton-plein-blanc-1{background-color: var(--das-coul-blanc);border-color: var(--das-coul-1);color: var(--das-coul-1);}
.da-bouton-plein-blanc-2{background-color: var(--das-coul-blanc);border-color: var(--das-coul-2);color: var(--das-coul-2);}
.da-bouton-plein-blanc-1:hover{background-color: var(--das-coul-1);border-color: var(--das-coul-blanc);color: var(--das-coul-blanc);}
.da-bouton-plein-blanc-2:hover{background-color: var(--das-coul-2);border-color: var(--das-coul-blanc);color: var(--das-coul-blanc);}
/* fond white et contour couleur */
.da-bouton-plein-white-1{background-color: white;border-color: var(--das-coul-1);color: var(--das-coul-1);}
.da-bouton-plein-white-2{background-color: white;border-color: var(--das-coul-2);color: var(--das-coul-2);}
.da-bouton-plein-white-1:hover{background-color: var(--das-coul-1);border-color: white;color: white;}
.da-bouton-plein-white-2:hover{background-color: var(--das-coul-2);border-color: white;color: white;}
/* bouton lien 1 (survol foncé ou white) */
.da-bouton-lien-1{color: var(--das-coul-1);}
.da-bouton-lien-1:hover{color: var(--das-text-coul);}
.da-bouton-lien-1-white{color: var(--das-coul-1);}
.da-bouton-lien-1-white:hover{color: white;}
/* bouton lien 2 (survol foncé ou white) */
.da-bouton-lien-2{color: var(--das-coul-2);}
.da-bouton-lien-2:hover{color: var(--das-text-coul);}
.da-bouton-lien-2-white{color: var(--das-coul-2);}
.da-bouton-lien-2-white:hover{color: white;}
/* bouton bouton (survol couleur 1 ou 2) */
.da-bouton-lien-white-0{color: white;}
.da-bouton-lien-white-0:hover{color: var(--das-text-coul);}
.da-bouton-lien-white-1{color: white;}
.da-bouton-lien-white-1:hover{color: var(--das-coul-1);}
.da-bouton-lien-white-2{color: white;}
.da-bouton-lien-white-2:hover{color: var(--das-coul-2);}
.da-bouton-lien-white-blanc{color: white;}
.da-bouton-lien-white-blanc:hover{color: var(--das-coul-blanc);}
[class*=da-bouton-lien].da-retour::after{content: none !important;display: none !important;}
[class*=da-bouton-lien].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-lien].da-retour:hover::before{transform: scaleX(-1) translateX(6px); opacity: 1;}
/* fond couleur et contour blanc */
.da-bouton-rond-1-blanc{background-color: var(--das-coul-1);border-color: var(--das-coul-blanc);color: var(--das-coul-blanc);}
.da-bouton-rond-2-blanc{background-color: var(--das-coul-2);border-color: var(--das-coul-blanc);color: var(--das-coul-blanc);}
.da-bouton-rond-1-blanc:hover{background-color: var(--das-coul-blanc);border-color: var(--das-coul-1);color: var(--das-coul-1);}
.da-bouton-rond-2-blanc:hover{background-color: var(--das-coul-blanc);border-color: var(--das-coul-2);color: var(--das-coul-2);}
/* fond couleur et contour white */
.da-bouton-rond-1-white{background-color: var(--das-coul-1);border-color: white;color: white;}
.da-bouton-rond-2-white{background-color: var(--das-coul-2);border-color: white;color: white;}
.da-bouton-rond-1-white:hover{background-color: white;border-color: var(--das-coul-1);color: var(--das-coul-1);}
.da-bouton-rond-2-white:hover{background-color: white;border-color: var(--das-coul-2);color: var(--das-coul-2);}
/* fond blanc et contour couleur */
.da-bouton-rond-blanc-1{background-color: var(--das-coul-blanc);border-color: var(--das-coul-1);color: var(--das-coul-1);}
.da-bouton-rond-blanc-2{background-color: var(--das-coul-blanc);border-color: var(--das-coul-2);color: var(--das-coul-2);}
.da-bouton-rond-blanc-1:hover{background-color: var(--das-coul-1);border-color: var(--das-coul-blanc);color: var(--das-coul-blanc);}
.da-bouton-rond-blanc-2:hover{background-color: var(--das-coul-2);border-color: var(--das-coul-blanc);color: var(--das-coul-blanc);}
/* fond white et contour couleur */
.da-bouton-rond-white-1{background-color: white;border-color: var(--das-coul-1);color: var(--das-coul-1);}
.da-bouton-rond-white-2{background-color: white;border-color: var(--das-coul-2);color: var(--das-coul-2);}
.da-bouton-rond-white-1:hover{background-color: var(--das-coul-1);border-color: white;color: white;}
.da-bouton-rond-white-2:hover{background-color: var(--das-coul-2);border-color: white;color: white;}
.da-bouton-old-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-old-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-old-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-old-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-old-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-old-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-old-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-old-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-old-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-old-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-old-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-old-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-old-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-old-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-old-noir-blanc,.da-bouton-plein-noir-blanc:hover{border-color: black;background-color: var(--da-bouton-base-coul);color: black;}
.da-bouton-old-noir-blanc:hover,.da-bouton-plein-noir-blanc{border-color: white;background-color: black;color: white;}
.da-bouton-old-blanc-noir,.da-bouton-plein-blanc-noir:hover{border-color: white;background-color: black;color: white;}
.da-bouton-old-blanc-noir:hover,.da-bouton-plein-blanc-noir{border-color: black;background-color: white;color: black;}
.da-bouton-old-blanc-noir-1,.da-bouton-plein-blanc-noir-1:hover{border-color: black;background-color: var(--das-coul-1);color: white;}
.da-bouton-old-blanc-noir-1:hover,.da-bouton-plein-blanc-noir-1{border-color: black;background-color: white;color: black;}
.da-bouton-old-amber-grey,.da-bouton-plein-amber-grey:hover{border-color: #ffc107;background-color: var(--da-bouton-base-coul);color: #ffc107;}
.da-bouton-old-amber-grey:hover,.da-bouton-plein-amber-grey{border-color: grey;background-color: #ffc107;color: black;}
.da-bouton-old-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-old-amber-rouge:hover,.da-bouton-plein-amber-rouge{border-color: var(--da-bouton-rouge-coul);background-color: #ffc107;color: black;}
.da-bouton-old-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-old-amber-vert:hover,.da-bouton-plein-amber-vert{border-color: var(--da-bouton-vert-coul);background-color: #ffc107;color: black;}
.da-bouton-old-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-old-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-old-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-old-blanc-rouge:hover,.da-bouton-plein-blanc-rouge{border-color: #fff;background-color: var(--da-bouton-rouge-coul);color: #fff;}
.da-bouton-old-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-old-blanc-vert:hover,.da-bouton-plein-blanc-vert{border-color: #fff;background-color: var(--da-bouton-vert-coul);color: #fff;}
.da-bouton-old-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-old-blanc-bleu:hover,.da-bouton-plein-blanc-bleu{border-color: var(--das-coul-2);background-color: var(--da-bouton-bleu-coul);color: #fff;}
/* bouton rond du type + (ajout) x (suppression) */
.da-bouton-old-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) */
}
.da-bouton-align-left,
.da-bouton-align-left:hover
{
display: block;
width: fit-content;
margin-right: auto;
}
.da-bouton-align-center,
.da-bouton-align-center:hover
{
display: block;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.da-bouton-align-right,
.da-bouton-align-right:hover
{
display: block;
width: fit-content;
margin-left: auto;
}
/********************************************************************************************************************************
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;
}
/********************************************************************************************************************************
citation
********************************************************************************************************************************/
.da-citation
{
position: relative;
font-family: var(--da-bouton-font-family);
font-style: italic;
font-size: xxx-large;
}
.da-citation--gauche-haut{align-items: baseline;justify-content: flex-start;padding-left: 7pc;}
.da-citation--gauche{align-items: center;justify-content: flex-start;padding-left: 7pc;}
.da-citation--gauche-bas{align-items: end;justify-content: flex-start;padding-left: 7pc;}
.da-citation--haut{align-items: baseline;justify-content: center;text-align: center; padding: 30px 10px;}
.da-citation--droite-haut{align-items: baseline;justify-content: flex-end;padding-right: 7pc;}
.da-citation--droite{align-items: center;justify-content: flex-end;padding-right: 7pc;}
.da-citation--droite-bas{align-items: end;justify-content: flex-end;padding-right: 7pc;}
.da-citation--bas{align-items: end;justify-content: center;}
/* format mobile */
@media (max-width: 767px)
{
.da-citation
{
font-size: xx-large;
}
}
/********************************************************************************************************************************
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(--das-coul-white);border-radius: 5px;}
.da-bord-1-s-white-15{border: 1px solid var(--das-coul-white);border-radius: 15px;}
.da-bord-3-s-white-5{border: 3px solid var(--das-coul-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-1-clair);
border-radius: 50%;
transform: translateX(-50%) translateY(-75%);
}
.da-separateur-arrondi-haut.coul-2-clair::before{background-color: var(--das-coul-2-clair);}
.da-separateur-arrondi-haut.blanc::before{background-color: var(--das-coul-blanc);}
.da-separateur-arrondi-bas
{
position: relative;
height: 120px;
background: var(--das-coul-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-1-clair); /* orange clair */
border-radius: 50%;
transform: translateX(-50%) translateY(-75%);
}
.da-separateur-arrondi-bas.coul-2-clair::before{background-color: var(--das-coul-2-clair);}
/*************************************/
/* séparateur ligne haute + ligne brisée basse triangle asymétrique */
.da-separateur-h-vague
{
position: relative;
height: 150px;
background: var(--das-coul-1-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-1-clair);
color: var(--das-coul-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(--das-coul-white);
transform: skewY(357deg);
transform-origin: 50%;
}
/*************************************/
.da-separateur-h-courbes /* ko */
{
position: relative;
width: 100%;
height: 150px;
background-color: var(--das-coul-1-clair);
color: var(--das-coul-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-1-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-1-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(--das-coul-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-1-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-1-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(--das-coul-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;
}
/* 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;}
/* que sur les display block */
.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;
}
/* l'enfant (img par ex) ne réduit pas si le parent réduit */
.da-flex-shrink-0
{
flex-shrink: 0;
}
.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 1 + 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-1),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-1,.da-hover-coul-1:hover{color:var(--das-text-coul-1);background-color:var(--das-coul-1)}
.da-coul-1-clair,.da-hover-coul-1-clair:hover{color:var(--das-text-coul-1-clair);background-color:var(--das-coul-1-clair)}
.da-coul-1-fonce,.da-hover-coul-1-fonce:hover{color:var(--das-text-coul-1-fonce);background-color:var(--das-coul-1-fonce)}
.da-coul-2,.da-hover-coul-2:hover{color:var(--das-text-coul-2);background-color:var(--das-coul-2)}
.da-coul-2-clair,.da-hover-coul-2-clair:hover{color:var(--das-text-coul-2-clair);background-color:var(--das-coul-2-clair)}
.da-coul-2-fonce,.da-hover-coul-2-fonce:hover{color:var(--das-text-coul-2-fonce);background-color:var(--das-coul-2-fonce)}
.da-coul-3,.da-hover-coul-3:hover{color:var(--das-text-coul-3);background-color:var(--das-coul-3)}
.da-coul-3-clair,.da-hover-coul-3-clair:hover{color:var(--das-text-coul-3-clair);background-color:var(--das-coul-3-clair)}
.da-coul-3-fonce,.da-hover-coul-3-fonce:hover{color:var(--das-text-coul-3-fonce);background-color:var(--das-coul-3-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-coul-white,.da-hover-white:hover{color:var(--da-body-txt-col);background-color:var(--das-coul-white);}
.da-coul-blanc,.da-hover-blanc:hover{color:var(--da-body-txt-col);background-color:var(--das-coul-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-text-coul);}
.da-text-coul-clair{color: var(--das-text-coul-clair);}
.da-text-coul-fonce{color: var(--das-text-coul-fonce);}
.da-text-coul-1{color: var(--das-coul-1);}
.da-text-coul-1-clair{color: var(--das-coul-1-clair);}
.da-text-coul-1-fonce{color: var(--das-coul-1-fonce);}
.da-text-coul-2{color: var(--das-coul-2);}
.da-text-coul-2-clair{color: var(--das-coul-2-clair);}
.da-text-coul-2-fonce{color: var(--das-coul-2-fonce);}
.da-text-coul-3{color: var(--das-coul-3);}
.da-text-coul-3-clair{color: var(--das-coul-3-clair);}
.da-text-coul-3-fonce{color: var(--das-coul-3-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-1,.da-hover-border-1:hover{border-color:var(--das-coul-1)}
.da-border-1-clair,.da-hover-border-1-clair:hover{border-color:var(--das-coul-1-clair)}
.da-border-1-fonce,.da-hover-border-1-fonce:hover{border-color:var(--das-coul-1-fonce)}
.da-border-2,.da-hover-border-2:hover{border-color:var(--das-coul-2)}
.da-border-2-clair,.da-hover-border-2-clair:hover{border-color:var(--das-coul-2-clair)}
.da-border-2-fonce,.da-hover-border-2-fonce:hover{border-color:var(--das-coul-2-fonce)}
.da-border-3,.da-hover-border-3:hover{border-color:var(--das-coul-3)}
.da-border-3-clair,.da-hover-border-3-clair:hover{border-color:var(--das-coul-3-clair)}
.da-border-3-fonce,.da-hover-border-3-fonce:hover{border-color:var(--das-coul-3-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}
/********************************************************************************************************************************
scroll glissement long et lent : 130px au lieu de 30px
********************************************************************************************************************************/
.daa-scroll-glissement-vers-gauche.dacompo-anima-long
{
z-index: 1;
transform: translate3d(130px, 0, 0); /* ne pas mettre 100% sinon js ne détecte pas qu'il est à l'écran pour le passer à visible */
transition: transform 2s ease-out 0.3s, opacity 1.5s ease-out;
}
.daa-scroll-glissement-vers-gauche.dacompo-anima-long.daa-visible
{
/* display: initial; // à tester */
opacity: 1;
transform: translateX(0);
}
.daa-scroll-glissement-vers-droite.dacompo-anima-long
{
transform: translate3d(-130px, 0, 0); /* ne pas mettre 100% sinon js ne détecte pas qu'il est à l'écran pour le passer à visible */
transition: transform 2s ease-out 0.3s, opacity 1.5s ease-out;
}
.daa-scroll-glissement-vers-droite.dacompo-anima-long.daa-visible
{
opacity: 1;
transform: translateX(0);
}
.daa-scroll-glissement-vers-haut.dacompo-anima-long
{
transform: translate3d(0, 120px, 0); /* ne pas mettre 100% sinon js ne détecte pas qu'il est à l'écran pour le passer à visible */
transition: transform 2s ease-out 0.3s, opacity 1.5s ease-out;
}
.daa-scroll-glissement-vers-haut.dacompo-anima-long.daa-visible
{
opacity: 1;
transform: translateY(0);
}
.daa-scroll-glissement-vers-bas.dacompo-anima-long
{
transform: translate3d(0, -130px, 0); /* ne pas mettre 100% sinon js ne détecte pas qu'il est à l'écran pour le passer à visible */
transition: transform 2s ease-out 0.3s, opacity 1.5s ease-out;
}
.daa-scroll-glissement-vers-bas.dacompo-anima-long.daa-visible
{
opacity: 1;
transform: translateY(0);
}
/********************************************************************************************************************************
class bouton (surcharge da-)
- chevron avant ou apres le texte du bouton
********************************************************************************************************************************/
[class*=da-bouton-contour]::before,
[class*=da-bouton-contour]::after,
[class*=da-bouton-contour].dacompo-icone-chevron-av::before,
[class*=da-bouton-contour].dacompo-icone-chevron-ap::after
{
mask-image: url("../../images/site/chevron.svg");
-webkit-mask-image: url("../../images/site/chevron.svg");
content: "";
/*
width: 0.5em;
height: 0.9em;
*/
width: 12px;
height: 12px;
}
/********************************************************************************************************************************
class bouton (surcharge da-)
- chevron avant ou apres le texte du bouton
********************************************************************************************************************************/
[class*=da-bouton-lien]::before,
[class*=da-bouton-lien]::after,
[class*=da-bouton-lien].dacompo-icone-chevron-av::before,
[class*=da-bouton-lien].dacompo-icone-chevron-ap::after
{
mask-image: url("../../images/site/chevron.svg");
-webkit-mask-image: url("../../images/site/chevron.svg");
content: "";
/*
width: 0.5em;
height: 0.9em;
*/
width: 12px;
height: 12px;
}
/********************************************************************************************************************************
class bouton (surcharge da-)
- chevron avant ou apres le texte du bouton
********************************************************************************************************************************/
[class*=da-bouton-plein]::before,
[class*=da-bouton-plein]::after,
[class*=da-bouton-plein].dacompo-icone-chevron-av::before,
[class*=da-bouton-plein].dacompo-icone-chevron-ap::after
{
mask-image: url("../../images/site/chevron.svg");
-webkit-mask-image: url("../../images/site/chevron.svg");
content: "";
/*
width: 0.5em;
height: 0.9em;
*/
width: 12px;
height: 12px;
}
/********************************************************************************************************************************
class bouton (surcharge da-)
- chevron avant ou apres le texte du bouton
********************************************************************************************************************************/
[class*=da-bouton-rond]::before,
[class*=da-bouton-rond]::after,
[class*=da-bouton-rond].dacompo-icone-chevron-av::before,
[class*=da-bouton-rond].dacompo-icone-chevron-ap::after
{
mask-image: url("../../images/site/chevron.svg");
-webkit-mask-image: url("../../images/site/chevron.svg");
content: "";
/*
width: 0.5em;
height: 0.9em;
*/
width: 12px;
height: 12px;
}
/********************************************************************************************************************************
class bouton (surcharge da-)
- place une éventuelle icone AVANT le texte du bouton
********************************************************************************************************************************/
[class*=da-bouton-contour]::before,
[class*=da-bouton-plein]::before,
[class*=da-bouton-lien]::before
{
margin-right: 0.4em;
}
[class*=da-bouton-contour]::after,
[class*=da-bouton-plein]::after,
[class*=da-bouton-lien]::after,
[class*=da-bouton-rond]::after
{
content: none;
mask-image: none;
-webkit-mask-image: none;
}
/********************************************************************************************************************************
class bouton (surcharge da-)
- bouton arrondi et plus fin en hauteur
********************************************************************************************************************************/
[class*=da-bouton-contour]
{
border-radius: 50px;
padding: 0px 20px;
}
/********************************************************************************************************************************
class bouton (surcharge da-)
- bouton arrondi et plus fin en hauteur
********************************************************************************************************************************/
[class*=da-bouton-plein]
{
border-radius: 50px;
padding: 0px 20px;
}
/********************************************************************************************************************************
class carte (surcharge da-)
- carte plus arrondie avec un contour et une ombre bas droite pleine
- personnalisable :
couleur de fond,
couleur de la bordure,
couleur de l'ombre,
couleur de l'ombre survolée
********************************************************************************************************************************/
.dacompo-carte-01
{
border-radius: 80px;
background-color: var(--das-carte-01-fond-coul);
border: 0.2rem solid var(--das-carte-01-bord-coul); /* contour noir */
box-shadow: 10px 10px 0px 0px var(--das-carte-01-ombre-coul); /* ombre bas droite pleine */
overflow: hidden;
}
.dacompo-carte-01:hover
{
border: 0.2rem solid var(--das-carte-01-bord-coul); /* contour du cadre */
box-shadow: 10px 10px 0px 0px var(--das-carte-01-ombre-hover-coul); /* ombre bas droite pleine */
}
.dacompo-citation-01,
.da-citation
{
font-family: var(--da-font-feltful-manuscrite);
font-style: normal;
font-size: xxx-large;
}
/* format tablette */
@media (min-width: 768px) and (max-width: 1200px)
{
.dacompo-citation-01,
.da-citation
{
font-size: xxx-large;
}
}
/* format mobile */
@media (max-width: 767px)
{
.dacompo-citation-01,
.da-citation
{
font-size: xx-large;
}
}
/********************************************************************************************************************************
class liste à puce
- da-puce-etoile-0/1/2 (couleur)
-> point remplacer par une étoile
********************************************************************************************************************************/
[class*=dacompo-puces-01-etoile] ul
{
list-style: none;
padding-left: 0;
}
[class*=dacompo-puces-01-etoile] ul li
{
position: relative;
padding-left: 1.4em;
}
[class*=dacompo-puces-01-etoile] ul li::before
{
content: "✦";
position: absolute;
left: 0;
font-size: 0.9em;
}
.dacompo-puces-01-etoile-0 ul li::before{color: var(--das-text-coul);}
.dacompo-puces-01-etoile-1 ul li::before{color: var(--das-coul-1);}
.dacompo-puces-01-etoile-2 ul li::before{color: var(--das-coul-2);}
/********************************************************************************************************************************
séparateur horizontal design
********************************************************************************************************************************/
.dacompo-separateur-01-ombre-basse-bord-courbe
{
aspect-ratio: 300 / 18; /* taille de l'image */
background-image: url("../../images/site/separateur-ombre-basse-bord-courbe.svg");
background-repeat: no-repeat;
background-size: cover;
}
/* das : Dev Application Site */
:root
{
--da-body-bg-col: var(--das-coul-blanc);
--da-body-font-family: var(--da-font-louisgeorgecafe-sans-serif);
--da-body-txt-col: rgb(74, 74, 74);
--da-body-font-size: 1.8rem;
--da-body-line-height: 1.6;
--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-louisgeorgecafe-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; /* /// permet d'elargir la hauteur du main pour que footer reste en bas de l'écran */
--da-footer-document-bg-col: var(--das-coul-white);
--da-footer-document-font-family: var(--da-font-louisgeorgecafe-sans-serif);
--da-footer-document-txt-col: var(--das-coul-1);
--da-footer-document-font-size: 1.6rem;
--da-h1-font-family: var(--da-font-opendyslexic-sans-serif);
--da-h2-font-family: var(--da-font-opendyslexic-sans-serif);
--da-h3-font-family: var(--da-font-louisgeorgecafe-sans-serif);
--da-h4-font-family: var(--da-font-louisgeorgecafe-sans-serif);
--da-h5-font-family: var(--da-font-louisgeorgecafe-sans-serif);
--da-fond-alternatif-clair-bg-col: white;
--da-fond-alternatif-fonce-bg-col: #e9e9e9;
/* menu principal */
--dam-pcpal-med-hamb: 1440px; /* /// mettre à jour cette valeur partout car réf non utilisée (med=media) pour mettre à jour data-desm-hamb ou le @media correspondant */
--dam-pcpal-bg-col: white;
--dam-pcpal-font-family: var(--da-font-louisgeorgecafe-sans-serif);
--dam-pcpal-logo-font-family: var(--da-font-louisgeorgecafe-manuscrite);
--dam-pcpal-sous-menu-border: 1px solid var(--das-coul-2);
--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-1);
--dam-pcpal-txt-size: 18px;
--dam-pcpal-txt-hov-col: var(--das-coul-2);
--dam-pcpal-txt-hov-bg-col: white;
/* menu principal hamburger */
--dam-pcpal-hamburger-icone-col: var(--das-coul-1);
--dam-pcpal-hamburger-icone-hov-col: var(--das-coul-2);
--dam-pcpal-hamburger-icones-deroulantes-col: var(--das-coul-1);
--dam-pcpal-hamburger-icones-deroulantes-hov-col: var(--das-coul-2);
--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-1);
--dam-pcpal-hamburger-txt-hov-col: var(--das-coul-2);
--dam-accordeon-border: 0px; /* 1px solid #ddd; */
--dam-accordeon-entete-border-radius: 20px;
--dam-accordeon-entete-bg-col: var(--das-coul-blanc);
--dam-accordeon-entete-hov-bg-col: var(--das-coul-white);
--dam-accordeon-entete-txt-col: var(--das-coul-2);
--dam-accordeon-entete-bt-col: var(--das-coul-2);
--dam-accordeon-entete-sign-font-family: var(--da-font-icone-del);
--dam-accordeon-entete-sign-ouv: '+'; /* signe ouvrir : 'u' : v '\002B' : signe + */
--dam-accordeon-entete-sign-fer: '-'; /* signe fermer : 'v' : ^ '\2212' : signe - */
--dam-accordeon-corps-bg-col: var(--das-coul-blanc);
/* menu accordeon 1 */
--dam-accordeon-entete-1-bg-col: var(--das-coul-blanc);
--dam-accordeon-entete-1-hov-bg-col: var(--das-coul-1-clair);
--dam-accordeon-entete-1-txt-col: var(--das-coul-1);
--dam-accordeon-entete-1-bt-col: var(--das-coul-1);
/* menu accordeon 2 */
--dam-accordeon-entete-2-bg-col: var(--das-coul-blanc);
--dam-accordeon-entete-2-hov-bg-col: var(--das-coul-2-clair);
--dam-accordeon-entete-2-txt-col: var(--das-coul-2);
--dam-accordeon-entete-2-bt-col: var(--das-coul-2);
/* 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-width-img-droite-gauche: 850px;
--dac-carte-height: auto;
--dac-carte-border-radius: 20px;
/* carte 01 */
--das-carte-01-fond-coul: white;
--das-carte-01-bord-coul: var(--das-text-coul);
--das-carte-01-ombre-coul: var(--das-coul-2);
--das-carte-01-ombre-hover-coul: var(--das-coul-1);
/* 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-1);
/* couleurs du site */
/* ///! maj dew.css */
--das-coul-1: #659c9e; /* cyan */
--das-coul-1-clair: #C9DCDD;
--das-coul-1-fonce: #3f7476;
--das-rgb-1: 101,156,158; /* cyan */
--das-rgb-1-fonce: 63, 116, 118;
--das-coul-2: #cca300; /* doré */
--das-coul-2-clair: #E5DBD8;
--das-coul-2-fonce: #9e7e00;
--das-coul-3: #cca300; /* doré */
--das-coul-3-clair: #e6c95c;
--das-coul-3-fonce: #9e7e00;
--das-col-revenir-en-haut: var(--das-coul-2);
--das-text-coul: #4a4a4a;
--das-text-coul-clair: #4a4a4a;
--das-text-coul-fonce: #4a4a4a;
/* texte à appliquer sur les fonds */
--das-text-coul-1: white;
--das-text-coul-1-clair: var(--das-text-coul);
--das-text-coul-1-fonce: white;
--das-text-coul-2: white;
--das-text-coul-2-clair: var(--das-text-coul);;
--das-text-coul-2-fonce: white;
--das-text-coul-3: white;
--das-text-coul-3-clair: var(--das-text-coul);;
--das-text-coul-3-fonce: white;
/* blanc ou alternative de blanc */
--das-coul-white: white;
--das-coul-blanc: #f7f9f9;
/* 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;
--das-bouton-border: 2px solid;
--da-bouton-font-family: var(--da-font-louisgeorgecafe-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-1);
--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);
line-height: var(--da-body-line-height);
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.4rem;
font-weight: 500;
}
h4, .h4
{
font-family: var(--da-h4-font-family);
font-size: 2.0rem;
font-weight: 500;
}
h5, .h5
{
font-family: var(--da-h5-font-family);
font-size: 2.0rem;
font-weight: 500;
}
/* s : ecran small */
@media (max-width: 768px)
{
h1, .h1
{
font-size: 2.8rem;
}
h2, .h2
{
font-size: 2.6rem;
}
h3, .h3
{
font-size: 2.2rem;
}
}
.da-texte
{
font-family: var(--da-body-font-family);
color: var(--da-body-txt-col);
font-size: var(--da-body-font-size);
line-height: var(--da-body-line-height);
font-style: normal;
font-weight: 400;
}
strong
{
font-weight: 700;
}
/* ajustement de la position de l'ancre */
.ancre
{
scroll-margin-top: var(--da-hauteur-du-header-px); /* hauteur du menu */
}
.das-ancre-formulaire_contact
{
scroll-margin-top: var(--da-hauteur-du-header-px); /* 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 (surcharge da-)
********************************************************************************************************************************/
/*
[class*=da-bouton-lien]
{
border:none;
background-color: transparent;
}
*/
/********************************************************************************************************************************
class affectée via editeur wysiwyg
********************************************************************************************************************************/
.tableau_wysiwyg td
{
padding-left: 2rem;
}
/* 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-1:link,
.a_wysiwyg.da-text-coul-1:visited,
.a_wysiwyg.da-text-coul-1:hover,
.a_wysiwyg.da-text-coul-1:active
{color: var(--das-coul-1);}
.a_wysiwyg.da-text-coul-2:link,
.a_wysiwyg.da-text-coul-2:visited,
.a_wysiwyg.da-text-coul-2:hover,
.a_wysiwyg.da-text-coul-2:active
{color: var(--das-coul-2);}
.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-text-coul);}
.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
********************************************************************************************************************************/
.das-element-fleche-droite
{
position: relative;
width: 100%;
height: 100px;
transition: opacity 0.3s ease;
@media (max-width: 1100px)
{
opacity: 0;
pointer-events: none; /* Empêche les interactions */
}
}
.das-element-fleche-droite::before
{
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--das-coul-2-clair), var(--das-coul-2));
}
.das-element-fleche-droite::after
{
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 20px solid var(--das-coul-2-clair);
/* Animation subtile */
animation: pulse 2s infinite;
}
@keyframes pulse
{
0%, 100%
{
border-left-color: var(--das-coul-2-clair);
}
50%
{
border-left-color: var(--das-coul-2);
}
}
/********************************************************************************************************************************
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);
}
/********************************************************************************************************************************
surcharge citation
********************************************************************************************************************************/
.da-citation--gauche{padding-left: 20pc;}
.da-citation--droite{padding-right: 20pc;}
/* format tablette */
@media (min-width: 768px) and (max-width: 1200px)
{
.da-citation--gauche{padding-left: 10pc;}
.da-citation--droite{padding-right: 10pc;}
}
/* format mobile */
@media (max-width: 767px)
{
.da-citation--gauche{padding-left: 3pc;}
.da-citation--droite{padding-right: 3pc;}
}
/********************************************************************************************************************************
NE PAS RETIRER CETTE CLASSE CLIENT MEME SI NON UTLISEE
(car classe de base)
cartes (460px) 2 par 2
********************************************************************************************************************************/
.das-cartes-2-par-2
{
margin-left: auto;
margin-right: auto;
max-width: 1400px; /* pour 2 cartes à 460px */
}
.dac-carte.dac-img-gauche,
.dac-carte.dac-img-droite
{
max-width: var(--dac-carte-width-img-droite-gauche); /* à ajuster selon la largeur des cartes */
}
@media (max-width: 1200px)
{
.dac-carte-contenant.dac-img-gauche,
.dac-carte-contenant.dac-img-droite
{
flex-flow: column;
}
.dac-parent-img.dac-img-gauche,
.dac-parent-img.dac-img-droite
{
display: flex;
flex-shrink: 0;
max-width: 100%;
}
.dac-parent-img.dac-img-gauche img,
.dac-parent-img.dac-img-droite img
{
width: 100%;
height: 200px;
object-fit:cover;
display: block;
}
}
/********************************************************************************************************************************
surcharge design formulaire
********************************************************************************************************************************/
.daf-form
{
line-height: normal;
}
.daf-form button
{
font-family: var(--da-body-font-family);
font-size: var(--da-body-font-size);
padding: 4px 20px;
}
/********************************************************************************************************************************
menu accordeon
********************************************************************************************************************************/
.dam-accordeon .dam-accordeon-entete:after,
.dam-accordeon .dam-accordeon-entete.active:after
{
/* diminution de la taille du signe */
font-size: 15px;
/* cercle doré */
border: 2px solid var(--das-coul-2);
border-radius: 50%;
padding: 0px 5px;
/* Animation subtile */
animation: das-dam-pulse 3s infinite;
}
@keyframes das-dam-pulse
{
0%, 100%
{
color: var(--das-coul-2-clair);
border-color: var(--das-coul-2-clair);
}
50%
{
color: var(--das-coul-2);
border-color: var(--das-coul-2);
}
}
/********************************************************************************************************************************
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-2);
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-2);
}
.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: 1440px) /* /// 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 à --dam-pcpal-med-hamb)
---------------------------------------------------------------------------------------- */
#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 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 à --dam-pcpal-med-hamb)
---------------------------------------------------------------------------------------- */
.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 */
@media (min-width: 1100px)
{
.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 : design_menu équivalent à --dam-pcpal-med-hamb */
@media (min-width: 1430px)
{
.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%}
}
|