/* ============================================================
   Fully's Lake — Page d'accueil
   ============================================================ */

/* Hero : cadre de référence de la maquette Figma = 1440 × 818.
   Les pêcheurs y sont posés quasiment à la taille native de leurs PNG
   (810 × 1080 à gauche, 780 × 1170 à droite), se rejoignent au centre et sont
   rognés par le hero — sur les côtés et en bas. D'où `overflow: hidden`. */
.hero {
  position: relative;
  min-height: 818px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 124px 24px 60px;
  background: #0c3a4f;
  overflow: hidden;      /* le hero rogne les pêcheurs, comme sur la maquette */
}
.hero .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  overflow: hidden;
}
.hero .hero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(3,22,35,.42), rgba(3,22,35,.55)); }
/* Les deux PNG comportent de larges marges transparentes, très différentes
   l'une de l'autre (en bas : 34,6 % du calque à gauche, 18,2 % à droite). Un
   `bottom` en pixels ou en % du hero ne les compenserait qu'à une seule
   échelle ; un pourcentage de `translate` se calcule sur la taille de
   l'élément lui-même, donc le calage reste juste quelles que soient les
   dimensions rendues. Les valeurs viennent du relevé de la maquette :
   - translateY : descend le calque de sorte que le bas du pêcheur affleure
     le bas du hero (35,8 % à gauche, 20,8 % à droite) ;
   - translateX : place la tête du poisson par rapport à l'axe central, sur
     lequel les deux calques sont ancrés (right/left: 50 %).
   `height` en min(%, vw) : taille maquette au-delà de 1440 px de large,
   réduction proportionnelle en dessous pour garder le même cadrage. */
.hero .hero-fisher {
  position: absolute; bottom: 0; z-index: 2;
  width: auto; pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
}
.hero .hero-fisher.left  { height: min(132%, 75vw); right: 50%; transform: translate(-8%, 35.8%); }
.hero .hero-fisher.right { height: min(143%, 81vw); left:  50%; transform: translate(-1%, 20.8%); }
.hero > h1, .hero > p { position: relative; z-index: 3; }
.hero h1 {
  font-weight: 800;
  font-size: 96px;
  line-height: 1.0;
  letter-spacing: -1px;
  text-shadow: 0 4px 30px rgba(0,0,0,.35);
  margin-bottom: 26px;
}
.hero h1 .accent { color: var(--sky-200); }
.hero p {
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  max-width: 640px;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* ---------- BARRE DE RECHERCHE ---------- */
.search-wrap { background: #fff; }
.search-box {
  max-width: 1036px;
  margin: -40px auto 0;
  position: relative;
  z-index: 5;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 4px 11.8px 0 rgba(0,0,0,.18);
  padding: 28px 32px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.search-box .field { display: flex; flex-direction: column; gap: 8px; }
.search-box label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--lake);
}
.search-box label svg { width: 16px; height: 16px; fill: var(--lake); }
.search-box .control {
  height: 50px;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
  background: #fff;
  padding: 0 16px;
  font-size: 15px;
  color: var(--ink-700);
  font-family: inherit;
  display: flex;
  align-items: center;
  width: 100%;
}
.search-box .control::placeholder { color: var(--gray-400); }
select.control { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239ca3af' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.search-box .btn-lake { height: 50px; align-self: end; }

/* Le calendrier sur mesure (.date-field / .cal-*) est désormais dans style.css
   (composant partagé accueil + page réservation). */

/* ---------- À PROPOS ---------- */
.about-band {
  position: relative;
  padding: 88px 0;
  background: linear-gradient(rgba(8,32,52,.55), rgba(8,32,52,.62)),
              url('../img/about-water.jpg') center / cover no-repeat;
}
.about-card {
  max-width: 1216px;
  margin: 0 auto;
  background: #fff;
  border-radius: 40px;
  box-shadow: var(--shadow-soft);
  padding: 48px;
  display: grid;
  grid-template-columns: 528px 1fr;
  gap: 64px;
  align-items: stretch;
}
.about-card .photo {
  border-radius: 24px;
  overflow: hidden;
  min-height: 442px;
  background: url('../img/about-cabin.jpg') center / cover no-repeat;
}
.about-card .body { align-self: center; }
.about-card h2 {
  font-size: 48px;
  font-weight: 700;
  color: var(--ink);
  margin: 14px 0 24px;
  line-height: 1.05;
}
.about-card p {
  font-size: 16px;
  line-height: 26px;
  color: var(--gray-600);
  margin-bottom: 30px;
  max-width: 560px;
}

/* ---------- CATÉGORIES (grille 6 cartes) ---------- */
.cats { padding: 92px 0 40px; background: #fff; }
.cats-grid {
  max-width: 1216px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.cat {
  position: relative;
  height: 367px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
}
.cat .cat-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transition: transform .5s ease;
}
.cat:hover .cat-bg { transform: scale(1.05); }
/* voile photo (rangée 1) */
.cat.photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.05) 55%, rgba(0,0,0,0) 100%);
}
.cat .cat-inner { padding: 28px 30px; position: relative; z-index: 1; }
.cat h3 { font-size: 30px; font-weight: 700; margin-bottom: 8px; }
.cat .explore { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.cat .explore svg { width: 14px; height: 14px; fill: currentColor; transition: transform .2s ease; }
.cat:hover .explore svg { transform: translateX(4px); }

/* cartes illustrées (rangée 2) */
.cat.illus { align-items: stretch; }
.cat.illus .illus-img {
  position: absolute; inset: 0; z-index: 0;
  background-size: 86% auto; background-position: center 38%; background-repeat: no-repeat;
}
.cat.illus::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 50%);
}
.cat.illus .cat-inner { align-self: flex-end; }
.cat.reglement { background: linear-gradient(130.574deg, rgb(0,184,184), rgb(0,122,122)); }
.cat.reservation { background: linear-gradient(130.574deg, rgb(59,130,246), rgb(29,78,216)); }
.cat.contact { background: linear-gradient(135deg, #2c3a4e 0%, #0f1722 100%); }

/* ---------- FEATURES (L'Excellence) ---------- */
.features { padding: 40px 0 96px; background: #fff; text-align: center; }
.features h2 { font-size: 48px; font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.features .lead { font-size: 18px; color: var(--gray-600); max-width: 824px; margin: 0 auto 56px; }
.features-grid {
  max-width: 1216px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  text-align: left;
}
.feature {
  background: #fff;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--gray-100), var(--shadow-card);
  padding: 26px 33px 30px;
}
.feature .ico {
  width: 48px; height: 48px; border-radius: 9999px;
  background: var(--sky-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.feature .ico svg { width: 20px; height: 20px; fill: var(--lake); }
.feature h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.feature p { font-size: 14px; line-height: 22.75px; color: var(--gray-600); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1040px) {
  .hero h1 { font-size: 68px; }
  .about-card { grid-template-columns: 1fr; gap: 32px; padding: 32px; border-radius: 28px; }
  .about-card .photo { min-height: 300px; }
  .about-card h2 { font-size: 38px; }
  .cats-grid { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .hero { min-height: 580px; padding: 132px 20px 60px; justify-content: flex-start; }
  .hero h1 { font-size: 44px; }
  .hero p { font-size: 16px; line-height: 24px; }
  /* Pêcheurs : même composition qu'en desktop — ancrés sur l'axe central,
     rognés par les bords, posés au ras du bas du hero — mais deux réglages
     changent.
     1. La taille : la hauteur du hero est figée à 580 px en mobile alors que
        la largeur varie, donc on dimensionne en vw. Le plafond en % de la
        hauteur du hero les empêche de remonter dans le texte sur les grands
        mobiles et les tablettes, où le vw deviendrait trop généreux.
     2. Le décalage horizontal : à cette taille chaque pêcheur fait presque la
        largeur de l'écran. Garder le translateX du desktop sortirait le visage
        du pêcheur de gauche hors cadre — on les rapproche donc de l'axe pour
        que les deux visages restent entiers, et ce sont les queues des carpes,
        vers l'extérieur, qui se font rogner. */
  .hero .hero-fisher.left  { height: min(126vw, 85%); transform: translate(4%, 35.8%); }
  .hero .hero-fisher.right { height: min(121vw, 81%); transform: translate(-6%, 20.8%); }
  .hero .hero-veil { background: linear-gradient(rgba(3,22,35,.32), rgba(3,22,35,.62)); }
  .search-box { grid-template-columns: 1fr; margin-top: -28px; padding: 22px 20px 26px; }
  .search-box .btn-lake { height: 52px; }
  .about-band { padding: 56px 0; }
  .about-card { padding: 24px; border-radius: 24px; }
  .about-card h2 { font-size: 30px; }
  .about-card p { font-size: 15px; line-height: 24px; }
  .cats { padding: 60px 0 24px; }
  .cats-grid { grid-template-columns: 1fr; gap: 22px; }
  .cat { height: 300px; }
  .features { padding: 28px 0 64px; }
  .features-grid { grid-template-columns: 1fr; gap: 18px; }
  .features .lead { font-size: 16px; margin-bottom: 40px; }
  .features h2, .about-card h2 { font-size: 30px; }
  .feature { padding: 24px 26px 26px; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 38px; }
}