/* ============================================================
   LIQUID GLASS CTA — Premium glass component
   Technique : backdrop-filter fort + chrome rim + SVG edge filter
   Adaptatif : tint selon la section visible en fond
   ============================================================ */

/* ── CSS Custom properties (section-adaptive) ─────────────── */
:root {
  --lg-bg:          rgba(8, 10, 14, 0.16);
  --lg-rim:         rgba(255, 255, 255, 0.22);
  --lg-highlight:   rgba(255, 255, 255, 0.30);
  --lg-inner-sh:    rgba(0, 0, 0, 0.18);
  --lg-drop:        rgba(0, 0, 0, 0.28);
  --lg-text:        rgba(255, 255, 255, 0.90);
  --lg-sub:         rgba(255, 255, 255, 0.45);
  --lg-sep-col:     rgba(255, 255, 255, 0.14);
  --lg-shine-start: rgba(255, 255, 255, 0.22);
}

/* ── Wrapper positionné ───────────────────────────────────── */
.lg-cta {
  position: fixed;
  right: 32px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 9500;
  pointer-events: auto;
  -webkit-animation: lg-float 9s ease-in-out infinite;
          animation: lg-float 9s ease-in-out infinite;
}
.lg-cta:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

/* ── Pill principal ───────────────────────────────────────── */
.lg-pill {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: 22px 14px;
  border-radius: 9999px;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  /* Blur fort — le coeur de l'effet */
  -webkit-backdrop-filter: blur(28px) saturate(150%);
          backdrop-filter: blur(28px) saturate(150%);
  background: var(--lg-bg);
  border: 0.75px solid var(--lg-rim);
  box-shadow:
    inset 0 1.5px 0 var(--lg-highlight),
    inset 0 -1.5px 0 var(--lg-inner-sh),
    inset 0.75px 0 0 rgba(255,255,255,0.07),
    0 8px 40px -6px var(--lg-drop),
    0 2px 8px -2px rgba(0,0,0,0.12);
  /* SVG edge filter : refraction organique 3.5px */
  -webkit-filter: url(#lg-edge-filter);
          filter: url(#lg-edge-filter);
  /* Transitions adaptatives lentes */
  -webkit-transition:
    background 1.4s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 1.4s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 1.4s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    background 1.4s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 1.4s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 1.4s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hover tres leger */
.lg-pill:hover {
  -webkit-transform: scale(1.038) !important;
          transform: scale(1.038) !important;
  box-shadow:
    inset 0 1.5px 0 var(--lg-highlight),
    inset 0 -1.5px 0 var(--lg-inner-sh),
    inset 0.75px 0 0 rgba(255,255,255,0.07),
    0 12px 50px -6px var(--lg-drop),
    0 3px 12px -2px rgba(0,0,0,0.16);
}

/* ── Specular highlight — ligne lumineuse en haut ─────────── */
.lg-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  border-radius: 9999px 9999px 70% 70%;
  background: linear-gradient(
    180deg,
    var(--lg-shine-start) 0%,
    rgba(255,255,255,0.06) 55%,
    transparent 100%
  );
  pointer-events: none;
  -webkit-transition: background 1.4s ease;
  transition: background 1.4s ease;
}

/* ── Densite bas (ombre interne) ──────────────────────────── */
.lg-rim-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  border-radius: 0 0 9999px 9999px;
  background: linear-gradient(0deg, rgba(0,0,0,0.09) 0%, transparent 100%);
  pointer-events: none;
}

/* ── Contenu ────────────────────────────────────────────── */
.lg-icon {
  color: var(--lg-text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0.82;
  -webkit-transition: color 1.4s ease, opacity 1.4s ease;
  transition: color 1.4s ease, opacity 1.4s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.lg-sep {
  display: block;
  width: 18px;
  height: 0.75px;
  background: var(--lg-sep-col);
  border-radius: 1px;
  -webkit-transition: background 1.4s ease;
  transition: background 1.4s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.lg-label {
  font-family: var(--heading-font);
  font-size: 9px;
  font-weight: 700;
  color: var(--lg-text);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  line-height: 1.6;
  text-align: center;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
          text-orientation: mixed;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  white-space: nowrap;
  -webkit-transition: color 1.4s ease;
  transition: color 1.4s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.lg-arrow {
  color: var(--lg-sub);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: color 1.4s ease;
  transition: color 1.4s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* ── Respiration tres lente (float) ───────────────────────── */
@-webkit-keyframes lg-float {
  0%, 100% { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  50%       { -webkit-transform: translateY(calc(-50% - 5px)); transform: translateY(calc(-50% - 5px)); }
}
@keyframes lg-float {
  0%, 100% { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  50%       { -webkit-transform: translateY(calc(-50% - 5px)); transform: translateY(calc(-50% - 5px)); }
}

/* ── Tints section-adaptatifs ─────────────────────────────── */

/* Hero / image de fond sombre */
.lg-cta.tint-hero {
  --lg-bg:          rgba(0, 0, 0, 0.20);
  --lg-rim:         rgba(255, 255, 255, 0.24);
  --lg-highlight:   rgba(255, 255, 255, 0.32);
  --lg-inner-sh:    rgba(0, 0, 0, 0.22);
  --lg-drop:        rgba(0, 0, 0, 0.32);
  --lg-text:        rgba(255, 255, 255, 0.92);
  --lg-sub:         rgba(255, 255, 255, 0.48);
  --lg-sep-col:     rgba(255, 255, 255, 0.16);
  --lg-shine-start: rgba(255, 255, 255, 0.28);
}

/* Sections blanches / lumineuses */
.lg-cta.tint-light {
  --lg-bg:          rgba(255, 255, 255, 0.30);
  --lg-rim:         rgba(0, 0, 0, 0.07);
  --lg-highlight:   rgba(255, 255, 255, 0.72);
  --lg-inner-sh:    rgba(0, 0, 0, 0.06);
  --lg-drop:        rgba(0, 0, 0, 0.10);
  --lg-text:        rgba(29, 29, 27, 0.88);
  --lg-sub:         rgba(29, 29, 27, 0.38);
  --lg-sep-col:     rgba(0, 0, 0, 0.09);
  --lg-shine-start: rgba(255, 255, 255, 0.78);
}

/* Sections beige (#F7F5EE) */
.lg-cta.tint-beige {
  --lg-bg:          rgba(247, 245, 238, 0.28);
  --lg-rim:         rgba(180, 170, 145, 0.22);
  --lg-highlight:   rgba(255, 255, 255, 0.65);
  --lg-inner-sh:    rgba(140, 130, 100, 0.10);
  --lg-drop:        rgba(100, 90, 60, 0.14);
  --lg-text:        rgba(29, 29, 27, 0.85);
  --lg-sub:         rgba(29, 29, 27, 0.40);
  --lg-sep-col:     rgba(140, 130, 100, 0.18);
  --lg-shine-start: rgba(255, 255, 255, 0.68);
}

/* Sections vert / dark-green */
.lg-cta.tint-green {
  --lg-bg:          rgba(45, 83, 53, 0.22);
  --lg-rim:         rgba(156, 254, 79, 0.18);
  --lg-highlight:   rgba(200, 255, 150, 0.28);
  --lg-inner-sh:    rgba(20, 40, 20, 0.22);
  --lg-drop:        rgba(10, 30, 10, 0.30);
  --lg-text:        rgba(255, 255, 255, 0.92);
  --lg-sub:         rgba(200, 255, 140, 0.55);
  --lg-sep-col:     rgba(156, 254, 79, 0.16);
  --lg-shine-start: rgba(220, 255, 180, 0.26);
}

/* Cache quand liquid menu est ouvert */
body.liquid-menu-open .lg-cta {
  opacity: 0;
  pointer-events: none;
}

/* Scroll bloqué quand menu ouvert */
body.liquid-menu-open {
  overflow: hidden;
}

/* Fix menu : pas de scroll interne */
.liquid-menu__inner {
  overflow: hidden !important;
}

/* Close button (X) du liquid menu */
.liquid-menu__close {
  position: absolute;
  top: 36px;
  right: 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 3;
}
.liquid-menu__close:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
}

/* ── Responsive ─────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .lg-cta { right: 16px; }
  .lg-pill { padding: 16px 11px; gap: 9px; }
  .liquid-menu__close { top: 24px; right: 24px; }
}
@media screen and (max-width: 480px) {
  .lg-cta { display: none; }
}

/* ============================================================
   NOUS CONTACTER — liquid glass premium (même traitement que lg-cta)
   ============================================================ */

.header-navigation .nav-button .theme-btn.style-one {
  /* Pas de SVG filter sur texte (artefacts) */
  -webkit-filter: none !important;
          filter: none !important;

  /* Chrome rim complet : top bright / bottom shadow */
  border-top-color:    rgba(255, 255, 255, 0.52) !important;
  border-right-color:  rgba(255, 255, 255, 0.22) !important;
  border-bottom-color: rgba(0,   0,   0,   0.12) !important;
  border-left-color:   rgba(255, 255, 255, 0.22) !important;

  /* Profondeur multicouche identique */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    0 6px 28px -6px rgba(0, 0, 0, 0.28),
    0 2px 6px -2px rgba(0, 0, 0, 0.12) !important;

  /* Transitions lentes */
  -webkit-transition:
    background 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  transition:
    background 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* Specular highlight top (ligne brillante de verre) */
.header-navigation .nav-button .theme-btn.style-one::before {
  height: 50% !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  ) !important;
}

/* Hover — leger scale + intensification */
.header-navigation .nav-button .theme-btn.style-one:hover {
  -webkit-transform: translateY(-1px) scale(1.02) !important;
          transform: translateY(-1px) scale(1.02) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.18),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    0 10px 40px -6px rgba(0, 0, 0, 0.32),
    0 3px 10px -2px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================================
   NAV PILL .pf-nav-menu — specular highlight (ligne de verre)
   ============================================================ */

/* Specular highlight top — ligne brillante identique au lg-cta */
.header-navigation .pf-nav-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  border-radius: 60px 60px 50% 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Contenu du nav au dessus du pseudo */
.header-navigation .pf-nav-menu .main-menu,
.header-navigation .pf-nav-menu > * {
  position: relative;
  z-index: 1;
}

/* Ombre interne bas (densité) */
.header-navigation .pf-nav-menu::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28%;
  border-radius: 0 0 60px 60px;
  background: linear-gradient(0deg, rgba(0,0,0,0.08) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Supprimer l'open state (pill sombre sur li hover) dans style.css baseline */
.header-navigation .main-menu ul > li:hover > a {
  background-color: transparent !important;
  color: var(--primary-color) !important;
}

/* ============================================================
   SECTION MÉTHODE — Steps.png bg + 4 liquid glass cards
   ============================================================ */

.nova-steps-section {
  position: relative;
  min-height: 90vh;
  background-image: url('../images/Steps.png');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 60px 0 0;
}

/* Fallback mobile — fixed ne marche pas sur iOS */
@media (max-width: 768px) {
  .nova-steps-section {
    background-attachment: scroll;
  }
}

/* Gradient sombre — haut fort pour titre, bas modéré pour cartes */
.nova-steps-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.30) 35%,
    rgba(0,0,0,0.10) 60%,
    rgba(0,0,0,0.30) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Titre flottant */
.nova-steps-header {
  position: relative;
  z-index: 2;
  padding: 0 60px;
  text-align: left;
}

.vertdure-tag.light {
  color: rgba(255,255,255,0.90) !important;
  border-color: rgba(255,255,255,0.4) !important;
  background: rgba(0,0,0,0.25) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.nova-steps-title {
  font-family: var(--heading-font);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 800;
  color: #fff !important;
  line-height: 1.15;
  margin-top: 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.nova-steps-title em {
  font-style: italic;
  font-weight: 400;
  color: #fff !important;
}

/* ── Grille des 4 cartes ──────────────────────────────────── */
.nova-steps-cards {
  position: relative;
  z-index: 2;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 12px 1fr 12px 1fr 12px 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0 20% 0%;
  margin-top: auto;
}

/* ── Carte individuelle — liquid glass ────────────────────── */
.nova-step-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 22px 20px 18px;
  color: #fff;

  /* Glass */
  background: rgba(10, 20, 15, 0.28);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
          backdrop-filter: blur(22px) saturate(160%);

  /* Chrome rim */
  border: 0.75px solid rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.36);
  border-bottom-color: rgba(0,0,0,0.20);

  /* Profondeur */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 32px rgba(0,0,0,0.30);

  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.23,1,0.32,1),
                      box-shadow 0.35s cubic-bezier(0.23,1,0.32,1);
          transition: transform 0.35s cubic-bezier(0.23,1,0.32,1),
                      box-shadow 0.35s cubic-bezier(0.23,1,0.32,1);
}

.nova-step-card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 14px 44px rgba(0,0,0,0.38);
}

/* Specular top */
.nova-step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44%;
  border-radius: 20px 20px 50% 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.32) 0%,
    rgba(255,255,255,0.06) 60%,
    transparent 100%
  );
  pointer-events: none;
}

/* Numéro étape */
.nova-step-num {
  display: inline-block;
  font-family: var(--body-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}

/* Titre étape */
.nova-step-title {
  font-family: var(--heading-font);
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  font-weight: 900;
  line-height: 1.15;
  color: #fff !important;
  text-transform: uppercase;
  margin: 0 0 10px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Forcer tout le contenu des step cards en blanc */
.nova-step-card,
.nova-step-card * {
  color: #fff !important;
}

/* Description */
.nova-step-desc {
  font-family: var(--body-font);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0 0 14px;
}

/* Tags bas */
.nova-step-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
}

.nova-step-tags span {
  font-family: var(--body-font);
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  border: 0.75px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.08);
  white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  .nova-steps-section { min-height: 90vh; padding-top: 40px; }
  .nova-steps-cards { grid-template-columns: repeat(2, 1fr); padding: 0 20px 30px; }
  .nova-steps-header { padding: 0 20px; }
}
@media screen and (max-width: 576px) {
  .nova-steps-cards { grid-template-columns: 1fr; }
}