/* ==========================================================================
   AXOLOTL — home.css : Accueil V2 Haute Identité Visuelle & Haute Conversion (50/50)
   Contrastes mesurés WCAG AA, animations ultra-modernes, sans bloquer le scroll
   ========================================================================== */

/* ---------- 1. HÉROS DIRECT & ÉPOUSTOUFLANT ---------- */
.h2-hero {
  position: relative;
  min-height: 90vh;
  min-height: 90svh;
  display: flex;
  align-items: center;
  padding: 130px 0 70px;
  background: radial-gradient(circle at 85% 20%, rgba(255, 111, 168, 0.18), transparent 45%),
              radial-gradient(circle at 10% 80%, rgba(244, 197, 66, 0.12), transparent 40%),
              var(--bg);
  overflow: hidden;
}

.h2-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}

.h2-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.h2-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 111, 168, 0.18);
  border: 1.5px solid rgba(255, 111, 168, 0.45);
  color: #9C1542;
  font-weight: 800;
  font-size: 0.88rem;
  width: fit-content;
  box-shadow: 0 4px 14px rgba(255, 111, 168, 0.16);
}

.h2-badge i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 10px var(--rose);
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

.h2-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 76;
  font-size: clamp(3rem, 6.8vw, 6.4rem);
  line-height: 0.93;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.h2-title em {
  color: var(--framboise);
  font-style: normal;
  position: relative;
  display: inline-block;
}

.h2-title em::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.08em;
  width: 100%;
  height: 0.18em;
  background: rgba(255, 111, 168, 0.35);
  border-radius: 4px;
  z-index: -1;
  transform: rotate(-1deg);
}

.h2-lead {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 48ch;
}

.h2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

.h2-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-top: 18px;
  border-top: 1.5px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 700;
}

.h2-pills span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.h2-pills span::before {
  content: "✓";
  color: #fff;
  background: var(--framboise);
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 900;
}

/* Carte interactive / visuel signature héros (3D + Verre) */
.h2-hero-card {
  position: relative;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  box-shadow: 0 30px 70px rgba(27, 18, 51, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.8);
  border: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: transform 0.15s ease-out, box-shadow 0.3s;
  transform-style: preserve-3d;
}

.h2-hero-card:hover {
  box-shadow: 0 36px 80px rgba(27, 18, 51, 0.16);
}

.h2-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 16px;
}

.h2-card-head span {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.h2-card-head small {
  font-weight: 800;
  color: #9C1542;
  background: rgba(255, 111, 168, 0.22);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  transition: transform 0.25s, background 0.25s;
  cursor: pointer;
}

.h2-card-head small:hover {
  transform: scale(1.06);
  background: rgba(255, 111, 168, 0.35);
}

/* Mascotte flottante vivante */
.h2-mascot-float {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255, 196, 218, 0.4), rgba(255, 111, 168, 0.18));
  border-radius: 20px;
  border: 1.5px solid rgba(255, 111, 168, 0.35);
}

.h2-mascot-float svg {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  animation: axoFloat 3.8s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(255, 111, 168, 0.3));
}

@keyframes axoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(2.5deg); }
}

.h2-card-body p {
  font-size: 1rem;
  line-height: 1.48;
  color: var(--ink);
  margin-bottom: 20px;
}

.h2-card-diag {
  background: linear-gradient(180deg, #FFFFFF, #FFF7FA);
  border: 1.5px dashed var(--rose);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}

.h2-card-diag:hover {
  transform: translateY(-3px);
  border-color: var(--framboise);
  box-shadow: 0 10px 24px rgba(255, 111, 168, 0.15);
}

.h2-card-diag b {
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--ink);
}

.h2-card-diag p {
  font-size: 0.92rem;
  margin: 0;
  color: var(--muted);
}

.h2-switch-v1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--framboise);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: gap 0.25s;
}

.h2-switch-v1:hover {
  gap: 12px;
}

/* ---------- 2. TICKER RUBAN AUDACIEUX ---------- */
.ticker {
  background: var(--ink);
  color: #F6F0F2;
  padding: 22px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ticker-track {
  display: flex;
  gap: 52px;
  width: max-content;
  animation: tick 42s linear infinite;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.ticker-track i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  outline: 2px solid rgba(246, 240, 242, 0.4);
  box-shadow: 0 0 12px currentColor;
}

/* ---------- 3. GRILLE DES 6 SERVICES EN CARTES COLORÉES HAUTE VIBRANCE ---------- */
.h2-services {
  padding: 90px 0;
  background: #fff;
  border-bottom: 1.5px solid var(--line);
}

.h2-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.h2-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 26px;
  padding: 32px 28px;
  background: var(--sc-bg, #F6F0F2);
  color: var(--sc-fg, #1B1233);
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
  overflow: hidden;
}

/* Spotlight interactif au survol */
.h2-svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 260px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.32), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

.h2-svc-card:hover::before {
  opacity: 1;
}

.h2-svc-card:hover,
.h2-svc-card:focus-visible {
  transform: translateY(-9px) scale(1.015);
  box-shadow: 0 28px 50px rgba(27, 18, 51, 0.18);
  border-color: currentColor;
}

.h2-svc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.h2-svc-part {
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-fg);
}

.h2-svc-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sc-c);
  border: 2.5px solid currentColor;
  box-shadow: 0 0 12px var(--sc-c);
}

.h2-svc-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 78;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.h2-svc-desc {
  font-size: 0.96rem;
  line-height: 1.48;
  color: var(--sc-fg);
  margin-bottom: 26px;
}

.h2-svc-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  margin-top: auto;
  transition: gap 0.3s;
}

.h2-svc-card:hover .h2-svc-link {
  gap: 16px;
}

/* Couleurs spécifiques par carte */
.h2-card-branding { --sc-bg: #F4C542; --sc-fg: #241A00; --sc-c: #F4C542; }
.h2-card-web { --sc-bg: #C0703A; --sc-fg: #1E0E04; --sc-c: #C0703A; }
.h2-card-social { --sc-bg: #1C1C24; --sc-fg: #EDEDF2; --sc-c: #EDEDF2; }
.h2-card-photo { --sc-bg: #B9A6D9; --sc-fg: #1D1430; --sc-c: #B9A6D9; }
.h2-card-event { --sc-bg: #0D0F0C; --sc-fg: #7CFF6B; --sc-c: #7CFF6B; }
.h2-card-visibilite { --sc-bg: #5E6340; --sc-fg: #EEF0DD; --sc-c: #EEF0DD; }

/* ---------- 5. SECTION FAST TRACK (CONVERSION & DESIGN 360°) ---------- */
.h2-fast-track {
  padding: 90px 0;
}

.h2-ft-box {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  background: var(--ink);
  color: #F6F0F2;
  border-radius: 36px;
  padding: clamp(36px, 6vw, 64px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 36px 80px rgba(27, 18, 51, 0.35);
}

.h2-ft-box::after {
  content: "360°";
  position: absolute;
  right: -24px;
  bottom: -46px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(7rem, 18vw, 17rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(246, 240, 242, 0.09);
  pointer-events: none;
}

.h2-ft-copy h2 {
  font-size: clamp(2.6rem, 4.8vw, 4.2rem);
  line-height: 0.95;
  margin-bottom: 16px;
}

.h2-ft-copy h2 em {
  color: var(--rose);
  font-style: normal;
}

.h2-ft-copy p {
  color: rgba(246, 240, 242, 0.82);
  font-size: 1.1rem;
  max-width: 44ch;
  margin-bottom: 28px;
}

.h2-ft-choices {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.h2-choice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 20px 24px;
  text-decoration: none;
  color: #fff;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}

.h2-choice-card:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--rose);
  transform: translateX(8px);
}

.h2-choice-card b {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 3px;
}

.h2-choice-card span {
  font-size: 0.88rem;
  opacity: 0.78;
}

.h2-choice-card .arr {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--rose);
  transition: transform 0.25s;
}

.h2-choice-card:hover .arr {
  transform: translateX(4px);
}

/* ---------- 6. RÉALISATIONS DIRECTES ---------- */
.h2-works {
  padding: 90px 0;
  background: #fff;
  border-top: 1.5px solid var(--line);
}

.h2-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
}

.h2-work-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.35s var(--ease);
}

.h2-work-item:hover {
  transform: translateY(-6px);
}

.h2-work-img {
  aspect-ratio: 4/3;
  border-radius: 22px;
  overflow: hidden;
  background: #eee;
  box-shadow: 0 16px 36px rgba(27, 18, 51, 0.12);
  border: 1px solid var(--line);
}

.h2-work-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.h2-work-item:hover .h2-work-img img {
  transform: scale(1.06);
}

.h2-work-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.h2-work-meta h3 {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.h2-work-meta span {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--framboise);
}

.h2-work-item p {
  font-size: 0.94rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ---------- 7. MINI-FORMULAIRE DE CONTACT EN BAS DE PAGE (FAST CONVERT) ---------- */
.h2-contact-band {

  background: var(--albinos, #FBF4F1);
  border-radius: 36px;
  margin: 0 clamp(8px, 1.5vw, 20px) 40px;
  padding: clamp(40px, 6vw, 70px) 0;
  border: 1px solid rgba(27, 18, 51, 0.08);
}

.h2-ct-in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.h2-ct-copy h2 {
  font-size: clamp(2.6rem, 5.4vw, 4.8rem);
  line-height: 0.94;
}

.h2-ct-copy h2 em {
  color: var(--rouge, #D7261E);
}

.h2-ct-form {
  display: grid;
  gap: 20px;
  background: #fff;
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 24px 50px rgba(27, 18, 51, 0.1);
  border: 1px solid var(--line);
}

.h2-ct-form .q {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .h2-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .h2-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .h2-ft-box { grid-template-columns: 1fr; }
  .h2-works-grid { grid-template-columns: repeat(2, 1fr); }
  .h2-ct-in { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .h2-svc-grid { grid-template-columns: 1fr; }
  .h2-works-grid { grid-template-columns: 1fr; }
  .h2-hero { min-height: auto; padding: 110px 0 50px; }
  .h2-hero-card { padding: 26px 20px; }
  .h2-contact-band { border-radius: 24px; margin: 0 8px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .h2-mascot-float svg, .h2-bg-ring { animation: none; }
}

/* ---------- 8. ANIMATIONS D'ORIGINE REPRISES (sobres) ---------- */
/* Soulignement de « De la tête à la queue. » qui se trace à l'arrivée */
@keyframes h2Uline { from { transform: scaleX(0) rotate(-1deg); } to { transform: scaleX(1) rotate(-1deg); } }
.js .h2-title em::after { transform-origin: left center; animation: h2Uline 0.9s 0.9s var(--ease) both; }

/* Les cartes de service se révèlent en cascade, comme les morphes de la V1 */
.js .h2-svc-grid.rv { opacity: 1; transform: none; }
.js .h2-svc-grid.rv .h2-svc-card { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s; }
.js .h2-svc-grid.rv.in .h2-svc-card { opacity: 1; transform: none; }
.js .h2-svc-grid.rv.in .h2-svc-card:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s, 0s; }
.js .h2-svc-grid.rv.in .h2-svc-card:nth-child(3) { transition-delay: 0.16s, 0.16s, 0s, 0s; }
.js .h2-svc-grid.rv.in .h2-svc-card:nth-child(4) { transition-delay: 0.24s, 0.24s, 0s, 0s; }
.js .h2-svc-grid.rv.in .h2-svc-card:nth-child(5) { transition-delay: 0.32s, 0.32s, 0s, 0s; }
.js .h2-svc-grid.rv.in .h2-svc-card:nth-child(6) { transition-delay: 0.4s, 0.4s, 0s, 0s; }
.js .h2-svc-grid.rv.in .h2-svc-card:hover,
.js .h2-svc-grid.rv.in .h2-svc-card:focus-visible { transform: translateY(-9px) scale(1.015); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .js .h2-title em::after { animation: none; }
  .js .h2-svc-grid.rv .h2-svc-card { opacity: 1; transform: none; transition: none; }
}

/* ---------- 9. FOND DU HÉROS : papier + disque rose + roue des morphes (imprimé, pas numérique) ---------- */
.h2-hero { background: var(--bg); }
.h2-hero::after { /* grain de papier */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .07 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.h2-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.h2-bg-disc { position: absolute; width: clamp(340px, 44vw, 700px); aspect-ratio: 1; border-radius: 50%; background: var(--rose); right: -7vw; top: -9vw; }
.h2-bg-ring { --s: clamp(340px, 44vw, 700px); position: absolute; width: var(--s); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--ink); right: -3vw; top: -4vw; animation: h2Spin 120s linear infinite; }
.h2-bg-ring i { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--d); border: 2px solid var(--ink); transform: rotate(var(--a)) translateY(calc(var(--s) * -.5)); }
@keyframes h2Spin { to { transform: rotate(360deg); } }
@media (max-width: 1080px) { .h2-bg-disc, .h2-bg-ring { --s: 72vw; width: 72vw; right: -26vw; top: auto; bottom: 4vw; } .h2-bg-ring { bottom: 0; right: -22vw; } }

/* ---------- 10. CARTE DU HÉROS : feuilles empilées, immobile (seules les feuilles et l'ombre réagissent) ---------- */
.h2-hero-card { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; transform-style: flat; border: 2px solid var(--ink); border-radius: 28px;
  box-shadow: 0 1px 1px rgba(27,18,51,.08), 0 6px 12px rgba(27,18,51,.08), 0 22px 40px -8px rgba(27,18,51,.22); transition: box-shadow .5s var(--ease); }
.h2-hero-card:hover { box-shadow: 0 1px 1px rgba(27,18,51,.08), 0 10px 18px rgba(27,18,51,.1), 0 32px 56px -8px rgba(27,18,51,.28); }
.h2-hero-card::before, .h2-hero-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 28px; border: 2px solid var(--ink); transition: transform .6s var(--ease); }
.h2-hero-card::before { background: #F4C542; transform: rotate(-3deg); }
.h2-hero-card::after { background: #B9A6D9; transform: rotate(2.6deg); }
.h2-hero-card:hover::before { transform: rotate(-5deg) translate(-6px, 2px); }
.h2-hero-card:hover::after { transform: rotate(4.4deg) translate(6px, 2px); }
.h2-card-head { border-bottom: 2px solid var(--ink); }
.h2-mascot-float { background: var(--rose); border: 2px solid var(--ink); }
.h2-mascot-float svg { filter: none; }
.h2-card-diag { background: #FBF4F1; border: 2px dashed var(--ink); }
.h2-card-diag:hover { transform: none; box-shadow: none; border-color: var(--framboise); }

/* ---------- 11. DE LA TÊTE À LA QUEUE : panneaux qui s'ouvrent ---------- */
.h2-anat { padding: 90px 0; background: #fff; border-bottom: 1.5px solid var(--line); }
.h2-pns { display: flex; gap: 12px; height: clamp(440px, 56vh, 560px); margin-top: 44px; }
.h2-pn { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 26px; background: var(--pc); color: #fff; text-decoration: none; border: 2px solid var(--ink); transition: flex-grow .7s var(--ease); }
.h2-pn.on { flex-grow: 4.2; }
.h2-pn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.h2-pn.on img { transform: scale(1.04); }
.h2-pn::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgba(20,12,40,.82)); }
.h2-pn::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--pc); mix-blend-mode: multiply; opacity: .35; transition: opacity .6s; }
.h2-pn.on::after { opacity: 0; }
.h2-pn-v { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 76; font-size: 1.7rem; writing-mode: vertical-rl; transform: rotate(180deg); transition: opacity .3s; white-space: nowrap; }
.h2-pn-v i { font-style: normal; font-size: .9rem; background: var(--pc); color: var(--pf); border-radius: 999px; padding: 4px 8px; writing-mode: horizontal-tb; transform: rotate(180deg); }
.h2-pn.on .h2-pn-v { opacity: 0; }
.h2-pn-open { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 26px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .5s var(--ease); pointer-events: none; }
.h2-pn.on .h2-pn-open { opacity: 1; transform: none; transition-delay: .25s; pointer-events: auto; }
.h2-pn-open small { align-self: flex-start; background: var(--pc); color: var(--pf); font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.h2-pn-open b { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 74; font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: .92; letter-spacing: -.02em; }
.h2-pn-open > span { max-width: 40ch; font-size: 1rem; line-height: 1.45; }
.h2-pn-open em { font-style: normal; font-weight: 800; align-self: flex-start; background: #fff; color: var(--ink); padding: 10px 18px; border-radius: 999px; transition: transform .3s var(--ease); }
.h2-pn:hover .h2-pn-open em { transform: translateX(4px); }
.h2-pn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 760px) {
  .h2-pns { flex-direction: column; height: auto; }
  .h2-pn { flex: none; height: 76px; transition: height .6s var(--ease); }
  .h2-pn.on { height: 360px; }
  .h2-pn-v { writing-mode: horizontal-tb; transform: none; flex-direction: row; left: 18px; right: auto; bottom: 22px; align-items: center; }
  .h2-pn-v i { transform: none; }
  .h2-pn-open { left: 18px; right: 18px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .h2-pn, .h2-pn img, .h2-hero-card::before, .h2-hero-card::after { transition: none; } }

/* ==========================================================================
   12. SCROLL VIVANT : apparitions floutées « à la Apple », parallaxe douce, verre dépoli
   Tout est désactivé en mouvement réduit.
   ========================================================================== */
/* Apparition : le bloc monte et se précise (flou -> net) */
.js .rv { filter: blur(12px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.js .rv.in { filter: none; }
/* Les grilles se révèlent élément par élément, pas en bloc */
.js .h2-svc-grid.rv, .js .h2-pns.rv { filter: none; }
.js .h2-svc-grid.rv .h2-svc-card { filter: blur(10px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.js .h2-svc-grid.rv.in .h2-svc-card { filter: none; }
.js .h2-svc-grid.rv.in .h2-svc-card:nth-child(2) { transition-delay: .08s, .08s, .08s, 0s, 0s; }
.js .h2-svc-grid.rv.in .h2-svc-card:nth-child(3) { transition-delay: .16s, .16s, .16s, 0s, 0s; }
.js .h2-svc-grid.rv.in .h2-svc-card:nth-child(4) { transition-delay: .24s, .24s, .24s, 0s, 0s; }
.js .h2-svc-grid.rv.in .h2-svc-card:nth-child(5) { transition-delay: .32s, .32s, .32s, 0s, 0s; }
.js .h2-svc-grid.rv.in .h2-svc-card:nth-child(6) { transition-delay: .4s, .4s, .4s, 0s, 0s; }
.js .h2-pns.rv { opacity: 1; transform: none; }
.js .h2-pns.rv .h2-pn { opacity: 0; transform: translateY(44px); filter: blur(10px); transition: flex-grow .7s var(--ease), opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.js .h2-pns.rv.in .h2-pn { opacity: 1; transform: none; filter: none; }
.js .h2-pns.rv.in .h2-pn:nth-child(2) { transition-delay: 0s, .1s, .1s, .1s; }
.js .h2-pns.rv.in .h2-pn:nth-child(3) { transition-delay: 0s, .2s, .2s, .2s; }
.js .h2-pns.rv.in .h2-pn:nth-child(4) { transition-delay: 0s, .3s, .3s, .3s; }
.js .h2-pns.rv.in .h2-pn:nth-child(5) { transition-delay: 0s, .4s, .4s, .4s; }

/* Parallaxe : les propriétés individuelles (translate / scale) ne gênent ni les révélations ni les survols */
.h2-bg-disc, .h2-bg-ring { will-change: translate; }
.h2-hero-copy { will-change: opacity, filter; }
.h2-hero-card::before { transform: rotate(calc(-3deg - var(--fan, 0) * 5deg)); }
.h2-hero-card::after { transform: rotate(calc(2.6deg + var(--fan, 0) * 5deg)); }
.h2-hero-card:hover::before { transform: rotate(-5deg) translate(-6px, 2px); }
.h2-hero-card:hover::after { transform: rotate(4.4deg) translate(6px, 2px); }
.h2-work-img { position: relative; }
.h2-work-img img { position: absolute; left: 0; top: -9%; height: 118%; will-change: translate; }
[data-sc] { scale: var(--sc, 1); transform-origin: 50% 40%; }

/* Verre dépoli (glassmorphism) sur le bloc d'action : des lueurs colorées floues derrière, des cartes en verre devant */
.h2-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(64px); opacity: .75; pointer-events: none; will-change: translate; }
.h2-orb.o1 { width: 340px; height: 340px; background: var(--rose); left: -80px; top: -90px; }
.h2-orb.o2 { width: 300px; height: 300px; background: #B9A6D9; right: 12%; top: 30%; }
.h2-orb.o3 { width: 260px; height: 260px; background: #F4C542; left: 38%; bottom: -120px; opacity: .55; }
.h2-ft-copy { position: relative; z-index: 1; }
.h2-choice-card { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.32); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 30px rgba(10,6,25,.25); }
.h2-choice-card:hover { background: rgba(255,255,255,.2); }

.h2-works { position: relative; overflow: hidden; }
.h2-works > .wrap { position: relative; z-index: 1; }

/* Barre flottante en verre : « Démarrer un projet » toujours à portée de pouce, masquée près du formulaire */
.h2-float { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 900; translate: -50% 30px; opacity: 0; visibility: hidden; display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px; color: #fff; font-weight: 800; background: rgba(27,18,51,.58); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 36px rgba(27,18,51,.32); transition: opacity .5s var(--ease), translate .5s var(--ease), visibility .5s, background .3s; text-decoration: none; }
.h2-float.on { opacity: 1; visibility: visible; translate: -50% 0; }
.h2-float:hover { background: rgba(194,37,92,.78); }
.h2-float .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rose); }
.h2-float b { transition: transform .3s var(--ease); }
.h2-float:hover b { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .h2-svc-grid.rv .h2-svc-card, .js .h2-pns.rv .h2-pn { filter: none; }
  .js .h2-pns.rv .h2-pn { opacity: 1; transform: none; }
  .h2-hero-copy { will-change: auto; }
}

/* ---------- 13. TEXTE SEO DE L'ACCUEIL ---------- */
.h2-title { font-size: clamp(2.5rem, 5.1vw, 4.9rem); }
.h2-svc-desc { display: block; font-size: .96rem; line-height: 1.48; margin-bottom: 26px; }
.h2-work-d { display: block; font-size: .94rem; color: var(--muted); line-height: 1.45; }
.h2-diag-t { display: block; font-size: .92rem; color: var(--muted); }
.h2-ct-form .q { display: block; }
.h2-prose { background: #fff; border-bottom: 1.5px solid var(--line); padding-bottom: 30px; }
.h2-prose .sp-body { padding-top: 90px; }
.h2-prose .sp-toc { top: 120px; }

/* ==========================================================================
   14. BLOCS ANIMÉS DE L'ACCUEIL (remplacent le long texte : mêmes contenus, présentés en blocs distincts)
   ========================================================================== */
.h2-bento { padding: 90px 0 70px; }
.bn-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.bn { position: relative; overflow: hidden; border-radius: 36px; padding: clamp(28px, 4vw, 52px); border: 2px solid var(--ink); }
.bn-1 { grid-column: span 12; background: var(--ink); color: #F6F0F2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: center; }
.bn-2 { grid-column: span 6; background: var(--rose); color: var(--ink); }
.bn-3 { grid-column: span 6; background: #F4C542; color: #241A00; }
.bn-4 { grid-column: span 12; background: #B9A6D9; color: #1D1430; display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; }
.bn-5 { grid-column: span 12; background: #FBF4F1; color: var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px; }
.bn-copy { position: relative; z-index: 1; }
.bn-n { display: inline-block; padding: 4px 12px; margin-bottom: 14px; border-radius: 999px; border: 1.5px solid currentColor; font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
.bn h2 { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 78; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1; letter-spacing: -.02em; margin-bottom: 18px; }
.bn-p { font-size: 1.04rem; line-height: 1.6; margin-bottom: 14px; max-width: 58ch; }
.bn strong { font-weight: 800; }
.bn a.inl { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.bn-1 a.inl { color: var(--rose); }
.bn .btn-sm { min-height: 42px; padding: 10px 18px; font-size: .92rem; margin-top: 8px; }
.bn-1 .btn-ac { background: var(--rose); color: var(--ink); }
.bn-dark { background: #241A00; color: #F4C542; }
.bn-dark:hover { transform: translateY(-3px); }

/* listes (puces de couleur, cartes, coches) */
.bn-chips, .bn-picks, .bn-ticks { display: grid; gap: 10px; margin: 6px 0 14px; }
.bn-chips { grid-template-columns: 1fr 1fr; }
.bn-chips li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); font-size: .92rem; line-height: 1.35; }
.bn-chips li::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: .2em; border-radius: 50%; background: var(--c, var(--rose)); box-shadow: 0 0 12px var(--c, var(--rose)); }
.bn-chips li:nth-child(1) { --c: #F4C542; } .bn-chips li:nth-child(2) { --c: #E39A63; } .bn-chips li:nth-child(3) { --c: #EDEDF2; }
.bn-chips li:nth-child(4) { --c: #B9A6D9; } .bn-chips li:nth-child(5) { --c: #7CFF6B; } .bn-chips li:nth-child(6) { --c: #C9CF9B; }
.bn-picks li { padding: 12px 16px; border-radius: 18px; background: rgba(255,255,255,.55); border: 2px solid var(--ink); font-size: .95rem; line-height: 1.35; transition: transform .35s var(--ease), background .3s; }
.bn-picks li:hover { transform: translateX(6px); background: #fff; }
.bn-ticks li { position: relative; padding: 4px 0 4px 30px; font-size: .96rem; line-height: 1.4; }
.bn-ticks li::before { content: "✓"; position: absolute; left: 0; top: 3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #241A00; color: #F4C542; font-size: .72rem; font-weight: 900; }

/* 01 · orbite des morphes */
.bn-orbit { --s: clamp(230px, 26vw, 330px); position: relative; width: var(--s); aspect-ratio: 1; margin: 0 auto; }
.bn-ring { position: absolute; border-radius: 50%; }
.bn-ring.r1 { inset: 0; border: 2px dashed rgba(246,240,242,.35); animation: bnSpin 46s linear infinite; }
.bn-ring.r1 i { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: var(--d); border: 2px solid #F6F0F2; transform: rotate(var(--a)) translateY(calc(var(--s) * -.5)); }
.bn-ring.r2 { inset: 17%; border: 2px solid rgba(255,111,168,.55); animation: bnSpin 30s linear infinite reverse; }
.bn-core { position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%; background: var(--rose); border: 2px solid #F6F0F2; box-shadow: 0 0 60px rgba(255,111,168,.45); }
.bn-core svg { width: 76%; height: auto; }
@keyframes bnSpin { to { transform: rotate(360deg); } }

/* 02 · communication + marketing */
.bn-venn { position: relative; height: 150px; margin-bottom: 14px; }
.bn-venn .c { position: absolute; top: 6px; width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink); font-family: var(--f-display); font-weight: 800; font-size: .95rem; transition: transform 1.2s var(--ease); }
.bn-venn .c1 { left: calc(50% - 125px); background: rgba(255,255,255,.7); }
.bn-venn .c2 { left: calc(50% - 15px); background: var(--ink); color: var(--rose); }
.bn-venn .c1 b { transform: translateX(-24px); font-size: .82rem; } .bn-venn .c2 b { transform: translateX(24px); font-size: .82rem; }
.bn-venn .x { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; padding: 4px 10px; border-radius: 999px; background: var(--rose); border: 2px solid var(--ink); font-size: .74rem; font-weight: 800; transition: opacity .6s .9s, transform .8s .9s var(--ease); }
.js .bn-venn .c1 { transform: translateX(-70px); } .js .bn-venn .c2 { transform: translateX(70px); }
.bn.in .bn-venn .c1, .bn.in .bn-venn .c2 { transform: none; }
.bn.in .bn-venn .x { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 03 · de l'idée à la diffusion */
.bn-path { position: relative; height: 120px; margin-bottom: 18px; }
.bn-path svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bn-path .line { fill: none; stroke: #241A00; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 9; }
.js .bn-path .line { stroke-dasharray: 560; stroke-dashoffset: 560; transition: stroke-dashoffset 2s var(--ease) .2s; }
.bn.in .bn-path .line { stroke-dashoffset: 0; }
.bn-path .node { position: absolute; transform: translate(-50%, -50%) scale(.6); opacity: 0; padding: 7px 14px; border-radius: 999px; background: #241A00; color: #F4C542; font-weight: 800; font-size: .86rem; transition: opacity .5s, transform .7s var(--ease); }
.bn-path .n1 { left: 8%; top: 67%; transition-delay: .3s; } .bn-path .n2 { left: 50%; top: 48%; transition-delay: 1s; } .bn-path .n3 { left: 88%; top: 33%; transition-delay: 1.7s; }
.bn.in .bn-path .node { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 04 · pulsations sur la ville */
.bn-pulse { position: relative; min-height: 270px; border-radius: 26px; overflow: hidden; border: 2px solid #1D1430; background: repeating-linear-gradient(0deg, rgba(29,20,48,.09) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(29,20,48,.09) 0 1px, transparent 1px 44px), #CDBFE6; }
.bn-pulse i { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: #1D1430; }
.bn-pulse i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1D1430; animation: bnPulse 2.6s ease-out infinite; }
.bn-pulse .p1 { left: 18%; top: 28%; } .bn-pulse .p2 { left: 72%; top: 22%; } .bn-pulse .p3 { left: 34%; top: 76%; } .bn-pulse .p4 { left: 84%; top: 70%; } .bn-pulse .p5 { left: 56%; top: 52%; background: var(--framboise); }
.bn-pulse .p2::after { animation-delay: .5s; } .bn-pulse .p3::after { animation-delay: 1s; } .bn-pulse .p4::after { animation-delay: 1.5s; } .bn-pulse .p5::after { animation-delay: .2s; border-color: var(--framboise); }
.bn-glass { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 18px 26px; border-radius: 22px; text-align: center; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 14px 34px rgba(29,20,48,.2); white-space: nowrap; }
.bn-glass small { display: block; font-family: var(--f-body); font-weight: 600; font-size: .8rem; opacity: .8; }
@keyframes bnPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(4.2); opacity: 0; } }

/* 05 · frise de démarrage */
.bn-5 .bn-copy { grid-column: 1 / -1; }
.bn-flow { grid-column: 1 / -1; }
.bn-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; margin: 6px 0 18px; padding-top: 6px; }
.bn-steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 28px; height: 3px; background: var(--ink); transform-origin: left; }
.js .bn-steps::before { transform: scaleX(0); transition: transform 1.6s var(--ease) .3s; }
.bn.in .bn-steps::before { transform: scaleX(1); }
.bn-steps li { position: relative; counter-increment: s; padding-top: 62px; font-size: .96rem; line-height: 1.4; }
.bn-steps li::before { content: counter(s); position: absolute; left: 0; top: 6px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--rose); font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; }
.js .bn-steps li { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .7s var(--ease); transition-delay: calc(var(--i) * .25s + .4s); }
.bn.in .bn-steps li { opacity: 1; transform: none; }
.bn-kids { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 14px 30px; align-items: end; }
.bn-kids .bn-p { margin: 0; max-width: 80ch; }
.bn-5 a.inl { color: var(--framboise); }

/* entrée en cascade des listes */
.js .bn-chips li { opacity: 0; transform: scale(.92) translateY(10px); transition: opacity .5s, transform .6s var(--ease); transition-delay: calc(var(--i) * .08s + .3s); }
.bn.in .bn-chips li { opacity: 1; transform: none; }
.js .bn-ticks li, .js .bn-picks li { opacity: 0; transform: translateX(-14px); transition: opacity .5s, transform .6s var(--ease), background .3s; transition-delay: calc(var(--i) * .1s + .4s); }
.bn.in .bn-ticks li, .bn.in .bn-picks li { opacity: 1; transform: none; }
.bn.in .bn-picks li:hover { transform: translateX(6px); transition-delay: 0s; }

@media (max-width: 1080px) {
  .bn-2, .bn-3 { grid-column: span 12; }
  .bn-1, .bn-4, .bn-5 { grid-template-columns: 1fr; }
  .bn-steps { grid-template-columns: 1fr 1fr; }
  .bn-steps::before { display: none; }
  .bn-kids { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bn { border-radius: 26px; }
  .bn-chips { grid-template-columns: 1fr; }
  .bn-steps { grid-template-columns: 1fr; }
  .bn-venn .c { width: 120px; height: 120px; } .bn-venn .c1 { left: calc(50% - 108px); } .bn-venn .c2 { left: calc(50% - 12px); }
}
@media (prefers-reduced-motion: reduce) {
  .bn-ring.r1, .bn-ring.r2, .bn-pulse i::after { animation: none; }
  .js .bn-chips li, .js .bn-ticks li, .js .bn-picks li, .js .bn-steps li { opacity: 1; transform: none; transition: none; }
  .js .bn-venn .c1, .js .bn-venn .c2 { transform: none; }
  .bn-venn .x { opacity: 1; transform: translate(-50%, -50%); }
  .js .bn-path .line { stroke-dashoffset: 0; }
  .bn-path .node { opacity: 1; transform: translate(-50%, -50%); }
  .js .bn-steps::before { transform: none; }
}

/* ---------- 15. « Comment préférez-vous avancer ? » : aplats pastel, comme le reste de l'accueil (plus de verre ni de lueurs) ---------- */
.h2-ft-box { background: #FFC4DA; color: var(--ink); border: 2px solid var(--ink); box-shadow: none; }
.h2-ft-box::after { -webkit-text-stroke: 2.5px rgba(27, 18, 51, .12); }
.h2-orb { display: none; }
.h2-ft-copy .kicker { color: var(--ink) !important; }
.h2-ft-copy h2 em { color: var(--framboise); }
.h2-ft-copy p { color: rgba(27, 18, 51, .86); }
.h2-choice-card { background: #FBF4F1; color: var(--ink); border: 2px solid var(--ink); border-radius: 22px; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: background .3s, transform .35s var(--ease); }
.h2-choice-card:nth-child(1):hover { background: #F4C542; }
.h2-choice-card:nth-child(2):hover { background: #B9A6D9; }
.h2-choice-card:nth-child(3):hover { background: #FFFFFF; }
.h2-choice-card:hover { border-color: var(--ink); transform: translateX(8px); }
.h2-choice-card span { opacity: .8; }
.h2-choice-card .arr { color: var(--ink); opacity: 1; }

/* barre flottante : aplat rose, comme les boutons du site (plus de verre) */
.h2-float { background: var(--rose); color: var(--ink); border: 2px solid var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 10px 24px rgba(27, 18, 51, .18); }
.h2-float:hover { background: #F4C542; }
.h2-float .dot { background: var(--ink); }