/* ============================ BASE ============================ */
html {
    scroll-behavior: smooth;
    font-size: 62.5%;
}
body {
   font-family: "Barlow", system-ui, -apple-system, sans-serif;
   color: var(--navy);
   background: var(--white);
}
a {color: inherit;}
/* Conteneur centré : largeur maquette 140rem, gouttières 4rem mini */
.container {
   width: min(140rem, 100% - 8rem);
   margin-inline: auto;
}
/* Espacement vertical commun aux sections */
.section {padding-block: 10rem;}
/* Grid*/
.grid {display: grid;}
/* Flex */
.flex{display: flex;}
/* ============================ BOUTON (composant BTN de la maquette) ============================ */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 1.5rem 3.2rem;
   border: none;
   border-radius: 0.3rem;
   background: var(--red);
   color: var(--white);
   font-size: 2rem;
   font-weight: 700;
   line-height: 3rem;
   letter-spacing: 0.04rem;
   text-transform: capitalize;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
   transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:hover {
   background: var(--red-dark);
   transform: translateY(-0.2rem);
}
.btn:active {transform: translateY(0);}
/* ============================ TITRE DE SECTION ============================ */
.section_head {
   text-align: center;
   margin-bottom: 8rem;
}
.section_head h2 {
   font-size: 5.6rem;
   font-weight: 700;
   line-height: 1.05;
   text-transform: capitalize;
   margin-bottom: 2rem;
}
.section_head p {
   font-size: 2rem;
   font-weight: 400;
   line-height: 1.5;
   color: var(--navy);
}
/* ============================ HEADER ============================ */
.header {
   position: sticky;
   top: 0;
   z-index: 100;
   background: var(--white);
   box-shadow: var(--shadow-header);
}
.header_inner {
   align-items: center;
   justify-content: space-between;
   min-height: 7rem;
}
.logo {
   font-size: 2.4rem;
   font-weight: 700;
   color: var(--navy-dark);
   text-decoration: none;
}
.logo span {color: var(--red);}
.nav ul {
   align-items: center;
   gap: 4rem;
   list-style: none;
   padding: 0;
}
.nav a {
   font-size: 1.8rem;
   font-weight: 700;
   text-transform: capitalize;
   text-decoration: none;
   color: var(--navy);
   transition: color 0.2s ease;
}
.nav a:hover, .nav a.active {color: var(--red);}
/* --- Menu burger (masqué sur desktop, affiché en responsive) --- */
.nav-toggle {
   position: absolute;
   width: 0.1rem;
   height: 0.1rem;
   opacity: 0;
   pointer-events: none;
}
.burger {
   display: none; /* activé dans responsive.css */
   flex-direction: column;
   justify-content: center;
   gap: 0.5rem;
   width: 3.4rem;
   height: 3.4rem;
   cursor: pointer;
   z-index: 110;
}
.burger_line {
   display: block;
   width: 2.6rem;
   height: 0.3rem;
   border-radius: 0.2rem;
   background: var(--navy);
   transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Animation en croix quand le menu est ouvert */
.nav-toggle:checked ~ .burger .burger_line:nth-child(1) {transform: translateY(0.8rem) rotate(45deg);}
.nav-toggle:checked ~ .burger .burger_line:nth-child(2) {opacity: 0;}
.nav-toggle:checked ~ .burger .burger_line:nth-child(3) {transform: translateY(-0.8rem) rotate(-45deg);}
/* ============================ HERO ============================ */
.hero {background: url("../img/hero-bg.jpg") center / cover no-repeat;}
.hero_inner {
   min-height: 72rem;
   align-items: center;
   justify-content: center;
   padding-block: 8rem;
}
.hero_content {
   width: 76rem;
   max-width: 100%;
   padding: 3.2rem;
   border-radius: 0.6rem;
   background: var(--hero-panel);
}
.hero_content h1 {
   font-size: 6.4rem;
   font-weight: 700;
   line-height: 1.15;
   text-transform: capitalize;
   margin-bottom: 2rem;
}
.hero_content p {
   font-size: 2.4rem;
   font-weight: 400;
   line-height: 1.5;
   text-transform: lowercase;
   margin-bottom: 2.8rem;
}
/* ============================ OUR TRIPS ============================ */
.trips_grid {
   grid-template-columns: repeat(2, 1fr);
   gap: 12rem;
}
.trip_card {
   position: relative;
   aspect-ratio: 640 / 380;
   border-radius: 0.6rem;
   overflow: hidden;
}
.trip_card img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease;
}
.trip_card:hover img {transform: scale(1.05);}
.trip_card_body {
   position: absolute;
   inset: auto 0 0 0;
   z-index: 1;
   flex-direction: column;
   align-items: flex-end;
   gap: 1.4rem;
   padding: 2.4rem 3rem 3.4rem;
   text-align: center;
}
.trip_card_body h3 {
   font-size: 3.6rem;
   font-weight: 700;
   line-height: 1.2;
   text-transform: capitalize;
   color: var(--white);
}
/* ============================ GALLERY / DESTINATIONS ============================ */
.gallery_grid {grid-template-columns: repeat(4, 1fr);}
.dest {
   position: relative;
   aspect-ratio: 1;
   overflow: hidden;
}
.dest img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}
.dest:hover img {transform: scale(1.06);}
.dest_label {
   position: absolute;
   inset: auto 0 0 0;
   min-height: 7.6rem;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.2rem;
   padding: 1rem 1.2rem;
   background: var(--overlay);
   color: var(--white);
   text-align: center;
}
.dest_name {
   font-size: 1.8rem;
   font-weight: 700;
   line-height: 2.2rem;
   letter-spacing: 0.144rem;
   text-transform: uppercase;
}
.dest_city {
   font-size: 1.8rem;
   font-weight: 400;
   line-height: 2.2rem;
   letter-spacing: 0.144rem;
   text-transform: capitalize;
}
.gallery_cta {
   text-align: center;
   margin-top: 9rem;
}
/* ============================ SERVICES ============================ */
.services_grid {
   justify-content: center;
   gap: 3.2rem;
}
.service {
   flex: 1;
   max-width: 44.5rem;
   flex-direction: column;
   align-items: center;
   gap: 2rem;
   text-align: center;
}
.service_icon {
   width: auto;
   height: 5rem;
}
.service h3 {
   font-size: 2rem;
   font-weight: 700;
   line-height: 3rem;
   color: var(--navy);
}
.service p {
   font-size: 1.6rem;
   font-weight: 400;
   line-height: 2.4rem;
   color: var(--navy);
}
/* ============================ NEWSLETTER ============================ */
.newsletter_form {
   justify-content: center;
   gap: 4rem;
   flex-wrap: wrap;
}
.newsletter_form input {
   width: 43.2rem;
   max-width: 100%;
   height: 6rem;
   padding: 0 2rem;
   border: none;
   border-radius: 0.3rem;
   background: var(--input-bg);
   color: var(--navy);
   font-size: 2rem;
}
.newsletter_form input::placeholder {
   color: var(--muted);
   text-transform: capitalize;
}
.newsletter_form input:focus {
   outline: 0.2rem solid var(--red);
   outline-offset: 0.2rem;
}
/* ============================ FOOTER ============================ */
.footer {
   min-height: 9rem;
   align-items: center;
   justify-content: center;
   padding: 1.6rem;
   background: var(--navy);
}
.footer p {
   font-size: 1.6rem;
   font-weight: 400;
   line-height: 2.4rem;
   color: var(--white);
   text-align: center;
}