/* 
CAPTURE - Thème personnalisé
Couleurs de la charte graphique :
- Blanc: #FFF5F3
- Bleu vif: #164370
- Bleu sombre: #0D2E3D
- Noir: #000000
*/

/* === VARIABLES CSS === */
:root {
  --capture-blanc: #FFF5F3;
  --capture-bleu-vif: #164370;
  --capture-bleu-sombre: #0D2E3D;
  --capture-noir: #000000;
  --font-titles: 'Montserrat', sans-serif;
  --font-body: 'Host Grotesk', sans-serif;
}

/* === COULEURS ET TYPOGRAPHIE GÉNÉRALES === */
body {
  background-color: var(--capture-bleu-sombre);
  color: var(--capture-blanc);
  font-family: var(--font-body);
  font-weight: 400;
}

/* === TYPOGRAPHIE === */
h1, h2, h3, h4, h5, h6,
.major h1, .major h2, .major h3, .major h4, .major h5, .major h6 {
  font-family: var(--font-titles);
  font-weight: 600;
  color: var(--capture-blanc);
}

h1 {
  font-weight: 700;
}

h2 {
  font-weight: 600;
}

p, li, span, div {
  font-family: var(--font-body);
  font-weight: 400;
}

/* === HEADER ET NAVIGATION === */
#header {
  background-color: var(--capture-bleu-sombre);
  padding: 15px 10px;
  min-height: 70px;
}

#header .logo strong {
  color: var(--capture-bleu-sombre);
  font-family: var(--font-titles);
  font-weight: 700;
}

#menu ul li a {
  color: var(--capture-blanc);
  font-family: var(--font-body);
  font-weight: 400;
}

#menu ul li a:hover {
  color: var(--capture-bleu-vif);
}

#menu ul li .button.special.fit {
  color: var(--capture-bleu-sombre);
  font-family: var(--font-body);
  font-weight: 500;
}

#menu {
  background-color: #0D2E3DEE;
  
}

/* === BANNER === */
#banner {
  background-color: var(--capture-bleu-sombre);
  background-position-x: 50%;
}

#banner .content h1 {
  color: var(--capture-blanc);
  font-family: var(--font-titles);
  font-weight: 700;
}

#banner .content p {
  color: var(--capture-blanc);
  font-family: var(--font-body);
  font-weight: 400;
}

#banner .content .button {
  background-color: var(--capture-bleu-vif);
  color: var(--capture-blanc);
  border: 2px solid var(--capture-bleu-vif);
  font-family: var(--font-body);
  font-weight: 500;
}

#banner .content .button:hover {
  background-color: transparent;
  color: var(--capture-bleu-vif);
}

/* === TILES (TUILES) === */
.tiles article {
  background-color: var(--capture-bleu-sombre);
}

.tiles article .content {
  background-color: var(--capture-bleu-sombre);
}

.tiles article .content h3 {
  color: var(--capture-blanc);
  font-family: var(--font-titles);
  font-weight: 600;
}

.tiles article .content p {
  color: var(--capture-blanc);
  font-family: var(--font-body);
  font-weight: 400;
}

.tiles article:hover .content {
  background-color: var(--capture-bleu-vif);
}

/* === SECTION TWO === */
#two {
  background-color: var(--capture-bleu-sombre);
}

#two h2 {
  color: var(--capture-blanc);
}

#two p {
  color: var(--capture-blanc);
}

#two .button {
  background-color: var(--capture-bleu-vif);
  color: var(--capture-blanc);
  border: 2px solid var(--capture-bleu-vif);
  font-family: var(--font-body);
  font-weight: 500;
}

#two .button:hover {
  background-color: transparent;
  color: var(--capture-bleu-vif);
}

/* === CONTACT === */
#contact {
  background-color: var(--capture-bleu-sombre);
}

#contact h2 {
  color: var(--capture-blanc);
}

#contact p {
  color: var(--capture-blanc);
}

#contact .contact-method .content h3 {
  color: var(--capture-blanc);
}

#contact .contact-method .content p {
  color: var(--capture-blanc);
}

/* === FORMULAIRES === */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  background-color: var(--capture-bleu-sombre);
  border: 1px solid var(--capture-bleu-vif);
  color: var(--capture-blanc);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: var(--capture-bleu-sombre);
}

input[type="submit"].primary {
  background-color: var(--capture-bleu-vif);
  color: var(--capture-blanc);
  border: 2px solid var(--capture-bleu-vif);
}

input[type="submit"].primary:hover {
  background-color: var(--capture-bleu-sombre);
  border-color: var(--capture-bleu-sombre);
}

/* === FOOTER === */
#footer {
  background-color: var(--capture-bleu-sombre);
}

#footer .copyright {
  color: var(--capture-blanc);
}

#footer .icons li a {
  color: var(--capture-blanc);
}

#footer .icons li a:hover {
  color: var(--capture-bleu-vif);
}

/* === PAGES INTÉRIEURES === */
#main.alt {
  background-color: var(--capture-bleu-sombre);
}

#main.alt h1, 
#main.alt h2, 
#main.alt h3, 
#main.alt h4, 
#main.alt h5, 
#main.alt h6 {
  color: var(--capture-blanc);
}

#main.alt p,
#main.alt li {
  color: var(--capture-blanc);
}

/* === LIENS === */
a {
  color: var(--capture-blanc);
}

a:hover {
  color: var(--capture-blanc);
}

/* === BOUTONS GÉNÉRIQUES === */
.button {
  background-color: var(--capture-bleu-vif);
  color: var(--capture-blanc);
  border: 2px solid var(--capture-bleu-vif);
  font-family: var(--font-body);
  font-weight: 500;
}

.button:hover {
  background-color: transparent;
  color: var(--capture-bleu-vif);
}

/* === RESPONSIVE === */
@media screen and (max-width: 736px) {
  #banner {
    background-color: var(--capture-bleu-sombre);
  }
  
  #banner .content h1,
  #banner .content p {
    color: var(--capture-blanc);
  }
}