/* ═══════════════════════════════════════════════════

   AVEL MAT — style.css

   "Un site qui respire."

   ═══════════════════════════════════════════════════ */



*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }



:root {

  /* Palette — lumineuse, naturelle */

  --cream:    #f5f1ea;

  --white:    #ffffff;

  --sand:     #ede8df;

  --linen:    #e8e2d9;

  --ocean:    #1c3d54;

  --ocean-40: rgba(28,61,84,.4);

  --ocean-12: rgba(28,61,84,.12);

  --ink:      #191714;

  --ink-60:   rgba(25,23,20,.75);

  --ink-30:   rgba(25,23,20,.45);

  --ink-10:   rgba(25,23,20,.08);

  --gold:     #a8864a;



  --nav-h:    68px;

  --ease-out: cubic-bezier(.22,1,.36,1);

  --ease-in:  cubic-bezier(.64,0,.78,0);

  --pad-x:    clamp(1.5rem, 6vw, 7rem);

  --pad-y:    clamp(5rem, 10vw, 9rem);

}



html { scroll-behavior: smooth; overflow-x: hidden; }



body {

  font-family: 'Raleway', sans-serif;

  background: var(--cream);

  color: var(--ink);

  overflow-x: hidden;

  cursor: none;

  -webkit-font-smoothing: antialiased;

}



img { display: block; width: 100%; object-fit: cover; }

a   { text-decoration: none; color: inherit; }



/* ─── LOADER ─────────────────────────────────────────────── */

.loader {

  position: fixed; inset: 0;

  z-index: 10000;

  background: var(--ink);

  display: flex; flex-direction: column;

  align-items: center; justify-content: center;

  gap: 1.5rem;

  transition: opacity .8s var(--ease-out), visibility .8s;

}

.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.loader__bar {

  position: absolute; bottom: 0; left: 0;

  height: 1px; width: 0%;

  background: var(--gold);

  transition: width .06s linear;

}

.loader__text { display: flex; align-items: baseline; gap: 1.2rem; }

.loader__word {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(2rem, 5vw, 4rem);

  font-weight: 300; letter-spacing: .35em;

  color: var(--white);

}

.loader__pct {

  font-size: .68rem; letter-spacing: .2em;

  color: var(--gold); min-width: 2.5ch;

}

body.is-loading { overflow: hidden; }



/* ─── NOISE ──────────────────────────────────────────────── */

.noise {

  position: fixed; inset: -50%; width: 200%; height: 200%;

  z-index: 9000; pointer-events: none; opacity: .022;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  background-size: 200px 200px;

  animation: noiseShift .15s steps(1) infinite;

}

@keyframes noiseShift {

  0%  { transform: translate(0,0); }

  25% { transform: translate(-5%,-5%); }

  50% { transform: translate(5%,3%); }

  75% { transform: translate(-3%,5%); }

}



/* ─── CURSOR ─────────────────────────────────────────────── */

.cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; }

.cursor__dot {

  position: absolute; width: 6px; height: 6px;

  background: var(--ocean); border-radius: 50%;

  transform: translate(-50%,-50%);

  transition: width .25s var(--ease-out), height .25s var(--ease-out), opacity .25s, background .3s;

  box-shadow: 0 0 8px rgba(28,61,84,.2);

}

.cursor__ring {

  position: absolute; width: 24px; height: 24px;

  border: 1.5px solid var(--ocean); border-radius: 50%;

  transform: translate(-50%,-50%);

  opacity: .25;

  transition: width .35s var(--ease-out), height .35s var(--ease-out), opacity .3s, border-color .3s;

}

.cursor.is-hovering .cursor__ring { width: 42px; height: 42px; opacity: .4; border-color: var(--gold); }

.cursor.is-hovering .cursor__dot { width: 8px; height: 8px; background: var(--gold); }

.cursor.on-image .cursor__ring { width: 50px; height: 50px; border-color: rgba(255,255,255,.6); opacity: .5; }

.cursor.on-image .cursor__dot  { background: var(--white); box-shadow: 0 0 12px rgba(255,255,255,.4); }

.cursor.on-dark .cursor__dot  { background: rgba(255,255,255,.9); box-shadow: 0 0 8px rgba(255,255,255,.3); }
.cursor.on-dark .cursor__ring { border-color: rgba(255,255,255,.6); opacity: .5; }



/* ─── NAV ────────────────────────────────────────────────── */

.nav {

  position: fixed; top: 0; left: 0; right: 0;

  z-index: 1000; height: var(--nav-h);

  display: flex; align-items: center; justify-content: space-between;

  padding: 0 var(--pad-x);

  transition: background .5s var(--ease-out), box-shadow .5s;

}

.nav.scrolled {

  background: rgba(245,241,234,.93);

  backdrop-filter: blur(20px);

  box-shadow: 0 1px 0 var(--ink-10);

}

.nav__logo {

  display: flex; align-items: center;

}

.nav__logo-img {

  height: 88px; width: auto;

  filter: brightness(0) invert(1);

  transition: filter .4s;

}

.nav.scrolled .nav__logo-img {

  filter: none;

}



.nav__links { display: flex; align-items: center; gap: 2.2rem; }

.nav__link {

  font-size: .68rem; font-weight: 400;

  letter-spacing: .16em; text-transform: uppercase;

  color: rgba(255,255,255,.75); position: relative; transition: color .3s;

}

.nav__link::after {

  content: ''; position: absolute; bottom: -3px; left: 0;

  width: 0; height: 1px; background: var(--gold);

  transition: width .35s var(--ease-out);

}

.nav__link:hover { color: var(--white); }

.nav__link:hover::after, .nav__link.is-active::after { width: 100%; }

.nav.scrolled .nav__link { color: var(--ink-60); }

.nav.scrolled .nav__link:hover, .nav.scrolled .nav__link.is-active { color: var(--ocean); }



.nav__link--cta {

  border: 1px solid rgba(255,255,255,.3);

  padding: .5rem 1.3rem; border-radius: 1px;

  color: var(--white) !important;

  transition: background .3s, border-color .3s, color .3s !important;

}

.nav.scrolled .nav__link--cta { border-color: var(--ocean-40); color: var(--ocean) !important; }

.nav__link--cta:hover { background: var(--ocean); border-color: var(--ocean); color: var(--white) !important; }

.nav__link--cta::after { display: none; }



.nav__right { display: flex; align-items: center; gap: 1.2rem; }



/* Lang switcher (Polylang) */

.lang-switcher {

  display: flex; align-items: center; gap: .3rem;

  font-size: .65rem; font-weight: 400; letter-spacing: .14em;

}

.lang-switcher__item {

  color: rgba(255,255,255,.5); text-decoration: none;

  transition: color .3s;

}

.lang-switcher__item.is-active { color: var(--white); font-weight: 500; }

.lang-switcher__sep { opacity: .4; color: rgba(255,255,255,.5); }

.nav.scrolled .lang-switcher__item { color: var(--ink-30); }

.nav.scrolled .lang-switcher__item.is-active { color: var(--ocean); }

.nav.scrolled .lang-switcher__sep { color: var(--ink-30); }



.nav__burger {

  display: none; flex-direction: column; gap: 5px;

  background: none; border: none; cursor: none;

}

.nav__burger span { display: block; width: 20px; height: 1px; background: var(--white); transition: transform .3s, opacity .3s; }

.nav.scrolled .nav__burger span { background: var(--ink); }



/* ─── HERO ───────────────────────────────────────────────── */

.hero {

  position: relative; width: 100vw; height: 100svh;

  min-height: 600px; overflow: hidden;

}

.hero__slides { position: absolute; inset: 0; }

.hero__slide {

  position: absolute; inset: 0;

  background-size: cover; background-position: center;

  opacity: 0; transform: scale(1.05);

  transition: opacity 1.6s var(--ease-out), transform 7s linear;

  will-change: opacity, transform;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;

}

.hero__slide--active { opacity: 1; transform: scale(1); }

.hero__slide--leaving {

  opacity: 0; transform: scale(.98);

  transition: opacity 1.2s var(--ease-in), transform 1.2s var(--ease-in);

}

.hero__overlay {

  position: absolute; inset: 0; z-index: 1;

  background: linear-gradient(

    to bottom,

    rgba(20,18,15,.25) 0%,

    rgba(20,18,15,.15) 40%,

    rgba(20,18,15,.65) 100%

  );

}

.hero__content {

  position: absolute; z-index: 2;

  bottom: 16vh; left: var(--pad-x);

  max-width: min(720px, 90vw);

}

.hero__title {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(1.5rem, 2.2vw, 2.8rem);

  font-weight: 300; line-height: 1.2;

  letter-spacing: -.01em; color: var(--white);

  text-align: left;

  margin-bottom: clamp(2rem, 4vw, 3.5rem);

}

.hero__title-line { overflow: hidden; }

.hero__title-line span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); }

.hero__title-line span.is-visible { transform: translateY(0); }

.hero__title-line:nth-child(2) span { transition-delay: .1s; }

.hero__title-line:nth-child(3) span { transition-delay: .2s; }

.hero__title-line--indent { padding-left: 0; }

.hero__title-line--italic { font-style: italic; }



.hero__cta {

  display: inline-flex; align-items: center; justify-content: center;

  border: 1px solid rgba(255,255,255,.35); color: var(--white);

  padding: .9rem 2rem; font-size: .72rem;

  letter-spacing: .2em; text-transform: uppercase;

  position: relative; overflow: hidden;

  opacity: 0; transform: translateY(10px);

  transition: opacity .9s var(--ease-out) .5s, transform .9s var(--ease-out) .5s,

              border-color .3s, color .3s;

}

.hero__cta.is-visible { opacity: 1; transform: translateY(0); }

.hero__cta::before {

  content: ''; position: absolute; inset: 0;

  background: rgba(255,255,255,.1);

  transform: scaleX(0); transform-origin: left;

  transition: transform .45s var(--ease-out);

}

.hero__cta:hover::before { transform: scaleX(1); }

.hero__cta-inner { display: flex; align-items: center; gap: .9rem; position: relative; z-index: 1; }

.hero__cta-arrow { transition: transform .4s var(--ease-out); }

.hero__cta:hover .hero__cta-arrow { transform: translateY(4px); }



.hero__scroll-hint {

  position: absolute; left: 3%; top: 50%; transform: translateY(-50%);

  z-index: 2;

}

.hero__scroll-line {

  width: 1px; height: 70px;

  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);

  animation: scrollPulse 2.2s ease-in-out infinite;

}

@keyframes scrollPulse {

  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }

  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }

  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }

  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }

}



.hero__slide-nav {

  position: absolute; bottom: 5vh; left: var(--pad-x);

  z-index: 2; display: flex; align-items: center; gap: 1rem;

}

.hero__nav-btn {

  background: none; border: 1px solid rgba(255,255,255,.2);

  color: rgba(255,255,255,.55); cursor: none;

  width: 36px; height: 36px; border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  transition: background .3s, border-color .3s, color .3s;

}

.hero__nav-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: var(--white); }

.hero__progress { width: 60px; height: 1px; background: rgba(255,255,255,.2); overflow: hidden; }

.hero__progress-bar { height: 100%; width: 0; background: var(--white); transition: width linear; }



.hero__dots {

  position: absolute; bottom: 5.6vh; left: 50%; transform: translateX(-50%);

  z-index: 2; display: flex; gap: .4rem;

}

.hero__dot {

  width: 4px; height: 4px; border-radius: 50%;

  background: rgba(255,255,255,.3); border: none; cursor: none;

  transition: background .3s, transform .3s;

}

.hero__dot.is-active { background: var(--white); transform: scale(1.5); }



/* ─── SECTION-LABEL ──────────────────────────────────────── */

.section-label {

  font-size: .85rem; font-weight: 700;

  letter-spacing: .28em; text-transform: uppercase;

  color: var(--gold); margin-bottom: 1.8rem;

  display: flex; align-items: center; gap: .8rem;

}

.section-label::before {

  content: ''; display: block; width: 0; height: 1px;

  background: var(--gold); transition: width .9s var(--ease-out) .4s;

}

.section-label.is-visible::before { width: 24px; }



/* ─── RESSENTIR ──────────────────────────────────────────── */

.ressentir {

  display: grid; grid-template-columns: 1fr 1fr;

  min-height: 90vh; background: var(--cream);

}

.ressentir__inner {

  display: flex; flex-direction: column; justify-content: center;

  padding: var(--pad-y) var(--pad-x);

}

.ressentir__poem {

  margin-bottom: 3rem;

}

.ressentir__poem p {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(1.8rem, 3.2vw, 3.5rem);

  font-weight: 300; line-height: 1.3;

  color: var(--ocean); letter-spacing: -.01em;

}

.ressentir__poem p:not(:last-child) { margin-bottom: .3rem; }

.ressentir__text p {

  font-size: clamp(1rem, 1.3vw, 1.2rem);

  font-family: 'Cormorant Garamond', serif;

  line-height: 2; color: var(--ink);

  max-width: 420px; font-weight: 400;

}

.ressentir__image {

  position: relative; overflow: hidden;

  min-height: 60vh;

}

.ressentir__image::after {

  content: '';

  position: absolute;

  inset: 0;

  border: 2px solid rgba(255,255,255,.5);

  pointer-events: none;

  z-index: 2;

}

.ressentir__image img { height: 100%; }



/* Water droplets sur image ressentir */

.ressentir__image--droplets {

  position: relative;

  overflow: hidden;

}

.ressentir__image--droplets .water-droplets {

  z-index: 2;

}

.ressentir__image--droplets img {

  filter: brightness(0.95) contrast(1.05);

}

.ressentir__image--droplets:hover .water-droplets {

  opacity: 0.9;

  animation: dropletsShimmer 2s ease-in-out infinite;

}



/* ─── GALERIE ÉDITORIALE ─────────────────────────────────── */

.galerie { background: var(--cream); }



.galerie__full {

  width: 100%; aspect-ratio: 16/7;

  overflow: hidden; position: relative;

}

.galerie__full::before {

  content: '';

  position: absolute;

  inset: 0;

  border: 2px solid rgba(255,255,255,.5);

  pointer-events: none;

  z-index: 2;

}

@media (max-width: 768px) { .galerie__full { aspect-ratio: 4/3; } }



.galerie__interlude {

  padding: clamp(4rem, 8vw, 8rem) var(--pad-x);

  max-width: 100%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: clamp(2rem, 5vw, 6rem);

}

.galerie__interlude-text {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(1.6rem, 3vw, 3rem);

  font-weight: 300; line-height: 1.35;

  color: var(--ocean); letter-spacing: -.01em;

}



.galerie__duo {

  display: grid; grid-template-columns: 1fr 1fr;

  gap: 0;

}

.galerie__duo-item { overflow: hidden; position: relative; }

.galerie__duo-item img { aspect-ratio: 3/4; transition: transform .9s var(--ease-out); }

.galerie__duo-item:hover img { transform: scale(1.04); }

.galerie__duo-item--high { transform: translateY(-3rem); margin-bottom: -3rem; }

.galerie__duo-item--low  { padding-top: 3rem; }

.galerie__caption {

  padding: 1.8rem var(--pad-x) 3rem;

  font-size: clamp(.82rem, 1vw, .92rem);

  line-height: 1.85; color: var(--ink-60);

  font-weight: 300; font-style: italic;

  background: var(--cream);

}



.galerie__offset {

  margin: 0 var(--pad-x);

  aspect-ratio: 16/9; overflow: hidden; position: relative;

}

.galerie__offset img { transition: transform 1.2s var(--ease-out); }

.galerie__offset:hover img { transform: scale(1.03); }



.galerie__text-image {

  display: grid; grid-template-columns: 1fr 1fr;

  align-items: center; gap: clamp(3rem, 6vw, 6rem);

  padding: var(--pad-y) var(--pad-x);

}

.galerie__text-block p {

  font-size: clamp(.85rem, 1.1vw, 1rem);

  line-height: 2; color: var(--ink-60);

  font-weight: 300; max-width: 400px;

}

.galerie__small { overflow: hidden; aspect-ratio: 3/4; }

.galerie__small img { transition: transform .9s var(--ease-out); }

.galerie__small:hover img { transform: scale(1.04); }



/* ─── AVEL MAT ───────────────────────────────────────────── */

.avelmat {

  display: grid; grid-template-columns: 1fr 1fr;

  background: var(--sand); min-height: 80vh;

}

.avelmat__inner {

  display: flex; flex-direction: column; justify-content: center;

  padding: var(--pad-y) var(--pad-x);

}

.avelmat__heading {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(2rem, 3.5vw, 4rem);

  font-weight: 300; line-height: 1.15;

  color: var(--ocean); margin-bottom: 1rem;

}

.avelmat__heading em { font-style: italic; }

.avelmat__body {

  margin-bottom: 1.2rem;

}

.avelmat__body p {

  font-size: clamp(1rem, 1.3vw, 1.2rem);

  font-family: 'Cormorant Garamond', serif;

  line-height: 2; color: var(--ink-60); font-weight: 400; max-width: 440px;

}



.avelmat__boat {

  border-top: 1px solid var(--ink-10);

  padding-top: 2rem; margin-bottom: 2.5rem;

}

.avelmat__boat-label {

  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;

  color: var(--gold); margin-bottom: .9rem;

}

.avelmat__boat p {

  font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.9;

  font-family: 'Cormorant Garamond', serif;

  color: var(--ink-60); font-weight: 400; max-width: 420px;

  margin-bottom: 1.2rem;

}

.avelmat__specs {

  list-style: none; display: flex; flex-direction: column; gap: .5rem;

}

.avelmat__specs li {

  display: flex; align-items: center; gap: .4rem;

  font-size: .72rem;

}

.avelmat__specs li span:first-child {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1rem; color: var(--ocean); font-weight: 400; min-width: 1.5rem;

}

.avelmat__specs li span:last-child { color: var(--ink-60); letter-spacing: .06em; }



.avelmat__link {

  display: inline-flex; align-items: center; gap: .7rem;

  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;

  color: var(--ocean); border-bottom: 1px solid var(--ocean-12);

  padding-bottom: .3rem; align-self: flex-start;

  transition: color .3s, border-color .3s, gap .3s var(--ease-out);

}

.avelmat__link:hover { color: var(--gold); border-color: var(--gold); gap: 1.1rem; }



.avelmat__image { overflow: hidden; position: relative; }

.avelmat__image img { height: 100%; transition: transform 1.2s var(--ease-out); }

.avelmat__image:hover img { transform: scale(1.04); }



/* ─── CONTACT ────────────────────────────────────────────── */

.contact {

  background: var(--ocean) center/cover no-repeat;

  padding: var(--pad-y) var(--pad-x);

  position: relative;

}

.contact__overlay {

  position: absolute; inset: 0;

  background: none;

  z-index: 0;

}

.contact__inner, .contact__gulls { position: relative; z-index: 1; }

.contact .section-label { color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,.35); }

.contact .section-label::before { background: var(--white); }

.contact__inner {

  display: grid; grid-template-columns: 1fr 1.1fr;

  gap: clamp(4rem, 8vw, 8rem);

  max-width: 1300px; margin: 0 auto; align-items: start;

}

.contact__heading {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(2rem, 3.5vw, 4rem);

  font-weight: 300; line-height: 1.2;

  color: var(--white); margin-bottom: 0;

}

.contact__heading em { font-style: italic; }

.contact__right {

  background: rgba(255,255,255,.6);

  -webkit-backdrop-filter: blur(14px);

  backdrop-filter: blur(14px);

  border: 1px solid rgba(255,255,255,.4);

  border-radius: 6px;

  padding: clamp(2rem, 3vw, 3rem);

  box-shadow: 0 30px 70px -15px rgba(0,0,0,.45);

}



/* Form */

.contact__form { display: flex; flex-direction: column; gap: 1.6rem; }

.form__group { display: flex; flex-direction: column; gap: .5rem; position: relative; }

.form__label {

  font-size: .68rem; font-weight: 600;

  letter-spacing: .16em; text-transform: uppercase;

  color: rgba(15,30,42,.85);

}

.form__input {

  background: rgba(20,40,55,.07);

  border: 1px solid rgba(20,40,55,.22); border-bottom: 2px solid rgba(20,40,55,.4);

  color: var(--ink); font-family: 'Raleway', sans-serif;

  font-size: .95rem; font-weight: 400;

  padding: .8rem .7rem; outline: none;

  transition: border-color .35s, background .35s; border-radius: 3px;

  -webkit-appearance: none; appearance: none;

}

.form__input::placeholder { color: rgba(20,40,55,.45); }

.form__input:focus { border-bottom-color: var(--gold); background: rgba(20,40,55,.03); }

.form__input.has-error { border-bottom-color: rgba(220,80,80,.6); }

.form__textarea { resize: none; min-height: 120px; }



.form__error {

  font-size: .65rem; color: rgba(220,80,80,.7);

  opacity: 0; transition: opacity .25s; pointer-events: none;

}

.form__error.visible { opacity: 1; }

.form__rgpd {
  font-size: .82rem;
  line-height: 1.7;
  color: rgba(15,30,42,.9);
  background: rgba(20,40,55,.08);
  border: 1px solid rgba(20,40,55,.12);
  border-left: 3px solid var(--gold);
  padding: .9rem 1.1rem;
  border-radius: 2px;
  margin-top: .5rem;
}

.form__rgpd abbr {
  text-decoration: underline dotted;
  cursor: help;
}



.form__submit {

  display: inline-flex; align-items: center; justify-content: center; gap: .9rem;

  background: var(--ocean); border: 1px solid var(--ocean);

  color: var(--white); padding: 1.05rem 1.8rem;

  font-family: 'Raleway', sans-serif; font-size: .75rem;

  font-weight: 600; letter-spacing: .2em; text-transform: uppercase;

  cursor: none; position: relative; overflow: hidden;

  align-self: stretch; transition: border-color .3s, box-shadow .3s;

  box-shadow: 0 8px 20px -8px rgba(28,61,84,.6);

}

.form__submit::before {

  content: ''; position: absolute; inset: 0;

  background: var(--gold); transform: scaleX(0); transform-origin: left;

  transition: transform .45s var(--ease-out);

}

.form__submit:hover::before { transform: scaleX(1); }

.form__submit:hover { border-color: var(--gold); color: var(--ink); }

.contact__right .form__error { color: rgba(200,50,50,.75); }

.contact__right .form__success { color: var(--ocean); }

.form__submit-text, .form__submit-arrow { position: relative; z-index: 1; }

.form__submit-arrow { transition: transform .35s var(--ease-out); }

.form__submit:hover .form__submit-arrow { transform: translateX(5px); }

.form__submit .ripple {

  position: absolute; border-radius: 50%;

  background: rgba(255,255,255,.15); transform: scale(0);

  animation: rippleAnim .6s linear; pointer-events: none;

}

@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }



.contact__form { position: relative; }

.contact__form.is-sent > *:not(.form__success) {

  opacity: 0; pointer-events: none; transition: opacity .4s;

  position: absolute; inset: 0; height: 0; overflow: hidden;

}

.form__success {

  display: none; font-size: 1.7rem;

  color: var(--gold); padding: 2rem 0; font-weight: 300;

  letter-spacing: .02em; line-height: 1.5;

  font-family: 'Cormorant Garamond', serif;

}

.form__success.visible { display: block; }



/* ─── FOOTER ─────────────────────────────────────────────── */

.footer {

  background: var(--ocean);

  padding: 3.5rem var(--pad-x);

  border-top: 1px solid rgba(255,255,255,.05);

}

.footer__inner {

  max-width: 1300px; margin: 0 auto;

  display: grid; grid-template-columns: 1fr auto 1fr;

  align-items: center; gap: 2rem;

}

.footer__logo {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.3rem; font-weight: 300;

  letter-spacing: .2em; color: var(--white);

  display: block; margin-bottom: .4rem;

}

.footer__tagline {

  font-size: .75rem; color: rgba(255,255,255,.25);

  letter-spacing: .08em; font-style: italic;

}

.footer__links {

  display: flex; flex-direction: column;

  align-items: center; gap: .55rem;

}

.footer__links a {

  font-size: .75rem; letter-spacing: .14em;

  text-transform: uppercase; color: rgba(255,255,255,.35);

  transition: color .3s;

}

.footer__links a:hover { color: var(--gold); }

.footer__legal {

  text-align: right; font-size: .63rem;

  color: rgba(255,255,255,.2); line-height: 1.9;

}

.footer__legal a { transition: color .3s; }

.footer__legal a:hover { color: rgba(255,255,255,.45); }



/* Reveals — actifs quand js-ready est present */

.reveal-up {

  opacity: 0; transform: translateY(24px);

  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);

}

.reveal-up.is-visible { opacity: 1; transform: translateY(0); }



.reveal-image {

  opacity: 0;

  clip-path: inset(8% 0 8% 0);

  transition: opacity 1.1s cubic-bezier(.22,1,.36,1), clip-path 1.3s cubic-bezier(.22,1,.36,1);

}

.reveal-image.is-visible {

  opacity: 1;

  clip-path: inset(0% 0 0% 0);

}



/* ─── RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 1024px) {

  .ressentir { grid-template-columns: 1fr; }

  .ressentir__image { min-height: 50vw; }

  .avelmat { grid-template-columns: 1fr; }

  .avelmat__image { min-height: 50vw; order: -1; }

  .contact__inner { grid-template-columns: 1fr; gap: 3.5rem; }

  .footer__inner { grid-template-columns: 1fr; text-align: center; }

  .footer__legal { text-align: center; }

}



@media (max-width: 768px) {

  .nav__links {

    display: flex; flex-direction: column;

    position: fixed; top: var(--nav-h); left: 0; right: 0;

    background: rgba(245,241,234,.97);

    backdrop-filter: blur(20px);

    padding: 2rem var(--pad-x);

    gap: 1.6rem;

    transform: translateY(-12px);

    opacity: 0; pointer-events: none;

    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);

  }

  .nav--open .nav__links {

    opacity: 1; pointer-events: auto; transform: translateY(0);

  }

  .nav__link { color: var(--ink); }

  .nav__burger { display: flex; z-index: 1; }

  .nav--open .nav__burger span:nth-child(1) { transform: translateY(3px) rotate(45deg); }

  .nav--open .nav__burger span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

  .nav--open .nav__burger span { background: var(--ink); }

  .galerie__duo { grid-template-columns: 1fr; }

  .galerie__duo-item--high { transform: none; margin-bottom: 0; }

  .galerie__duo-item--low  { padding-top: 0; }

  .galerie__text-image { grid-template-columns: 1fr; gap: 2rem; }

  .galerie__offset { margin: 0; }

  .hero__scroll-hint { display: none; }

}



@media (max-width: 480px) {

  .hero__title { font-size: clamp(2.2rem, 9vw, 4rem); }

  .ressentir__poem p { font-size: clamp(1.5rem, 6vw, 2.5rem); }

}



/* ─── FIN ────────────────────────────────────────────────────── */



/* ═══════════════════════════════════════════════════

   MICRO-INTERACTIONS & MICRO-ANIMATIONS

   ═══════════════════════════════════════════════════ */



/* --- POEM LINES — entree ligne par ligne --- */

.poem-line {

  overflow: hidden;

  margin-bottom: .2rem;

}

.poem-line span {

  display: block;

  opacity: 0;

  transform: translateY(1.1em);

  transition:

    opacity  .9s cubic-bezier(.22,1,.36,1) calc(var(--i) * 0.18s + 0.1s),

    transform .9s cubic-bezier(.22,1,.36,1) calc(var(--i) * 0.18s + 0.1s);

}

.ressentir__poem.is-visible .poem-line span {

  opacity: 1;

  transform: translateY(0);

}



/* --- WIND LINE --- */

.wind-line {

  height: 1px;

  background: rgba(28,61,84,.12);

  width: 0;

  margin: 2.4rem 0;

  transition: width 1.4s cubic-bezier(.22,1,.36,1);

  max-width: 120px;

}

.wind-line.is-visible { width: 120px; }



/* --- IMAGE CAPTION flottante --- */

.ressentir__image { position: relative; }

.ressentir__image-caption {

  position: absolute;

  bottom: 1.8rem; left: 1.8rem;

  font-size: .6rem; letter-spacing: .2em;

  text-transform: uppercase; color: rgba(255,255,255,0);

  transition: color .8s cubic-bezier(.22,1,.36,1) .3s;

}

.ressentir__image.is-visible .ressentir__image-caption { color: rgba(255,255,255,.45); }



/* --- INTERLUDE --- */

.interlude {

  position: relative;

  min-height: 75vh;

  display: flex; align-items: center;

  overflow: hidden;

}

.interlude__bg {

  position: absolute; inset: 0; z-index: 0;

}

.interlude__bg img {

  transform: scale(1.1);

  transition: transform 1.6s cubic-bezier(.22,1,.36,1);

  will-change: transform;

}

.interlude.is-visible .interlude__bg img { transform: scale(1.0); }

.interlude__bg::after {

  content: '';

  position: absolute; inset: 0;

  background: linear-gradient(105deg,rgba(20,18,15,.8) 0%,rgba(20,18,15,.45) 55%,rgba(20,18,15,.1) 100%);

}

.interlude__inner {

  position: relative; z-index: 1;

  padding: clamp(5rem,10vw,9rem) clamp(1.5rem,6vw,7rem);

  max-width: min(700px,90vw);

}

.interlude__quote {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(1.8rem, 3.8vw, 4.2rem);

  font-weight: 300; line-height: 1.3;

  color: var(--white); letter-spacing: -.01em;

}

.interlude__quote em { font-style: italic; color: var(--white); }

.interlude__quote .word { display: inline-block; overflow: hidden; vertical-align: bottom; }

.interlude__quote .word-inner {

  display: inline-block;

  transform: translateY(110%);

  transition: transform .9s cubic-bezier(.22,1,.36,1);

}

.interlude.is-visible .word-inner { transform: translateY(0); }



/* --- AVELMAT SPECS --- */

.avelmat__specs {

  list-style: none; display: flex; flex-direction: column; gap: .9rem; margin-top: 1.4rem;

}

.avelmat__specs li {

  display: flex; align-items: baseline; gap: .5rem;

  font-size: .78rem; color: var(--ink-60);

  opacity: 0; transform: translateX(-12px);

  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);

}

.avelmat__specs li:nth-child(2) { transition-delay: .13s; }

.avelmat__boat.is-visible .avelmat__specs li { opacity: 1; transform: translateX(0); }

.avelmat__spec-num {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(2rem, 3vw, 3rem);

  font-weight: 300; color: var(--ocean); line-height: 1; min-width: 2.5rem;

}

.avelmat__spec-unit {

  font-size: .72rem; color: var(--ink-60); letter-spacing: .1em; margin-right: .5rem;

}



/* --- AVELMAT LINK arrow draw --- */

.avelmat__link svg path {

  stroke-dasharray: 32;

  stroke-dashoffset: 32;

  transition: stroke-dashoffset .45s cubic-bezier(.22,1,.36,1);

}

.avelmat__link:hover svg path { stroke-dashoffset: 0; }



/* --- FORM gold underline --- */

.form__line {

  position: absolute; bottom: 0; left: 0;

  height: 1px; width: 0;

  background: var(--gold);

  transition: width .5s cubic-bezier(.22,1,.36,1);

  pointer-events: none;

}

.form__group:focus-within .form__line { width: 100%; }

.form__group:focus-within .form__label { color: rgba(255,255,255,.65); transition: color .3s; }



/* --- HERO shimmer on title --- */

.hero__title-line span {

  background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,.8) 50%,#fff 100%);

  background-size: 200% 100%;

  -webkit-background-clip: text; background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: titleShimmer 7s ease-in-out infinite;

  animation-play-state: paused;

  will-change: background-position;
  isolation: isolate;

}

.hero__title-line span.is-visible { animation-play-state: running; }

@keyframes titleShimmer {

  0%,100% { background-position: 0% 0%; }

  50%     { background-position: 100% 0%; }

}



/* --- CURSOR breathe --- */

@keyframes cursorBreathe {

  0%,100% { opacity: .3; }

  50%     { opacity: .55; }

}

.cursor__ring { animation: cursorBreathe 3.5s ease-in-out infinite; }

.cursor.is-hovering .cursor__ring, .cursor.on-image .cursor__ring { animation: none; }



/* --- SECTION LABEL dot --- */

.section-label::after {

  content: '';

  display: inline-block; width: 3px; height: 3px;

  background: var(--gold); border-radius: 50%;

  margin-left: .6rem; opacity: 0;

  animation: labelPulse 2.2s ease-in-out infinite;

  transition: opacity .4s .9s;

}

.section-label.is-visible::after { opacity: 1; }

@keyframes labelPulse {

  0%,100% { transform: scale(1); opacity: .5; }

  50%     { transform: scale(2); opacity: 1; }

}



/* --- GALERIE duo vignette hover --- */

.galerie__duo-item::before {

  content: ''; position: absolute; inset: 0; z-index: 1;

  background: linear-gradient(to top, rgba(20,18,15,.4), transparent 45%);

  opacity: 0; transition: opacity .6s cubic-bezier(.22,1,.36,1); pointer-events: none;

}

.galerie__duo-item:hover::before { opacity: 1; }



/* --- RESSENTIR image slow zoom --- */

.ressentir__image img {

  transition: transform 2s cubic-bezier(.22,1,.36,1);

  transform: scale(1.05);

}

.ressentir__image:hover img { transform: scale(1.09); }



/* --- FOOTER logo spacing hover --- */

.footer__logo { transition: letter-spacing .5s cubic-bezier(.22,1,.36,1); }

.footer__logo:hover { letter-spacing: .28em; }



/* --- CONTACT wave top border --- */

.contact { position: relative; overflow: visible; }

.contact::before {

  content: ''; position: absolute; top: 0; left: -30%; right: -30%;

  height: 1px;

  background: linear-gradient(90deg,transparent,rgba(168,134,74,.25),transparent);

  animation: contactWave 6s ease-in-out infinite;

}

@keyframes contactWave {

  0%,100% { transform: translateX(-20%); }

  50%     { transform: translateX(20%); }

}



/* --- FORM SUCCESS animation --- */

.form__success.visible {

  display: flex; align-items: center; gap: .8rem;

  animation: successFade .7s cubic-bezier(.22,1,.36,1) both;

}

.form__success::before { content: '—'; color: var(--gold); font-size: 1rem; flex-shrink: 0; }

@keyframes successFade {

  from { opacity:0; transform: translateY(10px); }

  to   { opacity:1; transform: translateY(0); }

}



/* --- GALERIE FULL location label --- */

.galerie__full[data-location]::after {

  content: attr(data-location);

  position: absolute; bottom: 1.4rem; right: 1.8rem; z-index: 2;

  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;

  color: rgba(255,255,255,0); transition: color .5s cubic-bezier(.22,1,.36,1);

  pointer-events: none;

}

.galerie__full[data-location]:hover::after { color: rgba(255,255,255,.45); }



/* --- HERO scroll glide line --- */

.hero__scroll-line { position: relative; overflow: hidden; }

.hero__scroll-line::after {

  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;

  background: rgba(255,255,255,.35);

  animation: scrollGlide 2.6s ease-in-out infinite;

}

@keyframes scrollGlide {

  0%   { transform: translateY(-100%); }

  100% { transform: translateY(250%); }

}





/* --- GALERIE TRIO — 3 portraits alignes --- */

.galerie__trio {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 0;

  background: var(--ink);

  margin: 0;

}

.galerie__trio-item {

  overflow: hidden;

  position: relative;

}

.galerie__trio-item img {

  aspect-ratio: 3/4;

  transition: transform 1s cubic-bezier(.22,1,.36,1);

}

.galerie__trio-item:hover img { transform: scale(1.05); }

.galerie__trio-item::before {

  content: ''; position: absolute; inset: 0; z-index: 1;

  background: linear-gradient(to top, rgba(20,18,15,.4), transparent 50%);

  opacity: 0; transition: opacity .6s cubic-bezier(.22,1,.36,1); pointer-events: none;

}

.galerie__trio-item:hover::before { opacity: 1; }

.galerie__trio-item--text::before,
.galerie__trio-item--text:hover::before { content: none; }



/* Bloc texte au milieu du trio */

.galerie__trio-item--text {

  background: var(--cream);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2.5rem;

  align-self: stretch;

  overflow: hidden;

}

.galerie__trio-text p {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(1.4rem, 2vw, 2rem);

  font-weight: 300;

  line-height: 1.6;

  color: var(--ink);

  text-align: center;

  letter-spacing: -.01em;

}

.galerie__trio-text p br {

  display: block;

  content: "";

  margin-bottom: .5rem;

}

/* Pas d'animation */

.galerie__trio-text {

  opacity: 1;

}

.galerie__trio-text p {

  display: block;

}



@media (max-width: 768px) {

  .galerie__trio { grid-template-columns: 1fr 1fr; }

  .galerie__trio-item:last-child { display: none; }

}

@media (max-width: 480px) {

  .galerie__trio { grid-template-columns: 1fr; }

  .galerie__trio-item:last-child { display: block; }

}





/* ═══════════════════════════════════════════════════

   CORRECTIFS — images visibles + hauteurs explicites

   ═══════════════════════════════════════════════════ */







/* Ressentir image — hauteur explicite pour que img height:100% marche */

.ressentir__image {

  min-height: 70vh;

  height: 100%;

}

.ressentir__image img {

  width: 100%;

  height: 100%;

  min-height: 70vh;

  object-fit: cover;

  will-change: transform;

}



/* Parallax sur image ressentir */

.ressentir__image[data-parallax] {

  overflow: hidden;

}



.ressentir__image[data-parallax] img {

  transform: scale(1.15);

  transition: none;

}



/* Avelmat image — idem */

.avelmat__image {

  min-height: 60vh;

}

.avelmat__image img {

  width: 100%;

  height: 100%;

  min-height: 60vh;

  object-fit: cover;

}



/* Galerie offset — l'img doit remplir le conteneur a ratio fixe */

.galerie__offset img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Galerie duo items — hauteur via aspect-ratio sur le conteneur */

.galerie__duo-item {

  aspect-ratio: 3/4;

}

.galerie__duo-item img {

  width: 100%;

  height: 100%;

  aspect-ratio: auto;

  object-fit: cover;

}



/* Galerie full — img remplit le conteneur */

.galerie__full img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Galerie small */

.galerie__small {

  min-height: 400px;

}

.galerie__small img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Bordure blanche sur toutes les photos (hors hero) */

.avelmat__image img,
.galerie__duo-item img,
.galerie__offset img,
.galerie__small img,
.galerie__trio-item img,
.scroll-grid img,
.scroll-scaler img,
.swipe-reveal__slide img,
.swipe-reveal__slide--base img {

  outline: 2px solid rgba(255,255,255,.5);

  outline-offset: -3px;

}



/* Interlude bg */

.interlude__bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Galerie trio */

.galerie__trio-item {

  min-height: 300px;

}

.galerie__trio-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  aspect-ratio: auto;

}





















/* ═══════════════════════════════════════════════════

   MOUETTES + VOILIER + FORMES + PARALLAX

   ═══════════════════════════════════════════════════ */



/* --- MOUETTES HERO --- */

.contact__gulls {

  position: absolute;

  top: 22%; right: 12%;

  z-index: 3;

  pointer-events: none;

}

.gull {

  position: absolute;

  opacity: 0;

}

.gull--1 { width: 68px; top: 0; right: 0;

  animation: gullFly1 18s ease-in-out 3.5s infinite; }

.gull--2 { width: 50px; top: 28px; right: 60px;

  animation: gullFly2 22s ease-in-out 5s infinite; }

.gull--3 { width: 38px; top: 10px; right: 120px;

  animation: gullFly3 26s ease-in-out 7s infinite; }



@keyframes gullFly1 {

  0%   { opacity:0; transform: translate(0,0) rotate(0deg); }

  5%   { opacity:.9; }

  50%  { opacity:.5; transform: translate(-120px, -30px) rotate(-3deg); }

  95%  { opacity:.3; }

  100% { opacity:0; transform: translate(-260px, -10px) rotate(2deg); }

}

@keyframes gullFly2 {

  0%   { opacity:0; transform: translate(0,0) rotate(0deg); }

  6%   { opacity:.85; }

  50%  { opacity:.4; transform: translate(-90px,-20px) rotate(-2deg); }

  94%  { opacity:.2; }

  100% { opacity:0; transform: translate(-200px, 5px) rotate(1deg); }

}

@keyframes gullFly3 {

  0%   { opacity:0; transform: translate(0,0); }

  8%   { opacity:.75; }

  50%  { opacity:.35; transform: translate(-70px,-15px); }

  92%  { opacity:.15; }

  100% { opacity:0; transform: translate(-160px, 8px); }

}



/* --- VOILIER DESSINÉ --- */

/* Styles déplacés plus bas dans le fichier (ligne 1170) */

.ressentir { position: relative; overflow: visible; }

.sailboat-sketch svg path,

.sailboat-sketch svg line {

  stroke-dasharray: 400;

  stroke-dashoffset: 400;

  transition: stroke-dashoffset 4s cubic-bezier(.22,1,.36,1);

}

.sailboat-sketch.is-drawn svg line   { transition-delay: 0s; }

.sailboat-sketch.is-drawn svg path:nth-of-type(1) { transition-delay: .4s; }

.sailboat-sketch.is-drawn svg path:nth-of-type(2) { transition-delay: .9s; }

.sailboat-sketch.is-drawn svg path:nth-of-type(3) { transition-delay: 1.3s; }

.sailboat-sketch.is-drawn svg path:nth-of-type(4) { transition-delay: 1.7s; }

.sailboat-sketch.is-drawn svg path:nth-of-type(5) { transition-delay: 2s; }

.sailboat-sketch.is-drawn svg path,

.sailboat-sketch.is-drawn svg line {

  stroke-dashoffset: 0;

}

.sailboat-sketch.is-drawn {

  opacity: 1;

  transition: opacity .4s;

}



/* --- VAGUES DESSINÉES --- */

.galerie__interlude {

  position: relative;

}



.waves-sketch {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  max-width: clamp(280px, 35vw, 480px);

  opacity: 0;

  transition: opacity 0.6s ease;

  pointer-events: none;

}



.waves-sketch svg {

  width: 100%;

  height: auto;

}



.waves-sketch svg path {

  stroke-dasharray: 500;

  stroke-dashoffset: 500;

  transition: stroke-dashoffset 4.5s cubic-bezier(.22,1,.36,1);

}

.waves-sketch.is-drawn svg path:nth-of-type(1) { transition-delay: 0s; }

.waves-sketch.is-drawn svg path:nth-of-type(2) { transition-delay: .5s; }

.waves-sketch.is-drawn svg path:nth-of-type(3) { transition-delay: 1s; }

.waves-sketch.is-drawn svg path:nth-of-type(4) { transition-delay: 1.5s; }

.waves-sketch.is-drawn svg path:nth-of-type(5) { transition-delay: 1.8s; }

.waves-sketch.is-drawn svg path:nth-of-type(6) { transition-delay: 2.1s; }

.waves-sketch.is-drawn svg path:nth-of-type(7) { transition-delay: 2.4s; }



.waves-sketch.is-drawn svg path {

  stroke-dashoffset: 0;

}



.waves-sketch.is-drawn {

  opacity: 1;

}



@media (max-width: 768px) {

  .galerie__interlude {

    grid-template-columns: 1fr;

  }

  .waves-sketch {

    display: none;

  }

  .sailboat-sketch {

    position: static;

    transform: none;

    width: 56px;

    margin: 0 auto;

    padding: 1.2rem 0;

    opacity: .5;

    display: flex;

    justify-content: center;

    grid-column: 1 / -1;

  }

}



/* --- IMAGE AVELMAT FORM LIBRE --- */

.avelmat__image--shaped {

  clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%);

}

.avelmat__image--shaped img {

  transform: scale(1.04);

  transition: transform 1.8s cubic-bezier(.22,1,.36,1);

}

.avelmat__image--shaped:hover img { transform: scale(1.08); }



/* --- GALERIE DUO image en diagonale --- */







/* --- PARALLAX DATA ATTR --- */

[data-parallax] img {

  will-change: transform;

  transform: translateY(0) scale(1.12);

}























/* ═══════════════════════════════════════════════════

   FORMES VARIÉES — rond, losange, triangle

   ═══════════════════════════════════════════════════ */







/* Galerie offset — HEXAGONE */

.galerie__offset {

  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

  max-width: 800px;

  margin: 4rem auto;

}



/* Galerie trio — formes variées */

/* Clip-path retiré car l'élément du milieu contient maintenant du texte */

/* .galerie__trio-item:nth-child(2) {

  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

} */





/* Galerie full 2 — VAGUE */

.galerie__full:last-of-type {

  clip-path: ellipse(85% 90% at 50% 50%);

}



/* Avelmat image — PARALLELOGRAMME */

.avelmat__image--shaped {

  clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%);

}







/* ═══════════════════════════════════════════════════

   DESIGN — Liquid text hero title (DÉSACTIVÉ)

   ═══════════════════════════════════════════════════ */

/* Effet retiré car il rendait le texte invisible */

/* .hero__title {

  background: linear-gradient(135deg, var(--white) 0%, rgba(255,255,255,.85) 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: liquidReveal 2.5s cubic-bezier(.22,1,.36,1) forwards;

}

@keyframes liquidReveal {

  from { 

    filter: blur(12px) brightness(1.3);

    transform: scale(1.08);

  }

  to { 

    filter: blur(0px) brightness(1);

    transform: scale(1);

  }

} */



/* Contact gulls — position correcte */

.contact {

  position: relative;

}

.contact__gulls {
  position: absolute;
  top: 15%; right: 8%;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-end;
}

.gull {
  display: block;
  opacity: 0;
  animation: gullFly 9s ease-in-out infinite;
  overflow: visible;
}
.gull--1 { width: 56px; animation-delay: 0s; }
.gull--2 { width: 42px; animation-delay: 2s;  margin-right: 2rem; }
.gull--3 { width: 30px; animation-delay: 4s;  margin-right: 4rem; }

@keyframes gullFly {
  0%   { opacity: 0;   transform: translate(0px,   0px); }
  10%  { opacity: 1; }
  50%  { opacity: .85; transform: translate(-20px, -12px); }
  90%  { opacity: 1; }
  100% { opacity: 0;   transform: translate(-40px,  4px); }
}







/* Interlude quote — split reveal */

.interlude__quote {

  perspective: 800px;

  transform-style: preserve-3d;

}

.interlude__quote br + * {

  display: inline-block;

  animation: splitReveal 1.8s cubic-bezier(.22,1,.36,1) forwards;

  animation-delay: .6s;

  opacity: 0;

}

@keyframes splitReveal {

  from {

    opacity: 0;

    transform: translateZ(-100px) rotateX(20deg);

  }

  to {

    opacity: 1;

    transform: translateZ(0) rotateX(0);

  }

}



/* Avelmat image — 3D tilt */

.avelmat__image--shaped {

  transition: transform 1s cubic-bezier(.22,1,.36,1);

}

.avelmat__image--shaped:hover {

  transform: perspective(1000px) rotateY(-3deg) rotateX(2deg) scale(1.02);

}







/* Voilier — entre les 2 colonnes ressentir */

.ressentir {

  position: relative;

}

.sailboat-sketch {

  pointer-events: none;

}

@media (min-width: 769px) {

  .sailboat-sketch {

    position: absolute;

    right: 52%;

    top: 50%;

    transform: translateY(-50%);

    width: 110px;

    opacity: .6;

    z-index: 5;

  }

}







/* ═══════════════════════════════════════════════════

   DESIGN COMPLEXE — Magnetic buttons + Stagger gallery

   ═══════════════════════════════════════════════════ */



/* Magnetic effect sur tous les boutons (DÉSACTIVÉ) */

/* .magnetic {

  transition: transform .3s cubic-bezier(.22,1,.36,1);

  will-change: transform;

} */



/* Galerie trio — effet stagger au scroll */

.galerie__trio-item {

  transition: opacity .6s;

}

.galerie__trio-item:nth-child(1) { transition-delay: 0s; }

.galerie__trio-item:nth-child(2) { transition-delay: .15s; }

.galerie__trio-item:nth-child(3) { transition-delay: .3s; }



/* Hero CTA — pulse subtil */

.hero__cta {

  position: relative;

}

.hero__cta::before {

  content: '';

  position: absolute;

  inset: -2px;

  border: 1px solid rgba(255,255,255,.3);

  border-radius: inherit;

  opacity: 0;

  animation: ctaPulse 3s cubic-bezier(.22,1,.36,1) infinite;

}

@keyframes ctaPulse {

  0%, 100% { opacity: 0; transform: scale(1); }

  50% { opacity: .6; transform: scale(1.08); }

}



/* Contact form inputs — wave effect on focus */

.contact__form input:focus,

.contact__form textarea:focus {

  animation: inputWave .6s cubic-bezier(.22,1,.36,1);

}

@keyframes inputWave {

  0%, 100% { transform: translateX(0); }

  25% { transform: translateX(-3px); }

  75% { transform: translateX(3px); }

}





/* ═══════════════════════════════════════════════════

   WATER DROPLETS EFFECT — Gouttes d'eau sur vitre

   ═══════════════════════════════════════════════════ */



.galerie__small--droplets {

  position: relative;

  overflow: hidden;

}



.water-droplets {

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/54046/glass_droplets.jpeg');

  background-size: cover;

  background-position: center;

  opacity: 0.7;

  mix-blend-mode: overlay;

}



/* Effet de flou léger sur l'image pour simuler la vitre */

.galerie__small--droplets img {

  filter: brightness(0.95) contrast(1.05);

}



/* Hover effect — les gouttes deviennent plus visibles */

.galerie__small--droplets:hover .water-droplets {

  opacity: 0.8;

  animation: dropletsShimmer 2s ease-in-out infinite;

}





/* ═══════════════════════════════════════════════════

   HANDWRITTEN TEXT — Texte manuscrit avec reveal au scroll

   ═══════════════════════════════════════════════════ */



.handwritten-text {

  font-family: 'Cormorant Garamond', serif !important;

  font-size: clamp(2.2rem, 3.5vw, 4rem) !important;

  font-weight: 300 !important;

  font-style: italic !important;

  line-height: 1.6 !important;

  color: var(--ocean) !important;

  max-width: 100% !important;

  letter-spacing: -.01em !important;

  position: relative;

  word-break: normal !important;

  overflow-wrap: break-word !important;

  white-space: normal !important;

}



/* Wrapper pour l'effet reveal lettre par lettre */

.handwritten-reveal {

  display: inline;

  position: relative;

}



.handwritten-reveal .letter {

  display: inline-block;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.3s ease, transform 0.3s ease;

  white-space: pre;

}



.handwritten-reveal .letter.visible {

  opacity: 1;

  transform: translateY(0);

}



/* Ajustement responsive */

@media (max-width: 768px) {

  .handwritten-text {

    font-size: clamp(1.8rem, 5vw, 3rem) !important;

  }

}





/* ═══════════════════════════════════════════════════

   SCROLL GRID ANIMATION — Grille animée au scroll

   ═══════════════════════════════════════════════════ */

.scroll-grid-section {

  min-height: 120vh;

  position: relative;

  margin-bottom: 0;

}



.scroll-grid-content {

  min-height: 100vh;

  width: 100vw;

  display: flex;

  place-items: center;

  align-content: center;

  position: sticky;

  top: 0;

  overflow: hidden;

  background: var(--bg);

}



.scroll-grid {

  --gap: clamp(10px, 2vw, 40px);

  width: min(1400px, 90vw);

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  grid-template-rows: repeat(3, minmax(160px, auto));

  gap: var(--gap);

  margin: 0 auto;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}



.scroll-grid > .scroll-layer {

  display: grid;

  grid-column: 1 / -1;

  grid-row: 1 / -1;

  grid-template-columns: subgrid;

  grid-template-rows: subgrid;

  opacity: 0;

  transform: scale(0);

  pointer-events: none;

}

.scroll-grid > .scroll-layer img,

.scroll-scaler img {

  pointer-events: all;

}



/* Layer 1: Outer edges */

.scroll-grid > .scroll-layer:nth-of-type(1) div:nth-of-type(odd) {

  grid-column: 1;

}



.scroll-grid > .scroll-layer:nth-of-type(1) div:nth-of-type(even) {

  grid-column: -2;

}



/* Layer 2: Inner columns */

.scroll-grid > .scroll-layer:nth-of-type(2) div:nth-of-type(odd) {

  grid-column: 2;

}



.scroll-grid > .scroll-layer:nth-of-type(2) div:nth-of-type(even) {

  grid-column: -3;

}



/* Layer 3: Center column */

.scroll-grid > .scroll-layer:nth-of-type(3) div:first-of-type {

  grid-column: 3;

  grid-row: 1;

}



.scroll-grid > .scroll-layer:nth-of-type(3) div:last-of-type {

  grid-column: 3;

  grid-row: -1;

}



.scroll-grid > .scroll-layer > div {

  overflow: hidden;

  border-radius: 1rem;

  min-height: 0;

}

.scroll-grid img {

  width: 100%;

  height: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  display: block;

  border-radius: 1rem;

}



.scroll-scaler {

  position: relative;

  grid-area: 2 / 3;

  z-index: 2;

  width: 100%;

  height: 100%;

}



.scroll-scaler img {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  object-fit: cover;

  border-radius: 1rem;

  width: 100vw;

  height: 100vh;

}



@media (max-width: 768px) {

  .scroll-grid-section {

    min-height: unset;

  }



  .scroll-grid-content {

    min-height: unset;

    position: static;

    padding: 2rem var(--pad-x);

  }



  .scroll-grid {

    position: static;

    transform: none;

    top: unset;

    left: unset;

    width: 100%;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: repeat(3, auto);

    gap: 8px;

  }



  .scroll-grid > .scroll-layer {

    opacity: 1;

    transform: none;

  }



  .scroll-grid > .scroll-layer:nth-of-type(1) {

    display: none;

  }



  .scroll-grid > .scroll-layer:nth-of-type(2) div:nth-of-type(odd) {

    grid-column: 1;

  }



  .scroll-grid > .scroll-layer:nth-of-type(2) div:nth-of-type(even) {

    grid-column: -2;

  }



  .scroll-grid > .scroll-layer:nth-of-type(3) div:first-of-type {

    grid-column: 2;

    grid-row: 1;

  }



  .scroll-grid > .scroll-layer:nth-of-type(3) div:last-of-type {

    grid-column: 2;

    grid-row: -1;

  }



  .scroll-scaler {

    grid-area: 2 / 2;

  }



  .scroll-scaler img {

    position: static;

    transform: none;

    width: 100%;

    height: auto;

    aspect-ratio: 4 / 5;

  }

}





/* ═══════════════════════════════════════════════════

   LIGHTBOX

   ═══════════════════════════════════════════════════ */

.lightbox {

  position: fixed;

  inset: 0;

  z-index: 9000;

  background: rgba(10, 18, 26, 0.92);

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s cubic-bezier(.22,1,.36,1);

  cursor: zoom-out;

}

.lightbox.is-open {

  opacity: 1;

  pointer-events: all;

}

.lightbox__img {

  max-width: 90vw;

  max-height: 88vh;

  object-fit: contain;

  border-radius: .5rem;

  box-shadow: 0 32px 80px rgba(0,0,0,.5);

  transform: scale(0.94);

  transition: transform 0.3s cubic-bezier(.22,1,.36,1);

}

.lightbox.is-open .lightbox__img {

  transform: scale(1);

}

.lightbox__close {

  position: absolute;

  top: 1.2rem;

  right: 1.4rem;

  background: none;

  border: none;

  color: rgba(255,255,255,.7);

  font-size: 1.5rem;

  cursor: pointer;

  line-height: 1;

  padding: .4rem .6rem;

  transition: color .2s;

}

.lightbox__close:hover { color: #fff; }



.scroll-grid img { cursor: zoom-in; }

/* ═══════════════════════════════════════════════════
   SWIPE REVEAL — Image qui révèle des slides au scroll
   ═══════════════════════════════════════════════════ */
.swipe-reveal {
  position: relative;
  margin: clamp(3rem, 6vw, 6rem) auto;
  width: calc(100% - 2 * var(--pad-x));
  max-width: 1200px;
  height: 60vh;
  max-height: 600px;
  overflow: hidden;
}

.swipe-reveal__slide {
  position: absolute;
  inset: 0;
  clip-path: polygon(102% -2%, 102% -2%, 102% 102%, 102% 102%);
  z-index: 2;
  overflow: hidden;
  background: var(--cream);
  will-change: clip-path;
}

.swipe-reveal__slide[data-index="0"] { z-index: 2; }
.swipe-reveal__slide[data-index="1"] { z-index: 3; }
.swipe-reveal__slide[data-index="2"] { z-index: 4; }
.swipe-reveal__slide[data-index="3"] { z-index: 5; }
.swipe-reveal__slide[data-index="4"] { z-index: 6; }

.swipe-reveal__slide--base {
  position: relative;
  clip-path: none;
  z-index: 1;
  height: 100%;
}

.swipe-reveal__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swipe-reveal__slide--base img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swipe-reveal__slide--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
}

.swipe-reveal__slide--text p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 3.5vw, 4rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--ocean);
  letter-spacing: -.01em;
  text-align: center;
  max-width: 600px;
  padding: 2rem;
}

@media (max-width: 768px) {
  .swipe-reveal {
    margin: 1.5rem auto;
    width: calc(100% - 2 * var(--pad-x));
    height: auto;
    min-height: 0;
    overflow: hidden;
    background: none;
  }
  .swipe-reveal__slide--base,
  .swipe-reveal__slide:not(.swipe-reveal__slide--text[data-index="1"]) {
    display: none;
  }
  .swipe-reveal__slide--text[data-index="1"] {
    position: static;
    display: flex;
    clip-path: none;
    padding: 2rem var(--pad-x);
    background: transparent;
    border-radius: 1rem;
  }
  .swipe-reveal__slide--text[data-index="1"] p {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════
   PAGES LÉGALES — Mentions légales & CGV
   ═══════════════════════════════════════════════════ */

.legal-page {
  background: var(--cream);
  min-height: 100vh;
  padding: 8rem var(--pad-x) 6rem;
}

.legal-page__inner {
  max-width: 820px;
  margin: 0 auto;
}

.legal-page h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 2.5rem;
  letter-spacing: -.02em;
}

.legal-page__date {
  font-size: .85rem;
  color: var(--ink-40);
  margin-bottom: 3rem;
  font-style: italic;
}

.legal-page section {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
}

.legal-page section:last-child {
  border-bottom: none;
}

.legal-page h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--ocean);
  margin-bottom: 1rem;
  letter-spacing: -.01em;
}

.legal-page h3 {
  font-family: 'Raleway', sans-serif;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.2rem 0 .6rem;
}

.legal-page p,
.legal-page li {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.9;
  color: var(--ink-60);
}

.legal-page ul {
  padding-left: 1.5rem;
  margin: .8rem 0;
}

.legal-page ul li {
  margin-bottom: .4rem;
}

.legal-page a {
  color: var(--ocean);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-page a:hover {
  color: var(--gold);
}

.legal-page__back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Raleway', sans-serif;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ocean);
  text-decoration: none;
  margin-bottom: 2.5rem;
  opacity: .7;
  transition: opacity .3s;
}
.legal-page__back:hover { opacity: 1; color: var(--ocean); }

/* Nav active */
.nav__link--active {
  color: var(--gold) !important;
  opacity: 1 !important;
}