/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: https://colors.muz.li/palette/E2D8BE/9e9a85/fffdf5/ccbee2/8f859e */

/* Feel free to copy&paste color codes to your application */

/* As hex codes */

@sable: #E2D8BE;	/* sable */
@blanc: #fffdf5; /* plus clair, presque blanc */
@pourpre: #8f859e;
@caca: #9e9a85; /* caca d'oie */
@lilas: #ccbee2;
@anthracite: #333;



body {
  background: @blanc;
  color: @anthracite;
  font-size: 18pt;
}

a {
  color: #555;
}


/* Repousser le titre vers le bas */
#banner {
  padding-bottom: 28em;
}


/* Le titre du site est sous l'image */
.sommaire header.major h1 {
   color: @anthracite ;
   font-size: 4em;
   margin-bottom: .1em;
 }

/* Fond du titre */
.sommaire #main > section {
  background-color: @sable;
}

/* bandeau en-tête */
#header {
  background-color: @caca;
  color: @anthracite;
}
#header nav > ul > li a:not(.button),
.dropotron li > a {
  color: #fff;
}

#header nav > ul > li a.perso_active:not(.button),
#header nav > ul > li a:not(.button):hover,
.dropotron li > a.perso_active,
.dropotron li > a:hover,
#header nav > ul > li.active a:not(.button) {
  color: @caca;
  background-color: @sable;
}

#header nav > ul > li:first-child {
  margin-left: auto;
}

/*Menus déroulants, largeur auto*/
.dropotron {
  width: auto;
  background: @caca;
}

.dropotron.level-0::before {
  background: @caca;
}


.box {
  background-color: @sable;
}

h1, h2, h3, h4, h5, h6 {
  color: @anthracite;
}

/* bandeau newsletter */
.sommaire #cta, .sommaire #coordonnees {
  background-color: @caca;
  color: @anthracite;
  text-align: center;
  padding: 3.5em 0 4em 0;
}

#footer {
  background-color: @caca;
}

.sommaire #footer {
  background-color: @sable;
}

#footer .copyright {
  color: @anthracite;
}



/* Les séparations évitent les "float" */
hr.spip {
  clear: both;
}

@media screen and (max-width: 1680px) {
  body, input, select, textarea {
    font-size: 18pt;
  }
  #header .accueil span.nom_site_spip {
	  display: none;
  }
}

@media screen and (max-width: 1366px) {
  body, input, select, textarea {
    font-size: 16pt;
  }
}

@media screen and (max-width: 980px) {
  body, input, select, textarea {
    font-size: 16pt;
  }
}

@media screen and (max-width: 840px) {
  body, input, select, textarea {
    font-size: 16pt;
  }
  #navPanel { 
	  @w: 380px;
    width: @w;
    -moz-transform: translateX(-@w);
    -webkit-transform: translateX(-@w);
    -ms-transform: translateX(-@w);
    transform: translateX(-@w);
  }
}

@media screen and (max-width: 736px) {
  body, input, select, textarea {
    font-size: 16pt;
  }
}