/* 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 [class^=da-bouton]
{
    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;
}

.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-primaire-clair), var(--das-coul-primaire));
    border-radius: 999px;
    min-width: 40px;
    border: 2px solid rgba(255,255,255,0.0);
}

.dac-carrousel-conteneur.coul-secondaire::-webkit-scrollbar-thumb
{
    background: linear-gradient(90deg, var(--das-coul-secondaire-clair), var(--das-coul-secondaire));
}

/* firefox */
.dac-carrousel-conteneur 
{
    scrollbar-width: thin;
    scrollbar-color: var(--das-coul-primaire-clair) transparent;
}
.dac-carrousel-conteneur.coul-secondaire
{
    scrollbar-color: var(--das-coul-secondaire-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-primaire-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-secondaire button
{
    color: var(--das-coul-secondaire);
}


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