@import url("../assets/fonts/fonts.css");

/* ==========================================================================
   AKTA Partners — landing page
   Tokens : couleurs du guide de marque, échelle typo 1.333, grille 8 px
   ========================================================================== */
:root {
  color-scheme: light;

  /* Marque */
  --terra: #aa5a48;
  --terra-ink: #8f4636; /* terra assombri pour le petit texte (AA sur fonds clairs) */
  --sunny: #deb040;
  --forest: #155a49;
  --verde: #a0bca2;
  --beige: #f0e5cd;
  --limon: #f0e5b1;
  --tea: #ede8cc;
  --latte: #f5ede4;
  --ink: #1f1b18;
  --ink-soft: #4a423c;
  --paper: #fbf7f0;

  /* Typo */
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Crimson Text", Georgia, "Times New Roman", serif;
  --fs-xs: 0.8125rem;
  --fs-0: 1rem;
  --fs-1: 1.3125rem;
  --fs-4: clamp(1.75rem, 1rem + 2.4vw, 2.375rem);
  --fs-5: clamp(2.125rem, 1rem + 3.6vw, 3.125rem);
  --fs-6: clamp(2.75rem, 1rem + 6vw, 4.1875rem);

  /* Espacement (grille 8) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --section: clamp(64px, 6vw + 32px, 128px);
  --gutter: clamp(24px, 4vw, 48px);
  --maxw: 1240px;
  --nav-h: 72px;
  --edge: max(var(--gutter), calc((100% - var(--maxw)) / 2)); /* bord droit du conteneur (menu) */

  /* Formes */
  --r-1: 16px;
  --r-2: 32px;
  --r-3: 96px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-0) / 1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sunny); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: var(--s-3); top: -80px; z-index: 100; background: var(--forest); color: var(--paper); padding: var(--s-2) var(--s-3); border-radius: var(--r-1); }
.skip:focus { top: var(--s-3); }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border-radius: 999px; border: 2px solid transparent;
  font: 600 var(--fs-0) / 1 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: transform 0.35s var(--ease-out), background-color 0.25s, color 0.25s, box-shadow 0.35s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--sunny); color: var(--ink); box-shadow: 0 8px 24px -8px rgb(222 176 64 / 0.7); }
.btn--primary:hover { background: #e6bd57; box-shadow: 0 12px 28px -8px rgb(222 176 64 / 0.85); }
.btn--terra { background: var(--terra); color: var(--paper); box-shadow: 0 8px 24px -8px rgb(170 90 72 / 0.6); }
.btn--terra:hover { background: #b46553; }
.btn--ghost { border-color: rgb(251 247 240 / 0.6); color: var(--paper); }
.btn--ghost:hover { background: rgb(251 247 240 / 0.12); border-color: var(--paper); }

/* ---------- Navigation (logo + contact) ---------- */
.nav { position: absolute; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); }
.nav__bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.nav__logo { display: block; width: 168px; }
.nav__logo img { width: 100%; }
.nav__cta { min-height: 48px; padding: 0 var(--s-4); font-size: 0.9375rem; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--forest); color: var(--paper); isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(31 27 24 / 0.82) 0%, rgb(31 27 24 / 0.45) 38%, rgb(31 27 24 / 0.18) 70%, rgb(31 27 24 / 0.38) 100%); }
.hero__content { padding-block: calc(var(--nav-h) + var(--s-7)) var(--s-8); display: grid; gap: var(--s-5); max-width: 760px; }
.hero__logo { width: clamp(260px, 46vw, 560px); }
/* ---------- Hero : diaporama rotatif + motif ---------- */
.hero__slides { position: absolute; inset: -6% 0; height: 112%; z-index: -2; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.hero__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity 2.6s cubic-bezier(0.4, 0, 0.2, 1); }
.hero__slide.is-leaving { opacity: 1; z-index: 1; transition: none; }
.hero__slide.is-active { opacity: 1; z-index: 2; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transform-origin: var(--ox, 60%) var(--oy, 50%); }
.hero__slide.is-active img, .hero__slide.is-leaving img { animation: kenburns 12s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
.hero__slide:nth-child(2) { --ox: 30%; --oy: 40%; }
.hero__slide:nth-child(3) { --ox: 70%; --oy: 60%; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.hero.is-paused .hero__slide img { animation-play-state: paused; }

.hero__pattern { position: absolute; z-index: 0; right: var(--edge); top: 50%; height: min(66vh, 720px); width: auto; transform: translateY(-46%); pointer-events: none; filter: drop-shadow(0 8px 32px rgb(31 27 24 / 0.25)); transition: opacity 0.6s var(--ease-io); overflow: visible; }
.hero__pattern.is-out { opacity: 0; }
.hero__pattern .tile { opacity: var(--o); }
.hero__pattern path { fill: var(--paper); stroke: var(--paper); stroke-width: 1.3; stroke-linejoin: round; stroke-opacity: 0; stroke-dasharray: 1 1; }
.hero__pattern.is-draw path { animation: trace 2.4s cubic-bezier(0.65, 0, 0.35, 1) both; animation-delay: calc(0.4s + var(--k, 0) * 0.16s); }
@keyframes trace {
  0% { stroke-dashoffset: 1; stroke-opacity: 1; fill-opacity: 0; }
  62% { stroke-dashoffset: 0; stroke-opacity: 1; fill-opacity: 0; }
  100% { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; }
}

.hero__controls { position: absolute; z-index: 3; right: var(--edge); bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); }
.hero__pause { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgb(251 247 240 / 0.55); background: rgb(31 27 24 / 0.2); color: var(--paper); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); transition: background-color 0.25s, border-color 0.25s, transform 0.35s var(--ease-out); }
.hero__pause:hover { background: rgb(251 247 240 / 0.18); border-color: var(--paper); transform: scale(1.06); }
.hero__pause svg { width: 16px; height: 16px; fill: currentColor; }
.hero__pause .i-play { display: none; }
.hero__pause[aria-pressed="true"] .i-play { display: block; }
.hero__pause[aria-pressed="true"] .i-pause { display: none; }
.hero__dots { display: flex; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.dot { position: relative; width: 56px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dot span { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgb(251 247 240 / 0.38); overflow: hidden; }
.dot span::after { content: ""; position: absolute; inset: 0; background: var(--sunny); transform: scaleX(0); transform-origin: left; }
.dot.is-active span::after { animation: fill var(--dur, 7s) linear forwards; }
.dot.is-done span::after { transform: scaleX(1); }
.hero.is-paused .dot.is-active span::after { animation-play-state: paused; }
.hero.is-static .dot.is-active span::after { animation: none; transform: scaleX(1); }
@keyframes fill { to { transform: scaleX(1); } }

.hero__tag { font-size: clamp(1.3125rem, 1rem + 1vw, 1.75rem); line-height: 1.4; font-weight: 400; max-width: 28ch; }
.hero__tag strong { font-weight: 700; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__actions .btn { min-height: 64px; padding: 0 var(--s-6); font-size: 1.1875rem; gap: 12px; }
.hero__actions .btn svg { width: 20px; height: 20px; }
.hero__actions { align-items: center; column-gap: var(--s-5); }
.hero__mail { color: var(--paper); font-size: 1.125rem; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; padding: var(--s-2) 0; border-bottom: 1px solid rgb(251 247 240 / 0.5); transition: border-color 0.3s, color 0.3s; }
.hero__mail:hover { color: var(--sunny); border-color: var(--sunny); }
.hero__reveal { opacity: 0; transform: translateY(24px); animation: rise 1s var(--ease-out) forwards; animation-delay: calc(0.25s + var(--i, 0) * 0.14s); }
@keyframes rise { to { opacity: 1; transform: none; } }


/* ---------- Intro animée : tuiles terracotta -> photo -> hero ---------- */
:root { --sand: #eadfd2; --band-t: 36.64%; --band-b: 63.4%; --gap-l: 75.85%; --gap-r: 76.85%; --gap-l2: 60.25%; --ir: max(32px, 5vw); }
.intro { position: fixed; inset: 0; z-index: 200; overflow: hidden; display: none; background: var(--sand); }
.intro-on .intro { display: block; }
.intro.is-out { opacity: 0; transition: opacity 0.55s var(--ease-io); pointer-events: none; }
.intro__photo { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; transform: scale(1.12); transform-origin: 60% 50%; }
.intro__bg { position: absolute; inset: 0; background: var(--terra); transition: background-color 1s var(--ease-io), opacity 0.8s var(--ease-io); }
.intro.is-fill .intro__bg { background: var(--sand); }
.intro.is-step2 .intro__bg { opacity: 0; }
.intro__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; fill: none; stroke: var(--sand); stroke-width: 1.5; stroke-linecap: round; transition: opacity 0.9s var(--ease-io); }
.intro__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--k) * 0.13s); }
.intro.is-lines .intro__lines path { stroke-dashoffset: 0; }
.intro.is-fill .intro__lines { opacity: 0; }
.intro__tile { position: absolute; background: var(--terra); transition: background-color 0.75s var(--ease-io), width 1s var(--ease-io), transform 1.1s var(--ease-io); will-change: transform; }
.intro.is-step2 .intro__tile { background: var(--sand); }
.intro__tile--tl { left: 0; top: 0; width: var(--gap-l); height: var(--band-t); border-bottom-right-radius: var(--ir); }
.intro__tile--tr { left: var(--gap-r); right: 0; top: 0; height: var(--band-t); border-bottom-left-radius: var(--ir); }
.intro__tile--bl { left: 0; top: var(--band-b); bottom: 0; width: var(--gap-l); border-top-right-radius: var(--ir); }
.intro__tile--br { left: var(--gap-r); right: 0; top: var(--band-b); bottom: 0; border-top-left-radius: var(--ir); }
.intro.is-step2 .intro__tile--tl, .intro.is-step2 .intro__tile--bl { width: var(--gap-l2); }
.intro.is-step3 .intro__tile--tl { transform: translate(-110%, -110%); }
.intro.is-step3 .intro__tile--tr { transform: translate(110%, -110%); transition-delay: 0.05s; }
.intro.is-step3 .intro__tile--bl { transform: translate(-110%, 110%); transition-delay: 0.1s; }
.intro.is-step3 .intro__tile--br { transform: translate(110%, 110%); transition-delay: 0.15s; }
.intro__logo { position: absolute; z-index: 3; left: 50%; top: 50%; width: clamp(260px, 45vw, 900px); height: auto; opacity: 0; --dx: 0px; --dy: 0px; --s: 1.04;
  clip-path: inset(-10% 100% -10% 0); filter: blur(6px);
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(var(--s));
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), clip-path 1.5s cubic-bezier(0.77, 0, 0.18, 1), filter 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.7s cubic-bezier(0.22, 1, 0.36, 1); }
.intro.is-logo .intro__logo { opacity: 1; clip-path: inset(-10% -2% -10% 0); filter: blur(0); --s: 1; }
.intro.is-step2 .intro__logo { --dx: calc(17.3vw - 50vw); --dy: calc(88.8vh - 50vh); --s: 0.54; transition: transform 1.1s var(--ease-io); }
.intro.is-step3 .intro__logo { opacity: 0; transition: opacity 0.35s; }
.intro__skip { position: absolute; z-index: 5; right: var(--s-4); bottom: var(--s-4); min-height: 40px; padding: 0 var(--s-3); border: 0; border-radius: 999px; background: rgb(31 27 24 / 0.6); color: var(--paper); font: 500 0.8125rem / 1 var(--font-sans); cursor: pointer; opacity: 0; animation: fadeIn 0.6s 1s forwards; }
.intro__skip:hover { background: rgb(31 27 24 / 0.8); }
@keyframes fadeIn { to { opacity: 1; } }
/* le hero attend la fin de l'intro pour démarrer ses animations */
.intro-on .hero__reveal, .intro-on .hero__slide img, .intro-on .hero__pattern path, .intro-on .dot span::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .hero__reveal { opacity: 1 !important; transform: none !important; }
  .hero__slide img { animation: none !important; transform: none !important; }
  .hero__pattern path { animation: none !important; }
  .intro { display: none !important; }
}
@media (max-width: 767px) {
  .hero__pattern { display: none; }
  .hero__controls { bottom: var(--s-4); }
  .hero__actions .btn { min-height: 56px; padding: 0 var(--s-5); }
}