/* ==========================================================================
   Fonts & Variables
   ========================================================================== */

@font-face {
    font-family: 'vtks';
    src: url('../fonts/vtks.woff2') format('woff2'),
         url('../fonts/vtks.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'PPNeueMontreal';
  src: url('../fonts/ppneuemontreal-book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PPNeueMontreal';
  src: url('../fonts/ppneuemontreal-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'PPNeueMontreal';
  src: url('../fonts/ppneuemontreal-italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'PPNeueMontreal';
  src: url('../fonts/ppneuemontreal-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'PPNeueMontreal';
  src: url('../fonts/ppneuemontreal-semibolditalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'PPNeueMontreal';
  src: url('../fonts/ppneuemontreal-thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

:root {
  /* Fonts */
  /*--font-body: Georgia, "Times New Roman", Times, serif;
  --font-heading: Arial, "Helvetica Neue", Helvetica, sans-serif;*/
  --font-body: 'PPNeueMontreal', sans-serif;
  --font-heading: 'PPNeueMontreal', sans-serif;
  --font-special: 'vtks', Arial, sans-serif;

  /* Colors */
  --color-primary: #466670;
  --color-secondary: #686254;
  --color-accent: #9c6951;
  --color-light: #fff;
  --color-dark: #000; /* Basic dark for shadows etc. */
  --color-text-body: var(--color-primary);
  --color-link: var(--color-accent);
  --color-link-hover: #5f5f5b; /* Specific hover color */
  --color-footer-link: var(--color-light);
  --color-footer-link-hover: #fcfbf8; /* Specific footer hover */

  /* Backgrounds */
  --bg-hero-slogan-desktop: rgba(110, 140, 150, 0.57);
  --bg-hero-breadcrumbs-desktop: rgba(110, 140, 150, 0.57);
  --bg-skill-card: rgba(246, 242, 231, 0.3);
  --bg-contact-form: rgba(246, 242, 231, 0.3);
  --bg-accordion-btn-active: var(--color-accent);

  /* Other */
  --base-font-size-px: 19; /* Use for calc() */
  --base-font-size: calc(var(--base-font-size-px) * 1px); /* Actual base size */
  --body-line-height: 1.2rem;
  --box-shadow-color: rgba(0, 0, 0, 0.75);
}

/* ==========================================================================
   Base & Global Styles
   ========================================================================== */

html {
  font-size: var(--base-font-size);
}

body {
  background-color: var(--color-light);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: 1rem; /* = 19px based on html */
  line-height: var(--body-line-height);
  margin: 0;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
}

hr {
  color: var(--color-accent);
}

ul {
  list-style-position: inside;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-heading);
  margin-bottom: 1.1rem; /* Default margin */
}

h1, .h1 { font-weight: 700; font-size: 1.8rem; line-height: 2.4rem; color: var(--color-accent); margin-bottom: 1.2rem; }
h2, .h2 { font-weight: 600; font-size: 1.6rem; line-height: 1.8rem; color: var(--color-accent);}
h3, .h3 { font-weight: 500; font-size: 1.4rem; line-height: 1.6rem; }
h4, .h4 { font-weight: 400; font-size: 1.2rem; line-height: 1.4rem; }
h5, .h5 { font-weight: 400; font-size: 1.1rem; line-height: 1.2rem; }
h6, .h6 { font-weight: 400; font-size: 1rem; text-decoration: underline; }

.text-emphasis {
  color: var(--color-accent);
  font-weight: 700;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.bg-color-primary {
  background-color: var(--color-primary) !important;
}

.bg-color-secondary {
  background-color: var(--color-secondary) !important;
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  background-color: var(--color-secondary);
  padding-top: 2px;
}

.logo {
  /* Base styles for logo if any */
}

.phone-top,
.phone-top a {
  font-family: var(--font-heading);
  color: var(--color-light);
  margin: 8px 0;
}

.main-menu .nav-link,
.main-menu .dropdown-item {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-weight: 600;
}

.main-menu .nav-link {
  font-size: calc(18 / var(--base-font-size-px) * 1rem); /* ~18px */
  margin: auto 8px;
}

.main-menu .dropdown-item {
  font-size: calc(16 / var(--base-font-size-px) * 1rem); /* ~16px */
}

.main-menu .nav-link:hover,
.main-menu .dropdown-item:hover,
.main-menu .nav-link.show { /* Assuming .show is from Bootstrap */
  color: var(--color-link-hover) !important;
}

.main-menu .active {
  color: var(--color-accent) !important;
}

.nav-search {
   /* Default state (visible on large screens) */
}

.btn {
  font-family: var(--font-heading);
}

.btn-search {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-search:hover {
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-light);
}

/* Header Media Queries */
@media screen and (max-width: 1599px) {
  .nav-search {
    display: none !important;
  }
}

@media screen and (max-width: 992px) {
  .logo {
    max-width: 200px;
  }
  /* Add any other header adjustments for tablets/mobile if needed */
}

/* ==========================================================================
   Hero Section (Desktop First)
   ========================================================================== */

.hero-section {
  position: relative;
  height: 100vh;
  max-height: 600px; /* Desktop height */
  background-image: url('../img/openfield.jpg');
  background-size: cover;
  background-position: center;
}

.slogan-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60%; /* Desktop width */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg-hero-slogan-desktop);
  color: var(--color-light);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.5px);
  -webkit-backdrop-filter: blur(4.5px); /* Keep for Safari */
  border: 1px solid rgba(110, 140, 150, 0.23); /* Specific border color */
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%); /* Desktop shape */
}

.hero-title {
  font-family: var(--font-special);
  font-size: 3.6rem;
  line-height: 3.7rem;
  margin-left: 10%;
}

.hero-slogan {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  line-height: 1.9rem;
  margin-left: 10%;
}

.hero-slogan-subtitle {
  font-family: var(--font-heading);
  margin-left: 10%;
  font-size: 1.3rem;
  line-height: 1.6rem;
}

.hero-btn {
  margin-left: 10%;
}

/* Hero Media Queries */
@media screen and (max-width: 1304px) {
  .slogan-box {
    /* Remove clip-path on medium-large screens if needed */
    clip-path: none;
  }
}

@media screen and (max-width: 991px) {
  .hero-section {
    max-height: 300px; /* Mobile height */
    background-image: none; /* Remove image on mobile */
  }

  .slogan-box {
    width: 100%;
    max-height: 300px; /* Match section height */
    clip-path: none; /* Ensure no clip-path */
    background-color: var(--color-primary); /* Solid background on mobile */
    backdrop-filter: none; /* Remove blur on mobile */
    -webkit-backdrop-filter: none;
    border: none; /* Remove border? */
    box-shadow: none; /* Remove shadow? */
    /* Adjust padding if needed */
  }

  .hero-title,
  .hero-slogan,
  .hero-slogan-subtitle,
  .hero-btn {
    text-align: center;
    margin-left: 0;
  }

  .hero-title {
    font-size: 2.6rem;
    line-height: 2.7rem;
  }

  .hero-slogan {
    font-size: 1.4rem;
    line-height: 1.5rem;
  }
  /* Adjust subtitle size/line-height if needed for mobile */
  /* .hero-slogan-subtitle { ... } */
}

/* ==========================================================================
   Home Top Animated Bar
   ========================================================================== */

.home-top {
  position: relative;
  overflow-x: hidden;
}

.hero-animation {
  position: relative;
  display: flex; /* Added for alignment */
  align-items: center; /* Added for vertical alignment */
  justify-content: flex-start; /* Default alignment */
  margin-right: 0;
  min-height: 60px;
  margin-top: -30px; /* Overlap */
  padding-left: 60px; /* Desktop padding */
  border-radius: 200px 0px 0px 200px / 150px 0px 0px 150px; /* Desktop shape */
  width: 70%; /* Desktop width */
  background-color: var(--color-secondary);
  animation: hero-anim 2s ease 0s 1 normal forwards;
  font-family: var(--font-heading); /* Default 'trebuchet' */
  font-size: calc(24 / var(--base-font-size-px) * 1rem); /* ~24px */
  font-weight: 700;
  color: var(--color-light);
  text-transform: uppercase;
}

.hero-animation p {
  margin: 0;
}

.hero-animation a {
  color: var(--color-light);
  text-transform: uppercase; /* Already on parent, but explicit */
  text-decoration: none;
}

.hero-animation a:hover {
  color: var(--color-primary); /* Different hover color */
}

/* Hero Animation Media Queries */
@media screen and (max-width: 1390px) {
  .hero-animation {
    border-radius: unset;
    width: 100%;
  }
}

@media screen and (max-width: 970px) {
  .hero-animation {
    font-family: var(--font-heading); /* Change font */
    font-size: calc(16 / var(--base-font-size-px) * 1rem); /* ~16px */
    padding: 6px 12px; /* Adjust padding */
    justify-content: center; /* Center content */
    width: 100%; /* Ensure full width (already set above, but explicit) */
    border-radius: unset; /* Ensure no radius */
  }

  .hero-animation a {
    display: inline-block; /* Needed for potential layout changes */
    text-decoration: underline;
    /* Font changes inherited */
  }
}

/* ==========================================================================
   Skill Cards
   ========================================================================== */

.skill-card {
  padding: 10px 16px;
  margin-bottom: 30px;
  background-color: var(--bg-skill-card);
  border-radius: 16px;
  box-shadow: 3px 3px 8px 0px var(--box-shadow-color);
  transition: transform 0.3s ease-in-out;
}

.skill-card-link {
  color: var(--color-primary);
  text-decoration: none;
  display: block; /* Make the whole card clickable easily */
}

.skill-card-title {
  color: var(--color-accent);
  /* Add margin/padding as needed */
}

.zoom-in-out-item:hover { /* Assuming this class is added to the skill-card or skill-card-link */
  transform: scale(1.10);
}

.card-body {
  color: var(--color-primary);
}

/* ==========================================================================
   Animated Sections (Left/Right Bars)
   ========================================================================== */

.animation-section {
  position: relative;
  overflow-x: hidden; /* Keep */
  color: var(--color-light);
}

.animation-section h2 {
  color: #fff;
}

.animation-section > div:nth-of-type(2) {
  margin-top: -30px; /* Overlap */
}

/* Base styles for both left and right animations */
.animation {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60px;
  width: 70%; /* Desktop width */
  font-family: var(--font-heading);
  font-size: calc(24 / var(--base-font-size-px) * 1rem); /* ~24px */
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-light); /* Common text color */
  z-index: 999; /* Use z-index carefully */
}

.animation p {
  margin: 0;
}

/* Specific styles for animated state */
.animation-left.animate {
  background-color: var(--color-primary); /* Choose appropriate color */
  margin-left: 0;
  border-radius: 0px 200px 200px 0px / 0px 150px 150px 0px;
  padding-right: 60px;
  justify-content: flex-end; /* Text align right */
  animation: anim-left 2s ease 0s normal forwards;
}

.animation-right.animate {
  background-color: var(--color-secondary); /* Choose appropriate color */
  margin-left: auto; /* Push to the right */
  margin-right: 0;
  border-radius: 200px 0px 0px 200px / 150px 0px 0px 150px;
  padding-left: 60px;
  justify-content: flex-start; /* Text align left */
  animation: anim-right 2s ease 0s 1 normal forwards;
}

/* Animated Sections Media Queries */
@media screen and (max-width: 1409px) {
  .animation { /* Affects both left and right */
    font-size: calc(16 / var(--base-font-size-px) * 1rem); /* ~16px */
  }
  .argument-list li { /* Adjust argument list font if needed */
     /* Original was 1.4rem, check if adjustment needed */
  }
}

@media screen and (max-width: 991px) {
  /* Apply to both base and animated states for consistency */
  .animation,
  .animation-left.animate,
  .animation-right.animate {
    width: 100%;
    border-radius: unset;
    margin-left: 0; /* Reset margin */
    justify-content: center; /* Center text */
    padding: 6px 12px; /* Adjust padding */
    /* Font size adjusted by max-width: 1409px already */
  }

  .argument-list li {
    /* Adjust font size for mobile if needed */
    font-size: 1.6rem; /* Example mobile size */
    line-height: 1.8rem; /* Example mobile line height */
  }
}

/* ==========================================================================
   Argument List
   ========================================================================== */

.argument-list {
  list-style-image: url("../img/case-a-cocher.png");
  padding-left: 2em; /* Add padding for the list image */
}

.argument-list li {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.4rem; /* Default size */
  line-height: 2rem; /* Default line height */
  margin-bottom: 0.5em; /* Add some space between items */
}

/* Argument list media queries already handled within Animated Sections queries */

/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion-item {
  /* Add border or background if needed */
  color: var(--color-primary); /* Default text color for content? */
}

.accordion-button {
  color: var(--color-primary);
  background-color: var(--color-light); /* Default BG */
  /* Reset default styles if needed (like box-shadow on focus) */
}

.accordion-button:not(.collapsed) {
  background-color: var(--bg-accordion-btn-active);
  color: var(--color-light);
}

/* Style for the icon rotation can be added if using Bootstrap defaults */
.accordion-button::after {
   /* Style the default Bootstrap arrow if needed */
}

.accordion h3 { /* Assuming h3 is inside the button */
  font-size: calc(20 / var(--base-font-size-px) * 1rem); /* ~20px */
  margin-bottom: 0; /* Remove margin if inside button */
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  /* Add background color, padding etc. */
  /* background-color: var(--color-secondary); Example */
  /* padding: 40px 0; */
}

footer a {
  color: var(--color-footer-link);
}

footer a:hover {
  color: var(--color-footer-link-hover);
  text-decoration: underline;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer li {
  margin: 8px 0;
}

.footer-contact-btn, .btn-search-footer {
  background-color: var(--color-accent);
  color: var(--color-light);
  /* Add padding, border-radius etc. */
  /* padding: 10px 20px; */
  /* border-radius: 4px; */
  display: inline-block; /* Make it behave like a button */
}

.footer-contact-btn:hover, .btn-search-footer {
  background-color: var(--color-primary); /* Different hover background */
  color: var(--color-light); /* Keep text color or change */
  text-decoration: none; /* Remove underline from link hover */
}

/* ==========================================================================
   Animations Keyframes
   ========================================================================== */

@keyframes hero-anim {
	0% { opacity: 0; transform: translateX(100%); animation-timing-function: ease-in; }
	38% { opacity: 1; transform: translateX(0); animation-timing-function: ease-out; }
	55% { transform: translateX(68px); animation-timing-function: ease-in; }
	72% { transform: translateX(0); animation-timing-function: ease-out; }
	81% { transform: translateX(32px); animation-timing-function: ease-in; }
	90% { transform: translateX(0); animation-timing-function: ease-out; }
	95% { transform: translateX(8px); animation-timing-function: ease-in; }
	100% { transform: translateX(0); animation-timing-function: ease-out; }
}

@keyframes anim-left {
	0% { opacity: 0; transform: translateX(-100%); animation-timing-function: ease-in; }
	38% { opacity: 1; transform: translateX(0); animation-timing-function: ease-out; }
	55% { transform: translateX(-68px); animation-timing-function: ease-in; }
	72% { transform: translateX(0); animation-timing-function: ease-out; }
	81% { transform: translateX(-32px); animation-timing-function: ease-in; }
	90% { transform: translateX(0); animation-timing-function: ease-out; }
	95% { transform: translateX(-8px); animation-timing-function: ease-in; }
	100% { transform: translateX(0); animation-timing-function: ease-out; }
}

@keyframes anim-right {
	0% { opacity: 0; transform: translateX(100%); animation-timing-function: ease-in; }
	38% { opacity: 1; transform: translateX(0); animation-timing-function: ease-out; }
	55% { transform: translateX(68px); animation-timing-function: ease-in; }
	72% { transform: translateX(0); animation-timing-function: ease-out; }
	81% { transform: translateX(32px); animation-timing-function: ease-in; }
	90% { transform: translateX(0); animation-timing-function: ease-out; }
	95% { transform: translateX(8px); animation-timing-function: ease-in; }
	100% { transform: translateX(0); animation-timing-function: ease-out; }
}

.title-hero {
  height: 300px;
  background-color: var(--color-primary);
  overflow: hidden;
}

.title-hero .bg-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /*background-image: url('/img/breadcrumbs-bg.jpg');*/
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.title-hero .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: var(--bg-hero-breadcrumbs-desktop);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

}

.title-hero .container {
  z-index: 3;
}

.title-hero .container h1 {
  color: var(--color-light);
}

.cta-underline {
  position: relative;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.cta-underline::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  left: 0;
  bottom: 0;
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}

.cta-underline:hover::after {
  width: 100%;
}
.cta-underline:hover {
  color: var(--color-link-hover);
}

.cta-section {
  background-color: #f7f6f4; 
}

.cta-card {
  background-color: var(--bg-skill-card);
  border-left: 5px solid var(--color-accent);
  transition: transform 0.2s ease;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  cursor: grab;
}

.cta-card:hover {
  transform: translateY(-4px);
  border-left: 5px solid var(--color-primary);
}

.cta-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-weight: 700;
}

.cta-text {
  font-family: var(--font-body);
  color: var(--color-text-body);
  font-size: 1.1rem;
}

.cta-text ul {
  list-style-position: outside;
}

.cta-nature {
  background-color: var(--color-secondary);
  color: white;
  transition: background-color 0.3s ease;
}

.cta-nature:hover {
  background-color: #586a5a;
}

.btn-cta {
  color: var(--color-light);
  background-color: var(--color-accent);
  transition: background-color 0.3s ease;
  font-size: 1.2rem;
}

.btn-cta:hover {
  background-color: var(--color-primary);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid #ccc; /* bordure autour de la table */
  border-radius: 6px;
  overflow: hidden;
}

table tr {
  border-bottom: 1px solid #e0e0e0;
}

table tr:last-child {
  border-bottom: none;
}

table td {
  padding: 1rem;
  vertical-align: top;
  border-left: 1px solid #e0e0e0; /* séparation verticale */
}

table td:first-child {
  width: 30%;
  font-weight: bold;
  color: var(--color-primary);
  border-left: none; /* pas de séparation à gauche de la première colonne */
}

table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Responsive mobile */
@media (max-width: 768px) {
  table, tbody, tr, td {
    display: block;
    width: 100%;
  }

  table {
    border: none;
    border-radius: 0;
  }

  table tr {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ddd;
  }

  table tr:last-child {
    border-bottom: none;
  }

  table td {
    padding: 0.5rem 0;
    border: none; /* on supprime les bordures sur mobile */
  }

  table td:first-child {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
}

.contact-intro {
  font-size: 1.05rem;
  line-height: 1.6rem;
  margin-bottom: 2rem;
}

.contact-intro p {
  margin-bottom: 1rem;
}

.contact-intro .lead {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-primary);
}


.contact {
  background-color: var(--bg-contact-form);
  padding: 2rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(110, 110, 110, 0.1); /* encadrement léger */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);  /* ombre subtile */
  animation: fadeInUp 0.6s ease-in-out;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.packs {
  background-color: var(--color-primary);
  color: #fff;
}

.packs ul {
  list-style-position: outside;
}

.breadcrumb-item, .breadcrumb-item a {
  font-family: var(--font-heading);
}