:root {
  --brand-color: #124b7a;
  --main-bg-color: #101a1f;
  --main-font-color: white;
  --main-accent-color: #b9e7d0;
  --main-accent-color-hover: #e0f3ea;
  --main-muted-color: #b5c3c0;
  --main-ink-color: #1e3033;
  --line-color: #727475;
}

* {
  box-sizing: border-box;
}





.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}





html {
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
}
html a {
    color: var(--main-font-color);
}

body {
  padding-left: 400px;
  padding-right: 400px;
}





.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 25px;
  padding-bottom: 25px;
  margin-bottom: 150px;
  border-bottom: 1px solid var(--line-color);
}

.brand {
  display: flex;
  gap: 20px;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  width: 40px;
  height: 40px;
}

.brand-name:hover {
  color: var(--main-accent-color);
}

.main-nav a {
  text-decoration: none;
}

.main-nav a:hover {
  color: var(--main-accent-color);
}





.landing {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.landing-activities, .contact-activities {
  color: var(--main-accent-color);
  text-transform: uppercase
}

.landing .title-accent, .contact .title-accent {
  color: var(--main-accent-color);
}

.landing h1, .contact h1 {
  font-size: 4em;
}

.landing-lead {
  color: var(--main-muted-color);
  font-size: 1.2em;
  line-height: 2;

}

.landing-experience {
  display: flex;
  gap: 20px;
  padding: 20px;
  border-top: 1px solid var(--line-color);
  border-bottom: 1px solid var(--line-color);
}
.landing-experience strong {
  font-size: 2em;
  color: var(--main-accent-color);  
}

.landing-action {
  display: flex;
  gap: 20px;
  align-items: center;  
  margin-top: 20px;
  margin-bottom: 20px;
}

.landing-action .btn {
  padding: 10px 15px;
  background-color: var(--main-accent-color);
  color: black;
  text-decoration: none;
}

.landing-action .link {
  font-size: 0.85em;
}

.landing-action .link:hover {
  color: var(--main-accent-color-hover);
}

.landing-action .btn:hover {
  background-color: var(--main-accent-color-hover);
}





.contact-grid {
  display: flex;
  gap: 40px;
}

.message {
  background-color: #f2f7f4;
  border-radius: 1%;
  color: black;
  padding-left: 30px;
  padding-right: 30px;
}

.field label {
  display: block; 
  margin-bottom: 5px;
}

.field input, .field textarea {
  display: block;
  width: 100%;
  border: 1px solid #b9c7c2;
  border-radius: 3px;
  padding: 13px 14px;
  margin-bottom: 20px;
  background: white; 
  counter-increment: var(--main-ink-color);
  font: inherit;
  font-size: 15px;
}

.message button {
  width: 100%;
  background-color: var(--main-accent-color);
  appearance: none;
  border: 1px solid var(--main-accent-color);
  padding-top: 10px;
  padding-bottom: 10px;
}

.message button:hover {
  background-color: var(--main-accent-color-hover);
  cursor: pointer
}

.new-message-link a {
  margin-top: 1rem;
  color: black;
}

.privacy-note {
  font-size: 8px;
}

.privacy-note a {
  color: black;
}



.contact-form--sent input:disabled,
.contact-form--sent textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-form--sent button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-message {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 8px;
}

.form-message--success {
  background: #edf8f0;
  color: var(--main-bg-color);
}

.form-message--error {
  background: #fdecec;
}

[aria-invalid="true"] {
  border-color: #b42318;
}





.cgv-calendar th,
.cgv-calendar td {
  text-align: left;
}






.site-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line-color);
  margin-top: 150px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 0.75em;
}

.footer-brand {
  color: var(--main-muted-color);
}

.footer-links a {
  text-decoration: none;
  color: var(--main-muted-color);
}

.footer-links a:hover {
  color: var(--main-accent-color);
}











@media (max-width: 600px) {
  body {
    padding-left: 25px;
    padding-right: 25px;
  }
}