:root {
  --color-bg-dark: #242425;


  --color-gold: #F9BA33;
  --color-grey: #3C3C3B;
  --color-white: #FFFFFF;

  --color-transparent: transparent;
  --color-translucid: rgba(255, 255, 255, 0.75);

  --font-body: 'Trueno', sans-serif;
  --font-bold: 'Trueno Bold', sans-serif;

  --radius-none: 0px;
}

html {
  font-size: 16px;
}

@font-face {
  font-family: 'Trueno';
  font-style: normal;
  font-display: swap;
  src: local('Trueno Light'), url('TruenoLt.woff') format('woff');
}

@font-face {
  font-family: 'Trueno Bold';
  font-style: normal;
  font-display: swap;
  src: local('Trueno Bold'), url('TruenoBd.woff') format('woff');
}


@media print {
  .hideOnPrint { display: none !important; }
  .printOnly { display: block !important; }
  @page { size: auto;  margin: 0mm; }
  * { color: #000000; }
}



* { margin: 0px; padding: 0px; }

html { height: 100%; }
body { background-color: #242425; height:100%; }

img, video{ display:block;}
  
/* BACKGROUND */
  
.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #242425;
  background-size: cover;
  background-image: url('bg.jpeg');
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(3px) grayscale(40%);
}

/* GRID */
  
.grid {
  width: 100%;
  height: auto;
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr repeat(12, 80px) 1fr;
  grid-template-rows: 140px auto repeat(26, auto) 10px 65px 1fr;
}

a
{
  text-decoration:none;
}



/* TEXT */



p {
  font-family: var(--font-body);
  font-size: 1rem;
}



b {
  font-family: var(--font-bold);
  font-weight: normal;
}

h1 {
  font-family: var(--font-bold);
  font-size: 2rem;
  margin-bottom: 10px;
  /*text-transform: uppercase;*/
}

h2 {
    font-family: var(--font-body);
    font-size: 1.25rem;
    margin-bottom: 10px;
    /*font-style: italic;*/
  }

  h3 {
    font-family: var(--font-body);
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  h1.small {
    font-size: 1.75rem;
  }

  h1.big {
    font-size: 2.50rem;
  }



/* TAILLE ET STYLE DU TEXTE DANS DIFFERENTS CONTEXTES */




/* CONTENEUR D'ICÔNES */

.iconContainer                      { display: flex; flex-direction: row; width: 100%; margin-top: 10px; justify-content: center; }
.iconContainer.moreTopMargin        { margin-top: 25px; }
.iconContainer div                  { display: flex; flex-direction: column; width: calc( 100% / 4 ) ; max-width: 180px; }
.iconContainer div img              { height: 40px; color: #454040; }
.iconContainer div p                { margin-top: 10px; }

table                               { place-self:center; width: 100%; max-width: 720px;margin-left: auto;margin-right: auto; margin-top:10px; }
table tr                            { width: 100%; }
table tr th img                     { height: 40px; color: #454040; margin-left:auto; margin-right:auto; }
table tr th                         { width: calc( 100% / 4 ) ; text-align:center; padding-bottom: 20px; }
table tr td                         { width: calc( 100% / 4 ) ; text-align:center;}
table tr td p b                     { text-transform: uppercase; }

/* CONTENEUR DE L'ICONE DE LOCALISATION */

.iconLocationContainer                      { display: flex; flex-direction: column; width: 100%; align-items: center; }
.iconLocationContainer div                  { display: flex; flex-direction: column; width: 100%; }
.iconLocationContainer div img              { height: 100px; color: #454040; }
.iconLocationContainer div h2                { margin-top: 15px; }

/**************************************************/
/*                                                */
/*     TÊTE DE PAGE                               */
/*                                                */
/**************************************************/

.header {
  z-index: 1;
  grid-column: 1 / span 14;
  grid-row: 1 / span 2;
  background-color: #242425BF;
  color: #FFFFFF;
  border-bottom: 3px solid #3C3C3B;
}

.logo {
  z-index: 2;
  display: inline-block;
  grid-column: 2 / span 12;
  grid-row: 1 / span 1;
  place-self: center;
  width: 300px;
  height: 100px;
  background-image: url('logo.png');
  background-size: cover;
  cursor: pointer;
}

.navigationBox{
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size:16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 1.25rem;
  cursor: pointer;
  /*text-transform: uppercase;*/
}

.mark {

  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    #FBD0001A,
    #FBD000B3 4%,
    #FBD0004D
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.navigationBox#navigationBoxHeader {grid-column: 2 / span 12; grid-row: 2 / span 1;}
.navigationBox#navigationBoxFooter {grid-column: 2 / span 12; grid-row: 30 / span 1;}


.navigationBox a                      {transition-duration: 0.15s; transition-timing-function: ease-in; color: #FFFFFF60; margin-top: 20px; margin-bottom:20px; margin-left: 20px; margin-right: 20px;}
.navigationBox a:visited              {transition-duration: 0.15s; transition-timing-function: ease-in; color: #FFFFFF60;}
.navigationBox a:hover                {transition-duration: 0.15s; transition-timing-function: ease-in; color: #F9BA33;}
















/**************************************************************/
/*     Mini-carte                                             */
/**************************************************************/

#map {
  height: 400px;
  width: 100%;
}

/**************************************************************/
/*     Encadrés                                               */
/**************************************************************/


.box {
  display: block;
  grid-column: 2 / span 12;

  margin: 10px 0 0;
  padding: 25px;

  background-color: var(--color-translucid);

  color: var(--color-grey);
  text-align: center;

  border: 3px solid var(--color-grey);
  border-radius: 0;

  z-index: 1;
}

.box p {
  margin-bottom: 5px;
}

.box.transparent {
  background-color: var(--color-transparent);
  border:none;
  color: var(--color-white);
}

.box.transparent h1 {
  text-shadow: 0px 3px 1px black;
}

/* Utilisé dans notes dans Ad */

.textAlignLeft {
  text-align: left;
}

/* Utilisés pour les photos dans Ad : */

.halfLeft {
  grid-column: 2 / span 6;
  margin-right: 5px;
}

.halfRight {
  grid-column: 8 / span 6;
  margin-left: 5px;
}

/**************************************************************/
/*     Bouton                                                 */
/**************************************************************/

a {
  cursor: pointer;
}

a.button {
  display: block;
  
  margin-top: 10px;
  padding: 10px 30px;

  background-color: var(--color-gold);
  border: 3px solid var(--color-grey);
  border-radius:0px;

  color: var(--color-grey);
  font: 1.25rem var(--font-bold), sans-serif;
  text-decoration: none;
  text-align: center;
  
  z-index: 1;
  transition: background-color 0.15s ease-in, border-color 0.15s ease-in, color 0.15s ease-in;
}

a.button:hover {
  background-color: var(--color-grey);
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/**************************************************************/
/*     Bouton autonome de la largeur de la colone             */
/**************************************************************/

a.button.full {
  grid-column: 2 / span 12;
}

/**************************************************************/
/*     Vignette d'annonce                                     */
/**************************************************************/

a.ad-thumbnail {
  display: block;

  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0px;

  background-color: #FFFFFFBF;
  border: 3px solid var(--color-grey);
  border-radius:0px;

  color: var(--color-grey);
  text-align: center;
  
  z-index: 1;
  transition: background-color 0.15s ease-in, border-color 0.15s ease-in, color 0.15s ease-in;
}

a.ad-thumbnail:nth-of-type(even) {
  grid-column: 2 / span 6; margin-right: 5px; 
}

a.ad-thumbnail:nth-of-type(odd) {
  grid-column: 8 / span 6; margin-left: 5px; 
}

a.ad-thumbnail > div {
  display: flex;
  flex-direction: row;
}

a.ad-thumbnail > div > div:nth-child(1) {
  width:160px;
  border-right: 3px solid #3C3C3B;
  transition: background-color 0.15s ease-in, border-color 0.15s ease-in, color 0.15s ease-in;
}

a.ad-thumbnail > div > div:nth-child(2) {
  padding:15px;
  text-align: left;
}

a.ad-thumbnail > div > div:nth-child(2) p {
  font-size: 1rem;
  margin-bottom: 2px;
}

a.ad-thumbnail:hover {
  background-color: var(--color-grey);
  color: var(--color-gold);
  border-color: var(--color-gold);
}

a.ad-thumbnail:hover > div > div:nth-child(1) {
  border-color: var(--color-gold);
}

/**************************************************************/
/*     Pied de page                                           */
/**************************************************************/

.footer {
  z-index: 1; grid-column: 1 / span 14; grid-row: 30 / span 1; background-color: #242425BF; border-top: 3px solid #3C3C3B;
}

.postFooter {
  z-index: 1;
  grid-column: 1 / span 14;
  grid-row: 31 / span 1;
  height: auto;
  background-color: #242425BF;
}

/**************************************************************/
/*     Formulaire                                             */
/**************************************************************/

.field {
  z-index: 2;
  display: inline-block;
  margin: 10px;
  padding: 10px;
  border-radius: 4px;
  border-style: none;
  background-color: #FFFFFF;
  text-align: left;
  text-decoration: none;
  font-family: 'Trueno';
  font-size: 1rem;
  color:#454040;
  cursor: text;
  box-shadow: 1px 1px 4px #00000040;
  max-width: 100%;
}

textarea {
  width: 100%;
  max-width: 100%;
}

input {
  margin-top: 5px;
}













/**************************************************/
/*                                                */
/*     RESPONSIVITÉ                               */
/*                                                */
/**************************************************/

.smallDevice { display:none; }
.bigDevice { display:block; }


@media (max-width: 960px) {
  
  .grid { grid-template-columns: 10px repeat(12, 1fr) 10px;}
  
}

@media (max-width: 800px) {


  html{
    font-size: 12px;
  }

a.ad-thumbnail > div > div:nth-child(2) p {
  font-size: 1.125rem;
}


  a.ad-thumbnail:nth-of-type(even) {
  grid-column: 2 / span 12; margin-right: 0px; 
}

a.ad-thumbnail:nth-of-type(odd) {
  grid-column: 2 / span 12; margin-left: 0px; 
}

p {
font-size: 1.125rem;

}


  .iconContainer div img              { height: 30px; }

  .smallDevice { display:block; }
  .bigDevice { display:none; }

  .box { padding: 15px; }

  .box.halfLeft { grid-column: 2 / span 12; margin-right: 0px; }
  .box.halfRight { grid-column: 2 / span 12; margin-left: 0px; }


  .box h1.textShadow { text-shadow: 0px 2px 1px black; }
  .box p.textShadow { text-shadow: 0px 1px 1px black; }

    .logo {
      width: 278px;
      height: 92.5px;
    }

  .navigationBox {font-size:13px;}
    
  .box .flexContainer .left { width:135px;}
  .box .flexContainer .right { padding:10px;}







/*small device page de vente*/


input {margin-left:10px; padding:5px; border-radius:0px; border: 3px solid #3C3C3B; max-width:140px; font-family:'Trueno'; font-size:16px;}


  }



  /* PAGE DE VENTE */

.box.nextAttached {border-bottom:0px;}
.box.attached {margin-top:0px;}



.rowContainer               { display: flex; flex-wrap: wrap; flex-direction: row; width: 100%; justify-content: center; align-items: center; }
.columnContainer               { display: flex; flex-wrap: wrap; flex-direction: column; width: 100%; align-items: center; align-items: center; }

.alignRight   { align-items:end;  }

input {margin-left:10px; padding:5px; border-radius:0px; border: 3px solid #3C3C3B; width:180px; font-family:'Trueno'; font-size:16px;}

.noPadding {padding:0px;}

.padding10 {padding:10px;}
.padding15 {padding:15px;}

p.large {font-size:1.25rem;}

p.noMargin {
  margin-bottom: 0px;
}

.borderRight {border-right: 3px solid #3C3C3B;}
.borderLeft {border-left: 3px solid #3C3C3B;}

h1.smaller {font-size: 1.75rem;}


.iconContainer.duo div                  { width: calc( 100% / 4 ) ; max-width: 300px; }
.iconContainer.index div                  { width: calc( 100% / 2 ) ; max-width: 150px; }


.special {display: none;}