/*
 * Identité visuelle de 14x.fr
 * Palette inspirée des couleurs de la maison.
 *
 * Ce fichier doit être chargé après assets/css/main.css
 * afin que ses règles surchargent celles du thème Forty.
 */

:root {
    --house-ink: #1f2928;

    --house-green-dark: #173f3c;
    --house-green: #2f6863;
    --house-green-light: #557a73;

    --house-oak-dark: #4a2d1b;
    --house-oak: #81562f;

    --house-old-red: #7a4740;
    --house-stone: #6e665c;

    --house-cream: #e7dfcf;
    --house-plaster: #d7dbd6;
}

/* ---------------------------------------------------------
   Structure générale
   --------------------------------------------------------- */

html,
body {
    background-color: var(--house-ink);
}

body,
#wrapper {
    background-color: var(--house-ink);
}

#main {
    background-color: var(--house-green-dark);
}

#menu {
    background-color: var(--house-ink);
}

#menu .inner {
    background-color: transparent;
}

/*
 * Certains blocs de Forty conservent sinon les anciens fonds
 * bleu-violet du thème.
 */
#main > *,
#footer,
#contact {
    background-color: var(--house-green-dark);
}

/* Alternance légère entre les sections génériques. */
#main > section:nth-of-type(even) {
    background-color: var(--house-ink);
}

/* ---------------------------------------------------------
   En-tête et logo textuel
   --------------------------------------------------------- */

#header {
    background-color: var(--house-ink);
}

#header.alt {
    background-color: transparent;
}

#header .logo strong {
    background-color: var(--house-cream);
    color: var(--house-ink);
}

#header .logo:hover strong {
    background-color: var(--house-green-light);
    color: #ffffff;
}

#header nav a:hover {
    color: var(--house-cream);
}

/* ---------------------------------------------------------
   Grande bannière
   --------------------------------------------------------- */

#banner {
    background-color: var(--house-green-dark);
}

/*
 * Le thème Forty colore la bannière au moyen d'un pseudo-élément
 * semi-transparent. Cette règle remplace le violet d'origine.
 */
#banner::after {
    background-color: var(--house-green-dark);
}

/*
 * Variantes de bannière utilisées sur certaines pages internes.
 */
#banner.style1::after,
#banner.style2::after,
#banner.style3::after,
#banner.style4::after,
#banner.style5::after,
#banner.style6::after {
    background-color: var(--house-green-dark);
}

/* ---------------------------------------------------------
   Tuiles de la page d'accueil
   --------------------------------------------------------- */

.tiles article:nth-child(6n - 5)::before {
    background-color: var(--house-green);
}

.tiles article:nth-child(6n - 4)::before {
    background-color: var(--house-oak);
}

.tiles article:nth-child(6n - 3)::before {
    background-color: var(--house-old-red);
}

.tiles article:nth-child(6n - 2)::before {
    background-color: var(--house-green-light);
}

.tiles article:nth-child(6n - 1)::before {
    background-color: var(--house-oak-dark);
}

.tiles article:nth-child(6n)::before {
    background-color: var(--house-stone);
}

/*
 * Forty augmente ou diminue l'opacité des tuiles au survol.
 * On conserve le comportement, mais sans faire réapparaître
 * les couleurs violettes d'origine.
 */
.tiles article::before {
    opacity: 0.85;
}

.tiles article:hover::before {
    opacity: 0.65;
}

/* ---------------------------------------------------------
   Sections de contenu
   --------------------------------------------------------- */

.spotlights > section {
    background-color: var(--house-green-dark);
}

.spotlights > section:nth-child(even) {
    background-color: var(--house-ink);
}

.spotlights > section > .content {
    background-color: transparent;
}

.box {
    background-color: rgba(231, 223, 207, 0.06);
    border-color: rgba(231, 223, 207, 0.2);
}

/* ---------------------------------------------------------
   Texte, liens et séparateurs
   --------------------------------------------------------- */

body,
input,
select,
textarea {
    color: var(--house-plaster);
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
    color: #ffffff;
}

a {
    color: inherit;
}

a:hover {
    color: var(--house-cream);
}

hr {
    border-bottom-color: rgba(231, 223, 207, 0.2);
}

blockquote {
    border-left-color: var(--house-oak);
}

/* ---------------------------------------------------------
   Boutons et éléments interactifs
   --------------------------------------------------------- */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
    border-color: var(--house-plaster);
    color: var(--house-plaster);
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
    border-color: var(--house-cream);
    color: var(--house-cream);
}

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
    background-color: var(--house-green);
    color: #ffffff;
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
    background-color: var(--house-green-light);
}

/* ---------------------------------------------------------
   Formulaires
   --------------------------------------------------------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
    background-color: rgba(31, 41, 40, 0.75);
    border-color: rgba(231, 223, 207, 0.2);
    color: var(--house-plaster);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    border-color: var(--house-green-light);
    box-shadow: 0 0 0 1px var(--house-green-light);
}

label {
    color: var(--house-cream);
}

input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
    background-color: rgba(31, 41, 40, 0.75);
    border-color: rgba(231, 223, 207, 0.2);
}

input[type="checkbox"]:checked + label::before,
input[type="radio"]:checked + label::before {
    background-color: var(--house-green);
    border-color: var(--house-green);
}

/* ---------------------------------------------------------
   Tableaux
   --------------------------------------------------------- */

table tbody tr {
    border-color: rgba(231, 223, 207, 0.15);
}

table tbody tr:nth-child(2n + 1) {
    background-color: rgba(231, 223, 207, 0.04);
}

table th {
    color: var(--house-cream);
}

table thead,
table tfoot {
    border-color: rgba(231, 223, 207, 0.25);
}

/* ---------------------------------------------------------
   Icônes et pied de page
   --------------------------------------------------------- */

.icon.alt::before {
    background-color: var(--house-cream);
    color: var(--house-ink);
}

.icon.alt:hover::before {
    background-color: var(--house-green-light);
    color: #ffffff;
}

#footer {
    background-color: var(--house-ink);
}

#footer .copyright {
    color: rgba(215, 219, 214, 0.65);
}

/* ---------------------------------------------------------
   Sélection de texte
   --------------------------------------------------------- */

::selection {
    background-color: var(--house-oak);
    color: #ffffff;
}

::-moz-selection {
    background-color: var(--house-oak);
    color: #ffffff;
}