/* ============================================================
   An Lomi Lomi — feuille de style
   Palette océan / sable, esprit hawaiien, doux et apaisant
   ============================================================ */

:root{
  --deep:      #0f3b46;   /* teal océan profond   */
  --teal:      #1f6b74;   /* teal moyen           */
  --aqua:      #6bb5b3;   /* aqua clair           */
  --sand:      #f4ece1;   /* sable / crème        */
  --cream:     #fbf7f0;   /* fond clair           */
  --ink:       #22322f;   /* texte                */
  --ink-soft:  #4d5f5b;   /* texte secondaire     */
  --coral:     #d98b6f;   /* accent chaud         */
  --coral-dk:  #c4765a;
  --line:      rgba(31,107,116,.16);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-weight:300;
  line-height:1.75;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:.3px;
  color:var(--deep);
}
h2{ font-size:clamp(2rem, 4.2vw, 3.1rem); margin-bottom:.6em; }
h3{ font-size:1.5rem; }
h4{ font-size:1.4rem; margin-bottom:.35em; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:400;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:15px 34px;
  border-radius:50px;
  background:var(--teal);
  color:#fff;
  border:1px solid var(--teal);
  cursor:pointer;
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  margin-top:1.6rem;
}
.btn:hover{ background:var(--deep); border-color:var(--deep); transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(15,59,70,.5); }
.btn--light{ background:#fff; color:var(--deep); border-color:#fff; }
.btn--light:hover{ background:var(--sand); border-color:var(--sand); color:var(--deep); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-3px); box-shadow:none; }

/* ---------- Navigation ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding:22px 0;
}
.nav__inner{
  width:min(var(--wrap), 92%); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.nav__brand{ display:flex; flex-direction:column; line-height:1.1; color:#fff; transition:color .4s var(--ease); }
.nav__brand-main{ font-family:var(--serif); font-size:1.5rem; font-weight:600; letter-spacing:.5px; }
.nav__brand-sub{ font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; opacity:.85; margin-top:2px; }
.nav__links{ display:flex; align-items:center; gap:2.4rem; }
.nav__links a{ font-size:.82rem; letter-spacing:.1em; color:#fff; opacity:.92; transition:opacity .3s, color .4s var(--ease); }
.nav__links a:hover{ opacity:1; }
.nav__cta{
  border:1px solid rgba(255,255,255,.55);
  padding:9px 20px; border-radius:50px; opacity:1 !important;
  transition:background .3s, border-color .3s, color .3s;
}
.nav__cta:hover{ background:#fff; color:var(--deep) !important; border-color:#fff; }

/* état "scrolled" */
.nav.scrolled{ background:rgba(251,247,240,.94); backdrop-filter:blur(10px); box-shadow:0 6px 24px -18px rgba(15,59,70,.6); padding:14px 0; }
.nav.scrolled .nav__brand,
.nav.scrolled .nav__links a{ color:var(--deep); }
.nav.scrolled .nav__cta{ border-color:var(--teal); color:var(--teal) !important; }
.nav.scrolled .nav__cta:hover{ background:var(--teal); color:#fff !important; }
.nav.scrolled .nav__burger span{ background:var(--deep); }

.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav__burger span{ width:26px; height:2px; background:#fff; transition:.3s var(--ease); }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0;
  background:url("images/ocean-sparkling.jpeg") center 60%/cover no-repeat;
  transform:scale(1.08); animation:heroZoom 18s ease-out forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,59,70,.42) 0%, rgba(15,59,70,.30) 45%, rgba(15,59,70,.55) 100%); }
.hero__content{ position:relative; z-index:2; width:min(760px,90%); }
.hero__eyebrow{ font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; margin-bottom:1.4rem; opacity:.92; }
.hero__title{
  font-family:var(--serif); font-weight:500; color:#fff;
  font-size:clamp(3.2rem, 9vw, 6.4rem); line-height:1;
  text-shadow:0 4px 40px rgba(0,0,0,.28);
}
.hero__tagline{ font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2.4vw,1.6rem); margin-top:1.3rem; line-height:1.55; opacity:.96; }
.hero__scroll{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); width:26px; height:42px; border:1.5px solid rgba(255,255,255,.6); border-radius:20px; z-index:2; }
.hero__scroll span{ position:absolute; top:8px; left:50%; width:3px; height:7px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:scrollDot 1.8s var(--ease) infinite; }
@keyframes scrollDot{ 0%{opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 80%{opacity:0; transform:translate(-50%,14px);} 100%{opacity:0;} }

/* ---------- Citation ---------- */
.quote{ background:var(--deep); color:var(--sand); text-align:center; padding:clamp(4rem,9vw,7rem) 6%; }
.quote blockquote{ width:min(820px,100%); margin:0 auto; }
.quote__haw{ display:block; font-family:var(--serif); font-style:italic; font-size:clamp(1.7rem,4vw,2.8rem); color:#fff; line-height:1.3; }
.quote__fr{ display:block; margin-top:1.1rem; font-size:.95rem; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }

/* ---------- Sections ---------- */
.section{ padding:clamp(4.5rem,10vw,8rem) 0; }
.section--alt{ background:var(--sand); }
.section__grid{
  width:min(var(--wrap),92%); margin:0 auto;
  display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(2.5rem,5vw,5rem); align-items:center;
}
.section__grid--rev .section__media{ order:2; }
.section__media{ position:relative; }
.section__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px;
  box-shadow:0 30px 60px -30px rgba(15,59,70,.55);
}
.section__media::after{
  content:""; position:absolute; inset:14px -14px -14px 14px;
  border:1px solid var(--line); border-radius:6px; z-index:-1;
}
.section__kicker{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--coral-dk); margin-bottom:1rem; font-weight:400; }
.section__kicker--inline{ margin-top:2rem; }
.section__kicker--light{ color:#e8b9a6; }
.section__text p{ margin-bottom:1.1rem; color:var(--ink-soft); }
.lead{ font-size:1.22rem; color:var(--ink) !important; font-family:var(--serif); font-style:italic; line-height:1.55; margin-bottom:1.5rem !important; }
.muted{ font-size:.95rem; opacity:.85; }

/* ---------- Carte pratique ---------- */
.card{ background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:1.8rem 2rem; margin-top:2rem; }
.section--alt .card{ background:#fff; }
.card h3{ color:var(--teal); margin-bottom:1rem; font-size:1.25rem; }
.ticks{ list-style:none; }
.ticks li{ position:relative; padding-left:1.7rem; margin-bottom:.7rem; font-size:.95rem; color:var(--ink-soft); line-height:1.6; }
.ticks li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 4px rgba(107,181,179,.2); }
.card__meta{ display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; margin-top:1.6rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.card__meta > div{ display:flex; flex-direction:column; }
.card__num{ font-family:var(--serif); font-size:1.9rem; color:var(--coral-dk); line-height:1; }
.card__lbl{ font-size:.82rem; color:var(--ink-soft); margin-top:.35rem; max-width:230px; }

/* ---------- Liste des sens ---------- */
.senses{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.4rem; margin:1rem 0 1.6rem; }
.senses li{ background:rgba(107,181,179,.1); border-left:2px solid var(--aqua); border-radius:0 6px 6px 0; padding:.9rem 1.1rem; }
.senses strong{ display:block; font-weight:500; color:var(--teal); letter-spacing:.02em; }
.senses span{ font-size:.9rem; color:var(--ink-soft); }

/* ---------- Bandeau image parallax ---------- */
.banner{ height:clamp(280px,42vw,460px); background-attachment:fixed; background-position:center; background-size:cover; }
.banner--ocean{ background-image:url("images/honu-turtle.jpeg"); }

/* ---------- Lignée / transmission ---------- */
.lineage{ background:var(--deep); color:var(--sand); padding:clamp(3.5rem,7vw,5.5rem) 0; }
.lineage__inner{ width:min(var(--wrap),92%); margin:0 auto; text-align:center; }
.lineage .section__kicker{ color:#e8b9a6; }
.lineage__grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; max-width:800px; margin:1.5rem auto 0; }
.lineage h4{ color:#fff; }
.lineage p{ color:rgba(244,236,225,.8); font-size:.98rem; }

/* ---------- Contact ---------- */
.contact{ position:relative; color:#fff; text-align:center; padding:clamp(5rem,11vw,9rem) 6%; overflow:hidden; }
.contact__bg{ position:absolute; inset:0; background:url("images/water-surface.jpeg") center/cover no-repeat; transform:scale(1.05); }
.contact__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,59,70,.72), rgba(15,59,70,.82)); }
.contact__inner{ position:relative; z-index:2; width:min(720px,100%); margin:0 auto; }
.contact h2{ color:#fff; }
.contact__lead{ font-family:var(--serif); font-style:italic; font-size:1.25rem; opacity:.95; margin:.5rem auto 0; max-width:520px; }
.contact__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.contact__actions .btn{ margin-top:0; }
.contact__note{ margin-top:2rem; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; opacity:.75; }

/* ---------- Footer ---------- */
.footer{ background:#0a2b33; color:rgba(244,236,225,.7); padding:3rem 6%; }
.footer__inner{ width:min(var(--wrap),100%); margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; }
.footer__brand{ font-family:var(--serif); font-size:1.5rem; color:#fff; }
.footer__tag{ font-size:.88rem; }
.footer__copy{ font-size:.78rem; letter-spacing:.12em; opacity:.6; margin-top:.4rem; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(320px,80%);
    flex-direction:column; justify-content:center; gap:2rem;
    background:var(--deep); padding:3rem;
    transform:translateX(100%); transition:transform .45s var(--ease);
  }
  .nav__links.open{ transform:none; }
  .nav__links a{ color:#fff !important; font-size:1rem; }
  .nav__burger{ display:flex; z-index:101; }
  .nav.scrolled .nav__burger span{ background:var(--deep); }
  .nav__links.open ~ .nav__burger span{ background:#fff; }

  .section__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .section__grid--rev .section__media{ order:0; }
  .section__media img{ aspect-ratio:4/3; }
  .section__media::after{ display:none; }
  .senses{ grid-template-columns:1fr; }
  .lineage__grid{ grid-template-columns:1fr; gap:1.8rem; }
  .banner{ background-attachment:scroll; }
}
@media (max-width:480px){
  body{ font-size:16px; }
  .card{ padding:1.4rem 1.3rem; }
  .card__meta{ gap:1.2rem; }
}