/* ============================================
   JOB&GO — DESIGN SYSTEM
   ============================================ */

/* Fonts chargées via <link> dans chaque page HTML pour éviter le render-blocking */

/* VARIABLES */
:root {
  --blue: #428ED3;
  --blue-dark: #2d73b8;
  --blue-light: #EBF4FC;
  --red: #E54B4B;
  --red-dark: #cc3535;
  --red-light: #FDEAEA;
  --green: #39796C;
  --green-light: #E8F3F1;
  --yellow: #FFB563;
  --yellow-light: #FFF3E0;
  --ivory: #FAF7F4;
  --sable: #F0E9DF;
  --dark: #1A1A1A;
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-400: #9CA3AF;
  --gray-200: #E5E7EB;
  --white: #ffffff;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Inter', sans-serif;

  --shadow-xs: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.13);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --max-w: 1200px;
}

/* RESET */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font-body); cursor: pointer; border: none; }

/* ============================================
   LAYOUT
   ============================================ */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 104px 0;
}

.section--ivory { background: var(--ivory); }
.section--sable { background: var(--sable); }
.section--white { background: var(--white); }

.section-header {
  margin-bottom: 68px;
}

.section-header--center {
  text-align: center;
}

.section-header--center .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}

.section-eyebrow--red { color: var(--red); }
.section-eyebrow--green { color: var(--green); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.section-sub {
  font-size: 1.05rem;
  color: var(--gray-600);
  max-width: 560px;
  line-height: 1.75;
}

/* ============================================
   BADGES
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid transparent;
  margin-bottom: 20px;
}

.badge--blue {
  background: var(--blue-light);
  color: var(--blue);
  border-color: rgba(66,142,211,0.2);
}

.badge--red {
  background: var(--red-light);
  color: var(--red);
  border-color: rgba(229,75,75,0.2);
}

.badge--green {
  background: var(--green-light);
  color: var(--green);
  border-color: rgba(57,121,108,0.25);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 2px solid transparent;
  letter-spacing: -0.01em;
}

.btn-lg {
  padding: 15px 30px;
  font-size: 0.98rem;
}

.btn-xl {
  padding: 16px 36px;
  font-size: 1.05rem;
}

.btn-primary {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

.btn-primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

.btn-primary--red {
  background: var(--red);
  border-color: var(--red);
}

.btn-primary--red:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

.btn-outline {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}

.btn-outline:hover {
  background: var(--blue);
  color: white;
}

.btn-outline--red {
  color: var(--red);
  border-color: var(--red);
}

.btn-outline--red:hover {
  background: var(--red);
  color: white;
}

.btn-outline--white {
  color: white;
  border-color: rgba(255,255,255,0.4);
}

.btn-outline--white:hover {
  background: rgba(255,255,255,0.12);
  border-color: white;
}

.btn--white {
  background: white;
  color: var(--dark);
  border-color: white;
  font-weight: 700;
}

.btn--white:hover {
  background: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.92);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
  border-color: transparent;
}

.btn-ghost:hover {
  color: var(--dark);
  background: var(--ivory);
}

/* ============================================
   HEADER
   ============================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-200);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.logo img {
  height: 30px;
  width: auto;
  display: block;
}

/* Footer logo slightly larger */
.footer-brand .logo img {
  height: 28px;
  filter: brightness(0) invert(1);
}

/* Slogan en écho discret dans le footer */
.footer-brand .footer-slogan {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: none;
  margin-bottom: 8px;
}


.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.nav a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gray-600);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  transition: all 0.18s;
}

.nav a:hover {
  color: var(--dark);
  background: var(--ivory);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: all 0.22s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--gray-200);
  padding: 12px 16px 20px;
  flex-direction: column;
  gap: 2px;
  background: rgba(255,255,255,0.97);
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gray-600);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.mobile-nav a:hover { background: var(--ivory); color: var(--dark); }

.mobile-nav .btn {
  margin-top: 8px;
  width: 100%;
}

/* ============================================
   HERO
   ============================================ */

.hero {
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero--ivory { background: var(--ivory); }
.hero--blue  { background: var(--ivory); }
.hero--red   { background: var(--ivory); }

/* Wave decorations */
.hero-wave {
  position: absolute;
  pointer-events: none;
  opacity: 0.12;
}

.hero-wave--tr {
  top: -40px;
  right: -60px;
  width: 380px;
  opacity: 0.13;
  transform: rotate(15deg);
}

.hero-wave--bl {
  bottom: -60px;
  left: -30px;
  width: 280px;
  opacity: 0.10;
  transform: rotate(-20deg) scaleX(-1);
}

.hero-wave--br {
  bottom: -30px;
  right: 4%;
  width: 260px;
  opacity: 0.09;
  transform: rotate(12deg);
}

.hero-content {
  max-width: 800px;
  position: relative;
  z-index: 1;
}

/* Slogan — élément brand dominant, fidèle au Figma (~96px) */
.hero-slogan {
  font-family: var(--font-display);
  font-size: clamp(52px, 9vw, 116px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--dark);
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
}

.hero-slogan .slogan-green {
  color: var(--green);
}

/* Wrapper slogan + descriptor — groupe typographique dominant */
.hero-headline {
  margin-bottom: 32px;
}

.hero-headline .hero-slogan {
  margin-bottom: 12px;
}

/* Descriptor — séparateur editorial sous le slogan */
.hero-descriptor {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid rgba(26,26,26,0.12);
}

/* H1 — descripteur fonctionnel, stylistiquement sous le slogan */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-600);
  margin-bottom: 18px;
}

.hero-title .accent { color: var(--blue); }
.hero-title .accent--red { color: var(--red); }

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: var(--gray-600);
  margin-bottom: 38px;
  max-width: 540px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* Stats bar */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 680px;
}

.stat-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}

.stat-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

.stat-card span {
  font-size: 0.78rem;
  color: var(--gray-400);
  font-weight: 500;
}

/* Stat card color variants */
.stat-card--blue  { border-color: rgba(66,142,211,0.25); }
.stat-card--yellow { border-color: rgba(255,181,99,0.30); }
.stat-card--green  { border-color: rgba(57,121,108,0.25); }
.stat-card--red    { border-color: rgba(229,75,75,0.25); }

.stat-card--blue  strong { color: var(--blue); }
.stat-card--yellow strong { color: var(--yellow); }
.stat-card--green  strong { color: var(--green); }
.stat-card--red    strong { color: var(--red); }

/* ============================================
   AUDIENCE SPLIT
   ============================================ */

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.audience-card {
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  color: white;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.1);
}

.audience-card--blue {
  background: linear-gradient(150deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0) 45%), var(--blue);
}
.audience-card--red {
  background: linear-gradient(150deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0) 45%), var(--red);
}

/* Wave decoration inside audience cards */
.audience-wave {
  position: absolute;
  pointer-events: none;
  /* Convert le fill ivoire du SVG en blanc pur */
  filter: brightness(0) invert(1);
}

.audience-wave--tr {
  top: -15px;
  right: -25px;
  width: 230px;
  opacity: 0.22;
  transform: rotate(15deg);
}

.audience-wave--bl {
  bottom: -15px;
  left: -25px;
  width: 230px;
  opacity: 0.22;
  transform: rotate(-12deg) scaleX(-1);
}

.audience-card h3 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  color: white;
  margin-bottom: 24px;
  line-height: 1.1;
  min-height: 4.8rem; /* 2 lines at 2.1rem × 1.1 — aligns lists across both cards */
}

.audience-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  padding: 0;
  margin: 0;
}

.audience-list li {
  font-size: 0.93rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
}

.audience-list li::before {
  content: '•';
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
  font-size: 1.1em;
  line-height: 1.6;
}

.audience-card .btn {
  width: 100%;
  margin-top: 36px;
  justify-content: center;
}

.audience-card--red .btn--white:hover {
  background: var(--red-light);
  border-color: var(--red-light);
  color: var(--red);
}

/* ============================================
   PROCESS TIMELINE (horizontal)
   ============================================ */

.timeline {
  display: grid;
  gap: 0;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.timeline--3 { grid-template-columns: repeat(3, 1fr); }
.timeline--4 { grid-template-columns: repeat(4, 1fr); }

.timeline::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  background: var(--gray-200);
  z-index: 0;
}

.timeline--4::before {
  left: 12.5%;
  right: 12.5%;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.timeline-num {
  width: 58px;
  height: 54px;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 253 235'%3E%3Cpath d='M237.876 0C255.08 56.5248 258.137 143.32 238.441 235L119.22 229.718L0 224.435C18.3714 138.923 14.5839 60.9576 0.564835 14.8967L237.876 0Z' fill='%23428ED3'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 20px;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
}

.timeline-num--red    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 253 235'%3E%3Cpath d='M237.876 0C255.08 56.5248 258.137 143.32 238.441 235L119.22 229.718L0 224.435C18.3714 138.923 14.5839 60.9576 0.564835 14.8967L237.876 0Z' fill='%23E54B4B'/%3E%3C/svg%3E"); }
.timeline-num--yellow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 253 235'%3E%3Cpath d='M237.876 0C255.08 56.5248 258.137 143.32 238.441 235L119.22 229.718L0 224.435C18.3714 138.923 14.5839 60.9576 0.564835 14.8967L237.876 0Z' fill='%23FFB563'/%3E%3C/svg%3E"); color: var(--dark); }
.timeline-num--green  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 253 235'%3E%3Cpath d='M237.876 0C255.08 56.5248 258.137 143.32 238.441 235L119.22 229.718L0 224.435C18.3714 138.923 14.5839 60.9576 0.564835 14.8967L237.876 0Z' fill='%2339796C'/%3E%3C/svg%3E"); }

.timeline-step h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.timeline-step p {
  font-size: 0.87rem;
  color: var(--gray-600);
  line-height: 1.65;
}

/* Vertical steps (extras page) */
.steps-vertical {
  max-width: 480px;
  margin: 0 auto;
}

.step-v {
  display: flex;
  gap: 20px;
  position: relative;
}

.step-v:not(:last-child) {
  padding-bottom: 36px;
}

.step-v:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: 0;
  width: 2px;
  background: var(--gray-200);
}

.step-v-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
  border: 3px solid white;
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1;
}

.step-v-body h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 5px;
  padding-top: 8px;
}

.step-v-body p {
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.65;
}

/* ============================================
   CARDS GRID
   ============================================ */

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

.cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: border-color 0.2s ease;
}

.card:hover {
  border-color: var(--gray-400);
}

.card--ivory { background: var(--ivory); border-color: transparent; }
.card--ivory:hover { border-color: var(--gray-200); }

.card-icon {
  font-size: 1.6rem;
  margin-bottom: 14px;
  display: block;
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.card p {
  font-size: 0.87rem;
  color: var(--gray-600);
  line-height: 1.7;
}

/* ============================================
   COMPARISON (before / after)
   ============================================ */

.comparison-wrap {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.comp-col {
  padding: 36px 32px;
}

.comp-col--before { background: #FFF5F5; }
.comp-col--after { background: white; }

.comp-col h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comp-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comp-col li {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.comp-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.comp-icon--bad { background: var(--red-light); color: var(--red); }
.comp-icon--good { background: var(--green-light); color: var(--green); }

/* ============================================
   PARTNERS
   ============================================ */

.partners-section {
  padding-bottom: 56px;
}

/* Marquee outer: clips overflow + gradient fade on edges */
.partners-marquee-outer {
  overflow: hidden;
  margin: 32px 0 20px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Scrolling track */
.partners-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: partners-scroll 22s linear infinite;
}

.partners-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-4 * (200px + 20px))); }
}

/* Individual logo card */
.partner-logo-card {
  flex-shrink: 0;
  width: 200px;
  height: 88px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xs);
  cursor: default;
}

.partner-logo {
  width: 148px;
  height: 56px;
  object-fit: contain;
}

/* "Coming soon" label below the marquee */
.partners-coming-soon {
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--gray-400);
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .partners-marquee-track { animation: none; }
}

/* ============================================
   TESTIMONIALS
   ============================================ */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.testimonial {
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--gray-200);
}

.t-stars {
  color: #FBBF24;
  letter-spacing: 2px;
  font-size: 0.85rem;
  margin-bottom: 14px;
}

.testimonial blockquote {
  font-size: 0.93rem;
  color: var(--gray-600);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 20px;
}

.t-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.t-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--blue);
  flex-shrink: 0;
}

.t-avatar--red { background: var(--red-light); color: var(--red); }

.t-author strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
}

.t-author span {
  font-size: 0.8rem;
  color: var(--gray-400);
}

/* ============================================
   FAQ
   ============================================ */

.faq-list {
  max-width: 700px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--gray-200);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  transition: color 0.18s;
}

.faq-q:hover { color: var(--blue); }

.faq-q-icon {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  color: var(--gray-400);
  font-size: 0;
  flex-shrink: 0;
  transition: all 0.22s;
  font-style: normal;
}

/* Le "+" est dessiné en CSS (et non via le glyphe texte) pour un centrage
   pixel-perfect indépendant des métriques de police/navigateur. */
.faq-q-icon::before,
.faq-q-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: background 0.22s;
}

.faq-q-icon::before {
  width: 10px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.faq-q-icon::after {
  width: 1.5px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.faq-item.open .faq-q-icon {
  transform: rotate(45deg);
  border-color: var(--blue);
  color: var(--blue);
}

.faq-a {
  display: none;
  padding-bottom: 20px;
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.78;
}

.faq-item.open .faq-a { display: block; }

/* ============================================
   CTA FORM
   ============================================ */

.cta-section {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-wave {
  position: absolute;
  pointer-events: none;
}

.cta-wave--tl {
  top: -40px;
  left: -50px;
  width: 240px;
  opacity: 0.07;
  transform: rotate(-10deg) scaleX(-1);
}

.cta-wave--br {
  bottom: -40px;
  right: -50px;
  width: 200px;
  opacity: 0.08;
  transform: rotate(15deg);
}

.cta-section .section-sub {
  margin: 0 auto 40px;
}

.form-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-sm);
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.15);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.form-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: 0.01em;
}

.form-field input,
.form-field select {
  width: 100%;
  padding: 12px 15px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--dark) !important;
  background: white !important;
  transition: border-color 0.18s, box-shadow 0.18s;
  appearance: none;
  -webkit-appearance: none;
}

.form-field select {
  height: auto !important;
  min-height: 46px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(66,142,211,0.12);
}

.form-field input::placeholder { color: var(--gray-400); }

.form-submit { width: 100%; margin-top: 8px; }

.form-note {
  font-size: 0.78rem;
  color: var(--gray-400);
  text-align: center;
  margin-top: 14px;
}

/* ============================================
   TRUST BAR
   ============================================ */

.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-200);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--gray-600);
  font-weight: 500;
}

.trust-icon {
  color: var(--green);
  font-style: normal;
  font-size: 0.9rem;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background: var(--dark);
  color: white;
  padding: 72px 0 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

.footer-brand .logo {
  color: white;
  margin-bottom: 16px;
}

.footer-brand .logo-mark { background: var(--blue); }

.footer-brand p {
  font-size: 0.87rem;
  color: var(--gray-400);
  line-height: 1.75;
  max-width: 240px;
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.footer-social-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.30);
}

.footer-social-icons {
  display: flex;
  gap: 10px;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  color: white;
  transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
  text-decoration: none;
  flex-shrink: 0;
}

.footer-social-btn:hover {
  transform: translateY(-2px) scale(1.10);
}

/* Couleurs solides de marque Job&Go */
.footer-social-btn--insta    { background: #E54B4B; }
.footer-social-btn--linkedin { background: #428ED3; }

.footer-social-btn--insta:hover    { background: #d03f3f; box-shadow: 0 6px 18px rgba(229,75,75,0.40); }
.footer-social-btn--linkedin:hover { background: #3278ba; box-shadow: 0 6px 18px rgba(66,142,211,0.40); }

.footer-col h5 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gray-400);
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }

.footer-col a {
  font-size: 0.87rem;
  color: #6B7280;
  transition: color 0.18s;
}

.footer-col a:hover { color: white; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  font-size: 0.82rem;
  color: var(--gray-400);
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  font-size: 0.82rem;
  color: #6B7280;
  transition: color 0.18s;
}

.footer-bottom-links a:hover { color: white; }

/* ============================================
   PRICING / FORMULES
   ============================================ */

.formules-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}


.formules-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
}

.formules-group-label--red { color: var(--red); }
.formules-group-label--blue { color: var(--blue); }

.pricing-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.pricing-pair--centered {
  max-width: 760px;
  margin: 0 auto;
}

.pricing-card {
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 480px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.14);
}

.pricing-card--popular-red {
  background: var(--red);
  border-color: var(--red);
  color: white;
}

.pricing-card--popular-blue {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}

/* Cercle décoratif supprimé — style épuré */

.pricing-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  width: fit-content;
}

.pricing-badge--free { background: var(--red-light); color: var(--red); }
.pricing-badge--free-blue { background: var(--blue-light); color: var(--blue); }
.pricing-badge--popular { background: var(--yellow); color: var(--dark); }

.pricing-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: inherit;
}

.pricing-price {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  line-height: 1;
  margin-bottom: 4px;
}

.pricing-amount {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: inherit;
}

.pricing-period {
  font-size: 0.85rem;
  color: inherit;
  opacity: 0.75;
  margin-bottom: 7px;
}

.pricing-tagline {
  font-size: 0.82rem;
  color: var(--gray-600);
  margin-bottom: 14px;
}

.pricing-card--popular-red .pricing-tagline,
.pricing-card--popular-blue .pricing-tagline {
  color: rgba(255,255,255,0.65);
}

.pricing-promo {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 2px;
}

.pricing-promo-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--dark);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 10px;
}

.pricing-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 14px 0;
}

.pricing-card--popular-red .pricing-divider,
.pricing-card--popular-blue .pricing-divider {
  background: rgba(255,255,255,0.2);
}

.pricing-note {
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255,255,255,0.8);
  margin-bottom: 12px;
  line-height: 1.4;
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  margin-bottom: 24px;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  line-height: 1.3;
}

.pricing-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  flex-shrink: 0;
}

.pricing-check--red    { background: var(--red-light);  color: var(--red); }
.pricing-check--blue   { background: var(--blue-light); color: var(--blue); }
.pricing-check--yellow { background: var(--yellow);     color: var(--dark); }

.pricing-cta {
  display: block;
  width: 100%;
  padding: 14px;
  text-align: center;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
  margin-top: auto;
}

.pricing-cta--red  { border: 1.5px solid var(--red);  color: var(--red);  background: transparent; }
.pricing-cta--red:hover  { background: var(--red);  color: white; }
.pricing-cta--blue { border: 1.5px solid var(--blue); color: var(--blue); background: transparent; }
.pricing-cta--blue:hover { background: var(--blue); color: white; }
.pricing-cta--white { border: 1.5px solid white; color: var(--dark); background: white; }
.pricing-cta--white:hover { background: transparent; color: white; }

.pricing-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ============================================
   STATS STRIP — DARK METRICS BAR
   ============================================ */

/* Outer dark band wrapper — avoids naming conflict with .stats-strip light version */
.stats-band--dark { background: var(--dark); }

.stats-strip { background: var(--dark); }

.stats-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.stats-strip-item {
  padding: 40px 24px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.stats-strip-item:last-child { border-right: none; }

.stats-strip-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}

.stats-strip-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.38);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  display: block;
}

/* ============================================
   HERO — PERFECT MATCHING CARD (visuel droit)
   ============================================ */

.hero-pm-card {
  width: 100%;
  max-width: 420px;
  animation: card-rise 0.6s cubic-bezier(0.22, 0.68, 0, 1.2) 0.2s both;
}

.hero-pm-card svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 48px rgba(229,75,75,0.30)) drop-shadow(0 4px 12px rgba(0,0,0,0.10));
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================
   HERO — NOTIFICATION STACK (visuel droit)
   Page extras — cartes de notification animées
   ============================================ */

.hero-notif-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding-bottom: 58px;
  max-width: 364px;
}

/* Carte contexte : mission publiée */
.notif-mission-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: notif-slide 0.55s cubic-bezier(0.22, 0.68, 0, 1.2) 0.1s both;
}

.notif-mission-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  background: rgba(229,75,75,0.07);
  border: 1px solid rgba(229,75,75,0.14);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.notif-mission-body { flex: 1; min-width: 0; }

.notif-mission-label {
  display: block;
  font-size: 0.59rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gray-400);
  margin-bottom: 2px;
}

.notif-mission-body strong {
  display: block;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-mission-sub {
  display: block;
  font-size: 0.67rem;
  color: var(--gray-400);
  margin-top: 1px;
}

.notif-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(229,75,75,0.08);
  border: 1px solid rgba(229,75,75,0.20);
  border-radius: 100px;
  padding: 5px 10px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Cartes de notification */
.notif-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: notif-slide 0.55s cubic-bezier(0.22, 0.68, 0, 1.2) both;
}

.notif-card:nth-child(2) { animation-delay: 0.35s; }
.notif-card:nth-child(3) { animation-delay: 0.65s; }
.notif-card:nth-child(4) { animation-delay: 0.95s; }

@keyframes notif-slide {
  from { opacity: 0; transform: translateX(28px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.notif-card--candidate { border-left: 3px solid var(--red); }
.notif-card--confirmed {
  border-left: 3px solid var(--green);
  background: linear-gradient(135deg, #f0faf8 0%, #ffffff 100%);
}

/* Avatar */
.notif-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
}

.notif-avatar--red   { background: var(--red-light);   color: var(--red);   }
.notif-avatar--blue  { background: var(--blue-light);  color: var(--blue);  }
.notif-avatar--green { background: var(--green-light); color: var(--green); }

/* Corps */
.notif-body { flex: 1; min-width: 0; }

.notif-body strong {
  display: block;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.70rem;
  color: var(--gray-400);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
}

.notif-tag {
  background: rgba(229,75,75,0.08);
  color: var(--red);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.63rem;
  font-weight: 700;
  flex-shrink: 0;
}

.notif-tag--blue {
  background: rgba(66,142,211,0.09);
  color: var(--blue-dark);
}

.notif-stars {
  color: var(--yellow);
  letter-spacing: 0.5px;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.notif-check-inline { display: block; flex-shrink: 0; }

.notif-dpae-tag {
  background: rgba(57,121,108,0.10);
  color: var(--green);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.63rem;
  font-weight: 700;
  flex-shrink: 0;
}

.notif-meta-sep { color: var(--gray-200); flex-shrink: 0; }

/* Colonne droite : temps + bouton */
.notif-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.notif-time {
  font-size: 0.62rem;
  color: var(--gray-400);
  white-space: nowrap;
  font-weight: 500;
}

.notif-btn {
  background: var(--red);
  color: white;
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s;
  line-height: 1;
}

.notif-btn:hover { background: var(--red-dark); }

/* Check icon (confirmation) */
.notif-check {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pill timing — dark premium */
.notif-timing {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  padding: 10px 22px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.70);
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: notif-pop 0.4s ease 1.6s both;
  z-index: 2;
}

.notif-timing strong { color: white; font-weight: 700; }

/* ============================================
   HERO — CENTRÉ (pas de split / radar)
   ============================================ */

.hero-centered {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-centered .hero-slogan {
  align-items: center;
}

.hero-centered .hero-sub {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.hero-centered .hero-actions {
  justify-content: center;
}

.hero-centered .stats-grid {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   HERO POSTER — layout split accueil
   ============================================ */

/* Slogan plus compact dans la colonne gauche */
.hero-split .hero-slogan {
  font-size: clamp(40px, 5vw, 76px);
}

/* Colonne droite : affiche avec 2 cartes superposées */
.hero-poster-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  padding: 16px 0;
}

.hero-poster-card {
  position: relative;
  width: 100%;
  cursor: pointer;
}

/* Les deux cartes partagent les mêmes dimensions */
.hero-poster {
  width: 100%;
  max-height: 580px;
  border-radius: 20px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.hero-poster--front {
  position: relative;
  z-index: 2;
  box-shadow:
    0 2px 8px rgba(26,26,26,0.06),
    0 12px 32px rgba(26,26,26,0.14),
    0 32px 80px rgba(26,26,26,0.12);
  transform: rotate(2.5deg);
  transform-origin: center bottom;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, z-index 0s 0.22s;
}

/* Carte arrière : même width/max-height, décalée de 44px vers le bas */
.hero-poster--back {
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 1;
  box-shadow:
    0 2px 8px rgba(26,26,26,0.06),
    0 8px 24px rgba(26,26,26,0.12);
  transform: rotate(-1.5deg);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, z-index 0s;
}

/* Swap au hover : la carte arrière passe devant */
.hero-poster-card:hover .hero-poster--front {
  z-index: 1;
  transform: rotate(-1deg) translateY(44px) scale(0.96);
  box-shadow:
    0 1px 4px rgba(26,26,26,0.04),
    0 6px 16px rgba(26,26,26,0.08);
}

.hero-poster-card:hover .hero-poster--back {
  z-index: 3;
  transform: rotate(2.5deg) translateY(-44px);
  box-shadow:
    0 2px 8px rgba(26,26,26,0.06),
    0 16px 48px rgba(26,26,26,0.18),
    0 40px 100px rgba(26,26,26,0.15);
}

@media (max-width: 860px) {
  .hero-poster-wrap {
    justify-content: center;
    padding: 32px 0 0;
    align-self: auto;
  }
  .hero-poster-card {
    max-width: 300px;
  }
  .hero-poster {
    max-height: 380px;
  }
  .hero-poster--front {
    transform: rotate(1.5deg);
  }
  .hero-poster--back {
    top: 36px;
    transform: rotate(-1deg);
  }
}

/* ============================================
   AVANT / APRÈS — REDESIGN
   ============================================ */

.aa-grid {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.aa-col {
  border-radius: 20px;
  padding: 40px 36px;
}

.aa-col--before {
  background: rgba(229,75,75,0.04);
  border: 1.5px solid rgba(229,75,75,0.12);
}

.aa-col--after {
  background: white;
  border: 1.5px solid var(--gray-200);
}

.aa-col-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 20px;
}

.aa-col--before .aa-col-header { border-bottom: 1px solid rgba(229,75,75,0.12); }
.aa-col--after .aa-col-header  { border-bottom: 1px solid var(--gray-200); }

.aa-col-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.aa-col--before .aa-col-icon { background: rgba(229,75,75,0.10); }
.aa-col--after .aa-col-icon  { background: var(--green-light); }

.aa-col-title-wrap { flex: 1; }

.aa-col-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.2;
  display: block;
}

.aa-col--before .aa-col-title { color: #b52a2a; }
.aa-col--after  .aa-col-title { color: var(--green); }

.aa-col-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-400);
  margin-top: 2px;
  display: block;
}

.aa-vs {
  display: flex;
  align-items: center;
  justify-content: center;
}

.aa-vs-badge {
  width: 44px;
  height: 44px;
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--gray-400);
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.04em;
}

.aa-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aa-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gray-700);
}

.aa-item-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  margin-top: 2px;
}

.aa-col--before .aa-item-icon { background: rgba(229,75,75,0.10); color: var(--red); }
.aa-col--after  .aa-item-icon { background: var(--green-light);   color: var(--green); }

.aa-savings {
  max-width: 1000px;
  margin: 24px auto 0;
  background: rgba(57,121,108,0.06);
  border: 1px solid rgba(57,121,108,0.15);
  border-radius: var(--radius-lg);
  padding: 22px 36px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.aa-savings-icon { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }

.aa-savings-text {
  font-size: 0.92rem;
  color: var(--green);
  font-weight: 600;
  line-height: 1.5;
}

.aa-savings-text strong { color: #2a6359; }

/* ============================================
   CARDS — ICON CONTAINER & VARIANTES
   ============================================ */

.card-icon-wrap {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 18px;
  background: var(--ivory);
  border: 1px solid var(--gray-200);
}

.card-icon-wrap--red    { background: rgba(229,75,75,0.06);    border-color: rgba(229,75,75,0.12);    }
.card-icon-wrap--green  { background: rgba(57,121,108,0.06);   border-color: rgba(57,121,108,0.12);   }
.card-icon-wrap--blue   { background: rgba(66,142,211,0.06);   border-color: rgba(66,142,211,0.12);   }
.card-icon-wrap--yellow { background: rgba(255,181,99,0.06);   border-color: rgba(255,181,99,0.15);   }

/* ============================================
   CARDS — VARIANTES DE COULEUR HOVER
   ============================================ */

.cards-grid--red .card:hover {
  border-color: rgba(229,75,75,0.30);
}

/* ============================================
   HERO — NOTIFICATION BUBBLE (RADAR)
   ============================================ */

.radar-notif {
  position: absolute;
  left: -24px;
  bottom: 12px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 6;
  min-width: 220px;
  animation: notif-pop 0.4s ease 1.2s both;
}

.radar-notif-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--red-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--red);
  flex-shrink: 0;
}

.radar-notif-text strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.2;
}

.radar-notif-text span {
  font-size: 0.7rem;
  color: var(--gray-400);
}

@keyframes notif-pop {
  from { opacity: 0; transform: scale(0.88) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================
   APP SECTION — TÉLÉCHARGEMENT & FONCTIONNALITÉS
   ============================================ */

.app-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.app-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
}

.app-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.app-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--ivory);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.app-feature-body h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--dark);
}

.app-feature-body p {
  font-size: 0.84rem;
  color: var(--gray-600);
  line-height: 1.6;
}

.app-stores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Grille 3+1 sur mobile — établissement (.store-badge) + extras (.app-store-badge) */
@media (max-width: 640px) {
  .app-stores--4 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .app-stores--4 .store-badge,
  .app-stores--4 .app-store-badge {
    padding: 9px 10px;
    font-size: 0.76rem;
    gap: 7px;
    min-width: 0;
    justify-content: flex-start;
  }
  .app-stores--4 .store-badge-icon svg,
  .app-stores--4 .store-badge-icon img,
  .app-stores--4 .asb-icon svg,
  .app-stores--4 .asb-icon img {
    width: 18px !important;
    height: 18px !important;
  }
  .app-stores--4 .asb-text span  { font-size: 0.58rem; }
  .app-stores--4 .asb-text strong { font-size: 0.82rem; }
  .app-stores--4 .store-badge:last-child,
  .app-stores--4 .app-store-badge:last-child {
    grid-column: 2;
  }
}

.app-poster-wrap {
  position: relative;
}

.app-poster-badge {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(26,26,26,0.08);
  z-index: 4;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--dark);
  color: white;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.2s;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
}

.store-badge:hover {
  background: #2d2d2d;
  color: white;
}

.store-badge-icon { font-size: 1.45rem; line-height: 1; display: flex; align-items: center; flex-shrink: 0; }
.store-badge-icon svg,
.store-badge-icon img { width: 22px; height: 22px; display: block; flex-shrink: 0; }

.store-badge-text { line-height: 1.3; }
.store-badge-text small {
  display: block;
  font-size: 0.65rem;
  opacity: 0.55;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Phone mock UI */
.app-phone-wrap {
  position: relative;
}

.app-phone-mock {
  background: #0f0f0f;
  border-radius: 32px;
  padding: 18px 14px 22px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 24px 60px rgba(0,0,0,0.22),
    0 6px 16px rgba(0,0,0,0.12);
  position: relative;
  max-width: 280px;
  margin: 0 auto;
}

.app-phone-mock::before {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  margin: 0 auto 16px;
}

.app-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 14px;
}

.app-screen-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: white;
}

.app-screen-logo .logo-amp { color: var(--yellow); }
.app-screen-logo .logo-dot { color: var(--red); }

.app-screen-badge {
  background: rgba(229,75,75,0.18);
  border: 1px solid rgba(229,75,75,0.3);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #f08080;
  letter-spacing: 0.04em;
}

.app-mission-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 6px;
  margin-bottom: 8px;
}

.app-candidate-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-candidate-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  color: white;
  flex-shrink: 0;
}

.app-candidate-avatar--blue { background: var(--blue); }

.app-candidate-info { flex: 1; }

.app-candidate-info strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  line-height: 1.2;
}

.app-candidate-info span {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
}

.app-candidate-stars {
  font-size: 0.65rem;
  color: var(--yellow);
  letter-spacing: 1px;
}

.app-confirm-btn {
  background: var(--red);
  color: white;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 14px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.app-phone-badge {
  position: absolute;
  right: -20px;
  top: 40px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: notif-pop 0.4s ease 1.8s both;
}

/* ============================================
   COMPARISON — SAVINGS NOTE
   ============================================ */

.comp-savings {
  background: linear-gradient(135deg, var(--green-light) 0%, #d0ebe6 100%);
  border: 1px solid rgba(57,121,108,0.22);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--green);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

.comp-savings strong { color: #2a6359; }

/* ============================================
   FAQ — VARIANTE ROUGE
   ============================================ */

.faq-list--red .faq-q:hover { color: var(--red); }
.faq-list--red .faq-item.open .faq-q-icon {
  border-color: var(--red);
  color: var(--red);
}

/* ============================================
   SEO — ZONES
   ============================================ */

.seo-intro {
  max-width: 700px;
  margin: 0 auto 40px;
  text-align: center;
}

.seo-intro p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.78;
}

/* ============================================
   CTA — DARK RED (page établissements)
   ============================================ */

.cta-dark-red {
  background: var(--dark);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-dark-red .section-title { color: white; }
.cta-dark-red .section-sub {
  color: rgba(255,255,255,0.60);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.cta-dark-red .section-eyebrow { color: var(--red); }
.cta-dark-red .badge--red {
  background: rgba(229,75,75,0.16);
  border-color: rgba(229,75,75,0.38);
  color: #f08080;
}
.cta-dark-red .trust-bar { border-top-color: rgba(255,255,255,0.09); }
.cta-dark-red .trust-item { color: rgba(255,255,255,0.45); }
.cta-dark-red .trust-icon { color: var(--green); }
.cta-dark-red .container { position: relative; z-index: 1; }
.cta-dark-red .form-field input:focus,
.cta-dark-red .form-field select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(229,75,75,0.14);
}
.cta-dark-red .form-note { color: rgba(255,255,255,0.35); }

.cta-dark-red .cta-wave-dark--a {
  top: 30px; left: -130px;
  width: 560px;
  opacity: 0.42;
  transform: rotate(-14deg);
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.cta-dark-red .cta-wave-dark--b {
  bottom: -120px; right: -110px;
  width: 520px;
  opacity: 0.34;
  transform: rotate(18deg);
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.cta-dark-red .cta-wave-dark--c {
  top: 20px; right: -80px;
  width: 360px;
  opacity: 0.22;
  transform: rotate(-6deg);
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* ============================================
   SLOGAN — SIGNATURE DE MARQUE
   ============================================ */

/* Slogan dans le CTA dark — rappel de marque avant conversion */
.cta-brand-slogan {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.60);
  margin-bottom: 32px;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
}
/* Vert lumineux sur fond sombre — brand green #39796C trop foncé sur #1A1A1A */
.cta-brand-slogan .slogan-green { color: #5bbfb0; }

/* Slogan dans le footer */
.footer-brand .footer-slogan {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.82);
  margin-bottom: 10px;
  max-width: none;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}
.footer-brand .footer-slogan .slogan-green { color: #5bbfb0; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  .formules-layout { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .nav, .header-actions { display: none; }
  .hamburger { display: flex; }

  .section { padding: 72px 0; }
  .hero { padding: 72px 0 56px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .timeline--3,
  .timeline--4 {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .timeline::before { display: none; }

  .timeline-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    padding-bottom: 28px;
  }

  .timeline-num { margin-bottom: 0; flex-shrink: 0; }

  .cards-grid--2,
  .cards-grid--3,
  .cards-grid--4 { grid-template-columns: 1fr; }

  .comparison-wrap { grid-template-columns: 1fr; }

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

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

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

  .hero-actions { flex-direction: column; }
  .hero-actions .btn { justify-content: center; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 34px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links { justify-content: center; }
  .partner-logo-card { width: 160px; height: 76px; }
  .partner-logo { width: 120px; height: 46px; }
  .partners-marquee-outer { margin: 24px 0 16px; }
  .pricing-pair,
  .pricing-pair--centered { grid-template-columns: 1fr; }
  .pricing-card { min-height: auto; }
}

/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb {
  background: var(--ivory);
  border-bottom: 1px solid var(--gray-200);
  padding: 10px 0;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--gray-400);
}

.breadcrumb-list li { display: flex; align-items: center; gap: 6px; }

.breadcrumb-list li:not(:last-child)::after {
  content: "›";
  color: var(--gray-400);
}

.breadcrumb-list a {
  color: var(--gray-600);
  transition: color 0.15s;
}

.breadcrumb-list a:hover { color: var(--blue); }

.breadcrumb-list li[aria-current="page"] { color: var(--dark); font-weight: 500; }

/* ============================================
   AUDIENCE RADAR DECORATION
   ============================================ */

.audience-radar {
  position: absolute;
  pointer-events: none;
  /* Convert to white so rings are visible on blue/red card backgrounds */
  filter: brightness(0) invert(1);
  opacity: 0.22;
}

.audience-radar--blue {
  bottom: -80px;
  right: -80px;
  width: 360px;
}

.audience-radar--red {
  top: -80px;
  left: -80px;
  width: 360px;
  transform: scaleX(-1);
}

/* ============================================
   LINKEDIN SHOWCASE
   ============================================ */

.linkedin-showcase {
  background: var(--dark);
  padding: 0;
  overflow: hidden;
}

.linkedin-banner-wrap {
  width: 100%;
  height: clamp(200px, 33vw, 460px);
  overflow: hidden;
  position: relative;
}

.linkedin-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@media (max-width: 640px) {
  .linkedin-banner-wrap { height: 180px; }
  .audience-radar--blue,
  .audience-radar--red { width: 240px; }
}

@media (max-width: 900px) {
  .aa-grid { grid-template-columns: 1fr; gap: 16px; }
  .aa-vs { display: none; }
  .aa-savings { flex-direction: column; text-align: center; gap: 10px; padding: 16px 20px; }
  .stats-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .stats-strip-item { padding: 28px 20px; }
  .stats-strip-item:nth-child(2) { border-right: none; }
  .stats-strip-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.06); }
  .stats-strip-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.06); border-right: none; }
}



@media (max-width: 860px) {
  .app-layout { grid-template-columns: 1fr; gap: 48px; }
  .app-phone-wrap { display: flex; justify-content: center; }
  .app-phone-badge { right: auto; left: 50%; transform: translateX(60px); }
}

@media (max-width: 640px) {
  .app-stores { flex-direction: column; align-items: flex-start; }
  .radar-notif { display: none; }
}

/* ============================================
   SEO — TEXTE LOCAL + ZONES
   ============================================ */

.seo-text {
  max-width: 820px;
  margin: 0 auto 48px;
}

.seo-text p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.78;
  margin-bottom: 18px;
}

.seo-text p:last-child { margin-bottom: 0; }

.seo-text strong {
  color: var(--dark);
  font-weight: 600;
}

.zone-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto;
}

.zone-chip {
  background: var(--ivory);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-600);
}

@media (max-width: 640px) {
  .zone-grid { gap: 8px; }
  .zone-chip { font-size: 0.78rem; padding: 6px 12px; }
}

/* ====================================================
   DESIGN v2 — Waves as Universe · Radars as Story
   ==================================================== */

/* --- Wave Section Dividers --- */
.wave-sep {
  display: block;
  line-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 4;
  margin: -2px 0;  /* overlap 2px pour éliminer tout gap pixel */
  height: 96px;
}
.wave-sep svg {
  display: block;
  width: 100%;
  height: 96px;    /* hauteur fixe — cohérente à toutes largeurs */
}
/* Force ivoire sur la wave hero→dark — le fill="#fde8e8" inline est ignoré */
.hero--red + .wave-sep svg rect { fill: #FAF7F4; }

/* --- Hero Split Layout (text left / radar right) --- */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Remove max-width constraint inside split */
.hero-split .hero-content { max-width: none; }

/* Upgrade hero waves: bigger, bolder, animated */
.hero-wave--tr {
  top: -60px !important;
  right: -80px !important;
  width: 540px !important;
  opacity: 0.38 !important;
  transform: rotate(12deg) !important;
}
.hero-wave--bl {
  bottom: -80px !important;
  left: -60px !important;
  width: 420px !important;
  opacity: 0.30 !important;
  animation: wave-float-bl 7s ease-in-out infinite;
}
.hero-wave--br {
  bottom: -40px !important;
  right: 5% !important;
  width: 340px !important;
  opacity: 0.22 !important;
  animation: wave-float-br 9s ease-in-out infinite;
}

@keyframes wave-float-bl {
  0%, 100% { transform: rotate(-20deg) scaleX(-1) translateY(0px); }
  50%       { transform: rotate(-20deg) scaleX(-1) translateY(-20px); }
}
@keyframes wave-float-br {
  0%, 100% { transform: rotate(12deg) translateY(0px); }
  50%       { transform: rotate(12deg) translateY(-14px); }
}

/* --- Radar Hero Visualization --- */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.radar-hero-wrap {
  position: relative;
  width: 380px;
  height: 380px;
}

.radar-hero-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(66,142,211,0.10) 0%,
    rgba(66,142,211,0.04) 65%,
    transparent 100%
  );
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(66,142,211,0.14);
  box-shadow:
    0 0 0 12px rgba(66,142,211,0.03),
    0 0 0 28px rgba(66,142,211,0.02),
    0 24px 80px rgba(66,142,211,0.10);
}

.radar-hero-svg {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: contain;
  opacity: 0.95;
}

.radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 278deg,
    rgba(66,142,211,0.04) 305deg,
    rgba(66,142,211,0.22) 340deg,
    rgba(66,142,211,0.08) 355deg,
    transparent 360deg
  );
  animation: radar-spin 4.5s linear infinite;
  z-index: 3;
}

@keyframes radar-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pings = extras disponibles */
.radar-ping {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--blue);
  transform: translate(-50%, -50%);
  z-index: 4;
  display: block;
}

.radar-ping::before,
.radar-ping::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  inset: 0;
  animation: ping-wave 2.8s ease-out infinite;
}
.radar-ping::after { animation-delay: 1s; }

@keyframes ping-wave {
  0%   { inset: 0; opacity: 0.85; }
  100% { inset: -22px; opacity: 0; }
}

.radar-ping--yellow { background: var(--yellow); color: var(--yellow); }
.radar-ping--green  { background: var(--green);  color: var(--green);  }
.radar-ping--red    { background: var(--red);    color: var(--red);    }

.radar-hero-label {
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  padding: 9px 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Wave intégrée dans la bannière LinkedIn */
.linkedin-exit-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  display: block;
  z-index: 3;
}

/* --- LinkedIn Showcase — Brand Universe Opener --- */
.linkedin-banner-wrap { position: relative; }

.linkedin-overlay {
  position: absolute;
  inset: 0;
  background:
    /* panneau gauche pour lisibilité du texte */
    linear-gradient(90deg, rgba(26,26,26,0.86) 0%, rgba(26,26,26,0.55) 40%, transparent 70%),
    /* fondu bas → #1A1A1A pour transition fluide avec la wave */
    linear-gradient(to bottom, transparent 20%, rgba(26,26,26,0.88) 52%, #1A1A1A 68%);
  display: flex;
  align-items: center;
  z-index: 2;
}

.linkedin-overlay-inner {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
}

.linkedin-overlay-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: white;
  margin-bottom: 24px;
}

.linkedin-overlay-tagline .hl-green  { color: #4aab97; }
.linkedin-overlay-tagline .hl-yellow { color: var(--yellow); }

.linkedin-overlay-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}

.linkedin-overlay-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.linkedin-overlay-stat strong {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: white;
  line-height: 1;
  letter-spacing: -0.03em;
}

.linkedin-overlay-stat span {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Audience Cards — h3 override (Blocksy specificity guard) --- */
.audience-card h3 { color: white !important; font-size: 2.1rem !important; }

/* --- CTA Section — Dark Universe --- */
.cta-section--dark {
  background: var(--dark) !important;
}
.cta-section--dark .section-title { color: white; }
.cta-section--dark .section-sub { color: rgba(255,255,255,0.62); max-width: 520px; }
.cta-section--dark .section-eyebrow { color: var(--yellow); }
.cta-section--dark .badge--blue {
  background: rgba(66,142,211,0.18);
  border-color: rgba(66,142,211,0.4);
  color: #7ab8e8;
}
.cta-section--dark .trust-bar { border-top-color: rgba(255,255,255,0.10); }
.cta-section--dark .trust-item { color: rgba(255,255,255,0.50); }
.cta-section--dark .trust-icon { color: var(--green); }

/* Wave fills in dark CTA */
.cta-wave-dark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.cta-wave-dark--a {
  top: 30px; left: -130px;
  width: 560px;
  opacity: 0.40;
  transform: rotate(-16deg);
}
.cta-wave-dark--b {
  bottom: -120px; right: -110px;
  width: 520px;
  opacity: 0.32;
  transform: rotate(15deg);
}
.cta-wave-dark--c {
  top: 20px; right: -70px;
  width: 360px;
  opacity: 0.22;
  transform: rotate(-8deg);
}
.cta-section--dark .container { position: relative; z-index: 1; }

/* Radar accent in extras page hero */
.hero-radar-accent {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  pointer-events: none;
  opacity: 0.12;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .hero-split { grid-template-columns: 1fr 340px; gap: 44px; }
  .radar-hero-wrap { width: 320px; height: 320px; }
}
@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-split .phone-mockup-wrap { display: none; }
  .hero-split .phones-visual-wrap { display: none; }
}

@media (max-width: 860px) {
  .hero--red .hero-visual { display: block; padding-bottom: 8px; }
  .hero--red .hero-pm-card { max-width: 280px; margin: 0 auto; }
  .hero-notif-stack { display: none; }
}
@media (max-width: 640px) {
  .linkedin-overlay {
    background: linear-gradient(180deg, rgba(26,26,26,0.75) 0%, rgba(26,26,26,0.25) 100%);
  }
  .linkedin-overlay-stats { gap: 20px; }
  .linkedin-overlay-inner { padding: 0 20px; }
  .linkedin-overlay-tagline { margin-bottom: 14px; }
}

/* ============================================
   HERO TRUST MINI — extras page
   ============================================ */

.hero-trust-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 0.78rem;
  color: var(--gray-600);
  font-weight: 500;
  margin-top: 4px;
}

.hero-trust-mini .sep {
  margin: 0 10px;
  color: var(--gray-400);
}

/* ============================================
   CALC CALLOUT — comparison section
   ============================================ */

.calc-callout {
  max-width: 720px;
  margin: 36px auto 0;
  background: var(--green-light);
  border: 1px solid rgba(57,121,108,0.18);
  border-radius: var(--radius-lg);
  padding: 18px 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.55;
}

.calc-label {
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--green);
  background: rgba(57,121,108,0.12);
  border: 1px solid rgba(57,121,108,0.2);
  border-radius: 50px;
  padding: 4px 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

.calc-bad  { color: var(--red);   font-weight: 700; }
.calc-good { color: var(--green); font-weight: 700; }

/* ============================================
   STATS STRIP — chiffres-clés extras page
   ============================================ */

.stats-strip-wrap {
  background: var(--white);
  padding: 8px 0 72px;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-width: var(--max-w);
  margin: 0 auto;
}

.stat-strip-item {
  padding: 30px 24px;
  text-align: center;
  border-right: 1px solid var(--gray-200);
}

.stat-strip-item:last-child { border-right: none; }

.stat-strip-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 7px;
}

.stat-strip-item:nth-child(1) strong { color: var(--green); }
.stat-strip-item:nth-child(2) strong { color: var(--blue); }
.stat-strip-item:nth-child(3) strong { color: var(--yellow); }
.stat-strip-item:nth-child(4) strong { color: var(--blue); }

.stat-strip-item span {
  font-size: 0.79rem;
  color: var(--gray-400);
  font-weight: 500;
  line-height: 1.4;
}

/* ============================================
   PHONES VISUAL — hero extras (v5 — éventail 3 écrans)
   ============================================ */

.phones-visual-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 56px;
  position: relative;
}

.pv-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 52% 38%, rgba(66,142,211,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 72%, rgba(57,121,108,0.09) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* === Fan de 3 téléphones === */
.phones-fan {
  position: relative;
  width: 370px;
  height: 420px;
  flex-shrink: 0;
  z-index: 1;
}

.pv-phone {
  position: absolute;
  width: 158px;
  height: 342px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--ivory);
  box-shadow:
    0 14px 48px rgba(0,0,0,0.18),
    0 4px 14px rgba(0,0,0,0.09),
    0 0 0 1px rgba(0,0,0,0.06);
}

.pv-phone--center {
  width: 174px;
  height: 375px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 3;
  box-shadow:
    0 24px 72px rgba(0,0,0,0.22),
    0 8px 22px rgba(0,0,0,0.12),
    0 0 0 1px rgba(0,0,0,0.06);
  animation: pv-float 6s ease-in-out infinite;
}

.pv-phone--left {
  left: 4px;
  top: 44px;
  transform: rotate(-9deg);
  z-index: 1;
  opacity: 0.80;
}

.pv-phone--right {
  right: 4px;
  top: 44px;
  transform: rotate(8deg);
  z-index: 2;
  opacity: 0.88;
}

@keyframes pv-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-8px); }
}

/* === Status bar === */
.pvp-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px 3px;
  background: var(--ivory);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  color: var(--dark);
}

.pvp-bar--light { background: white; }

.pvp-time {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pvp-icons {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* === ÉCRAN PROFIL (gauche) === */
.pvp-profile {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--ivory);
  height: calc(100% - 30px);
  overflow: hidden;
}

.pvp-logo-sm {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.03em;
  display: block;
  text-align: center;
}

.pv-amp { color: var(--yellow); }
.pv-dot { color: var(--red); }

.pvp-profile-sub {
  font-size: 0.46rem;
  color: var(--gray-400);
  font-weight: 500;
  margin-top: 1px;
  margin-bottom: 12px;
}

.pvp-avatar-lg {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--blue) 0%, #5EA8E6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-display);
  font-size: 1.10rem;
  font-weight: 800;
  margin-bottom: 7px;
  box-shadow: 0 6px 18px rgba(66,142,211,0.35);
  flex-shrink: 0;
}

.pvp-pname {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}

.pvp-stars-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 9px;
}

.pvp-rating {
  font-size: 0.50rem;
  font-weight: 600;
  color: var(--gray-400);
}

.pvp-verified-row {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.pvp-vtag {
  font-size: 0.43rem;
  font-weight: 700;
  background: var(--green-light);
  color: var(--green);
  padding: 2px 6px;
  border-radius: 50px;
  letter-spacing: 0.01em;
}

.pvp-missions-done {
  font-size: 0.48rem;
  color: var(--gray-400);
  font-weight: 500;
  margin-bottom: 9px;
}

.pvp-dispo-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--green-light);
  color: var(--green);
  font-size: 0.48rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  letter-spacing: 0.005em;
}

.pvp-dispo-dot {
  width: 5px;
  height: 5px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

/* === ÉCRAN SWIPE (centre) === */
.pvp-swipe {
  display: flex;
  flex-direction: column;
  height: calc(100% - 30px);
  background: var(--ivory);
  overflow: hidden;
}

.pvp-sw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 12px 4px;
  flex-shrink: 0;
}

.pvp-sw-logo {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.03em;
  line-height: 1;
}

.pvp-sw-loc {
  font-size: 0.46rem;
  color: var(--gray-400);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

.pvp-sw-loc-dot {
  width: 4px;
  height: 4px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}

.pvp-sw-av {
  width: 26px;
  height: 26px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-display);
  font-size: 0.60rem;
  font-weight: 700;
  flex-shrink: 0;
}

.pvp-sw-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  margin-bottom: 7px;
  flex-shrink: 0;
}

.pvp-sw-label {
  font-family: var(--font-display);
  font-size: 0.70rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.01em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvp-sw-count {
  font-size: 0.48rem;
  font-weight: 700;
  color: var(--green);
  background: var(--green-light);
  padding: 2px 7px;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* === LA CARTE MISSION === */
.pvp-card {
  flex: 1;
  margin: 0 10px;
  border-radius: 17px;
  overflow: hidden;
  background: white;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.14),
    0 2px 8px rgba(0,0,0,0.07),
    0 0 0 1px rgba(0,0,0,0.04);
  min-height: 0;
}

.pvp-card-photo {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #0C1B30;
  min-height: 0;
}

.pvp-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pvp-card-photo-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.12) 0%,
    rgba(0,0,0,0.03) 40%,
    rgba(0,0,0,0.52) 100%
  );
}

.pvp-card-photo-top {
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.pvp-type-badge {
  font-size: 0.44rem;
  font-weight: 700;
  background: rgba(10,10,10,0.66);
  backdrop-filter: blur(6px);
  color: white;
  padding: 2px 7px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.pvp-dist {
  font-size: 0.42rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.50);
  display: flex;
  align-items: center;
  gap: 2px;
}

.pvp-match-pill {
  position: absolute;
  bottom: 7px;
  left: 7px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(57,121,108,0.90);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(57,121,108,0.55);
  color: rgba(255,255,255,0.96);
  font-size: 0.44rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 50px;
  letter-spacing: 0.01em;
}

.pvp-match-pulse {
  width: 5px;
  height: 5px;
  background: #7fffd4;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.pvp-card-info {
  padding: 7px 10px 8px;
  flex-shrink: 0;
}

.pvp-card-estab {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2px;
}

.pvp-card-meta {
  font-size: 0.44rem;
  color: var(--gray-400);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 5px;
}

.pvp-card-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pvp-card-rate {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.03em;
}

.pvp-card-rate span {
  font-size: 0.92rem;
  color: var(--dark);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.pvp-card-rate {
  white-space: nowrap;
}

.pvp-card-tags {
  display: flex;
  gap: 3px;
}

.pvp-tag-incl {
  font-size: 0.42rem;
  font-weight: 600;
  background: var(--blue-light);
  color: var(--blue);
  padding: 2px 5px;
  border-radius: 50px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.pvp-tag-urg {
  font-size: 0.42rem;
  font-weight: 600;
  background: #fdecea;
  color: var(--red);
  padding: 2px 4px;
  border-radius: 50px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Actions de swipe */
.pvp-sw-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 6px;
  flex-shrink: 0;
}

.pvp-btn-skip,
.pvp-btn-save {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.08);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.pvp-btn-skip { color: var(--gray-400); }
.pvp-btn-save { color: var(--blue); border-color: rgba(66,142,211,0.20); }

.pvp-btn-apply {
  flex: 1;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 10px 10px;
  font-size: 0.58rem;
  font-weight: 700;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: default;
  box-shadow: 0 4px 14px rgba(66,142,211,0.42);
}

/* Nav bas */
.pvp-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 10px 4px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(250,247,244,0.96);
  flex-shrink: 0;
}

.pvp-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--gray-300);
  position: relative;
}

.pvp-nav-item--active { color: var(--blue); }

.pvp-nav-dot {
  width: 3px;
  height: 3px;
  background: var(--blue);
  border-radius: 50%;
}

.pvp-nav-notif { position: relative; }

.pvp-notif-dot {
  position: absolute;
  top: -1px;
  right: -2px;
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
  border: 1.5px solid rgba(250,247,244,0.96);
}

.pvp-homebar {
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250,247,244,0.96);
  flex-shrink: 0;
}

.pvp-homebar span {
  display: block;
  width: 72px;
  height: 3px;
  background: var(--dark);
  border-radius: 2px;
  opacity: 0.14;
}

/* === ÉCRAN MATCH CONFIRMÉ (droite) === */
.pvp-match-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px 12px;
  background: var(--ivory);
  height: calc(100% - 30px);
  overflow: hidden;
}

.pvp-ms-logo {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.pvp-ms-check {
  width: 52px;
  height: 52px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
  box-shadow: 0 8px 22px rgba(57,121,108,0.35);
  flex-shrink: 0;
}

.pvp-ms-title {
  font-family: var(--font-display);
  font-size: 0.80rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
  margin-bottom: 3px;
  text-align: center;
}

.pvp-ms-sub {
  font-size: 0.44rem;
  color: var(--gray-400);
  font-weight: 500;
  margin-bottom: 13px;
  text-align: center;
  line-height: 1.4;
}

.pvp-ms-card {
  width: 100%;
  background: white;
  border-radius: 12px;
  padding: 9px 10px;
  margin-bottom: 11px;
  box-shadow:
    0 2px 12px rgba(0,0,0,0.07),
    0 0 0 1px rgba(0,0,0,0.04);
}

.pvp-ms-estab {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvp-ms-time-row {
  font-size: 0.44rem;
  color: var(--gray-400);
  font-weight: 500;
  margin-bottom: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvp-ms-contact {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--blue-light);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 0.44rem;
  font-weight: 600;
  color: var(--blue);
  overflow: hidden;
}

.pvp-ms-cta {
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--blue);
  text-align: center;
}

/* Badge "Bientôt disponible" */
.pv-live {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--dark);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.09),
    0 0 0 1px rgba(0,0,0,0.04);
  margin-top: 20px;
  white-space: nowrap;
  z-index: 1;
  position: relative;
}

/* === ÉTABLISSEMENT — Adaptation phones fan === */
.pv-glow--red {
  background:
    radial-gradient(ellipse at 52% 38%, rgba(229,75,75,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 72%, rgba(255,181,99,0.08) 0%, transparent 45%);
}

.app-layout--phones {
  grid-template-columns: 1fr 430px;
}

/* Dashboard (téléphone gauche, vue établissement) */
.pvp-dash {
  padding: 9px 12px 12px;
  background: var(--ivory);
  height: calc(100% - 30px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pvp-dash-eyebrow {
  font-size: 0.40rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  margin: 4px 0 7px;
}

.pvp-miss-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  margin-bottom: 8px;
}

.pvp-miss-card {
  background: white;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
}

.pvp-miss-card-title {
  font-family: var(--font-display);
  font-size: 0.60rem;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvp-miss-card-meta {
  font-size: 0.42rem;
  color: var(--gray-400);
  font-weight: 500;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvp-miss-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(229,75,75,0.10);
  border-radius: 50px;
  padding: 2px 7px;
  font-size: 0.42rem;
  font-weight: 700;
  color: var(--red);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pvp-miss-badge--wait {
  background: rgba(0,0,0,0.06);
  color: var(--gray-400);
}

.pvp-add-btn {
  background: var(--red);
  border-radius: 9px;
  padding: 8px 10px;
  text-align: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: white;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Candidatures (téléphone centre, vue établissement) */
.pvp-cands {
  display: flex;
  flex-direction: column;
  height: calc(100% - 30px);
  background: var(--ivory);
  overflow: hidden;
}

.pvp-mission-tag {
  font-size: 0.42rem;
  color: var(--gray-400);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

.pvp-mission-dot {
  width: 4px;
  height: 4px;
  background: var(--red);
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.pvp-cand-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 10px;
  margin-bottom: 7px;
  flex: 1;
  overflow: hidden;
}

.pvp-cand-card {
  background: white;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
}

.pvp-cand-card--dim { opacity: 0.55; }

.pvp-cand-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.55rem;
  color: white;
  flex-shrink: 0;
}

.pvp-cand-av--blue { background: var(--blue); }

.pvp-cand-info { flex: 1; min-width: 0; }

.pvp-cand-info strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.60rem;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvp-cand-info span {
  font-size: 0.42rem;
  color: var(--gray-400);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvp-cand-stars {
  font-size: 0.52rem;
  color: var(--yellow);
  flex-shrink: 0;
}

.pvp-cand-confirm {
  margin: 0 10px 10px;
  background: var(--red);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 4px 14px rgba(229,75,75,0.32);
  border: none;
  cursor: default;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1060px) {
  .phones-fan { width: 320px; height: 380px; }
  .pv-phone { width: 138px; height: 298px; border-radius: 22px; }
  .pv-phone--center { width: 152px; height: 328px; }
  .pvp-avatar-lg { width: 40px; height: 40px; font-size: 0.90rem; }
  .pvp-card-rate, .pvp-card-rate span { font-size: 0.55rem; }
  .pvp-card-tags { flex-shrink: 0; }
  .pvp-btn-skip, .pvp-btn-save { width: 28px; height: 28px; }
  .pvp-sw-actions { gap: 6px; padding: 5px 8px 6px; }
}

@media (max-width: 860px) {
  .phones-visual-wrap { display: none; }
  .app-layout--phones { grid-template-columns: 1fr; }
}

/* ============================================
   APP STORE BADGES — dark CTA section
   ============================================ */



.app-stores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 24px 0 36px;
}

.app-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  padding: 12px 22px;
  color: white;
  min-width: 152px;
  cursor: default;
  transition: background 0.2s, border-color 0.2s;
}

.asb-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.asb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asb-text span {
  font-size: 0.64rem;
  opacity: 0.55;
  letter-spacing: 0.01em;
}

.asb-text strong {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-store-badge--link { cursor: pointer; }
.app-store-badge--link:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.35);
}

/* ============================================
   TÉMOIGNAGES — variante 3 colonnes
   ============================================ */

.testimonials-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
}

/* ============================================
   RESPONSIVE — nouveaux composants
   ============================================ */

@media (max-width: 900px) {
  .testimonials-grid--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip-item:nth-child(2) { border-right: none; }
  .stat-strip-item:nth-child(3) {
    border-top: 1px solid var(--gray-200);
    border-right: 1px solid var(--gray-200);
  }
  .stat-strip-item:nth-child(4) { border-top: 1px solid var(--gray-200); }

  .calc-callout { font-size: 0.85rem; }
}

@media (max-width: 600px) {
  .testimonials-grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .stats-strip { grid-template-columns: 1fr; }
  .stat-strip-item { border-right: none !important; border-bottom: 1px solid var(--gray-200); }
  .stat-strip-item:last-child { border-bottom: none; }
  .app-stores { flex-direction: column; align-items: center; }
  .phone-frame { width: 215px; }
  .hero-trust-mini { font-size: 0.72rem; }
}

/* ============================================
   HERO — APP STORE BADGES
   ============================================ */

.hero-app-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.app-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  transition: all 0.2s;
}

.app-badge-pill:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(66,142,211,0.15);
  transform: translateY(-1px);
}

.app-badge-icon { flex-shrink: 0; display: flex; align-items: center; }
.app-badge-text { display: flex; flex-direction: column; gap: 2px; }
.app-badge-sub { font-size: 0.62rem; font-weight: 500; color: var(--gray-400); letter-spacing: 0.03em; line-height: 1; text-transform: uppercase; }
.app-badge-name { font-size: 0.82rem; font-weight: 700; color: var(--dark); line-height: 1; }
.hero-app-label { font-size: 0.78rem; color: var(--gray-400); font-weight: 500; }

@media (max-width: 768px) {
  .hero-app-row { gap: 10px; margin-top: 20px; }
  .app-badge-pill { padding: 9px 14px; }
}

/* ============================================
   TÉMOIGNAGES — RATING AGGREGATE
   ============================================ */

.rating-aggregate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green-light);
  border: 1px solid rgba(57,121,108,0.2);
  border-radius: 100px;
  padding: 8px 20px;
  margin-bottom: 16px;
}

.rating-stars { color: #FBBF24; letter-spacing: 2px; font-size: 0.9rem; }
.rating-aggregate strong { font-family: var(--font-display); font-weight: 800; color: var(--green); font-size: 0.9rem; }
.rating-aggregate span { color: var(--gray-600); font-size: 0.78rem; }

@media (max-width: 480px) {
  .rating-aggregate { gap: 8px; padding: 7px 14px; }
  .rating-aggregate span { display: none; }
}

/* ============================================
   HERO — STATS ROW (remplace les cards)
   ============================================ */

.hero-stats-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 0;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 24px;
}

.hero-stat:first-child { padding-left: 0; }

.hero-stat-val {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--dark);
}

.hero-stat-val--blue { color: var(--blue); }
.hero-stat-val--yellow { color: var(--yellow); }
.hero-stat-val--green { color: var(--green); }
.hero-stat-val--red { color: var(--red); }

.hero-stat span {
  font-size: 0.72rem;
  color: var(--gray-400);
  font-weight: 500;
  white-space: nowrap;
}

.hero-stat-sep {
  width: 1px;
  height: 36px;
  background: var(--gray-200);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hero-stats-row { flex-wrap: wrap; gap: 4px; }
  .hero-stat { padding: 10px 16px; }
  .hero-stat:first-child { padding-left: 0; }
  .hero-stat-sep { display: none; }
}

/* ============================================
   TIMELINE — TIME BADGE
   ============================================ */

.timeline-time {
  display: inline-block;
  background: var(--ivory);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gray-400);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

/* ============================================
   LIVE FEED WIDGET
   ============================================ */

.live-feed {
  background: white;
  border-radius: 20px;
  padding: 22px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.09),
    0 4px 16px rgba(0,0,0,0.05);
  border: 1px solid var(--gray-200);
  max-width: 360px;
  width: 100%;
}

.live-feed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-200);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 2s ease-in-out infinite;
  flex-shrink: 0;
}

.live-feed-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.live-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: feed-in 0.35s ease both;
}

@keyframes feed-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.live-feed-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
}

.live-feed-icon--green  { background: var(--green-light);  color: var(--green); }
.live-feed-icon--blue   { background: var(--blue-light);   color: var(--blue); }
.live-feed-icon--yellow { background: var(--yellow-light); color: #c47a10; }
.live-feed-icon--red    { background: var(--red-light);    color: var(--red); }

.live-feed-body { flex: 1; min-width: 0; }

.live-feed-body strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 2px;
  line-height: 1.3;
}

.live-feed-body span {
  font-size: 0.72rem;
  color: var(--gray-400);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}

.live-feed-time {
  font-size: 0.66rem;
  color: var(--gray-400);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}

.live-feed-footer {
  border-top: 1px solid var(--gray-200);
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.live-stat { text-align: center; }

.live-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}

.live-stat span {
  font-size: 0.6rem;
  color: var(--gray-400);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.live-stat--blue  strong { color: var(--blue); }
.live-stat--green strong { color: var(--green); }

.live-stat-divider {
  width: 1px;
  height: 32px;
  background: var(--gray-200);
  flex-shrink: 0;
}

/* ============================================
   SAVINGS VISUAL — comparaison intérim vs Job&Go
   ============================================ */

.savings-visual {
  max-width: 680px;
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  background: var(--ivory);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  border: 1px solid var(--gray-200);
}

.savings-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.si-tag {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 50px;
  display: inline-block;
  white-space: nowrap;
}

.si-tag--bad  { background: var(--red-light);  color: var(--red); }
.si-tag--good { background: var(--green-light); color: var(--green); }

.si-amount {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.si-amount--bad  { color: var(--red); }
.si-amount--good { color: var(--green); }

.si-desc {
  font-size: 0.78rem;
  color: var(--gray-400);
  line-height: 1.5;
}

.savings-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.savings-vs-text {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.savings-delta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--green-light);
  border: 1.5px solid rgba(57,121,108,0.22);
  border-radius: 50px;
  padding: 10px 16px;
  white-space: nowrap;
}

.savings-delta-amount {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.02em;
  line-height: 1;
}

.savings-delta-label {
  font-size: 0.59rem;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.savings-context {
  text-align: center;
  font-size: 0.77rem;
  color: var(--gray-400);
  margin-bottom: 44px;
}

/* ============================================
   CARD TOP ACCENT — avantages extras
   ============================================ */

.card--blue-top   { border-top: 3px solid var(--blue);   }
.card--green-top  { border-top: 3px solid var(--green);  }
.card--yellow-top { border-top: 3px solid var(--yellow); }
.card--red-top    { border-top: 3px solid var(--red);    }

/* ============================================
   CTA FORM SPLIT — section inscription dark
   ============================================ */

.cta-form-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 52px;
  align-items: center;
  max-width: 900px;
  margin: 0 auto 40px;
}

.cta-form-left { text-align: left; }

.cta-form-left h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: white;
  margin-bottom: 22px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.cta-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cta-perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.cta-perk-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(74,171,151,0.18);
  border: 1.5px solid rgba(74,171,151,0.38);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  color: #4aab97;
  flex-shrink: 0;
  font-style: normal;
}

/* ============================================
   RESPONSIVE — nouveaux composants extras v3
   ============================================ */

@media (max-width: 820px) {
  .cta-form-split { grid-template-columns: 1fr; gap: 32px; }
  .cta-form-left { text-align: center; }
  .cta-perks { align-items: flex-start; max-width: 340px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .savings-visual {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 20px;
  }
  .savings-vs { flex-direction: row; justify-content: center; gap: 20px; }
}

@media (max-width: 480px) {
  .savings-visual { padding: 22px 16px; }
  .si-amount { font-size: 2.4rem; }
}

/* ========================================================
   DESIGN POLISH — june 2026
   ======================================================== */

/* Timeline time badges — color-coded per step */
.timeline-step:nth-child(1) .timeline-time {
  background: var(--blue-light);
  color: var(--blue);
  border-color: rgba(66,142,211,0.25);
}
.timeline-step:nth-child(2) .timeline-time {
  background: var(--yellow-light);
  color: #b06d10;
  border-color: rgba(255,181,99,0.35);
}
.timeline-step:nth-child(3) .timeline-time {
  background: var(--green-light);
  color: var(--green);
  border-color: rgba(57,121,108,0.25);
}

/* Comparison "after" column — subtle green tint */
.comp-col--after {
  background: linear-gradient(160deg, #f4faf8 0%, #eef7f4 100%);
  border-color: rgba(57,121,108,0.18);
}
.comp-col--after h3 {
  color: var(--green);
}

/* Testimonials — large decorative quote mark */
.testimonial {
  position: relative;
}
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--sable);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.testimonial blockquote {
  position: relative;
  z-index: 1;
}

/* ============================================
   EXTRAS PAGE — section sombre + glass cards
   ============================================ */

.section--dark {
  background: var(--dark);
}

.section--dark .section-title {
  color: white;
}

.section--dark .section-sub {
  color: rgba(255,255,255,0.55);
}

.section--dark .section-eyebrow {
  color: var(--yellow);
  opacity: 1;
}

/* Brandbook : bleu = Extras — override yellow en contexte dark */
.section--dark .section-eyebrow--blue {
  color: #428ED3;
}

/* Brandbook : rouge = Établissement — override yellow en contexte dark */
.section--dark .section-eyebrow--red {
  color: var(--red);
}

/* Accent couleur dans les titres */
.accent-blue { color: #428ED3; }
.accent-red  { color: var(--red); }

.card--glass {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.09);
  color: white;
}

.card--glass h3 {
  color: white;
}

.card--glass p {
  color: rgba(255,255,255,0.58);
}

.card--glass:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-3px);
}

/* ============================================
   HERO BULLETS — liste de bénéfices
   ============================================ */

.hero-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 36px;
  padding: 0;
}

.hero-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--gray-700);
  font-weight: 500;
  line-height: 1.4;
}

.hero-bullet-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* ============================================
   MISSION CARDS — dot coloré + badge salaire
   ============================================ */

.card--mission {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mission-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-bottom: 14px;
  display: block;
  flex-shrink: 0;
}

.card-pay-badge {
  display: inline-flex;
  align-items: center;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 50px;
  margin-top: 14px;
}

/* ============================================
   WAVE DARK — override de couleur de texte
   ============================================ */

.wave-sep--dark svg { display: block; }

/* Comp savings font size bump */
.comp-savings {
  font-size: 0.95rem;
  padding: 20px 28px;
}

/* ============================================
   TYPOGRAPHY POLISH
   ============================================ */

/* Elegant text wrapping — titles never break on a single short word */
.section-title,
.hero-title,
.hero-slogan { text-wrap: balance; }

/* Body copy: prevent orphans (single-word last line) */
.section-sub,
.hero-sub,
.seo-text p,
.testimonial blockquote,
.comp-col li,
.audience-list li { text-wrap: pretty; }

/* Centered section titles: max-width for elegant line breaks */
.section-header--center .section-title {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 14px;
}

/* Hero title: richer contrast against the ivory background */
.hero-title { color: var(--gray-700); }

/* SEO text: auto-hyphenation for dense justified prose */
.seo-text p { hyphens: auto; }

/* Audience caption: pill tag — poids renforcé */
.audience-caption {
  font-weight: 600;
}

/* ============================================
   MINIMALISME — épuration visuelle
   ============================================ */

/* Héros centré : stats + app row + badge symétriques */
.hero-centered .hero-stats-row  { justify-content: center; }
.hero-centered .hero-app-row    { justify-content: center; }
.hero-centered .hero-stat:first-child { padding-left: 24px; }

/* Témoignages : supprimer la grosse guillemet décorative */
.testimonial::before { display: none; }

/* Témoignages : remplacer shadow par une bordure fine */
.testimonial {
  box-shadow: none;
  border: 1px solid var(--gray-200);
}

/* Form card : shadow allégée */
.form-card {
  box-shadow: var(--shadow-sm);
}

/* Section : padding augmenté pour plus d'air */
.section { padding: 104px 0; }

/* Section header : plus d'espace sous le titre */
.section-header { margin-bottom: 64px; }

/* Hero : padding augmenté — le slogan doit respirer */
.hero { padding: 112px 0 96px; }

/* Comp-col — centrage et identité visuelle différenciée */
.comp-col                   { text-align: center; }
.comp-col h3                { justify-content: center; }
.comp-col li                { justify-content: center; }

.comp-col--before {
  background: var(--red-light);
  border-top: 4px solid var(--red);
}
.comp-col--before h3        { color: var(--red); }

.comp-col--after {
  background: linear-gradient(160deg, #f0faf8 0%, #e6f5f1 100%);
  border-top: 4px solid var(--green);
}
.comp-col--after h3 {
  color: var(--green);
  font-size: 1.25rem;
}
.comp-col--after .comp-icon--good {
  background: var(--green);
  color: #fff;
}

/* Comparaison : ombre supprimée sur le wrapper */
.comparison-wrap { box-shadow: none; border: 1px solid var(--gray-200); }

/* hero-visual : visible (le masquage mobile est géré par media query) */

/* ---- Cartes : hover discret, pas de lift ---- */
.card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(66,142,211,0.36);
}
.card--mission:hover     { border-color: var(--gray-200); }
.card--glass:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
}

/* ---- Timeline : numéros blob Job&Go ---- */

/* ---- Hero bullets : check mark nu ---- */
.hero-bullet-check {
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
}

/* ---- CTA perk checks : check mark nu ---- */
.cta-perk-check {
  background: none;
  border: none;
  width: auto;
  height: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: #4aab97;
}

/* ---- Pricing : pas de cercle décoratif en fond ---- */
.pricing-card--popular-blue::after,
.pricing-card--popular-red::after  { display: none; }

/* ---- Phone mockup : glow réduit ---- */
.phone-frame {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 20px 48px rgba(0,0,0,0.16);
}

/* ---- Savings visual : fond blanc, padding serré ---- */
.savings-visual {
  background: white;
  padding: 32px 28px;
}

/* ---- Stats strip : padding serré ---- */
.stat-strip-item { padding: 24px 20px; }
.stats-strip-wrap { padding-bottom: 56px; }

/* ---- Hero mockup row (extras centered hero) ---- */
.hero-mockup-row {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ============================================================
   PLANS — nouvelle section tarifs accueil
   ============================================================ */

.plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 48px;
}

.plan-col-header {
  text-align: center;
  margin-bottom: 20px;
}

.plan-col-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
}

.plan-col-label--blue {
  background: var(--blue-light);
  color: var(--blue);
}

.plan-col-label--red {
  background: var(--red-light);
  color: var(--red);
}

.plan-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.plan-card {
  border-radius: 24px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1.5px solid var(--gray-200);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.plan-card--free {
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}

.plan-card--premium {
  background: var(--ivory);
  border-color: transparent;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.plan-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--dark);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 14px;
  width: fit-content;
}

.plan-card-top {
  margin-bottom: 20px;
}

/* Alignement garanti des features entre les deux colonnes */
/* min-height inclut la ligne .plan-promo présente sur les cartes premium */
.plan-cards--centered .plan-card-top {
  min-height: 132px;
}

.plan-tier {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}

.plan-price {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  line-height: 1;
  margin-bottom: 4px;
}

.plan-amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--dark);
}

.plan-period {
  font-size: 0.78rem;
  color: var(--gray-600);
  margin-bottom: 5px;
}

.plan-commitment {
  font-size: 0.73rem;
  color: var(--gray-600);
  line-height: 1.4;
}

/* Prix barré et tag promo sur les cards premium */
.plan-strike {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.38);
  text-decoration: line-through;
  margin-right: 2px;
  align-self: center;
}

.plan-promo {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 4px 0 0;
}

.plan-card--premium-red .plan-promo,
.plan-card--premium-blue .plan-promo {
  color: var(--yellow);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
  border-top: 1px solid var(--gray-200);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.82rem;
  color: var(--dark);
  line-height: 1.4;
}

.plan-feature--missing {
  color: var(--gray-500, #9ca3af);
}

.plan-feature--missing em {
  color: var(--gray-400, #b5bdc9);
}

.plan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 0;
}

.plan-icon--yes {
  background: #e6f3ee;
}

.plan-icon--yes::after {
  content: "✓";
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}

.plan-icon--no {
  background: #f0efed;
}

.plan-icon--no::after {
  content: "×";
  font-size: 0.8rem;
  font-weight: 700;
  color: #c4c0bb;
  line-height: 1;
}

.plan-cta {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  margin-top: 22px;
  transition: opacity 0.18s, transform 0.18s;
}

.plan-cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.plan-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  z-index: 1;
}

.plan-cta--blue {
  background: var(--blue);
  color: white;
}

.plan-cta--red {
  background: var(--red);
  color: white;
}

.plan-cta--outline-blue {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}

.plan-cta--outline-red {
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red);
}

.plan-detail-link {
  text-align: center;
  margin-top: 16px;
  font-size: 0.8rem;
}

.plan-detail-link a {
  color: var(--gray-600);
  text-decoration: none;
  font-weight: 600;
}

.plan-detail-link a:hover {
  color: var(--dark);
}

@media (max-width: 960px) {
  .plans-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 540px) {
  .plan-cards {
    grid-template-columns: 1fr;
  }
  .plan-card--premium {
    order: -1;
  }
}

/* ============================================================
   PLANS — variante centrée (pages extras / étab)
   ============================================================ */

.plan-cards--centered {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 800px;
  margin: 48px auto 0;
  align-items: stretch;
}

/* ============================================================
   SWIPE STAT — compteur de candidatures (redesign)
   ============================================================ */

.plan-swipe-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 16px;
  padding: 18px 16px 14px;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.plan-swipe-pill--free {
  background: var(--blue-light);
  border: 1.5px solid rgba(66,142,211,0.15);
}

.plan-swipe-pill--premium {
  background: linear-gradient(135deg, #FFB563 0%, #f5a44e 100%);
}

.plan-swipe-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
  display: block;
}

.plan-swipe-pill--premium .plan-swipe-num {
  color: #fff;
}

.plan-swipe-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.plan-swipe-info strong {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.2;
}

.plan-swipe-pill--premium .plan-swipe-info strong {
  color: rgba(255,255,255,0.95);
}

.plan-swipe-info span {
  font-size: 0.68rem;
  color: var(--gray-600);
  letter-spacing: 0.02em;
}

.plan-swipe-pill--premium .plan-swipe-info span {
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   CTABLE — tableau comparatif Agence vs Job&Go (redesign)
   ============================================================ */

.ctable-wrap {
  margin-top: 40px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.04),
    0 8px 32px rgba(0,0,0,0.09);
}

/* CSS grid — pas de <table> pour un meilleur contrôle */
.ctable {
  width: 100%;
  border-collapse: collapse;
  background: white;
  font-size: 0.875rem;
}

/* En-tête colonnes */
.ctable thead {
  display: grid;
  grid-template-columns: 2fr 1.1fr 1.1fr;
}

.ctable thead tr {
  display: contents;
}

.ctable-th {
  padding: 20px 24px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
}

.ctable-th--label {
  text-align: left;
  background: #faf9f7;
  color: var(--gray-600);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 20px 28px;
}

.ctable-th--agency {
  background: #f2f1ef;
  color: #9a9994;
}

.ctable-th--jag {
  background: var(--blue);
  color: #fff;
}

.ctable-th--jag-red {
  background: var(--red);
  color: #fff;
}

/* Lignes */
.ctable tbody {
  display: block;
}

.ctable tbody tr {
  display: grid;
  grid-template-columns: 2fr 1.1fr 1.1fr;
  border-top: 1px solid #f0ede9;
  transition: background 0.12s ease;
}

.ctable tbody tr:hover {
  background: #faf9f7;
}

.ctable-row--alt {
  background: #fdfcfb;
}

.ctable-label {
  padding: 16px 28px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.45;
  display: flex;
  align-items: center;
}

.ctable-cell {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.35;
}

.ctable-cell--agency {
  color: #b0ada8;
}

.ctable-cell--jag {
  color: var(--dark);
  font-weight: 500;
}

/* Icônes CSS — pas d'emoji */
.ci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

.ci--ok {
  background: #e6f3ee;
  color: var(--green);
}

.ci--ok::after {
  content: "✓";
}

.ci--no {
  background: #f0efed;
  color: #c4c0bb;
}

.ci--no::after {
  content: "×";
  font-size: 0.9rem;
}

/* CTA sous le tableau */
.ctable-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
}

.ctable-cta-note {
  font-size: 0.76rem;
  color: var(--gray-600);
  letter-spacing: 0.01em;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 700px) {
  .plan-cards--centered {
    grid-template-columns: 1fr;
  }

  .plan-card--premium,
  .plan-card--premium-blue,
  .plan-card--premium-red {
    order: -1;
  }

  .ctable thead,
  .ctable tbody tr {
    grid-template-columns: 1fr 1fr;
  }

  .ctable-th--label,
  .ctable-label {
    display: none;
  }

  .ctable-cell {
    font-size: 0.78rem;
    padding: 12px 12px;
    flex-direction: column;
    gap: 4px;
  }
}

/* ============================================================
   PLAN CARD — variantes premium colorées (bleu / rouge)
   ============================================================ */

.plan-card--premium-blue {
  background: #428ED3;
  border-color: transparent;
  border-radius: 24px;
  color: white;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 40px rgba(66,142,211,0.52),
    0 2px 8px rgba(0,0,0,0.15);
  z-index: 1;
}

/* Wave décorative — grand, centré en bas, comme les cards Figma */
.plan-card--premium-blue::before {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  height: 220px;
  background: url('https://job-and-go.fr/wp-content/themes/jobandgo/assets/images/wave-white.svg') center / contain no-repeat;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

/* Tout le contenu de la card passe au-dessus de la wave */
.plan-card--premium-blue > .plan-badge,
.plan-card--premium-blue > .plan-badge--invisible,
.plan-card--premium-blue > .plan-card-top,
.plan-card--premium-blue > .plan-features,
.plan-card--premium-blue > .plan-cta--v2-premium {
  position: relative;
  z-index: 1;
}

.plan-card--premium-blue:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 16px 52px rgba(66,142,211,0.62),
    0 4px 12px rgba(0,0,0,0.16);
}

.plan-card--premium-red {
  background: var(--red);
  border-color: var(--red);
  color: white;
}

.plan-card--premium-blue .plan-tier,
.plan-card--premium-red .plan-tier { color: white; }

.plan-card--premium-blue .plan-amount,
.plan-card--premium-red .plan-amount { color: white; }

.plan-card--premium-blue .plan-period,
.plan-card--premium-red .plan-period {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0;
}
.plan-ht {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  vertical-align: middle;
}

.plan-card--premium-blue .plan-commitment,
.plan-card--premium-red .plan-commitment { color: rgba(255,255,255,0.6); }

.plan-card--premium-blue .plan-features,
.plan-card--premium-red .plan-features { border-top-color: rgba(255,255,255,0.2); }

.plan-card--premium-blue .plan-feature,
.plan-card--premium-red .plan-feature { color: rgba(255,255,255,0.92); }

.plan-card--premium-blue .plan-feature--missing,
.plan-card--premium-red .plan-feature--missing { color: rgba(255,255,255,0.38); }

.plan-card--premium-blue .plan-icon--yes,
.plan-card--premium-red .plan-icon--yes { background: rgba(255,255,255,0.22); }

.plan-card--premium-blue .plan-icon--yes::after,
.plan-card--premium-red .plan-icon--yes::after { color: white; }

.plan-card--premium-blue .plan-icon--no,
.plan-card--premium-red .plan-icon--no { background: rgba(255,255,255,0.08); }

.plan-card--premium-blue .plan-icon--no::after,
.plan-card--premium-red .plan-icon--no::after { color: rgba(255,255,255,0.35); }

.plan-card--premium-blue .plan-badge,
.plan-card--premium-red .plan-badge { background: var(--yellow); color: var(--dark); }

/* Badge invisible pour aligner les features avec la carte premium */
.plan-badge--invisible { visibility: hidden; }

/* CTA jaune (couleur brand) sur fond bleu premium */
.plan-card--premium-blue .plan-cta--v2-premium {
  background: #FFB563;
  color: #1A1A1A;
  font-weight: 800;
  box-shadow: 0 2px 14px rgba(255,181,99,0.32);
}
.plan-card--premium-blue .plan-cta--v2-premium:hover {
  background: #f5a844;
  box-shadow: 0 8px 28px rgba(255,181,99,0.5);
  transform: translateY(-2px);
}


/* CTA inversé sur fond coloré */
.plan-card--premium-blue .plan-cta--blue {
  background: white;
  color: var(--blue);
  border-color: white;
}
.plan-card--premium-blue .plan-cta--blue:hover {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.7);
}

.plan-card--premium-red .plan-cta--red {
  background: white;
  color: var(--red);
  border-color: white;
}
.plan-card--premium-red .plan-cta--red:hover {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.7);
}

/* ============================================================
   PLAN ROI — bloc valeur abonnement dans les cartes premium
   ============================================================ */

.plan-roi {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ivory);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(0,0,0,0.05);
}

.plan-roi-num {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  flex-shrink: 0;
  min-width: 44px;
  text-align: center;
}

.plan-roi-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.plan-roi-text strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.25;
}

.plan-roi-text span {
  font-size: 0.68rem;
  color: var(--gray-500);
  line-height: 1.3;
}

.plan-card--premium-blue .plan-roi,
.plan-card--premium-red .plan-roi {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.1);
}

.plan-card--premium-blue .plan-roi-num,
.plan-card--premium-red .plan-roi-num { color: var(--yellow); }

.plan-card--premium-blue .plan-roi-text strong,
.plan-card--premium-red .plan-roi-text strong { color: rgba(255,255,255,0.95); }

.plan-card--premium-blue .plan-roi-text span,
.plan-card--premium-red .plan-roi-text span { color: rgba(255,255,255,0.62); }

/* ============================================================
   PLAN CARDS — V2 : cap + roi-strip + cta redesign
   ============================================================ */

/* Indicateur de volume (remplace le swipe-pill) */
.plan-cap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.plan-cap--free {
  background: var(--blue-light);
  border: 1px solid rgba(66,142,211,0.14);
}

.plan-cap--premium {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.2);
}

.plan-cap-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.plan-cap--premium .plan-cap-num {
  color: #ffffff;
}

.plan-cap-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-cap-info strong {
  font-size: 0.81rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}

.plan-cap--premium .plan-cap-info strong {
  color: rgba(255,255,255,0.95);
}

.plan-cap-info span {
  font-size: 0.7rem;
  color: var(--gray-600);
}

.plan-cap--premium .plan-cap-info span {
  color: rgba(255,255,255,0.55);
}

/* Strip ROI (remplace le bloc plan-roi sur la carte premium) */
.plan-roi-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  margin-top: 6px;
  margin-bottom: 2px;
  border-radius: 10px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 0.76rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}

.plan-roi-strip-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.plan-roi-strip-hl {
  font-weight: 700;
  color: var(--yellow);
}

/* CTA V2 — plan Gratuit */
.plan-cta--v2-free {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 22px;
  border-radius: 50px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-top: 22px;
  background: var(--blue-light);
  color: var(--blue);
  border: 1.5px solid rgba(66,142,211,0.25);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}

.plan-cta--v2-free:hover {
  background: #d3e9f9;
  border-color: var(--blue);
  transform: translateY(-2px);
}

/* CTA V2 — plan Premium */
.plan-cta--v2-premium {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 24px;
  border-radius: 50px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-top: 20px;
  background: #ffffff;
  color: var(--blue);
  box-shadow: 0 2px 20px rgba(255,255,255,0.28);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.plan-cta--v2-premium:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(255,255,255,0.42);
}

/* Flèche animée au hover */
.plan-cta-chevron {
  display: inline-block;
  transition: transform 0.18s ease;
}

.plan-cta--v2-free:hover .plan-cta-chevron,
.plan-cta--v2-premium:hover .plan-cta-chevron {
  transform: translateX(4px);
}

/* CTA V2 — solid blue (cartes à fond clair, home page extras premium) */
.plan-cta--v2-solid-blue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 24px;
  border-radius: 50px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-top: 22px;
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 3px 16px rgba(66,142,211,0.35);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.plan-cta--v2-solid-blue:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(66,142,211,0.45);
}

/* CTA V2 — free-red (cartes Gratuit côté établissements) */
.plan-cta--v2-free-red {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 22px;
  border-radius: 50px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-top: 22px;
  background: var(--red-light);
  color: var(--red);
  border: 1.5px solid rgba(229,75,75,0.2);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}

.plan-cta--v2-free-red:hover {
  background: #fad5d5;
  border-color: var(--red);
  transform: translateY(-2px);
}

/* CTA V2 — solid red (cartes Business / Premium rouge) */
.plan-cta--v2-solid-red {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 24px;
  border-radius: 50px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-top: 22px;
  background: var(--red);
  color: #ffffff;
  box-shadow: 0 3px 16px rgba(229,75,75,0.32);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.plan-cta--v2-solid-red:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(229,75,75,0.42);
}

.plan-cta--v2-free-red:hover .plan-cta-chevron,
.plan-cta--v2-solid-blue:hover .plan-cta-chevron,
.plan-cta--v2-solid-red:hover .plan-cta-chevron {
  transform: translateX(4px);
}

/* ============================================================
   DESIGN REFRESH — Boutons, Cards, Icônes (juin 2026)
   ============================================================ */

/* --- Boutons principaux : lift + ombre colorée au survol --- */
.btn-primary--red { box-shadow: 0 1px 4px rgba(229,75,75,0.10); }
.btn-primary--red:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(229,75,75,0.28);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(66,142,211,0.24);
}

/* Bouton ghost — bordure discrète pour le rendre lisible comme CTA secondaire */
.btn-ghost { border-color: rgba(26,26,26,0.14); }
.btn-ghost:hover { border-color: rgba(26,26,26,0.28); color: var(--dark); }

/* --- Feature cards — lift au survol --- */
.card { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.07); }
.cards-grid--red .card:hover {
  box-shadow: 0 8px 24px rgba(229,75,75,0.09);
  border-color: rgba(229,75,75,0.20);
}

/* Card icon wrap — légèrement plus grand, coins plus arrondis */
.card-icon-wrap { width: 48px; height: 48px; min-width: 48px; font-size: 1.25rem; border-radius: 12px; }


/* --- Notif "Voir profil" — pill cohérent avec le système --- */
.notif-btn { border-radius: 50px; padding: 7px 14px; font-size: 0.7rem; }

/* --- Store badges — pill + lift --- */
.store-badge { border-radius: 50px; }
.store-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }

/* --- Plan CTAs (Formules) — hover soigné --- */
.plan-card .plan-cta--red {
  box-shadow: 0 2px 10px rgba(229,75,75,0.18);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.plan-card .plan-cta--red:hover {
  opacity: 1;
  background: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(229,75,75,0.38);
}
.plan-card .plan-cta--outline-red:hover {
  opacity: 1;
  background: var(--red-light);
  border-color: var(--red);
  transform: translateY(-2px);
}

/* --- Témoignages — lift subtil --- */
.testimonials-grid .testimonial { transition: transform 0.22s ease, box-shadow 0.22s ease; }
.testimonials-grid .testimonial:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.08); }

/* --- Timeline connector — plus fine et élégante --- */
.timeline::before { height: 1px; }

/* --- App feature icons — cohérents --- */
.app-feature-icon { width: 42px; height: 42px; border-radius: 10px; }

/* Phosphor Icons fill — taille dans les conteneurs */
.card-icon-wrap i[class*="ph-"],
.app-feature-icon i[class*="ph-"] {
  font-size: 22px;
  line-height: 1;
  display: block;
}

/* App feature icon — variantes colorées */
.app-feature-icon--red    { color: var(--red);   background: rgba(229,75,75,0.06);   border-color: rgba(229,75,75,0.14); }
.app-feature-icon--yellow { color: #b87300;      background: rgba(255,181,99,0.08);  border-color: rgba(255,181,99,0.22); }
.app-feature-icon--green  { color: var(--green); background: rgba(57,121,108,0.06);  border-color: rgba(57,121,108,0.14); }
.app-feature-icon--blue   { color: var(--blue);  background: rgba(66,142,211,0.06);  border-color: rgba(66,142,211,0.14); }

/* ============================================================
   ICÔNES & BOUTONS — Refresh UX (juin 2026)
   ============================================================ */

/* Flèche SVG dans les boutons — slide au hover */
.btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.btn:hover svg {
  transform: translateX(3px);
}

/* Icon wrap — couleurs d'icônes cohérentes avec le brandbook */
.card-icon-wrap--blue   { color: var(--blue); }
.card-icon-wrap--red    { color: var(--red); }
.card-icon-wrap--green  { color: var(--green); }
.card-icon-wrap--yellow { color: #b5650d; }

/* Icon wrap glass — sections sombres (avantages dark) */
.card-icon-wrap--glass {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.90);
}

/* ============================================================
   POLISH V2 — Hiérarchie & détails visuels (juin 2026)
   ============================================================ */

/* Section eyebrow — dot coloré signature */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section-eyebrow::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Hero trust-mini — icônes SVG alignées */
.trust-mini-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.trust-mini-item svg {
  color: var(--green);
  flex-shrink: 0;
}

/* Témoignages — bordure dorée haut + quote mark subtile */
.testimonials-grid .testimonial {
  border-top: 3px solid #FBBF24;
}

.testimonials-grid .testimonial::before {
  display: block;
  color: rgba(66,142,211,0.09);
}

/* Plan premium bleu — halo lumineux */
.plan-card--premium-blue {
  box-shadow:
    0 0 0 2px rgba(66,142,211,0.18),
    0 16px 48px rgba(66,142,211,0.16);
}

.plan-card--premium-blue:hover {
  box-shadow:
    0 0 0 2px rgba(66,142,211,0.28),
    0 20px 60px rgba(66,142,211,0.24);
  transform: translateY(-4px);
}

/* ============================================================
   POLISH V3 — Détails & animations (juin 2026)
   ============================================================ */

/* Timeline num — variante bleue (complète yellow/green/red existants) */
.timeline-num--blue {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 253 235'%3E%3Cpath d='M237.876 0C255.08 56.5248 258.137 143.32 238.441 235L119.22 229.718L0 224.435C18.3714 138.923 14.5839 60.9576 0.564835 14.8967L237.876 0Z' fill='%23428ED3'/%3E%3C/svg%3E");
  color: white;
}

/* Section eyebrow — variante bleue */
.section-eyebrow--blue { color: var(--blue); }

/* FAQ — animation slide smooth (override display:none) */
.faq-a {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  opacity: 0;
  transition: max-height 0.3s ease, padding-bottom 0.3s ease, opacity 0.25s ease;
}

.faq-item.open .faq-a {
  max-height: 300px;
  padding-bottom: 20px;
  opacity: 1;
}

/* plan-roi-strip-icon — SVG aligné couleur yellow */
.plan-roi-strip-icon { color: var(--yellow); line-height: 0; }

/* ============================================================
   PLAN ROI BANNER — Card color blue (style Figma "Card color - bloc")
   ============================================================ */

.plan-roi-banner {
  background: #428ED3;
  border-radius: 24px;
  padding: 30px 36px;
  max-width: 780px;
  margin: 40px auto 48px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 48px rgba(66,142,211,0.55),
    0 2px 8px rgba(0,0,0,0.18);
}

/* Reflet lumineux en haut (verre) */
.plan-roi-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
}

/* Grande wave — signature Figma Card color blue (#CDE1F3 simulé) */
.plan-roi-banner::after {
  content: '';
  position: absolute;
  bottom: -44px;
  right: -24px;
  width: 300px;
  height: 210px;
  background: url('https://job-and-go.fr/wp-content/themes/jobandgo/assets/images/wave-white.svg') center / contain no-repeat;
  opacity: 0.22;
  pointer-events: none;
}

/* "1h" — jaune brandbook (#FFB563) comme le "&" du logo */
.plan-roi-stat-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #FFB563;
  letter-spacing: -0.02em;
  line-height: 1;
}

.plan-roi-banner-headline {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: white;
  line-height: 1.3;
  margin: 0 0 10px;
  position: relative;
  z-index: 1;
  max-width: 480px;
}

.plan-roi-banner-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.70);
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Plan ROI Banner — variante rouge (Page Établissement) */
.plan-roi-banner--red {
  background: var(--red);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 48px rgba(229,75,75,0.55),
    0 2px 8px rgba(0,0,0,0.18);
}

/* ============================================================
   PLAN CARDS — overrides section--dark (free card → glass)
   ============================================================ */

/* Waves décoratives dans le fond de la section dark formules */
#formules.section--dark {
  position: relative;
  overflow: hidden;
}

#formules.section--dark::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -60px;
  width: 420px;
  height: 420px;
  background: url('https://job-and-go.fr/wp-content/themes/jobandgo/assets/images/wave-blue.svg') center / contain no-repeat;
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}

#formules.section--dark > .container {
  position: relative;
  z-index: 1;
}

/* Glass card — free plan sur dark */
.section--dark .plan-card--free {
  background: rgba(255,255,255,0.05);
  border-color: rgba(66,142,211,0.22);
  box-shadow: none;
}

.section--dark .plan-card--free:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  border-color: rgba(66,142,211,0.4);
}

.section--dark .plan-card--free .plan-tier,
.section--dark .plan-card--free .plan-amount { color: white; }

.section--dark .plan-card--free .plan-period,
.section--dark .plan-card--free .plan-commitment { color: rgba(255,255,255,0.45); }

.section--dark .plan-card--free .plan-features {
  border-top-color: rgba(66,142,211,0.2);
}

.section--dark .plan-card--free .plan-feature { color: rgba(255,255,255,0.75); }

.section--dark .plan-card--free .plan-feature--missing { color: rgba(255,255,255,0.25); }

/* Icons yes → bleu (brandbook Extras) */
.section--dark .plan-card--free .plan-icon--yes { background: rgba(66,142,211,0.2); }
.section--dark .plan-card--free .plan-icon--yes::after { color: #428ED3; }

.section--dark .plan-card--free .plan-icon--no { background: rgba(255,255,255,0.05); }
.section--dark .plan-card--free .plan-icon--no::after { color: rgba(255,255,255,0.18); }

/* CTA ghost bleu */
.section--dark .plan-card--free .plan-cta--v2-free {
  background: rgba(66,142,211,0.12);
  color: rgba(255,255,255,0.85);
  border-color: rgba(66,142,211,0.28);
}

.section--dark .plan-card--free .plan-cta--v2-free:hover {
  background: rgba(66,142,211,0.22);
  border-color: rgba(66,142,211,0.5);
  transform: translateY(-2px);
}

@media (max-width: 700px) {
  .plan-roi-banner {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 22px 20px;
  }
  .plan-roi-banner-sep {
    width: 48px;
    height: 1.5px;
    margin: 4px 0;
  }
  .plan-roi-banner::after { display: none; }
}

/* ============================================================
   FORMULES — variante rouge (Page Établissement)
   ============================================================ */

#formules.section--dark.formules--red::before {
  background: url('https://job-and-go.fr/wp-content/themes/jobandgo/assets/images/wave-red.svg') center / contain no-repeat;
}

.formules--red.section--dark .plan-card--free {
  border-color: rgba(229,75,75,0.22);
}

.formules--red.section--dark .plan-card--free:hover {
  border-color: rgba(229,75,75,0.4);
}

.formules--red.section--dark .plan-card--free .plan-features {
  border-top-color: rgba(229,75,75,0.2);
}

.formules--red.section--dark .plan-card--free .plan-icon--yes {
  background: rgba(229,75,75,0.2);
}
.formules--red.section--dark .plan-card--free .plan-icon--yes::after {
  color: var(--red);
}

.formules--red.section--dark .plan-card--free .plan-cta--v2-free-red {
  background: rgba(229,75,75,0.12);
  color: rgba(255,255,255,0.85);
  border-color: rgba(229,75,75,0.28);
}

.formules--red.section--dark .plan-card--free .plan-cta--v2-free-red:hover {
  background: rgba(229,75,75,0.22);
  border-color: rgba(229,75,75,0.5);
  transform: translateY(-2px);
}

/* ============================================
   TABLEAU COMPARATIF — ct-table
   ============================================ */

.ct-wrap {
  max-width: 800px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.ct-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* ——— En-têtes ——— */

.ct-th-label {
  width: 22%;
  background: var(--ivory);
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.ct-th {
  width: 39%;
  padding: 24px 20px 20px;
  text-align: center;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: top;
}
.ct-th--before {
  background: #fff;
  border-top: 3px solid var(--red);
  border-left: 1px solid var(--gray-200);
}
.ct-th--after {
  background: rgba(57,121,108,0.05);
  border-top: 3px solid var(--green);
  border-left: 1px solid var(--gray-200);
}

.ct-col-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 5px;
}
.ct-th--before .ct-col-name { color: var(--red); }
.ct-th--after  .ct-col-name { color: var(--green); }

.ct-col-sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gray-400);
}

/* ——— Colonne critères ——— */

.ct-td-label {
  padding: 0 18px;
  height: 80px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  background: var(--ivory);
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
  text-align: center;
  line-height: 1.35;
}

/* ——— Cellules valeur ——— */

.ct-td {
  padding: 0;
  background: #fff;
  border-left: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
}
/* Teinte verte continue sur la colonne Job&Go */
.ct-td:last-child { background: rgba(57,121,108,0.03); }

/* Wrapper flex — colonne centrée, sans conflit global */
.ct-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 18px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray-700);
}

/* ——— Icônes SVG inline ——— */

.ct-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-mark--good {
  background: var(--green);
  box-shadow: 0 2px 10px rgba(57,121,108,0.32);
}
.ct-mark--bad {
  background: rgba(229,75,75,0.09);
  color: var(--red);
}

/* ——— Hover sobre ——— */

.ct-table tbody tr:hover .ct-td-label            { background: #ede9e4; }
.ct-table tbody tr:hover .ct-td:not(:last-child) { background: #f6f6f6; }
.ct-table tbody tr:hover .ct-td:last-child       { background: rgba(57,121,108,0.07); }

/* Dernière ligne : pas de bordure basse */
.ct-table tbody tr:last-child .ct-td,
.ct-table tbody tr:last-child .ct-td-label { border-bottom: none; }

/* ——— Mobile : scroll horizontal ——— */
@media (max-width: 640px) {
  .ct-wrap  { overflow-x: auto; }
  .ct-table { min-width: 460px; }
  .ct-th-label, .ct-td-label { width: 18%; padding: 0 10px; font-size: 0.58rem; height: 70px; }
  .ct-th { padding: 16px 10px 12px; }
  .ct-col-name { font-size: 0.88rem; }
  .ct-inner { padding: 16px 10px; font-size: 0.8rem; gap: 8px; }
  .ct-mark  { width: 26px; height: 26px; }
  .ct-mark svg { transform: scale(0.85); }
}

/* ============================================
   LEGAL PAGES
   ============================================ */

.legal-hero {
  padding: 72px 0 56px;
  background: var(--ivory);
}

.legal-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--gray-400);
  margin-bottom: 24px;
}

.legal-breadcrumb a {
  color: var(--gray-400);
  transition: color 0.18s;
}

.legal-breadcrumb a:hover { color: var(--dark); }

.legal-breadcrumb-sep {
  color: var(--gray-200);
  font-size: 0.9rem;
}

.legal-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--dark);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 14px;
}

.legal-hero-meta {
  font-size: 0.82rem;
  color: var(--gray-400);
  margin: 0;
}

.legal-body {
  background: var(--white);
  padding: 56px 0 104px;
}

.legal-container {
  max-width: 760px;
  margin: 0 auto;
}

.legal-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--gray-200);
}

.legal-quick-nav a {
  font-size: 0.77rem;
  font-weight: 500;
  color: var(--blue);
  background: var(--blue-light);
  padding: 6px 14px;
  border-radius: 50px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}

.legal-quick-nav a:hover {
  background: var(--blue);
  color: white;
}

.legal-article > section {
  margin-bottom: 52px;
  scroll-margin-top: 88px;
}

.legal-article h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--dark);
  margin-bottom: 18px;
  padding-top: 4px;
}

.legal-article h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  margin: 28px 0 10px;
}

.legal-article p {
  font-size: 0.93rem;
  line-height: 1.8;
  color: var(--gray-700);
  margin-bottom: 14px;
  text-wrap: pretty;
}

.legal-article ul,
.legal-article ol {
  padding-left: 22px;
  margin-bottom: 16px;
}

.legal-article li {
  font-size: 0.93rem;
  line-height: 1.78;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.legal-article strong { color: var(--dark); font-weight: 600; }

.legal-article a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-article a:hover { color: var(--blue-dark); }

.legal-info-box {
  background: var(--ivory);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px;
  margin-bottom: 20px;
}

.legal-info-box p {
  margin-bottom: 5px;
  font-size: 0.9rem;
}

.legal-info-box p:last-child { margin-bottom: 0; }

.legal-placeholder {
  display: inline-block;
  background: #fff3cd;
  border: 1px dashed #d4a017;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 0.8rem;
  color: #7c5a00;
  font-family: monospace;
  font-weight: 600;
}

/* Cookie status table */
.cookie-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  margin: 16px 0 28px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

.cookie-table th {
  text-align: left;
  padding: 11px 16px;
  background: var(--ivory);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
}

.cookie-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
  color: var(--gray-700);
  font-size: 0.88rem;
}

.cookie-table tr:last-child td { border-bottom: none; }

.cookie-badge {
  display: inline-block;
  font-size: 0.71rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
  white-space: nowrap;
}

.cookie-badge--on  { background: var(--green-light); color: var(--green); }
.cookie-badge--opt { background: var(--yellow-light); color: #7a4f00; }

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 18px 24px;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform;
}

.cookie-banner.visible {
  transform: translateY(0);
}

.cookie-banner.hidden {
  transform: translateY(100%);
  pointer-events: none;
}

.cookie-banner-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cookie-banner-text {
  flex: 1;
  min-width: 240px;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.70);
  line-height: 1.55;
  margin: 0;
}

.cookie-banner-text a {
  color: rgba(255,255,255,0.88);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Shared button base */
.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  line-height: 1;
}

.cookie-btn--accept {
  background: var(--green);
  color: white;
  border: 1.5px solid var(--green);
}

.cookie-btn--accept:hover {
  background: #2d6459;
  border-color: #2d6459;
}

.cookie-btn--refuse {
  background: transparent;
  color: rgba(255,255,255,0.68);
  border: 1.5px solid rgba(255,255,255,0.22);
}

.cookie-btn--refuse:hover {
  border-color: rgba(255,255,255,0.55);
  color: white;
}

.cookie-btn--customize {
  background: transparent;
  color: rgba(255,255,255,0.42);
  border: 1.5px solid transparent;
  font-size: 0.78rem;
  padding: 9px 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255,255,255,0.20);
}

.cookie-btn--customize:hover {
  color: rgba(255,255,255,0.75);
  text-decoration-color: rgba(255,255,255,0.50);
}

/* Cookie Preferences Modal */
.cookie-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cookie-modal-overlay.open {
  display: flex;
}

.cookie-modal {
  background: white;
  border-radius: var(--radius-xl);
  max-width: 500px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.cookie-modal-header {
  padding: 26px 26px 18px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cookie-modal-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--dark);
  margin: 0;
}

.cookie-modal-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-200);
  border: none;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--gray-600);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s;
  line-height: 1;
  font-weight: 400;
}

.cookie-modal-close:hover { background: var(--sable); }

.cookie-category {
  padding: 18px 26px;
  border-bottom: 1px solid var(--gray-200);
}

.cookie-category:last-child { border-bottom: none; }

.cookie-category-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cookie-category-info strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 4px;
}

.cookie-category-info p {
  font-size: 0.81rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin: 0;
}

.cookie-always-on {
  font-size: 0.71rem;
  font-weight: 600;
  color: var(--green);
  background: var(--green-light);
  padding: 4px 12px;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Toggle switch */
.cookie-toggle-label {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 23px;
  flex-shrink: 0;
  margin-top: 3px;
  cursor: pointer;
}

.cookie-toggle-label input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.cookie-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--gray-200);
  border-radius: 23px;
  transition: background 0.2s;
}

.cookie-toggle-thumb {
  position: absolute;
  width: 17px;
  height: 17px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
}

.cookie-toggle-label input:checked ~ .cookie-toggle-track {
  background: var(--green);
}

.cookie-toggle-label input:checked ~ .cookie-toggle-thumb {
  transform: translateX(19px);
}

.cookie-modal-actions {
  padding: 18px 26px 26px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  border-top: 1px solid var(--gray-200);
}

.cookie-modal-actions .cookie-btn--refuse-modal {
  background: transparent;
  color: var(--gray-600);
  border: 1.5px solid var(--gray-200);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.18s;
  font-family: var(--font-body);
  white-space: nowrap;
}

.cookie-modal-actions .cookie-btn--refuse-modal:hover {
  border-color: var(--gray-400);
  color: var(--dark);
}

.cookie-modal-actions .cookie-btn--save {
  background: var(--green);
  color: white;
  border: 1.5px solid var(--green);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.18s;
  font-family: var(--font-body);
  white-space: nowrap;
}

.cookie-modal-actions .cookie-btn--save:hover { background: #2d6459; border-color: #2d6459; }

/* Gérer les cookies — lien dans le footer */
.cookie-settings-btn {
  background: none;
  border: none;
  color: #6B7280;
  font-size: 0.87rem;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 0;
  transition: color 0.18s;
  text-decoration: none;
}

.cookie-settings-btn:hover { color: white; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .legal-hero { padding: 48px 0 36px; }
  .legal-body  { padding: 36px 0 72px; }
  .legal-article > section { scroll-margin-top: 72px; }
  .cookie-banner-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cookie-banner-actions { width: 100%; justify-content: flex-end; }
  .cookie-modal-actions { justify-content: stretch; }
  .cookie-modal-actions .cookie-btn--save,
  .cookie-modal-actions .cookie-btn--refuse-modal { flex: 1; justify-content: center; }
}

@media (max-width: 480px) {
  .legal-quick-nav a { font-size: 0.73rem; padding: 5px 11px; }
  .cookie-banner-actions { flex-wrap: wrap; }
  .cookie-btn--customize { order: 3; width: 100%; text-align: center; }
}

/* ============================================================
   JAG LEGAL BAR — footer bottom bar injected via wp_footer hook
   ============================================================ */
.jag-legal-bar {
  background: #181818;
  border-top: 1px solid rgba(255,255,255,.08);
}
.jag-legal-bar .footer-bottom {
  padding: 16px 0;
}
/* Copyright + icônes groupés à gauche */
.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-bottom-left p { margin: 0; }
.jag-legal-bar .footer-social-icons {
  display: flex;
  gap: 8px;
}

/* ============================================================
   MOBILE UX — Optimisations smartphone (v2.0 · juin 2026)
   Toutes les règles ci-dessous sont scoped dans des media queries
   ≤ 768 px et n'affectent pas le rendu desktop.
   ============================================================ */

/* Prévient le zoom automatique iOS lors du focus sur les inputs */
html { -webkit-text-size-adjust: 100%; }

/* Supprime le délai de tap sur les éléments interactifs (iOS < 13) */
a, button, label, [role="button"] { touch-action: manipulation; }

/* Hamburger : cible tactile ≥ 44 × 44 px (WCAG 2.5.5) */
.hamburger {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 11px;
  display: flex;
  justify-content: center;
}

/* ---- 768 px : tablette portrait / grand mobile ---- */
@media (max-width: 768px) {

  /* Espacements verticaux : réduits vs les 104 px / 112 px du polish desktop */
  .section        { padding: 64px 0; }
  .hero           { padding: 52px 0 44px; }
  .section-header { margin-bottom: 44px; }

  /* Vagues séparatrices : moins de scroll à vide */
  .wave-sep     { height: 64px; }
  .wave-sep svg { height: 64px; }

  /* ---- Timeline : grille 2 colonnes (numéro | contenu) ----
     Problème : flex-direction:row mettait le badge de temps
     entre le numéro et le titre. La grille corrige ça.       */
  .timeline--3 .timeline-step,
  .timeline--4 .timeline-step {
    display: grid;
    grid-template-columns: 58px 1fr;
    column-gap: 16px;
    row-gap: 0;
    align-items: start;
    text-align: left;
    padding: 0 0 32px;
    /* Reset du flex-direction:row ajouté par le breakpoint existant */
    flex-direction: unset;
  }
  .timeline--3 .timeline-num,
  .timeline--4 .timeline-num {
    grid-column: 1;
    grid-row: 1 / 5;
    margin-bottom: 0;
  }
  .timeline--3 .timeline-time,
  .timeline--4 .timeline-time {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 6px;
    justify-self: start;
  }
  .timeline--3 .timeline-step h3,
  .timeline--4 .timeline-step h3 {
    grid-column: 2;
    grid-row: 2;
    margin-bottom: 6px;
  }
  .timeline--3 .timeline-step p,
  .timeline--4 .timeline-step p {
    grid-column: 2;
    grid-row: 3;
  }

  /* ---- Hero : boutons full-width en colonne ---- */
  .hero-actions {
    align-items: stretch;
    gap: 10px;
    margin-bottom: 32px;
  }
  .hero-actions .btn { justify-content: center; }

  /* Hero app row : wrapping propre, label sur une nouvelle ligne */
  .hero-app-row { gap: 8px; flex-wrap: wrap; }

  /* Hero poster : légèrement réduit (affichage sous le texte à 860 px) */
  .hero-poster { max-width: 260px; max-height: 380px; }

  /* Audience cards : moins de padding pour plus de lisibilité */
  .audience-card { padding: 32px 24px; }

  /* Testimonials */
  .testimonial { padding: 24px 20px; }

  /* Form card : padding réduit */
  .form-card { padding: 28px 20px; }

  /* Trust bar : plus compact */
  .trust-bar { gap: 12px 20px; }

  /* Footer : padding réduit */
  .footer      { padding: 52px 0 28px; }
  .footer-grid { gap: 24px; }

  /* Mobile nav : cibles tactiles ≥ 44 px */
  .mobile-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Plans grid : gap réduit entre les deux colonnes */
  .plans-grid { gap: 36px; }

  /* Stats strip */
  .stats-strip-wrap { padding-bottom: 48px; }

  /* Hero centré : reset du padding-left du premier stat */
  .hero-centered .hero-stat:first-child { padding-left: 0; }
  .hero-centered .hero-stats-row { justify-content: flex-start; }

  /* FAQ : cible tactile agrandie */
  .faq-q { min-height: 52px; }
}

/* ---- 480 px : petit mobile (iPhone SE, téléphones standards) ---- */
@media (max-width: 480px) {

  /* Espacements encore plus compacts */
  .section        { padding: 52px 0; }
  .hero           { padding: 44px 0 32px; }
  .section-header { margin-bottom: 36px; }

  /* Container : marges latérales réduites pour plus de contenu */
  .container { padding: 0 16px; }

  /* Vagues : hauteur minimale pour ne pas gaspiller de scroll */
  .wave-sep     { height: 48px; }
  .wave-sep svg { height: 48px; }

  /* ---- Typographie héros ----
     Le clamp(52px, 9vw, 116px) donne 52px min — trop grand
     sur un écran de 375 px (2 lignes × ~52 px chacune).        */
  .hero-slogan { font-size: clamp(34px, 9vw, 48px); }
  .hero-sub    { font-size: 0.95rem; margin-bottom: 22px; }

  /* Titre de section */
  .section-title { font-size: clamp(22px, 6.5vw, 40px); }

  /* Sous-titre de section */
  .section-sub { font-size: 0.97rem; }

  /* ---- Hero stats : plus compact ---- */
  .hero-stats-row { margin-bottom: 20px; }
  .hero-stat      { padding: 8px 10px; }
  .hero-stat-val  { font-size: 1.4rem; }

  /* ---- Hero app row : empilé verticalement ---- */
  .hero-app-row   { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
  .hero-app-label { display: none; }

  /* Hero actions */
  .hero-actions { margin-bottom: 22px; }

  /* ---- Hero poster : réduit pour un hero plus court ---- */
  .hero-poster-wrap { padding: 24px 0 0; }
  .hero-poster      { max-width: min(220px, 65vw); max-height: 300px; transform: rotate(1deg); }

  /* ---- Audience cards ---- */
  .audience-card    { padding: 28px 18px; }
  .audience-card h3 { font-size: 1.7rem !important; }

  /* Audience list : texte légèrement réduit */
  .audience-list li { font-size: 0.88rem; }

  /* ---- Comparaison avant/après ---- */
  .comp-col { padding: 24px 18px; }

  /* ---- Form card ---- */
  .form-card { padding: 20px 16px; }

  /* CTA form split */
  .cta-form-split { gap: 24px; }

  /* ---- Trust bar ---- */
  .trust-bar  { gap: 10px 14px; padding-top: 20px; margin-top: 20px; }
  .trust-item { font-size: 0.77rem; gap: 5px; }

  /* ---- Testimonials ---- */
  .testimonial { padding: 20px 16px; }

  /* ---- Footer ---- */
  .footer      { padding: 44px 0 24px; }
  .footer-grid { gap: 18px; }
  .footer-brand p { max-width: 100%; }

  /* ---- FAQ : cibles tactiles ---- */
  .faq-q { min-height: 56px; padding: 18px 0; }

  /* ---- Cookie buttons : cibles ≥ 44 px ---- */
  .cookie-btn     { padding: 11px 20px; min-height: 44px; }
  .cookie-banner  { padding: 16px 20px; }

  /* ---- Plans ---- */
  .plans-grid       { gap: 28px; }
  .stats-strip-wrap { padding-bottom: 36px; }

  /* Section eyebrow */
  .section-eyebrow { font-size: 0.7rem; }

  /* Plan ROI banner */
  .plan-roi-banner-headline { font-size: 1.1rem; }
  .plan-roi-stat-num        { font-size: 1.3rem; }

  /* Scroll margin : compense le header sticky (68 px) */
  section[id] { scroll-margin-top: 80px; }

  /* ---- Pages légales ---- */
  .legal-hero { padding: 40px 0 28px; }
  .legal-body { padding: 28px 0 56px; }
  .legal-quick-nav { margin-bottom: 32px; padding-bottom: 24px; }

  /* Breadcrumb */
  .breadcrumb-list { font-size: 0.73rem; }
}

/* ---- 360 px : très petits écrans (Galaxy A, Moto G4, etc.) ---- */
@media (max-width: 360px) {
  .container     { padding: 0 12px; }
  .hero-slogan   { font-size: 32px; }
  .section-title { font-size: 20px; }
  .audience-card { padding: 24px 14px; }
  .audience-card h3 { font-size: 1.5rem !important; }
  .form-card     { padding: 18px 12px; }
  .testimonial   { padding: 18px 12px; }
  .hero-poster   { max-width: min(200px, 60vw); }
}

/* ============================================================
   PAGE ÉTABLISSEMENT — Améliorations UX mobile v4.1 (juin 2026)
   Toutes les règles ci-dessous ciblent les zones spécifiques à la
   page établissement. Elles n'affectent pas le rendu desktop.
   ============================================================ */

/* === 1. HERO SPLIT → centrage du contenu quand le visuel est masqué (≤ 860 px) ===
   À ≤ 860 px, la colonne droite (notification stack) disparaît.
   Le contenu texte doit se centrer pour occuper la pleine largeur.      */
@media (max-width: 860px) {
  .hero-split .hero-content {
    text-align: center;
  }
  .hero-split .hero-slogan {
    align-items: center;
  }
  .hero-split .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-split .badge {
    align-self: center;
  }
}

/* === 2. HERO SLOGAN — corrige la surspécificité de `.hero-split .hero-slogan` ===
   `.hero-split .hero-slogan` (2 classes) surpasse `.hero-slogan` (1 classe)
   et empêche la taille mobile de s'appliquer. On force le bon clamp ici.  */
@media (max-width: 480px) {
  .hero-split .hero-slogan {
    font-size: clamp(34px, 9vw, 48px);
  }
}

/* === 3. FORMULAIRE — prévention du zoom automatique iOS ===
   iOS Safari zoome sur tout champ dont le font-size < 16 px.
   La valeur par défaut est 0.92 rem (~14.7 px) : on monte à 1 rem exact.  */
@media (max-width: 768px) {
  .form-field input,
  .form-field select {
    font-size: 1rem;
  }
}

/* === 4. TABLEAU COMPARATIF — scroll tactile + réduction du débordement ===
   Le min-width de 460 px crée 117 px de scroll sur un téléphone 375 px.
   On réduit à 328 px (≈ 0 débordement sur 375 px) et on optimise le scroll iOS.
   La colonne critère passe à 24 % + letter-spacing réduit pour éviter les
   coupures en plein mot ("COMMISSIO N", "TRANSPAR ENCE") ; le reste du
   surplus est redistribué en padding pour aérer la lecture.              */
@media (max-width: 640px) {
  .ct-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 480px) {
  .ct-table    { min-width: 332px; }
  .ct-th       { padding: 14px 8px 10px; }
  .ct-col-name { font-size: 0.82rem; }
  .ct-th-label,
  .ct-td-label {
    width: 25%;
    padding: 0 4px;
    font-size: 0.50rem;
    letter-spacing: 0.01em;
    height: auto;
    min-height: 64px;
  }
  .ct-inner    { padding: 14px 8px; font-size: 0.76rem; gap: 7px; line-height: 1.5; }
  .ct-mark     { width: 20px; height: 20px; }
  .ct-mark svg { transform: scale(0.8); }
}

/* === 5. APP SECTION — badge positionné hors écran sur ≤ 480 px ===
   `transform: translateX(60px)` fait déborder le badge sur les petits écrans.
   On le replace en-dessous du mock téléphone, centré.                     */
@media (max-width: 480px) {
  .app-phone-wrap  { padding-bottom: 56px; }
  .app-phone-badge {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
  }
}

/* === 6. STORE BADGES — alignement centré en colonne unique (≤ 640 px) ===
   Entre 481 px et 640 px, les badges passent en colonne mais restent
   alignés à gauche (`flex-start`). On harmonise avec le centrage général. */
@media (max-width: 640px) {
  .app-stores { align-items: center; }
}

/* === 7. STATS BAND SOMBRE — padding réduit sur petit mobile ===
   Les cellules de 28 px de padding horizontal sont trop généreuses
   sur 375 px. On serre pour donner plus de place aux valeurs.             */
@media (max-width: 480px) {
  .stats-band--dark .stats-strip-item { padding: 20px 12px; }
  .stats-band--dark .stats-strip-label {
    font-size: 0.63rem;
    letter-spacing: 0.04em;
  }
}

/* === 8. SAVINGS CONTEXT — note de bas de tableau ===
   Le texte de contexte trop long pour un petit écran sans ligne-break.    */
@media (max-width: 480px) {
  .savings-context { font-size: 0.72rem; padding: 0 4px; }
}

/* === 9. PLAN CARD TOP — min-height inutile en colonne unique (≤ 700 px) ===
   `min-height: 132px` sert à aligner les tops côte-à-côte (2 colonnes).
   En colonne unique, il crée de l'espace vide inutile.                    */
@media (max-width: 700px) {
  .plan-cards--centered .plan-card-top { min-height: auto; }
}

/* === 10. PLAN CARDS — espacement réduit sur très petit écran (≤ 360 px) ===  */
@media (max-width: 360px) {
  .plan-cards--centered { gap: 12px; margin-top: 28px; }
  .plan-card            { padding: 22px 16px 20px; }
}

/* ============================================================
   MOBILE UX v5.0 — Accueil · optimisations UX smartphone
   Toutes les règles sont scoped mobile et n'affectent pas le desktop.
   ============================================================ */

/* ─────────────────────────────────────────────
   HEADER — plus compact sur mobile
───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Gagne 8 px de contenu visible */
  .header-inner {
    height: 60px;
    padding: 0 16px;
  }

  /* Logo légèrement plus petit */
  .logo img { height: 26px; }

  /* CTA dans le menu mobile : facile à toucher */
  .mobile-nav .btn {
    min-height: 52px;
    font-size: 1rem;
    margin-top: 12px;
    padding: 15px 24px;
  }
}

/* ─────────────────────────────────────────────
   HERO POSTER — nettoyage mobile
───────────────────────────────────────────── */

/* 860px : on agrandit légèrement le poster pour plus d'impact */
@media (max-width: 860px) {
  .hero-poster-card {
    max-width: 340px;
    padding-bottom: 56px;
    padding-right: 22px;
  }
  .hero-poster--front { max-height: 460px; }
}

/* 480px : poster avant sans rotation, vignette arrière visible */
@media (max-width: 480px) {
  .hero-poster-card {
    max-width: min(260px, 78vw);
    padding-bottom: 28px;
    padding-right: 0;
    margin: 0 auto;
  }

  /* Remet le poster droit — la rotation est déco, pas utile sur mobile */
  .hero-poster--front { transform: none; max-height: 260px; }

  .hero-poster-wrap { padding-top: 20px; }

  /* Condensation du bloc texte hero */
  .hero-headline   { margin-bottom: 16px; }
  .hero-descriptor { padding-top: 10px; font-size: 0.68rem; }
  .hero-sub        { margin-bottom: 14px; }

  /* Badge hero : plus compact */
  .hero .badge { font-size: 0.74rem; padding: 5px 12px; margin-bottom: 14px; }
}

/* ─────────────────────────────────────────────
   HERO STATS ROW — grille 3 colonnes alignées
   (évite le flex-wrap aléatoire sur petits écrans)
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 14px;
  }
  .hero-stat {
    padding: 6px 4px;
    text-align: center;
    border-right: 1px solid var(--gray-200);
  }
  .hero-stat:first-child { padding-left: 4px; }
  .hero-stat:last-child  { border-right: none; }
  .hero-stat-sep         { display: none; }
}

/* ─────────────────────────────────────────────
   HERO APP BADGES — touch target ≥ 44 px
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .app-badge-pill { min-height: 46px; padding: 10px 14px; }
}

/* ─────────────────────────────────────────────
   INPUTS — anti-zoom iOS
   iOS zoome automatiquement si font-size < 16px au focus
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-field input,
  .form-field select {
    font-size: 16px;
    min-height: 50px;
  }
  .form-field select { min-height: 50px !important; }
}

/* ─────────────────────────────────────────────
   TIMELINE — max-width libre + séparation visuelle
───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Retire la contrainte 400px qui crée un centrage gênant */
  .timeline--3,
  .timeline--4 { max-width: 100%; }

  /* Séparation entre les étapes */
  .timeline--3 .timeline-step:not(:last-child),
  .timeline--4 .timeline-step:not(:last-child) {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 24px;
    margin-bottom: 4px;
  }

  .timeline--3 .timeline-step:last-child,
  .timeline--4 .timeline-step:last-child { padding-bottom: 0; }
}

/* ─────────────────────────────────────────────
   TESTIMONIALS — carousel horizontal swipeable
   4 cards empilées = trop de scroll vertical inutile
   → carrousel natif touch, 1 card par snap
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .testimonials-grid {
    /* Défilement horizontal */
    display: flex;
    grid-template-columns: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;

    /* Sort du container pour aller bord à bord */
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 20px;
    margin-left: -24px;
    margin-right: -24px;
  }

  .testimonials-grid::-webkit-scrollbar { display: none; }

  .testimonial {
    flex: 0 0 min(300px, 82vw);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Espace de fin pour le dernier item */
  .testimonials-grid::after {
    content: '';
    flex: 0 0 10px;
  }
}

@media (max-width: 480px) {
  .testimonials-grid {
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
    gap: 12px;
  }

  .testimonial { flex: 0 0 min(272px, 86vw); }
}

/* ─────────────────────────────────────────────
   AUDIENCE CARDS — radars masqués sur mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .audience-radar { display: none; }
  .audience-wave  { opacity: 0.12; }
}

/* ─────────────────────────────────────────────
   CTA DARK — waves réduites pour éviter le débordement
───────────────────────────────────────────── */
@media (max-width: 640px) {
  .cta-wave-dark--a { width: 300px; left: -70px; opacity: 0.26; }
  .cta-wave-dark--b { width: 280px; right: -60px; opacity: 0.20; }
  .cta-wave-dark--c { display: none; }
}

/* ─────────────────────────────────────────────
   TRUST BAR — grille 2 × 2 au lieu du flex-wrap
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-items: center;
    padding-top: 18px;
    margin-top: 18px;
  }
  .trust-item { font-size: 0.77rem; }
  /* 3e item seul sur sa ligne (trust-bar à 3 items) → centré sur toute la largeur */
  .trust-bar .trust-item:nth-child(3):last-child {
    grid-column: 1 / -1;
  }
}

/* ─────────────────────────────────────────────
   PARTNERS MARQUEE — fade-edge adapté mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .partners-marquee-outer {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
}

/* ─────────────────────────────────────────────
   FAQ — lisibilité mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .faq-q { font-size: 0.9rem; line-height: 1.4; }
  .faq-a { font-size: 0.87rem; }
}

/* ─────────────────────────────────────────────
   FOOTER — cibles tactiles, liens accessibles
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .footer-col a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .footer-social       { flex-wrap: wrap; gap: 14px; }
  .footer-bottom-links { gap: 14px; flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────
   SCROLL MARGIN — compense le header sticky 60px mobile
───────────────────────────────────────────── */
@media (max-width: 768px) {
  section[id] { scroll-margin-top: 68px; }
}


/* ============================================================
   MOBILE UX v5.1 — Interactions & polish avancé
   ============================================================ */

/* ─────────────────────────────────────────────
   STICKY CTA — bouton flottant de conversion
───────────────────────────────────────────── */
.sticky-cta { display: none; }

@media (max-width: 768px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 148;
    padding: 12px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    background: rgba(250, 247, 244, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
    transform: translateY(110%);
    transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
    pointer-events: none;
  }
  .sticky-cta.visible {
    transform: translateY(0);
    pointer-events: auto;
  }
  .sticky-cta .btn {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
  }
  /* Compense la place prise par le sticky CTA dans le footer */
  .footer { padding-bottom: 80px; }
}

/* ─────────────────────────────────────────────
   NAV BACKDROP — overlay sombre derrière le menu
───────────────────────────────────────────── */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(26,26,26,0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.nav-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─────────────────────────────────────────────
   HERO POSTER — image banner pleine largeur mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-poster-wrap {
    padding-top: 28px;
    padding-bottom: 0;
  }
  .hero-poster-card {
    max-width: 100%;
    width: 100%;
    padding: 0 0 28px; /* espace pour que la 2ème photo dépasse en bas */
    margin: 0;
  }
  .hero-poster--front {
    width: 100%;
    height: 220px;
    max-height: 220px;
    transform: none;
    border-radius: 16px;
    object-fit: cover;
    object-position: top center;
  }
  /* 2ème photo : dépasse de 28px en bas, derrière la 1ère */
  .hero-poster--back {
    width: 100%;
    height: 220px;
    max-height: 220px;
    top: 28px;
    border-radius: 16px;
    object-fit: cover;
    object-position: top center;
    transform: rotate(-0.8deg);
  }
}

/* ─────────────────────────────────────────────
   TESTIMONIALS — indicateur de défilement horizontal
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .testimonials-grid {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 82%, transparent 100%);
  }
}

/* ─────────────────────────────────────────────
   FORM SELECT — flèche chevron custom
   (appearance:none retire la flèche native iOS)
───────────────────────────────────────────── */
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  padding-right: 40px;
}

/* ─────────────────────────────────────────────
   SECTIONS — respirations verticales réduites sur mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .section { padding-top: 52px; padding-bottom: 52px; }
  .section-title { margin-bottom: 6px; }
  .section-sub { font-size: 0.9rem; line-height: 1.55; margin-bottom: 32px; }
}

/* ─────────────────────────────────────────────
   AUDIENCE CARDS — bouton plus lisible mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .audience-card-cta { min-height: 46px; font-size: 0.9rem; }
}

/* ─────────────────────────────────────────────
   SEO TEXT — densité réduite, lecture mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .seo-text p { font-size: 0.9rem; line-height: 1.65; margin-bottom: 16px; }
  .seo-text h2 { font-size: 1.1rem; margin-top: 28px; margin-bottom: 10px; }
}

/* ============================================================
   PAGE ÉTABLISSEMENT — Améliorations UX mobile v4.2 (juin 2026)
   ============================================================ */

/* === A. prefers-reduced-motion — couverture étendue ===
   Seul le marquee était couvert. On étend aux animations
   déco du hero (badge-dot, vagues flottantes) qui gaspillent
   du CPU et peuvent gêner les utilisateurs sensibles.           */
@media (prefers-reduced-motion: reduce) {
  .badge-dot,
  .hero-wave--bl,
  .hero-wave--br { animation: none !important; }
}

/* === B. Hero actions — centrage sur tablette portrait (769–860px) ===
   À ≤ 860 px le texte est centré (v4.1) mais entre 769 et 860 px
   les boutons restent en flex-row aligné à gauche. On les centre.  */
@media (max-width: 860px) {
  .hero-split .hero-actions { justify-content: center; }
}

/* === C. Stats band sombre — 1 colonne à ≤ 360 px ===
   En 2 colonnes sur 360 px chaque cellule est trop étroite.
   Colonne unique pour garder chiffre et label lisibles.            */
@media (max-width: 360px) {
  .stats-band--dark .stats-strip-inner {
    grid-template-columns: 1fr;
  }
  .stats-band--dark .stats-strip-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .stats-band--dark .stats-strip-item:last-child {
    border-bottom: none;
  }
}

/* === D. Témoignages — corps du texte compact (≤ 480 px) ===
   Blockquote en 0.93 rem + line-height 1.75 à 343 px de large
   donne ~57 caractères par ligne, légèrement trop dense.
   On réduit légèrement pour un confort de lecture optimal.         */
@media (max-width: 480px) {
  .testimonial blockquote {
    font-size: 0.87rem;
    line-height: 1.68;
  }
}

/* === E. Plan cards — padding réduit en colonne unique (≤ 700 px) ===
   Le padding par défaut (28px 24px 26px) est pensé pour 2 colonnes.
   En colonne unique il crée trop d'espace interne non utile.        */
@media (max-width: 700px) {
  .plan-card { padding: 24px 20px 22px; }
}
/* Maintient le padding encore plus compact à ≤ 360 px (v4.1)       */
@media (max-width: 360px) {
  .plan-card { padding: 22px 16px 20px; }
}

/* === F. App feature items — resserrement à ≤ 360 px ===  */
@media (max-width: 360px) {
  .app-feature-item { gap: 10px; }
  .app-feature-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9px;
    font-size: 0.88rem;
  }
}

/* === G. App phone mock — désactive le menu contexte long-press ===
   Évite la popup "Enregistrer l'image" sur l'illustration déco.    */
.app-phone-wrap {
  -webkit-touch-callout: none;
  user-select: none;
}

/* === H. FAQ — augmente le max-height pour les longues réponses ===
   La valeur de 300 px de v5.x peut clipper les réponses très
   longues. 500 px couvre confortablement toutes les réponses FAQ.  */
.faq-item.open .faq-a { max-height: 500px; }


/* ============================================================
   MOBILE UX v5.2 — Animation, feedback tactile, densité
   ============================================================ */

/* ─────────────────────────────────────────────
   FAQ — animation fluide (remplace display:none/block)
   Plus haute spécificité que .faq-a et .faq-item.open .faq-a
───────────────────────────────────────────── */
.faq-list .faq-a {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  transition: max-height 0.36s cubic-bezier(0.4, 0, 0.2, 1),
              padding-bottom 0.36s ease;
}
.faq-list .faq-item.open .faq-a {
  max-height: 800px;
  padding-bottom: 20px;
}

/* ─────────────────────────────────────────────
   BOUTONS — retour tactile immédiat sur mobile
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .btn:active {
    transform: scale(0.96);
    opacity: 0.88;
    transition: transform 0.06s, opacity 0.06s;
  }
  .faq-q:active { opacity: 0.65; transition: opacity 0.06s; }
}

/* ─────────────────────────────────────────────
   HEADER — ombre au scroll (classe ajoutée par JS)
───────────────────────────────────────────── */
.header.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.09);
}

/* ─────────────────────────────────────────────
   FOOTER — 2 colonnes liens côte à côte sur mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "col1  col2";
    gap: 24px;
  }
  .footer-brand            { grid-area: brand; }
  .footer-col:nth-child(2) { grid-area: col1; }
  .footer-col:nth-child(3) { grid-area: col2; }
}

/* ─────────────────────────────────────────────
   PARTENAIRES — section compacte (c'est juste un marquee)
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .partners-section { padding-top: 32px; padding-bottom: 32px; }
  .partners-section .section-title { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
}

/* ─────────────────────────────────────────────
   AUDIENCE — liste plus dense sur mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .audience-list     { gap: 10px; }
  .audience-list li  { font-size: 0.86rem; line-height: 1.45; }
}

/* ─────────────────────────────────────────────
   TIMELINE — numéros + textes plus compacts
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .timeline-num      { width: 44px; height: 44px; font-size: 1.15rem; margin-bottom: 10px; }
  .timeline-step h3  { font-size: 1rem; margin-bottom: 6px; }
  .timeline-step p   { font-size: 0.88rem; line-height: 1.55; }
}

/* ─────────────────────────────────────────────
   HERO — centrage du texte sur mobile (< 480px uniquement)
   La colonne unique mérite un centrage pour une lecture plus aérée
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-content     { text-align: center; }
  .hero-headline    { align-items: center; }
  .hero-sub         { margin-left: auto; margin-right: auto; max-width: 86vw; }
  .hero-stats-row   { justify-content: center; }
  .badge            { align-self: center; margin-left: auto; margin-right: auto; }
  .hero-actions     { width: 100%; }
  .hero-actions .btn{ width: 100%; }
  .hero-app-row     { justify-content: center; }
}

/* ─────────────────────────────────────────────
   SECTION SUB — max-width lisibilité mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .section-header--center .section-sub { max-width: 90vw; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   ACCUEIL — MOBILE UX PRO v5.2 (juin 2026)
   Corrections d'alignement hero, lisibilité, compacité 360px.
   ============================================================ */

/* ----------------------------------------------------------
   A. HERO SPLIT — hero-app-row et hero-stats-row non centrés.
      À ≤860px, .hero-split .hero-content est text-align:center
      mais les containers flex restent justify:flex-start.
      Résultat : app badges et stats décalés à gauche alors que
      tout le reste du hero est centré.
   ---------------------------------------------------------- */
@media (max-width: 860px) {
  .hero-split .hero-stats-row {
    justify-content: center;
  }
  .hero-split .hero-app-row {
    justify-content: center;
  }
}

/* En mode colonne (≤480px), l'alignement horizontal = align-items.
   La règle existante force flex-start → on la surcharge ici. */
@media (max-width: 480px) {
  .hero-split .hero-app-row {
    align-items: center;
  }
}

/* ----------------------------------------------------------
   B. HERO DESCRIPTOR — lisibilité minimum.
      0.68rem ≈ 10.9px : en dessous du seuil de lecture iOS (12px).
      Porté à 0.74rem et letter-spacing légèrement augmenté.
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .hero-descriptor {
    font-size: 0.74rem;
    letter-spacing: 0.025em;
  }
}

/* ----------------------------------------------------------
   C. SECTION + VAGUES — compacité maximale sur 360px.
      Les paddings 52px restent corrects jusqu'à 480px,
      mais sur téléphone 360px ils grignotent trop de scroll.
   ---------------------------------------------------------- */
@media (max-width: 360px) {
  .section {
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .wave-sep,
  .wave-sep svg {
    height: 34px;
  }
}

/* ----------------------------------------------------------
   D. FORM SUBMIT — hauteur tactile garantie.
      .btn-xl a ~56px mais les compositions custom peuvent
      varier. On force 52px comme valeur plancher.
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .form-submit {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }
}

/* ----------------------------------------------------------
   E. HERO APP-LABEL — centrage du texte subsidiaire.
      "Application mobile · 100 % gratuite" est un span
      dans hero-app-row, il hérite text-align:center du parent
      mais en column direction il peut rester à gauche.
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .hero-split .hero-app-label {
    text-align: center;
    width: 100%;
  }
}


/* ============================================================
   MOBILE UX v5.3 — Timeline centrage vertical + hero align
   ============================================================ */

/* ─────────────────────────────────────────────
   TIMELINE — numéro centré verticalement au milieu du texte
   (surcharge align-items: start du bloc v2.0 ligne ~7156)
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .timeline--3 .timeline-num,
  .timeline--4 .timeline-num {
    align-self: center;
  }
}

/* ─────────────────────────────────────────────
   HERO CONTENT — centrage à 860px aussi (tablette)
   Le hero passe en colonne à 860px, mais le texte
   reste left-align jusqu'à 480px (v5.2).
   On centre à 860px pour une meilleure symétrie.
───────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero-content     { text-align: center; }
  .hero-headline    { align-items: center; }
  .hero-sub         { margin-left: auto; margin-right: auto; }
  .hero-actions     { align-items: center; }
  .hero-app-row     { justify-content: center; }
  .badge            { align-self: center; margin-left: auto; margin-right: auto; }
}

/* Boutons pleine largeur à 480px (déjà en v5.2, consolidé ici) */
@media (max-width: 480px) {
  .hero-actions { width: 100%; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* ============================================================
   PAGE ÉTABLISSEMENT — v4.3 (juin 2026)
   Formules côte à côte · Icônes centrées · Images
   ============================================================ */

/* ─────────────────────────────────────────────
   FORMULES — 2 colonnes alignées sur mobile
   Même pattern que la page extras (v5).
   ≤700px : 2 col + compact + 3 features max.
───────────────────────────────────────────── */
@media (max-width: 700px) {
  .plan-cards--centered {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
  }
  .plan-cards--centered .plan-card {
    padding: 14px 11px 14px;
    border-radius: 16px;
  }
  .plan-cards--centered .plan-card-top {
    min-height: 112px;
    margin-bottom: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  /* Badge centré horizontalement dans la colonne flex de la carte */
  .plan-cards--centered .plan-badge { align-self: center; }
  /* Respiration sous le montant (0 € / 9,99 €) */
  .plan-cards--centered .plan-price { justify-content: center; margin-bottom: 8px; }
  .plan-cards--centered .plan-badge {
    font-size: 0.5rem;
    padding: 3px 8px;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
    align-self: center;
  }
  .plan-cards--centered .plan-tier { font-size: 0.82rem; margin-bottom: 3px; }
  .plan-cards--centered .plan-amount     { font-size: 1.3rem; }
  .plan-cards--centered .plan-period     { font-size: 0.58rem; margin-bottom: 2px; }
  .plan-cards--centered .plan-card--premium-blue .plan-period,
  .plan-cards--centered .plan-card--premium-red .plan-period { font-size: 1.3rem; margin-bottom: 0; }
  .plan-cards--centered .plan-promo { font-size: 0.56rem; line-height: 1.25; margin-bottom: 4px; }
  /* L'égalisation des .plan-card-top est gérée en JS (mesure réelle après rendu) */
  .plan-cards--centered .plan-commitment {
    font-size: 0.58rem;
    line-height: 1.3;
    text-align: center;
    margin-top: auto;
  }
  /* Section sombre + fond bleu : les deux cartes ont un fond foncé → texte blanc */
  .plan-cards--centered .plan-card--free .plan-commitment,
  .plan-cards--centered .plan-card--premium-blue .plan-commitment { color: #fff; }
  .plan-cards--centered .plan-strike     { font-size: 0.7rem; }
  /* Affiche les 3 premières features seulement */
  .plan-cards--centered .plan-feature:nth-child(n+4) { display: none; }
  .plan-cards--centered .plan-features::after {
    content: 'Comparatif complet ↑';
    display: block;
    font-size: 0.54rem;
    opacity: 0.45;
    margin-top: 6px;
    font-style: italic;
  }
  .plan-cards--centered .plan-features {
    gap: 5px;
    margin-bottom: 12px;
  }
  .plan-cards--centered .plan-feature {
    font-size: 0.63rem;
    gap: 5px;
    line-height: 1.3;
  }
  .plan-cards--centered .plan-icon {
    width: 13px;
    height: 13px;
    min-width: 13px;
    font-size: 0.5rem;
  }
  .plan-cards--centered .plan-cta,
  .plan-cards--centered .plan-cta--v2-free-red,
  .plan-cards--centered .plan-cta--v2-solid-red {
    padding: 10px 8px;
    font-size: 0.66rem;
    border-radius: 10px;
    text-align: center;
    min-height: 40px;
    margin-top: 12px;
  }
  .plan-cta-chevron { display: none; }
}

/* Micro-compression à ≤ 360px */
@media (max-width: 360px) {
  .plan-cards--centered            { gap: 6px; margin-top: 14px; }
  .plan-cards--centered .plan-card { padding: 11px 8px; }
  .plan-cards--centered .plan-tier { font-size: 0.75rem; }
  .plan-cards--centered .plan-amount { font-size: 1.1rem; }
  .plan-cards--centered .plan-card--premium-blue .plan-period,
  .plan-cards--centered .plan-card--premium-red .plan-period { font-size: 1.1rem; }
  .plan-cards--centered .plan-feature { font-size: 0.58rem; }
}

/* ─────────────────────────────────────────────
   ICÔNES AVANTAGES — centrées en colonne unique (≤ 768px)
   Le .card-icon-wrap est left-aligned par défaut,
   ce qui crée un déséquilibre en pleine largeur.
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .cards-grid--3 .card {
    text-align: center;
  }
  .cards-grid--3 .card-icon-wrap {
    margin-left: auto;
    margin-right: auto;
  }
  .cards-grid--3 .card p {
    text-align: left;
  }
}


/* ============================================================
   MOBILE UX v5.4 — Correctif images rognées
   Annule le banner pleine largeur du v5.1 :
   la photo portrait du bartender s'affiche complète et centrée.
   ============================================================ */

@media (max-width: 480px) {
  /* Wrapper : centré horizontalement */
  .hero-poster-wrap {
    justify-content: center;
    padding-top: 24px;
  }

  /* Carte : portrait à largeur fixe, centré */
  .hero-poster-card {
    max-width: min(220px, 64vw);
    width:     min(220px, 64vw);
    margin: 0 auto;
    padding: 0;
  }

  /* Image : proportions naturelles, pas de crop */
  .hero-poster--front {
    width: 100%;
    height: auto;      /* naturel — pas de hauteur fixée */
    max-height: none;  /* supprime le 220px imposé en v5.1 */
    transform: none;
    object-fit: contain;
    object-position: top center;
    border-radius: 16px;
  }
}


/* ============================================================
   MOBILE UX v5.5 — Parcours utilisateur : réduction bruit hero,
   SEO collapse, dots carousel, overlap cookie/CTA
   ============================================================ */

/* ─────────────────────────────────────────────
   HERO — suppression des éléments redondants
   Le bouton ghost "Voir comment ça marche" : l'utilisateur scroll
   naturellement, et le sticky CTA gère la conversion.
   Les app badges "Bientôt sur" : non cliquables (app pas lancée)
   et "iOS & Android" figure déjà dans le descriptor.
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-actions .btn-ghost { display: none; }
  .hero-app-row    { flex-direction: row !important; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .hero-app-sep    { display: none; }
  .hero-app-label  { display: none; }
  .app-badge-pill,
  .social-badge-pill { padding: 8px 12px; flex: 0 0 auto; }
}
/* Accueil : grille 3+1 compact sur petit mobile — 4 badges en 3+1 */
@media (max-width: 640px) {
  .hero-app-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .hero-app-row .app-badge-pill,
  .hero-app-row .social-badge-pill {
    padding: 9px 10px;
    font-size: 0.76rem;
    gap: 7px;
    min-width: 0;
    flex: unset;
    width: auto;
  }
  .hero-app-row .app-badge-icon svg,
  .hero-app-row .app-badge-icon img {
    width: 18px !important;
    height: 18px !important;
  }
  .hero-app-row .app-badge-sub  { font-size: 0.58rem; }
  .hero-app-row .app-badge-name { font-size: 0.82rem; }
  .hero-app-row .social-badge-pill--linkedin { grid-column: 2; }
}

/* ─────────────────────────────────────────────
   HERO — descripteur ultra-compact sur mobile
   On conserve uniquement la ligne de pitch courte
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-descriptor { font-size: 0.7rem; letter-spacing: 0.06em; }
}

/* ─────────────────────────────────────────────
   SEO TEXT — collapse sur mobile
   JS insère .seo-extra-hidden et .seo-more-btn
───────────────────────────────────────────── */
.seo-extra-hidden { display: none; }

.seo-more-btn {
  display: block;
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 50px;
  cursor: pointer;
  margin: 16px auto 0;
  transition: background 0.18s, color 0.18s;
}
.seo-more-btn:hover { background: var(--blue); color: white; }

/* ─────────────────────────────────────────────
   TESTIMONIALS — dots de pagination
   JS insère .testimonials-dots sous le carousel
───────────────────────────────────────────── */
.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

.t-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-300);
  transition: all 0.22s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.t-dot.active {
  width: 22px;
  border-radius: 4px;
  background: var(--blue);
}

/* ─────────────────────────────────────────────
   AUDIENCE CARD — bouton moins espacé sur mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .audience-card .btn { margin-top: 20px; }
}

/* ─────────────────────────────────────────────
   SECTION BORDEAUX — titre moins imposant
───────────────────────────────────────────── */
@media (max-width: 480px) {
  #bordeaux-gironde .section-title { font-size: 1.35rem; line-height: 1.3; }
}

/* ============================================================
   PAGE ÉTABLISSEMENT — v4.4 (juin 2026)
   Formules parallèles · Texte centré · Alignement sections
   ============================================================ */



/* ============================================================
   MOBILE UX v5.6 — Animations entrée, rythme vertical, impact
   ============================================================ */

/* ─────────────────────────────────────────────
   ANIMATION D'ENTRÉE — slide-up au scroll
   Uniquement translateY (pas d'opacity = pas de flicker)
   Respecte prefers-reduced-motion
───────────────────────────────────────────── */
@keyframes jagSlideIn {
  from { transform: translateY(14px); }
  to   { transform: translateY(0);    }
}

.jag-animate {
  animation: jagSlideIn 0.44s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .jag-animate { animation: none; }
}

/* ─────────────────────────────────────────────
   RYTHME VERTICAL — sections et vagues plus serrées
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .section           { padding-top: 44px; padding-bottom: 44px; }
  .section-header    { margin-bottom: 28px; }
  .wave-sep          { height: 40px; }
  .wave-sep svg      { height: 40px; }
}

/* ─────────────────────────────────────────────
   HERO STATS — chiffres plus impactants sur mobile
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-stat-val      { font-size: 1.8rem; }
  .hero-stat span     { font-size: 0.72rem; }
  .hero-stats-row     { margin-top: 24px; }
}

/* ─────────────────────────────────────────────
   SECTION SUB — espacement plus compact
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .section-header { margin-bottom: 24px; }
  .section-eyebrow { margin-bottom: 6px; }
}

/* ─────────────────────────────────────────────
   HERO — fond ivoire sous la photo (blend avec la wave)
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-poster-wrap { position: relative; }
  .hero-poster-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--ivory));
    pointer-events: none;
    border-radius: 0 0 16px 16px;
  }
}

/* ─────────────────────────────────────────────
   AUDIENCE GRID — gap réduit mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .audience-grid { gap: 16px; }
}

/* ============================================================
   MOBILE UX v6.0 — Page établissement
   ============================================================ */

/* A. PLAN CARDS — 2 colonnes (annule grid-template-columns: 1fr à ≤700px, ligne ~5540) */
@media (max-width: 700px) {
  .plan-cards--centered {
    grid-template-columns: 1fr 1fr !important;
  }
}



/* ============================================
   FLOATING PILL NAV — MOBILE ONLY
   ============================================ */

.float-nav {
  display: none;
  position: fixed;
  bottom: 20px;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 380px;
  z-index: 850;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 60px;
  box-shadow:
    0 2px 8px rgba(26, 26, 26, 0.05),
    0 12px 40px rgba(26, 26, 26, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@keyframes float-nav-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.float-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 10px 8px;
  border-radius: 54px;
  text-decoration: none;
  color: var(--gray-400);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.22s ease, color 0.22s ease, transform 0.12s ease;
  white-space: nowrap;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}

.float-nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 1.8;
  transition: transform 0.12s ease;
}

.float-nav-item:active           { transform: scale(0.88); }
.float-nav-item:active svg       { transform: scale(0.9); }

/* Active states — color-coded per brand identity */
.float-nav-item--home.active  { color: var(--dark); background: rgba(26,26,26,0.07); }
.float-nav-item--extra.active { color: var(--blue); background: rgba(66,142,211,0.12); }
.float-nav-item--etab.active  { color: var(--red);  background: rgba(229,75,75,0.12); }

/* Hover states */
.float-nav-item--home:not(.active):hover  { color: var(--gray-600); background: rgba(26,26,26,0.04); }
.float-nav-item--extra:not(.active):hover { color: var(--blue);     background: rgba(66,142,211,0.07); }
.float-nav-item--etab:not(.active):hover  { color: var(--red);      background: rgba(229,75,75,0.07); }

/* Séparateur visuel entre navigation et CTA */
.float-nav-item--cta::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 22%;
  height: 56%;
  width: 1px;
  background: var(--gray-200);
  border-radius: 1px;
}

/* CTA pill — green filled, always stands out */
.float-nav-item--cta {
  flex: 1.25;
  color: #fff;
  background: var(--green);
  box-shadow: 0 2px 12px rgba(57,121,108,0.40);
  padding: 10px 14px 8px;
}
.float-nav-item--cta:hover  { color: #fff; background: #2f6e61; }
.float-nav-item--cta:active { transform: scale(0.88); }

@media (max-width: 768px) {
  /* Float nav — entrance avec scale + spring */
  .float-nav {
    display: flex;
    animation: float-nav-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 0.3s both;
  }

  /* Supprime le header Blocksy sur mobile — le pill nav gère la navigation */
  #header, .ct-drawer-canvas { display: none; }

  /* Supprime le sticky CTA — remplacé par le bouton "Rejoindre" du pill nav */
  .sticky-cta { display: none !important; }

  /* Efface tout padding-top résiduel du header sticky Blocksy */
  body { padding-top: 0 !important; padding-bottom: 100px; }

  /* Legacy (thème jobandgo non utilisé en prod mais cohérence locale) */
  .hamburger  { display: none; }
  .mobile-nav { display: none; }
}

@media (max-width: 360px) {
  .float-nav-item { font-size: 0.62rem; padding: 10px 7px 8px; }
}

/* ============================================================
   MOBILE UX v5.8 — Améliorations visuelles & structure (juin 2026)
   Cards en 2 colonnes · Form row plus tôt · Textes centrés
   Toutes les règles sont sous media queries — sans impact desktop.
   ============================================================ */

/* ─────────────────────────────────────────────
   A. CARDS-GRID — 2 colonnes entre 480px et 768px
   La règle de base (~ligne 2709) met les grilles
   3 et 4 colonnes en 1fr à ≤768px → long scroll.
   On rétablit 2 colonnes dans cette plage.
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .cards-grid--3,
  .cards-grid--4 {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  /* Cards-grid--4 : centrage icône (comme cards-grid--3 ligne ~8239) */
  .cards-grid--4 .card           { text-align: center; }
  .cards-grid--4 .card-icon-wrap { margin-left: auto; margin-right: auto; }
  .cards-grid--4 .card p         { text-align: left; }
}

/* ≤ 480px : 1 colonne pour éviter les cartes trop étroites */
@media (max-width: 480px) {
  .cards-grid--3,
  .cards-grid--4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ─────────────────────────────────────────────
   B. FORM ROW — 1 colonne dès ≤ 640px
   Prénom + Nom côte à côte trop étroit sur
   les téléphones 375–640px.
───────────────────────────────────────────── */
@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ─────────────────────────────────────────────
   C. AUDIENCE CARDS — h3 centré en colonne unique
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .audience-card h3 {
    text-align: center;
  }
}

/* ─────────────────────────────────────────────
   D. SECTION TITLE — max-width centré mobile
   Évite les ruptures maladroites sur longs titres.
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .section-header--center .section-title {
    max-width: 88vw;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─────────────────────────────────────────────
   E. APP PHONE BADGE (établissement) — centré
   Entre 481–768px, translateX(60px) désaxe le badge.
───────────────────────────────────────────── */
@media (max-width: 768px) and (min-width: 481px) {
  .app-phone-badge {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ─────────────────────────────────────────────
   F. AUDIENCE GRID — gap compact mobile
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .audience-grid { gap: 14px; }
}

/* ============================================
   PAGE TRANSITION — swipe float-nav (mobile)
   ============================================ */

/* Page cover — masqué par défaut */
#page-cover { display: none; }

/* Opt-in aux View Transitions cross-document (MPA) */
@view-transition {
  navigation: auto;
}

/* Desktop : aucune animation — zéro impact sur la version PC */
@media (min-width: 769px) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ── Mobile : transitions directionnelles (View Transitions API) ────────── */
@media (max-width: 768px) {

  /* Le navigateur met plus-lighter par défaut : là où old et new se chevauchent,
     les couleurs s'additionnent → flash blanc. On force normal. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
  }

  /* ── FORWARD — push (Accueil → Extras → Établissement)
     Nouvelle page entre depuis la droite avec son ombre de bord.
     Ancienne page recule en parallaxe + assombrissement (pas de scale : plus fluide). */
  html[data-nav-dir="forward"]::view-transition-old(root) {
    z-index: 1;
    animation: jag-push-exit 260ms cubic-bezier(0.4, 0, 1, 1) both;
  }
  html[data-nav-dir="forward"]::view-transition-new(root) {
    z-index: 2;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
    animation: jag-push-enter 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* ── BACKWARD — pop (Établissement → Extras → Accueil)
     Ancienne page se décolle vers la droite.
     Nouvelle page émerge du fond, reprend sa position et sa lumière. */
  html[data-nav-dir="backward"]::view-transition-old(root) {
    z-index: 2;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
    animation: jag-pop-exit  240ms cubic-bezier(0.4, 0, 1, 1) both;
  }
  html[data-nav-dir="backward"]::view-transition-new(root) {
    z-index: 1;
    animation: jag-pop-enter 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* ── Fallback frosted-glass (navigateurs sans MPA View Transitions) ── */
  #page-cover {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(250, 249, 247, 0.92);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    pointer-events: none;
    transform: translateX(100%);
    will-change: transform;
  }

  #page-cover.jag-cover-in-r  { animation: jag-cover-in-r  240ms cubic-bezier(0.4, 0, 1, 1) forwards; }
  #page-cover.jag-cover-in-l  { animation: jag-cover-in-l  240ms cubic-bezier(0.4, 0, 1, 1) forwards; }
  #page-cover.jag-cover-out-l { animation: jag-cover-out-l 380ms cubic-bezier(0, 0, 0.2, 1) 40ms both; }
  #page-cover.jag-cover-out-r { animation: jag-cover-out-r 380ms cubic-bezier(0, 0, 0.2, 1) 40ms both; }
}

/* ── Keyframes View Transitions ─────────────────────────────────────────── */
@keyframes jag-push-exit {
  to {
    transform: translateX(-32%);
    filter: brightness(0.58);
  }
}
@keyframes jag-push-enter {
  from { transform: translateX(100%); }
}
@keyframes jag-pop-exit {
  to { transform: translateX(100%); }
}
@keyframes jag-pop-enter {
  from {
    transform: translateX(-32%);
    filter: brightness(0.58);
  }
}

/* ── Keyframes overlay fallback ─────────────────────────────────────────── */
@keyframes jag-cover-in-r  { from { transform: translateX(100%);  } to { transform: translateX(0); } }
@keyframes jag-cover-in-l  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes jag-cover-out-l { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes jag-cover-out-r { from { transform: translateX(0); } to { transform: translateX(100%);  } }

/* ── prefers-reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  #page-cover.jag-cover-in-r,
  #page-cover.jag-cover-in-l,
  #page-cover.jag-cover-out-l,
  #page-cover.jag-cover-out-r { animation-duration: 0.01ms !important; }
}

/* ============================================================
   MOBILE UX v6.2 — Photos non rognées, 2e photo visible
   ============================================================ */

/* A. ACCUEIL — photos non rognées + 2e photo visible sur mobile
   Problèmes corrigés :
   1. height:200px coupait les photos par le bas → height:auto
   2. Le dégradé ::after (40px ivoire) masquait la 2e photo → supprimé
   3. Le v5.4 écrasait padding → padding:0 0 44px rétabli
   La photo arrière dépasse de 44px en bas de la photo avant.      */
@media (max-width: 480px) {
  .hero-poster-wrap::after { display: none !important; }

  .hero-poster-card {
    max-width: min(220px, 64vw) !important;
    width:     min(220px, 64vw) !important;
    margin: 0 auto !important;
    padding: 0 0 44px !important;
  }
  .hero-poster--front {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 16px !important;
    transform: none !important;
  }
  .hero-poster--back {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    top: 44px !important;
    border-radius: 14px !important;
    transform: rotate(-1.5deg) !important;
  }
}

/* ============================================================
   v6.4 — Établissement : hero-pm-card + formules ivoire
   ============================================================ */

/* Hero Perfect Matching card */
.hero-pm-card {
  width: 100%;
  max-width: 420px;
  animation: card-rise 0.6s cubic-bezier(0.22, 0.68, 0, 1.2) 0.2s both;
}
.hero-pm-card svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 48px rgba(229,75,75,0.30)) drop-shadow(0 4px 12px rgba(0,0,0,0.10));
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile : hero-pm-card visible + centré */
@media (max-width: 860px) {
  .hero--red .hero-visual {
    display: block !important;
    padding: 0 0 32px !important;
  }
  .hero--red .hero-pm-card {
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ============================================================
   PRICING CARDS — Formules établissement
   Même mécanique que la page extras : stretch + flex-col +
   flex:1 sur features + margin-top:auto sur CTA.
   min-height sur pricing-card-top pour aligner les features.
   ============================================================ */
.pricing-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.pricing-pair--centered {
  max-width: 760px;
  margin: 48px auto 0;
}

/* ── Carte de base ── */
.pricing-card {
  background: white;
  border: 1.5px solid #E8E3DE;
  border-radius: 24px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.09);
}

/* Header de chaque carte — min-height pour aligner le début des features */
.pricing-card-top {
  min-height: 230px;
  display: flex;
  flex-direction: column;
}

/* ── Carte Business (rouge) — comme plan-card--premium-blue sur extras ── */
.pricing-card--popular-red {
  background: var(--red);
  border-color: transparent;
  color: white;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 40px rgba(229,75,75,0.45),
    0 2px 8px rgba(0,0,0,0.12);
  transform: translateY(-6px);
  z-index: 1;
}
.pricing-card--popular-red:hover {
  transform: translateY(-9px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 16px 52px rgba(229,75,75,0.52),
    0 2px 8px rgba(0,0,0,0.15);
}
/* Wave décorative en fond */
.pricing-card--popular-red::before {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  height: 220px;
  background: url('https://job-and-go.fr/wp-content/themes/jobandgo/assets/images/wave-white.svg') center / contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.pricing-card--popular-red > * { position: relative; z-index: 1; }

/* ── Éléments ── */
.pricing-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  width: fit-content;
}
.pricing-badge--free    { background: #FBEAEA; color: var(--red); }
.pricing-badge--popular { background: var(--yellow); color: var(--dark); }

.pricing-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: inherit;
}
.pricing-price {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  line-height: 1;
  margin-bottom: 4px;
}
.pricing-amount {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: inherit;
}
.pricing-period { font-size: 0.85rem; opacity: 0.75; margin-bottom: 7px; }
.pricing-tagline { font-size: 0.82rem; color: #888; margin-bottom: 14px; }
.pricing-card--popular-red .pricing-tagline { color: rgba(255,255,255,0.65); }
.pricing-promo { font-size: 0.88rem; font-weight: 700; color: var(--yellow); margin-bottom: 4px; }
.pricing-promo-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--dark);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 10px;
}
.pricing-divider { height: 1px; background: #E8E3DE; margin: 14px 0; }
.pricing-card--popular-red .pricing-divider { background: rgba(255,255,255,0.2); }
.pricing-note {
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
  margin-bottom: 0;
}

/* Features : flex:1 pousse le CTA en bas dans les deux cartes */
.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  margin: 0 0 20px;
  padding: 0;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  line-height: 1.3;
}
.pricing-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
}
.pricing-check--red    { background: #FBEAEA; color: var(--red); }
.pricing-check--yellow { background: var(--yellow); color: var(--dark); }

.pricing-cta {
  display: block;
  width: 100%;
  padding: 14px;
  text-align: center;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s;
  text-decoration: none;
  margin-top: auto;
  box-sizing: border-box;
}
.pricing-cta--red         { border: 1.5px solid var(--red); color: var(--red); background: transparent; }
.pricing-cta--red:hover   { background: var(--red); color: white; }
.pricing-cta--white       { border: 1.5px solid white; color: var(--dark); background: white; }
.pricing-cta--white:hover { background: transparent; color: white; }

/* ── 860 → 701px : 1 colonne ── */
@media (max-width: 860px) {
  .pricing-pair,
  .pricing-pair--centered { grid-template-columns: 1fr; }
  .pricing-card--popular-red { transform: none; }
  .pricing-card-top { min-height: 0; }
}

/* ── ≤ 700px : 2 colonnes compactes ── */
@media (max-width: 700px) {
  .pricing-pair--centered {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 100%;
    margin: 24px 0 0;
    align-items: stretch;
  }
  .pricing-card--popular-red { order: -1; }
  .pricing-card { padding: 16px 13px 18px; border-radius: 18px; }
  .pricing-card-top { min-height: 0; }
  /* Badge centré dans la colonne flex de la carte */
  .pricing-badge { font-size: 0.55rem; padding: 3px 9px; margin-bottom: 10px; align-self: center; }
  .pricing-name { font-size: 1.05rem; margin-bottom: 5px; text-align: center; }
  /*
   * Respiration sous le prix (149 €, 0 €, 299 €).
   * La marge standard (4px) est trop serrée sur mobile.
   */
  .pricing-price { margin-bottom: 12px; justify-content: center; }
  .pricing-amount { font-size: 1.55rem; }
  .pricing-period { font-size: 0.68rem; }
  /*
   * SLOT "OFFRE" — même hauteur dans les deux cartes.
   * L'égalisation divider est gérée en JS (mesure réelle après rendu).
   */
  .pricing-tagline {
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: #1a1a1a;
    margin: 0 0 8px;
  }
  .pricing-promo {
    font-size: 0.68rem;
    font-weight: 700;
    margin-bottom: 4px;
    text-align: center;
  }
  .pricing-promo-badge {
    font-size: 0.54rem;
    padding: 2px 8px;
    margin-bottom: 8px;
    align-self: center;
  }
  .pricing-divider { margin: 8px 0; }
  /*
   * Note ROI masquée sur mobile — présente uniquement dans la carte Business,
   * elle décalerait les features par rapport à la carte gratuite.
   * Visible en plein écran où l'espace est suffisant.
   */
  .pricing-note { display: none; }
  .pricing-features { gap: 6px; margin-bottom: 14px; }
  .pricing-features li { font-size: 0.66rem; gap: 7px; line-height: 1.25; align-items: flex-start; }
  .pricing-check { width: 16px; height: 16px; min-width: 16px; flex-shrink: 0; margin-top: 1px; font-size: 0.55rem; }
  .pricing-cta { padding: 11px 10px; font-size: 0.72rem; border-radius: 14px; }
}

@media (max-width: 360px) {
  .pricing-pair--centered { gap: 7px; }
  .pricing-card { padding: 13px 10px 15px; }
  .pricing-name { font-size: 0.95rem; }
  .pricing-amount { font-size: 1.45rem; }
  .pricing-features li { font-size: 0.62rem; }
}

/* ── Hero photos — swap au tap (mobile accueil) ─────────────────────────── */
@media (max-width: 480px) {
  .hero-poster--front,
  .hero-poster--back {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.4s cubic-bezier(0.22, 0.68, 0, 1.2);
  }

  /* Bouton transparent couvrant toute la carte — cible de tap fiable sur iOS */
  .hero-poster-tap {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Transforms only — le z-index est géré exclusivement via element.style en JS.
     Les styles inline battent toutes les règles CSS non-!important, y compris
     le sticky :hover de Safari qui remettrait image 2 devant sinon. */
  .hero-poster-card.is-flipped .hero-poster--back {
    transform: translateY(-44px) !important;
  }
  .hero-poster-card.is-flipped .hero-poster--front {
    transform: rotate(1.5deg) translateY(44px) !important;
  }
}

/* ============================================================
   PAGE EXTRAS — MOBILE UX PRO (v5.1 · juin 2026)
   Optimisations smartphone dédiées à la page /extras.
   Toutes les règles sont scoped ≤ 860 px / 768 px / 480 px
   et n'affectent pas le rendu desktop (≥ 860 px).
   ============================================================ */

@media (max-width: 860px) {
  .hero-split .hero-content { text-align: center; }
  .hero-split .hero-slogan  { align-items: center; }
  .hero-split .hero-sub     { margin-left: auto; margin-right: auto; }
  .hero-trust-mini          { justify-content: center; }
}

@media (max-width: 640px) {
  .hero-split .hero-slogan { font-size: clamp(36px, 10vw, 52px); line-height: 0.95; }
}
@media (max-width: 480px) {
  .hero-split .hero-slogan { font-size: clamp(30px, 9vw, 42px); line-height: 0.97; }
  .hero-trust-mini .sep    { margin: 0 6px; }
}
@media (max-width: 380px) {
  .hero-trust-mini           { flex-direction: column; align-items: center; gap: 6px; }
  .hero-trust-mini .sep      { display: none; }
}
@media (max-width: 360px) {
  .hero-split .hero-slogan { font-size: 28px; }
}

@media (max-width: 700px) {
  .ctable-th--label,
  .ctable-label        { display: flex !important; }
  .ctable thead,
  .ctable tbody tr     { grid-template-columns: 1.4fr 1fr 1.1fr; }
  .ctable-th--label    { font-size: 0.58rem; padding: 14px 10px; }
  .ctable-th           { padding: 14px 8px; font-size: 0.78rem; }
  .ctable-label        { font-size: 0.71rem; padding: 12px 10px; line-height: 1.35; }
  .ctable-cell         { font-size: 0.72rem; padding: 12px 6px; flex-direction: column; gap: 4px; text-align: center; }
  .ci                  { width: 18px; height: 18px; font-size: 0.62rem; }
}
@media (max-width: 440px) {
  .ctable thead,
  .ctable tbody tr { grid-template-columns: 1.2fr 1fr 1.1fr; }
  .ctable-label    { font-size: 0.65rem; padding: 10px 8px; }
  .ctable-cell     { font-size: 0.68rem; padding: 10px 5px; }
  .ctable-th       { font-size: 0.72rem; padding: 12px 6px; }
}

@media (max-width: 768px) {
  .stats-strip { border-radius: var(--radius-lg); }
}
@media (max-width: 480px) {
  .stats-strip             { margin-left: 0; margin-right: 0; border-radius: var(--radius-md); }
  .stat-strip-item         { padding: 20px 12px; }
  .stat-strip-item strong  { font-size: clamp(1.5rem, 7vw, 1.8rem); }
  .plan-roi-banner         { padding: 20px 16px; border-radius: 16px; margin-left: 0; margin-right: 0; }
  .plan-roi-banner-headline { font-size: 1.05rem; }
  .plan-cards--centered    { margin-top: 28px; margin-left: 0; margin-right: 0; gap: 12px; }
  .app-stores              { justify-content: center; }
  .app-store-badge         { flex: 1; max-width: 200px; justify-content: center; }
  .cta-perks li            { font-size: 0.88rem; gap: 10px; }
  .cta-form-left h3        { font-size: 1.05rem; }
  .seo-text                { margin-bottom: 28px; text-align: center; }
  .seo-text p              { font-size: 0.93rem; line-height: 1.7; }
  .plan-roi-banner-headline { word-break: keep-all; }
}
@media (max-width: 860px) {
  section[id] { scroll-margin-top: 80px; }
}
@media (max-width: 360px) {
  .wave-sep,
  .wave-sep svg { height: 40px; }
  .ctable-wrap  { overflow-x: auto; border-radius: 12px; }
  .ctable       { min-width: 300px; }
}

/* ============================================================
   PAGE EXTRAS — MOBILE UX PRO v5.2 (juin 2026)
   Phone mockup, iOS fix, sticky CTA, touch targets, tableau overflow.
   ============================================================ */

@media (max-width: 860px) {
  .hero-split .phones-visual-wrap {
    display: flex !important;
    padding: 28px 0 0;
    justify-content: center;
    align-items: flex-start;
    min-height: auto;
    background: none;
  }
  .hero-split .pv-glow        { display: none; }
  .hero-split .phones-fan     { width: 174px; height: 390px; margin: 0 auto; }
  .hero-split .pv-phone--left,
  .hero-split .pv-phone--right { display: none !important; }
  .hero-split .pv-phone--center {
    width: 174px !important;
    height: 375px !important;
    border-radius: 26px !important;
  }
  .hero-split .pv-live { margin-top: 14px; }
}
@media (max-width: 480px) {
  .hero-split .phones-fan       { width: 148px; height: 336px; }
  .hero-split .pv-phone--center { width: 148px !important; height: 320px !important; border-radius: 22px !important; }
}

/* Sticky CTA extras (classe distincte de .sticky-cta accueil) */
.sticky-mob-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding: 10px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.sticky-mob-cta.sticky-mob-cta--visible { transform: translateY(0); pointer-events: auto; }
.sticky-mob-cta .btn { width: 100%; justify-content: center; font-size: 0.95rem; }
@media (max-width: 768px) {
  .sticky-mob-cta { display: block; }
}

@media (max-width: 768px) {
  .plan-cta,
  .plan-cta--v2-free,
  .plan-cta--v2-premium,
  .plan-cta--v2-solid-blue,
  .plan-cta--v2-free-red,
  .plan-cta--v2-solid-red { min-height: 48px; padding-top: 14px; padding-bottom: 14px; }
  .hero-actions .btn-xl   { min-height: 52px; }
  .ctable-cta .btn        { width: 100%; justify-content: center; min-height: 52px; }
  .faq-q      { font-size: 0.9rem; line-height: 1.45; gap: 12px; padding: 16px 0; }
  .faq-q-icon { flex-shrink: 0; }
  .faq-a      { font-size: 0.88rem; }
}
@media (max-width: 480px) {
  .rating-aggregate { flex-wrap: wrap; justify-content: center; text-align: center; padding: 8px 16px; gap: 6px; }
  .app-store-badge  { width: 100%; max-width: 240px; justify-content: center; }
  .breadcrumb-list  { padding: 0; }
}

/* ============================================================
   PAGE EXTRAS — MOBILE UX PRO v5.3 (juin 2026)
   Timeline à gauche · formules côte à côte · témoignages carousel
   ============================================================ */

@media (max-width: 768px) {
  .timeline--3                             { max-width: 100%; margin-left: auto; margin-right: auto; }
  .timeline--3 .timeline-step             { display: grid !important; grid-template-columns: 52px 1fr; column-gap: 16px; row-gap: 0; align-items: start; text-align: left !important; padding: 0 0 24px; flex-direction: unset !important; }
  .timeline--3 .timeline-num              { grid-column: 1; grid-row: 1 / 5; margin-bottom: 0; align-self: start; margin-top: 2px; }
  .timeline--3 .timeline-time             { grid-column: 2; grid-row: 1; margin-bottom: 4px; display: block; }
  .timeline--3 .timeline-step h3          { grid-column: 2; grid-row: 2; margin-bottom: 4px; text-align: left; }
  .timeline--3 .timeline-step p           { grid-column: 2; grid-row: 3; text-align: left; }
  .timeline--3 .timeline-step:not(:last-child) { border-bottom: 1px solid var(--gray-200); padding-bottom: 20px; margin-bottom: 20px; }
}

@media (max-width: 700px) {
  .plan-cards--centered { grid-template-columns: 1fr 1fr !important; gap: 10px; max-width: 100%; margin-left: 0; margin-right: 0; margin-top: 20px; }
  .plan-card            { padding: 14px 11px 14px; border-radius: 16px; }
  .plan-cards--centered .plan-card-top { min-height: 100px; margin-bottom: 10px; }
  .plan-badge           { font-size: 0.5rem; padding: 3px 8px; margin-bottom: 8px; letter-spacing: 0.05em; }
  .plan-tier            { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 2px; }
  .plan-amount          { font-size: 1.6rem; font-weight: 800; line-height: 1; }
  .plan-period          { font-size: 0.6rem; opacity: 0.7; margin-bottom: 2px; }
  .plan-card--premium-blue .plan-period,
  .plan-card--premium-red .plan-period  { font-size: 0.6rem; opacity: 0.7; margin-bottom: 0; }
  .plan-strike          { font-size: 0.68rem; display: block; margin-bottom: -2px; }
  .plan-promo           { font-size: 0.58rem; font-weight: 700; line-height: 1.3; padding: 3px 6px; border-radius: 6px; text-align: center; display: block; box-sizing: border-box; margin: 4px 0 2px; }
  .plan-card--premium-red  .plan-promo { background: rgba(229, 75, 75, 0.13); color: var(--red); }
  .plan-card--premium-blue .plan-promo { background: rgba(45, 95, 185, 0.1); color: #2d5fb9; }
  .plan-commitment      { font-size: 0.5rem; opacity: 0.6; line-height: 1.3; }
  .plan-features        { gap: 5px; margin-bottom: 12px; }
  .plan-feature         { font-size: 0.63rem; gap: 5px; line-height: 1.3; }
  .plan-icon            { width: 13px; height: 13px; min-width: 13px; font-size: 0.5rem; }
  .plan-cta,
  .plan-cta--v2-free,
  .plan-cta--v2-premium,
  .plan-cta--v2-solid-blue,
  .plan-cta--v2-free-red,
  .plan-cta--v2-solid-red { padding: 10px 8px; font-size: 0.66rem; border-radius: 10px; justify-content: center; text-align: center; min-height: 40px; }
  .plan-cta-chevron { display: none; }
}
@media (max-width: 360px) {
  .plan-card    { padding: 11px 8px; }
  .plan-tier    { font-size: 0.62rem; }
  .plan-amount  { font-size: 1.35rem; }
  .plan-card--premium-blue .plan-period,
  .plan-card--premium-red .plan-period { font-size: 0.55rem; }
  .plan-promo   { font-size: 0.52rem; }
  .plan-feature { font-size: 0.58rem; }
}

@media (max-width: 600px) {
  .testimonials-grid--3 {
    display: flex !important;
    grid-template-columns: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    margin-left: -16px;
    margin-right: -16px;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 80%, transparent 100%);
  }
  .testimonials-grid--3::-webkit-scrollbar { display: none; }
  .testimonials-grid--3 .testimonial { flex: 0 0 min(290px, 83vw); scroll-snap-align: start; scroll-snap-stop: always; }
  .testimonials-grid--3::after { content: ''; flex: 0 0 8px; }
}
@media (max-width: 480px) {
  .testimonials-grid--3 { padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; gap: 10px; }
  .testimonials-grid--3 .testimonial { flex: 0 0 min(270px, 86vw); }
}

/* ============================================================
   PAGE EXTRAS — MOBILE UX PRO v5.4 (juin 2026)
   Formules : toutes les features visibles · Hero 3 téléphones en profondeur
   ============================================================ */

@media (max-width: 700px) {
  .plan-cards--centered .plan-feature:nth-child(n+4) { display: flex !important; }
  .plan-cards--centered .plan-features::after        { display: none; content: '' !important; }
  .plan-feature  { font-size: 0.61rem; gap: 5px; line-height: 1.3; }
  .plan-features { gap: 5px; }
}

@keyframes pv-float-mobile {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

@media (max-width: 860px) {
  .hero-split .phones-visual-wrap {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 28px 0 0;
    min-height: auto;
    background: none;
    position: relative;
    overflow: visible;
  }
  .hero-split .pv-glow {
    display: block !important;
    position: absolute;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(66,142,211,0.32) 0%, transparent 70%);
    top: 42%;
    left: 46%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
  }
  .hero-split .phones-fan {
    width: min(380px, calc(100vw - 40px));
    height: 440px;
    margin: 0 auto;
    position: relative;
    flex-shrink: 0;
  }
  .hero-split .pv-phone--left {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 50px !important;
    width: 148px !important;
    height: 320px !important;
    border-radius: 22px !important;
    transform: rotate(-9deg) !important;
    z-index: 1;
    opacity: 0.80;
  }
  .hero-split .pv-phone--center {
    position: absolute !important;
    left: calc(50% - 91px) !important;
    top: 0 !important;
    width: 182px !important;
    height: 392px !important;
    border-radius: 28px !important;
    z-index: 3;
    transform: none !important;
    animation: pv-float-mobile 6s ease-in-out infinite !important;
    box-shadow: 0 20px 56px rgba(66,142,211,0.28), 0 8px 24px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.06) !important;
  }
  .hero-split .pv-phone--right {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 28px !important;
    width: 148px !important;
    height: 320px !important;
    border-radius: 22px !important;
    transform: rotate(5deg) !important;
    z-index: 2;
    opacity: 0.88;
  }
  .hero-split .pv-live { display: inline-flex; margin-top: 16px; position: relative; z-index: 1; }
}
@media (max-width: 480px) {
  .hero-split .phones-fan       { width: min(300px, calc(100vw - 28px)); height: 370px; }
  .hero-split .pv-phone--left   { top: 44px !important; width: 118px !important; height: 255px !important; border-radius: 18px !important; }
  .hero-split .pv-phone--center { left: calc(50% - 74px) !important; width: 148px !important; height: 320px !important; border-radius: 22px !important; }
  .hero-split .pv-phone--right  { width: 118px !important; height: 255px !important; top: 28px !important; border-radius: 18px !important; }
  .hero-split .pv-glow          { width: 190px; height: 190px; opacity: 0.22; }
}
@media (max-width: 360px) {
  .hero-split .phones-fan       { width: calc(100vw - 28px); height: 330px; }
  .hero-split .pv-phone--left   { top: 36px !important; width: 104px !important; height: 225px !important; border-radius: 16px !important; }
  .hero-split .pv-phone--center { left: calc(50% - 69px) !important; width: 138px !important; height: 298px !important; border-radius: 20px !important; }
  .hero-split .pv-phone--right  { width: 104px !important; height: 225px !important; top: 18px !important; border-radius: 16px !important; }
}

/* ============================================================
   PAGE ÉTABLISSEMENT — MOBILE UX (phones fan v2, juin 2026)
   Fan 3 téléphones centré, identique à la page extras v5.3.
   ============================================================ */

@media (max-width: 860px) {
  #app .phones-visual-wrap {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 28px 0 0;
    min-height: auto;
    background: none;
    position: relative;
    overflow: visible;
  }
  #app .pv-glow--red {
    display: block !important;
    position: absolute;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(229,75,75,0.20) 0%, transparent 70%);
    top: 42%;
    left: 46%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
  }
  #app .phones-fan {
    width: min(380px, calc(100vw - 40px));
    height: 440px;
    margin: 0 auto;
    position: relative;
    flex-shrink: 0;
  }
  #app .pv-phone--left {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 50px !important;
    width: 148px !important;
    height: 320px !important;
    border-radius: 22px !important;
    transform: rotate(-9deg) !important;
    z-index: 1;
    opacity: 0.80;
  }
  #app .pv-phone--center {
    position: absolute !important;
    left: calc(50% - 91px) !important;
    top: 0 !important;
    width: 182px !important;
    height: 392px !important;
    border-radius: 28px !important;
    z-index: 3;
    transform: none !important;
    animation: pv-float-mobile 6s ease-in-out infinite !important;
    box-shadow: 0 20px 56px rgba(229,75,75,0.20), 0 8px 24px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.06) !important;
  }
  #app .pv-phone--right {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 28px !important;
    width: 148px !important;
    height: 320px !important;
    border-radius: 22px !important;
    transform: rotate(5deg) !important;
    z-index: 2;
    opacity: 0.88;
  }
  #app .pv-live { display: inline-flex; margin-top: 16px; position: relative; z-index: 1; }
}

@media (max-width: 480px) {
  #app .phones-fan       { width: min(300px, calc(100vw - 28px)); height: 370px; }
  #app .pv-phone--left   { top: 44px !important; width: 118px !important; height: 255px !important; border-radius: 18px !important; }
  #app .pv-phone--center { left: calc(50% - 74px) !important; width: 148px !important; height: 320px !important; border-radius: 22px !important; }
  #app .pv-phone--right  { width: 118px !important; height: 255px !important; top: 28px !important; border-radius: 18px !important; }
  #app .pv-glow--red     { width: 190px; height: 190px; opacity: 0.15; }
}

@media (max-width: 360px) {
  #app .phones-fan       { width: calc(100vw - 28px); height: 330px; }
  #app .pv-phone--left   { top: 36px !important; width: 104px !important; height: 225px !important; border-radius: 16px !important; }
  #app .pv-phone--center { left: calc(50% - 69px) !important; width: 138px !important; height: 298px !important; border-radius: 20px !important; }
  #app .pv-phone--right  { width: 104px !important; height: 225px !important; top: 18px !important; border-radius: 16px !important; }
}

/* ============================================================
   PAGE ÉTABLISSEMENT — Phone fan : contenu compact (mobiles)
   Réduit avatars, étoiles et marges pour que tout soit visible
   dans les téléphones du fan aux petits breakpoints.
   ============================================================ */

/* ≤480px : gauche (missions) + droite (candidatures) + centre (DPAE) */
@media (max-width: 480px) {
  /* Droite : en-tête candidatures — évite que le badge "2 reçues" soit coupé */
  #app .pvp-sw-title             { padding: 0 10px; }
  #app .pvp-sw-label             { font-size: 0.60rem; }
  #app .pvp-sw-count             { font-size: 0.42rem; padding: 2px 6px; }
  #app .pvp-cand-av              { width: 24px; height: 24px; font-size: 0.46rem; }
  #app .pvp-cand-card            { gap: 6px; }
  #app .pvp-cand-stars           { font-size: 0.40rem; }

  /* Centre : DPAE — tout tenir dans 255px − barre 30px − padding = 206px */
  #app .pvp-match-screen         { padding-top: 7px; }
  #app .pvp-ms-logo              { margin-bottom: 6px; }
  #app .pvp-ms-check             { width: 40px; height: 40px; margin-bottom: 5px; }
  #app .pvp-ms-sub               { margin-bottom: 8px; }
  #app .pvp-ms-card              { margin-bottom: 7px; }

  /* Gauche : dashboard — évite que le bouton "+ Publier une mission" soit coupé en bas */
  #app .pvp-dash                 { padding: 6px 9px 7px; }
  #app .pvp-logo-sm              { font-size: 0.62rem; }
  #app .pvp-dash-eyebrow         { margin: 2px 0 4px; }
  #app .pvp-miss-list            { gap: 3px; margin-bottom: 5px; }
  #app .pvp-miss-card            { padding: 5px 8px; }
  #app .pvp-miss-card-title      { font-size: 0.56rem; margin-bottom: 1px; }
  #app .pvp-miss-card-meta       { font-size: 0.40rem; margin-bottom: 4px; }
  #app .pvp-add-btn              { padding: 5px 8px; font-size: 0.48rem; }
}

/* ≤360px : compactage max pour les très petits écrans */
@media (max-width: 360px) {
  /* Droite — candidatures */
  #app .pvp-cand-av              { width: 22px; height: 22px; font-size: 0.42rem; }
  #app .pvp-cand-card            { gap: 5px; padding: 6px 7px; }
  #app .pvp-cand-stars           { font-size: 0.36rem; }
  #app .pvp-cand-list            { padding: 0 8px; gap: 4px; margin-bottom: 5px; }
  #app .pvp-cand-confirm         { margin: 0 8px 8px; padding: 7px 8px; font-size: 0.50rem; }
  #app .pvp-sw-header            { padding: 2px 10px 3px; }
  #app .pvp-sw-title             { padding: 0 8px; margin-bottom: 5px; }
  #app .pvp-sw-label             { font-size: 0.52rem; }
  #app .pvp-sw-count             { font-size: 0.38rem; padding: 2px 5px; }

  /* Centre — DPAE : tout faire tenir dans 195px (phone 225px − barre 30px) */
  #app .pvp-match-screen         { padding: 7px 10px 8px; }
  #app .pvp-ms-logo              { margin-bottom: 6px; }
  #app .pvp-ms-check             { width: 36px; height: 36px; margin-bottom: 5px; }
  #app .pvp-ms-title             { margin-bottom: 2px; }
  #app .pvp-ms-sub               { font-size: 0.40rem; margin-bottom: 6px; }
  #app .pvp-ms-card              { padding: 7px 8px; margin-bottom: 5px; }
  #app .pvp-ms-estab             { margin-bottom: 1px; font-size: 0.60rem; }
  #app .pvp-ms-time-row          { font-size: 0.38rem; margin-bottom: 5px; }
  #app .pvp-ms-contact           { padding: 3px 6px; font-size: 0.38rem; }
  #app .pvp-ms-cta               { font-size: 0.46rem; }

  /* Gauche — dashboard */
  #app .pvp-dash                 { padding: 5px 7px 6px; }
  #app .pvp-logo-sm              { font-size: 0.56rem; }
  #app .pvp-dash-eyebrow         { margin: 1px 0 3px; }
  #app .pvp-miss-list            { gap: 2px; margin-bottom: 4px; }
  #app .pvp-miss-card            { padding: 4px 6px; }
  #app .pvp-miss-card-title      { font-size: 0.52rem; margin-bottom: 1px; }
  #app .pvp-miss-card-meta       { font-size: 0.36rem; margin-bottom: 3px; }
  #app .pvp-miss-badge           { font-size: 0.38rem; padding: 1px 6px; }
  #app .pvp-add-btn              { padding: 4px 7px; font-size: 0.44rem; }
}

/* ============================================================
   FORMULES — effet focus au tap (plan-card)
   Tap 1 : zoom carte + overlay brandé fond sombre avec waves.
   Tap 2 sur la même carte : navigation CTA normale.
   Clic overlay ou Échap : retour au mode normal.
   ============================================================ */

/* Cartes — curseur pointer + transitions */
.pricing-card,
.plan-card {
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.30s ease,
              opacity 0.25s ease;
}

/* Overlay : fond flouté teinté sombre + waves de marque Job&Go */
.pricing-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(20px) saturate(0.55);
  -webkit-backdrop-filter: blur(20px) saturate(0.55);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.30s ease;
  will-change: opacity;
}
.pricing-focus-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Waves décoratives — réparties sur tout l'écran, coins + centre, aucun motif circulaire */
.pfo-wave {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  filter: none;
}
/* coins — grandes waves débordant hors écran */
.pfo-wave--1  { width: 34vmin; left:  2%; top:  2%; transform: translate(-50%,-50%) rotate(-32deg);  opacity: 0.48; }
.pfo-wave--4  { width: 32vmin; left: 98%; top:  4%; transform: translate(-50%,-50%) rotate(38deg);   opacity: 0.46; }
.pfo-wave--8  { width: 34vmin; left: 97%; top: 97%; transform: translate(-50%,-50%) rotate(152deg);  opacity: 0.48; }
.pfo-wave--10 { width: 32vmin; left:  3%; top: 97%; transform: translate(-50%,-50%) rotate(-150deg); opacity: 0.46; }
/* bords — tailles intermédiaires */
.pfo-wave--2  { width: 20vmin; left: 35%; top:  6%; transform: translate(-50%,-50%) rotate(18deg);   opacity: 0.32; }
.pfo-wave--3  { width: 24vmin; left: 70%; top:  8%; transform: translate(-50%,-50%) rotate(-55deg);  opacity: 0.38; }
.pfo-wave--5  { width: 22vmin; left: 92%; top: 35%; transform: translate(-50%,-50%) rotate(82deg);   opacity: 0.36; }
.pfo-wave--6  { width: 18vmin; left: 88%; top: 65%; transform: translate(-50%,-50%) rotate(108deg);  opacity: 0.30; }
.pfo-wave--7  { width: 22vmin; left: 68%; top: 90%; transform: translate(-50%,-50%) rotate(162deg);  opacity: 0.36; }
.pfo-wave--9  { width: 20vmin; left: 25%; top: 92%; transform: translate(-50%,-50%) rotate(-178deg); opacity: 0.32; }
.pfo-wave--11 { width: 22vmin; left:  8%; top: 68%; transform: translate(-50%,-50%) rotate(252deg);  opacity: 0.36; }
.pfo-wave--12 { width: 18vmin; left: 12%; top: 30%; transform: translate(-50%,-50%) rotate(-112deg); opacity: 0.30; }
/* intérieur — flottes de fond, très discrètes */
.pfo-wave--13 { width: 20vmin; left: 55%; top: 28%; transform: translate(-50%,-50%) rotate(42deg);   opacity: 0.18; }
.pfo-wave--14 { width: 18vmin; left: 30%; top: 42%; transform: translate(-50%,-50%) rotate(-75deg);  opacity: 0.18; }
.pfo-wave--15 { width: 22vmin; left: 72%; top: 62%; transform: translate(-50%,-50%) rotate(128deg);  opacity: 0.20; }
.pfo-wave--16 { width: 16vmin; left: 44%; top: 72%; transform: translate(-50%,-50%) rotate(198deg);  opacity: 0.16; }
/* bas & milieu — zones encore peu couvertes */
.pfo-wave--17 { width: 24vmin; left: 48%; top: 78%; transform: translate(-50%,-50%) rotate(172deg);  opacity: 0.32; }
.pfo-wave--18 { width: 18vmin; left: 18%; top: 58%; transform: translate(-50%,-50%) rotate(-142deg); opacity: 0.24; }
.pfo-wave--19 { width: 20vmin; left: 62%; top: 48%; transform: translate(-50%,-50%) rotate(65deg);   opacity: 0.20; }
.pfo-wave--20 { width: 26vmin; left: 38%; top: 85%; transform: translate(-50%,-50%) rotate(-168deg); opacity: 0.28; }

/* La section des formules actives flotte au-dessus de l'overlay */
.section.pricing-focus-section {
  position: relative;
  z-index: 600;
}

/* Carte focalisée — agrandie et surélevée */
.pricing-card.card-focused,
.plan-card.card-focused {
  transform: scale(1.07) translateY(-8px) !important;
  z-index: 2;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28),
              0 8px 20px rgba(0, 0, 0, 0.14) !important;
}

/* Cartes estompées — en retrait */
.pricing-card.card-dimmed,
.plan-card.card-dimmed {
  opacity: 0.28 !important;
  transform: scale(0.96) translateY(2px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-focus-overlay { transition: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ============================================
   FORMULAIRE 2 ÉTAPES — établissements
   ============================================ */

.form-step-hint {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

/* ============================================
   SOCIAL BADGE PILLS — HERO
   ============================================ */

.hero-app-sep {
  display: inline-block;
  width: 1px;
  height: 30px;
  background: var(--gray-200);
  align-self: center;
  flex-shrink: 0;
}

/* Identique à .app-badge-pill — même taille, même structure */
.social-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  transition: all 0.2s;
  text-decoration: none;
}

/* Icône colorée en couleurs de marque Job&Go */
.social-badge-pill--insta  { color: #E54B4B; }
.social-badge-pill--linkedin { color: #428ED3; }

.social-badge-pill--insta:hover {
  border-color: #E54B4B;
  box-shadow: 0 4px 14px rgba(229,75,75,0.20);
  transform: translateY(-1px);
}
.social-badge-pill--insta:hover .app-badge-name { color: #E54B4B; }

.social-badge-pill--linkedin:hover {
  border-color: #428ED3;
  box-shadow: 0 4px 14px rgba(66,142,211,0.20);
  transform: translateY(-1px);
}
.social-badge-pill--linkedin:hover .app-badge-name { color: #428ED3; }

/* Variante fond sombre (sections CTA dark) */
.hero-app-sep--dark { background: rgba(255,255,255,0.18); }

.social-badge-pill--dark {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
  box-shadow: none;
}
.social-badge-pill--dark .app-badge-sub  { color: rgba(255,255,255,0.40); }
.social-badge-pill--dark .app-badge-name { color: white; }

.social-badge-pill--dark.social-badge-pill--insta:hover {
  border-color: #E54B4B;
  background: rgba(229,75,75,0.12);
  box-shadow: 0 4px 14px rgba(229,75,75,0.25);
  color: #E54B4B;
}
.social-badge-pill--dark.social-badge-pill--insta:hover .app-badge-name { color: #E54B4B; }

.social-badge-pill--dark.social-badge-pill--linkedin:hover {
  border-color: #428ED3;
  background: rgba(66,142,211,0.12);
  box-shadow: 0 4px 14px rgba(66,142,211,0.25);
  color: #428ED3;
}
.social-badge-pill--dark.social-badge-pill--linkedin:hover .app-badge-name { color: #428ED3; }

@media (max-width: 480px) {
  .hero-app-sep { display: none; }
  .social-badge-pill { padding: 9px 14px; }
}

/* Honeypot anti-bot — invisible pour les humains, rempli par les bots qui scannent tous les champs */
.jag-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}