/* ============================================================
   LEGENDA — 7-day challenge opt-in landing
   Tokens
============================================================ */
:root {
  --purple: #C300FF;
  --purple-dark: #9B00CC;
  --purple-soft: #F3E2FF;
  --purple-glow: rgba(195, 0, 255, 0.35);

  --ink: #1A1320;
  --ink-soft: #4A4055;
  --muted: #7A7184;

  --bg: #FBF8FE;
  --surface: #FFFFFF;
  --line: #ECE6F2;
  --guide: #E6E6EA;   /* blueprint guide lines — neutral light gray (Stripe-like) */

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(26, 19, 32, 0.06);
  --shadow-md: 0 10px 30px rgba(26, 19, 32, 0.08);
  --shadow-glow: 0 12px 34px -8px var(--purple-glow);

  --maxw: 1100px;           /* span between the two vertical blueprint lines (wide screens) */
  --maxw-narrow: 720px;
  --frame-margin: 24px;     /* min gap from viewport edge to each vertical line */
  --gutter: 16px;           /* breathing room between content and a line / frame edge */
  /* The frame: identical for the vertical guide lines AND every section
     container, so all content edges align exactly to the lines. */
  --frame-w: min(100% - (var(--frame-margin) * 2), var(--maxw));

  --topbar-h: 56px;
}

/* ============================================================
   Reset & base
============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  position: relative;
  font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.6;
  /* Clean, neutral background — the gray blueprint lines are the only
     background element (no colored glows). */
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Background texture — sits above the bg color/glows but behind ALL content
   (z-index:-1). It scrolls WITH the page (absolute, full document height).

   ACTIVE: vertical structural guides. This element is locked to the SAME
   width as .container's content area (max 1040px, centered), so the dotted
   vertical lines fall exactly on the layout's left margin, right margin and
   central axis — the page's own wireframe blueprint, aligned on every screen.

   Earlier full-page texture experiments are kept commented at the very end of
   this file (search "TEXTURE BACKUPS") for easy revert. */
body::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--frame-w);   /* exact same frame as every .container outer box */
  z-index: -1;
  pointer-events: none;

  /* Two crisp solid 1px columns at the left & right edges of the content
     area — the page's margin guides (Stripe-style). No centre line. */
  background-image:
    linear-gradient(var(--guide), var(--guide)),
    linear-gradient(var(--guide), var(--guide));
  background-size: 1px 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: var(--frame-w);     /* outer box aligns exactly to the vertical lines */
  margin-inline: auto;
  padding-inline: var(--gutter);   /* content never touches the lines */
}
.container--narrow { max-width: var(--maxw-narrow); }

/* ============================================================
   Buttons
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-align: center;
}
.btn--primary {
  background: linear-gradient(135deg, var(--purple) 0%, #A800E0 100%);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -8px var(--purple-glow);
}
.btn--primary:active { transform: translateY(0); }
.btn--lg {
  padding: 16px 36px;
  font-size: 1.0625rem;
}

/* ============================================================
   Section title
============================================================ */
.section-title {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 36px;
}
.section-title--left { text-align: left; }

/* ============================================================
   1. Top bar + countdown
============================================================ */
.topbar {
  position: static;
  z-index: 100;
  background: rgba(190, 0, 253, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  min-height: var(--topbar-h);
  border-bottom: 1px solid #BE00FD;
}
.topbar__inner {
  width: var(--frame-w);
  margin-inline: auto;
  padding: 8px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
}
.topbar__label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.countdown {
  display: flex;
  align-items: center;
  gap: 4px;
}
.countdown__sep { display: none; }
.countdown__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  padding: 4px 6px;
  background: rgba(190, 0, 253, 0.12);
  border-radius: 8px;
}
.countdown__num {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #BE00FD;
}
.countdown__unit {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #000000;
  margin-top: 2px;
}
.countdown__sep {
  font-weight: 600;
  color: var(--purple);
  opacity: 0.7;
}

/* ============================================================
   Site header / logo
============================================================ */
.site-header { padding: 22px 0 4px; }
.site-header__inner { display: flex; justify-content: center; }
.site-logo { display: inline-flex; }
.site-logo img { display: block; height: 44px; width: auto; }
.site-logo--footer img { height: 38px; }

@media (max-width: 600px) {
  .site-logo img { height: 38px; }
  .site-logo--footer img { height: 34px; }
}

/* ============================================================
   2. Hero
============================================================ */
.hero { padding: 36px 0 56px; }
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.pill-badge__amount {
  color: var(--purple);
  font-weight: 600;
}
.hero__headline {
  font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* 42px on desktop, scales down on small screens to avoid overflow */
  font-size: clamp(1.75rem, 6.5vw, 42px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.18;
  max-width: 940px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  color: var(--ink);
}
.hero__headline strong { font-weight: 600; }
.hero__headline .text-purple { color: var(--purple); }
.hero__sub {
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 600px;
  margin-bottom: 32px;
}

/* Social proof */
.social-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.avatars { display: flex; }
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  object-fit: cover;
  display: block;
  margin-left: -10px;
  box-shadow: var(--shadow-sm);
}
.avatar:first-child { margin-left: 0; }
.social-proof__text {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Line 1: stars + score + count, single row */
.social-proof__rating {
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
}
.stars {
  color: #FFB800;
  font-size: calc(1rem + 2px);
  letter-spacing: 2px;
}
.social-proof__score {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}
.social-proof__count {
  color: var(--muted);
  font-size: 0.85rem;
}
/* Line 2 */
.social-proof__meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.social-proof__meta strong { font-weight: 600; color: var(--ink); }

/* ============================================================
   3. Logo strip
============================================================ */
.logo-strip { padding: 34px 0; }
/* Frame ONLY the carousel (title stays above, outside the box). The two
   horizontal rules run edge-to-edge across the full viewport, crossing the
   vertical margin guides — full-width rules with the logos enclosed between. */
.logo-strip__framed {
  position: relative;
  padding: 30px 0;
}
.logo-strip__framed::before,
.logo-strip__framed::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;          /* full viewport width, beyond the content margins */
  height: 1px;
  background: var(--guide);
}
.logo-strip__framed::before { top: 0; }
.logo-strip__framed::after { bottom: 0; }
.logo-strip__title {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
/* Infinite scrolling carousel */
.logo-carousel {
  position: relative;
  overflow: hidden;
  /* Edge fade — transparent at edges, opaque in the middle.
     Works on any background since it masks the element itself. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.logo-carousel__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: logo-scroll 45s linear infinite;
  will-change: transform;
}
.company-logo {
  flex: 0 0 auto;
  height: 43px;
  width: auto;
  /* Trailing margin on every logo (incl. last of each set) keeps spacing
     uniform across the loop seam so translateX(-50%) is seamless. */
  margin-right: 50px;
  opacity: 0.9;
  user-select: none;
}
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   4. Timeline
============================================================ */
.timeline-section { padding: 64px 0; }
.timeline {
  position: relative;
  /* fills the unified container so columns are wider + images larger */
  margin: 0 auto;
}
/* Vertical line */
.timeline__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 27px;            /* mobile: aligns with dot */
  width: 3px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.timeline__line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--purple), #A800E0);
  box-shadow: 0 0 12px var(--purple-glow);
  transition: height .15s linear;
}
.timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;   /* mobile: image stacked above text */
  gap: 14px;
  padding: 0 0 44px 64px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute;
  left: 19px;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--line);
  z-index: 2;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.timeline__item.is-active .timeline__dot {
  border-color: var(--purple);
  box-shadow: 0 0 0 5px var(--purple-soft);
  transform: scale(1.1);
}
/* Every timeline image shares one fixed aspect ratio — identical size across
   all 7 days. Width is driven by the column; height follows automatically.
   Real <img> added later crops cleanly to the ratio via object-fit: cover. */
.timeline__media .img-placeholder,
.timeline__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
}
.timeline__content { display: flex; flex-direction: column; align-items: flex-start; }
.day-badge {
  display: inline-block;
  background: var(--purple-soft);
  color: var(--purple-dark);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.timeline__title {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.timeline__desc { color: var(--ink-soft); }
.timeline__desc strong { font-weight: 600; color: var(--ink); }

/* ============================================================
   Image placeholders
============================================================ */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(195,0,255,0.04) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #F6ECFC, #EFE3F8);
  border: 1px dashed rgba(195, 0, 255, 0.35);
  border-radius: var(--radius);
  color: var(--purple-dark);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  width: 100%;
}
.img-placeholder--tall { height: 360px; }

/* ============================================================
   5. CTA band
============================================================ */
.cta-band {
  text-align: center;
  padding: 16px 0 40px;
}

/* ============================================================
   6. Authority
============================================================ */
.authority { padding: 64px 0; }
.authority__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.authority__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.authority__story p { color: var(--ink-soft); margin-bottom: 14px; }
.authority__story p:last-child { margin-bottom: 0; }

/* ============================================================
   7. FAQ accordion
============================================================ */
.faq { padding: 64px 0; }
.accordion__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.accordion__item.is-open {
  border-color: rgba(195, 0, 255, 0.4);
  box-shadow: var(--shadow-md);
}
.accordion__trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  font-family: inherit;
}
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--purple);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.accordion__icon::before { /* horizontal */
  top: 50%; left: 0;
  width: 100%; height: 3px;
  transform: translateY(-50%);
}
.accordion__icon::after { /* vertical */
  left: 50%; top: 0;
  width: 3px; height: 100%;
  transform: translateX(-50%);
}
.accordion__item.is-open .accordion__icon::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}
.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.accordion__panel p {
  padding: 0 22px 20px;
  color: var(--ink-soft);
}

/* ============================================================
   8. Final CTA + footer
============================================================ */
.final-cta { padding: 72px 0 88px; }
.final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.final-cta__tag {
  display: inline-block;
  background: var(--purple-soft);
  color: var(--purple-dark);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.final-cta__title {
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 760px;
  margin-bottom: 36px;
}
.final-cta__countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}
.final-cta__countdown-label {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* Large countdown variant — reuses .countdown__* tokens at bigger scale */
.countdown--lg { gap: 6px; }
.countdown--lg .countdown__block {
  min-width: 76px;
  padding: 14px 12px;
  border-radius: 14px;
  background: rgba(190, 0, 253, 0.10);
  border: 1px solid rgba(190, 0, 253, 0.18);
}
.countdown--lg .countdown__num { font-size: 2.2rem; }
.countdown--lg .countdown__unit { font-size: 0.65rem; margin-top: 6px; }
.countdown--lg .countdown__sep { font-size: 1.6rem; }

@media (max-width: 520px) {
  .countdown--lg .countdown__block { min-width: 60px; padding: 12px 8px; }
  .countdown--lg .countdown__num { font-size: 1.7rem; }
  .countdown--lg .countdown__sep { font-size: 1.2rem; }
}

.footer {
  border-top: 1px solid var(--line);
  padding: 28px 0;
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.footer__copy { font-size: 0.85rem; color: var(--muted); }

/* ============================================================
   Scroll reveal
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Responsive — tablet & up
============================================================ */
@media (min-width: 720px) {
  .countdown__block { min-width: 50px; }

  /* Timeline: central line, each day is ONE flex row with two columns
     straddling the line. The 96px gap is centered on the line; the dot
     sits in it. align-items:center keeps image + text on the same row. */
  .timeline__line { left: 50%; transform: translateX(-50%); }
  .timeline__item {
    flex-direction: row;     /* DOM order: media (image) left, content (text) right */
    align-items: center;
    gap: 96px;
    padding: 0 0 64px 0;
  }
  .timeline__media,
  .timeline__content {
    flex: 1 1 0;
    min-width: 0;
  }
  .timeline__dot { left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .timeline__item.is-active .timeline__dot { transform: translate(-50%, -50%) scale(1.1); }

  /* Alternate sides. The progress line is .timeline's first child, so the
     7 days are children 2..8: Dan 1,3,5,7 are :nth-child(even). Flip those
     to row-reverse → text left / image right. Dan 2,4,6 keep the default
     row → image left / text right. */
  .timeline__item:nth-child(even) { flex-direction: row-reverse; }
  .timeline__item:nth-child(even) .timeline__content {
    align-items: flex-end;
    text-align: right;
  }

  .authority__inner { grid-template-columns: 5fr 6fr; gap: 48px; }
}

@media (min-width: 980px) {
  .hero { padding: 56px 0 72px; }
}

/* Logo carousel — mobile sizing (keeps scrolling + fades) */
@media (max-width: 600px) {
  .company-logo { height: 34px; margin-right: 34px; }
  .logo-carousel {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  }

  /* Vertical guide lines stop right after the logo carousel (JS measures
     its bottom into --guide-height). The top sections keep their guides. */
  body::before {
    bottom: auto;
    height: var(--guide-height, 100%);
  }

  /* Sections below the carousel reclaim width now that the guides are gone. */
  .timeline-section .container,
  .cta-band .container,
  .authority .container,
  .faq .container,
  .final-cta .container {
    --frame-margin: 12px;
    padding-inline: 6px;
  }

  /* Timeline: pull the rail to the far left and shrink the content indent so
     the day cards reclaim the empty left gutter. */
  .timeline__line { left: 7px; }
  .timeline__dot { left: -1px; }
  .timeline__item { padding-left: 38px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  .logo-carousel__track { animation: none; }
}

/* ============================================================
   Modal / pop-up d'inscription
============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(26, 19, 32, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  position: relative;
  background: var(--surface);
  border-radius: 24px;
  padding: 44px 36px 36px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 24px 64px -12px rgba(26, 19, 32, 0.28), 0 0 0 1px rgba(195, 0, 255, 0.12);
  transform: translateY(28px) scale(0.97);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  opacity: 0;
}
.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--purple-soft);
  color: var(--purple-dark);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.modal__close:hover { background: var(--line); transform: scale(1.08); }

.modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
}
.modal__logo {
  height: 36px;
  width: auto;
  margin-bottom: 16px;
}
.modal__title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--ink);
}
.modal__subtitle {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.modal__subtitle strong { color: var(--purple); font-weight: 600; }

.modal__form { display: flex; flex-direction: column; gap: 16px; }
.modal__field { display: flex; flex-direction: column; gap: 6px; }
.modal__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.modal__req {
  color: var(--purple);
  font-weight: 600;
}
.modal__input {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.modal__input::placeholder { color: var(--muted); }
.modal__input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(195, 0, 255, 0.12);
}
.modal__submit { width: 100%; margin-top: 4px; }
/* Icône Material dans le bouton submit */
.modal__arrow {
  font-size: 1.2rem !important;
  line-height: 1 !important;
  vertical-align: middle;
}

/* intl-tel-input overrides — champ unifié pleine largeur */
.modal__phone-wrap { position: relative; }

/* Le wrapper .iti devient le "champ" visuel — pleine largeur, flex row */
.modal__phone-wrap .iti {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  overflow: visible;
}
.modal__phone-wrap .iti:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(195, 0, 255, 0.12);
}

/* Le conteneur du sélecteur passe en flux normal (au lieu de absolute)
   pour occuper sa place et ne plus chevaucher l'input. */
.modal__phone-wrap .iti__country-container {
  position: relative !important;
  flex-shrink: 0;
  display: flex;
  inset: auto !important;
}

/* Bouton country — pas de bordure propre, fond transparent, coins gauche */
.modal__phone-wrap .iti__selected-country {
  flex-shrink: 0;
  align-self: stretch;
  display: flex !important;
  align-items: center !important;
  background: transparent;
  border: none;
  border-right: 1.5px solid var(--line);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 0 10px 0 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.modal__phone-wrap .iti__selected-country:hover {
  background: var(--purple-soft);
}
.modal__phone-wrap .iti__selected-country-primary {
  gap: 6px;
}
.modal__phone-wrap .iti__arrow {
  border-top-color: var(--muted);
  margin-left: 5px;
  transition: border-color 0.15s ease;
}
.modal__phone-wrap .iti__arrow--up {
  border-bottom-color: var(--purple);
  border-top-color: transparent;
}

/* Input — retire sa propre bordure, prend tout l'espace restant */
.modal__input--phone {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  box-shadow: none !important;
  padding: 13px 16px !important;
  outline: none !important;
}

/* Dropdown */
.iti__dropdown-content {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  font-family: "Outfit", system-ui, sans-serif;
}
.iti__search-input {
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: 0.9rem !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--line) !important;
  outline: none !important;
}
.iti__search-input:focus {
  border-bottom-color: var(--purple) !important;
}
.iti__country {
  padding: 9px 14px !important;
  font-size: 0.9rem !important;
  transition: background 0.12s ease !important;
}
.iti__country.iti__highlight,
.iti__country:hover {
  background: var(--purple-soft) !important;
  color: var(--purple-dark) !important;
}
.iti__dial-code { color: var(--muted) !important; }

/* Drapeaux emoji — nets à toute résolution.
   On masque UNIQUEMENT le sprite du pays sélectionné (remplacé par l'emoji).
   Les drapeaux du dropdown gardent leur sprite. */
.modal__phone-wrap .iti__selected-country-primary .iti__flag {
  display: none !important;
}
.iti__flag-emoji {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-right: 2px;
}

@media (max-width: 500px) {
  .modal { padding: 40px 20px 28px; }
  .modal__title { font-size: 1.3rem; }
}

/* ============================================================
   TEXTURE BACKUPS — previous background experiments.
   The ACTIVE texture is the vertical structural guides defined on
   `body::before` near the top of this file. To restore one of these,
   replace the `body::before` rule's background/position/width/mask
   with the snippet below (they used position:absolute; inset:0).

   --- Full technical grid ---
   background-image:
     linear-gradient(to right, rgba(99, 91, 115, 0.055) 1px, transparent 1px),
     linear-gradient(to bottom, rgba(99, 91, 115, 0.055) 1px, transparent 1px);
   background-size: 40px 40px;
   background-position: center top;
   mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);

   --- Horizontal dotted baseline guides ---
   background-image: radial-gradient(circle, rgba(99, 91, 115, 0.06) 1px, transparent 1.6px);
   background-size: 9px 88px;
   background-position: center top;
   mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
============================================================ */