.accueil
{  
    position:  relative;
    display: block;
    width: 100%;
    left: 0px;

    --tempsAnimation: 40s;
}  

.accDiapo {
    animation: imageAnimation var(--tempsAnimation) ease-in-out infinite both;
    backface-visibility: hidden;
	background-image: url("../images/Pizza.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: var(--color-text-2);
    text-align: center;
    vertical-align: middle;
    height: 643px;
    left: 0px;
    opacity: 100%;
    /*position: absolute;*/
    top: 0px;
    width: 100%;
    z-index: 0;
}  

.accFleche {
    position: absolute;
    background-image: url("../icones/fleche_bas.png");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    left: calc(50% - 35px);
    top: calc(100vh -90px); /*600px;*/
    width: 70px;
    height: 90px;
    z-index: 2;
    animation-duration: 1s;
    animation-name: zooming;
    animation-iteration-count: infinite;
}

.texteInformation {
    margin: 10px;
}


.titrepresentation
{
    color: var(--color-text-3);
    text-align: center;
    line-height: 2em;
    font-weight: bold;
    font-family : 'American_Typewriter', 'Baskerville_Light','Baskerville_SemiBold', sans-serif;
}

.flexprincipal
{
   flex-wrap: wrap;
   padding: 0px;
}

.image1
{
    width: 100%;
    text-align: right;
}

.pizzalibrededroit
{
    width: 100%;
    text-align: right;
}

.flexaccueil
{
    align-items: end;
}

.flexItemAcc {
}


.flexItemAcc4 {
   border-style: solid;
   border-color: var(--color-text-1);
   padding-top: 3%;
}

.cadreitem
{
    text-align: left;
    padding: 10px;
    font-size: 25px;
}

.flexpromo
{
    justify-content: center;
    padding: 10px;
}

.promocadre
{
    min-height: 150px;
}

.conditionpromo
{
    font-size :11px;
    text-align: left;
    padding: 5px;
    width: 90%;
}

.interligne1
{
    line-height: 1.5em;
}   

.modelTitre1 {
    font-family :  'Baskerville_Bold', sans-serif,'titreAccueilPhoto';
    text-align: center;
    text-shadow: 0 0 1em var(--color-border-2), 0 0 0.2em var(--color-border-2);
    color: var(--color-text-1);
}
   
.modelTitre2 {
    font-family : 'Baskerville_Bold', sans-serif;
    text-shadow: 0 0 1em var(--color-border-2), 0 0 0.2em var(--color-border-2);
    text-align: center;
    color: var(--color-text-1);
}
   

/* ======== Animation 1 ========== */
.titreAnimation1_1 {
    position: absolute;
    
    --emplacementFinalAnim1_1: 8%;
    z-index:14;
	animation: deplacementTitreAnimation1_1 var(--tempsAnimation) infinite;
    }

.titreAnimation1_2 {
    position: absolute;
    --emplacementFinalAnim1_2: 45%;
    z-index:15;
    animation: deplacementTitreAnimation1_2 var(--tempsAnimation) infinite;
    }

@keyframes deplacementTitreAnimation1_1 {
    0%      {visibility : hidden;opacity :0; left: -1500px; }
    1%      {left: 2%; }
    7.5%    {visibility: visible; opacity :1;left: var(--emplacementFinalAnim1_1); }
    22.5%   { opacity: 1; left: var(--emplacementFinalAnim1_1); }
    24.9%   { opacity: 0; left: var(--emplacementFinalAnim1_1); }
    25%     { visibility: hidden; left: var(--emplacementFinalAnim1_1); }
    25.1%   { left: -1500px; }
    100%    { left: -1500px; }
}
@keyframes deplacementTitreAnimation1_2 {
    0%      { visibility: visible; left: -1500px; }
    7.5%    { left: var(--emplacementFinalAnim1_2); }
    22.5%   { opacity: 1; left: var(--emplacementFinalAnim1_2); }
    24.9%   { opacity: 0; left: var(--emplacementFinalAnim1_2); }
    25%     { visibility: hidden; left: var(--emplacementFinalAnim1_2); }
    25.1%   { left: -1500px; }
    100%    { left: -1500px; }
}
    
    
/* ======== Animation 2 ========== */
.titreAnimation2_1 {
    position: absolute;
    
    --emplacementFinalAnim2_1: 8%;
    z-index:14;
	animation: deplacementTitreAnimation2_1 var(--tempsAnimation) infinite;
    }

.titreAnimation2_2 {
    position: absolute;
    --emplacementFinalAnim2_2: 45%;
    z-index:15;
    animation: deplacementTitreAnimation2_2 var(--tempsAnimation) infinite;
    }

@keyframes deplacementTitreAnimation2_1 {
    0%      { visibility: hidden; left: -1500px; }
    25%     { visibility: visible; left: -1500px; }
    30%     { left: var(--emplacementFinalAnim2_1); }
    47.5%   { opacity: 1; left: var(--emplacementFinalAnim2_1); }
    49.9%   { opacity: 0; left: var(--emplacementFinalAnim2_1); }
    50%     { visibility: hidden; left: var(--emplacementFinalAnim2_1); }
    50.1%   { visibility: hidden; left: -1500px; }
    100%    { visibility: hidden; left: -1500px; }
}
@keyframes deplacementTitreAnimation2_2 {
    0%      { visibility: hidden; left: -1500px; }
    25%     { visibility: visible; left: -1500px; }
    32.5%    { left: var(--emplacementFinalAnim2_2); }
    47.5%   { opacity: 1; left: var(--emplacementFinalAnim2_2); }
    49.9%   { opacity: 0; left: var(--emplacementFinalAnim2_2); }
    50%     { visibility: hidden; left: var(--emplacementFinalAnim2_2); }
    50.1%   { visibility: hidden; left: -1500px; }
    100%    { visibility: hidden; left: -1500px; }
}
    
    
/* ======== Animation 3 ========== */
.titreAnimation3_1 {
    position: absolute;
    
    --emplacementFinalAnim3_1: 8%;
    z-index:14;
	animation: deplacementTitreAnimation3_1 var(--tempsAnimation) infinite;
    }

.titreAnimation3_2 {
    position: absolute;
    --emplacementFinalAnim3_2: 45%;
    z-index:15;
    animation: deplacementTitreAnimation3_2 var(--tempsAnimation) infinite;
    }

@keyframes deplacementTitreAnimation3_1 {
    0%      { visibility: hidden; left: -1500px; }
    50%     { visibility: visible; left: -1500px; }
    55%     { left: var(--emplacementFinalAnim3_1); }
    72.5%   { opacity: 1; left: var(--emplacementFinalAnim3_1); }
    74.9%   { opacity: 0; left: var(--emplacementFinalAnim3_1); }
    75%     { visibility: hidden; left: var(--emplacementFinalAnim3_1); }
    75.1%   { left: -1500px; }
    100%    { left: -1500px; }
}
@keyframes deplacementTitreAnimation3_2 {
    0%      { visibility: hidden; left: -1500px; }
    50%     { visibility: visible; left: -1500px; }
    57.5%   { left: var(--emplacementFinalAnim3_2); }
    73.5%   { opacity: 1; left: var(--emplacementFinalAnim3_2); }
    74.9%   { opacity: 0; left: var(--emplacementFinalAnim3_2); }
    75%     { visibility: hidden; left: var(--emplacementFinalAnim3_2); }
    75.1%   { opacity: 0; left: -1500px; }
    100%    { opacity: 0; left: -1500px; }
}
    
    
/* ======== Animation 4 ========== */
.titreAnimation4_1 {
    position: absolute;
    
    --emplacementFinalAnim4_1: 8%;
    z-index:14;
	animation: deplacementTitreAnimation4_1 var(--tempsAnimation) infinite;
    }

.titreAnimation4_2 {
    position: absolute;
    --emplacementFinalAnim4_2: 45%;
    z-index:15;
    animation: deplacementTitreAnimation4_2 var(--tempsAnimation) infinite;
    }

@keyframes deplacementTitreAnimation4_1 {
    0%      { visibility: hidden; left: -1500px; }
    75%     { visibility: visible; left: -1500px; }
    80%     { left: var(--emplacementFinalAnim4_1); }
    97.5%   { opacity: 1; left: var(--emplacementFinalAnim4_1); }
    99.9%   { opacity: 0; left: var(--emplacementFinalAnim4_1); }
    100%    { visibility: hidden; left: -1500px; }
}
@keyframes deplacementTitreAnimation4_2 {
    0%      { visibility: hidden; left: -1500px; }
    75%     { visibility: visible; left: -1500px; }
    82.5%   { left: var(--emplacementFinalAnim4_2); }
    97.5%   { opacity: 1; left: var(--emplacementFinalAnim4_2); }
    99.9%   { opacity: 0; left: var(--emplacementFinalAnim4_2   ); }
    100%    { visibility: hidden; left: -1500px; }
}
    
    
/* Image de fond */
@keyframes imageAnimation {
    0% {
        background-image: url('../images/Pizza.jpg');
    }
    25% {
        background-image: url('../images/Feu1.jpg');
    }
    50% {
        background-image: url('../images/Cours.jpg');
    }
    75% {
        background-image: url('../images/Feu-Pizza.jpg');
    }
}
 
/* Zoom de la fleche */
@keyframes zooming {
    0% {
      transform: scale(0.7);
    }
    50% {
       transform: scale(0.9);
    }
    100% {
        transform: scale(0.7);
      }
}


/* gestion responsive */
@media screen and (max-width :599px)
{
    .accDiapo{ height: 300px; }
    .accFleche{visibility: hidden;}
    .accFleche{ transform: scale(0.7); top: 68vh; } /*255px;}*/
    .texteInformation { font-size: 18px;}
    .titrepresentation{ font-size: 18px;}
    .cadreitem{font-size: 18px;}
    .modelTitre1 { font-size: 25px;}
    .modelTitre2 { font-size: 18px;}
    .grasplusgros{font-size: 18px;}
    .titreAnimation1_1 { top: 80px;}
    .titreAnimation1_2 {left : 30px; top: 130px; }
    .titreAnimation2_1 { top: 80px;}
    .titreAnimation2_2 {left : 30px; top: 130px; }
    .titreAnimation3_1 { top: 80px;}
    .titreAnimation3_2 {left : 30px; top: 130px; }
    .titreAnimation4_1 {top: 80px;}
    .titreAnimation4_2 {left : 30px; top: 130px; }
    .flexItemAcc1 {min-width: 98%;}
    .flexItemAcc2 {min-width: 98%}
    .flexItemAcc {min-width: 98%;}
    .flexItemAcc4 {min-width: 95%; padding-bottom: 3%;  margin: auto; margin-top : 4px; margin-bottom: 4px;}
}

@media screen and (min-width :600px) and (max-width :1000px)
{
    .accDiapo{ height: 400px; }
    .accFleche{visibility: hidden;}
    .accFleche{ transform: scale(0.8); top: 68vh; } /*355px;}*/
    .texteInformation { font-size: 18px;}
    .titrepresentation{ font-size: 18px;}
    .cadreitem{font-size: 18px;}
    .modelTitre1 { font-size: 35px;}
    .modelTitre2 { font-size: 20px;}
    .grasplusgros{font-size: 18px;}
    .titreAnimation1_1 { top: 130px;}
    .titreAnimation1_2 {left : 50px; top: 230px; }
    .titreAnimation2_1 { top: 130px;}
    .titreAnimation2_2 {left : 50px; top: 230px; }
    .titreAnimation3_1 { top: 130px;}
    .titreAnimation3_2 {left : 50px; top: 230px; }
    .titreAnimation4_1 {top: 130px;}
    .titreAnimation4_2 {left : 50px; top: 230px; }
    .flexItemAcc1 {min-width: 98%;}
    .flexItemAcc2 {min-width: 98%}
    .flexItemAcc {min-width: 98%;}
    .flexItemAcc4 {min-width: 95%; padding-bottom: 3%; margin: auto; margin-top : 3px; margin-bottom: 3px;}
}

@media screen and (min-width :1000px) and (max-width :1200px)
{
    .accDiapo{ height: 500px; }
    .accFleche{visibility: visible;}
    .accFleche{ transform: scale(0.9); top: 68vh; } /*460px;}*/
    .texteInformation { font-size: 25px;}
    .titrepresentation{ font-size: 25px;}
    .cadreitem{font-size: 25px;}
    .modelTitre1 { font-size: 70px;}
    .modelTitre2 { font-size: 40px;}
    .grasplusgros{font-size: 22px;}
    .titreAnimation1_1 { top: 130px;}
    .titreAnimation1_2 {left : 50px; top: 230px; }
    .titreAnimation2_1 { top: 130px;}
    .titreAnimation2_2 {left : 50px; top: 230px; }
    .titreAnimation3_1 { top: 130px;}
    .titreAnimation3_2 {left : 50px; top: 230px; }
    .titreAnimation4_1 { top: 130px;}
    .titreAnimation4_2 {left : 50px; top: 230px; }
    .flexItemAcc {width: 49%; min-width: 350px; }
    .flexItemAcc4 {width: 35%; min-width: 170px; min-height: 150px; margin: 3%;}
}

@media screen and (min-width :1200px)
{
    .accDiapo{ height: 643px; }
    .accFleche{visibility: visible;}
    .accFleche{ height: 92px; top: 68vh; } /*600px;}*/
    .texteInformation { font-size: 30px;}
    .titrepresentation{ font-size: 30px;}
    .cadreitem{font-size: 25px;}
    .modelTitre1 { font-size: 70px;}
    .modelTitre2 { font-size: 40px;}
    .grasplusgros{font-size: 22px;}
    .titreAnimation1_1 { top: 230px;}
    .titreAnimation1_2 {left : 50px; top: 330px; }
    .titreAnimation2_1 { top: 230px;}
    .titreAnimation2_2 {left : 50px; top: 330px; }
    .titreAnimation3_1 { top: 230px;}
    .titreAnimation3_2 {left : 50px; top: 330px; }
    .titreAnimation4_1 { top: 230px;}
    .titreAnimation4_2 {left : 50px; top: 330px; }
    .flexItemAcc {width: 49%; min-width: 350px;}
    .flexItemAcc4 {width: 35%; min-width: 170px; min-height: 150px; margin: 3%;}
}