/* ==========================================================================
   Kodexa Solutions — feuille de style principale
   Mobile-first : les styles de base ciblent 360-400px, les media queries
   (min-width) enrichissent la mise en page vers le desktop.

   Sommaire
   1. Polices
   2. Tokens (couleurs, typo, espacements)  ← modifier la charte ici
   3. Base & reset
   4. Layout (container, sections)
   5. Composants (boutons, eyebrow, cartes, formulaires…)
   6. Sections (header, hero, services, réalisation, pourquoi, contact, footer)
   7. Le Fil Kodexa (SVG animé)
   8. Utilitaires
   9. Mouvement réduit
   ========================================================================== */


/* 1. POLICES ---------------------------------------------------------------
   Auto-hébergées, variables (un seul fichier par famille), sous-ensemble latin.
   Les polices « Fallback » imitent les métriques pour éviter le saut de texte (CLS). */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  size-adjust: 113.4%;
  ascent-override: 85%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}


/* 2. TOKENS ---------------------------------------------------------------- */

:root {
  /* Charte Kodexa (couleurs exactes) */
  --violet: #8547C3;
  --indigo: #3B3B8C;
  --orange: #FD8929;
  --magenta: #C65A81;
  --marine: #0F264A;
  --bg: #F6F5F4;

  /* Dérivés */
  --white: #fff;
  --surface: #fff;
  --bg-alt: #EDEBE9;
  --text: var(--marine);
  --text-muted: #46566F;
  --line: rgba(15, 38, 74, .1);
  --dark: #0B1D3A;
  --violet-soft: rgba(133, 71, 195, .14);
  --error: #B3261E;
  --whatsapp: #25D366;

  /* Dégradé signature : indigo → violet → magenta → orange */
  --grad: linear-gradient(100deg, var(--indigo) 0%, var(--violet) 38%, var(--magenta) 70%, var(--orange) 100%);
  /* Variante éclaircie pour garder le contraste sur fond sombre */
  --grad-on-dark: linear-gradient(100deg, #A98BF2 0%, #C58BE8 35%, #EE8AAE 68%, #FFA552 100%);

  /* Typographie */
  --font-title: "Montserrat", "Montserrat Fallback", system-ui, sans-serif;
  --font-text: "Inter", "Inter Fallback", system-ui, sans-serif;
  --fs-h1: clamp(2.3rem, 1.35rem + 4.3vw, 4.4rem);
  --fs-h2: clamp(1.85rem, 1.3rem + 2.4vw, 3.1rem);
  --fs-h3: 1.2rem;
  --fs-lead: clamp(1.05rem, 1rem + .3vw, 1.2rem);

  /* Espacements & formes */
  --header-h: 64px;
  --rail-space: 36px;          /* marge gauche réservée au Fil Kodexa */
  --gutter: 20px;
  --section-y: 76px;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(15, 38, 74, .06), 0 12px 32px -12px rgba(15, 38, 74, .18);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

@media (min-width: 900px) {
  :root {
    --header-h: 76px;
    --rail-space: 72px;
    --gutter: 40px;
    --section-y: 120px;
  }
}


/* 3. BASE & RESET ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip; /* filet de sécurité : jamais de scroll horizontal */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 900px) {
  body { font-size: 1.0625rem; }
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--violet); color: var(--white); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--marine);
  color: var(--white);
  font-weight: 600;
}
.skip-link:focus { top: 12px; }


/* 4. LAYOUT ---------------------------------------------------------------- */

.container {
  position: relative;
  width: 100%;
  max-width: calc(1200px + var(--rail-space) + var(--gutter));
  margin-inline: auto;
  padding-left: var(--rail-space);
  padding-right: var(--gutter);
}

.page { position: relative; }

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Le contenu passe au-dessus du Fil (z-index 1) */
.section > .container,
.hero__grid { z-index: 2; }

.section__head {
  max-width: 760px;
  margin-bottom: 40px;
}

.section__title {
  font-size: var(--fs-h2);
  margin-top: 12px;
}
.section__title--light { color: var(--white); }

.section__lead {
  margin-top: 16px;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

@media (min-width: 900px) {
  .section__head { margin-bottom: 64px; }
}


/* 5. COMPOSANTS ------------------------------------------------------------ */

/* — Texte en dégradé — */
.grad-text {
  background: none;
  color: var(--violet);
}

/* — Titres découpés en mots (animations/split.js) — */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.w__in { display: inline-block; }
/* Phrase colorée découpée : chaque mot hérite de la couleur pleine de .grad-text */
.grad-text.is-split .w__in { color: inherit; }

/* — Surtitre (eyebrow) : porte aussi les nœuds du Fil — */
.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet);
}
.eyebrow--light { color: #C9B3F5; }

/* — Boutons — */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--marine);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s, box-shadow .25s var(--ease-out), border-color .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { transition: transform .3s var(--ease-out); }
.btn:hover .icon:last-child { transform: translateX(3px); }

.btn--sm { min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: 14px 20px; font-size: 1rem; }
@media (min-width: 400px) {
  .btn--lg { padding-inline: 28px; font-size: 1.0625rem; }
}
.btn--block { width: 100%; }

/* Orange = action principale (texte marine pour le contraste AA) */
.btn--primary {
  --btn-bg: var(--orange);
  --btn-fg: var(--marine);
  box-shadow: 0 10px 24px -10px rgba(253, 137, 41, .7);
}
.btn--primary:hover {
  --btn-bg: #FF9B45;
  box-shadow: 0 14px 30px -10px rgba(253, 137, 41, .85);
}

.btn--ghost-light {
  --btn-bg: rgba(255, 255, 255, .06);
  --btn-fg: var(--white);
  border-color: rgba(255, 255, 255, .35);
}
.btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }

.btn--whatsapp {
  --btn-bg: var(--whatsapp);
  --btn-fg: #06301A;
}

/* — Liste à coches — */
.checklist { display: grid; gap: 10px; }
.checklist li {
  position: relative;
  padding-left: 28px;
  font-size: .9375rem;
  color: var(--text-muted);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--violet-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%238547C3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}


/* 6. SECTIONS -------------------------------------------------------------- */

/* ─── 6.1 Header ─── */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  background: var(--bg);   /* opaque : le logo (fond blanc) se fond dans ce fond clair */
  border-bottom: 1px solid transparent;
  transition: transform .35s var(--ease-out), border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(15, 38, 74, .4); }
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  /* le header n'a pas besoin du rail : marges symétriques */
  padding-left: var(--gutter);
}

.brand { display: block; flex: none; margin-right: auto; padding-block: 2px; }
/* Le logo a un fond blanc : « multiply » le fond dans le fond clair du site.
   → À remplacer par le PNG transparent quand il sera disponible. */
.brand__img {
  width: auto;
  height: 40px;
  mix-blend-mode: multiply;
}

.site-header__cta { display: none; }

/* Burger (visible uniquement si le JS est actif, l'espace est réservé pour éviter tout décalage) */
.burger {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  border: 0;
  background: none;
  cursor: pointer;
  visibility: hidden;
}
.js .burger { visibility: visible; }
.burger__bars,
.burger__bars::before,
.burger__bars::after {
  display: block;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--marine);
  transition: transform .3s var(--ease-out), opacity .2s;
}
.burger__bars { position: relative; }
.burger__bars::before,
.burger__bars::after { content: ""; position: absolute; left: 0; }
.burger__bars::before { top: -7px; }
.burger__bars::after { top: 7px; }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile : panneau sombre plein écran sous le header */
.nav__list {
  position: fixed;
  inset: var(--header-h) 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 32px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  background: var(--marine) radial-gradient(120% 60% at 100% 100%, rgba(133, 71, 195, .45), transparent 70%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s, transform .3s var(--ease-out), visibility 0s .3s;
  overflow-y: auto;
}
.nav__list.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s, transform .3s var(--ease-out);
}
.nav__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.nav__menu-extra { margin-top: auto; padding-top: 24px; }

/* Sans JS : les liens restent accessibles dans le flux du header */
html:not(.js) .nav__list { display: none; }

@media (min-width: 480px) {
  .site-header__cta { display: inline-flex; }
}

@media (min-width: 900px) {
  .brand__img { height: 46px; }
  .burger, .nav__menu-extra { display: none; }
  .nav__list,
  html:not(.js) .nav__list {
    position: static;
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;
  }
  .nav__link {
    position: relative;
    min-height: 44px;
    padding: 0 14px;
    font-size: .9375rem;
    color: var(--marine);
    border: 0;
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease-out);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="true"]::after { transform: scaleX(1); }
  .site-header__cta { margin-left: 12px; }
}

/* ─── 6.2 Hero ─── */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 44px) 0 116px;
  background: var(--marine) linear-gradient(160deg, #0F264A 0%, #1A1F5C 55%, #2A1F63 100%);
  color: var(--white);
}

.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Halos colorés : uniquement des transforms (animés par le GPU) */
.blob {
  position: absolute;
  width: 90vw;
  max-width: 820px;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .55;
  animation: blob-drift 18s ease-in-out infinite alternate;
}
.blob--violet  { top: -30%; right: -35%; background: radial-gradient(closest-side, rgba(133, 71, 195, .9), transparent); }
.blob--magenta { bottom: -45%; left: -30%; background: radial-gradient(closest-side, rgba(198, 90, 129, .55), transparent); animation-duration: 22s; animation-delay: -6s; }
.blob--orange  { bottom: -40%; right: -10%; width: 60vw; background: radial-gradient(closest-side, rgba(253, 137, 41, .35), transparent); animation-duration: 26s; animation-delay: -12s; }

@keyframes blob-drift {
  to { transform: translate3d(-6%, 8%, 0) scale(1.12); }
}

.hero__grid {
  position: relative;
  display: grid;
  align-items: center;
}

.hero__content { position: relative; z-index: 2; max-width: 680px; }

.hero__eyebrow { margin-bottom: 20px; }

.hero__title {
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.hero__title .grad-text { color: #A98BF2; }

/* Révélation du titre ligne par ligne — CSS pur pour ne pas retarder le LCP */
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line__in {
  display: block;
  animation: line-rise .95s var(--ease-out) both;
}
.line:nth-child(2) .line__in { animation-delay: .09s; }
.line:nth-child(3) .line__in { animation-delay: .18s; }

@keyframes line-rise {
  from { transform: translate3d(0, 105%, 0); }
}

/* « backwards » (et non « both ») : une fois l'entrée finie, l'animation CSS
   ne bloque plus les transforms appliqués par GSAP au scroll. */
.fade-in { animation: fade-up .8s var(--ease-out) backwards; animation-delay: .35s; }
.hero__ctas.fade-in { animation-delay: .45s; }
.hero__proofs.fade-in { animation-delay: .55s; }

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
}

.hero__lead {
  max-width: 560px;
  margin-top: 22px;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .82);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.hero__proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 32px;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .85);
}
.hero__proofs li { display: inline-flex; align-items: center; gap: 8px; }
.hero__proofs .icon { color: var(--orange); }

/* Visuel « K » 3D : en arrière-plan sur mobile (image), colonne dédiée sur desktop (WebGL) */
.hero__art {
  position: absolute;
  top: -8px;
  right: -76px;
  z-index: 1;
  width: 250px;
  aspect-ratio: 1;
  opacity: .42;
  pointer-events: none;
}
/* Halo lumineux derrière le K */
.hero__art::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(133, 71, 195, .55), rgba(198, 90, 129, .18) 60%, transparent);
}
.kmark-poster,
.kmark-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Entrée du poster : CSS pur, transform seulement (pas d'opacité → pas d'impact LCP) */
.kmark-poster { animation: k-in 1.4s var(--ease-out) both, k-float 6s ease-in-out 1.4s infinite alternate; }
@keyframes k-in { from { transform: translate3d(0, 24px, 0) scale(.9) rotate(-4deg); } }
@keyframes k-float { to { transform: translate3d(0, -10px, 0) rotate(1.5deg); } }
.kmark-canvas { opacity: 0; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  display: none;
  width: 28px;
  height: 46px;
  margin-left: -14px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 20px;
}
.hero__scroll-dot {
  display: block;
  width: 4px;
  height: 8px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: var(--white);
  animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}

@media (min-width: 560px) {
  .hero__ctas { flex-direction: row; flex-wrap: wrap; }
}

@media (min-width: 900px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: 150px;
  }
  .hero__grid { grid-template-columns: 1.2fr .8fr; gap: 40px; }
  .hero__art {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 500px;
    justify-self: end;
    opacity: 1;
    pointer-events: auto;
  }
  .hero__scroll { display: block; }
}

/* ─── 6.3 Services ─── */
/* Services : « feuille » à coins arrondis qui recouvre le bas du Hero */
.services {
  margin-top: -28px;
  border-radius: 28px 28px 0 0;
  background: var(--bg);
}
@media (min-width: 900px) {
  .services { margin-top: -48px; border-radius: 48px 48px 0 0; }
}

.cards {
  display: grid;
  gap: 16px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: box-shadow .35s var(--ease-out);
}
/* Bordure en dégradé qui s'allume au survol (technique du masque) */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.card:hover::before,
.card:focus-within::before { opacity: 1; }
.card:hover { box-shadow: 0 1px 2px rgba(15, 38, 74, .06), 0 24px 48px -16px rgba(133, 71, 195, .35); }

.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--violet-soft);
  color: var(--violet);
}
.card__icon .icon { width: 26px; height: 26px; }
.card__title { font-size: var(--fs-h3); }
.card__text { color: var(--text-muted); }
.card .checklist { margin-top: auto; padding-top: 6px; }

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1140px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
  .card { padding: 30px 24px; }
}

/* ─── 6.4 Réalisation (showcase) ─── */
.showcase {
  position: relative;
  z-index: 3;            /* passe au-dessus du Fil */
  padding-block: var(--section-y);
  background: var(--dark) radial-gradient(80% 60% at 0% 0%, rgba(59, 59, 140, .55), transparent 70%);
  color: var(--white);
  overflow-x: clip;      /* la piste large ne crée jamais de scroll horizontal */
}

.showcase__head { margin-bottom: 32px; }
.showcase__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .7);
}
.showcase__hint .icon { animation: nudge 1.6s ease-in-out infinite; }
.showcase__hint-desktop { display: none; }
@keyframes nudge { 50% { transform: translateX(5px); } }

/* Piste : swipe natif avec scroll-snap (mobile & desktop sans animation) */
.showcase__track {
  /* aligné sur le contenu du .container, même sur grand écran */
  --track-start: calc((100% - min(100%, 1200px + var(--rail-space) + var(--gutter))) / 2 + var(--rail-space));
  display: flex;
  gap: 16px;
  padding: 4px var(--gutter) 20px var(--track-start);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--track-start);
  scrollbar-width: none;
}
.showcase__track::-webkit-scrollbar { display: none; }
.showcase__track:focus-visible { outline-offset: -3px; }

.panel {
  flex: 0 0 min(86%, 420px);
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.panel--intro,
.panel--outro {
  justify-content: center;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}
.panel--outro { align-items: flex-start; background: linear-gradient(140deg, rgba(133, 71, 195, .35), rgba(198, 90, 129, .2)); }
.panel__kicker { font-family: var(--font-title); font-weight: 700; color: var(--orange); }
.panel__title { font-size: 1.45rem; }
.panel__text { color: rgba(255, 255, 255, .78); }
.panel__caption { font-size: .9375rem; color: rgba(255, 255, 255, .75); }
.panel__caption strong { display: block; font-family: var(--font-title); font-size: 1.05rem; color: var(--white); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: .875rem;
}

.showcase__progress { display: none; }

/* — Maquettes stylisées (à remplacer par de vraies captures) —
   Palette volontairement différente de Kodexa : c'est le site du client. */
.browser,
.phone {
  --c-ink: #1D2433;
  --c-accent: #D7263D;
  --c-soft: #F1F3F6;
  color: var(--c-ink);
  font-size: 12px;
  line-height: 1.3;
}
.browser {
  overflow: hidden;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: #E7E9EE;
}
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #C8CCD4; }
.browser__bar i:first-child { background: #FF6159; }
.browser__bar i:nth-child(2) { background: #FFBD2E; }
.browser__bar i:nth-child(3) { background: #28C941; }
.browser__url {
  flex: 1;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--white);
  color: #4B5260;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser__body { padding: 16px; min-height: 290px; }

.mock-title { font-weight: 800; font-size: 15px; margin-bottom: 10px; font-family: var(--font-title); }
.mock-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--c-accent); flex: none; }
.mock-line { height: 8px; border-radius: 4px; background: var(--c-soft); }
.mock-line--w40 { width: 40%; }
.mock-btn {
  display: block;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--white);
  font-weight: 700;
  text-align: center;
}

.mock-booking__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mock-steps { display: flex; gap: 10px; margin-bottom: 10px; color: #5B6370; font-weight: 600; font-size: 11px; }
.mock-steps .is-on { color: var(--c-ink); }
.mock-chips, .mock-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mock-chips span, .mock-slots span {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--c-soft);
  font-weight: 600;
}
.mock-chips .is-on, .mock-slots .is-on { background: var(--c-ink); color: var(--white); }
.mock-cal {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-bottom: 10px;
  text-align: center;
}
.mock-cal span { padding: 5px 0; border-radius: 6px; background: var(--c-soft); }
.mock-cal span:nth-child(-n+6) { background: none; color: #5B6370; font-weight: 700; }
.mock-cal .is-on { background: var(--c-accent); color: var(--white); font-weight: 700; }
.mock-cal .is-off { color: #5B6370; text-decoration: line-through; }

.mock-admin { display: grid; grid-template-columns: 92px 1fr; gap: 14px; }
.mock-admin__side { display: flex; flex-direction: column; gap: 6px; padding-right: 10px; border-right: 1px solid var(--c-soft); }
.mock-admin__side .mock-logo { margin-bottom: 8px; }
.mock-admin__side span:not(.mock-logo) { padding: 5px 8px; border-radius: 6px; color: #4B5260; font-weight: 600; }
.mock-admin__side span.is-on { background: var(--c-soft); color: var(--c-ink); }
.mock-rows { display: grid; gap: 6px; }
.mock-rows li {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--c-soft);
}
.mock-rows em { font-style: normal; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: #FDE8C8; color: #8A4B00; }
.mock-rows em.ok { background: #D7F5E2; color: #10633A; }

.panel--phone { align-items: center; }
.panel--phone .panel__caption { align-self: stretch; }
.phone {
  position: relative;
  width: 210px;
  padding: 10px;
  border-radius: 34px;
  background: #11141C;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.phone__notch { position: absolute; top: 14px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: #11141C; z-index: 1; }
.phone__body { display: flex; flex-direction: column; gap: 5px; min-height: 340px; padding: 40px 16px 18px; border-radius: 26px; background: var(--white); }
.mock-label { font-weight: 600; color: #4B5260; font-size: 11px; }
.mock-input { height: 28px; border-radius: 7px; border: 1.5px solid #E1E4EA; }
.mock-input--area { height: 58px; }

@media (min-width: 900px) {
  .panel { flex-basis: 440px; }
  .browser__body { min-height: 320px; }
}

/* Desktop + animations autorisées : la piste est pilotée par le scroll (classe posée par showcase.js) */
.showcase.is-scroll-driven { padding-block: 0; }
.showcase.is-scroll-driven .showcase__pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-block: calc(var(--header-h) + 24px) 40px;
}
.showcase.is-scroll-driven .showcase__track {
  overflow: visible;
  scroll-snap-type: none;
  width: max-content;
  gap: 40px;
  will-change: transform;
}
.showcase.is-scroll-driven .panel { flex-basis: clamp(400px, 34vw, 520px); }
.showcase.is-scroll-driven .showcase__hint-mobile { display: none; }
.showcase.is-scroll-driven .showcase__hint-desktop { display: inline; }
.showcase.is-scroll-driven .showcase__progress {
  display: block;
  margin-top: 28px;
}
.showcase__progress span {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-on-dark);
  transform: scaleX(0);
  transform-origin: left;
}

/* ─── 6.5 Pourquoi Kodexa ─── */
.pillars { display: grid; gap: 16px; }

.pillar {
  padding: 26px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.pillar__num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-title);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}
.pillar__num { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pillar__title { font-size: var(--fs-h3); margin-bottom: 8px; }
.pillar p { color: var(--text-muted); }

.pillar--accent {
  position: relative;
  overflow: hidden;
  background: var(--marine);
  border-color: transparent;
  color: var(--white);
}
.pillar--accent::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--grad);
}
.pillar--accent p { color: rgba(255, 255, 255, .8); }
.pillar--accent .pillar__num { background-image: var(--grad-on-dark); }

/* Frise verticale (mobile) — le Fil passe par chaque nœud */
.timeline {
  display: grid;
  gap: 28px;
  margin-top: 56px;
  counter-reset: step;
}
.timeline__step { position: relative; }
/* Les étapes se révèlent quand le Fil les atteint (classe posée par thread.js).
   .has-motion n'existe que si les animations sont actives : sans JS ou en
   mouvement réduit, tout reste visible. */
.has-motion .timeline__step > :not(.thread-node) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .6s var(--ease-out), transform .9s var(--ease-out);
}
.has-motion .timeline__step > p { transition-delay: .12s; }
.has-motion .timeline__step.is-reached > :not(.thread-node) { opacity: 1; transform: none; }
.timeline__step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.timeline__step p { color: var(--text-muted); font-size: .9375rem; }

@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .pillar { padding: 32px 28px; }
  /* Desktop : frise horizontale, le Fil la traverse de gauche à droite */
  .timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 var(--rail-space);
    margin-top: 88px;
    padding-top: 0;
  }
}

/* ─── 6.6 Contact ─── */
.contact {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  overflow-x: clip;   /* le formulaire arrive de la droite sans créer de scroll horizontal */
}
.contact__grid { display: grid; gap: 40px; }

.contact__channels { display: grid; gap: 12px; margin-top: 28px; }
.channel {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color .25s, transform .25s var(--ease-out);
}
.channel:hover { border-color: var(--violet); transform: translateY(-2px); }
.channel > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.channel strong { font-family: var(--font-title); }
.channel span span { color: var(--text-muted); overflow-wrap: anywhere; }
.channel__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--violet-soft);
  color: var(--violet);
  flex: none;
}
.channel--whatsapp .channel__icon { background: rgba(37, 211, 102, .16); color: #128C4A; }

.contact__zone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: .9375rem;
}

/* Formulaire */
.form {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  padding: 24px 20px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.form__row { display: grid; gap: 18px; }

.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .9375rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid #D3D7E0;
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 1rem;           /* 16px : évite le zoom auto sur iOS */
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select {
  appearance: none;
  padding-right: 42px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230F264A' stroke-width='2' stroke-linecap='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px var(--violet-soft);
}
.field [aria-invalid="true"] { border-color: var(--error); }
.field__error { min-height: 0; color: var(--error); font-size: .875rem; font-weight: 500; }
.field__error:empty { display: none; }

.field--check {
  grid-template-columns: 24px 1fr;
  align-items: start;
  column-gap: 12px;
}
.field--check input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: var(--violet);
}
.field--check label { font-weight: 400; color: var(--text-muted); }
.field--check .field__error { grid-column: 2; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__submit { margin-top: 4px; }
.form__submit.is-reached { box-shadow: 0 0 0 4px rgba(253, 137, 41, .25), 0 14px 34px -10px rgba(253, 137, 41, .9); }
.form__submit[disabled] { opacity: .7; cursor: progress; }
.form__note { font-size: .875rem; color: var(--text-muted); }

.form__status:empty { display: none; }
.form__status {
  padding: 16px;
  border-radius: var(--radius-sm);
  background: rgba(37, 211, 102, .12);
  border: 1px solid rgba(18, 140, 74, .3);
}
.form__status.is-error { background: rgba(179, 38, 30, .08); border-color: rgba(179, 38, 30, .3); }
.form__status a { font-weight: 700; color: var(--violet); }

@media (min-width: 640px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .form { padding: 36px 32px; }
}
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
}

/* ─── 6.7 Footer ─── */
.site-footer {
  position: relative;
  z-index: 2;
  padding-top: 56px;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}
.site-footer__inner { display: grid; gap: 32px; }
.site-footer__brand p { max-width: 380px; margin-top: 14px; color: var(--text-muted); font-size: .9375rem; }
.site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--marine);
  text-decoration: none;
  font-weight: 500;
}
.site-footer__nav a:hover { color: var(--violet); text-decoration: underline; }
.site-footer__bottom {
  margin-top: 32px;
  padding-block: 20px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--text-muted);
}

@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: 1.2fr 1fr; }
}

/* ─── 6.8 Bouton WhatsApp flottant ─── */
.fab-whatsapp {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #06301A;
  box-shadow: 0 10px 28px -6px rgba(6, 48, 26, .45);
  transition: transform .35s var(--ease-out), opacity .3s;
}
.fab-whatsapp .icon { width: 30px; height: 30px; }
.fab-whatsapp:hover { transform: scale(1.06); }
.fab-whatsapp.is-hidden { opacity: 0; transform: scale(.6); pointer-events: none; }


/* 7. LE FIL KODEXA --------------------------------------------------------- */

.thread {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.thread__track {
  fill: none;
  stroke: rgba(133, 71, 195, .18);
  stroke-width: 1.5;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}
.thread__line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.thread__tip {
  fill: var(--white);
  stroke: var(--orange);
  stroke-width: 3;
  opacity: 0;
}
/* Impulsion lumineuse qui remonte le fil (desktop) */
.thread__pulse {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(253, 137, 41, .9));
}
/* Halo qui respire autour de la pointe */
.thread__halo {
  fill: rgba(253, 137, 41, .35);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.thread.has-tip .thread__tip { opacity: 1; }
.thread.has-tip .thread__halo { opacity: 1; animation: halo 2s ease-out infinite; }
@keyframes halo {
  0% { transform: scale(.4); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Nœuds : placés dans la marge gauche (le rail), au centre de leur élément */
.thread-node {
  position: absolute;
  top: 50%;
  left: calc(var(--rail-space) / -2);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid rgba(133, 71, 195, .35);
  transition: background-color .4s, border-color .4s, box-shadow .4s, transform .4s var(--ease-out);
}
.thread-node::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--violet);
  opacity: 0;
  pointer-events: none;
}
/* Onde émise quand le Fil atteint le nœud */
.thread-node.is-lit::after { animation: node-ripple 1.2s var(--ease-out); }
.hero .thread-node::after { border-color: #C9B3F5; }
@keyframes node-ripple {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(3.4); opacity: 0; }
}
.thread-node.is-lit {
  background: var(--violet);
  border-color: var(--violet);
  box-shadow: 0 0 0 6px rgba(133, 71, 195, .16);
  transform: scale(1.1);
}
.hero .thread-node { background: var(--marine); border-color: rgba(201, 179, 245, .5); }
.hero .thread-node.is-lit { background: #C9B3F5; border-color: #C9B3F5; box-shadow: 0 0 0 6px rgba(201, 179, 245, .2); }

.thread-node--step { top: .7em; }
/* Nœud final : à gauche du bouton d'envoi (mobile uniquement, le formulaire est sous le rail) */
/* décalage = rayon du rail + padding du formulaire + bordure du bouton */
.thread-node--end { left: calc(var(--rail-space) / -2 - 20px - 1.5px); }
@media (min-width: 640px) {
  .thread-node--end { left: calc(var(--rail-space) / -2 - 32px - 1.5px); }
}
@media (min-width: 900px) {
  .thread-node--end { display: none; }
}


/* 8. UTILITAIRES ----------------------------------------------------------- */

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Bloque le scroll de la page quand le menu mobile est ouvert */
.no-scroll { overflow: hidden; }


/* 9. MOUVEMENT RÉDUIT -------------------------------------------------------
   Respect de prefers-reduced-motion : tout est visible immédiatement.
   (Le JS désactive aussi les animations GSAP dans ce cas.) */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .15s !important;
  }
  .blob { animation: none; }
}


/* 10. PAGES SECONDAIRES (mentions légales, confidentialité, 404) ---------- */

.legal-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.legal-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  padding-left: var(--gutter);
}
.legal {
  max-width: 820px;
  padding-block: 56px 88px;
}
.legal h1 { font-size: var(--fs-h2); margin-bottom: 12px; }
.legal h2 { font-size: 1.3rem; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--text-muted); }
.legal p + p { margin-top: 12px; }
.legal ul { display: grid; gap: 6px; margin-top: 8px; padding-left: 20px; list-style: disc; }
.legal a { color: var(--violet); font-weight: 600; }
.legal .updated { font-size: .9375rem; }

/* Champ à compléter : bien visible pour ne pas l'oublier avant la mise en ligne */
.todo {
  padding: 1px 6px;
  border-radius: 4px;
  background: #FFE7CC;
  color: #7A3A00;
  font-weight: 600;
}

.notfound {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding-block: 64px;
  text-align: center;
}
.notfound__code { font-family: var(--font-title); font-size: clamp(5rem, 20vw, 9rem); font-weight: 800; line-height: 1; }
.notfound p { margin: 12px 0 28px; color: var(--text-muted); }