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