/*
Theme Name: RoyalTeam
Theme URI: https://wwwCodeWebHautesAlpes.fr
Author: MatosMc
Author URI: https://wwwCodeWebHautesAlpes.fr
Description: Thème WordPress avec  Bootstrap personnalisé 

Teùplate : twentytwentyone
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html

Version: 1.1
*/

/*polices*/

 /*pour les iphones*/ 
 img{
    height: auto;
      max-width: 100%;
  }
  
  @font-face {
    font-family: "charlotte";
    src: local('charlotte'), local('Open Sans'), url("./police/charlotte.otf") format("truetype");
    font-display: swap;
  }
  
  
  @font-face {
    font-family: "robotto";
    src: local('robotto'), local('Open Sans'), url("./police/Roboto-Regular.ttf") format("truetype");
    font-display: swap;
  }
  
  @font-face {
    font-family: "bromello";
    src: local('bromello'), local('Open Sans'), url("./police/BROMELLO.TTF") format("truetype");  
    font-display: swap;
  }
  
  @font-face {
    font-weight: bold;
    font-family: "robotto";
    src: local('robotto'), local('Open Sans'), url("./police/Roboto-Black.ttf") format("truetype");
    font-display: swap;
  }
  
  
  
  /*fond d'ecran*/
  a{
    color: inherit;
    
  }
  
  .page a{
    text-decoration:underline;
    text-align: left;
  }
  
  
  a:hover{
    color: inherit;
    text-decoration: none;
    font-weight: bold;
  }
  
  body {
    font-family: "robotto";
    margin-left: auto;
    margin-right: auto;
   }
   
   
   h1
   {
    text-align: center;
      color: #ffffff;
      font-size: 2.0rem;
      margin-top: 2rem;
      margin-bottom: 2rem;
      background-color: #e30613;
      text-transform: uppercase;
      padding: 1rem;
   }
  
   .bandeau_rouge
   {
    text-align: center;
      color: #ffffff;
      margin-top: 2rem;
      margin-bottom: 2rem;
      background-color: #e30613;
      padding: 1rem;
   }
  
   .bandeau_rouge h2{
    font-size: 2.0rem;
  color: white;
  text-align: center;
   }
  
  
   h1 sup {
    top: 0em;
    vertical-align: baseline;
    font-size: 2rem;  
    line-height: 1;
    text-transform: uppercase;
    font-weight: bold;
  }
  
   h2
   {
    font-family: 'robotto';
    text-align: left;
    color : #e30613;
    font-size: 1.5rem;
    text-transform: uppercase;
   }
  
   h3
   {
    font-family: 'robotto';
    font-size: 1.5rem;  
    text-transform: uppercase;
    
   }
  
   h3 em 
   {
     
     color: #e30613;
     font-style: normal;
   }
  
   h3.bandeau_vignette
   {
    text-align: center;
    font-family: 'robotto';
    color : white;
    font-size: 2.0rem;
    text-transform: uppercase;
    font-weight: bold;
    background-color: #3c3c3b;
    margin-bottom: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
   }
  
   h3.bandeau_vignette em 
   {
     font-style: normal;
     color: #e30613;
   }
   
   h2.ennoir
   {
    font-family: 'robotto';
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #000000;
   }
  
   h2.ennoir em 
   {
     font-weight: bold;
     font-style: normal;
     
   }
   
   h2.pluspetit
   {
    font-family: 'robotto';
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #e30613;
    
   }
  
   
  
   .footer .titre{
    text-transform: uppercase;
    color: white;
   }
  
  
   .col-12 {
     margin-bottom: 1rem;
   }
  
  @media (max-width: 500px) {
  
    h1.H1bis{
      font-size: 1.0rem;
    }
    
  }
  
  
  .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 0px;
    padding-left: 0px;
  }
  
  .wp-block-image {
    margin-bottom: 0em;
  }
  figure {
    margin: 0 0 0rem;
  }
  
  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    padding-left: 0;
    padding-right: 0;
    max-width: 100% !important;
  }
  
  
  .wp-block-contact-form-7-contact-form-selector
  {
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    width:fit-content;
  }
  
  
  /*Header*/
  
  
  
  
  
  .row p .sauterdeslignes
  {
    text-align: justify;
    margin: 0rem 1rem;
  }
  
  .row p.agauche
  {
    margin-left: 30%;
  }
  
  .row p.adroite
  {
    margin-right: 30%;
  }
  
  @media (max-width : 768px)
  {		
  
    .row p.agauche
    {
      margin: 0 2rem;
    }
  
    .row p.agauche:last-of-type
    {
      margin-bottom: 2rem;
    }
    
  
    .row p.adroite
    {
      margin: 0 2rem;
    }
  }
  
  .MenuIcon
  {
    color: black;
    font-size: 1.4em;
    font-family: Arial, Helvetica, sans-serif;  
    color : #e30613;
    margin : 1rem;
    /* top: 3px;
    position: absolute;
    right: 40px; */
    position: relative;  
  }
  
  .bouton_menu
  {
    top: 10px;
    position: absolute;
    right: 10px;
  }
  
  .navbar-light .navbar-toggler .icon-bar {
     background-color: black !important;
  }
  
  
  
  .footer
  {
    font-family: 'Roboto';
    background-color:  #e30613;
    color: white; 
    font-size: 1rem;
  }
  
  .col>img
  {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  
  
  .row.footer p
  {
    text-align: inherit;
  }
  
  
  .textadroite
  {
    text-align: right !important;
  }
  
  .col-ecriture
  {
    
    background-color: rgba(255,255,255,0.7);
    border-radius: 25px;
  }
  
  .col-ecriture.fit
  {
    width: fit-content;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    color: #000000;
  }
  
  .carousel-caption
  {
    
  }
  
  
  /*pour prendre au moins 1900px d'espace*/
  @media (min-width: 1200px)
  {
      .container {
          /*max-width: 1900px;*/
      }
  }
  
  .header
  {
    position: relative;
    top:0;
    right: 0;
  }
  
  
  .titreheader
  {
    position:absolute;
      top:10%;
      bottom:0;
      right:1rem;
      padding-top:1rem;
      padding-bottom:1rem;
      padding-left: 20px;
      padding-right: 20px;
      margin:auto;    
      display: flex;
      flex-direction: column; /* direction d'affichage verticale */
      justify-content: center; /* alignement vertical */    
  
  }
  
  
  .entete_gauche
  {
    position:absolute;
      top:-20%;
      bottom:0;
      left:0;
      width: 30%; /* Assign a value */
      padding-top:1rem;
      padding-bottom:1rem;
      padding-left: 20px;
      padding-right: 20px;
      margin: auto;
      display: flex;
      flex-direction: column; /* direction d'affichage verticale */
      justify-content: center; /* alignement vertical */    
  }
  
  .entete_topdroite
  {
    position:absolute;
      top : 0;
      bottom:0;
      right:0 ;
      width: 2%; /* Assign a value */    
      min-width: 15px;
      margin: 1rem 1rem ;
  }
  
  
  
  .titreheader .titre1,.titreheader .titre2
  {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .titreheader .titre1
  {
    font-family: 'arial';  
    font-weight: 900;
    font-size: 3rem;
    color : white;
    background-color: transparent;
    padding: 0;
    text-transform: initial;
    z-index:99;
    
  }
  
  
  
  .titreheader .titre2
  {
    font-family: 'charlotte';  
    font-size: 5rem;
    color : black;
    top : -1.5rem;
    position : relative;
    text-transform: initial;
    z-index:1;
    text-shadow: 0 0 25px white;  
  }
  @media (max-width: 1129px) {
  
    .titreheader .titre1
    {
      font-size: 2rem;
    }
    .titreheader .titre2
    {
      font-size: 3.5rem;
  
    }
  }
  
  @media (max-width: 490px) {
  
  
    .titreheader
    {
      padding-top: 0.2rem;
      padding-bottom: 0;
    }
  
    
  }
  
  
  
  /*menu 3 */
  
  .menusauts, .menuinfos
  {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;  
  }
  
  
  ul.menusauts,ul.menuinfos{
    display: flex;
    width: max-content;
    flex-wrap:wrap;
    list-style-type: '.';
    padding: 0 0;
    margin-right: 1rem;  
    justify-content: flex-end;
    width: fit-content;
    min-width: 30%;
    border-top: solid red 2px;
    margin-right: 0rem;
    padding-right: 2rem;
  }
  
  
  ul.menusauts > li >a,ul.menuinfos > li >a
  {
    text-transform: uppercase;
    display: inline;
    flex-direction: column;
    align-items:flex-end;
    justify-content: space-between;
    text-decoration: none;
    padding: 0 0.3rem;
    margin-right: 0.3rem;  
  }
  
  ul.menusauts > li:first-child,ul.menuinfos > li:first-child
  {
    list-style: none;
  }
  
  ul.menusauts > li ,ul.menuinfos > li 
  {
    list-style-type: '.';
  }
  
  ul.menusauts > li > a:hover,ul.menuinfos > li > a:hover
  {
   font-weight: bold;
  }
  
  ul.menusauts > li.active ,ul.menuinfos > li.active 
  {
    font-weight: bold;
  }
  @media (max-width: 470px)
  {
    ul.menusauts,ul.menuinfos
    {
    flex-direction:column;
    list-style-type: none;
    }
  
    ul.menusauts > li ,ul.menuinfos > li 
    {
      list-style-type: none;
    }  
  }
  
  
  
  .navbar
  {
    font-family: arial;  
    text-transform: uppercase;
    font-size: 1.5rem;
    color: black;
    padding: 0;
    
  }
  
  
  /*Pour que les liens dans le menu fache juste la taille du texte afin que le bords ne depassent pas */
  .navbar-nav .nav-link 
  {
      width: fit-content;
      padding: 5px 15px !important;
  }
  
  /*gestion de l'icone d'ouverture et fermeture du menu */
  .navbar-light .navbar-toggler {
      background: none;
      border: none;    
      min-height : 40px
    }
    
    .navbar-light .navbar-toggler:active,
    .navbar-light  .navbar-toggler:focus {
      outline: 0;
    }
    
    .navbar-light .navbar-toggler .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
      margin: 4px 0 4px 0;
      transition: all 0.2s;
    }
    
    .navbar-light .navbar-toggler .icon-bar {
      background: #000000;
    }
    
    .navbar-light .navbar-toggler .icon-bar:nth-of-type(1) {
      transform: rotate(45deg);
      transform-origin: 10% 10%;
    }
    
    .navbar-light .navbar-toggler .icon-bar:nth-of-type(2) {
      opacity: 0;
      filter: alpha(opacity=0);
    }
    
    .navbar-light .navbar-toggler .icon-bar:nth-of-type(3) {
      transform: rotate(-45deg);
      transform-origin: 10% 90%;
    }
    
    .navbar-light  .navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
      transform: rotate(0);
    }
    
    .navbar-light .navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
      opacity: 1;
      filter: alpha(opacity=100);
    }
    
    .navbar-light .navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
      transform: rotate(0);
    }
  
    /* pour afficher la marque a coté du menu*/
  .navbar-light .navbar-brand {
      color: #007bff;
      background-color: rgba(255,255,255,1);
      padding: 10px;
      border-radius: 15px;
      transition-property: color, background-color;
      transition-duration: 0.5s;   
      font-family: 'Roboto-Regular', serif;
      font-size: 2rem;
      text-shadow: 4px 4px 4px #aaa;     
  }
  
  .navbar-light .navbar-brand:hover {
      color: rgba(255,255,255,1);
      background-color: #007bff;
  }
  
  
  
  .navbar-light ul#menu-menu>li
  {
    display: inline-block;
    position: relative;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    width: fit-content;
  }
  
  .dropdown-item {
    padding: 5px 0.55rem;
  }
  
  .dropdown-item.active, .dropdown-item:active {
    background-color: transparent;
  }
  .dropdown-item:focus, .dropdown-item:hover {
    background-color: transparent;
  }
  
  .dropdown-menu {
    min-width: 0rem; 
    background-color: transparent; 
    background-clip: padding-box;
    border: none;  
  }
  
  .dropdown-toggle::after {
    content : "";
         border-top: none; 
       border-right: none; 
       border-bottom: none; 
       border-left: none:
  }
  
  
  .navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,1.0);       
      transition: color 0.5s; 
      margin-right: 0;
      margin-left: auto;
      
  }
  
  .navbar-light .navbar-nav .nav-link:hover,
  .navbar-light .navbar-nav .active>.nav-link {
    color: black;
    transition: color 0.5s; 
    font-weight: bold;
    
  }
  
  li.menu-item>a::after
   {
    content: ".";
    position: relative;
    right: -15px;
    color: #e30613;
  }
  
  
  li:last-child.menu-item>a::after
   {
    content: "";
  }
  
  
  /* les images*/
  .survol{
    background:#000000;
    display:inline-block;
    border-radius: 25px;
    }
    .survol img{
    -moz-transition: opacity 0.9s;
    -webkit-transition: opacity 0.9s;
    -o-transition: opacity 0.9s;
    z-index: 2;
    }
    .survol img:hover
    {
    opacity:0.2;
    -moz-transition: opacity 0.7s;
    -webkit-transition: opacity 0.7s;
    -o-transition: opacity 0.7s;
    }
  
    .centpourcent, .centpourcent iframe
    {
    overflow: hidden;
    width: 100%;
    }
  
  .centpourcent>img,.centpourcent>a>img,
  .centpourcent>figure>img,
  .centpourcent>figure>a>img,
  .wp-block-media-text__media>img
  {
    
    width: 100%;
    height: auto;    
    transition: all 1s ease;
    filter: sepia(0%);
    
  }
  
  .centpourcent>figure>a>img:hover,.centpourcent>a>img:hover{
    
    filter: sepia(100%);
  }
  
  .into_parent
  {
  position: absolute ;
  width: 100%;
  height: 100%;
  top: 0;
  
  padding-top: 20%;
  opacity: 0.7;
  text-transform: uppercase;
  transition: opacity 0.5s; 
  }
  
  .uppercase
  {
    text-transform: uppercase;
  }
  
  .into_parent.agauche
  {
    text-align: left;
  }
  
  .into_parent.adroite
  {
    text-align: right;
  }
  
  
  .into_parent:hover
  {
    opacity: 0.9;
    transition: opacity 0.5s; 
  }
  
  a:hover
  {
  
  }
  
  .into_parent a
  {
  }
  
  .into_parent a:hover
  {
    text-decoration: none;
  }
  
  
  
  
  
  
  
  .loader
  {
    color: #ffffff;
    display: block;
    position:absolute;  
    top:0;      
    left:0;      
    height:100%;    
    width:100%;
    background-color:#000000 ;       /* chacun ses goûts ! */   
    padding-top: 50vh;
    z-index: 5000;
  }
  
  
  
  /* essai de grid */
  .conteneurgrid
  {
    display:grid;
    grid-template-columns : 1fr 1fr;
    grid-auto-rows:auto;
    
   justify-items:center;
   align-items:top;
    grid-column-gap: 0rem;
    grid-row-gap: 1em;
    
   
  }
  
  .conteneurgrid > div
  {
    height: fit-content;
    
  }
  
  .conteneurgrid > div.vcenter
  {
    align-self: center;
    
  }
  
  
  @media (max-width: 768px) {
  
  .conteneurgrid
  {
    display:grid;
    grid-template-columns : 1fr;
    
    
   
  }
    
    .conteneurgrid > div.g3{
      grid-row-start : 2;
      grid-row-end : 3;
    }
  
    
  }
  
  
  
  @media (max-width: 350px) {
  
    form
    {
    
    
    }
    
    
      
    }
  
  
    .colonne_gauche
    {
      background-color: #930c0c;
      color : white;
      padding-top: 25px;
      padding-bottom: 25px;
      font-family: "KUMBHSANS" ;
  
    }
  
  
    .titre_gauche
    {
      background-color: #930c0c;
      color : white;
    }
  
  
    .entete
    {
      margin: 0;
    }
  
    .prendtoutvertical
    {
      position: relative;
      height: 17rem;
      width: 100%;
    }
  
    .a_centrer_vertical
    {
      position: absolute;
      top: 0; 
      bottom:0;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;    
      width: 100%;
    }
  
    .a_mettreenbas_vertical
    {
      position: absolute;
      bottom: 0; 
      width: 100%;
    }
  
  
    .row 
    {
      margin: 0;
    }
  
    .V20
    {
      height: 100%;
      position: absolute;
      left:0;    
      
    }
  
  
    .V60
    {
      height: 60%;
      position: absolute;
      left:0;    
    }
  
    .min75
    {
      min-height: 95vh;
    }
  
    .min20
    {
      min-height: 46rem;
    }
  
    
    .marge_colonnegauche
    {
      margin-left: 16.666667%;
    }
  
    .menu_lateral
    {
      text-align: left;
      color: white;
      text-transform: uppercase;
      margin-top: 3rem;
      margin-right: 0.5rem;
      margin-left: 0.5rem;
      width: auto;
      word-break: keep-all;
  
        }
  
  
  /*bannière*/
  .conteneur_banniere{  
    top: 0;
    left: 0;
    z-index: 1;  
  }
  .banniere{
    width: 100%;
  /*  min-height: 75vh;*/
    padding-top: 39.86%;
    background-color: white;
    animation: fondu 15s ease-in-out infinite both;
    text-align: center;
    background: no-repeat;  
     background-size: contain;  
  }
  
  .relative{
    position: relative;
    top: 0;
  }
  
  .bandeau
  {
    width: 100%;  
  }
  
  @keyframes fondu{
    0%{background-image : url('./images/accueil1_2.png');}
    33%{background-image : url('./images/accueil2_2.png');}
    66%{background-image : url('./images/accueil3_2.png');}
    100%{background-image : url('./images/accueil1_2.png');}
    }
  
  
  @media (max-width:499px) {
    @keyframes fondu{
      0%{background-image : url('./images/accueil1_3.png');}
      33%{background-image : url('./images/accueil2_3.png');}
      66%{background-image : url('./images/accueil3_3.png');}
      100%{background-image : url('./images/accueil1_3.png');}
    }
  }
  
  @media (min-width: 1900px) {
    @keyframes fondu{
      0%{background-image : url('./images/accueil1.png');}
      33%{background-image : url('./images/accueil2.png');}
      66%{background-image : url('./images/accueil3.png');}
      100%{background-image : url('./images/accueil1.png');}
    }
  }
  
  @media (min-width: 900px) and (max-width: 1899px) {
    @keyframes fondu{
      0%{background-image : url('./images/accueil1_1.png');}
      33%{background-image : url('./images/accueil2_1.png');}
      66%{background-image : url('./images/accueil3_1.png');}
      100%{background-image : url('./images/accueil1_1.png');}
    }
  }
  
  @media (min-width: 500px) and (max-width: 899px) {
    @keyframes fondu{
      0%{background-image : url('./images/accueil1_2.png');}
      33%{background-image : url('./images/accueil2_2.png');}
      66%{background-image : url('./images/accueil3_2.png');}
      100%{background-image : url('./images/accueil1_2.png');}
      }
  }
  
  
  
  .p-3>p{
    text-align: justify;
  }
  
  .page li{
    margin-bottom: 1rem;
  }
  
  li::marker{
    color : #930c0c    
  }
  
  ol{
    padding-inline-start: 1rem;
  }
  
  .vertical-align>.wp-block-group__inner-container
  {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  }
  
  .marron
  {
    background-color: #b49e6e;
  }
  
  .grey
  {
    background-color: #abb8c3
  }
  
  .wp-block-table table{
  background-color: #fcf8e3;
  font-size: 1rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  }
  
  table , td ,th
  {
    border: 1px solid black;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  figcaption
  {
    font-size: 0.7rem;
    font-style: italic;
    text-align: center;
  }
  
  th{
    background-color:#fcf8e3;
  }
  
  
  .anime>figure>a>img:hover {
    transform: scale(0.75);
  }
  
  .anime>figure>img, .anime>figure>a>img, .wp-block-media-text__media>img {
    width: 100%;
    height: auto;
    transition: all 1s ease;
  }
  
  
  #diminuer, #stocker, #augmenter{
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-in;
    text-align: justify;
  }
  
  #diminuer:target
  {
  height: 55rem;
  }
  
  #stocker:target
  {
    height: 30rem;
  }
  
  #augmenter:target
  {
    height: 50rem;
  }
  
  
  /* pour que les polices d'adaptent à l'ecran*/
  @media (min-width: 1800px) {
    html {
        font-size: 150%;
    }
  }
  
  @media (max-width: 1100px) {
    h3.bandeau_vignette
    {
      font-size: 1.3rem;    
    }
    .texte-vignette em {
      font-size: 0.8rem;
      margin-left: 1rem;
    }
  
    h1
    {
      font-size: 1.5rem;    
    }
  
  }
  
  
  
  @media (max-width: 768px) {
    html {
        font-size: 85%;
    }
  
    
    .footer
    {
      font-size: 1.5rem;
    }
  
    .page
    {
      margin-top: 1rem;
    }
  
    .marge_colonnegauche
    {
      margin-left: 25%;
    }
  
    .titreheader h1 
    {
      font-size: 1.2rem;
      
    }
    .titreheader h2 
    {
      font-size: 2.0rem;
      top: -0.8rem;    
    }
  
    .colonne_droite img
    {
      transform: scale(0.7);
    }
  
    .colonne_gauche
    {
    font-size: 0.8rem;
    }
    
    h1
    {
     font-size: 1.0rem;
    }
   
   
    h1 sup {
     font-size: 1.5rem;  
   }
  
   h2{
     font-size: 1.35rem;
   } 
   
     
    .a_mettreenbas_vertical
    {
      font-size: 0.8rem;
    }
  
  
    #diminuer:target
    {
    height: 90rem;
    }
    
    #stocker:target
    {
      height: 60rem;
    }
    
    #augmenter:target
    {
      height: 90rem;
    }
  
    .wp-block-table table{
      font-size: 0.7rem;
      }
      
      table , td ,th
      {
        border: 1px solid black;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
      }  
  
      .p-3{
        padding: 0.5rem!important;
        }
            
       
  }
  
  
  .wpcp-carousel-wrapper 
  {
    margin-top : 2rem;
    margin-bottom : 2rem;
  }  
  
  .colonne{
    padding: 2rem;
    margin-top: 2rem;
  }
  .petite-colonne{
    padding: 1rem;
    margin-top: 1rem;
  }
  
  .petite-colonne h3.bandeau_vignette{
    font-size: 1.5rem;
  }
  
  h3.bandeau_vignette a{
    text-decoration: none;
  }
  h3.bandeau_vignette a:hover{
    font-weight: normal;
  }
  
    @media (max-width : 1200px)
    {		
  
  
    .petite-colonne h3.bandeau_vignette{
      font-size: 1.0rem;
    }
  }
  
  
  
  
  .colonne p{
    text-align: justify;
  }
  
  .bandeau_gris
  {
    background-color: #d3d3d3;
  }
  
  .texte-vignette
  {
    text-align: center !important;
    font-weight: bold;
    margin-top: 1rem;
  }
  
  .texte-vignette em{
    color: #e30613;
    margin-left: 2rem;
    
  }
  
  .ensemble_vignettes>.wp-block-group__inner-container 
  {
    display: flex;
    margin-left: auto;  
    justify-content: center;
    flex-wrap: wrap;}
  
  .vignette
  {
    background-color: #d3d3d3;
    margin:1rem;
    padding : 1rem;  
    width: 20rem;
    height: 20rem;
  }
  
  .vignette ul 
  {
    padding-inline-start: 1rem;
  }
  
  @media (max-width : 991px)
  {		
    .vignette
    {
      background-color: #d3d3d3;
      margin:1rem;
      padding : 1rem;
    }
    
    .vignette ul 
    {
      padding-inline-start: 1rem;
    } 
  
  }
  
  
  
  .float-left {
    float: left!important;
  }
  
  .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
     box-shadow: 0 0 0 0; 
  }
  
  
  @media (max-width : 991px)
  {		
    li.menu-item>a::after
    {
     content: "";
   }
  
  }
  
  
  /* google maps */
  
  .map-responsive{
    width: 90%;
    margin: 1rem 0;
    margin-left: auto;
    margin-right: auto;
    overflow:hidden;
    position:relative;
    height:800px;
    text-align: center;
    align-items: center;
  }
  .map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
  }
  
  
  .zmdi-phone:before , .zmdi-email:before, .zmdi-link:before,.zmdi-smartphone:before 
  {
    font-family: "Material-Design-Iconic-Font"; 
    margin-right : 1rem;
  }
  
  
  .zmdi-link:hover::before
  {
    color: #000000;
  }
   
  
  
  .formulaire
  {
    display: flex;
    border: 4px solid #e30613;
    border-radius: 10px;
    box-shadow: 10px 5px 5px grey;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
    margin-bottom: 3rem;
  
    
  }
  
  .encartgauche
  {
    width: 30%;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #d3d3d3;
  }
  
  .encartdroite
  {
    width: 70%;
    padding: 1rem;
  }
  
  
  
  
  
  label
  {
    font-weight: bold;
    text-transform: uppercase;
  }
  
  label span
  {
    text-transform:none;
  }
  
  input:focus
  {
    background-color: #d3d3d3;
    
  }
  
  .div_centree
  {
    text-align: center;
  }
  
  [type=submit] {
    border-color: #e30613;
    -webkit-appearance: button;
    text-align: center;  
    padding: 5px 10px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 10px;
    background-color: white;
    color: #e30613;
    transition: all ease 0.5s;
    box-shadow: rgba(0, 0, 0, 0.699) 10px 10px 10px;
  }
  
  [type=submit]:hover {
    background-color: #e30613;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.699) 0px 0px 0px;
  }
  
  .wp-block-contact-form-7-contact-form-selector {
    max-width: 100%; 
  }
  
  .wpcf7 form .wpcf7-response-output {
    width: 21em;
  }
  
  .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #dc3232;
  }
  
  .drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:250px;
   height:308px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.5);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.5);
    filter: brightness(1.8) grayscale(1) opacity(.5);
  }
  .drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.7);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.7);
    filter: brightness(1.2) grayscale(.5) opacity(.7);
  }
  .cc-selector input{
    margin:0;
   padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
  }
  .cc-selector-2 input{
    position:absolute;
    z-index:999;
  }
  
  .cc-selector input:active + label {
    opacity: 0.9;
  }
  
  .cc-selector input:checked + label {
    filter: none;
  }
  
  .cc-selector
  {
    text-align: center;
  }
  
  
  .boncadeau1{
    background-image:url(./img/bc1.png);
  }
  .boncadeau2{
    background-image:url(./img/bc2.png);
  }
  .boncadeau3{
    background-image:url(./img/bc3.png);
  }
  .boncadeau3{
    background-image:url(./img/bc3.png);
  }
  .boncadeau4{
    background-image:url(./img/bc4.png);
  }
  .boncadeau5{
    background-image:url(./img/bc5.png);
  }
  .boncadeau6{
    background-image:url(./img/bc6.png);
  }
  
  
  @media (max-width: 600px) {
    
    .formulaire
    {
      display: grid;
    }
    
    .encartgauche
    {
      width: 100%;
      padding-left: 1rem;
      padding-right: 1rem;
      background-color: #d3d3d3;
    }
    
    .encartdroite
    {
      width: 100%;
      padding: 1rem;
    }
    
  
  }
  
  .image_dedans
  {
  position: absolute;
  z-index: 1;
  }
  
  .bon_cadeau , .vignette_accueil_groupe
  {
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    filter: sepia(0%);
    transition: all ease 0.5s;
  }
  
  .vignette_accueil_groupe
  {
    padding: 0;
    margin-bottom: 1rem;
    line-height : 2rem;
  }
  
  .bon_cadeau:hover, .vignette_accueil_groupe:hover
  {
    filter: sepia(100%);
  }
  
  .bon_cadeau a, .vignette_accueil_groupe a{
    text-decoration: none;
  }
  
  .bon_cadeau a:hover , .vignette_accueil_groupe a:hover{
    font-weight: inherit;
  }
  
  
  .haut_boncadeau
  {
    position: absolute;
    top:1rem;
    text-align : center !important;
    width: 100%;
    left: 0;
    z-index: 2;
    color: #d7a558;
    font-family: "bromello";
    font-size: 3rem;
    padding: 1rem;
  }
  
  .milieu_boncadeau
  {
    position: absolute;
    top:60%;
    text-align : center !important;
    width: 100%;
    left: 0;
    z-index: 2;
    color: #d7a558;
    font-family: "bromello";
    font-size: 2rem;
    padding: 1rem;  
    line-height : 90%;
  }
  
  .milieu_boncadeau p{
    margin:0;
  }
  
  .milieu_boncadeau > .wp-block-group__inner-container > p:nth-child(1)
  {
  color: #000000;
  font-family: "robotto";
  font-size: 3rem;
  z-index: 3;
  }
  .milieu_boncadeau > .wp-block-group__inner-container > p:nth-child(2)
  {
      z-index: 1;
  }
  .milieu_boncadeau > .wp-block-group__inner-container > p:nth-child(3)
  {
    color: #000000;
    font-family: "robotto";
    font-weight: bold;
    z-index: 3;
  }
  
  
  .vignette_accueil
  {
    position: absolute;
    bottom:1rem;
    text-align : center !important;
    width: 100%;
    left: 0;
    z-index: 2;
    color: #d7a558;
    font-family: "bromello";
    font-size: 2rem;
    padding: 0;
    padding-left: 1rem;    
  }
  
  .vignette_accueil p{
    margin:0;
  }
  
  .vignette_accueil > .wp-block-group__inner-container > p:nth-child(1)
  {
  color: white;
  font-family: "robotto";
  font-size: 2.5rem;
  z-index: 3;
  }
  .vignette_accueil > .wp-block-group__inner-container > p:nth-child(2)
  {
      z-index: 1;
  }
  .vignette_accueil > .wp-block-group__inner-container > p:nth-child(3)
  {
    color: white;
    font-family: "robotto";
    font-weight: bold;
    font-size: 2rem;
    z-index: 3;
  }
  
  
  
  .bas_boncadeau
  {
    position: absolute;
    bottom:0;
    text-align : center !important;
    width: 100%;
    left: 0;
    z-index: 2;
    color: #d7a558;
    font-family: "robotto";
    font-size: 1rem;
    text-transform: uppercase;
    padding: 1rem;
    padding-bottom: 0;
    line-height: 1rem;
  }
  
  @media (max-width: 768px) {
    
    .bon_cadeau 
    {
    width: 60%;
    }
    .vignette_accueil_groupe
    {
      bottom:0rem;
      padding-left: 0.3rem;    
        
    }
  
  }
  
    @media (max-width: 400px) {
    
      .bon_cadeau 
      {
      
      }
      .vignette_accueil_groupe
      {
        
      }
      
  
      .haut_boncadeau
      {
        font-size: 2rem;
      }
      
      .milieu_boncadeau
      {
        font-size: 1.5rem;
      }
      
      .milieu_boncadeau p{
        margin:0;
      }
      
      .milieu_boncadeau > .wp-block-group__inner-container > p:nth-child(1)
      {
      font-size: 2.0rem;
      }
      .milieu_boncadeau > .wp-block-group__inner-container > p:nth-child(2)
      {
          z-index: 1;
      }
      .milieu_boncadeau > .wp-block-group__inner-container > p:nth-child(3)
      {
        font-size: 2rem;
      }
      
      .vignette_accueil
      {
        font-size: 1.5rem;
      }
      
      .vignette_accueil p{
        margin:0;
      }
      
      .vignette_accueil > .wp-block-group__inner-container > p:nth-child(1)
      {
      font-size: 1.5rem;
      }
      .vignette_accueil > .wp-block-group__inner-container > p:nth-child(2)
      {
          z-index: 1;
      }
      .vignette_accueil > .wp-block-group__inner-container > p:nth-child(3)
      {
        font-size: 0.8rem;
      }
      
      
      .bas_boncadeau
      {
        font-size: 0.8rem;
      }    
  
      .petite-colonne
      {
        padding: 0.2rem;
      }
  
    
  }
  
  /********************************
  * Carousel styles
  *********************************/
  .carousel-items {
    display: flex;
    overflow-x: scroll;
    padding: 1rem 0;
    scroll-snap-type: x mandatory;
  }
  
  .carousel-item {
    flex: 1 0 400px;
    max-width: 400px;
    margin-left: 1rem;
    scroll-snap-align: start;
    display: flex;
    margin-right: 1rem;
  }
  
  ::-webkit-scrollbar-track {
    background-color: #d3d3d3;
  }
  
  ::-webkit-scrollbar {
    height: 6px;
    background-color: #d3d3d3;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #e30613;
    border-radius: 15px;
  }
  
  .avis .zmdi , .page_avis .zmdi
  {
    color: #e30613;
  }
  .avis
  {
    margin: 2rem;
  }
  
  .page_avis .carousel-items {
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  }
  
  .page_avis .carousel-item {
    margin-top: 0.5rem;
  }
  
  .card{
    border-color: #d3d3d3;
    border-width: 3px;
    padding: 1rem;
  }
  
  @media (max-width: 768px) {
    .carousel-item {
      flex: 1 0 300px;
      max-width: 300px;
    }
  
    .avis
    {
      margin: 0.5rem;
    }
    
  }
  
  
  .infos_produit
  {
    display: none;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  
  .form-check-input:checked[type=radio] ~ .infos_produit
  {
    display: block;
  }
  
  .button-mat {
    color: white;
    position: relative;
    background-color: #e30613;
    border-color: #e30613;
    border: 0px transparent;
    border-radius: .3rem;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    -webkit-transition-delay: .35s;
            transition-delay: .35s;
    overflow: hidden;
    margin-right: auto;
    width: fit-content;
    padding: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);  
  }
  
  .button-mat:hover {
  box-shadow: 0 0 5px #e30613;
  }
  
  .button-mat:hover::before {
    transform: translate(-45%, -34%) translateZ(0);
    }
    
  
  
  .button-mat::before {
    content: '';
    display: block;
    background: white;
    position: absolute;
    width: 200%;
    height: 500%;
    border-radius: 100%;
    -webkit-transition: 0.36s cubic-bezier(0.4, 0, 1, 1);
    transition: 0.36s cubic-bezier(0.4, 0, 1, 1);
    transform: translate(50%, -50%) translateZ(0);
  }
  
  
  .button-mat > a {
    text-decoration: none;
  }
  
  .button-mat:hover > span, .button-mat:hover > a {
    color: #020946;
    border-color: #e30613;
    z-index: 9999;
    position: relative; 
  }
  
  .sautant
  {
    margin-bottom: 1rem;
    border: 2px solid black;
    padding: 1rem;
    width: fit-content;
    border-radius: 25px;
    box-shadow: 6px 7px 8px 0px grey;
  }
  
  
  fieldset
  {
    padding: 2rem;
      margin: 0;
      border: gray 1px solid;
      border-radius: 25px;
  }
  
  .informations_comp
  {
    padding: 1rem;
      margin-top: 1rem;
      border: gray 1px solid;
      border-radius: 15px;
  
  }
  
  .informations_comp label {
    font-weight: normal;
    text-transform: none;
    width: 20%;
  }
  
  @media (max-width: 400px) {
    .informations_comp label {
      width: 100%;
    }
    
  }
  
  .informations_comp .form-control
  {
    width: auto;
  }